orionplace-react 0.1.0 → 0.2.0

package/templates/lib/orionplace/searchFilters.ts

@@ -0,0 +1,99 @@
+import type {
+  IProductSearchFacets,
+  ProductFacetSelection,
+} from '@/interfaces/orionplace/products/IProductSearchFacets';
+
+export function cloneSearchFilters(
+  filters: ProductFacetSelection,
+): ProductFacetSelection {
+  return Object.fromEntries(
+    Object.entries(filters)
+      .filter(([, value]) => value !== undefined)
+      .map(([key, value]) => [key, Array.isArray(value) ? [...value] : value]),
+  );
+}
+
+export function selectedFilterIds(
+  filters: ProductFacetSelection,
+  key: string,
+): number[] {
+  const value = filters[key];
+  return Array.isArray(value) ? value : [];
+}
+
+export function hasSearchFilters(
+  filters: ProductFacetSelection,
+  hideCategories = false,
+  fixedFilters: string[] = [],
+) {
+  return Object.entries(filters).some(([key, value]) => {
+    if (hideCategories && key === 'categories') {
+      return false;
+    }
+    if (fixedFilters.includes(key)) {
+      return false;
+    }
+    return Array.isArray(value)
+      ? value.length > 0
+      : value !== undefined && value !== '' && value !== false;
+  });
+}
+
+export function initialSearchFacets(
+  previous: IProductSearchFacets | null,
+  incoming: IProductSearchFacets,
+): IProductSearchFacets {
+  if (!previous) {
+    return { selects: incoming.selects ?? {}, variants: incoming.variants };
+  }
+  if (
+    !Object.keys(previous.variants ?? {}).length &&
+    Object.keys(incoming.variants ?? {}).length
+  ) {
+    return { ...previous, variants: incoming.variants };
+  }
+  return previous;
+}
+
+export function priceFilterBounds(
+  facets: IProductSearchFacets | null,
+  currency: string,
+) {
+  const min = facets?.selects.measures?.min_price?.[currency]?.transform_value;
+  const max = facets?.selects.measures?.max_price?.[currency]?.transform_value;
+  if (
+    typeof min !== 'number' ||
+    typeof max !== 'number' ||
+    !Number.isFinite(min) ||
+    !Number.isFinite(max) ||
+    min < 0 ||
+    max <= min
+  ) {
+    return null;
+  }
+  return { min, max };
+}
+
+export function applyPriceFilter(
+  filters: ProductFacetSelection,
+  bounds: { min: number; max: number },
+  currency: string,
+  from: number,
+  to: number,
+) {
+  const next = cloneSearchFilters(filters);
+  if (!Number.isFinite(from) || !Number.isFinite(to)) {
+    return next;
+  }
+  const low = Math.max(bounds.min, Math.min(bounds.max, Math.min(from, to)));
+  const high = Math.max(bounds.min, Math.min(bounds.max, Math.max(from, to)));
+  delete next.price_from;
+  delete next.price_to;
+  delete next.price_currency;
+  if (low > bounds.min || high < bounds.max) {
+    next.price_from = String(low);
+    next.price_to = String(high);
+    next.price_currency = currency;
+  }
+  return next;
+}

package/templates/lib/orionplace/searchHistory.ts

