@vendure/dashboard 3.4.3-master-202509200226 → 3.4.3-master-202509240228

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

@@ -0,0 +1,302 @@
+import { CustomFieldsForm } from '@/vdb/components/shared/custom-fields-form.js';
+import { PermissionGuard } from '@/vdb/components/shared/permission-guard.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { DropdownMenuItem } from '@/vdb/components/ui/dropdown-menu.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 { useCustomFieldConfig } from '@/vdb/hooks/use-custom-field-config.js';
+import { Trans, useLingui } from '@/vdb/lib/trans.js';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { Link, useNavigate } from '@tanstack/react-router';
+import { ResultOf } from 'gql.tada';
+import { Pencil, User } from 'lucide-react';
+import { useMemo } from 'react';
+import { toast } from 'sonner';
+import {
+    orderDetailDocument,
+    setOrderCustomFieldsDocument,
+    transitionOrderToStateDocument,
+} from '../orders.graphql.js';
+import { canAddFulfillment, shouldShowAddManualPaymentButton } from '../utils/order-utils.js';
+import { AddManualPaymentDialog } from './add-manual-payment-dialog.js';
+import { FulfillOrderDialog } from './fulfill-order-dialog.js';
+import { FulfillmentDetails } from './fulfillment-details.js';
+import { OrderAddress } from './order-address.js';
+import { OrderHistoryContainer } from './order-history/order-history-container.js';
+import { orderHistoryQueryKey } from './order-history/use-order-history.js';
+import { OrderTable } from './order-table.js';
+import { OrderTaxSummary } from './order-tax-summary.js';
+import { PaymentDetails } from './payment-details.js';
+import { getTypeForState, StateTransitionControl } from './state-transition-control.js';
+import { useTransitionOrderToState } from './use-transition-order-to-state.js';
+
+export type OrderDetail = NonNullable<ResultOf<typeof orderDetailDocument>['order']>;
+
+export interface OrderDetailSharedProps {
+    // Required props
+    pageId: string;
+    orderId: string;
+    // Title customization
+    titleSlot?: (order: OrderDetail) => React.ReactNode;
+    // Optional content slots
+    beforeOrderTable?: (order: OrderDetail) => React.ReactNode;
+}
+
+function DefaultOrderTitle({ entity }: { entity: any }) {
+    return <>{entity?.code ?? ''}</>;
+}
+
+/**
+ * @description
+ * Shared functionality between the order and seller order detail pages.
+ */
+export function OrderDetailShared({
+    pageId,
+    orderId,
+    titleSlot,
+    beforeOrderTable,
+}: Readonly<OrderDetailSharedProps>) {
+    const { i18n } = useLingui();
+    const navigate = useNavigate();
+    const queryClient = useQueryClient();
+
+    const { form, submitHandler, entity, refreshEntity } = useDetailPage({
+        pageId,
+        queryDocument: orderDetailDocument,
+        updateDocument: setOrderCustomFieldsDocument,
+        setValuesForUpdate: (entity: any) => {
+            return {
+                id: entity.id,
+                customFields: entity.customFields,
+            };
+        },
+        params: { id: orderId },
+        onSuccess: async () => {
+            toast(i18n.t('Successfully updated order'));
+            form.reset(form.getValues());
+        },
+        onError: err => {
+            toast(i18n.t('Failed to update order'), {
+                description: err instanceof Error ? err.message : 'Unknown error',
+            });
+        },
+    });
+
+    const { transitionToState } = useTransitionOrderToState(entity?.id);
+    const transitionOrderToStateMutation = useMutation({
+        mutationFn: api.mutate(transitionOrderToStateDocument),
+    });
+
+    const customFieldConfig = useCustomFieldConfig('Order');
+
+    const stateTransitionActions = useMemo(() => {
+        if (!entity) {
+            return [];
+        }
+        return entity.nextStates.map((state: string) => ({
+            label: `Transition to ${state}`,
+            type: getTypeForState(state),
+            onClick: async () => {
+                const transitionError = await transitionToState(state);
+                if (transitionError) {
+                    toast(i18n.t('Failed to transition order to state'), {
+                        description: transitionError,
+                    });
+                } else {
+                    refreshOrderAndHistory();
+                }
+            },
+        }));
+    }, [entity, transitionToState, i18n]);
+
+    if (!entity) {
+        return null;
+    }
+
+    const handleModifyClick = async () => {
+        try {
+            await transitionOrderToStateMutation.mutateAsync({
+                id: entity.id,
+                state: 'Modifying',
+            });
+            const queryKey = getDetailQueryOptions(orderDetailDocument, { id: entity.id }).queryKey;
+            await queryClient.invalidateQueries({ queryKey });
+            await navigate({ to: `/orders/$id/modify`, params: { id: entity.id } });
+        } catch (error) {
+            toast(i18n.t('Failed to modify order'), {
+                description: error instanceof Error ? error.message : 'Unknown error',
+            });
+        }
+    };
+
+    const nextStates = entity.nextStates;
+    const showAddPaymentButton = shouldShowAddManualPaymentButton(entity);
+    const showFulfillButton = canAddFulfillment(entity);
+
+    async function refreshOrderAndHistory() {
+        if (entity) {
+            const queryKey = getDetailQueryOptions(orderDetailDocument, { id: entity.id }).queryKey;
+            await queryClient.invalidateQueries({ queryKey });
+            queryClient.refetchQueries({ queryKey: orderHistoryQueryKey(entity.id) });
+        }
+    }
+
+    return (
+        <Page pageId={pageId} form={form} submitHandler={submitHandler} entity={entity}>
+            <PageTitle>{titleSlot?.(entity) || <DefaultOrderTitle entity={entity} />}</PageTitle>
+            <PageActionBar>
+                <PageActionBarRight
+                    dropdownMenuItems={[
+                        ...(nextStates.includes('Modifying')
+                            ? [
+                                  {
+                                      component: () => (
+                                          <DropdownMenuItem onClick={handleModifyClick}>
+                                              <Pencil className="w-4 h-4" />
+                                              <Trans>Modify</Trans>
+                                          </DropdownMenuItem>
+                                      ),
+                                  },
+                              ]
+                            : []),
+                    ]}
+                >
+                    {showAddPaymentButton && (
+                        <PermissionGuard requires={['UpdateOrder']}>
+                            <AddManualPaymentDialog
+                                order={entity}
+                                onSuccess={() => {
+                                    refreshEntity();
+                                }}
+                            />
+                        </PermissionGuard>
+                    )}
+                    {showFulfillButton && (
+                        <PermissionGuard requires={['UpdateOrder']}>
+                            <FulfillOrderDialog
+                                order={entity}
+                                onSuccess={() => {
+                                    refreshOrderAndHistory();
+                                }}
+                            />
+                        </PermissionGuard>
+                    )}
+                </PageActionBarRight>
+            </PageActionBar>
+            <PageLayout>
+                {/* Main Column Blocks */}
+                {beforeOrderTable?.(entity)}
+                <PageBlock column="main" blockId="order-table">
+                    <OrderTable order={entity} pageId={pageId} />
+                </PageBlock>
+                <PageBlock column="main" blockId="tax-summary" title={<Trans>Tax summary</Trans>}>
+                    <OrderTaxSummary order={entity} />
+                </PageBlock>
+                {customFieldConfig?.length ? (
+                    <PageBlock column="main" blockId="custom-fields">
+                        <CustomFieldsForm entityType="Order" control={form.control} />
+                        <div className="flex justify-end">
+                            <Button
+                                type="submit"
+                                disabled={!form.formState.isDirty || !form.formState.isValid}
+                            >
+                                <Trans>Save</Trans>
+                            </Button>
+                        </div>
+                    </PageBlock>
+                ) : null}
+                <PageBlock column="main" blockId="payment-details" title={<Trans>Payment details</Trans>}>
+                    <div className="grid lg:grid-cols-2 gap-4">
+                        {entity?.payments?.map((payment: any) => (
+                            <PaymentDetails
+                                key={payment.id}
+                                payment={payment}
+                                currencyCode={entity.currencyCode}
+                                onSuccess={refreshOrderAndHistory}
+                            />
+                        ))}
+                    </div>
+                </PageBlock>
+                <PageBlock column="main" blockId="order-history" title={<Trans>Order history</Trans>}>
+                    <OrderHistoryContainer orderId={orderId} />
+                </PageBlock>
+
+                {/* Side Column Blocks */}
+                <PageBlock column="side" blockId="state">
+                    <StateTransitionControl
+                        currentState={entity?.state}
+                        actions={stateTransitionActions}
+                        isLoading={transitionOrderToStateMutation.isPending}
+                    />
+                </PageBlock>
+                <PageBlock column="side" blockId="customer" title={<Trans>Customer</Trans>}>
+                    {entity?.customer ? (
+                        <Button variant="ghost" asChild>
+                            <Link to={`/customers/${entity.customer.id}`}>
+                                <User className="w-4 h-4" />
+                                {entity.customer.firstName} {entity.customer.lastName}
+                            </Link>
+                        </Button>
+                    ) : (
+                        <div className="text-muted-foreground text-xs font-medium p-3 border rounded-md">
+                            <Trans>No customer</Trans>
+                        </div>
+                    )}
+                    <div className="mt-4 divide-y">
+                        {entity?.shippingAddress && (
+                            <div className="pb-6">
+                                <div className="font-medium">
+                                    <Trans>Shipping address</Trans>
+                                </div>
+                                <OrderAddress address={entity.shippingAddress} />
+                            </div>
+                        )}
+                        {entity?.billingAddress && (
+                            <div className="pt-4">
+                                <div className="font-medium">
+                                    <Trans>Billing address</Trans>
+                                </div>
+                                <OrderAddress address={entity.billingAddress} />
+                            </div>
+                        )}
+                    </div>
+                </PageBlock>
+                <PageBlock
+                    column="side"
+                    blockId="fulfillment-details"
+                    title={<Trans>Fulfillment details</Trans>}
+                >
+                    {entity?.fulfillments?.length && entity.fulfillments.length > 0 ? (
+                        <div className="space-y-2">
+                            {entity?.fulfillments?.map((fulfillment: any) => (
+                                <FulfillmentDetails
+                                    key={fulfillment.id}
+                                    order={entity}
+                                    fulfillment={fulfillment}
+                                    onSuccess={() => {
+                                        refreshEntity();
+                                        queryClient.refetchQueries({
+                                            queryKey: orderHistoryQueryKey(entity.id),
+                                        });
+                                    }}
+                                />
+                            ))}
+                        </div>
+                    ) : (
+                        <div className="text-muted-foreground text-xs font-medium p-3 border rounded-md">
+                            <Trans>No fulfillments</Trans>
+                        </div>
+                    )}
+                </PageBlock>
+            </PageLayout>
+        </Page>
+    );
+}

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

