@crm-market/template-shared 1.0.0

package/composables/useSiteConfig.ts

@@ -0,0 +1,236 @@
+import { ref, computed } from 'vue';
+
+interface ColorScheme {
+  primary?: string;
+  secondary?: string;
+  accent?: string;
+  bodyColor?: string;
+}
+
+interface Fonts {
+  headingFont?: string;
+  bodyFont?: string;
+  headingWeight?: string;
+  bodyWeight?: string;
+}
+
+interface ContactInfo {
+  phone?: string;
+  email?: string;
+  address?: string;
+  socialMedia?: {
+    facebook?: string;
+    instagram?: string;
+    twitter?: string;
+  };
+}
+
+interface SiteConfig {
+  id: string;
+  organizationId: string;
+  publicApiToken: string; // Token for public store API access
+  siteName?: string;
+  siteDescription?: string;
+  logoUrl?: string;
+  faviconUrl?: string;
+  heroImageUrl?: string;
+  contactInfo?: ContactInfo;
+  subdomain?: string;
+  customDomain?: string;
+  isPublished: boolean;
+  template: {
+    code: string;
+    name: string;
+    type: string;
+  };
+  customization?: {
+    colors?: ColorScheme;
+    fonts?: Fonts;
+    customCSS?: string;
+    componentSettings?: any;
+    content?: any;
+    values?: any; // Dynamic settings values
+  };
+}
+
+const siteConfig = ref<SiteConfig | null>(null);
+const loading = ref(false);
+const error = ref<string | null>(null);
+
+export const useSiteConfig = () => {
+  const config = useRuntimeConfig();
+  const route = useRoute();
+
+  // Get subdomain from current host or route
+  const getSubdomain = () => {
+    if (process.client) {
+      const hostname = window.location.hostname;
+      const parts = hostname.split('.');
+      // Assuming format: subdomain.domain.com
+      if (parts.length >= 3) {
+        return parts[0];
+      }
+    }
+    return null;
+  };
+
+  // Fetch site configuration from API
+  const fetchConfig = async (subdomain?: string) => {
+    loading.value = true;
+    error.value = null;
+
+    try {
+      const sub = subdomain || getSubdomain();
+      if (!sub) {
+        throw new Error('Subdomain not found');
+      }
+
+      const response = await $fetch<SiteConfig>(
+        `/site-template/public/config/subdomain/${sub}`,
+        {
+          baseURL: config.public.apiBase || 'http://localhost:3001/api',
+        }
+      );
+
+      siteConfig.value = response;
+      applyCustomization();
+      updateMetaTags();
+      return response;
+    } catch (e: any) {
+      error.value = e.message || 'Failed to load site configuration';
+      console.error('Error loading site config:', e);
+      throw e;
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  // Apply color customization as CSS variables
+  const applyCustomization = () => {
+    if (!siteConfig.value?.customization) return;
+
+    const { colors, fonts, customCSS } = siteConfig.value.customization;
+
+    if (process.client && colors) {
+      const root = document.documentElement;
+
+      if (colors.primary) {
+        root.style.setProperty('--primary-color', colors.primary);
+        root.style.setProperty('--bs-primary', colors.primary);
+      }
+      if (colors.secondary) {
+        root.style.setProperty('--secondary-color', colors.secondary);
+        root.style.setProperty('--bs-secondary', colors.secondary);
+      }
+      if (colors.accent) {
+        root.style.setProperty('--accent-color', colors.accent);
+      }
+      if (colors.bodyColor) {
+        root.style.setProperty('--body-color', colors.bodyColor);
+      }
+    }
+
+    if (process.client && fonts) {
+      const root = document.documentElement;
+
+      if (fonts.headingFont) {
+        root.style.setProperty('--font-family-heading', fonts.headingFont);
+      }
+      if (fonts.bodyFont) {
+        root.style.setProperty('--font-family-body', fonts.bodyFont);
+      }
+      if (fonts.headingWeight) {
+        root.style.setProperty('--font-weight-heading', fonts.headingWeight);
+      }
+      if (fonts.bodyWeight) {
+        root.style.setProperty('--font-weight-body', fonts.bodyWeight);
+      }
+    }
+
+    // Inject custom CSS
+    if (process.client && customCSS) {
+      let styleEl = document.getElementById('custom-site-css');
+      if (!styleEl) {
+        styleEl = document.createElement('style');
+        styleEl.id = 'custom-site-css';
+        document.head.appendChild(styleEl);
+      }
+      styleEl.textContent = customCSS;
+    }
+  };
+
+  // Update meta tags for SEO
+  const updateMetaTags = () => {
+    if (!siteConfig.value) return;
+
+    const { siteName, siteDescription, logoUrl } = siteConfig.value;
+    const seo = siteConfig.value.customization?.content?.seo;
+
+    if (process.client) {
+      if (siteName) {
+        document.title = siteName;
+      }
+
+      // Update or create meta tags
+      const updateMetaTag = (name: string, content: string) => {
+        let meta = document.querySelector(`meta[name="${name}"]`);
+        if (!meta) {
+          meta = document.createElement('meta');
+          meta.setAttribute('name', name);
+          document.head.appendChild(meta);
+        }
+        meta.setAttribute('content', content);
+      };
+
+      if (siteDescription) {
+        updateMetaTag('description', siteDescription);
+      }
+
+      if (seo?.metaTitle) {
+        updateMetaTag('title', seo.metaTitle);
+      }
+
+      if (seo?.metaKeywords) {
+        updateMetaTag('keywords', seo.metaKeywords);
+      }
+
+      // Open Graph tags
+      if (seo?.ogTitle) {
+        updateMetaTag('og:title', seo.ogTitle);
+      }
+      if (seo?.ogDescription) {
+        updateMetaTag('og:description', seo.ogDescription);
+      }
+      if (seo?.ogImage || logoUrl) {
+        updateMetaTag('og:image', seo?.ogImage || logoUrl);
+      }
+    }
+  };
+
+  // Computed properties
+  const organizationId = computed(() => siteConfig.value?.organizationId);
+  const publicApiToken = computed(() => siteConfig.value?.publicApiToken);
+  const siteName = computed(() => siteConfig.value?.siteName);
+  const logoUrl = computed(() => siteConfig.value?.logoUrl);
+  const contactInfo = computed(() => siteConfig.value?.contactInfo);
+  const isPublished = computed(() => siteConfig.value?.isPublished);
+  const componentSettings = computed(() => siteConfig.value?.customization?.componentSettings || {});
+  const settingsValues = computed(() => siteConfig.value?.customization?.values || {});
+
+  return {
+    siteConfig,
+    loading,
+    error,
+    fetchConfig,
+    applyCustomization,
+    updateMetaTags,
+    organizationId,
+    publicApiToken,
+    siteName,
+    logoUrl,
+    contactInfo,
+    isPublished,
+    componentSettings,
+    settingsValues,
+  };
+};

package/composables/useTemplateSections.ts

@@ -0,0 +1,74 @@
+import { computed } from 'vue';
+import type { TemplateSection, ContentBlock } from '../types';
+
+/**
+ * Composable для управління секціями homepage.
+ * Кожен шаблон реєструє свої секції, а цей composable
+ * поєднує їх з contentBlocks з API для визначення порядку та видимості.
+ */
+
+// Глобальний реєстр секцій (заповнюється кожним шаблоном)
+const registeredSections = ref<TemplateSection[]>([]);
+
+export const useTemplateSections = () => {
+  const { siteConfig } = useSiteConfig();
+
+  // Реєстрація секцій шаблоном
+  const registerSections = (sections: TemplateSection[]) => {
+    registeredSections.value = sections;
+  };
+
+  // Секції з contentBlocks API (кастомізовано організацією)
+  const contentBlocks = computed<ContentBlock[]>(() => {
+    const blocks = siteConfig.value?.customization?.contentBlocks;
+    if (!blocks || !Array.isArray(blocks) || blocks.length === 0) {
+      return [];
+    }
+    return blocks;
+  });
+
+  // Фінальний порядок секцій: API contentBlocks мають пріоритет, інакше — дефолтний порядок
+  const orderedSections = computed(() => {
+    const sections = registeredSections.value;
+    if (sections.length === 0) return [];
+
+    // Якщо є contentBlocks з API — використовуємо їх
+    if (contentBlocks.value.length > 0) {
+      return contentBlocks.value
+        .filter(block => block.enabled !== false)
+        .map(block => {
+          const registered = sections.find(s => s.key === block.key);
+          return {
+            key: block.key,
+            component: registered?.component || block.key,
+            label: registered?.label || block.key,
+            order: block.order,
+            enabled: block.enabled,
+            data: block.data,
+          };
+        })
+        .filter(s => s.component)
+        .sort((a, b) => (a.order || 0) - (b.order || 0));
+    }
+
+    // Інакше — дефолтний порядок з реєстру шаблону
+    return sections
+      .filter(s => s.defaultEnabled)
+      .sort((a, b) => a.defaultOrder - b.defaultOrder)
+      .map(s => ({
+        key: s.key,
+        component: s.component,
+        label: s.label,
+        order: s.defaultOrder,
+        enabled: true,
+        data: null,
+      }));
+  });
+
+  return {
+    registeredSections,
+    registerSections,
+    orderedSections,
+    contentBlocks,
+  };
+};

package/e2e/cart.spec.ts

@@ -0,0 +1,71 @@
+import { test, expect } from '@playwright/test';
+import { setupMockApi } from './fixtures/mock-api';
+import { CartPage } from './pages/cart.page';
+
+test.describe('Кошик', () => {
+  let cartPage: CartPage;
+
+  test.beforeEach(async ({ page }) => {
+    await setupMockApi(page);
+    cartPage = new CartPage(page);
+  });
+
+  test('порожній кошик при першому відвідуванні', async () => {
+    await cartPage.goto();
+    // Кошик має бути порожнім або показувати повідомлення
+    const isEmpty = await cartPage.isEmpty();
+    const itemCount = await cartPage.getItemCount();
+    expect(isEmpty || itemCount === 0).toBeTruthy();
+  });
+
+  test('відображає кошик з товарами після додавання', async ({ page }) => {
+    // Додаємо товар у localStorage перед переходом
+    await page.goto('/');
+    await page.evaluate(() => {
+      const cart = {
+        items: [{
+          productId: 'product-1',
+          name: 'Тестовий товар 1',
+          price: 1500,
+          discountPrice: 1200,
+          quantity: 2,
+          image: '/media/test/product-1.png',
+        }],
+        updatedAt: Date.now(),
+      };
+      localStorage.setItem('shopping_cart', JSON.stringify(cart));
+    });
+
+    await cartPage.goto();
+    await page.waitForTimeout(1000);
+
+    // Має бути хоча б один товар
+    const count = await cartPage.getItemCount();
+    expect(count).toBeGreaterThanOrEqual(1);
+  });
+
+  test('має кнопку оформлення замовлення', async ({ page }) => {
+    // Додаємо товар у localStorage
+    await page.goto('/');
+    await page.evaluate(() => {
+      const cart = {
+        items: [{
+          productId: 'product-1',
+          name: 'Тестовий товар',
+          price: 1500,
+          quantity: 1,
+        }],
+        updatedAt: Date.now(),
+      };
+      localStorage.setItem('shopping_cart', JSON.stringify(cart));
+    });
+
+    await cartPage.goto();
+    await page.waitForTimeout(1000);
+
+    const checkoutBtn = cartPage.checkoutButton;
+    if (await checkoutBtn.isVisible()) {
+      await expect(checkoutBtn).toBeEnabled();
+    }
+  });
+});

package/e2e/fixtures/mock-api.ts

@@ -0,0 +1,166 @@
+import type { Page } from '@playwright/test';
+
+/**
+ * Фікстура для моку API відповідей.
+ * Використовується для тестування без реального бекенду.
+ */
+
+export const MOCK_SITE_CONFIG = {
+  id: 'test-config-id',
+  organizationId: 'test-org-id',
+  publicApiToken: 'pub_test_token_12345',
+  siteName: 'Тестовий магазин',
+  siteDescription: 'Інтернет-магазин для тестування',
+  logoUrl: '/media/test/logo.png',
+  faviconUrl: '/media/test/favicon.ico',
+  heroImageUrl: '/media/test/hero.png',
+  contactInfo: {
+    phone: '+380501234567',
+    email: 'test@example.com',
+    address: 'м. Київ, вул. Тестова, 1',
+    socialMedia: {
+      facebook: 'https://facebook.com/test',
+      instagram: 'https://instagram.com/test',
+    },
+  },
+  subdomain: 'test-shop',
+  isPublished: true,
+  template: {
+    code: 'electronics',
+    name: 'Electronics',
+    type: 'electronics',
+  },
+  customization: {
+    colors: {
+      primary: '#5093f7',
+      secondary: '#22262a',
+      accent: '#f7931e',
+    },
+    contentBlocks: [
+      { key: 'todayBestDeals', order: 1, enabled: true },
+      { key: 'thisMonthSales', order: 2, enabled: true },
+    ],
+  },
+};
+
+export const MOCK_PRODUCTS = {
+  products: [
+    {
+      id: 'product-1',
+      name: 'Тестовий товар 1',
+      price: 1500,
+      discountPrice: 1200,
+      images: ['/media/test/product-1.png'],
+      categoryId: 'cat-1',
+      organizationId: 'test-org-id',
+      isActive: true,
+      stock: 10,
+      rating: 4.5,
+      reviews: 12,
+    },
+    {
+      id: 'product-2',
+      name: 'Тестовий товар 2',
+      price: 2500,
+      images: ['/media/test/product-2.png'],
+      categoryId: 'cat-1',
+      organizationId: 'test-org-id',
+      isActive: true,
+      stock: 5,
+      rating: 4.0,
+      reviews: 8,
+    },
+    {
+      id: 'product-3',
+      name: 'Тестовий товар 3',
+      price: 800,
+      discountPrice: 600,
+      images: ['/media/test/product-3.png'],
+      categoryId: 'cat-2',
+      organizationId: 'test-org-id',
+      isActive: true,
+      stock: 20,
+      rating: 3.8,
+      reviews: 5,
+    },
+  ],
+  total: 3,
+};
+
+export const MOCK_CATEGORIES = {
+  categories: [
+    {
+      id: 'cat-1',
+      name: 'Електроніка',
+      slug: 'electronics',
+      image: '/media/test/cat-1.png',
+      organizationId: 'test-org-id',
+      isActive: true,
+      order: 1,
+    },
+    {
+      id: 'cat-2',
+      name: 'Аксесуари',
+      slug: 'accessories',
+      image: '/media/test/cat-2.png',
+      organizationId: 'test-org-id',
+      isActive: true,
+      order: 2,
+    },
+  ],
+};
+
+/**
+ * Налаштовує моки API для сторінки.
+ */
+export async function setupMockApi(page: Page) {
+  // Мок конфігурації сайту
+  await page.route('**/site-template/public/config/subdomain/**', async (route) => {
+    await route.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      body: JSON.stringify(MOCK_SITE_CONFIG),
+    });
+  });
+
+  // Мок товарів
+  await page.route('**/site-template/public/store/products*', async (route) => {
+    const url = new URL(route.request().url());
+    const productId = url.pathname.match(/products\/(.+)/)?.[1];
+
+    if (productId) {
+      const product = MOCK_PRODUCTS.products.find(p => p.id === productId);
+      await route.fulfill({
+        status: product ? 200 : 404,
+        contentType: 'application/json',
+        body: JSON.stringify(product ? { product } : { error: 'Not found' }),
+      });
+    } else {
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify(MOCK_PRODUCTS),
+      });
+    }
+  });
+
+  // Мок категорій
+  await page.route('**/site-template/public/store/categories*', async (route) => {
+    await route.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      body: JSON.stringify(MOCK_CATEGORIES),
+    });
+  });
+
+  // Мок замовлень
+  await page.route('**/order', async (route) => {
+    if (route.request().method() === 'POST') {
+      await route.fulfill({
+        status: 201,
+        contentType: 'application/json',
+        body: JSON.stringify({ id: 'order-test-123' }),
+      });
+    }
+  });
+}

