orionplace-react 0.1.0 → 0.2.0

package/templates/lib/orionplace/api.ts

@@ -0,0 +1,326 @@
+import type { IAppLoadPathObject, TMethod } from '@/interfaces/orionplace';
+
+export interface OrionplaceApiResponse {
+  body: unknown;
+  status: number;
+  cookies: string[];
+  headers?: Record<string, string>;
+}
+
+export type OrionplaceApiData = object | FormData;
+
+export interface OrionplaceApiRequest {
+  method: TMethod;
+  data: OrionplaceApiData;
+  headers: Record<string, string>;
+  signal?: AbortSignal;
+}
+
+export type OrionplaceTransport = (
+  path: string,
+  request: OrionplaceApiRequest,
+) => Promise<OrionplaceApiResponse>;
+
+/**
+ * The texts of the field errors, each once: OrionMarketplace often repeats a
+ * field's error for the whole form.
+ */
+export function fieldErrorText(fields: Record<string, unknown>) {
+  return [...new Set(Object.values(fields).filter(Boolean))].join(' ');
+}
+
+export class OrionplaceApiError extends Error {
+  readonly kind: 'unavailable' | 'failed';
+  readonly fields: Record<string, string>;
+  readonly status?: number;
+  readonly data?: unknown;
+  // Error codes of the answer, such as `sign_in` when OrionMarketplace asks the visitor
+  // to sign in first.
+  readonly codes: string[];
+
+  constructor(
+    kind: 'unavailable' | 'failed',
+    fields: Record<string, string> = {},
+    status?: number,
+    data?: unknown,
+    codes: string[] = [],
+  ) {
+    super(fieldErrorText(fields) || kind);
+    this.kind   = kind;
+    this.fields = fields;
+    this.status = status;
+    this.data   = data;
+    this.codes  = codes;
+  }
+}
+
+/**
+ * The text to show for a failed request: OrionMarketplace's own messages, or '' so the
+ * caller shows its translated fallback. A bare error kind ('unavailable',
+ * 'failed') or the browser's network message ('Failed to fetch') is never
+ * shown to the customer.
+ */
+export function apiErrorMessage(reason: unknown) {
+  if (reason instanceof OrionplaceApiError) {
+    return fieldErrorText(reason.fields);
+  }
+  if (
+    !(reason instanceof Error) ||
+    reason instanceof TypeError ||
+    reason.name === 'AbortError'
+  ) {
+    return '';
+  }
+
+  return reason.message;
+}
+
+/**
+ * Requests whose amounts the backend counts in the customer's currency: an
+ * order, a preorder and a plan purchase are priced and charged in it. The
+ * client adds the selected currency to them (unless the caller set one).
+ */
+export const CURRENCY_REQUESTS = new Set([
+  'orders_create',
+  'preorders_create',
+  'subscriptions_subscribe',
+  'subscriptions_renew',
+  'subscriptions_change_renew',
+  'subscriptions_change_tariff',
+  'subscriptions_change_option',
+]);
+
+export class OrionplaceApi {
+  private renewal: Promise<void> | undefined;
+  private sessionEnding: Promise<void> | undefined;
+  private readonly transport: OrionplaceTransport;
+  private readonly endpoints: () => IAppLoadPathObject;
+  private readonly cookies: () => string;
+  private readonly locale: () => string;
+  private readonly canRequest: () => boolean;
+  private readonly isSignedIn: () => boolean;
+  private readonly currency: () => string | number | undefined;
+  private readonly onSessionEnded?: () => unknown;
+
+  constructor(options: {
+    transport: OrionplaceTransport;
+    endpoints: () => IAppLoadPathObject;
+    cookies: () => string;
+    locale?: () => string;
+    canRequest?: () => boolean;
+    isSignedIn?: () => boolean;
+    currency?: () => string | number | undefined;
+    onSessionEnded?: () => unknown;
+  }) {
+    this.transport      = options.transport;
+    this.endpoints      = options.endpoints;
+    this.cookies        = options.cookies;
+    this.locale         = options.locale ?? (() => '');
+    this.canRequest     = options.canRequest ?? (() => true);
+    this.isSignedIn     = options.isSignedIn ?? (() => false);
+    this.currency       = options.currency ?? (() => undefined);
+    this.onSessionEnded = options.onSessionEnded;
+  }
+
+  get sessionEnd() {
+    return this.sessionEnding;
+  }
+
+  async request<T>(
+    name: string,
+    data: OrionplaceApiData,
+    signal?: AbortSignal,
+    params: Record<string, number> = {},
+  ): Promise<T> {
+    return this.successData<T>(
+      await this.requestResponse(name, data, signal, params),
+    );
+  }
+
+  async requestResponse(
+    name: string,
+    data: OrionplaceApiData,
+    signal?: AbortSignal,
+    params: Record<string, number> = {},
+  ): Promise<OrionplaceApiResponse> {
+    if (!this.canRequest()) {
+      throw new OrionplaceApiError('unavailable');
+    }
+
+    const discovered       = Object.values(this.endpoints())
+      .flatMap((section) => Object.values(section))
+      .find((entry) => entry.url_name === name);
+    const endpoint         =
+      discovered ??
+      (name === 'reload_customer_app'
+        ? { target: 'api/reload_customer_app', methods: ['PATCH' as const] }
+        : undefined);
+    const method           = endpoint?.methods[0];
+    let path               = `/${endpoint?.target.replace(/^\/+/, '') ?? ''}`;
+    path                   = path.replace(/\{([a-zA-Z_][a-zA-Z0-9_]*)\}/g, (_, key: string) => {
+      const value = params[key];
+      if (!Number.isSafeInteger(value) || Number(value) <= 0) {
+        throw new OrionplaceApiError('unavailable');
+      }
+      return String(value);
+    });
+
+    if (
+      !endpoint ||
+      !method ||
+      !/^\/api\/[a-zA-Z0-9_/-]+(?:\.png)?$/.test(path)
+    ) {
+      throw new OrionplaceApiError('unavailable');
+    }
+    if (method === 'GET' && data instanceof FormData) {
+      throw new OrionplaceApiError('unavailable');
+    }
+    const currency         = Number(this.currency());
+    if (
+      CURRENCY_REQUESTS.has(name) &&
+      !(data instanceof FormData) &&
+      (data as Record<string, unknown>).currency === undefined &&
+      Number.isSafeInteger(currency) &&
+      currency > 0
+    ) {
+      data = { ...data, currency };
+    }
+
+    const protectedRequest = method !== 'GET';
+    if (protectedRequest && !this.csrfToken()) {
+      await this.renewCsrf();
+    }
+    signal?.throwIfAborted();
+
+    const response         = await this.send(path, method, data, signal);
+    const body             = response.body as {
+      page_data?: { csrf?: boolean };
+    } | null;
+    const csrfRejected     =
+      response.status === 419 ||
+      (response.status === 403 && body?.page_data?.csrf === false);
+    // Renew for the next explicit action and retain this request's rejection.
+    if (protectedRequest && csrfRejected) {
+      await this.renewCsrf();
+      signal?.throwIfAborted();
+    }
+
+    this.detectSessionEnd(response);
+    signal?.throwIfAborted();
+    return response;
+  }
+
+  private detectSessionEnd(response: OrionplaceApiResponse) {
+    if (
+      response.status !== 401 ||
+      this.sessionEnding ||
+      !this.onSessionEnded ||
+      !this.isSignedIn()
+    ) {
+      return;
+    }
+
+    let ending: Promise<void>;
+    try {
+      ending = Promise.resolve(this.onSessionEnded()).then(() => undefined);
+    } catch (error) {
+      ending = Promise.reject(error);
+    }
+    this.sessionEnding = ending
+      .catch(() => undefined)
+      .finally(() => {
+        this.sessionEnding = undefined;
+      });
+  }
+
+  private csrfToken() {
+    return this.cookies().match(/(?:^|;\s*)csrftoken=([^;]*)/)?.[1] ?? '';
+  }
+
+  private localizedPath(path: string, requestedLocale = '') {
+    const locale    = (requestedLocale || this.locale()).trim();
+    if (!locale) {
+      return path;
+    }
+    const separator = path.includes('?') ? '&' : '?';
+    return `${path}${separator}lang=${encodeURIComponent(locale)}`;
+  }
+
+  private async renewCsrf() {
+    if (!this.renewal) {
+      this.renewal = this.send('/api/csrf_renew', 'POST', {})
+        .then((response) => {
+          this.detectSessionEnd(response);
+          this.successData(response);
+          if (!this.csrfToken()) {
+            throw new OrionplaceApiError('failed');
+          }
+        })
+        .finally(() => {
+          this.renewal = undefined;
+        });
+    }
+    await this.renewal;
+  }
+
+  private send(
+    path: string,
+    method: TMethod,
+    data: OrionplaceApiData,
+    signal?: AbortSignal,
+    locale = '',
+  ) {
+    const headers: Record<string, string> = {
+      Accept: 'application/json',
+      ...(data instanceof FormData
+        ? {}
+        : { 'Content-Type': 'application/json' }),
+    };
+    const token                           = this.csrfToken();
+    if (token) {
+      headers['X-CSRFToken'] = token;
+    }
+    return this.transport(this.localizedPath(path, locale), {
+      method,
+      data,
+      headers,
+      signal,
+    });
+  }
+
+  private successData<T>(response: OrionplaceApiResponse): T {
+    const body = response.body as {
+      form_errors?: unknown;
+      success_message?: unknown;
+      page_data?: T;
+    } | null;
+    if (
+      response.status < 200 ||
+      response.status >= 300 ||
+      body?.form_errors !== null ||
+      typeof body.success_message !== 'string' ||
+      !body.success_message
+    ) {
+      const fields = Object.fromEntries(
+        Object.entries(body?.form_errors ?? {}).map(([name, entries]) => [
+          name,
+          Array.isArray(entries)
+            ? entries.map((entry) => String(entry?.message ?? '')).join(' ')
+            : '',
+        ]),
+      );
+      const codes  = Object.values(body?.form_errors ?? {})
+        .flatMap((entries) => (Array.isArray(entries) ? entries : []))
+        .map((entry) => String(entry?.code ?? ''))
+        .filter(Boolean);
+      throw new OrionplaceApiError(
+        'failed',
+        fields,
+        response.status,
+        body?.page_data,
+        codes,
+      );
+    }
+    return body.page_data as T;
+  }
+}

