@vendure/dashboard 3.3.6-master-202507041203 → 3.4.0-minor-202506250934

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

@@ -1,14 +1,15 @@
-import { Button } from '@/vdb/components/ui/button.js';
-import { Card } from '@/vdb/components/ui/card.js';
-import { Popover, PopoverContent, PopoverTrigger } from '@/vdb/components/ui/popover.js';
-import { api } from '@/vdb/graphql/api.js';
-import { graphql, ResultOf } from '@/vdb/graphql/graphql.js';
-import { Trans, useLingui } from '@/vdb/lib/trans.js';
-import { cn } from '@/vdb/lib/utils.js';
+import { Button } from '@/components/ui/button.js';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover.js';
+import { api } from '@/graphql/api.js';
+import { graphql, ResultOf } from '@/graphql/graphql.js';
 import { useQuery } from '@tanstack/react-query';
-import { Plus } from 'lucide-react';
-import { useState } from 'react';
+import { Trans } from '@/lib/trans.js';
+import { useLingui } from '@/lib/trans.js';
 import { addressFragment } from '../../_customers/customers.graphql.js';
+import { Card } from '@/components/ui/card.js';
+import { cn } from '@/lib/utils.js';
+import { useState } from 'react';
+import { Plus } from 'lucide-react';
 
 const getCustomerAddressesDocument = graphql(
     `
@@ -31,7 +32,7 @@ interface CustomerAddressSelectorProps {
     onSelect: (address: ResultOf<typeof addressFragment>) => void;
 }
 
-export function CustomerAddressSelector({ customerId, onSelect }: Readonly<CustomerAddressSelectorProps>) {
+export function CustomerAddressSelector({ customerId, onSelect }: CustomerAddressSelectorProps) {
     const { i18n } = useLingui();
     const [open, setOpen] = useState(false);
 
@@ -71,7 +72,9 @@ export function CustomerAddressSelector({ customerId, onSelect }: Readonly<Custo
                             addresses.map(address => (
                                 <Card
                                     key={address.id}
-                                    className={cn('p-4 cursor-pointer hover:bg-accent transition-colors')}
+                                    className={cn(
+                                        'p-4 cursor-pointer hover:bg-accent transition-colors',
+                                    )}
                                     onClick={() => {
                                         onSelect(address);
                                         setOpen(false);

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

@@ -1,10 +1,10 @@
-import { ProductVariantSelector } from '@/vdb/components/shared/product-variant-selector.js';
-import { VendureImage } from '@/vdb/components/shared/vendure-image.js';
-import { Button } from '@/vdb/components/ui/button.js';
-import { Input } from '@/vdb/components/ui/input.js';
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/vdb/components/ui/table.js';
-import { ResultOf } from '@/vdb/graphql/graphql.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { ProductVariantSelector } from '@/components/shared/product-variant-selector.js';
+import { VendureImage } from '@/components/shared/vendure-image.js';
+import { Button } from '@/components/ui/button.js';
+import { Input } from '@/components/ui/input.js';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table.js';
+import { ResultOf } from '@/graphql/graphql.js';
+import { Trans } from '@/lib/trans.js';
 import {
     ColumnDef,
     flexRender,
@@ -14,28 +14,22 @@ import {
 } from '@tanstack/react-table';
 import { Trash2 } from 'lucide-react';
 import { useState } from 'react';
-import { UseFormReturn } from 'react-hook-form';
-import {
-    draftOrderEligibleShippingMethodsDocument,
-    orderDetailDocument,
-    orderLineFragment,
-} from '../orders.graphql.js';
+import { draftOrderEligibleShippingMethodsDocument, orderDetailDocument, orderLineFragment } from '../orders.graphql.js';
 import { MoneyGrossNet } from './money-gross-net.js';
-import { OrderLineCustomFieldsForm } from './order-line-custom-fields-form.js';
 import { OrderTableTotals } from './order-table-totals.js';
 import { ShippingMethodSelector } from './shipping-method-selector.js';
+import { OrderLineCustomFieldsForm } from './order-line-custom-fields-form.js';
+import { UseFormReturn } from 'react-hook-form';
 
 type OrderFragment = NonNullable<ResultOf<typeof orderDetailDocument>['order']>;
 type OrderLineFragment = ResultOf<typeof orderLineFragment>;
 
-type ShippingMethodQuote = ResultOf<
-    typeof draftOrderEligibleShippingMethodsDocument
->['eligibleShippingMethodsForDraftOrder'][number];
+type ShippingMethodQuote = ResultOf<typeof draftOrderEligibleShippingMethodsDocument>['eligibleShippingMethodsForDraftOrder'][number];
 
 export interface OrderTableProps {
     order: OrderFragment;
     eligibleShippingMethods: ShippingMethodQuote[];
-    onAddItem: (event: { productVariantId: string }) => void;
+    onAddItem: (event: { productVariantId: string; }) => void;
     onAdjustLine: (event: { lineId: string; quantity: number; customFields: Record<string, any> }) => void;
     onRemoveLine: (event: { lineId: string }) => void;
     onSetShippingMethod: (event: { shippingMethodId: string }) => void;
@@ -44,17 +38,9 @@ export interface OrderTableProps {
     orderLineForm: UseFormReturn<any>;
 }
 
-export function EditOrderTable({
-    order,
-    eligibleShippingMethods,
-    onAddItem,
-    onAdjustLine,
-    onRemoveLine,
-    onSetShippingMethod,
-    onApplyCouponCode,
-    onRemoveCouponCode,
-    orderLineForm,
-}: Readonly<OrderTableProps>) {
+export function EditOrderTable({ order, eligibleShippingMethods, onAddItem, onAdjustLine, onRemoveLine,
+    onSetShippingMethod, onApplyCouponCode, onRemoveCouponCode, orderLineForm }: OrderTableProps) {
+
     const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});
     const [couponCode, setCouponCode] = useState('');
 
@@ -81,56 +67,36 @@ export function EditOrderTable({
             header: 'Unit price',
             accessorKey: 'unitPriceWithTax',
             cell: ({ row }) => {
-                const value = row.original.unitPriceWithTax;
+                const value = row.original.unitPriceWithTax
                 const netValue = row.original.unitPrice;
-                return <MoneyGrossNet priceWithTax={value} price={netValue} currencyCode={currencyCode} />;
+                return <MoneyGrossNet priceWithTax={value} price={netValue} currencyCode={currencyCode} />
             },
         },
         {
             header: 'Quantity',
             accessorKey: 'quantity',
             cell: ({ row }) => {
-                return (
-                    <div className="flex gap-2">
-                        <Input
-                            type="number"
-                            value={row.original.quantity}
-                            onChange={e =>
-                                onAdjustLine({
-                                    lineId: row.original.id,
-                                    quantity: e.target.valueAsNumber,
-                                    customFields: row.original.customFields,
-                                })
-                            }
-                        />
-                        <Button
-                            variant="outline"
-                            type="button"
-                            size="icon"
-                            onClick={() => onRemoveLine({ lineId: row.original.id })}
-                        >
-                            <Trash2 />
-                        </Button>
-                        {row.original.customFields && (
-                            <OrderLineCustomFieldsForm
-                                onUpdate={customFields => {
-                                    onAdjustLine({
-                                        lineId: row.original.id,
-                                        quantity: row.original.quantity,
-                                        customFields: customFields,
-                                    });
-                                }}
-                                form={orderLineForm}
-                            />
-                        )}
-                    </div>
-                );
+                return <div className="flex gap-2">
+                    <Input type="number" value={row.original.quantity} onChange={e => onAdjustLine({ lineId: row.original.id, quantity: e.target.valueAsNumber, customFields: row.original.customFields })} />
+                    <Button variant="outline" type="button" size="icon" onClick={() => onRemoveLine({ lineId: row.original.id })}>
+                        <Trash2 />
+                    </Button>
+                    {row.original.customFields &&
+                        <OrderLineCustomFieldsForm onUpdate={(customFields) => {
+                            
+                            onAdjustLine({
+                                lineId: row.original.id,
+                                quantity: row.original.quantity,
+                                customFields: customFields
+                            });
+                        }} form={orderLineForm} />}
+                </div>;
             },
         },
         {
             header: 'Total',
             accessorKey: 'linePriceWithTax',
-            cell: ({ row }) => {
+            cell: ({ cell, row }) => {
                 const value = row.original.linePriceWithTax;
                 const netValue = row.original.linePrice;
                 return <MoneyGrossNet priceWithTax={value} price={netValue} currencyCode={currencyCode} />;
@@ -164,9 +130,9 @@ export function EditOrderTable({
                                             {header.isPlaceholder
                                                 ? null
                                                 : flexRender(
-                                                      header.column.columnDef.header,
-                                                      header.getContext(),
-                                                  )}
+                                                    header.column.columnDef.header,
+                                                    header.getContext(),
+                                                )}
                                         </TableHead>
                                     );
                                 })}
@@ -174,26 +140,24 @@ export function EditOrderTable({
                         ))}
                     </TableHeader>
                     <TableBody>
-                        {table.getRowModel().rows?.length
-                            ? table.getRowModel().rows.map(row => (
-                                  <TableRow key={row.id} data-state={row.getIsSelected() && 'selected'}>
-                                      {row.getVisibleCells().map(cell => (
-                                          <TableCell key={cell.id}>
-                                              {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                                          </TableCell>
-                                      ))}
-                                  </TableRow>
-                              ))
-                            : null}
+                        {table.getRowModel().rows?.length ? (
+                            table.getRowModel().rows.map(row => (
+                                <TableRow key={row.id} data-state={row.getIsSelected() && 'selected'}>
+                                    {row.getVisibleCells().map(cell => (
+                                        <TableCell key={cell.id}>
+                                            {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                                        </TableCell>
+                                    ))}
+                                </TableRow>
+                            ))
+                        ) : null}
                         <TableRow>
                             <TableCell colSpan={columns.length} className="h-12">
                                 <div className="my-4 flex justify-center">
                                     <div className="max-w-lg">
-                                        <ProductVariantSelector
-                                            onProductVariantIdChange={variantId => {
-                                                onAddItem({ productVariantId: variantId });
-                                            }}
-                                        />
+                                        <ProductVariantSelector onProductVariantIdChange={variantId => {
+                                            onAddItem({ productVariantId: variantId });
+                                        }} />
                                     </div>
                                 </div>
                             </TableCell>
@@ -204,7 +168,7 @@ export function EditOrderTable({
                                     eligibleShippingMethods={eligibleShippingMethods}
                                     selectedShippingMethodId={order.shippingLines?.[0]?.shippingMethod?.id}
                                     currencyCode={currencyCode}
-                                    onSelect={shippingMethodId => onSetShippingMethod({ shippingMethodId })}
+                                    onSelect={(shippingMethodId) => onSetShippingMethod({ shippingMethodId })}
                                 />
                             </TableCell>
                         </TableRow>
@@ -216,8 +180,8 @@ export function EditOrderTable({
                                             type="text"
                                             placeholder="Coupon code"
                                             value={couponCode}
-                                            onChange={e => setCouponCode(e.target.value)}
-                                            onKeyDown={e => {
+                                            onChange={(e) => setCouponCode(e.target.value)}
+                                            onKeyDown={(e) => {
                                                 if (e.key === 'Enter') {
                                                     onApplyCouponCode({ couponCode });
                                                 }
@@ -233,7 +197,7 @@ export function EditOrderTable({
                                     </div>
                                     {order.couponCodes?.length > 0 && (
                                         <div className="flex flex-wrap gap-2">
-                                            {order.couponCodes.map(code => (
+                                            {order.couponCodes.map((code) => (
                                                 <div
                                                     key={code}
                                                     className="flex items-center gap-2 px-3 py-1 text-sm border rounded-md"
@@ -244,9 +208,7 @@ export function EditOrderTable({
                                                         variant="ghost"
                                                         size="sm"
                                                         className="h-6 w-6 p-0"
-                                                        onClick={() =>
-                                                            onRemoveCouponCode({ couponCode: code })
-                                                        }
+                                                        onClick={() => onRemoveCouponCode({ couponCode: code })}
                                                     >
                                                         <Trash2 className="h-4 w-4" />
                                                     </Button>

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

@@ -1,4 +1,4 @@
-import { Money } from '@/vdb/components/data-display/money.js';
+import { Money } from "@/components/data-display/money.js";
 
 export interface MoneyGrossNetProps {
     priceWithTax: number;
@@ -6,15 +6,13 @@ export interface MoneyGrossNetProps {
     currencyCode: string;
 }
 
-export function MoneyGrossNet({ priceWithTax, price, currencyCode }: Readonly<MoneyGrossNetProps>) {
-    return (
-        <div className="flex flex-col gap-1">
-            <div>
-                <Money value={priceWithTax} currencyCode={currencyCode} />
-            </div>
-            <div className="text-xs text-muted-foreground">
-                <Money value={price} currencyCode={currencyCode} />
-            </div>
+export function MoneyGrossNet({ priceWithTax, price, currencyCode }: MoneyGrossNetProps) {
+    return   <div className="flex flex-col gap-1">
+        <div>
+            <Money value={priceWithTax} currencyCode={currencyCode} />
         </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,11 +1,12 @@
-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';
 
 type OrderAddress = ResultOf<typeof orderAddressFragment>;
 
-export function OrderAddress({ address }: Readonly<{ address?: OrderAddress }>) {
+export function OrderAddress({ address }: { address?: OrderAddress }) {
     if (!address) {
         return null;
     }
@@ -24,11 +25,11 @@ export function OrderAddress({ address }: Readonly<{ address?: OrderAddress }>)
     } = address;
 
     return (
-        <div className="space-y-1 text-sm">
+        <div className="space-y-2">
             {fullName && <p className="font-medium">{fullName}</p>}
             {company && <p className="text-sm text-muted-foreground">{company}</p>}
 
-            <div>
+            <div className="text-sm">
                 {streetLine1 && <p>{streetLine1}</p>}
                 {streetLine2 && <p>{streetLine2}</p>}
                 <p>{[city, province].filter(Boolean).join(', ')}</p>

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

@@ -1,78 +1,73 @@
-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 { Alert, AlertDescription } from '@/components/ui/alert.js';
+import { Skeleton } from '@/components/ui/skeleton.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 }: 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>
-        );
-    }
+export function OrderHistoryContainer({ orderId }: OrderHistoryContainerProps) {
+  const { 
+    historyEntries, 
+    order, 
+    loading, 
+    error, 
+    addNote, 
+    updateNote, 
+    deleteNote,
+    fetchNextPage,
+    hasNextPage,
+  } = useOrderHistory({ orderId, pageSize: 10 });
 
-    if (error) {
-        return (
-            <Alert variant="destructive">
-                <TriangleAlert className="h-4 w-4" />
-                <AlertDescription>
-                    <Trans>Error loading order history: {error.message}</Trans>
-                </AlertDescription>
-            </Alert>
-        );
-    }
+  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 (!order) {
-        return (
-            <Alert>
-                <AlertDescription>
-                    <Trans>Order not found</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 (
-        <>
-            <OrderHistory
-                order={order}
-                historyEntries={historyEntries ?? []}
-                onAddNote={addNote}
-                onUpdateNote={updateNote}
-                onDeleteNote={deleteNote}
-            />
-            {hasNextPage && (
-                <Button type="button" variant="outline" onClick={() => fetchNextPage()}>
-                    <Trans>Load more</Trans>
-                </Button>
-            )}
-        </>
+      <Alert>
+        <AlertDescription><Trans>Order not found</Trans></AlertDescription>
+      </Alert>
     );
-}
+  }
+
+  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>
+      )}
+    </>
+  );
+} 

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

@@ -1,9 +1,9 @@
-import { HistoryEntry, HistoryEntryItem } from '@/vdb/components/shared/history-timeline/history-entry.js';
-import { HistoryNoteInput } from '@/vdb/components/shared/history-timeline/history-note-input.js';
-import { HistoryTimeline } from '@/vdb/components/shared/history-timeline/history-timeline.js';
-import { Badge } from '@/vdb/components/ui/badge.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Badge } from '@/components/ui/badge.js';
+import { Trans } from '@/lib/trans.js';
 import { ArrowRightToLine, CheckIcon, CreditCardIcon, SquarePen } from 'lucide-react';
+import { HistoryEntry, HistoryEntryItem } from '@/components/shared/history-timeline/history-entry.js';
+import { HistoryNoteInput } from '@/components/shared/history-timeline/history-note-input.js';
+import { HistoryTimeline } from '@/components/shared/history-timeline/history-timeline.js';
 
 interface OrderHistoryProps {
     order: {
@@ -17,12 +17,7 @@ interface OrderHistoryProps {
     onDeleteNote?: (entryId: string) => void;
 }
 
-export function OrderHistory({
-    historyEntries,
-    onAddNote,
-    onUpdateNote,
-    onDeleteNote,
-}: Readonly<OrderHistoryProps>) {
+export function OrderHistory({ historyEntries, onAddNote, onUpdateNote, onDeleteNote }: OrderHistoryProps) {
     const getTimelineIcon = (entry: OrderHistoryProps['historyEntries'][0]) => {
         switch (entry.type) {
             case 'ORDER_PAYMENT_TRANSITION':

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

@@ -1,7 +1,7 @@
-import { api } from '@/vdb/graphql/api.js';
-import { graphql, ResultOf } from '@/vdb/graphql/graphql.js';
-import { useLingui } from '@/vdb/lib/trans.js';
-import { QueryKey, useInfiniteQuery, useMutation } from '@tanstack/react-query';
+import { api } from '@/graphql/api.js';
+import { graphql, ResultOf } from '@/graphql/graphql.js';
+import { useLingui } from '@/lib/trans.js';
+import { useMutation, useInfiniteQuery } from '@tanstack/react-query';
 import { useState } from 'react';
 import { toast } from 'sonner';
 
@@ -55,10 +55,6 @@ export interface UseOrderHistoryResult {
     hasNextPage: boolean;
 }
 
-export function orderHistoryQueryKey(orderId: string): QueryKey {
-    return ['OrderHistory', orderId];
-}
-
 export function useOrderHistory({
     orderId,
     pageSize = 10,
@@ -87,7 +83,7 @@ export function useOrderHistory({
                     take: pageSize,
                 },
             }),
-        queryKey: orderHistoryQueryKey(orderId),
+        queryKey: ['OrderHistory', orderId],
         initialPageParam: 0,
         getNextPageParam: (lastPage, _pages, lastPageParam) => {
             const totalItems = lastPage.order?.history?.totalItems ?? 0;

package/src/app/routes/_authenticated/_orders/components/order-line-custom-fields-form.tsx

@@ -1,20 +1,20 @@
-import { CustomFieldsForm } from '@/vdb/components/shared/custom-fields-form.js';
-import { Button } from '@/vdb/components/ui/button.js';
-import { Form } from '@/vdb/components/ui/form.js';
-import { Popover, PopoverContent, PopoverTrigger } from '@/vdb/components/ui/popover.js';
+import { CustomFieldsForm } from '@/components/shared/custom-fields-form.js';
+import { Button } from '@/components/ui/button.js';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover.js';
 import { Settings2 } from 'lucide-react';
 import { UseFormReturn } from 'react-hook-form';
+import { Form } from '@/components/ui/form.js';
 
 interface OrderLineCustomFieldsFormProps {
     onUpdate: (customFieldValues: Record<string, any>) => void;
     form: UseFormReturn<any>;
 }
 
-export function OrderLineCustomFieldsForm({ onUpdate, form }: Readonly<OrderLineCustomFieldsFormProps>) {
+export function OrderLineCustomFieldsForm({ onUpdate, form }: OrderLineCustomFieldsFormProps) {
     const onSubmit = (values: any) => {
         onUpdate(values.input?.customFields);
     };
-
+    
     return (
         <Popover>
             <PopoverTrigger asChild>
@@ -26,11 +26,7 @@ export function OrderLineCustomFieldsForm({ onUpdate, form }: Readonly<OrderLine
                 <Form {...form}>
                     <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
                         <h4 className="font-medium leading-none">Custom Fields</h4>
-                        <CustomFieldsForm
-                            entityType="OrderLine"
-                            control={form.control}
-                            formPathPrefix="input"
-                        />
+                        <CustomFieldsForm entityType="OrderLine" control={form.control} formPathPrefix='input' />
                         <Button type="submit" className="w-full" disabled={!form.formState.isValid}>
                             Update
                         </Button>