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

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

@@ -17,7 +17,7 @@ import { Textarea } from '@/vdb/components/ui/textarea.js';
 import { addCustomFields } from '@/vdb/framework/document-introspection/add-custom-fields.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 { ResultOf, VariablesOf } from 'gql.tada';
 import { CheckIcon } from 'lucide-react';
@@ -53,7 +53,7 @@ export function OrderModificationPreviewDialog({
     modifyOrderInput,
     onResolve,
 }: Readonly<OrderModificationPreviewDialogProps>) {
-    const { i18n } = useLingui();
+    const { t } = useLingui();
     const { formatCurrency } = useLocalFormat();
     // Use a ref to track the last input sent to avoid duplicate calls
     const lastInputRef = useRef<ModifyOrderInput | null>(null);
@@ -99,7 +99,7 @@ export function OrderModificationPreviewDialog({
         previewMutation.data?.modifyOrder?.__typename === 'Order' ? previewMutation.data.modifyOrder : null;
     const error =
         previewMutation.data && previewMutation.data.modifyOrder?.__typename !== 'Order'
-            ? previewMutation.data.modifyOrder?.message || i18n.t('Unknown error')
+            ? previewMutation.data.modifyOrder?.message || t`Unknown error`
             : previewMutation.error?.message || null;
     const loading = previewMutation.isPending;
 
@@ -303,7 +303,7 @@ export function OrderModificationPreviewDialog({
                                                             <Textarea
                                                                 {...field}
                                                                 className="bg-background"
-                                                                placeholder={i18n.t('Enter refund note')}
+                                                                placeholder={t`Enter refund note`}
                                                             />
                                                         )}
                                                     />

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

@@ -1,4 +1,4 @@
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 import { ResultOf, VariablesOf } from 'gql.tada';
 import { modifyOrderDocument, orderDetailDocument } from '../orders.graphql.js';
 

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

@@ -1,5 +1,5 @@
 import { TableCell, TableRow } from '@/vdb/components/ui/table.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 import { Order } from '../utils/order-types.js';
 import { MoneyGrossNet } from './money-gross-net.js';
 
@@ -15,35 +15,35 @@ export function OrderTableTotals({ order, columnCount }: Readonly<OrderTableTota
         <>
             {order.surcharges?.length > 0
                 ? order.surcharges.map((surcharge, index) => (
-                      <TableRow key={`${surcharge.description}-${index}`}>
-                          <TableCell colSpan={columnCount - 1} className="h-12">
-                              <Trans>Surcharge</Trans>: {surcharge.description}
-                          </TableCell>
-                          <TableCell colSpan={1} className="h-12">
-                              <MoneyGrossNet
-                                  priceWithTax={surcharge.priceWithTax}
-                                  price={surcharge.price}
-                                  currencyCode={currencyCode}
-                              />
-                          </TableCell>
-                      </TableRow>
-                  ))
+                    <TableRow key={`${surcharge.description}-${index}`}>
+                        <TableCell colSpan={columnCount - 1} className="h-12">
+                            <Trans>Surcharge</Trans>: {surcharge.description}
+                        </TableCell>
+                        <TableCell colSpan={1} className="h-12">
+                            <MoneyGrossNet
+                                priceWithTax={surcharge.priceWithTax}
+                                price={surcharge.price}
+                                currencyCode={currencyCode}
+                            />
+                        </TableCell>
+                    </TableRow>
+                ))
                 : null}
             {order.discounts?.length > 0
                 ? order.discounts.map((discount, index) => (
-                      <TableRow key={`${discount.description}-${index}`}>
-                          <TableCell colSpan={columnCount - 1} className="h-12">
-                              <Trans>Discount</Trans>: {discount.description}
-                          </TableCell>
-                          <TableCell colSpan={1} className="h-12">
-                              <MoneyGrossNet
-                                  priceWithTax={discount.amountWithTax}
-                                  price={discount.amount}
-                                  currencyCode={currencyCode}
-                              />
-                          </TableCell>
-                      </TableRow>
-                  ))
+                    <TableRow key={`${discount.description}-${index}`}>
+                        <TableCell colSpan={columnCount - 1} className="h-12">
+                            <Trans>Discount</Trans>: {discount.description}
+                        </TableCell>
+                        <TableCell colSpan={1} className="h-12">
+                            <MoneyGrossNet
+                                priceWithTax={discount.amountWithTax}
+                                price={discount.amount}
+                                currencyCode={currencyCode}
+                            />
+                        </TableCell>
+                    </TableRow>
+                ))
                 : null}
             <TableRow>
                 <TableCell colSpan={columnCount - 1} className="h-12">

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

