@deenruv/admin-dashboard 1.0.17-dev.20 → 1.0.17-dev.23

package/dist/pages/orders/_components/CancelAndRefundDialog.js

@@ -1,28 +1,89 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
-import { Button, Dialog, DialogClose, DialogContent, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, DropdownMenuItem, useOrder, useTranslation, } from '@deenruv/react-ui-devkit';
+import { useEffect, useMemo, useState } from 'react';
+import { Button, Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, DropdownMenuItem, getRefundablePayments, getRefundedQuantities, Input, planOrderRefund, priceFormatter, Textarea, useOrder, useTranslation, } from '@deenruv/react-ui-devkit';
 import { Undo2 } from 'lucide-react';
-import { ProductsTable } from "./";
-import { RefundPaymentCard } from "./RefundPaymentCard.js";
-export const CancelAndRefundDialog = ({ refundReason, setRefundReason, onConfirm, }) => {
+import { ProductsTable } from './ProductsTable.js';
+export const CancelAndRefundDialog = ({ onConfirm }) => {
     const { t } = useTranslation('orders');
     const { order } = useOrder();
     const [open, setOpen] = useState(false);
-    const [refundAmount, setRefundAmount] = useState(0);
-    const [refundLines, setRefundLines] = useState([]);
+    const [selections, setSelections] = useState({});
+    const [reason, setReason] = useState('');
+    const [refundShipping, setRefundShipping] = useState(false);
     const [cancelShipping, setCancelShipping] = useState(false);
+    const [manualAmount, setManualAmount] = useState('');
+    const [allocationOverrides, setAllocationOverrides] = useState({});
+    const [error, setError] = useState('');
+    const [submitting, setSubmitting] = useState(false);
+    const capacities = useMemo(() => getRefundablePayments(order?.payments ?? []), [order?.payments]);
+    const refundedQuantities = useMemo(() => getRefundedQuantities(order?.payments ?? []), [order?.payments]);
+    const reset = () => {
+        setSelections({});
+        setReason('');
+        setRefundShipping(false);
+        setCancelShipping(false);
+        setManualAmount('');
+        setAllocationOverrides({});
+        setError('');
+        setSubmitting(false);
+    };
     useEffect(() => {
-        if (!order)
-            return;
-        const wholeLines = order?.lines.filter((l) => refundLines.some((rL) => l.id === rL.orderLineId)) ?? [];
-        let _refundAmount = refundLines
-            .map((rL, i) => wholeLines[i].discountedUnitPriceWithTax * rL.quantity)
-            .reduce((prev, acc) => prev + acc, 0);
-        if (cancelShipping && order?.shipping) {
-            _refundAmount = +order?.shipping;
+        if (!open)
+            reset();
+    }, [open]);
+    useEffect(() => {
+        setOpen(false);
+        reset();
+    }, [order?.id]);
+    if (!order)
+        return null;
+    const itemAmount = order.lines.reduce((total, line) => total + line.proratedUnitPriceWithTax * (selections[line.id]?.refundQuantity ?? 0), 0);
+    const shipping = refundShipping ? order.shipping : 0;
+    const suggestedAmount = itemAmount + shipping;
+    const hasCancellationLines = Object.values(selections).some((selection) => selection.cancelQuantity > 0);
+    useEffect(() => {
+        if (!hasCancellationLines)
+            setCancelShipping(false);
+    }, [hasCancellationLines]);
+    const submit = async () => {
+        try {
+            setError('');
+            const overrides = Object.entries(allocationOverrides)
+                .filter(([, amount]) => amount !== '')
+                .map(([paymentId, amount]) => ({ paymentId, amount: Number(amount) }));
+            const plan = planOrderRefund({
+                lines: order.lines.map((line) => ({
+                    id: line.id,
+                    maxRefundQuantity: Math.max(0, line.orderPlacedQuantity - (refundedQuantities[line.id] ?? 0)),
+                    maxCancelQuantity: line.quantity,
+                    unitPriceWithTax: line.proratedUnitPriceWithTax,
+                })),
+                selections,
+                shippingAmount: shipping,
+                cancelShipping,
+                reason,
+                capacities,
+                amountOverride: manualAmount === '' ? undefined : Number(manualAmount),
+                allocationOverrides: overrides.length > 0 ? overrides : undefined,
+            });
+            setSubmitting(true);
+            await onConfirm({
+                cancelLines: plan.cancelLines,
+                refundLines: plan.refundLines,
+                allocations: plan.allocations,
+                reason: reason.trim(),
+                shipping,
+                cancelShipping,
+                adjustment: plan.totalAmount - plan.itemAmount - shipping,
+            });
+            setOpen(false);
+        }
+        catch (submitError) {
+            setError(submitError instanceof Error ? submitError.message : t('cancelAndRefund.error'));
+        }
+        finally {
+            setSubmitting(false);
         }
-        console.log('RA', _refundAmount);
-        setRefundAmount(_refundAmount);
-    }, [cancelShipping, refundLines, order]);
-    return (_jsxs(Dialog, { open: open, onOpenChange: setOpen, children: [_jsx(DialogTrigger, { asChild: true, children: _jsx(DropdownMenuItem, { asChild: true, onSelect: (e) => e.preventDefault(), children: _jsx(Button, { variant: "ghost", className: "w-full justify-start px-4 py-2 text-red-400 hover:text-red-400 dark:text-red-400 dark:hover:text-red-400", children: t('cancelAndRefund.trigger') }) }) }), _jsxs(DialogContent, { className: "flex h-[80vh] max-w-[80vw] flex-col gap-0 overflow-hidden", children: [_jsx(DialogHeader, { children: _jsxs("div", { className: "mb-2 flex items-center gap-2", children: [_jsx(Undo2, { className: "h-5 w-5 text-rose-500 dark:text-rose-400" }), _jsx(DialogTitle, { children: t('cancelAndRefund.title') })] }) }), _jsx(ProductsTable, { refundLines, setRefundLines }), _jsx(RefundPaymentCard, { refundReason, setRefundReason, cancelShipping, setCancelShipping, refundAmount, setRefundAmount }), _jsxs(DialogFooter, { className: "mt-auto gap-2", children: [_jsx(DialogClose, { asChild: true, children: _jsx(Button, { variant: "outline", children: t('payments.cancel') }) }), _jsxs(Button, { type: "submit", className: "gap-2", onClick: () => onConfirm(refundAmount, refundLines, refundReason, 0, cancelShipping, 0), children: [_jsx(Undo2, { className: "h-4 w-4" }), t('cancelAndRefund.refund')] })] })] })] }));
+    };
+    return (_jsxs(Dialog, { open: open, onOpenChange: setOpen, children: [_jsx(DialogTrigger, { asChild: true, children: _jsx(DropdownMenuItem, { asChild: true, onSelect: (event) => event.preventDefault(), children: _jsx(Button, { variant: "ghost", className: "w-full justify-start px-4 py-2 text-red-400 hover:text-red-400", children: t('cancelAndRefund.trigger') }) }) }), _jsxs(DialogContent, { className: "flex h-[85vh] max-w-[90vw] flex-col gap-4 overflow-auto", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: t('cancelAndRefund.title') }) }), _jsx(ProductsTable, { selections: selections, setSelections: setSelections }), _jsxs("div", { className: "grid gap-4 md:grid-cols-2", children: [_jsxs("div", { className: "space-y-3", children: [_jsxs("label", { className: "flex gap-2", children: [_jsx("input", { type: "checkbox", checked: refundShipping, onChange: (e) => setRefundShipping(e.target.checked) }), t('cancelAndRefund.refundShipping')] }), _jsxs("label", { className: "flex gap-2", children: [_jsx("input", { type: "checkbox", checked: cancelShipping, disabled: !hasCancellationLines, onChange: (e) => setCancelShipping(e.target.checked) }), t('cancelAndRefund.cancelShipping')] }), !hasCancellationLines && (_jsx("p", { className: "text-xs text-muted-foreground", children: t('cancelAndRefund.cancelShippingRequiresLines') })), _jsx("label", { className: "block text-sm", children: t('refund.amount') }), _jsx(Input, { type: "number", min: 0, step: 1, value: manualAmount, placeholder: String(suggestedAmount), onChange: (e) => setManualAmount(e.target.value) }), _jsxs("p", { className: "text-sm text-muted-foreground", children: [t('cancelAndRefund.suggestedAmount'), ": ", priceFormatter(suggestedAmount, order.currencyCode)] })] }), _jsxs("div", { className: "space-y-3", children: [_jsx("label", { className: "block text-sm", children: t('cancelAndRefund.reason') }), _jsx(Textarea, { value: reason, onChange: (e) => setReason(e.target.value) }), capacities.map((payment) => (_jsxs("div", { className: "grid grid-cols-[1fr_140px] items-center gap-2 text-sm", children: [_jsxs("span", { children: [payment.paymentId, " (", priceFormatter(payment.capacity, order.currencyCode), ")"] }), _jsx(Input, { type: "number", min: 0, max: payment.capacity, step: 1, placeholder: t('cancelAndRefund.auto'), value: allocationOverrides[payment.paymentId] ?? '', onChange: (e) => setAllocationOverrides((current) => ({ ...current, [payment.paymentId]: e.target.value })) })] }, payment.paymentId)))] })] }), error && (_jsx("p", { role: "alert", className: "text-sm text-destructive", children: error })), _jsxs(DialogFooter, { className: "mt-auto", children: [_jsx(Button, { variant: "outline", onClick: () => setOpen(false), children: t('payments.cancel') }), _jsxs(Button, { disabled: submitting, onClick: submit, children: [_jsx(Undo2, { className: "mr-2 h-4 w-4" }), t('cancelAndRefund.submit')] })] })] })] }));
 };

