npm - @osimart/create-storefront - Versions diffs - 1.0.3 → 1.0.7 - Mend

@osimart/create-storefront 1.0.3 → 1.0.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

package/app/app.vue +98 -12
package/app/components/SectionRenderer.vue +4 -8
package/app/composables/useCheckout.js +927 -48
package/app/composables/useContentTree.js +11 -2
package/app/composables/useStoreInit.js +1 -0
package/app/composables/useStorefront.js +16 -3
package/app/logic/layouts/default.js +2 -2
package/app/pages/checkout.vue +370 -1242
package/app/pages/login.vue +8 -3
package/app/services/CheckoutServices.js +7 -5
package/nuxt.config.ts +7 -1
package/package.json +1 -1

package/app/pages/checkout.vue CHANGED Viewed

@@ -28,9 +28,7 @@
             </div>
           </div>
           <div class="min-w-0 flex-1">
-            <p class="text-[13px] text-gray-500">
-   Order Summary
-            </p>
+            <p class="text-[13px] text-gray-500">Order Summary</p>
             <p class="text-base font-semibold">{{ currency }}{{ totalPrice }}</p>
           </div>
           <svg
@@ -53,78 +51,79 @@
         <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>
+            <div
+              v-for="item in CartItems"
+              :key="`strip-item-${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>
-    </div>
-  </div>
-  <span class="whitespace-nowrap text-[13px]">{{ currency }}{{ item.total_price }}</span>
-</div>
+                  <button
+                    type="button"
+                    class="flex items-center justify-center gap-1 text-[12px] text-gray-400 opacity-100 transition-opacity duration-200 hover:text-red-500 disabled:opacity-40 md:opacity-0 md:focus-visible:opacity-100 md:group-hover: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">
+              <div v-if="!promo_id" 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"
+                  @input="promoError = ''"
+                  @keyup.enter="applyPromoCode"
                 />
                 <button
                   type="button"
-                  class="h-10 flex-shrink-0 rounded-xl border border-gray-300 bg-white px-4 text-sm font-medium"
+                  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"
                 >
@@ -133,11 +132,15 @@
                 </button>
               </div>
               <div v-else class="flex items-center justify-between">
-                <p class="text-sm text-green-600">Promo applied: {{ promoCode }}</p>
+                <p class="text-sm text-green-600">
+                  Promo applied: {{ appliedPromoCode }}
+                  <span v-if="isCodeLoading" class="ml-1 inline-block h-3 w-3 animate-spin rounded-full border-2 border-gray-200 border-t-primaryColor align-middle"></span>
+                </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>
+              <p v-if="promoError" class="mt-1.5 text-xs text-red-500">{{ promoError }}</p>
             </div>
             <!-- totals -->
@@ -155,12 +158,9 @@
               <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">
+              <div v-if="discount > 0" 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>
+                <dd>-{{ currency }}{{ discount.toFixed(2) }}</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>
@@ -310,7 +310,7 @@
               <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
+              <router-link
                 v-if="!isLoggedIn"
                 :to="{ path: '/login', query: { redirect: $route.fullPath } }"
                 class="text-xs text-green-500 underline"
@@ -477,9 +477,7 @@
           <!-- ===== 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>
+              <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>
@@ -490,11 +488,10 @@
               :class="formErrors.payment_method_id ? 'bg-red-50' : 'border-gray-300 bg-white'"
             >
               <label
-                v-for="(option, index) in displayedPaymentMethods"
+                v-for="(option, index) in paymentMethods"
                 :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"
@@ -518,7 +515,7 @@
               <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" />
+            <ExtraFees :fees="extraFees" :subtotal="total_price" @change="onExtraFeesChange" />
           </section>
         </template>
       </div>
@@ -526,125 +523,126 @@
       <!-- ---------------- 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>
