orionplace-react 0.7.2 → 0.7.3

package/README.md

@@ -513,6 +513,7 @@ server render. Public product, article and tariff details load through the
 maintained API client. Page metadata uses those returned records and follows
 client navigation and language selection. Home-page event clicks open enrollment
 for the returned event, preserving its return path through sign-in.
+Pages with a canonical address also link the same page in the other storefront languages (`hreflang`) and set `og:type` and `og:locale`; a journal article adds its publication date (`article:published_time`) and schema.org `BlogPosting` data. The store icon (`logos.ico`) is the page's `<link rel="icon">`. An unknown `?locale` opens the default language.
 
 `StorefrontShell` mounts the header, route content and footer after Application
 Load succeeds. If initialization fails, it shows `StorefrontErrorPage`; Retry

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orionplace-react",
-  "version": "0.7.2",
+  "version": "0.7.3",
   "description": "Next.js 16 storefront for your Orionplace marketplace: setup CLI, server API gateway, typed store and ready-made catalog, cart, checkout and account components in English and Russian, plus an Android app build.",
   "type": "module",
   "license": "MIT",

package/templates/app/layout.tsx

@@ -25,7 +25,7 @@ export default async function RootLayout({
   // Bootstrap precedes page rendering. Failures stay in the store for the interface to handle.
   const { result, failure } = await getOrionplaceAppLoad();
   const language            = await getOrionplaceServerLocale();
-  const { tags }            = await getStorefrontMetadataContext();
+  const { tags, jsonLd }    = await getStorefrontMetadataContext();
   return (
     <html lang={language}>
       <head>
@@ -44,6 +44,13 @@ export default async function RootLayout({
             />
           ),
         )}
+        {jsonLd ? (
+          <script
+            type="application/ld+json"
+            // Escaped by structuredDataJson, so the text cannot close the tag.
+            dangerouslySetInnerHTML={{ __html: jsonLd }}
+          />
+        ) : null}
       </head>
       <body>
         <OrionplaceProvider

package/templates/lib/orionplace/appLoadClient.ts

@@ -1,5 +1,6 @@
 import {
   AppLoadError,
+  appLoadRejectedLocale,
   appLoadResult,
   inspectAppLoad,
 } from '@/lib/orionplace/appLoadResult';
@@ -68,6 +69,10 @@ export async function requestBrowserAppLoad(
     });
   }
   const failure     = inspectAppLoad(body, status);
+  // A language the storefront does not have opens its default language.
+  if (failure && locale && appLoadRejectedLocale(failure)) {
+    return requestBrowserAppLoad(signal);
+  }
   if (failure) {
     throw new AppLoadError('Marketplace initialization failed.', failure);
   }

package/templates/lib/orionplace/appLoadResult.ts

@@ -108,3 +108,13 @@ export class AppLoadError extends Error {
     this.data = data;
   }
 }
+
+/**
+ * Whether App Load refused the request's language (`?lang=` of a language the
+ * storefront does not have): the backend answers it with field errors and
+ * HTTP 452. The language is the only client value App Load reads, so the
+ * storefront loads again without it.
+ */
+export function appLoadRejectedLocale(failure: AppLoadFailure): boolean {
+  return failure.kind === 'validation' || failure.httpStatus === 452;
+}

package/templates/lib/orionplace/appLoadServer.ts

@@ -1,7 +1,11 @@
 import { cache } from 'react';
 import { headers } from 'next/headers';
 import { forwardMarketplace } from '@orionplace-runtime/marketplace.mjs';
