From 821aee9687a3ed03a95f58b5928636915dc47885 Mon Sep 17 00:00:00 2001
From: "Nicholas Carrigan (he/him)" <nhcarrigan@gmail.com>
Date: Mon, 24 May 2021 10:59:35 -0700
Subject: [PATCH] feat: i18n for help text (#42235)

Add internationalisation capabilities for the pre-filled text in
the Ask for Help forum post.
---
 client/i18n/locales/english/translations.json | 17 +++++
 .../Challenges/redux/create-question-epic.js  | 64 ++++++++-----------
 2 files changed, 42 insertions(+), 39 deletions(-)

diff --git a/client/i18n/locales/english/translations.json b/client/i18n/locales/english/translations.json
index a615c39087..b8e2d94f37 100644
--- a/client/i18n/locales/english/translations.json
+++ b/client/i18n/locales/english/translations.json
@@ -565,5 +565,22 @@
     "set-certs-public": "Set your certification settings to public",
     "set-profile-public": "Set your profile settings to public",
     "set-claim": "Claim and view your certification"
+  },
+  "forum-help": {
+    "browser-info": "**Your browser information:**",
+    "user-agent": "User Agent is: <code>{{userAgent}}</code>",
+    "challenge": "**Challenge:** {{challengeTitle}}",
+    "challenge-link": "**Link to the challenge:**",
+    "whats-happening": "**Tell us what's happening:**",
+    "describe": "Describe your issue in detail here.",
+    "camper-project": "**Your project link(s)**",
+    "camper-code": "**Your code so far**",
+    "warning": "WARNING",
+    "too-long-one": "The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.",
+    "too-long-two": "You will need to take an additional step here so the code you wrote presents in an easy to read format.",
+    "too-long-three": "Please copy/paste all the editor code showing in the challenge from where you just linked.",
+    "add-code-one": "Replace these two sentences with your copied code.",
+    "add-code-two": "Please leave the ``` line above and the ``` line below,",
+    "add-code-three": "because they allow your code to properly format in the post."
   }
 }
diff --git a/client/src/templates/Challenges/redux/create-question-epic.js b/client/src/templates/Challenges/redux/create-question-epic.js
index 9427ccd0f6..c5c230fdb5 100644
--- a/client/src/templates/Challenges/redux/create-question-epic.js
+++ b/client/src/templates/Challenges/redux/create-question-epic.js
@@ -10,6 +10,7 @@ import {
 import { tap, mapTo } from 'rxjs/operators';
 import { transformEditorLink } from '../utils';
 import envData from '../../../../../config/env.json';
+import i18next from 'i18next';
 
 const { forumLocation } = envData;
 
@@ -42,56 +43,41 @@ function createQuestionEpic(action$, state$, { window }) {
         projectFormValuesSelector(state)
       );
       const endingText = dedent(
-        `**Your browser information:**
-
-        User Agent is: <code>${userAgent}</code>.
-
-        **Challenge:** ${challengeTitle}
-
-        **Link to the challenge:**
-        ${href}`
+        `${i18next.t('forum-help.browser-info')}\n\n${i18next.t(
+          'forum-help.user-agent',
+          { userAgent }
+        )}\n\n${i18next.t(
+          'forum-help.challenge'
+        )} ${challengeTitle}\n\n${i18next.t(
+          'forum-help.challenge-link'
+        )}\n${href}`
       );
 
-      let textMessage = dedent(
-        `**Tell us what's happening:**
-        Describe your issue in detail here.
-
+      let textMessage = dedent(`${i18next.t(
+        'forum-help.whats-happening'
+      )}\n${i18next.t('forum-help.describe')}\n\n
         ${
           projectFormValues.length
-            ? `**Your project link(s)**\n`
-            : `**Your code so far**`
+            ? `${i18next.t('forum-help.camper-project')}\n`
+            : i18next.t('forum-help.camper-code')
         }
         ${
           projectFormValues
             ?.map(([key, val]) => `${key}: ${transformEditorLink(val)}\n`)
             ?.join('') || filesToMarkdown(files)
-        }
-
-        ${endingText}`
-      );
+        }\n\n
+        ${endingText}`);
 
       const altTextMessage = dedent(
-        `**Tell us what's happening:**
-
-
-
-        **Your code so far**
-
-        WARNING
-
-        The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.
-
-        You will need to take an additional step here so the code you wrote presents in an easy to read format.
-
-        Please copy/paste all the editor code showing in the challenge from where you just linked.
-
-        \`\`\`
-
-        Replace these two sentences with your copied code.
-        Please leave the \`\`\` line above and the \`\`\` line below,
-        because they allow your code to properly format in the post.
-
-        \`\`\`\n${endingText}`
+        `${i18next.t('forum-help.whats-happening')}\n\n\n\n${i18next.t(
+          'forum-help.camper-code'
+        )}\n\n${i18next.t('forum-help.warning')}\n\n${i18next.t(
+          'forum-help.too-long-one'
+        )}\n\n${i18next.t('forum-help.too-long-two')}\n\n${i18next.t(
+          'forum-help.too-long-three'
+        )}\n\n\`\`\`\n${i18next.t('forum-help.add-code-one')}\n${i18next.t(
+          'forum-help.add-code-two'
+        )}\n${i18next.t('forum-help.add-code-three')}\n\n\`\`\`\n${endingText}`
       );
 
       const category = window.encodeURIComponent(helpCategory || 'Help');