@pradip1995/segment-login-template 0.5.11 → 0.5.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pradip1995/segment-login-template",
-  "version": "0.5.11",
+  "version": "0.5.12",
   "license": "MIT",
   "publishConfig": {
     "access": "public"

package/src/account-profile.tsx

@@ -62,6 +62,7 @@ export default function AccountProfile({
           verifyPending={profile.otpPending}
           onVerify={() => profile.sendVerifyOtp("phone_verification")}
           verifyButtonClassName={`${acct.btnOutline} !py-2 !px-3`}
+          editButtonClassName={`${acct.btnOutline} !py-2 !px-3`}
         />
 
         {(profile.state.error || profile.message) && (

package/src/profile-phone-field.tsx

@@ -1,5 +1,6 @@
 "use client"
 
+import { useEffect, useState } from "react"
 import { SplitPhoneInput } from "@pradip1995/commerce-core/components/split-phone-input"
 
 export type ProfilePhoneFieldProps = {
@@ -15,6 +16,7 @@ export type ProfilePhoneFieldProps = {
   labelClassName?: string
   rowClassName?: string
   verifyButtonClassName?: string
+  editButtonClassName?: string
   verifiedClassName?: string
   errorClassName?: string
   hintClassName?: string
@@ -35,17 +37,31 @@ export default function ProfilePhoneField({
   labelClassName = "text-xs font-semibold uppercase tracking-wider text-muted mb-1.5 block",
   rowClassName = "flex flex-wrap items-center gap-3",
   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",
   phoneInputClassName = "",
   numberInputId = "account-profile-phone",
 }: ProfilePhoneFieldProps) {
+  const [editing, setEditing] = useState(false)
+  const locked = phoneVerified && !editing
+
+  useEffect(() => {
+    if (phoneVerified) setEditing(false)
+  }, [phoneVerified])
+
   return (
     <div className={wrapperClassName}>
       <span className={labelClassName}>{label}</span>
       <div className={rowClassName}>
-        <div className={`flex-1 min-w-[200px] ${phoneInputClassName}`}>
+        <div
+          className={`flex-1 min-w-[200px] ${phoneInputClassName}${
+            locked ? " pointer-events-none opacity-80" : ""
+          }`}
+          aria-disabled={locked || undefined}
+          {...(locked ? { inert: true } : {})}
+        >
           <SplitPhoneInput
             value={phone}
             onChange={onPhoneChange}
@@ -54,7 +70,19 @@ export default function ProfilePhoneField({
             data-testid="account-profile-phone"
           />
         </div>
-        {phoneVerified ? (
+        {locked ? (
+          <>
+            <span className={verifiedClassName}>Verified</span>
+            <button
+              type="button"
+              onClick={() => setEditing(true)}
+              className={editButtonClassName || verifyButtonClassName}
+              data-testid="account-profile-edit-phone"
+            >
+              Edit
+            </button>
+          </>
+        ) : phoneVerified ? (
           <span className={verifiedClassName}>Verified</span>
         ) : phoneReady ? (
           <button
@@ -73,10 +101,18 @@ export default function ProfilePhoneField({
           {phoneError}
         </p>
       ) : null}
-      {!phoneVerified && phoneReady ? (
+      {locked ? (
+        <p className={hintClassName}>
+          Tap <strong>Edit</strong> to change this number.
+        </p>
+      ) : !phoneVerified && phoneReady ? (
         <p className={hintClassName}>
           Tap <strong>Verify phone</strong> to receive an OTP on this number.
         </p>
+      ) : editing ? (
+        <p className={hintClassName}>
+          Update the number, then save and verify it again.
+        </p>
       ) : null}
     </div>
   )