From e8578341b509170caff411fce7d48224316ba879 Mon Sep 17 00:00:00 2001
From: Shaun Hamilton <51722130+ShaunSHamilton@users.noreply.github.com>
Date: Thu, 6 May 2021 19:45:19 +0100
Subject: [PATCH] feat(client): add quick superblock cert claim steps (#42031)

* feat(client): add quick superblock cert claim steps

* remove comments
---
 client/i18n/locales/english/translations.json |  9 +++
 client/src/components/settings/Honesty.js     |  2 +-
 client/src/components/settings/Privacy.js     |  2 +-
 .../__snapshots__/Honesty.test.js.snap        |  2 +
 .../Introduction/components/CertChallenge.js  |  5 ++
 .../components/CertificationCard.js           | 64 +++++++++++++++++++
 .../Introduction/components/ClaimCertSteps.js | 51 +++++++++++++++
 7 files changed, 133 insertions(+), 2 deletions(-)
 create mode 100644 client/src/templates/Introduction/components/CertificationCard.js
 create mode 100644 client/src/templates/Introduction/components/ClaimCertSteps.js

diff --git a/client/i18n/locales/english/translations.json b/client/i18n/locales/english/translations.json
index 15bd0852f0..5f5ef43830 100644
--- a/client/i18n/locales/english/translations.json
+++ b/client/i18n/locales/english/translations.json
@@ -554,5 +554,14 @@
         "Neural Network SMS Text Classifier": "Neural Network SMS Text Classifier"
       }
     }
+  },
+  "certification-card": {
+    "title": "Steps to Claim Your Certification",
+    "intro": "Complete the following steps to claim and view your {{i18nCertText}}",
+    "complete-project": "Complete {{i18nCertText}} Projects",
+    "accept-honesty": "Accept our Academic Honesty Policy",
+    "set-name": "Set your name, and make it public",
+    "set-certs-public": "Set your certificication settings to public",
+    "set-profile-public": "Set your profile settings to public"
   }
 }
