@wilshop/dashboard 3.5.2

package/src/app/routes/_authenticated/_orders/components/order-table-totals.tsx

@@ -0,0 +1,100 @@
+import { Badge } from '@/vdb/components/ui/badge.js';
+import { TableCell, TableRow } from '@/vdb/components/ui/table.js';
+import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
+import { Trans } from '@lingui/react/macro';
+import { Order } from '../utils/order-types.js';
+import { MoneyGrossNet } from './money-gross-net.js';
+
+export interface OrderTableTotalsProps {
+    order: Order;
+    columnCount: number;
+}
+
+export function OrderTableTotals({ order, columnCount }: Readonly<OrderTableTotalsProps>) {
+    const { formatCurrency } = useLocalFormat();
+    const currencyCode = order.currencyCode;
+    return (
+        <>
+            {order.surcharges?.length > 0
+                ? order.surcharges.map((surcharge, index) => (
+                      <TableRow key={`${surcharge.description}-${index}`}>
+                          <TableCell colSpan={columnCount - 1} className="h-12">
+                              <Trans>Surcharge</Trans>: {surcharge.description}
+                          </TableCell>
+                          <TableCell colSpan={1} className="h-12">
+                              <MoneyGrossNet
+                                  priceWithTax={surcharge.priceWithTax}
+                                  price={surcharge.price}
+                                  currencyCode={currencyCode}
+                              />
+                          </TableCell>
+                      </TableRow>
+                  ))
+                : null}
+            {order.discounts?.length > 0
+                ? order.discounts.map((discount, index) => (
+                      <TableRow key={`${discount.description}-${index}`}>
+                          <TableCell colSpan={columnCount - 1} className="h-12">
+                              <Trans>Discount</Trans>: {discount.description}
+                          </TableCell>
+                          <TableCell colSpan={1} className="h-12">
+                              <MoneyGrossNet
+                                  priceWithTax={discount.amountWithTax}
+                                  price={discount.amount}
+                                  currencyCode={currencyCode}
+                              />
+                          </TableCell>
+                      </TableRow>
+                  ))
+                : null}
+            <TableRow>
+                <TableCell colSpan={columnCount - 1} className="h-12">
+                    <Trans>Sub total</Trans>
+                </TableCell>
+                <TableCell colSpan={1} className="h-12">
+                    <MoneyGrossNet
+                        priceWithTax={order.subTotalWithTax}
+                        price={order.subTotal}
+                        currencyCode={currencyCode}
+                    />
+                </TableCell>
+            </TableRow>
+            <TableRow>
+                <TableCell colSpan={columnCount - 1} className="h-12">
+                    <div className="flex flex-wrap gap-1">
+                        <div>
+                            <Trans>Shipping</Trans>
+                        </div>
+                        {order.shippingLines.map(sl => (
+                            <Badge variant="outline" key={sl.id}>
+                                {sl.shippingMethod.name}
+                                {order.shippingLines.length > 1
+                                    ? ` (${formatCurrency(sl.discountedPriceWithTax, order.currencyCode)})`
+                                    : ''}
+                            </Badge>
+                        ))}
+                    </div>
+                </TableCell>
+                <TableCell colSpan={1} className="h-12">
+                    <MoneyGrossNet
+                        priceWithTax={order.shippingWithTax}
+                        price={order.shipping}
+                        currencyCode={currencyCode}
+                    />
+                </TableCell>
+            </TableRow>
+            <TableRow>
+                <TableCell colSpan={columnCount - 1} className="h-12 font-bold">
+                    <Trans>Total</Trans>
+                </TableCell>
+                <TableCell colSpan={1} className="h-12 font-bold">
+                    <MoneyGrossNet
+                        priceWithTax={order.totalWithTax}
+                        price={order.total}
+                        currencyCode={currencyCode}
+                    />
+                </TableCell>
+            </TableRow>
+        </>
+    );
+}

package/src/app/routes/_authenticated/_orders/components/order-table.tsx

