fix(client): remove auto redirect in email sign up page (#42832)

client/package-lock.json

@@ -137,6 +137,7 @@
         "jest-json-schema-extended": "1.0.1",
         "monaco-editor-webpack-plugin": "4.2.0",
         "react-test-renderer": "16.14.0",
+        "redux-mock-store": "^1.5.4",
         "redux-saga-test-plan": "4.0.4",
         "serve": "12.0.1",
         "webpack": "5.64.0",
@@ -23014,6 +23015,15 @@
         "redux": "^3.1.0 || ^4.0.0"
       }
     },
+    "node_modules/redux-mock-store": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/redux-mock-store/-/redux-mock-store-1.5.4.tgz",
+      "integrity": "sha512-xmcA0O/tjCLXhh9Fuiq6pMrJCwFRaouA8436zcikdIpYWWCjU76CRk+i2bHx8EeiSiMGnB85/lZdU3wIJVXHTA==",
+      "dev": true,
+      "dependencies": {
+        "lodash.isplainobject": "^4.0.6"
+      }
+    },
     "node_modules/redux-observable": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/redux-observable/-/redux-observable-1.2.0.tgz",
@@ -44727,6 +44737,15 @@
       "integrity": "sha512-cNJ8Q/EtjhQaZ71c8I9+BPySIBVEKssbPpskBfsXqb8HJ002A3KRVHfeRzwRo6mGPqsm7XuHTqNSNeS1Khig0A==",
       "requires": {}
     },
+    "redux-mock-store": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/redux-mock-store/-/redux-mock-store-1.5.4.tgz",
+      "integrity": "sha512-xmcA0O/tjCLXhh9Fuiq6pMrJCwFRaouA8436zcikdIpYWWCjU76CRk+i2bHx8EeiSiMGnB85/lZdU3wIJVXHTA==",
+      "dev": true,
+      "requires": {
+        "lodash.isplainobject": "^4.0.6"
+      }
+    },
     "redux-observable": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/redux-observable/-/redux-observable-1.2.0.tgz",

client/package.json

@@ -161,6 +161,7 @@
     "jest-json-schema-extended": "1.0.1",
     "monaco-editor-webpack-plugin": "4.2.0",
     "react-test-renderer": "16.14.0",
+    "redux-mock-store": "^1.5.4",
     "redux-saga-test-plan": "4.0.4",
     "serve": "12.0.1",
     "webpack": "5.64.0",

client/src/pages/__snapshots__/email-sign-up.test.js.snap

