TCA-870-cert-generation -> TCA-792_tc-certifications-epic

src-ts/tools/learn/learn-lib/data-providers/index.ts

@@ -4,4 +4,5 @@ export * from './lesson-provider'
 export * from './resource-provider-provider'
 export * from './user-certifications-provider'
 export * from './user-completed-certifications-provider'
+export * from './user-completed-tca-certifications-provider'
 export * from './tca-certifications-provider'

src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certification-category.model.ts

@@ -0,0 +1,7 @@
+export interface TCACertificationCategory {
+    id: number
+    category: string
+    track: string
+    createdAt: Date
+    updatedAt: Date
+}

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

@@ -1,15 +1,23 @@
 import { TCACertificationLearnLevel } from './tca-certificate-level-type'
 import { TCACertificationStatus } from './tca-certificate-status-type'
+import { TCACertificationCategory } from './tca-certification-category.model'
 
 export interface TCACertification {
     id: number
     title: string
+    dashedName: string
     description: string
+    introText: string
     estimatedCompletionTime: number
     status: TCACertificationStatus
     sequentialCourses: boolean
     learnerLevel: TCACertificationLearnLevel
     certificationCategoryId: string
+    certificationCategory: TCACertificationCategory
     stripeProductId?: string
     skills: string[]
+    learningOutcomes: string[]
+    prerequisites: string[]
+    createdAt: Date
+    updatedAt: Date
 }

src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certifications-provider-data.model.ts

@@ -6,3 +6,10 @@ export interface TCACertificationsProviderData {
     loading: boolean
     ready: boolean
 }
+
+export interface TCACertificationProviderData {
+    certification: TCACertification
+    error: boolean
+    loading: boolean
+    ready: boolean
+}

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

@@ -3,22 +3,46 @@
 /* eslint-disable default-param-last */
 import useSWR, { SWRConfiguration, SWRResponse } from 'swr'
 
+import { LEARN_PATHS } from '../../../learn.routes'
 import { learnUrlGet } from '../../functions'
 import { useSwrCache } from '../../learn-swr'
 
-import { TCACertificationsProviderData } from './tca-certifications-provider-data.model'
+import { TCACertificationProviderData, TCACertificationsProviderData } from './tca-certifications-provider-data.model'
 import { TCACertification } from './tca-certification.model'
 
 interface TCACertificationsAllProviderOptions {
     enabled?: boolean
 }
 
+const TCACertificationMock: TCACertification[] = [{
+    id: 1,
+    title: 'Web Development Fundamentals',
+    description: 'The Web Developer Fundamentals certification will teach you the basics of HTML, CSS, javascript, front end libraries and will also introduce you to backend development.',
+    estimatedCompletionTime: 4,
+    learnerLevel: 'Beginner',
+    sequentialCourses: false,
+    status: 'active',
+    certificationCategoryId: '',
+    skills: ['HTML', 'CSS', 'JavaScript', 'HTML', 'CSS', 'JavaScript', 'HTML', 'CSS', 'JavaScript', 'HTML', 'CSS', 'JavaScript', 'HTML', 'CSS', 'JavaScript'],
+},
+{
+    id: 2,
+    title: 'Data Science Fundamentals',
+    description: 'The Data Science Fundamentals certification will teach you the basics of scientific computing, Data Analysis and machine learning while using Python. Additionally, you will learn about data visualization.',
+    estimatedCompletionTime: 14,
+    status: 'active',
+    sequentialCourses: false,
+    learnerLevel: 'Expert',
+    certificationCategoryId: '',
+    skills: ['Python', 'TensorFlow', 'JSON'],
+}]
+
 export function useGetAllTCACertifications(
     options?: TCACertificationsAllProviderOptions,
 ): TCACertificationsProviderData {
 
     const url: string = learnUrlGet(
-        'topcoder-certifications',
+        LEARN_PATHS.tcaCertifications,
     )
     const swrCacheConfig: SWRConfiguration = useSwrCache(url)
 
@@ -35,37 +59,51 @@ export function useGetAllTCACertifications(
     }
 }
 
