@voyantjs/finance-ui 0.19.0 → 0.21.0

package/dist/components/payment-policy-form.d.ts

@@ -0,0 +1,49 @@
+import { type PaymentPolicy } from "@voyantjs/finance";
+import * as React from "react";
+/**
+ * Reusable payment-policy editor.
+ *
+ * Renders the deposit kind toggle (None / Percent / Fixed amount), the
+ * conditional deposit value input, and the three day-window controls
+ * (deposit gate, balance offset, balance grace). When `inheritable`
+ * is true (the default for non-operator-default layers), an "Inherit
+ * from parent" toggle is shown — flipping it on writes `null` and
+ * disables the rest of the form.
+ *
+ * Controlled component: parent owns the value via `value` / `onChange`.
+ * The bundled `<PaymentPolicyPreview />` reads the same value so you
+ * can render the live preview alongside the form.
+ */
+export interface PaymentPolicyFormProps {
+    /** Current value. `null` means "inherit from parent". */
+    value: PaymentPolicy | null;
+    onChange: (next: PaymentPolicy | null) => void;
+    /**
+     * When true, shows the "Inherit from parent" toggle. Operator-
+     * default forms set this to false (no parent to inherit from).
+     */
+    inheritable?: boolean;
+    /** Currency used for the fixed-amount deposit input + the preview. */
+    currency?: string;
+    /** Disabled by ancestor (e.g. while the mutation is in flight). */
+    disabled?: boolean;
+    className?: string;
+}
+export declare function PaymentPolicyForm({ value, onChange, inheritable, currency, disabled, className, }: PaymentPolicyFormProps): React.ReactElement;
+/**
+ * Live preview of what the policy will produce on a sample booking.
+ * Pair with `<PaymentPolicyForm />` so the operator sees the
+ * deposit + balance amounts shift in real time as they tweak the
+ * fields.
+ */
+export interface PaymentPolicyPreviewProps {
+    policy: PaymentPolicy | null;
+    currency?: string;
+    /** Total used for the preview math. Default 1,000.00 in major units. */
+    sampleTotalCents?: number;
+    /** Days before departure to use for the preview. Default 60. */
+    sampleDaysBeforeDeparture?: number;
+    className?: string;
+}
+export declare function PaymentPolicyPreview({ policy, currency, sampleTotalCents, sampleDaysBeforeDeparture, className, }: PaymentPolicyPreviewProps): React.ReactElement;
+//# sourceMappingURL=payment-policy-form.d.ts.map

package/dist/components/payment-policy-form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"payment-policy-form.d.ts","sourceRoot":"","sources":["../../src/components/payment-policy-form.tsx"],"names":[],"mappings":"AAEA,OAAO,EAIL,KAAK,aAAa,EACnB,MAAM,mBAAmB,CAAA;AAG1B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B;;;;;;;;;;;;;GAaG;AACH,MAAM,WAAW,sBAAsB;IACrC,yDAAyD;IACzD,KAAK,EAAE,aAAa,GAAG,IAAI,CAAA;IAC3B,QAAQ,EAAE,CAAC,IAAI,EAAE,aAAa,GAAG,IAAI,KAAK,IAAI,CAAA;IAC9C;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,sEAAsE;IACtE,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,mEAAmE;IACnE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AASD,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,QAAQ,EACR,WAAkB,EAClB,QAAgB,EAChB,QAAQ,EACR,SAAS,GACV,EAAE,sBAAsB,GAAG,KAAK,CAAC,YAAY,CAgL7C;AA8BD;;;;;GAKG;AACH,MAAM,WAAW,yBAAyB;IACxC,MAAM,EAAE,aAAa,GAAG,IAAI,CAAA;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,wEAAwE;IACxE,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,gEAAgE;IAChE,yBAAyB,CAAC,EAAE,MAAM,CAAA;IAClC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,oBAAoB,CAAC,EACnC,MAAM,EACN,QAAgB,EAChB,gBAA0B,EAC1B,yBAA8B,EAC9B,SAAS,GACV,EAAE,yBAAyB,GAAG,KAAK,CAAC,YAAY,CAgDhD"}

package/dist/components/payment-policy-form.js

