Feature/savedprops

blocks/property-listing/property-listing.js

@@ -1,7 +1,8 @@
 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 { propertySearch, getSavedProperties } from '../../scripts/apis/creg/creg.js';
+import { getUserDetails } from '../../scripts/apis/user.js';
 import {
   a, div, p, span,
 } from '../../scripts/dom-helpers.js';
@@ -38,10 +39,25 @@ export default async function decorate(block) {
   } else {
     block.innerHTML = '';
   }
+  const user = await getUserDetails();
+  if (!user) {
+    return;
+  }
+  const { contactKey } = user;
 
   const list = div({ class: `property-list-cards rows-${Math.floor(search.pageSize / 4)}` });
   block.append(list);
   propertySearch(search).then((results) => {
     renderCards(list, results.properties);
+    getSavedProperties(contactKey).then((savedProps) => {
+      if (savedProps?.properties) {
+        savedProps.properties.forEach((listing) => {
+          const card = block.querySelector(`[data-id="${listing.PropId}"]`);
+          if (card) {
+            card.classList.add('saved');
+          }
+        });
+      }
+    });
   });
 }

blocks/saved-properties/saved-properties.css

@@ -0,0 +1,158 @@
+@import url('../../blocks/property-listing/property-listing.css');
+
+.saved-properties.block .property-list-cards .property-details .property-buttons .button-property .icon-heartfull {
+  display: block;
+}
+
+.saved-properties.block .property-list-cards .property-details .property-buttons .button-property .icon-heartempty {
+  display: none;
+}
+
+.saved-properties.block .confirmation-modal {
+  border: 0;
+  display: none;
+  background: var(--white);
+  position: fixed;
+  z-index: 1050;
+  right: auto;
+  left: auto;
+  top: auto;
+  bottom: auto;
+  min-height: 0;
+  padding: 20px 20px 30px;
+  height: auto;
+  width: 100%;
+  max-width: calc(100vw - 30px);
+}
+
+body.modal-open {
+  overflow: hidden;
+}
+
+.saved-properties.block .confirmation-modal.open {
+  display: block;
+  z-index: 1050;
+  opacity: 1;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.saved-properties.block .form-loader {
+  position: relative;
+}
+
+.saved-properties.block .form-loader-content {
+  position: relative;
+}
+
+.saved-properties.block .confirmation-modal .message {
+  font-family: var(--font-family-primary);
+  font-size: 22px;
+  font-style: normal;
+  font-weight: var(--font-weight-normal);
+  letter-spacing: normal;
+  line-height: 140%;
+  color: var(--body-color);
+  text-align: center;
+}
+
+.saved-properties.block .confirmation-modal .cta {
+  width: 165px;
+}
+
+.saved-properties.block .confirmation-modal .cta:first-child {
+  margin-right: .5rem;
+}
+
+
+.saved-properties.block .confirmation-modal .confirmation-modal-buttons {
+  display: flex;
+  margin-top: 10px;
+  justify-content: center;
+}
+
+.saved-properties.block .confirmation-modal .confirmation-modal-buttons .modal-cta .btn {
+  cursor: pointer;
+  text-align: center;
+}
+
+.saved-properties.block .confirmation-modal .confirmation-modal-buttons .modal-cta .btn span{
+  font-size: var(--body-font-size-s);
+  font-weight: var(--font-weight-bold);
+}
+
+.saved-properties.block .confirmation-modal-overlay {
+  background-color: var(--very-dark-blue);
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  opacity: .5;
+  z-index: 1040;
+  display: none;
+  top: 0;
+  left: 0;
+}
+
+.saved-properties.block .confirmation-modal.open+.confirmation-modal-overlay {
+  display: block;
+}
+
+.saved-properties.block .property-list-cards {
+  height: unset;
+}
+
+.saved-properties.block .form-loader-image.exit {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.saved-properties.block .form-loader-image.exit.show {
+  opacity: 1;
+  transition: all 1s ease-in;
+  pointer-events: all;
+}
+
+.saved-properties.block .form-loader-image {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--semi-transparent-white);
+  z-index: 2;
+}
+
+.saved-properties.block .form-loader .spinner {
+  width: 40px;
+  height: 40px;
+  position: relative;
+}
+
+.saved-properties.block .form-loader .double-bounce1, .form-loader .double-bounce2 {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background-color: var(--primary-color);
+  opacity: .6;
+  position: absolute;
+  top: 0;
+  left: 0;
+  animation: sk-bounce 2s infinite ease-in-out;
+}
+
+.saved-properties.block .form-loader .double-bounce2 {
+  animation-delay: -1s;
+}
+
+@media screen and (min-width: 600px) {
+  .saved-properties.block .confirmation-modal {
+    width: 500px;
+    padding: 30px;
+  }
+
+  .saved-properties.block .confirmation-modal .modal-cta .btn {
+    display: inline-block;
+  }
+}

blocks/saved-properties/saved-properties.js

@@ -0,0 +1,89 @@
+import { render as renderCards } from '../shared/property/cards.js';
+import { getUserDetails } from '../../scripts/apis/user.js';
+import { getSavedProperties, removeSavedProperty } from '../../scripts/apis/creg/creg.js';
+
+function registerEvents(block, contactKey) {
+  const saveButtons = block.querySelectorAll('.saved-properties .button-property .icon-heartfull');
+  saveButtons.forEach((button) => {
+    button.addEventListener('click', (e) => {
+      e.preventDefault();
+      const listingTile = button.closest('.listing-tile');
+      listingTile.classList.add('unsave');
+      const confirmationModal = block.querySelector('.confirmation-modal');
+      confirmationModal.classList.add('open');
+      const $body = document.querySelector('body');
+      $body.classList.add('modal-open');
+    });
+  });
+
+  const cancelButton = block.querySelector('.cancel-button');
+  cancelButton.addEventListener('click', (e) => {
+    e.preventDefault();
+    const listingTile = block.querySelectorAll('.unsave');
+    listingTile.forEach((tile) => {
+      tile.classList.remove('unsave');
+    });
+    const confirmationModal = block.querySelector('.confirmation-modal');
+    confirmationModal.classList.remove('open');
+    const $body = document.querySelector('body');
+    $body.classList.remove('modal-open');
+  });
+
+  const unsaveButton = block.querySelector('.unsave-btn');
+  unsaveButton.addEventListener('click', (e) => {
+    e.preventDefault();
+    const spinner = block.querySelector('.exit');
+    spinner.classList.add('show');
+    const listingToRemove = block.querySelector('.unsave');
+    const listingLink = listingToRemove.querySelector('a');
+    let [, propertyId] = listingLink.getAttribute('href').split('/').pop().split('pid-');
+    if (propertyId) {
+      [propertyId] = propertyId.split('?');
+    }
+    const confirmationModal = block.querySelector('.confirmation-modal');
+    const $body = document.querySelector('body');
+    $body.classList.remove('modal-open');
+    removeSavedProperty(contactKey, propertyId).then(() => {
+      spinner.classList.remove('show');
+      listingToRemove.remove();
+      confirmationModal.classList.remove('open');
+    });
+  });
+}
+
+export default async function decorate(block) {
+  const user = await getUserDetails();
+  if (!user) {
+    return;
+  }
+  const { contactKey } = user;
+  const unsaveModal = document.createElement('div');
+  unsaveModal.innerHTML = `<div class="confirmation-modal">
+    <div class="form-loader">
+    <div class="form-loader-image exit"><div class="spinner"><div class="double-bounce1"></div> <div class="double-bounce2"></div></div></div>
+       <div class="form-loader-content">
+          <div class="message">Are you sure you want to unsave this property?</div>
+          <div class="confirmation-modal-buttons">
+             <section class="cta modal-cta mr-2"><a rel="noopener noreferrer" href="javascript:void(0)" tabindex="" class="btn button-primary unsave-btn" role="button"><span class="cta-btn-text">
+                Unsave
+                </span></a>
+             </section>
+             <section class="cta modal-cta cancel-button"><a rel="noopener noreferrer" href="javascript:void(0)" tabindex="" class="btn button-secondary" role="button"><span class="cta-btn-text">
+                cancel
+                </span></a>
+             </section>
+          </div>
+       </div>
+    </div>
+ </div>
+ <div class="confirmation-modal-overlay"></div>`;
+  block.append(unsaveModal);
+
+  const list = document.createElement('div');
+  list.classList.add('property-list-cards', 'saved-properties');
+  block.append(list);
+  getSavedProperties(contactKey).then((results) => {
+    renderCards(list, results.properties);
+    registerEvents(block, contactKey);
+  });
+}

blocks/shared/property/cards.css

@@ -262,11 +262,6 @@
   left: 0;
 }
 