-// TODO: remove when integrated with API
-export function useGetAllTCACertificationsMOCK(): TCACertificationsProviderData {
-    const data: TCACertification[] = [{
-        id: 1,
-        title: 'Web Development Fundamentals',
-        description: 'The Web Developer Fundamentals certification will teach you the basics of HTML, CSS, javascript, front end libraries and will also introduce you to backend development.',
-        estimatedCompletionTime: 4,
-        learnerLevel: 'Beginner',
-        sequentialCourses: false,
-        status: 'active',
-        certificationCategoryId: '',
-        skills: ['HTML', 'CSS', 'JavaScript', 'HTML', 'CSS', 'JavaScript', 'HTML', 'CSS', 'JavaScript', 'HTML', 'CSS', 'JavaScript', 'HTML', 'CSS', 'JavaScript'],
-    },
-    {
-        id: 2,
-        title: 'Data Science Fundamentals',
-        description: 'The Data Science Fundamentals certification will teach you the basics of scientific computing, Data Analysis and machine learning while using Python. Additionally, you will learn about data visualization.',
-        estimatedCompletionTime: 14,
-        status: 'active',
-        sequentialCourses: false,
-        learnerLevel: 'Expert',
-        certificationCategoryId: '',
-        skills: ['Python', 'TensorFlow', 'JSON'],
-    }]
-
-    const error = {}
+export function useGetTCACertification(
+    certification: string,
+    options?: TCACertificationsAllProviderOptions,
+): TCACertificationProviderData {
+
+    const url: string = learnUrlGet(
+        LEARN_PATHS.tcaCertifications,
+        certification,
+    )
+    const swrCacheConfig: SWRConfiguration = useSwrCache(url)
+
+    const { data, error }: SWRResponse = useSWR(url, {
+        ...swrCacheConfig,
+        isPaused: () => options?.enabled === false,
+    })
 
     return {
-        certifications: data ?? [],
+        certification: data,
         error: !!error,
         loading: !data,
         ready: !!data,
     }
 }
+
+// TODO: remove when integrated with API
+export function useGetTCACertificationMOCK(
+    certification: string,
+): TCACertificationProviderData {
+
+    const data: TCACertification = TCACertificationMock[certification as any]
+
+    return {
+        certification: data,
+        error: false,
+        loading: !data,
+        ready: !!data,
+    }
+}
+
+// TODO: remove when integrated with API
+export function useGetAllTCACertificationsMOCK(): TCACertificationsProviderData {
+    return {
+        certifications: TCACertificationMock ?? [],
+        error: false,
+        loading: !TCACertificationMock,
+        ready: !!TCACertificationMock,
+    }
+}

src-ts/tools/learn/learn-lib/data-providers/user-completed-tca-certifications-provider/index.ts

@@ -0,0 +1,3 @@
+export * from './user-completed-tca-certifications-provider-data.model'
+export * from './user-completed-tca-certifications.provider'
+export * from './user-completed-tca-certification.model'

src-ts/tools/learn/learn-lib/data-providers/user-completed-tca-certifications-provider/user-completed-tca-certification.model.ts

@@ -0,0 +1,5 @@
+export interface UserCompletedTCACertification {
+    status: string
+    completedDate: string
+    trackType: string
+}

src-ts/tools/learn/learn-lib/data-providers/user-completed-tca-certifications-provider/user-completed-tca-certifications-provider-data.model.ts

@@ -0,0 +1,7 @@
+import { UserCompletedTCACertification } from './user-completed-tca-certification.model'
+
+export interface UserCompletedTCACertificationsProviderData {
+    certifications: ReadonlyArray<UserCompletedTCACertification>
+    loading: boolean
+    ready: boolean
+}

src-ts/tools/learn/learn-lib/data-providers/user-completed-tca-certifications-provider/user-completed-tca-certifications.provider.tsx

@@ -0,0 +1,48 @@
+import useSWR, { SWRResponse } from 'swr'
+
+import { learnUrlGet } from '../../functions'
+
+import { UserCompletedTCACertification } from './user-completed-tca-certification.model'
+import { UserCompletedTCACertificationsProviderData } from './user-completed-tca-certifications-provider-data.model'
+
+const COMPLETED_CERTS_MOCK = [
+    { status: 'comleted', trackType: 'web dev', completedDate: 'Dec 19, 2022' },
+]
+
+export function useGetUserTCACompletedCertifications(
+    userId?: number,
+    certification?: string,
+): UserCompletedTCACertificationsProviderData {
+
+    // TODO: update to actual API endpoint URL when ready
+    const url: string = learnUrlGet('completed-certifications', `${userId}`)
+
+    const { data, error }: SWRResponse<ReadonlyArray<UserCompletedTCACertification>> = useSWR(url)
+
+    let certifications: ReadonlyArray<UserCompletedTCACertification> = data ?? []
+
+    if (certification) {
+        certifications = certifications
+            .filter(c => (!certification || c.certification === certification))
+    }
+
+    return {
+        certifications,
+        loading: !data && !error,
+        ready: !!data || !!error,
+    }
+}
+
+// TODO: remove when API ready
+export function useGetUserTCACompletedCertificationsMOCK(
+    userId?: number,
+    certification?: string,
+): UserCompletedTCACertificationsProviderData {
+    const data = COMPLETED_CERTS_MOCK
+
+    return {
+        certifications: data,
+        loading: !data,
+        ready: !!data,
+    }
+}

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

@@ -11,6 +11,8 @@ 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')
 
 export enum LEARN_PATHS {
     certificate = '/certificate',
@@ -20,6 +22,7 @@ export enum LEARN_PATHS {
     fcc = '/learn/fcc',
     root = '/learn',
     startCourseRouteFlag = 'start-course',
+    tcaCertifications = 'tca-certifications',
 }
 
 export const rootRoute: string = LEARN_PATHS.root
@@ -70,6 +73,14 @@ export function getUserCertificateSsr(
     return `${LearnConfig.CERT_DOMAIN}/${handle}/${provider}/${certification}/${encodeURI(title)}`
 }
 
+export function getUserTCACertificateSsr(
+    certification: string,
+    handle: string,
+    title: string,
+): string {
+    return `${LearnConfig.CERT_DOMAIN}/${handle}/tca/${certification}/${encodeURI(title)}`
+}
+
 export function getUserCertificateUrl(
     provider: string,
     certification: string,
@@ -82,6 +93,10 @@ export function getViewStyleParamKey(): string {
     return Object.keys(LearnConfig.CERT_ALT_PARAMS)[0]
 }
 
+export function getTCACertificationPath(certification: string): string {
+    return `${LEARN_PATHS.root}/${LEARN_PATHS.tcaCertifications}/${certification}`
+}
+
 export const learnRoutes: ReadonlyArray<PlatformRoute> = [
     {
         children: [
@@ -127,6 +142,18 @@ 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 />,
+                id: 'User TCA Certification',
+                route: 'tca-certifications/:certification/:memberHandle/certificate',
+            },
         ],
         element: <LandingLearn />,
         id: toolTitle,

src-ts/tools/learn/tca-certificate/certificate-view/CertificateView.module.scss

@@ -0,0 +1,80 @@
+@import '../../../../lib/styles/includes';
+
+.wrap {
+    padding-top: $space-xxxxl;
+    padding-bottom: calc($space-xxxxl + $space-xs);
+    flex: 99 1 auto;
+    display: flex;
+
+    background: $tc-grad15;
+}
+
+.content-wrap {
+    display: flex;
+    @include pagePaddings;
+    margin: auto;
+    width: 100%;
+    justify-content: center;
+
+    gap: $space-xxxxl;
+
+    @include ltemd {
+        flex-direction: column;
+        margin: 0 auto auto;
+    }
+}
+
+.btns-wrap {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    gap: $space-sm;
+
+    &:last-child {
+        margin-top: auto;
+    }
+
+    @include ltemd {
+        flex-direction: row;
+        &:last-child {
+            justify-content: center;
+        }
+    }
+}
+
+.certificate-wrap {
+    aspect-ratio: 1.25715;
+    width: 880px;
+
+    background: #fff;
+
+    box-shadow: 0 20px 36px rgba($tc-black, 0.22);
+
+    &:global(.large-container) {
+        aspect-ratio: unset;
+        @include socialPreviewImg;
+    }
+}
+
+.share-btn:global(.button.icon) {
+    @include icon-mxx;
+    border-radius: 50%;
+
+    color: $tc-white;
+    border: $border solid $tc-white;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    padding: $space-sm;
+
+    &:hover {
+        background: transparent;
+    }
+
+    svg {
+        @include icon-xxl;
+    }
+}