package/e2e/homepage.spec.ts

@@ -0,0 +1,65 @@
+import { test, expect } from '@playwright/test';
+import { setupMockApi } from './fixtures/mock-api';
+import { HomepagePage } from './pages/homepage.page';
+
+test.describe('Головна сторінка', () => {
+  let homepage: HomepagePage;
+
+  test.beforeEach(async ({ page }) => {
+    await setupMockApi(page);
+    homepage = new HomepagePage(page);
+    await homepage.goto();
+  });
+
+  test('відображає header з логотипом', async ({ page }) => {
+    // Header має бути видимим
+    await expect(page.locator('.middle-header-area, .header-area').first()).toBeVisible();
+  });
+
+  test('відображає банер', async ({ page }) => {
+    // Банер або swiper має бути видимим
+    await expect(page.locator('.banner-area, .swiper, .banner-wrapper').first()).toBeVisible();
+  });
+
+  test('відображає footer', async ({ page }) => {
+    // Скролимо вниз і перевіряємо footer
+    await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));
+    await expect(page.locator('.footer-area, footer').first()).toBeVisible();
+  });
+
+  test('має коректний title з конфігурації', async ({ page }) => {
+    // Чекаємо поки title оновиться з API конфігу
+    await page.waitForTimeout(2000);
+    const title = await page.title();
+    expect(title).toBeTruthy();
+  });
+
+  test('навігація до сторінки товарів', async ({ page }) => {
+    // Шукаємо посилання на товари
+    const productsLink = page.locator('a[href*="products"], a:has-text("Products"), a:has-text("Товари")').first();
+    if (await productsLink.isVisible()) {
+      await productsLink.click();
+      await expect(page).toHaveURL(/products/);
+    }
+  });
+
+  test('навігація до кошика', async ({ page }) => {
+    const cartLink = page.locator('a[href*="cart"], .cart-btn').first();
+    if (await cartLink.isVisible()) {
+      await cartLink.click();
+      await expect(page).toHaveURL(/cart/);
+    }
+  });
+});
+
+test.describe('SSR', () => {
+  test('сторінка має серверний HTML контент', async ({ page }) => {
+    await setupMockApi(page);
+    // Перевіряємо що HTML рендериться server-side (не порожній body)
+    const response = await page.goto('/');
+    const html = await response?.text();
+    expect(html).toContain('<!DOCTYPE html>');
+    // Має містити хоча б базову розмітку
+    expect(html).toContain('<div');
+  });
+});

