Merge pull request #381 from topcoder-platform/TCA-516_optimize-certificate-for-social

TCA-516 optimize certificate for social -> dev

Author: brooketopcoder

src-ts/lib/styles/mixins/_layout.mixins.scss

@@ -22,6 +22,11 @@
     width: 100%;
 }
 
+@mixin socialPreviewImg {
+    width: 1200px;
+    height: 630px;
+}
+
 @mixin scrollbar {
     // firefox's solution for "customizing" scrollbars
     & {

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

@@ -50,6 +50,11 @@
     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) {
@@ -72,4 +77,4 @@
     svg {
         @include icon-xxl;
     }
-}
+}

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

@@ -1,3 +1,4 @@
+import classNames from 'classnames'
 import html2canvas from 'html2canvas'
 import { FC, MutableRefObject, useEffect, useMemo, useRef } from 'react'
 import { NavigateFunction, useNavigate } from 'react-router-dom'
@@ -26,12 +27,15 @@ import { Certificate } from './certificate'
 import styles from './CertificateView.module.scss'
 import { useCertificateScaling } from './use-certificate-scaling.hook'
 
+export type CertificateViewStyle = 'large-container' | undefined
+
 interface CertificateViewProps {
     certification: string,
     hideActions?: boolean,
     onCertificationNotCompleted: () => void
     profile: UserProfile,
     provider: string,
+    viewStyle: CertificateViewStyle
 }
 
 const CertificateView: FC<CertificateViewProps> = (props: CertificateViewProps) => {
@@ -169,7 +173,10 @@ const CertificateView: FC<CertificateViewProps> = (props: CertificateViewProps)
                                 />
                             </div>
                         )}
-                        <div className={styles['certificate-wrap']} ref={certificateWrapRef}>
+                        <div
+                            className={classNames(styles['certificate-wrap'], props.viewStyle)}
+                            ref={certificateWrapRef}
+                        >
                             <Certificate
                                 course={course?.title}
                                 userName={userName}
@@ -178,6 +185,7 @@ const CertificateView: FC<CertificateViewProps> = (props: CertificateViewProps)
                                 completedDate={completedCertificate?.completedDate ?? ''}
                                 elRef={certificateElRef}
                                 type={certificate?.trackType}
