UI linking done

DnyaneshWarade · May 15, 2022 · f8ad049 · f8ad049
1 parent 373410e
commit f8ad049
Show file tree

Hide file tree

Showing 17 changed files with 639 additions and 259 deletions.
diff --git a/frontend/src/Routes.js b/frontend/src/Routes.js
@@ -45,6 +45,8 @@ import BusinessProofUpload from "./customer/onboarding/businessProofComponents/B
 import Selfie from "./customer/onboarding/businessProofComponents/Selfie";
 import BankData from "./customer/onboarding/mobileBankLinkComponents/BankData";
 import PhoneNumber from "./customer/onboarding/mobileBankLinkComponents/PhoneNumber";
+import PanUploaded from "./customer/onboarding/panProofComponents/PanUploaded";
+import BankDetails from "./customer/onboarding/mobileBankLinkComponents/BankDetails";
 
 const Routes = () => {
   return (
@@ -80,6 +82,13 @@ const Routes = () => {
         <Route exact path="/selfie" component={Selfie} />
         <Route exact path="/bank" component={MobileBankLink} />
         <Route exact path="/bankdata" component={MobileBankUpload} />
+        <Route exact path="/panUploaded" component={PanUploaded} />
+        <Route exact path="/summary" component={Summary} />
+        <Route exact path="/consent" component={Consent} />
+        <Route exact path="/finish" component={Congratulations} />
+        <Route exact path="/bankdetail" component={BankDetails} />
+        <Route exact path="/bankdetailupload" component={BankData} />
+
 
       </Switch>
     </BrowserRouter>

diff --git a/frontend/src/customer/onboarding/BusinessOption.js b/frontend/src/customer/onboarding/BusinessOption.js
@@ -4,6 +4,7 @@ import Radio from "@mui/material/Radio";
 import RadioGroup from "@mui/material/RadioGroup";
 import FormControlLabel from "@mui/material/FormControlLabel";
 import FormControl from "@mui/material/FormControl";
+import { lime, pink, white } from "@mui/material/colors";
 import { useHistory } from "react-router-dom";
 
 const BusinessOption = () => {
@@ -20,27 +21,72 @@ const BusinessOption = () => {
         <RadioGroup value={option} onChange={handleChange}>
           <FormControlLabel
             value="udyam"
-            control={<Radio color="default" />}
+            control={
+              <Radio
+                sx={{
+                  // color: lime[800],
+                  "&.Mui-checked": {
+                    color: lime[600],
+                  },
+                }}
+              />
+            }
             label="UDYAM"
           />
           <FormControlLabel
             value="shop"
-            control={<Radio color="default" />}
+            control={
+              <Radio
+                sx={{
+                  // color: lime[800],
+                  "&.Mui-checked": {
+                    color: lime[600],
+                  },
+                }}
+              />
+            }
             label="Shop establishment"
           />
           <FormControlLabel
             value="fssai"
-            control={<Radio color="default" />}
+            control={
+              <Radio
+                sx={{
+                  // color: lime[800],
+                  "&.Mui-checked": {
+                    color: lime[600],
+                  },
+                }}
+              />
+            }
             label="FSSAI"
           />
           <FormControlLabel
             value="gst"
-            control={<Radio color="default" />}
+            control={
+              <Radio
+                sx={{
+                  // color: lime[800],
+                  "&.Mui-checked": {
+                    color: lime[600],
+                  },
+                }}
+              />
+            }
             label="GST"
           />
           <FormControlLabel
             value="other"
-            control={<Radio color="default" />}
+            control={
+              <Radio
+                sx={{
+                  // color: lime[800],
+                  "&.Mui-checked": {
+                    color: lime[600],
+                  },
+                }}
+              />
+            }
             label="Others"
           />
         </RadioGroup>

diff --git a/frontend/src/customer/onboarding/Consent.js b/frontend/src/customer/onboarding/Consent.js
@@ -1,5 +1,6 @@
 import React from "react";
 import { Box, Button, Container, Typography } from "@mui/material";
+import { useHistory } from "react-router-dom";
 
 const Item1 = ({ sno, path1, path2, path3, text }) => {
   return (
@@ -143,6 +144,7 @@ const Item2 = ({ sno, path1, path2, text }) => {
 };
 
 const Consent = () => {
+  const history = useHistory();
   return (
     <>
       <style>{"body { background-color: #7165E3; }"}</style>
@@ -218,6 +220,9 @@ const Consent = () => {
             backgroundColor: "#fff",
             color: "#7165E3",
           }}
+          onClick={() => {
+            history.push("./finish");
+          }}
         >
           I AGREE
         </Button>

diff --git a/frontend/src/customer/onboarding/MobileBankLink.js b/frontend/src/customer/onboarding/MobileBankLink.js
@@ -49,7 +49,7 @@ const MobileBankLink = () => {
               backgroundColor: "#9EA6BE",
             }}
             onClick={()=>{
-              history.push("./bankdetail")
+              history.push("./bankdetailupload")
             }}
           >
             No

diff --git a/frontend/src/customer/onboarding/MobileBankUpload.js b/frontend/src/customer/onboarding/MobileBankUpload.js
@@ -11,7 +11,6 @@ import {
 } from "@mui/material";
 
 import PhoneNumber from "./mobileBankLinkComponents/PhoneNumber";
-import BankData from "./mobileBankLinkComponents/BankData";
 
 const MobileBankUpload = () => {
   const [bank, setBank] = useState("");

diff --git a/frontend/src/customer/onboarding/PanProof.js b/frontend/src/customer/onboarding/PanProof.js
@@ -1,9 +1,7 @@
 import React, { useState } from "react";
-import { Container, Box, Typography } from "@mui/material";
-import LinearProgress from "@mui/material/LinearProgress";
+import { Container, Box, Typography, LinearProgress } from "@mui/material";
 import PanUpload from "./panProofComponents/PanUpload";
 import PanUploaded from "./panProofComponents/PanUploaded";
-import Aadhar from "./panProofComponents/Aadhar";
 
 const LinearProgressWithLabel = (props) => {
   return (
@@ -21,7 +19,6 @@ const LinearProgressWithLabel = (props) => {
 };
 
 const PanProof = () => {
-  const [progress, setProgress] = useState(30);
   const [next, setNext] = useState("panUpload");
 
   const handleClick = (component) => {
@@ -47,23 +44,15 @@ const PanProof = () => {
               display: "flex",
               justifyContent: "center",
               alignItems: "center",
+              color: "#fff",
             }}
           >
             1/6
           </div>
-          <LinearProgressWithLabel value={progress} />
+          <LinearProgressWithLabel value={16} />
         </Box>
 
-        {(() => {
-          switch (next) {
-            case "panUpload":
-              return <PanUpload handleClick={handleClick} />;
-            case "panUploaded":
-              return <PanUploaded handleClick={handleClick} />;
-            default:
-              return <PanUpload />;
-          }
-        })()}
+        <PanUpload />
       </Container>
     </>
   );

diff --git a/frontend/src/customer/onboarding/Summary.js b/frontend/src/customer/onboarding/Summary.js
@@ -1,7 +1,9 @@
 import React from "react";
 import { Box, Button, Container, Stack, Typography } from "@mui/material";
+import { useHistory } from "react-router-dom";
 
 const Summary = () => {
+  const history = useHistory();
   const Item = ({ name }) => {
     return (
       <>
@@ -58,6 +60,9 @@ const Summary = () => {
             float: "right",
             backgroundColor: "#7165E3",
           }}
+          onClick={() => {
+            history.push("./consent");
+          }}
         >
           Confirm
         </Button>

diff --git a/frontend/src/customer/onboarding/businessProofComponents/FssaiUpload.js b/frontend/src/customer/onboarding/businessProofComponents/FssaiUpload.js
@@ -142,50 +142,52 @@ const FssaiUpload = () => {
   const FssaiUploadedForm = () => {
     return (
       <>
-        <Box
-          sx={{
-            display: "grid",
-            gridTemplateColumns: "1fr 1fr 0.5fr",
-            alignItems: "center",
-            textAlign: "center",
-          }}
-        >
-          <Typography
-            variant="body1"
+        <Container maxWidth="md">
+          <Box
             sx={{
-              color: "#7165E3",
+              display: "grid",
+              gridTemplateColumns: "1fr 1fr 0.5fr",
+              alignItems: "center",
+              textAlign: "center",
             }}
           >
-            FSSAI Certificate
-          </Typography>
-          <img
-            src=""
-            alt=""
-            style={{
-              backgroundColor: "#C4C4C4",
-              width: "102px",
-              height: "102px",
-              objectFit: "cover",
-              borderRadius: "12px",
-            }}
-          />
-          <Stack sx={{ alignItems: "center" }}>
+            <Typography
+              variant="body1"
+              sx={{
+                color: "#7165E3",
+              }}
+            >
+              FSSAI Certificate
+            </Typography>
             <img
-              src="./assets/done.gif"
+              src=""
               alt=""
-              style={{ height: "48px", width: "48px", objectFit: "contain" }}
-            />
-            <Button
-              variant="contained"
-              sx={{ backgroundColor: "#7165E3" }}
-              onClick={() => {
-                setSelectedFile("");
+              style={{
+                backgroundColor: "#C4C4C4",
+                width: "102px",
+                height: "102px",
+                objectFit: "cover",
+                borderRadius: "12px",
               }}
-            >
-              Recapture
-            </Button>
-          </Stack>
-        </Box>
+            />
+            <Stack sx={{ alignItems: "center" }}>
+              <img
+                src="./assets/done.gif"
+                alt=""
+                style={{ height: "48px", width: "48px", objectFit: "contain" }}
+              />
+              <Button
+                variant="contained"
+                sx={{ backgroundColor: "#7165E3" }}
+                onClick={() => {
+                  setSelectedFile("");
+                }}
+              >
+                Recapture
+              </Button>
+            </Stack>
+          </Box>
+        </Container>
         <Container maxWidth="sm" sx={{ mt: "42px" }}>
           <Stack>
             <Item name="FSSAI No" value={fssaiNo} />
@@ -201,8 +203,8 @@ const FssaiUpload = () => {
           <Button
             variant="contained"
             sx={{ backgroundColor: "#7165E3", float: "right" }}
-            onClick={()=>{
-              history.push("./utilitybill")
+            onClick={() => {
+              history.push("./utilitybill");
             }}
           >
             Next