TCA-1185 - restore and update modal view for the hiring manager view

Author: vas3a

src-ts/tools/learn/learn-lib/hiring-manager-view/HiringManagerView.module.scss

@@ -286,4 +286,76 @@
     @include ltemd {
         display: none;
     }
+}
+
+.modalView {
+    .hero {
+        padding-top: $space-mx;
+        min-height: 380px;
+
+        @include ltesm {
+            max-height: none;
+        }
+
+
+        .heroInner {
+            margin-bottom: 0;
+            flex-direction: row;
+            padding-right: $space-lg;
+            padding-bottom: $space-mx;
+
+            @include ltesm {
+                flex-direction: column;
+                padding-right: 0;
+            }
+
+            .heroLeft {
+                .member {
+                    margin-bottom: $space-xxxxl;
+
+                    >svg,
+                    >img {
+                        max-width: 88px;
+                        max-height: 88px;
+                    }
+                }
+
+                .certTitle {
+                    font-size: 40px;
+                    line-height: 40px;
+                }
+            }
+        }
+    }
+
+    .wrap {
+        margin-bottom: 0;
+    }
+    
+    .contentOuter {
+        max-width: none;
+
+        >div {
+            max-width: none !important;
+        }
+
+    }
+
+    .courses {
+        margin-bottom: 0;
+    }
+
+    .colsWrap {
+        margin-top: 0;
+    }
+    
+    .colWrap {
+        &:last-child {
+            max-width: 25%;
+            padding-right: 0;
+            @include ltemd {
+                max-width: 100%;
+            }
+        }
+    }
 }

src-ts/tools/learn/learn-lib/hiring-manager-view/HiringManagerView.tsx

@@ -5,6 +5,7 @@ import {
     ReactNode,
     SetStateAction,
     useCallback,
+    useLayoutEffect,
     useRef,
     useState,
 } from 'react'
@@ -34,7 +35,7 @@ import {
     useTCAShareCertificateModal,
 } from '..'
 import { getTCACertificationPath, getUserTCACertificateSsr } from '../../learn.routes'
-import { clearFCCCertificationTitle } from '../functions'
+import { clearFCCCertificationTitle, hideSiblings } from '../functions'
 import { EnvironmentConfig } from '../../../../config'
 
 import { CertificateModal } from './certificate-modal'
