@oxy.so/bloom 4.0.0 → 4.1.0

package/src/checkout-summary/CheckoutSummary.tsx

@@ -0,0 +1,209 @@
+import React, { memo, type ReactNode } from 'react';
+import { View } from 'react-native';
+
+import { AddressRow } from '../address';
+import { Divider } from '../divider';
+import { PriceSummary } from '../price-breakdown';
+import {
+  SurfaceLevelProvider,
+  surfaceFillVars,
+  useSurfaceLevel,
+  useSurfaceLevelValue,
+  type SurfaceLevel,
+} from '../styles/surface-levels';
+import { useTheme } from '../theme/use-theme';
+import { Text } from '../typography';
+import { CheckoutConfirm } from './CheckoutConfirm';
+import { CheckoutSummaryRow } from './CheckoutSummaryRow';
+import {
+  CHECKOUT_GROUP_RADIUS,
+  CHECKOUT_PRICE_PADDING,
+  CHECKOUT_ROW_ICON,
+  CHECKOUT_SECTION_GAP,
+} from './constants';
+import { checkoutRowName } from './shared';
+import type { CheckoutSummaryLine, CheckoutSummaryProps } from './types';
+
+/** The style that takes `Item`'s own chrome back off a row nested inside a row. */
+const NESTED_ROW_STYLE = {
+  // The LONGHANDS `Item` itself writes, on both axes. `Item`'s base uses
+  // `paddingVertical` for the vertical pair and `paddingLeft`/`paddingRight`
+  // for the horizontal one; overriding a shorthand with longhands (or the other
+  // way round) is honoured by Yoga and silently dropped by react-native-web,
+  // whose atomic sheet ranks `padding-block` above `padding-top` whatever the
+  // array's order — so the reset would have worked on native only.
+  paddingVertical: 0,
+  paddingLeft: 0,
+  paddingRight: 0,
+  minHeight: 0,
+} as const;
+
+/**
+ * Review and confirm: where it goes, when, how it is paid, what it costs, and
+ * the note to the seller — each shown as its chosen value, each opening the
+ * thing that changes it.
+ *
+ *   group    one surface rung above whatever it was dropped on, radius 16, a
+ *            hairline, with 1px rules between rows
+ *   rows     `CheckoutSummaryRow`, in the order a buyer checks them
+ *   totals   `price-breakdown`'s `PriceSummary`, inside the group under a rule,
+ *            16 all round
+ *   confirm  `CheckoutConfirm`, 20 under the group and OUTSIDE it: the group is
+ *            a list of decisions and the button is the consequence
+ *
+ * ## What this family does not own
+ *
+ * The totals are `PriceSummary` and nothing else — no second breakdown, no
+ * arithmetic, and every amount is a string the app formatted. The address row
+ * is `address`'s own `AddressRow`. Tracking, afterwards, is `order-status`.
+ * The payment row is a SLOT: the payment-method row is its own family, and a
+ * placeholder drawn here would be a second spelling of it.
+ *
+ * ## Why the address row nests
+ *
+ * `AddressRow` is `Item` with an address's slots filled in — the tile, the
+ * badge beside the title, the name joined from the row's own text. Reaching for
+ * it here rather than redrawing two lines is the whole point; it goes INSIDE
+ * the summary row's value column with `leading={null}` (the row already drew
+ * the gutter, which is the case `AddressRow` documents) and with `Item`'s
+ * padding reset, so there is one row's chrome rather than two.
+ */
+function CheckoutSummaryComponent({
+  title = 'Review your order',
+  address,
+  delivery,
+  payment,
+  note,
+  extras,
+  price,
+  confirm,
+  children,
+  accessibilityLabel,
+  style,
+  testID,
+}: CheckoutSummaryProps) {
+  const theme = useTheme();
+  const level = useSurfaceLevelValue();
+  const own = useSurfaceLevel(1);
+  const id = (part: string) => (testID ? `${testID}-${part}` : undefined);
+
+  const line = (row: CheckoutSummaryLine, fallbackIcon: CheckoutSummaryLine['icon'], key: string) => (
+    <CheckoutSummaryRow
+      key={row.id ?? key}
+      label={row.label}
+      icon={row.icon ?? fallbackIcon}
+      value={row.value}
+      placeholder={row.placeholder}
+      detail={row.detail}
+      badge={row.badge}
+      onPress={row.onPress}
+      disabled={row.disabled}
+      accessibilityHint={row.accessibilityHint}
+      accessibilityLabel={row.accessibilityLabel}
+      testID={row.testID ?? id(key)}
+    />
+  );
+
+  const rows: ReactNode[] = [];
+  if (address) {
+    const label = address.label ?? 'Deliver to';
+    rows.push(
+      <CheckoutSummaryRow
+        key="address"
+        label={label}
+        icon={address.icon ?? CHECKOUT_ROW_ICON.address}
+        onPress={address.onPress}
+        disabled={address.disabled}
+        accessibilityHint={address.accessibilityHint}
+        accessibilityLabel={checkoutRowName(
+          label,
+          [address.title, address.subtitle].filter(Boolean).join(', '),
+        )}
+        testID={address.testID ?? id('address')}
+        content={
+          <AddressRow
+            title={address.title}
+            subtitle={address.subtitle}
+            kind={address.kind}
+            badge={address.badge}
+            leading={null}
+            style={NESTED_ROW_STYLE}
+            testID={id('address-row')}
+          />
+        }
+      />,
+    );
+  }
+  if (delivery) rows.push(line(delivery, CHECKOUT_ROW_ICON.delivery, 'delivery'));
+  if (payment != null) rows.push(<View key="payment">{payment}</View>);
+  if (note) rows.push(line(note, CHECKOUT_ROW_ICON.note, 'note'));
+  if (extras) {
+    extras.forEach((row, index) => rows.push(line(row, undefined, `extra-${index}`)));
+  }
+
+  // One rung above the ambient surface, and PUBLISHED, so the rows inside
+  // resolve their tiles off the group's real fill rather than off the page's.
+  const raised = Math.min(3, level + 1) as SurfaceLevel;
+
+  return (
+    <View testID={testID} style={style}>
+      {title != null ? (
+        <Text
+          variant="title-3-semibold"
+          role="heading"
+          aria-level={2}
+          testID={id('title')}
+          style={{ color: theme.colors.text, marginBottom: 12 }}
+        >
+          {title}
+        </Text>
+      ) : null}
+
+      <View
+        role="group"
+        accessibilityLabel={accessibilityLabel ?? title ?? 'Order summary'}
+        testID={id('group')}
+        style={[
+          {
+            borderRadius: CHECKOUT_GROUP_RADIUS,
+            borderWidth: 1,
+            borderColor: own.border,
+            backgroundColor: own.background,
+            overflow: 'hidden',
+          },
+          surfaceFillVars(own.background),
+        ]}
+      >
+        <SurfaceLevelProvider level={raised} fill={own.background}>
+          {rows.map((row, index) => (
+            <React.Fragment key={index}>
+              {index > 0 ? <Divider color={own.border} /> : null}
+              {row}
+            </React.Fragment>
+          ))}
+          {price ? (
+            <>
+              {rows.length > 0 ? <Divider color={own.border} /> : null}
+              <View style={{ padding: CHECKOUT_PRICE_PADDING }}>
+                <PriceSummary {...price} testID={price.testID ?? id('price')} />
+              </View>
+            </>
+          ) : null}
+        </SurfaceLevelProvider>
+      </View>
+
+      {children != null ? <View style={{ marginTop: CHECKOUT_SECTION_GAP }}>{children}</View> : null}
+
+      {confirm ? (
+        <CheckoutConfirm
+          {...confirm}
+          style={[{ marginTop: CHECKOUT_SECTION_GAP }, confirm.style]}
+          testID={confirm.testID ?? id('confirm')}
+        />
+      ) : null}
+    </View>
+  );
+}
+
+export const CheckoutSummary = memo(CheckoutSummaryComponent);
+CheckoutSummary.displayName = 'CheckoutSummary';

