@tallyui/components 1.0.0 → 2.0.0

package/src/register/open-register-card.tsx

@@ -0,0 +1,109 @@
+import { useState } from 'react';
+import { View } from 'react-native';
+import type { useRegisterSession } from '@tallyui/pos';
+import { parseMinor, validAmount } from '@tallyui/pos';
+
+import { currencySymbol, formatMoney, minorUnitDigits } from '@tallyui/core';
+import { cn } from '@tallyui/theme';
+import { Button } from '../ui/button';
+import { Input } from '../ui/input';
+import { Label } from '../ui/label';
+import { Text } from '../ui/text';
+
+const AMOUNT_LABEL_ID = 'open-register-amount-label';
+
+export interface OpenRegisterCardProps {
+  /** `useRegisterSession`'s return value: opens the session through `register.actions.openSession`. */
+  register: ReturnType<typeof useRegisterSession>;
+  /** ISO 4217 code, for parsing and formatting the typed amount. */
+  currency: string;
+  /** The store's configured opening float, minor units; preferred over the last counted cash. */
+  configuredFloatMinor?: number | null;
+  className?: string;
+}
+
+/**
+ * Opens a register session, prefilled with the configured float or the last counted cash.
+ * Port provenance (ADR-032 amendment 1): WCPOS `next` `3b5331b5c` `open-register-card.tsx`
+ * (LEDGER 52).
+ *
+ * The chip choices are already resolved once `expectedFloatMinor` is computed: a late-arriving
+ * `configuredFloatMinor` or `register.lastClosure` never overwrites what the cashier already
+ * typed, because `enteredAmount` only ever starts from it, never re-derives from it.
+ */
+export function OpenRegisterCard({ register, currency, configuredFloatMinor, className }: OpenRegisterCardProps) {
+  const digits = minorUnitDigits(currency);
+  const lastCountedMinor = register.lastClosure?.counted?.cash ?? null;
+  const expectedFloatMinor = configuredFloatMinor ?? lastCountedMinor ?? null;
+  const [enteredAmount, setEnteredAmount] = useState<string | null>(null);
+  const amount = enteredAmount ?? (expectedFloatMinor != null ? decimal(expectedFloatMinor, digits) : '');
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState('');
+  const valid = validAmount(amount, digits);
+  const countedMinor = valid ? parseMinor(amount, digits) : NaN;
+  const open = async () => {
+    if (busy || !valid) return;
+    setBusy(true);
+    setError('');
+    try {
+      await register.actions.openSession({ expectedFloatMinor, countedFloatMinor: countedMinor });
+    } catch (e) {
+      setError(String(e));
+    } finally {
+      setBusy(false);
+    }
+  };
+  const amountLabel = `Cash in the drawer to start (${currencySymbol(currency)})`;
+  return (
+    <View testID="open-register-card" className={cn('bg-card gap-3 rounded-md p-4', className)}>
+      <Text className="text-lg font-semibold">Open register</Text>
+      <Label testID="open-register-amount-label" nativeID={AMOUNT_LABEL_ID}>
+        {amountLabel}
+      </Label>
+      <Input>
+        <Input.Field
+          testID="open-register-amount"
+          value={amount}
+          onChangeText={setEnteredAmount}
+          keyboardType="decimal-pad"
+          accessibilityLabel={amountLabel}
+          accessibilityLabelledBy={AMOUNT_LABEL_ID}
+        />
+      </Input>
+      {configuredFloatMinor != null && (
+        <Button
+          testID="open-register-chip-configured"
+          variant="outline"
+          className="min-h-11"
+          onPress={() => setEnteredAmount(decimal(configuredFloatMinor, digits))}
+        >
+          <Text>Use the configured float ({formatMoney({ amount: configuredFloatMinor, currency })})</Text>
+        </Button>
+      )}
+      {lastCountedMinor != null && (
+        <Button
+          testID="open-register-chip-last"
+          variant="outline"
+          className="min-h-11"
+          onPress={() => setEnteredAmount(decimal(lastCountedMinor, digits))}
+        >
+          <Text>Use the last counted cash ({formatMoney({ amount: lastCountedMinor, currency })})</Text>
+        </Button>
+      )}
+      {expectedFloatMinor !== null && valid && countedMinor !== expectedFloatMinor && (
+        <Text testID="opening-variance">
+          {formatMoney({ amount: countedMinor - expectedFloatMinor, currency })} vs the expected float
+        </Text>
+      )}
+      {!!error && <Text className="text-destructive">{error}</Text>}
+      <Button testID="open-register-button" className="min-h-14" disabled={busy || !valid} onPress={open}>
+        <Text>{busy ? 'Opening…' : 'Open register'}</Text>
+      </Button>
+    </View>
+  );
+}
+
+function decimal(minor: number, digits: number): string {
+  const scale = 10 ** digits;
+  return (minor / scale).toFixed(digits);
+}

