@vendure/dashboard 3.2.0

package/src/app/routes/_authenticated/_orders/components/order-history/use-order-history.ts

@@ -0,0 +1,171 @@
+import { api } from '@/graphql/api.js';
+import { graphql, ResultOf } from '@/graphql/graphql.js';
+import { useLingui } from '@/lib/trans.js';
+import { useMutation, useInfiniteQuery } from '@tanstack/react-query';
+import { useState } from 'react';
+import { toast } from 'sonner';
+
+import { orderHistoryDocument } from '../../orders.graphql.js';
+
+// Simplified mutation definitions - adjust based on your actual schema
+const addOrderNoteDocument = graphql(`
+    mutation AddOrderNote($orderId: ID!, $note: String!, $isPublic: Boolean!) {
+        addNoteToOrder(input: { id: $orderId, note: $note, isPublic: $isPublic }) {
+            id
+            history(options: { take: 1, sort: { createdAt: DESC } }) {
+                items {
+                    id
+                    createdAt
+                    type
+                    isPublic
+                    data
+                }
+            }
+        }
+    }
+`);
+
+const updateOrderNoteDocument = graphql(`
+    mutation UpdateOrderNote($noteId: ID!, $note: String!, $isPublic: Boolean!) {
+        updateOrderNote(input: { noteId: $noteId, note: $note, isPublic: $isPublic }) {
+            id
+        }
+    }
+`);
+
+const deleteOrderNoteDocument = graphql(`
+    mutation DeleteOrderNote($noteId: ID!) {
+        deleteOrderNote(id: $noteId) {
+            result
+            message
+        }
+    }
+`);
+
+export interface UseOrderHistoryResult {
+    historyEntries: NonNullable<ResultOf<typeof orderHistoryDocument>['order']>['history']['items'];
+    order: ResultOf<typeof orderHistoryDocument>['order'];
+    loading: boolean;
+    error: Error | null;
+    addNote: (note: string, isPrivate: boolean) => void;
+    updateNote: (noteId: string, note: string, isPrivate: boolean) => void;
+    deleteNote: (noteId: string) => void;
+    refetch: () => void;
+    fetchNextPage: () => void;
+    hasNextPage: boolean;
+}
+
+export function useOrderHistory({
+    orderId,
+    pageSize = 10,
+}: {
+    orderId: string;
+    pageSize?: number;
+}): UseOrderHistoryResult {
+    const [isLoading, setIsLoading] = useState(false);
+    const { i18n } = useLingui();
+
+    // Fetch order history
+    const {
+        data,
+        isLoading: isLoadingQuery,
+        error,
+        refetch,
+        fetchNextPage,
+        hasNextPage,
+    } = useInfiniteQuery({
+        queryFn: ({ pageParam = 0 }) =>
+            api.query(orderHistoryDocument, {
+                id: orderId,
+                options: {
+                    sort: { createdAt: 'DESC' },
+                    skip: pageParam * pageSize,
+                    take: pageSize,
+                },
+            }),
+        queryKey: ['OrderHistory', orderId],
+        initialPageParam: 0,
+        getNextPageParam: (lastPage, _pages, lastPageParam) => {
+            const totalItems = lastPage.order?.history?.totalItems ?? 0;
+            const currentMaxItem = (lastPageParam + 1) * pageSize;
+            const nextPage = lastPageParam + 1;
+            return currentMaxItem < totalItems ? nextPage : undefined;
+        },
+    });
+
+    // Add note mutation
+    const { mutate: addNoteMutation } = useMutation({
+        mutationFn: api.mutate(addOrderNoteDocument),
+        onSuccess: () => {
+            toast.success(i18n.t('Note added successfully'));
+            void refetch();
+        },
+        onError: () => {
+            toast.error(i18n.t('Failed to add note'));
+        },
+    });
+
+    const addNote = (note: string, isPrivate: boolean) => {
+        setIsLoading(true);
+        addNoteMutation({
+            orderId,
+            note,
+            isPublic: !isPrivate, // isPrivate in UI is the opposite of isPublic in API
+        });
+    };
+
+    // Update note mutation
+    const { mutate: updateNoteMutation } = useMutation({
+        mutationFn: api.mutate(updateOrderNoteDocument),
+        onSuccess: () => {
+            toast.success(i18n.t('Note updated successfully'));
+            void refetch();
+        },
+        onError: () => {
+            toast.error(i18n.t('Failed to update note'));
+        },
+    });
+    const updateNote = (noteId: string, note: string, isPrivate: boolean) => {
+        setIsLoading(true);
+
+        updateNoteMutation({
+            noteId,
+            note,
+            isPublic: !isPrivate, // isPrivate in UI is the opposite of isPublic in API
+        });
+    };
+
+    // Delete note mutation
+    const { mutate: deleteNoteMutation } = useMutation({
+        mutationFn: api.mutate(deleteOrderNoteDocument),
+        onSuccess: () => {
+            toast.success(i18n.t('Note deleted successfully'));
+            void refetch();
+        },
+        onError: () => {
+            toast.error(i18n.t('Failed to delete note'));
+        },
+    });
+    const deleteNote = (noteId: string) => {
+        setIsLoading(true);
+        deleteNoteMutation({
+            noteId,
+        });
+    };
+
+    const historyEntries =
+        data?.pages.flatMap(page => page.order?.history?.items).filter(x => x != null) ?? [];
+
+    return {
+        historyEntries: historyEntries as any,
+        order: data?.pages[0]?.order ?? null,
+        loading: isLoadingQuery || isLoading,
+        error,
+        addNote,
+        updateNote,
+        deleteNote,
+        refetch,
+        fetchNextPage,
+        hasNextPage,
+    };
+}

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