@@ -0,0 +1,176 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<EmailSignUp /> Authenticated user "accepted terms and condition" it should render correctly 1`] = `null`;
+
+exports[`<EmailSignUp /> Non-Authenticated user "not accepted terms and condition" it should render correctly 1`] = `
+<div
+  className="container"
+>
+  <div
+    className="row"
+  >
+    <div
+      className="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 col-xs-12"
+    >
+      <div
+        className="spacer"
+        style={
+          Object {
+            "height": "1px",
+            "padding": "15px 0",
+          }
+        }
+      />
+      <div
+        className="intro-description"
+      >
+        <strong>
+          learn.read-this.heading
+        </strong>
+        <div
+          className="spacer"
+          style={
+            Object {
+              "height": "1px",
+              "padding": "15px 0",
+            }
+          }
+        />
+        <p>
+          learn.read-this.p1
+        </p>
+        <p>
+          learn.read-this.p2
+        </p>
+        <p>
+          learn.read-this.p3
+        </p>
+        <p>
+          learn.read-this.p4
+        </p>
+        <p>
+          learn.read-this.p5
+        </p>
+        <p>
+          learn.read-this.p6
+        </p>
+        <p>
+          learn.read-this.p7
+        </p>
+        <p>
+          learn.read-this.p8
+        </p>
+        <p>
+          <a
+            className="inline"
+            href="https://youtube.com/freecodecamp"
+            rel="noopener noreferrer"
+            target="_blank"
+          />
+        </p>
+        <p>
+          learn.read-this.p10
+        </p>
+        <p>
+          <a
+            className="inline"
+            href="https://forum.freecodecamp.org"
+            rel="noopener noreferrer"
+            target="_blank"
+          />
+        </p>
+        <p>
+          learn.read-this.p12
+        </p>
+      </div>
+      <hr />
+    </div>
+  </div>
+  <div
+    className="email-sign-up row"
+    data-cy="email-sign-up"
+  >
+    <div
+      className="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 col-xs-12"
+    >
+      <strong>
+        misc.quincy
+      </strong>
+      <div
+        className="spacer"
+        style={
+          Object {
+            "height": "1px",
+            "padding": "15px 0",
+          }
+        }
+      />
+      <p>
+        misc.email-blast
+      </p>
+      <div
+        className="spacer"
+        style={
+          Object {
+            "height": "1px",
+            "padding": "15px 0",
+          }
+        }
+      />
+    </div>
+    <div
+      className="col-md-4 col-md-offset-2 col-sm-5 col-sm-offset-1 col-xs-12"
+    >
+      <button
+        className="big-cta-btn btn btn-lg btn-primary btn-block"
+        disabled={false}
+        onClick={[Function]}
+        type="button"
+      >
+        buttons.yes-please
+      </button>
+      <div
+        className="button-spacer"
+        style={
+          Object {
+            "padding": "5px 0",
+          }
+        }
+      />
+    </div>
+    <div
+      className="col-md-4 col-sm-5 col-xs-12"
+    >
+      <button
+        className="big-cta-btn btn btn-lg btn-primary btn-block"
+        disabled={false}
+        onClick={[Function]}
+        type="button"
+      >
+        buttons.no-thanks
+      </button>
+      <div
+        className="button-spacer"
+        style={
+          Object {
+            "padding": "5px 0",
+          }
+        }
+      />
+    </div>
+    <div
+      className="col-xs-12"
+    >
+      <div
+        className="spacer"
+        style={
+          Object {
+            "height": "1px",
+            "padding": "15px 0",
+          }
+        }
+      />
+    </div>
+  </div>
+</div>
+`;

client/src/pages/email-sign-up.css

@@ -7,6 +7,6 @@
 @media (min-width: 500px) {
   .email-sign-up strong,
   .email-sign-up p {
-    font-size: 1.22rem;
+    font-size: 1.17rem;
   }
 }

client/src/pages/email-sign-up.test.js

@@ -0,0 +1,84 @@
+import { navigate } from 'gatsby';
+import React from 'react';
+import { Provider } from 'react-redux';
+import renderer from 'react-test-renderer';
+import configureStore from 'redux-mock-store';
+import EmailSignUp from './email-sign-up';
+
+const middlewares = [];
+const mockStore = configureStore(middlewares);
+
+jest.mock('../analytics');
+
+jest.mock('gatsby', () => ({
+  navigate: jest.fn()
+}));
+
+describe('<EmailSignUp />', () => {
+  let component;
+  let tree;
+
+  describe('Non-Authenticated user "not accepted terms and condition"', () => {
+    beforeEach(() => {
+      const initialState = { app: { appUsername: '', user: {} } };
+
+      const store = mockStore(initialState);
+      const container = renderer.create(
+        <Provider store={store}>
+          <EmailSignUp />
+        </Provider>
+      );
+
+      component = container.root;
+      tree = container.toJSON();
+    });
+
+    it('it should render correctly', () => {
+      expect(tree).toMatchSnapshot();
+    });
+
+    it('it should have a intro description section', () => {
+      // eslint-disable-next-line testing-library/await-async-query
+      const sectionIntroDescription = component.findByProps({
+        className: 'intro-description'
+      });
+
+      expect(sectionIntroDescription).toBeTruthy();
+    });
+  });
+
+  describe('Authenticated user "accepted terms and condition"', () => {
+    beforeEach(() => {
+      const initialState = {
+        app: {
+          appUsername: 'John Doe',
+          user: {
+            'John Doe': {
+              acceptedPrivacyTerms: true,
+              name: 'John Doe'
+            }
+          }
+        }
+      };
+      const store = mockStore(initialState);
+      store.dispatch = jest.fn();
+
+      const container = renderer.create(
+        <Provider store={store}>
+          <EmailSignUp />
+        </Provider>
+      );
+
+      component = container.root;
+      tree = container.toJSON();
+    });
+
+    it('it should render correctly', () => {
+      expect(tree).toMatchSnapshot();
+    });
+
+    it('it should redirect to learn url', () => {
+      expect(navigate).toHaveBeenCalledWith('/learn');
+    });
+  });
+});

client/src/pages/email-sign-up.tsx

@@ -9,7 +9,6 @@ import { createSelector } from 'reselect';
 import IntroDescription from '../components/Intro/components/IntroDescription';
 import createRedirect from '../components/create-redirect';
 import { ButtonSpacer, Spacer } from '../components/helpers';
-import SectionHeader from '../components/settings/section-header';
 
 import { acceptTerms, userSelector } from '../redux';
 
@@ -67,20 +66,21 @@ function AcceptPrivacyTerms({
       <Helmet>
         <title>{t('misc.email-signup')} | freeCodeCamp.org</title>
       </Helmet>
-      <Grid
+      <Grid>
-        className='default-page-wrapper email-sign-up'
-        data-cy='email-sign-up'
-      >
-        <SectionHeader>{t('misc.email-signup')}</SectionHeader>
         <Row>
+          <Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
+            <Spacer />
             <IntroDescription />
+            <hr />
+          </Col>
+        </Row>
+        <Row className='email-sign-up' data-cy='email-sign-up'>
           <Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
             <strong>{t('misc.quincy')}</strong>
             <Spacer />
             <p>{t('misc.email-blast')}</p>
             <Spacer />
           </Col>
-
           <Col md={4} mdOffset={2} sm={5} smOffset={1} xs={12}>
             <Button
               block={true}