@@ -0,0 +1,82 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { computePaymentSchedule, noDepositPolicy, } from "@voyantjs/finance";
+import { Input, Label, RadioGroup, RadioGroupItem, Switch } from "@voyantjs/ui/components";
+import { cn } from "@voyantjs/ui/lib/utils";
+import * as React from "react";
+const DEFAULT_POLICY = {
+    deposit: { kind: "percent", percent: 50 },
+    minDaysBeforeDepartureForDeposit: 30,
+    balanceDueDaysBeforeDeparture: 30,
+    balanceDueMinDaysFromNow: 7,
+};
+export function PaymentPolicyForm({ value, onChange, inheritable = true, currency = "EUR", disabled, className, }) {
+    const isInheriting = value === null;
+    const policy = value ?? noDepositPolicy;
+    const setPolicyField = (key, next) => {
+        onChange({ ...(value ?? DEFAULT_POLICY), [key]: next });
+    };
+    return (_jsxs("div", { className: cn("space-y-5", className), children: [inheritable ? (_jsxs("div", { className: "flex items-start gap-3 rounded-md border bg-muted/20 p-3", children: [_jsx(Switch, { id: "payment-policy-inherit", checked: isInheriting, onCheckedChange: (checked) => {
+                            if (checked) {
+                                onChange(null);
+                            }
+                            else {
+                                onChange(value ?? DEFAULT_POLICY);
+                            }
+                        }, disabled: disabled }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { htmlFor: "payment-policy-inherit", className: "text-sm font-medium", children: "Inherit from parent" }), _jsx("p", { className: "text-muted-foreground text-xs", children: "When on, this layer falls back to the next-broader policy (operator default, category, supplier, \u2026). Switch off to set an explicit policy here." })] })] })) : null, _jsxs("fieldset", { disabled: disabled || isInheriting, className: "space-y-5 disabled:opacity-60", children: [_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { className: "text-sm font-medium", children: "Deposit" }), _jsxs(RadioGroup, { value: policy.deposit.kind, onValueChange: (kind) => {
+                                    if (kind === "none") {
+                                        setPolicyField("deposit", { kind: "none" });
+                                    }
+                                    else if (kind === "percent") {
+                                        setPolicyField("deposit", {
+                                            kind: "percent",
+                                            percent: policy.deposit.percent ?? 50,
+                                        });
+                                    }
+                                    else if (kind === "fixed_cents") {
+                                        setPolicyField("deposit", {
+                                            kind: "fixed_cents",
+                                            amountCents: policy.deposit.amountCents ?? 10_000,
+                                        });
+                                    }
+                                }, className: "grid grid-cols-1 gap-2 md:grid-cols-3", children: [_jsx(DepositKindOption, { value: "none", label: "None", hint: "Customer pays the full amount up-front.", checked: policy.deposit.kind === "none" }), _jsx(DepositKindOption, { value: "percent", label: "Percent of total", hint: "e.g. 50% deposit at booking.", checked: policy.deposit.kind === "percent" }), _jsx(DepositKindOption, { value: "fixed_cents", label: "Fixed amount", hint: "A flat per-booking amount.", checked: policy.deposit.kind === "fixed_cents" })] }), policy.deposit.kind === "percent" ? (_jsx("div", { className: "grid grid-cols-1 gap-3 pt-2 md:grid-cols-2", children: _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { htmlFor: "payment-policy-percent", children: "Deposit percent" }), _jsx(Input, { id: "payment-policy-percent", type: "number", min: 0, max: 100, step: 1, value: policy.deposit.percent ?? 50, onChange: (e) => setPolicyField("deposit", {
+                                                kind: "percent",
+                                                percent: Number(e.target.value),
+                                            }) }), _jsx("p", { className: "text-muted-foreground text-xs", children: "0\u2013100. Whole numbers recommended." })] }) })) : null, policy.deposit.kind === "fixed_cents" ? (_jsx("div", { className: "grid grid-cols-1 gap-3 pt-2 md:grid-cols-2", children: _jsxs("div", { className: "space-y-1", children: [_jsxs(Label, { htmlFor: "payment-policy-fixed", children: ["Deposit amount (", currency, ")"] }), _jsx(Input, { id: "payment-policy-fixed", type: "number", min: 0, step: 0.01, value: (policy.deposit.amountCents ?? 0) / 100, onChange: (e) => setPolicyField("deposit", {
+                                                kind: "fixed_cents",
+                                                amountCents: Math.round(Number(e.target.value) * 100),
+                                            }) }), _jsx("p", { className: "text-muted-foreground text-xs", children: "Capped at the booking total when the booking is smaller than this amount." })] }) })) : null] }), _jsxs("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-3", children: [_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { htmlFor: "payment-policy-min-days", children: "Minimum days before departure" }), _jsx(Input, { id: "payment-policy-min-days", type: "number", min: 0, step: 1, value: policy.minDaysBeforeDepartureForDeposit, onChange: (e) => setPolicyField("minDaysBeforeDepartureForDeposit", Number(e.target.value)) }), _jsx("p", { className: "text-muted-foreground text-xs", children: "If departure is closer than this, the booking requires the full amount up-front." })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { htmlFor: "payment-policy-balance-days", children: "Balance due days before departure" }), _jsx(Input, { id: "payment-policy-balance-days", type: "number", min: 0, step: 1, value: policy.balanceDueDaysBeforeDeparture, onChange: (e) => setPolicyField("balanceDueDaysBeforeDeparture", Number(e.target.value)) }), _jsx("p", { className: "text-muted-foreground text-xs", children: "When the balance is due." })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { htmlFor: "payment-policy-grace", children: "Balance grace days from now" }), _jsx(Input, { id: "payment-policy-grace", type: "number", min: 0, step: 1, value: policy.balanceDueMinDaysFromNow, onChange: (e) => setPolicyField("balanceDueMinDaysFromNow", Number(e.target.value)) }), _jsx("p", { className: "text-muted-foreground text-xs", children: "Floor on the balance due date so the customer always gets at least this long to pay it." })] })] })] })] }));
+}
+function DepositKindOption({ value, label, hint, checked, }) {
+    return (_jsxs(Label, { htmlFor: `payment-policy-deposit-${value}`, className: cn("flex cursor-pointer items-start gap-3 rounded-md border p-3", checked ? "border-primary bg-primary/5" : "bg-background"), children: [_jsx(RadioGroupItem, { id: `payment-policy-deposit-${value}`, value: value, className: "mt-1" }), _jsxs("div", { className: "space-y-1", children: [_jsx("div", { className: "text-sm font-medium", children: label }), _jsx("p", { className: "text-muted-foreground text-xs", children: hint })] })] }));
+}
+export function PaymentPolicyPreview({ policy, currency = "EUR", sampleTotalCents = 100_000, sampleDaysBeforeDeparture = 60, className, }) {
+    const today = React.useMemo(() => new Date(), []);
+    const departureDate = React.useMemo(() => {
+        const d = new Date(today.getTime() + sampleDaysBeforeDeparture * 24 * 60 * 60 * 1000);
+        return d.toISOString().slice(0, 10);
+    }, [today, sampleDaysBeforeDeparture]);
+    const schedule = React.useMemo(() => policy
+        ? computePaymentSchedule({ totalCents: sampleTotalCents, currency, departureDate, today }, policy)
+        : [], [sampleTotalCents, currency, departureDate, policy, today]);
+    if (!policy) {
+        return (_jsx("div", { className: cn("rounded-md border border-dashed bg-muted/20 p-3 text-muted-foreground text-xs", className), children: "Inheriting from parent \u2014 no preview at this layer." }));
+    }
+    return (_jsxs("div", { className: cn("space-y-2 rounded-md border bg-muted/20 p-3 text-sm", className), children: [_jsxs("div", { className: "text-muted-foreground text-xs", children: ["Sample: ", formatMoney(sampleTotalCents, currency), " booking, departure in", " ", sampleDaysBeforeDeparture, " days"] }), _jsx("ul", { className: "space-y-1", children: schedule.map((entry) => (_jsx(ScheduleRow, { entry: entry, currency: currency }, `${entry.scheduleType}-${entry.dueDate}`))) })] }));
+}
+function ScheduleRow({ entry, currency }) {
+    const label = entry.scheduleType === "deposit"
+        ? "Deposit"
+        : entry.scheduleType === "balance"
+            ? "Balance"
+            : "Full payment";
+    return (_jsxs("li", { className: "flex items-center justify-between gap-2", children: [_jsx("span", { className: "font-medium", children: label }), _jsx("span", { className: "font-mono text-xs", children: formatMoney(entry.amountCents, currency) }), _jsxs("span", { className: "text-muted-foreground text-xs", children: ["due ", entry.dueDate] })] }));
+}
+function formatMoney(cents, currency) {
+    try {
+        return new Intl.NumberFormat("en-US", { style: "currency", currency }).format(cents / 100);
+    }
+    catch {
+        return `${(cents / 100).toFixed(2)} ${currency}`;
+    }
+}

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export { InvoiceDialog, type InvoiceDialogProps } from "./components/invoice-dialog";
+export { PaymentPolicyForm, type PaymentPolicyFormProps, PaymentPolicyPreview, type PaymentPolicyPreviewProps, } from "./components/payment-policy-form";
 export { SupplierPaymentDialog, type SupplierPaymentDialogProps, } from "./components/supplier-payment-dialog";
 export { type FinanceUiMessageOverrides, type FinanceUiMessages, FinanceUiMessagesProvider, financeUiEn, financeUiMessageDefinitions, financeUiRo, getFinanceUiI18n, resolveFinanceUiMessages, useFinanceUiI18n, useFinanceUiI18nOrDefault, useFinanceUiMessages, useFinanceUiMessagesOrDefault, } from "./i18n";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,6BAA6B,CAAA;AACpF,OAAO,EACL,qBAAqB,EACrB,KAAK,0BAA0B,GAChC,MAAM,sCAAsC,CAAA;AAC7C,OAAO,EACL,KAAK,yBAAyB,EAC9B,KAAK,iBAAiB,EACtB,yBAAyB,EACzB,WAAW,EACX,2BAA2B,EAC3B,WAAW,EACX,gBAAgB,EAChB,wBAAwB,EACxB,gBAAgB,EAChB,yBAAyB,EACzB,oBAAoB,EACpB,6BAA6B,GAC9B,MAAM,QAAQ,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,6BAA6B,CAAA;AACpF,OAAO,EACL,iBAAiB,EACjB,KAAK,sBAAsB,EAC3B,oBAAoB,EACpB,KAAK,yBAAyB,GAC/B,MAAM,kCAAkC,CAAA;AACzC,OAAO,EACL,qBAAqB,EACrB,KAAK,0BAA0B,GAChC,MAAM,sCAAsC,CAAA;AAC7C,OAAO,EACL,KAAK,yBAAyB,EAC9B,KAAK,iBAAiB,EACtB,yBAAyB,EACzB,WAAW,EACX,2BAA2B,EAC3B,WAAW,EACX,gBAAgB,EAChB,wBAAwB,EACxB,gBAAgB,EAChB,yBAAyB,EACzB,oBAAoB,EACpB,6BAA6B,GAC9B,MAAM,QAAQ,CAAA"}

