orionplace-react 0.1.0 → 0.2.1

package/templates/lib/orionplace/presentation.ts

@@ -0,0 +1,84 @@
+/** Accepts the same public image addresses as the Nuxt storefront. */
+export function safePublicUrl(value: string | null | undefined): string {
+  const source = value?.trim() ?? '';
+
+  if (!source || /[\u0000-\u0020\\]/.test(source)) {
+    return '';
+  }
+
+  if (source.startsWith('/') && !source.startsWith('//')) {
+    return source;
+  }
+
+  try {
+    const url = new URL(source);
+    return ['http:', 'https:'].includes(url.protocol) &&
+      !url.username &&
+      !url.password
+      ? source
+      : '';
+  } catch {
+    return '';
+  }
+}
+
+function hasValue(value: unknown): boolean {
+  if (value === undefined || value === null || value === '') {
+    return false;
+  }
+  // A locale entry such as `"en": {}` holds no translation.
+  if (Object.getPrototypeOf(value) === Object.prototype) {
+    return Object.values(value as object).some(hasValue);
+  }
+  return true;
+}
+
+export function localesMatch(left: string, right: string): boolean {
+  const normalize = (value: string) =>
+    value.trim().toLowerCase().replaceAll('_', '-');
+
+  return normalize(left) === normalize(right);
+}
+
+export function getAvailableValueFromObject<T>(
+  values: Record<string, T> | null | undefined,
+  locale: string,
+  fallback = true,
+): T | undefined {
+  if (!values) {
+    return undefined;
+  }
+
+  const key = Object.keys(values).find((candidate) =>
+    localesMatch(candidate, locale),
+  );
+  if (key && hasValue(values[key])) {
+    return values[key];
+  }
+
+  return fallback ? Object.values(values).find(hasValue) : undefined;
+}
+
+/** Uses the selected translation, then the first populated translation. */
+export function getAvailableNestedValueFromObject<T, Key extends keyof T>(
+  values: Record<string, T> | null | undefined,
+  locale: string,
+  key: Key,
+): T[Key] | undefined {
+  if (!values) {
+    return undefined;
+  }
+
+  const selected = getAvailableValueFromObject(values, locale, false)?.[key];
+  if (hasValue(selected)) {
+    return selected;
+  }
+
+  return Object.values(values)
+    .map((value) => value[key])
+    .find(hasValue);
+}
+
+export function plainText(value: string | undefined): string {
+  return (value ?? '').replace(/<[^>]*>/g, '').trim();
+}

package/templates/lib/orionplace/productActionLabels.ts

@@ -0,0 +1,60 @@
+import { getAvailableValueFromObject } from '@/lib/orionplace/presentation';
+
+const labels = {
+  en: {
+    pending: 'Updating product…',
+    saved: 'Product updated.',
+    failed: 'The request failed. Your confirmed product data is unchanged.',
+    unavailable: 'This action is unavailable.',
+    login: 'Sign in to save favorites or availability notifications.',
+    email:
+      'Add an email address to your profile to receive availability notifications.',
+    contact: 'Enter an email address or phone number for your preorder.',
+    invalid:
+      'This action is not available for the selected product or quantity.',
+    refreshFailed:
+      'The action was accepted, but product data could not be refreshed. Reload its data before another action.',
+    retry: 'Reload',
+    preorder: 'Preorder',
+    close: 'Close',
+    preorderContact:
+      'Leave an email address or phone number so the seller can contact you about this preorder. If you have an account, sign in first.',
+    preorderAccount: 'Your preorder will be linked to your account.',
+    preorderPending: 'Sending…',
+    preorderSaved: 'Your preorder has been received.',
+    emailLabel: 'Email',
+    phoneLabel: 'Phone',
+    signIn: 'Sign in',
+    submit: 'Confirm',
+    cancel: 'Cancel',
+  },
+  ru: {
+    pending: 'Обновляем товар…',
+    saved: 'Товар обновлён.',
+    failed: 'Запрос не выполнен. Подтверждённые данные товара сохранены.',
+    unavailable: 'Это действие недоступно.',
+    login: 'Войдите, чтобы сохранять избранное и уведомления о наличии.',
+    email: 'Добавьте электронную почту в профиле для уведомлений о наличии.',
+    contact: 'Укажите электронную почту или телефон для предзаказа.',
+    invalid: 'Действие недоступно для выбранного товара или количества.',
+    refreshFailed:
+      'Действие принято, но данные товара не обновились. Загрузите их перед следующим действием.',
+    retry: 'Обновить',
+    preorder: 'Предзаказ',
+    close: 'Закрыть',
+    preorderContact:
+      'Оставьте электронную почту или телефон, чтобы продавец мог связаться с вами по предзаказу. Если у вас есть аккаунт, сначала войдите.',
+    preorderAccount: 'Предзаказ будет связан с вашим аккаунтом.',
+    preorderPending: 'Отправляем…',
+    preorderSaved: 'Предзаказ принят.',
+    emailLabel: 'Электронная почта',
+    phoneLabel: 'Телефон',
+    signIn: 'Войти',
+    submit: 'Подтвердить',
+    cancel: 'Отмена',
+  },
+};
+
+export function productActionLabels(locale: string) {
+  return getAvailableValueFromObject(labels, locale) ?? labels.en;
+}

