diff --git a/client/src/components/settings/Certification.js b/client/src/components/settings/Certification.js
index 402ae0b2ca..5bdb0a613c 100644
--- a/client/src/components/settings/Certification.js
+++ b/client/src/components/settings/Certification.js
@@ -129,7 +129,7 @@ export class CertificationSettings extends Component {
super(props);
this.state = { ...initialState };
- this.handleSubmit = this.handleSubmit.bind(this);
+ this.handleSubmitLegacy = this.handleSubmitLegacy.bind(this);
}
createHandleLinkButtonClick = to => e => {
@@ -287,7 +287,7 @@ export class CertificationSettings extends Component {
};
// legacy projects rendering
- handleSubmit(formChalObj) {
+ handleSubmitLegacy(formChalObj) {
const {
isHonest,
createFlashMessage,
@@ -415,7 +415,7 @@ export class CertificationSettings extends Component {
...initialObject
}}
options={options}
- submit={this.handleSubmit}
+ submit={this.handleSubmitLegacy}
/>
{isCertClaimed ? (
@@ -437,6 +437,100 @@ export class CertificationSettings extends Component {
);
};
+ renderFullStack = () => {
+ const {
+ isFullStackCert,
+ username,
+ isHonest,
+ createFlashMessage,
+ verifyCert,
+ is2018DataVisCert,
+ isApisMicroservicesCert,
+ isFrontEndLibsCert,
+ isInfosecQaCert,
+ isJsAlgoDataStructCert,
+ isRespWebDesignCert
+ } = this.props;
+
+ const fullStackClaimable =
+ is2018DataVisCert &&
+ isApisMicroservicesCert &&
+ isFrontEndLibsCert &&
+ isInfosecQaCert &&
+ isJsAlgoDataStructCert &&
+ isRespWebDesignCert;
+
+ const superBlock = 'full-stack-certificate';
+ const certLocation = `/certification/${username}/${superBlock}`;
+
+ const buttonStyle = {
+ marginBottom: '30px',
+ padding: '6px 12px',
+ fontSize: '18px'
+ };
+
+ const createClickHandler = superBlock => e => {
+ e.preventDefault();
+ if (isFullStackCert) {
+ return navigate(certLocation);
+ }
+ return isHonest
+ ? verifyCert(superBlock)
+ : createFlashMessage(honestyInfoMessage);
+ };
+
+ return (
+
+
+ Full Stack Certification
+
+
+ Once you've earned the following freeCodeCamp certifications, you'll
+ be able to claim The Full Stack Developer Certification:
+
+
+ - Responsive Web Design
+ - Algorithms and Data Structures
+ - Front End Libraries
+ - Data Visualization
+ - APIs and Microservices
+ - Information Security and Quality Assurance
+
+
+
+
+ {fullStackClaimable ? (
+
+ ) : (
+
+ )}
+
+
+
+ );
+ };
+
render() {
const {
solutionViewer: { files, solution, isOpen, projectTitle }
@@ -445,6 +539,7 @@ export class CertificationSettings extends Component {
Certifications
{certifications.map(this.renderCertifications)}
+ {this.renderFullStack()}
Legacy Certifications
{legacyCertifications.map(this.renderLegacyCertifications)}
{isOpen ? (