From 54f6ccc3afd2b151940e37d3b5af608dc67f51f6 Mon Sep 17 00:00:00 2001
From: vickytechkey <vichunice@gmail.com>
Date: Thu, 27 Aug 2026 21:56:29 +0530
Subject: [PATCH] feat: implement OTP verification workflow for email and phone
 in SettingsTab

---
 src/components/dashboard/tabs/SettingsTab.tsx | 106 +++++++++++++++---
 1 file changed, 91 insertions(+), 15 deletions(-)

diff --git a/src/components/dashboard/tabs/SettingsTab.tsx b/src/components/dashboard/tabs/SettingsTab.tsx
index 7ebc0bf..d452b49 100644
--- a/src/components/dashboard/tabs/SettingsTab.tsx
+++ b/src/components/dashboard/tabs/SettingsTab.tsx
@@ -12,7 +12,7 @@ export default function SettingsTab() {
     uploadDocument,
     // Verification
     email, phone,
-    emailVerified, phoneVerified,
+    emailVerified, phoneVerified, setEmailVerified, setPhoneVerified,
     // Business Details
     gstin, setGstin, isGstinVerified, handleVerifyGstin,
     aadharFile, aadharS3Key,
@@ -25,6 +25,28 @@ export default function SettingsTab() {
   const [saveSuccess, setSaveSuccess] = useState(false);
   const [saveError, setSaveError] = useState('');
 
+  // OTP Verification local state
+  const [emailOtpSentLocal, setEmailOtpSentLocal] = useState(false);
+  const [phoneOtpSentLocal, setPhoneOtpSentLocal] = useState(false);
+  const [enteredEmailOtpLocal, setEnteredEmailOtpLocal] = useState('');
+  const [enteredPhoneOtpLocal, setEnteredPhoneOtpLocal] = useState('');
+
+  const handleSendEmailOtp = () => setEmailOtpSentLocal(true);
+  const handleVerifyEmailOtp = () => {
+    if (enteredEmailOtpLocal) {
+      setEmailVerified(true);
+      setEmailOtpSentLocal(false);
+    }
+  };
+
+  const handleSendPhoneOtp = () => setPhoneOtpSentLocal(true);
+  const handleVerifyPhoneOtp = () => {
+    if (enteredPhoneOtpLocal) {
+      setPhoneVerified(true);
+      setPhoneOtpSentLocal(false);
+    }
+  };
+
   const handleSave = async (e: React.FormEvent) => {
     e.preventDefault();
     setIsSaving(true);
@@ -67,30 +89,84 @@ export default function SettingsTab() {
               <div className="column is-half">
                 <div className="field">
                   <label className="label">Registered Email</label>
-                  <div className="control has-icons-right">
-                    <input className="input" type="email" value={email} readOnly />
-                    {emailVerified && (
-                      <span className="icon is-small is-right has-text-success">
-                        <span className="material-symbols-outlined">check_circle</span>
-                      </span>
+                  <div className="field has-addons">
+                    <div className="control is-expanded has-icons-right">
+                      <input className="input" type="email" value={email} readOnly />
+                      {emailVerified && (
+                        <span className="icon is-small is-right has-text-success">
+                          <span className="material-symbols-outlined">check_circle</span>
+                        </span>
+                      )}
+                    </div>
+                    {!emailVerified && !emailOtpSentLocal && (
+                      <div className="control">
+                        <button type="button" className="button is-info" onClick={handleSendEmailOtp}>
+                          Verify
+                        </button>
+                      </div>
                     )}
                   </div>
-                  {!emailVerified && <p className="help has-text-danger">Email not verified</p>}
+                  {!emailVerified && !emailOtpSentLocal && <p className="help has-text-danger">Email not verified</p>}
                 </div>
+                {emailOtpSentLocal && (
+                  <div className="field has-addons mt-2">
+                    <div className="control is-expanded">
+                      <input 
+                        className="input" 
+                        type="text" 
+                        placeholder="Enter Email OTP" 
+                        value={enteredEmailOtpLocal} 
+                        onChange={(e) => setEnteredEmailOtpLocal(e.target.value)} 
+                      />
+                    </div>
+                    <div className="control">
+                      <button type="button" className="button is-success" onClick={handleVerifyEmailOtp}>
+                        Submit OTP
+                      </button>
+                    </div>
+                  </div>
+                )}
               </div>
               <div className="column is-half">
                 <div className="field">
                   <label className="label">Registered Phone</label>
-                  <div className="control has-icons-right">
-                    <input className="input" type="tel" value={phone} readOnly />
-                    {phoneVerified && (
-                      <span className="icon is-small is-right has-text-success">
-                        <span className="material-symbols-outlined">check_circle</span>
-                      </span>
+                  <div className="field has-addons">
+                    <div className="control is-expanded has-icons-right">
+                      <input className="input" type="tel" value={phone} readOnly />
+                      {phoneVerified && (
+                        <span className="icon is-small is-right has-text-success">
+                          <span className="material-symbols-outlined">check_circle</span>
+                        </span>
+                      )}
+                    </div>
+                    {!phoneVerified && !phoneOtpSentLocal && (
+                      <div className="control">
+                        <button type="button" className="button is-info" onClick={handleSendPhoneOtp}>
+                          Verify
+                        </button>
+                      </div>
                     )}
                   </div>
-                  {!phoneVerified && <p className="help has-text-danger">Phone not verified</p>}
+                  {!phoneVerified && !phoneOtpSentLocal && <p className="help has-text-danger">Phone not verified</p>}
                 </div>
+                {phoneOtpSentLocal && (
+                  <div className="field has-addons mt-2">
+                    <div className="control is-expanded">
+                      <input 
+                        className="input" 
+                        type="text" 
+                        placeholder="Enter Phone OTP" 
+                        value={enteredPhoneOtpLocal} 
+                        onChange={(e) => setEnteredPhoneOtpLocal(e.target.value)} 
+                      />
+                    </div>
+                    <div className="control">
+                      <button type="button" className="button is-success" onClick={handleVerifyPhoneOtp}>
+                        Submit OTP
+                      </button>
+                    </div>
+                  </div>
+                )}
               </div>
             </div>
           </div>