Merge pull request #507 from topcoder-platform/TCA-986_check-for-certif-completed-on-enroll

TCA-986 - TCA cert completed state -> dev

Author: vas3a

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

@@ -24,6 +24,7 @@ import {
     TCACertificationProviderData,
     useGetTCACertification,
     useGetTCACertificationProgress,
+    useTcaCertificationModal,
 } from '../../learn-lib'
 import { perks } from '../certification-details-modal/certif-details-content/data'
 import { PerksSection } from '../perks-section'
@@ -65,6 +66,11 @@ const EnrollmentPage: FC<{}> = () => {
 
     const ready: boolean = profileReady && certificationReady && progressReady && !!profile
 
+    const tcaCertificationCompletedModal: ReactNode = useTcaCertificationModal(
+        progress ? certification.dashedName : undefined,
+        navToCertificationDetails,
+    )
+
     if (ready && profile && !userInfo.current) {
         userInfo.current = { ...profile }
     }
@@ -95,9 +101,15 @@ const EnrollmentPage: FC<{}> = () => {
             })
     }, [certification?.id, profile, setCertificateProgress])
 
+    function navToCertificationDetails(): void {
+        navigate(getTCACertificationPath(certification.dashedName))
+    }
+
     function closeEnrolledModal(): void {
         setIsEnrolledModalOpen(false)
-        navigate(getTCACertificationPath(certification.dashedName))
+        if (!tcaCertificationCompletedModal) {
+            navToCertificationDetails()
+        }
     }
 
     function renderMainContent(): ReactNode {
@@ -114,6 +126,7 @@ const EnrollmentPage: FC<{}> = () => {
                     certification={certification}
                     onClose={closeEnrolledModal}
                 />
+                {!isEnrolledModalOpen && tcaCertificationCompletedModal}
             </>
         ) : null
     }

src-ts/tools/learn/course-completed/CourseCompletedPage.tsx

@@ -23,11 +23,11 @@ import {
     UserCertificationProgressProviderData,
     UserCertificationProgressStatus,
     useTCACertificationCheckCompleted,
+    useTcaCertificationModal,
 } from '../learn-lib'
 import { getCertificatePath, getCoursePath, LEARN_PATHS, rootRoute } from '../learn.routes'
 
 import { ReactComponent as StarsSvg } from './stars.svg'
-import { useTcaCertificationModal } from './tca-certification-completed-modal'
 import styles from './CourseCompletedPage.module.scss'
 
 const CourseCompletedPage: FC<{}> = () => {

src-ts/tools/learn/learn-lib/index.ts

@@ -18,4 +18,5 @@ export * from './tca-certificate-preview'
 export * from './use-certificate-canvas-hook'
 export * from './use-certificate-print-hook'
 export * from './use-certificate-scaling-hook'
+export * from './tca-certification-completed-modal'
 export * from './wave-hero'

src-ts/tools/learn/course-completed/tca-certification-completed-modal/TCACertificationCompletedModal.module.scss renamed to src-ts/tools/learn/learn-lib/tca-certification-completed-modal/TCACertificationCompletedModal.module.scss

@@ -1,7 +1,7 @@
 import { Dispatch, FC, SetStateAction, useEffect } from 'react'
 
 import { BaseModal, Button, useLocalStorage } from '../../../../lib'
-import { TCACertification } from '../../learn-lib'
+import { TCACertification } from '../data-providers'
 import { getTCACertificateUrl } from '../../learn.routes'
 
 import styles from './TCACertificationCompletedModal.module.scss'

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

@@ -1,11 +1,11 @@
 import { noop } from 'lodash'
 import { ReactNode } from 'react'
 
-import { TCACertificationProviderData, useGetTCACertification } from '../../learn-lib'
+import { TCACertificationProviderData, useGetTCACertification } from '..'
 
 import TCACertificationCompletedModal from './TCACertificationCompletedModal'
 
-export function useTcaCertificationModal(certificationName?: string): ReactNode {
+export function useTcaCertificationModal(certificationName?: string, onClose: () => void = noop): ReactNode {
 
     const { certification: tcaCertification }: TCACertificationProviderData = useGetTCACertification(
         certificationName ?? '',
@@ -16,7 +16,7 @@ export function useTcaCertificationModal(certificationName?: string): ReactNode
         <TCACertificationCompletedModal
             certification={tcaCertification}
             isOpen={!!tcaCertification}
-            onClose={noop}
+            onClose={onClose}
         />
     )
 }