@deenruv/admin-dashboard 1.0.0

package/dist/pages/orders/List.js

@@ -0,0 +1,132 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Permission, SortOrder, typedGql, scalars } from '@deenruv/admin-types';
+import { Routes, apiClient, DetailList, deepMerge, OrderStateBadge, priceFormatter, TableLabel, useQuery, ListLocations, useTranslation, MultipleSelector, useServer, } from '@deenruv/react-ui-devkit';
+import { useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { toast } from 'sonner';
+const tableId = 'orders-list-view';
+const { selector } = ListLocations[tableId];
+const createDraftOrder = async () => {
+    const response = await apiClient('mutation')({
+        createDraftOrder: { id: true },
+    });
+    return response.createDraftOrder.id;
+};
+const fetch = async ({ page, perPage, filter, filterOperator, sort }, additionalSelector) => {
+    const response = await apiClient('query')({
+        ['orders']: [
+            {
+                options: {
+                    take: perPage,
+                    skip: (page - 1) * perPage,
+                    filterOperator: filterOperator,
+                    sort: sort ? { [sort.key]: sort.sortDir } : { createdAt: SortOrder.DESC },
+                    ...(filter && { filter }),
+                },
+            },
+            { items: deepMerge(selector, additionalSelector ?? {}), totalItems: true },
+        ],
+    });
+    return response['orders'];
+};
+const PaymentMethodsQuery = typedGql('query', { scalars })({
+    paymentMethods: [{}, { items: { code: true, name: true } }],
+});
+export const OrdersListPage = () => {
+    const { data } = useQuery(PaymentMethodsQuery);
+    const { t } = useTranslation('table');
+    const { t: tCommon } = useTranslation('common');
+    const navigate = useNavigate();
+    const orderStates = useServer((state) => state.serverConfig?.orderProcess.map((p) => p.name) ?? []);
+    const getMethodName = useCallback((code) => code
+        ? (data?.paymentMethods.items.find((i) => i.code === code)?.name ??
+            code?.replace(/-/g, ' ').replace(/\b\w/g, (char) => char.toUpperCase()))
+        : '-', [data]);
+    return (_jsx(DetailList, { filterFields: [
+            { key: 'orderPlacedAt', operator: 'DateOperators' },
+            { key: 'code', operator: 'StringOperators' },
+            { key: 'customerLastName', operator: 'StringOperators' },
+            { key: 'total', operator: 'NumberOperators' },
+            { key: 'totalWithTax', operator: 'NumberOperators' },
+            {
+                key: 'state',
+                component: (props) => {
+                    const value = props?.value?.in
+                        ? props.value.in.map((state) => ({
+                            label: tCommon(`search.inOperator.${state}`),
+                            value: state,
+                        }))
+                        : [];
+                    return (_jsx(MultipleSelector, { value: value, options: orderStates.map((state) => ({
+                            label: tCommon(`search.inOperator.${state}`),
+                            value: state,
+                        })), onChange: (options) => {
+                            if (options.length === 0) {
+                                props.onChange({});
+                                return;
+                            }
+                            props.onChange({ in: options.map((o) => o.value) });
+                        } }));
+                },
+            },
+        ], detailLinkColumn: "id", searchFields: ['code', 'customerLastName'], entityName: "Order", route: {
+            create: () => {
+                createDraftOrder()
+                    .then((id) => {
+                    if (!id)
+                        toast.error('Failed to create draft order');
+                    navigate(Routes.orders.to(id), { viewTransition: true });
+                })
+                    .catch(() => toast.error('Failed to create draft order'));
+            },
+            edit: (id) => navigate(Routes.orders.to(id), { viewTransition: true }),
+        }, tableId: tableId, fetch: fetch, createPermissions: [Permission.CreateOrder], deletePermissions: [Permission.DeleteOrder], hideColumns: ['active', 'totalQuantity', 'currencyCode'], additionalColumns: [
+            {
+                accessorKey: 'payments',
+                header: () => _jsx(TableLabel, { children: t('columns.payments') }),
+                accessorFn: (order) => {
+                    const sorted = order.payments
+                        ?.sort((a, b) => {
+                        return a.createdAt > b.createdAt ? -1 : 1;
+                    })
+                        .filter((payment) => payment.state === 'Settled');
+                    return getMethodName(sorted?.at(0)?.method);
+                },
+            },
+            {
+                accessorKey: 'shippingAddress',
+                header: () => _jsx(TableLabel, { children: t('columns.shippingAddress') }),
+                accessorFn: (order) => {
+                    if (!order.shippingAddress)
+                        return '';
+                    return order.shippingAddress.fullName;
+                },
+            },
+            {
+                accessorKey: 'customer',
+                header: () => _jsx(TableLabel, { children: t('columns.customer') }),
+                accessorFn: (order) => order.customer?.emailAddress,
+            },
+            {
+                accessorKey: 'state',
+                header: () => _jsx(TableLabel, { children: t('columns.state') }),
+                accessorFn: (order) => order?.state,
+                cell: ({ row }) => _jsx(OrderStateBadge, { state: row.original.state }),
+            },
+            {
+                accessorKey: 'totalWithTax',
+                header: () => _jsx(TableLabel, { children: t('columns.total') }),
+                accessorFn: (order) => priceFormatter(order.totalWithTax, order.currencyCode),
+            },
+            {
+                accessorKey: 'shipping',
+                header: () => _jsx(TableLabel, { children: t('columns.shipping') }),
+                accessorFn: (order) => priceFormatter(order.shipping, order.currencyCode),
+            },
+            {
+                accessorKey: 'code',
+                header: () => _jsx(TableLabel, { children: t('columns.code') }),
+                accessorFn: (order) => order.code,
+            },
+        ] }));
+};

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

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, Input, Label, ORDER_STATE, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, useServer, useTranslation, priceFormatter, } from '@deenruv/react-ui-devkit';
+import { PAYMENT_STATE } from "../../../graphql/base";
+import { useMemo, useState } from 'react';
+import { toast } from 'sonner';
+import { CheckCircle, CreditCard, DollarSign, FileText } from 'lucide-react';
+const validateForm = (input) => {
+    const errors = [];
+    if (!input.method) {
+        errors.push({ key: 'method', message: 'Payment method is required' });
+    }
+    if (!input.transactionId) {
+        errors.push({ key: 'transactionId', message: 'Transaction ID is required' });
+    }
+    return errors;
+};
+export const AddPaymentDialog = ({ order, onSubmit }) => {
+    const [form, setForm] = useState({
+        method: '',
+        transactionId: '',
+    });
+    const { t } = useTranslation('orders');
+    const paymentMethodsType = useServer((p) => p.paymentMethodsType);
+    const paidAmount = useMemo(() => order.payments?.filter((el) => el.state === PAYMENT_STATE.SETTLED).reduce((acc, val) => (acc += val.amount), 0) ||
+        0, [order.payments]);
+    const needsPayment = useMemo(() => order.totalWithTax > paidAmount, [order.totalWithTax, paidAmount]);
+    const isFormValid = useMemo(() => validateForm(form), [form]);
+    const paymentAmount = useMemo(() => order.totalWithTax - paidAmount || 0, [order.totalWithTax, paidAmount, order?.currencyCode]);
+    const [open, setOpen] = useState(false);
+    const disabled = useMemo(() => ![
+        ORDER_STATE.ARRANGING_PAYMENT,
+        ORDER_STATE.ARRANGING_ADDITIONAL_PAYMENT,
+        ORDER_STATE.DRAFT,
+        ORDER_STATE.MODIFYING,
+    ].includes(order.state) || !needsPayment, [needsPayment, order.state]);
+    return (_jsxs(Dialog, { open: open, onOpenChange: setOpen, children: [_jsx(DialogTrigger, { asChild: true, children: _jsxs(Button, { variant: !disabled ? 'action' : 'ghost', size: "sm", disabled: disabled, className: "gap-2", onClick: setOpen.bind(null, true), children: [_jsx(DollarSign, { className: "size-4" }), paymentAmount > 0
+                            ? t('create.buttonAddPayment', {
+                                value: priceFormatter(paymentAmount, order.currencyCode),
+                            })
+                            : t('create.notEnoughPayment')] }) }), _jsxs(DialogContent, { className: "max-w-md", children: [_jsxs(DialogHeader, { children: [_jsxs("div", { className: "mb-2 flex items-center gap-2", children: [_jsx(CreditCard, { className: "size-5 text-teal-500 dark:text-teal-400" }), _jsx(DialogTitle, { children: t('create.addPaymentTitle') })] }), _jsx(DialogDescription, { children: t('create.addPaymentDescription') })] }), _jsxs("form", { className: "mt-4 flex w-full flex-col gap-4", onSubmit: (e) => {
+                            e.preventDefault();
+                            if (isFormValid.length > 0) {
+                                isFormValid.forEach((err) => toast.error(err.message));
+                                return;
+                            }
+                            onSubmit({ ...form, orderId: order.id, metadata: {} });
+                            setForm({ method: '', transactionId: '' });
+                            setOpen(false);
+                        }, children: [_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { htmlFor: "payment-method", children: t('table.paymentMethod') }), _jsxs(Select, { value: form.method, onValueChange: (v) => setForm({ ...form, method: v }), children: [_jsx(SelectTrigger, { id: "payment-method", className: "w-full", children: _jsx(SelectValue, { placeholder: t('selectPaymentMethod') }) }), _jsx(SelectContent, { children: paymentMethodsType.map((method) => (_jsx(SelectItem, { value: method.code, children: method.name }, method.id))) })] })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { htmlFor: "transaction-id", children: t('filterField.transactionId') }), _jsx(Input, { id: "transaction-id", value: form.transactionId || '', onChange: (e) => setForm({ ...form, transactionId: e.currentTarget.value }), placeholder: t('enterTransactionId') })] }), _jsxs("div", { className: "bg-muted/50 mt-2 rounded-md p-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(FileText, { className: "size-4 text-teal-500 dark:text-teal-400" }), _jsx("span", { className: "text-sm font-medium", children: t('payments.summary') })] }), _jsxs("div", { className: "mt-2 space-y-1", children: [_jsxs("div", { className: "flex justify-between text-sm", children: [_jsxs("span", { className: "text-muted-foreground", children: [t('payments.total'), ":"] }), _jsx("span", { className: "font-medium", children: priceFormatter(order.totalWithTax, order.currencyCode) })] }), _jsxs("div", { className: "flex justify-between text-sm", children: [_jsxs("span", { className: "text-muted-foreground", children: [t('payments.alreadyPaid'), ":"] }), _jsx("span", { className: "font-medium", children: priceFormatter(paidAmount, order.currencyCode) })] }), _jsxs("div", { className: "flex justify-between border-t pt-1 text-sm font-medium", children: [_jsxs("span", { children: [t('payments.toPay'), ":"] }), _jsx("span", { className: "text-teal-600 dark:text-teal-400", children: priceFormatter(paymentAmount, order.currencyCode) })] })] })] }), _jsxs(DialogFooter, { className: "mt-4 gap-2", children: [_jsx(DialogClose, { asChild: true, children: _jsx(Button, { variant: "outline", children: t('payments.cancel') }) }), _jsxs(Button, { type: "submit", disabled: isFormValid.length > 0, className: "gap-2", children: [_jsx(CheckCircle, { className: "size-4" }), t('payments.add')] })] })] })] })] }));
+};

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

@@ -0,0 +1,260 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Card, Button, Tabs, TabsList, TabsTrigger, TabsContent, CardDescription, ScrollArea, Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger, apiClient, useOrder, cn, CustomCard, useGFFLP, useTranslation, useMutation, } from '@deenruv/react-ui-devkit';
+import { addressBaseSelector } from "../../../graphql/draft_order";
+import { Edit, MapPin, Building, Check, Loader2, User, Phone, Globe } from 'lucide-react';
+import { useEffect, useMemo, useState } from 'react';
+import { toast } from 'sonner';
+import { AddressForm } from "../../customers/_components/AddressForm.js";
+import { CreateCustomerAddressMutation } from "../../customers/_components/AddressDialog.js";
+export const AddressCard = ({ type }) => {
+    const [tab, setTab] = useState('select');
+    const { mode, order, modifiedOrder, setModifiedOrder, setBillingAddress, setShippingAddress, setOrder } = useOrder();
+    const currentOrder = useMemo(() => (mode === 'update' ? (modifiedOrder ? modifiedOrder : order) : order), [mode, order, modifiedOrder]);
+    const { t } = useTranslation('orders');
+    const [createForCustomer, setCreateForCustomer] = useState(false);
+    const [submitting, setSubmitting] = useState(false);
+    const [open, setOpen] = useState(false);
+    const [createAddress] = useMutation(CreateCustomerAddressMutation);
+    const currentAddress = useMemo(() => {
+        return type === 'shipping' &&
+            currentOrder?.shippingAddress &&
+            currentOrder.shippingAddress.streetLine1 &&
+            currentOrder.shippingAddress.countryCode
+            ? currentOrder.shippingAddress
+            : type === 'billing' &&
+                currentOrder?.billingAddress &&
+                currentOrder.billingAddress.countryCode &&
+                currentOrder.billingAddress.streetLine1
+                ? currentOrder.billingAddress
+                : undefined;
+    }, [currentOrder, type]);
+    const [selectedAddress, setSelectedAddress] = useState(undefined);
+    const isShipping = type === 'shipping';
+    const { state, setState } = useGFFLP('CreateAddressInput', 'city', 'company', 'countryCode', 'postalCode', 'fullName', 'phoneNumber', 'postalCode', 'streetLine1', 'streetLine2', 'province', 'customFields')({
+        fullName: {
+            initialValue: '',
+            validate: (v) => {
+                if (!v || v === '')
+                    return [t('selectAddress.nameRequired')];
+            },
+        },
+        company: { initialValue: '' },
+        streetLine1: {
+            initialValue: '',
+            validate: (v) => {
+                if (!v || v === '')
+                    return [t('selectAddress.streetRequired')];
+            },
+        },
+        streetLine2: { initialValue: '' },
+        postalCode: {
+            initialValue: '',
+            validate: (v) => {
+                if (!v || v === '')
+                    return [t('selectAddress.postalCodeRequired')];
+            },
+        },
+        countryCode: {
+            initialValue: '',
+            validate: (v) => {
+                if (!v || v === '')
+                    return [t('selectAddress.countryRequired')];
+            },
+        },
+        phoneNumber: {
+            initialValue: '',
+            validate: (v) => {
+                if (!v || v === '')
+                    return [t('selectAddress.phoneNumberRequired')];
+            },
+        },
+        city: {
+            initialValue: '',
+            validate: (v) => {
+                if (!v || v === '')
+                    return [t('selectAddress.cityRequired')];
+            },
+        },
+        province: { initialValue: '' },
+        customFields: { initialValue: {} },
+    });
+    useEffect(() => {
+        if (selectedAddress) {
+            setState({
+                ...selectedAddress,
+                countryCode: selectedAddress.country?.code || '',
+                streetLine1: selectedAddress.streetLine1 || '',
+            });
+        }
+    }, [selectedAddress]);
+    const submitAddress = async () => {
+        if (!order?.customer?.id)
+            return;
+        if (!!order?.customer?.addresses?.length && tab === 'select' && !selectedAddress)
+            return;
+        const input = {
+            fullName: state.fullName?.validatedValue,
+            company: state.company?.validatedValue,
+            streetLine1: state.streetLine1?.validatedValue || '',
+            streetLine2: state.streetLine2?.validatedValue,
+            countryCode: state.countryCode?.validatedValue || '',
+            city: state.city?.validatedValue,
+            phoneNumber: state.phoneNumber?.validatedValue,
+            postalCode: state.postalCode?.validatedValue,
+            province: state.province?.validatedValue,
+            ...('customFields' in state ? { customFields: state.customFields.value } : {}),
+        };
+        if (!order?.customer?.addresses?.length) {
+            await createAddress({ customerId: order.customer.id, input }).then((resp) => {
+                const addressTypeKey = type === 'shipping' ? 'shippingAddress' : 'billingAddress';
+                if (resp.createCustomerAddress.id) {
+                    setOpen(false);
+                    toast.success(t('selectAddress.newAddress', { address: resp.createCustomerAddress.streetLine1 }));
+                    setSelectedAddress(resp.createCustomerAddress);
+                    setTab('select');
+                    setCreateForCustomer(false);
+                    const { id, ...address } = resp.createCustomerAddress;
+                    if (currentOrder) {
+                        const setAddress = type === 'shipping' ? setShippingAddress : setBillingAddress;
+                        setAddress({
+                            ...address,
+                            countryCode: state.countryCode?.validatedValue || 'PL',
+                        });
+                        setOrder({
+                            ...currentOrder,
+                            [addressTypeKey]: resp.createCustomerAddress,
+                        });
+                    }
+                }
+                else
+                    toast.error(t('selectAddress.addressFailedCreateToast'));
+            });
+            return;
+        }
+        if (mode === 'update' && modifiedOrder) {
+            const addressTypeKey = type === 'shipping' ? 'shippingAddress' : 'billingAddress';
+            setModifiedOrder({
+                ...modifiedOrder,
+                [addressTypeKey]: input,
+            });
+            toast.success(t('selectAddress.addressUpdated'));
+            setOpen(false);
+            return;
+        }
+        setSubmitting(true);
+        try {
+            const newAddress = tab === 'select' && selectedAddress
+                ? {
+                    fullName: selectedAddress.fullName,
+                    company: selectedAddress.company,
+                    streetLine1: selectedAddress.streetLine1,
+                    streetLine2: selectedAddress.streetLine2,
+                    countryCode: selectedAddress.country?.code || '',
+                    city: selectedAddress.city,
+                    phoneNumber: selectedAddress.phoneNumber,
+                    postalCode: selectedAddress.postalCode,
+                    province: selectedAddress.province,
+                    ...('customFields' in selectedAddress ? { customFields: selectedAddress.customFields } : {}),
+                }
+                : input;
+            const setAddress = type === 'shipping' ? setShippingAddress : setBillingAddress;
+            setAddress(newAddress)
+                .then(() => {
+                toast.success(t('selectAddress.addressSuccessSelectToast'));
+                setOpen(false);
+            })
+                .catch(() => toast.error(t(tab === 'create' ? 'selectAddress.addressFailedCreateToast' : 'selectAddress.addressFailedSelectToast')));
+            if (tab === 'create' && createForCustomer && order.customer?.id) {
+                const { createCustomerAddress } = await apiClient('mutation')({
+                    createCustomerAddress: [{ customerId: order.customer.id, input: newAddress }, addressBaseSelector],
+                });
+                if (createCustomerAddress.streetLine1) {
+                    toast.success(t('selectAddress.newAddress', { address: createCustomerAddress.streetLine1 }));
+                    setSelectedAddress(createCustomerAddress);
+                    setTab('select');
+                    setCreateForCustomer(false);
+                }
+                else {
+                    toast.error(t('selectAddress.addressAddFailed'));
+                }
+            }
+        }
+        catch {
+            toast.error(t('selectAddress.addressError'));
+        }
+        finally {
+            setSubmitting(false);
+        }
+    };
+    useEffect(() => {
+        if (!currentAddress || Object.values(currentAddress).every((x) => x === null || x === '')) {
+            const defaultAddress = order?.customer?.addresses?.find((i) => type === 'billing' ? !!i.defaultBillingAddress : !!i.defaultShippingAddress);
+            if (defaultAddress) {
+                setTab('select');
+                setSelectedAddress(defaultAddress);
+                return;
+            }
+        }
+        const sameAddressInSaved = currentAddress &&
+            order?.customer?.addresses?.find((i) => i.streetLine1 === currentAddress.streetLine1 &&
+                i.city === currentAddress.city &&
+                i.company === currentAddress.company &&
+                i.fullName === currentAddress.fullName &&
+                i.postalCode === currentAddress.postalCode &&
+                i.province === currentAddress.province &&
+                i.streetLine2 === currentAddress.streetLine2 &&
+                i.phoneNumber === currentAddress.phoneNumber &&
+                i.country.code === currentAddress.countryCode &&
+                i.country.name === currentAddress.country);
+        if (sameAddressInSaved) {
+            setTab('select');
+            setSelectedAddress(sameAddressInSaved);
+            setState({ countryCode: sameAddressInSaved.country?.code || '', ...sameAddressInSaved });
+        }
+        else {
+            setSelectedAddress(undefined);
+            if (currentAddress) {
+                setState({
+                    ...currentAddress,
+                    countryCode: currentAddress.countryCode || '',
+                    streetLine1: currentAddress.streetLine1 || '',
+                });
+            }
+        }
+        return () => {
+            setTab('select');
+            setSelectedAddress(undefined);
+        };
+    }, [currentAddress, order, type]);
+    const color = isShipping ? 'purple' : 'cyan';
+    const iconColor = isShipping ? 'text-purple-500 dark:text-purple-400' : 'text-cyan-500 dark:text-cyan-400';
+    return (_jsx(CustomCard, { notCollapsible: true, title: t(isShipping ? 'selectAddress.shippingHeader' : 'selectAddress.billingHeader'), description: t(isShipping ? 'selectAddress.shippingDescription' : 'selectAddress.billingDescription'), icon: isShipping ? _jsx(MapPin, {}) : _jsx(Building, {}), color: currentAddress ? color : 'gray', upperRight: mode !== 'view' && (_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: iconColor }) }) }), _jsxs(DialogContent, { className: "flex h-[80vh] max-h-[80vh] min-h-[80vh] flex-col", children: [_jsxs(DialogHeader, { children: [_jsxs(DialogTitle, { className: "flex items-center gap-2 text-xl", children: [isShipping ? (_jsx(MapPin, { className: `size-5 ${iconColor}` })) : (_jsx(Building, { className: `size-5 ${iconColor}` })), t('selectAddress.selectAddress')] }), _jsx(DialogDescription, { className: "text-muted-foreground mt-2", children: isShipping
+                                        ? order?.customer?.addresses?.length
+                                            ? t('selectAddress.selectShippingAddress')
+                                            : t('selectAddress.createShippingAddress')
+                                        : order?.customer?.addresses?.length
+                                            ? t('selectAddress.selectBillingAddress')
+                                            : t('selectAddress.createBillingAddress') })] }), _jsxs(Tabs, { value: tab, defaultValue: 'select', onValueChange: (e) => setTab(e), className: "flex flex-1 basis-1 flex-col overflow-hidden", children: [order?.customer?.addresses?.length ? (_jsxs(TabsList, { className: "my-4 grid w-full grid-cols-2", children: [_jsx(TabsTrigger, { className: "w-full", value: "select", children: t('selectAddress.selectAddress') }), _jsx(TabsTrigger, { className: "w-full", value: "create", children: t('selectAddress.editAddress') })] })) : null, order?.customer?.addresses?.length ? (_jsxs(_Fragment, { children: [_jsx(TabsContent, { value: "select", className: cn('flex flex-1 flex-col overflow-hidden focus-visible:ring-transparent', tab !== 'select' && 'hidden'), children: _jsx(ScrollArea, { className: "pr-4", children: _jsx("div", { className: "flex flex-col gap-3 px-1", children: order?.customer?.addresses?.map((address, index) => (_jsxs(Card, { className: cn('flex cursor-pointer items-start justify-between gap-4 p-4 transition-all', 'hover:border-primary/70 hover:shadow-sm', selectedAddress?.id === address.id
+                                                            ? 'border-primary bg-primary/5 shadow-sm'
+                                                            : 'border-border'), onClick: () => setSelectedAddress(address), children: [_jsxs("div", { className: "flex-1", children: [_jsxs("div", { className: "mb-1 flex items-center gap-2", children: [_jsx(User, { className: `size-4 ${iconColor}` }), _jsx("p", { className: "font-medium", children: address.fullName }), selectedAddress?.id === address.id && (_jsx("div", { className: "ml-auto", children: _jsx(Check, { className: "size-4 text-green-500" }) }))] }), _jsx(CardDescription, { className: "text-sm", children: `${address.streetLine1} ${address.streetLine2 ? ', ' + address.streetLine2 : ''}` }), _jsx(CardDescription, { className: "text-sm", children: `${address.postalCode} ${address.city} ${address.country?.name || address.country?.code}` }), _jsx(CardDescription, { className: "text-sm", children: `${t('selectAddress.phoneNumberShort', { value: address.phoneNumber })} ${address.company ? '• ' + address.company : ''} ` }), _jsxs("div", { className: "mt-2 flex gap-2", children: [address.defaultBillingAddress && (_jsx("span", { className: "rounded-full bg-cyan-100 px-2 py-0.5 text-xs text-cyan-800 dark:bg-cyan-900/50 dark:text-cyan-300", children: t('selectAddress.isDefaultBilling') })), address.defaultShippingAddress && (_jsx("span", { className: "rounded-full bg-purple-100 px-2 py-0.5 text-xs text-purple-800 dark:bg-purple-900/50 dark:text-purple-300", children: t('selectAddress.isDefaultShipping') }))] })] }), _jsx(Button, { variant: "ghost", size: "icon", className: "size-8", onClick: (e) => {
+                                                                    e.stopPropagation();
+                                                                    setState({ countryCode: address.country?.code || '', ...address });
+                                                                    setTab('create');
+                                                                }, children: _jsx(Edit, { size: 16, className: iconColor }) })] }, `${address.id}-${index}`))) }) }) }), _jsx(TabsContent, { value: "create", className: cn('flex flex-1 flex-col overflow-hidden focus-visible:ring-transparent', tab !== 'create' && 'hidden'), children: _jsx(ScrollArea, { className: "pr-4", children: _jsx(AddressForm, { initialValues: {
+                                                        country: { code: state.countryCode.validatedValue },
+                                                        streetLine1: state.streetLine1.validatedValue,
+                                                        streetLine2: state.streetLine2.validatedValue,
+                                                        city: state.city.validatedValue,
+                                                        company: state.company.validatedValue,
+                                                        fullName: state.fullName.validatedValue,
+                                                        phoneNumber: state.phoneNumber.validatedValue,
+                                                        postalCode: state.postalCode.validatedValue,
+                                                        province: state.province?.validatedValue,
+                                                        ...(state.customFields?.validatedValue
+                                                            ? { customFields: state.customFields?.validatedValue }
+                                                            : {}),
+                                                    }, onInputChange: setState }) }) })] })) : (_jsx(AddressForm, { onInputChange: setState }))] }), _jsxs("div", { className: "mt-4 flex justify-end gap-2", children: [_jsx(Button, { variant: "outline", onClick: () => setOpen(false), disabled: submitting, children: t('common.cancel', 'Cancel') }), _jsx(Button, { className: "gap-2", disabled: submitting || (!!order?.customer?.addresses?.length && tab === 'select' && !selectedAddress), onClick: submitAddress, children: submitting ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { className: "size-4 animate-spin" }), t('common.submitting')] })) : (_jsxs(_Fragment, { children: [_jsx(Check, { className: "size-4" }), !order?.customer?.addresses?.length
+                                                ? 'Create'
+                                                : t(tab === 'select' ? 'selectAddress.selectAddress' : 'selectAddress.editAddress')] })) })] })] })] })), children: _jsx("div", { className: "border-border bg-muted/50 rounded-lg border p-3", children: _jsx("div", { className: "flex items-start gap-3", children: !currentAddress ? (_jsxs(_Fragment, { children: [_jsx("div", { className: `mt-0.5 flex size-8 items-center justify-center rounded-full ${isShipping ? 'bg-purple-100 dark:bg-purple-900/30' : 'bg-cyan-100 dark:bg-cyan-900/30'}`, children: isShipping ? (_jsx(MapPin, { className: `size-4 ${iconColor}` })) : (_jsx(Building, { className: `size-4 ${iconColor}` })) }), _jsxs("div", { className: "flex-1", children: [_jsx("p", { className: "text-muted-foreground text-sm italic", children: t(isShipping ? 'selectAddress.noShippingAddress' : 'selectAddress.noBillingAddress') }), mode !== 'view' && (_jsxs(Button, { variant: "outline", size: "sm", className: "mt-2 gap-2", onClick: () => setOpen(true), children: [_jsx(Edit, { className: "size-3.5" }), t('selectAddress.addAddress', 'Add Address')] }))] })] })) : (_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: [_jsx(User, { className: `max-h-4 min-h-4 min-w-4 max-w-4 ${iconColor}` }), _jsx("p", { className: "text-sm font-medium", children: currentAddress?.fullName })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(MapPin, { className: `max-h-4 min-h-4 min-w-4 max-w-4 ${iconColor}` }), _jsxs("p", { className: "text-sm", children: [currentAddress.streetLine1, " ", currentAddress?.streetLine2] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Globe, { className: `max-h-4 min-h-4 min-w-4 max-w-4 ${iconColor}` }), _jsxs("p", { className: "text-sm", children: [currentAddress.city, " ", currentAddress.postalCode, " ", currentAddress.province, ' ', currentAddress.country] })] }), _jsx("div", { className: "border-border mt-1 flex items-center justify-between border-t pt-1", children: _jsxs("div", { className: "flex items-center gap-2", children: [currentAddress.company && (_jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Building, { className: "text-muted-foreground size-4" }), _jsx("span", { className: "text-muted-foreground text-sm", children: currentAddress.company })] })), currentAddress.phoneNumber && (_jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Phone, { className: "text-muted-foreground size-4" }), _jsx("span", { className: "text-muted-foreground text-sm", children: t('selectAddress.phoneNumberShort', { value: currentAddress.phoneNumber }) })] }))] }) })] }) }) })) }) }) }));
+};

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

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Button, Dialog, DialogClose, DialogContent, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, DropdownMenuItem, useOrder, } from '@deenruv/react-ui-devkit';
+import { Undo2 } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { ProductsTable } from "./";
+import { RefundPaymentCard } from "./RefundPaymentCard.js";
+export const CancelAndRefundDialog = ({ refundReason, setRefundReason, onConfirm, }) => {
+    const { t } = useTranslation('orders');
+    const { order } = useOrder();
+    const [open, setOpen] = useState(false);
+    const [refundAmount, setRefundAmount] = useState(0);
+    const [refundLines, setRefundLines] = useState([]);
+    const [cancelShipping, setCancelShipping] = useState(false);
+    useEffect(() => {
+        if (!order)
+            return;
+        const wholeLines = order?.lines.filter((l) => refundLines.some((rL) => l.id === rL.orderLineId)) ?? [];
+        let _refundAmount = refundLines
+            .map((rL, i) => wholeLines[i].discountedUnitPriceWithTax * rL.quantity)
+            .reduce((prev, acc) => prev + acc, 0);
+        if (cancelShipping && order?.shipping) {
+            _refundAmount = +order?.shipping;
+        }
+        console.log('RA', _refundAmount);
+        setRefundAmount(_refundAmount);
+    }, [cancelShipping, refundLines, order]);
+    return (_jsxs(Dialog, { open: open, onOpenChange: setOpen, children: [_jsx(DialogTrigger, { asChild: true, children: _jsx(DropdownMenuItem, { asChild: true, onSelect: (e) => e.preventDefault(), children: _jsx(Button, { variant: "ghost", className: "w-full justify-start px-4 py-2 text-red-400 hover:text-red-400 dark:text-red-400 dark:hover:text-red-400", children: t('cancelAndRefund.trigger') }) }) }), _jsxs(DialogContent, { className: "flex h-[80vh] max-w-[80vw] flex-col gap-0 overflow-hidden", children: [_jsx(DialogHeader, { children: _jsxs("div", { className: "mb-2 flex items-center gap-2", children: [_jsx(Undo2, { className: "h-5 w-5 text-rose-500 dark:text-rose-400" }), _jsx(DialogTitle, { children: t('cancelAndRefund.title') })] }) }), _jsx(ProductsTable, { refundLines, setRefundLines }), _jsx(RefundPaymentCard, { refundReason, setRefundReason, cancelShipping, setCancelShipping, refundAmount, setRefundAmount }), _jsxs(DialogFooter, { className: "mt-auto gap-2", children: [_jsx(DialogClose, { asChild: true, children: _jsx(Button, { variant: "outline", children: t('payments.cancel') }) }), _jsxs(Button, { type: "submit", className: "gap-2", onClick: () => onConfirm(refundAmount, refundLines, refundReason, 0, cancelShipping, 0), children: [_jsx(Undo2, { className: "h-4 w-4" }), t('cancelAndRefund.refund')] })] })] })] }));
+};

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

