Merge pull request #504 from topcoder-platform/fix-scaling-hook

Fixes the cert scaling hook: use transformScale instead of zoom -> dev

Author: vas3a

src-ts/tools/learn/certification-details/certificate-preview/CertificatePreview.module.scss

@@ -1,25 +1,24 @@
 import { FC, ReactNode } from 'react'
 import classNames from 'classnames'
 
-import { Button, IconOutline, IconSolid, Tooltip, UserProfile } from '../../../../lib'
+import { Button, IconOutline, IconSolid, Tooltip } from '../../../../lib'
 import {
     CompletionTimeRange,
     LearnLevelIcon,
     ProvidersLogoList,
     StickySidebar,
+    TCACertificatePreview,
     TCACertification,
     TCACertificationProgress,
 } from '../../learn-lib'
 import { EnrollCtaBtn } from '../enroll-cta-btn'
-import { CertificatePreview } from '../certificate-preview'
-import { getTCACertificateUrl } from '../../learn.routes'
+import { getTCACertificateUrl, getTCACertificationValidationUrl } from '../../learn.routes'
 
 import styles from './CertificationDetailsSidebar.module.scss'
 
 interface CertificationDetailsSidebarProps {
     certification: TCACertification
     enrolled: boolean
-    profile?: UserProfile
     certProgress?: TCACertificationProgress
 }
 
