From a85d2717544c1ccdcc0c9af941aea939d80d5055 Mon Sep 17 00:00:00 2001
From: Ronald Langeveld <hi@ronaldlangeveld.com>
Date: Tue, 18 Jul 2023 11:15:41 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Added=20missing=20translation=20?=
 =?UTF-8?q?strings=20in=20portal=20(#17400)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 .../src/components/common/ProductsSection.js  | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/apps/portal/src/components/common/ProductsSection.js b/apps/portal/src/components/common/ProductsSection.js
index c01c2640d8..f0eee36a2f 100644
--- a/apps/portal/src/components/common/ProductsSection.js
+++ b/apps/portal/src/components/common/ProductsSection.js
@@ -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}) {