+          <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>
+            <!-- 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>
+            <!-- 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>
+            <!-- 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>
+            <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>
+            <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>
-    </div>
-  </div>
-  <span class="whitespace-nowrap text-[13px]">{{ currency }}{{ item.total_price }}</span>
-</div>
+                  <button
+                    type="button"
+                    class="flex items-center gap-1 font-body text-[12px] text-gray-400 opacity-100 transition-opacity duration-200 hover:text-red-500 disabled:opacity-40 md:opacity-0 md:focus-visible:opacity-100 md:group-hover: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">
+              <div v-if="!promo_id" 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"
+                  @input="promoError = ''"
+                  @keyup.enter="applyPromoCode"
                 />
                 <button
                   type="button"
-                  class="h-9 flex-shrink-0 flex justify-center items-center rounded-lg border border-gray-300 px-4 text-[13px]"
+                  class="flex h-9 flex-shrink-0 items-center justify-center rounded-lg border border-gray-300 px-4 text-[13px]"
                   :disabled="isCodeLoading"
                   @click="applyPromoCode"
                 >
@@ -653,11 +651,15 @@
                 </button>
               </div>
               <div v-else class="flex items-center justify-between">
-                <p class="text-[13px] text-green-600">Promo applied: {{ promoCode }}</p>
+                <p class="text-[13px] text-green-600">
+                  Promo applied: {{ appliedPromoCode }}
+                  <span v-if="isCodeLoading" class="ml-1 inline-block h-3 w-3 animate-spin rounded-full border-2 border-gray-200 border-t-primaryColor align-middle"></span>
+                </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>
+              <p v-if="promoError" class="mt-1.5 text-xs text-red-500">{{ promoError }}</p>
             </div>
             <!-- totals -->
@@ -675,12 +677,9 @@
               <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">
+              <div v-if="discount > 0" 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>
+                <dd>-{{ currency }}{{ discount.toFixed(2) }}</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>
@@ -690,7 +689,7 @@
             <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 v-if="discount > 0" class="text-[13px] text-gray-400 line-through">{{ currency }}{{ originalTotal }}</span>
                 <span class="text-xl font-semibold">{{ currency }}{{ totalPrice }}</span>
               </div>
             </div>
@@ -701,7 +700,8 @@
             <button
               v-else
               type="button"
-              class="osi-btn osi-btn--block mt-4"
+              class="osi-btn osi-btn--block mt-4 disabled:cursor-not-allowed disabled:opacity-50"
+              :disabled="!canPay"
               @click="submitForm"
             >
               Complete order
@@ -771,92 +771,98 @@
             @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>
+              <!-- 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 h-7 w-7 items-center justify-center text-gray-500 disabled:opacity-40"
+                      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="Increase quantity"
-                      @click="increaseQuantity(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="2" stroke="currentColor" class="w-3.5">
-                        <path stroke-linecap="round" d="M12 5v14M5 12h14" />
+                      <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="!promo_id" 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"
+                    @input="promoError = ''"
+                    @keyup.enter="applyPromoCode"
+                  />
                   <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)"
+                    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"
                   >
-                    <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>
+                    <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: {{ appliedPromoCode }}
+                    <span v-if="isCodeLoading" class="ml-1 inline-block h-3 w-3 animate-spin rounded-full border-2 border-gray-200 border-t-primaryColor align-middle"></span>
+                  </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>
+                <p v-if="promoError" class="mt-1.5 text-xs text-red-500">{{ promoError }}</p>
               </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>
@@ -878,12 +884,9 @@
             <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">
+            <div v-if="discount > 0" 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>
+              <dd>-{{ currency }}{{ discount.toFixed(2) }}</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>
@@ -891,14 +894,11 @@
           </dl>
           <div class="mb-2.5 mt-3 flex items-end justify-between border-t border-gray-200 pt-3">
-            <div>
-              <p>Total</p>
+            <p>Total</p>
+            <div class="flex items-baseline gap-2">
+              <span v-if="discount > 0" class="text-[13px] text-gray-400 line-through">{{ currency }}{{ originalTotal }}</span>
+              <span class="text-lg font-semibold">{{ currency }}{{ totalPrice }}</span>
             </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">
@@ -907,7 +907,8 @@
           <button
             v-else
             type="button"
-            class="osi-btn osi-btn--block"
+            class="osi-btn osi-btn--block disabled:cursor-not-allowed disabled:opacity-50"
+            :disabled="!canPay"
             @click="submitForm"
           >
             Complete order
