@oxy.so/bloom 4.0.0 → 4.2.0

package/src/cart-panel/CartPromoField.tsx

@@ -0,0 +1,112 @@
+import React, { memo, useMemo } from 'react';
+import { View } from 'react-native';
+
+import { Button } from '../button';
+import { Chip } from '../chip';
+import { Field } from '../field';
+import { RiTicketLine } from '../icons/remix/RiTicketLine';
+import { InputGroup, InputGroupAddon } from '../input-group';
+import { useSurfaceFill } from '../styles/surface-levels';
+import { TextFieldInput } from '../text-field';
+import { resolveAccentColors } from '../theme/accent-colors';
+import { useTheme } from '../theme/use-theme';
+import { resolveCartPaint } from './shared';
+import type { CartPromoFieldProps } from './types';
+
+/** The ticket glyph in an applied code's pill, at the `xl` chip's icon rung. */
+const PROMO_GLYPH = 16;
+
+/**
+ * A promo code: type it, apply it, and see it once it is on.
+ *
+ *   empty    `InputGroup` — a `TextFieldInput` with the apply button as a
+ *            divided addon, so the code and the action share one shell and one
+ *            focus ring
+ *   applied  the input is REPLACED by a removable pill. A field still holding a
+ *            code that has already been accepted invites a reader to press
+ *            Apply again and wonder why nothing happened.
+ *   rejected `error` on the `Field`, which paints the group invalid and wires
+ *            `aria-describedby` to the message — both through the field
+ *            contract rather than by hand.
+ *
+ * The apply button is disabled while the field is blank: an Apply that can only
+ * fail is a control that teaches a reader to distrust it. Whether a code is
+ * VALID is the app's to say, and it says it by handing back `error` or
+ * `applied`.
+ */
+function CartPromoFieldComponent({
+  value,
+  onChangeText,
+  onApply,
+  applied,
+  onRemove,
+  removeLabel,
+  label = 'Promo code',
+  placeholder,
+  applyLabel = 'Apply',
+  error,
+  disabled = false,
+  style,
+  testID,
+}: CartPromoFieldProps) {
+  const theme = useTheme();
+  const surface = useSurfaceFill();
+  const paint = useMemo(() => resolveCartPaint(theme, surface), [theme, surface]);
+  // The pill's glyph is painted by the caller — `Chip` renders `startIcon` as
+  // given — so it is read from the same recipe the pill's own label comes from.
+  const glyph = resolveAccentColors(theme.colors, 'success', 'subtle').foreground;
+
+  if (applied) {
+    return (
+      <Field label={label} disabled={disabled} style={style} testID={testID}>
+        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+          <Chip
+            size="xl"
+            variant="subtle"
+            color="success"
+            surface={paint.wash}
+            startIcon={<RiTicketLine width={PROMO_GLYPH} height={PROMO_GLYPH} fill={glyph} />}
+            onClose={disabled ? undefined : onRemove}
+            closeLabel={removeLabel ?? `Remove ${applied}`}
+            testID={testID ? `${testID}-applied` : undefined}
+          >
+            {applied}
+          </Chip>
+        </View>
+      </Field>
+    );
+  }
+
+  return (
+    <Field label={label} error={error} disabled={disabled} style={style} testID={testID}>
+      <InputGroup disabled={disabled} testID={testID ? `${testID}-group` : undefined}>
+        <TextFieldInput
+          label={label}
+          value={value}
+          onChangeText={onChangeText}
+          placeholder={placeholder}
+          disabled={disabled}
+          autoCapitalize="characters"
+          autoCorrect={false}
+          returnKeyType="done"
+          onSubmitEditing={onApply}
+          testID={testID ? `${testID}-input` : undefined}
+        />
+        <InputGroupAddon divider noPadding>
+          <Button
+            variant="ghost"
+            size="small"
+            onPress={onApply}
+            disabled={disabled || value.trim() === ''}
+            testID={testID ? `${testID}-apply` : undefined}
+          >
+            {applyLabel}
+          </Button>
+        </InputGroupAddon>
+      </InputGroup>
+    </Field>
+  );
+}
+
+export const CartPromoField = memo(CartPromoFieldComponent);
+CartPromoField.displayName = 'CartPromoField';

package/src/cart-panel/CartTipPicker.tsx

