Onboarding - Vertical Scroll bar is removed when opening Experience/education modals

.environments/.env.dev

@@ -5,9 +5,6 @@ REACT_APP_ENABLE_TCA_CERT_MONETIZATION=false
 # Stripe configs
 REACT_APP_STRIPE_API_KEY=pk_test_rfcS49MHRVUKomQ9JgSH7Xqz
 REACT_APP_STRIPE_API_VERSION=2020-08-27
-# not really used anywhere
-REACT_APP_STRIPE_ADMIN_TOKEN=
-REACT_APP_STRIPE_CUSTOMER_TOKEN=
 
 # Vanilla Forums
 REACT_APP_VANILLA_ACCESS_TOKEN=va.JApNvUOx3549h20I6tnl1kOQDc75NDIp.0jG3dA.EE3gZgV

.environments/.env.prod

@@ -5,9 +5,6 @@ REACT_APP_ENABLE_TCA_CERT_MONETIZATION=false
 # Stripe configs
 REACT_APP_STRIPE_API_KEY=pk_live_m3bCBVSfkfMOEp3unZFRsHXi
 REACT_APP_STRIPE_API_VERSION=2020-08-27
-# not really used anywhere
-REACT_APP_STRIPE_ADMIN_TOKEN=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJyb2xlcyI6WyJUb3Bjb2RlciBVc2VyIiwiYWRtaW5pc3RyYXRvciJdLCJpc3MiOiJodHRwczovL2FwaS50b3Bjb2Rlci1kZXYuY29tIiwiaGFuZGxlIjoidGVzdDEiLCJleHAiOjI1NjMwNzY2ODksInVzZXJJZCI6IjQwMDUxMzMzIiwiaWF0IjoxNDYzMDc2MDg5LCJlbWFpbCI6InRlc3RAdG9wY29kZXIuY29tIiwianRpIjoiYjMzYjc3Y2QtYjUyZS00MGZlLTgzN2UtYmViOGUwYWU2YTRhIn0.wKWUe0-SaiFVN-VR_-GwgFlvWaDkSbc8H55ktb9LAVw
-REACT_APP_STRIPE_CUSTOMER_TOKEN=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJyb2xlcyI6WyJUb3Bjb2RlciBVc2VyIl0sImlzcyI6Imh0dHBzOi8vYXBpLnRvcGNvZGVyLWRldi5jb20iLCJoYW5kbGUiOiJ0ZXN0MSIsImV4cCI6MjU2MzA3NjY4OSwidXNlcklkIjoiNDAwNTEzMzMiLCJpYXQiOjE0NjMwNzYwODksImVtYWlsIjoidGVzdEB0b3Bjb2Rlci5jb20iLCJqdGkiOiJiMzNiNzdjZC1iNTJlLTQwZmUtODM3ZS1iZWI4ZTBhZTZhNGEifQ.jl6Lp_friVNwEP8nfsfmL-vrQFzOFp2IfM_HC7AwGcg
 
 # Vanilla Forums
 REACT_APP_VANILLA_ACCESS_TOKEN=va.JApNvUOx3549h20I6tnl1kOQDc75NDIp.0jG3dA.EE3gZgV

.environments/.env.qa

@@ -5,9 +5,6 @@ REACT_APP_ENABLE_TCA_CERT_MONETIZATION=false
 # Stripe configs
 REACT_APP_STRIPE_API_KEY=pk_test_rfcS49MHRVUKomQ9JgSH7Xqz
 REACT_APP_STRIPE_API_VERSION=2020-08-27
-# not really used anywhere
-REACT_APP_STRIPE_ADMIN_TOKEN=
-REACT_APP_STRIPE_CUSTOMER_TOKEN=
 
 # Vanilla Forums
 REACT_APP_VANILLA_ACCESS_TOKEN=va.JApNvUOx3549h20I6tnl1kOQDc75NDIp.0jG3dA.EE3gZgV

craco.config.js

