Skip to content

Commit f44d251

Browse files
vas3avas3a
committed
TCA-1131 - implement tca certificaiton hiring manager preview
1 parent 3ece588 commit f44d251

File tree

7 files changed

+156
-42
lines changed

7 files changed

+156
-42
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.routes.tsx‎

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,10 +29,12 @@ const ValidateTCACertificate: LazyLoadedComponent
2929
const UserCertificationView: LazyLoadedComponent
3030
= lazyLoad(() => import('./tca-certificate'), 'UserCertificationView')
3131

32+
const UserCertificationPreview: LazyLoadedComponent
33+
= lazyLoad(() => import('./tca-certificate'), 'UserCertificationPreview')
34+
3235
export enum LEARN_PATHS {
3336
certificate = '/certificate',
3437
completed = '/learn/completed',
35-
myCertificate = '/learn/my-certificate',
3638
myLearning = '/learn/my-learning',
3739
fcc = '/learn/fcc',
3840
root = '/learn',
@@ -143,6 +145,12 @@ export function getTCAUserCertificationUrl(
143145
return `${getTCACertificationPath(certification)}/${handle}/certification`
144146
}
145147

148+
export function getTCAUserCertificationPreviewUrl(
149+
certification: string,
150+
): string {
151+
return `${getTCACertificationPath(certification)}/preview`
152+
}
153+
146154
export function getAuthenticateAndEnrollRoute(): string {
147155
return `${authUrlLogin()}${encodeURIComponent(LEARN_PATHS.tcaEnroll)}`
148156
}
@@ -219,15 +227,21 @@ export const learnRoutes: ReadonlyArray<PlatformRoute> = [
219227
{
220228
children: [],
221229
element: <ValidateTCACertificate />,
222-
id: 'Validate TCA Certification - aka hiring manager view',
230+
id: 'Hiring manager view - uuid param',
223231
route: ':completionUuid',
224232
},
225233
{
226234
children: [],
227235
element: <UserCertificationView />,
228-
id: 'Validate TCA Certification - aka hiring manager view',
236+
id: 'Hiring manager view',
229237
route: 'tca-certifications/:certification/:memberHandle/certification',
230238
},
239+
{
240+
children: [],
241+
element: <UserCertificationPreview />,
242+
id: 'Giring manager preview',
243+
route: 'tca-certifications/:certification/preview',
244+
},
231245
],
232246
element: <LandingLearn />,
233247
id: toolTitle,

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

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import { FC, useContext, useLayoutEffect } from 'react'
2+
import { NavigateFunction, Params, useNavigate, useParams } from 'react-router-dom'
3+
4+
import { LoadingSpinner, profileContext, ProfileContextData, UserProfile } from '../../../../lib'
5+
import {
6+
TCACertificationEnrollmentBase,
7+
TCACertificationProviderData,
8+
useGetTCACertification,
9+
} from '../../learn-lib'
10+
11+
import UserCertificationViewBase from './UserCertificationViewBase'
12+
13+
const placeholderUserProfile: UserProfile = {
14+
firstName: 'Your',
15+
handle: 'your_handle',
16+
lastName: 'Name',
17+
} as UserProfile
18+
19+
const placeholderEnrollment: TCACertificationEnrollmentBase = {
20+
completedAt: new Date().toISOString(),
21+
completionUuid: 'test-uuid',
22+
userHandle: 'your_handle',
23+
userName: 'Your Name',
24+
} as TCACertificationEnrollmentBase
25+
26+
const UserCertificationPreview: FC<{}> = () => {
27+
const { profile, initialized: profileReady }: ProfileContextData = useContext(profileContext)
28+
const navigate: NavigateFunction = useNavigate()
29+
30+
const routeParams: Params<string> = useParams()
31+
32+
const {
33+
certification,
34+
}: TCACertificationProviderData
35+
= useGetTCACertification(`${routeParams.certification}`)
36+
37+
useLayoutEffect(() => {
38+
if (profileReady && !profile) {
39+
navigate('..')
40+
}
41+
}, [navigate, profile, profileReady])
42+
43+
return (
44+
<>
45+
<LoadingSpinner hide={profileReady} />
46+
47+
<UserCertificationViewBase
48+
enrollment={placeholderEnrollment}
49+
certification={certification}
50+
profile={placeholderUserProfile}
51+
/>
52+
</>
53+
)
54+
}
55+
56+
export default UserCertificationPreview

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -25,10 +25,10 @@ import { CertificateNotFound } from '../certificate-not-found'
2525

2626

2727
interface UserCertificationViewBaseProps {
28-
enrollment?: TCACertificationEnrollmentBase
29-
profile?: UserProfile
3028
certification?: TCACertification
29+
enrollment?: TCACertificationEnrollmentBase
3130
enrollmentError?: boolean
31+
profile?: UserProfile
3232
}
3333

3434
const UserCertificationViewBase: FC<UserCertificationViewBaseProps> = (props: UserCertificationViewBaseProps) => {
@@ -57,9 +57,9 @@ const UserCertificationViewBase: FC<UserCertificationViewBaseProps> = (props: Us
5757
<PageTitle>
5858
{`${!!props.enrollment && `${props.enrollment.userName}'s `}${props.certification?.title} Certificate`}
5959
</PageTitle>
60-
<LoadingSpinner hide={props.profile && (props.enrollmentError || !!props.enrollment)} />
60+
<LoadingSpinner hide={props.enrollmentError || (props.profile && !!props.enrollment)} />
6161

62-
{props.profile && props.enrollmentError && (
62+
{props.enrollmentError && (
6363
<CertificatePageLayout
6464
certificateElRef={certificateElRef}
6565
fallbackBackUrl={tcaCertificationPath}

‎src-ts/tools/learn/tca-certificate/user-certification-view/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
1+
export { default as UserCertificationPreview } from './UserCertificationPreview'
12
export { default as UserCertificationView } from './UserCertificationView'
23
export { default as UuidCertificationView } from './UuidCertificationView'

0 commit comments

Comments
 (0)