From b3dbe44f87e30ef0fd154f5186f14d08fe9db53a Mon Sep 17 00:00:00 2001 From: dat Date: Thu, 13 Jul 2023 12:38:47 +0700 Subject: [PATCH] Onboarding issues --- .../src/components/DateInput/index.tsx | 89 ------------------ .../components/DateInput/styles.module.scss | 77 --------------- .../src/components/FormField/index.tsx | 53 ----------- .../components/FormField/styles.module.scss | 32 ------- .../components/modal-add-education/index.tsx | 91 ++++++------------ .../modal-add-education/styles.module.scss | 42 --------- .../src/components/modal-add-work/index.tsx | 93 +++++++++++-------- .../modal-add-work/styles.module.scss | 16 ++++ src/apps/onboarding/src/config/index.ts | 4 +- .../src/hooks/useAutoSavePersonalization.ts | 25 +++-- .../onboarding/src/models/EducationInfo.ts | 2 - .../onboarding/src/pages/educations/index.tsx | 8 +- .../src/pages/open-to-work/index.tsx | 39 ++++---- .../src/pages/personalization/index.tsx | 53 ++++++----- .../onboarding/src/redux/actions/member.ts | 53 ++++++----- .../onboarding/src/redux/reducers/member.ts | 6 +- 16 files changed, 201 insertions(+), 482 deletions(-) delete mode 100644 src/apps/onboarding/src/components/DateInput/index.tsx delete mode 100644 src/apps/onboarding/src/components/DateInput/styles.module.scss delete mode 100644 src/apps/onboarding/src/components/FormField/index.tsx delete mode 100644 src/apps/onboarding/src/components/FormField/styles.module.scss diff --git a/src/apps/onboarding/src/components/DateInput/index.tsx b/src/apps/onboarding/src/components/DateInput/index.tsx deleted file mode 100644 index 5f72f98da..000000000 --- a/src/apps/onboarding/src/components/DateInput/index.tsx +++ /dev/null @@ -1,89 +0,0 @@ -/** - * DateInput - * - * Date Input control. - */ -import { createRef, FC, useState } from 'react' -import DatePicker from 'react-datepicker' -import cn from 'classnames' -import moment from 'moment' -import 'react-datepicker/dist/react-datepicker.css' - -import { IconOutline } from '~/libs/ui' - -import { ReactComponent as CalendarIcon } from '../../assets/images/calendar.svg' - -import styles from './styles.module.scss' - -interface DateInputProps { - style2?: boolean - className?: string - placeholder?: string - value?: Date - onChange?: (date: Date | null) => void - onBlur?: () => void - onFocus?: () => void - allowFutureDate?: boolean - disabled?: boolean -} - -const DateInput: FC = (props: DateInputProps) => { - const [open, setOpen] = useState(false) - const calendarRef: any = createRef() - return ( -
-
- -
- -
- -
-
- ) -} - -export default DateInput diff --git a/src/apps/onboarding/src/components/DateInput/styles.module.scss b/src/apps/onboarding/src/components/DateInput/styles.module.scss deleted file mode 100644 index b898c441f..000000000 --- a/src/apps/onboarding/src/components/DateInput/styles.module.scss +++ /dev/null @@ -1,77 +0,0 @@ -@import '@libs/ui/styles/includes'; - -.datepicker-wrapper { - position: relative; - padding: 0 10px; - height: 36px; - display: flex; - align-items: center; - - .icon { - position: absolute; - display: flex; - padding: 8px 0 8px 4px; - align-items: center; - - &>svg { - width: 20px; - height: 20px; - } - } - - .icon-calendar { - left: 8px; - cursor: pointer; - } - - .icon-arrow { - right: 8px; - top: 0; - - &>svg { - color: hsl(0, 0%, 80%); - } - - &:hover { - &>svg { - color: hsl(0, 0%, 60%); - } - } - - &.icon-arrow-open { - &>svg { - color: hsl(0, 0%, 40%); - } - } - } - - &.error { - input { - border-color: #fe665d; - } - } - - &>div:nth-child(2) { - margin-left: 24px; - } - - &.style2 input { - border: none !important; - box-shadow: none !important; - margin-bottom: 0 !important; - font-size: 14px; - font-weight: 400; - - &::placeholder { - color: $black-60; - font-size: 14px; - font-weight: 400; - text-transform: none !important; - opacity: 1; - } - } -} - -.datepicker-wrapper>div:nth-child(2)>div:nth-child(2)>div:nth-child(2) { - z-index: 100; -} \ No newline at end of file diff --git a/src/apps/onboarding/src/components/FormField/index.tsx b/src/apps/onboarding/src/components/FormField/index.tsx deleted file mode 100644 index 64ead7b7f..000000000 --- a/src/apps/onboarding/src/components/FormField/index.tsx +++ /dev/null @@ -1,53 +0,0 @@ -/** - * FormField - * - * A Form Field Is a wrapper for input to add the label to it - */ -import React, { FC } from 'react' -import classNames from 'classnames' - -import { IconSolid } from '~/libs/ui' - -import styles from './styles.module.scss' - -interface FormFieldProps { - children?: any - className?: string - label?: string - error?: string -} - -const FormField: FC = (componentProps: FormFieldProps) => { - const { - children, - className, - label, - ...props - }: FormFieldProps = componentProps - - function handleClick(e: any): void { - // focus on input label click - const inputElement: any = e.target.closest('.form-field') - .querySelector('input') - inputElement?.focus() - } - - return ( -
-
-
- {label} -
- {children} -
-
- {props.error ? () : undefined} - {props.error} -
-
- ) -} - -export default FormField diff --git a/src/apps/onboarding/src/components/FormField/styles.module.scss b/src/apps/onboarding/src/components/FormField/styles.module.scss deleted file mode 100644 index 9a277e30b..000000000 --- a/src/apps/onboarding/src/components/FormField/styles.module.scss +++ /dev/null @@ -1,32 +0,0 @@ -$green1: #137d60; - -.form-field-wrapper { - position: relative; - display: flex; - flex-direction: column; - justify-content: flex-start; - margin-bottom: 0; - - .form-field { - border: 1px solid #b7b7b7; - border-radius: 4px; - background: white; - padding-top: 24px; - margin-bottom: 10px; - - .label { - position: absolute; - top: 5px; - left: 15px; - color: $green1; - font-size: 11px; - font-weight: 500; - } - } - - .error { - color: #ec2710; - font-size: 11px; - gap: 4px; - } -} \ No newline at end of file diff --git a/src/apps/onboarding/src/components/modal-add-education/index.tsx b/src/apps/onboarding/src/components/modal-add-education/index.tsx index 3ff96dd98..128776445 100644 --- a/src/apps/onboarding/src/components/modal-add-education/index.tsx +++ b/src/apps/onboarding/src/components/modal-add-education/index.tsx @@ -1,13 +1,11 @@ import { FC, FocusEvent, useEffect, useState } from 'react' +import { getYear, setYear } from 'date-fns' import _ from 'lodash' import classNames from 'classnames' -import moment from 'moment' -import { Button, InputText } from '~/libs/ui' +import { Button, InputSelect, InputText } from '~/libs/ui' -import DateInput from '../DateInput' import EducationInfo, { emptyEducationInfo } from '../../models/EducationInfo' -import FormField from '../FormField' import OnboardingBaseModal from '../onboarding-base-modal' import styles from './styles.module.scss' @@ -19,23 +17,21 @@ interface ModalAddEducationProps { onEdit?: (educationInfo: EducationInfo) => void } +const years: number[] = _.range(1979, getYear(new Date()) + 10) +const yearOptions: any = years + .map(v => ({ + label: `${v}`, + value: `${v}`, + })) + const ModalAddEducation: FC = (props: ModalAddEducationProps) => { const [educationInfo, setEducationInfo] = useState(emptyEducationInfo()) const [formErrors, setFormErrors] = useState({ collegeName: undefined, endDate: undefined, major: undefined, - startDate: undefined, }) - const validateDate: any = (startDate: Date | undefined, endDate: Date | undefined) => { - const isInValid: any = endDate - && startDate - && moment(endDate) - .isSameOrBefore(startDate) - return !isInValid - } - const validateField: any = () => { const errorTmp: any = {} if (!educationInfo.collegeName) { @@ -46,12 +42,6 @@ const ModalAddEducation: FC = (props: ModalAddEducationP errorTmp.major = 'Required' } - if (!educationInfo.startDate) { - errorTmp.startDate = 'Required' - } else if (!validateDate(educationInfo.startDate, educationInfo.endDate)) { - errorTmp.startDate = 'Start Date should be before End Date' - } - if (!educationInfo.endDate) { errorTmp.endDate = 'Required' } @@ -129,51 +119,24 @@ const ModalAddEducation: FC = (props: ModalAddEducationP error={formErrors.major} /> -
-
- - - -
-
- - - -
+
+
diff --git a/src/apps/onboarding/src/components/modal-add-education/styles.module.scss b/src/apps/onboarding/src/components/modal-add-education/styles.module.scss index 32b5f54a0..fced2c8eb 100644 --- a/src/apps/onboarding/src/components/modal-add-education/styles.module.scss +++ b/src/apps/onboarding/src/components/modal-add-education/styles.module.scss @@ -1,43 +1 @@ @import '@libs/ui/styles/includes'; - -.infoModal { - padding: 35px 32px 32px 32px !important; - max-width: 600px !important; - - @include ltemd { - max-width: 375px !important; - } - - :global(.react-responsive-modal-closeButton) { - display: flex; - right: 32px; - top: 46px !important; - - path { - color: $turq-160; - } - } - - :global(.modal-body) { - padding-bottom: 0; - margin-bottom: 0; - } - - hr { - margin-top: 30px; - } - - h3 { - font-family: $font-barlow; - color: $black-100; - font-size: 34px; - font-style: normal; - font-weight: 600; - line-height: 40px; - text-transform: none; - } - - .modalContent { - width: 100%; - } -} diff --git a/src/apps/onboarding/src/components/modal-add-work/index.tsx b/src/apps/onboarding/src/components/modal-add-work/index.tsx index caae72ec5..970b3acc5 100644 --- a/src/apps/onboarding/src/components/modal-add-work/index.tsx +++ b/src/apps/onboarding/src/components/modal-add-work/index.tsx @@ -3,12 +3,10 @@ import _ from 'lodash' import classNames from 'classnames' import moment from 'moment' -import { Button, InputSelect, InputText } from '~/libs/ui' +import { Button, IconSolid, InputDatePicker, InputSelect, InputText, Tooltip } from '~/libs/ui' import { FormInputCheckbox } from '~/apps/self-service/src/components/form-elements' import { INDUSTRIES_OPTIONS } from '../../config' -import DateInput from '../DateInput' -import FormField from '../FormField' import OnboardingBaseModal from '../onboarding-base-modal' import WorkInfo, { emptyWorkInfo } from '../../models/WorkInfo' @@ -76,6 +74,24 @@ const ModalAddWork: FC = (props: ModalAddWorkProps) => { } }, [props.editingWork]) + const endDateUI = ( + + ) + return ( = (props: ModalAddWorkProps) => {
- - - + date={workInfo.startDate} + onChange={function onChange(v: any) { + setWorkInfo({ + ...workInfo, + startDate: v || undefined, + }) + }} + disabled={false} + error={formErrors.startDate} + dirty + maxDate={new Date()} + placeholder='Select start date' + />
- - - + {workInfo.currentlyWorking ? ( + +
+ + End Date +
+ + You can not select an end date if you are + currently working in this role. + +
+ )} + place='top' + > + {endDateUI} + + ) : endDateUI} -
+
void, createMemberPersonalizations: (infos: PersonalizationInfo[]) => void, shouldSavingData: MutableRefObject, ) => useAutoSavePersonalizationType export const useAutoSavePersonalization: useAutoSavePersonalizationFunctionType = ( - reduxPersonalization: PersonalizationInfo | undefined, + reduxPersonalizations: PersonalizationInfo[] | undefined, + savingFields: string[], updateMemberPersonalizations: (infos: PersonalizationInfo[]) => void, createMemberPersonalizations: (infos: PersonalizationInfo[]) => void, shouldSavingData: MutableRefObject, ) => { const [loading, setLoading] = useState(false) const [personalizationInfo, setPersonalizationInfo] = useState(undefined) + const reduxPersonalization = useMemo(() => (reduxPersonalizations || []).find( + (trait: any) => _.some(savingFields, (savingField: string) => trait[savingField] !== undefined), + ), [reduxPersonalizations, savingFields]) const saveData: any = async () => { if (!personalizationInfo) { return } + const datas: PersonalizationInfo[] = [ + ..._.reject( + reduxPersonalizations || [], + (trait: any) => _.some(savingFields, (savingField: string) => trait[savingField] !== undefined), + ), + personalizationInfo, + ] + setLoading(true) if (!reduxPersonalization) { - await createMemberPersonalizations([personalizationInfo]) + await createMemberPersonalizations(datas) } else { - await updateMemberPersonalizations([personalizationInfo]) + await updateMemberPersonalizations(datas) } setLoading(false) @@ -54,7 +67,7 @@ export const useAutoSavePersonalization: useAutoSavePersonalizationFunctionType }, [personalizationInfo]) useEffect(() => { - if (!personalizationInfo && reduxPersonalization) { + if (!personalizationInfo && !!reduxPersonalization) { setPersonalizationInfo(reduxPersonalization) } /* eslint-disable react-hooks/exhaustive-deps */ diff --git a/src/apps/onboarding/src/models/EducationInfo.ts b/src/apps/onboarding/src/models/EducationInfo.ts index 172d332b2..9c7047042 100644 --- a/src/apps/onboarding/src/models/EducationInfo.ts +++ b/src/apps/onboarding/src/models/EducationInfo.ts @@ -2,7 +2,6 @@ export default interface EducationInfo { collegeName: string major: string dateDescription: string - startDate?: Date endDate?: Date id: number } @@ -13,5 +12,4 @@ export const emptyEducationInfo: () => EducationInfo = () => ({ endDate: undefined, id: 0, major: '', - startDate: undefined, }) diff --git a/src/apps/onboarding/src/pages/educations/index.tsx b/src/apps/onboarding/src/pages/educations/index.tsx index b2ced3435..d7a662a9f 100644 --- a/src/apps/onboarding/src/pages/educations/index.tsx +++ b/src/apps/onboarding/src/pages/educations/index.tsx @@ -57,18 +57,12 @@ export const PageEducationsContent: FC<{ }, [educations]) const displayEducations = useMemo(() => (educations || []).map(educationItem => { - const startDate: Date | undefined = educationItem.startDate const endDate: Date | undefined = educationItem.endDate const endDateString: string = endDate ? moment(endDate) .format('YYYY') : '' - const startDateString: string = startDate ? moment(startDate) - .format('YYYY') : '' return { ...educationItem, - dateDescription: [ - ...(startDateString ? [startDateString] : []), - ...(endDateString ? [endDateString] : []), - ].join('-'), + dateDescription: endDateString || '', } }), [educations]) diff --git a/src/apps/onboarding/src/pages/open-to-work/index.tsx b/src/apps/onboarding/src/pages/open-to-work/index.tsx index 899e235e3..7219ec831 100644 --- a/src/apps/onboarding/src/pages/open-to-work/index.tsx +++ b/src/apps/onboarding/src/pages/open-to-work/index.tsx @@ -17,12 +17,17 @@ const FormInputCheckboxMiddleware: any = FormInputCheckbox as any const blankPersonalizationInfo: PersonalizationInfo = emptyPersonalizationInfo() -export const PageOpenToWorkContent: FC<{ - reduxPersonalization: PersonalizationInfo | undefined +interface PageOpenToWorkContentReduxProps { + reduxPersonalizations: PersonalizationInfo[] | undefined + loadingMemberTraits: boolean +} + +interface PageOpenToWorkContentProps extends PageOpenToWorkContentReduxProps { updateMemberPersonalizations: (infos: PersonalizationInfo[]) => void createMemberPersonalizations: (infos: PersonalizationInfo[]) => void - loadingMemberTraits: boolean -}> = props => { +} + +export const PageOpenToWorkContent: FC = props => { const navigate: any = useNavigate() const shouldSavingData: MutableRefObject = useRef(false) @@ -33,7 +38,8 @@ export const PageOpenToWorkContent: FC<{ personalizationInfo, setPersonalizationInfo, }: useAutoSavePersonalizationType = useAutoSavePersonalization( - props.reduxPersonalization, + props.reduxPersonalizations, + ['availableForGigs'], props.updateMemberPersonalizations, props.createMemberPersonalizations, shouldSavingData, @@ -58,7 +64,7 @@ export const PageOpenToWorkContent: FC<{ if (!personalizationInfo || personalizationInfo.availableForGigs === undefined) { shouldNavigateTo.current = pageUrl setPersonalizationInfo({ - ...(personalizationInfo || blankPersonalizationInfo), + ...(personalizationInfo || {}), availableForGigs: blankPersonalizationInfo.availableForGigs, }) } else { @@ -88,7 +94,7 @@ export const PageOpenToWorkContent: FC<{ inline onChange={function onChange(e: any) { setPersonalizationInfo({ - ...(personalizationInfo || blankPersonalizationInfo), + ...(personalizationInfo || {}), availableForGigs: e.target.checked, }) }} @@ -131,17 +137,18 @@ export const PageOpenToWorkContent: FC<{ ) } -const mapStateToProps: any = (state: any) => { - const { - loadingMemberTraits, - personalization, - }: any = state.member +const mapStateToProps: (state: any) => PageOpenToWorkContentReduxProps + = (state: any): PageOpenToWorkContentReduxProps => { + const { + loadingMemberTraits, + personalizations, + }: any = state.member - return { - loadingMemberTraits, - reduxPersonalization: personalization, + return { + loadingMemberTraits, + reduxPersonalizations: personalizations, + } } -} const mapDispatchToProps: any = { createMemberPersonalizations, diff --git a/src/apps/onboarding/src/pages/personalization/index.tsx b/src/apps/onboarding/src/pages/personalization/index.tsx index e74b1e040..2902fec98 100644 --- a/src/apps/onboarding/src/pages/personalization/index.tsx +++ b/src/apps/onboarding/src/pages/personalization/index.tsx @@ -26,23 +26,26 @@ import FieldAvatar from '../../components/FieldAvatar' import InputTextAutoSave from '../../components/InputTextAutoSave' import InputTextareaAutoSave from '../../components/InputTextareaAutoSave' import MemberInfo from '../../models/MemberInfo' -import PersonalizationInfo, { emptyPersonalizationInfo } from '../../models/PersonalizationInfo' +import PersonalizationInfo from '../../models/PersonalizationInfo' import styles from './styles.module.scss' -const blankPersonalizationInfo: PersonalizationInfo = emptyPersonalizationInfo() - -const PagePersonalizationContent: FC<{ +interface PagePersonalizationContentReduxProps { memberInfo?: MemberInfo, - reduxPersonalization: PersonalizationInfo | undefined + reduxPersonalizations: PersonalizationInfo[] | undefined + loadingMemberTraits: boolean + loadingMemberInfo: boolean +} + +interface PagePersonalizationContentProps extends PagePersonalizationContentReduxProps { updateMemberPersonalizations: (infos: PersonalizationInfo[]) => void createMemberPersonalizations: (infos: PersonalizationInfo[]) => void setMemberPhotoUrl: (photoUrl: string) => void updateMemberPhotoUrl: (photoUrl: string) => void updateMemberDescription: (photoUrl: string) => void - loadingMemberTraits: boolean - loadingMemberInfo: boolean -}> = props => { +} + +const PagePersonalizationContent: FC = props => { const navigate: any = useNavigate() const shouldSavingData: MutableRefObject = useRef(false) @@ -54,7 +57,8 @@ const PagePersonalizationContent: FC<{ personalizationInfo, setPersonalizationInfo, }: useAutoSavePersonalizationType = useAutoSavePersonalization( - props.reduxPersonalization, + props.reduxPersonalizations, + ['profileSelfTitle'], props.updateMemberPersonalizations, props.createMemberPersonalizations, shouldSavingData, @@ -117,7 +121,7 @@ const PagePersonalizationContent: FC<{ value={personalizationInfo?.profileSelfTitle || ''} onChange={function onChange(value: string | undefined) { setPersonalizationInfo({ - ...(personalizationInfo || blankPersonalizationInfo), + ...(personalizationInfo || {}), profileSelfTitle: value || '', }) }} @@ -177,21 +181,22 @@ const PagePersonalizationContent: FC<{ ) } -const mapStateToProps: any = (state: any) => { - const { - loadingMemberTraits, - loadingMemberInfo, - personalization, - memberInfo, - }: any = state.member - - return { - loadingMemberInfo, - loadingMemberTraits, - memberInfo, - reduxPersonalization: personalization, +const mapStateToProps: (state: any) => PagePersonalizationContentReduxProps + = (state: any): PagePersonalizationContentReduxProps => { + const { + loadingMemberTraits, + loadingMemberInfo, + personalizations, + memberInfo, + }: any = state.member + + return { + loadingMemberInfo, + loadingMemberTraits, + memberInfo, + reduxPersonalizations: personalizations, + } } -} const mapDispatchToProps: any = { createMemberPersonalizations, diff --git a/src/apps/onboarding/src/redux/actions/member.ts b/src/apps/onboarding/src/redux/actions/member.ts index 18141e178..6f5809c26 100644 --- a/src/apps/onboarding/src/redux/actions/member.ts +++ b/src/apps/onboarding/src/redux/actions/member.ts @@ -1,6 +1,6 @@ import _ from 'lodash' -import { TokenModel } from '~/libs/core' +import { TokenModel, UserTraitCategoryNames, UserTraitIds } from '~/libs/core' import { getAsync as getAsyncToken } from '~/libs/core/lib/auth/token-functions/token.functions' import { createMemberTraits, @@ -32,11 +32,14 @@ export const updateEducations: any = (educations: EducationInfo[]) => ({ type: ACTIONS.MEMBER.SET_EDUCATIONS, }) -export const updatePersonalization: any = (personalization: PersonalizationInfo) => ({ - payload: { - ...personalization, - }, - type: ACTIONS.MEMBER.SET_PERSONALIZATION, +export const updatePersonalizations: (personalizations: PersonalizationInfo[]) => { + payload: PersonalizationInfo[] + type: string +} = (personalizations: PersonalizationInfo[]) => ({ + payload: [ + ...personalizations, + ], + type: ACTIONS.MEMBER.SET_PERSONALIZATIONS, }) export const updateConnectInfo: any = (connectInfo: ConnectInfo) => ({ @@ -109,7 +112,7 @@ export const fetchMemberTraits: any = () => async (dispatch: any) => { dispatch(updateLoadingMemberTraits(false)) - const workExp: any = memberTraits.find((t: any) => t.traitId === 'work') + const workExp: any = memberTraits.find((t: any) => t.traitId === UserTraitIds.work) const workExpValue: any = workExp?.traits?.data if (workExpValue) { // workExpValue is array of works. fill it to state @@ -130,7 +133,7 @@ export const fetchMemberTraits: any = () => async (dispatch: any) => { } const educationExp: any = memberTraits.find( - (t: any) => t.traitId === 'education', + (t: any) => t.traitId === UserTraitIds.education, ) const educationExpValue: any = educationExp?.traits?.data if (educationExpValue) { @@ -150,22 +153,22 @@ export const fetchMemberTraits: any = () => async (dispatch: any) => { } const personalizationExp: any = memberTraits.find( - (t: any) => t.traitId === 'personalization', + (t: any) => t.traitId === UserTraitIds.personalization, ) const personalizationExpValue: any = personalizationExp?.traits?.data if (personalizationExpValue) { - const personalizations: PersonalizationInfo[] = personalizationExpValue.map((e: any) => ({ + const personalizations: PersonalizationInfo[] = personalizationExpValue.map((e: any) => _.omitBy({ ...e, availableForGigs: e.availableForGigs, profileSelfTitle: e.profileSelfTitle, referAs: e.referAs, shortBio: e.shortBio, - })) - dispatch(updatePersonalization(personalizations[0])) + }, _.isUndefined)) + dispatch(updatePersonalizations(personalizations)) } const connectInfoExp: any = memberTraits.find( - (t: any) => t.traitId === 'connect_info', + (t: any) => t.traitId === UserTraitIds.connectInfo, ) const connectInfoExpValue: any = connectInfoExp?.traits?.data if (connectInfoExpValue) { @@ -199,8 +202,8 @@ const createWorksPayloadData: any = (works: WorkInfo[]) => { }) const payload: any = { - categoryName: 'Work', - traitId: 'work', + categoryName: UserTraitCategoryNames.work, + traitId: UserTraitIds.work, traits: { data, }, @@ -251,8 +254,8 @@ const createEducationsPayloadData: any = (educations: EducationInfo[]) => { }) const payload: any = { - categoryName: 'Education', - traitId: 'education', + categoryName: UserTraitCategoryNames.education, + traitId: UserTraitIds.education, traits: { data, }, @@ -294,18 +297,18 @@ const createPersonalizationsPayloadData: any = (personalizations: Personalizatio shortBio, availableForGigs, }: any = personalization - return { + return _.omitBy({ ...personalization, availableForGigs, profileSelfTitle, referAs, shortBio, - } + }, _.isUndefined) }) const payload: any = { - categoryName: 'Personalization', - traitId: 'personalization', + categoryName: UserTraitCategoryNames.personalization, + traitId: UserTraitIds.personalization, traits: { data, }, @@ -318,7 +321,7 @@ export const updateMemberPersonalizations: any = (personalizations: Personalizat const tokenInfo: TokenModel = await getAsyncToken() await updateMemberTraits(tokenInfo.handle || '', createPersonalizationsPayloadData(personalizations)) - dispatch(updatePersonalization(personalizations[0])) + dispatch(updatePersonalizations(personalizations)) } catch (error) { } } @@ -330,7 +333,7 @@ export const createMemberPersonalizations: any = (personalizations: Personalizat await createMemberTraits(tokenInfo.handle || '', createPersonalizationsPayloadData(personalizations)) isCreatedSuccess = true - dispatch(updatePersonalization(personalizations[0])) + dispatch(updatePersonalizations(personalizations)) } catch (error) { } @@ -353,8 +356,8 @@ const createConnectInfosPayloadData: any = (connectInfos: ConnectInfo[]) => { }) const payload: any = { - categoryName: 'Connect User Information', - traitId: 'connect_info', + categoryName: UserTraitCategoryNames.connectInfo, + traitId: UserTraitIds.connectInfo, traits: { data, }, diff --git a/src/apps/onboarding/src/redux/reducers/member.ts b/src/apps/onboarding/src/redux/reducers/member.ts index 8a2799054..efa2ecb9f 100644 --- a/src/apps/onboarding/src/redux/reducers/member.ts +++ b/src/apps/onboarding/src/redux/reducers/member.ts @@ -12,7 +12,7 @@ const initialState: { memberInfo?: MemberInfo works?: WorkInfo[] educations?: EducationInfo[] - personalization?: PersonalizationInfo + personalizations?: PersonalizationInfo[] address?: MemberAddress connectInfo?: ConnectInfo loadingMemberTraits?: boolean @@ -38,10 +38,10 @@ const memberReducer: any = ( ...state, works: action.payload, } - case ACTIONS.MEMBER.SET_PERSONALIZATION: + case ACTIONS.MEMBER.SET_PERSONALIZATIONS: return { ...state, - personalization: action.payload, + personalizations: action.payload, } case ACTIONS.MEMBER.SET_ADDRESS: return {