diff --git a/src-ts/lib/modals/base-modal/index.ts b/src-ts/lib/modals/base-modal/index.ts index 69e0ee8a1..877579c0e 100644 --- a/src-ts/lib/modals/base-modal/index.ts +++ b/src-ts/lib/modals/base-modal/index.ts @@ -1 +1 @@ -export { default as BaseModal } from './BaseModal' +export { default as BaseModal, type BaseModalProps } from './BaseModal' diff --git a/src-ts/lib/styles/variables/_palette.scss b/src-ts/lib/styles/variables/_palette.scss index 1c163c58d..948935ac0 100644 --- a/src-ts/lib/styles/variables/_palette.scss +++ b/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 */ diff --git a/src-ts/tools/learn/certification-details/enrolled-modal/EnrolledModal.module.scss b/src-ts/tools/learn/certification-details/enrolled-modal/EnrolledModal.module.scss index 385ec9192..b5fba59de 100644 --- a/src-ts/tools/learn/certification-details/enrolled-modal/EnrolledModal.module.scss +++ b/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; } diff --git a/src-ts/tools/learn/certification-details/enrolled-modal/bg-mobile.jpg b/src-ts/tools/learn/certification-details/enrolled-modal/bg-mobile.jpg new file mode 100644 index 000000000..f9a7374e9 Binary files /dev/null and b/src-ts/tools/learn/certification-details/enrolled-modal/bg-mobile.jpg differ diff --git a/src-ts/tools/learn/certification-details/enrolled-modal/bg-mobile.png b/src-ts/tools/learn/certification-details/enrolled-modal/bg-mobile.png deleted file mode 100644 index 10a51257b..000000000 Binary files a/src-ts/tools/learn/certification-details/enrolled-modal/bg-mobile.png and /dev/null differ diff --git a/src-ts/tools/learn/certification-details/enrolled-modal/bg.jpg b/src-ts/tools/learn/certification-details/enrolled-modal/bg.jpg new file mode 100644 index 000000000..d640b48e4 Binary files /dev/null and b/src-ts/tools/learn/certification-details/enrolled-modal/bg.jpg differ diff --git a/src-ts/tools/learn/certification-details/enrolled-modal/bg.png b/src-ts/tools/learn/certification-details/enrolled-modal/bg.png deleted file mode 100644 index 631464b04..000000000 Binary files a/src-ts/tools/learn/certification-details/enrolled-modal/bg.png and /dev/null differ diff --git a/src-ts/tools/learn/certification-details/enrollment-page/EnrollmentPage.tsx b/src-ts/tools/learn/certification-details/enrollment-page/EnrollmentPage.tsx index 9f795c477..15f721b20 100644 --- a/src-ts/tools/learn/certification-details/enrollment-page/EnrollmentPage.tsx +++ b/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, ) 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 fafd43abb..83ce58966 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 @@ -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 diff --git a/src-ts/tools/learn/learn-lib/tca-certification-completed-modal/TCACertificationCompletedModal.module.scss b/src-ts/tools/learn/learn-lib/tca-certification-completed-modal/TCACertificationCompletedModal.module.scss index cb95d3181..74a1bcc5d 100644 --- a/src-ts/tools/learn/learn-lib/tca-certification-completed-modal/TCACertificationCompletedModal.module.scss +++ b/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; } diff --git a/src-ts/tools/learn/learn-lib/tca-certification-completed-modal/TCACertificationCompletedModal.tsx b/src-ts/tools/learn/learn-lib/tca-certification-completed-modal/TCACertificationCompletedModal.tsx index 6e36a7ccb..34e01e765 100644 --- a/src-ts/tools/learn/learn-lib/tca-certification-completed-modal/TCACertificationCompletedModal.tsx +++ b/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 const storeKey: string = props.certification?.dashedName && `tca-cert-completed[${props.certification.dashedName}]` const [isOpen, setIsOpen]: [boolean, Dispatch>] - = useLocalStorage(storeKey, false) + = useSessionStorage(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 return (