Merge pull request #530 from topcoder-platform/TCA-876_tca-cert-progress-in-navbar

TCA-876 - add tca-cert status in FCC sidebar -> dev

Author: vas3a

src-ts/tools/learn/course-details/CourseDetailsPage.tsx

@@ -17,6 +17,7 @@ import {
     CoursesProviderData,
     CourseTitle,
     ResourceProviderData,
+    TCACertificationProgressBox,
     useGetCertification,
     useGetCourses,
     useGetResourceProvider,
@@ -28,7 +29,6 @@ import {
 import { getCoursePath } from '../learn.routes'
 
 import { CourseCurriculum } from './course-curriculum'
-import { TCACertificationBanner } from './tca-certification-banner'
 import styles from './CourseDetailsPage.module.scss'
 
 const CourseDetailsPage: FC<{}> = () => {
@@ -194,7 +194,7 @@ const CourseDetailsPage: FC<{}> = () => {
                                 trackType={certificate?.certificationCategory.track}
                             />
 
-                            <TCACertificationBanner
+                            <TCACertificationProgressBox
                                 userId={profile?.userId}
                                 className={styles.tcaCertBanner}
                                 fccCertificateId={certificate.id}

src-ts/tools/learn/course-details/tca-certification-banner/index.ts

@@ -533,6 +533,7 @@ const FreeCodeCamp: FC<{}> = () => {
                         currentStep={`${moduleParam}/${lessonParam}`}
                         certificateProgress={certificateProgress}
                         refetchProgress={refetchProgress}
+                        userId={profile?.userId}
                     />
 
                     <div className={styles['course-frame']}>

src-ts/tools/learn/free-code-camp/FreeCodeCamp.tsx

@@ -28,4 +28,5 @@
     @extend .body-main-bold;
     flex: 0 0 auto;
     margin-bottom: $space-xl;
+    margin-top: $space-lg;
 }

src-ts/tools/learn/free-code-camp/fcc-sidebar/FccSidebar.module.scss

@@ -1,6 +1,12 @@
 import { Dispatch, FC, SetStateAction, useState } from 'react'
 
-import { CollapsiblePane, CourseOutline, LearnCourse, LearnUserCertificationProgress } from '../../learn-lib'
+import {
+    CollapsiblePane,
+    CourseOutline,
+    LearnCourse,
+    LearnUserCertificationProgress,
+    TCACertificationProgressBox,
+} from '../../learn-lib'
 
 import styles from './FccSidebar.module.scss'
 
@@ -11,6 +17,7 @@ interface FccSidebarProps {
     courseDataReady: boolean
     currentStep: string
     refetchProgress: () => void
+    userId?: number
 }
 
 const FccSidebar: FC<FccSidebarProps> = (props: FccSidebarProps) => {
@@ -35,6 +42,12 @@ const FccSidebar: FC<FccSidebarProps> = (props: FccSidebarProps) => {
                 isOpen={isOpen}
             >
                 <div className={styles['course-outline-wrap']}>
+                    <TCACertificationProgressBox
+                        userId={props.userId}
+                        className={styles.tcaCertBanner}
+                        fccCertificateId={props.certificateProgress?.fccCertificationId}
+                        theme='sidebar'
+                    />
                     <div className={styles['course-outline-title']}>
                         {props.courseData?.title}
                     </div>

src-ts/tools/learn/free-code-camp/fcc-sidebar/FccSidebar.tsx

@@ -15,6 +15,7 @@ export * from './skill'
 export * from './sticky-sidebar'
 export * from './svgs'
 export * from './tca-certificate-preview'
+export * from './tca-certification-progress-box'
 export * from './use-certificate-canvas-hook'
 export * from './use-certificate-print-hook'
 export * from './use-certificate-scaling-hook'

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

@@ -93,4 +93,32 @@
             color: $turq-75;
         }
     }
+
+}
+    
+.wrap:global(.theme-sidebar) {
+    background: $black-5;
+    color: $tc-black;
+    border: 0 none;
+    padding: $space-lg;
+
+    .header {
+        > svg {
+            @include icon-size(36);
+        }
+
+        :global(.overline) {
+            font-size: 10px;
+            line-height: 12px;
+        }
+
+        :global(.body-main-bold) {
+            font-size: 14px;
+            line-height: 20px;
+        }
+    }
+
+    .statusBox {
+        background: $tc-white;
+    }
 }

src-ts/tools/learn/course-details/tca-certification-banner/TCACertificationBanner.module.scss renamed to src-ts/tools/learn/learn-lib/tca-certification-progress-box/TCACertificationProgressBox.module.scss

@@ -15,10 +15,10 @@ import {
     useGetUserCertifications,
     UserCertificationProgressStatus,
     UserCertificationsProviderData,
-} from '../../learn-lib'
+} from '..'
 import { getTCACertificationPath } from '../../learn.routes'
 
-import styles from './TCACertificationBanner.module.scss'
+import styles from './TCACertificationProgressBox.module.scss'
 
 interface ProgressByIdCollection {
     [key: string]: LearnUserCertificationProgress
@@ -37,13 +37,14 @@ function getStatusBox(icon: ReactNode, text: string, theme: string = 'gray'): Re
     )
 }
 
-export interface TCACertificationBannerProps {
+export interface TCACertificationProgressBoxProps {
     userId?: number
     className?: string
     fccCertificateId?: string
+    theme?: 'sidebar'
 }
 
-const TCACertificationBanner: FC<TCACertificationBannerProps> = (props: TCACertificationBannerProps) => {
+const TCACertificationProgressBox: FC<TCACertificationProgressBoxProps> = (props: TCACertificationProgressBoxProps) => {
 
     const {
         certifications: tcaCertifications,
@@ -117,7 +118,7 @@ const TCACertificationBanner: FC<TCACertificationBannerProps> = (props: TCACerti
     }
 
     return (
-        <div className={classNames(props.className, styles.wrap)}>
+        <div className={classNames(props.className, styles.wrap, props.theme && `theme-${props.theme}`)}>
             <div className={styles.header}>
                 <CertificateBadgeIcon
                     type={certification.certificationCategory.track}
@@ -159,4 +160,4 @@ const TCACertificationBanner: FC<TCACertificationBannerProps> = (props: TCACerti
     )
 }
 
-export default TCACertificationBanner
+export default TCACertificationProgressBox

src-ts/tools/learn/course-details/tca-certification-banner/TCACertificationBanner.tsx renamed to src-ts/tools/learn/learn-lib/tca-certification-progress-box/TCACertificationProgressBox.tsx

@@ -0,0 +1 @@
+export { default as TCACertificationProgressBox } from './TCACertificationProgressBox'