Merge pull request #297 from topcoder-platform/TCA-428_ui-for-course-instructions

TCA-428 - add "completion suggestions" on course landing page

Author: vas3a

src-ts/tools/learn/course-details/CourseDetailsPage.module.scss

@@ -47,10 +47,14 @@
         @extend .body-main;
         margin-top: $space-xxl;
     }
-    
+
     p {
         margin: $space-sm 0;
     }
+
+    :global(.details.mtop) {
+        margin-top: $space-xxl;
+    }
 }
 
 .coming-soon {

src-ts/tools/learn/course-details/CourseDetailsPage.tsx

@@ -99,6 +99,27 @@ const CourseDetailsPage: FC<{}> = () => {
         )
     }
 
+    function getCompletionSuggestion(): ReactNode {
+        if (!course) {
+            return
+        }
+
+        return progress?.status === UserCertificationProgressStatus.completed ? (
+            <></>
+        ) : (
+            !!course.completionSuggestions?.length && (
+                <>
+                    <h3 className='details mtop'>Suggestions for completing this course</h3>
+
+                    <div
+                        className={styles['text']}
+                        dangerouslySetInnerHTML={{ __html: (course.completionSuggestions ?? []).join('<br /><br />') }}
+                    ></div>
+                </>
+            )
+        )
+    }
+
     function getFooter(): ReactNode {
         if (!resourceProvider) {
             return
@@ -141,6 +162,7 @@ const CourseDetailsPage: FC<{}> = () => {
 
                         <div className={styles['description']}>
                             {getDescription()}
+                            {getCompletionSuggestion()}
                             <div className={styles['coming-soon']}>
                                 <PromoCourse />
                             </div>

src-ts/tools/learn/learn-lib/courses-provider/courses-functions/learn-course.model.ts

@@ -4,6 +4,7 @@ import { LearnModule } from '../../lesson-provider'
 export interface LearnCourse extends LearnModelBase {
     certification: string
     certificationId: string
+    completionSuggestions: Array<string>
     estimatedCompletionTime: {
         units: string
         value: number