@@ -0,0 +1,144 @@
+import type { OrionplaceApi } from '@/lib/orionplace/api';
+import type { IProfileSearchHistoryResponse } from '@/interfaces/orionplace/accounts/IProfileData';
+
+export type SearchHistoryItem = NonNullable<
+  IProfileSearchHistoryResponse['page_data']
+>['data'][number];
+
+export interface SearchHistoryState {
+  items: SearchHistoryItem[];
+  pending: boolean;
+  deleting: number[];
+  error: string;
+}
+
+export function emptySearchHistory(): SearchHistoryState {
+  return { items: [], pending: false, deleting: [], error: '' };
+}
+
+export function createSearchHistory(options: {
+  api: Pick<OrionplaceApi, 'request'>;
+  authenticated: () => boolean;
+  failedMessage: () => string;
+  changed: (state: SearchHistoryState) => void;
+}) {
+  let state      = emptySearchHistory();
+  let generation = 0;
+  let read: AbortController | undefined;
+  const requests = new Set<AbortController>();
+
+  function patch(value: Partial<SearchHistoryState>) {
+    state = { ...state, ...value };
+    options.changed(state);
+  }
+
+  function reset() {
+    generation += 1;
+    for (const request of requests) {
+      request.abort();
+    }
+    requests.clear();
+    read        = undefined;
+    patch(emptySearchHistory());
+  }
+
+  async function load(query: string) {
+    if (!options.authenticated()) {
+      reset();
+      return;
+    }
+    read?.abort();
+    const controller = new AbortController();
+    const current    = generation;
+    read             = controller;
+    requests.add(controller);
+    patch({ pending: true, error: '' });
+    try {
+      const data = await options.api.request<
+        NonNullable<IProfileSearchHistoryResponse['page_data']>
+      >(
+        'profile_query_search',
+        {
+          filters: query.trim() ? { query: query.trim() } : {},
+          paginate: { page: 1, pp_items: 6 },
+        },
+        controller.signal,
+      );
+      if (!controller.signal.aborted && current === generation) {
+        patch({ items: data.data ?? [] });
+      }
+    } catch {
+      if (!controller.signal.aborted && current === generation) {
+        patch({ items: [], error: options.failedMessage() });
+      }
+    } finally {
+      requests.delete(controller);
+      if (read === controller) {
+        read = undefined;
+        patch({ pending: false });
+      }
+    }
+  }
+
+  async function remove(id: number) {
+    if (!options.authenticated() || state.deleting.includes(id)) {
+      return;
+    }
+    const controller = new AbortController();
+    const current    = generation;
+    requests.add(controller);
+    patch({ deleting: [...state.deleting, id], error: '' });
+    try {
+      await options.api.request(
+        'profile_search_delete',
+        {},
+        controller.signal,
+        {
+          search_id: id,
+        },
+      );
+      if (!controller.signal.aborted && current === generation) {
+        read?.abort();
+        read = undefined;
+        patch({
+          items: state.items.filter((item) => item.id !== id),
+          pending: false,
+        });
+      }
+    } catch {
+      if (!controller.signal.aborted && current === generation) {
+        patch({ error: options.failedMessage() });
+      }
+    } finally {
+      requests.delete(controller);
+      if (current === generation) {
+        patch({ deleting: state.deleting.filter((value) => value !== id) });
+      }
+    }
+  }
+
+  async function save(query: string) {
+    const value      = query.trim();
+    if (!value || !options.authenticated()) {
+      return;
+    }
+    const controller = new AbortController();
+    const current    = generation;
+    requests.add(controller);
+    try {
+      await options.api.request(
+        'profile_search_update',
+        { ls_history: [value] },
+        controller.signal,
+      );
+    } catch {
+      if (!controller.signal.aborted && current === generation) {
+        patch({ error: options.failedMessage() });
+      }
+    } finally {
+      requests.delete(controller);
+    }
+  }
+
+  return { load, remove, save, reset };
+}

package/templates/lib/orionplace/sellerDirectory.ts

