TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-11-30 11:54:33 +03:00
Code Issues Projects Releases Wiki Activity

🎨 Added missing translation strings in portal (#17400)

Browse Source 
closes https://github.com/TryGhost/Product/issues/3613

- Strings around the buttons was still hardcoded. 
- This replaces them with the `i18n` integration.

<!-- Leave the line below if you'd like GitHub Copilot to generate a
summary from your commit -->
<!--
copilot:summary
-->
### <samp>🤖 Generated by Copilot at 068d0d6</samp>

Added internationalization support to the `ProductsSection` component
using the `t` function and the `Interpolate` component. This enables the
component to display product information in different languages and
currencies.
This commit is contained in:
Ronald Langeveld 2023-07-18 11:15:41 +02:00 committed by GitHub
parent b6439457e6
commit a85d271754
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 15 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
apps/portal/src/components/common/ProductsSection.js
View File

@ -4,6 +4,8 @@ import {ReactComponent as CheckmarkIcon} from '../../images/icons/checkmark.svg'
import {getCurrencySymbol, getPriceString, getStripeAmount, getMemberActivePrice, getProductFromPrice, getFreeTierTitle, getFreeTierDescription, getFreeProduct, getFreeProductBenefits, formatNumber, isCookiesDisabled, hasOnlyFreeProduct, isMemberActivePrice, hasFreeTrialTier} from '../../utils/helpers';
import AppContext from '../../AppContext';
import calculateDiscount from '../../utils/discount';
import Interpolate from '@doist/react-interpolate';
import {SYNTAX_I18NEXT} from '@doist/react-interpolate';
export const ProductsSectionStyles = ({site}) => {
// const products = getSiteProducts({site});
@ -636,7 +638,7 @@ function ProductCardPrice({product}) {
}
function FreeProductCard({products, handleChooseSignup, error}) {
const {site, action} = useContext(AppContext);
const {site, action, t} = useContext(AppContext);
const {selectedProduct, setSelectedProduct} = useContext(ProductsContext);
let cardClass = selectedProduct === 'free' ? 'gh-portal-product-card free checked' : 'gh-portal-product-card free';
@ -707,7 +709,7 @@ function FreeProductCard({products, handleChooseSignup, error}) {
onClick={(e) => {
handleChooseSignup(e, 'free');
}}>
{((selectedProduct === 'free' && disabled) ? <LoaderIcon className='gh-portal-loadingicon' /> : 'Choose')}
{((selectedProduct === 'free' && disabled) ? <LoaderIcon className='gh-portal-loadingicon' /> : t('Choose'))}
</button>
{error && <div className="gh-portal-error-message">{error}</div>}
</div>
@ -719,6 +721,7 @@ function FreeProductCard({products, handleChooseSignup, error}) {
}
function ProductCardButton({selectedProduct, product, disabled, noOfProducts, trialDays}) {
const {t} = useContext(AppContext);
if (selectedProduct === product.id && disabled) {
return (
<LoaderIcon className='gh-portal-loadingicon' />
@ -726,10 +729,18 @@ function ProductCardButton({selectedProduct, product, disabled, noOfProducts, tr
}
if (trialDays > 0) {
return ('Start ' + trialDays + '-day free trial');
return (
<Interpolate
syntax={SYNTAX_I18NEXT}
string={t('Start {{amount}}-day free trial')}
mapping={{
amount: trialDays
}}
/>
);
}
return (noOfProducts > 1 ? 'Choose' : 'Continue');
return (noOfProducts > 1 ? t('Choose') : t('Continue'));
}
function ProductCard({product, products, selectedInterval, handleChooseSignup, error}) {