feat(i18n, client): convert cert to big string (#40934)

client/i18n/locales/chinese/translations.json

@@ -470,11 +470,9 @@
     "use-valid-url": "请使用有效的 URL"
   },
   "certification": {
-    "certifies": "This certifies that",
-    "completed": "has successfully completed the freeCodeCamp.org",
-    "developer": "Developer Certification, representing approximately",
     "executive": "Executive Director, freeCodeCamp.org",
     "verify": "Verify this certification at {{certURL}}",
-    "issued": "Issued"
+    "issued": "Issued",
+    "fulltext": "<0>This certifies that</0> <1>{{user}}</1> <2>has successfully completed the freeCodeCamp.org</2> <3>{{title}}</3> <4>Developer Certification, representing approximately {{time}} hours of coursework.</4>"
   }
 }

client/i18n/locales/english/translations.json

@@ -470,11 +470,9 @@
     "use-valid-url": "Please use a valid URL"
   },
   "certification": {
-    "certifies": "This certifies that",
-    "completed": "has successfully completed the freeCodeCamp.org",
-    "developer": "Developer Certification, representing approximately",
     "executive": "Executive Director, freeCodeCamp.org",
     "verify": "Verify this certification at {{certURL}}",
-    "issued": "Issued"
+    "issued": "Issued",
+    "fulltext": "<0>This certifies that</0> <1>{{user}}</1> <2>has successfully completed the freeCodeCamp.org</2> <3>{{title}}</3> <4>Developer Certification, representing approximately {{time}} hours of coursework.</4>"
   }
 }

client/i18n/locales/espanol/translations.json

@@ -470,11 +470,9 @@
     "use-valid-url": "Utiliza un URL válido"
   },
   "certification": {
-    "certifies": "This certifies that",
-    "completed": "has successfully completed the freeCodeCamp.org",
-    "developer": "Developer Certification, representing approximately",
     "executive": "Executive Director, freeCodeCamp.org",
     "verify": "Verify this certification at {{certURL}}",
-    "issued": "Issued"
+    "issued": "Issued",
+    "fulltext": "<0>This certifies that</0> <1>{{user}}</1> <2>has successfully completed the freeCodeCamp.org</2> <3>{{title}}</3> <4>Developer Certification, representing approximately {{time}} hours of coursework.</4>"
   }
 }

client/i18n/translations-schema.js

@@ -570,12 +570,11 @@ const translationsSchema = {
     'use-valid-url': 'Please use a valid URL'
   },
   certification: {
-    certifies: 'This certifies that',
-    completed: 'has successfully completed the freeCodeCamp.org',
-    developer: 'Developer Certification, representing approximately',
     executive: 'Executive Director, freeCodeCamp.org',
     verify: 'Verify this certification at {{certURL}}',
-    issued: 'Issued'
+    issued: 'Issued',
+    fulltext:
+      '<0>This certifies that</0> <1>{{user}}</1> <2>has successfully completed the freeCodeCamp.org</2> <3>{{title}}</3> <4>Developer Certification, representing approximately {{time}} hours of coursework.</4>'
   }
 };
 

client/src/client-only-routes/ShowCertification.js

@@ -11,7 +11,7 @@ import ShowProjectLinks from './ShowProjectLinks';
 import FreeCodeCampLogo from '../assets/icons/FreeCodeCampLogo';
 // eslint-disable-next-line max-len
 import DonateForm from '../components/Donation/DonateForm';
-import { useTranslation } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 
 import {
   showCertSelector,
@@ -332,18 +332,22 @@ const ShowCertification = props => {
 
           <main className='information'>
             <div className='information-container'>
-              <h3>{t('certification.certifies')}</h3>
-              <h1>
-                <strong>{displayName}</strong>
-              </h1>
-              <h3>{t('certification.completed')}</h3>
-              <h1>
-                <strong>{certTitle}</strong>
-              </h1>
-              <h4>
-                {t('certification.developer')} {completionTime} hours of
-                coursework
-              </h4>
+              <Trans
+                user={displayName}
+                title={certTitle}
+                time={completionTime}
+                i18nKey='certification.fulltext'
+              >
+                <h3>placeholder</h3>
+                <h1>
+                  <strong>{{ user: displayName }}</strong>
+                </h1>
+                <h3>placeholder</h3>
+                <h1>
+                  <strong>{{ title: certTitle }}</strong>
+                </h1>
+                <h4>{{ time: completionTime }}</h4>
+              </Trans>
             </div>
           </main>
           <footer>