TCA-1131 Hiring manager preview -> dev

src-ts/tools/learn/certification-details/certification-details-modal/certif-details-content/data/perks.data.tsx

@@ -1,3 +1,8 @@
+import { ReactNode } from 'react'
+
+import { IconSolid } from '../../../../../../lib'
+import { getTCAUserCertificationPreviewUrl } from '../../../../learn.routes'
+
 export type PerkIconsType = |
     'currency-dolary' |
     'icon-certif' |
@@ -8,6 +13,7 @@ export interface PerkItem {
     description: string
     icon: PerkIconsType
     title: string
+    extra?: (certification: string) => ReactNode
 }
 
 export const perks: Array<PerkItem> = [
@@ -24,6 +30,16 @@ export const perks: Array<PerkItem> = [
             You will receive a digital certificate that can be linked to
             your resume/CV, as verified proof of your skills.
         `,
+        extra: (certification: string) => (
+            <a
+                href={getTCAUserCertificationPreviewUrl(certification)}
+                target='_blank'
+                rel='noreferrer'
+            >
+                Preview
+                <IconSolid.ExternalLinkIcon />
+            </a>
+        ),
         icon: 'icon-certif',
         title: 'Proof of my skills',
     },

src-ts/tools/learn/certification-details/perks-section/PerksSection.module.scss

@@ -69,3 +69,22 @@
         margin-top: $space-sm;
     }
 }
+
+.perkExtraLink {
+    margin-top: $space-sm;
+
+    > * {
+        display: flex;
+        align-items: center;
+        gap: $space-xs;
+        color: $turq-160;
+        @include font-roboto;
+        font-weight: 700;
+        font-size: 14px;
+        line-height: 14px;
+        text-transform: uppercase;
+    }
+    svg {
+        @include icon-size(14);
+    }
+}

src-ts/tools/learn/certification-details/perks-section/PerksSection.tsx

@@ -1,7 +1,8 @@
-import classNames from 'classnames'
 import { FC } from 'react'
+import { Params, useParams } from 'react-router-dom'
+import classNames from 'classnames'
 
-import { type PerkItem } from '../data/perks.data'
+import { type PerkItem } from '../certification-details-modal/certif-details-content/data'
 
 import { getPerkIcon } from './icons-map'
 import styles from './PerksSection.module.scss'
@@ -12,38 +13,45 @@ interface PerksSectionProps {
     style?: 'clear'
 }
 
-const PerksSection: FC<PerksSectionProps> = (props: PerksSectionProps) => (
-    <div className={classNames(styles.wrap, props.style && styles[props.style])}>
-        <h2>{props.title ?? 'Why certify with Topcoder?'}</h2>
-        <svg width='0' height='0'>
-            <defs>
-                <linearGradient
-                    id='paint0_linear_1847_10558'
-                    x1='-1.11475e-07'
-                    y1='31.2359'
-                    x2='41.4349'
-                    y2='27.2123'
-                    gradientUnits='userSpaceOnUse'
-                >
-                    <stop stopColor='#05456D' />
-                    <stop offset='1' stopColor='#0A7AC0' />
-                </linearGradient>
-            </defs>
-        </svg>
-        <ul className={styles.perksList}>
-            {props.items.map(perk => (
-                <li key={perk.title}>
-                    <div className={styles.perkIcon}>
-                        {getPerkIcon(perk)}
-                    </div>
-                    <div className={styles.perkContent}>
-                        <h3 className='details'>{perk.title}</h3>
-                        <p className='body-main'>{perk.description}</p>
-                    </div>
-                </li>
-            ))}
-        </ul>
-    </div>
-)
+const PerksSection: FC<PerksSectionProps> = (props: PerksSectionProps) => {
+    const routeParams: Params<string> = useParams()
+
+    return (
+        <div className={classNames(styles.wrap, props.style && styles[props.style])}>
+            <h2>{props.title ?? 'Why certify with Topcoder?'}</h2>
+            <svg width='0' height='0'>
+                <defs>
+                    <linearGradient
+                        id='paint0_linear_1847_10558'
+                        x1='-1.11475e-07'
+                        y1='31.2359'
+                        x2='41.4349'
+                        y2='27.2123'
+                        gradientUnits='userSpaceOnUse'
+                    >
+                        <stop stopColor='#05456D' />
+                        <stop offset='1' stopColor='#0A7AC0' />
+                    </linearGradient>
+                </defs>
+            </svg>
+            <ul className={styles.perksList}>
+                {props.items.map(perk => (
+                    <li key={perk.title}>
+                        <div className={styles.perkIcon}>
+                            {getPerkIcon(perk)}
+                        </div>
+                        <div className={styles.perkContent}>
+                            <h3 className='details'>{perk.title}</h3>
+                            <p className='body-main'>{perk.description}</p>
+                            <div className={styles.perkExtraLink}>
+                                {perk.extra?.(routeParams.certification as string)}
+                            </div>
+                        </div>
+                    </li>
+                ))}
+            </ul>
+        </div>
+    )
+}
 
 export default PerksSection

src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certification-enrollment/tca-enrollment-provider.tsx

@@ -31,7 +31,7 @@ export function useTCACertificationEnrollment(
         enrollment: data,
         error: !!error,
         loading: !data,
-        ready: !!data,
+        ready: !!data || !!error,
     }
 }
 

src-ts/tools/learn/learn-lib/hiring-manager-view/HiringManagerView.module.scss

@@ -34,6 +34,22 @@
         background: url('./bg-curve-white.png') no-repeat center bottom / 100vw, $tc-qa-grad;
     }
 
+    &.asPreview {
+        position: relative;
+        z-index: 1;
+        &:before {
+            content: "";
+            display: block;
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: url('./bg-curve-white.png') no-repeat center bottom / 100vw, url('./preview-watermark.png') no-repeat top left / cover;
+            z-index: -1;
+        }
+    }
+
     .heroInner {
         display: flex;
         gap: $space-mx;
@@ -149,12 +165,7 @@
 }
 
 .wrap {
-    margin-top: $space-mxx;
     margin-bottom: 120px;
-
-    @include ltelg {
-        margin-top: $space-mx;
-    }
 
     @include ltemd {
         margin-bottom: $space-lg;
@@ -247,6 +258,11 @@
     align-items: center;
     gap: $space-xs;
 
+    margin-top: $space-mxx;
+    @include ltelg {
+        margin-top: $space-mx;
+    }
+
     &:global(.secondary) {
         border: 2px solid;
     }

src-ts/tools/learn/learn-lib/hiring-manager-view/HiringManagerView.tsx

@@ -55,6 +55,7 @@ export interface HiringManagerViewProps {
     certification?: TCACertification
     completedAt?: string
     completionUuid?: string
+    isPreview?: boolean
     isModalView?: boolean
     isMemberVerified?: boolean
     isOwner?: boolean
@@ -158,6 +159,7 @@ const HiringManagerView: FC<HiringManagerViewProps> = (props: HiringManagerViewP
                 className={classNames(
                     styles.hero,
                     styles[`hero-${certificationCategory?.track.toLowerCase() || 'dev'}`],
+                    props.isPreview && styles.asPreview,
                 )}
             >
                 <ContentLayout outerClass={props.isModalView ? styles.contentOuter : ''}>

src-ts/tools/learn/learn.routes.tsx

@@ -20,19 +20,20 @@ const UserCertificate: LazyLoadedComponent = lazyLoad(() => import('./course-cer
 const FreeCodeCamp: LazyLoadedComponent = lazyLoad(() => import('./free-code-camp'), 'FreeCodeCamp')
 const MyLearning: LazyLoadedComponent = lazyLoad(() => import('./my-learning'), 'MyLearning')
 const LandingLearn: LazyLoadedComponent = lazyLoad(() => import('./Learn'))
-const MyTCACertificate: LazyLoadedComponent = lazyLoad(() => import('./tca-certificate'), 'MyTCACertificate')
-const UserTCACertificate: LazyLoadedComponent = lazyLoad(() => import('./tca-certificate'), 'UserTCACertificate')
+const UserTCACertificate: LazyLoadedComponent = lazyLoad(() => import('./tca-certificate'), 'CertificateView')
 
 const ValidateTCACertificate: LazyLoadedComponent
     = lazyLoad(() => import('./tca-certificate'), 'UuidCertificationView')
 
 const UserCertificationView: LazyLoadedComponent
     = lazyLoad(() => import('./tca-certificate'), 'UserCertificationView')
 
+const UserCertificationPreview: LazyLoadedComponent
+    = lazyLoad(() => import('./tca-certificate'), 'UserCertificationPreview')
+
 export enum LEARN_PATHS {
     certificate = '/certificate',
     completed = '/learn/completed',
-    myCertificate = '/learn/my-certificate',
     myLearning = '/learn/my-learning',
     fcc = '/learn/fcc',
     root = '/learn',
@@ -119,12 +120,6 @@ export function getTCACertificationEnrollPath(certification: string): string {
 
 export function getTCACertificateUrl(
     certification: string,
-): string {
-    return `${getTCACertificationPath(certification)}${LEARN_PATHS.certificate}`
-}
-
-export function getUserTCACertificateUrl(
-    certification: string,
     handle: string,
 ): string {
     return `${getTCACertificationPath(certification)}/${handle}${LEARN_PATHS.certificate}`
@@ -143,6 +138,12 @@ export function getTCAUserCertificationUrl(
     return `${getTCACertificationPath(certification)}/${handle}/certification`
 }
 
+export function getTCAUserCertificationPreviewUrl(
+    certification: string,
+): string {
+    return `${getTCACertificationPath(certification)}/preview`
+}
+
 export function getAuthenticateAndEnrollRoute(): string {
     return `${authUrlLogin()}${encodeURIComponent(LEARN_PATHS.tcaEnroll)}`
 }
@@ -204,12 +205,6 @@ export const learnRoutes: ReadonlyArray<PlatformRoute> = [
                 id: 'My Learning',
                 route: 'my-learning',
             },
-            {
-                children: [],
-                element: <MyTCACertificate />,
-                id: 'My TCA Certification',
-                route: 'tca-certifications/:certification/certificate',
-            },
             {
                 children: [],
                 element: <UserTCACertificate />,
@@ -219,15 +214,21 @@ export const learnRoutes: ReadonlyArray<PlatformRoute> = [
             {
                 children: [],
                 element: <ValidateTCACertificate />,
-                id: 'Validate TCA Certification - aka hiring manager view',
+                id: 'Hiring manager view - uuid param',
                 route: ':completionUuid',
             },
             {
                 children: [],
                 element: <UserCertificationView />,
-                id: 'Validate TCA Certification - aka hiring manager view',
+                id: 'Hiring manager view',
                 route: 'tca-certifications/:certification/:memberHandle/certification',
             },
+            {
+                children: [],
+                element: <UserCertificationPreview />,
+                id: 'Giring manager preview',
+                route: 'tca-certifications/:certification/preview',
+            },
         ],
         element: <LandingLearn />,
         id: toolTitle,