Merge branch 'dev' into TCA-920

Author: kkartunov

src-ts/lib/breadcrumb/Breadcrumb.module.scss

@@ -40,8 +40,8 @@
             padding: 0;
             @include ltesm {
                 flex: 0 1 auto;
-                &:first-child {
-                    flex: 1 0 auto;
+                &:first-child:not(:global(.elipsis)) {
+                    flex: 1 0 0;
                 }
             }
             a {

src-ts/lib/breadcrumb/breadcrumb-item/BreadcrumbItem.tsx

@@ -19,10 +19,11 @@ const BreadcrumbItem: FC<BreadcrumbItemProps> = (props: BreadcrumbItemProps) =>
     return (
         <li
             key={props.index}
-            onClick={() => onClick()}
+            onClick={onClick}
+            className={props.item.isElipsis ? 'elipsis' : ''}
         >
             <Link
-                className={props.item.isElipsis && styles.elipsis}
+                className={props.item.isElipsis ? styles.elipsis : ''}
                 to={props.item.url}
             >
                 {props.item.name}

src-ts/tools/learn/certification-details/certification-details-modal/certif-details-content/data/perks.data.tsx

@@ -1,3 +1,8 @@
+import { ReactNode } from 'react'
+
+import { IconSolid } from '../../../../../../lib'
+import { getTCAUserCertificationPreviewUrl } from '../../../../learn.routes'
+
 export type PerkIconsType = |
     'currency-dolary' |
     'icon-certif' |
@@ -8,6 +13,7 @@ export interface PerkItem {
     description: string
     icon: PerkIconsType
     title: string
+    extra?: (certification: string) => ReactNode
 }
 
 export const perks: Array<PerkItem> = [
@@ -24,6 +30,16 @@ export const perks: Array<PerkItem> = [
             You will receive a digital certificate that can be linked to
             your resume/CV, as verified proof of your skills.
         `,
+        extra: (certification: string) => (
+            <a
+                href={getTCAUserCertificationPreviewUrl(certification)}
+                target='_blank'
+                rel='noreferrer'
+            >
+                Preview
+                <IconSolid.ExternalLinkIcon />
+            </a>
+        ),
         icon: 'icon-certif',
         title: 'Proof of my skills',
     },

src-ts/tools/learn/certification-details/perks-section/PerksSection.module.scss

@@ -69,3 +69,22 @@
         margin-top: $space-sm;
     }
 }
+
+.perkExtraLink {
+    margin-top: $space-sm;
+
+    > * {
+        display: flex;
+        align-items: center;
+        gap: $space-xs;
+        color: $turq-160;
+        @include font-roboto;
+        font-weight: 700;
+        font-size: 14px;
+        line-height: 14px;
+        text-transform: uppercase;
+    }
+    svg {
+        @include icon-size(14);
+    }
+}

src-ts/tools/learn/certification-details/perks-section/PerksSection.tsx

@@ -1,7 +1,8 @@
-import classNames from 'classnames'
 import { FC } from 'react'
+import { Params, useParams } from 'react-router-dom'
+import classNames from 'classnames'
 
-import { type PerkItem } from '../data/perks.data'
+import { type PerkItem } from '../certification-details-modal/certif-details-content/data'
 
 import { getPerkIcon } from './icons-map'
 import styles from './PerksSection.module.scss'
@@ -12,38 +13,45 @@ interface PerksSectionProps {
     style?: 'clear'
 }
 
-const PerksSection: FC<PerksSectionProps> = (props: PerksSectionProps) => (
-    <div className={classNames(styles.wrap, props.style && styles[props.style])}>
-        <h2>{props.title ?? 'Why certify with Topcoder?'}</h2>
-        <svg width='0' height='0'>
-            <defs>
-                <linearGradient
-                    id='paint0_linear_1847_10558'
-                    x1='-1.11475e-07'
-                    y1='31.2359'
-                    x2='41.4349'
-                    y2='27.2123'
-                    gradientUnits='userSpaceOnUse'
-                >
-                    <stop stopColor='#05456D' />
-                    <stop offset='1' stopColor='#0A7AC0' />
-                </linearGradient>
-            </defs>
-        </svg>
-        <ul className={styles.perksList}>
-            {props.items.map(perk => (
-                <li key={perk.title}>
-                    <div className={styles.perkIcon}>
-                        {getPerkIcon(perk)}
-                    </div>
-                    <div className={styles.perkContent}>
-                        <h3 className='details'>{perk.title}</h3>
-                        <p className='body-main'>{perk.description}</p>
-                    </div>
-                </li>
-            ))}
-        </ul>
-    </div>
-)
+const PerksSection: FC<PerksSectionProps> = (props: PerksSectionProps) => {
+    const routeParams: Params<string> = useParams()
+
+    return (
+        <div className={classNames(styles.wrap, props.style && styles[props.style])}>
+            <h2>{props.title ?? 'Why certify with Topcoder?'}</h2>
+            <svg width='0' height='0'>
+                <defs>
+                    <linearGradient
+                        id='paint0_linear_1847_10558'
+                        x1='-1.11475e-07'
+                        y1='31.2359'
+                        x2='41.4349'
+                        y2='27.2123'
+                        gradientUnits='userSpaceOnUse'
+                    >
+                        <stop stopColor='#05456D' />
+                        <stop offset='1' stopColor='#0A7AC0' />
+                    </linearGradient>
+                </defs>
+            </svg>
+            <ul className={styles.perksList}>
+                {props.items.map(perk => (
+                    <li key={perk.title}>
+                        <div className={styles.perkIcon}>
+                            {getPerkIcon(perk)}
+                        </div>
+                        <div className={styles.perkContent}>
+                            <h3 className='details'>{perk.title}</h3>
+                            <p className='body-main'>{perk.description}</p>
+                            <div className={styles.perkExtraLink}>
+                                {perk.extra?.(routeParams.certification as string)}
+                            </div>
+                        </div>
+                    </li>
+                ))}
+            </ul>
+        </div>
+    )
+}
 
 export default PerksSection

src-ts/tools/learn/course-completed/tca-certification-view/TCACertificationView.tsx

@@ -1,9 +1,8 @@
 import { FC } from 'react'
 
-import { EnvironmentConfig } from '../../../../config'
 import { Button } from '../../../../lib'
 import { CourseTitle, LearnCourse, TCACertification } from '../../learn-lib'
-import { getCertificatePath, getTCACertificationPath, rootRoute } from '../../learn.routes'
+import { getTCACertificationPath } from '../../learn.routes'
 import { ReactComponent as StarsSvg } from '../stars.svg'
 import { TitleBadgeType } from '../../learn-lib/course-title/CourseTitle'
 import styles from '../CourseCompletedPage.module.scss'

src-ts/tools/learn/learn-lib/course-title/CourseTitle.module.scss

@@ -61,6 +61,8 @@
     @include ltemd {
         :global(.quote-small.xl) {
             margin-top: $space-sm;
+            display: flex;
+            justify-content: center;
         }
     }
 }

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

@@ -31,7 +31,7 @@ export function useTCACertificationEnrollment(
         enrollment: data,
         error: !!error,
         loading: !data,
-        ready: !!data,
+        ready: !!data || !!error,
     }
 }
 

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

@@ -34,6 +34,22 @@
         background: url('./bg-curve-white.png') no-repeat center bottom / 100vw, $tc-qa-grad;
     }
 
+    &.asPreview {
+        position: relative;
+        z-index: 1;
+        &:before {
+            content: "";
+            display: block;
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: url('./bg-curve-white.png') no-repeat center bottom / 100vw, url('./preview-watermark.png') no-repeat top left / cover;
+            z-index: -1;
+        }
+    }
+    
     .heroInner {
         display: flex;
         gap: $space-mx;
@@ -149,12 +165,7 @@
 }
 
 .wrap {
-    margin-top: $space-mxx;
     margin-bottom: 120px;
-
-    @include ltelg {
-        margin-top: $space-mx;
-    }
 
     @include ltemd {
         margin-bottom: $space-lg;
@@ -247,6 +258,11 @@
     align-items: center;
     gap: $space-xs;
 
+    margin-top: $space-mxx;
+    @include ltelg {
+        margin-top: $space-mx;
+    }
+
     &:global(.secondary) {
         border: 2px solid;
     }
@@ -286,4 +302,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%;
+            }
+        }
+    }
 }