Revert "[COJ]Likhith/[WALL]-2362/manage occupation field drop down (b…

…inary-com#11337)" (binary-com#12404) This reverts commit ddf30b6.
niloofar-deriv · Dec 20, 2023 · 8e38509 · 8e38509
1 parent ddf30b6
commit 8e38509
Show file tree

Hide file tree

Showing 13 changed files with 759 additions and 799 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 { EMPLOYMENT_VALUES, isDesktop, isMobile } from '@deriv/shared';
+import { 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,17 +13,10 @@ 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(),
@@ -49,16 +42,16 @@ describe('<FinancialDetails />', () => {
 
     const mock_store = mockStore({});
 
-    const renderComponent = ({ props = mock_props }) => {
+    const renderComponent = () => {
         render(
             <StoreProvider store={mock_store}>
-                <FinancialDetails {...props} />
+                <FinancialDetails {...mock_props} />
             </StoreProvider>
         );
     };
 
     it('should render "FinancialDetails" for desktop', () => {
-        renderComponent({});
+        renderComponent();
 
         fieldsRenderCheck();
 
@@ -73,7 +66,7 @@ describe('<FinancialDetails />', () => {
         (isDesktop as jest.Mock).mockReturnValue(false);
         (isMobile as jest.Mock).mockReturnValue(true);
 
-        renderComponent({});
+        renderComponent();
 
         fieldsRenderCheck();
 
@@ -85,7 +78,7 @@ describe('<FinancialDetails />', () => {
     });
 
     it('should trigger "Previous" button', () => {
-        renderComponent({});
+        renderComponent();
 
         fieldsRenderCheck();
 
@@ -100,7 +93,7 @@ describe('<FinancialDetails />', () => {
         (isDesktop as jest.Mock).mockReturnValue(false);
         (isMobile as jest.Mock).mockReturnValue(true);
 
-        renderComponent({});
+        renderComponent();
 
         fieldsRenderCheck();
 
@@ -146,7 +139,7 @@ describe('<FinancialDetails />', () => {
         (isDesktop as jest.Mock).mockReturnValue(false);
         (isMobile as jest.Mock).mockReturnValue(true);
 
-        renderComponent({});
+        renderComponent();
 
         const select_inputs = screen.getAllByRole('combobox');
 
@@ -160,11 +153,7 @@ 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);
-        const new_mock_props: React.ComponentProps<typeof FinancialDetails> = {
-            ...mock_props,
-            employment_status: 'Pensioner',
-        };
-        renderComponent({ props: new_mock_props });
+        renderComponent();
 
         fieldsRenderCheck();
 
@@ -208,24 +197,4 @@ 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,7 +1,6 @@
-import React from 'react';
 import { Field, FormikValues, useFormikContext } from 'formik';
+import React from 'react';
 import { DesktopWrapper, MobileWrapper, Dropdown, SelectNative } from '@deriv/components';
-import { EMPLOYMENT_VALUES, TEmploymentStatus, shouldHideOccupationField } from '@deriv/shared';
 import { localize } from '@deriv/translations';
 import {
     getAccountTurnoverList,
@@ -13,17 +12,18 @@ 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?: TEmploymentStatus;
+    employment_status?: string;
 };
 
 type TFinancialInformationProps = {
-    employment_status?: TEmploymentStatus | string;
+    employment_status?: string;
 };
 
 /**
@@ -164,14 +164,12 @@ const FinancialInformation = ({ employment_status }: TFinancialInformationProps)
                 field_key='employment_industry'
                 label={localize('Industry of employment')}
             />
-            {!shouldHideOccupationField(employment_status) && (
-                <FinancialDetailsOccupationDropdownField
-                    dropdown_list={getFormattedOccupationList(employment_status)}
-                    field_key='occupation'
-                    label={localize('Occupation')}
-                    employment_status={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,31 +9,42 @@ import {
     Text,
     ThemedScrollbars,
 } from '@deriv/components';
-import { isDesktop, isMobile, EMPLOYMENT_VALUES, shouldHideOccupationField } from '@deriv/shared';
+import { isDesktop, isMobile } 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: TFinancialInformationForm) => void;
+    onSave: (current_step: number, values: TFinancialDetailsFormValues) => void;
     onSubmit: (
         current_step: number,
-        values: TFinancialInformationForm,
+        values: TFinancialDetailsFormValues,
         actions: (isSubmitting: boolean) => void,
         props: () => void
     ) => void;
     onCancel: (current_step: number, props: () => void) => void;
-    validate: (values: TFinancialInformationForm) => object;
-    value: TFinancialInformationForm;
-    employment_status: string;
+    validate: (values: TFinancialDetailsFormValues) => object;
     is_eu_user: boolean;
+    value: TFinancialDetailsFormValues;
+    employment_status: string;
 };
 
 /**
@@ -43,7 +54,7 @@ type TFinancialDetails = {
  * @returns {React.ReactNode} React component that renders FinancialDetails form.
  */
 const FinancialDetails = observer((props: TFinancialDetails) => {
-    const handleCancel = (values: TFinancialInformationForm) => {
+    const handleCancel = (values: TFinancialDetailsFormValues) => {
         const current_step = props.getCurrentStep() - 1;
         props.onSave(current_step, values);
         props.onCancel(current_step, props.goToPreviousStep);
@@ -53,11 +64,8 @@ const FinancialDetails = observer((props: TFinancialDetails) => {
         traders_hub: { is_eu_user },
     } = useStore();
 
-    const handleValidate = (values: TFinancialInformationForm) => {
+    const handleValidate = (values: TFinancialDetailsFormValues) => {
         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,13 +1,8 @@
 import React from 'react';
 import { GetFinancialAssessment } from '@deriv/api-types';
-import {
-    generateValidationFunction,
-    getDefaultFields,
-    TSchema,
-    EMPLOYMENT_VALUES,
-    TEmploymentStatus,
-} from '@deriv/shared';
+import { generateValidationFunction, getDefaultFields, TSchema } from '@deriv/shared';
 import { localize } from '@deriv/translations';
+import { EMPLOYMENT_VALUES } from '../Constants/financial-details';
 
 type TFinancialDetailsConfig = {
     real_account_signup_target: string;
@@ -320,7 +315,7 @@ export const getIncomeSourceList = () => [
     },
 ];
 
-export const getFormattedOccupationList = (employment_status?: TEmploymentStatus) =>
+export const getFormattedOccupationList = (employment_status?: string) =>
     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
@@ -0,0 +1,4 @@
+export const EMPLOYMENT_VALUES = {
+    EMPLOYED: 'Employed',
+    UNEMPLOYED: 'Unemployed',
+};