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 index 484427549a90..8f7eae701080 100644 --- 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 @@ -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('', () => { const add_btn = screen.getByRole('button', { name: /add account/i }); expect(add_btn).toBeInTheDocument(); }); + + it('should render FATCA declaration for accounts', () => { + render(); + + 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(); + 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(); + }); }); diff --git a/packages/account/src/Components/terms-of-use/fatca-declaration.tsx b/packages/account/src/Components/terms-of-use/fatca-declaration.tsx new file mode 100644 index 000000000000..fabeb7796cfb --- /dev/null +++ b/packages/account/src/Components/terms-of-use/fatca-declaration.tsx @@ -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; + +/** + * 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) => ( + + + + +
+
    + {getFatcaDeclaration().map((item, idx) => ( + + {idx + 1}. {item} + + ))} +
+ + ]} + /> + + +
+
+); + +export default FatcaDeclaration; diff --git a/packages/account/src/Components/terms-of-use/terms-of-use-messages.tsx b/packages/account/src/Components/terms-of-use/terms-of-use-messages.tsx index 270c31c1da6d..523d95e02a9b 100644 --- a/packages/account/src/Components/terms-of-use/terms-of-use-messages.tsx +++ b/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 }) => ( - + {target === Jurisdiction.SVG ? ( ( - + {target === Jurisdiction.MALTA_INVEST && ( @@ -52,7 +52,7 @@ export const BrokerSpecificMessage = ({ target }: { target: TBrokerCodes }) => ( - + @@ -70,8 +70,8 @@ export const SharedMessage = () => ( -

+ -

+
); 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 index c3bd52949e20..8d5c40a18e18 100644 --- a/packages/account/src/Components/terms-of-use/terms-of-use.scss +++ b/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; + } + } +} \ No newline at end of file diff --git a/packages/account/src/Components/terms-of-use/terms-of-use.tsx b/packages/account/src/Components/terms-of-use/terms-of-use.tsx index 41d378f2f9f5..df0ba8f70cd8 100644 --- a/packages/account/src/Components/terms-of-use/terms-of-use.tsx +++ b/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 = { @@ -34,6 +36,7 @@ type TTermsOfUseProps = { value: TTermsOfUseFormProps; real_account_signup_target: TBrokerCodes; form_error?: string; + is_multi_account: boolean; }; /** @@ -94,7 +97,14 @@ const TermsOfUse = ({

+ +
+

({ + ...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(); + }); +}); diff --git a/packages/account/src/Configs/terms-of-use-config.ts b/packages/account/src/Configs/terms-of-use-config.ts index 7cdc490913e8..7c0101cdf334 100644 --- a/packages/account/src/Configs/terms-of-use-config.ts +++ b/packages/account/src/Configs/terms-of-use-config.ts @@ -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) => ({ agreed_tos: { supported_in: ['svg', 'maltainvest'], default_value: false, @@ -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', }; diff --git a/packages/account/src/Constants/fatca-declaration.tsx b/packages/account/src/Constants/fatca-declaration.tsx new file mode 100644 index 000000000000..7948ec8ea45c --- /dev/null +++ b/packages/account/src/Constants/fatca-declaration.tsx @@ -0,0 +1,28 @@ +import React from 'react'; +import { Localize, localize } from '@deriv/translations'; + +export const getFatcaDeclaration = () => [ + , + , + , + , + , + , +]; + +export const getAgreementOptions = () => [ + { text: localize('Yes'), value: '1' }, + { text: localize('No'), value: '0' }, +];