@oxy.so/bloom 5.0.0 → 5.1.1

package/src/job-board/JobCard.tsx

@@ -1,3 +1,4 @@
+import { InteractionBoundary } from '../overlay/InteractionBoundary';
 import React, { memo, useEffect, useMemo } from 'react';
 import { Pressable, StyleSheet, View, type TextStyle } from 'react-native';
 
@@ -23,7 +24,7 @@ import { resolveAccentColors } from '../theme/accent-colors';
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
 import { VEHICLE_ICON } from '../vehicle-picker';
-import { JOB_BOARD_GEOMETRY, JOB_BOARD_LABELS, JOB_STATE_TONE } from './constants';
+import { JOB_BOARD_GEOMETRY, JOB_STATE_TONE } from './constants';
 import {
   JOB_BOARD_STYLE_ID,
   JOB_BOARD_WEB_CSS,
@@ -33,6 +34,8 @@ import {
   type JobPaint,
 } from './shared';
 import type { JobCardProps, JobPlace } from './types';
+import { useMessages } from '../locale/messages';
+import { JOB_BOARD_MESSAGES } from './messages';
 
 /**
  * One piece of work, from the side of the person who would do it.
@@ -111,6 +114,7 @@ function JobCardComponent({
   style,
   testID,
 }: JobCardProps) {
+  const { messages: boardText } = useMessages(JOB_BOARD_MESSAGES);
   const theme = useTheme();
   const comfortable = density === 'comfortable';
   const paint = useJobPaint(comfortable);
@@ -118,11 +122,11 @@ function JobCardComponent({
   const labelled = comfortable && jobActionsAreLabelled(width, JOB_BOARD_GEOMETRY.narrowWidth);
   const labels = useMemo(
     () => ({
-      ...JOB_BOARD_LABELS,
+      ...boardText.labels,
       ...labelOverrides,
-      state: { ...JOB_BOARD_LABELS.state, ...labelOverrides?.state },
+      state: { ...boardText.labels.state, ...labelOverrides?.state },
     }),
-    [labelOverrides],
+    [labelOverrides, boardText],
   );
 
   useEffect(() => {
@@ -362,7 +366,9 @@ function JobCardComponent({
 
   const hasOwnActions = onTake !== undefined || onPass !== undefined;
   const actionRow =
-    actions ??
+    actions != null ? (
+      <InteractionBoundary disabled={inert}>{actions}</InteractionBoundary>
+    ) :
     (!hasOwnActions ? null : (
       <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }} testID={id('actions')}>
         {onPass && !closed ? (
@@ -457,7 +463,7 @@ function JobCardComponent({
               stops={stops}
               density="compact"
               labels={{ origin: labels.pickup, destination: labels.dropoff }}
-              accessibilityLabel={`${labels.pickup} and ${labels.dropoff}`}
+              accessibilityLabel={boardText.route(labels.pickup, labels.dropoff)}
               testID={id('route')}
             />
           ) : null}
@@ -530,7 +536,11 @@ function JobCardComponent({
               defaultExpanded={defaultBreakdownExpanded}
               expandLabel={labels.showPay}
               collapseLabel={labels.hidePay}
-              accessibilityLabel={`${labels.payDetails} ${job.load}`}
+              accessibilityLabel={
+                labelOverrides?.payDetails !== undefined
+                  ? `${labelOverrides.payDetails} ${job.load}`
+                  : boardText.payDetailsFor(job.load)
+              }
               testID={id('breakdown')}
             />
           ) : null}

package/src/job-board/constants.ts

@@ -2,41 +2,19 @@ import { RADIUS } from '../design-tokens/scales';
 import type { AccentTone } from '../theme/accent-colors';
 import type { VehicleKind } from '../vehicle-picker';
 import type { JobBoardBand, JobBoardLabels, JobBoardSort, JobOfferState } from './types';
+import { JOB_BOARD_MESSAGES, type JobBoardMessages } from './messages';
 
-/** Every default word the card and the board draw. */
+/**
+ * Every default word the card and the board draw, in English. The components
+ * speak the locale's (`JOB_BOARD_MESSAGES`, via `BloomProvider locale`).
+ */
 export const JOB_BOARD_LABELS: Required<
   Omit<JobBoardLabels, 'state' | 'sortOptions' | 'filters'>
 > & {
   state: Record<Exclude<JobOfferState, 'open'>, string>;
   sortOptions: Record<JobBoardSort, string>;
   filters: Required<NonNullable<JobBoardLabels['filters']>>;
-} = {
-  take: 'Take the job',
-  pass: 'Pass',
-  distance: 'Distance',
-  duration: 'Time',
-  window: 'Window',
-  pickup: 'Pick-up',
-  dropoff: 'Drop-off',
-  state: { taken: 'Taken', expired: 'Expired' },
-  showPay: 'Show what it pays',
-  hidePay: 'Hide what it pays',
-  payDetails: 'Pay for',
-  sort: 'Sort jobs',
-  filtersToggle: 'Filters',
-  filtersActive: (count: number) => `${count} applied`,
-  sortOptions: {
-    pay: 'Best paid',
-    distance: 'Nearest',
-    soonest: 'Starting soonest',
-    expiring: 'Closing soonest',
-  },
-  filters: { distance: 'Distance', pay: 'Pay', when: 'When', vehicle: 'Vehicle' },
-  clearFilters: 'Clear filters',
-  refresh: 'Refresh the board',
-  count: (count: number) => (count === 1 ? '1 job' : `${count} jobs`),
-  loading: 'Loading jobs',
-};
+} = JOB_BOARD_MESSAGES.en.labels;
 
 /**
  * The tone a closed job is painted in.
@@ -62,20 +40,32 @@ export const JOB_BOARD_SORTS: readonly JobBoardSort[] = ['pay', 'distance', 'soo
  * are the unit `distanceKm` is compared in; an app on miles supplies its own
  * bands and its own words.
  */
