orionplace-react 0.1.0 → 0.2.1

package/templates/lib/orionplace/headerLabels.ts

@@ -0,0 +1,68 @@
+import { getAvailableValueFromObject } from '@/lib/orionplace/presentation';
+
+const labels = {
+  en: {
+    home: 'Marketplace home',
+    language: 'Language',
+    currency: 'Currency',
+    search: 'Search the marketplace',
+    find: 'Search',
+    catalog: 'Catalog',
+    manufacturers: 'Manufacturers',
+    journal: 'Journal',
+    close: 'Close catalog',
+    back: 'Back',
+    viewCategory: 'View',
+    highlights: 'Category highlights',
+    empty: 'No categories available',
+    emptyProducts: 'No representative products',
+    saved: 'Wishlist',
+    cart: 'Cart',
+    variantLoading: 'Loading the selected variant…',
+    variantFailed: 'Could not load this variant. Select it again to retry.',
+    searchSelection: 'Search requested',
+    categorySelection: 'Category selected',
+    productSelection: 'Product selected',
+    sellerSelection: 'Seller selected',
+    signInSelection: 'Sign-in requested',
+    signOutSelection: 'Log-out requested',
+    profileSelection: 'Profile requested',
+    walletSelection: 'Wallet requested',
+    wishlistSelection: 'Wishlist requested',
+    cartSelection: 'Cart requested',
+  },
+  ru: {
+    home: 'Главная магазина',
+    language: 'Язык',
+    currency: 'Валюта',
+    search: 'Поиск по магазину',
+    find: 'Найти',
+    catalog: 'Каталог',
+    manufacturers: 'Производители',
+    journal: 'Журнал',
+    close: 'Закрыть каталог',
+    back: 'Назад',
+    viewCategory: 'Открыть',
+    highlights: 'Товары категории',
+    empty: 'Нет доступных категорий',
+    emptyProducts: 'Нет товаров для показа',
+    saved: 'Избранное',
+    cart: 'Корзина',
+    variantLoading: 'Загрузка выбранного варианта…',
+    variantFailed: 'Не удалось загрузить вариант. Выберите его ещё раз.',
+    searchSelection: 'Поисковый запрос',
+    categorySelection: 'Выбрана категория',
+    productSelection: 'Выбран товар',
+    sellerSelection: 'Выбран продавец',
+    signInSelection: 'Запрошен вход',
+    signOutSelection: 'Запрошен выход',
+    profileSelection: 'Запрошен профиль',
+    walletSelection: 'Запрошен кошелёк',
+    wishlistSelection: 'Запрошено избранное',
+    cartSelection: 'Запрошена корзина',
+  },
+};
+
+export function headerLabels(locale: string) {
+  return getAvailableValueFromObject(labels, locale) ?? labels.en;
+}

package/templates/lib/orionplace/homeContent.ts

