From 06372f785efaf781ff33ceb316e3178b9cd6b441 Mon Sep 17 00:00:00 2001
From: Vasilica <olariu.vasilica@gmail.com>
Date: Fri, 17 Feb 2023 16:03:49 +0200
Subject: [PATCH] TCA-989 - update completed state for certif details page

---
 .../CertificationDetailsPage.tsx                      |  3 +++
 .../CertificationCurriculum.tsx                       |  6 +++++-
 .../CertificationSummary.module.scss                  | 11 +++++++++--
 .../certification-summary/CertificationSummary.tsx    |  7 +++++++
 .../tca-certification-progress.model.ts               |  5 ++++-
 5 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/src-ts/tools/learn/certification-details/CertificationDetailsPage.tsx b/src-ts/tools/learn/certification-details/CertificationDetailsPage.tsx
index fda9a668d..b0d1e150a 100644
--- a/src-ts/tools/learn/certification-details/CertificationDetailsPage.tsx
+++ b/src-ts/tools/learn/certification-details/CertificationDetailsPage.tsx
@@ -4,6 +4,7 @@ import classNames from 'classnames'
 
 import {
     TCACertificationProgressProviderData,
+    TCACertificationProgressStatus,
     TCACertificationProviderData,
     useGetTCACertification,
     useGetTCACertificationProgress,
@@ -58,6 +59,7 @@ const CertificationDetailsPage: FC<{}> = () => {
 
     const isEnrolled: boolean = progressReady && !!progress
     const isNotEnrolledView: boolean = !progressReady || !progress
+    const isCompleted: boolean = progress?.status === TCACertificationProgressStatus.completed
 
     function renderCertificationCurriculum(): ReactNode {
         return (
@@ -65,6 +67,7 @@ const CertificationDetailsPage: FC<{}> = () => {
                 <CertificationCurriculum
                     certification={certification}
                     isEnrolled={isEnrolled}
+                    isCompleted={isCompleted}
                     certsProgress={certsProgress}
                 />
             </div>
diff --git a/src-ts/tools/learn/certification-details/certification-curriculum/CertificationCurriculum.tsx b/src-ts/tools/learn/certification-details/certification-curriculum/CertificationCurriculum.tsx
index 125c5eb55..815307293 100644
--- a/src-ts/tools/learn/certification-details/certification-curriculum/CertificationCurriculum.tsx
+++ b/src-ts/tools/learn/certification-details/certification-curriculum/CertificationCurriculum.tsx
@@ -17,6 +17,7 @@ interface CertificationCurriculumProps {
     certification: TCACertification
     certsProgress?: ReadonlyArray<LearnUserCertificationProgress>
     isEnrolled: boolean
+    isCompleted: boolean
 }
 
 interface ProgressByIdCollection {
@@ -84,7 +85,10 @@ const CertificationCurriculum: FC<CertificationCurriculumProps> = (props: Certif
                         trackType={props.certification.certificationCategory.track}
                     />
                 </div>
-                <CertificationSummary certification={props.certification} />
+                <CertificationSummary
+                    certification={props.certification}
+                    isCompleted={props.isCompleted}
+                />
             </div>
         </div>
     )
diff --git a/src-ts/tools/learn/certification-details/certification-curriculum/certification-summary/CertificationSummary.module.scss b/src-ts/tools/learn/certification-details/certification-curriculum/certification-summary/CertificationSummary.module.scss
index 51e400c6b..666891ed3 100644
--- a/src-ts/tools/learn/certification-details/certification-curriculum/certification-summary/CertificationSummary.module.scss
+++ b/src-ts/tools/learn/certification-details/certification-curriculum/certification-summary/CertificationSummary.module.scss
@@ -8,8 +8,7 @@
 
     > svg {
         display: block;
-        width: 96px;
-        height: 96px;
+        @include icon-size(96);
     }
 
     :global(.body-large-bold) {
@@ -19,3 +18,11 @@
         }
     }
 }
+
+.completedIcon {
+    margin-left: auto;
+    svg {
+        @include icon-size(52);
+        color: $turq-75;
+    }
+}
\ No newline at end of file
diff --git a/src-ts/tools/learn/certification-details/certification-curriculum/certification-summary/CertificationSummary.tsx b/src-ts/tools/learn/certification-details/certification-curriculum/certification-summary/CertificationSummary.tsx
index 191d04736..59490dee7 100644
--- a/src-ts/tools/learn/certification-details/certification-curriculum/certification-summary/CertificationSummary.tsx
+++ b/src-ts/tools/learn/certification-details/certification-curriculum/certification-summary/CertificationSummary.tsx
@@ -1,11 +1,13 @@
 import { FC } from 'react'
 
+import { IconSolid } from '../../../../../lib'
 import { CertificateBadgeIcon, TCACertification } from '../../../learn-lib'
 
 import styles from './CertificationSummary.module.scss'
 
 interface CertificationSummaryProps {
     certification: TCACertification
+    isCompleted?: boolean
 }
 
 const CertificationSummary: FC<CertificationSummaryProps> = (props: CertificationSummaryProps) => (
@@ -20,6 +22,11 @@ const CertificationSummary: FC<CertificationSummaryProps> = (props: Certificatio
                 {props.certification.title}
             </span>
         </div>
+        {props.isCompleted && (
+            <div className={styles.completedIcon}>
+                <IconSolid.CheckCircleIcon />
+            </div>
+        )}
     </div>
 )
 
diff --git a/src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certification-progress/tca-certification-progress.model.ts b/src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certification-progress/tca-certification-progress.model.ts
index 330e938fb..2c6dd6888 100644
--- a/src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certification-progress/tca-certification-progress.model.ts
+++ b/src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certification-progress/tca-certification-progress.model.ts
@@ -2,7 +2,10 @@ import { TCACertification } from '../tca-certification.model'
 
 import { TCAFccCertificationProgress } from './tca-fcc-certification-progress.model'
 
-export type TCACertificationProgressStatus = 'enrolled' | 'completed'
+export enum TCACertificationProgressStatus {
+    enrolled = 'enrolled',
+    completed = 'completed',
+}
 
 export interface TCACertificationProgress {
     id: number