@pradip1995/segment-jewelry-checkout-form 0.1.3 → 0.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pradip1995/segment-jewelry-checkout-form",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
@@ -16,10 +16,6 @@
     "./manifest": "./src/manifest.ts",
     "./payment-block": "./src/payment-block.tsx"
   },
-  "scripts": {
-    "typecheck": "tsc --noEmit",
-    "lint": "tsc --noEmit"
-  },
   "peerDependencies": {
     "@pradip1995/commerce-core": "^4.0.0",
     "@pradip1995/plugin-sdk": "^0.2.0",
@@ -38,5 +34,9 @@
     "@types/react": "^19",
     "react": "19.0.3",
     "typescript": "^5.7.2"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "lint": "tsc --noEmit"
   }
-}
+}

package/src/address-fields.tsx

@@ -100,22 +100,37 @@ function addressToFormValues(
   }
 }
 
-function pickPreferredAddress(
-  customer?: HttpTypes.StoreCustomer | null
+function pickPreferredFromList(
+  addresses: HttpTypes.StoreCustomerAddress[]
 ): HttpTypes.StoreCustomerAddress | undefined {
-  const addresses = customer?.addresses ?? []
   return (
     addresses.find((a) => a.is_default_shipping) ||
+    addresses.find((a) => a.is_default_billing) ||
     addresses.find(
-      (a) =>
-        a.is_default_billing ||
-        a.metadata?.is_default === true ||
-        a.metadata?.is_default === "true"
+      (a) => a.metadata?.is_default === true || a.metadata?.is_default === "true"
     ) ||
     addresses[0]
   )
 }
 
+function pickPreferredAddress(
+  customer?: HttpTypes.StoreCustomer | null
+): HttpTypes.StoreCustomerAddress | undefined {
+  return pickPreferredFromList(customer?.addresses ?? [])
+}
+
+function sortAddressesDefaultFirst(
+  addresses: HttpTypes.StoreCustomerAddress[]
+): HttpTypes.StoreCustomerAddress[] {
+  const preferred = pickPreferredFromList(addresses)
+  if (!preferred?.id) return addresses
+  return [...addresses].sort((left, right) => {
+    if (left.id === preferred.id) return -1
+    if (right.id === preferred.id) return 1
+    return 0
+  })
+}
+
 function findMatchingSavedAddress(
   cart: HttpTypes.StoreCart | undefined,
   addresses: HttpTypes.StoreCustomerAddress[]
@@ -143,7 +158,7 @@ function buildInitialValues(
   const shipping = cart?.shipping_address
 
   if (addresses.length) {
-    const source = matched || preferred
+    const source = preferred || matched
     if (source) {
       return addressToFormValues(source, {
         email,
@@ -179,29 +194,137 @@ function resolveInitialSelectedId(
   const addresses = customer?.addresses ?? []
   if (!addresses.length) return NEW_ADDRESS_ID
 
-  const matched = findMatchingSavedAddress(cart, addresses)
-  if (matched?.id) return matched.id
-
   const preferred = pickPreferredAddress(customer)
   if (preferred?.id) return preferred.id
 
+  const matched = findMatchingSavedAddress(cart, addresses)
+  if (matched?.id) return matched.id
+
   return NEW_ADDRESS_ID
 }
 
-function formatAddressLine(address: {
+function formatAddressParts(address: {
   address1?: string | null
   address2?: string | null
   city?: string | null
   province?: string | null
   postalCode?: string | null
   countryCode?: string | null
-}): string {
+}): { street: string; cityLine: string } {
+  const street = [address.address1, address.address2].filter(Boolean).join(", ")
   const locality = [address.city, address.province].filter(Boolean).join(", ")
   const pin = address.postalCode ? `${locality ? " - " : ""}${address.postalCode}` : ""
   const country = (address.countryCode || "").toUpperCase()
-  return [address.address1, address.address2, `${locality}${pin}`, country]
-    .filter(Boolean)
-    .join(", ")
+  const cityLine = [`${locality}${pin}`, country].filter(Boolean).join(", ")
+  return { street, cityLine }
+}
+
+function formatMobileDisplay(phone?: string | null): string {
+  const digits = (phone || "").replace(/\D/g, "")
+  if (!digits) return ""
+  if (digits.length === 10) return `91${digits}`
+  return digits
+}
+
+function resolveAddressType(value: unknown): "HOME" | "OFFICE" {
+  return String(value ?? "").trim().toUpperCase() === "OFFICE" ? "OFFICE" : "HOME"
+}
+
+function addressTypeFromMetadata(metadata: unknown): "HOME" | "OFFICE" {
+  if (!metadata || typeof metadata !== "object") return "HOME"
+  return resolveAddressType((metadata as Record<string, unknown>).address_type)
+}
+
+function CheckoutAddressCard({
+  name,
+  street,
+  cityLine,
+  phone,
+  addressType = "HOME",
+  selected = false,
+  onEdit,
+  onSelect,
+}: {
+  name: string
+  street: string
+  cityLine: string
+  phone?: string | null
+  addressType?: "HOME" | "OFFICE"
+  selected?: boolean
+  onEdit?: () => void
+  onSelect?: () => void
+}) {
+  const mobile = formatMobileDisplay(phone)
+  const interactive = Boolean(onSelect)
+
+  return (
+    <div
+      className={[
+        "jewelry-checkout-address-card__body",
+        selected ? "jewelry-checkout-address-card__body--selected" : "",
+        interactive ? "jewelry-checkout-address-card__body--pickable" : "",
+      ].join(" ")}
+      role={interactive ? "button" : undefined}
+      tabIndex={interactive ? 0 : undefined}
+      aria-pressed={interactive ? selected : undefined}
+      onClick={onSelect}
+      onKeyDown={
+        onSelect
+          ? (event) => {
+              if (event.key === "Enter" || event.key === " ") {
+                event.preventDefault()
+                onSelect()
+              }
+            }
+          : undefined
+      }
+    >
+      <span
+        className={[
+          "jewelry-checkout-address-card__radio",
+          selected ? "" : "jewelry-checkout-address-card__radio--empty",
+        ].join(" ")}
+        aria-hidden
+      >
+        <span />
+      </span>
+      <div className="jewelry-checkout-address-card__content">
+        <div className="jewelry-checkout-address-card__name-row">
+          <span className="jewelry-checkout-address-card__name">{name}</span>
+          <span className="jewelry-checkout-address-card__tag">{addressType === "OFFICE" ? "Office" : "Home"}</span>
+        </div>
+        {street ? <span className="jewelry-checkout-address-card__line">{street}</span> : null}
+        {cityLine ? (
+          <span className="jewelry-checkout-address-card__line jewelry-checkout-address-card__line--city">
+            {cityLine}
+          </span>
+        ) : null}
+        {mobile ? (
+          <span className="jewelry-checkout-address-card__mobile">
+            <span>Mobile</span> {mobile}
+          </span>
+        ) : null}
+        <span className="jewelry-checkout-address-card__pod">Pay on Delivery available</span>
+      </div>
+      {onEdit ? (
+        <button
+          type="button"
+          className="jewelry-checkout-address-card__edit"
+          onClick={onEdit}
+          aria-label="Edit delivery address"
+        >
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
+            <path strokeLinecap="round" strokeLinejoin="round" d="M12 20h9" />
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M16.5 3.5a2.12 2.12 0 013 3L7 19l-4 1 1-4 12.5-12.5z"
+            />
+          </svg>
+        </button>
+      ) : null}
+    </div>
+  )
 }
 
 function composeFullName(firstName: string, lastName: string): string {
@@ -249,7 +372,7 @@ export default function AddressFields({
   onValuesChange,
 }: AddressFieldsProps) {
   const router = useRouter()
-  const savedAddresses = customer?.addresses ?? []
+  const savedAddresses = sortAddressesDefaultFirst(customer?.addresses ?? [])
   const [values, setValues] = useState(() => buildInitialValues(cart, customer))
   const [selectedAddressId, setSelectedAddressId] = useState(() =>
     resolveInitialSelectedId(cart, customer)
@@ -259,6 +382,7 @@ export default function AddressFields({
   const [draft, setDraft] = useState<CheckoutFormValues | null>(null)
   const [draftError, setDraftError] = useState("")
   const [saveAsDefault, setSaveAsDefault] = useState(true)
+  const [addressType, setAddressType] = useState<"HOME" | "OFFICE">("HOME")
   const [acceptedManualAddress, setAcceptedManualAddress] = useState(false)
   const [phoneError, setPhoneError] = useState(false)
   const [sameAsBilling, setSameAsBilling] = useState(true)
@@ -291,12 +415,18 @@ export default function AddressFields({
 
   useEffect(() => {
     if (didPrefillDefaultRef.current) return
-    if (cart.shipping_address?.address_1) return
     if (selectedAddressId === NEW_ADDRESS_ID) return
 
     const selected = savedAddresses.find((address) => address.id === selectedAddressId)
     if (!selected) return
 
+    const cartAlreadyMatches =
+      findMatchingSavedAddress(cart, [selected])?.id === selected.id
+    if (cartAlreadyMatches) {
+      didPrefillDefaultRef.current = true
+      return
+    }
+
     didPrefillDefaultRef.current = true
     void applySavedAddress(selected, { refresh: true })
     // eslint-disable-next-line react-hooks/exhaustive-deps -- run once on mount for default address prefill
@@ -436,6 +566,7 @@ export default function AddressFields({
   const openAddAddress = () => {
     setDraftError("")
     setSaveAsDefault(savedAddresses.length === 0)
+    setAddressType("HOME")
     setDraft(emptyAddressDraft(values))
     setAddressModal("add")
   }
@@ -447,6 +578,7 @@ export default function AddressFields({
       !!(editingSaved?.is_default_shipping || editingSaved?.is_default_billing) ||
         savedAddresses.length === 0
     )
+    setAddressType(addressTypeFromMetadata(editingSaved?.metadata))
     setDraft({ ...values })
     setAddressModal("edit")
   }
@@ -523,6 +655,7 @@ export default function AddressFields({
       formData.set("postal_code", nextValues.postalCode)
       formData.set("country_code", nextValues.countryCode)
       formData.set("phone", nextValues.phone)
+      formData.set("address_type", addressType)
       if (saveAsDefault) formData.set("is_default", "on")
 
       try {
@@ -566,7 +699,9 @@ export default function AddressFields({
   const hasSavedAddresses = savedAddresses.length > 0
   const hasSelectedAddress = Boolean(selectedSaved) || acceptedManualAddress
   const isDefaultSelected = !!(
-    selectedSaved?.is_default_shipping || selectedSaved?.is_default_billing
+    selectedSaved?.is_default_shipping ||
+    (!savedAddresses.some((address) => address.is_default_shipping) &&
+      selectedSaved?.is_default_billing)
   )
 
   if (!hasSavedAddresses) {
@@ -775,6 +910,7 @@ export default function AddressFields({
                 onChange={(value) => updateDraft("email", value)}
                 full
               />
+              <AddressTypePicker value={addressType} onChange={setAddressType} />
               <label className="jewelry-checkout-modal__check">
                 <input
                   type="checkbox"
@@ -839,45 +975,14 @@ export default function AddressFields({
           <div className="jewelry-checkout-address-card__badge">
             {isDefaultSelected ? "Default address" : "Delivery address"}
           </div>
-          <div className="jewelry-checkout-address-card__body">
-            <span className="jewelry-checkout-address-card__radio" aria-hidden>
-              <span />
-            </span>
-            <div className="jewelry-checkout-address-card__content">
-              <div className="jewelry-checkout-address-card__name-row">
-                <p className="jewelry-checkout-address-card__name">
-                  {values.fullName || "Delivery address"}
-                </p>
-                <span className="jewelry-checkout-address-card__tag">Home</span>
-              </div>
-              <p className="jewelry-checkout-address-card__line">
-                {formatAddressLine({
-                  address1: values.address1,
-                  address2: values.address2,
-                  city: values.city,
-                  province: values.province,
-                  postalCode: values.postalCode,
-                  countryCode: values.countryCode,
-                })}
-              </p>
-              <span className="jewelry-checkout-address-card__pod">Pay on Delivery available</span>
-            </div>
-            <button
-              type="button"
-              className="jewelry-checkout-address-card__edit"
-              onClick={openEditAddress}
-              aria-label="Edit delivery address"
-            >
-              <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
-                <path strokeLinecap="round" strokeLinejoin="round" d="M12 20h9" />
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  d="M16.5 3.5a2.12 2.12 0 013 3L7 19l-4 1 1-4 12.5-12.5z"
-                />
-              </svg>
-            </button>
-          </div>
+          <CheckoutAddressCard
+            name={values.fullName || "Delivery address"}
+            {...formatAddressParts(values)}
+            phone={values.phone}
+            addressType={addressTypeFromMetadata(selectedSaved?.metadata)}
+            selected
+            onEdit={openEditAddress}
+          />
         </article>
       ) : (
         <div className="jewelry-checkout-address-empty">
@@ -922,51 +1027,29 @@ export default function AddressFields({
             <ul className="jewelry-checkout-modal__list">
               {savedAddresses.map((address) => {
                 const isSelected = selectedAddressId === address.id
-                const isDefault = !!(address.is_default_shipping || address.is_default_billing)
                 const label = formatAddressName(address) || "Saved address"
-                    const line = formatAddressLine({
-                      address1: address.address_1,
-                      address2: address.address_2,
-                      city: address.city,
-                      province: address.province,
-                      postalCode: address.postal_code,
-                      countryCode: address.country_code,
-                    })
+                const parts = formatAddressParts({
+                  address1: address.address_1,
+                  address2: address.address_2,
+                  city: address.city,
+                  province: address.province,
+                  postalCode: address.postal_code,
+                  countryCode: address.country_code,
+                })
 
                 return (
                   <li key={address.id}>
-                    <button
-                      type="button"
-                      onClick={() => handlePickSavedAddress(address)}
-                      disabled={isSelectingAddress}
-                      aria-pressed={isSelected}
-                      className={[
-                        "jewelry-checkout-modal__option",
-                        isSelected ? "jewelry-checkout-modal__option--selected" : "",
-                      ].join(" ")}
-                    >
-                      <span
-                        className={[
-                          "jewelry-checkout-address-card__radio",
-                          isSelected ? "" : "jewelry-checkout-address-card__radio--empty",
-                        ].join(" ")}
-                        aria-hidden
-                      >
-                        <span />
-                      </span>
-                      <span className="jewelry-checkout-modal__option-body">
-                        <span className="jewelry-checkout-modal__option-name">
-                          {label}
-                          <span className="jewelry-checkout-address-card__tag">Home</span>
-                          {isDefault ? (
-                            <span className="jewelry-checkout-address-card__tag jewelry-checkout-address-card__tag--default">
-                              Default
-                            </span>
-                          ) : null}
-                        </span>
-                        <span className="jewelry-checkout-modal__option-line">{line}</span>
-                      </span>
-                    </button>
+                    <CheckoutAddressCard
+                      name={label}
+                      street={parts.street}
+                      cityLine={parts.cityLine}
+                      phone={address.phone}
+                      addressType={addressTypeFromMetadata(address.metadata)}
+                      selected={isSelected}
+                      onSelect={
+                        isSelectingAddress ? undefined : () => handlePickSavedAddress(address)
+                      }
+                    />
                   </li>
                 )
               })}
@@ -1050,6 +1133,7 @@ export default function AddressFields({
               full
             />
 
+            <AddressTypePicker value={addressType} onChange={setAddressType} />
             <label className="jewelry-checkout-modal__check">
               <input
                 type="checkbox"
@@ -1124,6 +1208,34 @@ function CheckoutAddressModal({
   )
 }
 
+function AddressTypePicker({
+  value,
+  onChange,
+}: {
+  value: "HOME" | "OFFICE"
+  onChange: (value: "HOME" | "OFFICE") => void
+}) {
+  return (
+    <fieldset className="jewelry-checkout-modal__type">
+      <legend className="jewelry-checkout-modal__label">Address type</legend>
+      <div className="jewelry-checkout-modal__type-options">
+        {(["HOME", "OFFICE"] as const).map((type) => (
+          <label key={type} className="jewelry-checkout-modal__type-option">
+            <input
+              type="radio"
+              name="checkout_address_type"
+              value={type}
+              checked={value === type}
+              onChange={() => onChange(type)}
+            />
+            <span>{type === "HOME" ? "Home" : "Office"}</span>
+          </label>
+        ))}
+      </div>
+    </fieldset>
+  )
+}
+
 function ModalField({
   label,
   id,

package/src/jewelry-checkout-form.css

@@ -168,12 +168,14 @@
 
 .jewelry-checkout-address__btn--outline {
   background: #ffffff;
-  border: 1px solid #3b1f4e;
-  color: #3b1f4e;
+  border: 1px solid #1a1224;
+  color: #1a1224;
 }
 
 .jewelry-checkout-address__btn--outline:hover:not(:disabled) {
   background: #f7f3fa;
+  border-color: #3b1f4e;
+  color: #3b1f4e;
 }
 
 .jewelry-checkout-address__btn--block {
@@ -208,10 +210,26 @@
   display: flex;
   align-items: flex-start;
   gap: 0.85rem;
-  padding: 1.1rem 2.75rem 1.1rem 1.1rem;
-  border: 1px solid #3b1f4e;
-  border-radius: 0.5rem;
+  padding: 1.15rem 2.85rem 1.15rem 1.1rem;
+  border: 1px solid #e4dcd3;
+  border-radius: 0.55rem;
   background: #ffffff;
+  overflow: hidden;
+}
+
+.jewelry-checkout-address-card__body--selected {
+  background: #faf6f1;
+  border-color: #e4dcd3;
+  box-shadow: inset 4px 0 0 #3b1f4e;
+}
+
+.jewelry-checkout-address-card__body--pickable {
+  width: 100%;
+  cursor: pointer;
+}
+
+.jewelry-checkout-address-card__body--pickable:hover {
+  border-color: #3b1f4e;
 }
 
 .jewelry-checkout-address-card__radio {
@@ -220,23 +238,24 @@
   justify-content: center;
   width: 1.125rem;
   height: 1.125rem;
-  margin-top: 0.15rem;
+  margin-top: 0.2rem;
   flex-shrink: 0;
   border: 1.5px solid #3b1f4e;
   border-radius: 999px;
-  background: #ffffff;
+  background: #3b1f4e;
   box-sizing: border-box;
 }
 
 .jewelry-checkout-address-card__radio span {
-  width: 0.55rem;
-  height: 0.55rem;
+  width: 0.35rem;
+  height: 0.35rem;
   border-radius: 999px;
-  background: #3b1f4e;
+  background: #faf6f1;
 }
 
 .jewelry-checkout-address-card__radio--empty {
-  border-color: #c9c1d1;
+  background: #ffffff;
+  border-color: #c4b9c9;
 }
 
 .jewelry-checkout-address-card__radio--empty span {
@@ -246,6 +265,9 @@
 .jewelry-checkout-address-card__content {
   min-width: 0;
   flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
 }
 
 .jewelry-checkout-address-card__name-row {
@@ -257,18 +279,20 @@
 
 .jewelry-checkout-address-card__name {
   margin: 0;
+  display: inline;
   font-family: var(--font-sans, inherit);
   font-size: 0.9375rem;
   font-weight: 700;
-  color: #1a1224;
+  color: #3b1f4e;
 }
 
 .jewelry-checkout-address-card__tag {
   display: inline-flex;
-  padding: 0.12rem 0.4rem;
-  border-radius: 0.2rem;
-  background: #f4eff8;
-  color: #3b1f4e;
+  padding: 0.1rem 0.45rem;
+  border-radius: 0.22rem;
+  border: 1px solid #cfc9d4;
+  background: transparent;
+  color: #6b6573;
   font-size: 0.5625rem;
   font-weight: 700;
   letter-spacing: 0.08em;
@@ -277,26 +301,49 @@
 
 .jewelry-checkout-address-card__tag--default {
   background: #3b1f4e;
+  border-color: #3b1f4e;
   color: #ffffff;
 }
 
 .jewelry-checkout-address-card__line {
-  margin: 0.4rem 0 0;
+  display: block;
+  margin: 0.35rem 0 0;
   font-size: 0.8125rem;
-  line-height: 1.55;
-  color: #5a5463;
+  line-height: 1.5;
+  color: #4a4453;
+}
+
+.jewelry-checkout-address-card__line--city {
+  margin-top: 0.08rem;
+}
+
+.jewelry-checkout-address-card__mobile {
+  display: block;
+  margin: 0.45rem 0 0;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: #1a1224;
+}
+
+.jewelry-checkout-address-card__mobile span {
+  margin-right: 0.4rem;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: #8a8490;
 }
 
 .jewelry-checkout-address-card__pod {
   display: inline-flex;
   margin-top: 0.7rem;
-  padding: 0.2rem 0.5rem;
-  border-radius: 0.2rem;
-  background: #eef8f0;
-  color: #1f7a3a;
-  font-size: 0.625rem;
-  font-weight: 700;
-  letter-spacing: 0.04em;
+  padding: 0.22rem 0.65rem;
+  border-radius: 999px;
+  background: #e8f6ec;
+  color: #1b7a3a;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  letter-spacing: 0.01em;
 }
 
 .jewelry-checkout-address-card__edit {
@@ -306,17 +353,20 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 1.75rem;
-  height: 1.75rem;
-  border: 1px solid #eadff3;
-  border-radius: 0.3rem;
-  background: #f7f3fa;
-  color: #3b1f4e;
+  width: 2rem;
+  height: 2rem;
+  border: 1px solid #e4dcd3;
+  border-radius: 0.4rem;
+  background: #ffffff;
+  color: #5a5463;
   cursor: pointer;
+  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
 }
 
 .jewelry-checkout-address-card__edit:hover {
-  background: #efe7f6;
+  background: #f7f3fa;
+  border-color: #3b1f4e;
+  color: #3b1f4e;
 }
 
 .jewelry-checkout-address-empty {
@@ -429,23 +479,17 @@
 }
 
 .jewelry-checkout-modal__option {
-  display: flex;
-  align-items: flex-start;
-  gap: 0.85rem;
+  display: block;
   width: 100%;
-  padding: 1rem 1.1rem;
+  padding: 0;
   text-align: left;
-  border: 1px solid #e6e0ea;
-  border-radius: 0.75rem;
-  background: #ffffff;
+  border: 0;
+  background: transparent;
   cursor: pointer;
-  transition: border-color 0.2s ease, background 0.2s ease;
 }
 
-.jewelry-checkout-modal__option:hover:not(:disabled),
-.jewelry-checkout-modal__option--selected {
+.jewelry-checkout-modal__option:hover:not(:disabled) .jewelry-checkout-address-card__body {
   border-color: #3b1f4e;
-  background: #faf8fc;
 }
 
 .jewelry-checkout-modal__option:disabled {
@@ -512,7 +556,8 @@
 .jewelry-checkout-modal__field--full,
 .jewelry-checkout-modal__check,
 .jewelry-checkout-modal__error,
-.jewelry-checkout-modal__actions {
+.jewelry-checkout-modal__actions,
+.jewelry-checkout-modal__type {
   grid-column: 1 / -1;
 }
 
@@ -556,6 +601,55 @@
   accent-color: #3b1f4e;
 }
 
+.jewelry-checkout-modal__type {
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+.jewelry-checkout-modal__type-options {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.jewelry-checkout-modal__type-option {
+  position: relative;
+  cursor: pointer;
+}
+
+.jewelry-checkout-modal__type-option input {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.jewelry-checkout-modal__type-option span {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 2.4rem;
+  padding: 0 1.15rem;
+  border-radius: 999px;
+  border: 1px solid #e6e0ea;
+  background: #ffffff;
+  color: #1a1224;
+  font-size: 0.75rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.jewelry-checkout-modal__type-option input:focus-visible + span {
+  box-shadow: 0 0 0 3px rgba(59, 31, 78, 0.16);
+}
+
+.jewelry-checkout-modal__type-option input:checked + span {
+  background: #3b1f4e;
+  border-color: #3b1f4e;
+  color: #ffffff;
+}
+
 .jewelry-checkout-modal__grid {
   display: contents;
 }
@@ -630,3 +724,140 @@
     flex: 1;
   }
 }
+
+.jewelry-leave-checkout {
+  position: fixed;
+  inset: 0;
+  z-index: 100000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1.25rem;
+}
+
+.jewelry-leave-checkout__backdrop {
+  position: absolute;
+  inset: 0;
+  border: 0;
+  background: rgba(18, 12, 28, 0.46);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  cursor: pointer;
+}
+
+.jewelry-leave-checkout__dialog {
+  position: relative;
+  width: min(26.5rem, 100%);
+  overflow: hidden;
+  border-radius: 1.35rem;
+  background: #ffffff;
+  box-shadow: 0 28px 64px rgba(26, 18, 36, 0.24);
+  animation: jewelry-leave-checkout-in 0.22s ease;
+}
+
+@keyframes jewelry-leave-checkout-in {
+  from {
+    opacity: 0;
+    transform: translateY(10px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+.jewelry-leave-checkout__hero {
+  padding: 2.1rem 1.75rem 1.25rem;
+  text-align: center;
+  background: #f6f1ea;
+}
+
+.jewelry-leave-checkout__icon {
+  display: grid;
+  place-items: center;
+  width: 3.35rem;
+  height: 3.35rem;
+  margin: 0 auto 1rem;
+  border-radius: 999px;
+  background: #ffffff;
+  border: 1px solid rgba(59, 31, 78, 0.14);
+  color: #3b1f4e;
+  box-shadow: 0 6px 16px rgba(59, 31, 78, 0.08);
+}
+
+.jewelry-leave-checkout__title {
+  margin: 0;
+  font-family: var(--font-heading, Georgia, serif);
+  font-size: 1.4rem;
+  font-weight: 500;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: #3b1f4e;
+}
+
+.jewelry-leave-checkout__body {
+  padding: 1.35rem 1.75rem 1.75rem;
+  text-align: center;
+  background: #ffffff;
+}
+
+.jewelry-leave-checkout__copy {
+  margin: 0 0 1.5rem;
+  font-size: 0.9375rem;
+  line-height: 1.65;
+  color: #6b6573;
+}
+
+.jewelry-leave-checkout__actions {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.75rem;
+}
+
+.jewelry-leave-checkout__btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 2.85rem;
+  padding: 0.7rem 0.85rem;
+  border-radius: 0.7rem;
+  font-family: var(--font-sans, inherit);
+  font-size: 0.6875rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  cursor: pointer;
+  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
+}
+
+.jewelry-leave-checkout__btn--stay {
+  background: #ffffff;
+  border: 1px solid #3b1f4e;
+  color: #3b1f4e;
+}
+
+.jewelry-leave-checkout__btn--stay:hover {
+  background: #f7f3fa;
+}
+
+.jewelry-leave-checkout__btn--leave {
+  background: #3b1f4e;
+  border: 1px solid #3b1f4e;
+  color: #ffffff;
+}
+
+.jewelry-leave-checkout__btn--leave:hover {
+  background: #55306c;
+  border-color: #55306c;
+}
+
+.jewelry-leave-checkout__btn:focus-visible {
+  outline: 2px solid #3b1f4e;
+  outline-offset: 2px;
+}
+
+@media (max-width: 480px) {
+  .jewelry-leave-checkout__actions {
+    grid-template-columns: 1fr;
+  }
+}

package/src/leave-checkout-guard.tsx

@@ -0,0 +1,198 @@
+"use client"
+
+import { useCallback, useEffect, useRef, useState } from "react"
+import { createPortal } from "react-dom"
+import { useParams, useRouter } from "next/navigation"
+
+const DEFAULT_REGION = "in"
+
+function isCheckoutPath(pathname: string): boolean {
+  return /\/checkout(\/|$)/.test(pathname)
+}
+
+function resolveHref(href: string): URL | null {
+  try {
+    return new URL(href, window.location.origin)
+  } catch {
+    return null
+  }
+}
+
+export default function LeaveCheckoutGuard() {
+  const router = useRouter()
+  const params = useParams()
+  const countryCode = String(params?.countryCode || DEFAULT_REGION).toLowerCase()
+  const [open, setOpen] = useState(false)
+  const [mounted, setMounted] = useState(false)
+  const pendingHrefRef = useRef<string | null>(null)
+  const allowLeaveRef = useRef(false)
+  const openRef = useRef(false)
+  const stayButtonRef = useRef<HTMLButtonElement>(null)
+  openRef.current = open
+
+  const askToLeave = useCallback((href?: string | null) => {
+    pendingHrefRef.current = href ?? null
+    setOpen(true)
+  }, [])
+
+  const stay = useCallback(() => {
+    pendingHrefRef.current = null
+    setOpen(false)
+  }, [])
+
+  const leave = useCallback(() => {
+    allowLeaveRef.current = true
+    const href = pendingHrefRef.current
+    pendingHrefRef.current = null
+    setOpen(false)
+    router.push(href || `/${countryCode}/cart`)
+  }, [countryCode, router])
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  useEffect(() => {
+    if (!window.history.state?.jewelryCheckoutGuard) {
+      window.history.pushState({ jewelryCheckoutGuard: true }, "", window.location.href)
+    }
+
+    const onPopState = () => {
+      if (allowLeaveRef.current) return
+      window.history.pushState({ jewelryCheckoutGuard: true }, "", window.location.href)
+      askToLeave(null)
+    }
+
+    const onClick = (event: MouseEvent) => {
+      if (allowLeaveRef.current || openRef.current) return
+      if (event.defaultPrevented || event.button !== 0) return
+      if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return
+
+      const target = event.target as HTMLElement | null
+      if (!target) return
+
+      const anchor = target.closest("a[href]") as HTMLAnchorElement | null
+      if (!anchor) return
+      if (anchor.target === "_blank" || anchor.hasAttribute("download")) return
+
+      const href = anchor.getAttribute("href")
+      if (!href || href.startsWith("#") || href.startsWith("javascript:")) return
+
+      const url = resolveHref(href)
+      if (!url || url.origin !== window.location.origin) return
+      if (isCheckoutPath(url.pathname)) return
+
+      event.preventDefault()
+      event.stopPropagation()
+      askToLeave(`${url.pathname}${url.search}${url.hash}`)
+    }
+
+    const onSubmit = (event: SubmitEvent) => {
+      if (allowLeaveRef.current || openRef.current) return
+      const form = event.target as HTMLFormElement | null
+      if (!form) return
+      if (form.id === "checkout-address-form") return
+      if (form.getAttribute("role") !== "search" && !form.classList.contains("jewelry-nav__search")) {
+        return
+      }
+
+      event.preventDefault()
+      event.stopPropagation()
+      event.stopImmediatePropagation()
+
+      const input = form.querySelector("input[type='search'], input[name='q']") as HTMLInputElement | null
+      const query = input?.value.trim() || ""
+      const base = `/${countryCode}/store`
+      askToLeave(query ? `${base}?q=${encodeURIComponent(query)}` : base)
+    }
+
+    window.addEventListener("popstate", onPopState)
+    document.addEventListener("click", onClick, true)
+    document.addEventListener("submit", onSubmit, true)
+
+    return () => {
+      window.removeEventListener("popstate", onPopState)
+      document.removeEventListener("click", onClick, true)
+      document.removeEventListener("submit", onSubmit, true)
+    }
+  }, [askToLeave, countryCode])
+
+  useEffect(() => {
+    if (!open) return
+    const previous = document.body.style.overflow
+    document.body.style.overflow = "hidden"
+    stayButtonRef.current?.focus()
+
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key === "Escape") stay()
+    }
+
+    window.addEventListener("keydown", onKey)
+    return () => {
+      document.body.style.overflow = previous
+      window.removeEventListener("keydown", onKey)
+    }
+  }, [open, stay])
+
+  if (!mounted || !open) return null
+
+  return createPortal(
+    <div className="jewelry-leave-checkout" role="presentation">
+      <button
+        type="button"
+        className="jewelry-leave-checkout__backdrop"
+        aria-label="Stay in checkout"
+        onClick={stay}
+      />
+      <div
+        className="jewelry-leave-checkout__dialog"
+        role="alertdialog"
+        aria-modal="true"
+        aria-labelledby="jewelry-leave-checkout-title"
+        aria-describedby="jewelry-leave-checkout-copy"
+      >
+        <div className="jewelry-leave-checkout__hero">
+          <span className="jewelry-leave-checkout__icon" aria-hidden>
+            <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
+              <path
+                d="M12 3.6L21.4 20.2H2.6L12 3.6Z"
+                stroke="currentColor"
+                strokeWidth="1.7"
+                strokeLinejoin="round"
+              />
+              <path d="M12 9.4v5.1" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" />
+              <circle cx="12" cy="16.9" r="0.85" fill="currentColor" />
+            </svg>
+          </span>
+          <h2 id="jewelry-leave-checkout-title" className="jewelry-leave-checkout__title">
+            Leave checkout?
+          </h2>
+        </div>
+        <div className="jewelry-leave-checkout__body">
+          <p id="jewelry-leave-checkout-copy" className="jewelry-leave-checkout__copy">
+            Your order details and progress will be lost if you leave now. Are you sure you want to
+            go back?
+          </p>
+          <div className="jewelry-leave-checkout__actions">
+            <button
+              ref={stayButtonRef}
+              type="button"
+              className="jewelry-leave-checkout__btn jewelry-leave-checkout__btn--stay"
+              onClick={stay}
+            >
+              Stay in checkout
+            </button>
+            <button
+              type="button"
+              className="jewelry-leave-checkout__btn jewelry-leave-checkout__btn--leave"
+              onClick={leave}
+            >
+              Yes, leave
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>,
+    document.body
+  )
+}

package/src/segment.tsx

@@ -2,6 +2,7 @@
 
 import type { HttpTypes } from "@medusajs/types"
 import AddressFields from "./address-fields"
+import LeaveCheckoutGuard from "./leave-checkout-guard"
 import "./jewelry-checkout-form.css"
 
 export default function JewelryCheckoutForm({
@@ -18,17 +19,23 @@ export default function JewelryCheckoutForm({
 }) {
   if (!cart?.items?.length) {
     return (
-      <div className="card-surface rounded-lg p-6">
-        <p className="text-muted text-sm">Your cart is empty.</p>
-      </div>
+      <>
+        <LeaveCheckoutGuard />
+        <div className="card-surface rounded-lg p-6">
+          <p className="text-muted text-sm">Your cart is empty.</p>
+        </div>
+      </>
     )
   }
 
   return (
-    <div className="jewelry-checkout-form checkout-page__address-panel">
-      <form id="checkout-address-form" autoComplete="off">
-        <AddressFields cart={cart} customer={customer} formTitle={formTitle} />
-      </form>
-    </div>
+    <>
+      <LeaveCheckoutGuard />
+      <div className="jewelry-checkout-form checkout-page__address-panel">
+        <form id="checkout-address-form" autoComplete="off">
+          <AddressFields cart={cart} customer={customer} formTitle={formTitle} />
+        </form>
+      </div>
+    </>
   )
 }