-import { appLoadResult, inspectAppLoad } from '@/lib/orionplace/appLoadResult';
+import {
+  appLoadRejectedLocale,
+  appLoadResult,
+  inspectAppLoad,
+} from '@/lib/orionplace/appLoadResult';
 import type {
   AppLoadFailure,
   AppLoadRequest,
@@ -49,7 +53,11 @@ function handoffs(): Map<string, Promise<ServerAppLoad>> {
   return scope[HANDOFF_KEY];
 }
 
-function buildRequest(incoming: Headers, signal: AbortSignal): Request {
+function buildRequest(
+  incoming: Headers,
+  signal: AbortSignal,
+  withLocale = true,
+): Request {
   const host     =
     incoming.get('x-forwarded-host') || incoming.get('host') || 'localhost';
   const protocol =
@@ -59,7 +67,7 @@ function buildRequest(incoming: Headers, signal: AbortSignal): Request {
     incoming.get('x-orionplace-page-url') || '/',
     url.origin,
   );
-  const locale   = pageUrl.searchParams.get('locale');
+  const locale   = withLocale ? pageUrl.searchParams.get('locale') : null;
   if (locale) {
     url.searchParams.set('lang', locale);
   }
@@ -92,12 +100,16 @@ function buildRequest(incoming: Headers, signal: AbortSignal): Request {
 export async function requestAppLoad(
   signal?: AbortSignal,
   incoming?: Headers,
+  withLocale = true,
 ): Promise<ServerAppLoad> {
   const timeout     = AbortSignal.timeout(35_000);
   const combined    = signal ? AbortSignal.any([signal, timeout]) : timeout;
   let response: Response;
+  let source: Headers;
+  let request: Request;
   try {
-    const request = buildRequest(incoming ?? new Headers(await headers()), combined);
+    source        = incoming ?? new Headers(await headers());
+    request       = buildRequest(source, combined, withLocale);
     response      = await forwardMarketplace(request, {
       mimicFrontDomain: process.env.MIMIC_FRONT_DOMAIN ?? '',
     });
@@ -116,6 +128,15 @@ export async function requestAppLoad(
     body = null;
   }
   const failure     = inspectAppLoad(body, response.status);
+  // An address with a language the storefront does not have (`?locale=xx`)
+  // opens in the storefront's default language instead of the 503 page.
+  if (
+    failure &&
+    new URL(request.url).searchParams.has('lang') &&
+    appLoadRejectedLocale(failure)
+  ) {
+    return requestAppLoad(signal, source, false);
+  }
   if (failure) {
     return { result: null, failure, cookies };
   }

package/templates/lib/orionplace/pageMetadata.ts

@@ -14,10 +14,17 @@ import type { IPromoDefinition } from '@/interfaces/orionplace/cart/ICartData';
 import { promoName } from '@/lib/orionplace/promoPresentation';
 import {
   storefrontAbsoluteUrl,
+  storefrontAlternateLinks,
+  storefrontArticleData,
   storefrontCanonicalUrl,
+  storefrontIconLinks,
+  storefrontIsoDate,
+  storefrontOpenGraphLocale,
+  storefrontOpenGraphType,
   storefrontPageMetadata,
   type StorefrontSeoPage,
 } from '@/lib/orionplace/pageSeo';
+import { structuredDataJson } from '@/lib/orionplace/productStructuredData';
 import { getStorefrontSeo } from '@/lib/orionplace/seo';
 import { findCatalogCategory } from '@/lib/orionplace/catalog';
 import { blogPostCover } from '@/lib/orionplace/blogPresentation';
@@ -127,6 +134,8 @@ export function storefrontMetadata(
   }
   const values: MetadataValues = {};
   let image: string | undefined;
+  let published: string | undefined;
+  let modified: string | undefined;
   const tags: MetaTags         = [];
   let robots: string | undefined;
   // A private product link (`key`) stays out of search results, loaded or not.
@@ -201,6 +210,9 @@ export function storefrontMetadata(
       ),
     ).slice(0, 160);
     image              = blogPostCover(records.post);
+    published          = storefrontIsoDate(records.post.date_created?.date);
+    modified           =
+      storefrontIsoDate(records.post.date_updated?.date) ?? published;
   } else if (page === 'tariff' && records.tariff) {
     const tariff       = records.tariff;
     const field        = <Key extends keyof ISubscribeTariffLocales>(name: Key) =>
@@ -227,17 +239,71 @@ export function storefrontMetadata(
     locale,
     robots,
   );
+  // The home page may carry the admin's own og:type (tags, rendered as is).
+  const ogType                 = tags.some(
+    (tag) => 'property' in tag && tag.property === 'og:type',
+  )
+    ? undefined
+    : storefrontOpenGraphType(page);
+  const ogLocale               = storefrontOpenGraphLocale(locale);
+  // The page in the storefront's other languages, beside the canonical one.
+  const languages              = Object.fromEntries(
+    storefrontAlternateLinks(canonical, Object.keys(init?.locale ?? {})).map(
+      (alternate) => [alternate.hreflang, alternate.href],
+    ),
+  );
+  const icon                   = storefrontIconLinks(init?.logos?.ico)[0]?.href;
+  // Next.js has no og:type "product"; that page gets it as a plain tag below.
+  const openGraph              = ogType === 'article'
+    ? {
+        type: 'article' as const,
+        ...(published ? { publishedTime: published } : {}),
+        ...(modified ? { modifiedTime: modified } : {}),
+      }
+    : ogType === 'website'
+      ? { type: 'website' as const }
+      : {};
   const metadata: Metadata     = {
     ...content,
     ...(robots ? { robots } : {}),
-    ...(canonical ? { alternates: { canonical } } : {}),
+    ...(canonical
+      ? {
+          alternates: {
+            canonical,
+            ...(Object.keys(languages).length ? { languages } : {}),
+          },
+        }
+      : {}),
+    ...(icon ? { icons: { icon } } : {}),
     openGraph: {
+      ...openGraph,
       title: content.title,
       description: content.description,
+      ...(ogLocale ? { locale: ogLocale } : {}),
       ...(canonical ? { url: canonical } : {}),
       ...(image ? { images: [image] } : {}),
     },
   };
+  if (ogType === 'product') {
+    tags.unshift({ property: 'og:type', content: 'product' });
+  }
+  // A journal article as schema.org BlogPosting, with the store as its author.
+  const jsonLd                 =
+    page === 'publication' && records.post && canonical && origin
+      ? structuredDataJson(
+          storefrontArticleData({
+            canonical,
+            origin,
+            headline: content.title,
+            description: content.description,
+            image,
+            published,
+            modified,
+            locale,
+            storeName: init?.contact?.company_name,
+          }),
+        )
+      : '';
   const headTags               = new Map<
     string,
     { name?: string; property?: string; content: string }
@@ -250,9 +316,13 @@ export function storefrontMetadata(
     'og:description': content.description,
     'og:image': image,
     'og:url': canonical,
+    'og:type': ogType,
+    'og:locale': ogLocale,
+    'article:published_time': ogType === 'article' ? published : undefined,
+    'article:modified_time': ogType === 'article' ? modified : undefined,
   })) {
     headTags.set(name, {
-      ...(name.startsWith('og:') ? { property: name } : { name }),
+      ...(/^(?:og|article):/.test(name) ? { property: name } : { name }),
       content: value ?? '',
     });
   }
@@ -263,6 +333,7 @@ export function storefrontMetadata(
   return {
     metadata,
     tags,
+    jsonLd,
     head: { title: content.title, meta: [...headTags.values()] },
   };
 }

package/templates/lib/orionplace/pageSeo.ts

@@ -263,17 +263,157 @@ const pageCopy = {
       'error, store',
     ],
   },
+  es: {
+    tariffs: [
+      'Planes de suscripción',
+      'Precios por periodo, periodos de prueba y opciones de cada plan.',
+      'planes, suscripciones, prueba',
+    ],
+    tariff: [
+      'Plan de suscripción',
+      'Descripción, funciones, periodos y opciones de un plan de suscripción.',
+      'plan, suscripción, periodo',
+    ],
+    subscriptions: [
+      'Mis suscripciones',
+      'Fechas de las suscripciones y renovación automática.',
+      'suscripciones, cuenta',
+    ],
+    sellers: ['Vendedores', 'Vendedores y sus productos.', 'vendedores, productos'],
+    stores: [
+      'Tiendas',
+      'Direcciones, contactos y horarios de las tiendas.',
+      'tiendas, direcciones',
+    ],
+    catalog: ['Catálogo', 'Categorías de productos de la tienda.', 'catálogo, categorías'],
+    activity: [
+      'Mi actividad',
+      'Códigos promocionales, reseñas e historial de accesos del cliente.',
+      'cuenta, códigos promocionales, reseñas, accesos',
+    ],
+    promo: [
+      'Productos del código promocional',
+      'Productos de la tienda a los que se aplica la oferta del código promocional.',
+      'código promocional, oferta, productos',
+    ],
+    wishlist: [
+      'Favoritos',
+      'Productos guardados y avisos de disponibilidad.',
+      'favoritos, productos',
+    ],
+    contact: [
+      'Contacto',
+      'Datos de contacto de la empresa y formulario de mensajes de la tienda.',
+      'contacto, mensaje',
+    ],
+    privacy: [
+      'Política de privacidad',
+      'Qué datos recibe la tienda, para qué, a quién los transmite y qué cookies usa el sitio.',
+      'datos personales, privacidad, cookies',
+    ],
+    unsubscribe: [
+      'Preferencias de correo',
+      'Darse de baja de los correos de la tienda.',
+      'correos, baja',
+    ],
+    tickets: [
+      'Soporte',
+      'Conversaciones del usuario con el soporte.',
+      'soporte, conversaciones',
+    ],
+    orders: [
+      'Mis pedidos',
+      'Historial de pedidos y artículos comprados.',
+      'pedidos, compras',
+    ],
+    cart: ['Carrito', 'Artículos y pago del pedido.', 'carrito, pago'],
+    addresses: [
+      'Mis direcciones',
+      'Direcciones de entrega guardadas.',
+      'direcciones, entrega',
+    ],
+    wallet: [
+      'Monedero y pagos',
+      'Saldo e historial de pagos.',
+      'monedero, pagos',
+    ],
+    home: [
+      'Tienda',
+      'Categorías y productos de la tienda.',
+      'tienda, catálogo, productos',
+    ],
+    browse: [
+      'Resultados de búsqueda',
+      'Productos que coinciden con la búsqueda y los filtros elegidos.',
+      'búsqueda de productos, filtros, catálogo',
+    ],
+    featured: [
+      'Destacados',
+      'Productos de las categorías que el cliente ha buscado en la tienda.',
+      'recomendaciones, productos, filtros',
+    ],
+    category: [
+      'Categoría de productos',
+      'Productos y filtros disponibles de la categoría elegida.',
+      'categoría, productos, filtros',
+    ],
+    journal: [
+      'Revista',
+      'Publicaciones de la tienda con títulos, resúmenes y tiempo de lectura.',
+      'revista, publicaciones, artículos',
+    ],
+    publication: [
+      'Publicación de la revista',
+      'Un artículo de la revista de la tienda.',
+      'revista, publicación, artículo',
+    ],
+    product: [
+      'Ficha de producto',
+      'Descripción, precio, variantes y disponibilidad del producto.',
+      'producto, precio, disponibilidad',
+    ],
+    manufacturers: [
+      'Fabricantes',
+      'Fabricantes de la tienda con logotipos e índice alfabético.',
+      'fabricantes, marcas, índice alfabético',
+    ],
+    profile: [
+      'Perfil personal',
+      'Datos personales, correo, notificaciones y contraseña de la cuenta.',
+      'perfil, cuenta, ajustes',
+    ],
+    logout: [
+      'Cerrar sesión',
+      'Fin de la sesión y vuelta a la página principal.',
+      'cuenta, cerrar sesión, sesión',
+    ],
+    notFound: [
+      'Página no encontrada',
+      'No hay ninguna página de la tienda en esta dirección.',
+      'página no encontrada, 404',
+    ],
+    error: [
+      'Algo salió mal',
+      'No se pudo mostrar la página de la tienda.',
+      'error, tienda',
+    ],
+  },
 } as const;
 
 export type StorefrontSeoPage = keyof typeof pageCopy.en;
 
+/** The page copy for a storefront language; languages without one use English. */
+function storefrontCopyLanguage(locale: string): keyof typeof pageCopy {
+  const language = locale.toLowerCase().split(/[-_]/)[0];
+  return language === 'ru' || language === 'es' ? language : 'en';
+}
+
 export function storefrontPageMetadata(
   page: StorefrontSeoPage,
   locale: string,
   values: { title?: string; description?: string; keywords?: string } = {},
 ) {
-  const copy  =
-    pageCopy[locale.toLowerCase().startsWith('ru') ? 'ru' : 'en'][page];
+  const copy  = pageCopy[storefrontCopyLanguage(locale)][page];
   const title = plainText(values.title ?? '') || copy[0];
 
   return {
@@ -350,3 +490,122 @@ export function storefrontCanonicalUrl(
   }
   return url.toString();
 }
+
+/** og:type of a page: a product and a journal article have their own kinds. */
+export function storefrontOpenGraphType(
+  page: StorefrontSeoPage,
+): 'product' | 'article' | 'website' {
+  if (page === 'product') {
+    return 'product';
+  }
+  return page === 'publication' ? 'article' : 'website';
+}
+
+const openGraphRegions: Record<string, string> = {
+  de: 'de_DE',
+  en: 'en_US',
+  es: 'es_ES',
+  fr: 'fr_FR',
+  it: 'it_IT',
+  kk: 'kk_KZ',
+  pl: 'pl_PL',
+  pt: 'pt_PT',
+  ru: 'ru_RU',
+  tr: 'tr_TR',
+  uk: 'uk_UA',
+  zh: 'zh_CN',
+};
+
+/** og:locale (`language_TERRITORY`) of a storefront language, when it is known. */
+export function storefrontOpenGraphLocale(locale: string): string | undefined {
+  return openGraphRegions[locale.toLowerCase().split(/[-_]/)[0]!];
+}
+
+/**
+ * The same page in every storefront language (hreflang), for a page with a
+ * canonical address: the canonical address with each language's `?locale=`,
+ * as the sitemap lists them. Search engines that ignore the sitemap's
+ * language links (Yandex) read these. A single language gives none.
+ */
+export function storefrontAlternateLinks(
+  canonical: string | undefined,
+  locales: string[],
+): { hreflang: string; href: string }[] {
+  const codes = [
+    ...new Set(
+      locales
+        .map((code) => code.trim())
+        .filter((code) => /^[a-z]{2,3}(?:-[a-z0-9]{2,8})*$/i.test(code)),
+    ),
+  ];
+  if (!canonical || codes.length < 2) {
+    return [];
+  }
+  return codes.map((code) => {
+    const url = new URL(canonical);
+    url.searchParams.set('locale', code);
+    return { hreflang: code, href: url.toString() };
+  });
+}
+
+/**
+ * A backend date (`d.m.Y`, e.g. `22.09.2026`) as an ISO 8601 date
+ * (`2026-09-22`); anything else gives `undefined`. A date without a time
+ * cannot disagree with the visible date in another time zone.
+ */
+export function storefrontIsoDate(
+  value: string | null | undefined,
+): string | undefined {
+  const match = /^(\d{2})\.(\d{2})\.(\d{4})$/.exec((value ?? '').trim());
+  return match ? `${match[3]}-${match[2]}-${match[1]}` : undefined;
+}
+
+/**
+ * schema.org BlogPosting of a journal article (Google "Article" structured
+ * data): headline, cover, dates, and the store as author and publisher.
+ */
+export function storefrontArticleData(input: {
+  canonical: string;
+  origin: string;
+  headline: string;
+  description?: string;
+  image?: string;
+  published?: string;
+  modified?: string;
+  locale: string;
+  storeName?: string;
+}): Record<string, unknown> {
+  const store = {
+    '@type': 'Organization',
+    name: input.storeName || new URL(input.origin).hostname,
+    url: `${input.origin}/`,
+  };
+  const modified = input.modified || input.published;
+  return {
+    '@context': 'https://schema.org',
+    '@type': 'BlogPosting',
+    '@id': `${input.canonical}#article`,
+    mainEntityOfPage: input.canonical,
+    url: input.canonical,
+    headline: input.headline.slice(0, 110),
+    ...(input.description ? { description: input.description } : {}),
+    ...(input.image ? { image: [input.image] } : {}),
+    ...(input.published ? { datePublished: input.published } : {}),
+    ...(modified ? { dateModified: modified } : {}),
+    inLanguage: input.locale,
+    author: store,
+    publisher: store,
+  };
+}
+
+/**
+ * The store's icon (App Load `logos.ico`) as `<link rel="icon">` tags: search
+ * engines read the icon from the home page. Only a complete http(s) address
+ * is used; the type is left out, so it cannot disagree with the file.
+ */
+export function storefrontIconLinks(
+  icon: string | null | undefined,
+): { key: string; rel: string; href: string }[] {
+  const href = storefrontAbsoluteUrl(icon, '');
+  return href ? [{ key: 'icon', rel: 'icon', href }] : [];
+}