@crm-market/template-shared 1.0.6 → 1.0.8

package/components/Common/ProductCard.vue

@@ -1,138 +1,162 @@
-<template>
-  <div class="product-card">
-    <div class="product-img position-relative">
-      <NuxtLink :to="`/product-details?id=${product.id}`">
-        <img
-          :src="productImage"
-          :alt="product.name"
-          class="w-100 object-fit-cover"
-          style="height: 200px;"
-        />
-      </NuxtLink>
-      <div class="product-badges" v-if="hasDiscount">
-        <span class="badge bg-danger">
-          -{{ discountPercent }}%
-        </span>
-      </div>
-      <div class="product-actions">
-        <button
-          class="btn btn-sm"
-          :class="inCart ? 'btn-success' : 'btn-outline-primary'"
-          @click="handleAddToCart"
-          :title="inCart ? t('product.inCart') : t('product.addToCart')"
-        >
-          <i :class="inCart ? 'ri-check-line' : 'ri-shopping-cart-line'"></i>
-        </button>
-      </div>
-    </div>
-    <div class="product-info p-2">
-      <NuxtLink :to="`/product-details?id=${product.id}`" class="text-decoration-none">
-        <h6 class="product-name mb-1 text-truncate">{{ product.name }}</h6>
-      </NuxtLink>
-      <div class="product-rating mb-1" v-if="product.rating">
-        <i
-          v-for="star in 5"
-          :key="star"
-          :class="star <= Math.round(product.rating) ? 'ri-star-fill text-warning' : 'ri-star-line text-muted'"
-          class="fs-12"
-        ></i>
-        <span class="text-muted fs-12 ms-1">({{ product.reviews || 0 }})</span>
-      </div>
-      <div class="product-price">
-        <span v-if="hasDiscount" class="text-decoration-line-through text-muted me-1 fs-13">
-          ${{ product.price.toFixed(2) }}
-        </span>
-        <span class="fw-bold" :class="hasDiscount ? 'text-danger' : ''">
-          ${{ effectivePrice.toFixed(2) }}
-        </span>
-      </div>
-    </div>
-  </div>
-</template>
-
 <script setup lang="ts">
-import { computed } from "vue";
-import { resolveImageUrl } from "~/utils/image";
-
-const { t } = useI18n();
+import { computed, onMounted, ref } from 'vue';
+import { useState } from '#imports';
+import {
+  getProductImage,
+  getProductPrice,
+  getProductOldPrice,
+  getProductDiscountLabel,
+  formatPrice,
+  type Product,
+} from '../../composables/useProducts';
 
-const props = defineProps<{
-  product: Record<string, any>;
-}>();
+const props = defineProps<{ product: Product }>();
 
+const { t } = useI18n();
 const { addToCart, isInCart } = useCart();
 
-const productImage = computed(() => {
-  const images = props.product.images;
-  if (images && images.length > 0) {
-    return resolveImageUrl(images[0]);
-  }
-  return '';
-});
+const WISHLIST_KEY = 'wishlist';
 
-const hasDiscount = computed(() =>
-  props.product.discountPrice && props.product.discountPrice < props.product.price
-);
+// Спільний між картками стан вішліста (id товарів), синхронізований з localStorage
+const wishIds = useState<string[]>('wishlist-ids', () => []);
 
-const effectivePrice = computed(() =>
-  hasDiscount.value ? props.product.discountPrice : props.product.price
-);
+const readWishlist = (): any[] => {
+  try {
+    const arr = JSON.parse(localStorage.getItem(WISHLIST_KEY) || '[]');
+    return Array.isArray(arr) ? arr : [];
+  } catch {
+    return [];
+  }
+};
 