@@ -64,6 +65,7 @@ export interface HiringManagerViewProps {
 
 const HiringManagerView: FC<HiringManagerViewProps> = (props: HiringManagerViewProps) => {
     const certificateElRef: MutableRefObject<HTMLDivElement | any> = useRef()
+    const wrapElRef: MutableRefObject<HTMLElement | any> = useRef()
 
     const [certPreviewModalIsOpen, setCertPreviewModalIsOpen]: [boolean, Dispatch<SetStateAction<boolean>>]
         = useState<boolean>(false)
@@ -89,6 +91,8 @@ const HiringManagerView: FC<HiringManagerViewProps> = (props: HiringManagerViewP
     )
     const shareModal: TCAShareCertificateModalData = useTCAShareCertificateModal(ssrCertUrl)
 
+    const renderShareActions: boolean = props.isOwner && !props.isModalView
+
     const getCertificateCanvas: () => Promise<HTMLCanvasElement | void>
         = useCertificateCanvas(certificateElRef)
 
@@ -198,29 +202,31 @@ const HiringManagerView: FC<HiringManagerViewProps> = (props: HiringManagerViewP
                             <div className={styles.heroCert}>
                                 {renderTCACertificatePreview(certificateElRef)}
 
-                                <div className={styles.certActionBtns}>
-                                    <ActionButton
-                                        icon={<IconOutline.ZoomInIcon />}
-                                        className={classNames(styles.certZoomBtn, styles.certActionBtn)}
-                                        onClick={handleShowCertPreviewModal}
-                                    />
-                                    {props.isOwner && (
-                                        <>
-                                            <ActionButton
-                                                className={classNames('desktop-hide', styles.certActionBtn)}
-                                                icon={<IconOutline.PrinterIcon />}
-                                                onClick={handlePrint}
-                                            />
-                                            <ActionButton
-                                                className={classNames('desktop-hide', styles.certActionBtn)}
-                                                icon={<IconOutline.DownloadIcon />}
-                                                onClick={handleDownload}
-                                            />
-                                        </>
-                                    )}
-                                </div>
+                                {!props.isModalView && (
+                                    <div className={styles.certActionBtns}>
+                                        <ActionButton
+                                            icon={<IconOutline.ZoomInIcon />}
+                                            className={classNames(styles.certZoomBtn, styles.certActionBtn)}
+                                            onClick={handleShowCertPreviewModal}
+                                        />
+                                        {renderShareActions && (
+                                            <>
+                                                <ActionButton
+                                                    className={classNames('desktop-hide', styles.certActionBtn)}
+                                                    icon={<IconOutline.PrinterIcon />}
+                                                    onClick={handlePrint}
+                                                />
+                                                <ActionButton
+                                                    className={classNames('desktop-hide', styles.certActionBtn)}
+                                                    icon={<IconOutline.DownloadIcon />}
+                                                    onClick={handleDownload}
+                                                />
+                                            </>
+                                        )}
+                                    </div>
+                                )}
                             </div>
-                            {props.isOwner && (
+                            {renderShareActions && (
                                 <div className={classNames('mobile-hide', styles.certActionBtns)}>
                                     <ActionButton
                                         className={styles.certActionBtn}
@@ -241,8 +247,19 @@ const HiringManagerView: FC<HiringManagerViewProps> = (props: HiringManagerViewP
         )
     }
 
+    useLayoutEffect(() => {
+        const el: HTMLElement = wrapElRef.current
+        if (!el || !props.isModalView) {
+            return
+        }
+
+        hideSiblings(el.parentElement as HTMLElement)
+        hideSiblings(el.parentElement?.parentElement as HTMLElement)
+
+    })
+
     return !!props.certification && !!props.userProfile ? (
-        <div>
+        <div className={props.isModalView ? styles.modalView : ''} ref={wrapElRef}>
             {renderHero()}
 
             <ContentLayout
@@ -251,7 +268,7 @@ const HiringManagerView: FC<HiringManagerViewProps> = (props: HiringManagerViewP
                 innerClass={styles.innerContentWrap}
             >
                 <div className={styles.wrap}>
-                    {props.isOwner && (
+                    {renderShareActions && (
                         <Button
                             buttonStyle='primary'
                             icon={IconOutline.ShareIcon}
@@ -278,24 +295,28 @@ const HiringManagerView: FC<HiringManagerViewProps> = (props: HiringManagerViewP
                                 expandCount={props.certification?.skills?.length ?? 0}
                             />
 
-                            <Button
-                                buttonStyle='secondary'
-                                label={props.isOwner ? 'View your Topcoder profile' : 'View full Topcoder profile'}
-                                url={myProfileLink}
-                                target='_blank'
-                                className={styles.shareBtn}
-                            />
+                            {!props.isModalView && (
+                                <Button
+                                    buttonStyle='secondary'
+                                    label={props.isOwner ? 'View your Topcoder profile' : 'View full Topcoder profile'}
+                                    url={myProfileLink}
+                                    target='_blank'
+                                    className={styles.shareBtn}
+                                />
+                            )}
                         </div>
                     </div>
 
                     {renderCoursesGridItems()}
 
-                    <Button
-                        className={styles.detailsBtn}
-                        buttonStyle='link'
-                        label='Certification details'
-                        route={certificationDetailsLink}
-                    />
+                    {!props.isModalView && (
+                        <Button
+                            className={styles.detailsBtn}
+                            buttonStyle='link'
+                            label='Certification details'
+                            route={certificationDetailsLink}
+                        />
+                    )}
                 </div>
             </ContentLayout>
             {shareModal.modal}

src-ts/tools/learn/tca-certificate/user-certification-view/UserCertificationViewBase.tsx

@@ -7,6 +7,7 @@ import {
     useRef,
     useState,
 } from 'react'
+import { useSearchParams } from 'react-router-dom'
 
 import {
     getVerificationStatusAsync,
@@ -32,12 +33,14 @@ interface UserCertificationViewBaseProps {
 }
 
 const UserCertificationViewBase: FC<UserCertificationViewBaseProps> = (props: UserCertificationViewBaseProps) => {
+    const [queryParams]: [URLSearchParams, any] = useSearchParams()
 
-    // const routeParams: Params<string> = useParams()
     const tcaCertificationPath: string = getTCACertificationPath(`${props.certification?.dashedName}`)
     const certificateElRef: MutableRefObject<HTMLDivElement | any> = useRef()
     const isOwnProfile: boolean = !!props.profile?.email
 
+    const isModalView: boolean = queryParams.get('view-style') === 'modal'
+
     const [isMemberVerified, setIsMemberVerified]: [boolean, Dispatch<SetStateAction<boolean>>]
         = useState<boolean>(false)
 
@@ -82,6 +85,7 @@ const UserCertificationViewBase: FC<UserCertificationViewBaseProps> = (props: Us
                         userName={props.enrollment.userName}
                         isOwner={isOwnProfile}
                         validationUrl={validationUrl}
+                        isModalView={isModalView}
                     />
                 </div>
             )}