@spree/dashboard-core 1.0.0-rc.1 → 1.0.0-rc.3

package/src/components/mobile-top-bar.tsx

@@ -1,5 +1,6 @@
 import { SidebarTrigger, Skeleton } from '@spree/dashboard-ui'
 import { SearchIcon } from '@spree/dashboard-ui/icons'
+import type { ReactNode } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useOptionalCommandPalette } from '../hooks/use-command-palette'
 import { useOptionalStore } from '../providers/store-provider'
@@ -23,9 +24,12 @@ export function MobileTopBar({
   uiLocales = [],
   onEditProfile,
   title,
+  notifications,
 }: {
   uiLocales?: ReadonlyArray<{ code: string; name: string }>
   onEditProfile?: () => void
+  /** Shown before the account menu, such as a notifications bell. */
+  notifications?: ReactNode
   /** Name shown beside the controls. Defaults to the store's, for panels that have one. */
   title?: string
 } = {}) {
@@ -69,6 +73,8 @@ export function MobileTopBar({
         </button>
       )}
 
+      {notifications}
+
       <SidebarUser variant="bar" uiLocales={uiLocales} onEditProfile={onEditProfile} />
     </div>
   )

package/src/components/money.tsx

@@ -0,0 +1,23 @@
+import { useMoneyLocale } from '../hooks/use-money-locale'
+import { formatAmount } from '../lib/formatters'
+import { useOptionalStore } from '../providers/store-provider'
+
+/**
+ * An API amount shown in the admin's own number format. Without a currency it
+ * is shown in the store's default currency, for figures the API states in it
+ * (a customer's total spent); the seller panel, which mounts no store, always
+ * passes one.
+ */
+export function Money({
+  amount,
+  currency,
+  fallback,
+}: {
+  amount: string | null | undefined
+  currency?: string | null
+  fallback?: string
+}) {
+  const locale = useMoneyLocale()
+  const store = useOptionalStore()
+  return <>{formatAmount(amount, currency ?? store?.defaultCurrency, locale, fallback)}</>
+}

package/src/components/preferences-form.tsx

