Merge branch 'dev' into TCA-994

Author: kkartunov

src-ts/.eslintrc.js

@@ -73,7 +73,7 @@ module.exports = {
         ],
         'complexity': [
             'error',
-            11
+            14
         ],
         'import/extensions': 'off',
         'import/no-named-default':  'off',

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/certificate-preview/CertificatePreview.module.scss

@@ -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/certificate-preview/CertificatePreview.tsx

@@ -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/certificate-preview/index.ts

@@ -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/certification-details/certification-curriculum/CertificationCurriculum.tsx

@@ -85,7 +85,7 @@ const CourseCard: FC<CourseCardProps> = (props: CourseCardProps) => {
 
     return (
         <CurriculumCard
-            badgeTrackType={props.certification.trackType ?? 'DEV'}
+            badgeTrackType={props.certification.certificationCategory.track ?? 'DEV'}
             title={props.certification.title ?? 'Responsive Web Design Certification'}
             cta={renderCta()}
             status={props.isEnrolled ? props.progress?.status : undefined}

src-ts/tools/learn/certification-details/certification-curriculum/certification-summary/CertificationSummary.module.scss

@@ -1,25 +1,24 @@
 import { FC, ReactNode } from 'react'
 import classNames from 'classnames'
 
-import { Button, IconOutline, IconSolid, Tooltip, UserProfile } from '../../../../lib'
+import { Button, IconOutline, IconSolid, Tooltip } from '../../../../lib'
 import {
     CompletionTimeRange,
     LearnLevelIcon,
     ProvidersLogoList,
     StickySidebar,
+    TCACertificatePreview,
     TCACertification,
     TCACertificationProgress,
 } from '../../learn-lib'
 import { EnrollCtaBtn } from '../enroll-cta-btn'
-import { CertificatePreview } from '../certificate-preview'
-import { getTCACertificateUrl } from '../../learn.routes'
+import { getTCACertificateUrl, getTCACertificationValidationUrl } from '../../learn.routes'
 
 import styles from './CertificationDetailsSidebar.module.scss'
 
 interface CertificationDetailsSidebarProps {
     certification: TCACertification
     enrolled: boolean
-    profile?: UserProfile
     certProgress?: TCACertificationProgress
 }
 
@@ -38,13 +37,18 @@ function renderTooltipContents(icon: ReactNode, text: Array<string>): ReactNode
 const CertificationDetailsSidebar: FC<CertificationDetailsSidebarProps> = (props: CertificationDetailsSidebarProps) => {
     const completed: boolean = !!props.certProgress?.completedAt
 
+    const validateLink: string
+        = getTCACertificationValidationUrl(props.certProgress?.completionUuid as string ?? '')
+
     return (
         <StickySidebar>
             <div className={styles['certificate-placeholder']}>
-                <CertificatePreview
+                <TCACertificatePreview
                     certification={props.certification}
-                    profile={props.profile}
-                    completedDate={props.certProgress?.completedAt ?? undefined}
+                    userName={props.certProgress?.userName}
+                    tcHandle={props.certProgress?.userHandle}
+                    completedDate={props.certProgress?.completedAt as unknown as string ?? ''}
+                    validateLink={validateLink}
                 />
             </div>
             {completed && props.certification && (