@vendure/dashboard 3.5.0-minor-202510071456 → 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/_products/components/product-bulk-actions.tsx

@@ -108,12 +108,6 @@ export const DuplicateProductsBulkAction: BulkActionComponent<any> = ({ selectio
         <DuplicateBulkAction
             entityType="Product"
             duplicatorCode="product-duplicator"
-            duplicatorArguments={[
-                {
-                    name: 'includeVariants',
-                    value: 'true',
-                },
-            ]}
             requiredPermissions={['UpdateCatalog', 'UpdateProduct']}
             entityName="Product"
             selection={selection}

package/src/app/routes/_authenticated/_products/products.tsx

@@ -1,5 +1,6 @@
 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';
@@ -7,7 +8,7 @@ import { api } from '@/vdb/graphql/api.js';
 import { Trans, useLingui } from '@lingui/react/macro';
 import { useMutation } from '@tanstack/react-query';
 import { createFileRoute, Link } from '@tanstack/react-router';
-import { PlusIcon, RefreshCwIcon } from 'lucide-react';
+import { ListRestart, PlusIcon } from 'lucide-react';
 import { toast } from 'sonner';
 import {
     AssignFacetValuesToProductsBulkAction,
@@ -48,6 +49,9 @@ function ProductListPage() {
                 name: {
                     cell: ({ row }) => <DetailPageButton id={row.original.id} label={row.original.name} />,
                 },
+                description: {
+                    cell: RichTextDescriptionCell,
+                },
             }}
             onSearchTermChange={searchTerm => {
                 return {
@@ -87,7 +91,7 @@ function ProductListPage() {
             <PageActionBarRight>
                 <PermissionGuard requires={['UpdateCatalog']}>
                     <Button variant="outline" onClick={handleRebuildSearchIndex}>
-                        <RefreshCwIcon />
+                        <ListRestart />
                         <Trans>Rebuild search index</Trans>
                     </Button>
                 </PermissionGuard>

package/src/app/routes/_authenticated/_products/products_.$productId.option-groups.$productOptionGroupId.options_.$id.tsx

@@ -124,11 +124,9 @@ function ProductOptionDetailPage() {
         params: { id: params.id },
         onSuccess: async data => {
             toast(
-                i18n.t(
-                    creatingNewEntity
-                        ? 'Successfully created product option'
-                        : 'Successfully updated product option',
-                ),
+                creatingNewEntity
+                    ? t`Successfully created product option`
+                    : t`Successfully updated product option`,
             );
             resetForm();
             const created = Array.isArray(data) ? data[0] : data;
@@ -138,9 +136,7 @@ function ProductOptionDetailPage() {
         },
         onError: err => {
             toast(
-                i18n.t(
-                    creatingNewEntity ? 'Failed to create product option' : 'Failed to update product option',
-                ),
+                creatingNewEntity ? t`Failed to create product option` : t`Failed to update product option`,
                 {
                     description: err instanceof Error ? err.message : 'Unknown error',
                 },

package/src/app/routes/_authenticated/_promotions/components/promotion-bulk-actions.tsx

@@ -63,16 +63,6 @@ export const DuplicatePromotionsBulkAction: BulkActionComponent<any> = ({ select
         <DuplicateBulkAction
             entityType="Promotion"
             duplicatorCode="promotion-duplicator"
-            duplicatorArguments={[
-                {
-                    name: 'includeConditions',
-                    value: 'true',
-                },
-                {
-                    name: 'includeActions',
-                    value: 'true',
-                },
-            ]}
             requiredPermissions={['CreatePromotion']}
             entityName="Promotion"
             selection={selection}

package/src/app/routes/_authenticated/_promotions/promotions.graphql.ts

@@ -2,8 +2,8 @@ import { configurableOperationFragment } from '@/vdb/graphql/fragments.js';
 import { graphql } from '@/vdb/graphql/graphql.js';
 
 export const promotionListDocument = graphql(`
-    query PromotionList {
-        promotions {
+    query PromotionList($options: PromotionListOptions) {
+        promotions(options: $options) {
             items {
                 id
                 createdAt

package/src/app/routes/_authenticated/_promotions/promotions.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';
@@ -40,6 +41,14 @@ function PromotionListPage() {
                     couponCode: { contains: searchTerm },
                 };
             }}
+            transformVariables={variables => {
+                return {
+                    options: {
+                        ...variables.options,
+                        filterOperator: 'OR' as const,
+                    },
+                };
+            }}
             customizeColumns={{
                 name: {
                     cell: ({ row }) => <DetailPageButton id={row.original.id} label={row.original.name} />,
@@ -47,6 +56,9 @@ function PromotionListPage() {
                 enabled: {
                     cell: ({ row }) => <BooleanDisplayBadge value={row.original.enabled} />,
                 },
+                description: {
+                    cell: RichTextDescriptionCell,
+                },
             }}
             bulkActions={[
                 {

package/src/app/routes/_authenticated/_promotions/promotions_.$id.tsx

@@ -203,13 +203,17 @@ function PromotionDetailPage() {
                             control={form.control}
                             name="perCustomerUsageLimit"
                             label={<Trans>Per customer usage limit</Trans>}
-                            render={({ field }) => <NumberInput {...field} value={field.value ?? ''} />}
+                            render={({ field }) => (
+                                <NumberInput {...field} value={field.value ?? ''} min={0} max={1000} />
+                            )}
                         />
                         <FormFieldWrapper
                             control={form.control}
                             name="usageLimit"
                             label={<Trans>Usage limit</Trans>}
-                            render={({ field }) => <NumberInput {...field} value={field.value ?? ''} />}
+                            render={({ field }) => (
+                                <NumberInput {...field} value={field.value ?? ''} min={0} max={1000} />
+                            )}
                         />
                     </DetailFormGrid>
                 </PageBlock>

package/src/app/routes/_authenticated/_sellers/sellers.graphql.ts

@@ -11,8 +11,8 @@ export const sellerItemFragment = graphql(`
 
 export const sellerListQuery = graphql(
     `
-        query SellerList {
-            sellers {
+        query SellerList($options: SellerListOptions) {
+            sellers(options: $options) {
                 items {
                     ...SellerItem
                 }

package/src/app/routes/_authenticated/_shipping-methods/shipping-methods.graphql.ts

@@ -15,8 +15,8 @@ export const shippingMethodItemFragment = graphql(`
 
 export const shippingMethodListQuery = graphql(
     `
-        query ShippingMethodList {
-            shippingMethods {
+        query ShippingMethodList($options: ShippingMethodListOptions) {
+            shippingMethods(options: $options) {
                 items {
                     ...ShippingMethodItem
                 }

package/src/app/routes/_authenticated/_shipping-methods/shipping-methods.tsx

@@ -1,5 +1,6 @@
 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';
@@ -35,6 +36,9 @@ function ShippingMethodListPage() {
                 name: {
                     cell: ({ row }) => <DetailPageButton id={row.original.id} label={row.original.name} />,
                 },
+                description: {
+                    cell: RichTextDescriptionCell,
+                },
             }}
             onSearchTermChange={searchTerm => {
                 return {

package/src/app/routes/_authenticated/_shipping-methods/shipping-methods_.$id.tsx

@@ -86,11 +86,9 @@ function ShippingMethodDetailPage() {
         params: { id: params.id },
         onSuccess: async data => {
             toast.success(
-                i18n.t(
-                    creatingNewEntity
-                        ? 'Successfully created shipping method'
-                        : 'Successfully updated shipping method',
-                ),
+                creatingNewEntity
+                    ? t`Successfully created shipping method`
+                    : t`Successfully updated shipping method`,
             );
             resetForm();
             if (creatingNewEntity) {
@@ -99,11 +97,7 @@ function ShippingMethodDetailPage() {
         },
         onError: err => {
             toast.error(
-                i18n.t(
-                    creatingNewEntity
-                        ? 'Failed to create shipping method'
-                        : 'Failed to update shipping method',
-                ),
+                creatingNewEntity ? t`Failed to create shipping method` : t`Failed to update shipping method`,
                 {
                     description: err instanceof Error ? err.message : 'Unknown error',
                 },

package/src/app/routes/_authenticated/_stock-locations/stock-locations.graphql.ts

@@ -12,8 +12,8 @@ export const stockLocationFragment = graphql(`
 
 export const stockLocationListQuery = graphql(
     `
-        query StockLocationList {
-            stockLocations {
+        query StockLocationList($options: StockLocationListOptions) {
+            stockLocations(options: $options) {
                 items {
                     ...StockLocationItem
                 }

package/src/app/routes/_authenticated/_tax-categories/tax-categories.graphql.ts

@@ -12,8 +12,8 @@ export const taxCategoryItemFragment = graphql(`
 
 export const taxCategoryListQuery = graphql(
     `
-        query TaxCategoryList {
-            taxCategories {
+        query TaxCategoryList($options: TaxCategoryListOptions) {
+            taxCategories(options: $options) {
                 items {
                     ...TaxCategoryItem
                 }

package/src/app/routes/_authenticated/_tax-rates/tax-rates.tsx

@@ -8,6 +8,7 @@ import { api } from '@/vdb/graphql/api.js';
 import { Trans, useLingui } from '@lingui/react/macro';
 import { createFileRoute, Link } from '@tanstack/react-router';
 import { PlusIcon } from 'lucide-react';
+import { mapFacetedFilterFields } from '../../../common/map-faceted-filter-fields.js';
 import { taxCategoryListQuery } from '../_tax-categories/tax-categories.graphql.js';
 import { zoneListQuery } from '../_zones/zones.graphql.js';
 import { DeleteTaxRatesBulkAction } from './components/tax-rate-bulk-actions.js';
@@ -42,6 +43,14 @@ function TaxRateListPage() {
                     name: { contains: searchTerm },
                 };
             }}
+            transformVariables={input => {
+                const facetedFilters = input.options?.filter?._and ?? [];
+                mapFacetedFilterFields(facetedFilters, {
+                    category: 'categoryId',
+                    zone: 'zoneId',
+                });
+                return input;
+            }}
             facetedFilters={{
                 enabled: {
                     title: t`Enabled`,

package/src/app/routes/_authenticated/_tax-rates/tax-rates_.$id.tsx

@@ -125,6 +125,7 @@ function TaxRateDetailPage() {
                                     {...field}
                                     type="number"
                                     suffix="%"
+                                    min={0}
                                     value={field.value}
                                     onChange={e => field.onChange(e.target.valueAsNumber)}
                                 />

package/src/app/routes/_authenticated/_zones/zones.graphql.ts

@@ -11,8 +11,8 @@ export const zoneItemFragment = graphql(`
 
 export const zoneListQuery = graphql(
     `
-        query ZoneList {
-            zones {
+        query ZoneList($options: ZoneListOptions) {
+            zones(options: $options) {
                 items {
                     ...ZoneItem
                 }

package/src/app/routes/login.tsx

@@ -36,8 +36,8 @@ function LoginPage() {
     const isVerifying = isLoading || auth.status === 'verifying';
 
     return (
-        <div className="flex min-h-svh flex-col items-center justify-center p-6 md:p-10">
-            <div className="w-full max-w-sm md:max-w-4xl">
+        <div className="flex min-h-svh flex-col items-center justify-center p-6 md:p-10 bg-sidebar">
+            <div className="w-full max-w-sm md:max-w-md">
                 <LoginForm
                     onFormSubmit={onFormSubmit}
                     isVerifying={isVerifying}