Merge pull request #250 from tw-mosip/injiver-833-demo-changes

Injiver 833 demo changes

ui/src/App.tsx

@@ -8,7 +8,6 @@ import AlertMessage from "./components/commons/AlertMessage";
 import PreloadImages from "./components/commons/PreloadImages";
 import OvpRedirect from "./pages/OvpRedirect";
 import FarmerCredential from "./pages/FarmerCredential";
-import MOSIPVerifiableCredential from "./pages/MOSIPVerifiableCredential";
 import PageNotFound404 from "./pages/PageNotFound404";
 import { Pages } from "./utils/config";
 import { useAppSelector } from "./redux/hooks";
@@ -17,6 +16,8 @@ import { isRTL } from "./utils/i18n";
 import { VerificationMethod } from "./types/data-types";
 import { goToHomeScreen } from "./redux/features/verification/verification.slice";
 import { Verify } from "./pages/Verify";
+import BlankApplication from "./pages/BlankApplication";
+import MosipC from "./pages/MosipC";
 
 function switchToVerificationMethod(method: VerificationMethod) {
   store.dispatch(goToHomeScreen({ method }));
@@ -43,18 +44,22 @@ const router = createBrowserRouter([
     path: Pages.Redirect,
     element: <OvpRedirect />,
   },
+  {
+    path: Pages.Offline,
+    element: <Offline />,
+  },
+    {
+        path: Pages.BlankApplication,
+        element: <BlankApplication />,
+    },
     {
-        path: Pages.MOSIPVerifiableCredential,
-        element: <MOSIPVerifiableCredential />,
+        path: Pages.MosipC,
+        element: <MosipC/>,
     },
     {
-        path: Pages.FarmerCredential,
+        path: Pages.FarmerC,
         element: <FarmerCredential />,
     },
-  {
-    path: Pages.Offline,
-    element: <Offline />,
-  },
   {
     path: Pages.PageNotFound,
     element: <PageNotFound404 />,

ui/src/components/Home/VerificationSection/Result/VcDisplayCard.tsx

@@ -15,15 +15,15 @@ import { goToHomeScreen } from "../../../../redux/features/verification/verifica
 import { useTranslation } from "react-i18next";
 import { resetVpRequest } from "../../../../redux/features/verify/verifyState";
 
-function VcDisplayCard({ vc }: { vc: any }) {
+function VcDisplayCard(props: displayProps) {
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
   const [isHover, setHover] = useState(false);
   const Download = isHover ? WhiteDownloadIcon : DownloadIcon;
 
   const saveData = async () => {
-    const myData = vc;
-    const fileName = `${vc.credentialSubject.fullName}`;
+    const myData = props.vc;
+    const fileName = `${props.vc.credentialSubject.fullName}`;
     const json = JSON.stringify(myData);
     const blob = new Blob([json], { type: "application/json" });
     const href = URL.createObjectURL(blob);
@@ -41,8 +41,8 @@ function VcDisplayCard({ vc }: { vc: any }) {
       <div
         className={`grid w-[340px] m-auto bg-white rounded-[12px] py-[5px] px-[15px] shadow-lg`}
       >
-        {vc ? (
-          Object.keys(vc.credentialSubject)
+        {props.vc ? (
+          Object.keys(props.vc.credentialSubject)
             .filter(
               (key) =>
                 key?.toLowerCase() !== "id" && key?.toLowerCase() !== "type"
@@ -66,7 +66,7 @@ function VcDisplayCard({ vc }: { vc: any }) {
                   id={`${convertToId(key)}-value`}
                   className="font-bold text-smallTextSize break-all"
                 >
-                  {getDisplayValue(vc.credentialSubject[key])}
+                  {getDisplayValue(props.vc.credentialSubject[key])}
                 </p>
               </div>
             ))
@@ -82,7 +82,7 @@ function VcDisplayCard({ vc }: { vc: any }) {
           icon={<Download />}
           className="w-[125px] mt-2"
           onClick={saveData}
-          disabled={!vc}
+          disabled={!props.vc}
           onMouseEnter={() => setHover(true)}
           onMouseLeave={() => setHover(false)}
         />
@@ -102,13 +102,17 @@ function VcDisplayCard({ vc }: { vc: any }) {
               title="Proceed"
               className="w-[200px] lg:w-[350px] mb-20 lg:mb-6 text-lgNormalTextSize inline-flex"
               onClick={() => {
-                  const loc = vc?.type?.includes("MOSIPVerifiableCredential") ? "MOSIPVerifiableCredential" : "FarmerCredential"
-                  window.location.href = `/${loc}`
+                  window.location.href = (decodeURIComponent(`${props.loc.split("?")[1].split('=')[1]}`));
               }}
           />
       </div>
     </div>
   );
 }
 
+export type displayProps = {
+    vc: any;
+    loc: string;
+};
+
 export default VcDisplayCard;

ui/src/components/Home/VerificationSection/Result/VpSubmissionResult.tsx

@@ -3,7 +3,7 @@ import ResultSummary from "./ResultSummary";
 import VcDisplayCard from "./VcDisplayCard";
 import {  useVerifyFlowSelector } from "../../../../redux/features/verification/verification.selector";
 
-const VpSubmissionResult = () => {
+const VpSubmissionResult = (props: displayProps) => {
     const { vc, vcStatus } = useVerifyFlowSelector(state => state.verificationSubmissionResult ?? { vc: null, vcStatus: null })
 
     // validate vc and show success/failure component
@@ -18,10 +18,13 @@ const VpSubmissionResult = () => {
                     top: `106px`,
                     right: window.innerWidth >= 1024 ? `calc((50vw - 340px) / 2)` : `calc((100vw - 340px) / 2)`
                 }}>
-                <VcDisplayCard vc={vc ? vc : null} />
+                <VcDisplayCard vc={vc ? vc : null} loc={props.loc}/>
             </div>
         </div>
     );
 }
 
+export type displayProps = {
+    loc: string;
+};
 export default VpSubmissionResult;

ui/src/components/Home/VerificationSection/Result/index.tsx

@@ -22,7 +22,7 @@ const Result = () => {
                     top: `106px`,
                     right: window.innerWidth >= 1024 ? `calc((50vw - 340px) / 2)` : `calc((100vw - 340px) / 2)`
                 }}>
-                <VcDisplayCard vc={vcStatus?.verificationStatus !== "INVALID" ? vc : null} />
+                <VcDisplayCard vc={vcStatus?.verificationStatus !== "INVALID" ? vc : null} loc={window.location.href}/>
             </div>
         </div>
     );

ui/src/components/Home/VerificationSection/VpVerification.tsx

@@ -7,7 +7,7 @@ import { useTranslation } from "react-i18next";
 import { QrCode } from "../../commons/QrCode";
 import VpSubmissionResult from "./Result/VpSubmissionResult";
 
-const DisplayActiveStep = () => {
+const DisplayActiveStep = (loc: string) => {
   const { t } = useTranslation("Verify");
   const [timeLeft, setTimeLeft] = useState(QrCodeExpiry);
   const isLoading = useVerifyFlowSelector((state) => state.isLoading);
@@ -42,7 +42,7 @@ const DisplayActiveStep = () => {
   } else if (status === "COMPLETED") {
     return (
       <div className="col-start-1 col-end-13 lg:col-start-7 lg:col-end-13 xs:[100vw] lg:max-w-[50vw]">
-        <VpSubmissionResult />
+        <VpSubmissionResult loc={loc}/>
       </div>
     );
   } else if (!qrData) {
@@ -79,6 +79,10 @@ const DisplayActiveStep = () => {
   }
 };
 
-export const VpVerification = () => {
-  return <div>{DisplayActiveStep()}</div>;
+export type displayProps = {
+  loc: string;
+};
+
+export const VpVerification = (props: displayProps) => {
+  return <div>{DisplayActiveStep(props.loc)}</div>;
 };

ui/src/pages/BlankApplication.tsx

@@ -0,0 +1,11 @@
+
+
+import React from 'react';
+
+function BlankApplication(props: any) {
+    return (
+        <><h1>This is a page with Blank application</h1><a href={"/?re=https%3A%2F%2Finjiverify.dev1.mosip.net%2Fmosipc"}> Click here to proceed</a></>
+    );
+}
+
+export default BlankApplication;

ui/src/pages/FarmerCredential.tsx

@@ -4,7 +4,9 @@ import React from 'react';
 
 function FarmerCredential(props: any) {
     return (
-    <><p>YAY!!! FarmerCredential Page</p><a href={"/"}> Click here to redirect</a></>
+        <><h1>This is a page with National ID Credential details and Farmer Credentials Prefilled </h1>
+            <h2>Successfully addded all the details </h2>
+            <a href={"/?re=https%3A%2F%2Finjiverify.dev1.mosip.net%2Fblank"}> Click here to go to Home</a></>
     );
 }
 

ui/src/pages/MosipC.tsx

@@ -0,0 +1,11 @@
+
+
+import React from 'react';
+
+function MosipC(props: any) {
+    return (
+        <><h1>This is a page with National ID Credential details Prefilled </h1><a href={"/?re=https%3A%2F%2Finjiverify.dev1.mosip.net%2Ffarmerc"}> Click here to proceed</a></>
+    );
+}
+
+export default MosipC;

ui/src/pages/Verify.tsx

@@ -33,7 +33,7 @@ export function Verify() {
           {openSelection && <SelectionPannel />}
         </div>
         <div className="col-start-1 col-end-13 lg:col-start-7 lg:col-end-13 xs:[100vw] lg:max-w-[50vw]">
-          <VpVerification />
+          <VpVerification loc={window.location.href}/>
         </div>
       </div>
     </PageTemplate>

ui/src/utils/config.ts

@@ -9,8 +9,9 @@ export const Pages = {
     VerifyCredentials: "/verify",
     Offline: "/offline",
     Redirect: "/redirect",
-    MOSIPVerifiableCredential: "/MOSIPVerifiableCredential",
-    FarmerCredential: "/FarmerCredential",
+    BlankApplication: "/blank",
+    MosipC: "/mosipc",
+    FarmerC: "/farmerc",
     PageNotFound: "*"
 }