Merge branch 'develop' of github.com:binary-com/deriv-app into kate/8…

…0180/Update_DP2P_content_on_cashier_page

package.json

@@ -28,6 +28,7 @@
         "@types/node": "^17.0.27",
         "@types/react": "^18.0.7",
         "@types/react-dom": "^18.0.0",
+        "@testing-library/user-event": "^13.5.0",
         "@types/react-router-dom": "^5.1.6",
         "@types/react-virtualized": "^9.21.21",
         "@typescript-eslint/eslint-plugin": "^5.8.0",
@@ -60,6 +61,9 @@
         "stylelint-no-unsupported-browser-features": "^4.0.0",
         "stylelint-selector-bem-pattern": "^2.1.0",
         "stylelint-webpack-plugin": "^2.1.1",
+        "@testing-library/jest-dom": "^5.12.0",
+        "jest-chain": "^1.1.5",
+        "jest-extended": "^1.2.0",
         "ts-jest": "^26.4.2"
     },
     "scripts": {
@@ -98,12 +102,9 @@
     },
     "dependencies": {
         "@babel/preset-typescript": "^7.16.5",
-        "@testing-library/jest-dom": "^5.12.0",
         "@types/react-transition-group": "^4.4.4",
         "babel-jest": "^27.3.1",
         "dotenv": "^8.2.0",
-        "jest-chain": "^1.1.5",
-        "jest-extended": "^1.2.0",
         "react": "^16.14.0",
         "react-dom": "^16.14.0",
         "typescript": "^4.6.3"

packages/account/package.json

@@ -53,6 +53,8 @@
         "@babel/preset-react": "^7.16.7",
         "@jest/globals": "^26.5.3",
         "@testing-library/react": "^12.0.0",
+        "@testing-library/user-event": "^13.5.0",
+        "babel-eslint": "^10.1.0",
         "@types/react": "^18.0.7",
         "@types/react-dom": "^18.0.0",
         "babel-loader": "^8.1.0",

packages/account/src/Components/poi/status/unsupported/card-details/uploader.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import classNames from 'classnames';
-import PropTypes, { string } from 'prop-types';
+import PropTypes from 'prop-types';
 import { Field } from 'formik';
 import { localize } from '@deriv/translations';
 import { isMobile, supported_filetypes, max_document_size } from '@deriv/shared';
@@ -151,7 +151,7 @@ const Uploader = ({ data, value, is_full, onChange, has_frame }) => {
 
 Uploader.propTypes = {
     data: PropTypes.object,
-    value: PropTypes.oneOfType([PropTypes.object, PropTypes, string]),
+    value: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
     is_full: PropTypes.bool,
     has_frame: PropTypes.bool,
     onChange: PropTypes.func,

packages/account/src/Components/poo/statuses/index.js

@@ -0,0 +1,6 @@
+import POONotRequired from './poo-not-required';
+import POOVerified from './poo-verified';
+import POORejetced from './poo-rejected';
+import POOSubmitted from './poo-submitted';
+
+export { POONotRequired, POOVerified, POORejetced, POOSubmitted };

packages/account/src/Components/poo/statuses/poo-not-required/index.js

@@ -0,0 +1,3 @@
+import { POONotRequired } from './not-required.jsx';
+
+export default POONotRequired;

packages/account/src/Components/poo/statuses/poo-not-required/not-required.jsx

@@ -0,0 +1,18 @@
+import { Icon } from '@deriv/components';
+import { localize } from '@deriv/translations';
+import React from 'react';
+import IconMessageContent from 'Components/icon-message-content';
+
+export const POONotRequired = () => {
+    return (
+        <div className='proof-of-ownership__container'>
+            <IconMessageContent
+                message={localize("Your proof of ownership isn't required.")}
+                text={localize(
+                    'You are not required to submit proof of ownership at this time. We will inform you if proof of ownership is required in the future.'
+                )}
+                icon={<Icon icon='IcPooVerified' size={128} />}
+            />
+        </div>
+    );
+};

packages/account/src/Components/poo/statuses/poo-rejected/index.js

@@ -0,0 +1,3 @@
+import { POORejetced } from './rejected.jsx';
+
+export default POORejetced;

packages/account/src/Components/poo/statuses/poo-rejected/rejected.jsx

@@ -0,0 +1,24 @@
+import { Button, Text, Icon } from '@deriv/components';
+import { localize } from '@deriv/translations';
+import React from 'react';
+
+export const POORejetced = ({ onTryAgain }) => {
+    return (
+        <div className='proof-of-ownership__container'>
+            <div className='proof-of-ownership__container--content'>
+                <Icon className='icon' icon='IcPooRejected' size={128} />
+                <Text weight='bold'>{localize('Proof of ownership verification failed')}</Text>
+                <Text size='xs'>{localize('We were unable to verify your proof of ownership.')}</Text>
+                <Button
+                    type='button'
+                    className='proof-of-ownership__try-again-button'
+                    onClick={onTryAgain}
+                    large
+                    text={localize('Try again')}
+                    primary
+                    data-testid='dt_try-again-button'
+                />
+            </div>
+        </div>
+    );
+};

packages/account/src/Components/poo/statuses/poo-submitted/index.js

@@ -0,0 +1,3 @@
+import { POOSubmitted } from './submitted.jsx';
+
+export default POOSubmitted;

packages/account/src/Components/poo/statuses/poo-submitted/submitted.jsx

@@ -0,0 +1,16 @@
+import { Icon } from '@deriv/components';
+import { localize } from '@deriv/translations';
+import React from 'react';
+import IconMessageContent from 'Components/icon-message-content';
+
+export const POOSubmitted = () => {
+    return (
+        <div className='proof-of-ownership__container'>
+            <IconMessageContent
+                message={localize('We’ve received your proof of ownership.')}
+                text={localize('We’ll review your documents and notify you of its status within 3 days.')}
+                icon={<Icon icon='IcPooSubmitted' size={128} />}
+            />
+        </div>
+    );
+};

packages/account/src/Components/poo/statuses/poo-verified/index.js

@@ -0,0 +1,3 @@
+import { POOVerified } from './verified.jsx';
+
+export default POOVerified;

packages/account/src/Components/poo/statuses/poo-verified/verified.jsx

@@ -0,0 +1,15 @@
+import { Icon } from '@deriv/components';
+import { localize } from '@deriv/translations';
+import React from 'react';
+import IconMessageContent from 'Components/icon-message-content';
+
+export const POOVerified = () => {
+    return (
+        <div className='proof-of-ownership__container'>
+            <IconMessageContent
+                message={localize('Proof of ownership verification passed.')}
+                icon={<Icon icon='IcPooVerified' size={128} />}
+            />
+        </div>
+    );
+};

packages/account/src/Components/sample-credit-card-modal/index.js

@@ -0,0 +1,3 @@
+import { SampleCreditCardModal } from './sample-credit-card-modal.jsx';
+
+export default SampleCreditCardModal;

packages/account/src/Components/sample-credit-card-modal/sample-credit-card-modal.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Modal, Text } from '@deriv/components';
+import { localize, Localize } from '@deriv/translations';
+import { getUrlBase } from '@deriv/shared';
+
+export const SampleCreditCardModal = ({ is_open, onClose }) => {
+    return (
+        <Modal
+            className='sample-credit-card-modal'
+            is_open={is_open}
+            should_header_stick_body
+            title={<Localize i18n_default_text='How to mask your card?' />}
+            toggleModal={onClose}
+        >
+            <React.Fragment>
+                <Text className='sample-credit-card-modal-text' size='xs'>
+                    {localize(
+                        'Black out digits 7 to 12 of the card number that’s shown on the front of your debit/credit card.⁤'
+                    )}
+                </Text>
+                <img
+                    src={getUrlBase('/public/images/common/sample-credit-card.png')}
+                    alt='creditcardsample'
+                    className='sample-credit-card-modal-img'
+                />
+            </React.Fragment>
+        </Modal>
+    );
+};

packages/account/src/Constants/routes-config.js

@@ -9,6 +9,7 @@ import {
     FinancialAssessment,
     ProofOfIdentity,
     ProofOfAddress,
+    ProofOfOwnership,
     ApiToken,
     TwoFactorAuthentication,
     SelfExclusion,
@@ -96,6 +97,11 @@ const initRoutesConfig = ({ is_appstore, is_pre_appstore }) => [
                         component: ProofOfAddress,
                         getTitle: () => localize('Proof of address'),
                     },
+                    {
+                        path: routes.proof_of_ownership,
+                        component: ProofOfOwnership,
+                        getTitle: () => localize('Proof of ownership'),
+                    },
                 ],
             },
             {

packages/account/src/Containers/account.jsx

@@ -149,6 +149,10 @@ const Account = ({
             if (route.path === shared_routes.proof_of_identity || route.path === shared_routes.proof_of_address) {
                 route.is_disabled = !should_allow_authentication;
             }
+
+            if (route.path === shared_routes.proof_of_ownership) {
+                route.is_disabled = is_virtual;
+            }
         });
     });
 