package/dist/pages/orders/_components/Payments.js

@@ -1,16 +1,18 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import { useOrder, Button, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, ScrollArea, Badge, DropdownMenuItem, ContextMenu, ConfirmationDialog, CustomCard, EmptyState, useTranslation, apiClient, DialogTrigger, Input, priceFormatter, } from '@deenruv/react-ui-devkit';
+import { useOrder, Button, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, ScrollArea, Badge, DropdownMenuItem, ContextMenu, ConfirmationDialog, CustomCard, EmptyState, useTranslation, apiClient, DialogTrigger, Input, priceFormatter, useServer, } from '@deenruv/react-ui-devkit';
 import { format } from 'date-fns';
 import { CreditCard, Calendar, CheckCircle2, XCircle, Clock, AlertCircle, Wallet, Receipt, CheckCircle, Ban, ArrowDownCircle, ArrowUpCircle, RefreshCcw, } from 'lucide-react';
 import { useState } from 'react';
 import { AddPaymentDialog } from './index.js';
 import { PAYMENT_STATE } from "../../../graphql/base";
+import { Permission } from '@deenruv/admin-types';
 import { MetadataDisplay } from './PaymentMetadata.js';
 export const Payments = () => {
     const { order, addPaymentToOrder, settlePayment, cancelPayment } = useOrder();
     const { t } = useTranslation('orders');
+    const canUpdateOrder = useServer((state) => state.userPermissions.includes(Permission.UpdateOrder));
     const [paymentToBeSettled, setPaymentToBeSettled] = useState('');
     const [expandedRefunds, setExpandedRefunds] = useState([]);
     if (!order)
@@ -77,37 +79,51 @@ export const Payments = () => {
     const toggleRefundExpand = (id) => {
         setExpandedRefunds((prev) => (prev.includes(id) ? prev.filter((item) => item !== id) : [...prev, id]));
     };
-    const [settleRefundTransactionId, setSettleRefundTransactionId] = useState(null);
-    const settleRefund = async (id) => {
-        if (!settleRefundTransactionId) {
-            return;
+    const [settleRefundTransactionId, setSettleRefundTransactionId] = useState('');
+    const [refundToSettle, setRefundToSettle] = useState('');
+    const [settleRefundError, setSettleRefundError] = useState('');
+    const settleRefund = async () => {
+        const transactionId = settleRefundTransactionId.trim();
+        if (!transactionId)
+            return setSettleRefundError(t('refunds.transactionRequired', 'Transaction ID is required'));
+        try {
+            const { settleRefund } = await apiClient('mutation')({
+                settleRefund: [
+                    { input: { id: refundToSettle, transactionId } },
+                    {
+                        __typename: true,
+                        '...on Refund': { id: true },
+                        '...on RefundStateTransitionError': { errorCode: true, fromState: true, message: true },
+                    },
+                ],
+            });
+            if (settleRefund.__typename === 'Refund') {
+                await useOrder.getState().fetchOrder(order.id);
+                await useOrder.getState().fetchOrderHistory();
+                setSettleRefundTransactionId('');
+                setRefundToSettle('');
+                setSettleRefundError('');
+            }
+            else {
+                setSettleRefundError(settleRefund.message);
+            }
         }
-        const { settleRefund } = await apiClient('mutation')({
-            settleRefund: [
-                { input: { id, transactionId: settleRefundTransactionId } },
-                {
-                    __typename: true,
-                    '...on Refund': { id: true },
-                    '...on RefundStateTransitionError': { errorCode: true, fromState: true, message: true },
-                },
-            ],
-        });
-        if (settleRefund.__typename === 'Refund') {
-            setSettleRefundTransactionId(null);
-        }
-        else {
-            console.error(settleRefund);
+        catch (error) {
+            setSettleRefundError(error instanceof Error ? error.message : t('refunds.settleError', 'Could not settle refund'));
         }
     };
-    return (_jsxs(CustomCard, { color: "teal", description: t('payments.subTitle'), title: t('payments.title'), icon: _jsx(Wallet, { className: "size-5 text-teal-500 dark:text-teal-400" }), upperRight: _jsx(AddPaymentDialog, { order: order, onSubmit: (v) => addPaymentToOrder(v) }), children: [_jsx(Dialog, { open: !!paymentToBeSettled, onOpenChange: () => setPaymentToBeSettled(''), children: _jsxs(DialogContent, { className: "max-w-md", children: [_jsxs(DialogHeader, { children: [_jsxs("div", { className: "mb-2 flex items-center gap-2", children: [_jsx(CheckCircle2, { className: "size-5 text-teal-500" }), _jsx(DialogTitle, { children: t('payments.settle.title', 'Settle Payment') })] }), _jsx(DialogDescription, { children: t('payments.settle.description', 'Are you sure you want to settle this payment? This action cannot be undone.') })] }), _jsxs(DialogFooter, { className: "mt-4 gap-2", children: [_jsx(DialogClose, { asChild: true, children: _jsx(Button, { variant: "outline", children: t('payments.settle.cancel', 'Cancel') }) }), _jsxs(Button, { variant: "default", onClick: () => settlePayment({ id: paymentToBeSettled }), className: "gap-2", children: [_jsx(CheckCircle2, { className: "size-4" }), t('payments.settle.confirm', 'Confirm Settlement')] })] })] }) }), _jsx(ScrollArea, { className: "max-h-[400px] px-6", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { noHover: true, className: "border-b border-border", children: [_jsx(TableHead, { className: "w-[80px] py-3", children: t('payments.id') }), _jsx(TableHead, { className: "py-3", children: t('payments.created') }), _jsx(TableHead, { className: "py-3", children: t('payments.method') }), _jsx(TableHead, { className: "py-3", children: t('payments.status') }), _jsx(TableHead, { className: "py-3", children: t('payments.amount') }), _jsx(TableHead, { className: "py-3", children: t('payments.refunds', 'Refunds') }), _jsx(TableHead, { className: "py-3 text-center", children: t('payments.extra') }), _jsx(TableHead, { className: "ml-auto py-3" })] }) }), _jsx(TableBody, { children: payments?.length ? (payments.map(({ amount, id, method, state, createdAt, metadata, refunds, transactionId }) => {
+    return (_jsxs(CustomCard, { color: "teal", description: t('payments.subTitle'), title: t('payments.title'), icon: _jsx(Wallet, { className: "size-5 text-teal-500 dark:text-teal-400" }), upperRight: canUpdateOrder ? _jsx(AddPaymentDialog, { order: order, onSubmit: (v) => addPaymentToOrder(v) }) : undefined, children: [_jsx(Dialog, { open: !!paymentToBeSettled, onOpenChange: () => setPaymentToBeSettled(''), children: _jsxs(DialogContent, { className: "max-w-md", children: [_jsxs(DialogHeader, { children: [_jsxs("div", { className: "mb-2 flex items-center gap-2", children: [_jsx(CheckCircle2, { className: "size-5 text-teal-500" }), _jsx(DialogTitle, { children: t('payments.settle.title', 'Settle Payment') })] }), _jsx(DialogDescription, { children: t('payments.settle.description', 'Are you sure you want to settle this payment? This action cannot be undone.') })] }), _jsxs(DialogFooter, { className: "mt-4 gap-2", children: [_jsx(DialogClose, { asChild: true, children: _jsx(Button, { variant: "outline", children: t('payments.settle.cancel', 'Cancel') }) }), _jsxs(Button, { variant: "default", onClick: () => settlePayment({ id: paymentToBeSettled }).then(() => setPaymentToBeSettled('')), className: "gap-2", children: [_jsx(CheckCircle2, { className: "size-4" }), t('payments.settle.confirm', 'Confirm Settlement')] })] })] }) }), _jsx(ScrollArea, { className: "max-h-[400px] px-6", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { noHover: true, className: "border-b border-border", children: [_jsx(TableHead, { className: "w-[80px] py-3", children: t('payments.id') }), _jsx(TableHead, { className: "py-3", children: t('payments.created') }), _jsx(TableHead, { className: "py-3", children: t('payments.method') }), _jsx(TableHead, { className: "py-3", children: t('payments.status') }), _jsx(TableHead, { className: "py-3", children: t('payments.amount') }), _jsx(TableHead, { className: "py-3", children: t('payments.refunds', 'Refunds') }), _jsx(TableHead, { className: "py-3 text-center", children: t('payments.extra') }), _jsx(TableHead, { className: "ml-auto py-3" })] }) }), _jsx(TableBody, { children: payments?.length ? (payments.map(({ amount, id, method, state, createdAt, metadata, refunds }) => {
                                 const statusBadge = getStatusBadge(state);
                                 const hasRefunds = refunds && refunds.length > 0;
                                 const isRefundExpanded = expandedRefunds.includes(id);
                                 const totalRefunded = hasRefunds ? refunds.reduce((sum, refund) => sum + refund.total, 0) : 0;
-                                return (_jsxs(React.Fragment, { children: [_jsxs(TableRow, { noHover: true, className: "group", children: [_jsx(TableCell, { className: "py-3 font-mono text-xs text-muted-foreground", children: id }), _jsx(TableCell, { className: "py-3", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Calendar, { className: "size-4 text-teal-500 dark:text-teal-400" }), _jsx("span", { children: format(new Date(createdAt), 'dd/LL/Y, kk:mm') })] }) }), _jsx(TableCell, { className: "py-3", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(CreditCard, { className: "size-4 text-teal-500 dark:text-teal-400" }), _jsx("span", { className: "font-medium", children: method })] }) }), _jsx(TableCell, { className: "py-3", children: _jsxs(Badge, { variant: statusBadge.variant, className: "flex w-fit items-center gap-1", children: [statusBadge.icon, statusBadge.label] }) }), _jsx(TableCell, { className: "py-3 font-mono text-sm font-medium", children: priceFormatter(amount, order.currencyCode) }), _jsx(TableCell, { className: "py-3", children: hasRefunds ? (_jsx("div", { className: "flex flex-col gap-1", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(RefreshCcw, { className: "size-4 text-orange-500 dark:text-orange-400" }), _jsx("span", { className: "font-mono text-sm font-medium text-orange-600 dark:text-orange-400", children: priceFormatter(totalRefunded, order.currencyCode) }), _jsx(Button, { variant: "ghost", size: "sm", className: "h-6 p-0", onClick: () => toggleRefundExpand(id), children: isRefundExpanded ? (_jsx(ArrowUpCircle, { className: "size-4 text-muted-foreground" })) : (_jsx(ArrowDownCircle, { className: "size-4 text-muted-foreground" })) })] }) })) : (_jsx("span", { className: "text-sm text-muted-foreground", children: "-" })) }), _jsx(TableCell, { className: "flex items-center justify-center", children: _jsx(MetadataDisplay, { metadata: metadata }) }), _jsx(TableCell, { className: "py-3 text-end", children: _jsxs(ContextMenu, { children: [state !== PAYMENT_STATE.SETTLED && state !== PAYMENT_STATE.CANCELLED && (_jsxs(DropdownMenuItem, { onClick: () => setPaymentToBeSettled(id), className: "flex cursor-pointer items-center gap-2", children: [_jsx(CheckCircle2, { size: 16 }), t('payments.settle.settle', 'Settle')] }, 'set')), !hasRefunds && state !== PAYMENT_STATE.CANCELLED && (_jsx(ConfirmationDialog, { onConfirm: () => cancelPayment(id), children: _jsxs(DropdownMenuItem, { className: "flex cursor-pointer items-center gap-2 text-red-500", onSelect: (e) => e.preventDefault(), children: [_jsx(XCircle, { size: 16 }), t('payments.cancel', 'Cancel')] }, 'cancel') }))] }) })] }), hasRefunds && isRefundExpanded && (_jsx(TableRow, { noHover: true, className: "bg-muted/30", children: _jsx(TableCell, { colSpan: 8, className: "p-0", children: _jsxs("div", { className: "px-8 py-3", children: [_jsx("div", { className: "mb-2 text-sm font-medium", children: t('refunds.details', 'Refund Details') }), _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { noHover: true, className: "border-b border-border", children: [_jsx(TableHead, { className: "py-2 text-xs", children: t('refunds.state', 'Status') }), _jsx(TableHead, { className: "py-2 text-xs", children: t('refunds.amount', 'Amount') }), _jsx(TableHead, { className: "py-2 text-xs", children: t('refunds.items', 'Items') }), refunds.some((refund) => refund.state.toLowerCase() === 'pending') && (_jsx(TableHead, { className: "py-2 text-xs", children: t('refunds.actions', 'Actions') }))] }) }), _jsx(TableBody, { children: refunds.map((refund, index) => {
+                                return (_jsxs(React.Fragment, { children: [_jsxs(TableRow, { noHover: true, className: "group", children: [_jsx(TableCell, { className: "py-3 font-mono text-xs text-muted-foreground", children: id }), _jsx(TableCell, { className: "py-3", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Calendar, { className: "size-4 text-teal-500 dark:text-teal-400" }), _jsx("span", { children: format(new Date(createdAt), 'dd/LL/Y, kk:mm') })] }) }), _jsx(TableCell, { className: "py-3", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(CreditCard, { className: "size-4 text-teal-500 dark:text-teal-400" }), _jsx("span", { className: "font-medium", children: method })] }) }), _jsx(TableCell, { className: "py-3", children: _jsxs(Badge, { variant: statusBadge.variant, className: "flex w-fit items-center gap-1", children: [statusBadge.icon, statusBadge.label] }) }), _jsx(TableCell, { className: "py-3 font-mono text-sm font-medium", children: priceFormatter(amount, order.currencyCode) }), _jsx(TableCell, { className: "py-3", children: hasRefunds ? (_jsx("div", { className: "flex flex-col gap-1", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(RefreshCcw, { className: "size-4 text-orange-500 dark:text-orange-400" }), _jsx("span", { className: "font-mono text-sm font-medium text-orange-600 dark:text-orange-400", children: priceFormatter(totalRefunded, order.currencyCode) }), _jsx(Button, { variant: "ghost", size: "sm", className: "h-6 p-0", onClick: () => toggleRefundExpand(id), children: isRefundExpanded ? (_jsx(ArrowUpCircle, { className: "size-4 text-muted-foreground" })) : (_jsx(ArrowDownCircle, { className: "size-4 text-muted-foreground" })) })] }) })) : (_jsx("span", { className: "text-sm text-muted-foreground", children: "-" })) }), _jsx(TableCell, { className: "flex items-center justify-center", children: _jsx(MetadataDisplay, { metadata: metadata }) }), _jsx(TableCell, { className: "py-3 text-end", children: canUpdateOrder && (_jsxs(ContextMenu, { children: [state !== PAYMENT_STATE.SETTLED && state !== PAYMENT_STATE.CANCELLED && (_jsxs(DropdownMenuItem, { onClick: () => setPaymentToBeSettled(id), className: "flex cursor-pointer items-center gap-2", children: [_jsx(CheckCircle2, { size: 16 }), t('payments.settle.settle', 'Settle')] }, 'set')), !hasRefunds && state !== PAYMENT_STATE.CANCELLED && (_jsx(ConfirmationDialog, { onConfirm: () => cancelPayment(id), children: _jsxs(DropdownMenuItem, { className: "flex cursor-pointer items-center gap-2 text-red-500", onSelect: (e) => e.preventDefault(), children: [_jsx(XCircle, { size: 16 }), t('payments.cancel', 'Cancel')] }, 'cancel') }))] })) })] }), hasRefunds && isRefundExpanded && (_jsx(TableRow, { noHover: true, className: "bg-muted/30", children: _jsx(TableCell, { colSpan: 8, className: "p-0", children: _jsxs("div", { className: "px-8 py-3", children: [_jsx("div", { className: "mb-2 text-sm font-medium", children: t('refunds.details', 'Refund Details') }), _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { noHover: true, className: "border-b border-border", children: [_jsx(TableHead, { className: "py-2 text-xs", children: t('refunds.state', 'Status') }), _jsx(TableHead, { className: "py-2 text-xs", children: t('refunds.amount', 'Amount') }), _jsx(TableHead, { className: "py-2 text-xs", children: t('refunds.items', 'Items') }), refunds.some((refund) => refund.state.toLowerCase() === 'pending') && (_jsx(TableHead, { className: "py-2 text-xs", children: t('refunds.actions', 'Actions') }))] }) }), _jsx(TableBody, { children: refunds.map((refund, index) => {
                                                                         const refundStatusBadge = getRefundStatusBadge(refund.state);
                                                                         const state = refund.state.toLowerCase();
-                                                                        return (_jsxs(TableRow, { noHover: true, className: "border-b border-border/50", children: [_jsx(TableCell, { className: "py-2", children: _jsxs(Badge, { variant: refundStatusBadge.variant, className: "flex w-fit items-center gap-1", children: [refundStatusBadge.icon, refundStatusBadge.label] }) }), _jsx(TableCell, { className: "py-2 font-mono text-sm", children: priceFormatter(refund.total, order.currencyCode) }), _jsx(TableCell, { className: "py-2", children: _jsx("div", { className: "text-sm", children: refund.lines.map((line, lineIndex) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("span", { className: "font-mono text-xs text-muted-foreground", children: [line.orderLineId, " |"] }), _jsxs("span", { className: "text-xs", children: ["\u00D7", line.quantity] })] }, `${id}-refund-${index}-line-${lineIndex}`))) }) }), state === 'pending' && (_jsx(TableCell, { className: "py-2", children: _jsxs(Dialog, { children: [_jsx(DialogTrigger, { asChild: true, children: _jsx(Button, { children: "Settle refund" }) }), _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Settle refund" }), _jsx(DialogDescription, { children: "After manually refunding via your payment provider (standard-payment), enter the transaction ID here." })] }), _jsx("div", { children: _jsx(Input, { placeholder: "Transaction ID", value: settleRefundTransactionId || '', onChange: (e) => setSettleRefundTransactionId(e.target.value) }) }), _jsxs(DialogFooter, { children: [_jsx(DialogClose, { asChild: true, children: _jsx(Button, { variant: "outline", children: t('payments.settle.cancel', 'Cancel') }) }), _jsxs(Button, { variant: "default", onClick: () => settleRefund(refund.id), className: "gap-2", children: [_jsx(CheckCircle2, { className: "size-4" }), t('payments.settle.confirm', 'Confirm Settlement')] })] })] })] }) }))] }, `${id}-refund-${index}`));
+                                                                        return (_jsxs(TableRow, { noHover: true, className: "border-b border-border/50", children: [_jsx(TableCell, { className: "py-2", children: _jsxs(Badge, { variant: refundStatusBadge.variant, className: "flex w-fit items-center gap-1", children: [refundStatusBadge.icon, refundStatusBadge.label] }) }), _jsx(TableCell, { className: "py-2 font-mono text-sm", children: priceFormatter(refund.total, order.currencyCode) }), _jsx(TableCell, { className: "py-2", children: _jsx("div", { className: "text-sm", children: refund.lines.map((line, lineIndex) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("span", { className: "font-mono text-xs text-muted-foreground", children: [line.orderLineId, " |"] }), _jsxs("span", { className: "text-xs", children: ["\u00D7", line.quantity] })] }, `${id}-refund-${index}-line-${lineIndex}`))) }) }), state === 'pending' && canUpdateOrder && (_jsx(TableCell, { className: "py-2", children: _jsxs(Dialog, { open: refundToSettle === refund.id, onOpenChange: (nextOpen) => {
+                                                                                            setRefundToSettle(nextOpen ? refund.id : '');
+                                                                                            setSettleRefundError('');
+                                                                                        }, children: [_jsx(DialogTrigger, { asChild: true, children: _jsx(Button, { children: "Settle refund" }) }), _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Settle refund" }), _jsx(DialogDescription, { children: "After manually refunding via your payment provider (standard-payment), enter the transaction ID here." })] }), _jsx("div", { children: _jsx(Input, { placeholder: "Transaction ID", value: settleRefundTransactionId, onChange: (e) => setSettleRefundTransactionId(e.target.value) }) }), settleRefundError && (_jsx("p", { role: "alert", className: "text-sm text-destructive", children: settleRefundError })), _jsxs(DialogFooter, { children: [_jsx(DialogClose, { asChild: true, children: _jsx(Button, { variant: "outline", children: t('payments.settle.cancel', 'Cancel') }) }), _jsxs(Button, { variant: "default", onClick: settleRefund, className: "gap-2", children: [_jsx(CheckCircle2, { className: "size-4" }), t('payments.settle.confirm', 'Confirm Settlement')] })] })] })] }) }))] }, `${id}-refund-${index}`));
                                                                     }) })] })] }) }) }))] }, id));
                             })) : (_jsx(EmptyState, { columnsLength: 8, title: t('payments.notFound', 'No payments found'), color: "teal", description: t('payments.addPaymentHint'), small: true, icon: _jsx(Receipt, {}) })) })] }) })] }));
 };

package/dist/pages/orders/_components/ProductsTable.js

@@ -1,28 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { OrderLineCustomFields } from "./OrderLineCustomFields.js";
-import { Checkbox, ImageWithPreview, Input, Label, priceFormatter, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, useOrder, useTranslation, } from '@deenruv/react-ui-devkit';
-import { Tag } from 'lucide-react';
-import { useCallback } from 'react';
-export const ProductsTable = ({ setRefundLines, refundLines }) => {
+import { ImageWithPreview, Input, getRefundedQuantities, priceFormatter, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, useOrder, useTranslation, } from '@deenruv/react-ui-devkit';
+export const ProductsTable = ({ selections, setSelections }) => {
     const { t } = useTranslation('orders');
-    const { mode, currentOrder } = useOrder();
-    const handleLineChange = useCallback((lineId, quantity) => {
-        const existingLineIdx = refundLines.findIndex((l) => l.orderLineId === lineId);
-        console.log('EL', existingLineIdx);
-        setRefundLines((prev) => {
-            const newState = [...prev];
-            if (existingLineIdx !== -1) {
-                newState[existingLineIdx].quantity = quantity;
-            }
-            else {
-                newState.push({ orderLineId: lineId, quantity });
-            }
-            return newState;
-        });
-    }, [refundLines]);
-    return (_jsx("div", { className: "rounded-lg border-0 border-border shadow-sm", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { noHover: true, className: "hover:bg-transparent", children: [_jsx(TableHead, { className: "py-3 font-semibold", children: t('create.product', 'Product') }), _jsx(TableHead, { className: "py-3 font-semibold", children: t('create.sku', 'SKU') }), _jsx(TableHead, { className: "py-3 font-semibold", children: t('create.customFields', 'Custom Fields') }), _jsx(TableHead, { className: "py-3 font-semibold", children: t('create.price', 'Price') }), _jsx(TableHead, { className: "py-3 font-semibold", children: t('create.priceWithTax', 'Price with Tax') }), _jsx(TableHead, { className: "py-3 font-semibold", children: t('cancelAndRefund.refund') }), _jsx(TableHead, { className: "py-3 font-semibold", children: t('cancelAndRefund.returnToStock') })] }) }), _jsx(TableBody, { children: currentOrder.lines.map((line) => (_jsxs(TableRow, { className: "hover:bg-muted/20", children: [_jsx(TableCell, { className: "py-3", children: _jsxs("div", { className: "flex w-max items-center gap-3", children: [_jsx(ImageWithPreview, { imageClassName: "aspect-square w-12 h-12 rounded-md object-cover border border-border", src: line.productVariant.featuredAsset?.preview ||
-                                                line.productVariant.product?.featuredAsset?.preview ||
-                                                '/placeholder.svg' }), _jsx("div", { className: "font-medium text-primary", children: line.productVariant.product.name })] }) }), _jsx(TableCell, { className: "min-w-[200px] py-3 font-mono text-sm text-muted-foreground", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Tag, { className: "h-4 w-4 text-blue-500 dark:text-blue-400" }), line.productVariant.sku] }) }), _jsx(TableCell, { className: "py-3", children: _jsx(OrderLineCustomFields, { line: line, order: currentOrder, mode: mode }) }), _jsx(TableCell, { className: "py-3 font-medium", children: priceFormatter(line.linePrice, line.productVariant.currencyCode) }), _jsx(TableCell, { className: "py-3 font-medium", children: priceFormatter(line.linePriceWithTax, line.productVariant.currencyCode) }), _jsx(TableCell, { className: "py-3", children: _jsx(Input, { type: "number", wrapperClassName: "w-24", endAdornment: '/' + line.quantity, defaultValue: 0, max: line.quantity, onChange: (e) => {
-                                        handleLineChange(line.id, +e.target.value);
-                                    } }) }), _jsx(TableCell, { className: "py-3", children: _jsxs("div", { className: "flex gap-2", children: [_jsx(Checkbox, {}), _jsx(Label, { children: t('cancelAndRefund.returnToStock') })] }) })] }, line.id))) })] }) }));
+    const { order } = useOrder();
+    if (!order)
+        return null;
+    const refundedQuantities = getRefundedQuantities(order.payments ?? []);
+    const update = (id, key, value) => setSelections((current) => ({
+        ...current,
+        [id]: { ...(current[id] ?? { refundQuantity: 0, cancelQuantity: 0 }), [key]: value },
+    }));
+    return (_jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: t('create.product') }), _jsx(TableHead, { children: t('create.sku') }), _jsx(TableHead, { children: t('create.priceWithTax') }), _jsx(TableHead, { children: t('cancelAndRefund.refundQuantity') }), _jsx(TableHead, { children: t('cancelAndRefund.returnToStock') })] }) }), _jsx(TableBody, { children: order.lines.map((line) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx(ImageWithPreview, { imageClassName: "size-12 rounded-md object-cover", src: line.productVariant.featuredAsset?.preview ||
+                                            line.productVariant.product?.featuredAsset?.preview ||
+                                            '/placeholder.svg' }), _jsx("span", { children: line.productVariant.product.name })] }) }), _jsx(TableCell, { children: line.productVariant.sku }), _jsx(TableCell, { children: priceFormatter(line.proratedUnitPriceWithTax, order.currencyCode) }), _jsx(TableCell, { children: _jsx(Input, { type: "number", min: 0, max: Math.max(0, line.orderPlacedQuantity - (refundedQuantities[line.id] ?? 0)), step: 1, value: selections[line.id]?.refundQuantity ?? 0, onChange: (e) => update(line.id, 'refundQuantity', Number(e.target.value)) }) }), _jsx(TableCell, { children: _jsx(Input, { type: "number", min: 0, max: line.quantity, step: 1, value: selections[line.id]?.cancelQuantity ?? 0, onChange: (e) => update(line.id, 'cancelQuantity', Number(e.target.value)) }) })] }, line.id))) })] }));
 };

