@oxy.so/bloom 5.0.0 → 5.1.1

package/src/carrier-quote/messages.ts

@@ -0,0 +1,399 @@
+import type { MessageCatalog } from '../locale/messages';
+import { plural } from '../locale/plural';
+import type { CarrierQuoteMark, CarrierQuoteSort } from './types';
+
+/**
+ * Every fixed string the carrier-quote card and list draw or announce, in each
+ * Bloom language. `labels` has the shape of `CARRIER_QUOTE_LABELS` (the English
+ * entry); a caller's `labels` / `emptyTitle` / `accessibilityLabel` still win.
+ */
+export interface CarrierQuoteMessages {
+  labels: {
+    accept: string;
+    message: string;
+    decline: string;
+    pickup: string;
+    eta: string;
+    vehicle: string;
+    jobs: (jobs: string) => string;
+    verified: string;
+    marks: Record<CarrierQuoteMark, string>;
+    showPrice: string;
+    hidePrice: string;
+    /** Kept for the `labels.priceDetails` override; the default name is `priceDetailsFor`. */
+    priceDetails: string;
+    sort: string;
+    sortOptions: Record<CarrierQuoteSort, string>;
+    count: (count: number) => string;
+    loading: string;
+  };
+  emptyTitle: string;
+  emptyDescription: string;
+  /** Names the list. */
+  list: string;
+  /** Names a card's price-breakdown toggle, as one phrase per language. */
+  priceDetailsFor: (name: string) => string;
+}
+
+export const CARRIER_QUOTE_MESSAGES: MessageCatalog<CarrierQuoteMessages> = {
+  en: {
+    labels: {
+      accept: 'Accept',
+      message: 'Message',
+      decline: 'Decline',
+      pickup: 'Pick-up',
+      eta: 'Arrives',
+      vehicle: 'Vehicle',
+      jobs: (jobs) => `${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: (n) => plural('en', n, { one: '{n} offer', other: '{n} offers' }),
+      loading: 'Loading offers',
+    },
+    emptyTitle: 'No offers yet',
+    emptyDescription: 'Carriers are looking at your job. The first offers usually arrive within a few minutes.',
+    list: 'Offers',
+    priceDetailsFor: (name) => `Price details for ${name}`,
+  },
+  es: {
+    labels: {
+      accept: 'Aceptar',
+      message: 'Mensaje',
+      decline: 'Rechazar',
+      pickup: 'Recogida',
+      eta: 'Llega',
+      vehicle: 'Vehículo',
+      jobs: (jobs) => `${jobs} trabajos`,
+      verified: 'Transportista verificado',
+      marks: { cheapest: 'Más barato', fastest: 'Más rápido' },
+      showPrice: 'Ver desglose del precio',
+      hidePrice: 'Ocultar desglose del precio',
+      priceDetails: 'Desglose del precio de',
+      sort: 'Ordenar ofertas',
+      sortOptions: { price: 'Más barato', eta: 'Más rápido', rating: 'Mejor valorado' },
+      count: (n) => plural('es', n, { one: '{n} oferta', other: '{n} ofertas' }),
+      loading: 'Cargando ofertas',
+    },
+    emptyTitle: 'Aún no hay ofertas',
+    emptyDescription: 'Los transportistas están viendo tu envío. Las primeras ofertas suelen llegar en pocos minutos.',
+    list: 'Ofertas',
+    priceDetailsFor: (name) => `Desglose del precio de ${name}`,
+  },
+  ca: {
+    labels: {
+      accept: 'Accepta',
+      message: 'Missatge',
+      decline: 'Rebutja',
+      pickup: 'Recollida',
+      eta: 'Arriba',
+      vehicle: 'Vehicle',
+      jobs: (jobs) => `${jobs} feines`,
+      verified: 'Transportista verificat',
+      marks: { cheapest: 'Més barat', fastest: 'Més ràpid' },
+      showPrice: 'Mostra el desglossament del preu',
+      hidePrice: 'Amaga el desglossament del preu',
+      priceDetails: 'Desglossament del preu de',
+      sort: 'Ordena les ofertes',
+      sortOptions: { price: 'Més barat', eta: 'Més ràpid', rating: 'Més ben valorat' },
+      count: (n) => plural('ca', n, { one: '{n} oferta', other: '{n} ofertes' }),
+      loading: 'S\'estan carregant les ofertes',
+    },
+    emptyTitle: 'Encara no hi ha ofertes',
+    emptyDescription: 'Els transportistes estan mirant el teu enviament. Les primeres ofertes solen arribar en pocs minuts.',
+    list: 'Ofertes',
+    priceDetailsFor: (name) => `Desglossament del preu de ${name}`,
+  },
+  de: {
+    labels: {
+      accept: 'Annehmen',
+      message: 'Nachricht',
+      decline: 'Ablehnen',
+      pickup: 'Abholung',
+      eta: 'Ankunft',
+      vehicle: 'Fahrzeug',
+      jobs: (jobs) => `${jobs} Aufträge`,
+      verified: 'Verifizierter Spediteur',
+      marks: { cheapest: 'Günstigstes', fastest: 'Schnellstes' },
+      showPrice: 'Preisdetails anzeigen',
+      hidePrice: 'Preisdetails ausblenden',
+      priceDetails: 'Preisdetails für',
+      sort: 'Angebote sortieren',
+      sortOptions: { price: 'Günstigste', eta: 'Schnellste', rating: 'Bestbewertet' },
+      count: (n) => plural('de', n, { one: '{n} Angebot', other: '{n} Angebote' }),
+      loading: 'Angebote werden geladen',
+    },
+    emptyTitle: 'Noch keine Angebote',
+    emptyDescription: 'Spediteure sehen sich deinen Auftrag an. Die ersten Angebote kommen meist innerhalb weniger Minuten.',
+    list: 'Angebote',
+    priceDetailsFor: (name) => `Preisdetails für ${name}`,
+  },
+  fr: {
+    labels: {
+      accept: 'Accepter',
+      message: 'Message',
+      decline: 'Refuser',
+      pickup: 'Enlèvement',
+      eta: 'Arrivée',
+      vehicle: 'Véhicule',
+      jobs: (jobs) => `${jobs} missions`,
+      verified: 'Transporteur vérifié',
+      marks: { cheapest: 'Le moins cher', fastest: 'Le plus rapide' },
+      showPrice: 'Afficher le détail du prix',
+      hidePrice: 'Masquer le détail du prix',
+      priceDetails: 'Détail du prix pour',
+      sort: 'Trier les offres',
+      sortOptions: { price: 'Les moins chères', eta: 'Les plus rapides', rating: 'Les mieux notées' },
+      count: (n) => plural('fr', n, { one: '{n} offre', other: '{n} offres' }),
+      loading: 'Chargement des offres',
+    },
+    emptyTitle: 'Pas encore d\'offres',
+    emptyDescription: 'Les transporteurs examinent votre demande. Les premières offres arrivent généralement en quelques minutes.',
+    list: 'Offres',
+    priceDetailsFor: (name) => `Détail du prix pour ${name}`,
+  },
+  it: {
+    labels: {
+      accept: 'Accetta',
+      message: 'Messaggio',
+      decline: 'Rifiuta',
+      pickup: 'Ritiro',
+      eta: 'Arrivo',
+      vehicle: 'Veicolo',
+      jobs: (jobs) => `${jobs} lavori`,
+      verified: 'Corriere verificato',
+      marks: { cheapest: 'Il più economico', fastest: 'Il più veloce' },
+      showPrice: 'Mostra i dettagli del prezzo',
+      hidePrice: 'Nascondi i dettagli del prezzo',
+      priceDetails: 'Dettagli del prezzo di',
+      sort: 'Ordina le offerte',
+      sortOptions: { price: 'Più economiche', eta: 'Più veloci', rating: 'Meglio valutate' },
+      count: (n) => plural('it', n, { one: '{n} offerta', other: '{n} offerte' }),
+      loading: 'Caricamento delle offerte',
+    },
+    emptyTitle: 'Ancora nessuna offerta',
+    emptyDescription: 'I corrieri stanno guardando la tua spedizione. Le prime offerte di solito arrivano in pochi minuti.',
+    list: 'Offerte',
+    priceDetailsFor: (name) => `Dettagli del prezzo di ${name}`,
+  },
+  pt: {
+    labels: {
+      accept: 'Aceitar',
+      message: 'Mensagem',
+      decline: 'Recusar',
+      pickup: 'Coleta',
+      eta: 'Chega',
+      vehicle: 'Veículo',
+      jobs: (jobs) => `${jobs} fretes`,
+      verified: 'Transportadora verificada',
+      marks: { cheapest: 'Mais barato', fastest: 'Mais rápido' },
+      showPrice: 'Mostrar detalhes do preço',
+      hidePrice: 'Ocultar detalhes do preço',
+      priceDetails: 'Detalhes do preço de',
+      sort: 'Ordenar ofertas',
+      sortOptions: { price: 'Mais baratas', eta: 'Mais rápidas', rating: 'Mais bem avaliadas' },
+      count: (n) => plural('pt', n, { one: '{n} oferta', other: '{n} ofertas' }),
+      loading: 'Carregando ofertas',
+    },
+    emptyTitle: 'Nenhuma oferta ainda',
+    emptyDescription: 'As transportadoras estão vendo seu frete. As primeiras ofertas costumam chegar em poucos minutos.',
+    list: 'Ofertas',
+    priceDetailsFor: (name) => `Detalhes do preço de ${name}`,
+  },
+  ru: {
+    labels: {
+      accept: 'Принять',
+      message: 'Написать',
+      decline: 'Отклонить',
+      pickup: 'Забор груза',
+      eta: 'Прибытие',
+      vehicle: 'Транспорт',
+      jobs: (jobs) => `Выполнено заказов: ${jobs}`,
+      verified: 'Проверенный перевозчик',
+      marks: { cheapest: 'Дешевле всех', fastest: 'Быстрее всех' },
+      showPrice: 'Показать детали цены',
+      hidePrice: 'Скрыть детали цены',
+      priceDetails: 'Детали цены:',
+      sort: 'Сортировать предложения',
+      sortOptions: { price: 'Сначала дешёвые', eta: 'Сначала быстрые', rating: 'С лучшим рейтингом' },
+      count: (n) => plural('ru', n, { one: '{n} предложение', few: '{n} предложения', many: '{n} предложений', other: '{n} предложения' }),
+      loading: 'Загрузка предложений',
+    },
+    emptyTitle: 'Предложений пока нет',
+    emptyDescription: 'Перевозчики изучают ваш заказ. Первые предложения обычно приходят в течение нескольких минут.',
+    list: 'Предложения',
+    priceDetailsFor: (name) => `Детали цены: ${name}`,
+  },
+  tr: {
+    labels: {
+      accept: 'Kabul et',
+      message: 'Mesaj',
+      decline: 'Reddet',
+      pickup: 'Alım',
+      eta: 'Varış',
+      vehicle: 'Araç',
+      jobs: (jobs) => `${jobs} iş`,
+      verified: 'Doğrulanmış taşıyıcı',
+      marks: { cheapest: 'En ucuz', fastest: 'En hızlı' },
+      showPrice: 'Fiyat ayrıntılarını göster',
+      hidePrice: 'Fiyat ayrıntılarını gizle',
+      priceDetails: 'Fiyat ayrıntıları:',
+      sort: 'Teklifleri sırala',
+      sortOptions: { price: 'En ucuz', eta: 'En hızlı', rating: 'En yüksek puanlı' },
+      count: (n) => plural('tr', n, { other: '{n} teklif' }),
+      loading: 'Teklifler yükleniyor',
+    },
+    emptyTitle: 'Henüz teklif yok',
+    emptyDescription: 'Taşıyıcılar işinizi inceliyor. İlk teklifler genellikle birkaç dakika içinde gelir.',
+    list: 'Teklifler',
+    priceDetailsFor: (name) => `${name} için fiyat ayrıntıları`,
+  },
+  ja: {
+    labels: {
+      accept: '承諾',
+      message: 'メッセージ',
+      decline: '辞退',
+      pickup: '集荷',
+      eta: '到着',
+      vehicle: '車両',
+      jobs: (jobs) => `${jobs}件の実績`,
+      verified: '認証済みの運送業者',
+      marks: { cheapest: '最安', fastest: '最速' },
+      showPrice: '料金の内訳を表示',
+      hidePrice: '料金の内訳を隠す',
+      priceDetails: '料金の内訳：',
+      sort: '見積もりを並べ替え',
+      sortOptions: { price: '安い順', eta: '早い順', rating: '評価の高い順' },
+      count: (n) => `見積もり${n}件`,
+      loading: '見積もりを読み込み中',
+    },
+    emptyTitle: 'まだ見積もりはありません',
+    emptyDescription: '運送業者があなたの依頼を確認しています。最初の見積もりは通常数分以内に届きます。',
+    list: '見積もり',
+    priceDetailsFor: (name) => `${name}の料金の内訳`,
+  },
+  zh: {
+    labels: {
+      accept: '接受',
+      message: '发消息',
+      decline: '拒绝',
+      pickup: '取货',
+      eta: '送达',
+      vehicle: '车辆',
+      jobs: (jobs) => `${jobs} 单`,
+      verified: '已认证承运人',
+      marks: { cheapest: '最便宜', fastest: '最快' },
+      showPrice: '显示价格明细',
+      hidePrice: '隐藏价格明细',
+      priceDetails: '价格明细：',
+      sort: '排序报价',
+      sortOptions: { price: '价格最低', eta: '最快送达', rating: '评分最高' },
+      count: (n) => `${n} 个报价`,
+      loading: '正在加载报价',
+    },
+    emptyTitle: '暂无报价',
+    emptyDescription: '承运人正在查看你的订单，第一批报价通常会在几分钟内到达。',
+    list: '报价',
+    priceDetailsFor: (name) => `${name}的价格明细`,
+  },
+  ar: {
+    labels: {
+      accept: 'قبول',
+      message: 'رسالة',
+      decline: 'رفض',
+      pickup: 'الاستلام',
+      eta: 'الوصول',
+      vehicle: 'المركبة',
+      jobs: (jobs) => `${jobs} مهمة`,
+      verified: 'ناقل موثَّق',
+      marks: { cheapest: 'الأرخص', fastest: 'الأسرع' },
+      showPrice: 'عرض تفاصيل السعر',
+      hidePrice: 'إخفاء تفاصيل السعر',
+      priceDetails: 'تفاصيل السعر:',
+      sort: 'ترتيب العروض',
+      sortOptions: { price: 'الأرخص', eta: 'الأسرع', rating: 'الأعلى تقييمًا' },
+      count: (n) => plural('ar', n, { zero: 'لا عروض', one: 'عرض واحد', two: 'عرضان', few: '{n} عروض', many: '{n} عرضًا', other: '{n} عرض' }),
+      loading: 'جارٍ تحميل العروض',
+    },
+    emptyTitle: 'لا توجد عروض بعد',
+    emptyDescription: 'يطّلع الناقلون على طلبك. تصل العروض الأولى عادةً خلال دقائق قليلة.',
+    list: 'العروض',
+    priceDetailsFor: (name) => `تفاصيل سعر ${name}`,
+  },
+  hi: {
+    labels: {
+      accept: 'स्वीकार करें',
+      message: 'संदेश',
+      decline: 'अस्वीकार करें',
+      pickup: 'पिक-अप',
+      eta: 'पहुँचेगा',
+      vehicle: 'वाहन',
+      jobs: (jobs) => `${jobs} काम`,
+      verified: 'सत्यापित वाहक',
+      marks: { cheapest: 'सबसे सस्ता', fastest: 'सबसे तेज़' },
+      showPrice: 'कीमत का विवरण दिखाएं',
+      hidePrice: 'कीमत का विवरण छिपाएं',
+      priceDetails: 'कीमत का विवरण:',
+      sort: 'ऑफ़र क्रमबद्ध करें',
+      sortOptions: { price: 'सबसे सस्ते', eta: 'सबसे तेज़', rating: 'सबसे अच्छी रेटिंग' },
+      count: (n) => `${n} ऑफ़र`,
+      loading: 'ऑफ़र लोड हो रहे हैं',
+    },
+    emptyTitle: 'अभी कोई ऑफ़र नहीं',
+    emptyDescription: 'वाहक आपका काम देख रहे हैं। पहले ऑफ़र आमतौर पर कुछ ही मिनटों में आ जाते हैं।',
+    list: 'ऑफ़र',
+    priceDetailsFor: (name) => `${name} की कीमत का विवरण`,
+  },
+  bn: {
+    labels: {
+      accept: 'গ্রহণ করুন',
+      message: 'বার্তা',
+      decline: 'প্রত্যাখ্যান করুন',
+      pickup: 'পিক-আপ',
+      eta: 'পৌঁছাবে',
+      vehicle: 'যানবাহন',
+      jobs: (jobs) => `${jobs}টি কাজ`,
+      verified: 'যাচাইকৃত পরিবাহক',
+      marks: { cheapest: 'সবচেয়ে সস্তা', fastest: 'সবচেয়ে দ্রুত' },
+      showPrice: 'দামের বিবরণ দেখান',
+      hidePrice: 'দামের বিবরণ লুকান',
+      priceDetails: 'দামের বিবরণ:',
+      sort: 'অফার সাজান',
+      sortOptions: { price: 'সবচেয়ে সস্তা', eta: 'সবচেয়ে দ্রুত', rating: 'সেরা রেটিং' },
+      count: (n) => `${n}টি অফার`,
+      loading: 'অফার লোড হচ্ছে',
+    },
+    emptyTitle: 'এখনও কোনো অফার নেই',
+    emptyDescription: 'পরিবাহকেরা আপনার কাজটি দেখছেন। প্রথম অফারগুলো সাধারণত কয়েক মিনিটের মধ্যে আসে।',
+    list: 'অফার',
+    priceDetailsFor: (name) => `${name}-এর দামের বিবরণ`,
+  },
+  id: {
+    labels: {
+      accept: 'Terima',
+      message: 'Pesan',
+      decline: 'Tolak',
+      pickup: 'Penjemputan',
+      eta: 'Tiba',
+      vehicle: 'Kendaraan',
+      jobs: (jobs) => `${jobs} pekerjaan`,
+      verified: 'Pengangkut terverifikasi',
+      marks: { cheapest: 'Termurah', fastest: 'Tercepat' },
+      showPrice: 'Tampilkan rincian harga',
+      hidePrice: 'Sembunyikan rincian harga',
+      priceDetails: 'Rincian harga untuk',
+      sort: 'Urutkan penawaran',
+      sortOptions: { price: 'Termurah', eta: 'Tercepat', rating: 'Rating terbaik' },
+      count: (n) => `${n} penawaran`,
+      loading: 'Memuat penawaran',
+    },
+    emptyTitle: 'Belum ada penawaran',
+    emptyDescription: 'Para pengangkut sedang melihat pekerjaan Anda. Penawaran pertama biasanya tiba dalam beberapa menit.',
+    list: 'Penawaran',
+    priceDetailsFor: (name) => `Rincian harga untuk ${name}`,
+  },
+};

package/src/cart-panel/CartLine.tsx

@@ -5,12 +5,14 @@ import { GlyphButton } from '../button';
 import { RiDeleteBinLine } from '../icons/remix/RiDeleteBinLine';
 import { Item } from '../item';
 import { ListingPriceLines } from '../listing-card/parts';
+import { useMessages } from '../locale/messages';
 import { MenuItemThumb } from '../menu-item/parts';
 import { Stepper } from '../stepper';
 import { useSurfaceFill } from '../styles/surface-levels';
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
 import { CART_GEOMETRY } from './constants';
+import { CART_PANEL_MESSAGES } from './messages';
 import { composeCartLineName, optionsLine, resolveCartPaint } from './shared';
 import type { CartLineProps } from './types';
 
@@ -58,7 +60,7 @@ function CartLineComponent(props: CartLineProps) {
     photo,
     photoVariant,
     unavailable = false,
-    unavailableLabel = 'Sold out',
+    unavailableLabel: unavailableLabelProp,
     onQuantityChange,
     onRemove,
     removeLabel,
@@ -69,13 +71,15 @@ function CartLineComponent(props: CartLineProps) {
     testID,
   } = props;
 
+  const { messages } = useMessages(CART_PANEL_MESSAGES);
+  const unavailableLabel = unavailableLabelProp ?? messages.soldOut;
   const theme = useTheme();
   const surface = useSurfaceFill();
   const paint = useMemo(() => resolveCartPaint(theme, surface), [theme, surface]);
   const g = CART_GEOMETRY[density];
   const compact = density === 'compact';
   const chosen = optionsLine(options);
-  const removeName = removeLabel ?? `Remove ${name}`;
+  const removeName = removeLabel ?? messages.removeItem(name);
   // The stepper carries removal only when it is live; a disabled stepper
   // (sold out) cannot, and the line still needs its remove control.
   const stepperRemoves = removeInStepper && onRemove !== undefined && onQuantityChange !== undefined && !unavailable;
@@ -84,7 +88,7 @@ function CartLineComponent(props: CartLineProps) {
     <Item
       role="listitem"
       density={density}
-      accessibilityLabel={accessibilityLabel ?? composeCartLineName(props)}
+      accessibilityLabel={accessibilityLabel ?? composeCartLineName(props, messages)}
       leading={
         <MenuItemThumb
           photo={photo}

package/src/cart-panel/CartPanel.tsx

@@ -15,6 +15,7 @@ import { RiStore2Line } from '../icons/remix/RiStore2Line';
 import { useImageResolver } from '../image-resolver/context';
 import { Item } from '../item';
 import { resolvePhoto } from '../listing-card/shared';
+import { useMessages } from '../locale/messages';
 import { PriceSummary } from '../price-breakdown';
 import { Meter } from '../stat-bar';
 import { useSurfaceFill } from '../styles/surface-levels';
@@ -25,6 +26,7 @@ import { CartLine } from './CartLine';
 import { CartPromoField } from './CartPromoField';
 import { CartTipPicker } from './CartTipPicker';
 import { CART_BLOCK_GAP, CART_GEOMETRY, CART_LINE_GAP, CART_METER_HEIGHT } from './constants';
+import { CART_PANEL_MESSAGES } from './messages';
 import { resolveCartPaint, type CartPaint } from './shared';
 import type { CartMinimumOrder, CartPanelProps } from './types';
 
@@ -193,16 +195,21 @@ function CartPanelComponent({
   promo,
   summary,
   onCheckout,
-  checkoutLabel = 'Go to checkout',
+  checkoutLabel: checkoutLabelProp,
   checkoutDisabled = false,
   empty,
-  emptyTitle = 'Your basket is empty',
-  emptyDescription = 'Add something from the menu and it will show up here.',
+  emptyTitle: emptyTitleProp,
+  emptyDescription: emptyDescriptionProp,
   density = 'comfortable',
-  accessibilityLabel = 'Basket',
+  accessibilityLabel: accessibilityLabelProp,
   style,
   testID,
 }: CartPanelProps) {
+  const { messages } = useMessages(CART_PANEL_MESSAGES);
+  const checkoutLabel = checkoutLabelProp ?? messages.checkout;
+  const emptyTitle = emptyTitleProp ?? messages.emptyTitle;
+  const emptyDescription = emptyDescriptionProp ?? messages.emptyDescription;
+  const accessibilityLabel = accessibilityLabelProp ?? messages.basket;
   const theme = useTheme();
   const surface = useSurfaceFill();
   const paint = useMemo(() => resolveCartPaint(theme, surface), [theme, surface]);

package/src/cart-panel/CartPromoField.tsx

@@ -6,10 +6,12 @@ import { Chip } from '../chip';
 import { Field } from '../field';
 import { RiTicketLine } from '../icons/remix/RiTicketLine';
 import { InputGroup, InputGroupAddon } from '../input-group';
+import { useMessages } from '../locale/messages';
 import { useSurfaceFill } from '../styles/surface-levels';
 import { TextFieldInput } from '../text-field';
 import { resolveAccentColors } from '../theme/accent-colors';
 import { useTheme } from '../theme/use-theme';
+import { CART_PANEL_MESSAGES } from './messages';
 import { resolveCartPaint } from './shared';
 import type { CartPromoFieldProps } from './types';
 
@@ -41,14 +43,17 @@ function CartPromoFieldComponent({
   applied,
   onRemove,
   removeLabel,
-  label = 'Promo code',
+  label: labelProp,
   placeholder,
-  applyLabel = 'Apply',
+  applyLabel: applyLabelProp,
   error,
   disabled = false,
   style,
   testID,
 }: CartPromoFieldProps) {
+  const { messages } = useMessages(CART_PANEL_MESSAGES);
+  const label = labelProp ?? messages.promoCode;
+  const applyLabel = applyLabelProp ?? messages.apply;
   const theme = useTheme();
   const surface = useSurfaceFill();
   const paint = useMemo(() => resolveCartPaint(theme, surface), [theme, surface]);
@@ -67,7 +72,7 @@ function CartPromoFieldComponent({
             surface={paint.wash}
             startIcon={<RiTicketLine width={PROMO_GLYPH} height={PROMO_GLYPH} fill={glyph} />}
             onClose={disabled ? undefined : onRemove}
-            closeLabel={removeLabel ?? `Remove ${applied}`}
+            closeLabel={removeLabel ?? messages.removeItem(applied)}
             testID={testID ? `${testID}-applied` : undefined}
           >
             {applied}

package/src/cart-panel/CartTipPicker.tsx

@@ -1,10 +1,12 @@
 import React, { memo, useMemo } from 'react';
 import { View } from 'react-native';
 
+import { useMessages } from '../locale/messages';
 import { SegmentedControl, SegmentedControlItem, SegmentedControlItemText } from '../segmented-control';
 import { useSurfaceFill } from '../styles/surface-levels';
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
+import { CART_PANEL_MESSAGES } from './messages';
 import { resolveCartPaint } from './shared';
 import type { CartTipPickerProps } from './types';
 
@@ -28,12 +30,14 @@ function CartTipPickerComponent({
   options,
   value,
   onValueChange,
-  label = 'Tip',
+  label: labelProp,
   description,
   disabled = false,
   style,
   testID,
 }: CartTipPickerProps) {
+  const { messages } = useMessages(CART_PANEL_MESSAGES);
+  const label = labelProp ?? messages.tip;
   const theme = useTheme();
   const surface = useSurfaceFill();
   const paint = useMemo(() => resolveCartPaint(theme, surface), [theme, surface]);