@vendure/dashboard 3.4.0-minor-202506250934 → 3.4.0

package/src/app/routes/_authenticated/_orders/orders_.draft.$id.tsx

@@ -1,15 +1,23 @@
-import { ConfirmationDialog } from '@/components/shared/confirmation-dialog.js';
-import { CustomerSelector } from '@/components/shared/customer-selector.js';
-import { ErrorPage } from '@/components/shared/error-page.js';
-import { PermissionGuard } from '@/components/shared/permission-guard.js';
-import { Button } from '@/components/ui/button.js';
-import { Form } from '@/components/ui/form.js';
-import { addCustomFields } from '@/framework/document-introspection/add-custom-fields.js';
-import { useGeneratedForm } from '@/framework/form-engine/use-generated-form.js';
-import { CustomFieldsPageBlock, Page, PageActionBar, PageActionBarRight, PageBlock, PageLayout, PageTitle } from '@/framework/layout-engine/page-layout.js';
-import { getDetailQueryOptions, useDetailPage } from '@/framework/page/use-detail-page.js';
-import { api } from '@/graphql/api.js';
-import { Trans, useLingui } from '@/lib/trans.js';
+import { ConfirmationDialog } from '@/vdb/components/shared/confirmation-dialog.js';
+import { CustomFieldsForm } from '@/vdb/components/shared/custom-fields-form.js';
+import { CustomerSelector } from '@/vdb/components/shared/customer-selector.js';
+import { ErrorPage } from '@/vdb/components/shared/error-page.js';
+import { PermissionGuard } from '@/vdb/components/shared/permission-guard.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { Form } from '@/vdb/components/ui/form.js';
+import { addCustomFields } from '@/vdb/framework/document-introspection/add-custom-fields.js';
+import { useGeneratedForm } from '@/vdb/framework/form-engine/use-generated-form.js';
+import {
+    Page,
+    PageActionBar,
+    PageActionBarRight,
+    PageBlock,
+    PageLayout,
+    PageTitle,
+} from '@/vdb/framework/layout-engine/page-layout.js';
+import { getDetailQueryOptions, useDetailPage } from '@/vdb/framework/page/use-detail-page.js';
+import { api } from '@/vdb/graphql/api.js';
+import { Trans, useLingui } from '@/vdb/lib/trans.js';
 import { useMutation, useQuery } from '@tanstack/react-query';
 import { createFileRoute, Link, redirect, useNavigate } from '@tanstack/react-router';
 import { ResultOf } from 'gql.tada';
@@ -18,15 +26,28 @@ import { toast } from 'sonner';
 import { CustomerAddressSelector } from './components/customer-address-selector.js';
 import { EditOrderTable } from './components/edit-order-table.js';
 import { OrderAddress } from './components/order-address.js';
