diff --git a/blocks/contact-form/contact-form.css b/blocks/contact-form/contact-form.css index 8450563c..c9b0ba23 100644 --- 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 index 02c82bfa..d38dfff2 100644 --- 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 index 5712dce9..87e1b35e 100644 --- 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 index 45111aa2..63039424 100644 --- a/blocks/contact-form/forms/contact-property.html +++ b/blocks/contact-form/forms/contact-property.html @@ -1,8 +1,8 @@
-

Contact Us

-
-
-
Direct:
+
Contact Us
+
Berkshire Hathaway HomeServices
Commonwealth Real Estate
+
realestateinquiry@commonmoves.com
+
Direct: (508) 810-0700
diff --git a/blocks/property-listing/cards/cards.js b/blocks/property-listing/cards/cards.js index d690fc3e..bd1d8109 100644 --- 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 = ` -
-
- ${createImage(listing)} +
+
+ ${createImage(listing)}
@@ -63,7 +64,7 @@ export function createCard(listing) {
-
+
Featured Listing ${applicationType} @@ -71,38 +72,38 @@ export function createCard(listing) {
${listing.ListPriceUS} -
-
+
+
-
-
+
+
Closed: ${listing.ClosedDate}
-
+
${listing.StreetName} -
- ${listing.City}, ${listing.StateOrProvince} ${listing.PostalCode} -
-
${specs.join(' / ')}
-
-
- +
+
-
+
-
+
Listing courtesy of: ${listing.CourtesyOf}
Listing provided by: ${listing.listAor}
@@ -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 index c12024d8..83afb01c 100644 --- 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 index b0f15a05..9397d263 100644 --- 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 index 93130afe..dc93dc14 100644 --- 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(); }