@@ -5,6 +5,13 @@ const BabelRcPlugin = require('@jackwilsdon/craco-use-babelrc');
 
 const isProd = process.env.APPMODE === "production";
 
+function getModeName() {
+    const index = process.argv.indexOf('--mode');
+    return index === -1 ? '' : process.argv[index + 1] || ''
+}
+
+console.log({buildMode: getModeName()});
+
 const localIdentName = isProd
     ? "[hash:base64:6]"
     : "[name]_[local]__[hash:base64:6]";

package.json

@@ -4,10 +4,10 @@
   "private": true,
   "license": "ISC",
   "scripts": {
-    "dev": "craco start --mode ${REACT_APP_HOST_ENV:-dev}",
+    "dev": "craco start --mode ${LOGICAL_ENV:-dev}",
     "start": "bash start.sh",
-    "build": "export CI=false && craco build --mode ${REACT_APP_HOST_ENV:-prod}",
-    "build:dev": "craco build --mode ${REACT_APP_HOST_ENV:-dev}",
+    "build": "export CI=false && craco build --mode ${LOGICAL_ENV:-prod}",
+    "build:dev": "craco build --mode ${LOGICAL_ENV:-dev}",
     "demo": "npx http-server --port 443 -a 0.0.0.0 -S -C ./ssl/rootCA.crt -K ./ssl/rootCA.key -P https://local.topcoder-dev.com? --proxy-options.secure false ./build",
     "lint": "eslint -c ./src/.eslintrc.js 'src/**/*.{ts,tsx,js,jsx}'",
     "lint:fix": "yarn lint --fix",

src/apps/onboarding/src/components/onboarding-base-modal/index.tsx

@@ -20,7 +20,6 @@ const OnboardingBaseModal: FC<OnboardingBaseModalProps> = (props: OnboardingBase
         size='body'
         title={props.title}
         classNames={{ modal: styles.infoModal }}
-        blockScroll
     >
         {props.children}
     </BaseModal>

src/apps/onboarding/src/onboarding.routes.tsx

@@ -1,6 +1,7 @@
 import { Navigate } from 'react-router-dom'
 
-import { ToolTitle } from '~/config/constants'
+import { EnvironmentConfig } from '~/config'
+import { AppSubdomain, ToolTitle } from '~/config/constants'
 import { lazyLoad, LazyLoadedComponent, PlatformRoute, UserRole } from '~/libs/core'
 
 const PageOnboarding: LazyLoadedComponent = lazyLoad(() => import('./pages/onboarding/index'), 'OnboardingWrapper')
@@ -18,7 +19,10 @@ const PageAccountDetails: LazyLoadedComponent = lazyLoad(
     'PageAccountDetails',
 )
 const toolTitle: string = ToolTitle.onboarding
-const onboardingRootRoute: string = '/onboarding'
+
+export const rootRoute: string = (
+    EnvironmentConfig.SUBDOMAIN === AppSubdomain.onboarding ? '' : `/${AppSubdomain.onboarding}`
+)
 
 export const onboardRouteId: string = `${toolTitle} Onbarding`
 
@@ -59,12 +63,13 @@ export const onboardingRoutes: ReadonlyArray<PlatformRoute> = [
                 route: '/account-details',
             },
         ],
+        domain: AppSubdomain.onboarding,
         element: <PageOnboarding />,
         id: onboardRouteId,
         rolesRequired: [
             UserRole.member,
         ],
-        route: onboardingRootRoute,
+        route: rootRoute,
         title: toolTitle,
     },
 ]

src/apps/profiles/src/components/EditMemberPropertyBtn/EditMemberPropertyBtn.module.scss

@@ -1,8 +1,12 @@
 @import "@libs/ui/styles/includes";
 
 .editMemberPropertyBtn {
+    padding: 0 !important;
+    padding-left: $sp-4 !important;
+    color: $black-100;
+
     svg {
-        width: 16px;
-        height: 16px;
+        width: 20px;
+        height: 20px;
     }
 }