package/dist/pages/orders/_components/TopActions.js

@@ -3,7 +3,7 @@ import { AlertDialogHeader, AlertDialogFooter, Button, DropdownMenu, AlertDialog
 import { FulfillmentModal } from "./FulfillmentModal";
 import { ManualOrderChangeModal } from "./ManualOrderChangeModal";
 import { PossibleOrderStates } from "./PossibleOrderStates";
-import { DeletionResult, HistoryEntryType } from '@deenruv/admin-types';
+import { DeletionResult, HistoryEntryType, Permission } from '@deenruv/admin-types';
 import { ChevronLeft, EllipsisVerticalIcon, Info } from 'lucide-react';
 import { useMemo, useState } from 'react';
 import { useShallow } from 'zustand/react/shallow';
@@ -16,6 +16,9 @@ import React from 'react';
 export const TopActions = () => {
     const { currentPossibilities, manualChange, setManualChange, fetchOrderHistory, fetchOrder, order, changeOrderState, cancelOrder: _cancelOrder, cancelAndRefundOrder, } = useOrder();
     const orderProcess = useServer(useShallow((p) => p.serverConfig?.orderProcess || []));
+    const userPermissions = useServer((state) => state.userPermissions);
+    const canUpdateOrder = userPermissions.includes(Permission.UpdateOrder);
+    const canDeleteOrder = userPermissions.includes(Permission.DeleteOrder);
     const { t } = useTranslation('orders');
     const navigate = useNavigate();
     const { getDetailViewActions } = usePluginStore();
@@ -115,12 +118,15 @@ export const TopActions = () => {
         .catch((err) => {
         toast.error(t('topActions.orderCancelError', { value: err.message }));
     });
-    const cancelAndRefund = (amount, lines, reason, shipping, cancelShipping, adjustment) => cancelAndRefundOrder({ adjustment, amount, cancelShipping, lines, reason, shipping })
-        .then(() => {
-        toast.info(t('topActions.orderRefundedSuccessfully'));
+    const cancelAndRefund = (input) => cancelAndRefundOrder(input)
+        .then((result) => {
+        toast.info(result?.outcome === 'cancellation'
+            ? t('topActions.orderCanceledSuccessfully')
+            : t('topActions.orderRefundedSuccessfully'));
     })
-        .catch(() => {
+        .catch((error) => {
         toast.error(t('topActions.orderRefundError'));
+        throw error;
     });
     const deleteDraftOrder = async () => {
         if (!order)
@@ -206,15 +212,15 @@ export const TopActions = () => {
                     }
                     else
                         navigate(Routes.orders.list, { viewTransition: true });
-                }, children: [_jsx(ChevronLeft, { className: "size-4" }), _jsx("span", { className: "sr-only", children: t('create.back') })] }), _jsx("h1", { className: "flex-1 shrink-0 text-xl font-semibold tracking-tight whitespace-nowrap sm:grow-0", children: t('create.orderId', { value: order?.id }) }), _jsx(OrderStateBadge, { state: order?.state }), _jsxs("div", { className: "hidden items-center gap-2 md:ml-auto md:flex", children: [actions?.inline?.map(({ component }) => React.createElement(component)) || null, exitingModifyStates ? (_jsx(Button, { size: "sm", onClick: onSubmit, disabled: !isOrderValid, children: order.state === ORDER_STATE.ARRANGING_ADDITIONAL_PAYMENT
+                }, children: [_jsx(ChevronLeft, { className: "size-4" }), _jsx("span", { className: "sr-only", children: t('create.back') })] }), _jsx("h1", { className: "flex-1 shrink-0 text-xl font-semibold tracking-tight whitespace-nowrap sm:grow-0", children: t('create.orderId', { value: order?.id }) }), _jsx(OrderStateBadge, { state: order?.state }), canUpdateOrder && (_jsxs("div", { className: "hidden items-center gap-2 md:ml-auto md:flex", children: [actions?.inline?.map(({ component }) => React.createElement(component)) || null, exitingModifyStates ? (_jsx(Button, { size: "sm", onClick: onSubmit, disabled: !isOrderValid, children: order.state === ORDER_STATE.ARRANGING_ADDITIONAL_PAYMENT
                             ? t('create.addPaymentButton')
                             : t('create.completeOrderButton') })) : needFulfillment ? (_jsx(FulfillmentModal, { order: order, onSubmitted: fulfillOrder, disabled: !canAddFulfillment })) : inModifyState ? (_jsx(ModifyAcceptModal, {})) : null, (order.state === ORDER_STATE.ARRANGING_PAYMENT ||
-                        order.state === ORDER_STATE.ARRANGING_ADDITIONAL_PAYMENT) && (_jsxs("div", { className: "flex items-center gap-2 text-sm", children: [_jsx(Info, { size: 20, className: "text-blue-500" }), _jsx("p", { children: t('addPaymentInfo') })] })), order.state === ORDER_STATE.SHIPPED && (_jsxs("div", { className: "flex items-center gap-2 text-sm", children: [_jsx(Info, { size: 20, className: "text-blue-500" }), _jsx("p", { children: t('markFulfillmentInfo') })] }))] }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", size: "icon", children: _jsx(EllipsisVerticalIcon, { className: "size-4" }) }) }), _jsxs(DropdownMenuContent, { align: "end", children: [_jsx(DropdownMenuItem, { asChild: true, children: _jsx(PossibleOrderStates, { orderState: order.state }) }), order.state !== ORDER_STATE.CANCELLED &&
+                        order.state === ORDER_STATE.ARRANGING_ADDITIONAL_PAYMENT) && (_jsxs("div", { className: "flex items-center gap-2 text-sm", children: [_jsx(Info, { size: 20, className: "text-blue-500" }), _jsx("p", { children: t('addPaymentInfo') })] })), order.state === ORDER_STATE.SHIPPED && (_jsxs("div", { className: "flex items-center gap-2 text-sm", children: [_jsx(Info, { size: 20, className: "text-blue-500" }), _jsx("p", { children: t('markFulfillmentInfo') })] }))] })), canUpdateOrder && (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", size: "icon", children: _jsx(EllipsisVerticalIcon, { className: "size-4" }) }) }), _jsxs(DropdownMenuContent, { align: "end", children: [_jsx(DropdownMenuItem, { asChild: true, children: _jsx(PossibleOrderStates, { orderState: order.state }) }), order.state !== ORDER_STATE.CANCELLED &&
                                 order.state !== ORDER_STATE.DRAFT &&
                                 currentPossibilities?.to.length && (_jsx(DropdownMenuItem, { asChild: true, children: _jsx(Button, { onClick: () => setManualChange({ state: true, toAction: undefined }), variant: "ghost", className: "w-full cursor-pointer justify-start px-4 py-2 text-orange-400 hover:text-orange-400 focus-visible:ring-transparent dark:text-orange-400 dark:hover:text-orange-400 dark:focus-visible:ring-transparent", children: t('topActions.manualChangeStatus') }) })), actions?.dropdown?.map(({ component }) => React.createElement(component)) || null, order.state === ORDER_STATE.PARTIALLY_DELIVERED ||
                                 order.state === ORDER_STATE.SHIPPED ||
                                 order.state === ORDER_STATE.PAYMENT_SETTLED ||
                                 order.state === ORDER_STATE.PAYMENT_AUTHORIZED ||
                                 order.state === ORDER_STATE.PARTIALLY_SHIPPED ? (_jsx(DropdownMenuItem, { asChild: true, children: _jsx(Button, { variant: "ghost", className: "w-full cursor-pointer justify-start px-4 py-2 text-blue-400 hover:text-blue-400 dark:text-blue-400 dark:hover:text-blue-400", onClick: changeOrderStatus.bind(null, ORDER_STATE.MODIFYING), children: t('create.modifyOrder') }) })) : null, order.state === ORDER_STATE.ARRANGING_PAYMENT && (_jsx(DropdownMenuItem, { asChild: true, children: _jsx(ConfirmationDialog, { onConfirm: () => cancelOrder(), title: t('create.areYouSure'), description: t('create.cancelOrderMessage'), additionalElement: _jsx(SimpleSelect, { label: t('cancellationLabel'), value: cancellationReason, onValueChange: setCancellationReason, options: reasonOptions }), children: _jsx(Button, { variant: "ghost", className: "w-full justify-start px-4 py-2 text-red-400 hover:text-red-400 dark:text-red-400 dark:hover:text-red-400", children: t('create.cancelOrder') }) }) })), (order.state === ORDER_STATE.PAYMENT_SETTLED ||
-                                order.state === ORDER_STATE.ARRANGING_ADDITIONAL_PAYMENT) && (_jsx(CancelAndRefundDialog, { refundReason: cancellationReason, setRefundReason: setCancellationReason, onConfirm: cancelAndRefund })), order.state === ORDER_STATE.DRAFT && (_jsx(DropdownMenuItem, { asChild: true, children: _jsxs(AlertDialog, { children: [_jsx(AlertDialogTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", className: "w-full justify-start px-4 py-2 text-red-400 hover:text-red-400 dark:hover:text-red-400", children: t('deleteDraft.button') }) }), _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: t('deleteDraft.title') }), _jsx(AlertDialogDescription, { children: t('deleteDraft.descriptionDraft') })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: t('deleteDraft.cancel') }), _jsx(AlertDialogAction, { onClick: () => deleteDraftOrder(), children: t('deleteDraft.confirm') })] })] })] }) }))] })] })] }));
+                                order.state === ORDER_STATE.ARRANGING_ADDITIONAL_PAYMENT) && (_jsx(CancelAndRefundDialog, { onConfirm: cancelAndRefund })), order.state === ORDER_STATE.DRAFT && canDeleteOrder && (_jsx(DropdownMenuItem, { asChild: true, children: _jsxs(AlertDialog, { children: [_jsx(AlertDialogTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", className: "w-full justify-start px-4 py-2 text-red-400 hover:text-red-400 dark:hover:text-red-400", children: t('deleteDraft.button') }) }), _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: t('deleteDraft.title') }), _jsx(AlertDialogDescription, { children: t('deleteDraft.descriptionDraft') })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: t('deleteDraft.cancel') }), _jsx(AlertDialogAction, { onClick: () => deleteDraftOrder(), children: t('deleteDraft.confirm') })] })] })] }) }))] })] }))] }));
 };

package/dist/pages/payment-methods/Detail.js

@@ -2,6 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback } from 'react';
 import { useParams } from 'react-router';
 import { useValidators, DetailView, createDeenruvForm, useMutation, getMutation, useTranslation, } from '@deenruv/react-ui-devkit';
+import { Permission } from '@deenruv/admin-types';
 import { PaymentMethodDetailView } from "./_components/PaymentMethodDetailView.js";
 const CreatePaymentMethodMutation = getMutation('createPaymentMethod');
 const EditPaymentMethodMutation = getMutation('updatePaymentMethod');
@@ -64,5 +65,9 @@ export const PaymentMethodsDetailPage = () => {
                     onSubmitted: onSubmitHandler,
                     onDeleted: onDeleteHandler,
                 }),
+            }, permissions: {
+                create: [Permission.CreatePaymentMethod, Permission.CreateSettings],
+                edit: [Permission.UpdatePaymentMethod, Permission.UpdateSettings],
+                delete: [Permission.DeletePaymentMethod, Permission.DeleteSettings],
             } }) }));
 };

package/dist/pages/payment-methods/List.js

@@ -37,5 +37,5 @@ export const PaymentMethodsListPage = () => {
             { key: 'name', operator: 'StringOperators' },
             { key: 'code', operator: 'StringOperators' },
             { key: 'enabled', operator: 'BooleanOperators' },
-        ], additionalBulkActions: [...EntityChannelManagementBulkAction(tableId)], detailLinkColumn: "id", searchFields: ['name', 'code'], hideColumns: ['customFields', 'translations', 'collections', 'variantList'], entityName: 'PaymentMethod', route: Routes['paymentMethods'], tableId: tableId, fetch: fetch, onRemove: onRemove, createPermissions: [Permission.CreatePaymentMethod], deletePermissions: [Permission.DeletePaymentMethod] }));
+        ], additionalBulkActions: [...EntityChannelManagementBulkAction(tableId)], detailLinkColumn: "id", searchFields: ['name', 'code'], hideColumns: ['customFields', 'translations', 'collections', 'variantList'], entityName: 'PaymentMethod', route: Routes['paymentMethods'], tableId: tableId, fetch: fetch, onRemove: onRemove, createPermissions: [Permission.CreatePaymentMethod, Permission.CreateSettings], deletePermissions: [Permission.DeletePaymentMethod, Permission.DeleteSettings] }));
 };

package/dist/pages/product-variants/List.js

@@ -4,7 +4,7 @@ import { useTranslation, apiClient, Badge, deepMerge, DetailList, ListLocations,
 import { useNavigate } from 'react-router';
 const tableId = 'productVariants-list-view';
 const { selector } = ListLocations[tableId];
-const fetch = async ({ page, perPage, filter, filterOperator, sort }, additionalSelector) => {
+const fetch = async ({ page, perPage, filter, filterOperator, searchTerm, sort }, additionalSelector) => {
     const response = await apiClient('query')({
         productVariants: [
             {
@@ -12,6 +12,7 @@ const fetch = async ({ page, perPage, filter, filterOperator, sort }, additional
                     take: perPage,
                     skip: (page - 1) * perPage,
                     filterOperator: filterOperator,
+                    ...(searchTerm && { searchTerm }),
                     sort: sort ? { [sort.key]: sort.sortDir } : { createdAt: SortOrder.DESC },
                     ...(filter && { filter }),
                 },
@@ -56,14 +57,14 @@ export const ProductVariantsListPage = () => {
                         }, facetValuesIds: props.value.in }));
                 },
             },
-        ], detailLinkColumn: "id", searchFields: ['name', 'sku'], hideColumns: ['customFields', 'productId', 'stockOnHand', 'stockAllocated'], entityName: 'ProductVariant', route: {
+        ], detailLinkColumn: "id", searchFields: ['name', 'sku'], searchTransport: "searchTerm", hideColumns: ['customFields', 'productId', 'stockOnHand', 'stockAllocated'], entityName: 'ProductVariant', route: {
             ...Routes.productVariants,
             edit: (variantId, row) => {
                 navigate(`/admin-ui/products/${row.original['productId']}?tab=variants&variantId=${variantId}`, {
                     viewTransition: true,
                 });
             },
-        }, noCreateButton: true, tableId: tableId, fetch: fetch, onRemove: onRemove, createPermissions: [Permission.CreateProduct], deletePermissions: [Permission.DeleteProduct], additionalColumns: [
+        }, noCreateButton: true, tableId: tableId, fetch: fetch, onRemove: onRemove, createPermissions: [Permission.CreateProduct, Permission.CreateCatalog], deletePermissions: [Permission.DeleteProduct, Permission.DeleteCatalog], additionalColumns: [
             {
                 id: 'stock',
                 accessorKey: 'stock',

package/dist/pages/products/Detail.js

@@ -116,8 +116,8 @@ export const ProductsDetailPage = () => {
             }, defaultTabs: defaultTabs, topActions: {
                 inline: [_jsx(ProductStorefrontAction, {}, "product-storefront-action")],
             }, permissions: {
-                create: Permission.CreateProduct,
-                edit: Permission.UpdateProduct,
-                delete: Permission.DeleteProduct,
+                create: [Permission.CreateProduct, Permission.CreateCatalog],
+                edit: [Permission.UpdateProduct, Permission.UpdateCatalog],
+                delete: [Permission.DeleteProduct, Permission.DeleteCatalog],
             } }) }));
 };