@@ -0,0 +1,169 @@
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table.js';
+import { ResultOf } from '@/graphql/graphql.js';
+import {
+    ColumnDef,
+    flexRender,
+    getCoreRowModel,
+    useReactTable,
+    VisibilityState,
+} from '@tanstack/react-table';
+import { useState } from 'react';
+import { orderDetailDocument, orderLineFragment } from '../orders.graphql.js';
+import { VendureImage } from '@/components/shared/vendure-image.js';
+import { Money } from '@/components/data-display/money.js';
+import { Trans } from '@/lib/trans.js';
+
+type OrderFragment = NonNullable<ResultOf<typeof orderDetailDocument>['order']>;
+type OrderLineFragment = ResultOf<typeof orderLineFragment>;
+
+export interface OrderTableProps {
+    order: OrderFragment;
+}
+
+export function OrderTable({ order }: OrderTableProps) {
+    const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});
+
+    const currencyCode = order.currencyCode;
+
+    const columns: ColumnDef<OrderLineFragment>[] = [
+        {
+            header: 'Image',
+            accessorKey: 'featuredAsset',
+            cell: ({ row }) => {
+                const asset = row.original.featuredAsset;
+                return <VendureImage asset={asset} preset="tiny" />;
+            },
+        },
+        {
+            header: 'Product',
+            accessorKey: 'productVariant.name',
+        },
+        {
+            header: 'SKU',
+            accessorKey: 'productVariant.sku',
+        },
+        {
+            header: 'Unit price',
+            accessorKey: 'unitPriceWithTax',
+            cell: ({ cell, row }) => {
+                const value = cell.getValue();
+                const netValue = row.original.unitPrice;
+                return (
+                    <div className="flex flex-col gap-1">
+                        <div>
+                            <Money value={value} currencyCode={currencyCode} />
+                        </div>
+                        <div className="text-xs text-muted-foreground">
+                            <Money value={netValue} currencyCode={currencyCode} />
+                        </div>
+                    </div>
+                );
+            },
+        },
+        {
+            header: 'Quantity',
+            accessorKey: 'quantity',
+        },
+        {
+            header: 'Total',
+            accessorKey: 'linePriceWithTax',
+            cell: ({ cell, row }) => {
+                const value = cell.getValue();
+                const netValue = row.original.linePrice;
+                return (
+                    <div className="flex flex-col gap-1">
+                        <div>
+                            <Money value={value} currencyCode={currencyCode} />
+                        </div>
+                        <div className="text-xs text-muted-foreground">
+                            <Money value={netValue} currencyCode={currencyCode} />
+                        </div>
+                    </div>
+                );
+            },
+        },
+    ];
+
+    const data = order.lines;
+
+    const table = useReactTable({
+        data,
+        columns,
+        getCoreRowModel: getCoreRowModel(),
+        rowCount: data.length,
+        onColumnVisibilityChange: setColumnVisibility,
+        state: {
+            columnVisibility,
+        },
+    });
+
+    return (
+        <div className="w-full">
+            <div className="">
+                <Table>
+                    <TableHeader>
+                        {table.getHeaderGroups().map(headerGroup => (
+                            <TableRow key={headerGroup.id}>
+                                {headerGroup.headers.map(header => {
+                                    return (
+                                        <TableHead key={header.id}>
+                                            {header.isPlaceholder
+                                                ? null
+                                                : flexRender(
+                                                      header.column.columnDef.header,
+                                                      header.getContext(),
+                                                  )}
+                                        </TableHead>
+                                    );
+                                })}
+                            </TableRow>
+                        ))}
+                    </TableHeader>
+                    <TableBody>
+                        {table.getRowModel().rows?.length ? (
+                            table.getRowModel().rows.map(row => (
+                                <TableRow key={row.id} data-state={row.getIsSelected() && 'selected'}>
+                                    {row.getVisibleCells().map(cell => (
+                                        <TableCell key={cell.id}>
+                                            {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                                        </TableCell>
+                                    ))}
+                                </TableRow>
+                            ))
+                        ) : (
+                            <TableRow>
+                                <TableCell colSpan={columns.length} className="h-24 text-center">
+                                    No results.
+                                </TableCell>
+                            </TableRow>
+                        )}
+                        <TableRow>
+                            <TableCell colSpan={columns.length - 1} className="h-12">
+                                <Trans>Sub total</Trans>
+                            </TableCell>
+                            <TableCell colSpan={1} className="h-12">
+                                <Money value={order.subTotalWithTax} currencyCode={currencyCode} />
+                            </TableCell>
+                        </TableRow>
+                        <TableRow>
+                            <TableCell colSpan={columns.length - 1} className="h-12">
+                                <Trans>Shipping</Trans>
+                            </TableCell>
+                            <TableCell colSpan={1} className="h-12">
+                                <Money value={order.shippingWithTax} currencyCode={currencyCode} />
+                            </TableCell>
+                        </TableRow>
+                        <TableRow>
+                            <TableCell colSpan={columns.length - 1} className="h-12 font-bold">
+                                <Trans>Total</Trans>
+                            </TableCell>
+                            <TableCell colSpan={1} className="h-12 font-bold">
+                                <Money value={order.totalWithTax} currencyCode={currencyCode} />
+                            </TableCell>
+                        </TableRow>
+                    </TableBody>
+                </Table>
+            </div>
+        </div>
+    );
+}

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

