orionplace-react 0.1.0 → 0.2.1

package/templates/lib/orionplace/promoPresentation.ts

@@ -0,0 +1,381 @@
+import {
+  EPromoProductDiscount,
+  EPromoType,
+} from '@/interfaces/orionplace/cart/ICartData';
+import type {
+  ICurrencyAmounts,
+  IPromoDefinition,
+} from '@/interfaces/orionplace/cart/ICartData';
+import { EPromoUsageLimit } from '@/interfaces/orionplace/marketing/IPromoActions';
+import type { IPromoIssue } from '@/interfaces/orionplace/marketing/IPromoActions';
+import type { IApiDateTime } from '@/interfaces/orionplace/accounts/IProfileData';
+import type { IAppLoadCommonCurrency } from '@/interfaces/orionplace/appBase/appLoadCommon/IAppLoadCommonCurrency';
+import {
+  formatCurrency,
+  formatDollarAmount,
+} from '@/lib/orionplace/currency';
+import { getAvailableNestedValueFromObject } from '@/lib/orionplace/presentation';
+import type { promoLabels } from '@/lib/orionplace/promoLabels';
+
+export type PromoIconName =
+  | 'tag'
+  | 'basket'
+  | 'coin'
+  | 'calendar'
+  | 'repeat'
+  | 'infinity'
+  | 'check'
+  | 'cross'
+  | 'ticket';
+
+// 24 × 24 stroke paths shared by the promo code components.
+export const promoIconPaths: Record<PromoIconName, string> = {
+  tag:
+    'M4 4h7l9 9-7 7-9-9zM8.5 8.5h.01',
+  basket:
+    'M3 9h18l-1.6 10H4.6zM8 9 10 4M16 9 14 4',
+  coin:
+    'M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18ZM14.5 9.5A2.5 2.5 0 0 0 12 8c-1.4 0-2.5.9-2.5 2s1.1 2 2.5 2 2.5.9 2.5 2-1.1 2-2.5 2a2.5 2.5 0 0 1-2.5-1.5M12 6.5v11',
+  calendar:
+    'M4 6h16v14H4zM4 10h16M8 3v4M16 3v4',
+  repeat:
+    'M4 9a5 5 0 0 1 5-5h9m0 0-3-3m3 3-3 3M20 15a5 5 0 0 1-5 5H6m0 0 3 3m-3-3 3-3',
+  infinity:
+    'M8.5 9a3 3 0 1 0 0 6c2.5 0 4-6 6.5-6a3 3 0 1 1 0 6c-2.5 0-4-6-6.5-6Z',
+  check: 'M5 12.5 9.5 17 19 7.5',
+  cross: 'M6 6l12 12M18 6 6 18',
+  ticket:
+    'M3 8V6h18v2a2.5 2.5 0 0 0 0 5v5H3v-5a2.5 2.5 0 0 0 0-5ZM9 6v12',
+};
+
+export type PromoConditionKey =
+  | 'discount'
+  | 'scope'
+  | 'maximumDiscount'
+  | 'minimumOrderAmount'
+  | 'firstOrder'
+  | 'stacking'
+  | 'period'
+  | 'usage';
+
+export interface PromoCondition {
+  key: PromoConditionKey;
+  icon: PromoIconName;
+  label: string;
+  value: string;
+}
+
+type PromoCopy = ReturnType<typeof promoLabels>;
+
+/**
+ * The backend returns one amount per currency for a fixed discount and a
+ * price multiplier for a percentage discount, so each kind needs its own
+ * reading before it can be shown beside the code.
+ */
+export function promoDiscountValue(
+  promo: IPromoDefinition,
+  currencyId: string,
+  currency: IAppLoadCommonCurrency | undefined,
+  copy: PromoCopy,
+  locale = '',
+): string {
+  if (promo.promo_type === EPromoType.FREE_SHIPPING) {
+    return copy.freeShipping;
+  }
+
+  if (promo.promo_type === EPromoType.PERCENTAGE) {
+    const multiplier = Number(promo.promo_value);
+    if (!Number.isFinite(multiplier)) {
+      return '';
+    }
+
+    return `−${Math.round((1 - multiplier) * 100)}%`;
+  }
+
+  const amounts = promo.promo_value as ICurrencyAmounts;
+  const amount  = amounts?.[currencyId]?.transform_value;
+
+  return amount === undefined
+    ? ''
+    : `−${formatCurrency(amount, currency, locale)}`;
+}
+
+/**
+ * The minimum order amount of an offer: `minimum_order_amount`, or the
+ * deprecated `min_price` alias that older backends send instead.
+ */
+export function promoMinimumOrderAmount(
+  promo: Pick<IPromoDefinition, 'minimum_order_amount' | 'min_price'>,
+): ICurrencyAmounts | undefined {
+  return promo.minimum_order_amount ?? promo.min_price;
+}
+
+function nameList(values: string[], copy: PromoCopy): string {
+  return values.filter(Boolean).join(copy.separator);
+}
+
+/**
+ * The offer restricts the code either to named sellers, or to named products
+ * and categories. A code with none of those lists applies to the whole store.
+ */
+function promoScope(
+  promo: IPromoDefinition,
+  locale: string,
+  copy: PromoCopy,
+): string {
+  const sellers    = promo.sellers ?? [];
+  const categories = promo.categories ?? [];
+  const products   = promo.products ?? [];
+
+  if (sellers.length) {
+    return `${copy.scopeSellers}: ${nameList(
+      sellers.map((seller) => seller.seller_name),
+      copy,
+    )}`;
+  }
+
+  const parts: string[] = [];
+  if (categories.length) {
+    parts.push(
+      `${copy.scopeCategories}: ${nameList(
+        categories.map((category) =>
+          getAvailableNestedValueFromObject(
+            category.locale,
+            locale,
+            'cg_name',
+          ) ?? '',
+        ),
+        copy,
+      )}`,
+    );
+  }
+  if (products.length) {
+    parts.push(
+      `${copy.scopeProducts}: ${nameList(
+        products.map((product) =>
+          getAvailableNestedValueFromObject(
+            product.locale,
+            locale,
+            'product_name',
+          ) ?? '',
+        ),
+        copy,
+      )}`,
+    );
+  }
+
+  return parts.length ? parts.join('. ') : copy.scopeEverything;
+}
+
+function promoPeriod(promo: IPromoDefinition, copy: PromoCopy): string {
+  const start  = promo.date_start?.date;
+  const finish = promo.date_finish?.date;
+
+  if (start && finish) {
+    return `${copy.since} ${start} ${copy.untilLower} ${finish}`;
+  }
+  if (finish) {
+    return `${copy.until} ${finish}`;
+  }
+  if (start) {
+    return `${copy.since} ${start}`;
+  }
+
+  return copy.noPeriod;
+}
+
+/**
+ * The offer's own conditions, as one row each: the discount it gives and
+ * its maximum, the products it covers, the minimum order (the covered
+ * products together), a first-purchase-only rule, whether items that are
+ * already discounted count, and the dates it runs between. The minimum is
+ * a dollar amount: with `currencies` it reads «$ 544 ≈ 40 256 ₽» while
+ * another currency is selected.
+ */
+export function promoOfferConditions(
+  promo: IPromoDefinition | null | undefined,
+  locale: string,
+  currencyId: string,
+  currency: IAppLoadCommonCurrency | undefined,
+  copy: PromoCopy,
+  currencies?: Record<string, IAppLoadCommonCurrency> | null,
+): PromoCondition[] {
+  if (!promo) {
+    return [];
+  }
+
+  const rows: PromoCondition[] = [];
+  const discount               = promoDiscountValue(
+    promo,
+    currencyId,
+    currency,
+    copy,
+    locale,
+  );
+
+  if (discount) {
+    rows.push({
+      key: 'discount',
+      icon: 'tag',
+      label: copy.discount,
+      value: discount,
+    });
+  }
+
+  // Only a percentage promotion with a maximum discount sends one.
+  const maximum = promo.maximum_discount?.[currencyId]?.transform_value;
+  if (maximum !== undefined) {
+    rows.push({
+      key: 'maximumDiscount',
+      icon: 'coin',
+      label: copy.maximumDiscount,
+      value: formatCurrency(maximum, currency, locale),
+    });
+  }
+
+  rows.push({
+    key: 'scope',
+    icon: 'basket',
+    label: copy.scope,
+    value: promoScope(promo, locale, copy),
+  });
+
+  const minimum = formatDollarAmount(
+    promoMinimumOrderAmount(promo),
+    currencyId,
+    currency,
+    locale,
+    currencies,
+  );
+  if (minimum) {
+    rows.push({
+      key: 'minimumOrderAmount',
+      icon: 'coin',
+      label: copy.minimumOrderAmount,
+      value: minimum,
+    });
+  }
+
+  if (promo.first_order_only === true) {
+    rows.push({
+      key: 'firstOrder',
+      icon: 'ticket',
+      label: copy.firstOrder,
+      value: copy.firstOrderOnly,
+    });
+  }
+
+  const stacks  =
+    promo.behaviour_with_product_discount?.int ===
+    EPromoProductDiscount.ALLOW_WITH_PRODUCT_DISCOUNT;
+  rows.push({
+    key: 'stacking',
+    icon: stacks ? 'check' : 'cross',
+    label: copy.stacking,
+    value: stacks ? copy.stackingAllowed : copy.stackingBlocked,
+  });
+
+  rows.push({
+    key: 'period',
+    icon: 'calendar',
+    label: copy.period,
+    value: promoPeriod(promo, copy),
+  });
+
+  return rows;
+}
+
+/** How many times the issued code may still be used. */
+export function promoUsageCondition(
+  code: Pick<IPromoIssue, 'maximum_usages' | 'current_usages'>,
+  copy: PromoCopy,
+): PromoCondition {
+  const unlimited = code.maximum_usages === EPromoUsageLimit.UNLIMITED_USAGE;
+  const left      = Math.max(0, code.maximum_usages - code.current_usages);
+
+  return {
+    key: 'usage',
+    icon: unlimited ? 'infinity' : 'repeat',
+    label: copy.usage,
+    value: unlimited
+      ? copy.unlimited
+      : `${left} ${copy.ofTotal} ${code.maximum_usages}`,
+  };
+}
+
+/** Every condition an issued promo code binds the customer to. */
+export function promoConditions(
+  code: Pick<IPromoIssue, 'maximum_usages' | 'current_usages' | 'promo_type'>,
+  locale: string,
+  currencyId: string,
+  currency: IAppLoadCommonCurrency | undefined,
+  copy: PromoCopy,
+  currencies?: Record<string, IAppLoadCommonCurrency> | null,
+): PromoCondition[] {
+  return [
+    ...promoOfferConditions(
+      code.promo_type,
+      locale,
+      currencyId,
+      currency,
+      copy,
+      currencies,
+    ),
+    promoUsageCondition(code, copy),
+  ];
+}
+
+export type PromoStateKey =
+  | 'applied'
+  | 'notStarted'
+  | 'expired'
+  | 'unavailable'
+  | 'usable';
+
+function elapsedDays(value: IApiDateTime | null | undefined) {
+  const days = Number(value?.days_ago);
+
+  return Number.isFinite(days) ? days : undefined;
+}
+
+/**
+ * The offer carries its own start and end dates, and the response reports how
+ * many days have passed since each of them: a negative count means the date is
+ * still ahead. The backend stops accepting a code on its end date, so a count
+ * of zero already means the code no longer works. An offer scheduled for a
+ * later day stays inactive until the backend starts it on that day, so its
+ * start date is read before its active flag.
+ */
+export function promoState(
+  code: Pick<IPromoIssue, 'is_code_active' | 'applyed_to_cart' | 'promo_type'>,
+): PromoStateKey {
+  if (code.applyed_to_cart) {
+    return 'applied';
+  }
+
+  const promo      = code.promo_type;
+  if (!promo || !code.is_code_active) {
+    return 'unavailable';
+  }
+
+  const sinceEnd   = elapsedDays(promo.date_finish);
+  if (sinceEnd !== undefined && sinceEnd >= 0) {
+    return 'expired';
+  }
+
+  const sinceStart = elapsedDays(promo.date_start);
+  if (sinceStart !== undefined && sinceStart < 0) {
+    return 'notStarted';
+  }
+
+  return promo.promo_type_is_active ? 'usable' : 'unavailable';
+}
+
+export function promoName(
+  promo: IPromoDefinition | null | undefined,
+  locale: string,
+): string {
+  return (
+    getAvailableNestedValueFromObject(promo?.locale, locale, 'name') ?? ''
+  );
+}