package/dist/pages/products/List.js

@@ -4,7 +4,7 @@ import { apiClient, deepMerge, DetailList, ListBadge, ListLocations, Routes, Tab
 // import { FacetValueSelector } from '@deenruv/react-ui-devkit/FacetValueSelector.js';
 const tableId = 'products-list-view';
 const { selector } = ListLocations[tableId];
-const fetch = async ({ page, perPage, filter, filterOperator, sort }, customFieldsSelector, additionalSelector) => {
+const fetch = async ({ page, perPage, filter, filterOperator, searchTerm, sort }, customFieldsSelector, additionalSelector) => {
     const response = await apiClient('query')({
         ['products']: [
             {
@@ -12,6 +12,7 @@ const fetch = async ({ page, perPage, filter, filterOperator, sort }, customFiel
                     take: perPage,
                     skip: (page - 1) * perPage,
                     filterOperator: filterOperator,
+                    ...(searchTerm && { searchTerm }),
                     sort: sort ? { [sort.key]: sort.sortDir } : { createdAt: SortOrder.DESC },
                     ...(filter && { filter }),
                 },
@@ -52,7 +53,7 @@ export const ProductsListPage = () => {
                         }, facetValuesIds: props.value.in }));
                 },
             },
-        ], additionalBulkActions: [...EntityChannelManagementBulkAction(tableId), EntityFacetManagementBulkAction(tableId)], detailLinkColumn: "id", searchFields: ['name', 'slug', 'sku'], hideColumns: ['customFields', 'translations', 'collections', 'variantList'], entityName: 'Product', route: Routes['products'], tableId: tableId, fetch: fetch, onRemove: onRemove, createPermissions: [Permission.CreateProduct], deletePermissions: [Permission.DeleteProduct], suggestedOrderColumns: {
+        ], additionalBulkActions: [...EntityChannelManagementBulkAction(tableId), EntityFacetManagementBulkAction(tableId)], detailLinkColumn: "id", searchFields: ['name', 'slug', 'sku'], searchTransport: "searchTerm", hideColumns: ['customFields', 'translations', 'collections', 'variantList'], entityName: 'Product', route: Routes['products'], tableId: tableId, fetch: fetch, onRemove: onRemove, createPermissions: [Permission.CreateProduct, Permission.CreateCatalog], deletePermissions: [Permission.DeleteProduct, Permission.DeleteCatalog], suggestedOrderColumns: {
             featuredAsset: 4,
             variants: 99,
         }, additionalColumns: [

package/dist/pages/shipping-methods/Detail.js

@@ -2,6 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback } from 'react';
 import { useParams } from 'react-router';
 import { useTranslation, DetailView, createDeenruvForm, getMutation, useMutation } from '@deenruv/react-ui-devkit';
+import { Permission } from '@deenruv/admin-types';
 import { ShippingMethodDetailView } from "./_components/ShippingMethodDetailView.js";
 const isMissingConfigArgValue = (value) => value == null || value.trim() === '';
 const hasMissingConfigArgs = (operation) => {
@@ -107,5 +108,9 @@ export const ShippingMethodsDetailPage = () => {
                     onSubmitted: onSubmitHandler,
                     onDeleted: onDeleteHandler,
                 }),
+            }, permissions: {
+                create: [Permission.CreateShippingMethod, Permission.CreateSettings],
+                edit: [Permission.UpdateShippingMethod, Permission.UpdateSettings],
+                delete: [Permission.DeleteShippingMethod, Permission.DeleteSettings],
             } }) }));
 };

