@deenruv/admin-dashboard 1.0.0

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

@@ -0,0 +1,85 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from 'react';
+import { MultipleSelector, useLazyQuery, useOrder, useMutation, OrderDetailSelector, EmptyState, CustomCard, ORDER_STATE, useTranslation, } from '@deenruv/react-ui-devkit';
+import { typedGql, scalars, $ } from '@deenruv/admin-types';
+import { toast } from 'sonner';
+import { Ticket, Search } from 'lucide-react';
+const PromotionCodesQuery = typedGql('query', { scalars })({
+    promotions: [
+        { options: { filter: { couponCode: { contains: $('code', 'String!') } } } },
+        { items: { couponCode: true, name: true } },
+    ],
+});
+const ApplyCouponCodeMutation = typedGql('mutation', { scalars })({
+    applyCouponCodeToDraftOrder: [
+        { orderId: $('orderId', 'ID!'), couponCode: $('couponCode', 'String!') },
+        { '...on CouponCodeExpiredError': { message: true }, __typename: true, '...on Order': OrderDetailSelector },
+    ],
+});
+const RemoveCouponCodeMutation = typedGql('mutation', { scalars })({
+    removeCouponCodeFromDraftOrder: [
+        { orderId: $('orderId', 'ID!'), couponCode: $('couponCode', 'String!') },
+        OrderDetailSelector,
+    ],
+});
+export const CouponCodesCard = () => {
+    const { t } = useTranslation('orders');
+    const { order, setOrder } = useOrder();
+    const [fetchPromotionCodes] = useLazyQuery(PromotionCodesQuery);
+    const [applyCoupon] = useMutation(ApplyCouponCodeMutation);
+    const [removeCoupon] = useMutation(RemoveCouponCodeMutation);
+    const [currentValue, setCurrentValue] = useState(order?.couponCodes.map((c) => ({ label: c, value: c })) || []);
+    const [isSearching, setIsSearching] = useState(false);
+    const handleChange = useCallback((e) => {
+        if (!order)
+            return;
+        const currentState = currentValue.map((v) => v.value) || [];
+        if (e.length > currentState?.length) {
+            const newCoupon = e[e.length - 1];
+            toast.promise(applyCoupon({ couponCode: newCoupon.value, orderId: order.id }).then((resp) => {
+                if (resp.applyCouponCodeToDraftOrder.__typename === 'Order') {
+                    setOrder(resp.applyCouponCodeToDraftOrder);
+                    setCurrentValue((prev) => [...prev, newCoupon]);
+                    return true;
+                }
+                else {
+                    throw new Error('Failed to apply coupon');
+                }
+            }), {
+                loading: t('couponCodes.addingCoupon', 'Applying coupon code...'),
+                success: t('couponCodes.addToastSuccess', 'Coupon code applied successfully'),
+                error: (err) => err.message,
+            });
+        }
+        else {
+            const couponToRemove = currentState.find((c) => !e.map((i) => i.value).includes(c));
+            if (couponToRemove) {
+                toast.promise(removeCoupon({ couponCode: couponToRemove, orderId: order.id }).then((resp) => {
+                    if (resp.removeCouponCodeFromDraftOrder?.id) {
+                        setOrder(resp.removeCouponCodeFromDraftOrder);
+                        setCurrentValue((prev) => prev.filter((i) => i.value !== couponToRemove));
+                        return true;
+                    }
+                    return false;
+                }), {
+                    loading: t('couponCodes.removingCoupon', 'Removing coupon code...'),
+                    success: t('couponCodes.removeToastSuccess', 'Coupon code removed successfully'),
+                    error: t('couponCodes.removeToastError', 'Failed to remove coupon code'),
+                });
+            }
+        }
+    }, [order, currentValue, applyCoupon, removeCoupon, setOrder, t]);
+    return (_jsxs(CustomCard, { notCollapsible: true, wrapperClassName: "h-full", color: "purple", description: t('couponCodes.description', 'Apply coupon codes to this order'), title: t('couponCodes.title', 'Coupon Codes'), icon: _jsx(Ticket, {}), children: [_jsxs("div", { className: "relative", children: [_jsx(MultipleSelector, { hideClearAllButton: true, placeholder: t('couponCodes.placeholder', 'Search for coupon codes...'), value: currentValue, onChange: handleChange, disabled: order?.state === ORDER_STATE.DELIVERED || order?.state === ORDER_STATE.CANCELLED, onSearch: (searchString) => {
+                            setIsSearching(true);
+                            return fetchPromotionCodes({ code: searchString })
+                                .then((resp) => resp.promotions.items
+                                .filter((i) => i.couponCode)
+                                .map((i) => ({
+                                value: i.couponCode,
+                                label: i.couponCode,
+                                description: i.name,
+                            })))
+                                .finally(() => setIsSearching(false));
+                        }, delay: 500 }), _jsx("div", { className: "text-muted-foreground absolute right-3 top-2.5", children: isSearching ? (_jsx("div", { className: "size-4 animate-spin rounded-full border-2 border-current border-t-transparent" })) : (_jsx(Search, { className: "size-4" })) })] }), currentValue.length === 0 && (_jsx("div", { className: "flex h-[240px] pt-12", children: _jsx(EmptyState, { columnsLength: 2, title: t('couponCodes.noCoupons', 'No coupon codes applied'), color: "purple", icon: _jsx(Ticket, {}), small: true }) }))] }));
+};

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

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation, EntityCustomFields, Button } from '@deenruv/react-ui-devkit';
+import { useEffect, useState } from 'react';
+export const CustomComponent = ({ onVariantAdd, orderLine, }) => {
+    const { t } = useTranslation('orders');
+    const [customFields, setCustomFields] = useState({});
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    useEffect(() => {
+        console.log('KUSTOM', customFields);
+    }, []);
+    const onSubmit = async () => {
+        try {
+            setIsSubmitting(true);
+            await onVariantAdd(customFields);
+        }
+        finally {
+            setIsSubmitting(false);
+        }
+    };
+    return (_jsxs("div", { className: "flex h-full flex-col rounded-md border", children: [_jsx("div", { className: "h-full grow space-y-4 overflow-y-auto p-4", children: _jsx(EntityCustomFields, { entityName: "orderLine", hideButton: true, initialValues: { customFields: {} }, onChange: setCustomFields, additionalData: { product: orderLine.product, variant: orderLine } }) }), _jsx("div", { className: "bg-muted/30 border-t p-4", children: _jsx("div", { className: "flex flex-col items-start justify-end gap-4 sm:flex-row sm:items-center", children: _jsx(Button, { onClick: onSubmit, disabled: isSubmitting, className: "min-w-[120px] self-end sm:self-auto", children: isSubmitting ? (_jsxs("span", { className: "flex items-center gap-2", children: [_jsx("span", { className: "size-4 animate-spin rounded-full border-2 border-current border-r-transparent" }), t('common:processing')] })) : (t('create.add')) }) }) })] }));
+};

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