package/dist/index.js

@@ -1,3 +1,4 @@
 export { InvoiceDialog } from "./components/invoice-dialog";
+export { PaymentPolicyForm, PaymentPolicyPreview, } from "./components/payment-policy-form";
 export { SupplierPaymentDialog, } from "./components/supplier-payment-dialog";
 export { FinanceUiMessagesProvider, financeUiEn, financeUiMessageDefinitions, financeUiRo, getFinanceUiI18n, resolveFinanceUiMessages, useFinanceUiI18n, useFinanceUiI18nOrDefault, useFinanceUiMessages, useFinanceUiMessagesOrDefault, } from "./i18n";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@voyantjs/finance-ui",
-  "version": "0.19.0",
+  "version": "0.21.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -15,6 +15,9 @@
       "import": "./dist/index.js",
       "default": "./dist/index.js"
     },
+    "./styles.css": {
+      "default": "./src/styles.css"
+    },
     "./i18n": {
       "types": "./dist/i18n/index.d.ts",
       "import": "./dist/i18n/index.js",
@@ -42,11 +45,12 @@
     "react-dom": "^19.0.0",
     "react-hook-form": "^7.60.0",
     "zod": "^4.3.6",
-    "@voyantjs/finance-react": "0.19.0",
-    "@voyantjs/ui": "0.19.0"
+    "@voyantjs/finance": "0.21.0",
+    "@voyantjs/finance-react": "0.21.0",
+    "@voyantjs/ui": "0.21.0"
   },
   "dependencies": {
-    "@voyantjs/i18n": "0.19.0"
+    "@voyantjs/i18n": "0.21.0"
   },
   "devDependencies": {
     "@tanstack/react-query": "^5.96.2",
@@ -59,13 +63,15 @@
     "typescript": "^6.0.2",
     "vitest": "^4.1.2",
     "zod": "^4.3.6",
-    "@voyantjs/finance-react": "0.19.0",
-    "@voyantjs/i18n": "0.19.0",
+    "@voyantjs/finance": "0.21.0",
+    "@voyantjs/finance-react": "0.21.0",
+    "@voyantjs/i18n": "0.21.0",
     "@voyantjs/voyant-typescript-config": "0.1.0",
-    "@voyantjs/ui": "0.19.0"
+    "@voyantjs/ui": "0.21.0"
   },
   "files": [
-    "dist"
+    "dist",
+    "src/styles.css"
   ],
   "publishConfig": {
     "access": "public"

package/src/styles.css

@@ -0,0 +1,11 @@
+/* Tailwind v4 source-detection helper.
+ *
+ * Templates that consume this package should `@import` this CSS so Tailwind
+ * scans these component files for utility classes:
+ *
+ *   @import "@voyantjs/<domain>-ui/styles.css";
+ *
+ * Without it, classes that only appear inside this package (e.g. data-attr
+ * variants on primitives) won't be compiled into the final bundle.
+ */
+@source "./components/**/*.{ts,tsx}";