@@ -0,0 +1,39 @@
+import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from "@/components/ui/table.js";
+import { Trans } from "@/lib/trans";
+import { orderDetailFragment } from "../orders.graphql.js";
+import { ResultOf } from "gql.tada";
+import { useLocalFormat } from "@/hooks/use-local-format.js";
+
+export function OrderTaxSummary({ order }: { order: ResultOf<typeof orderDetailFragment> }) {
+    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,61 @@
+import { ResultOf } from '@/graphql/graphql.js';
+import { useLocalFormat } from '@/hooks/use-local-format.js';
+import { Trans } from '@/lib/trans.js';
+import { paymentWithRefundsFragment } from '../orders.graphql.js';
+
+type PaymentDetailsProps = {
+    payment: ResultOf<typeof paymentWithRefundsFragment>;
+    currencyCode: string;
+};
+
+export function PaymentDetails({ payment, currencyCode }: PaymentDetailsProps) {
+    const { formatCurrency, formatDate } = useLocalFormat();
+    const t = (key: string) => key;
+
+    return (
+        <div className="space-y-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)} />
+
+            {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"
+                />
+            )}
+
+            <LabeledData
+                label={<Trans>Payment metadata</Trans>}
+                value={
+                    <pre className="max-h-96 overflow-auto rounded-md bg-muted p-4 text-sm">
+                        {JSON.stringify(payment.metadata, null, 2)}
+                    </pre>
+                }
+            />
+        </div>
+    );
+}
+
+type LabeledDataProps = {
+    label: string | React.ReactNode;
+    value: React.ReactNode;
+    className?: string;
+};
+
+function LabeledData({ label, value, className }: LabeledDataProps) {
+    return (
+        <div className="">
+            <span className="font-medium text-muted-foreground text-sm">{label}</span>
+            <div className={`col-span-2 ${className}`}>{value}</div>
+        </div>
+    );
+}