packages/account/src/Sections/Verification/ProofOfOwnership/__test__/card.spec.js

@@ -0,0 +1,19 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import Card from '../card.jsx';
+import React from 'react';
+import { grouped_payment_method_data } from './test-data';
+
+describe('card.jsx', () => {
+    it('Should render a card', () => {
+        render(<Card card={grouped_payment_method_data.visa} />);
+        expect(screen.getByTestId(grouped_payment_method_data.visa.payment_method)).toBeInTheDocument();
+    });
+    it('Should render an expanded card on button click', () => {
+        render(<Card card={grouped_payment_method_data.visa} />);
+        const button = screen.getByTestId('dt_proof-of-ownership-button');
+        fireEvent.click(button);
+        expect(
+            screen.getAllByText('Accepted formats: pdf, jpeg, jpg, and png. Max file size: 8MB')[0]
+        ).toBeInTheDocument();
+    });
+});

packages/account/src/Sections/Verification/ProofOfOwnership/__test__/expanded-card.spec.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import ExpandedCard from '../expanded-card.jsx';
+import { grouped_payment_method_data } from './test-data.js';
+
+describe('expanded-card.jsx', () => {
+    it('should display correct identifier', () => {
+        render(
+            <ExpandedCard
+                card_details={grouped_payment_method_data.visa}
+                index={0}
+                item_index={0}
+                values={{
+                    data: [
+                        [
+                            {
+                                payment_method_identifier: '1234 56XX XXXX 1121',
+                            },
+                        ],
+                    ],
+                }}
+                setFieldValue={jest.fn(() => {})}
+            />
+        );
+        const element = screen.getByDisplayValue('1234 56XX XXXX 1121');
+        expect(element).toBeInTheDocument();
+    });
+    it('should show example link for credit/debit card and render the correct identifier label', () => {
+        render(<ExpandedCard card_details={grouped_payment_method_data.visa} />);
+        const exampelLink = screen.getByText('See example');
+        expect(exampelLink).toBeInTheDocument();
+        const element = screen.getByText('Card number');
+        expect(element).toBeInTheDocument();
+    });
+    it('should render payment method link in the description', () => {
+        render(<ExpandedCard card_details={grouped_payment_method_data.onlinenaira} />);
+        const element = screen.getByText(
+            'Upload a screenshot of your username on the General Information page at https://onlinenaira.com/members/index.htm'
+        );
+        expect(element).toBeInTheDocument();
+    });
+});