@@ -38,13 +37,18 @@ function renderTooltipContents(icon: ReactNode, text: Array<string>): ReactNode
 const CertificationDetailsSidebar: FC<CertificationDetailsSidebarProps> = (props: CertificationDetailsSidebarProps) => {
     const completed: boolean = !!props.certProgress?.completedAt
 
+    const validateLink: string
+        = getTCACertificationValidationUrl(props.certProgress?.completionUuid as string ?? '')
+
     return (
         <StickySidebar>
             <div className={styles['certificate-placeholder']}>
-                <CertificatePreview
+                <TCACertificatePreview
                     certification={props.certification}
-                    profile={props.profile}
-                    completedDate={props.certProgress?.completedAt ?? undefined}
+                    userName={props.certProgress?.userName}
+                    tcHandle={props.certProgress?.userHandle}
+                    completedDate={props.certProgress?.completedAt as unknown as string ?? ''}
+                    validateLink={validateLink}
                 />
             </div>
             {completed && props.certification && (

src-ts/tools/learn/certification-details/certificate-preview/CertificatePreview.tsx

@@ -45,15 +45,41 @@
 
 .certificate-wrap {
     aspect-ratio: 1.25715;
+    width: 100%;
+    max-width: 880px;
+    position: relative;
+
+    &:global(.large-container) {
+        aspect-ratio: unset;
+        @include socialPreviewImg;
+        max-width: none;
+    }
+
+    body:global(.canvas-clone) & {
+        transform: none!important;
+    }
+}
+
+.certifInnerWrap {
+    position: absolute;
+    top: 0;
+    left: 0;
     width: 880px;
+    aspect-ratio: inherit;
 
     background: #fff;
-
     box-shadow: 0 20px 36px rgba($tc-black, 0.22);
 
-    &:global(.large-container) {
-        aspect-ratio: unset;
-        @include socialPreviewImg;
+    > * {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+    }
+
+    .certificate-wrap:global(.large-container) & {
+        width: 100%;
+        height: 100%;
     }
 }
 

src-ts/tools/learn/certification-details/certificate-preview/index.ts

@@ -97,7 +97,7 @@ const CertificateView: FC<CertificateViewProps> = (props: CertificateViewProps)
         ready && hasCompletedTheCertification
     ), [hasCompletedTheCertification, ready])
 
-    useCertificateScaling(ready ? certificateWrapRef : undefined)
+    useCertificateScaling(ready ? certificateWrapRef : undefined, 880, 880)
 
     const handleBackBtnClick: () => void = useCallback(() => {
         navigate(coursePath)
@@ -141,16 +141,18 @@ const CertificateView: FC<CertificateViewProps> = (props: CertificateViewProps)
                             className={classNames(styles['certificate-wrap'], props.viewStyle)}
                             ref={certificateWrapRef}
                         >
-                            <Certificate
-                                course={course?.title}
-                                userName={userName}
-                                tcHandle={props.profile.handle}
-                                provider={course?.resourceProvider.name}
-                                completedDate={completedCertificate?.completedDate ?? ''}
-                                elRef={certificateElRef}
-                                type={certificate?.certificationCategory.track}
-                                viewStyle={props.viewStyle}
-                            />
+                            <div className={styles.certifInnerWrap}>
+                                <Certificate
+                                    course={course?.title}
+                                    userName={userName}
+                                    tcHandle={props.profile.handle}
+                                    provider={course?.resourceProvider.name}
+                                    completedDate={completedCertificate?.completedDate ?? ''}
+                                    elRef={certificateElRef}
+                                    type={certificate?.certificationCategory.track}
+                                    viewStyle={props.viewStyle}
+                                />
+                            </div>
                         </div>
                         {!props.hideActions && (
                             <div className={styles['btns-wrap']}>

src-ts/tools/learn/certification-details/certification-details-sidebar/CertificationDetailsSidebar.tsx

@@ -137,14 +137,14 @@
 
     svg {
         width: auto;
-        height: 100%;
     }
 }
 
 .divider {
     width: $border;
     background: $black-10;
-    margin: 0 $space-xxxxl;
+    margin: 0 $space-lg;
+    flex: 0 0 auto;
 }
 
 .vendor {

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

@@ -2,8 +2,8 @@ import { FC, MutableRefObject } from 'react'
 import classNames from 'classnames'
 
 import { LearnConfig } from '../../../learn-config'
-import { LearnCertificateTrackType, TcLogoSvg } from '../../../learn-lib'
-import { FccLogoSvg, TcAcademyLogoSvg } from '../../../../../lib'
+import { LearnCertificateTrackType } from '../../../learn-lib'
+import { FccLogoSvg, TcAcademyLogoSvg, TcLogoSvg } from '../../../../../lib'
 
 import { CertificateBgPattern } from './certificate-bg-pattern'
 import { CourseCard } from './course-card'

src-ts/tools/learn/course-certificate/certificate-view/CertificateView.tsx

@@ -1,19 +1,22 @@
+import { LearnModelBase } from '../../../functions'
 import { TCACertification } from '../tca-certification.model'
 
 import { TCAFccCertificationProgress } from './tca-fcc-certification-progress.model'
 
 export type TCACertificationProgressStatus = 'enrolled' | 'completed'
 
-export interface TCACertificationProgress {
+export interface TCACertificationProgress extends LearnModelBase {
     id: number
+    completionUuid: string
+    coursesCount: number
     topcoderCertification: TCACertification
-    topcoderCertificationId: number
     status: TCACertificationProgressStatus
     completedAt: null | Date
-    createdAt: Date
-    updatedAt: Date
-    certificationProgress: 0
+    certificationProgress: number
     resourceProgresses: [{
         fccCertificationProgress: TCAFccCertificationProgress
     }]
+    userHandle: string
+    userId: number
+    userName: string
 }

src-ts/tools/learn/course-certificate/certificate-view/certificate/Certificate.module.scss

@@ -1,19 +1,20 @@
 export * from './action-button'
 export * from './collapsible-pane'
+export * from './completion-time-range'
 export * from './course-badge'
 export * from './course-outline'
 export * from './course-title'
-export * from './completion-time-range'
 export * from './curriculum-summary'
 export * from './data-providers'
 export * from './dynamic-icons'
 export * from './learn-breadcrumb-provider'
 export * from './learn-swr'
 export * from './providers-logo-list'
-export * from './skill'
 export * from './skill-tags'
+export * from './skill'
 export * from './sticky-sidebar'
 export * from './svgs'
+export * from './tca-certificate-preview'
 export * from './use-certificate-canvas-hook'
 export * from './use-certificate-print-hook'
 export * from './use-certificate-scaling-hook'