@wilshop/dashboard 3.5.2

package/src/lib/components/shared/product-variant-selector.tsx

@@ -0,0 +1,136 @@
+import {
+    Command,
+    CommandEmpty,
+    CommandGroup,
+    CommandInput,
+    CommandItem,
+    CommandList,
+} from '@/vdb/components/ui/command.js';
+import { Popover, PopoverContent, PopoverTrigger } from '@/vdb/components/ui/popover.js';
+import { api } from '@/vdb/graphql/api.js';
+import { AssetFragment, assetFragment } from '@/vdb/graphql/fragments.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
+import { useQuery } from '@tanstack/react-query';
+import { useDebounce } from '@uidotdev/usehooks';
+import { Plus } from 'lucide-react';
+import { useState } from 'react';
+import { Button } from '../ui/button.js';
+import { VendureImage } from './vendure-image.js';
+
+const productVariantListDocument = graphql(
+    `
+        query ProductVariantList($options: ProductVariantListOptions) {
+            productVariants(options: $options) {
+                items {
+                    id
+                    name
+                    sku
+                    featuredAsset {
+                        ...Asset
+                    }
+                    price
+                    priceWithTax
+                    product {
+                        featuredAsset {
+                            ...Asset
+                        }
+                    }
+                }
+                totalItems
+            }
+        }
+    `,
+    [assetFragment],
+);
+
+export interface ProductVariantSelectorProps {
+    onProductVariantSelect: (variant: {
+        productVariantId: string;
+        productVariantName: string;
+        sku: string;
+        productAsset: AssetFragment | null;
+        price?: number;
+        priceWithTax?: number;
+    }) => void;
+}
+
+export function ProductVariantSelector({ onProductVariantSelect }: Readonly<ProductVariantSelectorProps>) {
+    const [search, setSearch] = useState('');
+    const [open, setOpen] = useState(false);
+    const debouncedSearch = useDebounce(search, 500);
+
+    const { data } = useQuery({
+        queryKey: ['productVariants', debouncedSearch],
+        staleTime: 1000 * 60 * 5,
+        enabled: debouncedSearch.length > 0,
+        queryFn: () =>
+            api.query(productVariantListDocument, {
+                options: {
+                    take: 10,
+                    filter: {
+                        name: { contains: debouncedSearch },
+                        sku: { contains: debouncedSearch },
+                    },
+                    filterOperator: 'OR',
+                },
+            }),
+    });
+
+    return (
+        <Popover open={open} onOpenChange={setOpen}>
+            <PopoverTrigger asChild>
+                <Button variant="outline" role="combobox" className="w-full">
+                    Add item to order
+                    <Plus className="opacity-50" />
+                </Button>
+            </PopoverTrigger>
+            <PopoverContent className="p-0">
+                <Command shouldFilter={false}>
+                    <CommandInput
+                        placeholder="Add item to order..."
+                        className="h-9"
+                        onValueChange={value => setSearch(value)}
+                    />
+                    <CommandList>
+                        <CommandEmpty>No products found.</CommandEmpty>
+                        <CommandGroup>
+                            {data?.productVariants.items.map(variant => (
+                                <CommandItem
+                                    key={variant.id}
+                                    value={variant.id}
+                                    onSelect={() => {
+                                        onProductVariantSelect({
+                                            productVariantId: variant.id,
+                                            productVariantName: variant.name,
+                                            sku: variant.sku,
+                                            productAsset:
+                                                variant.featuredAsset ??
+                                                variant.product.featuredAsset ??
+                                                null,
+                                            price: variant.price,
+                                            priceWithTax: variant.priceWithTax,
+                                        });
+                                        setOpen(false);
+                                    }}
+                                    className="flex items-center gap-2 p-2"
+                                >
+                                    {variant.featuredAsset && (
+                                        <VendureImage
+                                            asset={variant.featuredAsset}
+                                            preset="tiny"
+                                            className="size-8 rounded-md object-cover"
+                                        />
+                                    )}
+                                    <div className="flex flex-col">
+                                        <span className="text-sm font-medium">{variant.name}</span>
+                                        <span className="text-xs text-muted-foreground">{variant.sku}</span>
+                                    </div>
+                                </CommandItem>
+                            ))}
+                        </CommandGroup>
+                    </CommandList>
+                </Command>
+            </PopoverContent>
+        </Popover>
+    );
+}

