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

package/src/app/routes/_authenticated/_orders/utils/use-modify-order.ts

@@ -0,0 +1,312 @@
+import { VariablesOf } from 'gql.tada';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+
+import { modifyOrderDocument } from '../orders.graphql.js';
+
+import { AddressFragment, Order } from './order-types.js';
+
+type ModifyOrderInput = VariablesOf<typeof modifyOrderDocument>['input'];
+
+export type ProductVariantInfo = {
+    productVariantId: string;
+    productVariantName: string;
+    sku: string;
+    productAsset: {
+        preview: string;
+    };
+    price?: number;
+    priceWithTax?: number;
+};
+
+export interface UseModifyOrderReturn {
+    modifyOrderInput: ModifyOrderInput;
+    addedVariants: Map<string, ProductVariantInfo>;
+    addItem: (variant: ProductVariantInfo) => void;
+    adjustLine: (params: {
+        lineId: string;
+        quantity: number;
+        customFields: Record<string, any> | undefined;
+    }) => void;
+    removeLine: (params: { lineId: string }) => void;
+    setShippingMethod: (params: { shippingMethodId: string }) => void;
+    applyCouponCode: (params: { couponCode: string }) => void;
+    removeCouponCode: (params: { couponCode: string }) => void;
+    updateShippingAddress: (address: AddressFragment) => void;
+    updateBillingAddress: (address: AddressFragment) => void;
+    hasModifications: boolean;
+}
+
+/**
+ * Custom hook to manage order modification state and operations
+ */
+export function useModifyOrder(order: Order | null | undefined): UseModifyOrderReturn {
+    const [modifyOrderInput, setModifyOrderInput] = useState<ModifyOrderInput>({
+        orderId: '',
+        addItems: [],
+        adjustOrderLines: [],
+        surcharges: [],
+        note: '',
+        couponCodes: [],
+        options: {
+            recalculateShipping: true,
+        },
+        dryRun: true,
+    });
+
+    const [addedVariants, setAddedVariants] = useState<Map<string, ProductVariantInfo>>(new Map());
+
+    // Sync orderId and couponCodes when order changes
+    useEffect(() => {
+        setModifyOrderInput(prev => ({
+            ...prev,
+            orderId: order?.id ?? '',
+            couponCodes: order?.couponCodes ?? [],
+        }));
+    }, [order?.id]);
+
+    // Add item or increment existing line
+    const addItem = useCallback(
+        (variant: ProductVariantInfo) => {
+            setModifyOrderInput(prev => {
+                const existingLine = order?.lines.find(
+                    line => line.productVariant.id === variant.productVariantId,
+                );
+
+                if (existingLine) {
+                    const existingAdjustment = prev.adjustOrderLines?.find(
+                        adj => adj.orderLineId === existingLine.id,
+                    );
+
+                    if (existingAdjustment) {
+                        const newQuantity = existingAdjustment.quantity + 1;
+
+                        // If back to original quantity, remove from adjustments
+                        if (newQuantity === existingLine.quantity) {
+                            return {
+                                ...prev,
+                                adjustOrderLines: (prev.adjustOrderLines ?? []).filter(
+                                    adj => adj.orderLineId !== existingLine.id,
+                                ),
+                            };
+                        }
+
+                        return {
+                            ...prev,
+                            adjustOrderLines:
+                                prev.adjustOrderLines?.map(adj =>
+                                    adj.orderLineId === existingLine.id
+                                        ? { ...adj, quantity: newQuantity }
+                                        : adj,
+                                ) ?? [],
+                        };
+                    } else {
+                        return {
+                            ...prev,
+                            adjustOrderLines: [
+                                ...(prev.adjustOrderLines ?? []),
+                                { orderLineId: existingLine.id, quantity: existingLine.quantity + 1 },
+                            ],
+                        };
+                    }
+                } else {
+                    return {
+                        ...prev,
+                        addItems: [
+                            ...(prev.addItems ?? []),
+                            { productVariantId: variant.productVariantId, quantity: 1 },
+                        ],
+                    };
+                }
+            });
+
+            setAddedVariants(prev => {
+                const newMap = new Map(prev);
+                newMap.set(variant.productVariantId, variant);
+                return newMap;
+            });
+        },
+        [order],
+    );
+
+    // Adjust line quantity or custom fields
+    const adjustLine = useCallback(
+        ({
+            lineId,
+            quantity,
+            customFields,
+        }: {
+            lineId: string;
+            quantity: number;
+            customFields: Record<string, any> | undefined;
+        }) => {
+            if (lineId.startsWith('added-')) {
+                const productVariantId = lineId.replace('added-', '');
+                setModifyOrderInput(prev => ({
+                    ...prev,
+                    addItems: (prev.addItems ?? []).map(item =>
+                        item.productVariantId === productVariantId ? { ...item, quantity } : item,
+                    ),
+                }));
+            } else {
+                let normalizedCustomFields: Record<string, any> | undefined = customFields;
+                if (normalizedCustomFields) {
+                    delete normalizedCustomFields.__entityId__;
+                }
+                if (normalizedCustomFields && Object.keys(normalizedCustomFields).length === 0) {
+                    normalizedCustomFields = undefined;
+                }
+
+                setModifyOrderInput(prev => {
+                    const originalLine = order?.lines.find(l => l.id === lineId);
+                    const isBackToOriginal = originalLine && originalLine.quantity === quantity;
+
+                    const originalCustomFields = (originalLine as any)?.customFields;
+                    const customFieldsChanged =
+                        JSON.stringify(normalizedCustomFields) !== JSON.stringify(originalCustomFields);
+
+                    const existing = (prev.adjustOrderLines ?? []).find(l => l.orderLineId === lineId);
+
+                    // If back to original and custom fields unchanged, remove from adjustments
+                    if (isBackToOriginal && !customFieldsChanged) {
+                        return {
+                            ...prev,
+                            adjustOrderLines: (prev.adjustOrderLines ?? []).filter(
+                                l => l.orderLineId !== lineId,
+                            ),
+                        };
+                    }
+
+                    const adjustOrderLines = existing
+                        ? (prev.adjustOrderLines ?? []).map(l =>
+                              l.orderLineId === lineId
+                                  ? { ...l, quantity, customFields: normalizedCustomFields }
+                                  : l,
+                          )
+                        : [
+                              ...(prev.adjustOrderLines ?? []),
+                              { orderLineId: lineId, quantity, customFields: normalizedCustomFields },
+                          ];
+                    return { ...prev, adjustOrderLines };
+                });
+            }
+        },
+        [order],
+    );
+
+    // Remove line
+    const removeLine = useCallback(({ lineId }: { lineId: string }) => {
+        if (lineId.startsWith('added-')) {
+            const productVariantId = lineId.replace('added-', '');
+            setModifyOrderInput(prev => ({
+                ...prev,
+                addItems: (prev.addItems ?? []).filter(item => item.productVariantId !== productVariantId),
+            }));
+            setAddedVariants(prev => {
+                const newMap = new Map(prev);
+                newMap.delete(productVariantId);
+                return newMap;
+            });
+        } else {
+            setModifyOrderInput(prev => {
+                const existingAdjustment = (prev.adjustOrderLines ?? []).find(l => l.orderLineId === lineId);
+                const adjustOrderLines = existingAdjustment
+                    ? (prev.adjustOrderLines ?? []).map(l =>
+                          l.orderLineId === lineId ? { ...l, quantity: 0 } : l,
+                      )
+                    : [...(prev.adjustOrderLines ?? []), { orderLineId: lineId, quantity: 0 }];
+                return {
+                    ...prev,
+                    adjustOrderLines,
+                };
+            });
+        }
+    }, []);
+
+    // Set shipping method
+    const setShippingMethod = useCallback(({ shippingMethodId }: { shippingMethodId: string }) => {
+        setModifyOrderInput(prev => ({
+            ...prev,
+            shippingMethodIds: [shippingMethodId],
+        }));
+    }, []);
+
+    // Apply coupon code
+    const applyCouponCode = useCallback(({ couponCode }: { couponCode: string }) => {
+        setModifyOrderInput(prev => ({
+            ...prev,
+            couponCodes: prev.couponCodes?.includes(couponCode)
+                ? prev.couponCodes
+                : [...(prev.couponCodes ?? []), couponCode],
+        }));
+    }, []);
+
+    // Remove coupon code
+    const removeCouponCode = useCallback(({ couponCode }: { couponCode: string }) => {
+        setModifyOrderInput(prev => ({
+            ...prev,
+            couponCodes: (prev.couponCodes ?? []).filter(code => code !== couponCode),
+        }));
+    }, []);
+
+    // Update shipping address
+    const updateShippingAddress = useCallback((address: AddressFragment) => {
+        setModifyOrderInput(prev => ({
+            ...prev,
+            updateShippingAddress: {
+                streetLine1: address.streetLine1,
+                streetLine2: address.streetLine2,
+                city: address.city,
+                countryCode: address.country.code,
+                fullName: address.fullName,
+                postalCode: address.postalCode,
+                province: address.province,
+                company: address.company,
+                phoneNumber: address.phoneNumber,
+            },
+        }));
+    }, []);
+
+    // Update billing address
+    const updateBillingAddress = useCallback((address: AddressFragment) => {
+        setModifyOrderInput(prev => ({
+            ...prev,
+            updateBillingAddress: {
+                streetLine1: address.streetLine1,
+                streetLine2: address.streetLine2,
+                city: address.city,
+                countryCode: address.country.code,
+                fullName: address.fullName,
+                postalCode: address.postalCode,
+                province: address.province,
+                company: address.company,
+                phoneNumber: address.phoneNumber,
+            },
+        }));
+    }, []);
+
+    // Check if there are modifications
+    const hasModifications = useMemo(() => {
+        return (
+            (modifyOrderInput.addItems?.length ?? 0) > 0 ||
+            (modifyOrderInput.adjustOrderLines?.length ?? 0) > 0 ||
+            (modifyOrderInput.couponCodes?.length ?? 0) > 0 ||
+            (modifyOrderInput.shippingMethodIds?.length ?? 0) > 0 ||
+            !!modifyOrderInput.updateShippingAddress ||
+            !!modifyOrderInput.updateBillingAddress
+        );
+    }, [modifyOrderInput]);
+
+    return {
+        modifyOrderInput,
+        addedVariants,
+        addItem,
+        adjustLine,
+        removeLine,
+        setShippingMethod,
+        applyCouponCode,
+        removeCouponCode,
+        updateShippingAddress,
+        updateBillingAddress,
+        hasModifications,
+    };
+}

