@vendure/dashboard 3.3.6-master-202507041203 → 3.4.0-minor-202506250934

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

@@ -1,17 +1,11 @@
-import { BooleanDisplayBadge } from '@/vdb/components/data-display/boolean.js';
-import { DetailPageButton } from '@/vdb/components/shared/detail-page-button.js';
-import { PermissionGuard } from '@/vdb/components/shared/permission-guard.js';
-import { Button } from '@/vdb/components/ui/button.js';
-import { PageActionBarRight } from '@/vdb/framework/layout-engine/page-layout.js';
-import { ListPage } from '@/vdb/framework/page/list-page.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { BooleanDisplayBadge } from '@/components/data-display/boolean.js';
+import { DetailPageButton } from '@/components/shared/detail-page-button.js';
+import { PermissionGuard } from '@/components/shared/permission-guard.js';
+import { Button } from '@/components/ui/button.js';
+import { ListPage } from '@/framework/page/list-page.js';
+import { Trans } from '@/lib/trans.js';
 import { createFileRoute, Link } from '@tanstack/react-router';
 import { PlusIcon } from 'lucide-react';
-import {
-    AssignPaymentMethodsToChannelBulkAction,
-    DeletePaymentMethodsBulkAction,
-    RemovePaymentMethodsFromChannelBulkAction,
-} from './components/payment-method-bulk-actions.js';
 import { deletePaymentMethodDocument, paymentMethodListQuery } from './payment-methods.graphql.js';
 
 export const Route = createFileRoute('/_authenticated/_payment-methods/payment-methods')({
@@ -56,31 +50,15 @@ function PaymentMethodListPage() {
                     cell: ({ row }) => <BooleanDisplayBadge value={row.original.enabled} />,
                 },
             }}
-            bulkActions={[
-                {
-                    component: AssignPaymentMethodsToChannelBulkAction,
-                    order: 100,
-                },
-                {
-                    component: RemovePaymentMethodsFromChannelBulkAction,
-                    order: 200,
-                },
-                {
-                    component: DeletePaymentMethodsBulkAction,
-                    order: 500,
-                },
-            ]}
         >
-            <PageActionBarRight>
-                <PermissionGuard requires={['CreatePaymentMethod']}>
-                    <Button asChild>
-                        <Link to="./new">
-                            <PlusIcon className="mr-2 h-4 w-4" />
-                            New Payment Method
-                        </Link>
-                    </Button>
-                </PermissionGuard>
-            </PageActionBarRight>
+            <PermissionGuard requires={['CreatePaymentMethod']}>
+                <Button asChild>
+                    <Link to="./new">
+                        <PlusIcon className="mr-2 h-4 w-4" />
+                        New Payment Method
+                    </Link>
+                </Button>
+            </PermissionGuard>
         </ListPage>
     );
 }

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

@@ -1,12 +1,12 @@
-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';
-import { TranslatableFormFieldWrapper } from '@/vdb/components/shared/translatable-form-field.js';
-import { Button } from '@/vdb/components/ui/button.js';
-import { Input } from '@/vdb/components/ui/input.js';
-import { Switch } from '@/vdb/components/ui/switch.js';
-import { NEW_ENTITY_PATH } from '@/vdb/constants.js';
+import { RichTextInput } from '@/components/data-input/richt-text-input.js';
+import { ErrorPage } from '@/components/shared/error-page.js';
+import { FormFieldWrapper } from '@/components/shared/form-field-wrapper.js';
+import { PermissionGuard } from '@/components/shared/permission-guard.js';
+import { TranslatableFormFieldWrapper } from '@/components/shared/translatable-form-field.js';
+import { Button } from '@/components/ui/button.js';
+import { Input } from '@/components/ui/input.js';
+import { Switch } from '@/components/ui/switch.js';
+import { NEW_ENTITY_PATH } from '@/constants.js';
 import {
     CustomFieldsPageBlock,
     DetailFormGrid,
@@ -16,10 +16,10 @@ import {
     PageBlock,
     PageLayout,
     PageTitle,
-} from '@/vdb/framework/layout-engine/page-layout.js';
-import { detailPageRouteLoader } from '@/vdb/framework/page/detail-page-route-loader.js';
-import { useDetailPage } from '@/vdb/framework/page/use-detail-page.js';
-import { Trans, useLingui } from '@/vdb/lib/trans.js';
+} 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, useNavigate } from '@tanstack/react-router';
 import { toast } from 'sonner';
 import { PaymentEligibilityCheckerSelector } from './components/payment-eligibility-checker-selector.js';
@@ -30,18 +30,12 @@ import {
     updatePaymentMethodDocument,
 } from './payment-methods.graphql.js';
 
