feat: implement OTP verification workflow for email and phone in SettingsTab

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,7 +89,8 @@ export default function SettingsTab() {
               <div className="column is-half">
                 <div className="field">
                   <label className="label">Registered Email</label>
-                  <div className="control has-icons-right">
+                  <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">
@@ -75,13 +98,40 @@ export default function SettingsTab() {
                         </span>
                       )}
                     </div>
-                  {!emailVerified && <p className="help has-text-danger">Email not verified</p>}
+                    {!emailVerified && !emailOtpSentLocal && (
+                      <div className="control">
+                        <button type="button" className="button is-info" onClick={handleSendEmailOtp}>
+                          Verify
+                        </button>
                       </div>
+                    )}
+                  </div>
+                  {!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">
+                  <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">
@@ -89,8 +139,34 @@ export default function SettingsTab() {
                         </span>
                       )}
                     </div>
-                  {!phoneVerified && <p className="help has-text-danger">Phone not verified</p>}
+                    {!phoneVerified && !phoneOtpSentLocal && (
+                      <div className="control">
+                        <button type="button" className="button is-info" onClick={handleSendPhoneOtp}>
+                          Verify
+                        </button>
                       </div>
+                    )}
+                  </div>
+                  {!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>