diff --git a/src-ts/tools/learn/certification-details/certification-details-modal/certif-details-content/data/perks.data.tsx b/src-ts/tools/learn/certification-details/certification-details-modal/certif-details-content/data/perks.data.tsx index 7bb328f81..a1a108666 100644 --- a/src-ts/tools/learn/certification-details/certification-details-modal/certif-details-content/data/perks.data.tsx +++ b/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 = [ @@ -24,6 +30,16 @@ export const perks: Array = [ You will receive a digital certificate that can be linked to your resume/CV, as verified proof of your skills. `, + extra: (certification: string) => ( + + Preview + + + ), icon: 'icon-certif', title: 'Proof of my skills', }, diff --git a/src-ts/tools/learn/certification-details/perks-section/PerksSection.module.scss b/src-ts/tools/learn/certification-details/perks-section/PerksSection.module.scss index 6cc2889b1..dcec61c33 100644 --- a/src-ts/tools/learn/certification-details/perks-section/PerksSection.module.scss +++ b/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); + } +} \ No newline at end of file diff --git a/src-ts/tools/learn/certification-details/perks-section/PerksSection.tsx b/src-ts/tools/learn/certification-details/perks-section/PerksSection.tsx index cbfdfd663..a74c7464b 100644 --- a/src-ts/tools/learn/certification-details/perks-section/PerksSection.tsx +++ b/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 = (props: PerksSectionProps) => ( -
-

{props.title ?? 'Why certify with Topcoder?'}

- - - - - - - - -
    - {props.items.map(perk => ( -
  • -
    - {getPerkIcon(perk)} -
    -
    -

    {perk.title}

    -

    {perk.description}

    -
    -
    • - ))} -
-
-) +const PerksSection: FC = (props: PerksSectionProps) => { + const routeParams: Params = useParams() + + return ( +
+

{props.title ?? 'Why certify with Topcoder?'}

+ + + + + + + + +
    + {props.items.map(perk => ( +
  • +
    + {getPerkIcon(perk)} +
    +
    +

    {perk.title}

    +

    {perk.description}

    +
    + {perk.extra?.(routeParams.certification as string)} +
    +
    +
    • + ))} +
+
+ ) +} export default PerksSection diff --git a/src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certification-enrollment/tca-enrollment-provider.tsx b/src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certification-enrollment/tca-enrollment-provider.tsx index d8adf91fe..7a2e69354 100644 --- a/src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certification-enrollment/tca-enrollment-provider.tsx +++ b/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, } } diff --git a/src-ts/tools/learn/learn-lib/hiring-manager-view/HiringManagerView.module.scss b/src-ts/tools/learn/learn-lib/hiring-manager-view/HiringManagerView.module.scss index a03c1e36a..65786ff09 100644 --- a/src-ts/tools/learn/learn-lib/hiring-manager-view/HiringManagerView.module.scss +++ b/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; } diff --git a/src-ts/tools/learn/learn-lib/hiring-manager-view/HiringManagerView.tsx b/src-ts/tools/learn/learn-lib/hiring-manager-view/HiringManagerView.tsx index 6141315e1..b2b7281d9 100644 --- a/src-ts/tools/learn/learn-lib/hiring-manager-view/HiringManagerView.tsx +++ b/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 = (props: HiringManagerViewP className={classNames( styles.hero, styles[`hero-${certificationCategory?.track.toLowerCase() || 'dev'}`], + props.isPreview && styles.asPreview, )} > diff --git a/src-ts/tools/learn/learn-lib/hiring-manager-view/preview-watermark.png b/src-ts/tools/learn/learn-lib/hiring-manager-view/preview-watermark.png new file mode 100644 index 000000000..e9332a3ae Binary files /dev/null and b/src-ts/tools/learn/learn-lib/hiring-manager-view/preview-watermark.png differ diff --git a/src-ts/tools/learn/learn.routes.tsx b/src-ts/tools/learn/learn.routes.tsx index 16e40aca0..90a9f808e 100644 --- a/src-ts/tools/learn/learn.routes.tsx +++ b/src-ts/tools/learn/learn.routes.tsx @@ -20,8 +20,7 @@ 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') @@ -29,10 +28,12 @@ const ValidateTCACertificate: LazyLoadedComponent 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 = [ id: 'My Learning', route: 'my-learning', }, - { - children: [], - element: , - id: 'My TCA Certification', - route: 'tca-certifications/:certification/certificate', - }, { children: [], element: , @@ -219,15 +214,21 @@ export const learnRoutes: ReadonlyArray = [ { children: [], element: , - id: 'Validate TCA Certification - aka hiring manager view', + id: 'Hiring manager view - uuid param', route: ':completionUuid', }, { children: [], element: , - id: 'Validate TCA Certification - aka hiring manager view', + id: 'Hiring manager view', route: 'tca-certifications/:certification/:memberHandle/certification', }, + { + children: [], + element: , + id: 'Giring manager preview', + route: 'tca-certifications/:certification/preview', + }, ], element: , id: toolTitle, diff --git a/src-ts/tools/learn/tca-certificate/certificate-view/CertificateView.tsx b/src-ts/tools/learn/tca-certificate/certificate-view/CertificateView.tsx index 5f0a4204e..edfe95eda 100644 --- a/src-ts/tools/learn/tca-certificate/certificate-view/CertificateView.tsx +++ b/src-ts/tools/learn/tca-certificate/certificate-view/CertificateView.tsx @@ -1,9 +1,7 @@ import { FC, MutableRefObject, ReactNode, useRef } from 'react' +import { Params, useParams } from 'react-router-dom' -import { - LoadingSpinner, - UserProfile, -} from '../../../../lib' +import { LoadingSpinner } from '../../../../lib' import { CertificateNotFoundContent, CertificatePageLayout, @@ -15,40 +13,46 @@ import { } from '../../learn-lib' import { getTCACertificationPath, getTCACertificationValidationUrl, getUserTCACertificateSsr } from '../../learn.routes' import { CertificateNotFound } from '../certificate-not-found' +import { useGetUserProfile, UseGetUserProfileData } from '../user-certification-view/use-get-user-profile' -interface CertificateViewProps { - certification: string, - fullScreenCertLayout?: boolean, - profile: UserProfile, -} - -const CertificateView: FC = (props: CertificateViewProps) => { +const CertificateView: FC<{}> = () => { - const tcaCertificationPath: string = getTCACertificationPath(props.certification) const certificateElRef: MutableRefObject = useRef() + const routeParams: Params = useParams() + const { + isOwnProfile, + ready: profileReady, + }: UseGetUserProfileData = useGetUserProfile(routeParams.memberHandle) + + const userHandle: string = `${routeParams.memberHandle}` + const certificationParam: string = routeParams.certification ?? '' + + + const tcaCertificationPath: string = getTCACertificationPath(certificationParam) + const { certification, enrollment, error: hasValidationError, ready, }: TCACertificationValidationData - = useValidateTCACertification(props.certification, props.profile.handle) + = useValidateTCACertification(certificationParam, userHandle) const hasCompletedTheCertification: boolean = !!certification && !!enrollment && !hasValidationError - const certificateNotFoundError: boolean = ready && !hasCompletedTheCertification + const certificateNotFoundError: boolean = profileReady && ready && !hasCompletedTheCertification function getCertTitle(user: string): string { return `${user} - ${certification?.title}` } const certUrl: string = getUserTCACertificateSsr( - props.certification, - props.profile.handle, - getCertTitle(props.profile.handle), + certificationParam, + userHandle, + getCertTitle(userHandle), ) - const certificationTitle: string = getCertTitle(enrollment?.userName || props.profile.handle) + const certificationTitle: string = getCertTitle(enrollment?.userName || userHandle) const validateLink: string = getTCACertificationValidationUrl(enrollment?.completionUuid as string) @@ -62,7 +66,7 @@ const CertificateView: FC = (props: CertificateViewProps) certification={certification as TCACertification} completionUuid={enrollment?.completionUuid ?? ''} userName={enrollment?.userName} - tcHandle={props.profile.handle} + tcHandle={userHandle} completedDate={enrollment?.completedAt as string} certificateElRef={certificateElRef} validateLink={validateLink} @@ -78,21 +82,23 @@ const CertificateView: FC = (props: CertificateViewProps) - - )} - > - {renderCertificate()} - + {profileReady && ( + + )} + > + {renderCertificate()} + + )} ) } diff --git a/src-ts/tools/learn/tca-certificate/index.ts b/src-ts/tools/learn/tca-certificate/index.ts index 9b553492c..ba149c08d 100644 --- a/src-ts/tools/learn/tca-certificate/index.ts +++ b/src-ts/tools/learn/tca-certificate/index.ts @@ -1,10 +1,4 @@ export * from './user-certification-view' // used only by SSR -// TODO: merge this into one component? -export * from './my-certificate' export * from './certificate-view' - -// deprecated -// TODO: remove? -export * from './user-certificate' diff --git a/src-ts/tools/learn/tca-certificate/my-certificate/MyTCACertificate.tsx b/src-ts/tools/learn/tca-certificate/my-certificate/MyTCACertificate.tsx deleted file mode 100644 index b7bdfeec9..000000000 --- a/src-ts/tools/learn/tca-certificate/my-certificate/MyTCACertificate.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import { FC, useCallback, useContext, useEffect } from 'react' -import { NavigateFunction, Params, useNavigate, useParams } from 'react-router-dom' - -import { - LoadingSpinner, - profileContext, - ProfileContextData, -} from '../../../../lib' -import { getTCACertificationPath } from '../../learn.routes' -import CertificateView from '../certificate-view/CertificateView' - -const MyTCACertificate: FC<{}> = () => { - const routeParams: Params = useParams() - const { profile, initialized: profileReady }: ProfileContextData = useContext(profileContext) - - const navigate: NavigateFunction = useNavigate() - const certificationParam: string = routeParams.certification ?? '' - const tcaCertificationPath: string = getTCACertificationPath(certificationParam) - - const navigateToCertification: () => void = useCallback(() => { - navigate(tcaCertificationPath) - }, [tcaCertificationPath, navigate]) - - useEffect(() => { - if (profileReady && !profile) { - navigateToCertification() - } - }, [profileReady, profile, navigateToCertification]) - - return ( - <> - - - {profileReady && profile && ( - - )} - - ) -} - -export default MyTCACertificate diff --git a/src-ts/tools/learn/tca-certificate/my-certificate/index.ts b/src-ts/tools/learn/tca-certificate/my-certificate/index.ts deleted file mode 100644 index e6bcb7548..000000000 --- a/src-ts/tools/learn/tca-certificate/my-certificate/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as MyTCACertificate } from './MyTCACertificate' diff --git a/src-ts/tools/learn/tca-certificate/user-certificate/UserTCACertificate.tsx b/src-ts/tools/learn/tca-certificate/user-certificate/UserTCACertificate.tsx deleted file mode 100644 index 548b0f4eb..000000000 --- a/src-ts/tools/learn/tca-certificate/user-certificate/UserTCACertificate.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import { - Dispatch, - FC, - SetStateAction, - useEffect, - useState, -} from 'react' -import { Params, useParams } from 'react-router-dom' - -import { - LoadingSpinner, - profileGetPublicAsync, - UserProfile, -} from '../../../../lib' -import { CertificateView } from '../certificate-view' - -const UserTCACertificate: FC<{}> = () => { - - const routeParams: Params = useParams() - - const [profile, setProfile]: [ - UserProfile | undefined, - Dispatch> - ] = useState() - const [profileReady, setProfileReady]: [boolean, Dispatch>] = useState(false) - - const certificationParam: string = routeParams.certification ?? '' - - useEffect(() => { - if (routeParams.memberHandle) { - profileGetPublicAsync(routeParams.memberHandle) - .then(userProfile => { - setProfile(userProfile) - setProfileReady(true) - }) - } - }, [routeParams.memberHandle, setProfileReady]) - - return ( - <> - - - {profileReady && profile && ( - - )} - - ) -} - -export default UserTCACertificate diff --git a/src-ts/tools/learn/tca-certificate/user-certificate/index.ts b/src-ts/tools/learn/tca-certificate/user-certificate/index.ts deleted file mode 100644 index 58bd97b52..000000000 --- a/src-ts/tools/learn/tca-certificate/user-certificate/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as UserTCACertificate } from './UserTCACertificate' diff --git a/src-ts/tools/learn/tca-certificate/user-certification-view/UserCertificationPreview.tsx b/src-ts/tools/learn/tca-certificate/user-certification-view/UserCertificationPreview.tsx new file mode 100644 index 000000000..57c02b47e --- /dev/null +++ b/src-ts/tools/learn/tca-certificate/user-certification-view/UserCertificationPreview.tsx @@ -0,0 +1,57 @@ +import { FC, useContext, useLayoutEffect } from 'react' +import { NavigateFunction, Params, useNavigate, useParams } from 'react-router-dom' + +import { LoadingSpinner, profileContext, ProfileContextData, UserProfile } from '../../../../lib' +import { + TCACertificationEnrollmentBase, + TCACertificationProviderData, + useGetTCACertification, +} from '../../learn-lib' + +import UserCertificationViewBase from './UserCertificationViewBase' + +const placeholderUserProfile: UserProfile = { + firstName: 'Your', + handle: 'your_handle', + lastName: 'Name', +} as UserProfile + +const placeholderEnrollment: TCACertificationEnrollmentBase = { + completedAt: new Date().toISOString(), + completionUuid: 'test-uuid', + userHandle: 'your_handle', + userName: 'Your Name', +} as TCACertificationEnrollmentBase + +const UserCertificationPreview: FC<{}> = () => { + const { profile, initialized: profileReady }: ProfileContextData = useContext(profileContext) + const navigate: NavigateFunction = useNavigate() + + const routeParams: Params = useParams() + + const { + certification, + }: TCACertificationProviderData + = useGetTCACertification(`${routeParams.certification}`) + + useLayoutEffect(() => { + if (profileReady && !profile) { + navigate('..') + } + }, [navigate, profile, profileReady]) + + return ( + <> + + + + + ) +} + +export default UserCertificationPreview diff --git a/src-ts/tools/learn/tca-certificate/user-certification-view/UserCertificationViewBase.tsx b/src-ts/tools/learn/tca-certificate/user-certification-view/UserCertificationViewBase.tsx index 2173dc481..355a7f7b3 100644 --- a/src-ts/tools/learn/tca-certificate/user-certification-view/UserCertificationViewBase.tsx +++ b/src-ts/tools/learn/tca-certificate/user-certification-view/UserCertificationViewBase.tsx @@ -24,12 +24,12 @@ import { import { getTCACertificationPath, getTCACertificationValidationUrl } from '../../learn.routes' import { CertificateNotFound } from '../certificate-not-found' - interface UserCertificationViewBaseProps { - enrollment?: TCACertificationEnrollmentBase - profile?: UserProfile certification?: TCACertification + enrollment?: TCACertificationEnrollmentBase enrollmentError?: boolean + isPreview?: boolean + profile?: UserProfile } const UserCertificationViewBase: FC = (props: UserCertificationViewBaseProps) => { @@ -60,9 +60,9 @@ const UserCertificationViewBase: FC = (props: Us {`${!!props.enrollment && `${props.enrollment.userName}'s `}${props.certification?.title} Certificate`} - + - {props.profile && props.enrollmentError && ( + {props.enrollmentError && ( = (props: Us userName={props.enrollment.userName} isOwner={isOwnProfile} validationUrl={validationUrl} + isPreview={props.isPreview} isModalView={isModalView} /> diff --git a/src-ts/tools/learn/tca-certificate/user-certification-view/UuidCertificationView.tsx b/src-ts/tools/learn/tca-certificate/user-certification-view/UuidCertificationView.tsx index 089c10ad8..adeb29494 100644 --- a/src-ts/tools/learn/tca-certificate/user-certification-view/UuidCertificationView.tsx +++ b/src-ts/tools/learn/tca-certificate/user-certification-view/UuidCertificationView.tsx @@ -1,36 +1,52 @@ -import { FC } from 'react' -import { Params, useParams } from 'react-router-dom' +import { FC, useLayoutEffect } from 'react' +import { NavigateFunction, Params, useNavigate, useParams } from 'react-router-dom' +import { LoadingSpinner } from '../../../../lib' import { TCACertification, TCACertificationEnrollmentProviderData, useTCACertificationEnrollment, } from '../../learn-lib' +import { getTCAUserCertificationUrl } from '../../learn.routes' -import { useGetUserProfile, UseGetUserProfileData } from './use-get-user-profile' import UserCertificationViewBase from './UserCertificationViewBase' const UuidCertificationView: FC<{}> = () => { - + const navigate: NavigateFunction = useNavigate() const routeParams: Params = useParams() const { enrollment, error: enrollmentError, + ready: enrollmentReady, }: TCACertificationEnrollmentProviderData = useTCACertificationEnrollment(routeParams.completionUuid as string) - const { profile }: UseGetUserProfileData = useGetUserProfile(enrollment?.userHandle) - const certification: TCACertification | undefined = enrollment?.topcoderCertification + useLayoutEffect(() => { + if (enrollmentReady && enrollment) { + navigate( + getTCAUserCertificationUrl( + certification?.dashedName as string, + enrollment.userHandle, + ), + ) + } + }, [certification?.dashedName, enrollment, enrollmentReady, navigate]) + return ( - + <> + + {enrollmentReady && enrollmentError && ( + + )} + ) } diff --git a/src-ts/tools/learn/tca-certificate/user-certification-view/index.ts b/src-ts/tools/learn/tca-certificate/user-certification-view/index.ts index 28666a6a5..b581574e5 100644 --- a/src-ts/tools/learn/tca-certificate/user-certification-view/index.ts +++ b/src-ts/tools/learn/tca-certificate/user-certification-view/index.ts @@ -1,2 +1,3 @@ +export { default as UserCertificationPreview } from './UserCertificationPreview' export { default as UserCertificationView } from './UserCertificationView' export { default as UuidCertificationView } from './UuidCertificationView' diff --git a/src-ts/tools/learn/welcome/tc-certifications/cert-card/TCCertCard.tsx b/src-ts/tools/learn/welcome/tc-certifications/cert-card/TCCertCard.tsx index cfc24ec12..eac1aefe2 100644 --- a/src-ts/tools/learn/welcome/tc-certifications/cert-card/TCCertCard.tsx +++ b/src-ts/tools/learn/welcome/tc-certifications/cert-card/TCCertCard.tsx @@ -1,7 +1,7 @@ import { FC, memo, ReactNode } from 'react' import classNames from 'classnames' -import { Button, ButtonStyle, IconSolid, ProgressBar, useCheckIsMobile } from '../../../../../lib' +import { Button, ButtonStyle, IconSolid, ProgressBar } from '../../../../../lib' import { CertificateBadgeIcon, CompletionTimeRange, @@ -12,7 +12,7 @@ import { TCACertificationProgress, TCACertificationProviderBase, } from '../../../learn-lib' -import { getTCACertificateUrl, getTCACertificationPath } from '../../../learn.routes' +import { getTCACertificationPath, getTCAUserCertificationUrl } from '../../../learn.routes' import styles from './TCCertCard.module.scss' @@ -29,7 +29,6 @@ const getCtaBtn: (style: ButtonStyle, label: string, route: string) => ReactNode const EXCERPT_TEXT_LEN: number = 165 const TCCertCard: FC = (props: TCCertCardProps) => { - const isMobile: boolean = useCheckIsMobile() const desc: string = props.certification.description.slice(0, EXCERPT_TEXT_LEN) @@ -49,10 +48,11 @@ const TCCertCard: FC = (props: TCCertCardProps) => { } if (isCompleted) { + const certificatePath: string = getTCAUserCertificationUrl(dashedName, props.progress?.userHandle as string) return (
- {getCtaBtn('primary', 'View Certificate', getTCACertificateUrl(dashedName))} + {getCtaBtn('primary', 'View Certificate', certificatePath)} {getCtaBtn('secondary', 'Details', getTCACertificationPath(dashedName))}