@crm-market/template-shared 1.0.6 → 1.0.8

package/pages/order-success.vue

@@ -0,0 +1,113 @@
+<template>
+  <div>
+    <CommonPageBanner :pageTitle="t('checkout.successPageTitle')" />
+    <div class="ptb-60">
+      <div class="container text-center" style="max-width: 560px">
+        <ClientOnly>
+          <template v-if="checking">
+            <h3 class="mb-3">{{ t('checkout.checkingPayment') }}</h3>
+            <p class="text-muted">{{ t('checkout.waitFewSeconds') }}</p>
+          </template>
+          <template v-else>
+            <h3 class="mb-3">{{ title }}</h3>
+            <p v-if="orderNumber" class="mb-1">
+              {{ t('checkout.orderNumber') }}: <b>{{ orderNumber }}</b>
+            </p>
+            <ul v-if="summary && (summary.discount || summary.total)" class="order-result list-unstyled mx-auto mb-3">
+              <li v-if="summary.discount">
+                <span>{{ summary.promoCode ? t('checkout.promoApplied', { code: summary.promoCode }) : t('checkout.orderDiscount') }}</span>
+                <b class="order-result__discount">−{{ formatUah(summary.discount) }}</b>
+              </li>
+              <li v-if="summary.total">
+                <span>{{ t('checkout.orderTotal') }}</span>
+                <b>{{ formatUah(summary.total) }}</b>
+              </li>
+            </ul>
+            <p class="text-muted mb-4">{{ text }}</p>
+            <NuxtLink :to="status === 'failed' ? '/products' : '/'" class="btn btn-warning text-white">
+              {{ status === 'failed' ? t('cart.toCatalog') : t('checkout.toHome') }}
+            </NuxtLink>
+          </template>
+          <template #fallback>
+            <p class="text-muted">{{ t('cart.loading') }}</p>
+          </template>
+        </ClientOnly>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue';
+const { t } = useI18n();
+const route = useRoute();
+const { fetchOrderStatus, readOrderResult } = useCheckout();
+const { clearCart } = useCart();
+
+const orderNumber = ref(String(route.query.n || ''));
+const online = route.query.paid !== undefined;
+const checking = ref(online);
+const status = ref<'cod' | 'paid' | 'pending' | 'failed'>(online ? 'pending' : 'cod');
+
+const title = computed(() => {
+  if (status.value === 'paid') return t('checkout.paidTitle');
+  if (status.value === 'failed') return t('checkout.failedTitle');
+  return t('checkout.successTitle');
+});
+const text = computed(() => {
+  if (status.value === 'paid') return t('checkout.paidText');
+  if (status.value === 'failed') return t('checkout.failedText');
+  if (status.value === 'pending') return t('checkout.pendingText');
+  return t('checkout.successText');
+});
+
+// Webhook може оновити статус із затримкою — опитуємо кілька разів
+const pollStatus = async (orderId: string) => {
+  for (let i = 0; i < 5; i++) {
+    try {
+      const s = await fetchOrderStatus(orderId);
+      if (s?.orderNumber) orderNumber.value = s.orderNumber;
+      if (s?.paymentStatus === 'paid') { status.value = 'paid'; return; }
+      if (s?.paymentStatus === 'failed') { status.value = 'failed'; return; }
+      status.value = 'pending';
+    } catch {
+      status.value = 'pending';
+    }
+    if (i < 4) await new Promise((r) => setTimeout(r, 2000));
+  }
+};
+
+// Знижка/сума зі збереженої відповіді створення замовлення (лише якщо це те саме замовлення)
+const summary = ref<ReturnType<typeof readOrderResult>>(null);
+
+onMounted(async () => {
+  summary.value = readOrderResult(String(route.query.order || ''));
+  if (!online) return;
+  // Повернення з платіжки: кошик уже порожній, на всяк випадок чистимо
+  clearCart();
+  const oid = String(route.query.order || localStorage.getItem('lastOrderId') || '');
+  if (oid) await pollStatus(oid);
+  checking.value = false;
+});
+
+useHead({ title: t('checkout.successPageTitle') });
+</script>
+
+<style scoped>
+.order-result {
+  max-width: 360px;
+  padding: 12px 16px;
+  border: 1px solid #e7e7e7;
+  border-radius: 12px;
+  text-align: left;
+}
+.order-result li {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 4px 0;
+}
+.order-result__discount {
+  color: var(--primary-color);
+}
+</style>

package/pages/privacy-policy.vue

@@ -1,11 +1,11 @@
+<script setup lang="ts">
+const { t } = useI18n();
+useHead({ title: () => t('pages.privacy.title') });
+</script>
+
 <template>
   <div>
