Use wordpress i 18 n in all of our codebase [MAILPOET-4908]

mailpoet/RoboFile.php

@@ -135,6 +135,9 @@ public function translationsBuild() {
       'tools',
       'vendor',
       'vendor-prefixed',
+      'RoboFile.php',
+      '.storybook',
+      'storybook-static',
     ]);
 
     $headers = escapeshellarg(
@@ -153,7 +156,7 @@ public function translationsBuild() {
       ->taskExec("php -d memory_limit=-1 tasks/makepot/makepot-views.php . > lang/mailpoet.pot")
 
       // PHP, JS/TS
-      ->taskExec("vendor/bin/wp i18n make-pot --merge --slug=mailpoet --domain=mailpoet --exclude=$exclude --headers=$headers . lang/mailpoet.pot")
+      ->taskExec("php -d memory_limit=-1 vendor/wp-cli/wp-cli/php/boot-fs.php i18n make-pot --merge --slug=mailpoet --domain=mailpoet --exclude=$exclude --headers=$headers . lang/mailpoet.pot")
 
       ->run();
   }

mailpoet/assets/js/src/automation/automation.tsx

@@ -4,8 +4,8 @@ import { BrowserRouter } from 'react-router-dom';
 import { TopBarWithBeamer } from 'common/top_bar/top_bar';
 import { Popover, SlotFillProvider } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
+import { registerTranslations } from 'common';
 import { initializeApi } from './api';
-import { registerTranslations } from './i18n';
 import { createStore, storeName } from './listing/store';
 import { AutomationListing, AutomationListingHeader } from './listing';
 import { registerApiErrorHandler } from './listing/api-error-handler';

mailpoet/assets/js/src/automation/editor/index.tsx

@@ -13,6 +13,7 @@ import {
 import { ShortcutProvider } from '@wordpress/keyboard-shortcuts';
 import { __ } from '@wordpress/i18n';
 import { addQueryArgs } from '@wordpress/url';
+import { registerTranslations } from 'common';
 import { Header } from './components/header';
 import { InserterSidebar } from './components/inserter-sidebar';
 import { KeyboardShortcuts } from './components/keyboard-shortcuts';
@@ -27,7 +28,6 @@ import { MailPoet } from '../../mailpoet';
 import { LISTING_NOTICE_PARAMETERS } from '../listing/automation-listing-notices';
 import { registerApiErrorHandler } from './api-error-handler';
 import { ActivatePanel } from './components/panel/activate-panel';
-import { registerTranslations } from '../i18n';
 import { AutomationStatus } from '../listing/automation';
 
 // See:

mailpoet/assets/js/src/automation/templates/index.tsx

@@ -1,10 +1,10 @@
 import ReactDOM from 'react-dom';
 import { __ } from '@wordpress/i18n';
 import { Flex } from '@wordpress/components';
+import { registerTranslations } from 'common';
 import { automationTemplates } from './config';
 import { TemplateListItem } from './components/template-list-item';
 import { initializeApi } from '../api';
-import { registerTranslations } from '../i18n';
 import { TopBarWithBeamer } from '../../common/top_bar/top_bar';
 import {
   FromScratchButton,

mailpoet/assets/js/src/common/authorize_sender_email_and_domain_modal.tsx

@@ -1,4 +1,5 @@
 import { useEffect } from 'react';
+import { __ } from '@wordpress/i18n';
 import { MailPoet } from 'mailpoet';
 import classnames from 'classnames';
 import { extractEmailDomain, extractPageNameFromUrl } from 'common/functions';
@@ -100,9 +101,7 @@ function AuthorizeSenderEmailAndDomainModal({
           className={classnames({
             mailpoet_hidden: !showSenderEmailTab,
           })}
-          title={MailPoet.I18n.t(
-            'authorizeSenderEmailAndDomainModalSenderEmailTabTitle',
-          )}
+          title={__('Authorized emails', 'mailpoet')}
         >
           {showSenderEmailTab && (
             <AuthorizeSenderEmailModal
@@ -123,9 +122,7 @@ function AuthorizeSenderEmailAndDomainModal({
           className={classnames({
             mailpoet_hidden: !showSenderDomainTab,
           })}
-          title={MailPoet.I18n.t(
-            'authorizeSenderEmailAndDomainModalSenderDomainTabTitle',
-          )}
+          title={__('Sender Domains', 'mailpoet')}
         >
           {showSenderDomainTab && (
             <AuthorizeSenderDomainModal

mailpoet/assets/js/src/common/authorize_sender_email_modal.tsx

@@ -1,10 +1,11 @@
 import { useEffect, useRef, useState } from 'react';
 import ReactStringReplace from 'react-string-replace';
 import moment from 'moment';
+import { __ } from '@wordpress/i18n';
 import { MailPoet } from 'mailpoet';
 import { Modal } from 'common/modal/modal';
 import { Button, Loader } from 'common';
-import { isErrorResponse, ErrorResponse } from 'ajax';
+import { ErrorResponse, isErrorResponse } from 'ajax';
 import { Grid } from 'common/grid';
 
 const SET_INTERVAL_PERFORM_REQUEST_EVERY_SECONDS = 15;
@@ -187,7 +188,10 @@ function AuthorizeSenderEmailModal({
       {createEmailApiResponse && (
         <p>
           {ReactStringReplace(
-            MailPoet.I18n.t('authorizeSenderEmailModalDescription'),
+            __(
+              'Check your inbox now to confirm your email address. Please find the email with the subject: [bold]"email address to authorize"[/bold]',
+              'mailpoet',
+            ),
             /\[bold\](.*?)\[\/bold\]/g,
             (match, i) => (
               <strong key={i}>{match}</strong>
@@ -198,7 +202,12 @@ function AuthorizeSenderEmailModal({
       {createEmailApiResponse === false && (
         <>
           <strong> {createEmailApiError} </strong>
-          <p>{MailPoet.I18n.t('authorizeSenderEmailMessageError')}</p>
+          <p>
+            {__(
+              'An error occured when performing the request. Please try again later',
+              'mailpoet',
+            )}
+          </p>
         </>
       )}
 
@@ -210,10 +219,15 @@ function AuthorizeSenderEmailModal({
 
       {confirmEmailApiResponse && (
         <>
-          <p>{MailPoet.I18n.t('authorizeSenderEmailMessageSuccess')}</p>
+          <p>
+            {__(
+              'The email address has been authorized. You can now send emails using this address with MailPoet.',
+              'mailpoet',
+            )}
+          </p>
           <Button onClick={onRequestClose} className="button-on-top">
             {' '}
-            {MailPoet.I18n.t('close')}{' '}
+            {__('Close', 'mailpoet')}{' '}
           </Button>
         </>
       )}
@@ -222,10 +236,10 @@ function AuthorizeSenderEmailModal({
 
   return useModal ? (
     <Modal
-      title={MailPoet.I18n.t('authorizeSenderEmailModalTitle').replace(
-        '[senderEmail]',
-        senderEmailAddress,
-      )}
+      title={__(
+        'Authorizing your email address: [senderEmail]',
+        'mailpoet',
+      ).replace('[senderEmail]', senderEmailAddress)}
       onRequestClose={onRequestClose}
       contentClassName="authorize-sender-email-modal"
     >

mailpoet/assets/js/src/common/confirm_alert.jsx

@@ -1,7 +1,9 @@
-import { MailPoet } from 'mailpoet';
+import { __ } from '@wordpress/i18n';
 import PropTypes from 'prop-types';
 import ReactDOMServer from 'react-dom/server';
 
+import { MailPoet } from 'mailpoet';
+
 function ConfirmAlert(props) {
   MailPoet.Modal.popup({
     title: props.title,
@@ -49,9 +51,9 @@ ConfirmAlert.propTypes = {
 };
 
 ConfirmAlert.defaultProps = {
-  title: MailPoet.I18n.t('confirmTitle'),
-  cancelLabel: MailPoet.I18n.t('cancelLabel'),
-  confirmLabel: MailPoet.I18n.t('confirmLabel'),
+  title: __('Confirm to proceed', 'mailpoet'),
+  cancelLabel: __('Cancel', 'mailpoet'),
+  confirmLabel: __('Confirm', 'mailpoet'),
 };
 
 export function confirmAlert(props) {

mailpoet/assets/js/src/common/index.ts

@@ -9,6 +9,7 @@ export * from './form';
 export * from './tag';
 export * from './listings';
 export * from './error_boundary';
+export * from './translations';
 export * from './functions';
 export * from './utils';
 export * from './thumbnail';

mailpoet/assets/js/src/common/listings/_stories/newsletter_stats.tsx

@@ -1,24 +1,6 @@
-import { MailPoet } from 'mailpoet';
 import { NewsletterStats } from '../newsletter_stats';
 import { Heading } from '../../typography/heading/heading';
 
-MailPoet.I18n.add('excellentBadgeName', 'Excellent');
-MailPoet.I18n.add('excellentBadgeTooltip', 'Congrats!');
-MailPoet.I18n.add('goodBadgeName', 'Good');
-MailPoet.I18n.add('goodBadgeTooltip', 'Good stuff.');
-MailPoet.I18n.add('criticalBadgeName', 'Critical');
-MailPoet.I18n.add('criticalBadgeTooltip', 'Something to improve.');
-MailPoet.I18n.add('openedStatTooltipExcellent', 'above 30%');
-MailPoet.I18n.add('openedStatTooltipGood', 'between 10 and 30%');
-MailPoet.I18n.add('openedStatTooltipCritical', 'under 10%');
-MailPoet.I18n.add('clickedStatTooltipExcellent', 'above 3%');
-MailPoet.I18n.add('clickedStatTooltipGood', 'between 1 and 3%');
-MailPoet.I18n.add('clickedStatTooltipCritical', 'under 1%');
-MailPoet.I18n.add(
-  'revenueStatsTooltipShort',
-  'Revenues by customer who clicked on this email in the last 2 weeks.',
-);
-
 export default {
   title: 'Listing',
   component: NewsletterStats,

mailpoet/assets/js/src/common/listings/_stories/newsletter_status.tsx

@@ -1,13 +1,8 @@
 import { addHours, subHours } from 'date-fns';
-import { MailPoet } from 'mailpoet';
 import { NewsletterStatus as NewsletterStatusEnum } from 'common/newsletter';
 import { NewsletterStatus } from '../newsletter_status';
 import { Heading } from '../../typography';
 
-MailPoet.I18n.add('notSentYet', 'Not sent yet!');
-MailPoet.I18n.add('sent', 'Sent');
-MailPoet.I18n.add('paused', 'Paused');
-
 export default {
   title: 'Listing',
   component: NewsletterStatus,

mailpoet/assets/js/src/common/listings/newsletter_stats.tsx

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { __ } from '@wordpress/i18n';
 import { MailPoet } from 'mailpoet';
 import { StatsBadge } from './newsletter_stats/stats';
 import { Tooltip } from '../tooltip/tooltip';
@@ -63,7 +64,10 @@ export function NewsletterStats({
         </Tag>
         <Tooltip place="top" multiline id={revenuesTooltipId}>
           <div className="mailpoet-listing-stats-tooltip-content">
-            {MailPoet.I18n.t('revenueStatsTooltipShort')}
+            {__(
+              'Revenues by customers who clicked on this email in the last 2 weeks.',
+              'mailpoet',
+            )}
           </div>
         </Tooltip>
       </div>

mailpoet/assets/js/src/common/listings/newsletter_stats/stats.tsx

@@ -1,4 +1,4 @@
-import { MailPoet } from 'mailpoet';
+import { __, _x } from '@wordpress/i18n';
 import { Place } from 'react-tooltip';
 import { Badge } from './badge';
 
@@ -15,36 +15,36 @@ const stats = {
     badgeRanges: [30, 10, 0],
     badgeTypes: ['excellent', 'good', 'critical'],
     tooltipText: {
-      excellent: MailPoet.I18n.t('openedStatTooltipExcellent'),
-      good: MailPoet.I18n.t('openedStatTooltipGood'),
-      critical: MailPoet.I18n.t('openedStatTooltipCritical'),
+      excellent: _x('above 30%', 'Excellent open rate', 'mailpoet'),
+      good: _x('between 10 and 30%', 'Good open rate', 'mailpoet'),
+      critical: _x('under 10%', 'Critical open rate', 'mailpoet'),
     },
   },
   clicked: {
     badgeRanges: [3, 1, 0],
     badgeTypes: ['excellent', 'good', 'critical'],
     tooltipText: {
-      excellent: MailPoet.I18n.t('clickedStatTooltipExcellent'),
-      good: MailPoet.I18n.t('clickedStatTooltipGood'),
-      critical: MailPoet.I18n.t('clickedStatTooltipCritical'),
+      excellent: _x('above 3%', 'Excellent click rate', 'mailpoet'),
+      good: _x('between 1 and 3%', 'Good click rate', 'mailpoet'),
+      critical: _x('under 1%', 'Critical click rate', 'mailpoet'),
     },
   },
   bounced: {
     badgeRanges: [1.5, 0.5, 0],
     badgeTypes: ['critical', 'good', 'excellent'],
     tooltipText: {
-      excellent: MailPoet.I18n.t('bouncedStatTooltipExcellent'),
-      good: MailPoet.I18n.t('bouncedStatTooltipGood'),
-      critical: MailPoet.I18n.t('bouncedStatTooltipCritical'),
+      excellent: _x('below 0.5%', 'Excellent bounce rate', 'mailpoet'),
+      good: _x('between 0.5% and 1.5%', 'Good bounce rate', 'mailpoet'),
+      critical: _x('above 1.5%', 'Critical bounce rate', 'mailpoet'),
     },
   },
   unsubscribed: {
     badgeRanges: [0.7, 0.3, 0],
     badgeTypes: ['critical', 'good', 'excellent'],
     tooltipText: {
-      excellent: MailPoet.I18n.t('unsubscribeStatTooltipExcellent'),
-      good: MailPoet.I18n.t('unsubscribeStatTooltipGood'),
-      critical: MailPoet.I18n.t('unsubscribeStatTooltipCritical'),
+      excellent: _x('Below 0.3%', 'Excellent unsubscribe rate', 'mailpoet'),
+      good: _x('between 0.3% and 0.7%', 'Good unsubscribe rate', 'mailpoet'),
+      critical: _x('above 0.7%', 'Critical unsubscribe rate', 'mailpoet'),
     },
   },
 };
@@ -71,16 +71,16 @@ export const getBadgeType = (statName, rate) => {
 function StatsBadge(props: StatsBadgeProps) {
   const badges = {
     excellent: {
-      name: MailPoet.I18n.t('excellentBadgeName'),
-      tooltipTitle: MailPoet.I18n.t('excellentBadgeTooltip'),
+      name: __('Excellent', 'mailpoet'),
+      tooltipTitle: __('Congrats!', 'mailpoet'),
     },
     good: {
-      name: MailPoet.I18n.t('goodBadgeName'),
-      tooltipTitle: MailPoet.I18n.t('goodBadgeTooltip'),
+      name: __('Good', 'mailpoet'),
+      tooltipTitle: __('Good stuff.', 'mailpoet'),
     },
     critical: {
-      name: MailPoet.I18n.t('criticalBadgeName'),
-      tooltipTitle: MailPoet.I18n.t('criticalBadgeTooltip'),
+      name: __('Critical', 'mailpoet'),
+      tooltipTitle: __('Something to improve.', 'mailpoet'),
     },
   };
 

mailpoet/assets/js/src/common/listings/newsletter_status.tsx

@@ -1,7 +1,7 @@
+import { __ } from '@wordpress/i18n';
 import { MailPoet } from 'mailpoet';
 import classnames from 'classnames';
 import { addDays, differenceInMinutes, isFuture, isPast } from 'date-fns';
-import { t } from 'common/functions/t';
 import {
   NewsLetter,
   NewsletterStatus as NewsletterStatusEnum,
@@ -84,7 +84,7 @@ function NewsletterStatus({
   const sent = (!scheduledFor || isPast(scheduledFor)) && processed >= total;
   const sentWithoutQueue = status === 'sent' && total === undefined;
   let percentage = 0;
-  let label: string | JSX.Element = t('notSentYet');
+  let label: string | JSX.Element = __('Not sent yet!', 'mailpoet');
   if (scheduled) {
     const scheduledDate = MailPoet.Date.short(scheduledFor);
     const scheduledTime = MailPoet.Date.time(scheduledFor);
@@ -95,7 +95,9 @@ function NewsletterStatus({
       MailPoet.Date.short(tomorrow) === scheduledDate;
     if (isScheduledForToday || isScheduledForTomorrow) {
       const randomId = Math.random().toString(36).substring(2, 15);
-      const dateWord = isScheduledForToday ? t('today') : t('tomorrow');
+      const dateWord = isScheduledForToday
+        ? __('Today', 'mailpoet')
+        : __('Tomorrow', 'mailpoet');
       label = (
         <>
           <span data-tip data-for={randomId}>
@@ -135,15 +137,15 @@ function NewsletterStatus({
     )} / ${MailPoet.Num.toLocaleFixed(total)}`;
     percentage = 100;
   } else if (sentWithoutQueue) {
-    label = t('sent');
+    label = __('Sent', 'mailpoet');
     percentage = 100;
   }
   if (isPaused && !sent && !sentWithoutQueue) {
-    label = t('paused');
+    label = __('Paused', 'mailpoet');
   }
 
   if (isCorrupt) {
-    label = t('renderingProblem');
+    label = __('There was a problem with rendering!', 'mailpoet');
   }
 
   return (