@vendure/dashboard 3.4.0-minor-202506250934 → 3.4.0

package/src/lib/graphql/settings-store-operations.ts

@@ -0,0 +1,17 @@
+import { graphql } from './graphql.js';
+
+export const getSettingsStoreValueDocument = graphql(`
+    query GetSettingsStoreValue($key: String!) {
+        getSettingsStoreValue(key: $key)
+    }
+`);
+
+export const setSettingsStoreValueDocument = graphql(`
+    mutation SetSettingsStoreValue($input: SettingsStoreInput!) {
+        setSettingsStoreValue(input: $input) {
+            key
+            result
+            error
+        }
+    }
+`);

package/src/lib/hooks/use-auth.tsx

@@ -1,5 +1,5 @@
+import { AuthContext } from '@/vdb/providers/auth.js';
 import * as React from 'react';
-import { AuthContext } from '../providers/auth.js';
 
 /**
  * @description

package/src/lib/hooks/use-channel.ts

@@ -1,4 +1,4 @@
-import { ChannelContext } from '@/providers/channel-provider.js';
+import { ChannelContext } from '@/vdb/providers/channel-provider.js';
 import * as React from 'react';
 
 // Hook to use the channel context

package/src/lib/hooks/use-extended-detail-query.ts

@@ -0,0 +1,37 @@
+import { extendDetailFormQuery } from '@/vdb/framework/document-extension/extend-detail-form-query.js';
+import { useLingui } from '@/vdb/lib/trans.js';
+import { DocumentNode } from 'graphql';
+import { useEffect, useMemo, useRef } from 'react';
+import { toast } from 'sonner';
+
+/**
+ * @description
+ * Extends a detail page query document with any registered extensions provided by
+ * the `extendDetailDocument` function for the given page.
+ */
+export function useExtendedDetailQuery<T extends DocumentNode>(detailQuery: T, pageId?: string) {
+    const hasShownError = useRef(false);
+    const { i18n } = useLingui();
+
+    const extendedDetailQuery = useMemo(() => {
+        if (!pageId || !detailQuery) {
+            return detailQuery;
+        }
+        const result = extendDetailFormQuery(detailQuery, pageId);
+        if (result.errorMessage && !hasShownError.current) {
+            // Show a user-friendly toast notification
+            toast.error(i18n.t('Query extension error'), {
+                description:
+                    result.errorMessage + '. ' + i18n.t('The page will continue with the default query.'),
+            });
+        }
+        return result.extendedQuery;
+    }, [detailQuery, pageId]);
+
+    // Reset error flag when dependencies change
+    useEffect(() => {
+        hasShownError.current = false;
+    }, [detailQuery, pageId]);
+
+    return extendedDetailQuery;
+}

package/src/lib/hooks/use-extended-list-query.ts