package/src/register/register-bar.helpers.ts

@@ -0,0 +1,57 @@
+/**
+ * The register bar's status pill: one pill, one place. Port provenance (ADR-032 amendment 1):
+ * WCPOS `next` `3b5331b5c` `register-bar.helpers.ts` (LEDGER 48).
+ *
+ * Neutral changes: WCPOS decides "choosing a register" from a WooCommerce binding status
+ * (`bindingStatus: 'bound' | 'choose' | 'none' | 'unknown'`) and folds the store's display name
+ * into `place`. TallyUI's binding is entirely the app's own (ADR-032 amendment 1's "Not ported"
+ * note), so this takes the plain `registerId` the app already passes to `useRegisterSession`
+ * (`null` means unbound) instead, and drops the store name — RegisterBar here shows only the
+ * register name (`multiRegister` decides whether that's shown at all) and the status pill.
+ * Copy is plain English (no i18n keys, ADR-064's neutral-copy rule).
+ */
+
+export type RegisterBarPill =
+  | 'Choose a register'
+  | 'Close not finished'
+  | 'Offline'
+  | 'Approval needed'
+  | 'Counting'
+  | 'Overdue'
+  | 'Register closed';
+
+/**
+ * Priority, matching WCPOS's ordering: choosing a register outranks everything (LEDGER 48);
+ * then a closed session whose close isn't in flight (TallyUI: it blocks selling until Finish
+ * closing); then an unreachable store reads as offline, ahead of any session state; approval needed
+ * outranks plain counting; an open, overdue session outranks a session-less "closed" pill.
+ */
+export function describeRegisterBarPill({
+  registerId,
+  online,
+  sessionStatus,
+  overdue = false,
+  approvalRequired = false,
+  sessionsOn = false,
+  closing = false,
+}: {
+  /** The register this till is bound to, or `null` when it isn't bound yet. */
+  registerId: string | null;
+  online: boolean;
+  sessionStatus?: 'open' | 'counting' | 'closed' | null;
+  overdue?: boolean;
+  approvalRequired?: boolean;
+  /** The store uses register sessions at all (`useRegisterSession`'s `enabled`). */
+  sessionsOn?: boolean;
+  /** A close is in flight (`useRegisterSession`'s `closing`), so a closed session isn't unfinished. */
+  closing?: boolean;
+}): RegisterBarPill | null {
+  if (registerId === null) return 'Choose a register';
+  if (sessionStatus === 'closed' && !closing) return 'Close not finished';
+  if (!online) return 'Offline';
+  if (sessionStatus === 'counting' && !approvalRequired) return 'Counting';
+  if (approvalRequired) return 'Approval needed';
+  if (sessionStatus === 'open' && overdue) return 'Overdue';
+  if (sessionsOn && !sessionStatus) return 'Register closed';
+  return null;
+}

package/src/register/register-bar.tsx

