Translations feature added for documents

README.md

@@ -99,6 +99,36 @@ Sometimes you may want to set your next invoice number (for instance when you ha
 
 <b>Protip:</b> After setting change, you can always go to `Templates` to see a preview with your next invoice number.
 
+## Translation
+
+With version 0.8.0 we introduced translations for documents. You can now configure language for generated documents.
+
+**_NOTE:_** We do not support (yet) translations of frontend.
+
+You can configure language of documents using `medusa-config.js` file. Here is the example of Polish language:
+```js
+const plugins = [
+  // ... other plugins
+  {
+    resolve: `@rsc-labs/medusa-documents`,
+    options: {
+      enableUI: true,
+      documentLanguage: 'pl'
+    }
+  }
+]
+```
+
+### How to add my own translations?
+
+You have two options:
+
+- create `translation.json` under `/assets/i18n/locales/{your-language}` and create a pull requests - we will be more than happy to merge it
+
+- create `translation.json` only for local purposes. Then you need to go to `node_modules/@rsc-labs/medusa-documents/assets/i18n/locales/{your-language}` and paste there your translation file.
+
+Please remember that `documentLanguage` in `medusa-config.js`  needs to be equal to `{your-language}`.
+
 ## Q&A
 
 ### What means "We do not store documents"?

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rsc-labs/medusa-documents",
-  "version": "0.7.2",
+  "version": "0.8.0",
   "description": "Generate documents from Medusa",
   "main": "dist/index.js",
   "author": "RSC Labs (https://rsoftcon.com)",
@@ -19,10 +19,11 @@
   ],
   "scripts": {
     "clean": "cross-env ./node_modules/.bin/rimraf dist",
+    "copy-assets": "cp -rv src/assets dist/assets",
     "build": "cross-env npm run clean && npm run build:server && npm run build:admin",
     "build:server": "cross-env npm run clean && tsc -p tsconfig.json",
     "build:admin": "cross-env medusa-admin build",
-    "prepare": "cross-env NODE_ENV=production npm run build:server && medusa-admin bundle"
+    "prepare": "cross-env NODE_ENV=production npm run build:server && npm run copy-assets && medusa-admin bundle"
   },
   "dependencies": {
     "@medusajs/admin": "7.1.14",
@@ -39,7 +40,8 @@
     "@emotion/styled": "11.11.5",
     "lodash": "4.17.21",
     "pdfkit": "0.15.0",
-    "moment": "^2.30.1"
+    "moment": "^2.30.1",
+    "i18next": "23.11.4"
   },
   "devDependencies": {
     "@babel/cli": "^7.14.3",

src/assets/i18n/locales/en/translation.json

@@ -0,0 +1,26 @@
+{ 
+  "invoice": "Invoice",
+  "invoice-number": "Invoice number",
+  "invoice-date": "Invoice date",
+  "invoice-customer-details": "Details",
+  "invoice-bill-to": "Bill to",
+  "invoice-ship-to": "Ship to",
+  "invoice-table-header-item": "Item",
+  "invoice-table-header-description": "Description",
+  "invoice-table-header-unit-cost": "Unit Cost",
+  "invoice-table-header-quantity": "Quantity",
+  "invoice-table-header-line-total": "Line Total",
+  "invoice-table-shipping": "Shipping",
+  "invoice-table-tax": "Tax",
+  "invoice-table-total": "Total",
+  "packing-slip": "Packing Slip",
+  "packing-slip-bill-to": "Bill to",
+  "packing-slip-ship-to": "Ship to",
+  "packing-slip-table-header-order-number": "Order #",
+  "packing-slip-table-header-order-date": "Order date",
+  "packing-slip-table-header-shipping-method": "Shipping method",
+  "packing-slip-table-header-item": "Item",
+  "packing-slip-table-header-description": "Description",
+  "packing-slip-table-header-quantity": "Quantity",
+  "packing-slip-table-header-total": "Total"
+}

src/assets/i18n/locales/pl/translation.json

@@ -0,0 +1,26 @@
+{ 
+  "invoice": "Faktura",
+  "invoice-number": "Numer faktury",
+  "invoice-date": "Data faktury",
+  "invoice-customer-details": "Dane klienta",
+  "invoice-bill-to": "Nabywca",
+  "invoice-ship-to": "Wysyłka do",
+  "invoice-table-header-item": "Produkt",
+  "invoice-table-header-description": "Opis",
+  "invoice-table-header-unit-cost": "Cena jedn.",
+  "invoice-table-header-quantity": "Ilość",
+  "invoice-table-header-line-total": "Wartość",
+  "invoice-table-shipping": "Wysyłka",
+  "invoice-table-tax": "Podatek",
+  "invoice-table-total": "Suma",
+  "packing-slip": "List przewozowy",
+  "packing-slip-bill-to": "Nabywca",
+  "packing-slip-ship-to": "Wysyłka do",
+  "packing-slip-table-header-order-number": "Zamówienie nr",
+  "packing-slip-table-header-order-date": "Data zamówienia",
+  "packing-slip-table-header-shipping-method": "Metoda wysyłki",
+  "packing-slip-table-header-item": "Produkt",
+  "packing-slip-table-header-description": "Opis",
+  "packing-slip-table-header-quantity": "Ilość",
+  "packing-slip-table-header-total": "Suma"
+}

src/loaders/i18next.ts

@@ -0,0 +1,58 @@
+import { 
+  ConfigModule,
+  MedusaContainer,
+} from "@medusajs/medusa"
+
+import i18next  from 'i18next';
+import path from "path";
+
+export default async (
+  container: MedusaContainer,
+  config: ConfigModule
+): Promise<void> => {
+  console.info("Starting i18next loader...")
+
+  try {
+    const defaultTranslationsPath = path.resolve(__dirname, `../assets/i18n/locales/en/translation.json`);
+    const defaultTranslations = await import(defaultTranslationsPath);
+
+    await i18next
+      .init({
+        fallbackLng: 'en',
+        defaultNS: 'translation',
+        ns: 'translation',
+        resources: {
+          en: {
+            translation: defaultTranslations
+          }
+        }
+      }).catch((error) => {
+        console.error(error); 
+      });
+
+  } catch (error) {
+    console.error('Error initializing i18next:', error);
+  }
+
+
+  try {
+    const configLanguage = config['documentLanguage'];
+    if (configLanguage === undefined) {
+      console.info('Language is not configured, using "en" by default.')
+    } else {
+      console.info(`Language is configured as ${configLanguage}`)
+      const translationPath = path.resolve(__dirname, `../assets/i18n/locales/${configLanguage}/translation.json`);
+      const translations = await import(translationPath);
+      i18next.addResourceBundle(
+        configLanguage,
+        'translation',
+        translations
+      )
+      i18next.changeLanguage(configLanguage);
+    }
+  } catch {
+    console.error('Error adding language configured in config. Fallback to "en"');
+  }
+
+  console.info("Ending i18next loader...")
+}

src/services/templates/invoices/basic/basic-logo.tsx → src/services/templates/invoices/basic/basic-logo.ts

@@ -19,6 +19,7 @@ import { generateInvoiceTable } from "./parts/table";
 import { generateInvoiceInformation } from "./parts/invoice-info";
 import { generateHeaderForLogo } from "./parts/header-for-logo";
 import { generateHeaderLogo } from "./parts/header-logo";
+import path from "path";
 
 export function validateInput(settings?: DocumentSettings) : ([boolean, string]) { 
   if (settings && settings.store_address && settings.store_address.company &&
@@ -32,18 +33,22 @@ export function validateInput(settings?: DocumentSettings) : ([boolean, string])
 
 export default async (settings: DocumentSettings, invoice: Invoice, order: Order): Promise<Buffer> => { 
   var doc = new PDFDocument();
+  doc.registerFont('Regular', path.resolve(__dirname, '../../../../assets/fonts/IBMPlexSans-Regular.ttf'))
+  doc.registerFont('Bold', path.resolve(__dirname, '../../../../assets/fonts/IBMPlexSans-Bold.ttf'))
+  doc.font('Regular');
+
+  const buffers = []
+  doc.on("data", buffers.push.bind(buffers))
+
   const endHeader = generateHeaderForLogo(doc, 50, settings);
   await generateHeaderLogo(doc, 50, settings.store_logo_source);
   const endInvoice = generateInvoiceInformation(doc, endHeader, invoice);
   const endDetails = generateCustomerInformation(doc, endInvoice, order);
   generateInvoiceTable(doc, endDetails, order, order.items);
 
-  // end and display the document in the iframe to the right
   doc.end();
 
   const bufferPromise = new Promise<Buffer>(resolve => {
-    const buffers = []
-    doc.on("data", buffers.push.bind(buffers))
     doc.on("end", () => {
         const pdfData = Buffer.concat(buffers)
         resolve(pdfData)

src/services/templates/invoices/basic/basic.tsx → src/services/templates/invoices/basic/basic.ts

@@ -18,6 +18,7 @@ import { generateHeader } from "./parts/header";
 import { generateCustomerInformation } from "./parts/customer-info";
 import { generateInvoiceTable } from "./parts/table";
 import { generateInvoiceInformation } from "./parts/invoice-info";
+import path from "path";
 
 export function validateInput(settings?: DocumentSettings) : ([boolean, string]) { 
   if (settings && settings.store_address && settings.store_address.company &&
@@ -30,6 +31,13 @@ export function validateInput(settings?: DocumentSettings) : ([boolean, string])
 
 export default async (settings: DocumentSettings, invoice: Invoice, order: Order): Promise<Buffer> => { 
   var doc = new PDFDocument();
+  doc.registerFont('Regular', path.resolve(__dirname, '../../../../assets/fonts/IBMPlexSans-Regular.ttf'))
+  doc.registerFont('Bold', path.resolve(__dirname, '../../../../assets/fonts/IBMPlexSans-Bold.ttf'))
+  doc.font('Regular');
+
+  const buffers = []
+  doc.on("data", buffers.push.bind(buffers))
+
   const endHeader = generateHeader(doc, 50, settings);
   const endInvoiceInfo = generateInvoiceInformation(doc, endHeader, invoice);
   const endY = generateCustomerInformation(doc, endInvoiceInfo, order);
@@ -38,13 +46,11 @@ export default async (settings: DocumentSettings, invoice: Invoice, order: Order
   doc.end();
 
   const bufferPromise = new Promise<Buffer>(resolve => {
-    const buffers = []
-    doc.on("data", buffers.push.bind(buffers))
     doc.on("end", () => {
         const pdfData = Buffer.concat(buffers)
         resolve(pdfData)
     })
   })
-  
+
   return await bufferPromise;
 };

src/services/templates/invoices/basic/parts/customer-info.ts

@@ -12,22 +12,24 @@
 
 import { Order } from "@medusajs/medusa";
 import { generateHr } from "./hr";
+import { t } from "i18next";
 
 export function generateCustomerInformation(doc, y, order: Order) {
   doc
     .fillColor("#444444")
     .fontSize(20)
-    .text("Details", 50, y + 30);
+    .text(`${t("invoice-customer-details", "Details")}`, 50, y + 30);
 
   generateHr(doc, y + 55);
 
   const customerInformationTop = y + 70;
 
   doc
     .fontSize(10)
-    .font("Helvetica-Bold")
-    .text('Bill to:', 50, customerInformationTop, {align: 'left'})
-    .font("Helvetica")
+    .font("Bold")
+
+    .text(`${t("invoice-bill-to", "Bill to")}:`, 50, customerInformationTop, {align: 'left'})
+    .font("Regular")
     .text(`${order.billing_address.first_name} ${order.billing_address.last_name}`, 50, customerInformationTop + 15, {align: 'left'})
     .text(`${order.billing_address.city} ${order.billing_address.postal_code}`, 50, customerInformationTop + 30, {align: 'left'})
     const billAddress = order.billing_address.address_1;
@@ -37,9 +39,9 @@ export function generateCustomerInformation(doc, y, order: Order) {
 
   doc
     .fontSize(10)
-    .font("Helvetica-Bold")
-    .text('Ship to:', 50, customerInformationTop, {align: 'right'})
-    .font("Helvetica")
+    .font("Bold")
+    .text(`${t("invoice-ship-to", "Ship to")}:`, 50, customerInformationTop, {align: 'right'})
+    .font("Regular")
     .text(`${order.shipping_address.first_name} ${order.shipping_address.last_name}`, 50, customerInformationTop + 15, {align: 'right'})
     .text(`${order.shipping_address.city} ${order.shipping_address.postal_code}`, 50, customerInformationTop + 30, {align: 'right'})
     .moveDown();

src/services/templates/invoices/basic/parts/invoice-info.ts

@@ -12,24 +12,25 @@
 
 import { Invoice } from "../../../../../models/invoice";
 import { generateHr } from "./hr";
+import { t } from "i18next";
 
 export function generateInvoiceInformation(doc, y: number, invoice: Invoice) : number {
   doc
     .fillColor("#444444")
     .fontSize(20)
-    .text("Invoice", 50, y + 40);
+    .text(t("invoice", "Invoice"), 50, y + 40);
 
   generateHr(doc, y + 65);
 
   const invoiceInformationTop = y + 80;
 
   doc
     .fontSize(10)
-    .text("Invoice Number:", 50, invoiceInformationTop)
-    .font("Helvetica-Bold")
+    .text(`${t("invoice-number", "Invoice number")}:`, 50, invoiceInformationTop)
+    .font("Bold")
     .text(invoice.display_number, 150, invoiceInformationTop)
-    .font("Helvetica")
-    .text("Invoice Date:", 50, invoiceInformationTop + 15)
+    .font("Regular")
+    .text(`${t("invoice-date", "Invoice date")}:`, 50, invoiceInformationTop + 15)
     .text(invoice.created_at.toLocaleDateString(), 150, invoiceInformationTop + 15)
     .moveDown();
 

src/services/templates/invoices/basic/parts/table.ts

@@ -13,6 +13,7 @@
 import { LineItem, Order } from "@medusajs/medusa";
 import { generateHr } from "./hr";
 import { getDecimalDigits } from "../../../../utils/currency";
+import { t } from "i18next";
 
 function amountToDisplay(amount: number, currencyCode: string) : string {
   const decimalDigits = getDecimalDigits(currencyCode);
@@ -41,18 +42,18 @@ export function generateInvoiceTable(doc, y, order: Order, items: LineItem[]) {
   let i;
   const invoiceTableTop = y + 35;
 
-  doc.font("Helvetica-Bold");
+  doc.font("Bold");
   generateTableRow(
     doc,
     invoiceTableTop,
-    "Item",
-    "Description",
-    "Unit Cost",
-    "Quantity",
-    "Line Total"
+    t("invoice-table-header-item", "Item"),
+    t("invoice-table-header-description", "Description"),
+    t("invoice-table-header-unit-cost", "Unit Cost"),
+    t("invoice-table-header-quantity", "Quantity"),
+    t("invoice-table-header-line-total", "Line Total")
   );
   generateHr(doc, invoiceTableTop + 20);
-  doc.font("Helvetica");
+  doc.font("Regular");
 
   for (i = 0; i < items.length; i++) {
     const item = items[i];
@@ -76,7 +77,7 @@ export function generateInvoiceTable(doc, y, order: Order, items: LineItem[]) {
     subtotalPosition,
     "",
     "",
-    "Shipping",
+    t("invoice-table-shipping", "Shipping"),
     "",
     amountToDisplay(order.shipping_total, order.currency_code)
   );
@@ -87,21 +88,21 @@ export function generateInvoiceTable(doc, y, order: Order, items: LineItem[]) {
     taxPosition,
     "",
     "",
-    "Tax",
+    t("invoice-table-tax", "Tax"),
     "",
     amountToDisplay(order.tax_total, order.currency_code)
   );
 
   const duePosition = taxPosition + 45;
-  doc.font("Helvetica-Bold");
+  doc.font("Bold");
   generateTableRow(
     doc,
     duePosition,
     "",
     "",
-    "Total",
+    t("invoice-table-total", "Total"),
     "",
     amountToDisplay(order.total, order.currency_code)
   );
-  doc.font("Helvetica");
+  doc.font("Regular");
 }