@tallyui/components 1.0.0 → 3.0.0-next.0

package/src/sale/cart-bar.tsx

@@ -0,0 +1,18 @@
+import { Pressable, Text } from 'react-native';
+import { formatMoney } from '@tallyui/core';
+import { buildReceiptData } from '@tallyui/pos';
+import type { useSale } from '@tallyui/pos';
+
+/** Phone mode's cart summary (medusapos ADR 0009): the whole bar is one button; the total is the cart's own Total row. */
+export function CartBar({ sale, onOpen }: { sale: ReturnType<typeof useSale>; onOpen: () => void }) {
+  const { order } = sale;
+  const count = order.lineItems.reduce((sum, line) => sum + line.quantity, 0);
+  const total = formatMoney({ amount: buildReceiptData(order, { storeName: '' }).totals.totalMinor, currency: order.currency });
+  const items = `${count} ${count === 1 ? 'item' : 'items'}`;
+  return <Pressable accessibilityRole="button" accessibilityLabel={count ? `Open cart, ${items}, ${total}` : 'Cart is empty'}
+    disabled={!count} onPress={onOpen}
+    className={`min-h-14 mx-3 mb-3 flex-row items-center justify-between rounded-md bg-primary px-4 py-3 ${count ? '' : 'opacity-50'}`}>
+    <Text className="font-bold text-primary-foreground">{count ? `Cart · ${items}` : 'Cart is empty'}</Text>
+    {count ? <Text className="font-bold text-primary-foreground">{total} ›</Text> : null}
+  </Pressable>;
+}

package/src/sale/cart.tsx

@@ -0,0 +1,66 @@
+import { useState } from 'react';
+import { Pressable, Text, View } from 'react-native';
+import { buildReceiptData } from '@tallyui/pos';
+import type { useSale } from '@tallyui/pos';
+import { CartLine, CartLineActions, CartPanel, CartTotal } from '../cart';
+import { DiscountChips, DiscountForm } from './discount-form';
+
+/** `taxLabel` names each tax row; VAT isn't universal, so a platform passes its own (medusapos passes `VAT ${rate}%`). */
+export function Cart({ sale, taxLabel = (ratePpm: number) => `Tax ${ratePpm / 10000}%` }:
+  { sale: ReturnType<typeof useSale>; taxLabel?: (ratePpm: number) => string }) {
+  const { order } = sale;
+  const money = (amount: number) => ({ amount, currency: order.currency });
+  // order.display's figures (TallyUI ADR-063), with its tax split by rate; never app arithmetic (medusapos ADR 0008).
+  const { totals } = buildReceiptData(order, { storeName: '' });
+  const taxRows = totals.taxLines.map((line) => ({ label: taxLabel(line.ratePpm), amount: money(line.amountMinor) }));
+  // Each line before its discounts, with its own discounts' amounts. The order discounts are one figure: a single
+  // order discount's chip carries it; several keep their own labels, as no single one has a display amount.
+  const display = (lineId: string) => order.display.lines.find((line) => line.lineId === lineId)!;
+  const orderAmounts = order.discounts.length === 1
+    ? [{ discountId: order.discounts[0].id, amountMinor: order.display.orderDiscountMinor }] : [];
+  // The open discount form: a line's, or the order's (lineId null).
+  const [form, setForm] = useState<{ lineId: string | null } | null>(null);
+  const discountForm = (lineId: string | null, title: string) => form?.lineId === lineId
+    ? <DiscountForm key={lineId ?? 'order'} title={title} currency={order.currency} onClose={() => setForm(null)}
+      onApply={(discount) => sale.applyDiscount(lineId, discount)} /> : null;
+  const pay = `min-h-12 flex-1 justify-center rounded-md bg-primary px-4 py-3 ${!order.lineItems.length ? 'opacity-50' : ''}`;
+  const renderItem = (line: typeof order.lineItems[number]) => <>
+    <CartLineActions actions={[{ id: 'discount', label: 'Discount', color: 'text-primary', onPress: () => setForm({ lineId: line.id }) }]}>
+      <CartLine name={line.name} quantity={line.quantity} unitPrice={money(line.unitPriceMinor)}
+        lineTotal={money(display(line.id).amountMinor)} />
+    </CartLineActions>
+    <DiscountChips discounts={line.discounts} amounts={display(line.id).discounts} currency={order.currency} onRemove={sale.removeDiscount} />
+    <View className="flex-row gap-4 px-3 py-2">
+      <Pressable accessibilityRole="button" accessibilityLabel={`Decrease ${line.name}`}
+        onPress={() => sale.setQuantity(line.id, line.quantity - 1)} className="rounded-md border border-border bg-card px-3 py-2 min-h-11 min-w-11 items-center justify-center"><Text className="text-center text-foreground">−</Text></Pressable>
+      <Pressable accessibilityRole="button" accessibilityLabel={`Increase ${line.name}`}
+        onPress={() => sale.setQuantity(line.id, line.quantity + 1)} className="rounded-md border border-border bg-card px-3 py-2 min-h-11 min-w-11 items-center justify-center"><Text className="text-center text-foreground">+</Text></Pressable>
+      <Pressable accessibilityRole="button" accessibilityLabel={`Remove ${line.name}`}
+        onPress={() => sale.remove(line.id)} className="rounded-md border border-border bg-card px-3 py-2 min-h-11 min-w-11 items-center justify-center"><Text className="text-center text-foreground">Remove</Text></Pressable>
+    </View>
+    {discountForm(line.id, `Discount on ${line.name}`)}
+  </>;
+  return <CartPanel dataSet={{ print: 'hide' }} items={order.lineItems} renderItem={renderItem}
+    emptyState={<Text className="text-muted-foreground">Scan or tap a product to start a sale.</Text>}
+    afterItems={order.lineItems.length ? <View className="gap-3 px-3 py-2">
+      <DiscountChips discounts={order.discounts} amounts={orderAmounts} currency={order.currency} onRemove={sale.removeDiscount}
+        prefix="Order discount" />
+      {form?.lineId === null ? discountForm(null, 'Order discount') : <Pressable accessibilityRole="button"
+        onPress={() => setForm({ lineId: null })} className="self-start rounded-md border border-border bg-card px-4 py-2 min-h-11 justify-center">
+        <Text className="text-foreground">Order discount</Text></Pressable>}
+    </View> : undefined}
+    footer={<View testID="cart-footer" className="gap-3 pb-4">
+      {/* Exclusive: subtotal − discount + tax = total. Inclusive: subtotal − discount = total, the tax "incl.", not added. */}
+      <CartTotal subtotal={money(totals.subtotalMinor)} discount={money(totals.discountMinor)} total={money(totals.totalMinor)}
+        taxLines={taxRows} taxInclusive={totals.taxInclusive} />
+      {sale.error ? <Text accessibilityRole="alert" className="text-destructive">{sale.error}</Text> : null}
+      <View className="flex-row gap-3">
+        <Pressable accessibilityRole="button" disabled={!order.lineItems.length} onPress={() => sale.startTender('cash')} className={pay}>
+          <Text className="text-center font-semibold text-primary-foreground">Cash</Text>
+        </Pressable>
+        <Pressable accessibilityRole="button" disabled={!order.lineItems.length} onPress={() => sale.startTender('external')} className={pay}>
+          <Text className="text-center font-semibold text-primary-foreground">Card terminal</Text>
+        </Pressable>
+      </View>
+    </View>} />;
+}