@@ -10,7 +10,7 @@ import { addCustomFields } from '@/vdb/framework/document-introspection/add-cust
 import { getFieldsFromDocumentNode } from '@/vdb/framework/document-introspection/get-document-structure.js';
 import { ResultOf } from '@/vdb/graphql/graphql.js';
 import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 import { JsonEditor } from 'json-edit-react';
 import { EllipsisVertical } from 'lucide-react';
 import { useMemo } from 'react';
@@ -160,7 +160,7 @@ export function OrderTable({ order, pageId }: Readonly<OrderTableProps>) {
         enableSorting: false,
     });
 
-    const columnVisibility = getColumnVisibility(fields, defaultColumnVisibility, customFieldColumnNames);
+    const columnVisibility = getColumnVisibility(columns, defaultColumnVisibility, customFieldColumnNames);
     const visibleColumnCount = Object.values(columnVisibility).filter(Boolean).length;
     const data = order.lines;
 

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

@@ -1,6 +1,6 @@
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/vdb/components/ui/table.js';
 import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 import { Order } from '../utils/order-types.js';
 
 export function OrderTaxSummary({ order }: Readonly<{ order: Order }>) {

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

@@ -3,8 +3,9 @@ import { Button } from '@/vdb/components/ui/button.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 { JsonEditor } from 'json-edit-react';
 import { ChevronDown } from 'lucide-react';
@@ -32,7 +33,8 @@ type PaymentDetailsProps = {
 
 export function PaymentDetails({ payment, currencyCode, onSuccess }: Readonly<PaymentDetailsProps>) {
     const { formatCurrency, formatDate } = useLocalFormat();
-    const { i18n } = useLingui();
+    const { t } = useLingui();
+    const { getTranslatedPaymentState, getTranslatedRefundState } = useDynamicTranslations();
     const [settleRefundDialogOpen, setSettleRefundDialogOpen] = useState(false);
     const [selectedRefundId, setSelectedRefundId] = useState<string | null>(null);
 
@@ -40,14 +42,14 @@ export function PaymentDetails({ payment, currencyCode, onSuccess }: Readonly<Pa
         mutationFn: api.mutate(settlePaymentDocument),
         onSuccess: (result: ResultOf<typeof settlePaymentDocument>) => {
             if (result.settlePayment.__typename === 'Payment') {
-                toast.success(i18n.t('Payment settled successfully'));
+                toast.success(t`Payment settled successfully`);
                 onSuccess?.();
             } else {
-                toast.error(result.settlePayment.message ?? i18n.t('Failed to settle payment'));
+                toast.error(result.settlePayment.message ?? t`Failed to settle payment`);
             }
         },
         onError: () => {
-            toast.error(i18n.t('Failed to settle payment'));
+            toast.error(t`Failed to settle payment`);
         },
     });
 
@@ -55,16 +57,14 @@ export function PaymentDetails({ payment, currencyCode, onSuccess }: Readonly<Pa
         mutationFn: api.mutate(transitionPaymentToStateDocument),
         onSuccess: (result: ResultOf<typeof transitionPaymentToStateDocument>) => {
             if (result.transitionPaymentToState.__typename === 'Payment') {
-                toast.success(i18n.t('Payment state updated successfully'));
+                toast.success(t`Payment state updated successfully`);
                 onSuccess?.();
             } else {
-                toast.error(
-                    result.transitionPaymentToState.message ?? i18n.t('Failed to update payment state'),
-                );
+                toast.error(result.transitionPaymentToState.message ?? t`Failed to update payment state`);
             }
         },
         onError: () => {
-            toast.error(i18n.t('Failed to update payment state'));
+            toast.error(t`Failed to update payment state`);
         },
     });
 
@@ -72,14 +72,14 @@ export function PaymentDetails({ payment, currencyCode, onSuccess }: Readonly<Pa
         mutationFn: api.mutate(cancelPaymentDocument),
         onSuccess: (result: ResultOf<typeof cancelPaymentDocument>) => {
             if (result.cancelPayment.__typename === 'Payment') {
-                toast.success(i18n.t('Payment cancelled successfully'));
+                toast.success(t`Payment cancelled successfully`);
                 onSuccess?.();
             } else {
-                toast.error(result.cancelPayment.message ?? i18n.t('Failed to cancel payment'));
+                toast.error(result.cancelPayment.message ?? t`Failed to cancel payment`);
             }
         },
         onError: () => {
-            toast.error(i18n.t('Failed to cancel payment'));
+            toast.error(t`Failed to cancel payment`);
         },
     });
 