packages/account/src/Sections/Verification/ProofOfOwnership/__test__/proof-of-ownership-form.spec.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import ProofOfOwnershipForm from '../proof-of-ownership-form.jsx';
+import { grouped_payment_method_data } from './test-data';
+
+describe('proof-of-ownership-form.jsx', () => {
+    it('should render a single card item inside the form', () => {
+        render(
+            <ProofOfOwnershipForm
+                grouped_payment_method_data={{ beyonic: grouped_payment_method_data.beyonic }}
+                total_documents_required={1}
+                updateAccountStatus={jest.fn()}
+                refreshNotifications={jest.fn()}
+                is_dark_mode={false}
+                client_email={'test@testing.com'}
+            />
+        );
+        const cardItems = screen.getAllByRole('card-item');
+        expect(cardItems.length).toEqual(1);
+    });
+    it('should render multiple card items inside the form', () => {
+        render(
+            <ProofOfOwnershipForm
+                grouped_payment_method_data={grouped_payment_method_data}
+                total_documents_required={7}
+                updateAccountStatus={jest.fn()}
+                refreshNotifications={jest.fn()}
+                is_dark_mode={false}
+                client_email={'test@testing.com'}
+            />
+        );
+        const cardItems = screen.getAllByRole('card-item');
+        expect(cardItems.length).toEqual(Object.keys(grouped_payment_method_data).length);
+    });
+    it('should format identifier', async () => {
+        render(
+            <ProofOfOwnershipForm
+                grouped_payment_method_data={{ visa: grouped_payment_method_data.visa }}
+                updateAccountStatus={jest.fn()}
+                refreshNotifications={jest.fn()}
+                is_dark_mode={false}
+                client_email={'test@testing.com'}
+            />
+        );
+        const poo_dropdown_button = await screen.findByTestId('dt_proof-of-ownership-button');
+        fireEvent.click(poo_dropdown_button);
+        const identifier_input = await screen.findByTestId('dt_payment_method_identifier');
+        fireEvent.change(identifier_input, { target: { value: '1234567891011121' } });
+        fireEvent.blur(identifier_input);
+        const element = screen.getByDisplayValue('1234 56XX XXXX 1121');
+        expect(element).toBeInTheDocument();
+    });
+});