Main branch merged

README.md

@@ -76,7 +76,7 @@ In this setup, the proxy is configured to route non-API traffic on the Staging d
 
 This setup uses a locally resolved domain, which will Proxyman will use to route the traffic. All non-API traffic will route to localhost, all API traffic will go to the Stage domain.
 
-1. Add an entry to `/etc/maps`:
+1. Add an entry to `/etc/hosts`:
    Proxyman won't proxy localhost, so a custom domain is required. Add the following (if you already have a host entry for 127.0.0.1, simply add the new domain)
 > 127.0.0.1 proxyman.debug 
 

blocks/agent-about/agent-about.css

@@ -7,10 +7,6 @@
   letter-spacing: normal;
 }
 
-.agent-about.block a {
-  cursor: pointer;
-}
-
 .agent-about.block .hide {
   display: none;
 }
@@ -20,6 +16,8 @@
   display: inline-block;
   margin-top: 1rem;
   text-decoration: underline;
+  font-size: var(--body-font-size-xs);
+  color: var(--black);
 }
 
 .agent-about.block a.view-more::after {
@@ -31,9 +29,8 @@
 }
 
 .agent-about.block>div.cols-1,
-.agent-about.block>div.cols-2,
-.agent-about.block>div.cols-3 {
-  padding-bottom: 1rem;
+.agent-about.block>div.cols-2 {
+  padding-bottom: 2rem;
 }
 
 .agent-about.block>div>div:first-of-type {

blocks/agent-about/agent-about.js

@@ -1,3 +1,4 @@
+import { getMetadata } from '../../scripts/aem.js';
 import {
   a, div, ul, li,
 } from '../../scripts/dom-helpers.js';
@@ -18,7 +19,23 @@ const viewMoreOnClick = (name, anchor, block) => {
   });
 };
 