-import { addItemToDraftOrderDocument, adjustDraftOrderLineDocument, applyCouponCodeToDraftOrderDocument, deleteDraftOrderDocument, draftOrderEligibleShippingMethodsDocument, orderDetailDocument, removeCouponCodeFromDraftOrderDocument, removeDraftOrderLineDocument, setBillingAddressForDraftOrderDocument, setCustomerForDraftOrderDocument, setDraftOrderCustomFieldsDocument, setDraftOrderShippingMethodDocument, setShippingAddressForDraftOrderDocument, transitionOrderToStateDocument, unsetBillingAddressForDraftOrderDocument, unsetShippingAddressForDraftOrderDocument } from './orders.graphql.js';
-import { CustomFieldsForm } from '@/components/shared/custom-fields-form.js';
+import {
+    addItemToDraftOrderDocument,
+    adjustDraftOrderLineDocument,
+    applyCouponCodeToDraftOrderDocument,
+    deleteDraftOrderDocument,
+    draftOrderEligibleShippingMethodsDocument,
+    orderDetailDocument,
+    removeCouponCodeFromDraftOrderDocument,
+    removeDraftOrderLineDocument,
+    setBillingAddressForDraftOrderDocument,
+    setCustomerForDraftOrderDocument,
+    setDraftOrderCustomFieldsDocument,
+    setDraftOrderShippingMethodDocument,
+    setShippingAddressForDraftOrderDocument,
+    transitionOrderToStateDocument,
+    unsetBillingAddressForDraftOrderDocument,
+    unsetShippingAddressForDraftOrderDocument,
+} from './orders.graphql.js';
 
 export const Route = createFileRoute('/_authenticated/_orders/orders_/draft/$id')({
     component: DraftOrderPage,
-    loader: async ({
-        context,
-        params,
-    }) => {
+    loader: async ({ context, params }) => {
         if (!params.id) {
             throw new Error('ID param is required');
         }
@@ -69,22 +90,6 @@ function DraftOrderPage() {
         params: { id: params.id },
     });
 
-    const { form: orderLineForm } = useGeneratedForm({
-        document: addCustomFields(adjustDraftOrderLineDocument),
-        varName: undefined,
-        entity: entity?.lines[0],
-        setValues: entity => {
-            return {
-                orderId: entity.id,
-                input: {
-                    quantity: entity.quantity,
-                    orderLineId: entity.id,
-                    customFields: entity.customFields,
-                }
-            };
-        },
-    });
-
     const { form: orderCustomFieldsForm } = useGeneratedForm({
         document: setDraftOrderCustomFieldsDocument,
         varName: undefined,
@@ -95,7 +100,7 @@ function DraftOrderPage() {
                 input: {
                     id: entity.id,
                     customFields: entity.customFields,
-                }
+                },
             };
         },
     });
@@ -244,7 +249,6 @@ function DraftOrderPage() {
     const { mutate: removeCouponCodeForDraftOrder } = useMutation({
         mutationFn: api.mutate(removeCouponCodeFromDraftOrderDocument),
         onSuccess: (result: ResultOf<typeof removeCouponCodeFromDraftOrderDocument>) => {
-            const order = result.removeCouponCodeFromDraftOrder;
             toast.success(i18n.t('Coupon code removed from order'));
             refreshEntity();
         },
@@ -286,12 +290,17 @@ function DraftOrderPage() {
     }
 
     const onSaveCustomFields = (values: any) => {
-        setDraftOrderCustomFields({ input: { id: entity.id, customFields: values.input?.customFields }, orderId: entity.id });
-    }
+        setDraftOrderCustomFields({
+            input: { id: entity.id, customFields: values.input?.customFields },
+            orderId: entity.id,
+        });
+    };
 
     return (
         <Page pageId="draft-order-detail" form={form}>
-            <PageTitle><Trans>Draft order</Trans>: {entity?.code ?? ''}</PageTitle>
+            <PageTitle>
+                <Trans>Draft order</Trans>: {entity?.code ?? ''}
+            </PageTitle>
             <PageActionBar>
                 <PageActionBarRight>
                     <PermissionGuard requires={['DeleteOrder']}>
@@ -306,11 +315,16 @@ function DraftOrderPage() {
                                 <Trans>Delete draft</Trans>
                             </Button>
                         </ConfirmationDialog>
-
                     </PermissionGuard>
                     <PermissionGuard requires={['UpdateOrder']}>
-                        <Button type="button"
-                            disabled={!entity.customer || entity.lines.length === 0 || entity.shippingLines.length === 0 || entity.state !== 'Draft'}
+                        <Button
+                            type="button"
+                            disabled={
+                                !entity.customer ||
+                                entity.lines.length === 0 ||
+                                entity.shippingLines.length === 0 ||
+                                entity.state !== 'Draft'
+                            }
                             onClick={() => completeDraftOrder({ id: entity.id, state: 'ArrangingPayment' })}
                         >
                             <Trans>Complete draft</Trans>
@@ -320,88 +334,152 @@ function DraftOrderPage() {
             </PageActionBar>
             <PageLayout>
                 <PageBlock column="main" blockId="order-table">
-                    <EditOrderTable order={entity}
-                        eligibleShippingMethods={eligibleShippingMethods?.eligibleShippingMethodsForDraftOrder ?? []}
-                        onSetShippingMethod={(e) => setShippingMethodForDraftOrder({ orderId: entity.id, shippingMethodId: e.shippingMethodId })}
-                        onAddItem={(e) => addItemToDraftOrder({ orderId: entity.id, input: { productVariantId: e.productVariantId, quantity: 1 } })}
-                        onAdjustLine={(e) => adjustDraftOrderLine({ orderId: entity.id, input: { orderLineId: e.lineId, quantity: e.quantity, customFields: e.customFields } as any })}
-                        onRemoveLine={(e) => removeDraftOrderLine({ orderId: entity.id, orderLineId: e.lineId })}
-                        onApplyCouponCode={(e) => setCouponCodeForDraftOrder({ orderId: entity.id, couponCode: e.couponCode })}
-                        onRemoveCouponCode={(e) => removeCouponCodeForDraftOrder({ orderId: entity.id, couponCode: e.couponCode })}
-                        orderLineForm={orderLineForm}
+                    <EditOrderTable
+                        order={entity}
+                        eligibleShippingMethods={
+                            eligibleShippingMethods?.eligibleShippingMethodsForDraftOrder ?? []
+                        }
+                        onSetShippingMethod={e =>
+                            setShippingMethodForDraftOrder({
+                                orderId: entity.id,
+                                shippingMethodId: e.shippingMethodId,
+                            })
+                        }
+                        onAddItem={e =>
+                            addItemToDraftOrder({
+                                orderId: entity.id,
+                                input: { productVariantId: e.productVariantId, quantity: 1 },
+                            })
+                        }
+                        onAdjustLine={e =>
+                            adjustDraftOrderLine({
+                                orderId: entity.id,
+                                input: {
+                                    orderLineId: e.lineId,
+                                    quantity: e.quantity,
+                                    customFields: e.customFields,
+                                } as any,
+                            })
+                        }
+                        onRemoveLine={e =>
+                            removeDraftOrderLine({
+                                orderId: entity.id,
+                                orderLineId: e.lineId,
+                            })
+                        }
+                        onApplyCouponCode={e =>
+                            setCouponCodeForDraftOrder({
+                                orderId: entity.id,
+                                couponCode: e.couponCode,
+                            })
+                        }
+                        onRemoveCouponCode={e =>
+                            removeCouponCodeForDraftOrder({
+                                orderId: entity.id,
+                                couponCode: e.couponCode,
+                            })
+                        }
                     />
                 </PageBlock>
                 <PageBlock column="main" blockId="order-custom-fields" title={<Trans>Custom fields</Trans>}>
                     <Form {...orderCustomFieldsForm}>
-                        <CustomFieldsForm entityType="Order" control={orderCustomFieldsForm.control} formPathPrefix='input' />
+                        <CustomFieldsForm
+                            entityType="Order"
+                            control={orderCustomFieldsForm.control}
+                            formPathPrefix="input"
+                        />
                         <div className="mt-4">
-                            <Button type="submit" className=""
-                                disabled={!orderCustomFieldsForm.formState.isValid || !orderCustomFieldsForm.formState.isDirty}
-                                onClick={(e) => {
+                            <Button
+                                type="submit"
+                                className=""
+                                disabled={
+                                    !orderCustomFieldsForm.formState.isValid ||
+                                    !orderCustomFieldsForm.formState.isDirty
+                                }
+                                onClick={e => {
                                     e.preventDefault();
                                     e.stopPropagation();
                                     orderCustomFieldsForm.handleSubmit(onSaveCustomFields)();
-                                }}>
+                                }}
+                            >
                                 <Trans>Set custom fields</Trans>
                             </Button>
                         </div>
                     </Form>
                 </PageBlock>
                 <PageBlock column="side" blockId="customer" title={<Trans>Customer</Trans>}>
-                    {entity?.customer?.id ? <Button variant="ghost" asChild className="mb-4">
-                        <Link to={`/customers/${entity?.customer?.id}`}>
-                            <User className="w-4 h-4" />
-                            {entity?.customer?.firstName} {entity?.customer?.lastName}
-                        </Link>
-                    </Button> : null}
-                    <CustomerSelector onSelect={customer => {
-                        setCustomerForDraftOrder({ orderId: entity.id, customerId: customer.id });
-                    }} />
+                    {entity?.customer?.id ? (
+                        <Button variant="ghost" asChild className="mb-4">
+                            <Link to={`/customers/${entity?.customer?.id}`}>
+                                <User className="w-4 h-4" />
+                                {entity?.customer?.firstName} {entity?.customer?.lastName}
+                            </Link>
+                        </Button>
+                    ) : null}
+                    <CustomerSelector
+                        onSelect={customer => {
+                            setCustomerForDraftOrder({ orderId: entity.id, customerId: customer.id });
+                        }}
+                    />
                 </PageBlock>
                 <PageBlock column="side" blockId="shipping-address" title={<Trans>Shipping address</Trans>}>
                     <div className="flex flex-col">
                         <OrderAddress address={entity.shippingAddress ?? undefined} />
-                        {entity.shippingAddress?.streetLine1
-                            ? <RemoveAddressButton onClick={() => unsetShippingAddressForDraftOrder({ orderId: entity.id })} />
-                            : <CustomerAddressSelector customerId={entity.customer?.id} onSelect={address => {
-                                setShippingAddressForDraftOrder({
-                                    orderId: entity.id, input: {
-                                        fullName: address.fullName,
-                                        company: address.company,
-                                        streetLine1: address.streetLine1,
-                                        streetLine2: address.streetLine2,
-                                        city: address.city,
-                                        province: address.province,
-                                        postalCode: address.postalCode,
-                                        countryCode: address.country.code,
-                                        phoneNumber: address.phoneNumber,
-                                    }
-                                });
-                            }} />
-                        }
+                        {entity.shippingAddress?.streetLine1 ? (
+                            <RemoveAddressButton
+                                onClick={() => unsetShippingAddressForDraftOrder({ orderId: entity.id })}
+                            />
+                        ) : (
+                            <CustomerAddressSelector
+                                customerId={entity.customer?.id}
+                                onSelect={address => {
+                                    setShippingAddressForDraftOrder({
+                                        orderId: entity.id,
+                                        input: {
+                                            fullName: address.fullName,
+                                            company: address.company,
+                                            streetLine1: address.streetLine1,
+                                            streetLine2: address.streetLine2,
+                                            city: address.city,
+                                            province: address.province,
+                                            postalCode: address.postalCode,
+                                            countryCode: address.country.code,
+                                            phoneNumber: address.phoneNumber,
+                                        },
+                                    });
+                                }}
+                            />
+                        )}
                     </div>
                 </PageBlock>
                 <PageBlock column="side" blockId="billing-address" title={<Trans>Billing address</Trans>}>
                     <div className="flex flex-col">
                         <OrderAddress address={entity.billingAddress ?? undefined} />
-                        {entity.billingAddress?.streetLine1
-                            ? <RemoveAddressButton onClick={() => unsetBillingAddressForDraftOrder({ orderId: entity.id })} />
-                            : <CustomerAddressSelector customerId={entity.customer?.id} onSelect={address => {
-                                setBillingAddressForDraftOrder({
-                                    orderId: entity.id, input: {
-                                        fullName: address.fullName,
-                                        company: address.company,
-                                        streetLine1: address.streetLine1,
-                                        streetLine2: address.streetLine2,
-                                        city: address.city,
-                                        province: address.province,
-                                        postalCode: address.postalCode,
-                                        countryCode: address.country.code,
-                                        phoneNumber: address.phoneNumber,
-                                    }
-                                });
-                            }} />
-                        }
+                        {entity.billingAddress?.streetLine1 ? (
+                            <RemoveAddressButton
+                                onClick={() => unsetBillingAddressForDraftOrder({ orderId: entity.id })}
+                            />
+                        ) : (
+                            <CustomerAddressSelector
+                                customerId={entity.customer?.id}
+                                onSelect={address => {
+                                    setBillingAddressForDraftOrder({
+                                        orderId: entity.id,
+                                        input: {
+                                            fullName: address.fullName,
+                                            company: address.company,
+                                            streetLine1: address.streetLine1,
+                                            streetLine2: address.streetLine2,
+                                            city: address.city,
+                                            province: address.province,
+                                            postalCode: address.postalCode,
+                                            countryCode: address.country.code,
+                                            phoneNumber: address.phoneNumber,
+                                        },
+                                    });
+                                }}
+                            />
+                        )}
                     </div>
                 </PageBlock>
             </PageLayout>
@@ -410,9 +488,11 @@ function DraftOrderPage() {
 }
 
 function RemoveAddressButton(props: { onClick: () => void }) {
-    return (<div className="">
-        <Button variant="outline" className="mt-4" size="sm" onClick={props.onClick}>
-            <Trans>Remove</Trans>
-        </Button>
-    </div>)
-}
+    return (
+        <div className="">
+            <Button variant="outline" className="mt-4" size="sm" onClick={props.onClick}>
+                <Trans>Remove</Trans>
+            </Button>
+        </div>
+    );
+}

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

@@ -0,0 +1,10 @@
+import { FragmentOf, ResultOf } from '@/vdb/graphql/graphql.js';
+
+import { addressFragment } from '../../_customers/customers.graphql.js';
+import { orderAddressFragment, orderDetailDocument } from '../orders.graphql.js';
+
+export type Order = NonNullable<ResultOf<typeof orderDetailDocument>['order']>;
+export type Payment = NonNullable<NonNullable<Order>['payments']>[number];
+export type Fulfillment = NonNullable<NonNullable<Order>['fulfillments']>[number];
+export type OrderAddressFragment = FragmentOf<typeof orderAddressFragment>;
+export type AddressFragment = FragmentOf<typeof addressFragment>;

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

@@ -0,0 +1,78 @@
+import { Fulfillment, Order, Payment } from './order-types.js';
+
+/**
+ * Calculates the outstanding payment amount for an order
+ */
+export function calculateOutstandingPaymentAmount(order: Order): number {
+    if (!order) return 0;
+
+    const paymentIsValid = (p: Payment): boolean =>
+        p.state !== 'Cancelled' && p.state !== 'Declined' && p.state !== 'Error';
+
+    let amountCovered = 0;
+    for (const payment of order.payments?.filter(paymentIsValid) ?? []) {
+        const refunds = payment.refunds.filter(r => r.state !== 'Failed') ?? [];
+        const refundsTotal = refunds.reduce((sum, refund) => sum + (refund.total || 0), 0);
+        amountCovered += payment.amount - refundsTotal;
+    }
+    return order.totalWithTax - amountCovered;
+}
+
+/**
+ * Checks if an order has unsettled modifications
+ */
+export function hasUnsettledModifications(order: Order): boolean {
+    if (!order) return false;
+    return order.modifications.some(m => !m.isSettled);
+}
+
+/**
+ * Determines if the add manual payment button should be displayed
+ */
+export function shouldShowAddManualPaymentButton(order: Order): boolean {
+    if (!order) return false;
+
+    return (
+        order.type !== 'Aggregate' &&
+        (order.state === 'ArrangingPayment' || order.state === 'ArrangingAdditionalPayment') &&
+        (hasUnsettledModifications(order) || calculateOutstandingPaymentAmount(order) > 0)
+    );
+}
+
+/**
+ * Determines if we can add a fulfillment to an order
+ */
+export function canAddFulfillment(order: Order): boolean {
+    if (!order) return false;
+
+    // Get all fulfillment lines from non-cancelled fulfillments
+    const allFulfillmentLines: Fulfillment['lines'] = (order.fulfillments ?? [])
+        .filter(fulfillment => fulfillment.state !== 'Cancelled')
+        .reduce((all, fulfillment) => [...all, ...fulfillment.lines], [] as Fulfillment['lines']);
+
+    // Check if all items are already fulfilled
+    let allItemsFulfilled = true;
+    for (const line of order.lines) {
+        const totalFulfilledCount = allFulfillmentLines
+            .filter(row => row.orderLineId === line.id)
+            .reduce((sum, row) => sum + row.quantity, 0);
+        if (totalFulfilledCount < line.quantity) {
+            allItemsFulfilled = false;
+            break;
+        }
+    }
+
+    // Check if order is in a fulfillable state
+    const isFulfillableState =
+        (order.nextStates.includes('Shipped') ||
+            order.nextStates.includes('PartiallyShipped') ||
+            order.nextStates.includes('Delivered')) &&
+        order.state !== 'ArrangingAdditionalPayment';
+
+    return (
+        !allItemsFulfilled &&
+        !hasUnsettledModifications(order) &&
+        calculateOutstandingPaymentAmount(order) === 0 &&
+        isFulfillableState
+    );
+}

package/src/app/routes/_authenticated/_payment-methods/components/payment-eligibility-checker-selector.tsx

@@ -1,18 +1,7 @@
-import { ConfigurableOperationInput } from '@/components/shared/configurable-operation-input.js';
-import { Button } from '@/components/ui/button.js';
-import {
-    DropdownMenu,
-    DropdownMenuContent,
-    DropdownMenuItem,
-    DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu.js';
-import { api } from '@/graphql/api.js';
-import { configurableOperationDefFragment, ConfigurableOperationDefFragment } from '@/graphql/fragments.js';
-import { graphql } from '@/graphql/graphql.js';
-import { Trans } from '@/lib/trans.js';
-import { useQuery } from '@tanstack/react-query';
+import { ConfigurableOperationSelector } from '@/vdb/components/shared/configurable-operation-selector.js';
+import { configurableOperationDefFragment } from '@/vdb/graphql/fragments.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
 import { ConfigurableOperationInput as ConfigurableOperationInputType } from '@vendure/common/lib/generated-types';
-import { Plus } from 'lucide-react';
 
 export const paymentEligibilityCheckersDocument = graphql(
     `
@@ -34,71 +23,15 @@ export function PaymentEligibilityCheckerSelector({
     value,
     onChange,
 }: PaymentEligibilityCheckerSelectorProps) {
-    const { data: checkersData } = useQuery({
-        queryKey: ['paymentMethodEligibilityCheckers'],
-        queryFn: () => api.query(paymentEligibilityCheckersDocument),
-        staleTime: 1000 * 60 * 60 * 5,
-    });
-
-    const checkers = checkersData?.paymentMethodEligibilityCheckers;
-
-    const onCheckerSelected = (checker: ConfigurableOperationDefFragment) => {
-        const checkerDef = checkers?.find(c => c.code === checker.code);
-        if (!checkerDef) {
-            return;
-        }
-        onChange({
-            code: checker.code,
-            arguments: checkerDef.args.map(arg => ({
-                name: arg.name,
-                value: arg.defaultValue != null ? arg.defaultValue.toString() : '',
-            })),
-        });
-    };
-
-    const onOperationValueChange = (newVal: ConfigurableOperationInputType) => {
-        onChange(newVal);
-    };
-
-    const onOperationRemove = () => {
-        onChange(undefined);
-    };
-
-    const checkerDef = checkers?.find(c => c.code === value?.code);
-
     return (
-        <div className="flex flex-col gap-2 mt-4">
-            {value && checkerDef && (
-                <div className="flex flex-col gap-2">
-                    <ConfigurableOperationInput
-                        operationDefinition={checkerDef}
-                        value={value}
-                        onChange={value => onOperationValueChange(value)}
-                        onRemove={() => onOperationRemove()}
-                    />
-                </div>
-            )}
-            <DropdownMenu>
-                {!value?.code && (
-                    <DropdownMenuTrigger asChild>
-                        <Button variant="outline">
-                            <Plus />
-                            <Trans>Select Payment Eligibility Checker</Trans>
-                        </Button>
-                    </DropdownMenuTrigger>
-                )}
-                <DropdownMenuContent className="w-96">
-                    {checkers?.length ? (
-                        checkers?.map(checker => (
-                            <DropdownMenuItem key={checker.code} onClick={() => onCheckerSelected(checker)}>
-                                {checker.description}
-                            </DropdownMenuItem>
-                        ))
-                    ) : (
-                        <DropdownMenuItem>No checkers found</DropdownMenuItem>
-                    )}
-                </DropdownMenuContent>
-            </DropdownMenu>
-        </div>
+        <ConfigurableOperationSelector
+            value={value}
+            onChange={onChange}
+            queryDocument={paymentEligibilityCheckersDocument}
+            queryKey="paymentMethodEligibilityCheckers"
+            dataPath="paymentMethodEligibilityCheckers"
+            buttonText="Select Payment Eligibility Checker"
+            emptyText="No checkers found"
+        />
     );
 }