@crm-market/template-shared 1.0.6 → 1.0.8

package/components/ProductDetails/index.vue

@@ -3,191 +3,58 @@
     <div class="container">
       <div class="row">
         <div class="col-lg-6">
-          <v-card-text>
-            <v-tabs-window v-model="tab">
-              <v-tabs-window-item value="img1">
-                <div class="product-details-img">
-                  <img src="~/assets/images/product-66.png" alt="product" />
-                </div>
-              </v-tabs-window-item>
-              <v-tabs-window-item value="img2">
-                <div class="product-details-img">
-                  <img src="~/assets/images/product-67.png" alt="product" />
-                </div>
-              </v-tabs-window-item>
-              <v-tabs-window-item value="img3">
-                <div class="product-details-img">
-                  <img src="~/assets/images/product-68.png" alt="product" />
-                </div>
-              </v-tabs-window-item>
-              <span class="discounts">-10%</span>
-            </v-tabs-window>
-          </v-card-text>
-
-          <v-tabs
-            v-model="tab"
-            bg-color="white"
-            class="products-tabs justify-content-center"
-          >
-            <v-tab value="img1">
-              <img src="~/assets/images/product-66.png" alt="product" />
-            </v-tab>
-            <v-tab value="img2">
-              <img src="~/assets/images/product-67.png" alt="product" />
-            </v-tab>
-            <v-tab value="img3">
-              <img src="~/assets/images/product-68.png" alt="product" />
-            </v-tab>
-          </v-tabs>
+          <ProductDetailsProductGallery :product="product" :discount="discountLabel" />
         </div>
         <div class="col-lg-6">
           <div class="product-details-content">
-            <span class="stock">
+            <span v-if="outOfStock" class="stock text-danger">{{ t('product.outOfStock') }}</span>
+            <span v-else class="stock">
               <i class="ri-check-line"></i>
               {{ t('product.inStock') }}
             </span>
-            <h3>
-              Apple MacBook Pro 16.2" with Liquid Retina XDR Display, M2 Max
-              Chip with 12-Core CPU
-            </h3>
-            <div class="d-flex gap-1 review">
-              <i class="flaticon-star"></i>
-              <i class="flaticon-star"></i>
-              <i class="flaticon-star"></i>
-              <i class="flaticon-star"></i>
-              <i class="flaticon-star"></i>
-              <span>(5 {{ t('product.reviews') }})</span>
-            </div>
-            <h2 class="price">$399 <del>$450</del></h2>
-            <div class="d-flex style-select">
-              <span>{{ t('product.style') }}:</span>
-              <h5>{{ typeText }}</h5>
-            </div>
-            <div class="select-style mb-4">
-              <input type="radio" class="btn-check" />
-              <label
-                class="btn mb-2 mb-sm-0 mr-1"
-                @click="setTypeTextToFirst"
-                :class="{ active: typeActiveButton === 'first' }"
-              >
-                Apple M1 Max Chip
-              </label>
-              <input type="radio" class="btn-check" />
-              <label
-                class="btn mb-2 mb-sm-0"
-                @click="setTypeTextToSecond"
-                :class="{ active: typeActiveButton === 'second' }"
-              >
-                Apple M1 Pro Chip
-              </label>
-            </div>
-            <div class="d-flex style-select">
-              <span>{{ t('product.capacity') }}:</span>
-              <h5>{{ capacityText }}</h5>
-            </div>
-            <div class="select-style mb-4">
-              <input type="radio" class="btn-check" />
-              <label
-                class="btn mb-2 mb-sm-0 mr-1"
-                @click="setCapacityTextToFirst"
-                :class="{ active: capacityActiveButton === 'first' }"
-              >
-                512 GB
-              </label>
+            <h3>{{ product.title }}</h3>
+            <h2 class="price">
+              {{ formatPrice(price) }}
+              <del v-if="oldPrice" class="ms-2">{{ formatPrice(oldPrice) }}</del>
+              <span v-if="product.unit" class="fs-6 fw-normal text-muted ms-1">/ {{ product.unit }}</span>
+            </h2>
+            <p v-if="discountEnd" class="pd-discount-end">
+              <i class="ri-time-line"></i>
+              {{ t('product.saleUntil', { date: discountEnd }) }}
+            </p>
 