package/src/sale/catalogue.tsx

@@ -0,0 +1,139 @@
+import { useEffect, useMemo, useState, type ReactNode } from 'react';
+import { Pressable, Text, View } from 'react-native';
+import { useStockOverlaid, useStockOverlayAsOf, type ProductTraits } from '@tallyui/core';
+import { catalogueEntries, findEntryByCode, searchProducts, variantPriceLabel, type CatalogueEntry } from '@tallyui/pos';
+import { ProductGrid, ProductImage, ProductPrice, ProductStockBadge, ProductTitle } from '../product';
+import { SearchInput } from '../input';
+import { VStack } from '../ui';
+
+// Keep product names readable and touch targets at least 160 px wide where two columns fit.
+const MIN_TILE_WIDTH = 160;
+const STOCK_LABEL = {
+  in_stock: 'In Stock', out_of_stock: 'Out of Stock', backorder: 'On Backorder', unknown: 'Unknown',
+};
+
+// locale/hour12/now are injected (rather than read from the device or the clock inside this
+// function) so the formatting is testable without the device; callers default them to the
+// device's own settings and the current moment.
+export function formatStockSyncTime(time: Date, locale?: string, hour12?: boolean, now: Date = new Date()): string {
+  const timeLabel = time.toLocaleTimeString(locale, { hour: '2-digit', minute: '2-digit', hour12 });
+  // "Today" is decided in the device's own timezone: toDateString() reads the Date in local time,
+  // the same timezone the device clock and toLocaleTimeString above already use.
+  if (time.toDateString() === now.toDateString()) return timeLabel;
+  const dateLabel = time.toLocaleDateString(locale, { day: 'numeric', month: 'short' });
+  return `${dateLabel}, ${timeLabel}`;
+}
+
+// The later of a session's own catalogue sync and a persisted stock check from a previous session
+// (or restart), so an old persisted time never shadows a fresher sync.
+function laterOf(a: Date | null | undefined, b: Date | null | undefined): Date | null {
+  if (!a) return b ?? null;
+  if (!b) return a;
+  return a.getTime() >= b.getTime() ? a : b;
+}
+
+export function Catalogue<Doc>({ products, traits, currency, onSelect, statusText, statusAccessory, lastSyncedAt, lastStockCheckAt, hour12, minCodeLength }: {
+  products: Doc[];
+  traits: ProductTraits<Doc>;
+  currency: string;
+  /** Receives the chosen product and variant with the nearest ConnectorProvider's stock overlay applied (a copy). */
+  onSelect: (entry: CatalogueEntry<Doc>) => void;
+  statusText?: string;
+  /** Rendered at the end of the status line, e.g. a register control at phone width; the row renders even without `statusText`. */
+  statusAccessory?: ReactNode;
+  lastSyncedAt: Date | null;
+  /** The last completed stock reconcile pass, persisted across restarts. The "stock as of" time shown is the
+   * latest of this, the provider's stockOverlayAsOf (when valid) and lastSyncedAt; null and omitted alike. */
+  lastStockCheckAt?: Date | null;
+  /** Whether to show a 12- or 24-hour clock in the stock-as-of time; undefined keeps the locale default. A platform
+   * reads this off its own device APIs (e.g. expo-localization's getCalendars()) and passes it in. */
+  hour12?: boolean;
+  /** A till's scanner setting: below this length (after trimming), Enter leaves the typed text as a plain
+   * search instead of doing a code lookup. A scanner's timing threshold is the app's own concern,
+   * in its unfocused wedge listener — not this prop's job. */
+  minCodeLength?: number;
+}) {
+  // Idempotent (the adapter's overlay returns just the fields the stock map sets), so an app that already
+  // merges the overlay itself keeps working, and can drop its own merge.
+  const shown = useStockOverlaid(products) as Doc[];
+  const overlayAsOf = useStockOverlayAsOf();
+  const parsedOverlayAsOf = overlayAsOf ? new Date(overlayAsOf) : undefined;
+  const validOverlayAsOf = parsedOverlayAsOf && !isNaN(parsedOverlayAsOf.getTime()) ? parsedOverlayAsOf : undefined;
+  const stockAsOf = laterOf(laterOf(lastStockCheckAt, validOverlayAsOf), lastSyncedAt);
+  const [query, setQuery] = useState('');
+  // The chooser is live (medusapos ADR 0007): it holds only the chosen product's id and derives its choices
+  // from the current entries below, so an open chooser shows each reconcile pass as it lands.
+  const [chooserId, setChooserId] = useState<string | null>(null);
+  const [width, setWidth] = useState(0);
+  // ProductGrid has 4 px padding on each side of the content and each cell.
+  const columns = Math.max(2, Math.min(6, Math.floor((width - 8) / (MIN_TILE_WIDTH + 8))));
+  const entries = useMemo(() => catalogueEntries(shown, traits), [shown, traits]);
+  const results = useMemo(() => searchProducts(shown, query, traits), [shown, query, traits]);
+  const choices = useMemo(() => (chooserId === null ? []
+    : entries.filter((entry) => traits.getId(entry.product) === chooserId)), [entries, chooserId, traits]);
+  // A product that leaves the catalogue (a resync, or no longer sellable) closes its chooser.
+  useEffect(() => { if (chooserId !== null && choices.length === 0) setChooserId(null); }, [chooserId, choices]);
+
+  function select(entry: CatalogueEntry<Doc>) {
+    onSelect(entry);
+    setChooserId(null);
+  }
+
+  return (
+    <View className="flex-1" onLayout={(event) => setWidth(event.nativeEvent.layout.width)}>
+      <View className="gap-2 border-b border-border bg-card px-4 pb-3 pt-3">
+        <SearchInput value={query} onChangeText={setQuery} placeholder="Search or scan barcode / SKU" autoFocus
+          onSubmitEditing={() => {
+            if (minCodeLength && query.trim().length < minCodeLength) return;
+            const entry = findEntryByCode(entries, query);
+            if (entry) { select(entry); setQuery(''); }
+          }} />
+        {(statusText || statusAccessory) ? (
+          <View testID="catalogue-status-row" className="flex-row items-center gap-2">
+            {statusText ? <Text className="flex-1 text-xs text-muted-foreground" numberOfLines={statusAccessory ? 1 : undefined}>
+              {statusText}{query.trim() ? ` · ${results.length.toLocaleString()} matching` : ''}
+            </Text> : null}
+            {statusAccessory}
+          </View>
+        ) : null}
+        {choices.length > 0 ? (
+          <View accessibilityLabel="Choose variant" className="gap-2">
+            {choices.map((entry) => (
+              <Pressable key={entry.variant.id} accessibilityRole="button" onPress={() => select(entry)}
+                className="gap-1 rounded-md border border-border p-3">
+                <Text className="font-semibold text-foreground">{entry.variant.title}</Text>
+                <Text className="text-muted-foreground">{entry.variant.sku}</Text>
+                <Text className="text-foreground">{variantPriceLabel(entry.variant, currency)}</Text>
+                <Text className="text-muted-foreground">{STOCK_LABEL[entry.variant.stock.status]} · {stockAsOf ? `as of ${formatStockSyncTime(stockAsOf, undefined, hour12)}` : 'not yet synced'}</Text>
+              </Pressable>
+            ))}
+            <Pressable accessibilityRole="button" onPress={() => setChooserId(null)} className="rounded-md border border-border bg-card px-4 py-3">
+              <Text className="text-center text-foreground">Cancel</Text>
+            </Pressable>
+          </View>
+        ) : null}
+      </View>
+      <ProductGrid items={results} numColumns={columns}
+        renderItem={(product: Doc) => (
+          // TallyUI's ProductCard has no children slot, so the tile is composed directly here
+          // (same structure/classes as ProductCard) to add the stock badge as a fourth child,
+          // inside the card and centred with the rest, rather than adding a slot to ProductCard (out of scope for TV6b).
+          <Pressable accessibilityRole="button" testID={`product-tile-${traits.getName(product)}`} onPress={() => {
+            const variants = entries.filter((entry) => entry.product === product);
+            if (variants.length === 1) select(variants[0]);
+            else setChooserId(traits.getId(product));
+          }}>
+            <VStack space="sm" className="items-center rounded-lg border border-border bg-card p-3">
+              <ProductImage doc={product} size={80} className="rounded-md" />
+              <ProductTitle doc={product} className="text-sm" numberOfLines={2} />
+              <ProductPrice doc={product} />
+              <ProductStockBadge doc={product} showAsOf={false} className="self-center" />
+            </VStack>
+          </Pressable>
+        )}
+        emptyState={<Text className="mt-10 text-center text-sm text-muted-foreground">
+          {query.trim() ? `No products match "${query.trim()}".` : 'No products yet.'}
+        </Text>} />
+    </View>
+  );
+}

