@tallyui/components 3.0.1 → 3.0.2

package/dist/index.d.ts

@@ -9,7 +9,7 @@ import { SvgProps } from 'react-native-svg';
 import { Separator as Separator$1, Label as Label$1, Tabs as Tabs$1, Dialog as Dialog$1, AlertDialog as AlertDialog$1, Select as Select$1, Combobox as Combobox$1, DropdownMenu as DropdownMenu$1, ContextMenu as ContextMenu$1, Popover as Popover$1, Tooltip as Tooltip$1, HoverCard as HoverCard$1, Accordion as Accordion$1, Collapsible as Collapsible$1, Checkbox as Checkbox$1, Switch as Switch$1, RadioGroup as RadioGroup$1, Toggle as Toggle$1, ToggleGroup as ToggleGroup$1, Progress as Progress$1, Slider as Slider$1, Image } from '@tallyui/primitives';
 export { TextClassContext } from '@tallyui/primitives';
 import { Money, CustomerTraits, Customer, CustomerInput, ProductTraits, SyncNotice, StoreSettingsChoices, StoreSettingsChoice } from '@tallyui/core';
-import { useRegisterSession, MovementType, useSale, AppliedDiscount, Discount, CatalogueEntry, SentOrder, OutboxState, PosOrder } from '@tallyui/pos';
+import { useRegisterSession, MovementType, useSale, AppliedDiscount, Discount, CatalogueEntry, SentOrder, PosOrder, OutboxState } from '@tallyui/pos';
 
 declare const textVariants: (props?: ({
     variant?: "link" | "default" | null | undefined;
@@ -1255,7 +1255,7 @@ declare function DiscountChips({ discounts, currency, onRemove, prefix, amounts
 }): react_jsx_runtime.JSX.Element | null;
 
 declare function formatStockSyncTime(time: Date, locale?: string, hour12?: boolean, now?: Date): string;
-declare function Catalogue<Doc>({ products, traits, currency, onSelect, statusText, statusAccessory, lastSyncedAt, lastStockCheckAt, hour12, minCodeLength }: {
+declare function Catalogue<Doc>({ products, traits, currency, onSelect, statusText, statusAccessory, lastSyncedAt, loading, lastStockCheckAt, hour12, minCodeLength }: {
     products: Doc[];
     traits: ProductTraits<Doc>;
     currency: string;
@@ -1265,6 +1265,9 @@ declare function Catalogue<Doc>({ products, traits, currency, onSelect, statusTe
     /** 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 catalogue's first pull is still running, so an empty grid says "Loading products…" rather than "No products yet.". Defaults to lastSyncedAt === null; pass false
+     * when a null lastSyncedAt doesn't mean a pull is running (e.g. offline on first start). */
+    loading?: boolean;
     /** 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;
@@ -1279,7 +1282,7 @@ declare function Catalogue<Doc>({ products, traits, currency, onSelect, statusTe
 
 /** `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). */
-declare function Receipt({ order, store, cashier, registerId, newSale, taxLabel, topInset, formatDate }: {
+declare function Receipt({ order, posOrder, store, cashier, registerId, newSale, taxLabel, topInset, formatDate }: {
     order: SentOrder;
     store: {
         name: string;
@@ -1288,6 +1291,9 @@ declare function Receipt({ order, store, cashier, registerId, newSale, taxLabel,
     cashier: string;
     registerId: string;
     newSale: () => void;
+    /** The finalized order (useSale's receipt stage has it). With it the receipt prints its reference and time, the
+     * same as Orders; without it (a preview before finalize) the sale id is marked as a draft. */
+    posOrder?: PosOrder;
     taxLabel?: (ratePpm: number) => string;
     topInset?: number;
     formatDate?: (iso: string) => string;

package/dist/index.js

@@ -4102,7 +4102,7 @@ function Cart({ sale, taxLabel = (ratePpm) => `Tax ${ratePpm / 1e4}%` }) {
       dataSet: { print: "hide" },
       items: order.lineItems,
       renderItem,
-      emptyState: /* @__PURE__ */ jsx89(Text33, { className: "text-muted-foreground", children: "Scan or tap a product to start a sale." }),
+      emptyState: /* @__PURE__ */ jsx89(Text33, { testID: "cart-empty", className: "px-3 py-2 text-muted-foreground", children: "Scan or tap a product to start a sale." }),
       afterItems: order.lineItems.length ? /* @__PURE__ */ jsxs48(View55, { className: "gap-3 px-3 py-2", children: [
         /* @__PURE__ */ jsx89(
           DiscountChips,
@@ -4250,7 +4250,8 @@ function laterOf(a, b) {
   if (!b) return a;
   return a.getTime() >= b.getTime() ? a : b;
 }
-function Catalogue({ products, traits, currency, onSelect, statusText, statusAccessory, lastSyncedAt, lastStockCheckAt, hour12, minCodeLength }) {
+function Catalogue({ products, traits, currency, onSelect, statusText, statusAccessory, lastSyncedAt, loading, lastStockCheckAt, hour12, minCodeLength }) {
+  const isLoading = loading ?? lastSyncedAt === null;
   const shown = useStockOverlaid(products);
   const overlayAsOf = useStockOverlayAsOf();
   const parsedOverlayAsOf = overlayAsOf ? new Date(overlayAsOf) : void 0;
@@ -4339,7 +4340,7 @@ function Catalogue({ products, traits, currency, onSelect, statusText, statusAcc
             /* @__PURE__ */ jsx92(ProductStockBadge, { doc: product, showAsOf: false, className: "self-center" })
           ] }) })
         ),
-        emptyState: /* @__PURE__ */ jsx92(Text36, { className: "mt-10 text-center text-sm text-muted-foreground", children: query.trim() ? `No products match "${query.trim()}".` : "No products yet." })
+        emptyState: /* @__PURE__ */ jsx92(Text36, { className: "mt-10 text-center text-sm text-muted-foreground", children: query.trim() ? `No products match "${query.trim()}".` : isLoading ? "Loading products\u2026" : "No products yet." })
       }
     )
   ] });
@@ -4361,11 +4362,18 @@ function injectPrintStyle() {
   document.head.appendChild(style);
 }
 
+// src/sale/order-reference.ts
+function orderReference(order) {
+  const local = order.id.slice(-8);
+  return order.serverRefs?.displayId ? `${local} \xB7 #${order.serverRefs.displayId}` : local;
+}
+
 // src/sale/receipt.tsx
 import { Fragment as Fragment7, jsx as jsx93, jsxs as jsxs52 } from "react/jsx-runtime";
 var defaultFormatDate = (iso) => new Intl.DateTimeFormat(void 0, { dateStyle: "medium", timeStyle: "short" }).format(new Date(iso));
 function Receipt({
   order,
+  posOrder,
   store,
   cashier,
   registerId,
@@ -4387,17 +4395,15 @@ function Receipt({
     /* @__PURE__ */ jsx93(Text37, { className: `text-right text-foreground ${bold ? "font-semibold" : ""}`, children: amount })
   ] }, key);
   const { totals } = receipt;
+  const lineDiscountMinor = totals.discountMinor - receipt.orderDiscountMinor;
   const taxRows = totals.taxLines.map((line, index) => row(`${totals.taxInclusive ? "incl. " : ""}${taxLabel(line.ratePpm)}`, money(line.amountMinor), false, index));
   return /* @__PURE__ */ jsxs52(Fragment7, { children: [
     topInset > 0 ? /* @__PURE__ */ jsx93(View58, { dataSet: { print: "hide" }, style: { height: topInset, flexShrink: 0 } }) : null,
     /* @__PURE__ */ jsxs52(View58, { className: "w-full max-w-md self-center gap-3 p-4 bg-card", children: [
       /* @__PURE__ */ jsx93(Text37, { className: "text-lg font-semibold text-foreground", children: receipt.header.storeName }),
       receipt.header.storeAddress ? /* @__PURE__ */ jsx93(Text37, { className: "text-muted-foreground", children: receipt.header.storeAddress }) : null,
-      /* @__PURE__ */ jsxs52(Text37, { className: "text-foreground", children: [
-        "Order ",
-        receipt.header.orderNumber.slice(-8)
-      ] }),
-      /* @__PURE__ */ jsx93(Text37, { className: "text-muted-foreground", children: formatDate(receipt.header.date) }),
+      /* @__PURE__ */ jsx93(Text37, { testID: "receipt-order", className: "text-foreground", children: posOrder ? `Order ${orderReference(posOrder)}` : `Order ${receipt.header.orderNumber.slice(-8)} (draft)` }),
+      /* @__PURE__ */ jsx93(Text37, { className: "text-muted-foreground", children: formatDate(posOrder?.createdAt ?? receipt.header.date) }),
       /* @__PURE__ */ jsxs52(Text37, { className: "text-muted-foreground", children: [
         "Cashier: ",
         receipt.header.cashier
@@ -4414,9 +4420,9 @@ function Receipt({
           receipt.currency
         )} off`, `\u2212${money(discount.amountMinor)}`) }, i))
       ] }, index)),
-      receipt.orderDiscountMinor > 0 ? row("Order discount", `\u2212${money(receipt.orderDiscountMinor)}`) : null,
       row("Subtotal", money(totals.subtotalMinor)),
-      totals.discountMinor > 0 ? row("Discount", `\u2212${money(totals.discountMinor)}`) : null,
+      lineDiscountMinor > 0 ? row("Line discounts", `\u2212${money(lineDiscountMinor)}`) : null,
+      receipt.orderDiscountMinor > 0 ? row("Order discount", `\u2212${money(receipt.orderDiscountMinor)}`) : null,
       taxRows,
       row("Total", money(totals.totalMinor), true),
       receipt.payments.map((payment, index) => row(
@@ -4565,6 +4571,7 @@ function defaultFormatDate2(iso) {
 function OrdersList({ orders, onRetry, formatDate = defaultFormatDate2, footer, stuck }) {
   const retrying = useRef7(/* @__PURE__ */ new Set());
   const [retryingIds, setRetryingIds] = useState19(/* @__PURE__ */ new Set());
+  const [expanded, setExpanded] = useState19(/* @__PURE__ */ new Set());
   useEffect8(() => {
     for (const id of retrying.current) {
       if (!orders.some((order) => order.id === id && order.syncStatus === "rejected")) retrying.current.delete(id);
@@ -4574,23 +4581,43 @@ function OrdersList({ orders, onRetry, formatDate = defaultFormatDate2, footer,
   return /* @__PURE__ */ jsxs54(ScrollView13, { className: "flex-1 bg-background p-4", children: [
     [{ title: "Needs attention", orders: needsAttention(orders, { stuckCommandIds: stuck?.commandIds }) }, { title: "Recent", orders }].filter((section) => section.title === "Recent" || section.orders.length > 0).map((section) => /* @__PURE__ */ jsxs54(View60, { className: "mb-6 gap-3", children: [
       /* @__PURE__ */ jsx95(Text39, { accessibilityRole: "header", className: "text-xl font-semibold text-foreground", children: section.title }),
+      section.title === "Recent" && orders.length === 0 ? /* @__PURE__ */ jsx95(Text39, { testID: "orders-empty", className: "text-muted-foreground", children: "No sales yet. Completed sales appear here." }) : null,
       section.orders.map((order) => {
         const count2 = order.lines.reduce((sum, line) => sum + line.quantity, 0);
+        const key = `${section.title}:${order.id}`;
+        const isExpanded = expanded.has(key);
         const stuckEntry = order.syncStatus === "pending" ? stuck?.orders.find((entry) => entry.commandId === order.commandId) : void 0;
         return /* @__PURE__ */ jsxs54(View60, { className: "gap-1 rounded-md border border-border bg-card p-3", children: [
-          /* @__PURE__ */ jsxs54(Text39, { className: "text-foreground", children: [
-            order.serverRefs?.displayId ? `Order #${order.serverRefs.displayId} \xB7 ` : "",
-            count2,
-            " ",
-            count2 === 1 ? "item" : "items"
-          ] }),
-          /* @__PURE__ */ jsxs54(Text39, { className: "text-muted-foreground", children: [
-            formatDate(order.createdAt),
-            " \xB7 ",
-            formatMoney14({ amount: order.totalMinor, currency: order.currency }),
-            " \xB7 ",
-            STATUS_LABEL[order.syncStatus]
-          ] }),
+          /* @__PURE__ */ jsxs54(
+            Pressable29,
+            {
+              accessibilityRole: "button",
+              "aria-expanded": isExpanded,
+              accessibilityHint: "Shows the items and payments of this sale",
+              testID: `order-row-${order.id}`,
+              className: "gap-1",
+              onPress: () => setExpanded((current) => {
+                const next = new Set(current);
+                if (next.has(key)) next.delete(key);
+                else next.add(key);
+                return next;
+              }),
+              children: [
+                /* @__PURE__ */ jsx95(Text39, { className: "text-foreground", children: `Order ${orderReference(order)} \xB7 ${count2} ${count2 === 1 ? "item" : "items"}` }),
+                /* @__PURE__ */ jsxs54(Text39, { className: "text-muted-foreground", children: [
+                  formatDate(order.createdAt),
+                  " \xB7 ",
+                  formatMoney14({ amount: order.totalMinor, currency: order.currency }),
+                  " \xB7 ",
+                  STATUS_LABEL[order.syncStatus]
+                ] })
+              ]
+            }
+          ),
+          isExpanded ? /* @__PURE__ */ jsxs54(View60, { testID: `order-detail-${order.id}`, className: "mt-1 gap-1 border-t border-border pt-2", children: [
+            order.lines.map((line) => /* @__PURE__ */ jsx95(Text39, { className: "text-foreground", children: `${line.quantity} \xD7 ${line.name}` }, line.id)),
+            order.payments.map((payment) => /* @__PURE__ */ jsx95(Text39, { className: "text-muted-foreground", children: `${payment.method === "cash" ? "Cash" : "Card terminal"} ${formatMoney14({ amount: payment.amountMinor, currency: order.currency })}${payment.reference ? ` \xB7 ${payment.reference}` : ""}` }, payment.id))
+          ] }) : null,
           stuckEntry ? /* @__PURE__ */ jsx95(Text39, { className: "text-destructive", children: `Hasn't reached the online store since ${sinceText(stuckEntry)}.` }) : null,
           order.syncStatus === "rejected" ? /* @__PURE__ */ jsx95(Text39, { className: "text-destructive", children: refusalSentence(order.error?.code) }) : null,
           order.lateSessionId !== void 0 ? /* @__PURE__ */ jsx95(Text39, { className: "text-foreground", children: "Taken after the register closed. It is not in that register's closure." }) : null,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tallyui/components",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "type": "module",
   "description": "Universal POS UI components for Tally UI",
   "main": "./dist/index.js",
@@ -27,22 +27,22 @@
     "directory": "packages/components"
   },
   "peerDependencies": {
-    "@tallyui/core": "^3.0.1",
-    "@tallyui/primitives": "^3.0.1",
-    "@tallyui/theme": "^3.0.1",
+    "@tallyui/core": "^3.0.2",
+    "@tallyui/primitives": "^3.0.2",
+    "@tallyui/theme": "^3.0.2",
     "react": ">=18",
     "react-native": ">=0.74",
     "react-native-svg": ">=15"
   },
   "dependencies": {
     "class-variance-authority": "^0.7.1",
-    "@tallyui/pos": "3.0.1"
+    "@tallyui/pos": "3.0.2"
   },
   "devDependencies": {
-    "@tallyui/connector-medusa": "3.0.1",
-    "@tallyui/connector-vendure": "3.0.1",
-    "@tallyui/connector-woocommerce": "3.0.1",
-    "@tallyui/mock-api": "3.0.1",
+    "@tallyui/connector-medusa": "3.0.2",
+    "@tallyui/connector-vendure": "3.0.2",
+    "@tallyui/connector-woocommerce": "3.0.2",
+    "@tallyui/mock-api": "3.0.2",
     "@types/react": ">=18",
     "react": "^19.2.4",
     "react-native-svg": "15.12.1",

package/src/sale/cart.tsx

@@ -41,7 +41,7 @@ export function Cart({ sale, taxLabel = (ratePpm: number) => `Tax ${ratePpm / 10
     {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>}
+    emptyState={<Text testID="cart-empty" className="px-3 py-2 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" />

package/src/sale/catalogue.tsx

@@ -32,7 +32,7 @@ function laterOf(a: Date | null | undefined, b: Date | null | undefined): Date |
   return a.getTime() >= b.getTime() ? a : b;
 }
 
-export function Catalogue<Doc>({ products, traits, currency, onSelect, statusText, statusAccessory, lastSyncedAt, lastStockCheckAt, hour12, minCodeLength }: {
+export function Catalogue<Doc>({ products, traits, currency, onSelect, statusText, statusAccessory, lastSyncedAt, loading, lastStockCheckAt, hour12, minCodeLength }: {
   products: Doc[];
   traits: ProductTraits<Doc>;
   currency: string;
@@ -42,6 +42,9 @@ export function Catalogue<Doc>({ products, traits, currency, onSelect, statusTex
   /** 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 catalogue's first pull is still running, so an empty grid says "Loading products…" rather than "No products yet.". Defaults to lastSyncedAt === null; pass false
+   * when a null lastSyncedAt doesn't mean a pull is running (e.g. offline on first start). */
+  loading?: boolean;
   /** 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;
@@ -53,6 +56,7 @@ export function Catalogue<Doc>({ products, traits, currency, onSelect, statusTex
    * in its unfocused wedge listener — not this prop's job. */
   minCodeLength?: number;
 }) {
+  const isLoading = loading ?? lastSyncedAt === null;
   // 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[];
@@ -132,7 +136,7 @@ export function Catalogue<Doc>({ products, traits, currency, onSelect, statusTex
           </Pressable>
         )}
         emptyState={<Text className="mt-10 text-center text-sm text-muted-foreground">
-          {query.trim() ? `No products match "${query.trim()}".` : 'No products yet.'}
+          {query.trim() ? `No products match "${query.trim()}".` : isLoading ? 'Loading products…' : 'No products yet.'}
         </Text>} />
     </View>
   );

package/src/sale/index.ts

@@ -4,6 +4,7 @@ export { Tender } from './tender';
 export { DiscountForm, DiscountChips, parseDiscount, discountLabel } from './discount-form';
 export { Catalogue, formatStockSyncTime } from './catalogue';
 export { Receipt } from './receipt';
+export { orderReference } from './order-reference';
 export { injectPrintStyle } from './print-style';
 export { SyncStatus } from './sync-status';
 export { OrdersList } from './orders-list';

package/src/sale/order-reference.ts

@@ -0,0 +1,6 @@
+/** The order reference a visitor sees on the receipt and in Orders (front desk ruling, 2026-10-06): the finalized
+ * PosOrder id's last 8 characters, then the backend's display id once the store has one. */
+export function orderReference(order: { id: string; serverRefs?: { displayId?: string } }): string {
+  const local = order.id.slice(-8);
+  return order.serverRefs?.displayId ? `${local} · #${order.serverRefs.displayId}` : local;
+}

package/src/sale/orders-list.tsx

@@ -2,6 +2,7 @@ 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';
+import { orderReference } from './order-reference';
 import { sinceText } from './since-text';
 
 const STATUS_LABEL = { pending: 'Waiting to sync', applied: 'Synced', rejected: 'Not accepted' };
@@ -42,6 +43,7 @@ export function OrdersList({ orders, onRetry, formatDate = defaultFormatDate, fo
 }) {
   const retrying = useRef(new Set<string>());
   const [retryingIds, setRetryingIds] = useState(new Set<string>());
+  const [expanded, setExpanded] = 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);
@@ -52,14 +54,31 @@ export function OrdersList({ orders, onRetry, formatDate = defaultFormatDate, fo
     {[{ 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.title === 'Recent' && orders.length === 0 ? <Text testID="orders-empty" className="text-muted-foreground">No sales yet. Completed sales appear here.</Text> : null}
         {section.orders.map((order) => {
           const count = order.lines.reduce((sum, line) => sum + line.quantity, 0);
+          const key = `${section.title}:${order.id}`;
+          const isExpanded = expanded.has(key);
           // 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>
+            <Pressable accessibilityRole="button" aria-expanded={isExpanded}
+              accessibilityHint="Shows the items and payments of this sale" testID={`order-row-${order.id}`} className="gap-1"
+              onPress={() => setExpanded((current) => {
+                const next = new Set(current);
+                if (next.has(key)) next.delete(key); else next.add(key);
+                return next;
+              })}>
+              <Text className="text-foreground">{`Order ${orderReference(order)} · ${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>
+            </Pressable>
+            {isExpanded ? <View testID={`order-detail-${order.id}`} className="mt-1 gap-1 border-t border-border pt-2">
+              {order.lines.map((line) => <Text key={line.id} className="text-foreground">{`${line.quantity} × ${line.name}`}</Text>)}
+              {order.payments.map((payment) => <Text key={payment.id} className="text-muted-foreground">
+                {`${payment.method === 'cash' ? 'Cash' : 'Card terminal'} ${formatMoney({ amount: payment.amountMinor, currency: order.currency })}${payment.reference ? ` · ${payment.reference}` : ''}`}
+              </Text>)}
+            </View> : null}
             {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 ${sinceText(stuckEntry)}.`}

package/src/sale/receipt.tsx

@@ -2,16 +2,21 @@ import { useEffect } from 'react';
 import { Pressable, Text, View } from 'react-native';
 import { formatMoney } from '@tallyui/core';
 import { buildReceiptData, type SentOrder } from '@tallyui/pos';
+import type { PosOrder } from '@tallyui/pos';
 import { injectPrintStyle } from './print-style';
 import { discountLabel } from './discount-form';
+import { orderReference } from './order-reference';
 
 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}%`,
+export function Receipt({ order, posOrder, 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;
+  /** The finalized order (useSale's receipt stage has it). With it the receipt prints its reference and time, the
+   * same as Orders; without it (a preview before finalize) the sale id is marked as a draft. */
+  posOrder?: PosOrder;
   taxLabel?: (ratePpm: number) => string; topInset?: number; formatDate?: (iso: string) => string;
 }) {
   useEffect(injectPrintStyle, []);
@@ -24,6 +29,7 @@ export function Receipt({ order, store, cashier, registerId, newSale, taxLabel =
     <Text className={`text-right text-foreground ${bold ? 'font-semibold' : ''}`}>{amount}</Text>
   </View>;
   const { totals } = receipt;
+  const lineDiscountMinor = totals.discountMinor - receipt.orderDiscountMinor;
   const taxRows = totals.taxLines.map((line, index) =>
     row(`${totals.taxInclusive ? 'incl. ' : ''}${taxLabel(line.ratePpm)}`, money(line.amountMinor), false, index));
   return <>
@@ -31,8 +37,8 @@ export function Receipt({ order, store, cashier, registerId, newSale, taxLabel =
     <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 testID="receipt-order" className="text-foreground">{posOrder ? `Order ${orderReference(posOrder)}` : `Order ${receipt.header.orderNumber.slice(-8)} (draft)`}</Text>
+    <Text className="text-muted-foreground">{formatDate(posOrder?.createdAt ?? 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}>
@@ -42,11 +48,11 @@ export function Receipt({ order, store, cashier, registerId, newSale, taxLabel =
       {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. */}
+    {/* Each discount appears once in the totals: line discounts are itemised under their lines and summed once here;
+        the order discount appears once. order.display's figures (ADR-063; medusapos ADR 0008). */}
     {row('Subtotal', money(totals.subtotalMinor))}
-    {totals.discountMinor > 0 ? row('Discount', `−${money(totals.discountMinor)}`) : null}
+    {lineDiscountMinor > 0 ? row('Line discounts', `−${money(lineDiscountMinor)}`) : null}
+    {receipt.orderDiscountMinor > 0 ? row('Order discount', `−${money(receipt.orderDiscountMinor)}`) : null}
     {taxRows}
     {row('Total', money(totals.totalMinor), true)}
     {receipt.payments.map((payment, index) => row(payment.method === 'cash' ? 'Cash tendered' : 'Card terminal',