orionplace-nuxt 0.1.2 → 0.2.0

package/templates/app/utils/orionplace/productLabels.ts

@@ -0,0 +1,82 @@
+import { getAvailableValueFromObject } from '@/utils/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/app/utils/orionplace/productManufacturer.ts

@@ -0,0 +1,30 @@
+import type { IProduct } from '@/interfaces/orionplace/products/IProduct';
+
+export interface IProductManufacturerLink {
+  id: number;
+  name: string;
+  logo: string;
+  to: { path: string; query: Record<string, string | number> };
+}
+
+export function productManufacturer(
+  product: IProduct | undefined,
+  locale: string,
+): IProductManufacturerLink | 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 },
+    },
+  };
+}

package/templates/app/utils/orionplace/productPage.ts

@@ -0,0 +1,46 @@
+import type { OrionplaceFeatureApi } from '@/composables/useOrionplaceFeature';
+import type { IProductSearchResponse } from '@/interfaces/orionplace/products/IProductSearchApi';
+import type {
+  IProduct,
+  IProductSearchSeller,
+} from '@/interfaces/orionplace/products/IProduct';
+
+export interface IProductPageResult {
+  /** Undefined when the selected endpoint returns no product with this ID. */
+  product?: IProduct;
+  sellers: IProductSearchSeller[];
+}
+
+/**
+ * Requests one product for its page. A preview key uses products_preview so
+ * the shared URL can show the key owner's unpublished product to any visitor.
+ */
+export async function requestProductPage(
+  api: Pick<OrionplaceFeatureApi, 'request'>,
+  productId: number,
+  previewKey?: string,
+  signal?: AbortSignal,
+): Promise<IProductPageResult> {
+  const filters = previewKey
+    ? { id: productId, view_key: previewKey }
+    : { id: productId };
+  const data = await api.request<
+    NonNullable<IProductSearchResponse['page_data']>
+  >(
+    previewKey ? 'products_preview' : 'products_search',
+    {
+      filters,
+      paginate: { page: 1, pp_items: 1 },
+    },
+    signal,
+  );
+
+  if (!data.products) {
+    throw new Error('Missing product list');
+  }
+
+  return {
+    product: data.products.data.find((item) => item.id === productId),
+    sellers: data.selects?.sellers ?? [],
+  };
+}

package/templates/app/utils/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));
+}

package/templates/app/utils/orionplace/productSearchScope.ts

