Wrapped i18n strings for paid account actions

refs: https://github.com/TryGhost/Ghost/issues/16628

Separate commit for these, this change was a little more complex since the string "Complimentary" was repeated several times, with different additional context.

I decided to keep "Complimentary" by itself as a translatable string, and concatenated a second string for the expiry.

If this would be better as 3 strings, then we could switch to having these:
- "Complimentary"
- "Complimentary ({{label}})"
- "Complimentary - Expires {{expiry date}}"

^ Makes sense only if the use of parentheses & hyphens would be changed in other locales

ghost/portal/src/components/pages/AccountHomePage/components/PaidAccountActions.js

@@ -6,7 +6,7 @@ import {ReactComponent as OfferTagIcon} from '../../../../images/icons/offer-tag
 import {useContext} from 'react';
 
 const PaidAccountActions = () => {
-    const {member, site, onAction} = useContext(AppContext);
+    const {member, site, onAction, t} = useContext(AppContext);
 
     const onEditBilling = () => {
         const subscription = getMemberSubscription({member});
@@ -33,13 +33,13 @@ const PaidAccountActions = () => {
             const {amount = 0, currency, interval} = price;
             label = `${Intl.NumberFormat('en', {currency, style: 'currency'}).format(amount / 100)}/${interval}`;
         }
-        let offerLabelStr = getOfferLabel({price, offer, subscriptionStartDate: startDate});
+        let offerLabelStr = getOfferLabel({price, offer, subscriptionStartDate: startDate, t});
         const compExpiry = getCompExpiry({member});
         if (isComplimentary) {
             if (compExpiry) {
-                label = `Complimentary - Expires ${compExpiry}`;
+                label = `${t('Complimentary')} - ${t('Expires {{expiryDate}}', {expiryDate: compExpiry})}`;
             } else {
-                label = label ? `Complimentary (${label})` : `Complimentary`;
+                label = label ? `${t('Complimentary')} (${label})` : t(`Complimentary`);
             }
         }
         let oldPriceClassName = '';
@@ -68,7 +68,7 @@ const PaidAccountActions = () => {
                     <p className={oldPriceClassName}>
                         {label}
                     </p>
-                    <FreeTrialLabel subscription={subscription} />
+                    <FreeTrialLabel subscription={subscription} t={t} />
                 </>
             );
         }
@@ -93,7 +93,7 @@ const PaidAccountActions = () => {
                 className='gh-portal-btn gh-portal-btn-list' onClick={e => openUpdatePlan(e)}
                 data-test-button='change-plan'
             >
-                Change
+                {t('Change')}
             </button>
         );
     };
@@ -114,7 +114,7 @@ const PaidAccountActions = () => {
         const {action} = useContext(AppContext);
         const label = action === 'editBilling:running' ? (
             <LoaderIcon className='gh-portal-billing-button-loader' />
-        ) : 'Update';
+        ) : t('Update');
         if (isComplimentary) {
             return null;
         }
@@ -122,7 +122,7 @@ const PaidAccountActions = () => {
         return (
             <section>
                 <div className='gh-portal-list-detail'>
-                    <h3>Billing info</h3>
+                    <h3>{t('Billing info')}</h3>
                     <CardLabel defaultCardLast4={defaultCardLast4} />
                 </div>
                 <button
@@ -143,7 +143,7 @@ const PaidAccountActions = () => {
             price,
             default_payment_card_last4: defaultCardLast4
         } = subscription || {};
-        let planLabel = 'Plan';
+        let planLabel = t('Plan');
 
         // Show name of tiers if there are multiple tiers
         if (hasMultipleProductsFeature({site}) && getMemberTierName({member})) {
@@ -169,13 +169,13 @@ const PaidAccountActions = () => {
     return null;
 };
 
-function FreeTrialLabel({subscription, priceLabel}) {
+function FreeTrialLabel({subscription, priceLabel, t}) {
     if (subscriptionHasFreeTrial({sub: subscription})) {
         const trialEnd = getDateString(subscription.trial_end_at);
         return (
             <p className="gh-portal-account-discountcontainer">
                 <div>
-                    <span>Free Trial – Ends {trialEnd}</span>
+                    <span>{t('Free Trial – Ends {{trialEnd}}', {trialEnd})}</span>
                     {/* <span>{getSubFreeTrialDaysLeft({sub: subscription})} days left</span> */}
                 </div>
             </p>
@@ -184,7 +184,7 @@ function FreeTrialLabel({subscription, priceLabel}) {
     return null;
 }
 
-function getOfferLabel({offer, price, subscriptionStartDate}) {
+function getOfferLabel({offer, price, subscriptionStartDate, t}) {
     let offerLabel = '';
 
     if (offer?.type === 'trial') {
@@ -199,7 +199,7 @@ function getOfferLabel({offer, price, subscriptionStartDate}) {
         const discountDuration = offer.duration;
         let durationLabel = '';
         if (discountDuration === 'forever') {
-            durationLabel = `Forever`;
+            durationLabel = t(`Forever`);
         } else if (discountDuration === 'repeating') {
             const durationInMonths = offer.duration_in_months || 0;
             let offerStartDate = new Date(subscriptionStartDate);
@@ -208,7 +208,7 @@ function getOfferLabel({offer, price, subscriptionStartDate}) {
             if (isInThePast(offerEndDate)) {
                 return '';
             }
-            durationLabel = `Ends ${getDateString(offerEndDate)}`;
+            durationLabel = t('Ends {{offerEndDate}}', {offerEndDate: getDateString(offerEndDate)});
         }
         offerLabel = `${getUpdatedOfferPrice({offer, price, useFormatted: true})}/${price.interval}${durationLabel ? ` — ${durationLabel}` : ``}`;
     }