Skip to content

Commit 92a0591

Browse files
vas3avas3a
authored
Merge pull request #582 from topcoder-platform/TCA-1131_hm-preview
TCA-1131 Hiring manager preview -> dev
2 parents 5d6bcaf + bb2cf3e commit 92a0591

File tree

19 files changed

+256
-219
lines changed

19 files changed

+256
-219
lines changed

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
import { ReactNode } from 'react'
2+
3+
import { IconSolid } from '../../../../../../lib'
4+
import { getTCAUserCertificationPreviewUrl } from '../../../../learn.routes'
5+
16
export type PerkIconsType = |
27
'currency-dolary' |
38
'icon-certif' |
@@ -8,6 +13,7 @@ export interface PerkItem {
813
description: string
914
icon: PerkIconsType
1015
title: string
16+
extra?: (certification: string) => ReactNode
1117
}
1218

1319
export const perks: Array<PerkItem> = [
@@ -24,6 +30,16 @@ export const perks: Array<PerkItem> = [
2430
You will receive a digital certificate that can be linked to
2531
your resume/CV, as verified proof of your skills.
2632
`,
33+
extra: (certification: string) => (
34+
<a
35+
href={getTCAUserCertificationPreviewUrl(certification)}
36+
target='_blank'
37+
rel='noreferrer'
38+
>
39+
Preview
40+
<IconSolid.ExternalLinkIcon />
41+
</a>
42+
),
2743
icon: 'icon-certif',
2844
title: 'Proof of my skills',
2945
},

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

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,3 +69,22 @@
6969
margin-top: $space-sm;
7070
}
7171
}
72+
73+
.perkExtraLink {
74+
margin-top: $space-sm;
75+
76+
> * {
77+
display: flex;
78+
align-items: center;
79+
gap: $space-xs;
80+
color: $turq-160;
81+
@include font-roboto;
82+
font-weight: 700;
83+
font-size: 14px;
84+
line-height: 14px;
85+
text-transform: uppercase;
86+
}
87+
svg {
88+
@include icon-size(14);
89+
}
90+
}

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

Lines changed: 43 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1-
import classNames from 'classnames'
21
import { FC } from 'react'
2+
import { Params, useParams } from 'react-router-dom'
3+
import classNames from 'classnames'
34

4-
import { type PerkItem } from '../data/perks.data'
5+
import { type PerkItem } from '../certification-details-modal/certif-details-content/data'
56

67
import { getPerkIcon } from './icons-map'
78
import styles from './PerksSection.module.scss'
@@ -12,38 +13,45 @@ interface PerksSectionProps {
1213
style?: 'clear'
1314
}
1415

15-
const PerksSection: FC<PerksSectionProps> = (props: PerksSectionProps) => (
16-
<div className={classNames(styles.wrap, props.style && styles[props.style])}>
17-
<h2>{props.title ?? 'Why certify with Topcoder?'}</h2>
18-
<svg width='0' height='0'>
19-
<defs>
20-
<linearGradient
21-
id='paint0_linear_1847_10558'
22-
x1='-1.11475e-07'
23-
y1='31.2359'
24-
x2='41.4349'
25-
y2='27.2123'
26-
gradientUnits='userSpaceOnUse'
27-
>
28-
<stop stopColor='#05456D' />
29-
<stop offset='1' stopColor='#0A7AC0' />
30-
</linearGradient>
31-
</defs>
32-
</svg>
33-
<ul className={styles.perksList}>
34-
{props.items.map(perk => (
35-
<li key={perk.title}>
36-
<div className={styles.perkIcon}>
37-
{getPerkIcon(perk)}
38-
</div>
39-
<div className={styles.perkContent}>
40-
<h3 className='details'>{perk.title}</h3>
41-
<p className='body-main'>{perk.description}</p>
42-
</div>
43-
</li>
44-
))}
45-
</ul>
46-
</div>
47-
)
16+
const PerksSection: FC<PerksSectionProps> = (props: PerksSectionProps) => {
17+
const routeParams: Params<string> = useParams()
18+
19+
return (
20+
<div className={classNames(styles.wrap, props.style && styles[props.style])}>
21+
<h2>{props.title ?? 'Why certify with Topcoder?'}</h2>
22+
<svg width='0' height='0'>
23+
<defs>
24+
<linearGradient
25+
id='paint0_linear_1847_10558'
26+
x1='-1.11475e-07'
27+
y1='31.2359'
28+
x2='41.4349'
29+
y2='27.2123'
30+
gradientUnits='userSpaceOnUse'
31+
>
32+
<stop stopColor='#05456D' />
33+
<stop offset='1' stopColor='#0A7AC0' />
34+
</linearGradient>
35+
</defs>
36+
</svg>
37+
<ul className={styles.perksList}>
38+
{props.items.map(perk => (
39+
<li key={perk.title}>
40+
<div className={styles.perkIcon}>
41+
{getPerkIcon(perk)}
42+
</div>
43+
<div className={styles.perkContent}>
44+
<h3 className='details'>{perk.title}</h3>
45+
<p className='body-main'>{perk.description}</p>
46+
<div className={styles.perkExtraLink}>
47+
{perk.extra?.(routeParams.certification as string)}
48+
</div>
49+
</div>
50+
</li>
51+
))}
52+
</ul>
53+
</div>
54+
)
55+
}
4856

4957
export default PerksSection

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ export function useTCACertificationEnrollment(
3131
enrollment: data,
3232
error: !!error,
3333
loading: !data,
34-
ready: !!data,
34+
ready: !!data || !!error,
3535
}
3636
}
3737

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

Lines changed: 21 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,22 @@
3434
background: url('./bg-curve-white.png') no-repeat center bottom / 100vw, $tc-qa-grad;
3535
}
3636

37+
&.asPreview {
38+
position: relative;
39+
z-index: 1;
40+
&:before {
41+
content: "";
42+
display: block;
43+
position: absolute;
44+
top: 0;
45+
left: 0;
46+
width: 100%;
47+
height: 100%;
48+
background: url('./bg-curve-white.png') no-repeat center bottom / 100vw, url('./preview-watermark.png') no-repeat top left / cover;
49+
z-index: -1;
50+
}
51+
}
52+
3753
.heroInner {
3854
display: flex;
3955
gap: $space-mx;
@@ -149,12 +165,7 @@
149165
}
150166

151167
.wrap {
152-
margin-top: $space-mxx;
153168
margin-bottom: 120px;
154-
155-
@include ltelg {
156-
margin-top: $space-mx;
157-
}
158169

159170
@include ltemd {
160171
margin-bottom: $space-lg;
@@ -247,6 +258,11 @@
247258
align-items: center;
248259
gap: $space-xs;
249260

261+
margin-top: $space-mxx;
262+
@include ltelg {
263+
margin-top: $space-mx;
264+
}
265+
250266
&:global(.secondary) {
251267
border: 2px solid;
252268
}

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@ export interface HiringManagerViewProps {
5555
certification?: TCACertification
5656
completedAt?: string
5757
completionUuid?: string
58+
isPreview?: boolean
5859
isModalView?: boolean
5960
isMemberVerified?: boolean
6061
isOwner?: boolean
@@ -158,6 +159,7 @@ const HiringManagerView: FC<HiringManagerViewProps> = (props: HiringManagerViewP
158159
className={classNames(
159160
styles.hero,
160161
styles[`hero-${certificationCategory?.track.toLowerCase() || 'dev'}`],
162+
props.isPreview && styles.asPreview,
161163
)}
162164
>
163165
<ContentLayout outerClass={props.isModalView ? styles.contentOuter : ''}>

‎src-ts/tools/learn/learn-lib/hiring-manager-view/preview-watermark.png‎

41.2 KB
Loading

‎src-ts/tools/learn/learn.routes.tsx‎

Lines changed: 18 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -20,19 +20,20 @@ const UserCertificate: LazyLoadedComponent = lazyLoad(() => import('./course-cer
2020
const FreeCodeCamp: LazyLoadedComponent = lazyLoad(() => import('./free-code-camp'), 'FreeCodeCamp')
2121
const MyLearning: LazyLoadedComponent = lazyLoad(() => import('./my-learning'), 'MyLearning')
2222
const LandingLearn: LazyLoadedComponent = lazyLoad(() => import('./Learn'))
23-
const MyTCACertificate: LazyLoadedComponent = lazyLoad(() => import('./tca-certificate'), 'MyTCACertificate')
24-
const UserTCACertificate: LazyLoadedComponent = lazyLoad(() => import('./tca-certificate'), 'UserTCACertificate')
23+
const UserTCACertificate: LazyLoadedComponent = lazyLoad(() => import('./tca-certificate'), 'CertificateView')
2524

2625
const ValidateTCACertificate: LazyLoadedComponent
2726
= lazyLoad(() => import('./tca-certificate'), 'UuidCertificationView')
2827

2928
const UserCertificationView: LazyLoadedComponent
3029
= lazyLoad(() => import('./tca-certificate'), 'UserCertificationView')
3130

31+
const UserCertificationPreview: LazyLoadedComponent
32+
= lazyLoad(() => import('./tca-certificate'), 'UserCertificationPreview')
33+
3234
export enum LEARN_PATHS {
3335
certificate = '/certificate',
3436
completed = '/learn/completed',
35-
myCertificate = '/learn/my-certificate',
3637
myLearning = '/learn/my-learning',
3738
fcc = '/learn/fcc',
3839
root = '/learn',
@@ -119,12 +120,6 @@ export function getTCACertificationEnrollPath(certification: string): string {
119120

120121
export function getTCACertificateUrl(
121122
certification: string,
122-
): string {
123-
return `${getTCACertificationPath(certification)}${LEARN_PATHS.certificate}`
124-
}
125-
126-
export function getUserTCACertificateUrl(
127-
certification: string,
128123
handle: string,
129124
): string {
130125
return `${getTCACertificationPath(certification)}/${handle}${LEARN_PATHS.certificate}`
@@ -143,6 +138,12 @@ export function getTCAUserCertificationUrl(
143138
return `${getTCACertificationPath(certification)}/${handle}/certification`
144139
}
145140

141+
export function getTCAUserCertificationPreviewUrl(
142+
certification: string,
143+
): string {
144+
return `${getTCACertificationPath(certification)}/preview`
145+
}
146+
146147
export function getAuthenticateAndEnrollRoute(): string {
147148
return `${authUrlLogin()}${encodeURIComponent(LEARN_PATHS.tcaEnroll)}`
148149
}
@@ -204,12 +205,6 @@ export const learnRoutes: ReadonlyArray<PlatformRoute> = [
204205
id: 'My Learning',
205206
route: 'my-learning',
206207
},
207-
{
208-
children: [],
209-
element: <MyTCACertificate />,
210-
id: 'My TCA Certification',
211-
route: 'tca-certifications/:certification/certificate',
212-
},
213208
{
214209
children: [],
215210
element: <UserTCACertificate />,
@@ -219,15 +214,21 @@ export const learnRoutes: ReadonlyArray<PlatformRoute> = [
219214
{
220215
children: [],
221216
element: <ValidateTCACertificate />,
222-
id: 'Validate TCA Certification - aka hiring manager view',
217+
id: 'Hiring manager view - uuid param',
223218
route: ':completionUuid',
224219
},
225220
{
226221
children: [],
227222
element: <UserCertificationView />,
228-
id: 'Validate TCA Certification - aka hiring manager view',
223+
id: 'Hiring manager view',
229224
route: 'tca-certifications/:certification/:memberHandle/certification',
230225
},
226+
{
227+
children: [],
228+
element: <UserCertificationPreview />,
229+
id: 'Giring manager preview',
230+
route: 'tca-certifications/:certification/preview',
231+
},
231232
],
232233
element: <LandingLearn />,
233234
id: toolTitle,

0 commit comments

Comments
 (0)