i18n for custom menu items; fix persian translation loading; etke.cc billing translations

Author: aine-etke

docs/custom-menu.md

@@ -9,10 +9,11 @@ The examples below contain the configuration settings to add a link to the [Syna
 
 Each `menu` item can contain the following fields:
 
+* `url` (required): The URL to navigate to when the menu item is clicked.
 * `label` (required): The text to display in the menu.
+* `i18n` (optional): Dictionary of translations for the label. The keys should be [BCP 47 language tags](https://en.wikipedia.org/wiki/IETF_language_tag) (e.g., `en`, `fr`, `de`) supported by Synapse Admin (see [src/i18n/](../src/i18n)).
 * `icon` (optional): The icon to display next to the label, one of the [src/utils/icons.ts](../src/utils/icons.ts) icons, otherwise a
 default icon will be used.
-* `url` (required): The URL to navigate to when the menu item is clicked.
 
 [Configuration options](config.md)
 
@@ -23,6 +24,11 @@ default icon will be used.
   "menu": [
     {
       "label": "Contact support",
+      "i18n": {
+        "de": "Support kontaktieren",
+        "fr": "Contacter le support",
+        "zh": "联系支持"
+      },
       "icon": "SupportAgent",
       "url": "https://github.com/etkecc/synapse-admin/issues"
     }
@@ -38,6 +44,11 @@ default icon will be used.
     "menu": [
       {
         "label": "Contact support",
+        "i18n": {
+          "de": "Support kontaktieren",
+          "fr": "Contacter le support",
+          "zh": "联系支持"
+        },
         "icon": "SupportAgent",
         "url": "https://github.com/etkecc/synapse-admin/issues"
       }

public/config.json

@@ -1 +1,11 @@
-{}
+{
+  "menu": [
+    {
+      "label": "Test",
+      "url": "/test",
+      "i18n": {
+        "ru": "Тест"
+      }
+    }
+  ]
+}

src/App.tsx

@@ -17,6 +17,7 @@ import ScheduledCommandShow from "./components/etke.cc/schedules/components/sche
 import UserImport from "./components/user-import/UserImport";
 import germanMessages from "./i18n/de";
 import englishMessages from "./i18n/en";
+import persianMessages from "./i18n/fa";
 import frenchMessages from "./i18n/fr";
 import italianMessages from "./i18n/it";
 import japaneseMessages from "./i18n/ja";
@@ -38,6 +39,7 @@ import dataProvider from "./synapse/dataProvider";
 const messages = {
   de: germanMessages,
   en: englishMessages,
+  fa: persianMessages,
   fr: frenchMessages,
   it: italianMessages,
   ja: japaneseMessages,

src/components/AdminLayout.tsx

@@ -14,6 +14,7 @@ import {
   UserMenu,
   useStore,
   useLocaleState,
+  useLocale,
 } from "react-admin";
 
 import Footer from "./Footer";
@@ -83,6 +84,7 @@ const AdminAppBar = () => {
 };
 
 const AdminMenu = props => {
+  const locale = useLocale();
   const [menu, setMenu] = useState([] as MenuItem[]);
   const icfg = GetInstanceConfig();
   const [etkeRoutesEnabled, setEtkeRoutesEnabled] = useState(false);
@@ -131,20 +133,25 @@ const AdminMenu = props => {
       )}
       <Menu.ResourceItems />
       {etkeRoutesEnabled && !icfg.disabled.payments && (
-        <Menu.Item key="billing" to="/billing" leftIcon={<PaymentIcon />} primaryText="Billing" />
+        <Menu.Item key="billing" to="/billing" leftIcon={<PaymentIcon />} primaryText="etkecc.billing.name" />
       )}
       {menu &&
         menu.map((item, index) => {
-          const { url, icon, label } = item;
+          const { url, icon, label, i18n } = item;
           /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
           const IconComponent = Icons[icon] as React.ComponentType<any> | undefined;
 
+          let primaryText = label;
+          if (i18n && i18n[locale]) {
+            primaryText = i18n[locale];
+          }
+
           return (
             <Suspense key={index}>
               <Menu.Item
                 to={url}
                 target="_blank"
-                primaryText={label}
+                primaryText={primaryText}
                 leftIcon={IconComponent ? <IconComponent /> : <DefaultIcon />}
                 onClick={props.onMenuClick}
               />

src/components/etke.cc/BillingPage.tsx

@@ -19,7 +19,7 @@ import {
 import { Stack } from "@mui/material";
 import IconButton from "@mui/material/IconButton";
 import { useState, useEffect } from "react";
-import { useDataProvider, useLocale, useNotify } from "react-admin";
+import { useDataProvider, useLocale, useNotify, useTranslate } from "react-admin";
 
 import { EtkeAttribution } from "./EtkeAttribution";
 import { useAppContext } from "../../Context";
@@ -46,6 +46,7 @@ const BillingPage = () => {
   const dataProvider = useDataProvider() as SynapseDataProvider;
   const notify = useNotify();
   const locale = useLocale();
+  const translate = useTranslate();
   const [paymentsData, setPaymentsData] = useState<Payment[]>([]);
   const [loading, setLoading] = useState(true);
   const [maintenance, setMaintenance] = useState(false);
@@ -78,7 +79,7 @@ const BillingPage = () => {
     try {
       setDownloadingInvoice(transactionId);
       await dataProvider.getInvoice(etkeccAdmin, transactionId);
-      notify("Invoice download started", { type: "info" });
+      notify("etkecc.billing.helper.download_started", { type: "info" });
     } catch (error) {
       // Use the specific error message from the dataProvider
       const errorMessage = error instanceof Error ? error.message : "Error downloading invoice";
@@ -92,20 +93,19 @@ const BillingPage = () => {
   const header = (
     <Box>
       <Typography variant="h4">
-        <PaymentIcon sx={{ verticalAlign: "middle", mr: 1 }} /> Billing
+        <PaymentIcon sx={{ verticalAlign: "middle", mr: 1 }} /> {translate("etkecc.billing.name")}
       </Typography>
-      <Typography variant="body1">View payments and generate invoices from here.</Typography>
       <EtkeAttribution>
         <Typography variant="body1">
-          View payments and generate invoices from here. More details about billing can be found{" "}
-          <Link href="https://etke.cc/help/extras/scheduler/#payments" target="_blank">
-            here
+          {translate("etkecc.billing.description1")}{" "}
+          <Link href="https://etke.cc/help/payments/" target="_blank">
+            etke.cc/help/payments
           </Link>
           .
           <br />
-          If you'd like to change your billing email, or add company details, please{" "}
+          {translate("etkecc.billing.description2")}{" "}
           <Link href="https://etke.cc/contacts/" target="_blank">
-            contact etke.cc support
+            etke.cc/contacts
           </Link>
           .
         </Typography>
@@ -118,7 +118,7 @@ const BillingPage = () => {
       <Stack spacing={3} mt={3}>
         {header}
         <Box sx={{ mt: 3 }}>
-          <Typography>Loading billing information...</Typography>
+          <Typography>{translate("etkecc.billing.helper.loading")}</Typography>
         </Box>
       </Stack>
     );
@@ -130,18 +130,18 @@ const BillingPage = () => {
         {header}
         <Box sx={{ mt: 3 }}>
           <Typography>
-            There was a problem loading your billing information.
+            {translate("etkecc.billing.helper.loading_failed1")}
             <br />
-            This might be a temporary issue - please try again in a few minutes.
+            {translate("etkecc.billing.helper.loading_failed2")}
             <br />
           </Typography>
           <EtkeAttribution>
             <Typography>
-              If it persists, contact{" "}
+              {translate("etkecc.billing.helper.loading_failed3")}{" "}
               <Link href="https://etke.cc/contacts/" target="_blank">
-                etke.cc support team
+                etke.cc/contacts
               </Link>{" "}
-              with the following error message:
+              {translate("etkecc.billing.helper.loading_failed4")}
             </Typography>
           </EtkeAttribution>
           <Typography variant="body2" color="error" sx={{ mt: 1 }}>
@@ -158,11 +158,11 @@ const BillingPage = () => {
         {header}
         <Box sx={{ mt: 3 }}>
           <Alert severity="info">
-            The system is currently in maintenance mode.
+            {translate("etkecc.maintenance.title")}
             <br />
-            Please try again later.
+            {translate("etkecc.maintenance.try_again")}
             <br />
-            You don't need to contact support about this, we are already working on it!
+            {translate("etkecc.maintenance.note")}
           </Alert>
         </Box>
       </Stack>
@@ -174,16 +174,16 @@ const BillingPage = () => {
       {header}
       <Box sx={{ mt: 2 }}>
         <Typography variant="h5" sx={{ mb: 2 }}>
-          Payment History
+          {translate("etkecc.billing.title")}
         </Typography>
         {paymentsData.length === 0 ? (
           <Typography variant="body1">
-            No payments found.
+            {translate("etkecc.billing.no_payments")}
             <EtkeAttribution>
               <Typography>
-                If you believe that's an error, please{" "}
+                {translate("etkecc.billing.no_payments_helper")}{" "}
                 <Link href="https://etke.cc/contacts/" target="_blank">
-                  contact etke.cc support
+                  etke.cc/contacts
                 </Link>
                 .
               </Typography>
@@ -194,12 +194,12 @@ const BillingPage = () => {
             <Table>
               <TableHead>
                 <TableRow>
-                  <TableCell>Transaction ID</TableCell>
-                  <TableCell>Email</TableCell>
-                  <TableCell>Type</TableCell>
-                  <TableCell>Amount</TableCell>
-                  <TableCell>Paid At</TableCell>
-                  <TableCell>Download Invoice</TableCell>
+                  <TableCell>{translate("etkecc.billing.fields.transaction_id")}</TableCell>
+                  <TableCell>{translate("etkecc.billing.fields.email")}</TableCell>
+                  <TableCell>{translate("etkecc.billing.fields.type")}</TableCell>
+                  <TableCell>{translate("etkecc.billing.fields.amount")}</TableCell>
+                  <TableCell>{translate("etkecc.billing.fields.paid_at")}</TableCell>
+                  <TableCell>{translate("etkecc.billing.helper.download_invoice")}</TableCell>
                 </TableRow>
               </TableHead>
               <TableBody>
@@ -209,7 +209,9 @@ const BillingPage = () => {
                       <TruncatedUUID uuid={payment.transaction_id} />
                     </TableCell>
                     <TableCell>{payment.email}</TableCell>
-                    <TableCell>{payment.is_subscription ? "Subscription" : "One-time"}</TableCell>
+                    <TableCell>
+                      {translate(`etkecc.billing.enums.type.${payment.is_subscription ? "subscription" : "one_time"}`)}
+                    </TableCell>
                     <TableCell>${payment.amount.toFixed(2)}</TableCell>
                     <TableCell>{new Date(payment.paid_at).toLocaleDateString(locale)}</TableCell>
                     <TableCell>
@@ -220,7 +222,11 @@ const BillingPage = () => {
                         onClick={() => handleInvoiceDownload(payment.transaction_id)}
                         disabled={downloadingInvoice === payment.transaction_id}
                       >
-                        {downloadingInvoice === payment.transaction_id ? "Downloading..." : "Invoice"}
+                        {translate(
+                          downloadingInvoice === payment.transaction_id
+                            ? "etkecc.billing.helper.downloading"
+                            : "etkecc.billing.fields.invoice"
+                        )}
                       </Button>
                     </TableCell>
                   </TableRow>

src/i18n/de.ts

@@ -533,6 +533,48 @@ const de: SynapseTranslationMessages = {
       helper: { length: "Länge des Tokens, wenn kein Token vorgegeben wird." },
     },
   },
+  etkecc: {
+    billing: {
+      name: "Abrechnung",
+      title: "Zahlungshistorie",
+      no_payments: "Keine Zahlungen gefunden.",
+      no_payments_helper: "Wenn Sie glauben, dass das ein Fehler ist, kontaktieren Sie bitte den etke.cc-Support unter",
+      description1:
+        "Hier können Sie Zahlungen einsehen und Rechnungen erstellen. Mehr zur Verwaltung von Abonnements erfahren Sie unter",
+      description2:
+        "Wenn Sie Ihre Abrechnungs-E-Mail ändern oder Firmendaten hinzufügen möchten, kontaktieren Sie bitte den etke.cc-Support unter",
+      fields: {
+        transaction_id: "Transaktions-ID",
+        email: "E-Mail",
+        type: "Typ",
+        amount: "Betrag",
+        paid_at: "Bezahlt am",
+        invoice: "Rechnung",
+      },
+      enums: {
+        type: {
+          subscription: "Abonnement",
+          one_time: "Einmalig",
+        },
+      },
+      helper: {
+        download_invoice: "Rechnung herunterladen",
+        downloading: "Wird heruntergeladen...",
+        download_started: "Der Rechnungsdownload wurde gestartet.",
+        loading: "Abrechnungsinformationen werden geladen...",
+        loading_failed1: "Beim Laden der Abrechnungsinformationen ist ein Problem aufgetreten.",
+        loading_failed2: "Bitte versuchen Sie es später erneut.",
+        loading_failed3: "Wenn das Problem weiterhin besteht, kontaktieren Sie bitte den etke.cc-Support unter",
+        loading_failed4: "mit der folgenden Fehlermeldung:",
+      },
+    },
+    maintenance: {
+      title: "Das System befindet sich derzeit im Wartungsmodus.",
+      try_again: "Bitte versuchen Sie es später erneut.",
+      note: "Sie müssen den Support hierzu nicht kontaktieren — wir arbeiten bereits daran!",
+    },
+  },
+
   scheduled_commands: {
     action: {
       create_success: "Geplanter Befehl erfolgreich erstellt.",

src/i18n/en.ts

@@ -501,6 +501,47 @@ const en: SynapseTranslationMessages = {
       helper: { length: "Length of the token if no token is given." },
     },
   },
+  etkecc: {
+    billing: {
+      name: "Billing",
+      title: "Payment History",
+      no_payments: "No payments found.",
+      no_payments_helper: "If you believe that's an error, please contact etke.cc support on",
+      description1:
+        "View payments and generate invoices from here. You can learn more about subscription management on",
+      description2:
+        "If you'd like to change your billing email, or add company details, please contact etke.cc support on",
+      fields: {
+        transaction_id: "Transaction ID",
+        email: "Email",
+        type: "Type",
+        amount: "Amount",
+        paid_at: "Paid At",
+        invoice: "Invoice",
+      },
+      enums: {
+        type: {
+          subscription: "Subscription",
+          one_time: "One-time",
+        },
+      },
+      helper: {
+        download_invoice: "Download Invoice",
+        downloading: "Downloading...",
+        download_started: "Invoice download started.",
+        loading: "Loading billing information...",
+        loading_failed1: "There was a problem loading billing information.",
+        loading_failed2: "Please try again later.",
+        loading_failed3: "If the problem persists, please contact etke.cc support on",
+        loading_failed4: "with the following error message:",
+      },
+    },
+    maintenance: {
+      title: "The system is currently in maintenance mode.",
+      try_again: "Please try again later.",
+      note: "You don't need to contact support about this, we are already working on it!",
+    },
+  },
   scheduled_commands: {
     action: {
       create_success: "Scheduled command created successfully",