@crm-market/template-shared 1.0.6 → 1.0.8

package/components/Checkout/index.vue

@@ -1,190 +1,252 @@
 <template>
   <div class="ptb-60">
     <div class="container">
-      <div class="row">
-        <div class="col-lg-5">
-          <div class="checkout-content">
-            <h3>{{ t('checkout.billingDetails') }}</h3>
-            <div class="form-group mb-4">
-              <label class="label">{{ t('checkout.firstName') }}</label>
-              <input
-                type="text"
-                class="form-control"
-                :placeholder="t('checkout.firstName')"
-              />
-            </div>
-            <div class="form-group mb-4">
-              <label class="label">{{ t('checkout.lastName') }}</label>
-              <input type="text" class="form-control" :placeholder="t('checkout.lastName')" />
-            </div>
-            <div class="form-group mb-4">
-              <label class="label">{{ t('checkout.emailAddress') }}</label>
-              <input
-                type="email"
-                class="form-control"
-                :placeholder="t('checkout.emailAddress')"
-              />
-            </div>
-            <div class="form-group mb-4">
-              <label class="label">{{ t('checkout.companyName') }}</label>
-              <input
-                type="text"
-                class="form-control"
-                :placeholder="t('checkout.companyName')"
-              />
-            </div>
-            <div class="form-group mb-4">
-              <label class="label">{{ t('checkout.countryRegion') }}</label>
-              <input
-                type="text"
-                class="form-control"
-                :placeholder="t('checkout.countryRegion')"
-              />
-            </div>
-            <div class="form-group mb-4">
-              <label class="label">{{ t('checkout.countryRegion') }}</label>
-              <select
-                class="form-select form-control"
-                aria-label="Default select example"
-              >
-                <option selected>Canada</option>
-                <option value="1">United States</option>
-                <option value="2">United Kingdom</option>
-              </select>
-            </div>
-            <div class="form-group mb-4">
-              <label class="label">{{ t('checkout.streetAddress') }}</label>
-              <input
-                type="text"
-                class="form-control"
-                :placeholder="t('checkout.addressLine1')"
-              />
-            </div>
-            <div class="form-group mb-4">
-              <input
-                type="text"
-                class="form-control"
-                :placeholder="t('checkout.addressLine2')"
-              />
-            </div>
-            <div class="form-group mb-4">
-              <label class="label">{{ t('checkout.townCity') }}</label>
-              <input type="text" class="form-control" :placeholder="t('checkout.townCity')" />
-            </div>
-            <div class="form-group mb-4">
-              <label class="label">{{ t('checkout.postalCode') }}</label>
-              <input
-                type="text"
-                class="form-control"
-                :placeholder="t('checkout.postalCode')"
-              />
-            </div>
-            <div class="form-group mb-4">
-              <label class="label">{{ t('checkout.phone') }}</label>
-              <input type="text" class="form-control" :placeholder="t('checkout.phone')" />
-            </div>
-            <div class="form-group mb-4">
-              <label class="label">{{ t('checkout.additionalInfo') }}</label>
-              <textarea
-                class="form-control"
-                :placeholder="t('checkout.notes')"
-                cols="30"
-                rows="5"
-              ></textarea>
-            </div>
-          </div>
+      <ClientOnly>
+        <!-- Порожній кошик -->
+        <div v-if="isEmpty" class="text-center py-5">
+          <h3 class="mb-3">{{ t('cart.empty') }}</h3>
+          <NuxtLink to="/products" class="btn btn-warning text-white">
+            {{ t('cart.toCatalog') }}
+            <i class="flaticon-up-right-arrow"></i>
+          </NuxtLink>
         </div>
 
