MWPW-142003: Mini Compare Chart Mobile styling (adobecom#1887)

* MWPW-142003: Mini Compare Chart Mobile styling
---------
Co-authored-by: ilyas Stéphane Türkben <isturkben@gmail.com>

libs/blocks/merch-card/merch-card.js

@@ -15,13 +15,22 @@ const MULTI_OFFER_CARDS = ['plans', 'product', MINI_COMPARE_CHART];
 // Force cards to refresh once they become visible so that the footer rows are properly aligned.
 const intersectionObserver = new IntersectionObserver((entries) => {
   entries.forEach((entry) => {
-    const container = entry.target.closest('main > div');
+    const container = entry.target.closest('main > div:not([data-status])');
     if (!container) return;
     [...container.querySelectorAll('merch-card')].forEach((card) => card.requestUpdate());
     intersectionObserver.unobserve(entry.target);
   });
 });
 
+const addTabClickListener = (container) => {
+  const buttons = document.querySelectorAll('button[role="tab"]');
+  buttons.forEach((button) => {
+    button.addEventListener('click', () => {
+      intersectionObserver.observe(container);
+    });
+  });
+};
+
 const textStyles = {
   H5: 'detail-m',
   H4: 'body-xxs',
@@ -35,7 +44,7 @@ const isHeadingTag = (tagName) => /^H[2-5]$/.test(tagName);
 const isParagraphTag = (tagName) => tagName === 'P';
 
 const appendSlot = (slotEls, slotName, merchCard) => {
-  if (slotEls.length === 0) return;
+  if (slotEls.length === 0 && merchCard.variant !== MINI_COMPARE_CHART) return;
   const newEl = createTag(
     'p',
     { slot: slotName, class: slotName },
@@ -190,7 +199,7 @@ const simplifyHrs = (el) => {
   });
 };
 
-function extractQuantitySelect(el) {
+async function extractQuantitySelect(el) {
   const quantitySelectConfig = el.querySelector('ul');
   if (!quantitySelectConfig) return null;
   const configMarkup = quantitySelectConfig.querySelector('li');
@@ -202,7 +211,7 @@ function extractQuantitySelect(el) {
   const quantityValues = config[1].textContent.split(',').map((value) => value.trim())
     .filter((value) => /^\d+$/.test(value));
   if (quantityValues.length !== 3) return null;
-  import('../../deps/merch-quantity-select.js');
+  await import('../../deps/merch-quantity-select.js');
   [attributes.min, attributes.max, attributes.step] = quantityValues.map(Number);
   const quantitySelect = createTag('merch-quantity-select', attributes);
   quantitySelectConfig.remove();
@@ -240,8 +249,9 @@ const decorateFooterRows = (merchCard, footerRows) => {
 
 const setMiniCompareOfferSlot = (merchCard, offers) => {
   if (merchCard.variant !== MINI_COMPARE_CHART) return;
-  const miniCompareOffers = createTag('div', { slot: 'offers' }, offers);
-  if (offers === undefined) { miniCompareOffers.appendChild(createTag('p')); }
+  const miniCompareOffers = merchCard.querySelector('div[slot="offers"]');
+  // eslint-disable-next-line chai-friendly/no-unused-expressions
+  offers ? miniCompareOffers.append(offers) : miniCompareOffers.appendChild(createTag('p'));
   merchCard.appendChild(miniCompareOffers);
 };
 
@@ -306,9 +316,10 @@ const init = async (el) => {
   }
   let footerRows;
   if (cardType === MINI_COMPARE_CHART) {
+    intersectionObserver.observe(merchCard);
     const container = el.closest('[data-status="decorated"]');
     if (container) {
-      intersectionObserver.observe(container);
+      addTabClickListener(container);
     }
     footerRows = getMiniCompareChartFooterRows(el);
   }
@@ -386,7 +397,11 @@ const init = async (el) => {
   merchCard.appendChild(footer);
 
   if (MULTI_OFFER_CARDS.includes(cardType)) {
-    const quantitySelect = extractQuantitySelect(el);
+    if (merchCard.variant === MINI_COMPARE_CHART) {
+      const miniCompareOffers = createTag('div', { slot: 'offers' });
+      merchCard.append(miniCompareOffers);
+    }
+    const quantitySelect = await extractQuantitySelect(el, cardType);
     const offerSelection = el.querySelector('ul');
     if (offerSelection) {
       const { initOfferSelection } = await import('./merch-offer-select.js');

libs/blocks/merch-card/merch-offer-select.js

@@ -25,6 +25,7 @@ function createDynamicSlots(el, bodySlot) {
       const descriptionSlot = el.querySelector('p[slot="description"]');
       if (descriptionSlot) {
         descriptionSlot.innerHTML += description.innerHTML;
+        description.parentNode.removeChild(description);
       }
     }
   }