@@ -0,0 +1,117 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button, Tabs, TabsList, TabsTrigger, TabsContent, Input, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, apiClient, useOrder, cn, OrderDetailSelector, Label, useGFFLP, CustomCard, EntityCustomFields, useTranslation, CustomerSearch, } from '@deenruv/react-ui-devkit';
+import { useEffect, useState } from 'react';
+import { toast } from 'sonner';
+import { Edit, User, Check, Mail, Phone, Loader2, UserPlus, Search, AlertCircle } from 'lucide-react';
+export const CustomerSelectCard = () => {
+    const { t } = useTranslation('orders');
+    const { setOrder, mode, currentOrder: order, setCustomerAndAddressesForDraftOrder } = useOrder();
+    const [tab, setTab] = useState('select');
+    const [selected, setSelected] = useState(order?.customer);
+    const [open, setOpen] = useState(false);
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    const { state, checkIfAllFieldsAreValid, setField, clearAllForm } = useGFFLP('CreateCustomerInput', 'firstName', 'lastName', 'title', 'phoneNumber', 'emailAddress', 'customFields')({
+        firstName: {
+            initialValue: '',
+            validate: (v) => {
+                if (!v || v === '')
+                    return [t('form.requiredError')];
+            },
+        },
+        lastName: {
+            initialValue: '',
+            validate: (v) => {
+                if (!v || v === '')
+                    return [t('form.requiredError')];
+            },
+        },
+        phoneNumber: {
+            initialValue: '',
+            validate: (v) => {
+                if (!v || v === '')
+                    return [t('form.requiredError')];
+                // if (!phoneNumberRegExp.test(v)) return [t('form.phoneError')];
+            },
+        },
+        emailAddress: {
+            initialValue: '',
+            validate: (v) => {
+                if (!v || v === '')
+                    return [t('form.requiredError')];
+            },
+        },
+        customFields: {
+            initialValue: {},
+        },
+    });
+    useEffect(() => setSelected(order?.customer), [order]);
+    useEffect(() => {
+        if (tab === 'create')
+            clearAllForm();
+    }, [tab]);
+    const validateAndSubmitIfCorrect = async () => {
+        if (!order?.id)
+            return;
+        if (tab === 'create' && !checkIfAllFieldsAreValid()) {
+            return;
+        }
+        setIsSubmitting(true);
+        try {
+            if (tab === 'select' && selected) {
+                setCustomerAndAddressesForDraftOrder(selected.id).then(() => {
+                    setOpen(false);
+                    toast.success(t('create.selectCustomer.success', 'Customer successfully assigned to order'));
+                    setIsSubmitting(false);
+                });
+            }
+            else {
+                const { setCustomerForDraftOrder } = await apiClient('mutation')({
+                    setCustomerForDraftOrder: [
+                        {
+                            orderId: order.id,
+                            ...(tab === 'select'
+                                ? { customerId: selected?.id }
+                                : {
+                                    input: {
+                                        title: state.title?.validatedValue,
+                                        firstName: state.firstName?.validatedValue || '',
+                                        lastName: state.lastName?.validatedValue || '',
+                                        emailAddress: state.emailAddress?.validatedValue || '',
+                                        phoneNumber: state.phoneNumber?.validatedValue,
+                                    },
+                                }),
+                        },
+                        {
+                            __typename: true,
+                            '...on Order': OrderDetailSelector,
+                            '...on EmailAddressConflictError': { errorCode: true, message: true },
+                        },
+                    ],
+                });
+                if (setCustomerForDraftOrder.__typename === 'Order') {
+                    setOpen(false);
+                    setOrder(setCustomerForDraftOrder);
+                    toast.success(t('create.selectCustomer.success', 'Customer successfully assigned to order'));
+                }
+                else {
+                    toast.error(t('create.selectCustomer.error', 'Failed to assign customer to order'));
+                }
+            }
+        }
+        catch (error) {
+            toast.error(t('create.selectCustomer.error', 'Failed to assign customer to order'));
+        }
+        finally {
+            setIsSubmitting(false);
+        }
+    };
+    if (!order)
+        return null;
+    return (_jsx(CustomCard, { notCollapsible: true, color: order?.customer ? 'indigo' : 'gray', description: t('create.selectCustomer.description', 'Choose an existing customer or create a new one for this order'), title: t('create.selectCustomer.select', 'Customer Information'), icon: _jsx(User, {}), upperRight: mode !== 'view' &&
+            mode !== 'update' && (_jsxs(Dialog, { open: open, onOpenChange: setOpen, children: [_jsx(DialogTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", className: "size-8", children: _jsx(Edit, { size: 16, className: "text-indigo-500 dark:text-indigo-400" }) }) }), _jsxs(DialogContent, { className: "min-w-max", children: [_jsxs(DialogHeader, { children: [_jsxs(DialogTitle, { className: "flex items-center gap-2 text-xl", children: [_jsx(User, { className: "size-5 text-indigo-500 dark:text-indigo-400" }), t('create.selectCustomer.label', 'Select Customer')] }), _jsx(DialogDescription, { className: "text-muted-foreground mt-2", children: t('create.selectCustomer.description', 'Choose an existing customer or create a new one for this order') })] }), _jsxs(Tabs, { value: tab, onValueChange: (e) => setTab(e), children: [_jsxs(TabsList, { className: "my-4 grid w-full grid-cols-2", children: [_jsx(TabsTrigger, { className: "w-full", value: "select", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Search, { className: "size-4" }), t('create.selectCustomer.selectTab', 'Find Customer')] }) }), _jsx(TabsTrigger, { className: "w-full", value: "create", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(UserPlus, { className: "size-4" }), t('create.selectCustomer.createTab', 'Create New')] }) })] }), _jsx(TabsContent, { className: "focus-visible:ring-transparent", value: "select", children: _jsx(CustomerSearch, { selectedCustomer: selected, onSelect: (selected) => setSelected(selected) }) }), _jsx(TabsContent, { value: "create", className: "h-fit max-h-[calc(80vh-230px)] overflow-y-auto pt-2", children: _jsxs("div", { className: "space-y-4 px-1", children: [_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { htmlFor: "title", className: "text-sm font-medium", children: t('create.selectCustomer.titleLabel', 'Title') }), _jsx(Input, { id: "title", name: "title", placeholder: t('create.selectCustomer.titlePlaceholder', 'Mr., Mrs., Dr., etc.'), value: state.title?.value ?? undefined, onChange: (e) => setField('title', e.target.value), errors: state.title?.errors })] }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "space-y-1", children: [_jsxs(Label, { htmlFor: "firstName", className: "text-sm font-medium", children: [t('create.selectCustomer.firstNameLabel', 'First Name'), ' ', _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(Input, { id: "firstName", name: "firstName", placeholder: t('create.selectCustomer.firstNamePlaceholder', 'Enter first name'), value: state.firstName?.value, onChange: (e) => setField('firstName', e.target.value), className: cn(state.firstName?.errors?.length && 'border-red-300'), required: true, errors: state.firstName?.errors })] }), _jsxs("div", { className: "space-y-1", children: [_jsxs(Label, { htmlFor: "lastName", className: "text-sm font-medium", children: [t('create.selectCustomer.lastNameLabel', 'Last Name'), ' ', _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(Input, { id: "lastName", name: "lastName", placeholder: t('create.selectCustomer.lastNamePlaceholder', 'Enter last name'), value: state.lastName?.value, onChange: (e) => setField('lastName', e.target.value), className: cn(state.lastName?.errors?.length && 'border-red-300'), required: true, errors: state.lastName?.errors })] })] }), _jsxs("div", { className: "space-y-1", children: [_jsxs(Label, { htmlFor: "email", className: "text-sm font-medium", children: [t('create.selectCustomer.emailLabel', 'Email Address'), " ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(Input, { id: "email", name: "emailAddress", type: "email", placeholder: t('create.selectCustomer.emailPlaceholder', 'Enter email address'), value: state.emailAddress?.value, onChange: (e) => setField('emailAddress', e.target.value), className: cn(state.emailAddress?.errors?.length && 'border-red-300'), required: true, errors: state.emailAddress?.errors })] }), _jsxs("div", { className: "space-y-1", children: [_jsxs(Label, { htmlFor: "phone", className: "text-sm font-medium", children: [t('create.selectCustomer.phoneNumberLabel', 'Phone Number'), ' ', _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(Input, { id: "phone", name: "phoneNumber", placeholder: t('create.selectCustomer.phonePlaceholder', 'Enter phone number'), value: state.phoneNumber?.value ?? undefined, onChange: (e) => setField('phoneNumber', e.target.value), className: cn(state.phoneNumber?.errors?.length && 'border-red-300'), required: true, errors: state.phoneNumber?.errors })] }), _jsx(EntityCustomFields, { id: selected?.id, entityName: "customer", hideButton: true, initialValues: selected && 'customFields' in selected
+                                                    ? { customFields: selected.customFields }
+                                                    : { customFields: {} }, onChange: (customFields, translations) => {
+                                                    setField('customFields', customFields);
+                                                }, additionalData: {} })] }) })] }), _jsxs(DialogFooter, { className: "gap-2", children: [_jsx(Button, { variant: "outline", onClick: () => setOpen(false), disabled: isSubmitting, children: t('common.cancel', 'Cancel') }), _jsx(Button, { disabled: (tab === 'select' && !selected) || isSubmitting, className: "gap-2", onClick: validateAndSubmitIfCorrect, children: isSubmitting ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { className: "size-4 animate-spin" }), t('common.processing', 'Processing...')] })) : (_jsxs(_Fragment, { children: [_jsx(Check, { className: "size-4" }), t(tab === 'create' ? 'create.selectCustomer.create' : 'create.selectCustomer.selectButton')] })) })] })] })] })), children: _jsx("div", { className: "border-border bg-muted/50 rounded-lg border p-3", children: _jsx("div", { className: "flex items-start gap-3", children: !order?.customer ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "bg-secondary mt-0.5 flex size-8 items-center justify-center rounded-full", children: _jsx(AlertCircle, { className: "size-4 text-green-500 dark:text-green-600" }) }), _jsxs("div", { className: "flex-1", children: [_jsx("p", { className: "text-muted-foreground text-sm italic", children: t('create.selectCustomer.noCustomer', 'No customer assigned to this order') }), mode !== 'view' && (_jsxs(Button, { variant: "outline", size: "sm", className: "mt-2 gap-2", onClick: () => setOpen(true), children: [_jsx(UserPlus, { className: "size-3.5" }), t('create.selectCustomer.addCustomer', 'Add Customer')] }))] })] })) : (_jsx(_Fragment, { children: _jsx("div", { className: "flex-1", children: _jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("p", { className: "text-sm font-medium", children: [order.customer.title && `${order.customer.title} `, order.customer.firstName, " ", order.customer.lastName] }), _jsx("span", { className: "rounded-full bg-indigo-100 px-2 py-0.5 text-xs text-indigo-800 dark:bg-indigo-900/50 dark:text-indigo-300", children: t('create.selectCustomer.customer', 'Customer') })] }), _jsxs("div", { className: "flex items-center gap-2 text-sm", children: [_jsx(Mail, { className: "size-3.5 text-indigo-500 dark:text-indigo-400" }), _jsx("span", { children: order.customer.emailAddress })] }), order.customer.phoneNumber && (_jsxs("div", { className: "flex items-center gap-2 text-sm", children: [_jsx(Phone, { className: "size-3.5 text-indigo-500 dark:text-indigo-400" }), _jsx("span", { children: order.customer.phoneNumber })] }))] }) }) })) }) }) }));
+};

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

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AlertDialogHeader, Textarea, AlertDialogFooter, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogTitle, AlertDialogTrigger, Checkbox, Label, Button, cn, useTranslation, } from '@deenruv/react-ui-devkit';
+import { Pencil } from 'lucide-react';
+import { useState } from 'react';
+export const EditNoteButton = ({ note, updateConfirmed }) => {
+    const { t } = useTranslation('orders');
+    const [isPrivate, setIsPrivate] = useState(!note.isPublic);
+    const [text, setText] = useState(note.data?.note || '');
+    return (_jsxs(AlertDialog, { children: [_jsx(AlertDialogTrigger, { asChild: true, children: _jsxs(Button, { variant: "ghost", className: "flex w-full justify-start gap-2", children: [_jsx(Pencil, { className: "size-4" }), " ", t('history.edit')] }) }), _jsxs(AlertDialogContent, { className: "min-w-min", children: [_jsx(AlertDialogHeader, { children: _jsx(AlertDialogTitle, { children: t('history.editNoteHeader') }) }), _jsx(Textarea, { onChange: (e) => setText(e.currentTarget.value), value: text, className: "h-[60vh] w-auto min-w-[50vh] resize-none overflow-auto rounded-md p-2" }), _jsxs("div", { className: "flex items-center gap-2 pb-4", children: [_jsx(Checkbox, { id: "isPublic", name: "isPublic", checked: isPrivate, onClick: () => setIsPrivate((p) => !p) }), _jsxs(Label, { htmlFor: "isPublic", className: "cursor-pointer", children: [t('history.isPrivate'), _jsx("span", { className: "ml-2 text-gray-500", children: t('history.isPrivateDescription') })] }), _jsx(Label, { className: cn('ml-auto', isPrivate ? 'text-green-600' : 'text-yellow-600'), children: t(isPrivate ? 'history.toAdmins' : 'history.toAdminsAndCustomer') })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: t('history.cancel') }), _jsx(AlertDialogAction, { disabled: text === '', onClick: () => updateConfirmed({ noteId: note.id, isPublic: !isPrivate, note: text }), children: t('history.edit') })] })] })] }));
+};

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

