@crm-market/template-shared 1.0.7 → 1.0.8

package/components/Wishlist/index.vue

@@ -1,115 +1,47 @@
 <template>
   <div class="ptb-60">
     <div class="container">
-      <div class="table-responsive cart-table">
+      <div v-if="loading" class="text-center py-5 text-muted">{{ t('wishlist.loading') }}</div>
+
+      <div v-else-if="!items.length" class="text-center py-5">
+        <i class="ri-heart-line text-muted" style="font-size: 4rem"></i>
+        <h3 class="mt-3">{{ t('wishlist.empty') }}</h3>
+        <p class="text-muted">{{ t('wishlist.emptyText') }}</p>
+        <NuxtLink to="/products" class="btn btn-success text-white rounded-pill">{{ t('wishlist.toCatalog') }}</NuxtLink>
+      </div>
+
+      <div v-else class="table-responsive cart-table">
         <table class="table align-middle">
           <thead>
             <tr>
-              <th scope="col">{{ t('product.product') }}</th>
+              <th scope="col">{{ t('wishlist.product') }}</th>
               <th scope="col">{{ t('product.name') }}</th>
               <th scope="col">{{ t('product.unitPrice') }}</th>
-              <th scope="col">{{ t('product.quantity') }}</th>
-              <th scope="col">{{ t('product.subtotal') }}</th>
               <th scope="col">{{ t('product.addToCart') }}</th>
               <th scope="col">{{ t('product.remove') }}</th>
             </tr>
           </thead>
           <tbody>
-            <tr>
-              <td>
-                <NuxtLink to="/product-details">
-                  <img
-                    src="~/assets/images/product-6.png"
-                    class="cart-product"
-                    alt="product"
-                  />
-                </NuxtLink>
-              </td>
-              <td>
-                <NuxtLink to="/product-details" class="title">
-                  Multiplatform Wireless Noise-Cancelling Gaming Headset
-                </NuxtLink>
-              </td>
-              <td>
-                <span class="price">$79</span>
-              </td>
-              <td>
-                <WishlistProductQuantity />
-              </td>
-              <td>
-                <span class="price">$79</span>
-              </td>
-              <td>
-                <button class="btn btn-warning text-white">{{ t('product.addToCart') }}</button>
-              </td>
-              <td>
-                <button class="border-0 p-0 bg-transparent remove">
-                  <i class="ri-delete-bin-line"></i>
-                </button>
-              </td>
-            </tr>
-            <tr>
-              <td>
-                <NuxtLink to="/product-details">
-                  <img
-                    src="~/assets/images/product-7.png"
-                    class="cart-product"
-                    alt="product"
-                  />
-                </NuxtLink>
-              </td>
+            <tr v-for="item in items" :key="item.id">
               <td>
-                <NuxtLink to="/product-details" class="title">
-                  GPS Smartwatch with Bright Touchscreen Display
+                <NuxtLink :to="productPath(item)">
+                  <img v-if="imageOf(item)" :src="imageOf(item)" class="cart-product" :alt="item.title" />
                 </NuxtLink>
               </td>
               <td>
-                <span class="price">$119</span>
+                <NuxtLink :to="productPath(item)" class="title">{{ item.title }}</NuxtLink>
               </td>
               <td>
-                <WishlistProductQuantity />
+                <span class="price">{{ formatPrice(getProductPrice(item)) }}</span>
+                <del v-if="getProductOldPrice(item)" class="ms-2 text-muted">{{ formatPrice(getProductOldPrice(item) as number) }}</del>
               </td>
               <td>
-                <span class="price">$119</span>
-              </td>
-              <td>
-                <button class="btn btn-warning text-white">{{ t('product.addToCart') }}</button>
-              </td>
-              <td>
-                <button class="border-0 p-0 bg-transparent remove">
-                  <i class="ri-delete-bin-line"></i>
+                <button type="button" class="btn btn-warning text-white" :disabled="isOut(item)" @click="addItem(item)">
+                  {{ isInCart(item.id) ? t('product.inCart') : t('product.addToCart') }}
                 </button>
               </td>
