From 4bc7ce5ce79e074e173a68325291375e751639c4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Demenech?= <joaommdemenech@gmail.com>
Date: Fri, 18 Aug 2023 09:41:31 -0300
Subject: [PATCH] [site,newsletter][s]: fix hero newsletter form (broken after
 Brevo update)

---
 site/components/Hero.tsx           | 25 --------------
 site/components/NewsletterForm.tsx | 52 ++++++++++++------------------
 site/lib/loadNewsletterScripts.ts  | 45 ++++++++++++++++++++++++++
 3 files changed, 66 insertions(+), 56 deletions(-)
 create mode 100644 site/lib/loadNewsletterScripts.ts

diff --git a/site/components/Hero.tsx b/site/components/Hero.tsx
index 5839ee5c..f34b3b60 100644
--- a/site/components/Hero.tsx
+++ b/site/components/Hero.tsx
@@ -3,31 +3,6 @@ import ButtonLink from './ButtonLink';
 import NewsletterForm from './NewsletterForm';
 import Image from 'next/image';
 import DatahubExampleImg from '@/public/images/showcases/datahub.webp';
-
-const codeLanguage = 'javascript';
-const code = `export default {
-  strategy: 'predictive',
-  engine: {
-    cpus: 12,
-    backups: ['./storage/cache.wtf'],
-  },
-}`;
-
-const tabs = [
-  { name: 'cache-advance.config.js', isActive: true },
-  { name: 'package.json', isActive: false },
-];
-
-function TrafficLightsIcon(props) {
-  return (
-    <svg aria-hidden="true" viewBox="0 0 42 10" fill="none" {...props}>
-      <circle cx="5" cy="5" r="4.5" />
-      <circle cx="21" cy="5" r="4.5" />
-      <circle cx="37" cy="5" r="4.5" />
-    </svg>
-  );
-}
-
 /* eslint jsx-a11y/label-has-associated-control: off */
 export function Hero() {
   const el = useRef(null);
diff --git a/site/components/NewsletterForm.tsx b/site/components/NewsletterForm.tsx
index bc6940e9..c3974a1c 100644
--- a/site/components/NewsletterForm.tsx
+++ b/site/components/NewsletterForm.tsx
@@ -1,6 +1,27 @@
+import { loadScripts } from '@/lib/loadNewsletterScripts';
 import Script from 'next/script';
+import { useEffect } from 'react';
 
 export default function NewsletterForm() {
+  useEffect(() => {
+    /*
+     * The newsletter scripts MUST be loaded after
+     * the document is loaded, as they depend on
+     * the presence of some elements
+     *
+     */
+    if (document.readyState === 'complete') {
+      const { resetElements } = loadScripts();
+
+      return () => {
+        resetElements();
+      };
+    } else {
+      window.addEventListener('load', loadScripts);
+      return () => window.removeEventListener('load', loadScripts);
+    }
+  }, []);
+
   return (
     <div>
       <div
@@ -88,37 +109,6 @@ export default function NewsletterForm() {
           </div>
         </div>
       </div>
-      <Script
-        id="newsletter-form-validation-message"
-        dangerouslySetInnerHTML={{
-          __html: `  
-          window.REQUIRED_CODE_ERROR_MESSAGE = 'Please choose a country code';
-          window.LOCALE = 'en';
-          window.EMAIL_INVALID_MESSAGE = window.SMS_INVALID_MESSAGE = "The information provided is invalid. Please review the field format and try again.";
-        
-          window.REQUIRED_ERROR_MESSAGE = "This field cannot be left blank. ";
-        
-          window.GENERIC_INVALID_MESSAGE = "The information provided is invalid. Please review the field format and try again.";
-        
-        
-        
-        
-          window.translation = {
-            common: {
-              selectedList: '{quantity} list selected',
-              selectedLists: '{quantity} lists selected'
-            }
-          };
-        
-          var AUTOHIDE = Boolean(0);
-        `,
-        }}
-      />
-      <Script
-        strategy="worker"
-        id="newsletter-submit-form"
-        src="https://sibforms.com/forms/end-form/build/main.js"
-      />
     </div>
   );
 }
diff --git a/site/lib/loadNewsletterScripts.ts b/site/lib/loadNewsletterScripts.ts
new file mode 100644
index 00000000..fc3bd87b
--- /dev/null
+++ b/site/lib/loadNewsletterScripts.ts
@@ -0,0 +1,45 @@
+
+import { HTMLProps } from "react";
+
+const loadScript = (
+  props: HTMLProps<HTMLScriptElement> & { textContent?: string }
+): (() => void) => {
+  const script = document.createElement("script");
+  Object.assign(script, props);
+  document.head.appendChild(script);
+  return () => document.head.removeChild(script);
+};
+
+export const loadScripts = () => {
+  const formValidationScript = loadScript({
+    id: "newsletter-form-validation-message",
+    textContent: `
+          window.LOCALE = 'en';
+          window.EMAIL_INVALID_MESSAGE = "The information provided is invalid. Please review the field format and try again.";
+          window.REQUIRED_ERROR_MESSAGE = "This field cannot be left blank. ";
+          window.GENERIC_INVALID_MESSAGE = "The information provided is invalid. Please review the field format and try again.";
+          window.translation = {
+            common: {
+              selectedList: '{quantity} list selected',
+              selectedLists: '{quantity} lists selected'
+            }
+          };
+          var AUTOHIDE = Boolean(0);
+        `,
+  });
+
+  const formSubmitScript = loadScript({
+    id: "newsletter-submit-form",
+    src: "https://sibforms.com/forms/end-form/build/main.js",
+    async: true,
+    defer: true,
+  });
+
+  return {
+    resetElements: () => {
+      formSubmitScript();
+      formValidationScript();
+    },
+  };
+};
+