package/dist/pages/shipping-methods/List.js

@@ -36,5 +36,5 @@ export const ShippingMethodsListPage = () => {
     return (_jsx(DetailList, { filterFields: [
             { key: 'name', operator: 'StringOperators' },
             { key: 'code', operator: 'StringOperators' },
-        ], additionalBulkActions: [...EntityChannelManagementBulkAction(tableId)], detailLinkColumn: "id", searchFields: ['name', 'code'], hideColumns: ['customFields', 'translations', 'collections', 'variantList'], entityName: 'ShippingMethod', route: Routes['shippingMethods'], tableId: tableId, fetch: fetch, onRemove: onRemove, createPermissions: [Permission.CreateShippingMethod], deletePermissions: [Permission.DeleteShippingMethod] }));
+        ], additionalBulkActions: [...EntityChannelManagementBulkAction(tableId)], detailLinkColumn: "id", searchFields: ['name', 'code'], hideColumns: ['customFields', 'translations', 'collections', 'variantList'], entityName: 'ShippingMethod', route: Routes['shippingMethods'], tableId: tableId, fetch: fetch, onRemove: onRemove, createPermissions: [Permission.CreateShippingMethod, Permission.CreateSettings], deletePermissions: [Permission.DeleteShippingMethod, Permission.DeleteSettings] }));
 };

