feat(i18n, client): Allow translation of cert (#40919)

Modifies the certification page to be translatable.

Signed-off-by: nhcarrigan <nhcarrigan@gmail.com>

client/i18n/locales/chinese/translations.json

@@ -468,5 +468,13 @@
     "invalid-protocol": "URL 必须以 http 或 https 开头",
     "url-not-image": "URL 必须直接链接到图片文件",
     "use-valid-url": "请使用有效的 URL"
+  },
+  "certification": {
+    "certifies": "Chinese: This certifies that",
+    "completed": "Chinese: has successfully completed the freeCodeCamp.org",
+    "developer": "Chinese: Developer Certification, representing approximately",
+    "executive": "Chinese: Executive Director, freeCodeCamp.org",
+    "verify": "Chinese: Verify this certification at {{certURL}}",
+    "issued": "Chinese: Issued"
   }
 }

client/i18n/locales/english/translations.json

@@ -468,5 +468,13 @@
     "invalid-protocol": "URL must start with http or https",
     "url-not-image": "URL must link directly to an image file",
     "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"
   }
 }

client/i18n/locales/espanol/translations.json

@@ -468,5 +468,13 @@
     "invalid-protocol": "La URL debe comenzar con http o https",
     "url-not-image": "URL debes enlazar directamente a un archivo de imagen",
     "use-valid-url": "Utiliza un URL válido"
+  },
+  "certification": {
+    "certifies": "Spanish: This certifies that",
+    "completed": "Spanish: has successfully completed the freeCodeCamp.org",
+    "developer": "Spanish: Developer Certification, representing approximately",
+    "executive": "Spanish: Executive Director, freeCodeCamp.org",
+    "verify": "Spanish: Verify this certification at {{certURL}}",
+    "issued": "Spanish: Issued"
   }
 }

client/i18n/translations-schema.js

@@ -568,6 +568,14 @@ const translationsSchema = {
     'invalid-protocol': 'URL must start with http or https',
     'url-not-image': 'URL must link directly to an image file',
     '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'
   }
 };
 

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

@@ -324,7 +324,7 @@ const ShowCertification = props => {
             </Col>
             <Col md={7} sm={12}>
               <div data-cy='issue-date' className='issue-date'>
-                Issued&nbsp;
+                {t('certification.issued')}&nbsp;
                 <strong>{format(certDate, 'MMMM d, y')}</strong>
               </div>
             </Col>
@@ -332,17 +332,17 @@ const ShowCertification = props => {
 
           <main className='information'>
             <div className='information-container'>
-              <h3>This certifies that</h3>
+              <h3>{t('certification.certifies')}</h3>
               <h1>
                 <strong>{displayName}</strong>
               </h1>
-              <h3>has successfully completed the freeCodeCamp.org</h3>
+              <h3>{t('certification.completed')}</h3>
               <h1>
                 <strong>{certTitle}</strong>
               </h1>
               <h4>
-                Developer Certification, representing approximately{' '}
-                {completionTime} hours of coursework
+                {t('certification.developer')} {completionTime} hours of
+                coursework
               </h4>
             </div>
           </main>
@@ -358,10 +358,12 @@ const ShowCertification = props => {
               <p>
                 <strong>Quincy Larson</strong>
               </p>
-              <p>Executive Director, freeCodeCamp.org</p>
+              <p>{t('certification.executive')}</p>
             </div>
             <Row>
-              <p className='verify'>Verify this certification at {certURL}</p>
+              <p className='verify'>
+                {t('certification.verify', { certURL: certURL })}
+              </p>
             </Row>
           </footer>
         </Row>