-              <input type="radio" class="btn-check" />
-              <label
-                class="btn mb-2 mb-sm-0"
-                @click="setCapacityTextToSecond"
-                :class="{ active: capacityActiveButton === 'second' }"
-              >
-                1 TB
-              </label>
-            </div>
-            <div class="d-flex style-select">
-              <span>{{ t('product.color') }}:</span>
-              <h5>{{ colorText }}</h5>
-            </div>
-            <ul class="d-flex ps-0 mb-0 list-unstyled select-color gap-2 mb-4">
-              <li
-                class="color1"
-                @click="setColorTextToFirst"
-                :class="{ active: colorActiveButton === 'first' }"
-              ></li>
-              <li
-                class="color2"
-                @click="setColorTextToSecond"
-                :class="{ active: colorActiveButton === 'second' }"
-              ></li>
-            </ul>
             <div class="d-flex align-items-center mb-4 gap-3">
-              <ProductDetailsProductQuantity />
-              <button class="btn btn-success text-white rounded-pill">
-                <i class="ri-shopping-cart-line"></i>
-                <span>{{ t('product.addToCart') }}</span>
+              <ProductDetailsProductQuantity v-model="quantity" />
+              <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('product.inCart') : t('product.addToCart') }}</span>
               </button>
             </div>
-            <button class="d-flex align-items-center gap-3 wishlist mb-3">
-              <i class="ri-heart-line"></i>
-              <span>{{ t('product.addToWishlist') }}</span>
-            </button>
-            <button class="d-flex align-items-center gap-3 wishlist">
-              <i class="ri-eye-line"></i>
-              <span><span>565</span> {{ t('product.viewingProduct') }}</span>
+            <button type="button" class="d-flex align-items-center gap-3 wishlist mb-3" @click="toggle(product)">
+              <i :class="inWishlist ? 'ri-heart-fill text-danger' : 'ri-heart-line'"></i>
+              <span>{{ inWishlist ? t('product.inWishlist') : t('product.addToWishlist') }}</span>
             </button>
-            <ul class="services-list ps-0 mb-0 list-unstyled">
-              <li class="d-flex align-items-center">
-                <i class="ri-check-line"></i>
-                <span>{{ t('product.freeDelivery') }}</span>
-              </li>
-              <li class="d-flex align-items-center">
-                <i class="ri-check-line"></i>
-                <span>{{ t('product.moneyBack') }}</span>
-              </li>
-              <li class="d-flex align-items-center">
-                <i class="ri-check-line"></i>
-                <span>{{ t('product.returnPolicy') }}</span>
-              </li>
-            </ul>
+
             <ul class="sku-list ps-0 mb-0 list-unstyled">
-              <li class="d-flex align-items-center">
+              <li v-if="product.sku" class="d-flex align-items-center">
                 <span class="title">{{ t('product.sku') }}:</span>
-                <span class="title2">SMTGS6T45</span>
-              </li>
-              <li class="d-flex align-items-center">
-                <span class="title">{{ t('product.category') }}:</span>
-                <span class="title2">Computer</span>
-              </li>
-              <li class="d-flex align-items-center">
-                <span class="title">{{ t('nav.tags') }}:</span>
-                <span class="title2">laptop, macbook, PC</span>
-              </li>
-            </ul>
-            <ul
-              class="social-link ps-0 mb-0 list-unstyled d-flex gap-2 flex-wrap"
-            >
-              <li class="d-flex align-items-center me-2">
-                <span>{{ t('product.share') }}:</span>
-              </li>
-              <li class="d-flex align-items-center gap-2">
-                <a href="https://facebook.com/" target="_blank">
-                  <i class="ri-facebook-fill"></i>
-                </a>
+                <span class="title2">{{ product.sku }}</span>
               </li>
-              <li class="d-flex align-items-center gap-2">
-                <a href="https://twitter.com/" target="_blank">
-                  <i class="ri-twitter-x-line"></i>
-                </a>
+              <li v-if="brandNames" class="d-flex align-items-center">
+                <span class="title">{{ t('product.brand') }}:</span>
+                <span class="title2">{{ brandNames }}</span>
               </li>
-              <li class="d-flex align-items-center gap-2">
-                <a href="https://linkedin.com/" target="_blank">
-                  <i class="ri-linkedin-fill"></i>
-                </a>
+              <li v-if="product.categories?.length" class="d-flex align-items-center">
+                <span class="title">{{ t('product.category') }}:</span>
+                <span class="title2">
+                  <template v-for="(cat, i) in product.categories" :key="cat.id">
+                    <NuxtLink :to="categoryPath(cat)">{{ cat.name }}</NuxtLink><span v-if="i < product.categories.length - 1">, </span>
+                  </template>
+                </span>
               </li>