package/src/lib/components/shared/remove-from-channel-bulk-action.tsx

@@ -0,0 +1,93 @@
+import { useMutation } from '@tanstack/react-query';
+import { LayersIcon } from 'lucide-react';
+import { toast } from 'sonner';
+
+import { DataTableBulkActionItem } from '@/vdb/components/data-table/data-table-bulk-action-item.js';
+import { usePaginatedList } from '@/vdb/components/shared/paginated-list-data-table.js';
+import { DEFAULT_CHANNEL_CODE } from '@/vdb/constants.js';
+import { ResultOf } from '@/vdb/graphql/graphql.js';
+import { useChannel } from '@/vdb/hooks/use-channel.js';
+import { Trans, useLingui } from '@lingui/react/macro';
+
+interface RemoveFromChannelBulkActionProps {
+    selection: any[];
+    table: any;
+    entityType: string;
+    mutationFn: (variables: any) => Promise<ResultOf<any>>;
+    requiredPermissions: string[];
+    buildInput: () => Record<string, any>;
+    /**
+     * Additional callback to run on success, after the standard refetch and reset
+     * @param result - The result from the mutation
+     */
+    onSuccess?: (result?: ResultOf<any>) => void;
+    /**
+     * Custom success message. If not provided, a default message will be used.
+     */
+    successMessage?: string;
+    /**
+     * Custom error message. If not provided, a default message will be used.
+     */
+    errorMessage?: string;
+}
+
+export function RemoveFromChannelBulkAction({
+    selection,
+    table,
+    entityType,
+    mutationFn,
+    requiredPermissions,
+    buildInput,
+    onSuccess,
+    successMessage,
+    errorMessage,
+}: Readonly<RemoveFromChannelBulkActionProps>) {
+    const { refetchPaginatedList } = usePaginatedList();
+    const { activeChannel } = useChannel();
+    const { t } = useLingui();
+    const selectionLength = selection.length;
+    const { mutate } = useMutation({
+        mutationFn,
+        onSuccess: result => {
+            const message =
+                successMessage || t`Successfully removed ${selectionLength} ${entityType} from channel`;
+            toast.success(message);
+            refetchPaginatedList();
+            table.resetRowSelection();
+            onSuccess?.(result);
+        },
+        onError: error => {
+            const onErrorMessage = error.message;
+            const message =
+                errorMessage ||
+                `Failed to remove ${selectionLength} ${entityType} from channel: ${onErrorMessage}`;
+            toast.error(message);
+        },
+    });
+
+    if (!activeChannel) {
+        return null;
+    }
+
+    const handleRemove = () => {
+        mutate({
+            input: buildInput(),
+        });
+    };
+
+    return (
+        <DataTableBulkActionItem
+            requiresPermission={requiredPermissions}
+            onClick={handleRemove}
+            label={<Trans>Remove from current channel</Trans>}
+            confirmationText={
+                <Trans>
+                    Are you sure you want to remove {selection.length} {entityType} from the current channel?
+                </Trans>
+            }
+            icon={LayersIcon}
+            className="text-warning"
+            disabled={activeChannel.code === DEFAULT_CHANNEL_CODE}
+        />
+    );
+}

package/src/lib/components/shared/rich-text-editor/image-dialog.tsx

