From f1bf101fbae8b363d091cbfe939c51b96759fac9 Mon Sep 17 00:00:00 2001 From: Anirudha619 Date: Tue, 10 May 2022 22:54:00 +0530 Subject: [PATCH] MObile and aadhar page connected to bacckend function --- frontend/src/customer/onboarding/Mobile.js | 32 ++++- .../src/customer/onboarding/VerifyNumber.js | 117 ++++++++-------- .../onboarding/panProofComponents/Aadhar.js | 131 ++++++++++++++---- frontend/src/services/dygnifyAxiosOptions.js | 43 +++++- frontend/src/services/serviceHelper.js | 33 ++++- 5 files changed, 270 insertions(+), 86 deletions(-) diff --git a/frontend/src/customer/onboarding/Mobile.js b/frontend/src/customer/onboarding/Mobile.js index f562bce..7311a9f 100644 --- a/frontend/src/customer/onboarding/Mobile.js +++ b/frontend/src/customer/onboarding/Mobile.js @@ -9,22 +9,31 @@ import { } from "@mui/material"; import MuiPhoneNumber from "material-ui-phone-number"; import { useHistory } from "react-router-dom"; +import { ToastContainer, toast } from 'react-toastify'; +import 'react-toastify/dist/ReactToastify.css'; +import SyncLoader from "react-spinners/SyncLoader"; const Mobile = () => { const [phone, setPhoneNo] = useState(); const history = useHistory(); + const [loading, setLoading] = useState(false); + + const errorNotify = (error) => toast.error(error); async function onSendCodeClicked() { try { - let { status, requestId } = await sendMobileOtp(phone); + setLoading(true); + let { status, requestId } = await sendMobileOtp(phone) + setLoading(false) if (status) { // Redirect to Verification page history.push({ pathname: './verifyNumber', state: { 'phone': phone, 'requestId': requestId } }); } else { //Showcase error + errorNotify("error") } } catch (error) { - console.log(error); + errorNotify(error); } } @@ -34,7 +43,7 @@ const Mobile = () => { return ( <> - { mt: "80px", }} > - + } + + + ); }; diff --git a/frontend/src/customer/onboarding/VerifyNumber.js b/frontend/src/customer/onboarding/VerifyNumber.js index ebbf44e..a245f9c 100644 --- a/frontend/src/customer/onboarding/VerifyNumber.js +++ b/frontend/src/customer/onboarding/VerifyNumber.js @@ -1,4 +1,4 @@ -import { React, useState } from "react"; +import { React, useEffect, useState } from "react"; import { Box, Input, @@ -10,67 +10,71 @@ import { } from "@mui/material"; import { useLocation } from "react-router-dom"; import { sendMobileOtp, checkMobileOtp, getMobileDetails } from '../../services/serviceHelper'; +import { ToastContainer, toast } from 'react-toastify'; +import 'react-toastify/dist/ReactToastify.css'; +import { css } from "@emotion/react"; +import SyncLoader from "react-spinners/SyncLoader"; const VerifyNumber = () => { const location = useLocation(); const phone = location?.state?.phone ?? ''; const reqId = location?.state?.requestId ?? ''; - const [otpInput1, setOTPInput1] = useState(); - const [otpInput2, setOTPInput2] = useState(); - const [otpInput3, setOTPInput3] = useState(); - const [otpInput4, setOTPInput4] = useState(); + const [otpInput1, setOTPInput1] = useState(""); + const [loading, setLoading] = useState(false); + const [loadingResend, setLoadingResend] = useState(false); + const errorNotify = (error) => toast.error(error); + const [mobileData, setMobileData] = useState({data:""}); + async function onReSendCodeClicked() { try { - let { status, requestId } = await sendMobileOtp(phone); + setLoadingResend(true) + let { status, requestId } = await sendMobileOtp(phone) + setLoadingResend(false) + if (status) { reqId = requestId; // Display msg for successful resend of otp } else { //Showcase error + errorNotify("error"); } } catch (error) { - console.log(error); + errorNotify(error); } } async function onVerifyOTPClicked() { try { - const otp = `${otpInput1}${otpInput2}${otpInput3}${otpInput4}`; + setLoading(true) + const otp = `${otpInput1}`; const status = await checkMobileOtp(reqId, otp, phone); + setLoading(false) + console.log(otp) if (status) { // Redirect to next page - + // Get the mobile details - const mobileDetail = await getMobileDetails(reqId); + const mobileDetail = await getMobileDetails(reqId,phone,''); if (mobileDetail.status) { // Store details in state + setMobileData({...mobileData,...mobileDetail.mobileData.data}) } } else { // Show error on page + errorNotify("error"); } } catch (error) { - console.log(error); + errorNotify(error); } } - function handleOTPInput1(value) { - setOTPInput1(value); - } - - function handleOTPInput2(value) { - setOTPInput2(value); - } - function handleOTPInput3(value) { - setOTPInput3(value); - } - - function handleOTPInput4(value) { - setOTPInput4(value); + function handleOTPInput1(event) { + setOTPInput1(event.target.value); } return ( - <> + <> { > - - - { }} > Didn't receive code? + {loadingResend + ? + + Resending... + + + + : - - + + + } + { mt: "80px", }} > - + } + + + ); }; diff --git a/frontend/src/customer/onboarding/panProofComponents/Aadhar.js b/frontend/src/customer/onboarding/panProofComponents/Aadhar.js index 6ef9afb..2283e20 100644 --- a/frontend/src/customer/onboarding/panProofComponents/Aadhar.js +++ b/frontend/src/customer/onboarding/panProofComponents/Aadhar.js @@ -7,19 +7,54 @@ import { Button, Stack, } from "@mui/material"; +import { sendAadhaarOTP, ValidateAadhaarOTP } from '../../../services/serviceHelper'; +import { ToastContainer, toast } from 'react-toastify'; +import 'react-toastify/dist/ReactToastify.css'; +import SyncLoader from "react-spinners/SyncLoader"; const Aadhar = ({ handleClick }) => { const [page, setPage] = useState(0); const [display, setDisplay] = useState(0); const [aadhar, setAadhar] = useState(""); + const [otpData, setOtpData] = useState(""); + const [loading, setLoading] = useState(false); + const [otpLoading, setotpLoading] = useState(false); + const [aadharData ,setAadharData] = useState({}); + const [aadharVerifiedData ,setAadharVerifiedData] = useState({}); + + const errorNotify = (error) => toast.error(error); + // console.log(aadharVerifiedData.data.consentValidation.providedName) // Handle file selection + const handleChange2 = async (event) => { + setOtpData(event.target.value); + }; + const handleChange = async (event) => { setAadhar(event.target.value); - console.log(aadhar); }; const otp = () => { + + async function onVerifyAadharOtp(){ + try{ + setLoading(true); + let res = await ValidateAadhaarOTP(otpData,aadharData.data.accessKey,aadharData.data.caseId,""); + setLoading(false); + if(res.status){ + setAadharVerifiedData(({...aadharVerifiedData,...res.data})) + setPage(1); + } + else { + //Showcase error + errorNotify("error") + } + } + catch(error){ + errorNotify(error); + } + } + return ( <> @@ -35,19 +70,32 @@ const Aadhar = ({ handleClick }) => { }} > OTP - - + + { + loading ? + + Verifying OTP... + + + : + + } + @@ -59,6 +107,26 @@ const Aadhar = ({ handleClick }) => { }; const aadharForm = () => { + + async function onSendAadharOtp(){ + try{ + setotpLoading(true); + let res = await sendAadhaarOTP(aadhar,"Aniruddha Shahaji Thorat",""); + setotpLoading(false); + if(res.status){ + setAadharData(({...aadharData,...res})); + setDisplay(1); + } + else { + //Showcase error + errorNotify("error") + } + } + catch(error){ + errorNotify(error); + } + } + return ( <> @@ -79,19 +147,30 @@ const Aadhar = ({ handleClick }) => { value={aadhar} onChange={handleChange} /> - + + } + + {display ? otp() : ""} @@ -139,7 +218,7 @@ const Aadhar = ({ handleClick }) => { color: "#7165E3", }} > - 123456789123 + {aadhar} { - - - + + + diff --git a/frontend/src/services/dygnifyAxiosOptions.js b/frontend/src/services/dygnifyAxiosOptions.js index 2b488df..0934244 100644 --- a/frontend/src/services/dygnifyAxiosOptions.js +++ b/frontend/src/services/dygnifyAxiosOptions.js @@ -495,6 +495,45 @@ function dygnifyGetMobileDetails(reqId, phoneNo, bearerToken) { return api_options; } +function dygnifySendAadhaarOTP(aadhaarNo, name, bearerToken) { + var data = JSON.stringify({ + "aadhaarNo": aadhaarNo, + "name": name + }); + + var api_options = { + method: 'post', + url: process.env.REACT_APP_DYGNIFY_URL + 'utility/getAadhaarOTP', + headers: { + 'Authorization': bearerToken, + 'Content-Type': 'application/json' + }, + data: data + } + + return api_options; +} + +function dygnifyValidateAadhaarOTP(otp, accessKey, caseId, bearerToken) { + var data = JSON.stringify({ + "otp": otp, + "accessKey": accessKey, + "caseId": caseId + }); + + var api_options = { + method: 'post', + url: process.env.REACT_APP_DYGNIFY_URL + 'utility/validateAadhaarOTP', + headers: { + 'Authorization': bearerToken, + 'Content-Type': 'application/json' + }, + data: data + } + + return api_options; +} + module.exports = { dygnifyBusinessOwnerCreationOption, dygnifycreateBusinessOptions, @@ -522,5 +561,7 @@ module.exports = { dygnifyKycOCR, dygnifySendMobileOTP, dygnifyValidateMobileOTP, - dygnifyGetMobileDetails + dygnifyGetMobileDetails, + dygnifySendAadhaarOTP, + dygnifyValidateAadhaarOTP } \ No newline at end of file diff --git a/frontend/src/services/serviceHelper.js b/frontend/src/services/serviceHelper.js index 17f7b4d..273e4be 100644 --- a/frontend/src/services/serviceHelper.js +++ b/frontend/src/services/serviceHelper.js @@ -1,5 +1,8 @@ import axiosHttpService from './axioscall'; -import { dygnifySendMobileOTP, dygnifyValidateMobileOTP, dygnifyGetMobileDetails, dygnifyKycOCR } from './dygnifyAxiosOptions'; +import { + dygnifySendMobileOTP, dygnifyValidateMobileOTP, dygnifyGetMobileDetails, + dygnifyKycOCR, dygnifySendAadhaarOTP, dygnifyValidateAadhaarOTP +} from './dygnifyAxiosOptions'; function sanitizePhoneNo(phone) { // Remove additional symbols from the phone number @@ -64,4 +67,32 @@ export async function getOCRFetch(file, bearerToken) { console.log(error); } return { 'status': false }; +} + +export async function sendAadhaarOTP(aadhaarNo, name, bearerToken) { + try { + if (aadhaarNo && name ) {//removed bearerToken in the if condition + let aadhaarOTPRes = await axiosHttpService(dygnifySendAadhaarOTP(aadhaarNo, name, bearerToken)); + if (aadhaarOTPRes.code === 200) { + return { 'status': true, data: aadhaarOTPRes.res }; + } + } + } catch (error) { + console.log(error); + } + return { 'status': false }; +} + +export async function ValidateAadhaarOTP(otp, accessKey, caseId, bearerToken) { + try { + if (otp && accessKey && caseId ) {//removed bearerToken in the if condition + let otpValidationRes = await axiosHttpService(dygnifyValidateAadhaarOTP(otp, accessKey, caseId, bearerToken)); + if (otpValidationRes.code === 200) { + return { 'status': true, data: otpValidationRes.res }; + } + } + } catch (error) { + console.log(error); + } + return { 'status': false }; } \ No newline at end of file