fix(donate): unify layouts and navigation for consitency (#37795)

This commit updates the layouts and the styles to be consistent with the rest of the application. This also ensures now that the gatsby navigation is used for smoother transtions.

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

@@ -24,6 +24,7 @@ import Portfolio from '../components/settings/Portfolio';
 import Honesty from '../components/settings/Honesty';
 import Certification from '../components/settings/Certification';
 import DangerZone from '../components/settings/DangerZone';
+import SectionHeader from '../components/settings/SectionHeader.js';
 
 const propTypes = {
   createFlashMessage: PropTypes.func.isRequired,
@@ -54,6 +55,7 @@ const propTypes = {
     isApisMicroservicesCert: PropTypes.bool,
     isBackEndCert: PropTypes.bool,
     isDataVisCert: PropTypes.bool,
+    isDonating: PropTypes.bool,
     isEmailVerified: PropTypes.bool,
     isFrontEndCert: PropTypes.bool,
     isFrontEndLibsCert: PropTypes.bool,
@@ -122,6 +124,7 @@ export function ShowSettings(props) {
     user: {
       completedChallenges,
       email,
+      isDonating,
       is2018DataVisCert,
       isApisMicroservicesCert,
       isJsAlgoDataStructCert,
@@ -161,7 +164,7 @@ export function ShowSettings(props) {
     return <Loader fullScreen={true} />;
   }
 
-  if (!showLoading && !isSignedIn) {
+  if (!isSignedIn) {
     navigate(`${apiLocation}/signin?returnTo=settings`);
     return <Loader fullScreen={true} />;
   }
@@ -215,6 +218,20 @@ export function ShowSettings(props) {
             updateQuincyEmail={updateQuincyEmail}
           />
           <Spacer />
+          {isDonating ? (
+            <div>
+              <SectionHeader>Donation Settings</SectionHeader>
+              <FullWidthRow className='button-group'>
+                <Link
+                  className='btn-invert btn btn-lg btn-primary btn-block'
+                  to={`/donation/settings`}
+                >
+                  Manage your existing donations
+                </Link>
+              </FullWidthRow>
+              <Spacer />
+            </div>
+          ) : null}
           <Internet
             githubProfile={githubProfile}
             linkedin={linkedin}

client/src/components/Donation/Donation.css

@@ -159,3 +159,6 @@ li.disabled > a {
 [name='payment-method'] {
   font-family: 'Lato', sans-serif;
 }
+.servicebot-embed-panel .panel {
+  padding: 20px;
+}

client/src/components/Intro/index.js

@@ -57,7 +57,7 @@ function Intro({
               View my Portfolio
             </Link>
             <Link className='btn btn-lg btn-primary btn-block' to='/settings'>
-              Update my settings
+              Update my account settings
             </Link>
           </FullWidthRow>
         </Row>

client/src/components/profile/Profile.js

@@ -175,7 +175,7 @@ function Profile({ user, isSessionUser, navigate }) {
         {isSessionUser ? (
           <FullWidthRow className='button-group'>
             <Link className='btn btn-lg btn-primary btn-block' to='/settings'>
-              Update my settings
+              Update my account settings
             </Link>
             <Button
               block={true}

client/src/components/profile/Profile.test.js

@@ -59,7 +59,7 @@ describe('<Profile/>', () => {
   it('renders the settings button on your own profile', () => {
     const { getByText } = render(<Profile {...myProfileProps} />);
 
-    expect(getByText('Update my settings')).toHaveAttribute(
+    expect(getByText('Update my account settings')).toHaveAttribute(
       'href',
       '/settings'
     );

client/src/pages/donate.js

@@ -3,10 +3,10 @@ import Helmet from 'react-helmet';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
-import { Grid, Row, Col, Button } from '@freecodecamp/react-bootstrap';
+import { Grid, Row, Col } from '@freecodecamp/react-bootstrap';
 
 import { stripePublicKey } from '../../config/env.json';
-import { Spacer, Loader } from '../components/helpers';
+import { Spacer, Loader, FullWidthRow, Link } from '../components/helpers';
 import DonateForm from '../components/Donation/components/DonateForm';
 import DonateText from '../components/Donation/components/DonateText';
 import { signInLoadingSelector, userSelector } from '../redux';
@@ -85,13 +85,12 @@ export class DonatePage extends Component {
       <Fragment>
         <Helmet title='Support our nonprofit | freeCodeCamp.org' />
         <Grid>
+          <main>
             <Spacer />
-          <Row>
-            <Col sm={10} smOffset={1} xs={12}>
+            <FullWidthRow>
               <h1 className='text-center'>Become a Supporter</h1>
+            </FullWidthRow>
             <Spacer />
-            </Col>
-          </Row>
             <Row>
               <Col md={6}>
                 <DonateForm
@@ -101,23 +100,24 @@ export class DonatePage extends Component {
                 <Row>
                   <Col sm={10} smOffset={1} xs={12}>
                     <Spacer size={2} />
-                  <h3 className='text-center'>Manage your existing donation</h3>
+                    <h3 className='text-center'>
+                      Manage your existing donation
+                    </h3>
+                    <div className='button-group'>
                       {[
                         `Update your existing donation`,
                         `Download donation receipts`
                       ].map(donationSettingOps => (
-                    <div key={donationSettingOps}>
-                      <Button
-                        block={true}
-                        bsStyle='primary'
+                        <Link
+                          className='btn btn-block'
                           disabled={!isDonating && !enableSettings}
-                        href='/donation/settings'
+                          key={donationSettingOps}
+                          to='/donation/settings'
                         >
                           {donationSettingOps}
-                      </Button>
-                      <Spacer />
-                    </div>
+                        </Link>
                       ))}
+                    </div>
                   </Col>
                 </Row>
               </Col>
@@ -125,6 +125,8 @@ export class DonatePage extends Component {
                 <DonateText />
               </Col>
             </Row>
+            <Spacer />
+          </main>
         </Grid>
       </Fragment>
     );

client/src/pages/donation/settings.js

@@ -3,7 +3,7 @@ import Helmet from 'react-helmet';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
-import { Grid, Row, Col, Button } from '@freecodecamp/react-bootstrap';
+import { Grid, Button, Panel } from '@freecodecamp/react-bootstrap';
 import { uniq } from 'lodash';
 
 import { apiLocation } from '../../../config/env.json';
@@ -16,7 +16,8 @@ import {
 } from '../../redux';
 // eslint-disable-next-line max-len
 import DonateServicebotEmbed from '../../components/Donation/components/DonateServicebotEmbed';
-import { Loader, Spacer, Link } from '../../components/helpers';
+import { Loader, Spacer, Link, FullWidthRow } from '../../components/helpers';
+import SectionHeader from '../../components/settings/SectionHeader.js';
 
 const propTypes = {
   donationEmails: PropTypes.array,
@@ -85,36 +86,39 @@ export class DonationSettingsPage extends Component {
 
   renderServicebotEmbed() {
     const { currentSettingsEmail, hash } = this.state;
-    if (!hash || !currentSettingsEmail) {
-      return null;
-    }
     return (
-      <div>
+      <div className='servicebot-embed-panel'>
+        {!hash || !currentSettingsEmail ? (
+          <Panel>
+            <Spacer />
+            <p className='text-center'>
+              Select the email associated to your donations above.
+            </p>
+          </Panel>
+        ) : (
+          <Panel>
             <Spacer />
             <DonateServicebotEmbed email={currentSettingsEmail} hash={hash} />
+            <Spacer />
+          </Panel>
+        )}
       </div>
     );
   }
 
   renderDonationEmailsList() {
     const { donationEmails } = this.props;
-    return (
-      <div>
-        {uniq(donationEmails).map(email => (
-          <div key={email}>
+    return uniq(donationEmails).map(email => (
       <Button
         bsStyle='primary'
         className='btn btn-block'
+        key={email}
         onClick={this.handleSelectDonationEmail}
         value={email}
       >
         {`Show donations for your ${email} email address`}
       </Button>
-            <Spacer />
-          </div>
-        ))}
-      </div>
-    );
+    ));
   }
 
   render() {
@@ -138,38 +142,42 @@ export class DonationSettingsPage extends Component {
       <Fragment>
         <Helmet title='Manage your donation | freeCodeCamp.org' />
         <Grid>
-          <Row>
-            <Col sm={6} smOffset={3} xs={12}>
+          <main>
             <Spacer size={2} />
-              <Button block={true} bsStyle='primary' href='/donate'>
+
+            <FullWidthRow className='button-group'>
+              <Link
+                className='btn-invert btn btn-lg btn-primary btn-block'
+                to={`/donate`}
+              >
                 Go to donate page
-              </Button>
-            </Col>
-          </Row>
-          <Row>
-            <Col sm={8} smOffset={2} xs={12}>
+              </Link>
+              <Link
+                className='btn-invert btn btn-lg btn-primary btn-block'
+                to={`/settings`}
+              >
+                Update my account settings
+              </Link>
+            </FullWidthRow>
+
+            <FullWidthRow>
               <Spacer />
               <h1 className='text-center'>Manage your donations</h1>
+            </FullWidthRow>
+
             <Spacer />
-              <h3 className='text-center'>
+            <SectionHeader>
               Donations made using a credit or debit card
-              </h3>
-            </Col>
-          </Row>
-          <Row>
-            <Col sm={6} smOffset={3} xs={12}>
+            </SectionHeader>
+            <FullWidthRow className='button-group'>
               {this.renderDonationEmailsList()}
-            </Col>
-          </Row>
-          <Row>
-            <Col sm={8} smOffset={2} xs={12}>
-              {this.renderServicebotEmbed()}
-            </Col>
-          </Row>
-          <Row>
-            <Col sm={8} smOffset={2} xs={12}>
-              <hr />
-              <h3 className='text-center'>Donations made using PayPal</h3>
+            </FullWidthRow>
+            <Spacer />
+            <FullWidthRow>{this.renderServicebotEmbed()}</FullWidthRow>
+
+            <Spacer />
+            <SectionHeader>Donations made using PayPal</SectionHeader>
+            <FullWidthRow>
               <p className='text-center'>
                 You can update your PayPal donation{' '}
                 <Link
@@ -180,20 +188,20 @@ export class DonationSettingsPage extends Component {
                 </Link>
                 .
               </p>
-            </Col>
-          </Row>
-          <Row>
-            <Col sm={8} smOffset={2} xs={12}>
-              <hr />
-              <h3 className='text-center'>Still need help?</h3>
+            </FullWidthRow>
+
+            <Spacer />
+            <SectionHeader>Still need help?</SectionHeader>
+            <FullWidthRow>
               <p>
                 If you can't see your donation here, forward a donation receipt
                 you have recieved in your email to team@freeCodeCamp.org and
                 tell us how we can help you with it.
               </p>
+            </FullWidthRow>
+
             <Spacer />
-            </Col>
-          </Row>
+          </main>
         </Grid>
       </Fragment>
     );