@@ -0,0 +1,237 @@
+import { cloneSearchFilters } from '@/utils/orionplace/searchFilters';
+import type { ProductFacetSelection } from '@/interfaces/orionplace/products/IProductSearchFacets';
+
+/**
+ * A fixed search scope chosen by the page, not by the filter panel:
+ * `/browse` passes the query or a seller, manufacturer or store ID,
+ * and `/featured` passes `featured: true`.
+ */
+export interface ProductSearchScope {
+  query?: string;
+  sellerId?: number;
+  manufacturerId?: number;
+  storeId?: number;
+  featured?: boolean;
+}
+
+export const productSearchPageSize = 12;
+
+/** True when the page restricts the search without a text query. */
+export function hasFixedSearchScope(scope: ProductSearchScope) {
+  return Boolean(
+    scope.sellerId || scope.manufacturerId || scope.storeId || scope.featured,
+  );
+}
+
+/**
+ * Builds the `products_search` body for a query or fixed scope.
+ * The page's scope is added after the customer's filter selection, so a
+ * selected filter can narrow the results but never remove the scope.
+ */
+export function scopedSearchRequest(
+  scope: ProductSearchScope,
+  filters: ProductFacetSelection,
+  page: number,
+) {
+  const query = scope.query?.trim() ?? '';
+  const fixed = {
+    ...(query ? { search_string: query } : {}),
+    ...(scope.sellerId ? { product_owner: [scope.sellerId] } : {}),
+    ...(scope.manufacturerId
+      ? { product_manufacture: [scope.manufacturerId] }
+      : {}),
+    ...(scope.storeId ? { physical_store: scope.storeId } : {}),
+    ...(scope.featured ? { only_featured: true } : {}),
+  };
+
+  return {
+    filters: {
+      ...cloneSearchFilters(filters),
+      ...fixed,
+    },
+    paginate: { page, pp_items: productSearchPageSize },
+  };
+}
+
+/**
+ * Filter-panel keys that repeat a fixed scope. The page hides them: a
+ * manufacturer page always searches inside that manufacturer, so its
+ * manufacturer choice is not something the customer can remove.
+ */
+export function fixedScopeFilters(scope: ProductSearchScope): string[] {
+  const keys: string[] = [];
+
+  if (scope.sellerId) {
+    keys.push('product_owner', 'owner_rating_from');
+  }
+
+  if (scope.manufacturerId) {
+    keys.push('product_manufacture');
+  }
+
+  return keys;
+}
+
+export interface ProductSearchScopeNames {
+  manufacturer?: string;
+  seller?: string;
+  store?: string;
+}
+
+export interface ProductSearchScopeLabels {
+  home: string;
+  searchCrumb: string;
+  searchResults: string;
+  products: string;
+  manufacturers: string;
+  sellers: string;
+  stores: string;
+  manufacturerProducts: string;
+  sellerProducts: string;
+  storeProducts: string;
+}
+
+export interface ProductSearchCrumb {
+  label: string;
+  to?: { path: string; query: Record<string, string | number> };
+}
+
+interface DirectoryScope {
+  queryKey: 'manufacturer' | 'seller' | 'store';
+  id: number;
+  name: string;
+  section: string;
+  sectionPath: string;
+  caption: string;
+}
+
+// Manufacturer, seller and store scopes, in breadcrumb order.
+function directoryScopes(
+  scope: ProductSearchScope,
+  names: ProductSearchScopeNames,
+  labels: ProductSearchScopeLabels,
+): DirectoryScope[] {
+  const entries: (DirectoryScope | undefined)[] = [
+    scope.manufacturerId
+      ? {
+          queryKey: 'manufacturer',
+          id: scope.manufacturerId,
+          name: names.manufacturer ?? '',
+          section: labels.manufacturers,
+          sectionPath: '/manufacturers',
+          caption: labels.manufacturerProducts,
+        }
+      : undefined,
+    scope.sellerId
+      ? {
+          queryKey: 'seller',
+          id: scope.sellerId,
+          name: names.seller ?? '',
+          section: labels.sellers,
+          sectionPath: '/sellers',
+          caption: labels.sellerProducts,
+        }
+      : undefined,
+    scope.storeId
+      ? {
+          queryKey: 'store',
+          id: scope.storeId,
+          name: names.store ?? '',
+          section: labels.stores,
+          sectionPath: '/stores',
+          caption: labels.storeProducts,
+        }
+      : undefined,
+  ];
+
+  return entries.filter((entry): entry is DirectoryScope => Boolean(entry));
+}
+
+/**
+ * Breadcrumbs for `/browse`: Home / Manufacturers / Name for a manufacturer
+ * scope, Home / Search / «query» for a text search. A query inside a
+ * directory scope is appended after the scope's name. The last crumb is the
+ * current page and has no link.
+ */
+export function productSearchTrail(
+  scope: ProductSearchScope,
+  names: ProductSearchScopeNames,
+  labels: ProductSearchScopeLabels,
+  locale: string,
+): ProductSearchCrumb[] {
+  const query                              = scope.query?.trim() ?? '';
+  const directories                        = directoryScopes(
+    scope,
+    names,
+    labels,
+  );
+  const trail: ProductSearchCrumb[]        = [
+    { label: labels.home, to: { path: '/', query: { locale } } },
+  ];
+  const scopeQuery: Record<string, number> = {};
+
+  if (directories[0]) {
+    trail.push({
+      label: directories[0].section,
+      to: { path: directories[0].sectionPath, query: { locale } },
+    });
+  } else {
+    trail.push({ label: labels.searchCrumb });
+  }
+
+  for (const directory of directories) {
+    scopeQuery[directory.queryKey] = directory.id;
+    trail.push({
+      label: directory.name || directory.caption,
+      to: { path: '/browse', query: { ...scopeQuery, locale } },
+    });
+  }
+
+  if (query) {
+    trail.push({ label: `«${query}»` });
+  }
+
+  const current                            = trail[trail.length - 1];
+  if (current && trail.length > 1) {
+    delete current.to;
+  }
+
+  return trail;
+}
+
+/**
+ * Page heading for `/browse`: the scope's name (or its generic caption while
+ * the first response is loading), otherwise "Search results".
+ */
+export function productSearchHeading(
+  scope: ProductSearchScope,
+  names: ProductSearchScopeNames,
+  labels: ProductSearchScopeLabels,
+) {
+  const [directory] = directoryScopes(scope, names, labels);
+
+  if (!directory) {
+    return { title: labels.searchResults, caption: '', named: false };
+  }
+
+  return {
+    title: directory.name || directory.caption,
+    caption: directory.caption,
+    named: Boolean(directory.name),
+  };
+}
+
+/** Document title: "Name — Products", with the query appended when present. */
+export function productSearchSeoTitle(
+  scope: ProductSearchScope,
+  names: ProductSearchScopeNames,
+  labels: ProductSearchScopeLabels,
+) {
+  const query   = scope.query?.trim() ?? '';
+  const heading = productSearchHeading(scope, names, labels);
+  const base    = heading.named
+    ? `${heading.title} — ${labels.products}`
+    : heading.title;
+
+  return query ? `${base} · ${query}` : base;
+}