-              <li class="d-flex align-items-center gap-2">
-                <a href="https://whatsapp.com/" target="_blank">
-                  <i class="ri-whatsapp-line"></i>
-                </a>
+              <li v-if="product.keywords?.length" class="d-flex align-items-center">
+                <span class="title">{{ t('product.tags') }}:</span>
+                <span class="title2">{{ product.keywords.join(', ') }}</span>
               </li>
             </ul>
           </div>
@@ -196,75 +63,68 @@
 
       <div class="pt-60"></div>
 
-      <ProductDetailsTab />
+      <ProductDetailsTab :product="product" />
     </div>
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, ref } from "vue";
-
-export default defineComponent({
-  name: "ProductDetails",
-  data: () => ({
-    tab: null,
-  }),
-  setup() {
-    const { t } = useI18n();
-    const typeText = ref("Apple M1 Max Chip");
-    const typeActiveButton = ref("first");
-
-    const setTypeTextToFirst = () => {
-      typeText.value = "Apple M1 Max Chip";
-      typeActiveButton.value = "first";
-    };
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
+import {
+  formatPrice,
+  getProductDiscountEnd,
+  getProductDiscountLabel,
+  getProductOldPrice,
+  getProductPrice,
+  getProductImage,
+  type Product,
+} from '../../composables/useProducts';
 
-    const setTypeTextToSecond = () => {
-      typeText.value = "Apple M1 Pro Chip";
-      typeActiveButton.value = "second";
-    };
+const props = defineProps<{ product: Product }>();
 
-    const capacityText = ref("512 GB");
-    const capacityActiveButton = ref("first");
+const { t } = useI18n();
+const { addToCart, isInCart } = useCart();
+const { ids, load, toggle } = useWishlist();
 
-    const setCapacityTextToFirst = () => {
-      capacityText.value = "512 GB";
-      capacityActiveButton.value = "first";
-    };
+const quantity = ref(1);
 
-    const setCapacityTextToSecond = () => {
-      capacityText.value = "1 TB";
-      capacityActiveButton.value = "second";
-    };
+const price = computed(() => getProductPrice(props.product));
+const oldPrice = computed(() => getProductOldPrice(props.product));
+// Бейдж «-20%» / «-50 ₴» (у галереї) і дата завершення акції
+const discountLabel = computed(() => getProductDiscountLabel(props.product));
+const discountEnd = computed(() => getProductDiscountEnd(props.product));
+const outOfStock = computed(() => typeof props.product.stock === 'number' && props.product.stock <= 0);
+const inCart = computed(() => isInCart(props.product.id));
+const inWishlist = computed(() => ids.value.includes(props.product.id));
+const brandNames = computed(() =>
+  (props.product.brands || []).map((b: any) => b?.name).filter(Boolean).join(', '),
+);
 
-    const colorText = ref("Silver");
-    const colorActiveButton = ref("first");
+const handleAddToCart = () => {
+  if (outOfStock.value) return;
+  addToCart(
+    {
+      productId: props.product.id,
+      name: props.product.title,
+      price: oldPrice.value || price.value,
+      discountPrice: oldPrice.value ? price.value : undefined,
+      image: getProductImage(props.product),
+      unit: props.product.unit,
+    },
+    quantity.value,
+  );
+};
 
-    const setColorTextToFirst = () => {
-      colorText.value = "Silver";
-      colorActiveButton.value = "first";
-    };
-
-    const setColorTextToSecond = () => {
-      colorText.value = "Gray";
-      colorActiveButton.value = "second";
-    };
-
-    return {
-      t,
-      typeText,
-      typeActiveButton,
-      setTypeTextToFirst,
-      setTypeTextToSecond,
-      capacityText,
-      capacityActiveButton,
-      setCapacityTextToFirst,
-      setCapacityTextToSecond,
-      colorText,
-      colorActiveButton,
-      setColorTextToFirst,
-      setColorTextToSecond,
-    };
-  },
-});
+onMounted(load);
 </script>
+
+<style scoped>
+.pd-discount-end {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin: -6px 0 18px;
+  color: #c62828;
+  font-weight: 500;
+}
+</style>

package/components/Products/index.vue

@@ -10,7 +10,17 @@
           md="3"
           class="mb-4 mt-xxl-0 overflow-hidden"
         >
