orionplace-react 0.1.0 → 0.2.0

package/templates/lib/orionplace/cartShipment.ts

@@ -0,0 +1,61 @@
+import type {
+  ICartDelivery,
+  ICartStore,
+} from '@/interfaces/orionplace/cart/ICartData';
+import { getAvailableNestedValueFromObject } from '@/lib/orionplace/presentation';
+
+export interface ICartShipmentOrigin {
+  digital: boolean;
+  name: string;
+  address: string;
+}
+
+interface IShipmentLabels {
+  shipment: string;
+  of: string;
+  splitShipments: string;
+}
+
+export function cartShipmentOrigin(
+  store: ICartStore | null | undefined,
+  locale: string,
+): ICartShipmentOrigin | undefined {
+  if (!store) {
+    return undefined;
+  }
+
+  const city = getAvailableNestedValueFromObject(
+    store.locale,
+    locale,
+    'store_city',
+  );
+  const street = [store.line1, store.house_number].filter(Boolean).join(' ');
+  const address = [city, street, store.line2, store.postcode]
+    .filter(Boolean)
+    .join(', ');
+
+  return {
+    digital: store.virtual_goods === true,
+    name: store.store_name || `#${store.id}`,
+    address: store.virtual_goods ? '' : address,
+  };
+}
+
+export function cartShipmentTitle(
+  index: number,
+  total: number,
+  labels: IShipmentLabels,
+): string {
+  return total < 2
+    ? ''
+    : `${labels.shipment} ${index + 1} ${labels.of} ${total}`;
+}
+
+export function cartSplitNotice(
+  deliveries: readonly ICartDelivery[],
+  labels: IShipmentLabels,
+): string {
+  return deliveries.length > 1
+    ? labels.splitShipments.replace('{count}', String(deliveries.length))
+    : '';
+}

package/templates/lib/orionplace/cartSnapshot.ts

@@ -0,0 +1,21 @@
+import { ECartState } from '@/interfaces/orionplace/cart/ICartActions';
+import type {
+  ICartDelivery,
+  ICartGetResponse,
+} from '@/interfaces/orionplace/cart/ICartData';
+import type { IProduct } from '@/interfaces/orionplace/products/IProduct';
+
+type CartData = NonNullable<ICartGetResponse['page_data']>;
+
+export function cartSnapshotProducts(data: CartData): IProduct[] {
+  const products =
+    data.cart.state === ECartState.STATE_CHECKOUT
+      ? (data.cart_data as ICartDelivery[]).flatMap((delivery) =>
+          delivery.product_items.filter(
+            (item): item is NonNullable<typeof item> => item !== null,
+          ),
+        )
+      : (data.cart_data as IProduct[]);
+
+  return [...products, ...(data.will_not_ship ?? [])];
+}

package/templates/lib/orionplace/catalog.ts

