orionplace-react 0.5.0 → 0.6.1

package/templates/lib/orionplace/pageSeo.ts

@@ -282,3 +282,71 @@ export function storefrontPageMetadata(
     keywords: plainText(values.keywords ?? '') || `${title}, ${copy[2]}`,
   };
 }
+
+/*
+ * Addresses for search engines and link previews. The public origin is the
+ * storefront host the visitor used (the proxy's Host or X-Forwarded-Host),
+ * over HTTPS; a local host keeps HTTP for development.
+ */
+export function storefrontPublicOrigin(host: string | null | undefined): string {
+  const name  = (host ?? '').split(',')[0]!.trim().toLowerCase();
+  if (!/^(?:[a-z0-9-]+(?:\.[a-z0-9-]+)*|\[[0-9a-f:]+\])(?::\d{1,5})?$/.test(name)) {
+    return '';
+  }
+  const local = /^(?:localhost|127(?:\.\d{1,3}){3}|\[::1\])(?::\d+)?$/.test(name);
+  return `${local ? 'http' : 'https'}://${name}`;
+}
+
+/**
+ * A complete address for a link preview image: a storefront path such as
+ * `/ps3/blog/posts/images/5` gets the public origin; without an origin it is
+ * left out, since a relative og:image is not loaded by link previews.
+ */
+export function storefrontAbsoluteUrl(
+  value: string | null | undefined,
+  origin: string,
+): string | undefined {
+  if (!value) {
+    return undefined;
+  }
+  try {
+    const url = origin ? new URL(value, `${origin}/`) : new URL(value);
+    return /^https?:$/.test(url.protocol) ? url.toString() : undefined;
+  } catch {
+    return undefined;
+  }
+}
+
+// The pages the sitemap lists (runtime/marketplace.mjs), plus plan pages.
+const indexedPage = /^\/(?:|catalog|journal|tariffs|manufacturers|sellers|stores|contact|privacy|(?:category|product|journal)\/\d+|tariffs\/[^/]+\/\d+)$/;
+
+/**
+ * The canonical address of a page: the sitemap's address for it, the page in
+ * the language it shows (`?locale=`). Pages that are not listed, pages with
+ * other query parameters (filters, page numbers, private keys) and noindex
+ * pages get none.
+ */
+export function storefrontCanonicalUrl(
+  origin: string,
+  pathname: string,
+  search: string,
+  locale: string,
+  robots?: string,
+): string | undefined {
+  const path  = pathname.replace(/\/+$/, '') || '/';
+  const query = new URLSearchParams(search);
+  query.delete('locale');
+  if (
+    !origin ||
+    /noindex/i.test(robots ?? '') ||
+    !indexedPage.test(path) ||
+    [...query.keys()].length
+  ) {
+    return undefined;
+  }
+  const url   = new URL(path, `${origin}/`);
+  if (locale) {
+    url.searchParams.set('locale', locale);
+  }
+  return url.toString();
+}

package/templates/lib/orionplace/productListLocation.ts

