@oxy.so/bloom 5.0.0 → 5.1.1

package/src/agent-chat/AgentChatActionsBase.tsx

@@ -18,6 +18,7 @@ import {
 } from './shared';
 import { AGENT_CHAT_MESSAGES } from './messages';
 import type { AgentChatActionsProps } from './types';
+import { clipboardAvailable, writeClipboardText } from '../hooks/clipboard';
 
 /**
  * `AgentChatActions`: the controls in the top right of the
@@ -33,16 +34,13 @@ import type { AgentChatActionsProps } from './types';
 
 async function defaultShare(transcript: string): Promise<void | 'copied'> {
   if (!IS_WEB || typeof navigator === 'undefined') return;
-  const nav = navigator as {
-    share?: (data: { text: string }) => Promise<void>;
-    clipboard?: { writeText?: (value: string) => Promise<void> };
-  };
+  const nav = navigator as { share?: (data: { text: string }) => Promise<void> };
   if (nav.share) {
     await nav.share({ text: transcript });
     return;
   }
-  if (!nav.clipboard?.writeText) return;
-  await nav.clipboard.writeText(transcript);
+  if (!clipboardAvailable()) return;
+  await writeClipboardText(transcript);
   return 'copied';
 }
 

package/src/agent-chat/AgentChatMessage.tsx

@@ -28,6 +28,7 @@ import {
 } from './shared';
 import { AGENT_CHAT_MESSAGES } from './messages';
 import type { AgentChatMessageProps } from './types';
+import { writeClipboardText } from '../hooks/clipboard';
 
 /**
  * `AgentMessage`: one turn of the transcript.
@@ -84,12 +85,7 @@ const Line = memo(function Line({
 });
 
 function defaultCopy(text: string): Promise<void> {
-  const clipboard =
-    typeof navigator !== 'undefined'
-      ? (navigator as { clipboard?: { writeText?: (value: string) => Promise<void> } }).clipboard
-      : undefined;
-  if (!clipboard?.writeText) return Promise.reject(new Error('clipboard unavailable'));
-  return clipboard.writeText(text);
+  return writeClipboardText(text);
 }
 
 interface SpeechLike {

package/src/ai-chat/AiChatShell.tsx

@@ -42,6 +42,7 @@ import {
 import { useMessages } from '../locale/messages';
 import { AI_CHAT_MESSAGES } from './messages';
 import type { AiChatMobileHeaderProps, AiChatResizeHandleProps, AiChatShellProps } from './types';
+import { clamp01 } from '../styles/clamp';
 
 const REVEAL_EASE = Easing.bezier(0.42, 0, 0.58, 1);
 const REVEAL_MS = 325;
@@ -87,7 +88,6 @@ const NAV_SWIPE_FLICK = 0.3;
 /** A settle never runs shorter than this, so the last few px are still seen. */
 const NAV_SETTLE_MIN_MS = 120;
 
-const clamp01 = (value: number) => (value < 0 ? 0 : value > 1 ? 1 : value);
 
 
 // ---------------------------------------------------------------------------

package/src/ai-profile-card/AiProfileCard.tsx

@@ -27,6 +27,7 @@ import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
 import { AI_PROFILE_CARD_MESSAGES } from './messages';
 import type { AiProfileCardPeriod, AiProfileCardProps } from './types';
