reduced script loading and added rerenderer for recaptcha

hlxsites · May 17, 2024 · 4061119 · 4061119
1 parent 3548c33
commit 4061119
Show file tree

Hide file tree

Showing 8 changed files with 99 additions and 42 deletions.
diff --git a/blocks/contact-form/contact-form.css b/blocks/contact-form/contact-form.css
@@ -1,7 +1,35 @@
-.contact-form.block form,
+.contact-form.block,
+.contact-form.block form {
+  font-family: var(--font-family-primary);
+}
+
+.contact-form.block .form-title {
+  font-size: var(--heading-font-size-l);
+  line-height: var(--line-height-xs);
+  font-weight: 700;
+  margin-top: 30px;
+  margin-left: 40px;
+  margin-bottom: 3em;
+}
+
+.contact-form.block .company-name {
+  font-size: var(--heading-font-size-m);
+  line-height: var(--line-height-xs);
+  font-weight: 800;
+  margin-bottom: .5em;
+}
+
 .contact-form.block .company-email,
 .contact-form.block .company-phone {
-  font-family: var(--font-family-proxima);
+  padding-bottom: .5em;
+}
+
+.contact-form.block a {
+  color: var(--body-color);
+}
+
+.contact-form.block form#property-contact {
+  margin-top: 3rem;
 }
 
 .contact-form.block form.contact-form .message {

diff --git a/blocks/contact-form/contact-form.js b/blocks/contact-form/contact-form.js
@@ -1,5 +1,5 @@
 import { loadScript } from '../../scripts/aem.js';
-import { hideSideModal, i18nLookup, getCookieValue } from '../../scripts/util.js';
+import { removeSideModal, i18nLookup, getCookieValue } from '../../scripts/util.js';
 
 const LOGIN_ERROR = 'There was a problem processing your request.';
 const i18n = await i18nLookup();
@@ -262,7 +262,7 @@ const addForm = async (block) => {
                   btn.setAttribute('href', '#');
                   btn.addEventListener('click', (event) => {
                     event.preventDefault();
-                    hideSideModal();
+                    removeSideModal();
                   });
                   sideModal?.replaceChildren(thankYou);
                 } else {
@@ -323,7 +323,7 @@ const addForm = async (block) => {
     cancelBtn.addEventListener('click', (e) => {
       e.preventDefault();
       e.stopPropagation();
-      hideSideModal();
+      removeSideModal();
     });
   }
 
@@ -367,6 +367,13 @@ const addForm = async (block) => {
         }
       });
     });
+
+  if (window.grecaptcha) {
+    recaptchaToken = null;
+    renderRecaptcha();
+  } else {
+    loadScript('https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit', { async: true, defer: true });
+  }
 };
 
 export default async function decorate(block) {

diff --git a/blocks/contact-form/forms/callback.js b/blocks/contact-form/forms/callback.js
@@ -12,3 +12,12 @@ function onloadCallback() {
     callback: verifyCallback,
   });
 }
+
+function renderRecaptcha() {
+  if (document.getElementById('captcha-20285')) {
+    grecaptcha.render('captcha-20285', {
+      sitekey: window.placeholders.default.recaptchaSitekey,
+      callback: verifyCallback,
+    });
+  }
+}
diff --git a/blocks/contact-form/forms/contact-property.html b/blocks/contact-form/forms/contact-property.html
@@ -1,8 +1,8 @@
 <div class="contact-form">
-  <h1 id="contact-us">Contact Us</h1>
-  <div class="company-name"></div>
-  <div class="company-email"></div>
-  <div class="company-phone">Direct: </div>
+  <div class="form-title">Contact Us</div>
+  <div class="company-name">Berkshire Hathaway HomeServices<br>Commonwealth Real Estate</div>
+  <div class="company-email"><a href="mailto:[email protected]" tabindex="-1">[email protected]</a></div>
+  <div class="company-phone">Direct: <a href="tel:(508) 810-0700" tabindex="-1">(508) 810-0700</a></div>
   <form id="property-contact" class="contact-form form-elements" method="post" action="/bin/bhhs/websiteTopicServlet">
     <div class="message">
       <svg class="icon error" role="presentation">

diff --git a/blocks/property-listing/cards/cards.js b/blocks/property-listing/cards/cards.js
@@ -1,5 +1,6 @@
 import { propertySearch } from '../../../scripts/apis/creg/creg.js';
 import { decorateIcons } from '../../../scripts/aem.js';