-const pageId = 'payment-method-detail';
-
 export const Route = createFileRoute('/_authenticated/_payment-methods/payment-methods_/$id')({
     component: PaymentMethodDetailPage,
     loader: detailPageRouteLoader({
-        pageId,
         queryDocument: paymentMethodDetailDocument,
         breadcrumb(_isNew, entity) {
-            return [
-                { path: '/payment-methods', label: 'Payment methods' },
-                _isNew ? <Trans>New payment method</Trans> : entity?.name,
-            ];
+            return [{ path: '/payment-methods', label: 'Payment methods' }, entity?.name];
         },
     }),
     errorComponent: ({ error }) => <ErrorPage message={error.message} />,
@@ -54,7 +48,6 @@ function PaymentMethodDetailPage() {
     const { i18n } = useLingui();
 
     const { form, submitHandler, entity, isPending, resetForm } = useDetailPage({
-        pageId,
         queryDocument: paymentMethodDetailDocument,
         createDocument: createPaymentMethodDocument,
         updateDocument: updatePaymentMethodDocument,
@@ -109,7 +102,7 @@ function PaymentMethodDetailPage() {
     });
 
     return (
-        <Page pageId={pageId} form={form} submitHandler={submitHandler} entity={entity}>
+        <Page pageId="payment-method-detail" form={form} submitHandler={submitHandler}>
             <PageTitle>
                 {creatingNewEntity ? <Trans>New payment method</Trans> : (entity?.name ?? '')}
             </PageTitle>

package/src/app/routes/_authenticated/_product-variants/components/variant-price-detail.tsx

@@ -1,10 +1,10 @@
-import { Money } from '@/vdb/components/data-display/money.js';
-import { api } from '@/vdb/graphql/api.js';
-import { graphql } from '@/vdb/graphql/graphql.js';
-import { useChannel } from '@/vdb/hooks/use-channel.js';
-import { Trans } from '@/vdb/lib/trans.js';
-import { useQuery } from '@tanstack/react-query';
 import { useEffect, useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { Trans } from '@/lib/trans.js';
+import { graphql } from '@/graphql/graphql.js';
+import { api } from '@/graphql/api.js';
+import { useChannel } from '@/hooks/use-channel.js';
+import { Money } from '@/components/data-display/money.js';
 
 const taxRatesDocument = graphql(`
     query TaxRates($options: TaxRateListOptions) {
@@ -22,7 +22,6 @@ const taxRatesDocument = graphql(`
         }
     }
 `);
-
 interface VariantPriceDetailProps {
     priceIncludesTax: boolean;
     price: number | undefined;

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

@@ -1,9 +1,9 @@
-import { assetFragment } from '@/vdb/graphql/fragments.js';
-import { graphql } from '@/vdb/graphql/graphql.js';
+import { assetFragment } from '@/graphql/fragments.js';
+import { graphql } from '@/graphql/graphql.js';
 
 export const productVariantListDocument = graphql(
     `
-        query ProductVariantList($options: ProductVariantListOptions) {
+        query ProductVariantLis($options: ProductVariantListOptions) {
             productVariants(options: $options) {
                 items {
                     id
@@ -121,64 +121,3 @@ export const deleteProductVariantDocument = graphql(`
         }
     }
 `);
-
-export const deleteProductVariantsDocument = graphql(`
-    mutation DeleteProductVariants($ids: [ID!]!) {
-        deleteProductVariants(ids: $ids) {
-            result
-            message
-        }
-    }
-`);
-
-export const assignProductVariantsToChannelDocument = graphql(`
-    mutation AssignProductVariantsToChannel($input: AssignProductVariantsToChannelInput!) {
-        assignProductVariantsToChannel(input: $input) {
-            id
-        }
-    }
-`);
-
-export const removeProductVariantsFromChannelDocument = graphql(`
-    mutation RemoveProductVariantsFromChannel($input: RemoveProductVariantsFromChannelInput!) {
-        removeProductVariantsFromChannel(input: $input) {
-            id
-        }
-    }
-`);
-
-export const getProductVariantsWithFacetValuesByIdsDocument = graphql(`
-    query GetProductVariantsWithFacetValuesByIds($ids: [String!]!) {
-        productVariants(options: { filter: { id: { in: $ids } } }) {
-            items {
-                id
-                name
-                sku
-                facetValues {
-                    id
-                    name
-                    code
-                    facet {
-                        id
-                        name
-                        code
-                    }
-                }
-            }
-        }
-    }
-`);
-
-export const updateProductVariantsDocument = graphql(`
-    mutation UpdateProductVariants($input: [UpdateProductVariantInput!]!) {
-        updateProductVariants(input: $input) {
-            id
-            name
-            facetValues {
-                id
-                name
-                code
-            }
-        }
-    }
-`);

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

@@ -1,16 +1,10 @@
-import { Money } from '@/vdb/components/data-display/money.js';
-import { DetailPageButton } from '@/vdb/components/shared/detail-page-button.js';
-import { StockLevelLabel } from '@/vdb/components/shared/stock-level-label.js';
-import { ListPage } from '@/vdb/framework/page/list-page.js';
-import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Money } from '@/components/data-display/money.js';
+import { DetailPageButton } from '@/components/shared/detail-page-button.js';
+import { StockLevelLabel } from '@/components/shared/stock-level-label.js';
+import { ListPage } from '@/framework/page/list-page.js';
+import { useLocalFormat } from '@/hooks/use-local-format.js';
+import { Trans } from '@/lib/trans.js';
 import { createFileRoute } from '@tanstack/react-router';
-import {
-    AssignFacetValuesToProductVariantsBulkAction,
-    AssignProductVariantsToChannelBulkAction,
-    DeleteProductVariantsBulkAction,
-    RemoveProductVariantsFromChannelBulkAction,
-} from './components/product-variant-bulk-actions.js';
 import { deleteProductVariantDocument, productVariantListDocument } from './product-variants.graphql.js';
 
 export const Route = createFileRoute('/_authenticated/_product-variants/product-variants')({
@@ -26,43 +20,19 @@ function ProductListPage() {
             title={<Trans>Product Variants</Trans>}
             listQuery={productVariantListDocument}
             deleteMutation={deleteProductVariantDocument}
-            bulkActions={[
-                {
-                    component: AssignProductVariantsToChannelBulkAction,
-                    order: 100,
-                },
-                {
-                    component: RemoveProductVariantsFromChannelBulkAction,
-                    order: 200,
-                },
-                {
-                    component: AssignFacetValuesToProductVariantsBulkAction,
-                    order: 300,
-                },
-                {
-                    component: DeleteProductVariantsBulkAction,
-                    order: 400,
-                },
-            ]}
             customizeColumns={{
                 name: {
                     header: 'Product Name',
-                    cell: ({ row: { original } }) => (
-                        <DetailPageButton id={original.id} label={original.name} />
-                    ),
+                    cell: ({ row: { original } }) => <DetailPageButton id={original.id} label={original.name} />,
                 },
                 currencyCode: {
                     cell: ({ row: { original } }) => formatCurrencyName(original.currencyCode, 'full'),
                 },
                 price: {
-                    cell: ({ row: { original } }) => (
-                        <Money value={original.price} currency={original.currencyCode} />
-                    ),
+                    cell: ({ row: { original } }) => <Money value={original.price} currency={original.currencyCode} />,
                 },
                 priceWithTax: {
-                    cell: ({ row: { original } }) => (
-                        <Money value={original.priceWithTax} currency={original.currencyCode} />
-                    ),
+                    cell: ({ row: { original } }) => <Money value={original.priceWithTax} currency={original.currencyCode} />,
                 },
                 stockLevels: {
                     cell: ({ row: { original } }) => <StockLevelLabel stockLevels={original.stockLevels} />,

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

@@ -1,17 +1,17 @@
-import { MoneyInput } from '@/vdb/components/data-input/money-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';
-import { FormFieldWrapper } from '@/vdb/components/shared/form-field-wrapper.js';
-import { PermissionGuard } from '@/vdb/components/shared/permission-guard.js';
-import { TaxCategorySelector } from '@/vdb/components/shared/tax-category-selector.js';
-import { TranslatableFormFieldWrapper } from '@/vdb/components/shared/translatable-form-field.js';
-import { Button } from '@/vdb/components/ui/button.js';
-import { FormControl, FormDescription, FormItem, FormLabel, FormMessage } from '@/vdb/components/ui/form.js';
-import { Input } from '@/vdb/components/ui/input.js';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/vdb/components/ui/select.js';
-import { Switch } from '@/vdb/components/ui/switch.js';
-import { NEW_ENTITY_PATH } from '@/vdb/constants.js';
+import { MoneyInput } from '@/components/data-input/money-input.js';
+import { AssignedFacetValues } from '@/components/shared/assigned-facet-values.js';
+import { EntityAssets } from '@/components/shared/entity-assets.js';
+import { ErrorPage } from '@/components/shared/error-page.js';
+import { FormFieldWrapper } from '@/components/shared/form-field-wrapper.js';
+import { PermissionGuard } from '@/components/shared/permission-guard.js';
+import { TaxCategorySelector } from '@/components/shared/tax-category-selector.js';
+import { TranslatableFormFieldWrapper } from '@/components/shared/translatable-form-field.js';
+import { Button } from '@/components/ui/button.js';
+import { FormControl, FormDescription, FormItem, FormLabel, FormMessage } from '@/components/ui/form.js';
+import { Input } from '@/components/ui/input.js';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select.js';
+import { Switch } from '@/components/ui/switch.js';
+import { NEW_ENTITY_PATH } from '@/constants.js';
 import {
     CustomFieldsPageBlock,
     DetailFormGrid,
@@ -21,11 +21,11 @@ import {
     PageBlock,
     PageLayout,
     PageTitle,
-} from '@/vdb/framework/layout-engine/page-layout.js';
-import { detailPageRouteLoader } from '@/vdb/framework/page/detail-page-route-loader.js';
-import { useDetailPage } from '@/vdb/framework/page/use-detail-page.js';
-import { useChannel } from '@/vdb/hooks/use-channel.js';
-import { Trans, useLingui } from '@/vdb/lib/trans.js';
+} 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 { useChannel } from '@/hooks/use-channel.js';
+import { Trans, useLingui } from '@/lib/trans.js';
 import { createFileRoute, useNavigate } from '@tanstack/react-router';
 import { Fragment } from 'react/jsx-runtime';
 import { toast } from 'sonner';
@@ -36,22 +36,12 @@ import {
     updateProductVariantDocument,
 } from './product-variants.graphql.js';
 
-const pageId = 'product-variant-detail';
-
 export const Route = createFileRoute('/_authenticated/_product-variants/product-variants_/$id')({
     component: ProductVariantDetailPage,
     loader: detailPageRouteLoader({
-        pageId,
         queryDocument: productVariantDetailDocument,
-        breadcrumb(_isNew, entity, location) {
-            if ((location.search as any).from === 'product') {
-                return [
-                    { path: '/product', label: 'Products' },
-                    { path: `/products/${entity?.product.id}`, label: entity?.product.name ?? '' },
-                    entity?.name,
-                ];
-            }
-            return [{ path: '/product-variants', label: 'Product Variants' }, entity?.name];
+        breadcrumb(_isNew, entity) {
+            return [{ path: '/product-variants', label: 'Product variants' }, entity?.name];
         },
     }),
     errorComponent: ({ error }) => <ErrorPage message={error.message} />,
@@ -65,7 +55,6 @@ function ProductVariantDetailPage() {
     const { activeChannel } = useChannel();
 
     const { form, submitHandler, entity, isPending, resetForm } = useDetailPage({
-        pageId,
         queryDocument: productVariantDetailDocument,
         createDocument: createProductVariantDocument,
         updateDocument: updateProductVariantDocument,
@@ -113,7 +102,7 @@ function ProductVariantDetailPage() {
     const [price, taxCategoryId] = form.watch(['price', 'taxCategoryId']);
 
     return (
-        <Page pageId={pageId} form={form} submitHandler={submitHandler} entity={entity}>
+        <Page pageId="product-variant-detail" form={form} submitHandler={submitHandler}>
             <PageTitle>
                 {creatingNewEntity ? <Trans>New product variant</Trans> : (entity?.name ?? '')}
             </PageTitle>

package/src/app/routes/_authenticated/_products/components/add-product-variant-dialog.tsx

@@ -1,6 +1,6 @@
-import { MoneyInput } from '@/vdb/components/data-input/money-input.js';
-import { FormFieldWrapper } from '@/vdb/components/shared/form-field-wrapper.js';
-import { Button } from '@/vdb/components/ui/button.js';
+import { MoneyInput } from '@/components/data-input/money-input.js';
+import { FormFieldWrapper } from '@/components/shared/form-field-wrapper.js';
+import { Button } from '@/components/ui/button.js';
 import {
     Dialog,
     DialogContent,
@@ -8,13 +8,13 @@ import {
     DialogHeader,
     DialogTitle,
     DialogTrigger,
-} from '@/vdb/components/ui/dialog.js';
-import { Form } from '@/vdb/components/ui/form.js';
-import { Input } from '@/vdb/components/ui/input.js';
-import { api } from '@/vdb/graphql/api.js';
-import { graphql, ResultOf, VariablesOf } from '@/vdb/graphql/graphql.js';
-import { useChannel } from '@/vdb/hooks/use-channel.js';
-import { Trans, useLingui } from '@/vdb/lib/trans.js';
+} from '@/components/ui/dialog.js';
+import { Form } from '@/components/ui/form.js';
+import { Input } from '@/components/ui/input.js';
+import { api } from '@/graphql/api.js';
+import { graphql, ResultOf, VariablesOf } from '@/graphql/graphql.js';
+import { useChannel } from '@/hooks/use-channel.js';
+import { Trans, useLingui } from '@/lib/trans.js';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useMutation, useQuery } from '@tanstack/react-query';
 import { Plus } from 'lucide-react';