@vendure/dashboard 3.3.5-master-202506250724 → 3.3.5-master-202506251305

package/dist/plugin/tests/barrel-exports.spec.js

@@ -10,5 +10,5 @@ describe('detecting plugins in barrel exports', () => {
         expect(result.pluginInfo).toHaveLength(1);
         expect(result.pluginInfo[0].name).toBe('MyPlugin');
         expect(result.pluginInfo[0].dashboardEntryPath).toBe('./dashboard/index.tsx');
-    });
+    }, { timeout: 10000 });
 });

package/dist/plugin/vite-plugin-config.js

@@ -49,6 +49,7 @@ export function viteConfigPlugin({ packageRoot }) {
                     ...(((_e = config.optimizeDeps) === null || _e === void 0 ? void 0 : _e.include) || []),
                     '@/components > recharts',
                     '@/components > react-dropzone',
+                    '@vendure/common/lib/generated-types',
                 ] });
             return config;
         },

package/dist/plugin/vite-plugin-dashboard-metadata.d.ts

@@ -4,6 +4,4 @@ import { Plugin } from 'vite';
  * generates an import statement for each one, wrapped up in a `runDashboardExtensions()`
  * function which can then be imported and executed in the Dashboard app.
  */
-export declare function dashboardMetadataPlugin(options: {
-    rootDir: string;
-}): Plugin;
+export declare function dashboardMetadataPlugin(): Plugin;

package/dist/plugin/vite-plugin-dashboard-metadata.js

@@ -7,7 +7,7 @@ const resolvedVirtualModuleId = `\0${virtualModuleId}`;
  * generates an import statement for each one, wrapped up in a `runDashboardExtensions()`
  * function which can then be imported and executed in the Dashboard app.
  */
-export function dashboardMetadataPlugin(options) {
+export function dashboardMetadataPlugin() {
     let configLoaderApi;
     let loadVendureConfigResult;
     return {
@@ -41,10 +41,3 @@ export function dashboardMetadataPlugin(options) {
         },
     };
 }
-/**
- * Converts an import path to a normalized path relative to the rootDir.
- */
-function normalizeImportPath(rootDir, importPath) {
-    const relativePath = path.relative(rootDir, importPath).replace(/\\/g, '/');
-    return relativePath.replace(/\.tsx?$/, '.js');
-}

package/dist/plugin/vite-plugin-tailwind-source.d.ts

@@ -0,0 +1,7 @@
+import { Plugin } from 'vite';
+/**
+ * This Vite plugin transforms the `app/styles.css` file to include a `@source` directive
+ * for each dashboard extension's source directory. This allows Tailwind CSS to
+ * include styles from these extensions when processing the CSS.
+ */
+export declare function dashboardTailwindSourcePlugin(): Plugin;

package/dist/plugin/vite-plugin-tailwind-source.js

@@ -0,0 +1,49 @@
+import path from 'path';
+import { getConfigLoaderApi } from './vite-plugin-config-loader.js';
+/**
+ * This Vite plugin transforms the `app/styles.css` file to include a `@source` directive
+ * for each dashboard extension's source directory. This allows Tailwind CSS to
+ * include styles from these extensions when processing the CSS.
+ */
+export function dashboardTailwindSourcePlugin() {
+    let configLoaderApi;
+    let loadVendureConfigResult;
+    return {
+        name: 'vendure:dashboard-tailwind-source',
+        // Ensure this plugin runs before Tailwind CSS processing
+        enforce: 'pre',
+        configResolved({ plugins }) {
+            configLoaderApi = getConfigLoaderApi(plugins);
+        },
+        async transform(src, id) {
+            var _a;
+            if (/app\/styles.css$/.test(id)) {
+                if (!loadVendureConfigResult) {
+                    loadVendureConfigResult = await configLoaderApi.getVendureConfig();
+                }
+                const { pluginInfo } = loadVendureConfigResult;
+                const dashboardExtensionDirs = (_a = pluginInfo === null || pluginInfo === void 0 ? void 0 : pluginInfo.map(({ dashboardEntryPath, pluginPath }) => dashboardEntryPath && path.join(pluginPath, path.dirname(dashboardEntryPath))).filter(x => x != null)) !== null && _a !== void 0 ? _a : [];
+                const sources = dashboardExtensionDirs
+                    .map(extension => {
+                    return `@source '${extension}';`;
+                })
+                    .join('\n');
+                // Find the line with the specific comment and insert sources after it
+                const lines = src.split('\n');
+                const sourceCommentIndex = lines.findIndex(line => line.includes('/* @source rules from extensions will be added here by the dashboardTailwindSourcePlugin */'));
+                if (sourceCommentIndex !== -1) {
+                    // Insert the sources after the comment line
+                    lines.splice(sourceCommentIndex + 1, 0, sources);
+                    const modifiedSrc = lines.join('\n');
+                    return {
+                        code: modifiedSrc,
+                    };
+                }
+                // If the comment is not found, append sources at the end
+                return {
+                    code: src + '\n' + sources,
+                };
+            }
+        },
+    };
+}

package/dist/plugin/vite-plugin-vendure-dashboard.js

@@ -7,6 +7,7 @@ import { configLoaderPlugin } from './vite-plugin-config-loader.js';
 import { viteConfigPlugin } from './vite-plugin-config.js';
 import { dashboardMetadataPlugin } from './vite-plugin-dashboard-metadata.js';
 import { gqlTadaPlugin } from './vite-plugin-gql-tada.js';
+import { dashboardTailwindSourcePlugin } from './vite-plugin-tailwind-source.js';
 import { themeVariablesPlugin } from './vite-plugin-theme.js';
 import { transformIndexHtmlPlugin } from './vite-plugin-transform-index.js';
 import { uiConfigPlugin } from './vite-plugin-ui-config.js';
@@ -42,6 +43,7 @@ export function vendureDashboardPlugin(options) {
         // },
         }),
         themeVariablesPlugin({ theme: options.theme }),
