Fix newsletter form.

Author: friedjoff

components/NewsletterForm.js

@@ -4,21 +4,28 @@ import CheckmarkCircleIcon from "./icons/CheckmarkCircleIcon.js";
 import MailCircleIcon from "./icons/MailCircleIcon.js";
 import PointerCircleIcon from "./icons/PointerCircleIcon.js";
 import { useI18n } from "../lib/i18n";
+
 const newsletterFormEndpoint =
   "https://geops.us4.list-manage.com/subscribe/post?u=23161055bb6a407f7e6c00038&id=c9694280f7";
+
 export default function NewsletterForm({ translations }) {
   const refHeader = createRef();
   const [submitted, setSubmitted] = useState(false);
   const { language } = useI18n();
-  const handleSubmit = (event) => {
-    const body = new FormData(event.target);
+
+  const handleSubmit = async (event) => {
     event.preventDefault();
     refHeader.current.scrollIntoView({ behavior: "smooth" });
     try {
-      fetch(newsletterFormEndpoint, { method: "POST", body });
+      await fetch(newsletterFormEndpoint, {
+        body: new FormData(event.target),
+        method: "POST",
+        mode: "no-cors",
+      });
+      setSubmitted(true);
     } catch (error) {}
-    setSubmitted(true);
   };
+
   return (
     <form
       className="container mx-auto max-w-screen-lg p-8"

components/NewsletterTeaser.js

@@ -1,59 +1,14 @@
+import Teaser from "./Teaser";
 import { useI18n } from "../lib/i18n";
-import useIntersectionOberserver from "../lib/useIntersectionOberserver";
-
-const buttonClassName =
-  "bg-green py-4 px-14 text-white font-bold rounded inline-block hover:bg-green-light transition duration-300 ease-in-out";
-
-// Workaround to link to external newsletter page
-// TODO: fix signup on our own /newsletter page
-function CustomTeaser(props) {
-  const contentRef = useIntersectionOberserver("opacity-0", 0.2);
-  let teaserTitle = "";
-
-  if (props.toHeading) {
-    teaserTitle = `<h1 class="break-words w-full">${props.title}</h1>`;
-  } else {
-    teaserTitle = `<h2 class="break-words w-full text-5xl">${props.title}</h2>`;
-  }
-
-  return (
-    <section className={props.containerClassName || "bg-white"}>
-      <div
-        className="container mx-auto px-8 py-16 md:py-24 text-center flex flex-col items-center transform transition-opacity duration-1000"
-        ref={contentRef}
-      >
-        <div
-          className="mb-7"
-          dangerouslySetInnerHTML={{ __html: teaserTitle }}
-        ></div>
-        {props.subtitle && (
-          <h3
-            className={`mb-16 max-w-md text-2xl ${
-              props.subtitleClassName || ""
-            }`}
-          >
-            {props.subtitle}
-          </h3>
-        )}
-        {props.text && (
-          <p className="mb-16 md:px-16 lg:px-32 text-left">{props.text}</p>
-        )}
-        <a className={buttonClassName} href={props.href} target="newsletter">
-          {props.action}
-        </a>
-      </div>
-    </section>
-  );
-}
 
 export default function NewsletterTeaser() {
   const { t } = useI18n();
   return (
-    <CustomTeaser
+    <Teaser
       title={t("newsletterTeaser.title")}
       subtitle={t("newsletterTeaser.subtitle")}
       action={t("newsletterTeaser.action")}
-      href="http://geops.sh/geopsnews"
+      href="/newsletter"
     />
   );
 }