package/templates/lib/orionplace/reviewLabels.ts

@@ -0,0 +1,172 @@
+const en = {
+  title: 'Customer reviews',
+  mine: 'My reviews',
+  all: 'All',
+  write: 'Write a review',
+  writeAction: 'Review',
+  writeHint: 'Review this product',
+  reply: 'Reply',
+  replies: 'Replies',
+  text: 'Review text',
+  rating: 'Rating',
+  chooseRating: 'Choose a rating',
+  ratingRequired: 'Rate the product from 1 to 5 stars.',
+  textMinimum: 'At least {count} characters',
+  images: 'Photos',
+  addImages: 'Add photos',
+  photosOnly: 'With photos',
+  allPhotos: 'Customer photos',
+  photosTab: 'Photos',
+  mineTab: 'Mine',
+  image: 'Review photo',
+  openImage: 'Open the photo',
+  photoViewer: 'Review photos',
+  productPhotos: 'Product photos',
+  openProductPhoto: 'Open the photo full screen',
+  empty: 'No reviews yet.',
+  emptyImages: 'No customer photos yet.',
+  send: 'Submit',
+  save: 'Save',
+  editing: 'Edit review',
+  pending: 'Awaiting publication',
+  denied: 'Not published',
+  liked: 'Helpful',
+  disliked: 'Unhelpful',
+  repliesTo: 'Reply to',
+  newest: 'Newest first',
+  highest: 'Highest rating',
+  lowest: 'Lowest rating',
+  order: 'Sort reviews',
+  tooMany: 'A review can contain up to five photos.',
+  cannotEdit: 'This review cannot be edited.',
+  imageRemove: 'Remove photo',
+  product: 'Product',
+  notFound: 'This product is unavailable.',
+  description: 'About this product',
+  more: 'More',
+  less: 'Less',
+  gallery: 'Product images',
+  previousImage: 'Previous image',
+  nextImage: 'Next image',
+  thumbnailsBack: 'Show previous thumbnails',
+  thumbnailsForward: 'Show next thumbnails',
+  characteristics: 'Characteristics',
+  allCharacteristics: 'All characteristics',
+  manufacturer: 'Manufacturer',
+  manufacturerHint: 'Open the manufacturer page',
+  weight: 'Weight',
+  dimensions: 'Dimensions (L × W × H)',
+  type: 'Type',
+  digital: 'Digital product',
+  returns: 'Returns',
+  returnRegular: 'Without a defect',
+  returnDefect: 'With a defect',
+  within: 'within',
+  days: ['day', 'days'],
+  seller: 'Seller',
+  sellerHint: 'Open the seller page',
+  showReviews: 'Go to reviews',
+  average: 'Average rating',
+  ofFive: 'out of 5',
+  ratingFilter: 'Filter reviews by rating',
+  allRatings: 'Show reviews with any rating',
+  stars: 'stars',
+  helpfulHint: 'Mark this review as helpful',
+  unhelpfulHint: 'Mark this review as unhelpful',
+  repliesHint: 'Show replies',
+};
+const ru: typeof en = {
+  title: 'Отзывы покупателей',
+  mine: 'Мои отзывы',
+  all: 'Все',
+  write: 'Оставить отзыв',
+  writeAction: 'Написать',
+  writeHint: 'Написать отзыв',
+  reply: 'Ответить',
+  replies: 'Ответы',
+  text: 'Текст отзыва',
+  rating: 'Оценка',
+  chooseRating: 'Выберите оценку',
+  ratingRequired: 'Оцените товар от 1 до 5 звёзд.',
+  textMinimum: 'Минимум символов: {count}',
+  images: 'Фотографии',
+  addImages: 'Добавить фотографии',
+  photosOnly: 'С фотографиями',
+  allPhotos: 'Фотографии покупателей',
+  photosTab: 'Фото',
+  mineTab: 'Мои',
+  image: 'Фотография к отзыву',
+  openImage: 'Открыть фотографию',
+  photoViewer: 'Фотографии к отзыву',
+  productPhotos: 'Фотографии товара',
+  openProductPhoto: 'Открыть фотографию на весь экран',
+  empty: 'Отзывов пока нет.',
+  emptyImages: 'Покупатели ещё не добавили фотографии.',
+  send: 'Отправить',
+  save: 'Сохранить',
+  editing: 'Изменение отзыва',
+  pending: 'Ожидает публикации',
+  denied: 'Не опубликован',
+  liked: 'Полезно',
+  disliked: 'Бесполезно',
+  repliesTo: 'Ответ пользователю',
+  newest: 'Сначала новые',
+  highest: 'Сначала с высокой оценкой',
+  lowest: 'Сначала с низкой оценкой',
+  order: 'Порядок отзывов',
+  tooMany: 'К отзыву можно прикрепить не больше пяти фотографий.',
+  cannotEdit: 'Этот отзыв нельзя изменить.',
+  imageRemove: 'Удалить фотографию',
+  product: 'Товар',
+  notFound: 'Товар недоступен.',
+  description: 'О товаре',
+  more: 'Ещё',
+  less: 'Свернуть',
+  gallery: 'Фотографии товара',
+  previousImage: 'Предыдущая фотография',
+  nextImage: 'Следующая фотография',
+  thumbnailsBack: 'Показать предыдущие миниатюры',
+  thumbnailsForward: 'Показать следующие миниатюры',
+  characteristics: 'Характеристики',
+  allCharacteristics: 'Все характеристики',
+  manufacturer: 'Производитель',
+  manufacturerHint: 'Открыть страницу производителя',
+  weight: 'Вес',
+  dimensions: 'Размеры (Д × Ш × В)',
+  type: 'Тип',
+  digital: 'Цифровой товар',
+  returns: 'Возврат',
+  returnRegular: 'Без дефекта',
+  returnDefect: 'С дефектом',
+  within: 'в течение',
+  days: ['дня', 'дней', 'дней'],
+  seller: 'Продавец',
+  sellerHint: 'Открыть страницу продавца',
+  showReviews: 'Перейти к отзывам',
+  average: 'Средняя оценка',
+  ofFive: 'из 5',
+  ratingFilter: 'Отбор отзывов по оценке',
+  allRatings: 'Показать отзывы с любой оценкой',
+  stars: 'звёзд',
+  helpfulHint: 'Отметить отзыв как полезный',
+  unhelpfulHint: 'Отметить отзыв как бесполезный',
+  repliesHint: 'Показать ответы',
+};
+export function reviewLabels(locale: string) {
+  return locale.toLowerCase().startsWith('ru') ? ru : en;
+}
+
+// OrionMarketplace's domain setting feedback_text_min_length, sent as
+// variables.feedback_text_min_length: the fewest characters of a review or
+// reply text, 0 means no minimum. Older OrionMarketplace versions do not send it and
+// keep their fixed 10.
+export const REVIEW_TEXT_MIN_LENGTH = 10;
+export const REVIEW_TEXT_MAX_LENGTH = 1024;
+
+export function reviewTextMinLength(value: unknown) {
+  const length = Number(value);
+
+  return Number.isInteger(length) && length >= 0
+    ? Math.min(length, REVIEW_TEXT_MAX_LENGTH)
+    : REVIEW_TEXT_MIN_LENGTH;
+}

