@deenruv/admin-dashboard 1.0.0

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

@@ -0,0 +1,308 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { TableHeader, TableRow, TableHead, TableBody, TableCell, Table, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuItem, Dialog, DialogContent, TooltipProvider, TooltipTrigger, TooltipContent, Tooltip, apiClient, cn, useServer, useOrder, CustomCard, ImageWithPreview, useTranslation, priceFormatter, DialogProductPicker, } from '@deenruv/react-ui-devkit';
+import { removeOrderItemsResultSelector, updateOrderItemsSelector, updatedDraftOrderSelector, } from "../../../graphql/draft_order";
+import { EllipsisVertical, InfoIcon, Trash2, ShoppingCart, Package, Tag, Edit } from 'lucide-react';
+import { useCallback, useMemo, useState } from 'react';
+import { toast } from 'sonner';
+import { OrderLineActionModal } from './OrderLineActionModal/index.js';
+import { CustomComponent } from './CustomComponent.js';
+import { OrderLineCustomFields } from './OrderLineCustomFields.js';
+import { SpecialLineItem } from './SpecialLineItem.js';
+export const ProductsCard = () => {
+    const { t } = useTranslation('orders');
+    const orderLineCustomFields = useServer((p) => p.serverConfig?.entityCustomFields?.find((el) => el.entityName === 'OrderLine')?.customFields || []);
+    const { mode, order, setOrder, setModifiedOrder, modifiedOrder, fetchOrder } = useOrder();
+    const currentOrder = useMemo(() => (mode === 'update' ? (modifiedOrder ? modifiedOrder : order) : order), [mode, order, modifiedOrder]);
+    const [open, setOpen] = useState(false);
+    const [selectedVariant, setSelectedVariant] = useState(undefined);
+    const [customFields, setCustomFields] = useState({});
+    const [quantity, setQuantity] = useState(1);
+    const [orderLineId, setOrderLineId] = useState();
+    const [orderLineAction, setOrderLineAction] = useState();
+    const isLineAddedInModify = (lineId) => order?.lines.findIndex((l) => l.id === lineId) === -1;
+    const serializeCustomFields = (customFields) => JSON.stringify(Object.fromEntries(Object.entries(customFields).sort(([a], [b]) => a.localeCompare(b))));
+    const addToOrder = async (productVariant, quantity, customFields) => {
+        if (!order)
+            return;
+        try {
+            if (mode === 'update' && modifiedOrder) {
+                const mockLine = {
+                    id: productVariant.id,
+                    quantity,
+                    discountedLinePrice: productVariant.price * quantity,
+                    unitPrice: productVariant.price,
+                    unitPriceWithTax: Math.round(productVariant.price * (1 + order.taxSummary[0].taxRate / 100)),
+                    linePrice: productVariant.price,
+                    linePriceWithTax: Math.round(productVariant.price * (1 + order.taxSummary[0].taxRate / 100)),
+                    discountedLinePriceWithTax: productVariant.priceWithTax * quantity,
+                    discountedUnitPrice: productVariant.price,
+                    discountedUnitPriceWithTax: productVariant.priceWithTax,
+                    productVariant,
+                    taxRate: order.taxSummary[0].taxRate,
+                    ...(customFields && { customFields }),
+                };
+                const existingLineIndex = modifiedOrder.lines.findIndex((line) => {
+                    const sameId = line.id === mockLine.id;
+                    // if (!customFields) {
+                    return sameId;
+                    // }
+                    // @ts-ignore
+                    // return sameId && serializeCustomFields(line.customFields) === serializeCustomFields(customFields);
+                });
+                let newLines;
+                if (existingLineIndex !== -1) {
+                    newLines = modifiedOrder.lines.map((line, index) => index === existingLineIndex ? { ...line, quantity: line.quantity + 1 } : line);
+                }
+                else {
+                    newLines = [...modifiedOrder.lines, mockLine];
+                }
+                setModifiedOrder({
+                    ...modifiedOrder,
+                    lines: newLines,
+                });
+                toast.success(t('create.productAdded', 'Product added to order'));
+                return;
+            }
+            const { addItemToDraftOrder } = await apiClient('mutation')({
+                addItemToDraftOrder: [
+                    {
+                        input: {
+                            productVariantId: productVariant.id,
+                            quantity,
+                            ...(customFields && { customFields }),
+                        },
+                        orderId: order.id,
+                    },
+                    updatedDraftOrderSelector,
+                ],
+            });
+            if (addItemToDraftOrder.__typename === 'Order' || addItemToDraftOrder.__typename === 'InsufficientStockError') {
+                if (addItemToDraftOrder.__typename === 'Order') {
+                    setOrder(addItemToDraftOrder);
+                    toast.success(t('create.productAdded', 'Product added to order'));
+                }
+                else {
+                    setOrder(addItemToDraftOrder.order);
+                    toast.error(t('toasts.insufficientStockError', { value: productVariant.product.name }));
+                }
+                closeAddVariantDialog();
+            }
+        }
+        catch (error) {
+            toast.error(t('create.addError', 'Failed to add product'));
+        }
+    };
+    const removeLineItem = async (orderLineId) => {
+        if (!order)
+            return;
+        try {
+            if (mode === 'update' && modifiedOrder) {
+                setModifiedOrder({
+                    ...modifiedOrder,
+                    lines: modifiedOrder.lines.filter((l) => l.id !== orderLineId),
+                });
+                toast.success(t('create.productRemoved', 'Product removed from order'));
+                return;
+            }
+            const { removeDraftOrderLine } = await apiClient('mutation')({
+                removeDraftOrderLine: [{ orderId: order.id, orderLineId }, removeOrderItemsResultSelector],
+            });
+            if (removeDraftOrderLine.__typename === 'Order') {
+                setOrder(removeDraftOrderLine);
+                toast.success(t('create.productRemoved', 'Product removed from order'));
+            }
+        }
+        catch (error) {
+            toast.error(t('create.removeError', 'Failed to remove product'));
+        }
+    };
+    const onPriceQuantityChangeApprove = async (input) => {
+        if (!order)
+            return;
+        const { lineID, quantityChange } = input;
+        try {
+            if (mode === 'update' && modifiedOrder) {
+                const editedLineIdx = modifiedOrder.lines.findIndex((l) => l.id === lineID);
+                const quantity = quantityChange ? quantityChange : modifiedOrder.lines[editedLineIdx].quantity;
+                const editedLine = {
+                    ...modifiedOrder.lines[editedLineIdx],
+                    quantity,
+                };
+                setModifiedOrder({
+                    ...modifiedOrder,
+                    lines: modifiedOrder.lines.map((l, i) => (i === editedLineIdx ? editedLine : l)),
+                });
+                toast.success(t('create.productUpdated', 'Product updated'));
+            }
+            else if (mode === 'create') {
+                const editedLineIdx = order.lines.findIndex((l) => l.id === lineID);
+                if (quantityChange) {
+                    const { adjustDraftOrderLine } = await apiClient('mutation')({
+                        adjustDraftOrderLine: [
+                            {
+                                orderId: order.id,
+                                input: {
+                                    orderLineId: order.lines[editedLineIdx].id,
+                                    quantity: quantityChange,
+                                    ...(Object.keys(customFields || {}).length > 0 && { customFields }),
+                                },
+                            },
+                            updateOrderItemsSelector,
+                        ],
+                    });
+                    if (adjustDraftOrderLine.__typename === 'Order' ||
+                        adjustDraftOrderLine.__typename === 'InsufficientStockError') {
+                        if (adjustDraftOrderLine.__typename === 'Order') {
+                            setOrder(adjustDraftOrderLine);
+                            toast.success(t('create.productUpdated', 'Product updated'));
+                        }
+                        else {
+                            setOrder(adjustDraftOrderLine.order);
+                            toast.error(t('toasts.insufficientStockError', { value: order.lines[editedLineIdx].productVariant.product.name }));
+                        }
+                    }
+                }
+                fetchOrder(order.id);
+            }
+        }
+        catch (error) {
+            toast.error(t('create.updateError', 'Failed to update product'));
+        }
+    };
+    const adjustLineItem = async (orderLineId, quantity, customFields) => {
+        if (!order)
+            return;
+        try {
+            if (mode === 'update' && modifiedOrder) {
+                const editedLineIdx = modifiedOrder.lines.findIndex((l) => l.id === orderLineId);
+                const editedLine = {
+                    ...modifiedOrder.lines[editedLineIdx],
+                    quantity,
+                    customFields,
+                };
+                setModifiedOrder({
+                    ...modifiedOrder,
+                    lines: modifiedOrder.lines.map((l, i) => (i === editedLineIdx ? editedLine : l)),
+                });
+                setOpen(false);
+                toast.success(t('create.productUpdated', 'Product updated'));
+                return;
+            }
+            const { adjustDraftOrderLine } = await apiClient('mutation')({
+                adjustDraftOrderLine: [
+                    {
+                        orderId: order.id,
+                        input: { orderLineId, quantity, ...(Object.keys(customFields || {}).length > 0 && { customFields }) },
+                    },
+                    updateOrderItemsSelector,
+                ],
+            });
+            if (adjustDraftOrderLine.__typename === 'Order' || adjustDraftOrderLine.__typename === 'InsufficientStockError') {
+                if (adjustDraftOrderLine.__typename === 'Order') {
+                    setOrder(adjustDraftOrderLine);
+                    toast.success(t('create.productUpdated', 'Product updated'));
+                }
+                else {
+                    setOrder(adjustDraftOrderLine.order);
+                    toast.error(t('toasts.insufficientStockError', { value: 'product' }));
+                }
+            }
+        }
+        catch (error) {
+            toast.error(t('create.updateError', 'Failed to update product'));
+        }
+    };
+    const openAddVariantDialog = (input) => {
+        setOpen(true);
+        setOrderLineId(input.orderLineId ? input.orderLineId : undefined);
+        setSelectedVariant(input.variant);
+        setCustomFields({
+            attributes: input.customFields?.attributes,
+            discountBy: input.customFields?.discountBy,
+        });
+        setQuantity(input.quantity ? input.quantity : 1);
+    };
+    const closeAddVariantDialog = () => {
+        setOpen(false);
+        setSelectedVariant(undefined);
+        setOrderLineId(undefined);
+    };
+    const onOrderLineActionModalOpenChange = (isOpen) => {
+        if (isOpen)
+            return;
+        setOrderLineAction(undefined);
+    };
+    const handleNewVariantAdd = async (customFields) => {
+        if (orderLineId) {
+            await adjustLineItem(orderLineId, quantity, customFields);
+            return;
+        }
+        else if (selectedVariant) {
+            await addToOrder(selectedVariant, quantity, customFields);
+        }
+        closeAddVariantDialog();
+    };
+    const renderLineQuantity = useCallback((lineId, quantity) => {
+        const allRefundLines = order?.payments?.flatMap((payment) => payment.refunds)?.flatMap((refund) => refund.lines);
+        const lineInRefunds = allRefundLines?.find((line) => line.orderLineId === lineId);
+        if (!lineInRefunds)
+            return quantity;
+        else
+            return (_jsxs("div", { className: "flex gap-2", children: [_jsx("span", { className: "text-red-500 line-through", children: lineInRefunds.quantity }), quantity] }));
+    }, [order?.lines, order?.payments]);
+    if (!order)
+        return null;
+    return (_jsxs(_Fragment, { children: [_jsx(Dialog, { open: open, onOpenChange: (e) => (!e ? closeAddVariantDialog() : setOpen(true)), children: _jsx(DialogContent, { className: "bg-background max-h-[90vh] min-h-[60vh] max-w-[65vw] overflow-auto", children: selectedVariant ? (_jsxs("div", { className: "flex size-full flex-col justify-between", children: [_jsx("h3", { className: "text-primary pb-4 text-xl font-semibold", children: t('create.addVariant') }), _jsx("div", { className: "flex h-full flex-col gap-8", children: _jsx("div", { className: "flex size-full flex-col items-center gap-2", children: _jsxs("div", { className: "flex size-full justify-between gap-4", children: [_jsx(SpecialLineItem, { variant: { ...selectedVariant, quantity: 1 } }), _jsx(CustomComponent, { onVariantAdd: handleNewVariantAdd, orderLine: selectedVariant })] }) }) })] })) : (_jsx("div", { className: "text-muted-foreground flex items-center justify-center p-8", children: t('create.somethingWrong') })) }) }), _jsx(CustomCard, { color: "blue", description: t(mode === 'view' ? 'create.viewHeader' : mode === 'update' ? 'create.editHeader' : 'create.addHeader'), title: t(mode === 'view' ? 'create.viewTitle' : mode === 'update' ? 'create.editTitle' : 'create.addTitle'), icon: _jsx(ShoppingCart, {}), children: _jsxs("div", { className: "grid gap-6", children: [mode !== 'view' && (_jsx(DialogProductPicker, { initialValue: '', mode: "variant", onSubmit: async (selectedProduct) => {
+                                const payload = {
+                                    variant: {
+                                        id: selectedProduct.productVariantId,
+                                        price: selectedProduct.price.__typename === 'SinglePrice'
+                                            ? selectedProduct.price.value
+                                            : selectedProduct.price.min,
+                                        priceWithTax: selectedProduct.priceWithTax.__typename === 'SinglePrice'
+                                            ? selectedProduct.priceWithTax.value
+                                            : selectedProduct.priceWithTax.min,
+                                        sku: selectedProduct.sku,
+                                        currencyCode: selectedProduct.currencyCode,
+                                        name: selectedProduct.productVariantName,
+                                        productId: selectedProduct.productId,
+                                        stockLevels: [{ stockOnHand: 0 }],
+                                        product: {
+                                            id: selectedProduct.productId,
+                                            name: selectedProduct.productName,
+                                            slug: selectedProduct.slug,
+                                            featuredAsset: selectedProduct.productAsset,
+                                        },
+                                        featuredAsset: selectedProduct.productVariantAsset,
+                                    },
+                                    quantity: 1,
+                                    customFields: {},
+                                };
+                                const variant = await apiClient('query')({
+                                    productVariant: [
+                                        { id: selectedProduct.productVariantId },
+                                        { id: true, stockLevels: { id: true, stockOnHand: true } },
+                                    ],
+                                });
+                                if (variant?.productVariant?.customFields) {
+                                    const customFields = variant?.productVariant?.customFields;
+                                    payload.customFields = customFields;
+                                }
+                                if (variant?.productVariant?.stockLevels) {
+                                    payload.variant.stockLevels = variant.productVariant.stockLevels;
+                                }
+                                if (orderLineCustomFields.length) {
+                                    openAddVariantDialog(payload);
+                                }
+                                else {
+                                    addToOrder(payload.variant, payload.quantity, payload.customFields);
+                                }
+                            } })), _jsx("div", { className: "border-border rounded-lg border-0 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('create.quantity', 'Quantity') }), _jsx(TableHead, { className: "py-3 font-semibold", children: t('create.perUnit', 'Per Unit') }), (mode === 'create' || mode === 'update') && (_jsx(TableHead, { className: "py-3 text-right font-semibold", children: t('create.actions', 'Actions') }))] }) }), _jsx(TableBody, { children: currentOrder.lines.length ? (_jsxs(_Fragment, { 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: "text-primary font-medium", children: line.productVariant.product.name })] }) }), _jsx(TableCell, { className: "text-muted-foreground min-w-[200px] py-3 font-mono text-sm", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Tag, { className: "size-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 text-center font-semibold", children: renderLineQuantity(line.id, line.quantity) }), _jsx(TableCell, { className: "py-3", children: _jsxs("div", { className: "flex flex-col", children: [_jsx("span", { children: priceFormatter(line.unitPrice, line.productVariant.currencyCode) }), _jsxs("span", { className: "text-muted-foreground text-sm", children: ["(", priceFormatter(line.unitPriceWithTax, line.productVariant.currencyCode), ")"] })] }) }), (mode === 'create' || mode === 'update') && (_jsx(TableCell, { className: "py-3 text-right", children: _jsxs("div", { className: "flex items-center justify-end gap-3", children: [_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { className: "hover:bg-muted flex size-8 items-center justify-center rounded-md", children: _jsx(EllipsisVertical, { className: "size-5" }) }), _jsxs(DropdownMenuContent, { align: "end", children: [_jsx(DropdownMenuLabel, { children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Edit, { className: "size-4 text-blue-500" }), t('editOptions', 'Edit Options')] }) }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { disabled: isLineAddedInModify(line.id), onClick: () => !isLineAddedInModify(line.id) && setOrderLineAction({ line }), className: cn('flex cursor-pointer justify-between', {
+                                                                                            'text-muted-foreground': isLineAddedInModify(line.id),
+                                                                                        }), children: [_jsx("span", { children: t('orderLineActionModal.actionType.quantity-price', 'Adjust Quantity & Price') }), isLineAddedInModify(line.id) && (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(InfoIcon, { className: "text-muted-foreground size-4" }) }), _jsx(TooltipContent, { children: _jsx("p", { children: t('modify.disclaimer', 'Cannot modify items added in previous sessions') }) })] }) }))] })] })] }), (mode === 'create' || isLineAddedInModify(line.id)) && (_jsx("button", { className: "flex size-8 items-center justify-center rounded-md text-red-500 hover:bg-red-50 hover:text-red-600", onClick: () => removeLineItem(line.id), children: _jsx(Trash2, { className: "size-4" }) }))] }) }))] }, line.id))), currentOrder?.surcharges.map((surcharge) => (_jsxs(TableRow, { className: "bg-muted/10 hover:bg-muted/20", children: [_jsx(TableCell, { className: "text-primary py-3 font-medium", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Package, { className: "size-4 text-blue-500 dark:text-blue-400" }), surcharge.description] }) }), _jsx(TableCell, { className: "text-muted-foreground min-w-[200px] py-3 font-mono text-sm", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Tag, { className: "size-4 text-blue-500 dark:text-blue-400" }), surcharge.sku] }) }), _jsx(TableCell, { className: "py-3" }), _jsx(TableCell, { className: "text-nowrap py-3 font-medium", children: priceFormatter(surcharge.price, order.currencyCode) }), _jsx(TableCell, { className: "text-nowrap py-3 font-medium", children: priceFormatter(surcharge.priceWithTax, order.currencyCode) }), _jsx(TableCell, { className: "py-3" }), _jsx(TableCell, { className: "py-3 font-medium", children: priceFormatter(surcharge.priceWithTax, order.currencyCode) }), (mode === 'create' || mode === 'update') && _jsx(TableCell, { className: "py-3" })] }, surcharge.sku)))] })) : (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 8, children: _jsxs("div", { className: "flex flex-col items-center justify-center py-12 text-center", children: [_jsx("div", { className: "mb-4 rounded-full bg-blue-100 p-3 dark:bg-blue-900/30", children: _jsx(ShoppingCart, { className: "size-6 text-blue-500 dark:text-blue-400" }) }), _jsx("span", { className: "text-muted-foreground text-lg font-medium", children: t('create.noItems', 'No products in this order') }), mode !== 'view' && (_jsx("span", { className: "text-muted-foreground mt-2 text-sm", children: t('create.searchPlaceholder', 'Use the search above to add products') }))] }) }) })) })] }) }), _jsx("div", { className: "mt-6 border-t pt-4", children: _jsx("div", { className: "bg-card rounded-lg border p-4 shadow-sm", children: _jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-base font-semibold", children: t('total') }), _jsx("span", { className: "text-primary text-base font-bold", children: priceFormatter(currentOrder?.totalWithTax || 0, currentOrder?.currencyCode) })] }), _jsx("div", { className: "text-muted-foreground mt-2 text-xs", children: _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(InfoIcon, { className: "size-3" }), _jsx("span", { children: t('totalItems', {
+                                                            value: currentOrder?.lines.reduce((acc, line) => acc + line.quantity, 0) || 0,
+                                                        }) })] }) })] }) }) }), _jsx(OrderLineActionModal, { onPriceQuantityChangeApprove: onPriceQuantityChangeApprove, onOpenChange: onOrderLineActionModalOpenChange, ...orderLineAction })] }) })] }));
+};

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