@@ -0,0 +1,150 @@
+import type { ICategory, IProduct } from '@/interfaces/orionplace';
+
+export function publicCatalogCategories(
+  categories: ICategory[] = [],
+): ICategory[] {
+  return categories.filter((category) => category.is_public);
+}
+
+export function navigationCatalogCategories(
+  categories: ICategory[] = [],
+): ICategory[] {
+  return publicCatalogCategories(categories).filter(
+    (category) => !category.exclude_from_tree,
+  );
+}
+
+export function findNavigationCategory(
+  categories: ICategory[],
+  id: number,
+): ICategory | undefined {
+  for (const category of navigationCatalogCategories(categories)) {
+    if (category.id === id) {
+      return category;
+    }
+    const child = findNavigationCategory(category.childs ?? [], id);
+    if (child) {
+      return child;
+    }
+  }
+}
+
+export function findCatalogCategory(
+  categories: ICategory[],
+  id: number,
+): ICategory | undefined {
+  for (const category of publicCatalogCategories(categories)) {
+    if (category.id === id) {
+      return category;
+    }
+
+    const child = findCatalogCategory(category.childs ?? [], id);
+    if (child) {
+      return child;
+    }
+  }
+}
+
+/**
+ * The category and its public descendants: a category page searches all of
+ * them, as products are usually assigned to the deepest category.
+ */
+export function catalogBranchIds(
+  categories: ICategory[],
+  id: number,
+): number[] {
+  const category = findCatalogCategory(categories, id);
+  const branch   = (item: ICategory): number[] => [
+    item.id,
+    ...publicCatalogCategories(item.childs).flatMap(branch),
+  ];
+
+  return category ? branch(category) : [id];
+}
+
+export function catalogCategoryTrail(
+  categories: ICategory[],
+  ids: number[],
+): ICategory[] {
+  const trail: ICategory[] = [];
+  let children            = navigationCatalogCategories(categories);
+  for (const id of ids) {
+    const category = children.find((item) => item.id === id);
+    if (!category) {
+      break;
+    }
+    trail.push(category);
+    children = navigationCatalogCategories(category.childs ?? []);
+  }
+  return trail;
+}
+
+/** The shown categories from a root down to `id`; empty when `id` is not shown. */
+export function catalogCategoryPath(
+  categories: ICategory[],
+  id: number,
+): ICategory[] {
+  for (const category of navigationCatalogCategories(categories)) {
+    if (category.id === id) {
+      return [category];
+    }
+    const path = catalogCategoryPath(category.childs ?? [], id);
+    if (path.length) {
+      return [category, ...path];
+    }
+  }
+  return [];
+}
+
+export function catalogTrailToCategory(
+  categories: ICategory[],
+  id: number,
+): ICategory[] {
+  for (const category of publicCatalogCategories(categories)) {
+    if (category.id === id) {
+      return [category];
+    }
+
+    const descendants = catalogTrailToCategory(category.childs ?? [], id);
+    if (descendants.length) {
+      return [category, ...descendants];
+    }
+  }
+
+  return [];
+}
+
+export interface CatalogProductReference {
+  product: IProduct;
+  collection: 'products' | 'featured';
+}
+
+export function catalogRepresentatives(
+  category: ICategory | undefined,
+  products: IProduct[],
+  featured: IProduct[],
+): CatalogProductReference[] {
+  const ids = [
+    ...new Set([category?.product_rep_1_id, category?.product_rep_2_id]),
+  ];
+  const result: CatalogProductReference[] = [];
+
+  for (const id of ids) {
+    if (typeof id !== 'number') {
+      continue;
+    }
+
+    const product = products.find((item) => item.id === id);
+    if (product) {
+      result.push({ product, collection: 'products' });
+      continue;
+    }
+
+    const fallback = featured.find((item) => item.id === id);
+    if (fallback) {
+      result.push({ product: fallback, collection: 'featured' });
+    }
+  }
+
+  return result;
+}

package/templates/lib/orionplace/categoryLabels.ts

@@ -0,0 +1,21 @@
+export function categoryLabels(locale: string) {
+  return locale.toLowerCase().startsWith('ru')
+    ? {
+        breadcrumb: 'Путь к категории',
+        catalog: 'Каталог',
+        category: 'Категория',
+        subcategories: 'Разделы категории',
+        missing: 'Категория не найдена',
+        missingHint: 'Выберите доступную категорию в каталоге.',
+        home: 'Главная',
+      }
+    : {
+        breadcrumb: 'Category path',
+        catalog: 'Catalog',
+        category: 'Category',
+        subcategories: 'Explore this category',
+        missing: 'Category not found',
+        missingHint: 'Choose an available category from the catalog.',
+        home: 'Home',
+      };
+}

package/templates/lib/orionplace/contact.ts

@@ -0,0 +1,47 @@
+import type {
+  IContactRequest,
+  IUnsubscribeRequest,
+} from '@/interfaces/orionplace/accounts/IContact';
+
+export function contactCaptchaUrl(image: string | null | undefined): string {
+  const source = image?.replaceAll(/\s/g, '') ?? '';
+  return source && /^[a-z0-9+/]+={0,2}$/i.test(source)
+    ? `data:image/png;base64,${source}`
+    : '';
+}
+
+export function contactRequest(fields: IContactRequest): IContactRequest {
+  return {
+    full_name: fields.full_name.trim(),
+    email: fields.email.trim(),
+    message: fields.message,
+    captcha: fields.captcha.trim(),
+  };
+}
+
+export function cleanContactValue(value: string | null | undefined): string {
+  return value?.trim() ?? '';
+}
+
+export function contactPhoneHref(value: string | null | undefined): string {
+  const dialable = cleanContactValue(value).replace(/[^\d+]/g, '');
+  return /\d/.test(dialable) ? `tel:${dialable}` : '';
+}
+
+export function unsubscribeRequest(
+  token: string,
+  kind: string,
+): IUnsubscribeRequest | null {
+  if (
+    !token ||
+    token.length > 64 ||
+    (kind !== 'newsletter' && kind !== 'products')
+  ) {
+    return null;
+  }
+
+  return {
+    hash: token,
+    unsubcribe_type: kind,
+  };
+}

