feat: added FATCA declaration section

packages/account/src/Components/terms-of-use/__tests__/terms-of-use.spec.tsx

@@ -1,5 +1,6 @@
 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 TermsOfUse from '../terms-of-use';
 
@@ -85,4 +86,27 @@ describe('<TermsOfUse/>', () => {
         const add_btn = screen.getByRole('button', { name: /add account/i });
         expect(add_btn).toBeInTheDocument();
     });
+
+    it('should render FATCA declaration for accounts', () => {
+        render(<TermsOfUse {...mock_props} />);
+
+        const fatca_declaration = screen.getByText(/fatca declaration/i);
+        expect(fatca_declaration).toBeInTheDocument();
+
+        const fatca_declaration_points = screen.getAllByRole('listitem');
+        expect(fatca_declaration_points).toHaveLength(6);
+    });
+
+    it('should allow users to accept or reject FATCA declaration ', () => {
+        render(<TermsOfUse {...mock_props} />);
+        const el_fatca_form = screen.getByText('Please select');
+
+        userEvent.click(el_fatca_form);
+
+        const el_fatca_accept = screen.getByText('Yes');
+        const el_fatca_reject = screen.getByText('No');
+
+        expect(el_fatca_accept).toBeInTheDocument();
+        expect(el_fatca_reject).toBeInTheDocument();
+    });
 });

packages/account/src/Components/terms-of-use/fatca-declaration.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { FieldInputProps } from 'formik';
+import { Text, Dropdown } from '@deriv/components';
+import { isDesktop } from '@deriv/shared';
+import { Localize, localize } from '@deriv/translations';
+import { getFatcaDeclaration, getAgreementOptions } from '../../Constants/fatca-declaration';
+import './terms-of-use.scss';
+
+type TFATCADeclarationProps = {
+    field: FieldInputProps<'0' | '1'>;
+} & React.ComponentPropsWithoutRef<typeof Dropdown>;
+
+/**
+ * Component that displays the FATCA declaration and a dropdown to select yes or no
+ * @name FatcaDeclaration
+ * @param field - Formik FieldInputProps
+ * @returns React Component
+ */
+const FatcaDeclaration = ({ field: { value, onChange, name }, ...props }: TFATCADeclarationProps) => (
+    <React.Fragment>
+        <Text as='h4' size='xs' weight='bold'>
+            <Localize i18n_default_text='FATCA declaration' />
+        </Text>
+        <div className='fatca-declaration__layout'>
+            <ol>
+                {getFatcaDeclaration().map((item, idx) => (
+                    <Text
+                        as='li'
+                        key={`point_${idx}`}
+                        size={isDesktop() ? 'xs' : 'xxs'}
+                        className='fatca-declaration__points'
+                    >
+                        {idx + 1}. {item}
+                    </Text>
+                ))}
+            </ol>
+            <Text as='p' size={isDesktop() ? 'xs' : 'xxs'} className='fatca-declaration__points'>
+                <Localize
+                    i18n_default_text='If any of the above applies to you, select <0>Yes.</0> Otherwise, select <0>No.</0>'
+                    components={[<strong key={0} />]}
+                />
+            </Text>
+            <Dropdown
+                {...props}
+                is_align_text_left
+                name={name}
+                placeholder={localize('Please select')}
+                value={value}
+                list={getAgreementOptions()}
+                className='fatca-declaration__agreement'
+                onChange={onChange}
+            />
+        </div>
+    </React.Fragment>
+);
+
+export default FatcaDeclaration;

