link envelope from property-listing

hlxsites · Jun 5, 2024 · f4be7af · f4be7af
1 parent 275f4c5
commit f4be7af
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 20 deletions.
diff --git a/blocks/contact-form/contact-form.js b/blocks/contact-form/contact-form.js
@@ -9,6 +9,11 @@ const phoneRegex = /^[+]?[ (]?\d{3}[)]?[-.\s]?\d{3}[-.\s]?\d{4}$/;
 // Load reCaptcha script used on all forms.
 loadScript('/blocks/contact-form/forms/callback.js');
 
+function findListing() {
+  const temp = window.propertyListings?.properties || [];
+  return temp?.find((property) => property.ListingId === window.selectedListingId) || null;
+}
+
 /**
  * Adds form and cookie values to payload.
  *
@@ -314,7 +319,11 @@ const addForm = async (block) => {
   });
 
   const taEl = block.querySelector('textarea');
-  if (taEl && taEl.placeholder) taEl.placeholder = i18n(taEl.placeholder);
+  if (taEl?.placeholder) taEl.placeholder = i18n(taEl.placeholder);
+  if (window.selectedListingId) {
+    const prop = findListing();
+    taEl.value = `Hi, I would like more information about ${prop.StreetName}, ${prop.City}, ${prop.StateOrProvince} ${prop.PostalCode}.`;
+  }
 
   block.style.display = displayValue;
 

diff --git a/blocks/property-listing/property-listing.js b/blocks/property-listing/property-listing.js
@@ -2,36 +2,38 @@ import { getMetadata, readBlockConfig } from '../../scripts/aem.js';
 import { render as renderCards } from '../shared/property/cards.js';
 import Search from '../../scripts/apis/creg/search/Search.js';
 import { propertySearch } from '../../scripts/apis/creg/creg.js';
+import { a, div, p, span } from '../../scripts/dom-helpers.js';
 
 export default async function decorate(block) {
   // Find and process list type configurations.
   const config = readBlockConfig(block);
+  const search = await Search.fromBlockConfig(config);
+  search.franchiseeCode = getMetadata('office-id');
+  const searchUrl = `search?${search.asCregURLSearchParameters()}`;
 
   if (config.title) {
-    block.innerHTML = `
-      <div class="header">
-        <div>
-          <span>${config.title}</span>
-        </div>
-      </div>
-    `;
-    if (config['link-text']) {
-      const div = document.createElement('div');
-      const url = config['link-url'] || '';
-      div.innerHTML = `
-      <p class="button-container">
-        <a href="${url}" aria-label="${config['link-text'] || 'See More'}">${config['link-text'] || 'See More'}</a>
-      </p>`;
-      block.querySelector('.header').append(div);
+    const blockTitle = div({ class: 'header' },
+      div(
+        span(config.title),
+      ),
+    );
+    block.replaceChildren(blockTitle);
+
+    if (config.link) {
+      const moreBtn = div(
+        p({ class: 'button-container' },
+          a({ href: config['link-url'] || searchUrl, 'aria-label': config.link || 'See More', class: 'button secondary' },
+            config.link || 'See More',
+          ),
+        ),
+      );
+      block.querySelector('.header').append(moreBtn);
     }
   } else {
     block.innerHTML = '';
   }
 
-  const search = await Search.fromBlockConfig(config);
-  search.franchiseeCode = getMetadata('office-id');
-  const list = document.createElement('div');
-  list.classList.add('property-list-cards', `rows-${Math.floor(search.pageSize / 8)}`);
+  const list = div({ class: `property-list-cards rows-${Math.floor(search.pageSize / 8)}` });
   block.append(list);
   propertySearch(search).then((results) => {
     window.propertyListings = results;

diff --git a/blocks/side-modal/side-modal.js b/blocks/side-modal/side-modal.js
@@ -5,6 +5,8 @@ import {
 
 export async function showSideModal(a) {
   const { href } = a;
+  const listing = a.parentNode.parentNode.previousElementSibling.querySelector('div.address').id.split('-')[1];
+  window.selectedListingId = listing;
   const module$ = import(`${window.hlx.codeBasePath}/scripts/util.js`);
   await loadCSS(`${window.hlx.codeBasePath}/blocks/side-modal/side-modal.css`);
   const content = await fetch(`${href}.plain.html`);