Merge pull request #1520 from hlxsites/contact-search

contact serach page fix
hlxsites · Oct 21, 2024 · 59f69ea · 59f69ea
2 parents c4a536b + 4b038af
commit 59f69ea
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 12 deletions.
diff --git a/blocks/get-in-touch/get-in-touch.js b/blocks/get-in-touch/get-in-touch.js
@@ -1,3 +1,4 @@
+import ffetch from '../../scripts/ffetch.js';
 import { getCookie } from '../../scripts/scripts.js';
 
 let DEFAULT_CMP = '';
@@ -15,7 +16,7 @@ function hubSpotFinalUrl(hubspotUrl, paramName) {
   searchParams.delete('region');
   searchParams.delete('return_url');
 
-  returnURL.set('region', queryParams.get('region'));
+  returnURL.set('region', queryParams.get('region') || REGION);
 
   if (paramName === 'general') {
     searchParams.delete(COMMENTS);
@@ -65,10 +66,10 @@ function createMap(block, mapUrl) {
   observer.observe(block);
 }
 
-function regenerateForm(hubspotUrl, params, region) {
+function regenerateForm(hubspotUrl, params) {
   const hubspotIframe = document.querySelector('.get-in-touch-form');
   if (hubspotUrl) {
-    const hubUrl = hubSpotFinalUrl(hubspotUrl, params, region);
+    const hubUrl = hubSpotFinalUrl(hubspotUrl, params);
     hubspotUrl.href = hubUrl.href;
     hubspotIframe.querySelector('iframe').setAttribute('src', hubspotUrl);
   }
@@ -96,17 +97,27 @@ function scrollToForm(link, hubspotUrl, region) {
   });
 }
 
-export default function decorate(block) {
+export default async function decorate(block) {
   const queryParams = new URLSearchParams(window.location.search);
   const hubspotUrl = block.querySelector('[href*="https://info.moleculardevices.com"]');
   const mapUrl = block.querySelector('[href*="https://maps.google.com"]');
 
+  /* set success msg */
   if (queryParams.has('msg') && queryParams.get('msg') === 'success') {
+    const getInTouchBlock = document.querySelector('.get-in-touch');
     const successMsg = block.lastElementChild.firstElementChild;
     successMsg.classList.add('hubspot-success');
     hubspotUrl.closest('div').replaceWith(successMsg);
     block.lastElementChild.remove();
     createMap(block, mapUrl);
+    setTimeout(() => {
+      if (getInTouchBlock) {
+        window.scroll({
+          top: getInTouchBlock.offsetTop - 100,
+          behavior: 'smooth',
+        });
+      }
+    }, 1000);
   } else {
     block.lastElementChild.remove(); // success message we don't need for this case
     createForm(block, hubspotUrl);
@@ -115,14 +126,42 @@ export default function decorate(block) {
 
   /* get region on tab click */
   const tabLinks = document.querySelectorAll('.regional-contacts-wrapper .tab-wrapper > a');
-  tabLinks.forEach((link) => {
-    link.addEventListener('click', () => {
-      const regionName = link.hash.split('#')[1] || queryParams.get('region');
-      REGION = regionName;
-      regenerateForm(hubspotUrl, '', REGION);
+  if (tabLinks) {
+    tabLinks.forEach((link) => {
+      link.addEventListener('click', () => {
+        const regionName = link.hash.split('#')[1] || queryParams.get('region');
+        REGION = regionName;
+        regenerateForm(hubspotUrl, '');
+        setTimeout(() => {
+          document.getElementById('country').selectedIndex = 1;
+        }, 500);
+      });
     });
-  });
+  }
+
+  /* get region on country change */
+  const distributors = await ffetch('/contact/local-distibutors.json').withFetch(fetch).all();
+  const searchButton = document.querySelector('#searchButton > button');
+  const countrySelect = document.getElementById('country');
+
+  if (window.location.pathname === '/contact-search') {
+    REGION = distributors.filter(
+      (dist) => dist.DisplayCountry === countrySelect.value)[0].Region.toLowerCase();
+  } else {
+    document.getElementById('country').selectedIndex = 1;
+  }
+
+  if (searchButton) {
+    searchButton.addEventListener('click', (event) => {
+      event.preventDefault();
+      const countryObj = distributors.filter(
+        (dist) => dist.DisplayCountry === countrySelect.value)[0].Region.toLowerCase();
+      REGION = countryObj || queryParams.get('region');
+      regenerateForm(hubspotUrl, '');
+    });
+  }
 
+  /* scroll to form on click of inquiry links */
   const inquiryLinks = ['General Inquiry Form', 'Sales Inquiry Form', 'Contact Local Team', 'Service plans/warranty'];
   const links = document.querySelectorAll('a[title]');
   links.forEach((link) => {

diff --git a/blocks/local-distributor/local-distributor.js b/blocks/local-distributor/local-distributor.js
@@ -119,7 +119,20 @@ export default async function decorate(block) {
       ),
     ];
   } else {
-    countryList = [...new Set(distributors.map(({ DisplayCountry }) => DisplayCountry))];
+    const countryName = params.country;
+    if (countryName) {
+      const region = distributors.filter(
+        (dist) => dist.Country === countryName)[0].Region.toLowerCase();
+      countryList = [
+        ...new Set(
+          distributors
+            .filter(({ Region }) => Region.toLowerCase().includes(region) > 0)
+            .map(({ DisplayCountry }) => DisplayCountry),
+        ),
+      ];
+    } else {
+      countryList = [...new Set(distributors.map(({ DisplayCountry }) => DisplayCountry))];
+    }
   }
 
   const searchButtton = document.querySelector('.tab-wrapper');
@@ -235,7 +248,7 @@ export default async function decorate(block) {
     productFamilyList.map((family) => family.DisplayPrimaryProducts));
   document.querySelector('.local-distributor > div').lastElementChild.innerHTML = formWrapper;
   document.querySelector('.local-distributor').appendChild(searchResult);
-  const searchButton = document.getElementById('searchButton');
+  const searchButton = document.querySelector('#searchButton > button');
 
   searchButton.addEventListener('click', () => {
     // eslint-disable-next-line no-unused-expressions