From f4d55e54cad820df95f34230400da7da49bfcc72 Mon Sep 17 00:00:00 2001
From: Vasilica Olariu <olariu.vasilica@gmail.com>
Date: Fri, 16 Sep 2022 16:54:40 +0300
Subject: [PATCH] TCA-428 - add "completion suggestions" on course landing page

---
 .../CourseDetailsPage.module.scss             |  6 ++++-
 .../course-details/CourseDetailsPage.tsx      | 22 +++++++++++++++++++
 .../courses-functions/learn-course.model.ts   |  1 +
 3 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/src-ts/tools/learn/course-details/CourseDetailsPage.module.scss b/src-ts/tools/learn/course-details/CourseDetailsPage.module.scss
index 96aa7ad71..605a7afe9 100644
--- a/src-ts/tools/learn/course-details/CourseDetailsPage.module.scss
+++ b/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 {
diff --git a/src-ts/tools/learn/course-details/CourseDetailsPage.tsx b/src-ts/tools/learn/course-details/CourseDetailsPage.tsx
index 756bbdfb1..856829c6c 100644
--- a/src-ts/tools/learn/course-details/CourseDetailsPage.tsx
+++ b/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>
diff --git a/src-ts/tools/learn/learn-lib/courses-provider/courses-functions/learn-course.model.ts b/src-ts/tools/learn/learn-lib/courses-provider/courses-functions/learn-course.model.ts
index 34a4e2442..b9c7010a4 100644
--- a/src-ts/tools/learn/learn-lib/courses-provider/courses-functions/learn-course.model.ts
+++ b/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