-        <div class="col-lg-7">
-          <div class="your-order">
-            <h3>{{ t('checkout.yourOrder') }}</h3>
-
-            <div class="your-order-form table-responsive bg-fffbf5">
-              <table class="table table-bordered">
-                <thead>
-                  <tr>
-                    <th scope="col">{{ t('product.product') }}</th>
-                    <th scope="col">{{ t('product.quantity') }}</th>
-                    <th scope="col">{{ t('product.subtotal') }}</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  <tr>
-                    <td class="title">
-                      <span class="text-truncate">
-                        Multiplatform Wireless Noise-Cancelling Gaming Headset
-                      </span>
-                    </td>
-                    <td class="price">$79 <sub class="text-body">x1</sub></td>
-                    <td class="price">$79</td>
-                  </tr>
-                  <tr>
-                    <td class="title">
-                      <span class="text-truncate">
-                        GPS Smartwatch with Bright Touchscreen Display
-                      </span>
-                    </td>
-                    <td class="price">$59 <sub class="text-body">x2</sub></td>
-                    <td class="price">$119</td>
-                  </tr>
-                  <tr>
-                    <td class="title">
-                      <span class="text-truncate">
-                        SAMSUNG 32-Inch Class QLED 4K Q60C Series Quantum HDR
-                      </span>
-                    </td>
-                    <td class="price">$398 <sub class="text-body">x1</sub></td>
-                    <td class="price">$398</td>
-                  </tr>
-                  <tr>
-                    <td class="sub-title">{{ t('cart.subtotal') }}</td>
-                    <td class="sub-price"></td>
-                    <td class="sub-price">$595</td>
-                  </tr>
-                  <tr class="total">
-                    <td class="sub-title">{{ t('cart.total') }}</td>
-                    <td class="sub-price"></td>
-                    <td class="sub-price">$595</td>
-                  </tr>
-                </tbody>
-              </table>
-
-              <h3>{{ t('checkout.paymentOption') }}</h3>
-              <div class="form-check">
-                <input
-                  class="form-check-input"
-                  type="checkbox"
-                  value=""
-                  id="flexCheckDefault"
-                />
-                <label class="form-check-label" for="flexCheckDefault">
-                  {{ t('checkout.cardPayment') }}
-                </label>
-              </div>
-              <div class="form-check mb-0">
-                <input
-                  class="form-check-input"
-                  type="checkbox"
-                  value=""
-                  id="flexCheckChecked"
-                  checked
-                />
-                <label class="form-check-label" for="flexCheckChecked">
-                  {{ t('checkout.cashOnDelivery') }}
-                </label>
-              </div>
+        <form v-else novalidate @submit.prevent="submit">
+          <div class="row g-4">
+            <div class="col-lg-7">
+              <CheckoutForm v-model="contact" :errors="errors" />
+              <CheckoutDeliveryOptions v-model="delivery" :errors="errors" class="mt-4" />
+              <CheckoutPaymentOptions v-model:payment="payment" v-model:provider="payProvider" class="mt-4" />
+            </div>
+            <div class="col-lg-5">
+              <div class="summary-sticky">
+                <CheckoutOrderSummary :delivery="delivery" :buyer="promoBuyer">
+                  <div v-if="errorText" class="alert alert-danger mb-3">{{ errorText }}</div>
+                  <div v-if="errors.cart" class="alert alert-danger mb-3">{{ errors.cart }}</div>
 
-              <div class="mt-5">
-                <button class="btn btn-warning text-white">{{ t('checkout.placeOrder') }}</button>
+                  <button type="submit" class="btn btn-warning text-white w-100 submit-btn" :disabled="submitting">
+                    <span v-if="submitting" class="spinner-border spinner-border-sm me-2" aria-hidden="true"></span>
+                    {{ submitting ? t('checkout.placing') : t('checkout.placeOrder') }}
+                  </button>
+                  <NuxtLink to="/cart" class="btn btn-link w-100 mt-2">{{ t('checkout.backToCart') }}</NuxtLink>
+                </CheckoutOrderSummary>
               </div>
             </div>
           </div>
+        </form>
+
+        <!-- Платежі вимкнено глобально (403 PAYMENTS_DISABLED) -->
+        <div v-if="paymentsDisabled" class="pay-modal" role="dialog" aria-modal="true" @click.self="paymentsDisabled = false">
+          <div class="pay-modal-box">
+            <h4>{{ t('checkout.paymentsDisabledTitle') }}</h4>
+            <p class="text-muted">{{ t('checkout.paymentsDisabledText') }}</p>
+            <button type="button" class="btn btn-warning text-white" @click="paymentsDisabled = false">
+              {{ t('checkout.close') }}
+            </button>
+          </div>
         </div>
