feat: add work experience field

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) => {
@@ -469,11 +474,12 @@ 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;
-
+    console.log("values", this.props.formValues)
     const { verifiedName } = this.props;
 
     const timeZoneOptions = this.getLocalizedTimeZoneOptions(
@@ -679,6 +685,15 @@ class AccountSettingsPage extends React.Component {
             emptyLabel={this.props.intl.formatMessage(messages['account.settings.field.gender.empty'])}
             {...editableFieldProps}
           />
+          <EditableSelectField
+            name="work_experience"
+            type="select"
+            value={this.props.formValues.extended_profile.find(profile => 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}
+          />
           <EditableSelectField
             name="language_proficiencies"
             type="select"
@@ -850,6 +865,7 @@ AccountSettingsPage.propTypes = {
     country: PropTypes.string,
     level_of_education: PropTypes.string,
     gender: PropTypes.string,
+    work_experience: PropTypes.string,
     language_proficiencies: PropTypes.string,
     pending_name_change: PropTypes.string,
     phone_number: PropTypes.string,

src/account-settings/AccountSettingsPage.messages.jsx

@@ -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;

src/account-settings/data/constants.js

@@ -34,6 +34,22 @@ 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';
 

src/account-settings/data/selectors.js

@@ -164,7 +164,21 @@ const formValuesSelector = createSelector(
     Object.entries(values).forEach(([name, value]) => {
       if (typeof value === 'boolean') {
         formValues[name] = chooseFormValue(drafts[name], value);
-      } else {
+      }
+     else if (typeof value === 'object' && name === 'extended_profile' && value !== null && Object.keys(drafts).length !== 0 ) {
+
+    const draftFieldName = Object.keys(drafts)[0];
+        const extendedProfile = value;
+
+        const index = extendedProfile.findIndex((profile) => profile.field_name === draftFieldName);
+
+        if (index !== -1) {
+            extendedProfile[index].field_value = drafts[draftFieldName];
+            formValues[name] = extendedProfile;
+        }
+
+}
+      else {
         formValues[name] = chooseFormValue(drafts[name], value) || '';
       }
     });