@osimart/create-storefront 0.0.0-stage → 1.0.0

package/app/pages/checkout.vue

@@ -0,0 +1,1972 @@
+<template>
+  <div class="bg-gray-50 font-body text-primaryColor">
+
+    <!-- ============ MOBILE ORDER STRIP ============ -->
+    <div class="border-b border-gray-200 bg-white lg:hidden">
+      <button
+        type="button"
+        class="flex w-full items-center gap-3 px-4 py-3 text-left"
+        @click="mobileSummaryOpen = !mobileSummaryOpen"
+      >
+        <template v-if="isLoading">
+          <skeletor width="100%" height="44px" />
+        </template>
+        <template v-else>
+          <div class="flex flex-shrink-0 gap-1.5">
+            <div
+              v-for="item in CartItems.slice(0, 2)"
+              :key="`strip-${item.id}`"
+              class="h-11 w-9 overflow-hidden rounded-md border border-gray-200 bg-white"
+            >
+              <img :src="imageUrl(item.image)" :alt="item.name" class="h-full w-full object-cover" />
+            </div>
+            <div
+              v-if="CartItems.length > 2"
+              class="flex h-11 w-9 items-center justify-center rounded-md border border-dashed border-gray-300 text-xs text-gray-500"
+            >
+              +{{ CartItems.length - 2 }}
+            </div>
+          </div>
+          <div class="min-w-0 flex-1">
+            <p class="text-[13px] text-gray-500">
+   Order Summary
+            </p>
+            <p class="text-base font-semibold">{{ currency }}{{ totalPrice }}</p>
+          </div>
+          <svg
+            xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
+            class="w-4 flex-shrink-0 text-gray-500 transition-transform duration-300"
+            :class="mobileSummaryOpen ? 'rotate-180' : ''"
+          >
+            <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+          </svg>
+        </template>
+      </button>
+
+      <transition
+        :css="false"
+        @enter="accordionEnter"
+        @after-enter="accordionAfterEnter"
+        @leave="accordionLeave"
+        @after-leave="accordionAfterEnter"
+      >
+        <div v-if="mobileSummaryOpen && !isLoading">
+          <div class="border-t border-gray-200 px-4 pb-5 pt-4">
+            <!-- line items with steppers -->
+   <div
+  v-for="item in CartItems"
+  :key="`rail-${item.id}`"
+  class="group flex items-center gap-3 py-2"
+>
+  <div class="h-14 w-12 flex-shrink-0 overflow-hidden rounded-md border border-gray-200 bg-white">
+    <img :src="imageUrl(item.image)" :alt="item.name" class="h-full w-full object-cover" />
+  </div>
+  <div class="min-w-0 flex-1">
+    <p class="truncate text-[13px]">{{ item.name }}</p>
+    <p v-if="Array.isArray(item.values) ? item.values.length : item.values" class="truncate text-xs text-gray-400">{{ Array.isArray(item.values) && item.values.length ? item.values.join(' | ') : item.values || '' }}</p>
+    <div class="mt-1.5 flex items-center gap-3">
+      <div class="flex h-7 w-fit items-center rounded-full border border-gray-300">
+        <button
+          type="button"
+          class="flex h-7 w-7 items-center justify-center text-gray-500 disabled:opacity-40"
+          :disabled="isItemUpdating(item)"
+          aria-label="Decrease quantity"
+          @click="decreaseQuantity(item)"
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-3.5">
+            <path stroke-linecap="round" d="M5 12h14" />
+          </svg>
+        </button>
+        <span class="min-w-[24px] text-center text-[13px]">
+          <span v-if="isItemUpdating(item)" class="inline-block h-3 w-3 animate-spin rounded-full border-2 border-gray-200 border-t-primaryColor"></span>
+          <template v-else>{{ item.quantity }}</template>
+        </span>
+        <button
+          type="button"
+          class="flex h-7 w-7 items-center justify-center text-gray-500 disabled:opacity-40"
+          :disabled="isItemUpdating(item)"
+          aria-label="Increase quantity"
+          @click="increaseQuantity(item)"
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-3.5">
+            <path stroke-linecap="round" d="M12 5v14M5 12h14" />
+          </svg>
+        </button>
+      </div>
+
+      <button
+        type="button"
+        class="flex items-center gap-1 text-[12px] justify-center text-gray-400 transition-opacity duration-200 hover:text-red-500 disabled:opacity-40 opacity-100 md:opacity-0 md:group-hover:opacity-100 md:focus-visible:opacity-100"
+        :disabled="isItemUpdating(item)"
+        aria-label="Remove item"
+        @click="deleteItem(item)"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.6" stroke="currentColor" class="w-3.5">
+          <path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.35 9m-4.78 0L9.26 9m9.97-3.21c.34.05.67.1 1.01.16m-1.01-.16-1.06 14.09a2.25 2.25 0 0 1-2.24 2.08H8.08a2.25 2.25 0 0 1-2.25-2.08L4.77 5.79m14.46 0a48.1 48.1 0 0 0-3.48-.4m-12 .56c.35-.06.68-.11 1.02-.16m0 0a48.1 48.1 0 0 1 3.48-.4m7.5 0v-.92c0-1.18-.91-2.16-2.09-2.2a51.96 51.96 0 0 0-3.32 0c-1.18.04-2.09 1.02-2.09 2.2v.92m7.5 0a48.67 48.67 0 0 0-7.5 0" />
+        </svg>
+                  <span class="mt-0.5">Remove</span>
+
+      </button>
+    </div>
+  </div>
+  <span class="whitespace-nowrap text-[13px]">{{ currency }}{{ item.total_price }}</span>
+</div>
+
+            <!-- promo -->
+            <div class="pt-3">
+              <div v-if="!discount" class="flex gap-2">
+                <input
+                  type="text"
+                  id="m-promocode"
+                  v-model="promoCode"
+                  placeholder="Promo code"
+                  class="h-10 min-w-0 flex-1 rounded-xl border border-gray-300 bg-white px-3 text-[16px] outline-none placeholder:text-gray-300"
+                />
+                <button
+                  type="button"
+                  class="h-10 flex-shrink-0 rounded-xl border border-gray-300 bg-white px-4 text-sm font-medium"
+                  :disabled="isCodeLoading"
+                  @click="applyPromoCode"
+                >
+                  <span v-if="isCodeLoading" class="inline-block h-4 w-4 animate-spin rounded-full border-2 border-gray-200 border-t-primaryColor"></span>
+                  <span v-else>Apply</span>
+                </button>
+              </div>
+              <div v-else class="flex items-center justify-between">
+                <p class="text-sm text-green-600">Promo applied: {{ promoCode }}</p>
+                <button type="button" class="rounded-lg border border-red-600 bg-red-600 px-2 py-1 text-xs text-white" @click="removePromo">
+                  Remove
+                </button>
+              </div>
+            </div>
+
+            <!-- totals -->
+            <dl class="mt-4 space-y-2 border-t border-gray-200 pt-3 text-[13px]">
+              <div class="flex justify-between text-gray-500"><dt>Subtotal</dt><dd>{{ currency }}{{ total_price }}</dd></div>
+              <div class="flex justify-between text-gray-500" v-if="selectedCountry || selectedAddress || selectedZone">
+                <dt>Shipping</dt>
+                <dd v-if="isShippingLoading" class="w-[80px]"><skeletor width="100%" height="18px" /></dd>
+                <dd v-else-if="isFreeDelivery" class="flex gap-2">
+                  <span class="text-gray-400 line-through">{{ currency }}{{ shippingCost }}</span>
+                  <span class="text-green-600">{{ currency }}0</span>
+                </dd>
+                <dd v-else>{{ currency }}{{ shippingCost }}</dd>
+              </div>
+              <div class="flex justify-between text-gray-500" v-else>
+                <dt>Shipping</dt><dd class="text-xs">Enter address to calculate</dd>
+              </div>
+              <div v-if="discount" class="flex justify-between text-green-600">
+                <dt>Discount</dt>
+                <dd>
+                  <template v-if="discountType === 'Percentage'">{{ Number(discount) }}%</template>
+                  <template v-else-if="discountType === 'Fixed Amount'">{{ currency }}{{ Number(discount) }}</template>
+                </dd>
+              </div>
+              <div v-for="line in extraFeeLines" :key="`m-fee-${line.name}`" class="flex justify-between text-gray-500">
+                <dt>{{ line.name }}</dt><dd>{{ currency }}{{ line.amount.toFixed(2) }}</dd>
+              </div>
+            </dl>
+          </div>
+        </div>
+      </transition>
+    </div>
+
+    <!-- ============ BODY ============ -->
+    <div
+      class="mx-auto w-full px-4 pb-5 pt-5 lg:grid lg:max-w-6xl lg:grid-cols-[minmax(0,1.5fr)_minmax(0,1fr)] lg:gap-10 lg:px-9 lg:pb-8 lg:pt-8"
+    >
+      <!-- ---------------- LEFT COLUMN ---------------- -->
+      <div class="lg:order-1">
+        <!-- skeleton -->
+        <template v-if="isLoading">
+          <div class="space-y-8">
+            <div class="space-y-3">
+              <skeletor width="40%" height="24px" />
+              <skeletor width="100%" height="150px" />
+            </div>
+            <div class="space-y-3">
+              <skeletor width="40%" height="24px" />
+              <skeletor width="100%" height="180px" />
+            </div>
+            <div class="space-y-3">
+              <skeletor width="40%" height="24px" />
+              <skeletor width="100%" height="110px" />
+            </div>
+          </div>
+        </template>
+
+        <template v-else>
+          <!-- ===== 1. DETAILS ===== -->
+          <section>
+            <div class="mb-3 flex items-center gap-2">
+              <span class="flex h-[22px] w-[22px] items-center justify-center rounded-full bg-primaryColor text-xs text-white">1</span>
+              <h2 class="text-[15px] font-semibold">Your details</h2>
+              <span class="h-px flex-1 bg-gray-200"></span>
+              <router-link
+                v-if="!isLoggedIn"
+                :to="{ path: '/login', query: { redirect: $route.fullPath } }"
+                class="text-xs text-green-500 underline"
+              >
+                Sign in
+              </router-link>
+            </div>
+
+            <div class="divide-y divide-gray-200 overflow-hidden rounded-xl border border-gray-300 bg-white">
+              <div data-field="email" class="floating-field" :class="emailHasError ? 'bg-red-50' : ''">
+                <input
+                  type="text"
+                  id="email"
+                  v-model="formData.email"
+                  placeholder=" "
+                  class="floating-input disabled:text-gray-500"
+                  :disabled="isLoggedIn && formData.email !== ''"
+                  @input="validateEmailField"
+                />
+                <label for="email" class="floating-label">Email</label>
+              </div>
+
+              <div class="flex divide-x divide-gray-200">
+                <div data-field="first_name" class="floating-field flex-1" :class="formErrors.first_name ? 'bg-red-50' : ''">
+                  <input
+                    type="text"
+                    id="firstName"
+                    v-model="formData.first_name"
+                    placeholder=" "
+                    class="floating-input disabled:text-gray-500"
+                    :disabled="isLoggedIn && formData.first_name !== ''"
+                    @input="clearFieldError('first_name')"
+                  />
+                  <label for="firstName" class="floating-label">First name</label>
+                </div>
+                <div data-field="last_name" class="floating-field flex-1" :class="formErrors.last_name ? 'bg-red-50' : ''">
+                  <input
+                    type="text"
+                    id="lastName"
+                    v-model="formData.last_name"
+                    placeholder=" "
+                    class="floating-input disabled:text-gray-500"
+                    :disabled="isLoggedIn && formData.last_name !== ''"
+                    @input="clearFieldError('last_name')"
+                  />
+                  <label for="lastName" class="floating-label">Last name</label>
+                </div>
+              </div>
+
+              <div
+                v-if="!isLoggedIn"
+                data-field="mobile_number"
+                class="px-3"
+                :class="phoneHasError ? 'bg-red-50' : ''"
+              >
+                <PhoneNumInput
+                  v-model="formData.mobile_number"
+                  variant="bare"
+                  :error="phoneHasError"
+                  @update="onPhoneUpdate"
+                />
+              </div>
+              <div v-else class="floating-field">
+                <input
+                  type="text"
+                  id="mobile_number"
+                  v-model="formData.mobile_number"
+                  placeholder=" "
+                  class="floating-input disabled:text-gray-500"
+                  :disabled="isLoggedIn && formData.mobile_number !== ''"
+                />
+                <label for="mobile_number" class="floating-label">Phone</label>
+              </div>
+            </div>
+
+            <p v-if="emailErrorMessage" class="mt-2 text-xs text-red-500">{{ emailErrorMessage }}</p>
+            <p v-if="phoneErrorMessage" class="mt-2 text-xs text-red-500">{{ phoneErrorMessage }}</p>
+            <p v-if="detailsErrorFields.length" class="mt-2 text-xs text-red-500">Please fill all required fields: {{ detailsErrorFields.join(', ') }}</p>
+
+            <!-- newsletter toggle -->
+            <label for="toggle" class="mt-3 flex cursor-pointer items-center gap-3">
+              <span class="relative inline-block h-[26px] w-[50px] flex-shrink-0">
+                <input
+                  type="checkbox"
+                  id="toggle"
+                  v-model="formData.signedUpForExclusiveContent"
+                  class="peer h-0 w-0 appearance-none opacity-0"
+                />
+                <span
+                  class="absolute inset-0 rounded-full bg-gray-300 transition-colors duration-300 peer-checked:bg-primaryColor"
+                ></span>
+                <span
+                  class="pointer-events-none absolute left-1 top-[3px] h-5 w-5 rounded-full bg-white transition-transform duration-300 peer-checked:translate-x-6"
+                ></span>
+              </span>
+              <span class="text-[13px] text-gray-500">
+                Sign up for exclusive discounts and updates via email. Unsubscribe anytime.
+              </span>
+            </label>
+          </section>
+
+          <!-- ===== 2. DELIVERY ===== -->
+          <section class="pt-7">
+            <div class="mb-3 flex items-center gap-2">
+              <span class="flex h-[22px] w-[22px] items-center justify-center rounded-full bg-primaryColor text-xs text-white">2</span>
+              <h2 class="text-[15px] font-semibold">Delivery address</h2>
+              <span class="h-px flex-1 bg-gray-200"></span>
+                <router-link
+                v-if="!isLoggedIn"
+                :to="{ path: '/login', query: { redirect: $route.fullPath } }"
+                class="text-xs text-green-500 underline"
+              >
+                Sign in
+              </router-link>
+            </div>
+
+            <!-- saved addresses -->
+            <div v-if="userAddresses && userAddresses.length > 0" class="mb-2.5">
+              <div class="divide-y divide-gray-200 overflow-hidden rounded-xl border border-gray-300 bg-white">
+                <label
+                  v-for="(address, index) in userAddresses"
+                  :key="index"
+                  class="flex cursor-pointer items-center gap-3 px-3 py-2.5"
+                  :class="selectedAddressIndex === index && !showAddressForm ? 'bg-primaryColor/5' : ''"
+                >
+                  <input
+                    type="checkbox"
+                    :checked="selectedAddressIndex === index"
+                    :disabled="showAddressForm"
+                    class="h-4 w-4 flex-shrink-0 cursor-pointer appearance-none rounded-full border-2 border-gray-300 transition-colors checked:border-primaryColor checked:bg-primaryColor checked:ring-2 checked:ring-white disabled:opacity-40"
+                    @change="selectAddress(index)"
+                  />
+                  <span class="min-w-0 flex-1 truncate text-sm">{{ address.address }}</span>
+                </label>
+
+                <button
+                  type="button"
+                  class="flex w-full items-center gap-2 px-3 py-2.5 text-left text-sm text-primaryColor"
+                  @click="toggleAddressForm"
+                >
+                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4">
+                    <path stroke-linecap="round" d="M12 5v14M5 12h14" />
+                  </svg>
+                  {{ showAddressForm ? "Use a saved address" : "Add new address" }}
+                </button>
+              </div>
+            </div>
+
+            <!-- address form -->
+            <div
+              v-if="showAddressForm || (isLoggedIn && userAddresses.length === 0) || !isLoggedIn"
+              class="divide-y divide-gray-200 overflow-hidden rounded-xl border border-gray-300 bg-white"
+            >
+              <!-- country -->
+              <div data-field="country" class="floating-field" :class="formErrors.country ? 'bg-red-50' : ''">
+                <DropdownSelect
+                  :options="countryOptions"
+                  :model-value="selectedCountry"
+                  @update:model-value="selectCountry($event); clearFieldError('country')"
+                  placeholder="Country"
+                  searchable
+                  local-search
+                  full-width
+                  field="country"
+                  :error="!!formErrors.country"
+                >
+                  <template #trigger="{ toggle, open }">
+                    <button
+                      type="button"
+                      class="flex h-5 w-full items-center justify-between border-0 bg-transparent p-0 text-left text-sm"
+                      @click="toggle"
+                    >
+                      <span class="truncate">{{ selectedCountry?.country_name || "" }}</span>
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
+                        class="ml-2 w-4 flex-shrink-0 text-gray-400 transition-transform duration-200"
+                        :class="open ? 'rotate-180' : ''"
+                      >
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+                      </svg>
+                    </button>
+                  </template>
+                </DropdownSelect>
+                <label class="floating-label" :class="selectedCountry ? 'is-floated' : ''">Country</label>
+              </div>
+
+              <!-- zone -->
+              <div v-if="zoneRequired" data-field="zone" class="floating-field" :class="formErrors.zone ? 'bg-red-50' : ''">
+                <DropdownSelect
+                  :options="zoneOptions"
+                  :model-value="selectedZone"
+                  @update:model-value="selectZone($event); clearFieldError('zone')"
+                  placeholder="Zone"
+                  searchable
+                  local-search
+                  full-width
+                  field="zone"
+                  :error="!!formErrors.zone"
+                >
+                  <template #trigger="{ toggle, open }">
+                    <button
+                      type="button"
+                      class="flex h-5 w-full items-center justify-between border-0 bg-transparent p-0 text-left text-sm"
+                      @click="toggle"
+                    >
+                      <span class="truncate">{{ selectedZone?.name || "" }}</span>
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
+                        class="ml-2 w-4 flex-shrink-0 text-gray-400 transition-transform duration-200"
+                        :class="open ? 'rotate-180' : ''"
+                      >
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+                      </svg>
+                    </button>
+                  </template>
+                </DropdownSelect>
+                <label class="floating-label" :class="selectedZone ? 'is-floated' : ''">Zone</label>
+              </div>
+
+              <!-- city + postcode -->
+              <div class="flex divide-x divide-gray-200">
+                <div data-field="city" class="floating-field flex-1" :class="formErrors.city ? 'bg-red-50' : ''">
+                  <input
+                    type="text"
+                    id="city"
+                    v-model="formData.address.city"
+                    placeholder=" "
+                    class="floating-input"
+                    @input="clearFieldError('city')"
+                  />
+                  <label for="city" class="floating-label">City</label>
+                </div>
+                <div class="floating-field flex-1">
+                  <input
+                    type="number"
+                    id="postcode"
+                    v-model="formData.address.postal_code"
+                    placeholder=" "
+                    class="floating-input"
+                  />
+                  <label for="postcode" class="floating-label">Postal code (optional)</label>
+                </div>
+              </div>
+
+              <!-- street -->
+              <div data-field="address" class="floating-field" :class="formErrors.address ? 'bg-red-50' : ''">
+                <input
+                  id="street"
+                  v-model="formData.address.address"
+                  placeholder=" "
+                  class="floating-input"
+                  @input="clearFieldError('address')"
+                />
+                <label for="street" class="floating-label">Street and area</label>
+              </div>
+
+              <!-- building -->
+              <div class="floating-field">
+                <input
+                  id="building"
+                  v-model="formData.address.address_line2"
+                  placeholder=" "
+                  class="floating-input"
+                />
+                <label for="building" class="floating-label">Building, floor, apartment (optional)</label>
+              </div>
+            </div>
+
+            <p v-if="deliveryErrorFields.length" class="mt-2 text-xs text-red-500">Please fill all required fields: {{ deliveryErrorFields.join(', ') }}</p>
+          </section>
+
+          <!-- ===== 3. PAYMENT ===== -->
+          <section class="pt-7">
+            <div class="mb-3 flex items-center gap-2">
+              <span
+                class="flex h-[22px] w-[22px] items-center justify-center rounded-full bg-primaryColor text-xs text-white"
+              >3</span>
+              <h2 class="text-[15px] font-semibold">Payment</h2>
+              <span class="h-px flex-1 bg-gray-200"></span>
+            </div>
+
+            <div
+              data-field="payment_method_id"
+              class="divide-y divide-gray-200 overflow-hidden rounded-xl border"
+              :class="formErrors.payment_method_id ? 'bg-red-50' : 'border-gray-300 bg-white'"
+            >
+              <label
+                v-for="(option, index) in displayedPaymentMethods"
+                :key="index"
+                class="flex cursor-pointer items-center gap-3 px-3 py-3"
+                :class="isSelected(option) ? 'bg-primaryColor/5' : ''"
+                @click="handleLabelClick(option)"
+              >
+                <input
+                  type="checkbox"
+                  :checked="isSelected(option)"
+                  class="h-4 w-4 flex-shrink-0 cursor-pointer appearance-none rounded-full border-2 border-gray-300 transition-colors checked:border-primaryColor checked:bg-primaryColor checked:ring-2 checked:ring-white"
+                  @change="setPaymentMethod(option.id); clearFieldError('payment_method_id')"
+                />
+                <img v-if="option.icon" :src="imageUrl(option.icon)" width="22" height="22" :alt="option.name" />
+                <span class="flex-1 text-sm">{{ option.name }}</span>
+              </label>
+            </div>
+            <p v-if="formErrors.payment_method_id" class="mt-2 text-xs text-red-500">{{ formErrors.payment_method_id }}</p>
+          </section>
+
+          <!-- ===== DONATE ===== -->
+          <section v-if="extraFees.length" class="pt-7">
+            <div class="mb-3 flex items-center gap-2">
+              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z" />
+              </svg>
+              <h2 class="text-[15px] font-semibold">Would you like to donate?</h2>
+              <span class="h-px flex-1 bg-gray-200"></span>
+            </div>
+              <ExtraFees :fees="extraFees" :subtotal="total_price" @change="onExtraFeesChange" />
+          </section>
+        </template>
+      </div>
+
+      <!-- ---------------- DESKTOP SUMMARY RAIL ---------------- -->
+      <aside class="hidden lg:order-2 lg:block">
+        <div class="sticky top-[90px] rounded-xl border border-gray-300 bg-white p-5">
+       <template v-if="isLoading">
+  <skeletor width="50%" height="20px" />
+
+  <!-- line items: thumbnail + name/variant/qty-pill + price, matching the real rows -->
+  <div class="mt-4 space-y-4">
+    <div v-for="i in 4" :key="`sk-rail-item-${i}`" class="flex items-center gap-3">
+      <skeletor width="48px" height="56px" />
+      <div class="min-w-0 flex-1 space-y-1.5">
+        <skeletor width="75%" height="13px" />
+        <skeletor width="40%" height="11px" />
+        <skeletor width="70px" height="22px" />
+      </div>
+      <skeletor width="32px" height="13px" />
+    </div>
+  </div>
+
+  <!-- promo code row -->
+  <div class="mt-4 flex gap-2">
+    <skeletor width="100%" height="36px" />
+    <skeletor width="64px" height="36px" />
+  </div>
+
+  <!-- totals -->
+  <div class="mt-4 space-y-2.5 border-t border-gray-200 pt-3">
+    <div class="flex justify-between">
+      <skeletor width="35%" height="13px" />
+      <skeletor width="18%" height="13px" />
+    </div>
+    <div class="flex justify-between">
+      <skeletor width="28%" height="13px" />
+      <skeletor width="18%" height="13px" />
+    </div>
+  </div>
+
+  <!-- total -->
+  <div class="mt-3 flex items-baseline justify-between border-t border-gray-200 pt-3">
+    <skeletor width="25%" height="13px" />
+    <skeletor width="30%" height="22px" />
+  </div>
+
+  <div class="mt-4"><skeletor width="100%" height="44px" /></div>
+</template>
+          <template v-else>
+            <p class="mb-3 text-[13px] text-gray-500">
+              Order · {{ totalItemsCount }} {{ totalItemsCount > 1 ? "items" : "item" }}
+            </p>
+
+           <div
+  v-for="item in CartItems"
+  :key="`rail-${item.id}`"
+  class="group flex items-center gap-3 py-2"
+>
+  <div class="h-14 w-12 flex-shrink-0 overflow-hidden rounded-md border border-gray-200 bg-white">
+    <img :src="imageUrl(item.image)" :alt="item.name" class="h-full w-full object-cover" />
+  </div>
+  <div class="min-w-0 flex-1">
+    <p class="truncate text-[13px]">{{ item.name }}</p>
+    <p v-if="Array.isArray(item.values) ? item.values.length : item.values" class="truncate text-xs text-gray-400">{{ Array.isArray(item.values) && item.values.length ? item.values.join(' | ') : item.values || '' }}</p>
+    <div class="mt-1.5 flex items-center gap-3">
+      <div class="flex h-7 w-fit items-center rounded-full border border-gray-300">
+        <button
+          type="button"
+          class="flex h-7 w-7 items-center justify-center text-gray-500 disabled:opacity-40"
+          :disabled="isItemUpdating(item)"
+          aria-label="Decrease quantity"
+          @click="decreaseQuantity(item)"
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-3.5">
+            <path stroke-linecap="round" d="M5 12h14" />
+          </svg>
+        </button>
+        <span class="min-w-[24px] text-center text-[13px]">
+          <span v-if="isItemUpdating(item)" class="inline-block h-3 w-3 animate-spin rounded-full border-2 border-gray-200 border-t-primaryColor"></span>
+          <template v-else>{{ item.quantity }}</template>
+        </span>
+        <button
+          type="button"
+          class="flex h-7 w-7 items-center justify-center text-gray-500 disabled:opacity-40"
+          :disabled="isItemUpdating(item)"
+          aria-label="Increase quantity"
+          @click="increaseQuantity(item)"
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-3.5">
+            <path stroke-linecap="round" d="M12 5v14M5 12h14" />
+          </svg>
+        </button>
+      </div>
+
+      <button
+        type="button"
+          class="flex items-center gap-1 text-[12px] font-body text-gray-400 transition-opacity duration-200 hover:text-red-500 opacity-100 md:opacity-0 md:group-hover:opacity-100 md:focus-visible:opacity-100"
+        :disabled="isItemUpdating(item)"
+        aria-label="Remove item"
+        @click="deleteItem(item)"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.6" stroke="currentColor" class="w-3.5">
+          <path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.35 9m-4.78 0L9.26 9m9.97-3.21c.34.05.67.1 1.01.16m-1.01-.16-1.06 14.09a2.25 2.25 0 0 1-2.24 2.08H8.08a2.25 2.25 0 0 1-2.25-2.08L4.77 5.79m14.46 0a48.1 48.1 0 0 0-3.48-.4m-12 .56c.35-.06.68-.11 1.02-.16m0 0a48.1 48.1 0 0 1 3.48-.4m7.5 0v-.92c0-1.18-.91-2.16-2.09-2.2a51.96 51.96 0 0 0-3.32 0c-1.18.04-2.09 1.02-2.09 2.2v.92m7.5 0a48.67 48.67 0 0 0-7.5 0" />
+        </svg>
+                  <span class="mt-0.5">Remove</span>
+
+      </button>
+    </div>
+  </div>
+  <span class="whitespace-nowrap text-[13px]">{{ currency }}{{ item.total_price }}</span>
+</div>
+
+            <!-- promo -->
+            <div class="mt-3">
+              <div v-if="!discount" class="flex gap-2">
+                <input
+                  type="text"
+                  id="promocode"
+                  v-model="promoCode"
+                  placeholder="Promo code"
+                  class="h-9 min-w-0 flex-1 rounded-lg border border-gray-300 px-3 text-[16px] outline-none placeholder:text-gray-300 focus:border-primaryColor"
+                />
+                <button
+                  type="button"
+                  class="h-9 flex-shrink-0 flex justify-center items-center rounded-lg border border-gray-300 px-4 text-[13px]"
+                  :disabled="isCodeLoading"
+                  @click="applyPromoCode"
+                >
+                  <span v-if="isCodeLoading" class="inline-block h-4 w-4 animate-spin rounded-full border-2 border-gray-200 border-t-primaryColor"></span>
+                  <span v-else>Apply</span>
+                </button>
+              </div>
+              <div v-else class="flex items-center justify-between">
+                <p class="text-[13px] text-green-600">Promo applied: {{ promoCode }}</p>
+                <button type="button" class="rounded-lg border border-red-600 bg-red-600 px-2 py-1 text-xs text-white" @click="removePromo">
+                  Remove
+                </button>
+              </div>
+            </div>
+
+            <!-- totals -->
+            <dl class="mt-4 space-y-2 border-t border-gray-200 pt-3 text-[13px]">
+              <div class="flex justify-between text-gray-500"><dt>Subtotal</dt><dd>{{ currency }}{{ total_price }}</dd></div>
+              <div class="flex justify-between text-gray-500" v-if="selectedCountry || selectedAddress || selectedZone">
+                <dt>Shipping</dt>
+                <dd v-if="isShippingLoading" class="w-[80px]"><skeletor width="100%" height="18px" /></dd>
+                <dd v-else-if="isFreeDelivery" class="flex gap-2">
+                  <span class="text-gray-400 line-through">{{ currency }}{{ shippingCost }}</span>
+                  <span class="text-green-600">{{ currency }}0</span>
+                </dd>
+                <dd v-else>{{ currency }}{{ shippingCost }}</dd>
+              </div>
+              <div class="flex justify-between text-gray-500" v-else>
+                <dt>Shipping</dt><dd class="text-xs">Enter address to calculate</dd>
+              </div>
+              <div v-if="discount" class="flex justify-between text-green-600">
+                <dt>Discount</dt>
+                <dd>
+                  <template v-if="discountType === 'Percentage'">{{ Number(discount) }}%</template>
+                  <template v-else-if="discountType === 'Fixed Amount'">{{ currency }}{{ Number(discount) }}</template>
+                </dd>
+              </div>
+              <div v-for="line in extraFeeLines" :key="`rail-fee-${line.name}`" class="flex justify-between text-gray-500">
+                <dt>{{ line.name }}</dt><dd>{{ currency }}{{ line.amount.toFixed(2) }}</dd>
+              </div>
+            </dl>
+
+            <div class="mt-3 flex items-baseline justify-between border-t border-gray-200 pt-3">
+              <span class="text-[13px] text-gray-500">Total</span>
+              <div class="flex items-baseline gap-2">
+                <span v-if="discount" class="text-[13px] text-gray-400 line-through">{{ currency }}{{ originalTotal }}</span>
+                <span class="text-xl font-semibold">{{ currency }}{{ totalPrice }}</span>
+              </div>
+            </div>
+
+            <div v-if="isCheckingOut" class="mt-4 flex w-full justify-center py-8">
+              <FadeLoader color="black" height="10px" />
+            </div>
+            <button
+              v-else
+              type="button"
+              class="osi-btn osi-btn--block mt-4"
+              @click="submitForm"
+            >
+              Complete order
+            </button>
+
+            <p class="mt-3 text-center text-[11px] text-gray-400">
+              By placing an order you're consenting to our privacy policy.
+            </p>
+          </template>
+        </div>
+      </aside>
+    </div>
+
+    <!-- ============ MOBILE PAY BAR ============ -->
+    <div
+      class="border-t border-gray-200 bg-white px-4 pb-[max(12px,env(safe-area-inset-bottom))] pt-3 lg:hidden"
+    >
+      <div class="mx-auto">
+        <!-- skeleton while the cart/user is still loading -->
+        <template v-if="isLoading">
+          <skeletor width="50%" height="18px" />
+          <div class="mt-3 space-y-3">
+            <skeletor v-for="i in 2" :key="`sk-bottom-item-${i}`" width="100%" height="56px" />
+          </div>
+          <div class="mt-3"><skeletor width="100%" height="40px" /></div>
+          <div class="mt-4 space-y-2">
+            <skeletor v-for="i in 3" :key="`sk-bottom-line-${i}`" width="100%" height="16px" />
+          </div>
+          <div class="mb-2.5 mt-3 border-t border-gray-200 pt-3">
+            <skeletor width="45%" height="22px" />
+          </div>
+          <skeletor width="100%" height="48px" />
+        </template>
+
+        <template v-else>
+          <!-- toggle: reveals line items + promo code input, Shopify-style -->
+          <button
+            type="button"
+            class="flex w-full items-center justify-between py-1 text-[13px] font-medium text-gray-700"
+            @click="bottomDiscountOpen = !bottomDiscountOpen"
+          >
+            <span class="flex items-center gap-1.5">
+              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.6" stroke="currentColor" class="w-4">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M9.568 3H5.25A2.25 2.25 0 0 0 3 5.25v4.318c0 .597.237 1.169.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 0 0 5.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 0 0 9.568 3Z" />
+                <path stroke-linecap="round" stroke-linejoin="round" d="M6 6h.008v.008H6V6Z" />
+              </svg>
+              Add Discount
+            </span>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke-width="2"
+              stroke="currentColor"
+              class="w-4 flex-shrink-0 transition-transform duration-200"
+              :class="bottomDiscountOpen ? 'rotate-180' : ''"
+            >
+              <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
+            </svg>
+          </button>
+
+          <transition
+            :css="false"
+            @enter="accordionEnter"
+            @after-enter="accordionAfterEnter"
+            @leave="accordionLeave"
+            @after-leave="accordionAfterEnter"
+          >
+            <div v-if="bottomDiscountOpen">
+            <!-- line items -->
+            <div
+              v-for="item in CartItems"
+              :key="`bottom-${item.id}`"
+              class="group flex items-center gap-3 py-2"
+            >
+              <div class="h-14 w-12 flex-shrink-0 overflow-hidden rounded-md border border-gray-200 bg-white">
+                <img :src="imageUrl(item.image)" :alt="item.name" class="h-full w-full object-cover" />
+              </div>
+              <div class="min-w-0 flex-1">
+                <p class="truncate text-[13px]">{{ item.name }}</p>
+                <p v-if="Array.isArray(item.values) ? item.values.length : item.values" class="truncate text-xs text-gray-400">{{ Array.isArray(item.values) && item.values.length ? item.values.join(' | ') : item.values || '' }}</p>
+                <div class="mt-1.5 flex items-center gap-3">
+                  <div class="flex h-7 w-fit items-center rounded-full border border-gray-300">
+                    <button
+                      type="button"
+                      class="flex h-7 w-7 items-center justify-center text-gray-500 disabled:opacity-40"
+                      :disabled="isItemUpdating(item)"
+                      aria-label="Decrease quantity"
+                      @click="decreaseQuantity(item)"
+                    >
+                      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-3.5">
+                        <path stroke-linecap="round" d="M5 12h14" />
+                      </svg>
+                    </button>
+                    <span class="min-w-[24px] text-center text-[13px]">
+                      <span v-if="isItemUpdating(item)" class="inline-block h-3 w-3 animate-spin rounded-full border-2 border-gray-200 border-t-primaryColor"></span>
+                      <template v-else>{{ item.quantity }}</template>
+                    </span>
+                    <button
+                      type="button"
+                      class="flex h-7 w-7 items-center justify-center text-gray-500 disabled:opacity-40"
+                      :disabled="isItemUpdating(item)"
+                      aria-label="Increase quantity"
+                      @click="increaseQuantity(item)"
+                    >
+                      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-3.5">
+                        <path stroke-linecap="round" d="M12 5v14M5 12h14" />
+                      </svg>
+                    </button>
+                  </div>
+
+                  <button
+                    type="button"
+                    class="flex items-center justify-center gap-1 text-[12px] text-gray-400 transition-colors duration-200 hover:text-red-500 disabled:opacity-40"
+                    :disabled="isItemUpdating(item)"
+                    aria-label="Remove item"
+                    @click="deleteItem(item)"
+                  >
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.6" stroke="currentColor" class="w-3.5">
+                      <path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.35 9m-4.78 0L9.26 9m9.97-3.21c.34.05.67.1 1.01.16m-1.01-.16-1.06 14.09a2.25 2.25 0 0 1-2.24 2.08H8.08a2.25 2.25 0 0 1-2.25-2.08L4.77 5.79m14.46 0a48.1 48.1 0 0 0-3.48-.4m-12 .56c.35-.06.68-.11 1.02-.16m0 0a48.1 48.1 0 0 1 3.48-.4m7.5 0v-.92c0-1.18-.91-2.16-2.09-2.2a51.96 51.96 0 0 0-3.32 0c-1.18.04-2.09 1.02-2.09 2.2v.92m7.5 0a48.67 48.67 0 0 0-7.5 0" />
+                    </svg>
+                    <span class="mt-0.5">Remove</span>
+                  </button>
+                </div>
+              </div>
+              <span class="whitespace-nowrap text-[13px]">{{ currency }}{{ item.total_price }}</span>
+            </div>
+
+            <!-- promo -->
+            <div class="pt-3">
+              <div v-if="!discount" class="flex gap-2">
+                <input
+                  type="text"
+                  id="b-promocode"
+                  v-model="promoCode"
+                  placeholder="Promo code"
+                  class="h-10 min-w-0 flex-1 rounded-xl border border-gray-300 bg-white px-3 text-[16px] outline-none placeholder:text-gray-300"
+                />
+                <button
+                  type="button"
+                  class="flex h-10 flex-shrink-0 items-center justify-center rounded-xl border border-gray-300 bg-white px-4 text-sm font-medium"
+                  :disabled="isCodeLoading"
+                  @click="applyPromoCode"
+                >
+                  <span v-if="isCodeLoading" class="inline-block h-4 w-4 animate-spin rounded-full border-2 border-gray-200 border-t-primaryColor"></span>
+                  <span v-else>Apply</span>
+                </button>
+              </div>
+              <div v-else class="flex items-center justify-between">
+                <p class="text-sm text-green-600">Promo applied: {{ promoCode }}</p>
+                <button type="button" class="rounded-lg border border-red-600 bg-red-600 px-2 py-1 text-xs text-white" @click="removePromo">
+                  Remove
+                </button>
+              </div>
+            </div>
+            </div>
+          </transition>
+
+          <!-- order breakdown: always visible, even while items/promo are collapsed -->
+          <dl class="mt-3 space-y-2 border-t border-gray-200 pb-1 pt-3 text-[13px]">
+            <div class="flex justify-between text-gray-500">
+              <dt>Subtotal ({{ totalItemsCount }} {{ totalItemsCount > 1 ? "items" : "item" }})</dt>
+              <dd>{{ currency }}{{ total_price }}</dd>
+            </div>
+            <div class="flex justify-between text-gray-500" v-if="selectedCountry || selectedAddress || selectedZone">
+              <dt>Shipping</dt>
+              <dd v-if="isShippingLoading" class="w-[80px]"><skeletor width="100%" height="18px" /></dd>
+              <dd v-else-if="isFreeDelivery" class="flex gap-2">
+                <span class="text-gray-400 line-through">{{ currency }}{{ shippingCost }}</span>
+                <span class="text-green-600">{{ currency }}0</span>
+              </dd>
+              <dd v-else>{{ currency }}{{ shippingCost }}</dd>
+            </div>
+            <div class="flex justify-between text-gray-500" v-else>
+              <dt>Shipping</dt><dd class="text-xs">Enter address to calculate</dd>
+            </div>
+            <div v-if="discount" class="flex justify-between text-green-600">
+              <dt>Discount</dt>
+              <dd>
+                <template v-if="discountType === 'Percentage'">{{ Number(discount) }}%</template>
+                <template v-else-if="discountType === 'Fixed Amount'">{{ currency }}{{ Number(discount) }}</template>
+              </dd>
+            </div>
+            <div v-for="line in extraFeeLines" :key="`bottom-fee-${line.name}`" class="flex justify-between text-gray-500">
+              <dt>{{ line.name }}</dt><dd>{{ currency }}{{ line.amount.toFixed(2) }}</dd>
+            </div>
+          </dl>
+
+          <div class="mb-2.5 mt-3 flex items-end justify-between border-t border-gray-200 pt-3">
+            <div>
+              <p>Total</p>
+              
+            </div>
+          <div class="flex items-baseline gap-2">
+                <span v-if="discount" class="text-[13px] text-gray-400 line-through">{{ currency }}{{ originalTotal }}</span>
+                <span class="text-lg font-semibold">{{ currency }}{{ totalPrice }}</span>
+              </div>
+          </div>
+
+          <div v-if="isCheckingOut" class="flex w-full justify-center py-8">
+            <FadeLoader color="black" height="10px" />
+          </div>
+          <button
+            v-else
+            type="button"
+            class="osi-btn osi-btn--block"
+            @click="submitForm"
+          >
+            Complete order
+          </button>
+        </template>
+      </div>
+    </div>
+
+    <!-- ============ GATEWAY HANDOFF ============ -->
+    <PaymentHandoff
+      v-if="activePayment"
+      :payment="activePayment"
+      :amount="totalPrice"
+      @error="onPaymentError"
+      @settled="onPaymentSettled"
+      @declined="onPaymentDeclined"
+      @close="closePayment"
+    />
+  </div>
+</template>
+<script>
+import checkoutServices from "#osi/services/CheckoutServices";
+import { authBus } from "#osi/services/AuthBus";
+import utilsServices from "#osi/services/UtilsServices";
+import { Skeletor } from "vue-skeletor";
+import "vue-skeletor/dist/vue-skeletor.css";
+import { ExtraFees } from "#components";
+import paymentServices from "#osi/services/PaymentServices";
+import { PaymentHandoff } from "#components";
+import { useToast } from "vue-toastification";
+import { eventBus } from "#osi/utils/eventBus";
+import { PhoneNumInput } from "#components";
+import FadeLoader from "vue-spinner/src/FadeLoader.vue";
+import { DropdownSelect } from "#components";
+import { scrollToFirstError } from "#osi/utils/scrollToError";
+import { useHead } from "#imports";
+import { useUserStore } from "#osi/stores/userStore";
+import { analytics } from "#osi/utils/analytics";
+
+definePageMeta({
+  name: "checkout",
+});
+
+function extractErrorMessage(error) {
+  const data = error?.data ?? error?.response?.data ?? error;
+
+  if (Array.isArray(data) && data.length > 0) {
+    return data.length === 1 ? data[0] : data.map((e) => `• ${e}`).join("\n");
+  }
+  if (data && typeof data === "object") {
+    const messages = Object.values(data).flat().filter(Boolean);
+    if (messages.length > 0) {
+      return messages.length === 1
+        ? messages[0]
+        : messages.map((m) => `• ${m}`).join("\n");
+    }
+  }
+  if (typeof data === "string" && data) return data;
+
+  return error?.message || "An error occurred";
+}
+
+export default {
+  name: "checkout",
+  setup() {
+    const toast = useToast();
+    const userStore = useUserStore();
+    // Multi-tenant: the page title and media host come from the resolved store,
+    // never from a build-time constant.
+    const { store } = useStorefront();
+    const { mediaUrl } = useMediaUrl();
+    // The one cart. Every mutation below writes through this composable, so
+    // the drawer and the header badge move with the checkout page.
+    const {
+      cart: rawCart,
+      cartItems,
+      cartTotal,
+      loading: cartLoading,
+      isUpdating,
+      fetchCart,
+      editItem,
+      removeItem,
+      clear: clearCart,
+    } = useCart();
+    const storeName = computed(() => store.value?.name || "");
+    const currency = computed(
+      () => store.value?.default_currency?.symbol || store.value?.default_currency?.code || "$"
+    );
+
+    useHead({
+      title: computed(() =>
+        "Checkout",
+      ),
+      meta: [
+        {
+          name: "description",
+          content: computed(() =>
+            storeName.value
+              ? `Complete your ${storeName.value} purchase securely.`
+              : "Complete your purchase securely.",
+          ),
+        },
+        { name: "robots", content: "noindex, nofollow" },
+        { property: "og:type", content: "website" },
+        { name: "twitter:card", content: "summary" },
+      ],
+    });
+
+    return {
+      toast,
+      userStore,
+      mediaUrl,
+      currency,
+      rawCart,
+      cartItems,
+      cartTotal,
+      cartLoading,
+      isUpdating,
+      fetchCart,
+      editItem,
+      removeItem,
+      clearCart,
+    };
+  },
+  components: {
+    Skeletor,
+    PaymentHandoff,
+    PhoneNumInput,
+    FadeLoader,
+    ExtraFees,
+    DropdownSelect,
+  },
+  data() {
+    return {
+      countryAutoSet: false,
+      // Set by submitForm(), read by onPaymentSettled() after the gateway modal
+      // closes — the response object is long out of scope by then.
+      placedOrderId: null,
+      // --- mobile UI state (accordion open/closed; layout itself is CSS-driven) ---
+      mobileSummaryOpen: false,
+      // Bottom pay bar: collapses the line items + promo code input behind
+      // an "Add a discount code" toggle, Shopify-style. Totals stay visible.
+      bottomDiscountOpen: false,
+
+      originalTotal: null,
+      subscribeNewsletter: true,
+      isLoggedIn: false,
+      needsUserInfo: true,
+      toast: useToast(),
+      selectedCountry: "",
+      selectedZone: "",
+      isCheckingOut: false,
+      promoCode: "",
+      promo_id: "",
+      discount: "",
+      discountType: "",
+      isCodeLoading: false,
+      paymentMethods: [], //array to store all payment methods
+      selectedPaymentMethod: null, //store the selected payment methods ID
+      selectedOption: null, //store the selected option
+      activePayment: null, //set once an order is placed and a gateway takes over
+      isShippingLoading: false,
+      isFreeDelivery: false,
+      freeDeliveryId: null,
+      extraFees: [],
+      extraFeesPayload: [],
+      extraFeesTotal: 0,
+      extraFeesValid: true,
+      extraFeeLines: [],
+      countries: [],
+      userAddresses: [],
+      selectedPaymentMethodIndex: null,
+      selectedAddressIndex: null, //track which address is selected
+      showAddressForm: false, //controls whether to show the address form
+      formErrors: {}, //field-level validation errors, keyed by data-field name
+      phoneNumberResults: null, //validity/e164 payload emitted by PhoneNumInput's @update
+      phoneTouched: false, //true once the phone field has been left, so we don't flag it mid-typing
+      formData: {
+        countryCode: "LB",
+        first_name: "",
+        last_name: "",
+        email: "",
+        mobile_number: "",
+        signedUpForExclusiveContent: false,
+        payment_method_id: "",
+        address: {
+          country: "",
+          city: "",
+          address: "",
+          address_line2: "",
+          zone: "",
+          postal_code: "",
+        },
+        cart: {},
+      },
+    };
+  },
+  methods: {
+    // --- absolute media url for cart thumbnails / payment icons ---
+    // useMediaUrl() resolves against the `base-url` state the tenant was
+    // resolved into, so one Nuxt process serves every store correctly.
+    imageUrl(path) {
+      return this.mediaUrl(path);
+    },
+    isItemUpdating(item) {
+      return this.isUpdating(item);
+    },
+    // /payments/methods/ only returns methods that are active and fully
+    // configured, so anything rendered here is selectable.
+    isAvailable() {
+      return true;
+    },
+
+    isSelected(option) {
+      return this.selectedPaymentMethod === option.id;
+    },
+
+    handleLabelClick() {},
+
+    setPaymentMethod(optionId) {
+      if (this.selectedPaymentMethod === optionId) {
+        this.selectedPaymentMethod = null;
+        this.formData.payment_method_id = null;
+      } else {
+        this.selectedPaymentMethod = optionId;
+        this.formData.payment_method_id = optionId;
+      }
+    },
+
+    onPaymentError(message) {
+      this.toast.error(message);
+    },
+
+    // Fired ONLY when the server confirmed the charge - PaymentHandoff now
+    // reads `paid` off the verify response, so this no longer runs on a
+    // decline. That makes it the one safe place to empty the bag.
+    onPaymentSettled(result) {
+      paymentServices.clearReference();
+      // this.clearCart();
+      eventBus.emit("cartUpdated");
+      this.activePayment = null;
+      // Straight to the order, not to /checkout/result: this flow already
+      // verified in the modal, and clearReference() above leaves the result
+      // page with no reference to check — it would report a failure on a
+      // payment that just succeeded.
+      this.$router.replace({
+        path: "/order-detail",
+        query: { id: this.placedOrderId, placed: "1" },
+      });
+    },
+
+    // The bank refused. The order exists and is unpaid, which is correct - so
+    // the bag stays and the buyer can pay again. A retry needs a fresh capture
+    // context (the transient token is single-use), which is why this closes
+    // the modal and returns them to the form rather than leaving it open.
+    onPaymentDeclined(reason) {
+      this.activePayment = null;
+      this.isCheckingOut = false;
+      this.toast.error(
+        reason || "Your payment was declined. Please try another card.",
+      );
+    },
+
+    closePayment() {
+      this.activePayment = null;
+      // submitForm leaves this true while the gateway is up - release it so
+      // the Complete Order button is usable again after a dismissed payment.
+      this.isCheckingOut = false;
+      this.toast.info("Your order is saved but unpaid. You can pay again.");
+    },
+
+    async selectAddress(index) {
+      // Prevent selection if the address form is open
+      if (this.showAddressForm) return;
+
+      if (this.selectedAddressIndex === index) {
+        this.selectedAddressIndex = null;
+        this.formData.address = null;
+        this.isFreeDelivery = false;
+        this.freeDeliveryId = null;
+      } else {
+        // Otherwise, select the address
+        const selectedAddress = this.userAddresses[index];
+        this.formData.address = selectedAddress.id;
+        this.selectedAddressIndex = index;
+
+        // Check for free delivery using the country ID from the selected address
+        if (selectedAddress.country) {
+          await this.checkFreeDelivery(selectedAddress.country);
+        }
+      }
+    },
+
+    toggleAddressForm() {
+      if (this.showAddressForm) {
+        // If the form is open, close it and allow selection again
+        this.showAddressForm = false;
+        this.selectedCountry = null;
+        this.selectedZone = null;
+        this.selectedAddressIndex = null;
+      } else {
+        // If the form is closed, open it and clear address selection
+        this.formData.address = {
+          country: "",
+          city: "",
+          address: "",
+          address_line2: "",
+          zone: "",
+          postal_code: "",
+        };
+        this.selectedCountry = null;
+        this.selectedZone = null;
+        this.showAddressForm = true;
+        this.selectedAddressIndex = null;
+        this.countryAutoSet = false;
+        this.syncCountry();
+      }
+    },
+    syncCountry() {
+      const ipCountryName =
+        this.userStore?.clientIpInfo?.country_name ||
+        this.userStore?.clientIpInfo?.country;
+      if (!ipCountryName || !this.countries || !this.countries.length) return;
+      if (!this.countryAutoSet && !this.selectedCountry) {
+        const target = String(ipCountryName).trim().toLowerCase();
+        const matchedCountry = this.countries.find(
+          (c) =>
+            (c.country_name && c.country_name.trim().toLowerCase() === target) ||
+            (c.country_code && c.country_code.trim().toLowerCase() === target) ||
+            (c.code && c.code.trim().toLowerCase() === target)
+        );
+        if (matchedCountry) {
+          this.selectCountry(matchedCountry);
+          this.countryAutoSet = true;
+        }
+      }
+    },
+    async selectCountry(country) {
+      this.countryAutoSet = true;
+      // If user clicks the same country again, deselect it
+      if (this.selectedCountry === country) {
+        this.selectedCountry = "";
+        this.formData.address.country = "";
+        this.isFreeDelivery = false;
+        this.applyDefaultZone(null);
+      } else {
+        this.selectedCountry = country;
+        this.formData.address.country = country.id;
+        // countries with has_zones = false have a single hidden "Default Zone":
+        // pick it silently so it still goes out in the payload
+        this.applyDefaultZone(country);
+        await this.checkFreeDelivery(country.id);
+      }
+    },
+    // silently select the default zone for countries that don't expose zones
+    applyDefaultZone(country) {
+      const zones = country?.shipping_zones || [];
+      const isNewAddress =
+        this.formData.address && typeof this.formData.address === "object";
+
+      if (country && !country.has_zones && zones.length) {
+        this.selectedZone = zones[0];
+        if (isNewAddress) this.formData.address.zone = zones[0].id;
+      } else {
+        this.selectedZone = "";
+        if (isNewAddress) this.formData.address.zone = "";
+      }
+    },
+    async checkFreeDelivery(countryId) {
+      this.isShippingLoading = true;
+      this.isFreeDelivery = false;
+      this.freeDeliveryId = null;
+      try {
+        const response = await checkoutServices.freeDeliveries(countryId);
+        const results = response.results || (Array.isArray(response) ? response : []);
+
+        if (results.length > 0) {
+          const applicableRule = results.find(rule => this.total_price >= rule.minimum_order_amount);
+          if (applicableRule) {
+            this.isFreeDelivery = true;
+            this.freeDeliveryId = applicableRule.id;
+          } else {
+            this.isFreeDelivery = false;
+            this.freeDeliveryId = null;
+          }
+        } else {
+          this.isFreeDelivery = false;
+          this.freeDeliveryId = null;
+        }
+      } catch (error) {
+        console.error(error);
+        this.isFreeDelivery = false;
+        this.freeDeliveryId = null;
+      } finally {
+        this.isShippingLoading = false;
+      }
+    },
+    // --- height-based accordion animation (bottom order summary) ---
+    accordionEnter(el, done) {
+      el.style.overflow = "hidden";
+      el.style.height = "0px";
+      el.style.opacity = "0";
+      void el.offsetHeight;
+      el.style.transition = "height 0.3s ease, opacity 0.25s ease";
+      el.style.height = `${el.scrollHeight}px`;
+      el.style.opacity = "1";
+      this.onAccordionEnd(el, done);
+    },
+    accordionLeave(el, done) {
+      el.style.overflow = "hidden";
+      el.style.height = `${el.scrollHeight}px`;
+      el.style.opacity = "1";
+      void el.offsetHeight;
+      el.style.transition = "height 0.3s ease, opacity 0.25s ease";
+      el.style.height = "0px";
+      el.style.opacity = "0";
+      this.onAccordionEnd(el, done);
+    },
+    accordionAfterEnter(el) {
+      el.style.transition = "";
+      el.style.height = "";
+      el.style.opacity = "";
+      el.style.overflow = "";
+    },
+    onAccordionEnd(el, done) {
+      let finished = false;
+      const finish = (event) => {
+        if (event && (event.target !== el || event.propertyName !== "height")) {
+          return;
+        }
+        if (finished) return;
+        finished = true;
+        clearTimeout(timer);
+        el.removeEventListener("transitionend", finish);
+        done();
+      };
+      const timer = setTimeout(finish, 400);
+      el.addEventListener("transitionend", finish);
+    },
+    selectZone(zone) {
+      if (this.selectedZone === zone) {
+        this.selectedZone = "";
+        this.formData.address.zone = "";
+      } else {
+        this.selectedZone = zone;
+        this.formData.address.zone = zone.id;
+      }
+    },
+    //get cart items — shared state, so this refreshes the drawer too
+    async getCartItems() {
+      await this.fetchCart();
+    },
+    handleUserInfo() {
+      if (!authBus || !authBus.isLoggedIn) {
+        this.needsUserInfo = false;
+        this.isLoggedIn = false;
+        return;
+      }
+
+      if (authBus.userInfo) {
+        this.isUserLoading = false;
+        this.isLoggedIn = authBus.isLoggedIn;
+        this.userAddresses = authBus.userInfo.customer_addresses;
+        this.formData.first_name = authBus.userInfo.first_name || "";
+        this.formData.last_name = authBus.userInfo.last_name || "";
+        this.formData.email = authBus.userInfo.email || "";
+        this.formData.mobile_number = authBus.userInfo.mobile_number || "";
+      }
+    },
+    // Quantity changes go through useCart(): it applies the server's response
+    // to the shared state, so the drawer and header badge follow along and
+    // there's no second fetch.
+    async increaseQuantity(item) {
+      try {
+        await this.editItem(item, "add");
+      } catch (error) {
+        console.error("Error adding to cart:", error);
+        this.toast.error(extractErrorMessage(error));
+      }
+    },
+    async decreaseQuantity(item) {
+      try {
+        await this.editItem(item, "remove");
+      } catch (error) {
+        console.error("Error decreasing quantity:", error);
+        this.toast.error(extractErrorMessage(error));
+      }
+    },
+    async deleteItem(item) {
+      try {
+        await this.removeItem(item);
+      } catch (error) {
+        console.error("Error removing from cart:", error);
+        this.toast.error(extractErrorMessage(error));
+      }
+    },
+    async waitForUserInfoIfNeeded() {
+      if (!authBus.isLoggedIn) return;
+
+      // Wait for user info with timeout as fallback
+      await new Promise((resolve) => {
+        const checkInterval = setInterval(() => {
+          if (authBus.userInfo) {
+            clearInterval(checkInterval);
+            this.handleUserInfo();
+            resolve();
+          }
+        }, 0);
+
+        // Fallback in case user info never arrives
+        setTimeout(() => {
+          clearInterval(checkInterval);
+          this.needsUserInfo = false;
+          resolve();
+        }, 0);
+      });
+    },
+    // Validates required checkout fields and populates `formErrors` (keyed by
+    // the same names used in each field's `data-field` attribute) so inputs
+    // can show a red border + inline message instead of a toast.
+    validateForm() {
+      const errors = {};
+      const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+      if (!this.formData.first_name)
+        errors.first_name = "First name is required.";
+      if (!this.formData.last_name)
+        errors.last_name = "Last name is required.";
+      if (!this.formData.email) {
+        errors.email_required = true;
+      } else if (!emailPattern.test(this.formData.email)) {
+        errors.email = "Enter a valid email address.";
+      }
+      if (!this.formData.payment_method_id)
+        errors.payment_method_id = "Payment method is required.";
+      if (!this.isLoggedIn) {
+        this.phoneTouched = true;
+        if (!this.formData.mobile_number) {
+          // Empty phone joins the combined "fill all required fields" line
+          // instead of showing its own message (see detailsErrorFields).
+          errors.mobile_number_required = true;
+        } else if (!this.phoneNumberResults?.isValid) {
+          // Wrong-format phone still gets its own standalone message.
+          errors.mobile_number = "This phone number is not valid.";
+        }
+      }
+
+      // Validate address only if it's a new address (object). An existing
+      // address selected by id (string) is already complete.
+      if (!this.formData.address) {
+        errors.country = "Country is required.";
+        errors.city = "City is required.";
+        errors.address = "Street & area is required.";
+      } else if (typeof this.formData.address === "object") {
+        if (!this.formData.address.country)
+          errors.country = "Country is required.";
+        if (!this.formData.address.city) errors.city = "City is required.";
+        if (!this.formData.address.address)
+          errors.address = "Street & area is required.";
+        if (this.zoneRequired && !this.selectedZone?.id) {
+          errors.zone = "Please select a zone.";
+        }
+      }
+
+      this.formErrors = errors;
+      return Object.keys(errors).length === 0;
+    },
+    // PhoneNumInput emits its parsed result on every keystroke. We just store
+    // the latest result; we don't touch phoneTouched here so no error shows
+    // while the user is still typing — only on submit (see validateForm).
+    onPhoneUpdate(results) {
+      this.phoneNumberResults = { ...results };
+      if (this.formData.mobile_number) this.clearFieldError("mobile_number_required");
+    },
+    // Clears a single field's error as the user fixes it, instead of waiting
+    // for the next full submit attempt to re-validate.
+    clearFieldError(field) {
+      if (this.formErrors[field]) {
+        this.formErrors = { ...this.formErrors, [field]: "" };
+      }
+    },
+    // Like clearFieldError, but for email: only lifts the red state once the
+    // typed value actually matches a valid email format, instead of clearing
+    // on the first keystroke.
+    validateEmailField() {
+      if (this.formData.email) this.clearFieldError("email_required");
+      if (!this.formErrors.email) return;
+      const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+      if (this.formData.email && emailPattern.test(this.formData.email)) {
+        this.clearFieldError("email");
+      }
+    },
+    async submitForm() {
+      const toast = useToast();
+      const cleanedCart = Object.fromEntries(
+        Object.entries(this.rawCart?.cart ?? {}).map(([id, item]) => [
+          id,
+          {
+            name: item.name,
+            quantity: item.quantity,
+            price: item.price,
+            image: item.image,
+          },
+        ]),
+      );
+
+      // Prepare the payload
+      const payload = {
+        payment_method_id: this.formData.payment_method_id,
+        cart: cleanedCart,
+      };
+
+      // Where the gateway callback sends the browser back. Validated server-side
+      // against the store's own origins, so an unknown host can't be injected -
+      // sending it explicitly just keeps the buyer on the domain they came from
+      // instead of the store's first known origin.
+      if (typeof window !== "undefined") {
+        payload.return_url = `${window.location.origin}/checkout/result`;
+      }
+      if (this.promo_id && this.promo_id !== "") {
+        payload.promo_id = this.promo_id;
+      }
+
+      if (this.freeDeliveryId && this.freeDeliveryId !== "") {
+        payload.freedelivery_id = this.freeDeliveryId;
+      }
+
+      if (this.extraFeesPayload.length > 0) {
+        if (!this.extraFeesValid) {
+          toast.error("Check the donation amount before completing your order.");
+          return;
+        }
+        payload.extra_fees = this.extraFeesPayload;
+      }
+      if (typeof this.formData.address === "string") {
+        payload.address_id = this.formData.address; // Using address_id instead of address
+      } else {
+        payload.address = { ...this.formData.address };
+        if (this.selectedZone && this.selectedZone.id) {
+          payload.address.zone = this.selectedZone.id;
+        } else {
+          delete payload.address.zone;
+        }
+        if (!payload.address.address_line2) {
+          delete payload.address.address_line2;
+        }
+      }
+      // Validate the form; on failure, inline field errors are set and the
+      // page scrolls to the first invalid field instead of showing a toast.
+      if (!this.validateForm()) {
+        await this.$nextTick();
+        scrollToFirstError(this.formErrors);
+        return;
+      }
+
+      // Add guest data if the user is not logged in
+      if (!this.isLoggedIn) {
+        payload.guest = {
+          first_name: this.formData.first_name,
+          last_name: this.formData.last_name,
+          email: this.formData.email,
+          mobile_number: this.formData.mobile_number,
+        };
+      }
+
+      // The shopper has committed to a destination and a payment method.
+      // Reported here, once the form is valid, in funnel order.
+      const coupon = this.promo_id ? this.promoCode || undefined : undefined;
+      const chosenMethod = this.paymentMethods.find(
+        (method) => method.id === this.formData.payment_method_id,
+      );
+      analytics.addShippingInfo(this.CartItems, {
+        tier:
+          this.selectedZone?.name ||
+          this.selectedCountry?.country_name ||
+          this.selectedAddress?.country_name ||
+          undefined,
+        coupon,
+      });
+      analytics.addPaymentInfo(this.CartItems, {
+        paymentType: chosenMethod?.name,
+        coupon,
+      });
+
+      try {
+        this.isCheckingOut = true;
+        // Place the order. The server decides what happens next via payment.flow.
+        const response = await checkoutServices.placeOrder(payload);
+        this.placedOrderId = response.order_id;
+        // Fallback for anything still reading the id out of session storage.
+        sessionStorage.setItem("orderId", response.order_id);
+
+        // No fallback to OFFLINE. Defaulting an unrecognised response to
+        // "already paid" would clear the bag and show the order summary for an
+        // order nobody has paid for - the worst available default.
+        const payment = response.payment;
+        if (!payment?.flow) {
+          console.error("checkout returned no payment object", response);
+          this.toast.error("Payment could not be started. Please try again.");
+          this.isCheckingOut = false;
+          return;
+        }
+        if (payment.reference) paymentServices.setReference(payment.reference);
+
+        if (payment.flow === "OFFLINE") {
+          // Already placed (COD, bank transfer) - safe to clear the bag here.
+          this.toast.success("Order added successfully!");
+          paymentServices.clearReference();
+          // this.clearCart();
+          eventBus.emit("cartUpdated");
+          this.$router.replace({
+            path: "/order-detail",
+         query: { placed: "1" },
+
+        });
+          return;
+        }
+
+        // Card / redirect: hand off to the gateway. The bag stays until
+        // /payments/verify/ says paid on the result page.
+        this.activePayment = payment;
+      } catch (error) {
+        this.isCheckingOut = false;
+        console.error("Error placing order:", error);
+        this.toast.error(extractErrorMessage(error));
+      } finally {
+        this.isCheckingOut = false;
+      }
+    },
+    async applyPromoCode() {
+      if (this.promoCode) {
+        try {
+          this.isCodeLoading = true;
+          const response = await checkoutServices.promoCode(this.promoCode);
+          if (response.results && response.results.length > 0) {
+            this.discount = response.results[0].discount_value;
+            this.discountType = response.results[0].discount_type;
+            this.promo_id = response.results[0].id;
+            this.toast.success("Promo code applied");
+          } else {
+            this.toast.error("Invalid promo code");
+          }
+        } catch (error) {
+          this.toast.error(extractErrorMessage(error));
+        } finally {
+          this.isCodeLoading = false;
+        }
+      }
+    },
+    removePromo() {
+      this.promoCode = "";
+      this.discount = null;
+      this.discountType = null;
+      this.promo_id = null;
+    },
+    onExtraFeesChange({ payload, total, valid, lines }) {
+      this.extraFeesPayload = payload;
+      this.extraFeesTotal = total;
+      this.extraFeesValid = valid;
+      this.extraFeeLines = lines;
+    },
+    async getExtraFees() {
+      try {
+        const response = await checkoutServices.extraFees();
+        this.extraFees = response.results || (Array.isArray(response) ? response : []);
+      } catch (error) {
+        this.extraFees = [];
+      }
+    },
+    // Fetches payment methods and unwraps whatever shape the API returns
+    // (paginated { results: [...] } or a bare array) - same pattern used for
+    // extraFees / freeDeliveries above. This was previously assigned directly,
+    // which silently broke rendering whenever the endpoint returned a
+    // paginated object instead of a bare array.
+    async getPaymentMethods() {
+      try {
+        const response = await paymentServices.getMethods();
+        this.paymentMethods =
+          response?.results || (Array.isArray(response) ? response : []);
+      } catch (e) {
+        this.paymentMethods = [];
+        this.toast.error("Payment methods could not be loaded.");
+      }
+    },
+  },
+  async mounted() {
+    await this.getPaymentMethods();
+    const result = await utilsServices.getCountries();
+    this.countries = result;
+    this.syncCountry();
+    this.handleUserInfo();
+    await Promise.all([this.getCartItems(), this.waitForUserInfoIfNeeded(), this.getExtraFees()]);
+    // begin_checkout / InitiateCheckout: the page is open and the bag is loaded.
+    analytics.beginCheckout(this.CartItems);
+  },
+  updated() {
+    if (authBus.userInfo && this.isUserLoading) {
+      this.handleUserInfo();
+    }
+  },
+  computed: {
+    // Read-only views onto the shared cart. Keeping the template's original
+    // names means nothing in the 900-line markup had to change.
+    CartItems() {
+      return this.cartItems;
+    },
+    total_price() {
+      return this.cartTotal;
+    },
+    totalItemsCount() {
+      return this.CartItems.reduce(
+        (sum, item) => sum + Number(item.quantity || 0),
+        0,
+      );
+    },
+    displayedPaymentMethods() {
+      return this.paymentMethods;
+    },
+    totalPrice() {
+      let total = this.total_price;
+      this.originalTotal = total + this.shippingCost + this.extraFeesTotal;
+      if (this.discount) {
+        if (this.discountType === "Percentage") {
+          total = total - (total * this.discount) / 100;
+        } else if (this.discountType === "Fixed Amount") {
+          total = total - Number(this.discount);
+        }
+      }
+
+      const shipping = this.isFreeDelivery ? 0 : this.shippingCost;
+      return total + shipping + this.extraFeesTotal;
+    },
+    isLoading() {
+      return this.cartLoading || this.needsUserInfo;
+    },
+    // only ask the user to pick a zone when the country actually exposes them
+    zoneRequired() {
+      return !!(
+        this.selectedCountry &&
+        this.selectedCountry.has_zones &&
+        this.selectedCountry.shipping_zones?.length
+      );
+    },
+    // Options for the Country DropdownSelect - value is the country object
+    // itself so selectCountry() keeps receiving what it always received.
+    countryOptions() {
+      return (this.countries || []).map((country) => ({
+        label: country.country_name,
+        value: country,
+      }));
+    },
+    // Options for the Zone DropdownSelect - value is the zone object itself
+    // so selectZone() keeps receiving what it always received.
+    zoneOptions() {
+      return (this.selectedCountry?.shipping_zones || []).map((zone) => ({
+        label: zone.name,
+        value: zone,
+      }));
+    },
+    selectedAddress() {
+      return this.selectedAddressIndex !== null
+        ? this.userAddresses[this.selectedAddressIndex]
+        : null;
+    },
+    shippingCost() {
+      // If an address is selected, return its shipping fee
+      if (
+        this.selectedAddressIndex !== null &&
+        this.userAddresses[this.selectedAddressIndex]
+      ) {
+        return this.userAddresses[this.selectedAddressIndex].shipping_fee || 0;
+      }
+
+      // If the user has selected a zone, return the zone's shipping fee
+      if (this.selectedZone && this.selectedZone.shipment_price) {
+        return this.selectedZone.shipment_price || 0;
+      }
+
+      // If a zone is not selected, fall back to the country's shipping fee
+      if (this.selectedCountry) {
+        return this.selectedCountry.shipment_price || 0;
+      }
+
+      return 0; // Default fallback if nothing is selected
+    },
+    // Missing/invalid field labels for the "Your details" section, used to
+    // build a single combined message instead of showing one error at a time.
+    // Shrinks automatically as formErrors clears each field.
+    detailsErrorFields() {
+      const labels = {
+        email_required: "Email",
+        first_name: "First name",
+        last_name: "Last name",
+        ...(this.isLoggedIn ? {} : { mobile_number_required: "Phone number" }),
+      };
+      return Object.keys(labels)
+        .filter((key) => this.formErrors[key])
+        .map((key) => labels[key]);
+    },
+    // Standalone message shown only for a filled-but-wrong-format email.
+    // An empty email instead joins the combined "fill all required fields"
+    // line via detailsErrorFields, so it isn't duplicated here.
+    emailErrorMessage() {
+      return this.formErrors.email || "";
+    },
+    // Red border on the field for either error type (empty or invalid),
+    // separate from emailErrorMessage which only covers the invalid case.
+    emailHasError() {
+      return !!(this.formErrors.email || this.formErrors.email_required);
+    },
+    // Standalone message shown only for a filled-but-wrong-format number.
+    // An empty number instead joins the combined "fill all required fields"
+    // line via detailsErrorFields, so it isn't duplicated here.
+    phoneErrorMessage() {
+      if (this.isLoggedIn) return "";
+      return this.formErrors.mobile_number || "";
+    },
+    // Red border on the field for either error type (empty or invalid),
+    // separate from phoneErrorMessage which only covers the invalid case.
+    phoneHasError() {
+      if (this.isLoggedIn) return false;
+      return !!(this.formErrors.mobile_number || this.formErrors.mobile_number_required);
+    },
+    // Same idea for the "Delivery address" section.
+    deliveryErrorFields() {
+      const labels = {
+        country: "Country",
+        zone: "Zone",
+        city: "City",
+        address: "Street & area",
+      };
+      return Object.keys(labels)
+        .filter((key) => this.formErrors[key])
+        .map((key) => labels[key]);
+    },
+    isFormComplete() {
+      const isExistingAddressSelected =
+        typeof this.formData.address === "string"; // Ensure it's an ID
+
+      const isNewAddressValid =
+        this.formData.address &&
+        typeof this.formData.address === "object" &&
+        this.formData.address.address &&
+        this.formData.address.city &&
+        this.formData.address.country &&
+        this.formData.address.postal_code &&
+        (!this.zoneRequired || this.formData.address.zone);
+
+      const isPhoneValid =
+        this.phoneNumberResults && this.phoneNumberResults.isValid; //check if phone number is valid
+
+      const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; //email validation
+      const isEmailValid = emailPattern.test(this.formData.email);
+
+      return (
+        this.formData.first_name &&
+        this.formData.last_name &&
+        isEmailValid &&
+        this.formData.payment_method_id &&
+        isPhoneValid &&
+        (isExistingAddressSelected || isNewAddressValid) //accept either an address ID or a new address
+      );
+    },
+
+    syncedCart() {
+      return this.CartItems;
+    },
+  },
+
+  watch: {
+    // Only lifts the red state on the phone field once the number actually
+    // validates, instead of clearing on the first keystroke.
+    phoneNumberResults(results) {
+      if (this.formErrors.mobile_number && results?.isValid) {
+        this.clearFieldError("mobile_number");
+      }
+    },
+    "userStore.clientIpInfo": {
+      handler() {
+        this.syncCountry();
+      },
+      deep: true,
+      immediate: true,
+    },
+    selectedCountry(newCountry, oldCountry) {
+      if (newCountry && oldCountry && newCountry.id !== oldCountry.id) {
+        // If the country changes, reset the zone (and re-apply the hidden
+        // default zone when the new country has has_zones = false)
+        this.applyDefaultZone(newCountry);
+      }
+    },
+    selectedZone(newZone, oldZone) {
+      if (newZone && oldZone && newZone.id !== oldZone.id) {
+        // If the zone changes, ensure that the country is set correctly
+        if (!this.selectedCountry) {
+          // Optionally, set a fallback country if zone is selected without a country
+          this.selectedCountry = this.defaultCountry;
+        }
+      }
+    },
+    CartItems: {
+      handler(newCart) {
+        this.formData.cart = [...newCart]; // Update formData.cart whenever CartItems changes
+      },
+      deep: true, // Ensures nested changes are also detected
+    },
+  },
+};
+</script>
+<style scoped>
+/* Floating label fields: label sits inside the input and lifts to the
+   top of the row on focus or once the field has a value. */
+.floating-field {
+  position: relative;
+  padding: 22px 12px 9px;
+}
+
+.floating-input {
+  width: 100%;
+  border: 0;
+  background: transparent;
+  padding: 0;
+  font-size: 16px;
+  line-height: 20px;
+  outline: none;
+  color: inherit;
+}
+
+.floating-label {
+  position: absolute;
+  left: 12px;
+  right: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 14px;
+  line-height: 20px;
+  color: #6b7280;
+  pointer-events: none;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  transition: top 0.18s ease, font-size 0.18s ease, transform 0.18s ease, color 0.18s ease;
+}
+
+.floating-input:focus ~ .floating-label,
+.floating-input:not(:placeholder-shown) ~ .floating-label,
+.floating-input:-webkit-autofill ~ .floating-label,
+.floating-label.is-floated {
+  top: 7px;
+  transform: none;
+  font-size: 11px;
+  line-height: 15px;
+  color: #9ca3af;
+}
+
+
+@media (prefers-reduced-motion: reduce) {
+  .floating-label {
+    transition: none;
+  }
+}
+</style>