package/templates/app/utils/orionplace/productSeller.ts

@@ -0,0 +1,51 @@
+import type {
+  IAppLoadProduct,
+  IProduct,
+  IProductSearchSeller,
+  IProductSeller,
+} from '@/interfaces/orionplace/products/IProduct';
+
+type LegacyAppLoadProduct = IAppLoadProduct & {
+  seller?: IProductSeller;
+};
+
+export function resolveAppLoadProducts(
+  products: readonly IAppLoadProduct[] | undefined,
+  sellers: Readonly<Record<string, IProductSeller>> | undefined,
+): IProduct[] {
+  const resolved: IProduct[] = [];
+
+  for (const product of products ?? []) {
+    const legacySeller = (product as LegacyAppLoadProduct).seller;
+    const seller       = legacySeller ?? sellers?.[String(product.seller_id)];
+    if (!seller) {
+      continue;
+    }
+
+    resolved.push({ ...product, seller });
+  }
+
+  return resolved;
+}
+
+export function productWithSellerPermission(
+  product: IProduct,
+  sellers: IProductSearchSeller[] = [],
+): IProduct {
+  if (product.seller.is_accepting_preorders != null) {
+    return product;
+  }
+
+  const seller = sellers.find((item) => item.id === product.seller.id);
+  if (typeof seller?.is_accepting_preorders !== 'boolean') {
+    return product;
+  }
+
+  return {
+    ...product,
+    seller: {
+      ...product.seller,
+      is_accepting_preorders: seller.is_accepting_preorders,
+    },
+  };
+}

package/templates/app/utils/orionplace/profile.ts

