@oxy.so/bloom 5.0.0 → 5.1.0

package/src/important-alerts-card/types.ts

@@ -36,9 +36,9 @@ export interface ImportantAlertsCardProps {
    * `alerts.length` when the feed lists only the most recent ones.
    */
   count: number | string;
-  /** Card title. Defaults to `"Important alerts"`. */
+  /** Card title (`"Important alerts"` in English). */
   title?: string;
-  /** Caption after the count. Defaults to `"this week"`. */
+  /** Caption after the count (`"this week"` in English). */
   countCaption?: string;
   /** Label of the range pill in the corner (`"29 Jun - 5 Jul"`). Omit to hide the pill. */
   rangeLabel?: string;

package/src/job-board/JobBoard.tsx

@@ -14,16 +14,17 @@ import * as Skeleton from '../skeleton';
 import { surfaceFillVars, useSurfaceLevel } from '../styles/surface-levels';
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
-import { VEHICLE_ICON, VEHICLE_OPTIONS } from '../vehicle-picker';
+import { VEHICLE_ICON } from '../vehicle-picker';
+import { builtInVehicleOptions } from '../vehicle-picker/constants';
+import { VEHICLE_PICKER_MESSAGES } from '../vehicle-picker/messages';
 import type { VehicleKind } from '../vehicle-picker';
 import { JobCard } from './JobCard';
 import {
   JOB_BOARD_GEOMETRY,
-  JOB_BOARD_LABELS,
   JOB_BOARD_SORTS,
-  JOB_DISTANCE_BANDS,
+  jobDistanceBands,
   JOB_VEHICLE_KINDS,
-  JOB_WHEN_BANDS,
+  jobWhenBands,
 } from './constants';
 import {
   countActiveJobFilters,
@@ -33,6 +34,8 @@ import {
   toggleJobVehicle,
 } from './shared';
 import type { JobBoardBand, JobBoardFilter, JobBoardProps, JobBoardSort } from './types';
+import { useMessages } from '../locale/messages';
+import { JOB_BOARD_MESSAGES } from './messages';
 
 /**
  * The work on offer, filtered, ordered and counted.
@@ -79,9 +82,9 @@ function JobBoardComponent({
   filter: filterProp,
   defaultFilter,
   onFilterChange,
-  distanceBands = JOB_DISTANCE_BANDS,
+  distanceBands: distanceBandsProp,
   payBands,
-  whenBands = JOB_WHEN_BANDS,
+  whenBands: whenBandsProp,
   vehicleKinds = JOB_VEHICLE_KINDS,
   showCount = true,
   onRefresh,
@@ -95,14 +98,21 @@ function JobBoardComponent({
   density = 'comfortable',
   route,
   breakdown,
-  emptyTitle = 'No jobs right now',
-  emptyDescription = 'Nothing matches what you are looking for. Widen a filter, or pull the board again in a minute.',
+  emptyTitle: emptyTitleProp,
+  emptyDescription: emptyDescriptionProp,
   emptyAction,
   labels: labelOverrides,
-  accessibilityLabel = 'Jobs',
+  accessibilityLabel: accessibilityLabelProp,
   style,
   testID,
 }: JobBoardProps) {
+  const { messages: boardText } = useMessages(JOB_BOARD_MESSAGES);
+  const emptyTitle = emptyTitleProp ?? boardText.emptyTitle;
+  const emptyDescription = emptyDescriptionProp ?? boardText.emptyDescription;
+  const accessibilityLabel = accessibilityLabelProp ?? boardText.list;
+  const { messages: vehicleText } = useMessages(VEHICLE_PICKER_MESSAGES);
+  const distanceBands = useMemo(() => distanceBandsProp ?? jobDistanceBands(boardText), [distanceBandsProp, boardText]);
+  const whenBands = useMemo(() => whenBandsProp ?? jobWhenBands(boardText), [whenBandsProp, boardText]);
   const theme = useTheme();
   const ambient = useSurfaceLevel(0);
   const paint = useMemo(
@@ -111,12 +121,12 @@ function JobBoardComponent({
   );
   const labels = useMemo(
     () => ({
-      ...JOB_BOARD_LABELS,
+      ...boardText.labels,
       ...labelOverrides,
-      sortOptions: { ...JOB_BOARD_LABELS.sortOptions, ...labelOverrides?.sortOptions },
-      filters: { ...JOB_BOARD_LABELS.filters, ...labelOverrides?.filters },
+      sortOptions: { ...boardText.labels.sortOptions, ...labelOverrides?.sortOptions },
+      filters: { ...boardText.labels.filters, ...labelOverrides?.filters },
     }),
-    [labelOverrides],
+    [labelOverrides, boardText],
   );
   const [sort, setSort] = useControllableState<JobBoardSort>({
     value: sortProp,
@@ -154,9 +164,9 @@ function JobBoardComponent({
 
   const vehicleWords = useMemo(() => {
     const out = new Map<string, string>();
-    for (const option of VEHICLE_OPTIONS) out.set(option.value, option.label);
+    for (const option of builtInVehicleOptions(vehicleText)) out.set(option.value, option.label);
     return out;
-  }, []);
+  }, [vehicleText]);
 
   /** One dimension: a named, sideways-scrolling `radiogroup` of bands. */
   const bandRow = (

package/src/job-board/JobCard.tsx

@@ -23,7 +23,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 +33,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 +113,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 +121,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(() => {
@@ -457,7 +460,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 +533,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[] = [