@@ -0,0 +1,85 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { TableHeader, TableRow, TableHead, TableBody, TableCell, Button, ScrollArea, Table, Input, Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger, useServer, Badge, priceFormatter, ArgumentFieldsComponent, CustomCard, useGFFLP, useTranslation, } from '@deenruv/react-ui-devkit';
+import { LineItem } from './LineItem.js';
+import { useState } from 'react';
+import { Package, Truck, MapPin, User, Building, Phone, Box, CheckCircle2, AlertCircle, Loader2 } from 'lucide-react';
+export const FulfillmentModal = ({ order, onSubmitted, disabled }) => {
+    const { t } = useTranslation('orders');
+    const [open, setOpen] = useState(false);
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    const neededFulfillmentHandlers = order?.shippingLines?.map((line) => line.shippingMethod.fulfillmentHandlerCode);
+    const filteredFulfillmentHandlers = useServer((p) => {
+        return p.fulfillmentHandlers.filter((handler) => neededFulfillmentHandlers.includes(handler?.code));
+    });
+    const { state, setField } = useGFFLP('FulfillOrderInput')({
+        lines: {
+            initialValue: order.lines.map((line) => ({
+                orderLineId: line.id,
+                quantity: line.quantity || 1,
+                customFields: {},
+            })),
+        },
+        handler: {
+            initialValue: {
+                code: filteredFulfillmentHandlers[0]?.code,
+                arguments: filteredFulfillmentHandlers[0]?.args.map((arg) => ({
+                    name: arg.name,
+                    value: JSON.stringify(arg.defaultValue),
+                })),
+            },
+        },
+    });
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        if (!state.lines?.value || !state.handler?.value)
+            return;
+        const lines = state.lines?.value.map((line) => ({
+            orderLineId: line.orderLineId,
+            quantity: line.quantity,
+        }));
+        setIsSubmitting(true);
+        try {
+            await onSubmitted({ lines, handler: state.handler?.value });
+            setOpen(false);
+        }
+        catch (error) {
+            console.error(error);
+        }
+        finally {
+            setIsSubmitting(false);
+        }
+    };
+    return (_jsxs(Dialog, { open: open, onOpenChange: setOpen, children: [_jsx(DialogTrigger, { asChild: true, children: _jsxs(Button, { disabled: disabled, size: "sm", className: "gap-2", children: [_jsx(Package, { className: "size-4" }), t('fulfillment.completeOrderButton', 'Fulfill Order')] }) }), _jsxs(DialogContent, { className: "flex h-[80vh] max-w-[80vw] flex-col gap-0 overflow-hidden p-0", children: [_jsxs(DialogHeader, { className: "border-b px-6 py-4", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Truck, { className: "text-primary size-5" }), _jsx(DialogTitle, { children: t('fulfillment.completeDialogTitle', 'Complete Order Fulfillment') })] }), _jsx(DialogDescription, { children: t('fulfillment.completeDialogDescription', 'Prepare items for shipping and complete the fulfillment process') })] }), _jsxs("div", { className: "flex size-full flex-col overflow-hidden md:flex-row", children: [_jsxs("div", { className: "flex size-full flex-col border-r p-6 md:w-1/2", children: [_jsxs("div", { className: "mb-4 flex items-center gap-2", children: [_jsx(Box, { className: "size-5 text-blue-500 dark:text-blue-400" }), _jsx("h3", { className: "text-lg font-medium", children: t('fulfillment.itemsToFulfill', 'Items to Fulfill') })] }), _jsx(ScrollArea, { className: "h-[calc(100%-3rem)] w-full rounded-md border", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { noHover: true, className: "bg-muted/50", children: [_jsx(TableHead, { className: "py-3", children: t('fulfillment.product', 'Product') }), _jsx(TableHead, { className: "py-3", children: t('fulfillment.sku', 'SKU') }), _jsx(TableHead, { className: "py-3", children: t('fulfillment.fulfilled', 'Quantity') })] }) }), _jsx(TableBody, { className: "w-full", children: order?.lines.length ? (order.lines.map((line) => {
+                                                        const onStock = line.productVariant.stockLevels.reduce((acc, stock) => acc + stock.stockOnHand, 0);
+                                                        const stateLine = state.lines?.value?.find((l) => l.orderLineId === line.id);
+                                                        const isLowStock = onStock < line.quantity;
+                                                        return (_jsx(LineItem, { variant: line.productVariant, children: _jsx(TableCell, { className: "py-3", children: _jsx("div", { className: "flex items-center", children: _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("div", { className: "flex items-center gap-2", children: _jsx(Input, { type: "number", className: "w-20", value: stateLine?.quantity, onChange: (e) => {
+                                                                                        const value = state.lines?.value;
+                                                                                        if (!value)
+                                                                                            return;
+                                                                                        const index = value.findIndex((v) => v.orderLineId === line.id);
+                                                                                        if (index === -1)
+                                                                                            return;
+                                                                                        if (Number.parseInt(e.target.value) < 1)
+                                                                                            return;
+                                                                                        if (Number.parseInt(e.target.value) <= line.quantity) {
+                                                                                            value[index].quantity = Number.parseInt(e.target.value);
+                                                                                            setField('lines', value);
+                                                                                        }
+                                                                                    }, endAdornment: _jsxs("span", { className: "text-sm", children: ["/ ", line.quantity] }) }) }), _jsx("div", { className: "flex items-center gap-1", children: isLowStock ? (_jsxs("div", { className: "flex items-center gap-1 text-amber-500", children: [_jsx(AlertCircle, { className: "size-4" }), _jsx("p", { className: "text-xs font-medium", children: t('fulfillment.lowStock', 'Low stock') })] })) : (_jsxs("div", { className: "flex items-center gap-1 text-green-500", children: [_jsx(CheckCircle2, { className: "size-4" }), _jsx("p", { className: "text-xs font-medium", children: t('fulfillment.inStock', 'In stock') })] })) }), _jsxs("p", { className: "text-muted-foreground text-xs", children: ["(", t('fulfillment.onStockValue', { value: onStock }), ")"] })] }) }) }) }, line.id));
+                                                    })) : (_jsx(TableRow, { noHover: true, children: _jsx(TableCell, { colSpan: 4, className: "text-muted-foreground py-6 text-center", children: _jsxs("div", { className: "flex flex-col items-center justify-center gap-2", children: [_jsx("div", { className: "rounded-full bg-blue-100 p-3 dark:bg-blue-900/30", children: _jsx(Box, { className: "size-6 text-blue-500 dark:text-blue-400" }) }), _jsx("p", { children: t('fulfillment.emptyState', 'No items to fulfill') }), _jsx("p", { className: "text-muted-foreground text-xs", children: t('fulfillment.emptyStateHint', 'Add products to the order before fulfillment') })] }) }) })) })] }) })] }), _jsx(ScrollArea, { className: "flex h-full md:w-1/2", children: _jsx("div", { className: "flex size-full flex-col p-6", children: _jsxs("form", { onSubmit: handleSubmit, className: "flex h-full flex-col gap-6", children: [_jsxs(CustomCard, { title: t('fulfillment.shippingAddress', 'Shipping Address'), color: "blue", icon: _jsx(MapPin, {}), children: [_jsxs("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2", children: [_jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "space-y-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(User, { className: "text-muted-foreground size-4" }), _jsx("p", { className: "text-muted-foreground text-xs font-medium", children: t('fullName', 'Full Name') })] }), _jsx("p", { className: "text-sm font-medium", children: order.shippingAddress?.fullName || '—' })] }), _jsxs("div", { className: "space-y-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Building, { className: "text-muted-foreground size-4" }), _jsx("p", { className: "text-muted-foreground text-xs font-medium", children: t('company', 'Company') })] }), _jsx("p", { className: "text-sm font-medium", children: order.shippingAddress?.company || '—' })] }), _jsxs("div", { className: "space-y-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(MapPin, { className: "text-muted-foreground size-4" }), _jsx("p", { className: "text-muted-foreground text-xs font-medium", children: t('street1', 'Street Address') })] }), _jsx("p", { className: "text-sm font-medium", children: order.shippingAddress?.streetLine1 || '—' })] }), _jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-muted-foreground text-xs font-medium", children: t('street2', 'Street Address 2') }), _jsx("p", { className: "text-sm font-medium", children: order.shippingAddress?.streetLine2 || '—' })] })] }), _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-muted-foreground text-xs font-medium", children: t('city', 'City') }), _jsx("p", { className: "text-sm font-medium", children: order.shippingAddress?.city || '—' })] }), _jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-muted-foreground text-xs font-medium", children: t('postalCode', 'Postal Code') }), _jsx("p", { className: "text-sm font-medium", children: order.shippingAddress?.postalCode || '—' })] }), _jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-muted-foreground text-xs font-medium", children: t('country', 'Country') }), _jsx("p", { className: "text-sm font-medium", children: order.shippingAddress?.country || '—' })] }), _jsxs("div", { className: "space-y-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Phone, { className: "text-muted-foreground size-4" }), _jsx("p", { className: "text-muted-foreground text-xs font-medium", children: t('phoneNumber', 'Phone Number') })] }), _jsx("p", { className: "text-sm font-medium", children: order.shippingAddress?.phoneNumber || '—' })] })] })] }), _jsxs("div", { className: "mt-4 border-t pt-4", children: [_jsx("p", { className: "text-muted-foreground mb-2 text-xs font-medium", children: t('fulfillment.shippingMethod', 'Shipping Method') }), order.shippingLines.map((line) => (_jsxs("div", { className: "bg-muted/50 flex items-center justify-between rounded-md p-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Truck, { className: "size-4 text-blue-500 dark:text-blue-400" }), _jsx("span", { className: "font-medium", children: line.shippingMethod.name })] }), _jsx(Badge, { variant: "outline", className: "font-mono", children: priceFormatter(line.priceWithTax, order.currencyCode) })] }, line.id)))] })] }), _jsx(CustomCard, { color: "green", title: t('fulfillment.fulfillmentOptions', 'Fulfillment Options'), icon: _jsx(Package, {}), bottomRight: _jsx(Button, { type: "submit", className: "w-full gap-2", disabled: isSubmitting, children: isSubmitting ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { className: "size-4 animate-spin" }), t('fulfillment.processing', 'Processing...')] })) : (_jsxs(_Fragment, { children: [_jsx(CheckCircle2, { className: "size-4" }), t('fulfillment.fulfill', 'Complete Fulfillment')] })) }), children: _jsx(ArgumentFieldsComponent, { actions: filteredFulfillmentHandlers, args: state.handler?.value.arguments?.length
+                                                        ? state.handler.value.arguments
+                                                        : state.handler?.initialValue?.arguments?.length
+                                                            ? state.handler.initialValue.arguments
+                                                            : [], setArg: (argument, data) => {
+                                                        const newArgs = state.handler?.value.arguments.map((arg) => {
+                                                            if (arg.name === argument.name)
+                                                                return { ...arg, value: data.value };
+                                                            return arg;
+                                                        });
+                                                        if (!state.handler?.value.code || !newArgs)
+                                                            return;
+                                                        setField('handler', { code: state.handler?.value.code, arguments: newArgs });
+                                                    } }) })] }) }) })] })] })] }));
+};

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

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TableRow, TableCell, Button } from '@deenruv/react-ui-devkit';
+import { Minus, Plus, Package } from 'lucide-react';
+export const LineItem = ({ noBorder, noHover, children, variant, adjustLineItem }) => {
+    const imageUrl = variant?.featuredAsset?.preview || variant?.product?.featuredAsset?.preview;
+    return (_jsxs(TableRow, { noHover: noHover, noBorder: noBorder, className: "group transition-colors", children: [_jsx(TableCell, { className: "py-3", children: _jsxs("div", { className: "flex items-center gap-3", children: [imageUrl ? (_jsx("img", { alt: `${variant?.product.name} image`, className: "aspect-square size-12 rounded-md border bg-white object-cover shadow-sm", height: "48", width: "48", src: imageUrl || '/placeholder.svg' })) : (_jsx("div", { className: "bg-muted/30 flex size-12 items-center justify-center rounded-md border", children: _jsx(Package, { className: "text-muted-foreground size-6" }) })), _jsxs("div", { className: "flex flex-col", children: [_jsx("span", { className: "line-clamp-1 text-sm font-medium md:text-base", children: variant?.product.name }), variant?.name && variant.name !== variant?.product.name && (_jsx("span", { className: "text-muted-foreground line-clamp-1 text-xs", children: variant.name }))] })] }) }), _jsx(TableCell, { className: "text-muted-foreground font-mono text-sm", children: variant?.sku }), variant?.quantity ? (_jsx(TableCell, { children: adjustLineItem ? (_jsx("div", { className: "flex items-center", children: _jsxs("div", { className: "bg-background inline-flex items-center rounded-md border shadow-sm", children: [_jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: () => adjustLineItem(Math.max(1, (variant.quantity || 1) - 1)), className: "hover:bg-muted h-8 rounded-r-none border-r px-2", "aria-label": "Decrease quantity", children: _jsx(Minus, { className: "size-3.5" }) }), _jsx("span", { className: "px-3 py-1 text-sm font-medium tabular-nums", children: variant?.quantity }), _jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: () => adjustLineItem((variant.quantity || 0) + 1), className: "hover:bg-muted h-8 rounded-l-none border-l px-2", "aria-label": "Increase quantity", children: _jsx(Plus, { className: "size-3.5" }) })] }) })) : (_jsx("span", { className: "bg-primary/10 text-primary inline-flex min-w-8 items-center justify-center rounded-full px-2 py-0.5 text-xs font-medium", children: variant?.quantity })) })) : null, children] }));
+};

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

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useRef, useState } from 'react';
+import { Button, Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue, Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, OrderStateBadge, usePluginStore, useTranslation, } from '@deenruv/react-ui-devkit';
+import { toast } from 'sonner';
+export const ManualOrderChangeModal = ({ currentPossibilities, wantedState, order, open, setOpen, onConfirm }) => {
+    const [components, setComponents] = useState([]);
+    const beforeSubmit = useRef();
+    const { getModalComponents } = usePluginStore();
+    const { t } = useTranslation('orders');
+    const [value, setValue] = useState(() => {
+        if (wantedState) {
+            const stateIndex = currentPossibilities.to.indexOf(wantedState);
+            return stateIndex === -1 ? currentPossibilities.to[0] : currentPossibilities.to[stateIndex];
+        }
+        else {
+            const stateIndex = currentPossibilities.to.indexOf(order.state);
+            return stateIndex === -1 ? currentPossibilities.to[0] : currentPossibilities.to[stateIndex + 1];
+        }
+    });
+    const submit = async () => {
+        try {
+            if (beforeSubmit.current) {
+                await beforeSubmit.current?.();
+            }
+            await onConfirm(value);
+        }
+        catch (e) {
+            toast.error(t('changeStatus.error'));
+        }
+    };
+    useEffect(() => {
+        const stored = getModalComponents('manual-order-state');
+        setComponents(stored.map((component, index) => {
+            const data = {
+                state: value,
+                setState: setValue,
+                order,
+                beforeSubmit,
+            };
+            return _jsx(React.Fragment, { children: React.createElement(component, { data }) }, index);
+        }));
+        return () => {
+            setComponents([]);
+        };
+    }, [value]);
+    return (_jsx(Dialog, { open: open, modal: open, onOpenChange: (state) => setOpen({ state }), children: _jsxs(DialogContent, { className: "min-w-fit max-w-[50vw]", children: [_jsx(DialogHeader, { children: _jsxs(DialogTitle, { className: "flex items-center gap-2", children: [t('changeStatus.header'), _jsx(OrderStateBadge, { state: order.state })] }) }), _jsx(DialogDescription, { children: t('changeStatus.description') }), _jsxs(Select, { name: "orderState", value: value, onValueChange: (e) => setValue(e), children: [_jsx(SelectTrigger, { className: "w-[180px]", children: _jsx(SelectValue, { placeholder: "Status.." }) }), _jsx(SelectContent, { children: _jsx(SelectGroup, { children: [currentPossibilities.name, ...currentPossibilities.to].map((state) => (_jsx(SelectItem, { value: state, disabled: state === order.state, children: state }, state))) }) })] }), components, _jsx(Button, { className: "ml-auto w-min", onClick: submit, children: t('changeStatus.button') })] }) }));
+};

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

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useOrder, Button, Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger, useTranslation, } from '@deenruv/react-ui-devkit';
+import { useCallback, useEffect, useState } from 'react';
+import { ModifyingCard } from './ModifyingCard.js';
+import { ChangesRegister } from './ChangesRegister';
+export const ModifyAcceptModal = () => {
+    const { t } = useTranslation('orders');
+    const [open, setOpen] = useState(false);
+    const { isOrderModified, getChangesRegistry } = useOrder();
+    const [changes, setChanges] = useState();
+    const getAndSetChanges = useCallback((options) => {
+        setChanges(undefined);
+        getChangesRegistry(options).then(setChanges);
+    }, [getChangesRegistry]);
+    useEffect(() => {
+        if (open)
+            getAndSetChanges();
+        else
+            setChanges(undefined);
+    }, [open]);
+    return (_jsxs(Dialog, { open: open, onOpenChange: setOpen, children: [_jsx(DialogTrigger, { asChild: true, children: _jsx(Button, { className: "w-full justify-start", disabled: !isOrderModified(), children: t('applyChanges') }) }), _jsxs(DialogContent, { className: "h-[90dvh] max-w-[90vw] grid-rows-[auto_1fr_auto]", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { className: "text-muted-foreground", children: t('reviewChanges') }) }), _jsxs("div", { className: "grid grow grid-cols-3 gap-4", children: [_jsx("div", { className: "col-span-2 flex h-full flex-col", children: _jsx("div", { className: "h-0 grow overflow-y-auto pr-2", children: _jsx(ChangesRegister, { changes }) }) }), _jsx(ModifyingCard, { onNoteModified: (bool) => setOpen(bool), onOptionsChange: getAndSetChanges, changes })] })] })] }));
+};

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

