@vendure/dashboard 3.3.6-master-202507030648 → 3.3.6-master-202507030835

package/src/app/routes/_authenticated/_collections/components/move-collections-dialog.tsx

@@ -0,0 +1,430 @@
+import { useMutation, useQueries, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useDebounce } from '@uidotdev/usehooks';
+import { useRef, useState } from 'react';
+import { toast } from 'sonner';
+
+import { Alert, AlertDescription } from '@/components/ui/alert.js';
+import { Button } from '@/components/ui/button.js';
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from '@/components/ui/dialog.js';
+import { Input } from '@/components/ui/input.js';
+import { ScrollArea } from '@/components/ui/scroll-area.js';
+import { api } from '@/graphql/api.js';
+import { Trans, useLingui } from '@/lib/trans.js';
+import { ChevronRight, Folder, FolderOpen, Search } from 'lucide-react';
+
+import { collectionListForMoveDocument, moveCollectionDocument } from '../collections.graphql.js';
+
+type Collection = {
+    id: string;
+    name: string;
+    slug: string;
+    children?: { id: string }[] | null;
+    breadcrumbs: Array<{ id: string; name: string; slug: string }>;
+    parentId?: string;
+};
+
+interface MoveCollectionsDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    collectionsToMove: Collection[];
+    onSuccess?: () => void;
+}
+
+interface CollectionTreeNodeProps {
+    collection: Collection;
+    depth: number;
+    expanded: Record<string, boolean>;
+    onToggleExpanded: (id: string) => void;
+    onSelect: (collection: Collection) => void;
+    selectedCollectionId?: string;
+    collectionsToMove: Collection[];
+    childCollectionsByParentId: Record<string, Collection[]>;
+}
+
+interface TargetAlertProps {
+    selectedCollectionId?: string;
+    collectionsToMove: Collection[];
+    topLevelCollectionId?: string;
+    collectionNameCache: React.MutableRefObject<Map<string, string>>;
+}
+
+interface MoveToTopLevelProps {
+    selectedCollectionId?: string;
+    topLevelCollectionId?: string;
+    onSelect: (id?: string) => void;
+}
+
+function TargetAlert({
+    selectedCollectionId,
+    collectionsToMove,
+    topLevelCollectionId,
+    collectionNameCache,
+}: Readonly<TargetAlertProps>) {
+    return (
+        <Alert className={selectedCollectionId ? 'border-blue-200 bg-blue-50' : ''}>
+            <Folder className="h-4 w-4" />
+            <AlertDescription>
+                {selectedCollectionId ? (
+                    <Trans>
+                        Moving {collectionsToMove.length} collection
+                        {collectionsToMove.length === 1 ? '' : 's'} into{' '}
+                        {selectedCollectionId === topLevelCollectionId
+                            ? 'top level'
+                            : collectionNameCache.current.get(selectedCollectionId) || 'selected collection'}
+                    </Trans>
+                ) : (
+                    <Trans>Select a destination collection</Trans>
+                )}
+            </AlertDescription>
+        </Alert>
+    );
+}
+
+function MoveToTopLevel({
+    selectedCollectionId,
+    topLevelCollectionId,
+    onSelect,
+}: Readonly<MoveToTopLevelProps>) {
+    return (
+        <button
+            type="button"
+            className={`flex items-center gap-2 py-2 px-3 hover:bg-accent rounded-sm cursor-pointer w-full text-left ${
+                selectedCollectionId === topLevelCollectionId ? 'bg-accent' : ''
+            }`}
+            onClick={() => onSelect(topLevelCollectionId)}
+        >
+            <div className="w-3 h-3" />
+            <div className="flex items-center gap-2">
+                <Folder className="h-4 w-4 text-muted-foreground" />
+                <span className="text-sm font-medium">
+                    <Trans>Move to the top level</Trans>
+                </span>
+            </div>
+        </button>
+    );
+}
+
+function CollectionTreeNode({
+    collection,
+    depth,
+    expanded,
+    onToggleExpanded,
+    onSelect,
+    selectedCollectionId,
+    collectionsToMove,
+    childCollectionsByParentId,
+}: Readonly<CollectionTreeNodeProps>) {
+    const hasChildren = collection.children && collection.children.length > 0;
+    const isExpanded = expanded[collection.id];
+    const isSelected = selectedCollectionId === collection.id;
+    const isBeingMoved = collectionsToMove.some(c => c.id === collection.id);
+    const isChildOfBeingMoved = collectionsToMove.some(c => collection.breadcrumbs.some(b => b.id === c.id));
+
+    // Don't allow selecting collections that are being moved or are children of collections being moved
+    const isSelectable = !isBeingMoved && !isChildOfBeingMoved;
+
+    const childCollections = childCollectionsByParentId[collection.id] || [];
+
+    return (
+        <div className="my-0.5">
+            <div className="flex items-center" style={{ marginLeft: depth * 20 }}>
+                {hasChildren && (
+                    <Button
+                        size="icon"
+                        variant="ghost"
+                        className="h-4 w-4 p-0 mr-1"
+                        onClick={() => onToggleExpanded(collection.id)}
+                    >
+                        {isExpanded ? (
+                            <ChevronRight className="h-3 w-3 rotate-90" />
+                        ) : (
+                            <ChevronRight className="h-3 w-3" />
+                        )}
+                    </Button>
+                )}
+                {!hasChildren && <div className="w-5 h-4 mr-1" />}
+                <button
+                    type="button"
+                    className={`flex items-center gap-2 py-2 px-3 hover:bg-accent rounded-sm cursor-pointer w-full text-left ${
+                        isSelected ? 'bg-accent' : ''
+                    } ${!isSelectable ? 'opacity-50 cursor-not-allowed' : ''}`}
+                    onClick={() => {
+                        if (isSelectable) {
+                            onSelect(collection);
+                        }
+                    }}
+                    disabled={!isSelectable}
+                >
+                    <div className="flex items-center gap-2">
+                        {hasChildren &&
+                            (isExpanded ? (
+                                <FolderOpen className="h-4 w-4 text-muted-foreground" />
+                            ) : (
+                                <Folder className="h-4 w-4 text-muted-foreground" />
+                            ))}
+                        {!hasChildren && <div className="w-4 h-4" />}
+                        <div className="flex flex-col">
+                            <span className="text-sm">{collection.name}</span>
+                            {collection.breadcrumbs.length > 1 && (
+                                <span className="text-xs text-muted-foreground">
+                                    {collection.breadcrumbs
+                                        .slice(1)
+                                        .map(b => b.name)
+                                        .join(' / ')}
+                                </span>
+                            )}
+                        </div>
+                    </div>
+                </button>
+            </div>
+            {hasChildren && isExpanded && (
+                <div>
+                    {childCollections.map((childCollection: Collection) => (
+                        <CollectionTreeNode
+                            key={childCollection.id}
+                            collection={childCollection}
+                            depth={depth + 1}
+                            expanded={expanded}
+                            onToggleExpanded={onToggleExpanded}
+                            onSelect={onSelect}
+                            selectedCollectionId={selectedCollectionId}
+                            collectionsToMove={collectionsToMove}
+                            childCollectionsByParentId={childCollectionsByParentId}
+                        />
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+}
+
+export function MoveCollectionsDialog({
+    open,
+    onOpenChange,
+    collectionsToMove,
+    onSuccess,
+}: Readonly<MoveCollectionsDialogProps>) {
+    const [expanded, setExpanded] = useState<Record<string, boolean>>({});
+    const [selectedCollectionId, setSelectedCollectionId] = useState<string>();
+    const [searchTerm, setSearchTerm] = useState('');
+    const debouncedSearchTerm = useDebounce(searchTerm, 300);
+    const collectionNameCache = useRef<Map<string, string>>(new Map());
+    const queryClient = useQueryClient();
+    const { i18n } = useLingui();
+    const collectionForMoveKey = ['collectionsForMove', debouncedSearchTerm];
+    const childCollectionsForMoveKey = (collectionId?: string) =>
+        collectionId ? ['childCollectionsForMove', collectionId] : ['childCollectionsForMove'];
+
+    const { data: collectionsData, isLoading } = useQuery({
+        queryKey: collectionForMoveKey,
+        queryFn: () =>
+            api.query(collectionListForMoveDocument, {
+                options: {
+                    take: 100,
+                    topLevelOnly: !debouncedSearchTerm,
+                    ...(debouncedSearchTerm && {
+                        filter: {
+                            name: { contains: debouncedSearchTerm },
+                        },
+                    }),
+                },
+            }),
+        staleTime: 1000 * 60 * 5,
+        enabled: open,
+    });
+
+    const topLevelCollectionId = collectionsData?.collections.items[0]?.parentId;
+    const selectionHasTopLevelParent = collectionsToMove.some(c => c.parentId === topLevelCollectionId);
+
+    // Load child collections for expanded nodes
+    const childrenQueries = useQueries({
+        queries: Object.entries(expanded).map(([collectionId, isExpanded]) => {
+            return {
+                queryKey: childCollectionsForMoveKey(collectionId),
+                queryFn: () =>
+                    api.query(collectionListForMoveDocument, {
+                        options: {
+                            filter: {
+                                parentId: { eq: collectionId },
+                            },
+                        },
+                    }),
+                staleTime: 1000 * 60 * 5,
+            };
+        }),
+    });
+
+    const childCollectionsByParentId = childrenQueries.reduce(
+        (acc, query, index) => {
+            const collectionId = Object.keys(expanded)[index];
+            if (query.data) {
+                const collections = query.data.collections.items as Collection[];
+                // Populate the name cache with these collections
+                collections.forEach(collection => {
+                    collectionNameCache.current.set(collection.id, collection.name);
+                });
+                acc[collectionId] = collections;
+            }
+            return acc;
+        },
+        {} as Record<string, Collection[]>,
+    );
+
+    const moveCollectionsMutation = useMutation({
+        mutationFn: api.mutate(moveCollectionDocument),
+        onSuccess: () => {
+            toast.success(i18n.t('Collections moved successfully'));
+            queryClient.invalidateQueries({ queryKey: collectionForMoveKey });
+            queryClient.invalidateQueries({ queryKey: childCollectionsForMoveKey() });
+            onSuccess?.();
+            onOpenChange(false);
+        },
+        onError: error => {
+            toast.error(i18n.t('Failed to move collections'));
+            console.error('Move collections error:', error);
+        },
+    });
+
+    const handleToggleExpanded = (id: string) => {
+        setExpanded(prev => ({
+            ...prev,
+            [id]: !prev[id],
+        }));
+    };
+
+    const handleSelect = (collection: Collection) => {
+        setSelectedCollectionId(collection.id);
+    };
+
+    const handleMove = () => {
+        if (!selectedCollectionId) {
+            toast.error(i18n.t('Please select a target collection'));
+            return;
+        }
+        // Move to a specific parent using moveCollection
+        const movePromises = collectionsToMove.map((collection: Collection) =>
+            moveCollectionsMutation.mutateAsync({
+                input: {
+                    collectionId: collection.id,
+                    parentId: selectedCollectionId,
+                    index: 0, // Move to the beginning of the target collection
+                },
+            }),
+        );
+        Promise.all(movePromises);
+    };
+
+    const collections = (collectionsData?.collections.items as Collection[]) || [];
+
+    // Populate the name cache with top-level collections
+    collections.forEach(collection => {
+        collectionNameCache.current.set(collection.id, collection.name);
+    });
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent className="sm:max-w-[600px] max-h-[80vh]">
+                <DialogHeader>
+                    <DialogTitle>
+                        <Trans>Move Collections</Trans>
+                    </DialogTitle>
+                    <DialogDescription>
+                        <Trans>
+                            Select a target collection to move{' '}
+                            {collectionsToMove.length === 1
+                                ? 'this collection'
+                                : `${collectionsToMove.length} collections`}{' '}
+                            to.
+                        </Trans>
+                    </DialogDescription>
+                </DialogHeader>
+                <div className="px-6 py-3 bg-muted/50 border-b">
+                    <div className="flex flex-wrap gap-2">
+                        {collectionsToMove.map(collection => (
+                            <div
+                                key={collection.id}
+                                className="flex items-center gap-2 px-3 py-1 bg-background border rounded-md text-sm"
+                            >
+                                <Folder className="h-3 w-3 text-muted-foreground" />
+                                <span>{collection.name}</span>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+                <div className="py-4">
+                    <div className="px-6 pb-3">
+                        <div className="relative mb-3">
+                            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                            <Input
+                                placeholder={i18n.t('Filter by collection name')}
+                                value={searchTerm}
+                                onChange={e => setSearchTerm(e.target.value)}
+                                className="pl-10"
+                            />
+                        </div>
+                        <ScrollArea className="h-[400px]">
+                            <div className="space-y-1">
+                                {isLoading ? (
+                                    <div className="flex items-center justify-center py-8">
+                                        <Trans>Loading collections...</Trans>
+                                    </div>
+                                ) : (
+                                    <>
+                                        {!debouncedSearchTerm && !selectionHasTopLevelParent && (
+                                            <MoveToTopLevel
+                                                selectedCollectionId={selectedCollectionId}
+                                                topLevelCollectionId={topLevelCollectionId}
+                                                onSelect={setSelectedCollectionId}
+                                            />
+                                        )}
+                                        {collections.map((collection: Collection) => (
+                                            <CollectionTreeNode
+                                                key={collection.id}
+                                                collection={collection}
+                                                depth={0}
+                                                expanded={expanded}
+                                                onToggleExpanded={handleToggleExpanded}
+                                                onSelect={handleSelect}
+                                                selectedCollectionId={selectedCollectionId}
+                                                collectionsToMove={collectionsToMove}
+                                                childCollectionsByParentId={childCollectionsByParentId}
+                                            />
+                                        ))}
+                                    </>
+                                )}
+                            </div>
+                        </ScrollArea>
+                        <TargetAlert
+                            selectedCollectionId={selectedCollectionId}
+                            collectionsToMove={collectionsToMove}
+                            topLevelCollectionId={topLevelCollectionId}
+                            collectionNameCache={collectionNameCache}
+                        />
+                    </div>
+                </div>
+                <DialogFooter>
+                    <Button variant="outline" onClick={() => onOpenChange(false)}>
+                        <Trans>Cancel</Trans>
+                    </Button>
+                    <Button
+                        onClick={handleMove}
+                        disabled={!selectedCollectionId || moveCollectionsMutation.isPending}
+                    >
+                        {moveCollectionsMutation.isPending ? (
+                            <Trans>Moving...</Trans>
+                        ) : (
+                            <Trans>Move Collections</Trans>
+                        )}
+                    </Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    );
+}

package/src/app/routes/_authenticated/_collections/components/move-single-collection.tsx

@@ -0,0 +1,33 @@
+import { ResultOf } from 'gql.tada';
+import { useState } from 'react';
+
+import { collectionListDocument } from '../collections.graphql.js';
+import { MoveCollectionsDialog } from './move-collections-dialog.js';
+
+type Collection = ResultOf<typeof collectionListDocument>['collections']['items'][number];
+
+export function useMoveSingleCollection() {
+    const [moveDialogOpen, setMoveDialogOpen] = useState(false);
+    const [collectionsToMove, setCollectionsToMove] = useState<Collection[]>([]);
+
+    const handleMoveClick = (collection: Collection) => {
+        setCollectionsToMove([collection]);
+        setMoveDialogOpen(true);
+    };
+
+    const MoveDialog = () => (
+        <MoveCollectionsDialog
+            open={moveDialogOpen}
+            onOpenChange={setMoveDialogOpen}
+            collectionsToMove={collectionsToMove}
+            onSuccess={() => {
+                // The dialog will handle invalidating queries internally
+            }}
+        />
+    );
+
+    return {
+        handleMoveClick,
+        MoveDialog,
+    };
+}

package/src/app/routes/_authenticated/_customers/components/customer-address-card.tsx

@@ -11,6 +11,7 @@ import {
     DialogTrigger,
 } from '@/vdb/components/ui/dialog.js';
 import { api } from '@/vdb/graphql/api.js';
+import { Button } from '@/vdb/index.js';
 import { Trans, useLingui } from '@/vdb/lib/trans.js';
 import { useMutation } from '@tanstack/react-query';
 import { EditIcon, TrashIcon } from 'lucide-react';
@@ -120,8 +121,10 @@ export function CustomerAddressCard({
                 <div className="flex gap-4 mt-3 pt-3 border-t border-border">
                     {editable && (
                         <Dialog open={open} onOpenChange={setOpen}>
-                            <DialogTrigger>
-                                <EditIcon className="w-4 h-4" />
+                            <DialogTrigger asChild>
+                                <Button size="icon" variant="secondary">
+                                    <EditIcon />
+                                </Button>
                             </DialogTrigger>
                             <DialogContent>
                                 <DialogHeader>
@@ -145,7 +148,9 @@ export function CustomerAddressCard({
                                 onDelete?.();
                             }}
                         >
-                            <TrashIcon className="w-4 h-4 text-destructive" />
+                            <Button size="icon" variant="destructive">
+                                <TrashIcon />
+                            </Button>
                         </ConfirmationDialog>
                     )}
                 </div>

package/src/app/routes/_authenticated/_payment-methods/payment-methods_.$id.tsx

@@ -1,4 +1,4 @@
-import { RichTextInput } from '@/vdb/components/data-input/richt-text-input.js';
+import { RichTextInput } from '@/vdb/components/data-input/rich-text-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';

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

@@ -1,4 +1,4 @@
-import { RichTextInput } from '@/vdb/components/data-input/richt-text-input.js';
+import { RichTextInput } from '@/vdb/components/data-input/rich-text-input.js';
 import { AssignedFacetValues } from '@/vdb/components/shared/assigned-facet-values.js';
 import { EntityAssets } from '@/vdb/components/shared/entity-assets.js';
 import { ErrorPage } from '@/vdb/components/shared/error-page.js';

package/src/app/routes/_authenticated/_promotions/promotions_.$id.tsx

@@ -1,5 +1,5 @@
 import { DateTimeInput } from '@/vdb/components/data-input/datetime-input.js';
-import { RichTextInput } from '@/vdb/components/data-input/richt-text-input.js';
+import { RichTextInput } from '@/vdb/components/data-input/rich-text-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';

package/src/lib/components/data-input/money-input.tsx

@@ -1,18 +1,11 @@
+import { DataInputComponentProps } from '@/vdb/framework/component-registry/component-registry.js';
 import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
 import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
 import { useEffect, useMemo, useState } from 'react';
 import { AffixedInput } from './affixed-input.js';
 
 // Original component
-function MoneyInputInternal({
-    value,
-    currency,
-    onChange,
-}: {
-    value: number;
-    currency: string;
-    onChange: (value: number) => void;
-}) {
+function MoneyInputInternal({ value, currency, onChange }: DataInputComponentProps) {
     const {
         settings: { displayLanguage, displayLocale },
     } = useUserSettings();

package/src/lib/components/data-table/data-table.tsx

@@ -81,7 +81,7 @@ export function DataTable<TData>({
     bulkActions,
     setTableOptions,
     onRefresh,
-}: DataTableProps<TData>) {
+}: Readonly<DataTableProps<TData>>) {
     const [sorting, setSorting] = React.useState<SortingState>(sortingInitialState || []);
     const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(filtersInitialState || []);
     const { activeChannel } = useChannel();

package/src/lib/components/shared/form-field-wrapper.tsx

@@ -1,25 +1,34 @@
-import {
-    FormControl,
-    FormDescription,
-    FormItem,
-    FormLabel,
-    FormMessage,
-    FormField,
-} from '../ui/form.js';
-import { FieldValues, FieldPath } from 'react-hook-form';
+import { FieldPath, FieldValues } from 'react-hook-form';
+import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '../ui/form.js';
 
 export type FormFieldWrapperProps<
     TFieldValues extends FieldValues = FieldValues,
-    TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+    TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 > = React.ComponentProps<typeof FormField<TFieldValues, TName>> & {
     label?: React.ReactNode;
     description?: React.ReactNode;
+    /**
+     * @description
+     * Whether to render the form control.
+     * If false, the form control will not be rendered.
+     * This is useful when you want to render the form control in a custom way, e.g. for <Select/> components,
+     * where the FormControl needs to nested in the root component.
+     * @default true
+     */
+    renderFormControl?: boolean;
 };
 
 export function FormFieldWrapper<
     TFieldValues extends FieldValues = FieldValues,
-    TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
->({ control, name, render, label, description }: FormFieldWrapperProps<TFieldValues, TName>) {
+    TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+    control,
+    name,
+    render,
+    label,
+    description,
+    renderFormControl = true,
+}: FormFieldWrapperProps<TFieldValues, TName>) {
     return (
         <FormField
             control={control}
@@ -27,7 +36,7 @@ export function FormFieldWrapper<
             render={renderArgs => (
                 <FormItem>
                     {label && <FormLabel>{label}</FormLabel>}
-                    <FormControl>{render(renderArgs)}</FormControl>
+                    {renderFormControl ? <FormControl>{render(renderArgs)}</FormControl> : render(renderArgs)}
                     {description && <FormDescription>{description}</FormDescription>}
                     <FormMessage />
                 </FormItem>

package/src/lib/components/shared/paginated-list-data-table.tsx

@@ -273,7 +273,7 @@ export function PaginatedListDataTable<
     setTableOptions,
     transformData,
     registerRefresher,
-}: PaginatedListDataTableProps<T, U, V, AC>) {
+}: Readonly<PaginatedListDataTableProps<T, U, V, AC>>) {
     const [searchTerm, setSearchTerm] = React.useState<string>('');
     const debouncedSearchTerm = useDebounce(searchTerm, 500);
     const queryClient = useQueryClient();