+const getCol = (list, colText) => {
+  const colsUl = ul();
+  list.split(',').forEach((x) => {
+    colsUl.append(li(x.trim()));
+  });
+  return div(div(colText), div(colsUl));
+};
+
 export default function decorate(block) {
+  const aboutText = getMetadata('about');
+  const accreditations = getMetadata('professional-accreditations');
+  const languages = getMetadata('languages');
+
+  block.replaceChildren(div(div('About'), div(aboutText)),
+    getCol(accreditations, 'Professional Accreditations'),
+    getCol(languages, 'Languages'));
+
   const children = [...block.children];
   if (children?.length) {
     children.forEach((child, index) => {
@@ -31,7 +48,7 @@ export default function decorate(block) {
           child.children[1].classList.add('hide');
           child.append(div({ class: `${name}-truncate` },
             `${child.children[1].textContent.substring(0, threshold)}...`));
-          const anchor = a({ class: 'view-more' });
+          const anchor = a({ class: 'view-more', href: '#' });
           child.append(anchor);
           viewMoreOnClick(name, anchor, block);
         }
@@ -43,15 +60,15 @@ export default function decorate(block) {
 
         if (liItems.length > threshold) {
           child.children[1].classList.add('hide');
-          const tempUl = ul({ });
+          const tempUl = ul();
           Array.from(child.children[1].querySelectorAll('li'))
             .slice(0, threshold).forEach((liItem) => {
-              const tempLi = li({}, liItem.textContent);
+              const tempLi = li(liItem.textContent);
               tempUl.append(tempLi);
             });
 
           child.append(div({ class: `${name}-truncate` }, tempUl));
-          const anchor = a({ class: 'view-more' });
+          const anchor = a({ class: 'view-more', href: '#' });
           child.append(anchor);
           viewMoreOnClick(name, anchor, block);
         }

blocks/agent-address/agent-address.css

@@ -0,0 +1,35 @@
+.agent-address.block {
+  padding: 2rem;
+  background-color: var(--tertiary-color);
+}
+
+.agent-address.block .address {
+  margin-bottom: 2rem;
+}
+
+.agent-address.block .address>p {
+  margin-bottom: 0;
+  font-size: var(--body-font-size-xs);
+}
+
+.agent-address.block a {
+  border: 1px solid var(--primary-color);
+  color: var(--primary-color);
+  font-weight: var(--font-weight-bold);
+  letter-spacing: var(--letter-spacing-m);
+  text-transform: uppercase;
+  padding: 0.5rem 1rem;
+  text-decoration: none;
+  font-size: var(--body-font-size-s);
+}
+
+.agent-address.block a:hover {
+  color: var(--primary-light);
+  background-color: var(--primary-color);
+}
+
+@media (min-width: 600px) {
+  .agent-address.block {
+    display: none;
+  }
+}

blocks/agent-address/agent-address.js

@@ -0,0 +1,22 @@
+import { getMetadata } from '../../scripts/aem.js';
+import {
+  a, div, p,
+} from '../../scripts/dom-helpers.js';
+
+export default function decorate(block) {
+  const streetAddress = getMetadata('street-address');
+  const city = getMetadata('city');
+  const state = getMetadata('state');
+  const zip = getMetadata('zip');
+
+  const textDiv = div({ class: 'address' },
+    p('Berkshire Hathaway HomeServices'),
+    p('Commonwealth Real Estate'),
+    p(streetAddress),
+    p(`${city}, ${state} ${zip}`),
+  );
+  const text = `${streetAddress}, ${city}, ${state} ${zip}`;
+
+  const anchor = a({ href: `https://maps.google.com/maps?q=${text}`, target: '_blank' }, 'Directions');
+  block.replaceChildren(textDiv, anchor);
+}

blocks/agent-profile/agent-profile.js

@@ -8,13 +8,13 @@ const getPhoneDiv = () => {
   let phoneUl;
 
   if (getMetadata('direct-phone')) {
-    phoneUl = ul({});
-    phoneUl.append(li({}, 'Direct: ', getMetadata('direct-phone')));
+    phoneUl = ul();
+    phoneUl.append(li('Direct: ', getMetadata('direct-phone')));
   }
 
   if (getMetadata('office-phone')) {
-    phoneUl = phoneUl || ul({});
-    phoneUl.append(li({}, 'Office: ', getMetadata('office-phone')));
+    phoneUl = phoneUl || ul();
+    phoneUl.append(li('Office: ', getMetadata('office-phone')));
   }
 
   if (phoneUl) {
@@ -62,9 +62,9 @@ const getSocialDiv = () => {
 
   ['facebook', 'instagram', 'linkedin'].forEach((x) => {
     const url = getMetadata(x);
-    socialUl = socialUl || ul({});
+    socialUl = socialUl || ul();
     if (url) {
-      const socialLi = li({}, a({
+      const socialLi = li(a({
         href: url, class: x, title: x, 'aria-label': x,
       }, span({ class: `icon icon-${x}` })));
       socialUl.append(socialLi);
@@ -82,7 +82,7 @@ const getSocialDiv = () => {
 export default async function decorate(block) {
   const profileImage = getImageDiv();
   const profileContent = div({ class: 'profile-content' },
-    div({ class: 'name' }, h1({}, getMetadata('name'))),
+    div({ class: 'name' }, h1(getMetadata('name'))),
     div({ class: 'designation' }, getMetadata('designation')),
   );
 

blocks/agent-property/agent-property.css

@@ -0,0 +1,100 @@
+@import url('../shared/property/cards.css');
+
+.agent-property.block {
+    overflow: hidden;
+    width: 100%;
+}
+
+.agent-property.block a {
+    text-decoration: none;
+}
+
+.agent-property.block .gmap-canvas {
+    width: 100%;
+    height: 0;
+    transition: height 0.5s ease;
+    display: none;
+}
+
+.agent-property.block .view-toggle {
+    margin-bottom: 20px;
+}
+
+.agent-property.block .gmap-canvas.active {
+    display:block;
+    height: 500px;
+}
+
+.agent-property.block .view-toggle .card-view {
+    display: none;
+    margin-left: 70%;
+    font-family: Manrope, sans-serif;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 700;
+    letter-spacing: 1.6px;
+    text-transform: uppercase;
+    border: 1px solid #2a2223;
+    line-height: 35px;
+    background: #fff;
+}
+
+.agent-property.block .view-toggle .map-view {
+    margin-left: 70%;
+    font-family: Manrope, sans-serif;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 700;
+    letter-spacing: 1.6px;
+    text-transform: uppercase;
+    border: 1px solid #2a2223;
+    line-height: 35px;
+    background: #fff;
+}
+
+.agent-property.block .header {
+    display: flex;
+    flex-direction: column;
+}
+
+.agent-property.block .header > div {
+    margin-bottom: 24px;
+}
+
+.agent-property.block .header > div > span {
+    color: var(--primary-color);
+    font-size: var(--heading-font-size-l);
+    font-weight: var(--font-weight-semibold);
+    letter-spacing: initial;
+    line-height: var(--line-height-m);
+    text-transform: capitalize;
+}
+
+.agent-property.block .header > div > p {
+    margin: 0;
+}
+
+.agent-property.block .property-list-cards .listing-tile .extra-info {
+    display:none;
+}
+
+.liveby-community .agent-property.block {
+    max-width: 1150px;
+    margin: auto;
+}
+
+@media (min-width: 600px) {
+    .agent-property.block .header {
+        flex-direction: row;
+        justify-content: space-between;
+    }
+
+    .agent-property.block .header .button-container {
+        justify-content: flex-end;
+    }
+
+    .agent-property.block .view-toggle .map-view , .agent-property.block .view-toggle .card-view {
+        margin-left: 90.5%;
+        width: 115px;
+    }
+}

blocks/agent-property/agent-property.js

@@ -0,0 +1,81 @@
+/* global google */
+
+import { render as renderCards } from '../shared/property/cards.js';
+import { button, div } from '../../scripts/dom-helpers.js';
+import loadMaps from '../../scripts/google-maps/index.js';
+import { loadScript, getMetadata } from '../../scripts/aem.js';
+
+const cardView = button({ class: 'card-view' }, 'Grid View');
+const mapView = button({ class: 'map-view' }, 'Map View');
+const viewToggle = div({ class: 'view-toggle' });
+const map = div({ class: 'gmap-canvas' });
+const agentId = getMetadata('agent-id');
+let centerlat;
+let centerlong;
+let data;
+
+function initMap(block, properties) {
+  const ele = block.querySelector('.gmap-canvas');
+  const gmap = new google.maps.Map(ele, {
+    zoom: 9, // Set an appropriate zoom level
+    center: { lat: centerlat, lng: centerlong }, // Set a default center
+    mapTypeId: google.maps.MapTypeId?.ROADMAP,
+    clickableIcons: false,
+    gestureHandling: 'cooperative',
+    visualRefresh: true,
+    disableDefaultUI: true,
+  });
+
+  const createMarker = (property, amap) => new google.maps.Marker({
+    position: { lat: parseFloat(property.Latitude), lng: parseFloat(property.Longitude) },
+    map: amap,
+    title: property.StreetName,
+  });
+
+  properties.forEach((property) => {
+    createMarker(property, gmap);
+  });
+}
+
+export default async function decorate(block) {
+  const list = document.createElement('div');
+  list.classList.add('property-list-cards', 'rows-1');
+  viewToggle.append(cardView, mapView);
+  block.append(viewToggle, list, map);
+
+  try {
+    const response = await fetch(`/bin/bhhs/agentPropertyListingsServlet.${agentId}.json`);
+    data = await response.json();
+    if (data) {
+      const [firstProperty] = data.listings.properties;
+      const { Latitude: latitude, Longitude: longitude } = firstProperty;
+      centerlat = parseFloat(latitude);
+      centerlong = parseFloat(longitude);
+      renderCards(list, data.listings.properties);
+    }
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.error('Error fetching agent properties', error);
+  }
+
+  document.querySelector('.card-view').addEventListener('click', () => {
+    document.querySelector('.property-list-cards').style.display = 'grid';
+    document.querySelector('.card-view').style.display = 'none';
+    document.querySelector('.map-view').style.display = 'block';
+    document.querySelector('.gmap-canvas').classList.remove('active');
+  });
+
+  document.querySelector('.map-view').addEventListener('click', async () => {
+    document.querySelector('.gmap-canvas').classList.add('active');
+    document.querySelector('.map-view').style.display = 'none';
+    document.querySelector('.card-view').style.display = 'block';
+    document.querySelector('.property-list-cards').style.display = 'none';
+    loadMaps();
+    await google.maps.importLibrary('core');
+    await google.maps.importLibrary('maps');
+    await google.maps.importLibrary('marker');
+    await loadScript('https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js', { type: 'application/javascript' });
+    await loadScript('https://unpkg.com/jsts/dist/jsts.min.js', { type: 'application/javascript' });
+    initMap(block, data.listings.properties);
+  });
+}