@pradip1995/segment-login-template 0.5.8 → 0.5.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pradip1995/segment-login-template",
-  "version": "0.5.8",
+  "version": "0.5.10",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
@@ -17,6 +17,8 @@
     "./commerce-auth-otp-modal": "./src/commerce-auth-otp-modal.tsx",
     "./otp-component": "./src/otp-component.ts",
     "./auth-server": "./src/auth-server.ts",
+    "./account-profile-logic": "./src/account-profile-logic.ts",
+    "./profile-phone-field": "./src/profile-phone-field.tsx",
     "./google-auth-section": "./src/google-auth-section.tsx",
     "./otp-input": "./src/otp-input.tsx"
   },

package/src/account-profile-logic.ts

@@ -0,0 +1,214 @@
+"use client"
+
+import { useActionState, useState } from "react"
+import type { HttpTypes } from "@medusajs/types"
+import { updateCustomer } from "@pradip1995/commerce-core/data/customer"
+import {
+  combinePhoneParts,
+  isValidPhoneParts,
+  parsePhoneParts,
+} from "@pradip1995/commerce-core/util/phone"
+import {
+  sendRegistrationOtp,
+  verifyRegistrationOtp,
+} from "./auth-server"
+import { isNextRedirect, safeErrorMessage } from "./is-next-redirect"
+
+export function customerPhoneToInputValue(phone?: string | null): string {
+  if (!phone?.trim()) return ""
+  const parts = parsePhoneParts(phone)
+  return combinePhoneParts(parts.dialCode, parts.localNumber)
+}
+
+export function phoneDigits(value: string): string {
+  return value.replace(/\D/g, "")
+}
+
+export function phoneToE164(value: string): string {
+  const parts = parsePhoneParts(value)
+  const local = parts.localNumber.replace(/\D/g, "")
+  const dial = parts.dialCode.replace(/\D/g, "")
+  if (!local) return ""
+  return `+${dial}${local}`
+}
+
+function readVerified(
+  customer: HttpTypes.StoreCustomer,
+  field: "email_verified" | "phone_verified"
+): boolean {
+  const direct = (customer as Record<string, unknown>)[field]
+  if (direct === true || direct === "true") return true
+  const meta = customer.metadata as Record<string, unknown> | undefined
+  const fromMeta = meta?.[field]
+  return fromMeta === true || fromMeta === "true"
+}
+
+export function useAccountProfileLogic(
+  customer: HttpTypes.StoreCustomer,
+  countryCode: string
+) {
+  const [message, setMessage] = useState<string | null>(null)
+  const [phone, setPhone] = useState(() => customerPhoneToInputValue(customer.phone))
+  const [phoneError, setPhoneError] = useState<string | null>(null)
+  const [otpOpen, setOtpOpen] = useState(false)
+  const [otp, setOtp] = useState("")
+  const [otpToken, setOtpToken] = useState<string | null>(null)
+  const [otpType, setOtpType] = useState<"email_verification" | "phone_verification">(
+    "email_verification"
+  )
+  const [otpError, setOtpError] = useState<string | null>(null)
+  const [otpPending, setOtpPending] = useState(false)
+  const [phoneVerified, setPhoneVerified] = useState(() =>
+    readVerified(customer, "phone_verified")
+  )
+  const [emailVerified] = useState(() => readVerified(customer, "email_verified"))
+
+  const phoneParts = parsePhoneParts(phone)
+  const phoneReady = isValidPhoneParts(phoneParts.dialCode, phoneParts.localNumber)
+
+  async function saveProfile(_prev: unknown, formData: FormData) {
+    try {
+      const fullName = String(formData.get("full_name") || "").trim()
+      const [first_name, ...rest] = fullName.split(/\s+/)
+      const e164 = phoneToE164(phone)
+      await updateCustomer({
+        first_name: first_name || "",
+        last_name: rest.join(" ") || ".",
+        phone: e164 || undefined,
+      })
+      if (e164 && phoneDigits(e164) !== phoneDigits(customer.phone || "")) {
+        setPhoneVerified(false)
+      }
+      return { ok: true as const, error: null as string | null }
+    } catch (err) {
+      if (isNextRedirect(err)) throw err
+      return {
+        ok: false as const,
+        error: safeErrorMessage(err, "Failed to update profile"),
+      }
+    }
+  }
+
+  const [state, formAction, pending] = useActionState(saveProfile, {
+    ok: false as const,
+    error: null as string | null,
+  })
+
+  async function ensurePhoneSavedForVerification(): Promise<boolean> {
+    setPhoneError(null)
+    if (!phoneReady) {
+      setPhoneError("Please enter a valid mobile number before verifying.")
+      return false
+    }
+
+    const e164 = phoneToE164(phone)
+    if (phoneDigits(e164) === phoneDigits(customer.phone || "")) {
+      return true
+    }
+
+    try {
+      await updateCustomer({ phone: e164 })
+      return true
+    } catch (err) {
+      if (isNextRedirect(err)) throw err
+      setPhoneError(
+        safeErrorMessage(err, "Failed to save mobile number. Please try again.")
+      )
+      return false
+    }
+  }
+
+  async function sendVerifyOtp(type: "email_verification" | "phone_verification") {
+    setOtpType(type)
+    setOtpPending(true)
+    setOtpError(null)
+
+    try {
+      if (type === "phone_verification") {
+        const saved = await ensurePhoneSavedForVerification()
+        if (!saved) return
+      }
+
+      const res = await sendRegistrationOtp(customer.id, type)
+      if (!res?.success) {
+        throw new Error(res?.error || "Failed to send code")
+      }
+      setOtpToken(res.token ?? null)
+      setOtp("")
+      setOtpOpen(true)
+    } catch (err) {
+      if (isNextRedirect(err)) throw err
+      const msg = safeErrorMessage(err, "Failed to send code")
+      setOtpError(msg)
+      if (type === "phone_verification") {
+        setPhoneError(msg)
+      }
+    } finally {
+      setOtpPending(false)
+    }
+  }
+
+  async function verifyOtp() {
+    if (otp.length < 6) return
+    setOtpPending(true)
+    setOtpError(null)
+    try {
+      const res = await verifyRegistrationOtp({
+        otpToken: otpToken || "",
+        code: otp,
+        countryCode,
+        skipRedirect: true,
+      })
+      if (!res?.success) {
+        throw new Error(res?.error || "Invalid code")
+      }
+      setOtpOpen(false)
+      if (otpType === "phone_verification") {
+        setPhoneVerified(true)
+      }
+      setMessage("Verification successful.")
+      window.location.reload()
+    } catch (err) {
+      if (isNextRedirect(err)) throw err
+      setOtpError(safeErrorMessage(err, "Verification failed"))
+      setOtpPending(false)
+    }
+  }
+
+  function handlePhoneChange(value: string) {
+    setPhone(value)
+    setPhoneError(null)
+    const nextE164 = phoneToE164(value)
+    if (
+      nextE164 &&
+      phoneDigits(nextE164) !== phoneDigits(customer.phone || "")
+    ) {
+      setPhoneVerified(false)
+    }
+  }
+
+  const fullName = [customer.first_name, customer.last_name].filter(Boolean).join(" ")
+
+  return {
+    fullName,
+    phone,
+    handlePhoneChange,
+    phoneReady,
+    phoneError,
+    phoneVerified,
+    emailVerified,
+    message,
+    state,
+    formAction,
+    pending,
+    otpOpen,
+    setOtpOpen,
+    otp,
+    setOtp,
+    otpType,
+    otpError,
+    otpPending,
+    sendVerifyOtp,
+    verifyOtp,
+  }
+}