package/dist/pages/tax-categories/Detail.js

@@ -78,8 +78,8 @@ export const TaxCategoriesDetailPage = () => {
                     onDeleted: onDeleteHandler,
                 }),
             }, permissions: {
-                create: Permission.CreateTaxCategory,
-                edit: Permission.UpdateTaxCategory,
-                delete: Permission.DeleteTaxCategory,
+                create: [Permission.CreateTaxCategory, Permission.CreateSettings],
+                edit: [Permission.UpdateTaxCategory, Permission.UpdateSettings],
+                delete: [Permission.DeleteTaxCategory, Permission.DeleteSettings],
             } }) }));
 };

package/dist/pages/tax-categories/List.js

@@ -42,5 +42,5 @@ export const TaxCategoriesListPage = () => {
     return (_jsx(DetailList, { filterFields: [
             { key: 'name', operator: 'StringOperators' },
             { key: 'isDefault', operator: 'BooleanOperators' },
-        ], detailLinkColumn: "id", searchFields: ['name'], hideColumns: ['customFields', 'translations'], entityName: 'TaxCategory', route: Routes['taxCategories'], tableId: tableId, fetch: fetch, onRemove: onRemove, createPermissions: [Permission.CreateTaxCategory], deletePermissions: [Permission.DeleteTaxCategory] }));
+        ], detailLinkColumn: "id", searchFields: ['name'], hideColumns: ['customFields', 'translations'], entityName: 'TaxCategory', route: Routes['taxCategories'], tableId: tableId, fetch: fetch, onRemove: onRemove, createPermissions: [Permission.CreateTaxCategory, Permission.CreateSettings], deletePermissions: [Permission.DeleteTaxCategory, Permission.DeleteSettings] }));
 };

