Merge pull request #237 from srikanth716/injiver-705-persist-page-reload

Injiver 705 persist page reload
mosip · Nov 27, 2024 · d4772cc · d4772cc
2 parents 7631298 + 96c87ed
commit d4772cc
Show file tree

Hide file tree

Showing 9 changed files with 132 additions and 55 deletions.
diff --git a/ui/src/App.tsx b/ui/src/App.tsx
@@ -1,36 +1,49 @@
-import React, { useEffect } from 'react';
-import './App.css';
+import React, { useEffect } from "react";
+import "./App.css";
 import Home from "./pages/Home";
 import Offline from "./pages/Offline";
-import {RouterProvider, createBrowserRouter} from "react-router-dom";
+import { Scan } from "./pages/Scan";
+import { RouterProvider, createBrowserRouter } from "react-router-dom";
 import AlertMessage from "./components/commons/AlertMessage";
-
 import PreloadImages from "./components/commons/PreloadImages";
 import OvpRedirect from "./pages/OvpRedirect";
 import PageNotFound404 from "./pages/PageNotFound404";
-import {Pages} from "./utils/config";
-import { useAppSelector } from './redux/hooks';
-import { RootState } from './redux/store';
-import { isRTL } from './utils/i18n';
+import { Pages } from "./utils/config";
+import { useAppSelector } from "./redux/hooks";
+import store, { RootState } from "./redux/store";
+import { isRTL } from "./utils/i18n";
+import { VerificationMethod } from "./types/data-types";
+import { goToHomeScreen } from "./redux/features/verification/verification.slice";
+
+function switchToVerificationMethod(method: VerificationMethod) {
+  store.dispatch(goToHomeScreen({ method }));
+  return null;
+}
 
 const router = createBrowserRouter([
-    {
-        path: Pages.Home,
-        element: <Home/>
-    },
-    {
-        path: Pages.Redirect,
-        element: <OvpRedirect/>
-    },
-    {
-        path: Pages.Offline,
-        element: <Offline/>
-    },
-    {
-        path: Pages.PageNotFound,
-        element: <PageNotFound404/>
-    }
-])
+  {
+    path: Pages.Home,
+    element: <Home />,
+    loader: () => switchToVerificationMethod("UPLOAD"),
+  },
+  {
+    path: Pages.Scan,
+    element: <Scan />,
+    loader: () => switchToVerificationMethod("SCAN"),
+  },
+  {
+    path: Pages.Redirect,
+    element: <OvpRedirect />,
+  },
+  {
+    path: Pages.Offline,
+    element: <Offline />,
+  },
+  {
+    path: Pages.PageNotFound,
+    element: <PageNotFound404 />,
+  },
+]);
 
 const preloadImages = ['/assets/images/under_construction.svg', '/assets/images/inji-logo.svg'];
 

diff --git a/ui/src/components/Home/Header/VerificationMethodTabs/index.tsx b/ui/src/components/Home/Header/VerificationMethodTabs/index.tsx
@@ -4,10 +4,11 @@ import { useVerificationFlowSelector } from "../../../../redux/features/verifica
 import { goToHomeScreen } from "../../../../redux/features/verification/verification.slice";
 import { VerificationMethod } from "../../../../types/data-types";
 import { raiseAlert } from "../../../../redux/features/alerts/alerts.slice";
-import { AlertMessages } from "../../../../utils/config";
+import { AlertMessages, Pages } from "../../../../utils/config";
 import { MdArrowForwardIos } from "react-icons/md";
 import { MdArrowBackIos } from "react-icons/md";
 import { useTranslation } from 'react-i18next';
