MWPW-141691: Merch card: align footer rows (#1797)

* MWPW-141691: Merch card: align footer rows * fix failing test. * add null check to mutation observer * update merch-card dep * fix in container detection * fix in container detection
adobecom · Feb 1, 2024 · 79eecfd · 79eecfd
1 parent 0e4dfa2
commit 79eecfd
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 5 deletions.
diff --git a/libs/blocks/merch-card/merch-card.js b/libs/blocks/merch-card/merch-card.js
@@ -108,6 +108,15 @@ const CARD_TYPES = ['segment', 'special-offers', 'plans', 'catalog', 'product',
 const MINI_COMPARE_CHART = 'mini-compare-chart';
 
 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 sectionObserver = new MutationObserver((mutations) => {
+  mutations.forEach((mutation) => {
+    if (mutation.type === 'attributes' && mutation.attributeName === 'data-status') {
+      sectionObserver.disconnect(mutation.target);
+      [...mutation.target.querySelectorAll('merch-card')].forEach((card) => card.requestUpdate());
+    }
+  });
+});
 
 const textStyles = {
   H5: 'detail-m',
@@ -355,6 +364,10 @@ const init = async (el) => {
   }
   let footerRows;
   if (cardType === MINI_COMPARE_CHART) {
+    const container = el.closest('[data-status="decorated"]');
+    if (container) {
+      sectionObserver.observe(container, { attributes: true, subtree: false });
+    }
     footerRows = getMiniCompareChartFooterRows(el);
   }
   const images = el.querySelectorAll('picture');

diff --git a/libs/deps/merch-card.js b/libs/deps/merch-card.js
diff --git a/test/blocks/merch-card/merch-card.test.js b/test/blocks/merch-card/merch-card.test.js
@@ -309,6 +309,7 @@ describe('Mini Compare Chart Merch Card', () => {
   it('Supports Mini Compare Chart with footer rows', async () => {
     document.body.innerHTML = await readFile({ path: './mocks/mini-compare-chart.html' });
     const merchCard = await init(document.querySelector('.merch-card.mini-compare-chart'));
+    document.querySelector('.section').removeAttribute('data-status');
     const heading = merchCard.querySelector('h2[slot="heading-m"]');
     const body = merchCard.querySelector('div[slot="body-m"]');
     const priceHeading = merchCard.querySelector('h2[slot="heading-m-price"]');

diff --git a/test/blocks/merch-card/mocks/mini-compare-chart.html b/test/blocks/merch-card/mocks/mini-compare-chart.html
@@ -1,4 +1,4 @@
-<div class="section">
+<div class="section" data-status="decorated">
   <div class="merch-card mini-compare-chart">
     <div>
       <div data-valign="middle"><strong>#EDCC2D, #000000</strong></div>