From 06a26861f677dd09b623f2d374cbca1a24d77f01 Mon Sep 17 00:00:00 2001
From: mrugesh <1884376+raisedadead@users.noreply.github.com>
Date: Thu, 21 Nov 2019 15:00:22 +0530
Subject: [PATCH] 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 |  19 ++-
 client/src/components/Donation/Donation.css   |   3 +
 client/src/components/Intro/index.js          |   2 +-
 client/src/components/profile/Profile.js      |   2 +-
 client/src/components/profile/Profile.test.js |   2 +-
 client/src/pages/donate.js                    |  82 +++++------
 client/src/pages/donation/settings.js         | 132 ++++++++++--------
 7 files changed, 136 insertions(+), 106 deletions(-)

diff --git a/client/src/client-only-routes/ShowSettings.js b/client/src/client-only-routes/ShowSettings.js
index dbc05d52c1..82b90cbb9f 100644
--- a/client/src/client-only-routes/ShowSettings.js
+++ b/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}
diff --git a/client/src/components/Donation/Donation.css b/client/src/components/Donation/Donation.css
index e5f22b5563..09e14ef9fb 100644
--- a/client/src/components/Donation/Donation.css
+++ b/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;
+}
diff --git a/client/src/components/Intro/index.js b/client/src/components/Intro/index.js
index 2507f2b04e..4c88dbce70 100644
--- a/client/src/components/Intro/index.js
+++ b/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>
diff --git a/client/src/components/profile/Profile.js b/client/src/components/profile/Profile.js
index 018ec31d37..4369b8fc2f 100644
--- a/client/src/components/profile/Profile.js
+++ b/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}
diff --git a/client/src/components/profile/Profile.test.js b/client/src/components/profile/Profile.test.js
index efded2790e..40333ffc1b 100644
--- a/client/src/components/profile/Profile.test.js
+++ b/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'
     );
diff --git a/client/src/pages/donate.js b/client/src/pages/donate.js
index 309fb2a1fc..c131a0c1d5 100644
--- a/client/src/pages/donate.js
+++ b/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,46 +85,48 @@ export class DonatePage extends Component {
       <Fragment>
         <Helmet title='Support our nonprofit | freeCodeCamp.org' />
         <Grid>
-          <Spacer />
-          <Row>
-            <Col sm={10} smOffset={1} xs={12}>
+          <main>
+            <Spacer />
+            <FullWidthRow>
               <h1 className='text-center'>Become a Supporter</h1>
-              <Spacer />
-            </Col>
-          </Row>
-          <Row>
-            <Col md={6}>
-              <DonateForm
-                enableDonationSettingsPage={this.enableDonationSettingsPage}
-                stripe={stripe}
-              />
-              <Row>
-                <Col sm={10} smOffset={1} xs={12}>
-                  <Spacer size={2} />
-                  <h3 className='text-center'>Manage your existing donation</h3>
-                  {[
-                    `Update your existing donation`,
-                    `Download donation receipts`
-                  ].map(donationSettingOps => (
-                    <div key={donationSettingOps}>
-                      <Button
-                        block={true}
-                        bsStyle='primary'
-                        disabled={!isDonating && !enableSettings}
-                        href='/donation/settings'
-                      >
-                        {donationSettingOps}
-                      </Button>
-                      <Spacer />
+            </FullWidthRow>
+            <Spacer />
+            <Row>
+              <Col md={6}>
+                <DonateForm
+                  enableDonationSettingsPage={this.enableDonationSettingsPage}
+                  stripe={stripe}
+                />
+                <Row>
+                  <Col sm={10} smOffset={1} xs={12}>
+                    <Spacer size={2} />
+                    <h3 className='text-center'>
+                      Manage your existing donation
+                    </h3>
+                    <div className='button-group'>
+                      {[
+                        `Update your existing donation`,
+                        `Download donation receipts`
+                      ].map(donationSettingOps => (
+                        <Link
+                          className='btn btn-block'
+                          disabled={!isDonating && !enableSettings}
+                          key={donationSettingOps}
+                          to='/donation/settings'
+                        >
+                          {donationSettingOps}
+                        </Link>
+                      ))}
                     </div>
-                  ))}
-                </Col>
-              </Row>
-            </Col>
-            <Col md={6}>
-              <DonateText />
-            </Col>
-          </Row>
+                  </Col>
+                </Row>
+              </Col>
+              <Col md={6}>
+                <DonateText />
+              </Col>
+            </Row>
+            <Spacer />
+          </main>
         </Grid>
       </Fragment>
     );
diff --git a/client/src/pages/donation/settings.js b/client/src/pages/donation/settings.js
index 090cf3cdac..94b6c08bc2 100644
--- a/client/src/pages/donation/settings.js
+++ b/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>
-        <Spacer />
-        <DonateServicebotEmbed email={currentSettingsEmail} hash={hash} />
+      <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}>
-            <Button
-              bsStyle='primary'
-              className='btn btn-block'
-              onClick={this.handleSelectDonationEmail}
-              value={email}
-            >
-              {`Show donations for your ${email} email address`}
-            </Button>
-            <Spacer />
-          </div>
-        ))}
-      </div>
-    );
+    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>
+    ));
   }
 
   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}>
-              <Spacer size={2} />
-              <Button block={true} bsStyle='primary' href='/donate'>
+          <main>
+            <Spacer size={2} />
+
+            <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>
-              <Spacer />
-              <h3 className='text-center'>
-                Donations made using a credit or debit card
-              </h3>
-            </Col>
-          </Row>
-          <Row>
-            <Col sm={6} smOffset={3} xs={12}>
+            </FullWidthRow>
+
+            <Spacer />
+            <SectionHeader>
+              Donations made using a credit or debit card
+            </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>
-              <Spacer />
-            </Col>
-          </Row>
+            </FullWidthRow>
+
+            <Spacer />
+          </main>
         </Grid>
       </Fragment>
     );