Fix welcome page translations

Author: RichDom2185

src/i18n/locales/en/welcome.json

@@ -1,9 +1,9 @@
 {
   "welcome": {
     "title": "Welcome to {{sourceAcademyDeploymentName}}",
-    "loggedInMessage": "You have logged in as <strong>{{name}}</strong>. {{sourceAcademyDeploymentName}}",
-    "resourcesForLearners": "Click <a href='{{resourcesForLearners}}'>here</a> to find a course that suits your needs.",
-    "resourcesForEducators": "Click <a href='{{resourcesForEducators}}'>here</a> for a list of resources to get started.",
-    "missingTranslation": "Sorry, translation is not available for this content."
+    "loggedInMessage": "You have logged in as <0>{{name}}</0>. {{sourceAcademyDeploymentName}} does not have any course information for this account",
+    "enrollmentMessage": "If you are enrolled in a course, check with the course staff to make sure your account is added to the course.",
+    "resourcesForLearners": "Click <0>here</0> to find a course that suits your needs.",
+    "resourcesForEducators": "Click <0>here</0> for a list of resources to get started."
   }
 }

src/i18n/locales/zh-SG/welcome.json

@@ -1,8 +1,9 @@
 {
   "welcome": {
     "title": "欢迎来到 {{sourceAcademyDeploymentName}}",
-    "loggedInMessage": "您已登录为 <strong>{{name}}</strong>。{{sourceAcademyDeploymentName}}",
-    "resourcesForLearners": "点击 <a href='{{resourcesForLearners}}'>此处</a> 查找适合您的课程。",
-    "resourcesForEducators": "点击 <a href='{{resourcesForEducators}}'>此处</a> 获取资源列表以开始。"
+    "loggedInMessage": "您已登录为 <0>{{name}}</0>。{{sourceAcademyDeploymentName}} 没有此账户的课程信息",
+    "enrollmentMessage": "如果您已注册课程，请联系课程团队，确保您的账户已加入课程。",
+    "resourcesForLearners": "点击<0>这里</0>寻找适合您的课程。",
+    "resourcesForEducators": "点击<0>这里</0>查看入门资源列表。"
   }
 }

src/pages/welcome/Welcome.tsx

@@ -1,5 +1,6 @@
 import { Card, H2, UL } from '@blueprintjs/core';
-import { useTranslation } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
+import { ItalicLink } from 'src/commons/sideContent/content/SideContentCseMachine';
 import Constants, { Links } from 'src/commons/utils/Constants';
 import { useSession } from 'src/commons/utils/Hooks';
 
@@ -9,33 +10,34 @@ const Welcome: React.FC = () => {
   const { t } = useTranslation();
   const { name } = useSession();
 
+  const { sourceAcademyDeploymentName } = Constants;
   return (
     <div className="fullpage">
       <Card className="fullpage-content">
         <div className={styles.fullpage}>
           <div>
-            <H2>
-              {t('welcome.title', {
-                sourceAcademyDeploymentName: Constants.sourceAcademyDeploymentName
-              })}
-            </H2>
+            <H2>{t('welcome.title', { sourceAcademyDeploymentName })}</H2>
             <div>
-              {t('welcome.loggedInMessage', {
-                name,
-                sourceAcademyDeploymentName: Constants.sourceAcademyDeploymentName
-              })}
+              <Trans
+                i18nKey="welcome.loggedInMessage"
+                components={[<strong />]}
+                tOptions={{ name, sourceAcademyDeploymentName }}
+              />
             </div>
             <div className={styles['fullpage-content']}>
               <UL className={styles['text-left']}>
+                <li>{t('welcome.enrollmentMessage')}</li>
                 <li>
-                  {t('welcome.resourcesForLearners', {
-                    resourcesForLearners: Links.resourcesForLearners
-                  })}
+                  <Trans
+                    i18nKey="welcome.resourcesForLearners"
+                    components={[<ItalicLink href={Links.resourcesForLearners} />]}
+                  />
                 </li>
                 <li>
-                  {t('welcome.resourcesForEducators', {
-                    resourcesForEducators: Links.resourcesForEducators
-                  })}
+                  <Trans
+                    i18nKey="welcome.resourcesForEducators"
+                    components={[<ItalicLink href={Links.resourcesForEducators} />]}
+                  />
                 </li>
               </UL>
             </div>