@vendure/dashboard 3.3.5-master-202506260234 → 3.3.5

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@vendure/dashboard",
     "private": false,
-    "version": "3.3.5-master-202506260234",
+    "version": "3.3.5",
     "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-202506260234",
-        "@vendure/core": "^3.3.5-master-202506260234",
+        "@vendure/common": "3.3.5",
+        "@vendure/core": "3.3.5",
         "@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": "e69b67636ecee5332319d38d031f6cc0f70517eb"
+    "gitHead": "71d36ec5164c833d9f05f6e8140db13c450f4d29"
 }

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

@@ -1,7 +1,9 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { useState } from 'react';
 import { toast } from 'sonner';
-import { useMutation } from '@tanstack/react-query';
 
+import { FacetValueChip } from '@/components/shared/facet-value-chip.js';
+import { FacetValue, FacetValueSelector } from '@/components/shared/facet-value-selector.js';
 import { Button } from '@/components/ui/button.js';
 import {
     Dialog,
@@ -11,12 +13,31 @@ import {
     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';
+import { getDetailQueryOptions } from '@/framework/page/use-detail-page.js';
+import {
+    getProductsWithFacetValuesByIdsDocument,
+    productDetailDocument,
+    updateProductsDocument,
+} from '../products.graphql.js';
+
+interface ProductWithFacetValues {
+    id: string;
+    name: string;
+    facetValues: Array<{
+        id: string;
+        name: string;
+        code: string;
+        facet: {
+            id: string;
+            name: string;
+            code: string;
+        };
+    }>;
+}
 
 interface AssignFacetValuesDialogProps {
     open: boolean;
@@ -25,9 +46,24 @@ interface AssignFacetValuesDialogProps {
     onSuccess?: () => void;
 }
 
-export function AssignFacetValuesDialog({ open, onOpenChange, productIds, onSuccess }: AssignFacetValuesDialogProps) {
+export function AssignFacetValuesDialog({
+    open,
+    onOpenChange,
+    productIds,
+    onSuccess,
+}: AssignFacetValuesDialogProps) {
     const { i18n } = useLingui();
-    const [selectedFacetValueIds, setSelectedFacetValueIds] = useState<string[]>([]);
+    const [selectedValues, setSelectedValues] = useState<FacetValue[]>([]);
+    const [facetValuesRemoved, setFacetValuesRemoved] = useState(false);
+    const [removedFacetValues, setRemovedFacetValues] = useState<Set<string>>(new Set());
+    const queryClient = useQueryClient();
+
+    // Fetch existing facet values for the products
+    const { data: productsData, isLoading } = useQuery({
+        queryKey: ['productsWithFacetValues', productIds],
+        queryFn: () => api.query(getProductsWithFacetValuesByIdsDocument, { ids: productIds }),
+        enabled: open && productIds.length > 0,
+    });
 
     const { mutate, isPending } = useMutation({
         mutationFn: api.mutate(updateProductsDocument),
@@ -35,6 +71,14 @@ export function AssignFacetValuesDialog({ open, onOpenChange, productIds, onSucc
             toast.success(i18n.t(`Successfully updated facet values for ${productIds.length} products`));
             onSuccess?.();
             onOpenChange(false);
+            // Reset state
+            setSelectedValues([]);
+            setFacetValuesRemoved(false);
+            setRemovedFacetValues(new Set());
+            productIds.forEach(id => {
+                const { queryKey } = getDetailQueryOptions(productDetailDocument, { id });
+                queryClient.removeQueries({ queryKey });
+            });
         },
         onError: () => {
             toast.error(`Failed to update facet values for ${productIds.length} products`);
@@ -42,57 +86,165 @@ export function AssignFacetValuesDialog({ open, onOpenChange, productIds, onSucc
     });
 
     const handleAssign = () => {
-        if (selectedFacetValueIds.length === 0) {
-            toast.error('Please select at least one facet value');
+        if (selectedValues.length === 0 && !facetValuesRemoved) {
+            toast.error('Please select at least one facet value or make changes to existing ones');
             return;
         }
 
+        if (!productsData?.products.items) {
+            return;
+        }
+
+        const selectedFacetValueIds = selectedValues.map(sv => sv.id);
+
         mutate({
-            input: productIds.map(productId => ({
-                id: productId,
-                facetValueIds: selectedFacetValueIds,
+            input: productsData.products.items.map(product => ({
+                id: product.id,
+                facetValueIds: [
+                    ...new Set([
+                        ...product.facetValues.filter(fv => !removedFacetValues.has(fv.id)).map(fv => fv.id),
+                        ...selectedFacetValueIds,
+                    ]),
+                ],
             })),
         });
     };
 
     const handleFacetValueSelect = (facetValue: FacetValue) => {
-        setSelectedFacetValueIds(prev => [...new Set([...prev, facetValue.id])]);
+        setSelectedValues(prev => [...prev, facetValue]);
+    };
+
+    const removeFacetValue = (productId: string, facetValueId: string) => {
+        setRemovedFacetValues(prev => new Set([...prev, facetValueId]));
+        setFacetValuesRemoved(true);
+    };
+
+    const handleCancel = () => {
+        onOpenChange(false);
+        // Reset state
+        setSelectedValues([]);
+        setFacetValuesRemoved(false);
+        setRemovedFacetValues(new Set());
+    };
+
+    // Filter out removed facet values for display
+    const getDisplayFacetValues = (product: ProductWithFacetValues) => {
+        return product.facetValues.filter(fv => !removedFacetValues.has(fv.id));
     };
 
     return (
         <Dialog open={open} onOpenChange={onOpenChange}>
-            <DialogContent className="sm:max-w-[500px]">
+            <DialogContent className="sm:max-w-[800px] max-h-[80vh] overflow-hidden flex flex-col">
                 <DialogHeader>
-                    <DialogTitle><Trans>Edit facet values</Trans></DialogTitle>
+                    <DialogTitle>
+                        <Trans>Edit facet values</Trans>
+                    </DialogTitle>
                     <DialogDescription>
-                        <Trans>Select facet values to assign to {productIds.length} products</Trans>
+                        <Trans>Add or remove facet values for {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>
+
+                <div className="flex-1 overflow-hidden flex flex-col gap-4">
+                    {/* Add new facet values section */}
+                    <div className="flex items-center gap-2">
+                        <div className="text-sm font-medium">
+                            <Trans>Add facet value</Trans>
+                        </div>
                         <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>
+
+                    {/* Products table */}
+                    <div className="flex-1 overflow-auto">
+                        {isLoading ? (
+                            <div className="flex items-center justify-center py-8">
+                                <div className="text-sm text-muted-foreground">Loading...</div>
+                            </div>
+                        ) : productsData?.products.items ? (
+                            <div className="border rounded-md">
+                                <table className="w-full">
+                                    <thead className="bg-muted/50">
+                                        <tr>
+                                            <th className="text-left p-3 text-sm font-medium">
+                                                <Trans>Product</Trans>
+                                            </th>
+                                            <th className="text-left p-3 text-sm font-medium">
+                                                <Trans>Current facet values</Trans>
+                                            </th>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        {productsData.products.items.map(product => {
+                                            const displayFacetValues = getDisplayFacetValues(product);
+                                            return (
+                                                <tr key={product.id} className="border-t">
+                                                    <td className="p-3 align-top">
+                                                        <div className="font-medium">{product.name}</div>
+                                                    </td>
+                                                    <td className="p-3">
+                                                        <div className="flex flex-wrap gap-2">
+                                                            {displayFacetValues.map(facetValue => (
+                                                                <FacetValueChip
+                                                                    key={facetValue.id}
+                                                                    facetValue={facetValue}
+                                                                    removable={true}
+                                                                    onRemove={() =>
+                                                                        removeFacetValue(
+                                                                            product.id,
+                                                                            facetValue.id,
+                                                                        )
+                                                                    }
+                                                                />
+                                                            ))}
+                                                            {displayFacetValues.length === 0 && (
+                                                                <div className="text-sm text-muted-foreground">
+                                                                    <Trans>No facet values</Trans>
+                                                                </div>
+                                                            )}
+                                                        </div>
+                                                    </td>
+                                                </tr>
+                                            );
+                                        })}
+                                    </tbody>
+                                </table>
+                            </div>
+                        ) : null}
+                    </div>
+
+                    {/* Selected values summary */}
+                    {selectedValues.length > 0 && (
+                        <div className="border-t pt-4">
+                            <div className="text-sm font-medium mb-2">
+                                <Trans>New facet values to add:</Trans>
+                            </div>
+                            <div className="flex flex-wrap gap-2">
+                                {selectedValues.map(facetValue => (
+                                    <FacetValueChip
+                                        key={facetValue.id}
+                                        facetValue={facetValue}
+                                        removable={false}
+                                    />
+                                ))}
+                            </div>
                         </div>
                     )}
                 </div>
+
                 <DialogFooter>
-                    <Button variant="outline" onClick={() => onOpenChange(false)}>
+                    <Button variant="outline" onClick={handleCancel}>
                         <Trans>Cancel</Trans>
                     </Button>
-                    <Button onClick={handleAssign} disabled={selectedFacetValueIds.length === 0 || isPending}>
+                    <Button
+                        onClick={handleAssign}
+                        disabled={(selectedValues.length === 0 && !facetValuesRemoved) || isPending}
+                    >
                         <Trans>Update</Trans>
                     </Button>
                 </DialogFooter>
             </DialogContent>
         </Dialog>
     );
-} 
+}

package/src/app/routes/_authenticated/_products/components/product-bulk-actions.tsx

@@ -61,7 +61,7 @@ export const DeleteProductsBulkAction: BulkActionComponent<any> = ({ selection,
 
 export const AssignProductsToChannelBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
     const { refetchPaginatedList } = usePaginatedList();
-    const { channels, selectedChannel } = useChannel();
+    const { channels } = useChannel();
     const [dialogOpen, setDialogOpen] = useState(false);
 
     if (channels.length < 2) {

package/src/app/routes/_authenticated/_products/products.graphql.ts

@@ -167,6 +167,27 @@ export const updateProductsDocument = graphql(`
     }
 `);
 
+export const getProductsWithFacetValuesByIdsDocument = graphql(`
+    query GetProductsWithFacetValuesByIds($ids: [String!]!) {
+        products(options: { filter: { id: { in: $ids } } }) {
+            items {
+                id
+                name
+                facetValues {
+                    id
+                    name
+                    code
+                    facet {
+                        id
+                        name
+                        code
+                    }
+                }
+            }
+        }
+    }
+`);
+
 export const duplicateEntityDocument = graphql(`
     mutation DuplicateEntity($input: DuplicateEntityInput!) {
         duplicateEntity(input: $input) {

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

@@ -50,8 +50,7 @@ function ProductDetailPage() {
     const navigate = useNavigate();
     const creatingNewEntity = params.id === NEW_ENTITY_PATH;
     const { i18n } = useLingui();
-    const refreshRef = useRef<() => void>(() => {
-    });
+    const refreshRef = useRef<() => void>(() => {});
 
     const { form, submitHandler, entity, isPending, refreshEntity, resetForm } = useDetailPage({
         entityName: 'Product',

package/src/app/styles.css

@@ -90,7 +90,7 @@
     }
 
     .animate-rotate {
-        animation: rotate 0.5s linear;
+        animation: rotate 0.5s linear infinite;
     }
 }
 

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

@@ -4,6 +4,7 @@ import { DataTablePagination } from '@/components/data-table/data-table-paginati
 import { DataTableViewOptions } from '@/components/data-table/data-table-view-options.js';
 import { RefreshButton } from '@/components/data-table/refresh-button.js';
 import { Input } from '@/components/ui/input.js';
+import { Skeleton } from '@/components/ui/skeleton.js';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table.js';
 import { BulkAction } from '@/framework/data-table/data-table-types.js';
 import { useChannel } from '@/hooks/use-channel.js';
@@ -38,6 +39,7 @@ interface DataTableProps<TData> {
     columns: ColumnDef<TData, any>[];
     data: TData[];
     totalItems: number;
+    isLoading?: boolean;
     page?: number;
     itemsPerPage?: number;
     sorting?: SortingState;
@@ -63,6 +65,7 @@ export function DataTable<TData>({
     columns,
     data,
     totalItems,
+    isLoading,
     page,
     itemsPerPage,
     sorting: sortingInitialState,
@@ -149,6 +152,7 @@ export function DataTable<TData>({
         onColumnVisibilityChange?.(table, columnVisibility);
     }, [columnVisibility]);
 
+    const visibleColumnCount = Object.values(columnVisibility).filter(Boolean).length;
     return (
         <>
             <div className="flex justify-between items-start">
@@ -200,7 +204,7 @@ export function DataTable<TData>({
                 </div>
                 <div className="flex items-center justify-start gap-2">
                     {!disableViewOptions && <DataTableViewOptions table={table} />}
-                    {onRefresh && <RefreshButton onRefresh={onRefresh} />}
+                    {onRefresh && <RefreshButton onRefresh={onRefresh} isLoading={isLoading ?? false} />}
                 </div>
             </div>
             <DataTableBulkActions bulkActions={bulkActions ?? []} table={table} />
@@ -225,18 +229,38 @@ export function DataTable<TData>({
                         ))}
                     </TableHeader>
                     <TableBody>
-                        {table.getRowModel().rows?.length ? (
+                        {isLoading && !data?.length ? (
+                            Array.from({ length: pagination.pageSize }).map((_, index) => (
+                                <TableRow
+                                    key={`skeleton-${index}`}
+                                    className="animate-in fade-in duration-100"
+                                >
+                                    {Array.from({ length: visibleColumnCount }).map((_, cellIndex) => (
+                                        <TableCell
+                                            key={`skeleton-cell-${index}-${cellIndex}`}
+                                            className="h-12"
+                                        >
+                                            <Skeleton className="h-4 my-2 w-full" />
+                                        </TableCell>
+                                    ))}
+                                </TableRow>
+                            ))
+                        ) : table.getRowModel().rows?.length ? (
                             table.getRowModel().rows.map(row => (
-                                <TableRow key={row.id} data-state={row.getIsSelected() && 'selected'}>
+                                <TableRow
+                                    key={row.id}
+                                    data-state={row.getIsSelected() && 'selected'}
+                                    className="animate-in fade-in duration-100"
+                                >
                                     {row.getVisibleCells().map(cell => (
-                                        <TableCell key={cell.id}>
+                                        <TableCell key={cell.id} className="h-12">
                                             {flexRender(cell.column.columnDef.cell, cell.getContext())}
                                         </TableCell>
                                     ))}
                                 </TableRow>
                             ))
                         ) : (
-                            <TableRow>
+                            <TableRow className="animate-in fade-in duration-100">
                                 <TableCell colSpan={columns.length} className="h-24 text-center">
                                     No results.
                                 </TableCell>

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

@@ -1,25 +1,37 @@
-import React, { useState } from 'react';
 import { Button } from '@/components/ui/button.js';
 import { RefreshCw } from 'lucide-react';
+import { useEffect, useState } from 'react';
 
-export function RefreshButton({ onRefresh }: { onRefresh: () => void }) {
-    const [isRotating, setIsRotating] = useState(false);
+function useDelayedLoading(isLoading: boolean, delayMs: number = 100) {
+    const [delayedLoading, setDelayedLoading] = useState(isLoading);
 
-    const handleClick = () => {
-        if (!isRotating) {
-            setIsRotating(true);
-            onRefresh();
+    useEffect(() => {
+        if (isLoading) {
+            // When loading starts, wait for the delay before showing loading state
+            const timer = setTimeout(() => {
+                setDelayedLoading(true);
+            }, delayMs);
+
+            return () => clearTimeout(timer);
+        } else {
+            // When loading stops, immediately hide loading state
+            setDelayedLoading(false);
         }
+    }, [isLoading, delayMs]);
+
+    return delayedLoading;
+}
+
+export function RefreshButton({ onRefresh, isLoading }: { onRefresh: () => void; isLoading: boolean }) {
+    const delayedLoading = useDelayedLoading(isLoading, 100);
+
+    const handleClick = () => {
+        onRefresh();
     };
 
     return (
-        <Button
-            variant="ghost"
-            size="sm"
-            onClick={handleClick}
-        >
-            <RefreshCw onAnimationEnd={() => setIsRotating(false)}
-                       className={isRotating ? 'animate-rotate' : ''} />
+        <Button variant="ghost" size="sm" onClick={handleClick} disabled={delayedLoading}>
+            <RefreshCw className={delayedLoading ? 'animate-rotate' : ''} />
         </Button>
     );
 }

package/src/lib/components/shared/custom-fields-form.tsx

@@ -40,10 +40,9 @@ export function CustomFieldsForm({ entityType, control, formPathPrefix }: Custom
 
     const customFields = useCustomFieldConfig(entityType);
 
-    const getFieldName = (fieldDefName: string) => {
-        return formPathPrefix
-            ? `${formPathPrefix}.customFields.${fieldDefName}`
-            : `customFields.${fieldDefName}`;
+    const getFieldName = (fieldDef: CustomFieldConfig) => {
+        const name = fieldDef.type === 'relation' ? fieldDef.name + 'Id' : fieldDef.name;
+        return formPathPrefix ? `${formPathPrefix}.customFields.${name}` : `customFields.${name}`;
     };
 
     // Group custom fields by tabs
@@ -86,7 +85,7 @@ export function CustomFieldsForm({ entityType, control, formPathPrefix }: Custom
                         key={fieldDef.name}
                         fieldDef={fieldDef}
                         control={control}
-                        fieldName={getFieldName(fieldDef.name)}
+                        fieldName={getFieldName(fieldDef)}
                         getTranslation={getTranslation}
                     />
                 ))}
@@ -112,7 +111,7 @@ export function CustomFieldsForm({ entityType, control, formPathPrefix }: Custom
                                 key={fieldDef.name}
                                 fieldDef={fieldDef}
                                 control={control}
-                                fieldName={getFieldName(fieldDef.name)}
+                                fieldName={getFieldName(fieldDef)}
                                 getTranslation={getTranslation}
                             />
                         ))}

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

@@ -7,7 +7,7 @@ import {
 } from '@/framework/document-introspection/get-document-structure.js';
 import { useListQueryFields } from '@/framework/document-introspection/hooks.js';
 import { api } from '@/graphql/api.js';
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { keepPreviousData, useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { useDebounce } from '@uidotdev/usehooks';
 
 import {
@@ -315,7 +315,7 @@ export function PaginatedListDataTable<
 
     registerRefresher?.(refetchPaginatedList);
 
-    const { data } = useQuery({
+    const { data, isFetching } = useQuery({
         queryFn: () => {
             const searchFilter = onSearchTermChange ? onSearchTermChange(debouncedSearchTerm) : {};
             const mergedFilter = { ...filter, ...searchFilter };
@@ -332,6 +332,7 @@ export function PaginatedListDataTable<
             return api.query(listQuery, transformedVariables);
         },
         queryKey,
+        placeholderData: keepPreviousData,
     });
 
     const fields = useListQueryFields(listQuery);
@@ -484,6 +485,7 @@ export function PaginatedListDataTable<
             <DataTable
                 columns={columns}
                 data={transformedData}
+                isLoading={isFetching}
                 page={page}
                 itemsPerPage={itemsPerPage}
                 sorting={sorting}

package/src/lib/components/shared/vendure-image.tsx

@@ -43,7 +43,11 @@ export function VendureImage({
     ...imgProps
 }: VendureImageProps) {
     if (!asset) {
-        return fallback ? <>{fallback}</> : <PlaceholderImage preset={preset} width={width} height={height} className={className} />;
+        return fallback ? (
+            <>{fallback}</>
+        ) : (
+            <PlaceholderImage preset={preset} width={width} height={height} className={className} />
+        );
     }
 
     // Build the URL with query parameters
@@ -75,11 +79,15 @@ export function VendureImage({
         url.searchParams.set('fpy', asset.focalPoint.y.toString());
     }
 
+    const minDimensions = getMinDimensions(preset, width, height);
+
     return (
         <img
             src={url.toString()}
             alt={alt || asset.name || ''}
             className={cn(className, 'rounded-sm')}
+            width={minDimensions.width}
+            height={minDimensions.height}
             style={style}
             loading="lazy"
             ref={ref}
@@ -88,6 +96,27 @@ export function VendureImage({
     );
 }
 
+function getMinDimensions(preset?: ImagePreset, width?: number, height?: number) {
+    if (preset) {
+        switch (preset) {
+            case 'tiny':
+                return { width: 50, height: 50 };
+            case 'thumb':
+                return { width: 150, height: 150 };
+            case 'small':
+                return { width: 300, height: 300 };
+            case 'medium':
+                return { width: 500, height: 500 };
+        }
+    }
+
+    if (width && height) {
+        return { width, height };
+    }
+
+    return { width: 100, height: 100 };
+}
+
 export function PlaceholderImage({
     width = 100,
     height = 100,

package/src/lib/framework/form-engine/use-generated-form.tsx

@@ -1,5 +1,9 @@
 import { getOperationVariablesFields } from '@/framework/document-introspection/get-document-structure.js';
-import { createFormSchemaFromFields, getDefaultValuesFromFields } from '@/framework/form-engine/form-schema-tools.js';
+import {
+    createFormSchemaFromFields,
+    getDefaultValuesFromFields,
+} from '@/framework/form-engine/form-schema-tools.js';
+import { transformRelationFields } from '@/framework/form-engine/utils.js';
 import { useChannel } from '@/hooks/use-channel.js';
 import { useServerConfig } from '@/hooks/use-server-config.js';
 import type { TypedDocumentNode } from '@graphql-typed-document-node/core';
@@ -54,7 +58,9 @@ export function useGeneratedForm<
         },
         mode: 'onChange',
         defaultValues,
-        values: processedEntity ? setValues(processedEntity) : defaultValues,
+        values: processedEntity
+            ? transformRelationFields(updateFields, setValues(processedEntity))
+            : defaultValues,
     });
     let submitHandler = (event: FormEvent) => {
         event.preventDefault();

package/src/lib/framework/form-engine/utils.ts

@@ -0,0 +1,30 @@
+import { FieldInfo } from '../document-introspection/get-document-structure.js';
+
+export function transformRelationFields<E extends Record<string, any>>(fields: FieldInfo[], entity: E) {
+    const processedEntity = { ...entity } as any;
+
+    for (const field of fields) {
+        if (field.name !== 'customFields' || !field.typeInfo) {
+            continue;
+        }
+
+        if (!entity.customFields || !processedEntity.customFields) {
+            continue;
+        }
+
+        for (const customField of field.typeInfo) {
+            if (customField.type === 'ID') {
+                const relationField = customField.name;
+                const propertyAccessorKey = customField.name.replace(/Id$/, '');
+                const relationValue = entity.customFields[propertyAccessorKey];
+                const relationIdValue = relationValue?.id;
+
+                if (relationIdValue) {
+                    processedEntity.customFields[relationField] = relationIdValue;
+                }
+            }
+        }
+    }
+
+    return processedEntity;
+}