Container PR for initial TWP features #2407
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -7,7 +7,24 @@ import '../../deps/merch-card.js'; | |
|
|
||
| const TAG_PATTERN = /^[a-zA-Z0-9_-]+:[a-zA-Z0-9_-]+\/[a-zA-Z0-9_-].*$/; | ||
|
|
||
| const SEGMENT = 'segment'; | ||
| const SPECIAL_OFFERS = 'special-offers'; | ||
| const PLANS = 'plans'; | ||
| const CATALOG = 'catalog'; | ||
| const PRODUCT = 'product'; | ||
| const MINI_COMPARE_CHART = 'mini-compare-chart'; | ||
| const TWP = 'twp'; | ||
| const CARD_TYPES = [ | ||
| SEGMENT, | ||
| SPECIAL_OFFERS, | ||
| PLANS, | ||
| CATALOG, | ||
| PRODUCT, | ||
| 'inline-heading', | ||
| 'image', | ||
| MINI_COMPARE_CHART, | ||
| TWP, | ||
| ]; | ||
|
|
||
| const CARD_SIZES = ['wide', 'super-wide']; | ||
|
|
||
|
|
@@ -25,13 +42,9 @@ const HEADING_MAP = { | |
| }, | ||
| }; | ||
|
|
||
| const INNER_ELEMENTS_SELECTOR = 'h2, h3, h4, h5, p, ul, em'; | ||
|
|
||
| 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) => { | ||
|
|
@@ -46,10 +59,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, nodeName = 'p') => { | ||
| if (slotEls.length === 0 || merchCard.variant !== MINI_COMPARE_CHART) return; | ||
| const newEl = createTag( | ||
| nodeName, | ||
| { slot: slotName, class: slotName }, | ||
| ); | ||
| slotEls.forEach((e) => { | ||
|
|
@@ -72,6 +85,68 @@ export async function loadMnemonicList(foreground) { | |
| } | ||
| } | ||
|
|
||
| function extractQuantitySelect(el) { | ||
| const quantitySelectConfig = [...el.querySelectorAll('ul')] | ||
| .find((ul) => ul.querySelector('li')?.innerText?.includes('Quantity')); | ||
|
There was a problem hiding this comment.
There was a problem hiding this comment. This does sound a bit error-prone and might lead to confusion, is there any other mechanism to stop this from occurring? There was a problem hiding this comment.
I am not sure we should support the lowercase option. In general, it's a bad idea to depend on the text since it could get translated.. and break down in non-english geos. This will be addressed in the separate PR if you are ok with it. Need to design and agree with GWP on how it will work in future. |
||
| 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))); | ||
yesil marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| 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); | ||
| } | ||
| let allElements = el?.children[0]?.children[0]?.children; | ||
| if (!allElements?.length) return; | ||
| allElements = [...allElements]; | ||
| 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'); | ||
| await initOfferSelection(merchCard, offerSelection); | ||
| } | ||
| }; | ||
|
|
||
| const parseContent = async (el, merchCard) => { | ||
| let bodySlotName = `body-${merchCard.variant !== MINI_COMPARE_CHART ? 'xs' : 'm'}`; | ||
| let headingMCount = 0; | ||
|
|
@@ -201,7 +276,7 @@ const decorateMerchCardLinkAnalytics = (el) => { | |
| }; | ||
|
|
||
| const addStock = (merchCard, styles) => { | ||
| 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)]; | ||
|
|
@@ -225,27 +300,6 @@ const simplifyHrs = (el) => { | |
| }); | ||
| }; | ||
|
|
||
| const getMiniCompareChartFooterRows = (el) => { | ||
| let footerRows = Array.from(el.children).slice(1); | ||
| footerRows = footerRows.filter((row) => !row.querySelector('.footer-row-cell')); | ||
|
|
@@ -289,7 +343,7 @@ const setMiniCompareOfferSlot = (merchCard, offers) => { | |
| export default async function init(el) { | ||
| if (!el.querySelector(INNER_ELEMENTS_SELECTOR)) return el; | ||
| const styles = [...el.classList]; | ||
| const cardType = getPodType(styles) || PRODUCT; | ||
| if (!styles.includes(cardType)) { | ||
| styles.push(cardType); | ||
| } | ||
|
|
@@ -344,7 +398,6 @@ export default async function init(el) { | |
| ); | ||
| merchCard.setAttribute('badge-color', badge.badgeColor); | ||
| merchCard.setAttribute('badge-text', badge.badgeText); | ||
| merchCard.classList.add('badge-card'); | ||
| } | ||
| } | ||
|
|
@@ -372,7 +425,7 @@ export default async function init(el) { | |
| } | ||
| } | ||
| }); | ||
| const actionMenuContent = cardType === CATALOG | ||
| ? getActionMenuContent(el) | ||
| : null; | ||
| if (actionMenuContent) { | ||
|
|
@@ -397,7 +450,6 @@ export default async function init(el) { | |
| imageSlot.appendChild(image); | ||
| merchCard.appendChild(imageSlot); | ||
| } | ||
| if (!icons || icons.length > 0) { | ||
| const iconImgs = Array.from(icons).map((icon) => { | ||
| const img = { | ||
|
|
@@ -421,46 +473,45 @@ export default async function init(el) { | |
| merchCard.setAttribute('filters', categories.join(',')); | ||
| merchCard.setAttribute('types', types.join(',')); | ||
|
|
||
| if (merchCard.variant !== TWP) { | ||
| parseContent(el, merchCard); | ||
|
|
||
| const footer = createTag('div', { slot: 'footer' }); | ||
| if (ctas) { | ||
| decorateButtons(ctas, (merchCard.variant === MINI_COMPARE_CHART) ? 'button-l' : undefined); | ||
| footer.append(ctas); | ||
| } | ||
| merchCard.appendChild(footer); | ||
|
|
||
| if (MULTI_OFFER_CARDS.includes(cardType)) { | ||
| const quantitySelect = extractQuantitySelect(el); | ||
| const offerSelection = el.querySelector('ul'); | ||
| if (merchCard.variant === MINI_COMPARE_CHART) { | ||
| 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); | ||
| } | ||
| el.replaceWith(merchCard); | ||
| decorateMerchCardLinkAnalytics(merchCard); | ||
| return merchCard; | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Personal preference, but 3+ parameters become difficult to manage, especially if one needs to be omitted at some point. A config object might be better for maintenance.