@pradip1995/segment-login-template 0.5.12 → 0.5.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pradip1995/segment-login-template",
-  "version": "0.5.12",
+  "version": "0.5.13",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
@@ -19,6 +19,7 @@
     "./auth-server": "./src/auth-server.ts",
     "./account-profile-logic": "./src/account-profile-logic.ts",
     "./profile-phone-field": "./src/profile-phone-field.tsx",
+    "./profile-email-field": "./src/profile-email-field.tsx",
     "./google-auth-section": "./src/google-auth-section.tsx",
     "./otp-input": "./src/otp-input.tsx"
   },
@@ -44,6 +45,7 @@
   },
   "scripts": {
     "typecheck": "tsc --noEmit",
-    "lint": "tsc --noEmit"
+    "lint": "tsc --noEmit",
+    "test": "node --experimental-strip-types --test src/*.test.ts"
   }
 }

package/src/account-profile-logic.ts

@@ -9,10 +9,19 @@ import {
   parsePhoneParts,
 } from "@pradip1995/commerce-core/util/phone"
 import {
+  requestContactChange,
   sendRegistrationOtp,
+  verifyContactChange,
   verifyRegistrationOtp,
 } from "./auth-server"
 import { isNextRedirect, safeErrorMessage } from "./is-next-redirect"
