[COJ]Likhith/[WALL]-2362/manage occupation field drop down (binary-co…

…m#11337) * chore: configured occupation field display * refactor: modified payload for Financial-assessment * chore: added testcases for the enhancement * fix: code smells * fix: code smells * fix: incorporated review comments * fix: incorporated review comments * fix: types of props * fix: incorporated review comments * fix: occupation field change * fix: removed unused import * refactor: incorporated review comments * Merge branch 'master' into likhith/WALL-2362/manage-occupation-field-drop-down
niloofar-deriv · Dec 20, 2023 · ddf30b6 · ddf30b6
1 parent 3bc6b89
commit ddf30b6
Show file tree

Hide file tree

Showing 13 changed files with 799 additions and 759 deletions.
diff --git a/packages/account/src/Components/financial-details/__tests__/financial-details.spec.tsx b/packages/account/src/Components/financial-details/__tests__/financial-details.spec.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { FormikValues } from 'formik';
-import { isDesktop, isMobile } from '@deriv/shared';
+import { EMPLOYMENT_VALUES, isDesktop, isMobile } from '@deriv/shared';
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import FinancialDetails from '../financial-details';
@@ -13,10 +13,17 @@ jest.mock('@deriv/shared', () => ({
 }));
 
 const modal_root_el = document.createElement('div');
-modal_root_el.setAttribute('id', 'modal_root');
-document.body.appendChild(modal_root_el);
 
 describe('<FinancialDetails />', () => {
+    beforeAll(() => {
+        modal_root_el.setAttribute('id', 'modal_root');
+        document.body.appendChild(modal_root_el);
+    });
+
+    afterAll(() => {
+        document.body.removeChild(modal_root_el);
+    });
+
     const mock_props: React.ComponentProps<typeof FinancialDetails> = {
         getCurrentStep: jest.fn(),
         goToNextStep: jest.fn(),
@@ -42,16 +49,16 @@ describe('<FinancialDetails />', () => {
 
     const mock_store = mockStore({});
 
-    const renderComponent = () => {
+    const renderComponent = ({ props = mock_props }) => {
         render(
             <StoreProvider store={mock_store}>
-                <FinancialDetails {...mock_props} />
+                <FinancialDetails {...props} />
             </StoreProvider>
         );
     };
 
     it('should render "FinancialDetails" for desktop', () => {
-        renderComponent();
+        renderComponent({});
 
         fieldsRenderCheck();
 
@@ -66,7 +73,7 @@ describe('<FinancialDetails />', () => {
         (isDesktop as jest.Mock).mockReturnValue(false);
         (isMobile as jest.Mock).mockReturnValue(true);
 
-        renderComponent();
+        renderComponent({});
 
         fieldsRenderCheck();
 
@@ -78,7 +85,7 @@ describe('<FinancialDetails />', () => {
     });
 
     it('should trigger "Previous" button', () => {
-        renderComponent();
+        renderComponent({});
 
         fieldsRenderCheck();
 
@@ -93,7 +100,7 @@ describe('<FinancialDetails />', () => {
         (isDesktop as jest.Mock).mockReturnValue(false);
         (isMobile as jest.Mock).mockReturnValue(true);
 
-        renderComponent();
+        renderComponent({});
 
         fieldsRenderCheck();
 
@@ -139,7 +146,7 @@ describe('<FinancialDetails />', () => {
         (isDesktop as jest.Mock).mockReturnValue(false);
         (isMobile as jest.Mock).mockReturnValue(true);
 
-        renderComponent();
+        renderComponent({});
 
         const select_inputs = screen.getAllByRole('combobox');
 
@@ -153,7 +160,11 @@ describe('<FinancialDetails />', () => {
     it('should show "Unemployed" in occupation list if employment status is not "Employed"', async () => {
         (isDesktop as jest.Mock).mockReturnValue(false);
         (isMobile as jest.Mock).mockReturnValue(true);
-        renderComponent();
+        const new_mock_props: React.ComponentProps<typeof FinancialDetails> = {
+            ...mock_props,
+            employment_status: 'Pensioner',
+        };
+        renderComponent({ props: new_mock_props });
 
         fieldsRenderCheck();
 
@@ -197,4 +208,24 @@ describe('<FinancialDetails />', () => {
             expect(mock_props.onSubmit).toHaveBeenCalled();
         });
     });
+
+    it('should not show Occupation field if employment status is "Unemployed"', () => {
+        const new_mock_props: React.ComponentProps<typeof FinancialDetails> = {
+            ...mock_props,
+            employment_status: EMPLOYMENT_VALUES.UNEMPLOYED,
+        };
+        renderComponent({ props: new_mock_props });
+
+        expect(screen.queryByText('Occupation')).not.toBeInTheDocument();
+    });
+
+    it('should not show Occupation field if employment status is "Self 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')).not.toBeInTheDocument();
+    });
 });
diff --git a/packages/account/src/Components/financial-details/financial-details-partials.tsx b/packages/account/src/Components/financial-details/financial-details-partials.tsx
@@ -1,6 +1,7 @@
-import { Field, FormikValues, useFormikContext } from 'formik';
 import React from 'react';
+import { Field, FormikValues, useFormikContext } from 'formik';
 import { DesktopWrapper, MobileWrapper, Dropdown, SelectNative } from '@deriv/components';
+import { EMPLOYMENT_VALUES, TEmploymentStatus, shouldHideOccupationField } from '@deriv/shared';
 import { localize } from '@deriv/translations';
 import {
     getAccountTurnoverList,
@@ -12,18 +13,17 @@ import {
     getFormattedOccupationList,
     getSourceOfWealthList,
 } from '../../Configs/financial-details-config';
-import { EMPLOYMENT_VALUES } from '../../Constants/financial-details';
 
 type TFinancialDetailsDropdownFieldProps = {
     dropdown_list: Array<object>;
     field_key: string;
     placeholder?: string;
     label: string;
-    employment_status?: string;
+    employment_status?: TEmploymentStatus;
 };
 
 type TFinancialInformationProps = {
-    employment_status?: string;
+    employment_status?: TEmploymentStatus | string;
 };
 
 /**
@@ -164,12 +164,14 @@ const FinancialInformation = ({ employment_status }: TFinancialInformationProps)
                 field_key='employment_industry'
                 label={localize('Industry of employment')}
             />
-            <FinancialDetailsOccupationDropdownField
-                dropdown_list={getFormattedOccupationList(employment_status)}
-                field_key='occupation'
-                label={localize('Occupation')}
-                employment_status={employment_status}
-            />
+            {!shouldHideOccupationField(employment_status) && (
+                <FinancialDetailsOccupationDropdownField
+                    dropdown_list={getFormattedOccupationList(employment_status)}
+                    field_key='occupation'
+                    label={localize('Occupation')}
+                    employment_status={employment_status}
+                />
+            )}
             <FinancialDetailsDropdownField
                 dropdown_list={getSourceOfWealthList()}
                 field_key='source_of_wealth'

diff --git a/packages/account/src/Components/financial-details/financial-details.tsx b/packages/account/src/Components/financial-details/financial-details.tsx
@@ -1,6 +1,6 @@
+import React from 'react';
 import classNames from 'classnames';
 import { Formik } from 'formik';
-import React from 'react';
 import {
     AutoHeightWrapper,
     Div100vhContainer,
@@ -9,42 +9,31 @@ import {
     Text,
     ThemedScrollbars,
 } from '@deriv/components';
-import { isDesktop, isMobile } from '@deriv/shared';
+import { isDesktop, isMobile, EMPLOYMENT_VALUES, shouldHideOccupationField } from '@deriv/shared';
 import { Localize, localize } from '@deriv/translations';
+import { TFinancialInformationForm } from 'Types';
 import { observer, useStore } from '@deriv/stores';
-import { EMPLOYMENT_VALUES } from '../../Constants/financial-details';
 import FinancialInformation from './financial-details-partials';
 import { splitValidationResultTypes } from '../real-account-signup/helpers/utils';
 import ScrollToFieldWithError from '../forms/scroll-to-field-with-error';
 import InlineNoteWithIcon from '../inline-note-with-icon';
 
-type TFinancialDetailsFormValues = {
-    income_source: string;
-    employment_industry: string;
-    occupation: string;
-    source_of_wealth: string;
-    education_level: string;
-    net_income: string;
-    estimated_worth: string;
-    account_turnover: string;
-};
-
 type TFinancialDetails = {
     goToPreviousStep: () => void;
     goToNextStep: () => void;
     getCurrentStep: () => number;
-    onSave: (current_step: number, values: TFinancialDetailsFormValues) => void;
+    onSave: (current_step: number, values: TFinancialInformationForm) => void;
     onSubmit: (
         current_step: number,
-        values: TFinancialDetailsFormValues,
+        values: TFinancialInformationForm,
         actions: (isSubmitting: boolean) => void,
         props: () => void
     ) => void;
     onCancel: (current_step: number, props: () => void) => void;
-    validate: (values: TFinancialDetailsFormValues) => object;
-    is_eu_user: boolean;
-    value: TFinancialDetailsFormValues;
+    validate: (values: TFinancialInformationForm) => object;
+    value: TFinancialInformationForm;
     employment_status: string;
+    is_eu_user: boolean;
 };
 
 /**
@@ -54,7 +43,7 @@ type TFinancialDetails = {
  * @returns {React.ReactNode} React component that renders FinancialDetails form.
  */
 const FinancialDetails = observer((props: TFinancialDetails) => {
-    const handleCancel = (values: TFinancialDetailsFormValues) => {
+    const handleCancel = (values: TFinancialInformationForm) => {
         const current_step = props.getCurrentStep() - 1;
         props.onSave(current_step, values);
         props.onCancel(current_step, props.goToPreviousStep);
@@ -64,8 +53,11 @@ const FinancialDetails = observer((props: TFinancialDetails) => {
         traders_hub: { is_eu_user },
     } = useStore();
 
-    const handleValidate = (values: TFinancialDetailsFormValues) => {
+    const handleValidate = (values: TFinancialInformationForm) => {
         const { errors } = splitValidationResultTypes(props.validate(values));
+        if (shouldHideOccupationField(props.employment_status)) {
+            delete errors?.occupation;
+        }
         return errors;
     };
 

diff --git a/packages/account/src/Configs/financial-details-config.ts b/packages/account/src/Configs/financial-details-config.ts
@@ -1,8 +1,13 @@
 import React from 'react';
 import { GetFinancialAssessment } from '@deriv/api-types';
-import { generateValidationFunction, getDefaultFields, TSchema } from '@deriv/shared';
+import {
+    generateValidationFunction,
+    getDefaultFields,
+    TSchema,
+    EMPLOYMENT_VALUES,
+    TEmploymentStatus,
+} from '@deriv/shared';
 import { localize } from '@deriv/translations';
-import { EMPLOYMENT_VALUES } from '../Constants/financial-details';
 
 type TFinancialDetailsConfig = {
     real_account_signup_target: string;
@@ -315,7 +320,7 @@ export const getIncomeSourceList = () => [
     },
 ];
 
-export const getFormattedOccupationList = (employment_status?: string) =>
+export const getFormattedOccupationList = (employment_status?: TEmploymentStatus) =>
     employment_status && employment_status === EMPLOYMENT_VALUES.EMPLOYED
         ? getOccupationList().filter(item => item.value !== EMPLOYMENT_VALUES.UNEMPLOYED)
         : getOccupationList();

diff --git a/packages/account/src/Constants/financial-details.ts b/packages/account/src/Constants/financial-details.ts