From e36a8e5cb68f7c55515629f93354ac940007e3c9 Mon Sep 17 00:00:00 2001
From: "Nicholas Carrigan (he/him)" <nhcarrigan@gmail.com>
Date: Sat, 6 Feb 2021 01:31:03 -0800
Subject: [PATCH] feat(i18n, client): convert cert to big string (#40934)

---
 client/i18n/locales/chinese/translations.json |  6 ++--
 client/i18n/locales/english/translations.json |  6 ++--
 client/i18n/locales/espanol/translations.json |  6 ++--
 client/i18n/translations-schema.js            |  7 ++---
 .../client-only-routes/ShowCertification.js   | 30 +++++++++++--------
 5 files changed, 26 insertions(+), 29 deletions(-)

diff --git a/client/i18n/locales/chinese/translations.json b/client/i18n/locales/chinese/translations.json
index 48047246f9..fd85c6040c 100644
--- a/client/i18n/locales/chinese/translations.json
+++ b/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>"
   }
 }
diff --git a/client/i18n/locales/english/translations.json b/client/i18n/locales/english/translations.json
index 400a2203a5..08e3f034bc 100644
--- a/client/i18n/locales/english/translations.json
+++ b/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>"
   }
 }
diff --git a/client/i18n/locales/espanol/translations.json b/client/i18n/locales/espanol/translations.json
index 6397c0465f..c46a5fc677 100644
--- a/client/i18n/locales/espanol/translations.json
+++ b/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>"
   }
 }
diff --git a/client/i18n/translations-schema.js b/client/i18n/translations-schema.js
index dc7b3a1bda..dc9837faa5 100644
--- a/client/i18n/translations-schema.js
+++ b/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>'
   }
 };
 
diff --git a/client/src/client-only-routes/ShowCertification.js b/client/src/client-only-routes/ShowCertification.js
index a4c4388950..2feb7c0ecd 100644
--- a/client/src/client-only-routes/ShowCertification.js
+++ b/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>