@vendure/dashboard 3.4.0-minor-202506250934 → 3.4.0

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

@@ -0,0 +1,153 @@
+import { LabeledData } from '@/vdb/components/labeled-data.js';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/vdb/components/ui/collapsible.js';
+import { api } from '@/vdb/graphql/api.js';
+import { ResultOf } from '@/vdb/graphql/graphql.js';
+import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
+import { Trans, useLingui } from '@/vdb/lib/trans.js';
+import { useMutation } from '@tanstack/react-query';
+import { ChevronDown } from 'lucide-react';
+import { toast } from 'sonner';
+import {
+    fulfillmentFragment,
+    orderDetailFragment,
+    transitionFulfillmentToStateDocument,
+} from '../orders.graphql.js';
+import { getTypeForState, StateTransitionControl } from './state-transition-control.js';
+
+type Order = NonNullable<ResultOf<typeof orderDetailFragment>>;
+
+type FulfillmentDetailsProps = {
+    order: Order;
+    fulfillment: ResultOf<typeof fulfillmentFragment>;
+    onSuccess?: () => void;
+};
+
+export function FulfillmentDetails({ order, fulfillment, onSuccess }: Readonly<FulfillmentDetailsProps>) {
+    const { formatDate } = useLocalFormat();
+    const { i18n } = useLingui();
+
+    // Create a map of order lines by ID for quick lookup
+    const orderLinesMap = new Map(order.lines.map(line => [line.id, line]));
+
+    const transitionFulfillmentMutation = useMutation({
+        mutationFn: api.mutate(transitionFulfillmentToStateDocument),
+        onSuccess: (result: ResultOf<typeof transitionFulfillmentToStateDocument>) => {
+            const fulfillment = result.transitionFulfillmentToState;
+            if (fulfillment.__typename === 'Fulfillment') {
+                toast.success(i18n.t('Fulfillment state updated successfully'));
+                onSuccess?.();
+            } else {
+                toast.error(fulfillment.message ?? i18n.t('Failed to update fulfillment state'));
+            }
+        },
+        onError: error => {
+            toast.error(i18n.t('Failed to update fulfillment state'));
+        },
+    });
+
+    const nextSuggestedState = (): string | undefined => {
+        const { nextStates } = fulfillment;
+        const namedStateOrDefault = (targetState: string) =>
+            nextStates.includes(targetState) ? targetState : nextStates[0];
+
+        switch (fulfillment.state) {
+            case 'Pending':
+                return namedStateOrDefault('Shipped');
+            case 'Shipped':
+                return namedStateOrDefault('Delivered');
+            default:
+                return nextStates.find(s => s !== 'Cancelled');
+        }
+    };
+
+    const nextOtherStates = (): string[] => {
+        const suggested = nextSuggestedState();
+        return fulfillment.nextStates.filter(s => s !== suggested);
+    };
+
+    const handleStateTransition = (state: string) => {
+        transitionFulfillmentMutation.mutate({
+            id: fulfillment.id,
+            state,
+        });
+    };
+
+    const getFulfillmentActions = () => {
+        const actions = [];
+
+        const suggested = nextSuggestedState();
+        if (suggested) {
+            actions.push({
+                label: `Transition to ${suggested}`,
+                onClick: () => handleStateTransition(suggested),
+                disabled: transitionFulfillmentMutation.isPending,
+            });
+        }
+
+        nextOtherStates().forEach(state => {
+            actions.push({
+                label: `Transition to ${state}`,
+                type: getTypeForState(state),
+                onClick: () => handleStateTransition(state),
+                disabled: transitionFulfillmentMutation.isPending,
+            });
+        });
+
+        return actions;
+    };
+
+    return (
+        <div className="space-y-1 p-3 border rounded-md">
+            <div className="space-y-1">
+                <LabeledData label={<Trans>Fulfillment ID</Trans>} value={fulfillment.id.slice(-8)} />
+                <LabeledData label={<Trans>Method</Trans>} value={fulfillment.method} />
+                <LabeledData label={<Trans>State</Trans>} value={fulfillment.state} />
+                {fulfillment.trackingCode && (
+                    <LabeledData label={<Trans>Tracking code</Trans>} value={fulfillment.trackingCode} />
+                )}
+                <LabeledData label={<Trans>Created</Trans>} value={formatDate(fulfillment.createdAt)} />
+            </div>
+
+            {fulfillment.lines.length > 0 && (
+                <div className="mt-3 pt-3 border-t">
+                    <Collapsible>
+                        <CollapsibleTrigger className="flex items-center justify-between w-full text-sm hover:underline text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-md p-1 -m-1">
+                            <Trans>
+                                Fulfilled items (
+                                {fulfillment.lines.reduce((acc, line) => acc + line.quantity, 0)})
+                            </Trans>
+                            <ChevronDown className="h-4 w-4 transition-transform duration-200 data-[state=open]:rotate-180" />
+                        </CollapsibleTrigger>
+                        <CollapsibleContent className="mt-2 space-y-1">
+                            {fulfillment.lines.map(line => {
+                                const orderLine = orderLinesMap.get(line.orderLineId);
+                                const productName = orderLine?.productVariant?.name ?? 'Unknown product';
+                                const sku = orderLine?.productVariant?.sku;
+
+                                return (
+                                    <div key={line.orderLineId} className="text-sm text-muted-foreground">
+                                        <div className="font-medium text-foreground text-xs">
+                                            {productName}
+                                        </div>
+                                        <div className="flex items-center gap-2 text-xs">
+                                            <span>Qty: {line.quantity}</span>
+                                            {sku && <span>SKU: {sku}</span>}
+                                        </div>
+                                    </div>
+                                );
+                            })}
+                        </CollapsibleContent>
+                    </Collapsible>
+                </div>
+            )}
+
+            <div className="mt-3 pt-3 border-t">
+                <StateTransitionControl
+                    currentState={fulfillment.state}
+                    actions={getFulfillmentActions()}
+                    isLoading={transitionFulfillmentMutation.isPending}
+                />
+            </div>
+        </div>
+    );
+}