package/src/account-profile.tsx

@@ -1,16 +1,11 @@
 "use client"
 
-import { useActionState, useState } from "react"
 import type { HttpTypes } from "@medusajs/types"
-import { updateCustomer } from "@pradip1995/commerce-core/data/customer"
-import {
-  sendRegistrationOtp,
-  verifyRegistrationOtp,
-} from "./auth-server"
 import type { OtpVerificationComponent } from "./otp-component"
 import OtpVerificationModal from "./otp-verification-modal"
+import { useAccountProfileLogic } from "./account-profile-logic"
+import ProfilePhoneField from "./profile-phone-field"
 import { acct } from "./account-theme"
-import { isNextRedirect, safeErrorMessage } from "./is-next-redirect"
 
 export default function AccountProfile({
   customer,
@@ -21,80 +16,7 @@ export default function AccountProfile({
   countryCode: string
   OtpComponent?: OtpVerificationComponent
 }) {
-  const [message, setMessage] = useState<string | null>(null)
-  const [otpOpen, setOtpOpen] = useState(false)
-  const [otp, setOtp] = useState("")
-  const [otpToken, setOtpToken] = useState<string | null>(null)
-  const [otpType, setOtpType] = useState<"email_verification" | "phone_verification">(
-    "email_verification"
-  )
-  const [otpError, setOtpError] = useState<string | null>(null)
-  const [otpPending, setOtpPending] = useState(false)
-
-  async function saveProfile(_prev: unknown, formData: FormData) {
-    try {
-      const fullName = String(formData.get("full_name") || "").trim()
-      const [first_name, ...rest] = fullName.split(/\s+/)
-      await updateCustomer({
-        first_name: first_name || "",
-        last_name: rest.join(" ") || ".",
-        phone: String(formData.get("phone") || "").replace(/[^\d+]/g, "") || undefined,
-      })
-      return { ok: true as const, error: null as string | null }
-    } catch (err) {
-      if (isNextRedirect(err)) throw err
-      return {
-        ok: false as const,
-        error: safeErrorMessage(err, "Failed to update profile"),
-      }
-    }
-  }
-
-  const [state, formAction, pending] = useActionState(saveProfile, { ok: false, error: null })
-
-  async function sendVerifyOtp(type: "email_verification" | "phone_verification") {
-    setOtpType(type)
-    setOtpPending(true)
-    setOtpError(null)
-    try {
-      const res = await sendRegistrationOtp(customer.id, type)
-      if (!res.success) throw new Error(res.error || "Failed to send code")
-      setOtpToken(res.token ?? null)
-      setOtp("")
-      setOtpOpen(true)
-    } catch (err) {
-      if (isNextRedirect(err)) throw err
-      setOtpError(safeErrorMessage(err, "Failed to send code"))
-    } finally {
-      setOtpPending(false)
-    }
-  }
-
-  async function verifyOtp() {
-    if (otp.length < 6) return
-    setOtpPending(true)
-    setOtpError(null)
-    try {
-      const res = await verifyRegistrationOtp({
-        otpToken: otpToken || "",
-        code: otp,
-        countryCode,
-        skipRedirect: true,
-      })
-      if (!res.success) throw new Error(res.error || "Invalid code")
-      setOtpOpen(false)
-      setMessage("Verification successful.")
-      window.location.reload()
-    } catch (err) {
-      if (isNextRedirect(err)) throw err
-      setOtpError(safeErrorMessage(err, "Verification failed"))
-      setOtpPending(false)
-    }
-  }
-
-  const fullName = [customer.first_name, customer.last_name].filter(Boolean).join(" ")
-  const emailVerified = (customer as { email_verified?: boolean }).email_verified === true
-  const phoneVerified = (customer as { phone_verified?: boolean }).phone_verified === true
+  const profile = useAccountProfileLogic(customer, countryCode)
 
   return (
     <div className="space-y-8">
@@ -103,8 +25,8 @@ export default function AccountProfile({
         <p className={`text-sm ${acct.muted}`}>Update your name and contact information.</p>
       </div>
 
-      <form action={formAction} className={`${acct.card} p-6 space-y-4`}>
-        <Field label="Full name" name="full_name" defaultValue={fullName} />
+      <form action={profile.formAction} className={`${acct.card} p-6 space-y-4`}>
+        <Field label="Full name" name="full_name" defaultValue={profile.fullName} />
         <div>
           <label className="block text-xs font-semibold uppercase tracking-wider text-muted mb-1.5">
             Email
@@ -115,62 +37,61 @@ export default function AccountProfile({
               readOnly
               className="flex-1 min-w-[200px] border border-cart-border rounded-none px-3 py-2.5 text-sm bg-surface-muted text-muted"
             />
-            {!emailVerified && (
+            {!profile.emailVerified && (
               <button
                 type="button"
-                onClick={() => sendVerifyOtp("email_verification")}
-                disabled={otpPending}
+                onClick={() => profile.sendVerifyOtp("email_verification")}
+                disabled={profile.otpPending}
                 className={`${acct.btnOutline} !py-2 !px-3`}
               >
                 Verify email
               </button>
             )}
-            {emailVerified && (
-              <span className="text-xs text-green-600 font-medium">Verified</span>
-            )}
-          </div>
-        </div>
-        <div>
-          <Field label="Phone" name="phone" type="tel" defaultValue={customer.phone || ""} />
-          <div className="mt-2 flex items-center gap-3">
-            {!phoneVerified && customer.phone && (
-              <button
-                type="button"
-                onClick={() => sendVerifyOtp("phone_verification")}
-                disabled={otpPending}
-                className={`${acct.btnOutline} !py-2 !px-3`}
-              >
-                Verify phone
-              </button>
-            )}
-            {phoneVerified && customer.phone && (
+            {profile.emailVerified && (
               <span className="text-xs text-green-600 font-medium">Verified</span>
             )}
           </div>
         </div>
 
-        {(state.error || message) && (
-          <p className={`text-sm ${state.ok || message ? "text-green-600" : "text-red-600"}`}>
-            {message || state.error}
+        <ProfilePhoneField
+          phone={profile.phone}
+          onPhoneChange={profile.handlePhoneChange}
+          phoneVerified={profile.phoneVerified}
+          phoneReady={profile.phoneReady}
+          phoneError={profile.phoneError}
+          verifyPending={profile.otpPending}
+          onVerify={() => profile.sendVerifyOtp("phone_verification")}
+          verifyButtonClassName={`${acct.btnOutline} !py-2 !px-3`}
+        />
+
+        {(profile.state.error || profile.message) && (
+          <p
+            className={`text-sm ${profile.state.ok || profile.message ? "text-green-600" : "text-red-600"}`}
+          >
+            {profile.message || profile.state.error}
           </p>
         )}
 
-        <button type="submit" disabled={pending} className={acct.btnPrimary}>
-          {pending ? "Saving…" : "Save changes"}
+        <button type="submit" disabled={profile.pending} className={acct.btnPrimary}>
+          {profile.pending ? "Saving…" : "Save changes"}
         </button>
       </form>
 
       <OtpComponent
-        open={otpOpen}
-        title={otpType === "email_verification" ? "Verify your email" : "Verify your phone"}
-        description={`Enter the code sent to your ${otpType === "email_verification" ? "email" : "phone"}.`}
-        otp={otp}
-        onOtpChange={setOtp}
-        error={otpError}
-        pending={otpPending}
-        onVerify={verifyOtp}
-        onResend={() => sendVerifyOtp(otpType)}
-        onClose={() => setOtpOpen(false)}
+        open={profile.otpOpen}
+        title={
+          profile.otpType === "email_verification"
+            ? "Verify your email"
+            : "Verify your phone"
+        }
+        description={`Enter the code sent to your ${profile.otpType === "email_verification" ? "email" : "phone"}.`}
+        otp={profile.otp}
+        onOtpChange={profile.setOtp}
+        error={profile.otpError}
+        pending={profile.otpPending}
+        onVerify={profile.verifyOtp}
+        onResend={() => profile.sendVerifyOtp(profile.otpType)}
+        onClose={() => profile.setOtpOpen(false)}
       />
     </div>
   )

package/src/auth-server.ts

@@ -258,21 +258,42 @@ export async function sendRegistrationOtp(
   customerId: string,
   type: "email_verification" | "phone_verification"
 ) {
-  const result = await sendCustomerOTP(customerId, type)
-  if (result.success) {
-    return result
-  }
+  const response = await fetch(`${getBaseUrl()}/store/customers/otp/send`, {
+    method: "POST",
+    headers: getHeaders(),
+    body: JSON.stringify({
+      customer_id: customerId,
+      type,
+    }),
+    cache: "no-store",
+  })
 
-  const message = result.error || "Failed to send verification code"
-  if (message.includes("Channel configuration not found")) {
-    return {
-      success: false as const,
-      error:
-        "Verification email is not configured on the backend. Rebuild and restart the Medusa server with customer-registration OTP settings.",
+  if (!response.ok) {
+    const err = (await response.json().catch(() => ({}))) as {
+      message?: string
     }
+    const message = err.message || "Failed to send verification code"
+    if (message.includes("Channel configuration not found")) {
+      return {
+        success: false as const,
+        error:
+          "Verification is not configured on the backend. Rebuild and restart the Medusa server with customer-registration OTP settings.",
+      }
+    }
+    return { success: false as const, error: message }
   }
 
-  return { success: false as const, error: message }
+  const data = (await response.json()) as {
+    token?: string
+    expires_at?: string
+    message?: string
+  }
+
+  return {
+    success: true as const,
+    token: data.token,
+    message: data.message || "OTP sent successfully",
+  }
 }
 
 export async function initiateGoogleAuth(countryCode?: string) {

package/src/profile-phone-field.tsx

@@ -0,0 +1,83 @@
+"use client"
+
+import { SplitPhoneInput } from "@pradip1995/commerce-core/components/split-phone-input"
+
+export type ProfilePhoneFieldProps = {
+  phone: string
+  onPhoneChange: (value: string) => void
+  phoneVerified: boolean
+  phoneReady: boolean
+  phoneError: string | null
+  verifyPending: boolean
+  onVerify: () => void
+  label?: string
+  wrapperClassName?: string
+  labelClassName?: string
+  rowClassName?: string
+  verifyButtonClassName?: string
+  verifiedClassName?: string
+  errorClassName?: string
+  hintClassName?: string
+  phoneInputClassName?: string
+  numberInputId?: string
+}
+
+export default function ProfilePhoneField({
+  phone,
+  onPhoneChange,
+  phoneVerified,
+  phoneReady,
+  phoneError,
+  verifyPending,
+  onVerify,
+  label = "Phone",
+  wrapperClassName = "",
+  labelClassName = "text-xs font-semibold uppercase tracking-wider text-muted mb-1.5 block",
+  rowClassName = "flex flex-wrap items-center gap-3",
+  verifyButtonClassName = "",
+  verifiedClassName = "text-xs text-green-600 font-medium",
+  errorClassName = "text-sm text-red-600 mt-1.5",
+  hintClassName = "text-xs text-muted mt-1.5",
+  phoneInputClassName = "",
+  numberInputId = "account-profile-phone",
+}: ProfilePhoneFieldProps) {
+  return (
+    <div className={wrapperClassName}>
+      <span className={labelClassName}>{label}</span>
+      <div className={rowClassName}>
+        <div className={`flex-1 min-w-[200px] ${phoneInputClassName}`}>
+          <SplitPhoneInput
+            value={phone}
+            onChange={onPhoneChange}
+            label="Mobile number"
+            numberInputId={numberInputId}
+            data-testid="account-profile-phone"
+          />
+        </div>
+        {phoneVerified ? (
+          <span className={verifiedClassName}>Verified</span>
+        ) : phoneReady ? (
+          <button
+            type="button"
+            onClick={onVerify}
+            disabled={verifyPending}
+            className={verifyButtonClassName}
+            data-testid="account-profile-verify-phone"
+          >
+            {verifyPending ? "Sending…" : "Verify phone"}
+          </button>
+        ) : null}
+      </div>
+      {phoneError ? (
+        <p className={errorClassName} role="alert">
+          {phoneError}
+        </p>
+      ) : null}
+      {!phoneVerified && phoneReady ? (
+        <p className={hintClassName}>
+          Tap <strong>Verify phone</strong> to receive an OTP on this number.
+        </p>
+      ) : null}
+    </div>
+  )
+}