@@ -928,994 +929,120 @@
     />
   </div>
 </template>
-<script>
-import checkoutServices from "#osi/services/CheckoutServices";
-import { authBus } from "#osi/services/AuthBus";
-import utilsServices from "#osi/services/UtilsServices";
+<script setup>
 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 ExtraFees from "~/components/checkout/ExtraFees.vue";
+import PaymentHandoff from "~/components/checkout/PaymentHandoff.vue";
+import PhoneNumInput from "~/components/common/PhoneNumInput.vue";
+import DropdownSelect from "~/components/common/DropdownSelect.vue";
 import { useHead } from "#imports";
-import { useUserStore } from "#osi/stores/userStore";
-import { analytics } from "#osi/utils/analytics";
+import { useCheckout } from "~/composables/useCheckout";
 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",
+// Multi-tenant: the description comes from the resolved store.
+const { store } = useStorefront();
+const storeName = computed(() => store.value?.name || "");
+useHead({
+  title: "Checkout",
+  meta: [
+    {
+      name: "description",
+      content: computed(() =>
+        storeName.value
+          ? `Complete your ${storeName.value} purchase securely.`
+          : "Complete your purchase securely.",
       ),
-      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;
     },
+    { name: "robots", content: "noindex, nofollow" },
+    { property: "og:type", content: "website" },
+    { name: "twitter:card", content: "summary" },
+  ],
+});
-    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
-    },
-  },
-};
+const {
+  // display
+  currency,
+  imageUrl,
+  isLoading,
+  mobileSummaryOpen,
+  bottomDiscountOpen,
+  accordionEnter,
+  accordionLeave,
+  accordionAfterEnter,
+  // cart
+  CartItems,
+  total_price,
+  totalItemsCount,
+  isItemUpdating,
+  increaseQuantity,
+  decreaseQuantity,
+  deleteItem,
+  // user + form
+  isLoggedIn,
+  formData,
+  formErrors,
+  clearFieldError,
+  validateEmailField,
+  onPhoneUpdate,
+  detailsErrorFields,
+  deliveryErrorFields,
+  emailErrorMessage,
+  emailHasError,
+  phoneErrorMessage,
+  phoneHasError,
+  // address + shipping
+  userAddresses,
+  selectedAddressIndex,
+  selectedAddress,
+  showAddressForm,
+  selectAddress,
+  toggleAddressForm,
+  countryOptions,
+  zoneOptions,
+  zoneRequired,
+  selectedCountry,
+  selectedZone,
+  selectCountry,
+  selectZone,
+  shippingCost,
+  isShippingLoading,
+  isFreeDelivery,
+  // payment method
+  paymentMethods,
+  isSelected,
+  setPaymentMethod,
+  // extra fees
+  extraFees,
+  extraFeeLines,
+  onExtraFeesChange,
+  // promo
+  promoCode,
+  appliedPromoCode,
+  promo_id,
+  discount,
+  promoError,
+  isCodeLoading,
+  applyPromoCode,
+  removePromo,
+  // totals + order
+  originalTotal,
+  totalPrice,
+  canPay,
+  isCheckingOut,
+  submitForm,
+  // gateway
+  activePayment,
+  onPaymentError,
+  onPaymentSettled,
+  onPaymentDeclined,
+  closePayment,
+} = useCheckout();
 </script>
 <style scoped>
 /* Floating label fields: label sits inside the input and lifts to the
@@ -1952,6 +1079,8 @@ export default {
   transition: top 0.18s ease, font-size 0.18s ease, transform 0.18s ease, color 0.18s ease;
 }
+/* Text inputs float on focus or once filled; dropdowns float only once an
+   option is actually selected (is-floated). */
 .floating-input:focus ~ .floating-label,
 .floating-input:not(:placeholder-shown) ~ .floating-label,
 .floating-input:-webkit-autofill ~ .floating-label,
@@ -1963,7 +1092,6 @@ export default {
   color: #9ca3af;
 }
 @media (prefers-reduced-motion: reduce) {
   .floating-label {
     transition: none;