@@ -0,0 +1,136 @@
+import type { IStorefrontProfileState } from '@/interfaces/orionplace/accounts/IStorefrontProfile';
+import { fieldErrorText, type OrionplaceApiResponse } from './api';
+
+export function profileState(): IStorefrontProfileState {
+  return {
+    loaded: false,
+    pending: '',
+    error: '',
+    errors: {},
+    message: '',
+    saved: 0,
+    emailStep: 'step_email',
+    notificationLocale: '',
+    authStep: 'step_phone',
+    authPurpose: 'auth',
+    authCodeType: '',
+    authEmail: '',
+    otpDelay: 0,
+    refreshRequired: false,
+  };
+}
+
+/** AppLoad uses day.month.year; native date inputs and requests use ISO dates. */
+export function profileDate(value: string | null | undefined) {
+  if (!value) {
+    return '';
+  }
+  if (/^\d{4}-\d{2}-\d{2}$/.test(value)) {
+    return value;
+  }
+  const parts = /^(\d{1,2})[./](\d{1,2})[./](\d{4})$/.exec(value);
+  return parts
+    ? `${parts[3]}-${parts[2]!.padStart(2, '0')}-${parts[1]!.padStart(2, '0')}`
+    : '';
+}
+
+export class ProfileRequestError extends Error {
+  readonly kind = 'profile-request';
+  fields: Record<string, string>;
+
+  constructor(fields: Record<string, string>) {
+    super(fieldErrorText(fields));
+    this.name   = 'ProfileRequestError';
+    this.fields = fields;
+  }
+}
+
+/** Keeps structured API errors recognizable across a Nuxt dev hot reload. */
+export function profileRequestFailure(error: unknown) {
+  const candidate = error as {
+    name?: unknown;
+    kind?: unknown;
+    message?: unknown;
+    fields?: unknown;
+  } | null;
+  const recognized =
+    error instanceof ProfileRequestError ||
+    candidate?.name === 'ProfileRequestError' ||
+    candidate?.kind === 'profile-request';
+
+  if (!recognized || !candidate?.fields || typeof candidate.fields !== 'object') {
+    return null;
+  }
+
+  const fields = Object.fromEntries(
+    Object.entries(candidate.fields).filter(
+      (entry): entry is [string, string] => typeof entry[1] === 'string',
+    ),
+  );
+
+  return {
+    fields,
+    message: typeof candidate.message === 'string' ? candidate.message : '',
+  };
+}
+
+export function profileResponse(
+  response: OrionplaceApiResponse,
+  allowNextStep = false,
+) {
+  const body   = response.body as {
+    form_errors?: Record<string, { message: string }[]> | null;
+    success_message?: string | null;
+    page_data?: Record<string, unknown> | null;
+  } | null;
+  const errors = Object.fromEntries(
+    Object.entries(body?.form_errors ?? {}).map(([key, values]) => [
+      key,
+      Array.isArray(values) ? values.map((item) => item.message).join(' ') : '',
+    ]),
+  );
+  if (
+    response.status < 200 ||
+    response.status >= 300 ||
+    body?.form_errors !== null ||
+    (!body.success_message &&
+      !(allowNextStep && typeof body.page_data?.next_step === 'string'))
+  ) {
+    throw new ProfileRequestError(errors);
+  }
+  return body.page_data ?? {};
+}
+
+export function applyProfileAuthenticationData(
+  state: IStorefrontProfileState,
+  data: Record<string, unknown>,
+) {
+  const steps = ['step_phone', 'step_password', 'step_otp', 'step_additional'];
+  if (steps.includes(String(data.next_step))) {
+    state.authStep = data.next_step as IStorefrontProfileState['authStep'];
+  }
+  if (data.purpose === 'auth' || data.purpose === 'reg') {
+    state.authPurpose = data.purpose;
+  }
+  if (data.code_type !== undefined) {
+    state.authCodeType = ['sms', 'call', 'email'].includes(
+      String(data.code_type),
+    )
+      ? (data.code_type as IStorefrontProfileState['authCodeType'])
+      : '';
+    state.authEmail    =
+      state.authCodeType === 'email' && typeof data.email === 'string'
+        ? data.email
+        : '';
+  }
+  if (data.otp_delay !== undefined) {
+    const seconds  = Number(data.otp_delay);
+    state.otpDelay = Number.isFinite(seconds)
+      ? Math.max(0, Math.ceil(seconds))
+      : 0;
+  }
+  if (state.authStep !== 'step_otp') {
+    state.authCodeType = '';
+    state.authEmail    = '';
+  }
+}