src/apps/profiles/src/components/EditMemberPropertyBtn/EditMemberPropertyBtn.tsx

@@ -13,6 +13,7 @@ const EditMemberPropertyBtn: FC<EditMemberPropertyBtnProps> = (props: EditMember
         icon={IconOutline.PencilIcon}
         onClick={props.onClick}
         className={styles.editMemberPropertyBtn}
+        size='lg'
     />
 )
 

src/apps/profiles/src/components/EmptySection/EmptySection.module.scss

@@ -28,4 +28,9 @@
         padding: $sp-15 2*$sp-15;
     }
 
+    @include ltemd {
+        &, &:global(.m-lg) {
+            padding: $sp-8 $sp-6;
+        }
+    }
 }

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/lib/helpers.ts

@@ -21,3 +21,18 @@ export function notifyUniNavi(profile: UserProfile): void {
         })
     }
 }
+
+export function subTrackLabelToHumanName(label: string): string {
+    switch (label) {
+        case 'ASSEMBLY_COMPETITION':
+            return 'Assembly Competition'
+        case 'CODE':
+            return 'Code'
+        case 'FIRST_2_FINISH':
+            return 'First2Finish'
+        case 'CONCEPTUALIZATION':
+            return 'Conceptualization'
+        default: return label
+    }
+
+}

src/apps/profiles/src/member-profile/MemberProfilePage.tsx

@@ -4,6 +4,8 @@ import { Params, useParams } from 'react-router-dom'
 import { profileContext, ProfileContextData, profileGetPublicAsync, UserProfile } from '~/libs/core'
 import { LoadingSpinner } from '~/libs/ui'
 
+import { notifyUniNavi } from '../lib'
+
 import { ProfilePageLayout } from './page-layout'
 
 const MemberProfilePage: FC<{}> = () => {
@@ -29,12 +31,15 @@ const MemberProfilePage: FC<{}> = () => {
         }
     }, [routeParams.memberHandle])
 
-    const refreshProfile: (handle: string) => void = useCallback((handle: string) => {
+    const refreshProfile = useCallback((handle: string) => (
         profileGetPublicAsync(handle)
             .then(userProfile => {
                 setProfile(userProfile)
+                if (userProfile) {
+                    notifyUniNavi(userProfile)
+                }
             })
-    }, [])
+    ), [])
 
     return (
         <>

src/apps/profiles/src/member-profile/about-me/AboutMe.tsx

@@ -7,7 +7,6 @@ import { useMemberTraits, UserProfile, UserTraitIds, UserTraits } from '~/libs/c
 
 import { EditMemberPropertyBtn, EmptySection } from '../../components'
 import { EDIT_MODE_QUERY_PARAM, profileEditModes } from '../../config'
-import { notifyUniNavi } from '../../lib'
 
 import { ModifyAboutMeModal } from './ModifyAboutMeModal'
 import styles from './AboutMe.module.scss'
@@ -60,7 +59,6 @@ const AboutMe: FC<AboutMeProps> = (props: AboutMeProps) => {
             setIsEditMode(false)
             mutateTraits()
             props.refreshProfile(props.profile.handle)
-            notifyUniNavi(props.profile)
         }, 1000)
     }
 

src/apps/profiles/src/member-profile/education-and-certifications/EducationAndCertifications.module.scss

@@ -3,10 +3,12 @@
 .container {
     display: flex;
     flex-direction: column;
+    padding-bottom: $sp-8;
 
     .headerWrap {
         display: flex;
         align-items: center;
+        justify-content: space-between;
         margin-bottom: $sp-4;
 
         h3 {
@@ -19,9 +21,15 @@
         }
     }
 
+    .emptyBlock {
+        display: none;
+    }
+
     .educationContentWrap {
         display: flex;
         flex-direction: column;
-        padding-bottom: $sp-8;
+        &:empty + .emptyBlock {
+            display: flex;
+        }
     }
 }

