Request class

import { readCookieNow } from '@/functions/api/cookieNow';
import type { NuxtApp } from 'nuxt/app';
import SetCookieParser from 'set-cookie-parser';
import type { IFetch } from '@/interfaces/apiBase/IFetch.ts';
import type { TMethod } from '@/interfaces/apiBase/TMethod.ts';
import { getConditionalURL } from '@/functions/api/url.ts';
import { useCommonStore } from '@/stores/commonStore.ts';
import { findLiveApiEndpoint } from '@/functions/api/findLiveApiEndpoint';
import { useAppLoadStore } from '@/stores/apploadStore';

// Documentation pages read the demo storefront: the same name as DEMO_DATA_HEADER in applicationLoadBoundary.ts.
const DEMO_DATA_HEADER = 'X-Orionplace-Demo-Data';

// Browser requests that show the top loading bar and have not finished yet.
let indicatorRequests = 0;

export class API<T = {}> {
  private method?: TMethod;
  private initialURL: string;
  private lastURL?: string;
  private body: Record<string, any> | FormData | null             = null;
  private headers: Record<string, string | undefined> | undefined = undefined;

  private addLangToQuery: boolean | string                        = true;
  private useExactURL                                             = false;
  private showLoadingIndicator                                    = true;

  constructor(url: string, method?: TMethod | string) {
    this.method     = method as TMethod;
    this.initialURL = url;
  }

  public static fromName<T = {}>(name: string) {
    const endpoint = findLiveApiEndpoint(useAppLoadStore().state, name)?.path;
    if (!endpoint?.target || !endpoint.methods[0]) {
      return undefined;
    }

    const url      = `/${endpoint.target.replace(/^\/+/, '')}`;
    return new API<T>(url, endpoint.methods[0]).shouldUseExactURL();
  }

  public setBody(body: Record<string, any> | FormData = {}) {
    this.body = body;
    return this;
  }

  public setHeaders(
    addHeaders: Record<string, string | undefined> | undefined = undefined,
  ) {
    this.headers = addHeaders;
    return this;
  }

  public getURL() {
    return this.initialURL;
  }

  public getLastURL() {
    return this.lastURL ?? this.initialURL;
  }

  public setURL(url: string) {
    this.lastURL = url;
    return this;
  }

  public changeURL(fn: (currentURL: string) => string) {
    return this.setURL(fn(this.initialURL));
  }

  public setPathParam(param: string, value: string | number) {
    const url = this.getLastURL();

    return this.setURL(url.replace('{' + param + '}', String(value)));
  }

  public setPathParams(params: Record<string, string>) {
    Object.entries(params).forEach(([key, value]) =>
      this.setPathParam(key, value),
    );
    return this;
  }

  public shouldAddLangToQuery(lang: boolean | string = true) {
    this.addLangToQuery = lang;
    return this;
  }

  public shouldUseExactURL(should: boolean = true) {
    this.useExactURL = should;
    return this;
  }

  public shouldShowLoadingIndicator(should: boolean = true) {
    this.showLoadingIndicator = should;
    return this;
  }