@@ -0,0 +1,193 @@
+import type {
+  IAppLoadCommon,
+  IAppLoadCommonBanner,
+  IAppLoadCommonEvents,
+  IAppLoadPathObject,
+  ICategory,
+  IProduct,
+  TBannerFormats,
+  TEventsFormat,
+} from '@/interfaces/orionplace';
+import {
+  getAvailableValueFromObject,
+  localesMatch,
+  safePublicUrl,
+} from '@/lib/orionplace/presentation';
+import { navigationCatalogCategories } from '@/lib/orionplace/catalog';
+
+export interface HomeBannerSlide {
+  banner: IAppLoadCommonBanner;
+  src: string;
+  key: string;
+}
+
+export function homeCategories(
+  categories: ICategory[],
+  settings?: IAppLoadCommon['visual_settings'],
+): ICategory[] {
+  if (settings?.front_categories_ordering === 'do_not_show') {
+    return [];
+  }
+
+  const publicRoots = navigationCatalogCategories(categories);
+  const regular = publicRoots.filter((category) => !category.separate_menu);
+  const roots = regular.length ? regular : publicRoots;
+  const byViews = settings?.front_categories_ordering === 'views';
+  const flatten = (items: ICategory[]): ICategory[] =>
+    navigationCatalogCategories(items).flatMap((category) => [
+      category,
+      ...flatten(category.childs ?? []),
+    ]);
+  const candidates = byViews ? flatten(roots) : roots;
+  const direction =
+    settings?.front_categories_ordering_direction === 'desc' ? -1 : 1;
+  const metric = (category: ICategory) => {
+    const candidate = byViews ? category.c_views : category.ordering;
+    return typeof candidate === 'number' && Number.isFinite(candidate)
+      ? candidate
+      : 0;
+  };
+  const ordered = [...candidates].sort(
+    (left, right) => direction * (metric(left) - metric(right)),
+  );
+  const count = settings?.front_categories_count ?? 0;
+
+  return Number.isFinite(count) && count > 0
+    ? ordered.slice(0, Math.floor(count))
+    : ordered;
+}
+
+export function homeBanners(
+  init: IAppLoadCommon | null | undefined,
+  locale: string,
+): IAppLoadCommonBanner[] {
+  return (
+    getAvailableValueFromObject(init?.main_banner ?? {}, locale, false) ?? []
+  ).filter((banner) => localesMatch(banner.target_locale, locale));
+}
+
+/*
+ * The picture size the backend prepares for each banner format (desktop
+ * 1240×500, wide 1024×500, tablet 768×500, mobile 480×525). The banner box
+ * takes the shape of the chosen format, so a phone's nearly square picture
+ * is not cut down to a desktop strip.
+ */
+export const bannerFormatSizes: Record<
+  TBannerFormats,
+  { width: number; height: number }
+> = {
+  desktop: { width: 1240, height: 500 },
+  wide: { width: 1024, height: 500 },
+  tablet: { width: 768, height: 500 },
+  mobile: { width: 480, height: 525 },
+};
+
+export function homeBannerSlides(
+  init: IAppLoadCommon | null | undefined,
+  locale: string,
+  format: TBannerFormats,
+): HomeBannerSlide[] {
+  return homeBanners(init, locale).flatMap((banner) => {
+    const formats = [format, 'desktop', 'wide', 'tablet', 'mobile'] as const;
+    const images =
+      formats
+        .map((key) => banner[`images_${key}`].filter(safePublicUrl))
+        .find((items) => items.length) ?? [];
+
+    return images.map((src, index) => ({
+      banner,
+      src,
+      key: `${banner.id}-${index}`,
+    }));
+  });
+}
+
+export function homeEvents(
+  init: IAppLoadCommon | null | undefined,
+  locale: string,
+): IAppLoadCommonEvents[] {
+  return (init?.events ?? []).filter(
+    (event) => localesMatch(event.locale, locale) && event.is_layout !== false,
+  );
+}
+
+const eventFormats = {
+  desktop: 'image',
+  wide: 'image_wide',
+  tablet: 'image_tablet',
+  account: 'image_account',
+  mobile: 'image_mobile',
+} as const;
+
+export function homeEventImage(
+  event: IAppLoadCommonEvents,
+  format: TEventsFormat,
+): string | undefined {
+  return (
+    [
+      event[eventFormats[format]],
+      event.image,
+      event.image_wide,
+      event.image_tablet,
+      event.image_mobile,
+      event.image_account,
+    ].find((src) => Boolean(safePublicUrl(src))) ?? undefined
+  );
+}
+
+export interface HomeProductSection {
+  key: 'products' | 'discounts' | 'new' | 'featured';
+  collection: 'products' | 'featured';
+  productIds: number[];
+}
+
+export function homeProductSections(
+  products: IProduct[],
+  featured: IProduct[],
+  loadedNewIds?: number[] | null,
+): HomeProductSection[] {
+  const ids = (items: IProduct[]) => [
+    ...new Set(items.map((product) => product.id)),
+  ];
+  const discounted = ids(products.filter((product) => product.discount < 1));
+  const fresh =
+    loadedNewIds ??
+    ids(products.filter((product) => product.flags?.flag_is_new));
+  const recommended = ids(featured);
+  const assigned = new Set([...discounted, ...fresh, ...recommended]);
+  const ordinary = ids(products.filter((product) => !assigned.has(product.id)));
+  const sections: HomeProductSection[] = [
+    { key: 'products', collection: 'products', productIds: ordinary },
+    { key: 'discounts', collection: 'products', productIds: discounted },
+    { key: 'new', collection: 'products', productIds: [...new Set(fresh)] },
+    { key: 'featured', collection: 'featured', productIds: recommended },
+  ];
+
+  return sections.filter((section) => section.productIds.length > 0);
+}
+
+/** The products_search body the home page uses for its New section. */
+export const homeNewProductsRequest = {
+  filters: { only_new: true },
+  paginate: { page: 1, pp_items: 20 },
+};
+
+/**
+ * Without a new-flagged product in Application Load, the home page loads
+ * new products once, while `products_search` is discovered and no earlier
+ * response has filled the New section.
+ */
+export function needsHomeNewProducts(
+  products: readonly IProduct[],
+  loadedNewIds: number[] | null,
+  endpoints: IAppLoadPathObject,
+): boolean {
+  const hasNewProduct = products.some((product) => product.flags?.flag_is_new);
+  const canSearch     = Object.values(endpoints).some((paths) =>
+    Object.values(paths).some(
+      (endpoint) => endpoint.url_name === 'products_search',
+    ),
+  );
+
+  return loadedNewIds === null && !hasNewProduct && canSearch;
+}