package/templates/lib/orionplace/appLoadClient.ts

@@ -1,33 +1,75 @@
-import { AppLoadError, appLoadResult, inspectAppLoad } from './appLoadResult';
-import type { AppLoadRequest, AppLoadResult } from '../../interfaces/orionplace/transport';
+import {
+  AppLoadError,
+  appLoadResult,
+  inspectAppLoad,
+} from '@/lib/orionplace/appLoadResult';
+import type {
+  AppLoadRequest,
+  AppLoadResult,
+} from '@/interfaces/orionplace/transport';
+import { APP_ORIGIN, nativeAppRequest } from '@/lib/orionplace/nativeApp';
 
 function withTimeout(signal: AbortSignal, milliseconds: number): AbortSignal {
-  if (typeof AbortSignal.any !== 'function') return signal;
+  if (typeof AbortSignal.any !== 'function') {
+    return signal;
+  }
   return AbortSignal.any([signal, AbortSignal.timeout(milliseconds)]);
 }
 
 /**
  * Browser transport for explicit initialize and refresh actions. The browser
- * sends and stores session cookies itself through the same-origin gateway.
+ * sends and stores session cookies itself through the same-origin gateway;
+ * the Android app sends the request to its storefront (nativeApp.ts).
  */
-export async function requestBrowserAppLoad(signal: AbortSignal): Promise<AppLoadResult> {
-  let response: Response;
+export async function requestBrowserAppLoad(
+  signal: AbortSignal,
+  locale = '',
+): Promise<AppLoadResult> {
+  const path        = locale
+    ? `/api/appload?lang=${encodeURIComponent(locale)}`
+    : '/api/appload';
+  const headers     = {
+    Accept: 'application/json',
+    'Content-Type': 'application/json',
+  };
+  const request     = {
+    detalize_mode: 'light',
+    ignore_cache: false,
+  } satisfies AppLoadRequest;
+  let status: number;
+  let body: unknown = null;
   try {
-    response = await fetch('/api/appload', {
-      method: 'POST',
-      headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' },
-      body: JSON.stringify({ detalize_mode: 'light', ignore_cache: true } satisfies AppLoadRequest),
-      credentials: 'same-origin',
-      cache: 'no-store',
-      signal: withTimeout(signal, 35_000),
-    });
+    if (APP_ORIGIN) {
+      const response = await nativeAppRequest(APP_ORIGIN, path, {
+        method: 'POST',
+        headers,
+        data: request,
+        signal: withTimeout(signal, 35_000),
+      });
+      status         = response.status;
+      body           = response.body;
+    } else {
+      const response = await fetch(path, {
+        method: 'POST',
+        headers,
+        body: JSON.stringify(request),
+        credentials: 'same-origin',
+        cache: 'no-store',
+        signal: withTimeout(signal, 35_000),
+      });
+      status         = response.status;
+      body           = await response.json().catch(() => null);
+    }
   } catch {
-    throw new AppLoadError('Could not reach the marketplace API.', { kind: 'network', httpStatus: null, fields: [] });
+    throw new AppLoadError('Could not reach the marketplace API.', {
+      kind: 'network',
+      httpStatus: null,
+      fields: [],
+    });
   }
-  let body: unknown = null;
-  try { body = await response.json(); }
-  catch { body = null; }
-  const failure = inspectAppLoad(body, response.status);
-  if (failure) throw new AppLoadError('Marketplace initialization failed.', failure);
-  return appLoadResult(body, response.status);
+  const failure     = inspectAppLoad(body, status);
+  if (failure) {
+    throw new AppLoadError('Marketplace initialization failed.', failure);
+  }
+  return appLoadResult(body, status);
 }

package/templates/lib/orionplace/appLoadResult.ts

@@ -1,32 +1,72 @@
-import type { AppLoadFailure, AppLoadResponse, AppLoadResult } from '../../interfaces/orionplace/transport';
+import type {
+  AppLoadFailure,
+  AppLoadResponse,
+  AppLoadResult,
+} from '@/interfaces/orionplace/transport';
 
 const record = (value: unknown): value is Record<string, unknown> =>
   value !== null && typeof value === 'object' && !Array.isArray(value);
 
 /** Validate the bootstrap boundary. Interfaces describe nested data, not a runtime schema. */
-export function inspectAppLoad(body: unknown, httpStatus: number): AppLoadFailure | null {
-  if (httpStatus < 200 || httpStatus >= 300) return { kind: 'http', httpStatus, fields: [] };
-  if (record(body) && record(body.form_errors) && Object.keys(body.form_errors).length) {
-    return { kind: 'validation', httpStatus, fields: Object.keys(body.form_errors) };
+export function inspectAppLoad(
+  body: unknown,
+  httpStatus: number,
+): AppLoadFailure | null {
+  if (httpStatus < 200 || httpStatus >= 300) {
+    return { kind: 'http', httpStatus, fields: [] };
   }
-  const page   = record(body) && body.page_data;
-  const init   = record(page) && page.init;
+  if (
+    record(body) &&
+    record(body.form_errors) &&
+    Object.keys(body.form_errors).length
+  ) {
+    return {
+      kind: 'validation',
+      httpStatus,
+      fields: Object.keys(body.form_errors),
+    };
+  }
+  const page = record(body) && body.page_data;
+  const init = record(page) && page.init;
   const unauth = record(page) && page.unauth;
-  if (!record(body) || !('form_errors' in body) || (body.form_errors !== null && !record(body.form_errors)) ||
-      !record(init) || typeof init.is_authenticated !== 'boolean' ||
-      !record(init.locale) || !record(init.currencies) || !record(unauth) || !record(unauth.paths) ||
-      Object.values(unauth.paths).some(group => !record(group) || Object.values(group).some(endpoint =>
-        !record(endpoint) || typeof endpoint.target !== 'string' || !Array.isArray(endpoint.methods)))) {
+  if (
+    !record(body) ||
+    !('form_errors' in body) ||
+    (body.form_errors !== null && !record(body.form_errors)) ||
+    !record(init) ||
+    typeof init.is_authenticated !== 'boolean' ||
+    !record(init.locale) ||
+    !record(init.currencies) ||
+    !record(unauth) ||
+    !record(unauth.paths) ||
+    Object.values(unauth.paths).some(
+      (group) =>
+        !record(group) ||
+        Object.values(group).some(
+          (endpoint) =>
+            !record(endpoint) ||
+            typeof endpoint.target !== 'string' ||
+            !Array.isArray(endpoint.methods),
+        ),
+    )
+  ) {
     return { kind: 'invalid-response', httpStatus, fields: [] };
   }
   return null;
 }
 
-export function appLoadResult(body: unknown, httpStatus: number): AppLoadResult {
+export function appLoadResult(
+  body: unknown,
+  httpStatus: number,
+): AppLoadResult {
   const failure = inspectAppLoad(body, httpStatus);
-  if (failure) throw new Error(`AppLoad: ${failure.kind}`);
+  if (failure) {
+    throw new Error(`AppLoad: ${failure.kind}`);
+  }
   return {
-    response: body as AppLoadResponse & { page_data: NonNullable<AppLoadResponse['page_data']> },
+    response: body as AppLoadResponse & {
+      page_data: NonNullable<AppLoadResponse['page_data']>;
+    },
     httpStatus,
     loadedAt: new Date().toISOString(),
   };
@@ -34,14 +74,28 @@ export function appLoadResult(body: unknown, httpStatus: number): AppLoadResult
 
 /** Transport and envelope failures reach the store as this sanitized shape. */
 export function appLoadFailure(error: unknown): AppLoadFailure {
-  const detail = error && typeof error === 'object' && 'data' in error ? (error as { data: unknown }).data : null;
-  const known  = record(detail) && 'kind' in detail &&
-    ['http', 'validation', 'invalid-response', 'network'].includes(String(detail.kind));
-  if (!known || !record(detail)) return { kind: 'network', httpStatus: null, fields: [] };
+  const detail =
+    error && typeof error === 'object' && 'data' in error
+      ? (error as { data: unknown }).data
+      : null;
+  const known =
+    record(detail) &&
+    'kind' in detail &&
+    ['http', 'validation', 'invalid-response', 'network'].includes(
+      String(detail.kind),
+    );
+  if (!known || !record(detail)) {
+    return { kind: 'network', httpStatus: null, fields: [] };
+  }
   return {
     kind: detail.kind as AppLoadFailure['kind'],
-    httpStatus: typeof detail.httpStatus === 'number' ? detail.httpStatus : null,
-    fields: Array.isArray(detail.fields) ? detail.fields.filter((field): field is string => typeof field === 'string') : [],
+    httpStatus:
+      typeof detail.httpStatus === 'number' ? detail.httpStatus : null,
+    fields: Array.isArray(detail.fields)
+      ? detail.fields.filter(
+          (field): field is string => typeof field === 'string',
+        )
+      : [],
   };
 }
 

package/templates/lib/orionplace/appLoadServer.ts

@@ -1,8 +1,12 @@
 import { cache } from 'react';
 import { headers } from 'next/headers';
-import { forwardMarketplace } from '__ORIONPLACE_RUNTIME__';
-import { appLoadResult, inspectAppLoad } from './appLoadResult';
-import type { AppLoadFailure, AppLoadRequest, AppLoadResult } from '../../interfaces/orionplace/transport';
+import { forwardMarketplace } from '@orionplace-runtime/marketplace.mjs';
+import { appLoadResult, inspectAppLoad } from '@/lib/orionplace/appLoadResult';
+import type {
+  AppLoadFailure,
+  AppLoadRequest,
+  AppLoadResult,
+} from '@/interfaces/orionplace/transport';
 
 /** Server-side bootstrap. Never import this module from a client component. */
 export interface ServerAppLoad {
@@ -13,20 +17,41 @@ export interface ServerAppLoad {
 }
 
 /** Headers a server render forwards to the marketplace gateway. */
-const FORWARDED = [
-  'cookie', '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 FORWARDED                   = [
+  'cookie',
+  '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',
 ];
 
 async function buildRequest(signal: AbortSignal): Promise<Request> {
   const incoming = await headers();
-  const host     = incoming.get('x-forwarded-host') || incoming.get('host') || 'localhost';
-  const protocol = incoming.get('x-forwarded-proto')?.split(',')[0]?.trim() || 'https';
+  const host     =
+    incoming.get('x-forwarded-host') || incoming.get('host') || 'localhost';
+  const protocol =
+    incoming.get('x-forwarded-proto')?.split(',')[0]?.trim() || 'https';
   const url      = new URL('/api/appload', `${protocol}://${host}`);
+  const pageUrl  = new URL(
+    incoming.get('x-orionplace-page-url') || '/',
+    url.origin,
+  );
+  const locale   = pageUrl.searchParams.get('locale');
+  if (locale) {
+    url.searchParams.set('lang', locale);
+  }
   const forward  = new Headers();
   for (const name of FORWARDED) {
     const value = incoming.get(name);
-    if (value) forward.set(name, value);
+    if (value) {
+      forward.set(name, value);
+    }
   }
   forward.set('accept', 'application/json');
   forward.set('content-type', 'application/json');
@@ -35,7 +60,10 @@ async function buildRequest(signal: AbortSignal): Promise<Request> {
   return new Request(url, {
     method: 'POST',
     headers: forward,
-    body: JSON.stringify({ detalize_mode: 'light', ignore_cache: true } satisfies AppLoadRequest),
+    body: JSON.stringify({
+      detalize_mode: 'light',
+      ignore_cache: false,
+    } satisfies AppLoadRequest),
     signal,
   });
 }
@@ -44,24 +72,39 @@ async function buildRequest(signal: AbortSignal): Promise<Request> {
  * Calls the same gateway the browser uses, in process, with this request's domain
  * and session. It never throws: the failure is stored for the interface to handle.
  */
-export async function requestAppLoad(signal?: AbortSignal): Promise<ServerAppLoad> {
-  const timeout  = AbortSignal.timeout(35_000);
-  const combined = signal ? AbortSignal.any([signal, timeout]) : timeout;
+export async function requestAppLoad(
+  signal?: AbortSignal,
+): Promise<ServerAppLoad> {
+  const timeout     = AbortSignal.timeout(35_000);
+  const combined    = signal ? AbortSignal.any([signal, timeout]) : timeout;
   let response: Response;
   try {
     response = await forwardMarketplace(await buildRequest(combined), {
       mimicFrontDomain: process.env.MIMIC_FRONT_DOMAIN ?? '',
     });
   } catch {
-    return { result: null, failure: { kind: 'network', httpStatus: null, fields: [] }, cookies: [] };
+    return {
+      result: null,
+      failure: { kind: 'network', httpStatus: null, fields: [] },
+      cookies: [],
+    };
   }
-  const cookies = response.headers.getSetCookie();
+  const cookies     = response.headers.getSetCookie();
   let body: unknown = null;
-  try { body = await response.json(); }
-  catch { body = null; }
-  const failure = inspectAppLoad(body, response.status);
-  if (failure) return { result: null, failure, cookies };
-  return { result: appLoadResult(body, response.status), failure: null, cookies };
+  try {
+    body = await response.json();
+  } catch {
+    body = null;
+  }
+  const failure     = inspectAppLoad(body, response.status);
+  if (failure) {
+    return { result: null, failure, cookies };
+  }
+  return {
+    result: appLoadResult(body, response.status),
+    failure: null,
+    cookies,
+  };
 }
 
 /**
@@ -69,4 +112,6 @@ export async function requestAppLoad(signal?: AbortSignal): Promise<ServerAppLoa
  * that awaits it. Reading it in a layout initializes the marketplace before the
  * page renders; it never opens an authentication prompt.
  */
-export const getOrionplaceAppLoad = cache((): Promise<ServerAppLoad> => requestAppLoad());
+export const getOrionplaceAppLoad = cache((): Promise<ServerAppLoad> =>
+  requestAppLoad(),
+);