feat(auth): improve otp delivery and verification flow

src/pages/auth/SignupMobilePage.tsx

@@ -1,22 +1,19 @@
-import { Loader2 } from "lucide-react"
-import { useMemo, useState } from "react"
+import { useMemo } from "react"
 import { Link, useNavigate } from "react-router-dom"
 import { toast } from "sonner"
 
-import { sendOtp } from "../../api/users"
 import { Button } from "../../components/ui/button"
 import { Input } from "../../components/ui/input"
 import { useAuthFlow } from "../../context/AuthFlowContext"
 import { useTranslation } from "../../hooks/useTranslation"
 import { AuthPanel } from "./AuthPanel"
-import { formatCooldown, getApiErrorMessage, handleThrottleError } from "./utils"
+import { formatCooldown } from "./utils"
 
 export function SignupMobilePage() {
   const navigate = useNavigate()
   const { t, lang } = useTranslation()
-  const { state, setMobile, setCode, setCooldown, clearCooldown } = useAuthFlow()
+  const { state, setMobile, markOtpSendPending, clearOtpDelivery } = useAuthFlow()
   const isRtl = lang === "fa"
-  const [loading, setLoading] = useState(false)
 
   const alert = useMemo(() => {
     if (state.cooldowns.signupOtpSend <= 0) {
@@ -41,28 +38,9 @@ export function SignupMobilePage() {
       return
     }
 
-    setLoading(true)
-    try {
-      await sendOtp(state.signup.mobile, "register")
-      clearCooldown("signupOtpSend")
-      setCode("signup", "")
-      navigate("/auth/signup/verify")
-      toast.success(t.login.toasts.verifySent)
-    } catch (error) {
-      if (
-        !handleThrottleError({
-          error,
-          cooldownKey: "signupOtpSend",
-          setCooldown,
-          formatTime: (seconds) => formatCooldown(seconds, isRtl),
-          throttleCopy: t.login.throttle,
-        })
-      ) {
-        toast.error(getApiErrorMessage(error, t.login.toasts.failedOtp))
-      }
-    } finally {
-      setLoading(false)
-    }
+    clearOtpDelivery("signup")
+    markOtpSendPending("signup")
+    navigate("/auth/signup/verify")
   }
 
   return (
@@ -78,7 +56,6 @@ export function SignupMobilePage() {
           type="tel"
           dir="ltr"
           maxLength={11}
-          disabled={loading}
           value={state.signup.mobile}
           onChange={(event) => setMobile("signup", event.target.value)}
           className={`h-11 ${isRtl ? "text-end" : "text-start"}`}
@@ -86,10 +63,9 @@ export function SignupMobilePage() {
 
         <Button
           onClick={handleContinue}
-          disabled={loading || state.cooldowns.signupOtpSend > 0}
+          disabled={state.cooldowns.signupOtpSend > 0}
           className="h-11 w-full"
         >
-          {loading && <Loader2 className="me-2 h-4 w-4 animate-spin" />}
           {cooldownLabel || t.login.sendSignupCode}
         </Button>