MP-191 onboarding completed modal

Author: kkartunov

src/apps/profiles/src/config/constants.ts

@@ -18,4 +18,5 @@ export enum profileEditModes {
     workExperience = 'workExperience',
     education = 'education',
     skills = 'skills',
+    onboardingCompleted = 'onboardingCompleted',
 }

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%;
+}

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<OnboardingCompletedProps> = (props: OnboardingCompletedProps) => {
+    const [queryParams]: [URLSearchParams, any] = useSearchParams()
+
+    const editMode: string | null = queryParams.get(EDIT_MODE_QUERY_PARAM)
+
+    const [isOpenModal, setIsOpenModal]: [boolean, Dispatch<SetStateAction<boolean>>]
+        = useState<boolean>(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 (
+        <>
+            <BaseModal
+                onClose={handleInfoModalClose}
+                open={isOpenModal}
+                size='lg'
+                showCloseIcon={false}
+                title={<h3 className={styles.modalTitle}>Off to a great start!</h3>}
+                buttons={(
+                    <div className={styles.modalButtons}>
+                        <Button
+                            label='View your profile'
+                            onClick={handleInfoModalClose}
+                            primary
+                        />
+                    </div>
+                )}
+            >
+                <div className={styles.container}>
+                    <p>
+                        Great work on starting your profile.
+                        The more information you add, the more visibility you have in our community and to customers.
+                    </p>
+                </div>
+            </BaseModal>
+        </>
+    )
+}
+
+export default OnboardingCompleted

src/apps/profiles/src/member-profile/onboarding-complete/index.ts

@@ -0,0 +1 @@
+export { default as OnboardingCompletedModal } from './OnboardingCompleted'

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<ProfilePageLayoutProps> = (props: ProfilePageLayoutP
 
             </ContentLayout>
 
+            <OnboardingCompleted authProfile={props.authProfile} />
+
         </div>
     )
 }