Merge pull request #509 from topcoder-platform/TCA-989_completed-certif-details-page

TCA-989 - update completed state for certif details page -> dev

Author: vas3a

src-ts/tools/learn/certification-details/CertificationDetailsPage.tsx

@@ -4,6 +4,7 @@ import classNames from 'classnames'
 
 import {
     TCACertificationProgressProviderData,
+    TCACertificationProgressStatus,
     TCACertificationProviderData,
     useGetTCACertification,
     useGetTCACertificationProgress,
@@ -58,13 +59,15 @@ const CertificationDetailsPage: FC<{}> = () => {
 
     const isEnrolled: boolean = progressReady && !!progress
     const isNotEnrolledView: boolean = !progressReady || !progress
+    const isCompleted: boolean = progress?.status === TCACertificationProgressStatus.completed
 
     function renderCertificationCurriculum(): ReactNode {
         return (
             <div className={classNames(styles['text-section'], isEnrolled && styles['no-top'])}>
                 <CertificationCurriculum
                     certification={certification}
                     isEnrolled={isEnrolled}
+                    isCompleted={isCompleted}
                     certsProgress={certsProgress}
                 />
             </div>

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>
     )

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;
+    }
+}

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>
 )
 

src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certification-progress/tca-certification-progress.model.ts

@@ -3,7 +3,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 extends LearnModelBase {
     id: number