package/src/checkout-summary/CheckoutSummaryRow.tsx

@@ -0,0 +1,168 @@
+import React, { memo, useMemo } from 'react';
+import { View } from 'react-native';
+
+import { RiArrowRightSLine } from '../icons/remix/RiArrowRightSLine';
+import { Item } from '../item';
+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 { checkoutRowName, resolveCheckoutPaint } from './shared';
+import type { CheckoutSummaryRowProps } from './types';
+
+/**
+ * One decision, as a row: what it is, what was chosen, and the press that
+ * changes it.
+ *
+ *   tile      40 round, one surface step off the group behind the row, with a
+ *             20 glyph in the secondary rung — `address`'s own geometry, so a
+ *             summary and an address list line up
+ *   label     caption-2-bold uppercase secondary; the row is read label-first
+ *             because every row in the group is a different QUESTION
+ *   value     body-medium, up to two lines, falling back to the placeholder
+ *   detail    body-2-regular secondary
+ *   chevron   20, tertiary, decorative — the whole row is the button
+ *
+ * It is `Item` with those slots filled in: the press target, the hover and
+ * press paint, the density rungs, the disabled opacity and the a11y role are
+ * `Item`'s job, and this family owns no second copy of any of them.
+ *
+ * The label/value pair is a CAPTION OVER A VALUE rather than a title with the
+ * value on the right, which is the other row Bloom draws (`SettingsListItem`).
+ * The difference is the length: a settings value is a word, and a checkout
+ * value is an address, a window and a card number — none of which fits in the
+ * right half of a 390 row without truncating the thing the reader came to
+ * check.
+ */
+function CheckoutSummaryRowComponent({
+  label,
+  icon: Icon,
+  leading,
+  value,
+  placeholder = CHECKOUT_ROW_PLACEHOLDER,
+  detail,
+  badge,
+  content,
+  onPress,
+  disabled = false,
+  accessibilityHint,
+  accessibilityLabel,
+  style,
+  testID,
+}: CheckoutSummaryRowProps) {
+  const theme = useTheme();
+  const surface = useSurfaceFill();
+  const paint = useMemo(() => resolveCheckoutPaint(theme, surface), [theme, surface]);
+  const id = (part: string) => (testID ? `${testID}-${part}` : undefined);
+  const chosen = value != null && value !== '';
+  const shown = chosen ? value : placeholder;
+
+  // `leading` is read for PRESENCE, not truthiness: `leading={null}` is a row
+  // that draws no media, for a group that already has a gutter of its own —
+  // and `??` would have quietly given it the tile instead.
+  const media =
+    leading !== undefined ? (
+      leading
+    ) : Icon ? (
+      <View
+        testID={id('tile')}
+        style={{
+          width: CHECKOUT_ROW_TILE,
+          height: CHECKOUT_ROW_TILE,
+          borderRadius: CHECKOUT_ROW_TILE / 2,
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: paint.tile,
+        }}
+      >
+        <Icon width={CHECKOUT_ROW_GLYPH} height={CHECKOUT_ROW_GLYPH} fill={paint.textSecondary} />
+      </View>
+    ) : null;
+
+  const body = (
+    // `flex: 1` + `minWidth: 0`: `Item` gives `children` no column of its own,
+    // and a one-line Text is `nowrap` on web, so without the floor the row's
+    // min-content width becomes the whole value string and the page scrolls
+    // sideways instead of the value truncating.
+    <View style={{ flex: 1, minWidth: 0, gap: CHECKOUT_ROW_TEXT_GAP }}>
+      <Text
+        variant="caption-2-bold"
+        numberOfLines={1}
+        testID={id('label')}
+        style={{ color: paint.textSecondary, textTransform: 'uppercase' }}
+      >
+        {label}
+      </Text>
+      {content !== undefined ? (
+        content
+      ) : (
+        <>
+          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, minWidth: 0 }}>
+            <Text
+              variant="body-medium"
+              numberOfLines={2}
+              testID={id('value')}
+              style={{
+                flexShrink: 1,
+                minWidth: 0,
+                color: chosen ? paint.text : paint.textTertiary,
+              }}
+            >
+              {shown}
+            </Text>
+            {badge}
+          </View>
+          {detail ? (
+            <Text
+              variant="body-2-regular"
+              numberOfLines={2}
+              testID={id('detail')}
+              style={{ color: paint.textSecondary }}
+            >
+              {detail}
+            </Text>
+          ) : null}
+        </>
+      )}
+    </View>
+  );
+
+  return (
+    <Item
+      leading={media}
+      trailing={
+        onPress ? (
+          <RiArrowRightSLine
+            width={CHECKOUT_ROW_CHEVRON}
+            height={CHECKOUT_ROW_CHEVRON}
+            fill={paint.textTertiary}
+          />
+        ) : null
+      }
+      onPress={onPress}
+      disabled={disabled}
+      accessibilityLabel={accessibilityLabel ?? checkoutRowName(label, chosen ? value : placeholder)}
+      // NATIVE ONLY, and knowingly: react-native-web has no `accessibilityHint`
+      // — no mapping at all, not a wrong one — so on web the affordance is the
+      // `button` role plus the chevron and this says nothing. Recorded in
+      // `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}
+      style={style}
+      testID={testID}
+    >
+      {body}
+    </Item>
+  );
+}
+
+export const CheckoutSummaryRow = memo(CheckoutSummaryRowComponent);
+CheckoutSummaryRow.displayName = 'CheckoutSummaryRow';

