Skip to content

Commit

Permalink
feat: added FATCA declaration section (#12490)
Browse files Browse the repository at this point in the history
* feat: added FATCA declaration section

* feat: added testcases

* chore: rebuild

* chore: rebuild

* chore: rebuild

* chore: rebuild

* chore: rebuild 2

* chore: rebuild 3

* fix: incorporated review comments

* chore: made the field mandatory

* fix: added required field

* fix: failing testcase

* chore: setting fatca declaration value in DIEL

* fix: added testcase
  • Loading branch information
likhith-deriv authored Feb 29, 2024
1 parent 4df45d6 commit 9e78e2d
Show file tree
Hide file tree
Showing 8 changed files with 217 additions and 13 deletions.
Original file line number Diff line number Diff line change
@@ -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';

Expand Down Expand Up @@ -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();
});
});
59 changes: 59 additions & 0 deletions packages/account/src/Components/terms-of-use/fatca-declaration.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
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'>;
is_disabled: boolean;
} & 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}
disabled={props.is_disabled}
/>
</div>
</React.Fragment>
);

export default FatcaDeclaration;
Original file line number Diff line number Diff line change
@@ -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';

/**
Expand All @@ -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.'
Expand All @@ -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 && (
Expand All @@ -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>
Expand All @@ -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>
);
30 changes: 29 additions & 1 deletion packages/account/src/Components/terms-of-use/terms-of-use.scss
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
margin-bottom: 5rem;
}
}

&__hr {
height: 2px;
margin: 1.6rem 0 0;
Expand All @@ -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;
Expand All @@ -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;
}
}
}
19 changes: 18 additions & 1 deletion packages/account/src/Components/terms-of-use/terms-of-use.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand All @@ -35,6 +37,7 @@ type TTermsOfUseProps = {
value: TTermsOfUseFormProps;
real_account_signup_target: TBrokerCodes;
form_error?: string;
is_multi_account: boolean;
};

/**
Expand Down Expand Up @@ -103,7 +106,14 @@ const TermsOfUse = ({
<div className={className('details-form__elements', 'terms-of-use')}>
<BrokerSpecificMessage target={real_account_signup_target} />
<Hr />
<Field
component={FatcaDeclaration}
name='fatca_declaration'
is_disabled={props.is_multi_account}
/>
<Hr />
<SharedMessage />
<Hr />
<Field
component={CheckboxField}
className='terms-of-use__checkbox'
Expand All @@ -112,10 +122,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'
Expand All @@ -137,7 +149,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()}
Expand Down
36 changes: 36 additions & 0 deletions packages/account/src/Configs/__test__/terms-of-use-config.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
import termsOfUseConfig from '../terms-of-use-config';

jest.mock('@deriv/shared', () => ({
...jest.requireActual('@deriv/shared'),
getDefaultFields: jest.fn(),
}));

describe('terms-of-use-config', () => {
const MockComponent = jest.fn();

it('should set the is_multi_account value to true', () => {
const account_settings = {
fatca_declaration: 0,
};
const config = termsOfUseConfig(
{
real_account_signup_target: 'maltainvest',
account_settings,
},
MockComponent
);
expect(config.props.is_multi_account).toBeTruthy();
});

it('should set the is_multi_account value to false', () => {
const account_settings = {};
const config = termsOfUseConfig(
{
real_account_signup_target: 'maltainvest',
account_settings,
},
MockComponent
);
expect(config.props.is_multi_account).toBeFalsy();
});
});
22 changes: 17 additions & 5 deletions packages/account/src/Configs/terms-of-use-config.ts
Original file line number Diff line number Diff line change
@@ -1,8 +1,11 @@
import React from 'react';
import { getDefaultFields, isDesktop, TSchema } from '@deriv/shared';
import { getDefaultFields, isDesktop } from '@deriv/shared';
import { localize } from '@deriv/translations';
import { GetSettings } from '@deriv/api-types';

const terms_of_use_config: TSchema = {
type TTermsOfConfigSettings = GetSettings & { fatca_declaration: number };

const getTermsOfUseConfig = (account_settings: Partial<TTermsOfConfigSettings>) => ({
agreed_tos: {
supported_in: ['svg', 'maltainvest'],
default_value: false,
Expand All @@ -11,22 +14,31 @@ const terms_of_use_config: TSchema = {
supported_in: ['svg', 'maltainvest'],
default_value: false,
},
};
fatca_declaration: {
supported_in: ['svg', 'maltainvest'],
default_value: String(account_settings?.fatca_declaration ?? ''),
},
});

const termsOfUseConfig = (
{ real_account_signup_target }: { real_account_signup_target: string },
{
real_account_signup_target,
account_settings,
}: { real_account_signup_target: string; account_settings: TTermsOfConfigSettings },
TermsOfUse: React.Component
) => {
const active_title = localize('Terms of use');

return {
header: {
active_title: isDesktop() ? active_title : null,
title: active_title,
},
body: TermsOfUse,
form_value: getDefaultFields(real_account_signup_target, terms_of_use_config),
form_value: getDefaultFields(real_account_signup_target, getTermsOfUseConfig(account_settings)),
props: {
real_account_signup_target,
is_multi_account: Boolean(String(account_settings?.fatca_declaration ?? '')),
},
icon: 'IcDashboardTermsOfUse',
};
Expand Down
28 changes: 28 additions & 0 deletions packages/account/src/Constants/fatca-declaration.tsx
Original file line number Diff line number Diff line change
@@ -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' },
];

0 comments on commit 9e78e2d

Please sign in to comment.