@@ -1,4 +1,10 @@
-import type { PreferenceField as PreferenceFieldDef } from '@spree/admin-sdk'
+import type { CurrencyCode } from '@spree/admin-sdk'
+import {
+  compareMoney,
+  isDecimalString,
+  type PreferencePropertySchema,
+  type PreferenceSchema,
+} from '@spree/admin-sdk'
 import {
   Button,
   Field,
@@ -6,6 +12,10 @@ import {
   FieldGroup,
   FieldLabel,
   Input,
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+  InputGroupText,
   SecretInput,
   Select,
   SelectContent,
@@ -18,29 +28,108 @@ import {
 import { PlusIcon, TrashIcon } from '@spree/dashboard-ui/icons'
 import { useId, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { useMoneyLocale } from '../hooks/use-money-locale'
+import { currencyParts } from '../lib/currency-parts'
+import { CountryCombobox, CountryMultiCombobox } from './country-combobox'
 import { CurrencySelect } from './currency-select'
 import { StoreDatePicker } from './store-date-picker'
 
+/**
+ * One setting of a {@link PreferenceSchema}, flattened into what a form
+ * needs to pick its widget.
+ */
+export interface PreferenceFieldDef {
+  key: string
+  /** `string`, `text`, `password`, `boolean`, `integer`, `decimal`, `date`, `datetime`, `array`, `hash` or `object`. */
+  type: string
+  /** The schema's `format` (`money`, `currency`, `iso-country`, …), on the value or, for a list, on its items. */
+  format?: string
+  default: unknown
+  choices?: string[]
+  /** Whether the setting may be left empty (it reads back as null). */
+  nullable: boolean
+  /** The property's own JSON Schema, for widgets that need more (list items, object properties). */
+  schema: PreferencePropertySchema
+}
+
+const DECIMAL_PATTERN = '^-?\\d+(\\.\\d+)?$'
+const DECIMAL_REGEX = new RegExp(DECIMAL_PATTERN)
+
+/**
+ * The schema with only the settings `keep` accepts — for a form that edits
+ * the others with a control of its own.
+ */
+export function filterPreferenceSchema(
+  schema: PreferenceSchema,
+  keep: (key: string, property: PreferencePropertySchema) => boolean,
+): PreferenceSchema {
+  return {
+    ...schema,
+    properties: Object.fromEntries(
+      Object.entries(schema.properties).filter(([key, property]) => keep(key, property)),
+    ),
+  }
+}
+
+function fieldType(property: PreferencePropertySchema): string {
+  if (property['x-spree-secret']) return 'password'
+  const type = (Array.isArray(property.type) ? property.type : [property.type]).find(
+    (t) => t && t !== 'null',
+  )
+  if (type === 'string') {
+    if (property.format === 'date') return 'date'
+    if (property.format === 'date-time') return 'datetime'
+    if (property.format === 'money') return 'money'
+    if (property.pattern === DECIMAL_PATTERN) return 'decimal'
+    if (property['x-spree-widget'] === 'textarea') return 'text'
+    return 'string'
+  }
+  if (type === 'object') return property.properties ? 'object' : 'hash'
+  return type ?? 'string'
+}
+
+/**
+ * Flattens a preference schema into the fields a form renders, in the order
+ * the type declares them.
+ */
+export function preferenceFields(
+  schema: PreferenceSchema | null | undefined,
+): PreferenceFieldDef[] {
+  return Object.entries(schema?.properties ?? {}).map(([key, property]) => ({
+    key,
+    type: fieldType(property),
+    format: property.format ?? property.items?.format,
+    default: property.default ?? null,
+    choices: property.enum?.filter((choice): choice is string => typeof choice === 'string'),
+    nullable: Array.isArray(property.type) && property.type.includes('null'),
+    schema: property,
+  }))
+}
+
 /**
  * Hydrates a `preferences` hash with each field's default. Used to seed
  * create-mode forms when the user picks a provider/calculator so the
  * `<PreferencesForm>` shows sensible starting values instead of blanks.
  *
- * `:password` fields are always skipped — the server returns their
- * defaults as `null`, and even when it doesn't, autofilling a password
- * field is hostile UX. `contextDefaults` fills schema-declared keys whose
- * own default is null/undefined — used by callers that know about runtime
+ * Secrets are always skipped — the schema never carries their defaults, and
+ * autofilling a password field is hostile UX. `contextDefaults` fills keys
+ * whose own default is absent — used by callers that know about runtime
  * context the schema can't express (e.g. the store's default currency).
  */
 export function defaultPreferences(
-  schema: PreferenceFieldDef[],
+  schema: PreferenceSchema | null | undefined,
   contextDefaults: Record<string, unknown> = {},
 ): Record<string, unknown> {
   const out: Record<string, unknown> = {}
-  for (const field of schema) {
+  for (const field of preferenceFields(schema)) {
     if (field.type === 'password') continue
     if (field.default !== null && field.default !== undefined) {
-      out[field.key] = field.default
+      // A decimal default declared as a Ruby integer arrives as a JSON number,
+      // and the API refuses money sent back that way.
+      out[field.key] =
+        (field.type === 'decimal' || field.type === 'money') && typeof field.default === 'number'
+          ? String(field.default)
+          : field.default
       continue
     }
     const ctx = contextDefaults[field.key]
@@ -50,7 +139,7 @@ export function defaultPreferences(
 }
 
 interface PreferencesFormProps {
-  schema: PreferenceFieldDef[]
+  schema: PreferenceSchema | null | undefined
   values: Record<string, unknown>
   onChange: (next: Record<string, unknown>) => void
   /** When true, replaces sensitive `password`-typed fields with a stub label. */
@@ -64,7 +153,7 @@ interface PreferencesFormProps {
    * would let a currency the store does not trade in be saved, and a
    * calculator set to one quotes no rate at all.
    */
-  currencyOptions?: string[]
+  currencyOptions?: readonly CurrencyCode[]
   /**
    * Render date/datetime pickers inline instead of in a Popover portal.
    * Set this when the form is inside a `<Sheet>` — Base UI's Popover fails
@@ -74,16 +163,16 @@ interface PreferencesFormProps {
 }
 
 /**
- * Renders a generic configuration form from a `preference_schema` payload.
+ * Renders a generic configuration form from a type's preference schema.
  * Used by the Payment Methods edit sheet and the Promotion editor's action
  * and rule cards — anywhere we let admins tune a STI subclass's settings
  * without hard-coding a per-subclass form.
  *
  * The schema itself is the source of truth; this component intentionally
  * stays "dumb" — server-side validation surfaces errors back via the
- * mutation hook's error handling. Booleans are switches, strings are
- * inputs, integers/decimals get number inputs, and unknown types fall
- * back to a plain text input.
+ * mutation hook's error handling. The widget follows the schema: booleans
+ * are switches, currencies and countries pickers, amounts number inputs
+ * that send the exact decimal string, and anything else a text input.
  */
 export function PreferencesForm({
   schema,
@@ -94,7 +183,8 @@ export function PreferencesForm({
   currencyOptions,
   inlineDatePickers,
 }: PreferencesFormProps) {
-  if (!schema?.length) return null
+  const fields = useMemo(() => preferenceFields(schema), [schema])
+  if (!fields.length) return null
 
   function setValue(key: string, value: unknown) {
     if (Object.is(values[key], value)) return
@@ -103,7 +193,7 @@ export function PreferencesForm({
 
   return (
     <FieldGroup>
-      {schema.map((field) => (
+      {fields.map((field) => (
         <PreferenceField
           key={field.key}
           field={field}
@@ -113,6 +203,7 @@ export function PreferencesForm({
           redactPasswords={redactPasswords}
           currencyOptions={currencyOptions}
           inlineDatePickers={inlineDatePickers}
+          currency={typeof values.currency === 'string' ? values.currency : undefined}
         />
       ))}
     </FieldGroup>
@@ -125,8 +216,10 @@ interface PreferenceFieldProps {
   label?: string
   onChange: (value: unknown) => void
   redactPasswords?: boolean
-  currencyOptions?: string[]
+  currencyOptions?: readonly CurrencyCode[]
   inlineDatePickers?: boolean
+  /** The currency a money preference is in, when the record names one. */
+  currency?: string
 }
 
 export function PreferenceField({
@@ -137,8 +230,10 @@ export function PreferenceField({
   redactPasswords,
   currencyOptions,
   inlineDatePickers,
+  currency,
 }: PreferenceFieldProps) {
   const { t, i18n } = useTranslation()
+  const moneyLocale = useMoneyLocale()
   const id = `preference-${field.key}`
   // Localize the field label from the preference key when no explicit
   // override is given, falling back to a humanized key for custom/extension
@@ -152,10 +247,9 @@ export function PreferenceField({
   const descriptionKey = `${preferenceKey}_description`
   const description = i18n.exists(descriptionKey) ? t(descriptionKey) : undefined
 
-  // Currency-typed preferences (`currency`, `default_currency`,
-  // `display_currency`, …) get the store's CurrencySelect — same
-  // localized `CODE — Full Name` rendering as the rest of admin.
-  if (isCurrencyKey(field.key)) {
+  // Currencies get the store's CurrencySelect — same localized
+  // `CODE — Full Name` rendering as the rest of admin.
+  if (field.type === 'string' && field.format === 'currency') {
     return (
       <Field>
         <FieldLabel htmlFor={id}>{displayLabel}</FieldLabel>
@@ -169,11 +263,33 @@ export function PreferenceField({
     )
   }
 
-  // `tiers` preference (Spree::Calculator::TieredPercent /
-  // TieredFlatRate) — a list of `{ threshold, value }` objects that the
-  // default array input would render as `[object Object]`. Render a row
-  // editor so the merchant can add tier breakpoints directly.
-  if (field.key === 'tiers') {
+  if (field.type === 'string' && field.format === 'iso-country') {
+    return (
+      <Field>
+        <FieldLabel htmlFor={id}>{displayLabel}</FieldLabel>
+        <CountryCombobox id={id} value={(value as string) ?? null} onValueChange={onChange} />
+      </Field>
+    )
+  }
+
+  if (field.type === 'array' && field.format === 'iso-country') {
+    return (
+      <Field>
+        <FieldLabel>{displayLabel}</FieldLabel>
+        <CountryMultiCombobox
+          value={Array.isArray(value) ? (value as string[]) : []}
+          onValueChange={onChange}
+        />
+      </Field>
+    )
+  }
+
+  // A tier ladder (the tiered calculators) — a list of
+  // `{ threshold, value }` objects that the default array input would render
+  // as `[object Object]`. Render a row editor so the merchant can add tier
+  // breakpoints directly.
+  const itemProperties = field.schema.items?.properties
+  if (field.type === 'array' && itemProperties?.threshold && itemProperties?.value) {
     return <TiersEditor value={value} onChange={onChange} />
   }
 
@@ -223,27 +339,52 @@ export function PreferenceField({
         </Field>
       )
 
+    case 'money':
+      return (
+        <Field>
+          <FieldLabel htmlFor={id}>{displayLabel}</FieldLabel>
+          <InputGroup>
+            {currency && (
+              <InputGroupAddon>
+                <InputGroupText>{currencyParts(currency, moneyLocale).symbol}</InputGroupText>
+              </InputGroupAddon>
+            )}
+            <InputGroupInput
+              id={id}
+              type="number"
+              step="any"
+              placeholder={
+                field.nullable ? t('admin.components.preferences_form.unlimited') : undefined
+              }
+              value={value === null || value === undefined ? '' : String(value)}
+              onChange={(e) => {
+                const raw = e.target.value
+                if (raw === '') return onChange(null)
+                // The API refuses money sent as a JSON number.
+                onChange(isDecimalString(raw) ? raw : null)
+              }}
+            />
+          </InputGroup>
+          {description && <FieldDescription>{description}</FieldDescription>}
+        </Field>
+      )
+
     case 'integer':
     case 'decimal':
       return (
         <Field>
           <FieldLabel htmlFor={id}>{displayLabel}</FieldLabel>
-          <Input
+          <NumberPreferenceInput
             id={id}
-            type="number"
-            step={field.type === 'integer' ? 1 : 'any'}
-            // An empty upper-bound field means "no limit" — surface that
+            integer={field.type === 'integer'}
+            nullable={!!field.nullable}
+            // An empty optional field means "no limit" — surface that
             // rather than leaving it looking like a required blank.
             placeholder={
-              isMaxKey(field.key) ? t('admin.components.preferences_form.unlimited') : undefined
+              field.nullable ? t('admin.components.preferences_form.unlimited') : undefined
             }
-            value={value === null || value === undefined ? '' : String(value)}
-            onChange={(e) => {
-              const raw = e.target.value
-              if (raw === '') return onChange(null)
-              const parsed = field.type === 'integer' ? parseInt(raw, 10) : parseFloat(raw)
-              onChange(Number.isNaN(parsed) ? null : parsed)
-            }}
+            value={value}
+            onChange={onChange}
           />
         </Field>
       )
@@ -336,6 +477,69 @@ export function PreferenceField({
   }
 }
 
+/**
+ * A number setting. Keeps what is typed locally and passes on only values the
+ * server accepts: decimals as exact strings (`.5` becomes `0.5`), integers as
+ * numbers, and an empty field as `null` only when the setting may be unset —
+ * a required one keeps its last value until a number is typed.
+ */
+function NumberPreferenceInput({
+  id,
+  integer,
+  nullable,
+  placeholder,
+  value,
+  onChange,
+}: {
+  id: string
+  integer: boolean
+  nullable: boolean
+  placeholder?: string
+  value: unknown
+  onChange: (value: unknown) => void
+}) {
+  const external = value === null || value === undefined ? '' : String(value)
+  const [text, setText] = useState(external)
+  const [lastExternal, setLastExternal] = useState(external)
+  if (external !== lastExternal) {
+    setLastExternal(external)
+    setText(external)
+  }
+
+  function commit(raw: string) {
+    setText(raw)
+    const trimmed = raw.trim()
+    if (trimmed === '') {
+      if (nullable) onChange(null)
+      return
+    }
+    const number = Number(trimmed)
+    if (!Number.isFinite(number)) return
+    if (integer) {
+      if (Number.isInteger(number)) onChange(number)
+      return
+    }
+    // `.5` or `1e-7` is a number the server would refuse as typed; send its
+    // plain decimal form.
+    onChange(
+      DECIMAL_REGEX.test(trimmed)
+        ? trimmed
+        : number.toLocaleString('en-US', { useGrouping: false, maximumFractionDigits: 20 }),
+    )
+  }
+
+  return (
+    <Input
+      id={id}
+      type="number"
+      step={integer ? 1 : 'any'}
+      placeholder={placeholder}
+      value={text}
+      onChange={(e) => commit(e.target.value)}
+    />
+  )
+}
+
 function humanizeKey(key: string): string {
   return key
     .split('_')
@@ -343,19 +547,6 @@ function humanizeKey(key: string): string {
     .join(' ')
 }
 
-function isCurrencyKey(key: string): boolean {
-  return key === 'currency' || key.endsWith('_currency')
-}
-
-// Upper-bound preferences (`max_quantity`, `max_uses`, `usage_max`,
-// `maximum_amount`, …) read "Unlimited" when left blank. Matched on the key
-// name because the wire schema doesn't carry a nullable flag — safe since the
-// placeholder only shows for an empty value, and an empty max legitimately
-// means no ceiling.
-function isMaxKey(key: string): boolean {
-  return /(?:^|_)max(?:imum)?(?:_|$)/.test(key)
-}
-
 interface TierValue {
   threshold: string
   value: string
@@ -516,5 +707,9 @@ function parseTiers(value: unknown, idPrefix: string): TierRowState[] {
       threshold: threshold === null || threshold === undefined ? '' : String(threshold),
       value: v === null || v === undefined ? '' : String(v),
     }))
-    .sort((a, b) => Number(a.threshold) - Number(b.threshold))
+    .sort((a, b) =>
+      isDecimalString(a.threshold) && isDecimalString(b.threshold)
+        ? compareMoney(a.threshold, b.threshold)
+        : 0,
+    )
 }

package/src/components/resource-table.tsx

@@ -56,6 +56,7 @@ import {
 import { createPortal } from 'react-dom'
 import { useTranslation } from 'react-i18next'
 import { z } from 'zod/v4'
+import { runtimeListParams } from '../api-client'
 import { useAuth } from '../hooks/use-auth'
 import { useVisualViewportOffset } from '../hooks/use-visual-viewport-offset'
 import { filtersToRansack } from '../lib/filters-to-ransack'
@@ -176,8 +177,11 @@ interface ResourceTableProps<T> {
    * `[webhookDeliveriesTableKey(endpointId)]`).
    */
   queryKey: string | readonly unknown[]
-  /** Function that calls the SDK to fetch data */
-  queryFn: (params: Record<string, unknown>) => Promise<{ data: T[]; meta: PaginationMeta }>
+  /**
+   * Function that calls the SDK to fetch data. Its params are built at runtime
+   * from the table's columns and filters, so any typed SDK list method fits.
+   */
+  queryFn: (params: never) => Promise<{ data: T[]; meta: PaginationMeta }>
   /** Current search params from the route */
   searchParams: ResourceSearch
   /** Title displayed in the toolbar header. Overrides the table definition's title. */
@@ -401,7 +405,7 @@ export function ResourceTable<T extends Record<string, any>>({
 
       Object.assign(params, filtersToRansack(filters as FilterRule[], allColumns))
 
-      return queryFn(params)
+      return queryFn(runtimeListParams(params))
     },
     enabled: !!token,
   })

package/src/hooks/use-display-name.ts

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next'
 /**
  * Resolves a code to its display name via `Intl.DisplayNames`, localized to a
  * given UI language. Returns `undefined` when the runtime lacks coverage so
- * callers can apply their own fallback (the API name, the raw code, etc.).
+ * callers can apply their own fallback (usually the raw code).
  *
  * Standalone (non-hook) variant for module-level use outside React.
  */
@@ -25,7 +25,7 @@ export function intlDisplayName(
  * type (`currency`, `language`, `region`, …), localized to the **admin UI
  * language** (`i18n.language`) — NOT the store's content locale — so names
  * match the rest of the dashboard chrome. Returns `undefined` on a miss; the
- * caller supplies the fallback (e.g. `?? code`, `?? country.name`).
+ * caller supplies the fallback (e.g. `?? code`).
  */
 export function useDisplayName(type: Intl.DisplayNamesType) {
   const { i18n: instance } = useTranslation()
@@ -37,6 +37,14 @@ export function useDisplayName(type: Intl.DisplayNamesType) {
     } catch {
       formatter = undefined
     }
-    return (code: string) => formatter?.of(code)
+    // `of` throws a RangeError for a malformed code (a legacy `english`), so
+    // such a code reads as unnamed rather than breaking the page.
+    return (code: string) => {
+      try {
+        return formatter?.of(code)
+      } catch {
+        return undefined
+      }
+    }
   }, [locale, type])
 }

package/src/hooks/use-file-upload.ts

@@ -0,0 +1,51 @@
+import { useMutation } from '@tanstack/react-query'
+import { getApiClient } from '../api-client'
+
+interface UploadResult {
+  signedId: string
+  previewUrl: string
+}
+
+// Active Storage's Disk service issues an absolute URL against the Rails
+// origin (e.g. http://localhost:3000/rails/active_storage/disk/...). In dev the
+// SPA runs on a different port and that controller doesn't speak CORS, so the
+// browser blocks the cross-origin PUT before any response ("Failed to fetch").
+// When the URL points at a `/rails/active_storage/` path we drop the host so
+// the request goes through Vite's `/rails` proxy and stays same-origin.
+// Production storage URLs are untouched.
+function sameOriginIfRailsDisk(url: string): string {
+  try {
+    const parsed = new URL(url)
+    if (parsed.pathname.startsWith('/rails/active_storage/')) {
+      return parsed.pathname + parsed.search
+    }
+    return url
+  } catch {
+    return url
+  }
+}
+
+interface FileUploadOptions {
+  /**
+   * `private` for files only ever served through an authorized link
+   * (documents, imports, digital products). Attaching a file never moves it
+   * between storage services, so this has to be decided up front.
+   */
+  visibility?: 'public' | 'private'
+}
+
+export function useFileUpload(options: FileUploadOptions = {}) {
+  return useMutation({
+    mutationFn: async (file: File): Promise<UploadResult> => {
+      const uploadFile = getApiClient().uploadFile
+      if (!uploadFile) throw new Error('This panel cannot upload files.')
+
+      const { signed_id } = await uploadFile(file, {
+        visibility: options.visibility ?? 'public',
+        resolveUploadUrl: sameOriginIfRailsDisk,
+      })
+
+      return { signedId: signed_id, previewUrl: URL.createObjectURL(file) }
+    },
+  })
+}

package/src/hooks/use-import.ts

@@ -90,12 +90,12 @@ function imports() {
 /** Create-time parameters beyond the ones every import shares. */
 export type ImportCreateExtras = Omit<
   PanelImportCreateParams,
-  'type' | 'attachment' | 'preferred_delimiter' | 'results_url'
+  'type' | 'attachment_signed_id' | 'delimiter' | 'results_url'
 >
 
 export interface CreateImportInput {
   type: string
-  /** Signed blob id of the already direct-uploaded CSV (see `FileUploadField`). */
+  /** The `signed_id` of the already uploaded CSV (see `FileUploadField`). */
   signedId: string
   preferredDelimiter?: PanelImportDelimiter
   /**
@@ -111,7 +111,7 @@ export interface CreateImportInput {
 }
 
 /**
- * Creates the import from a direct-uploaded CSV; the response is in the
+ * Creates the import from an uploaded CSV; the response is in the
  * `mapping` state and carries the mapping payload.
  */
 export function useCreateImport() {
@@ -128,8 +128,8 @@ export function useCreateImport() {
       imports().create({
         ...params,
         type,
-        attachment: signedId,
-        preferred_delimiter: preferredDelimiter,
+        attachment_signed_id: signedId,
+        delimiter: preferredDelimiter,
         // The import-done email deep-links back to the wizard (`?import=<id>`
         // appended server-side). Only honored when this origin is on the
         // store's allowed-origins list.

package/src/hooks/use-money-locale.ts

@@ -0,0 +1,14 @@
+import { useTranslation } from 'react-i18next'
+
+/**
+ * The locale money is shown and typed in: the dashboard language of the person
+ * using it, whatever the currency or market. Someone who writes `1.234,56`
+ * types that for dollars too, and the field reads it back the same way it
+ * displayed it. The API only ever receives canonical `"1234.56"`.
+ *
+ * @returns a BCP 47 locale such as `de` or `en`
+ */
+export function useMoneyLocale(): string {
+  const { i18n } = useTranslation()
+  return i18n.language || 'en'
+}