@@ -0,0 +1,68 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card, CardContent, CardHeader, CardTitle, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Badge, ScrollArea, useOrder, formatPrice, useTranslation, } from '@deenruv/react-ui-devkit';
+import { useCallback } from 'react';
+import { ArrowRight, Plus, DollarSign, Package, Tag, FileText, Loader, Euro, Building, Pin, Component, } from 'lucide-react';
+import { ChangesRegisterTable } from "./ChangesRegisterTable.js";
+export const ChangesRegister = ({ changes }) => {
+    const { t } = useTranslation('orders');
+    const { order } = useOrder();
+    console.log('CH', changes);
+    const getFieldName = (path) => {
+        const fieldKey = path.split('.').pop() || '';
+        return t(`changes.keys.${fieldKey}`, fieldKey);
+    };
+    const PriceJSX = useCallback((value) => {
+        let icon;
+        switch (order?.currencyCode) {
+            case 'USD':
+                icon = _jsx(DollarSign, { className: "size-3.5" });
+                break;
+            case 'EUR':
+                icon = _jsx(Euro, { className: "size-3.5" });
+                break;
+            default:
+                icon = order?.currencyCode;
+        }
+        return (_jsxs("span", { className: "flex items-center gap-1", children: [icon, formatPrice(value)] }));
+    }, [order]);
+    if (!changes) {
+        return (_jsx(Card, { className: "border-muted", children: _jsxs(CardContent, { className: "flex flex-col items-center justify-center py-16 text-center", children: [_jsx("div", { className: "mb-4", children: _jsx(Loader, { className: "size-10 animate-spin text-orange-500" }) }), _jsx("h3", { className: "mb-2 text-xl font-medium", children: t('changes.loading.title') }), _jsx("p", { className: "text-muted-foreground max-w-md", children: t('changes.loading.description') })] }) }));
+    }
+    if (Object.values(Object.fromEntries(Object.entries(changes).filter(([key]) => key !== 'rest'))).every((item) => !item.length)) {
+        return (_jsxs(Card, { className: "border-l-4 border-l-gray-300 dark:border-l-gray-600", children: [_jsx(CardHeader, { children: _jsxs(CardTitle, { className: "flex items-center gap-2", children: [_jsx(FileText, { className: "size-5 text-gray-500" }), t('changes.emptyState.noChanges', 'No Changes')] }) }), _jsx(CardContent, { children: _jsx("p", { className: "text-muted-foreground", children: t('changes.emptyState.noChangesDescription', 'No modifications have been made to this order.') }) })] }));
+    }
+    return changes ? (_jsxs("div", { className: "space-y-6", children: [changes.existingLines.length > 0 && (_jsxs(Card, { className: "border-l-4 border-l-amber-500 shadow-sm dark:border-l-amber-400", children: [_jsx(CardHeader, { children: _jsxs(CardTitle, { className: "flex items-center gap-2", children: [_jsx(ArrowRight, { className: "size-5 text-amber-500 dark:text-amber-400" }), t('changes.existingLines', 'Changes to Existing Items')] }) }), _jsx(CardContent, { className: "space-y-6", children: changes.existingLines.map((change) => (_jsxs("div", { className: "rounded-md border p-4", children: [_jsxs("div", { className: "mb-3 flex flex-wrap items-center gap-2", children: [_jsx("h4", { className: "font-medium", children: change.variantName }), _jsx(Badge, { variant: "outline", className: "font-mono text-xs", children: change.lineID })] }), _jsx(ScrollArea, { children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { className: "w-1/3", children: t('changes.property', 'Property') }), _jsx(TableHead, { className: "w-1/3", children: t('changes.previous', 'Previous') }), _jsx(TableHead, { className: "w-1/3", children: t('changes.current', 'Current') })] }) }), _jsx(TableBody, { children: change.changes.map((propertyChange, index) => (_jsxs(TableRow, { children: [_jsx(TableCell, { className: "font-medium", children: getFieldName(propertyChange.path) }), _jsx(TableCell, { className: "text-red-600 dark:text-red-400", children: propertyChange.path.toLowerCase().includes('price')
+                                                                ? PriceJSX(propertyChange.removed)
+                                                                : propertyChange.removed }), _jsx(TableCell, { className: "font-medium text-green-600 dark:text-green-400", children: propertyChange.path.toLowerCase().includes('price')
+                                                                ? PriceJSX(propertyChange.added)
+                                                                : propertyChange.added })] }, index))) })] }) })] }, change.lineID))) })] })), changes.newLines.length > 0 && (_jsxs(Card, { className: "border-l-4 border-l-green-500 shadow-sm dark:border-l-green-400", children: [_jsx(CardHeader, { children: _jsxs(CardTitle, { className: "flex items-center gap-2", children: [_jsx(Plus, { className: "size-5 text-green-500 dark:text-green-400" }), t('changes.newLines', 'Newly Added Items')] }) }), _jsx(CardContent, { children: _jsx(ScrollArea, { className: "max-h-[300px]", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: t('changes.product', 'Product') }), _jsx(TableHead, { children: t('changes.unitPrice', 'Unit Price') }), _jsx(TableHead, { children: t('changes.unitPriceWithTax', 'Unit Price (with Tax)') }), _jsx(TableHead, { children: t('changes.quantity', 'Quantity') }), _jsx(TableHead, { children: t('changes.total', 'Total') })] }) }), _jsx(TableBody, { children: changes.newLines
+                                            .flatMap((lineChange) => {
+                                            const brandNewLine = lineChange.changes.find((ch) => ch.changed === 'added' && ch.path === '');
+                                            const productChange = lineChange.changes.find((change) => typeof change.value === 'object' && change.value !== null && 'productVariant' in change.value);
+                                            if (!productChange || typeof productChange.value !== 'object') {
+                                                return null;
+                                            }
+                                            const item = productChange.value;
+                                            const variant = item.productVariant || {};
+                                            const quantityChange = lineChange.changes.find((change) => change.path.includes('quantity'));
+                                            const linePriceChange = lineChange.changes.find((change) => change.path.includes('linePrice') && !change.path.includes('WithTax'));
+                                            const linePriceWithTaxChange = lineChange.changes.find((change) => change.path.includes('linePriceWithTax'));
+                                            const quantity = quantityChange ? Number(quantityChange.added) : 1;
+                                            const linePrice = brandNewLine
+                                                ? Number(brandNewLine.value.discountedLinePrice)
+                                                : linePriceChange
+                                                    ? Number(linePriceChange.added)
+                                                    : 0;
+                                            const linePriceWithTax = brandNewLine
+                                                ? Number(brandNewLine.value.discountedLinePriceWithTax)
+                                                : linePriceWithTaxChange
+                                                    ? Number(linePriceWithTaxChange.added)
+                                                    : 0;
+                                            return (_jsxs(TableRow, { children: [_jsx(TableCell, { className: "font-medium", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Package, { className: "size-4 text-green-500 dark:text-green-400" }), variant.name || lineChange.variantName || t('changes.unknownProduct', 'Unknown Product')] }) }), _jsx(TableCell, { children: PriceJSX(linePrice) }), _jsx(TableCell, { children: PriceJSX(linePriceWithTax) }), _jsx(TableCell, { className: "font-medium", children: quantity }), _jsx(TableCell, { className: "font-medium text-green-600 dark:text-green-400", children: PriceJSX(quantity * linePriceWithTax) })] }, lineChange.lineID));
+                                        })
+                                            .filter(Boolean) })] }) }) })] })), changes.surcharges.length > 0 && (_jsxs(Card, { className: "border-l-4 border-l-blue-500 shadow-sm dark:border-l-blue-400", children: [_jsx(CardHeader, { children: _jsxs(CardTitle, { className: "flex items-center gap-2", children: [_jsx(Plus, { className: "size-5 text-blue-500 dark:text-blue-400" }), t('changes.surcharges', 'Added Surcharges')] }) }), _jsx(CardContent, { children: _jsx(ScrollArea, { className: "max-h-[300px]", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: t('changes.description', 'Description') }), _jsx(TableHead, { children: t('changes.sku', 'SKU') }), _jsx(TableHead, { children: t('changes.price', 'Price') }), _jsx(TableHead, { children: t('changes.priceWithTax', 'Price with Tax') })] }) }), _jsx(TableBody, { children: changes.surcharges.map((surcharge, index) => {
+                                            const item = (surcharge.value || {});
+                                            return (_jsxs(TableRow, { children: [_jsx(TableCell, { className: "font-medium", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(FileText, { className: "size-4 text-blue-500 dark:text-blue-400" }), String(item.description || '') || t('changes.unnamedSurcharge', 'Unnamed Surcharge')] }) }), _jsx(TableCell, { children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Tag, { className: "text-muted-foreground size-4" }), _jsx("code", { className: "bg-muted rounded px-1 py-0.5 font-mono text-xs", children: String(item.sku || '') || '—' })] }) }), _jsx(TableCell, { children: PriceJSX(Number(item.price)) }), _jsx(TableCell, { className: "font-medium text-blue-600 dark:text-blue-400", children: PriceJSX(Number(item.priceWithTax)) })] }, index));
+                                        }) })] }) }) })] })), changes.billingAddress.length > 0 && (_jsxs(Card, { className: "border-l-4 border-l-purple-500 shadow-sm dark:border-l-purple-400", children: [_jsx(CardHeader, { children: _jsxs(CardTitle, { className: "flex items-center gap-2", children: [_jsx(Building, { className: "size-5 text-purple-500 dark:text-purple-400" }), t('changes.billingAddress')] }) }), _jsx(CardContent, { children: _jsx(ChangesRegisterTable, { changes: changes.billingAddress }) })] })), changes.shippingAddress.length > 0 && (_jsxs(Card, { className: "border-l-4 border-l-indigo-500 shadow-sm dark:border-l-indigo-400", children: [_jsx(CardHeader, { children: _jsxs(CardTitle, { className: "flex items-center gap-2", children: [_jsx(Pin, { className: "size-5 text-indigo-500 dark:text-indigo-400" }), t('changes.shippingAddress')] }) }), _jsx(CardContent, { children: _jsx(ChangesRegisterTable, { changes: changes.shippingAddress }) })] })), changes.shippingMethod.length > 0 && (_jsxs(Card, { className: "border-l-4 border-l-orange-500 shadow-sm dark:border-l-orange-400", children: [_jsx(CardHeader, { children: _jsxs(CardTitle, { className: "flex items-center gap-2", children: [_jsx(Component, { className: "size-5 text-orange-500 dark:text-orange-400" }), t('changes.shippingMethod')] }) }), _jsx(CardContent, { children: _jsx(ChangesRegisterTable, { changes: changes.shippingMethod }) })] }))] })) : (_jsx(Card, { className: "border-muted", children: _jsxs(CardContent, { className: "flex flex-col items-center justify-center py-16 text-center", children: [_jsx("div", { className: "mb-4", children: _jsx(Loader, { className: "size-10 animate-spin text-orange-500" }) }), _jsx("h3", { className: "mb-2 text-xl font-medium", children: "Checking for Changes" }), _jsx("p", { className: "text-muted-foreground max-w-md", children: "Order changes are being checked. This may take a moment..." })] }) }));
+};

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

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ScrollArea, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, useTranslation, } from '@deenruv/react-ui-devkit';
+export const ChangesRegisterTable = ({ changes }) => {
+    const { t } = useTranslation('orders');
+    return (_jsx(ScrollArea, { children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { className: "w-1/3", children: t('changes.property', 'Property') }), _jsx(TableHead, { className: "w-1/3", children: t('changes.previous', 'Previous') }), _jsx(TableHead, { className: "w-1/3", children: t('changes.current', 'Current') })] }) }), _jsx(TableBody, { children: changes.map((change, index) => {
+                        return (_jsxs(TableRow, { children: [change.changed === 'added', _jsx(TableCell, { className: "font-medium", children: _jsx("div", { className: "flex items-center gap-2", children: change.path.includes('Address')
+                                            ? t(`changes.keys.${change.path.split('.').pop()}`)
+                                            : t(`changes.keys.${change.path}`) }) }), _jsx(TableCell, { className: "font-medium text-red-600 dark:text-red-400", children: _jsx("div", { className: "flex items-center gap-2", children: change.changed === 'added'
+                                            ? '—'
+                                            : change.changed === 'removed'
+                                                ? change.value
+                                                : change.removed }) }), _jsx(TableCell, { className: "font-medium text-green-600 dark:text-green-400", children: _jsx("div", { className: "flex items-center gap-2", children: change.changed === 'added'
+                                            ? change.value
+                                            : change.changed === 'removed'
+                                                ? '—'
+                                                : change.added }) })] }, index));
+                    }) })] }) }));
+};