@@ -0,0 +1,120 @@
+import {
+  getAvailableNestedValueFromObject,
+  safePublicUrl,
+} from '@/lib/orionplace/presentation';
+import type { ICategory } from '@/interfaces/orionplace/category/ICategory';
+import type {
+  ISellerDirectoryEntry,
+  ISellerDirectoryFilters,
+  ISellerDirectoryImage,
+  ISellerDirectoryRequest,
+} from '@/interfaces/orionplace/sellers/ISellerDirectory';
+
+export const SELLER_PAGE_SIZE = 12;
+export const SELLER_RATING_STEPS = [4, 3, 2, 1] as const;
+export const SELLER_RATING_MAXIMUM = 5;
+export const SELLER_PHOTO_LIMIT = 6;
+
+type SellerFilterBody = NonNullable<ISellerDirectoryRequest['filters']>;
+
+export interface SellerCategoryOption {
+  id: number;
+  title: string;
+}
+
+export function emptySellerFilters(): ISellerDirectoryFilters {
+  return {
+    seller_name: '',
+    seller_rating_from: null,
+    seller_categories: [],
+    ordering: '-seller_raiting',
+  };
+}
+
+export function hasSellerFilters(filters: ISellerDirectoryFilters) {
+  return Boolean(
+    filters.seller_name.trim() ||
+    filters.seller_rating_from !== null ||
+    filters.seller_categories.length,
+  );
+}
+
+export function sellerDirectoryRequest(
+  filters: ISellerDirectoryFilters,
+  page: number,
+): ISellerDirectoryRequest {
+  const name = filters.seller_name.trim();
+  const request: SellerFilterBody = { ordering: filters.ordering };
+
+  if (name) {
+    request.seller_name = name;
+  }
+  if (filters.seller_rating_from !== null) {
+    request.seller_rating_from = filters.seller_rating_from;
+  }
+  if (filters.seller_categories.length) {
+    request.seller_categories = [...filters.seller_categories];
+  }
+
+  return {
+    filters: request,
+    paginate: { page, pp_items: SELLER_PAGE_SIZE },
+  };
+}
+
+export function sellerProfileRequest(
+  sellerId: number,
+): ISellerDirectoryRequest {
+  return {
+    filters: { id: sellerId },
+    paginate: { page: 1, pp_items: 1 },
+  };
+}
+
+export function sellerCategoryOptions(
+  ids: number[],
+  findCategory: (id: number) => ICategory | undefined,
+  locale: string,
+): SellerCategoryOption[] {
+  const options: SellerCategoryOption[] = [];
+
+  for (const id of new Set(ids)) {
+    const category = findCategory(id);
+    const title = category
+      ? getAvailableNestedValueFromObject(category.locale, locale, 'cg_name')
+      : '';
+
+    if (title) {
+      options.push({ id, title });
+    }
+  }
+
+  return options.sort((left, right) =>
+    left.title.localeCompare(right.title, locale),
+  );
+}
+
+export function sellerRating(seller: ISellerDirectoryEntry) {
+  const value = Number(seller.seller_raiting);
+  return Number.isFinite(value)
+    ? Math.min(SELLER_RATING_MAXIMUM, Math.max(0, value))
+    : 0;
+}
+
+export function sellerRatingPercent(seller: ISellerDirectoryEntry) {
+  return (sellerRating(seller) / SELLER_RATING_MAXIMUM) * 100;
+}
+
+export function sellerLogo(seller: ISellerDirectoryEntry) {
+  return seller.seller_logo || seller.logo || '';
+}
+
+export function sellerGalleryImages(images: ISellerDirectoryImage[]) {
+  return images
+    .filter((image) => safePublicUrl(image.image))
+    .sort((left, right) => left.display_order - right.display_order);
+}
+
+export function sellerGalleryIndex(index: number, step: number, total: number) {
+  return total > 0 ? (((index + step) % total) + total) % total : 0;
+}

package/templates/lib/orionplace/seo.ts

@@ -0,0 +1,52 @@
+import type { IAppLoadCommonSeo } from '@/interfaces/orionplace/appBase/appLoadCommon/IAppLoadCommonSEO';
+import { getAvailableNestedValueFromObject } from '@/lib/orionplace/presentation';
+
+type SeoMeta =
+  { name: string; content: string } | { property: string; content: string };
+
+export function getStorefrontSeo(
+  incomingData: IAppLoadCommonSeo[],
+  locale: string,
+) {
+  let title             = '';
+  const meta: SeoMeta[] = [];
+  for (const item of incomingData) {
+    title ||=
+      getAvailableNestedValueFromObject(item.locale, locale, 'page_title') ||
+      '';
+    for (const [key, name] of [
+      ['meta_description', 'description'],
+      ['meta_keywords', 'keywords'],
+    ] as const) {
+      const content = getAvailableNestedValueFromObject(
+        item.locale,
+        locale,
+        key,
+      );
+      if (content) {
+        meta.push({ name, content });
+      }
+    }
+    for (const tag of item.og) {
+      const content = getAvailableNestedValueFromObject(
+        tag.locale,
+        locale,
+        'og_content_value',
+      );
+      if (content) {
+        meta.push({ property: tag.og_property_name, content });
+      }
+    }
+    for (const tag of item.twitter) {
+      const content = getAvailableNestedValueFromObject(
+        tag.locale,
+        locale,
+        'extra_meta_content',
+      );
+      if (content) {
+        meta.push({ name: tag.extra_meta_name, content });
+      }
+    }
+  }
+  return { title, meta };
+}

package/templates/lib/orionplace/serverApi.ts

