@vendure/dashboard 3.5.0-minor-202510031341 → 3.5.0-minor-202510161257

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

@@ -5,7 +5,7 @@ import { Button } from '@/vdb/components/ui/button.js';
 import { Input } from '@/vdb/components/ui/input.js';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/vdb/components/ui/table.js';
 import { ResultOf } from '@/vdb/graphql/graphql.js';
-import { Trans } from '@lingui/react/macro';
+import { Trans, useLingui } from '@lingui/react/macro';
 import {
     ColumnDef,
     flexRender,
@@ -14,7 +14,7 @@ import {
     VisibilityState,
 } from '@tanstack/react-table';
 import { Trash2 } from 'lucide-react';
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import {
     couponCodeSelectorPromotionListDocument,
     draftOrderEligibleShippingMethodsDocument,
@@ -44,7 +44,11 @@ export interface OrderTableProps {
         price?: any;
         priceWithTax?: any;
     }) => void;
-    onAdjustLine: (event: { lineId: string; quantity: number; customFields: Record<string, any> }) => void;
+    onAdjustLine: (event: {
+        lineId: string;
+        quantity: number;
+        customFields: Record<string, any> | undefined;
+    }) => void;
     onRemoveLine: (event: { lineId: string }) => void;
     onSetShippingMethod: (event: { shippingMethodId: string }) => void;
     onApplyCouponCode: (event: { couponCode: string }) => void;
@@ -53,95 +57,116 @@ export interface OrderTableProps {
 }
 
 export function EditOrderTable({
-                                   order,
-                                   eligibleShippingMethods,
-                                   onAddItem,
-                                   onAdjustLine,
-                                   onRemoveLine,
-                                   onSetShippingMethod,
-                                   onApplyCouponCode,
-                                   onRemoveCouponCode,
-                                   displayTotals = true,
-                               }: Readonly<OrderTableProps>) {
+    order,
+    eligibleShippingMethods,
+    onAddItem,
+    onAdjustLine,
+    onRemoveLine,
+    onSetShippingMethod,
+    onApplyCouponCode,
+    onRemoveCouponCode,
+    displayTotals = true,
+}: Readonly<OrderTableProps>) {
     const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});
+    const { t } = useLingui();
     const currencyCode = order.currencyCode;