package/templates/lib/orionplace/productAvailability.ts

@@ -0,0 +1,30 @@
+import { EProductStatus } from '@/interfaces/orionplace/products/IProduct';
+import type { IProduct } from '@/interfaces/orionplace/products/IProduct';
+
+export function productAvailability(
+  product: IProduct | undefined,
+  allowPreorder: boolean | undefined,
+) {
+  const status = product?.status.status;
+  const stock = product?.c_real_left ?? 0;
+  const onSale =
+    status === EProductStatus.PUBLISHED ||
+    status === EProductStatus.PUBLISHED_AS_OPTION;
+  const canAdd = status === EProductStatus.PUBLISHED && stock >= 1;
+  const canSubscribe = Boolean(product) && !(onSale && stock > 0);
+  const canPreorder =
+    Boolean(product) &&
+    allowPreorder === true &&
+    product?.seller?.is_accepting_preorders === true &&
+    stock <= 0 &&
+    (status === EProductStatus.LOW_STOCK ||
+      status === EProductStatus.LOW_SALE_STOCK);
+
+  return {
+    canAdd,
+    canSubscribe,
+    canPreorder,
+    isSubscribed: Boolean(product?.subscription_id),
+    maxQuantity: Math.max(0, Math.floor(stock)),
+  };
+}

package/templates/lib/orionplace/productGallery.ts

@@ -0,0 +1,64 @@
+export interface ProductThumbnailRailMetrics {
+  position: number;
+  size: number;
+  viewport: number;
+}
+
+export interface ProductThumbnailRailEdges {
+  back: boolean;
+  forward: boolean;
+}
+
+const edgeTolerance = 1;
+
+export function productThumbnailRailEdges(
+  metrics: ProductThumbnailRailMetrics,
+): ProductThumbnailRailEdges {
+  const end = metrics.position + metrics.viewport;
+
+  return {
+    back: metrics.position > edgeTolerance,
+    forward: end < metrics.size - edgeTolerance,
+  };
+}
+
+export function productThumbnailScrollTarget(
+  thumbnail: { start: number; length: number },
+  metrics: ProductThumbnailRailMetrics,
+  inset: number,
+): number | undefined {
+  const visibleStart = metrics.position + inset;
+  const visibleEnd = metrics.position + metrics.viewport - inset;
+  const end = thumbnail.start + thumbnail.length;
+  const last = Math.max(0, metrics.size - metrics.viewport);
+  let target: number | undefined;
+
+  if (thumbnail.start < visibleStart) {
+    target = Math.max(0, thumbnail.start - inset);
+  } else if (end > visibleEnd) {
+    target = Math.min(last, end - metrics.viewport + inset);
+  }
+
+  return target === metrics.position ? undefined : target;
+}
+
+export function productThumbnailKeyTarget(
+  key: string,
+  index: number,
+  count: number,
+): number | undefined {
+  if (key === 'ArrowUp' || key === 'ArrowLeft') {
+    return Math.max(0, index - 1);
+  }
+  if (key === 'ArrowDown' || key === 'ArrowRight') {
+    return Math.min(count - 1, index + 1);
+  }
+  if (key === 'Home') {
+    return 0;
+  }
+  if (key === 'End') {
+    return count - 1;
+  }
+
+  return undefined;
+}

