Refactored Mailchimp signups in footer to use new external API

.env.sample

@@ -43,3 +43,15 @@ SITE_URL=
 ## Setting DEMO SITE to 1 will add a "Demo Site" label to the header.
 
 GATSBY_DEMO_SITE=
+
+# =========================
+# TENANT PLATFORM SITE ORIGIN (OPTIONAL)
+# =========================
+# 
+# Setting TENANT PLATFORM SITE ORIGIN to the origin url of a server 
+# will configure the external database that certain features communicate with.
+# 
+# For example, setting this to `https://app.justfix.nyc` will allow our email sign-ups to get 
+# processed by our MailChimp endpoint on the JustFix Tenant Platform. 
+
+GATSBY_TENANT_PLATFORM_SITE_ORIGIN=

src/components/ddo-searchbar.tsx

@@ -8,9 +8,8 @@ import classnames from "classnames";
 
 /** The URL for Data-Driven Onboarding (DDO) on the JustFix Tenant Platform. */
 const DDO_URL =
-  "https://" +
-  (process.env.GATSBY_DEMO_SITE === "1" ? "demo" : "app") +
-  ".justfix.nyc/ddo";
+  (process.env.GATSBY_TENANT_PLATFORM_SITE_ORIGIN ||
+    "https://demo.justfix.nyc") + "/ddo";
 
 /** The querystring variable used to communicate the address for DDO. */
 const DDO_ADDRESS_VAR = "address";

src/components/footer.tsx

@@ -1,14 +1,12 @@
 import React from "react";
 import { SocialIcon } from "react-social-icons";
 import { Link } from "gatsby";
-import { Trans, t } from "@lingui/macro";
+import { Trans } from "@lingui/macro";
 import { withI18n, withI18nProps } from "@lingui/react";
 
 import "../styles/footer.scss";
 import { Locale } from "../pages";
-
-const MAILCHIMP_URL =
-  "https://nyc.us13.list-manage.com/subscribe/post?u=d4f5d1addd4357eb77c3f8a99&id=588f6c6ef4";
+import Subscribe from "./subscribe";
 
 const Footer = withI18n()(({ locale, i18n }: Locale & withI18nProps) => {
   const localePrefix = locale ? "/" + locale : "";
@@ -113,32 +111,7 @@ const Footer = withI18n()(({ locale, i18n }: Locale & withI18nProps) => {
           <h4 className="title is-size-5 has-text-white">
             <Trans>Join our mailing list!</Trans>
           </h4>
-          <form
-            action={MAILCHIMP_URL}
-            className="email-form is-horizontal-center"
-            method="post"
-            target="_blank"
-          >
-            <div className="mc-field-group">
-              <div className="control is-expanded">
-                <input
-                  type="email"
-                  name="EMAIL"
-                  className="required email input"
-                  id="mce-EMAIL"
-                  placeholder={i18n._(t`Email Address`)}
-                />
-              </div>
-              <div className="control has-text-centered-touch">
-                <button
-                  className="button is-primary is-uppercase"
-                  type="submit"
-                >
-                  <Trans>Sign up</Trans>
-                </button>
-              </div>
-            </div>
-          </form>
+          <Subscribe />
           <div className="field">
             <SocialIcon
               url="http://twitter.com/justfixnyc"

src/components/header.tsx

@@ -8,7 +8,8 @@ import { Locale } from "../pages";
 const isDemoSite = process.env.GATSBY_DEMO_SITE === "1";
 
 const TENANT_PLATFORM_URL =
-  "https://" + (isDemoSite ? "demo" : "app") + ".justfix.nyc/login";
+  (process.env.GATSBY_TENANT_PLATFORM_SITE_ORIGIN ||
+    "https://demo.justfix.nyc") + "/login";
 
 type Props = {
   isLandingPage?: boolean;

src/components/subscribe.tsx

@@ -0,0 +1,142 @@
+import React from "react";
+import { Trans, t } from "@lingui/macro";
+import { withI18n, withI18nProps } from "@lingui/react";
+import { Locale } from "../pages";
+import classnames from "classnames";
+
+type FormLocation = "footer" | "page";
+
+type SubscribeProps = { location?: FormLocation } & Locale & withI18nProps;
+
+type SubscribeState = {
+  email: string;
+  success: boolean;
+  response: string;
+};
+
+class SubscribeWithoutI18n extends React.Component<
+  SubscribeProps,
+  SubscribeState
+> {
+  constructor(props: SubscribeProps) {
+    super(props);
+    this.state = {
+      email: "",
+      success: false,
+      response: "",
+    };
+  }
+
+  handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    this.setState({ email: e.target.value });
+  };
+
+  handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    const email = this.state.email || null;
+    const { i18n } = this.props;
+    const locale = i18n.language;
+
+    // check if email is missing, return undefined
+    if (!email) {
+      this.setState({
+        response: i18n._(t`Please enter an email address!`),
+      });
+      return;
+    }
+
+    const tenantPlatformOrigin =
+      process.env.GATSBY_TENANT_PLATFORM_SITE_ORIGIN ||
+      "https://demo.justfix.nyc";
+
+    fetch(`${tenantPlatformOrigin}/mailchimp/subscribe`, {
+      method: "POST",
+      mode: "cors",
+      body: `email=${encodeURIComponent(
+        email
+      )}&language=${locale}&source=orgsite`,
+      headers: {
+        "Content-Type": "application/x-www-form-urlencoded",
+      },
+    })
+      .then((result) => result.json())
+      .then((result) => {
+        if (result.status === 200) {
+          this.setState({
+            success: true,
+            response: i18n._(t`All set! Thanks for subscribing!`),
+          });
+        } else if (result.errorCode === "INVALID_EMAIL") {
+          this.setState({
+            response: i18n._(t`Oops! That email is invalid.`),
+          });
+        } else {
+          this.setState({
+            response: i18n._(
+              t`Oops! A network error occurred. Try again later.`
+            ),
+          });
+        }
+      })
+      .catch((err) => {
+        this.setState({
+          response: i18n._(t`Oops! A network error occurred. Try again later.`),
+        });
+      });
+  };
+
+  render() {
+    const { i18n, location } = this.props;
+
+    // Default styling is for "footer"
+    const defaultResponseTextClass =
+      location === "page" ? "has-text-grey-dark" : "has-text-white";
+
+    return (
+      <div>
+        <form
+          className="email-form is-horizontal-center"
+          onSubmit={this.handleSubmit}
+        >
+          <div
+            className={classnames(location === "page" && "field has-addons")}
+          >
+            <div className="control is-expanded">
+              <input
+                type="email"
+                name="EMAIL"
+                className="input"
+                onChange={this.handleChange}
+                placeholder={i18n._(t`Email Address`)}
+              />
+            </div>
+            <div className="control has-text-centered-touch">
+              <button className="button is-primary is-uppercase" type="submit">
+                <Trans>Sign up</Trans>
+              </button>
+            </div>
+          </div>
+        </form>
+        {this.state.response && (
+          <>
+            <p
+              className={
+                this.state.success
+                  ? defaultResponseTextClass
+                  : "has-text-danger"
+              }
+            >
+              {this.state.response}
+            </p>
+            <br />
+          </>
+        )}
+      </div>
+    );
+  }
+}
+
+const Subscribe = withI18n()(SubscribeWithoutI18n);
+
+export default Subscribe;