@tallyui/components 3.3.0 → 3.4.0

package/package.json

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

package/src/index.ts

@@ -156,6 +156,7 @@ export {
 export {
   Cart, CartBar, Tender, SplitTender, DiscountForm, DiscountChips, parseDiscount, discountLabel,
   PriceForm, parsePrice,
+  ChargeForm, type ChargeFormProps,
   Catalogue, formatStockSyncTime, Receipt, injectPrintStyle, SyncStatus, OrdersList, orderReference,
   ParkedSales, type ParkedSalesProps,
 } from './sale';

package/src/sale/cart.tsx

@@ -1,14 +1,17 @@
 import { useState } from 'react';
 import { Pressable, Text, View } from 'react-native';
+import { formatMoney } from '@tallyui/core';
 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';
+import { ChargeForm } from './charge-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}%`, canEditPrice = false, onPriceChange }:
+export function Cart({ sale, taxLabel = (ratePpm: number) => `Tax ${ratePpm / 10000}%`, canEditPrice = false, onPriceChange, taxClasses }:
   { sale: ReturnType<typeof useSale>; taxLabel?: (ratePpm: number) => string;
+    taxClasses?: ReadonlyArray<{ id: string; label: 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. */
@@ -24,8 +27,9 @@ 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 }] : [];
-  // 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);
+  // One open form: a line's discount or price, the order's discount (lineId null), or a charge.
+  const [form, setForm] = useState<{ type: 'discount'; lineId: string | null } | { type: 'price'; lineId: string } | { type: 'charge' } | null>(null);
+  const chargesOffered = (sale.capabilities?.orderCreate ?? 0) >= 5;
   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;
@@ -59,13 +63,35 @@ export function Cart({ sale, taxLabel = (ratePpm: number) => `Tax ${ratePpm / 10
   </>;
   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>}
-    afterItems={order.lineItems.length ? <View className="gap-3 px-3 py-2">
+    afterItems={<>
+      {(['fees', 'shipping'] as const).map((kind) => order[kind]?.map((charge, index) =>
+        <View key={charge.id} testID={`cart-${kind === 'fees' ? 'fee' : 'shipping'}-${index}`} className="flex-row items-center gap-3 px-3 py-2">
+          <Text className="flex-1 text-foreground">{charge.name}</Text>
+          <Text className="text-foreground">{formatMoney(money(order.display[kind]!.find((row) => row.id === charge.id)!.amountMinor))}</Text>
+          <Pressable accessibilityRole="button" accessibilityLabel={`Remove ${charge.name}`}
+            onPress={() => kind === 'fees' ? sale.removeFee(charge.id) : sale.removeShipping(charge.id)}
+            className="rounded-md border border-border bg-card px-3 py-2 min-h-11 items-center justify-center">
+            <Text className="text-foreground">Remove</Text></Pressable>
+        </View>))}
+      {order.lineItems.length || chargesOffered ? <View className="gap-3 px-3 py-2">
+      {order.lineItems.length ? <>
       <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"
+      {form?.type === 'discount' && form.lineId === null ? discountForm(null, 'Order discount') : <Pressable accessibilityRole="button"
         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}
+      </> : null}
+      {chargesOffered ? form?.type === 'charge' ? <ChargeForm currency={order.currency} lineTax={sale.capabilities?.lineTax}
+        taxClasses={taxClasses} shippingTaxFromStore={sale.capabilities?.taxRounding?.granularity === 'woocommerce'}
+        onClose={() => setForm(null)} onApply={({ kind, name, amountMinor, taxStatus, taxClass }) => {
+          const result = kind === 'custom' ? sale.addCustomLine({ name, priceMinor: amountMinor, taxStatus, taxClass })
+            : kind === 'fee' ? sale.addFee({ name, amountMinor, taxStatus, taxClass })
+              : sale.addShipping({ name, amountMinor, taxStatus, taxClass });
+          return typeof result === 'string' ? result : null;
+        }} /> : <Pressable accessibilityRole="button" onPress={() => setForm({ type: 'charge' })}
+        className="self-start rounded-md border border-border bg-card px-4 py-2 min-h-11 justify-center">
+        <Text className="text-foreground">Add charge</Text></Pressable> : null}
+    </View> : null}</>}
     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)}

package/src/sale/charge-form.tsx

@@ -0,0 +1,71 @@
+import { useState } from 'react';
+import { Pressable, Text, TextInput, View } from 'react-native';
+import { parsePrice } from './price-form';
+
+export interface ChargeFormProps {
+  currency: string;
+  lineTax?: { none: boolean; classes: boolean };
+  taxClasses?: ReadonlyArray<{ id: string; label: string }>;
+  shippingTaxFromStore?: boolean;
+  onApply: (charge: { kind: 'fee' | 'shipping' | 'custom'; name: string; amountMinor: number;
+    taxStatus?: 'none'; taxClass?: string }) => string | null;
+  onClose: () => void;
+}
+
+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 ChargeForm({ currency, lineTax, taxClasses, shippingTaxFromStore, onApply, onClose }: ChargeFormProps) {
+  const [kind, setKind] = useState<'fee' | 'shipping' | 'custom'>('fee');
+  const [name, setName] = useState('');
+  const [text, setText] = useState('');
+  const [noTax, setNoTax] = useState(false);
+  const [taxClass, setTaxClass] = useState('');
+  const [error, setError] = useState<string | null>(null);
+  const storeShipping = kind === 'shipping' && shippingTaxFromStore;
+  function apply() {
+    const parsed = parsePrice(text, currency);
+    const refused = !name.trim() ? 'Enter a name.' : typeof parsed === 'string' ? parsed : onApply({
+      kind, name: name.trim(), amountMinor: parsed,
+      taxStatus: !storeShipping && lineTax?.none && noTax ? 'none' : undefined,
+      taxClass: !storeShipping && lineTax?.classes && taxClasses?.length ? taxClass || undefined : undefined,
+    });
+    setError(refused);
+    if (refused === null) onClose();
+  }
+  return <View testID="charge-form" role="group" accessibilityLabel="Add charge" className="gap-2 px-3 py-2">
+    <Text className="font-semibold text-foreground">Add charge</Text>
+    <View className="flex-row gap-2">
+      {(['fee', 'shipping', 'custom'] as const).map((option) => <Pressable key={option} accessibilityRole="button"
+        accessibilityState={{ selected: kind === option }} aria-selected={kind === option} onPress={() => setKind(option)}
+        className={`${button} ${kind === option ? 'bg-primary' : 'bg-card'}`}>
+        <Text className={kind === option ? 'text-primary-foreground' : 'text-foreground'}>
+          {option === 'fee' ? 'Fee' : option === 'shipping' ? 'Shipping' : 'Custom item'}</Text>
+      </Pressable>)}
+    </View>
+    <TextInput accessibilityLabel="Name" placeholder="Name" value={name} onChangeText={setName}
+      className="min-w-0 rounded-md border border-border bg-background px-3 py-2 text-foreground" />
+    <TextInput accessibilityLabel="Amount" 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" />
+    {storeShipping ? <Text className="text-muted-foreground">Shipping is taxed at the store's shipping tax class.</Text> : <>
+      {lineTax?.none ? <Pressable accessibilityRole="switch" accessibilityLabel="No tax"
+        accessibilityState={{ checked: noTax }} aria-checked={noTax} onPress={() => setNoTax(!noTax)} className={`${button} ${noTax ? 'bg-primary' : 'bg-card'}`}>
+        <Text className={noTax ? 'text-primary-foreground' : 'text-foreground'}>No tax</Text></Pressable> : null}
+      {lineTax?.classes && taxClasses?.length ? <View role="group" accessibilityLabel="Tax class" className="flex-row flex-wrap gap-2">
+        {[{ id: '', label: 'No class' }, ...taxClasses].map((option) => <Pressable key={option.id} accessibilityRole="button"
+          accessibilityState={{ selected: taxClass === option.id }} aria-selected={taxClass === option.id} onPress={() => setTaxClass(option.id)}
+          className={`${button} ${taxClass === option.id ? 'bg-primary' : 'bg-card'}`}>
+          <Text className={taxClass === option.id ? 'text-primary-foreground' : 'text-foreground'}>{option.label}</Text>
+        </Pressable>)}
+      </View> : null}
+    </>}
+    {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>;
+}

package/src/sale/index.ts

@@ -4,6 +4,7 @@ export { Tender } from './tender';
 export { SplitTender } from './split-tender';
 export { DiscountForm, DiscountChips, parseDiscount, discountLabel } from './discount-form';
 export { PriceForm, parsePrice } from './price-form';
+export { ChargeForm, type ChargeFormProps } from './charge-form';
 export { Catalogue, formatStockSyncTime } from './catalogue';
 export { Receipt } from './receipt';
 export { orderReference } from './order-reference';

package/src/sale/receipt.tsx

@@ -50,6 +50,8 @@ export function Receipt({ order, posOrder, store, cashier, registerId, newSale,
     </View>)}
     {/* 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). */}
+    {receipt.fees.map((charge, index) => row(charge.name, money(charge.amountMinor), false, index))}
+    {receipt.shipping.map((charge, index) => row(charge.name, money(charge.amountMinor), false, index))}
     {row('Subtotal', money(totals.subtotalMinor))}
     {lineDiscountMinor > 0 ? row('Line discounts', `−${money(lineDiscountMinor)}`) : null}
     {receipt.orderDiscountMinor > 0 ? row('Order discount', `−${money(receipt.orderDiscountMinor)}`) : null}