@oxy.so/bloom 5.0.0 → 5.1.0

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/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.