diff --git a/src/apps/profiles/src/config/constants.ts b/src/apps/profiles/src/config/constants.ts index 1de80dbff..58ac06e5d 100644 --- a/src/apps/profiles/src/config/constants.ts +++ b/src/apps/profiles/src/config/constants.ts @@ -18,4 +18,5 @@ export enum profileEditModes { workExperience = 'workExperience', education = 'education', skills = 'skills', + onboardingCompleted = 'onboardingCompleted', } diff --git a/src/apps/profiles/src/member-profile/onboarding-complete/OnboardingCompleted.module.scss b/src/apps/profiles/src/member-profile/onboarding-complete/OnboardingCompleted.module.scss new file mode 100644 index 000000000..445f64429 --- /dev/null +++ b/src/apps/profiles/src/member-profile/onboarding-complete/OnboardingCompleted.module.scss @@ -0,0 +1,15 @@ +@import '@libs/ui/styles/includes'; + +.container { + text-align: center; +} + +.modalTitle { + text-align: center; +} + +.modalButtons { + display: flex; + justify-content: center; + width: 100%; +} diff --git a/src/apps/profiles/src/member-profile/onboarding-complete/OnboardingCompleted.tsx b/src/apps/profiles/src/member-profile/onboarding-complete/OnboardingCompleted.tsx new file mode 100644 index 000000000..f0adca926 --- /dev/null +++ b/src/apps/profiles/src/member-profile/onboarding-complete/OnboardingCompleted.tsx @@ -0,0 +1,63 @@ +import { Dispatch, FC, SetStateAction, useEffect, useState } from 'react' +import { useSearchParams } from 'react-router-dom' + +import { UserProfile } from '~/libs/core' +import { BaseModal, Button } from '~/libs/ui' + +import { EDIT_MODE_QUERY_PARAM, profileEditModes } from '../../config' + +import styles from './OnboardingCompleted.module.scss' + +interface OnboardingCompletedProps { + authProfile: UserProfile | undefined +} + +const OnboardingCompleted: FC = (props: OnboardingCompletedProps) => { + const [queryParams]: [URLSearchParams, any] = useSearchParams() + + const editMode: string | null = queryParams.get(EDIT_MODE_QUERY_PARAM) + + const [isOpenModal, setIsOpenModal]: [boolean, Dispatch>] + = useState(false) + + useEffect(() => { + if (props.authProfile && editMode === profileEditModes.onboardingCompleted) { + setIsOpenModal(true) + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [props.authProfile]) + + function handleInfoModalClose(): void { + setIsOpenModal(false) + } + + return ( + <> + Off to a great start!} + buttons={( +
+
+ )} + > +
+

+ Great work on starting your profile. + The more information you add, the more visibility you have in our community and to customers. +

+
+
+ + ) +} + +export default OnboardingCompleted diff --git a/src/apps/profiles/src/member-profile/onboarding-complete/index.ts b/src/apps/profiles/src/member-profile/onboarding-complete/index.ts new file mode 100644 index 000000000..c1346daf3 --- /dev/null +++ b/src/apps/profiles/src/member-profile/onboarding-complete/index.ts @@ -0,0 +1 @@ +export { default as OnboardingCompletedModal } from './OnboardingCompleted' diff --git a/src/apps/profiles/src/member-profile/page-layout/ProfilePageLayout.tsx b/src/apps/profiles/src/member-profile/page-layout/ProfilePageLayout.tsx index c617e1a88..4763fe692 100644 --- a/src/apps/profiles/src/member-profile/page-layout/ProfilePageLayout.tsx +++ b/src/apps/profiles/src/member-profile/page-layout/ProfilePageLayout.tsx @@ -14,6 +14,7 @@ import { MemberLinks } from '../links' import { MemberTCAchievements } from '../tc-achievements' import { WorkExpirence } from '../work-expirence' import { EducationAndCertifications } from '../education-and-certifications' +import OnboardingCompleted from '../onboarding-complete/OnboardingCompleted' import styles from './ProfilePageLayout.module.scss' @@ -108,6 +109,8 @@ const ProfilePageLayout: FC = (props: ProfilePageLayoutP + + ) }