package/templates/lib/orionplace/contactLabels.ts

@@ -0,0 +1,102 @@
+const en = {
+  pageTitle: 'Contact information',
+  intro: 'Find the company details or send a question to the store.',
+  company: 'Company details',
+  companyName: 'Company',
+  legalName: 'Legal name',
+  address: 'Address',
+  phone: 'Phone',
+  social: 'Social media',
+  registration: 'Registration details',
+  taxId: 'Tax ID',
+  registrationNumber: 'Registration number',
+  copy: 'Copy',
+  copied: 'Copied',
+  copyAddress: 'Copy address',
+  copyPhone: 'Copy phone number',
+  copyTaxId: 'Copy tax ID',
+  copyRegistrationNumber: 'Copy registration number',
+  copiedStatus: 'Copied to the clipboard.',
+  copyFailed: 'Could not copy. Select the text instead.',
+  title: 'Contact us',
+  description: 'Fill in the form and the store will receive your question.',
+  name: 'Name',
+  email: 'Email',
+  message: 'Message',
+  messageHint: 'From 15 to 2048 characters.',
+  captcha: 'Code from the image',
+  refreshCaptcha: 'Refresh',
+  refreshCaptchaHint: 'Refresh the image',
+  send: 'Send',
+  sent: 'Your message has been sent to the store.',
+  another: 'Another',
+  anotherHint: 'Write another message',
+  unsubscribe: 'Email preferences',
+  unsubscribeAction: 'Unsubscribe',
+  newsletter: 'Stop receiving newsletters',
+  products: 'Stop product availability emails',
+  unsubscribeDone: 'You have unsubscribed from these emails.',
+  invalidLink:
+    'This link is incomplete. Open the unsubscribe link from your email.',
+  event: 'Take part in this offer',
+  eventDescription: 'Confirm participation to receive the offer by email.',
+  eventJoin: 'Participate',
+  eventDoneTitle: 'You’re enrolled',
+  eventDone: 'The promo code will be sent to your confirmed email.',
+  eventDoneAddress: 'Delivery email',
+  eventEmail:
+    'Confirm an email address to receive the promo code. Enrolling turns email messages on.',
+};
+
+const ru: typeof en = {
+  pageTitle: 'Контакты',
+  intro: 'Реквизиты компании и форма для вопроса магазину.',
+  company: 'Реквизиты и контакты компании',
+  companyName: 'Компания',
+  legalName: 'Юридическое название',
+  address: 'Адрес',
+  phone: 'Телефон',
+  social: 'Соцсети',
+  registration: 'Реквизиты',
+  taxId: 'ИНН',
+  registrationNumber: 'Регистрационный номер',
+  copy: 'Копировать',
+  copied: 'Скопировано',
+  copyAddress: 'Копировать адрес',
+  copyPhone: 'Копировать номер телефона',
+  copyTaxId: 'Копировать ИНН',
+  copyRegistrationNumber: 'Копировать регистрационный номер',
+  copiedStatus: 'Скопировано в буфер обмена.',
+  copyFailed: 'Не удалось скопировать. Выделите текст вручную.',
+  title: 'Связаться с нами',
+  description: 'Заполните форму, и магазин получит ваш вопрос.',
+  name: 'Имя',
+  email: 'Электронная почта',
+  message: 'Сообщение',
+  messageHint: 'От 15 до 2048 символов.',
+  captcha: 'Код с изображения',
+  refreshCaptcha: 'Обновить',
+  refreshCaptchaHint: 'Обновить изображение',
+  send: 'Отправить',
+  sent: 'Сообщение отправлено магазину.',
+  another: 'Ещё',
+  anotherHint: 'Написать ещё',
+  unsubscribe: 'Настройки рассылки',
+  unsubscribeAction: 'Отписаться',
+  newsletter: 'Отказаться от новостной рассылки',
+  products: 'Отказаться от писем о наличии товаров',
+  unsubscribeDone: 'Вы отписались от этих писем.',
+  invalidLink: 'Ссылка неполная. Откройте ссылку отписки из письма.',
+  event: 'Участвовать в акции',
+  eventDescription: 'Подтвердите участие, чтобы получить предложение по почте.',
+  eventJoin: 'Участвовать',
+  eventDoneTitle: 'Вы участвуете в акции',
+  eventDone: 'Промокод будет отправлен на подтверждённую электронную почту.',
+  eventDoneAddress: 'Адрес доставки',
+  eventEmail:
+    'Подтвердите электронную почту, чтобы получить промокод. При записи на акцию письма включаются.',
+};
+
+export function contactLabels(locale: string) {
+  return locale.toLowerCase().startsWith('ru') ? ru : en;
+}