-            </tr>
-            <tr>
-              <td>
-                <NuxtLink to="/product-details">
-                  <img
-                    src="~/assets/images/product-8.png"
-                    class="cart-product"
-                    alt="product"
-                  />
-                </NuxtLink>
-              </td>
               <td>
-                <NuxtLink to="/product-details" class="title">
-                  SAMSUNG 32-Inch Class QLED 4K Q60C Series Quantum HDR
-                </NuxtLink>
-              </td>
-              <td>
-                <span class="price">$397</span>
-              </td>
-              <td>
-                <WishlistProductQuantity />
-              </td>
-              <td>
-                <span class="price">$397</span>
-              </td>
-              <td>
-                <button class="btn btn-warning text-white">{{ t('product.addToCart') }}</button>
-              </td>
-              <td>
-                <button class="border-0 p-0 bg-transparent remove">
+                <button type="button" class="border-0 p-0 bg-transparent remove" :aria-label="t('wishlist.removeItem')" @click="removeItem(item.id)">
                   <i class="ri-delete-bin-line"></i>
                 </button>
               </td>
@@ -122,5 +54,47 @@
 </template>
 
 <script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import {
+  formatPrice,
+  getProductImage,
+  getProductOldPrice,
+  getProductPrice,
+  type Product,
+} from '../../composables/useProducts';
+
 const { t } = useI18n();
+const { addToCart, isInCart } = useCart();
+const { ids, load, remove } = useWishlist();
+const { fetchProductsByIds } = useProducts();
+
+const items = ref<Product[]>([]);
+const loading = ref(true);
+
+const imageOf = (p: Product) => getProductImage(p);
+const isOut = (p: Product) => typeof p.stock === 'number' && p.stock <= 0;
+
+const addItem = (p: Product) => {
+  if (isOut(p)) return;
+  const old = getProductOldPrice(p);
+  addToCart({
+    productId: p.id,
+    name: p.title,
+    price: old || getProductPrice(p),
+    discountPrice: old ? getProductPrice(p) : undefined,
+    image: getProductImage(p),
+    unit: p.unit,
+  });
+};
+
+const removeItem = (id: string) => {
+  remove(id);
+  items.value = items.value.filter((p) => p.id !== id);
+};
+
+onMounted(async () => {
+  load();
+  items.value = ids.value.length ? await fetchProductsByIds(ids.value) : [];
+  loading.value = false;
+});
 </script>

package/composables/useCart.ts

@@ -1,136 +1,181 @@
 import { ref, computed } from 'vue';
+import { useRuntimeConfig } from '#imports';
 
