TCA-986 - completed modal & enrolled modal fixes -> dev

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/enrollment-page/EnrollmentPage.tsx

@@ -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/learn-lib/data-providers/tca-certifications-provider/tca-certification-progress/tca-certification-progress.model.ts

@@ -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/learn-lib/tca-certification-completed-modal/TCACertificationCompletedModal.module.scss

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

src-ts/tools/learn/learn-lib/tca-certification-completed-modal/TCACertificationCompletedModal.tsx

@@ -1,12 +1,12 @@
 import { Dispatch, FC, SetStateAction, useEffect } from 'react'
 
-import { BaseModal, Button, useLocalStorage } from '../../../../lib'
+import { BaseModal, BaseModalProps, Button, useSessionStorage } from '../../../../lib'
 import { TCACertification } from '../data-providers'
 import { getTCACertificateUrl } from '../../learn.routes'
 
 import styles from './TCACertificationCompletedModal.module.scss'
 
-interface TCACertificationCompletedModalProps {
+interface TCACertificationCompletedModalProps extends BaseModalProps {
     certification: TCACertification
     isOpen: boolean
 }
@@ -17,19 +17,15 @@ const TCACertificationCompletedModal: FC<TCACertificationCompletedModalProps>
     const storeKey: string = props.certification?.dashedName && `tca-cert-completed[${props.certification.dashedName}]`
 
     const [isOpen, setIsOpen]: [boolean, Dispatch<SetStateAction<boolean>>]
-        = useLocalStorage<boolean>(storeKey, false)
+        = useSessionStorage<boolean>(storeKey, false)
 
     function handleClick(): void {
-        handleClose()
+        props.onClose()
         window.open(getTCACertificateUrl(props.certification.dashedName), '_blank')
     }
 
-    function handleClose(): void {
-        setIsOpen(false)
-    }
-
     useEffect(() => {
-        if (!storeKey || localStorage.getItem(storeKey) !== null) {
+        if (!storeKey || sessionStorage.getItem(storeKey) !== null) {
             return
         }
 
@@ -38,7 +34,7 @@ const TCACertificationCompletedModal: FC<TCACertificationCompletedModalProps>
 
     return (
         <BaseModal
-            onClose={handleClose}
+            onClose={props.onClose}
             open={isOpen}
             size='sm'
             classNames={{ modal: styles.completedModal, root: styles.modalRoot }}