Merge branch 'binary-com:master' into accounts_team/accounts_package_…

…ts_migration/sprint_6

__mocks__/globals.js

@@ -2,3 +2,9 @@
 jest.mock('copy-anything', () => ({
     copy: jest.fn(),
 }));
+
+const mock_onfido = {
+    init: jest.fn().mockResolvedValue({}),
+};
+
+window.Onfido = mock_onfido;

packages/account/package.json

@@ -44,7 +44,6 @@
         "js-cookie": "^2.2.1",
         "mobx": "^6.6.1",
         "mobx-react": "^7.5.1",
-        "onfido-sdk-ui": "^11.0.0",
         "prop-types": "^15.7.2",
         "qrcode.react": "^1.0.0",
         "react": "^17.0.2",

packages/account/src/Components/additional-kyc-info-modal/__test__/additional-kyc-info-form.spec.tsx

@@ -0,0 +1,134 @@
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import { StoreProvider, mockStore } from '@deriv/stores';
+import { AdditionalKycInfoForm } from '../additional-kyc-info-form';
+import userEvent from '@testing-library/user-event';
+import { useSettings } from '@deriv/api';
+
+jest.mock('@deriv/api', () => ({
+    ...jest.requireActual('@deriv/api'),
+    useSettings: jest.fn(),
+}));
+
+const mockedUseSettings = useSettings as jest.MockedFunction<typeof useSettings>;
+
+const mock_settings: ReturnType<typeof useSettings> = {
+    update: jest.fn(),
+    mutation: { isLoading: false, isSuccess: false, error: null, isError: false },
+    data: {
+        tax_identification_number: '',
+        tax_residence: '',
+        place_of_birth: '',
+        account_opening_reason: '',
+    },
+};
+
+jest.mock('@deriv/shared', () => ({
+    ...jest.requireActual('@deriv/shared'),
+    generateValidationFunction: jest.fn(),
+}));
+
+describe('AdditionalKycInfoForm', () => {
+    const setError = jest.fn();
+    const mock_store = mockStore({});
+
+    it('should render the form fields', () => {
+        mockedUseSettings.mockReturnValue(mock_settings);
+        render(
+            <StoreProvider store={mock_store}>
+                <AdditionalKycInfoForm setError={setError} />
+            </StoreProvider>
+        );
+
+        expect(screen.getByTestId('dt_place_of_birth')).toBeInTheDocument();
+        expect(screen.getByTestId('dt_tax_residence')).toBeInTheDocument();
+        expect(screen.getByTestId('dt_tax_identification_number')).toBeInTheDocument();
+        expect(screen.getByTestId('dt_account_opening_reason')).toBeInTheDocument();
+    });
+
+    it('should render loading state upon fetching data', () => {
+        mockedUseSettings.mockReturnValue({ ...mock_settings, isLoading: true });
+        render(
+            <StoreProvider store={mock_store}>
+                <AdditionalKycInfoForm setError={setError} />
+            </StoreProvider>
+        );
+
+        expect(screen.getByTestId('dt_initial_loader')).toBeInTheDocument();
+    });
+
+    it('should submit the form when all fields are valid', async () => {
+        mockedUseSettings.mockReturnValue(mock_settings);
+        render(
+            <StoreProvider store={mock_store}>
+                <AdditionalKycInfoForm setError={setError} />
+            </StoreProvider>
+        );
+
+        const submit_btn = screen.getByRole('button', { name: 'Submit' });
+
+        userEvent.type(screen.getByTestId('dt_place_of_birth'), 'Ghana');
+        userEvent.type(screen.getByTestId('dt_tax_residence'), 'Ghana');
+        userEvent.type(screen.getByTestId('dt_tax_identification_number'), 'GHA-000000000-0');
+        userEvent.type(screen.getByTestId('dt_account_opening_reason'), 'Speculative');
+
+        await waitFor(() => {
+            expect(submit_btn).toBeEnabled();
+        });
+        userEvent.click(screen.getByRole('button', { name: 'Submit' }));
+
+        expect(mockedUseSettings).toHaveBeenCalled();
+    });
+
+    it('should be able to submit the form without filling optional fields', async () => {
+        mockedUseSettings.mockReturnValue(mock_settings);
+        render(
+            <StoreProvider store={mock_store}>
+                <AdditionalKycInfoForm setError={setError} />
+            </StoreProvider>
+        );
+
+        const submit_btn = screen.getByRole('button', { name: 'Submit' });
+
+        userEvent.type(screen.getByTestId('dt_place_of_birth'), 'Ghana');
+        userEvent.type(screen.getByTestId('dt_account_opening_reason'), 'Speculative');
+
+        await waitFor(() => {
+            expect(submit_btn).toBeEnabled();
+        });
+        userEvent.click(screen.getByRole('button', { name: 'Submit' }));
+
+        expect(mockedUseSettings).toHaveBeenCalled();
+    });
+
+    it('should show an error message if form validation fails', async () => {
+        mockedUseSettings.mockReturnValue({
+            ...mock_settings,
+            mutation: {
+                ...mock_settings.mutation,
+                isError: true,
+                status: 'error',
+                error: {
+                    message: 'Invalid TIN format',
+                },
+            },
+        });
+        render(
+            <StoreProvider store={mock_store}>
+                <AdditionalKycInfoForm setError={setError} />
+            </StoreProvider>
+        );
+
+        const submit_btn = screen.getByRole('button', { name: 'Submit' });
+
+        userEvent.type(screen.getByTestId('dt_place_of_birth'), 'Ghana');
+        userEvent.type(screen.getByTestId('dt_tax_residence'), 'Ghana');
+        userEvent.type(screen.getByTestId('dt_tax_identification_number'), 'GHA-00000000');
+        userEvent.type(screen.getByTestId('dt_account_opening_reason'), 'Speculative');
+
+        userEvent.click(submit_btn);
+
+        expect(mockedUseSettings).toHaveBeenCalled();
+        expect(setError).toHaveBeenCalled();
+    });
+});