@@ -0,0 +1,98 @@
+import { HistoryEntry, HistoryEntryProps } from '@/vdb/framework/history-entry/history-entry.js';
+import { Trans } from '@/vdb/lib/trans.js';
+
+export function OrderStateTransitionComponent(props: Readonly<HistoryEntryProps>) {
+    const { entry } = props;
+    if (entry.data.from === 'Created') return null;
+
+    return (
+        <HistoryEntry {...props}>
+            <p className="text-xs text-muted-foreground">
+                <Trans>
+                    From {entry.data.from} to {entry.data.to}
+                </Trans>
+            </p>
+        </HistoryEntry>
+    );
+}
+
+export function OrderPaymentTransitionComponent(props: Readonly<HistoryEntryProps>) {
+    const { entry } = props;
+    return (
+        <HistoryEntry {...props}>
+            <p className="text-xs text-muted-foreground">
+                <Trans>
+                    Payment #{entry.data.paymentId} transitioned to {entry.data.to}
+                </Trans>
+            </p>
+        </HistoryEntry>
+    );
+}
+
+export function OrderRefundTransitionComponent(props: Readonly<HistoryEntryProps>) {
+    const { entry } = props;
+    return (
+        <HistoryEntry {...props}>
+            <p className="text-xs text-muted-foreground">
+                <Trans>
+                    Refund #{entry.data.refundId} transitioned to {entry.data.to}
+                </Trans>
+            </p>
+        </HistoryEntry>
+    );
+}
+
+export function OrderFulfillmentTransitionComponent(props: Readonly<HistoryEntryProps>) {
+    const { entry } = props;
+    return (
+        <HistoryEntry {...props}>
+            <p className="text-xs text-muted-foreground">
+                <Trans>
+                    Fulfillment #{entry.data.fulfillmentId} from {entry.data.from} to {entry.data.to}
+                </Trans>
+            </p>
+        </HistoryEntry>
+    );
+}
+
+export function OrderFulfillmentComponent(props: Readonly<HistoryEntryProps>) {
+    const { entry } = props;
+    return (
+        <HistoryEntry {...props}>
+            <p className="text-xs text-muted-foreground">
+                <Trans>Fulfillment #{entry.data.fulfillmentId} created</Trans>
+            </p>
+        </HistoryEntry>
+    );
+}
+
+export function OrderModifiedComponent(props: Readonly<HistoryEntryProps>) {
+    const { entry } = props;
+    return (
+        <HistoryEntry {...props}>
+            <p className="text-xs text-muted-foreground">
+                <Trans>Order modification #{entry.data.modificationId}</Trans>
+            </p>
+        </HistoryEntry>
+    );
+}
+
+export function OrderCustomerUpdatedComponent(props: Readonly<HistoryEntryProps>) {
+    return (
+        <HistoryEntry {...props}>
+            <p className="text-xs text-muted-foreground">
+                <Trans>Customer information updated</Trans>
+            </p>
+        </HistoryEntry>
+    );
+}
+
+export function OrderCancellationComponent(props: Readonly<HistoryEntryProps>) {
+    return (
+        <HistoryEntry {...props}>
+            <p className="text-xs text-muted-foreground">
+                <Trans>Order cancelled</Trans>
+            </p>
+        </HistoryEntry>
+    );
+}

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