-      </div>
+
+        <template #fallback>
+          <div class="text-center py-5 text-muted">{{ t('cart.loading') }}</div>
+        </template>
+      </ClientOnly>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { reactive, ref, computed, nextTick, onMounted, watch } from 'vue';
+import { emptyDelivery, normalizePhone } from './types';
+import type { ContactState, DeliveryState, FieldErrors } from './types';
+
 const { t } = useI18n();
+const router = useRouter();
+const { cart, isEmpty, priceListId, clearCart, syncPrices } = useCart();
+const { fetchProductsByIds } = useProducts();
+const {
+  options, loadOptions, hasWarehouseFlow, needsPostcode, normalizeDelivery,
+  submitting, errorMsg, errorCode, submitOrder, payOrder, promo, clearPromo, promoFromOrder,
+} = useCheckout();
+
+const contact = reactive<ContactState>({ name: '', phone: '', email: '', comment: '' });
+const delivery = reactive<DeliveryState>(emptyDelivery());
+const payment = ref<'cod' | 'online'>('cod');
+const payProvider = ref('');
+const errors = ref<FieldErrors>({});
+const paymentsDisabled = ref(false);
+const generalError = ref('');
+const errorText = computed(() => generalError.value || errorMsg.value);
+// Контакти для перевірки персональних промокодів (телефон — лише коли формат валідний)
+const promoBuyer = computed(() => ({
+  email: /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(contact.email.trim()) ? contact.email.trim() : '',
+  phone: normalizePhone(contact.phone),
+}));
+
+onMounted(async () => {
+  // Свіжі ціни/знижки в кошику (паралельно з опціями доставки)
+  const ids = cart.value.items.map((i) => i.productId);
+  if (ids.length && !priceListId.value) fetchProductsByIds(ids).then(syncPrices).catch(() => {});
+  const opts = await loadOptions();
+  const first = opts.delivery[0];
+  delivery.provider = first ? (first as any).value || first.provider || '' : '';
+  // Якщо післяплата вимкнена, а онлайн доступний — стартуємо з онлайн
+  if (opts.payment.cashOnDelivery === false && opts.payment.online) payment.value = 'online';
+  payProvider.value = opts.payment.onlineProviders?.[0]?.provider || '';
+});
+
+// Онлайн вимкнули/недоступний — повертаємось на післяплату
+watch(options, (o) => {
+  if (payment.value === 'online' && !o?.payment?.online) payment.value = 'cod';
+});
+
+// Скрол до першого поля з помилкою (порядок: контакти -> доставка)
+const scrollToFirstError = async (e: FieldErrors) => {
+  await nextTick();
+  const order = ['name', 'phone', 'email', 'delivery', 'city', 'warehouse', 'pickup', 'address', 'postcode'];
+  const key = order.find((k) => e[k]);
+  if (!key) return;
+  const el = document.querySelector<HTMLElement>(`[data-field="${key}"]`);
+  el?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+  el?.querySelector<HTMLElement>('input, textarea')?.focus({ preventScroll: true });
+};
+
+// Валідація з повідомленнями українською
+const validate = (): boolean => {
+  const e: FieldErrors = {};
+  if (!cart.value.items.length) e.cart = t('checkout.errCart');
+  if (contact.name.trim().length < 2) e.name = t('checkout.errName');
+  if (!normalizePhone(contact.phone)) e.phone = t('checkout.errPhone');
+  if (!contact.email.trim()) e.email = t('checkout.errEmailRequired');
+  else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(contact.email.trim())) e.email = t('checkout.errEmail');
+  const p = delivery.provider;
+  if (!p) {
+    e.delivery = t('checkout.errDelivery');
+  } else if (hasWarehouseFlow(p)) {
+    if (!delivery.city) e.city = t('checkout.errCity');
+    else if (!delivery.warehouse) e.warehouse = t('checkout.errWarehouse');
+  } else if (p === 'pickup') {
+    const points = (options.value?.delivery.find((d: any) => (d.value || d.provider) === 'pickup') as any)?.points || [];
+    if (points.length && !delivery.pickupPoint) e.pickup = t('checkout.errPickup');
+  } else {
+    if (!delivery.cityText.trim()) e.city = t('checkout.errCity');
+    if (!delivery.address.trim()) e.address = t('checkout.errAddress');
+    if (needsPostcode(p) && !/^\d{5}$/.test(delivery.postcode.trim())) e.postcode = t('checkout.errPostcode');
+  }
+  errors.value = e;
+  const ok = Object.keys(e).length === 0;
+  if (!ok) scrollToFirstError(e);
+  return ok;
+};
+
+// Місто/адреса для buyerInfo залежно від способу доставки
+const buildAddress = () => {
+  const p = delivery.provider;
+  if (p === 'pickup') {
+    const pt = delivery.pickupPoint;
+    return pt
+      ? { city: pt.city || 'Самовивіз', address: `Самовивіз: ${pt.name}${pt.address ? ', ' + pt.address : ''}` }
+      : { city: 'Самовивіз', address: 'Самовивіз зі складу продавця' };
+  }
+  if (hasWarehouseFlow(p)) return { city: delivery.city!.name, address: delivery.warehouse!.description };
+  return {
+    city: delivery.cityText.trim(),
+    address: delivery.address.trim(),
+    ...(delivery.postcode.trim() ? { postalCode: delivery.postcode.trim() } : {}),
+  };
+};
+
+const submit = async () => {
+  if (submitting.value) return; // захист від дублікатів замовлень
+  generalError.value = '';
+  if (!validate()) return;
+
+  const name = contact.name.trim();
+  const sp = name.indexOf(' ');
+  const firstName = sp === -1 ? name : name.slice(0, sp);
+  const lastName = sp === -1 ? name : name.slice(sp + 1).trim() || name;
+
+  try {
+    const res = await submitOrder({
+      items: cart.value.items.map((i) => ({ productId: i.productId, quantity: i.quantity })),
+      ...(priceListId.value ? { priceListId: priceListId.value } : {}),
+      buyerInfo: {
+        firstName,
+        lastName,
+        phoneNumber: normalizePhone(contact.phone),
+        email: contact.email.trim(),
+        ...buildAddress(),
+      },
+      // Бек (CreateStorefrontOrderDto) очікує коментар у полі notes
+      ...(contact.comment.trim() ? { notes: contact.comment.trim() } : {}),
+      deliveryMethod: normalizeDelivery(delivery.provider),
+      paymentMethod: payment.value === 'online' ? 'online_payment' : 'cash_on_delivery',
+      // Промокод: сервер сам перевіряє його й рахує знижку (невалідний → 400 з повідомленням)
+      ...(promo.value?.code ? { promoCode: promo.value.code } : {}),
+    });
+    const orderId = res?.orderId || res?.id;
+    const orderNumber = res?.orderNumber || '';
+    clearCart();
+    clearPromo();
+
+    // Онлайн-оплата: ініціюємо платіж і йдемо на платіжну сторінку
+    if (payment.value === 'online' && orderId) {
+      try {
+        const pay = await payOrder(orderId, payProvider.value || undefined);
+        if (pay?.paymentUrl) {
+          try { localStorage.setItem('lastOrderId', orderId); } catch {}
+          window.location.href = pay.paymentUrl;
+          return;
+        }
+      } catch {
+        /* платіж не ініційовано — замовлення створене, покажемо сторінку статусу */
+      }
+      await router.push({ path: '/order-success', query: { order: orderId, n: orderNumber, paid: '1' } });
+      return;
+    }
+    await router.push({ path: '/order-success', query: { order: orderId, n: orderNumber } });
+  } catch (e: any) {
+    if (errorCode.value === 'PAYMENTS_DISABLED' || (e?.statusCode === 403 && payment.value === 'online')) {
+      paymentsDisabled.value = true;
+      payment.value = 'cod';
+    } else if (promoFromOrder.value) {
+      // Сервер відхилив промокод — помилка вже біля поля промокоду
+      document.querySelector<HTMLElement>('[data-field="promo"]')?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    } else if (!errorMsg.value) {
+      generalError.value = t('checkout.errGeneric');
+    }
+  }
+};
 </script>
