From 25275232c2e19c803e95c0385e009c99bd1592cd Mon Sep 17 00:00:00 2001
From: Darin Kuntze <dkuntze@gmail.com>
Date: Thu, 26 Oct 2023 13:02:59 -0500
Subject: [PATCH] revise forms block

---
 blocks/forms/forms.js | 37 ++++++++++++++-----------------------
 scripts/delayed.js    | 16 ++++++++++++++++
 2 files changed, 30 insertions(+), 23 deletions(-)

diff --git a/blocks/forms/forms.js b/blocks/forms/forms.js
index 81277c58..75ee0a5b 100644
--- a/blocks/forms/forms.js
+++ b/blocks/forms/forms.js
@@ -1,30 +1,21 @@
-function embedHubSpotForm(formFields) {
-  const script = document.createElement('script');
-  script.type = 'text/javascript';
-  script.src = '/scripts/v2.js';
-  script.charset = 'utf-8';
-  script.setAttribute('async', '');
-  script.onload = () => {
-    window.hbspt.forms.create(formFields);
-  };
-  document.head.appendChild(script);
-}
+import { readBlockConfig } from '../../scripts/aem.js';
+
+let formConfig = {};
 
 export default function decorate(block) {
-  const formDetails = {};
-  const tableRows = block.querySelectorAll('tr');
-  tableRows.forEach((row) => {
-    const cells = row.children;
-    if (cells.length >= 2) {
-      const key = cells[0].innerText.trim();
-      const value = cells[1].innerText.trim();
-      formDetails[key] = key === 'target' ? `#${value}` : value;
-    }
-  });
-  embedHubSpotForm(formDetails);
+  formConfig = readBlockConfig(block);
   const form = document.createElement('div');
-  form.id = formDetails.target.replace('#', '');
+  form.id = formConfig.target;
   form.classList.add('content', 'outer');
   block.textContent = '';
   block.append(form);
 }
+
+export function buildForm(hbspt) {
+  hbspt.forms.create({
+    region: formConfig.region,
+    portalId: formConfig.portalid,
+    formId: formConfig.formid,
+    target: `#${formConfig.target}`,
+  });
+}
diff --git a/scripts/delayed.js b/scripts/delayed.js
index 5a5e663b..1a50b24a 100644
--- a/scripts/delayed.js
+++ b/scripts/delayed.js
@@ -1,5 +1,6 @@
 // eslint-disable-next-line import/no-cycle
 import { sampleRUM } from './aem.js';
+import { buildForm } from '../blocks/forms/forms.js';
 
 // Core Web Vitals RUM collection
 sampleRUM('cwv');
@@ -34,3 +35,18 @@ if (
 ) {
   loadGTM();
 }
+
+function loadHubSpot() {
+  const hsScriptEl = document.createElement('script');
+  hsScriptEl.type = 'text/javascript';
+  hsScriptEl.async = true;
+  hsScriptEl.defer = true;
+  hsScriptEl.setAttribute('id', 'hs-script-loader');
+  hsScriptEl.src = '/scripts/v2.js';
+  document.querySelector('head').append(hsScriptEl);
+  hsScriptEl.addEventListener('load', () => {
+        buildForm(hbspt); // eslint-disable-line
+  });
+}
+
+loadHubSpot();