Merge pull request #130 from likhith-deriv/likhith/TRAH-4189/change-fa-employment-status-logic

likhith-deriv · web-flow · commit 2dff6d03b53e · 2024-09-30T08:25:30.000+04:00
chore: incorporated changes to Financial assessment
diff --git a/packages/account/src/Components/forms/form-fields/employment-status.tsx b/packages/account/src/Components/forms/form-fields/employment-status.tsx
@@ -4,13 +4,15 @@ import { Dropdown, SelectNative } from '@deriv/components';
 import { useTranslations } from '@deriv-com/translations';
 import { getEmploymentStatusList } from '../../../Constants/financial-information-list';
 import { useDevice } from '@deriv-com/ui';
+import clsx from 'clsx';
 
 type TEmploymentStatusFieldProps = {
     required: boolean;
     is_disabled: boolean;
+    fieldFocused?: boolean;
 };
 
-const EmploymentStatusField = ({ required, is_disabled }: TEmploymentStatusFieldProps) => {
+const EmploymentStatusField = ({ required, is_disabled, fieldFocused }: TEmploymentStatusFieldProps) => {
     const { isDesktop } = useDevice();
     const { localize } = useTranslations();
 
@@ -21,7 +23,6 @@ const EmploymentStatusField = ({ required, is_disabled }: TEmploymentStatusField
                     {isDesktop ? (
                         <Dropdown
                             {...field}
-                            className='dropdown-field'
                             placeholder={required ? localize('Employment status*') : localize('Employment status')}
                             is_align_text_left
                             name={field.name}
@@ -34,6 +35,7 @@ const EmploymentStatusField = ({ required, is_disabled }: TEmploymentStatusField
                             handleBlur={handleBlur}
                             error={meta.touched ? meta.error : undefined}
                             disabled={is_disabled}
+                            className={clsx('dropdown-field', { 'focus-field': fieldFocused })}
                         />
                     ) : (
                         <SelectNative
@@ -49,6 +51,7 @@ const EmploymentStatusField = ({ required, is_disabled }: TEmploymentStatusField
                                 handleChange(e);
                             }}
                             disabled={is_disabled}
+                            className={clsx({ 'focus-field': fieldFocused })}
                         />
                     )}
                 </div>
diff --git a/packages/account/src/Components/forms/form-fields/tax-indentification-number.tsx b/packages/account/src/Components/forms/form-fields/tax-indentification-number.tsx
@@ -3,13 +3,15 @@ import FormInputField from './form-input-field';
 import { Popover } from '@deriv/components';
 import { OECD_TIN_FORMAT_URL } from '../../../Constants/external-urls';
 import { useDevice } from '@deriv-com/ui';
+import clsx from 'clsx';
 
 type TTaxIdentificationNumberFieldProps = {
     required?: boolean;
     disabled: boolean;
     is_tin_popover_open: boolean;
     setIsTinPopoverOpen: (is_open: boolean) => void;
     setIsTaxResidencePopoverOpen: (is_open: boolean) => void;
+    fieldFocused?: boolean;
 };
 
 const TaxIdentificationNumberField = ({
@@ -18,6 +20,7 @@ const TaxIdentificationNumberField = ({
     setIsTinPopoverOpen,
     setIsTaxResidencePopoverOpen,
     disabled,
+    fieldFocused,
 }: TTaxIdentificationNumberFieldProps) => {
     const { localize } = useTranslations();
 
@@ -32,6 +35,7 @@ const TaxIdentificationNumberField = ({
                 data-testid='tax_identification_number'
                 disabled={disabled}
                 required={required}
+                className={clsx({ 'focus-field': fieldFocused })}
             />
             <div
                 data-testid='tax_identification_number_pop_over'
diff --git a/packages/account/src/Components/forms/form-fields/tax-residence.tsx b/packages/account/src/Components/forms/form-fields/tax-residence.tsx
@@ -9,13 +9,15 @@ import { useResidenceList } from '@deriv/hooks';
 import { TItem } from '@deriv/components/src/components/dropdown-list';
 import { useTranslations } from '@deriv-com/translations';
 import { useDevice } from '@deriv-com/ui';
+import clsx from 'clsx';
 
 type TTaxResidenceFieldProps = {
     required?: boolean;
     setIsTaxResidencePopoverOpen: (is_open: boolean) => void;
     setIsTinPopoverOpen: (is_open: boolean) => void;
     is_tax_residence_popover_open: boolean;
     disabled: boolean;
+    fieldFocused?: boolean;
 };
 
 const TaxResidenceField = ({
@@ -24,6 +26,7 @@ const TaxResidenceField = ({
     setIsTinPopoverOpen,
     is_tax_residence_popover_open,
     disabled,
+    fieldFocused,
 }: TTaxResidenceFieldProps) => {
     const { data: residence_list } = useResidenceList();
     const { isDesktop } = useDevice();
@@ -51,6 +54,7 @@ const TaxResidenceField = ({
                             data-testid='tax_residence'
                             disabled={disabled}
                             required={required}
+                            className={clsx({ 'focus-field': fieldFocused })}
                         />
                     ) : (
                         <SelectNative
@@ -69,6 +73,7 @@ const TaxResidenceField = ({
                             required={required}
                             data_testid='tax_residence_mobile'
                             disabled={disabled}
+                            className={clsx({ 'focus-field': fieldFocused })}
                         />
                     )}
                     <div
diff --git a/packages/account/src/Containers/employment-tax-details-container/employment-tax-details-container.tsx b/packages/account/src/Containers/employment-tax-details-container/employment-tax-details-container.tsx
@@ -22,6 +22,7 @@ type TEmploymentTaxDetailsContainerProps = {
     handleChange: (value: string) => void;
     tin_validation_config: TinValidations;
     id?: string;
+    should_focus_fields?: boolean;
 };
 
 const EmploymentTaxDetailsContainer = observer(
@@ -31,12 +32,15 @@ const EmploymentTaxDetailsContainer = observer(
         should_display_long_message,
         tin_validation_config,
         handleChange,
+        should_focus_fields,
     }: TEmploymentTaxDetailsContainerProps) => {
         const { values, setFieldValue, touched, errors, setValues } = useFormikContext<FormikValues>();
         const { isDesktop } = useDevice();
         const { data: residence_list } = useResidenceList();
         const { client } = useStore();
 
+        const { is_virtual, account_settings } = client;
+
         const [is_tax_residence_popover_open, setIsTaxResidencePopoverOpen] = useState(false);
         const [is_tin_popover_open, setIsTinPopoverOpen] = useState(false);
 
@@ -117,22 +121,26 @@ const EmploymentTaxDetailsContainer = observer(
 
         const { tin_employment_status_bypass } = tin_validation_config;
 
-        const is_tin_required = !client.is_virtual && !tin_employment_status_bypass?.includes(values.employment_status);
+        const is_tin_required = !is_virtual && !tin_employment_status_bypass?.includes(values.employment_status);
 
         const should_show_no_tax_details_checkbox =
             (tin_employment_status_bypass?.includes(values.employment_status) && !!values.tax_residence) ||
             Boolean(values.tin_skipped);
 
         const should_show_tax_confirm_checkbox =
-            !client.account_settings.tax_identification_number || touched.tax_identification_number;
+            !account_settings.tax_identification_number || touched.tax_identification_number;
 
         const isFieldDisabled = (field_name: string) => isFieldImmutable(field_name, editable_fields);
 
         return (
             <div id={'employment-tax-section'}>
-                <EmploymentStatusField required is_disabled={isFieldDisabled('employment_status')} />
+                <EmploymentStatusField
+                    required
+                    is_disabled={isFieldDisabled('employment_status')}
+                    fieldFocused={should_focus_fields && !account_settings.employment_status}
+                />
 
-                {!client.account_settings.tax_identification_number && should_show_no_tax_details_checkbox && (
+                {!account_settings.tax_identification_number && should_show_no_tax_details_checkbox && (
                     <Checkbox
                         name='tin_skipped'
                         className='employment_tax_detail_field-checkbox'
@@ -164,6 +172,9 @@ const EmploymentTaxDetailsContainer = observer(
                         setIsTaxResidencePopoverOpen={setIsTaxResidencePopoverOpen}
                         setIsTinPopoverOpen={setIsTinPopoverOpen}
                         required={(should_display_long_message && !values.tin_skipped) || is_tin_required}
+                        fieldFocused={
+                            should_focus_fields && (!account_settings.tax_residence || !account_settings.residence)
+                        }
                     />
                 </div>
                 <div ref={tin_ref} className='account-form__fieldset'>
@@ -173,6 +184,12 @@ const EmploymentTaxDetailsContainer = observer(
                         setIsTinPopoverOpen={setIsTinPopoverOpen}
                         setIsTaxResidencePopoverOpen={setIsTaxResidencePopoverOpen}
                         required={(should_display_long_message && !values.tin_skipped) || is_tin_required}
+                        fieldFocused={
+                            should_focus_fields &&
+                            values.employment_status &&
+                            !values.tin_skipped &&
+                            (should_display_long_message || is_tin_required)
+                        }
                     />
                 </div>
                 {should_show_tax_confirm_checkbox && (
diff --git a/packages/account/src/Sections/Assessment/FinancialAssessment/NavigateToPersonalDetails.tsx b/packages/account/src/Sections/Assessment/FinancialAssessment/NavigateToPersonalDetails.tsx
@@ -0,0 +1,74 @@
+import { Button, Text } from '@deriv/components';
+import { Localize, useTranslations } from '@deriv-com/translations';
+import { useDevice } from '@deriv-com/ui';
+import { useHistory } from 'react-router';
+import { routes } from '@deriv/shared';
+import FormFooter from '../../../Components/form-footer';
+import { DerivLightOrdersDefaultIcon } from '@deriv/quill-icons';
+import { observer, useStore } from '@deriv/stores';
+import './navigate-to-personal-details.scss';
+
+const NavigateToPersonalDetails = observer(() => {
+    const { localize } = useTranslations();
+    const { isDesktop } = useDevice();
+    const { ui, client } = useStore();
+    const history = useHistory();
+
+    const { account_settings } = client;
+
+    const handleOnclick = () => {
+        let field_to_scroll;
+
+        if (!account_settings.account_opening_reason) {
+            field_to_scroll = 'account-opening-reason';
+        } else {
+            field_to_scroll = 'employment-tax-section';
+        }
+
+        ui.setFieldRefToFocus(field_to_scroll);
+        history.push(routes.personal_details);
+    };
+
+    const icon_size = isDesktop ? { height: '200px', width: '200px' } : { height: '124px', width: '124px' };
+
+    return (
+        <div className='navigate-to-personal-details'>
+            <div className='navigate-to-personal-details__body'>
+                <DerivLightOrdersDefaultIcon {...icon_size} />
+                <Text
+                    as='p'
+                    size={isDesktop ? 'sm' : 's'}
+                    className='navigate-to-personal-details__body--text'
+                    align='center'
+                >
+                    <Localize i18n_default_text='Update your personal details in account settings before starting your financial assessment.' />
+                </Text>
+            </div>
+            {isDesktop ? (
+                <div className='navigate-to-personal-details__footer'>
+                    <Button
+                        type='button'
+                        has_effect
+                        text={localize('Update now')}
+                        primary
+                        large
+                        onClick={handleOnclick}
+                    />
+                </div>
+            ) : (
+                <FormFooter className='navigate-to-personal-details__footer--layout'>
+                    <Button
+                        onClick={handleOnclick}
+                        has_effect
+                        is_loading={false}
+                        text={localize('Update now')}
+                        large
+                        primary
+                    />
+                </FormFooter>
+            )}
+        </div>
+    );
+});
+
+export default NavigateToPersonalDetails;
diff --git a/packages/account/src/Sections/Assessment/FinancialAssessment/financial-assessment.tsx b/packages/account/src/Sections/Assessment/FinancialAssessment/financial-assessment.tsx
@@ -40,6 +40,7 @@ import { getFormattedOccupationList } from 'Configs/financial-details-config';
 import { TFinancialInformationForm } from 'Types';
 import { EmploymentStatusField } from 'Components/forms/form-fields';
 import { useDevice } from '@deriv-com/ui';
+import NavigateToPersonalDetails from './NavigateToPersonalDetails';
 
 type TConfirmationPage = {
     toggleModal: (prop: boolean) => void;
@@ -194,6 +195,7 @@ const FinancialAssessment = observer(() => {
         updateAccountStatus,
         is_authentication_needed,
         is_financial_information_incomplete,
+        account_settings,
     } = client;
     const { isMobile, isTablet, isDesktop } = useDevice();
     const { platform, routeBackInApp } = common;
@@ -390,6 +392,15 @@ const FinancialAssessment = observer(() => {
         return form_data;
     };
 
+    if (
+        !employment_status ||
+        !account_settings.account_opening_reason ||
+        !account_settings.tax_residence ||
+        !account_settings.tax_identification_number
+    ) {
+        return <NavigateToPersonalDetails />;
+    }
+
     return (
         <Formik initialValues={setInitialFormData()} enableReinitialize validate={validateFields} onSubmit={onSubmit}>
             {({
diff --git a/packages/account/src/Sections/Assessment/FinancialAssessment/navigate-to-personal-details.scss b/packages/account/src/Sections/Assessment/FinancialAssessment/navigate-to-personal-details.scss
@@ -0,0 +1,53 @@
+.navigate-to-personal-details {
+    display: flex;
+    flex-direction: column;
+
+    @include desktop-screen {
+        position: relative;
+        top: 10%;
+        row-gap: 2.6rem;
+        width: 50%;
+        height: 100%;
+        align-self: center;
+    }
+
+    &__body {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        @include mobile-or-tablet-screen {
+            margin-top: 45%;
+        }
+
+        &--text {
+            @include desktop-screen {
+                line-height: 3rem;
+            }
+
+            @include mobile-or-tablet-screen {
+                line-height: 2.4rem;
+                padding: 0 3.2rem;
+            }
+        }
+
+        @include desktop-screen {
+            row-gap: 2.6rem;
+        }
+
+        @include mobile-or-tablet-screen {
+            row-gap: 1.6rem;
+            flex-grow: 1;
+        }
+    }
+
+    &__footer {
+        width: 100%;
+        display: flex;
+        justify-content: center;
+
+        &--layout {
+            padding: 1.6rem;
+        }
+    }
+}
diff --git a/packages/account/src/Sections/Profile/PersonalDetails/personal-details-form.tsx b/packages/account/src/Sections/Profile/PersonalDetails/personal-details-form.tsx
@@ -439,7 +439,10 @@ const PersonalDetailsForm = observer(() => {
                                                 Boolean(account_settings?.account_opening_reason)
                                             }
                                             required
-                                            fieldFocused={field_ref_to_focus === 'account-opening-reason'}
+                                            fieldFocused={
+                                                !account_settings.account_opening_reason &&
+                                                field_ref_to_focus === 'account-opening-reason'
+                                            }
                                         />
                                     </Fragment>
                                 )}
@@ -452,6 +455,7 @@ const PersonalDetailsForm = observer(() => {
                                             handleChange={mutate}
                                             tin_validation_config={tin_validation_config}
                                             should_display_long_message={is_mf_account}
+                                            should_focus_fields={field_ref_to_focus === 'employment-tax-section'}
                                         />
                                         {!is_virtual && (
                                             <Fragment>
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -114,7 +114,7 @@
         "@deriv/hooks": "^1.0.0",
         "@deriv/p2p": "^0.7.3",
         "@deriv/quill-design": "^1.3.2",
-       "@deriv/quill-icons": "2.1.0",
+        "@deriv/quill-icons": "2.1.0",
         "@deriv/reports": "^1.0.0",
         "@deriv/shared": "^1.0.0",
         "@deriv/stores": "^1.0.0",
