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

@@ -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"
   }
 }

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'>

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>

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

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'

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;

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);