@@ -61,13 +61,15 @@ export function OrderHistoryContainer({ orderId }: Readonly<OrderHistoryContaine
 
     return (
         <>
-            <OrderHistory
-                order={order}
-                historyEntries={historyEntries ?? []}
-                onAddNote={addNote}
-                onUpdateNote={updateNote}
-                onDeleteNote={deleteNote}
-            />
+            {order ? (
+                <OrderHistory
+                    order={order}
+                    historyEntries={historyEntries ?? []}
+                    onAddNote={addNote}
+                    onUpdateNote={updateNote}
+                    onDeleteNote={deleteNote}
+                />
+            ) : null}
             {hasNextPage && (
                 <Button type="button" variant="outline" onClick={() => fetchNextPage()}>
                     <Trans>Load more</Trans>

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

@@ -0,0 +1,5 @@
+import { ResultOf } from 'gql.tada';
+
+import { orderHistoryDocument } from '../../orders.graphql.js';
+
+export type OrderHistoryOrderDetail = NonNullable<ResultOf<typeof orderHistoryDocument>>['order'];

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

@@ -0,0 +1,173 @@
+import { HistoryEntryItem } from '@/vdb/framework/extension-api/types/index.js';
+import { Trans } from '@/vdb/lib/trans.js';
+import {
+    ArrowRightToLine,
+    Ban,
+    CheckIcon,
+    CreditCardIcon,
+    Edit3,
+    SquarePen,
+    Truck,
+    UserX,
+} from 'lucide-react';
+import { OrderHistoryOrderDetail } from './order-history-types.js';
+
+export function orderHistoryUtils(order: OrderHistoryOrderDetail) {
+    const getTimelineIcon = (entry: HistoryEntryItem) => {
+        switch (entry.type) {
+            case 'ORDER_PAYMENT_TRANSITION':
+                return <CreditCardIcon className="h-4 w-4" />;
+            case 'ORDER_REFUND_TRANSITION':
+                return <CreditCardIcon className="h-4 w-4" />;
+            case 'ORDER_NOTE':
+                return <SquarePen className="h-4 w-4" />;
+            case 'ORDER_STATE_TRANSITION':
+                if (entry.data.to === 'Delivered') {
+                    return <CheckIcon className="h-4 w-4" />;
+                }
+                if (entry.data.to === 'Cancelled') {
+                    return <Ban className="h-4 w-4" />;
+                }
+                return <ArrowRightToLine className="h-4 w-4" />;
+            case 'ORDER_FULFILLMENT_TRANSITION':
+                if (entry.data.to === 'Shipped' || entry.data.to === 'Delivered') {
+                    return <Truck className="h-4 w-4" />;
+                }
+                return <ArrowRightToLine className="h-4 w-4" />;
+            case 'ORDER_FULFILLMENT':
+                return <Truck className="h-4 w-4" />;
+            case 'ORDER_MODIFIED':
+                return <Edit3 className="h-4 w-4" />;
+            case 'ORDER_CUSTOMER_UPDATED':
+                return <UserX className="h-4 w-4" />;
+            case 'ORDER_CANCELLATION':
+                return <Ban className="h-4 w-4" />;
+            default:
+                return <CheckIcon className="h-4 w-4" />;
+        }
+    };
+
+    const getTitle = (entry: HistoryEntryItem) => {
+        switch (entry.type) {
+            case 'ORDER_PAYMENT_TRANSITION':
+                if (entry.data.to === 'Settled') {
+                    return <Trans>Payment settled</Trans>;
+                }
+                if (entry.data.to === 'Authorized') {
+                    return <Trans>Payment authorized</Trans>;
+                }
+                if (entry.data.to === 'Declined' || entry.data.to === 'Cancelled') {
+                    return <Trans>Payment failed</Trans>;
+                }
+                return <Trans>Payment transitioned</Trans>;
+            case 'ORDER_REFUND_TRANSITION':
+                if (entry.data.to === 'Settled') {
+                    return <Trans>Refund settled</Trans>;
+                }
+                return <Trans>Refund transitioned</Trans>;
+            case 'ORDER_NOTE':
+                return <Trans>Note added</Trans>;
+            case 'ORDER_STATE_TRANSITION': {
+                if (entry.data.from === 'Created') {
+                    return <Trans>Order placed</Trans>;
+                }
+                if (entry.data.to === 'Delivered') {
+                    return <Trans>Order fulfilled</Trans>;
+                }
+                if (entry.data.to === 'Cancelled') {
+                    return <Trans>Order cancelled</Trans>;
+                }
+                if (entry.data.to === 'Shipped') {
+                    return <Trans>Order shipped</Trans>;
+                }
+                return <Trans>Order transitioned</Trans>;
+            }
+            case 'ORDER_FULFILLMENT_TRANSITION':
+                if (entry.data.to === 'Shipped') {
+                    return <Trans>Order shipped</Trans>;
+                }
+                if (entry.data.to === 'Delivered') {
+                    return <Trans>Order delivered</Trans>;
+                }
+                return <Trans>Fulfillment transitioned</Trans>;
+            case 'ORDER_FULFILLMENT':
+                return <Trans>Fulfillment created</Trans>;
+            case 'ORDER_MODIFIED':
+                return <Trans>Order modified</Trans>;
+            case 'ORDER_CUSTOMER_UPDATED':
+                return <Trans>Customer updated</Trans>;
+            case 'ORDER_CANCELLATION':
+                return <Trans>Order cancelled</Trans>;
+            default:
+                return <Trans>{entry.type.replace(/_/g, ' ').toLowerCase()}</Trans>;
+        }
+    };
+
+    const getIconColor = ({ type, data }: HistoryEntryItem) => {
+        const success = 'bg-success text-success-foreground';
+        const destructive = 'bg-danger text-danger-foreground';
+        const regular = 'bg-muted text-muted-foreground';
+
+        if (type === 'ORDER_PAYMENT_TRANSITION' && data.to === 'Settled') {
+            return success;
+        }
+        if (type === 'ORDER_STATE_TRANSITION' && data.to === 'Delivered') {
+            return success;
+        }
+        if (type === 'ORDER_FULFILLMENT_TRANSITION' && data.to === 'Delivered') {
+            return success;
+        }
+        if (type === 'ORDER_CANCELLATION') {
+            return destructive;
+        }
+        if (type === 'ORDER_STATE_TRANSITION' && data.to === 'Cancelled') {
+            return destructive;
+        }
+        if (type === 'ORDER_PAYMENT_TRANSITION' && (data.to === 'Declined' || data.to === 'Cancelled')) {
+            return destructive;
+        }
+        return regular;
+    };
+
+    const getActorName = (entry: HistoryEntryItem) => {
+        if (entry.administrator) {
+            return `${entry.administrator.firstName} ${entry.administrator.lastName}`;
+        } else if (order?.customer) {
+            return `${order.customer.firstName} ${order.customer.lastName}`;
+        }
+        return '';
+    };
+
+    const isPrimaryEvent = (entry: HistoryEntryItem) => {
+        switch (entry.type) {
+            case 'ORDER_STATE_TRANSITION':
+                return (
+                    entry.data.to === 'Delivered' ||
+                    entry.data.to === 'Cancelled' ||
+                    entry.data.to === 'Settled' ||
+                    entry.data.from === 'Created'
+                );
+            case 'ORDER_REFUND_TRANSITION':
+                return entry.data.to === 'Settled';
+            case 'ORDER_PAYMENT_TRANSITION':
+                return entry.data.to === 'Settled' || entry.data.to === 'Cancelled';
+            case 'ORDER_FULFILLMENT_TRANSITION':
+                return entry.data.to === 'Delivered' || entry.data.to === 'Shipped';
+            case 'ORDER_NOTE':
+            case 'ORDER_MODIFIED':
+            case 'ORDER_CUSTOMER_UPDATED':
+            case 'ORDER_CANCELLATION':
+                return true;
+            default:
+                return false; // All other events are secondary
+        }
+    };
+
+    return {
+        getTimelineIcon,
+        getTitle,
+        getIconColor,
+        getActorName,
+        isPrimaryEvent,
+    };
+}