package/templates/lib/orionplace/productLabels.ts

@@ -0,0 +1,82 @@
+import { getAvailableValueFromObject } from '@/lib/orionplace/presentation';
+
+const labels = {
+  en: {
+    addFavorite: 'Add to wishlist',
+    removeFavorite: 'Remove from wishlist',
+    saveFavorite: 'Save',
+    unsaveFavorite: 'Remove',
+    add: 'Add',
+    addHint: 'Add to cart',
+    increase: 'Increase quantity',
+    decrease: 'Decrease quantity',
+    remove: 'Remove from cart',
+    quantity: 'Quantity',
+    subscribe: 'Notify',
+    subscribeHint: 'Notify when available',
+    unsubscribe: 'Unsubscribe',
+    unsubscribeHint: 'Unsubscribe from availability notifications',
+    preorder: 'Preorder',
+    unavailable: 'Unavailable',
+    lowStock: 'Low stock',
+    badgeNew: 'New',
+    badgePopular: 'Popular',
+    badgeDeal: 'Offer',
+    badgeLowStock: 'Low stock',
+    reviews: ['review', 'reviews'],
+    variants: 'Variants',
+    secondary: 'Additional variants',
+    chooseVariant: 'Choose a variant',
+    closeVariants: 'Close variant selection',
+    loadingVariants: 'Loading available options…',
+    variantsFailed: 'Could not load the options. Try again.',
+    variantsUnavailable: 'Secondary variant lookup is unavailable.',
+    variantsEmpty: 'No secondary options are available for this choice.',
+    retryVariants: 'Retry',
+    variantLoading: 'Loading the selected variant…',
+    variantFailed: 'Could not load this variant. Select it again to retry.',
+    previewUnpublished: 'Preview: this product is not published.',
+    previewOption: 'Preview: this product is published only as an option.',
+  },
+  ru: {
+    addFavorite: 'Добавить в избранное',
+    removeFavorite: 'Убрать из избранного',
+    saveFavorite: 'Сохранить',
+    unsaveFavorite: 'Убрать',
+    add: 'Добавить',
+    addHint: 'Добавить в корзину',
+    increase: 'Увеличить количество',
+    decrease: 'Уменьшить количество',
+    remove: 'Убрать из корзины',
+    quantity: 'Количество',
+    subscribe: 'Уведомить',
+    subscribeHint: 'Уведомить о поступлении',
+    unsubscribe: 'Отписаться',
+    unsubscribeHint: 'Отписаться от уведомлений о наличии',
+    preorder: 'Предзаказ',
+    unavailable: 'Недоступно',
+    lowStock: 'Товар заканчивается',
+    badgeNew: 'Новинка',
+    badgePopular: 'Хит',
+    badgeDeal: 'Выгодно',
+    badgeLowStock: 'Заканчивается',
+    reviews: ['отзыв', 'отзыва', 'отзывов'],
+    variants: 'Варианты',
+    secondary: 'Дополнительные варианты',
+    chooseVariant: 'Выберите вариант',
+    closeVariants: 'Закрыть выбор варианта',
+    loadingVariants: 'Загрузка доступных значений…',
+    variantsFailed: 'Не удалось загрузить значения. Попробуйте ещё раз.',
+    variantsUnavailable: 'Загрузка дополнительных вариантов недоступна.',
+    variantsEmpty: 'Для этого значения нет доступных дополнительных вариантов.',
+    retryVariants: 'Повторить',
+    variantLoading: 'Загрузка выбранного варианта…',
+    variantFailed: 'Не удалось загрузить вариант. Выберите его ещё раз.',
+    previewUnpublished: 'Предпросмотр: товар не опубликован.',
+    previewOption: 'Предпросмотр: товар опубликован только как вариант.',
+  },
+};
+
+export function productLabels(locale: string) {
+  return getAvailableValueFromObject(labels, locale) ?? labels.en;
+}

