Skip to content

Commit de522f5

Browse files
amina-derivamina-deriv
authored
Merge pull request #108 from amina-deriv/amina/employment
Amina/employment status form field
2 parents 9538a26 + 42da097 commit de522f5

File tree

6 files changed

+67
-129
lines changed

6 files changed

+67
-129
lines changed

‎packages/account/src/Components/forms/form-fields/employment-status.tsx

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import clsx from 'clsx';
2+
import { Field, FieldProps } from 'formik';
3+
import { DesktopWrapper, Dropdown, MobileWrapper, SelectNative } from '@deriv/components';
4+
import { localize } from '@deriv/translations';
5+
import { getEmploymentStatusList } from '../../../Constants/financial-information-list';
6+
7+
type TEmploymentStatusFieldProps = {
8+
required: boolean;
9+
is_disabled: boolean;
10+
};
11+
12+
const EmploymentStatusField = ({ required, is_disabled }: TEmploymentStatusFieldProps) => (
13+
<Field name='employment_status'>
14+
{({ field, form: { setFieldValue, setFieldTouched, handleBlur, handleChange }, meta }: FieldProps) => (
15+
<div className={clsx('account-form__fieldset', 'emp-status')}>
16+
<DesktopWrapper>
17+
<Dropdown
18+
placeholder={required ? localize('Amina*') : localize('Employment status')}
19+
is_align_text_left
20+
name={field.name}
21+
list={getEmploymentStatusList()}
22+
value={field.value}
23+
onChange={e => {
24+
setFieldValue(field.name, e.target?.value, true);
25+
handleChange(e);
26+
}}
27+
handleBlur={handleBlur}
28+
error={meta.touched ? meta.error : undefined}
29+
disabled={is_disabled}
30+
/>
31+
</DesktopWrapper>
32+
<MobileWrapper>
33+
<SelectNative
34+
placeholder={localize('Please select')}
35+
name={field.name}
36+
label={required ? localize('Employment status*') : localize('Employment status')}
37+
list_items={getEmploymentStatusList()}
38+
value={field.value}
39+
error={meta.touched ? meta.error : undefined}
40+
onChange={e => {
41+
setFieldTouched('employment_status', true);
42+
handleChange(e);
43+
}}
44+
disabled={is_disabled}
45+
/>
46+
</MobileWrapper>
47+
</div>
48+
)}
49+
</Field>
50+
);
51+
52+
export default EmploymentStatusField;

‎packages/account/src/Components/forms/form-fields/index.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import FormInputField from './form-input-field';
22
import DateOfBirthField from './date-of-birth-field';
3+
import EmploymentStatusField from './employment-status';
34

4-
export { FormInputField, DateOfBirthField };
5+
export { FormInputField, DateOfBirthField, EmploymentStatusField };

‎packages/account/src/Components/forms/personal-details-form.jsx

