Merge branch 'dev' into profiles-app

Author: kkartunov

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/components/AddButton/AddButton.module.scss

@@ -0,0 +1,19 @@
+@import "@libs/ui/styles/includes";
+
+.wrap {
+    margin-top: $sp-2;
+
+    &:global(.mt0) {
+        margin-top: 0;
+    }
+}
+
+.addButton {
+    padding: 0 !important;
+    color: $black-100;
+
+    svg {
+        width: 20px;
+        height: 20px;
+    }
+}

src/apps/profiles/src/components/AddButton/AddButton.tsx

@@ -0,0 +1,29 @@
+import { FC } from 'react'
+import classNames from 'classnames'
+
+import { Button, IconOutline } from '~/libs/ui'
+
+import styles from './AddButton.module.scss'
+
+interface AddButtonProps {
+    className?: string
+    label?: string
+    onClick: () => void
+    variant?: 'mt0'
+}
+
+const AddButton: FC<AddButtonProps> = props => (
+    <div className={classNames(styles.wrap, props.variant, props.className)}>
+        <Button
+            icon={IconOutline.PlusIcon}
+            onClick={props.onClick}
+            className={styles.addButton}
+            size='lg'
+            label={props.label}
+            link
+            variant='linkblue'
+        />
+    </div>
+)
+
+export default AddButton

src/apps/profiles/src/components/AddButton/index.ts

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

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

@@ -1,18 +1,20 @@
 import { FC } from 'react'
+import classNames from 'classnames'
 
 import { Button, IconOutline } from '~/libs/ui'
 
 import styles from './EditMemberPropertyBtn.module.scss'
 
 interface EditMemberPropertyBtnProps {
+    className?: string
     onClick: () => void
 }
 
 const EditMemberPropertyBtn: FC<EditMemberPropertyBtnProps> = (props: EditMemberPropertyBtnProps) => (
     <Button
         icon={IconOutline.PencilIcon}
         onClick={props.onClick}
-        className={styles.editMemberPropertyBtn}
+        className={classNames(styles.editMemberPropertyBtn, props.className)}
         size='lg'
     />
 )