@@ -87,15 +87,15 @@ export function PaymentDetails({ payment, currencyCode, onSuccess }: Readonly<Pa
         mutationFn: api.mutate(settleRefundDocument),
         onSuccess: (result: ResultOf<typeof settleRefundDocument>) => {
             if (result.settleRefund.__typename === 'Refund') {
-                toast.success(i18n.t('Refund settled successfully'));
+                toast.success(t`Refund settled successfully`);
                 onSuccess?.();
                 setSettleRefundDialogOpen(false);
             } else {
-                toast.error(result.settleRefund.message ?? i18n.t('Failed to settle refund'));
+                toast.error(result.settleRefund.message ?? t`Failed to settle refund`);
             }
         },
         onError: () => {
-            toast.error(i18n.t('Failed to settle refund'));
+            toast.error(t`Failed to settle refund`);
         },
     });
 
@@ -139,7 +139,7 @@ export function PaymentDetails({ payment, currencyCode, onSuccess }: Readonly<Pa
 
         if (payment.nextStates?.includes('Settled')) {
             actions.push({
-                label: 'Settle payment',
+                label: t`Settle payment`,
                 onClick: handleSettlePayment,
                 type: 'success',
                 disabled: settlePaymentMutation.isPending,
@@ -148,7 +148,10 @@ export function PaymentDetails({ payment, currencyCode, onSuccess }: Readonly<Pa
 
         nextOtherStates().forEach(state => {
             actions.push({
-                label: state === 'Cancelled' ? 'Cancel payment' : `Transition to ${state}`,
+                label:
+                    state === 'Cancelled'
+                        ? t`Cancel payment`
+                        : t`Transition to ${getTranslatedPaymentState(state)}`,
                 type: getTypeForState(state),
                 onClick: () => handlePaymentStateTransition(state),
                 disabled: transitionPaymentMutation.isPending || cancelPaymentMutation.isPending,
@@ -210,7 +213,10 @@ export function PaymentDetails({ payment, currencyCode, onSuccess }: Readonly<Pa
                                 <div key={refund.id} className="p-3 border rounded-md bg-muted/50">
                                     <div className="space-y-1">
                                         <LabeledData label={<Trans>Refund ID</Trans>} value={refund.id} />
-                                        <LabeledData label={<Trans>State</Trans>} value={refund.state} />
+                                        <LabeledData
+                                            label={<Trans>State</Trans>}
+                                            value={getTranslatedRefundState(refund.state)}
+                                        />
                                         <LabeledData
                                             label={<Trans>Created at</Trans>}
                                             value={formatDate(refund.createdAt, {
@@ -266,7 +272,7 @@ export function PaymentDetails({ payment, currencyCode, onSuccess }: Readonly<Pa
                 )}
                 <div className="mt-3 pt-3 border-t">
                     <StateTransitionControl
-                        currentState={payment.state}
+                        currentState={getTranslatedPaymentState(payment.state)}
                         actions={getPaymentActions()}
                         isLoading={
                             settlePaymentMutation.isPending ||

package/src/app/routes/_authenticated/_orders/components/seller-orders-card.tsx

@@ -1,6 +1,7 @@
 import { DetailPageButton } from '@/vdb/components/shared/detail-page-button.js';
 import { Badge } from '@/vdb/components/ui/badge.js';
 import { api } from '@/vdb/graphql/api.js';
+import { useDynamicTranslations } from '@/vdb/hooks/use-dynamic-translations.js';
 import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
 import { useQuery } from '@tanstack/react-query';
 import { sellerOrdersDocument } from '../orders.graphql.js';
@@ -12,6 +13,7 @@ export interface SellerOrdersCardProps {
 
 export function SellerOrdersCard({ orderId }: Readonly<SellerOrdersCardProps>) {
     const { formatCurrency } = useLocalFormat();
+    const { getTranslatedOrderState } = useDynamicTranslations();
     const { data, isLoading, error } = useQuery({
         queryKey: ['seller-orders', orderId],
         queryFn: () => api.query(sellerOrdersDocument, { orderId }),
@@ -51,7 +53,7 @@ export function SellerOrdersCard({ orderId }: Readonly<SellerOrdersCardProps>) {
                             <div className="flex gap-2">
                                 {seller && <Badge variant={'secondary'}>{seller.name}</Badge>}
                             </div>
-                            <Badge variant={'secondary'}>{sellerOrder.state}</Badge>
+                            <Badge variant={'secondary'}>{getTranslatedOrderState(sellerOrder.state)}</Badge>
                         </div>
                     </div>
                 );

package/src/app/routes/_authenticated/_orders/components/settle-refund-dialog.tsx

@@ -9,7 +9,7 @@ import {
 } from '@/vdb/components/ui/dialog.js';
 import { Input } from '@/vdb/components/ui/input.js';
 import { Label } from '@/vdb/components/ui/label.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 import { useState } from 'react';
 
 type SettleRefundDialogProps = {
@@ -20,11 +20,11 @@ type SettleRefundDialogProps = {
 };
 
 export function SettleRefundDialog({
-    open,
-    onOpenChange,
-    onSettle,
-    isLoading,
-}: Readonly<SettleRefundDialogProps>) {
+                                       open,
+                                       onOpenChange,
+                                       onSettle,
+                                       isLoading,
+                                   }: Readonly<SettleRefundDialogProps>) {
     const [transactionId, setTransactionId] = useState('');
 
     const handleSettle = () => {

package/src/app/routes/_authenticated/_orders/components/shipping-method-selector.tsx

@@ -1,7 +1,7 @@
 import { Money } from '@/vdb/components/data-display/money.js';
 import { Card, CardContent, CardHeader, CardTitle } from '@/vdb/components/ui/card.js';
 import { ResultOf } from '@/vdb/graphql/graphql.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 import { draftOrderEligibleShippingMethodsDocument } from '../orders.graphql.js';
 
 type ShippingMethodQuote = ResultOf<

package/src/app/routes/_authenticated/_orders/components/state-transition-control.tsx

@@ -5,7 +5,7 @@ import {
     DropdownMenuItem,
     DropdownMenuTrigger,
 } from '@/vdb/components/ui/dropdown-menu.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 import { cn } from '@/vdb/lib/utils.js';
 import { EllipsisVertical, CircleDashed, CircleCheck, CircleX } from 'lucide-react';
 

package/src/app/routes/_authenticated/_orders/components/use-transition-order-to-state.tsx

@@ -10,7 +10,7 @@ import {
 } from '@/vdb/components/ui/dialog.js';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/vdb/components/ui/select.js';
 import { api } from '@/vdb/graphql/api.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 import { useMutation, useQuery } from '@tanstack/react-query';
 import { ResultOf } from 'gql.tada';
 import { useState } from 'react';
@@ -22,7 +22,8 @@ import { orderHistoryDocument, transitionOrderToStateDocument } from '../orders.
  */
 export function useTransitionOrderToState(orderId: string | undefined) {
     const [selectStateOpen, setSelectStateOpen] = useState(false);
-    const [onSuccessFn, setOnSuccessFn] = useState<() => void>(() => {});
+    const [onSuccessFn, setOnSuccessFn] = useState<() => void>(() => {
+    });
     const { data, isLoading, error } = useQuery({
         queryKey: ['orderPreModifyingState', orderId],
         queryFn: async () => {

package/src/app/routes/_authenticated/_orders/orders.tsx

@@ -10,7 +10,7 @@ import { ListPage } from '@/vdb/framework/page/list-page.js';
 import { api } from '@/vdb/graphql/api.js';
 import { ResultOf } from '@/vdb/graphql/graphql.js';
 import { useServerConfig } from '@/vdb/hooks/use-server-config.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans, useLingui } from '@lingui/react/macro';
 import { useMutation } from '@tanstack/react-query';
 import { createFileRoute, useNavigate } from '@tanstack/react-router';
 import { PlusIcon } from 'lucide-react';
@@ -24,6 +24,7 @@ export const Route = createFileRoute('/_authenticated/_orders/orders')({
 function OrderListPage() {
     const serverConfig = useServerConfig();
     const navigate = useNavigate();
+    const { t } = useLingui();
     const { mutate: createDraftOrder } = useMutation({
         mutationFn: api.mutate(createDraftOrderDocument),
         onSuccess: (result: ResultOf<typeof createDraftOrderDocument>) => {
@@ -33,7 +34,7 @@ function OrderListPage() {
     return (
         <ListPage
             pageId="order-list"
-            title="Orders"
+            title={<Trans>Orders</Trans>}
             onSearchTermChange={searchTerm => {
                 return {
                     _or: [
@@ -60,19 +61,15 @@ function OrderListPage() {
             route={Route}
             customizeColumns={{
                 total: {
-                    header: 'Total',
                     cell: OrderMoneyCell,
                 },
                 totalWithTax: {
-                    header: 'Total with Tax',
                     cell: OrderMoneyCell,
                 },
                 state: {
-                    header: 'State',
                     cell: OrderStateCell,
                 },
                 code: {
-                    header: 'Code',
                     cell: ({ cell, row }) => {
                         const value = cell.getValue() as string;
                         const id = row.original.id;
@@ -80,11 +77,10 @@ function OrderListPage() {
                     },
                 },
                 customer: {
-                    header: 'Customer',
                     cell: CustomerCell,
                 },
                 shippingLines: {
-                    header: 'Shipping',
+                    header: () => <Trans>Shipping</Trans>,
                     cell: ({ row }) => {
                         const value = row.original.shippingLines;
                         return <div>{value.map(line => line.shippingMethod.name).join(', ')}</div>;
@@ -100,7 +96,7 @@ function OrderListPage() {
             }}
             facetedFilters={{
                 state: {
-                    title: 'State',
+                    title: t`State`,
                     options:
                         serverConfig?.orderProcess.map(state => {
                             return {

package/src/app/routes/_authenticated/_orders/orders_.$aggregateOrderId_.seller-orders.$sellerOrderId.tsx

@@ -1,7 +1,7 @@
 import { ErrorPage } from '@/vdb/components/shared/error-page.js';
 import { Badge } from '@/vdb/components/ui/badge.js';
 import { Button } from '@/vdb/components/ui/button.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 import { createFileRoute, Link } from '@tanstack/react-router';
 import { ArrowLeft } from 'lucide-react';
 import { OrderDetail, OrderDetailShared } from './components/order-detail-shared.js';

package/src/app/routes/_authenticated/_orders/orders_.$id.tsx

@@ -1,6 +1,6 @@
 import { ErrorPage } from '@/vdb/components/shared/error-page.js';
 import { PageBlock } from '@/vdb/framework/layout-engine/page-layout.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 import { createFileRoute } from '@tanstack/react-router';
 import { OrderDetailShared } from './components/order-detail-shared.js';
 import { SellerOrdersCard } from './components/seller-orders-card.js';

package/src/app/routes/_authenticated/_orders/orders_.$id_.modify.tsx

@@ -10,7 +10,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 { useQuery, useQueryClient } from '@tanstack/react-query';
 import { createFileRoute, Link, useNavigate } from '@tanstack/react-router';
 import { VariablesOf } from 'gql.tada';
@@ -71,7 +71,7 @@ type ProductVariantInfo = {
 function ModifyOrderPage() {
     const params = Route.useParams();
     const navigate = useNavigate({ from: '/orders/$id/modify' });
-    const { i18n } = useLingui();
+    const { t } = useLingui();
     const queryClient = useQueryClient();
     const { form, submitHandler, entity } = useDetailPage({
         pageId,
@@ -84,11 +84,11 @@ function ModifyOrderPage() {
         },
         params: { id: params.id },
         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',
             });
         },

package/src/app/routes/_authenticated/_orders/orders_.draft.$id.tsx

@@ -17,7 +17,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 { useMutation, useQuery } from '@tanstack/react-query';
 import { createFileRoute, Link, useNavigate } from '@tanstack/react-router';
 import { ResultOf } from 'gql.tada';
@@ -54,7 +54,7 @@ export const Route = createFileRoute('/_authenticated/_orders/orders_/draft/$id'
 
 function DraftOrderPage() {
     const params = Route.useParams();
-    const { i18n } = useLingui();
+    const { t } = useLingui();
     const navigate = useNavigate();
 
     const { entity, refreshEntity, form } = useDetailPage({
@@ -102,7 +102,7 @@ function DraftOrderPage() {
             const order = result.addItemToDraftOrder;
             switch (order.__typename) {
                 case 'Order':
-                    toast.success(i18n.t('Item added to order'));
+                    toast.success(t`Item added to order`);
                     refreshEntity();
                     break;
                 default:
@@ -118,7 +118,7 @@ function DraftOrderPage() {
             const order = result.adjustDraftOrderLine;
             switch (order.__typename) {
                 case 'Order':
-                    toast.success(i18n.t('Order line updated'));
+                    toast.success(t`Order line updated`);
                     refreshEntity();
                     break;
                 default:
@@ -134,7 +134,7 @@ function DraftOrderPage() {
             const order = result.removeDraftOrderLine;
             switch (order.__typename) {
                 case 'Order':
-                    toast.success(i18n.t('Order line removed'));
+                    toast.success(t`Order line removed`);
                     refreshEntity();
                     break;
                 default:
@@ -150,7 +150,7 @@ function DraftOrderPage() {
             const order = result.setCustomerForDraftOrder;
             switch (order.__typename) {
                 case 'Order':
-                    toast.success(i18n.t('Customer set for order'));
+                    toast.success(t`Customer set for order`);
                     refreshEntity();
                     break;
                 default:
@@ -163,7 +163,7 @@ function DraftOrderPage() {
     const { mutate: setShippingAddressForDraftOrder } = useMutation({
         mutationFn: api.mutate(setShippingAddressForDraftOrderDocument),
         onSuccess: (result: ResultOf<typeof setShippingAddressForDraftOrderDocument>) => {
-            toast.success(i18n.t('Shipping address set for order'));
+            toast.success(t`Shipping address set for order`);
             refreshEntity();
         },
     });
@@ -171,7 +171,7 @@ function DraftOrderPage() {
     const { mutate: setBillingAddressForDraftOrder } = useMutation({
         mutationFn: api.mutate(setBillingAddressForDraftOrderDocument),
         onSuccess: (result: ResultOf<typeof setBillingAddressForDraftOrderDocument>) => {
-            toast.success(i18n.t('Billing address set for order'));
+            toast.success(t`Billing address set for order`);
             refreshEntity();
         },
     });
@@ -179,7 +179,7 @@ function DraftOrderPage() {
     const { mutate: unsetShippingAddressForDraftOrder } = useMutation({
         mutationFn: api.mutate(unsetShippingAddressForDraftOrderDocument),
         onSuccess: (result: ResultOf<typeof unsetShippingAddressForDraftOrderDocument>) => {
-            toast.success(i18n.t('Shipping address unset for order'));
+            toast.success(t`Shipping address unset for order`);
             refreshEntity();
         },
     });
@@ -187,7 +187,7 @@ function DraftOrderPage() {
     const { mutate: unsetBillingAddressForDraftOrder } = useMutation({
         mutationFn: api.mutate(unsetBillingAddressForDraftOrderDocument),
         onSuccess: (result: ResultOf<typeof unsetBillingAddressForDraftOrderDocument>) => {
-            toast.success(i18n.t('Billing address unset for order'));
+            toast.success(t`Billing address unset for order`);
             refreshEntity();
         },
     });
@@ -198,7 +198,7 @@ function DraftOrderPage() {
             const order = result.setDraftOrderShippingMethod;
             switch (order.__typename) {
                 case 'Order':
-                    toast.success(i18n.t('Shipping method set for order'));
+                    toast.success(t`Shipping method set for order`);
                     refreshEntity();
                     break;
                 default:
@@ -214,7 +214,7 @@ function DraftOrderPage() {
             const order = result.applyCouponCodeToDraftOrder;
             switch (order.__typename) {
                 case 'Order':
-                    toast.success(i18n.t('Coupon code set for order'));
+                    toast.success(t`Coupon code set for order`);
                     refreshEntity();
                     break;
                 default:
@@ -227,7 +227,7 @@ function DraftOrderPage() {
     const { mutate: removeCouponCodeForDraftOrder } = useMutation({
         mutationFn: api.mutate(removeCouponCodeFromDraftOrderDocument),
         onSuccess: (result: ResultOf<typeof removeCouponCodeFromDraftOrderDocument>) => {
-            toast.success(i18n.t('Coupon code removed from order'));
+            toast.success(t`Coupon code removed from order`);
             refreshEntity();
         },
     });
@@ -238,7 +238,7 @@ function DraftOrderPage() {
             const order = result.transitionOrderToState;
             switch (order?.__typename) {
                 case 'Order':
-                    toast.success(i18n.t('Draft order completed'));
+                    toast.success(t`Draft order completed`);
                     refreshEntity();
                     setTimeout(() => {
                         navigate({ to: `/orders/$id`, params: { id: order.id } });
@@ -255,7 +255,7 @@ function DraftOrderPage() {
         mutationFn: api.mutate(deleteDraftOrderDocument),
         onSuccess: (result: ResultOf<typeof deleteDraftOrderDocument>) => {
             if (result.deleteDraftOrder.result === 'DELETED') {
-                toast.success(i18n.t('Draft order deleted'));
+                toast.success(t`Draft order deleted`);
                 navigate({ to: '/orders' });
             } else {
                 toast.error(result.deleteDraftOrder.message);
@@ -283,8 +283,8 @@ function DraftOrderPage() {
                 <PageActionBarRight>
                     <PermissionGuard requires={['DeleteOrder']}>
                         <ConfirmationDialog
-                            title={i18n.t('Delete draft order')}
-                            description={i18n.t('Are you sure you want to delete this draft order?')}
+                            title={t`Delete draft order`}
+                            description={t`Are you sure you want to delete this draft order?`}
                             onConfirm={() => {
                                 deleteDraftOrder({ orderId: entity.id });
                             }}

package/src/app/routes/_authenticated/_orders/utils/order-detail-loaders.tsx

@@ -1,7 +1,7 @@
 import { addCustomFields } from '@/vdb/framework/document-introspection/add-custom-fields.js';
 import { getDetailQueryOptions } from '@/vdb/framework/page/use-detail-page.js';
 import { ResultOf } from '@/vdb/graphql/graphql.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 import { redirect } from '@tanstack/react-router';
 import { OrderDetail } from '../components/order-detail-shared.js';
 import { orderDetailDocument } from '../orders.graphql.js';