From a17c9dfecfe83a2bdc61aa016dc20d5a1be73356 Mon Sep 17 00:00:00 2001 From: attiyaishaque Date: Wed, 10 Jan 2024 13:50:39 +0500 Subject: [PATCH] feat: add work experience field --- src/account-settings/AccountSettingsPage.jsx | 33 ++++++++- .../AccountSettingsPage.messages.jsx | 70 +++++++++++++++++++ .../test/CertificatePreference.test.jsx | 2 +- src/account-settings/data/actions.js | 4 +- src/account-settings/data/constants.js | 15 ++++ src/account-settings/data/sagas.js | 4 +- src/account-settings/data/selectors.js | 16 ++++- src/account-settings/data/selectors.test.js | 59 +++++++++++++++- 8 files changed, 194 insertions(+), 9 deletions(-) diff --git a/src/account-settings/AccountSettingsPage.jsx b/src/account-settings/AccountSettingsPage.jsx index 141f8917c..080b25da3 100644 --- a/src/account-settings/AccountSettingsPage.jsx +++ b/src/account-settings/AccountSettingsPage.jsx @@ -45,6 +45,7 @@ import { GENDER_OPTIONS, COUNTRY_WITH_STATES, COPPA_COMPLIANCE_YEAR, + WORK_EXPERIENCE_OPTIONS, getStatesList, } from './data/constants'; import { fetchSiteLanguages } from './site-language'; @@ -142,6 +143,10 @@ class AccountSettingsPage extends React.Component { value: key, label: this.props.intl.formatMessage(messages[`account.settings.field.gender.options.${key || 'empty'}`]), })), + workExperienceOptions: WORK_EXPERIENCE_OPTIONS.map(key => ({ + value: key, + label: this.props.intl.formatMessage(messages[`account.settings.field.work.experience.options.${key || 'empty'}`]), + })), })); handleEditableFieldChange = (name, value) => { @@ -149,7 +154,17 @@ class AccountSettingsPage extends React.Component { }; handleSubmit = (formId, values) => { - this.props.saveSettings(formId, values); + const { formValues } = this.props; + let extendedProfileObject = {}; + + if ('extended_profile' in formValues && formValues.extended_profile.some((profile) => profile.field_name === formId)) { + extendedProfileObject = { + extended_profile: formValues.extended_profile.map(profile => (profile.field_name === formId + ? { ...profile, field_value: values } + : profile)), + }; + } + this.props.saveSettings(formId, values, extendedProfileObject); }; handleSubmitProfileName = (formId, values) => { @@ -469,13 +484,15 @@ class AccountSettingsPage extends React.Component { yearOfBirthOptions, educationLevelOptions, genderOptions, + workExperienceOptions, } = this.getLocalizedOptions(this.context.locale, this.props.formValues.country); // Show State field only if the country is US (could include Canada later) const showState = this.props.formValues.country === COUNTRY_WITH_STATES; - const { verifiedName } = this.props; + const hasWorkExperience = !!this.props.formValues?.extended_profile?.find(profile => profile.field_name === 'work_experience'); + const timeZoneOptions = this.getLocalizedTimeZoneOptions( this.props.timeZoneOptions, this.props.countryTimeZoneOptions, @@ -679,6 +696,17 @@ class AccountSettingsPage extends React.Component { emptyLabel={this.props.intl.formatMessage(messages['account.settings.field.gender.empty'])} {...editableFieldProps} /> + {hasWorkExperience && ( + profile.field_name === 'work_experience')?.field_value} + options={workExperienceOptions} + label={this.props.intl.formatMessage(messages['account.settings.field.work.experience'])} + emptyLabel={this.props.intl.formatMessage(messages['account.settings.field.work.experience.empty'])} + {...editableFieldProps} + /> + )} { const submitButton = screen.getByText('Choose name'); fireEvent.click(submitButton); expect(mockDispatch).toHaveBeenCalledWith({ - payload: { formId, commitValues: false }, + payload: { formId, commitValues: false, extendedProfile: null }, type: 'ACCOUNT_SETTINGS__SAVE_SETTINGS', }); }); diff --git a/src/account-settings/data/actions.js b/src/account-settings/data/actions.js index 89eb0c974..ee9c66373 100644 --- a/src/account-settings/data/actions.js +++ b/src/account-settings/data/actions.js @@ -77,9 +77,9 @@ export const beginNameChange = (formId) => ({ }); // SAVE SETTINGS ACTIONS -export const saveSettings = (formId, commitValues) => ({ +export const saveSettings = (formId, commitValues, extendedProfile = null) => ({ type: SAVE_SETTINGS.BASE, - payload: { formId, commitValues }, + payload: { formId, commitValues, extendedProfile }, }); export const saveSettingsBegin = () => ({ diff --git a/src/account-settings/data/constants.js b/src/account-settings/data/constants.js index 54209aafa..6ba4f6f30 100644 --- a/src/account-settings/data/constants.js +++ b/src/account-settings/data/constants.js @@ -34,6 +34,21 @@ export const GENDER_OPTIONS = [ 'm', 'o', ]; +export const WORK_EXPERIENCE_OPTIONS = [ + '', + '0', + '1', + '2', + '3', + '4', + '5', + '6', + '7', + '8', + '9', + '10+', + +]; export const COUNTRY_WITH_STATES = 'US'; diff --git a/src/account-settings/data/sagas.js b/src/account-settings/data/sagas.js index 3c16b988b..c27cbe9ef 100644 --- a/src/account-settings/data/sagas.js +++ b/src/account-settings/data/sagas.js @@ -83,8 +83,8 @@ export function* handleSaveSettings(action) { yield put(saveSettingsBegin()); const { username, userId } = getAuthenticatedUser(); - const { commitValues, formId } = action.payload; - const commitData = { [formId]: commitValues }; + const { commitValues, formId, extendedProfile } = action.payload; + const commitData = Object.keys(extendedProfile).length > 0 ? extendedProfile : { [formId]: commitValues }; let savedValues = null; if (formId === 'siteLanguage') { const previousSiteLanguage = getLocale(); diff --git a/src/account-settings/data/selectors.js b/src/account-settings/data/selectors.js index 4939cd94d..7650aa01e 100644 --- a/src/account-settings/data/selectors.js +++ b/src/account-settings/data/selectors.js @@ -156,7 +156,7 @@ function chooseFormValue(draft, committed) { return draft !== undefined ? draft : committed; } -const formValuesSelector = createSelector( +export const formValuesSelector = createSelector( valuesSelector, draftsSelector, (values, drafts) => { @@ -164,6 +164,20 @@ const formValuesSelector = createSelector( Object.entries(values).forEach(([name, value]) => { if (typeof value === 'boolean') { formValues[name] = chooseFormValue(drafts[name], value); + } else if (typeof value === 'object' && name === 'extended_profile' && value !== null) { + const extendedProfile = value.slice(); + const draftsKeys = Object.keys(drafts); + + if (draftsKeys.length !== 0) { + const draftFieldName = draftsKeys[0]; + const index = extendedProfile.findIndex((profile) => profile.field_name === draftFieldName); + + if (index !== -1) { + extendedProfile[index] = { field_name: draftFieldName, field_value: drafts[draftFieldName] }; + } + } + + formValues.extended_profile = [...extendedProfile]; } else { formValues[name] = chooseFormValue(drafts[name], value) || ''; } diff --git a/src/account-settings/data/selectors.test.js b/src/account-settings/data/selectors.test.js index 253e1f8da..b48d84108 100644 --- a/src/account-settings/data/selectors.test.js +++ b/src/account-settings/data/selectors.test.js @@ -1,4 +1,4 @@ -import { profileDataManagerSelector } from './selectors'; +import { profileDataManagerSelector, formValuesSelector } from './selectors'; const testValue = 'test VALUE'; @@ -13,4 +13,61 @@ describe('profileDataManagerSelector', () => { expect(result).toEqual(state.accountSettings.profileDataManager); }); + + it('should correctly select form values', () => { + const state = { + accountSettings: { + values: { + name: 'John Doe', + age: 25, + }, + drafts: { + age: 26, + + }, + verifiedNameHistory: 'test', + confirmationValues: {}, + }, + }; + + const result = formValuesSelector(state); + console.log('result', result); + + const expected = { + name: 'John Doe', + age: 26, + verified_name: '', + useVerifiedNameForCerts: false, + }; + + expect(result).toEqual(expected); + }); + + it('should correctly select form values with extended_profile', () => { + // Mock data with extended_profile field in both values and drafts + const state = { + accountSettings: { + values: { + extended_profile: [ + { field_name: 'test_field', field_value: '5' }, + ], + }, + drafts: { test_field: '6' }, + verifiedNameHistory: 'test', + confirmationValues: {}, + }, + }; + + const result = formValuesSelector(state); + + const expected = { + verified_name: '', + useVerifiedNameForCerts: false, + extended_profile: [ // Draft value should override the committed value + { field_name: 'test_field', field_value: '6' }, // Value from the committed values + ], + }; + + expect(result).toEqual(expected); + }); });