+                                viewStyle={props.viewStyle}
                             />
                         </div>
                         {!props.hideActions && (

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

@@ -11,6 +11,18 @@
     padding: calc($space-mx + $space-lg);
     display: flex;
     flex-direction: column;
+    flex: 1;
+
+    &-inner {
+        max-width: 385px;
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .wrap:global(.large-container) & {
+        padding-left: calc($space-mx + $space-mxx);
+    }
 
     h2 {
         color: $blue-160;
@@ -30,7 +42,7 @@
         font-size: 80px;
         line-height: 72px;
     }
-    
+
     &:global(.theme-dev) {
         .username {
             color: $tc-dev-track-color;
@@ -97,6 +109,7 @@
 
     display: flex;
     flex-direction: column;
+    max-width: 500px;
 }
 
 .course-card {
@@ -147,7 +160,7 @@
     margin-top: $space-sm;
     display: flex;
     justify-content: flex-end;
-    
+
     svg {
         display: block;
         height: 16px;

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

@@ -19,6 +19,7 @@ interface CertificateProps {
     tcHandle?: string
     type?: LearnCertificateTrackType
     userName?: string
+    viewStyle?: 'large-container'
 }
 
 const Certificate: FC<CertificateProps> = (props: CertificateProps) => {
@@ -32,27 +33,29 @@ const Certificate: FC<CertificateProps> = (props: CertificateProps) => {
     return (
         <div
             {...elementSelector}
-            className={styles['wrap']}
+            className={classNames(styles['wrap'], props.viewStyle)}
             ref={props.elRef}
         >
             <div className={classNames(styles['details'], `theme-${certificateType.toLowerCase()}`)}>
-                <h2 className='details grad'>Topcoder Academy</h2>
-                <h3>Certificate of Course Completion</h3>
-                <h1 className={classNames(styles['username'], 'grad')}>
-                    {props.userName}
-                </h1>
-                <div className={classNames('large-subtitle', styles['tc-handle'])}>
-                    <span>Topcoder Handle: </span>
-                    <span>{props.tcHandle}</span>
-                </div>
-                <div className={styles['logos']}>
-                    <div className={styles['logo']}>
-                        <TcLogoSvg />
-                    </div>
-                    <div className={styles['divider']} />
-                    <div className={styles['logo']}>
-                        <TcAcademyLogoSvg />
+                <div className={styles['details-inner']}>
+                    <h2 className='details grad'>Topcoder Academy</h2>
+                    <h3>Certificate of Course Completion</h3>
+                    <h1 className={classNames(styles['username'], 'grad')}>
+                        {props.userName}
+                    </h1>
+                    <div className={classNames('large-subtitle', styles['tc-handle'])}>
+                        <span>Topcoder Handle: </span>
+                        <span>{props.tcHandle}</span>
                     </div>
+                    <div className={styles['logos']}>
+                        <div className={styles['logo']}>
+                            <TcLogoSvg />
+                        </div>
+                        <div className={styles['divider']} />
+                        <div className={styles['logo']}>
+                            <TcAcademyLogoSvg />
+                        </div>
+                </div>
                 </div>
             </div>
             <div className={styles['badges']}>

src-ts/tools/learn/course-certificate/certificate-view/index.ts

@@ -0,0 +1,2 @@
+export { default as CertificateView } from './CertificateView'
+export type { CertificateViewStyle } from './CertificateView'

src-ts/tools/learn/course-certificate/user-certificate/UserCertificate.tsx

@@ -1,19 +1,22 @@
 import { Dispatch, FC, MutableRefObject, SetStateAction, useEffect, useLayoutEffect, useRef, useState } from 'react'
-import { Params, useParams } from 'react-router-dom'
+import { Params, useParams, useSearchParams } from 'react-router-dom'
 
 import {
     LoadingSpinner,
     profileGetAsync,
     UserProfile
 } from '../../../../lib'
-import CertificateView from '../certificate-view/CertificateView'
+import { getViewStyleParamKey } from '../../learn.routes'
+import { CertificateView, CertificateViewStyle } from '../certificate-view'
 
 import styles from './UserCertificate.module.scss'
 
 const UserCertificate: FC<{}> = () => {
 
     const wrapElRef: MutableRefObject<HTMLElement | any> = useRef()
     const routeParams: Params<string> = useParams()
+    const [queryParams]: [URLSearchParams, any] = useSearchParams()
+
     const [profile, setProfile]: [
         UserProfile | undefined,
         Dispatch<SetStateAction<UserProfile | undefined>>
@@ -59,6 +62,7 @@ const UserCertificate: FC<{}> = () => {
                         provider={providerParam}
                         onCertificationNotCompleted={() => { }}
                         hideActions
+                        viewStyle={queryParams.get(getViewStyleParamKey()) as CertificateViewStyle}
                     />
                 </div>
             )}

src-ts/tools/learn/learn-config/learn-config.model.ts

@@ -1,5 +1,6 @@
 export interface LearnConfigModel {
     API: string
+    CERT_ALT_PARAMS: { [key: string]: string }
     CERT_DOMAIN: string
     CERT_ELEMENT_SELECTOR: {
         attribute: string,

src-ts/tools/learn/learn-config/learn.default.config.ts

@@ -2,6 +2,9 @@ import { LearnConfigModel } from './learn-config.model'
 
 export const LearnConfigDefault: LearnConfigModel = {
     API: 'http://localhost:3001/v5/learning-paths',
+    CERT_ALT_PARAMS: {
+        'view-style': 'large-container',
+    },
     CERT_DOMAIN: 'https://certificate.topcoder-dev.com',
     CERT_ELEMENT_SELECTOR: {
         attribute: 'data-id',

src-ts/tools/learn/learn-lib/user-certifications-provider/user-certifications-functions/user-certification-progress.store.ts

@@ -1,4 +1,3 @@
-import { logInfo } from '../../../../../lib'
 import { LearnConfig } from '../../../learn-config'
 import { getUserCertificateUrl } from '../../../learn.routes'
 import { learnUrlGet, learnXhrGetAsync, learnXhrPostAsync, learnXhrPutAsync } from '../../functions'
@@ -16,15 +15,15 @@ export function completeCourse(
 ): Promise<LearnUserCertificationProgress> {
 
     // construct the certificate params
+    const certificateAlternateParams: { [key: string]: string } = LearnConfig.CERT_ALT_PARAMS
     const certificateElement: string = `[${LearnConfig.CERT_ELEMENT_SELECTOR.attribute}=${LearnConfig.CERT_ELEMENT_SELECTOR.value}]`
     const certificateUrl: string = getUserCertificateUrl(provider, certification, handle)
 
-    logInfo(`Completing course w certificate URL = ${certificateUrl}`)
-
     return updateAsync(
         certificationProgressId,
         UserCertificationUpdateProgressActions.completeCertificate,
         {
+            certificateAlternateParams,
             certificateElement,
             certificateUrl,
         }