Skip to content

Commit

Permalink
[COJ]/likhith/KYC-1737/feat: incorporated changes to display occupati…
Browse files Browse the repository at this point in the history 
…on field (binary-com#14197)

* feat: incorporated changes to display occupation field

* fix: failing testcases

* fix: incorporated review comments

* fix: sync occupation values

* fix: render issue in responsive mode

* fix: occupation-field- sync issue

* fix: removed comented code
  • Loading branch information
@likhith-deriv
likhith-deriv committed Mar 22, 2024
1 parent 5bbb56a commit ba2f6fd
Show file tree
Hide file tree
Showing 9 changed files with 110 additions and 38 deletions.
12 changes: 11 additions & 1 deletion packages/account/src/Components/financial-details/__tests__/financial-details.spec.tsx
View file
Expand Up @@ -226,6 +226,16 @@ describe('<FinancialDetails />', () => {
};
renderComponent({ props: new_mock_props });

expect(screen.queryByText('Occupation')).not.toBeInTheDocument();
expect(screen.queryByText('Occupation')).toBeInTheDocument();
});

it('should not show Occupation field if employment status is "Employed"', () => {
const new_mock_props: React.ComponentProps<typeof FinancialDetails> = {
...mock_props,
employment_status: EMPLOYMENT_VALUES.SELF_EMPLOYED,
};
renderComponent({ props: new_mock_props });

expect(screen.queryByText('Occupation')).toBeInTheDocument();
});
});
6 changes: 5 additions & 1 deletion packages/account/src/Components/forms/personal-details-form.jsx
View file
Expand Up @@ -458,7 +458,10 @@ const PersonalDetailsForm = props => {
name='employment_status'
list={getEmploymentStatusList()}
value={values.employment_status}
onChange={handleChange}
onChange={e => {
setFieldValue('occupation', '', true);
handleChange(e);
}}
handleBlur={handleBlur}
error={touched.employment_status && errors.employment_status}
disabled={isFieldImmutable('employment_status', editable_fields)}
Expand All @@ -478,6 +481,7 @@ const PersonalDetailsForm = props => {
error={touched.employment_status && errors.employment_status}
onChange={e => {
setFieldTouched('employment_status', true);
setFieldValue('occupation', '', true);
handleChange(e);
}}
disabled={isFieldImmutable('employment_status', editable_fields)}
Expand Down
29 changes: 29 additions & 0 deletions packages/account/src/Configs/__test__/financial-details-config.spec.ts
View file
@@ -0,0 +1,29 @@
import { EMPLOYMENT_VALUES } from '@deriv/shared';
import { getFormattedOccupationList, getOccupationList } from '../financial-details-config';

describe('getFormattedOccupationList', () => {
const occupation_list = getOccupationList();

it('should return all Occupations when Employment status is Unemployed', () => {
const employment_status = EMPLOYMENT_VALUES.UNEMPLOYED;
expect(getFormattedOccupationList(employment_status)).toHaveLength(occupation_list.length);
});

it('should not return Unemployed as Occupations when Employment status is Self-Employed', () => {
const employment_status = EMPLOYMENT_VALUES.SELF_EMPLOYED;
const formatted_list = getFormattedOccupationList(employment_status);

expect(formatted_list).toHaveLength(occupation_list.length - 1);

expect(formatted_list).not.toContain(occupation_list.find(item => item.value === EMPLOYMENT_VALUES.UNEMPLOYED));
});

it('should not return Unemployed as Occupations when Employment status is Employed', () => {
const employment_status = EMPLOYMENT_VALUES.EMPLOYED;
const formatted_list = getFormattedOccupationList(employment_status);

expect(formatted_list).toHaveLength(occupation_list.length - 1);

expect(formatted_list).not.toContain(occupation_list.find(item => item.value === EMPLOYMENT_VALUES.UNEMPLOYED));
});
});
3 changes: 2 additions & 1 deletion packages/account/src/Configs/financial-details-config.ts
View file
Expand Up @@ -321,7 +321,8 @@ export const getIncomeSourceList = () => [
];

export const getFormattedOccupationList = (employment_status?: TEmploymentStatus) =>
employment_status && employment_status === EMPLOYMENT_VALUES.EMPLOYED
employment_status &&
[EMPLOYMENT_VALUES.EMPLOYED, EMPLOYMENT_VALUES.SELF_EMPLOYED].some(status => status === employment_status)
? getOccupationList().filter(item => item.value !== EMPLOYMENT_VALUES.UNEMPLOYED)
: getOccupationList();

Expand Down
32 changes: 30 additions & 2 deletions ...count/src/Sections/Assessment/FinancialAssessment/__tests__/financial-assessment.spec.tsx
View file
Expand Up @@ -73,15 +73,15 @@ describe('<FinancialAssessment/>', () => {
});
});