@@ -0,0 +1,194 @@
+import { Money } from '@/vdb/components/data-display/money.js';
+import { getColumnVisibility } from '@/vdb/components/data-table/data-table-utils.js';
+import { DataTable } from '@/vdb/components/data-table/data-table.js';
+import { useGeneratedColumns } from '@/vdb/components/data-table/use-generated-columns.js';
+import { DetailPageButton } from '@/vdb/components/shared/detail-page-button.js';
+import { VendureImage } from '@/vdb/components/shared/vendure-image.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from '@/vdb/components/ui/dropdown-menu.js';
+import { addCustomFields } from '@/vdb/framework/document-introspection/add-custom-fields.js';
+import { getFieldsFromDocumentNode } from '@/vdb/framework/document-introspection/get-document-structure.js';
+import { ResultOf } from '@/vdb/graphql/graphql.js';
+import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
+import { Trans } from '@lingui/react/macro';
+import { JsonEditor } from 'json-edit-react';
+import { EllipsisVertical } from 'lucide-react';
+import { useMemo } from 'react';
+import { orderDetailDocument, orderLineFragment } from '../orders.graphql.js';
+import { MoneyGrossNet } from './money-gross-net.js';
+import { OrderTableTotals } from './order-table-totals.js';
+
+type OrderFragment = NonNullable<ResultOf<typeof orderDetailDocument>['order']>;
+type OrderLineFragment = ResultOf<typeof orderLineFragment>;
+
+export interface OrderTableProps {
+    order: OrderFragment;
+    pageId: string;
+}
+
+// Factory function to create customizeColumns with inline components
+function createCustomizeColumns(currencyCode: string) {
+    return {
+        featuredAsset: {
+            header: () => <Trans>Image</Trans>,
+            accessorKey: 'featuredAsset',
+            cell: ({ row }: { row: any }) => {
+                const asset = row.original.featuredAsset;
+                const fallbackAsset =
+                    row.original.productVariant?.featuredAsset ??
+                    row.original.productVariant?.product?.featuredAsset;
+                return <VendureImage asset={asset ?? fallbackAsset} preset="tiny" />;
+            },
+        },
+        productVariant: {
+            header: () => <Trans>Product</Trans>,
+            cell: ({ row }: { row: any }) => {
+                const productVariant = row.original.productVariant;
+                return (
+                    <DetailPageButton
+                        id={productVariant.id}
+                        label={productVariant.name}
+                        href={`/product-variants/${productVariant.id}`}
+                    />
+                );
+            },
+        },
+        unitPriceWithTax: {
+            header: () => <Trans>Unit price</Trans>,
+            accessorKey: 'unitPriceWithTax',
+            cell: ({ row }: { row: any }) => {
+                const value = row.original.unitPriceWithTax;
+                const netValue = row.original.unitPrice;
+                return <MoneyGrossNet priceWithTax={value} price={netValue} currencyCode={currencyCode} />;
+            },
+        },
+        fulfillmentLines: {
+            cell: ({ row }: { row: any }) => (
+                <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                        <Button variant="ghost" size="icon">
+                            <EllipsisVertical />
+                        </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent>
+                        <JsonEditor data={row.original.fulfillmentLines} viewOnly rootFontSize={12} />
+                    </DropdownMenuContent>
+                </DropdownMenu>
+            ),
+        },
+        quantity: {
+            header: () => <Trans>Quantity</Trans>,
+            accessorKey: 'quantity',
+        },
+        unitPrice: {
+            cell: ({ row }: { row: any }) => (
+                <Money currencyCode={currencyCode} value={row.original.unitPrice} />
+            ),
+        },
+        proratedUnitPrice: {
+            cell: ({ row }: { row: any }) => (
+                <Money currencyCode={currencyCode} value={row.original.proratedUnitPrice} />
+            ),
+        },
+        proratedUnitPriceWithTax: {
+            cell: ({ row }: { row: any }) => (
+                <Money currencyCode={currencyCode} value={row.original.proratedUnitPriceWithTax} />
+            ),
+        },
+        linePrice: {
+            cell: ({ row }: { row: any }) => (
+                <Money currencyCode={currencyCode} value={row.original.linePrice} />
+            ),
+        },
+        discountedLinePrice: {
+            cell: ({ row }: { row: any }) => (
+                <Money currencyCode={currencyCode} value={row.original.discountedLinePrice} />
+            ),
+        },
+        lineTax: {
+            cell: ({ row }: { row: any }) => (
+                <Money currencyCode={currencyCode} value={row.original.lineTax} />
+            ),
+        },
+        linePriceWithTax: {
+            header: () => <Trans>Total</Trans>,
+            accessorKey: 'linePriceWithTax',
+            cell: ({ row }: { row: any }) => {
+                const value = row.original.linePriceWithTax;
+                const netValue = row.original.linePrice;
+                return <MoneyGrossNet priceWithTax={value} price={netValue} currencyCode={currencyCode} />;
+            },
+        },
+        discountedLinePriceWithTax: {
+            cell: ({ row }: { row: any }) => (
+                <Money currencyCode={currencyCode} value={row.original.discountedLinePriceWithTax} />
+            ),
+        },
+    };
+}
+
+export function OrderTable({ order, pageId }: Readonly<OrderTableProps>) {
+    const { setTableSettings, settings } = useUserSettings();
+    const tableSettings = pageId ? settings.tableSettings?.[pageId] : undefined;
+
+    const defaultColumnVisibility = tableSettings?.columnVisibility ?? {
+        featuredAsset: true,
+        productVariant: true,
+        unitPriceWithTax: true,
+        quantity: true,
+        linePriceWithTax: true,
+    };
+    const columnOrder = tableSettings?.columnOrder ?? [
+        'featuredAsset',
+        'productVariant',
+        'unitPriceWithTax',
+        'quantity',
+        'linePriceWithTax',
+    ];
+    const currencyCode = order.currencyCode;
+
+    const fields = getFieldsFromDocumentNode(
+        addCustomFields(orderDetailDocument, { includeNestedFragments: ['OrderLine'] }),
+        ['order', 'lines'],
+    );
+
+    const customizeColumns = useMemo(() => createCustomizeColumns(currencyCode), [currencyCode]);
+
+    const { columns, customFieldColumnNames } = useGeneratedColumns({
+        fields,
+        rowActions: [],
+        customizeColumns: customizeColumns as any,
+        deleteMutation: undefined,
+        defaultColumnOrder: columnOrder,
+        includeSelectionColumn: false,
+        includeActionsColumn: false,
+        enableSorting: false,
+    });
+
+    const columnVisibility = getColumnVisibility(columns, defaultColumnVisibility, customFieldColumnNames);
+    const visibleColumnCount = Object.values(columnVisibility).filter(Boolean).length - 2; // -2 for "actions" and "selection" cols
+    const data = order.lines;
+
+    return (
+        <div className="w-full">
+            <DataTable
+                columns={columns as any}
+                data={data as any}
+                totalItems={data.length}
+                disableViewOptions={false}
+                defaultColumnVisibility={columnVisibility}
+                onColumnVisibilityChange={(_, columnVisibility) => {
+                    setTableSettings(pageId, 'columnVisibility', columnVisibility);
+                }}
+                setTableOptions={options => ({
+                    ...options,
+                    manualPagination: false,
+                    manualSorting: false,
+                    manualFiltering: false,
+                })}
+            >
+                <OrderTableTotals order={order} columnCount={visibleColumnCount} />
+            </DataTable>
+        </div>
+    );
+}

