@crm-market/template-shared 1.0.6 → 1.0.8

package/components/Checkout/DeliveryMethodCard.vue

@@ -0,0 +1,66 @@
+<template>
+  <label class="dm-card" :class="{ active: selected }" :for="id">
+    <input :id="id" class="dm-radio" type="radio" :checked="selected" @change="$emit('select')" />
+    <span class="dm-icon"><i :class="icon"></i></span>
+    <span class="dm-body">
+      <span class="dm-title">{{ title }}</span>
+      <span v-if="time" class="dm-time">{{ time }}</span>
+    </span>
+    <span class="dm-price" :class="{ free: !price }">{{ price ? formatUah(price) : t('checkout.free') }}</span>
+  </label>
+</template>
+
+<script setup lang="ts">
+// Картка способу доставки (вся картка клікабельна)
+const props = defineProps<{ id: string; provider: string; title: string; time?: string; price?: number; selected: boolean }>();
+defineEmits<{ select: [] }>();
+const { t } = useI18n();
+
+const ICONS: Record<string, string> = {
+  nova_poshta: 'ri-send-plane-line',
+  ukrposhta: 'ri-mail-send-line',
+  meest: 'ri-map-pin-line',
+  courier: 'ri-truck-line',
+  pickup: 'ri-store-2-line',
+};
+const icon = computed(() => ICONS[props.provider] || 'ri-truck-line');
+</script>
+
+<style scoped lang="scss">
+.dm-card {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  height: 100%;
+  margin: 0;
+  padding: 14px 16px;
+  border: 2px solid #e7e7e7;
+  border-radius: 10px;
+  background: #fff;
+  cursor: pointer;
+  transition: border-color 0.15s, box-shadow 0.15s;
+  &:hover { border-color: var(--secondary-color); }
+  &.active {
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 3px rgba(74, 141, 22, 0.12);
+  }
+}
+.dm-radio { position: absolute; opacity: 0; pointer-events: none; }
+.dm-icon {
+  flex: 0 0 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  font-size: 20px;
+  color: var(--primary-color);
+  background: rgba(117, 179, 68, 0.15);
+}
+.active .dm-icon { color: #fff; background: var(--primary-color); }
+.dm-body { flex: 1; display: flex; flex-direction: column; min-width: 0; }
+.dm-title { font-weight: 600; line-height: 1.2; }
+.dm-time { font-size: 13px; color: #777; }
+.dm-price { font-weight: 600; white-space: nowrap; &.free { color: var(--primary-color); } }
+</style>

package/components/Checkout/DeliveryOptions.vue

@@ -0,0 +1,148 @@
+<template>
+  <div class="delivery-options checkout-card" data-field="delivery">
+    <h3>{{ t('checkout.deliveryTitle') }}</h3>
+
+    <div class="row g-2">
+      <div v-for="m in methods" :key="methodKey(m)" class="col-12 col-md-6">
+        <CheckoutDeliveryMethodCard
+          :id="`dl-${methodKey(m)}`"
+          :provider="methodKey(m)"
+          :title="m.label || providerLabel(methodKey(m))"
+          :time="m.time"
+          :price="methodPrice(m)"
+          :selected="model.provider === methodKey(m)"
+          @select="model.provider = methodKey(m)"
+        />
+      </div>
+    </div>
+    <!-- Поки опції не завантажені (SSR/перший рендер) — не лякаємо «не налаштовано» -->
+    <p v-if="!options" class="text-muted mt-2 mb-0"><span class="spinner-border spinner-border-sm me-2" role="status"></span>{{ t('checkout.loadingOptions') }}</p>
+    <p v-else-if="!methods.length" class="text-muted mt-2 mb-0">{{ t('checkout.noDelivery') }}</p>
+    <div v-if="errors.delivery" class="invalid-feedback d-block">{{ errors.delivery }}</div>
+
+    <!-- Панель полів вибраного способу -->
+    <div v-if="model.provider" class="dl-panel mt-3">
+      <!-- Нова Пошта: місто -> відділення -->
+      <template v-if="isWarehouse">
+        <div class="form-group mb-3" data-field="city">
+          <label class="label">{{ t('checkout.city') }} *</label>
+          <CheckoutCityAutocomplete
+            v-model="model.cityQuery"
+            :items="cityItems"
+            :loading="searchingCities"
+            :error="citiesError"
+            :invalid="!!errors.city"
+            :show-empty="cityQueryReady"
+            :placeholder="t('checkout.cityPlaceholder')"
+            @input="onCityInput"
+            @pick="pickCity"
+          />
+          <div v-if="errors.city" class="invalid-feedback d-block">{{ errors.city }}</div>
+        </div>
+        <div class="form-group mb-0" data-field="warehouse">
+          <label class="label">{{ t('checkout.warehouse') }} *</label>
+          <CheckoutCityAutocomplete
+            v-model="model.warehouseQuery"
+            :items="warehouseItems"
+            :loading="loadingWarehouses"
+            :invalid="!!errors.warehouse"
+            :show-empty="!!model.city"
+            :placeholder="model.city ? t('checkout.warehousePlaceholder') : t('checkout.pickCityFirst')"
+            @input="model.warehouse = null"
+            @pick="pickWarehouse"
+          />
+          <div v-if="errors.warehouse" class="invalid-feedback d-block">{{ errors.warehouse }}</div>
+        </div>
+      </template>
+
+      <!-- Самовивіз -->
+      <div v-else-if="model.provider === 'pickup'" data-field="pickup">
+        <CheckoutPickupPoints v-model="model.pickupPoint" :points="pickupPoints" :error="errors.pickup" />
+      </div>
+
+      <!-- Кур'єр / Укрпошта / інше -->
+      <template v-else>
+        <CheckoutAddressFields v-model="model" :errors="errors" :postcode="needsPostcode(model.provider)" :street-mode="model.provider === 'courier'" />
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, watch } from 'vue';
+import type { DeliveryState, FieldErrors } from './types';
+
+// Спосіб доставки (картки) + панель полів саме для нього
+defineProps<{ errors: FieldErrors }>();
+const model = defineModel<DeliveryState>({ required: true });
+const { t } = useI18n();
+const {
+  options, providerLabel, hasWarehouseFlow, needsPostcode,
+  cities, searchCities, searchingCities, citiesError, warehouses, loadWarehouses, loadingWarehouses,
+} = useCheckout();
+
+const methods = computed(() => options.value?.delivery || []);
+const methodKey = (m: any): string => m.value || m.provider;
+// Для кур'єра ціна — courierDeliveryPrice, якщо задана
+const methodPrice = (m: any): number =>
+  methodKey(m) === 'courier' && m.courierDeliveryPrice != null ? m.courierDeliveryPrice : m.price || 0;
+const isWarehouse = computed(() => hasWarehouseFlow(model.value.provider));
+const pickupPoints = computed(
+  () => (methods.value.find((m) => methodKey(m) === 'pickup')?.points as any[]) || [],
+);
+
+const cityItems = computed(() =>
+  (cities.value || []).map((c: any) => ({ key: c.ref, title: c.name, sub: c.region, raw: c })),
+);
+const cityQueryReady = computed(
+  () => !model.value.city && model.value.cityQuery.trim().length >= 2 && !searchingCities.value && !citiesError.value,
+);
+
+// Відділень може бути тисячі — фільтруємо на клієнті, показуємо до 60
+const warehouseItems = computed(() => {
+  const q = model.value.warehouseQuery.trim().toLowerCase();
+  const list = warehouses.value || [];
+  const res = q && !model.value.warehouse ? list.filter((w: any) => (w.description || '').toLowerCase().includes(q)) : list;
+  return res.slice(0, 60).map((w: any) => ({ key: w.ref, title: w.description, raw: w }));
+});
+
+// Зміна способу — скидаємо залежні поля
+watch(
+  () => model.value.provider,
+  () => {
+    const m = model.value;
+    m.cityQuery = ''; m.city = null; m.warehouseQuery = ''; m.warehouse = null;
+    m.pickupPoint = null; cities.value = []; warehouses.value = [];
+  },
+);
+
+let timer: ReturnType<typeof setTimeout> | null = null;
+const onCityInput = () => {
+  const m = model.value;
+  m.city = null; m.warehouse = null; m.warehouseQuery = ''; warehouses.value = [];
+  if (timer) clearTimeout(timer);
+  timer = setTimeout(() => searchCities(m.provider, m.cityQuery), 350);
+};
+
+const pickCity = async (c: any) => {
+  const m = model.value;
+  m.city = { ref: c.ref, name: c.name };
+  m.cityQuery = c.name + (c.region ? `, ${c.region}` : '');
+  m.warehouse = null; m.warehouseQuery = '';
+  await loadWarehouses(m.provider, c.ref);
+};
+
+const pickWarehouse = (w: any) => {
+  model.value.warehouse = { ref: w.ref, description: w.description };
+  model.value.warehouseQuery = w.description;
+};
+</script>
+
+<style scoped lang="scss">
+.dl-panel {
+  padding: 16px;
+  border-radius: 10px;
+  background: #f8faf5;
+  border: 1px solid rgba(117, 179, 68, 0.3);
+}
+</style>

package/components/Checkout/OrderSummary.vue

@@ -0,0 +1,116 @@
+<template>
+  <aside class="order-summary">
+    <h3>{{ t('checkout.yourOrder') }}</h3>
+    <ul class="os-items list-unstyled">
+      <li v-for="item in cart.items" :key="item.productId" class="os-item">
+        <div class="os-thumb">
+          <img v-if="item.image" :src="item.image" :alt="item.name" loading="lazy" />
+          <i v-else class="ri-image-line"></i>
+          <span class="os-qty">{{ item.quantity }}</span>
+        </div>
+        <div class="os-name">
+          <span>{{ item.name }}</span>
+          <small class="text-muted d-block">
+            {{ formatUah(unitPrice(item)) }}
+            <del v-if="unitPrice(item) < item.price" class="ms-1">{{ formatUah(item.price) }}</del>
+            × {{ item.quantity }}{{ item.unit ? ' ' + item.unit : '' }}
+          </small>
+        </div>
+        <div class="os-sum">{{ formatUah(unitPrice(item) * item.quantity) }}</div>
+      </li>
+    </ul>
+
+    <CheckoutPromoCode :buyer="buyer" />
+
+    <dl class="os-totals">
+      <div class="os-row"><dt>{{ t('checkout.sumGoods') }}</dt><dd>{{ formatUah(subtotal + totalDiscount) }}</dd></div>
+      <div v-if="totalDiscount > 0" class="os-row os-discount">
+        <dt>{{ t('checkout.itemsDiscount') }}</dt><dd>−{{ formatUah(totalDiscount) }}</dd>
+      </div>
+      <div v-if="promoDiscount > 0" class="os-row os-discount">
+        <dt>{{ t('checkout.promoApplied', { code: promo!.code }) }}</dt><dd>−{{ formatUah(promoDiscount) }}</dd>
+      </div>
+      <div class="os-row">
+        <dt>{{ t('checkout.sumDelivery') }}</dt>
+        <dd v-if="freeShipping" class="os-discount">{{ t('checkout.freeShipping') }}</dd>
+        <dd v-else-if="deliveryCost != null">{{ deliveryCost ? formatUah(deliveryCost) : t('checkout.free') }}</dd>
+        <dd v-else class="text-muted small">{{ delivery?.provider ? t('checkout.byCarrierTariffs') : '—' }}</dd>
+      </div>
+      <div class="os-row os-total"><dt>{{ t('checkout.sumTotal') }}</dt><dd>{{ formatUah(total) }}</dd></div>
+    </dl>
+    <slot />
+  </aside>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { DeliveryState } from './types';
+import type { PromoBuyer } from '../../composables/useCheckout';
+
+// Підсумок: товари, знижки (акції + промокод), доставка (відома лише для кур'єра/фіксованої ціни), разом; слот — помилки та кнопка
+const props = defineProps<{ delivery?: DeliveryState; buyer?: PromoBuyer }>();
+const { t } = useI18n();
+const { cart, subtotal, totalDiscount, unitPrice } = useCart();
+const { options, promo } = useCheckout();
+
+// Промокод: знижка не більша за суму товарів; freeShipping обнуляє доставку
+const promoDiscount = computed(() => Math.min(promo.value?.discountAmount || 0, subtotal.value));
+const freeShipping = computed(() => !!promo.value?.freeShipping);
+
+const deliveryCost = computed<number | null>(() => {
+  const p = props.delivery?.provider;
+  if (!p) return null;
+  const m: any = options.value?.delivery.find((d: any) => (d.value || d.provider) === p);
+  if (!m) return null;
+  if (p === 'pickup') return 0;
+  if (p === 'courier') return m.courierDeliveryPrice ?? m.price ?? 0;
+  return null; // НП/Укрпошта/Meest — за тарифами перевізника
+});
+
+const total = computed(() =>
+  Math.max(0, subtotal.value - promoDiscount.value) + (freeShipping.value ? 0 : deliveryCost.value || 0),
+);
+</script>
+
+<style scoped lang="scss">
+.order-summary {
+  padding: 24px;
+  border: 1px solid #e7e7e7;
+  border-radius: 12px;
+  background: #fff;
+}
+.os-items { max-height: 340px; overflow: auto; margin-bottom: 16px; }
+.os-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #f0f0f0; }
+.os-thumb {
+  position: relative;
+  flex: 0 0 56px;
+  height: 56px;
+  border: 1px solid #eee;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #bbb;
+  img { width: 100%; height: 100%; object-fit: cover; border-radius: 7px; }
+}
+.os-qty {
+  position: absolute;
+  top: -8px;
+  right: -8px;
+  min-width: 20px;
+  height: 20px;
+  padding: 0 5px;
+  border-radius: 10px;
+  background: var(--primary-color);
+  color: #fff;
+  font-size: 12px;
+  line-height: 20px;
+  text-align: center;
+}
+.os-name { flex: 1; min-width: 0; line-height: 1.3; }
+.os-sum { font-weight: 600; white-space: nowrap; }
+.os-totals { margin: 0 0 20px; }
+.os-row { display: flex; justify-content: space-between; padding: 6px 0; dt, dd { margin: 0; font-weight: 400; } }
+.os-discount, .os-discount dd { color: var(--primary-color); }
+.os-total { margin-top: 6px; padding-top: 12px; border-top: 2px solid #eee; font-size: 20px; dt, dd { font-weight: 700; } dd { color: var(--primary-color); } }
+</style>

package/components/Checkout/PaymentOptions.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="payment-options checkout-card">
+    <h3>{{ t('checkout.paymentOption') }}</h3>
+    <div class="row g-2">
+      <div v-if="!options" class="col-12 text-muted"><span class="spinner-border spinner-border-sm me-2" role="status"></span>{{ t('checkout.loadingOptions') }}</div>
+      <div v-if="options && options.payment?.cashOnDelivery !== false" class="col-12 col-md-6">
+        <label class="pay-card" :class="{ active: payment === 'cod' }" for="pay-cod">
+          <input id="pay-cod" v-model="payment" class="pay-radio" type="radio" value="cod" />
+          <i class="ri-wallet-3-line pay-ico"></i>
+          <span><b class="d-block">{{ t('checkout.cashOnDelivery') }}</b><small class="text-muted">{{ t('checkout.codDesc') }}</small></span>
+        </label>
+      </div>
+      <div v-if="options?.payment?.online" class="col-12 col-md-6">
+        <label class="pay-card" :class="{ active: payment === 'online' }" for="pay-online">
+          <input id="pay-online" v-model="payment" class="pay-radio" type="radio" value="online" />
+          <i class="ri-bank-card-line pay-ico"></i>
+          <span>
+            <b class="d-block">{{ t('checkout.onlinePayment') }}</b>
+            <small class="text-muted">{{ providerNames || t('checkout.onlineDesc') }}</small>
+          </span>
+        </label>
+      </div>
+    </div>
+
+    <!-- Вибір платіжного провайдера, якщо увімкнено кілька -->
+    <div v-if="payment === 'online' && providers.length > 1" class="mt-3">
+      <div class="label mb-2">{{ t('checkout.chooseProvider') }}</div>
+      <div class="d-flex flex-wrap gap-2">
+        <label v-for="pp in providers" :key="pp.provider" class="prov-chip" :class="{ active: provider === pp.provider }" :for="`pp-${pp.provider}`">
+          <input :id="`pp-${pp.provider}`" v-model="provider" class="pay-radio" type="radio" :value="pp.provider" />
+          {{ pp.label }}
+        </label>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const payment = defineModel<'cod' | 'online'>('payment', { required: true });
+const provider = defineModel<string>('provider', { default: '' });
+const { t } = useI18n();
+const { options } = useCheckout();
+
+const providers = computed(() => options.value?.payment?.onlineProviders || []);
+const providerNames = computed(() => providers.value.map((p) => p.label).join(', '));
+</script>
+
+<style scoped lang="scss">
+.pay-card {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  height: 100%;
+  margin: 0;
+  padding: 14px 16px;
+  border: 2px solid #e7e7e7;
+  border-radius: 10px;
+  background: #fff;
+  cursor: pointer;
+  transition: border-color 0.15s, box-shadow 0.15s;
+  &:hover { border-color: var(--secondary-color); }
+  &.active { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(74, 141, 22, 0.12); }
+}
+.pay-radio { position: absolute; opacity: 0; pointer-events: none; }
+.pay-ico { font-size: 26px; color: var(--primary-color); }
+.prov-chip {
+  margin: 0;
+  padding: 6px 16px;
+  border: 2px solid #e7e7e7;
+  border-radius: 20px;
+  cursor: pointer;
+  &.active { border-color: var(--primary-color); color: var(--primary-color); font-weight: 600; }
+}
+</style>

package/components/Checkout/PickupPoints.vue

@@ -0,0 +1,46 @@
+<template>
+  <div>
+    <div v-if="points.length" class="row g-2">
+      <div v-for="(p, i) in points" :key="i" class="col-12">
+        <label class="pp-card" :class="{ active: model === p }" :for="`pp-${i}`">
+          <input :id="`pp-${i}`" v-model="model" class="pp-radio" type="radio" :value="p" />
+          <i class="ri-store-2-line pp-ico"></i>
+          <span class="d-block">
+            <b>{{ p.name }}</b>
+            <span v-if="p.city || p.address" class="d-block text-muted small">{{ [p.city, p.address].filter(Boolean).join(', ') }}</span>
+            <span v-if="p.workingHours" class="d-block small"><i class="ri-time-line me-1"></i>{{ p.workingHours }}</span>
+          </span>
+        </label>
+      </div>
+    </div>
+    <p v-else class="text-muted mb-0">{{ t('checkout.pickupDefault') }}</p>
+    <div v-if="error" class="invalid-feedback d-block">{{ error }}</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { DeliveryState } from './types';
+
+// Пункти самовивозу як radio-картки
+defineProps<{ points: any[]; error?: string }>();
+const model = defineModel<DeliveryState['pickupPoint']>({ required: true });
+const { t } = useI18n();
+</script>
+
+<style scoped lang="scss">
+.pp-card {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+  margin: 0;
+  padding: 12px 14px;
+  border: 2px solid #e7e7e7;
+  border-radius: 10px;
+  background: #fff;
+  cursor: pointer;
+  &:hover { border-color: var(--secondary-color); }
+  &.active { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(74, 141, 22, 0.12); }
+}
+.pp-radio { position: absolute; opacity: 0; pointer-events: none; }
+.pp-ico { font-size: 22px; color: var(--primary-color); }
+</style>

package/components/Checkout/PromoCode.vue

@@ -0,0 +1,166 @@
+<script setup lang="ts">
+import { ref, computed, watch, onBeforeUnmount } from 'vue';
+import type { PromoBuyer } from '../../composables/useCheckout';
+
+// Поле «Промокод» на оформленні: перевірка на сервері (POST promo-code/validate) з товарами
+// й уже введеними email/телефоном (персональні коди). Зміна кошика або контактів → повторна
+// перевірка (debounce): покупець бачить «код не для вас» ще до «Підтвердити замовлення».
+const props = defineProps<{ buyer?: PromoBuyer }>();
+const { t } = useI18n();
+const { cart } = useCart();
+const { promo, promoChecking, promoError, promoFromOrder, validatePromo, clearPromo } = useCheckout();
+
+const code = ref(promo.value?.code || '');
+const notice = ref('');
+const touched = ref(false);
+
+const items = () => cart.value.items.map((i) => ({ productId: i.productId, quantity: i.quantity }));
+
+const buyer = (): PromoBuyer => ({
+  ...(props.buyer?.email?.trim() ? { email: props.buyer.email.trim() } : {}),
+  ...(props.buyer?.phone ? { phone: props.buyer.phone } : {}),
+});
+
+// Помилка з бека (у т.ч. відмова при створенні замовлення); без тексту — загальна
+const errorText = computed(() => {
+  if (promo.value || promoChecking.value) return '';
+  if (promoError.value) return promoError.value;
+  return touched.value ? t('checkout.promoInvalid') : '';
+});
+
+// Сервер відхилив код при оформленні — повертаємо його в поле поруч із помилкою
+watch(promoFromOrder, (c) => {
+  if (c) code.value = c;
+});
+
+const apply = async () => {
+  if (!code.value.trim() || promoChecking.value) return;
+  notice.value = '';
+  touched.value = true;
+  await validatePromo(code.value, items(), buyer());
+};
+
+const onInput = () => {
+  touched.value = false;
+  promoError.value = '';
+};
+
+const remove = () => {
+  clearPromo();
+  code.value = '';
+  touched.value = false;
+  notice.value = '';
+};
+
+// Кошик або контакти змінились — перевіряємо застосований (чи щойно відхилений) код ще раз
+let timer: ReturnType<typeof setTimeout> | undefined;
+watch(
+  () =>
+    [
+      cart.value.items.map((i) => `${i.productId}:${i.quantity}`).join(','),
+      props.buyer?.email?.trim() || '',
+      props.buyer?.phone || '',
+    ].join('|'),
+  () => {
+    const pending = promo.value?.code || (touched.value && promoError.value ? code.value.trim() : '');
+    if (!pending) return;
+    clearTimeout(timer);
+    const wasApplied = !!promo.value;
+    timer = setTimeout(async () => {
+      const res = await validatePromo(pending, items(), buyer());
+      if (!res.valid && wasApplied) {
+        touched.value = true;
+        if (!res.message) notice.value = t('checkout.promoRemoved');
+      }
+    }, 600);
+  },
+);
+onBeforeUnmount(() => clearTimeout(timer));
+</script>
+
+<template>
+  <div class="promo-code" data-field="promo">
+    <label for="checkout-promo" class="form-label promo-code__label">{{ t('checkout.promoCode') }}</label>
+
+    <div v-if="promo" class="promo-code__applied">
+      <span>
+        <i class="ri-coupon-3-line"></i>
+        <b>{{ promo.code }}</b>
+        <template v-if="promo.discountAmount"> · −{{ formatUah(promo.discountAmount) }}</template>
+        <template v-if="promo.freeShipping"> · {{ t('checkout.freeShipping') }}</template>
+      </span>
+      <button type="button" class="promo-code__remove" :aria-label="t('checkout.promoRemove')" @click="remove">
+        <i class="ri-close-line"></i>
+      </button>
+    </div>
+
+    <div v-else class="promo-code__row">
+      <input
+        id="checkout-promo"
+        v-model="code"
+        type="text"
+        class="form-control"
+        autocomplete="off"
+        autocapitalize="characters"
+        :placeholder="t('checkout.promoPlaceholder')"
+        :aria-invalid="!!errorText"
+        aria-describedby="checkout-promo-msg"
+        @input="onInput"
+        @keydown.enter.prevent="apply"
+      />
+      <button
+        type="button"
+        class="btn btn-outline-success promo-code__btn"
+        :disabled="!code.trim() || promoChecking"
+        @click="apply"
+      >
+        <span v-if="promoChecking" class="spinner-border spinner-border-sm" aria-hidden="true"></span>
+        <span v-else>{{ t('checkout.promoApply') }}</span>
+      </button>
+    </div>
+
+    <div id="checkout-promo-msg" aria-live="polite">
+      <small v-if="errorText" class="text-danger d-block mt-1">{{ errorText }}</small>
+      <small v-else-if="notice" class="text-muted d-block mt-1">{{ notice }}</small>
+      <small v-if="promo?.requiresBuyer" class="text-muted d-block mt-1">
+        <i class="ri-user-line"></i> {{ t('checkout.promoRequiresBuyer') }}
+      </small>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.promo-code { margin-bottom: 16px; }
+.promo-code__label { font-weight: 600; margin-bottom: 6px; }
+.promo-code__row {
+  display: flex;
+  gap: 8px;
+  .form-control { min-height: 44px; text-transform: uppercase; }
+  .form-control::placeholder { text-transform: none; }
+  .form-control:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(74, 141, 22, 0.15); }
+}
+.promo-code__btn { min-height: 44px; min-width: 120px; white-space: nowrap; }
+.promo-code__applied {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 8px 8px 8px 12px;
+  border: 1px dashed var(--primary-color);
+  border-radius: 10px;
+  background: rgba(74, 141, 22, 0.06);
+  color: var(--primary-color);
+  i { margin-right: 4px; }
+}
+.promo-code__remove {
+  width: 36px;
+  height: 36px;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: #57636c;
+  font-size: 18px;
+  &:hover { background: #eef0f2; }
+  &:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 1px; }
+}
+</style>