@pradip1995/segment-login-template 0.5.7 → 0.5.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pradip1995/segment-login-template",
-  "version": "0.5.7",
+  "version": "0.5.9",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
@@ -17,9 +17,15 @@
     "./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"
   },
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "lint": "tsc --noEmit"
+  },
   "peerDependencies": {
     "@pradip1995/commerce-auth": "^4.0.0",
     "@pradip1995/commerce-core": "^4.0.0",
@@ -39,9 +45,5 @@
     "@types/react": "^19",
     "react": "19.0.3",
     "typescript": "^5.7.2"
-  },
-  "scripts": {
-    "typecheck": "tsc --noEmit",
-    "lint": "tsc --noEmit"
   }
-}
+}

package/src/account-guest-orders.tsx

@@ -4,7 +4,7 @@ import type { HttpTypes } from "@medusajs/types"
 import LocalizedLink from "@pradip1995/segment-primitives/localized-link"
 import { formatPrice } from "@pradip1995/segment-primitives/format-price"
 import { logoutGuest } from "@pradip1995/commerce-core/data/guest"
-import { auth } from "./account-theme"
+import { acct } from "./account-theme"
 
 export default function AccountGuestOrders({
   orders,
@@ -62,8 +62,8 @@ export default function AccountGuestOrders({
       {safeOrders.length === 0 ? (
         <div className="border border-cart-border bg-surface p-8 text-center">
           <p className="text-sm text-muted mb-4">No guest orders found for this session.</p>
-          <LocalizedLink href="/store" className={`${auth.btnPrimary} ${auth.btnShine} inline-flex`}>
-            <span className="relative z-[1]">Continue shopping</span>
+          <LocalizedLink href="/store" className={acct.btnPrimary}>
+            Continue shopping
           </LocalizedLink>
         </div>
       ) : (

package/src/account-profile-logic.ts

@@ -0,0 +1,210 @@
+"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/account-theme.ts

@@ -51,7 +51,7 @@ export const auth = {
   input:
     "w-full px-0 py-3 text-sm text-heading bg-transparent border-0 border-b-2 border-cart-border rounded-none placeholder:text-muted/50 focus:outline-none focus:border-brand-primary focus:ring-0 transition-colors duration-200",
   btnPrimary:
-    "group relative w-full py-3.5 bg-brand-primary text-inverse text-[11px] font-bold uppercase tracking-[0.28em] shadow-[0_8px_28px_-6px_rgba(0,0,0,0.25)] hover:bg-brand-accent hover:shadow-[0_12px_32px_-6px_rgba(0,0,0,0.3)] transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed overflow-hidden active:scale-[0.98]",
+    "group relative w-full inline-flex items-center justify-center py-3.5 bg-brand-primary text-inverse text-[11px] font-bold uppercase tracking-[0.28em] shadow-[0_8px_28px_-6px_rgba(0,0,0,0.25)] hover:bg-brand-accent hover:shadow-[0_12px_32px_-6px_rgba(0,0,0,0.3)] transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed overflow-hidden active:scale-[0.98]",
   btnShine:
     "before:absolute before:inset-0 before:bg-gradient-to-r before:from-transparent before:via-white/15 before:to-transparent before:-translate-x-full hover:before:translate-x-full before:transition-transform before:duration-700",
   btnOutline:

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>
+  )
+}