[COJ] WALL-2735 / CRS confirmation on real account creation (deriv-co…

…m#12499) * chore: crs confirmation checkbox in real account creation * chore: crs confirmation checkbox in real account creation * chore: crs confirmation in mt5 account creation for non-npj countries * chore: reset css for crs checkbox
heorhi-deriv · Jan 5, 2024 · e64ad9e · e64ad9e
1 parent 6278f1c
commit e64ad9e
Show file tree

Hide file tree

Showing 6 changed files with 88 additions and 1 deletion.
diff --git a/packages/account/src/Components/forms/__tests__/personal-details-form.spec.tsx b/packages/account/src/Components/forms/__tests__/personal-details-form.spec.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Formik } from 'formik';
 
-import { render, screen } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import PersonalDetailsForm from '../personal-details-form';
@@ -52,4 +52,22 @@ describe('PersonalDetailsForm', () => {
         expect(mr_radio_input).not.toBeChecked();
         expect(ms_radio_input).toBeChecked();
     });
+
+    it('should display crs confirmation checkbox if tax residence & tin fields are filled', () => {
+        render(
+            <Formik
+                initialValues={{ tax_residence: '', tax_identification_number: '', crs_confirmation: false }}
+                onSubmit={jest.fn()}
+            >
+                <PersonalDetailsForm is_svg />
+            </Formik>
+        );
+
+        fireEvent.change(screen.getByTestId('tax_residence'), { target: { value: 'Afghanistan' } });
+        fireEvent.change(screen.getByTestId('tax_identification_number'), { target: { value: '1234567890' } });
+
+        expect(
+            screen.queryByLabelText(/i confirm that my tax information is accurate and complete/i)
+        ).toBeInTheDocument();
+    });
 });
diff --git a/packages/account/src/Components/forms/personal-details-form.jsx b/packages/account/src/Components/forms/personal-details-form.jsx
@@ -593,6 +593,21 @@ const PersonalDetailsForm = props => {
                                 required
                             />
                         )}
+                        {values?.tax_residence && values?.tax_identification_number && (
+                            <Checkbox
+                                name='crs_confirmation'
+                                value={values?.crs_confirmation}
+                                label={
+                                    <Localize i18n_default_text='I confirm that my tax information is accurate and complete.' />
+                                }
+                                label_font_size={isMobile() ? 'xxs' : 'xs'}
+                                onChange={e => {
+                                    setFieldValue('crs_confirmation', e.target.checked, true);
+                                    setFieldTouched('crs_confirmation', true);
+                                }}
+                                has_error={!!(touched?.crs_confirmation && errors?.crs_confirmation)}
+                            />
+                        )}
                     </React.Fragment>
                 </div>
             )}

diff --git a/packages/account/src/Configs/personal-details-config.ts b/packages/account/src/Configs/personal-details-config.ts
@@ -190,6 +190,24 @@ export const personal_details_config = ({
             supported_in: ['svg'],
             rules: [],
         },
+        crs_confirmation: {
+            default_value: false,
+            supported_in: ['svg'],
+            rules: [
+                [
+                    (
+                        value: string,
+                        options: Record<string, unknown>,
+                        { tax_identification_number }: { tax_identification_number: string }
+                    ) => {
+                        // need the confirmation in case of both Tax residence and TIN are available
+                        // only checking for TIN as we already have a rule for Tax residence to be filled if TIN field is filled
+                        return tax_identification_number ? value : true;
+                    },
+                    localize('CRS confirmation is required.'),
+                ],
+            ],
+        },
     };
 
     // Need to check if client is high risk (only have SVG i.e. China & Russia)

diff --git a/packages/cfd/src/Components/__tests__/cfd-personal-details-form.spec.js b/packages/cfd/src/Components/__tests__/cfd-personal-details-form.spec.js
@@ -255,6 +255,11 @@ describe('<CFDPersonalDetailsForm />', () => {
         const income_earning = within(screen.getByRole('list')).getByText('Income Earning');
         fireEvent.click(income_earning);
 
+        const crs_confirmation_checkbox = screen.getByRole('checkbox', {
+            name: /i confirm that my tax information is accurate and complete/i,
+        });
+        fireEvent.click(crs_confirmation_checkbox);
+
         await waitFor(() => {
             expect(screen.queryByText(citizenship_required_error)).not.toBeInTheDocument();
             expect(screen.queryByText(tax_residence_required_error)).not.toBeInTheDocument();

diff --git a/packages/cfd/src/Components/cfd-personal-details-form.tsx b/packages/cfd/src/Components/cfd-personal-details-form.tsx
@@ -16,6 +16,7 @@ import {
     SelectNative,
     Text,
     ThemedScrollbars,
+    Checkbox,
 } from '@deriv/components';
 import { isDeepEqual, isDesktop, isMobile } from '@deriv/shared';
 import { Localize, localize } from '@deriv/translations';
@@ -149,13 +150,15 @@ const validatePersonalDetails = ({
             (v: string) => (tin_regex ? tin_regex?.some(regex => v.match(regex)) : true),
             () => !!values.tax_residence,
         ];
+        validations.crs_confirmation = [(v: string) => !!v];
     }
     const mappedKey: { [key: string]: string } = {
         citizen: localize('Citizenship'),
         tax_residence: localize('Tax residence'),
         tax_identification_number: localize('Tax identification number'),
         account_opening_reason: localize('Account opening reason'),
         place_of_birth: localize('Place of birth'),
+        crs_confirmation: localize('CRS confirmation'),
     };
 
     const field_error_messages = (field_name: string): string[] => [
@@ -206,6 +209,10 @@ const submitForm: TSubmitForm = (values, actions, idx, onSubmit, is_dirty, resid
         place_of_birth_text: values.place_of_birth,
     });
 
+    if (values.crs_confirmation) {
+        delete values.crs_confirmation;
+    }
+
     const payload = {
         ...values,
         citizen: citizen?.value || '',
@@ -496,6 +503,29 @@ const CFDPersonalDetailsForm = ({
                                                     </React.Fragment>
                                                 )}
                                             </Field>
+                                            {is_tin_mandatory && values?.tax_identification_number && (
+                                                <Field name='crs_confirmation'>
+                                                    {({
+                                                        field,
+                                                        form: { handleBlur, setFieldValue },
+                                                        meta: { touched, error },
+                                                    }: FieldProps<boolean, TFormValues>) => (
+                                                        <Checkbox
+                                                            {...field}
+                                                            value={field.value}
+                                                            label={
+                                                                <Localize i18n_default_text='I confirm that my tax information is accurate and complete.' />
+                                                            }
+                                                            label_font_size={isMobile() ? 'xxs' : 'xs'}
+                                                            onChange={(e: React.FormEvent<HTMLInputElement>) =>
+                                                                setFieldValue(field.name, e.currentTarget.checked, true)
+                                                            }
+                                                            onBlur={handleBlur}
+                                                            has_error={!!(touched && error)}
+                                                        />
+                                                    )}
+                                                </Field>
+                                            )}
                                         </div>
                                     </ThemedScrollbars>
                                 </Div100vhContainer>

diff --git a/packages/core/src/App/Containers/RealAccountSignup/account-wizard.jsx b/packages/core/src/App/Containers/RealAccountSignup/account-wizard.jsx
@@ -275,6 +275,7 @@ const AccountWizard = observer(props => {
         delete clone?.agreed_tnc;
         delete clone?.agreed_tos;
         delete clone?.confirmation_checkbox;
+        delete clone?.crs_confirmation;
 
         // BE does not accept empty strings for TIN
         // so we remove it from the payload if it is empty in case of optional TIN field