@@ -0,0 +1,75 @@
+import { getListQueryDocuments } from '@/vdb/framework/data-table/data-table-extensions.js';
+import { extendDocument } from '@/vdb/framework/document-extension/extend-document.js';
+import { useLingui } from '@/vdb/lib/trans.js';
+import { DocumentNode } from 'graphql';
+import { useEffect, useMemo, useRef } from 'react';
+import { toast } from 'sonner';
+
+import { usePageBlock } from './use-page-block.js';
+import { usePage } from './use-page.js';
+
+export function useExtendedListQuery<T extends DocumentNode>(listQuery: T) {
+    const { pageId } = usePage();
+    const { blockId } = usePageBlock() ?? {};
+    const { i18n } = useLingui();
+    const listQueryExtensions = pageId && blockId ? getListQueryDocuments(pageId, blockId) : [];
+    const hasShownError = useRef(false);
+
+    const extendedListQuery = useMemo(() => {
+        let result: T = listQuery;
+
+        try {
+            result = listQueryExtensions.reduce(
+                (acc, extension) => extendDocument(acc, extension),
+                listQuery,
+            ) as T;
+        } catch (err) {
+            const error = err instanceof Error ? err : new Error(String(err));
+            // Continue with the original query instead of the extended one
+            result = listQuery;
+
+            // Store error for useEffect to handle
+            if (error && !hasShownError.current) {
+                hasShownError.current = true;
+
+                // Provide a helpful error message based on the error type
+                let errorMessageText = i18n.t('Failed to extend query document');
+                if (error.message.includes('Extension query must have at least one top-level field')) {
+                    errorMessageText = i18n.t(
+                        'Query extension is invalid: must have at least one top-level field',
+                    );
+                } else if (error.message.includes('The query extension must extend the')) {
+                    errorMessageText = i18n.t('Query extension mismatch: ') + error.message;
+                } else if (error.message.includes('Syntax Error')) {
+                    errorMessageText = i18n.t('Query extension contains invalid GraphQL syntax');
+                } else {
+                    errorMessageText = i18n.t('Query extension error: ') + error.message;
+                }
+
+                // Log the error and continue with the original query
+                // eslint-disable-next-line no-console
+                console.warn(`${errorMessageText}. Continuing with original query.`, {
+                    pageId,
+                    blockId,
+                    extensionsCount: listQueryExtensions.length,
+                    error: error.message,
+                });
+
+                // Show a user-friendly toast notification
+                toast.error(i18n.t('Query extension error'), {
+                    description:
+                        errorMessageText + '. ' + i18n.t('The page will continue with the default query.'),
+                });
+            }
+        }
+
+        return result;
+    }, [listQuery, listQueryExtensions, pageId, blockId]);
+
+    // Reset error flag when dependencies change
+    useEffect(() => {
+        hasShownError.current = false;
+    }, [listQuery, listQueryExtensions, pageId, blockId]);
+
+    return extendedListQuery;
+}

package/src/lib/hooks/use-floating-bulk-actions.ts

@@ -0,0 +1,82 @@
+import { useEffect, useState } from 'react';
+
+interface FloatingPosition {
+    bottom: string;
+    left: string;
+}
+
+interface UseFloatingBulkActionsOptions {
+    selectionCount: number;
+    containerSelector: string;
+    bufferDistance?: number;
+    bottomOffset?: number;
+}
+
+/**
+ * Common logic used to power floating the bulk action component used in
+ * data tables and in the asset gallery.
+ */
+export function useFloatingBulkActions({
+    selectionCount,
+    containerSelector,
+    bufferDistance = 80,
+    bottomOffset = 10,
+}: Readonly<UseFloatingBulkActionsOptions>) {
+    const [position, setPosition] = useState<FloatingPosition>({ bottom: '2.5rem', left: '50%' });
+    const [isPositioned, setIsPositioned] = useState(false);
+
+    useEffect(() => {
+        if (selectionCount === 0) {
+            setIsPositioned(false);
+            return;
+        }
+
+        const updatePosition = () => {
+            const container = document.querySelector(containerSelector)?.closest('div') as HTMLElement;
+            if (!container) return;
+
+            const containerRect = container.getBoundingClientRect();
+            const viewportHeight = window.innerHeight;
+
+            // Check if container bottom is visible in viewport
+            const containerBottom = containerRect.bottom;
+            const isContainerFullyVisible = containerBottom <= viewportHeight - bufferDistance;
+
+            // Calculate horizontal center
+            const containerLeft = containerRect.left;
+            const containerWidth = containerRect.width;
+            const centerX = containerLeft + containerWidth / 2;
+
+            if (isContainerFullyVisible) {
+                // Position relative to container bottom
+                setPosition({
+                    bottom: `${viewportHeight - containerBottom + bottomOffset}px`,
+                    left: `${centerX}px`,
+                });
+            } else {
+                // Position relative to viewport bottom, centered in container
+                setPosition({
+                    bottom: '2.5rem',
+                    left: `${centerX}px`,
+                });
+            }
+
+            setIsPositioned(true);
+        };
+
+        updatePosition();
+        window.addEventListener('scroll', updatePosition);
+        window.addEventListener('resize', updatePosition);
+
+        return () => {
+            window.removeEventListener('scroll', updatePosition);
+            window.removeEventListener('resize', updatePosition);
+        };
+    }, [selectionCount, containerSelector, bufferDistance]);
+
+    return {
+        position,
+        isPositioned,
+        shouldShow: selectionCount > 0 && isPositioned,
+    };
+}