package/src/app/routes/_authenticated/_payment-methods/payment-methods.graphql.ts

@@ -15,8 +15,8 @@ export const paymentMethodItemFragment = graphql(`
 
 export const paymentMethodListQuery = graphql(
     `
-        query PaymentMethodList {
-            paymentMethods {
+        query PaymentMethodList($options: PaymentMethodListOptions) {
+            paymentMethods(options: $options) {
                 items {
                     ...PaymentMethodItem
                 }

package/src/app/routes/_authenticated/_payment-methods/payment-methods.tsx

@@ -1,6 +1,7 @@
 import { BooleanDisplayBadge } from '@/vdb/components/data-display/boolean.js';
 import { DetailPageButton } from '@/vdb/components/shared/detail-page-button.js';
 import { PermissionGuard } from '@/vdb/components/shared/permission-guard.js';
+import { RichTextDescriptionCell } from '@/vdb/components/shared/table-cell/order-table-cell-components.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';
@@ -53,6 +54,9 @@ function PaymentMethodListPage() {
                 enabled: {
                     cell: ({ row }) => <BooleanDisplayBadge value={row.original.enabled} />,
                 },
+                description: {
+                    cell: RichTextDescriptionCell,
+                },
             }}
             bulkActions={[
                 {

package/src/app/routes/_authenticated/_product-variants/components/add-currency-dropdown.tsx

@@ -0,0 +1,49 @@
+import { useLingui } from '@lingui/react/macro';
+import { PlusIcon } from 'lucide-react';
+
+import { Button } from '@/vdb/components/ui/button';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from '@/vdb/components/ui/dropdown-menu';
+import { useLocalFormat } from '@/vdb/hooks/use-local-format';
+
+interface AddCurrencyDropdownProps {
+    unusedCurrencies: string[];
+    onCurrencySelect: (currencyCode: string) => void;
+    placeholder?: string;
+}
+
+export function AddCurrencyDropdown({
+    unusedCurrencies,
+    onCurrencySelect,
+    placeholder,
+}: AddCurrencyDropdownProps) {
+    const { formatCurrencyName } = useLocalFormat();
+    const { t } = useLingui();
+
+    if (unusedCurrencies.length === 0) {
+        return null;
+    }
+
+    return (
+        <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+                <Button variant="outline" className="gap-2">
+                    <PlusIcon className="size-4" />
+                    {placeholder || t`Add a price in another currency`}
+                </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent>
+                {unusedCurrencies.map(currencyCode => (
+                    <DropdownMenuItem key={currencyCode} onSelect={() => onCurrencySelect(currencyCode)}>
+                        <span className="uppercase text-muted-foreground">{currencyCode}</span>
+                        {formatCurrencyName(currencyCode)}
+                    </DropdownMenuItem>
+                ))}
+            </DropdownMenuContent>
+        </DropdownMenu>
+    );
+}

package/src/app/routes/_authenticated/_product-variants/components/add-stock-location-dropdown.tsx

@@ -0,0 +1,56 @@
+import { useLingui } from '@lingui/react/macro';
+import { PlusIcon } from 'lucide-react';
+
+import { Button } from '@/vdb/components/ui/button';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from '@/vdb/components/ui/dropdown-menu';
+import { ResultOf } from 'gql.tada';
+
+import { stockLocationsQueryDocument } from '../product-variants.graphql.js';
+
+interface AddStockLocationDropdownProps {
+    availableStockLocations: ResultOf<typeof stockLocationsQueryDocument>['stockLocations']['items'];
+    usedStockLocationIds: string[];
+    onStockLocationSelect: (stockLocationId: string, stockLocationName: string) => void;
+    placeholder?: string;
+}
+
+export function AddStockLocationDropdown({
+    availableStockLocations,
+    usedStockLocationIds,
+    onStockLocationSelect,
+    placeholder,
+}: AddStockLocationDropdownProps) {
+    const { t } = useLingui();
+
+    const unusedStockLocations = availableStockLocations.filter(sl => !usedStockLocationIds.includes(sl.id));
+
+    if (unusedStockLocations.length === 0) {
+        return null;
+    }
+
+    return (
+        <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+                <Button variant="outline" className="gap-2">
+                    <PlusIcon className="size-4" />
+                    {placeholder || t`Add stock level for another location`}
+                </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent>
+                {unusedStockLocations.map(location => (
+                    <DropdownMenuItem
+                        key={location.id}
+                        onSelect={() => onStockLocationSelect(location.id, location.name)}
+                    >
+                        {location.name}
+                    </DropdownMenuItem>
+                ))}
+            </DropdownMenuContent>
+        </DropdownMenu>
+    );
+}

package/src/app/routes/_authenticated/_product-variants/product-variants.graphql.ts

@@ -193,3 +193,15 @@ export const updateProductVariantsDocument = graphql(`
         }
     }
 `);
+
+export const stockLocationsQueryDocument = graphql(`
+    query StockLocations {
+        stockLocations(options: { take: 100 }) {
+            items {
+                id
+                name
+                description
+            }
+        }
+    }
+`);