@pradip1995/create-storefront 1.0.1

package/templates/storefront/src/modules/checkout/components/addresses/index.tsx

@@ -0,0 +1,605 @@
+"use client"
+
+import { setAddresses, addCustomerAddressToCart } from "@core/data/cart"
+import compareAddresses from "@core/util/compare-addresses"
+import { CheckCircleSolid } from "@medusajs/icons"
+import { HttpTypes } from "@medusajs/types"
+import { Heading, Text, useToggleState, clx } from "@medusajs/ui"
+import Divider from "@modules/common/components/divider"
+import Spinner from "@modules/common/icons/spinner"
+import { usePathname, useRouter, useSearchParams } from "next/navigation"
+import { useActionState, useState, startTransition, useEffect } from "react"
+import BillingAddress from "../billing_address"
+import ErrorMessage from "../error-message"
+import ShippingAddress from "../shipping-address"
+import { SubmitButton } from "../submit-button"
+import AddressCard from "../address-card"
+import AddAddressModal from "../add-address-modal"
+import SelectAddressModal from "../select-address-modal"
+
+const isAddressComplete = (addr: any) => {
+  return !!(addr && addr.address_1 && addr.first_name);
+}
+
+const Addresses = ({
+  cart,
+  customer,
+}: {
+  cart: HttpTypes.StoreCart | null
+  customer: HttpTypes.StoreCustomer | null
+}) => {
+  const searchParams = useSearchParams()
+  const router = useRouter()
+  const pathname = usePathname()
+
+  const isOnCheckout = pathname.includes("/checkout")
+  const step = searchParams.get("step")
+  const addressesInRegion = (() => {
+    const filtered = customer?.addresses.filter(
+      (a) => a.country_code && cart?.region?.countries?.some(c => c.iso_2 === a.country_code)
+    ) || []
+    // Deduplicate: if two addresses have same address_1 + postal_code + city, keep the newer one
+    const seen = new Map<string, typeof filtered[0]>()
+    for (const addr of filtered) {
+      const key = `${(addr.address_1 || "").trim().toLowerCase()}|${(addr.postal_code || "").trim()}|${(addr.city || "").trim().toLowerCase()}`
+      const existing = seen.get(key)
+      if (!existing) {
+        seen.set(key, addr)
+      } else {
+        // Keep the more recently updated one, or the default one
+        const existingIsDefault = existing.is_default_shipping || existing.metadata?.is_default === "true" || existing.metadata?.is_default === true
+        const addrIsDefault = addr.is_default_shipping || addr.metadata?.is_default === "true" || addr.metadata?.is_default === true
+        if (addrIsDefault && !existingIsDefault) {
+          seen.set(key, addr)
+        } else if (!addrIsDefault && !existingIsDefault) {
+          const existingTime = new Date(existing.updated_at || 0).getTime()
+          const addrTime = new Date(addr.updated_at || 0).getTime()
+          if (addrTime > existingTime) seen.set(key, addr)
+        }
+      }
+    }
+    return Array.from(seen.values())
+  })()
+
+  const defaultAddress = [...addressesInRegion].sort((a, b) => {
+    if (a.is_default_shipping && !b.is_default_shipping) return -1
+    if (!a.is_default_shipping && b.is_default_shipping) return 1
+    const aDef = a.metadata?.is_default === "true" || a.metadata?.is_default === true
+    const bDef = b.metadata?.is_default === "true" || b.metadata?.is_default === true
+    if (aDef && !bDef) return -1
+    if (!aDef && bDef) return 1
+    return new Date(b.updated_at || 0).getTime() - new Date(a.updated_at || 0).getTime()
+  })[0]
+
+  // Determine the initial checkout step based on whether the user has a saved address.
+  //  • If no address exists → start on the address step.
+  //  • If an address exists → start on the payment step.
+  //  • Manual overrides (URL step query) are respected.
+  const hasSavedAddress = !!defaultAddress && isAddressComplete(defaultAddress);
+  const initialStep = hasSavedAddress ? "payment" : "address";
+  const isOpen = (
+    step === "address" ||
+    step === "payment" ||
+    (!step && initialStep === "address")
+  );
+
+  // Scroll to top and ensure URL reflects the derived initial step when no step param is present
+  useEffect(() => {
+    window.scrollTo({ top: 0, behavior: 'instant' as ScrollBehavior });
+    if (!step) {
+      router.push(`${pathname}?step=${initialStep}`, { scroll: false });
+    }
+  }, [step, initialStep, pathname, router]);
+
+  const { state: sameAsBilling, toggle: toggleSameAsBilling } = useToggleState(
+    cart?.shipping_address && cart?.billing_address
+      ? compareAddresses(cart?.shipping_address, cart?.billing_address)
+      : true
+  )
+
+  /* Edit Mode State */
+  const [isEditing, setIsEditing] = useState(false)
+
+  const handleEdit = () => {
+    setIsEditing(true)
+    router.push(pathname + "?step=address")
+  }
+
+  const [message, formAction, isPending] = useActionState(setAddresses, null)
+
+  // Listen for trigger from summary button
+  useEffect(() => {
+    const handleTrigger = () => {
+      const form = document.querySelector('form[autoComplete="off"]') as HTMLFormElement
+      const phoneInput = document.getElementById("shipping_phone_field") as HTMLInputElement
+
+      if (phoneInput) {
+        const phoneValue = phoneInput.value.replace(/\D/g, "")
+        // For India (+91), expect at least 12 digits (2 for 91, 10 for local)
+        if (phoneValue.length < 12) {
+          return
+        }
+      }
+
+      if (form && !form.checkValidity()) {
+        return
+      }
+
+      const submitBtn = document.querySelector('[data-testid="submit-address-button"]') as HTMLButtonElement
+      if (submitBtn) {
+        submitBtn.click()
+      }
+    }
+
+
+    if (isOpen) {
+      window.addEventListener('trigger-checkout-step', handleTrigger)
+      window.addEventListener('submit-address-for-payment', handleTrigger)
+      return () => {
+        window.removeEventListener('trigger-checkout-step', handleTrigger)
+        window.removeEventListener('submit-address-for-payment', handleTrigger)
+      }
+    }
+  }, [isOpen])
+
+
+
+  const [addAddressMessage, addAddressAction, isAddAddressPending] = useActionState(addCustomerAddressToCart, null)
+  const [showAddModal, setShowAddModal] = useState(false)
+  const [showSelectModal, setShowSelectModal] = useState(false)
+  const [editingAddress, setEditingAddress] = useState<HttpTypes.StoreCustomerAddress | null>(null)
+  const [showAddAddressForm, setShowAddAddressForm] = useState(false)
+  const [isManualRemoval, setIsManualRemoval] = useState(false)
+  const [hasManuallySelected, setHasManuallySelected] = useState(false)
+
+  // Load manual selection state from sessionStorage to survive redirects
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      const manual = sessionStorage.getItem("medusa_address_manual")
+      if (manual === "true") {
+        setHasManuallySelected(true)
+      }
+    }
+
+    // Hande real-time postal code updates for shipping calculation
+    const handlePostalUpdate = async (e: any) => {
+        const { postal_code, city, province } = e.detail;
+        
+        // Read current form values from DOM using explicit IDs to avoid data loss on refresh
+        const fullNameInput = document.getElementById("shipping_full_name_field") as HTMLInputElement
+        const address1Input = document.getElementById("shipping_address_1_field") as HTMLInputElement
+        const companyInput = document.getElementById("shipping_company_field") as HTMLInputElement
+        const phoneInput = document.getElementById("shipping_phone_field_internal") as HTMLInputElement
+        const emailInput = document.getElementById("shipping_email_field") as HTMLInputElement
+        const cityInput = document.getElementById("shipping_city_field") as HTMLInputElement
+        const provinceInput = document.getElementById("shipping_province_field") as HTMLInputElement
+        
+        const full_name = fullNameInput?.value || (cart?.shipping_address?.first_name ? `${cart.shipping_address.first_name} ${cart.shipping_address.last_name === "." ? "" : cart.shipping_address.last_name}`.trim() : "")
+        const [first_name, ...last_name_parts] = (full_name || "").split(" ")
+        const last_name = last_name_parts.join(" ") || "."
+
+        const address_1 = address1Input?.value || cart?.shipping_address?.address_1 || ""
+        const city_val = city || cityInput?.value || cart?.shipping_address?.city || ""
+        const province_val = province || provinceInput?.value || cart?.shipping_address?.province || ""
+        const phone = phoneInput?.value || cart?.shipping_address?.phone || ""
+        const email = emailInput?.value || cart?.email || ""
+        const company = companyInput?.value || cart?.shipping_address?.company || ""
+
+        // Check if data actually changed to prevent infinite loops
+        const currentShipping = cart?.shipping_address
+        const hasChanged = 
+            (postal_code?.trim() || "") !== ((currentShipping?.postal_code as string)?.trim() || "") ||
+            (email?.trim().toLowerCase() || "") !== ((cart?.email as string)?.trim().toLowerCase() || "") ||
+            (city_val?.trim().toLowerCase() || "") !== ((currentShipping?.city as string)?.trim().toLowerCase() || "") ||
+            (province_val?.trim().toLowerCase() || "") !== ((currentShipping?.province as string)?.trim().toLowerCase() || "") ||
+            (first_name?.trim().toLowerCase() || "") !== ((currentShipping?.first_name as string)?.trim().toLowerCase() || "") ||
+            (last_name?.trim().toLowerCase() || "") !== ((currentShipping?.last_name as string)?.trim().toLowerCase() || "") ||
+            (address_1?.trim() || "") !== ((currentShipping?.address_1 as string)?.trim() || "") ||
+            (company?.trim() || "") !== ((currentShipping?.company as string)?.trim() || "") ||
+            (phone?.replace(/\D/g, "") !== currentShipping?.phone?.replace(/\D/g, ""))
+
+        if (!hasChanged) return
+
+        // Add a global lock to prevent double-firing in rapid succession
+        if ((window as any).isUpdatingAddress) return;
+
+        try {
+            (window as any).isUpdatingAddress = true;
+            // We do a silent update to trigger shipping calculation
+            const { updateAddressSilently } = await import("@core/data/cart")
+            await updateAddressSilently({
+                email: email, 
+                shipping_address: {
+                    postal_code,
+                    city: city_val,
+                    province: province_val,
+                    country_code: cart?.shipping_address?.country_code || "in",
+                    first_name: first_name,
+                    last_name: last_name,
+                    address_1: address_1,
+                    company: company,
+                    phone: phone
+                }
+            })
+
+            // Notify Totals that address is updated on server
+            window.dispatchEvent(new CustomEvent('address-updated-silent'))
+            
+            // Trigger a router refresh to update the sidebar totals UI
+            router.refresh()
+        } finally {
+            // Short delay before unlocking
+            setTimeout(() => {
+                (window as any).isUpdatingAddress = false;
+            }, 500);
+        }
+    }
+
+    window.addEventListener('postal-code-updated', handlePostalUpdate)
+    return () => window.removeEventListener('postal-code-updated', handlePostalUpdate)
+  }, [cart, router])
+
+
+
+  const shouldAutoSelect = !!defaultAddress && !isEditing && !isManualRemoval && !hasManuallySelected
+
+  // Auto-select default address if needed
+  useEffect(() => {
+    if (isOpen && shouldAutoSelect && defaultAddress && !isPending) {
+      // If cart has no address, OR if the current address is different from default
+      // We trigger the update.
+      // Simple check: if we are supposed to auto-select, and we haven't just submitted
+      const isAddressMatching = cart?.shipping_address &&
+        cart.shipping_address.address_1 === defaultAddress.address_1 &&
+        cart.shipping_address.postal_code === defaultAddress.postal_code;
+
+      if (!isAddressMatching) {
+        const formData = new FormData()
+        formData.append("shipping_address.first_name", defaultAddress.first_name || "")
+        formData.append("shipping_address.last_name", defaultAddress.last_name || "")
+        formData.append("shipping_address.address_1", defaultAddress.address_1 || "")
+        formData.append("shipping_address.address_2", defaultAddress.address_2 || "")
+        formData.append("shipping_address.company", defaultAddress.company || "")
+        formData.append("shipping_address.postal_code", defaultAddress.postal_code || "")
+        formData.append("shipping_address.city", defaultAddress.city || "")
+        formData.append("shipping_address.country_code", defaultAddress.country_code || "")
+        formData.append("shipping_address.province", defaultAddress.province || "")
+        formData.append("shipping_address.phone", defaultAddress.phone || "")
+        formData.append("email", customer?.email || cart?.email || "")
+        formData.append("same_as_billing", "on")
+
+        startTransition(() => {
+          formAction(formData)
+        })
+      }
+    }
+  }, [isOpen, shouldAutoSelect, cart?.shipping_address, defaultAddress, isPending, formAction, customer?.email, cart?.email])
+
+  // Find the selected address from cart
+  const selectedAddressFromCart = cart?.shipping_address && customer?.addresses.find(a =>
+    a.address_1 === cart.shipping_address?.address_1 &&
+    a.first_name === cart.shipping_address?.first_name &&
+    a.last_name === cart.shipping_address?.last_name
+  )
+
+  const [selectedAddressId, setSelectedAddressId] = useState<string | null>(
+    selectedAddressFromCart?.id || (shouldAutoSelect ? defaultAddress?.id : null) || null
+  )
+
+  const handleAddressSelect = (addressId: string) => {
+    setSelectedAddressId(addressId)
+  }
+
+  const handleContinue = () => {
+    const currentAddressId = selectedAddressId || selectedAddressFromCart?.id
+    const address = customer?.addresses.find(a => a.id === currentAddressId)
+    if (address && cart) {
+      const formData = new FormData()
+      formData.append("shipping_address.first_name", address.first_name || "")
+      formData.append("shipping_address.last_name", address.last_name || "")
+      formData.append("shipping_address.address_1", address.address_1 || "")
+      formData.append("shipping_address.address_2", address.address_2 || "")
+      formData.append("shipping_address.company", address.company || "")
+      formData.append("shipping_address.postal_code", address.postal_code || "")
+      formData.append("shipping_address.city", address.city || "")
+      formData.append("shipping_address.country_code", address.country_code || "")
+      formData.append("shipping_address.province", address.province || "")
+      formData.append("shipping_address.phone", address.phone || "")
+      formData.append("email", customer?.email || cart?.email || "")
+      formData.append("same_as_billing", sameAsBilling ? "on" : "")
+
+      startTransition(() => {
+        formAction(formData)
+      })
+    } else {
+      router.push(pathname + "?step=address")
+    }
+  }
+
+
+
+  // Convert cart address to customer address format for display
+  const cartAddressAsCustomerAddress = cart?.shipping_address ? {
+    id: selectedAddressFromCart?.id || 'cart-address',
+    first_name: cart.shipping_address.first_name || '',
+    last_name: cart.shipping_address.last_name === "." ? "" : (cart.shipping_address.last_name || ""),
+    address_1: cart.shipping_address.address_1 || '',
+    address_2: cart.shipping_address.address_2 || '',
+    city: cart.shipping_address.city || '',
+    province: cart.shipping_address.province || '',
+    postal_code: cart.shipping_address.postal_code || '',
+    country_code: cart.shipping_address.country_code || '',
+    phone: cart.shipping_address.phone || '',
+    metadata: (selectedAddressFromCart as any)?.metadata || { address_type: 'HOME' }
+  } : null
+
+  // Determine which address to display in the summary view to avoid flickering
+  // Priority: 
+  // 1. Current address in cart (if complete)
+  // 2. Default address (if we are in auto-select mode)
+  // 3. Last fallback
+  const addressToDisplay = (cart?.shipping_address && isAddressComplete(cart.shipping_address))
+    ? cartAddressAsCustomerAddress
+    : (shouldAutoSelect ? defaultAddress : (defaultAddress || cartAddressAsCustomerAddress))
+
+  return (
+    <div className="bg-page-bg">
+      {cart && (
+        <AddAddressModal
+          isOpen={showAddModal}
+          onClose={() => {
+            setShowAddModal(false)
+            setEditingAddress(null)
+          }}
+          onSave={(formData) => {
+            if (typeof window !== "undefined") {
+              sessionStorage.setItem("medusa_address_manual", "true")
+            }
+            setHasManuallySelected(true)
+            startTransition(() => {
+              addAddressAction(formData)
+              setIsManualRemoval(false)
+            })
+          }}
+          cart={cart}
+          editingAddress={editingAddress}
+        />
+      )}
+
+      {customer && (
+        <SelectAddressModal
+          isOpen={showSelectModal}
+          onClose={() => setShowSelectModal(false)}
+          addresses={addressesInRegion}
+          selectedAddressId={selectedAddressId}
+          onSelect={(id) => {
+            handleAddressSelect(id)
+            setIsManualRemoval(false)
+            if (typeof window !== "undefined") {
+              sessionStorage.setItem("medusa_address_manual", "true")
+            }
+            setHasManuallySelected(true)
+            // Trigger address update and continue
+            const address = addressesInRegion.find(a => a.id === id)
+            if (address && cart) {
+              const formData = new FormData()
+              formData.append("shipping_address.first_name", address.first_name || "")
+              formData.append("shipping_address.last_name", address.last_name || "")
+              formData.append("shipping_address.address_1", address.address_1 || "")
+              formData.append("shipping_address.address_2", address.address_2 || "")
+              formData.append("shipping_address.company", address.company || "")
+              formData.append("shipping_address.postal_code", address.postal_code || "")
+              formData.append("shipping_address.city", address.city || "")
+              formData.append("shipping_address.country_code", address.country_code || "")
+              formData.append("shipping_address.province", address.province || "")
+              formData.append("shipping_address.phone", address.phone || "")
+              formData.append("email", customer?.email || cart?.email || "")
+              formData.append("same_as_billing", sameAsBilling ? "on" : "")
+
+              startTransition(() => {
+                formAction(formData)
+              })
+            }
+          }}
+          onEdit={(address) => {
+            setEditingAddress(address)
+            setShowSelectModal(false)
+            setShowAddModal(true)
+          }}
+        />
+      )}
+
+      {isOpen ? (
+        <>
+          {/* Header */}
+          <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-y-4 mb-6">
+            <Heading
+              level="h2"
+              className="text-xl sm:text-2xl font-bold text-heading"
+            >
+              Enter Delivery Address
+            </Heading>
+            
+            <div className="flex flex-row gap-2 sm:gap-3">
+              {customer && addressesInRegion.length > 1 && (
+                <button
+                  onClick={() => setShowSelectModal(true)}
+                  className="px-3 min-[550px]:px-6 py-2 min-[550px]:py-2.5 rounded-full text-[13px] min-[550px]:text-base font-bold whitespace-nowrap shadow-brand-sm checkout-btn-primary"
+                >
+                  Select Address
+                </button>
+              )}
+              {customer && (
+                <button
+                  onClick={() => setShowAddModal(true)}
+                  className={clx(
+                    "px-3 min-[550px]:px-6 py-2 min-[550px]:py-2.5 rounded-full text-[13px] min-[550px]:text-base font-bold whitespace-nowrap shadow-brand-sm transition-all",
+                    addressesInRegion.length > 0
+                      ? "checkout-btn-primary"
+                      : "checkout-btn-outline"
+                  )}
+                >
+                  Add New Address
+                </button>
+              )}
+            </div>
+          </div>
+
+          {/* If we have addresses, show the selected one in a single card, otherwise show the form */}
+          {customer && addressesInRegion.length > 0 && !showAddModal && !showAddAddressForm ? (
+            <div className="space-y-4">
+              {/* Default Address Label */}
+              {(addressToDisplay?.id === defaultAddress?.id || (addressToDisplay as any)?.metadata?.is_default === true) && (
+                <div className="mb-3">
+                  <Text className="text-sm uppercase text-gray-400 font-medium">
+                    DEFAULT ADDRESS
+                  </Text>
+                </div>
+              )}
+
+              <AddressCard
+                address={addressToDisplay as any}
+                isSelected={true}
+                isDefault={addressToDisplay?.id === defaultAddress?.id}
+                onSelect={() => setShowSelectModal(true)}
+                onEdit={() => {
+                  setEditingAddress(addressToDisplay as any)
+                  setShowAddModal(true)
+                }}
+                onRemove={() => {
+                  setShowSelectModal(true)
+                }}
+              />
+              
+              {/* Hidden trigger for programmatic submission */}
+              <button
+                onClick={handleContinue}
+                className="hidden"
+                data-testid="submit-address-button"
+              />
+              
+              <ErrorMessage error={message} data-testid="address-error-message" />
+            </div>
+          ) : (
+            <form action={formAction} autoComplete="off" noValidate>
+              <div className="pb-8">
+                <ShippingAddress
+                  customer={customer}
+                  checked={sameAsBilling}
+                  onChange={toggleSameAsBilling}
+                  cart={cart}
+                  clearForm={showAddAddressForm}
+                />
+
+                {!sameAsBilling && (
+                  <div>
+                    <Heading
+                      level="h2"
+                      className="text-3xl-regular gap-x-4 pb-6 pt-8"
+                    >
+                      Billing address
+                    </Heading>
+
+                    <BillingAddress cart={cart} customer={customer} />
+                  </div>
+                )}
+                <button
+                  type="submit"
+                  className="mt-6 px-6 py-3 bg-gray-900 text-inverse rounded-lg font-medium hover:bg-gray-800 transition-colors hidden"
+                  data-testid="submit-address-button"
+                >
+                  Continue to delivery
+                </button>
+                <ErrorMessage error={message} data-testid="address-error-message" />
+              </div>
+            </form>
+          )}
+        </>
+      ) : (
+        <div>
+          {/* Header */}
+          <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-y-4 mb-6">
+            <Heading
+              level="h2"
+              className="text-xl sm:text-2xl font-bold text-heading"
+            >
+              Delivery Address
+            </Heading>
+            {!isManualRemoval && customer && (
+              <div className="flex flex-row gap-2 sm:gap-3">
+                {customer && addressesInRegion.length > 1 && (
+                  <button
+                    onClick={() => setShowSelectModal(true)}
+                    className="px-3 min-[550px]:px-6 py-2 min-[550px]:py-2.5 rounded-full text-[13px] min-[550px]:text-base font-bold whitespace-nowrap shadow-brand-sm checkout-btn-primary"
+                  >
+                    Select Address
+                  </button>
+                )}
+                <button
+                  onClick={() => setShowAddModal(true)}
+                  className="px-3 min-[550px]:px-6 py-2 min-[550px]:py-2.5 rounded-full text-[13px] min-[550px]:text-base font-bold whitespace-nowrap shadow-brand-sm checkout-btn-primary"
+                  data-testid="add-new-address-button"
+                >
+                  Add New Address
+                </button>
+              </div>
+            )}
+          </div>
+
+          {addressToDisplay && !isManualRemoval ? (
+            <div className="space-y-4">
+              {/* Default Address Label */}
+              {(addressToDisplay.id === defaultAddress?.id || (addressToDisplay as any)?.metadata?.is_default === true) && (
+                <div className="mb-3">
+                  <Text className="text-sm uppercase text-gray-400 font-medium">
+                    DEFAULT ADDRESS
+                  </Text>
+                </div>
+              )}
+
+              <AddressCard
+                address={addressToDisplay as any}
+                isSelected={true}
+                isDefault={addressToDisplay.id === defaultAddress?.id}
+                onSelect={() => handleEdit()}
+                onEdit={() => {
+                  setEditingAddress(addressToDisplay as any)
+                  setShowAddModal(true)
+                }}
+                onRemove={() => {
+                  setShowSelectModal(true)
+                }}
+              />
+            </div>
+          ) : (addressToDisplay || isManualRemoval) ? (
+            <div className="flex flex-col min-[550px]:flex-row gap-4 mt-4">
+              {customer && (
+                <button
+                  onClick={() => setShowAddModal(true)}
+                  className="flex-1 px-6 py-3 rounded-full font-bold checkout-btn-primary shadow-brand-sm"
+                >
+                  Add New Address
+                </button>
+              )}
+              {customer && addressesInRegion.length > 1 && (
+                <button
+                  onClick={() => setShowSelectModal(true)}
+                  className="flex-1 px-6 py-3 rounded-full font-bold checkout-btn-outline"
+                >
+                  Select Address
+                </button>
+              )}
+            </div>
+          ) : (
+            <div>
+              <Spinner />
+            </div>
+          )}
+        </div>
+      )}
+      <Divider className="mt-8" />
+    </div>
+  )
+}
+
+export default Addresses

