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

package/src/app/routes/_authenticated/_products/products.tsx

@@ -4,7 +4,7 @@ import { Button } from '@/vdb/components/ui/button.js';
 import { PageActionBarRight } from '@/vdb/framework/layout-engine/page-layout.js';
 import { ListPage } from '@/vdb/framework/page/list-page.js';
 import { api } from '@/vdb/graphql/api.js';
-import { Trans, useLingui } from '@/vdb/lib/trans.js';
+import { Trans, useLingui } from '@lingui/react/macro';
 import { useMutation } from '@tanstack/react-query';
 import { createFileRoute, Link } from '@tanstack/react-router';
 import { PlusIcon, RefreshCwIcon } from 'lucide-react';
@@ -24,14 +24,14 @@ export const Route = createFileRoute('/_authenticated/_products/products')({
 });
 
 function ProductListPage() {
-    const { i18n } = useLingui();
+    const { t } = useLingui();
     const reindexMutation = useMutation({
         mutationFn: () => api.mutate(reindexDocument, {}),
         onSuccess: () => {
-            toast.success(i18n.t('Search index rebuild started'));
+            toast.success(t`Search index rebuild started`);
         },
         onError: () => {
-            toast.error(i18n.t('Search index rebuild could not be started'));
+            toast.error(t`Search index rebuild could not be started`);
         },
     });
 
@@ -43,10 +43,9 @@ function ProductListPage() {
         <ListPage
             pageId="product-list"
             listQuery={productListDocument}
-            title="Products"
+            title={<Trans>Products</Trans>}
             customizeColumns={{
                 name: {
-                    header: 'Product Name',
                     cell: ({ row }) => <DetailPageButton id={row.original.id} label={row.original.name} />,
                 },
             }}
@@ -55,6 +54,12 @@ function ProductListPage() {
                     name: { contains: searchTerm },
                 };
             }}