package/templates/lib/orionplace/homeLabels.ts

@@ -0,0 +1,52 @@
+import { getAvailableValueFromObject } from '@/lib/orionplace/presentation';
+
+const labels = {
+  en: {
+    categories: 'Shop by category',
+    products: 'Products',
+    discounts: 'Discounts',
+    new: 'New products',
+    newFailed: 'New products could not be loaded.',
+    featured: 'Featured finds',
+    events: 'Events & offers',
+    banner: 'Store highlights',
+    previous: 'Previous slide',
+    previousProducts: 'Previous products',
+    nextProducts: 'Next products',
+    next: 'Next slide',
+    viewAll: 'More',
+    loading: 'Loading the storefront…',
+    failed: 'The storefront could not load.',
+    retry: 'Retry',
+    category: 'Category',
+    event: 'Event',
+    eventSelected: 'Event selected',
+    bannerSelected: 'Banner selected',
+  },
+  ru: {
+    categories: 'Категории',
+    products: 'Товары',
+    discounts: 'Скидки',
+    new: 'Новинки',
+    newFailed: 'Не удалось загрузить новинки.',
+    featured: 'Рекомендуем',
+    events: 'События и предложения',
+    banner: 'Предложения магазина',
+    previous: 'Предыдущий слайд',
+    previousProducts: 'Предыдущие товары',
+    nextProducts: 'Следующие товары',
+    next: 'Следующий слайд',
+    viewAll: 'Ещё',
+    loading: 'Загружаем магазин…',
+    failed: 'Не удалось загрузить магазин.',
+    retry: 'Повторить',
+    category: 'Категория',
+    event: 'Событие',
+    eventSelected: 'Выбрано событие',
+    bannerSelected: 'Выбран баннер',
+  },
+};
+
+export function homeLabels(locale: string) {
+  return getAvailableValueFromObject(labels, locale) ?? labels.en;
+}

package/templates/lib/orionplace/htmlText.ts

