From e0584fa32f8ae7105042e72214c0a9bfaf235065 Mon Sep 17 00:00:00 2001
From: Shaheer <122449658+shaheer-deriv@users.noreply.github.com>
Date: Mon, 22 Jan 2024 11:23:06 +0400
Subject: [PATCH] [Account-v2] Shaheer / FEQ-1138 / Adds routing to account-v2
 package (#13065)

* docs: text fix

* feat: adds routing for account v2

* fix: updates react router dom version
---
 packages/account-v2/package.json              |  1 +
 packages/account-v2/src/App.tsx               |  2 +
 .../components/dummy-route/dummy-route.tsx    |  9 ++
 .../components/route-links/route-links.tsx    | 40 +++++++++
 .../src/router/constants/routesConfig.tsx     | 86 +++++++++++++++++++
 .../core/src/App/Constants/routes-config.js   |  2 +-
 6 files changed, 139 insertions(+), 1 deletion(-)
 create mode 100644 packages/account-v2/src/router/components/dummy-route/dummy-route.tsx
 create mode 100644 packages/account-v2/src/router/components/route-links/route-links.tsx
 create mode 100644 packages/account-v2/src/router/constants/routesConfig.tsx

diff --git a/packages/account-v2/package.json b/packages/account-v2/package.json
index 9fd2853a229b..0c4d99d65f70 100644
--- a/packages/account-v2/package.json
+++ b/packages/account-v2/package.json
@@ -35,6 +35,7 @@
         "@types/css-modules": "^1.0.2",
         "@types/react-dom": "^18.0.0",
         "@types/react-modal": "^3.16.3",
+        "@types/react-router-dom": "^5.1.6",
         "@types/webpack": "^5.28.5",
         "@typescript-eslint/eslint-plugin": "5.45.0",
         "@typescript-eslint/parser": "5.45.0",
diff --git a/packages/account-v2/src/App.tsx b/packages/account-v2/src/App.tsx
index 5747c82df239..fd61ae79d70a 100644
--- a/packages/account-v2/src/App.tsx
+++ b/packages/account-v2/src/App.tsx
@@ -5,6 +5,7 @@ import { FormProgress } from './components/form-progress';
 import SignupWizard from './components/SignupWizard';
 import { SignupWizardProvider, useSignupWizardContext } from './context/SignupWizardContext';
 import { stepProgress } from './mocks/form-progress.mock';
+import RouteLinks from './router/components/route-links/route-links';
 import './index.scss';
 
 const TriggerSignupWizardModal: React.FC = () => {
@@ -24,6 +25,7 @@ const App: React.FC = () => {
                     {/* [TODO]:Mock - Remove hardcoded initial value once isActive comes from Modal */}
                     <FormProgress activeStep={1} steps={stepProgress} />
                 </SignupWizardProvider>
+                <RouteLinks />
             </BreakpointProvider>
         </APIProvider>
     );
diff --git a/packages/account-v2/src/router/components/dummy-route/dummy-route.tsx b/packages/account-v2/src/router/components/dummy-route/dummy-route.tsx
new file mode 100644
index 000000000000..c067f94889fc
--- /dev/null
+++ b/packages/account-v2/src/router/components/dummy-route/dummy-route.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+const DummyRoute = ({ path }: { path: string }) => (
+    <div className='text-body-lg'>
+        Component for path <span className='font-bold'>{path}</span>
+    </div>
+);
+
+export default DummyRoute;
diff --git a/packages/account-v2/src/router/components/route-links/route-links.tsx b/packages/account-v2/src/router/components/route-links/route-links.tsx
new file mode 100644
index 000000000000..16eec7beb8b2
--- /dev/null
+++ b/packages/account-v2/src/router/components/route-links/route-links.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import { BrowserRouter, NavLink, Redirect, Route, Switch } from 'react-router-dom';
+import { defaultRoute, routes } from '../../constants/routesConfig';
+
+const RouteLinks = () => (
+    <BrowserRouter>
+        <div className='p-800 border-solid border-200 border-solid-slate-75 grid grid-cols-[1fr_4fr]'>
+            <div className='p-400 flex flex-col bg-solid-slate-75 rounded-200'>
+                {routes.map(route => (
+                    <NavLink
+                        activeClassName='bg-solid-slate-100 border-solid border-l-200 border-l-solid-red-500 rounded-200 font-bold'
+                        className='text-body-md p-400'
+                        key={route.routePath}
+                        to={route.routePath}
+                    >
+                        {route.routeName}
+                    </NavLink>
+                ))}
+            </div>
+            <div className='p-400'>
+                <Switch>
+                    {routes.map(route => {
+                        const Component = route.routeComponent;
+                        return (
+                            <Route
+                                exact
+                                key={route.routePath}
+                                path={route.routePath}
+                                render={() => <Component path={route.routePath} />}
+                            />
+                        );
+                    })}
+                    <Redirect from='/' to={defaultRoute} />
+                </Switch>
+            </div>
+        </div>
+    </BrowserRouter>
+);
+
+export default RouteLinks;
diff --git a/packages/account-v2/src/router/constants/routesConfig.tsx b/packages/account-v2/src/router/constants/routesConfig.tsx
new file mode 100644
index 000000000000..faa3515e1db0
--- /dev/null
+++ b/packages/account-v2/src/router/constants/routesConfig.tsx
@@ -0,0 +1,86 @@
+import DummyRoute from '../components/dummy-route/dummy-route';
+
+export const routes = [
+    {
+        routeComponent: DummyRoute,
+        routeName: 'Personal details',
+        routePath: '/account-v2/personal_details',
+    },
+    {
+        routeComponent: DummyRoute,
+        routeName: 'Languages',
+        routePath: '/account-v2/languages',
+    },
+    {
+        routeComponent: DummyRoute,
+        routeName: 'Trading assessment',
+        routePath: '/account-v2/trading_assessment',
+    },
+    {
+        routeComponent: DummyRoute,
+        routeName: 'Financial assessment',
+        routePath: '/account-v2/financial_assessment',
+    },
+    {
+        routeComponent: DummyRoute,
+        routeName: 'Proof of identity',
+        routePath: '/account-v2/proof_of_identity',
+    },
+    {
+        routeComponent: DummyRoute,
+        routeName: 'Proof of address',
+        routePath: '/account-v2/proof_of_address',
+    },
+    {
+        routeComponent: DummyRoute,
+        routeName: 'Proof of ownership',
+        routePath: '/account-v2/proof_of_ownership',
+    },
+    {
+        routeComponent: DummyRoute,
+        routeName: 'Proof of income',
+        routePath: '/account-v2/proof_of_income',
+    },
+    {
+        routeComponent: DummyRoute,
+        routeName: 'Email and passwords',
+        routePath: '/account-v2/email_and_passwords',
+    },
+    {
+        routeComponent: DummyRoute,
+        routeName: 'Self exclusion',
+        routePath: '/account-v2/self_exclusion',
+    },
+    {
+        routeComponent: DummyRoute,
+        routeName: 'Account limits',
+        routePath: '/account-v2/account_limits',
+    },
+    {
+        routeComponent: DummyRoute,
+        routeName: 'Login history',
+        routePath: '/account-v2/login_history',
+    },
+    {
+        routeComponent: DummyRoute,
+        routeName: 'API token',
+        routePath: '/account-v2/api_token',
+    },
+    {
+        routeComponent: DummyRoute,
+        routeName: 'Connected apps',
+        routePath: '/account-v2/connected_apps',
+    },
+    {
+        routeComponent: DummyRoute,
+        routeName: 'Two-factor authentication',
+        routePath: '/account-v2/two_factor_authentication',
+    },
+    {
+        routeComponent: DummyRoute,
+        routeName: 'Close your account',
+        routePath: '/account-v2/close_your_account',
+    },
+];
+
+export const defaultRoute = routes[0].routePath;
diff --git a/packages/core/src/App/Constants/routes-config.js b/packages/core/src/App/Constants/routes-config.js
index adb657979365..7ff23ea3f251 100644
--- a/packages/core/src/App/Constants/routes-config.js
+++ b/packages/core/src/App/Constants/routes-config.js
@@ -88,7 +88,7 @@ const P2P_V2 = React.lazy(() =>
 const Account_V2 = React.lazy(() =>
     moduleLoader(() => {
         // eslint-disable-next-line import/no-unresolved
-        return import(/* webpackChunkName: "p2p-v2" */ '@deriv/account-v2');
+        return import(/* webpackChunkName: "account-v2" */ '@deriv/account-v2');
     })
 );