diff --git a/src-ts/tools/learn/learn.routes.tsx b/src-ts/tools/learn/learn.routes.tsx index ad9b1c151..ed20d1f43 100644 --- a/src-ts/tools/learn/learn.routes.tsx +++ b/src-ts/tools/learn/learn.routes.tsx @@ -129,7 +129,7 @@ export function getUserTCACertificateUrl( export function getTCACertificationValidationUrl( completionUuid: string, ): string { - return `${EnvironmentConfig.TOPCODER_URLS.TCA}/${LEARN_PATHS.root}/${completionUuid}` + return `${EnvironmentConfig.TOPCODER_URLS.TCA}${LEARN_PATHS.root}/${completionUuid}` } export function getAuthenticateAndEnrollRoute(): string { diff --git a/src-ts/tools/learn/welcome/tc-certifications/cert-card/TCCertCard.module.scss b/src-ts/tools/learn/welcome/tc-certifications/cert-card/TCCertCard.module.scss index 64a310356..008bad610 100644 --- a/src-ts/tools/learn/welcome/tc-certifications/cert-card/TCCertCard.module.scss +++ b/src-ts/tools/learn/welcome/tc-certifications/cert-card/TCCertCard.module.scss @@ -61,6 +61,11 @@ } } +.completed { + background: $tc-white; + border: 1px solid $black-20; +} + .separatorBar { border-bottom: 2px solid $black-10; margin: $space-lg 0; @@ -80,6 +85,12 @@ .cardBottom { margin-top: $space-lg; + + .certCTAButtons { + a:first-child { + margin-right: $space-sm; + } + } } .infoText { 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 c4f2d1541..4de10208f 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 @@ -12,7 +12,7 @@ import { TCACertificationProgress, TCACertificationProviderBase, } from '../../../learn-lib' -import { getTCACertificationPath } from '../../../learn.routes' +import { getTCACertificateUrl, getTCACertificationPath } from '../../../learn.routes' import styles from './TCCertCard.module.scss' @@ -41,11 +41,22 @@ const TCCertCard: FC = (props: TCCertCardProps) => { const isEnrolled: boolean = props.progress?.status === 'enrolled' + const isCompleted: boolean = props.progress?.status === 'completed' + function renderCta(): ReactNode { - if (!isEnrolled) { + if (!isEnrolled && !isCompleted) { return getCtaBtn('secondary', 'Details', getTCACertificationPath(dashedName)) } + if (isCompleted) { + return ( +
+ {getCtaBtn('primary', 'View Certificate', getTCACertificateUrl(dashedName))} + {getCtaBtn('secondary', 'Details', getTCACertificationPath(dashedName))} +
+ ) + } + return getCtaBtn('primary', 'Resume', getTCACertificationPath(dashedName)) } @@ -62,7 +73,7 @@ const TCCertCard: FC = (props: TCCertCardProps) => { } return ( -
+
= (props: TCCertCardProps) => { {props.certification.description.length > EXCERPT_TEXT_LEN ? '...' : ''}

- +