@@ -0,0 +1,158 @@
+import { cache } from 'react';
+import { headers } from 'next/headers';
+import { forwardMarketplace } from '@orionplace-runtime/marketplace.mjs';
+import { getOrionplaceAppLoad } from '@/lib/orionplace/appLoadServer';
+import {
+  apiErrorMessage,
+  OrionplaceApi,
+  type OrionplaceApiRequest,
+  type OrionplaceApiResponse,
+} from '@/lib/orionplace/api';
+import { featureLabels } from '@/lib/orionplace/featureLabels';
+import { initialSnapshot } from '@/stores/orionplace';
+import { getOrionplaceServerLocale } from '@/lib/orionplace/serverLocale';
+
+function setCookiePair(value: string) {
+  return value.split(';', 1)[0]?.trim() ?? '';
+}
+
+function cookieName(value: string) {
+  return value.slice(0, value.indexOf('=')).trim();
+}
+
+function cookieJar(initial: string, additions: string[]) {
+  const values = new Map<string, string>();
+  for (const value of initial.split(';')) {
+    const pair = value.trim();
+    const name = cookieName(pair);
+    if (name) {
+      values.set(name, pair);
+    }
+  }
+
+  function apply(cookies: string[]) {
+    for (const value of cookies) {
+      const pair = setCookiePair(value);
+      const name = cookieName(pair);
+      if (!name) {
+        continue;
+      }
+      if (!pair.slice(name.length + 1)) {
+        values.delete(name);
+      } else {
+        values.set(name, pair);
+      }
+    }
+  }
+
+  apply(additions);
+  return {
+    apply,
+    header: () => [...values.values()].join('; '),
+  };
+}
+
+function queryValue(value: unknown) {
+  return value !== null && typeof value === 'object'
+    ? JSON.stringify(value)
+    : String(value ?? '');
+}
+
+export const getOrionplaceServerApi = cache(async () => {
+  const incoming = await headers();
+  const appLoad  = await getOrionplaceAppLoad();
+  const jar      = cookieJar(incoming.get('cookie') ?? '', appLoad.cookies);
+  const host     =
+    incoming.get('x-forwarded-host') || incoming.get('host') || 'localhost';
+  const protocol =
+    incoming.get('x-forwarded-proto')?.split(',')[0]?.trim() || 'https';
+  const origin   = `${protocol}://${host}`;
+
+  async function transport(
+    path: string,
+    request: OrionplaceApiRequest,
+  ): Promise<OrionplaceApiResponse> {
+    const url         = new URL(path, origin);
+    if (request.method === 'GET' && !(request.data instanceof FormData)) {
+      for (const [key, value] of Object.entries(request.data)) {
+        url.searchParams.set(key, queryValue(value));
+      }
+    }
+    const forwarded   = new Headers(request.headers);
+    for (const name of [
+      'x-front-domain',
+      'x-forwarded-host',
+      'x-forwarded-proto',
+      'host',
+      'accept-language',
+      'user-agent',
+      'x-init-ip',
+      'x-real-ip',
+      'x-forwarded-for',
+      'x-tz',
+    ]) {
+      const value = incoming.get(name);
+      if (value) {
+        forwarded.set(name, value);
+      }
+    }
+    if (jar.header()) {
+      forwarded.set('cookie', jar.header());
+    }
+    forwarded.set('origin', origin);
+
+    const response    = await forwardMarketplace(
+      new Request(url, {
+        method: request.method,
+        headers: forwarded,
+        body:
+          request.method === 'GET'
+            ? undefined
+            : request.data instanceof FormData
+              ? request.data
+              : JSON.stringify(request.data),
+        signal: request.signal,
+      }),
+      { mimicFrontDomain: process.env.MIMIC_FRONT_DOMAIN ?? '' },
+    );
+    const cookies     = response.headers.getSetCookie();
+    jar.apply(cookies);
+    const contentType = response.headers.get('content-type') ?? '';
+    const body        = contentType.includes('application/json')
+      ? await response.json().catch(() => null)
+      : await response.blob();
+    return {
+      body,
+      status: response.status,
+      cookies,
+      headers: {
+        'content-type': contentType,
+        'content-disposition':
+          response.headers.get('content-disposition') ?? '',
+      },
+    };
+  }
+
+  const result   = appLoad.result;
+  const snapshot = initialSnapshot(result, appLoad.failure);
+  const locale   = await getOrionplaceServerLocale();
+  return new OrionplaceApi({
+    transport,
+    endpoints: () => snapshot.endpoints,
+    cookies: jar.header,
+    locale: () => locale,
+    isSignedIn: () => Boolean(result?.response.page_data.init.is_authenticated),
+  });
+});
+
+/**
+ * The text a server-rendered page shows when its first request fails: OrionMarketplace's
+ * messages, or the translated failure in the visitor's language (never a
+ * bare error kind or an English fallback).
+ */
+export async function serverErrorText(reason: unknown) {
+  return (
+    apiErrorMessage(reason) ||
+    featureLabels(await getOrionplaceServerLocale()).failed
+  );
+}

package/templates/lib/orionplace/serverLocale.ts

