Publish 2025-08-01

Author: alexanderby

elements/pay-tiers.js

@@ -100,20 +100,18 @@ function currencyButton(currency, flagCls) {
 }
 
 const today = new Date();
-const usDate = today.toLocaleDateString('en-US', { month: 'long', day: 'numeric' });
-const deDate = today.toLocaleDateString('de', { month: 'long', day: 'numeric' });
-const frDate = today.toLocaleDateString('fr', { month: 'long', day: 'numeric' });
+/** @type {(locale: string) => string} */
+const formatDate = (locale) => today.toLocaleDateString(locale, { month: 'long', day: 'numeric' });
 
-
-const takeCareMsg = [
-    `Today is <strong>${usDate}</strong>, and we're kindly asking you to complete the payment to keep Dark Reader going.`,
+const takeCareMsgEnUS = [
+    `Today is <strong>${formatDate('en-US')}</strong>, and we're kindly asking you to complete the payment to keep Dark Reader going.`,
     `For <strong>over 10 years</strong>, Dark Reader has helped millions of people with migraines, photophobia, and light sensitivity.`,
     `Please <strong>make a payment now</strong> or soon after trying the app.`,
     `Take part in spreading dark mode across the internet and help making the web easier on everyone's eyes.`,
 ].join(' ');
 
 const locales = {
-    cn: {
+    'zh-CN': {
         heading: '支付 Dark Reader 使用费',
         heading_short: '使用费',
         regular: '个人使用',
@@ -136,7 +134,7 @@ const locales = {
         price_per_user: 'Preis pro Benutzer',
         pay: 'Zahlen',
         we_take_care: [
-            `Heute ist <strong>${deDate}</strong>, und wir bitten Sie höflich, die Zahlung abzuschließen, damit Dark Reader weiterlaufen kann.`,
+            `Heute ist <strong>${formatDate('de')}</strong>, und wir bitten Sie höflich, die Zahlung abzuschließen, damit Dark Reader weiterlaufen kann.`,
             `Sei <strong>über 10 Jahren</strong>, hilft Dark Reader Millionen von Menschen mit Migräne, Photophobie und Lichtempfindlichkeit.`,
             `Bitte <strong>tätigen Sie jetzt oder</strong> kurz nach dem Ausprobieren der App eine Zahlung.`,
             `Beteiligen Sie sich an der Verbreitung des Dunkelmodus im Internet und helfen Sie dabei, das Web für alle Augen angenehmer zu gestalten.`,
@@ -150,20 +148,62 @@ const locales = {
         price_per_user: 'Prix par utilisateur',
         pay: 'Payer',
         we_take_care: [
-            `Aujourd'hui c'est <strong>${frDate}</strong>, et nous vous demandons de bien vouloir effectuer le paiement pour que Dark Reader continue.`,
+            `Aujourd'hui c'est <strong>${formatDate('fr')}</strong>, et nous vous demandons de bien vouloir effectuer le paiement pour que Dark Reader continue.`,
             `Depuis <strong>plus de 10 ans</strong>, Dark Reader a aidé des millions de personnes souffrant de migraines, de photophobie et de sensibilité à la lumière.`,
             `Veuillez <strong>effectuer un paiement maintenan</strong> ou peu de temps après avoir essayé l'application..`,
             `Participez à la diffusion du mode sombre sur Internet et contribuez à rendre le Web plus agréable pour les yeux de tous.`,
         ].join(' '),
     },
+    es: {
+        heading: 'Pague por Dark Reader',
+        regular: 'Uso individual',
+        corporate: 'Organizaciones',
+        one_time: 'Pago único',
+        price_per_user: 'Precio por usuario',
+        pay: 'Pagar',
+        we_take_care: [ 
+            `Hoy es <strong>${formatDate('es')}</strong>, y te pedimos que completes el pago para que Dark Reader siga funcionando.`,
+            `For <strong>más de 10 años</strong>, Dark Reader ha ayudado a millones de personas con migrañas, fotofobia y sensibilidad a la luz.`,
+            `Por favor, <strong>realiza el pago ahora</strong> o poco después de probar la app.`,
+            `Participa en la difusión del modo oscuro en internet y ayuda a que la web sea más cómoda para todos.`,
+        ].join(' '),
+    },
+    nl: {
+        heading: 'Betaal voor Dark Reader',
+        regular: 'Individueel gebruik',
+        corporate: 'Organisaties',
+        one_time: 'Eenmalige betaling',
+        price_per_user: 'Prijs per gebruiker',
+        pay: 'Betaling',
+        we_take_care: [ 
+            `Vandaag is het <strong>${formatDate('nl')}</strong>, en we vragen u vriendelijk om de betaling te voltooien om Dark Reader te kunnen blijven gebruiken.`,
+            `Dark Reader helpt <strong>al meer dan 10 jaar</strong>, miljoenen mensen met migraine, fotofobie en lichtgevoeligheid.`,
+            `Doe nu of kort na het uitproberen van de app een betaling.`,
+            `Doe mee aan de verspreiding van de donkere modus op internet en help het web prettiger te maken voor iedereen.`,
+        ].join(' '),
+    },
+    ja: {
+        heading: 'Dark Reader の料金を支払う',
+        regular: '個人使用',
+        corporate: '組織',
+        one_time: '1回限りの支払い',
+        price_per_user: 'ユーザーあたりの価格',
+        pay: '支払う',
+        we_take_care: [ 
+            `今日は <strong>${formatDate('ja')}</strong>, Dark Readerを継続するために、お支払いを完了していただきますようお願いいたします。`,
+            `Dark Readerは10年以上にわたり、片頭痛、羞明、光過敏症に悩む何百万人もの方々を支援してきました。`,
+            `今すぐ、またはアプリをお試しいただいた後すぐにお支払いください。`,
+            `インターネット上でダークモードを広め、皆様の目に優しいウェブ環境づくりにご協力ください。`,
+        ].join(' '),
+    },
 };
 
 const htmlText = `
 <section class="pr">
     <div class="pr-wrapper">
         <h2 class="pr-heading" data-text="heading">Please pay for <span class="pr-heading__darkreader">Dark Reader</span></h2>
         <div class="pr-description" data-text="we_take_care">
-            ${takeCareMsg}
+            ${takeCareMsgEnUS}
         </div>
         <section class="payment-wrapper">
             <div class="currencies">
@@ -903,19 +943,13 @@ class PayTiersElement extends HTMLElement {
         update();
 
         if (document.documentElement.lang === 'zh-CN') {
-            Object.entries(locales.cn).forEach(([key, text]) => {
-                s(`[data-text="${key}"]`).each((node) => node.textContent = text);
-            });
             s('.js-card-icon').each((node) => node.classList.add('button-link__card-icon--cn'));
-        } else if (document.documentElement.lang === 'de') {
-            Object.entries(locales.de).forEach(([key, text]) => {
-                s(`[data-text="${key}"]`).each((node) => node.innerHTML = text);
-            });
-        } else if (document.documentElement.lang === 'fr') {
-            Object.entries(locales.fr).forEach(([key, text]) => {
+        }
+        const lang = document.documentElement.lang;
+        if (Object.keys(locales).includes(lang)) {
+            Object.entries(locales[lang]).forEach(([key, text]) => {
                 s(`[data-text="${key}"]`).each((node) => node.innerHTML = text);
             });
-            
         }
 
         if (PADDLE_MODE) {