@vendure/dashboard 3.5.0-minor-202509261210 → 3.5.0-minor-202510031341

package/src/lib/components/layout/nav-user.tsx

@@ -2,7 +2,6 @@ import { useAuth } from '@/vdb/hooks/use-auth.js';
 import { Link, useNavigate, useRouter } from '@tanstack/react-router';
 import { ChevronsUpDown, LogOut, Monitor, Moon, Sparkles, Sun } from 'lucide-react';
 
-// import { Avatar, AvatarFallback, AvatarImage } from '@/vdb/components/ui/avatar.js';
 import {
     DropdownMenu,
     DropdownMenuContent,
@@ -19,9 +18,10 @@ import {
     DropdownMenuTrigger,
 } from '@/vdb/components/ui/dropdown-menu.js';
 import { SidebarMenu, SidebarMenuButton, SidebarMenuItem, useSidebar } from '@/vdb/components/ui/sidebar.js';
+import { useDisplayLocale } from '@/vdb/hooks/use-display-locale.js';
 import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
-import { Trans } from '@/vdb/lib/trans.js';
 import { Theme } from '@/vdb/providers/theme-provider.js';
+import { Trans } from '@lingui/react/macro';
 import { useMemo } from 'react';
 import { Dialog, DialogTrigger } from '../ui/dialog.js';
 import { LanguageDialog } from './language-dialog.js';
@@ -30,6 +30,7 @@ export function NavUser() {
     const { isMobile } = useSidebar();
     const router = useRouter();
     const navigate = useNavigate();
+    const { humanReadableLanguage } = useDisplayLocale();
     const { user, ...auth } = useAuth();
     const { settings, setTheme, setDevMode } = useUserSettings();
 
@@ -61,12 +62,6 @@ export function NavUser() {
                                 size="lg"
                                 className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
                             >
-                                {/* Avatar component temporarily disabled due to https://github.com/radix-ui/primitives/issues/3489
-                                    error in published package version */}
-                                {/*<Avatar className="h-8 w-8 rounded-lg">*/}
-                                {/*    <AvatarImage src={user.id} alt={user.firstName} />*/}
-                                {/*    <AvatarFallback className="rounded-lg">{avatarFallback}</AvatarFallback>*/}
-                                {/*</Avatar>*/}
                                 <div className="relative flex rounded-lg border justify-center items-center w-8 h-8">
                                     {avatarFallback}
                                 </div>
@@ -87,12 +82,6 @@ export function NavUser() {
                         >
                             <DropdownMenuLabel className="p-0 font-normal">
                                 <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
-                                    {/*<Avatar className="h-8 w-8 rounded-lg">*/}
-                                    {/*    <AvatarImage src={user.id} alt={user.firstName} />*/}
-                                    {/*    <AvatarFallback className="rounded-lg">*/}
-                                    {/*        {avatarFallback}*/}
-                                    {/*    </AvatarFallback>*/}
-                                    {/*</Avatar>*/}
                                     <div className="grid flex-1 text-left text-sm leading-tight">
                                         <span className="truncate font-semibold">
                                             {user.firstName} {user.lastName}
@@ -106,20 +95,27 @@ export function NavUser() {
                                 <DropdownMenuItem asChild>
                                     <a href="https://vendure.io/pricing" target="_blank">
                                         <Sparkles />
-                                        Explore Enterprise Edition
+                                        <Trans>Explore Enterprise Edition</Trans>
                                     </a>
                                 </DropdownMenuItem>
                             </DropdownMenuGroup>
                             <DropdownMenuSeparator />
                             <DropdownMenuGroup>
                                 <DropdownMenuItem asChild>
-                                    <Link to="/profile">Profile</Link>
+                                    <Link to="/profile">
+                                        <Trans>Profile</Trans>
+                                    </Link>
                                 </DropdownMenuItem>
                                 <DialogTrigger asChild>
-                                    <DropdownMenuItem>Language</DropdownMenuItem>
+                                    <DropdownMenuItem className="flex gap-2">
+                                        <div>
+                                            <Trans>Language</Trans>
+                                        </div>
+                                        <div className="text-muted-foreground">{humanReadableLanguage}</div>
+                                    </DropdownMenuItem>
                                 </DialogTrigger>
                                 <DropdownMenuSub>
-                                    <DropdownMenuSubTrigger>Theme</DropdownMenuSubTrigger>
+                                    <DropdownMenuSubTrigger><Trans>Theme</Trans></DropdownMenuSubTrigger>
                                     <DropdownMenuPortal>
                                         <DropdownMenuSubContent>
                                             <DropdownMenuRadioGroup
@@ -128,15 +124,15 @@ export function NavUser() {
                                             >
                                                 <DropdownMenuRadioItem value="light">
                                                     <Sun />
-                                                    Light
+                                                    <Trans context='theme'>Light</Trans>
                                                 </DropdownMenuRadioItem>
                                                 <DropdownMenuRadioItem value="dark">
                                                     <Moon />
-                                                    Dark
+                                                    <Trans context='theme'>Dark</Trans>
                                                 </DropdownMenuRadioItem>
                                                 <DropdownMenuRadioItem value="system">
                                                     <Monitor />
-                                                    System
+                                                    <Trans context='theme'>System</Trans>
                                                 </DropdownMenuRadioItem>
                                             </DropdownMenuRadioGroup>
                                         </DropdownMenuSubContent>
@@ -145,7 +141,7 @@ export function NavUser() {
                             </DropdownMenuGroup>
                             {isDevMode && (
                                 <DropdownMenuSub>
-                                    <DropdownMenuSubTrigger>Dev Mode</DropdownMenuSubTrigger>
+                                    <DropdownMenuSubTrigger><Trans>Dev Mode</Trans></DropdownMenuSubTrigger>
                                     <DropdownMenuPortal>
                                         <DropdownMenuSubContent>
                                             <DropdownMenuRadioGroup
@@ -166,7 +162,7 @@ export function NavUser() {
                             <DropdownMenuSeparator />
                             <DropdownMenuItem onClick={handleLogout}>
                                 <LogOut />
-                                Log out
+                                <Trans>Log out</Trans>
                             </DropdownMenuItem>
                         </DropdownMenuContent>
                     </DropdownMenu>

package/src/lib/components/login/login-form.tsx

@@ -1,7 +1,7 @@
 import { Button } from '@/vdb/components/ui/button.js';
 import { Card, CardContent } from '@/vdb/components/ui/card.js';
 import { Input } from '@/vdb/components/ui/input.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 import { cn } from '@/vdb/lib/utils.js';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Loader2 } from 'lucide-react';

package/src/lib/components/shared/asset/asset-bulk-actions.tsx

@@ -11,7 +11,7 @@ import { getBulkActions } from '@/vdb/framework/data-table/data-table-extensions
 import { useFloatingBulkActions } from '@/vdb/hooks/use-floating-bulk-actions.js';
 import { usePageBlock } from '@/vdb/hooks/use-page-block.js';
 import { usePage } from '@/vdb/hooks/use-page.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 import { ChevronDown } from 'lucide-react';
 import { Asset } from './asset-gallery.js';
 
@@ -37,7 +37,7 @@ export function AssetBulkActions({ selection, bulkActions, refetch }: Readonly<A
     const { pageId } = usePage();
     const pageBlock = usePageBlock();
     const blockId = pageBlock?.blockId;
-    
+
     const { position, shouldShow } = useFloatingBulkActions({
         selectionCount: selection.length,
         containerSelector: '[data-asset-gallery]'
@@ -71,8 +71,8 @@ export function AssetBulkActions({ selection, bulkActions, refetch }: Readonly<A
     return (
         <div
             className="flex items-center gap-4 px-8 py-2 animate-in fade-in duration-200 fixed transform -translate-x-1/2 bg-white shadow-2xl rounded-md border z-50"
-            style={{ 
-                height: 'auto', 
+            style={{
+                height: 'auto',
                 maxHeight: '60px',
                 bottom: position.bottom,
                 left: position.left

package/src/lib/components/shared/asset/asset-focal-point-editor.tsx

@@ -1,5 +1,5 @@
 import { Button } from '@/vdb/components/ui/button.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 import { cn } from '@/vdb/lib/utils.js';
 import { DndContext, useDraggable } from '@dnd-kit/core';
 import { restrictToParentElement } from '@dnd-kit/modifiers';

package/src/lib/components/shared/asset/asset-gallery.tsx

@@ -16,7 +16,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@
 import { api } from '@/vdb/graphql/api.js';
 import { assetFragment, AssetFragment } from '@/vdb/graphql/fragments.js';
 import { graphql } from '@/vdb/graphql/graphql.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 import { formatFileSize } from '@/vdb/lib/utils.js';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { useDebounce } from '@uidotdev/usehooks';
@@ -153,18 +153,18 @@ export interface AssetGalleryProps {
  * @docsWeight 0
  */
 export function AssetGallery({
-    onSelect,
-    selectable = true,
-    multiSelect = undefined,
-    initialSelectedAssets = [],
-    pageSize = 24,
-    fixedHeight = false,
-    showHeader = true,
-    className = '',
-    onFilesDropped,
-    bulkActions,
-    displayBulkActions = true,
-}: AssetGalleryProps) {
+                                 onSelect,
+                                 selectable = true,
+                                 multiSelect = undefined,
+                                 initialSelectedAssets = [],
+                                 pageSize = 24,
+                                 fixedHeight = false,
+                                 showHeader = true,
+                                 className = '',
+                                 onFilesDropped,
+                                 bulkActions,
+                                 displayBulkActions = true,
+                             }: AssetGalleryProps) {
     // State
     const [page, setPage] = useState(1);
     const [search, setSearch] = useState('');
@@ -380,7 +380,8 @@ export function AssetGallery({
                 <input {...getInputProps()} />
 
                 {isDragActive && (
-                    <div className="absolute inset-0 bg-background/80 backdrop-blur-sm z-10 flex flex-col items-center justify-center rounded-md">
+                    <div
+                        className="absolute inset-0 bg-background/80 backdrop-blur-sm z-10 flex flex-col items-center justify-center rounded-md">
                         <Upload className="h-12 w-12 text-primary mb-2" />
                         <p className="text-center font-medium">Drop files here to upload</p>
                     </div>

package/src/lib/components/shared/assign-to-channel-bulk-action.tsx

@@ -5,7 +5,7 @@ import { DataTableBulkActionItem } from '@/vdb/components/data-table/data-table-
 import { AssignToChannelDialog } from '@/vdb/components/shared/assign-to-channel-dialog.js';
 import { usePaginatedList } from '@/vdb/components/shared/paginated-list-data-table.js';
 import { useChannel } from '@/vdb/hooks/use-channel.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 
 interface AssignToChannelBulkActionProps {
     selection: any[];
@@ -23,16 +23,16 @@ interface AssignToChannelBulkActionProps {
 }
 
 export function AssignToChannelBulkAction({
-    selection,
-    table,
-    entityType,
-    mutationFn,
-    requiredPermissions,
-    buildInput,
-    additionalFields,
-    additionalData = {},
-    onSuccess,
-}: Readonly<AssignToChannelBulkActionProps>) {
+                                              selection,
+                                              table,
+                                              entityType,
+                                              mutationFn,
+                                              requiredPermissions,
+                                              buildInput,
+                                              additionalFields,
+                                              additionalData = {},
+                                              onSuccess,
+                                          }: Readonly<AssignToChannelBulkActionProps>) {
     const { refetchPaginatedList } = usePaginatedList();
     const { channels } = useChannel();
     const [dialogOpen, setDialogOpen] = useState(false);

package/src/lib/components/shared/assign-to-channel-dialog.tsx

@@ -15,7 +15,7 @@ import {
 import { Input } from '@/vdb/components/ui/input.js';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/vdb/components/ui/select.js';
 import { ResultOf } from '@/vdb/graphql/graphql.js';
-import { Trans, useLingui } from '@/vdb/lib/trans.js';
+import { Trans, useLingui } from '@lingui/react/macro';
 
 import { useChannel } from '@/vdb/hooks/use-channel.js';
 
@@ -54,9 +54,10 @@ export function AssignToChannelDialog({
     additionalFields,
     additionalData = {},
 }: Readonly<AssignToChannelDialogProps>) {
-    const { i18n } = useLingui();
+    const { t } = useLingui();
     const [selectedChannelId, setSelectedChannelId] = useState<string>('');
     const { channels, activeChannel } = useChannel();
+    const entityIdsLength = entityIds.length;
 
     // Filter out the currently selected channel from available options
     const availableChannels = channels.filter(channel => channel.id !== activeChannel?.id);
@@ -64,12 +65,12 @@ export function AssignToChannelDialog({
     const { mutate, isPending } = useMutation({
         mutationFn,
         onSuccess: () => {
-            toast.success(i18n.t(`Successfully assigned ${entityIds.length} ${entityType} to channel`));
+            toast.success(t`Successfully assigned ${entityIdsLength} ${entityType} to channel`);
             onSuccess?.();
             onOpenChange(false);
         },
         onError: () => {
-            toast.error(`Failed to assign ${entityIds.length} ${entityType} to channel`);
+            toast.error(`Failed to assign ${entityIdsLength} ${entityType} to channel`);
         },
     });
 
@@ -103,7 +104,7 @@ export function AssignToChannelDialog({
                         </label>
                         <Select value={selectedChannelId} onValueChange={setSelectedChannelId}>
                             <SelectTrigger>
-                                <SelectValue placeholder={i18n.t('Select a channel')} />
+                                <SelectValue placeholder={t`Select a channel`} />
                             </SelectTrigger>
                             <SelectContent>
                                 {availableChannels.map(channel => (

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

@@ -1,5 +1,5 @@
 import { DEFAULT_CHANNEL_CODE } from '@/vdb/constants.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 
 export function ChannelCodeLabel({ code }: Readonly<{ code: string }> | Readonly<{ code: undefined }>) {
     return code === DEFAULT_CHANNEL_CODE ? <Trans>Default channel</Trans> : code;

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

@@ -1,6 +1,6 @@
 import { api } from '@/vdb/graphql/api.js';
 import { graphql } from '@/vdb/graphql/graphql.js';
-import { useLingui } from '@/vdb/lib/trans.js';
+import { useLingui } from '@lingui/react/macro';
 import { useQuery } from '@tanstack/react-query';
 import { ChannelCodeLabel } from './channel-code-label.js';
 import { MultiSelect } from './multi-select.js';
@@ -24,7 +24,7 @@ export interface ChannelSelectorProps<T extends boolean> {
 
 export function ChannelSelector<T extends boolean>(props: ChannelSelectorProps<T>) {
     const { value, onChange, multiple } = props;
-    const { i18n } = useLingui();
+    const { t } = useLingui();
 
     const { data: channelsData } = useQuery({
         queryKey: ['channels'],
@@ -44,8 +44,8 @@ export function ChannelSelector<T extends boolean>(props: ChannelSelectorProps<T
             onChange={onChange}
             multiple={multiple}
             items={items}
-            placeholder={i18n.t('Select a channel')}
-            searchPlaceholder={i18n.t('Search channels...')}
+            placeholder={t`Select a channel`}
+            searchPlaceholder={t`Search channels...`}
         />
     );
 }

package/src/lib/components/shared/configurable-operation-multi-selector.tsx

@@ -8,7 +8,7 @@ import {
 } from '@/vdb/components/ui/dropdown-menu.js';
 import { api } from '@/vdb/graphql/api.js';
 import { ConfigurableOperationDefFragment } from '@/vdb/graphql/fragments.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 import { DefinedInitialDataOptions, useQuery, UseQueryOptions } from '@tanstack/react-query';
 import { ConfigurableOperationInput as ConfigurableOperationInputType } from '@vendure/common/lib/generated-types';
 import { Plus } from 'lucide-react';
@@ -94,17 +94,17 @@ type QueryData = {
  * ```
  */
 export function ConfigurableOperationMultiSelector({
-    value,
-    onChange,
-    queryDocument,
-    queryOptions,
-    queryKey,
-    dataPath,
-    buttonText,
-    dropdownTitle,
-    emptyText = 'No options found',
-    showEnhancedDropdown = true,
-}: Readonly<ConfigurableOperationMultiSelectorProps>) {
+                                                       value,
+                                                       onChange,
+                                                       queryDocument,
+                                                       queryOptions,
+                                                       queryKey,
+                                                       dataPath,
+                                                       buttonText,
+                                                       dropdownTitle,
+                                                       emptyText = 'No options found',
+                                                       showEnhancedDropdown = true,
+                                                   }: Readonly<ConfigurableOperationMultiSelectorProps>) {
     const { data } = useQuery<QueryData>(
         queryOptions || {
             queryKey: [queryKey],
@@ -195,8 +195,10 @@ export function ConfigurableOperationMultiSelector({
                                                 onCombinationModeChange(index, newValue)
                                             }
                                             name={''}
-                                            ref={() => {}}
-                                            onBlur={() => {}}
+                                            ref={() => {
+                                            }}
+                                            onBlur={() => {
+                                            }}
                                             position={index}
                                         />
                                     </div>

package/src/lib/components/shared/configurable-operation-selector.tsx

@@ -7,7 +7,7 @@ import {
 } from '@/vdb/components/ui/dropdown-menu.js';
 import { api } from '@/vdb/graphql/api.js';
 import { ConfigurableOperationDefFragment } from '@/vdb/graphql/fragments.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 import { useQuery } from '@tanstack/react-query';
 import { ConfigurableOperationInput as ConfigurableOperationInputType } from '@vendure/common/lib/generated-types';
 import { Plus } from 'lucide-react';

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

@@ -9,17 +9,17 @@ import {
     AlertDialogTitle,
     AlertDialogTrigger,
 } from '@/vdb/components/ui/alert-dialog.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 import { useState } from 'react';
 
 export function ConfirmationDialog({
-    title,
-    description,
-    onConfirm,
-    children,
-    confirmText,
-    cancelText,
-}: {
+                                       title,
+                                       description,
+                                       onConfirm,
+                                       children,
+                                       confirmText,
+                                       cancelText,
+                                   }: {
     title: string;
     description: string;
     onConfirm: () => void;

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

@@ -9,7 +9,7 @@ import {
 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 { Trans } from '@lingui/react/macro';
 import { useQuery } from '@tanstack/react-query';
 import { Plus, Search } from 'lucide-react';
 import { useState } from 'react';

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

@@ -1,6 +1,6 @@
 import { CurrencyCode } from '@/vdb/constants.js';
 import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
-import { useLingui } from '@/vdb/lib/trans.js';
+import { useLingui } from '@lingui/react/macro';
 import { MultiSelect } from './multi-select.js';
 
 export interface CurrencySelectorProps<T extends boolean> {
@@ -13,7 +13,7 @@ export interface CurrencySelectorProps<T extends boolean> {
 export function CurrencySelector<T extends boolean>(props: CurrencySelectorProps<T>) {
     const { formatCurrencyName } = useLocalFormat();
     const { value, onChange, multiple, availableCurrencyCodes } = props;
-    const { i18n } = useLingui();
+    const { t } = useLingui();
 
     const items = (availableCurrencyCodes ?? Object.values(CurrencyCode)).map(currencyCode => ({
         value: currencyCode,
@@ -26,8 +26,8 @@ export function CurrencySelector<T extends boolean>(props: CurrencySelectorProps
             onChange={onChange}
             multiple={multiple}
             items={items}
-            placeholder={i18n.t('Select a currency')}
-            searchPlaceholder={i18n.t('Search currencies...')}
+            placeholder={t`Select a currency`}
+            searchPlaceholder={t`Search currencies...`}
         />
     );
 }

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

@@ -12,8 +12,8 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/vdb/components/ui/ta
 import { CustomFormComponent } from '@/vdb/framework/form-engine/custom-form-component.js';
 import { useCustomFieldConfig } from '@/vdb/hooks/use-custom-field-config.js';
 import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
-import { useLingui } from '@/vdb/lib/trans.js';
 import { customFieldConfigFragment } from '@/vdb/providers/server-config.js';
+import { useLingui } from '@lingui/react/macro';
 import { ResultOf } from 'gql.tada';
 import React, { useMemo } from 'react';
 import { Control } from 'react-hook-form';
@@ -29,7 +29,7 @@ interface CustomFieldsFormProps {
 }
 
 export function CustomFieldsForm({ entityType, control, formPathPrefix }: Readonly<CustomFieldsFormProps>) {
-    const { i18n } = useLingui();
+    const { t } = useLingui();
     const customFields = useCustomFieldConfig(entityType);
 
     const getCustomFieldBaseName = (fieldDef: CustomFieldConfig) => {
@@ -97,7 +97,7 @@ export function CustomFieldsForm({ entityType, control, formPathPrefix }: Readon
             <TabsList>
                 {groupedFields.map(group => (
                     <TabsTrigger key={group.tabName} value={group.tabName}>
-                        {group.tabName === 'general' ? i18n.t('General') : group.tabName}
+                        {group.tabName === 'general' ? t`General` : group.tabName}
                     </TabsTrigger>
                 ))}
             </TabsList>
@@ -151,10 +151,7 @@ function CustomFieldItem({ fieldDef, control, fieldName }: Readonly<CustomFieldI
                             <FormLabel>{getTranslation(fieldDef.label) ?? field.name}</FormLabel>
                             <FormControl>
                                 {hasCustomFormComponent ? (
-                                    <CustomFormComponent
-                                        fieldDef={fieldDef}
-                                        {...field}
-                                    />
+                                    <CustomFormComponent fieldDef={fieldDef} {...field} />
                                 ) : (
                                     <FormControlAdapter
                                         fieldDef={fieldDef}
@@ -185,10 +182,7 @@ function CustomFieldItem({ fieldDef, control, fieldName }: Readonly<CustomFieldI
                             getTranslation={getTranslation}
                             fieldName={fieldProps.field.name}
                         >
-                            <CustomFormComponent
-                                fieldDef={fieldDef}
-                                {...fieldProps.field}
-                            />
+                            <CustomFormComponent fieldDef={fieldDef} {...fieldProps.field} />
                         </CustomFieldFormItem>
                     )}
                 />
@@ -215,10 +209,7 @@ function CustomFieldItem({ fieldDef, control, fieldName }: Readonly<CustomFieldI
                                         {...field}
                                         disabled={isReadonly}
                                         renderInput={(index, inputField) => (
-                                            <StructFormInput
-                                                {...inputField}
-                                                fieldDef={fieldDef}
-                                            />
+                                            <StructFormInput {...inputField} fieldDef={fieldDef} />
                                         )}
                                         defaultValue={{}} // Empty struct object as default
                                         isFullWidth={true} // Structs should always be full-width
@@ -243,10 +234,7 @@ function CustomFieldItem({ fieldDef, control, fieldName }: Readonly<CustomFieldI
                         <FormItem>
                             <FormLabel>{getTranslation(fieldDef.label) ?? fieldDef.name}</FormLabel>
                             <FormControl>
-                                <StructFormInput
-                                    {...field}
-                                    fieldDef={fieldDef}
-                                />
+                                <StructFormInput {...field} fieldDef={fieldDef} />
                             </FormControl>
                             <FormDescription>{getTranslation(fieldDef.description)}</FormDescription>
                             <FormMessage />
@@ -269,11 +257,7 @@ function CustomFieldItem({ fieldDef, control, fieldName }: Readonly<CustomFieldI
                         getTranslation={getTranslation}
                         fieldName={fieldDef.name}
                     >
-                        <FormControlAdapter
-                            fieldDef={fieldDef}
-                            field={field}
-                            valueMode="native"
-                        />
+                        <FormControlAdapter fieldDef={fieldDef} field={field} valueMode="native" />
                     </CustomFieldFormItem>
                 )}
             />

package/src/lib/components/shared/customer-address-form.tsx

@@ -1,7 +1,7 @@
 import { api } from '@/vdb/graphql/api.js';
 import { graphql } from '@/vdb/graphql/graphql.js';
-import { Trans, useLingui } from '@/vdb/lib/trans.js';
 import { zodResolver } from '@hookform/resolvers/zod';
+import { Trans, useLingui } from '@lingui/react/macro';
 import { useQuery } from '@tanstack/react-query';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
@@ -64,7 +64,7 @@ export function CustomerAddressForm<T>({
     onSubmit,
     onCancel,
 }: CustomerAddressFormProps<T>) {
-    const { i18n } = useLingui();
+    const { t } = useLingui();
 
     // Fetch available countries
     const { data: countriesData, isLoading: isLoadingCountries } = useQuery({
@@ -237,7 +237,7 @@ export function CustomerAddressForm<T>({
                                 >
                                     <FormControl>
                                         <SelectTrigger>
-                                            <SelectValue placeholder={i18n.t('Select a country')} />
+                                            <SelectValue placeholder={t`Select a country`} />
                                         </SelectTrigger>
                                     </FormControl>
                                     <SelectContent>

package/src/lib/components/shared/customer-group-selector.tsx

@@ -3,7 +3,7 @@ import { Command, CommandItem, CommandList } from '@/vdb/components/ui/command.j
 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 { Trans } from '@lingui/react/macro';
 import { useQuery } from '@tanstack/react-query';
 import { Plus } from 'lucide-react';
 import { useState } from 'react';

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

@@ -9,7 +9,7 @@ import {
 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 { Trans } from '@lingui/react/macro';
 import { useQuery } from '@tanstack/react-query';
 import { useDebounce } from '@uidotdev/usehooks';
 import { Plus } from 'lucide-react';

package/src/lib/components/shared/error-page.tsx

@@ -1,5 +1,5 @@
 import { Page, PageBlock, PageLayout, PageTitle } from '@/vdb/framework/layout-engine/page-layout.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 import { AlertCircle } from 'lucide-react';
 import { Alert, AlertDescription, AlertTitle } from '../ui/alert.js';