@oxy.so/bloom 5.0.0 → 5.1.1

package/src/chat-composer/create-suggestion-list.tsx

@@ -0,0 +1,219 @@
+import { useSurfaceFill } from '../styles/surface-levels';
+import { useCardFill } from '../card/use-card-fill';
+import type { Surface as SurfaceComponent } from '../surface';
+/**
+ * The anchored list above the composer: `@mention`, `/command` and `:shortcode`
+ * are ONE part with a `kind`, because the row geometry, the keyboard model and
+ * the announced role are identical — only the leading slot differs.
+ *
+ * It is a listbox the composer's field OWNS: `activeIndex` arrives as a prop and
+ * the arrow keys are handled on the input, never here. A list that kept its own
+ * highlight would fight the field for it the first time a pointer moved.
+ */
+import React from 'react';
+import { Image, Pressable, ScrollView, View } from 'react-native';
+
+import { RiHashtag } from '../icons/remix/RiHashtag';
+import { useImageResolver } from '../image-resolver/context';
+import { useMessages } from '../locale/messages';
+import { useTheme } from '../theme/use-theme';
+import type { WebCssStyle } from '../styles/web-view-style';
+import { Text } from '../typography';
+import {
+  PANEL_RADIUS,
+  SUGGESTION_MAX_HEIGHT,
+  SUGGESTION_ROW_HEIGHT,
+  resolveChatComposerPalette,
+} from './shared';
+import { CHAT_COMPOSER_MESSAGES } from './messages';
+import type { ChatComposerSuggestion, SuggestionKind, SuggestionListProps } from './types';
+import { dataHook, IS_WEB } from './web-hooks';
+
+/** Platform dependencies are bound once; shared rendering adds no wrapper. */
+export function createSuggestionList({ Surface }: {
+  Surface: typeof SurfaceComponent;
+}) {
+
+  function isUrl(value: string): boolean {
+    return /^(https?:)?\/\//.test(value) || value.startsWith('data:') || value.startsWith('file:');
+  }
+
+  function Leading({
+    kind,
+    suggestion,
+  }: {
+    kind: SuggestionKind;
+    suggestion: ChatComposerSuggestion;
+  }) {
+    const theme = useTheme();
+    const palette = resolveChatComposerPalette(theme, useSurfaceFill());
+    const resolveImage = useImageResolver();
+
+    if (kind === 'emoji') {
+      return (
+        <Text variant="title-2-regular" style={{ width: 28, textAlign: 'center' }}>
+          {suggestion.emoji ?? suggestion.label}
+        </Text>
+      );
+    }
+    if (kind === 'mention') {
+      const uri =
+        suggestion.avatar === undefined
+          ? undefined
+          : isUrl(suggestion.avatar)
+            ? suggestion.avatar
+            : resolveImage?.(suggestion.avatar, 'thumb');
+      return uri ? (
+        <Image
+          source={{ uri }}
+          accessibilityIgnoresInvertColors
+          style={{ width: 28, height: 28, borderRadius: 14, backgroundColor: palette.inset }}
+        />
+      ) : (
+        <View
+          style={{
+            width: 28,
+            height: 28,
+            borderRadius: 14,
+            backgroundColor: palette.inset,
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}>
+          <Text variant="body-2-medium" style={{ color: palette.textSecondary }}>
+            {suggestion.label.slice(0, 1).toUpperCase()}
+          </Text>
+        </View>
+      );
+    }
+    return (
+      <View
+        style={{
+          width: 28,
+          height: 28,
+          borderRadius: 8,
+          backgroundColor: palette.inset,
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}>
+        <RiHashtag width={16} height={16} fill={palette.iconSecondary} />
+      </View>
+    );
+  }
+
+  function SuggestionList({
+    kind,
+    suggestions,
+    activeIndex = -1,
+    onSelectSuggestion,
+    onActiveIndexChange,
+    header,
+    maxHeight = SUGGESTION_MAX_HEIGHT,
+    style,
+    testID,
+    accessibilityLabel,
+  }: SuggestionListProps) {
+    const theme = useTheme();
+    const palette = resolveChatComposerPalette(theme, useCardFill(style));
+    const { messages } = useMessages(CHAT_COMPOSER_MESSAGES);
+    if (suggestions.length === 0) return null;
+
+    // React Native's `Role` union has no `listbox`; react-native-web passes the
+    // DOM `role` straight through, so it travels as a web-only prop.
+    const listRole: Record<string, unknown> = IS_WEB ? { role: 'listbox' } : { accessibilityRole: 'list' };
+
+    const panel: WebCssStyle = {
+      borderRadius: PANEL_RADIUS,
+      paddingTop: 6,
+      paddingBottom: 6,
+      paddingLeft: 6,
+      paddingRight: 6,
+    };
+
+    return (
+      <Surface style={[panel, style]} testID={testID}>
+        {header ? (
+          <Text
+            variant="caption-1-medium"
+            style={{
+              color: palette.textSecondary,
+              paddingLeft: 8,
+              paddingRight: 8,
+              paddingTop: 2,
+              paddingBottom: 6,
+            }}>
+            {header}
+          </Text>
+        ) : null}
+        <ScrollView
+          {...dataHook('bloomChatComposerScroll')}
+          {...listRole}
+          accessibilityLabel={accessibilityLabel ?? messages.suggestions[kind]}
+          style={{ maxHeight }}
+          showsVerticalScrollIndicator={false}>
+          {suggestions.map((suggestion, index) => {
+            const active = index === activeIndex;
+            const row: WebCssStyle = {
+              flexDirection: 'row',
+              alignItems: 'center',
+              gap: 10,
+              minHeight: SUGGESTION_ROW_HEIGHT,
+              borderRadius: 10,
+              paddingLeft: 8,
+              paddingRight: 8,
+              paddingTop: 6,
+              paddingBottom: 6,
+              opacity: suggestion.disabled ? 0.5 : 1,
+              backgroundColor: active ? palette.hover : 'transparent',
+              cursor: suggestion.disabled ? 'auto' : 'pointer',
+              '--bloom-chat-composer-ring': palette.focusRing,
+            };
+            const name = suggestion.handle
+              ? `${suggestion.label} ${suggestion.handle}`
+              : suggestion.label;
+            return (
+              <Pressable
+                key={suggestion.id}
+                {...dataHook('bloomChatComposerRow')}
+                role="option"
+                accessibilityLabel={name}
+                aria-selected={active}
+                accessibilityState={{ selected: active, disabled: suggestion.disabled }}
+                disabled={suggestion.disabled}
+                onPress={() => onSelectSuggestion?.(suggestion, index)}
+                onHoverIn={() => onActiveIndexChange?.(index)}
+                style={row}
+                testID={testID ? `${testID}-row-${suggestion.id}` : undefined}>
+                <Leading kind={kind} suggestion={suggestion} />
+                <View style={{ flexShrink: 1, flexGrow: 1 }}>
+                  <View style={{ flexDirection: 'row', alignItems: 'baseline', gap: 6 }}>
+                    <Text variant="body-medium" numberOfLines={1} style={{ color: palette.text }}>
+                      {suggestion.label}
+                    </Text>
+                    {suggestion.handle ? (
+                      <Text
+                        variant="body-2-regular"
+                        numberOfLines={1}
+                        style={{ color: palette.textSecondary, flexShrink: 1 }}>
+                        {suggestion.handle}
+                      </Text>
+                    ) : null}
+                  </View>
+                  {suggestion.description ? (
+                    <Text
+                      variant="caption-1-regular"
+                      numberOfLines={1}
+                      style={{ color: palette.textPlaceholder }}>
+                      {suggestion.description}
+                    </Text>
+                  ) : null}
+                </View>
+              </Pressable>
+            );
+          })}
+        </ScrollView>
+      </Surface>
+    );
+  }
+
+  return SuggestionList;
+}

package/src/chat-composer/create-voice-recorder.tsx

@@ -0,0 +1,301 @@
+import { useCardFill } from '../card/use-card-fill';
+import type { Surface as SurfaceComponent } from '../surface';
+/**
+ * The bar while a voice message is being recorded, and after: a live meter
+ * (`recording`), a hands-free one with explicit buttons (`locked`), and the
+ * playable result (`preview`).
+ *
+ * Purely presentational, and deliberately so — the elapsed time, the levels and
+ * the playback position all arrive as props. A recorder that owned a timer
+ * would be reading the clock inside a component, which is the one thing every
+ * relative time in this fleet is forbidden to do; it also makes the three
+ * states impossible to screenshot.
+ */
+import React, { useEffect, useState } from 'react';
+import { View, type LayoutChangeEvent } from 'react-native';
+import Animated, {
+  Easing,
+  cancelAnimation,
+  useAnimatedStyle,
+  useReducedMotion,
+  useSharedValue,
+  withRepeat,
+  withSequence,
+  withTiming,
+} from 'react-native-reanimated';
+
+import type { Button as ButtonComponent } from '../button';
+import { RiArrowLeftSLine } from '../icons/remix/RiArrowLeftSLine';
+import { RiCloseLine } from '../icons/remix/RiCloseLine';
+import { RiDeleteBinLine } from '../icons/remix/RiDeleteBinLine';
+import { RiLockLine } from '../icons/remix/RiLockLine';
+import { RiPauseFill } from '../icons/remix/RiPauseFill';
+import { RiPlayFill } from '../icons/remix/RiPlayFill';
+import { RiSendPlaneLine } from '../icons/remix/RiSendPlaneLine';
+import type { WebCssStyle } from '../styles/web-view-style';
+import { useTheme } from '../theme/use-theme';
+import { Text } from '../typography';
+import type { ComposerIconButton as ComposerIconButtonComponent } from './ComposerIconButton';
+import {
+  BAR_PADDING,
+  BAR_RADIUS,
+  CONTROL_SIZE,
+  voiceRecorderLabels,
+  WAVE_BAR_GAP,
+  WAVE_BAR_WIDTH,
+  WAVE_HEIGHT,
+  formatRecordingTime,
+  resolveChatComposerPalette,
+  waveformBars,
+} from './shared';
+import type { VoiceRecorderProps } from './types';
+import { IS_WEB, useChatComposerWebCss } from './web-hooks';
+import { useMessages } from '../locale/messages';
+import { CHAT_COMPOSER_MESSAGES } from './messages';
+
+/** Platform dependencies are bound once; shared rendering adds no wrapper. */
+export function createVoiceRecorder({ Surface, Button, ComposerIconButton }: {
+  Surface: typeof SurfaceComponent;
+  Button: typeof ButtonComponent;
+  ComposerIconButton: typeof ComposerIconButtonComponent;
+}) {
+
+  const EASE_IN_OUT = Easing.bezier(0.42, 0, 0.58, 1);
+
+  /** The live "we are recording" dot. CSS keyframes on web, a reanimated loop on native. */
+  function RecordDot({ color, active }: { color: string; active: boolean }) {
+    const reducedMotion = useReducedMotion();
+    const opacity = useSharedValue(1);
+    useEffect(() => {
+      if (IS_WEB || !active || reducedMotion) return;
+      opacity.value = withRepeat(
+        withSequence(
+          withTiming(0.25, { duration: 500, easing: EASE_IN_OUT }),
+          withTiming(1, { duration: 500, easing: EASE_IN_OUT }),
+        ),
+        -1,
+      );
+      return () => cancelAnimation(opacity);
+    }, [active, reducedMotion, opacity]);
+    const animated = useAnimatedStyle(() => ({ opacity: opacity.value }), [opacity]);
+
+    const base = { width: 8, height: 8, borderRadius: 4, backgroundColor: color };
+    if (IS_WEB) {
+      const web: WebCssStyle =
+        active && !reducedMotion
+          ? { ...base, animation: 'bloom-chat-composer-pulse 1000ms ease-in-out infinite' }
+          : base;
+      return <View style={web} />;
+    }
+    return <Animated.View style={[base, animated]} />;
+  }
+
+  /**
+   * The meter. Bars are laid out from a MEASURED width rather than a fixed count,
+   * so the same recorder reads correctly in a 390px column and a 900px one; the
+   * oldest samples fall off the left as the array grows.
+   */
+  function Waveform({
+    amplitudes,
+    color,
+    dimColor,
+    progress,
+    testID,
+  }: {
+    amplitudes: ReadonlyArray<number>;
+    color: string;
+    dimColor: string;
+    /** 0–1 playhead, for `preview`. Bars past it paint in `dimColor`. */
+    progress?: number;
+    testID?: string;
+  }) {
+    const [width, setWidth] = useState(0);
+    const onLayout = (event: LayoutChangeEvent) => setWidth(event.nativeEvent.layout.width);
+    const slot = WAVE_BAR_WIDTH + WAVE_BAR_GAP;
+    const count = width > 0 ? Math.max(1, Math.floor(width / slot)) : 0;
+    const bars = count > 0 ? waveformBars(amplitudes, count) : [];
+    const played = progress === undefined ? bars.length : Math.round(bars.length * progress);
+
+    return (
+      <View
+        onLayout={onLayout}
+        style={{
+          flexGrow: 1,
+          flexShrink: 1,
+          height: WAVE_HEIGHT,
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: WAVE_BAR_GAP,
+            }}
+        testID={testID}>
+        {bars.map((level, index) => (
+          <View
+            key={index}
+            style={{
+              width: WAVE_BAR_WIDTH,
+              height: Math.max(2, Math.round(level * WAVE_HEIGHT)),
+              borderRadius: WAVE_BAR_WIDTH,
+              backgroundColor: index < played ? color : dimColor,
+            }}
+          />
+        ))}
+      </View>
+    );
+  }
+
+  function VoiceRecorder({
+    state,
+    seconds,
+    duration,
+    amplitudes = [],
+    playing = false,
+    onPlayToggle,
+    onCancel,
+    onDelete,
+    onSend,
+    onLock,
+    slideToCancel = !IS_WEB,
+    labels: labelOverrides,
+    style,
+    testID,
+    accessibilityLabel,
+  }: VoiceRecorderProps) {
+    const theme = useTheme();
+    const palette = resolveChatComposerPalette(theme, useCardFill(style));
+    const { messages } = useMessages(CHAT_COMPOSER_MESSAGES);
+    useChatComposerWebCss();
+    const labels = { ...voiceRecorderLabels(messages), ...labelOverrides };
+    const preview = state === 'preview';
+    const total = duration ?? seconds;
+
+    const bar: WebCssStyle = {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 10,
+      minHeight: CONTROL_SIZE + BAR_PADDING * 2,
+      borderRadius: BAR_RADIUS,
+      paddingLeft: 12,
+      paddingRight: BAR_PADDING,
+      paddingTop: BAR_PADDING,
+      paddingBottom: BAR_PADDING,
+      '--bloom-chat-composer-ring': palette.focusRing,
+    };
+
+    return (
+      <Surface
+        accessibilityLabel={accessibilityLabel ?? labels.recording}
+        style={[bar, style]}
+        testID={testID}>
+        {preview ? (
+          <>
+            {onDelete ? (
+              <ComposerIconButton
+                icon={RiDeleteBinLine}
+                accessibilityLabel={labels.delete}
+                onPress={onDelete}
+                size={32}
+                iconSize={18}
+                style={{ marginLeft: -6 }}
+                testID={testID ? `${testID}-delete` : undefined}
+              />
+            ) : null}
+            <ComposerIconButton
+              icon={playing ? RiPauseFill : RiPlayFill}
+              accessibilityLabel={playing ? labels.pause : labels.play}
+              onPress={onPlayToggle}
+              size={32}
+              iconSize={18}
+              style={{ backgroundColor: palette.inset }}
+              testID={testID ? `${testID}-play` : undefined}
+            />
+          </>
+        ) : (
+          <RecordDot color={palette.destructive} active />
+        )}
+
+        <Text
+          variant="body-2-medium"
+          style={{ color: palette.text, minWidth: 40 }}
+          testID={testID ? `${testID}-time` : undefined}>
+          {formatRecordingTime(seconds)}
+        </Text>
+
+        <Waveform
+          amplitudes={amplitudes}
+          color={preview ? palette.accent : palette.destructive}
+          dimColor={palette.border}
+          progress={preview && total > 0 ? Math.min(1, seconds / total) : undefined}
+          testID={testID ? `${testID}-wave` : undefined}
+        />
+
+        {preview ? (
+          <Text variant="caption-1-regular" style={{ color: palette.textSecondary }}>
+            {formatRecordingTime(total)}
+          </Text>
+        ) : null}
+
+        {state === 'recording' && slideToCancel ? (
+          <Button
+            appearance="plain"
+            tone="neutral"
+            accessibilityLabel={labels.cancel}
+            onPress={onCancel}
+            style={{ flexDirection: 'row', alignItems: 'center', gap: 2, height: 'auto', minHeight: 0, padding: 0 }}
+            testID={testID ? `${testID}-slide` : undefined}>
+            <RiArrowLeftSLine width={16} height={16} fill={palette.textSecondary} />
+            <Text variant="caption-1-regular" style={{ color: palette.textSecondary }}>
+              {labels.slideToCancel}
+            </Text>
+          </Button>
+        ) : null}
+
+        {state === 'recording' && !slideToCancel && onCancel ? (
+          <ComposerIconButton
+            icon={RiCloseLine}
+            accessibilityLabel={labels.cancel}
+            onPress={onCancel}
+            size={32}
+            iconSize={18}
+            testID={testID ? `${testID}-cancel` : undefined}
+          />
+        ) : null}
+
+        {state === 'recording' && onLock ? (
+          <ComposerIconButton
+            icon={RiLockLine}
+            accessibilityLabel={labels.lock}
+            onPress={onLock}
+            size={32}
+            iconSize={16}
+            style={{ backgroundColor: palette.inset }}
+            testID={testID ? `${testID}-lock` : undefined}
+          />
+        ) : null}
+
+        {state !== 'recording' && onCancel ? (
+          <ComposerIconButton
+            icon={RiCloseLine}
+            accessibilityLabel={labels.cancel}
+            onPress={onCancel}
+            size={32}
+            iconSize={18}
+            testID={testID ? `${testID}-cancel` : undefined}
+          />
+        ) : null}
+
+        {onSend && state !== 'recording' ? (
+          <ComposerIconButton
+            icon={RiSendPlaneLine}
+            tone="accent"
+            accessibilityLabel={labels.send}
+            onPress={onSend}
+            iconSize={18}
+            testID={testID ? `${testID}-send` : undefined}
+          />
+        ) : null}
+      </Surface>
+    );
+  }
+
+  return VoiceRecorder;
+}

package/src/chat-composer/index.web.ts

@@ -3,16 +3,16 @@
 // Re-run `bun run generate:exports` (or any `bun run build`) after
 // changing that barrel or the set of web-forked subpaths.
 
-export { ChatComposer } from './ChatComposer';
-export { ComposerBanner } from './ComposerBanner';
-export { ComposerAttachmentStrip } from './ComposerAttachmentStrip';
+export { ChatComposer } from './ChatComposer.web';
+export { ComposerBanner } from './ComposerBanner.web';
+export { ComposerAttachmentStrip } from './ComposerAttachmentStrip.web';
 export { ComposerIconButton } from './ComposerIconButton.web';
-export { SuggestionList } from './SuggestionList';
-export { VoiceRecorder } from './VoiceRecorder';
-export { AttachmentMenu } from './AttachmentMenu';
-export { EmojiPicker } from './EmojiPicker';
-export { ReactionPicker } from './ReactionPicker';
-export { MessageContextMenu } from './MessageContextMenu';
+export { SuggestionList } from './SuggestionList.web';
+export { VoiceRecorder } from './VoiceRecorder.web';
+export { AttachmentMenu } from './AttachmentMenu.web';
+export { EmojiPicker } from './EmojiPicker.web';
+export { ReactionPicker } from './ReactionPicker.web';
+export { MessageContextMenu } from './MessageContextMenu.web';
 export {
   ATTACHMENT_MENU_ITEMS,
   EMOJI_CATEGORY_ICONS,

package/src/chat-composer/shared.ts

@@ -44,7 +44,6 @@ import { RiRestaurantLine } from '../icons/remix/RiRestaurantLine';
 import { RiShareForwardLine } from '../icons/remix/RiShareForwardLine';
 import { RiTimeLine } from '../icons/remix/RiTimeLine';
 import { RiUserLine } from '../icons/remix/RiUserLine';
-import { parseRgba } from '../theme/color-utils';
 import type { Theme } from '../theme/types';
 import type {
   AttachmentMenuItem,
@@ -57,6 +56,7 @@ import type {
 } from './types';
 import { COMMON_MESSAGES } from '../locale/common-messages';
 import { CHAT_COMPOSER_MESSAGES, type AttachmentMenuItemId, type ChatComposerMessages } from './messages';
+import { formatClock } from '../locale/format-number';
 
 // ---------------------------------------------------------------------------
 //  Palette
@@ -95,12 +95,8 @@ export interface ChatComposerPalette {
   focusRing: string;
 }
 
-/** Re-emit a resolved colour at `alpha` (parse-and-re-emit, never concatenation). */
-export function withAlpha(color: string, alpha: number): string {
-  const rgba = parseRgba(color);
-  if (!rgba) return color;
-  return `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, ${alpha})`;
-}
+/** Re-exported from `theme/color-utils`, which owns it (it was copied here). */
+export { withAlpha } from '../theme/color-utils';
 
 export function resolveChatComposerPalette(theme: Theme, backing?: string): ChatComposerPalette {
   const { accent } = resolveButtonRamps(theme);
@@ -187,12 +183,7 @@ export const SWAP_MS = 220;
  * bad one is worse than a composer that shows zero.
  */
 export function formatRecordingTime(seconds: number): string {
-  const total = Number.isFinite(seconds) ? Math.max(0, Math.floor(seconds)) : 0;
-  const s = total % 60;
-  const m = Math.floor(total / 60) % 60;
-  const h = Math.floor(total / 3600);
-  const pad = (n: number) => (n < 10 ? `0${n}` : String(n));
-  return h > 0 ? `${h}:${pad(m)}:${pad(s)}` : `${m}:${pad(s)}`;
+  return formatClock(seconds);
 }
 
 /** The glyph of an {@link EmojiEntry}, whichever form it arrived in. */

package/src/checkout-summary/CheckoutConfirm.tsx

@@ -3,10 +3,8 @@ import { View } from 'react-native';
 
 import { ActionCardNote } from '../booking/ActionCard';
 import { Button } from '../button';
-import {
-  CHECKOUT_CONFIRM_BUSY_LABEL,
-  CHECKOUT_CONFIRM_LABEL,
-} from './constants';
+import { useMessages } from '../locale/messages';
+import { CHECKOUT_SUMMARY_MESSAGES } from './messages';
 import { checkoutConfirmLabel } from './shared';
 import type { CheckoutConfirmProps } from './types';
 
@@ -45,18 +43,21 @@ import type { CheckoutConfirmProps } from './types';
  * inert for the whole flight.
  */
 function CheckoutConfirmComponent({
-  label = CHECKOUT_CONFIRM_LABEL,
+  label: labelProp,
   amount,
   secondaryAmount,
   terms,
   onConfirm,
   disabled = false,
   busy = false,
-  busyLabel = CHECKOUT_CONFIRM_BUSY_LABEL,
+  busyLabel: busyLabelProp,
   footer,
   style,
   testID,
 }: CheckoutConfirmProps) {
+  const { messages } = useMessages(CHECKOUT_SUMMARY_MESSAGES);
+  const label = labelProp ?? messages.placeOrder;
+  const busyLabel = busyLabelProp ?? messages.placingOrder;
   const latch = useRef(false);
   const [latched, setLatched] = useState(false);
 

package/src/checkout-summary/CheckoutSummary.tsx

@@ -3,6 +3,7 @@ import { View } from 'react-native';
 
 import { AddressRow } from '../address';
 import { Divider } from '../divider';
+import { useMessages } from '../locale/messages';
 import { PriceSummary } from '../price-breakdown';
 import {
   SurfaceLevelProvider,
@@ -21,6 +22,7 @@ import {
   CHECKOUT_ROW_ICON,
   CHECKOUT_SECTION_GAP,
 } from './constants';
+import { CHECKOUT_SUMMARY_MESSAGES } from './messages';
 import { checkoutRowName } from './shared';
 import type { CheckoutSummaryLine, CheckoutSummaryProps } from './types';
 
@@ -69,7 +71,7 @@ const NESTED_ROW_STYLE = {
  * padding reset, so there is one row's chrome rather than two.
  */
 function CheckoutSummaryComponent({
-  title = 'Review your order',
+  title: titleProp,
   address,
   delivery,
   payment,
@@ -82,6 +84,9 @@ function CheckoutSummaryComponent({
   style,
   testID,
 }: CheckoutSummaryProps) {
+  const { messages } = useMessages(CHECKOUT_SUMMARY_MESSAGES);
+  // `null` turns the heading off, so only `undefined` takes the default.
+  const title = titleProp === undefined ? messages.title : titleProp;
   const theme = useTheme();
   const level = useSurfaceLevelValue();
   const own = useSurfaceLevel(1);
@@ -106,7 +111,7 @@ function CheckoutSummaryComponent({
 
   const rows: ReactNode[] = [];
   if (address) {
-    const label = address.label ?? 'Deliver to';
+    const label = address.label ?? messages.deliverTo;
     rows.push(
       <CheckoutSummaryRow
         key="address"
@@ -161,7 +166,7 @@ function CheckoutSummaryComponent({
 
       <View
         role="group"
-        accessibilityLabel={accessibilityLabel ?? title ?? 'Order summary'}
+        accessibilityLabel={accessibilityLabel ?? title ?? messages.orderSummary}
         testID={id('group')}
         style={[
           {