Added translation wrapper to public-facing strings in Portal

refs #15502 - in order to use the translations, strings must be wrapped in the `t` function, which is passed through AppContext - whilst I haven't instrumented all public strings, the vast majority are done here and the strings have been brought into the JSON locale files using `yarn translate:generate`
TryGhost · Feb 28, 2023 · acf2ab2 · acf2ab2
1 parent f007094
commit acf2ab2
Show file tree

Hide file tree

Showing 19 changed files with 259 additions and 114 deletions.
diff --git a/ghost/i18n/locales/en.json b/ghost/i18n/locales/en.json
@@ -1,3 +1,62 @@
 {
-    "Hello": "Hello"
+    "{{discount}}% discount": "",
+    "{{trialDays}} days free": "",
+    "A login link has been sent to your inbox. If it doesn't arrive in 3 minutes, be sure to check your spam folder.": "",
+    "Account": "",
+    "Account settings": "",
+    "After a free trial ends, you will be charged the regular price for the tier you've chosen. You can always cancel before then.": "",
+    "Already a member?": "",
+    "Back": "",
+    "Back to Log in": "",
+    "Cancel subscription": "",
+    "Cancellation reason": "",
+    "Choose a different plan": "",
+    "Choose your newsletters": "",
+    "Close": "",
+    "Comments": "",
+    "Confirm": "",
+    "Continue": "",
+    "Delete account": "",
+    "Don't have an account?": "",
+    "Email": "",
+    "Email preference updated.": "",
+    "Email preferences": "",
+    "Emails": "",
+    "Emails disabled": "",
+    "Get help": "",
+    "Get notified when someone replies to your comment": "",
+    "Give feedback on this post": "",
+    "Hello": "",
+    "Less like this": "",
+    "Manage": "",
+    "Monthly": "",
+    "More like this": "",
+    "Name": "",
+    "Not receiving emails?": "",
+    "Now check your email!": "",
+    "Powered by Ghost": "",
+    "Price": "",
+    "Re-enable emails": "",
+    "Retry": "",
+    "Save": "",
+    "Sending login link...": "",
+    "Sending...": "",
+    "Sign in": "",
+    "Sign up": "",
+    "Start {{amount}}-day free trial": "",
+    "Submit feedback": "",
+    "Successfully unsubscribed": "",
+    "Thanks for the feedback!": "",
+    "That didn't go to plan": "",
+    "This site is invite-only, contact the owner for access.": "",
+    "To complete signup, click the confirmation link in your inbox. If it doesn't arrive within 3 minutes, check your spam folder!": "",
+    "Unsubscribe from all emails": "",
+    "Unsubscribing from emails will not cancel your paid subscription to {{title}}": "",
+    "Update your preferences": "",
+    "We couldn't unsubscribe you as the email address was not found. Please contact the site owner.": "",
+    "Yearly": "",
+    "You have been successfully resubscribed": "",
+    "You're not receiving emails because you either marked a recent message as spam, or because messages could not be delivered to your provided email address.": "",
+    "Your account": "",
+    "Your input helps shape what gets published.": ""
 }
