Container PR for initial TWP features (WIP)

libs/blocks/merch-card/merch-card.css

@@ -18,6 +18,11 @@ div[class*="-merch-card"] > div,
   color: var(--text-color);
 }
 
+.twp.merch-card .merch-card-price {
+  font-weight: 700;
+  margin: 0;
+}
+
 merch-card.special-offers del span[is="inline-price"] {
   text-decoration: line-through;
 }

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

@@ -7,7 +7,17 @@ import '../../deps/merch-card.js';
 
 const TAG_PATTERN = /^[a-zA-Z0-9_-]+:[a-zA-Z0-9_-]+\/[a-zA-Z0-9_-].*$/;
 
-const CARD_TYPES = ['segment', 'special-offers', 'plans', 'catalog', 'product', 'inline-heading', 'image', 'mini-compare-chart'];
+const CARD_TYPES = [
+  'segment',
+  'special-offers',
+  'plans',
+  'catalog',
+  'product',
+  'inline-heading',
+  'image',
+  'mini-compare-chart',
+  'twp',
+];
 
 const CARD_SIZES = ['wide', 'super-wide'];
 
@@ -27,7 +37,7 @@ const HEADING_MAP = {
 
 const MINI_COMPARE_CHART = 'mini-compare-chart';
 
-const MULTI_OFFER_CARDS = ['plans', 'product', MINI_COMPARE_CHART];
+const MULTI_OFFER_CARDS = ['plans', 'product', MINI_COMPARE_CHART, 'twp'];
 // Force cards to refresh once they become visible so that the footer rows are properly aligned.
 const intersectionObserver = new IntersectionObserver((entries) => {
   entries.forEach((entry) => {
@@ -42,10 +52,10 @@ const getPodType = (styles) => styles?.find((style) => CARD_TYPES.includes(style
 const isHeadingTag = (tagName) => /^H[2-5]$/.test(tagName);
 const isParagraphTag = (tagName) => tagName === 'P';
 
-const appendSlot = (slotEls, slotName, merchCard) => {
-  if (slotEls.length === 0 && merchCard.variant !== MINI_COMPARE_CHART) return;
+const appendSlot = (slotEls, slotName, merchCard, nodeName = 'p') => {
+  if (slotEls.length === 0) return;
   const newEl = createTag(
-    'p',
+    nodeName,
     { slot: slotName, class: slotName },
   );
   slotEls.forEach((e) => {
@@ -68,6 +78,66 @@ export async function loadMnemonicList(foreground) {
   }
 }
 
+function extractQuantitySelect(el) {
+  const quantitySelectConfig = [...el.querySelectorAll('ul')]
+    .find((ul) => ul.querySelector('li')?.innerText?.includes('Quantity'));
+  const configMarkup = quantitySelectConfig?.querySelector('ul');
+  if (!configMarkup) return null;
+  const config = configMarkup.children;
+  if (config.length !== 2) return null;
+  const attributes = {};
+  attributes.title = config[0].textContent.trim();
+  const values = config[1].textContent.split(',')
+    .map((value) => value.trim())
+    .filter((value) => /^\d*$/.test(value))
+    .map((value) => (value === '' ? undefined : Number(value)));
+  quantitySelectConfig.remove();
+  if (![3, 4, 5].includes(values.length)) return null;
+  import('../../deps/merch-quantity-select.js');
+  [attributes.min, attributes.max, attributes.step, attributes['default-value'], attributes['max-input']] = values;
+  const quantitySelect = createTag('merch-quantity-select', attributes);
+  return quantitySelect;
+}
+
+const parseTwpContent = async (el, merchCard) => {
+  const quantitySelect = extractQuantitySelect(el);
+  if (quantitySelect) {
+    merchCard.append(quantitySelect);
+  }
+  const allElements = Array.from(el.children[0].children[0].children);
+  const contentGroups = allElements.reduce((acc, curr) => {
+    if (curr.tagName.toLowerCase() === 'p' && curr.textContent.trim() === '--') {
+      acc.push([]);
+    } else {
+      acc[acc.length - 1].push(curr);
+    }
+    return acc;
+  }, [[]]);
+
+  contentGroups.forEach((group, index) => {
+    if (index === 0) { // Top section
+      const headings = group.filter((e) => e.tagName.toLowerCase() === 'h3');
+      const topBody = group.filter((e) => e.tagName.toLowerCase() === 'p');
+      appendSlot(headings, 'heading-xs', merchCard);
+      appendSlot(topBody, 'body-xs-top', merchCard);
+    } else if (index === 1) { // Body section
+      const content = group.filter((e) => e.tagName.toLowerCase() === 'p' || e.tagName.toLowerCase() === 'ul');
+      const bodySlot = createTag('div', { slot: 'body-xs' }, content);
+      merchCard.append(bodySlot);
+    } else if (index === 2) { // Footer section
+      const footerContent = group.filter((e) => ['h5', 'p'].includes(e.tagName.toLowerCase()));
+      const footer = createTag('div', { slot: 'footer' }, footerContent);
+      merchCard.append(footer);
+    }
+  });
+
+  const offerSelection = el.querySelector('ul');
+  if (offerSelection) {
+    const { initOfferSelection } = await import('./merch-offer-select.js');
+    initOfferSelection(merchCard, offerSelection);
+  }
+};
+
 const parseContent = async (el, merchCard) => {
   let bodySlotName = `body-${merchCard.variant !== MINI_COMPARE_CHART ? 'xs' : 'm'}`;
   let headingMCount = 0;
@@ -89,6 +159,7 @@ const parseContent = async (el, merchCard) => {
   const innerElements = [
     ...el.querySelectorAll('h2, h3, h4, h5, p, ul, em'),
   ];
+
   innerElements.forEach((element) => {
     let { tagName } = element;
     if (isHeadingTag(tagName)) {
@@ -197,7 +268,7 @@ const decorateMerchCardLinkAnalytics = (el) => {
 };
 
 const addStock = (merchCard, styles) => {
-  if (styles.includes('add-stock')) {
+  if (styles.includes('add-stock') && merchCard.variant !== 'twp') {
     let stock;
     const selector = styles.includes('edu') ? '.merch-offers.stock.edu > *' : '.merch-offers.stock > *';
     const [label, ...rest] = [...document.querySelectorAll(selector)];
@@ -221,27 +292,6 @@ const simplifyHrs = (el) => {
   });
 };
 
-async function extractQuantitySelect(el) {
-  const quantitySelectConfig = el.querySelector('ul');
-  if (!quantitySelectConfig) return null;
-  const configMarkup = quantitySelectConfig.querySelector('li');
-  if (!configMarkup || !configMarkup.textContent.includes('Quantity')) return null;
-  const config = configMarkup.querySelector('ul').querySelectorAll('li');
-  if (config.length !== 2) return null;
-  const attributes = {};
-  attributes.title = config[0].textContent.trim();
-  const values = config[1].textContent.split(',')
-    .map((value) => value.trim())
-    .filter((value) => /^\d*$/.test(value))
-    .map((value) => (value === '' ? undefined : Number(value)));
-  if (![3, 4, 5].includes(values.length)) return null;
-  await import('../../deps/merch-quantity-select.js');
-  [attributes.min, attributes.max, attributes.step, attributes['default-value'], attributes['max-input']] = values;
-  const quantitySelect = createTag('merch-quantity-select', attributes);
-  quantitySelectConfig.remove();
-  return quantitySelect;
-}
-
 const getMiniCompareChartFooterRows = (el) => {
   let footerRows = Array.from(el.children).slice(1);
   footerRows = footerRows.filter((row) => !row.querySelector('.footer-row-cell'));
@@ -411,45 +461,52 @@ const init = async (el) => {
   }
   merchCard.setAttribute('filters', categories.join(','));
   merchCard.setAttribute('types', types.join(','));
-  parseContent(el, merchCard);
-  const footer = createTag('div', { slot: 'footer' });
-  if (ctas) {
-    if (merchCard.variant === 'mini-compare-chart') {
-      decorateButtons(ctas, 'button-l');
-    } else {
-      decorateButtons(ctas);
-    }
-    footer.append(ctas);
-  }
-  merchCard.appendChild(footer);
 
-  if (MULTI_OFFER_CARDS.includes(cardType)) {
-    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');
-      setMiniCompareOfferSlot(merchCard, undefined);
-      initOfferSelection(merchCard, offerSelection, quantitySelect);
+  if (merchCard.variant !== 'twp') {
+    parseContent(el, merchCard);
+
+    const footer = createTag('div', { slot: 'footer' });
+    if (ctas) {
+      if (merchCard.variant === 'mini-compare-chart') {
+        decorateButtons(ctas, 'button-l');
+      } else {
+        decorateButtons(ctas);
+      }
+      footer.append(ctas);
     }
-    if (quantitySelect) {
+    merchCard.appendChild(footer);
+
+    if (MULTI_OFFER_CARDS.includes(cardType)) {
+      const quantitySelect = extractQuantitySelect(el);
+      const offerSelection = el.querySelector('ul');
       if (merchCard.variant === MINI_COMPARE_CHART) {
-        setMiniCompareOfferSlot(merchCard, quantitySelect);
-      } else {
-        const bodySlot = merchCard.querySelector('div[slot="body-xs"]');
-        bodySlot.append(quantitySelect);
+        const miniCompareOffers = createTag('div', { slot: 'offers' });
+        merchCard.append(miniCompareOffers);
+      }
+      if (offerSelection) {
+        const { initOfferSelection } = await import('./merch-offer-select.js');
+        setMiniCompareOfferSlot(merchCard, undefined);
+        initOfferSelection(merchCard, offerSelection, quantitySelect);
+      }
+      if (quantitySelect) {
+        if (merchCard.variant === MINI_COMPARE_CHART) {
+          setMiniCompareOfferSlot(merchCard, quantitySelect);
+        } else {
+          const bodySlot = merchCard.querySelector('div[slot="body-xs"]');
+          bodySlot.append(quantitySelect);
+        }
       }
     }
+
+    decorateBlockHrs(merchCard);
+    simplifyHrs(merchCard);
+    if (merchCard.classList.contains('has-divider')) {
+      merchCard.setAttribute('custom-hr', true);
+    }
+    decorateFooterRows(merchCard, footerRows);
+  } else {
+    parseTwpContent(el, merchCard);
   }
-  decorateBlockHrs(merchCard);
-  simplifyHrs(merchCard);
-  if (merchCard.classList.contains('has-divider')) {
-    merchCard.setAttribute('custom-hr', true);
-  }
-  decorateFooterRows(merchCard, footerRows);
   el.replaceWith(merchCard);
   decorateMerchCardLinkAnalytics(merchCard);
   return merchCard;

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

@@ -7,24 +7,27 @@ const MINI_COMPARE_CHART = 'mini-compare-chart';
 function createDynamicSlots(el, bodySlot) {
   const pricePlaceholder = el.querySelector("span[is='inline-price']");
   if (pricePlaceholder) {
-    pricePlaceholder.setAttribute('slot', 'price');
+    pricePlaceholder.parentNode.replaceChild(createTag('span', { slot: 'price', is: 'inline-price' }), pricePlaceholder);
   } else {
-    const priceSlot = createTag('h5', { class: 'merch-card-price' });
+    const tagName = el.variant === 'twp' ? 'p' : 'h5';
+    const priceSlot = createTag(tagName, { class: 'merch-card-price' });
     createTag('span', { slot: 'price', is: 'inline-price' }, null, { parent: priceSlot });
     bodySlot.append(priceSlot);
   }
-  const p = createTag('p', { class: 'action-area' });
-  createTag('a', { slot: 'secondary-cta', is: 'checkout-link' }, null, { parent: p });
-  createTag('a', { slot: 'cta', is: 'checkout-link' }, null, { parent: p });
-  const footer = el.querySelector('div[slot="footer"]');
-  footer.append(p);
-  bodySlot.querySelector('p')?.setAttribute('slot', 'description');
-  if (el.variant === MINI_COMPARE_CHART) {
-    const description = el.querySelector('div[slot="body-m"] p:last-child');
-    if (description) {
-      const descriptionSlot = el.querySelector('p[slot="description"]');
-      if (descriptionSlot) {
-        descriptionSlot.innerHTML += description.innerHTML;
+  if (el.variant !== 'twp') {
+    const p = createTag('p', { class: 'action-area' });
+    createTag('a', { slot: 'secondary-cta', is: 'checkout-link' }, null, { parent: p });
+    createTag('a', { slot: 'cta', is: 'checkout-link' }, null, { parent: p });
+    const footer = el.querySelector('div[slot="footer"]');
+    footer.append(p);
+    bodySlot.querySelector('p')?.setAttribute('slot', 'description');
+    if (el.variant === MINI_COMPARE_CHART) {
+      const description = el.querySelector('div[slot="body-m"] p:last-child');
+      if (description) {
+        const descriptionSlot = el.querySelector('p[slot="description"]');
+        if (descriptionSlot) {
+          descriptionSlot.innerHTML += description.innerHTML;
+        }
       }
     }
   }
@@ -57,18 +60,32 @@ function createMerchOffer(option, quantitySelector, variant) {
 const isHorizontal = (offerSelection) => [...offerSelection.querySelectorAll('merch-offer')].map((o) => o.text).every((t) => /^\d+.B$/.test(t));
 
 export const initOfferSelection = (merchCard, offerSelection, quantitySelector) => {
-  const bodySlot = merchCard.querySelector(`div[slot="${merchCard.variant === 'mini-compare-chart' ? 'offers' : 'body-xs'}"]`);
-  if (!bodySlot) return;
-  createDynamicSlots(merchCard, bodySlot);
-  const merchOffers = createTag('merch-offer-select', { container: 'merch-card' });
+  let merchOfferSlot;
+  switch (merchCard.variant) {
+    case 'mini-compare-chart':
+      merchOfferSlot = merchCard.querySelector('div[slot="body-m"]');
+      break;
+    case 'twp':
+      merchOfferSlot = merchCard.querySelector('div[slot="footer"]');
+      break;
+    default:
+      merchOfferSlot = merchCard.querySelector('div[slot="body-xs"]');
+      break;
+  }
+  if (!merchOfferSlot) return;
+  createDynamicSlots(merchCard, merchOfferSlot);
+  const merchOfferSelect = createTag('merch-offer-select', { container: 'merch-card' });
+  if (merchCard.classList.contains('add-stock')) {
+    merchOfferSelect.setAttribute('stock', '');
+  }
   [...offerSelection.children].forEach((option) => {
-    merchOffers.append(createMerchOffer(option, quantitySelector, merchCard.variant));
+    merchOfferSelect.append(createMerchOffer(option, quantitySelector, merchCard.variant));
   });
-  merchOffers.querySelectorAll('a[is="checkout-link"]').forEach((link) => { link.setAttribute('slot', 'cta'); });
-  if (isHorizontal(merchOffers)) {
-    merchOffers.setAttribute('variant', 'horizontal');
+  merchOfferSelect.querySelectorAll('a[is="checkout-link"]').forEach((link) => { link.setAttribute('slot', 'cta'); });
+  if (isHorizontal(merchOfferSelect)) {
+    merchOfferSelect.setAttribute('variant', 'horizontal');
   }
-  merchOffers.querySelectorAll('merch-offer').forEach((offer) => {
+  merchOfferSelect.querySelectorAll('merch-offer').forEach((offer) => {
     const links = offer.querySelectorAll('a[is="checkout-link"]');
     if (links.length > 1) {
       links[0].setAttribute('slot', 'secondary-cta');
@@ -77,11 +94,11 @@ export const initOfferSelection = (merchCard, offerSelection, quantitySelector)
       links[0].setAttribute('slot', 'cta');
     }
   });
-  merchOffers.querySelectorAll('span[is="inline-price"]').forEach((price) => { price.setAttribute('slot', 'price'); });
+  merchOfferSelect.querySelectorAll('span[is="inline-price"]').forEach((price) => { price.setAttribute('slot', 'price'); });
   if (quantitySelector) {
-    quantitySelector.append(merchOffers);
+    quantitySelector.append(merchOfferSelect);
   } else {
-    bodySlot.append(merchOffers);
+    merchOfferSlot.append(merchOfferSelect);
   }
 };