@vendure/dashboard 3.3.6-master-202507050232 → 3.4.0-minor-202506250934

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

@@ -1,44 +1,35 @@
-import { TableCell, TableRow } from '@/vdb/components/ui/table.js';
-import { Trans } from '@/vdb/lib/trans.js';
-import { Order } from '../utils/order-types.js';
-import { MoneyGrossNet } from './money-gross-net.js';
+import { ResultOf } from "@/graphql/graphql.js";
+import { orderDetailDocument } from "../orders.graphql.js";
+import { TableRow, TableCell } from "@/components/ui/table.js";
+import { MoneyGrossNet } from "./money-gross-net.js";
+import { Trans } from "@/lib/trans.js";
+
+type OrderFragment = NonNullable<ResultOf<typeof orderDetailDocument>['order']>;
 
 export interface OrderTableTotalsProps {
-    order: Order;
+    order: OrderFragment;
     columnCount: number;
 }
 
-export function OrderTableTotals({ order, columnCount }: Readonly<OrderTableTotalsProps>) {
+export function OrderTableTotals({ order, columnCount }: OrderTableTotalsProps) {
     const currencyCode = order.currencyCode;
 
     return (
         <>
-            {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}
+            {order.discounts?.length > 0 ? order.discounts.map(discount => <TableRow>
+                <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}
-                    />
+                    <MoneyGrossNet priceWithTax={order.subTotalWithTax} price={order.subTotal} currencyCode={currencyCode} />
                 </TableCell>
             </TableRow>
             <TableRow>
@@ -46,11 +37,7 @@ export function OrderTableTotals({ order, columnCount }: Readonly<OrderTableTota
                     <Trans>Shipping</Trans>
                 </TableCell>
                 <TableCell colSpan={1} className="h-12">
-                    <MoneyGrossNet
-                        priceWithTax={order.shippingWithTax}
-                        price={order.shipping}
-                        currencyCode={currencyCode}
-                    />
+                    <MoneyGrossNet priceWithTax={order.shippingWithTax} price={order.shipping} currencyCode={currencyCode} />
                 </TableCell>
             </TableRow>
             <TableRow>
@@ -58,13 +45,9 @@ export function OrderTableTotals({ order, columnCount }: Readonly<OrderTableTota
                     <Trans>Total</Trans>
                 </TableCell>
                 <TableCell colSpan={1} className="h-12 font-bold">
-                    <MoneyGrossNet
-                        priceWithTax={order.totalWithTax}
-                        price={order.total}
-                        currencyCode={currencyCode}
-                    />
+                    <MoneyGrossNet priceWithTax={order.totalWithTax} price={order.total} currencyCode={currencyCode} />
                 </TableCell>
             </TableRow>
         </>
-    );
-}
+    )
+}

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

@@ -1,6 +1,6 @@
-import { VendureImage } from '@/vdb/components/shared/vendure-image.js';
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/vdb/components/ui/table.js';
-import { ResultOf } from '@/vdb/graphql/graphql.js';
+import { VendureImage } from '@/components/shared/vendure-image.js';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table.js';
+import { ResultOf } from '@/graphql/graphql.js';
 import {
     ColumnDef,
     flexRender,
@@ -20,7 +20,7 @@ export interface OrderTableProps {
     order: OrderFragment;
 }
 
-export function OrderTable({ order }: Readonly<OrderTableProps>) {
+export function OrderTable({ order }: OrderTableProps) {
     const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});
 
     const currencyCode = order.currencyCode;

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

@@ -1,40 +1,39 @@
-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 '@/vdb/lib/trans.js';
-import { Order } from '../utils/order-types.js';
+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 }: Readonly<{ order: Order }>) {
+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>
+    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>
-                </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>
-    );
-}
+                ))}
+            </TableBody>
+        </Table>
+    </div>
+}

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

@@ -1,29 +1,29 @@
-import { LabeledData } from '@/vdb/components/labeled-data.js';
-import { ResultOf } from '@/vdb/graphql/graphql.js';
-import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/vdb/components/ui/collapsible.js';
-import { ChevronDown } from 'lucide-react';
-import { Trans } from '@/vdb/lib/trans.js';
+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';
-import { JsonEditor } from 'json-edit-react';
 
 type PaymentDetailsProps = {
     payment: ResultOf<typeof paymentWithRefundsFragment>;
     currencyCode: string;
 };
 
-export function PaymentDetails({ payment, currencyCode }: Readonly<PaymentDetailsProps>) {
+export function PaymentDetails({ payment, currencyCode }: PaymentDetailsProps) {
     const { formatCurrency, formatDate } = useLocalFormat();
     const t = (key: string) => key;
 
     return (
-        <div className="space-y-1 p-3 border rounded-md">
+        <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
@@ -32,15 +32,30 @@ export function PaymentDetails({ payment, currencyCode }: Readonly<PaymentDetail
                     className="text-destructive"
                 />
             )}
-            <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>
+
+            <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>
     );
 }