packages/account/src/Components/terms-of-use/terms-of-use-messages.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Text } from '@deriv/components';
-import { getLegalEntityName, Jurisdiction, TBrokerCodes } from '@deriv/shared';
+import { getLegalEntityName, isDesktop, Jurisdiction, TBrokerCodes } from '@deriv/shared';
 import { Localize } from '@deriv/translations';
 
 /**
@@ -22,7 +22,7 @@ export const BrokerSpecificMessage = ({ target }: { target: TBrokerCodes }) => (
         <Text as='h4' size='xs' weight='bold'>
             <Localize i18n_default_text='Jurisdiction and choice of law' />
         </Text>
-        <Text as='p'>
+        <Text as='p' size={isDesktop() ? 'xs' : 'xxs'}>
             {target === Jurisdiction.SVG ? (
                 <Localize
                     i18n_default_text='Your account will be opened with {{legal_entity_name}}, and will be subject to the laws of Saint Vincent and the Grenadines.'
@@ -43,7 +43,7 @@ export const BrokerSpecificMessage = ({ target }: { target: TBrokerCodes }) => (
         <Text as='h4' size='xs' weight='bold'>
             <Localize i18n_default_text='Risk warning' />
         </Text>
-        <Text as='p'>
+        <Text as='p' size={isDesktop() ? 'xs' : 'xxs'}>
             <Localize i18n_default_text='The financial trading services offered on this site are only suitable for customers who accept the possibility of losing all the money they invest and who understand and have experience of the risk involved in the purchase of financial contracts. Transactions in financial contracts carry a high degree of risk. If the contracts you purchased expire as worthless, you will lose all your investment, which includes the contract premium.' />
         </Text>
         {target === Jurisdiction.MALTA_INVEST && (
@@ -52,7 +52,7 @@ export const BrokerSpecificMessage = ({ target }: { target: TBrokerCodes }) => (
                 <Text as='h4' size='xs' weight='bold'>
                     <Localize i18n_default_text='Trading accounts and funds' />
                 </Text>
-                <Text as='p'>
+                <Text as='p' size={isDesktop() ? 'xs' : 'xxs'}>
                     <Localize i18n_default_text="You acknowledge that, subject to the Company's discretion, applicable regulations, and internal checks being fulfilled, we will open an account for you and allow you to deposit funds during the client acceptance procedure. However, until the verification of your account is completed, you will not be able to trade, withdraw or make further deposits. If you do not provide relevant documents within 30-days, we will refund the deposited amount through the same payment method you used to deposit." />
                 </Text>
             </React.Fragment>
@@ -70,8 +70,8 @@ export const SharedMessage = () => (
         <Text as='h4' size='xs' weight='bold'>
             <Localize i18n_default_text='Real accounts are not available to politically exposed persons (PEPs).' />
         </Text>
-        <p>
+        <Text as='p' size={isDesktop() ? 'xs' : 'xxs'}>
             <Localize i18n_default_text='A politically exposed person (PEP) is someone appointed with a prominent public position. Close associates and family members of a PEP are also considered to be PEPs.' />
-        </p>
+        </Text>
     </React.Fragment>
 );

packages/account/src/Components/terms-of-use/terms-of-use.scss

@@ -18,6 +18,7 @@
             margin-bottom: 5rem;
         }
     }
+
     &__hr {
         height: 2px;
         margin: 1.6rem 0 0;
@@ -30,18 +31,21 @@
             width: 100%;
         }
     }
+
     h4 {
         margin: 1rem 0;
         text-transform: none;
     }
+
     p {
-        @include typeface(--paragraph-left-normal-black);
         text-transform: none;
         color: var(--text-general);
     }
+
     input {
         display: none;
     }
+
     @include mobile {
         & .dc-checkbox__box {
             width: 2.4rem;
@@ -54,3 +58,27 @@
         }
     }
 }
+
+.fatca-declaration {
+    &__layout {
+        display: flex;
+        gap: 1.6rem;
+        flex-direction: column;
+    }
+
+    &__points {
+        line-height: 2rem !important;
+
+        @include mobile {
+            line-height: 1.8rem !important;
+        }
+    }
+
+    &__agreement {
+        width: 32.8rem !important;
+
+        .dc-dropdown__container {
+            margin-bottom: 2rem;
+        }
+    }
+}

packages/account/src/Components/terms-of-use/terms-of-use.tsx

@@ -14,10 +14,12 @@ import { localize, Localize } from '@deriv/translations';
 import CheckboxField from './checkbox-field';
 import { SharedMessage, BrokerSpecificMessage, Hr } from './terms-of-use-messages';
 import './terms-of-use.scss';
+import FatcaDeclaration from './fatca-declaration';
 
 type TTermsOfUseFormProps = {
     agreed_tos: boolean;
     agreed_tnc: boolean;
+    fatca_declaration: '0' | '1';
 };
 
 type TTermsOfUseProps = {
@@ -94,7 +96,10 @@ const TermsOfUse = ({
                                     <div className={className('details-form__elements', 'terms-of-use')}>
                                         <BrokerSpecificMessage target={real_account_signup_target} />
                                         <Hr />
+                                        <Field component={FatcaDeclaration} name='fatca_declaration' />
+                                        <Hr />
                                         <SharedMessage />
+                                        <Hr />
                                         <Field
                                             component={CheckboxField}
                                             className='terms-of-use__checkbox'
@@ -103,10 +108,12 @@ const TermsOfUse = ({
                                             label={localize(
                                                 'I am not a PEP, and I have not been a PEP in the last 12 months.'
                                             )}
+                                            label_font_size={isDesktop() ? 'xs' : 'xxs'}
                                         />
                                         <Hr />
                                         <Field
                                             component={CheckboxField}
+                                            label_font_size={isDesktop() ? 'xs' : 'xxs'}
                                             className='terms-of-use__checkbox'
                                             name='agreed_tnc'
                                             id='agreed_tnc'
@@ -128,7 +135,12 @@ const TermsOfUse = ({
                             </Div100vhContainer>
                             <Modal.Footer has_separator is_bypassed={isMobile()}>
                                 <FormSubmitButton
-                                    is_disabled={isSubmitting || !values.agreed_tos || !values.agreed_tnc}
+                                    is_disabled={
+                                        isSubmitting ||
+                                        !values.agreed_tos ||
+                                        !values.agreed_tnc ||
+                                        !values.fatca_declaration
+                                    }
                                     label={getSubmitButtonLabel()}
                                     has_cancel
                                     is_absolute={isMobile()}

packages/account/src/Configs/terms-of-use-config.ts

@@ -11,6 +11,10 @@ const terms_of_use_config: TSchema = {
         supported_in: ['svg', 'maltainvest'],
         default_value: false,
     },
+    fatca_declaration: {
+        supported_in: ['svg', 'maltainvest'],
+        default_value: '',
+    },
 };
 
 const termsOfUseConfig = (

packages/account/src/Constants/fatca-declaration.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Localize, localize } from '@deriv/translations';
+
+export const getFatcaDeclaration = () => [
+    <Localize i18n_default_text='US citizenship or lawful permanent resident (green card) status' key='1' />,
+    <Localize i18n_default_text='A US birthplace' key='2' />,
+    <Localize
+        i18n_default_text='A US residence address or a US correspondence address (including a US PO box)'
+        key='3'
+    />,
+    <Localize
+        i18n_default_text='Standing instructions to transfer funds to an account maintained in the United States, or directions regularly received from a US address'
+        key='4'
+    />,
+    <Localize
+        i18n_default_text='An “in care of” address or a “hold mail” address that is the sole address with respect to the client'
+        key='5'
+    />,
+    <Localize
+        i18n_default_text='A power of attorney or signatory authority granted to a person with a US address.'
+        key='6'
+    />,
+];
+
+export const getAgreementOptions = () => [
+    { text: localize('Yes'), value: '1' },
+    { text: localize('No'), value: '0' },
+];