refactor: p2p structure, styles and components (#8696)

* refactor: refactor p2p styles

* refactor: refactor styles

* fix: classname typo

* fix: fix broken style

* refactor: update based on pr comments

* fix: failed tests

* fix: import error

* refactor: rename datatest id

* refactor: remove unused styles and refactor text components

* refactor: restructure the p2p package

* refactor: update translations imports

* refactor: update modal-manager import

* fix: pr review comments

* fix: fix some broken styles

* fix: review comments

* chore: change in failed test file and remove change from unrelated file

* fix: review comments

* Henry/fix: navigate to accu trade type in reports page after purchasing a c… (#8684)

* fix: navigate to accu trade type in reports page after purchasing a contract

* fix: circle CI error

* fix: codecov

* fix: circle CI issue

* refactor: refactor dpep-blocked components

* fix: failed test

* fix: review comments

* refactor: test descriptions changes

* refactor: import localize from p2p i18n instead of shared translations package

* fix: review components

* chore: refactored temporarily barred hint component

* refactor: rearrange imports to follow guidelines

* refactor: standardise react imports

* chore: refactored p2p-empty component

* chore: added default value for has_tabs

* feat: unit test added for page return component

* refactor: recommended-by component

* fix: updated index file

* chore: added test cases for star rating

* chore: changed describe

* refactor: add new test cases to increase coverage

* refactor: add comment in empty arrow function

* refactor: refactor trade-badge component

* fix: review comments fixed

* refactor: remove prop-types import

* refactor: update react import

* refactor: refactor form-submit-error-message, table-error

* refactor: nickname form

* refactor: review comments

* fix: tests

* chore: refactored user avatar component

* refactor: refactor toggle-container component

* chore: added suggestions

* refactor: delete the type and use propswithchildren

* chore: refactored FloatingRate component

* refactor: refactor block-user-empty component

* refactor: online status component refactoring

* refactor: review comments

* refactor: add margin-top

* refactor: udpated test description

* refactor: change test cases descriptions

* refactor: review comment

* refactor: refactored verification component

* chore: refactored recommend user component

* chore: removed fireEvent, used userEvent

* refactor: updated tests

* refactor: review comment fix

* refactor: added type checking for modal manager in test case

* translations: 📚 sync translations with crowdin (#8881)

Co-authored-by: DerivFE <80095553+DerivFE@users.noreply.github.com>

* thisyahlen/fix: change algo for realAccountSignup (#8656)

* fix: change algo for realAccountSignup

* fix: refactor

* redeploy: vercel

* translations: 📚 sync translations with crowdin (#8885)

Co-authored-by: DerivFE <80095553+DerivFE@users.noreply.github.com>

* translations: 📚 sync translations with crowdin (#8890)

Co-authored-by: DerivFE <80095553+DerivFE@users.noreply.github.com>

* likhith/fix: 🐛 resolved required field error (#8886)

* fix: 🐛 resolved required field error

* feat: fixed issue with Citizen field

* refactor: removed unused code

* refactor: updated test

* fix: code smells

* fix: tests

* refactor: reduce code complexity to remove code smell

* refactor: updated return

* refactor: udpated test

* refactor: delete text component and use default button text styles instead

* fix: raised subtasks

* fix: advertiser buy/sell row

* fix: style fix in edit/add payment method form in my profile

* fix: notification issue

* fix: block banned user bug

* fix: issue for popup not showing when rate updated before selecting form

* fix: removed console

* fix: added todo

* fix: added undefined check

* fix: subtasks raised

* fix: daily limit notification

* fix: tests failed

* fix: notification popup issue not shown in responsive

* fix: filter button spacing

* fix: failing tests

* fix: get server hits bump error when in advertiser page and block it from BO

* fix: revert unwanted changes from master

* fix: remove unnecessary changes

* fix: remove unnecessary changes

* fix: tests

---------

Co-authored-by: Farhan Ahmad Nurzi <farhan.nurzi@regentmarkets.com>
Co-authored-by: henry-deriv <118344354+henry-deriv@users.noreply.github.com>
Co-authored-by: ameerul hady <ameerul@deriv.com>
Co-authored-by: nada-deriv <nada.ajinas@deriv.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: DerivFE <80095553+DerivFE@users.noreply.github.com>
Co-authored-by: thisyahlen <104053934+thisyahlen-deriv@users.noreply.github.com>
Co-authored-by: Likhith Kolayari <98398322+likhith-deriv@users.noreply.github.com>

packages/core/src/Stores/notification-store.js

@@ -840,7 +840,6 @@ export default class NotificationStore extends BaseStore {
                         />
                     ),
                     platform: 'P2P',
-                    should_show_again: false,
                     type: 'announce',
                 };
             },

packages/p2p/@deriv-stores.d.ts

@@ -0,0 +1,10 @@
+import type { TCoreStores } from '@deriv/stores/types';
+import type P2PStore from './src/stores';
+
+declare module '@deriv/stores' {
+    export function useStore(): TCoreStores & {
+        modules: {
+            p2p: P2PStore;
+        };
+    };
+}

packages/p2p/jest.config.js

@@ -9,6 +9,7 @@ module.exports = {
         '^Assets/(.*)$': '<rootDir>/src/assets/$1',
         '^Components/(.*)$': '<rootDir>/src/components/$1',
         '^Constants/(.*)$': '<rootDir>/src/constants/$1',
+        '^Pages/(.*)$': '<rootDir>/src/pages/$1',
         '^Stores/(.*)$': '<rootDir>/src/stores/$1',
         '^Stores$': '<rootDir>/src/stores/index',
         '^Translations/(.*)$': '<rootDir>/src/translations/$1',

packages/p2p/package.json

@@ -38,6 +38,7 @@
         "@deriv/translations": "^1.0.0",
         "@deriv/api-types": "^1.0.118",
         "@testing-library/react": "^12.0.0",
+        "@testing-library/user-event": "^13.5.0",
         "classnames": "^2.2.6",
         "commander": "^3.0.2",
         "crc-32": "^1.2.0",

packages/p2p/src/components/__tests__/app-content.spec.js

@@ -25,25 +25,18 @@ jest.mock('@deriv/components', () => ({
     Loading: () => <div>Loading</div>,
 }));
 
+jest.mock('@deriv/shared', () => ({
+    ...jest.requireActual('@deriv/shared'),
+    isMobile: jest.fn(() => false),
+}));
+
 // jest.mock('Components/dp2p-blocked', () => jest.fn(() => 'Dp2pBlocked'));
 jest.mock('Components/nickname-form', () => jest.fn(() => 'NicknameForm'));
 jest.mock('Components/verification/verification', () => jest.fn(() => 'Verification'));
-jest.mock('Components/my-ads/my-ads', () => jest.fn(() => 'MyAds'));
-jest.mock('Components/orders/orders', () => jest.fn(() => 'Orders'));
-jest.mock('Components/buy-sell/buy-sell', () => jest.fn(() => 'BuySell'));
-jest.mock('Components/my-profile', () => jest.fn(() => 'MyProfile'));
-
-jest.mock('@sendbird/chat', () => ({
-    SendbirdChat: jest.fn().mockReturnValue({}),
-}));
-
-jest.mock('@sendbird/chat/groupChannel', () => ({
-    SendbirdChat: jest.fn().mockReturnValue({}),
-}));
-
-jest.mock('@sendbird/chat/message', () => ({
-    SendbirdChat: jest.fn().mockReturnValue({}),
-}));
+jest.mock('Pages/my-ads/my-ads', () => jest.fn(() => 'MyAds'));
+jest.mock('Pages/orders/orders', () => jest.fn(() => 'Orders'));
+jest.mock('Pages/buy-sell/buy-sell', () => jest.fn(() => 'BuySell'));
+jest.mock('Pages/my-profile', () => jest.fn(() => 'MyProfile'));
 
 describe('<AppContent/>', () => {
     const mocked_store_values = {
@@ -93,17 +86,6 @@ describe('<AppContent/>', () => {
     //     expect(screen.getByText('Dp2pBlocked')).toBeInTheDocument();
     // });
 
-    it('should render the nick-name form component when should_show_popup state is true', () => {
-        useStores.mockImplementation(() => ({
-            general_store: { ...mocked_store_values, should_show_popup: true },
-        }));
-        render(<AppContent />, {
-            wrapper: ({ children }) => <StoreProvider store={mockStore({})}>{children}</StoreProvider>,
-        });
-
-        expect(screen.getByText('NicknameForm')).toBeInTheDocument();
-    });
-
     // it('should render only the first notification component when multiple error status is set', () => {
     //     useStores.mockImplementation(() => ({
     //         general_store: { ...mocked_store_values, should_show_popup: true, should_show_dp2p_blocked: true },

packages/p2p/src/components/app-content.jsx

@@ -1,16 +1,16 @@
+import classNames from 'classnames';
 import React from 'react';
-import { isAction, reaction } from 'mobx';
 import { useHistory } from 'react-router-dom';
-import { useStores } from 'Stores';
-import { isMobile } from '@deriv/shared';
+import { isAction, reaction } from 'mobx';
+import { observer } from 'mobx-react-lite';
 import { Loading, Tabs } from '@deriv/components';
-import { useStore, observer } from '@deriv/stores';
-import classNames from 'classnames';
-import { localize } from './i18next';
-import NicknameForm from './nickname-form';
-import TemporarilyBarredHint from './temporarily-barred-hint';
-import { useModalManagerContext } from 'Components/modal-manager/modal-manager-context';
 import { useP2PNotificationCount } from '@deriv/hooks';
+import { isMobile } from '@deriv/shared';
+import { useStore } from '@deriv/stores';
+import TemporarilyBarredHint from 'Components/temporarily-barred-hint';
+import { useModalManagerContext } from 'Components/modal-manager/modal-manager-context';
+import { useStores } from 'Stores';
+import { localize } from './i18next';
 
 const AppContent = ({ order_id }) => {
     const { buy_sell_store, general_store } = useStores();
@@ -47,10 +47,6 @@ const AppContent = ({ order_id }) => {
         return <Loading is_fullscreen={false} />;
     }
 
-    if (general_store.should_show_popup) {
-        return <NicknameForm />;
-    }
-
     // return empty or else the tabs will be shown above when displaying the advertiser page
     if (
         (buy_sell_store?.show_advertiser_page && !buy_sell_store.should_show_verification) ||
@@ -62,7 +58,7 @@ const AppContent = ({ order_id }) => {
     return (
         <Tabs
             active_index={general_store.active_index}
-            className={classNames({ 'p2p-cashier__tabs': general_store.active_index === 0 && isMobile() })}
+            className={classNames({ p2p__tabs: general_store.active_index === 0 && isMobile() })}
             header_fit_content={!isMobile()}
             is_100vw={isMobile()}
             is_scrollable

packages/p2p/src/components/dp2p-blocked/__tests__/dp2p-blocked-description.spec.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { useStores } from 'Stores/index';
+import Dp2pBlockedDescription from '../dp2p-blocked-description';
+
+jest.mock('Stores', () => ({
+    ...jest.requireActual('Stores'),
+    useStores: jest.fn(),
+}));
+
+describe('<Dp2pBlockedDescription />', () => {
+    it('it should return `P2P transactions are locked. This feature is not available for payment agents.`', () => {
+        (useStores as jest.Mock).mockReturnValue({
+            general_store: {
+                is_p2p_blocked_for_pa: true,
+                is_high_risk: true,
+                is_blocked: false,
+            },
+        });
+        render(<Dp2pBlockedDescription />);
+        expect(
+            screen.getByText('P2P transactions are locked. This feature is not available for payment agents.')
+        ).toBeInTheDocument();
+    });
+
+    it('it should return `To enable this feature you must complete the following:`', () => {
+        (useStores as jest.Mock).mockReturnValue({
+            general_store: {
+                is_p2p_blocked_for_pa: false,
+                is_high_risk: true,
+                is_blocked: false,
+            },
+        });
+        render(<Dp2pBlockedDescription />);
+        expect(screen.getByText('To enable this feature you must complete the following:')).toBeInTheDocument();
+    });
+
+    it('it should return `Please use live chat to contact our Customer Support team for help.` and open live chat when clicking on the `live chat`', () => {
+        (useStores as jest.Mock).mockReturnValue({
+            general_store: {
+                is_p2p_blocked_for_pa: false,
+                is_high_risk: false,
+                is_blocked: false,
+            },
+        });
+
+        window.LC_API = {
+            open_chat_window: jest.fn(),
+            on_chat_ended: jest.fn(),
+        };
+
+        render(<Dp2pBlockedDescription />);
+        expect(screen.getByText(/to contact our Customer Support team for help./)).toBeInTheDocument();
+
+        const live_chat_text = screen.getByText(/live chat/i);
+        expect(live_chat_text).toBeInTheDocument();
+
+        userEvent.click(live_chat_text);
+        expect(window.LC_API.open_chat_window).toHaveBeenCalledTimes(1);
+    });
+});

packages/p2p/src/components/dp2p-blocked/__tests__/dp2p-blocked.spec.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import Dp2pBlocked from '../dp2p-blocked';
+
+describe('<Dp2pBlocked />', () => {
+    it('it should render <Dp2pBlocked /> component', () => {
+        render(<Dp2pBlocked />);
+        expect(screen.getByText('Your Deriv P2P cashier is blocked')).toBeInTheDocument();
+    });
+});

packages/p2p/src/components/dp2p-blocked/dp2p-blocked-checklist/__tests__/dp2p-blocked-checklist.spec.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { useStores } from 'Stores/index';
+import Dp2pBlockedChecklist from '..';
+
+const mockHistoryPush = jest.fn();
+
+jest.mock('Stores', () => ({
+    ...jest.requireActual('Stores'),
+    useStores: jest.fn(),
+}));
+
+jest.mock('react-router-dom', () => ({
+    ...jest.requireActual('react-router-dom'),
+    useHistory: () => ({
+        push: mockHistoryPush,
+    }),
+}));
+
+describe('<Dp2pBlockedChecklist />', () => {
+    it('it should render <Dp2pBlockedChecklist /> component if client is high risk and not blocked', () => {
+        (useStores as jest.Mock).mockReturnValue({
+            general_store: {
+                is_high_risk: true,
+                is_blocked: false,
+            },
+        });
+        render(<Dp2pBlockedChecklist />);
+        expect(screen.getByText('Complete the financial assessment form')).toBeInTheDocument();
+    });
+
+    it('it should redirect to `/account/financial-assessment` while clicking on checklist button if client is high risk and not blocked', () => {
+        (useStores as jest.Mock).mockReturnValue({
+            general_store: {
+                is_high_risk: true,
+                is_blocked: false,
+            },
+        });
+        render(<Dp2pBlockedChecklist />);
+        userEvent.click(screen.getByTestId('dt_checklist_item_status_action'));
+        expect(mockHistoryPush).toHaveBeenCalledWith({ pathname: '/account/financial-assessment' });
+    });
+
+    it('it should return null when client is not high risk', () => {
+        (useStores as jest.Mock).mockReturnValue({
+            general_store: {
+                is_high_risk: false,
+                is_blocked: false,
+            },
+        });
+        const { container } = render(<Dp2pBlockedChecklist />);
+        expect(container).toBeEmptyDOMElement();
+    });
+});

packages/p2p/src/components/dp2p-blocked/dp2p-blocked-checklist/dp2p-blocked-checklist.scss

@@ -0,0 +1,13 @@
+.dp2p-blocked-checklist {
+    &__container {
+        margin-top: 2.4rem;
+    }
+
+    .dc-checklist__item {
+        width: 40rem;
+
+        @include mobile {
+            width: 100%;
+        }
+    }
+}

packages/p2p/src/components/dp2p-blocked/dp2p-blocked-checklist.jsx → packages/p2p/src/components/dp2p-blocked/dp2p-blocked-checklist/dp2p-blocked-checklist.tsx

@@ -1,10 +1,10 @@
-import * as React from 'react';
+import React from 'react';
 import { useHistory } from 'react-router-dom';
+import { observer } from 'mobx-react-lite';
 import { Checklist } from '@deriv/components';
 import { routes } from '@deriv/shared';
-import { observer } from 'mobx-react-lite';
-import { useStores } from 'Stores';
-import { localize } from '../i18next';
+import { localize } from 'Components/i18next';
+import { useStores } from 'Stores/index'; // remove index when store migration to ts is done
 
 const Dp2pBlockedChecklist = () => {
     const { general_store } = useStores();
@@ -23,8 +23,8 @@ const Dp2pBlockedChecklist = () => {
         ];
 
         return (
-            <div className='dp2p-blocked__checklist-container'>
-                <Checklist className='dp2p-blocked__checklist' items={checklist_items} />
+            <div className='dp2p-blocked-checklist__container'>
+                <Checklist className='dp2p-blocked-checklist' items={checklist_items} />
             </div>
         );
     }

packages/p2p/src/components/dp2p-blocked/dp2p-blocked-checklist/index.ts

@@ -0,0 +1,4 @@
+import Dp2pBlockedChecklist from './dp2p-blocked-checklist';
+import './dp2p-blocked-checklist.scss';
+
+export default Dp2pBlockedChecklist;

packages/p2p/src/components/dp2p-blocked/dp2p-blocked-description.jsx → packages/p2p/src/components/dp2p-blocked/dp2p-blocked-description.tsx

@@ -1,8 +1,8 @@
-import * as React from 'react';
-import { Text } from '@deriv/components';
+import React from 'react';
 import { observer } from 'mobx-react-lite';
-import { useStores } from 'Stores';
-import { Localize } from '../i18next';
+import { Text } from '@deriv/components';
+import { Localize } from 'Components/i18next';
+import { useStores } from 'Stores/index'; //remove index when store migration to ts is done
 
 const Dp2pBlockedDescription = () => {
     const { general_store } = useStores();
@@ -26,7 +26,7 @@ const Dp2pBlockedDescription = () => {
     };
 
     return (
-        <Text className='dp2p-blocked__description' align='center' color='prominent' line_height='m' size='xs'>
+        <Text align='center' color='prominent' size='xs'>
             {getBlockedDescription()}
         </Text>
     );