@oxy.so/bloom 5.0.0 → 5.1.1

package/src/pipeline/DealCard.tsx

@@ -6,6 +6,7 @@ import { Badge } from '../badge';
 import { GlyphButton } from '../button';
 import { Card } from '../card';
 import { RiArrowLeftRightLine } from '../icons/remix/RiArrowLeftRightLine';
+import { useMessages } from '../locale/messages';
 import { adoptStyleSheet } from '../styles/adopt-style-sheet';
 import { SurfaceLevelProvider, surfaceFillVars } from '../styles/surface-levels';
 import { webDataSet } from '../styles/web-data';
@@ -21,6 +22,7 @@ import {
   joinDealName,
   resolvePipelinePaint,
 } from './shared';
+import { PIPELINE_MESSAGES } from './messages';
 import type { DealCardProps } from './types';
 
 /**
@@ -61,6 +63,7 @@ function DealCardComponent({
   style,
   testID,
 }: DealCardProps) {
+  const { messages } = useMessages(PIPELINE_MESSAGES);
   const theme = useTheme();
   const paint = useMemo(() => resolvePipelinePaint(theme, theme.colors.card), [theme]);
 
@@ -69,7 +72,7 @@ function DealCardComponent({
   }, []);
 
   const id = (part: string) => (testID ? `${testID}-${part}` : undefined);
-  const signal = dealHealthLabel({ health, healthLabel, stalledFor });
+  const signal = dealHealthLabel({ health, healthLabel, stalledFor }, messages);
   const HealthIcon = health === undefined ? undefined : DEAL_HEALTH[health].icon;
 
   const titleBlock = (
@@ -135,7 +138,7 @@ function DealCardComponent({
               onPress={onMove}
               hoverFill={paint.raised}
               ring={paint.ring}
-              accessibilityLabel={moveLabel ?? `Move ${title}`}
+              accessibilityLabel={moveLabel ?? messages.move(title)}
               testID={id('move')}
             />
           ) : null}

package/src/pipeline/PipelineBoard.tsx

@@ -4,6 +4,8 @@ import { ScrollView, View } from 'react-native';
 import { Chip, ChipRow } from '../chip';
 import { useControllableState } from '../hooks/use-controllable-state';
 import { useContainerWidth } from '../hooks/use-container-width';
+import { useMessages } from '../locale/messages';
+import { PIPELINE_MESSAGES } from './messages';
 import { PipelineColumn } from './PipelineColumn';
 import {
   PIPELINE_COLUMN_WIDTH,
@@ -61,6 +63,7 @@ function PipelineBoardComponent({
   style,
   testID,
 }: PipelineBoardProps) {
+  const { messages } = useMessages(PIPELINE_MESSAGES);
   const { width, onLayout } = useContainerWidth();
   const [selectedId, setSelectedId] = useControllableState<string | undefined>({
     value: stageId,
@@ -97,7 +100,7 @@ function PipelineBoardComponent({
       <View onLayout={onLayout} style={[{ minWidth: 0 }, style]} testID={testID}>
         <ChipRow
           role="tablist"
-          accessibilityLabel={accessibilityLabel ?? 'Pipeline stages'}
+          accessibilityLabel={accessibilityLabel ?? messages.stages}
           gap={6}
           style={{ minWidth: 0 }}
           testID={id('tabs')}
@@ -110,7 +113,7 @@ function PipelineBoardComponent({
               selected={stage.id === current?.id}
               onPress={() => setSelectedId(stage.id)}
               accessibilityLabel={
-                stage.count === undefined ? stage.name : `${stage.name}, ${stage.count} deals`
+                stage.count === undefined ? stage.name : messages.stageWithCount(stage.name, stage.count)
               }
               testID={id(`tab-${stage.id}`)}
             >

package/src/pipeline/PipelineColumn.tsx

@@ -3,11 +3,13 @@ import { View } from 'react-native';
 
 import { Badge } from '../badge';
 import { Button } from '../button';
+import { useMessages } from '../locale/messages';
 import * as Skeleton from '../skeleton';
 import { SurfaceLevelProvider, surfaceFillVars, useSurfaceFill } from '../styles/surface-levels';
 import { resolveAccentColors } from '../theme/accent-colors';
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
+import { PIPELINE_MESSAGES } from './messages';
 import {
   PIPELINE_CARD_GAP,
   PIPELINE_COLUMN_PADDING,
@@ -38,15 +40,18 @@ function PipelineColumnComponent({
   count,
   total,
   tone = 'primary',
-  emptyLabel = 'No deals in this stage',
+  emptyLabel: emptyLabelProp,
   loading = false,
   onLoadMore,
-  loadMoreLabel = 'Load more',
+  loadMoreLabel: loadMoreLabelProp,
   children,
   width,
   style,
   testID,
 }: PipelineColumnProps) {
+  const { messages } = useMessages(PIPELINE_MESSAGES);
+  const emptyLabel = emptyLabelProp ?? messages.empty;
+  const loadMoreLabel = loadMoreLabelProp ?? messages.loadMore;
   const theme = useTheme();
   const behind = useSurfaceFill();
   const fill = useMemo(() => pipelineColumnFill(theme, behind), [theme, behind]);

package/src/pipeline/constants.ts

@@ -3,10 +3,12 @@ import { RiCheckboxCircleLine } from '../icons/remix/RiCheckboxCircleLine';
 import { RiTimeLine } from '../icons/remix/RiTimeLine';
 import type { BloomIconComponent } from '../icons/icon-component';
 import type { AccentTone } from '../theme/accent-colors';
+import { PIPELINE_MESSAGES } from './messages';
 import type { DealHealth } from './types';
 
 /**
- * The one health signal, as a tone, a word and a glyph.
+ * The one health signal, as a tone, a word (English; the card speaks
+ * `PIPELINE_MESSAGES` in the resolved locale) and a glyph.
  *
  * A tone rather than a colour: `resolveAccentColors` owns what "warning" looks
  * like on the surface the card lands on, in both modes and in all 64 presets,
@@ -16,9 +18,9 @@ export const DEAL_HEALTH: Record<
   DealHealth,
   { tone: AccentTone; label: string; icon: BloomIconComponent }
 > = {
-  'on-track': { tone: 'success', label: 'On track', icon: RiCheckboxCircleLine },
-  'at-risk': { tone: 'warning', label: 'At risk', icon: RiAlarmWarningLine },
-  stalled: { tone: 'error', label: 'Stalled', icon: RiTimeLine },
+  'on-track': { tone: 'success', label: PIPELINE_MESSAGES.en.health['on-track'], icon: RiCheckboxCircleLine },
+  'at-risk': { tone: 'warning', label: PIPELINE_MESSAGES.en.health['at-risk'], icon: RiAlarmWarningLine },
+  stalled: { tone: 'error', label: PIPELINE_MESSAGES.en.health.stalled, icon: RiTimeLine },
 };
 
 /** Card geometry. */