@@ -0,0 +1,85 @@
+import { Pressable, View } from 'react-native';
+import type { useRegisterSession } from '@tallyui/pos';
+
+import { cn } from '@tallyui/theme';
+import { Badge } from '../ui/badge';
+import { Button } from '../ui/button';
+import { HStack } from '../ui/hstack';
+import { Text } from '../ui/text';
+import { describeRegisterBarPill } from './register-bar.helpers';
+
+export interface RegisterBarProps {
+  /** `useRegisterSession`'s return value: the session's status, `overdue`, `enabled` and so on. */
+  register: ReturnType<typeof useRegisterSession>;
+  /** The register this till is bound to, or `null` when no register is chosen yet. */
+  registerId: string | null;
+  /** `false` when the store, or the app itself, can't be reached — reads to the cashier as offline. */
+  online: boolean;
+  /** Hidden when `multiRegister` is `false`: a single-register store doesn't need to name it. */
+  registerName?: string;
+  multiRegister: boolean;
+  onOpenPanel: () => void;
+  /** Turns the pill into a button (opens the gate/picker or the panel) when given; the plain badge otherwise. */
+  onPressPill?: () => void;
+  className?: string;
+}
+
+/**
+ * The till's one status bar: which register (multi-register stores only), one status pill
+ * (LEDGER 48), and the button that opens the register panel. Port provenance (ADR-032 amendment
+ * 1): WCPOS `next` `3b5331b5c` `register-bar.tsx`.
+ *
+ * Dropped for this neutral port: the user avatar and user sheet, switch-store, and the
+ * WooCommerce OAuth-return rehosting — all app/backend concerns `useRegisterSession` never
+ * carries. The drawer/menu button is gone too: TallyUI has no fixed navigation shell to open.
+ */
+export function RegisterBar({
+  register,
+  registerId,
+  online,
+  registerName,
+  multiRegister,
+  onOpenPanel,
+  onPressPill,
+  className,
+}: RegisterBarProps) {
+  const { session, overdue, enabled, lastClosure, closing } = register;
+  const pill = describeRegisterBarPill({
+    registerId,
+    online,
+    sessionStatus: session?.status ?? null,
+    overdue,
+    approvalRequired: session?.approval_required,
+    sessionsOn: enabled,
+    closing,
+  });
+  return (
+    <HStack testID="register-bar" className={cn('bg-card border-border h-12 border-b px-3', className)}>
+      <View className="min-w-0 flex-1 shrink">
+        {multiRegister && registerId !== null && (
+          <Text testID="register-bar-name" numberOfLines={1}>
+            {registerName}
+          </Text>
+        )}
+      </View>
+      {pill && (onPressPill ? (
+        <Pressable testID="register-bar-pill" accessibilityRole="button" accessibilityLabel={pill} onPress={onPressPill}>
+          <Badge label={pill} variant="warning" />
+        </Pressable>
+      ) : (
+        <Badge testID="register-bar-pill" label={pill} variant="warning" />
+      ))}
+      {(session || lastClosure) && (
+        <Button
+          variant="ghost"
+          size="sm"
+          testID="register-bar-open-panel"
+          accessibilityLabel="Open register panel"
+          onPress={onOpenPanel}
+        >
+          <Text className={overdue ? 'text-warning' : undefined}>Register ›</Text>
+        </Button>
+      )}
+    </HStack>
+  );
+}

package/src/register/register-column.tsx

