Skip to content

Commit

Permalink
feat: add work experience field
Browse files Browse the repository at this point in the history
  • Loading branch information
attiyaIshaque committed Jan 15, 2024
1 parent c00ebc9 commit a17c9df
Show file tree
Hide file tree
Showing 8 changed files with 194 additions and 9 deletions.
33 changes: 31 additions & 2 deletions src/account-settings/AccountSettingsPage.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -142,14 +143,28 @@ 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 => ({

Check warning on line 146 in src/account-settings/AccountSettingsPage.jsx

View check run for this annotation

Codecov / codecov/patch

src/account-settings/AccountSettingsPage.jsx#L146

Added line #L146 was not covered by tests
value: key,
label: this.props.intl.formatMessage(messages[`account.settings.field.work.experience.options.${key || 'empty'}`]),
})),
}));

handleEditableFieldChange = (name, value) => {
this.props.updateDraft(name, value);
};

handleSubmit = (formId, values) => {
this.props.saveSettings(formId, values);
const { formValues } = this.props;
let extendedProfileObject = {};

Check warning on line 158 in src/account-settings/AccountSettingsPage.jsx

View check run for this annotation

Codecov / codecov/patch

src/account-settings/AccountSettingsPage.jsx#L157-L158

Added lines #L157 - L158 were not covered by tests

if ('extended_profile' in formValues && formValues.extended_profile.some((profile) => profile.field_name === formId)) {
extendedProfileObject = {

Check warning on line 161 in src/account-settings/AccountSettingsPage.jsx

View check run for this annotation

Codecov / codecov/patch

src/account-settings/AccountSettingsPage.jsx#L161

Added line #L161 was not covered by tests
extended_profile: formValues.extended_profile.map(profile => (profile.field_name === formId
? { ...profile, field_value: values }
: profile)),

Check warning on line 164 in src/account-settings/AccountSettingsPage.jsx

View check run for this annotation

Codecov / codecov/patch

src/account-settings/AccountSettingsPage.jsx#L163-L164

Added lines #L163 - L164 were not covered by tests
};
}
this.props.saveSettings(formId, values, extendedProfileObject);

Check warning on line 167 in src/account-settings/AccountSettingsPage.jsx

View check run for this annotation

Codecov / codecov/patch

src/account-settings/AccountSettingsPage.jsx#L167

Added line #L167 was not covered by tests
};