-    <CommonPageBanner :pageTitle="t('common.privacyPolicy')" />
+    <CommonPageBanner :pageTitle="t('pages.privacy.title')" />
     <PrivacyPolicy />
   </div>
 </template>
-
-<script setup lang="ts">
-definePageMeta({ layout: 'inner' });
-const { t } = useI18n();
-</script>

package/pages/product/[slug].vue

@@ -0,0 +1,82 @@
+<template>
+  <div>
+    <CommonPageBanner v-if="product" :pageTitle="product.title" :crumbs="crumbs" />
+
+    <ProductDetails v-if="product" :key="product.id" :product="product" />
+    <ProductDetailsRelatedProducts v-if="product" :key="`related-${product.id}`" :product="product" />
+    <ProductDetailsRecentlyViewed v-if="product" :key="`recent-${product.id}`" :currentId="product.id" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, watch } from 'vue';
+import { getProductImage, htmlToText } from '../../composables/useProducts';
+
+const { t } = useI18n();
+const route = useRoute();
+const { fetchProductById } = useProducts();
+const { track } = useRecent();
+
+const slug = computed(() => String(route.params.slug || ''));
+const productId = computed(() => parseIdFromSlug(slug.value));
+
+// SSR + клієнт: товар за id з кінця slug; null — не знайдено
+const { data: product, error } = await useAsyncData(
+  () => `product-${productId.value}`,
+  async () => (productId.value ? await fetchProductById(productId.value) : null),
+  { watch: [productId] },
+);
+
+// Збій API — це не «немає товару»: віддаємо 502, а не 404 (щоб пошуковики не викинули сторінку)
+if (error.value) {
+  throw createError({ statusCode: 502, statusMessage: 'Не вдалося завантажити товар', fatal: false });
+}
+if (!product.value) {
+  if (import.meta.server) setResponseStatus(useRequestEvent()!, 404);
+  throw createError({ statusCode: 404, statusMessage: 'Товар не знайдено', fatal: false });
+}
+
+// Назву змінили — переспрямовуємо на канонічну адресу (301)
+const canonical = productPath(product.value);
+if (decodeURIComponent(route.path) !== canonical) {
+  await navigateTo({ path: canonical, query: route.query }, { redirectCode: 301, replace: true });
+}
+
+// Хлібні крихти: Головна → Категорія → Товар
+const crumbs = computed(() => {
+  const cat = product.value?.categories?.[0];
+  return cat ? [{ label: cat.name, to: categoryPath(cat) }] : [{ label: t('nav.products'), to: '/products' }];
+});
+
+// Запам'ятовуємо перегляд (лише клієнт)
+watch(
+  () => product.value?.id,
+  (id) => { if (id && import.meta.client) track(id); },
+  { immediate: true },
+);
+
+// Опис без HTML, до 160 символів (з обрізкою по слову)
+const description = computed(() => {
+  const text = htmlToText(product.value?.description);
+  if (text.length <= 160) return text;
+  return text.slice(0, 157).replace(/\s+\S*$/, '') + '...';
+});
+const ogImage = computed(() => getProductImage(product.value));
+const { canonicalUrl } = useStoreOrigin();
+const canonicalHref = computed(() => (product.value ? canonicalUrl(productPath(product.value)) : ''));
+
+useHead({
+  title: () => product.value?.title || t('product.notFound'),
+  link: () => (canonicalHref.value ? [{ key: 'canonical', rel: 'canonical', href: canonicalHref.value }] : []),
+});
+useSeoMeta({
+  description: () => description.value || undefined,
+  ogTitle: () => product.value?.title,
+  ogDescription: () => description.value || undefined,
+  ogImage: () => ogImage.value || undefined,
+  ogUrl: () => canonicalHref.value || undefined,
+  ogType: 'website' as any, // og:product не входить у типи Nuxt, виставляємо нижче
+});
+useHead({ meta: [{ key: 'og:type', property: 'og:type', content: 'product' }] });
+useProductJsonLd(product);
+</script>

package/pages/product-details.vue

@@ -1,11 +1,19 @@
 <template>
-  <div>
-    <CommonPageBanner :pageTitle="t('product.productDetails')" />
-    <ProductDetails />
-  </div>
+  <div></div>
 </template>
 
 <script setup lang="ts">
