orionplace-react 0.1.0 → 0.2.0

package/templates/lib/orionplace/pageMetadata.ts

@@ -0,0 +1,247 @@
+import type { Metadata } from 'next';
+import type { IAppLoadCommon } from '@/interfaces/orionplace/appBase/IAppLoadCommon';
+import type {
+  IProduct,
+  IProductLocale,
+} from '@/interfaces/orionplace/products/IProduct';
+import type { IBlogPost } from '@/interfaces/orionplace/blog/IBlogApi';
+import type {
+  ISubscribeTariff,
+  ISubscribeTariffLocales,
+} from '@/interfaces/orionplace/subscribeTariff/ISubscribeTariff';
+import type { ICategoryLocale } from '@/interfaces/orionplace/category/ICategory';
+import type { IPromoDefinition } from '@/interfaces/orionplace/cart/ICartData';
+import { promoName } from '@/lib/orionplace/promoPresentation';
+import {
+  storefrontPageMetadata,
+  type StorefrontSeoPage,
+} from '@/lib/orionplace/pageSeo';
+import { getStorefrontSeo } from '@/lib/orionplace/seo';
+import { findCatalogCategory } from '@/lib/orionplace/catalog';
+import { blogPostCover } from '@/lib/orionplace/blogPresentation';
+import { browseLabels } from '@/lib/orionplace/browseLabels';
+import {
+  productSearchSeoTitle,
+  type ProductSearchScope,
+  type ProductSearchScopeNames,
+} from '@/lib/orionplace/productSearch';
+import {
+  getAvailableNestedValueFromObject,
+  plainText,
+} from '@/lib/orionplace/presentation';
+
+const privatePages = new Set([
+  'activity',
+  'addresses',
+  'cart',
+  'logout',
+  'orders',
+  'profile',
+  'subscriptions',
+  'tickets',
+  'unsubscribe',
+  'wallet',
+  'wishlist',
+]);
+
+type MetadataValues = {
+  title?: string;
+  description?: string;
+  keywords?: string;
+};
+type MetaTags = ReturnType<typeof getStorefrontSeo>['meta'];
+
+export type StorefrontPageRecords = {
+  product?: IProduct;
+  post?: IBlogPost;
+  tariff?: ISubscribeTariff;
+  promo?: IPromoDefinition | null;
+  search?: { scope: ProductSearchScope; names: ProductSearchScopeNames };
+  pageKind?: 'notFound' | 'error';
+};
+
+export function storefrontSeoPage(pathname: string): StorefrontSeoPage {
+  const segments    = pathname.split('/').filter(Boolean);
+  const section     = segments[0];
+  const staticPages = new Set([
+    'browse',
+    'catalog',
+    'featured',
+    'journal',
+    'manufacturers',
+    'sellers',
+    'stores',
+    'contact',
+    'tariffs',
+    ...privatePages,
+  ]);
+
+  if (!section) {
+    return 'home';
+  }
+  if (segments.length === 1 && staticPages.has(section)) {
+    return section as StorefrontSeoPage;
+  }
+  const id          = segments.at(-1) ?? '';
+  if (section === 'promo' && segments.length === 2) {
+    const promoId    = Number(id);
+    const validPromo =
+      /^\d+$/.test(id) && Number.isSafeInteger(promoId) && promoId > 0;
+    return validPromo ? 'promo' : 'notFound';
+  }
+  const positiveId  = /^[1-9]\d*$/.test(id);
+  if (!positiveId) {
+    return 'notFound';
+  }
+  if (section === 'tariffs' && segments.length === 3) {
+    return 'tariff';
+  }
+  if (section === 'journal' && segments.length === 2) {
+    return 'publication';
+  }
+  if (segments.length === 2 && ['category', 'product'].includes(section)) {
+    return section as StorefrontSeoPage;
+  }
+  return 'notFound';
+}
+
+export function storefrontMetadata(
+  init: IAppLoadCommon | null,
+  locale: string,
+  url: URL,
+  records: StorefrontPageRecords = {},
+) {
+  const segments               = url.pathname.split('/').filter(Boolean);
+  let page                     = records.pageKind ?? storefrontSeoPage(url.pathname);
+  if (
+    page === 'category' &&
+    init &&
+    !findCatalogCategory(init.catalog ?? [], Number(segments[1]))
+  ) {
+    page = 'notFound';
+  }
+  const values: MetadataValues = {};
+  let image: string | undefined;
+  const tags: MetaTags         = [];
+  let robots: string | undefined;
+  if (privatePages.has(page) || page === 'notFound' || page === 'error') {
+    robots = 'noindex, nofollow';
+  } else if (page === 'browse') {
+    robots = 'noindex, follow';
+  }
+
+  if (page === 'home') {
+    const seo          = getStorefrontSeo(init?.seo ?? [], locale);
+    values.title       = seo.title || init?.contact?.company_name || 'Orionplace';
+    values.description = seo.meta.findLast(
+      (tag) => 'name' in tag && tag.name === 'description',
+    )?.content;
+    values.keywords    = seo.meta.findLast(
+      (tag) => 'name' in tag && tag.name === 'keywords',
+    )?.content;
+    tags.push(
+      ...seo.meta.filter(
+        (tag) =>
+          !('name' in tag && ['description', 'keywords'].includes(tag.name)),
+      ),
+    );
+  } else if (page === 'browse') {
+    const scope  = records.search?.scope ?? {
+      query: url.searchParams.get('q') ?? '',
+      manufacturerId: Number(url.searchParams.get('manufacturer')) || undefined,
+      sellerId: Number(url.searchParams.get('seller')) || undefined,
+      storeId: Number(url.searchParams.get('store')) || undefined,
+    };
+    values.title = productSearchSeoTitle(
+      scope,
+      records.search?.names ?? {},
+      browseLabels(locale),
+    );
+  } else if (page === 'category') {
+    const category     = findCatalogCategory(
+      init?.catalog ?? [],
+      Number(segments[1]),
+    );
+    const field        = <Key extends keyof ICategoryLocale>(name: Key) =>
+      getAvailableNestedValueFromObject(category?.locale, locale, name);
+    values.title       = field('cg_title') || field('cg_name');
+    values.description = field('meta_description');
+    values.keywords    = field('meta_keywords');
+  } else if (page === 'product' && records.product) {
+    const product      = records.product;
+    const field        = <Key extends keyof IProductLocale>(name: Key) =>
+      getAvailableNestedValueFromObject(product.locale, locale, name);
+    values.title       = field('product_name');
+    values.description = plainText(
+      field('meta_description') || field('short_description'),
+    ).slice(0, 160);
+    image              = product.images?.full?.[0] ?? product.images?.small?.[0];
+    if (url.searchParams.get('key')) {
+      robots = 'noindex, nofollow';
+    }
+  } else if (page === 'publication' && records.post) {
+    values.title       = getAvailableNestedValueFromObject(
+      records.post.locale,
+      locale,
+      'post_title',
+    );
+    values.description = plainText(
+      getAvailableNestedValueFromObject(
+        records.post.locale,
+        locale,
+        'post_preview_text',
+      ),
+    ).slice(0, 160);
+    image              = blogPostCover(records.post);
+  } else if (page === 'tariff' && records.tariff) {
+    const tariff       = records.tariff;
+    const field        = <Key extends keyof ISubscribeTariffLocales>(name: Key) =>
+      getAvailableNestedValueFromObject(tariff.locales, locale, name);
+    values.title       = field('tariff_title') || field('tariff_name');
+    values.description = plainText(
+      field('tariff_meta_description') || field('tariff_short_description'),
+    ).slice(0, 160);
+    values.keywords    = field('tariff_meta_keywords');
+    image              = tariff.tariff_image?.full?.[0] ?? tariff.tariff_image?.small?.[0];
+    robots             = 'index, follow';
+  } else if (page === 'promo' && records.promo) {
+    // The offer's name, as the other packages title this page.
+    values.title       = promoName(records.promo, locale);
+  }
+  const content                = storefrontPageMetadata(page, locale, values);
+  const metadata: Metadata     = {
+    ...content,
+    ...(robots ? { robots } : {}),
+    openGraph: {
+      title: content.title,
+      description: content.description,
+      ...(image ? { images: [image] } : {}),
+    },
+  };
+  const headTags               = new Map<
+    string,
+    { name?: string; property?: string; content: string }
+  >();
+  for (const [name, value] of Object.entries({
+    description: content.description,
+    keywords: content.keywords,
+    robots,
+    'og:title': content.title,
+    'og:description': content.description,
+    'og:image': image,
+  })) {
+    headTags.set(name, {
+      ...(name.startsWith('og:') ? { property: name } : { name }),
+      content: value ?? '',
+    });
+  }
+  for (const tag of tags) {
+    const name = 'property' in tag ? tag.property : tag.name;
+    headTags.set(name, tag);
+  }
+  return {
+    metadata,
+    tags,
+    head: { title: content.title, meta: [...headTags.values()] },
+  };
+}