package/templates/lib/orionplace/productPage.ts

@@ -0,0 +1,308 @@
+import type { IAppLoadCommonUnit } from '@/interfaces/orionplace/appBase/appLoadCommon/IAppLoadCommonUnit';
+import type {
+  IProduct,
+  IProductAttribute,
+  IProductAttributeName,
+} from '@/interfaces/orionplace/products/IProduct';
+import type {
+  IProductSpecificationGroup,
+  IProductSpecificationRow,
+} from '@/interfaces/orionplace/products/IProductSpecification';
+import type { ITransformValue } from '@/interfaces/orionplace/shared/ITransformValue';
+import {
+  getAvailableNestedValueFromObject,
+  getAvailableValueFromObject,
+} from '@/lib/orionplace/presentation';
+import type { OrionplaceApi } from '@/lib/orionplace/api';
+import { productWithSellerPermission } from '@/lib/orionplace/productSeller';
+import type { IProductSearchResponse } from '@/interfaces/orionplace/products/IProductSearchApi';
+
+export interface ProductPageLabels {
+  manufacturer: string;
+  weight: string;
+  dimensions: string;
+  type: string;
+  digital: string;
+  returnRegular: string;
+  returnDefect: string;
+  within: string;
+  days: string[];
+}
+
+export interface ProductPageManufacturer {
+  id: number;
+  name: string;
+  logo: string;
+  to: {
+    path: string;
+    query: Record<string, string | number>;
+  };
+}
+
+export interface ProductPageReturn {
+  key: 'regular' | 'defect';
+  label: string;
+  days: number;
+  value: string;
+}
+
+export async function requestProductPage(
+  api: OrionplaceApi,
+  productId: number,
+  previewKey = '',
+  signal?: AbortSignal,
+) {
+  const data = await api.request<
+    NonNullable<IProductSearchResponse['page_data']>
+  >(
+    previewKey ? 'products_preview' : 'products_search',
+    {
+      filters: previewKey
+        ? { id: productId, view_key: previewKey }
+        : { id: productId },
+      paginate: { page: 1, pp_items: 1 },
+    },
+    signal,
+  );
+  if (!data.products) {
+    throw new Error('Missing product list');
+  }
+  const product = data.products.data.find((item) => item.id === productId);
+  return product
+    ? productWithSellerPermission(product, data.selects?.sellers)
+    : undefined;
+}
+
+export function productPagePhotos(product: IProduct | undefined): string[] {
+  const images = product?.images;
+
+  return images?.full?.length ? images.full : (images?.small ?? []);
+}
+
+export function productPageManufacturer(
+  product: IProduct | undefined,
+  locale: string,
+): ProductPageManufacturer | undefined {
+  const manufacturer = product?.manufacture;
+  const name = manufacturer?.name?.trim();
+
+  if (!manufacturer || !name) {
+    return undefined;
+  }
+
+  return {
+    id: manufacturer.id,
+    name,
+    logo: manufacturer.small_image || manufacturer.image || '',
+    to: {
+      path: '/manufacturers',
+      query: { locale, manufacturer: manufacturer.id },
+    },
+  };
+}
+
+export function productPageReviewStat(product: IProduct | undefined) {
+  const count = Number(product?.feedback_stat?.c_feedbacks ?? 0);
+  const average = Number(product?.feedback_stat?.avg_raiting ?? 0);
+
+  if (!count || !Number.isFinite(average)) {
+    return undefined;
+  }
+
+  return { count, average: Math.round(average * 10) / 10 };
+}
+
+function pluralWord(count: number, forms: string[], locale: string) {
+  let rule: Intl.LDMLPluralRule;
+
+  try {
+    rule = new Intl.PluralRules(locale).select(count);
+  } catch {
+    rule = new Intl.PluralRules('en').select(count);
+  }
+
+  if (rule === 'one') {
+    return forms[0] ?? '';
+  }
+  if (rule === 'few' && forms.length > 2) {
+    return forms[1] ?? '';
+  }
+
+  return forms.at(-1) ?? '';
+}
+
+export function productPageReturns(
+  product: IProduct | undefined,
+  locale: string,
+  labels: ProductPageLabels,
+): ProductPageReturn[] {
+  const refunds = product?.refunds;
+
+  if (!refunds || product?.is_digital) {
+    return [];
+  }
+
+  return [
+    {
+      key: 'regular' as const,
+      label: labels.returnRegular,
+      days: refunds.customer_max_refund_days,
+    },
+    {
+      key: 'defect' as const,
+      label: labels.returnDefect,
+      days: refunds.max_refund_days_with_defect,
+    },
+  ]
+    .filter((entry) => entry.days > 0)
+    .map((entry) => ({
+      ...entry,
+      value: `${labels.within} ${entry.days} ${pluralWord(
+        entry.days,
+        labels.days,
+        locale,
+      )}`,
+    }));
+}
+
+function formatNumber(value: number, locale: string) {
+  try {
+    return new Intl.NumberFormat(locale, {
+      maximumFractionDigits: 2,
+    }).format(value);
+  } catch {
+    return String(value);
+  }
+}
+
+function measurement(
+  values: Record<string, ITransformValue> | undefined,
+  units: Record<string, IAppLoadCommonUnit>,
+  selectedId: string,
+  locale: string,
+) {
+  const unitId = values?.[selectedId]
+    ? selectedId
+    : Object.keys(values ?? {})[0];
+  const amount = unitId ? values?.[unitId]?.transform_value : undefined;
+
+  if (!unitId || !amount || amount <= 0) {
+    return undefined;
+  }
+
+  const unit = units[unitId];
+  const label =
+    getAvailableNestedValueFromObject(unit?.locales, locale, 'unit') ||
+    unit?.unit ||
+    '';
+
+  return { amount: formatNumber(amount, locale), unit: label };
+}
+
+function attributeList(value: IProduct['attributes']): IProductAttribute[] {
+  if (!value) {
+    return [];
+  }
+
+  return Array.isArray(value) ? value : Object.values(value);
+}
+
+function attributeRow(
+  name: IProductAttributeName,
+  locale: string,
+): IProductSpecificationRow | undefined {
+  const localized = getAvailableValueFromObject(name.locale, locale, false);
+  const values =
+    localized && Object.keys(localized).length
+      ? localized
+      : Object.values(name.locale ?? {}).find(
+          (entry) => entry && Object.keys(entry).length,
+        );
+  const entry = values ? Object.entries(values)[0] : undefined;
+
+  return entry
+    ? { key: `name-${name.id}`, label: entry[0], value: entry[1] }
+    : undefined;
+}
+
+export function productPageSpecifications({
+  product,
+  locale,
+  weights,
+  lengths,
+  weightId,
+  lengthId,
+  labels,
+}: {
+  product: IProduct | undefined;
+  locale: string;
+  weights: Record<string, IAppLoadCommonUnit>;
+  lengths: Record<string, IAppLoadCommonUnit>;
+  weightId: string;
+  lengthId: string;
+  labels: ProductPageLabels;
+}): IProductSpecificationGroup[] {
+  if (!product) {
+    return [];
+  }
+
+  const general: IProductSpecificationRow[] = [];
+  const manufacturer = productPageManufacturer(product, locale);
+  if (manufacturer) {
+    general.push({
+      key: 'manufacturer',
+      label: labels.manufacturer,
+      value: manufacturer.name,
+      to: manufacturer.to,
+    });
+  }
+
+  const weight = measurement(product.weight_dict, weights, weightId, locale);
+  const dimensions = [
+    product.length_dict?.length,
+    product.length_dict?.width,
+    product.length_dict?.height,
+  ].map((value) => measurement(value, lengths, lengthId, locale));
+
+  if (weight) {
+    general.push({
+      key: 'weight',
+      label: labels.weight,
+      value: `${weight.amount} ${weight.unit}`,
+    });
+  }
+  if (dimensions.every(Boolean)) {
+    const unit = dimensions[0]!.unit;
+    const amounts = dimensions.map((value) => value!.amount).join(' × ');
+    general.push({
+      key: 'dimensions',
+      label: labels.dimensions,
+      value: `${amounts} ${unit}`,
+    });
+  }
+  if (product.is_digital) {
+    general.push({
+      key: 'type',
+      label: labels.type,
+      value: labels.digital,
+    });
+  }
+
+  const groups: IProductSpecificationGroup[] = general.length
+    ? [{ key: 'general', title: '', rows: general }]
+    : [];
+  for (const attribute of attributeList(product.attributes)) {
+    const rows = attribute.names
+      .map((name) => attributeRow(name, locale))
+      .filter((row): row is IProductSpecificationRow => Boolean(row));
+    if (rows.length) {
+      groups.push({
+        key: `attribute-${attribute.id}`,
+        title: getAvailableValueFromObject(attribute.locales, locale) ?? '',
+        rows,
+      });
+    }
+  }
+
+  return groups;
+}

