@vendure/dashboard 3.4.0-minor-202506250934 → 3.4.0

package/src/lib/components/shared/assign-to-channel-bulk-action.tsx

@@ -0,0 +1,71 @@
+import { LayersIcon } from 'lucide-react';
+import { useState } from 'react';
+
+import { DataTableBulkActionItem } from '@/vdb/components/data-table/data-table-bulk-action-item.js';
+import { AssignToChannelDialog } from '@/vdb/components/shared/assign-to-channel-dialog.js';
+import { usePaginatedList } from '@/vdb/components/shared/paginated-list-data-table.js';
+import { useChannel } from '@/vdb/hooks/use-channel.js';
+import { Trans } from '@/vdb/lib/trans.js';
+
+interface AssignToChannelBulkActionProps {
+    selection: any[];
+    table: any;
+    entityType: string;
+    mutationFn: (variables: any) => Promise<any>;
+    requiredPermissions: string[];
+    buildInput: (channelId: string, additionalData?: Record<string, any>) => Record<string, any>;
+    additionalFields?: React.ReactNode;
+    additionalData?: Record<string, any>;
+    /**
+     * Additional callback to run on success, after the standard refetch and reset
+     */
+    onSuccess?: () => void;
+}
+
+export function AssignToChannelBulkAction({
+    selection,
+    table,
+    entityType,
+    mutationFn,
+    requiredPermissions,
+    buildInput,
+    additionalFields,
+    additionalData = {},
+    onSuccess,
+}: Readonly<AssignToChannelBulkActionProps>) {
+    const { refetchPaginatedList } = usePaginatedList();
+    const { channels } = useChannel();
+    const [dialogOpen, setDialogOpen] = useState(false);
+
+    if (channels.length < 2) {
+        return null;
+    }
+
+    const handleSuccess = () => {
+        refetchPaginatedList();
+        table.resetRowSelection();
+        onSuccess?.();
+    };
+
+    return (
+        <>
+            <DataTableBulkActionItem
+                requiresPermission={requiredPermissions}
+                onClick={() => setDialogOpen(true)}
+                label={<Trans>Assign to channel</Trans>}
+                icon={LayersIcon}
+            />
+            <AssignToChannelDialog
+                open={dialogOpen}
+                onOpenChange={setDialogOpen}
+                entityIds={selection.map(s => s.id)}
+                entityType={entityType}
+                mutationFn={mutationFn}
+                onSuccess={handleSuccess}
+                buildInput={buildInput}
+                additionalFields={additionalFields}
+                additionalData={additionalData}
+            />
+        </>
+    );
+}

package/src/lib/components/shared/assign-to-channel-dialog.tsx