package/templates/lib/orionplace/pageSeo.ts

@@ -0,0 +1,274 @@
+import { plainText } from '@/lib/orionplace/presentation';
+
+const pageCopy = {
+  ru: {
+    tariffs: [
+      'Тарифы подписок',
+      'Цены по периодам, пробный период и опции каждого тарифа.',
+      'тарифы, подписки, пробный период',
+    ],
+    tariff: [
+      'Тариф подписки',
+      'Описание, возможности, периоды и опции тарифа подписки.',
+      'тариф, подписка, период',
+    ],
+    subscriptions: [
+      'Мои подписки',
+      'Сроки подписок и автопродление.',
+      'подписки, аккаунт',
+    ],
+    sellers: ['Продавцы', 'Продавцы и их товары.', 'продавцы, товары'],
+    stores: [
+      'Магазины',
+      'Адреса, контакты и часы работы магазинов.',
+      'магазины, адреса',
+    ],
+    catalog: ['Каталог', 'Категории товаров магазина.', 'каталог, категории'],
+    activity: [
+      'Моя активность',
+      'Промокоды, отзывы и история входов покупателя.',
+      'аккаунт, промокоды, отзывы, входы',
+    ],
+    promo: [
+      'Товары по промокоду',
+      'Товары магазина, на которые действует акция промокода.',
+      'промокод, акция, товары',
+    ],
+    wishlist: [
+      'Избранное',
+      'Сохранённые товары и уведомления о наличии.',
+      'избранное, товары',
+    ],
+    contact: [
+      'Контакты',
+      'Контакты компании и обратная связь с магазином.',
+      'контакты, сообщение',
+    ],
+    unsubscribe: [
+      'Настройки рассылки',
+      'Отписка от писем магазина.',
+      'рассылка, отписка',
+    ],
+    tickets: [
+      'Поддержка',
+      'Обращения пользователя и переписка с поддержкой.',
+      'поддержка, обращения',
+    ],
+    orders: ['Мои заказы', 'История и состав заказов.', 'заказы, покупки'],
+    cart: ['Корзина', 'Товары и оформление заказа.', 'корзина, заказ'],
+    addresses: ['Мои адреса', 'Адреса для доставки.', 'адреса, доставка'],
+    wallet: [
+      'Кошелёк и платежи',
+      'Баланс и история платежей.',
+      'кошелёк, платежи',
+    ],
+    home: [
+      'Магазин',
+      'Категории и товары магазина.',
+      'магазин, каталог, товары',
+    ],
+    browse: [
+      'Результаты поиска',
+      'Товары по поисковому запросу и выбранным фильтрам.',
+      'поиск товаров, фильтры, каталог',
+    ],
+    featured: [
+      'Рекомендуем',
+      'Товары из категорий, которые покупатель искал в магазине.',
+      'рекомендации, товары, фильтры',
+    ],
+    category: [
+      'Категория товаров',
+      'Товары и доступные фильтры выбранной категории.',
+      'категория, товары, фильтры',
+    ],
+    journal: [
+      'Журнал',
+      'Публикации магазина: заголовки, анонсы и время чтения.',
+      'журнал, публикации, статьи',
+    ],
+    publication: [
+      'Публикация журнала',
+      'Статья из журнала магазина.',
+      'журнал, публикация, статья',
+    ],
+    product: [
+      'Карточка товара',
+      'Описание, цена, варианты и наличие товара.',
+      'товар, цена, наличие',
+    ],
+    manufacturers: [
+      'Производители',
+      'Производители магазина с логотипами и алфавитным указателем.',
+      'производители, бренды, алфавитный указатель',
+    ],
+    profile: [
+      'Личный профиль',
+      'Личные данные, почта, уведомления и пароль аккаунта.',
+      'профиль, аккаунт, настройки',
+    ],
+    logout: [
+      'Выход из аккаунта',
+      'Завершение сеанса и возврат на главную страницу.',
+      'аккаунт, выход, сеанс',
+    ],
+    notFound: [
+      'Страница не найдена',
+      'По этому адресу в магазине нет страницы.',
+      'страница не найдена, 404',
+    ],
+    error: [
+      'Что-то пошло не так',
+      'Не удалось показать страницу магазина.',
+      'ошибка, магазин',
+    ],
+  },
+  en: {
+    tariffs: [
+      'Subscription plans',
+      'Period prices, trials and options for each plan.',
+      'plans, subscriptions, trial',
+    ],
+    tariff: [
+      'Subscription plan',
+      'Description, features, periods and options of a subscription plan.',
+      'plan, subscription, period',
+    ],
+    subscriptions: [
+      'My subscriptions',
+      'Subscription dates and automatic renewal.',
+      'subscriptions, account',
+    ],
+    sellers: ['Sellers', 'Sellers and their products.', 'sellers, products'],
+    stores: [
+      'Stores',
+      'Store addresses, contacts and opening hours.',
+      'stores, addresses',
+    ],
+    catalog: ['Catalog', 'Store product categories.', 'catalog, categories'],
+    activity: [
+      'My activity',
+      'The customer’s promo codes, reviews and sign-in history.',
+      'account, promo codes, reviews, sign-ins',
+    ],
+    promo: [
+      'Promo code products',
+      'Store products the promo code offer applies to.',
+      'promo code, offer, products',
+    ],
+    wishlist: [
+      'Wishlist',
+      'Saved products and availability notifications.',
+      'wishlist, products',
+    ],
+    contact: [
+      'Contact information',
+      'Company contact details and a message form for the store.',
+      'contact, message',
+    ],
+    unsubscribe: [
+      'Email preferences',
+      'Unsubscribe from store emails.',
+      'emails, unsubscribe',
+    ],
+    tickets: [
+      'Support',
+      'User conversations with support.',
+      'support, conversations',
+    ],
+    orders: [
+      'My orders',
+      'Order history and purchased items.',
+      'orders, purchases',
+    ],
+    cart: ['Shopping cart', 'Items and checkout.', 'cart, checkout'],
+    addresses: [
+      'My addresses',
+      'Saved delivery addresses.',
+      'addresses, delivery',
+    ],
+    wallet: [
+      'Wallet and payments',
+      'Balance and payment history.',
+      'wallet, payments',
+    ],
+    home: [
+      'Store',
+      'Store categories and products.',
+      'store, catalog, products',
+    ],
+    browse: [
+      'Search results',
+      'Products matching the search query and selected filters.',
+      'product search, filters, catalog',
+    ],
+    featured: [
+      'Featured',
+      'Products from categories the customer has searched for in the store.',
+      'recommendations, products, filters',
+    ],
+    category: [
+      'Product category',
+      'Products and available filters in the selected category.',
+      'category, products, filters',
+    ],
+    journal: [
+      'Journal',
+      'Store publications with titles, summaries and reading time.',
+      'journal, publications, articles',
+    ],
+    publication: [
+      'Journal publication',
+      'An article from the store journal.',
+      'journal, publication, article',
+    ],
+    product: [
+      'Product details',
+      'Product description, price, variants and availability.',
+      'product, price, availability',
+    ],
+    manufacturers: [
+      'Manufacturers',
+      'Store manufacturers with logos and an alphabetical index.',
+      'manufacturers, brands, alphabetical index',
+    ],
+    profile: [
+      'Personal profile',
+      'Personal details, email, notifications and account password.',
+      'profile, account, settings',
+    ],
+    logout: [
+      'Sign out',
+      'End the current session and return to the homepage.',
+      'account, sign out, session',
+    ],
+    notFound: [
+      'Page not found',
+      'The store has no page at this address.',
+      'page not found, 404',
+    ],
+    error: [
+      'Something went wrong',
+      'The store page could not be displayed.',
+      'error, store',
+    ],
+  },
+} as const;
+
+export type StorefrontSeoPage = keyof typeof pageCopy.en;
+
+export function storefrontPageMetadata(
+  page: StorefrontSeoPage,
+  locale: string,
+  values: { title?: string; description?: string; keywords?: string } = {},
+) {
+  const copy  =
+    pageCopy[locale.toLowerCase().startsWith('ru') ? 'ru' : 'en'][page];
+  const title = plainText(values.title ?? '') || copy[0];
+
+  return {
+    title,
+    description: plainText(values.description ?? '') || `${title}. ${copy[1]}`,
+    keywords: plainText(values.keywords ?? '') || `${title}, ${copy[2]}`,
+  };
+}