package/src/sale/discount-form.tsx

@@ -0,0 +1,85 @@
+import { useState } from 'react';
+import { Pressable, Text, TextInput, View } from 'react-native';
+import { formatMoney, minorUnitDigits, moneyFromDecimalString } from '@tallyui/core';
+import type { AppliedDiscount, Discount } from '@tallyui/pos';
+import { DiscountBadge } from '../cart';
+
+/** The cashier's entry as a TallyUI Discount (a percent, or integer minor units), or the inline error to show. */
+export function parseDiscount(type: Discount['type'], text: string, currency: string): Discount | string {
+  // A comma-locale keypad (inputMode="decimal") types "1,50": a single comma is the decimal separator.
+  const raw = text.trim();
+  const trimmed = raw.split(',').length === 2 ? raw.replace(',', '.') : raw;
+  if (!trimmed) return 'Enter a discount.';
+  if (!/^-?\d+(\.\d+)?$/.test(trimmed)) return 'Enter a number.';
+  const value = Number(trimmed);
+  if (value <= 0) return 'Enter a discount above 0.';
+  // At most 2 decimals in both modes: "1,000" or "1.000" may be a thousands separator, so it is refused, never read as 1.
+  const digits = type === 'percentage' ? 2 : Math.min(2, minorUnitDigits(currency));
+  if ((trimmed.split('.')[1]?.length ?? 0) > digits) return digits ? `Use at most ${digits} decimal places.` : 'Use a whole amount.';
+  if (type === 'percentage') return value > 100 ? 'A percentage can be at most 100.' : { type, value };
+  const money = moneyFromDecimalString(trimmed, currency);
+  return money ? { type, value: money.amount } : 'Enter a number.';
+}
+
+/** "10%", or a fixed discount's amount as it actually comes off (amountMinor), never the amount requested. */
+export const discountLabel = (discount: AppliedDiscount, currency: string) => discount.type === 'percentage'
+  ? `${discount.value}%` : formatMoney({ amount: discount.amountMinor, currency }) ?? String(discount.amountMinor);
+
+const button = 'rounded-md border border-border px-3 py-2 min-h-11 items-center justify-center';
+
+/** `onApply` returns a refusal to show inline (the capability gate), or null once applied. */
+export function DiscountForm({ title, currency, onApply, onClose }: {
+  title: string; currency: string; onApply: (discount: Discount) => string | null; onClose: () => void;
+}) {
+  const [type, setType] = useState<Discount['type']>('percentage');
+  const [text, setText] = useState('');
+  const [error, setError] = useState<string | null>(null);
+  function apply() {
+    const parsed = parseDiscount(type, text, currency);
+    const refused = typeof parsed === 'string' ? parsed : onApply(parsed);
+    setError(refused);
+    if (refused === null) onClose();
+  }
+  return <View role="group" accessibilityLabel={title} className="gap-2 px-3 py-2">
+    <Text className="font-semibold text-foreground">{title}</Text>
+    <View className="flex-row gap-2">
+      {(['percentage', 'fixed'] as const).map((option) => <Pressable key={option} accessibilityRole="button"
+        accessibilityState={{ selected: type === option }} onPress={() => setType(option)}
+        className={`${button} ${type === option ? 'bg-primary' : 'bg-card'}`}>
+        <Text className={type === option ? 'text-primary-foreground' : 'text-foreground'}>{option === 'percentage' ? 'Percent' : 'Amount'}</Text>
+      </Pressable>)}
+      <TextInput accessibilityLabel="Discount value" value={text} onChangeText={setText} onSubmitEditing={apply}
+        inputMode="decimal" placeholder={type === 'percentage' ? '%' : currency}
+        className="min-w-0 flex-1 rounded-md border border-border bg-background px-3 py-2 text-foreground" />
+    </View>
+    {error ? <Text accessibilityRole="alert" className="text-destructive">{error}</Text> : null}
+    <View className="flex-row gap-2">
+      <Pressable accessibilityRole="button" onPress={apply} className={`${button} bg-primary`}>
+        <Text className="font-semibold text-primary-foreground">Apply</Text></Pressable>
+      <Pressable accessibilityRole="button" onPress={onClose} className={`${button} bg-card`}>
+        <Text className="text-foreground">Cancel</Text></Pressable>
+    </View>
+  </View>;
+}
+
+/** Applied discounts as badges; pressing one removes it through TallyUI's builder. */
+/** `prefix` names a chip that would otherwise read like a fee, e.g. "Order discount −€0.50". */
+/** `amounts` are order.display's figures by discountId (TallyUI ADR-063): "10% −€0.40", or "−€0.40" for a fixed one. */
+export function DiscountChips({ discounts, currency, onRemove, prefix, amounts = [] }: {
+  discounts: AppliedDiscount[]; currency: string; onRemove: (id: string) => void; prefix?: string;
+  amounts?: { discountId: string; amountMinor: number }[];
+}) {
+  if (!discounts.length) return null;
+  return <View className="flex-row flex-wrap gap-2 px-3">
+    {discounts.map((discount) => {
+      const amount = amounts.find((row) => row.discountId === discount.id)?.amountMinor;
+      const own = discountLabel(discount, currency);
+      const label = [prefix, amount === undefined ? (prefix ? `−${own}` : own) : discount.type === 'percentage' ? own : null,
+        amount === undefined ? null : `−${formatMoney({ amount, currency })}`].filter(Boolean).join(' ');
+      return <Pressable key={discount.id} accessibilityRole="button" accessibilityLabel={`Remove discount ${label}`}
+        onPress={() => onRemove(discount.id)} className="min-h-11 flex-row items-center gap-1">
+        <DiscountBadge label={label} className="self-center" /><Text className="text-muted-foreground">✕</Text>
+      </Pressable>;
+    })}
+  </View>;
+}