-definePageMeta({ layout: 'inner' });
-const { t } = useI18n();
+// Стара адреса /product-details?id=<uuid>: 301 на /product/<slug>-<id> або 404
+const route = useRoute();
+const { fetchProductById } = useProducts();
+
+const id = String(route.query.id || '').trim();
+const product = id ? await fetchProductById(id).catch(() => null) : null;
+
+if (product) {
+  await navigateTo(productPath(product), { redirectCode: 301, replace: true });
+} else {
+  if (import.meta.server) setResponseStatus(useRequestEvent()!, 404);
+  throw createError({ statusCode: 404, statusMessage: 'Товар не знайдено', fatal: false });
+}
 </script>

package/pages/products.vue

@@ -6,6 +6,17 @@
 </template>
 
 <script setup lang="ts">
-definePageMeta({ layout: 'inner' });
 const { t } = useI18n();
+const route = useRoute();
+const { getCategoryById } = useCategories();
+
+// Стара адреса /products?categoryId=<id> без інших фільтрів → 301 на сторінку категорії.
+// Із фільтрами (search, ціна, сортування) лишається каталогом-фільтром.
+const q = route.query;
+const onlyCategory = q.categoryId && !q.search && !q.minPrice && !q.maxPrice && !q.sortBy;
+const category = onlyCategory ? getCategoryById(String(q.categoryId)) : undefined;
+if (category) {
+  const query = q.page ? { page: q.page } : undefined;
+  await navigateTo({ path: categoryPath(category), query }, { redirectCode: 301, replace: true });
+}
 </script>

package/pages/returns.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+const { t } = useI18n();
+const { pageHtml } = useStaticPages();
+useHead({ title: () => t('pages.returns.title') });
+</script>
+
+<template>
+  <div>
+    <CommonPageBanner :pageTitle="t('pages.returns.title')" />
+    <AboutUsStaticContent :html="pageHtml('returns')" />
+  </div>
+</template>

package/pages/terms-conditions.vue

@@ -1,11 +1,11 @@
+<script setup lang="ts">
+const { t } = useI18n();
+useHead({ title: () => t('pages.terms.title') });
+</script>
+
 <template>
   <div>
-    <CommonPageBanner :pageTitle="t('common.termsConditions')" />
+    <CommonPageBanner :pageTitle="t('pages.terms.title')" />
     <TermsConditions />
   </div>
 </template>
-
-<script setup lang="ts">
-definePageMeta({ layout: 'inner' });
-const { t } = useI18n();
-</script>

package/pages/wishlist.vue

@@ -1,11 +1,11 @@
 <template>
   <div>
-    <CommonPageBanner :pageTitle="t('product.wishlist')" />
+    <CommonPageBanner :pageTitle="t('wishlist.title')" />
     <Wishlist />
   </div>
 </template>
 
 <script setup lang="ts">
-definePageMeta({ layout: 'inner' });
 const { t } = useI18n();
+useHead({ title: () => t('wishlist.title'), meta: [{ name: 'robots', content: 'noindex' }] });
 </script>

package/utils/image.ts