package/src/lib/hooks/use-grouped-permissions.ts

@@ -1,7 +1,8 @@
-import { useServerConfig } from '@/hooks/use-server-config.js';
-import { ServerConfig } from '@/providers/server-config.js';
+import { ServerConfig } from '@/vdb/providers/server-config.js';
 import { useMemo } from 'react';
 
+import { useServerConfig } from './use-server-config.js';
+
 export function useGroupedPermissions() {
     const serverConfig = useServerConfig();
     const permissionDefinitions = serverConfig?.permissions ?? [];

package/src/lib/hooks/use-local-format.ts

@@ -77,15 +77,30 @@ export function useLocalFormat() {
             if (diffSeconds < 60) {
                 return new Intl.RelativeTimeFormat(locale, options).format(diffSeconds * -1, 'seconds');
             } else if (diffSeconds < 3600) {
-                return new Intl.RelativeTimeFormat(locale, options).format(diffSeconds * -1, 'minutes');
+                return new Intl.RelativeTimeFormat(locale, options).format(
+                    Math.floor((diffSeconds / 60) * -1),
+                    'minutes',
+                );
             } else if (diffSeconds < 86400) {
-                return new Intl.RelativeTimeFormat(locale, options).format(diffSeconds * -1, 'hours');
+                return new Intl.RelativeTimeFormat(locale, options).format(
+                    Math.floor((diffSeconds / 3600) * -1),
+                    'hours',
+                );
             } else if (diffSeconds < 2592000) {
-                return new Intl.RelativeTimeFormat(locale, options).format(diffSeconds * -1, 'days');
+                return new Intl.RelativeTimeFormat(locale, options).format(
+                    Math.floor((diffSeconds / 86400) * -1),
+                    'days',
+                );
             } else if (diffSeconds < 31536000) {
-                return new Intl.RelativeTimeFormat(locale, options).format(diffSeconds * -1, 'months');
+                return new Intl.RelativeTimeFormat(locale, options).format(
+                    Math.floor((diffSeconds / 2592000) * -1),
+                    'months',
+                );
             } else {
-                return new Intl.RelativeTimeFormat(locale, options).format(diffSeconds * -1, 'years');
+                return new Intl.RelativeTimeFormat(locale, options).format(
+                    Math.floor((diffSeconds / 31536000) * -1),
+                    'years',
+                );
             }
         },
         [locale],

package/src/lib/hooks/use-page-block.tsx

@@ -0,0 +1,18 @@
+import { PageBlockContext } from '@/vdb/framework/layout-engine/page-block-provider.js';
+import { useContext } from 'react';
+
+/**
+ * @description
+ * Returns the current PageBlock context, which means there must be
+ * a PageBlock ancestor component higher in the tree.
+ *
+ * If `optional` is set to true, the hook will not throw if no PageBlock
+ * exists higher in the tree, but will just return undefined.
+ */
+export function usePageBlock({ optional }: { optional?: boolean } = {}) {
+    const pageBlock = useContext(PageBlockContext);
+    if (!pageBlock && !optional) {
+        throw new Error('PageBlockProvider not found');
+    }
+    return pageBlock;
+}

package/src/lib/hooks/use-page.tsx

@@ -1,5 +1,5 @@
-import { useContext } from "react";
-import { PageContext } from '@/framework/layout-engine/page-provider.js';
+import { PageContext } from '@/vdb/framework/layout-engine/page-provider.js';
+import { useContext } from 'react';
 
 export function usePage() {
     const page = useContext(PageContext);

package/src/lib/hooks/use-permissions.ts

@@ -1,7 +1,8 @@
-import { useAuth } from '@/hooks/use-auth.js';
-import { useChannel } from '@/hooks/use-channel.js';
 import { Permission } from '@vendure/common/lib/generated-types';
 
+import { useAuth } from './use-auth.js';
+import { useChannel } from './use-channel.js';
+
 /**
  * @description
  * **Status: Developer Preview**

package/src/lib/hooks/use-server-config.ts

@@ -1,4 +1,4 @@
-import { ServerConfigContext } from '@/providers/server-config.js';
+import { ServerConfigContext } from '@/vdb/providers/server-config.js';
 import React from 'react';
 
 export const useServerConfig = () => React.useContext(ServerConfigContext);

package/src/lib/hooks/use-theme.ts

@@ -1,4 +1,4 @@
-import { ThemeProviderContext } from '@/providers/theme-provider.js';
+import { ThemeProviderContext } from '@/vdb/providers/theme-provider.js';
 import { useContext } from 'react';
 
 export const useTheme = () => {

package/src/lib/hooks/use-user-settings.tsx

@@ -1,5 +1,5 @@
+import { UserSettingsContext } from '@/vdb/providers/user-settings.js';
 import { useContext } from 'react';
-import { UserSettingsContext } from '../providers/user-settings.js';
 
 // Hook to use the user settings
 

package/src/lib/index.ts

@@ -1,21 +1,38 @@
 // This file is auto-generated. Do not edit manually.
-// Generated on: 2025-03-28T08:23:55.325Z
 
 export * from './components/data-display/boolean.js';
 export * from './components/data-display/date-time.js';
+export * from './components/data-display/json.js';
 export * from './components/data-display/money.js';
 export * from './components/data-input/affixed-input.js';
 export * from './components/data-input/customer-group-input.js';
 export * from './components/data-input/datetime-input.js';
 export * from './components/data-input/facet-value-input.js';
 export * from './components/data-input/money-input.js';
-export * from './components/data-input/richt-text-input.js';
+export * from './components/data-input/relation-input.js';
+export * from './components/data-input/relation-selector.js';
+export * from './components/data-input/rich-text-input.js';
+export * from './components/data-table/add-filter-menu.js';
+export * from './components/data-table/data-table-bulk-action-item.js';
+export * from './components/data-table/data-table-bulk-actions.js';
 export * from './components/data-table/data-table-column-header.js';
 export * from './components/data-table/data-table-faceted-filter.js';
+export * from './components/data-table/data-table-filter-badge.js';
 export * from './components/data-table/data-table-filter-dialog.js';
 export * from './components/data-table/data-table-pagination.js';
+export * from './components/data-table/data-table-utils.js';
 export * from './components/data-table/data-table-view-options.js';
 export * from './components/data-table/data-table.js';
+export * from './components/data-table/filters/data-table-boolean-filter.js';
+export * from './components/data-table/filters/data-table-datetime-filter.js';
+export * from './components/data-table/filters/data-table-id-filter.js';
+export * from './components/data-table/filters/data-table-number-filter.js';
+export * from './components/data-table/filters/data-table-string-filter.js';
+export * from './components/data-table/human-readable-operator.js';
+export * from './components/data-table/refresh-button.js';
+export * from './components/data-table/types.js';
+export * from './components/data-table/use-generated-columns.js';
+export * from './components/labeled-data.js';
 export * from './components/layout/app-layout.js';
 export * from './components/layout/app-sidebar.js';
 export * from './components/layout/channel-switcher.js';
@@ -25,14 +42,21 @@ export * from './components/layout/language-dialog.js';
 export * from './components/layout/nav-main.js';
 export * from './components/layout/nav-projects.js';
 export * from './components/layout/nav-user.js';
+export * from './components/layout/prerelease-popup.js';
 export * from './components/login/login-form.js';
 export * from './components/shared/alerts.js';
 export * from './components/shared/animated-number.js';
+export * from './components/shared/asset/asset-bulk-actions.js';
+export * from './components/shared/asset/asset-focal-point-editor.js';
 export * from './components/shared/asset/asset-gallery.js';
 export * from './components/shared/asset/asset-picker-dialog.js';
 export * from './components/shared/asset/asset-preview-dialog.js';
+export * from './components/shared/asset/asset-preview-selector.js';
 export * from './components/shared/asset/asset-preview.js';
+export * from './components/shared/asset/asset-properties.js';
 export * from './components/shared/asset/focal-point-control.js';
+export * from './components/shared/assign-to-channel-bulk-action.js';
+export * from './components/shared/assign-to-channel-dialog.js';
 export * from './components/shared/assigned-facet-values.js';
 export * from './components/shared/channel-code-label.js';
 export * from './components/shared/channel-selector.js';
@@ -43,6 +67,7 @@ export * from './components/shared/copyable-text.js';
 export * from './components/shared/country-selector.js';
 export * from './components/shared/currency-selector.js';
 export * from './components/shared/custom-fields-form.js';
+export * from './components/shared/customer-address-form.js';
 export * from './components/shared/customer-group-chip.js';
 export * from './components/shared/customer-group-selector.js';
 export * from './components/shared/customer-selector.js';
@@ -61,9 +86,12 @@ export * from './components/shared/icon-mark.js';
 export * from './components/shared/language-selector.js';
 export * from './components/shared/logo-mark.js';
 export * from './components/shared/multi-select.js';
+export * from './components/shared/navigation-confirmation.js';
+export * from './components/shared/option-value-input.js';
 export * from './components/shared/paginated-list-data-table.js';
 export * from './components/shared/permission-guard.js';
-export * from './components/shared/rich-text-editor.js';
+export * from './components/shared/product-variant-selector.js';
+export * from './components/shared/remove-from-channel-bulk-action.js';
 export * from './components/shared/role-code-label.js';
 export * from './components/shared/role-selector.js';
 export * from './components/shared/seller-selector.js';
@@ -75,58 +103,98 @@ export * from './components/shared/zone-selector.js';
 export * from './components/ui/accordion.js';
 export * from './components/ui/alert-dialog.js';
 export * from './components/ui/alert.js';
+export * from './components/ui/aspect-ratio.js';
 export * from './components/ui/badge.js';
 export * from './components/ui/breadcrumb.js';
 export * from './components/ui/button.js';
 export * from './components/ui/calendar.js';
 export * from './components/ui/card.js';
+export * from './components/ui/carousel.js';
+export * from './components/ui/chart.js';
 export * from './components/ui/checkbox.js';
 export * from './components/ui/collapsible.js';
 export * from './components/ui/command.js';
+export * from './components/ui/context-menu.js';
 export * from './components/ui/dialog.js';
+export * from './components/ui/drawer.js';
 export * from './components/ui/dropdown-menu.js';
 export * from './components/ui/form.js';
 export * from './components/ui/hover-card.js';
+export * from './components/ui/input-otp.js';
 export * from './components/ui/input.js';
 export * from './components/ui/label.js';
+export * from './components/ui/menubar.js';
+export * from './components/ui/navigation-menu.js';
 export * from './components/ui/pagination.js';
 export * from './components/ui/popover.js';
+export * from './components/ui/progress.js';
+export * from './components/ui/radio-group.js';
+export * from './components/ui/resizable.js';
 export * from './components/ui/scroll-area.js';
 export * from './components/ui/select.js';
 export * from './components/ui/separator.js';
 export * from './components/ui/sheet.js';
 export * from './components/ui/sidebar.js';
 export * from './components/ui/skeleton.js';
+export * from './components/ui/slider.js';
 export * from './components/ui/sonner.js';
 export * from './components/ui/switch.js';
 export * from './components/ui/table.js';
 export * from './components/ui/tabs.js';
 export * from './components/ui/textarea.js';
+export * from './components/ui/toggle-group.js';
+export * from './components/ui/toggle.js';
 export * from './components/ui/tooltip.js';
+export * from './framework/alert/alert-extensions.js';
+export * from './framework/alert/alert-item.js';
+export * from './framework/alert/alerts-indicator.js';
 export * from './framework/component-registry/component-registry.js';
 export * from './framework/component-registry/dynamic-component.js';
 export * from './framework/dashboard-widget/base-widget.js';
-export * from './framework/dashboard-widget/latest-orders-widget/index.js';
 export * from './framework/dashboard-widget/latest-orders-widget/latest-orders-widget.graphql.js';
 export * from './framework/dashboard-widget/metrics-widget/chart.js';
-export * from './framework/dashboard-widget/metrics-widget/index.js';
 export * from './framework/dashboard-widget/metrics-widget/metrics-widget.graphql.js';
-export * from './framework/dashboard-widget/orders-summary/index.js';
 export * from './framework/dashboard-widget/orders-summary/order-summary-widget.graphql.js';
-export * from './framework/dashboard-widget/types.js';
 export * from './framework/dashboard-widget/widget-extensions.js';
+export * from './framework/data-table/data-table-extensions.js';
 export * from './framework/defaults.js';
+export * from './framework/document-extension/extend-detail-form-query.js';
+export * from './framework/document-extension/extend-document.js';
 export * from './framework/document-introspection/add-custom-fields.js';
 export * from './framework/document-introspection/get-document-structure.js';
 export * from './framework/document-introspection/hooks.js';
 export * from './framework/extension-api/define-dashboard-extension.js';
+export * from './framework/extension-api/display-component-extensions.js';
 export * from './framework/extension-api/extension-api-types.js';
+export * from './framework/extension-api/input-component-extensions.js';
+export * from './framework/extension-api/logic/alerts.js';
+export * from './framework/extension-api/logic/data-table.js';
+export * from './framework/extension-api/logic/detail-forms.js';
+export * from './framework/extension-api/logic/form-components.js';
+export * from './framework/extension-api/logic/layout.js';
+export * from './framework/extension-api/logic/navigation.js';
+export * from './framework/extension-api/logic/widgets.js';
+export * from './framework/extension-api/types/alerts.js';
+export * from './framework/extension-api/types/data-table.js';
+export * from './framework/extension-api/types/detail-forms.js';
+export * from './framework/extension-api/types/form-components.js';
+export * from './framework/extension-api/types/layout.js';
+export * from './framework/extension-api/types/login.js';
+export * from './framework/extension-api/types/navigation.js';
+export * from './framework/extension-api/types/widgets.js';
 export * from './framework/extension-api/use-dashboard-extensions.js';
+export * from './framework/extension-api/use-login-extensions.js';
+export * from './framework/form-engine/custom-form-component-extensions.js';
+export * from './framework/form-engine/custom-form-component.js';
 export * from './framework/form-engine/form-schema-tools.js';
+export * from './framework/form-engine/overridden-form-component.js';
 export * from './framework/form-engine/use-generated-form.js';
+export * from './framework/form-engine/utils.js';
 export * from './framework/layout-engine/layout-extensions.js';
 export * from './framework/layout-engine/location-wrapper.js';
+export * from './framework/layout-engine/page-block-provider.js';
 export * from './framework/layout-engine/page-layout.js';
+export * from './framework/layout-engine/page-provider.js';
 export * from './framework/nav-menu/nav-menu-extensions.js';
 export * from './framework/page/detail-page-route-loader.js';
 export * from './framework/page/detail-page.js';
@@ -135,15 +203,25 @@ export * from './framework/page/page-api.js';
 export * from './framework/page/page-types.js';
 export * from './framework/page/use-detail-page.js';
 export * from './framework/page/use-extended-router.js';
+export * from './framework/registry/global-registry.js';
+export * from './framework/registry/registry-types.js';
+export * from './graphql/api.js';
+export * from './graphql/common-operations.js';
+export * from './graphql/fragments.js';
+export * from './graphql/graphql.js';
 export * from './hooks/use-auth.js';
 export * from './hooks/use-channel.js';
 export * from './hooks/use-custom-field-config.js';
+export * from './hooks/use-extended-detail-query.js';
+export * from './hooks/use-extended-list-query.js';
 export * from './hooks/use-grouped-permissions.js';
 export * from './hooks/use-local-format.js';
 export * from './hooks/use-mobile.js';
+export * from './hooks/use-page-block.js';
 export * from './hooks/use-page.js';
 export * from './hooks/use-permissions.js';
 export * from './hooks/use-server-config.js';
 export * from './hooks/use-theme.js';
 export * from './hooks/use-user-settings.js';
+export * from './lib/trans.js';
 export * from './lib/utils.js';

package/src/lib/lib/trans.tsx

@@ -1,10 +1,10 @@
 /**
- * This is a temporary work-around because the Lingui macros do not 
+ * This is a temporary work-around because the Lingui macros do not
  * currently work when the dashboard is packaged in an npm
  * module. Related issue: https://github.com/kentcdodds/babel-plugin-macros/issues/87
  */
-export function Trans({ children }: { children: React.ReactNode }) {
-    return <>{children}</>
+export function Trans({ children }: Readonly<{ children: React.ReactNode; context?: string }>) {
+    return <>{children}</>;
 }
 
 export function useLingui() {

package/src/lib/lib/utils.ts

@@ -1,4 +1,4 @@
-import { clsx, type ClassValue } from 'clsx';
+import { type ClassValue, clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 
 export function cn(...inputs: ClassValue[]) {
@@ -58,3 +58,54 @@ export function normalizeString(input: string, spaceReplacer = ' '): string {
         .replace(/\s+/g, spaceReplacer)
         .replace(multipleSequentialReplacerRegex, spaceReplacer);
 }
+
+/**
+ * Removes any readonly custom fields from form values before submission.
+ * Also removes localeString and localeText fields from the root customFields object
+ * since they should only exist in the translations array.
+ * This prevents errors when submitting readonly custom field values to mutations.
+ *
+ * @param values - The form values that may contain custom fields
+ * @param customFieldConfigs - Array of custom field configurations for the entity
+ * @returns The values with readonly custom fields removed and locale fields properly placed
+ */
+export function removeReadonlyAndLocalizedCustomFields<T extends Record<string, any>>(
+    values: T,
+    customFieldConfigs: Array<{ name: string; readonly?: boolean | null; type?: string }> = [],
+): T {
+    if (!values || !customFieldConfigs?.length) {
+        return values;
+    }
+
+    const result = structuredClone(values);
+    const readonlyFieldNames = customFieldConfigs
+        .filter(config => config.readonly === true)
+        .map(config => config.name);
+    const localeFieldNames = customFieldConfigs
+        .filter(config => config.type === 'localeString' || config.type === 'localeText')
+        .map(config => config.name);
+    const fieldsToRemoveFromRoot = [...readonlyFieldNames, ...localeFieldNames];
+
+    if (result.customFields && typeof result.customFields === 'object') {
+        fieldsToRemoveFromRoot.forEach(fieldName => {
+            delete result.customFields[fieldName];
+        });
+    }
+
+    removeReadonlyFromTranslations(result, readonlyFieldNames);
+    return result;
+}
+
+function removeReadonlyFromTranslations(entity: Record<string, any>, readonlyFieldNames: string[]): void {
+    if (!Array.isArray(entity.translations)) {
+        return;
+    }
+
+    entity.translations.forEach(translation => {
+        if (translation?.customFields && typeof translation.customFields === 'object') {
+            readonlyFieldNames.forEach(fieldName => {
+                delete translation.customFields[fieldName];
+            });
+        }
+    });
+}