@@ -0,0 +1,51 @@
+const namedEntities: Record<string, string> = {
+  amp: '&',
+  lt: '<',
+  gt: '>',
+  quot: '"',
+  apos: "'",
+  nbsp: ' ',
+  laquo: '«',
+  raquo: '»',
+  mdash: '—',
+  ndash: '–',
+  hellip: '…',
+};
+
+function decodeEntities(value: string) {
+  return value.replace(
+    /&(#x[0-9a-f]+|#\d+|[a-z]+);/gi,
+    (entity, name: string) => {
+      const lower = name.toLowerCase();
+
+      if (lower.startsWith('#')) {
+        const code = lower.startsWith('#x')
+          ? Number.parseInt(lower.slice(2), 16)
+          : Number.parseInt(lower.slice(1), 10);
+
+        return Number.isInteger(code) && code > 0 && code <= 0x10ffff
+          ? String.fromCodePoint(code)
+          : entity;
+      }
+
+      return namedEntities[lower] ?? entity;
+    },
+  );
+}
+
+/** Text paragraphs of editor HTML, without executable or visible markup. */
+export function htmlTextParagraphs(html: string | undefined): string[] {
+  const withBreaks = (html ?? '')
+    .replace(/<(script|style|template)\b[\s\S]*?<\/\1\s*>/gi, ' ')
+    .replace(/<!--[\s\S]*?-->/g, ' ')
+    .replace(
+      /<\/?(?:p|div|br|h[1-6]|li|ul|ol|blockquote|pre|tr|table|figure|section|article|details|summary|hr)\b[^>]*>/gi,
+      '\n',
+    )
+    .replace(/<[^>]*>/g, ' ');
+
+  return decodeEntities(withBreaks)
+    .split('\n')
+    .map((line) => line.replace(/\s+/g, ' ').trim())
+    .filter(Boolean);
+}

package/templates/lib/orionplace/manufacturerDirectory.ts

@@ -0,0 +1,71 @@
+import type {
+  IManufacturer,
+  IManufacturerIndexGroup,
+  IManufacturerSearchRequest,
+  IManufacturerSearchResponse,
+} from '@/interfaces/orionplace/catalog/ICatalogDirectory';
+import {
+  getAvailableNestedValueFromObject,
+  plainText,
+} from '@/lib/orionplace/presentation';
+
+export type ManufacturerSearchData = NonNullable<
+  IManufacturerSearchResponse['page_data']
+>;
+
+export function manufacturerIndexResult(
+  value: unknown,
+): IManufacturerIndexGroup[] {
+  if (!Array.isArray(value)) {
+    throw new Error('The manufacturer index response is invalid.');
+  }
+
+  return value as IManufacturerIndexGroup[];
+}
+
+export function manufacturerSearchResult(
+  value: unknown,
+): ManufacturerSearchData {
+  if (
+    !value ||
+    typeof value !== 'object' ||
+    !('manufactures' in value) ||
+    !value.manufactures ||
+    typeof value.manufactures !== 'object' ||
+    !('data' in value.manufactures) ||
+    !Array.isArray(value.manufactures.data)
+  ) {
+    throw new Error('The manufacturer search response is invalid.');
+  }
+
+  return value as ManufacturerSearchData;
+}
+
+export function manufacturerSearchRequest(
+  manufacturerId: number | undefined,
+  prefix: string,
+  page: number,
+): IManufacturerSearchRequest {
+  return {
+    filters: manufacturerId
+      ? { id: manufacturerId }
+      : { name_starts: prefix.trim() },
+    paginate: {
+      page: Number.isInteger(page) && page > 0 ? page : 1,
+      pp_items: 20,
+    },
+  };
+}
+
+export function manufacturerPitch(
+  manufacturer: IManufacturer,
+  locale: string,
+): string {
+  return plainText(
+    getAvailableNestedValueFromObject(
+      manufacturer.locale,
+      locale,
+      'brand_pitch',
+    ),
+  );
+}

package/templates/lib/orionplace/manufacturerIndex.ts

@@ -0,0 +1,92 @@
+import type {
+  IManufacturer,
+  IManufacturerIndexGroup,
+  TManufacturerAlphabet,
+} from '@/interfaces/orionplace/catalog/ICatalogDirectory';
+import { safePublicUrl } from '@/lib/orionplace/presentation';
+
+const alphabets: Record<TManufacturerAlphabet, string> = {
+  en: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
+  ru: 'АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ',
+  num: '0123456789',
+};
+
+export function manufacturerAlphabet(mode: TManufacturerAlphabet): string[] {
+  return [...alphabets[mode]];
+}
+
+export function manufacturerIndexGroups(
+  groups: readonly IManufacturerIndexGroup[],
+  locale: string,
+): IManufacturerIndexGroup[] {
+  const collator = new Intl.Collator(locale.trim() || undefined);
+
+  return groups
+    .map((group) => ({
+      ...group,
+      manufactures: [...group.manufactures].sort((left, right) =>
+        collator.compare(left.name, right.name),
+      ),
+    }))
+    .sort((left, right) => collator.compare(left.letter, right.letter));
+}
+
+export function manufacturerIndexLogos(
+  groups: readonly IManufacturerIndexGroup[],
+  locale: string,
+): IManufacturer[] {
+  const unique = new Map<number, IManufacturer>();
+  groups
+    .flatMap((group) => group.manufactures)
+    .forEach((manufacturer) => {
+      unique.set(manufacturer.id, manufacturer);
+    });
+  const collator = new Intl.Collator(locale.trim() || undefined);
+
+  return [...unique.values()]
+    .filter((manufacturer) =>
+      Boolean(
+        safePublicUrl(manufacturer.small_image) ||
+        safePublicUrl(manufacturer.image),
+      ),
+    )
+    .sort((left, right) => collator.compare(left.name, right.name));
+}
+
+export function manufacturerIndexTotal(
+  groups: readonly IManufacturerIndexGroup[],
+): number {
+  return groups.reduce((total, group) => total + group.c_manufactures, 0);
+}
+
+export function manufacturerIndexLabels(locale: string) {
+  if (locale.toLowerCase().startsWith('ru')) {
+    return {
+      title: 'Производители',
+      total: 'Всего производителей',
+      alphabet: 'Алфавит производителей',
+      logos: 'Логотипы производителей',
+      load: 'Загрузить',
+      loading: 'Загрузка производителей…',
+      empty: 'Производители не найдены',
+      emptyAlphabet: 'В этом алфавите нет производителей',
+      retry: 'Повторить',
+      allOn: 'Все на',
+      all: 'Все',
+    };
+  }
+
+  return {
+    title: 'Manufacturers',
+    total: 'Total manufacturers',
+    alphabet: 'Manufacturer alphabet',
+    logos: 'Manufacturer logos',
+    load: 'Load',
+    loading: 'Loading manufacturers…',
+    empty: 'No manufacturers found',
+    emptyAlphabet: 'No manufacturers in this alphabet',
+    retry: 'Retry',
+    allOn: 'All starting with',
+    all: 'All',
+  };
+}

package/templates/lib/orionplace/modalWindow.ts

@@ -0,0 +1,109 @@
+// What a modal window does to the page behind it: the page stops scrolling
+// while the window is open, and the focus goes back when it closes.
+//
+// The lock is on the root element (<html>), whose scrollbar is the page
+// scrollbar. `scrollbar-gutter: stable` keeps that scrollbar's space while
+// it is hidden, so the page does not shift sideways when a window opens.
+//
+// A window can open over another one. Open windows share one lock: the first
+// saves the root's own `overflow` and `scrollbar-gutter`, and the page gets
+// them back only when the last window closes, in whatever order they close.
+
+let openLocks        = 0;
+let previousOverflow = '';
+let previousGutter   = '';
+
+// One lock per window: locking twice or unlocking twice counts once.
+export function createPageScrollLock() {
+  let locked = false;
+
+  return {
+    get locked() {
+      return locked;
+    },
+    lock() {
+      if (locked || typeof document === 'undefined') {
+        return;
+      }
+
+      const root = document.documentElement;
+
+      if (openLocks === 0) {
+        previousOverflow           = root.style.overflow;
+        previousGutter             = root.style.scrollbarGutter;
+        root.style.overflow        = 'hidden';
+        root.style.scrollbarGutter = 'stable';
+      }
+      openLocks += 1;
+      locked     = true;
+    },
+    unlock() {
+      if (!locked) {
+        return;
+      }
+
+      const root = document.documentElement;
+
+      openLocks -= 1;
+      locked     = false;
+      if (openLocks === 0) {
+        root.style.overflow        = previousOverflow;
+        root.style.scrollbarGutter = previousGutter;
+      }
+    },
+  };
+}
+
+// The element that has the focus, if any. A window that opens keeps it as
+// its opener.
+export function focusedElement() {
+  if (typeof document === 'undefined') {
+    return undefined;
+  }
+
+  const active = document.activeElement;
+
+  return active instanceof HTMLElement ? active : undefined;
+}
+
+// Focus goes back to the element that opened the window. The page stays
+// where the visitor left it instead of scrolling to that element.
+//
+// `reveal` is for an element that can be outside the browser window when it
+// gets the focus, such as a gallery tile that appears only after the grid
+// expands. The page then scrolls just enough to show the whole element,
+// smoothly unless the visitor prefers reduced motion, and stays where it is
+// when the element is already in view.
+export function restoreFocus(
+  target: HTMLElement | null | undefined,
+  { reveal = false }: { reveal?: boolean } = {},
+) {
+  if (!target?.isConnected) {
+    return;
+  }
+
+  target.focus({ preventScroll: true });
+  if (reveal && !inView(target)) {
+    const reduce = window.matchMedia?.(
+      '(prefers-reduced-motion: reduce)',
+    ).matches;
+
+    target.scrollIntoView({
+      block: 'nearest',
+      inline: 'nearest',
+      behavior: reduce ? 'auto' : 'smooth',
+    });
+  }
+}
+
+// Whether the whole element is inside the browser window.
+function inView(element: HTMLElement) {
+  const bounds = element.getBoundingClientRect();
+
+  return (
+    bounds.top >= 0 &&
+    bounds.left >= 0 &&
+    bounds.bottom <= window.innerHeight &&
+    bounds.right <= window.innerWidth
+  );
+}