@oxy.so/bloom 5.0.0 → 5.1.1

package/src/checkout-summary/CheckoutSummaryRow.tsx

@@ -3,17 +3,17 @@ import { View } from 'react-native';
 
 import { RiArrowRightSLine } from '../icons/remix/RiArrowRightSLine';
 import { Item } from '../item';
+import { useMessages } from '../locale/messages';
 import { useSurfaceFill } from '../styles/surface-levels';
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
 import {
   CHECKOUT_ROW_CHEVRON,
   CHECKOUT_ROW_GLYPH,
-  CHECKOUT_ROW_HINT,
-  CHECKOUT_ROW_PLACEHOLDER,
   CHECKOUT_ROW_TEXT_GAP,
   CHECKOUT_ROW_TILE,
 } from './constants';
+import { CHECKOUT_SUMMARY_MESSAGES } from './messages';
 import { checkoutRowName, resolveCheckoutPaint } from './shared';
 import type { CheckoutSummaryRowProps } from './types';
 
@@ -46,7 +46,7 @@ function CheckoutSummaryRowComponent({
   icon: Icon,
   leading,
   value,
-  placeholder = CHECKOUT_ROW_PLACEHOLDER,
+  placeholder: placeholderProp,
   detail,
   badge,
   content,
@@ -57,6 +57,8 @@ function CheckoutSummaryRowComponent({
   style,
   testID,
 }: CheckoutSummaryRowProps) {
+  const { messages } = useMessages(CHECKOUT_SUMMARY_MESSAGES);
+  const placeholder = placeholderProp ?? messages.notChosen;
   const theme = useTheme();
   const surface = useSurfaceFill();
   const paint = useMemo(() => resolveCheckoutPaint(theme, surface), [theme, surface]);
@@ -155,7 +157,7 @@ function CheckoutSummaryRowComponent({
       // `docs/checkout-summary.mdx` and pinned in `CheckoutSummary.test.tsx`
       // rather than swapped for an `aria-describedby` that native would then
       // announce twice.
-      accessibilityHint={onPress ? (accessibilityHint ?? CHECKOUT_ROW_HINT) : accessibilityHint}
+      accessibilityHint={onPress ? (accessibilityHint ?? messages.opensPicker) : accessibilityHint}
       style={style}
       testID={testID}
     >

package/src/checkout-summary/constants.ts

@@ -3,6 +3,7 @@ import { RiChat3Line } from '../icons/remix/RiChat3Line';
 import { RiMapPin2Line } from '../icons/remix/RiMapPin2Line';
 import { RiTimeLine } from '../icons/remix/RiTimeLine';
 import type { BloomIconComponent } from '../icons/icon-component';
+import { CHECKOUT_SUMMARY_MESSAGES } from './messages';
 
 /**
  * The default glyph for each of the four rows a buyer checks. A caller that
@@ -16,15 +17,18 @@ export const CHECKOUT_ROW_ICON: Record<'address' | 'delivery' | 'payment' | 'not
   note: RiChat3Line,
 };
 
+// The English words below stay exported; the components speak
+// `CHECKOUT_SUMMARY_MESSAGES` in the resolved locale.
+
 /** Drawn in place of the value while nothing is chosen. */
-export const CHECKOUT_ROW_PLACEHOLDER = 'Not chosen yet';
+export const CHECKOUT_ROW_PLACEHOLDER = CHECKOUT_SUMMARY_MESSAGES.en.notChosen;
 
 /** The row's hint: what pressing it opens. */
-export const CHECKOUT_ROW_HINT = 'Opens the picker';
+export const CHECKOUT_ROW_HINT = CHECKOUT_SUMMARY_MESSAGES.en.opensPicker;
 
 /** The default words on the confirm control. */
-export const CHECKOUT_CONFIRM_LABEL = 'Place order';
-export const CHECKOUT_CONFIRM_BUSY_LABEL = 'Placing your order';
+export const CHECKOUT_CONFIRM_LABEL = CHECKOUT_SUMMARY_MESSAGES.en.placeOrder;
+export const CHECKOUT_CONFIRM_BUSY_LABEL = CHECKOUT_SUMMARY_MESSAGES.en.placingOrder;
 
 /**
  * The separator between the confirm label and the amount. A MIDDLE DOT rather

package/src/checkout-summary/messages.ts

@@ -0,0 +1,160 @@
+import type { MessageCatalog } from '../locale/messages';
+
+/**
+ * Every fixed string the checkout summary draws or announces, in each Bloom
+ * language. A caller's `title`, `label`, `placeholder`, `busyLabel`,
+ * `accessibilityHint` and `accessibilityLabel` still win.
+ */
+export interface CheckoutSummaryMessages {
+  /** The heading above the rows. */
+  title: string;
+  /** Names the group when the heading is turned off. */
+  orderSummary: string;
+  /** The address row's label. */
+  deliverTo: string;
+  /** Drawn in place of a row's value while nothing is chosen. */
+  notChosen: string;
+  /** A pressable row's hint: what pressing it opens. */
+  opensPicker: string;
+  /** The confirm button, and what it announces while busy. */
+  placeOrder: string;
+  placingOrder: string;
+}
+
+export const CHECKOUT_SUMMARY_MESSAGES: MessageCatalog<CheckoutSummaryMessages> = {
+  en: {
+    title: 'Review your order',
+    orderSummary: 'Order summary',
+    deliverTo: 'Deliver to',
+    notChosen: 'Not chosen yet',
+    opensPicker: 'Opens the picker',
+    placeOrder: 'Place order',
+    placingOrder: 'Placing your order',
+  },
+  es: {
+    title: 'Revisa tu pedido',
+    orderSummary: 'Resumen del pedido',
+    deliverTo: 'Entregar en',
+    notChosen: 'Sin elegir',
+    opensPicker: 'Abre el selector',
+    placeOrder: 'Realizar pedido',
+    placingOrder: 'Realizando tu pedido',
+  },
+  ca: {
+    title: 'Revisa la comanda',
+    orderSummary: 'Resum de la comanda',
+    deliverTo: 'Entregar a',
+    notChosen: 'Encara no triat',
+    opensPicker: 'Obre el selector',
+    placeOrder: 'Fes la comanda',
+    placingOrder: 'Fent la comanda',
+  },
+  de: {
+    title: 'Bestellung prüfen',
+    orderSummary: 'Bestellübersicht',
+    deliverTo: 'Lieferung an',
+    notChosen: 'Noch nicht gewählt',
+    opensPicker: 'Öffnet die Auswahl',
+    placeOrder: 'Bestellung aufgeben',
+    placingOrder: 'Bestellung wird aufgegeben',
+  },
+  fr: {
+    title: 'Vérifiez votre commande',
+    orderSummary: 'Récapitulatif de la commande',
+    deliverTo: 'Livrer à',
+    notChosen: 'Pas encore choisi',
+    opensPicker: 'Ouvre le sélecteur',
+    placeOrder: 'Passer la commande',
+    placingOrder: 'Commande en cours',
+  },
+  it: {
+    title: 'Controlla il tuo ordine',
+    orderSummary: 'Riepilogo ordine',
+    deliverTo: 'Consegna a',
+    notChosen: 'Non ancora scelto',
+    opensPicker: 'Apre il selettore',
+    placeOrder: 'Effettua ordine',
+    placingOrder: 'Invio del tuo ordine',
+  },
+  pt: {
+    title: 'Revise seu pedido',
+    orderSummary: 'Resumo do pedido',
+    deliverTo: 'Entregar em',
+    notChosen: 'Ainda não escolhido',
+    opensPicker: 'Abre o seletor',
+    placeOrder: 'Fazer pedido',
+    placingOrder: 'Enviando seu pedido',
+  },
+  ru: {
+    title: 'Проверьте заказ',
+    orderSummary: 'Сводка заказа',
+    deliverTo: 'Адрес доставки',
+    notChosen: 'Не выбрано',
+    opensPicker: 'Открывает выбор',
+    placeOrder: 'Оформить заказ',
+    placingOrder: 'Оформляем заказ',
+  },
+  tr: {
+    title: 'Siparişini gözden geçir',
+    orderSummary: 'Sipariş özeti',
+    deliverTo: 'Teslimat adresi',
+    notChosen: 'Henüz seçilmedi',
+    opensPicker: 'Seçiciyi açar',
+    placeOrder: 'Siparişi ver',
+    placingOrder: 'Siparişin veriliyor',
+  },
+  ja: {
+    title: 'ご注文内容の確認',
+    orderSummary: '注文の概要',
+    deliverTo: 'お届け先',
+    notChosen: '未選択',
+    opensPicker: '選択画面を開きます',
+    placeOrder: '注文を確定する',
+    placingOrder: '注文を送信しています',
+  },
+  zh: {
+    title: '核对订单',
+    orderSummary: '订单摘要',
+    deliverTo: '送至',
+    notChosen: '尚未选择',
+    opensPicker: '打开选择器',
+    placeOrder: '提交订单',
+    placingOrder: '正在提交订单',
+  },
+  ar: {
+    title: 'راجع طلبك',
+    orderSummary: 'ملخص الطلب',
+    deliverTo: 'التوصيل إلى',
+    notChosen: 'لم يُختر بعد',
+    opensPicker: 'يفتح أداة الاختيار',
+    placeOrder: 'تأكيد الطلب',
+    placingOrder: 'جارٍ إرسال طلبك',
+  },
+  hi: {
+    title: 'अपना ऑर्डर जाँचें',
+    orderSummary: 'ऑर्डर सारांश',
+    deliverTo: 'यहाँ डिलीवर करें',
+    notChosen: 'अभी चुना नहीं गया',
+    opensPicker: 'चयनकर्ता खोलता है',
+    placeOrder: 'ऑर्डर करें',
+    placingOrder: 'आपका ऑर्डर दिया जा रहा है',
+  },
+  bn: {
+    title: 'আপনার অর্ডার যাচাই করুন',
+    orderSummary: 'অর্ডারের সারাংশ',
+    deliverTo: 'যেখানে ডেলিভারি হবে',
+    notChosen: 'এখনও বাছাই করা হয়নি',
+    opensPicker: 'নির্বাচক খোলে',
+    placeOrder: 'অর্ডার করুন',
+    placingOrder: 'আপনার অর্ডার দেওয়া হচ্ছে',
+  },
+  id: {
+    title: 'Tinjau pesananmu',
+    orderSummary: 'Ringkasan pesanan',
+    deliverTo: 'Kirim ke',
+    notChosen: 'Belum dipilih',
+    opensPicker: 'Membuka pemilih',
+    placeOrder: 'Buat pesanan',
+    placingOrder: 'Memproses pesananmu',
+  },
+};

package/src/code/CodeBlock.tsx

@@ -9,14 +9,11 @@ import { CodeLines } from './CodeLines';
 import { CODE_MESSAGES } from './messages';
 import { CARD_RADIUS, CONFIRM_MS, dataHook, IS_WEB, MONO_FAMILY, useCodePalette, useCodeWebCss } from './shared';
 import type { CodeBlockProps } from './types';
+import { writeClipboardText } from '../hooks/clipboard';
 
-async function writeClipboard(text: string): Promise<void> {
-  const nav =
-    typeof navigator === 'undefined'
-      ? undefined
-      : (navigator as { clipboard?: { writeText?: (value: string) => Promise<void> } });
-  if (!IS_WEB || !nav?.clipboard?.writeText) throw new Error('clipboard unavailable');
-  await nav.clipboard.writeText(text);
+function writeClipboard(text: string): Promise<void> {
+  if (!IS_WEB) return Promise.reject(new Error('clipboard unavailable'));
+  return writeClipboardText(text);
 }
 
 function mono(fontSize: number, lineHeight: number, extra: TextStyle): TextStyle {

package/src/composer-panel/shared.ts

@@ -22,7 +22,6 @@ import { RiShieldCheckLine } from '../icons/remix/RiShieldCheckLine';
 import { RiSlideshow3Line } from '../icons/remix/RiSlideshow3Line';
 import { RiSpeedUpFill } from '../icons/remix/RiSpeedUpFill';
 import { RiVideoLine } from '../icons/remix/RiVideoLine';
-import { parseRgba } from '../theme/color-utils';
 import type { Theme } from '../theme/types';
 import { COMPOSER_PANEL_MESSAGES, type ComposerPanelMessages } from './messages';
 import type {
@@ -84,12 +83,8 @@ export interface ComposerPalette {
   logo: string;
 }
 
-/** Re-emit a resolved colour at `alpha` (parse-and-re-emit, never string 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';
 
 /** Canonical surfaces and foregrounds follow the preset's authored role pairs. */
 export function resolveComposerPalette(theme: Theme): ComposerPalette {

package/src/creator-studio/AudienceBreakdown.tsx

@@ -35,12 +35,13 @@ function AudienceBreakdownComponent({
   genders,
   sources,
   range,
-  format = groupThousands,
+  format: formatProp,
   labels: labelOverrides,
   style,
   testID,
 }: AudienceBreakdownProps) {
-  const { messages } = useMessages(CREATOR_STUDIO_MESSAGES);
+  const { locale, messages } = useMessages(CREATOR_STUDIO_MESSAGES);
+  const format = formatProp ?? ((value: number) => groupThousands(value, locale));
   const labels = { ...messages.breakdown, ...labelOverrides };
   const [width, setWidth] = useState(0);
   const onLayout = useCallback((event: LayoutChangeEvent) => {

package/src/creator-studio/PayoutSummaryCard.tsx

@@ -22,6 +22,7 @@ import { CREATOR_STUDIO_MESSAGES } from './messages';
 import type { PayoutSummaryCardLabels, PayoutSummaryCardProps } from './types';
 
 import { useChartCardSurfacePalette } from '../chart-cards/primitives/use-chart-palette';
+import { formatCurrency } from '../locale/format-number';
 /**
  * `PayoutSummaryCard`: what the artist has earned and when it arrives.
  *
@@ -45,7 +46,6 @@ export const PAYOUT_SUMMARY_LABELS: PayoutSummaryCardLabels = CREATOR_STUDIO_MES
 const PLOT_HEIGHT = 112;
 const BAR_RADIUS = 6;
 
-const defaultFormat = (value: number) => `$${groupThousands(Math.round(value))}`;
 
 function PayoutSummaryCardComponent({
   estimated,
@@ -53,14 +53,15 @@ function PayoutSummaryCardComponent({
   lastPayout,
   nextPayoutDate,
   months,
-  format = defaultFormat,
+  format: formatProp,
   onViewStatements,
   statementsHref,
   labels: labelOverrides,
   style,
   testID,
 }: PayoutSummaryCardProps) {
-  const { messages } = useMessages(CREATOR_STUDIO_MESSAGES);
+  const { locale, messages } = useMessages(CREATOR_STUDIO_MESSAGES);
+  const format = formatProp ?? ((value: number) => formatCurrency(Math.round(value), 'USD', locale));
   const theme = useTheme();
   const palette = useChartCardSurfacePalette(style);
   const labels = { ...messages.payout, ...labelOverrides };
@@ -71,7 +72,7 @@ function PayoutSummaryCardComponent({
   const categories = useMemo(() => months.map((m) => m.label), [months]);
   const max = Math.max(1, ...values);
   const anim = useChartProgress(values);
-  const chip = delta !== undefined ? describeDeltaRatio(delta) : undefined;
+  const chip = delta !== undefined ? describeDeltaRatio(delta, locale) : undefined;
   const chipPaint = chip
     ? chip.tone === 'positive'
       ? palette.positive

package/src/creator-studio/StreamsChart.tsx

@@ -57,14 +57,16 @@ export function StreamsChart({
   onMetricChange,
   events = [],
   metricsLabel: metricsLabelProp,
-  format = formatNumber,
-  formatAxisValue = compactNumber,
+  format: formatProp,
+  formatAxisValue: formatAxisValueProp,
   height = DEFAULT_HEIGHT,
   accessibilityLabel,
   style,
   testID,
 }: StreamsChartProps) {
-  const { messages } = useMessages(CREATOR_STUDIO_MESSAGES);
+  const { locale, messages } = useMessages(CREATOR_STUDIO_MESSAGES);
+  const format = formatProp ?? ((value: number) => formatNumber(value, locale));
+  const formatAxisValue = formatAxisValueProp ?? ((value: number) => compactNumber(value, locale));
   const metricsLabel = metricsLabelProp ?? messages.streams.metrics;
   const palette = useChartCardSurfacePalette(style);
   const tones = useChartTones();
@@ -115,7 +117,7 @@ export function StreamsChart({
         label={point ? point.label : title}
         value={point ? point.value : total}
         format={format}
-        delta={current?.delta !== undefined ? describeDeltaRatio(current.delta) : undefined}
+        delta={current?.delta !== undefined ? describeDeltaRatio(current.delta, locale) : undefined}
         hovering={hovering}
         fadeKey={`${metricId ?? ''}:${activeIndex}`}
         caption={hoveredEvent ? hoveredEvent.label : undefined}

package/src/creator-studio/TopTracksTable.tsx

@@ -88,7 +88,7 @@ function Cover({ artwork, paint, size }: { artwork?: string; paint: CreatorStudi
 function TopTracksTableComponent({
   tracks,
   summary,
-  format = groupThousands,
+  format: formatProp,
   pageSize = 10,
   toolbar,
   labels: labelOverrides,
@@ -96,7 +96,8 @@ function TopTracksTableComponent({
   style,
   testID,
 }: TopTracksTableProps) {
-  const { messages } = useMessages(CREATOR_STUDIO_MESSAGES);
+  const { locale, messages } = useMessages(CREATOR_STUDIO_MESSAGES);
+  const format = formatProp ?? ((value: number) => groupThousands(value, locale));
   const theme = useTheme();
   const paint = useMemo(() => resolveCreatorStudioPaint(theme), [theme]);
   const labels = useMemo(

package/src/creator-studio/TrackUploadRow.tsx

@@ -147,7 +147,7 @@ function TrackUploadRowComponent({
   style,
   testID,
 }: TrackUploadRowProps) {
-  const { messages } = useMessages(CREATOR_STUDIO_MESSAGES);
+  const { locale, messages } = useMessages(CREATOR_STUDIO_MESSAGES);
   const common = useCommonMessages();
   const theme = useTheme();
   useInteractiveWebCss(CREATOR_STUDIO_STYLE_ID, CREATOR_STUDIO_CSS);
@@ -155,7 +155,7 @@ function TrackUploadRowComponent({
   const labels: TrackUploadRowLabels = { ...messages.upload, retry: common.retry, ...labelOverrides };
   const bar = uploadBarKind(status);
   const percent = clampProgress(progress);
-  const sizeLabel = typeof size === 'number' ? formatFileSize(size) : size;
+  const sizeLabel = typeof size === 'number' ? formatFileSize(size, locale) : size;
 
   const tile =
     status === 'ready' ? (

package/src/delivery-slot/DeliverySlotDays.tsx

@@ -3,7 +3,8 @@ import React, { memo } from 'react';
 import { ChipRow } from '../chip';
 import { SelectChip } from '../listing-actions/parts';
 import { Text } from '../typography';
-import { DELIVERY_DAY_LABEL } from './constants';
+import { useMessages } from '../locale/messages';
+import { DELIVERY_SLOT_MESSAGES } from './messages';
 import type { DeliverySlotDaysProps } from './types';
 
 /**
@@ -32,12 +33,14 @@ function DeliverySlotDaysComponent({
   days,
   value,
   onChange,
-  accessibilityLabel = DELIVERY_DAY_LABEL,
+  accessibilityLabel: accessibilityLabelProp,
   disabled = false,
   fadeColor,
   style,
   testID,
 }: DeliverySlotDaysProps) {
+  const { messages } = useMessages(DELIVERY_SLOT_MESSAGES);
+  const accessibilityLabel = accessibilityLabelProp ?? messages.day;
   return (
     <ChipRow
       role="radiogroup"

package/src/delivery-slot/DeliverySlotPicker.tsx

@@ -7,21 +7,12 @@ import { useFieldControl } from '../field/context';
 import { useFieldMembership } from '../field/membership';
 import { RiFlashlightLine } from '../icons/remix/RiFlashlightLine';
 import { RiTimeLine } from '../icons/remix/RiTimeLine';
+import { useMessages } from '../locale/messages';
 import * as Skeleton from '../skeleton';
 import { DeliverySlotDays } from './DeliverySlotDays';
 import { DeliverySlotOption } from './DeliverySlotOption';
-import {
-  DELIVERY_ASAP_LABEL,
-  DELIVERY_DAY_LABEL,
-  DELIVERY_DOT,
-  DELIVERY_EMPTY_DESCRIPTION,
-  DELIVERY_EMPTY_TITLE,
-  DELIVERY_FIELD_LABEL,
-  DELIVERY_OPTION_GAP,
-  DELIVERY_OPTION_RADIUS,
-  DELIVERY_SECTION_GAP,
-  DELIVERY_SOLD_OUT_LABEL,
-} from './constants';
+import { DELIVERY_DOT, DELIVERY_OPTION_GAP, DELIVERY_OPTION_RADIUS, DELIVERY_SECTION_GAP } from './constants';
+import { DELIVERY_SLOT_MESSAGES } from './messages';
 import { joinDeliveryParts, windowDetail, windowName } from './shared';
 import type { DeliverySlotPickerProps } from './types';
 
@@ -71,6 +62,7 @@ function DeliverySlotGroups({
   // — the two directions `field/membership.ts` exists to stop every family
   // getting backwards.
   const field = useFieldMembership({ accessibilityLabel: label, disabled });
+  const { messages } = useMessages(DELIVERY_SLOT_MESSAGES);
   const id = (part: string) => (testID ? `${testID}-${part}` : undefined);
   const off = field.disabled;
 
@@ -78,16 +70,16 @@ function DeliverySlotGroups({
     () =>
       windows.map((w) => ({
         window: w,
-        detail: windowDetail(w, tierLabels, soldOutLabel),
-        name: windowName(w, tierLabels, soldOutLabel),
+        detail: windowDetail(w, tierLabels, soldOutLabel, messages),
+        name: windowName(w, tierLabels, soldOutLabel, messages),
       })),
-    [windows, tierLabels, soldOutLabel],
+    [windows, tierLabels, soldOutLabel, messages],
   );
 
   const asapRow = asap ? (
     <DeliverySlotOption
       key="asap"
-      label={asap.label ?? DELIVERY_ASAP_LABEL}
+      label={asap.label ?? messages.asap}
       detail={asap.soldOut ? soldOutLabel : joinDeliveryParts([asap.eta, asap.note])}
       price={asap.price}
       icon={asap.icon ?? RiFlashlightLine}
@@ -209,15 +201,20 @@ function DeliverySlotPickerComponent({
   error,
   required,
   disabled,
-  dayLabel = DELIVERY_DAY_LABEL,
-  emptyTitle = DELIVERY_EMPTY_TITLE,
-  emptyDescription = DELIVERY_EMPTY_DESCRIPTION,
-  soldOutLabel = DELIVERY_SOLD_OUT_LABEL,
+  dayLabel: dayLabelProp,
+  emptyTitle: emptyTitleProp,
+  emptyDescription: emptyDescriptionProp,
+  soldOutLabel: soldOutLabelProp,
   loadingRows = 3,
   style,
   testID,
   ...rest
 }: DeliverySlotPickerProps) {
+  const { messages } = useMessages(DELIVERY_SLOT_MESSAGES);
+  const dayLabel = dayLabelProp ?? messages.day;
+  const emptyTitle = emptyTitleProp ?? messages.emptyTitle;
+  const emptyDescription = emptyDescriptionProp ?? messages.emptyDescription;
+  const soldOutLabel = soldOutLabelProp ?? messages.soldOut;
   // Is there already a `Field` around us? A picker dropped into somebody's form
   // must not make a SECOND one: two fields means two labels above one control
   // and an error the outer field describes and the inner one does not.
@@ -248,7 +245,7 @@ function DeliverySlotPickerComponent({
 
   return (
     <Field
-      label={label ?? DELIVERY_FIELD_LABEL}
+      label={label ?? messages.field}
       description={description}
       error={error}
       required={required}

package/src/delivery-slot/constants.ts

@@ -1,24 +1,26 @@
+import { DELIVERY_SLOT_MESSAGES } from './messages';
 import type { DeliveryTier } from './types';
 
+// The English words. The picker speaks `DELIVERY_SLOT_MESSAGES` in the
+// resolved locale; these stay exported for apps that read them.
+const EN = DELIVERY_SLOT_MESSAGES.en;
+
 /** The words a tier is drawn and announced with. */
-export const DELIVERY_TIER_LABELS: Record<DeliveryTier, string> = {
-  standard: 'Standard',
-  express: 'Express',
-};
+export const DELIVERY_TIER_LABELS: Record<DeliveryTier, string> = EN.tiers;
 
 /** What a taken window says. */
-export const DELIVERY_SOLD_OUT_LABEL = 'Sold out';
+export const DELIVERY_SOLD_OUT_LABEL = EN.soldOut;
 
 /** The option that belongs to no day. */
-export const DELIVERY_ASAP_LABEL = 'As soon as possible';
+export const DELIVERY_ASAP_LABEL = EN.asap;
 
 /** The field's own name, which is also the radio group's. */
-export const DELIVERY_FIELD_LABEL = 'Delivery time';
-export const DELIVERY_DAY_LABEL = 'Day';
+export const DELIVERY_FIELD_LABEL = EN.field;
+export const DELIVERY_DAY_LABEL = EN.day;
 
 /** What there is to say when a day has nothing left. */
-export const DELIVERY_EMPTY_TITLE = 'No windows left';
-export const DELIVERY_EMPTY_DESCRIPTION = 'Pick another day, or take the next courier.';
+export const DELIVERY_EMPTY_TITLE = EN.emptyTitle;
+export const DELIVERY_EMPTY_DESCRIPTION = EN.emptyDescription;
 
 /**
  * The radio dot at the head of an option row. 20 is `Radio`'s `lg` rung: the