package/src/app/routes/_authenticated/_orders/components/shipping-method-selector.tsx

@@ -1,12 +1,10 @@
-import { Money } from '@/vdb/components/data-display/money.js';
-import { Card, CardContent, CardHeader, CardTitle } from '@/vdb/components/ui/card.js';
-import { ResultOf } from '@/vdb/graphql/graphql.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card.js';
+import { Money } from '@/components/data-display/money.js';
+import { Trans } from '@/lib/trans.js';
 import { draftOrderEligibleShippingMethodsDocument } from '../orders.graphql.js';
+import { ResultOf } from '@/graphql/graphql.js';
 
-type ShippingMethodQuote = ResultOf<
-    typeof draftOrderEligibleShippingMethodsDocument
->['eligibleShippingMethodsForDraftOrder'][number];
+type ShippingMethodQuote = ResultOf<typeof draftOrderEligibleShippingMethodsDocument>['eligibleShippingMethodsForDraftOrder'][number];
 
 interface ShippingMethodSelectorProps {
     eligibleShippingMethods: ShippingMethodQuote[];
@@ -15,50 +13,53 @@ interface ShippingMethodSelectorProps {
     onSelect: (shippingMethodId: string) => void;
 }
 
-export function ShippingMethodSelector({
-    eligibleShippingMethods,
+export function ShippingMethodSelector({ 
+    eligibleShippingMethods, 
     selectedShippingMethodId,
     currencyCode,
-    onSelect,
-}: Readonly<ShippingMethodSelectorProps>) {
+    onSelect 
+}: ShippingMethodSelectorProps) {
     return (
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-            {eligibleShippingMethods?.length ? (
-                eligibleShippingMethods.map(method => (
-                    <Card
-                        key={method.id}
-                        className={`cursor-pointer hover:bg-muted/50 transition-colors border-2 border-transparent ${
-                            selectedShippingMethodId === method.id ? 'border-primary' : ''
-                        }`}
-                        onClick={() => onSelect(method.id)}
-                    >
-                        <CardHeader className="pb-2">
-                            <CardTitle className="">
-                                <Trans>{method.name}</Trans>
-                            </CardTitle>
-                        </CardHeader>
-                        <CardContent>
-                            <div className="space-y-2">
-                                {method.description && (
-                                    <p className="text-sm text-muted-foreground">
-                                        <Trans>{method.description}</Trans>
-                                    </p>
-                                )}
-                                <div className="flex items-center justify-between">
-                                    <span className="text-sm font-medium">
-                                        <Trans>Price</Trans>
-                                    </span>
-                                    <Money value={method.priceWithTax} currencyCode={currencyCode} />
-                                </div>
+            {eligibleShippingMethods?.length ? eligibleShippingMethods.map(method => (
+                <Card 
+                    key={method.id} 
+                    className={`cursor-pointer hover:bg-muted/50 transition-colors border-2 border-transparent ${
+                        selectedShippingMethodId === method.id 
+                            ? 'border-primary' 
+                            : ''
+                    }`}
+                    onClick={() => onSelect(method.id)}
+                >
+                    <CardHeader className="pb-2">
+                        <CardTitle className="">
+                            <Trans>{method.name}</Trans>
+                        </CardTitle>
+                    </CardHeader>
+                    <CardContent>
+                        <div className="space-y-2">
+                            {method.description && (
+                                <p className="text-sm text-muted-foreground">
+                                    <Trans>{method.description}</Trans>
+                                </p>
+                            )}
+                            <div className="flex items-center justify-between">
+                                <span className="text-sm font-medium">
+                                    <Trans>Price</Trans>
+                                </span>
+                                <Money 
+                                    value={method.priceWithTax} 
+                                    currencyCode={currencyCode} 
+                                />
                             </div>
-                        </CardContent>
-                    </Card>
-                ))
-            ) : (
+                        </div>
+                    </CardContent>
+                </Card>
+            )) : (
                 <div className="col-span-full text-center text-muted-foreground">
                     <Trans>No shipping methods available</Trans>
                 </div>
             )}
         </div>
     );
-}
+} 

package/src/app/routes/_authenticated/_orders/orders.graphql.ts

@@ -1,9 +1,5 @@
-import {
-    assetFragment,
-    configurableOperationDefFragment,
-    errorResultFragment,
-} from '@/vdb/graphql/fragments.js';
-import { graphql } from '@/vdb/graphql/graphql.js';
+import { assetFragment, errorResultFragment } from '@/graphql/fragments.js';
+import { graphql } from '@/graphql/graphql.js';
 
 export const orderListDocument = graphql(`
     query GetOrders($options: OrderListOptions) {
@@ -24,6 +20,7 @@ export const orderListDocument = graphql(`
                 total
                 totalWithTax
                 currencyCode
+
                 shippingLines {
                     shippingMethod {
                         name
@@ -511,98 +508,3 @@ export const transitionOrderToStateDocument = graphql(
     `,
     [errorResultFragment],
 );
-
-export const paymentMethodsDocument = graphql(`
-    query GetPaymentMethods($options: PaymentMethodListOptions!) {
-        paymentMethods(options: $options) {
-            items {
-                id
-                createdAt
-                updatedAt
-                name
-                code
-                description
-                enabled
-            }
-            totalItems
-        }
-    }
-`);
-
-export const addManualPaymentToOrderDocument = graphql(
-    `
-        mutation AddManualPaymentToOrder($input: ManualPaymentInput!) {
-            addManualPaymentToOrder(input: $input) {
-                __typename
-                ... on Order {
-                    id
-                    state
-                    payments {
-                        id
-                        amount
-                        method
-                        state
-                    }
-                }
-                ...ErrorResult
-            }
-        }
-    `,
-    [errorResultFragment],
-);
-
-export const fulfillmentHandlersDocument = graphql(
-    `
-        query GetFulfillmentHandlers {
-            fulfillmentHandlers {
-                ...ConfigurableOperationDef
-            }
-        }
-    `,
-    [configurableOperationDefFragment],
-);
-
-export const fulfillOrderDocument = graphql(
-    `
-        mutation FulfillOrder($input: FulfillOrderInput!) {
-            addFulfillmentToOrder(input: $input) {
-                __typename
-                ... on Fulfillment {
-                    id
-                    state
-                    method
-                    trackingCode
-                    lines {
-                        orderLineId
-                        quantity
-                    }
-                }
-                ...ErrorResult
-            }
-        }
-    `,
-    [errorResultFragment],
-);
-
-export const transitionFulfillmentToStateDocument = graphql(
-    `
-        mutation TransitionFulfillmentToState($id: ID!, $state: String!) {
-            transitionFulfillmentToState(id: $id, state: $state) {
-                __typename
-                ... on Fulfillment {
-                    id
-                    state
-                    nextStates
-                    method
-                    trackingCode
-                    lines {
-                        orderLineId
-                        quantity
-                    }
-                }
-                ...ErrorResult
-            }
-        }
-    `,
-    [errorResultFragment],
-);

package/src/app/routes/_authenticated/_orders/orders.tsx

@@ -1,17 +1,17 @@
-import { Money } from '@/vdb/components/data-display/money.js';
-import { DetailPageButton } from '@/vdb/components/shared/detail-page-button.js';
-import { Badge } from '@/vdb/components/ui/badge.js';
-import { Button } from '@/vdb/components/ui/button.js';
-import { PageActionBarRight } from '@/vdb/framework/layout-engine/page-layout.js';
-import { ListPage } from '@/vdb/framework/page/list-page.js';
-import { api } from '@/vdb/graphql/api.js';
-import { ResultOf } from '@/vdb/graphql/graphql.js';
-import { useServerConfig } from '@/vdb/hooks/use-server-config.js';
-import { Trans } from '@/vdb/lib/trans.js';
-import { useMutation } from '@tanstack/react-query';
+import { Money } from '@/components/data-display/money.js';
+import { DetailPageButton } from '@/components/shared/detail-page-button.js';
+import { Badge } from '@/components/ui/badge.js';
+import { Button } from '@/components/ui/button.js';
+import { ListPage } from '@/framework/page/list-page.js';
+import { Trans } from '@/lib/trans.js';
 import { createFileRoute, Link, useNavigate } from '@tanstack/react-router';
-import { PlusIcon } from 'lucide-react';
 import { createDraftOrderDocument, orderListDocument } from './orders.graphql.js';
+import { useServerConfig } from '@/hooks/use-server-config.js';
+import { PageActionBarRight } from '@/framework/layout-engine/page-layout.js';
+import { PlusIcon } from 'lucide-react';
+import { useMutation } from '@tanstack/react-query';
+import { api } from '@/graphql/api.js';
+import { ResultOf } from '@/graphql/graphql.js';
 
 export const Route = createFileRoute('/_authenticated/_orders/orders')({
     component: OrderListPage,
@@ -25,8 +25,8 @@ function OrderListPage() {
         mutationFn: api.mutate(createDraftOrderDocument),
         onSuccess: (result: ResultOf<typeof createDraftOrderDocument>) => {
             navigate({ to: '/orders/draft/$id', params: { id: result.createDraftOrder.id } });
-        },
-    });
+        }
+    })
     return (
         <ListPage
             pageId="order-list"
@@ -121,13 +121,12 @@ function OrderListPage() {
             facetedFilters={{
                 state: {
                     title: 'State',
-                    options:
-                        serverConfig?.orderProcess.map(state => {
-                            return {
-                                label: state.name,
-                                value: state.name,
-                            };
-                        }) ?? [],
+                    options: serverConfig?.orderProcess.map(state => {
+                        return {
+                            label: state.name,
+                            value: state.name,
+                        }
+                    }) ?? [],
                 },
             }}
         >