From 1c2d723b955c801b674cfdff4d1bcd5152c5e7ef Mon Sep 17 00:00:00 2001
From: Jessica Leach <jessica.leach@futurelearn.com>
Date: Mon, 4 Jan 2021 09:27:56 +0000
Subject: [PATCH] simplify mailchimp

---
 .../Container/components/MailingList.js       | 75 +------------------
 .../__snapshots__/Container.test.jsx.snap     | 47 +-----------
 .../__snapshots__/Mailinglist.test.jsx.snap   | 47 +-----------
 app/javascript/scimo/styles/style.scss        |  6 +-
 4 files changed, 13 insertions(+), 162 deletions(-)

diff --git a/app/javascript/bundles/Container/components/MailingList.js b/app/javascript/bundles/Container/components/MailingList.js
index 1153f21c..c30a27ed 100644
--- a/app/javascript/bundles/Container/components/MailingList.js
+++ b/app/javascript/bundles/Container/components/MailingList.js
@@ -1,62 +1,21 @@
 import React from "react";
 import $ from "jquery";
 
-{
-  /* <script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script>
-<script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script> */
-}
-
 class MailingList extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
       emailValue: "",
-      fNameValue: "",
-      lNameValue: ""
     };
   }
 
-  onSubmit() {
-    preventDefault();
-
-    $.ajax({
-      type: $form.attr("method"),
-      url: $form.attr("action"),
-      data: $form.serialize(),
-      cache: false,
-      dataType: "json",
-      contentType: "application/json; charset=utf-8",
-      error: function(err) {
-        $(".notification_container").html(
-          '<span className="alert">Could not connect to server. Please try again later.</span>'
-        );
-      },
-      success: function(data) {
-        if (data.result != "success") {
-          var message = data.msg.substring();
-          $(".notification_container").html(
-            '<span className="alert">' + message + "</span>"
-          );
-        } else {
-          var message = data.msg;
-          $(".notification_container").html(
-            '<span className="success">' + message + "</span>"
-          );
-        }
-      }
-    });
-  }
-
   render() {
     return (
       <footer className="footer">
         <form
-          action="https://github.us16.list-manage.com/subscribe/post-json"
-          method="POST"
-          noValidate
-          id="mc-embedded-subscribe-form"
+          action="https://github.us16.list-manage.com/subscribe/post?u=70d8e0ea2d8800a5f4e06792c&amp;id=b5095bc718"
+          method="post"
           name="mc-embedded-subscribe-form"
-          className="validate"
           target="_blank"
         >
           <div id="mc_embed_signup_scroll">
@@ -74,47 +33,21 @@ class MailingList extends React.Component {
           </div>
           <div className="mailchimp">
             <label htmlFor="mce-EMAIL">Subscribe to our mailing list!</label>
-
             <div>
-              <input type="hidden" name="u" value="70d8e0ea2d8800a5f4e06792c" />
-              <input type="hidden" name="id" value="b5095bc718" />
               <label htmlFor="MERGE0">
                 <input
                   type="email"
                   name="EMAIL"
                   id="MERGE0"
                   value={this.state.emailValue}
-                  onChange={e => {
+                  onChange={(e) => {
                     this.setState({ emailValue: e.target.value });
                   }}
                   autoCapitalize="off"
                   autoCorrect="off"
                 />
               </label>
-              <input
-                type="submit"
-                onClick={this.onSubmit}
-                defaultValue="Subscribe"
-                name="subscribe"
-                id="mc-embedded-subscribe"
-                className="button"
-              />
-              <div
-                style={{ position: "absolute", left: "-5000px" }}
-                aria-hidden="true"
-                aria-label="Please leave the following three fields empty"
-              >
-                <label htmlFor="b_email">Email: </label>
-                <input
-                  type="email"
-                  name="b_email"
-                  tabIndex="-1"
-                  defaultValue=""
-                  placeholder="youremail@gmail.com"
-                  id="b_email"
-                />
-              </div>
-              <div className="notification_container" />
+              <input type="submit" name="subscribe" className="button" />
             </div>
           </div>
         </form>
diff --git a/app/javascript/bundles/Container/components/__snapshots__/Container.test.jsx.snap b/app/javascript/bundles/Container/components/__snapshots__/Container.test.jsx.snap
index 0a3b6caf..3bbb126d 100644
--- a/app/javascript/bundles/Container/components/__snapshots__/Container.test.jsx.snap
+++ b/app/javascript/bundles/Container/components/__snapshots__/Container.test.jsx.snap
@@ -147,12 +147,9 @@ exports[`Container renders correctly when there are no items 1`] = `
     className="footer"
   >
     <form
-      action="https://github.us16.list-manage.com/subscribe/post-json"
-      className="validate"
-      id="mc-embedded-subscribe-form"
-      method="POST"
+      action="https://github.us16.list-manage.com/subscribe/post?u=70d8e0ea2d8800a5f4e06792c&id=b5095bc718"
+      method="post"
       name="mc-embedded-subscribe-form"
-      noValidate={true}
       target="_blank"
     >
       <div
@@ -183,16 +180,6 @@ exports[`Container renders correctly when there are no items 1`] = `
           Subscribe to our mailing list!
         </label>
         <div>
-          <input
-            name="u"
-            type="hidden"
-            value="70d8e0ea2d8800a5f4e06792c"
-          />
-          <input
-            name="id"
-            type="hidden"
-            value="b5095bc718"
-          />
           <label
             htmlFor="MERGE0"
           >
@@ -208,39 +195,9 @@ exports[`Container renders correctly when there are no items 1`] = `
           </label>
           <input
             className="button"
-            defaultValue="Subscribe"
-            id="mc-embedded-subscribe"
             name="subscribe"
-            onClick={[Function]}
             type="submit"
           />
-          <div
-            aria-hidden="true"
-            aria-label="Please leave the following three fields empty"
-            style={
-              Object {
-                "left": "-5000px",
-                "position": "absolute",
-              }
-            }
-          >
-            <label
-              htmlFor="b_email"
-            >
-              Email: 
-            </label>
-            <input
-              defaultValue=""
-              id="b_email"
-              name="b_email"
-              placeholder="youremail@gmail.com"
-              tabIndex="-1"
-              type="email"
-            />
-          </div>
-          <div
-            className="notification_container"
-          />
         </div>
       </div>
     </form>
diff --git a/app/javascript/bundles/Container/components/__snapshots__/Mailinglist.test.jsx.snap b/app/javascript/bundles/Container/components/__snapshots__/Mailinglist.test.jsx.snap
index 5189d7e5..5644f6ec 100644
--- a/app/javascript/bundles/Container/components/__snapshots__/Mailinglist.test.jsx.snap
+++ b/app/javascript/bundles/Container/components/__snapshots__/Mailinglist.test.jsx.snap
@@ -5,12 +5,9 @@ exports[`Mailinglist renders correctly when there are no items 1`] = `
   className="footer"
 >
   <form
-    action="https://github.us16.list-manage.com/subscribe/post-json"
-    className="validate"
-    id="mc-embedded-subscribe-form"
-    method="POST"
+    action="https://github.us16.list-manage.com/subscribe/post?u=70d8e0ea2d8800a5f4e06792c&id=b5095bc718"
+    method="post"
     name="mc-embedded-subscribe-form"
-    noValidate={true}
     target="_blank"
   >
     <div
@@ -41,16 +38,6 @@ exports[`Mailinglist renders correctly when there are no items 1`] = `
         Subscribe to our mailing list!
       </label>
       <div>
-        <input
-          name="u"
-          type="hidden"
-          value="70d8e0ea2d8800a5f4e06792c"
-        />
-        <input
-          name="id"
-          type="hidden"
-          value="b5095bc718"
-        />
         <label
           htmlFor="MERGE0"
         >
@@ -66,39 +53,9 @@ exports[`Mailinglist renders correctly when there are no items 1`] = `
         </label>
         <input
           className="button"
-          defaultValue="Subscribe"
-          id="mc-embedded-subscribe"
           name="subscribe"
-          onClick={[Function]}
           type="submit"
         />
-        <div
-          aria-hidden="true"
-          aria-label="Please leave the following three fields empty"
-          style={
-            Object {
-              "left": "-5000px",
-              "position": "absolute",
-            }
-          }
-        >
-          <label
-            htmlFor="b_email"
-          >
-            Email: 
-          </label>
-          <input
-            defaultValue=""
-            id="b_email"
-            name="b_email"
-            placeholder="youremail@gmail.com"
-            tabIndex="-1"
-            type="email"
-          />
-        </div>
-        <div
-          className="notification_container"
-        />
       </div>
     </div>
   </form>
diff --git a/app/javascript/scimo/styles/style.scss b/app/javascript/scimo/styles/style.scss
index 53a67900..8b6463e9 100644
--- a/app/javascript/scimo/styles/style.scss
+++ b/app/javascript/scimo/styles/style.scss
@@ -139,7 +139,11 @@ b {
 .mailchimp {
   display: flex;
   flex-direction: row;
-  justify-content: space-between;
+  justify-content: flex-end;
+
+  div {
+    margin-left: 10px;
+  }
 }
 
 .logIn {