package/src/app/routes/_authenticated/_orders/components/order-tax-summary.tsx

@@ -0,0 +1,40 @@
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/vdb/components/ui/table.js';
+import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
+import { Trans } from '@lingui/react/macro';
+import { Order } from '../utils/order-types.js';
+
+export function OrderTaxSummary({ order }: Readonly<{ order: Order }>) {
+    const { formatCurrency } = useLocalFormat();
+    return (
+        <div>
+            <Table>
+                <TableHeader>
+                    <TableRow>
+                        <TableHead>
+                            <Trans>Description</Trans>
+                        </TableHead>
+                        <TableHead>
+                            <Trans>Tax rate</Trans>
+                        </TableHead>
+                        <TableHead>
+                            <Trans>Tax base</Trans>
+                        </TableHead>
+                        <TableHead>
+                            <Trans>Tax total</Trans>
+                        </TableHead>
+                    </TableRow>
+                </TableHeader>
+                <TableBody>
+                    {order.taxSummary.map(taxLine => (
+                        <TableRow key={taxLine.description}>
+                            <TableCell>{taxLine.description}</TableCell>
+                            <TableCell>{taxLine.taxRate}%</TableCell>
+                            <TableCell>{formatCurrency(taxLine.taxBase, order.currencyCode)}</TableCell>
+                            <TableCell>{formatCurrency(taxLine.taxTotal, order.currencyCode)}</TableCell>
+                        </TableRow>
+                    ))}
+                </TableBody>
+            </Table>
+        </div>
+    );
+}

