@voyantjs/pricing-ui 0.13.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +13 -0
- package/dist/components/cancellation-policy-combobox.d.ts +9 -0
- package/dist/components/cancellation-policy-combobox.d.ts.map +1 -0
- package/dist/components/cancellation-policy-combobox.js +49 -0
- package/dist/components/cancellation-policy-rule-dialog.d.ts +11 -0
- package/dist/components/cancellation-policy-rule-dialog.d.ts.map +1 -0
- package/dist/components/cancellation-policy-rule-dialog.js +87 -0
- package/dist/components/dropoff-price-rule-dialog.d.ts +10 -0
- package/dist/components/dropoff-price-rule-dialog.d.ts.map +1 -0
- package/dist/components/dropoff-price-rule-dialog.js +96 -0
- package/dist/components/extra-price-rule-dialog.d.ts +10 -0
- package/dist/components/extra-price-rule-dialog.d.ts.map +1 -0
- package/dist/components/extra-price-rule-dialog.js +92 -0
- package/dist/components/option-price-rule-combobox.d.ts +9 -0
- package/dist/components/option-price-rule-combobox.d.ts.map +1 -0
- package/dist/components/option-price-rule-combobox.js +45 -0
- package/dist/components/option-price-rule-dialog.d.ts +9 -0
- package/dist/components/option-price-rule-dialog.d.ts.map +1 -0
- package/dist/components/option-price-rule-dialog.js +132 -0
- package/dist/components/option-start-time-rule-dialog.d.ts +10 -0
- package/dist/components/option-start-time-rule-dialog.d.ts.map +1 -0
- package/dist/components/option-start-time-rule-dialog.js +90 -0
- package/dist/components/option-unit-price-rule-dialog.d.ts +10 -0
- package/dist/components/option-unit-price-rule-dialog.d.ts.map +1 -0
- package/dist/components/option-unit-price-rule-dialog.js +103 -0
- package/dist/components/option-unit-tier-dialog.d.ts +10 -0
- package/dist/components/option-unit-tier-dialog.d.ts.map +1 -0
- package/dist/components/option-unit-tier-dialog.js +78 -0
- package/dist/components/pickup-price-rule-dialog.d.ts +10 -0
- package/dist/components/pickup-price-rule-dialog.d.ts.map +1 -0
- package/dist/components/pickup-price-rule-dialog.js +88 -0
- package/dist/components/price-catalog-combobox.d.ts +9 -0
- package/dist/components/price-catalog-combobox.d.ts.map +1 -0
- package/dist/components/price-catalog-combobox.js +45 -0
- package/dist/components/price-schedule-combobox.d.ts +10 -0
- package/dist/components/price-schedule-combobox.d.ts.map +1 -0
- package/dist/components/price-schedule-combobox.js +48 -0
- package/dist/components/price-schedule-dialog.d.ts +9 -0
- package/dist/components/price-schedule-dialog.d.ts.map +1 -0
- package/dist/components/price-schedule-dialog.js +87 -0
- package/dist/components/pricing-category-combobox.d.ts +9 -0
- package/dist/components/pricing-category-combobox.d.ts.map +1 -0
- package/dist/components/pricing-category-combobox.js +54 -0
- package/dist/components/pricing-category-dependency-dialog.d.ts +9 -0
- package/dist/components/pricing-category-dependency-dialog.d.ts.map +1 -0
- package/dist/components/pricing-category-dependency-dialog.js +11 -0
- package/dist/components/pricing-category-dependency-form.d.ts +15 -0
- package/dist/components/pricing-category-dependency-form.d.ts.map +1 -0
- package/dist/components/pricing-category-dependency-form.js +90 -0
- package/dist/components/pricing-category-dialog.d.ts +9 -0
- package/dist/components/pricing-category-dialog.d.ts.map +1 -0
- package/dist/components/pricing-category-dialog.js +13 -0
- package/dist/components/pricing-category-form.d.ts +15 -0
- package/dist/components/pricing-category-form.d.ts.map +1 -0
- package/dist/components/pricing-category-form.js +99 -0
- package/dist/components/pricing-category-list.d.ts +5 -0
- package/dist/components/pricing-category-list.d.ts.map +1 -0
- package/dist/components/pricing-category-list.js +44 -0
- package/dist/components/pricing-shared-labels.d.ts +22 -0
- package/dist/components/pricing-shared-labels.d.ts.map +1 -0
- package/dist/components/pricing-shared-labels.js +32 -0
- package/dist/components/product-combobox.d.ts +9 -0
- package/dist/components/product-combobox.d.ts.map +1 -0
- package/dist/components/product-combobox.js +41 -0
- package/dist/components/product-option-combobox.d.ts +10 -0
- package/dist/components/product-option-combobox.d.ts.map +1 -0
- package/dist/components/product-option-combobox.js +51 -0
- package/dist/index.d.ts +23 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +22 -0
- package/package.json +70 -0
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { usePricingCategories, usePricingCategoryMutation, } from "@voyantjs/pricing-react";
|
|
4
|
+
import { Badge } from "@voyantjs/voyant-ui/components/badge";
|
|
5
|
+
import { Button } from "@voyantjs/voyant-ui/components/button";
|
|
6
|
+
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from "@voyantjs/voyant-ui/components/dropdown-menu";
|
|
7
|
+
import { Input } from "@voyantjs/voyant-ui/components/input";
|
|
8
|
+
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@voyantjs/voyant-ui/components/table";
|
|
9
|
+
import { Loader2, MoreHorizontal, Pencil, Plus, Search, Trash2 } from "lucide-react";
|
|
10
|
+
import * as React from "react";
|
|
11
|
+
import { PricingCategoryDialog } from "./pricing-category-dialog";
|
|
12
|
+
export function PricingCategoryList({ pageSize = 25 } = {}) {
|
|
13
|
+
const [dialogOpen, setDialogOpen] = React.useState(false);
|
|
14
|
+
const [editing, setEditing] = React.useState(undefined);
|
|
15
|
+
const [search, setSearch] = React.useState("");
|
|
16
|
+
const [offset, setOffset] = React.useState(0);
|
|
17
|
+
const { data, isPending, isError } = usePricingCategories({
|
|
18
|
+
limit: pageSize,
|
|
19
|
+
offset,
|
|
20
|
+
search: search || undefined,
|
|
21
|
+
active: undefined,
|
|
22
|
+
});
|
|
23
|
+
const { remove } = usePricingCategoryMutation();
|
|
24
|
+
const categories = data?.data ?? [];
|
|
25
|
+
const total = data?.total ?? 0;
|
|
26
|
+
const page = Math.floor(offset / pageSize) + 1;
|
|
27
|
+
const pageCount = Math.max(1, Math.ceil(total / pageSize));
|
|
28
|
+
return (_jsxs("div", { "data-slot": "pricing-category-list", className: "flex flex-col gap-4", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [_jsxs("div", { className: "relative w-full max-w-sm", children: [_jsx(Search, { className: "absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" }), _jsx(Input, { placeholder: "Search pricing categories\u2026", value: search, onChange: (event) => {
|
|
29
|
+
setSearch(event.target.value);
|
|
30
|
+
setOffset(0);
|
|
31
|
+
}, className: "pl-9" })] }), _jsxs(Button, { onClick: () => {
|
|
32
|
+
setEditing(undefined);
|
|
33
|
+
setDialogOpen(true);
|
|
34
|
+
}, children: [_jsx(Plus, { className: "mr-2 size-4" }), "New category"] })] }), _jsx("div", { className: "rounded-md border", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: "Name" }), _jsx(TableHead, { children: "Code" }), _jsx(TableHead, { children: "Type" }), _jsx(TableHead, { children: "Age" }), _jsx(TableHead, { children: "Seat" }), _jsx(TableHead, { children: "Sort" }), _jsx(TableHead, { children: "Status" }), _jsx(TableHead, { className: "w-[80px] text-right", children: "Actions" })] }) }), _jsx(TableBody, { children: isPending ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 8, className: "h-24 text-center", children: _jsx(Loader2, { className: "mx-auto size-4 animate-spin text-muted-foreground" }) }) })) : isError ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 8, className: "h-24 text-center text-sm text-destructive", children: "Failed to load pricing categories." }) })) : categories.length === 0 ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 8, className: "h-24 text-center text-sm text-muted-foreground", children: "No pricing categories found." }) })) : (categories.map((category) => (_jsxs(TableRow, { children: [_jsx(TableCell, { className: "font-medium", children: category.name }), _jsx(TableCell, { className: "font-mono text-xs text-muted-foreground", children: category.code ?? "—" }), _jsx(TableCell, { children: _jsx(Badge, { variant: "outline", className: "capitalize", children: category.categoryType }) }), _jsx(TableCell, { className: "text-xs text-muted-foreground", children: category.isAgeQualified
|
|
35
|
+
? `${category.minAge ?? 0}–${category.maxAge ?? "∞"}`
|
|
36
|
+
: "—" }), _jsx(TableCell, { className: "font-mono", children: category.seatOccupancy }), _jsx(TableCell, { className: "font-mono", children: category.sortOrder }), _jsx(TableCell, { children: _jsx(Badge, { variant: category.active ? "default" : "outline", children: category.active ? "Active" : "Inactive" }) }), _jsx(TableCell, { className: "text-right", children: _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { className: "inline-flex size-8 items-center justify-center rounded-md text-muted-foreground outline-hidden hover:bg-accent hover:text-accent-foreground", children: _jsx(MoreHorizontal, { className: "size-4" }) }), _jsxs(DropdownMenuContent, { align: "end", children: [_jsxs(DropdownMenuItem, { onClick: () => {
|
|
37
|
+
setEditing(category);
|
|
38
|
+
setDialogOpen(true);
|
|
39
|
+
}, children: [_jsx(Pencil, { className: "size-4" }), "Edit"] }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { variant: "destructive", onClick: () => {
|
|
40
|
+
if (confirm(`Delete category "${category.name}"?`)) {
|
|
41
|
+
remove.mutate(category.id);
|
|
42
|
+
}
|
|
43
|
+
}, children: [_jsx(Trash2, { className: "size-4" }), "Delete"] })] })] }) })] }, category.id)))) })] }) }), _jsxs("div", { className: "flex items-center justify-between text-sm text-muted-foreground", children: [_jsxs("span", { children: ["Showing ", categories.length, " of ", total] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { variant: "outline", size: "sm", disabled: offset === 0, onClick: () => setOffset((prev) => Math.max(0, prev - pageSize)), children: "Previous" }), _jsxs("span", { children: ["Page ", page, " / ", pageCount] }), _jsx(Button, { variant: "outline", size: "sm", disabled: offset + pageSize >= total, onClick: () => setOffset((prev) => prev + pageSize), children: "Next" })] })] }), _jsx(PricingCategoryDialog, { open: dialogOpen, onOpenChange: setDialogOpen, category: editing })] }));
|
|
44
|
+
}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
export declare function PriceCatalogLabel({ id }: {
|
|
2
|
+
id: string;
|
|
3
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
export declare function PriceScheduleLabel({ id }: {
|
|
5
|
+
id: string;
|
|
6
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
export declare function CancellationPolicyLabel({ id }: {
|
|
8
|
+
id: string;
|
|
9
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
export declare function ProductLabel({ id }: {
|
|
11
|
+
id: string;
|
|
12
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
13
|
+
export declare function ProductOptionLabel({ id }: {
|
|
14
|
+
id: string;
|
|
15
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
16
|
+
export declare function OptionPriceRuleLabel({ id }: {
|
|
17
|
+
id: string;
|
|
18
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
19
|
+
export declare function PricingCategoryLabel({ id }: {
|
|
20
|
+
id: string;
|
|
21
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
22
|
+
//# sourceMappingURL=pricing-shared-labels.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"pricing-shared-labels.d.ts","sourceRoot":"","sources":["../../src/components/pricing-shared-labels.tsx"],"names":[],"mappings":"AAWA,wBAAgB,iBAAiB,CAAC,EAAE,EAAE,EAAE,EAAE;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,2CAGvD;AAED,wBAAgB,kBAAkB,CAAC,EAAE,EAAE,EAAE,EAAE;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,2CAGxD;AAED,wBAAgB,uBAAuB,CAAC,EAAE,EAAE,EAAE,EAAE;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,2CAG7D;AAED,wBAAgB,YAAY,CAAC,EAAE,EAAE,EAAE,EAAE;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,2CAGlD;AAED,wBAAgB,kBAAkB,CAAC,EAAE,EAAE,EAAE,EAAE;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,2CAGxD;AAED,wBAAgB,oBAAoB,CAAC,EAAE,EAAE,EAAE,EAAE;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,2CAG1D;AAED,wBAAgB,oBAAoB,CAAC,EAAE,EAAE,EAAE,EAAE;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,2CAG1D"}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
import { useCancellationPolicy, useOptionPriceRule, usePriceCatalog, usePriceSchedule, usePricingCategory, } from "@voyantjs/pricing-react";
|
|
4
|
+
import { useProduct, useProductOption } from "@voyantjs/products-react";
|
|
5
|
+
export function PriceCatalogLabel({ id }) {
|
|
6
|
+
const query = usePriceCatalog(id, { enabled: !!id });
|
|
7
|
+
return _jsx("span", { className: "text-muted-foreground", children: query.data?.name ?? id });
|
|
8
|
+
}
|
|
9
|
+
export function PriceScheduleLabel({ id }) {
|
|
10
|
+
const query = usePriceSchedule(id, { enabled: !!id });
|
|
11
|
+
return _jsx("span", { className: "text-muted-foreground", children: query.data?.name ?? id });
|
|
12
|
+
}
|
|
13
|
+
export function CancellationPolicyLabel({ id }) {
|
|
14
|
+
const query = useCancellationPolicy(id, { enabled: !!id });
|
|
15
|
+
return _jsx("span", { className: "text-muted-foreground", children: query.data?.name ?? id });
|
|
16
|
+
}
|
|
17
|
+
export function ProductLabel({ id }) {
|
|
18
|
+
const query = useProduct(id, { enabled: !!id });
|
|
19
|
+
return _jsx("span", { className: "text-muted-foreground", children: query.data?.name ?? id });
|
|
20
|
+
}
|
|
21
|
+
export function ProductOptionLabel({ id }) {
|
|
22
|
+
const query = useProductOption(id, { enabled: !!id });
|
|
23
|
+
return _jsx("span", { className: "text-muted-foreground", children: query.data?.name ?? id });
|
|
24
|
+
}
|
|
25
|
+
export function OptionPriceRuleLabel({ id }) {
|
|
26
|
+
const query = useOptionPriceRule(id, { enabled: !!id });
|
|
27
|
+
return _jsx("span", { className: "text-muted-foreground", children: query.data?.name ?? id });
|
|
28
|
+
}
|
|
29
|
+
export function PricingCategoryLabel({ id }) {
|
|
30
|
+
const query = usePricingCategory(id, { enabled: !!id });
|
|
31
|
+
return _jsx("span", { className: "text-muted-foreground", children: query.data?.name ?? id });
|
|
32
|
+
}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
type Props = {
|
|
2
|
+
value: string | null | undefined;
|
|
3
|
+
onChange: (value: string | null) => void;
|
|
4
|
+
placeholder?: string;
|
|
5
|
+
disabled?: boolean;
|
|
6
|
+
};
|
|
7
|
+
export declare function ProductCombobox({ value, onChange, placeholder, disabled, }: Props): import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
export {};
|
|
9
|
+
//# sourceMappingURL=product-combobox.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"product-combobox.d.ts","sourceRoot":"","sources":["../../src/components/product-combobox.tsx"],"names":[],"mappings":"AAYA,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAA;IAChC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IACxC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAID,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,QAAQ,EACR,WAAgC,EAChC,QAAQ,GACT,EAAE,KAAK,2CAkEP"}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useProduct, useProducts } from "@voyantjs/products-react";
|
|
3
|
+
import { Combobox, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList, } from "@voyantjs/voyant-ui/components/combobox";
|
|
4
|
+
import * as React from "react";
|
|
5
|
+
const PAGE_SIZE = 25;
|
|
6
|
+
export function ProductCombobox({ value, onChange, placeholder = "Search products…", disabled, }) {
|
|
7
|
+
const [search, setSearch] = React.useState("");
|
|
8
|
+
const listQuery = useProducts({ search: search || undefined, limit: PAGE_SIZE });
|
|
9
|
+
const selectedQuery = useProduct(value ?? undefined, { enabled: !!value });
|
|
10
|
+
const items = React.useMemo(() => {
|
|
11
|
+
const map = new Map();
|
|
12
|
+
for (const item of listQuery.data?.data ?? [])
|
|
13
|
+
map.set(item.id, item);
|
|
14
|
+
if (selectedQuery.data)
|
|
15
|
+
map.set(selectedQuery.data.id, selectedQuery.data);
|
|
16
|
+
return Array.from(map.values());
|
|
17
|
+
}, [listQuery.data?.data, selectedQuery.data]);
|
|
18
|
+
const itemMap = React.useMemo(() => new Map(items.map((item) => [item.id, item])), [items]);
|
|
19
|
+
const selected = value ? itemMap.get(value) : undefined;
|
|
20
|
+
const selectedLabel = selected ? selected.name : "";
|
|
21
|
+
const [inputValue, setInputValue] = React.useState(selectedLabel);
|
|
22
|
+
React.useEffect(() => {
|
|
23
|
+
if (selectedLabel)
|
|
24
|
+
setInputValue(selectedLabel);
|
|
25
|
+
}, [selectedLabel]);
|
|
26
|
+
return (_jsxs(Combobox, { items: items.map((item) => item.id), value: value ?? null, inputValue: inputValue, autoHighlight: true, disabled: disabled, itemToStringValue: (id) => itemMap.get(id)?.name ?? "", onInputValueChange: (next) => {
|
|
27
|
+
setInputValue(next);
|
|
28
|
+
setSearch(next);
|
|
29
|
+
if (!next)
|
|
30
|
+
onChange(null);
|
|
31
|
+
}, onValueChange: (next) => {
|
|
32
|
+
const id = next ?? null;
|
|
33
|
+
onChange(id);
|
|
34
|
+
setInputValue(id ? (itemMap.get(id)?.name ?? "") : "");
|
|
35
|
+
}, children: [_jsx(ComboboxInput, { placeholder: placeholder, showClear: !!value }), _jsxs(ComboboxContent, { children: [_jsx(ComboboxEmpty, { children: listQuery.isPending || selectedQuery.isPending ? "Loading…" : "No products found." }), _jsx(ComboboxList, { children: _jsx(ComboboxCollection, { children: (id) => {
|
|
36
|
+
const item = itemMap.get(id);
|
|
37
|
+
if (!item)
|
|
38
|
+
return null;
|
|
39
|
+
return (_jsx(ComboboxItem, { value: item.id, children: _jsxs("div", { className: "flex min-w-0 flex-col", children: [_jsx("span", { className: "truncate font-medium", children: item.name }), _jsxs("span", { className: "truncate text-xs text-muted-foreground", children: [item.status, " \u00B7 ", item.bookingMode] })] }) }, item.id));
|
|
40
|
+
} }) })] })] }));
|
|
41
|
+
}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
type Props = {
|
|
2
|
+
productId?: string | null;
|
|
3
|
+
value: string | null | undefined;
|
|
4
|
+
onChange: (value: string | null) => void;
|
|
5
|
+
placeholder?: string;
|
|
6
|
+
disabled?: boolean;
|
|
7
|
+
};
|
|
8
|
+
export declare function ProductOptionCombobox({ productId, value, onChange, placeholder, disabled, }: Props): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export {};
|
|
10
|
+
//# sourceMappingURL=product-option-combobox.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"product-option-combobox.d.ts","sourceRoot":"","sources":["../../src/components/product-option-combobox.tsx"],"names":[],"mappings":"AAgBA,KAAK,KAAK,GAAG;IACX,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACzB,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAA;IAChC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IACxC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAID,wBAAgB,qBAAqB,CAAC,EACpC,SAAS,EACT,KAAK,EACL,QAAQ,EACR,WAAsC,EACtC,QAAQ,GACT,EAAE,KAAK,2CA4EP"}
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useProductOption, useProductOptions, } from "@voyantjs/products-react";
|
|
3
|
+
import { Combobox, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList, } from "@voyantjs/voyant-ui/components/combobox";
|
|
4
|
+
import * as React from "react";
|
|
5
|
+
const PAGE_SIZE = 100;
|
|
6
|
+
export function ProductOptionCombobox({ productId, value, onChange, placeholder = "Select product option…", disabled, }) {
|
|
7
|
+
const [search, setSearch] = React.useState("");
|
|
8
|
+
const listQuery = useProductOptions({
|
|
9
|
+
productId: productId || undefined,
|
|
10
|
+
limit: PAGE_SIZE,
|
|
11
|
+
enabled: !!productId,
|
|
12
|
+
});
|
|
13
|
+
const selectedQuery = useProductOption(value, { enabled: !!value });
|
|
14
|
+
const items = React.useMemo(() => {
|
|
15
|
+
const map = new Map();
|
|
16
|
+
for (const item of listQuery.data?.data ?? []) {
|
|
17
|
+
if (!search || item.name.toLowerCase().includes(search.toLowerCase()))
|
|
18
|
+
map.set(item.id, item);
|
|
19
|
+
}
|
|
20
|
+
if (selectedQuery.data)
|
|
21
|
+
map.set(selectedQuery.data.id, selectedQuery.data);
|
|
22
|
+
return Array.from(map.values());
|
|
23
|
+
}, [listQuery.data?.data, search, selectedQuery.data]);
|
|
24
|
+
const itemMap = React.useMemo(() => new Map(items.map((item) => [item.id, item])), [items]);
|
|
25
|
+
const selected = value ? itemMap.get(value) : undefined;
|
|
26
|
+
const selectedLabel = selected ? selected.name : "";
|
|
27
|
+
const [inputValue, setInputValue] = React.useState(selectedLabel);
|
|
28
|
+
React.useEffect(() => {
|
|
29
|
+
if (selectedLabel)
|
|
30
|
+
setInputValue(selectedLabel);
|
|
31
|
+
}, [selectedLabel]);
|
|
32
|
+
return (_jsxs(Combobox, { items: items.map((item) => item.id), value: value ?? null, inputValue: inputValue, autoHighlight: true, disabled: disabled || !productId, itemToStringValue: (id) => itemMap.get(id)?.name ?? "", onInputValueChange: (next) => {
|
|
33
|
+
setInputValue(next);
|
|
34
|
+
setSearch(next);
|
|
35
|
+
if (!next)
|
|
36
|
+
onChange(null);
|
|
37
|
+
}, onValueChange: (next) => {
|
|
38
|
+
const id = next ?? null;
|
|
39
|
+
onChange(id);
|
|
40
|
+
setInputValue(id ? (itemMap.get(id)?.name ?? "") : "");
|
|
41
|
+
}, children: [_jsx(ComboboxInput, { placeholder: placeholder, showClear: !!value }), _jsxs(ComboboxContent, { children: [_jsx(ComboboxEmpty, { children: listQuery.isPending || selectedQuery.isPending
|
|
42
|
+
? "Loading…"
|
|
43
|
+
: productId
|
|
44
|
+
? "No product options found."
|
|
45
|
+
: "Select a product first." }), _jsx(ComboboxList, { children: _jsx(ComboboxCollection, { children: (id) => {
|
|
46
|
+
const item = itemMap.get(id);
|
|
47
|
+
if (!item)
|
|
48
|
+
return null;
|
|
49
|
+
return (_jsx(ComboboxItem, { value: item.id, children: _jsxs("div", { className: "flex min-w-0 flex-col", children: [_jsx("span", { className: "truncate font-medium", children: item.name }), item.code ? (_jsx("span", { className: "truncate text-xs text-muted-foreground", children: item.code })) : null] }) }, item.id));
|
|
50
|
+
} }) })] })] }));
|
|
51
|
+
}
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
export { CancellationPolicyCombobox } from "./components/cancellation-policy-combobox";
|
|
2
|
+
export { CancellationPolicyRuleDialog, type CancellationPolicyRuleDialogProps, } from "./components/cancellation-policy-rule-dialog";
|
|
3
|
+
export { DropoffPriceRuleDialog } from "./components/dropoff-price-rule-dialog";
|
|
4
|
+
export { ExtraPriceRuleDialog } from "./components/extra-price-rule-dialog";
|
|
5
|
+
export { OptionPriceRuleCombobox } from "./components/option-price-rule-combobox";
|
|
6
|
+
export { OptionPriceRuleDialog, type OptionPriceRuleDialogProps, } from "./components/option-price-rule-dialog";
|
|
7
|
+
export { OptionStartTimeRuleDialog } from "./components/option-start-time-rule-dialog";
|
|
8
|
+
export { OptionUnitPriceRuleDialog } from "./components/option-unit-price-rule-dialog";
|
|
9
|
+
export { OptionUnitTierDialog } from "./components/option-unit-tier-dialog";
|
|
10
|
+
export { PickupPriceRuleDialog } from "./components/pickup-price-rule-dialog";
|
|
11
|
+
export { PriceCatalogCombobox } from "./components/price-catalog-combobox";
|
|
12
|
+
export { PriceScheduleCombobox } from "./components/price-schedule-combobox";
|
|
13
|
+
export { PriceScheduleDialog, type PriceScheduleDialogProps, } from "./components/price-schedule-dialog";
|
|
14
|
+
export { PricingCategoryCombobox } from "./components/pricing-category-combobox";
|
|
15
|
+
export { PricingCategoryDependencyDialog, type PricingCategoryDependencyDialogProps, } from "./components/pricing-category-dependency-dialog";
|
|
16
|
+
export { PricingCategoryDependencyForm, type PricingCategoryDependencyFormProps, } from "./components/pricing-category-dependency-form";
|
|
17
|
+
export { PricingCategoryDialog, type PricingCategoryDialogProps, } from "./components/pricing-category-dialog";
|
|
18
|
+
export { PricingCategoryForm, type PricingCategoryFormProps, } from "./components/pricing-category-form";
|
|
19
|
+
export { PricingCategoryList, type PricingCategoryListProps, } from "./components/pricing-category-list";
|
|
20
|
+
export { CancellationPolicyLabel, OptionPriceRuleLabel, PriceCatalogLabel, PriceScheduleLabel, PricingCategoryLabel, ProductLabel, ProductOptionLabel, } from "./components/pricing-shared-labels";
|
|
21
|
+
export { ProductCombobox } from "./components/product-combobox";
|
|
22
|
+
export { ProductOptionCombobox } from "./components/product-option-combobox";
|
|
23
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,EAAE,MAAM,2CAA2C,CAAA;AACtF,OAAO,EACL,4BAA4B,EAC5B,KAAK,iCAAiC,GACvC,MAAM,8CAA8C,CAAA;AACrD,OAAO,EAAE,sBAAsB,EAAE,MAAM,wCAAwC,CAAA;AAC/E,OAAO,EAAE,oBAAoB,EAAE,MAAM,sCAAsC,CAAA;AAC3E,OAAO,EAAE,uBAAuB,EAAE,MAAM,yCAAyC,CAAA;AACjF,OAAO,EACL,qBAAqB,EACrB,KAAK,0BAA0B,GAChC,MAAM,uCAAuC,CAAA;AAC9C,OAAO,EAAE,yBAAyB,EAAE,MAAM,4CAA4C,CAAA;AACtF,OAAO,EAAE,yBAAyB,EAAE,MAAM,4CAA4C,CAAA;AACtF,OAAO,EAAE,oBAAoB,EAAE,MAAM,sCAAsC,CAAA;AAC3E,OAAO,EAAE,qBAAqB,EAAE,MAAM,uCAAuC,CAAA;AAC7E,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAA;AAC1E,OAAO,EAAE,qBAAqB,EAAE,MAAM,sCAAsC,CAAA;AAC5E,OAAO,EACL,mBAAmB,EACnB,KAAK,wBAAwB,GAC9B,MAAM,oCAAoC,CAAA;AAC3C,OAAO,EAAE,uBAAuB,EAAE,MAAM,wCAAwC,CAAA;AAChF,OAAO,EACL,+BAA+B,EAC/B,KAAK,oCAAoC,GAC1C,MAAM,iDAAiD,CAAA;AACxD,OAAO,EACL,6BAA6B,EAC7B,KAAK,kCAAkC,GACxC,MAAM,+CAA+C,CAAA;AACtD,OAAO,EACL,qBAAqB,EACrB,KAAK,0BAA0B,GAChC,MAAM,sCAAsC,CAAA;AAC7C,OAAO,EACL,mBAAmB,EACnB,KAAK,wBAAwB,GAC9B,MAAM,oCAAoC,CAAA;AAC3C,OAAO,EACL,mBAAmB,EACnB,KAAK,wBAAwB,GAC9B,MAAM,oCAAoC,CAAA;AAC3C,OAAO,EACL,uBAAuB,EACvB,oBAAoB,EACpB,iBAAiB,EACjB,kBAAkB,EAClB,oBAAoB,EACpB,YAAY,EACZ,kBAAkB,GACnB,MAAM,oCAAoC,CAAA;AAC3C,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAC/D,OAAO,EAAE,qBAAqB,EAAE,MAAM,sCAAsC,CAAA"}
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
export { CancellationPolicyCombobox } from "./components/cancellation-policy-combobox";
|
|
2
|
+
export { CancellationPolicyRuleDialog, } from "./components/cancellation-policy-rule-dialog";
|
|
3
|
+
export { DropoffPriceRuleDialog } from "./components/dropoff-price-rule-dialog";
|
|
4
|
+
export { ExtraPriceRuleDialog } from "./components/extra-price-rule-dialog";
|
|
5
|
+
export { OptionPriceRuleCombobox } from "./components/option-price-rule-combobox";
|
|
6
|
+
export { OptionPriceRuleDialog, } from "./components/option-price-rule-dialog";
|
|
7
|
+
export { OptionStartTimeRuleDialog } from "./components/option-start-time-rule-dialog";
|
|
8
|
+
export { OptionUnitPriceRuleDialog } from "./components/option-unit-price-rule-dialog";
|
|
9
|
+
export { OptionUnitTierDialog } from "./components/option-unit-tier-dialog";
|
|
10
|
+
export { PickupPriceRuleDialog } from "./components/pickup-price-rule-dialog";
|
|
11
|
+
export { PriceCatalogCombobox } from "./components/price-catalog-combobox";
|
|
12
|
+
export { PriceScheduleCombobox } from "./components/price-schedule-combobox";
|
|
13
|
+
export { PriceScheduleDialog, } from "./components/price-schedule-dialog";
|
|
14
|
+
export { PricingCategoryCombobox } from "./components/pricing-category-combobox";
|
|
15
|
+
export { PricingCategoryDependencyDialog, } from "./components/pricing-category-dependency-dialog";
|
|
16
|
+
export { PricingCategoryDependencyForm, } from "./components/pricing-category-dependency-form";
|
|
17
|
+
export { PricingCategoryDialog, } from "./components/pricing-category-dialog";
|
|
18
|
+
export { PricingCategoryForm, } from "./components/pricing-category-form";
|
|
19
|
+
export { PricingCategoryList, } from "./components/pricing-category-list";
|
|
20
|
+
export { CancellationPolicyLabel, OptionPriceRuleLabel, PriceCatalogLabel, PriceScheduleLabel, PricingCategoryLabel, ProductLabel, ProductOptionLabel, } from "./components/pricing-shared-labels";
|
|
21
|
+
export { ProductCombobox } from "./components/product-combobox";
|
|
22
|
+
export { ProductOptionCombobox } from "./components/product-option-combobox";
|
package/package.json
ADDED
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@voyantjs/pricing-ui",
|
|
3
|
+
"version": "0.13.0",
|
|
4
|
+
"license": "FSL-1.1-Apache-2.0",
|
|
5
|
+
"repository": {
|
|
6
|
+
"type": "git",
|
|
7
|
+
"url": "https://github.com/voyantjs/voyant.git",
|
|
8
|
+
"directory": "packages/pricing-ui"
|
|
9
|
+
},
|
|
10
|
+
"type": "module",
|
|
11
|
+
"sideEffects": false,
|
|
12
|
+
"exports": {
|
|
13
|
+
".": "./src/index.ts",
|
|
14
|
+
"./components/*": "./src/components/*.tsx"
|
|
15
|
+
},
|
|
16
|
+
"scripts": {
|
|
17
|
+
"build": "tsc -p tsconfig.build.json",
|
|
18
|
+
"clean": "rm -rf dist",
|
|
19
|
+
"prepack": "pnpm run build",
|
|
20
|
+
"typecheck": "tsc --noEmit",
|
|
21
|
+
"lint": "biome check src/",
|
|
22
|
+
"test": "vitest run --passWithNoTests"
|
|
23
|
+
},
|
|
24
|
+
"peerDependencies": {
|
|
25
|
+
"@tanstack/react-query": "^5.0.0",
|
|
26
|
+
"@tanstack/react-table": "^8.0.0",
|
|
27
|
+
"@voyantjs/pricing-react": "workspace:*",
|
|
28
|
+
"@voyantjs/products-react": "workspace:*",
|
|
29
|
+
"@voyantjs/voyant-ui": "workspace:*",
|
|
30
|
+
"react": "^19.0.0",
|
|
31
|
+
"react-dom": "^19.0.0",
|
|
32
|
+
"react-hook-form": "^7.60.0",
|
|
33
|
+
"zod": "^3.25.76"
|
|
34
|
+
},
|
|
35
|
+
"devDependencies": {
|
|
36
|
+
"@tanstack/react-query": "^5.96.2",
|
|
37
|
+
"@tanstack/react-table": "^8.21.3",
|
|
38
|
+
"@types/react": "^19.2.14",
|
|
39
|
+
"@types/react-dom": "^19.2.3",
|
|
40
|
+
"@voyantjs/pricing-react": "workspace:*",
|
|
41
|
+
"@voyantjs/products-react": "workspace:*",
|
|
42
|
+
"@voyantjs/voyant-typescript-config": "workspace:*",
|
|
43
|
+
"@voyantjs/voyant-ui": "workspace:*",
|
|
44
|
+
"lucide-react": "^0.475.0",
|
|
45
|
+
"react": "^19.2.4",
|
|
46
|
+
"react-dom": "^19.2.4",
|
|
47
|
+
"react-hook-form": "^7.60.0",
|
|
48
|
+
"typescript": "^6.0.2",
|
|
49
|
+
"vitest": "^4.1.2",
|
|
50
|
+
"zod": "^3.25.76"
|
|
51
|
+
},
|
|
52
|
+
"files": [
|
|
53
|
+
"dist"
|
|
54
|
+
],
|
|
55
|
+
"publishConfig": {
|
|
56
|
+
"access": "public",
|
|
57
|
+
"exports": {
|
|
58
|
+
".": {
|
|
59
|
+
"types": "./dist/index.d.ts",
|
|
60
|
+
"import": "./dist/index.js"
|
|
61
|
+
},
|
|
62
|
+
"./components/*": {
|
|
63
|
+
"types": "./dist/components/*.d.ts",
|
|
64
|
+
"import": "./dist/components/*.js"
|
|
65
|
+
}
|
|
66
|
+
},
|
|
67
|
+
"main": "./dist/index.js",
|
|
68
|
+
"types": "./dist/index.d.ts"
|
|
69
|
+
}
|
|
70
|
+
}
|