@vendure/dashboard 3.5.2-master-202512170238 → 3.5.2-master-202512190240

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

@@ -1,4 +1,6 @@
+import { Badge } from '@/vdb/components/ui/badge.js';
 import { TableCell, TableRow } from '@/vdb/components/ui/table.js';
+import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
 import { Trans } from '@lingui/react/macro';
 import { Order } from '../utils/order-types.js';
 import { MoneyGrossNet } from './money-gross-net.js';
@@ -9,6 +11,7 @@ export interface OrderTableTotalsProps {
 }
 
 export function OrderTableTotals({ order, columnCount }: Readonly<OrderTableTotalsProps>) {
+    const { formatCurrency } = useLocalFormat();
     const currencyCode = order.currencyCode;
     return (
         <>
@@ -58,7 +61,19 @@ export function OrderTableTotals({ order, columnCount }: Readonly<OrderTableTota
             </TableRow>
             <TableRow>
                 <TableCell colSpan={columnCount - 1} className="h-12">
-                    <Trans>Shipping</Trans>
+                    <div className="flex flex-wrap gap-1">
+                        <div>
+                            <Trans>Shipping</Trans>
+                        </div>
+                        {order.shippingLines.map(sl => (
+                            <Badge variant="outline" key={sl.id}>
+                                {sl.shippingMethod.name}
+                                {order.shippingLines.length > 1
+                                    ? ` (${formatCurrency(sl.discountedPriceWithTax, order.currencyCode)})`
+                                    : ''}
+                            </Badge>
+                        ))}
+                    </div>
                 </TableCell>
                 <TableCell colSpan={1} className="h-12">
                     <MoneyGrossNet

package/src/app/routes/_authenticated/_product-variants/product-variants.graphql.ts

@@ -88,7 +88,6 @@ export const productVariantDetailDocument = graphql(
                 prices {
                     currencyCode
                     price
-                    customFields
                 }
                 trackInventory
                 outOfStockThreshold

package/src/app/routes/_authenticated/_product-variants/product-variants_.$id.tsx

@@ -54,7 +54,7 @@ export const Route = createFileRoute('/_authenticated/_product-variants/product-
         breadcrumb(_isNew, entity, location) {
             if ((location.search as any).from === 'product') {
                 return [
-                    { path: '/product', label: <Trans>Products</Trans> },
+                    { path: '/products', label: <Trans>Products</Trans> },
                     { path: `/products/${entity?.product.id}`, label: entity?.product.name ?? '' },
                     entity?.name,
                 ];
@@ -97,7 +97,7 @@ function ProductVariantDetailPage() {
                 prices: entity.prices,
                 trackInventory: entity.trackInventory,
                 outOfStockThreshold: entity.outOfStockThreshold,
-                useGlobalOutOfStockThreshold : entity.useGlobalOutOfStockThreshold,
+                useGlobalOutOfStockThreshold: entity.useGlobalOutOfStockThreshold,
                 stockLevels: entity.stockLevels.map(stockLevel => ({
                     stockOnHand: stockLevel.stockOnHand,
                     stockLocationId: stockLevel.stockLocation.id,

package/src/app/routes/_authenticated/_products/products.graphql.ts

@@ -38,6 +38,11 @@ export const productDetailFragment = graphql(
             assets {
                 ...Asset
             }
+            channels {
+                id
+                code
+                token
+            }
             translations {
                 id
                 languageCode

package/src/app/routes/_authenticated/_products/products_.$id.tsx

@@ -31,7 +31,16 @@ import { toast } from 'sonner';
 import { CreateProductVariantsDialog } from './components/create-product-variants-dialog.js';
 import { ProductOptionGroupBadge } from './components/product-option-group-badge.js';
 import { ProductVariantsTable } from './components/product-variants-table.js';
-import { createProductDocument, productDetailDocument, updateProductDocument } from './products.graphql.js';
+import {
+    assignProductsToChannelDocument,
+    createProductDocument,
+    productDetailDocument,
+    removeProductsFromChannelDocument,
+    updateProductDocument,
+} from './products.graphql.js';
+import { api } from '@/vdb/graphql/api.js';
+import { AssignedChannels } from '@/vdb/components/shared/assigned-channels.js';
+import { useChannel } from '@/vdb/hooks/use-channel.js';
 
 const pageId = 'product-detail';
 
@@ -56,6 +65,7 @@ function ProductDetailPage() {
     const creatingNewEntity = params.id === NEW_ENTITY_PATH;
     const { t } = useLingui();
     const refreshRef = useRef<() => void>(() => {});
+    const { channels } = useChannel();
 
     const { form, submitHandler, entity, isPending, refreshEntity, resetForm } = useDetailPage({
         pageId,
@@ -70,6 +80,7 @@ function ProductDetailPage() {
                 featuredAssetId: entity.featuredAsset?.id,
                 assetIds: entity.assets.map(asset => asset.id),
                 facetValueIds: entity.facetValues.map(facetValue => facetValue.id),
+                channelIds: entity.channels.map(c => c.id) ?? [],
                 translations: entity.translations.map(translation => ({
                     id: translation.id,
                     languageCode: translation.languageCode,
@@ -205,6 +216,18 @@ function ProductDetailPage() {
                         )}
                     />
                 </PageBlock>
+                {channels.length > 1 && entity && (
+                    <PageBlock column="side" blockId="channels" title={<Trans>Channels</Trans>}>
+                        <AssignedChannels
+                            channels={entity.channels}
+                            entityId={entity.id}
+                            canUpdate={!creatingNewEntity}
+                            assignMutationFn={api.mutate(assignProductsToChannelDocument)}
+                            removeMutationFn={api.mutate(removeProductsFromChannelDocument)}
+                        />
+                    </PageBlock>
+                )}
+
                 <PageBlock column="side" blockId="assets" title={<Trans>Assets</Trans>}>
                     <FormItem>
                         <FormControl>

package/src/app/routes/_authenticated/_system/components/payload-dialog.tsx

@@ -14,11 +14,18 @@ type PayloadDialogProps = {
     trigger: React.ReactNode;
     title?: string | React.ReactNode;
     description?: string | React.ReactNode;
+    onOpenChange?: (open: boolean) => void;
 };
 
-export function PayloadDialog({ payload, trigger, title, description }: Readonly<PayloadDialogProps>) {
+export function PayloadDialog({
+    payload,
+    trigger,
+    title,
+    description,
+    onOpenChange,
+}: Readonly<PayloadDialogProps>) {
     return (
-        <Dialog>
+        <Dialog onOpenChange={open => onOpenChange?.(open)}>
             <DialogTrigger asChild>{trigger}</DialogTrigger>
             <DialogContent>
                 <DialogHeader>

package/src/app/routes/_authenticated/_system/job-queue.tsx

@@ -78,12 +78,17 @@ function JobQueuePage() {
     const refreshRef = useRef<() => void>(() => {});
     const { t } = useLingui();
     const [refreshInterval, setRefreshInterval] = useState(10000);
+    const isActionMenuOpenRef = useRef(false);
 
     useEffect(() => {
         if (refreshInterval === 0) return;
 
         const interval = setInterval(() => {
-            refreshRef.current();
+            // Pause auto-refresh while the row action dropdown is open
+            // to avoid closing it mid-interaction
+            if (!isActionMenuOpenRef.current) {
+                refreshRef.current();
+            }
         }, refreshInterval);
 
         return () => clearInterval(interval);
@@ -111,6 +116,7 @@ function JobQueuePage() {
                         <PayloadDialog
                             payload={row.original.data}
                             title={<Trans>View job data</Trans>}
+                            onOpenChange={open => (isActionMenuOpenRef.current = open)}
                             description={<Trans>The data that has been passed to the job</Trans>}
                             trigger={
                                 <Button size="sm" variant="secondary">
@@ -129,6 +135,7 @@ function JobQueuePage() {
                             <PayloadDialog
                                 payload={row.original.result}
                                 title={<Trans>View job result</Trans>}
+                                onOpenChange={open => (isActionMenuOpenRef.current = open)}
                                 description={<Trans>The result of the job</Trans>}
                                 trigger={
                                     <Button size="sm" variant="secondary">
@@ -168,7 +175,9 @@ function JobQueuePage() {
                                 {row.original.state}
                                 {row.original.state === 'RUNNING' ? (
                                     <div className="flex items-center gap-2">
-                                        <DropdownMenu>
+                                        <DropdownMenu
+                                            onOpenChange={open => (isActionMenuOpenRef.current = open)}
+                                        >
                                             <DropdownMenuTrigger asChild>
                                                 <Button variant="ghost" size="sm" className="h-6 w-6 p-0">
                                                     <MoreVertical className="h-4 w-4" />

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

@@ -1,4 +1,4 @@
-import { AffixedInput } from '@/vdb/components/data-input/affixed-input.js';
+import { NumberInput } from '@/vdb/components/data-input/number-input.js';
 import { ErrorPage } from '@/vdb/components/shared/error-page.js';
 import { FormFieldWrapper } from '@/vdb/components/shared/form-field-wrapper.js';
 import { PermissionGuard } from '@/vdb/components/shared/permission-guard.js';
@@ -121,14 +121,7 @@ function TaxRateDetailPage() {
                             name="value"
                             label={<Trans>Rate</Trans>}
                             render={({ field }) => (
-                                <AffixedInput
-                                    {...field}
-                                    type="number"
-                                    suffix="%"
-                                    min={0}
-                                    value={field.value}
-                                    onChange={e => field.onChange(e.target.valueAsNumber)}
-                                />
+                                <NumberInput {...field} value={field.value} min={0} step={0.01} suffix="%" />
                             )}
                         />
                         <FormFieldWrapper

package/src/app/routes/_authenticated/_zones/zones.tsx

@@ -25,6 +25,7 @@ function ZoneListPage() {
             title={<Trans>Zones</Trans>}
             defaultVisibility={{
                 name: true,
+                regions: true,
             }}
             customizeColumns={{
                 name: {