From 91ce2fd21f3ca8a58324817774a584484a7a9142 Mon Sep 17 00:00:00 2001 From: Sam Lord <sam@ghost.org> Date: Wed, 24 May 2023 14:22:47 +0100 Subject: [PATCH] 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 --- .../components/PaidAccountActions.js | 28 +++++++++---------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/ghost/portal/src/components/pages/AccountHomePage/components/PaidAccountActions.js b/ghost/portal/src/components/pages/AccountHomePage/components/PaidAccountActions.js index 2809ae6e5f..9a62234e10 100644 --- a/ghost/portal/src/components/pages/AccountHomePage/components/PaidAccountActions.js +++ b/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}` : ``}`; }