handleSubmitProfileName = (formId, values) => {
Expand Down Expand Up @@ -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');

Check warning on line 494 in src/account-settings/AccountSettingsPage.jsx

View check run for this annotation

Codecov / codecov/patch

src/account-settings/AccountSettingsPage.jsx#L494

Added line #L494 was not covered by tests

const timeZoneOptions = this.getLocalizedTimeZoneOptions(
this.props.timeZoneOptions,
this.props.countryTimeZoneOptions,
Expand Down Expand Up @@ -679,6 +696,17 @@ class AccountSettingsPage extends React.Component {
emptyLabel={this.props.intl.formatMessage(messages['account.settings.field.gender.empty'])}
{...editableFieldProps}
/>
{hasWorkExperience && (
<EditableSelectField

Check warning on line 700 in src/account-settings/AccountSettingsPage.jsx

View check run for this annotation

Codecov / codecov/patch

src/account-settings/AccountSettingsPage.jsx#L700

Added line #L700 was not covered by tests
name="work_experience"
type="select"
value={this.props.formValues?.extended_profile?.find(profile => profile.field_name === 'work_experience')?.field_value}

Check warning on line 703 in src/account-settings/AccountSettingsPage.jsx

View check run for this annotation

Codecov / codecov/patch

src/account-settings/AccountSettingsPage.jsx#L703

Added line #L703 was not covered by tests
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}
/>
)}
<EditableSelectField
name="language_proficiencies"
type="select"
Expand Down Expand Up @@ -850,6 +878,7 @@ AccountSettingsPage.propTypes = {
country: PropTypes.string,
level_of_education: PropTypes.string,
gender: PropTypes.string,
extended_profile: PropTypes.string,
language_proficiencies: PropTypes.string,
pending_name_change: PropTypes.string,
phone_number: PropTypes.string,
Expand Down
70 changes: 70 additions & 0 deletions src/account-settings/AccountSettingsPage.messages.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -570,6 +570,76 @@ const messages = defineMessages({
defaultMessage: 'Notifications',
description: 'Label for Notifications',
},
'account.settings.field.work.experience': {
id: 'account.settings.work.experience',
defaultMessage: 'Work Experience',
description: 'Label for account settings Work experience field.',
},
'account.settings.field.work.experience.empty': {
id: 'account.settings.field.work.experience.empty',
defaultMessage: 'Add work experience',
description: 'Placeholder for empty account settings work experience field.',
},
'account.settings.field.work.experience.options.empty': {
id: 'account.settings.field.work.experience.options.empty',
defaultMessage: 'Select work experience',
description: 'Placeholder for the work experience levels dropdown.',
},
'account.settings.field.work.experience.options.0': {
id: 'account.settings.field.work.experience.options.0',
defaultMessage: '0',
description: 'The label for account settings work experience option.',
},
'account.settings.field.work.experience.options.1': {
id: 'account.settings.field.work.experience.options.1',
defaultMessage: '1',
description: 'The label for account settings work experience option.',
},
'account.settings.field.work.experience.options.2': {
id: 'account.settings.field.work.experience.options.2',
defaultMessage: '2',
description: 'The label for account settings work experience option.',
},
'account.settings.field.work.experience.options.3': {
id: 'account.settings.field.work.experience.options.3',
defaultMessage: '3',
description: 'The label for account settings work experience option.',
},
'account.settings.field.work.experience.options.4': {
id: 'account.settings.field.work.experience.options.4',
defaultMessage: '4',
description: 'The label for account settings work experience option.',
},
'account.settings.field.work.experience.options.5': {
id: 'account.settings.field.work.experience.options.5',
defaultMessage: '5',
description: 'The label for account settings work experience option.',
},
'account.settings.field.work.experience.options.6': {
id: 'account.settings.field.work.experience.options.6',
defaultMessage: '6',
description: 'The label for account settings work experience option.',
},
'account.settings.field.work.experience.options.7': {
id: 'account.settings.field.work.experience.options.7',
defaultMessage: '7',
description: 'The label for account settings work experience option.',
},
'account.settings.field.work.experience.options.8': {
id: 'account.settings.field.work.experience.options.8',
defaultMessage: '8',
description: 'The label for account settings work experience option.',
},
'account.settings.field.work.experience.options.9': {
id: 'account.settings.field.work.experience.options.9',
defaultMessage: '9',
description: 'The label for account settings work experience option.',
},
'account.settings.field.work.experience.options.10+': {
id: 'account.settings.field.work.experience.options.10+',
defaultMessage: '10+',
description: 'The label for account settings work experience option.',
},
});

export default messages;
Original file line number Diff line number Diff line change
Expand Up @@ -151,7 +151,7 @@ describe('NameChange', () => {
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',
});
});
Expand Down
4 changes: 2 additions & 2 deletions src/account-settings/data/actions.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 = () => ({
Expand Down
15 changes: 15 additions & 0 deletions src/account-settings/data/constants.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down
4 changes: 2 additions & 2 deletions src/account-settings/data/sagas.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Check warning on line 86 in src/account-settings/data/sagas.js

View check run for this annotation

Codecov / codecov/patch

src/account-settings/data/sagas.js#L86

Added line #L86 was not covered by tests
const commitData = Object.keys(extendedProfile).length > 0 ? extendedProfile : { [formId]: commitValues };
let savedValues = null;
if (formId === 'siteLanguage') {
const previousSiteLanguage = getLocale();
Expand Down
16 changes: 15 additions & 1 deletion src/account-settings/data/selectors.js
Original file line number Diff line number Diff line change
Expand Up @@ -156,14 +156,28 @@ function chooseFormValue(draft, committed) {
return draft !== undefined ? draft : committed;
}

const formValuesSelector = createSelector(
export const formValuesSelector = createSelector(
valuesSelector,
draftsSelector,
(values, drafts) => {
const formValues = {};
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) || '';
}
Expand Down
59 changes: 58 additions & 1 deletion src/account-settings/data/selectors.test.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { profileDataManagerSelector } from './selectors';
import { profileDataManagerSelector, formValuesSelector } from './selectors';

const testValue = 'test VALUE';

Expand All @@ -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);

Check warning on line 34 in src/account-settings/data/selectors.test.js

View workflow job for this annotation

GitHub Actions / tests (lint)

Unexpected console statement

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);
});
});

0 comments on commit a17c9df

Please sign in to comment.