package/src/pipeline/messages.ts

@@ -0,0 +1,164 @@
+import type { MessageCatalog } from '../locale/messages';
+import { plural } from '../locale/plural';
+import type { DealHealth } from './types';
+
+/**
+ * Every fixed string the pipeline family draws or announces, in each Bloom
+ * language. A caller's `healthLabel`, `moveLabel`, `emptyLabel`,
+ * `loadMoreLabel` and `accessibilityLabel` still win.
+ */
+export interface PipelineMessages {
+  /** Each health's word. */
+  health: Record<DealHealth, string>;
+  /** The stalled signal with its pre-formatted duration: "Stalled for 14 days". */
+  stalledFor: (duration: string) => string;
+  /** The move action's name: "Move Acme renewal". */
+  move: (title: string) => string;
+  /** Names the tab row of the `single` layout. */
+  stages: string;
+  /** A stage tab's name with its count: "Qualified, 3 deals". */
+  stageWithCount: (name: string, count: number) => string;
+  /** What an empty column says. */
+  empty: string;
+  loadMore: string;
+}
+
+export const PIPELINE_MESSAGES: MessageCatalog<PipelineMessages> = {
+  en: {
+    health: { 'on-track': 'On track', 'at-risk': 'At risk', stalled: 'Stalled' },
+    stalledFor: (duration) => `Stalled for ${duration}`,
+    move: (title) => `Move ${title}`,
+    stages: 'Pipeline stages',
+    stageWithCount: (name, n) => `${name}, ${plural('en', n, { one: '{n} deal', other: '{n} deals' })}`,
+    empty: 'No deals in this stage',
+    loadMore: 'Load more',
+  },
+  es: {
+    health: { 'on-track': 'En curso', 'at-risk': 'En riesgo', stalled: 'Estancado' },
+    stalledFor: (duration) => `Estancado desde hace ${duration}`,
+    move: (title) => `Mover ${title}`,
+    stages: 'Etapas del embudo',
+    stageWithCount: (name, n) => `${name}, ${plural('es', n, { one: '{n} oportunidad', other: '{n} oportunidades' })}`,
+    empty: 'No hay oportunidades en esta etapa',
+    loadMore: 'Cargar más',
+  },
+  ca: {
+    health: { 'on-track': 'Al dia', 'at-risk': 'En risc', stalled: 'Encallat' },
+    stalledFor: (duration) => `Encallat des de fa ${duration}`,
+    move: (title) => `Mou ${title}`,
+    stages: "Etapes de l'embut",
+    stageWithCount: (name, n) => `${name}, ${plural('ca', n, { one: '{n} oportunitat', other: '{n} oportunitats' })}`,
+    empty: 'No hi ha oportunitats en aquesta etapa',
+    loadMore: "Carrega'n més",
+  },
+  de: {
+    health: { 'on-track': 'Im Plan', 'at-risk': 'Gefährdet', stalled: 'Stockt' },
+    stalledFor: (duration) => `Stockt seit ${duration}`,
+    move: (title) => `${title} verschieben`,
+    stages: 'Pipeline-Phasen',
+    stageWithCount: (name, n) => `${name}, ${plural('de', n, { one: '{n} Deal', other: '{n} Deals' })}`,
+    empty: 'Keine Deals in dieser Phase',
+    loadMore: 'Mehr laden',
+  },
+  fr: {
+    health: { 'on-track': 'En bonne voie', 'at-risk': 'À risque', stalled: 'Bloqué' },
+    stalledFor: (duration) => `Bloqué depuis ${duration}`,
+    move: (title) => `Déplacer ${title}`,
+    stages: 'Étapes du pipeline',
+    stageWithCount: (name, n) => `${name}, ${plural('fr', n, { one: '{n} affaire', other: '{n} affaires' })}`,
+    empty: 'Aucune affaire à cette étape',
+    loadMore: 'Charger plus',
+  },
+  it: {
+    health: { 'on-track': 'In linea', 'at-risk': 'A rischio', stalled: 'In stallo' },
+    stalledFor: (duration) => `In stallo da ${duration}`,
+    move: (title) => `Sposta ${title}`,
+    stages: 'Fasi della pipeline',
+    stageWithCount: (name, n) => `${name}, ${plural('it', n, { one: '{n} trattativa', other: '{n} trattative' })}`,
+    empty: 'Nessuna trattativa in questa fase',
+    loadMore: 'Carica altro',
+  },
+  pt: {
+    health: { 'on-track': 'No prazo', 'at-risk': 'Em risco', stalled: 'Parado' },
+    stalledFor: (duration) => `Parado há ${duration}`,
+    move: (title) => `Mover ${title}`,
+    stages: 'Etapas do funil',
+    stageWithCount: (name, n) => `${name}, ${plural('pt', n, { one: '{n} negócio', other: '{n} negócios' })}`,
+    empty: 'Nenhum negócio nesta etapa',
+    loadMore: 'Carregar mais',
+  },
+  ru: {
+    health: { 'on-track': 'По плану', 'at-risk': 'Под угрозой', stalled: 'Застряла' },
+    stalledFor: (duration) => `Без движения: ${duration}`,
+    move: (title) => `Переместить «${title}»`,
+    stages: 'Этапы воронки',
+    stageWithCount: (name, n) =>
+      `${name}, ${plural('ru', n, { one: '{n} сделка', few: '{n} сделки', many: '{n} сделок', other: '{n} сделки' })}`,
+    empty: 'На этом этапе нет сделок',
+    loadMore: 'Загрузить ещё',
+  },
+  tr: {
+    health: { 'on-track': 'Yolunda', 'at-risk': 'Risk altında', stalled: 'Durdu' },
+    stalledFor: (duration) => `${duration} süredir duruyor`,
+    move: (title) => `${title} fırsatını taşı`,
+    stages: 'Satış hattı aşamaları',
+    stageWithCount: (name, n) => `${name}, ${n} fırsat`,
+    empty: 'Bu aşamada fırsat yok',
+    loadMore: 'Daha fazla yükle',
+  },
+  ja: {
+    health: { 'on-track': '順調', 'at-risk': '要注意', stalled: '停滞中' },
+    stalledFor: (duration) => `${duration}停滞中`,
+    move: (title) => `「${title}」を移動`,
+    stages: 'パイプラインのステージ',
+    stageWithCount: (name, n) => `${name}、商談${n}件`,
+    empty: 'このステージに商談はありません',
+    loadMore: 'さらに読み込む',
+  },
+  zh: {
+    health: { 'on-track': '进展顺利', 'at-risk': '有风险', stalled: '停滞' },
+    stalledFor: (duration) => `已停滞 ${duration}`,
+    move: (title) => `移动“${title}”`,
+    stages: '销售管道阶段',
+    stageWithCount: (name, n) => `${name}，${n} 个商机`,
+    empty: '此阶段没有商机',
+    loadMore: '加载更多',
+  },
+  ar: {
+    health: { 'on-track': 'على المسار', 'at-risk': 'معرّضة للخطر', stalled: 'متوقفة' },
+    stalledFor: (duration) => `متوقفة منذ ${duration}`,
+    move: (title) => `نقل ${title}`,
+    stages: 'مراحل خط المبيعات',
+    stageWithCount: (name, n) =>
+      `${name}، ${plural('ar', n, { zero: 'لا صفقات', one: 'صفقة واحدة', two: 'صفقتان', few: '{n} صفقات', many: '{n} صفقة', other: '{n} صفقة' })}`,
+    empty: 'لا توجد صفقات في هذه المرحلة',
+    loadMore: 'تحميل المزيد',
+  },
+  hi: {
+    health: { 'on-track': 'सही दिशा में', 'at-risk': 'जोखिम में', stalled: 'अटकी हुई' },
+    stalledFor: (duration) => `${duration} से अटकी हुई`,
+    move: (title) => `${title} को ले जाएँ`,
+    stages: 'पाइपलाइन चरण',
+    stageWithCount: (name, n) => `${name}, ${plural('hi', n, { one: '{n} डील', other: '{n} डील' })}`,
+    empty: 'इस चरण में कोई डील नहीं',
+    loadMore: 'और लोड करें',
+  },
+  bn: {
+    health: { 'on-track': 'ঠিক পথে', 'at-risk': 'ঝুঁকিতে', stalled: 'আটকে আছে' },
+    stalledFor: (duration) => `${duration} ধরে আটকে আছে`,
+    move: (title) => `${title} সরান`,
+    stages: 'পাইপলাইনের ধাপ',
+    stageWithCount: (name, n) => `${name}, ${n}টি ডিল`,
+    empty: 'এই ধাপে কোনো ডিল নেই',
+    loadMore: 'আরও লোড করুন',
+  },
+  id: {
+    health: { 'on-track': 'Sesuai rencana', 'at-risk': 'Berisiko', stalled: 'Macet' },
+    stalledFor: (duration) => `Macet selama ${duration}`,
+    move: (title) => `Pindahkan ${title}`,
+    stages: 'Tahapan pipeline',
+    stageWithCount: (name, n) => `${name}, ${n} kesepakatan`,
+    empty: 'Tidak ada kesepakatan di tahap ini',
+    loadMore: 'Muat lebih banyak',
+  },
+};

