Rewrite t to be called as a normal function

[MAILPOET-2677]

assets/js/src/common/functions/t.ts

@@ -1,3 +1,3 @@
 import MailPoet from 'mailpoet';
 
-export default ([word]: TemplateStringsArray) => MailPoet.I18n.t(word);
+export default (word: string): string => MailPoet.I18n.t(word);

assets/js/src/settings/components/pages_select.tsx

@@ -33,12 +33,12 @@ export default (props: Props) => {
       {' '}
       <a
         target="_blank"
-        title={t`previewPage`}
+        title={t('previewPage')}
         rel="noopener noreferrer"
         href={selectedPage.url[props.preview]}
         data-automation-id={props.linkAutomationId}
       >
-        {t`preview`}
+        {t('preview')}
       </a>
     </>
   );

assets/js/src/settings/components/tabs.tsx

@@ -16,21 +16,21 @@ export default () => {
         current={current}
         automationId="basic_settings_tab"
       >
-        {t`basicsTab`}
+        {t('basicsTab')}
       </TabLink>
       <a
         className="nav-tab"
         href="?page=mailpoet-settings#signup"
         data-automation-id="signup_settings_tab"
       >
-        {t`signupConfirmationTab`}
+        {t('signupConfirmationTab')}
       </a>
       <a
         className="nav-tab"
         href="?page=mailpoet-settings#mta"
         data-automation-id="send_with_settings_tab"
       >
-        {t`sendWithTab`}
+        {t('sendWithTab')}
       </a>
       {hasWooCommerce && (
         <a
@@ -38,7 +38,7 @@ export default () => {
           href="?page=mailpoet-settings#woocommerce"
           data-automation-id="woocommerce_settings_tab"
         >
-          {t`wooCommerceTab`}
+          {t('wooCommerceTab')}
         </a>
       )}
       <a
@@ -46,14 +46,14 @@ export default () => {
         href="?page=mailpoet-settings#advanced"
         data-automation-id="settings-advanced-tab"
       >
-        {t`advancedTab`}
+        {t('advancedTab')}
       </a>
       <a
         className="nav-tab"
         href="?page=mailpoet-settings#premium"
         data-automation-id="activation_settings_tab"
       >
-        {t`keyActivationTab`}
+        {t('keyActivationTab')}
       </a>
     </h2>
   );

assets/js/src/settings/pages/basics/default_sender.tsx

@@ -19,16 +19,16 @@ export default function DefaultSender() {
   return (
     <>
       <Label
-        title={t`defaultSenderTitle`}
-        description={t`defaultSenderDescription`}
+        title={t('defaultSenderTitle')}
+        description={t('defaultSenderDescription')}
         htmlFor="sender-name"
       />
       <Inputs>
-        <label htmlFor="sender-name">{t`from`}</label>
+        <label htmlFor="sender-name">{t('from')}</label>
         <input
           type="text"
           id="sender-name"
-          placeholder={t`yourName`}
+          placeholder={t('yourName')}
           data-automation-id="from-name-field"
           value={senderName}
           onChange={onChange(setSenderName)}
@@ -42,7 +42,7 @@ export default function DefaultSender() {
         />
         {invalidSenderEmail && (
           <span className="mailpoet_error_item mailpoet_error">
-            {t`invalidEmail`}
+            {t('invalidEmail')}
           </span>
         )}
         <div className="regular-text">
@@ -55,7 +55,7 @@ export default function DefaultSender() {
         <input
           type="text"
           id="reply_to-name"
-          placeholder={t`yourName`}
+          placeholder={t('yourName')}
           data-automation-id="reply_to-name-field"
           value={replyToName}
           onChange={onChange(setReplyToName)}
@@ -69,7 +69,7 @@ export default function DefaultSender() {
         />
         {invalidReplyToEmail && (
           <span className="mailpoet_error_item mailpoet_error">
-            {t`invalidEmail`}
+            {t('invalidEmail')}
           </span>
         )}
       </Inputs>

assets/js/src/settings/pages/basics/gdpr_compliant.tsx

@@ -6,19 +6,19 @@ export default function GdprCompliant() {
   return (
     <>
       <Label
-        title={t`gdprTitle`}
-        description={t`gdprDescription`}
+        title={t('gdprTitle')}
+        description={t('gdprDescription')}
         htmlFor="gdpr-compliant"
       />
       <Inputs>
         <a
           href="https://kb.mailpoet.com/article/246-guide-to-conform-to-gdpr"
           data-beacon-article="5a9e8cdd04286374f7089a8c"
-          title={t`readGuide`}
+          title={t('readGuide')}
           target="_blank"
           rel="noopener noreferrer"
         >
-          {t`readGuide`}
+          {t('readGuide')}
         </a>
       </Inputs>
     </>

assets/js/src/settings/pages/basics/index.tsx

@@ -16,13 +16,13 @@ export default function Basics() {
       <DefaultSender />
       <SubscribeOn
         event="on_comment"
-        title={t`subscribeInCommentsTitle`}
-        description={t`subscribeInCommentsDescription`}
+        title={t('subscribeInCommentsTitle')}
+        description={t('subscribeInCommentsDescription')}
       />
       <SubscribeOn
         event="on_register"
-        title={t`subscribeInRegistrationTitle`}
-        description={t`subscribeInRegistrationDescription`}
+        title={t('subscribeInRegistrationTitle')}
+        description={t('subscribeInRegistrationDescription')}
       />
       <ManageSubscription />
       <UnsubscribePage />
@@ -30,13 +30,13 @@ export default function Basics() {
       <NewSubscriberNotifications />
       <Shortcode
         name="mailpoet_archive"
-        title={t`archiveShortcodeTitle`}
-        description={t`archiveShortcodeDescription`}
+        title={t('archiveShortcodeTitle')}
+        description={t('archiveShortcodeDescription')}
       />
       <Shortcode
         name="mailpoet_subscribers_count"
-        title={t`subscribersCountShortcodeTitle`}
-        description={t`subscribersCountShortcodeDescription`}
+        title={t('subscribersCountShortcodeTitle')}
+        description={t('subscribersCountShortcodeDescription')}
       />
       <GdprCompliant />
       <SaveButton />

assets/js/src/settings/pages/basics/manage_subscription.tsx

@@ -11,12 +11,12 @@ export default function ManageSubscription() {
   return (
     <>
       <Label
-        title={t`manageSubTitle`}
+        title={t('manageSubTitle')}
         description={(
           <>
-            {t`manageSubDescription1`}
+            {t('manageSubDescription1')}
             <br />
-            {t`manageSubDescription2`}
+            {t('manageSubDescription2')}
           </>
         )}
         htmlFor="subscription-manage-page"
@@ -31,13 +31,13 @@ export default function ManageSubscription() {
           linkAutomationId="preview_manage_subscription_page_link"
         />
         <br />
-        <label htmlFor="subscription-segments">{t`subscribersCanChooseFrom`}</label>
+        <label htmlFor="subscription-segments">{t('subscribersCanChooseFrom')}</label>
         <br />
         <SegmentsSelect
           id="subscription-segments"
           value={segments}
           setValue={setSegments}
-          placeholder={t`leaveEmptyToDisplayAll`}
+          placeholder={t('leaveEmptyToDisplayAll')}
         />
       </Inputs>
     </>

assets/js/src/settings/pages/basics/new_subscriber_notifications.tsx

@@ -16,8 +16,8 @@ export default function NewSubscriberNotifications() {
   return (
     <>
       <Label
-        title={t`newSubscriberNotifsTitle`}
-        description={t`newSubscriberNotifsDescription`}
+        title={t('newSubscriberNotifsTitle')}
+        description={t('newSubscriberNotifsDescription')}
         htmlFor="subscriber_email_notification-enabled"
       />
       <Inputs>
@@ -27,7 +27,7 @@ export default function NewSubscriberNotifications() {
           value="1"
           onClick={() => setEnabled('1')}
         />
-        {t`yes`}
+        {t('yes')}
         {' '}
         <input
           type="radio"
@@ -35,17 +35,17 @@ export default function NewSubscriberNotifications() {
           value=""
           onClick={() => setEnabled('')}
         />
-        {t`no`}
+        {t('no')}
         <br />
         <input type="email" value={email} onChange={onChange(setEmail)} placeholder="me@mydomain.com" />
         {hasError && (
           <div className="mailpoet_error_item mailpoet_error">
-            {t`pleaseFillEmail`}
+            {t('pleaseFillEmail')}
           </div>
         )}
         {invalidEmail && (
           <div className="mailpoet_error_item mailpoet_error">
-            {t`invalidEmail`}
+            {t('invalidEmail')}
           </div>
         )}
       </Inputs>

assets/js/src/settings/pages/basics/shortcode.tsx

@@ -36,7 +36,7 @@ export default function Shortcode({ name, title, description }: Props) {
           value={segments}
           setValue={setSegments}
           id={`${name}-shortcode-segments`}
-          placeholder={t`leaveEmptyToDisplayAll`}
+          placeholder={t('leaveEmptyToDisplayAll')}
         />
       </Inputs>
     </>

assets/js/src/settings/pages/basics/stats_notifications.tsx

@@ -19,8 +19,8 @@ export default function StatsNotifications() {
   return (
     <>
       <Label
-        title={t`statsNotifsTitle`}
-        description={t`statsNotifsDescription`}
+        title={t('statsNotifsTitle')}
+        description={t('statsNotifsDescription')}
         htmlFor="stats-enabled"
       />
       <Inputs>
@@ -30,7 +30,7 @@ export default function StatsNotifications() {
           checked={enabled === '1'}
           onChange={onToggle(setEnabled)}
         />
-        <label htmlFor="stats-enabled">{t`newslettersAndPostNotifs`}</label>
+        <label htmlFor="stats-enabled">{t('newslettersAndPostNotifs')}</label>
         <br />
         <input
           type="checkbox"
@@ -38,17 +38,17 @@ export default function StatsNotifications() {
           checked={automated === '1'}
           onChange={onToggle(setAutomated)}
         />
-        <label htmlFor="stats-automated">{t`welcomeAndWcEmails`}</label>
+        <label htmlFor="stats-automated">{t('welcomeAndWcEmails')}</label>
         <br />
         <input type="email" value={email} onChange={onChange(setEmail)} placeholder="me@mydomain.com" />
         {hasError && (
           <div className="mailpoet_error_item mailpoet_error">
-            {t`pleaseFillEmail`}
+            {t('pleaseFillEmail')}
           </div>
         )}
         {invalidEmail && (
           <div className="mailpoet_error_item mailpoet_error">
-            {t`invalidEmail`}
+            {t('invalidEmail')}
           </div>
         )}
       </Inputs>

assets/js/src/settings/pages/basics/subscribe_on.tsx

@@ -34,14 +34,14 @@ export default function SubscribeOn({ title, description, event }: Props) {
             <input
               type="text"
               className="regular-text"
-              value={label || t`yesAddMe`}
+              value={label || t('yesAddMe')}
               onChange={onChange(setLabel)}
             />
             <br />
-            <label htmlFor={`subscribe-${event}-segments`}>{t`usersWillBeSubscribedTo`}</label>
+            <label htmlFor={`subscribe-${event}-segments`}>{t('usersWillBeSubscribedTo')}</label>
             <br />
             <div data-automation-id={`subscribe-${event}-segments-selection`}>
-              <SegmentsSelect id={`subscribe-${event}-segments`} placeholder={t`chooseList`} value={segments} setValue={setSegments} />
+              <SegmentsSelect id={`subscribe-${event}-segments`} placeholder={t('chooseList')} value={segments} setValue={setSegments} />
             </div>
           </>
         )}

assets/js/src/settings/pages/basics/unsubscribe_page.tsx

@@ -8,12 +8,12 @@ export default function UnsubscribePage() {
   return (
     <>
       <Label
-        title={t`unsubscribeTitle`}
+        title={t('unsubscribeTitle')}
         description={(
           <>
-            {t`unsubscribeDescription1`}
+            {t('unsubscribeDescription1')}
             <br />
-            {t`unsubscribeDescription2`}
+            {t('unsubscribeDescription2')}
           </>
         )}
         htmlFor="subscription-pages-unsubscribe"

assets/js/src/settings/settings.tsx

@@ -20,7 +20,7 @@ export default function Settings() {
     <>
       {isSaving && <Loading />}
       <Notices />
-      <h1 className="title">{t`settings`}</h1>
+      <h1 className="title">{t('settings')}</h1>
       <Tabs />
       <Switch>
         <Route path="/basics" component={Basics} />