@@ -1,4 +1,3 @@
-import { useRuntimeConfig } from '#imports';
 import { getApiBaseUrl } from './api';
 
 /**

package/utils/seo-urls.ts

@@ -0,0 +1,70 @@
+/**
+ * SEO-адреси: людські URL для товарів і категорій.
+ * Формат: /product/<slug>-<uuid>, /category/<slug>-<uuid>.
+ * Id (uuid) завжди в кінці — за ним сторінка знаходить сутність, slug лише для краси.
+ */
+
+// Транслітерація за офіційною таблицею (КМУ №55, 2010) + російські літери
+const MAP: Record<string, string> = {
+  а: 'a', б: 'b', в: 'v', г: 'h', ґ: 'g', д: 'd', е: 'e', ж: 'zh', з: 'z', и: 'y', і: 'i',
+  к: 'k', л: 'l', м: 'm', н: 'n', о: 'o', п: 'p', р: 'r', с: 's', т: 't', у: 'u', ф: 'f',
+  х: 'kh', ц: 'ts', ч: 'ch', ш: 'sh', щ: 'shch',
+  // російські
+  ы: 'y', э: 'e',
+};
+// Літери, що пишуться інакше на початку слова: [початок, решта]
+const WORD_START: Record<string, [string, string]> = {
+  є: ['ye', 'ie'], ї: ['yi', 'i'], й: ['y', 'i'], ю: ['yu', 'iu'], я: ['ya', 'ia'],
+  ё: ['yo', 'e'],
+};
+// Знак м'якшення, апостроф та тверді знаки відкидаються
+const DROP = new Set(['ь', 'ъ', "'", '’', 'ʼ', '`', '´']);
+
+const MAX_SLUG = 80;
+const UUID_RE = /[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
+
+/** Перетворює текст на slug: латиниця нижнім регістром, цифри та одиночні дефіси. */
+export const slugify = (text: string | null | undefined): string => {
+  const src = String(text ?? '').toLowerCase();
+  let out = '';
+  let prevIsLetter = false;
+  for (const ch of src) {
+    if (DROP.has(ch)) continue; // апостроф не розриває слово
+    const start = WORD_START[ch];
+    if (start) {
+      out += prevIsLetter ? start[1] : start[0];
+      prevIsLetter = true;
+    } else if (MAP[ch] !== undefined) {
+      out += MAP[ch];
+      prevIsLetter = true;
+    } else if (/[a-z0-9]/.test(ch)) {
+      out += ch;
+      prevIsLetter = /[a-z]/.test(ch);
+    } else {
+      out += '-';
+      prevIsLetter = false;
+    }
+  }
+  let slug = out.replace(/-+/g, '-').replace(/^-|-$/g, '');
+  if (slug.length > MAX_SLUG) slug = slug.slice(0, MAX_SLUG).replace(/-+$/, '');
+  return slug;
+};
+
+const build = (base: string, name: string | undefined, id: string) => {
+  const slug = slugify(name);
+  return slug ? `${base}/${slug}-${id}` : `${base}/${id}`;
+};
+
+/** Канонічна адреса товару. */
+export const productPath = (product: { id: string; title?: string; name?: string }): string =>
+  build('/product', product.title || product.name, product.id);
+
+/** Канонічна адреса категорії. */
+export const categoryPath = (category: { id: string; name?: string }): string =>
+  build('/category', category.name, category.id);
+
+/** Дістає uuid з кінця slug-а; null, якщо його немає. */
+export const parseIdFromSlug = (slug: string | null | undefined): string | null => {
+  const m = String(slug ?? '').match(UUID_RE);
+  return m ? m[0].toLowerCase() : null;
+};

package/utils/store-origin.ts

@@ -0,0 +1,36 @@
+/**
+ * Чисті хелпери основного домену магазину (працюють і на сервері, і в застосунку).
+ */
+export interface StoreDomainInfo {
+  subdomain?: string | null;
+  customDomain?: string | null;
+  customDomainVerified?: boolean | null;
+}
+
+/** Локальна розробка: *.localhost / localhost / IP — нічого не редіректимо. */
+export const isDevHostname = (hostname: string): boolean =>
+  hostname === 'localhost' || hostname.endsWith('.localhost') || /^\d{1,3}(\.\d{1,3}){3}$/.test(hostname);
+
+/**
+ * Основний origin магазину: верифікований власний домен, інакше <subdomain>.<baseDomain>.
+ * У dev (або без даних про домен) повертає fallbackOrigin — поточний origin запиту.
+ */
+export const computeStoreOrigin = (
+  info: StoreDomainInfo | null | undefined,
+  baseDomain: string,
+  requestHostname: string,
+  fallbackOrigin: string,
+): string => {
+  if (!requestHostname || isDevHostname(requestHostname)) return fallbackOrigin;
+  const custom = (info?.customDomain || '').trim().toLowerCase();
+  if (info?.customDomainVerified && custom) return `https://${custom}`;
+  if (info?.subdomain && baseDomain) return `https://${info.subdomain}.${baseDomain}`;
+  return fallbackOrigin;
+};
+
+/** Канонічна адреса: origin + path без query; ?page=N лише для N>1. */
+export const buildCanonicalUrl = (origin: string, path: string, page?: number | string | null): string => {
+  const clean = (path || '/').split('?')[0].split('#')[0] || '/';
+  const n = Number(page);
+  return origin.replace(/\/$/, '') + clean + (Number.isFinite(n) && n > 1 ? `?page=${Math.floor(n)}` : '');
+};

package/components/AboutUs/AboutUsTuan.vue

@@ -1,25 +0,0 @@
-<template>
-  <div class="about-us-area ptb-60">
-    <div class="container">
-      <div class="about-content">
-        <h2>About Us Tuan</h2>
-        <p>
-          With more than 18 years of expertise, we have created thousands of
-          strategic discovery processes that allow us to connect and understand
-          by removing layers.
-        </p>
-        <div class="about-video">
-          <video loop="" muted="" autoplay="" poster="#">
-            <source src="~/assets/images/about.mp4" type="video/mp4" />
-          </video>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "AboutUsTuan",
-};
-</script>

package/components/AboutUs/Statistics.vue

