Merge pull request #32 from tw-mosip/INJIWEB-212-help-screen-corrections

[INJIWEB-212]: update help screen contents
mosip · Apr 16, 2024 · 02703af · 02703af
2 parents 7676a3d + 77489b1
commit 02703af
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 24 deletions.
diff --git a/inji-web/public/favicon.ico b/inji-web/public/favicon.ico
diff --git a/inji-web/public/index.html b/inji-web/public/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon"  href="%PUBLIC_URL%/inji-logo.png" />
+    <link rel="icon" type="image/x-icon" href="/favicon.ico">
     <link rel="preconnect" href="https://rsms.me/">
     <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
     <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -11,12 +11,10 @@
       name="description"
       content="Web site created using create-react-app"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

diff --git a/inji-web/src/components/Help/HelpContent.jsx b/inji-web/src/components/Help/HelpContent.jsx
@@ -2,44 +2,44 @@ import {useState} from "react";
 import {HelpContentItem} from "./HelpContentItem";
 
 const data = [
+
     {
         panelId: "panel1",
-        panelHeading: "What is credential?",
-        panelContent: "Verifiable credentials are digital documents that help users to share information like identity or qualifications to the service provider which can be instantly verified. They're issued by trusted entities and can be cryptographically verified for authenticity. These credentials streamline identity verification processes."
+        panelHeading: "Who are issuers?",
+        panelContents: ["Issuers are either governmental bodies or entities trusted by the government, responsible for providing verifiable credentials in PDF format to residents upon request."]
     },
     {
         panelId: "panel2",
-        panelHeading: "Who are issuers?",
-        panelContent: "Issuers are either governmental bodies or entities trusted by the government, responsible for providing verifiable credentials in PDF format to residents upon request."
+        panelHeading: "What are verifiable credentials?",
+        panelContents: ["Verifiable credentials are digital documents that help users to share information like identity or qualifications to the service provider which can be instantly verified. They're issued by trusted entities and can be cryptographically verified for authenticity. These credentials streamline identity verification processes."]
     },
     {
         panelId: "panel3",
         panelHeading: "How can I download a credential in Inji Web?",
-        panelContent: "Step1: Search & choose an Issuer from the landing page and select a credential type.\n" +
-            "\n" +
-            "Step2: In the authentication page, provide required details\n" +
-            "\n" +
-            "Step3: PDF format of the verifiable credential will be downloaded into the system."
+        panelContents: [
+            "Step 1: Search & choose an Issuer from the landing page and select a credential type.",
+            "Step 2: In the authentication page, provide required details",
+            "Step 3: PDF format of the verifiable credential will be downloaded into the system. "]
     },
     {
         panelId: "panel4",
         panelHeading: "What details I need to provide to download my credential?",
-        panelContent: "The credential issuer would have provided details like UIN/VID in case of MOSIP National ID or Policy number, Name and DoB for an Insurance card. This information has to be fed to the authentication system to enable download."
+        panelContents: ["The credential issuer would have provided details like UIN/VID in case of MOSIP National ID or Policy number, Name and DoB for an Insurance card. This information has to be fed to the authentication system to enable download."]
     },
     {
         panelId: "panel5",
         panelHeading: "Where can I find my credential?",
-        panelContent: "The verifiable credential will be downloaded into the Downloads folder of your system."
+        panelContents: ["The verifiable credential will be downloaded into the Downloads folder of your system."]
     },
     {
         panelId: "panel6",
         panelHeading: "What details are present in the PDF credential?",
-        panelContent: "Details collected as part of the registration process will be presented in the PDF. At present, for Insurance use case, one can find Policy details like Name, DoB, "
+        panelContents: ["Details collected as part of the registration process will be presented in the PDF. At present, for Insurance use case, one can find Policy details like Name, DoB, "]
     },
     {
         panelId: "panel7",
         panelHeading: "Why I am not finding the list of issuers?",
-        panelContent: "We’re sorry you stumbled upon an error. However, please check if the issuers' end point is available. If the end point health check is good, please check if the issuers list is configured in the mimoto-issuers config.json."
+        panelContents: ["We’re sorry you stumbled upon an error. However, please check if the issuers' end point is available. If the end point health check is good, please check if the issuers list is configured in the mimoto-issuers config.json."]
     }
 ]
 
@@ -50,10 +50,13 @@ export const HelpContent  = () => {
             setExpanded(isExpanded ? panel : false);
         };
 
-    return data.map(entry => <HelpContentItem panelId={entry.panelId}
+    return data.map(entry =>
+    <div style={{display:"flex",borderRadius: "10px",minWidth: "200%"}}>
+        <HelpContentItem panelId={entry.panelId}
                                               expanded={expanded}
                                               handleChange={handleChange}
                                               panelHeading={entry.panelHeading}
-                                              panelContent={entry.panelContent} />
+                                              panelContents={entry.panelContents} />
+    </div>
     )
 }
diff --git a/inji-web/src/components/Help/HelpContentItem.jsx b/inji-web/src/components/Help/HelpContentItem.jsx
@@ -5,7 +5,7 @@ import Typography from "@mui/material/Typography";
 import AccordionDetails from "@mui/material/AccordionDetails";
 import {HorizontalLine} from "../atoms/HorizontalLine";
 
-export const HelpContentItem = ({panelId, expanded, handleChange, panelHeading, panelContent}) => {
+export const HelpContentItem = ({panelId, expanded, handleChange, panelHeading, panelContents}) => {
     return <Accordion expanded={expanded === panelId} onChange={handleChange(panelId)} style={{width: "200%", marginBottom: "20px"}}>
         <AccordionSummary
             expandIcon={<ArrowDropDownIcon />}
@@ -17,9 +17,10 @@ export const HelpContentItem = ({panelId, expanded, handleChange, panelHeading,
             </Typography>
         </AccordionSummary>
         <AccordionDetails>
-            <Typography style={{ padding: '5px' }}>
+            {panelContents.map(panelContent => <Typography style={{ padding: '5px' }}>
                 {panelContent}
-            </Typography>
+            </Typography>)}
+
         </AccordionDetails>
     </Accordion>
 }
diff --git a/inji-web/src/components/PageTemplate/Navbar.jsx b/inji-web/src/components/PageTemplate/Navbar.jsx
@@ -21,10 +21,10 @@ function Navbar(props) {
                         </StyledGridItem>
                         <StyledGridItem item xs={9} style={{justifyContent: 'end'}}>
                             <Box>
-                                <StyledLink href={"/help"}>{"Help"}</StyledLink>
+                                <StyledLink href={"https://docs.mosip.io/inji"} target="_blank" rel="noopener noreferrer">{"About Inji"}</StyledLink>
                             </Box>
                             <Box>
-                                <StyledLink href={"https://docs.mosip.io/inji"} target="_blank" rel="noopener noreferrer">{"About Inji"}</StyledLink>
+                                <StyledLink href={"/help"}>{"Help"}</StyledLink>
                             </Box>
                         </StyledGridItem>
                     </Grid>

diff --git a/inji-web/src/pages/PageTemplate/PageTemplate.jsx b/inji-web/src/pages/PageTemplate/PageTemplate.jsx
@@ -42,7 +42,7 @@ function PageTemplate({children}) {
             <Navbar/>
             {children}
             <Footer/>
-            <ToastContainer />
+            <ToastContainer style={{width: '450px'}}/>
             <AlertMessage
                 message={error}
                 severity='error'