[COJ]/Amina/COJ-445/feat: add confirmation checkbox for spanish resid…

…ents (deriv-com#13114) * fix: checkbox for spanish residents * feat: add testcase for checkox * feat: add testcase for checkox * fix: style for checkbox * fix: delete form value * fix: form value * fix: stylelint fix * fix: test case * fix: spain * fix: hooks * fix: test * refactor: refactors hook for account_opening_signup_declaration_required * fix: removes api package usage * docs: adds temporary type * fix: fixes minor issue * test: updates test * fix: change flag based on BE * fix: text size --------- Co-authored-by: Shaheer <[email protected]> Co-authored-by: Shaheer <[email protected]>
niloofar-deriv · Mar 15, 2024 · f80071b · f80071b
1 parent 5459c3f
commit f80071b
Show file tree

Hide file tree

Showing 11 changed files with 333 additions and 122 deletions.
diff --git a/packages/account/src/Components/terms-of-use/__tests__/terms-of-use.spec.tsx b/packages/account/src/Components/terms-of-use/__tests__/terms-of-use.spec.tsx
@@ -2,6 +2,8 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { isDesktop, isMobile } from '@deriv/shared';
+import { useResidenceSelfDeclaration } from '@deriv/hooks';
+
 import TermsOfUse from '../terms-of-use';
 
 jest.mock('@deriv/shared', () => ({
@@ -10,6 +12,15 @@ jest.mock('@deriv/shared', () => ({
     isMobile: jest.fn(() => false),
 }));
 
+jest.mock('@deriv/hooks', () => {
+    return {
+        ...jest.requireActual('@deriv/hooks'),
+        useResidenceSelfDeclaration: jest.fn(() => ({
+            is_residence_self_declaration_required: true,
+        })),
+    };
+});
+
 describe('<TermsOfUse/>', () => {
     const agree_check = /i agree to the/i;
     const law_title = 'Jurisdiction and choice of law';
@@ -30,8 +41,10 @@ describe('<TermsOfUse/>', () => {
         goToPreviousStep: jest.fn(),
         onCancel: jest.fn(),
         onSubmit: jest.fn(),
+        onSave: jest.fn(),
         real_account_signup_target: 'svg',
         value: { agreed_tos: false, agreed_tnc: false },
+        residence: 'id',
     };
 
     const commonFieldsCheck = () => {
@@ -109,4 +122,69 @@ describe('<TermsOfUse/>', () => {
         expect(el_fatca_accept).toBeInTheDocument();
         expect(el_fatca_reject).toBeInTheDocument();
     });
+
+    it('should render TermsOfUse component with spain residence confirmation checkbox if residence is spain', () => {
+        (isMobile as jest.Mock).mockReturnValue(true);
+        (isDesktop as jest.Mock).mockReturnValue(false);
+
+        mock_props.real_account_signup_target = 'maltainvest';
+        mock_props.residence = 'es';
+
+        render(<TermsOfUse {...mock_props} />);
+
+        commonFieldsCheck();
+        expect(
+            screen.getByText(
+                'I hereby confirm that my request for opening an account with Deriv Investments (Europe) Ltd is made on my own initiative.'
+            )
+        ).toBeInTheDocument();
+    });
+
+    it('should enable add account button only if spain residence confirmation checkbox is checked for spain clients', () => {
+        mock_props.residence = 'es';
+        mock_props.value = { ...mock_props.value, fatca_declaration: '1' };
+
+        render(<TermsOfUse {...mock_props} />);
+        const pep_checkbox = screen.getByRole('checkbox', {
+            name: 'I am not a PEP, and I have not been a PEP in the last 12 months.',
+        });
+        const terms_and_condition_checkbox = screen.getByRole('checkbox', {
+            name: 'I agree to the terms and conditions .',
+        });
+        const spain_checkbox = screen.getByRole('checkbox', {
+            name: 'I hereby confirm that my request for opening an account with Deriv Investments (Europe) Ltd is made on my own initiative.',
+        });
+        const add_btn = screen.getByRole('button', { name: /add account/i });
+
+        commonFieldsCheck();
+        expect(add_btn).toBeDisabled();
+
+        userEvent.click(pep_checkbox);
+        userEvent.click(terms_and_condition_checkbox);
+
+        expect(
+            screen.getByText(
+                'I hereby confirm that my request for opening an account with Deriv Investments (Europe) Ltd is made on my own initiative.'
+            )
+        ).toBeInTheDocument();
+        expect(spain_checkbox).toBeInTheDocument();
+        userEvent.click(spain_checkbox);
+        expect(spain_checkbox).toBeChecked();
+        expect(add_btn).toBeEnabled();
+    });
+
+    it('should not display spain residence confirmation checkbox if residence is indonesia', () => {
+        (isMobile as jest.Mock).mockReturnValue(true);
+        (isDesktop as jest.Mock).mockReturnValue(false);
+
+        (useResidenceSelfDeclaration as jest.Mock).mockReturnValue(false);
+        render(<TermsOfUse {...mock_props} />);
+
+        commonFieldsCheck();
+        expect(
+            screen.queryByText(
+                'I hereby confirm that my request for opening an account with Deriv Investments (Europe) Ltd is made on my own initiative.'
+            )
+        ).not.toBeInTheDocument();
+    });
 });
diff --git a/packages/account/src/Components/terms-of-use/terms-of-use.scss b/packages/account/src/Components/terms-of-use/terms-of-use.scss
@@ -13,7 +13,9 @@
 
     &__checkbox {
         margin-top: 1.6rem;
-
+        .dc-checkbox {
+            align-items: unset;
+        }
         &:last-of-type {
             margin-bottom: 5rem;
         }
@@ -48,12 +50,12 @@
 
     @include mobile {
         & .dc-checkbox__box {
-            width: 2.4rem;
-            height: 2.4rem;
+            width: 1.6rem;
+            height: 1.6rem;
 
             .dc-icon {
-                width: 2.4rem;
-                height: 2.4rem;
+                width: 1.6rem;
+                height: 1.6rem;
             }
         }
     }