-.property-list-cards .property-details .property-buttons .button-property img {
-  width: 24px;
-  height: 24px;
-}
-
 .property-list-cards .property-details .property-buttons .icon-envelopedark {
   display: none;
 }
@@ -275,6 +270,26 @@
   display: none;
 }
 
+.property-list-cards .property-details .property-buttons .icon-heartfull {
+  display: none;
+}
+
+.property-list-cards .listing-tile.saved .property-details .property-buttons .icon-heartfull {
+  display: block;
+}
+
+.property-list-cards .listing-tile.saved .property-details .property-buttons .save-btn:hover .icon-heartfull {
+  display: block;
+}
+
+.property-list-cards .listing-tile.saved .property-details .property-buttons .icon-heartempty {
+  display: none;
+}
+
+.property-list-cards .listing-tile.saved .property-details .property-buttons .icon-heartemptydark {
+  display: none;
+}
+
 .property-list-cards .property-details .property-buttons .button-property:hover .icon-envelopedark {
   display: block;
 }
@@ -291,6 +306,10 @@
   display: none;
 }
 
+.property-list-cards .property-details .property-buttons .button-property:hover .icon-heartfull {
+  display: none;
+}
+
 .property-list-cards .listing-tile .extra-info {
   display: flex;
   padding: 0 10px;