@vendure/dashboard 3.2.0 → 3.2.2

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

@@ -1,169 +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>
-    );
-}
+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

@@ -1,39 +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>
+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

@@ -1,61 +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>
-    );
-}
+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>
+    );
+}