package/dist/pages/tax-rates/Detail.js

@@ -3,6 +3,7 @@ import { useCallback } from 'react';
 import { useParams } from 'react-router';
 import { useValidators, DetailView, createDeenruvForm, getMutation, useMutation, useTranslation, } from '@deenruv/react-ui-devkit';
 import { TaxRateDetailView } from "./_components/TaxRateDetailView.js";
+import { Permission } from '@deenruv/admin-types';
 const CreateTaxRateMutation = getMutation('createTaxRate');
 const EditTaxRateMutation = getMutation('updateTaxRate');
 const DeleteTaxRateMutation = getMutation('deleteTaxRate');
@@ -58,5 +59,9 @@ export const TaxRatesDetailPage = () => {
                     onSubmitted: onSubmitHandler,
                     onDeleted: onDeleteHandler,
                 }),
+            }, permissions: {
+                create: [Permission.CreateTaxRate, Permission.CreateSettings],
+                edit: [Permission.UpdateTaxRate, Permission.UpdateSettings],
+                delete: [Permission.DeleteTaxRate, Permission.DeleteSettings],
             } }) }));
 };

package/dist/pages/tax-rates/List.js

@@ -60,5 +60,5 @@ export const TaxRatesListPage = () => {
                 header: () => _jsx(TableLabel, { children: t('table.customerGroup') }),
                 cell: ({ row }) => row.original.customerGroup?.name ?? '—',
             },
