@oxy.so/bloom 4.32.0 → 4.34.0

package/src/locale/plural.ts

@@ -0,0 +1,53 @@
+import type { BloomLanguage } from './languages';
+
+export type PluralCategory = 'zero' | 'one' | 'two' | 'few' | 'many' | 'other';
+
+/**
+ * The CLDR cardinal category of a whole number, for Bloom's languages.
+ *
+ * Written out rather than read from `Intl.PluralRules` because Hermes — React
+ * Native's engine — does not implement `PluralRules`: a catalog that called it
+ * would pluralise on web and throw on a phone. Whole numbers only; a count of
+ * days or minutes is never fractional.
+ */
+export function pluralCategory(language: BloomLanguage, count: number): PluralCategory {
+  const n = Math.abs(Math.trunc(count));
+  const mod10 = n % 10;
+  const mod100 = n % 100;
+  switch (language) {
+    case 'ja':
+    case 'zh':
+    case 'id':
+      return 'other';
+    case 'fr':
+    case 'pt':
+    case 'hi':
+    case 'bn':
+      return n === 0 || n === 1 ? 'one' : 'other';
+    case 'ru':
+      if (mod10 === 1 && mod100 !== 11) return 'one';
+      if (mod10 >= 2 && mod10 <= 4 && (mod100 < 12 || mod100 > 14)) return 'few';
+      return 'many';
+    case 'ar':
+      if (n === 0) return 'zero';
+      if (n === 1) return 'one';
+      if (n === 2) return 'two';
+      if (mod100 >= 3 && mod100 <= 10) return 'few';
+      if (mod100 >= 11) return 'many';
+      return 'other';
+    default:
+      return n === 1 ? 'one' : 'other';
+  }
+}
+
+/**
+ * Picks the form for `count`. `other` is required; a category a language
+ * uses but the caller left out falls back to it.
+ */
+export function plural(
+  language: BloomLanguage,
+  count: number,
+  forms: Partial<Record<PluralCategory, string>> & { other: string },
+): string {
+  return (forms[pluralCategory(language, count)] ?? forms.other).replace('{n}', String(count));
+}

package/src/map-marker/MapListingPreview.tsx