package/templates/lib/orionplace/currency.ts

@@ -0,0 +1,128 @@
+import type { IAppLoadCommonCurrency } from '@/interfaces/orionplace/appBase/appLoadCommon/IAppLoadCommonCurrency';
+
+type CurrencyDisplay = Pick<
+  IAppLoadCommonCurrency,
+  'currency_code' | 'symbol_left' | 'symbol_right'
+>;
+
+/**
+ * A price with its currency symbol. With `locale` a number is written for
+ * the reader's language — «1 850 ₽», «458,80 ₽», «$21.99» — with two
+ * decimals only when there are kopecks or cents; text that is already
+ * formatted (a currency label) is kept as it is. Without `locale` the value
+ * is written as received, as before.
+ */
+export function formatCurrency(
+  value: string | number | null | undefined,
+  currency?: CurrencyDisplay,
+  locale = '',
+): string {
+  if (
+    value === undefined ||
+    value === null ||
+    value === '' ||
+    value === '—' ||
+    (typeof value === 'number' && !Number.isFinite(value))
+  ) {
+    return '—';
+  }
+
+  const left = currency?.symbol_left?.trim() ?? '';
+  const right = currency?.symbol_right?.trim() ?? '';
+  const code = currency?.currency_code.toUpperCase() ?? '';
+
+  return [left, formatAmount(value, locale), right || (!left ? code : '')]
+    .filter(Boolean)
+    .join('\u00a0');
+}
+
+/** A number for the reader's language; anything else as it is. */
+export function formatAmount(value: string | number, locale = ''): string {
+  const text   = String(value).trim();
+  const number =
+    typeof value === 'number' ? value : /^-?\d+(\.\d+)?$/.test(text) ? Number(text) : NaN;
+
+  if (!locale || !Number.isFinite(number)) {
+    return String(value);
+  }
+
+  const cents = Math.round(Math.abs(number) * 100) % 100 !== 0;
+  try {
+    return new Intl.NumberFormat(locale, {
+      minimumFractionDigits: cents ? 2 : 0,
+      maximumFractionDigits: 2,
+    }).format(number);
+  } catch {
+    // A storefront can provide a locale code unsupported by Intl.
+    return String(value);
+  }
+}
+
+export function currencyLabel(
+  currency?: CurrencyDisplay,
+  title?: string,
+): string {
+  if (!currency) {
+    return '';
+  }
+
+  const code = currency.currency_code.toUpperCase();
+  const label =
+    title && title.toUpperCase() !== code ? `${code} · ${title}` : code;
+
+  if (!currency.symbol_left?.trim() && !currency.symbol_right?.trim()) {
+    return label;
+  }
+
+  return formatCurrency(label, currency);
+}
+
+type CurrencyAmounts = Record<
+  string,
+  { transform_value?: string | number | null } | null | undefined
+>;
+
+/**
+ * The id of the dollar (code `USD`) among the store's currencies. OrionMarketplace
+ * decides a promo code's minimum order in dollars, from the catalog's
+ * dollar prices.
+ */
+export function dollarCurrencyId(
+  currencies: Record<string, CurrencyDisplay | undefined> | null | undefined,
+): string | undefined {
+  return Object.keys(currencies ?? {}).find(
+    (id) => currencies?.[id]?.currency_code?.toUpperCase() === 'USD',
+  );
+}
+
+/**
+ * An amount OrionMarketplace decides in dollars, such as a promo code's minimum order:
+ * «$ 544» while dollars are selected, «$ 544 ≈ 40 256 ₽» in another
+ * currency (the dollar amount decides, the other one is its conversion).
+ * Without `currencies` or a dollar amount only the selected currency is
+ * shown; '' when the selected amount is missing too.
+ */
+export function formatDollarAmount(
+  amounts: CurrencyAmounts | null | undefined,
+  currencyId: string,
+  currency: CurrencyDisplay | undefined,
+  locale = '',
+  currencies?: Record<string, CurrencyDisplay | undefined> | null,
+): string {
+  const dollarId = dollarCurrencyId(currencies);
+  const dollars  = dollarId ? amounts?.[dollarId]?.transform_value : undefined;
+  const selected = amounts?.[currencyId]?.transform_value;
+  const shown    = selected === undefined || selected === null
+    ? ''
+    : formatCurrency(selected, currency, locale);
+
+  if (!dollarId || dollars === undefined || dollars === null) {
+    return shown;
+  }
+
+  const dollar   = formatCurrency(dollars, currencies?.[dollarId], locale);
+
+  return dollarId === String(currencyId) || !shown
+    ? dollar
+    : `${dollar} ≈\u00a0${shown}`;
+}