package/src/checkout-summary/constants.ts

@@ -0,0 +1,57 @@
+import { RiBankCardLine } from '../icons/remix/RiBankCardLine';
+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';
+
+/**
+ * The default glyph for each of the four rows a buyer checks. A caller that
+ * wants a different one passes `icon`; these exist so the common summary reads
+ * correctly with four strings and four handlers.
+ */
+export const CHECKOUT_ROW_ICON: Record<'address' | 'delivery' | 'payment' | 'note', BloomIconComponent> = {
+  address: RiMapPin2Line,
+  delivery: RiTimeLine,
+  payment: RiBankCardLine,
+  note: RiChat3Line,
+};
+
+/** Drawn in place of the value while nothing is chosen. */
+export const CHECKOUT_ROW_PLACEHOLDER = 'Not chosen yet';
+
+/** The row's hint: what pressing it opens. */
+export const CHECKOUT_ROW_HINT = 'Opens the picker';
+
+/** The default words on the confirm control. */
+export const CHECKOUT_CONFIRM_LABEL = 'Place order';
+export const CHECKOUT_CONFIRM_BUSY_LABEL = 'Placing your order';
+
+/**
+ * The separator between the confirm label and the amount. A MIDDLE DOT rather
+ * than a hyphen: "Place order - €24.80" reads as a subtraction at a glance in
+ * a row that is otherwise full of money.
+ */
+export const CHECKOUT_AMOUNT_SEPARATOR = ' · ';
+
+/**
+ * The tile a row's glyph sits in. 40 is `address`'s own comfortable rung
+ * (`ADDRESS_GEOMETRY`), which is what lines a summary row up with an `Avatar`
+ * at `lg` — a summary that mixes a place and a courier must not step sideways
+ * at the avatar.
+ */
+export const CHECKOUT_ROW_TILE = 40;
+export const CHECKOUT_ROW_GLYPH = 20;
+/** The trailing chevron. */
+export const CHECKOUT_ROW_CHEVRON = 20;
+
+/** Between the label and the value, and between the value and the detail. */
+export const CHECKOUT_ROW_TEXT_GAP = 2;
+
+/** The group's corner, matching every other card-sized surface in the library. */
+export const CHECKOUT_GROUP_RADIUS = 16;
+
+/** Between the group, the children, the totals and the confirm control. */
+export const CHECKOUT_SECTION_GAP = 20;
+
+/** Inside the group's own padding, around the totals. */
+export const CHECKOUT_PRICE_PADDING = 16;

