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

package/src/app/routes/_authenticated/_facets/facets_.$facetId.values_.$id.tsx

@@ -1,3 +1,4 @@
+import { PageBreadcrumb } from '@/vdb/components/layout/generated-breadcrumbs.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';
@@ -17,7 +18,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 {
@@ -25,7 +26,6 @@ import {
     facetValueDetailDocument,
     updateFacetValueDocument,
 } from './facets.graphql.js';
-import { PageBreadcrumb } from '@/vdb/components/layout/generated-breadcrumbs.js';
 
 const pageId = 'facet-value-detail';
 
@@ -52,7 +52,7 @@ function FacetValueDetailPage() {
     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,
@@ -81,7 +81,9 @@ function FacetValueDetailPage() {
         },
         params: { id: params.id },
         onSuccess: async data => {
-            toast(i18n.t(creatingNewEntity ? 'Successfully created facet value' : 'Successfully updated facet value'));
+            toast(
+                creatingNewEntity ? t`Successfully created facet value` : t`Successfully updated facet value`,
+            );
             resetForm();
             const created = Array.isArray(data) ? data[0] : data;
             if (creatingNewEntity && created) {
@@ -89,7 +91,7 @@ function FacetValueDetailPage() {
             }
         },
         onError: err => {
-            toast(i18n.t(creatingNewEntity ? 'Failed to create facet value' : 'Failed to update facet value'), {
+            toast(creatingNewEntity ? t`Failed to create facet value` : t`Failed to update facet value`, {
                 description: err instanceof Error ? err.message : 'Unknown error',
             });
         },

package/src/app/routes/_authenticated/_facets/facets_.$id.tsx

@@ -1,3 +1,4 @@
+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';
@@ -18,7 +19,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 { FacetValuesTable } from './components/facet-values-table.js';
@@ -32,7 +33,10 @@ export const Route = createFileRoute('/_authenticated/_facets/facets_/$id')({
         pageId,
         queryDocument: facetDetailDocument,
         breadcrumb(isNew, entity) {
-            return [{ path: '/facets', label: <Trans>Facets</Trans> }, isNew ? <Trans>New facet</Trans> : entity?.name];
+            return [
+                { path: '/facets', label: <Trans>Facets</Trans> },
+                isNew ? <Trans>New facet</Trans> : entity?.name,
+            ];
         },
     }),
     errorComponent: ({ error }) => <ErrorPage message={error.message} />,
@@ -42,7 +46,7 @@ function FacetDetailPage() {
     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,
@@ -72,14 +76,14 @@ function FacetDetailPage() {
         },
         params: { id: params.id },
         onSuccess: async data => {
-            toast(i18n.t(creatingNewEntity ? 'Successfully created facet' : 'Successfully updated facet'));
+            toast(creatingNewEntity ? t`Successfully created facet` : t`Successfully updated facet`);
             resetForm();
             if (creatingNewEntity) {
                 await navigate({ to: `../$id`, params: { id: data.id } });
             }
         },
         onError: err => {
-            toast(i18n.t(creatingNewEntity ? 'Failed to create facet' : 'Failed to update facet'), {
+            toast(creatingNewEntity ? t`Failed to create facet` : t`Failed to update facet`, {
                 description: err instanceof Error ? err.message : 'Unknown error',
             });
         },
@@ -124,7 +128,15 @@ function FacetDetailPage() {
                             control={form.control}
                             name="code"
                             label={<Trans>Code</Trans>}
-                            render={({ field }) => <Input {...field} />}
+                            render={({ field }) => (
+                                <SlugInput
+                                    fieldName="code"
+                                    watchFieldName="name"
+                                    entityName="Facet"
+                                    entityId={entity?.id}
+                                    {...field}
+                                />
+                            )}
                         />
                     </DetailFormGrid>
                 </PageBlock>

package/src/app/routes/_authenticated/_global-settings/global-settings.tsx

@@ -19,7 +19,7 @@ import {
     PageTitle,
 } from '@/vdb/framework/layout-engine/page-layout.js';
 import { getDetailQueryOptions, 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 { globalSettingsDocument, updateGlobalSettingsDocument } from './global-settings.graphql.js';
@@ -48,7 +48,7 @@ function GlobalSettingsPage() {
     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 } = useDetailPage({
         queryDocument: globalSettingsDocument,
@@ -67,19 +67,19 @@ function GlobalSettingsPage() {
         params: { id: 'undefined' },
         onSuccess: async data => {
             if (data.__typename === 'GlobalSettings') {
-                toast(i18n.t('Successfully updated global settings'));
+                toast(t`Successfully updated global settings`);
                 form.reset(form.getValues());
                 if (creatingNewEntity) {
                     await navigate({ to: `../$id`, params: { id: data.id } });
                 }
             } else {
-                toast(i18n.t('Failed to update global settings'), {
+                toast(t`Failed to update global settings`, {
                     description: data.message,
                 });
             }
         },
         onError: err => {
-            toast(i18n.t('Failed to update global settings'), {
+            toast(t`Failed to update global settings`, {
                 description: err instanceof Error ? err.message : 'Unknown error',
             });
         },

package/src/app/routes/_authenticated/_orders/components/add-manual-payment-dialog.tsx

@@ -16,15 +16,12 @@ import { Form } from '@/vdb/components/ui/form.js';
 import { Input } from '@/vdb/components/ui/input.js';
 import { api } from '@/vdb/graphql/api.js';
 import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
-import { Trans, useLingui } from '@/vdb/lib/trans.js';
+import { Trans, useLingui } from '@lingui/react/macro';
 import { useMutation } from '@tanstack/react-query';
 import { useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { toast } from 'sonner';
-import {
-    addManualPaymentToOrderDocument,
-    paymentMethodsDocument
-} from '../orders.graphql.js';
+import { addManualPaymentToOrderDocument, paymentMethodsDocument } from '../orders.graphql.js';
 import { Order } from '../utils/order-types.js';
 import { calculateOutstandingPaymentAmount } from '../utils/order-utils.js';
 
@@ -39,7 +36,7 @@ interface FormData {
 }
 
 export function AddManualPaymentDialog({ order, onSuccess }: Readonly<AddManualPaymentDialogProps>) {
-    const { i18n } = useLingui();
+    const { t } = useLingui();
     const { formatCurrency } = useLocalFormat();
     const [isSubmitting, setIsSubmitting] = useState(false);
     const [open, setOpen] = useState(false);
@@ -49,16 +46,16 @@ export function AddManualPaymentDialog({ order, onSuccess }: Readonly<AddManualP
         onSuccess: (result: any) => {
             const { addManualPaymentToOrder } = result;
             if (addManualPaymentToOrder.__typename === 'Order') {
-                toast(i18n.t('Successfully added payment to order'));
+                toast(t`Successfully added payment to order`);
                 onSuccess?.();
             } else {
-                toast(i18n.t('Failed to add payment'), {
+                toast(t`Failed to add payment`, {
                     description: addManualPaymentToOrder.message,
                 });
             }
         },
         onError: error => {
-            toast(i18n.t('Failed to add payment'), {
+            toast(t`Failed to add payment`, {
                 description: error instanceof Error ? error.message : 'Unknown error',
             });
         },
@@ -86,7 +83,7 @@ export function AddManualPaymentDialog({ order, onSuccess }: Readonly<AddManualP
             setOpen(false);
             form.reset();
         } catch (error) {
-            toast(i18n.t('Failed to add payment'), {
+            toast(t`Failed to add payment`, {
                 description: error instanceof Error ? error.message : 'Unknown error',
             });
         } finally {
@@ -107,7 +104,7 @@ export function AddManualPaymentDialog({ order, onSuccess }: Readonly<AddManualP
         listQuery: paymentMethodsDocument,
         idKey: 'code',
         labelKey: 'name',
-        placeholder: i18n.t('Search payment methods...'),
+        placeholder: t`Search payment methods...`,
         multiple: false,
         label: (method: any) => `${method.name} (${method.code})`,
     });
@@ -136,15 +133,18 @@ export function AddManualPaymentDialog({ order, onSuccess }: Readonly<AddManualP
                         </DialogDescription>
                     </DialogHeader>
                     <Form {...form}>
-                        <form onSubmit={e => {
-                            e.stopPropagation();
-                            form.handleSubmit(handleSubmit)(e);
-                        }} className="space-y-4">
+                        <form
+                            onSubmit={e => {
+                                e.stopPropagation();
+                                form.handleSubmit(handleSubmit)(e);
+                            }}
+                            className="space-y-4"
+                        >
                             <FormFieldWrapper
                                 control={form.control}
                                 name="method"
                                 label={<Trans>Payment method</Trans>}
-                                rules={{ required: i18n.t('Payment method is required') }}
+                                rules={{ required: t`Payment method is required` }}
                                 render={({ field }) => (
                                     <RelationSelector
                                         config={paymentMethodSelectorConfig}
@@ -158,9 +158,9 @@ export function AddManualPaymentDialog({ order, onSuccess }: Readonly<AddManualP
                                 control={form.control}
                                 name="transactionId"
                                 label={<Trans>Transaction ID</Trans>}
-                                rules={{ required: i18n.t('Transaction ID is required') }}
+                                rules={{ required: t`Transaction ID is required` }}
                                 render={({ field }) => (
-                                    <Input {...field} placeholder={i18n.t('Enter transaction ID')} />
+                                    <Input {...field} placeholder={t`Enter transaction ID`} />
                                 )}
                             />
                             <DialogFooter>
@@ -169,9 +169,7 @@ export function AddManualPaymentDialog({ order, onSuccess }: Readonly<AddManualP
                                 </Button>
                                 <Button
                                     type="submit"
-                                    disabled={
-                                        !form.formState.isValid || isSubmitting || !method
-                                    }
+                                    disabled={!form.formState.isValid || isSubmitting || !method}
                                 >
                                     {isSubmitting ? (
                                         <Trans>Adding...</Trans>

package/src/app/routes/_authenticated/_orders/components/customer-address-selector.tsx

@@ -3,7 +3,7 @@ import { Card } from '@/vdb/components/ui/card.js';
 import { Popover, PopoverContent, PopoverTrigger } from '@/vdb/components/ui/popover.js';
 import { api } from '@/vdb/graphql/api.js';
 import { graphql, ResultOf } from '@/vdb/graphql/graphql.js';
-import { Trans, useLingui } from '@/vdb/lib/trans.js';
+import { Trans, useLingui } from '@lingui/react/macro';
 import { cn } from '@/vdb/lib/utils.js';
 import { useQuery } from '@tanstack/react-query';
 import { Plus } from 'lucide-react';

package/src/app/routes/_authenticated/_orders/components/edit-order-table.tsx

@@ -5,7 +5,7 @@ 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 { ResultOf } from '@/vdb/graphql/graphql.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 import {
     ColumnDef,
     flexRender,
@@ -53,16 +53,16 @@ export interface OrderTableProps {
 }
 
 export function EditOrderTable({
-    order,
-    eligibleShippingMethods,
-    onAddItem,
-    onAdjustLine,
-    onRemoveLine,
-    onSetShippingMethod,
-    onApplyCouponCode,
-    onRemoveCouponCode,
-    displayTotals = true,
-}: Readonly<OrderTableProps>) {
+                                   order,
+                                   eligibleShippingMethods,
+                                   onAddItem,
+                                   onAdjustLine,
+                                   onRemoveLine,
+                                   onSetShippingMethod,
+                                   onApplyCouponCode,
+                                   onRemoveCouponCode,
+                                   displayTotals = true,
+                               }: Readonly<OrderTableProps>) {
     const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});
     const currencyCode = order.currencyCode;
     const columns: ColumnDef<OrderLineFragment & { customFields?: Record<string, any> }>[] = [
@@ -169,9 +169,9 @@ export function EditOrderTable({
                                             {header.isPlaceholder
                                                 ? null
                                                 : flexRender(
-                                                      header.column.columnDef.header,
-                                                      header.getContext(),
-                                                  )}
+                                                    header.column.columnDef.header,
+                                                    header.getContext(),
+                                                )}
                                         </TableHead>
                                     );
                                 })}
@@ -181,14 +181,14 @@ export function EditOrderTable({
                     <TableBody>
                         {table.getRowModel().rows?.length
                             ? table.getRowModel().rows.map(row => (
-                                  <TableRow key={row.id} data-state={row.getIsSelected() && 'selected'}>
-                                      {row.getVisibleCells().map(cell => (
-                                          <TableCell key={cell.id}>
-                                              {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                                          </TableCell>
-                                      ))}
-                                  </TableRow>
-                              ))
+                                <TableRow key={row.id} data-state={row.getIsSelected() && 'selected'}>
+                                    {row.getVisibleCells().map(cell => (
+                                        <TableCell key={cell.id}>
+                                            {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                                        </TableCell>
+                                    ))}
+                                </TableRow>
+                            ))
                             : null}
                         <TableRow>
                             <TableCell colSpan={columns.length} className="h-12">

package/src/app/routes/_authenticated/_orders/components/fulfill-order-dialog.tsx

@@ -14,7 +14,7 @@ import { Input } from '@/vdb/components/ui/input.js';
 import { Label } from '@/vdb/components/ui/label.js';
 import { api } from '@/vdb/graphql/api.js';
 import { graphql } from '@/vdb/graphql/graphql.js';
-import { Trans, useLingui } from '@/vdb/lib/trans.js';
+import { Trans, useLingui } from '@lingui/react/macro';
 import { useMutation, useQuery } from '@tanstack/react-query';
 import { ConfigurableOperationInput as ConfigurableOperationInputType } from '@vendure/common/lib/generated-types';
 import { useState } from 'react';
@@ -38,7 +38,7 @@ interface FulfillmentQuantity {
 }
 
 export function FulfillOrderDialog({ order, onSuccess }: Readonly<FulfillOrderDialogProps>) {
-    const { i18n } = useLingui();
+    const { t } = useLingui();
     const [isSubmitting, setIsSubmitting] = useState(false);
     const [open, setOpen] = useState(false);
     const [fulfillmentQuantities, setFulfillmentQuantities] = useState<{
@@ -73,16 +73,16 @@ export function FulfillOrderDialog({ order, onSuccess }: Readonly<FulfillOrderDi
         onSuccess: (result: any) => {
             const { addFulfillmentToOrder } = result;
             if (addFulfillmentToOrder.__typename === 'Fulfillment') {
-                toast(i18n.t('Successfully fulfilled order'));
+                toast(t`Successfully fulfilled order`);
                 onSuccess?.();
             } else {
-                toast(i18n.t('Failed to fulfill order'), {
+                toast(t`Failed to fulfill order`, {
                     description: addFulfillmentToOrder.message,
                 });
             }
         },
         onError: error => {
-            toast(i18n.t('Failed to fulfill order'), {
+            toast(t`Failed to fulfill order`, {
                 description: error instanceof Error ? error.message : 'Unknown error',
             });
         },
@@ -184,7 +184,7 @@ export function FulfillOrderDialog({ order, onSuccess }: Readonly<FulfillOrderDi
             form.reset();
             setFulfillmentQuantities({});
         } catch (error) {
-            toast(i18n.t('Failed to fulfill order'), {
+            toast(t`Failed to fulfill order`, {
                 description: error instanceof Error ? error.message : 'Unknown error',
             });
         } finally {

package/src/app/routes/_authenticated/_orders/components/fulfillment-details.tsx

@@ -2,8 +2,9 @@ import { LabeledData } from '@/vdb/components/labeled-data.js';
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/vdb/components/ui/collapsible.js';
 import { api } from '@/vdb/graphql/api.js';
 import { ResultOf } from '@/vdb/graphql/graphql.js';
+import { useDynamicTranslations } from '@/vdb/hooks/use-dynamic-translations.js';
 import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
-import { Trans, useLingui } from '@/vdb/lib/trans.js';
+import { Trans, useLingui } from '@lingui/react/macro';
 import { useMutation } from '@tanstack/react-query';
 import { ChevronDown } from 'lucide-react';
 import { toast } from 'sonner';
@@ -24,7 +25,8 @@ type FulfillmentDetailsProps = {
 
 export function FulfillmentDetails({ order, fulfillment, onSuccess }: Readonly<FulfillmentDetailsProps>) {
     const { formatDate } = useLocalFormat();
-    const { i18n } = useLingui();
+    const { t } = useLingui();
+    const { getTranslatedFulfillmentState } = useDynamicTranslations();
 
     // Create a map of order lines by ID for quick lookup
     const orderLinesMap = new Map(order.lines.map(line => [line.id, line]));
@@ -34,14 +36,14 @@ export function FulfillmentDetails({ order, fulfillment, onSuccess }: Readonly<F
         onSuccess: (result: ResultOf<typeof transitionFulfillmentToStateDocument>) => {
             const fulfillment = result.transitionFulfillmentToState;
             if (fulfillment.__typename === 'Fulfillment') {
-                toast.success(i18n.t('Fulfillment state updated successfully'));
+                toast.success(t`Fulfillment state updated successfully`);
                 onSuccess?.();
             } else {
-                toast.error(fulfillment.message ?? i18n.t('Failed to update fulfillment state'));
+                toast.error(fulfillment.message ?? t`Failed to update fulfillment state`);
             }
         },
         onError: error => {
-            toast.error(i18n.t('Failed to update fulfillment state'));
+            toast.error(t`Failed to update fulfillment state`);
         },
     });
 
@@ -77,8 +79,9 @@ export function FulfillmentDetails({ order, fulfillment, onSuccess }: Readonly<F
 
         const suggested = nextSuggestedState();
         if (suggested) {
+            const suggestedState = getTranslatedFulfillmentState(suggested);
             actions.push({
-                label: `Transition to ${suggested}`,
+                label: t`Transition to ${suggestedState}`,
                 onClick: () => handleStateTransition(suggested),
                 disabled: transitionFulfillmentMutation.isPending,
             });
@@ -86,7 +89,7 @@ export function FulfillmentDetails({ order, fulfillment, onSuccess }: Readonly<F
 
         nextOtherStates().forEach(state => {
             actions.push({
-                label: `Transition to ${state}`,
+                label: t`Transition to ${getTranslatedFulfillmentState(state)}`,
                 type: getTypeForState(state),
                 onClick: () => handleStateTransition(state),
                 disabled: transitionFulfillmentMutation.isPending,
@@ -101,7 +104,10 @@ export function FulfillmentDetails({ order, fulfillment, onSuccess }: Readonly<F
             <div className="space-y-1">
                 <LabeledData label={<Trans>Fulfillment ID</Trans>} value={fulfillment.id.slice(-8)} />
                 <LabeledData label={<Trans>Method</Trans>} value={fulfillment.method} />
-                <LabeledData label={<Trans>State</Trans>} value={fulfillment.state} />
+                <LabeledData
+                    label={<Trans>State</Trans>}
+                    value={getTranslatedFulfillmentState(fulfillment.state)}
+                />
                 {fulfillment.trackingCode && (
                     <LabeledData label={<Trans>Tracking code</Trans>} value={fulfillment.trackingCode} />
                 )}
@@ -143,7 +149,7 @@ export function FulfillmentDetails({ order, fulfillment, onSuccess }: Readonly<F
 
             <div className="mt-3 pt-3 border-t">
                 <StateTransitionControl
-                    currentState={fulfillment.state}
+                    currentState={getTranslatedFulfillmentState(fulfillment.state)}
                     actions={getFulfillmentActions()}
                     isLoading={transitionFulfillmentMutation.isPending}
                 />

package/src/app/routes/_authenticated/_orders/components/order-address.tsx

@@ -2,7 +2,7 @@ import { Separator } from '@/vdb/components/ui/separator.js';
 import { ResultOf } from 'gql.tada';
 import { Globe, Phone } from 'lucide-react';
 import { orderAddressFragment } from '../orders.graphql.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 
 type OrderAddress = Omit<ResultOf<typeof orderAddressFragment>, 'country'> & {
     country: string | { code: string; name: string } | null;

package/src/app/routes/_authenticated/_orders/components/order-detail-shared.tsx

@@ -13,7 +13,8 @@ import {
 import { getDetailQueryOptions, useDetailPage } from '@/vdb/framework/page/use-detail-page.js';
 import { api } from '@/vdb/graphql/api.js';
 import { useCustomFieldConfig } from '@/vdb/hooks/use-custom-field-config.js';
-import { Trans, useLingui } from '@/vdb/lib/trans.js';
+import { useDynamicTranslations } from '@/vdb/hooks/use-dynamic-translations.js';
+import { Trans, useLingui } from '@lingui/react/macro';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { Link, useNavigate } from '@tanstack/react-router';
 import { ResultOf } from 'gql.tada';
@@ -64,9 +65,10 @@ export function OrderDetailShared({
     titleSlot,
     beforeOrderTable,
 }: Readonly<OrderDetailSharedProps>) {
-    const { i18n } = useLingui();
+    const { t } = useLingui();
     const navigate = useNavigate();
     const queryClient = useQueryClient();
+    const { getTranslatedOrderState } = useDynamicTranslations();
 
     const { form, submitHandler, entity, refreshEntity } = useDetailPage({
         pageId,
@@ -80,11 +82,11 @@ export function OrderDetailShared({
         },
         params: { id: orderId },
         onSuccess: async () => {
-            toast(i18n.t('Successfully updated order'));
+            toast(t`Successfully updated order`);
             form.reset(form.getValues());
         },
         onError: err => {
-            toast(i18n.t('Failed to update order'), {
+            toast(t`Failed to update order`, {
                 description: err instanceof Error ? err.message : 'Unknown error',
             });
         },
@@ -102,12 +104,12 @@ export function OrderDetailShared({
             return [];
         }
         return entity.nextStates.map((state: string) => ({
-            label: `Transition to ${state}`,
+            label: t`Transition to ${getTranslatedOrderState(state)}`,
             type: getTypeForState(state),
             onClick: async () => {
                 const transitionError = await transitionToState(state);
                 if (transitionError) {
-                    toast(i18n.t('Failed to transition order to state'), {
+                    toast(t`Failed to transition order to state`, {
                         description: transitionError,
                     });
                 } else {
@@ -115,7 +117,7 @@ export function OrderDetailShared({
                 }
             },
         }));
-    }, [entity, transitionToState, i18n]);
+    }, [entity, transitionToState, t]);
 
     if (!entity) {
         return null;
@@ -131,7 +133,7 @@ export function OrderDetailShared({
             await queryClient.invalidateQueries({ queryKey });
             await navigate({ to: `/orders/$id/modify`, params: { id: entity.id } });
         } catch (error) {
-            toast(i18n.t('Failed to modify order'), {
+            toast(t`Failed to modify order`, {
                 description: error instanceof Error ? error.message : 'Unknown error',
             });
         }
@@ -232,7 +234,7 @@ export function OrderDetailShared({
                 {/* Side Column Blocks */}
                 <PageBlock column="side" blockId="state">
                     <StateTransitionControl
-                        currentState={entity?.state}
+                        currentState={getTranslatedOrderState(entity?.state)}
                         actions={stateTransitionActions}
                         isLoading={transitionOrderToStateMutation.isPending}
                     />

package/src/app/routes/_authenticated/_orders/components/order-history/default-order-history-components.tsx

@@ -1,5 +1,5 @@
 import { HistoryEntry, HistoryEntryProps } from '@/vdb/framework/history-entry/history-entry.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 
 export function OrderStateTransitionComponent(props: Readonly<HistoryEntryProps>) {
     const { entry } = props;

package/src/app/routes/_authenticated/_orders/components/order-history/order-history-container.tsx

@@ -1,7 +1,7 @@
 import { Alert, AlertDescription } from '@/vdb/components/ui/alert.js';
 import { Button } from '@/vdb/components/ui/button.js';
 import { Skeleton } from '@/vdb/components/ui/skeleton.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 import { TriangleAlert } from 'lucide-react';
 import { OrderHistory } from './order-history.js';
 import { useOrderHistory } from './use-order-history.js';

package/src/app/routes/_authenticated/_orders/components/order-history/order-history-utils.tsx

@@ -1,5 +1,5 @@
 import { HistoryEntryItem } from '@/vdb/framework/extension-api/types/index.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 import {
     ArrowRightToLine,
     Ban,

package/src/app/routes/_authenticated/_orders/components/order-history/use-order-history.ts

@@ -1,6 +1,6 @@
 import { api } from '@/vdb/graphql/api.js';
 import { graphql, ResultOf } from '@/vdb/graphql/graphql.js';
-import { useLingui } from '@/vdb/lib/trans.js';
+import { useLingui } from '@lingui/react/macro';
 import { QueryKey, useInfiniteQuery, useMutation } from '@tanstack/react-query';
 import { useState } from 'react';
 import { toast } from 'sonner';

package/src/app/routes/_authenticated/_orders/components/order-line-custom-fields-form.tsx

@@ -2,7 +2,7 @@ import { CustomFieldsForm } from '@/vdb/components/shared/custom-fields-form.js'
 import { Button } from '@/vdb/components/ui/button.js';
 import { Form } from '@/vdb/components/ui/form.js';
 import { Popover, PopoverContent, PopoverTrigger } from '@/vdb/components/ui/popover.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 import { Settings2 } from 'lucide-react';
 import { useForm } from 'react-hook-form';