package/e2e/layout.spec.ts

@@ -0,0 +1,73 @@
+import { test, expect } from '@playwright/test';
+import { setupMockApi } from './fixtures/mock-api';
+
+test.describe('Layout — шари візуалізації', () => {
+  test.beforeEach(async ({ page }) => {
+    await setupMockApi(page);
+  });
+
+  test('головна сторінка: правильний порядок шарів', async ({ page }) => {
+    await page.goto('/');
+
+    // Перевіряємо порядок: TopHeader -> MiddleHeader -> Navbar -> Content -> Footer
+    const body = page.locator('body');
+    const html = await body.innerHTML();
+
+    // TopHeader має бути перед MiddleHeader
+    const topHeaderPos = html.indexOf('top-header');
+    const middleHeaderPos = html.indexOf('middle-header');
+    const navbarPos = html.indexOf('navbar-area');
+
+    if (topHeaderPos > -1 && middleHeaderPos > -1) {
+      expect(topHeaderPos).toBeLessThan(middleHeaderPos);
+    }
+    if (middleHeaderPos > -1 && navbarPos > -1) {
+      expect(middleHeaderPos).toBeLessThan(navbarPos);
+    }
+  });
+
+  test('внутрішня сторінка: має page banner', async ({ page }) => {
+    await page.goto('/about-us');
+
+    // Inner layout має мати page banner замість основного banner
+    const pageBanner = page.locator('.page-banner-area, .breadcrumb-area').first();
+    await expect(pageBanner).toBeVisible({ timeout: 5000 });
+  });
+
+  test('footer містить контактну інформацію', async ({ page }) => {
+    await page.goto('/');
+    await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));
+
+    const footer = page.locator('.footer-area, footer').first();
+    await expect(footer).toBeVisible();
+  });
+
+  test('back-to-top кнопка з\'являється при скролі', async ({ page }) => {
+    await page.goto('/');
+
+    // Скролимо вниз
+    await page.evaluate(() => window.scrollTo(0, 1000));
+    await page.waitForTimeout(1000);
+
+    const backToTop = page.locator('.back-to-top-btn, .scroll-top, #scrollTop').first();
+    if (await backToTop.count() > 0) {
+      await expect(backToTop).toBeVisible({ timeout: 3000 });
+    }
+  });
+});
+
+test.describe('Layout — динамічний вибір компонентів', () => {
+  test('CSS змінні застосовуються з конфігурації', async ({ page }) => {
+    await setupMockApi(page);
+    await page.goto('/');
+    await page.waitForTimeout(2000);
+
+    // Перевіряємо що CSS змінні встановлені
+    const primaryColor = await page.evaluate(() => {
+      return getComputedStyle(document.documentElement).getPropertyValue('--primary-color').trim();
+    });
+
+    // Має бути або з API (#5093f7) або дефолтне значення
+    expect(primaryColor).toBeTruthy();
+  });
+});