@@ -0,0 +1,29 @@
+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, } from '@deenruv/react-ui-devkit';
+import { Tag } from 'lucide-react';
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+export const ProductsTable = ({ setRefundLines, refundLines }) => {
+    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: "border-border rounded-lg border-0 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: "text-primary font-medium", children: line.productVariant.product.name })] }) }), _jsx(TableCell, { className: "text-muted-foreground min-w-[200px] py-3 font-mono text-sm", 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))) })] }) }));
+};

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

@@ -0,0 +1,73 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useOrder, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Badge, ScrollArea, EmptyState, CustomCard, useTranslation, Button, useMutation, CardDescription, useLazyQuery, Input, OrderDetailSelector, priceFormatter, } from '@deenruv/react-ui-devkit';
+import { BadgePercent, Gift, Tag, CreditCard, Trash, Plus } from 'lucide-react';
+import { $, scalars, typedGql } from '@deenruv/admin-types';
+import { toast } from 'sonner';
+import { useEffect, useState } from 'react';
+const ToggleExcludePromotionMutation = typedGql('mutation', { scalars })({
+    toggleExcludePromotionInOrder: [
+        { orderId: $('orderId', 'ID!'), promotionId: $('promotionId', 'ID!') },
+        OrderDetailSelector,
+    ],
+});
+const ExcludedPromotionsQuery = typedGql('query', { scalars })({
+    promotions: [{ options: { filter: { id: { in: $('ids', '[String!]') } } } }, { items: { name: true, id: 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 PromotionsList = () => {
+    const { order, setOrder } = useOrder();
+    const { t } = useTranslation('orders');
+    const [togglePromotionExclusion, { loading: exclusionLoading }] = useMutation(ToggleExcludePromotionMutation);
+    const [removeCoupon, { loading: removeCouponLoading }] = useMutation(RemoveCouponCodeMutation);
+    const [applyCoupon] = useMutation(ApplyCouponCodeMutation);
+    const [fetchExcludedPromotions, { data: excludedData }] = useLazyQuery(ExcludedPromotionsQuery);
+    const excluded = excludedData?.promotions?.items ?? [];
+    const loading = exclusionLoading || removeCouponLoading;
+    useEffect(() => {
+        fetchExcludedPromotions({
+            ids: order?.excludedPromotionIds || [],
+        });
+    }, [order?.excludedPromotionIds]);
+    const [couponCode, setCouponCode] = useState('');
+    if (!order)
+        return null;
+    const removeExcludePromotionHandler = async ({ id, couponCode, }) => {
+        let res;
+        if (!couponCode) {
+            res = await togglePromotionExclusion({ orderId: order.id, promotionId: id });
+        }
+        else {
+            res = await removeCoupon({ orderId: order.id, couponCode: couponCode });
+        }
+        if ('removeCouponCodeFromDraftOrder' in res) {
+            setOrder(res.removeCouponCodeFromDraftOrder);
+        }
+        else if ('toggleExcludePromotionInOrder' in res) {
+            setOrder(res.toggleExcludePromotionInOrder);
+        }
+    };
+    const addCouponHandler = async () => {
+        const resp = await applyCoupon({ couponCode: couponCode, orderId: order.id });
+        if (resp.applyCouponCodeToDraftOrder.__typename === 'Order') {
+            setOrder(resp.applyCouponCodeToDraftOrder);
+            setCouponCode('');
+            toast.success(t('couponCodes.addToastSuccess'));
+        }
+        else {
+            toast.error('could not add coupon code');
+        }
+    };
+    return (_jsxs("div", { className: "grid w-full grid-cols-1 gap-4 md:grid-cols-6 lg:grid-cols-12", children: [_jsx(CustomCard, { notCollapsible: true, color: "blue", description: t('promotions.description', 'Active order promotions'), title: t('promotions.title', 'Promotions'), wrapperClassName: "col-span-1 h-full md:col-span-2 lg:col-span-6", icon: _jsx(Gift, {}), upperRight: _jsxs("div", { className: "flex gap-2 py-2", children: [_jsx(Input, { placeholder: t('couponCodes.placeholder'), value: couponCode, onChange: (e) => setCouponCode(e.target.value) }), _jsx(Button, { size: 'icon', className: "w-14", onClick: addCouponHandler, children: _jsx(Plus, {}) })] }), children: _jsxs(ScrollArea, { className: "h-[280px]", children: [_jsxs(Table, { className: "h-full", children: [_jsx(TableHeader, { children: _jsxs(TableRow, { noHover: true, className: "border-border border-b", children: [_jsx(TableHead, { className: "py-3", children: t('taxSummary.description') }), _jsx(TableHead, { className: "py-3", children: t('couponCodes.title') }), _jsx(TableHead, { align: "right", style: { textAlign: 'right' }, children: t('table.actions') })] }) }), _jsx(TableBody, { className: "h-[232px]", children: order.promotions.length ? (order.promotions.map(({ name, couponCode, id }) => (_jsxs(TableRow, { noHover: true, className: "group", children: [_jsx(TableCell, { className: "py-3 font-medium", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Tag, { className: "size-4 text-blue-500 dark:text-blue-400" }), _jsx("span", { className: "capitalize", children: name })] }) }), _jsx(TableCell, { className: "py-3", children: couponCode ? (_jsx(Badge, { variant: "outline", className: "font-mono text-xs", children: couponCode })) : (_jsx("span", { className: "text-muted-foreground", children: "\u2014" })) }), _jsx(TableCell, { align: "right", children: _jsx(Button, { size: "icon", variant: "destructive", disabled: loading, onClick: () => removeExcludePromotionHandler({ couponCode, id }), children: _jsx(Trash, { size: 16 }) }) })] }, name)))) : (_jsx(EmptyState, { columnsLength: 3, title: t('promotions.noPromotions', 'No promotions applied'), color: "blue", icon: _jsx(Gift, {}), small: true })) })] }), !!excluded.length && (_jsxs(_Fragment, { children: [_jsx("hr", { className: "!my-4 border-t-[3px]" }), _jsx(CardDescription, { children: t('promotion.excludedPromotions') }), _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { noHover: true, children: [_jsx(TableHead, { children: t('promotion.name') }), _jsx(TableHead, { align: "right", style: { textAlign: 'right' }, children: t('table.actions') })] }) }), _jsx(TableBody, { children: excluded.map(({ name, id }) => (_jsxs(TableRow, { noHover: true, children: [_jsx(TableCell, { className: "capitalize", children: name }), _jsx(TableCell, { align: "right", children: _jsx(Button, { size: "icon", variant: "destructive", onClick: () => removeExcludePromotionHandler({ id }), children: _jsx(Trash, { size: 16 }) }) })] }, name))) })] })] }))] }) }), _jsx(CustomCard, { notCollapsible: true, description: t('discounts.description', 'Applied order discounts'), title: t('discounts.title', 'Discounts'), icon: _jsx(BadgePercent, { className: "size-5 text-green-500 dark:text-green-400" }), wrapperClassName: "col-span-1 h-full md:col-span-2 lg:col-span-6", color: "green", children: _jsx(ScrollArea, { className: "h-[280px]", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { noHover: true, className: "border-border border-b", children: [_jsx(TableHead, { className: "py-3", children: t('taxSummary.description') }), _jsx(TableHead, { className: "py-3", children: t('taxSummary.taxRate', 'Type') }), _jsx(TableHead, { className: "py-3", children: t('taxSummary.taxBase', 'Amount') }), _jsx(TableHead, { className: "py-3", children: t('taxSummary.taxTotal', 'With Tax') }), _jsx(TableHead, { className: "py-3", children: t('discounts.source', 'Source') })] }) }), _jsx(TableBody, { className: "h-[232px]", children: order.discounts.length ? (order.discounts.map(({ adjustmentSource, amount, amountWithTax, description, type }, index) => (_jsxs(TableRow, { noHover: true, className: "group", children: [_jsx(TableCell, { className: "py-3 font-medium", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(CreditCard, { className: "size-4 text-green-500 dark:text-green-400" }), _jsx("span", { className: "capitalize", children: description })] }) }), _jsx(TableCell, { className: "py-3", children: _jsx(Badge, { variant: "secondary", className: "font-medium", children: type }) }), _jsx(TableCell, { className: "py-3 font-mono text-sm", children: priceFormatter(amount, order.currencyCode) }), _jsx(TableCell, { className: "py-3 font-mono text-sm", children: priceFormatter(amountWithTax, order.currencyCode) }), _jsx(TableCell, { className: "py-3", children: _jsx(Badge, { variant: "outline", className: "capitalize", children: adjustmentSource }) })] }, index)))) : (_jsx(EmptyState, { columnsLength: 5, title: t('discounts.emptyState'), color: "green", icon: _jsx(BadgePercent, {}), small: true })) })] }) }) })] }));
+};

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