package/src/checkout-summary/index.ts

@@ -0,0 +1,22 @@
+export { CheckoutConfirm } from './CheckoutConfirm';
+export { CheckoutSummary } from './CheckoutSummary';
+export { CheckoutSummaryRow } from './CheckoutSummaryRow';
+export {
+  CHECKOUT_AMOUNT_SEPARATOR,
+  CHECKOUT_CONFIRM_BUSY_LABEL,
+  CHECKOUT_CONFIRM_LABEL,
+  CHECKOUT_GROUP_RADIUS,
+  CHECKOUT_ROW_HINT,
+  CHECKOUT_ROW_ICON,
+  CHECKOUT_ROW_PLACEHOLDER,
+  CHECKOUT_ROW_TILE,
+} from './constants';
+export { checkoutConfirmLabel, checkoutRowName, resolveCheckoutPaint } from './shared';
+export type { CheckoutSummaryPaint } from './shared';
+export type {
+  CheckoutAddressSummary,
+  CheckoutConfirmProps,
+  CheckoutSummaryLine,
+  CheckoutSummaryProps,
+  CheckoutSummaryRowProps,
+} from './types';

package/src/checkout-summary/shared.ts

@@ -0,0 +1,40 @@
+/**
+ * What a checkout summary paints, read RELATIVE to the surface it was dropped
+ * on (`styles/surface-levels.ts`): the review is a page on a phone, a column
+ * beside a basket on a desktop, and a sheet over a menu — three different
+ * fills, and a tile colour picked by eye vanishes on one of them.
+ *
+ * Pure, so `CheckoutSummary.test.tsx` can walk presets and modes without
+ * rendering.
+ */
+import { surfaceFillOn, surfaceTextOn, type SurfaceTextPaint } from '../styles/surface-levels';
+import type { Theme } from '../theme/types';
+import { CHECKOUT_AMOUNT_SEPARATOR } from './constants';
+
+export interface CheckoutSummaryPaint extends SurfaceTextPaint {
+  /** The round tile a row's glyph sits in — one step off the group's own fill. */
+  tile: string;
+}
+
+export function resolveCheckoutPaint(theme: Theme, surface: string): CheckoutSummaryPaint {
+  return {
+    ...surfaceTextOn(theme, surface),
+    tile: surfaceFillOn(theme, surface),
+  };
+}
+
+/**
+ * The row's announced name: the label, then whatever the row is showing.
+ *
+ * Deliberately "Delivery window: Today, 17:00 – 19:00" and not "Change
+ * delivery window" — a reader moving through the summary wants the DECISIONS
+ * read back, and what the press does belongs in the hint.
+ */
+export function checkoutRowName(label: string, value: string | undefined): string {
+  return value && value !== '' ? `${label}: ${value}` : label;
+}
+
+/** "Place order" + "€24.80" → "Place order · €24.80". */
+export function checkoutConfirmLabel(label: string, amount: string | undefined): string {
+  return amount && amount !== '' ? `${label}${CHECKOUT_AMOUNT_SEPARATOR}${amount}` : label;
+}