@@ -0,0 +1,77 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from 'react';
+import { useOrder, Button, Card, CardContent, CardDescription, CardHeader, CardTitle, Checkbox, Label, Textarea, Tooltip, TooltipContent, TooltipTrigger, Separator, useGFFLP, useTranslation, } from '@deenruv/react-ui-devkit';
+import { toast } from 'sonner';
+import { PriceChangedInfo } from "./PriceChangedInfo.js";
+import { FileEdit, Truck, Tag, CreditCard, AlertCircle, Save, Loader2, RefreshCw } from 'lucide-react';
+import { RefundCard } from "./RefundCard.js";
+export const ModifyingCard = ({ onNoteModified, onOptionsChange, changes }) => {
+    const { t } = useTranslation('orders');
+    const { modifiedOrder, setModifyOrderInput, modifyOrder, modifyOrderInput } = useOrder();
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    const { state, setField } = useGFFLP('ModifyOrderInput')({});
+    const [noteAdded, setNoteAdded] = useState(false);
+    const [sendRefund, setSendRefund] = useState(false);
+    const [refundReason, setRefundReason] = useState('');
+    const priceDifference = useMemo(() => {
+        const totalWithTaxChange = changes?.rest.find((ch) => ch.path === 'totalWithTax');
+        if (!totalWithTaxChange)
+            return 0;
+        return +totalWithTaxChange.added - +totalWithTaxChange.removed;
+    }, [changes]);
+    const currentPayment = modifiedOrder?.payments?.[0];
+    useEffect(() => {
+        if (priceDifference < 0)
+            setSendRefund(true);
+    }, [priceDifference]);
+    useEffect(() => setNoteAdded(!!state.note?.value), [state.note?.value]);
+    useEffect(() => {
+        if (modifiedOrder && state.note?.value) {
+            setModifyOrderInput({
+                ...modifyOrderInput,
+                note: state.note?.value,
+                options: state.options?.value,
+                refund: sendRefund && currentPayment?.transactionId
+                    ? {
+                        paymentId: currentPayment.transactionId,
+                        amount: priceDifference,
+                        reason: refundReason,
+                    }
+                    : undefined,
+            });
+        }
+    }, [state, modifiedOrder]);
+    const acceptModifiedChanges = async () => {
+        if (!noteAdded)
+            return;
+        setIsSubmitting(true);
+        try {
+            await modifyOrder();
+            toast.success(t('modifySuccess', 'Order modifications applied successfully'));
+            onNoteModified && onNoteModified(false);
+        }
+        catch (e) {
+            const message = e instanceof Error ? e.message : t('modifyError', 'Failed to apply order modifications');
+            toast.error(message);
+        }
+        finally {
+            setIsSubmitting(false);
+        }
+    };
+    return (_jsx("form", { className: "h-full max-h-[calc(100vh-200px)]", children: _jsxs(Card, { className: "flex h-full flex-col border-l-4 border-l-blue-500 shadow-sm transition-shadow duration-200 hover:shadow dark:border-l-blue-400", children: [_jsx(CardHeader, { className: "pb-4", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(FileEdit, { className: "size-5 text-blue-500 dark:text-blue-400" }), _jsxs("div", { children: [_jsx(CardTitle, { children: t('orderModification', 'Order Modification') }), _jsx(CardDescription, { className: "mt-1", children: t('orderModificationDescription', 'Modify order details and apply changes') })] })] }) }), _jsxs(CardContent, { className: "flex-1 space-y-6 overflow-y-auto", children: [_jsxs("div", { className: "space-y-3", children: [_jsxs(Label, { htmlFor: "note", className: "text-sm font-medium", children: [t('note', 'Modification Note'), " ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsxs("div", { className: "relative", children: [_jsx(Textarea, { id: "note", placeholder: t('notePlaceholder', 'Enter a note explaining the reason for these modifications...'), value: state.note?.value ?? '', onChange: (e) => setField('note', e.target.value), className: "min-h-[60px] resize-y" }), !state.note?.value && (_jsx("div", { className: "absolute right-3 top-3 text-amber-500", children: _jsx(AlertCircle, { className: "size-4" }) }))] }), _jsx("p", { className: "text-muted-foreground text-xs", children: t('noteRequired', 'A note is required to explain why these changes are being made') })] }), _jsx(Separator, {}), _jsxs("div", { className: "space-y-3", children: [_jsx("h3", { className: "text-muted-foreground text-sm font-medium", children: t('modificationOptions', 'Modification Options') }), _jsxs("div", { className: "flex flex-col space-y-4", children: [_jsxs("div", { className: "border-border bg-muted/20 space-y-4 rounded-md border p-4", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex size-8 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900/30", children: _jsx(RefreshCw, { className: "size-4 text-blue-500 dark:text-blue-400" }) }), _jsx("h4", { className: "font-medium", children: t('processingOptions', 'Processing Options') })] }), _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(Checkbox, { id: "recalculateShipping", checked: state.options?.value?.recalculateShipping ?? false, onCheckedChange: (e) => {
+                                                                        const optionsObj = {
+                                                                            freezePromotions: state?.options?.value?.freezePromotions || false,
+                                                                            recalculateShipping: !!e,
+                                                                        };
+                                                                        setField('options', optionsObj);
+                                                                        onOptionsChange(optionsObj);
+                                                                    } }), _jsxs(Label, { htmlFor: "recalculateShipping", className: "flex cursor-pointer items-center gap-2 text-sm font-medium", children: [_jsx(Truck, { className: "size-4 text-blue-500 dark:text-blue-400" }), t('recalculateShipping', 'Recalculate Shipping')] })] }), _jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(Checkbox, { id: "freezePromotions", checked: state.options?.value?.freezePromotions ?? false, onCheckedChange: (e) => {
+                                                                        const optionsObj = {
+                                                                            freezePromotions: !!e,
+                                                                            recalculateShipping: state?.options?.value?.recalculateShipping || false,
+                                                                        };
+                                                                        setField('options', optionsObj);
+                                                                        onOptionsChange(optionsObj);
+                                                                    } }), _jsxs(Label, { htmlFor: "freezePromotions", className: "flex cursor-pointer items-center gap-2 text-sm font-medium", children: [_jsx(Tag, { className: "size-4 text-blue-500 dark:text-blue-400" }), t('freezePromotions', 'Freeze Promotions')] })] }), !!priceDifference && (_jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(Checkbox, { id: "refund", checked: sendRefund, onCheckedChange: (e) => setSendRefund(e) }), _jsxs(Label, { htmlFor: "refund", className: "flex cursor-pointer items-center gap-2 text-sm font-medium", children: [_jsx(CreditCard, { className: "size-4 text-blue-500 dark:text-blue-400" }), t('refund', 'Process Refund')] })] }))] })] }), sendRefund && (_jsx(RefundCard, { priceDifference: priceDifference, refundReason: refundReason, setRefundReason: setRefundReason }))] })] }), _jsx("div", { className: "flex justify-end", children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("span", { tabIndex: 0, children: _jsx(Button, { onClick: acceptModifiedChanges, disabled: !noteAdded || isSubmitting, type: "button", className: "gap-2", children: isSubmitting ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { className: "size-4 animate-spin" }), t('processing', 'Processing...')] })) : (_jsxs(_Fragment, { children: [_jsx(Save, { className: "size-4" }), t('applyChanges', 'Apply Changes')] })) }) }) }), !noteAdded && (_jsx(TooltipContent, { className: "border border-amber-200 bg-amber-50 text-amber-800 dark:border-amber-800 dark:bg-amber-900/50 dark:text-amber-200", children: _jsxs("div", { className: "flex items-center gap-2 px-1", children: [_jsx(AlertCircle, { className: "size-4" }), t('disabledBtnTooltip', 'A note is required to apply changes')] }) }))] }) })] }), _jsx(PriceChangedInfo, { changes })] }) }));
+};

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

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation, useOrder, apiClient, CustomCard } from '@deenruv/react-ui-devkit';
+import { DeletionResult } from '@deenruv/admin-types';
+import { toast } from 'sonner';
+import { History } from "../../../components";
+import { ClipboardList, AlertCircle } from 'lucide-react';
+export const OrderHistory = () => {
+    const { order, orderHistory: { data, error, loading }, fetchOrderHistory, } = useOrder();
+    const { t } = useTranslation('orders');
+    const addMessageToOrder = async (input) => {
+        if (!order)
+            return;
+        try {
+            const { addNoteToOrder } = await apiClient('mutation')({
+                addNoteToOrder: [{ input: input }, { id: true }],
+            });
+            if (addNoteToOrder?.id) {
+                await fetchOrderHistory();
+                toast.success(t('history.addSuccess', 'Note added successfully'));
+            }
+            else {
+                toast.error(t('history.addError'), { position: 'top-center' });
+            }
+        }
+        catch (error) {
+            toast.error(t('history.addError'), { position: 'top-center' });
+        }
+    };
+    const deleteMessageFromOrder = async (id) => {
+        try {
+            const { deleteOrderNote } = await apiClient('mutation')({
+                deleteOrderNote: [{ id }, { message: true, result: true }],
+            });
+            if (deleteOrderNote.result === DeletionResult.DELETED) {
+                await fetchOrderHistory();
+                toast.success(t('history.deleteSuccess', 'Note deleted successfully'));
+            }
+            else {
+                toast.error(t('history.deleteError', { value: deleteOrderNote.message }), { position: 'top-center' });
+            }
+        }
+        catch (error) {
+            toast.error(t('history.deleteError', { value: error instanceof Error ? error.message : 'Unknown error' }), {
+                position: 'top-center',
+            });
+        }
+    };
+    const editMessageInOrder = async (input) => {
+        try {
+            await apiClient('mutation')({ updateOrderNote: [{ input }, { id: true }] });
+            await fetchOrderHistory();
+            toast.success(t('history.editSuccess', 'Note updated successfully'));
+        }
+        catch (error) {
+            toast.error(t('history.editError'), { position: 'top-center' });
+        }
+    };
+    return (_jsxs(CustomCard, { color: "amber", description: t('history.description', 'Timeline of order events and notes'), title: t('history.title', 'Order History'), icon: _jsx(ClipboardList, {}), collapsed: true, children: [loading && (_jsxs("div", { className: "flex flex-col items-center justify-center py-16 text-center", children: [_jsx("div", { className: "size-8 animate-spin rounded-full border-4 border-amber-200 border-t-amber-500" }), _jsx("p", { className: "text-muted-foreground mt-4 text-sm", children: t('history.loading', 'Loading order history...') })] })), error && (_jsxs("div", { className: "flex flex-col items-center justify-center gap-3 py-16 text-center", children: [_jsx("div", { className: "rounded-full bg-red-100 p-3 dark:bg-red-900/30", children: _jsx(AlertCircle, { className: "size-6 text-red-500 dark:text-red-400" }) }), _jsxs("div", { children: [_jsx("p", { className: "font-medium text-red-600", children: t('toasts.orderHistoryLoadingError', { value: order?.id }) }), _jsx("p", { className: "text-muted-foreground mt-2 text-sm", children: t('history.tryAgain', 'Please try refreshing the page') })] })] })), !loading && !error && (_jsx(History, { data: data, onNoteAdd: addMessageToOrder, onNoteDelete: deleteMessageFromOrder, onNoteEdit: editMessageInOrder }))] }));
+};