+import { decorateFormLinks } from '../../../scripts/scripts.js';
 
 function createImage(listing) {
   if (listing.SmallMedia?.length > 0) {
@@ -50,9 +51,9 @@ export function createCard(listing) {
 
   item.innerHTML = `
     <a href="${detailsPath}" rel="noopener" aria-label="${listing.StreetName}">
-      <div class="listing-image-container"> 
-        <div class="property-image"> 
-          ${createImage(listing)} 
+      <div class="listing-image-container">
+        <div class="property-image">
+          ${createImage(listing)}
         </div>
         <div class="image-position-top">
           <div class="property-labels">
@@ -63,46 +64,46 @@ export function createCard(listing) {
             </div>
           </div>
         </div>
-        <div class="image-position-bottom"> 
+        <div class="image-position-bottom">
           <div class="property-labels">
             <span class="property-label featured">Featured Listing</span>
             ${applicationType}
             <span class="property-label">${listing.mlsStatus}</span>
           </div>
           <div class="property-price">
               ${listing.ListPriceUS}
-          </div> 
-        </div> 
+          </div>
+        </div>
       </div>
     </a>
     <div class="property-details">
-      <div class="property-info-wrapper"> 
-        <div class="property-info"> 
+      <div class="property-info-wrapper">
+        <div class="property-info">
           <div class="sold-date">Closed: ${listing.ClosedDate}</div>
-          <div class="address"> 
+          <div class="address">
             ${listing.StreetName}
-            <br> 
-            ${listing.City}, ${listing.StateOrProvince} ${listing.PostalCode} 
-          </div> 
-          <div class="specs">${specs.join(' / ')}</div> 
-        </div> 
-      </div> 
-      <div class="property-buttons"> 
-        <div class="buttons-row-flex"> 
-          <a aria-label="Contact Form" href="#" class="button-property"> 
+            <br>
+            ${listing.City}, ${listing.StateOrProvince} ${listing.PostalCode}
+          </div>
+          <div class="specs">${specs.join(' / ')}</div>
+        </div>
+      </div>
+      <div class="property-buttons">
+        <div class="buttons-row-flex">
+          <a aria-label="Contact Form" href="/fragments/contact-property-form" class="button-property">
             <span class="icon icon-envelope"></span>
             <span class="icon icon-envelopedark"></span>
-          </a> 
-          <a aria-label="Save" href="#" class="button-property"> 
+          </a>
+          <a aria-label="Save" href="#" class="button-property">
             <span class="icon icon-heartempty"></span>
             <span class="icon icon-heartemptydark"></span>
           </a>
         </div>
       </div>
     </div>
-    <hr> 
+    <hr>
     <div class="extra-info">
-      <div> 
+      <div>
         <div class="courtesy-info">Listing courtesy of: ${listing.CourtesyOf}</div>
         <div class="courtesy-provided">Listing provided by: ${listing.listAor}</div>
       </div>
@@ -132,6 +133,7 @@ export async function render(searchParams, parent) {
         list.append(createCard(listing));
       });
       decorateIcons(parent);
+      decorateFormLinks(parent);
     }
   });
 }
diff --git a/scripts/delayed.js b/scripts/delayed.js
@@ -39,10 +39,3 @@ if (!window.location.host.includes('localhost')) loadAdobeLaunch();
 if (!getCookieValue('consumerID')) {
   loadIDServlet();
 }
-
-// Load reCAPTCHA script on specific pages that have forms (including sidebar forms)
-const paths = ['/contact-us', '/search', '/careers', '/luxury-collection'];
-
-if (paths.some((path) => window.location.pathname.startsWith(path))) {
-  loadScript('https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit', { async: true, defer: true });
-}
diff --git a/scripts/scripts.js b/scripts/scripts.js
@@ -152,12 +152,29 @@ function decorateVideoLinks(main) {
     });
 }
 
-function decorateFormLinks(main) {
+/**
+ * Finds the parent anchor tag of the given event target.
+ * @param {Event} event - The event object.
+ * @returns {HTMLAnchorElement|null} - The parent anchor tag, or null if not found.
+ */
+function findParentAnchorTag(event) {
+  let element = event.target;
+  while (element && element.nodeName !== 'A') {
+    element = element.parentNode;
+  }
+  return element;
+}
+
+/**
+ * Decorates form links by attaching a click event listener to open a side modal.
+ * @param {HTMLElement} main - The main element containing the form links.
+ */
+export function decorateFormLinks(main) {
   async function openSideModal(event) {
     event.preventDefault();
     const module = await import(`${window.hlx.codeBasePath}/blocks/side-modal/side-modal.js`);
     if (module.showSideModal) {
-      await module.showSideModal(event.target);
+      await module.showSideModal(findParentAnchorTag(event));
     }
   }
   main.querySelectorAll('a[href*="form"]').forEach((a) => {

diff --git a/scripts/util.js b/scripts/util.js
@@ -52,9 +52,10 @@ export function showModal(content) {
 let sideModal;
 let focusElement;
 
-export function hideSideModal() {
+export function removeSideModal() {
   if (!sideModal) return;
-  sideModal.ariaExpanded = false;
+  sideModal.parentNode.remove();
+  sideModal = null;
   document.body.classList.remove('disable-scroll');
   if (focusElement) focusElement.focus();
 }