Merge pull request #552 from topcoder-platform/TCA-1090_grow-to-fit-certificate

TCA-1090 grow to fit certificate -> dev

Author: vas3a

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

@@ -10,6 +10,7 @@
 .enrolledModal {
     color: $tc-white;
     background: url(./bg.jpg) center no-repeat, $tc-grad20;
+    max-width: 560px;
 
     @include ltemd {
         background: url(./bg-mobile.jpg) 0 0 no-repeat, $tc-grad20;
@@ -37,9 +38,8 @@
     }
 
     h2 {
-        @include ltemd {
-            font-size: 24px;
-            line-height: 28px;
-        }
+        text-transform: none;
+        font-size: 26px;
+        line-height: 32px;
     }
 }

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

@@ -23,7 +23,7 @@ const EnrolledModal: FC<EnrolledModalProps> = (props: EnrolledModalProps) => {
         <BaseModal
             onClose={props.onClose}
             open={isOpen}
-            size='sm'
+            size='lg'
             classNames={{ modal: styles.enrolledModal, root: styles.modalRoot }}
         >
             <>
@@ -33,6 +33,7 @@ const EnrolledModal: FC<EnrolledModalProps> = (props: EnrolledModalProps) => {
                 <Button
                     buttonStyle='outline'
                     label='Go to the certification details'
+                    size='sm'
                     onClick={props.onClose}
                 />
             </>

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

@@ -6,7 +6,6 @@ import {
     SetStateAction,
     useCallback,
     useContext,
-    useEffect,
     useLayoutEffect,
     useRef,
     useState,
@@ -21,13 +20,10 @@ import {
 } from '../../../../lib'
 import {
     enrollTCACertificationAsync,
-    TCACertificationCheckCompleted,
-    TCACertificationProgress,
     TCACertificationProgressProviderData,
     TCACertificationProviderData,
     useGetTCACertification,
     useGetTCACertificationProgress,
-    useTCACertificationCheckCompleted,
 } from '../../learn-lib'
 import { perks } from '../certification-details-modal/certif-details-content/data'
 import { PerksSection } from '../perks-section'
@@ -60,7 +56,6 @@ const EnrollmentPage: FC<{}> = () => {
     const {
         progress,
         ready: progressReady,
-        refetch: refetchProgress,
         setCertificateProgress,
     }: TCACertificationProgressProviderData = useGetTCACertificationProgress(
         profile?.userId as unknown as string,
@@ -70,17 +65,6 @@ const EnrollmentPage: FC<{}> = () => {
 
     const ready: boolean = profileReady && certificationReady && progressReady && !!profile
 
-    const firstResourceProgress: TCACertificationProgress['resourceProgresses'][0] | undefined
-        = progress?.resourceProgresses?.[0]
-
-    const {
-        ready: certCheckReady,
-    }: TCACertificationCheckCompleted = useTCACertificationCheckCompleted(
-        firstResourceProgress?.resourceProgressType ?? '',
-        firstResourceProgress?.resourceProgressId ?? '',
-        { enabled: !!firstResourceProgress?.resourceProgressType },
-    )
-
     if (ready && profile && !userInfo.current) {
         userInfo.current = { ...profile }
     }
@@ -117,17 +101,8 @@ const EnrollmentPage: FC<{}> = () => {
 
     function closeEnrolledModal(): void {
         setIsEnrolledModalOpen(false)
-    }
-
-    useEffect(() => {
-        if (!certCheckReady || isEnrolledModalOpen) {
-            return
-        }
-
-        refetchProgress()
         navToCertificationDetails()
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [certCheckReady, isEnrolledModalOpen])
+    }
 
     function renderMainContent(): ReactNode {
         return ready ? (

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

@@ -96,7 +96,7 @@ const CertificateView: FC<CertificateViewProps> = (props: CertificateViewProps)
                 elRef={certificateElRef}
                 provider={course?.resourceProvider.name}
                 tcHandle={props.profile.handle}
-                type={certificate?.certificationCategory.track}
+                type={certificate?.certificationCategory?.track}
                 userName={userName}
             />
         )

src-ts/tools/learn/course-certificate/certificate-view/CertificateView.tsx

@@ -56,7 +56,7 @@ const CurriculumSummary: FC<CurriculumSummaryProps> = (props: CurriculumSummaryP
                     <div className={styles.title}>
                         {title}
                     </div>
-                    <ProgressBar progress={progress ?? 0} />
+                    <ProgressBar progress={completed ? 100 : (progress ?? 0)} />
                 </>
             )}
 

src-ts/tools/learn/course-details/course-curriculum/curriculum-summary/CurriculumSummary.tsx

@@ -7,6 +7,7 @@
     display: flex;
 
     background: $tc-grad15;
+    overflow: hidden;
 }
 
 .content-wrap {
@@ -29,6 +30,8 @@
     display: flex;
     flex-direction: column;
     align-items: center;
+    z-index: 1;
+    position: relative;
 
     gap: $space-sm;
 
@@ -52,7 +55,7 @@
 .certificate-wrap {
     aspect-ratio: $tca-certif-aspect-ratio;
     width: 100%;
-    max-width: 880px;
+    max-width: 1216px;
     position: relative;
 
     &:global(.large-container) {

src-ts/tools/learn/learn-lib/certificate-page-layout/CertificatePageLayout.module.scss

@@ -53,7 +53,12 @@ const CertificatePageLayout: FC<CertificatePageLayoutProps> = (props: Certificat
     const certificateWrapRef: MutableRefObject<HTMLDivElement | any> = useRef()
     const navigateBack: NavigateBackFunction = useNavigateBack()
 
-    useCertificateScaling(props.isReady ? certificateWrapRef : undefined, 880, 880)
+    useCertificateScaling(
+        props.isReady ? certificateWrapRef : undefined,
+        880,
+        880,
+        viewStyle ? 1 : Math.min(),
+    )
 
     const handleBackBtnClick: () => void = useCallback(() => {
         navigateBack(props.fallbackBackUrl ?? '')

src-ts/tools/learn/learn-lib/certificate-page-layout/CertificatePageLayout.tsx

@@ -2,7 +2,8 @@
 
 .completedModal.completedModal {
     color: $tc-white;
-    background: url(./bg.jpg) center no-repeat, $tc-grad20;
+    background: url(./bg.jpg) no-repeat center / cover, $tc-grad20;
+    max-width: 560px;
 
     @include ltemd {
         background: url(./bg-mobile.jpg) 0 0 no-repeat, $tc-grad20;
@@ -30,9 +31,8 @@
     }
 
     h2 {
-        @include ltemd {
-            font-size: 24px;
-            line-height: 28px;
-        }
+        text-transform: none;
+        font-size: 26px;
+        line-height: 32px;
     }
 }

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

@@ -41,7 +41,7 @@ const TCACertificationCompletedModal: FC<TCACertificationCompletedModalProps>
         <BaseModal
             onClose={handleClose}
             open={isOpen}
-            size='sm'
+            size='lg'
             classNames={{ modal: styles.completedModal, root: styles.modalRoot }}
         >
             <>
@@ -53,7 +53,7 @@ const TCACertificationCompletedModal: FC<TCACertificationCompletedModalProps>
                     Certification
                     !
                 </h2>
-                <Button buttonStyle='outline' label='Check it out now!' onClick={handleClick} />
+                <Button buttonStyle='outline' label='Check it out now!' size='sm' onClick={handleClick} />
             </>
 
         </BaseModal>

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

@@ -4,6 +4,7 @@ export function useCertificateScaling(
     certificateRef?: MutableRefObject<HTMLDivElement | undefined>,
     originalSizeLg: number = 1250,
     originalSizeSm: number = 975,
+    scaleLimit: number = 1,
 ): void {
 
     // the certificate isn't responsive: should look the same on mobile and desktop
@@ -19,12 +20,12 @@ export function useCertificateScaling(
             // 975 and 1250 are the original container sizes,
             // and we're dividing by that to get the needed zoom level
             const ratioSize: number = window.innerWidth <= 745 ? originalSizeSm : originalSizeLg
-            const scaleLevel: number = Math.min(1, parentWidth / ratioSize)
+            const scaleLevel: number = Math.min(scaleLimit, parentWidth / ratioSize)
             Object.assign(certificateEl.style, { transform: `scale(${scaleLevel})`, transformOrigin: '0 0' })
         }
 
         window.addEventListener('resize', handleResize, false)
         handleResize()
         return () => window.removeEventListener('resize', handleResize, false)
-    }, [certificateRef, originalSizeLg, originalSizeSm])
+    }, [certificateRef, originalSizeLg, originalSizeSm, scaleLimit])
 }

src-ts/tools/learn/learn-lib/tca-certification-completed-modal/bg.jpg

@@ -90,7 +90,7 @@ const CoursesCard: FC<CoursesCardProps> = (props: CoursesCardProps) => {
             <div className={styles.cardHeaderDividerWrap}>
                 {(isInProgress || isCompleted) && (
                     <ProgressBar
-                        progress={(props.progress?.courseProgressPercentage ?? 0) / 100}
+                        progress={(isCompleted ? 100 : (props.progress?.courseProgressPercentage ?? 0)) / 100}
                         track={props.certification.certificationCategory.track}
                     />
                 )}