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

package/src/lib/components/shared/navigation-confirmation.tsx

@@ -1,16 +1,9 @@
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@/lib/trans.js';
 import { useBlocker } from '@tanstack/react-router';
 import { UseFormReturn } from 'react-hook-form';
 
 import { Button } from '../ui/button.js';
-import {
-    Dialog,
-    DialogContent,
-    DialogDescription,
-    DialogFooter,
-    DialogHeader,
-    DialogTitle,
-} from '../ui/dialog.js';
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '../ui/dialog.js';
 
 export interface NavigationConfirmationProps {
     form: UseFormReturn<any>;
@@ -21,13 +14,11 @@ export interface NavigationConfirmationProps {
  */
 export function NavigationConfirmation(props: Readonly<NavigationConfirmationProps>) {
     const { proceed, reset, status } = useBlocker({
-        shouldBlockFn: args => {
+        shouldBlockFn: (args) => {
             // When a new entity is being created, we don't want to block navigation
             // to the newly-created entity page.
-            const isNavigatingToNewlyCreatedEntity =
-                args.current.fullPath === args.next.fullPath &&
-                args.current.params.id === 'new' &&
-                args.next.params.id !== 'new';
+            const isNavigatingToNewlyCreatedEntity = args.current.fullPath === args.next.fullPath
+                && args.current.params.id === 'new' && args.next.params.id !== 'new'
             if (isNavigatingToNewlyCreatedEntity) {
                 return false;
             }
@@ -40,20 +31,14 @@ export function NavigationConfirmation(props: Readonly<NavigationConfirmationPro
         <Dialog open={status === 'blocked'} onOpenChange={reset}>
             <DialogContent className="sm:max-w-[425px]">
                 <DialogHeader>
-                    <DialogTitle>
-                        <Trans>Confirm navigation</Trans>
-                    </DialogTitle>
+                    <DialogTitle><Trans>Confirm navigation</Trans></DialogTitle>
                     <DialogDescription>
-                        <Trans>
-                            Are you sure you want to navigate away from this page? Any unsaved changes will be
-                            lost.
-                        </Trans>
+                        <Trans>Are you sure you want to navigate away from this page? Any unsaved changes will be
+                            lost.</Trans>
                     </DialogDescription>
                 </DialogHeader>
                 <DialogFooter>
-                    <Button variant="outline" onClick={reset}>
-                        <Trans>Cancel</Trans>
-                    </Button>
+                    <Button variant="outline" onClick={reset}><Trans>Cancel</Trans></Button>
                     <Button type="button" onClick={proceed}>
                         <Trans>Confirm</Trans>
                     </Button>

package/src/lib/components/shared/option-value-input.tsx

@@ -1,9 +1,10 @@
-import { Badge } from '@/vdb/components/ui/badge.js';
-import { Button } from '@/vdb/components/ui/button.js';
-import { Input } from '@/vdb/components/ui/input.js';
-import { Plus, X } from 'lucide-react';
-import { useState } from 'react';
-import { useFieldArray, useFormContext } from 'react-hook-form';
+import { useFieldArray } from "react-hook-form";
+import { useFormContext } from "react-hook-form";
+import { useState } from "react";
+import { Input } from "@/components/ui/input.js";
+import { Button } from "@/components/ui/button.js";
+import { Badge } from "@/components/ui/badge.js";
+import { Plus, X } from "lucide-react";
 
 interface OptionValue {
     value: string;
@@ -15,15 +16,12 @@ interface FormValues {
         name: string;
         values: OptionValue[];
     }[];
-    variants: Record<
-        string,
-        {
-            enabled: boolean;
-            sku: string;
-            price: string;
-            stock: string;
-        }
-    >;
+    variants: Record<string, {
+        enabled: boolean;
+        sku: string;
+        price: string;
+        stock: string;
+    }>;
 }
 
 interface OptionValueInputProps {
@@ -31,7 +29,7 @@ interface OptionValueInputProps {
     disabled?: boolean;
 }
 
-export function OptionValueInput({ groupIndex, disabled = false }: Readonly<OptionValueInputProps>) {
+export function OptionValueInput({ groupIndex, disabled = false }: OptionValueInputProps) {
     const { control, watch } = useFormContext<FormValues>();
     const { fields, append, remove } = useFieldArray({
         control,
@@ -94,4 +92,4 @@ export function OptionValueInput({ groupIndex, disabled = false }: Readonly<Opti
             </div>
         </div>
     );
-}
+}

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

@@ -1,38 +1,26 @@
-import { DataTableColumnHeader } from '@/vdb/components/data-table/data-table-column-header.js';
-import { DataTable, FacetedFilter } from '@/vdb/components/data-table/data-table.js';
+import { DataTableColumnHeader } from '@/components/data-table/data-table-column-header.js';
+import { DataTable, FacetedFilter } from '@/components/data-table/data-table.js';
 import {
     FieldInfo,
     getObjectPathToPaginatedList,
     getTypeFieldInfo,
-} from '@/vdb/framework/document-introspection/get-document-structure.js';
-import { useListQueryFields } from '@/vdb/framework/document-introspection/hooks.js';
-import { api } from '@/vdb/graphql/api.js';
-import { keepPreviousData, useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+} from '@/framework/document-introspection/get-document-structure.js';
+import { useListQueryFields } from '@/framework/document-introspection/hooks.js';
+import { api } from '@/graphql/api.js';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { useDebounce } from '@uidotdev/usehooks';
 
-import {
-    AlertDialog,
-    AlertDialogAction,
-    AlertDialogCancel,
-    AlertDialogContent,
-    AlertDialogDescription,
-    AlertDialogFooter,
-    AlertDialogHeader,
-    AlertDialogTitle,
-    AlertDialogTrigger,
-} from '@/vdb/components/ui/alert-dialog.js';
 import {
     DropdownMenu,
     DropdownMenuContent,
     DropdownMenuItem,
     DropdownMenuTrigger,
-} from '@/vdb/components/ui/dropdown-menu.js';
-import { DisplayComponent } from '@/vdb/framework/component-registry/dynamic-component.js';
-import { BulkAction } from '@/vdb/framework/extension-api/types/index.js';
-import { ResultOf } from '@/vdb/graphql/graphql.js';
-import { useExtendedListQuery } from '@/vdb/hooks/use-extended-list-query.js';
-import { Trans, useLingui } from '@/vdb/lib/trans.js';
+} from '@/components/ui/dropdown-menu.js';
+import { DisplayComponent } from '@/framework/component-registry/dynamic-component.js';
+import { ResultOf } from '@/graphql/graphql.js';
+import { Trans, useLingui } from '@/lib/trans.js';
 import { TypedDocumentNode } from '@graphql-typed-document-node/core';
+import { useQuery } from '@tanstack/react-query';
 import {
     ColumnFiltersState,
     ColumnSort,
@@ -45,7 +33,6 @@ import { EllipsisIcon, TrashIcon } from 'lucide-react';
 import React, { useMemo } from 'react';
 import { toast } from 'sonner';
 import { Button } from '../ui/button.js';
-import { Checkbox } from '../ui/checkbox.js';
 
 // Type that identifies a paginated list structure (has items array and totalItems)
 type IsPaginatedList<T> = T extends { items: any[]; totalItems: number } ? true : false;
@@ -229,7 +216,6 @@ export interface PaginatedListDataTableProps<
     onColumnVisibilityChange?: (table: Table<any>, columnVisibility: VisibilityState) => void;
     facetedFilters?: FacetedFilterConfig<T>;
     rowActions?: RowAction<PaginatedListItemFields<T>>[];
-    bulkActions?: BulkAction[];
     disableViewOptions?: boolean;
     transformData?: (data: PaginatedListItemFields<T>[]) => PaginatedListItemFields<T>[];
     setTableOptions?: (table: TableOptions<any>) => TableOptions<any>;
@@ -268,16 +254,14 @@ export function PaginatedListDataTable<
     onColumnVisibilityChange,
     facetedFilters,
     rowActions,
-    bulkActions,
     disableViewOptions,
     setTableOptions,
     transformData,
     registerRefresher,
-}: Readonly<PaginatedListDataTableProps<T, U, V, AC>>) {
+}: PaginatedListDataTableProps<T, U, V, AC>) {
     const [searchTerm, setSearchTerm] = React.useState<string>('');
     const debouncedSearchTerm = useDebounce(searchTerm, 500);
     const queryClient = useQueryClient();
-    const extendedListQuery = useExtendedListQuery(listQuery);
 
     const sort = sorting?.reduce((acc: any, sort: ColumnSort) => {
         const direction = sort.desc ? 'DESC' : 'ASC';
@@ -302,7 +286,7 @@ export function PaginatedListDataTable<
 
     const defaultQueryKey = [
         PaginatedListDataTableKey,
-        extendedListQuery,
+        listQuery,
         page,
         itemsPerPage,
         sorting,
@@ -314,10 +298,9 @@ export function PaginatedListDataTable<
     function refetchPaginatedList() {
         queryClient.invalidateQueries({ queryKey });
     }
-
     registerRefresher?.(refetchPaginatedList);
 
-    const { data, isFetching } = useQuery({
+    const { data } = useQuery({
         queryFn: () => {
             const searchFilter = onSearchTermChange ? onSearchTermChange(debouncedSearchTerm) : {};
             const mergedFilter = { ...filter, ...searchFilter };
@@ -331,14 +314,13 @@ export function PaginatedListDataTable<
             } as V;
 
             const transformedVariables = transformVariables ? transformVariables(variables) : variables;
-            return api.query(extendedListQuery, transformedVariables);
+            return api.query(listQuery, transformedVariables);
         },
         queryKey,
-        placeholderData: keepPreviousData,
     });
 
-    const fields = useListQueryFields(extendedListQuery);
-    const paginatedListObjectPath = getObjectPathToPaginatedList(extendedListQuery);
+    const fields = useListQueryFields(listQuery);
+    const paginatedListObjectPath = getObjectPathToPaginatedList(listQuery);
 
     let listData = data as any;
     for (const path of paginatedListObjectPath) {
@@ -434,10 +416,7 @@ export function PaginatedListDataTable<
             // existing order
             const orderedColumns = finalColumns
                 .filter(column => column.id && defaultColumnOrder.includes(column.id as any))
-                .sort(
-                    (a, b) =>
-                        defaultColumnOrder.indexOf(a.id as any) - defaultColumnOrder.indexOf(b.id as any),
-                );
+                .sort((a, b) => defaultColumnOrder.indexOf(a.id as any) - defaultColumnOrder.indexOf(b.id as any));
             const remainingColumns = finalColumns.filter(
                 column => !column.id || !defaultColumnOrder.includes(column.id as any),
             );
@@ -451,31 +430,6 @@ export function PaginatedListDataTable<
             }
         }
 
-        // Add the row selection column
-        finalColumns.unshift({
-            id: 'selection',
-            accessorKey: 'selection',
-            header: ({ table }) => (
-                <Checkbox
-                    className="mx-1"
-                    checked={table.getIsAllRowsSelected()}
-                    onCheckedChange={checked =>
-                        table.toggleAllRowsSelected(checked === 'indeterminate' ? undefined : checked)
-                    }
-                />
-            ),
-            enableColumnFilter: false,
-            cell: ({ row }) => {
-                return (
-                    <Checkbox
-                        className="mx-1"
-                        checked={row.getIsSelected()}
-                        onCheckedChange={row.getToggleSelectedHandler()}
-                    />
-                );
-            },
-        });
-
         return { columns: finalColumns, customFieldColumnNames };
     }, [fields, customizeColumns, rowActions]);
 
@@ -487,7 +441,6 @@ export function PaginatedListDataTable<
             <DataTable
                 columns={columns}
                 data={transformedData}
-                isLoading={isFetching}
                 page={page}
                 itemsPerPage={itemsPerPage}
                 sorting={sorting}
@@ -501,7 +454,6 @@ export function PaginatedListDataTable<
                 defaultColumnVisibility={columnVisibility}
                 facetedFilters={facetedFilters}
                 disableViewOptions={disableViewOptions}
-                bulkActions={bulkActions}
                 setTableOptions={setTableOptions}
                 onRefresh={refetchPaginatedList}
             />
@@ -571,42 +523,14 @@ function DeleteMutationRowAction({
         },
     });
     return (
-        <AlertDialog>
-            <AlertDialogTrigger asChild>
-                <DropdownMenuItem onSelect={e => e.preventDefault()}>
-                    <div className="flex items-center gap-2 text-destructive">
-                        <TrashIcon className="w-4 h-4 text-destructive" />
-                        <Trans>Delete</Trans>
-                    </div>
-                </DropdownMenuItem>
-            </AlertDialogTrigger>
-            <AlertDialogContent>
-                <AlertDialogHeader>
-                    <AlertDialogTitle>
-                        <Trans>Confirm deletion</Trans>
-                    </AlertDialogTitle>
-                    <AlertDialogDescription>
-                        <Trans>
-                            Are you sure you want to delete this item? This action cannot be undone.
-                        </Trans>
-                    </AlertDialogDescription>
-                </AlertDialogHeader>
-                <AlertDialogFooter>
-                    <AlertDialogCancel>
-                        <Trans>Cancel</Trans>
-                    </AlertDialogCancel>
-                    <AlertDialogAction
-                        onClick={() => deleteMutationFn({ id: row.original.id })}
-                        className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
-                    >
-                        <Trans>Delete</Trans>
-                    </AlertDialogAction>
-                </AlertDialogFooter>
-            </AlertDialogContent>
-        </AlertDialog>
+        <DropdownMenuItem onClick={() => deleteMutationFn({ id: row.original.id })}>
+            <div className="flex items-center gap-2 text-destructive">
+                <TrashIcon className="w-4 h-4 text-destructive" />
+                <Trans>Delete</Trans>
+            </div>
+        </DropdownMenuItem>
     );
 }
-
 /**
  * Returns the default column visibility configuration.
  */

package/src/lib/components/shared/permission-guard.tsx

@@ -1,5 +1,5 @@
-import { usePermissions } from '@/vdb/hooks/use-permissions.js';
-import { Permission } from '@vendure/common/lib/generated-types';
+import { usePermissions } from "@/hooks/use-permissions.js";
+import { Permission } from "@vendure/common/lib/generated-types";
 
 export interface PermissionGuardProps {
     requires: Permission | string | string[] | Permission[];
@@ -11,11 +11,11 @@ export interface PermissionGuardProps {
  * This component is used to protect a route from unauthorized access.
  * It will render the children if the user has the required permissions.
  */
-export function PermissionGuard({ requires, children }: Readonly<PermissionGuardProps>) {
+export function PermissionGuard({ requires, children }: PermissionGuardProps ) {
     const { hasPermissions } = usePermissions();
     const permissions = Array.isArray(requires) ? requires : [requires];
     if (!hasPermissions(permissions)) {
         return null;
     }
     return children;
-}
+}

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

@@ -1,46 +1,41 @@
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command.js';
 import {
-    Command,
-    CommandEmpty,
-    CommandGroup,
-    CommandInput,
-    CommandItem,
-    CommandList,
-} from '@/vdb/components/ui/command.js';
-import { Popover, PopoverContent, PopoverTrigger } from '@/vdb/components/ui/popover.js';
-import { api } from '@/vdb/graphql/api.js';
-import { assetFragment } from '@/vdb/graphql/fragments.js';
-import { graphql } from '@/vdb/graphql/graphql.js';
+    Popover,
+    PopoverContent,
+    PopoverTrigger,
+} from "@/components/ui/popover.js";
+import { api } from '@/graphql/api.js';
+import { graphql } from '@/graphql/graphql.js';
+import { cn } from '@/lib/utils.js';
 import { useQuery } from '@tanstack/react-query';
 import { useDebounce } from '@uidotdev/usehooks';
-import { Plus } from 'lucide-react';
+import { ChevronsUpDown, Plus } from 'lucide-react';
 import { useState } from 'react';
 import { Button } from '../ui/button.js';
+import { assetFragment } from '@/graphql/fragments.js';
 import { VendureImage } from './vendure-image.js';
 
-const productVariantListDocument = graphql(
-    `
-        query ProductVariantList($options: ProductVariantListOptions) {
-            productVariants(options: $options) {
-                items {
-                    id
-                    name
-                    sku
-                    featuredAsset {
-                        ...Asset
-                    }
+const productVariantListDocument = graphql(`
+    query ProductVariantList($options: ProductVariantListOptions) {
+        productVariants(options: $options) {
+            items {
+                id
+                name
+                sku
+                featuredAsset {
+                    ...Asset
                 }
-                totalItems
             }
+            totalItems
         }
-    `,
-    [assetFragment],
-);
+    }
+`, [assetFragment]);
 
 export interface ProductVariantSelectorProps {
     onProductVariantIdChange: (productVariantId: string) => void;
 }
 
-export function ProductVariantSelector({ onProductVariantIdChange }: Readonly<ProductVariantSelectorProps>) {
+export function ProductVariantSelector({ onProductVariantIdChange }: ProductVariantSelectorProps) {
     const [search, setSearch] = useState('');
     const [open, setOpen] = useState(false);
     const debouncedSearch = useDebounce(search, 500);
@@ -65,7 +60,11 @@ export function ProductVariantSelector({ onProductVariantIdChange }: Readonly<Pr
     return (
         <Popover open={open} onOpenChange={setOpen}>
             <PopoverTrigger asChild>
-                <Button variant="outline" role="combobox" className="w-full">
+                <Button
+                    variant="outline"
+                    role="combobox"
+                    className="w-full"
+                >
                     Add item to order
                     <Plus className="opacity-50" />
                 </Button>
@@ -75,12 +74,12 @@ export function ProductVariantSelector({ onProductVariantIdChange }: Readonly<Pr
                     <CommandInput
                         placeholder="Add item to order..."
                         className="h-9"
-                        onValueChange={value => setSearch(value)}
+                       onValueChange={(value) => setSearch(value)}
                     />
                     <CommandList>
                         <CommandEmpty>No products found.</CommandEmpty>
                         <CommandGroup>
-                            {data?.productVariants.items.map(variant => (
+                            {data?.productVariants.items.map((variant) => (
                                 <CommandItem
                                     key={variant.id}
                                     value={variant.id}
@@ -109,4 +108,4 @@ export function ProductVariantSelector({ onProductVariantIdChange }: Readonly<Pr
             </PopoverContent>
         </Popover>
     );
-}
+}

package/src/lib/components/shared/role-code-label.tsx

@@ -1,12 +1,8 @@
-import { CUSTOMER_ROLE_CODE, SUPER_ADMIN_ROLE_CODE } from '@/vdb/constants.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { CUSTOMER_ROLE_CODE, SUPER_ADMIN_ROLE_CODE } from '@/constants.js';
+import { Trans } from '@/lib/trans.js';
 
-export function RoleCodeLabel({ code }: Readonly<{ code: string }> | Readonly<{ code: undefined }>) {
-    return code === SUPER_ADMIN_ROLE_CODE ? (
-        <Trans>Super Admin</Trans>
-    ) : code === CUSTOMER_ROLE_CODE ? (
-        <Trans>Customer</Trans>
-    ) : (
-        code
-    );
+export function RoleCodeLabel({ code }: { code: string } | { code: undefined }) {
+    return code === SUPER_ADMIN_ROLE_CODE ? <Trans>Super Admin</Trans> : 
+    code === CUSTOMER_ROLE_CODE ? <Trans>Customer</Trans> : code;
 }
+

package/src/lib/components/shared/role-selector.tsx

@@ -1,8 +1,8 @@
-import { api } from '@/vdb/graphql/api.js';
-import { graphql } from '@/vdb/graphql/graphql.js';
-import { useLingui } from '@/vdb/lib/trans.js';
+import { api } from '@/graphql/api.js';
+import { graphql } from '@/graphql/graphql.js';
 import { useQuery } from '@tanstack/react-query';
 import { MultiSelect } from './multi-select.js';
+import { useLingui } from '@/lib/trans.js';
 
 const rolesDocument = graphql(`
     query Roles($options: RoleListOptions) {
@@ -40,7 +40,7 @@ export function RoleSelector<T extends boolean>(props: RoleSelectorProps<T>) {
     const items = (data ?? []).map(role => ({
         value: role.id,
         label: role.code,
-        display: role.description ? role.description : role.code,
+        display: role.description ? role.description : role.code
     }));
 
     return (

package/src/lib/components/shared/seller-selector.tsx

@@ -1,17 +1,11 @@
-import { Button } from '@/vdb/components/ui/button.js';
-import {
-    Command,
-    CommandEmpty,
-    CommandInput,
-    CommandItem,
-    CommandList,
-} from '@/vdb/components/ui/command.js';
-import { Popover, PopoverContent, PopoverTrigger } from '@/vdb/components/ui/popover.js';
-import { api } from '@/vdb/graphql/api.js';
-import { graphql } from '@/vdb/graphql/graphql.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Button } from '@/components/ui/button.js';
+import { Command, CommandEmpty, CommandInput, CommandItem, CommandList } from '@/components/ui/command.js';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover.js';
+import { api } from '@/graphql/api.js';
+import { graphql } from '@/graphql/graphql.js';
+import { Trans } from '@/lib/trans.js';
 import { useQuery } from '@tanstack/react-query';
-import { Plus } from 'lucide-react';
+import { Plus, Search } from 'lucide-react';
 import { useState } from 'react';
 
 const sellerListDocument = graphql(`
@@ -48,11 +42,9 @@ export function SellerSelector(props: SellerSelectorProps) {
             api.query(sellerListDocument, {
                 options: {
                     sort: { name: 'ASC' },
-                    filter: searchTerm
-                        ? {
-                              name: { contains: searchTerm },
-                          }
-                        : undefined,
+                    filter: searchTerm ? {
+                        name: { contains: searchTerm },
+                    } : undefined,  
                 },
             }),
         staleTime: 1000 * 60, // 1 minute
@@ -81,15 +73,19 @@ export function SellerSelector(props: SellerSelectorProps) {
             <PopoverContent className="p-0 w-[350px]" align="start">
                 <Command shouldFilter={false}>
                     <div className="flex items-center border-b px-3">
-                        <CommandInput
-                            placeholder="Search sellers..."
+                        <CommandInput 
+                            placeholder="Search sellers..." 
                             onValueChange={handleSearch}
                             className="h-10 flex-1 bg-transparent outline-none placeholder:text-muted-foreground"
                         />
                     </div>
                     <CommandList>
                         <CommandEmpty>
-                            {isLoading ? <Trans>Loading...</Trans> : <Trans>No sellers found</Trans>}
+                            {isLoading ? (
+                                <Trans>Loading...</Trans>
+                            ) : (
+                                <Trans>No sellers found</Trans>
+                            )}
                         </CommandEmpty>
                         {data?.sellers.items.map(seller => (
                             <CommandItem

package/src/lib/components/shared/stock-level-label.tsx

@@ -5,20 +5,20 @@ export type StockLevel = {
     stockAllocated: number;
 };
 
-export function StockLevelLabel({ stockLevels }: Readonly<{ stockLevels: StockLevel[] }>) {
+export function StockLevelLabel({ stockLevels }: { stockLevels: StockLevel[] }) {
     const { i18n } = useLingui();
-
+    
     if (!Array.isArray(stockLevels)) {
         return null;
     }
     const totalOnHand = stockLevels.reduce((acc, curr) => acc + curr.stockOnHand, 0);
     const totalAllocated = stockLevels.reduce((acc, curr) => acc + curr.stockAllocated, 0);
-
+    
     return (
-        <span
+        <span 
             title={`${i18n.t('Stock on hand')}: ${totalOnHand}, ${i18n.t('Stock allocated')}: ${totalAllocated}`}
         >
             {totalOnHand} <span className="text-muted-foreground">/ {totalAllocated}</span>
         </span>
     );
-}
+}

package/src/lib/components/shared/tax-category-selector.tsx

@@ -5,10 +5,10 @@ import {
     SelectItem,
     SelectTrigger,
     SelectValue,
-} from '@/vdb/components/ui/select.js';
-import { api } from '@/vdb/graphql/api.js';
-import { graphql } from '@/vdb/graphql/graphql.js';
-import { Trans } from '@/vdb/lib/trans.js';
+} from '@/components/ui/select.js';
+import { api } from '@/graphql/api.js';
+import { graphql } from '@/graphql/graphql.js';
+import { Trans } from '@/lib/trans.js';
 import { useQuery } from '@tanstack/react-query';
 import { Skeleton } from '../ui/skeleton.js';
 
@@ -29,7 +29,7 @@ export interface TaxCategorySelectorProps {
     onChange: (value: string) => void;
 }
 
-export function TaxCategorySelector({ value, onChange }: Readonly<TaxCategorySelectorProps>) {
+export function TaxCategorySelector({ value, onChange }: TaxCategorySelectorProps) {
     const { data, isLoading, isPending, status } = useQuery({
         queryKey: ['taxCategories'],
         staleTime: 1000 * 60 * 5,

package/src/lib/components/shared/translatable-form-field.tsx

@@ -1,7 +1,13 @@
-import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
-import { Controller, ControllerProps, FieldPath, FieldValues } from 'react-hook-form';
-import { FormControl, FormDescription, FormItem, FormLabel, FormMessage } from '../ui/form.js';
+import { Controller } from 'react-hook-form';
+import { FieldPath } from 'react-hook-form';
+import { useUserSettings } from '@/hooks/use-user-settings.js';
+import { ControllerProps } from 'react-hook-form';
+import { FieldValues } from 'react-hook-form';
 import { FormFieldWrapper } from './form-field-wrapper.js';
+import { FormMessage } from '../ui/form.js';
+import { FormControl } from '../ui/form.js';
+import { FormItem } from '../ui/form.js';
+import { FormDescription, FormField, FormLabel } from '../ui/form.js';
 
 export type TranslatableEntity = FieldValues & {
     translations?: Array<{ languageCode: string }> | null;
@@ -49,7 +55,6 @@ export const TranslatableFormFieldWrapper = <
     label,
     description,
     render,
-    renderFormControl,
     ...props
 }: TranslatableFormFieldWrapperProps<TFieldValues>) => {
     return (
@@ -59,7 +64,7 @@ export const TranslatableFormFieldWrapper = <
             render={renderArgs => (
                 <FormItem>
                     {label && <FormLabel>{label}</FormLabel>}
-                    {renderFormControl ? <FormControl>{render(renderArgs)}</FormControl> : render(renderArgs)}
+                    <FormControl>{render(renderArgs)}</FormControl>
                     {description && <FormDescription>{description}</FormDescription>}
                     <FormMessage />
                 </FormItem>