@tallyui/components 3.0.3 → 3.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tallyui/components",
-  "version": "3.0.3",
+  "version": "3.1.0",
   "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.3",
-    "@tallyui/primitives": "^3.0.3",
-    "@tallyui/theme": "^3.0.3",
+    "@tallyui/core": "^3.1.0",
+    "@tallyui/primitives": "^3.1.0",
+    "@tallyui/theme": "^3.1.0",
     "react": ">=18",
     "react-native": ">=0.74",
     "react-native-svg": ">=15"
   },
   "dependencies": {
     "class-variance-authority": "^0.7.1",
-    "@tallyui/pos": "3.0.3"
+    "@tallyui/pos": "3.1.0"
   },
   "devDependencies": {
-    "@tallyui/connector-medusa": "3.0.3",
-    "@tallyui/connector-vendure": "3.0.3",
-    "@tallyui/connector-woocommerce": "3.0.3",
-    "@tallyui/mock-api": "3.0.3",
+    "@tallyui/connector-medusa": "3.1.0",
+    "@tallyui/connector-vendure": "3.1.0",
+    "@tallyui/connector-woocommerce": "3.1.0",
+    "@tallyui/mock-api": "3.1.0",
     "@types/react": ">=18",
     "react": "^19.2.4",
     "react-native-svg": "15.12.1",

package/src/customer/customer-picker.tsx

@@ -102,7 +102,7 @@ export function CustomerPicker({ search, create, selected, onSelect, onError, on
     {!online && <Text className="text-sm text-muted-foreground">Connect to search or add customers.</Text>}
     {noResults && <Text className="text-sm text-muted-foreground">No customers found.</Text>}
     {error && <Text accessibilityRole="alert" className="text-sm text-destructive">{error}</Text>}
-    <CustomerSelect customers={customers} traits={customerTraits} onSearch={setQuery}
+    <CustomerSelect customers={customers} traits={customerTraits} onSearch={setQuery} showSearch={false}
       onSelect={(customer) => { onSelect(customer); setQuery(''); }} />
     {create && <Pressable accessibilityRole="button" disabled={!online || creating} onPress={() => setShowForm(true)}
       className={cn('items-center rounded-lg border border-border px-4 py-3', (!online || creating) && 'opacity-50')}>

package/src/customer/customer-select.tsx

@@ -1,8 +1,10 @@
+import { useState } from 'react';
 import { Pressable, ScrollView, View } from 'react-native';
 import { Select } from '@tallyui/primitives';
 import { useCustomerTraits, type CustomerTraits } from '@tallyui/core';
 import { cn } from '@tallyui/theme';
 import { VStack, type VStackProps } from '../ui';
+import { SearchInput } from '../input/search-input';
 import { CustomerCard } from './customer-card';
 
 export interface CustomerSelectProps<Doc = any> extends Omit<VStackProps, 'children'> {
@@ -17,6 +19,8 @@ export interface CustomerSelectProps<Doc = any> extends Omit<VStackProps, 'child
   onSearch: (query: string) => void;
   /** Placeholder text for the search input */
   placeholder?: string;
+  /** Renders the search input; pass false when the parent renders its own (as CustomerPicker does) */
+  showSearch?: boolean;
   className?: string;
 }
 
@@ -54,10 +58,12 @@ function CustomerSelectView<Doc>({
   onSelect,
   onSearch,
   placeholder = 'Search customers...',
+  showSearch = true,
   className,
   traits,
   ...props
 }: CustomerSelectProps<Doc>) {
+  const [search, setSearch] = useState('');
 
   // Map selected customer to Select primitive's Option format
   const selectedOption = selected && traits
@@ -84,6 +90,16 @@ function CustomerSelectView<Doc>({
       defaultOpen={true}
     >
       <VStack space="sm" className={cn(className)} {...props}>
+        {showSearch && <SearchInput
+          value={search}
+          onChangeText={(text) => {
+            setSearch(text);
+            onSearch(text);
+          }}
+          placeholder={placeholder}
+          testID="customer-select-search"
+          accessibilityLabel="Search customers"
+        />}
         {selected && traits && (
           <Select.Trigger asChild>
             <View className="rounded-lg border border-primary bg-primary/5 px-3 py-2">

package/src/index.ts

@@ -155,7 +155,9 @@ export {
 // Sale components
 export {
   Cart, CartBar, Tender, DiscountForm, DiscountChips, parseDiscount, discountLabel,
+  PriceForm, parsePrice,
   Catalogue, formatStockSyncTime, Receipt, injectPrintStyle, SyncStatus, OrdersList, orderReference,
+  ParkedSales, type ParkedSalesProps,
 } from './sale';
 
 // Layout components

package/src/register/register-count.tsx

@@ -52,8 +52,11 @@ function tileLabel(value: number, currency: string): string {
   return formatter.format(value / 10 ** minorUnitDigits(currency));
 }
 
-/** Title-cases a tender method key ('card' -> 'Card') for a plain-English label. Shared with `ClosureSheet`. */
-export const tenderLabel = (method: string) => method.charAt(0).toUpperCase() + method.slice(1);
+/** Plain-English label for a tender method key: `external` is the till's card tender ('Card');
+ * other keys are title-cased. Shared with `ClosureSheet` and `RegisterPanel`. */
+export const tenderLabel = (method: string) =>
+  new Map([['cash', 'Cash'], ['external', 'Card']]).get(method) ??
+  method.charAt(0).toUpperCase() + method.slice(1);
 
 interface DenominationTileProps {
   value: number;

package/src/register/register-panel.tsx

@@ -9,6 +9,7 @@ import { IconButton } from '../ui/icon-button';
 import { XIcon } from '../ui/icon/x-icon';
 import { Text } from '../ui/text';
 import { MovementSheet } from './movement-sheet';
+import { tenderLabel } from './register-count';
 
 /** Margin kept clear above and below the dialog (LEDGER-free layout fix, 2026-09-28 review):
  * a phone-height viewport must never let the panel's top go under the page header. */
@@ -37,6 +38,7 @@ export interface RegisterPanelProps {
  */
 export function RegisterPanel({ register, currency, registerName, open, onOpenChange, className }: RegisterPanelProps) {
   const { session, expected, salesCount, blind, movements, lastClosure, actions } = register;
+  const otherTenders = Object.entries(expected).filter(([method, amount]) => method !== 'cash' && amount !== 0);
   const { height: windowHeight } = useWindowDimensions();
   const maxHeight = Math.max(280, windowHeight - DIALOG_VERTICAL_MARGIN);
   const [movementType, setMovementType] = useState<MovementType | null>(null);
@@ -93,9 +95,20 @@ export function RegisterPanel({ register, currency, registerName, open, onOpenCh
           {!blind && (
             <View testID="register-panel-expected" className="gap-1">
               <Text className="text-muted-foreground text-sm font-semibold">Expected in the drawer</Text>
-              {Object.entries(expected).map(([method, amount]) => (
+              {Object.entries(expected).filter(([method]) => method === 'cash').map(([method, amount]) => (
                 <View key={method} className="min-h-11 flex-row items-center justify-between">
-                  <Text className="capitalize">{method === 'cash' ? 'Cash' : method}</Text>
+                  <Text>{tenderLabel('cash')}</Text>
+                  <Text className="tabular-nums">{formatMoney({ amount, currency })}</Text>
+                </View>
+              ))}
+            </View>
+          )}
+          {!blind && otherTenders.length > 0 && (
+            <View testID="register-panel-other-tenders" className="gap-1">
+              <Text className="text-muted-foreground text-sm font-semibold">Other tenders</Text>
+              {otherTenders.map(([method, amount]) => (
+                <View key={method} className="min-h-11 flex-row items-center justify-between">
+                  <Text>{tenderLabel(method)}</Text>
                   <Text className="tabular-nums">{formatMoney({ amount, currency })}</Text>
                 </View>
               ))}

package/src/sale/cart.tsx

@@ -4,10 +4,16 @@ import { buildReceiptData } from '@tallyui/pos';
 import type { useSale } from '@tallyui/pos';
 import { CartLine, CartLineActions, CartPanel, CartTotal } from '../cart';
 import { DiscountChips, DiscountForm } from './discount-form';
+import { PriceForm } from './price-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 }) {
+export function Cart({ sale, taxLabel = (ratePpm: number) => `Tax ${ratePpm / 10000}%`, canEditPrice = false, onPriceChange }:
+  { sale: ReturnType<typeof useSale>; taxLabel?: (ratePpm: number) => string;
+    /** Shows a Price action on each line. Pass the till's own permission; the control isn't shown without it. */
+    canEditPrice?: boolean;
+    /** Called after a price is applied, for the app's audit log. The reason is kept only here. */
+    onPriceChange?: (change: { lineId: string; fromMinor: number; toMinor: number; reason?: string }) => void;
+  }) {
   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).
@@ -18,14 +24,17 @@ export function Cart({ sale, taxLabel = (ratePpm: number) => `Tax ${ratePpm / 10
   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
+  // One open form: a line's discount or price, or the order's discount (lineId null).
+  const [form, setForm] = useState<{ type: 'discount'; lineId: string | null } | { type: 'price'; lineId: string } | null>(null);
+  const discountForm = (lineId: string | null, title: string) => form?.type === 'discount' && 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 }) }]}>
+    <CartLineActions actions={[
+      { id: 'discount', label: 'Discount', color: 'text-primary', onPress: () => setForm({ type: 'discount', lineId: line.id }) },
+      ...(canEditPrice ? [{ id: 'price', label: 'Price', color: 'text-primary', onPress: () => setForm({ type: 'price', lineId: line.id }) }] : []),
+    ]}>
       <CartLine name={line.name} quantity={line.quantity} unitPrice={money(line.unitPriceMinor)}
         lineTotal={money(display(line.id).amountMinor)} />
     </CartLineActions>
@@ -39,6 +48,14 @@ export function Cart({ sale, taxLabel = (ratePpm: number) => `Tax ${ratePpm / 10
         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}`)}
+    {canEditPrice && form?.type === 'price' && form.lineId === line.id ? <PriceForm key={line.id} lineName={line.name}
+      currency={order.currency} currentMinor={line.unitPriceMinor} onClose={() => setForm(null)}
+      onApply={(amount, reason) => {
+        const fromMinor = line.unitPriceMinor;
+        const refused = sale.setUnitPrice(line.id, amount);
+        if (refused === null) onPriceChange?.({ lineId: line.id, fromMinor, toMinor: amount, reason });
+        return refused;
+      }} /> : null}
   </>;
   return <CartPanel dataSet={{ print: 'hide' }} items={order.lineItems} renderItem={renderItem}
     emptyState={<Text testID="cart-empty" className="px-3 py-2 text-muted-foreground">Scan or tap a product to start a sale.</Text>}
@@ -46,7 +63,7 @@ export function Cart({ sale, taxLabel = (ratePpm: number) => `Tax ${ratePpm / 10
       <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">
+        onPress={() => setForm({ type: 'discount', 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">

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, loading, lastStockCheckAt, hour12, minCodeLength }: {
+export function Catalogue<Doc>({ products, traits, currency, onSelect, statusText, statusAccessory, lastSyncedAt, loading, pullError, lastStockCheckAt, hour12, minCodeLength }: {
   products: Doc[];
   traits: ProductTraits<Doc>;
   currency: string;
@@ -42,9 +42,12 @@ 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
+  /** The catalogue's first pull is still running, so an empty grid says "Loading products…" rather than "No products yet.". Defaults to lastSyncedAt === null with no pullError; pass false
    * when a null lastSyncedAt doesn't mean a pull is running (e.g. offline on first start). */
   loading?: boolean;
+  /** The product pull's last error (an Error, a SyncNotice, anything the app holds), or null/undefined when none. While it is
+   * set, a catalogue that has never synced isn't treated as loading, so its empty grid says "No products yet." beside the app's error. */
+  pullError?: unknown;
   /** 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;
@@ -56,7 +59,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;
+  const isLoading = loading ?? (lastSyncedAt === null && pullError == 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[];

package/src/sale/index.ts

@@ -2,9 +2,11 @@ export { Cart } from './cart';
 export { CartBar } from './cart-bar';
 export { Tender } from './tender';
 export { DiscountForm, DiscountChips, parseDiscount, discountLabel } from './discount-form';
+export { PriceForm, parsePrice } from './price-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';
+export { ParkedSales, type ParkedSalesProps } from './parked-sales';

package/src/sale/parked-sales.tsx

@@ -0,0 +1,103 @@
+import { useState, type JSX } from 'react';
+import { ScrollView, useWindowDimensions, View } from 'react-native';
+import { formatMoney } from '@tallyui/core';
+import type { ParkedOrderSummary, useSale } from '@tallyui/pos';
+import { Button } from '../ui/button';
+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 { formatStockSyncTime } from './catalogue';
+
+/** Pass `useParkedSales(drafts)`'s `parked` and `discard`. */
+export interface ParkedSalesProps {
+  sale: ReturnType<typeof useSale>;
+  parked: ParkedOrderSummary[];
+  onDiscard: (id: string) => Promise<void>;
+  currency: string;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  hour12?: boolean;
+}
+
+export function ParkedSales({ sale, parked, onDiscard, currency, open, onOpenChange, hour12 }: ParkedSalesProps): JSX.Element {
+  const { height: windowHeight } = useWindowDimensions();
+  const maxHeight = Math.max(280, windowHeight - 64);
+  const [confirming, setConfirming] = useState<string | null>(null);
+  const [error, setError] = useState('');
+
+  const attempt = async (action: () => Promise<unknown>) => {
+    setError('');
+    try {
+      await action();
+    } catch (e) {
+      setError(String(e));
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent testID="parked-sales" className="flex-col overflow-hidden" style={{ maxHeight }}>
+        <View className="flex-row items-center justify-between gap-2">
+          <DialogTitle>Parked sales</DialogTitle>
+          <DialogClose asChild>
+            <IconButton variant="ghost" size="sm" testID="parked-sales-dismiss" accessibilityLabel="Close panel">
+              <XIcon size={16} />
+            </IconButton>
+          </DialogClose>
+        </View>
+        <ScrollView className="flex-1" contentContainerClassName="gap-3">
+          <Button testID="parked-sales-park" accessibilityLabel="Park this sale"
+            disabled={sale.order.lineItems.length === 0}
+            onPress={() => attempt(async () => setError((await sale.park()) ?? ''))}>
+            <Text>Park this sale</Text>
+          </Button>
+          {!!error && <Text testID="parked-sales-error" className="text-destructive">{error}</Text>}
+          {parked.length === 0 && <Text testID="parked-sales-empty">No parked sales.</Text>}
+          {parked.map((row) => (
+            <View key={row.id} testID={`parked-row-${row.id}`} className="gap-2 rounded-md border border-border p-3">
+              {confirming === row.id ? (
+                <>
+                  <Text>Discard this parked sale?</Text>
+                  <View className="flex-row gap-2">
+                    <Button testID={`parked-discard-confirm-${row.id}`} variant="destructive"
+                      onPress={() => attempt(async () => {
+                        await onDiscard(row.id);
+                        setConfirming(null);
+                      })}>
+                      <Text>Discard</Text>
+                    </Button>
+                    <Button testID={`parked-discard-cancel-${row.id}`} variant="outline" onPress={() => setConfirming(null)}>
+                      <Text>Cancel</Text>
+                    </Button>
+                  </View>
+                </>
+              ) : (
+                <>
+                  <Text>{formatStockSyncTime(new Date(row.parkedAt), undefined, hour12)}</Text>
+                  <Text>{row.itemCount} {row.itemCount === 1 ? 'item' : 'items'}</Text>
+                  <Text>{formatMoney({ amount: row.totalMinor, currency })}</Text>
+                  {!!row.customerName && <Text>{row.customerName}</Text>}
+                  <View className="flex-row gap-2">
+                    <Button testID={`parked-resume-${row.id}`} accessibilityLabel="Resume parked sale"
+                      onPress={() => attempt(async () => {
+                        const refusal = await sale.resume(row.id);
+                        if (refusal === null) onOpenChange(false);
+                        else setError(refusal);
+                      })}>
+                      <Text>Resume</Text>
+                    </Button>
+                    <Button testID={`parked-discard-${row.id}`} accessibilityLabel="Discard parked sale"
+                      variant="outline" onPress={() => setConfirming(row.id)}>
+                      <Text>Discard</Text>
+                    </Button>
+                  </View>
+                </>
+              )}
+            </View>
+          ))}
+        </ScrollView>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/sale/price-form.tsx

@@ -0,0 +1,51 @@
+import { useState, type JSX } from 'react';
+import { Pressable, Text, TextInput, View } from 'react-native';
+import { formatMoney, minorUnitDigits, moneyFromDecimalString } from '@tallyui/core';
+
+/** The cashier's entry as integer minor units of `currency` (0 allowed), or the inline error to show. */
+export function parsePrice(text: string, currency: string): number | string {
+  const raw = text.trim();
+  const trimmed = raw.split(',').length === 2 ? raw.replace(',', '.') : raw;
+  if (!trimmed) return 'Enter a price.';
+  if (!/^-?\d+(\.\d+)?$/.test(trimmed)) return 'Enter a number.';
+  if (Number(trimmed) < 0) return 'Enter a price of 0 or more.';
+  const digits = Math.min(2, minorUnitDigits(currency));
+  if ((trimmed.split('.')[1]?.length ?? 0) > digits) return digits ? `Use at most ${digits} decimal places.` : 'Use a whole amount.';
+  return moneyFromDecimalString(trimmed, currency)?.amount ?? 'Enter a number.';
+}
+
+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, or null once applied. */
+export function PriceForm({ lineName, currency, currentMinor, onApply, onClose }: {
+  lineName: string; currency: string; currentMinor: number;
+  onApply: (amountMinor: number, reason?: string) => string | null; onClose: () => void;
+}): JSX.Element {
+  const [text, setText] = useState('');
+  const [reason, setReason] = useState('');
+  const [error, setError] = useState<string | null>(null);
+  const title = `Price for ${lineName}`;
+  function apply() {
+    const parsed = parsePrice(text, currency);
+    const refused = typeof parsed === 'string' ? parsed : onApply(parsed, reason.trim() || undefined);
+    setError(refused);
+    if (refused === null) onClose();
+  }
+  return <View testID="price-form" role="group" accessibilityLabel={title} className="gap-2 px-3 py-2">
+    <Text className="font-semibold text-foreground">{title}</Text>
+    <Text className="text-muted-foreground">{formatMoney({ amount: currentMinor, currency })}</Text>
+    <TextInput testID="price-input" accessibilityLabel="Price value" value={text} onChangeText={setText}
+      onSubmitEditing={apply} inputMode="decimal" placeholder={currency}
+      className="min-w-0 rounded-md border border-border bg-background px-3 py-2 text-foreground" />
+    <TextInput testID="price-reason" accessibilityLabel="Reason (optional)" placeholder="Reason (optional)"
+      value={reason} onChangeText={setReason}
+      className="min-w-0 rounded-md border border-border bg-background px-3 py-2 text-foreground" />
+    {error ? <Text testID="price-error" accessibilityRole="alert" className="text-destructive">{error}</Text> : null}
+    <View className="flex-row gap-2">
+      <Pressable testID="price-apply" accessibilityRole="button" onPress={apply} className={`${button} bg-primary`}>
+        <Text className="font-semibold text-primary-foreground">Apply</Text></Pressable>
+      <Pressable testID="price-cancel" accessibilityRole="button" onPress={onClose} className={`${button} bg-card`}>
+        <Text className="text-foreground">Cancel</Text></Pressable>
+    </View>
+  </View>;
+}