+import { useNavigate } from "react-router-dom";
 
 const Tab = ({
   id,
@@ -45,6 +46,7 @@ const Tab = ({
 
 function VerificationMethodTabs(props: any) {
   const dispatch = useAppDispatch();
+  const navigate = useNavigate();
   const method = useVerificationFlowSelector((state) => state.method);
   const {t} = useTranslation('Tab')
 
@@ -93,13 +95,20 @@ function VerificationMethodTabs(props: any) {
               id="upload-qr-code-tab"
               active={method === "UPLOAD"}
               label={t('upload')}
-              onClick={() => switchToVerificationMethod("UPLOAD")}
+              onClick={() => {
+                switchToVerificationMethod("UPLOAD");
+                navigate(Pages.Home);
+              }
+              }
             />
             <Tab
               id="scan-qr-code-tab"
               active={method === "SCAN"}
               label={t('scan')}
-              onClick={() => switchToVerificationMethod("SCAN")}
+              onClick={() => {
+                switchToVerificationMethod("SCAN");
+                navigate(Pages.Scan);
+              }}
             />
             <Tab
               id="vp-verification-tab"

diff --git a/ui/src/components/Home/VerificationSection/index.tsx b/ui/src/components/Home/VerificationSection/index.tsx
@@ -4,13 +4,14 @@ import Verification from "./Verification";
 import Result from "./Result";
 import {VerificationSteps} from "../../../utils/config";
 import {useVerificationFlowSelector} from "../../../redux/features/verification/verification.selector";
+import { Upload } from '../../../pages/Upload';
 
 const DisplayActiveStep = () => {
     const {activeScreen, method} = useVerificationFlowSelector(state => ({activeScreen: state.activeScreen, qrData: state.qrReadResult?.qrData, method: state.method}));
-
+    
     switch (activeScreen) {
         case VerificationSteps[method].QrCodePrompt:
-            return (<ScanQrCode/>);
+            return method ==='SCAN' ? <ScanQrCode/> : <Upload/>
         case VerificationSteps[method].ActivateCamera:
         case VerificationSteps[method].Verifying:
             return (<Verification/>);

diff --git a/ui/src/components/PageTemplate/index.tsx b/ui/src/components/PageTemplate/index.tsx
@@ -2,11 +2,15 @@ import React from 'react';
 import Navbar from "./Navbar";
 import Copyrights from "./Copyrights";
 import CheckingForInternetConnectivity from "../misc/CheckingForInternetConnectivity";
+import Header from '../Home/Header';
 
 const PageTemplate = (props: any) => {
     return (
         <div>
             <Navbar/>
+            <div className="w-full bg-pageBackGroundColor text-center">
+                <Header/>
+            </div>
             {props.children}
             <Copyrights/>
             <CheckingForInternetConnectivity/>

diff --git a/ui/src/index.css b/ui/src/index.css
@@ -54,7 +54,6 @@
       #7c1389 90%,
       #5b03ad 100%
     );
-    --iw-color-languageArrowIcon: #951f6f;
   }
   [class="purple_theme"] {
     --iv-font-base: "Gentium Plus", serif;
@@ -105,7 +104,6 @@
       #7c1389 90%,
       #5b03ad 100%
     );
-    --iw-color-languageArrowIcon: #0fac8b;
   }
 }
 

diff --git a/ui/src/pages/Home.tsx b/ui/src/pages/Home.tsx
@@ -1,28 +1,23 @@
-import React from 'react';
-import VerificationProgressTracker from "../components/Home/VerificationProgressTracker";
-import VerificationSection from "../components/Home/VerificationSection";
+import React from "react";
 import PageTemplate from "../components/PageTemplate";
-import Header from "../components/Home/Header";
+import VerificationSection from "../components/Home/VerificationSection";
+import VerificationProgressTracker from "../components/Home/VerificationProgressTracker";
+
+
+function Home() {
 
-function Home(props: any) {
-    return (
-        <PageTemplate>
-            <div>
-                <div className="w-full bg-pageBackGroundColor text-center">
-                    <Header/>
-                </div>
-                <div className="grid grid-cols-12">
-                    <div
-                        className="col-start-1 col-end-13 lg:col-start-1 lg:col-span-6 lg:bg-pageBackGroundColor xs:w-[100vw] lg:max-w-[50vw]">
-                        <VerificationProgressTracker/>
-                    </div>
-                    <div className="col-start-1 col-end-13 lg:col-start-7 lg:col-end-13 xs:[100vw] lg:max-w-[50vw]">
-                        <VerificationSection/>
-                    </div>
-                </div>
-            </div>
-        </PageTemplate>
-    );
+  return (
+    <PageTemplate>
+      <div className="grid grid-cols-12">
+        <div className="col-start-1 col-end-13 lg:col-start-1 lg:col-span-6 lg:bg-pageBackGroundColor xs:w-[100vw] lg:max-w-[50vw]">
+          <VerificationProgressTracker />
+        </div>
+        <div className="col-start-1 col-end-13 lg:col-start-7 lg:col-end-13 xs:[100vw] lg:max-w-[50vw]">
+          <VerificationSection />
+        </div>
+      </div>
+    </PageTemplate>
+  );
 }
 
 export default Home;
diff --git a/ui/src/pages/Scan.tsx b/ui/src/pages/Scan.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+import PageTemplate from "../components/PageTemplate";
+import VerificationSection from "../components/Home/VerificationSection";
+import VerificationProgressTracker from "../components/Home/VerificationProgressTracker";
+
+export const Scan = () => {
+  return (
+    <PageTemplate>
+      <div className="grid grid-cols-12">
+        <div className="col-start-1 col-end-13 lg:col-start-1 lg:col-span-6 lg:bg-pageBackGroundColor xs:w-[100vw] lg:max-w-[50vw]">
+          <VerificationProgressTracker />
+        </div>
+        <div className="col-start-1 col-end-13 lg:col-start-7 lg:col-end-13 xs:[100vw] lg:max-w-[50vw]">
+          <VerificationSection />
+        </div>
+      </div>
+    </PageTemplate>
+  );
+};
diff --git a/ui/src/pages/Upload.tsx b/ui/src/pages/Upload.tsx
@@ -0,0 +1,37 @@
+import React from "react";
+import { QrIcon } from "../utils/theme-utils";
+import { UploadQrCode } from "../components/Home/VerificationSection/UploadQrCode";
+import { ScanOutline } from "../utils/theme-utils";
+import { useTranslation } from "react-i18next";
+
+export const Upload = () => {
+  const {t} = useTranslation('Upload')
+
+  return (
+    <div className="flex flex-col pt-0 pb-[100px] lg:py-[42px] px-0 lg:px-[104px] text-center content-center justify-center">
+      <div className="xs:col-end-13">
+        <div
+          className={`relative grid content-center justify-center w-[275px] h-auto lg:w-[360px] aspect-square my-1.5 mx-auto bg-cover`}
+          style={{ backgroundImage: `url(${ScanOutline})` }}
+        >
+          <div className="grid bg-lighter-gradient rounded-[12px] w-[250px] lg:w-[320px] aspect-square content-center justify-center"></div>
+          <div className="absolute top-[58px] left-[98px] lg:top-[165px] lg:left-[50%] lg:translate-x-[-50%] lg:translate-y-[-50%]">
+            <QrIcon className="w-[78px] lg:w-[100px]" />
+          </div>
+          <UploadQrCode
+            className="absolute top-[160px] left-[33px] w-[205px] lg:w-[223px] lg:left-[63px] lg:top-[231px]"
+            displayMessage="Upload"
+          />
+        </div>
+        <div className="grid text-center content-center justify-center pt-2">
+          <p
+            id="file-format-constraints"
+            className="font-normal text-normalTextSize text-uploadDescription w-[280px]"
+          >
+           {t('format')}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/ui/src/utils/config.ts b/ui/src/utils/config.ts
@@ -3,6 +3,7 @@ import i18next from 'i18next';
 
 export const Pages = {
     Home: "/",
+    Scan:"/scan",
     VerifyCredentials: "/",/*"/verify"*/
     Offline: "/offline",
     Redirect: "/redirect",