@@ -0,0 +1,86 @@
+import React, { memo, useMemo } from 'react';
+import { View } from 'react-native';
+
+import { SegmentedControl, SegmentedControlItem, SegmentedControlItemText } from '../segmented-control';
+import { useSurfaceFill } from '../styles/surface-levels';
+import { useTheme } from '../theme/use-theme';
+import { Text } from '../typography';
+import { resolveCartPaint } from './shared';
+import type { CartTipPickerProps } from './types';
+
+/**
+ * What to add for the courier: a single choice among a few pre-formatted
+ * amounts.
+ *
+ * It is `SegmentedControl type="radio"`, which already IS a `radiogroup` of
+ * `radio`s that reads a `Field`, slides its thumb and carries one focus ring —
+ * a row of pills would be a second grouped-choice control with the same
+ * meaning, and the one thing it could not do is announce "2 of 4".
+ *
+ * `large` is the rung, because the segments are a finger's target: the control
+ * is 44 tall there, which is the floor a touch target has.
+ *
+ * Every amount is a STRING the app formatted. A percentage and a fixed amount
+ * are both just labels here; nothing computes either, and "No tip" is an
+ * option like any other rather than a state this component invents.
+ */
+function CartTipPickerComponent({
+  options,
+  value,
+  onValueChange,
+  label = 'Tip',
+  description,
+  disabled = false,
+  style,
+  testID,
+}: CartTipPickerProps) {
+  const theme = useTheme();
+  const surface = useSurfaceFill();
+  const paint = useMemo(() => resolveCartPaint(theme, surface), [theme, surface]);
+
+  if (options.length === 0) return null;
+
+  return (
+    <View style={[{ gap: 8 }, style]} testID={testID}>
+      <Text
+        variant="body-medium"
+        testID={testID ? `${testID}-label` : undefined}
+        style={{ color: paint.text }}
+      >
+        {label}
+      </Text>
+      <SegmentedControl
+        label={label}
+        type="radio"
+        size="large"
+        value={value ?? ''}
+        onChange={onValueChange}
+        disabled={disabled}
+        style={{ alignSelf: 'stretch' }}
+        testID={testID ? `${testID}-options` : undefined}
+      >
+        {options.map((option) => (
+          <SegmentedControlItem
+            key={option.id}
+            value={option.id}
+            testID={testID ? `${testID}-option-${option.id}` : undefined}
+          >
+            <SegmentedControlItemText>{option.label}</SegmentedControlItemText>
+          </SegmentedControlItem>
+        ))}
+      </SegmentedControl>
+      {description ? (
+        <Text
+          variant="caption-1-regular"
+          testID={testID ? `${testID}-description` : undefined}
+          style={{ color: paint.textSecondary }}
+        >
+          {description}
+        </Text>
+      ) : null}
+    </View>
+  );
+}
+
+export const CartTipPicker = memo(CartTipPickerComponent);
+CartTipPicker.displayName = 'CartTipPicker';

package/src/cart-panel/constants.ts

@@ -0,0 +1,36 @@
+import type { CartDensity } from './types';
+
+export interface CartGeometry {
+  /** The line's square thumbnail. */
+  thumb: number;
+  /** Its corner. */
+  thumbRadius: number;
+  /** The vendor header's round tile. */
+  vendorTile: number;
+}
+
+/**
+ * 56 is the basket rung: a line carries a name, its options and a price, which
+ * is three text lines, and a 56 square is exactly as tall as those three — the
+ * picture and the words end together. The menu's own 72 belongs to a row that
+ * also carries a two-line description.
+ */
+export const CART_GEOMETRY: Record<CartDensity, CartGeometry> = {
+  comfortable: { thumb: 56, thumbRadius: 10, vendorTile: 40 },
+  compact: { thumb: 44, thumbRadius: 8, vendorTile: 32 },
+};
+
+/** Between the basket's blocks: the lines, the tip, the promo, the totals. */
+export const CART_BLOCK_GAP = 20;
+
+/** Between two lines. */
+export const CART_LINE_GAP = 4;
+
+/** The minimum-order bar's height. The `Meter` default, written down so the doc can name it. */
+export const CART_METER_HEIGHT = 6;
+
+/** How far a sold-out line's photo is washed toward the panel. */
+export const CART_WASH_OPACITY = 0.5;
+
+/** What the options line joins the chosen options with. */
+export const CART_OPTION_SEPARATOR = ' · ';

package/src/cart-panel/index.ts