package/src/pipeline/shared.ts

@@ -13,6 +13,7 @@ import { hairlineOn, surfaceFillOn, surfaceTextOn } from '../styles/surface-leve
 import type { AccentTone } from '../theme/accent-colors';
 import type { Theme } from '../theme/types';
 import { DEAL_HEALTH } from './constants';
+import { PIPELINE_MESSAGES, type PipelineMessages } from './messages';
 import type { DealCardProps, DealHealth } from './types';
 
 export interface PipelinePaint {
@@ -54,12 +55,13 @@ export function pipelineColumnFill(theme: Theme, behind: string): string {
  */
 export function dealHealthLabel(
   props: Pick<DealCardProps, 'health' | 'healthLabel' | 'stalledFor'>,
+  messages: PipelineMessages = PIPELINE_MESSAGES.en,
 ): string | null {
   const { health, healthLabel, stalledFor } = props;
   if (health === undefined) return healthLabel ?? null;
   if (healthLabel !== undefined) return healthLabel;
-  if (health === 'stalled' && stalledFor) return `Stalled for ${stalledFor}`;
-  return DEAL_HEALTH[health].label;
+  if (health === 'stalled' && stalledFor) return messages.stalledFor(stalledFor);
+  return messages.health[health];
 }
 
 /** The tone a health draws in, or the neutral one when the card has no health. */

package/src/pipeline/types.ts

@@ -50,7 +50,7 @@ export interface DealCardProps {
    * sheet, a dialog).
    */
   onMove?: () => void;
-  /** The move action's accessible name. Default `"Move {title}"`. */
+  /** The move action's accessible name (`"Move {title}"` in English). */
   moveLabel?: string;
   /** Trailing slot beside the move action: a `DropdownMenu` trigger, an assign button. */
   actions?: ReactNode;
@@ -74,13 +74,13 @@ export interface PipelineStage {
   total?: string;
   /** The stage's dot. Default `primary`. */
   tone?: AccentTone;
-  /** What an empty column says. Default `"No deals in this stage"`. */
+  /** What an empty column says (`"No deals in this stage"` in English). */
   emptyLabel?: string;
   /** Draws placeholder cards instead of the children. */
   loading?: boolean;
   /** Renders the "load more" action under the cards. */
   onLoadMore?: () => void;
-  /** Default `"Load more"`. */
+  /** `"Load more"` in English. */
   loadMoreLabel?: string;
 }
 

package/src/place-details/PlaceAmenities.tsx

@@ -1,6 +1,8 @@
 import React, { memo, useMemo } from 'react';
 import { View } from 'react-native';
 
+import { Button } from '../button';
+import { LISTING_DETAILS_MESSAGES } from '../listing-details/messages';
 import { Chip } from '../chip';
 import { AmenityList } from '../listing-details/AmenityList';
 import type { Amenity } from '../listing-details/types';
@@ -47,6 +49,7 @@ function PlaceAmenitiesComponent({
   testID,
 }: PlaceAmenitiesProps) {
   const { messages } = useMessages(PLACE_DETAILS_MESSAGES);
+  const { messages: listingMessages } = useMessages(LISTING_DETAILS_MESSAGES);
   const unavailableLabel = unavailableLabelProp ?? messages.notAvailable;
   const accessibilityLabel = accessibilityLabelProp ?? messages.amenities;
   const theme = useTheme();
@@ -81,6 +84,7 @@ function PlaceAmenitiesComponent({
   }
 
   const shown = limit != null && limit >= 0 ? items.slice(0, limit) : items;
+  const fullCount = Math.max(total ?? items.length, items.length);
 
   return (
     <View
@@ -119,6 +123,11 @@ function PlaceAmenitiesComponent({
           </Chip>
         </View>
       ))}
+      {onShowAll && fullCount > shown.length ? (
+        <Button variant="secondary" onPress={onShowAll} testID={testID ? `${testID}-show-all` : undefined}>
+          {showAllLabel ? showAllLabel(fullCount) : listingMessages.showAllAmenities(fullCount)}
+        </Button>
+      ) : null}
     </View>
   );
 }

package/src/place-details/PlacePopularTimes.tsx

@@ -127,7 +127,7 @@ function PlacePopularTimesComponent({
           type="radio"
           size="small"
           label={daysLabel}
-          value={selected}
+          value={current?.id ?? ''}
           onValueChange={setSelected}
           testID={testID ? `${testID}-days` : undefined}
         >
@@ -242,8 +242,14 @@ function PlacePopularTimesComponent({
                   // centred on a band that starts at the edge, and a 40-wide
                   // slot centred there would hang outside the block.
                   const left = Math.max(0, Math.min((width ?? 0) - LABEL_SLOT, centre - LABEL_SLOT / 2));
+                  if (currentIndex != null && index !== currentIndex) {
+                    const currentCentre = currentIndex * band + band / 2;
+                    const currentLeft = Math.max(0, Math.min((width ?? 0) - LABEL_SLOT, currentCentre - LABEL_SLOT / 2));
+                    if (Math.abs(left - currentLeft) < LABEL_SLOT) return null;
+                  }
                   return (
                     <Text
+                      testID={testID ? `${testID}-hour-${index}` : undefined}
                       key={`label-${index}`}
                       variant="caption-2-regular"
                       numberOfLines={1}

package/src/price-breakdown/PriceSummary.tsx

@@ -6,6 +6,7 @@ import { Divider } from '../divider';
 import { useControllableState } from '../hooks/use-controllable-state';
 import { RiArrowDownSLine } from '../icons/remix/RiArrowDownSLine';
 import { RiArrowUpSLine } from '../icons/remix/RiArrowUpSLine';
+import { useMessages } from '../locale/messages';
 import { useSurfaceFill } from '../styles/surface-levels';
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
@@ -13,8 +14,8 @@ import {
   PRICE_LINE_GAP,
   PRICE_PENDING_PLACEHOLDER,
   PRICE_RULE_SPACING,
-  PRICE_STATE_LABELS,
 } from './constants';
+import { PRICE_BREAKDOWN_MESSAGES } from './messages';
 import { PriceSummaryLine } from './PriceSummaryLine';
 import { resolvePricePaint } from './shared';
 import type { PriceSummaryProps } from './types';
@@ -45,14 +46,18 @@ function PriceSummaryComponent({
   expanded,
   defaultExpanded = false,
   onExpandedChange,
-  expandLabel = 'Show price details',
-  collapseLabel = 'Hide price details',
+  expandLabel: expandLabelProp,
+  collapseLabel: collapseLabelProp,
   stateLabels,
   pendingPlaceholder = PRICE_PENDING_PLACEHOLDER,
-  accessibilityLabel = 'Price breakdown',
+  accessibilityLabel: accessibilityLabelProp,
   style,
   testID,
 }: PriceSummaryProps) {
+  const { messages } = useMessages(PRICE_BREAKDOWN_MESSAGES);
+  const expandLabel = expandLabelProp ?? messages.showDetails;
+  const collapseLabel = collapseLabelProp ?? messages.hideDetails;
+  const accessibilityLabel = accessibilityLabelProp ?? messages.breakdown;
   const theme = useTheme();
   const surface = useSurfaceFill();
   const paint = useMemo(() => resolvePricePaint(theme, surface), [theme, surface]);
@@ -63,7 +68,7 @@ function PriceSummaryComponent({
   });
   const toggle = useCallback(() => setOpen(!open), [open, setOpen]);
 
-  const words = { ...PRICE_STATE_LABELS, ...stateLabels };
+  const words = { ...messages.states, ...stateLabels };
   const totalCaveat = total && total.state && total.state !== 'final' ? words[total.state] : undefined;
   const showLines = !collapsible || open;
 

package/src/price-breakdown/PriceSummaryLine.tsx

@@ -3,6 +3,7 @@ import { View } from 'react-native';
 
 import { GlyphButton } from '../button';
 import { RiInformationLine } from '../icons/remix/RiInformationLine';
+import { useMessages } from '../locale/messages';
 import { Popover, PopoverContent, PopoverTrigger } from '../popover';
 import { useSurfaceFill } from '../styles/surface-levels';
 import { useTheme } from '../theme/use-theme';
@@ -12,8 +13,8 @@ import {
   PRICE_INFO_SIZE,
   PRICE_LINE_HEIGHT,
   PRICE_PENDING_PLACEHOLDER,
-  PRICE_STATE_LABELS,
 } from './constants';
+import { PRICE_BREAKDOWN_MESSAGES } from './messages';
 import { resolvePricePaint } from './shared';
 import type { PriceSummaryLineProps } from './types';
 
@@ -50,10 +51,11 @@ function PriceSummaryLineComponent({
   style,
   testID,
 }: PriceSummaryLineProps) {
+  const { messages } = useMessages(PRICE_BREAKDOWN_MESSAGES);
   const theme = useTheme();
   const surface = useSurfaceFill();
   const paint = useMemo(() => resolvePricePaint(theme, surface), [theme, surface]);
-  const words = { ...PRICE_STATE_LABELS, ...stateLabels };
+  const words = { ...messages.states, ...stateLabels };
 
   const muted = tone === 'muted';
   const labelColor = muted ? paint.textSecondary : paint.text;
@@ -99,7 +101,7 @@ function PriceSummaryLineComponent({
                 icon={RiInformationLine}
                 color={paint.textTertiary}
                 hoverColor={paint.text}
-                accessibilityLabel={infoAccessibilityLabel ?? `About ${label}`}
+                accessibilityLabel={infoAccessibilityLabel ?? messages.about(label)}
                 testID={testID ? `${testID}-info` : undefined}
               />
             </PopoverTrigger>

package/src/price-breakdown/constants.ts

@@ -1,10 +1,12 @@
+import { PRICE_BREAKDOWN_MESSAGES } from './messages';
 import type { PriceLineState } from './types';
 
-/** The word drawn beside an amount that is not the answer yet. */
-export const PRICE_STATE_LABELS: Record<Exclude<PriceLineState, 'final'>, string> = {
-  estimated: 'Estimated',
-  pending: 'Pending',
-};
+/**
+ * The word drawn beside an amount that is not the answer yet, in English. The
+ * components speak `PRICE_BREAKDOWN_MESSAGES` in the resolved locale.
+ */
+export const PRICE_STATE_LABELS: Record<Exclude<PriceLineState, 'final'>, string> =
+  PRICE_BREAKDOWN_MESSAGES.en.states;
 
 /** Drawn where the amount would be on a line that has none. */
 export const PRICE_PENDING_PLACEHOLDER = '—';

package/src/price-breakdown/messages.ts

@@ -0,0 +1,127 @@
+import type { MessageCatalog } from '../locale/messages';
+import type { PriceLineState } from './types';
+
+/**
+ * Every fixed string the price breakdown draws or announces, in each Bloom
+ * language. A caller's `stateLabels`, `expandLabel`, `collapseLabel`,
+ * `infoAccessibilityLabel` and `accessibilityLabel` still win.
+ */
+export interface PriceBreakdownMessages {
+  /** The word drawn beside an amount that is not the answer yet. */
+  states: Record<Exclude<PriceLineState, 'final'>, string>;
+  /** The disclosure of a collapsible summary. */
+  showDetails: string;
+  hideDetails: string;
+  /** Names the list of charges. */
+  breakdown: string;
+  /** Names a line's info glyph: "About Service fee". */
+  about: (label: string) => string;
+}
+
+export const PRICE_BREAKDOWN_MESSAGES: MessageCatalog<PriceBreakdownMessages> = {
+  en: {
+    states: { estimated: 'Estimated', pending: 'Pending' },
+    showDetails: 'Show price details',
+    hideDetails: 'Hide price details',
+    breakdown: 'Price breakdown',
+    about: (label) => `About ${label}`,
+  },
+  es: {
+    states: { estimated: 'Estimado', pending: 'Pendiente' },
+    showDetails: 'Mostrar detalles del precio',
+    hideDetails: 'Ocultar detalles del precio',
+    breakdown: 'Desglose del precio',
+    about: (label) => `Acerca de ${label}`,
+  },
+  ca: {
+    states: { estimated: 'Estimat', pending: 'Pendent' },
+    showDetails: 'Mostra els detalls del preu',
+    hideDetails: 'Amaga els detalls del preu',
+    breakdown: 'Desglossament del preu',
+    about: (label) => `Quant a ${label}`,
+  },
+  de: {
+    states: { estimated: 'Geschätzt', pending: 'Ausstehend' },
+    showDetails: 'Preisdetails anzeigen',
+    hideDetails: 'Preisdetails ausblenden',
+    breakdown: 'Preisaufschlüsselung',
+    about: (label) => `Über ${label}`,
+  },
+  fr: {
+    states: { estimated: 'Estimé', pending: 'En attente' },
+    showDetails: 'Afficher le détail du prix',
+    hideDetails: 'Masquer le détail du prix',
+    breakdown: 'Détail du prix',
+    about: (label) => `À propos de ${label}`,
+  },
+  it: {
+    states: { estimated: 'Stimato', pending: 'In sospeso' },
+    showDetails: 'Mostra dettagli prezzo',
+    hideDetails: 'Nascondi dettagli prezzo',
+    breakdown: 'Dettaglio del prezzo',
+    about: (label) => `Informazioni su ${label}`,
+  },
+  pt: {
+    states: { estimated: 'Estimado', pending: 'Pendente' },
+    showDetails: 'Mostrar detalhes do preço',
+    hideDetails: 'Ocultar detalhes do preço',
+    breakdown: 'Detalhamento do preço',
+    about: (label) => `Sobre ${label}`,
+  },
+  ru: {
+    states: { estimated: 'Предварительно', pending: 'Уточняется' },
+    showDetails: 'Показать детали цены',
+    hideDetails: 'Скрыть детали цены',
+    breakdown: 'Детализация цены',
+    about: (label) => `Подробнее: ${label}`,
+  },
+  tr: {
+    states: { estimated: 'Tahmini', pending: 'Beklemede' },
+    showDetails: 'Fiyat ayrıntılarını göster',
+    hideDetails: 'Fiyat ayrıntılarını gizle',
+    breakdown: 'Fiyat dökümü',
+    about: (label) => `${label} hakkında`,
+  },
+  ja: {
+    states: { estimated: '概算', pending: '未確定' },
+    showDetails: '料金の内訳を表示',
+    hideDetails: '料金の内訳を隠す',
+    breakdown: '料金の内訳',
+    about: (label) => `${label}について`,
+  },
+  zh: {
+    states: { estimated: '预估', pending: '待定' },
+    showDetails: '显示价格明细',
+    hideDetails: '隐藏价格明细',
+    breakdown: '价格明细',
+    about: (label) => `关于${label}`,
+  },
+  ar: {
+    states: { estimated: 'تقديري', pending: 'قيد الانتظار' },
+    showDetails: 'عرض تفاصيل السعر',
+    hideDetails: 'إخفاء تفاصيل السعر',
+    breakdown: 'تفاصيل السعر',
+    about: (label) => `حول ${label}`,
+  },
+  hi: {
+    states: { estimated: 'अनुमानित', pending: 'लंबित' },
+    showDetails: 'कीमत का विवरण दिखाएँ',
+    hideDetails: 'कीमत का विवरण छिपाएँ',
+    breakdown: 'कीमत का ब्योरा',
+    about: (label) => `${label} के बारे में`,
+  },
+  bn: {
+    states: { estimated: 'আনুমানিক', pending: 'অপেক্ষমাণ' },
+    showDetails: 'দামের বিবরণ দেখান',
+    hideDetails: 'দামের বিবরণ লুকান',
+    breakdown: 'দামের বিভাজন',
+    about: (label) => `${label} সম্পর্কে`,
+  },
+  id: {
+    states: { estimated: 'Perkiraan', pending: 'Tertunda' },
+    showDetails: 'Tampilkan rincian harga',
+    hideDetails: 'Sembunyikan rincian harga',
+    breakdown: 'Rincian harga',
+    about: (label) => `Tentang ${label}`,
+  },
+};