+
+<style scoped lang="scss">
+.summary-sticky { position: sticky; top: 20px; }
+.submit-btn { padding: 14px 20px; font-size: 18px; font-weight: 600; }
+:deep(.checkout-card) {
+  padding: 24px;
+  border: 1px solid #e7e7e7;
+  border-radius: 12px;
+  background: #fff;
+  h3 { margin-bottom: 16px; }
+  .form-control:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(74, 141, 22, 0.15); }
+}
+@media (max-width: 575px) {
+  :deep(.checkout-card), :deep(.order-summary) { padding: 16px; }
+}
+.pay-modal {
+  position: fixed;
+  inset: 0;
+  z-index: 2000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.5);
+  padding: 16px;
+}
+.pay-modal-box {
+  background: #fff;
+  border-radius: 12px;
+  padding: 32px;
+  max-width: 420px;
+  text-align: center;
+}
+</style>

package/components/Checkout/types.ts

@@ -0,0 +1,45 @@
+// Стан блоку доставки на сторінці оформлення
+export interface DeliveryState {
+  provider: string;
+  // Нова Пошта: місто -> відділення
+  cityQuery: string;
+  city: { ref: string; name: string } | null;
+  warehouseQuery: string;
+  warehouse: { ref: string; description: string } | null;
+  // Кур'єр / Укрпошта / інше
+  cityText: string;
+  address: string;
+  postcode: string;
+  // Самовивіз
+  pickupPoint: { name: string; city?: string; address?: string; workingHours?: string } | null;
+}
+
+export interface ContactState {
+  name: string;
+  phone: string;
+  email: string;
+  comment: string;
+}
+
+export type FieldErrors = Record<string, string>;
+
+export const emptyDelivery = (): DeliveryState => ({
+  provider: '',
+  cityQuery: '',
+  city: null,
+  warehouseQuery: '',
+  warehouse: null,
+  cityText: '',
+  address: '',
+  postcode: '',
+  pickupPoint: null,
+});
+
+// Нормалізує телефон до +380XXXXXXXXX; повертає '' якщо формат невірний
+export const normalizePhone = (raw: string): string => {
+  let d = raw.replace(/[^\d+]/g, '');
+  if (d.startsWith('+')) d = d.slice(1);
+  if (d.startsWith('0') && d.length === 10) d = '38' + d;
+  if (d.length === 9) d = '380' + d;
+  return /^380\d{9}$/.test(d) ? '+' + d : '';
+};