@@ -1,42 +0,0 @@
-<template>
-  <div class="pb-35">
-    <div class="container">
-      <v-row class="justify-content-center">
-        <v-col cols="12" lg="3" sm="6">
-          <div class="single-counter-item">
-            <h2>50M</h2>
-            <h3>Goods for Purchase</h3>
-            <p>Tacite sociosqu litora torquent per conubia class aptent.</p>
-          </div>
-        </v-col>
-        <v-col cols="12" lg="3" sm="6">
-          <div class="single-counter-item">
-            <h2>5.5K</h2>
-            <h3>Contented Client</h3>
-            <p>Tacite sociosqu litora torquent per conubia class aptent.</p>
-          </div>
-        </v-col>
-        <v-col cols="12" lg="3" sm="6">
-          <div class="single-counter-item">
-            <h2>14K</h2>
-            <h3>Associated Brand</h3>
-            <p>Tacite sociosqu litora torquent per conubia class aptent.</p>
-          </div>
-        </v-col>
-        <v-col cols="12" lg="3" sm="6">
-          <div class="single-counter-item">
-            <h2>35M</h2>
-            <h3>Expanding Purchasers</h3>
-            <p>Tacite sociosqu litora torquent per conubia class aptent.</p>
-          </div>
-        </v-col>
-      </v-row>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "Statistics",
-};
-</script>

package/components/AboutUs/SubscribeToTheNewsletter.vue

@@ -1,57 +0,0 @@
-<template>
-  <div class="subscribe-area pb-60">
-    <div class="container">
-      <div
-        class="bg-img subscribe-wrap"
-        :style="{
-          'background-image': `url(${bgImage})`,
-        }"
-      >
-        <v-row class="align-items-center">
-          <v-col cols="12" lg="6" md="6">
-            <div class="subscribe-content">
-              <h2>Subscribe To The Newsletter</h2>
-              <p>Get 10% off new collection special Investigations</p>
-              <form class="subscribe-form position-relative">
-                <input
-                  type="text"
-                  class="form-control"
-                  placeholder="Enter your email"
-                />
-                <button
-                  class="btn btn-warning text-white position-absolute top-50 end-0 translate-middle-y"
-                >
-                  Submit Now
-                </button>
-              </form>
-            </div>
-          </v-col>
-          <v-col cols="12" lg="6" md="6">
-            <div class="subscribe-img">
-              <img
-                src="assets/images/subscribe-img.png"
-                class="rounded-1"
-                alt="subscribe-img"
-              />
-            </div>
-          </v-col>
-        </v-row>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from "vue";
-
-import bgImage from "~/assets/images/subscribe-bg.png";
-
-export default defineComponent({
-  name: "SubscribeToTheNewsletter",
-  setup() {
-    return {
-      bgImage,
-    };
-  },
-});
-</script>

package/components/AddAddress/index.vue

@@ -1,68 +0,0 @@
-<template>
-  <section class="dashboard-area ptb-60">
-    <div class="container">
-      <div class="row">
-        <div class="col-lg-4">
-          <CommonDashboardNavigation />
-        </div>
-
-        <div class="col-lg-8">
-          <div class="address-list">
-            <h3 class="mb-3">{{ t('account.address') }}</h3>
-
-            <div class="row">
-              <div class="col-lg-6">
-                <div class="added-address">
-                  <NuxtLink to="/address" class="text-decoration-none">
-                    <i class="ri-add-line"></i>
-                    <span>{{ t('account.addAddress') }}</span>
-                  </NuxtLink>
-                </div>
-              </div>
-              <div class="col-lg-6">
-                <div class="billing-address-bar mb-0">
-                  <h3>{{ t('account.billingAddress') }}</h3>
-                  <ul>
-                    <li class="p-0">Doreen McCool</li>
-                    <li>
-                      <span>{{ t('account.address') }}:</span>
-                      2491 Reel Avenue Albuquerque
-                    </li>
-                  </ul>
-
-                  <ul>
-                    <li>
-                      <span>{{ t('account.phone') }}:</span>
-                      <a href="tel:+1-(514)-321-4566">+1 (514) 321-4566</a>
-                    </li>
-                    <li>
-                      <span>{{ t('account.email') }}:</span>
-                      <a href="mailto:hello@tuan.com">hello@tuan.com</a>
-                    </li>
-                  </ul>
-
-                  <div class="edit-address">
-                    <NuxtLink
-                      to="/edit-address"
-                      class="btn edit btn-warning text-white"
-                    >
-                      {{ t('common.edit') }}
-                    </NuxtLink>
-
-                    <button class="btn btn-warning text-white ms-3">
-                      {{ t('product.remove') }}
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-</template>
-
-<script setup lang="ts">
-const { t } = useI18n();
-</script>