@vendure/dashboard 3.4.3-master-202509260228 → 3.5.0-minor-202510012036

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

@@ -0,0 +1,208 @@
+import { SlugInput } from '@/vdb/components/data-input/index.js';
+import { ErrorPage } from '@/vdb/components/shared/error-page.js';
+import { FormFieldWrapper } from '@/vdb/components/shared/form-field-wrapper.js';
+import { PermissionGuard } from '@/vdb/components/shared/permission-guard.js';
+import { TranslatableFormFieldWrapper } from '@/vdb/components/shared/translatable-form-field.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { Input } from '@/vdb/components/ui/input.js';
+import { NEW_ENTITY_PATH } from '@/vdb/constants.js';
+import { extendDetailFormQuery } from '@/vdb/framework/document-extension/extend-detail-form-query.js';
+import { addCustomFields } from '@/vdb/framework/document-introspection/add-custom-fields.js';
+import {
+    CustomFieldsPageBlock,
+    DetailFormGrid,
+    Page,
+    PageActionBar,
+    PageActionBarRight,
+    PageBlock,
+    PageLayout,
+    PageTitle,
+} 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 '@lingui/react/macro';
+import { createFileRoute, ParsedLocation, useNavigate } from '@tanstack/react-router';
+import { toast } from 'sonner';
+import {
+    createProductOptionDocument,
+    productIdNameDocument,
+    productOptionDetailDocument,
+    productOptionGroupIdNameDocument,
+    updateProductOptionDocument,
+} from './product-option-groups.graphql.js';
+
+const pageId = 'product-option-detail';
+
+export const Route = createFileRoute(
+    '/_authenticated/_products/products_/$productId/option-groups/$productOptionGroupId/options_/$id',
+)({
+    component: ProductOptionDetailPage,
+    loader: async ({ context, params }: { context: any; params: any; location: ParsedLocation }) => {
+        if (!params.id) {
+            throw new Error('ID param is required');
+        }
+
+        const isNew = params.id === NEW_ENTITY_PATH;
+        let optionGroupName: string | undefined;
+        let optionGroupId = params.productOptionGroupId;
+        const { extendedQuery: extendedQueryDocument } = extendDetailFormQuery(
+            addCustomFields(productOptionDetailDocument),
+            pageId,
+        );
+
+        const result = isNew
+            ? null
+            : await context.queryClient.ensureQueryData(
+                  getDetailQueryOptions(extendedQueryDocument, { id: params.id }),
+              );
+        const productResult = await context.queryClient.fetchQuery({
+            queryKey: [pageId, 'productIdName', params.productId],
+            queryFn: () => api.query(productIdNameDocument, { id: params.productId }),
+        });
+        const entityName = 'ProductOption';
+
+        if (!result?.productOption && !isNew) {
+            throw new Error(`${entityName} with the ID ${params.id} was not found`);
+        }
+        if (isNew) {
+            const optionGroupResult = await context.queryClient.fetchQuery({
+                queryKey: [pageId, 'optionGroupIdName', optionGroupId],
+                queryFn: () => api.query(productOptionGroupIdNameDocument, { id: optionGroupId }),
+            });
+            optionGroupName = optionGroupResult.productOptionGroup?.name;
+        } else {
+            optionGroupName = result.productOption.group.name;
+        }
+        const productId = params.productId;
+        return {
+            breadcrumb: [
+                { path: '/products', label: <Trans>Products</Trans> },
+                { path: `/products/${productId}`, label: productResult.product.name },
+                { path: `/products/${productId}`, label: <Trans>Option Groups</Trans> },
+                {
+                    path: `/products/${productId}/option-groups/${optionGroupId}`,
+                    label: optionGroupName,
+                },
+                isNew ? <Trans>New option</Trans> : result.productOption?.name,
+            ],
+        };
+    },
+    errorComponent: ({ error }) => <ErrorPage message={error.message} />,
+});
+
+function ProductOptionDetailPage() {
+    const params = Route.useParams();
+    const navigate = useNavigate();
+    const creatingNewEntity = params.id === NEW_ENTITY_PATH;
+    const { t } = useLingui();
+
+    const { form, submitHandler, entity, isPending, resetForm } = useDetailPage({
+        pageId,
+        queryDocument: productOptionDetailDocument,
+        createDocument: createProductOptionDocument,
+        updateDocument: updateProductOptionDocument,
+        setValuesForUpdate: entity => {
+            return {
+                id: entity.id,
+                code: entity.code,
+                name: entity.name,
+                translations: entity.translations.map(translation => ({
+                    id: translation.id,
+                    languageCode: translation.languageCode,
+                    name: translation.name,
+                    customFields: (translation as any).customFields,
+                })),
+                customFields: entity.customFields as any,
+            };
+        },
+        transformCreateInput: (value): any => {
+            return {
+                ...value,
+                productOptionGroupId: params.productOptionGroupId,
+            };
+        },
+        params: { id: params.id },
+        onSuccess: async data => {
+            toast(
+                i18n.t(
+                    creatingNewEntity
+                        ? 'Successfully created product option'
+                        : 'Successfully updated product option',
+                ),
+            );
+            resetForm();
+            const created = Array.isArray(data) ? data[0] : data;
+            if (creatingNewEntity && created) {
+                await navigate({ to: `../$id`, params: { id: (created as any).id } });
+            }
+        },
+        onError: err => {
+            toast(
+                i18n.t(
+                    creatingNewEntity ? 'Failed to create product option' : 'Failed to update product option',
+                ),
+                {
+                    description: err instanceof Error ? err.message : 'Unknown error',
+                },
+            );
+        },
+    });
+
+    return (
+        <Page pageId={pageId} form={form} submitHandler={submitHandler} entity={entity}>
+            <PageTitle>
+                {creatingNewEntity ? <Trans>New product option</Trans> : ((entity as any)?.name ?? '')}
+            </PageTitle>
+            <PageActionBar>
+                <PageActionBarRight>
+                    <PermissionGuard requires={['UpdateProduct', 'UpdateCatalog']}>
+                        <Button
+                            type="submit"
+                            disabled={!form.formState.isDirty || !form.formState.isValid || isPending}
+                        >
+                            {creatingNewEntity ? <Trans>Create</Trans> : <Trans>Update</Trans>}
+                        </Button>
+                    </PermissionGuard>
+                </PageActionBarRight>
+            </PageActionBar>
+            <PageLayout>
+                <PageBlock column="side" blockId="option-group-info">
+                    {entity?.group && (
+                        <div className="space-y-2">
+                            <div className="text-sm font-medium">
+                                <Trans>Product Option Group</Trans>
+                            </div>
+                            <div className="text-sm text-muted-foreground">{entity?.group.name}</div>
+                            <div className="text-xs text-muted-foreground">{entity?.group.code}</div>
+                        </div>
+                    )}
+                </PageBlock>
+                <PageBlock column="main" blockId="main-form">
+                    <DetailFormGrid>
+                        <TranslatableFormFieldWrapper
+                            control={form.control}
+                            name="name"
+                            label={<Trans>Name</Trans>}
+                            render={({ field }) => <Input {...field} />}
+                        />
+                        <FormFieldWrapper
+                            control={form.control}
+                            name="code"
+                            label={<Trans>Code</Trans>}
+                            render={({ field }) => (
+                                <SlugInput
+                                    fieldName="code"
+                                    watchFieldName="name"
+                                    entityName="ProductOption"
+                                    entityId={entity?.id}
+                                    {...field}
+                                />
+                            )}
+                        />
+                    </DetailFormGrid>
+                </PageBlock>
+                <CustomFieldsPageBlock column="main" entityType="ProductOption" control={form.control} />
+            </PageLayout>
+        </Page>
+    );
+}

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