-          <div class="sidebar product-sidebar">
+          <!-- Мобільний: кнопка «Фільтри» згортає/розгортає панель -->
+          <button
+            type="button"
+            class="btn btn-outline-primary w-100 d-md-none"
+            :aria-expanded="filtersOpen"
+            @click="filtersOpen = !filtersOpen"
+          >
+            <i class="ri-filter-3-line me-1"></i>{{ t('catalog.filters') }}
+            <i :class="filtersOpen ? 'ri-arrow-up-s-line' : 'ri-arrow-down-s-line'"></i>
+          </button>
+          <div :class="['sidebar product-sidebar', filtersOpen ? 'd-block mt-3' : 'd-none d-md-block']">
             <!-- Categories filter -->
             <div class="single-sidebar-widget">
               <h3>{{ t('product.filterByCategories') }}</h3>
@@ -66,8 +76,8 @@
               </button>
             </div>
 
-            <!-- Sort -->
-            <div class="single-sidebar-widget">
+            <!-- Sort (на мобільному винесено над товари) -->
+            <div class="single-sidebar-widget d-none d-md-block">
               <h3>{{ t('product.sortBy') }}</h3>
               <select class="form-select form-select-sm" v-model="sortBy">
                 <option value="newest">{{ t('product.newest') }}</option>
@@ -81,6 +91,16 @@
 
         <!-- Products grid -->
         <v-col cols="12" xl="10" lg="9" md="9">
+          <!-- Мобільне сортування над списком -->
+          <div class="d-md-none mb-3">
+            <select class="form-select form-select-sm" v-model="sortBy" :aria-label="t('product.sortBy')">
+              <option value="newest">{{ t('product.newest') }}</option>
+              <option value="price-asc">{{ t('product.priceLowHigh') }}</option>
+              <option value="price-desc">{{ t('product.priceHighLow') }}</option>
+              <option value="name">{{ t('product.nameAZ') }}</option>
+            </select>
+          </div>
+
           <!-- Search info -->
           <div class="d-flex align-items-center justify-content-between mb-3" v-if="searchQuery || selectedCategoryId">
             <p class="mb-0 text-muted">