diff --git a/ghost/i18n/locales/nl.json b/ghost/i18n/locales/nl.json
@@ -1,3 +1,62 @@
 {
-    "Hello": "Hallo"
+    "{{discount}}% discount": "",
+    "{{trialDays}} days free": "",
+    "A login link has been sent to your inbox. If it doesn't arrive in 3 minutes, be sure to check your spam folder.": "",
+    "Account": "",
+    "Account settings": "",
+    "After a free trial ends, you will be charged the regular price for the tier you've chosen. You can always cancel before then.": "",
+    "Already a member?": "",
+    "Back": "",
+    "Back to Log in": "",
+    "Cancel subscription": "",
+    "Cancellation reason": "",
+    "Choose a different plan": "",
+    "Choose your newsletters": "",
+    "Close": "",
+    "Comments": "",
+    "Confirm": "",
+    "Continue": "",
+    "Delete account": "",
+    "Don't have an account?": "",
+    "Email": "",
+    "Email preference updated.": "",
+    "Email preferences": "",
+    "Emails": "",
+    "Emails disabled": "",
+    "Get help": "",
+    "Get notified when someone replies to your comment": "",
+    "Give feedback on this post": "",
+    "Hello": "Hallo",
+    "Less like this": "",
+    "Manage": "",
+    "Monthly": "",
+    "More like this": "",
+    "Name": "",
+    "Not receiving emails?": "",
+    "Now check your email!": "",
+    "Powered by Ghost": "",
+    "Price": "",
+    "Re-enable emails": "",
+    "Retry": "",
+    "Save": "",
+    "Sending login link...": "",
+    "Sending...": "",
+    "Sign in": "",
+    "Sign up": "",
+    "Start {{amount}}-day free trial": "",
+    "Submit feedback": "",
+    "Successfully unsubscribed": "",
+    "Thanks for the feedback!": "",
+    "That didn't go to plan": "",
+    "This site is invite-only, contact the owner for access.": "",
+    "To complete signup, click the confirmation link in your inbox. If it doesn't arrive within 3 minutes, check your spam folder!": "",
+    "Unsubscribe from all emails": "",
+    "Unsubscribing from emails will not cancel your paid subscription to {{title}}": "",
+    "Update your preferences": "",
+    "We couldn't unsubscribe you as the email address was not found. Please contact the site owner.": "",
+    "Yearly": "",
+    "You have been successfully resubscribed": "",
+    "You're not receiving emails because you either marked a recent message as spam, or because messages could not be delivered to your provided email address.": "",
+    "Your account": "",
+    "Your input helps shape what gets published.": ""
 }
diff --git a/ghost/portal/src/components/common/NewsletterManagement.js b/ghost/portal/src/components/common/NewsletterManagement.js
@@ -10,13 +10,13 @@ import {ReactComponent as CheckmarkIcon} from '../../images/icons/check-circle.s
 const React = require('react');
 
 function AccountHeader() {
-    const {brandColor, lastPage, onAction} = useContext(AppContext);
+    const {brandColor, lastPage, onAction, t} = useContext(AppContext);
     return (
         <header className='gh-portal-detail-header'>
             <BackButton brandColor={brandColor} hidden={!lastPage} onClick={(e) => {
                 onAction('back');
             }} />
-            <h3 className='gh-portal-main-title'>Email preferences</h3>
+            <h3 className='gh-portal-main-title'>{t('Email preferences')}</h3>
         </header>
     );
 }
