[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

Author: shaheer-deriv

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",

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>
     );

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;

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;

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;

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');
     })
 );