@@ -5,7 +5,7 @@ import { Input } from '@/vdb/components/ui/input.js';
 import { Select, SelectContent, 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';
+import { Trans } from '@lingui/react/macro';
 import { useQuery } from '@tanstack/react-query';
 import { useEffect, useRef } from 'react';
 import { useForm } from 'react-hook-form';
@@ -47,16 +47,16 @@ export function TestAddressForm({ onAddressChange }: Readonly<TestAddressFormPro
                 return stored
                     ? JSON.parse(stored)
                     : {
-                          fullName: '',
-                          company: '',
-                          streetLine1: '',
-                          streetLine2: '',
-                          city: '',
-                          province: '',
-                          postalCode: '',
-                          countryCode: '',
-                          phoneNumber: '',
-                      };
+                        fullName: '',
+                        company: '',
+                        streetLine1: '',
+                        streetLine2: '',
+                        city: '',
+                        province: '',
+                        postalCode: '',
+                        countryCode: '',
+                        phoneNumber: '',
+                    };
             } catch {
                 return {
                     fullName: '',

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

@@ -9,7 +9,7 @@ import { Input } from '@/vdb/components/ui/input.js';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/vdb/components/ui/table.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,

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

@@ -1,6 +1,6 @@
 import { Badge } from '@/vdb/components/ui/badge.js';
 import { useChannel } from '@/vdb/hooks/use-channel.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 import { Check } from 'lucide-react';
 import { MetadataBadges } from './metadata-badges.js';
 import { PriceDisplay } from './price-display.js';
@@ -26,13 +26,13 @@ interface ShippingEligibilityTestResultProps {
 }
 
 export function TestShippingMethodsResult({
-    testResult,
-    okToRun,
-    testDataUpdated,
-    hasTestedOnce,
-    onRunTest,
-    loading = false,
-}: Readonly<ShippingEligibilityTestResultProps>) {
+                                              testResult,
+                                              okToRun,
+                                              testDataUpdated,
+                                              hasTestedOnce,
+                                              onRunTest,
+                                              loading = false,
+                                          }: Readonly<ShippingEligibilityTestResultProps>) {
     const { activeChannel } = useChannel();
     const currencyCode = activeChannel?.defaultCurrencyCode ?? 'USD';
     const hasResults = testResult && testResult.length > 0;

package/src/app/routes/_authenticated/_shipping-methods/components/test-shipping-methods-sheet.tsx

@@ -7,7 +7,7 @@ import {
     SheetTitle,
     SheetTrigger,
 } from '@/vdb/components/ui/sheet.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 import { FlaskConical } from 'lucide-react';
 import { useState } from 'react';
 import { TestShippingMethods } from './test-shipping-methods.js';

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

@@ -1,5 +1,5 @@
 import { useChannel } from '@/vdb/hooks/use-channel.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 import { ResultOf } from 'gql.tada';
 import { Check } from 'lucide-react';
 import { testShippingMethodDocument } from '../shipping-methods.graphql.js';
@@ -19,13 +19,13 @@ interface TestSingleMethodResultProps {
 }
 
 export function TestSingleMethodResult({
-    testResult,
-    okToRun,
-    testDataUpdated,
-    hasTestedOnce,
-    onRunTest,
-    loading = false,
-}: Readonly<TestSingleMethodResultProps>) {
+                                           testResult,
+                                           okToRun,
+                                           testDataUpdated,
+                                           hasTestedOnce,
+                                           onRunTest,
+                                           loading = false,
+                                       }: Readonly<TestSingleMethodResultProps>) {
     const { activeChannel } = useChannel();
     const currencyCode = activeChannel?.defaultCurrencyCode ?? 'USD';
     const showEmptyState = testResult === undefined && hasTestedOnce && !testDataUpdated && !loading;