-export const JOB_DISTANCE_BANDS: readonly JobBoardBand[] = [
-  { value: null, label: 'Any distance' },
-  { value: 3, label: 'Under 3 km' },
-  { value: 10, label: 'Under 10 km' },
-  { value: 25, label: 'Under 25 km' },
-];
+/** The default distance bands, in the words of `text` (a `JOB_BOARD_MESSAGES` entry). */
+export function jobDistanceBands(text: JobBoardMessages): readonly JobBoardBand[] {
+  return [
+    { value: null, label: text.bands.anyDistance },
+    { value: 3, label: text.bands.underKm(3) },
+    { value: 10, label: text.bands.underKm(10) },
+    { value: 25, label: text.bands.underKm(25) },
+  ];
+}
+
+/** The default distance bands, in English; the board speaks the locale's. */
+export const JOB_DISTANCE_BANDS: readonly JobBoardBand[] = jobDistanceBands(JOB_BOARD_MESSAGES.en);
 
 /** The default when bands, in minutes from now. */
-export const JOB_WHEN_BANDS: readonly JobBoardBand[] = [
-  { value: null, label: 'Any time' },
-  { value: 60, label: 'Within the hour' },
-  { value: 240, label: 'Next 4 hours' },
-  { value: 1440, label: 'Today' },
-];
+/** The default start-time bands, in the words of `text`. */
+export function jobWhenBands(text: JobBoardMessages): readonly JobBoardBand[] {
+  return [
+    { value: null, label: text.bands.anyTime },
+    { value: 60, label: text.bands.withinHour },
+    { value: 240, label: text.bands.nextHours(4) },
+    { value: 1440, label: text.bands.today },
+  ];
+}
+
+/** The default start-time bands, in English; the board speaks the locale's. */
+export const JOB_WHEN_BANDS: readonly JobBoardBand[] = jobWhenBands(JOB_BOARD_MESSAGES.en);
 
 /** The vehicles a board filters on by default, smallest first. */
 export const JOB_VEHICLE_KINDS: readonly VehicleKind[] = [