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

package/src/app/routes/_authenticated/_tax-rates/tax-rates_.$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 { createTaxRateDocument, taxRateDetailDocument, updateTaxRateDocument } from './tax-rates.graphql.js';
@@ -46,7 +46,7 @@ function TaxRateDetailPage() {
     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,
@@ -67,14 +67,16 @@ function TaxRateDetailPage() {
         },
         params: { id: params.id },
         onSuccess: async data => {
-            toast.success(i18n.t(creatingNewEntity ? 'Successfully created tax rate' : 'Successfully updated tax rate'));
+            toast.success(
+                creatingNewEntity ? t`Successfully created tax rate` : t`Successfully updated tax rate`,
+            );
             resetForm();
             if (creatingNewEntity) {
                 await navigate({ to: `../$id`, params: { id: data.id } });
             }
         },
         onError: err => {
-            toast.error(i18n.t(creatingNewEntity ? 'Failed to create tax rate' : 'Failed to update tax rate'), {
+            toast.error(creatingNewEntity ? t`Failed to create tax rate` : t`Failed to update tax rate`, {
                 description: err instanceof Error ? err.message : 'Unknown error',
             });
         },

package/src/app/routes/_authenticated/_zones/zones.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, useLingui } from '@lingui/react/macro';
 import { createFileRoute, Link } from '@tanstack/react-router';
 import { PlusIcon } from 'lucide-react';
 import { DeleteZonesBulkAction } from './components/zone-bulk-actions.js';
@@ -16,24 +16,24 @@ export const Route = createFileRoute('/_authenticated/_zones/zones')({
 });
 
 function ZoneListPage() {
+    const { t } = useLingui();
     return (
         <ListPage
             pageId="zone-list"
             listQuery={zoneListQuery}
             route={Route}
-            title="Zones"
+            title={<Trans>Zones</Trans>}
             defaultVisibility={{
                 name: true,
             }}
             customizeColumns={{
                 name: {
-                    header: 'Name',
                     cell: ({ row }) => <DetailPageButton id={row.original.id} label={row.original.name} />,
                 },
             }}
             additionalColumns={{
                 regions: {
-                    header: 'Regions',
+                    header: t`Regions`,
                     cell: ({ row }) => (
                         <ZoneCountriesSheet zoneId={row.original.id} zoneName={row.original.name}>
                             <Trans>Edit members</Trans>

package/src/app/routes/_authenticated/_zones/zones_.$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 { ZoneCountriesTable } from './components/zone-countries-table.js';
@@ -30,7 +30,10 @@ export const Route = createFileRoute('/_authenticated/_zones/zones_/$id')({
         pageId,
         queryDocument: zoneDetailDocument,
         breadcrumb(isNew, entity) {
-            return [{ path: '/zones', label: <Trans>Zones</Trans> }, isNew ? <Trans>New zone</Trans> : entity?.name];
+            return [
+                { path: '/zones', label: <Trans>Zones</Trans> },
+                isNew ? <Trans>New zone</Trans> : entity?.name,
+            ];
         },
     }),
     errorComponent: ({ error }) => <ErrorPage message={error.message} />,
@@ -40,7 +43,7 @@ function ZoneDetailPage() {
     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,
@@ -56,14 +59,14 @@ function ZoneDetailPage() {
         },
         params: { id: params.id },
         onSuccess: async data => {
-            toast.success(i18n.t(creatingNewEntity ? 'Successfully created zone' : 'Successfully updated zone'));
+            toast.success(creatingNewEntity ? t`Successfully created zone` : t`Successfully updated zone`);
             resetForm();
             if (creatingNewEntity) {
                 await navigate({ to: `../$id`, params: { id: data.id } });
             }
         },
         onError: err => {
-            toast.error(i18n.t(creatingNewEntity ? 'Failed to create zone' : 'Failed to update zone'), {
+            toast.error(creatingNewEntity ? t`Failed to create zone` : t`Failed to update zone`, {
                 description: err instanceof Error ? err.message : 'Unknown error',
             });
         },

package/src/app/routes/_authenticated/index.tsx

@@ -23,6 +23,7 @@ import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
 import { createFileRoute } from '@tanstack/react-router';
 import { endOfDay, startOfMonth } from 'date-fns';
 import { useEffect, useRef, useState } from 'react';
+import { Trans, useLingui } from '@lingui/react/macro';
 
 export const Route = createFileRoute('/_authenticated/')({
     component: DashboardPage,
@@ -73,6 +74,7 @@ function DashboardPage() {
     const [editMode, setEditMode] = useState(false);
     const [isInitialized, setIsInitialized] = useState(false);
     const prevEditModeRef = useRef(editMode);
+    const { t } = useLingui();
     const [dateRange, setDateRange] = useState<DefinedDateRange>({
         from: startOfMonth(new Date()),
         to: endOfDay(new Date()),
@@ -175,7 +177,9 @@ function DashboardPage() {
 
     return (
         <Page pageId="insights">
-            <PageTitle>Insights</PageTitle>
+            <PageTitle>
+                <Trans>Insights</Trans>
+            </PageTitle>
             <PageActionBar>
                 <PageActionBarRight>
                     <DateRangePicker
@@ -187,7 +191,7 @@ function DashboardPage() {
                         variant={editMode ? 'default' : 'outline'}
                         onClick={() => setEditMode(prev => !prev)}
                     >
-                        {editMode ? 'Save Layout' : 'Edit Layout'}
+                        {editMode ? t`Save Layout` : t`Edit Layout`}
                     </Button>
                 </PageActionBarRight>
             </PageActionBar>

package/src/app/styles.css

@@ -2,6 +2,10 @@
 @import 'tailwindcss';
 @import 'tw-animate-css';
 
+html[dir="rtl"] * {
+    direction: rtl;
+}
+
 @custom-variant dark (&:is(.dark *));
 
 /* @source rules from extensions will be added here by the dashboardTailwindSourcePlugin */

package/src/i18n/common-strings.ts

@@ -0,0 +1,111 @@
+/**
+ * These are strings that are not defined as string literals in the code (and therefore won't
+ * get extracted), but still need to have translations
+ */
+const commonI18nString = {
+    fulfillmentState: [
+        /* i18n*/ 'fulfillmentState.Created',
+        /* i18n*/ 'fulfillmentState.Pending',
+        /* i18n*/ 'fulfillmentState.Cancelled',
+        /* i18n*/ 'fulfillmentState.Shipped',
+        /* i18n*/ 'fulfillmentState.Delivered',
+        /* i18n*/ 'fulfillmentState.Cancelled',
+    ],
+    paymentState: [
+        /* i18n*/ 'paymentState.Created',
+        /* i18n*/ 'paymentState.Authorized',
+        /* i18n*/ 'paymentState.Settled',
+        /* i18n*/ 'paymentState.Declined',
+        /* i18n*/ 'paymentState.Error',
+        /* i18n*/ 'paymentState.Cancelled',
+    ],
+    refundState: [
+        /* i18n*/ 'paymentState.Pending',
+        /* i18n*/ 'paymentState.Settled',
+        /* i18n*/ 'paymentState.Failed',
+    ],
+    orderState: [
+        /* i18n*/ 'orderState.Created',
+        /* i18n*/ 'orderState.Draft',
+        /* i18n*/ 'orderState.AddingItems',
+        /* i18n*/ 'orderState.Cancelled',
+        /* i18n*/ 'orderState.ArrangingPayment',
+        /* i18n*/ 'orderState.PaymentAuthorized',
+        /* i18n*/ 'orderState.PaymentSettled',
+        /* i18n*/ 'orderState.PartiallyShipped',
+        /* i18n*/ 'orderState.Shipped',
+        /* i18n*/ 'orderState.PartiallyDelivered',
+        /* i18n*/ 'orderState.Delivered',
+        /* i18n*/ 'orderState.Modifying',
+        /* i18n*/ 'orderState.ArrangingAdditionalPayment',
+    ],
+    fieldName: [
+        /* i18n*/ 'fieldName.attempts',
+        /* i18n*/ 'fieldName.availableCurrencyCodes',
+        /* i18n*/ 'fieldName.availableLanguageCodes',
+        /* i18n*/ 'fieldName.breadcrumbs',
+        /* i18n*/ 'fieldName.category',
+        /* i18n*/ 'fieldName.channels',
+        /* i18n*/ 'fieldName.children',
+        /* i18n*/ 'fieldName.code',
+        /* i18n*/ 'fieldName.couponCode',
+        /* i18n*/ 'fieldName.createdAt',
+        /* i18n*/ 'fieldName.currencyCode',
+        /* i18n*/ 'fieldName.customer',
+        /* i18n*/ 'fieldName.customerGroup',
+        /* i18n*/ 'fieldName.customers',
+        /* i18n*/ 'fieldName.customFields',
+        /* i18n*/ 'fieldName.data',
+        /* i18n*/ 'fieldName.defaultCurrencyCode',
+        /* i18n*/ 'fieldName.defaultLanguageCode',
+        /* i18n*/ 'fieldName.defaultShippingZone',
+        /* i18n*/ 'fieldName.defaultTaxZone',
+        /* i18n*/ 'fieldName.description',
+        /* i18n*/ 'fieldName.duration',
+        /* i18n*/ 'fieldName.emailAddress',
+        /* i18n*/ 'fieldName.enabled',
+        /* i18n*/ 'fieldName.endsAt',
+        /* i18n*/ 'fieldName.error',
+        /* i18n*/ 'fieldName.featuredAsset',
+        /* i18n*/ 'fieldName.firstName',
+        /* i18n*/ 'fieldName.fulfillmentHandlerCode',
+        /* i18n*/ 'fieldName.id',
+        /* i18n*/ 'fieldName.isDefault',
+        /* i18n*/ 'fieldName.isPrivate',
+        /* i18n*/ 'fieldName.isSettled',
+        /* i18n*/ 'fieldName.lastName',
+        /* i18n*/ 'fieldName.name',
+        /* i18n*/ 'fieldName.orderPlacedAt',
+        /* i18n*/ 'fieldName.parentId',
+        /* i18n*/ 'fieldName.perCustomerUsageLimit',
+        /* i18n*/ 'fieldName.permissions',
+        /* i18n*/ 'fieldName.position',
+        /* i18n*/ 'fieldName.price',
+        /* i18n*/ 'fieldName.priceWithTax',
+        /* i18n*/ 'fieldName.pricesIncludeTax',
+        /* i18n*/ 'fieldName.productVariants',
+        /* i18n*/ 'fieldName.progress',
+        /* i18n*/ 'fieldName.queueName',
+        /* i18n*/ 'fieldName.result',
+        /* i18n*/ 'fieldName.retries',
+        /* i18n*/ 'fieldName.seller',
+        /* i18n*/ 'fieldName.settledAt',
+        /* i18n*/ 'fieldName.shippingLines',
+        /* i18n*/ 'fieldName.sku',
+        /* i18n*/ 'fieldName.slug',
+        /* i18n*/ 'fieldName.startedAt',
+        /* i18n*/ 'fieldName.startsAt',
+        /* i18n*/ 'fieldName.state',
+        /* i18n*/ 'fieldName.stockLevels',
+        /* i18n*/ 'fieldName.token',
+        /* i18n*/ 'fieldName.total',
+        /* i18n*/ 'fieldName.totalWithTax',
+        /* i18n*/ 'fieldName.type',
+        /* i18n*/ 'fieldName.updatedAt',
+        /* i18n*/ 'fieldName.usageLimit',
+        /* i18n*/ 'fieldName.user',
+        /* i18n*/ 'fieldName.value',
+        /* i18n*/ 'fieldName.valueList',
+        /* i18n*/ 'fieldName.zone',
+    ],
+};