feat: add button to add cert to LinkedIn profile (#39466)

client/src/client-only-routes/ShowCertification.js

@@ -25,7 +25,7 @@ import standardErrorMessage from '../utils/standardErrorMessage';
 import reallyWeirdErrorMessage from '../utils/reallyWeirdErrorMessage';
 
 import RedirectHome from '../components/RedirectHome';
-import { Loader } from '../components/helpers';
+import { Loader, Spacer } from '../components/helpers';
 
 const propTypes = {
   cert: PropTypes.shape({
@@ -46,6 +46,9 @@ const propTypes = {
     errored: PropTypes.bool
   }),
   isDonating: PropTypes.bool,
+  location: PropTypes.shape({
+    pathname: PropTypes.string
+  }),
   showCert: PropTypes.func.isRequired,
   signedInUserName: PropTypes.string,
   userFetchState: PropTypes.shape({
@@ -158,7 +161,8 @@ class ShowCertification extends Component {
       fetchState,
       validCertName,
       createFlashMessage,
-      certName
+      signedInUserName,
+      location: { pathname }
     } = this.props;
 
     const {
@@ -196,6 +200,11 @@ class ShowCertification extends Component {
       completionTime
     } = cert;
 
+    const certDate = new Date(issueDate);
+    const certYear = certDate.getFullYear();
+    const certMonth = certDate.getMonth();
+    const certURL = `https://freecodecamp.org${pathname}`;
+
     const donationCloseBtn = (
       <div>
         <Button
@@ -236,6 +245,31 @@ class ShowCertification extends Component {
       </Grid>
     );
 
+    const shareCertBtns = (
+      <Row className='text-center'>
+        <Spacer size={2} />
+        <Button
+          block={true}
+          bsSize='lg'
+          bsStyle='primary'
+          target='_blank'
+          href={`https://www.linkedin.com/profile/add?startTask=CERTIFICATION_NAME&name=${certTitle}&organizationId=4831032&issueYear=${certYear}&issueMonth=${certMonth}&certUrl=${certURL}`}
+        >
+          Add this certification to my LinkedIn profile
+        </Button>
+        <Spacer />
+        <Button
+          block={true}
+          bsSize='lg'
+          bsStyle='primary'
+          target='_blank'
+          href={`https://twitter.com/intent/tweet?text=I just earned the ${certTitle} certification @freeCodeCamp! Check it out here: ${certURL}`}
+        >
+          Share this certification on Twitter
+        </Button>
+      </Row>
+    );
+
     return (
       <div className='certificate-outer-wrapper'>
         {isDonationDisplayed && !isDonationClosed ? donationSection : ''}
@@ -250,7 +284,7 @@ class ShowCertification extends Component {
               <Col md={7} sm={12}>
                 <div className='issue-date'>
                   Issued&nbsp;
-                  <strong>{format(new Date(issueDate), 'MMMM D, YYYY')}</strong>
+                  <strong>{format(certDate, 'MMMM D, YYYY')}</strong>
                 </div>
               </Col>
             </header>
@@ -286,15 +320,12 @@ class ShowCertification extends Component {
                 <p>Executive Director, freeCodeCamp.org</p>
               </div>
               <Row>
-                <p className='verify'>
+                <p className='verify'>Verify this certification at {certURL}</p>
-                  Verify this certification at:
-                  https://www.freecodecamp.org/certification/
-                  {username}/{certName}
-                </p>
               </Row>
             </footer>
           </Row>
         </Grid>
+        {signedInUserName === username ? shareCertBtns : ''}
       </div>
     );
   }

client/src/components/layouts/Certification.js

@@ -4,6 +4,7 @@ import { connect } from 'react-redux';
 
 import { fetchUser, isSignedInSelector, executeGA } from '../../redux';
 import { createSelector } from 'reselect';
+import Helmet from 'react-helmet';
 
 const mapStateToProps = createSelector(
   isSignedInSelector,
@@ -22,8 +23,16 @@ class CertificationLayout extends Component {
     }
     this.props.executeGA({ type: 'page', data: pathname });
   }
+
   render() {
-    return <Fragment>{this.props.children}</Fragment>;
+    const { children } = this.props;
+
+    return (
+      <Fragment>
+        <Helmet bodyAttributes={{ class: 'light-palette' }}></Helmet>
+        {children}
+      </Fragment>
+    );
   }
 }
 

cypress/integration/ShowCertification.js

@@ -0,0 +1,88 @@
+/* global cy */
+
+describe('A certification,', function() {
+  describe('while viewing your own,', function() {
+    before(() => {
+      cy.visit('/');
+      cy.contains("Get started (it's free)").click({ force: true });
+      cy.contains('Update my account settings').click({ force: true });
+
+      // set user settings to public to claim a cert
+      cy.get('label:contains(Public)>input').each(el => {
+        if (!/toggle-active/.test(el[0].parentElement.className)) {
+          cy.wrap(el).click({ force: true });
+          cy.wait(1000);
+        }
+      });
+
+      // if honest policy not accepted
+      cy.get('.honesty-policy button').then(btn => {
+        if (btn[0].innerText === 'Agree') {
+          btn[0].click({ force: true });
+          cy.wait(1000);
+        }
+      });
+
+      // fill in legacy front end form
+      cy.get('#dynamic-legacy-front-end input').each(el => {
+        cy.wrap(el)
+          .clear({ force: true })
+          .type('https://nhl.com', { force: true, delay: 0 });
+      });
+
+      // if "Save Progress" button exists
+      cy.get('#dynamic-legacy-front-end').then(form => {
+        if (form[0][10] && form[0][10].innerHTML === 'Save Progress') {
+          form[0][10].click({ force: true });
+          cy.wait(1000);
+        }
+      });
+
+      // if "Claim Certification" button exists
+      cy.get('#dynamic-legacy-front-end').then(form => {
+        if (form[0][10] && form[0][10].innerHTML === 'Claim Certification') {
+          form[0][10].click({ force: true });
+          cy.wait(1000);
+        }
+      });
+
+      cy.get('#button-legacy-front-end')
+        .contains('Show Certification')
+        .click({ force: true });
+    });
+
+    it('should render a LinkedIn button', function() {
+      cy.contains('Add this certification to my LinkedIn profile').should(
+        'have.attr',
+        'href',
+        'https://www.linkedin.com/profile/add?startTask=CERTIFICATION_NAME&name=Legacy Front End&organizationId=4831032&issueYear=2020&issueMonth=8&certUrl=https://freecodecamp.org/certification/developmentuser/legacy-front-end'
+      );
+    });
+
+    it('should render a Twitter button', function() {
+      cy.contains('Share this certification on Twitter').should(
+        'have.attr',
+        'href',
+        'https://twitter.com/intent/tweet?text=I just earned the Legacy Front End certification @freeCodeCamp! Check it out here: https://freecodecamp.org/certification/developmentuser/legacy-front-end'
+      );
+    });
+  });
+
+  describe("while viewing someone else's,", function() {
+    before(() => {
+      cy.go('back');
+      cy.contains('Sign me out of freeCodeCamp').click({ force: true });
+      cy.visit('/certification/developmentuser/legacy-front-end');
+    });
+
+    it('should not render a LinkedIn button', function() {
+      cy.contains('Add this certification to my LinkedIn profile').should(
+        'not.exist'
+      );
+    });
+
+    it('should not render a Twitter button', function() {
+      cy.contains('Share this certification on Twitter').should('not.exist');
+    });
+  });
+});