src/apps/profiles/src/member-profile/education-and-certifications/EducationAndCertifications.tsx

@@ -1,8 +1,7 @@
 import { Dispatch, FC, SetStateAction, useEffect, useMemo, useState } from 'react'
 import { useSearchParams } from 'react-router-dom'
-import { KeyedMutator } from 'swr'
 
-import { useMemberTraits, UserProfile, UserTrait, UserTraitIds, UserTraits } from '~/libs/core'
+import { MemberTraitsAPI, useMemberTraits, UserProfile, UserTrait, UserTraitIds } from '~/libs/core'
 
 import { EDIT_MODE_QUERY_PARAM, profileEditModes } from '../../config'
 import { EditMemberPropertyBtn, EmptySection } from '../../components'
@@ -27,10 +26,7 @@ const EducationAndCertifications: FC<EducationAndCertificationsProps> = (props:
     const [isEditMode, setIsEditMode]: [boolean, Dispatch<SetStateAction<boolean>>]
         = useState<boolean>(false)
 
-    const { data: memberEducationTraits, mutate: mutateTraits }: {
-        data: UserTraits[] | undefined,
-        mutate: KeyedMutator<any>,
-    }
+    const { data: memberEducationTraits, mutate: mutateTraits, loading }: MemberTraitsAPI
         = useMemberTraits(props.profile.handle, { traitIds: UserTraitIds.education })
 
     const memberEducation: UserTrait[] | undefined
@@ -73,28 +69,33 @@ const EducationAndCertifications: FC<EducationAndCertificationsProps> = (props:
             </div>
 
             <div className={styles.educationContentWrap}>
-                {(memberEducation?.length as number) > 0
-                    ? memberEducation?.map((education: UserTrait) => (
-                        <EducationCard
-                            key={`${education.schoolCollegeName}-${education.major}`}
-                            education={education}
-                        />
-                    ))
-                    : (
-                        <EmptySection
-                            selfMessage={`
-                                Including your education and certifications enhances the strength
-                                of your profile in comparison to others.
-                            `}
-                            isSelf={canEdit}
-                        >
-                            I&apos;m still building up my education and certifications here at Topcoder.
-                        </EmptySection>
-                    )}
+                {!loading && (
+                    (memberEducation?.length as number) > 0 && (
+                        memberEducation?.map((education: UserTrait) => (
+                            <EducationCard
+                                key={`${education.schoolCollegeName}-${education.major}`}
+                                education={education}
+                            />
+                        ))
+                    )
+                )}
             </div>
 
             <MemberTCAInfo profile={props.profile} />
 
+            {!loading && !memberEducation?.length && (
+                <EmptySection
+                    className={styles.emptyBlock}
+                    selfMessage={`
+                        Including your education and certifications enhances the strength
+                        of your profile in comparison to others.
+                    `}
+                    isSelf={canEdit}
+                >
+                    I&apos;m still building up my education and certifications here at Topcoder.
+                </EmptySection>
+            )}
+
             {
                 isEditMode && (
                     <ModifyEducationModal

src/apps/profiles/src/member-profile/languages/MemberLanguages.module.scss

@@ -8,7 +8,7 @@
     .titleWrap {
         display: flex;
         align-items: center;
-        justify-content: flex-start;
+        justify-content: space-between;
         margin-bottom: $sp-2;
     }
 

src/apps/profiles/src/member-profile/languages/ModifyLanguagesModal/ModifyLanguagesModal.module.scss

@@ -54,5 +54,10 @@
         border-radius: 8px;
         padding: $sp-2;
         border: 1px solid $black-10;
+
+        button svg {
+            width: 16px;
+            height: 16px;
+        }
     }
 }

src/apps/profiles/src/member-profile/links/MemberLinks.module.scss

@@ -8,7 +8,7 @@
     .titleWrap {
         display: flex;
         align-items: center;
-        justify-content: flex-start;
+        justify-content: space-between;
         margin-bottom: $sp-2;
     }
 

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