package/components/Common/PageBanner.vue

@@ -1,26 +1,28 @@
+<script setup lang="ts">
+// Заголовок сторінки та хлібні крихти
+// crumbs — проміжні кроки між «Головна» і назвою сторінки (з посиланнями)
+defineProps<{
+  pageTitle: string;
+  crumbs?: { label: string; to: string }[];
+}>();
+const { t } = useI18n();
+</script>
+
 <template>
   <div class="page-banner bg-gray4 py-3">
     <div class="container">
-      <div class="d-flex justify-content-between align-items-center">
-        <ul class="d-flex align-content-center list-unstyled mb-0 page-content">
-          <li>
-            <NuxtLink to="/" class="text-decoration-none">{{ t('nav.home') }}</NuxtLink>
-          </li>
-          <li>
-            <span>{{ pageTitle }}</span>
-          </li>
-        </ul>
-        <div class="d-flex align-items-center">
-          <i class="ri-arrow-left-s-line"></i>
-          <i class="ri-layout-grid-line"></i>
-          <i class="ri-arrow-right-s-line"></i>
-        </div>
-      </div>
+      <h1 class="h3 mb-2">{{ pageTitle }}</h1>
+      <ul class="d-flex align-content-center list-unstyled mb-0 page-content">
+        <li>
+          <NuxtLink to="/" class="text-decoration-none">{{ t('nav.home') }}</NuxtLink>
+        </li>
+        <li v-for="crumb in crumbs" :key="crumb.to">
+          <NuxtLink :to="crumb.to" class="text-decoration-none">{{ crumb.label }}</NuxtLink>
+        </li>
+        <li>
+          <span>{{ pageTitle }}</span>
+        </li>
+      </ul>
     </div>
   </div>
 </template>
-
-<script setup lang="ts">
-defineProps<{ pageTitle: string }>();
-const { t } = useI18n();
-</script>