From f8ad049a80c325dcd49627f9ecb3962896cf321c Mon Sep 17 00:00:00 2001 From: Sudhanshu Tripathi Date: Sun, 15 May 2022 11:46:03 +0530 Subject: [PATCH] UI linking done --- frontend/src/Routes.js | 9 + .../src/customer/onboarding/BusinessOption.js | 56 +++++- frontend/src/customer/onboarding/Consent.js | 5 + .../src/customer/onboarding/MobileBankLink.js | 2 +- .../customer/onboarding/MobileBankUpload.js | 1 - frontend/src/customer/onboarding/PanProof.js | 19 +- frontend/src/customer/onboarding/Summary.js | 5 + .../businessProofComponents/FssaiUpload.js | 82 +++++---- .../businessProofComponents/GstUpload.js | 78 ++++---- .../businessProofComponents/ShopEstUpload.js | 82 +++++---- .../businessProofComponents/UdyamUpload.js | 83 +++++---- .../mobileBankLinkComponents/BankData.js | 59 +++++- .../mobileBankLinkComponents/BankDetails.js | 171 ++++++++++++++++++ .../mobileBankLinkComponents/PhoneNumber.js | 12 +- .../onboarding/panProofComponents/Aadhar.js | 66 ++++--- .../panProofComponents/PanUpload.js | 23 ++- .../panProofComponents/PanUploaded.js | 145 +++++++++++---- 17 files changed, 639 insertions(+), 259 deletions(-) create mode 100644 frontend/src/customer/onboarding/mobileBankLinkComponents/BankDetails.js diff --git a/frontend/src/Routes.js b/frontend/src/Routes.js index 1af702b..43b3d0f 100644 --- 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 = () => { + + + + + + + diff --git a/frontend/src/customer/onboarding/BusinessOption.js b/frontend/src/customer/onboarding/BusinessOption.js index 0136097..0a9e4e2 100644 --- 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 = () => { } + control={ + + } label="UDYAM" /> } + control={ + + } label="Shop establishment" /> } + control={ + + } label="FSSAI" /> } + control={ + + } label="GST" /> } + control={ + + } label="Others" /> diff --git a/frontend/src/customer/onboarding/Consent.js b/frontend/src/customer/onboarding/Consent.js index 39b180b..e6804b9 100644 --- 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 ( <> @@ -218,6 +220,9 @@ const Consent = () => { backgroundColor: "#fff", color: "#7165E3", }} + onClick={() => { + history.push("./finish"); + }} > I AGREE diff --git a/frontend/src/customer/onboarding/MobileBankLink.js b/frontend/src/customer/onboarding/MobileBankLink.js index 4876e34..eb4bdc4 100644 --- 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 index b5c5d84..ac17b18 100644 --- 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 index 7405602..3ad79f1 100644 --- 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 - + - {(() => { - switch (next) { - case "panUpload": - return ; - case "panUploaded": - return ; - default: - return ; - } - })()} + ); diff --git a/frontend/src/customer/onboarding/Summary.js b/frontend/src/customer/onboarding/Summary.js index 71abcb4..38cac21 100644 --- 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 diff --git a/frontend/src/customer/onboarding/businessProofComponents/FssaiUpload.js b/frontend/src/customer/onboarding/businessProofComponents/FssaiUpload.js index efffc91..e598f8d 100644 --- 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 ( <> - - + - FSSAI Certificate - - - + + FSSAI Certificate + - - - + /> + + + + + + @@ -201,8 +203,8 @@ const FssaiUpload = () => { - - + /> + + + + + + diff --git a/frontend/src/customer/onboarding/businessProofComponents/ShopEstUpload.js b/frontend/src/customer/onboarding/businessProofComponents/ShopEstUpload.js index 1cbf623..38775d7 100644 --- a/frontend/src/customer/onboarding/businessProofComponents/ShopEstUpload.js +++ b/frontend/src/customer/onboarding/businessProofComponents/ShopEstUpload.js @@ -144,50 +144,52 @@ const ShopEstUpload = () => { const ShopEstUploadedForm = () => { return ( <> - - + - Shop Establishment Certificate - - - + + Shop Establishment Certificate + - - - + /> + + + + + + @@ -204,8 +206,8 @@ const ShopEstUpload = () => { - - + /> + + + + + + @@ -194,8 +196,8 @@ const UdyamUpload = () => { diff --git a/frontend/src/customer/onboarding/mobileBankLinkComponents/BankDetails.js b/frontend/src/customer/onboarding/mobileBankLinkComponents/BankDetails.js new file mode 100644 index 0000000..ed7b5b0 --- /dev/null +++ b/frontend/src/customer/onboarding/mobileBankLinkComponents/BankDetails.js @@ -0,0 +1,171 @@ +import React, { useState } from "react"; +import { + Container, + Stack, + Box, + Typography, + Button, + LinearProgress, +} from "@mui/material"; +import { useHistory } from "react-router-dom"; + +const LinearProgressWithLabel = (props) => { + return ( + + + + + + {`${Math.round( + props.value + )}%`} + + + ); +}; + +const BankDetails = () => { + const history = useHistory(); + const [verify, setVerify] = useState(false); //for frontend side + const [verified, setVerified] = useState(false); //to set verification from backend + + return ( + <> + + +
+ 3/6 +
+ + + + + + + + Bank Account No + + XXXXXXXXXXXXXX + + + + IFSC Code + + SBIN01578 + + + {verified ? ( + + + Verified ! + + + + + + + ) : !verify ? ( + + Please confirm your account + + ) : ( + + Please wait while we verify your account + + )} + + {verified ? ( + "" + ) : ( + + + + )} + + ); +}; + +export default BankDetails; diff --git a/frontend/src/customer/onboarding/mobileBankLinkComponents/PhoneNumber.js b/frontend/src/customer/onboarding/mobileBankLinkComponents/PhoneNumber.js index 3c34892..14a15f8 100644 --- a/frontend/src/customer/onboarding/mobileBankLinkComponents/PhoneNumber.js +++ b/frontend/src/customer/onboarding/mobileBankLinkComponents/PhoneNumber.js @@ -1,8 +1,9 @@ import React, { useState } from "react"; import { Container, Typography, Box, TextField, Button } from "@mui/material"; -import { Link } from "react-router-dom"; +import { Link, useHistory } from "react-router-dom"; const PhoneNumber = () => { + const history = useHistory(); const [mobileNumber, setMobileNumber] = useState(""); const [otp, setOtp] = useState(""); const [display, setDisplay] = useState(false); @@ -112,7 +113,14 @@ const PhoneNumber = () => { {display ? OtpForm() : ""} - diff --git a/frontend/src/customer/onboarding/panProofComponents/Aadhar.js b/frontend/src/customer/onboarding/panProofComponents/Aadhar.js index 0993d0d..8b9ea6b 100644 --- a/frontend/src/customer/onboarding/panProofComponents/Aadhar.js +++ b/frontend/src/customer/onboarding/panProofComponents/Aadhar.js @@ -15,6 +15,7 @@ import { import { ToastContainer, toast } from "react-toastify"; import "react-toastify/dist/ReactToastify.css"; import SyncLoader from "react-spinners/SyncLoader"; +import { useHistory } from "react-router-dom"; const LinearProgressWithLabel = (props) => { return ( @@ -32,6 +33,7 @@ const LinearProgressWithLabel = (props) => { }; const Aadhar = () => { + const history = useHistory(); const [page, setPage] = useState(0); const [display, setDisplay] = useState(0); const [aadhar, setAadhar] = useState(""); @@ -127,7 +129,7 @@ const Aadhar = () => { async function onSendAadharOtp() { try { setotpLoading(true); - let res = await sendAadhaarOTP(aadhar, "Aniruddha Shahaji Thorat", ""); + let res = await sendAadhaarOTP(aadhar, "Sudhanshu Tripathi", ""); setotpLoading(false); if (res.status) { setAadharData({ ...aadharData, ...res }); @@ -143,31 +145,6 @@ const Aadhar = () => { return ( <> - - -
- 2/6 -
- - - { }; return ( <> - + { @@ -305,7 +284,36 @@ const Aadhar = () => { ); }; - return <>{page ? aadharUploadedForm() : aadharForm()}; + return ( + <> + + +
+ 2/6 +
+ + + + {page ? aadharUploadedForm() : aadharForm()} + + ); }; export default Aadhar; diff --git a/frontend/src/customer/onboarding/panProofComponents/PanUpload.js b/frontend/src/customer/onboarding/panProofComponents/PanUpload.js index 0f78e29..b50fff1 100644 --- a/frontend/src/customer/onboarding/panProofComponents/PanUpload.js +++ b/frontend/src/customer/onboarding/panProofComponents/PanUpload.js @@ -1,8 +1,13 @@ import { useRef, useState } from "react"; import { Box, Typography, Button, Container } from "@mui/material"; import { getOCRFetch } from '../../../services/serviceHelper'; +import { useHistory } from "react-router-dom"; + +const PanUpload = () => { + + const history = useHistory(); + const [panData, setPanData] = useState({}); -const PanUpload = ({ handleClick }) => { const [selectedFile, setSelectedFile] = useState(); // Reference to the hidden file input element const hiddenFileInput = useRef(null); @@ -13,10 +18,16 @@ const PanUpload = ({ handleClick }) => { // Handle file selection const handleChange = async (event) => { - setSelectedFile(event.target.files[0]); - const res = await getOCRFetch(selectedFile, ''); - console.log(res); + let url = event.target.files[0] + setSelectedFile(url); + const res = await getOCRFetch(url, ''); + setPanData(({...panData,...res})); + }; + + const handleNext = async (event) => { + // Redirect to Verification page + history.push({ pathname: './PanUploaded', state: { 'data': panData } }); }; return ( @@ -63,7 +74,7 @@ const PanUpload = ({ handleClick }) => { @@ -72,4 +83,4 @@ const PanUpload = ({ handleClick }) => { ); }; -export default PanUpload; +export default PanUpload; \ No newline at end of file diff --git a/frontend/src/customer/onboarding/panProofComponents/PanUploaded.js b/frontend/src/customer/onboarding/panProofComponents/PanUploaded.js index abc9d78..3491b5a 100644 --- a/frontend/src/customer/onboarding/panProofComponents/PanUploaded.js +++ b/frontend/src/customer/onboarding/panProofComponents/PanUploaded.js @@ -1,49 +1,108 @@ -import React from "react"; -import { Box, Typography, Button, Container, Stack } from "@mui/material"; -import { useHistory } from "react-router-dom"; +import React, { useEffect } from "react"; +import { + Box, + Typography, + Button, + Container, + Stack, + LinearProgress, +} from "@mui/material"; +import { useHistory, useLocation } from "react-router-dom"; + +const LinearProgressWithLabel = (props) => { + return ( + + + + + + {`${Math.round( + props.value + )}%`} + + + ); +}; const PanUploaded = () => { const history = useHistory(); + const location = useLocation(); + const panDetails = location?.state?.data ?? ""; + let fullName = panDetails.data.result[0].details.name["value"]; + const nameArray = fullName.split(" "); + + // useEffect(() => { + // console.log(panDetails); + // }, []); + return ( <> - - + - PAN Card - - + 1/6 + + + + + + - + > + + PAN Card + - - - + + + + + + + { }} > PAN No - ABCDE1234Z + + {panDetails.data.result[0].details.panNo["value"]} + { }} > First Name - Test + {nameArray[0]} { }} > Last Name - Test + + {nameArray[nameArray.length - 1]} + { }} > DOB - 00/00/0000 + + {panDetails.data.result[0].details.date["value"]} + { }} > Father’s Name - Test + + {panDetails.data.result[0].details.father["value"]} +