diff --git a/client/src/components/settings/Honesty.js b/client/src/components/settings/Honesty.js
index 2ff6948629..90ddd2c33f 100644
--- a/client/src/components/settings/Honesty.js
+++ b/client/src/components/settings/Honesty.js
@@ -35,7 +35,7 @@ const Honesty = ({ isHonest, updateIsHonest }) => {
     </Button>
   );
   return (
-    <section className='honesty-policy'>
+    <section className='honesty-policy' id='honesty-policy'>
       <SectionHeader>{t('settings.headings.honesty')}</SectionHeader>
       <FullWidthRow>
         <Panel className='honesty-panel'>
diff --git a/client/src/components/settings/Privacy.js b/client/src/components/settings/Privacy.js
index b0f1d745c2..0e34243975 100644
--- a/client/src/components/settings/Privacy.js
+++ b/client/src/components/settings/Privacy.js
@@ -66,7 +66,7 @@ class PrivacySettings extends Component {
     } = user.profileUI;
 
     return (
-      <div className='privacy-settings'>
+      <div className='privacy-settings' id='privacy-settings'>
         <SectionHeader>{t('settings.headings.privacy')}</SectionHeader>
         <FullWidthRow>
           <p>{t('settings.privacy')}</p>
diff --git a/client/src/components/settings/__snapshots__/Honesty.test.js.snap b/client/src/components/settings/__snapshots__/Honesty.test.js.snap
index c88fda569d..9e6d5accbd 100644
--- a/client/src/components/settings/__snapshots__/Honesty.test.js.snap
+++ b/client/src/components/settings/__snapshots__/Honesty.test.js.snap
@@ -3,6 +3,7 @@
 exports[`<Honesty /> <Honesty /> snapshot when isHonest is false: Honesty 1`] = `
 <section
   className="honesty-policy"
+  id="honesty-policy"
 >
   <SectionHeader>
     settings.headings.honesty
@@ -31,6 +32,7 @@ exports[`<Honesty /> <Honesty /> snapshot when isHonest is false: Honesty 1`] =
 exports[`<Honesty /> <Honesty /> snapshot when isHonest is true: HonestyAccepted 1`] = `
 <section
   className="honesty-policy"
+  id="honesty-policy"
 >
   <SectionHeader>
     settings.headings.honesty
diff --git a/client/src/templates/Introduction/components/CertChallenge.js b/client/src/templates/Introduction/components/CertChallenge.js
index 06399bffd0..7de9812419 100644
--- a/client/src/templates/Introduction/components/CertChallenge.js
+++ b/client/src/templates/Introduction/components/CertChallenge.js
@@ -15,6 +15,7 @@ import {
   certSlugTypeMap,
   superBlockCertTypeMap
 } from '../../../../../config/certification-settings';
+import CertificationCard from './CertificationCard';
 
 const propTypes = {
   currentCerts: CurrentCertsType,
@@ -57,6 +58,10 @@ export class CertChallenge extends Component {
 
     return (
       <div className='block'>
+        <CertificationCard
+          i18nCertText={i18nCertText}
+          superBlock={superBlock}
+        />
         <button
           className={`map-cert-title ${
             isCertified ? 'map-is-cert' : 'no-cursor'
diff --git a/client/src/templates/Introduction/components/CertificationCard.js b/client/src/templates/Introduction/components/CertificationCard.js
new file mode 100644
index 0000000000..64c393947a
--- /dev/null
+++ b/client/src/templates/Introduction/components/CertificationCard.js
@@ -0,0 +1,64 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+
+import ScrollableAnchor from 'react-scrollable-anchor';
+import { useTranslation } from 'react-i18next';
+import ClaimCertSteps from './ClaimCertSteps';
+import Caret from '../../../assets/icons/Caret';
+
+const propTypes = {
+  i18nCertText: PropTypes.string,
+  superBlock: PropTypes.string
+};
+
+const CertificationCard = ({ superBlock, i18nCertText }) => {
+  const { t } = useTranslation();
+  const [isExpanded, setIsExpanded] = useState(true);
+
+  const handleBlockClick = () => {
+    setIsExpanded(!isExpanded);
+  };
+
+  const {
+    expand: expandText,
+    collapse: collapseText,
+    courses: coursesText
+  } = t('intro:misc-text');
+  return (
+    <ScrollableAnchor id='claim-cert-block'>
+      <div className={`block ${isExpanded ? 'open' : ''}`}>
+        <div className='block-title-wrapper'>
+          <a className='block-link' href='#claim-cert-block'>
+            <h3 className='big-block-title'>
+              {t('certification-card.title')}
+              <span className='block-link-icon'>#</span>
+            </h3>
+          </a>
+        </div>
+        <div className='block-description'>
+          {t('certification-card.intro', { i18nCertText })}
+        </div>
+        <button
+          aria-expanded={isExpanded}
+          className='map-title'
+          onClick={handleBlockClick}
+        >
+          <Caret />
+          <h4 className='course-title'>
+            {`${
+              isExpanded ? collapseText : expandText
+            } ${coursesText.toLowerCase()}`}
+          </h4>
+        </button>
+        {isExpanded && (
+          <ClaimCertSteps i18nCertText={i18nCertText} superBlock={superBlock} />
+        )}
+      </div>
+    </ScrollableAnchor>
+  );
+};
+
+CertificationCard.displayName = 'CertStatus';
+CertificationCard.propTypes = propTypes;
+
+export default CertificationCard;
diff --git a/client/src/templates/Introduction/components/ClaimCertSteps.js b/client/src/templates/Introduction/components/ClaimCertSteps.js
new file mode 100644
index 0000000000..50ed1bc58d
--- /dev/null
+++ b/client/src/templates/Introduction/components/ClaimCertSteps.js
@@ -0,0 +1,51 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Link } from 'gatsby';
+import { withTranslation, useTranslation } from 'react-i18next';
+
+const propTypes = {
+  i18nCertText: PropTypes.string,
+  superBlock: PropTypes.string
+};
+
+const ClaimCertSteps = ({ i18nCertText, superBlock }) => {
+  const { t } = useTranslation();
+
+  const settingsLink = '/settings#privacy-settings';
+  const honestyPolicyAnchor = '/settings#honesty-policy';
+
+  return (
+    <ul className='map-challenges-ul'>
+      <li className='map-challenge-title map-challenge-wrap'>
+        <Link to={honestyPolicyAnchor}>
+          {t('certification-card.accept-honesty')}
+        </Link>
+      </li>
+      <li className='map-challenge-title map-challenge-wrap'>
+        <a href={`#${superBlock}-projects`}>
+          {t('certification-card.complete-project', {
+            i18nCertText
+          })}
+        </a>
+      </li>
+      <li className='map-challenge-title map-challenge-wrap'>
+        <Link to={settingsLink}>
+          {t('certification-card.set-profile-public')}
+        </Link>
+      </li>
+      <li className='map-challenge-title map-challenge-wrap'>
+        <Link to={settingsLink}>
+          {t('certification-card.set-certs-public')}
+        </Link>
+      </li>
+      <li className='map-challenge-title map-challenge-wrap'>
+        <Link to={settingsLink}>{t('certification-card.set-name')}</Link>
+      </li>
+    </ul>
+  );
+};
+
+ClaimCertSteps.displayName = 'ClaimCertSteps';
+ClaimCertSteps.propTypes = propTypes;
+
+export default withTranslation()(ClaimCertSteps);