simplycms 0.4.0

package/src/storefront-routes/pages/PropertyPage.tsx

@@ -0,0 +1,203 @@
+import { useMemo } from 'react';
+import { useParams, Link } from '@tanstack/react-router';
+import { useQuery } from '@tanstack/react-query';
+import { useT } from 'simplycms/i18n';
+import { ProductCard } from 'simplycms/core/components/catalog/ProductCard';
+import { Loader2, ChevronRight } from 'lucide-react';
+import { Button } from 'simplycms/ui/button';
+import { usePriceType } from 'simplycms/core/hooks/usePriceType';
+import { resolvePrice } from 'simplycms/domain/pricing';
+import type {
+  CatalogProductRow,
+  OptionRow,
+  PropertyOptionPageData,
+  PropertyRow,
+} from 'simplycms/storefront/loaders';
+import { getPropertyOption } from '../server/properties';
+
+export interface PropertyOptionPageProps {
+  property?: PropertyRow;
+  option?: OptionRow;
+  products?: CatalogProductRow[];
+}
+
+export default function PropertyPage({
+  property: initialProperty,
+  option: initialOption,
+  products: initialProducts,
+}: PropertyOptionPageProps = {}) {
+  const t = useT();
+  const params = useParams({ strict: false }) as Record<
+    string,
+    string | undefined
+  >;
+  const propertySlug = params?.propertySlug as string | undefined;
+  const optionSlug = params?.optionSlug as string | undefined;
+
+  const { priceTypeId, defaultPriceTypeId } = usePriceType();
+
+  /**
+   * 🔴 Один серверний виклик замість чотирьох клієнтських запитів
+   * (характеристика → опція → id товарів двома вибірками → самі товари).
+   * Обидва рівні характеристики — товар і модифікація — обʼєднані в SQL, тож
+   * список більше не залежить від того, скільки id влізе в `in (…)`.
+   */
+  const initialData: PropertyOptionPageData | undefined =
+    initialProperty && initialOption
+      ? {
+          property: initialProperty,
+          option: initialOption,
+          products: initialProducts ?? [],
+        }
+      : undefined;
+
+  const { data, isLoading } = useQuery({
+    queryKey: ['property-option-page', propertySlug, optionSlug],
+    queryFn: (): Promise<PropertyOptionPageData | null> =>
+      getPropertyOption({
+        data: {
+          propertySlug: propertySlug as string,
+          optionSlug: optionSlug as string,
+        },
+      }),
+    enabled: !!propertySlug && !!optionSlug,
+    initialData,
+  });
+
+  const property = data?.property ?? null;
+  const option = data?.option ?? null;
+  const optionLoading = isLoading;
+  const productsLoading = isLoading;
+
+  // Резолв цін під тип ціни покупця — форма картки лишилась незмінною.
+  const products = useMemo(() => {
+    if (!data) return undefined;
+    return data.products.map((p) => {
+      const hasModifications = p.has_modifications ?? true;
+      const defaultMod = hasModifications ? (p.modifications[0] ?? null) : null;
+      const resolved = resolvePrice(
+        p.product_prices,
+        priceTypeId,
+        defaultPriceTypeId,
+        defaultMod?.id ?? null,
+      );
+
+      return {
+        ...p,
+        price: resolved.price,
+        old_price: resolved.oldPrice,
+        stock_status: defaultMod
+          ? (defaultMod.stock_status ?? 'in_stock')
+          : (p.stock_status ?? 'in_stock'),
+      };
+    });
+  }, [data, priceTypeId, defaultPriceTypeId]);
+
+  if (optionLoading) {
+    return (
+      <div className="min-h-[50vh] flex items-center justify-center">
+        <Loader2 className="h-8 w-8 animate-spin text-primary" />
+      </div>
+    );
+  }
+
+  if (!option) {
+    return (
+      <div className="min-h-[50vh] flex flex-col items-center justify-center">
+        <h1 className="text-2xl font-bold mb-4">
+          {t('properties.pageNotFound')}
+        </h1>
+        <Link to="/catalog">
+          <Button>{t('catalog.back')}</Button>
+        </Link>
+      </div>
+    );
+  }
+
+  // Page data is now directly on the option
+  const displayName = option.name;
+  const description = option.description;
+  const imageUrl = option.image_url;
+
+  return (
+    <div className="container mx-auto px-4 py-8">
+      {/* Breadcrumbs */}
+      <nav className="flex items-center gap-2 text-sm text-muted-foreground mb-6">
+        <Link to="/" className="hover:text-foreground transition-colors">
+          {t('breadcrumbs.home')}
+        </Link>
+        <ChevronRight className="h-4 w-4" />
+        <Link
+          to="/properties"
+          className="hover:text-foreground transition-colors"
+        >
+          {t('properties.title')}
+        </Link>
+        <ChevronRight className="h-4 w-4" />
+        <Link
+          to="/properties/$propertySlug"
+          params={{ propertySlug: property?.slug ?? '' }}
+          className="hover:text-foreground transition-colors"
+        >
+          {property?.name}
+        </Link>
+        <ChevronRight className="h-4 w-4" />
+        <span className="text-foreground">{displayName}</span>
+      </nav>
+
+      {/* Hero section */}
+      <div className="mb-8">
+        {imageUrl && (
+          <div className="relative w-full h-48 md:h-64 mb-6 rounded-xl overflow-hidden">
+            <img
+              src={imageUrl}
+              alt={displayName}
+              className="absolute inset-0 w-full h-full object-cover"
+              loading="lazy"
+              decoding="async"
+            />
+          </div>
+        )}
+
+        <h1 className="text-4xl font-bold mb-4">{displayName}</h1>
+
+        {description && (
+          <div
+            className="prose prose-lg max-w-none text-muted-foreground dark:prose-invert"
+            dangerouslySetInnerHTML={{ __html: description }}
+          />
+        )}
+      </div>
+
+      {/* Products section */}
+      <div>
+        <h2 className="text-2xl font-bold mb-6">
+          {property?.name
+            ? t('properties.productsFiltered', {
+                property: property.name,
+                option: option.name,
+              })
+            : t('properties.products')}
+        </h2>
+
+        {productsLoading ? (
+          <div className="flex items-center justify-center py-12">
+            <Loader2 className="h-8 w-8 animate-spin text-primary" />
+          </div>
+        ) : products && products.length > 0 ? (
+          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
+            {products.map((product) => (
+              <ProductCard key={product.id} product={product} />
+            ))}
+          </div>
+        ) : (
+          <div className="text-center py-12 bg-muted/30 rounded-lg">
+            <p className="text-muted-foreground">
+              {t('properties.productsEmpty')}
+            </p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/storefront-routes/pages/cart/breadcrumbs.ts

@@ -0,0 +1,12 @@
+// Хлібні крихти кошика.
+
+import type { Translator } from 'simplycms/i18n';
+import type { BreadcrumbItem } from 'simplycms/contracts/views';
+
+/** Головна → сам кошик (остання ланка без `href` — рендериться текстом). */
+export function buildCartBreadcrumbs(t: Translator): BreadcrumbItem[] {
+  return [
+    { label: t('breadcrumbs.home'), href: '/' },
+    { label: t('cart.title') },
+  ];
+}

package/src/storefront-routes/pages/cart/slots.ts

@@ -0,0 +1,20 @@
+// Реквізити кошика (контракт тем v3, Фаза 5).
+//
+// 🔴 На відміну від ProductDetail/Catalog, реквізити кошика самодостатні:
+// самі читають `useCart()` (Ф2), тому прив'язок контекстом тут не потрібно
+// — сталий обʼєкт одразу підходить під `CartSlots`.
+
+import type { CartSlots } from 'simplycms/contracts/views';
+import {
+  CartCheckoutButton,
+  CartClearButton,
+  CartItemsList,
+} from '../../views/slots/CartSlots';
+import { CartSummary } from '../../views/slots/CartSummary';
+
+export const cartSlots: CartSlots = {
+  Items: CartItemsList,
+  ClearCart: CartClearButton,
+  Summary: CartSummary,
+  Checkout: CartCheckoutButton,
+};

package/src/storefront-routes/pages/catalog/active-filter-chips.ts

@@ -0,0 +1,103 @@
+// Складання бейджів активних фільтрів (контракт тем v3, Фаза 4).
+// Чиста функція «стан фільтрів → що показати над вибіркою».
+
+import type { Translator } from 'simplycms/i18n';
+import type {
+  ActiveFilterChip,
+  CatalogFiltersState,
+  NumericProperty,
+  NumericRange,
+  NumericRanges,
+} from './types';
+
+/** Опція характеристики; назву групи читаємо з приєднаної гілки. */
+export interface PropertyOptionRow {
+  id: string;
+  name: string;
+  section_properties: unknown;
+}
+
+export interface ChipSources {
+  priceRange: NumericRange | undefined;
+  numericRanges: NumericRanges;
+  numericProperties: NumericProperty[] | undefined;
+  propertyOptions: PropertyOptionRow[] | undefined;
+}
+
+/** Бейдж діапазону: показує обрані межі, а пропущені — межами вибірки. */
+function rangeChip(
+  key: string,
+  label: string,
+  min: unknown,
+  max: unknown,
+  bounds: NumericRange | undefined,
+  suffix = '',
+): ActiveFilterChip {
+  const from = min ?? bounds?.min ?? 0;
+  const to = max ?? bounds?.max ?? '∞';
+  return {
+    key,
+    label,
+    value: `${from} - ${to}${suffix}`,
+    type: key === 'price' ? 'price' : 'range',
+  };
+}
+
+/**
+ * Порядок бейджів — ціна, діапазони, опції; до спліту він повторював порядок
+ * ключів у стані фільтрів. Різниця суто косметична (склад бейджів той самий),
+ * зате зникає дедуплікація пар `…Min`/`…Max` пошуком по вже зібраному списку.
+ */
+export function buildActiveFilterChips(
+  filters: CatalogFiltersState,
+  t: Translator,
+  sources: ChipSources,
+): ActiveFilterChip[] {
+  const chips: ActiveFilterChip[] = [];
+
+  if (filters.priceMin !== undefined || filters.priceMax !== undefined) {
+    chips.push(
+      rangeChip(
+        'price',
+        t('common.price'),
+        filters.priceMin,
+        filters.priceMax,
+        sources.priceRange,
+        ' ₴',
+      ),
+    );
+  }
+
+  sources.numericProperties?.forEach((prop) => {
+    const min = filters[`${prop.slug}Min`];
+    const max = filters[`${prop.slug}Max`];
+    if (min === undefined && max === undefined) return;
+    chips.push(
+      rangeChip(
+        prop.slug,
+        prop.slug,
+        min,
+        max,
+        sources.numericRanges[prop.slug],
+      ),
+    );
+  });
+
+  Object.entries(filters).forEach(([key, value]) => {
+    if (!Array.isArray(value)) return;
+    value.forEach((optionId: string) => {
+      const option = sources.propertyOptions?.find((o) => o.id === optionId);
+      if (!option) return;
+      const group = option.section_properties as { name: string } | null;
+      chips.push({
+        key,
+        label: group?.name || key,
+        value: option.name,
+        type: 'option',
+        optionId,
+      });
+    });
+  });
+
+  return chips;
+}

package/src/storefront-routes/pages/catalog/breadcrumbs.ts

@@ -0,0 +1,24 @@
+// Хлібні крихти каталогу й сторінки розділу.
+
+import type { Translator } from 'simplycms/i18n';
+import type { BreadcrumbItem } from 'simplycms/contracts/views';
+
+/** Головна → каталог (остання ланка без `href` — рендериться текстом). */
+export function buildCatalogBreadcrumbs(t: Translator): BreadcrumbItem[] {
+  return [
+    { label: t('breadcrumbs.home'), href: '/' },
+    { label: t('catalog.title') },
+  ];
+}
+
+/** Головна → каталог → розділ. */
+export function buildSectionBreadcrumbs(
+  t: Translator,
+  sectionName: string,
+): BreadcrumbItem[] {
+  return [
+    { label: t('breadcrumbs.home'), href: '/' },
+    { label: t('catalog.title'), href: '/catalog' },
+    { label: sectionName },
+  ];
+}

package/src/storefront-routes/pages/catalog/filter-predicates.ts

@@ -0,0 +1,80 @@
+// Предикати фільтрів вибірки каталогу (контракт тем v3, Фаза 4).
+// Чисті функції «товар × стан фільтрів → чи лишається товар у вибірці».
+
+import type { CatalogFiltersState, NumericProperty } from './types';
+
+/** Мінімум полів товару, потрібний фільтрам і сортуванню. */
+export interface FilterableProduct {
+  price: number | null;
+  created_at: string;
+  isAvailable: boolean;
+  section: { id: string } | null;
+  propertyValues: Array<{
+    property_id: string;
+    numeric_value: number | null;
+    option_id: string | null;
+  }>;
+}
+
+/** Фільтри-діапазони числових характеристик. */
+export function matchesNumericFilters(
+  product: FilterableProduct,
+  filters: CatalogFiltersState,
+  numericProperties: NumericProperty[] | undefined,
+): boolean {
+  return (numericProperties ?? []).every((prop) => {
+    const minVal = filters[`${prop.slug}Min`];
+    const maxVal = filters[`${prop.slug}Max`];
+    if (minVal === undefined && maxVal === undefined) return true;
+
+    // Значення можуть прийти з кількох модифікацій — досить одного влучання;
+    // товар без цієї характеристики з вибірки випадає.
+    const matching = product.propertyValues.filter(
+      (pv) => pv.property_id === prop.id && pv.numeric_value !== null,
+    );
+    if (matching.length === 0) return false;
+
+    return matching.some((pv) => {
+      const val = pv.numeric_value;
+      if (val === null) return false;
+      if (minVal !== undefined && val < (minVal as number)) return false;
+      if (maxVal !== undefined && val > (maxVal as number)) return false;
+      return true;
+    });
+  });
+}
+
+/** Фільтри-опції (мультивибір за `option_id`). */
+export function matchesOptionFilters(
+  product: FilterableProduct,
+  filters: CatalogFiltersState,
+): boolean {
+  return Object.entries(filters).every(([key, value]) => {
+    if (key === 'priceMin' || key === 'priceMax' || key === 'inStockOnly')
+      return true;
+    if (key.endsWith('Min') || key.endsWith('Max')) return true;
+    if (!value || (Array.isArray(value) && value.length === 0)) return true;
+
+    return product.propertyValues.some((pv) => {
+      if (!pv.option_id || !Array.isArray(value)) return false;
+      // Мультивибір зберігає кілька option_id через кому.
+      const productOptionIds = pv.option_id.split(',').filter(Boolean);
+      return productOptionIds.some((id: string) => value.includes(id));
+    });
+  });
+}
+
+/** Фільтр ціни; товар без ціни ним не відсіюється. */
+export function matchesPriceFilter(
+  product: FilterableProduct,
+  filters: CatalogFiltersState,
+): boolean {
+  const { priceMin, priceMax } = filters;
+  if (priceMin === undefined && priceMax === undefined) return true;
+  if (product.price === null || product.price === undefined) return true;
+  if (priceMin !== undefined && product.price < (priceMin as number))
+    return false;
+  if (priceMax !== undefined && product.price > (priceMax as number))
+    return false;
+  return true;
+}

package/src/storefront-routes/pages/catalog/filtering.ts

@@ -0,0 +1,118 @@
+// Чиста вибірка каталогу: розділ, фільтри, сортування, похідні діапазони
+// (контракт тем v3, Фаза 4). Без хуків і без запитів — логіка вибірки
+// перевіряється окремо від UI і спільна для каталогу й сторінки розділу.
+
+import type { CatalogSortOption } from '../../views/slots/CatalogToolbarSlots';
+import {
+  matchesNumericFilters,
+  matchesOptionFilters,
+  matchesPriceFilter,
+  type FilterableProduct,
+} from './filter-predicates';
+import type {
+  CatalogFiltersState,
+  NumericProperty,
+  NumericRange,
+  NumericRanges,
+} from './types';
+
+export type { FilterableProduct };
+
+export interface FilterAndSortOptions {
+  filters: CatalogFiltersState;
+  sortBy: CatalogSortOption;
+  /** Розділ поточної вибірки; `null` — усі товари. */
+  sectionId: string | null;
+  numericProperties: NumericProperty[] | undefined;
+}
+
+/** Межі цін вибірки — початкові значення слайдера фільтра. */
+export function computePriceRange<T extends { price: number | null }>(
+  products: T[] | undefined,
+): NumericRange | undefined {
+  if (!products?.length) return undefined;
+  const prices = products
+    .map((p) => p.price)
+    .filter((p): p is number => typeof p === 'number');
+  if (prices.length === 0) return undefined;
+  return { min: Math.min(...prices), max: Math.max(...prices) };
+}
+
+/** Товари поточного розділу; без розділу — вибірка цілком. */
+export function filterBySection<T extends { section: { id: string } | null }>(
+  products: T[] | undefined,
+  sectionId: string | null,
+): T[] | undefined {
+  if (!products || !sectionId) return products;
+  return products.filter((p) => p.section?.id === sectionId);
+}
+
+/** Межі числових характеристик по товарах поточного розділу. */
+export function computeNumericRanges<T extends FilterableProduct>(
+  products: T[] | undefined,
+  numericProperties: NumericProperty[] | undefined,
+  sectionId: string | null,
+): NumericRanges {
+  if (!products?.length || !numericProperties?.length) return {};
+
+  const relevant = filterBySection(products, sectionId) ?? [];
+  const ranges: NumericRanges = {};
+
+  numericProperties.forEach((prop) => {
+    const values: number[] = [];
+    relevant.forEach((product) => {
+      product.propertyValues.forEach((pv) => {
+        if (pv.property_id === prop.id && pv.numeric_value !== null) {
+          values.push(pv.numeric_value);
+        }
+      });
+    });
+
+    if (values.length > 0) {
+      ranges[prop.slug] = {
+        min: Math.min(...values),
+        max: Math.max(...values),
+      };
+    }
+  });
+
+  return ranges;
+}
+
+/** Сортування вибірки; `popular` — порядок джерела. */
+function sortProducts<T extends FilterableProduct>(
+  products: T[],
+  sortBy: CatalogSortOption,
+): T[] {
+  switch (sortBy) {
+    case 'price_asc':
+      return products.sort((a, b) => (a.price || 0) - (b.price || 0));
+    case 'price_desc':
+      return products.sort((a, b) => (b.price || 0) - (a.price || 0));
+    case 'newest':
+      return products.sort(
+        (a, b) =>
+          new Date(b.created_at).getTime() - new Date(a.created_at).getTime(),
+      );
+    default:
+      return products;
+  }
+}
+
+/** Вибірка після всіх фільтрів і сортування. */
+export function filterAndSortProducts<T extends FilterableProduct>(
+  products: T[] | undefined,
+  { filters, sortBy, sectionId, numericProperties }: FilterAndSortOptions,
+): T[] {
+  if (!products) return [];
+
+  const result = (filterBySection(products, sectionId) ?? []).filter(
+    (product) =>
+      (!filters.inStockOnly || product.isAvailable) &&
+      matchesOptionFilters(product, filters) &&
+      matchesNumericFilters(product, filters, numericProperties) &&
+      matchesPriceFilter(product, filters),
+  );
+
+  return sortProducts(result, sortBy);
+}

package/src/storefront-routes/pages/catalog/slot-context.tsx

@@ -0,0 +1,64 @@
+// Прив'язки slot-компонентів каталогу (контракт тем v3, Фаза 4).
+
+import { createContext, useContext, type ReactNode } from 'react';
+import type { CatalogFiltersProps } from '../../views/slots/CatalogFilters';
+import type { CatalogProductGridProps } from '../../views/slots/CatalogProductGrid';
+import type {
+  CatalogFilterChipsProps,
+  CatalogLinkChipsProps,
+} from '../../views/slots/CatalogSectionChips';
+import type {
+  CatalogActiveFiltersProps,
+  CatalogSortSelectProps,
+  CatalogViewModeToggleProps,
+} from '../../views/slots/CatalogToolbarSlots';
+
+/**
+ * Чипси розділів — один реквізит із двома поведінками: у каталозі вони
+ * перемикають вибірку на місці, на сторінці розділу ведуть лінками. Вибір
+ * робить контейнер, тема лише ставить слот у свій лейаут.
+ */
+export type CatalogChipsBinding =
+  | ({ mode: 'filter' } & Omit<CatalogFilterChipsProps, 'className'>)
+  | ({ mode: 'link' } & Omit<CatalogLinkChipsProps, 'className'>);
+
+/** Усе, що контейнер прибінджує до реквізитів каталогу. */
+export interface CatalogBindings {
+  chips: CatalogChipsBinding;
+  filters: Omit<CatalogFiltersProps, 'className'>;
+  sort: Omit<CatalogSortSelectProps, 'className'>;
+  viewMode: Omit<CatalogViewModeToggleProps, 'className'>;
+  activeFilters: Omit<CatalogActiveFiltersProps, 'className'>;
+  grid: Omit<CatalogProductGridProps, 'className'>;
+}
+
+const BindingsContext = createContext<CatalogBindings | null>(null);
+
+/**
+ * 🔴 Прив'язки їдуть контекстом, а не замиканнями: компоненти слотів мають
+ * бути модуль-рівневими й сталими, інакше React перемонтовував би піддерева
+ * реквізитів (фільтри з власними запитами, сітку товарів) щорендеру.
+ */
+export function CatalogSlotBindings({
+  value,
+  children,
+}: {
+  value: CatalogBindings;
+  children: ReactNode;
+}) {
+  return (
+    <BindingsContext.Provider value={value}>
+      {children}
+    </BindingsContext.Provider>
+  );
+}
+
+export function useCatalogBindings(): CatalogBindings {
+  const value = useContext(BindingsContext);
+  if (!value) {
+    throw new Error(
+      'Catalog slots must be rendered inside <CatalogSlotBindings>',
+    );
+  }
+  return value;
+}