package/templates/lib/orionplace/reviewPresentation.ts

@@ -0,0 +1,64 @@
+import type { IProduct } from '@/interfaces/orionplace/products/IProduct';
+import { getAvailableNestedValueFromObject } from '@/lib/orionplace/presentation';
+
+export function reviewProductName(
+  product: IProduct,
+  locale: string,
+  fallback: string,
+) {
+  return (
+    getAvailableNestedValueFromObject(product.locale, locale, 'product_name') ||
+    `${fallback} ${product.id}`
+  );
+}
+
+export function reviewProductImage(product: IProduct) {
+  return product.images?.small[0] || product.images?.full[0] || '';
+}
+
+export function reviewProductVariant(product: IProduct, locale: string) {
+  const variant = product.variants?.main_variant;
+  const value = variant?.value.find(
+    (entry) => entry.reload_product === product.id,
+  );
+
+  if (!variant || !value) {
+    return '';
+  }
+
+  const name =
+    variant.locale[locale] ?? Object.values(variant.locale).find(Boolean) ?? '';
+  const label =
+    value.locale[locale] ?? Object.values(value.locale).find(Boolean) ?? '';
+
+  return [name, label].filter(Boolean).join(': ');
+}
+
+export function reviewAuthorName(user: {
+  first_name: string;
+  last_name: string;
+}) {
+  return [user.first_name, user.last_name].filter(Boolean).join(' ');
+}
+
+export function reviewStars(rating: number) {
+  return Math.min(5, Math.max(0, Math.round(rating)));
+}
+
+export function reviewStats(stats: Readonly<Record<string, number>>) {
+  const ratings = [5, 4, 3, 2, 1] as const;
+  const total = ratings.reduce(
+    (sum, rating) => sum + Number(stats[rating] ?? 0),
+    0,
+  );
+  const points = ratings.reduce(
+    (sum, rating) => sum + rating * Number(stats[rating] ?? 0),
+    0,
+  );
+
+  return {
+    ratings,
+    total,
+    average: total ? Math.round((points / total) * 10) / 10 : 0,
+  };
+}

package/templates/lib/orionplace/reviewScope.ts

@@ -0,0 +1,38 @@
+export interface ReviewScope {
+  productId?: number;
+  sellerId?: number;
+}
+
+export function reviewScopeFilters(scope: ReviewScope) {
+  if (scope.productId) {
+    return { for_product: scope.productId };
+  }
+  if (scope.sellerId) {
+    return { product_seller: scope.sellerId };
+  }
+
+  return {};
+}
+
+export function reviewImageScopeFilters(scope: ReviewScope) {
+  if (scope.productId) {
+    return { product: scope.productId };
+  }
+  if (scope.sellerId) {
+    return { product_seller: scope.sellerId };
+  }
+
+  return {};
+}
+
+// Approved direct replies: the list the Replies button opens with
+// reply_of_parent. total_c_approved_replies of a root review counts its whole
+// discussion, so it is only the fallback for a backend without the new field.
+export function reviewDirectReplies(review: {
+  total_c_approved_replies: number;
+  total_c_approved_direct_replies?: number;
+}) {
+  return (
+    review.total_c_approved_direct_replies ?? review.total_c_approved_replies
+  );
+}