@@ -0,0 +1,98 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TableHeader, TableRow, TableHead, TableBody, TableCell, Table, apiClient, useOrder, OrderDetailSelector, Badge, ScrollArea, CustomCard, ContextMenu, DropdownMenuItem, ConfirmationDialog, Button, useTranslation, } from '@deenruv/react-ui-devkit';
+import { AnimatePresence, motion } from 'framer-motion';
+import { useCallback, useState } from 'react';
+import { toast } from 'sonner';
+import { ORDER_STATE } from "../../../graphql/base";
+import { Package, Truck, CheckCircle, XCircle, AlertCircle, ClipboardCheck } from 'lucide-react';
+export const RealizationCard = () => {
+    const { order, setOrder, fetchOrderHistory, cancelFulfillment } = useOrder();
+    const { t } = useTranslation('orders');
+    const [processingFulfillments, setProcessingFulfillments] = useState({});
+    const markAsDelivered = async (fulfillmentId) => {
+        if (!order)
+            return;
+        setProcessingFulfillments((prev) => ({ ...prev, [fulfillmentId]: true }));
+        try {
+            const { transitionFulfillmentToState } = await apiClient('mutation')({
+                transitionFulfillmentToState: [
+                    { id: fulfillmentId, state: 'Delivered' },
+                    {
+                        __typename: true,
+                        '...on Fulfillment': {
+                            id: true,
+                        },
+                        '...on FulfillmentStateTransitionError': {
+                            errorCode: true,
+                            fromState: true,
+                            message: true,
+                            toState: true,
+                            transitionError: true,
+                        },
+                    },
+                ],
+            });
+            if (transitionFulfillmentToState.__typename === 'Fulfillment') {
+                const resp = await apiClient('query')({ order: [{ id: order.id }, OrderDetailSelector] });
+                setOrder(resp.order);
+                fetchOrderHistory();
+                toast.success(t('fulfillments.deliveredSuccess', 'Fulfillment marked as delivered'));
+            }
+            else {
+                const errorMessage = transitionFulfillmentToState?.message || t('fulfillments.error', 'Something went wrong');
+                toast.error(errorMessage);
+            }
+        }
+        catch (error) {
+            toast.error(t('fulfillments.error', 'Something went wrong'));
+        }
+        finally {
+            setProcessingFulfillments((prev) => ({ ...prev, [fulfillmentId]: false }));
+        }
+    };
+    const handleCancelFulfillment = async (fulfillmentId) => {
+        if (!order)
+            return;
+        setProcessingFulfillments((prev) => ({ ...prev, [fulfillmentId]: true }));
+        try {
+            cancelFulfillment(fulfillmentId);
+        }
+        finally {
+            setProcessingFulfillments((prev) => ({ ...prev, [fulfillmentId]: false }));
+        }
+    };
+    const markAllAsDelivered = useCallback(async () => {
+        const shippedIds = order?.fulfillments?.filter((f) => f.state === ORDER_STATE.SHIPPED).map((f) => f.id);
+        shippedIds?.forEach((id) => {
+            markAsDelivered(id);
+        });
+    }, []);
+    const getFulfillmentStateBadge = (state) => {
+        switch (state) {
+            case ORDER_STATE.CREATED:
+                return { variant: 'secondary', icon: _jsx(Package, { className: "mr-1 size-3.5" }) };
+            case ORDER_STATE.SHIPPED:
+                return { variant: 'outline', icon: _jsx(Truck, { className: "mr-1 size-3.5 text-blue-500" }) };
+            case ORDER_STATE.DELIVERED:
+                return { variant: 'success', icon: _jsx(CheckCircle, { className: "mr-1 size-3.5" }) };
+            case ORDER_STATE.CANCELLED:
+                return { variant: 'destructive', icon: _jsx(XCircle, { className: "mr-1 size-3.5" }) };
+            default:
+                return { variant: 'outline', icon: _jsx(AlertCircle, { className: "mr-1 size-3.5" }) };
+        }
+    };
+    if (!order)
+        return null;
+    if (!order.fulfillments?.length)
+        return null;
+    return (_jsx(AnimatePresence, { children: _jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.4, ease: 'easeInOut' }, children: _jsx(CustomCard, { title: t('fulfillments.title', 'Order Fulfillments'), description: t('fulfillments.description', 'Track and manage the delivery status of this order'), icon: _jsx(ClipboardCheck, {}), color: "rose", upperRight: _jsxs(Button, { variant: order.state === ORDER_STATE.SHIPPED ? 'action' : 'ghost', size: "sm", disabled: order.state !== ORDER_STATE.SHIPPED, className: "gap-2", onClick: markAllAsDelivered, children: [_jsx(CheckCircle, { className: "size-4" }), order?.fulfillments?.filter((f) => f.state === ORDER_STATE.SHIPPED).length > 0
+                            ? t('fulfillments.markAllAsDelivered')
+                            : t('fulfillments.allDelivered')] }), children: _jsx(ScrollArea, { className: "max-h-[350px]", children: _jsxs(Table, { children: [_jsx(TableHeader, { className: "bg-muted/30", children: _jsxs(TableRow, { noHover: true, className: "hover:bg-transparent", children: [_jsx(TableHead, { className: "py-3 font-semibold", children: t('fulfillments.method', 'Method') }), _jsx(TableHead, { className: "py-3 font-semibold", children: t('fulfillments.state', 'Status') }), _jsx(TableHead, { className: "py-3 font-semibold", children: t('fulfillments.trackingCode', 'Tracking Code') }), _jsx(TableHead, { className: "py-3 text-right font-semibold", children: t('fulfillments.actions', 'Actions') })] }) }), _jsx(TableBody, { children: order.fulfillments.map((fulfillment) => {
+                                    const stateBadge = getFulfillmentStateBadge(fulfillment.state);
+                                    const isProcessing = processingFulfillments[fulfillment.id];
+                                    console.log('FLF', fulfillment);
+                                    return (_jsxs(TableRow, { className: "hover:bg-muted/20", children: [_jsx(TableCell, { className: "py-3", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Truck, { className: "size-4 text-green-500 dark:text-green-400" }), _jsx("span", { className: "font-medium", children: fulfillment.method })] }) }), _jsx(TableCell, { className: "py-3", children: _jsxs(Badge, { variant: stateBadge.variant, className: "flex w-fit items-center gap-1", children: [stateBadge.icon, t('fulfillments.states.' + fulfillment.state.toLowerCase())] }) }), _jsx(TableCell, { className: "py-3", children: fulfillment.trackingCode ? (_jsx("div", { className: "flex items-center gap-2", children: _jsx("code", { className: "bg-muted rounded px-2 py-1 font-mono text-xs", children: fulfillment.trackingCode }) })) : (_jsx("span", { className: "text-muted-foreground", children: "\u2014" })) }), _jsx(TableCell, { className: "py-3 text-right", children: _jsxs(ContextMenu, { disabled: fulfillment.state === ORDER_STATE.CANCELLED, children: [fulfillment.state === ORDER_STATE.SHIPPED && (_jsxs(DropdownMenuItem, { onClick: () => markAsDelivered(fulfillment.id), disabled: isProcessing, className: "flex cursor-pointer items-center gap-2", children: [_jsx(CheckCircle, { className: "size-3.5 text-green-500" }), t('fulfillments.markAsDelivered', 'Mark as Delivered')] }, 'set')), (fulfillment.state === ORDER_STATE.DELIVERED ||
+                                                            fulfillment.state === ORDER_STATE.SHIPPED) && (_jsx(ConfirmationDialog, { onConfirm: () => handleCancelFulfillment(fulfillment.id), children: _jsxs(DropdownMenuItem, { disabled: isProcessing, className: "flex cursor-pointer items-center gap-2 text-red-500", onSelect: (e) => e.preventDefault(), children: [_jsx(XCircle, { size: 16 }), t('fulfillments.cancel', 'Cancel')] }, 'cancel') }))] }) })] }, fulfillment.id));
+                                }) })] }) }) }) }) }));
+};

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

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation, cn, priceFormatter, Textarea, useOrder } from '@deenruv/react-ui-devkit';
+import { CreditCard, FileText } from 'lucide-react';
+import { useState } from 'react';
+export const RefundCard = ({ priceDifference, refundReason, setRefundReason }) => {
+    const { t } = useTranslation('orders');
+    const { modifiedOrder } = useOrder();
+    const currentPayment = modifiedOrder?.payments?.[0];
+    const [activeTab, setActiveTab] = useState('details');
+    return (_jsxs("div", { className: "border-border bg-muted/20 space-y-4 rounded-md border p-4", children: [_jsxs("div", { className: "flex items-center gap-6", children: [_jsxs("div", { className: cn('flex cursor-pointer items-center gap-2', activeTab === 'details' ? 'opacity-100' : 'opacity-60 hover:opacity-80'), onClick: () => setActiveTab('details'), children: [_jsx("div", { className: "flex size-8 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900/30", children: _jsx(CreditCard, { className: "size-4 text-blue-500 dark:text-blue-400" }) }), _jsx("h4", { className: "font-medium", children: t('refund.details', 'Refund Details') })] }), _jsxs("div", { className: cn('flex cursor-pointer items-center gap-2', activeTab === 'note' ? 'opacity-100' : 'opacity-60 hover:opacity-80'), onClick: () => setActiveTab('note'), children: [_jsx("div", { className: "flex size-8 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900/30", children: _jsx(FileText, { className: "size-4 text-blue-500 dark:text-blue-400" }) }), _jsx("h4", { className: "font-medium", children: t('refund.note', 'Refund Note') })] })] }), activeTab === 'details' && (_jsxs("div", { className: "grid gap-6", children: [_jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { children: [_jsx("p", { className: "text-muted-foreground text-sm", children: t('refund.method') }), _jsx("p", { className: "font-medium", children: currentPayment?.method })] }), _jsxs("div", { children: [_jsx("p", { className: "text-muted-foreground text-sm", children: t('refund.id') }), _jsx("p", { className: "font-medium", children: currentPayment?.transactionId })] })] }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { children: [_jsx("p", { className: "text-muted-foreground text-sm", children: t('refund.amount') }), _jsx("p", { className: "font-medium", children: priceFormatter(currentPayment?.amount ?? 0, modifiedOrder?.currencyCode) })] }), _jsxs("div", { children: [_jsx("p", { className: "text-muted-foreground text-sm", children: t('refund.refund') }), _jsx("p", { className: "font-medium", children: priceFormatter(priceDifference * -1, modifiedOrder?.currencyCode) })] })] })] })), activeTab === 'note' && (_jsx("div", { className: "space-y-2", children: _jsx(Textarea, { id: "note", placeholder: t('notePlaceholder', 'Enter optional info of the reason'), value: refundReason, onChange: (e) => setRefundReason(e.target.value), className: "min-h-[60px] resize-y" }) }))] }));
+};

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

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Checkbox, CustomCard, Input, Label, priceFormatter, Textarea, useOrder } from '@deenruv/react-ui-devkit';
+import { useTranslation } from 'react-i18next';
+export const RefundPaymentCard = ({ refundReason, setRefundReason, cancelShipping, setCancelShipping, refundAmount, setRefundAmount, }) => {
+    const { t } = useTranslation('orders');
+    const { modifiedOrder } = useOrder();
+    const currentPayment = modifiedOrder?.payments?.[0];
+    return (_jsxs("div", { className: "mt-8 grid grid-cols-2 gap-4", children: [_jsx(CustomCard, { title: t('refund.details', 'Refund Details'), notCollapsible: true, children: _jsxs("div", { className: "grid gap-6", children: [_jsx("div", { className: "grid grid-cols-2 gap-4", children: _jsxs("div", { className: "flex gap-2", children: [_jsx(Checkbox, { checked: cancelShipping, onCheckedChange: (e) => setCancelShipping(!!e) }), _jsx(Label, { children: t('cancelAndRefund.refundShipping') })] }) }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { children: [_jsx("p", { className: "text-muted-foreground text-sm", children: t('refund.method') }), _jsx("p", { className: "font-medium", children: currentPayment?.method })] }), _jsxs("div", { children: [_jsx("p", { className: "text-muted-foreground text-sm", children: t('refund.id') }), _jsx("p", { className: "font-medium", children: currentPayment?.transactionId })] })] }), _jsx("div", { className: "grid grid-cols-2 gap-4", children: _jsxs("div", { children: [_jsx("p", { className: "text-muted-foreground text-sm", children: t('refund.amount') }), _jsx("p", { className: "font-medium", children: priceFormatter(currentPayment?.amount ?? 0, modifiedOrder?.currencyCode) })] }) }), _jsx("div", { className: "grid grid-cols-2 gap-4", children: _jsxs("div", { children: [_jsx("p", { className: "text-muted-foreground text-sm", children: t('refund.refund') }), _jsx(Input
+                                    // type="currency"
+                                    , { 
+                                        // type="currency"
+                                        startAdornment: modifiedOrder?.currencyCode, adornmentPlain: true, value: refundAmount, onChange: (e) => setRefundAmount(+e.target.value) })] }) })] }) }), _jsx(CustomCard, { title: t('refund.note', 'Refund Note'), notCollapsible: true, children: _jsx(Textarea, { id: "note", placeholder: t('notePlaceholder', 'Enter optional info of the reason'), value: refundReason, onChange: (e) => setRefundReason(e.target.value), className: "min-h-[60px] resize-y", rows: 8 }) })] }));
+};