@vendure/dashboard 3.3.6-master-202507090236 → 3.3.6-master-202507110238

package/dist/plugin/tests/barrel-exports.spec.js

@@ -1,4 +1,4 @@
-import { join } from 'path';
+import { join } from 'node:path';
 import { describe, expect, it } from 'vitest';
 import { loadVendureConfig } from '../utils/config-loader.js';
 describe('detecting plugins in barrel exports', () => {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vendure/dashboard",
   "private": false,
-  "version": "3.3.6-master-202507090236",
+  "version": "3.3.6-master-202507110238",
   "type": "module",
   "repository": {
     "type": "git",
@@ -86,8 +86,8 @@
     "@types/react-dom": "^19.0.4",
     "@types/react-grid-layout": "^1.3.5",
     "@uidotdev/usehooks": "^2.4.1",
-    "@vendure/common": "^3.3.6-master-202507090236",
-    "@vendure/core": "^3.3.6-master-202507090236",
+    "@vendure/common": "^3.3.6-master-202507110238",
+    "@vendure/core": "^3.3.6-master-202507110238",
     "@vitejs/plugin-react": "^4.3.4",
     "awesome-graphql-client": "^2.1.0",
     "class-variance-authority": "^0.7.1",
@@ -130,5 +130,5 @@
     "lightningcss-linux-arm64-musl": "^1.29.3",
     "lightningcss-linux-x64-musl": "^1.29.1"
   },
-  "gitHead": "df60d656c924e7574df61467ef1bbdb9a0221dcc"
+  "gitHead": "48140d95d510219816f76bd5d53af779e67011f3"
 }

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

@@ -1,3 +1,4 @@
+import { SingleRelationInput } from '@/vdb/components/data-input/relation-input.js';
 import { ProductVariantSelector } from '@/vdb/components/shared/product-variant-selector.js';
 import { VendureImage } from '@/vdb/components/shared/vendure-image.js';
 import { Button } from '@/vdb/components/ui/button.js';
@@ -14,8 +15,8 @@ import {
 } from '@tanstack/react-table';
 import { Trash2 } from 'lucide-react';
 import { useState } from 'react';
-import { UseFormReturn } from 'react-hook-form';
 import {
+    couponCodeSelectorPromotionListDocument,
     draftOrderEligibleShippingMethodsDocument,
     orderDetailDocument,
     orderLineFragment,
@@ -35,13 +36,20 @@ type ShippingMethodQuote = ResultOf<
 export interface OrderTableProps {
     order: OrderFragment;
     eligibleShippingMethods: ShippingMethodQuote[];
-    onAddItem: (event: { productVariantId: string }) => void;
+    onAddItem: (variant: {
+        productVariantId: string;
+        productVariantName: string;
+        sku: string;
+        productAsset: any;
+        price?: any;
+        priceWithTax?: any;
+    }) => void;
     onAdjustLine: (event: { lineId: string; quantity: number; customFields: Record<string, any> }) => void;
     onRemoveLine: (event: { lineId: string }) => void;
     onSetShippingMethod: (event: { shippingMethodId: string }) => void;
     onApplyCouponCode: (event: { couponCode: string }) => void;
     onRemoveCouponCode: (event: { couponCode: string }) => void;
-    orderLineForm: UseFormReturn<any>;
+    displayTotals?: boolean;
 }
 
 export function EditOrderTable({
@@ -53,14 +61,11 @@ export function EditOrderTable({
     onSetShippingMethod,
     onApplyCouponCode,
     onRemoveCouponCode,
-    orderLineForm,
+    displayTotals = true,
 }: Readonly<OrderTableProps>) {
     const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});
-    const [couponCode, setCouponCode] = useState('');
-
     const currencyCode = order.currencyCode;
-
-    const columns: ColumnDef<OrderLineFragment>[] = [
+    const columns: ColumnDef<OrderLineFragment & { customFields?: Record<string, any> }>[] = [
         {
             header: 'Image',
             accessorKey: 'featuredAsset',
@@ -99,7 +104,7 @@ export function EditOrderTable({
                                 onAdjustLine({
                                     lineId: row.original.id,
                                     quantity: e.target.valueAsNumber,
-                                    customFields: row.original.customFields,
+                                    customFields: row.original.customFields ?? {},
                                 })
                             }
                         />
@@ -120,7 +125,7 @@ export function EditOrderTable({
                                         customFields: customFields,
                                     });
                                 }}
-                                form={orderLineForm}
+                                value={row.original.customFields}
                             />
                         )}
                     </div>
@@ -189,11 +194,7 @@ export function EditOrderTable({
                             <TableCell colSpan={columns.length} className="h-12">
                                 <div className="my-4 flex justify-center">
                                     <div className="max-w-lg">
-                                        <ProductVariantSelector
-                                            onProductVariantIdChange={variantId => {
-                                                onAddItem({ productVariantId: variantId });
-                                            }}
-                                        />
+                                        <ProductVariantSelector onProductVariantSelect={onAddItem} />
                                     </div>
                                 </div>
                             </TableCell>
@@ -210,27 +211,7 @@ export function EditOrderTable({
                         </TableRow>
                         <TableRow>
                             <TableCell colSpan={columns.length} className="h-12">
-                                <div className="flex flex-col gap-4">
-                                    <div className="flex gap-2">
-                                        <Input
-                                            type="text"
-                                            placeholder="Coupon code"
-                                            value={couponCode}
-                                            onChange={e => setCouponCode(e.target.value)}
-                                            onKeyDown={e => {
-                                                if (e.key === 'Enter') {
-                                                    onApplyCouponCode({ couponCode });
-                                                }
-                                            }}
-                                        />
-                                        <Button
-                                            type="button"
-                                            onClick={() => onApplyCouponCode({ couponCode })}
-                                            disabled={!couponCode}
-                                        >
-                                            <Trans>Apply</Trans>
-                                        </Button>
-                                    </div>
+                                <div className="flex gap-4">
                                     {order.couponCodes?.length > 0 && (
                                         <div className="flex flex-wrap gap-2">
                                             {order.couponCodes.map(code => (
@@ -254,10 +235,22 @@ export function EditOrderTable({
                                             ))}
                                         </div>
                                     )}
+                                    <SingleRelationInput
+                                        config={{
+                                            listQuery: couponCodeSelectorPromotionListDocument,
+                                            idKey: 'couponCode',
+                                            labelKey: 'couponCode',
+                                            placeholder: 'Search coupon codes...',
+                                            label: (item: any) => `${item.couponCode} (${item.name})`,
+                                        }}
+                                        value={''}
+                                        selectorLabel={<Trans>Add coupon code</Trans>}
+                                        onChange={code => onApplyCouponCode({ couponCode: code })}
+                                    />
                                 </div>
                             </TableCell>
                         </TableRow>
-                        <OrderTableTotals order={order} columnCount={columns.length} />
+                        {displayTotals && <OrderTableTotals order={order} columnCount={columns.length} />}
                     </TableBody>
                 </Table>
             </div>

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

@@ -1,12 +1,5 @@
 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 {
-    DropdownMenu,
-    DropdownMenuContent,
-    DropdownMenuItem,
-    DropdownMenuTrigger,
-} from '@/vdb/components/ui/dropdown-menu.js';
 import { api } from '@/vdb/graphql/api.js';
 import { ResultOf } from '@/vdb/graphql/graphql.js';
 import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
@@ -19,6 +12,7 @@ import {
     orderDetailFragment,
     transitionFulfillmentToStateDocument,
 } from '../orders.graphql.js';
+import { getTypeForState, StateTransitionControl } from './state-transition-control.js';
 
 type Order = NonNullable<ResultOf<typeof orderDetailFragment>>;
 
@@ -78,6 +72,30 @@ export function FulfillmentDetails({ order, fulfillment, onSuccess }: Readonly<F
         });
     };
 
+    const getFulfillmentActions = () => {
+        const actions = [];
+
+        const suggested = nextSuggestedState();
+        if (suggested) {
+            actions.push({
+                label: `Transition to ${suggested}`,
+                onClick: () => handleStateTransition(suggested),
+                disabled: transitionFulfillmentMutation.isPending,
+            });
+        }
+
+        nextOtherStates().forEach(state => {
+            actions.push({
+                label: `Transition to ${state}`,
+                type: getTypeForState(state),
+                onClick: () => handleStateTransition(state),
+                disabled: transitionFulfillmentMutation.isPending,
+            });
+        });
+
+        return actions;
+    };
+
     return (
         <div className="space-y-1 p-3 border rounded-md">
             <div className="space-y-1">
@@ -101,7 +119,7 @@ export function FulfillmentDetails({ order, fulfillment, onSuccess }: Readonly<F
                             <ChevronDown className="h-4 w-4 transition-transform duration-200 data-[state=open]:rotate-180" />
                         </CollapsibleTrigger>
                         <CollapsibleContent className="mt-2 space-y-1">
-                            {fulfillment.lines.map((line) => {
+                            {fulfillment.lines.map(line => {
                                 const orderLine = orderLinesMap.get(line.orderLineId);
                                 const productName = orderLine?.productVariant?.name ?? 'Unknown product';
                                 const sku = orderLine?.productVariant?.sku;
@@ -123,51 +141,13 @@ export function FulfillmentDetails({ order, fulfillment, onSuccess }: Readonly<F
                 </div>
             )}
 
-            {fulfillment.nextStates.length > 0 && (
-                <div className="mt-3 pt-3 border-t">
-                    <div className="flex">
-                        <Button
-                            variant="outline"
-                            size="sm"
-                            disabled={transitionFulfillmentMutation.isPending}
-                            className="rounded-r-none flex-1 justify-start shadow-none"
-                        >
-                            <Trans>State: {fulfillment.state}</Trans>
-                        </Button>
-                        <DropdownMenu>
-                            <DropdownMenuTrigger asChild>
-                                <Button
-                                    variant="outline"
-                                    size="sm"
-                                    disabled={transitionFulfillmentMutation.isPending}
-                                    className="rounded-l-none border-l-0 shadow-none"
-                                >
-                                    <ChevronDown className="h-4 w-4" />
-                                </Button>
-                            </DropdownMenuTrigger>
-                            <DropdownMenuContent align="end">
-                                {nextSuggestedState() && (
-                                    <DropdownMenuItem
-                                        onClick={() => handleStateTransition(nextSuggestedState()!)}
-                                        disabled={transitionFulfillmentMutation.isPending}
-                                    >
-                                        <Trans>Transition to {nextSuggestedState()}</Trans>
-                                    </DropdownMenuItem>
-                                )}
-                                {nextOtherStates().map(state => (
-                                    <DropdownMenuItem
-                                        key={state}
-                                        onClick={() => handleStateTransition(state)}
-                                        disabled={transitionFulfillmentMutation.isPending}
-                                    >
-                                        <Trans>Transition to {state}</Trans>
-                                    </DropdownMenuItem>
-                                ))}
-                            </DropdownMenuContent>
-                        </DropdownMenu>
-                    </div>
-                </div>
-            )}
+            <div className="mt-3 pt-3 border-t">
+                <StateTransitionControl
+                    currentState={fulfillment.state}
+                    actions={getFulfillmentActions()}
+                    isLoading={transitionFulfillmentMutation.isPending}
+                />
+            </div>
         </div>
     );
 }

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

@@ -2,13 +2,13 @@ import { Separator } from '@/vdb/components/ui/separator.js';
 import { ResultOf } from 'gql.tada';
 import { Globe, Phone } from 'lucide-react';
 import { orderAddressFragment } from '../orders.graphql.js';
+import { Trans } from '@/vdb/lib/trans.js';
 
-type OrderAddress = ResultOf<typeof orderAddressFragment>;
+type OrderAddress = Omit<ResultOf<typeof orderAddressFragment>, 'country'> & {
+    country: string | { code: string; name: string } | null;
+};
 
 export function OrderAddress({ address }: Readonly<{ address?: OrderAddress }>) {
-    if (!address) {
-        return null;
-    }
 
     const {
         fullName,
@@ -23,6 +23,13 @@ export function OrderAddress({ address }: Readonly<{ address?: OrderAddress }>)
         phoneNumber,
     } = address;
 
+    const countryName = typeof country === 'string' ? country : country?.name;
+    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="space-y-1 text-sm">
             {fullName && <p className="font-medium">{fullName}</p>}
@@ -36,9 +43,9 @@ export function OrderAddress({ address }: Readonly<{ address?: OrderAddress }>)
                 {country && (
                     <div className="flex items-center gap-1.5 mt-1">
                         <Globe className="h-3 w-3 text-muted-foreground" />
-                        <span>{country}</span>
-                        {countryCode && (
-                            <span className="text-xs text-muted-foreground">({countryCode})</span>
+                        <span>{countryName}</span>
+                        {countryCodeString && (
+                            <span className="text-xs text-muted-foreground">({countryCodeString})</span>
                         )}
                     </div>
                 )}

package/src/app/routes/_authenticated/_orders/components/order-line-custom-fields-form.tsx

@@ -2,17 +2,24 @@ import { CustomFieldsForm } from '@/vdb/components/shared/custom-fields-form.js'
 import { Button } from '@/vdb/components/ui/button.js';
 import { Form } from '@/vdb/components/ui/form.js';
 import { Popover, PopoverContent, PopoverTrigger } from '@/vdb/components/ui/popover.js';
+import { Trans } from '@/vdb/lib/trans.js';
 import { Settings2 } from 'lucide-react';
-import { UseFormReturn } from 'react-hook-form';
+import { useForm } from 'react-hook-form';
 
 interface OrderLineCustomFieldsFormProps {
     onUpdate: (customFieldValues: Record<string, any>) => void;
-    form: UseFormReturn<any>;
+    value: Record<string, any>;
 }
 
-export function OrderLineCustomFieldsForm({ onUpdate, form }: Readonly<OrderLineCustomFieldsFormProps>) {
+export function OrderLineCustomFieldsForm({ onUpdate, value }: Readonly<OrderLineCustomFieldsFormProps>) {
+    const form = useForm<Record<string, any>>({
+        defaultValues: {
+            customFields: value,
+        },
+    });
+
     const onSubmit = (values: any) => {
-        onUpdate(values.input?.customFields);
+        onUpdate(values.customFields);
     };
 
     return (
@@ -24,15 +31,19 @@ export function OrderLineCustomFieldsForm({ onUpdate, form }: Readonly<OrderLine
             </PopoverTrigger>
             <PopoverContent className="w-80">
                 <Form {...form}>
-                    <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
-                        <h4 className="font-medium leading-none">Custom Fields</h4>
-                        <CustomFieldsForm
-                            entityType="OrderLine"
-                            control={form.control}
-                            formPathPrefix="input"
-                        />
+                    <form
+                        onSubmit={e => {
+                            e.stopPropagation();
+                            form.handleSubmit(onSubmit)(e);
+                        }}
+                        className="space-y-4"
+                    >
+                        <h4 className="font-medium leading-none">
+                            <Trans>Custom Fields</Trans>
+                        </h4>
+                        <CustomFieldsForm entityType="OrderLine" control={form.control} />
                         <Button type="submit" className="w-full" disabled={!form.formState.isValid}>
-                            Update
+                            <Trans>Update</Trans>
                         </Button>
                     </form>
                 </Form>