From df758d2927035a227e9aa9c0fffb8e5c20c6d68d Mon Sep 17 00:00:00 2001
From: Khavin Shankar <khavinshankar@gmail.com>
Date: Wed, 17 Jan 2024 22:24:20 +0530
Subject: [PATCH] Improve Abha linking process (#7000)

---
 src/Components/ABDM/LinkABHANumberModal.tsx | 95 ++++++++++++---------
 src/Components/Common/components/Menu.tsx   |  6 +-
 2 files changed, 61 insertions(+), 40 deletions(-)

diff --git a/src/Components/ABDM/LinkABHANumberModal.tsx b/src/Components/ABDM/LinkABHANumberModal.tsx
index f5da5fedfb9..47b29b805ae 100644
--- a/src/Components/ABDM/LinkABHANumberModal.tsx
+++ b/src/Components/ABDM/LinkABHANumberModal.tsx
@@ -55,7 +55,7 @@ export default function LinkABHANumberModal({
   ...props
 }: Props) {
   const [currentStep, setCurrentStep] = useState<Step>("AadhaarVerification");
-  const [transactionId, setTransactionId] = useState<string>("sds");
+  const [transactionId, setTransactionId] = useState<string>("");
 
   const title = (
     <div className="flex items-center gap-3">
@@ -73,9 +73,6 @@ export default function LinkABHANumberModal({
       <div className="p-4">
         {currentStep === "ScanExistingQR" && (
           <ScanABHAQRSection
-            onSignup={() => {
-              setCurrentStep("AadhaarVerification");
-            }}
             patientId={patientId}
             onSuccess={onSuccess}
             closeModal={props.onClose}
@@ -88,9 +85,6 @@ export default function LinkABHANumberModal({
               setTransactionId(transactionId);
               setCurrentStep("MobileVerification");
             }}
-            onSignin={() => {
-              setCurrentStep("ScanExistingQR");
-            }}
           />
         )}
 
@@ -116,19 +110,37 @@ export default function LinkABHANumberModal({
           />
         )}
       </div>
+
+      <div>
+        {["AadhaarVerification", "MobileVerification", "HealthIDCreation"].find(
+          (step) => step === currentStep
+        ) ? (
+          <p
+            onClick={() => setCurrentStep("ScanExistingQR")}
+            className="cursor-pointer text-center text-sm text-blue-800"
+          >
+            Already have an ABHA number
+          </p>
+        ) : (
+          <p
+            onClick={() => setCurrentStep("AadhaarVerification")}
+            className="cursor-pointer text-center text-sm text-blue-800"
+          >
+            Don't have an ABHA Number
+          </p>
+        )}
+      </div>
     </DialogModal>
   );
 }
 
 interface ScanABHAQRSectionProps {
-  onSignup: () => void;
   patientId?: string;
   onSuccess?: (abha: any) => void;
   closeModal: () => void;
 }
 
 const ScanABHAQRSection = ({
-  onSignup,
   patientId,
   onSuccess,
   closeModal,
@@ -155,15 +167,18 @@ const ScanABHAQRSection = ({
   return (
     <div>
       <QRScanner
-        label="Enter ABHA Number"
+        label="Enter ABHA Number / ABHA Address"
         value={qrValue}
         disabled={!!authMethods.length}
         onChange={(value) => {
-          if ([2, 7, 12].includes(value.length)) {
-            if (qrValue.length && qrValue[qrValue.length - 1] === "-") {
-              value.slice(value.length - 1);
-            } else {
-              value += "-";
+          if (value[0] && !isNaN(Number(value[0]))) {
+            // 92-1234-1234-1234
+            if ([2, 7, 12].includes(value.length)) {
+              if (qrValue.length && qrValue[qrValue.length - 1] === "-") {
+                value.slice(value.length - 1);
+              } else {
+                value += "-";
+              }
             }
           }
           setQrValue(value);
@@ -230,16 +245,11 @@ const ScanABHAQRSection = ({
           error=""
         />
       )}
-      <div className="mt-4 flex items-center justify-between gap-2">
-        <span
-          onClick={onSignup}
-          className="cursor-pointer text-sm text-blue-800"
-        >
-          Don't have an ABHA Number
-        </span>
+      <div className="mt-4 flex items-center justify-center gap-2">
         <>
           {txnId ? (
             <ButtonV2
+              className="w-full"
               disabled={otp.length !== 6}
               onClick={async () => {
                 let response = null;
@@ -299,9 +309,14 @@ const ScanABHAQRSection = ({
               Link
             </ButtonV2>
           ) : authMethods.length ? (
-            <Dropdown title="Verify via">
+            <Dropdown
+              itemClassName="!w-full md:!w-full"
+              containerClassName="w-full"
+              title="Verify via"
+            >
               {authMethods.map((method) => (
                 <DropdownItem
+                  key={method}
                   onClick={async () => {
                     const { res, data } = await request(
                       routes.abha.initiateAbdmAuthentication,
@@ -321,6 +336,7 @@ const ScanABHAQRSection = ({
           ) : (
             <ButtonV2
               disabled={!qrValue || !acceptedDisclaimer}
+              className="w-full"
               onClick={async () => {
                 const { res, data } = await request(
                   routes.abha.searchByHealthId,
@@ -353,13 +369,9 @@ const ScanABHAQRSection = ({
 
 interface VerifyAadhaarSectionProps {
   onVerified: (transactionId: string) => void;
-  onSignin: () => void;
 }
 
-const VerifyAadhaarSection = ({
-  onVerified,
-  onSignin,
-}: VerifyAadhaarSectionProps) => {
+const VerifyAadhaarSection = ({ onVerified }: VerifyAadhaarSectionProps) => {
   const [aadhaarNumber, setAadhaarNumber] = useState("");
   const [aadhaarNumberError, setAadhaarNumberError] = useState<string>();
 
@@ -563,15 +575,10 @@ const VerifyAadhaarSection = ({
         />
       )}
 
-      <div className="mt-4 flex items-center justify-between gap-2">
-        <span
-          onClick={onSignin}
-          className="cursor-pointer text-sm text-blue-800"
-        >
-          Already have an ABHA number
-        </span>
+      <div className="mt-4 flex items-center justify-center gap-2">
         <>
           <ButtonV2
+            className="w-full"
             disabled={
               isSendingOtp || !acceptedDisclaimer1 || !acceptedDisclaimer2
             }
@@ -583,7 +590,11 @@ const VerifyAadhaarSection = ({
           </ButtonV2>
 
           {otpSent && (
-            <ButtonV2 disabled={isVerifyingOtp} onClick={verifyOtp}>
+            <ButtonV2
+              className="w-full"
+              disabled={isVerifyingOtp}
+              onClick={verifyOtp}
+            >
               {(verified && "Verified") ||
                 (isVerifyingOtp ? "Verifying..." : "Verify")}
             </ButtonV2>
@@ -736,8 +747,9 @@ const VerifyMobileSection = ({
         </p>
       )}
 
-      <div className="mt-4 flex items-center justify-end gap-2">
+      <div className="mt-4 flex items-center justify-center gap-2">
         <ButtonV2
+          className="w-full"
           disabled={isSendingOtp}
           onClick={sendOtp}
           variant={otpDispatched ? "secondary" : "primary"}
@@ -747,7 +759,11 @@ const VerifyMobileSection = ({
         </ButtonV2>
 
         {otpDispatched && (
-          <ButtonV2 disabled={isVerifyingOtp} onClick={verifyOtp}>
+          <ButtonV2
+            className="w-full"
+            disabled={isVerifyingOtp}
+            onClick={verifyOtp}
+          >
             {(verified && "Verified") ||
               (isVerifyingOtp ? "Verifying..." : "Verify")}
           </ButtonV2>
@@ -831,8 +847,9 @@ const CreateHealthIDSection = ({
         </div>
       )}
 
-      <div className="mt-4 flex items-center justify-end gap-2">
+      <div className="mt-4 flex items-center justify-center gap-2">
         <ButtonV2
+          className="w-full"
           disabled={
             isCreating || !/^(?![\d.])[a-zA-Z0-9.]{4,}(?<!\.)$/.test(healthId)
           }
diff --git a/src/Components/Common/components/Menu.tsx b/src/Components/Common/components/Menu.tsx
index 3292031eebb..218e897d3e7 100644
--- a/src/Components/Common/components/Menu.tsx
+++ b/src/Components/Common/components/Menu.tsx
@@ -18,6 +18,7 @@ interface DropdownMenuProps {
   disabled?: boolean | undefined;
   className?: string | undefined;
   itemClassName?: string | undefined;
+  containerClassName?: string | undefined;
 }
 
 export default function DropdownMenu({
@@ -26,7 +27,10 @@ export default function DropdownMenu({
   ...props
 }: DropdownMenuProps) {
   return (
-    <div id={props.id} className="text-right">
+    <div
+      id={props.id}
+      className={classNames("text-right", props.containerClassName)}
+    >
       <Menu as="div" className="relative inline-block w-full text-left">
         <Menu.Button
           disabled={props.disabled}