@oxy.so/bloom 5.0.0 → 5.1.1

package/src/order-status/OrderStatusTimeline.tsx

@@ -3,11 +3,14 @@ import { View } from 'react-native';
 
 import { RiCheckLine } from '../icons/remix/RiCheckLine';
 import { RiCloseLine } from '../icons/remix/RiCloseLine';
+import { useCommonMessages } from '../locale/common-messages';
+import { useMessages } from '../locale/messages';
 import { useSurfaceFill } from '../styles/surface-levels';
 import { resolveAccentColors } from '../theme/accent-colors';
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
-import { ORDER_STATUS_GEOMETRY, ORDER_STATUS_STATE_LABELS, type OrderStatusGeometry } from './constants';
+import { ORDER_STATUS_GEOMETRY, type OrderStatusGeometry } from './constants';
+import { ORDER_STATUS_MESSAGES } from './messages';
 import { IS_WEB, resolveOrderStatusPaint } from './shared';
 import type { OrderStatusStep, OrderStatusStepState, OrderStatusTimelineProps } from './types';
 
@@ -111,16 +114,19 @@ function OrderStatusTimelineComponent({
   steps,
   orientation = 'vertical',
   density = 'comfortable',
-  accessibilityLabel = 'Status',
+  accessibilityLabel: accessibilityLabelProp,
   stateLabels,
   style,
   testID,
 }: OrderStatusTimelineProps) {
+  const common = useCommonMessages();
+  const { messages } = useMessages(ORDER_STATUS_MESSAGES);
+  const accessibilityLabel = accessibilityLabelProp ?? messages.status;
   const theme = useTheme();
   const surface = useSurfaceFill();
   const paint = useMemo(() => resolveOrderStatusPaint(theme, surface), [theme, surface]);
   const g = ORDER_STATUS_GEOMETRY[orientation][density];
-  const labels = { ...ORDER_STATUS_STATE_LABELS, ...stateLabels };
+  const labels = { done: common.done, ...messages.states, ...stateLabels };
 
   /** The colour of the rail leading INTO step `index`. */
   const segment = (index: number): string => {

package/src/order-status/constants.ts

@@ -1,12 +1,15 @@
+import { COMMON_MESSAGES } from '../locale/common-messages';
+import { ORDER_STATUS_MESSAGES } from './messages';
 import type { OrderStatusDensity, OrderStatusStepState } from './types';
 import type { TypeScaleVariant } from '../typography/scale';
 
-/** What a screen reader says for each state, before the step's own label. */
+/**
+ * What a screen reader says for each state, before the step's own label — in
+ * English. The timeline speaks the resolved locale's words.
+ */
 export const ORDER_STATUS_STATE_LABELS: Record<OrderStatusStepState, string> = {
-  done: 'Done',
-  current: 'In progress',
-  upcoming: 'Not yet',
-  failed: 'Failed',
+  done: COMMON_MESSAGES.en.done,
+  ...ORDER_STATUS_MESSAGES.en.states,
 };
 
 export interface OrderStatusGeometry {

package/src/order-status/messages.ts

@@ -0,0 +1,32 @@
+import type { MessageCatalog } from '../locale/messages';
+import type { OrderStatusStepState } from './types';
+
+/**
+ * Every fixed string the order-status family announces, in each Bloom
+ * language. `done` is the common word (`COMMON_MESSAGES.done`). A caller's
+ * `stateLabels` and `accessibilityLabel` still win.
+ */
+export interface OrderStatusMessages {
+  /** What a screen reader says for each state, before the step's own label. */
+  states: Record<Exclude<OrderStatusStepState, 'done'>, string>;
+  /** Names the timeline as a whole. */
+  status: string;
+}
+
+export const ORDER_STATUS_MESSAGES: MessageCatalog<OrderStatusMessages> = {
+  en: { states: { current: 'In progress', upcoming: 'Not yet', failed: 'Failed' }, status: 'Status' },
+  es: { states: { current: 'En curso', upcoming: 'Pendiente', failed: 'Fallido' }, status: 'Estado' },
+  ca: { states: { current: 'En curs', upcoming: 'Pendent', failed: 'Fallit' }, status: 'Estat' },
+  de: { states: { current: 'In Bearbeitung', upcoming: 'Ausstehend', failed: 'Fehlgeschlagen' }, status: 'Status' },
+  fr: { states: { current: 'En cours', upcoming: 'À venir', failed: 'Échec' }, status: 'Statut' },
+  it: { states: { current: 'In corso', upcoming: 'Non ancora', failed: 'Non riuscito' }, status: 'Stato' },
+  pt: { states: { current: 'Em andamento', upcoming: 'Pendente', failed: 'Falhou' }, status: 'Status' },
+  ru: { states: { current: 'В процессе', upcoming: 'Ещё не начато', failed: 'Ошибка' }, status: 'Статус' },
+  tr: { states: { current: 'Devam ediyor', upcoming: 'Henüz değil', failed: 'Başarısız' }, status: 'Durum' },
+  ja: { states: { current: '進行中', upcoming: '未着手', failed: '失敗' }, status: 'ステータス' },
+  zh: { states: { current: '进行中', upcoming: '未开始', failed: '失败' }, status: '状态' },
+  ar: { states: { current: 'قيد التنفيذ', upcoming: 'لم يبدأ بعد', failed: 'فشل' }, status: 'الحالة' },
+  hi: { states: { current: 'जारी है', upcoming: 'अभी नहीं', failed: 'विफल' }, status: 'स्थिति' },
+  bn: { states: { current: 'চলছে', upcoming: 'এখনও নয়', failed: 'ব্যর্থ' }, status: 'অবস্থা' },
+  id: { states: { current: 'Sedang berlangsung', upcoming: 'Belum', failed: 'Gagal' }, status: 'Status' },
+};

package/src/order-status/types.ts

@@ -62,11 +62,11 @@ export interface OrderStatusTimelineProps {
   orientation?: OrderStatusOrientation;
   /** Default `comfortable`. */
   density?: OrderStatusDensity;
-  /** Names the list as a whole. Default `"Status"`. */
+  /** Names the list as a whole (`"Status"` in English). */
   accessibilityLabel?: string;
   /**
    * What a screen reader announces for each state, before the step's own label.
-   * Defaults are `"Done"`, `"In progress"`, `"Not yet"`, `"Failed"`.
+   * Defaults are `"Done"`, `"In progress"`, `"Not yet"`, `"Failed"` in English.
    */
   stateLabels?: Partial<Record<OrderStatusStepState, string>>;
   style?: StyleProp<ViewStyle>;

package/src/overlay/InteractionBoundary.tsx

@@ -0,0 +1,24 @@
+import type { ReactNode } from 'react';
+import { Platform, View } from 'react-native';
+
+/** Stops interaction with caller-owned actions, including web keyboard focus. */
+export function InteractionBoundary({
+  disabled,
+  children,
+}: {
+  disabled: boolean;
+  children: ReactNode;
+}) {
+  return (
+    <View
+      collapsable={false}
+      style={Platform.OS === 'web' ? { display: 'contents' } : undefined}
+      pointerEvents={disabled ? 'none' : 'auto'}
+      accessibilityElementsHidden={disabled}
+      importantForAccessibility={disabled ? 'no-hide-descendants' : 'auto'}
+      {...(Platform.OS === 'web' && disabled ? { inert: true } : null)}
+    >
+      {children}
+    </View>
+  );
+}

package/src/patient-info-card/PatientInfoCard.tsx

@@ -6,9 +6,11 @@ import { StyleSheet, View } from 'react-native';
 import { Avatar } from '../avatar';
 import { Button } from '../button';
 import { RiAddLine } from '../icons/remix/RiAddLine';
+import { useMessages } from '../locale/messages';
 import { resolveDashboardSurfaces } from '../stat-cards/tones';
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
+import { PATIENT_INFO_CARD_MESSAGES } from './messages';
 import type { PatientInfoCardProps } from './types';
 
 /**
@@ -33,12 +35,14 @@ function PatientInfoCardComponent({
   initials,
   details,
   onAddPhoto,
-  addPhotoLabel = 'Add profile photo',
+  addPhotoLabel: addPhotoLabelProp,
   hideAddPhoto = false,
   height = 330,
   style,
   testID,
 }: PatientInfoCardProps) {
+  const { messages } = useMessages(PATIENT_INFO_CARD_MESSAGES);
+  const addPhotoLabel = addPhotoLabelProp ?? messages.addPhoto;
   const theme = useTheme();
   const fill = useCardFill(style);
   const surfaces = useMemo(() => resolveDashboardSurfaces(theme, fill), [theme, fill]);

package/src/patient-info-card/messages.ts

@@ -0,0 +1,25 @@
+import type { MessageCatalog } from '../locale/messages';
+
+/** The patient card's fixed words in each Bloom language. `addPhotoLabel` still wins. */
+export interface PatientInfoCardMessages {
+  /** The `+` button's name. */
+  addPhoto: string;
+}
+
+export const PATIENT_INFO_CARD_MESSAGES: MessageCatalog<PatientInfoCardMessages> = {
+  en: { addPhoto: 'Add profile photo' },
+  es: { addPhoto: 'Añadir foto de perfil' },
+  ca: { addPhoto: 'Afegeix una foto de perfil' },
+  de: { addPhoto: 'Profilfoto hinzufügen' },
+  fr: { addPhoto: 'Ajouter une photo de profil' },
+  it: { addPhoto: 'Aggiungi foto profilo' },
+  pt: { addPhoto: 'Adicionar foto de perfil' },
+  ru: { addPhoto: 'Добавить фото профиля' },
+  tr: { addPhoto: 'Profil fotoğrafı ekle' },
+  ja: { addPhoto: 'プロフィール写真を追加' },
+  zh: { addPhoto: '添加头像' },
+  ar: { addPhoto: 'إضافة صورة الملف الشخصي' },
+  hi: { addPhoto: 'प्रोफ़ाइल फ़ोटो जोड़ें' },
+  bn: { addPhoto: 'প্রোফাইল ছবি যোগ করুন' },
+  id: { addPhoto: 'Tambahkan foto profil' },
+};

package/src/patient-info-card/types.ts

@@ -25,7 +25,7 @@ export interface PatientInfoCardProps {
   details: readonly PatientInfoCardDetail[];
   /** Press handler of the `+` button pinned to the avatar. */
   onAddPhoto?: () => void;
-  /** Accessible name of the `+` button. Defaults to `"Add profile photo"`. */
+  /** Accessible name of the `+` button (`"Add profile photo"` in English). */
   addPhotoLabel?: string;
   /** Hide the `+` button. */
   hideAddPhoto?: boolean;

package/src/payment-method/PaymentMethodList.tsx

@@ -5,10 +5,12 @@ import { useFieldMembership } from '../field/membership';
 import { RiAddLine } from '../icons/remix/RiAddLine';
 import { RiBankCardLine } from '../icons/remix/RiBankCardLine';
 import { Item } from '../item';
+import { useMessages } from '../locale/messages';
 import * as Skeleton from '../skeleton';
 import { useSurfaceFill } from '../styles/surface-levels';
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
+import { PAYMENT_METHOD_MESSAGES } from './messages';
 import { PaymentMethodRow } from './PaymentMethodRow';
 import { PAYMENT_METHOD_GEOMETRY, PAYMENT_METHOD_LIST_GAP } from './constants';
 import { resolvePaymentMethodPaint } from './shared';
@@ -21,8 +23,6 @@ import type { PaymentMethodEntry, PaymentMethodListProps } from './types';
  */
 const PICKER_ROW_ROLE = 'radio' as const;
 
-/** The name a list falls back to when neither a caller nor a `Field` gives one. */
-const LAST_RESORT_NAME = 'Payment methods';
 
 /**
  * The saved methods, with the default marked, an add row, an empty state and a
@@ -74,18 +74,21 @@ function PaymentMethodListComponent({
   density = 'comfortable',
   disabled = false,
   onAdd,
-  addLabel = 'Add a payment method',
+  addLabel: addLabelProp,
   addIcon: AddIcon = RiAddLine,
   loading = false,
   loadingRows = 3,
   empty,
-  emptyTitle = 'No saved payment methods',
+  emptyTitle: emptyTitleProp,
   emptyDescription,
   emptyIcon: EmptyIcon = RiBankCardLine,
   accessibilityLabel,
   style,
   testID,
 }: PaymentMethodListProps) {
+  const { messages } = useMessages(PAYMENT_METHOD_MESSAGES);
+  const addLabel = addLabelProp ?? messages.add;
+  const emptyTitle = emptyTitleProp ?? messages.emptyTitle;
   const theme = useTheme();
   const surface = useSurfaceFill();
   const paint = useMemo(() => resolvePaymentMethodPaint(theme, surface), [theme, surface]);
@@ -96,7 +99,7 @@ function PaymentMethodListComponent({
   // and outranks the field's; `disabled` is a CONSTRAINT and combines.
   const field = useFieldMembership({ accessibilityLabel, disabled });
   const isDisabled = field.disabled;
-  const name = field.accessibilityLabel ?? LAST_RESORT_NAME;
+  const name = field.accessibilityLabel ?? messages.paymentMethods;
 
   // A disabled row keeps its press HANDLER and is handed `disabled` instead:
   // `Item` then renders a real disabled control, which still announces itself
@@ -207,7 +210,7 @@ function PaymentMethodListComponent({
         state={entry.state}
         stateMessage={entry.stateMessage}
         action={entry.action}
-        disabled={isDisabled || entry.disabled === true}
+        disabled={isDisabled || entry.disabled === true || (picker && entry.state != null && entry.state !== 'ok')}
         density={density}
         accessibilityLabel={entry.accessibilityLabel}
         style={entry.style}
@@ -236,6 +239,7 @@ function PaymentMethodListComponent({
           aria-label={name}
           aria-describedby={field.describedBy}
           aria-invalid={field.invalid || undefined}
+          aria-required={field.required || undefined}
           // A `View` has no `disabled` prop for react-native-web to derive
           // `aria-disabled` from, and it never reads `accessibilityState`.
           aria-disabled={isDisabled || undefined}

package/src/payment-method/PaymentMethodRow.tsx

@@ -3,12 +3,14 @@ import { View } from 'react-native';
 
 import { Badge } from '../badge';
 import { Item } from '../item';
+import { useMessages } from '../locale/messages';
 import { RadioIndicator } from '../radio-indicator';
 import { useSurfaceFill } from '../styles/surface-levels';
 import { space } from '../styles/tokens';
 import { resolveAccentColors } from '../theme/accent-colors';
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
+import { PAYMENT_METHOD_MESSAGES } from './messages';
 import { PaymentMethodMark } from './PaymentMethodMark';
 import { PAYMENT_METHOD_GEOMETRY, PAYMENT_METHOD_STATE_TONE } from './constants';
 import { composePaymentMethodName, paymentMethodStateMessage, resolvePaymentMethodPaint } from './shared';
@@ -48,7 +50,7 @@ function PaymentMethodRowComponent({
   image,
   leading,
   isDefault = false,
-  defaultLabel = 'Default',
+  defaultLabel: defaultLabelProp,
   state = 'ok',
   stateMessage,
   selectable = false,
@@ -62,12 +64,14 @@ function PaymentMethodRowComponent({
   style,
   testID,
 }: PaymentMethodRowProps) {
+  const { messages } = useMessages(PAYMENT_METHOD_MESSAGES);
+  const defaultLabel = defaultLabelProp ?? messages.default;
   const theme = useTheme();
   const surface = useSurfaceFill();
   const paint = useMemo(() => resolvePaymentMethodPaint(theme, surface), [theme, surface]);
   const g = PAYMENT_METHOD_GEOMETRY[density];
   const tone = PAYMENT_METHOD_STATE_TONE[state];
-  const stateWords = paymentMethodStateMessage(state, stateMessage);
+  const stateWords = paymentMethodStateMessage(state, stateMessage, messages);
   // The state's words are read as TEXT on the row's own surface, so they take
   // the tone's `accent` member (`outlined` foreground) rather than the fill.
   const stateColor = tone ? resolveAccentColors(theme.colors, tone, 'outlined').foreground : undefined;

package/src/payment-method/constants.ts

@@ -4,6 +4,7 @@ import { RiCoinsLine } from '../icons/remix/RiCoinsLine';
 import { RiWallet3Line } from '../icons/remix/RiWallet3Line';
 import type { BloomIconComponent } from '../icons/icon-component';
 import type { AccentTone } from '../theme/accent-colors';
+import { PAYMENT_METHOD_MESSAGES } from './messages';
 import type { PaymentMethodDensity, PaymentMethodKind, PaymentMethodState } from './types';
 
 /** The glyph each kind draws when the caller names none. */
@@ -14,11 +15,13 @@ export const PAYMENT_METHOD_KIND_ICON: Record<PaymentMethodKind, BloomIconCompon
   cash: RiCoinsLine,
 };
 
-/** What the row says under itself when a state has no message of its own. */
+/**
+ * What the row says under itself when a state has no message of its own, in
+ * English. The row speaks `PAYMENT_METHOD_MESSAGES` in the resolved locale.
+ */
 export const PAYMENT_METHOD_STATE_LABELS: Record<PaymentMethodState, string> = {
   ok: '',
-  expired: 'Expired',
-  declined: 'Declined',
+  ...PAYMENT_METHOD_MESSAGES.en.states,
 };
 
 /**

package/src/payment-method/messages.ts

@@ -0,0 +1,38 @@
+import type { MessageCatalog } from '../locale/messages';
+import type { PaymentMethodState } from './types';
+
+/**
+ * Every fixed string the payment-method family draws or announces, in each
+ * Bloom language. Card scheme names are the app's. A caller's `defaultLabel`,
+ * `stateMessage`, `addLabel`, `emptyTitle` and `accessibilityLabel` still win.
+ */
+export interface PaymentMethodMessages {
+  /** What a row says under itself when its state has no message of its own. `ok` says nothing. */
+  states: Record<Exclude<PaymentMethodState, 'ok'>, string>;
+  /** The badge on the default method. */
+  default: string;
+  /** The add row. */
+  add: string;
+  /** An empty list's title. */
+  emptyTitle: string;
+  /** The list's name when neither the caller nor a `Field` gives one. */
+  paymentMethods: string;
+}
+
+export const PAYMENT_METHOD_MESSAGES: MessageCatalog<PaymentMethodMessages> = {
+  en: { states: { expired: 'Expired', declined: 'Declined' }, default: 'Default', add: 'Add a payment method', emptyTitle: 'No saved payment methods', paymentMethods: 'Payment methods' },
+  es: { states: { expired: 'Caducada', declined: 'Rechazada' }, default: 'Predeterminada', add: 'Añadir un método de pago', emptyTitle: 'No hay métodos de pago guardados', paymentMethods: 'Métodos de pago' },
+  ca: { states: { expired: 'Caducada', declined: 'Rebutjada' }, default: 'Predeterminada', add: 'Afegeix un mètode de pagament', emptyTitle: 'No hi ha mètodes de pagament desats', paymentMethods: 'Mètodes de pagament' },
+  de: { states: { expired: 'Abgelaufen', declined: 'Abgelehnt' }, default: 'Standard', add: 'Zahlungsmethode hinzufügen', emptyTitle: 'Keine gespeicherten Zahlungsmethoden', paymentMethods: 'Zahlungsmethoden' },
+  fr: { states: { expired: 'Expirée', declined: 'Refusée' }, default: 'Par défaut', add: 'Ajouter un moyen de paiement', emptyTitle: 'Aucun moyen de paiement enregistré', paymentMethods: 'Moyens de paiement' },
+  it: { states: { expired: 'Scaduta', declined: 'Rifiutata' }, default: 'Predefinita', add: 'Aggiungi un metodo di pagamento', emptyTitle: 'Nessun metodo di pagamento salvato', paymentMethods: 'Metodi di pagamento' },
+  pt: { states: { expired: 'Expirado', declined: 'Recusado' }, default: 'Padrão', add: 'Adicionar forma de pagamento', emptyTitle: 'Nenhuma forma de pagamento salva', paymentMethods: 'Formas de pagamento' },
+  ru: { states: { expired: 'Срок истёк', declined: 'Отклонено' }, default: 'Основной', add: 'Добавить способ оплаты', emptyTitle: 'Нет сохранённых способов оплаты', paymentMethods: 'Способы оплаты' },
+  tr: { states: { expired: 'Süresi doldu', declined: 'Reddedildi' }, default: 'Varsayılan', add: 'Ödeme yöntemi ekle', emptyTitle: 'Kayıtlı ödeme yöntemi yok', paymentMethods: 'Ödeme yöntemleri' },
+  ja: { states: { expired: '有効期限切れ', declined: '拒否されました' }, default: 'デフォルト', add: '支払い方法を追加', emptyTitle: '保存された支払い方法はありません', paymentMethods: '支払い方法' },
+  zh: { states: { expired: '已过期', declined: '已拒绝' }, default: '默认', add: '添加付款方式', emptyTitle: '没有已保存的付款方式', paymentMethods: '付款方式' },
+  ar: { states: { expired: 'منتهية الصلاحية', declined: 'مرفوضة' }, default: 'افتراضية', add: 'إضافة طريقة دفع', emptyTitle: 'لا توجد طرق دفع محفوظة', paymentMethods: 'طرق الدفع' },
+  hi: { states: { expired: 'समाप्त', declined: 'अस्वीकृत' }, default: 'डिफ़ॉल्ट', add: 'भुगतान का तरीका जोड़ें', emptyTitle: 'कोई सहेजा गया भुगतान तरीका नहीं', paymentMethods: 'भुगतान के तरीके' },
+  bn: { states: { expired: 'মেয়াদোত্তীর্ণ', declined: 'প্রত্যাখ্যাত' }, default: 'ডিফল্ট', add: 'পেমেন্ট পদ্ধতি যোগ করুন', emptyTitle: 'কোনো সংরক্ষিত পেমেন্ট পদ্ধতি নেই', paymentMethods: 'পেমেন্ট পদ্ধতি' },
+  id: { states: { expired: 'Kedaluwarsa', declined: 'Ditolak' }, default: 'Utama', add: 'Tambah metode pembayaran', emptyTitle: 'Belum ada metode pembayaran tersimpan', paymentMethods: 'Metode pembayaran' },
+};

package/src/payment-method/shared.ts

@@ -9,7 +9,7 @@
  */
 import { surfaceFillOn, surfaceTextOn, type SurfaceTextPaint } from '../styles/surface-levels';
 import type { Theme } from '../theme/types';
-import { PAYMENT_METHOD_STATE_LABELS } from './constants';
+import { PAYMENT_METHOD_MESSAGES, type PaymentMethodMessages } from './messages';
 import type { PaymentMethodState } from './types';
 
 export interface PaymentMethodPaint extends SurfaceTextPaint {
@@ -43,8 +43,8 @@ export function composePaymentMethodName(
 export function paymentMethodStateMessage(
   state: PaymentMethodState,
   message?: string,
+  messages: PaymentMethodMessages = PAYMENT_METHOD_MESSAGES.en,
 ): string | undefined {
   if (typeof message === 'string' && message !== '') return message;
-  const label = PAYMENT_METHOD_STATE_LABELS[state];
-  return label === '' ? undefined : label;
+  return state === 'ok' ? undefined : messages.states[state];
 }

package/src/payment-method/types.ts

@@ -94,7 +94,7 @@ export interface PaymentMethodRowProps {
   leading?: ReactNode;
   /** Marks this as the one that will be charged. Draws a `Badge`. */
   isDefault?: boolean;
-  /** The default badge's word. Default `"Default"`. */
+  /** The default badge's word (`"Default"` in English). */
   defaultLabel?: string;
   /** Default `ok`. */
   state?: PaymentMethodState;
@@ -163,7 +163,7 @@ export interface PaymentMethodListProps {
   disabled?: boolean;
   /** Draws the "add a method" row under the list. Without it no row is drawn. */
   onAdd?: () => void;
-  /** Default `"Add a payment method"`. */
+  /** `"Add a payment method"` in English. */
   addLabel?: string;
   /** The glyph on the add row. Default a plus. */
   addIcon?: BloomIconComponent;
@@ -173,7 +173,7 @@ export interface PaymentMethodListProps {
   loadingRows?: number;
   /** Replaces the whole empty block. The add row is still drawn under it. */
   empty?: ReactNode;
-  /** Default `"No saved payment methods"`. */
+  /** `"No saved payment methods"` in English. */
   emptyTitle?: string;
   emptyDescription?: string;
   /** The glyph above the empty text. Default a card. */

package/src/payment-status/PaymentStatusBar.tsx

@@ -1,6 +1,8 @@
 import React, { memo } from 'react';
 
+import { useMessages } from '../locale/messages';
 import { OrderStatusBar } from '../order-status';
+import { PAYMENT_STATUS_MESSAGES } from './messages';
 import { resolvePaymentStatus } from './shared';
 import type { PaymentStatusBarProps } from './types';
 
@@ -45,7 +47,8 @@ function PaymentStatusBarComponent({
   style,
   testID,
 }: PaymentStatusBarProps) {
-  const presentation = resolvePaymentStatus(state, { status, labels, icon });
+  const { messages } = useMessages(PAYMENT_STATUS_MESSAGES);
+  const presentation = resolvePaymentStatus(state, { status, labels, icon }, messages);
 
   return (
     <OrderStatusBar

package/src/payment-status/PaymentStatusBlock.tsx

@@ -2,6 +2,7 @@ import React, { memo, useMemo } from 'react';
 import { View } from 'react-native';
 
 import { Admonition } from '../admonition';
+import { useMessages } from '../locale/messages';
 import {
   SurfaceLevelProvider,
   surfaceFillVars,
@@ -13,6 +14,7 @@ import { resolveAccentColors } from '../theme/accent-colors';
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
 import { PAYMENT_STATUS_GEOMETRY } from './constants';
+import { PAYMENT_STATUS_MESSAGES } from './messages';
 import { resolvePaymentStatus, resolvePaymentStatusPaint } from './shared';
 import type { PaymentStatusBlockProps } from './types';
 
@@ -52,7 +54,7 @@ function PaymentStatusBlockComponent({
   amount,
   detail,
   reference,
-  referenceLabel = 'Reference',
+  referenceLabel: referenceLabelProp,
   reason,
   actions,
   icon,
@@ -62,6 +64,8 @@ function PaymentStatusBlockComponent({
   style,
   testID,
 }: PaymentStatusBlockProps) {
+  const { messages } = useMessages(PAYMENT_STATUS_MESSAGES);
+  const referenceLabel = referenceLabelProp ?? messages.reference;
   const theme = useTheme();
   const level = useSurfaceLevelValue();
   const own = useSurfaceLevel(variant === 'surface' ? 1 : 0);
@@ -69,7 +73,7 @@ function PaymentStatusBlockComponent({
     () => resolvePaymentStatusPaint(theme, own.background),
     [theme, own.background],
   );
-  const presentation = resolvePaymentStatus(state, { status, labels, icon });
+  const presentation = resolvePaymentStatus(state, { status, labels, icon }, messages);
   const accent = resolveAccentColors(theme.colors, presentation.tone, 'subtle');
   const Glyph = presentation.icon;
   const g = PAYMENT_STATUS_GEOMETRY;

package/src/payment-status/constants.ts

@@ -5,6 +5,7 @@ import { RiErrorWarningLine } from '../icons/remix/RiErrorWarningLine';
 import { RiTimeLine } from '../icons/remix/RiTimeLine';
 import type { BloomIconComponent } from '../icons/icon-component';
 import type { AccentTone } from '../theme/accent-colors';
+import { PAYMENT_STATUS_MESSAGES } from './messages';
 import type { PaymentStatusState } from './types';
 
 /**
@@ -12,14 +13,10 @@ import type { PaymentStatusState } from './types';
  *
  * `"Payment failed"` rather than `"Failed"` because the strip is read on its
  * own, in a row of other rows, where "Failed" is a word with no subject.
+ * English; the components speak `PAYMENT_STATUS_MESSAGES` in the resolved
+ * locale.
  */
-export const PAYMENT_STATUS_LABELS: Record<PaymentStatusState, string> = {
-  authorising: 'Authorising',
-  paid: 'Paid',
-  failed: 'Payment failed',
-  refunded: 'Refunded',
-  pending: 'Payment pending',
-};
+export const PAYMENT_STATUS_LABELS: Record<PaymentStatusState, string> = PAYMENT_STATUS_MESSAGES.en.states;
 
 /**
  * The tone each state paints.

package/src/payment-status/messages.ts

@@ -0,0 +1,76 @@
+import type { MessageCatalog } from '../locale/messages';
+import type { PaymentStatusState } from './types';
+
+/**
+ * Every fixed string the payment-status family draws or announces, in each
+ * Bloom language. A caller's `status`, `labels` and `referenceLabel` still win.
+ */
+export interface PaymentStatusMessages {
+  /** The words each state says — read on their own, so "Payment failed", not "Failed". */
+  states: Record<PaymentStatusState, string>;
+  /** The word before the reference. */
+  reference: string;
+}
+
+export const PAYMENT_STATUS_MESSAGES: MessageCatalog<PaymentStatusMessages> = {
+  en: {
+    states: { authorising: 'Authorising', paid: 'Paid', failed: 'Payment failed', refunded: 'Refunded', pending: 'Payment pending' },
+    reference: 'Reference',
+  },
+  es: {
+    states: { authorising: 'Autorizando', paid: 'Pagado', failed: 'Pago fallido', refunded: 'Reembolsado', pending: 'Pago pendiente' },
+    reference: 'Referencia',
+  },
+  ca: {
+    states: { authorising: 'Autoritzant', paid: 'Pagat', failed: 'El pagament ha fallat', refunded: 'Reemborsat', pending: 'Pagament pendent' },
+    reference: 'Referència',
+  },
+  de: {
+    states: { authorising: 'Wird autorisiert', paid: 'Bezahlt', failed: 'Zahlung fehlgeschlagen', refunded: 'Erstattet', pending: 'Zahlung ausstehend' },
+    reference: 'Referenz',
+  },
+  fr: {
+    states: { authorising: 'Autorisation en cours', paid: 'Payé', failed: 'Échec du paiement', refunded: 'Remboursé', pending: 'Paiement en attente' },
+    reference: 'Référence',
+  },
+  it: {
+    states: { authorising: 'Autorizzazione in corso', paid: 'Pagato', failed: 'Pagamento non riuscito', refunded: 'Rimborsato', pending: 'Pagamento in sospeso' },
+    reference: 'Riferimento',
+  },
+  pt: {
+    states: { authorising: 'Autorizando', paid: 'Pago', failed: 'Falha no pagamento', refunded: 'Reembolsado', pending: 'Pagamento pendente' },
+    reference: 'Referência',
+  },
+  ru: {
+    states: { authorising: 'Авторизация', paid: 'Оплачено', failed: 'Платёж не прошёл', refunded: 'Возвращено', pending: 'Платёж в обработке' },
+    reference: 'Номер',
+  },
+  tr: {
+    states: { authorising: 'Onaylanıyor', paid: 'Ödendi', failed: 'Ödeme başarısız', refunded: 'İade edildi', pending: 'Ödeme bekleniyor' },
+    reference: 'Referans',
+  },
+  ja: {
+    states: { authorising: '承認中', paid: '支払い済み', failed: '支払いに失敗しました', refunded: '返金済み', pending: '支払い保留中' },
+    reference: '参照番号',
+  },
+  zh: {
+    states: { authorising: '授权中', paid: '已支付', failed: '支付失败', refunded: '已退款', pending: '支付处理中' },
+    reference: '参考号',
+  },
+  ar: {
+    states: { authorising: 'جارٍ التفويض', paid: 'مدفوع', failed: 'فشل الدفع', refunded: 'مسترد', pending: 'الدفع قيد الانتظار' },
+    reference: 'المرجع',
+  },
+  hi: {
+    states: { authorising: 'अधिकृत किया जा रहा है', paid: 'भुगतान हो गया', failed: 'भुगतान विफल', refunded: 'रिफ़ंड हो गया', pending: 'भुगतान लंबित' },
+    reference: 'संदर्भ',
+  },
+  bn: {
+    states: { authorising: 'অনুমোদন করা হচ্ছে', paid: 'পরিশোধিত', failed: 'পেমেন্ট ব্যর্থ', refunded: 'ফেরত দেওয়া হয়েছে', pending: 'পেমেন্ট অপেক্ষমাণ' },
+    reference: 'রেফারেন্স',
+  },
+  id: {
+    states: { authorising: 'Mengotorisasi', paid: 'Lunas', failed: 'Pembayaran gagal', refunded: 'Dikembalikan', pending: 'Pembayaran tertunda' },
+    reference: 'Referensi',
+  },
+};

package/src/payment-status/shared.ts

@@ -13,9 +13,9 @@ import type { Theme } from '../theme/types';
 import {
   PAYMENT_STATUS_ADMONITION,
   PAYMENT_STATUS_ICON,
-  PAYMENT_STATUS_LABELS,
   PAYMENT_STATUS_TONE,
 } from './constants';
+import { PAYMENT_STATUS_MESSAGES, type PaymentStatusMessages } from './messages';
 import type { PaymentStatusLabels, PaymentStatusState } from './types';
 
 export interface PaymentStatusPresentation {
@@ -39,9 +39,10 @@ export interface PaymentStatusPresentation {
 export function resolvePaymentStatus(
   state: PaymentStatusState,
   options: { status?: string; labels?: PaymentStatusLabels; icon?: BloomIconComponent } = {},
+  messages: PaymentStatusMessages = PAYMENT_STATUS_MESSAGES.en,
 ): PaymentStatusPresentation {
   return {
-    words: options.status ?? options.labels?.[state] ?? PAYMENT_STATUS_LABELS[state],
+    words: options.status ?? options.labels?.[state] ?? messages.states[state],
     tone: PAYMENT_STATUS_TONE[state],
     icon: options.icon ?? PAYMENT_STATUS_ICON[state],
     admonition: PAYMENT_STATUS_ADMONITION[state],

package/src/payment-status/types.ts

@@ -62,7 +62,7 @@ export interface PaymentStatusBlockProps {
    * figures so it can be read out a character at a time.
    */
   reference?: string;
-  /** The word before it. Default `"Reference"`. */
+  /** The word before it (`"Reference"` in English). */
   referenceLabel?: string;
   /**
    * WHY it failed, in the processor's own words, drawn in an `Admonition`.