+import { formatCurrency } from '../locale/format-number';
 
 /**
  * An AI profile card: a cover photo, an overlapping avatar, name and handle,
@@ -58,7 +59,6 @@ import type { AiProfileCardPeriod, AiProfileCardProps } from './types';
 
 const COVER_HEIGHT = 165;
 const AVATAR_SIZE = 80;
-const formatDollars = (value: number) => `$${groupThousands(value)}`;
 
 /** `object-fit: cover` with an `object-position`: the image sized to cover the box, offset by the fractions. */
 function CoverImage({
@@ -150,7 +150,7 @@ function AiProfileCardComponent({
   actions,
   contributionsLabel: contributionsLabelProp,
   contributions,
-  format = formatDollars,
+  format: formatProp,
   countUpDuration = 1600,
   delta,
   stats,
@@ -168,7 +168,8 @@ function AiProfileCardComponent({
   style,
   testID,
 }: AiProfileCardProps) {
-  const { messages } = useMessages(AI_PROFILE_CARD_MESSAGES);
+  const { locale, messages } = useMessages(AI_PROFILE_CARD_MESSAGES);
+  const format = formatProp ?? ((value: number) => formatCurrency(value, 'USD', locale));
   const contributionsLabel = contributionsLabelProp ?? messages.contributions;
   const activityLabel = activityLabelProp ?? messages.activity;
   const defaultPeriods = useMemo<readonly AiProfileCardPeriod[]>(

package/src/button/Button.tsx

@@ -43,6 +43,35 @@ function isTextContent(node: React.ReactNode): boolean {
   return React.isValidElement<{ children?: React.ReactNode }>(node) && node.type === React.Fragment && isTextContent(node.props.children);
 }
 
+/** Keep contiguous labels together so the button's gap only separates layout nodes. */
+function renderTextContent(node: React.ReactNode, wrap: (text: React.ReactNode) => React.ReactNode): React.ReactNode {
+  if (isTextContent(node)) return wrap(node);
+  const result: React.ReactNode[] = [];
+  let run: React.ReactNode[] = [];
+  let runKey = '';
+  const flush = () => {
+    if (run.length) result.push(<React.Fragment key={runKey}>{wrap(run)}</React.Fragment>);
+    run = [];
+  };
+  const visit = (children: React.ReactNode, path: string) => {
+    React.Children.toArray(children).forEach((child, index) => {
+      const key = `${path}/${React.isValidElement(child) ? child.key ?? index : index}`;
+      if (React.isValidElement<{ children?: React.ReactNode }>(child) && child.type === React.Fragment) {
+        visit(child.props.children, key);
+      } else if (typeof child === 'string' || typeof child === 'number') {
+        if (!run.length) runKey = key;
+        run.push(child);
+      } else {
+        flush();
+        result.push(<React.Fragment key={key}>{child}</React.Fragment>);
+      }
+    });
+  };
+  visit(node, 'content');
+  flush();
+  return result;
+}
+
 export type {
   ButtonProps, LinkButtonProps,
   ButtonSize,
@@ -340,16 +369,12 @@ const ButtonComponent = forwardRef<View, ButtonProps>(function ButtonComponent({
       )}
       {leading}
       {iconNode}
-      {!isSquare && children != null && (isTextContent(children) ? (
-        <Text
-          variant={textVariant ?? geometry.type}
-          numberOfLines={numberOfLines}
-          style={[computedTextStyle, textStyle]}
-        >
-          {children}
-        </Text>
-      ) : children)}
-      {isSquare && !renderLeadingIcon && !LeadingIcon && !iconNode && children != null ? children : null}
+      {children != null && (!isSquare || (!renderLeadingIcon && !LeadingIcon && !iconNode))
+        ? renderTextContent(children, text => (
+          <Text variant={textVariant ?? geometry.type} numberOfLines={numberOfLines} style={[computedTextStyle, textStyle]}>
+            {text}
+          </Text>
+        )) : null}
       {trailing}
       {!isSquare
         ? resolveIconSlot(renderTrailingIcon, iconSize, paint.foreground, () =>

package/src/button/GlyphButton.tsx

@@ -164,9 +164,9 @@ function GlyphButtonComponent(
       aria-busy={busy || undefined}
       aria-expanded={ariaExpanded}
       {...(ariaHasPopup == null ? {} : { 'aria-haspopup': ariaHasPopup })}
-      disabled={blocked}
-      onPress={onPress}
-      onLongPress={onLongPress}
+      disabled={disabled}
+      onPress={onPress ? event => { if (!blocked) onPress(event); } : undefined}
+      onLongPress={onLongPress ? event => { if (!blocked) onLongPress(event); } : undefined}
       onHoverIn={onHoverIn}
       onHoverOut={onHoverOut}
       onPressIn={onPressIn}

package/src/card-form/CardForm.tsx

@@ -2,6 +2,7 @@ import React, { memo, useCallback, useEffect, useMemo, useRef } from 'react';
 import { View } from 'react-native';
 
 import { useControllableState } from '../hooks/use-controllable-state';
+import { useMessages } from '../locale/messages';
 import { PaymentMethodMark } from '../payment-method';
 import {
   CardFormCountry,
@@ -11,7 +12,8 @@ import {
   CardFormPostcode,
   CardFormSecurityCode,
 } from './CardFormParts';
-import { CARD_FORM_EMPTY_VALUE, CARD_FORM_GAP, CARD_FORM_LABELS } from './constants';
+import { CARD_FORM_EMPTY_VALUE, CARD_FORM_GAP } from './constants';
+import { CARD_FORM_MESSAGES } from './messages';
 import { matchCardScheme, cardDigits, schemeSecurityCodeLength } from './shared';
 import type { CardFormFieldName, CardFormProps, CardFormValue } from './types';
 
@@ -66,6 +68,7 @@ function CardFormComponent({
   style,
   testID,
 }: CardFormProps) {
+  const { messages } = useMessages(CARD_FORM_MESSAGES);
   const controlled = useMemo(
     () => (value === undefined ? undefined : { ...CARD_FORM_EMPTY_VALUE, ...value }),
     [value],
@@ -97,7 +100,7 @@ function CardFormComponent({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [schemeId]);
 
-  const word = (key: CardFormFieldName): string => labels?.[key] ?? CARD_FORM_LABELS[key];
+  const word = (key: CardFormFieldName): string => labels?.[key] ?? messages.labels[key];
   const showName = fields?.name !== false;
   const showPostcode = fields?.postcode === true;
   const showCountry = fields?.country === true && countries !== undefined;

package/src/card-form/CardFormParts.tsx

@@ -2,6 +2,7 @@ import React, { memo, useCallback, useEffect, useMemo, useRef, type ReactNode }
 import { View } from 'react-native';
 
 import { FieldControlProvider, type FieldControlValue } from '../field/context';
+import { useMessages } from '../locale/messages';
 import {
   Select,
   SelectContent,
@@ -14,7 +15,8 @@ import {
 } from '../select';
 import { TextField, TextFieldHint, TextFieldInput, TextFieldLabel } from '../text-field';
 import { TEXT_FIELD_RADIUS } from '../text-field/shared';
-import { CARD_FORM_LABELS, CARD_FORM_PLACEHOLDERS } from './constants';
+import { CARD_FORM_PLACEHOLDERS } from './constants';
+import { CARD_FORM_MESSAGES } from './messages';
 import {
   applyCardExpiryEdit,
   applyCardNumberEdit,
@@ -151,6 +153,7 @@ function CardFormNumberComponent({
   style,
   testID,
 }: CardFormNumberProps) {
+  const { messages } = useMessages(CARD_FORM_MESSAGES);
   const member = useCardFormPart({
     accessibilityLabel,
     label,
@@ -159,7 +162,7 @@ function CardFormNumberComponent({
     disabled,
     required,
     nativeID,
-    fallbackName: CARD_FORM_LABELS.number,
+    fallbackName: messages.labels.number,
   });
   const digits = cardDigits(value);
   const detected = useMemo(
@@ -248,6 +251,7 @@ function CardFormExpiryComponent({
   style,
   testID,
 }: CardFormExpiryProps) {
+  const { messages } = useMessages(CARD_FORM_MESSAGES);
   const member = useCardFormPart({
     accessibilityLabel,
     label,
@@ -256,7 +260,7 @@ function CardFormExpiryComponent({
     disabled,
     required,
     nativeID,
-    fallbackName: CARD_FORM_LABELS.expiry,
+    fallbackName: messages.labels.expiry,
   });
 
   const handleChange = useCallback(
@@ -325,6 +329,7 @@ function CardFormSecurityCodeComponent({
   style,
   testID,
 }: CardFormSecurityCodeProps) {
+  const { messages } = useMessages(CARD_FORM_MESSAGES);
   const member = useCardFormPart({
     accessibilityLabel,
     label,
@@ -333,7 +338,7 @@ function CardFormSecurityCodeComponent({
     disabled,
     required,
     nativeID,
-    fallbackName: CARD_FORM_LABELS.securityCode,
+    fallbackName: messages.labels.securityCode,
   });
 
   const handleChange = useCallback(
@@ -394,6 +399,7 @@ function CardFormNameComponent({
   style,
   testID,
 }: CardFormNameProps) {
+  const { messages } = useMessages(CARD_FORM_MESSAGES);
   const member = useCardFormPart({
     accessibilityLabel,
     label,
@@ -402,7 +408,7 @@ function CardFormNameComponent({
     disabled,
     required,
     nativeID,
-    fallbackName: CARD_FORM_LABELS.name,
+    fallbackName: messages.labels.name,
   });
 
   return (
@@ -457,6 +463,7 @@ function CardFormPostcodeComponent({
   style,
   testID,
 }: CardFormPostcodeProps) {
+  const { messages } = useMessages(CARD_FORM_MESSAGES);
   const member = useCardFormPart({
     accessibilityLabel,
     label,
@@ -465,7 +472,7 @@ function CardFormPostcodeComponent({
     disabled,
     required,
     nativeID,
-    fallbackName: CARD_FORM_LABELS.postcode,
+    fallbackName: messages.labels.postcode,
   });
 
   return (
@@ -522,10 +529,11 @@ function CardFormCountryComponent({
   required,
   nativeID,
   countries,
-  placeholder = 'Select a country',
+  placeholder: placeholderProp,
   style,
   testID,
 }: CardFormCountryProps) {
+  const { messages } = useMessages(CARD_FORM_MESSAGES);
   const member = useCardFormPart({
     accessibilityLabel,
     label,
@@ -534,8 +542,9 @@ function CardFormCountryComponent({
     disabled,
     required,
     nativeID,
-    fallbackName: CARD_FORM_LABELS.country,
+    fallbackName: messages.labels.country,
   });
+  const placeholder = placeholderProp ?? messages.selectCountry;
   const items = useMemo(() => countries.map((country) => ({ ...country })), [countries]);
 
   return (

package/src/card-form/constants.ts

@@ -1,14 +1,11 @@
+import { CARD_FORM_MESSAGES } from './messages';
 import type { CardFormLabels, CardFormValue } from './types';
 
-/** The words above each box, when the caller names none. */
-export const CARD_FORM_LABELS: Required<CardFormLabels> = {
-  number: 'Card number',
-  expiry: 'Expiry date',
-  securityCode: 'Security code',
-  name: 'Name on card',
-  postcode: 'Postcode',
-  country: 'Country',
-};
+/**
+ * The words above each box, when the caller names none — in English. The form
+ * speaks `CARD_FORM_MESSAGES` in the resolved locale.
+ */
+export const CARD_FORM_LABELS: Required<CardFormLabels> = CARD_FORM_MESSAGES.en.labels;
 
 /**
  * The two boxes whose SHAPE is not obvious from their label.

package/src/card-form/messages.ts

@@ -0,0 +1,77 @@
+import type { MessageCatalog } from '../locale/messages';
+import type { CardFormLabels } from './types';
+
+/**
+ * Every fixed string the card form draws or announces, in each Bloom language.
+ * The expiry's `MM/YY` pattern is a format, not copy. A caller's `labels`,
+ * `label`, `accessibilityLabel` and `placeholder` still win.
+ */
+export interface CardFormMessages {
+  /** The words above each box. */
+  labels: Required<CardFormLabels>;
+  /** The country trigger while nothing is chosen. */
+  selectCountry: string;
+}
+
+export const CARD_FORM_MESSAGES: MessageCatalog<CardFormMessages> = {
+  en: {
+    labels: { number: 'Card number', expiry: 'Expiry date', securityCode: 'Security code', name: 'Name on card', postcode: 'Postcode', country: 'Country' },
+    selectCountry: 'Select a country',
+  },
+  es: {
+    labels: { number: 'Número de tarjeta', expiry: 'Fecha de caducidad', securityCode: 'Código de seguridad', name: 'Nombre en la tarjeta', postcode: 'Código postal', country: 'País' },
+    selectCountry: 'Selecciona un país',
+  },
+  ca: {
+    labels: { number: 'Número de targeta', expiry: 'Data de caducitat', securityCode: 'Codi de seguretat', name: 'Nom a la targeta', postcode: 'Codi postal', country: 'País' },
+    selectCountry: 'Selecciona un país',
+  },
+  de: {
+    labels: { number: 'Kartennummer', expiry: 'Ablaufdatum', securityCode: 'Sicherheitscode', name: 'Name auf der Karte', postcode: 'Postleitzahl', country: 'Land' },
+    selectCountry: 'Land auswählen',
+  },
+  fr: {
+    labels: { number: 'Numéro de carte', expiry: "Date d'expiration", securityCode: 'Code de sécurité', name: 'Nom sur la carte', postcode: 'Code postal', country: 'Pays' },
+    selectCountry: 'Choisissez un pays',
+  },
+  it: {
+    labels: { number: 'Numero della carta', expiry: 'Data di scadenza', securityCode: 'Codice di sicurezza', name: 'Nome sulla carta', postcode: 'CAP', country: 'Paese' },
+    selectCountry: 'Seleziona un paese',
+  },
+  pt: {
+    labels: { number: 'Número do cartão', expiry: 'Data de validade', securityCode: 'Código de segurança', name: 'Nome no cartão', postcode: 'CEP', country: 'País' },
+    selectCountry: 'Selecione um país',
+  },
+  ru: {
+    labels: { number: 'Номер карты', expiry: 'Срок действия', securityCode: 'Код безопасности', name: 'Имя на карте', postcode: 'Почтовый индекс', country: 'Страна' },
+    selectCountry: 'Выберите страну',
+  },
+  tr: {
+    labels: { number: 'Kart numarası', expiry: 'Son kullanma tarihi', securityCode: 'Güvenlik kodu', name: 'Kart üzerindeki ad', postcode: 'Posta kodu', country: 'Ülke' },
+    selectCountry: 'Ülke seçin',
+  },
+  ja: {
+    labels: { number: 'カード番号', expiry: '有効期限', securityCode: 'セキュリティコード', name: 'カード名義人', postcode: '郵便番号', country: '国' },
+    selectCountry: '国を選択',
+  },
+  zh: {
+    labels: { number: '卡号', expiry: '有效期', securityCode: '安全码', name: '持卡人姓名', postcode: '邮政编码', country: '国家/地区' },
+    selectCountry: '选择国家/地区',
+  },
+  ar: {
+    labels: { number: 'رقم البطاقة', expiry: 'تاريخ الانتهاء', securityCode: 'رمز الأمان', name: 'الاسم على البطاقة', postcode: 'الرمز البريدي', country: 'الدولة' },
+    selectCountry: 'اختر دولة',
+  },
+  hi: {
+    labels: { number: 'कार्ड नंबर', expiry: 'समाप्ति तिथि', securityCode: 'सुरक्षा कोड', name: 'कार्ड पर नाम', postcode: 'पिन कोड', country: 'देश' },
+    selectCountry: 'देश चुनें',
+  },
+  bn: {
+    labels: { number: 'কার্ড নম্বর', expiry: 'মেয়াদ শেষের তারিখ', securityCode: 'নিরাপত্তা কোড', name: 'কার্ডে থাকা নাম', postcode: 'পোস্টকোড', country: 'দেশ' },
+    selectCountry: 'একটি দেশ বেছে নিন',
+  },
+  id: {
+    labels: { number: 'Nomor kartu', expiry: 'Tanggal kedaluwarsa', securityCode: 'Kode keamanan', name: 'Nama di kartu', postcode: 'Kode pos', country: 'Negara' },
+    selectCountry: 'Pilih negara',
+  },
+};

package/src/card-form/shared.ts

@@ -65,7 +65,8 @@ export function groupCardDigits(digits: string, groups: readonly number[] = DEFA
  * re-groups it when the field is left.
  *
  * An edit that would push the number past `maxDigits` is refused outright:
- * returning a truncated value would move the caret too.
+ * returning a truncated value would move the caret too. Deletions still work
+ * when a scheme change made the existing value longer than the new limit.
  */
 export function applyCardNumberEdit(
   previous: string,
@@ -74,8 +75,8 @@ export function applyCardNumberEdit(
   maxDigits = 19,
 ): string {
   const nextDigits = cardDigits(next);
-  if (nextDigits.length > maxDigits) return previous;
   const previousDigits = cardDigits(previous);
+  if (nextDigits.length > maxDigits && nextDigits.length >= previousDigits.length) return previous;
   const atEnd =
     previousDigits.startsWith(nextDigits) || nextDigits.startsWith(previousDigits);
   if (atEnd) return groupCardDigits(nextDigits, groups);

package/src/card-form/types.ts

@@ -154,7 +154,7 @@ export interface CardFormPostcodeProps extends CardFormPartProps {}
 export interface CardFormCountryProps extends Omit<CardFormPartProps, 'placeholder' | 'autoFocus'> {
   /** The countries to choose from, in the order they should be read. */
   countries: readonly CardFormCountryOption[];
-  /** Drawn in the trigger while nothing is chosen. Default `"Select a country"`. */
+  /** Drawn in the trigger while nothing is chosen (`"Select a country"` in English). */
   placeholder?: string;
 }
 

package/src/carrier-quote/CarrierQuoteCard.tsx

@@ -23,7 +23,7 @@ import type { WebCssStyle } from '../styles/web-view-style';
 import { resolveAccentColors } from '../theme/accent-colors';
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
-import { CARRIER_QUOTE_GEOMETRY, CARRIER_QUOTE_LABELS, CARRIER_QUOTE_MARK_TONE } from './constants';
+import { CARRIER_QUOTE_GEOMETRY, CARRIER_QUOTE_MARK_TONE } from './constants';
 import {
   CARRIER_QUOTE_STYLE_ID,
   CARRIER_QUOTE_WEB_CSS,
@@ -34,6 +34,8 @@ import {
   type CarrierQuotePaint,
 } from './shared';
 import type { CarrierQuoteCardProps } from './types';
+import { useMessages } from '../locale/messages';
+import { CARRIER_QUOTE_MESSAGES } from './messages';
 
 /**
  * One carrier's offer on a job.
@@ -107,6 +109,7 @@ function CarrierQuoteCardComponent({
   style,
   testID,
 }: CarrierQuoteCardProps) {
+  const { messages: quoteText } = useMessages(CARRIER_QUOTE_MESSAGES);
   const theme = useTheme();
   const comfortable = density === 'comfortable';
   const paint = useQuotePaint(comfortable);
@@ -115,11 +118,11 @@ function CarrierQuoteCardComponent({
     comfortable && carrierActionsAreLabelled(width, CARRIER_QUOTE_GEOMETRY.narrowWidth);
   const labels = useMemo(
     () => ({
-      ...CARRIER_QUOTE_LABELS,
+      ...quoteText.labels,
       ...labelOverrides,
-      marks: { ...CARRIER_QUOTE_LABELS.marks, ...labelOverrides?.marks },
+      marks: { ...quoteText.labels.marks, ...labelOverrides?.marks },
     }),
-    [labelOverrides],
+    [labelOverrides, quoteText],
   );
 
   useEffect(() => {
@@ -487,7 +490,11 @@ function CarrierQuoteCardComponent({
               defaultExpanded={defaultBreakdownExpanded}
               expandLabel={labels.showPrice}
               collapseLabel={labels.hidePrice}
-              accessibilityLabel={`${labels.priceDetails} ${carrier.name}`}
+              accessibilityLabel={
+                labelOverrides?.priceDetails !== undefined
+                  ? `${labelOverrides.priceDetails} ${carrier.name}`
+                  : quoteText.priceDetailsFor(carrier.name)
+              }
               testID={id('breakdown')}
             />
           ) : null}

package/src/carrier-quote/CarrierQuoteList.tsx

@@ -11,9 +11,11 @@ import { surfaceFillVars, useSurfaceLevel } from '../styles/surface-levels';
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
 import { CarrierQuoteCard } from './CarrierQuoteCard';
-import { CARRIER_QUOTE_GEOMETRY, CARRIER_QUOTE_LABELS, CARRIER_QUOTE_SORTS } from './constants';
+import { CARRIER_QUOTE_GEOMETRY, CARRIER_QUOTE_SORTS } from './constants';
 import { markCarrierQuotes, resolveCarrierQuotePaint, sortCarrierQuotes } from './shared';
 import type { CarrierQuoteListProps, CarrierQuoteSort } from './types';
+import { useMessages } from '../locale/messages';
+import { CARRIER_QUOTE_MESSAGES } from './messages';
 
 /**
  * The offers on one job, ordered, marked and counted.
@@ -56,14 +58,18 @@ function CarrierQuoteListComponent({
   selectedId = null,
   density = 'comfortable',
   breakdown,
-  emptyTitle = 'No offers yet',
-  emptyDescription = 'Carriers are looking at your job. The first offers usually arrive within a few minutes.',
+  emptyTitle: emptyTitleProp,
+  emptyDescription: emptyDescriptionProp,
   emptyAction,
   labels: labelOverrides,
-  accessibilityLabel = 'Offers',
+  accessibilityLabel: accessibilityLabelProp,
   style,
   testID,
 }: CarrierQuoteListProps) {
+  const { messages: quoteText } = useMessages(CARRIER_QUOTE_MESSAGES);
+  const emptyTitle = emptyTitleProp ?? quoteText.emptyTitle;
+  const emptyDescription = emptyDescriptionProp ?? quoteText.emptyDescription;
+  const accessibilityLabel = accessibilityLabelProp ?? quoteText.list;
   const theme = useTheme();
   const ambient = useSurfaceLevel(0);
   const paint = useMemo(
@@ -72,11 +78,11 @@ function CarrierQuoteListComponent({
   );
   const labels = useMemo(
     () => ({
-      ...CARRIER_QUOTE_LABELS,
+      ...quoteText.labels,
       ...labelOverrides,
-      sortOptions: { ...CARRIER_QUOTE_LABELS.sortOptions, ...labelOverrides?.sortOptions },
+      sortOptions: { ...quoteText.labels.sortOptions, ...labelOverrides?.sortOptions },
     }),
-    [labelOverrides],
+    [labelOverrides, quoteText],
   );
   const [sort, setSort] = useControllableState<CarrierQuoteSort>({
     value: sortProp,

package/src/carrier-quote/constants.ts

@@ -1,31 +1,18 @@
 import { RADIUS } from '../design-tokens/scales';
 import type { AccentTone } from '../theme/accent-colors';
 import type { CarrierQuoteLabels, CarrierQuoteMark, CarrierQuoteSort } from './types';
+import { CARRIER_QUOTE_MESSAGES } from './messages';
 
-/** Every default word the card and the list draw. */
+/**
+ * Every default word the card and the list draw, in English. The components
+ * speak the locale's (`CARRIER_QUOTE_MESSAGES`, via `BloomProvider locale`).
+ */
 export const CARRIER_QUOTE_LABELS: Required<
   Omit<CarrierQuoteLabels, 'marks' | 'sortOptions'>
 > & {
   marks: Record<CarrierQuoteMark, string>;
   sortOptions: Record<CarrierQuoteSort, string>;
-} = {
-  accept: 'Accept',
-  message: 'Message',
-  decline: 'Decline',
-  pickup: 'Pick-up',
-  eta: 'Arrives',
-  vehicle: 'Vehicle',
-  jobs: (jobs: string) => `${jobs} jobs`,
-  verified: 'Verified carrier',
-  marks: { cheapest: 'Cheapest', fastest: 'Fastest' },
-  showPrice: 'Show price details',
-  hidePrice: 'Hide price details',
-  priceDetails: 'Price details for',
-  sort: 'Sort offers',
-  sortOptions: { price: 'Cheapest', eta: 'Fastest', rating: 'Best rated' },
-  count: (count: number) => (count === 1 ? '1 offer' : `${count} offers`),
-  loading: 'Loading offers',
-};
+} = CARRIER_QUOTE_MESSAGES.en.labels;
 
 /**
  * The tone each mark is painted in.