-
Notifications
You must be signed in to change notification settings - Fork 10
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Loading status checks…
BAH-4146 | Add. ABHA Verification through Aadhaar Number (#95)
* BAH-4137. Add Resend OTP component for create Abha and verify Abha flows. * BAH-4137 | Add. Styling for info messages in resend otp * BAH-4137. Add success message on Resend OTP. * BAH-4137. Add common scss file. * BAH-4137 | Fix alignment for OTP success message * BAH-4137 | Add Resend OTP for communication mobile verification * BAH-4137. Add Resend OTP feature for verify by Abha Address and Abha number * BAH-4137. Add Resend OTP feature for verify by Mobile Number * BAH-4137. Remove console.log() * BAH-4138 | Add validation for custom ABHA Address input * Update CreateABHAAddress.jsx BAH-4138 | Add validation for Custom Abha Address * [Rahul] | Fix. Lint Issue * BAH-4146 | Add. ABHA Verification through Aadhaar Number --------- Co-authored-by: arshiyaTW2021 <[email protected]> Co-authored-by: Dev Singh <[email protected]> Co-authored-by: Rahul Ramesh <[email protected]>
4 people
authored
Dec 17, 2024
1 parent
77c4364
commit 5d25cf6
Showing
3 changed files
with
240 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
202 changes: 202 additions & 0 deletions
202
src/components/verifyHealthId/verifyThroughAadhaarNumber.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,202 @@ | ||
| import React, { useState } from "react"; | ||
| import { | ||
| aadhaarNumberRequestOtp, | ||
| aadhaarNumberVerifyOtp, | ||
| fetchPatientFromBahmniWithHealthId, | ||
| getPatientProfile, | ||
| } from "../../api/hipServiceApi"; | ||
| import Spinner from "../spinner/spinner"; | ||
| import "./verifyHealthId.scss"; | ||
| import { mapPatient } from "../Common/patientMapper"; | ||
| import { validateOtp } from "../Common/FormatAndValidationUtils"; | ||
| import ResendOtp from "../Common/ResendOtp"; | ||
| import { isAadhaarValid } from "../Common/AadhaarValidation"; | ||
|
|
||
| const VerifyThroughAadhaarNumber = (props) => { | ||
| const [aadhaarNumber, setAadhaarNumber] = useState(""); | ||
| const [showOtpInput, setShowOtpInput] = useState(false); | ||
| const [otp, setOtp] = useState(""); | ||
| const [matchingPatientFound, setMatchingPatientFound] = useState(false); | ||
| const [matchingpatientUuid, setMatchingPatientUuid] = useState(""); | ||
| const [showError, setShowError] = useState(false); | ||
| const [loader, setLoader] = useState(false); | ||
| const [error, setError] = useState(""); | ||
| const [showResendSuccessMessage, setShowResendSuccessMessage] = | ||
| useState(false); | ||
|
|
||
| function idOnChangeHandler(e) { | ||
| setShowError(false); | ||
| setError(""); | ||
| setAadhaarNumber(e.target.value); | ||
| setShowOtpInput(false); | ||
| } | ||
|
|
||
| function otpOnChangeHandler(e) { | ||
| setOtp(e.target.value); | ||
| } | ||
|
|
||
| async function onResendOtp() { | ||
| setError(""); | ||
| setLoader(true); | ||
| setShowError(false); | ||
| var response = await aadhaarNumberRequestOtp(aadhaarNumber); | ||
| setLoader(false); | ||
| if (response.error) { | ||
| setShowError(true); | ||
| setError(response.error.message); | ||
| } else { | ||
| setShowResendSuccessMessage(true); | ||
| setTimeout(() => { | ||
| setShowResendSuccessMessage(false); | ||
| }, 3000); | ||
| } | ||
| } | ||
|
|
||
| async function verifyAadhaarNumber() { | ||
| let formattedAadhaarNumber = aadhaarNumber.trim(); | ||
| if (!isAadhaarValid(formattedAadhaarNumber)) { | ||
| setShowError(true); | ||
| setError("Invalid Aadhaar Number"); | ||
| return; | ||
| } | ||
| setError(""); | ||
| setLoader(true); | ||
| setShowError(false); | ||
| const response = await aadhaarNumberRequestOtp(aadhaarNumber); | ||
| if (response.data !== undefined) { | ||
| setShowOtpInput(true); | ||
| props.setIsDisabled(true); | ||
| } else { | ||
| setShowError(true); | ||
| setError(response.error.message); | ||
| } | ||
| setLoader(false); | ||
| } | ||
|
|
||
| async function verifyOtp() { | ||
| setError(""); | ||
| setShowError(false); | ||
| if (!validateOtp(otp)) { | ||
| setShowError(true); | ||
| setError("Invalid OTP. OTP should be 6 digits"); | ||
| } else { | ||
| setLoader(true); | ||
| var response = await aadhaarNumberVerifyOtp(otp); | ||
| if (response) { | ||
| setLoader(false); | ||
| if (response.data === undefined) { | ||
| setShowError(true); | ||
| setError(response.error.message); | ||
| } else { | ||
| if (response.data.authResult === "success") await getABHAProfile(); | ||
| else { | ||
| setError(response.data.message); | ||
| setShowError(true); | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| function redirectToPatientDashboard() { | ||
| window.parent.postMessage({ patientUuid: matchingpatientUuid }, "*"); | ||
| } | ||
|
|
||
| async function getABHAProfile() { | ||
| setError(""); | ||
| setShowError(false); | ||
| setLoader(true); | ||
| const response = await getPatientProfile(); | ||
| if (response) { | ||
| setLoader(false); | ||
| if (response.data === undefined) { | ||
| setShowError(true); | ||
| setError(response.error.message); | ||
| } else { | ||
| const matchingPatientId = await fetchPatientFromBahmniWithHealthId( | ||
| response.data.abhaNumber | ||
| ); | ||
| if ( | ||
| matchingPatientId.Error === undefined && | ||
| matchingPatientId.validPatient === true | ||
| ) { | ||
| setMatchingPatientFound(true); | ||
| setMatchingPatientUuid(matchingPatientId.patientUuid); | ||
| } else { | ||
| if (matchingPatientId.Error !== undefined) { | ||
| setShowError(true); | ||
| setError(matchingPatientId.Error.message); | ||
| } else { | ||
| props.setNdhmDetails(mapPatient(response.data)); | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| return ( | ||
| <div> | ||
| <div className="verify-health-id"> | ||
| <label htmlFor="aadhaarNumber" className="label"> | ||
| Enter Aadhaar Number:{" "} | ||
| </label> | ||
| <div className="verify-health-id-input-btn"> | ||
| <div className="verify-health-id-input"> | ||
| <input | ||
| type="text" | ||
| id="aadhaarNumber" | ||
| name="aadhaarNumber" | ||
| value={aadhaarNumber} | ||
| onChange={idOnChangeHandler} | ||
| /> | ||
| </div> | ||
| <button | ||
| name="verify-btn" | ||
| type="button" | ||
| onClick={verifyAadhaarNumber} | ||
| disabled={showOtpInput} | ||
| > | ||
| Verify | ||
| </button> | ||
| {!showOtpInput && showError && <h6 className="error ">{error}</h6>} | ||
| </div> | ||
| </div> | ||
| {showOtpInput && ( | ||
| <div> | ||
| <div className="otp-verify"> | ||
| <label htmlFor="otp">Enter OTP </label> | ||
| <div className="otp-verify-input-btn"> | ||
| <div className="otp-verify-input"> | ||
| <input | ||
| type="text" | ||
| id="otp" | ||
| name="otp" | ||
| value={otp} | ||
| onChange={otpOnChangeHandler} | ||
| /> | ||
| </div> | ||
| <ResendOtp onResend={onResendOtp} /> | ||
| {showResendSuccessMessage && ( | ||
| <div className="success_text">OTP Sent Successfully</div> | ||
| )} | ||
| {showError && <h6 className="error ">{error}</h6>} | ||
| </div> | ||
| </div> | ||
| <div className="qr-code-scanner"> | ||
| {" "} | ||
| <button type="button" onClick={verifyOtp}> | ||
| Fetch ABDM Data | ||
| </button> | ||
| </div> | ||
| </div> | ||
| )} | ||
| {matchingPatientFound && ( | ||
| <div className="patient-existed" onClick={redirectToPatientDashboard}> | ||
| Matching record with Health ID/PHR Address found | ||
| </div> | ||
| )} | ||
| {loader && <Spinner />} | ||
| </div> | ||
| ); | ||
| }; | ||
| export default VerifyThroughAadhaarNumber; |