TCA-996 - implement certificate not found error pages for tca certifications and FCC courses

Author: vas3a

src-ts/lib/styles/variables/_constants.scss

@@ -1 +1 @@
-$tca-certif-aspect-ratio: 1.25715;
+$tca-certif-aspect-ratio: 1.2571;

src-ts/lib/svgs/index.ts

@@ -21,6 +21,7 @@ import { ReactComponent as SocialIconYoutube } from './social-yt-icon.svg'
 import { ReactComponent as TooltipArrowIcon } from './tooltip-arrow.svg'
 import { ReactComponent as TcAcademyLogoSvg } from './tc-academy-logo.svg'
 import { ReactComponent as TCAcademyLogoWhiteSvg } from './tc-academy-logo-white.svg'
+import { ReactComponent as TCAcademyLogoMixedSvg } from './tc-academy-logo-mixed.svg'
 import { ReactComponent as TcLogoSvg } from './tc-logo.svg'
 import { ReactComponent as TCLogoSvg } from './tc-logo-white.svg'
 import { ReactComponent as FccLogoSvg } from './vendor-fcc-logo.svg'
@@ -49,6 +50,7 @@ export {
     IconCheck,
     TcAcademyLogoSvg,
     TCAcademyLogoWhiteSvg,
+    TCAcademyLogoMixedSvg,
     TcLogoSvg,
     TCLogoSvg,
     FccLogoSvg,

src-ts/lib/svgs/tc-academy-logo-mixed.svg

@@ -0,0 +1,91 @@
+@import '../../../../lib/styles/includes';
+
+.wrap {
+    display: flex;
+    height: 100%;
+    z-index: 1;
+    overflow: hidden;
+
+    @include ltemd {
+        border: 1px dashed $blue-25;
+        border-radius: 8px;
+    }
+    > svg {
+        position: absolute;
+        top: 50%;
+        left: 0;
+        width: 100%;
+        height: auto;
+        display: block;
+        z-index: -1;
+        transform: translateY(-50%);
+
+        @include ltemd {
+            :global(.rect-border) {
+                display: none;
+            }
+        }
+    }
+}
+
+.details {
+    width: 55%;
+    padding: calc($space-mx + $space-lg);
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+
+    &Inner {
+        max-width: 385px;
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+    }
+
+    h2 {
+        color: $blue-25;
+    }
+
+    h3 {
+        font-size: 48px;
+        line-height: 50px;
+        font-weight: 500;
+        color: $tc-white;
+        margin-top: $space-sm;
+
+        :global(.nw) {
+            white-space: nowrap;
+        }
+    }
+}
+
+.logos {
+    margin-top: auto;
+    display: flex;
+}
+
+.logo {
+    display: flex;
+    align-items: center;
+    height: 52px;
+
+    svg {
+        width: auto;
+
+    }
+    &.whiteLogo svg > path {
+        fill: $tc-white;
+    }
+}
+
+.divider {
+    width: $border;
+    background: $black-10;
+    margin: 0 $space-lg;
+    flex: 0 0 auto;
+}
+
+.rightSide {
+    width: 45%;
+
+}

src-ts/tools/learn/course-certificate/certificate-not-found/CertificateNotFound.module.scss

@@ -0,0 +1,37 @@
+import { FC } from 'react'
+import classNames from 'classnames'
+
+import { TCAcademyLogoMixedSvg, TcLogoSvg } from '../../../../lib'
+import { CertificateNotFoundContent } from '../../learn-lib'
+
+import { ReactComponent as BackgroundSvg } from './bg.svg'
+import styles from './CertificateNotFound.module.scss'
+
+const CertificateNotFound: FC<{}> = () => (
+    <div className={styles.wrap}>
+        <BackgroundSvg />
+        <div className={styles.details}>
+            <div className={styles.detailsInner}>
+                <h2 className='details'>Topcoder Academy</h2>
+                <h3>
+                    Certificate
+                    {' '}
+                    <span className='nw'>not found</span>
+                </h3>
+                <CertificateNotFoundContent className='mobile-hide' />
+                <div className={styles.logos}>
+                    <div className={classNames(styles.logo, styles.whiteLogo)}>
+                        <TcLogoSvg />
+                    </div>
+                    <div className={styles.divider} />
+                    <div className={styles.logo}>
+                        <TCAcademyLogoMixedSvg />
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div className={styles.rightSide} />
+    </div>
+)
+
+export default CertificateNotFound

src-ts/tools/learn/course-certificate/certificate-not-found/CertificateNotFound.tsx

@@ -0,0 +1 @@
+export { default as CertificateNotFound } from './CertificateNotFound'

src-ts/tools/learn/course-certificate/certificate-not-found/bg.svg

@@ -1,13 +1,14 @@
 import {
     FC,
     MutableRefObject,
-    useEffect,
+    ReactNode,
     useMemo,
     useRef,
 } from 'react'
 
 import {
     AllCertificationsProviderData,
+    CertificateNotFoundContent,
     CertificatePageLayout,
     CoursesProviderData,
     useGetCertification,
@@ -20,13 +21,13 @@ import {
     getUserCertificateSsr,
 } from '../../learn.routes'
 import { UserProfile } from '../../../../lib'
+import { CertificateNotFound } from '../certificate-not-found'
 
 import Certificate from './certificate/Certificate'
 
 interface CertificateViewProps {
     certification: string
     fullScreenCertLayout?: boolean
-    onCertificationNotCompleted: () => void
     profile: UserProfile
     provider: string
 }
@@ -81,23 +82,14 @@ const CertificateView: FC<CertificateViewProps> = (props: CertificateViewProps)
     const ready: boolean = useMemo(() => (
         completedCertificateReady && courseReady && certificateReady
     ), [certificateReady, completedCertificateReady, courseReady])
+    const certificateNotFoundError: boolean = ready && !hasCompletedTheCertification
 
-    useEffect(() => {
+    function renderCertificate(): ReactNode {
         if (ready && !hasCompletedTheCertification) {
-            props.onCertificationNotCompleted()
+            return <CertificateNotFound />
         }
-    }, [coursePath, hasCompletedTheCertification, props, ready])
 
-    return (
-        <CertificatePageLayout
-            certificateElRef={certificateElRef}
-            fallbackBackUrl={coursePath}
-            fullScreenCertLayout={props.fullScreenCertLayout}
-            isCertificateCompleted={hasCompletedTheCertification}
-            isReady={ready}
-            ssrUrl={certUrl}
-            title={certificationTitle}
-        >
+        return (
             <Certificate
                 completedDate={completedCertificate?.completedDate ?? ''}
                 course={course?.title}
@@ -107,6 +99,25 @@ const CertificateView: FC<CertificateViewProps> = (props: CertificateViewProps)
                 type={certificate?.certificationCategory.track}
                 userName={userName}
             />
+        )
+    }
+
+    return (
+        <CertificatePageLayout
+            certificateElRef={certificateElRef}
+            fallbackBackUrl={coursePath}
+            fullScreenCertLayout={!certificateNotFoundError && props.fullScreenCertLayout}
+            isCertificateCompleted={hasCompletedTheCertification}
+            isReady={ready}
+            ssrUrl={certUrl}
+            title={certificationTitle}
+            disableActions={ready && !hasCompletedTheCertification}
+            className={certificateNotFoundError ? 'cert-not-found-layout' : ''}
+            afterContent={certificateNotFoundError && (
+                <CertificateNotFoundContent className='desktop-hide' />
+            )}
+        >
+            {renderCertificate()}
         </CertificatePageLayout>
     )
 }

src-ts/tools/learn/course-certificate/certificate-not-found/index.ts

@@ -3,6 +3,7 @@
 .wrap {
     display: flex;
     height: 100%;
+    background: $tc-white;
 }
 
 .details {

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

@@ -37,7 +37,6 @@ const MyCertificate: FC<{}> = () => {
                     certification={certificationParam}
                     profile={profile}
                     provider={providerParam}
-                    onCertificationNotCompleted={navigateToCourse}
                 />
             )}
         </>