@@ -0,0 +1,130 @@
+import type { ProductFacetSelection } from '@/interfaces/orionplace/products/IProductSearchFacets';
+
+// Where a product list is: its result page and the chosen filters. Category,
+// search, seller and featured lists keep it in the URL as `?page&filters`, so
+// a reload and the browser's Back button from a product return to the same
+// list. `filters` is the filter selection as JSON; the address is visitor
+// input, so only plain filter values within the limits below are read.
+export interface ProductListLocation {
+  page: number;
+  filters: ProductFacetSelection;
+}
+
+type QueryValue = string | null | undefined | readonly (string | null)[];
+
+const locationKeys    = ['page', 'filters'];
+const maxPage         = 10000;
+const maxFiltersText  = 4000;
+const maxFilterKeys   = 40;
+const maxFilterIds    = 200;
+const maxFilterString = 100;
+const filterKey       = /^[a-z][a-z0-9_]{0,63}$/;
+
+function first(value: QueryValue) {
+  return Array.isArray(value) ? value[0] : (value as string | null | undefined);
+}
+
+function filterValue(value: unknown): ProductFacetSelection[string] {
+  if (Array.isArray(value)) {
+    const ids = value.filter(
+      (id): id is number => Number.isSafeInteger(id) && id >= 0,
+    );
+
+    return ids.length === value.length && ids.length && ids.length <= maxFilterIds
+      ? ids
+      : undefined;
+  }
+  if (typeof value === 'string') {
+    return value && value.length <= maxFilterString ? value : undefined;
+  }
+  if (typeof value === 'number') {
+    return Number.isFinite(value) ? value : undefined;
+  }
+
+  // `false` chooses nothing, as an empty list or text.
+  return value === true ? true : undefined;
+}
+
+export function productListFiltersFromText(
+  text: string | null | undefined,
+): ProductFacetSelection {
+  if (!text || text.length > maxFiltersText) {
+    return {};
+  }
+  let parsed: unknown;
+  try {
+    parsed = JSON.parse(text);
+  } catch {
+    return {};
+  }
+  if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) {
+    return {};
+  }
+  const result: ProductFacetSelection = {};
+  for (const [key, value] of Object.entries(parsed).slice(0, maxFilterKeys)) {
+    const checked = filterKey.test(key) ? filterValue(value) : undefined;
+    if (checked !== undefined) {
+      result[key] = checked;
+    }
+  }
+
+  return result;
+}
+
+// The filters as URL text, or undefined when nothing is chosen.
+// Keys are sorted, so the same choice always gives the same text.
+export function productListFiltersText(filters: ProductFacetSelection) {
+  const chosen = productListFiltersFromText(JSON.stringify(filters));
+  const keys   = Object.keys(chosen).sort();
+
+  return keys.length
+    ? JSON.stringify(Object.fromEntries(keys.map((key) => [key, chosen[key]])))
+    : undefined;
+}
+
+export function productListLocationFromQuery(
+  query: Record<string, QueryValue>,
+): ProductListLocation {
+  const page = Number(first(query.page));
+
+  return {
+    page: Number.isSafeInteger(page) && page > 0 && page <= maxPage ? page : 1,
+    filters: productListFiltersFromText(first(query.filters)),
+  };
+}
+
+// Compares the URL form, so the same choice in another key order is equal.
+export function sameProductListLocation(
+  left: ProductListLocation,
+  right: ProductListLocation,
+) {
+  return (
+    left.page === right.page &&
+    productListFiltersText(left.filters) === productListFiltersText(right.filters)
+  );
+}
+
+// The query of `next`: other parameters such as `locale` or `q` stay, and the
+// first page without filters adds nothing.
+export function productListLocationQuery(
+  query: Record<string, QueryValue>,
+  next: ProductListLocation,
+) {
+  const result: Record<string, string> = {};
+
+  for (const [key, value] of Object.entries(query)) {
+    const text = first(value);
+    if (typeof text === 'string' && !locationKeys.includes(key)) {
+      result[key] = text;
+    }
+  }
+  if (next.page > 1) {
+    result.page = String(next.page);
+  }
+  const filters = productListFiltersText(next.filters);
+  if (filters) {
+    result.filters = filters;
+  }
+
+  return result;
+}

package/templates/lib/orionplace/productSearch.ts

@@ -7,6 +7,7 @@ import type {
   IProductSearchResponse,
 } from '@/interfaces/orionplace/products/IProductSearchApi';
 import type { OrionplaceApi } from '@/lib/orionplace/api';
+import { initialSearchFacets } from '@/lib/orionplace/searchFilters';
 
 export type ProductSearchPage = NonNullable<
   IProductSearchResponse['page_data']
@@ -230,3 +231,50 @@ export async function loadProductSearch(
     signal,
   );
 }
+
+/**
+ * A result page with `fullFacets`: the filter choices of the unfiltered
+ * first page, when the page was a later one or loaded with filters.
+ */
+export type ProductListPage = ProductSearchPage & {
+  fullFacets?: IProductSearchFacets | null;
+};
+
+/**
+ * A list opened from its URL (Back, a reload) on a later page or with
+ * filters gets only the filtered choices, or none after the first page.
+ * With `withFullFacets` this also asks for the unfiltered first page, so the
+ * filter panel keeps every seller, price and option to choose from. The
+ * extra request is only for the panel: when it fails the panel shows the
+ * choices of the result.
+ */
+export async function loadProductListPage(
+  api: OrionplaceApi,
+  scope: ProductSearchScope,
+  filters: ProductFacetSelection = {},
+  page = 1,
+  signal?: AbortSignal,
+  withFullFacets = true,
+): Promise<ProductListPage> {
+  // Both requests run together.
+  const [data, full] = await Promise.all([
+    loadProductSearch(api, scope, filters, page, signal),
+    withFullFacets && (page > 1 || Object.keys(filters).length > 0)
+      ? loadProductSearch(api, scope, {}, 1, signal).catch(() => undefined)
+      : undefined,
+  ]);
+
+  return full ? { ...data, fullFacets: productSearchFacetData(full) } : data;
+}
+
+/** The filter choices of a list page: the full ones first, as kept by the store. */
+export function productListFacetData(
+  page: ProductListPage | undefined,
+  previous: IProductSearchFacets | null = null,
+) {
+  return [page?.fullFacets ?? null, productSearchFacetData(page)].reduce(
+    (current, incoming) =>
+      incoming ? initialSearchFacets(current, incoming) : current,
+    previous,
+  );
+}