-        ], entityName: 'TaxRate', route: Routes['taxRates'], tableId: tableId, fetch: fetch, onRemove: onRemove, createPermissions: [Permission.CreateTaxRate], deletePermissions: [Permission.DeleteTaxRate] }));
+        ], entityName: 'TaxRate', route: Routes['taxRates'], tableId: tableId, fetch: fetch, onRemove: onRemove, createPermissions: [Permission.CreateTaxRate, Permission.CreateSettings], deletePermissions: [Permission.DeleteTaxRate, Permission.DeleteSettings] }));
 };

package/dist/pages/zones/Detail.js

@@ -3,6 +3,7 @@ import { useCallback } from 'react';
 import { useParams } from 'react-router';
 import { useValidators, apiClient, useMutation, DetailView, getMutation, createDeenruvForm, useTranslation, } from '@deenruv/react-ui-devkit';
 import { ZoneDetailView } from "./_components/ZoneDetailView.js";
+import { Permission } from '@deenruv/admin-types';
 const CreateZoneMutation = getMutation('createZone');
 const EditZoneMutation = getMutation('updateZone');
 const DeleteZoneMutation = getMutation('deleteZone');
@@ -82,5 +83,9 @@ export const ZonesDetailPage = () => {
                     onSubmitted: onSubmitHandler,
                     onDeleted: onDeleteHandler,
                 }),
+            }, permissions: {
+                create: [Permission.CreateZone, Permission.CreateSettings],
+                edit: [Permission.UpdateZone, Permission.UpdateSettings],
+                delete: [Permission.DeleteZone, Permission.DeleteSettings],
             } }) }));
 };

package/dist/pages/zones/List.js

@@ -48,5 +48,5 @@ export const ZonesListPage = () => {
                 header: () => _jsx(TableLabel, { children: t('table.members') }),
                 cell: ({ row }) => row.original.members.length,
             },
-        ], entityName: 'Zone', route: Routes['zones'], tableId: tableId, fetch: fetch, onRemove: onRemove, createPermissions: [Permission.CreateZone], deletePermissions: [Permission.DeleteZone] }));
+        ], entityName: 'Zone', route: Routes['zones'], tableId: tableId, fetch: fetch, onRemove: onRemove, createPermissions: [Permission.CreateZone, Permission.CreateSettings], deletePermissions: [Permission.DeleteZone, Permission.DeleteSettings] }));
 };

package/dist/version.js

@@ -1 +1 @@
-export const ADMIN_DASHBOARD_VERSION = '1.0.17-dev.20';
+export const ADMIN_DASHBOARD_VERSION = '1.0.17-dev.23';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deenruv/admin-dashboard",
-  "version": "1.0.17-dev.20",
+  "version": "1.0.17-dev.23",
   "main": "dist/index.js",
   "style": "dist/index.css",
   "types": "dist/index.d.ts",
@@ -80,10 +80,10 @@
     "yup": "^1.7.1",
     "zod": "^4.4.3",
     "zustand": "^5.0.14",
-    "@deenruv/admin-dashboard": "1.0.17-dev.20",
-    "@deenruv/admin-types": "1.0.17-dev.20",
-    "@deenruv/deenruv-examples-plugin": "1.0.17-dev.20",
-    "@deenruv/react-ui-devkit": "1.0.17-dev.20"
+    "@deenruv/admin-dashboard": "1.0.17-dev.23",
+    "@deenruv/admin-types": "1.0.17-dev.23",
+    "@deenruv/react-ui-devkit": "1.0.17-dev.23",
+    "@deenruv/deenruv-examples-plugin": "1.0.17-dev.23"
   },
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.20",