packages/account/src/Components/additional-kyc-info-modal/__test__/additional-kyc-info-modal.spec.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { StoreProvider, mockStore } from '@deriv/stores';
+import { AdditionalKycInfoModal } from '../additional-kyc-info-modal';
+
+jest.mock('../additional-kyc-info-form.tsx', () => jest.fn(() => <div>AdditionalKycInfoForm</div>));
+
+describe('AdditionalKycInfoModal', () => {
+    let modal_root_el: HTMLElement;
+    const mock_store = mockStore({
+        ui: {
+            is_additional_kyc_info_modal_open: true,
+            toggleAdditionalKycInfoModal: jest.fn(),
+        },
+    });
+
+    beforeAll(() => {
+        modal_root_el = document.createElement('div');
+        modal_root_el.setAttribute('id', 'modal_root');
+        document.body.appendChild(modal_root_el);
+    });
+
+    afterAll(() => {
+        document.body.removeChild(modal_root_el);
+    });
+
+    it('should render the modal when is_additional_kyc_info_modal_open is true', () => {
+        render(
+            <StoreProvider store={mock_store}>
+                <AdditionalKycInfoModal />
+            </StoreProvider>
+        );
+        expect(screen.getByText(/additional information required/i)).toBeInTheDocument();
+        expect(screen.getByText(/AdditionalKycInfoForm/i)).toBeInTheDocument();
+    });
+});

packages/account/src/Components/additional-kyc-info-modal/__test__/form-config.spec.tsx

@@ -0,0 +1,67 @@
+import { GetSettings, ResidenceList } from '@deriv/api-types';
+import { getFormFieldsConfig, getFormConfig, TFields } from '../form-config';
+
+const mockAccountSettings: GetSettings = {
+    immutable_fields: ['place_of_birth'],
+    place_of_birth: 'UK',
+    tax_residence: 'UK',
+    tax_identification_number: '12345',
+    account_opening_reason: 'Hedging',
+};
+
+const mockResidenceList: ResidenceList = [
+    { value: 'UK', text: 'United Kingdom' },
+    { value: 'US', text: 'United States' },
+];
+
+describe('getFormFieldsConfig', () => {
+    it('should return the correct form fields configuration', () => {
+        const requiredFields: TFields[] = ['place_of_birth', 'tax_residence'];
+        const config = getFormFieldsConfig(mockAccountSettings, mockResidenceList, requiredFields);
+
+        expect(config.place_of_birth.type).toBe('select');
+        expect(config.place_of_birth.initial_value).toBe('United Kingdom');
+        expect(config.place_of_birth.disabled).toBe(true);
+        expect(config.place_of_birth.required).toBe(true);
+
+        expect(config.tax_residence.type).toBe('select');
+        expect(config.tax_residence.initial_value).toBe('United Kingdom');
+        expect(config.tax_residence.disabled).toBe(false);
+        expect(config.tax_residence.required).toBe(true);
+    });
+});
+
+describe('getFormConfig', () => {
+    it('should return the correct form configuration', () => {
+        const requiredFields: TFields[] = ['place_of_birth', 'tax_residence'];
+        const formConfig = getFormConfig({
+            account_settings: mockAccountSettings,
+            residence_list: mockResidenceList,
+            required_fields: requiredFields,
+        });
+
+        expect(formConfig.fields.place_of_birth.disabled).toBe(true);
+        expect(formConfig.fields.place_of_birth.required).toBe(true);
+
+        expect(formConfig.fields.tax_residence.disabled).toBe(false);
+        expect(formConfig.fields.tax_residence.required).toBe(true);
+    });
+
+    it('should return the correct form configuration with input types', () => {
+        const requiredFields: TFields[] = ['place_of_birth', 'tax_residence'];
+        const formConfig = getFormConfig({
+            account_settings: { ...mockAccountSettings, immutable_fields: ['place_of_birth', 'tax_residence'] },
+            residence_list: mockResidenceList,
+            required_fields: requiredFields,
+            with_input_types: true,
+        });
+
+        expect(formConfig.fields.place_of_birth.type).toBe('select');
+        expect(formConfig.fields.place_of_birth.disabled).toBe(true);
+        expect(formConfig.fields.place_of_birth.required).toBe(true);
+
+        expect(formConfig.fields.tax_residence.type).toBe('select');
+        expect(formConfig.fields.tax_residence.disabled).toBe(true);
+        expect(formConfig.fields.tax_residence.required).toBe(true);
+    });
+});