From c6e7e6189d424cb1f5c0702f020c28a501bf67b2 Mon Sep 17 00:00:00 2001
From: Bryan Stopp <bryan.stopp@gmail.com>
Date: Wed, 29 Nov 2023 15:25:57 -0600
Subject: [PATCH] Do not load GM until user needs it.

---
 blocks/avm-report/avm-report-delayed.js | 23 ---------------
 blocks/avm-report/avm-report.css        |  3 ++
 blocks/avm-report/avm-report.js         | 39 ++++++++++++-------------
 scripts/google-maps/index.js            | 21 +++++++++++++
 4 files changed, 42 insertions(+), 44 deletions(-)
 delete mode 100644 blocks/avm-report/avm-report-delayed.js
 create mode 100644 scripts/google-maps/index.js

diff --git a/blocks/avm-report/avm-report-delayed.js b/blocks/avm-report/avm-report-delayed.js
deleted file mode 100644
index 19a7d9a1..00000000
--- a/blocks/avm-report/avm-report-delayed.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import { fetchPlaceholders } from '../../scripts/aem.js';
-
-async function initGooglePlacesAPI() {
-  const placeholders = await fetchPlaceholders();
-  const CALLBACK_FN = 'initAvmPlaces';
-  const { mapsApiKey } = placeholders;
-  const script = document.createElement('script');
-  script.type = 'text/javascript';
-  script.async = true;
-  script.defer = true;
-  script.innerHTML = `
-    window.${CALLBACK_FN} = function(){
-      const input = document.querySelector('form input[name="avmaddress"]');
-      const autocomplete = new google.maps.places.Autocomplete(input, {fields:['formatted_address'], types: ['address']});
-    }
-    const script = document.createElement('script');
-      script.src = "https://maps.googleapis.com/maps/api/js?key=${mapsApiKey}&libraries=places&callback=${CALLBACK_FN}";
-      document.head.append(script);
-  `;
-  document.head.append(script);
-}
-
-initGooglePlacesAPI();
diff --git a/blocks/avm-report/avm-report.css b/blocks/avm-report/avm-report.css
index 4f463616..08ad8820 100644
--- a/blocks/avm-report/avm-report.css
+++ b/blocks/avm-report/avm-report.css
@@ -43,6 +43,9 @@
   width: 67px;
 }
 
+.avm-report.block form button[type="submit"] {
+  transition: all .3s ease-in;
+}
 
 @media screen and (min-width: 600px) {
   .avm-report.block {
diff --git a/blocks/avm-report/avm-report.js b/blocks/avm-report/avm-report.js
index dc2a0e77..c6a7f5fc 100644
--- a/blocks/avm-report/avm-report.js
+++ b/blocks/avm-report/avm-report.js
@@ -1,23 +1,8 @@
-import {
-  showModal,
-} from '../../scripts/util.js';
-
-let alreadyDeferred = false;
-function initGooglePlacesAPI() {
-  if (alreadyDeferred) {
-    return;
-  }
-  alreadyDeferred = true;
-  const script = document.createElement('script');
-  script.type = 'text/partytown';
-  script.innerHTML = `
-    const script = document.createElement('script');
-    script.type = 'module';
-    script.src = '${window.hlx.codeBasePath}/blocks/avm-report/avm-report-delayed.js';
-    document.head.append(script);
-  `;
-  document.head.append(script);
-}
+import { showModal } from '../../scripts/util.js';
+
+import loadMaps from '../../scripts/google-maps/index.js';
+
+let autocompleteAttached = false;
 
 export default async function decorate(block) {
   const form = document.createElement('form');
@@ -32,6 +17,19 @@ export default async function decorate(block) {
 
   const addressField = form.querySelector('input[name="avmaddress"]');
 
+  addressField.addEventListener('focus', async () => {
+    if (!autocompleteAttached) {
+      loadMaps();
+      await window.google.maps.importLibrary('places');
+      // eslint-disable-next-line no-unused-vars
+      const autocomplete = new window.google.maps.places.Autocomplete(addressField, {
+        fields: ['formatted_address'],
+        types: ['address'],
+      });
+      autocompleteAttached = true;
+    }
+  });
+
   form.addEventListener('submit', (e) => {
     e.preventDefault();
     const address = addressField.value;
@@ -49,5 +47,4 @@ export default async function decorate(block) {
     window.location = redirect;
   });
   block.append(form);
-  initGooglePlacesAPI();
 }
diff --git a/scripts/google-maps/index.js b/scripts/google-maps/index.js
new file mode 100644
index 00000000..2838be5d
--- /dev/null
+++ b/scripts/google-maps/index.js
@@ -0,0 +1,21 @@
+import { getMetadata } from '../aem.js';
+
+let loaded = false;
+
+/* eslint-disable */
+const scriptFunc = (key) => {
+  (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
+    key,
+    v: "weekly",
+    // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
+    // Add other bootstrap parameters as needed, using camel case.
+  });
+};
+/* eslint-enable */
+
+export default function loadMaps() {
+  if (!loaded) {
+    loaded = true;
+    scriptFunc(getMetadata('google-maps-api-key'));
+  }
+}