Wrapped gift subscription strings in Portal with t() (TryGhost#27833)

ref https://linear.app/ghost/issue/BER-3529/

When building gift subscriptions, several strings in Portal were
intentionally left as English literals because copy was still being
reviewed. Those screens were marked with `// TODO: Add translation
strings once copy has been finalised` (and `/* eslint-disable
i18next/no-literal-string */` in a few files).

Copy has now been reviewed for the most part, so we're wrapping English
literals into translatable strings.

Author: sagzy

apps/portal/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tryghost/portal",
-  "version": "2.68.43",
+  "version": "2.68.44",
   "license": "MIT",
   "repository": "https://github.com/TryGhost/Ghost",
   "author": "Ghost Foundation",

apps/portal/src/components/common/gift-card.js

@@ -1,5 +1,4 @@
-// TODO: wrap strings with t() once copy is finalised
-/* eslint-disable i18next/no-literal-string */
+import {t} from '../../utils/i18n';
 
 const GiftCard = ({cardRef, duration, tierName, name, giftValue, siteIcon, siteTitle}) => {
     const hasMeta = duration && tierName;
@@ -12,20 +11,20 @@ const GiftCard = ({cardRef, duration, tierName, name, giftValue, siteIcon, siteT
                 {hasMeta && (
                     <div className='gh-portal-gift-checkout-card-meta'>
                         <div className='gh-portal-gift-checkout-card-duration'>{duration}</div>
-                        <div className='gh-portal-gift-checkout-card-tier'>{`${tierName} membership`}</div>
+                        <div className='gh-portal-gift-checkout-card-tier'>{t('{tierName} membership', {tierName})}</div>
                     </div>
                 )}
                 {hasDetails && (
                     <div className='gh-portal-gift-checkout-card-details'>
                         {name && (
                             <div className='gh-portal-gift-checkout-card-detail'>
-                                <div className='gh-portal-gift-checkout-card-detail-label'>Name</div>
+                                <div className='gh-portal-gift-checkout-card-detail-label'>{t('Name')}</div>
                                 <div className='gh-portal-gift-checkout-card-detail-value'>{name}</div>
                             </div>
                         )}
                         {giftValue && (
                             <div className='gh-portal-gift-checkout-card-detail'>
-                                <div className='gh-portal-gift-checkout-card-detail-label'>Gift value</div>
+                                <div className='gh-portal-gift-checkout-card-detail-label'>{t('Gift value')}</div>
                                 <div className='gh-portal-gift-checkout-card-detail-value'>{giftValue}</div>
                             </div>
                         )}

apps/portal/src/components/common/gift-details-toggle.js

@@ -1,7 +1,5 @@
 import {ReactComponent as CheckmarkIcon} from '../../images/icons/checkmark.svg';
-
-// TODO: wrap strings with t() once copy is finalised
-/* eslint-disable i18next/no-literal-string */
+import {t} from '../../utils/i18n';
 
 const ChevronIcon = () => (
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
@@ -56,7 +54,7 @@ const GiftDetailsToggle = ({description, benefits, showDetails, onToggle}) => {
                 onClick={onToggle}
                 aria-expanded={showDetails}
             >
-                {showDetails ? 'Hide details' : 'Gift details'}
+                {showDetails ? t('Hide details') : t('Gift details')}
                 <ChevronIcon />
             </button>
         </>

apps/portal/src/components/notification.js

@@ -108,9 +108,8 @@ const NotificationText = ({type, status, message, context}) => {
             </p>
         );
     } else if (type === 'giftRedeem' && status === 'success') {
-        // TODO: Add translation strings once copy has been finalised
         const successMessage = getGiftRedemptionSuccessMessage({member: context.member})
-            || 'Gift redeemed! You\'re all set.';
+            || t('Gift redeemed! You\'re all set.');
 
         return (
             <p>

apps/portal/src/components/pages/AccountHomePage/components/continue-gift-subscription-banner.js

@@ -1,6 +1,7 @@
 import AppContext from '../../../../app-context';
 import ActionButton from '../../../common/action-button';
 import {getSubscriptionExpiry, isArchivedTier, isGiftMember, isStripeConfigured} from '../../../../utils/helpers';
+import {t} from '../../../../utils/i18n';
 import {useContext} from 'react';
 
 const ContinueGiftSubscriptionBanner = () => {
@@ -18,21 +19,19 @@ const ContinueGiftSubscriptionBanner = () => {
 
     const isRunning = action === 'continueGiftSubscription:running';
 
-    // TODO: Add translation strings once copy has been finalised
-    /* eslint-disable i18next/no-literal-string */
     return (
         <div className='gh-portal-cancelcontinue-container'>
             <div className='gh-portal-cancel-banner'>
                 <p style={{maxWidth: 'none', margin: '0 0 16px', textAlign: 'center', textWrap: 'pretty'}}>
-                    Continue with a paid subscription anytime. Your remaining gift period will be added as a free trial.
+                    {t('Continue with a paid subscription anytime. Your remaining gift period will be added as a free trial.')}
                 </p>
                 <ActionButton
                     onClick={() => doAction('continueGiftSubscription')}
                     isRunning={isRunning}
                     disabled={isRunning}
                     isPrimary={true}
                     brandColor={brandColor}
-                    label='Continue subscription'
+                    label={t('Continue subscription')}
                     style={{
                         width: '100%'
                     }}

apps/portal/src/components/pages/gift-page.js

@@ -9,11 +9,9 @@ import giftCardNoiseUrl from '../../images/gift-card-noise.webp';
 import giftCardOrbUrl from '../../images/gift-card-orb.webp';
 import {getAvailableProducts, getCurrencySymbol, formatNumber, getStripeAmount, isCookiesDisabled, getActiveInterval} from '../../utils/helpers';
 import {getGiftDurationLabel} from '../../utils/gift-redemption-notification';
+import {t} from '../../utils/i18n';
 import useCardTilt from '../../utils/use-card-tilt';
 
-// TODO: wrap strings with t() once copy is finalised
-/* eslint-disable i18next/no-literal-string */
-
 export const GiftPageStyles = `
 @property --shine-angle {
     syntax: '<angle>';
@@ -627,14 +625,14 @@ function GiftPriceSwitch({selectedInterval, setSelectedInterval}) {
                 className={'gh-portal-btn' + (selectedInterval === 'month' ? ' active' : '')}
                 onClick={() => setSelectedInterval('month')}
             >
-                1 month
+                {t('1 month')}
             </button>
             <button
                 data-test-button='switch-yearly'
                 className={'gh-portal-btn' + (selectedInterval === 'year' ? ' active' : '')}
                 onClick={() => setSelectedInterval('year')}
             >
-                1 year
+                {t('1 year')}
             </button>
         </div>
     );
@@ -719,9 +717,9 @@ const GiftPage = () => {
                             <div className='gh-portal-gift-checkout-bg' aria-hidden='true' />
                             <div className='gh-portal-gift-checkout-inner'>
                                 <header className='gh-portal-gift-checkout-header'>
-                                    <h1 className='gh-portal-main-title'>Gift a membership</h1>
+                                    <h1 className='gh-portal-main-title'>{t('Gift a membership')}</h1>
                                     <p className='gh-portal-gift-checkout-subtitle'>
-                                        Gift subscriptions are not available right now.
+                                        {t('Gift subscriptions are not available right now.')}
                                     </p>
                                 </header>
                             </div>
@@ -756,9 +754,9 @@ const GiftPage = () => {
                         <div className='gh-portal-gift-checkout-bg' aria-hidden='true' />
                         <div className='gh-portal-gift-checkout-inner' ref={innerRef}>
                             <header className='gh-portal-gift-checkout-header'>
-                                <h1 className='gh-portal-main-title'>Gift a membership</h1>
+                                <h1 className='gh-portal-main-title'>{t('Gift a membership')}</h1>
                                 <p className='gh-portal-gift-checkout-subtitle'>
-                                    Share a full membership to {siteTitle} with a friend or colleague
+                                    {t('Share a full membership to {siteTitle} with a friend or colleague', {siteTitle})}
                                 </p>
                             </header>
 
@@ -770,11 +768,11 @@ const GiftPage = () => {
                             </div>
 
                             <div className='gh-portal-gift-checkout-section'>
-                                <div className='gh-portal-gift-checkout-label'>{isSingleTier ? 'Membership details' : 'Tier'}</div>
+                                <div className='gh-portal-gift-checkout-label'>{isSingleTier ? t('Membership details') : t('Tier')}</div>
                                 <div
                                     className={'gh-portal-gift-checkout-tiers' + (isSingleTier ? ' single' : '')}
                                     role={isSingleTier ? undefined : 'radiogroup'}
-                                    aria-label={isSingleTier ? undefined : 'Tier'}
+                                    aria-label={isSingleTier ? undefined : t('Tier')}
                                 >
                                     {products.map((product) => {
                                         const isSelected = product.id === activeProduct.id;
@@ -835,7 +833,7 @@ const GiftPage = () => {
                             <div className='gh-portal-gift-checkout-cta-wrapper'>
                                 <ActionButton
                                     dataTestId='purchase-gift'
-                                    label='Continue'
+                                    label={t('Continue')}
                                     onClick={handlePurchase}
                                     disabled={isDisabled}
                                     isRunning={isPurchasing}

apps/portal/src/components/pages/gift-redemption-page.js

@@ -22,7 +22,6 @@ export const GiftRedemptionStyles = `
 }
 `;
 
-// TODO: Add translation strings once copy has been finalised
 const GiftRedemptionPage = () => {
     const {action, brandColor, doAction, member, pageData, site} = useContext(AppContext);
     const gift = pageData?.gift;
@@ -150,13 +149,13 @@ const GiftRedemptionPage = () => {
 
     const isRedeeming = action === 'redeemGift:running';
     const buttonLabel = isRedeeming
-        ? 'Redeeming gift...' // TODO: Add translation strings once copy has been finalised
-        : 'Redeem your membership'; // TODO: Add translation strings once copy has been finalised
+        ? t('Redeeming...')
+        : t('Redeem your membership');
     const siteIcon = site?.icon;
     const siteTitle = site?.title || '';
     const headerText = siteTitle
-        ? `You've been gifted a membership to ${siteTitle}`
-        : 'You\'ve been gifted a membership';
+        ? t('You\'ve been gifted a membership to {siteTitle}', {siteTitle})
+        : t('You\'ve been gifted a membership');
     const benefits = gift.tier.benefits || [];
     const tierDescription = gift.tier.description || '';
 
@@ -169,8 +168,7 @@ const GiftRedemptionPage = () => {
                         <div className='gh-portal-gift-checkout-bg' aria-hidden='true' />
                         <div className='gh-portal-gift-checkout-inner'>
                             <header className='gh-portal-gift-checkout-header'>
-                                {/* eslint-disable-next-line i18next/no-literal-string -- copy not yet finalised */}
-                                <h1 className='gh-portal-main-title'>A gift, just for you</h1>
+                                <h1 className='gh-portal-main-title'>{t('A gift, just for you')}</h1>
                                 <p className='gh-portal-gift-checkout-subtitle'>{headerText}</p>
                             </header>
 

apps/portal/src/components/pages/gift-success-page.js

@@ -6,12 +6,10 @@ import GiftDetailsToggle from '../common/gift-details-toggle';
 import copyTextToClipboard from '../../utils/copy-to-clipboard';
 import {getAvailableProducts} from '../../utils/helpers';
 import {getGiftDurationLabel} from '../../utils/gift-redemption-notification';
+import {t} from '../../utils/i18n';
 import useCardTilt from '../../utils/use-card-tilt';
 import {formatGiftValue} from './gift-page';
 
-// TODO: wrap strings with t() once copy is finalised
-/* eslint-disable i18next/no-literal-string */
-
 export const GiftSuccessStyle = `
 .gh-portal-gift-success-link {
     display: flex;
@@ -115,9 +113,9 @@ const GiftSuccessPage = () => {
                         <div className='gh-portal-gift-checkout-bg' aria-hidden='true' />
                         <div className='gh-portal-gift-checkout-inner'>
                             <header className='gh-portal-gift-checkout-header'>
-                                <h1 className='gh-portal-main-title'>Your gift is ready!</h1>
+                                <h1 className='gh-portal-main-title'>{t('Your gift is ready!')}</h1>
                                 <p className='gh-portal-gift-checkout-subtitle'>
-                                    Send the link below to share it with whoever you&apos;d like.
+                                    {t('Send the link below to share it with whoever you\'d like.')}
                                 </p>
                             </header>
 
@@ -126,13 +124,13 @@ const GiftSuccessPage = () => {
                                     <span className='gh-portal-gift-success-link-url'>{redeemUrl}</span>
                                     <button className='gh-portal-gift-success-copy' onClick={handleCopy} type='button'>
                                         {copied ? <CheckIcon /> : <CopyIcon />}
-                                        {copied ? 'Copied' : 'Copy'}
+                                        {copied ? t('Copied') : t('Copy')}
                                     </button>
                                 </div>
                             </div>
 
                             <p className='gh-portal-gift-success-footer'>
-                                Not ready to share? We&apos;ve also emailed a copy to your inbox.
+                                {t('Not ready to share? We\'ve also emailed a copy to your inbox.')}
                             </p>
                         </div>
                     </div>

apps/portal/src/utils/gift-redemption-notification.js

@@ -19,8 +19,7 @@ export function getGiftRedemptionSuccessMessage({member} = {}) {
     if (!tierName || !expiryDate) {
         return null;
     }
-    // TODO: Add translation strings once copy has been finalised
-    return `You now have access to ${tierName} until ${expiryDate}. Enjoy!`;
+    return t('You now have access to {tierName} until {expiryDate}. Enjoy!', {tierName, expiryDate});
 }
 
 export function getGiftRedemptionErrorMessage(error) {