@@ -24,6 +24,7 @@ import {
   type MapMarkerPaint,
 } from './shared';
 import type { MapListingPreviewProps } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 /**
  * The small card a map shows when a marker is pressed.
@@ -124,12 +125,15 @@ function MapListingPreviewComponent({
   onPress,
   layout = 'vertical',
   width = DEFAULT_WIDTH,
-  closeLabel = 'Close',
-  favoriteLabel = 'Save',
+  closeLabel: closeLabelProp,
+  favoriteLabel: favoriteLabelProp,
   accessibilityLabel,
   style,
   testID,
 }: MapListingPreviewProps) {
+  const common = useCommonMessages();
+  const closeLabel = closeLabelProp ?? common.close;
+  const favoriteLabel = favoriteLabelProp ?? common.save;
   const theme = useTheme();
   const paint = useMemo(() => resolveMapMarkerPaint(theme), [theme]);
   const resolver = useImageResolver();

package/src/media-card/FriendActivityCard.tsx

@@ -14,6 +14,7 @@ import { Text } from '../typography';
 import { Artwork, CardLink, useMediaCardCss } from './parts';
 import { composeName, resolveMediaCardPaint, ROW_PADDING, ROW_RADIUS } from './shared';
 import type { FriendActivityCardProps } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 const AVATAR = 40;
 const DOT = 12;
@@ -50,13 +51,14 @@ function FriendActivityCardComponent({
   style,
   testID,
 }: FriendActivityCardProps) {
+  const common = useCommonMessages();
   const theme = useTheme();
   useMediaCardCss();
   const paint = useMemo(() => resolveMediaCardPaint(theme), [theme]);
 
   if (skeleton) {
     return (
-      <View aria-busy accessibilityLabel="Loading" style={[{ flexDirection: 'row', gap: 12, padding: ROW_PADDING }, style]} testID={testID}>
+      <View aria-busy accessibilityLabel={common.loading} style={[{ flexDirection: 'row', gap: 12, padding: ROW_PADDING }, style]} testID={testID}>
         <SkeletonCircle size={AVATAR} />
         <View style={{ flex: 1, gap: 8, justifyContent: 'center' }}>
           <SkeletonBox width="35%" height={12} borderRadius={4} />

package/src/media-card/GenreCard.tsx

@@ -19,6 +19,7 @@ import {
   TILE_ARTWORK,
 } from './shared';
 import type { GenreCardProps, MediaCardSize } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 const TITLE: Record<MediaCardSize, TypeScaleVariant> = {
   large: 'title-2-bold',
@@ -51,6 +52,7 @@ function GenreCardComponent({
   style,
   testID,
 }: GenreCardProps) {
+  const common = useCommonMessages();
   const theme = useTheme();
   useMediaCardCss();
   const resolver = useImageResolver();
@@ -62,7 +64,7 @@ function GenreCardComponent({
 
   if (skeleton) {
     return (
-      <View aria-busy accessibilityLabel="Loading" style={[{ width: side, aspectRatio: 1 }, style]} testID={testID}>
+      <View aria-busy accessibilityLabel={common.loading} style={[{ width: side, aspectRatio: 1 }, style]} testID={testID}>
         <SkeletonBox width="100%" height="100%" borderRadius={GENRE_RADIUS} />
       </View>
     );

package/src/media-card/MediaCard.tsx

@@ -24,6 +24,7 @@ import {
   TILE_RADIUS,
 } from './shared';
 import type { MediaCardLayout, MediaCardProps, MediaCardSize } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 /**
  * The anatomy every music card shares.
@@ -92,6 +93,7 @@ export function MediaCardSkeleton({
   style?: StyleProp<ViewStyle>;
   testID?: string;
 }) {
+  const common = useCommonMessages();
   const box = resolveArtworkBox(size, layout, aspectRatio, artworkSize);
   const row = layout === 'row';
   const padding = row ? ROW_PADDING : TILE_PADDING;
@@ -103,7 +105,7 @@ export function MediaCardSkeleton({
   return (
     <View
       aria-busy
-      accessibilityLabel="Loading"
+      accessibilityLabel={common.loading}
       style={[
         {
           flexDirection: row ? 'row' : 'column',

package/src/media-card/QuickAccessTile.tsx

@@ -18,6 +18,7 @@ import {
   resolvePlayVisibility,
 } from './shared';
 import type { QuickAccessTileProps } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 /**
  * The compact home-screen shortcut, laid out 2–4 to a row.
@@ -55,13 +56,14 @@ function QuickAccessTileComponent({
   style,
   testID,
 }: QuickAccessTileProps) {
+  const common = useCommonMessages();
   const theme = useTheme();
   useMediaCardCss();
   const paint = useMemo(() => resolveMediaCardPaint(theme), [theme]);
 
   if (skeleton) {
     return (
-      <View aria-busy accessibilityLabel="Loading" style={style} testID={testID}>
+      <View aria-busy accessibilityLabel={common.loading} style={style} testID={testID}>
         <SkeletonBox width="100%" height={QUICK_TILE_HEIGHT} borderRadius={QUICK_TILE_RADIUS} />
       </View>
     );

package/src/media-card/RecapCard.tsx

@@ -12,6 +12,7 @@ import { Text } from '../typography';
 import { Artwork, CoverGradient, useMediaCardCss } from './parts';
 import { IS_WEB, RECAP_RADIUS, resolveCoverTint, resolveMediaCardPaint, type CoverTint } from './shared';
 import type { RecapCardProps } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 /**
  * The share pill over a generated cover. Not `Button`: its fill is the cover's
@@ -76,6 +77,7 @@ function RecapCardComponent({
   style,
   testID,
 }: RecapCardProps) {
+  const common = useCommonMessages();
   const theme = useTheme();
   useMediaCardCss();
   const paint = useMemo(() => resolveMediaCardPaint(theme), [theme]);
@@ -83,7 +85,7 @@ function RecapCardComponent({
 
   if (skeleton) {
     return (
-      <View aria-busy accessibilityLabel="Loading" style={style} testID={testID}>
+      <View aria-busy accessibilityLabel={common.loading} style={style} testID={testID}>
         <SkeletonBox width="100%" height={360} borderRadius={RECAP_RADIUS} />
       </View>
     );

package/src/media-card/parts.tsx

@@ -37,6 +37,7 @@ import {
 } from './shared';
 import type { MediaCardMenuItem } from './types';
 import type { BloomIconComponent } from '../icons/icon-component';
+import { useCommonMessages } from '../locale/common-messages';
 
 export function useMediaCardCss(): void {
   React.useEffect(() => {
@@ -324,7 +325,7 @@ export function hasMenu(menu: React.ReactNode, items?: ReadonlyArray<MediaCardMe
 export function CardMenu({
   items,
   menu,
-  label = 'More options',
+  label: labelProp,
   subject,
   open,
   onOpenChange,
@@ -340,7 +341,9 @@ export function CardMenu({
   reveal: boolean;
   testID?: string;
 }) {
-  const name = `${label} for ${subject}`;
+  const common = useCommonMessages();
+  const label = labelProp ?? common.moreOptions;
+  const name = common.labelFor(label, subject);
   return (
     <View
       {...webDataSet({ bloomMediaCardMenu: '', ...(reveal ? { bloomMediaCardReveal: 'hover' } : null) })}

package/src/media-header/MediaActionBar.tsx

@@ -33,6 +33,7 @@ import type {
   MediaMoreButtonProps,
   ShuffleButtonProps,
 } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 /**
  * The row of controls under a media header.
@@ -144,10 +145,12 @@ ShuffleButton.displayName = 'ShuffleButton';
 
 function MediaMoreButtonComponent({
   onPress,
-  accessibilityLabel = 'More options',
+  accessibilityLabel: accessibilityLabelProp,
   size = 28,
   ...rest
 }: MediaMoreButtonProps) {
+  const common = useCommonMessages();
+  const accessibilityLabel = accessibilityLabelProp ?? common.moreOptions;
   return (
     <MediaIconButton
       icon={RiMoreFill}

package/src/media-header/PopularTracks.tsx

@@ -11,6 +11,7 @@ import { Text } from '../typography';
 import { useImageUri, useMediaHeaderPaint } from './parts';
 import { type MediaHeaderPaint } from './shared';
 import type { PopularTrack, PopularTracksProps } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 /**
  * An artist's most played tracks: five rows, "See more" shows ten.
@@ -129,13 +130,15 @@ function PopularTracksComponent({
   expanded: expandedProp,
   onExpandedChange,
   showMoreLabel = 'See more',
-  showLessLabel = 'Show less',
+  showLessLabel: showLessLabelProp,
   activeTrackId,
   playing = false,
   onTrackPress,
   style,
   testID,
 }: PopularTracksProps) {
+  const common = useCommonMessages();
+  const showLessLabel = showLessLabelProp ?? common.showLess;
   const paint = useMediaHeaderPaint();
   const [expandedState, setExpandedState] = useState(false);
   const expanded = expandedProp ?? expandedState;

package/src/media-header/parts.tsx

@@ -19,6 +19,7 @@ import { clamp01 } from '../styles/clamp';
 import { isImageUrl as isUrl } from '../image-resolver';
 import { webDataSet as webData } from '../styles/web-data';
 import type { MediaHeaderPerson, MediaImageSource } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 /** The family's paint for an artwork colour, plus its web sheet. */
 export function useMediaHeaderPaint(artworkColor?: string | null): MediaHeaderPaint {
@@ -395,8 +396,8 @@ export function ClampedText({
   color,
   linkColor,
   ring,
-  showMoreLabel = 'Show more',
-  showLessLabel = 'Show less',
+  showMoreLabel: showMoreLabelProp,
+  showLessLabel: showLessLabelProp,
   testID,
 }: {
   children: string;
@@ -408,6 +409,9 @@ export function ClampedText({
   showLessLabel?: string;
   testID?: string;
 }) {
+  const common = useCommonMessages();
+  const showMoreLabel = showMoreLabelProp ?? common.showMore;
+  const showLessLabel = showLessLabelProp ?? common.showLess;
   const [expanded, setExpanded] = React.useState(false);
   const { state: hovered, onIn, onOut } = useInteractionState();
   // Only offer the toggle when the text can plausibly overflow: ~ 60 characters a line.

package/src/media-shelf/Shelf.tsx

@@ -31,6 +31,7 @@ import {
   type ShelfScroll,
 } from './shared';
 import type { ShelfProps } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 /**
  * A section of a home or search page: a header over a run of items.
@@ -69,12 +70,15 @@ function ShelfComponent({
   gap = SHELF_GAP,
   contentInset = 0,
   headingLevel = 2,
-  previousLabel = 'Previous',
-  nextLabel = 'Next',
+  previousLabel: previousLabelProp,
+  nextLabel: nextLabelProp,
   children,
   style,
   testID,
 }: ShelfProps) {
+  const common = useCommonMessages();
+  const previousLabel = previousLabelProp ?? common.previous;
+  const nextLabel = nextLabelProp ?? common.next;
   const theme = useTheme();
   const reducedMotion = useReducedMotion();
   useEffect(() => {

package/src/media-shelf/ShelfSkeleton.tsx

@@ -4,6 +4,7 @@ import { ScrollView, View, type LayoutChangeEvent } from 'react-native';
 import * as Skeleton from '../skeleton';
 import { SHELF_GAP, shelfGridColumns } from './shared';
 import type { ShelfSkeletonProps } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 /**
  * The placeholder for a `Shelf` that is still loading: a title bar and
@@ -21,10 +22,12 @@ function ShelfSkeletonComponent({
   round = false,
   eyebrow = false,
   gap = SHELF_GAP,
-  accessibilityLabel = 'Loading',
+  accessibilityLabel: accessibilityLabelProp,
   style,
   testID,
 }: ShelfSkeletonProps) {
+  const common = useCommonMessages();
+  const accessibilityLabel = accessibilityLabelProp ?? common.loading;
   const [gridWidth, setGridWidth] = useState(0);
   const onGridLayout = useCallback((event: LayoutChangeEvent) => {
     const width = event.nativeEvent.layout.width;

package/src/menubar/Menubar.web.tsx

@@ -27,12 +27,13 @@ import { cx } from '../floating/shared';
 import { useAnchorRect } from '../floating/use-anchor-rect';
 import { useMenubarMenu } from './context';
 import type { MenubarContentProps } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 export { Menubar, MenubarMenu, MenubarTrigger } from './MenubarBase';
 
 export function MenubarContent({
   children,
-  label = 'Menu',
+  label: labelProp,
   side,
   align = 'start',
   // `alignOffset={-4} sideOffset={8}` — upstream's own defaults, which pull the
@@ -47,6 +48,8 @@ export function MenubarContent({
   style,
   testID,
 }: MenubarContentProps) {
+  const common = useCommonMessages();
+  const label = labelProp ?? common.menu;
   const menu = useMenubarMenu();
   const anchor = useAnchorRect(menu.anchorRef, menu.open);
   const close = useCallback(() => menu.setOpen(false), [menu]);

package/src/message-media/FileMessage.tsx

@@ -30,6 +30,7 @@ import {
   resolveMessageMediaPaint,
 } from './shared';
 import type { FileKind, FileMessageProps } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 /** One glyph per kind. The colour is `resolveFileKindPaint`'s job, not this map's. */
 const KIND_ICONS: Record<FileKind, typeof RiFileTextLine> = {
@@ -84,13 +85,15 @@ function FileMessageComponent({
   width,
   accessibilityLabel,
   downloadLabel = 'Download',
-  cancelLabel = 'Cancel',
+  cancelLabel: cancelLabelProp,
   tone = 'incoming',
   onColor,
   bubbleColor,
   style,
   testID,
 }: FileMessageProps) {
+  const common = useCommonMessages();
+  const cancelLabel = cancelLabelProp ?? common.cancel;
   const theme = useTheme();
   useMessageMediaCss();
   const paint = useMemo(

package/src/message-media/parts.tsx

@@ -29,6 +29,7 @@ import {
 } from './shared';
 import { useMediaSource } from './use-media-source';
 import type { MessageMediaSource } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 /**
  * The pieces every block in `message-media` is built from.
@@ -557,10 +558,12 @@ function retryStyle(hovered: boolean, paint: MessageMediaPaint): WebCssStyle {
 export const MediaFailure = memo(function MediaFailure({
   paint,
   label = 'Not sent',
-  retryLabel = 'Retry',
+  retryLabel: retryLabelProp,
   onRetry,
   testID,
 }: MediaFailureProps) {
+  const common = useCommonMessages();
+  const retryLabel = retryLabelProp ?? common.retry;
   useMessageMediaCss();
   const [hovered, setHovered] = useState(false);
   return (

package/src/music-library/SearchField.tsx

@@ -14,6 +14,7 @@ import { useTheme } from '../theme/use-theme';
 import { TYPE_SCALE } from '../typography/scale';
 import { IS_WEB, MUSIC_LIBRARY_CSS, MUSIC_LIBRARY_STYLE_ID, resolveMusicLibraryPaint } from './shared';
 import type { SearchFieldProps } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 /**
  * The top-bar search pill.
@@ -59,13 +60,15 @@ function SearchFieldComponent({
   onBrowsePress,
   browseActive = false,
   placeholder = 'What do you want to play?',
-  accessibilityLabel = 'Search',
+  accessibilityLabel: accessibilityLabelProp,
   clearLabel = 'Clear search',
   browseLabel = 'Browse',
   autoFocus,
   style,
   testID,
 }: SearchFieldProps) {
+  const common = useCommonMessages();
+  const accessibilityLabel = accessibilityLabelProp ?? common.search;
   const theme = useTheme();
   useEffect(() => {
     adoptStyleSheet(MUSIC_LIBRARY_STYLE_ID, MUSIC_LIBRARY_CSS);

package/src/overlay/Overlay.tsx

@@ -61,6 +61,7 @@ import { useHardwareBack } from './use-hardware-back';
 import { useModalOverlayRegistration } from './use-modal-overlay-active';
 import { useOverlayLayer } from './use-overlay-layer';
 import type { OverlayRootProps, BackdropProps } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 const AnimatedBlurView = Animated.createAnimatedComponent(BlurView);
 
@@ -390,9 +391,11 @@ export const Backdrop = memo(function Backdrop({
   style,
   layerStyle,
   children,
-  accessibilityLabel = 'Dismiss',
+  accessibilityLabel: accessibilityLabelProp,
   testID,
 }: BackdropProps) {
+  const common = useCommonMessages();
+  const accessibilityLabel = accessibilityLabelProp ?? common.dismiss;
   const inert = disabled || !onPress;
   // `undefined` unless this backdrop is inside a declared separate native
   // window. On Android that is the difference between a real blur and a crash.

package/src/page-header/PageHeader.tsx

@@ -33,6 +33,7 @@ import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
 import { EdgeScrim, SCRIM_TAIL_RATIO } from './EdgeScrim';
 import type { PageHeaderProps } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 /**
  * `PageHeader`: a screen's top chrome.
@@ -120,7 +121,7 @@ function PageHeaderComponent({
   presentation = 'floating',
   placement = 'inline',
   onBack,
-  backLabel = 'Back',
+  backLabel: backLabelProp,
   leading,
   actions,
   border = 'auto',
@@ -134,6 +135,8 @@ function PageHeaderComponent({
   style,
   testID,
 }: PageHeaderProps) {
+  const common = useCommonMessages();
+  const backLabel = backLabelProp ?? common.back;
   const isWeb = Platform.OS === 'web';
   const floating = presentation === 'floating';
   const overlay = placement === 'overlay';

package/src/pagination/Pagination.tsx

@@ -13,6 +13,7 @@ import { RiArrowLeftLine as ArrowLeft } from '../icons/remix/RiArrowLeftLine';
 import { RiArrowRightLine as ArrowRight } from '../icons/remix/RiArrowRightLine';
 import type { Theme } from '../theme/types';
 import type { PaginationProps } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 /**
  * The pagination, coloured from Bloom's theme through the ramps
@@ -177,13 +178,16 @@ const PaginationComponent: React.FC<PaginationProps> = ({
   totalPages,
   onChange,
   siblingCount = 1,
-  previousLabel = 'Previous',
-  nextLabel = 'Next',
+  previousLabel: previousLabelProp,
+  nextLabel: nextLabelProp,
   getPageLabel,
   accessibilityLabel = 'Pagination',
   style,
   testID,
 }) => {
+  const common = useCommonMessages();
+  const previousLabel = previousLabelProp ?? common.previous;
+  const nextLabel = nextLabelProp ?? common.next;
   const theme = useTheme();
   useInteractiveWebCss(STYLE_ID, PAGINATION_CSS);
   const palette = useMemo(() => resolvePaginationPalette(theme), [theme]);

package/src/place-card/PlaceCard.tsx

@@ -34,6 +34,7 @@ import { PLACE_CARD_GEOMETRY, PLACE_OPEN_TONE } from './constants';
 import { PlaceActions } from './PlaceActions';
 import { composePlaceName, openLabelFor, resolvePlaceCardPaint, type PlaceCardPaint } from './shared';
 import type { PlaceCardProps } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 /**
  * A place on the map — the result you scroll past, and the header of the sheet
@@ -219,11 +220,12 @@ function PlaceCardSkeleton({
   style,
   testID,
 }: Pick<PlaceCardProps, 'style' | 'testID'> & { density: 'row' | 'detail' }) {
+  const common = useCommonMessages();
   if (density === 'row') {
     return (
       <View
         aria-busy
-        accessibilityLabel="Loading"
+        accessibilityLabel={common.loading}
         style={[{ flexDirection: 'row', alignItems: 'flex-start' }, style]}
         testID={testID}
       >
@@ -243,7 +245,7 @@ function PlaceCardSkeleton({
     );
   }
   return (
-    <View aria-busy accessibilityLabel="Loading" style={style} testID={testID}>
+    <View aria-busy accessibilityLabel={common.loading} style={style} testID={testID}>
       <SkeletonBox width="100%" height={G.cover} borderRadius={G.radius} />
       <View style={{ gap: 8, paddingTop: G.padding }}>
         <SkeletonBox width="55%" height={20} borderRadius={4} />

package/src/place-reviews/PlaceReviewCard.tsx

@@ -22,6 +22,7 @@ import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
 import { PLACE_REVIEW_CATEGORIES_WIDE_MIN_WIDTH } from './constants';
 import type { PlaceReviewCardProps } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 /**
  * One past tenant's review of a building.
@@ -60,8 +61,8 @@ function PlaceReviewCardComponent({
   notRecommendLabel = "Wouldn't recommend",
   text,
   numberOfLines = 4,
-  showMoreLabel = 'Show more',
-  showLessLabel = 'Show less',
+  showMoreLabel: showMoreLabelProp,
+  showLessLabel: showLessLabelProp,
   expanded: expandedProp,
   onExpandedChange,
   helpfulCount,
@@ -74,6 +75,9 @@ function PlaceReviewCardComponent({
   style,
   testID,
 }: PlaceReviewCardProps) {
+  const common = useCommonMessages();
+  const showMoreLabel = showMoreLabelProp ?? common.showMore;
+  const showLessLabel = showLessLabelProp ?? common.showLess;
   useHousingWebCss();
   const palette = useHousingPalette();
   const id = (part: string) => (testID ? `${testID}-${part}` : undefined);

package/src/place-reviews/WriteReviewPrompt.tsx

@@ -8,6 +8,7 @@ import { RiQuillPenLine } from '../icons/remix/RiQuillPenLine';
 import { HousingCard, IconTile, useHousingPalette } from '../tenancy/parts';
 import { Text } from '../typography';
 import type { WriteReviewPromptProps } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 /**
  * An invitation for a past tenant to review the building.
@@ -28,11 +29,13 @@ function WriteReviewPromptComponent({
   actionLabel = 'Write a review',
   onStart,
   onDismiss,
-  dismissLabel = 'Dismiss',
+  dismissLabel: dismissLabelProp,
   media,
   style,
   testID,
 }: WriteReviewPromptProps) {
+  const common = useCommonMessages();
+  const dismissLabel = dismissLabelProp ?? common.dismiss;
   const palette = useHousingPalette();
   const id = (part: string) => (testID ? `${testID}-${part}` : undefined);
   const body = description ?? `Help future tenants of ${buildingTitle}. Reviews are anonymous.`;