it('should render FinancialAssessment component without occupation field when Employment status is self employed', async () => {
it('should render FinancialAssessment component without occupation field when Employment status is un employed', async () => {
WS.authorized.storage.getFinancialAssessment = jest.fn(() =>
Promise.resolve({
get_financial_assessment: {
account_turnover: '',
cfd_score: 0,
education_level: '',
employment_industry: '',
employment_status: 'Self-Employed',
employment_status: 'Unemployed',
estimated_worth: '',
financial_information_score: '',
income_source: '',
Expand All @@ -100,4 +100,32 @@ describe('<FinancialAssessment/>', () => {
expect(screen.queryByText('Occupation')).not.toBeInTheDocument();
});
});

it('should render FinancialAssessment component without occupation field when Employment status is Self-Employed', async () => {
WS.authorized.storage.getFinancialAssessment = jest.fn(() =>
Promise.resolve({
get_financial_assessment: {
account_turnover: '',
cfd_score: 0,
education_level: '',
employment_industry: '',
employment_status: 'Self-Employed',
estimated_worth: '',
financial_information_score: '',
income_source: '',
net_income: '',
occupation: '',
source_of_wealth: '',
total_score: '',
trading_score: '',
},
})
);
rendercomponent();
await waitFor(() => {
expect(screen.getByText('Employment status')).toBeInTheDocument();
expect(screen.getByText('Industry of employment')).toBeInTheDocument();
expect(screen.queryByText('Occupation')).toBeInTheDocument();
});
});
});
49 changes: 18 additions & 31 deletions packages/account/src/Sections/Assessment/FinancialAssessment/financial-assessment.tsx
View file
Expand Up @@ -351,11 +351,6 @@ const FinancialAssessment = observer(() => {
return '8rem';
};

const getFormattedOccupationValues = (values: TFinancialInformationForm) =>
values?.employment_status === EMPLOYMENT_VALUES.EMPLOYED && values?.occupation === EMPLOYMENT_VALUES.UNEMPLOYED
? ''
: values?.occupation;

if (is_loading) return <Loading is_fullscreen={false} className='account__initial-loader' />;
if (api_initial_load_error) return <LoadErrorMessage error_message={api_initial_load_error} />;
if (is_virtual) return <DemoMessage />;
Expand Down Expand Up @@ -410,6 +405,7 @@ const FinancialAssessment = observer(() => {
setFieldTouched,
dirty,
setFieldValue,
isValid,
}) => (
<React.Fragment>
{is_mobile && is_confirmation_visible && (
Expand Down Expand Up @@ -488,7 +484,14 @@ const FinancialAssessment = observer(() => {
name='employment_status'
list={getEmploymentStatusList()}
value={values.employment_status}
onChange={handleChange}
onChange={e => {
handleChange(e);
setFieldValue(
'occupation',
'',
!shouldHideOccupationField(e.target.value)
);
}}
handleBlur={handleBlur}
error={touched.employment_status && errors.employment_status}
/>
Expand All @@ -506,6 +509,11 @@ const FinancialAssessment = observer(() => {
onChange={e => {
setFieldTouched('employment_status', true);
handleChange(e);
setFieldValue(
'occupation',
'',
!shouldHideOccupationField(e.target.value)
);
}}
/>
</MobileWrapper>
Expand Down Expand Up @@ -552,15 +560,8 @@ const FinancialAssessment = observer(() => {
list={getFormattedOccupationList(
(values.employment_status || employment_status) ?? ''
)} // employment_status may come as part of the FA form or Personal details form
value={getFormattedOccupationValues(values)}
onChange={e => {
setFieldValue(
'occupation',
getFormattedOccupationValues(values),
true
);
handleChange(e);
}}
value={values.occupation}
onChange={handleChange}
handleBlur={handleBlur}
error={touched.occupation && errors.occupation}
test_id='occupation'
Expand All @@ -574,14 +575,9 @@ const FinancialAssessment = observer(() => {
list_items={getFormattedOccupationList(
(values.employment_status || employment_status) ?? ''
)}
value={getFormattedOccupationValues(values)}
value={values.occupation}
error={touched.occupation ? errors.occupation : undefined}
onChange={e => {
setFieldValue(
'occupation',
getFormattedOccupationValues(values),
true
);
setFieldTouched('occupation', true);
handleChange(e);
}}
Expand Down Expand Up @@ -1049,16 +1045,7 @@ const FinancialAssessment = observer(() => {
'dc-btn--green': is_submit_success,
})}
onClick={() => onClickSubmit(handleSubmit)}
is_disabled={
isSubmitting ||
!dirty ||
is_btn_loading ||
Object.keys(errors).length > 0 ||
!!(
values?.employment_status === EMPLOYMENT_VALUES.EMPLOYED &&
values?.occupation === EMPLOYMENT_VALUES.UNEMPLOYED
)
}
is_disabled={isSubmitting || !dirty || is_btn_loading || !isValid}
has_effect
is_loading={is_btn_loading}
is_submit_success={is_submit_success}
Expand Down
13 changes: 13 additions & 0 deletions packages/core/src/App/Containers/RealAccountSignup/account-wizard.jsx
View file
Expand Up @@ -56,6 +56,9 @@ const StepperHeader = ({ has_target, has_real_account, items, getCurrentStep, ge

const AccountWizard = observer(props => {
const { client, notifications, ui, traders_hub } = useStore();

const { is_eu_user } = traders_hub;

const modifiedProps = {
...props,
account_settings: client.account_settings,
Expand Down Expand Up @@ -320,6 +323,11 @@ const AccountWizard = observer(props => {
};

const updateValue = (index, value, setSubmitting, goToNextStep, should_override = false) => {
// This is to sync clearing of value on change of Employment status personal details and occupation in financial assessment
if (is_eu_user && index === 1) {
state_items[4].form_value = { ...state_items[4].form_value, occupation: value.occupation };
setStateItems(state_items);
}
saveFormData(index, value);
clearError();

Expand All @@ -338,8 +346,13 @@ const AccountWizard = observer(props => {

const saveFormData = (index, value) => {
const cloned_items = Object.assign([], state_items);
// This is to sync clearing of value on change of Employment status personal details and occupation in financial assessment
if (is_eu_user && index === 1) {
delete value?.occupation;
}
cloned_items[index].form_value = value;
setStateItems(cloned_items);

setRealAccountSignupFormData(cloned_items);
};

Expand Down
2 changes: 1 addition & 1 deletion packages/shared/src/utils/validation/__tests__/form-validation.spec.ts
View file
Expand Up @@ -11,7 +11,7 @@ describe('shouldHideOccupationField', () => {
});

it('should return true when employment_status is "Self employed"', () => {
expect(shouldHideOccupationField(EMPLOYMENT_VALUES.SELF_EMPLOYED)).toBeTruthy();
expect(shouldHideOccupationField(EMPLOYMENT_VALUES.SELF_EMPLOYED)).toBeFalsy();
});

it('should return false when employment_status is empty sting', () => {
Expand Down
2 changes: 1 addition & 1 deletion packages/shared/src/utils/validation/form-validations.ts
View file
Expand Up @@ -111,4 +111,4 @@ export const getValidationFunction = (rule: string) => {

// Adding string as type because, employment_status can come from Personal details or Financial assessment.
export const shouldHideOccupationField = (employment_status?: TEmploymentStatus | string) =>
[EMPLOYMENT_VALUES.SELF_EMPLOYED, EMPLOYMENT_VALUES.UNEMPLOYED].some(status => status === employment_status);
EMPLOYMENT_VALUES.UNEMPLOYED === employment_status;

0 comments on commit ba2f6fd

Please sign in to comment.