feat(client, i18n): move help translate CTA to superblock intro (#53735)

Co-authored-by: Sem Bauke <semboot699@gmail.com>

client/i18n/locales/english/translations.json

@@ -413,7 +413,7 @@
       "tab-trapped": "Pressing tab will now insert the tab character",
       "tab-free": "Pressing tab will now move focus to the next focusable element"
     },
-    "help-translate": "We are still translating the following certifications.",
+    "help-translate": "We are still translating this certification.",
     "help-translate-link": "Help us translate.",
     "project-preview-title": "Here's a preview of what you will build",
     "github-required": "<0>Create a GitHub</0> account if you don't have one. You'll need it when you create the virtual Linux server machine. This process may take a few minutes.",

client/src/components/Map/index.tsx

@@ -1,22 +1,16 @@
-import i18next from 'i18next';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
 import {
   SuperBlockStages,
   SuperBlocks,
-  getFirstNotAuditedSuperBlock,
   superBlockOrder
 } from '../../../../shared/config/superblocks';
 import { SuperBlockIcon } from '../../assets/icons/superblock-icon';
 import LinkButton from '../../assets/icons/link-button';
 import { Link, Spacer } from '../helpers';
 import { getSuperBlockTitleForMap } from '../../utils/superblock-map-titles';
-import {
-  curriculumLocale,
-  showUpcomingChanges,
-  showNewCurriculum
-} from '../../../config/env.json';
+import { showUpcomingChanges } from '../../../config/env.json';
 
 import './map.css';
 
@@ -31,12 +25,6 @@ const linkSpacingStyle = {
   gap: '15px'
 };
 
-const firstNotAuditedSuperBlock = getFirstNotAuditedSuperBlock({
-  language: curriculumLocale,
-  showNewCurriculum,
-  showUpcomingChanges
-});
-
 const coreCurriculum = [
   ...superBlockOrder[SuperBlockStages.FrontEnd],
   ...superBlockOrder[SuperBlockStages.Backend],
@@ -52,25 +40,6 @@ function MapLi({
 }) {
   return (
     <>
-      {firstNotAuditedSuperBlock === superBlock && (
-        <>
-          <hr />
-          <div style={{ textAlign: 'center' }}>
-            <p style={{ marginBottom: 0 }}>
-              {i18next.t('learn.help-translate')}{' '}
-            </p>
-            <Link
-              external={true}
-              sameTab={false}
-              to={i18next.t('links:help-translate-link-url')}
-            >
-              {i18next.t('learn.help-translate-link')}
-            </Link>
-            <Spacer size='medium' />
-          </div>
-        </>
-      )}
-
       <li
         data-test-label='curriculum-map-button'
         data-playwright-test-label='curriculum-map-button'

client/src/templates/Introduction/components/help-translate.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { SuperBlocks } from '../../../../../shared/config/superblocks';
+import { isAuditedSuperBlock } from '../../../../../shared/utils/is-audited';
+import { Link, Spacer } from '../../../components/helpers';
+
+import envData from '../../../../config/env.json';
+
+const { clientLocale, showUpcomingChanges, showNewCurriculum } = envData;
+
+interface HelpTranslateProps {
+  superBlock: SuperBlocks;
+}
+
+function HelpTranslate({ superBlock }: HelpTranslateProps): JSX.Element | null {
+  const { t } = useTranslation();
+
+  if (
+    isAuditedSuperBlock(clientLocale, superBlock, {
+      showNewCurriculum,
+      showUpcomingChanges
+    })
+  ) {
+    return null;
+  }
+
+  return (
+    <div style={{ textAlign: 'center' }}>
+      <Spacer size='medium' />
+      <p style={{ marginBottom: 0 }}>{t('learn.help-translate')} </p>
+      <Link
+        external={true}
+        sameTab={false}
+        to={t('links:help-translate-link-url')}
+      >
+        {t('learn.help-translate-link')}
+      </Link>
+    </div>
+  );
+}
+
+export default HelpTranslate;

client/src/templates/Introduction/super-block-intro.tsx

@@ -29,6 +29,7 @@ import { defaultDonation } from '../../../../shared/config/donation-settings';
 import Block from './components/block';
 import CertChallenge from './components/cert-challenge';
 import LegacyLinks from './components/legacy-links';
+import HelpTranslate from './components/help-translate';
 import SuperBlockIntro from './components/super-block-intro';
 import { resetExpansion, toggleBlock } from './redux';
 
@@ -220,6 +221,7 @@ const SuperBlockIntroductionPage = (props: SuperBlockProp) => {
                 }
                 isDonating={user.isDonating}
               />
+              <HelpTranslate superBlock={superBlock} />
               <Spacer size='large' />
               <h2 className='text-center big-subheading'>
                 {t(`intro:misc-text.courses`)}

shared/config/superblocks.test.ts

@@ -6,8 +6,7 @@ import {
   notAuditedSuperBlocks,
   createSuperBlockMap,
   createFlatSuperBlockMap,
-  getAuditedSuperBlocks,
-  getFirstNotAuditedSuperBlock
+  getAuditedSuperBlocks
 } from './superblocks';
 
 describe('superBlockOrder', () => {
@@ -66,26 +65,6 @@ describe('createFlatSuperBlockMap', () => {
   });
 });
 
-describe('firstNotAuditedSuperBlock', () => {
-  it("should return 'null' when language is 'english'", () => {
-    const result = getFirstNotAuditedSuperBlock({
-      language: Languages.English,
-      showNewCurriculum: false,
-      showUpcomingChanges: false
-    });
-    expect(result).toBeNull();
-  });
-
-  it.skip("should return a SuperBlock when language is 'chinese'", () => {
-    const result = getFirstNotAuditedSuperBlock({
-      language: Languages.Chinese,
-      showNewCurriculum: false,
-      showUpcomingChanges: false
-    });
-    expect(result).toEqual(SuperBlocks.JsAlgoDataStructNew);
-  });
-});
-
 describe('Immutability of superBlockOrder, notAuditedSuperBlocks, and flatSuperBlockMap', () => {
   it('should not allow modification of superBlockOrder', () => {
     expect(() => {

shared/config/superblocks.ts

@@ -286,24 +286,6 @@ export function createFlatSuperBlockMap({
   return Object.values(superBlockMap).flat();
 }
 
-// this is so we know where to display the "help us translate" section
-export function getFirstNotAuditedSuperBlock({
-  language,
-  showNewCurriculum,
-  showUpcomingChanges
-}: LanguagesConfig): SuperBlocks | null {
-  const flatSuperBlockMap = createFlatSuperBlockMap({
-    showNewCurriculum,
-    showUpcomingChanges
-  });
-  for (const superBlock of flatSuperBlockMap) {
-    if (notAuditedSuperBlocks[language as Languages].includes(superBlock)) {
-      return superBlock;
-    }
-  }
-  return null;
-}
-
 export function getAuditedSuperBlocks({
   language = 'english',
   showNewCurriculum,