-    const columns: ColumnDef<OrderLineFragment & { customFields?: Record<string, any> }>[] = [
-        {
-            header: 'Image',
-            accessorKey: 'featuredAsset',
-            cell: ({ row }) => {
-                const asset = row.original.featuredAsset;
-                return <VendureImage asset={asset} preset="tiny" />;
+    const columns: ColumnDef<OrderLineFragment & { customFields?: Record<string, any> }>[] = useMemo(
+        () => [
+            {
+                header: '',
+                accessorKey: 'featuredAsset',
+                cell: ({ row }) => {
+                    const asset = row.original.featuredAsset;
+                    const removing = row.original.quantity === 0;
+                    return (
+                        <VendureImage className={removing ? 'opacity-50' : ''} asset={asset} preset="tiny" />
+                    );
+                },
             },
-        },
-        {
-            header: 'Product',
-            accessorKey: 'productVariant.name',
-        },
-        {
-            header: 'SKU',
-            accessorKey: 'productVariant.sku',
-        },
-        {
-            header: 'Unit price',
-            accessorKey: 'unitPriceWithTax',
-            cell: ({ row }) => {
-                const value = row.original.unitPriceWithTax;
-                const netValue = row.original.unitPrice;
-                return <MoneyGrossNet priceWithTax={value} price={netValue} currencyCode={currencyCode} />;
+            {
+                header: t`Product`,
+                accessorKey: 'productVariant.name',
+                cell: ({ row }) => {
+                    const value = row.original.productVariant.name;
+                    const removing = row.original.quantity === 0;
+                    return <div className={removing ? 'text-muted-foreground' : ''}>{value}</div>;
+                },
             },
-        },
-        {
-            header: 'Quantity',
-            accessorKey: 'quantity',
-            cell: ({ row }) => {
-                return (
-                    <div className="flex gap-2">
-                        <Input
-                            type="number"
-                            value={row.original.quantity}
-                            onChange={e =>
-                                onAdjustLine({
-                                    lineId: row.original.id,
-                                    quantity: e.target.valueAsNumber,
-                                    customFields: row.original.customFields ?? {},
-                                })
-                            }
-                        />
-                        <Button
-                            variant="outline"
-                            type="button"
-                            size="icon"
-                            onClick={() => onRemoveLine({ lineId: row.original.id })}
-                        >
-                            <Trash2 />
-                        </Button>
-                        {row.original.customFields && (
-                            <OrderLineCustomFieldsForm
-                                onUpdate={customFields => {
+            {
+                header: t`SKU`,
+                accessorKey: 'productVariant.sku',
+            },
+            {
+                header: t`Unit price`,
+                accessorKey: 'unitPriceWithTax',
+                cell: ({ row }) => {
+                    const value = row.original.unitPriceWithTax;
+                    const netValue = row.original.unitPrice;
+                    return (
+                        <MoneyGrossNet priceWithTax={value} price={netValue} currencyCode={currencyCode} />
+                    );
+                },
+            },
+            {
+                header: t`Quantity`,
+                accessorKey: 'quantity',
+                cell: ({ row }) => {
+                    return (
+                        <div className="flex gap-2">
+                            <Input
+                                type="number"
+                                value={row.original.quantity}
+                                min={0}
+                                onChange={e => {
+                                    const value = Number.isNaN(e.target.valueAsNumber)
+                                        ? 0
+                                        : e.target.valueAsNumber;
                                     onAdjustLine({
                                         lineId: row.original.id,
-                                        quantity: row.original.quantity,
-                                        customFields: customFields,
+                                        quantity: value,
+                                        customFields: row.original.customFields,
                                     });
                                 }}
-                                value={row.original.customFields}
                             />
-                        )}
-                    </div>
-                );
+                            <Button
+                                variant="outline"
+                                type="button"
+                                size="icon"
+                                disabled={row.original.quantity === 0}
+                                onClick={() => onRemoveLine({ lineId: row.original.id })}
+                            >
+                                <Trash2 />
+                            </Button>
+                            {row.original.customFields && (
+                                <OrderLineCustomFieldsForm
+                                    onUpdate={customFields => {
+                                        onAdjustLine({
+                                            lineId: row.original.id,
+                                            quantity: row.original.quantity,
+                                            customFields: customFields,
+                                        });
+                                    }}
+                                    value={row.original.customFields}
+                                />
+                            )}
+                        </div>
+                    );
+                },
             },
-        },
-        {
-            header: 'Total',
-            accessorKey: 'linePriceWithTax',
-            cell: ({ row }) => {
-                const value = row.original.linePriceWithTax;
-                const netValue = row.original.linePrice;
-                return <MoneyGrossNet priceWithTax={value} price={netValue} currencyCode={currencyCode} />;
+            {
+                header: t`Total`,
+                accessorKey: 'linePriceWithTax',
+                cell: ({ row }) => {
+                    const value = row.original.linePriceWithTax;
+                    const netValue = row.original.linePrice;
+                    return (
+                        <MoneyGrossNet priceWithTax={value} price={netValue} currencyCode={currencyCode} />
+                    );
+                },
             },
-        },
-    ];
+        ],
+        [],
+    );
 
     const data = order.lines;
 
@@ -169,9 +194,9 @@ export function EditOrderTable({
                                             {header.isPlaceholder
                                                 ? null
                                                 : flexRender(
-                                                    header.column.columnDef.header,
-                                                    header.getContext(),
-                                                )}
+                                                      header.column.columnDef.header,
+                                                      header.getContext(),
+                                                  )}
                                         </TableHead>
                                     );
                                 })}
@@ -181,14 +206,14 @@ export function EditOrderTable({
                     <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 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>
+                              ))
                             : null}
                         <TableRow>
                             <TableCell colSpan={columns.length} className="h-12">

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

@@ -1,15 +1,13 @@
-import { Separator } from '@/vdb/components/ui/separator.js';
+import { Trans } from '@lingui/react/macro';
 import { ResultOf } from 'gql.tada';
 import { Globe, Phone } from 'lucide-react';
 import { orderAddressFragment } from '../orders.graphql.js';
-import { Trans } from '@lingui/react/macro';
 
 type OrderAddress = Omit<ResultOf<typeof orderAddressFragment>, 'country'> & {
     country: string | { code: string; name: string } | null;
 };
 
 export function OrderAddress({ address }: Readonly<{ address?: OrderAddress }>) {
-
     const {
         fullName,
         company,
@@ -27,7 +25,11 @@ export function OrderAddress({ address }: Readonly<{ address?: OrderAddress }>)
     const countryCodeString = country && typeof country !== 'string' ? country?.code : countryCode;
 
     if (!address || Object.values(address).every(value => !value)) {
-        return <div className="text-sm text-muted-foreground"><Trans>No address</Trans></div>;
+        return (
+            <div className="text-sm text-muted-foreground">
+                <Trans>No address</Trans>
+            </div>
+        );
     }
 
     return (
@@ -41,7 +43,7 @@ export function OrderAddress({ address }: Readonly<{ address?: OrderAddress }>)
                 <p>{[city, province].filter(Boolean).join(', ')}</p>
                 {postalCode && <p>{postalCode}</p>}
                 {country && (
-                    <div className="flex items-center gap-1.5 mt-1">
+                    <div className="flex items-center gap-1.5">
                         <Globe className="h-3 w-3 text-muted-foreground" />
                         <span>{countryName}</span>
                         {countryCodeString && (
@@ -49,17 +51,15 @@ export function OrderAddress({ address }: Readonly<{ address?: OrderAddress }>)
                         )}
                     </div>
                 )}
+                {phoneNumber && (
+                    <>
+                        <div className="flex items-center gap-1.5">
+                            <Phone className="h-3 w-3 text-muted-foreground" />
+                            <span className="text-sm">{phoneNumber}</span>
+                        </div>
+                    </>
+                )}
             </div>
-
-            {phoneNumber && (
-                <>
-                    <Separator className="my-2" />
-                    <div className="flex items-center gap-1.5">
-                        <Phone className="h-3 w-3 text-muted-foreground" />
-                        <span className="text-sm">{phoneNumber}</span>
-                    </div>
-                </>
-            )}
         </div>
     );
 }

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

@@ -234,14 +234,14 @@ export function OrderDetailShared({
                 {/* Side Column Blocks */}
                 <PageBlock column="side" blockId="state">
                     <StateTransitionControl
-                        currentState={getTranslatedOrderState(entity?.state)}
+                        currentState={entity?.state}
                         actions={stateTransitionActions}
                         isLoading={transitionOrderToStateMutation.isPending}
                     />
                 </PageBlock>
                 <PageBlock column="side" blockId="customer" title={<Trans>Customer</Trans>}>
                     {entity?.customer ? (
-                        <Button variant="ghost" asChild>
+                        <Button variant="outline" asChild>
                             <Link to={`/customers/${entity.customer.id}`}>
                                 <User className="w-4 h-4" />
                                 {entity.customer.firstName} {entity.customer.lastName}
@@ -255,7 +255,7 @@ export function OrderDetailShared({
                     <div className="mt-4 divide-y">
                         {entity?.shippingAddress && (
                             <div className="pb-6">
-                                <div className="font-medium">
+                                <div className="font-medium mb-6">
                                     <Trans>Shipping address</Trans>
                                 </div>
                                 <OrderAddress address={entity.shippingAddress} />
@@ -263,7 +263,7 @@ export function OrderDetailShared({
                         )}
                         {entity?.billingAddress && (
                             <div className="pt-4">
-                                <div className="font-medium">
+                                <div className="font-medium mb-6">
                                     <Trans>Billing address</Trans>
                                 </div>
                                 <OrderAddress address={entity.billingAddress} />
@@ -293,7 +293,7 @@ export function OrderDetailShared({
                             ))}
                         </div>
                     ) : (
-                        <div className="text-muted-foreground text-xs font-medium p-3 border rounded-md">
+                        <div className="text-muted-foreground text-sm">
                             <Trans>No fulfillments</Trans>
                         </div>
                     )}

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

@@ -42,7 +42,8 @@ export function OrderModificationSummary({
             if (
                 orig &&
                 (adj.quantity !== orig.quantity ||
-                    JSON.stringify(adj.customFields) !== JSON.stringify((orig as any).customFields))
+                    JSON.stringify(adj.customFields) !== JSON.stringify((orig as any).customFields)) &&
+                adj.quantity > 0
             ) {
                 return {
                     orderLineId: adj.orderLineId,

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

@@ -10,40 +10,39 @@ export interface OrderTableTotalsProps {
 
 export function OrderTableTotals({ order, columnCount }: Readonly<OrderTableTotalsProps>) {
     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>
-                ))
+                      <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>
-                ))
+                      <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">

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

@@ -34,7 +34,10 @@ function createCustomizeColumns(currencyCode: string) {
             accessorKey: 'featuredAsset',
             cell: ({ row }: { row: any }) => {
                 const asset = row.original.featuredAsset;
-                return <VendureImage asset={asset} preset="tiny" />;
+                const fallbackAsset =
+                    row.original.productVariant?.featuredAsset ??
+                    row.original.productVariant?.product?.featuredAsset;
+                return <VendureImage asset={asset ?? fallbackAsset} preset="tiny" />;
             },
         },
         productVariant: {
@@ -154,14 +157,13 @@ export function OrderTable({ order, pageId }: Readonly<OrderTableProps>) {
         customizeColumns: customizeColumns as any,
         deleteMutation: undefined,
         defaultColumnOrder: columnOrder,
-        additionalColumns: {},
         includeSelectionColumn: false,
         includeActionsColumn: false,
         enableSorting: false,
     });
 
     const columnVisibility = getColumnVisibility(columns, defaultColumnVisibility, customFieldColumnNames);
-    const visibleColumnCount = Object.values(columnVisibility).filter(Boolean).length;
+    const visibleColumnCount = Object.values(columnVisibility).filter(Boolean).length - 2; // -2 for "actions" and "selection" cols
     const data = order.lines;
 
     return (

package/src/app/routes/_authenticated/_orders/components/state-transition-control.tsx

@@ -5,9 +5,10 @@ import {
     DropdownMenuItem,
     DropdownMenuTrigger,
 } from '@/vdb/components/ui/dropdown-menu.js';
-import { Trans } from '@lingui/react/macro';
+import { useDynamicTranslations } from '@/vdb/hooks/use-dynamic-translations.js';
 import { cn } from '@/vdb/lib/utils.js';
-import { EllipsisVertical, CircleDashed, CircleCheck, CircleX } from 'lucide-react';
+import { Trans } from '@lingui/react/macro';
+import { CircleCheck, CircleDashed, CircleX, EllipsisVertical } from 'lucide-react';
 
 export type StateType = 'default' | 'destructive' | 'success';
 
@@ -44,6 +45,7 @@ export function StateTransitionControl({
     actions,
     isLoading,
 }: Readonly<StateTransitionControlProps>) {
+    const { getTranslatedOrderState } = useDynamicTranslations();
     const currentStateType = getTypeForState(currentState);
     const iconForType = {
         destructive: <CircleX className="h-4 w-4 text-destructive" />,
@@ -61,9 +63,7 @@ export function StateTransitionControl({
                 title={currentState}
             >
                 <div className="flex-shrink-0">{iconForType[currentStateType]}</div>
-                <span className="truncate">
-                    {currentState}
-                </span>
+                <span className="truncate">{getTranslatedOrderState(currentState)}</span>
             </div>
             {actions.length > 0 && (
                 <DropdownMenu>
@@ -72,10 +72,7 @@ export function StateTransitionControl({
                             variant="outline"
                             size="sm"
                             disabled={isLoading}
-                            className={cn(
-                                'rounded-l-none border-l-0 shadow-none',
-                                'bg-background',
-                            )}
+                            className={cn('rounded-l-none border-l-0 shadow-none', 'bg-background')}
                         >
                             <EllipsisVertical className="h-4 w-4" />
                         </Button>

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

@@ -638,8 +638,24 @@ export const modifyOrderDocument = graphql(
         mutation ModifyOrder($input: ModifyOrderInput!) {
             modifyOrder(input: $input) {
                 __typename
-                ...OrderDetail
                 ...ErrorResult
+                ... on Order {
+                    lines {
+                        productVariant {
+                            featuredAsset {
+                                id
+                                preview
+                            }
+                            product {
+                                featuredAsset {
+                                    id
+                                    preview
+                                }
+                            }
+                        }
+                    }
+                }
+                ...OrderDetail
             }
         }
     `,