Merge pull request #529 from topcoder-platform/TCA-984_enrolled-modal-text

TCA-984 - update enrollment flow -> dev

Author: vas3a

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

@@ -6,7 +6,6 @@ import { TCACertification } from '../../learn-lib'
 import styles from './EnrolledModal.module.scss'
 
 interface EnrolledModalProps {
-    certification: TCACertification
     isOpen: boolean
     onClose: () => void
 }
@@ -29,10 +28,7 @@ const EnrolledModal: FC<EnrolledModalProps> = (props: EnrolledModalProps) => {
         >
             <>
                 <h2 className='details'>
-                    You have Successfully Enrolled in the
-                    {' '}
-                    {props.certification.title}
-                    !
+                    You have successfully enrolled!
                 </h2>
                 <Button buttonStyle='outline' label='Close' onClick={props.onClose} />
             </>

src-ts/tools/learn/certification-details/enrollment-page/EnrollmentPage.tsx

@@ -6,6 +6,7 @@ import {
     SetStateAction,
     useCallback,
     useContext,
+    useEffect,
     useLayoutEffect,
     useRef,
     useState,
@@ -27,7 +28,6 @@ import {
     useGetTCACertification,
     useGetTCACertificationProgress,
     useTCACertificationCheckCompleted,
-    useTcaCertificationModal,
 } from '../../learn-lib'
 import { perks } from '../certification-details-modal/certif-details-content/data'
 import { PerksSection } from '../perks-section'
@@ -60,6 +60,7 @@ const EnrollmentPage: FC<{}> = () => {
     const {
         progress,
         ready: progressReady,
+        refetch: refetchProgress,
         setCertificateProgress,
     }: TCACertificationProgressProviderData = useGetTCACertificationProgress(
         profile?.userId as unknown as string,
@@ -72,17 +73,14 @@ const EnrollmentPage: FC<{}> = () => {
     const firstResourceProgress: TCACertificationProgress['resourceProgresses'][0] | undefined
         = progress?.resourceProgresses?.[0]
 
-    const { certification: tcaCertificationName }: TCACertificationCheckCompleted = useTCACertificationCheckCompleted(
+    const {
+        ready: certCheckReady,
+    }: TCACertificationCheckCompleted = useTCACertificationCheckCompleted(
         firstResourceProgress?.resourceProgressType ?? '',
         firstResourceProgress?.resourceProgressId ?? '',
         { enabled: !!firstResourceProgress?.resourceProgressType },
     )
 
-    const tcaCertificationCompletedModal: ReactNode = useTcaCertificationModal(
-        tcaCertificationName,
-        navToCertificationDetails,
-    )
-
     if (ready && profile && !userInfo.current) {
         userInfo.current = { ...profile }
     }
@@ -119,11 +117,18 @@ const EnrollmentPage: FC<{}> = () => {
 
     function closeEnrolledModal(): void {
         setIsEnrolledModalOpen(false)
-        if (!tcaCertificationCompletedModal) {
-            navToCertificationDetails()
-        }
     }
 
+    useEffect(() => {
+        if (!certCheckReady || isEnrolledModalOpen) {
+            return
+        }
+
+        refetchProgress()
+        navToCertificationDetails()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [certCheckReady, isEnrolledModalOpen])
+
     function renderMainContent(): ReactNode {
         return ready ? (
             <>
@@ -135,10 +140,8 @@ const EnrollmentPage: FC<{}> = () => {
 
                 <EnrolledModal
                     isOpen={isEnrolledModalOpen}
-                    certification={certification}
                     onClose={closeEnrolledModal}
                 />
-                {!isEnrolledModalOpen && tcaCertificationCompletedModal}
             </>
         ) : null
     }