+5-44
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,8 @@ import {
1717
import { getLegalEntityName, isDesktop, isMobile, routes, validPhone } from '@deriv/shared';
1818
import { Localize, localize } from '@deriv/translations';
1919
import { isFieldImmutable, verifyFields } from '../../Helpers/utils';
20-
import { getEmploymentStatusList } from '../../Sections/Assessment/FinancialAssessment/financial-information-list';
2120
import FormBodySection from '../form-body-section';
22-
import { DateOfBirthField, FormInputField } from './form-fields';
21+
import { DateOfBirthField, FormInputField, EmploymentStatusField } from './form-fields';
2322
import FormSubHeader from '../form-sub-header';
2423
import InlineNoteWithIcon from '../inline-note-with-icon';
2524

@@ -441,48 +440,10 @@ const PersonalDetailsForm = props => {
441440
/>
442441
)}
443442
{'employment_status' in values && (
444-
<fieldset className={clsx('account-form__fieldset', 'emp-status')}>
445-
<DesktopWrapper>
446-
<Dropdown
447-
placeholder={
448-
is_eu_user
449-
? localize('Employment status*')
450-
: localize('Employment status')
451-
}
452-
is_align_text_left
453-
name='employment_status'
454-
list={getEmploymentStatusList()}
455-
value={values.employment_status}
456-
onChange={e => {
457-
setFieldValue('occupation', '', true);
458-
handleChange(e);
459-
}}
460-
handleBlur={handleBlur}
461-
error={touched.employment_status && errors.employment_status}
462-
disabled={isFieldImmutable('employment_status', editable_fields)}
463-
/>
464-
</DesktopWrapper>
465-
<MobileWrapper>
466-
<SelectNative
467-
placeholder={localize('Please select')}
468-
name='employment_status'
469-
label={
470-
is_eu_user
471-
? localize('Employment status*')
472-
: localize('Employment status')
473-
}
474-
list_items={getEmploymentStatusList()}
475-
value={values.employment_status}
476-
error={touched.employment_status && errors.employment_status}
477-
onChange={e => {
478-
setFieldTouched('employment_status', true);
479-
setFieldValue('occupation', '', true);
480-
handleChange(e);
481-
}}
482-
disabled={isFieldImmutable('employment_status', editable_fields)}
483-
/>
484-
</MobileWrapper>
485-
</fieldset>
443+
<EmploymentStatusField
444+
required
445+
is_disabled={isFieldImmutable('employment_status', editable_fields)}
446+
/>
486447
)}
487448
{'tax_identification_confirm' in values && (
488449
<Checkbox

‎packages/account/src/Sections/Assessment/FinancialAssessment/financial-information-list.ts ‎packages/account/src/Constants/financial-information-list.ts

File renamed without changes.

‎packages/account/src/Sections/Assessment/FinancialAssessment/financial-assessment.tsx

+3-42
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,6 @@ import {
3232
getAccountTurnoverList,
3333
getEducationLevelList,
3434
getEmploymentIndustryList,
35-
getEmploymentStatusList,
3635
getEstimatedWorthList,
3736
getIncomeSourceList,
3837
getNetIncomeList,
@@ -45,11 +44,12 @@ import {
4544
getForexTradingFrequencyList,
4645
getOtherInstrumentsTradingExperienceList,
4746
getOtherInstrumentsTradingFrequencyList,
48-
} from './financial-information-list';
47+
} from '../../../Constants/financial-information-list';
4948
import type { TCoreStores } from '@deriv/stores/types';
5049
import { GetFinancialAssessment, GetFinancialAssessmentResponse } from '@deriv/api-types';
5150
import { getFormattedOccupationList } from 'Configs/financial-details-config';
5251
import { TFinancialInformationForm } from 'Types';
52+
import { EmploymentStatusField } from 'Components/forms/form-fields';
5353

5454
type TConfirmationPage = {
5555
toggleModal: (prop: boolean) => void;
@@ -480,46 +480,7 @@ const FinancialAssessment = observer(() => {
480480
</fieldset>
481481
{!is_mf && (
482482
<fieldset className='account-form__fieldset'>
483-
<DesktopWrapper>
484-
<Dropdown
485-
placeholder={localize('Employment status')}
486-
is_align_text_left
487-
name='employment_status'
488-
list={getEmploymentStatusList()}
489-
value={values.employment_status}
490-
onChange={e => {
491-
handleChange(e);
492-
setFieldValue(
493-
'occupation',
494-
'',
495-
!shouldHideOccupationField(e.target.value)
496-
);
497-
}}
498-
handleBlur={handleBlur}
499-
error={touched.employment_status && errors.employment_status}
500-
/>
501-
</DesktopWrapper>
502-
<MobileWrapper>
503-
<SelectNative
504-
placeholder={localize('Please select')}
505-
name='employment_status'
506-
label={localize('Employment status')}
507-
list_items={getEmploymentStatusList()}
508-
value={values.employment_status}
509-
error={
510-
touched.employment_status ? errors.employment_status : undefined
511-
}
512-
onChange={e => {
513-
setFieldTouched('employment_status', true);
514-
setFieldValue(
515-
'occupation',
516-
'',
517-
!shouldHideOccupationField(e.target.value)
518-
);
519-
handleChange(e);
520-
}}
521-
/>
522-
</MobileWrapper>
483+
<EmploymentStatusField required is_disabled={false} />
523484
</fieldset>
524485
)}
525486
<fieldset className='account-form__fieldset'>

‎packages/account/src/Sections/Profile/PersonalDetails/personal-details-form.tsx

+5-42
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,11 @@ import {
66
Button,
77
Checkbox,
88
DesktopWrapper,
9-
Dropdown,
109
FormSubmitErrorMessage,
1110
HintBox,
1211
Input,
1312
Loading,
1413
MobileWrapper,
15-
SelectNative,
1614
Text,
1715
} from '@deriv/components';
1816
import { GetSettings } from '@deriv/api-types';
@@ -22,11 +20,10 @@ import { observer, useStore } from '@deriv/stores';
2220
import LeaveConfirm from 'Components/leave-confirm';
2321
import FormFooter from 'Components/form-footer';
2422
import FormBody from 'Components/form-body';
25-
import { DateOfBirthField } from 'Components/forms/form-fields';
23+
import { DateOfBirthField, EmploymentStatusField } from 'Components/forms/form-fields';
2624
import FormSubHeader from 'Components/form-sub-header';
2725
import LoadErrorMessage from 'Components/load-error-message';
2826
import POAAddressMismatchHintBox from 'Components/poa-address-mismatch-hint-box';
29-
import { getEmploymentStatusList } from 'Sections/Assessment/FinancialAssessment/financial-information-list';
3027
import InputGroup from './input-group';
3128
import { getPersonalDetailsInitialValues, getPersonalDetailsValidationSchema, makeSettingsRequest } from './validation';
3229
import FormSelectField from 'Components/forms/form-select-field';
@@ -377,44 +374,10 @@ const PersonalDetailsForm = observer(() => {
377374
<Fragment>
378375
<FormSubHeader title={localize('Employment and tax information')} />
379376
{'employment_status' in values && (
380-
<fieldset className='account-form__fieldset'>
381-
<DesktopWrapper>
382-
<Dropdown
383-
className='dropdown-field'
384-
placeholder={localize('Employment status')}
385-
is_align_text_left
386-
name='employment_status'
387-
list={getEmploymentStatusList()}
388-
value={values.employment_status}
389-
onChange={handleChange}
390-
handleBlur={handleBlur}
391-
disabled={isFieldDisabled('employment_status')}
392-
error={
393-
touched.employment_status
394-
? errors.employment_status
395-
: undefined
396-
}
397-
/>
398-
</DesktopWrapper>
399-
<MobileWrapper>
400-
<SelectNative
401-
placeholder={localize('Please select')}
402-
name='employment_status'
403-
label={localize('Employment status')}
404-
list_items={getEmploymentStatusList()}
405-
value={values.employment_status ?? ''}
406-
error={
407-
touched.employment_status
408-
? errors.employment_status
409-
: undefined
410-
}
411-
onChange={e => {
412-
setFieldTouched('employment_status', true);
413-
handleChange(e);
414-
}}
415-
/>
416-
</MobileWrapper>
417-
</fieldset>
377+
<EmploymentStatusField
378+
required
379+
is_disabled={isFieldDisabled('employment_status')}
380+
/>
418381
)}
419382
{'tax_residence' in values && (
420383
<fieldset className='account-form__fieldset'>

0 commit comments

Comments
 (0)