@@ -0,0 +1,19 @@
+export { CartLine } from './CartLine';
+export { CartPanel } from './CartPanel';
+export { CartPromoField } from './CartPromoField';
+export { CartTipPicker } from './CartTipPicker';
+export { CART_BLOCK_GAP, CART_GEOMETRY, CART_LINE_GAP, CART_WASH_OPACITY } from './constants';
+export type { CartGeometry } from './constants';
+export { composeCartLineName, optionsLine, resolveCartPaint } from './shared';
+export type { CartPaint } from './shared';
+export type {
+  CartDensity,
+  CartLineEntry,
+  CartLineProps,
+  CartMinimumOrder,
+  CartPanelProps,
+  CartPromoFieldProps,
+  CartSummary,
+  CartTipOption,
+  CartTipPickerProps,
+} from './types';

package/src/cart-panel/shared.ts

@@ -0,0 +1,60 @@
+/**
+ * Everything `cart-panel` decides WITHOUT rendering: the options line, the
+ * sentence a line is announced as, and the colours a basket paints RELATIVE to
+ * whatever it was dropped on — a desktop panel puts it in a card, a phone puts
+ * it in a sheet, and a rule or a quiet caption picked by eye disappears on one
+ * of the two.
+ *
+ * Pure, so `CartPanel.test.tsx` can walk presets and modes without rendering.
+ */
+import { hairlineOn, surfaceFillOn, surfaceTextOn, type SurfaceTextPaint } from '../styles/surface-levels';
+import type { Theme } from '../theme/types';
+import { CART_OPTION_SEPARATOR } from './constants';
+import type { CartLineEntry } from './types';
+
+export interface CartPaint extends SurfaceTextPaint {
+  /** Behind a photo that has not loaded, and the vendor tile. */
+  tile: string;
+  /** Laid over a sold-out line's photo. The surface itself, so the photo fades INTO the panel. */
+  wash: string;
+  /** Between two blocks of the panel. */
+  rule: string;
+}
+
+export function resolveCartPaint(theme: Theme, surface: string): CartPaint {
+  return {
+    ...surfaceTextOn(theme, surface),
+    tile: surfaceFillOn(theme, surface),
+    wash: surface,
+    rule: hairlineOn(theme, surface),
+  };
+}
+
+/** "Large · Extra cheese", or `null` for a line with no choices. */
+export function optionsLine(options: ReadonlyArray<string> | undefined): string | null {
+  if (!options || options.length === 0) return null;
+  const kept = options.filter((option) => option !== '');
+  return kept.length > 0 ? kept.join(CART_OPTION_SEPARATOR) : null;
+}
+
+/**
+ * One line as one sentence, in the order it is read on screen. The quantity is
+ * said in words ("2") rather than left to the "×2" glyph, which announces
+ * nothing.
+ */
+export function composeCartLineName(
+  line: Pick<
+    CartLineEntry,
+    'name' | 'options' | 'note' | 'quantity' | 'price' | 'originalPrice' | 'unavailable' | 'unavailableLabel'
+  >,
+): string {
+  const parts: string[] = [line.name];
+  const options = optionsLine(line.options);
+  if (options) parts.push(options);
+  if (line.note) parts.push(line.note);
+  parts.push(String(line.quantity));
+  if (line.originalPrice) parts.push(`${line.price}, originally ${line.originalPrice}`);
+  else parts.push(line.price);
+  if (line.unavailable) parts.push(line.unavailableLabel ?? 'Sold out');
+  return parts.join(', ');
+}

package/src/cart-panel/types.ts