package/templates/lib/orionplace/paginationScroll.ts

@@ -0,0 +1,131 @@
+// An element or a CSS selector; null keeps the current scroll position.
+// Without a value, the nearest section, article or main element that
+// contains the page controls is used.
+export type PaginationScrollTarget = HTMLElement | string | null;
+
+const LIST_CONTAINER = 'section, article, main';
+const LIST_HEADING = 'h1, h2, h3, h4';
+const DIALOG = 'dialog, [role="dialog"]';
+const DEFAULT_GAP = 16;
+export const PAGINATION_FOCUS_ATTRIBUTE = 'data-orionplace-pagination-focus';
+
+export function resolvePaginationScrollTarget(
+  source: Element | null | undefined,
+  target?: PaginationScrollTarget,
+): HTMLElement | null {
+  if (target === null) {
+    return null;
+  }
+
+  if (typeof target === 'string') {
+    return document.querySelector<HTMLElement>(target);
+  }
+
+  if (target) {
+    return target;
+  }
+
+  if (typeof source?.closest !== 'function') {
+    return null;
+  }
+
+  return source.closest<HTMLElement>(LIST_CONTAINER);
+}
+
+// A header that stays on screen while scrolling would cover the list heading.
+export function stickyHeaderOffset(): number {
+  let offset = 0;
+
+  for (const header of document.querySelectorAll('header')) {
+    const position = getComputedStyle(header).position;
+
+    if (position !== 'sticky' && position !== 'fixed') {
+      continue;
+    }
+
+    const rect = header.getBoundingClientRect();
+
+    if (rect.top <= 0) {
+      offset = Math.max(offset, rect.height);
+    }
+  }
+
+  return offset;
+}
+
+function scrollBehavior(): ScrollBehavior {
+  const reduced = window.matchMedia?.(
+    '(prefers-reduced-motion: reduce)',
+  ).matches;
+
+  return reduced ? 'auto' : 'smooth';
+}
+
+function containsFocus(source: Element | null | undefined) {
+  const active = globalThis.document?.activeElement;
+
+  if (!active || typeof source?.contains !== 'function') {
+    return false;
+  }
+
+  return source.contains(active);
+}
+
+function focusListHeading(list: HTMLElement) {
+  const heading = list.matches(LIST_HEADING)
+    ? list
+    : list.querySelector<HTMLElement>(LIST_HEADING);
+
+  if (!heading) {
+    return;
+  }
+
+  if (!heading.hasAttribute('tabindex')) {
+    heading.setAttribute('tabindex', '-1');
+  }
+
+  heading.setAttribute(PAGINATION_FOCUS_ATTRIBUTE, '');
+  heading.focus({ preventScroll: true });
+}
+
+// Brings the start of a paginated list into view after a page change.
+export function scrollToPaginatedList(
+  source: Element | null | undefined,
+  target?: PaginationScrollTarget,
+) {
+  if (target === null || typeof window === 'undefined') {
+    return;
+  }
+
+  const behavior = scrollBehavior();
+  const list = resolvePaginationScrollTarget(source, target);
+  const hadFocus = containsFocus(source);
+
+  if (!list) {
+    window.scrollTo({ top: 0, behavior });
+    return;
+  }
+
+  if (list.closest(DIALOG)) {
+    list.scrollIntoView({ block: 'start', behavior });
+  } else {
+    const margin = parseFloat(getComputedStyle(list).scrollMarginTop);
+    const gap = margin > 0 ? margin : DEFAULT_GAP;
+    const top =
+      list.getBoundingClientRect().top +
+      window.scrollY -
+      stickyHeaderOffset() -
+      gap;
+    // A list that starts near the page top is a full-page list: return to
+    // the page top so the storefront header is visible again.
+    const nearPageTop = top < window.innerHeight / 2;
+
+    window.scrollTo({ top: nearPageTop ? 0 : top, behavior });
+  }
+
+  // Keyboard users continue from the list heading instead of a
+  // disabled page button.
+  if (hadFocus) {
+    focusListHeading(list);
+  }
+}

package/templates/lib/orionplace/phone.ts

@@ -0,0 +1,22 @@
+/**
+ * A phone number typed without «+» on the Russian storefront, as people in
+ * Russia usually type it: «8 900 555-01-72» (the domestic prefix 8) or
+ * «900 555-01-72» (a mobile number without the country code). The backend
+ * reads numbers only in the international format and refuses both, so they
+ * become +7: «+79005550172». A number typed with «+», another kind of
+ * number and every other language stay as typed.
+ */
+export function phoneWithCountryCode(value: string, locale: string): string {
+  if (locale !== 'ru' || value.trim().startsWith('+')) {
+    return value;
+  }
+
+  const digits = value.replace(/\D/g, '');
+  if (digits.length === 11 && digits.startsWith('8')) {
+    return `+7${digits.slice(1)}`;
+  }
+  if (digits.length === 10 && digits.startsWith('9')) {
+    return `+7${digits}`;
+  }
+  return value;
+}