Merge pull request #778 from topcoder-platform/onboarding

Onboarding

Author: jmgasper

src/apps/onboarding/src/components/FieldAvatar/index.tsx

@@ -108,9 +108,10 @@ const FieldAvatar: FC<FieldAvatarProps> = (props: FieldAvatarProps) => {
                 >
                     {imgUrl ? (
                         <img className={styles.img} src={imgUrl} alt='avatar' />
-                    ) : (
+                    ) : undefined}
+                    {!imgUrl ? (
                         <img className={styles.imgPlaceholder} src={AvatarPlaceholder} alt='avatar' />
-                    )}
+                    ) : undefined}
                 </div>
                 <div className='d-flex flex-column align-items-start'>
                     <span className='color-black-60'>

src/apps/onboarding/src/components/modal-add-work/index.tsx

@@ -172,7 +172,7 @@ const ModalAddWork: FC<ModalAddWorkProps> = (props: ModalAddWorkProps) => {
                         dirty
                     />
                 </div>
-                <div className='d-flex gap-16 full-width'>
+                <div className='d-flex gap-16 full-width flex-wrap'>
                     <div
                         className='flex-1'
                     >

src/apps/onboarding/src/components/modal-upload-photo/index.tsx

@@ -53,8 +53,8 @@ const ModalUploadPhoto: FC<ModalUploadPhotoProps> = (props: ModalUploadPhotoProp
 
             setIsSaving(true)
             try {
-                await updateMemberPhotoAsync(props.memberInfo.handle, formData)
-                props.setMemberPhotoUrl(URL.createObjectURL(myFiles[0]))
+                const result = await updateMemberPhotoAsync(props.memberInfo.handle, formData)
+                props.setMemberPhotoUrl(result?.photoURL || URL.createObjectURL(myFiles[0]))
                 setMyFiles([])
                 props.onClose?.()
             } catch (error) {

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/pages/onboarding/index.tsx

@@ -14,33 +14,23 @@ import '../../styles/global/_index.scss'
 
 import styles from './styles.module.scss'
 
-const OnboardingContent: FC<{
+const OnboardingFooterContent: FC<{
     fetchMemberInfo: () => void
     fetchMemberTraits: () => void
     reduxMemberInfo: Member | undefined
 }> = props => {
-    const { getChildRoutes }: RouterContextData = useContext(routerContext)
     useEffect(() => {
         props.fetchMemberInfo()
         props.fetchMemberTraits()
         /* eslint-disable react-hooks/exhaustive-deps */
     }, [])
 
     return (
-        <>
-            <div className={classNames('d-flex flex-column', styles.container)}>
-                <Outlet />
-                <Routes>
-                    {getChildRoutes(onboardRouteId)}
-                </Routes>
-                <div id='calendar-portal' />
-            </div>
-            <span className={styles.textFooter}>
-                I will complete this onboarding later,
-                <a href={`${EnvironmentConfig.USER_PROFILE_URL}/${props.reduxMemberInfo?.handle}`}> skip for now</a>
-                .
-            </span>
-        </>
+        <span className={styles.textFooter}>
+            I will complete this onboarding later,
+            <a href={`${EnvironmentConfig.USER_PROFILE_URL}/${props.reduxMemberInfo?.handle}`}> skip for now</a>
+            .
+        </span>
     )
 }
 
@@ -58,12 +48,30 @@ const mapDispatchToProps: any = {
     fetchMemberInfo,
     fetchMemberTraits,
 }
-const Onboarding: any = connect(mapStateToProps, mapDispatchToProps)(OnboardingContent)
+const OnboardingFooter: any = connect(mapStateToProps, mapDispatchToProps)(OnboardingFooterContent)
+
+const OnboardingContent: FC<{
+}> = () => {
+    const { getChildRoutes }: RouterContextData = useContext(routerContext)
+
+    return (
+        <>
+            <div className={classNames('d-flex flex-column', styles.container)}>
+                <Outlet />
+                <Routes>
+                    {getChildRoutes(onboardRouteId)}
+                </Routes>
+                <div id='calendar-portal' />
+            </div>
+            <OnboardingFooter />
+        </>
+    )
+}
 
 export const OnboardingWrapper: FC<{}> = () => (
     <div className={classNames(styles.blockWrapper, 'd-flex flex-column align-items-center')}>
         <Provider store={store}>
-            <Onboarding />
+            <OnboardingContent />
         </Provider>
     </div>
 )

src/apps/onboarding/src/redux/reducers/member.ts

@@ -1,5 +1,7 @@
 import _ from 'lodash'
 
+import { notifyUniNavi } from '~/apps/profiles/src/lib'
+
 import { ACTIONS } from '../../config'
 import ConnectInfo from '../../models/ConnectInfo'
 import EducationInfo from '../../models/EducationInfo'
@@ -89,6 +91,9 @@ const memberReducer: any = (
 
             const newMemberInfo = _.cloneDeep(state.memberInfo)
             newMemberInfo.photoURL = action.payload
+            if (newMemberInfo) {
+                notifyUniNavi(newMemberInfo as any)
+            }
 
             return {
                 ...state,

src/apps/profiles/src/member-profile/profile-header/ProfileHeader.tsx

@@ -11,6 +11,7 @@ import {
     UserTraitIds,
     UserTraits,
 } from '~/libs/core'
+import { Button } from '~/libs/ui'
 
 import { EditMemberPropertyBtn } from '../../components'
 import { EDIT_MODE_QUERY_PARAM, profileEditModes } from '../../config'

src/libs/ui/lib/components/form/form-groups/form-input/input-date-picker/InputDatePicker.tsx

@@ -114,7 +114,14 @@ const InputDatePicker: FC<InputDatePickerProps> = (props: InputDatePickerProps)
             <DatePicker
                 renderCustomHeader={renderCustomHeader}
                 selected={props.date}
-                onChange={props.onChange}
+                onChange={(
+                    date: Date | null,
+                    event: React.SyntheticEvent<any> | undefined,
+                ) => {
+                    event?.stopPropagation()
+                    event?.preventDefault()
+                    props.onChange?.(date)
+                }}
                 placeholderText={props.placeholder || 'Select a date'}
                 className={styles.datePickerWrapper}
                 minDate={props.minDate}

src/libs/ui/lib/components/form/form-groups/form-input/input-select/InputSelect.tsx

@@ -2,6 +2,7 @@ import {
     ChangeEvent,
     Dispatch,
     FC,
+    MouseEvent,
     MutableRefObject,
     ReactNode,
     SetStateAction,
@@ -49,7 +50,12 @@ const InputSelect: FC<InputSelectProps> = (props: InputSelectProps) => {
 
     const toggleMenu: () => void = () => setMenuIsVisible(wasVisible => !wasVisible)
 
-    const select: (option: InputSelectOption) => () => void = (option: InputSelectOption) => () => {
+    const select: (option: InputSelectOption) => (event: MouseEvent<HTMLDivElement>) => void
+    = (option: InputSelectOption) => (
+        event: MouseEvent<HTMLDivElement>,
+    ) => {
+        event.stopPropagation()
+        event.preventDefault()
         props.onChange({
             target: { value: option.value },
         } as unknown as ChangeEvent<HTMLInputElement>)