package/src/app/routes/_authenticated/_orders/components/payment-details.tsx

@@ -0,0 +1,293 @@
+import { LabeledData } from '@/vdb/components/labeled-data.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/vdb/components/ui/collapsible.js';
+import { api } from '@/vdb/graphql/api.js';
+import { ResultOf } from '@/vdb/graphql/graphql.js';
+import { useDynamicTranslations } from '@/vdb/hooks/use-dynamic-translations.js';
+import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
+import { Trans, useLingui } from '@lingui/react/macro';
+import { useMutation } from '@tanstack/react-query';
+import { JsonEditor } from 'json-edit-react';
+import { ChevronDown } from 'lucide-react';
+import { useState } from 'react';
+import { toast } from 'sonner';
+import {
+    cancelPaymentDocument,
+    paymentWithRefundsFragment,
+    settlePaymentDocument,
+    settleRefundDocument,
+    transitionPaymentToStateDocument,
+} from '../orders.graphql.js';
+import { SettleRefundDialog } from './settle-refund-dialog.js';
+import {
+    getTypeForState,
+    StateTransitionAction,
+    StateTransitionControl,
+} from './state-transition-control.js';
+
+type PaymentDetailsProps = {
+    payment: ResultOf<typeof paymentWithRefundsFragment>;
+    currencyCode: string;
+    onSuccess?: () => void;
+};
+
+export function PaymentDetails({ payment, currencyCode, onSuccess }: Readonly<PaymentDetailsProps>) {
+    const { formatCurrency, formatDate } = useLocalFormat();
+    const { t } = useLingui();
+    const { getTranslatedPaymentState, getTranslatedRefundState } = useDynamicTranslations();
+    const [settleRefundDialogOpen, setSettleRefundDialogOpen] = useState(false);
+    const [selectedRefundId, setSelectedRefundId] = useState<string | null>(null);
+
+    const settlePaymentMutation = useMutation({
+        mutationFn: api.mutate(settlePaymentDocument),
+        onSuccess: (result: ResultOf<typeof settlePaymentDocument>) => {
+            if (result.settlePayment.__typename === 'Payment') {
+                toast.success(t`Payment settled successfully`);
+                onSuccess?.();
+            } else {
+                toast.error(result.settlePayment.message ?? t`Failed to settle payment`);
+            }
+        },
+        onError: () => {
+            toast.error(t`Failed to settle payment`);
+        },
+    });
+
+    const transitionPaymentMutation = useMutation({
+        mutationFn: api.mutate(transitionPaymentToStateDocument),
+        onSuccess: (result: ResultOf<typeof transitionPaymentToStateDocument>) => {
+            if (result.transitionPaymentToState.__typename === 'Payment') {
+                toast.success(t`Payment state updated successfully`);
+                onSuccess?.();
+            } else {
+                toast.error(result.transitionPaymentToState.message ?? t`Failed to update payment state`);
+            }
+        },
+        onError: () => {
+            toast.error(t`Failed to update payment state`);
+        },
+    });
+
+    const cancelPaymentMutation = useMutation({
+        mutationFn: api.mutate(cancelPaymentDocument),
+        onSuccess: (result: ResultOf<typeof cancelPaymentDocument>) => {
+            if (result.cancelPayment.__typename === 'Payment') {
+                toast.success(t`Payment cancelled successfully`);
+                onSuccess?.();
+            } else {
+                toast.error(result.cancelPayment.message ?? t`Failed to cancel payment`);
+            }
+        },
+        onError: () => {
+            toast.error(t`Failed to cancel payment`);
+        },
+    });
+
+    const settleRefundMutation = useMutation({
+        mutationFn: api.mutate(settleRefundDocument),
+        onSuccess: (result: ResultOf<typeof settleRefundDocument>) => {
+            if (result.settleRefund.__typename === 'Refund') {
+                toast.success(t`Refund settled successfully`);
+                onSuccess?.();
+                setSettleRefundDialogOpen(false);
+            } else {
+                toast.error(result.settleRefund.message ?? t`Failed to settle refund`);
+            }
+        },
+        onError: () => {
+            toast.error(t`Failed to settle refund`);
+        },
+    });
+
+    const handlePaymentStateTransition = (state: string) => {
+        if (state === 'Cancelled') {
+            cancelPaymentMutation.mutate({ id: payment.id });
+        } else {
+            transitionPaymentMutation.mutate({ id: payment.id, state });
+        }
+    };
+
+    const handleSettlePayment = () => {
+        settlePaymentMutation.mutate({ id: payment.id });
+    };
+
+    const handleSettleRefund = (refundId: string) => {
+        setSelectedRefundId(refundId);
+        setSettleRefundDialogOpen(true);
+    };
+
+    const handleSettleRefundConfirm = (transactionId: string) => {
+        if (selectedRefundId) {
+            settleRefundMutation.mutate({
+                input: {
+                    id: selectedRefundId,
+                    transactionId,
+                },
+            });
+        }
+    };
+
+    const nextOtherStates = (): string[] => {
+        if (!payment.nextStates) {
+            return [];
+        }
+        return payment.nextStates.filter(s => s !== 'Settled' && s !== 'Error');
+    };
+
+    const getPaymentActions = () => {
+        const actions: StateTransitionAction[] = [];
+
+        if (payment.nextStates?.includes('Settled')) {
+            actions.push({
+                label: t`Settle payment`,
+                onClick: handleSettlePayment,
+                type: 'success',
+                disabled: settlePaymentMutation.isPending,
+            });
+        }
+
+        nextOtherStates().forEach(state => {
+            actions.push({
+                label:
+                    state === 'Cancelled'
+                        ? t`Cancel payment`
+                        : t`Transition to ${getTranslatedPaymentState(state)}`,
+                type: getTypeForState(state),
+                onClick: () => handlePaymentStateTransition(state),
+                disabled: transitionPaymentMutation.isPending || cancelPaymentMutation.isPending,
+            });
+        });
+
+        return actions;
+    };
+
+    return (
+        <>
+            <div className="space-y-1 p-3 border rounded-md">
+                <div className="grid lg:grid-cols-2 gap-2">
+                    <LabeledData label={<Trans>Payment method</Trans>} value={payment.method} />
+                    <LabeledData
+                        label={<Trans>Amount</Trans>}
+                        value={formatCurrency(payment.amount, currencyCode)}
+                    />
+                    <LabeledData
+                        label={<Trans>Created at</Trans>}
+                        value={formatDate(payment.createdAt, { dateStyle: 'short', timeStyle: 'short' })}
+                    />
+                    {payment.transactionId && (
+                        <LabeledData label={<Trans>Transaction ID</Trans>} value={payment.transactionId} />
+                    )}
+                    {/* We need to check if there is errorMessage field in the Payment type */}
+                    {payment.errorMessage && (
+                        <LabeledData
+                            label={<Trans>Error message</Trans>}
+                            value={payment.errorMessage}
+                            className="text-destructive"
+                        />
+                    )}
+                </div>
+                <Collapsible className="mt-2 border-t pt-2">
+                    <CollapsibleTrigger className="flex items-center justify-between w-full text-sm hover:underline text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-md p-1 -m-1">
+                        <Trans>Payment metadata</Trans>
+                        <ChevronDown className="h-4 w-4 transition-transform duration-200 data-[state=open]:rotate-180" />
+                    </CollapsibleTrigger>
+                    <CollapsibleContent className="mt-2">
+                        <JsonEditor
+                            viewOnly
+                            rootFontSize={12}
+                            minWidth={100}
+                            rootName=""
+                            data={payment.metadata}
+                            collapse
+                        />
+                    </CollapsibleContent>
+                </Collapsible>
+                {payment.refunds && payment.refunds.length > 0 && (
+                    <Collapsible className="mt-2 border-t pt-2">
+                        <CollapsibleTrigger className="flex items-center justify-between w-full text-sm hover:underline text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-md p-1 -m-1">
+                            <Trans>Refunds ({payment.refunds.length})</Trans>
+                            <ChevronDown className="h-4 w-4 transition-transform duration-200 data-[state=open]:rotate-180" />
+                        </CollapsibleTrigger>
+                        <CollapsibleContent className="mt-2 space-y-3">
+                            {payment.refunds.map(refund => (
+                                <div key={refund.id} className="p-3 border rounded-md bg-muted/50">
+                                    <div className="space-y-1">
+                                        <LabeledData label={<Trans>Refund ID</Trans>} value={refund.id} />
+                                        <LabeledData
+                                            label={<Trans>State</Trans>}
+                                            value={getTranslatedRefundState(refund.state)}
+                                        />
+                                        <LabeledData
+                                            label={<Trans>Created at</Trans>}
+                                            value={formatDate(refund.createdAt, {
+                                                dateStyle: 'short',
+                                                timeStyle: 'short',
+                                            })}
+                                        />
+                                        <LabeledData
+                                            label={<Trans>Total</Trans>}
+                                            value={formatCurrency(refund.total, currencyCode)}
+                                        />
+                                        {refund.reason && (
+                                            <LabeledData
+                                                label={<Trans>Reason</Trans>}
+                                                value={refund.reason}
+                                            />
+                                        )}
+                                        {refund.transactionId && (
+                                            <LabeledData
+                                                label={<Trans>Transaction ID</Trans>}
+                                                value={refund.transactionId}
+                                            />
+                                        )}
+                                        {refund.metadata && Object.keys(refund.metadata).length > 0 && (
+                                            <div className="mt-2">
+                                                <LabeledData label={<Trans>Metadata</Trans>} value="" />
+                                                <JsonEditor
+                                                    viewOnly
+                                                    rootFontSize={11}
+                                                    minWidth={100}
+                                                    rootName=""
+                                                    data={refund.metadata}
+                                                    collapse
+                                                />
+                                            </div>
+                                        )}
+                                    </div>
+                                    {refund.state === 'Pending' && (
+                                        <div className="mt-3 pt-3 border-t">
+                                            <Button
+                                                size="sm"
+                                                onClick={() => handleSettleRefund(refund.id)}
+                                                disabled={settleRefundMutation.isPending}
+                                            >
+                                                <Trans>Settle refund</Trans>
+                                            </Button>
+                                        </div>
+                                    )}
+                                </div>
+                            ))}
+                        </CollapsibleContent>
+                    </Collapsible>
+                )}
+                <div className="mt-3 pt-3 border-t">
+                    <StateTransitionControl
+                        currentState={getTranslatedPaymentState(payment.state)}
+                        actions={getPaymentActions()}
+                        isLoading={
+                            settlePaymentMutation.isPending ||
+                            transitionPaymentMutation.isPending ||
+                            cancelPaymentMutation.isPending
+                        }
+                    />
+                </div>
+            </div>
+            <SettleRefundDialog
+                open={settleRefundDialogOpen}
+                onOpenChange={setSettleRefundDialogOpen}
+                onSettle={handleSettleRefundConfirm}
+                isLoading={settleRefundMutation.isPending}
+            />
+        </>
+    );
+}