@@ -0,0 +1,29 @@
+import { cache } from 'react';
+import { headers } from 'next/headers';
+import { getOrionplaceAppLoad } from '@/lib/orionplace/appLoadServer';
+import { createOrionplaceSelectionsStore } from '@/stores/orionplaceSelections';
+import { storefrontErrorLocale } from '@/lib/orionplace/errorPageLabels';
+
+export const getStorefrontRequestUrl   = cache(async () => {
+  const incoming = await headers();
+  return new URL(
+    incoming.get('x-orionplace-page-url') || '/',
+    'http://storefront',
+  );
+});
+
+export const getOrionplaceServerLocale = cache(async () => {
+  const { result } = await getOrionplaceAppLoad();
+  const url        = await getStorefrontRequestUrl();
+  const requested  = url.searchParams.get('locale');
+  if (!result) {
+    return storefrontErrorLocale(requested, undefined);
+  }
+  const selections = createOrionplaceSelectionsStore(
+    result?.response.page_data.init ?? null,
+  );
+  if (requested) {
+    selections.getState().setLocale(requested);
+  }
+  return selections.getState().localeCode || 'en';
+});

package/templates/lib/orionplace/serverMetadata.ts

@@ -0,0 +1,86 @@
+import { cache } from 'react';
+import { getOrionplaceAppLoad } from '@/lib/orionplace/appLoadServer';
+import {
+  getOrionplaceServerLocale,
+  getStorefrontRequestUrl,
+} from '@/lib/orionplace/serverLocale';
+import {
+  getStorefrontProduct,
+  getStorefrontPromoProducts,
+  getStorefrontPublication,
+  getStorefrontTariffs,
+} from '@/lib/orionplace/serverRecords';
+import {
+  storefrontMetadata,
+  storefrontSeoPage,
+} from '@/lib/orionplace/pageMetadata';
+
+export const getStorefrontMetadataContext = cache(async () => {
+  const { result, failure }                      = await getOrionplaceAppLoad();
+  const locale                                   = await getOrionplaceServerLocale();
+  const url                                      = await getStorefrontRequestUrl();
+  const productId                                = url.pathname.match(/^\/product\/([1-9]\d*)$/)?.[1];
+  const postId                                   = url.pathname.match(/^\/journal\/([1-9]\d*)$/)?.[1];
+  const tariffId                                 = url.pathname.match(/^\/tariffs\/[^/]+\/([1-9]\d*)$/)?.[1];
+  const promoId                                  = url.pathname.match(/^\/promo\/([1-9]\d*)$/)?.[1];
+  let product;
+  let post;
+  let tariff;
+  let promo;
+  // An unknown address keeps its 404 page while the storefront is unavailable.
+  // Record routes with an invalid ID still exist, so they show the 503 page.
+  const section                                  = url.pathname.split('/')[1];
+  const unknownAddress                           =
+    storefrontSeoPage(url.pathname) === 'notFound' &&
+    !['category', 'product', 'journal', 'tariffs', 'promo'].includes(section);
+  const unavailable                              = unknownAddress
+    ? 'notFound'
+    : 'error';
+  let pageKind: 'notFound' | 'error' | undefined = failure
+    ? unavailable
+    : undefined;
+  try {
+    if (!result) {
+      pageKind = unavailable;
+    } else if (productId) {
+      product = await getStorefrontProduct(
+        Number(productId),
+        url.searchParams.get('key') ?? '',
+      );
+      if (!product) {
+        pageKind = 'notFound';
+      }
+    } else if (postId) {
+      post = await getStorefrontPublication(Number(postId));
+      if (!post) {
+        pageKind = 'notFound';
+      }
+    } else if (tariffId) {
+      const data = await getStorefrontTariffs(Number(tariffId));
+      tariff     = data.data.find((record) => record.id === Number(tariffId));
+      if (!tariff) {
+        pageKind = 'notFound';
+      }
+    } else if (promoId) {
+      // The same request as the page (storefrontRoutes.tsx), so one per render.
+      const page = Number(url.searchParams.get('page'));
+      const data = await getStorefrontPromoProducts(
+        Number(promoId),
+        Number.isSafeInteger(page) && page > 0 ? page : 1,
+      );
+      promo      = data.promo ?? undefined;
+    }
+  } catch {
+    // The page retains its request error and offers Retry.
+  }
+  return storefrontMetadata(
+    result?.response.page_data.init ?? null,
+    locale,
+    url,
+    { product, post, tariff, promo, pageKind },
+  );
+});
+
+export async function getStorefrontMetadata() {
+  return (await getStorefrontMetadataContext()).metadata;
+}