Ameerul /P2PS-721 Move the registration to the My Profile tab on the …

…website to ensure consistency across Mobile App and Website (#8915)

* chore: moved verification to my profile when user is not registered

* chore: added test case for verification

* chore: fixed failing tests

* chore: added check if user has poi_status when they are not an advertiser to remove loading

* chore: fixed failing my-profile test

* chore: changed verfication default from my_ads to my_profile

* fix: verification import

* fix: failing test cases

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

@@ -67,7 +67,6 @@ describe('<AppContent/>', () => {
         });
 
         expect(screen.getByText('Tabs')).toBeInTheDocument();
-        expect(screen.queryByTestId('my_profile')).not.toBeInTheDocument();
     });
 
     it('should render the loading component when is_loading state is true', () => {
@@ -104,16 +103,4 @@ describe('<AppContent/>', () => {
     //     expect(screen.queryByText('NicknameForm')).not.toBeInTheDocument();
     //     expect(screen.getByText('Dp2pBlocked')).toBeInTheDocument();
     // });
-
-    it('should render MyProfile component when is_advertiser state is true', () => {
-        useStores.mockImplementation(() => ({
-            ...mocked_store_values,
-            general_store: { ...mocked_store_values.general_store, is_advertiser: true },
-        }));
-        render(<AppContent />, {
-            wrapper: ({ children }) => <StoreProvider store={mockStore({})}>{children}</StoreProvider>,
-        });
-
-        expect(screen.getByTestId('my_profile')).toBeInTheDocument();
-    });
 });

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

@@ -80,7 +80,7 @@ const AppContent = ({ order_id }) => {
             <div label={localize('My ads')}>
                 <TemporarilyBarredHint />
             </div>
-            {general_store.is_advertiser && <div label={localize('My profile')} data-testid='my_profile' />}
+            <div label={localize('My profile')} />
         </Tabs>
     );
 };

packages/p2p/src/pages/app.jsx

@@ -70,7 +70,7 @@ const App = () => {
         // Redirect back to /p2p, this was implemented for the mobile team. Do not remove.
         if (/\/verification$/.test(location.pathname)) {
             localStorage.setItem('is_verifying_p2p', true);
-            history.push(routes.p2p_my_ads);
+            history.push(routes.p2p_my_profile);
         }
 
         ServerTime.init(general_store.server_time);

packages/p2p/src/pages/my-profile/__tests__/my-profile.spec.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import { screen, render } from '@testing-library/react';
+import MyProfile from '../my-profile';
+
+const mock_store = {
+    general_store: {
+        advertiser_info: {
+            buy_completion_rate: 100,
+            buy_orders_amount: 1,
+            buy_orders_count: 1,
+            buy_time_avg: 80,
+            partner_count: 1,
+        },
+        is_advertiser: false,
+        should_show_dp2p_blocked: false,
+        setActiveIndex: jest.fn(),
+    },
+    my_profile_store: {
+        error_message: '',
+        getSettings: jest.fn(),
+        setActiveTab: jest.fn(),
+        setShouldShowAddPaymentMethodForm: jest.fn(),
+    },
+};
+
+jest.mock('Stores', () => ({
+    ...jest.requireActual('Stores'),
+    useStores: jest.fn(() => mock_store),
+}));
+
+jest.mock('Components/verification', () => jest.fn(() => <div>Verification</div>));
+jest.mock('../my-profile-content.jsx', () => jest.fn(() => <div>MyProfileContent</div>));
+jest.mock('../my-profile-stats/my-profile-details-container', () =>
+    jest.fn(() => <div>MyProfileDetailsContainer</div>)
+);
+jest.mock('../my-profile-header', () => jest.fn(() => <div>MyProfileHeader</div>));
+
+describe('<MyProfile />', () => {
+    it('should show the verification page if is_advertiser is false', () => {
+        render(<MyProfile />);
+
+        expect(screen.getByText('Verification')).toBeInTheDocument();
+    });
+});

packages/p2p/src/pages/my-profile/my-profile.jsx

@@ -1,13 +1,14 @@
 import React from 'react';
+import { observer } from 'mobx-react-lite';
 import { AutoSizer, DesktopWrapper, Loading, Text } from '@deriv/components';
 import { isEmptyObject } from '@deriv/shared';
-import { observer } from 'mobx-react-lite';
-import { useStores } from 'Stores';
+import DailyLimitModal from 'Components/daily-limit-modal';
+import Verification from 'Components/verification';
 import { my_profile_tabs } from 'Constants/my-profile-tabs';
+import { useStores } from 'Stores';
+import MyProfileDetailsContainer from './my-profile-stats/my-profile-details-container';
 import MyProfileContent from './my-profile-content.jsx';
 import MyProfileHeader from './my-profile-header';
-import MyProfileDetailsContainer from './my-profile-stats/my-profile-details-container/my-profile-details-container.jsx';
-import DailyLimitModal from 'Components/daily-limit-modal';
 
 const MyProfile = () => {
     const { general_store, my_profile_store } = useStores();
@@ -24,7 +25,11 @@ const MyProfile = () => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
-    if (isEmptyObject(general_store.advertiser_info) && !general_store.should_show_dp2p_blocked) {
+    if (
+        isEmptyObject(general_store.advertiser_info) &&
+        !general_store.poi_status &&
+        !general_store.should_show_dp2p_blocked
+    ) {
         return <Loading is_fullscreen={false} />;
     }
 
@@ -38,6 +43,10 @@ const MyProfile = () => {
         );
     }
 
+    if (!general_store.is_advertiser) {
+        return <Verification />;
+    }
+
     return (
         <AutoSizer>
             {({ height, width }) => (