-interface CartItem {
+// Позиція кошика. Поля name/price/discountPrice/image/productId залишені
+// для сумісності з компонентами шапки та карток товарів.
+export interface CartItem {
   productId: string;
   name: string;
   price: number;
   discountPrice?: number;
   quantity: number;
   image?: string;
+  unit?: string;
+  minQty?: number;
 }
 
 interface Cart {
   items: CartItem[];
   updatedAt: number;
+  // Кошик належить або звичайному каталогу, або конкретному прайс-листу
+  priceListId?: string | null;
 }
 
 const CART_STORAGE_KEY = 'shopping_cart';
 
-const cart = ref<Cart>({
-  items: [],
-  updatedAt: Date.now(),
-});
+const cart = ref<Cart>({ items: [], updatedAt: 0, priceListId: null });
+
+// Формат «1 234 ₴» (нерозривний пробіл; вручну, щоб SSR і браузер збігались)
+export const formatUah = (n: number): string => {
+  const num = Math.round((Number(n) || 0) * 100) / 100;
+  const [int, frac] = num.toFixed(2).split('.');
+  const grouped = int.replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
+  return `${grouped}${frac !== '00' ? ',' + frac : ''} ₴`;
+};
+
+// Повний URL зображення з медіа-домену (відносні шляхи дописуємо mediaBase)
+export const cartImageUrl = (url?: string | null): string => {
+  if (!url) return '';
+  if (/^(https?:|data:|blob:)/.test(url)) return url;
+  const base = String(useRuntimeConfig().public.mediaBase || '').replace(/\/$/, '');
+  const path = url.startsWith('/') ? url : '/' + url;
+  return base ? base + path : url;
+};
+
+// Приводить товар з API (prices[], images[], title) або старий формат до позиції кошика
+const normalize = (src: Record<string, any>): Omit<CartItem, 'quantity'> => {
+  const prices: any[] = Array.isArray(src.prices) ? src.prices : [];
+  const main = prices.find((p) => !p.isWholesale) || prices[0];
+  const imgs: any[] = Array.isArray(src.images) ? src.images : [];
+  const mainImg = imgs.find((i) => i?.isMain) || imgs[0];
+  const imgUrl = src.image || (typeof mainImg === 'string' ? mainImg : mainImg?.url) || '';
+  return {
+    productId: String(src.productId ?? src.id),
+    name: src.name ?? src.title ?? '',
+    price: Number(src.price ?? main?.value ?? 0) || 0,
+    discountPrice: src.discountPrice ? Number(src.discountPrice) : undefined,
+    image: imgUrl,
+    unit: src.unit || undefined,
+  };
+};
 
 export const useCart = () => {
-  // Load cart from localStorage
   const loadCart = () => {
-    if (process.client) {
-      try {
-        const stored = localStorage.getItem(CART_STORAGE_KEY);
-        if (stored) {
-          cart.value = JSON.parse(stored);
-        }
-      } catch (e) {
-        console.error('Error loading cart:', e);
+    if (!import.meta.client) return;
+    try {
+      const stored = localStorage.getItem(CART_STORAGE_KEY);
+      if (!stored) return;
+      const parsed = JSON.parse(stored);
+      if (parsed && Array.isArray(parsed.items)) {
+        cart.value = {
+          items: parsed.items.filter((i: any) => i?.productId && i.quantity > 0),
+          updatedAt: parsed.updatedAt || Date.now(),
+          priceListId: parsed.priceListId || null,
+        };
       }
+    } catch (e) {
+      console.error('Помилка читання кошика:', e);
     }
   };
 
-  // Save cart to localStorage
   const saveCart = () => {
-    if (process.client) {
-      try {
-        cart.value.updatedAt = Date.now();
-        localStorage.setItem(CART_STORAGE_KEY, JSON.stringify(cart.value));
-      } catch (e) {
-        console.error('Error saving cart:', e);
-      }
+    if (!import.meta.client) return;
+    try {
+      cart.value.updatedAt = Date.now();
+      localStorage.setItem(CART_STORAGE_KEY, JSON.stringify(cart.value));
+    } catch (e) {
+      console.error('Помилка збереження кошика:', e);
     }
   };
 
-  // Add item to cart
-  const addToCart = (item: Omit<CartItem, 'quantity'>, quantity: number = 1) => {
-    const existingItem = cart.value.items.find(
-      i => i.productId === item.productId
-    );
-
-    if (existingItem) {
-      existingItem.quantity += quantity;
+  // Додати товар (повний об'єкт з API або спрощений); priceListId — контекст прайс-листа
+  const addToCart = (
+    product: Record<string, any>,
+    quantity: number = 1,
+    priceListId: string | null = null,
+    minQty: number = 1,
+  ) => {
+    // Зміна контексту (прайс-лист ↔ звичайний) — починаємо новий кошик
+    if ((priceListId || null) !== (cart.value.priceListId || null)) {
+      cart.value.items = [];
+      cart.value.priceListId = priceListId || null;
+    }
+    const item = normalize(product);
+    const floor = Math.max(1, minQty || 1);
+    const existing = cart.value.items.find((i) => i.productId === item.productId);
+    if (existing) {
+      existing.quantity = Math.max(existing.quantity + quantity, floor);
+      existing.minQty = Math.max(existing.minQty || 1, floor);
     } else {
-      cart.value.items.push({
-        ...item,
-        quantity,
-      });
+      cart.value.items.push({ ...item, quantity: Math.max(quantity, floor), minQty: floor });
     }
-
     saveCart();
   };
 
-  // Remove item from cart
   const removeFromCart = (productId: string) => {
-    cart.value.items = cart.value.items.filter(
-      i => i.productId !== productId
-    );
+    cart.value.items = cart.value.items.filter((i) => i.productId !== productId);
     saveCart();
   };
 
-  // Update item quantity
   const updateQuantity = (productId: string, quantity: number) => {
-    const item = cart.value.items.find(i => i.productId === productId);
-    if (item) {
-      if (quantity <= 0) {
-        removeFromCart(productId);
-      } else {
-        item.quantity = quantity;
-        saveCart();
-      }
-    }
+    const item = cart.value.items.find((i) => i.productId === productId);
+    if (!item) return;
+    if (quantity <= 0) return removeFromCart(productId);
+    item.quantity = Math.max(item.minQty || 1, Math.floor(quantity));
+    saveCart();
   };
 
-  // Clear cart
   const clearCart = () => {
     cart.value.items = [];
+    cart.value.priceListId = null;
     saveCart();
   };
 
-  // Check if product is in cart
-  const isInCart = (productId: string) => {
-    return cart.value.items.some(i => i.productId === productId);
-  };
-
-  // Get item quantity
-  const getItemQuantity = (productId: string) => {
-    const item = cart.value.items.find(i => i.productId === productId);
-    return item?.quantity || 0;
+  // Актуалізує ціни позицій за свіжими даними товарів (акція могла початись/закінчитись,
+  // поки товар лежав у кошику). price — ціна без знижки, discountPrice — акційна.
+  // Кошик прайс-листа не чіпаємо: там ціни з прайс-листа.
+  const syncPrices = (products: Record<string, any>[]) => {
+    if (cart.value.priceListId || !products.length) return;
+    const byId = new Map(products.map((p) => [String(p.id), p]));
+    let changed = false;
+    for (const item of cart.value.items) {
+      const p = byId.get(item.productId);
+      if (!p) continue;
+      const prices: any[] = Array.isArray(p.prices) ? p.prices : [];
+      const base = Number((prices.find((x) => !x.isWholesale) || prices[0])?.value) || 0;
+      const sale = p.salePrice !== null && p.salePrice !== undefined && p.salePrice !== '' ? Number(p.salePrice) : NaN;
+      const effective = Number.isFinite(sale) && sale >= 0 ? sale : base;
+      const old = Math.max(Number(p.oldPrice) || 0, base);
+      if (!effective) continue;
+      const price = old > effective ? old : effective;
+      const discountPrice = old > effective ? effective : undefined;
+      if (item.price !== price || item.discountPrice !== discountPrice) {
+        item.price = price;
+        item.discountPrice = discountPrice;
+        changed = true;
+      }
+    }
+    if (changed) saveCart();
   };
 
-  // Computed properties
-  const itemCount = computed(() =>
-    cart.value.items.reduce((sum, item) => sum + item.quantity, 0)
-  );
+  const isInCart = (productId: string) => cart.value.items.some((i) => i.productId === productId);
+  const getItemQuantity = (productId: string) =>
+    cart.value.items.find((i) => i.productId === productId)?.quantity || 0;
 
-  const subtotal = computed(() =>
-    cart.value.items.reduce((sum, item) => {
-      const price = item.discountPrice || item.price;
-      return sum + (price * item.quantity);
-    }, 0)
-  );
+  // Ціна одиниці з урахуванням знижки
+  const unitPrice = (item: CartItem) =>
+    item.discountPrice && item.discountPrice < item.price ? item.discountPrice : item.price;
 
+  const itemCount = computed(() => cart.value.items.reduce((s, i) => s + i.quantity, 0));
+  const subtotal = computed(() => cart.value.items.reduce((s, i) => s + unitPrice(i) * i.quantity, 0));
   const totalDiscount = computed(() =>
-    cart.value.items.reduce((sum, item) => {
-      if (item.discountPrice && item.discountPrice < item.price) {
-        return sum + ((item.price - item.discountPrice) * item.quantity);
-      }
-      return sum;
-    }, 0)
+    cart.value.items.reduce(
+      (s, i) => (i.discountPrice && i.discountPrice < i.price ? s + (i.price - i.discountPrice) * i.quantity : s),
+      0,
+    ),
   );
-
   const isEmpty = computed(() => cart.value.items.length === 0);
-
-  // Initialize cart on first use
-  if (process.client && cart.value.items.length === 0) {
-    loadCart();
-  }
+  const priceListId = computed(() => cart.value.priceListId || null);
 
   return {
     cart,
@@ -141,9 +186,16 @@ export const useCart = () => {
     isInCart,
     getItemQuantity,
     loadCart,
+    syncPrices,
+    unitPrice,
     itemCount,
     subtotal,
     totalDiscount,
     isEmpty,
+    priceListId,
+    // Аліаси
+    updateQty: updateQuantity,
+    cartTotal: subtotal,
+    cartCount: itemCount,
   };
 };

package/composables/useCategories.ts

@@ -3,30 +3,73 @@ import { useState } from '#imports';
 import { getApiBaseUrl } from '../utils/api';
 import { useSiteConfig } from './useSiteConfig';
 
-interface Category {
+export interface Category {
   id: string;
   name: string;
   slug?: string;
   description?: string;
+  metaTitle?: string;
+  metaDescription?: string;
+  /** Відносний або повний URL картинки категорії */
   image?: string;
   parentId?: string;
-  organizationId: string;
+  organizationId?: string;
   isActive: boolean;
   order?: number;
+  /** Кількість товарів, якщо API її віддає */
+  productsCount?: number;
+  subcategories?: Category[];
 }
 
+/** Приводить сирий вузол дерева категорій API до єдиної форми (рекурсивно). */
+const normalizeCategory = (raw: any, parentId?: string, index = 0): Category => {
+  const id = String(raw?.id ?? '');
+  const count = raw?.productsCount ?? raw?.productCount ?? raw?.count;
+  const children: any[] = Array.isArray(raw?.subcategories)
+    ? raw.subcategories
+    : Array.isArray(raw?.children)
+      ? raw.children
+      : [];
+  return {
+    id,
+    name: String(raw?.name ?? raw?.title ?? ''),
+    slug: raw?.slug,
+    description: raw?.description,
+    metaTitle: raw?.metaTitle || undefined,
+    metaDescription: raw?.metaDescription || undefined,
+    image: raw?.imageUrl || raw?.image || undefined,
+    parentId: raw?.parentId ?? parentId ?? undefined,
+    organizationId: raw?.organizationId,
+    isActive: raw?.isActive !== false,
+    order: typeof raw?.order === 'number' ? raw.order : index,
+    productsCount: count != null && !Number.isNaN(Number(count)) ? Number(count) : undefined,
+    subcategories: children.map((c, i) => normalizeCategory(c, id, i)),
+  };
+};
+
+/** Розгортає дерево у плоский список (батько, потім діти) — формат, який чекають навбар/фільтри. */
+const flatten = (nodes: Category[]): Category[] =>
+  nodes.flatMap((n) => [n, ...flatten(n.subcategories || [])]);
+
+/** Дістає масив категорій з відповіді: {categories|items|data} або голий масив. */
+const extractList = (response: any): any[] => {
+  if (Array.isArray(response)) return response;
+  return response?.categories || response?.items || response?.data || [];
+};
+
 export const useCategories = () => {
   // useState — SSR-safe, дані передаються клієнту через гідрацію
   const categories = useState<Category[]>('categories', () => []);
   const loading = useState<boolean>('categories-loading', () => false);
   const error = useState<string | null>('categories-error', () => null);
+  const loaded = useState<boolean>('categories-loaded', () => false);
 
   const { publicApiToken } = useSiteConfig();
 
-  // Fetch all categories
-  const fetchCategories = async () => {
-    // Якщо вже завантажено — не перезавантажуємо
-    if (categories.value.length > 0) return categories.value;
+  // Завантаження дерева категорій магазину
+  const fetchCategories = async (force = false) => {
+    // Вже завантажено — не перезавантажуємо
+    if (loaded.value && !force) return categories.value;
 
     loading.value = true;
     error.value = null;
@@ -37,15 +80,17 @@ export const useCategories = () => {
         throw new Error('Store token not available');
       }
 
-      const response = await $fetch<{ categories: Category[] }>('/site-template/public/store/categories', {
+      const response = await $fetch<any>('/site-template/public/store/categories', {
         baseURL: getApiBaseUrl(),
         params: { token },
       });
 
-      categories.value = response.categories;
-      return response.categories;
+      const tree = extractList(response).map((c, i) => normalizeCategory(c, undefined, i));
+      categories.value = flatten(tree);
+      loaded.value = true;
+      return categories.value;
     } catch (e: any) {
-      error.value = e.message || 'Failed to load categories';
+      error.value = 'Не вдалося завантажити категорії. Спробуйте оновити сторінку.';
       console.error('Error loading categories:', e);
       throw e;
     } finally {
@@ -53,31 +98,23 @@ export const useCategories = () => {
     }
   };
 
-  // Get category by ID
-  const getCategoryById = (categoryId: string) => {
-    return categories.value.find(c => c.id === categoryId);
-  };
+  const getCategoryById = (categoryId: string) =>
+    categories.value.find((c) => c.id === categoryId);
 
-  // Get category by slug
-  const getCategoryBySlug = (slug: string) => {
-    return categories.value.find(c => c.slug === slug);
-  };
+  const getCategoryBySlug = (slug: string) =>
+    categories.value.find((c) => c.slug === slug);
 
-  // Computed properties
-  const activeCategories = computed(() =>
-    categories.value.filter(c => c.isActive)
-  );
+  const activeCategories = computed(() => categories.value.filter((c) => c.isActive));
+
+  const sortByOrder = (list: Category[]) =>
+    [...list].sort((a, b) => (a.order || 0) - (b.order || 0));
 
   const topLevelCategories = computed(() =>
-    activeCategories.value.filter(c => !c.parentId)
-      .sort((a, b) => (a.order || 0) - (b.order || 0))
+    sortByOrder(activeCategories.value.filter((c) => !c.parentId)),
   );
 
-  const getSubcategories = (parentId: string) => {
-    return activeCategories.value
-      .filter(c => c.parentId === parentId)
-      .sort((a, b) => (a.order || 0) - (b.order || 0));
-  };
+  const getSubcategories = (parentId: string) =>
+    sortByOrder(activeCategories.value.filter((c) => c.parentId === parentId));
 
   return {
     categories,

package/composables/useCategoryImages.ts

@@ -0,0 +1,45 @@
+import { computed } from 'vue';
+import { useState } from '#imports';
+import { getProductImage, resolveMediaUrl, useProducts } from './useProducts';
+import type { Category } from './useCategories';
+
+/**
+ * Картинки категорій для вітрини.
+ * Якщо продавець не завантажив картинку категорії — беремо головне фото першого товару з неї.
+ * Результат кешується у useState, щоб головна і сторінка категорій не робили повторних запитів.
+ */
+export const useCategoryImages = () => {
+  const { fetchByCategory } = useProducts();
+  const fallback = useState<Record<string, string>>('category-image-fallback', () => ({}));
+  const pending = new Set<string>();
+
+  const imageFor = (category: Category): string => {
+    if (category.image) return resolveMediaUrl(category.image);
+    return fallback.value[category.id] || '';
+  };
+
+  // Довантажити фолбеки для категорій без картинки (паралельно, без падіння при помилці)
+  const ensureFallbacks = async (categories: Category[]) => {
+    const missing = categories.filter((c) => !c.image && !fallback.value[c.id] && !pending.has(c.id));
+    if (!missing.length) return;
+    missing.forEach((c) => pending.add(c.id));
+    await Promise.all(
+      missing.map(async (c) => {
+        try {
+          const [product] = await fetchByCategory(c.id, 1);
+          const img = product ? getProductImage(product) : '';
+          if (img) fallback.value = { ...fallback.value, [c.id]: img };
+        } catch {
+          /* без картинки — компонент покаже іконку */
+        } finally {
+          pending.delete(c.id);
+        }
+      }),
+    );
+  };
+
+  const withImages = (categories: Category[]) =>
+    computed(() => categories.map((c) => ({ ...c, imageSrc: imageFor(c) })));
+
+  return { imageFor, ensureFallbacks, withImages };
+};