@@ -160,21 +180,32 @@ import { defineComponent, ref, computed, watch, onMounted } from "vue";
 
 export default defineComponent({
   name: "ProductsIndex",
-  setup() {
+  props: {
+    // Категорія зі сторінки /category/<slug>-<id>: початковий фільтр, в URL не потрапляє
+    categoryId: { type: String, default: "" },
+  },
+  async setup(props) {
     const { t } = useI18n();
     const route = useRoute();
     const router = useRouter();
-    const { fetchProducts, products, loading } = useProducts();
+    // Локальний стан сторінки: глобальні products/loading з useProducts ділять інші секції, тому не підходять
+    const { fetchPage } = useProducts();
+    // useState: результат SSR передається клієнту без повторного запиту і без миготіння «0 товарів»
+    const products = useState<any[]>('catalog-products', () => []);
+    const loading = useState<boolean>('catalog-loading', () => true);
+    const loaded = useState<boolean>('catalog-loaded', () => false);
     const { topLevelCategories, getCategoryById } = useCategories();
 
-    const selectedCategoryId = ref('');
+    const selectedCategoryId = ref(props.categoryId || '');
     const minPrice = ref<number | undefined>(undefined);
     const maxPrice = ref<number | undefined>(undefined);
     const sortBy = ref('newest');
     const searchQuery = ref('');
     const currentPage = ref(1);
-    const totalProducts = ref(0);
+    const totalProducts = useState<number>('catalog-total', () => 0);
     const perPage = 20;
+    // Мобільна панель фільтрів: за замовчуванням згорнута
+    const filtersOpen = ref(false);
 
     const selectedCategoryName = computed(() => {
       if (!selectedCategoryId.value) return '';
@@ -201,18 +232,27 @@ export default defineComponent({
       const sortField = sortParts[0] as any;
       const sortOrder = sortParts[1] as 'asc' | 'desc' | undefined;
 
+      loading.value = true;
       try {
-        const result = await fetchProducts({
+        const page = await fetchPage({
           categoryId: selectedCategoryId.value || undefined,
           minPrice: minPrice.value,
           maxPrice: maxPrice.value,
           search: searchQuery.value || undefined,
           sortBy: sortField === 'price' ? 'price' : sortField === 'name' ? 'name' : 'newest',
           sortOrder: sortOrder || (sortField === 'price' ? 'asc' : 'desc'),
-        });
-        totalProducts.value = result?.length || 0;
+          limit: perPage,
+          offset: (currentPage.value - 1) * perPage,
+        } as any);
+        products.value = page.items;
+        totalProducts.value = page.total;
+        loaded.value = true;
       } catch (e) {
         console.error('Error loading products:', e);
+        products.value = [];
+        totalProducts.value = 0;
+      } finally {
+        loading.value = false;
       }
     };
 
@@ -242,18 +282,19 @@ export default defineComponent({
 
     const syncToUrl = () => {
       const query: any = {};
-      if (selectedCategoryId.value) query.categoryId = selectedCategoryId.value;
+      if (selectedCategoryId.value && !props.categoryId) query.categoryId = selectedCategoryId.value;
       if (searchQuery.value) query.search = searchQuery.value;
       if (minPrice.value) query.minPrice = minPrice.value;
       if (maxPrice.value) query.maxPrice = maxPrice.value;
       if (sortBy.value !== 'newest') query.sortBy = sortBy.value;
       if (currentPage.value > 1) query.page = currentPage.value;
-      router.replace({ path: '/products', query });
+      // На сторінці категорії лишаємось на її адресі (/category/<slug>-<id>?page=2)
+      router.replace({ path: props.categoryId ? route.path : '/products', query });
     };
 
     const syncFromUrl = () => {
       const q = route.query;
-      if (q.categoryId) selectedCategoryId.value = q.categoryId as string;
+      if (q.categoryId && !props.categoryId) selectedCategoryId.value = q.categoryId as string;
       if (q.search) searchQuery.value = q.search as string;
       if (q.minPrice) minPrice.value = Number(q.minPrice);
       if (q.maxPrice) maxPrice.value = Number(q.maxPrice);
@@ -262,16 +303,37 @@ export default defineComponent({
     };
 
     // Watch for category and sort changes
-    watch(selectedCategoryId, () => applyFilters());
+    watch(selectedCategoryId, (id) => {
+      // На сторінці категорії інший вибір у фільтрі — перехід на адресу вибраної категорії (або в каталог)
+      if (props.categoryId && id !== props.categoryId) {
+        const cat = id ? getCategoryById(id) : undefined;
+        router.push(cat ? categoryPath(cat) : '/products');
+        return;
+      }
+      applyFilters();
+    });
     watch(sortBy, () => applyFilters());
+    // Інша категорія в props — одразу очищаємо список, щоб не блимали товари попередньої
+    watch(() => props.categoryId, (id) => {
+      products.value = [];
+      loading.value = true;
+      if (selectedCategoryId.value === (id || '')) applyFilters();
+      else selectedCategoryId.value = id || ''; // далі підхопить watch(selectedCategoryId)
+    });
 
+    // SSR: рендеримо каталог одразу (SEO), клієнт лише гідрує; повторно вантажимо тільки при зміні фільтрів
+    // Хуки життєвого циклу реєструємо ДО першого await (вимога async setup)
     onMounted(() => {
-      syncFromUrl();
-      loadProducts();
+      if (!loaded.value) loadProducts();
     });
+    syncFromUrl();
+    if (import.meta.server) {
+      await loadProducts();
+    }
 
     return {
       t,
+      filtersOpen,
       products,
       loading,
       topLevelCategories,

package/components/TermsConditions/index.vue

@@ -1,112 +1,8 @@
-<template>
-  <div class="ptb-60">
-    <div class="container">
-      <div class="main-content-text">
-        <span class="update">Last updated: February 2024</span>
-        <h3>Terms & conditions</h3>
-        <p>
-          Turpis gravida turpis mauris magna in libero ac dis consequat.
-          Imperdiet ac semper quisque volutpat consectetur cursus non pretium
-          pharetra. Nisl duis blandit dui imperdiet nec id integer. Elit varius
-          cras arcu tempor integer in.
-        </p>
-        <p>
-          Quam nunc arcu nunc a lobortis convallis magnis dolor. Integer
-          malesuada vel mi eu elementum. Etiam eget urna quis dui amet facilisis
-          fringilla sed. Massa vitae accumsan viverra in morbi nec volutpat
-          aenean tortor. At nec sagittis eget placerat. Mi accumsan massa vitae
-          etiam nisi suspendisse condimentum elementum. Arcu varius id ipsum
-          arcu et diam non rutrum. Auctor elit malesuada non aenean posuere
-          mattis iaculis mauris nibh.
-        </p>
-
-        <div class="gap-20"></div>
-
-        <h3>Intellectual property and acceptable use</h3>
-        <p>
-          Turpis gravida turpis mauris magna in libero ac dis consequat.
-          Imperdiet ac semper quisque volutpat consectetur cursus non pretium
-          pharetra. Nisl duis blandit dui imperdiet nec id integer. Elit varius
-          cras arcu tempor integer in. Quam nunc arcu nunc a lobortis convallis
-          magnis dolor. Integer malesuada vel mi eu elementum. Etiam eget urna
-          quis dui amet facilisis fringilla sed. Massa vitae accumsan viverra in
-          morbi nec volutpat aenean tortor. At nec sagittis eget placerat. Mi
-          accumsan massa vitae etiam nisi suspendisse condimentum elementum.
-          Arcu varius id ipsum arcu et diam non rutrum. Auctor elit malesuada
-          non aenean posuere mattis iaculis mauris nibh.
-        </p>
-
-        <div class="gap-20"></div>
-
-        <h3>Limitation of liability</h3>
-        <p>
-          Turpis gravida turpis mauris magna in libero ac dis consequat.
-          Imperdiet ac semper quisque volutpat consectetur cursus non pretium
-          pharetra. Nisl duis blandit dui imperdiet nec id integer. Elit varius
-          cras arcu tempor integer in.
-        </p>
-        <p>
-          Quam nunc arcu nunc a lobortis convallis magnis dolor. Integer
-          malesuada vel mi eu elementum. Etiam eget urna quis dui amet facilisis
-          fringilla sed. Massa vitae accumsan viverra in morbi nec volutpat
-          aenean tortor. At nec sagittis eget placerat. Mi accumsan massa vitae
-          etiam nisi suspendisse condimentum elementum. Arcu varius id ipsum
-          arcu et diam non rutrum. Auctor elit malesuada non aenean posuere
-          mattis iaculis mauris nibh.
-        </p>
-        <ol>
-          <li>
-            Imperdiet ac semper quisque volutpat consectetur cursus non pretium
-            pharetra.
-          </li>
-          <li>Nisl duis blandit dui imperdiet nec id integer.</li>
-          <li>Quam nunc arcu nunc a lobortis convallis magnis dolor.</li>
-          <li>
-            Massa vitae accumsan viverra in morbi nec volutpat aenean tortor.
-          </li>
-        </ol>
-
-        <div class="gap-20"></div>
-
-        <h3>Registration</h3>
-        <p>
-          Turpis gravida turpis mauris magna in libero ac dis consequat.
-          Imperdiet ac semper quisque volutpat consectetur cursus non pretium
-          pharetra. Nisl duis blandit dui imperdiet nec id integer. Elit varius
-          cras arcu tempor integer in. Quam nunc arcu nunc a lobortis convallis
-          magnis dolor. Integer malesuada vel mi eu elementum. Etiam eget urna
-          quis dui amet facilisis fringilla sed. Massa vitae accumsan viverra in
-          morbi nec volutpat aenean tortor. At nec sagittis eget placerat. Mi
-          accumsan massa vitae etiam nisi suspendisse condimentum elementum.
-          Arcu varius id ipsum arcu et diam non rutrum. Auctor elit malesuada
-          non aenean posuere mattis iaculis mauris nibh.
-        </p>
-
-        <div class="gap-20"></div>
+<script setup lang="ts">
+// Умови використання: HTML продавця або дефолтний текст
+const { pageHtml } = useStaticPages();
+</script>
 
-        <h3>Password and security</h3>
-        <p>
-          Turpis gravida turpis mauris magna in libero ac dis consequat.
-          Imperdiet ac semper quisque volutpat consectetur cursus non pretium
-          pharetra. Nisl duis blandit dui imperdiet nec id integer. Elit varius
-          cras arcu tempor integer in.
-        </p>
-        <p>
-          Quam nunc arcu nunc a lobortis convallis magnis dolor. Integer
-          malesuada vel mi eu elementum. Etiam eget urna quis dui amet facilisis
-          fringilla sed. Massa vitae accumsan viverra in morbi nec volutpat
-          aenean tortor. At nec sagittis eget placerat. Mi accumsan massa vitae
-          etiam nisi suspendisse condimentum elementum. Arcu varius id ipsum
-          arcu et diam non rutrum. Auctor elit malesuada non aenean posuere
-          mattis iaculis mauris nibh.
-        </p>
-      </div>
-    </div>
-  </div>
+<template>
+  <AboutUsStaticContent :html="pageHtml('terms')" />
 </template>
-
-<script>
-export default {
-  name: "TermsConditions",
-};
-</script>