@tallyui/components 3.0.0 → 3.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tallyui/components",
-  "version": "3.0.0",
+  "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.0",
-    "@tallyui/primitives": "^3.0.0",
-    "@tallyui/theme": "^3.0.0",
+    "@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.0"
+    "@tallyui/pos": "3.0.2"
   },
   "devDependencies": {
-    "@tallyui/connector-medusa": "3.0.0",
-    "@tallyui/connector-vendure": "3.0.0",
-    "@tallyui/connector-woocommerce": "3.0.0",
-    "@tallyui/mock-api": "3.0.0",
+    "@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/register/register-panel.tsx

@@ -4,7 +4,9 @@ import type { MovementType, useRegisterSession } from '@tallyui/pos';
 
 import { formatMoney } from '@tallyui/core';
 import { Button } from '../ui/button';
-import { Dialog, DialogContent, DialogTitle } from '../ui/dialog';
+import { Dialog, DialogClose, DialogContent, DialogTitle } from '../ui/dialog';
+import { IconButton } from '../ui/icon-button';
+import { XIcon } from '../ui/icon/x-icon';
 import { Text } from '../ui/text';
 import { MovementSheet } from './movement-sheet';
 
@@ -64,7 +66,14 @@ export function RegisterPanel({ register, currency, registerName, open, onOpenCh
       >
         {/* The heading stays visible; a phone-height viewport must never push it under the page
             header (the Front desk review, 2026-09-28) — only the body below it scrolls. */}
-        <DialogTitle testID="register-panel-amount">{registerName ?? 'Register'}</DialogTitle>
+        <View className="flex-row items-center justify-between gap-2">
+          <DialogTitle testID="register-panel-amount">{registerName ?? 'Register'}</DialogTitle>
+          <DialogClose asChild>
+            <IconButton variant="ghost" size="sm" testID="register-panel-dismiss" accessibilityLabel="Close panel">
+              <XIcon size={16} />
+            </IconButton>
+          </DialogClose>
+        </View>
         <Text testID="register-panel-sales-count">{salesCount} sale{salesCount === 1 ? '' : 's'} this session</Text>
         <ScrollView testID="register-panel-body" className="flex-1" contentContainerClassName="gap-3">
           <View className="flex-row gap-2">

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',

package/src/ui/icon/x-icon.tsx

@@ -0,0 +1,9 @@
+import { Line } from 'react-native-svg';
+import { createSvgIcon } from './svg-icon';
+
+export const XIcon = createSvgIcon('XIcon', () => (
+  <>
+    <Line x1={18} y1={6} x2={6} y2={18} />
+    <Line x1={6} y1={6} x2={18} y2={18} />
+  </>
+));

package/src/ui/index.ts

@@ -7,6 +7,7 @@ export { VStack, vstackVariants, type VStackProps } from './vstack';
 export { Icon, iconVariants, type IconProps } from './icon';
 export { createSvgIcon, type SvgIconProps } from './icon/svg-icon';
 export { SearchIcon } from './icon/search-icon';
+export { XIcon } from './icon/x-icon';
 export { Loader, loaderVariants, type LoaderProps } from './loader';
 export { Badge, badgeVariants, badgeTextVariants, type BadgeProps } from './badge';
 export { Avatar, avatarVariants, type AvatarProps } from './avatar';