@@ -0,0 +1,223 @@
+import { Trans } from '@lingui/react/macro';
+import { SetImageOptions } from '@tiptap/extension-image';
+import { Editor } from '@tiptap/react';
+import { ImageIcon, PaperclipIcon } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import { Button } from '../../ui/button.js';
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '../../ui/dialog.js';
+import { Input } from '../../ui/input.js';
+import { Label } from '../../ui/label.js';
+import { Asset } from '../asset/asset-gallery.js';
+import { AssetPickerDialog } from '../asset/asset-picker-dialog.js';
+
+export interface ImageDialogProps {
+    editor: Editor;
+    isOpen: boolean;
+    onClose: () => void;
+}
+
+export function ImageDialog({ editor, isOpen, onClose }: Readonly<ImageDialogProps>) {
+    const [src, setSrc] = useState('');
+    const [alt, setAlt] = useState('');
+    const [title, setTitle] = useState('');
+    const [width, setWidth] = useState('');
+    const [height, setHeight] = useState('');
+    const [assetPickerOpen, setAssetPickerOpen] = useState(false);
+    const [previewUrl, setPreviewUrl] = useState('');
+
+    useEffect(() => {
+        if (isOpen) {
+            // Get current image attributes if editing existing image
+            const {
+                src: currentSrc,
+                alt: currentAlt,
+                title: currentTitle,
+                width: currentWidth,
+                height: currentHeight,
+            } = editor.getAttributes('image');
+
+            setSrc(currentSrc || '');
+            setAlt(currentAlt || '');
+            setTitle(currentTitle || '');
+            setWidth(currentWidth || '');
+            setHeight(currentHeight || '');
+            setPreviewUrl(currentSrc || '');
+        }
+    }, [isOpen, editor]);
+
+    const handleInsertImage = () => {
+        if (!src) {
+            return;
+        }
+
+        const attrs: SetImageOptions = {
+            src,
+            alt: alt || undefined,
+            title: title || undefined,
+        };
+
+        // Only add width/height if they are valid numbers
+        if (width && !isNaN(Number(width))) {
+            attrs.width = Number(width);
+        }
+        if (height && !isNaN(Number(height))) {
+            attrs.height = Number(height);
+        }
+
+        editor.chain().focus().setImage(attrs).run();
+
+        handleClose();
+    };
+
+    const handleClose = () => {
+        setSrc('');
+        setAlt('');
+        setTitle('');
+        setWidth('');
+        setHeight('');
+        setPreviewUrl('');
+        onClose();
+    };
+
+    const handleAssetSelect = (assets: Asset[]) => {
+        if (assets.length > 0) {
+            const asset = assets[0];
+            setSrc(asset.source);
+            setPreviewUrl(asset.preview);
+            // Set width and height from asset if available
+            if (asset.width) {
+                setWidth(asset.width.toString());
+            }
+            if (asset.height) {
+                setHeight(asset.height.toString());
+            }
+        }
+        setAssetPickerOpen(false);
+    };
+
+    const isEditing = editor.isActive('image');
+
+    return (
+        <>
+            <Dialog open={isOpen} onOpenChange={open => !open && handleClose()}>
+                <DialogContent className="sm:max-w-[525px]">
+                    <DialogHeader>
+                        <DialogTitle>
+                            {isEditing ? <Trans>Edit image</Trans> : <Trans>Insert image</Trans>}
+                        </DialogTitle>
+                    </DialogHeader>
+                    <div className="grid gap-4 py-4">
+                        <div className="flex items-center justify-center">
+                            {previewUrl ? (
+                                <img
+                                    src={previewUrl}
+                                    alt={alt || 'Preview'}
+                                    className="max-w-[200px] max-h-[200px] object-contain border rounded"
+                                />
+                            ) : (
+                                <div className="w-[200px] h-[200px] border rounded flex items-center justify-center bg-muted">
+                                    <ImageIcon className="w-16 h-16 text-muted-foreground" />
+                                </div>
+                            )}
+                        </div>
+
+                        <div className="flex items-center justify-center">
+                            <Button
+                                type="button"
+                                variant="outline"
+                                size="sm"
+                                onClick={() => setAssetPickerOpen(true)}
+                            >
+                                <PaperclipIcon className="w-4 h-4 mr-2" />
+                                <Trans>Add asset</Trans>
+                            </Button>
+                        </div>
+
+                        <div className="grid gap-2">
+                            <Label htmlFor="image-source">
+                                <Trans>Source</Trans>
+                            </Label>
+                            <Input
+                                id="image-source"
+                                value={src}
+                                onChange={e => {
+                                    setSrc(e.target.value);
+                                    setPreviewUrl(e.target.value);
+                                }}
+                                placeholder="https://example.com/image.jpg"
+                                autoFocus
+                            />
+                        </div>
+
+                        <div className="grid gap-2">
+                            <Label htmlFor="image-title">
+                                <Trans>Title</Trans>
+                            </Label>
+                            <Input
+                                id="image-title"
+                                value={title}
+                                onChange={e => setTitle(e.target.value)}
+                                placeholder=""
+                            />
+                        </div>
+
+                        <div className="grid gap-2">
+                            <Label htmlFor="image-alt">
+                                <Trans>Description (alt)</Trans>
+                            </Label>
+                            <Input
+                                id="image-alt"
+                                value={alt}
+                                onChange={e => setAlt(e.target.value)}
+                                placeholder=""
+                            />
+                        </div>
+
+                        <div className="grid grid-cols-2 gap-4">
+                            <div className="grid gap-2">
+                                <Label htmlFor="image-width">
+                                    <Trans>Width</Trans>
+                                </Label>
+                                <Input
+                                    id="image-width"
+                                    type="number"
+                                    value={width}
+                                    onChange={e => setWidth(e.target.value)}
+                                    placeholder="auto"
+                                />
+                            </div>
+                            <div className="grid gap-2">
+                                <Label htmlFor="image-height">
+                                    <Trans>Height</Trans>
+                                </Label>
+                                <Input
+                                    id="image-height"
+                                    type="number"
+                                    value={height}
+                                    onChange={e => setHeight(e.target.value)}
+                                    placeholder="auto"
+                                />
+                            </div>
+                        </div>
+                    </div>
+                    <DialogFooter>
+                        <Button type="button" variant="outline" onClick={handleClose}>
+                            <Trans>Cancel</Trans>
+                        </Button>
+                        <Button type="button" onClick={handleInsertImage} disabled={!src}>
+                            <Trans>Insert image</Trans>
+                        </Button>
+                    </DialogFooter>
+                </DialogContent>
+            </Dialog>
+
+            <AssetPickerDialog
+                open={assetPickerOpen}
+                onClose={() => setAssetPickerOpen(false)}
+                onSelect={handleAssetSelect}
+                multiSelect={false}
+                title="Select asset"
+            />
+        </>
+    );
+}