  public async fetch<T2 extends T>(
    _body?: Record<string, any> | FormData,
    options: { signal?: AbortSignal; timeout?: number; retry?: number } = {},
  ) {
    const nuxt        = useNuxtApp();
    const pinia       = nuxt.$pinia as import('pinia').Pinia;
    const commonStore = !nuxt.ssrContext ? useCommonStore(pinia) : null;

    const headers     = this.getDefaultHeaders(nuxt);
    const URL         = this.useExactURL
      ? (this.lastURL ?? this.initialURL)
      : getConditionalURL(this.lastURL ?? this.initialURL, this.addLangToQuery);
    try {
      if (commonStore && this.showLoadingIndicator) {
        indicatorRequests          += 1;
        commonStore.isGlobalLoading = true;
      }

      const result                     = await $fetch.raw<IFetch<T2>>(URL, {
        body: _body ?? this.body,
        method: this.method ?? 'POST',
        headers: headers,
        credentials: 'include',
        signal: options.signal,
        timeout: options.timeout,
        retry: options.retry,

        // Forward backend cookies through the SSR response.
        onResponse(ctx) {
          if (!import.meta.server) {
            return;
          }
          const raw     = ctx.response.headers.get('Set-Cookie');
          if (!raw) {
            return;
          }
          const cookies = SetCookieParser.parse(
            SetCookieParser.splitCookiesString(raw),
          );
          nuxt.runWithContext(() =>
            cookies.forEach((cookie) => {
              const dynamic = useCookie(cookie.name, cookie as any);
              dynamic.value = cookie.value;
            }),
          );
        },
        onResponseError(ctx) {
          // The server journal keeps failed backend calls; the browser already lists them in its Network tab.
          if (import.meta.server) console.error('[API] Response error', ctx.response?.status, ctx.request);
          if (ctx.response?.status === 453) {
            if (import.meta.client) {
              const message =
                ctx.response?._data?.form_errors?.__all__?.[0]?.message ??
                'Rate limit error';

              localStorage.setItem('453', message);
            }
          }
        },
      });

      let json: IFetch<T2> | undefined = undefined;
      try {
        json = result._data;
      } catch (e) {
        if (import.meta.server) console.error('[API/JSON]', e);
      }

      return {
        raw: result,
        page_data: json?.page_data,
        form_errors: json?.form_errors,
        success_message: json?.success_message ?? undefined,
        error: json?.form_errors
          ? (json.form_errors.__all__?.at(0)?.message ??
            Object.values(json.form_errors).at(0)?.at(0)?.message ??
            'Error')
          : undefined,
      };
    } catch (ex: any) {
      if (import.meta.server) console.error('[API] Request failed', URL, ex?.message ?? ex);
      // HTTP failures can still contain the backend response envelope.
      const json = ex?.data as IFetch<T2> | undefined;
      if (json?.page_data || json?.form_errors) {
        return {
          raw: ex?.response,
          page_data: json?.page_data,
          form_errors: json?.form_errors,
          success_message: json?.success_message ?? undefined,
          error: json?.form_errors
            ? (json.form_errors.__all__?.at(0)?.message ??
              Object.values(json.form_errors).at(0)?.at(0)?.message ??
              'Error')
            : undefined,
        };
      }
      return {
        raw: ex?.response,
        page_data: undefined,
        form_errors: undefined,
        success_message: undefined,
        error: (ex?.toString() || 'Error') as string,
      };
    } finally {
      // The bar stays while any request that shows it is still running, not until the first one ends.
      if (commonStore && this.showLoadingIndicator) {
        indicatorRequests           = Math.max(0, indicatorRequests - 1);
        commonStore.isGlobalLoading = indicatorRequests > 0;
      }
    }
  }

  protected getDefaultHeaders(nuxt: NuxtApp) {
    const headers = import.meta.server
      ? new Headers(useRequestEvent(nuxt)?.headers)
      : new Headers();

    if (this.headers) {
      Object.entries(this.headers).forEach(([headerName, headerValue]) => {
        headers.set(headerName, headerValue!);
      });
    }

    headers.set('X-CSRFToken', readCookieNow('csrftoken') ?? '');
    headers.set('Referer', useRequestURL().origin);
    headers.set('Origin', useRequestURL().origin);
    headers.set('X-TZ', Intl.DateTimeFormat().resolvedOptions().timeZone);
    // Documentation pages read the demo storefront (server/api/[...path].ts); a copied page request never decides it.
    headers.delete(DEMO_DATA_HEADER);
    if (useCommonStore(nuxt.$pinia as import('pinia').Pinia).apiScope === 'demo') {
      headers.set(DEMO_DATA_HEADER, '1');
    }

    // A server render's own call copies the visitor's request headers. A visitor who follows a link from
    // another site arrives with `Sec-Fetch-Site: cross-site`; the gateway's cross-site check would refuse the
    // render's Application Load and every page would answer 503. The call comes from this server.
    if (import.meta.server) {
      headers.set('sec-fetch-site', 'same-origin');
      headers.set('sec-fetch-mode', 'cors');
      headers.set('sec-fetch-dest', 'empty');
    }

    headers.delete('connection');
    return headers;
  }
}

export default function useAPI<T = {}>(url: string, method?: TMethod | string) {
  return new API<T>(url, method as TMethod);
}

import type { IAppLoad } from '@/interfaces/appBase/IAppLoad';
import type { IAppLoadPath } from '@/interfaces/appBase/appLoadCommon/IAppLoadCommonPath';

export function findLiveApiEndpoint(
  appLoad: IAppLoad | undefined,
  urlName: string,
): { section: 'auth' | 'unauth'; path: IAppLoadPath } | undefined {
  for (const section of ['auth', 'unauth'] as const) {
    const groups = Object.values(appLoad?.[section]?.paths ?? {});
    for (const group of groups) {
      const path = Object.values(group).find(
        (endpoint) => endpoint.url_name === urlName,
      );
      if (path) {
        return { section, path };
      }
    }
  }
}