Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Change interpolation string for t helper #21518

Draft
wants to merge 10 commits into
base: main
Choose a base branch
from
Draft

Change interpolation string for t helper #21518

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
94c03ed
rewrite strings for {{ vs {
cathysarisky Nov 4, 2024
4c8f4ee
rewrite strings for {{ vs {
cathysarisky Nov 4, 2024
ebdb312
Merge branch 'stashes-for-fun' of https://github.com/cathysarisky/Gho…
cathysarisky Nov 4, 2024
9db8d2a
all the strings...
cathysarisky Nov 4, 2024
d6ef64f
missed some
cathysarisky Nov 4, 2024
ed1d955
fix some missing {{
cathysarisky Nov 4, 2024
d5ca176
moar
cathysarisky Nov 4, 2024
d664cef
fix test
cathysarisky Nov 4, 2024
3f89982
accidental utility commit
cathysarisky Nov 4, 2024
22766d2
Merge branch 'main' into stashes-for-fun
cathysarisky Nov 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/comments-ui/src/components/content/CTABox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ const CTABox: React.FC<Props> = ({isFirst, isPaid}) => {
window.location.href = '#/portal/signin';
};

const text = reactStringReplace(isPaid ? t('Become a paid member of {{publication}} to start commenting.') : t('Become a member of {{publication}} to start commenting.'), '{{publication}}', () => (
const text = reactStringReplace(isPaid ? t('Become a paid member of {publication} to start commenting.') : t('Become a member of {publication} to start commenting.'), '{publication}', () => (
<span className="font-semibold">{publication}</span>
));

Expand Down
2 changes: 1 addition & 1 deletion apps/comments-ui/src/components/content/ContentTitle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ const Count: React.FC<CountProps> = ({showCount, count}) => {
}

return (
<div className="text-md text-neutral-900/50 sm:text-lg dark:text-white/50" data-testid="count">{t('{{amount}} comments', {amount: formatNumber(count)})}</div>
<div className="text-md text-neutral-900/50 sm:text-lg dark:text-white/50" data-testid="count">{t('{amount} comments', {amount: formatNumber(count)})}</div>
);
};

Expand Down
2 changes: 1 addition & 1 deletion apps/comments-ui/src/components/content/Pagination.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ const Pagination = () => {
// TODO: add i18n support for these strings when removing labs flag
const text = labs.commentImprovements
? (left === 1 ? 'Load more (1)' : `Load more (${formatNumber(left)})`)
: (left === 1 ? t('Show 1 previous comment') : t('Show {{amount}} previous comments', {amount: formatNumber(left)}));
: (left === 1 ? t('Show 1 previous comment') : t('Show {amount} previous comments', {amount: formatNumber(left)}));

return (
labs.commentImprovements ? (
Expand Down
4 changes: 2 additions & 2 deletions apps/comments-ui/src/components/content/RepliesPagination.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@ type Props = {
};
const RepliesPagination: React.FC<Props> = ({loadMore, count}) => {
const {t} = useAppContext();
const longText = count === 1 ? t('Show 1 more reply') : t('Show {{amount}} more replies', {amount: formatNumber(count)});
const shortText = t('{{amount}} more', {amount: formatNumber(count)});
const longText = count === 1 ? t('Show 1 more reply') : t('Show {amount} more replies', {amount: formatNumber(count)});
const shortText = t('{amount} more', {amount: formatNumber(count)});

return (
<div className="flex w-full items-center justify-start">
Expand Down
2 changes: 1 addition & 1 deletion apps/comments-ui/src/components/popups/AddDetailsPopup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,7 @@ const AddDetailsPopup = (props: Props) => {
return returnable;
};

const charsText = reactStringReplace(t('{{amount}} characters left'), '{{amount}}', () => {
const charsText = reactStringReplace(t('{amount} characters left'), '{amount}', () => {
return <b>{expertiseCharsLeft}</b>;
});

Expand Down
14 changes: 7 additions & 7 deletions apps/comments-ui/src/utils/helpers.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export function formatRelativeTime(dateString: string, t: TranslationFunction):
}

if (diff < 60) {
return t('{{amount}} seconds ago', {amount: diff});
return t('{amount} seconds ago', {amount: diff});
}

// Diff in minutes
Expand All @@ -29,7 +29,7 @@ export function formatRelativeTime(dateString: string, t: TranslationFunction):
if (Math.floor(diff) === 1) {
return t(`One min ago`);
}
return t('{{amount}} mins ago', {amount: Math.floor(diff)});
return t('{amount} mins ago', {amount: Math.floor(diff)});
}

// First check for yesterday
Expand All @@ -45,7 +45,7 @@ export function formatRelativeTime(dateString: string, t: TranslationFunction):
if (Math.floor(diff) === 1) {
return t(`One hour ago`);
}
return t('{{amount}} hrs ago', {amount: Math.floor(diff)});
return t('{amount} hrs ago', {amount: Math.floor(diff)});
}

// Diff in days
Expand All @@ -55,7 +55,7 @@ export function formatRelativeTime(dateString: string, t: TranslationFunction):
// Special case, we should compare based on dates in the future instead
return t(`One day ago`);
}
return t('{{amount}} days ago', {amount: Math.floor(diff)});
return t('{amount} days ago', {amount: Math.floor(diff)});
}

// Diff in weeks
Expand All @@ -65,7 +65,7 @@ export function formatRelativeTime(dateString: string, t: TranslationFunction):
// Special case, we should compare based on dates in the future instead
return t(`One week ago`);
}
return t('{{amount}} weeks ago', {amount: Math.floor(diff)});
return t('{amount} weeks ago', {amount: Math.floor(diff)});
}

// Diff in months
Expand All @@ -75,7 +75,7 @@ export function formatRelativeTime(dateString: string, t: TranslationFunction):
// Special case, we should compare based on dates in the future instead
return t(`One month ago`);
}
return t('{{amount}} months ago', {amount: Math.floor(diff)});
return t('{amount} months ago', {amount: Math.floor(diff)});
}

// Diff in years
Expand All @@ -84,7 +84,7 @@ export function formatRelativeTime(dateString: string, t: TranslationFunction):
// Special case, we should compare based on dates in the future instead
return t(`One year ago`);
}
return t('{{amount}} years ago', {amount: Math.floor(diff)});
return t('{amount} years ago', {amount: Math.floor(diff)});
}

export function formatExplicitTime(dateString: string): string {
Expand Down
2 changes: 1 addition & 1 deletion apps/portal/src/components/Notification.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ const NotificationText = ({type, status, context}) => {
const firstname = context.member.firstname || '';
return (
<p>
{firstname ? t('Welcome back, {{name}}!', {name: firstname}) : t('Welcome back!')}<br />{t('You\'ve successfully signed in.')}
{firstname ? t('Welcome back, {name}!', {name: firstname}) : t('Welcome back!')}<br />{t('You\'ve successfully signed in.')}
</p>
);
} else if (type === 'signin' && status === 'error') {
Expand Down
2 changes: 1 addition & 1 deletion apps/portal/src/components/common/NewsletterManagement.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,7 +136,7 @@ function ShowPaidMemberMessage({site, isPaid}) {

if (isPaid) {
return (
<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>
<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;
Expand Down
14 changes: 7 additions & 7 deletions apps/portal/src/components/common/ProductsSection.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -586,7 +586,7 @@ function ProductCardTrialDays({trialDays, discount, selectedInterval}) {
if (hasFreeTrialTier({site})) {
if (trialDays) {
return (
<span className="gh-portal-discount-label">{t('{{trialDays}} days free', {trialDays})}</span>
<span className="gh-portal-discount-label">{t('{trialDays} days free', {trialDays})}</span>
);
} else {
return null;
Expand All @@ -595,7 +595,7 @@ function ProductCardTrialDays({trialDays, discount, selectedInterval}) {

if (selectedInterval === 'year') {
return (
<span className="gh-portal-discount-label">{t('{{discount}}% discount', {discount})}</span>
<span className="gh-portal-discount-label">{t('{discount}% discount', {discount})}</span>
);
}

Expand Down Expand Up @@ -748,7 +748,7 @@ function ProductCardButton({selectedProduct, product, disabled, noOfProducts, tr
return (
<Interpolate
syntax={SYNTAX_I18NEXT}
string={t('Start {{amount}}-day free trial')}
string={t('Start {amount}-day free trial')}
mapping={{
amount: trialDays
}}
Expand Down Expand Up @@ -851,13 +851,13 @@ function YearlyDiscount({discount}) {
if (hasFreeTrialTier({site})) {
return (
<>
<span className="gh-portal-discount-label-trial">{t('{{discount}}% discount', {discount})}</span>
<span className="gh-portal-discount-label-trial">{t('{discount}% discount', {discount})}</span>
</>
);
} else {
return (
<>
<span className="gh-portal-discount-label">{t('{{discount}}% discount', {discount})}</span>
<span className="gh-portal-discount-label">{t('{discount}% discount', {discount})}</span>
</>
);
}
Expand Down Expand Up @@ -900,7 +900,7 @@ function ProductPriceSwitch({selectedInterval, setSelectedInterval, products}) {
}}
>
{t('Yearly')}
{(highestYearlyDiscount > 0) && <span className='gh-portal-maximum-discount'>{t('(save {{highestYearlyDiscount}}%)', {highestYearlyDiscount})}</span>}
{(highestYearlyDiscount > 0) && <span className='gh-portal-maximum-discount'>{t('(save {highestYearlyDiscount}%)', {highestYearlyDiscount})}</span>}
</button>
</div>
</div>
Expand Down Expand Up @@ -973,7 +973,7 @@ function ProductsSection({onPlanSelect, products, type = null, handleChooseSignu
const supportAddress = getSupportAddress({site});
return (
<p style={{textAlign: 'center'}}>
{t('Please contact {{supportAddress}} to adjust your complimentary subscription.', {supportAddress})}
{t('Please contact {supportAddress} to adjust your complimentary subscription.', {supportAddress})}
</p>
);
} else {
Expand Down
4 changes: 2 additions & 2 deletions apps/portal/src/components/pages/AccountEmailPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ export default function AccountEmailPage() {
<p className={`gh-portal-text-center gh-portal-header-message ${hideClassName}`}>
<Interpolate
syntax={SYNTAX_I18NEXT}
string={t('{{memberEmail}} will no longer receive emails when someone replies to your comments.')}
string={t('{memberEmail} will no longer receive emails when someone replies to your comments.')}
mapping={{
memberEmail: <strong>{member?.email}</strong>
}}
Expand All @@ -68,7 +68,7 @@ export default function AccountEmailPage() {
<p className={`gh-portal-text-center gh-portal-header-message ${hideClassName}`}>
<Interpolate
syntax={SYNTAX_I18NEXT}
string={t('{{memberEmail}} will no longer receive {{newsletterName}} newsletter.')}
string={t('{memberEmail} will no longer receive {newsletterName} newsletter.')}
mapping={{
memberEmail: <strong>{member?.email}</strong>,
newsletterName: <strong>{unsubscribedNewsletter?.name}</strong>
Expand Down
6 changes: 3 additions & 3 deletions apps/portal/src/components/pages/AccountHomePage/components/AccountWelcome.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ const AccountWelcome = () => {
const expiryAt = getDateString(expiryDate);
return (
<div className='gh-portal-section'>
<p className='gh-portal-text-center gh-portal-free-ctatext'>{t(`Your subscription will expire on {{expiryDate}}`, {expiryDate: expiryAt})}</p>
<p className='gh-portal-text-center gh-portal-free-ctatext'>{t(`Your subscription will expire on {expiryDate}`, {expiryDate: expiryAt})}</p>
</div>
);
}
Expand All @@ -40,13 +40,13 @@ const AccountWelcome = () => {
const trialEnd = getDateString(subscription.trial_end_at);
return (
<div className='gh-portal-section'>
<p className='gh-portal-text-center gh-portal-free-ctatext'>{t(`Your subscription will start on {{subscriptionStart}}`, {subscriptionStart: trialEnd})}</p>
<p className='gh-portal-text-center gh-portal-free-ctatext'>{t(`Your subscription will start on {subscriptionStart}`, {subscriptionStart: trialEnd})}</p>
</div>
);
}
return (
<div className='gh-portal-section'>
<p className='gh-portal-text-center gh-portal-free-ctatext'>{t(`Your subscription will renew on {{renewalDate}}`, {renewalDate: getDateString(currentPeriodEnd)})}</p>
<p className='gh-portal-text-center gh-portal-free-ctatext'>{t(`Your subscription will renew on {renewalDate}`, {renewalDate: getDateString(currentPeriodEnd)})}</p>
</div>
);
}
Expand Down
2 changes: 1 addition & 1 deletion apps/portal/src/components/pages/AccountHomePage/components/ContinueSubscriptionButton.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ const ContinueSubscriptionButton = () => {
}
const currentPeriodEnd = subscription.current_period_end;
return (
<p className='gh-portal-text-center gh-portal-free-ctatext'>{t(`Your subscription will expire on {{expiryDate}}`, {expiryDate: getDateString(currentPeriodEnd)})}</p>
<p className='gh-portal-text-center gh-portal-free-ctatext'>{t(`Your subscription will expire on {expiryDate}`, {expiryDate: getDateString(currentPeriodEnd)})}</p>
);
};

Expand Down
6 changes: 3 additions & 3 deletions apps/portal/src/components/pages/AccountHomePage/components/PaidAccountActions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ const PaidAccountActions = () => {
const compExpiry = getCompExpiry({member});
if (isComplimentary) {
if (compExpiry) {
label = `${t('Complimentary')} - ${t('Expires {{expiryDate}}', {expiryDate: compExpiry})}`;
label = `${t('Complimentary')} - ${t('Expires {expiryDate}', {expiryDate: compExpiry})}`;
} else {
label = label ? `${t('Complimentary')} (${label})` : t(`Complimentary`);
}
Expand Down Expand Up @@ -177,7 +177,7 @@ function FreeTrialLabel({subscription, t}) {
return (
<p className="gh-portal-account-discountcontainer">
<div>
<span>{t('Free Trial – Ends {{trialEnd}}', {trialEnd})}</span>
<span>{t('Free Trial – Ends {trialEnd}', {trialEnd})}</span>
{/* <span>{getSubFreeTrialDaysLeft({sub: subscription})} days left</span> */}
</div>
</p>
Expand Down Expand Up @@ -210,7 +210,7 @@ function getOfferLabel({offer, price, subscriptionStartDate, t}) {
if (isInThePast(offerEndDate)) {
return '';
}
durationLabel = t('Ends {{offerEndDate}}', {offerEndDate: getDateString(offerEndDate)});
durationLabel = t('Ends {offerEndDate}', {offerEndDate: getDateString(offerEndDate)});
}
offerLabel = `${getUpdatedOfferPrice({offer, price, useFormatted: true})}/${price.interval}${durationLabel ? ` — ${durationLabel}` : ``}`;
}
Expand Down
4 changes: 2 additions & 2 deletions apps/portal/src/components/pages/AccountPlanPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,7 @@ const PlanConfirmationSection = ({plan, type, onConfirm}) => {
const label = t('Confirm');
const planStartDate = getDateString(subscription.current_period_end);
const currentActivePlan = getMemberActivePrice({member});
let planStartingMessage = t('Starting {{startDate}}', {startDate: planStartDate});
let planStartingMessage = t('Starting {startDate}', {startDate: planStartDate});
if (currentActivePlan.id !== plan.id) {
planStartingMessage = t('Starting today');
}
Expand Down Expand Up @@ -162,7 +162,7 @@ const PlanConfirmationSection = ({plan, type, onConfirm}) => {
<p>
<Interpolate
syntax={SYNTAX_I18NEXT}
string={t(`If you cancel your subscription now, you will continue to have access until {{periodEnd}}.`)}
string={t(`If you cancel your subscription now, you will continue to have access until {periodEnd}.`)}
mapping={{
periodEnd: <strong>{getDateString(subscription.current_period_end)}</strong>
}}
Expand Down
10 changes: 5 additions & 5 deletions apps/portal/src/components/pages/EmailReceivingFAQ.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ export default function EmailReceivingPage() {
<p>
<Interpolate
syntax={SYNTAX_I18NEXT}
string={t(`The email address we have for you is {{memberEmail}} — if that's not correct, you can update it in your <button>account settings area</button>.`)}
string={t(`The email address we have for you is {memberEmail} — if that's not correct, you can update it in your <button>account settings area</button>.`)}
mapping={{
memberEmail: <strong>{member.email}</strong>,
button: <button className="gh-portal-btn-text" onClick={() => onAction('switchPage', {lastPage: 'emailReceivingFAQ', page: 'accountProfile'})}/>
Expand All @@ -56,7 +56,7 @@ export default function EmailReceivingPage() {
<p>
<Interpolate
syntax={SYNTAX_I18NEXT}
string={t(`In your email client add {{senderEmail}} to your contacts list. This signals to your mail provider that emails sent from this address should be trusted.`)}
string={t(`In your email client add {senderEmail} to your contacts list. This signals to your mail provider that emails sent from this address should be trusted.`)}
mapping={{
senderEmail: <strong>{defaultNewsletterSenderEmail}</strong>
}}
Expand All @@ -68,7 +68,7 @@ export default function EmailReceivingPage() {
<p>
<Interpolate
syntax={SYNTAX_I18NEXT}
string={t(`Send an email to {{senderEmail}} and say hello. This can also help signal to your mail provider that emails to and from this address should be trusted.`)}
string={t(`Send an email to {senderEmail} and say hello. This can also help signal to your mail provider that emails to and from this address should be trusted.`)}
mapping={{
senderEmail: <strong>{defaultNewsletterSenderEmail}</strong>
}}
Expand All @@ -80,7 +80,7 @@ export default function EmailReceivingPage() {
<p>
<Interpolate
syntax={SYNTAX_I18NEXT}
string={t(`If you have a corporate or government email account, reach out to your IT department and ask them to allow emails to be received from {{senderEmail}}`)}
string={t(`If you have a corporate or government email account, reach out to your IT department and ask them to allow emails to be received from {senderEmail}`)}
mapping={{
senderEmail: <strong>{defaultNewsletterSenderEmail}</strong>
}}
Expand All @@ -92,7 +92,7 @@ export default function EmailReceivingPage() {
<p>
<Interpolate
syntax={SYNTAX_I18NEXT}
string={t(`If you've completed all these checks and you're still not receiving emails, you can reach out to get support by contacting {{supportAddress}}.`)}
string={t(`If you've completed all these checks and you're still not receiving emails, you can reach out to get support by contacting {supportAddress}.`)}
mapping={{
supportAddress: <a href={supportAddress} onClick={() => {
supportAddress && window.open(supportAddress);
Expand Down
Loading
Loading