package/src/lib/components/shared/rich-text-editor/link-dialog.tsx

@@ -0,0 +1,151 @@
+import { Trans } from '@lingui/react/macro';
+import { Editor } from '@tiptap/react';
+import { useEffect, useState } from 'react';
+import { Button } from '../../ui/button.js';
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '../../ui/dialog.js';
+import { Input } from '../../ui/input.js';
+import { Label } from '../../ui/label.js';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../ui/select.js';
+
+export interface LinkDialogProps {
+    editor: Editor;
+    isOpen: boolean;
+    onClose: () => void;
+}
+
+export function LinkDialog({ editor, isOpen, onClose }: Readonly<LinkDialogProps>) {
+    const [href, setHref] = useState('');
+    const [title, setTitle] = useState('');
+    const [target, setTarget] = useState<'_self' | '_blank'>('_self');
+
+    useEffect(() => {
+        if (isOpen) {
+            // Get current link attributes if editing existing link
+            const {
+                href: currentHref,
+                target: currentTarget,
+                title: currentTitle,
+            } = editor.getAttributes('link');
+
+            setHref(currentHref || '');
+            setTitle(currentTitle || '');
+            setTarget(currentTarget === '_blank' ? '_blank' : '_self');
+
+            // If text is selected but no link, use selection as initial href if it looks like a URL
+            if (!currentHref) {
+                const { from, to } = editor.state.selection;
+                const selectedText = editor.state.doc.textBetween(from, to);
+                if (selectedText && (selectedText.startsWith('http') || selectedText.startsWith('www'))) {
+                    setHref(selectedText);
+                }
+            }
+        }
+    }, [isOpen, editor]);
+
+    const handleSetLink = () => {
+        if (!href) {
+            // Remove link if href is empty
+            editor.chain().focus().unsetLink().run();
+        } else {
+            // Set link with all attributes
+            editor
+                .chain()
+                .focus()
+                .extendMarkRange('link')
+                .setLink({
+                    href,
+                    target,
+                    rel: target === '_blank' ? 'noopener noreferrer' : undefined,
+                })
+                .run();
+        }
+        handleClose();
+    };
+
+    const handleClose = () => {
+        setHref('');
+        setTitle('');
+        setTarget('_self');
+        onClose();
+    };
+
+    const handleRemoveLink = () => {
+        editor.chain().focus().unsetLink().run();
+        handleClose();
+    };
+
+    const isEditing = editor.isActive('link');
+
+    return (
+        <Dialog open={isOpen} onOpenChange={open => !open && handleClose()}>
+            <DialogContent className="sm:max-w-[425px]">
+                <DialogHeader>
+                    <DialogTitle>
+                        {isEditing ? <Trans>Edit link</Trans> : <Trans>Insert link</Trans>}
+                    </DialogTitle>
+                </DialogHeader>
+                <div className="grid gap-4 py-4">
+                    <div className="grid grid-cols-4 items-center gap-4">
+                        <Label htmlFor="link-href" className="text-right">
+                            <Trans>Link href</Trans>
+                        </Label>
+                        <Input
+                            id="link-href"
+                            value={href}
+                            onChange={e => setHref(e.target.value)}
+                            placeholder="https://example.com"
+                            className="col-span-3"
+                            autoFocus
+                        />
+                    </div>
+                    <div className="grid grid-cols-4 items-center gap-4">
+                        <Label htmlFor="link-title" className="text-right">
+                            <Trans>Link title</Trans>
+                        </Label>
+                        <Input
+                            id="link-title"
+                            value={title}
+                            onChange={e => setTitle(e.target.value)}
+                            placeholder=""
+                            className="col-span-3"
+                        />
+                    </div>
+                    <div className="grid grid-cols-4 items-center gap-4">
+                        <Label htmlFor="link-target" className="text-right">
+                            <Trans>Link target</Trans>
+                        </Label>
+                        <Select
+                            value={target}
+                            onValueChange={value => setTarget(value as '_self' | '_blank')}
+                        >
+                            <SelectTrigger className="col-span-3">
+                                <SelectValue />
+                            </SelectTrigger>
+                            <SelectContent>
+                                <SelectItem value="_self">
+                                    <Trans>Same window</Trans>
+                                </SelectItem>
+                                <SelectItem value="_blank">
+                                    <Trans>New window</Trans>
+                                </SelectItem>
+                            </SelectContent>
+                        </Select>
+                    </div>
+                </div>
+                <DialogFooter>
+                    {isEditing && (
+                        <Button type="button" variant="destructive" onClick={handleRemoveLink}>
+                            <Trans>Remove link</Trans>
+                        </Button>
+                    )}
+                    <Button type="button" variant="outline" onClick={handleClose}>
+                        <Trans>Cancel</Trans>
+                    </Button>
+                    <Button type="button" onClick={handleSetLink}>
+                        <Trans>Set link</Trans>
+                    </Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    );
+}