[FEQ] P2P Ako/ add p2p-v2 base layout (#13173)

* ci: add nx cache dir to the gitignore

* build: update ui lib

* feat: add app content tab

* feat: use app content in app module

* feat: add p2p routes to router module

* build: update package-lock json file

.gitignore

@@ -27,3 +27,4 @@ nx-cloud.env
 test-results/
 playwright-report/
 playwright/.cache/
+.nx

packages/account-v2/package.json

@@ -11,7 +11,7 @@
         "start": "rimraf dist && npm run test && npm run serve"
     },
     "dependencies": {
-        "@deriv-com/ui": "0.0.1-beta.7",
+        "@deriv-com/ui": "0.0.1-beta.8",
         "@deriv/api": "^1.0.0",
         "@deriv/library": "^1.0.0",
         "@deriv/quill-design": "^1.3.2",

packages/p2p-v2/package.json

@@ -12,7 +12,7 @@
         "start": "rimraf dist && npm run test && npm run serve"
     },
     "dependencies": {
-        "@deriv-com/ui": "0.0.1-beta.7",
+        "@deriv-com/ui": "0.0.1-beta.8",
         "@deriv/api": "^1.0.0",
         "@deriv/integration": "^1.0.0",
         "@deriv/react-joyride": "^2.6.2",

packages/p2p-v2/src/App.tsx

@@ -1,11 +1,15 @@
 import React from 'react';
 import { APIProvider } from '@deriv/api';
+import AppContent from './routes/AppContent';
 import { Router } from './routes';
 import './index.scss';
 
-const App: React.FC = () => (
-    <APIProvider standalone>
-        <Router />
-    </APIProvider>
-);
+const App: React.FC = () => {
+    return (
+        <APIProvider standalone>
+            <Router />
+            <AppContent />
+        </APIProvider>
+    );
+};
 export default App;

packages/p2p-v2/src/routes/AppContent/index.scss

@@ -0,0 +1,19 @@
+.p2p-v2-tab {
+    &__items-wrapper {
+        & button {
+            padding: 0 3rem;
+            white-space: nowrap;
+            height: 40px;
+            @include mobile {
+                width: calc(100vw / 4);
+            }
+        }
+    }
+    &__wrapper {
+        width: fit-content;
+        @include mobile {
+            width: 100vw;
+            margin-top: 4rem;
+        }
+    }
+}

packages/p2p-v2/src/routes/AppContent/index.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+import { useActiveAccount } from '@deriv/api';
+import { Loader } from '@deriv-com/ui/dist/components/Loader';
+import { Tab, Tabs } from '@deriv-com/ui/dist/components/Tabs';
+import { MobileCloseHeader } from '../../components';
+import { useDevice } from '../../hooks';
+import './index.scss';
+
+export const routesConfiguration = [
+    { Component: <div> Buy Sell Page </div>, path: 'buy-sell', title: 'Buy / Sell' },
+    { Component: <div> Orders Page </div>, path: 'orders', title: 'Orders' },
+    { Component: <div> My Ads Page </div>, path: 'my-ads', title: 'My Ads' },
+    { Component: <div> My Profile Page </div>, path: 'my-profile', title: 'My Profile' },
+];
+const AppContent = () => {
+    const history = useHistory();
+    const { data: activeAccountData, isLoading } = useActiveAccount();
+    const { isMobile } = useDevice();
+    if (isLoading || !activeAccountData) return <Loader color='#85acb0' />;
+
+    // NOTE: Replace this with P2PBlocked component later and a custom hook useIsP2PEnabled, P2P is only available for USD accounts
+    if (activeAccountData?.currency !== 'USD') return <h1>P2P is only available for USD accounts.</h1>;
+
+    return (
+        <>
+            {isMobile && <MobileCloseHeader />}
+            <div className='p2p-v2-tab__wrapper'>
+                <Tabs
+                    className='p2p-v2-tab__items-wrapper'
+                    onChange={index => {
+                        history.push(`/cashier/p2p-v2/${routesConfiguration[index].path}`);
+                    }}
+                    variant='secondary'
+                    wrapperClassName='p2p-v2-tab__wrapper'
+                >
+                    {routesConfiguration.map(({ Component, path, title }) => {
+                        return (
+                            <Tab key={path} title={title}>
+                                {Component}
+                            </Tab>
+                        );
+                    })}
+                </Tabs>
+            </div>
+        </>
+    );
+};
+
+export default AppContent;

packages/p2p-v2/src/routes/Router.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Route, Switch } from 'react-router-dom';
-import Home from './Home';
+import { Route, Switch, useHistory } from 'react-router-dom';
+import { routesConfiguration } from './AppContent';
 
 const prefix = '/cashier/p2p-v2';
 
@@ -13,10 +13,17 @@ declare module 'react-router-dom' {
 }
 
 const Router: React.FC = () => {
+    const history = useHistory();
+    if (history.location.pathname === prefix) {
+        history.push(`${prefix}/${routesConfiguration[0].path}`);
+    }
     return (
         <Switch>
-            <Route component={() => <Home path='Inner' />} exact path={`${prefix}/inner`} />
-            <Route component={() => <Home path='Root' />} exact path={`${prefix}/`} />
+            {routesConfiguration.map(({ Component, path }) => (
+                <Route key={path} path={path}>
+                    {Component}
+                </Route>
+            ))}
         </Switch>
     );
 };

packages/tradershub/package.json

@@ -18,7 +18,7 @@
         "@deriv/library": "^1.0.0",
         "@deriv/quill-design": "^1.3.2",
         "@deriv/quill-icons": "^1.17.0",
-        "@deriv-com/ui": "0.0.1-beta.7",
+        "@deriv-com/ui": "0.0.1-beta.8",
         "@deriv/react-joyride": "^2.6.2",
         "@deriv/utils": "^1.0.0",
         "@tanstack/react-table": "^8.10.3",