+        dashboardTailwindSourcePlugin(),
         tailwindcss(),
         configLoaderPlugin({
             vendureConfigPath: normalizedVendureConfigPath,
@@ -51,7 +53,7 @@ export function vendureDashboardPlugin(options) {
         }),
         viteConfigPlugin({ packageRoot }),
         adminApiSchemaPlugin(),
-        dashboardMetadataPlugin({ rootDir: tempDir }),
+        dashboardMetadataPlugin(),
         uiConfigPlugin({ adminUiConfig: options.adminUiConfig }),
         ...(options.gqlTadaOutputPath
             ? [gqlTadaPlugin({ gqlTadaOutputPath: options.gqlTadaOutputPath, tempDir, packageRoot })]

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@vendure/dashboard",
     "private": false,
-    "version": "3.3.5-master-202506250724",
+    "version": "3.3.5-master-202506251305",
     "type": "module",
     "repository": {
         "type": "git",
@@ -86,8 +86,8 @@
         "@types/react-dom": "^19.0.4",
         "@types/react-grid-layout": "^1.3.5",
         "@uidotdev/usehooks": "^2.4.1",
-        "@vendure/common": "^3.3.5-master-202506250724",
-        "@vendure/core": "^3.3.5-master-202506250724",
+        "@vendure/common": "^3.3.5-master-202506251305",
+        "@vendure/core": "^3.3.5-master-202506251305",
         "@vitejs/plugin-react": "^4.3.4",
         "awesome-graphql-client": "^2.1.0",
         "class-variance-authority": "^0.7.1",
@@ -130,5 +130,5 @@
         "lightningcss-linux-arm64-musl": "^1.29.3",
         "lightningcss-linux-x64-musl": "^1.29.1"
     },
-    "gitHead": "7e19f372f587c6fee551324c9f826eb719b4b3b9"
+    "gitHead": "6781f6697a37aa8c7b7e76e9fc53b4dd0300a94b"
 }

package/src/app/routes/_authenticated/_administrators/administrators_.$id.tsx

@@ -87,7 +87,7 @@ function AdministratorDetailPage() {
     const roleIds = form.watch('roleIds');
 
     return (
-        <Page pageId="administrator-detail" form={form} submitHandler={submitHandler}>
+        <Page pageId="administrator-detail" form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>{creatingNewEntity ? <Trans>New administrator</Trans> : name}</PageTitle>
 
             <PageActionBar>

package/src/app/routes/_authenticated/_assets/assets_.$id.tsx

@@ -1,23 +1,30 @@
-import { AssetPreview } from '@/components/shared/asset/asset-preview.js'
-import { detailPageRouteLoader } from '@/framework/page/detail-page-route-loader.js';
-import { createFileRoute } from '@tanstack/react-router'
-import { assetDetailDocument, assetUpdateDocument } from './assets.graphql.js';
-import { Trans, useLingui } from '@/lib/trans.js';
-import { ErrorPage } from '@/components/shared/error-page.js';
-import { toast } from 'sonner';
-import { Page, PageTitle, PageActionBar, PageActionBarRight, PageBlock, PageLayout, CustomFieldsPageBlock } from '@/framework/layout-engine/page-layout.js'
-import { useDetailPage } from '@/framework/page/use-detail-page.js';
-import { PermissionGuard } from '@/components/shared/permission-guard.js';
-import { Button } from '@/components/ui/button.js';
-import { VendureImage } from '@/components/shared/vendure-image.js';
-import { useState, useRef } from 'react';
-import { PreviewPreset } from '@/components/shared/asset/asset-preview.js';
+import { AssetFocalPointEditor } from '@/components/shared/asset/asset-focal-point-editor.js';
 import { AssetPreviewSelector } from '@/components/shared/asset/asset-preview-selector.js';
+import { PreviewPreset } from '@/components/shared/asset/asset-preview.js';
 import { AssetProperties } from '@/components/shared/asset/asset-properties.js';
-import { AssetFocalPointEditor } from '@/components/shared/asset/asset-focal-point-editor.js';
-import { FocusIcon } from 'lucide-react';
 import { Point } from '@/components/shared/asset/focal-point-control.js';
+import { ErrorPage } from '@/components/shared/error-page.js';
+import { PermissionGuard } from '@/components/shared/permission-guard.js';
+import { VendureImage } from '@/components/shared/vendure-image.js';
+import { Button } from '@/components/ui/button.js';
 import { Label } from '@/components/ui/label.js';
+import {
+    CustomFieldsPageBlock,
+    Page,
+    PageActionBar,
+    PageActionBarRight,
+    PageBlock,
+    PageLayout,
+    PageTitle,
+} from '@/framework/layout-engine/page-layout.js';
+import { detailPageRouteLoader } from '@/framework/page/detail-page-route-loader.js';
+import { useDetailPage } from '@/framework/page/use-detail-page.js';
+import { Trans, useLingui } from '@/lib/trans.js';
+import { createFileRoute } from '@tanstack/react-router';
+import { FocusIcon } from 'lucide-react';
+import { useRef, useState } from 'react';
+import { toast } from 'sonner';
+import { assetDetailDocument, assetUpdateDocument } from './assets.graphql.js';
 export const Route = createFileRoute('/_authenticated/_assets/assets_/$id')({
     component: AssetDetailPage,
     loader: detailPageRouteLoader({
@@ -25,7 +32,7 @@ export const Route = createFileRoute('/_authenticated/_assets/assets_/$id')({
         breadcrumb(isNew, entity) {
             return [
                 { path: '/assets', label: 'Assets' },
-                isNew ? <Trans>New asset</Trans> : entity?.name ?? '',
+                isNew ? <Trans>New asset</Trans> : (entity?.name ?? ''),
             ];
         },
     }),
@@ -79,17 +86,14 @@ function AssetDetailPage() {
         return null;
     }
     return (
-        <Page pageId="asset-detail" form={form} submitHandler={submitHandler}>
+        <Page pageId="asset-detail" form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>
                 <Trans>Edit asset</Trans>
             </PageTitle>
             <PageActionBar>
                 <PageActionBarRight>
                     <PermissionGuard requires={['UpdateChannel']}>
-                        <Button
-                            type="submit"
-                            disabled={!form.formState.isDirty || isPending}
-                        >
+                        <Button type="submit" disabled={!form.formState.isDirty || isPending}>
                             <Trans>Update</Trans>
                         </Button>
                     </PermissionGuard>
@@ -103,7 +107,7 @@ function AssetDetailPage() {
                             height={height}
                             settingFocalPoint={settingFocalPoint}
                             focalPoint={form.getValues().focalPoint ?? { x: 0.5, y: 0.5 }}
-                            onFocalPointChange={(point) => {
+                            onFocalPointChange={point => {
                                 form.setValue('focalPoint.x', point.x, { shouldDirty: true });
                                 form.setValue('focalPoint.y', point.y, { shouldDirty: true });
                                 setSettingFocalPoint(false);
@@ -124,11 +128,7 @@ function AssetDetailPage() {
                         </AssetFocalPointEditor>
                     </div>
                 </PageBlock>
-                <CustomFieldsPageBlock
-                    column="main"
-                    entityType={'Asset'}
-                    control={form.control}
-                />
+                <CustomFieldsPageBlock column="main" entityType={'Asset'} control={form.control} />
                 <PageBlock column="side" blockId="asset-properties">
                     <AssetProperties asset={entity} />
                 </PageBlock>
@@ -136,15 +136,24 @@ function AssetDetailPage() {
                     <div className="flex flex-col gap-2">
                         <AssetPreviewSelector size={size} setSize={setSize} width={width} height={height} />
                         <div className="flex items-center gap-2">
-                            <Button type='button' variant="outline" size="icon" onClick={() => setSettingFocalPoint(true)}>
+                            <Button
+                                type="button"
+                                variant="outline"
+                                size="icon"
+                                onClick={() => setSettingFocalPoint(true)}
+                            >
                                 <FocusIcon className="h-4 w-4" />
                             </Button>
                             <div className="text-sm text-muted-foreground">
-                                <Label><Trans>Focal Point</Trans></Label>
+                                <Label>
+                                    <Trans>Focal Point</Trans>
+                                </Label>
                                 <div className="text-sm text-muted-foreground">
-                                    {form.getValues().focalPoint?.x && form.getValues().focalPoint?.y
-                                        ? `${form.getValues().focalPoint?.x.toFixed(2)}, ${form.getValues().focalPoint?.y.toFixed(2)}`
-                                        : <Trans>Not set</Trans>}
+                                    {form.getValues().focalPoint?.x && form.getValues().focalPoint?.y ? (
+                                        `${form.getValues().focalPoint?.x.toFixed(2)}, ${form.getValues().focalPoint?.y.toFixed(2)}`
+                                    ) : (
+                                        <Trans>Not set</Trans>
+                                    )}
                                 </div>
                             </div>
                         </div>
@@ -152,5 +161,5 @@ function AssetDetailPage() {
                 </PageBlock>
             </PageLayout>
         </Page>
-    )
+    );
 }

package/src/app/routes/_authenticated/_channels/channels_.$id.tsx

@@ -100,7 +100,7 @@ function ChannelDetailPage() {
     const codeIsDefault = entity?.code === DEFAULT_CHANNEL_CODE;
 
     return (
-        <Page pageId="channel-detail" form={form} submitHandler={submitHandler}>
+        <Page pageId="channel-detail" form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>
                 {creatingNewEntity ? (
                     <Trans>New channel</Trans>

package/src/app/routes/_authenticated/_collections/collections_.$id.tsx

@@ -105,7 +105,7 @@ function CollectionDetailPage() {
     const currentInheritFiltersValue = form.watch('inheritFilters');
 
     return (
-        <Page pageId="collection-detail" form={form} submitHandler={submitHandler}>
+        <Page pageId="collection-detail" form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>{creatingNewEntity ? <Trans>New collection</Trans> : (entity?.name ?? '')}</PageTitle>
             <PageActionBar>
                 <PageActionBarRight>

package/src/app/routes/_authenticated/_countries/countries_.$id.tsx

@@ -71,7 +71,7 @@ function CountryDetailPage() {
     });
 
     return (
-        <Page pageId="country-detail" form={form} submitHandler={submitHandler}>
+        <Page pageId="country-detail" form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>{creatingNewEntity ? <Trans>New country</Trans> : (entity?.name ?? '')}</PageTitle>
             <PageActionBar>
                 <PageActionBarRight>

package/src/app/routes/_authenticated/_customer-groups/customer-groups_.$id.tsx

@@ -72,7 +72,7 @@ function CustomerGroupDetailPage() {
     });
 
     return (
-        <Page pageId="customer-group-detail" form={form} submitHandler={submitHandler}>
+        <Page pageId="customer-group-detail" form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>
                 {creatingNewEntity ? <Trans>New customer group</Trans> : (entity?.name ?? '')}
             </PageTitle>

package/src/app/routes/_authenticated/_customers/customers_.$id.tsx

@@ -137,7 +137,7 @@ function CustomerDetailPage() {
     const customerName = entity ? `${entity.firstName} ${entity.lastName}` : '';
 
     return (
-        <Page pageId="customer-detail" form={form} submitHandler={submitHandler}>
+        <Page pageId="customer-detail" form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>{creatingNewEntity ? <Trans>New customer</Trans> : customerName}</PageTitle>
             <PageActionBar>
                 <PageActionBarRight>

package/src/app/routes/_authenticated/_facets/facets_.$id.tsx

@@ -82,7 +82,7 @@ function FacetDetailPage() {
     });
 
     return (
-        <Page pageId="facet-detail" form={form} submitHandler={submitHandler}>
+        <Page pageId="facet-detail" form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>{creatingNewEntity ? <Trans>New facet</Trans> : (entity?.name ?? '')}</PageTitle>
             <PageActionBar>
                 <PageActionBarRight>

package/src/app/routes/_authenticated/_global-settings/global-settings.tsx

@@ -78,7 +78,7 @@ function GlobalSettingsPage() {
     });
 
     return (
-        <Page pageId="global-settings" form={form} submitHandler={submitHandler}>
+        <Page pageId="global-settings" form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>
                 <Trans>Global settings</Trans>
             </PageTitle>

package/src/app/routes/_authenticated/_orders/orders_.$id.tsx

@@ -27,10 +27,7 @@ import { orderDetailDocument } from './orders.graphql.js';
 
 export const Route = createFileRoute('/_authenticated/_orders/orders_/$id')({
     component: OrderDetailPage,
-    loader: async ({
-        context,
-        params,
-    }) => {
+    loader: async ({ context, params }) => {
         if (!params.id) {
             throw new Error('ID param is required');
         }
@@ -86,7 +83,7 @@ function OrderDetailPage() {
     }
 
     return (
-        <Page pageId="order-detail" form={form} submitHandler={submitHandler}>
+        <Page pageId="order-detail" form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>{entity?.code ?? ''}</PageTitle>
             <PageActionBar>
                 <PageActionBarRight>

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

@@ -102,7 +102,7 @@ function PaymentMethodDetailPage() {
     });
 
     return (
-        <Page pageId="payment-method-detail" form={form} submitHandler={submitHandler}>
+        <Page pageId="payment-method-detail" form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>
                 {creatingNewEntity ? <Trans>New payment method</Trans> : (entity?.name ?? '')}
             </PageTitle>

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

@@ -102,7 +102,7 @@ function ProductVariantDetailPage() {
     const [price, taxCategoryId] = form.watch(['price', 'taxCategoryId']);
 
     return (
-        <Page pageId="product-variant-detail" form={form} submitHandler={submitHandler}>
+        <Page pageId="product-variant-detail" form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>
                 {creatingNewEntity ? <Trans>New product variant</Trans> : (entity?.name ?? '')}
             </PageTitle>

package/src/app/routes/_authenticated/_products/components/assign-facet-values-dialog.tsx

@@ -0,0 +1,98 @@
+import { useState } from 'react';
+import { toast } from 'sonner';
+import { useMutation } from '@tanstack/react-query';
+
+import { Button } from '@/components/ui/button.js';
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from '@/components/ui/dialog.js';
+import { FacetValueSelector, FacetValue } from '@/components/shared/facet-value-selector.js';
+import { api } from '@/graphql/api.js';
+import { ResultOf } from '@/graphql/graphql.js';
+import { Trans, useLingui } from '@/lib/trans.js';
+
+import { updateProductsDocument } from '../products.graphql.js';
+
+interface AssignFacetValuesDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    productIds: string[];
+    onSuccess?: () => void;
+}
+
+export function AssignFacetValuesDialog({ open, onOpenChange, productIds, onSuccess }: AssignFacetValuesDialogProps) {
+    const { i18n } = useLingui();
+    const [selectedFacetValueIds, setSelectedFacetValueIds] = useState<string[]>([]);
+
+    const { mutate, isPending } = useMutation({
+        mutationFn: api.mutate(updateProductsDocument),
+        onSuccess: (result: ResultOf<typeof updateProductsDocument>) => {
+            toast.success(i18n.t(`Successfully updated facet values for ${productIds.length} products`));
+            onSuccess?.();
+            onOpenChange(false);
+        },
+        onError: () => {
+            toast.error(`Failed to update facet values for ${productIds.length} products`);
+        },
+    });
+
+    const handleAssign = () => {
+        if (selectedFacetValueIds.length === 0) {
+            toast.error('Please select at least one facet value');
+            return;
+        }
+
+        mutate({
+            input: productIds.map(productId => ({
+                id: productId,
+                facetValueIds: selectedFacetValueIds,
+            })),
+        });
+    };
+
+    const handleFacetValueSelect = (facetValue: FacetValue) => {
+        setSelectedFacetValueIds(prev => [...new Set([...prev, facetValue.id])]);
+    };
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent className="sm:max-w-[500px]">
+                <DialogHeader>
+                    <DialogTitle><Trans>Edit facet values</Trans></DialogTitle>
+                    <DialogDescription>
+                        <Trans>Select facet values to assign to {productIds.length} products</Trans>
+                    </DialogDescription>
+                </DialogHeader>
+                <div className="grid gap-4 py-4">
+                    <div className="grid gap-2">
+                        <label className="text-sm font-medium">
+                            <Trans>Facet values</Trans>
+                        </label>
+                        <FacetValueSelector
+                            onValueSelect={handleFacetValueSelect}
+                            placeholder="Search facet values..."
+                        />
+                    </div>
+                    {selectedFacetValueIds.length > 0 && (
+                        <div className="text-sm text-muted-foreground">
+                            <Trans>{selectedFacetValueIds.length} facet value(s) selected</Trans>
+                        </div>
+                    )}
+                </div>
+                <DialogFooter>
+                    <Button variant="outline" onClick={() => onOpenChange(false)}>
+                        <Trans>Cancel</Trans>
+                    </Button>
+                    <Button onClick={handleAssign} disabled={selectedFacetValueIds.length === 0 || isPending}>
+                        <Trans>Update</Trans>
+                    </Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    );
+} 

package/src/app/routes/_authenticated/_products/components/assign-to-channel-dialog.tsx

@@ -0,0 +1,126 @@
+import { useMutation } from '@tanstack/react-query';
+import { useState } from 'react';
+import { toast } from 'sonner';
+
+import { ChannelCodeLabel } from '@/components/shared/channel-code-label.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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select.js';
+import { api } from '@/graphql/api.js';
+import { ResultOf } from '@/graphql/graphql.js';
+import { Trans, useLingui } from '@/lib/trans.js';
+
+import { useChannel } from '@/hooks/use-channel.js';
+import { assignProductsToChannelDocument } from '../products.graphql.js';
+
+interface AssignToChannelDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    productIds: string[];
+    onSuccess?: () => void;
+}
+
+export function AssignToChannelDialog({
+    open,
+    onOpenChange,
+    productIds,
+    onSuccess,
+}: AssignToChannelDialogProps) {
+    const { i18n } = useLingui();
+    const [selectedChannelId, setSelectedChannelId] = useState<string>('');
+    const [priceFactor, setPriceFactor] = useState<number>(1);
+    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: api.mutate(assignProductsToChannelDocument),
+        onSuccess: (result: ResultOf<typeof assignProductsToChannelDocument>) => {
+            toast.success(i18n.t(`Successfully assigned ${productIds.length} products to channel`));
+            onSuccess?.();
+            onOpenChange(false);
+        },
+        onError: () => {
+            toast.error(`Failed to assign ${productIds.length} products to channel`);
+        },
+    });
+
+    const handleAssign = () => {
+        if (!selectedChannelId) {
+            toast.error('Please select a channel');
+            return;
+        }
+
+        mutate({
+            input: {
+                productIds,
+                channelId: selectedChannelId,
+                priceFactor,
+            },
+        });
+    };
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent className="sm:max-w-[425px]">
+                <DialogHeader>
+                    <DialogTitle>
+                        <Trans>Assign products to channel</Trans>
+                    </DialogTitle>
+                    <DialogDescription>
+                        <Trans>Select a channel to assign {productIds.length} products 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>
+                    <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>
+                </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>
+    );
+}