package/templates/lib/orionplace/deliveryMap.ts

@@ -0,0 +1,86 @@
+import type { ICartDeliveryPoint } from '@/interfaces/orionplace/cart/ICartDeliveryActions';
+import type {
+  IDeliveryMapMarker,
+  IDeliveryMapPosition,
+} from '@/interfaces/orionplace/cart/IDeliveryMap';
+
+const LATITUDE_LIMIT = 90;
+const LONGITUDE_LIMIT = 180;
+
+function coordinate(value: unknown, limit: number) {
+  if (typeof value === 'string' && value.trim() === '') {
+    return undefined;
+  }
+  if (typeof value !== 'number' && typeof value !== 'string') {
+    return undefined;
+  }
+
+  const number = Number(value);
+  return Number.isFinite(number) && Math.abs(number) <= limit
+    ? number
+    : undefined;
+}
+
+export function deliveryMapPosition(
+  latitude: unknown,
+  longitude: unknown,
+): IDeliveryMapPosition | undefined {
+  const lat = coordinate(latitude, LATITUDE_LIMIT);
+  const lon = coordinate(longitude, LONGITUDE_LIMIT);
+
+  return lat === undefined || lon === undefined
+    ? undefined
+    : { latitude: lat, longitude: lon };
+}
+
+export function deliveryMapKey(publicKeys?: Record<string, string> | null) {
+  const key = publicKeys?.map_key;
+  return typeof key === 'string' ? key.trim() : '';
+}
+
+export function deliveryMapLanguage(locale: string) {
+  return locale.toLowerCase().startsWith('ru') ? 'ru_RU' : 'en_US';
+}
+
+export function pickupMapMarkers(
+  points: readonly ICartDeliveryPoint[],
+): IDeliveryMapMarker[] {
+  const markers: IDeliveryMapMarker[] = [];
+
+  for (const point of points) {
+    const position = deliveryMapPosition(point.latitude, point.longitude);
+    if (position) {
+      markers.push({
+        ...position,
+        id: point.code,
+        title: point.address || point.code,
+      });
+    }
+  }
+
+  return markers;
+}
+
+export function deliveryMapCenter(
+  markers: readonly IDeliveryMapMarker[],
+): IDeliveryMapPosition | undefined {
+  if (!markers.length) {
+    return undefined;
+  }
+
+  return {
+    latitude:
+      markers.reduce((sum, marker) => sum + marker.latitude, 0) /
+      markers.length,
+    longitude:
+      markers.reduce((sum, marker) => sum + marker.longitude, 0) /
+      markers.length,
+  };
+}
+
+export function canShowDeliveryMap(
+  apiKey: string,
+  markers: readonly IDeliveryMapMarker[],
+) {
+  return apiKey !== '' && markers.length > 0;
+}