steps/FirstStep.tsx: Improve texts (#1733)

* steps/FirstStep.tsx: Improve texts * locales/one-time-donation.json Remove italic and <br> from stripe's fee translations * bg/one-time-donation: Remove unnecessary dot from bg translation Requested by marketing team..
podkrepi-bg · Mar 8, 2024 · 42d5c7c · 42d5c7c
1 parent 4cb7987
commit 42d5c7c
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 20 deletions.
diff --git a/public/locales/bg/one-time-donation.json b/public/locales/bg/one-time-donation.json
@@ -49,9 +49,9 @@
   "third-step": {
     "title": "Как желаете да дарите?",
     "card": "Карта",
-    "card-include-fees": "Съгласен съм да покрия таксата за превода, така че да се получи чистата сума, която съм избрал/а като дарение, за карта издадена в: ",
-    "card-fees": "Даренията, платени с карта се обработват през системата на Stripe и за всеки трансфер Stripe удържат такса. Моля, изберете сумата, която желаете да преведете и по-надолу ще видите изчислена конкретната такса: ",
-    "card-calculated-fees": "За вашия превод от <strong>{{totalAmount}}</strong>, Stripe ще удържи <strong>{{fees}}</strong> и по кампанията като дарение ще се отразят <strong>{{amount}}</strong>. Повече за таксите на Stripe вижте тук:",
+    "card-include-fees": "Искам да покрия банкова такса за карта издадена в регион:",
+    "card-fees": "Даренията, платени с карта се обработват през системата на Stripe и за всеки трансфер Stripe удържат такса. Моля, изберете сумата, която желаете да преведете и по-надолу ще видите изчислена конкретната такса.",
+    "card-calculated-fees": "За вашия превод от <strong>{{totalAmount}}</strong>, Stripe ще удържи <strong>{{fees}}</strong> и по кампанията като дарение ще се отразят <strong>{{amount}}</strong> Повече информация за таксите на Stripe може да намерите на: <stripeLink>https://stripe.com/en-bg/pricing</stripeLink>",
     "card-region": {
       "title": "регион",
       "EU": "Европа",
@@ -70,7 +70,7 @@
     "reason-donation": "Oснование за превод:",
     "message-warning": "Ако не въведете точно основанието, може да не успеем да разпределим парите към предназначената кампания.",
     "recurring-donation-title": "Месечно дарение",
-    "recurring-donation-info": "Желая да дарявам същата сума всеки месец до края на кампанията. Може да се откажете по всяко време в профила си: "
+    "recurring-donation-info": "Желая да дарявам същата сума всеки месец до края на кампанията. Може да се откажете по всяко време от <profileLink>профила си</profileLink> "
   },
   "alerts": {
     "success": "Дарението е направено успешно!",

diff --git a/public/locales/en/one-time-donation.json b/public/locales/en/one-time-donation.json
@@ -50,8 +50,8 @@
     "title": "How would you like to pay",
     "card": "Card",
     "card-include-fees": "I want to cover transaction fees for card issued in:",
-    "card-fees": "For donations by card we use the services of Stripe and for every transfer they charge a fee depending on region of your card issuer. To orient you about the net donation, after you choose the desired amount, we will show you the calculated fee below. More details for Stripe fees can be found here: ",
-    "card-calculated-fees": "For your transfer of <strong>{{totalAmount}}</strong>, the fee from Stripe will be <strong>{{fees}}</strong>, and the campaign will receive <strong>{{amount}}</strong>",
+    "card-fees": "For donations by card we use the services of Stripe and for every transfer they charge a fee depending on region of your card issuer. To orient you about the net donation, after you choose the desired amount, we will show you the calculated fee below.",
+    "card-calculated-fees": "For your transfer of <strong>{{totalAmount}}</strong>, the fee from Stripe will be <strong>{{fees}}</strong>, and the campaign will receive <strong>{{amount}}</strong>. Additional information regarding Stripe's fees can be found at: <stripeLink>https://stripe.com/en-bg/pricing</stripeLink>",
     "card-region": {
       "title": "region",
       "EU": "Europe",
@@ -70,7 +70,7 @@
     "reason-donation": "Payment reference:",
     "message-warning": "If you don't enter the exact reference we may not be able to assign the money to the desired campaign.",
     "recurring-donation-title": "Monthly donation",
-    "recurring-donation-info": "Donate the same amount every month until the end of the campaign! Cancel anytime in your profile!"
+    "recurring-donation-info": "Donate the same amount every month until the end of the campaign! Cancel anytime in your <profileLink>profile</profileLink>!"
   },
   "alerts": {
     "success": "Donation was processed successfully!",

diff --git a/src/components/client/one-time-donation/steps/FirstStep.tsx b/src/components/client/one-time-donation/steps/FirstStep.tsx
@@ -26,6 +26,7 @@ import { StepsContext } from '../helpers/stepperContext'
 import { stripeFeeCalculator, stripeIncludeFeeCalculator } from '../helpers/stripe-fee-calculator'
 
 import { BankDetailsLabel } from 'components/client/support-us-form/SupportUs.styled'
+import Link from 'next/link'
 
 const PaypalDonationButton = dynamic(() => import('../helpers/paypalDonationButton'), {
   ssr: false,
@@ -211,9 +212,6 @@ export default function FirstStep() {
       <Collapse unmountOnExit in={paymentField.value === 'card'} timeout="auto">
         <Typography paragraph={true} variant="body2" sx={{ marginTop: theme.spacing(2) }}>
           {t('third-step.card-fees')}
-          <ExternalLink href="https://stripe.com/en-bg/pricing">
-            https://stripe.com/en-bg/pricing
-          </ExternalLink>
         </Typography>
 
         <Typography variant="h4" sx={{ marginTop: theme.spacing(3) }}>
@@ -284,7 +282,7 @@ export default function FirstStep() {
                     ]}
                   />
                 </Grid>
-                <Grid item xs={12}>
+                <Grid item xs={12} sx={{ mt: 1 }}>
                   <Trans
                     t={t}
                     i18nKey="third-step.card-calculated-fees"
@@ -293,10 +291,10 @@ export default function FirstStep() {
                       fees: moneyPublicDecimals2(amountWithFees.value - amountWithoutFees.value),
                       totalAmount: moneyPublicDecimals2(amountWithFees.value),
                     }}
+                    components={{
+                      stripeLink: <ExternalLink href="https://stripe.com/en-bg/pricing" />,
+                    }}
                   />
-                  <ExternalLink href="https://stripe.com/en-bg/pricing">
-                    https://stripe.com/en-bg/pricing
-                  </ExternalLink>
                 </Grid>
                 <Grid item xs={12}>
                   <Typography variant="h5" my={2} sx={{ display: 'flex', alignItems: 'center' }}>
@@ -312,12 +310,19 @@ export default function FirstStep() {
                   <CheckboxField
                     name="isRecurring"
                     label={
-                      <Typography variant="body2">
-                        {t('third-step.recurring-donation-info')}
-                        <ExternalLink href="https://podkrepi.bg/profile/recurring-donations">
-                          https://podkrepi.bg/profile/recurring-donations
-                        </ExternalLink>
-                      </Typography>
+                      <Trans
+                        t={t}
+                        i18nKey={'third-step.recurring-donation-info'}
+                        components={{
+                          profileLink: (
+                            <Link
+                              style={{ color: theme.palette.primary.light }}
+                              href="https://podkrepi.bg/profile/recurring-donations"
+                              prefetch={false}
+                            />
+                          ),
+                        }}
+                      />
                     }
                   />
                 </Grid>