package/templates/lib/orionplace/productPhotos.ts

@@ -0,0 +1,67 @@
+// Photo switching shared by ProductCard and HoverImageViewer: a pointer
+// moved across the photo shows the photo of its zone, a horizontal swipe
+// on a touch screen steps to the next or previous photo.
+
+export interface IProductPhotoSources {
+  small?: string[] | null;
+  full?: string[] | null;
+}
+
+// A finger must move this far sideways, and more sideways than up or down,
+// before a touch counts as a swipe; shorter moves stay taps and scrolls.
+export const PRODUCT_PHOTO_SWIPE_DISTANCE = 30;
+
+// The product's small photos, or its full-size photos when it has no small
+// ones. A `large` place, such as the compact card, prefers the full-size
+// photos and falls back to the small ones.
+export function productPhotos(
+  images: IProductPhotoSources | null | undefined,
+  large = false,
+): string[] {
+  const small     = (images?.small ?? []).filter(Boolean);
+  const full      = (images?.full ?? []).filter(Boolean);
+  const preferred = large ? full : small;
+
+  if (preferred.length) {
+    return preferred;
+  }
+
+  return large ? small : full;
+}
+
+// The photo under the pointer: the photo area is split into one equal
+// vertical zone per photo, from left to right.
+export function productPhotoAtPointer(
+  pointerX: number,
+  area: { left: number; width: number },
+  count: number,
+): number {
+  if (!area.width || count < 2) {
+    return 0;
+  }
+
+  const index = Math.floor(((pointerX - area.left) / area.width) * count);
+
+  return Math.max(0, Math.min(count - 1, index));
+}
+
+// The photo a swipe leads to: a swipe to the left shows the next photo, a
+// swipe to the right the previous one; the first and last photos stay put.
+export function productPhotoAfterSwipe(
+  index: number,
+  count: number,
+  movedX: number,
+  movedY: number,
+): number {
+  if (
+    count < 2 ||
+    Math.abs(movedX) < PRODUCT_PHOTO_SWIPE_DISTANCE ||
+    Math.abs(movedX) <= Math.abs(movedY)
+  ) {
+    return index;
+  }
+
+  const next = index + (movedX < 0 ? 1 : -1);
+
+  return Math.max(0, Math.min(count - 1, next));
+}