BootData and the settings response types

In plain words

Signature

interface BootData {
  store: Store;
  theme: Theme;
  currencies: Record<string, CurrencyConfig>;
  languages: Record<string, LanguageConfig>;
  external_services: ExternalServices;
  headers: ResponseHeaders;
  login: LoginConfig;
  jitsu: JitsuConfig;
  affiliate: AffiliateConfig;
  swoole: string[];
  policy_url: string;
  debug: boolean;
  trace_console: boolean;
}

interface CurrencyConfig { code: string; name: string; symbol: string; amount: number; country_code: string }

interface LanguageConfig { name: string; code: string; url: string; is_rtl: boolean; country_code: string }

interface Language {                // an item of useTwilight().settings.languages
  name: string;  code: string;  iso_code?: string;
  url: string;                      // the flag image
  is_rtl: boolean;  country_code: string;
}

interface ResponseHeaders { 'S-Ray': number; 's-version-id': number; 's-scope-id': number; 's-scope-type': string }

interface LoginConfig {
  url: string;  turnstile_site_key: string;
  turnstile: { key: string; level: string };
  social: { google: boolean; facebook: boolean; apple: boolean; x: boolean };
}

interface JitsuConfig { host: string; key: string; events: string[]; context: { extra: { version: string; headers: string[] } } }

interface AffiliateConfig { utm_url: string; cta_enabled: boolean }

interface ExternalServices { [serviceName: string]: { services: Record<string, unknown> } }

Try it live

import { useTwilight } from '@salla.sa/twilight-theme-engine';
import type { Language } from '@salla.sa/twilight-theme-engine/types';

export function useLanguages(): Language[] {
  // An array here, converted from { AR: {...}, EN: {...} } with iso_code added.
  return useTwilight().settings.languages ?? [];
}

Example

import type { CurrencyConfig, Language } from '@salla.sa/twilight-theme-engine/types';
import { useTwilight } from '@salla.sa/twilight-theme-engine';

export function LocaleOptions() {
  const { settings } = useTwilight();
  const languages: Language[] = settings.languages ?? [];
  const currencies: CurrencyConfig[] = Object.values(settings.currencies ?? {});

  return (
    <div className="locale-options">
      <ul>
        {languages.map((language) => (
          <li key={language.code}>{language.name}</li>
        ))}
      </ul>
      <ul>
        {currencies.map((currency) => (
          <li key={currency.code}>
            {currency.code} {currency.symbol.trim()}
          </li>
        ))}
      </ul>
    </div>
  );
}

How it behaves

• store.settings() (@salla.sa/twilight-theme-engine/api/store) requests store/settings and returns StoreContext. It keeps store, theme, currencies, external_services, headers, login, affiliate and policy_url, converts languages, and drops jitsu, swoole, debug and trace_console. The live demo lists it key by key.

• languages arrives keyed by uppercase code ({ AR: {…}, EN: {…} }, each a LanguageConfig) and becomes an array of Language, each with iso_code copied from code, because the SDK's language picker reads iso_code.

• Language.url is the flag image (https://assets.salla.sa/images/flags/ar.svg), not a link to the store in that language.

• CurrencyConfig.amount is a conversion rate from the store currency: on the demo store, whose currency is SAR, AED has amount: 0.978296.

• No engine code imports BootData or its parts: they exist for code of yours that handles the raw response. StoreContext has its own page under Utilities.

Gotchas

• useTwilight().settings.debug and trace_console are always undefined: StoreContext declares both, but store.settings() never copies them from the response.

• ResponseHeaders requires s-scope-id and s-scope-type; the demo store's response carries only S-Ray and s-version-id.

• CurrencyConfig.symbol can carry spaces: AED is " د.إ" on the demo store. Trim it before placing it next to a number.

Related

Source and docs

• Engine source: packages/theme-engine/src/types/index.ts
• docs/07-data-types.md — Store Context