+import {
+  EMAIL_OTP_ERRORS,
+  isValidEmail,
+  normalizeEmail,
+  resolveEmailOtpFlow,
+  type EmailOtpFlow,
+} from "./profile-email"
 
 export function customerPhoneToInputValue(phone?: string | null): string {
   if (!phone?.trim()) return ""
@@ -50,21 +59,27 @@ export function useAccountProfileLogic(
   const [message, setMessage] = useState<string | null>(null)
   const [phone, setPhone] = useState(() => customerPhoneToInputValue(customer.phone))
   const [phoneError, setPhoneError] = useState<string | null>(null)
+  const [email, setEmail] = useState(() => customer.email || "")
+  const [emailError, setEmailError] = 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 [otpFlow, setOtpFlow] = useState<EmailOtpFlow>("verify_existing")
   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 [emailVerified, setEmailVerified] = useState(() =>
+    readVerified(customer, "email_verified")
+  )
 
   const phoneParts = parsePhoneParts(phone)
   const phoneReady = isValidPhoneParts(phoneParts.dialCode, phoneParts.localNumber)
+  const emailReady = isValidEmail(email)
 
   async function saveProfile(_prev: unknown, formData: FormData) {
     try {
@@ -127,6 +142,30 @@ export function useAccountProfileLogic(
       if (type === "phone_verification") {
         const saved = await ensurePhoneSavedForVerification()
         if (!saved) return
+        setOtpFlow("verify_existing")
+      }
+
+      if (type === "email_verification") {
+        const resolved = resolveEmailOtpFlow({
+          currentEmail: customer.email,
+          draftEmail: email,
+        })
+        if (!resolved.ok) {
+          setEmailError(EMAIL_OTP_ERRORS[resolved.reason])
+          return
+        }
+        setOtpFlow(resolved.flow)
+        const res =
+          resolved.flow === "change_contact"
+            ? await requestContactChange({ email: resolved.email })
+            : await sendRegistrationOtp(customer.id, type)
+        if (!res?.success) {
+          throw new Error(res?.error || "Failed to send code")
+        }
+        setOtpToken(res.token ?? null)
+        setOtp("")
+        setOtpOpen(true)
+        return
       }
 
       const res = await sendRegistrationOtp(customer.id, type)
@@ -143,6 +182,9 @@ export function useAccountProfileLogic(
       if (type === "phone_verification") {
         setPhoneError(msg)
       }
+      if (type === "email_verification") {
+        setEmailError(msg)
+      }
     } finally {
       setOtpPending(false)
     }
@@ -153,19 +195,33 @@ export function useAccountProfileLogic(
     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")
+      if (otpType === "email_verification" && otpFlow === "change_contact") {
+        const res = await verifyContactChange({
+          otpToken: otpToken || "",
+          code: otp,
+        })
+        if (!res?.success) {
+          throw new Error(res?.error || "Invalid code")
+        }
+        setEmailVerified(true)
+      } else {
+        const res = await verifyRegistrationOtp({
+          otpToken: otpToken || "",
+          code: otp,
+          countryCode,
+          skipRedirect: true,
+        })
+        if (!res?.success) {
+          throw new Error(res?.error || "Invalid code")
+        }
+        if (otpType === "phone_verification") {
+          setPhoneVerified(true)
+        }
+        if (otpType === "email_verification") {
+          setEmailVerified(true)
+        }
       }
       setOtpOpen(false)
-      if (otpType === "phone_verification") {
-        setPhoneVerified(true)
-      }
       setMessage("Verification successful.")
       window.location.reload()
     } catch (err) {
@@ -187,6 +243,14 @@ export function useAccountProfileLogic(
     }
   }
 
+  function handleEmailChange(value: string) {
+    setEmail(value)
+    setEmailError(null)
+    if (normalizeEmail(value) !== normalizeEmail(customer.email)) {
+      setEmailVerified(false)
+    }
+  }
+
   const fullName = [customer.first_name, customer.last_name].filter(Boolean).join(" ")
 
   return {
@@ -196,6 +260,10 @@ export function useAccountProfileLogic(
     phoneReady,
     phoneError,
     phoneVerified,
+    email,
+    handleEmailChange,
+    emailReady,
+    emailError,
     emailVerified,
     message,
     state,

package/src/account-profile.tsx

@@ -5,6 +5,7 @@ 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 ProfileEmailField from "./profile-email-field"
 import { acct } from "./account-theme"
 
 export default function AccountProfile({
@@ -27,31 +28,16 @@ export default function AccountProfile({
 
       <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
-          </label>
-          <div className="flex flex-wrap items-center gap-3">
-            <input
-              value={customer.email}
-              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"
-            />
-            {!profile.emailVerified && (
-              <button
-                type="button"
-                onClick={() => profile.sendVerifyOtp("email_verification")}
-                disabled={profile.otpPending}
-                className={`${acct.btnOutline} !py-2 !px-3`}
-              >
-                Verify email
-              </button>
-            )}
-            {profile.emailVerified && (
-              <span className="text-xs text-green-600 font-medium">Verified</span>
-            )}
-          </div>
-        </div>
+        <ProfileEmailField
+          email={profile.email}
+          onEmailChange={profile.handleEmailChange}
+          emailVerified={profile.emailVerified}
+          emailError={profile.emailError}
+          verifyPending={profile.otpPending}
+          onVerify={() => profile.sendVerifyOtp("email_verification")}
+          verifyButtonClassName={`${acct.btnOutline} !py-2 !px-3`}
+          editButtonClassName={`${acct.btnOutline} !py-2 !px-3`}
+        />
 
         <ProfilePhoneField
           phone={profile.phone}
@@ -85,7 +71,7 @@ export default function AccountProfile({
             ? "Verify your email"
             : "Verify your phone"
         }
-        description={`Enter the code sent to your ${profile.otpType === "email_verification" ? "email" : "phone"}.`}
+        description={`Enter the code sent to your ${profile.otpType === "email_verification" ? profile.email || "email" : "phone"}.`}
         otp={profile.otp}
         onOtpChange={profile.setOtp}
         error={profile.otpError}

package/src/auth-server.ts

@@ -9,7 +9,7 @@ import {
   verifyCustomerOTP,
 } from "@pradip1995/commerce-core/data/customer-registration"
 import { transferCart } from "@pradip1995/commerce-core/data/customer"
-import { getCacheTag, setAuthToken } from "@pradip1995/commerce-core/data/cookies"
+import { getAuthHeaders, getCacheTag, setAuthToken } from "@pradip1995/commerce-core/data/cookies"
 import { sendOTP, verifyOTP } from "@pradip1995/commerce-core/data/guest"
 import { getGoogleOAuthCallbackUrl } from "@pradip1995/commerce-core/util/google-oauth"
 import { revalidateTag } from "next/cache"
@@ -64,6 +64,13 @@ function getHeaders() {
   }
 }
 
+async function getAuthenticatedHeaders() {
+  return {
+    ...getHeaders(),
+    ...(await getAuthHeaders()),
+  }
+}
+
 function getBaseUrl() {
   return process.env.MEDUSA_BACKEND_URL || "http://localhost:9000"
 }
@@ -296,6 +303,74 @@ export async function sendRegistrationOtp(
   }
 }
 
+export async function requestContactChange(input: { email?: string; phone?: string }) {
+  const body = input.email
+    ? { email: input.email.trim().toLowerCase() }
+    : { phone: input.phone }
+
+  const response = await fetch(`${getBaseUrl()}/store/customers/me/contact`, {
+    method: "POST",
+    headers: await getAuthenticatedHeaders(),
+    body: JSON.stringify(body),
+    cache: "no-store",
+  })
+
+  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 }
+  }
+
+  const data = (await response.json()) as { token?: string; expires_at?: string }
+
+  return {
+    success: true as const,
+    token: data.token,
+  }
+}
+
+export async function verifyContactChange(input: { otpToken: string; code: string }) {
+  const response = await fetch(`${getBaseUrl()}/store/customers/me/contact/verify`, {
+    method: "POST",
+    headers: await getAuthenticatedHeaders(),
+    body: JSON.stringify({
+      token: input.otpToken,
+      code: input.code,
+    }),
+    cache: "no-store",
+  })
+
+  const data = (await response.json().catch(() => ({}))) as {
+    message?: string
+    token?: string | null
+  }
+
+  if (!response.ok) {
+    return {
+      success: false as const,
+      error: data.message || "Invalid verification code",
+    }
+  }
+
+  if (data.token) {
+    await setAuthToken(data.token)
+  }
+
+  const customerCacheTag = await getCacheTag("customers")
+  if (customerCacheTag) {
+    revalidateTag(customerCacheTag)
+  }
+
+  return { success: true as const }
+}
+
 export async function initiateGoogleAuth(countryCode?: string) {
   try {
     const backendUrl = getBaseUrl()

package/src/profile-email-field.tsx

@@ -0,0 +1,116 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import { isEmailFieldLocked, isValidEmail, profileEmailAction } from "./profile-email"
+
+export type ProfileEmailFieldProps = {
+  email: string
+  onEmailChange: (value: string) => void
+  emailVerified: boolean
+  emailError: string | null
+  verifyPending: boolean
+  onVerify: () => void
+  label?: string
+  wrapperClassName?: string
+  labelClassName?: string
+  rowClassName?: string
+  inputClassName?: string
+  verifyButtonClassName?: string
+  editButtonClassName?: string
+  verifiedClassName?: string
+  errorClassName?: string
+  hintClassName?: string
+}
+
+export default function ProfileEmailField({
+  email,
+  onEmailChange,
+  emailVerified,
+  emailError,
+  verifyPending,
+  onVerify,
+  label = "Email",
+  wrapperClassName = "",
+  labelClassName = "block text-xs font-semibold uppercase tracking-wider text-muted mb-1.5",
+  rowClassName = "flex flex-wrap items-center gap-3",
+  inputClassName = "flex-1 min-w-[200px] border border-cart-border rounded-none px-3 py-2.5 text-sm bg-surface text-heading focus:outline-none focus:border-brand-accent",
+  verifyButtonClassName = "",
+  editButtonClassName = "",
+  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",
+}: ProfileEmailFieldProps) {
+  const [editing, setEditing] = useState(false)
+  const locked = isEmailFieldLocked({ emailVerified, editing })
+  const emailReady = isValidEmail(email)
+  const action = profileEmailAction({ emailVerified, editing, emailReady })
+
+  useEffect(() => {
+    if (emailVerified) setEditing(false)
+  }, [emailVerified])
+
+  return (
+    <div className={wrapperClassName}>
+      <label className={labelClassName} htmlFor="account-profile-email">
+        {label}
+      </label>
+      <div className={rowClassName}>
+        <input
+          id="account-profile-email"
+          name="email"
+          type="email"
+          value={email}
+          onChange={(event) => onEmailChange(event.target.value)}
+          readOnly={locked}
+          placeholder="Enter your email"
+          autoComplete="email"
+          className={`${inputClassName}${locked ? " bg-surface-muted text-muted" : ""}`}
+          data-testid="account-profile-email"
+        />
+        {action === "edit" ? (
+          <>
+            <span className={verifiedClassName}>Verified</span>
+            <button
+              type="button"
+              onClick={() => setEditing(true)}
+              className={editButtonClassName || verifyButtonClassName}
+              data-testid="account-profile-edit-email"
+            >
+              Edit
+            </button>
+          </>
+        ) : null}
+        {action === "verified" ? <span className={verifiedClassName}>Verified</span> : null}
+        {action === "verify" ? (
+          <button
+            type="button"
+            onClick={onVerify}
+            disabled={verifyPending}
+            className={verifyButtonClassName}
+            data-testid="account-profile-verify-email"
+          >
+            {verifyPending ? "Sending…" : "Verify email"}
+          </button>
+        ) : null}
+      </div>
+      {emailError ? (
+        <p className={errorClassName} role="alert">
+          {emailError}
+        </p>
+      ) : null}
+      {action === "edit" ? (
+        <p className={hintClassName}>
+          Tap <strong>Edit</strong> to change this email.
+        </p>
+      ) : action === "verify" ? (
+        <p className={hintClassName}>
+          Tap <strong>Verify email</strong> to receive an OTP at this address.
+        </p>
+      ) : editing ? (
+        <p className={hintClassName}>
+          Update the email, then verify it again.
+        </p>
+      ) : null}
+    </div>
+  )
+}

package/src/profile-email.test.ts

@@ -0,0 +1,182 @@
+import { describe, it } from "node:test"
+import assert from "node:assert/strict"
+import {
+  EMAIL_OTP_ERRORS,
+  isEmailFieldLocked,
+  isValidEmail,
+  normalizeEmail,
+  profileEmailAction,
+  resolveEmailOtpFlow,
+  type ProfileEmailAction,
+  type ResolveEmailOtpFlowResult,
+} from "./profile-email.ts"
+
+const NORMALIZE_CASES: { name: string; value: string | null | undefined; want: string }[] = [
+  { name: "trims and lowercases a typed email", value: "  Jay@Empire.COM ", want: "jay@empire.com" },
+  { name: "empty string stays empty", value: "", want: "" },
+  { name: "whitespace-only becomes empty", value: "   ", want: "" },
+  { name: "null becomes empty", value: null, want: "" },
+  { name: "undefined becomes empty", value: undefined, want: "" },
+]
+
+const VALID_CASES: { name: string; value: string | null | undefined; want: boolean }[] = [
+  { name: "accepts a normal email", value: "jay@empire.com", want: true },
+  { name: "accepts mixed-case with spaces", value: "  Jay@Empire.COM ", want: true },
+  { name: "rejects empty", value: "", want: false },
+  { name: "rejects missing at-sign", value: "jayempire.com", want: false },
+  { name: "rejects missing domain", value: "jay@", want: false },
+  { name: "rejects phone-only customer empty email", value: null, want: false },
+]
+
+const FLOW_CASES: {
+  name: string
+  currentEmail: string | null | undefined
+  draftEmail: string
+  want: ResolveEmailOtpFlowResult
+}[] = [
+  {
+    name: "phone-only user adding an email uses contact change",
+    currentEmail: "",
+    draftEmail: "jay@empire.com",
+    want: { ok: true, flow: "change_contact", email: "jay@empire.com" },
+  },
+  {
+    name: "missing current email uses contact change",
+    currentEmail: null,
+    draftEmail: "jay@empire.com",
+    want: { ok: true, flow: "change_contact", email: "jay@empire.com" },
+  },
+  {
+    name: "same unverified email verifies the existing address",
+    currentEmail: "jay@empire.com",
+    draftEmail: "Jay@Empire.com",
+    want: { ok: true, flow: "verify_existing", email: "jay@empire.com" },
+  },
+  {
+    name: "changing to a different email uses contact change",
+    currentEmail: "old@empire.com",
+    draftEmail: "new@empire.com",
+    want: { ok: true, flow: "change_contact", email: "new@empire.com" },
+  },
+  {
+    name: "empty draft is empty",
+    currentEmail: "",
+    draftEmail: "  ",
+    want: { ok: false, reason: "empty" },
+  },
+  {
+    name: "malformed draft is invalid",
+    currentEmail: "",
+    draftEmail: "not-an-email",
+    want: { ok: false, reason: "invalid" },
+  },
+]
+
+const LOCK_CASES: { name: string; emailVerified: boolean; editing: boolean; want: boolean }[] = [
+  { name: "verified and not editing is locked", emailVerified: true, editing: false, want: true },
+  { name: "verified while editing is unlocked so the user can type", emailVerified: true, editing: true, want: false },
+  { name: "unverified empty email is never locked", emailVerified: false, editing: false, want: false },
+  { name: "unverified stays unlocked even if editing flag is set", emailVerified: false, editing: true, want: false },
+]
+
+const ACTION_CASES: {
+  name: string
+  emailVerified: boolean
+  editing: boolean
+  emailReady: boolean
+  want: ProfileEmailAction
+}[] = [
+  {
+    name: "phone-only empty field shows no verify button yet",
+    emailVerified: false,
+    editing: false,
+    emailReady: false,
+    want: "none",
+  },
+  {
+    name: "typed valid unverified email shows verify",
+    emailVerified: false,
+    editing: false,
+    emailReady: true,
+    want: "verify",
+  },
+  {
+    name: "verified email shows edit",
+    emailVerified: true,
+    editing: false,
+    emailReady: true,
+    want: "edit",
+  },
+  {
+    name: "editing a verified email keeps the verified label until the value changes",
+    emailVerified: true,
+    editing: true,
+    emailReady: true,
+    want: "verified",
+  },
+]
+
+describe("normalizeEmail", () => {
+  for (const tc of NORMALIZE_CASES) {
+    it(tc.name, () => {
+      assert.equal(normalizeEmail(tc.value), tc.want)
+    })
+  }
+})
+
+describe("isValidEmail", () => {
+  for (const tc of VALID_CASES) {
+    it(tc.name, () => {
+      assert.equal(isValidEmail(tc.value), tc.want)
+    })
+  }
+})
+
+describe("resolveEmailOtpFlow", () => {
+  for (const tc of FLOW_CASES) {
+    it(tc.name, () => {
+      assert.deepEqual(
+        resolveEmailOtpFlow({ currentEmail: tc.currentEmail, draftEmail: tc.draftEmail }),
+        tc.want
+      )
+    })
+  }
+})
+
+describe("isEmailFieldLocked", () => {
+  for (const tc of LOCK_CASES) {
+    it(tc.name, () => {
+      assert.equal(
+        isEmailFieldLocked({ emailVerified: tc.emailVerified, editing: tc.editing }),
+        tc.want
+      )
+    })
+  }
+})
+
+describe("profileEmailAction", () => {
+  for (const tc of ACTION_CASES) {
+    it(tc.name, () => {
+      assert.equal(
+        profileEmailAction({
+          emailVerified: tc.emailVerified,
+          editing: tc.editing,
+          emailReady: tc.emailReady,
+        }),
+        tc.want
+      )
+    })
+  }
+})
+
+describe("EMAIL_OTP_ERRORS", () => {
+  const CASES = [
+    { name: "empty copy", reason: "empty" as const, want: "Please enter an email address before verifying." },
+    { name: "invalid copy", reason: "invalid" as const, want: "Please enter a valid email address." },
+  ]
+  for (const tc of CASES) {
+    it(tc.name, () => {
+      assert.equal(EMAIL_OTP_ERRORS[tc.reason], tc.want)
+    })
+  }
+})

package/src/profile-email.ts

@@ -0,0 +1,54 @@
+export const EMAIL_REGEX = /^\S+@\S+\.\S+$/
+
+export const EMAIL_OTP_ERRORS = {
+  empty: "Please enter an email address before verifying.",
+  invalid: "Please enter a valid email address.",
+} as const
+
+export function normalizeEmail(value: string | null | undefined): string {
+  return (value || "").trim().toLowerCase()
+}
+
+export function isValidEmail(value: string | null | undefined): boolean {
+  return EMAIL_REGEX.test(normalizeEmail(value))
+}
+
+export type EmailOtpFlow = "verify_existing" | "change_contact"
+
+export type ResolveEmailOtpFlowResult =
+  | { ok: true; flow: EmailOtpFlow; email: string }
+  | { ok: false; reason: "empty" | "invalid" }
+
+export function resolveEmailOtpFlow(input: {
+  currentEmail: string | null | undefined
+  draftEmail: string | null | undefined
+}): ResolveEmailOtpFlowResult {
+  const email = normalizeEmail(input.draftEmail)
+  if (!email) return { ok: false, reason: "empty" }
+  if (!isValidEmail(email)) return { ok: false, reason: "invalid" }
+  const current = normalizeEmail(input.currentEmail)
+  if (current && email === current) {
+    return { ok: true, flow: "verify_existing", email }
+  }
+  return { ok: true, flow: "change_contact", email }
+}
+
+export function isEmailFieldLocked(input: {
+  emailVerified: boolean
+  editing: boolean
+}): boolean {
+  return input.emailVerified && !input.editing
+}
+
+export type ProfileEmailAction = "verify" | "edit" | "verified" | "none"
+
+export function profileEmailAction(input: {
+  emailVerified: boolean
+  editing: boolean
+  emailReady: boolean
+}): ProfileEmailAction {
+  if (isEmailFieldLocked(input)) return "edit"
+  if (input.emailVerified) return "verified"
+  if (input.emailReady) return "verify"
+  return "none"
+}