+            defaultVisibility={{
+                name: true,
+                featuredAsset: true,
+                slug: true,
+                enabled: true,
+            }}
             route={Route}
             bulkActions={[
                 {

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

@@ -23,7 +23,7 @@ import {
 } from '@/vdb/framework/layout-engine/page-layout.js';
 import { detailPageRouteLoader } from '@/vdb/framework/page/detail-page-route-loader.js';
 import { useDetailPage } from '@/vdb/framework/page/use-detail-page.js';
-import { Trans, useLingui } from '@/vdb/lib/trans.js';
+import { Trans, useLingui } from '@lingui/react/macro';
 import { createFileRoute, Link, useNavigate } from '@tanstack/react-router';
 import { PlusIcon } from 'lucide-react';
 import { useRef } from 'react';
@@ -54,7 +54,7 @@ function ProductDetailPage() {
     const params = Route.useParams();
     const navigate = useNavigate();
     const creatingNewEntity = params.id === NEW_ENTITY_PATH;
-    const { i18n } = useLingui();
+    const { t } = useLingui();
     const refreshRef = useRef<() => void>(() => {});
 
     const { form, submitHandler, entity, isPending, refreshEntity, resetForm } = useDetailPage({
@@ -84,7 +84,7 @@ function ProductDetailPage() {
         params: { id: params.id },
         onSuccess: async data => {
             toast.success(
-                i18n.t(creatingNewEntity ? 'Successfully created product' : 'Successfully updated product'),
+                creatingNewEntity ? t`Successfully created product` : t`Successfully updated product`,
             );
             resetForm();
             if (creatingNewEntity) {
@@ -92,7 +92,7 @@ function ProductDetailPage() {
             }
         },
         onError: err => {
-            toast.error(i18n.t(creatingNewEntity ? 'Failed to create product' : 'Failed to update product'), {
+            toast.error(creatingNewEntity ? t`Failed to create product` : t`Failed to update product`, {
                 description: err instanceof Error ? err.message : 'Unknown error',
             });
         },

package/src/app/routes/_authenticated/_products/products_.$id_.variants.tsx

@@ -17,8 +17,8 @@ import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@
 import { Page, PageBlock, PageLayout, PageTitle } from '@/vdb/framework/layout-engine/page-layout.js';
 import { api } from '@/vdb/graphql/api.js';
 import { ResultOf } 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 { useMutation, useQuery } from '@tanstack/react-query';
 import { createFileRoute } from '@tanstack/react-router';
 import { Plus, Save, Trash2 } from 'lucide-react';
@@ -82,7 +82,7 @@ function AddOptionValueDialog({
     onSuccess?: () => void;
 }>) {
     const [open, setOpen] = useState(false);
-    const { i18n } = useLingui();
+    const { t } = useLingui();
 
     const form = useForm<AddOptionValueFormValues>({
         resolver: zodResolver(addOptionValueSchema),
@@ -94,14 +94,14 @@ function AddOptionValueDialog({
     const createOptionMutation = useMutation({
         mutationFn: api.mutate(createProductOptionDocument),
         onSuccess: () => {
-            toast.success(i18n.t('Successfully added option value'));
+            toast.success(t`Successfully added option value`);
             setOpen(false);
             form.reset();
             onSuccess?.();
         },
         onError: error => {
-            toast.error(i18n.t('Failed to add option value'), {
-                description: error instanceof Error ? error.message : i18n.t('Unknown error'),
+            toast.error(t`Failed to add option value`, {
+                description: error instanceof Error ? error.message : t`Unknown error`,
             });
         },
     });
@@ -141,7 +141,7 @@ function AddOptionValueDialog({
                             name="name"
                             label={<Trans>Option value name</Trans>}
                             render={({ field }) => (
-                                <Input {...field} placeholder={i18n.t('e.g., Red, Large, Cotton')} />
+                                <Input {...field} placeholder={t`e.g., Red, Large, Cotton`} />
                             )}
                         />
                         <DialogFooter>
@@ -158,7 +158,7 @@ function AddOptionValueDialog({
 
 function ManageProductVariants() {
     const { id } = Route.useParams();
-    const { i18n } = useLingui();
+    const { t } = useLingui();
     const [optionsToAddToVariant, setOptionsToAddToVariant] = useState<
         Record<string, Record<string, string>>
     >({});
@@ -171,7 +171,7 @@ function ManageProductVariants() {
     const updateVariantMutation = useMutation({
         mutationFn: api.mutate(updateProductVariantDocument),
         onSuccess: () => {
-            toast.success(i18n.t('Variant updated successfully'));
+            toast.success(t`Variant updated successfully`);
             refetch();
         },
     });
@@ -179,7 +179,7 @@ function ManageProductVariants() {
     const deleteVariantMutation = useMutation({
         mutationFn: api.mutate(deleteProductVariantDocument),
         onSuccess: () => {
-            toast.success(i18n.t('Variant deleted successfully'));
+            toast.success(t`Variant deleted successfully`);
             refetch();
         },
     });
@@ -187,7 +187,7 @@ function ManageProductVariants() {
     const removeOptionGroupMutation = useMutation({
         mutationFn: api.mutate(removeOptionGroupFromProductDocument),
         onSuccess: () => {
-            toast.success(i18n.t('Option group removed'));
+            toast.success(t`Option group removed`);
             refetch();
         },
     });
@@ -233,7 +233,7 @@ function ManageProductVariants() {
     };
 
     const deleteVariant = async (variant: Variant) => {
-        if (confirm(i18n.t('Are you sure you want to delete this variant?'))) {
+        if (confirm(t`Are you sure you want to delete this variant?`)) {
             await deleteVariantMutation.mutateAsync({ id: variant.id });
         }
     };

package/src/app/routes/_authenticated/_products/products_.$productId.option-groups.$id.tsx

@@ -20,7 +20,7 @@ import {
 } from '@/vdb/framework/layout-engine/page-layout.js';
 import { getDetailQueryOptions, useDetailPage } from '@/vdb/framework/page/use-detail-page.js';
 import { api } from '@/vdb/graphql/api.js';
-import { Trans, useLingui } from '@/vdb/lib/trans.js';
+import { Trans, useLingui } from '@lingui/react/macro';
 import { createFileRoute, ParsedLocation, useNavigate } from '@tanstack/react-router';
 import { toast } from 'sonner';
 import { ProductOptionsTable } from './components/product-options-table.js';
@@ -72,7 +72,7 @@ function ProductOptionGroupDetailPage() {
     const params = Route.useParams();
     const navigate = useNavigate();
     const creatingNewEntity = params.id === NEW_ENTITY_PATH;
-    const { i18n } = useLingui();
+    const { t } = useLingui();
 
     const { form, submitHandler, entity, isPending, resetForm } = useDetailPage({
         pageId,
@@ -102,11 +102,9 @@ function ProductOptionGroupDetailPage() {
         params: { id: params.id },
         onSuccess: async data => {
             toast(
-                i18n.t(
-                    creatingNewEntity
-                        ? 'Successfully created product option group'
-                        : 'Successfully updated product option group',
-                ),
+                creatingNewEntity
+                    ? t`Successfully created product option group`
+                    : t`Successfully updated product option group`,
             );
             resetForm();
             if (creatingNewEntity) {
@@ -115,11 +113,9 @@ function ProductOptionGroupDetailPage() {
         },
         onError: err => {
             toast(
-                i18n.t(
-                    creatingNewEntity
-                        ? 'Failed to create product option group'
-                        : 'Failed to update product option group',
-                ),
+                creatingNewEntity
+                    ? t`Failed to create product option group`
+                    : t`Failed to update product option group`,
                 {
                     description: err instanceof Error ? err.message : 'Unknown error',
                 },

package/src/app/routes/_authenticated/_products/products_.$productId.option-groups.$productOptionGroupId.options_.$id.tsx

@@ -20,7 +20,7 @@ import {
 } from '@/vdb/framework/layout-engine/page-layout.js';
 import { getDetailQueryOptions, useDetailPage } from '@/vdb/framework/page/use-detail-page.js';
 import { api } from '@/vdb/graphql/api.js';
-import { Trans, useLingui } from '@/vdb/lib/trans.js';
+import { Trans, useLingui } from '@lingui/react/macro';
 import { createFileRoute, ParsedLocation, useNavigate } from '@tanstack/react-router';
 import { toast } from 'sonner';
 import {
@@ -94,7 +94,7 @@ function ProductOptionDetailPage() {
     const params = Route.useParams();
     const navigate = useNavigate();
     const creatingNewEntity = params.id === NEW_ENTITY_PATH;
-    const { i18n } = useLingui();
+    const { t } = useLingui();
 
     const { form, submitHandler, entity, isPending, resetForm } = useDetailPage({
         pageId,

package/src/app/routes/_authenticated/_profile/profile.tsx

@@ -14,7 +14,7 @@ import {
 } from '@/vdb/framework/layout-engine/page-layout.js';
 import { useDetailPage } from '@/vdb/framework/page/use-detail-page.js';
 import { api } from '@/vdb/graphql/api.js';
-import { Trans, useLingui } from '@/vdb/lib/trans.js';
+import { Trans, useLingui } from '@lingui/react/macro';
 import { createFileRoute } from '@tanstack/react-router';
 import { toast } from 'sonner';
 import { activeAdministratorDocument, updateAdministratorDocument } from './profile.graphql.js';
@@ -34,7 +34,7 @@ export const Route = createFileRoute('/_authenticated/_profile/profile')({
 });
 
 function ProfilePage() {
-    const { i18n } = useLingui();
+    const { t } = useLingui();
 
     const { form, submitHandler, isPending } = useDetailPage({
         queryDocument: activeAdministratorDocument,
@@ -58,11 +58,11 @@ function ProfilePage() {
         },
         params: { id: 'undefined' },
         onSuccess: async data => {
-            toast(i18n.t('Successfully updated profile'));
+            toast(t`Successfully updated profile`);
             form.reset(form.getValues());
         },
         onError: err => {
-            toast(i18n.t('Failed to update profile'), {
+            toast(t`Failed to update profile`, {
                 description: err instanceof Error ? err.message : 'Unknown error',
             });
         },

package/src/app/routes/_authenticated/_promotions/promotions.tsx

@@ -4,7 +4,7 @@ import { PermissionGuard } from '@/vdb/components/shared/permission-guard.js';
 import { Button } from '@/vdb/components/ui/button.js';
 import { PageActionBarRight } from '@/vdb/framework/layout-engine/page-layout.js';
 import { ListPage } from '@/vdb/framework/page/list-page.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 import { createFileRoute, Link } from '@tanstack/react-router';
 import { PlusIcon } from 'lucide-react';
 import {
@@ -26,7 +26,7 @@ function PromotionListPage() {
             pageId="promotion-list"
             listQuery={promotionListDocument}
             route={Route}
-            title="Promotions"
+            title={<Trans>Promotions</Trans>}
             defaultVisibility={{
                 name: true,
                 couponCode: true,
@@ -42,11 +42,9 @@ function PromotionListPage() {
             }}
             customizeColumns={{
                 name: {
-                    header: 'Name',
                     cell: ({ row }) => <DetailPageButton id={row.original.id} label={row.original.name} />,
                 },
                 enabled: {
-                    header: 'Enabled',
                     cell: ({ row }) => <BooleanDisplayBadge value={row.original.enabled} />,
                 },
             }}

package/src/app/routes/_authenticated/_promotions/promotions_.$id.tsx

@@ -20,7 +20,7 @@ import {
 } from '@/vdb/framework/layout-engine/page-layout.js';
 import { detailPageRouteLoader } from '@/vdb/framework/page/detail-page-route-loader.js';
 import { useDetailPage } from '@/vdb/framework/page/use-detail-page.js';
-import { Trans, useLingui } from '@/vdb/lib/trans.js';
+import { Trans, useLingui } from '@lingui/react/macro';
 import { createFileRoute, useNavigate } from '@tanstack/react-router';
 import { toast } from 'sonner';
 import { PromotionActionsSelector } from './components/promotion-actions-selector.js';
@@ -52,7 +52,7 @@ function PromotionDetailPage() {
     const params = Route.useParams();
     const navigate = useNavigate();
     const creatingNewEntity = params.id === NEW_ENTITY_PATH;
-    const { i18n } = useLingui();
+    const { t } = useLingui();
 
     const { form, submitHandler, entity, isPending, resetForm } = useDetailPage({
         pageId,
@@ -99,19 +99,24 @@ function PromotionDetailPage() {
         params: { id: params.id },
         onSuccess: async data => {
             if (data.__typename === 'Promotion') {
-                toast.success(i18n.t(creatingNewEntity ? 'Successfully created promotion' : 'Successfully updated promotion'));
+                toast.success(
+                    creatingNewEntity ? t`Successfully created promotion` : t`Successfully updated promotion`,
+                );
                 resetForm();
                 if (creatingNewEntity) {
                     await navigate({ to: `../$id`, params: { id: data.id } });
                 }
             } else {
-                toast.error(i18n.t(creatingNewEntity ? 'Failed to create promotion' : 'Failed to update promotion'), {
-                    description: data.message,
-                });
+                toast.error(
+                    creatingNewEntity ? t`Failed to create promotion` : t`Failed to update promotion`,
+                    {
+                        description: data.message,
+                    },
+                );
             }
         },
         onError: err => {
-            toast.error(i18n.t(creatingNewEntity ? 'Failed to create promotion' : 'Failed to update promotion'), {
+            toast.error(creatingNewEntity ? t`Failed to create promotion` : t`Failed to update promotion`, {
                 description: err instanceof Error ? err.message : 'Unknown error',
             });
         },
@@ -169,8 +174,9 @@ function PromotionDetailPage() {
                             label={<Trans>Starts at</Trans>}
                             render={({ field }) => (
                                 <DateTimeInput
+                                    {...field}
                                     value={field.value}
-                                    onChange={value => field.onChange(value.toISOString())}
+                                    onChange={value => field.onChange(value)}
                                 />
                             )}
                         />
@@ -180,8 +186,9 @@ function PromotionDetailPage() {
                             label={<Trans>Ends at</Trans>}
                             render={({ field }) => (
                                 <DateTimeInput
+                                    {...field}
                                     value={field.value}
-                                    onChange={value => field.onChange(value.toISOString())}
+                                    onChange={value => field.onChange(value)}
                                 />
                             )}
                         />

package/src/app/routes/_authenticated/_roles/components/permissions-table-grid.tsx

@@ -3,8 +3,8 @@ import { Switch } from '@/vdb/components/ui/switch.js';
 import { Table, TableBody, TableCell, TableRow } from '@/vdb/components/ui/table.js';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/vdb/components/ui/tooltip.js';
 import { useGroupedPermissions } from '@/vdb/hooks/use-grouped-permissions.js';
-import { Trans, useLingui } from '@/vdb/lib/trans.js';
 import { ServerConfig } from '@/vdb/providers/server-config.js';
+import { Trans, useLingui } from '@lingui/react/macro';
 import { InfoIcon } from 'lucide-react';
 
 interface PermissionsTableGridProps {

package/src/app/routes/_authenticated/_roles/roles.tsx

@@ -7,7 +7,7 @@ import { Button } from '@/vdb/components/ui/button.js';
 import { CUSTOMER_ROLE_CODE, SUPER_ADMIN_ROLE_CODE } from '@/vdb/constants.js';
 import { PageActionBarRight } from '@/vdb/framework/layout-engine/page-layout.js';
 import { ListPage } from '@/vdb/framework/page/list-page.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 import { createFileRoute, Link } from '@tanstack/react-router';
 import { LayersIcon, PlusIcon } from 'lucide-react';
 import { ExpandablePermissions } from './components/expandable-permissions.js';
@@ -25,7 +25,7 @@ function RoleListPage() {
     return (
         <ListPage
             pageId="role-list"
-            title="Roles"
+            title={<Trans>Roles</Trans>}
             listQuery={roleListQuery}
             route={Route}
             defaultVisibility={{
@@ -36,7 +36,6 @@ function RoleListPage() {
             }}
             customizeColumns={{
                 code: {
-                    header: 'Code',
                     cell: ({ row }) => {
                         return (
                             <DetailPageButton
@@ -48,7 +47,6 @@ function RoleListPage() {
                     },
                 },
                 permissions: {
-                    header: 'Permissions',
                     cell: ({ row }) => {
                         if (SYSTEM_ROLES.includes(row.original.code)) {
                             return (
@@ -62,7 +60,6 @@ function RoleListPage() {
                     },
                 },
                 channels: {
-                    header: 'Channels',
                     cell: ({ row }) => {
                         if (SYSTEM_ROLES.includes(row.original.code)) {
                             return null;
@@ -92,7 +89,7 @@ function RoleListPage() {
                     <Button asChild>
                         <Link to="./new">
                             <PlusIcon className="mr-2 h-4 w-4" />
-                            New Role
+                            <Trans>New Role</Trans>
                         </Link>
                     </Button>
                 </PermissionGuard>

package/src/app/routes/_authenticated/_roles/roles_.$id.tsx

@@ -16,7 +16,7 @@ import {
 } from '@/vdb/framework/layout-engine/page-layout.js';
 import { detailPageRouteLoader } from '@/vdb/framework/page/detail-page-route-loader.js';
 import { useDetailPage } from '@/vdb/framework/page/use-detail-page.js';
-import { Trans, useLingui } from '@/vdb/lib/trans.js';
+import { Trans, useLingui } from '@lingui/react/macro';
 import { createFileRoute, useNavigate } from '@tanstack/react-router';
 import { toast } from 'sonner';
 import { PermissionsTableGrid } from './components/permissions-table-grid.js';
@@ -43,7 +43,7 @@ function RoleDetailPage() {
     const params = Route.useParams();
     const navigate = useNavigate();
     const creatingNewEntity = params.id === NEW_ENTITY_PATH;
-    const { i18n } = useLingui();
+    const { t } = useLingui();
 
     const { form, submitHandler, entity, isPending, resetForm } = useDetailPage({
         pageId,
@@ -61,16 +61,14 @@ function RoleDetailPage() {
         },
         params: { id: params.id },
         onSuccess: async data => {
-            toast.success(
-                i18n.t(creatingNewEntity ? 'Successfully created role' : 'Successfully updated role'),
-            );
+            toast.success(creatingNewEntity ? t`Successfully created role` : t`Successfully updated role`);
             resetForm();
             if (creatingNewEntity) {
                 await navigate({ to: `../$id`, params: { id: data.id } });
             }
         },
         onError: err => {
-            toast.error(i18n.t(creatingNewEntity ? 'Failed to create role' : 'Failed to update role'), {
+            toast.error(creatingNewEntity ? t`Failed to create role` : t`Failed to update role`, {
                 description: err instanceof Error ? err.message : 'Unknown error',
             });
         },

package/src/app/routes/_authenticated/_sellers/sellers.tsx

@@ -3,7 +3,7 @@ import { PermissionGuard } from '@/vdb/components/shared/permission-guard.js';
 import { Button } from '@/vdb/components/ui/button.js';
 import { PageActionBarRight } from '@/vdb/framework/layout-engine/page-layout.js';
 import { ListPage } from '@/vdb/framework/page/list-page.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 import { createFileRoute, Link } from '@tanstack/react-router';
 import { PlusIcon } from 'lucide-react';
 import { DeleteSellersBulkAction } from './components/seller-bulk-actions.js';
@@ -20,7 +20,7 @@ function SellerListPage() {
             pageId="seller-list"
             listQuery={sellerListQuery}
             route={Route}
-            title="Sellers"
+            title={<Trans>Sellers</Trans>}
             defaultVisibility={{
                 name: true,
             }}
@@ -31,7 +31,6 @@ function SellerListPage() {
             }}
             customizeColumns={{
                 name: {
-                    header: 'Name',
                     cell: ({ row }) => <DetailPageButton id={row.original.id} label={row.original.name} />,
                 },
             }}
@@ -47,7 +46,7 @@ function SellerListPage() {
                     <Button asChild>
                         <Link to="./new">
                             <PlusIcon className="mr-2 h-4 w-4" />
-                            New Seller
+                            <Trans>New Seller</Trans>
                         </Link>
                     </Button>
                 </PermissionGuard>

package/src/app/routes/_authenticated/_sellers/sellers_.$id.tsx

@@ -15,7 +15,7 @@ import {
 } from '@/vdb/framework/layout-engine/page-layout.js';
 import { detailPageRouteLoader } from '@/vdb/framework/page/detail-page-route-loader.js';
 import { useDetailPage } from '@/vdb/framework/page/use-detail-page.js';
-import { Trans, useLingui } from '@/vdb/lib/trans.js';
+import { Trans, useLingui } from '@lingui/react/macro';
 import { createFileRoute, useNavigate } from '@tanstack/react-router';
 import { toast } from 'sonner';
 import { createSellerDocument, sellerDetailDocument, updateSellerDocument } from './sellers.graphql.js';
@@ -39,7 +39,7 @@ function SellerDetailPage() {
     const params = Route.useParams();
     const navigate = useNavigate();
     const creatingNewEntity = params.id === NEW_ENTITY_PATH;
-    const { i18n } = useLingui();
+    const { t } = useLingui();
 
     const { form, submitHandler, entity, isPending, resetForm } = useDetailPage({
         pageId,
@@ -55,14 +55,14 @@ function SellerDetailPage() {
         },
         params: { id: params.id },
         onSuccess: async data => {
-            toast(i18n.t(creatingNewEntity ? 'Successfully created seller' : 'Successfully updated seller'));
+            toast(creatingNewEntity ? t`Successfully created seller` : t`Successfully updated seller`);
             form.reset(form.getValues());
             if (creatingNewEntity) {
                 await navigate({ to: `../$id`, params: { id: data.id } });
             }
         },
         onError: err => {
-            toast(i18n.t(creatingNewEntity ? 'Failed to create seller' : 'Failed to update seller'), {
+            toast(creatingNewEntity ? t`Failed to create seller` : t`Failed to update seller`, {
                 description: err instanceof Error ? err.message : 'Unknown error',
             });
         },

package/src/app/routes/_authenticated/_shipping-methods/components/price-display.tsx

@@ -1,11 +1,11 @@
 import { Money } from '@/vdb/components/data-display/money.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 
 export function PriceDisplay({
-    price,
-    priceWithTax,
-    currencyCode,
-}: Readonly<{
+                                 price,
+                                 priceWithTax,
+                                 currencyCode,
+                             }: Readonly<{
     price: number;
     priceWithTax: number;
     currencyCode: string;

package/src/app/routes/_authenticated/_shipping-methods/components/shipping-method-test-result-wrapper.tsx

@@ -1,7 +1,7 @@
 import { Alert, AlertDescription } from '@/vdb/components/ui/alert.js';
 import { Button } from '@/vdb/components/ui/button.js';
 import { Card, CardContent, CardHeader, CardTitle } from '@/vdb/components/ui/card.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 import { PlayIcon } from 'lucide-react';
 import React from 'react';
 

package/src/app/routes/_authenticated/_shipping-methods/components/test-address-form.tsx

@@ -3,9 +3,10 @@ import { AccordionContent, AccordionItem, AccordionTrigger } from '@/vdb/compone
 import { Form } from '@/vdb/components/ui/form.js';
 import { Input } from '@/vdb/components/ui/input.js';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/vdb/components/ui/select.js';
+import { LS_KEY_SHIPPING_TEST_ADDRESS } from '@/vdb/constants.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 { useEffect, useRef } from 'react';
 import { useForm } from 'react-hook-form';
@@ -43,7 +44,7 @@ export function TestAddressForm({ onAddressChange }: Readonly<TestAddressFormPro
     const form = useForm<TestAddress>({
         defaultValues: (() => {
             try {
-                const stored = localStorage.getItem('shippingTestAddress');
+                const stored = localStorage.getItem(LS_KEY_SHIPPING_TEST_ADDRESS);
                 return stored
                     ? JSON.parse(stored)
                     : {
@@ -92,7 +93,7 @@ export function TestAddressForm({ onAddressChange }: Readonly<TestAddressFormPro
                 previousValuesRef.current = currentValueString;
 
                 try {
-                    localStorage.setItem('shippingTestAddress', currentValueString);
+                    localStorage.setItem(LS_KEY_SHIPPING_TEST_ADDRESS, currentValueString);
                 } catch {
                     // Ignore localStorage errors
                 }

package/src/app/routes/_authenticated/_shipping-methods/components/test-order-builder.tsx

@@ -7,9 +7,10 @@ import { AccordionContent, AccordionItem, AccordionTrigger } from '@/vdb/compone
 import { Button } from '@/vdb/components/ui/button.js';
 import { Input } from '@/vdb/components/ui/input.js';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/vdb/components/ui/table.js';
+import { LS_KEY_SHIPPING_TEST_ORDER } from '@/vdb/constants.js';
 import { useChannel } from '@/vdb/hooks/use-channel.js';
 import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 import {
     ColumnDef,
     flexRender,
@@ -38,7 +39,7 @@ export function TestOrderBuilder({ onOrderLinesChange }: Readonly<TestOrderBuild
     const { activeChannel } = useChannel();
     const [lines, setLines] = useState<TestOrderLine[]>(() => {
         try {
-            const stored = localStorage.getItem('shippingTestOrder');
+            const stored = localStorage.getItem(LS_KEY_SHIPPING_TEST_ORDER);
             return stored ? JSON.parse(stored) : [];
         } catch {
             return [];
@@ -51,7 +52,7 @@ export function TestOrderBuilder({ onOrderLinesChange }: Readonly<TestOrderBuild
 
     useEffect(() => {
         try {
-            localStorage.setItem('shippingTestOrder', JSON.stringify(lines));
+            localStorage.setItem(LS_KEY_SHIPPING_TEST_ORDER, JSON.stringify(lines));
         } catch {
             // Ignore localStorage errors
         }