Merge pull request #499 from topcoder-platform/TCA-979

TCA-979

Author: kkartunov

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 {

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 {

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<TCCertCardProps> = (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 (
+                <div className={styles.certCTAButtons}>
+                    {getCtaBtn('primary', 'View Certificate', getTCACertificateUrl(dashedName))}
+                    {getCtaBtn('secondary', 'Details', getTCACertificationPath(dashedName))}
+                </div>
+            )
+        }
+
         return getCtaBtn('primary', 'Resume', getTCACertificationPath(dashedName))
     }
 
@@ -62,7 +73,7 @@ const TCCertCard: FC<TCCertCardProps> = (props: TCCertCardProps) => {
     }
 
     return (
-        <div className={styles.wrap}>
+        <div className={classNames(styles.wrap, isCompleted && styles.completed)}>
             <div className={styles.cardHeader}>
                 <CertificateBadgeIcon
                     type={props.certification.certificationCategory.track}
@@ -130,7 +141,11 @@ const TCCertCard: FC<TCCertCardProps> = (props: TCCertCardProps) => {
                 {props.certification.description.length > EXCERPT_TEXT_LEN ? '...' : ''}
             </p>
 
-            <SkillTags skills={skills} courseKey={dashedName} />
+            <SkillTags
+                skills={skills}
+                courseKey={dashedName}
+                theme={isCompleted ? 'gray' : 'white'}
+            />
 
             <ProvidersLogoList
                 className={styles.providers}