TCA-986 - completed modal & enrolled modal: optimize bg, move cert to completed if reqs are met

Author: vas3a

src-ts/lib/modals/base-modal/index.ts

@@ -1 +1 @@
-export { default as BaseModal } from './BaseModal'
+export { default as BaseModal, type BaseModalProps } from './BaseModal'

src-ts/lib/styles/variables/_palette.scss

@@ -198,6 +198,7 @@ $tc-grad16: linear-gradient(265.38deg, $turq-100 1.99%, $teal-100 98.19%);
 $tc-grad17: linear-gradient(265.38deg, #363D8C 1.99%, #723390 98.19%);
 $tc-grad18: linear-gradient(84.92deg, #363D8C 2.08%, #723390 97.43%);
 $tc-grad19: linear-gradient(83.58deg, #7B21A7 2.28%, #1974AD 97.67%);
+$tc-grad20: linear-gradient(30deg, #05456D 2.12%, #0A7AC0 97.43%);
 
 
 /*  OPACITY */

src-ts/tools/learn/certification-details/enrolled-modal/EnrolledModal.module.scss

@@ -9,10 +9,10 @@
 
 .enrolledModal {
     color: $tc-white;
-    background: url(./bg.png) center no-repeat;
+    background: url(./bg.jpg) center no-repeat, $tc-grad20;
 
     @include ltemd {
-        background: url(./bg-mobile.png) 0 0 no-repeat;
+        background: url(./bg-mobile.jpg) 0 0 no-repeat, $tc-grad20;
         background-size: cover;
     }
 

src-ts/tools/learn/certification-details/enrolled-modal/bg-mobile.jpg

@@ -20,10 +20,13 @@ import {
 } from '../../../../lib'
 import {
     enrollTCACertificationAsync,
+    TCACertificationCheckCompleted,
+    TCACertificationProgress,
     TCACertificationProgressProviderData,
     TCACertificationProviderData,
     useGetTCACertification,
     useGetTCACertificationProgress,
+    useTCACertificationCheckCompleted,
     useTcaCertificationModal,
 } from '../../learn-lib'
 import { perks } from '../certification-details-modal/certif-details-content/data'
@@ -66,8 +69,17 @@ const EnrollmentPage: FC<{}> = () => {
 
     const ready: boolean = profileReady && certificationReady && progressReady && !!profile
 
+    const firstResourceProgress: TCACertificationProgress['resourceProgresses'][0] | undefined
+        = progress?.resourceProgresses?.[0]
+
+    const { certification: tcaCertificationName }: TCACertificationCheckCompleted = useTCACertificationCheckCompleted(
+        firstResourceProgress?.resourceProgressType ?? '',
+        firstResourceProgress?.resourceProgressId ?? '',
+        { enabled: !!firstResourceProgress?.resourceProgressType },
+    )
+
     const tcaCertificationCompletedModal: ReactNode = useTcaCertificationModal(
-        progress ? certification.dashedName : undefined,
+        tcaCertificationName,
         navToCertificationDetails,
     )
 

src-ts/tools/learn/certification-details/enrolled-modal/bg-mobile.png

@@ -18,8 +18,10 @@ export interface TCACertificationProgress extends LearnModelBase {
     completedAt: null | Date
     certificationProgress: number
     resourceProgresses: [{
-        status: UserCertificationProgressStatus,
+        resourceProgressId: string
+        resourceProgressType: 'FccCertificationProgress'
         fccCertificationProgress: TCAFccCertificationProgress
+        status: UserCertificationProgressStatus,
     }]
     userHandle: string
     userId: number

src-ts/tools/learn/certification-details/enrolled-modal/bg.jpg

@@ -1,11 +1,11 @@
 @import '../../../../lib/styles/includes';
 
-.completedModal {
+.completedModal.completedModal {
     color: $tc-white;
-    background: url(./bg.png) center no-repeat;
+    background: url(./bg.jpg) center no-repeat, $tc-grad20;
 
     @include ltemd {
-        background: url(./bg-mobile.png) 0 0 no-repeat;
+        background: url(./bg-mobile.jpg) 0 0 no-repeat, $tc-grad20;
         background-size: cover;
     }