package/src/sale/index.ts

@@ -0,0 +1,9 @@
+export { Cart } from './cart';
+export { CartBar } from './cart-bar';
+export { Tender } from './tender';
+export { DiscountForm, DiscountChips, parseDiscount, discountLabel } from './discount-form';
+export { Catalogue, formatStockSyncTime } from './catalogue';
+export { Receipt } from './receipt';
+export { injectPrintStyle } from './print-style';
+export { SyncStatus } from './sync-status';
+export { OrdersList } from './orders-list';

package/src/sale/orders-list.tsx

@@ -0,0 +1,108 @@
+import { useEffect, useRef, useState, type ReactNode } from 'react';
+import { Pressable, ScrollView, Text, View } from 'react-native';
+import { formatMoney, knownWarnings } from '@tallyui/core';
+import { needsAttention, type OutboxState, type PosOrder } from '@tallyui/pos';
+
+const STATUS_LABEL = { pending: 'Waiting to sync', applied: 'Synced', rejected: 'Not accepted' };
+/** `figures_mismatch`'s labels; a field a newer store sends that isn't here is shown by its raw name. */
+const FIGURE_LABELS = new Map([['subtotalMinor', 'Subtotal'], ['taxMinor', 'Tax'], ['discountMinor', 'Discount']]);
+/** A rejected sale's line in the cashier's words, by the store's error code (#269). The store's own message goes to the
+ * sync log (the outbox logs it), never here. */
+const REFUSAL_SENTENCES = new Map([
+  ['invalid_payload', "The online store refused this sale: this till sent it in a form the store can't read. Ask the store owner to look at the till's sync log."],
+  ['unsupported_version', "The online store refused this sale: the store's software is older than this till's. Ask the store owner to update the POS plugin."],
+  ['idempotency_mismatch', "The online store has a different sale under this sale's number. Don't send it again; ask the store owner to compare the two."],
+  ['store_configuration', 'The online store refused this sale: a setting on the store needs changing. Once the store owner fixes it, press Retry.'],
+  ['platform_error', "The online store refused this sale. Ask the store owner to look at the till's sync log."],
+  ['internal_error', "The online store hit a fault in its POS plugin and refused this sale. Ask the store owner to look at the till's sync log."],
+  ['insufficient_stock', "The online store refused this sale: it doesn't have enough stock of one of the items."],
+  ['unsupported_tax_mode', "The online store refused this sale: its tax settings can't take a sale like this one. Ask the store owner to check them."],
+  ['unknown_variant', 'The online store refused this sale: that product variation no longer exists.'],
+  ['invalid_quantity', "The online store refused this sale: a quantity or a discount on it isn't allowed."],
+  ['underpaid', 'The online store refused this sale: the payments add up to less than the total.'],
+  ['unsupported_currency', "The online store refused this sale: the store doesn't take this currency."],
+]);
+// Any other code, or none: platform_error's sentence, as the generic fallback (approved by the Front desk, 2026-09-30).
+const refusalSentence = (code: string | undefined) => REFUSAL_SENTENCES.get(code ?? '') ?? REFUSAL_SENTENCES.get('platform_error')!;
+
+/** Keeps an unparseable value as is, like medusapos's date util, since `Intl` throws on an invalid date. */
+function defaultFormatDate(iso: string) {
+  const date = new Date(iso);
+  return Number.isNaN(date.getTime()) ? iso : new Intl.DateTimeFormat(undefined, { dateStyle: 'medium', timeStyle: 'short' }).format(date);
+}
+
+/** The "Needs attention" (when not empty) and "Recent" orders, lifted from medusapos/app's orders screen (ADR-052).
+ * `onRetry` is the outbox's `requeue`; `formatDate` replaces the app's date util; `footer` is the app's own content
+ * (medusapos: the feedback link). The router and session redirect stay in the app. `stuck` is the outbox's
+ * `state.stuck` (`useOrderOutbox`): those pending orders need attention too, each with its own entry's reason and since. */
+export function OrdersList({ orders, onRetry, formatDate = defaultFormatDate, footer, stuck }: {
+  orders: PosOrder[]; onRetry(orderIds: string[]): Promise<number>; formatDate?: (iso: string) => string; footer?: ReactNode;
+  stuck?: OutboxState['stuck'];
+}) {
+  const retrying = useRef(new Set<string>());
+  const [retryingIds, setRetryingIds] = useState(new Set<string>());
+  useEffect(() => {
+    for (const id of retrying.current) {
+      if (!orders.some((order) => order.id === id && order.syncStatus === 'rejected')) retrying.current.delete(id);
+    }
+    setRetryingIds(new Set(retrying.current));
+  }, [orders]);
+  return <ScrollView className="flex-1 bg-background p-4">
+    {[{ title: 'Needs attention', orders: needsAttention(orders, { stuckCommandIds: stuck?.commandIds }) }, { title: 'Recent', orders }].filter((section) => section.title === 'Recent' || section.orders.length > 0).map((section) => (
+      <View key={section.title} className="mb-6 gap-3">
+        <Text accessibilityRole="header" className="text-xl font-semibold text-foreground">{section.title}</Text>
+        {section.orders.map((order) => {
+          const count = order.lines.reduce((sum, line) => sum + line.quantity, 0);
+          // The order's own stuck entry: its clock and latest reason, not the earliest across all stuck orders.
+          const stuckEntry = order.syncStatus === 'pending' ? stuck?.orders.find((entry) => entry.commandId === order.commandId) : undefined;
+          return (
+          <View key={order.id} className="gap-1 rounded-md border border-border bg-card p-3">
+            <Text className="text-foreground">{order.serverRefs?.displayId ? `Order #${order.serverRefs.displayId} · ` : ''}{count} {count === 1 ? 'item' : 'items'}</Text>
+            <Text className="text-muted-foreground">{formatDate(order.createdAt)} · {formatMoney({ amount: order.totalMinor, currency: order.currency })} · {STATUS_LABEL[order.syncStatus]}</Text>
+            {stuckEntry ? <Text className="text-destructive">
+              {/* The same words for any reason, with no reason code; the hour as the status line has it (numeric, #245). */}
+              {`Hasn't reached the online store since ${new Date(stuckEntry.since).toLocaleTimeString(undefined, { hour: 'numeric', minute: '2-digit' })}.`}
+            </Text> : null}
+            {/* The code's sentence alone: the cashier sees no error code and never the store's message. */}
+            {order.syncStatus === 'rejected' ? <Text className="text-destructive">{refusalSentence(order.error?.code)}</Text> : null}
+            {/* A late sale (ADR-032) needs no Retry of its own; a rejected one still gets its Retry below. */}
+            {order.lateSessionId !== undefined ? <Text className="text-foreground">Taken after the register closed. It is not in that register's closure.</Text> : null}
+            {order.localWarnings?.map((warning, index) => <Text key={index} className="text-foreground">
+              {warning.code === 'customer_omitted'
+                ? `The customer's ${warning.field} couldn't be sent to the store, so the order isn't linked to them.`
+                : "The terminal's payment reference couldn't be kept; the payment is recorded without it."}
+            </Text>)}
+            {/* idempotency_mismatch isn't requeueable (the outbox's NOT_REQUEUEABLE): its sentence says not to send it again, and no Retry. */}
+            {section.title === 'Needs attention' && order.syncStatus === 'rejected' && order.error?.code !== 'idempotency_mismatch'
+              ? <Pressable accessibilityRole="button" disabled={retryingIds.has(order.id)} onPress={async () => {
+                if (retrying.current.has(order.id)) return;
+                retrying.current.add(order.id);
+                setRetryingIds(new Set(retrying.current));
+                if (await onRetry([order.id]) === 0) {
+                  retrying.current.delete(order.id);
+                  setRetryingIds(new Set(retrying.current));
+                }
+              }} className="rounded-md bg-primary px-4 py-2">
+                <Text className="text-center font-semibold text-primary-foreground">Retry</Text>
+              </Pressable> : null}
+            {knownWarnings(order.warnings).map((warning, index) => <View key={index} className="border-l-4 border-warning pl-2"><Text className="text-foreground">
+              {warning.code === 'insufficient_stock'
+                ? `Stock short by ${warning.quantity} for ${order.lines.find((line) => line.variantId === warning.variantId)?.name}`
+                : warning.code === 'tax_rate_mismatch'
+                ? `Tax at ${(warning.ratePpm / 10000).toLocaleString(undefined, { maximumFractionDigits: 4 })}%: store ${formatMoney({ amount: warning.serverMinor, currency: order.currency })} vs POS ${formatMoney({ amount: warning.expectedMinor, currency: order.currency })}`
+                : warning.code === 'customer_ignored'
+                ? `The online store didn't recognise the customer on this sale, so it was saved as a guest sale. Customer id: ${warning.customerId}.`
+                : warning.code === 'figures_mismatch'
+                ? `The online store worked out different figures for this sale. ${warning.fields.map(({ field, tillMinor, serverMinor }) => `${FIGURE_LABELS.get(field) ?? field}: till ${formatMoney({ amount: tillMinor, currency: order.currency })}, store ${formatMoney({ amount: serverMinor, currency: order.currency })}.`).join(' ')}`
+                : warning.bridgeMinor !== undefined
+                ? `Store calculated ${formatMoney({ amount: warning.serverMinor, currency: order.currency })}; a rounding line of ${warning.bridgeMinor > 0 ? '+' : ''}${formatMoney({ amount: warning.bridgeMinor, currency: order.currency })} brought it to ${formatMoney({ amount: warning.expectedMinor, currency: order.currency })}`
+                : `Store total ${formatMoney({ amount: warning.serverMinor, currency: order.currency })} vs POS ${formatMoney({ amount: warning.expectedMinor, currency: order.currency })}`}
+            </Text></View>)}
+          </View>
+          );
+        })}
+      </View>
+    ))}
+    {footer}
+  </ScrollView>;
+}

package/src/sale/print-style.ts

@@ -0,0 +1,11 @@
+import { Platform } from 'react-native';
+
+// react-native-web supports dataSet; uniwind-env.d.ts already augments ViewProps with it (TV6a).
+
+export function injectPrintStyle() {
+  if (Platform.OS !== 'web' || typeof document === 'undefined' || document.getElementById('pos-print-style')) return;
+  const style = document.createElement('style');
+  style.id = 'pos-print-style';
+  style.textContent = '@media print { [data-print="hide"] { display: none !important } }';
+  document.head.appendChild(style);
+}

package/src/sale/receipt.tsx

@@ -0,0 +1,62 @@
+import { useEffect } from 'react';
+import { Pressable, Text, View } from 'react-native';
+import { formatMoney } from '@tallyui/core';
+import { buildReceiptData, type SentOrder } from '@tallyui/pos';
+import { injectPrintStyle } from './print-style';
+import { discountLabel } from './discount-form';
+
+const defaultFormatDate = (iso: string) => new Intl.DateTimeFormat(undefined, { dateStyle: 'medium', timeStyle: 'short' }).format(new Date(iso));
+
+/** `store`/`taxLabel`/`topInset`/`formatDate` replace the app's Medusa settings, hard-coded VAT (default matches
+ * TV6a's `Cart`), outbox strip and date util, so `Receipt` stays platform-neutral (ADR-052). */
+export function Receipt({ order, store, cashier, registerId, newSale, taxLabel = (ratePpm: number) => `Tax ${ratePpm / 10000}%`,
+  topInset = 0, formatDate = defaultFormatDate }: {
+  order: SentOrder; store: { name: string; address?: string }; cashier: string; registerId: string; newSale: () => void;
+  taxLabel?: (ratePpm: number) => string; topInset?: number; formatDate?: (iso: string) => string;
+}) {
+  useEffect(injectPrintStyle, []);
+  const receipt = buildReceiptData(order, {
+    storeName: store.name, storeAddress: store.address, cashier, register: registerId,
+  });
+  const money = (amount: number) => formatMoney({ amount, currency: receipt.currency }) ?? '';
+  const row = (label: string, amount: string, bold = false, key?: number) => <View key={key} accessibilityLabel={`${label}: ${amount}`} className="flex-row justify-between gap-4">
+    <Text className={`text-foreground ${bold ? 'font-semibold' : ''}`}>{label}</Text>
+    <Text className={`text-right text-foreground ${bold ? 'font-semibold' : ''}`}>{amount}</Text>
+  </View>;
+  const { totals } = receipt;
+  const taxRows = totals.taxLines.map((line, index) =>
+    row(`${totals.taxInclusive ? 'incl. ' : ''}${taxLabel(line.ratePpm)}`, money(line.amountMinor), false, index));
+  return <>
+    {topInset > 0 ? <View dataSet={{ print: 'hide' }} style={{ height: topInset, flexShrink: 0 }} /> : null}
+    <View className="w-full max-w-md self-center gap-3 p-4 bg-card">
+    <Text className="text-lg font-semibold text-foreground">{receipt.header.storeName}</Text>
+    {receipt.header.storeAddress ? <Text className="text-muted-foreground">{receipt.header.storeAddress}</Text> : null}
+    <Text className="text-foreground">Order {receipt.header.orderNumber.slice(-8)}</Text>
+    <Text className="text-muted-foreground">{formatDate(receipt.header.date)}</Text>
+    <Text className="text-muted-foreground">Cashier: {receipt.header.cashier}</Text>
+    {receipt.header.customer && <Text className="text-muted-foreground">Customer: {receipt.header.customer}</Text>}
+    {receipt.lineItems.map((line, index) => <View key={index}>
+      <Text className="text-foreground">{line.name}</Text>
+      {/* Before any discount, then the line's own discounts as sub-rows (TallyUI ADR-063); they add up to the subtotal. */}
+      {row(`${line.quantity} × ${money(line.unitPriceMinor)}`, money(line.displayAmountMinor))}
+      {line.displayDiscounts.map((discount, i) => <View key={i} className="pl-4">{row(`${discountLabel(
+        order.lineItems[index].discounts[i], receipt.currency)} off`, `−${money(discount.amountMinor)}`)}</View>)}
+    </View>)}
+    {receipt.orderDiscountMinor > 0 ? row('Order discount', `−${money(receipt.orderDiscountMinor)}`) : null}
+    {/* order.display's figures (ADR-063; medusapos ADR 0008), in the cart's order. Exclusive: subtotal − discount + tax
+        = total; inclusive: subtotal − discount = total, and the tax is "incl.", not added. */}
+    {row('Subtotal', money(totals.subtotalMinor))}
+    {totals.discountMinor > 0 ? row('Discount', `−${money(totals.discountMinor)}`) : null}
+    {taxRows}
+    {row('Total', money(totals.totalMinor), true)}
+    {receipt.payments.map((payment, index) => row(payment.method === 'cash' ? 'Cash tendered' : 'Card terminal',
+      money(payment.amountMinor) + (payment.reference ? ` · ${payment.reference}` : ''), false, index))}
+    {row('Change', money(receipt.changeDueMinor))}
+    <View dataSet={{ print: 'hide' }} className="flex-row gap-4">
+      <Pressable accessibilityRole="button" onPress={() => { if (typeof window !== 'undefined' && typeof window.print === 'function') window.print(); }} className="rounded-md border border-border bg-card px-4 py-3">
+        <Text className="text-center text-foreground">Print receipt</Text>
+      </Pressable>
+      <Pressable accessibilityRole="button" onPress={newSale} className="rounded-md bg-primary px-4 py-3"><Text className="text-center font-semibold text-primary-foreground">New sale</Text></Pressable>
+    </View>
+  </View></>;
+}