package/templates/lib/orionplace/profile.ts

@@ -34,6 +34,18 @@ export function profileDate(value: string | null | undefined) {
     : '';
 }
 
+/** The name of a phone country code (`RU` → «Россия» / «Russia»); the code itself when the browser has no name. */
+export function profileCountryName(code: string | null | undefined, locale: string) {
+  if (!code) {
+    return '';
+  }
+  try {
+    return new Intl.DisplayNames([locale], { type: 'region' }).of(code) || code;
+  } catch {
+    return code;
+  }
+}
+
 export class ProfileRequestError extends Error {
   readonly kind = 'profile-request';
   readonly fields: Record<string, string>;

package/templates/lib/orionplace/profileLabels.ts

@@ -15,6 +15,7 @@ export function profileLabels(locale: string) {
         lastName: 'Фамилия',
         phone: 'Номер телефона',
         phoneHint: 'Номер телефона для входа.',
+        phoneCountryHint: 'Номер телефона для входа. Его страна, {country}, определяет доступные способы оплаты.',
         dob: 'Дата рождения',
         save: 'Сохранить',
         pending: 'Сохраняем…',
@@ -89,6 +90,7 @@ export function profileLabels(locale: string) {
         lastName: 'Last name',
         phone: 'Phone number',
         phoneHint: 'Your sign-in phone number.',
+        phoneCountryHint: 'Your sign-in phone number. Its country, {country}, decides which payment methods you can use.',
         dob: 'Date of birth',
         save: 'Save',
         pending: 'Saving…',

package/templates/lib/orionplace/serverMetadata.ts

@@ -1,4 +1,6 @@
 import { cache } from 'react';
+import { headers } from 'next/headers';
+import { storefrontPublicOrigin } from '@/lib/orionplace/pageSeo';
 import { getOrionplaceAppLoad } from '@/lib/orionplace/appLoadServer';
 import {
   getOrionplaceServerLocale,
@@ -73,11 +75,16 @@ export const getStorefrontMetadataContext = cache(async () => {
   } catch {
     // The page retains its request error and offers Retry.
   }
+  const incoming                                 = await headers();
   return storefrontMetadata(
     result?.response.page_data.init ?? null,
     locale,
     url,
     { product, post, tariff, promo, pageKind },
+    // The address the visitor used: the proxy's host.
+    storefrontPublicOrigin(
+      incoming.get('x-forwarded-host') ?? incoming.get('host'),
+    ),
   );
 });
 

package/templates/proxy.ts

@@ -1,4 +1,5 @@
 import { NextResponse, type NextRequest } from 'next/server';
+import { marketplaceNoindexPath } from '@orionplace-runtime/marketplace.mjs';
 import {
   APP_LOAD_HANDOFF_HEADER,
   startAppLoad,
@@ -47,10 +48,15 @@ export async function proxy(request: NextRequest) {
     ...(unavailable ? { status: 503 } : {}),
   });
   response.headers.set('Cache-Control', 'private, no-store');
+  // Pages under ORIONPLACE_NOINDEX_PATHS stay out of search engines.
+  if (marketplaceNoindexPath(request.nextUrl.pathname)) {
+    response.headers.set('X-Robots-Tag', 'noindex, follow');
+  }
   return response;
 }
 
-// The gateway sets its own headers for /api; static assets keep their caching.
+// The gateway sets its own headers for /api, robots.txt and the sitemap;
+// static assets keep their caching.
 export const config = {
-  matcher: ['/((?!api/|_next/static|_next/image|favicon.ico).*)'],
+  matcher: ['/((?!api/|_next/static|_next/image|favicon.ico|robots.txt|sitemap.xml).*)'],
 };