@mesob/auth-react 0.1.1 → 0.2.1

package/dist/components/profile/change-phone-form.js

@@ -0,0 +1,758 @@
+"use client";
+
+// src/components/profile/change-phone-form.tsx
+import { Button as Button4 } from "@mesob/ui/components/button";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger
+} from "@mesob/ui/components/collapsible";
+import { IconChevronDown } from "@tabler/icons-react";
+import { useState as useState5 } from "react";
+
+// src/provider.tsx
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { deepmerge } from "deepmerge-ts";
+import createFetchClient from "openapi-fetch";
+import createClient from "openapi-react-query";
+import { createContext, useContext, useMemo, useState } from "react";
+
+// src/lib/translations.ts
+function createTranslator(messages, namespace) {
+  return (key, params) => {
+    const fullKey = namespace ? `${namespace}.${key}` : key;
+    const keys = fullKey.split(".");
+    let value = messages;
+    for (const k of keys) {
+      if (value && typeof value === "object" && value !== null) {
+        value = value[k];
+      } else {
+        return fullKey;
+      }
+    }
+    if (typeof value !== "string") {
+      return fullKey;
+    }
+    if (params) {
+      return value.replace(
+        /\{(\w+)\}/g,
+        (_, param) => String(params[param] ?? `{${param}}`)
+      );
+    }
+    return value;
+  };
+}
+
+// src/utils/cookie.ts
+var isProduction = typeof process !== "undefined" && process.env.NODE_ENV === "production";
+
+// src/provider.tsx
+import { jsx } from "react/jsx-runtime";
+var SessionContext = createContext(null);
+var ApiContext = createContext(null);
+var ConfigContext = createContext(null);
+var queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false
+    }
+  }
+});
+function useSession() {
+  const context = useContext(SessionContext);
+  if (!context) {
+    throw new Error("useSession must be used within MesobAuthProvider");
+  }
+  return context;
+}
+function useApi() {
+  const context = useContext(ApiContext);
+  if (!context) {
+    throw new Error("useApi must be used within MesobAuthProvider");
+  }
+  return context;
+}
+function useConfig() {
+  const context = useContext(ConfigContext);
+  if (!context) {
+    throw new Error("useConfig must be used within MesobAuthProvider");
+  }
+  return context;
+}
+
+// src/components/profile/request-change-phone-form.tsx
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Button } from "@mesob/ui/components/button";
+import { Input } from "@mesob/ui/components/input";
+import { Label } from "@mesob/ui/components/label";
+import { Spinner } from "@mesob/ui/components/spinner";
+import { IconEye, IconEyeOff } from "@tabler/icons-react";
+import { useEffect, useState as useState2 } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+
+// src/utils/normalize-phone.ts
+function normalizePhone(phone) {
+  const cleaned = phone.trim().replace(/\s/g, "");
+  if (cleaned.startsWith("+2519") || cleaned.startsWith("+2517")) {
+    return cleaned;
+  }
+  if (cleaned.startsWith("2519") || cleaned.startsWith("2517")) {
+    return `+${cleaned}`;
+  }
+  if (cleaned.startsWith("09") || cleaned.startsWith("07")) {
+    return `+251${cleaned.slice(1)}`;
+  }
+  if ((cleaned.startsWith("9") || cleaned.startsWith("7")) && cleaned.length === 9) {
+    return `+251${cleaned}`;
+  }
+  return cleaned;
+}
+
+// src/components/profile/request-change-phone-form.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var phonePasswordSchema = (phoneRegex) => z.object({
+  phone: z.string().trim().min(1, { message: "Phone number is required" }).refine(
+    (val) => {
+      const isPhone = phoneRegex.test(val);
+      return isPhone;
+    },
+    {
+      message: "Invalid phone number"
+    }
+  ),
+  password: z.string().min(8, "Password must be at least 8 characters").max(128, "Password too long")
+});
+function isAuthError(error) {
+  return typeof error === "object" && error !== null && ("code" in error || "message" in error || "name" in error);
+}
+function getErrorCode(error) {
+  if (error.code) {
+    return error.code;
+  }
+  if (error.message) {
+    const upperMessage = error.message.toUpperCase().trim();
+    const validCodes = [
+      "USER_NOT_FOUND",
+      "USER_EXISTS",
+      "INVALID_PASSWORD",
+      "VERIFICATION_EXPIRED",
+      "VERIFICATION_MISMATCH",
+      "VERIFICATION_NOT_FOUND",
+      "TOO_MANY_ATTEMPTS",
+      "UNAUTHORIZED"
+    ];
+    if (validCodes.includes(upperMessage)) {
+      return upperMessage;
+    }
+  }
+  return void 0;
+}
+function getErrorMessage(error) {
+  if (isAuthError(error)) {
+    const errorCode = getErrorCode(error);
+    switch (errorCode) {
+      case "USER_EXISTS":
+        return "This phone number is already taken. Please use a different number.";
+      case "VERIFICATION_EXPIRED":
+        return "Verification code has expired. Please request a new one.";
+      case "VERIFICATION_MISMATCH":
+        return "Invalid verification code. Please try again.";
+      case "VERIFICATION_NOT_FOUND":
+        return "Verification not found. Please request a new code.";
+      default:
+        return error.message || "An error occurred. Please try again.";
+    }
+  }
+  if (error instanceof Error) {
+    return error.message;
+  }
+  return "An error occurred. Please try again.";
+}
+function RequestChangePhoneForm({
+  onSuccess,
+  onCancel,
+  buttonText
+}) {
+  const { user } = useSession();
+  const { hooks } = useApi();
+  const { config } = useConfig();
+  const [isSubmitting, setIsSubmitting] = useState2(false);
+  const [isChecking, setIsChecking] = useState2(true);
+  const [showPassword, setShowPassword] = useState2(false);
+  const phoneRegex = typeof config.phoneRegex === "string" ? new RegExp(config.phoneRegex) : config.phoneRegex || /^(\+2519|\+2517|2519|2517|09|07)\d{8}$/;
+  const getPendingAccountChangeQuery = hooks.useQuery(
+    "get",
+    "/account-change/pending",
+    {},
+    { enabled: false }
+  );
+  const verifyPasswordMutation = hooks.useMutation("post", "/password/verify");
+  const checkUserMutation = hooks.useMutation("post", "/check-account");
+  const requestPhoneOtpMutation = hooks.useMutation(
+    "post",
+    "/phone/verification/request"
+  );
+  const phonePasswordForm = useForm({
+    resolver: zodResolver(phonePasswordSchema(phoneRegex)),
+    defaultValues: {
+      phone: "",
+      password: ""
+    }
+  });
+  const {
+    register,
+    handleSubmit,
+    getValues,
+    setValue,
+    formState: { errors }
+  } = phonePasswordForm;
+  useEffect(() => {
+    let active = true;
+    const run = async () => {
+      try {
+        const data = await getPendingAccountChangeQuery.refetch();
+        if (!active) {
+          return;
+        }
+        const accountChange = data.data?.accountChange;
+        const verificationId = data.data?.verificationId;
+        if (accountChange?.changeType !== "phone") {
+          setIsChecking(false);
+          return;
+        }
+        if (!accountChange.newPhone) {
+          setIsChecking(false);
+          return;
+        }
+        if (getValues("phone")) {
+          setIsChecking(false);
+          return;
+        }
+        setValue("phone", accountChange.newPhone, { shouldValidate: true });
+        if (verificationId) {
+          toast.message("Resuming verification\u2026");
+          onSuccess(verificationId, accountChange.newPhone);
+          return;
+        }
+        setIsChecking(false);
+      } catch {
+        setIsChecking(false);
+      }
+    };
+    run().catch(() => void 0);
+    return () => {
+      active = false;
+    };
+  }, [getPendingAccountChangeQuery.refetch, getValues, onSuccess, setValue]);
+  const onPhonePasswordSubmit = async (data) => {
+    if (!user) {
+      toast.error("User not found");
+      return;
+    }
+    try {
+      setIsSubmitting(true);
+      const normalizedPhone = normalizePhone(data.phone);
+      await verifyPasswordMutation.mutateAsync({
+        body: { password: data.password }
+      });
+      const checkResult = await checkUserMutation.mutateAsync({
+        body: { identifier: normalizedPhone }
+      });
+      if (checkResult.data?.exists) {
+        if (user?.phone?.replace(/\s/g, "") === normalizedPhone.replace(/\s/g, "")) {
+          toast.error("This is already your current phone number.");
+          return;
+        }
+        toast.error(
+          "This phone number is already taken. Please use a different number."
+        );
+        return;
+      }
+      const verification = await requestPhoneOtpMutation.mutateAsync({
+        body: {
+          phone: normalizedPhone,
+          context: "change-phone"
+        }
+      });
+      toast.success("Verification code sent to your phone");
+      onSuccess(verification.data?.verificationId ?? "", normalizedPhone);
+    } catch (error) {
+      const errorMessage = getErrorMessage(error);
+      if (isAuthError(error)) {
+        const errorCode = getErrorCode(error);
+        if (errorCode === "INVALID_PASSWORD" || errorCode === "USER_NOT_FOUND") {
+          toast.error("Incorrect password. Please try again.");
+          return;
+        }
+      }
+      toast.error(errorMessage);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+  const isLoading = isSubmitting || isChecking;
+  return /* @__PURE__ */ jsxs(
+    "form",
+    {
+      onSubmit: handleSubmit(onPhonePasswordSubmit),
+      className: "p-4 space-y-4 border-t",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "space-y-4 w-full md:w-1/2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsx2(Label, { htmlFor: "phone", children: "Phone Number" }),
+            /* @__PURE__ */ jsx2(
+              Input,
+              {
+                id: "phone",
+                type: "tel",
+                placeholder: "Enter your new phone number",
+                ...register("phone"),
+                disabled: isLoading
+              }
+            ),
+            errors.phone && /* @__PURE__ */ jsx2("p", { className: "text-sm text-destructive", children: errors.phone.message })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsx2(Label, { htmlFor: "password", children: "Password" }),
+            /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+              /* @__PURE__ */ jsx2(
+                Input,
+                {
+                  id: "password",
+                  type: showPassword ? "text" : "password",
+                  autoComplete: "current-password",
+                  placeholder: "Enter your password",
+                  ...register("password"),
+                  disabled: isLoading
+                }
+              ),
+              /* @__PURE__ */ jsx2(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setShowPassword(!showPassword),
+                  className: "absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground",
+                  children: showPassword ? /* @__PURE__ */ jsx2(IconEyeOff, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx2(IconEye, { className: "h-4 w-4" })
+                }
+              )
+            ] }),
+            errors.password && /* @__PURE__ */ jsx2("p", { className: "text-sm text-destructive", children: errors.password.message })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
+          /* @__PURE__ */ jsx2(
+            Button,
+            {
+              type: "button",
+              variant: "outline",
+              onClick: onCancel,
+              disabled: isLoading,
+              children: "Cancel"
+            }
+          ),
+          /* @__PURE__ */ jsxs(Button, { type: "submit", disabled: isLoading, children: [
+            isLoading && /* @__PURE__ */ jsx2(Spinner, { className: "mr-2 h-4 w-4" }),
+            isChecking ? "Checking\u2026" : buttonText
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/profile/verify-change-phone-form.tsx
+import { useState as useState4 } from "react";
+import { toast as toast2 } from "sonner";
+
+// src/components/profile/otp-verification-modal.tsx
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle
+} from "@mesob/ui/components/dialog";
+
+// src/components/auth/verification-form.tsx
+import { zodResolver as zodResolver2 } from "@hookform/resolvers/zod";
+import { Button as Button3 } from "@mesob/ui/components/button";
+import { Field, FieldError, FieldGroup } from "@mesob/ui/components/field";
+import {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSlot
+} from "@mesob/ui/components/input-otp";
+import { Spinner as Spinner3 } from "@mesob/ui/components/spinner";
+import { Controller, useForm as useForm2 } from "react-hook-form";
+import { z as z2 } from "zod";
+
+// src/hooks/use-translator.ts
+import { useMesob } from "@mesob/ui/components/mesob-context";
+function useTranslator(namespace) {
+  const mesob = useMesob();
+  const { config } = useConfig();
+  if (mesob?.t) {
+    return (key, params) => mesob.t(namespace ? `${namespace}.${key}` : key, params);
+  }
+  return createTranslator(config.messages || {}, namespace);
+}
+
+// src/components/auth/countdown.tsx
+import { Button as Button2 } from "@mesob/ui/components/button";
+import { Spinner as Spinner2 } from "@mesob/ui/components/spinner";
+import { useEffect as useEffect2, useState as useState3 } from "react";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var Countdown = ({
+  initialSeconds = 60,
+  onResend,
+  resending = false
+}) => {
+  const t = useTranslator("Common");
+  const [seconds, setSeconds] = useState3(initialSeconds);
+  const [isResending, setIsResending] = useState3(false);
+  useEffect2(() => {
+    if (seconds <= 0) {
+      return;
+    }
+    const timer = setInterval(() => {
+      setSeconds((prev) => {
+        if (prev <= 1) {
+          clearInterval(timer);
+          return 0;
+        }
+        return prev - 1;
+      });
+    }, 1e3);
+    return () => clearInterval(timer);
+  }, [seconds]);
+  const handleResend = async () => {
+    setIsResending(true);
+    try {
+      await onResend();
+      setSeconds(initialSeconds);
+    } catch (_error) {
+    } finally {
+      setIsResending(false);
+    }
+  };
+  if (seconds > 0) {
+    return /* @__PURE__ */ jsx3(Button2, { variant: "ghost", disabled: true, children: t("resendIn", { seconds }) });
+  }
+  return /* @__PURE__ */ jsxs2(
+    Button2,
+    {
+      variant: "ghost",
+      onClick: handleResend,
+      disabled: isResending || resending,
+      children: [
+        isResending || resending && /* @__PURE__ */ jsx3(Spinner2, {}),
+        t("resend")
+      ]
+    }
+  );
+};
+
+// src/components/auth/verification-form.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var verificationSchema = (t) => z2.object({
+  code: z2.string().length(6, t("form.codeLength"))
+});
+var VerificationForm = ({
+  onSubmit,
+  onResend,
+  isLoading = false
+}) => {
+  const t = useTranslator("Auth.verification");
+  const form = useForm2({
+    resolver: zodResolver2(verificationSchema(t)),
+    defaultValues: {
+      code: ""
+    }
+  });
+  const handleSubmit = form.handleSubmit(async (values) => {
+    await onSubmit(values);
+  });
+  return /* @__PURE__ */ jsxs3("form", { id: "verification-form", onSubmit: handleSubmit, children: [
+    /* @__PURE__ */ jsx4(FieldGroup, { children: /* @__PURE__ */ jsx4(
+      Controller,
+      {
+        name: "code",
+        control: form.control,
+        render: ({ field, fieldState }) => /* @__PURE__ */ jsxs3(Field, { "data-invalid": fieldState.invalid, children: [
+          /* @__PURE__ */ jsx4("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx4(
+            InputOTP,
+            {
+              maxLength: 6,
+              id: "otp",
+              required: true,
+              value: field.value ?? "",
+              onChange: field.onChange,
+              onBlur: field.onBlur,
+              containerClassName: "gap-4 justify-center mb-2 flex items-center",
+              "aria-invalid": fieldState.invalid,
+              children: /* @__PURE__ */ jsxs3(InputOTPGroup, { className: "gap-3 *:data-[slot=input-otp-slot]:h-12 *:data-[slot=input-otp-slot]:w-12 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border *:data-[slot=input-otp-slot]:text-xl", children: [
+                /* @__PURE__ */ jsx4(InputOTPSlot, { className: "h-12", index: 0 }),
+                /* @__PURE__ */ jsx4(InputOTPSlot, { className: "h-12", index: 1 }),
+                /* @__PURE__ */ jsx4(InputOTPSlot, { className: "h-12", index: 2 }),
+                /* @__PURE__ */ jsx4(InputOTPSlot, { className: "h-12", index: 3 }),
+                /* @__PURE__ */ jsx4(InputOTPSlot, { className: "h-12", index: 4 }),
+                /* @__PURE__ */ jsx4(InputOTPSlot, { className: "h-12", index: 5 })
+              ] })
+            }
+          ) }),
+          fieldState.invalid && /* @__PURE__ */ jsx4(FieldError, { errors: [fieldState.error] })
+        ] })
+      }
+    ) }),
+    /* @__PURE__ */ jsxs3("div", { className: "flex justify-between items-center mt-4", children: [
+      /* @__PURE__ */ jsx4(Countdown, { onResend, resending: isLoading }),
+      /* @__PURE__ */ jsxs3(
+        Button3,
+        {
+          type: "submit",
+          form: "verification-form",
+          disabled: isLoading || form.watch("code").length !== 6,
+          children: [
+            isLoading && /* @__PURE__ */ jsx4(Spinner3, {}),
+            t("form.confirm")
+          ]
+        }
+      )
+    ] })
+  ] });
+};
+
+// src/components/profile/otp-verification-modal.tsx
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+function OtpVerificationModal({
+  open,
+  title,
+  description,
+  verificationId,
+  isLoading,
+  onSubmit,
+  onResend,
+  onCancel
+}) {
+  return /* @__PURE__ */ jsx5(
+    Dialog,
+    {
+      open,
+      onOpenChange: (nextOpen) => {
+        if (!nextOpen) {
+          onCancel?.();
+        }
+      },
+      children: /* @__PURE__ */ jsxs4(DialogContent, { children: [
+        /* @__PURE__ */ jsxs4(DialogHeader, { children: [
+          /* @__PURE__ */ jsx5(DialogTitle, { children: title }),
+          description && /* @__PURE__ */ jsx5(DialogDescription, { children: description })
+        ] }),
+        /* @__PURE__ */ jsx5(
+          VerificationForm,
+          {
+            verificationId,
+            isLoading,
+            onSubmit: async ({ code }) => onSubmit(code),
+            onResend: onResend ?? (() => void 0)
+          }
+        )
+      ] })
+    }
+  );
+}
+
+// src/components/profile/verify-change-phone-form.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+function isAuthError2(error) {
+  return typeof error === "object" && error !== null && ("code" in error || "message" in error || "name" in error);
+}
+function getErrorCode2(error) {
+  if (error.code) {
+    return error.code;
+  }
+  if (error.message) {
+    const upperMessage = error.message.toUpperCase().trim();
+    const validCodes = [
+      "USER_NOT_FOUND",
+      "USER_EXISTS",
+      "INVALID_PASSWORD",
+      "VERIFICATION_EXPIRED",
+      "VERIFICATION_MISMATCH",
+      "VERIFICATION_NOT_FOUND",
+      "TOO_MANY_ATTEMPTS",
+      "UNAUTHORIZED"
+    ];
+    if (validCodes.includes(upperMessage)) {
+      return upperMessage;
+    }
+  }
+  return void 0;
+}
+function getErrorMessage2(error) {
+  if (isAuthError2(error)) {
+    const errorCode = getErrorCode2(error);
+    switch (errorCode) {
+      case "USER_EXISTS":
+        return "This phone number is already taken. Please use a different number.";
+      case "VERIFICATION_EXPIRED":
+        return "Verification code has expired. Please request a new one.";
+      case "VERIFICATION_MISMATCH":
+        return "Invalid verification code. Please try again.";
+      case "VERIFICATION_NOT_FOUND":
+        return "Verification not found. Please request a new code.";
+      default:
+        return error.message || "An error occurred. Please try again.";
+    }
+  }
+  if (error instanceof Error) {
+    return error.message;
+  }
+  return "An error occurred. Please try again.";
+}
+function VerifyChangePhoneForm({
+  phone,
+  verificationId,
+  onSuccess,
+  onCancel
+}) {
+  const { refresh } = useSession();
+  const { hooks } = useApi();
+  const [isSubmitting, setIsSubmitting] = useState4(false);
+  const [currentVerificationId, setCurrentVerificationId] = useState4(verificationId);
+  const verifyPhoneOtpMutation = hooks.useMutation(
+    "post",
+    "/phone/verification/confirm"
+  );
+  const updatePhoneMutation = hooks.useMutation("put", "/profile/phone");
+  const requestPhoneOtpMutation = hooks.useMutation(
+    "post",
+    "/phone/verification/request"
+  );
+  const onOtpSubmit = async (code) => {
+    if (!currentVerificationId) {
+      toast2.error("Verification not found. Please request a new code.");
+      return;
+    }
+    try {
+      setIsSubmitting(true);
+      await verifyPhoneOtpMutation.mutateAsync({
+        body: {
+          verificationId: currentVerificationId,
+          code,
+          context: "change-phone"
+        }
+      });
+      await updatePhoneMutation.mutateAsync({
+        body: { phone }
+      });
+      toast2.success("Phone number updated successfully");
+      await refresh();
+      onSuccess();
+    } catch (error) {
+      const errorMessage = getErrorMessage2(error);
+      toast2.error(errorMessage);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+  if (!currentVerificationId) {
+    toast2.error("Verification not found. Please request a new code.");
+    return null;
+  }
+  return /* @__PURE__ */ jsx6(
+    OtpVerificationModal,
+    {
+      open: true,
+      title: "Verify phone",
+      description: `Enter the verification code sent to ${phone}`,
+      verificationId: currentVerificationId,
+      isLoading: isSubmitting,
+      onSubmit: onOtpSubmit,
+      onResend: async () => {
+        try {
+          setIsSubmitting(true);
+          const next = await requestPhoneOtpMutation.mutateAsync({
+            body: {
+              phone,
+              context: "change-phone"
+            }
+          });
+          setCurrentVerificationId(next.data?.verificationId ?? null);
+          toast2.success("Verification code resent");
+        } catch (error) {
+          toast2.error(getErrorMessage2(error));
+        } finally {
+          setIsSubmitting(false);
+        }
+      },
+      onCancel
+    }
+  );
+}
+
+// src/components/profile/change-phone-form.tsx
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+function ChangePhoneForm() {
+  const { user } = useSession();
+  const [isOpen, setIsOpen] = useState5(false);
+  const [showOtp, setShowOtp] = useState5(false);
+  const [verificationId, setVerificationId] = useState5(null);
+  const [newPhone, setNewPhone] = useState5("");
+  const resetForms = () => {
+    setShowOtp(false);
+    setVerificationId(null);
+    setNewPhone("");
+  };
+  const handleRequestSuccess = (id, phone) => {
+    setVerificationId(id);
+    setNewPhone(phone);
+    setShowOtp(true);
+  };
+  const handleVerifySuccess = () => {
+    resetForms();
+    setIsOpen(false);
+  };
+  const handleCancel = () => {
+    resetForms();
+    setIsOpen(false);
+  };
+  const title = user?.phone ? "Change Phone" : "Add Phone";
+  const description = user?.phone ? "Update your phone number" : "Add a phone number to your account";
+  return /* @__PURE__ */ jsx7(Collapsible, { open: isOpen, onOpenChange: setIsOpen, children: /* @__PURE__ */ jsxs5("div", { className: "border rounded-lg", children: [
+    /* @__PURE__ */ jsx7(CollapsibleTrigger, { asChild: true, children: /* @__PURE__ */ jsxs5(Button4, { variant: "ghost", className: "w-full justify-between p-4 h-auto", children: [
+      /* @__PURE__ */ jsxs5("div", { className: "flex flex-col items-start", children: [
+        /* @__PURE__ */ jsx7("span", { className: "font-medium", children: title }),
+        /* @__PURE__ */ jsx7("span", { className: "text-sm text-muted-foreground", children: description })
+      ] }),
+      /* @__PURE__ */ jsx7(
+        IconChevronDown,
+        {
+          className: `h-4 w-4 transition-transform ${isOpen ? "rotate-180" : ""}`
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsx7(CollapsibleContent, { children: showOtp ? /* @__PURE__ */ jsx7(
+      VerifyChangePhoneForm,
+      {
+        phone: newPhone,
+        verificationId,
+        onSuccess: handleVerifySuccess,
+        onCancel: handleCancel
+      }
+    ) : /* @__PURE__ */ jsx7(
+      RequestChangePhoneForm,
+      {
+        onSuccess: handleRequestSuccess,
+        onCancel: handleCancel,
+        buttonText: title
+      }
+    ) })
+  ] }) });
+}
+export {
+  ChangePhoneForm
+};
+//# sourceMappingURL=change-phone-form.js.map