@@ -0,0 +1,184 @@
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+import type { PriceLine, PriceTotal } from '../price-breakdown/types';
+
+/** `comfortable` is the desktop panel's rung; `compact` fits a phone sheet. */
+export type CartDensity = 'comfortable' | 'compact';
+
+/** One thing in the basket, as data. */
+export interface CartLineEntry {
+  /** Identifies the line in `onLineQuantityChange` and `onLineRemove`. */
+  id: string;
+  /** What it is — "Ember flatbread". */
+  name: string;
+  /**
+   * The choices made for it, already in words — "Large", "Extra cheese". Drawn
+   * as one quiet line, joined with a middle dot.
+   */
+  options?: ReadonlyArray<string>;
+  /** A note to the kitchen — "No coriander". Drawn under the options, in quotes by the app. */
+  note?: string;
+  /**
+   * The line's own total, PRE-FORMATTED and already multiplied by `quantity` by
+   * the app. Nothing here multiplies, converts or adds up a price.
+   */
+  price: string;
+  /** PRE-FORMATTED price before a discount, struck through BEFORE `price`. */
+  originalPrice?: string;
+  /** How many. Always at least 1 — a line with none of it is a line that was removed. */
+  quantity: number;
+  /** An absolute URL, or an id the app's `ImageResolver` turns into one. */
+  photo?: string;
+  /** The `ImageResolver` rendition for a photo id. Ignored for URLs. */
+  photoVariant?: string;
+  /** The kitchen ran out after it went in the basket. */
+  unavailable?: boolean;
+  /** Default `"Sold out"`. */
+  unavailableLabel?: string;
+}
+
+export interface CartLineProps extends Omit<CartLineEntry, 'id'> {
+  /** With it the quantity is a `Stepper`; without, a quiet "×2". */
+  onQuantityChange?: (quantity: number) => void;
+  /** The remove control. Without it no remove control is drawn. */
+  onRemove?: () => void;
+  /** Names the remove control, which draws no text. Default `"Remove <name>"`. */
+  removeLabel?: string;
+  /** Default `comfortable`. */
+  density?: CartDensity;
+  /** Replaces the composed name ("Ember flatbread, Large, Extra cheese, 2, €24.00"). */
+  accessibilityLabel?: string;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+/** One tip the picker offers. */
+export interface CartTipOption {
+  /** Identifies the choice. */
+  id: string;
+  /** As drawn and as announced — "10%", "€2", "No tip". PRE-FORMATTED. */
+  label: string;
+}
+
+export interface CartTipPickerProps {
+  options: ReadonlyArray<CartTipOption>;
+  /** The chosen option's `id`, or `undefined` while nothing is chosen. */
+  value?: string;
+  onValueChange: (id: string) => void;
+  /** The question above the row. Default `"Tip"`. */
+  label?: string;
+  /** A quieter line under the row — "It goes to the courier, in full." */
+  description?: string;
+  disabled?: boolean;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+export interface CartPromoFieldProps {
+  /** The code being typed. Fully controlled. */
+  value: string;
+  onChangeText: (value: string) => void;
+  /** Called when the apply control is pressed. */
+  onApply: () => void;
+  /**
+   * A code that is already on the order. While it is set the field is replaced
+   * by a removable pill — an input still holding a code that has been accepted
+   * invites a reader to apply it twice.
+   */
+  applied?: string;
+  /** Removes the applied code. Without it the pill is not removable. */
+  onRemove?: () => void;
+  /** Names the remove control. Default `"Remove <code>"`. */
+  removeLabel?: string;
+  /** The field's label. Default `"Promo code"`. */
+  label?: string;
+  /** The input's placeholder. */
+  placeholder?: string;
+  /** The apply control's label. Default `"Apply"`. */
+  applyLabel?: string;
+  /** A rejection — "That code has expired". A non-empty string paints the field invalid. */
+  error?: string | null;
+  disabled?: boolean;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+/** What the basket is still short of. */
+export interface CartMinimumOrder {
+  /**
+   * The whole sentence, PRE-FORMATTED — "€4.50 more to reach the €12 minimum".
+   * The component neither subtracts nor formats: it draws what it is handed.
+   */
+  message: string;
+  /** How far along, drawn by `Meter`. Without it no bar is drawn. */
+  progress?: {
+    value: number;
+    /** @default 1 */
+    max?: number;
+    /** Required — a bar draws no text. "Progress to the minimum order". */
+    accessibilityLabel: string;
+    /** `aria-valuetext` — "€7.50 of €12". */
+    valueText?: string;
+  };
+}
+
+/** The totals, handed straight to `price-breakdown`'s `PriceSummary`. */
+export interface CartSummary {
+  lines: ReadonlyArray<PriceLine>;
+  total?: PriceTotal;
+  /** Folds the LINES away and leaves the total. Default `false`. */
+  collapsible?: boolean;
+  /** Uncontrolled initial disclosure. Default `false`. */
+  defaultExpanded?: boolean;
+}
+
+export interface CartPanelProps {
+  /** The vendor the basket belongs to. A basket belongs to exactly one. */
+  vendorName: string;
+  /** An absolute URL, or an id the app's `ImageResolver` turns into one. */
+  vendorPhoto?: string;
+  /** The `ImageResolver` rendition for a vendor photo id. */
+  vendorPhotoVariant?: string;
+  /** The line under the vendor — "25–35 min · €1.90 delivery". PRE-FORMATTED. */
+  vendorMeta?: string;
+  /** Opens the vendor. Without it the vendor header is not pressable. */
+  onPressVendor?: () => void;
+
+  /** The lines, in the order they went in. */
+  lines: ReadonlyArray<CartLineEntry>;
+  /** With it every line draws a `Stepper`. */
+  onLineQuantityChange?: (id: string, quantity: number) => void;
+  /** With it every line draws a remove control. */
+  onLineRemove?: (id: string) => void;
+
+  /** The shortfall warning. Drawn above the totals, where the number it is about is. */
+  minimumOrder?: CartMinimumOrder;
+  /** The tip picker. Without it no tip row is drawn. */
+  tip?: CartTipPickerProps;
+  /** The promo field. Without it no promo row is drawn. */
+  promo?: CartPromoFieldProps;
+  /** The totals. Without them no breakdown is drawn. */
+  summary?: CartSummary;
+
+  /** The checkout control. Without it no footer is drawn. */
+  onCheckout?: () => void;
+  /** Default `"Go to checkout"`. */
+  checkoutLabel?: string;
+  /** Blocks checkout — under the minimum, a line gone. */
+  checkoutDisabled?: boolean;
+
+  /** Replaces the whole empty block, drawn when `lines` is empty. */
+  empty?: ReactNode;
+  /** Default `"Your basket is empty"`. */
+  emptyTitle?: string;
+  /** Default `"Add something from the menu and it will show up here."` */
+  emptyDescription?: string;
+
+  /** Default `comfortable`. */
+  density?: CartDensity;
+  /** Names the list of lines. Default `"Basket"`. */
+  accessibilityLabel?: string;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}

package/src/chat-people/ContactRow.tsx

@@ -46,6 +46,8 @@ function ContactRowComponent(props: ContactRowProps) {
   const {
     name,
     avatar,
+    avatarSlot,
+    identitySlot,
     avatarVariant,
     subtitle,
     status,
@@ -59,6 +61,7 @@ function ContactRowComponent(props: ContactRowProps) {
     onPress,
     disabled = false,
     size = 'medium',
+    horizontalInset = 10,
     style,
     textStyle,
     testID,
@@ -72,7 +75,7 @@ function ContactRowComponent(props: ContactRowProps) {
 
   const body = (
     <>
-      <AvatarPresence
+      {avatarSlot !== undefined ? avatarSlot : <AvatarPresence
         source={avatar}
         variant={avatarVariant}
         name={name}
@@ -80,8 +83,9 @@ function ContactRowComponent(props: ContactRowProps) {
         status={status}
         presenceRingColor={paint.surface}
         presenceLabel=""
-      />
+      />}
       <View style={{ flex: 1, minWidth: 0, gap: 1 }}>
+        {identitySlot !== undefined ? identitySlot : <>
         <Text
           variant="body-medium"
           numberOfLines={1}
@@ -100,6 +104,7 @@ function ContactRowComponent(props: ContactRowProps) {
             {subtitle}
           </Text>
         )}
+        </>}
       </View>
       {trailingSlot !== undefined ? (
         trailingSlot
@@ -136,9 +141,9 @@ function ContactRowComponent(props: ContactRowProps) {
     backgroundColor:
       (hovered && pressable) || (checkboxRow && selected) ? paint.rowHighlight : 'transparent',
     paddingTop: 8,
-    paddingRight: 10,
+    paddingRight: horizontalInset,
     paddingBottom: 8,
-    paddingLeft: 10,
+    paddingLeft: horizontalInset,
     opacity: disabled ? DISABLED_OPACITY : 1,
   };
 
@@ -200,6 +205,7 @@ function ContactRowComponent(props: ContactRowProps) {
             size="small"
             disabled={disabled}
             onPress={onAction}
+            accessibilityLabel={`${actionLabel} ${name}`}
             testID={testID ? `${testID}-action` : undefined}
           >
             {actionLabel}

package/src/chat-people/types.ts

@@ -43,6 +43,10 @@ export interface PersonSummary {
 export type ContactRowTrailing = 'none' | 'chevron' | 'checkbox' | 'action';
 
 export interface ContactRowProps extends PersonSummary {
+  /** Replaces AvatarPresence. Caller owns avatar size, badges and presence semantics. */
+  avatarSlot?: ReactNode;
+  /** Replaces the visible name/subtitle block; name and subtitle still name the row accessibly. */
+  identitySlot?: ReactNode;
   /** Defaults to `checkbox` with `onSelectedChange`, `action` with `onAction`, else `none`. */
   trailing?: ContactRowTrailing;
   /** Replaces the trailing slot entirely. */
@@ -59,6 +63,8 @@ export interface ContactRowProps extends PersonSummary {
   disabled?: boolean;
   /** `medium` 44px avatar (default), `small` 36 for a dense picker. */
   size?: 'small' | 'medium';
+  /** Horizontal inset around the avatar/text area. Default 10; use 0 in an already-inset widget. */
+  horizontalInset?: number;
   style?: StyleProp<ViewStyle>;
   textStyle?: StyleProp<TextStyle>;
   testID?: string;

package/src/checkout-summary/CheckoutConfirm.tsx

@@ -0,0 +1,108 @@
+import React, { memo, useCallback, useEffect, useRef, useState } from 'react';
+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 { checkoutConfirmLabel } from './shared';
+import type { CheckoutConfirmProps } from './types';
+
+/**
+ * The press that places the order: the words, the amount it commits to, the
+ * terms under it, and the state where it must not fire twice.
+ *
+ *   button   `Button` primary large, full width, "Place order · €24.80"
+ *   terms    12 under it; the centred secondary line every Bloom action card
+ *            draws under its primary (`ActionCardNote`)
+ *   footer   16 under the terms
+ *
+ * ## Why the amount is ON the button
+ *
+ * The number a press commits to and the press are one decision. A total
+ * elsewhere on the screen and a button reading "Place order" are two, and the
+ * gap between them is where a reader confirms a figure they last saw before a
+ * tip picker changed it.
+ *
+ * ## Why there are TWO guards against a double order
+ *
+ * `busy` is the app's: while the order is in flight the button spins and every
+ * press is dropped. It is not enough on its own — a press calls `onConfirm`,
+ * the app sets its state, and `busy` only reaches this component on the NEXT
+ * commit; the second tap of a double-tap lands inside that window and places a
+ * second order. So the component also latches on its own press, synchronously,
+ * in a ref: state would not do, because two presses in one tick both read the
+ * same render's value.
+ *
+ * The latch clears on the first commit where `busy` is false again — so an app
+ * that never sets `busy` (a confirm that navigates away, a demo) gets exactly
+ * one press per tick and is never wedged, and an app that does keeps the button
+ * inert for the whole flight.
+ */
+function CheckoutConfirmComponent({
+  label = CHECKOUT_CONFIRM_LABEL,
+  amount,
+  terms,
+  onConfirm,
+  disabled = false,
+  busy = false,
+  busyLabel = CHECKOUT_CONFIRM_BUSY_LABEL,
+  footer,
+  style,
+  testID,
+}: CheckoutConfirmProps) {
+  const latch = useRef(false);
+  const [latched, setLatched] = useState(false);
+
+  const handlePress = useCallback(() => {
+    if (disabled || busy || latch.current) return;
+    latch.current = true;
+    setLatched(true);
+    onConfirm?.();
+  }, [disabled, busy, onConfirm]);
+
+  useEffect(() => {
+    if (!latched || busy) return;
+    latch.current = false;
+    setLatched(false);
+  }, [latched, busy]);
+
+  const id = (part: string) => (testID ? `${testID}-${part}` : undefined);
+  const words = checkoutConfirmLabel(label, amount);
+
+  return (
+    <View testID={testID} style={style}>
+      <Button
+        variant="primary"
+        size="large"
+        fullWidth
+        onPress={handlePress}
+        disabled={disabled}
+        loading={busy}
+        // The name is the STATE while it is busy: a spinner draws no words, and
+        // a button still announcing "Place order · €24.80" while the order is
+        // being placed invites the press this component exists to refuse.
+        accessibilityLabel={busy ? busyLabel : words}
+        style={{ alignSelf: 'stretch' }}
+        testID={id('button')}
+      >
+        {words}
+      </Button>
+      {terms != null ? (
+        <ActionCardNote style={{ marginTop: 12 }} testID={id('terms')}>
+          {terms}
+        </ActionCardNote>
+      ) : null}
+      {footer != null ? (
+        <View style={{ marginTop: 16, alignItems: 'center' }} testID={id('footer')}>
+          {footer}
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
+export const CheckoutConfirm = memo(CheckoutConfirmComponent);
+CheckoutConfirm.displayName = 'CheckoutConfirm';