package/templates/storefront/src/modules/checkout/components/back-link/index.tsx

@@ -0,0 +1,32 @@
+"use client"
+
+import LocalizedClientLink from "@modules/common/components/localized-client-link"
+import ChevronDown from "@modules/common/icons/chevron-down"
+import { usePathname } from "next/navigation"
+
+export default function BackLink() {
+  const pathname = usePathname()
+  const isOnPaymentPage = pathname.includes("/checkout/payment")
+  
+  // LocalizedClientLink will handle country code automatically
+  // So we just need to provide the path without country code
+  const backHref = isOnPaymentPage ? "/checkout" : "/cart"
+  const backText = isOnPaymentPage ? "Back to checkout" : "Back to shopping cart"
+  
+  return (
+    <LocalizedClientLink
+      href={backHref}
+      className="text-small-semi text-ui-fg-base flex items-center gap-x-2 uppercase flex-1 basis-0"
+      data-testid="back-to-cart-link"
+    >
+      <ChevronDown className="rotate-90" size={16} />
+      <span className="mt-px hidden small:block txt-compact-plus text-ui-fg-subtle hover:text-ui-fg-base ">
+        {backText}
+      </span>
+      <span className="mt-px block small:hidden txt-compact-plus text-ui-fg-subtle hover:text-ui-fg-base">
+        Back
+      </span>
+    </LocalizedClientLink>
+  )
+}
+