package/src/app/routes/_authenticated/_orders/components/money-gross-net.tsx

@@ -1,4 +1,4 @@
-import { Money } from "@/components/data-display/money.js";
+import { Money } from '@/vdb/components/data-display/money.js';
 
 export interface MoneyGrossNetProps {
     priceWithTax: number;
@@ -6,13 +6,15 @@ export interface MoneyGrossNetProps {
     currencyCode: string;
 }
 
-export function MoneyGrossNet({ priceWithTax, price, currencyCode }: MoneyGrossNetProps) {
-    return   <div className="flex flex-col gap-1">
-        <div>
-            <Money value={priceWithTax} currencyCode={currencyCode} />
+export function MoneyGrossNet({ priceWithTax, price, currencyCode }: Readonly<MoneyGrossNetProps>) {
+    return (
+        <div className="flex flex-col gap-1">
+            <div>
+                <Money value={priceWithTax} currency={currencyCode} />
+            </div>
+            <div className="text-xs text-muted-foreground">
+                <Money value={price} currency={currencyCode} />
+            </div>
         </div>
-        <div className="text-xs text-muted-foreground">
-            <Money value={price} currencyCode={currencyCode} />
-        </div>
-    </div>;
+    );
 }

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

@@ -1,15 +1,14 @@
+import { Separator } from '@/vdb/components/ui/separator.js';
 import { ResultOf } from 'gql.tada';
+import { Globe, Phone } from 'lucide-react';
 import { orderAddressFragment } from '../orders.graphql.js';
-import { Phone } from 'lucide-react';
-import { Separator } from '@/components/ui/separator.js';
-import { Globe } from 'lucide-react';
+import { Trans } from '@/vdb/lib/trans.js';
 
-type OrderAddress = ResultOf<typeof orderAddressFragment>;
+type OrderAddress = Omit<ResultOf<typeof orderAddressFragment>, 'country'> & {
+    country: string | { code: string; name: string } | null;
+};
 
-export function OrderAddress({ address }: { address?: OrderAddress }) {
-    if (!address) {
-        return null;
-    }
+export function OrderAddress({ address }: Readonly<{ address?: OrderAddress }>) {
 
     const {
         fullName,
@@ -24,12 +23,19 @@ export function OrderAddress({ address }: { address?: OrderAddress }) {
         phoneNumber,
     } = address;
 
+    const countryName = typeof country === 'string' ? country : country?.name;
+    const countryCodeString = country && typeof country !== 'string' ? country?.code : countryCode;
+
+    if (!address || Object.values(address).every(value => !value)) {
+        return <div className="text-sm text-muted-foreground"><Trans>No address</Trans></div>;
+    }
+
     return (
-        <div className="space-y-2">
+        <div className="space-y-1 text-sm">
             {fullName && <p className="font-medium">{fullName}</p>}
             {company && <p className="text-sm text-muted-foreground">{company}</p>}
 
-            <div className="text-sm">
+            <div>
                 {streetLine1 && <p>{streetLine1}</p>}
                 {streetLine2 && <p>{streetLine2}</p>}
                 <p>{[city, province].filter(Boolean).join(', ')}</p>
@@ -37,9 +43,9 @@ export function OrderAddress({ address }: { address?: OrderAddress }) {
                 {country && (
                     <div className="flex items-center gap-1.5 mt-1">
                         <Globe className="h-3 w-3 text-muted-foreground" />
-                        <span>{country}</span>
-                        {countryCode && (
-                            <span className="text-xs text-muted-foreground">({countryCode})</span>
+                        <span>{countryName}</span>
+                        {countryCodeString && (
+                            <span className="text-xs text-muted-foreground">({countryCodeString})</span>
                         )}
                     </div>
                 )}

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

@@ -1,73 +1,78 @@
-import { Alert, AlertDescription } from '@/components/ui/alert.js';
-import { Skeleton } from '@/components/ui/skeleton.js';
+import { Alert, AlertDescription } from '@/vdb/components/ui/alert.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { Skeleton } from '@/vdb/components/ui/skeleton.js';
+import { Trans } from '@/vdb/lib/trans.js';
 import { TriangleAlert } from 'lucide-react';
 import { OrderHistory } from './order-history.js';
 import { useOrderHistory } from './use-order-history.js';
-import { Trans } from '@/lib/trans.js';
-import { Button } from '@/components/ui/button.js';
+
 interface OrderHistoryContainerProps {
-  orderId: string;
+    orderId: string;
 }
 
-export function OrderHistoryContainer({ orderId }: OrderHistoryContainerProps) {
-  const { 
-    historyEntries, 
-    order, 
-    loading, 
-    error, 
-    addNote, 
-    updateNote, 
-    deleteNote,
-    fetchNextPage,
-    hasNextPage,
-  } = useOrderHistory({ orderId, pageSize: 10 });
+export function OrderHistoryContainer({ orderId }: Readonly<OrderHistoryContainerProps>) {
+    const {
+        historyEntries,
+        order,
+        loading,
+        error,
+        addNote,
+        updateNote,
+        deleteNote,
+        fetchNextPage,
+        hasNextPage,
+    } = useOrderHistory({ orderId, pageSize: 10 });
 
-  if (loading && !order) {
-    return (
-      <div className="space-y-4">
-        <h2 className="text-xl font-semibold"><Trans>Order history</Trans></h2>
-        <div className="space-y-2">
-          <Skeleton className="h-20 w-full" />
-          <Skeleton className="h-24 w-full" />
-          <Skeleton className="h-24 w-full" />
-        </div>
-      </div>
-    );
-  }
+    if (loading && !order) {
+        return (
+            <div className="space-y-4">
+                <h2 className="text-xl font-semibold">
+                    <Trans>Order history</Trans>
+                </h2>
+                <div className="space-y-2">
+                    <Skeleton className="h-20 w-full" />
+                    <Skeleton className="h-24 w-full" />
+                    <Skeleton className="h-24 w-full" />
+                </div>
+            </div>
+        );
+    }
 
-  if (error) {
-    return (
-      <Alert variant="destructive">
-        <TriangleAlert className="h-4 w-4" />
-        <AlertDescription>
-          <Trans>Error loading order history: {error.message}</Trans>
-        </AlertDescription>
-      </Alert>
-    );
-  }
+    if (error) {
+        return (
+            <Alert variant="destructive">
+                <TriangleAlert className="h-4 w-4" />
+                <AlertDescription>
+                    <Trans>Error loading order history: {error.message}</Trans>
+                </AlertDescription>
+            </Alert>
+        );
+    }
+
+    if (!order) {
+        return (
+            <Alert>
+                <AlertDescription>
+                    <Trans>Order not found</Trans>
+                </AlertDescription>
+            </Alert>
+        );
+    }
 
-  if (!order) {
     return (
-      <Alert>
-        <AlertDescription><Trans>Order not found</Trans></AlertDescription>
-      </Alert>
+        <>
+            <OrderHistory
+                order={order}
+                historyEntries={historyEntries ?? []}
+                onAddNote={addNote}
+                onUpdateNote={updateNote}
+                onDeleteNote={deleteNote}
+            />
+            {hasNextPage && (
+                <Button type="button" variant="outline" onClick={() => fetchNextPage()}>
+                    <Trans>Load more</Trans>
+                </Button>
+            )}
+        </>
     );
-  }
-
-  return (
-    <>
-      <OrderHistory
-        order={order}
-        historyEntries={historyEntries ?? []}
-        onAddNote={addNote}
-        onUpdateNote={updateNote}
-        onDeleteNote={deleteNote}
-      />
-      {hasNextPage && (
-        <Button type="button" variant="outline" onClick={() => fetchNextPage()}>
-          <Trans>Load more</Trans>
-        </Button>
-      )}
-    </>
-  );
-} 
+}