@@ -0,0 +1,155 @@
+import { useMutation } from '@tanstack/react-query';
+import { ReactNode, useState } from 'react';
+import { toast } from 'sonner';
+
+import { ChannelCodeLabel } from '@/vdb/components/shared/channel-code-label.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from '@/vdb/components/ui/dialog.js';
+import { Input } from '@/vdb/components/ui/input.js';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/vdb/components/ui/select.js';
+import { ResultOf } from '@/vdb/graphql/graphql.js';
+import { Trans, useLingui } from '@/vdb/lib/trans.js';
+
+import { useChannel } from '@/vdb/hooks/use-channel.js';
+
+interface AssignToChannelDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    entityIds: string[];
+    entityType: string;
+    mutationFn: (variables: any) => Promise<ResultOf<any>>;
+    onSuccess?: () => void;
+    /**
+     * Function to build the input object for the mutation
+     * @param channelId - The selected channel ID
+     * @param additionalData - Any additional data (like priceFactor for products)
+     * @returns The input object for the mutation
+     */
+    buildInput: (channelId: string, additionalData?: Record<string, any>) => Record<string, any>;
+    /**
+     * Optional additional form fields to render
+     */
+    additionalFields?: ReactNode;
+    /**
+     * Optional additional data to pass to buildInput
+     */
+    additionalData?: Record<string, any>;
+}
+
+export function AssignToChannelDialog({
+    open,
+    onOpenChange,
+    entityIds,
+    entityType,
+    mutationFn,
+    onSuccess,
+    buildInput,
+    additionalFields,
+    additionalData = {},
+}: Readonly<AssignToChannelDialogProps>) {
+    const { i18n } = useLingui();
+    const [selectedChannelId, setSelectedChannelId] = useState<string>('');
+    const { channels, selectedChannel } = useChannel();
+
+    // Filter out the currently selected channel from available options
+    const availableChannels = channels.filter(channel => channel.id !== selectedChannel?.id);
+
+    const { mutate, isPending } = useMutation({
+        mutationFn,
+        onSuccess: () => {
+            toast.success(i18n.t(`Successfully assigned ${entityIds.length} ${entityType} to channel`));
+            onSuccess?.();
+            onOpenChange(false);
+        },
+        onError: () => {
+            toast.error(`Failed to assign ${entityIds.length} ${entityType} to channel`);
+        },
+    });
+
+    const handleAssign = () => {
+        if (!selectedChannelId) {
+            toast.error('Please select a channel');
+            return;
+        }
+
+        const input = buildInput(selectedChannelId, additionalData);
+        mutate({ input });
+    };
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent className="sm:max-w-[425px]">
+                <DialogHeader>
+                    <DialogTitle>
+                        <Trans>Assign {entityType} to channel</Trans>
+                    </DialogTitle>
+                    <DialogDescription>
+                        <Trans>
+                            Select a channel to assign {entityIds.length} {entityType} to
+                        </Trans>
+                    </DialogDescription>
+                </DialogHeader>
+                <div className="grid gap-4 py-4">
+                    <div className="grid gap-2">
+                        <label className="text-sm font-medium">
+                            <Trans>Channel</Trans>
+                        </label>
+                        <Select value={selectedChannelId} onValueChange={setSelectedChannelId}>
+                            <SelectTrigger>
+                                <SelectValue placeholder={i18n.t('Select a channel')} />
+                            </SelectTrigger>
+                            <SelectContent>
+                                {availableChannels.map(channel => (
+                                    <SelectItem key={channel.id} value={channel.id}>
+                                        <ChannelCodeLabel code={channel.code} />
+                                    </SelectItem>
+                                ))}
+                            </SelectContent>
+                        </Select>
+                    </div>
+                    {additionalFields}
+                </div>
+                <DialogFooter>
+                    <Button variant="outline" onClick={() => onOpenChange(false)}>
+                        <Trans>Cancel</Trans>
+                    </Button>
+                    <Button onClick={handleAssign} disabled={!selectedChannelId || isPending}>
+                        <Trans>Assign</Trans>
+                    </Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    );
+}
+
+/**
+ * Hook for managing price factor state in assign-to-channel dialogs
+ */
+export function usePriceFactor() {
+    const [priceFactor, setPriceFactor] = useState<number>(1);
+
+    const priceFactorField = (
+        <div className="grid gap-2">
+            <label className="text-sm font-medium">
+                <Trans>Price conversion factor</Trans>
+            </label>
+            <Input
+                type="number"
+                min="0"
+                max="99999"
+                step="0.01"
+                value={priceFactor}
+                onChange={e => setPriceFactor(parseFloat(e.target.value) || 1)}
+            />
+        </div>
+    );
+
+    return { priceFactor, priceFactorField };
+}

package/src/lib/components/shared/assigned-facet-values.tsx

@@ -57,11 +57,7 @@ export function AssignedFacetValues({
                     );
                 })}
             </div>
-            {canUpdate && (
-                <FacetValueSelector
-                    onValueSelect={onSelectHandler}
-                />
-            )}
+            {canUpdate && <FacetValueSelector onValueSelect={onSelectHandler} />}
         </>
     );
 }

package/src/lib/components/shared/channel-code-label.tsx

@@ -1,7 +1,6 @@
-import { DEFAULT_CHANNEL_CODE } from '@/constants.js';
-import { Trans } from '@/lib/trans.js';
+import { DEFAULT_CHANNEL_CODE } from '@/vdb/constants.js';
+import { Trans } from '@/vdb/lib/trans.js';
 
-export function ChannelCodeLabel({ code }: { code: string } | { code: undefined }) {
+export function ChannelCodeLabel({ code }: Readonly<{ code: string }> | Readonly<{ code: undefined }>) {
     return code === DEFAULT_CHANNEL_CODE ? <Trans>Default channel</Trans> : code;
 }
-

package/src/lib/components/shared/channel-selector.tsx

@@ -1,9 +1,9 @@
-import { api } from '@/graphql/api.js';
-import { graphql } from '@/graphql/graphql.js';
-import { useLingui } from '@/lib/trans.js';
+import { api } from '@/vdb/graphql/api.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
+import { useLingui } from '@/vdb/lib/trans.js';
 import { useQuery } from '@tanstack/react-query';
-import { MultiSelect } from './multi-select.js';
 import { ChannelCodeLabel } from './channel-code-label.js';
+import { MultiSelect } from './multi-select.js';
 
 const channelsDocument = graphql(`
     query channels($options: ChannelListOptions) {
@@ -16,7 +16,7 @@ const channelsDocument = graphql(`
     }
 `);
 
-export interface ChannelSelectorProps<T extends boolean> {    
+export interface ChannelSelectorProps<T extends boolean> {
     value: T extends true ? string[] : string;
     onChange: (value: T extends true ? string[] : string) => void;
     multiple?: T;
@@ -35,7 +35,7 @@ export function ChannelSelector<T extends boolean>(props: ChannelSelectorProps<T
     const items = (channelsData?.channels.items ?? []).map(channel => ({
         value: channel.id,
         label: channel.code,
-        display: <ChannelCodeLabel code={channel.code} />
+        display: <ChannelCodeLabel code={channel.code} />,
     }));
 
     return (