chore: Add Mailjet subscription form (#76)

ReactFinland · Apr 23, 2020 · 6a8ccbf · 6a8ccbf
1 parent 71fea08
commit 6a8ccbf
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 64 deletions.
diff --git a/components/Subscribe.js b/components/Subscribe.js
@@ -5,51 +5,54 @@ const Subscribe = ({
   children = "Subscribe to get React Finland related news to your mail.",
 }) => {
   return (
-    <section className="subscribe">
-      <div className="subscribe--wrapper">
-        <h2 className="subscribe--header">{children}</h2>
-
-        <form
-          action="//react-finland.us16.list-manage.com/subscribe/post?u=a940d62db3f360204bf40b1c4&amp;amp;id=8c82fd10b8"
-          method="post"
-          id="mc-embedded-subscribe-form"
-          name="mc-embedded-subscribe-form"
-          className="subscribe--form"
-          target="_blank"
-          noValidate
+    <section
+      className="subscribe"
+      style={{ padding: "2em", textAlign: "center" }}
+    >
+      <data
+        id="mj-w-res-data"
+        data-token="fd098aa40e8dccbaa2dd415c3003999f"
+        className="mj-w-data"
+        data-apikey="5h9R"
+        data-w-id="qG4"
+        data-lang="en_US"
+        data-base="https://app.mailjet.com"
+        data-width="640"
+        data-height="383"
+        data-statics="statics"
+      ></data>
+      <div
+        className="mj-w-button mj-w-btn"
+        style={{
+          fontFamily: "Finlandica, Helvetica",
+          color: "#1863bd",
+          padding: "0px 1em",
+          backgroundColor: "rgb(100%, 100%, 100%, 0.7)",
+          display: "inline-block",
+          borderRadius: "25px",
+        }}
+      >
+        <div
+          role="button"
+          tabIndex={0}
+          className="mj-w-button-content"
+          id="subscribe-button"
+          data-token="fd098aa40e8dccbaa2dd415c3003999f"
+          style={{
+            fontFamily: "Finlandica, Helvetica",
+            display: "inline-block",
+          }}
+          onClick={e => {
+            e.preventDefault();
+            mjOpenPopin(event, document.querySelector("#subscribe-button"));
+          }}
+          onKeyDown={e => {
+            e.preventDefault();
+            mjOpenPopin(event, document.querySelector("#subscribe-button"));
+          }}
         >
-          <input
-            type="email"
-            placeholder="john@domain.com"
-            name="EMAIL"
-            className="subscribe--input"
-            id="mce-EMAIL"
-            required
-            aria-label="email"
-          />
-          <div
-            style={{
-              display: "none",
-              position: "absolute",
-              left: "-5000px",
-            }}
-          >
-            <input
-              type="text"
-              name="b_ed40c0084a0c5ba31b3365d65_b853b8e786"
-              tabIndex="-1"
-              value=""
-            />
-          </div>
-          <button
-            type="submit"
-            className="subscribe--button"
-            name="subscribe"
-            id="mc-embedded-subscribe"
-          >
-            Subscribe
-          </button>
-        </form>
+          {children}
+        </div>
       </div>
     </section>
   );

diff --git a/templates/page.ejs b/templates/page.ejs
@@ -1,28 +1,37 @@
 <!DOCTYPE html>
-<html lang="en" <%- htmlWebpackPlugin.options.context.helmet.htmlAttributes %>>
+<html lang="en" <%- htmlWebpackPlugin.options.context.helmet.htmlAttributes %>
+  >
 
-<head>
-  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/brands.css"
-    integrity="sha384-n9+6/aSqa9lBidZMRCQHTHKJscPq6NW4pCQBiMmHdUCvPN8ZOg2zJJTkC7WIezWv" crossorigin="anonymous">
-  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/fontawesome.css"
-    integrity="sha384-vd1e11sR28tEK9YANUtpIOdjGW14pS87bUBuOIoBILVWLFnS+MCX9T6MMf0VdPGq" crossorigin="anonymous">
-  <%- htmlWebpackPlugin.options.context.helmet.title %> <%-
+  <head>
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.8.1/css/brands.css"
+      integrity="sha384-n9+6/aSqa9lBidZMRCQHTHKJscPq6NW4pCQBiMmHdUCvPN8ZOg2zJJTkC7WIezWv"
+      crossorigin="anonymous"
+    />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.8.1/css/fontawesome.css"
+      integrity="sha384-vd1e11sR28tEK9YANUtpIOdjGW14pS87bUBuOIoBILVWLFnS+MCX9T6MMf0VdPGq"
+      crossorigin="anonymous"
+    />
+    <%- htmlWebpackPlugin.options.context.helmet.title %> <%-
     htmlWebpackPlugin.options.context.helmet.meta %> <%-
     htmlWebpackPlugin.options.context.helmet.link %> <%-
-    htmlWebpackPlugin.options.context.helmet.style %>
-  <link rel="stylesheet" type="text/css" href="https://css.tito.io/v1.1" />
-  <% for (var file of htmlWebpackPlugin.options.context.cssFiles) { %>
-  <link href="<%= file %>" rel="stylesheet" />
-  <% } %>
-</head>
+    htmlWebpackPlugin.options.context.helmet.style %> <% for (var file of
+    htmlWebpackPlugin.options.context.cssFiles) { %>
+    <link href="<%= file %>" rel="stylesheet" />
+    <% } %>
+  </head>
 
-<body <%- htmlWebpackPlugin.options.context.helmet.bodyAttributes %>> <%- webpackConfig.html %> <%-
+  <body <%- htmlWebpackPlugin.options.context.helmet.bodyAttributes %>
+    > <%- webpackConfig.html %> <%-
     htmlWebpackPlugin.options.context.helmet.noscript %> <%-
     htmlWebpackPlugin.options.context.helmet.script %>
-  <script src="https://fienta.com/embed.js"></script>
-  <% for (var script of htmlWebpackPlugin.options.context.jsFiles) { %>
-  <script src="<%= script %>" type="text/javascript"></script>
-  <% } %>
-</body>
-
+    <script src="https://fienta.com/embed.js"></script>
+    <script src="https://app.mailjet.com/statics/js/widget.modal.js"></script>
+    <% for (var script of htmlWebpackPlugin.options.context.jsFiles) { %>
+    <script src="<%= script %>" type="text/javascript"></script>
+    <% } %>
+  </body>
 </html>