@@ -0,0 +1,117 @@
+import { useState, type ReactNode } from 'react';
+import { View } from 'react-native';
+import type { useRegisterSession } from '@tallyui/pos';
+
+import { Button } from '../ui/button';
+import { Text } from '../ui/text';
+import { OpenRegisterCard } from './open-register-card';
+import { RegisterPicker, type RegisterPickerRegister } from './register-picker';
+
+export interface RegisterColumnProps {
+  /** `useRegisterSession`'s return value: decides the picker/open/counting/selling swap. */
+  register: ReturnType<typeof useRegisterSession>;
+  /** The register this till is bound to, the same value passed into `useRegisterSession`; `null`
+   * means unbound, since the hook's own return carries no such field (it's the app's input, not
+   * its output). */
+  registerId: string | null;
+  registers: RegisterPickerRegister[];
+  onPick: (id: string) => void;
+  /** ISO 4217 code, forwarded to `OpenRegisterCard`. */
+  currency: string;
+  configuredFloatMinor?: number | null;
+  /** Rendered instead of `children` while a session is counting (Job B fills this), and while its close is in flight
+   * (`register.closing`). A closed session that isn't closing shows the Finish-closing card instead, whose button has
+   * `nativeID="register-column-finish-close-button"`, so an app's `onPressPill` can focus it on the web. */
+  countSlot?: ReactNode;
+  /** Whether the cart has no lines; gates the overdue Close register offer (LEDGER 53). */
+  cartEmpty?: boolean;
+  /** The cart, shown once a register is bound, open, and not counting. */
+  children: ReactNode;
+}
+
+/**
+ * Swaps the cart column's content for register selection, opening or counting when the till
+ * needs it, offering Close register when an open session runs overdue with nothing left to
+ * sell. Port provenance (ADR-032 amendment 1): WCPOS `next` `3b5331b5c`'s cart-column register
+ * swap (LEDGER 53), composed here as one small component rather than inline cart-screen logic.
+ */
+export function RegisterColumn({
+  register,
+  registerId,
+  registers,
+  onPick,
+  currency,
+  configuredFloatMinor,
+  countSlot,
+  cartEmpty,
+  children,
+}: RegisterColumnProps) {
+  const [finishing, setFinishing] = useState(false); // Lifted, so the card stays up through its own close.
+  if (registerId === null) {
+    return <RegisterPicker registers={registers} onPick={onPick} className="flex-1" />;
+  }
+  if (register.session?.status === 'closed') {
+    // A close in flight stores the session closed before its closure lands: unless the card started it, not an unfinished close.
+    return register.closing && !finishing ? <>{countSlot}</> : <FinishClose register={register} busy={finishing} setBusy={setFinishing} />;
+  }
+  if (!register.session) {
+    return <OpenRegisterCard register={register} currency={currency} configuredFloatMinor={configuredFloatMinor} className="flex-1" />;
+  }
+  if (register.session.status === 'counting') {
+    return <>{countSlot}</>;
+  }
+  return (
+    <View testID="register-column" className="flex-1">
+      {register.overdue && cartEmpty && (
+        <View testID="register-column-overdue" className="bg-warning/10 flex-row items-center justify-between gap-2 px-3 py-2">
+          <Text className="flex-1">This register is overdue for closing.</Text>
+          <Button
+            testID="register-column-close-overdue"
+            variant="outline"
+            className="min-h-11"
+            onPress={() => register.actions.startCounting()}
+          >
+            <Text>Close register</Text>
+          </Button>
+        </View>
+      )}
+      {children}
+    </View>
+  );
+}
+
+/**
+ * `currentSession` (`use-register-session.ts` ~110-125) can return a closed session whose closure
+ * row was never written: an unapplied reservation's session, or a closed session with no closure
+ * row. `openSession` then refuses with `RegisterCloseIncompleteError`, so the cashier is stuck
+ * behind the cart unless this offers a way to resume the close.
+ */
+function FinishClose({ register, busy, setBusy }: { register: ReturnType<typeof useRegisterSession>; busy: boolean; setBusy: (busy: boolean) => void }) {
+  const [error, setError] = useState('');
+  const finish = async () => {
+    setBusy(true);
+    setError('');
+    try {
+      // A resumed close: the store keeps the count persisted on the session (a retry's count is
+      // ignored for a session already closed), and the approval gate doesn't run again.
+      await register.actions.closeSession({ counted: register.session?.counted ?? {} });
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e));
+    } finally {
+      setBusy(false);
+    }
+  };
+  return (
+    <View testID="register-column-finish-close" className="flex-1 gap-3 p-4">
+      <Text>The last close didn&apos;t finish.</Text>
+      <Button testID="register-column-finish-close-button" nativeID="register-column-finish-close-button" disabled={busy} onPress={finish}>
+        <Text>Finish closing</Text>
+      </Button>
+      {!!error && (
+        <Text testID="register-column-finish-close-error" className="text-destructive">
+          {error}
+        </Text>
+      )}
+    </View>
+  );
+}