package/src/checkout-summary/types.ts

@@ -0,0 +1,146 @@
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+import type { AddressKind } from '../address';
+import type { BloomIconComponent } from '../icons/icon-component';
+import type { PriceSummaryProps } from '../price-breakdown';
+
+/**
+ * ONE row of the review: what was chosen, and the thing that changes it.
+ *
+ * The row is the summary AND the trigger. A label with a "Change" button beside
+ * it gives a reader two targets for one decision and a screen reader two stops
+ * that do not mention each other; here the whole row is the button, its name is
+ * "<label>: <value>", and the chevron is decoration.
+ */
+export interface CheckoutSummaryLine {
+  /** Stable key. Defaults to the index. */
+  id?: string;
+  /** What the row is FOR — "Delivery window", "Note for the shop". */
+  label: string;
+  /** The glyph in the leading tile. */
+  icon?: BloomIconComponent;
+  /**
+   * The chosen value, PRE-FORMATTED — "Today, 17:00 – 19:00", "€24.80". This
+   * family formats no dates and no money.
+   */
+  value?: string;
+  /** Drawn in place of the value while nothing is chosen. Default `"Not chosen yet"`. */
+  placeholder?: string;
+  /** A quieter third line — "Standard delivery", "Leave at the door". */
+  detail?: string;
+  /** A node beside the value — a `Badge` ("Free"), a `Chip`. */
+  badge?: ReactNode;
+  /** Opens whatever changes this row. Without it the row is a static summary. */
+  onPress?: () => void;
+  disabled?: boolean;
+  /**
+   * What pressing the row does, announced as the row's hint. Default
+   * `"Opens the picker"`; it is a HINT and not part of the name, so a reader
+   * scanning the summary hears the values rather than "Change" five times.
+   */
+  accessibilityHint?: string;
+  /** Defaults to `"<label>: <value>"`. */
+  accessibilityLabel?: string;
+  testID?: string;
+}
+
+export interface CheckoutSummaryRowProps extends CheckoutSummaryLine {
+  /**
+   * Replaces the value/detail column — an `AddressRow`, a two-line receipt, a
+   * row of chips. The label and the chevron stay.
+   */
+  content?: ReactNode;
+  /**
+   * An arbitrary leading node instead of the glyph tile. Read for PRESENCE:
+   * `leading={null}` draws no media at all.
+   */
+  leading?: ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+/** The "where it goes" row, drawn with `address`'s own `AddressRow`. */
+export interface CheckoutAddressSummary {
+  /** Default `"Deliver to"`. */
+  label?: string;
+  /** The line the place is recognised by — "Home", "Carrer de l’Om 14". */
+  title: string;
+  /** The rest of it — "Carrer de l’Om 14, 2nd floor". */
+  subtitle?: string;
+  /** Chooses the glyph in the row's tile. Default `place`. */
+  kind?: AddressKind;
+  /** The glyph, overriding whatever `kind` would have chosen. */
+  icon?: BloomIconComponent;
+  /** A node after the title — a `Badge` ("Default"). */
+  badge?: ReactNode;
+  /** Opens the address picker. */
+  onPress?: () => void;
+  disabled?: boolean;
+  accessibilityHint?: string;
+  testID?: string;
+}
+
+export interface CheckoutConfirmProps {
+  /** Default `"Place order"`. */
+  label?: string;
+  /**
+   * The amount the press commits to, PRE-FORMATTED, drawn on the button after
+   * the label. It is on the BUTTON rather than beside it because the number a
+   * press commits to and the press are one decision.
+   */
+  amount?: string;
+  /**
+   * The terms line under the button — a string, or a node with links in it.
+   * `null` draws none.
+   */
+  terms?: ReactNode;
+  /** Called at most once per busy cycle. */
+  onConfirm?: () => void;
+  disabled?: boolean;
+  /**
+   * The order is being placed: spinner, and every further press is dropped.
+   *
+   * The component ALSO latches on its own press, because the app's `busy`
+   * arrives a render later and the second tap of a double-tap lands inside that
+   * window. The latch clears when `busy` goes back to `false`.
+   */
+  busy?: boolean;
+  /** Announced while busy, in place of the button's own name. Default `"Placing your order"`. */
+  busyLabel?: string;
+  /** Under the terms line — "Cancel", a help link. */
+  footer?: ReactNode;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+export interface CheckoutSummaryProps {
+  /** The heading above the rows. `null` draws none. */
+  title?: string | null;
+  /** Where it goes. */
+  address?: CheckoutAddressSummary;
+  /** When it comes. */
+  delivery?: CheckoutSummaryLine;
+  /**
+   * How it is paid — a SLOT, because the payment-method row is its own family.
+   * Anything that renders as a row goes here; `CheckoutSummaryRow` is exported
+   * so an app with no payment family yet can draw one in the same register.
+   */
+  payment?: ReactNode;
+  /** The note to the seller. */
+  note?: CheckoutSummaryLine;
+  /** Anything else this order needs a decision about, appended after the note. */
+  extras?: readonly CheckoutSummaryLine[];
+  /**
+   * What it costs — `price-breakdown`'s `PriceSummary`, passed through. There
+   * is no second breakdown in this family and no arithmetic anywhere.
+   */
+  price?: PriceSummaryProps;
+  /** The confirm control under the totals. */
+  confirm?: CheckoutConfirmProps;
+  /** Between the rows and the totals — a promo field, a tip picker. */
+  children?: ReactNode;
+  /** Names the summary. Default the title, then `"Order summary"`. */
+  accessibilityLabel?: string;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}