-const discountPercent = computed(() => {
-  if (!hasDiscount.value) return 0;
-  return Math.round(((props.product.price - props.product.discountPrice) / props.product.price) * 100);
+onMounted(() => {
+  wishIds.value = readWishlist().map((i) => (typeof i === 'string' ? i : i?.id));
 });
 
-const inCart = computed(() => isInCart(props.product.id));
+const title = computed(() => props.product.title || props.product.name || '');
+const image = computed(() => getProductImage(props.product));
+// Фото не завантажилось — показуємо заглушку того ж розміру
+const imageFailed = ref(false);
+const price = computed(() => getProductPrice(props.product));
+const oldPrice = computed(() => getProductOldPrice(props.product));
+// «-20%» або «-50 ₴» (фіксована знижка) — залежно від типу акції
+const discountLabel = computed(() => getProductDiscountLabel(props.product));
+const link = computed(() => productPath(props.product));
+
+// Немає в наявності: stock явно 0 або менше
+const outOfStock = computed(() => typeof props.product.stock === 'number' && props.product.stock <= 0);
+// Кошик живе в localStorage: до монтування показуємо «У кошик», щоб SSR і клієнт збігалися (без hydration mismatch)
+const mounted = ref(false);
+onMounted(() => { mounted.value = true; });
+const inCart = computed(() => mounted.value && isInCart(props.product.id));
+const inWishlist = computed(() => wishIds.value.includes(props.product.id));
 
 const handleAddToCart = () => {
-  if (!inCart.value) {
-    addToCart({
-      productId: props.product.id,
-      name: props.product.name,
-      price: props.product.price,
-      discountPrice: props.product.discountPrice,
-      image: props.product.images?.[0] || '',
-    });
-  }
+  if (outOfStock.value) return;
+  // Кошик: price — ціна без знижки, discountPrice — акційна (salePrice)
+  addToCart({
+    productId: props.product.id,
+    name: title.value,
+    price: oldPrice.value || price.value,
+    discountPrice: oldPrice.value ? price.value : undefined,
+    image: image.value,
+  });
+};
+
+const toggleWishlist = () => {
+  const list = readWishlist().filter((i) => (typeof i === 'string' ? i : i?.id));
+  const exists = list.some((i) => (typeof i === 'string' ? i : i.id) === props.product.id);
+  const next = exists
+    ? list.filter((i) => (typeof i === 'string' ? i : i.id) !== props.product.id)
+    : [...list, { id: props.product.id, title: title.value, image: image.value, price: price.value }];
+  try {
+    localStorage.setItem(WISHLIST_KEY, JSON.stringify(next));
+  } catch { /* сховище недоступне — лишаємо лише стан у пам'яті */ }
+  wishIds.value = next.map((i) => (typeof i === 'string' ? i : i.id));
 };
 </script>
 
+<template>
+  <div class="single-product-telemobile-item">
+    <div class="product-img position-relative">
+      <!-- Фіксоване співвідношення 1:1: картки з фото, без фото і з битим фото однакової висоти -->
+      <NuxtLink :to="link" class="d-block pc-media">
+        <img v-if="image && !imageFailed" :src="image" :alt="title" loading="lazy" @error="imageFailed = true" />
+        <div v-else class="pc-placeholder d-flex align-items-center justify-content-center bg-light">
+          <i class="ri-image-line fs-1 text-muted"></i>
+        </div>
+      </NuxtLink>
+      <div class="d-flex justify-content-between align-items-center position-absolute top-0 start-0 end-0">
+        <span v-if="discountLabel" class="minus-count">{{ discountLabel }}</span>
+        <span v-else></span>
+        <button
+          type="button"
+          class="border-0 wish-btn"
+          :aria-label="t('home.favorite')"
+          @click="toggleWishlist"
+        >
+          <i :class="inWishlist ? 'ri-heart-fill text-danger' : 'ri-heart-line'"></i>
+        </button>
+      </div>
+    </div>
+    <div class="product-content">
+      <NuxtLink :to="link" class="title pc-title">{{ title }}</NuxtLink>
+      <div class="d-flex align-items-center justify-content-between">
+        <h3>
+          {{ formatPrice(price) }}
+          <del v-if="oldPrice">{{ formatPrice(oldPrice) }}</del>
+        </h3>
+        <div v-if="outOfStock" class="d-flex sold-stock align-items-center">
+          <span class="stock text-danger">{{ t('home.outOfStock') }}</span>
+        </div>
+      </div>
+      <button
+        type="button"
+        class="btn btn-success text-white rounded-pill"
+        :disabled="outOfStock"
+        @click="handleAddToCart"
+      >
+        <i :class="inCart ? 'ri-check-line' : 'ri-shopping-cart-line'"></i>
+        <span>{{ inCart ? t('home.inCart') : t('home.addToCart') }}</span>
+      </button>
+    </div>
+  </div>
+</template>
+
 <style scoped>
-.product-card {
-  border: 1px solid #eee;
-  border-radius: 8px;
+.pc-media {
+  aspect-ratio: 1 / 1;
   overflow: hidden;
-  transition: box-shadow 0.3s;
-  background: #fff;
 }
-.product-card:hover {
-  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+.pc-media img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
 }
-.product-img {
-  overflow: hidden;
-  background: #f8f9fa;
+.pc-placeholder {
+  width: 100%;
+  height: 100%;
 }
-.product-badges {
-  position: absolute;
-  top: 8px;
-  left: 8px;
-}
-.product-actions {
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  opacity: 0;
-  transition: opacity 0.3s;
-}
-.product-card:hover .product-actions {
-  opacity: 1;
-}
-.product-name {
-  font-size: 14px;
-  color: #333;
+/* Назва — максимум 2 рядки з обрізанням; висота завжди на 2 рядки, щоб сітка не «рвалась» */
+.pc-title {
+  min-height: 2.6em;
+  line-height: 1.3;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  overflow-wrap: anywhere;
 }
-.product-name:hover {
-  color: var(--primary-color, #0d6efd);
+/* Компактна картка на мобільному */
+@media (max-width: 575.98px) {
+  .single-product-telemobile-item { min-width: 0; }
+  .single-product-telemobile-item :deep(.product-content) { padding: 10px; }
+  .single-product-telemobile-item :deep(.product-content h3) { font-size: 15px; }
+  .single-product-telemobile-item :deep(.product-content del) { font-size: 12px; }
+  .single-product-telemobile-item :deep(.product-content .btn) {
+    width: 100%; padding: 6px 8px; font-size: 13px; white-space: nowrap;
+  }
+  .single-product-telemobile-item :deep(.product-content .title) { font-size: 14px; line-height: 1.3; }
 }
 </style>

package/components/Common/Services.vue

@@ -5,7 +5,7 @@
         <v-col cols="12" lg="3" sm="6">
           <div class="d-flex align-items-center single-servives-item">
             <div class="flex-shrink-0">
-              <img src="~/assets/images/shipped.png" alt="shipped" />
+              <img src="~/assets/images/shipped.png" :alt="t('services.fastDelivery')" />
             </div>
             <div class="flex-grow-1 ms-3">
               <h3>{{ t('services.fastDelivery') }}</h3>
@@ -16,7 +16,7 @@
         <v-col cols="12" lg="3" sm="6">
           <div class="d-flex align-items-center single-servives-item">
             <div class="flex-shrink-0">
-              <img src="~/assets/images/credit.png" alt="shipped" />
+              <img src="~/assets/images/credit.png" :alt="t('services.securedPayment')" />
             </div>
             <div class="flex-grow-1 ms-3">
               <h3>{{ t('services.securedPayment') }}</h3>
@@ -27,7 +27,7 @@
         <v-col cols="12" lg="3" sm="6">
           <div class="d-flex align-items-center single-servives-item">
             <div class="flex-shrink-0">
-              <img src="~/assets/images/wallet.png" alt="shipped" />
+              <img src="~/assets/images/wallet.png" :alt="t('services.moneyBack')" />
             </div>
             <div class="flex-grow-1 ms-3">
               <h3>{{ t('services.moneyBack') }}</h3>
@@ -38,7 +38,7 @@
         <v-col cols="12" lg="3" sm="6">
           <div class="d-flex align-items-center single-servives-item">
             <div class="flex-shrink-0">
-              <img src="~/assets/images/headphones.png" alt="shipped" />
+              <img src="~/assets/images/headphones.png" :alt="t('services.support247')" />
             </div>
             <div class="flex-grow-1 ms-3">
               <h3>{{ t('services.support247') }}</h3>

package/components/Contact/ContactForm.vue

@@ -1,86 +1,56 @@
+<script setup lang="ts">
+// Форма «Напишіть нам»
+const { t } = useI18n();
+const { form, loading, sent, error, submit } = useContactForm();
+</script>
+
 <template>
   <div class="contact-area pb-60">
     <div class="container">
       <div class="authentication-content p-50 mw-100">
-        <div class="row">
-          <div class="col-lg-5 mb-4 mb-lg-0">
-            <div class="login h-100 text-center">
-              <img
-                src="~/assets/images/contact-us.png"
-                class="h-100 object-fit-cover"
-                alt="contact-us"
-              />
-            </div>
-          </div>
-          <div class="col-lg-7">
-            <div class="authentication-form form-wrap">
-              <h3 class="title mb-2">{{ t('contact.getInTouch') }}</h3>
-              <p>{{ t('contact.contactDescription') }}</p>
-
-              <form>
-                <div class="row">
-                  <div class="col-lg-6">
-                    <div class="form-group mb-4">
-                      <label class="label">{{ t('contact.yourName') }} *</label>
-                      <input
-                        type="text"
-                        class="form-control"
-                        :placeholder="t('contact.enterName')"
-                      />
-                    </div>
-                  </div>
-                  <div class="col-lg-6">
-                    <div class="form-group mb-4">
-                      <label class="label">{{ t('contact.yourEmail') }} *</label>
-                      <input
-                        type="email"
-                        class="form-control"
-                        :placeholder="t('contact.enterEmail')"
-                      />
-                    </div>
-                  </div>
-                  <div class="col-lg-12">
-                    <div class="form-group mb-4">
-                      <label class="label">{{ t('contact.yourSubject') }} *</label>
-                      <input
-                        type="text"
-                        class="form-control"
-                        :placeholder="t('contact.yourSubject')"
-                      />
-                    </div>
-                  </div>
-                  <div class="col-lg-12">
-                    <div class="form-group mb-4">
-                      <label class="label">{{ t('contact.yourMessage') }} *</label>
-                      <textarea
-                        class="form-control"
-                        :placeholder="t('contact.writeMessage')"
-                        cols="30"
-                        rows="5"
-                      ></textarea>
-                    </div>
-                  </div>
+        <div class="authentication-form form-wrap">
+          <h3 class="title mb-2">{{ t('pages.contact.formTitle') }}</h3>
+          <p>{{ t('pages.contact.formDesc') }}</p>
 
-                  <div class="col-lg-12">
-                    <div class="form-group mb-0">
-                      <button
-                        type="submit"
-                        class="btn btn-warning btn-pill text-white"
-                      >
-                        {{ t('footer.submitNow') }}
-                      </button>
-                    </div>
-                  </div>
+          <div v-if="sent" class="alert alert-success" role="status">{{ t('pages.contact.sent') }}</div>
+          <form v-else novalidate @submit.prevent="submit">
+            <div class="row">
+              <div class="col-lg-6">
+                <div class="form-group mb-4">
+                  <label class="label" for="cf-name">{{ t('pages.contact.name') }} *</label>
+                  <input id="cf-name" v-model="form.name" type="text" class="form-control" :placeholder="t('pages.contact.namePh')" />
+                </div>
+              </div>
+              <div class="col-lg-6">
+                <div class="form-group mb-4">
+                  <label class="label" for="cf-email">{{ t('pages.contact.email') }} *</label>
+                  <input id="cf-email" v-model="form.email" type="email" class="form-control" :placeholder="t('pages.contact.emailPh')" />
                 </div>
-              </form>
+              </div>
+              <div class="col-lg-6">
+                <div class="form-group mb-4">
+                  <label class="label" for="cf-phone">{{ t('pages.contact.phone') }}</label>
+                  <input id="cf-phone" v-model="form.phone" type="tel" class="form-control" :placeholder="t('pages.contact.phonePh')" />
+                </div>
+              </div>
+              <div class="col-lg-12">
+                <div class="form-group mb-4">
+                  <label class="label" for="cf-msg">{{ t('pages.contact.message') }} *</label>
+                  <textarea id="cf-msg" v-model="form.message" class="form-control" rows="5" :placeholder="t('pages.contact.messagePh')"></textarea>
+                </div>
+              </div>
+              <div v-if="error" class="col-lg-12">
+                <div class="alert alert-danger" role="alert">{{ error }}</div>
+              </div>
+              <div class="col-lg-12">
+                <button type="submit" class="btn btn-warning btn-pill text-white" :disabled="loading">
+                  {{ loading ? t('pages.contact.sending') : t('pages.contact.send') }}
+                </button>
+              </div>
             </div>
-          </div>
+          </form>
         </div>
       </div>
     </div>
   </div>
 </template>
-
-<script setup lang="ts">
-const { t } = useI18n();
-</script>

package/components/Contact/ContactInfo.vue

@@ -1,74 +1,48 @@
+<script setup lang="ts">
+// Контакти магазину з CRM: телефони, email, адреса, графік, соцмережі
+import { useLayoutData } from '~/components/Layout/layoutData';
+
+const { phones, email, address, workingHours, socials } = useLayoutData();
+const { t } = useI18n();
+const hasAny = computed(
+  () => phones.value.length || email.value || address.value || workingHours.value || socials.value.length,
+);
+</script>
+
 <template>
-  <div class="contact-info-area pt-60 pb-35">
+  <div v-if="hasAny" class="contact-info-area pt-60 pb-35">
     <div class="container">
       <div class="row justify-content-center">
-        <div class="col-lg-4 col-md-6">
-          <div class="single-contact-info-item">
-            <div class="d-sm-flex">
-              <div class="flex-shrink-0">
-                <i class="flaticon-placeholder"></i>
-              </div>
-              <div class="flex-grow-1 ms-sm-3 mt-3 mt-sm-0">
-                <h3>United Kingdom</h3>
-                <p>6391 Elgin St. Celina, Delaware 10299</p>
-                <a href="#" class="tell">(208) 555-0112</a>
-                <a
-                  href="mailto:support@tuaninfo.com"
-                  class="text-decoration-underline text-primary"
-                >
-                  support@tuaninfo.com
-                </a>
-              </div>
-            </div>
+        <div v-if="phones.length || email" class="col-lg-4 col-md-6 mb-4">
+          <div class="single-contact-info-item h-100">
+            <h3>{{ t('pages.contact.connect') }}</h3>
+            <a v-for="p in phones" :key="p" :href="`tel:${p}`" class="tell d-block">{{ p }}</a>
+            <a v-if="email" :href="`mailto:${email}`" class="text-decoration-underline text-primary">{{ email }}</a>
           </div>
         </div>
-        <div class="col-lg-4 col-md-6">
-          <div class="single-contact-info-item">
-            <div class="d-sm-flex">
-              <div class="flex-shrink-0">
-                <i class="flaticon-placeholder"></i>
-              </div>
-              <div class="flex-grow-1 ms-sm-3 mt-3 mt-sm-0">
-                <h3>Toronto Canada</h3>
-                <p>1901 Thornridge Cir. Shiloh, Hawaii</p>
-                <a href="tel:(252)555-0126" class="tell">(252) 555-0126</a>
-                <a
-                  href="mailto:support@tuaninfo.com"
-                  class="text-decoration-underline text-primary"
-                >
-                  support@tuaninfo.com
-                </a>
-              </div>
-            </div>
+        <div v-if="address || workingHours" class="col-lg-4 col-md-6 mb-4">
+          <div class="single-contact-info-item h-100">
+            <h3>{{ t('pages.contact.addressHours') }}</h3>
+            <p v-if="address">{{ address }}</p>
+            <p v-if="workingHours" class="mb-0">{{ workingHours }}</p>
           </div>
         </div>
-        <div class="col-lg-4 col-md-6">
-          <div class="single-contact-info-item">
-            <div class="d-sm-flex">
-              <div class="flex-shrink-0">
-                <i class="flaticon-placeholder"></i>
-              </div>
-              <div class="flex-grow-1 ms-sm-3 mt-3 mt-sm-0">
-                <h3>Saint Barthélemy</h3>
-                <p>4517 Washington Ave. Manchester</p>
-                <a href="tel:(505)555-0125" class="tell">(505)555-0125</a>
-                <a
-                  href="mailto:support@tuaninfo.com"
-                  class="text-decoration-underline text-primary"
-                >
-                  support@tuaninfo.com
-                </a>
-              </div>
-            </div>
+        <div v-if="socials.length" class="col-lg-4 col-md-6 mb-4">
+          <div class="single-contact-info-item h-100">
+            <h3>{{ t('pages.contact.socials') }}</h3>
+            <a
+              v-for="s in socials"
+              :key="s.key"
+              :href="s.url"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="d-block text-primary"
+            >
+              <i :class="s.icon" class="me-1"></i>{{ s.label }}
+            </a>
           </div>
         </div>
       </div>
     </div>
   </div>
 </template>
-
-<script>
-export default {
-  name: "ContactInfo",
-};
-</script>