@@ -86,6 +86,7 @@ function NewsletterPrefSection({newsletter, subscribedNewsletters, setSubscribed
 }
 
 function CommentsSection({updateCommentNotifications, isCommentsEnabled, enableCommentNotifications}) {
+    const {t} = useContext(AppContext);
     const isChecked = !!enableCommentNotifications;
 
     const [showUpdated, setShowUpdated] = useState(false);
@@ -98,8 +99,8 @@ function CommentsSection({updateCommentNotifications, isCommentsEnabled, enableC
     return (
         <section className='gh-portal-list-toggle-wrapper' data-test-toggle-wrapper>
             <div className='gh-portal-list-detail'>
-                <h3>Comments</h3>
-                <p>Get notified when someone replies to your comment</p>
+                <h3>{t('Comments')}</h3>
+                <p>{t('Get notified when someone replies to your comment')}</p>
             </div>
             <div style={{display: 'flex', alignItems: 'center'}}>
                 <SuccessIcon show={showUpdated} checked={isChecked} />
@@ -133,9 +134,11 @@ function NewsletterPrefs({subscribedNewsletters, setSubscribedNewsletters}) {
 }
 
 function ShowPaidMemberMessage({site, isPaid}) {
+    const {t} = useContext(AppContext);
+
     if (isPaid) {
         return (
-            <p style={{textAlign: 'center', marginTop: '12px', marginBottom: '0', color: 'var(--grey6)'}}>Unsubscribing from emails will not cancel your paid subscription to {site?.title}</p>
+            <p style={{textAlign: 'center', marginTop: '12px', marginBottom: '0', color: 'var(--grey6)'}}>{t('Unsubscribing from emails will not cancel your paid subscription to {{title}}', {title: site?.title})}</p>
         );
     }
     return null;
@@ -151,7 +154,7 @@ export default function NewsletterManagement({
     isCommentsEnabled,
     enableCommentNotifications
 }) {
-    const {brandColor, onAction, member, site} = useContext(AppContext);
+    const {brandColor, onAction, member, site, t} = useContext(AppContext);
     const isDisabled = !subscribedNewsletters?.length && ((isCommentsEnabled && !enableCommentNotifications) || !isCommentsEnabled);
     const EmptyNotification = () => {
         return null;
@@ -192,7 +195,7 @@ export default function NewsletterManagement({
                         disabled={isDisabled}
                         brandColor={brandColor}
                         isPrimary={false}
-                        label='Unsubscribe from all emails'
+                        label={t('Unsubscribe from all emails')}
                         isDestructive={true}
                         style={{width: '100%'}}
                         dataTestId="unsubscribe-from-all-emails"
@@ -201,12 +204,12 @@ export default function NewsletterManagement({
                 </div>
                 {hasMemberGotEmailSuppression({member}) && !isDisabled &&
                     <div className="gh-portal-footer-secondary">
-                        <span className="gh-portal-footer-secondary-light">Not receiving emails?</span>
+                        <span className="gh-portal-footer-secondary-light">{t('Not receiving emails?')}</span>
                         <button
                             className="gh-portal-btn-text gh-email-faq-page-button"
                             onClick={() => onAction('switchPage', {page: 'emailReceivingFAQ'})}
                         >
-                            Get help &rarr;
+                            {t('Get help')} &rarr;
                         </button>
                     </div>
                 }

diff --git a/ghost/portal/src/components/common/PoweredBy.js b/ghost/portal/src/components/common/PoweredBy.js
@@ -1,15 +1,20 @@
 import React from 'react';
+import AppContext from '../../AppContext';
 import {ReactComponent as GhostLogo} from '../../images/ghost-logo-small.svg';
 
 export default class PoweredBy extends React.Component {
+    static contextType = AppContext;
+
     render() {
+        const {t} = this.context;
+
         return (
             <a href='https://ghost.org' target='_blank' rel='noopener noreferrer' onClick={() => {
                 window.open('https://ghost.org', '_blank');
             }}>
                 <GhostLogo />
-                Powered by Ghost
+                {t('Powered by Ghost')}
             </a>
         );
     }
-}
+}
diff --git a/ghost/portal/src/components/common/ProductsSection.js b/ghost/portal/src/components/common/ProductsSection.js
@@ -547,12 +547,12 @@ function ProductCardAlternatePrice({price}) {
 }
 
 function ProductCardTrialDays({trialDays, discount, selectedInterval}) {
-    const {site} = useContext(AppContext);
+    const {site, t} = useContext(AppContext);
 
     if (hasFreeTrialTier({site})) {
         if (trialDays) {
             return (
-                <span className="gh-portal-discount-label">{trialDays} days free</span>
+                <span className="gh-portal-discount-label">{t('{{trialDays}} days free', {trialDays})}</span>
             );
         } else {
             return null;
@@ -561,7 +561,7 @@ function ProductCardTrialDays({trialDays, discount, selectedInterval}) {
 
     if (selectedInterval === 'year') {
         return (
-            <span className="gh-portal-discount-label">{discount}% discount</span>
+            <span className="gh-portal-discount-label">{t('{{discount}}% discount', {discount})}</span>
         );
     }
 
@@ -809,7 +809,7 @@ function YearlyDiscount({discount, trialDays}) {
 }
 
 function ProductPriceSwitch({products, selectedInterval, setSelectedInterval}) {
-    const {site} = useContext(AppContext);
+    const {site, t} = useContext(AppContext);
     const {portal_plans: portalPlans} = site;
     if (!portalPlans.includes('monthly') || !portalPlans.includes('yearly')) {
         return null;
@@ -825,7 +825,7 @@ function ProductPriceSwitch({products, selectedInterval, setSelectedInterval}) {
                         setSelectedInterval('month');
                     }}
                 >
-                    Monthly
+                    {t('Monthly')}
                 </button>
                 <button
                     data-test-button='switch-yearly'
@@ -834,7 +834,7 @@ function ProductPriceSwitch({products, selectedInterval, setSelectedInterval}) {
                         setSelectedInterval('year');
                     }}
                 >
-                    Yearly
+                    {t('Yearly')}
                 </button>
             </div>
         </div>

diff --git a/ghost/portal/src/components/common/SiteTitleBackButton.js b/ghost/portal/src/components/common/SiteTitleBackButton.js
@@ -5,7 +5,7 @@ export default class SiteTitleBackButton extends React.Component {
     static contextType = AppContext;
 
     render() {
-        // const {site} = this.context;
+        const {t} = this.context;
         return (
             <>
                 <button
@@ -17,7 +17,7 @@ export default class SiteTitleBackButton extends React.Component {
                             this.context.onAction('closePopup');
                         }
                     }}>
-                    <span>&larr; </span> Back
+                    <span>&larr; </span> {t('Back')}
                 </button>
             </>
         );

diff --git a/ghost/portal/src/components/pages/AccountEmailPage.js b/ghost/portal/src/components/pages/AccountEmailPage.js
@@ -6,7 +6,7 @@ import NewsletterManagement from '../common/NewsletterManagement';
 const React = require('react');
 
 export default function AccountEmailPage() {
-    const {member, onAction, site} = useContext(AppContext);
+    const {member, onAction, site, t} = useContext(AppContext);
 
     useEffect(() => {
         if (!member) {
@@ -40,7 +40,7 @@ export default function AccountEmailPage() {
                 setSubscribedNewsletters([]);
                 onAction('showPopupNotification', {
                     action: 'updated:success',
-                    message: `Email preference updated.`
+                    message: t(`Email preference updated.`)
                 });
                 const data = {newsletters: []};
                 if (commentsEnabled) {

diff --git a/ghost/portal/src/components/pages/AccountHomePage/components/EmailPreferencesAction.js b/ghost/portal/src/components/pages/AccountHomePage/components/EmailPreferencesAction.js
@@ -4,14 +4,14 @@ import {isEmailSuppressed} from 'utils/helpers';
 import {ReactComponent as EmailDeliveryFailedIcon} from 'images/icons/email-delivery-failed.svg';
 
 function EmailPreferencesAction() {
-    const {onAction, member} = useContext(AppContext);
+    const {onAction, member, t} = useContext(AppContext);
     const emailSuppressed = isEmailSuppressed({member});
     const page = emailSuppressed ? 'emailSuppressed' : 'accountEmail';
 
     return (
         <section>
             <div className='gh-portal-list-detail'>
-                <h3>Emails</h3>
+                <h3>{t('Emails')}</h3>
                 {
                     emailSuppressed
                         ? (
@@ -20,7 +20,7 @@ function EmailPreferencesAction() {
                                 <span>You're <span className="gh-mobile-shortener">currently </span>not receiving emails</span>
                             </p>
                         )
-                        : <p>Update your preferences</p>
+                        : <p>{t('Update your preferences')}</p>
                 }
             </div>
             <button className='gh-portal-btn gh-portal-btn-list' onClick={(e) => {
@@ -29,7 +29,7 @@ function EmailPreferencesAction() {
                     lastPage: 'accountHome'
                 });
             }} data-test-button='manage-newsletters'>
-                Manage
+                {t('Manage')}
             </button>
         </section>
     );

diff --git a/ghost/portal/src/components/pages/AccountHomePage/components/UserHeader.js b/ghost/portal/src/components/pages/AccountHomePage/components/UserHeader.js
@@ -3,12 +3,12 @@ import MemberAvatar from 'components/common/MemberGravatar';
 import React, {useContext} from 'react';
 
 const UserHeader = () => {
-    const {member, brandColor} = useContext(AppContext);
+    const {member, brandColor, t} = useContext(AppContext);
     const avatar = member.avatar_image;
     return (
         <header className='gh-portal-account-header'>
             <MemberAvatar gravatar={avatar} style={{userIcon: {color: brandColor, width: '56px', height: '56px', padding: '2px'}}} />
-            <h2 className="gh-portal-main-title">Your account</h2>
+            <h2 className="gh-portal-main-title">{t('Your account')}</h2>
         </header>
     );
 };