@crm-market/template-shared 1.0.6 → 1.0.8

package/assets/scss/_variables.scss

@@ -18,9 +18,9 @@
   --gray4: #fcfcfc;
   --boxShadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
   --transition: all ease 0.5s;
-  --fontFamilyRegular: "Satoshi-Regular";
-  --fontFamilyMedium: "Satoshi-Medium";
-  --fontFamilyBold: "Satoshi-Bold";
+  --fontFamilyRegular: "Satoshi-Regular", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
+  --fontFamilyMedium: "Satoshi-Medium", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
+  --fontFamilyBold: "Satoshi-Bold", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
   --fontSize13: 13px;
   --fontSize14: 14px;
   --fontSize15: 15px;

package/assets/scss/components/_header.scss

@@ -153,7 +153,7 @@
     }
   }
   .btn {
-    font-family: "Satoshi-Bold";
+    font-family: var(--fontFamilyBold);
     padding: 10px 23px;
     i {
       margin-right: 5px;

package/assets/scss/style.css

@@ -28,9 +28,9 @@ This files table contents are outlined below>>>>>
   --gray4: #fcfcfc;
   --boxShadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
   --transition: all ease 0.5s;
-  --fontFamilyRegular: "Satoshi-Regular";
-  --fontFamilyMedium: "Satoshi-Medium";
-  --fontFamilyBold: "Satoshi-Bold";
+  --fontFamilyRegular: "Satoshi-Regular", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
+  --fontFamilyMedium: "Satoshi-Medium", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
+  --fontFamilyBold: "Satoshi-Bold", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
   --fontSize13: 13px;
   --fontSize14: 14px;
   --fontSize15: 15px;
@@ -1003,7 +1003,7 @@ Page-navigation Area Style
   font-size: 14px;
 }
 .middle-header-left .btn {
-  font-family: "Satoshi-Bold";
+  font-family: var(--fontFamilyBold);
   padding: 10px 23px;
 }
 .middle-header-left .btn i {

package/components/AboutUs/StaticContent.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+// Контентний блок статичної сторінки: показує лише санітизований HTML продавця
+import { sanitizeHtml } from '~/composables/useSanitize';
+
+const props = defineProps<{ html: string }>();
+const safeHtml = computed(() => sanitizeHtml(props.html));
+</script>
+
+<template>
+  <div class="ptb-60">
+    <div class="container">
+      <!-- eslint-disable-next-line vue/no-v-html -->
+      <div class="main-content-text static-content" v-html="safeHtml"></div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.static-content {
+  :deep(ul) {
+    list-style: disc;
+    padding-left: 20px;
+    li { padding-left: 0; }
+  }
+  :deep(ol) {
+    padding-left: 20px;
+    li { padding-left: 0; margin-bottom: 10px; }
+  }
+  :deep(img) { max-width: 100%; height: auto; }
+  :deep(a) { text-decoration: underline; }
+}
+</style>

package/components/Cart/CartEmpty.vue

@@ -0,0 +1,42 @@
+<template>
+  <div>
+    <div class="cart-empty">
+      <div class="cart-empty__icon" aria-hidden="true"><i class="ri-shopping-cart-2-line"></i></div>
+      <h3>{{ t('cart.empty') }}</h3>
+      <p class="text-muted mb-4">{{ t('cart.emptyText') }}</p>
+      <NuxtLink to="/products" class="btn btn-warning text-white">{{ t('cart.toCatalog') }}</NuxtLink>
+    </div>
+
+    <section v-if="suggested.length" class="mt-5">
+      <h4 class="mb-4">{{ t('cart.suggested') }}</h4>
+      <div class="row g-3">
+        <div v-for="p in suggested" :key="p.id" class="col-6 col-md-4 col-lg-2">
+          <CommonProductCard :product="p" />
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script setup lang="ts">
+// Порожній кошик + рекомендації, щоб не було глухого кута
+const { t } = useI18n();
+const { fetchFeatured, fetchPage } = useProducts();
+
+const suggested = ref<any[]>([]);
+onMounted(async () => {
+  let list = await fetchFeatured(6);
+  if (!list.length) list = (await fetchPage({ limit: 6, sortBy: 'newest' } as any)).items;
+  suggested.value = list.slice(0, 6);
+});
+</script>
+
+<style scoped lang="scss">
+.cart-empty {
+  text-align: center; padding: 48px 16px; border: 1px solid var(--primary-color); border-radius: 12px; background: #fff;
+}
+.cart-empty__icon {
+  width: 84px; height: 84px; margin: 0 auto 16px; border-radius: 50%; background: rgba(74, 141, 22, 0.1);
+  color: var(--primary-color); font-size: 40px; display: flex; align-items: center; justify-content: center;
+}
+</style>

package/components/Cart/CartItem.vue

@@ -0,0 +1,145 @@
+<template>
+  <div class="cart-line">
+    <NuxtLink :to="link" class="cart-line__img" tabindex="-1" aria-hidden="true">
+      <img v-if="item.image" :src="cartImageUrl(item.image)" :alt="item.name" loading="lazy" />
+      <span v-else class="cart-line__noimg"><i class="ri-image-line"></i></span>
+    </NuxtLink>
+
+    <div class="cart-line__main">
+      <NuxtLink :to="link" class="cart-line__title">{{ item.name }}</NuxtLink>
+      <div class="cart-line__unit">
+        <span class="cart-line__price">{{ formatUah(unitPrice(item)) }}</span>
+        <span v-if="hasDiscount" class="cart-line__old">{{ formatUah(item.price) }}</span>
+        <span v-if="item.unit" class="text-muted"> / {{ item.unit }}</span>
+      </div>
+      <div v-if="(item.minQty || 1) > 1" class="cart-line__min text-muted">
+        {{ t('cart.minQty', { n: item.minQty }) }}
+      </div>
+    </div>
+
+    <div class="cart-line__qty" role="group" :aria-label="t('product.quantity')">
+      <button
+        type="button"
+        class="cart-line__step"
+        :aria-label="t('cart.decrease')"
+        :disabled="item.quantity <= min"
+        @click="change(-1)"
+      >
+        <i class="ri-subtract-line"></i>
+      </button>
+      <input
+        class="cart-line__input"
+        type="text"
+        inputmode="numeric"
+        :value="item.quantity"
+        :aria-label="t('product.quantity')"
+        @change="onInput"
+      />
+      <button type="button" class="cart-line__step" :aria-label="t('cart.increase')" @click="change(1)">
+        <i class="ri-add-line"></i>
+      </button>
+    </div>
+
+    <div class="cart-line__sum">{{ formatUah(unitPrice(item) * item.quantity) }}</div>
+
+    <button
+      type="button"
+      class="cart-line__remove"
+      :aria-label="`${t('product.remove')}: ${item.name}`"
+      @click="emit('remove', item.productId)"
+    >
+      <i class="ri-delete-bin-line"></i>
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+// Одна позиція кошика (рядок на десктопі, компактна картка на мобільному)
+const props = defineProps<{ item: any }>();
+const emit = defineEmits<{
+  (e: 'update', id: string, qty: number): void;
+  (e: 'remove', id: string): void;
+}>();
+
+const { t } = useI18n();
+const { unitPrice } = useCart();
+
+const link = computed(() => productPath({ id: props.item.productId, name: props.item.name }));
+const min = computed(() => props.item.minQty || 1);
+const hasDiscount = computed(() => !!props.item.discountPrice && props.item.discountPrice < props.item.price);
+
+const change = (delta: number) => {
+  const next = props.item.quantity + delta;
+  if (next >= min.value) emit('update', props.item.productId, next);
+};
+
+const onInput = (e: Event) => {
+  const el = e.target as HTMLInputElement;
+  const n = parseInt(el.value, 10);
+  const next = Number.isFinite(n) ? Math.max(min.value, n) : min.value;
+  el.value = String(next);
+  emit('update', props.item.productId, next);
+};
+</script>
+
+<style scoped lang="scss">
+.cart-line {
+  display: grid;
+  grid-template-columns: 96px minmax(0, 1fr) auto 110px 44px;
+  align-items: center;
+  gap: 16px;
+  padding: 14px 16px;
+  background: #fff;
+  border: 1px solid #e7e7e7;
+  border-radius: 12px;
+}
+.cart-line__img {
+  width: 96px; height: 96px; border-radius: 10px; overflow: hidden; background: #f6f7f5; display: block;
+  img { width: 100%; height: 100%; object-fit: cover; display: block; }
+}
+.cart-line__noimg { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #aaa; font-size: 28px; }
+.cart-line__main { min-width: 0; }
+.cart-line__title {
+  color: #1f2a1a; font-weight: 600; font-size: 16px; line-height: 1.3; text-decoration: none;
+  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
+  &:hover, &:focus-visible { color: var(--primary-color); }
+}
+.cart-line__unit { margin-top: 4px; font-size: 14px; }
+.cart-line__price { font-weight: 600; color: var(--primary-color); }
+.cart-line__old { margin-left: 6px; color: #999; text-decoration: line-through; font-size: 13px; }
+.cart-line__min { font-size: 12px; margin-top: 2px; }
+.cart-line__qty {
+  display: inline-flex; align-items: center; border: 1px solid #d9d9d9; border-radius: 10px; overflow: hidden; background: #fff;
+}
+.cart-line__step {
+  width: 40px; height: 40px; border: 0; background: #f6f7f5; color: #1f2a1a; font-size: 18px; cursor: pointer;
+  display: inline-flex; align-items: center; justify-content: center;
+  &:hover:not(:disabled) { background: var(--primary-color); color: #fff; }
+  &:disabled { opacity: 0.4; cursor: not-allowed; }
+}
+.cart-line__input {
+  width: 48px; height: 40px; border: 0; text-align: center; font-weight: 600; background: transparent; padding: 0;
+}
+.cart-line__step:focus-visible, .cart-line__input:focus-visible, .cart-line__remove:focus-visible {
+  outline: 2px solid var(--primary-color); outline-offset: -2px;
+}
+.cart-line__sum { text-align: right; font-weight: 700; font-size: 17px; color: #1f2a1a; white-space: nowrap; }
+.cart-line__remove {
+  width: 44px; height: 44px; border: 0; border-radius: 10px; background: transparent; color: #c0392b; font-size: 20px; cursor: pointer;
+  display: inline-flex; align-items: center; justify-content: center;
+  &:hover { background: #fdecea; }
+}
+
+@media (max-width: 767.98px) {
+  .cart-line {
+    grid-template-columns: 84px minmax(0, 1fr) 44px;
+    grid-template-areas: 'img main remove' 'qty qty sum';
+    gap: 10px 12px; padding: 12px;
+  }
+  .cart-line__img { grid-area: img; width: 84px; height: 84px; }
+  .cart-line__main { grid-area: main; }
+  .cart-line__remove { grid-area: remove; align-self: start; }
+  .cart-line__qty { grid-area: qty; justify-self: start; }
+  .cart-line__sum { grid-area: sum; font-size: 16px; color: var(--primary-color); }
+}
+</style>

package/components/Cart/CartSummary.vue

@@ -0,0 +1,57 @@
+<template>
+  <aside class="cart-summary" :aria-label="t('cart.cartTotals')">
+    <h3 class="cart-summary__title">{{ t('cart.cartTotals') }}</h3>
+    <ul class="cart-summary__list">
+      <li><span>{{ t('cart.itemsCount') }}</span><strong>{{ itemCount }}</strong></li>
+      <li><span>{{ t('cart.itemsSum') }}</span><strong>{{ formatUah(subtotal + totalDiscount) }}</strong></li>
+      <li v-if="totalDiscount > 0" class="cart-summary__discount">
+        <span>{{ t('cart.itemsDiscount') }}</span><strong>−{{ formatUah(totalDiscount) }}</strong>
+      </li>
+      <li>
+        <span>{{ t('cart.shipping') }}</span>
+        <span class="text-muted text-end">{{ t('cart.shippingAtCheckout') }}</span>
+      </li>
+    </ul>
+    <div class="cart-summary__total">
+      <span>{{ t('cart.grandTotal') }}</span>
+      <strong>{{ formatUah(subtotal) }}</strong>
+    </div>
+    <p class="cart-summary__hint"><i class="ri-coupon-3-line"></i> {{ t('cart.promoHint') }}</p>
+    <NuxtLink to="/checkout" class="btn btn-warning text-white w-100 cart-summary__cta">
+      {{ t('cart.proceedToCheckout') }}
+    </NuxtLink>
+    <NuxtLink to="/products" class="cart-summary__continue">{{ t('cart.continue') }}</NuxtLink>
+  </aside>
+</template>
+
+<script setup lang="ts">
+// Підсумок кошика: кількість, сума, знижка, CTA
+const { t } = useI18n();
+const { itemCount, subtotal, totalDiscount } = useCart();
+</script>
+
+<style scoped lang="scss">
+.cart-summary {
+  padding: 24px; background: #fff; border: 1px solid var(--primary-color); border-radius: 12px;
+  position: sticky; top: 90px;
+}
+.cart-summary__title { margin-bottom: 16px; font-size: 20px; }
+.cart-summary__list {
+  list-style: none; padding: 0; margin: 0 0 12px;
+  li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed #e7e7e7; font-size: 15px; }
+}
+.cart-summary__discount { color: var(--primary-color); }
+.cart-summary__total {
+  display: flex; justify-content: space-between; align-items: baseline; margin: 12px 0 18px; font-size: 18px;
+  strong { font-size: 26px; color: var(--primary-color); }
+}
+.cart-summary__hint { margin: -6px 0 14px; font-size: 13px; color: #57636c; i { color: var(--primary-color); } }
+.cart-summary__cta { padding: 14px 20px; font-size: 18px; font-weight: 600; }
+.cart-summary__continue {
+  display: block; text-align: center; margin-top: 14px; padding: 10px; color: var(--primary-color); text-decoration: none; font-weight: 500;
+  &:hover, &:focus-visible { text-decoration: underline; }
+}
+@media (max-width: 991.98px) {
+  .cart-summary { position: static; }
+}
+</style>

package/components/Cart/ProductQuantity.vue

@@ -1,11 +1,18 @@
 <template>
   <div class="product-quantity">
     <div class="add-to-cart-counter">
-      <div @click="decrement">
-        <input type="button" class="minusBtn" value="-" />
+      <div @click="change(-1)">
+        <input type="button" class="minusBtn" value="-" :disabled="modelValue <= min" />
       </div>
-      <input type="text" size="25" v-model="internalValue" class="count" />
-      <div @click="increment">
+      <input
+        type="text"
+        size="25"
+        class="count"
+        inputmode="numeric"
+        :value="modelValue"
+        @change="onInput"
+      />
+      <div @click="change(1)">
         <input type="button" class="plusBtn" value="+" />
       </div>
     </div>
@@ -13,17 +20,20 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from "vue";
+// Лічильник кількості: v-model + мінімум (для прайс-листа може бути > 1)
+const props = withDefaults(defineProps<{ modelValue: number; min?: number }>(), { min: 1 });
+const emit = defineEmits<{ (e: 'update:modelValue', value: number): void }>();
 
-const internalValue = ref(0);
-
-const increment = () => {
-  internalValue.value++;
+const change = (delta: number) => {
+  const next = props.modelValue + delta;
+  if (next >= props.min) emit('update:modelValue', next);
 };
 
-const decrement = () => {
-  if (internalValue.value > 0) {
-    internalValue.value--;
-  }
+const onInput = (e: Event) => {
+  const el = e.target as HTMLInputElement;
+  const n = parseInt(el.value, 10);
+  const next = Number.isFinite(n) ? Math.max(props.min, n) : props.min;
+  el.value = String(next);
+  emit('update:modelValue', next);
 };
 </script>

package/components/Cart/index.vue

@@ -1,165 +1,83 @@
 <template>
   <div class="ptb-60">
     <div class="container">
-      <div class="table-responsive cart-table">
-        <table class="table align-middle">
-          <thead>
-            <tr>
-              <th scope="col">{{ t('product.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.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>
-                <CartProductQuantity />
-              </td>
-              <td>
-                <span class="price">$79</span>
-              </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>
-              <td>
-                <NuxtLink to="/product-details" class="title">
-                  GPS Smartwatch with Bright Touchscreen Display
-                </NuxtLink>
-              </td>
-              <td>
-                <span class="price">$119</span>
-              </td>
-              <td>
-                <div class="product-quantity">
-                  <CartProductQuantity />
-                </div>
-              </td>
-              <td>
-                <span class="price">$119</span>
-              </td>
-              <td>
-                <button class="border-0 p-0 bg-transparent remove">
-                  <i class="ri-delete-bin-line"></i>
+      <ClientOnly>
+        <CartEmpty v-if="isEmpty" />
+
+        <div v-else class="row g-4">
+          <div class="col-lg-8">
+            <!-- Шапка списку -->
+            <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-3">
+              <h2 class="cart-title mb-0">
+                {{ t('cart.cart') }} <span class="cart-title__count">{{ cart.items.length }}</span>
+              </h2>
+              <div v-if="!confirmClear">
+                <button type="button" class="cart-clear" @click="confirmClear = true">
+                  <i class="ri-delete-bin-line"></i> {{ t('cart.clear') }}
                 </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>
-                <div class="product-quantity">
-                  <CartProductQuantity />
-                </div>
-              </td>
-              <td>
-                <span class="price">$397</span>
-              </td>
-              <td>
-                <button class="border-0 p-0 bg-transparent remove">
-                  <i class="ri-delete-bin-line"></i>
+              </div>
+              <div v-else class="cart-confirm" role="alert">
+                <span>{{ t('cart.clearConfirm') }}</span>
+                <button type="button" class="btn btn-sm btn-danger" @click="doClear">{{ t('cart.yes') }}</button>
+                <button type="button" class="btn btn-sm btn-outline-secondary" @click="confirmClear = false">
+                  {{ t('cart.cancel') }}
                 </button>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-      <div class="row justify-content-between mt-4">
-        <div class="col-xxl-4 col-lg-6">
-          <div class="d-md-flex coupon-wrap">
-            <input
-              type="text"
-              class="form-control w-100"
-              :placeholder="t('cart.coupon')"
-            />
-            <button
-              type="submit"
-              class="btn btn-warning text-white mt-3 mt-md-0 w-100"
-            >
-              {{ t('cart.applyCoupon') }}
-              <i class="flaticon-up-right-arrow"></i>
-            </button>
+              </div>
+            </div>
+
+            <div class="d-flex flex-column gap-3">
+              <CartItem
+                v-for="item in cart.items"
+                :key="item.productId"
+                :item="item"
+                @update="updateQuantity"
+                @remove="removeFromCart"
+              />
+            </div>
+          </div>
+
+          <div class="col-lg-4">
+            <CartSummary />
           </div>
         </div>
-        <div class="col-xxl-4 col-lg-6 text-end">
-          <button
-            type="submit"
-            class="btn btn-warning text-white w-100 mt-3 mt-lg-0"
-          >
-            {{ t('cart.updatePrice') }}
-            <i class="flaticon-up-right-arrow"></i>
-          </button>
-        </div>
-      </div>
 
-      <div class="total-cart">
-        <h3>{{ t('cart.cartTotals') }}</h3>
-        <ul>
-          <li class="d-flex justify-content-between">
-            <span class="title">{{ t('cart.subtotal') }}</span>
-            <span class="price">$595</span>
-          </li>
-          <li class="d-flex justify-content-between">
-            <span class="title">{{ t('cart.total') }}</span>
-            <span class="price">$595</span>
-          </li>
-        </ul>
-        <NuxtLink to="/checkout" class="btn btn-warning text-white">
-          {{ t('cart.proceedToCheckout') }}
-          <i class="flaticon-up-right-arrow"></i>
-        </NuxtLink>
-      </div>
+        <template #fallback>
+          <div class="text-center py-5 text-muted">{{ t('cart.loading') }}</div>
+        </template>
+      </ClientOnly>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 const { t } = useI18n();
+const { cart, isEmpty, updateQuantity, removeFromCart, clearCart, syncPrices } = useCart();
+const { fetchProductsByIds } = useProducts();
+
+// Свіжі ціни/знижки для товарів, що вже лежать у кошику
+onMounted(async () => {
+  const ids = cart.value.items.map((i) => i.productId);
+  if (ids.length && !cart.value.priceListId) syncPrices(await fetchProductsByIds(ids).catch(() => []));
+});
+
+// Inline-підтвердження очищення (без window.confirm)
+const confirmClear = ref(false);
+const doClear = () => {
+  clearCart();
+  confirmClear.value = false;
+};
 </script>
+
+<style scoped lang="scss">
+.cart-title { font-size: 26px; }
+.cart-title__count {
+  display: inline-block; min-width: 28px; padding: 0 8px; margin-left: 6px; border-radius: 14px; font-size: 15px;
+  line-height: 28px; text-align: center; background: var(--primary-color); color: #fff; vertical-align: middle;
+}
+.cart-clear {
+  min-height: 40px; padding: 0 14px; border: 1px solid #e7e7e7; border-radius: 10px; background: #fff; color: #c0392b; cursor: pointer;
+  &:hover { background: #fdecea; }
+  &:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }
+}
+.cart-confirm { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; .btn { min-height: 40px; } }
+</style>