From 893a099868fec9925de8541d924df1bb94b2371a Mon Sep 17 00:00:00 2001 From: Axel Cureno Basurto Date: Mon, 8 Jul 2024 16:51:25 -0700 Subject: [PATCH 01/20] MWPW-142267: What's Included screen (TwP) --- libs/blocks/merch-card/merch-card.js | 5 + .../merch-mnemonic-list.css | 3 + .../merch-mnemonic-list.js | 21 + libs/blocks/merch-twp/merch-twp.js | 20 + .../merch-whats-included.css | 13 + .../merch-whats-included.js | 30 ++ libs/deps/merch-mnemonic-list.js | 48 ++ libs/deps/merch-twp-d2p.js | 459 ++++++++++++++++-- libs/deps/merch-whats-included.js | 93 ++++ 9 files changed, 664 insertions(+), 28 deletions(-) create mode 100644 libs/blocks/merch-mnemonic-list/merch-mnemonic-list.css create mode 100644 libs/blocks/merch-mnemonic-list/merch-mnemonic-list.js create mode 100644 libs/blocks/merch-whats-included/merch-whats-included.css create mode 100644 libs/blocks/merch-whats-included/merch-whats-included.js create mode 100644 libs/deps/merch-mnemonic-list.js create mode 100644 libs/deps/merch-whats-included.js diff --git a/libs/blocks/merch-card/merch-card.js b/libs/blocks/merch-card/merch-card.js index e247b9127d..7e61c2441e 100644 --- a/libs/blocks/merch-card/merch-card.js +++ b/libs/blocks/merch-card/merch-card.js @@ -135,6 +135,11 @@ const parseTwpContent = async (el, merchCard) => { const content = group.filter((e) => e.tagName.toLowerCase() === 'p' || e.tagName.toLowerCase() === 'ul'); const bodySlot = createTag('div', { slot: 'body-xs' }, content); merchCard.append(bodySlot); + + const whatsIncludedLink = bodySlot.querySelector('a[href*="merch-whats-included"]'); + if (whatsIncludedLink) { + whatsIncludedLink.classList.add('merch-whats-included'); + } } else if (index === 2) { // Footer section const footerContent = group.filter((e) => ['h5', 'p'].includes(e.tagName.toLowerCase())); const footer = createTag('div', { slot: 'footer' }, footerContent); diff --git a/libs/blocks/merch-mnemonic-list/merch-mnemonic-list.css b/libs/blocks/merch-mnemonic-list/merch-mnemonic-list.css new file mode 100644 index 0000000000..b335981a12 --- /dev/null +++ b/libs/blocks/merch-mnemonic-list/merch-mnemonic-list.css @@ -0,0 +1,3 @@ +.merch-mnemonic-list { + display: contents; +} diff --git a/libs/blocks/merch-mnemonic-list/merch-mnemonic-list.js b/libs/blocks/merch-mnemonic-list/merch-mnemonic-list.js new file mode 100644 index 0000000000..3c64c77081 --- /dev/null +++ b/libs/blocks/merch-mnemonic-list/merch-mnemonic-list.js @@ -0,0 +1,21 @@ +import '../../deps/merch-mnemonic-list.js'; +import '../../deps/merch-card.js'; +import { createTag } from '../../utils/utils.js'; + +const init = async (el) => { + const rows = el.querySelectorAll(':scope p:not([class])'); + if (rows.length < 1) return; + [...rows].forEach((paragraph) => { + const merchMnemonicList = createTag('merch-mnemonic-list'); + paragraph.setAttribute('slot', 'description'); + const picture = paragraph.querySelector('picture'); + const img = picture.querySelector('img'); + const icon = createTag('merch-icon', { slot: 'icon', size: 's', src: img.src }); + picture.remove(); + if (icon) merchMnemonicList.appendChild(icon); + if (paragraph) merchMnemonicList.appendChild(paragraph); + el.appendChild(merchMnemonicList); + }); +}; + +export default init; diff --git a/libs/blocks/merch-twp/merch-twp.js b/libs/blocks/merch-twp/merch-twp.js index bb681a45e5..8a7f804dd5 100644 --- a/libs/blocks/merch-twp/merch-twp.js +++ b/libs/blocks/merch-twp/merch-twp.js @@ -72,6 +72,26 @@ export default async function init(el) { content.querySelector('h4').setAttribute('slot', 'detail-xl'); twp.append(...[...content.querySelectorAll(':scope > h4, merch-card')]); + const whatsIncludedFragment = el.querySelector('.fragment[data-path*="merch-whats-included"]'); + if (whatsIncludedFragment) { + const whatsIncludedSlot = createTag( + 'div', + { + slot: 'merch-whats-included', + class: 'hidden merch-whats-included-container', + }, + whatsIncludedFragment, + ); + twp.append(whatsIncludedSlot); + window.addEventListener('milo:modal:closed', (event) => { + // Check if whatsIncludedSlot has the 'hidden' class + if (!whatsIncludedSlot.classList.contains('hidden')) { + event.preventDefault(); // Prevent the default behavior of the event + whatsIncludedSlot.classList.toggle('hidden'); // Toggle the 'hidden' class on whatsIncludedSlot + } + }); + } + const cciFooter = createTag('div', { slot: 'cci-footer' }); cciFooter.append(...[...content.querySelectorAll('p:not(hr ~ p)')]); const cctFooter = createTag('div', { slot: 'cct-footer' }); diff --git a/libs/blocks/merch-whats-included/merch-whats-included.css b/libs/blocks/merch-whats-included/merch-whats-included.css new file mode 100644 index 0000000000..34ee14bdc8 --- /dev/null +++ b/libs/blocks/merch-whats-included/merch-whats-included.css @@ -0,0 +1,13 @@ +.merch-whats-included-container > .fragment { + width: inherit; + height: inherit; +} + +.merch-whats-included-container .fragment .container { + display: grid; + grid-auto-flow: column; + align-items: start; + height: auto; + width: inherit; + padding: 0; +} diff --git a/libs/blocks/merch-whats-included/merch-whats-included.js b/libs/blocks/merch-whats-included/merch-whats-included.js new file mode 100644 index 0000000000..d4d58c0b3d --- /dev/null +++ b/libs/blocks/merch-whats-included/merch-whats-included.js @@ -0,0 +1,30 @@ +import '../../deps/merch-whats-included.js'; +import { createTag } from '../../utils/utils.js'; + +const init = async (el) => { + const styles = Array.from(el.classList); + const mobileRows = styles.find((style) => /\d/.test(style)); + const heading = el.querySelector('h3, h4'); + const content = el.querySelector('.section'); + + const contentSlot = createTag( + 'div', + { slot: 'content' }, + content.innerHTML, + ); + const whatsIncluded = createTag( + 'merch-whats-included', + { mobileRows: mobileRows || 1 }, + ); + if (heading) { + heading.setAttribute('slot', 'heading'); + whatsIncluded.appendChild(heading); + } + + whatsIncluded.appendChild(contentSlot); + const divsWithoutClass = contentSlot.querySelectorAll('div:not([class])'); + divsWithoutClass.forEach((div) => div.remove()); + el.replaceWith(whatsIncluded); +}; + +export default init; diff --git a/libs/deps/merch-mnemonic-list.js b/libs/deps/merch-mnemonic-list.js new file mode 100644 index 0000000000..df08c47032 --- /dev/null +++ b/libs/deps/merch-mnemonic-list.js @@ -0,0 +1,48 @@ +// branch: MWPW-142267 commit: db56fa6d1f49aa580f3da94842ffb9e73516ee18 Mon, 08 Jul 2024 21:06:50 GMT + +// src/merch-mnemonic-list.js +import { html, css, LitElement } from "/libs/deps/lit-all.min.js"; +var MerchMnemonicList = class extends LitElement { + static styles = css` + :host { + display: flex; + flex-direction: row; + gap: 10px; + margin-bottom: 10px; + align-items: flex-end; + } + + ::slotted([slot='icon']) { + display: flex; + justify-content: center; + align-items: center; + height: max-content; + } + + ::slotted([slot='description']) { + font-size: 14px; + line-height: 21px; + margin: 0; + } + + :host .hidden { + display: none; + } + `; + static properties = { + description: { type: String, attribute: true } + }; + constructor() { + super(); + } + render() { + return html` + + ${this.description} + `; + } +}; +customElements.define("merch-mnemonic-list", MerchMnemonicList); +export { + MerchMnemonicList +}; diff --git a/libs/deps/merch-twp-d2p.js b/libs/deps/merch-twp-d2p.js index 50ff726523..ae3a8772ff 100644 --- a/libs/deps/merch-twp-d2p.js +++ b/libs/deps/merch-twp-d2p.js @@ -1,5 +1,31 @@ -// branch: develop commit: b3f6608faa10db8d0187b310044d4690d063f1bf Sun, 09 Jun 2024 06:39:58 GMT -import{LitElement as T,html as s}from"/libs/deps/lit-all.min.js";var r=class{constructor(e,t){this.key=Symbol("match-media-key"),this.matches=!1,this.host=e,this.host.addController(this),this.media=window.matchMedia(t),this.matches=this.media.matches,this.onChange=this.onChange.bind(this),e.addController(this)}hostConnected(){var e;(e=this.media)==null||e.addEventListener("change",this.onChange)}hostDisconnected(){var e;(e=this.media)==null||e.removeEventListener("change",this.onChange)}onChange(e){this.matches!==e.matches&&(this.matches=e.matches,this.host.requestUpdate(this.key,!this.matches))}};import{css as E}from"/libs/deps/lit-all.min.js";var b=E` +// branch: MWPW-142267 commit: db56fa6d1f49aa580f3da94842ffb9e73516ee18 Mon, 08 Jul 2024 21:06:50 GMT + +// src/merch-twp-d2p.js +import { LitElement, html } from "/libs/deps/lit-all.min.js"; + +// ../node_modules/@spectrum-web-components/reactive-controllers/src/MatchMedia.js +var MatchMediaController = class { + constructor(e, t) { + this.key = Symbol("match-media-key"); + this.matches = false; + this.host = e, this.host.addController(this), this.media = window.matchMedia(t), this.matches = this.media.matches, this.onChange = this.onChange.bind(this), e.addController(this); + } + hostConnected() { + var e; + (e = this.media) == null || e.addEventListener("change", this.onChange); + } + hostDisconnected() { + var e; + (e = this.media) == null || e.removeEventListener("change", this.onChange); + } + onChange(e) { + this.matches !== e.matches && (this.matches = e.matches, this.host.requestUpdate(this.key, !this.matches)); + } +}; + +// src/merch-twp-d2p.css.js +import { css } from "/libs/deps/lit-all.min.js"; +var styles = css` :host { display: flex; box-sizing: border-box; @@ -33,10 +59,25 @@ import{LitElement as T,html as s}from"/libs/deps/lit-all.min.js";var r=class{con margin: 0; } + ::slotted([slot='merch-whats-included']) { + align-self: auto; + width: 100%; + position: absolute; + background: #fff; + height: 100%; + padding: 30px; + border-radius: 10px; + box-sizing: border-box; + } + ::slotted([slot$='-footer']) { flex-basis: 100%; } + ::slotted([slot='merch-whats-included'].hidden) { + display: none; + } + /* Mobile */ .mobile { @@ -204,36 +245,143 @@ import{LitElement as T,html as s}from"/libs/deps/lit-all.min.js";var r=class{con left: 30px; bottom: 30px; } -`;var f="(max-width: 1199px)";var h="merch-card:ready",p="merch-offer:selected";var u="merch-storage:change",g="merch-quantity-selector:change";function x(d=window.location.hash){let e=[],t=d.replace(/^#/,"").split("&");for(let n of t){let[i,o=""]=n.split("=");i&&e.push([i,decodeURIComponent(o.replace(/\+/g," "))])}return Object.fromEntries(e)}var S="merch-twp-d2p",a="individuals",l="business",c="education",m=class extends T{static styles=[b];static properties={individualsText:{type:String,attribute:"individuals-text"},businessText:{type:String,attribute:"business-text"},educationText:{type:String,attribute:"education-text"},continueText:{type:String,attribute:"continue-text"},ready:{type:Boolean},step:{type:Number},singleCard:{state:!0},selectedTab:{type:String,attribute:"selected-tab",reflect:!0}};selectedTab=this.preselectedTab();#e;#s;#t;#i=new r(this,f);individualsText="Individuals";businessText="Business";educationText="Students and teachers";continueText="Continue";ready=!1;constructor(){super(),this.step=1,this.#t=this.handleOfferSelected.bind(this)}get log(){return this.#e||(this.#e=document.head.querySelector("wcms-commerce")?.Log.module("twp")),this.#e}get individualsTab(){return this.cciCards.length===0?s``:s` - +`; + +// src/media.js +var TABLET_DOWN = "(max-width: 1199px)"; + +// src/constants.js +var EVENT_MERCH_CARD_READY = "merch-card:ready"; +var EVENT_OFFER_SELECTED = "merch-offer:selected"; +var EVENT_MERCH_STORAGE_CHANGE = "merch-storage:change"; +var EVENT_MERCH_QUANTITY_SELECTOR_CHANGE = "merch-quantity-selector:change"; + +// ../commons/src/deeplink.js +function parseState(hash = window.location.hash) { + const result = []; + const keyValuePairs = hash.replace(/^#/, "").split("&"); + for (const pair of keyValuePairs) { + const [key, value = ""] = pair.split("="); + if (key) { + result.push([key, decodeURIComponent(value.replace(/\+/g, " "))]); + } + } + return Object.fromEntries(result); +} + +// ../commons/src/aem.js +var accessToken = localStorage.getItem("masAccessToken"); +var headers = { + Authorization: `Bearer ${accessToken}`, + pragma: "no-cache", + "cache-control": "no-cache" +}; + +// src/merch-twp-d2p.js +var TAG_NAME = "merch-twp-d2p"; +var TAB_INDIVIDUALS = "individuals"; +var TAB_BUSINESS = "business"; +var TAB_EDUCATION = "education"; +var MerchTwpD2P = class extends LitElement { + static styles = [styles]; + static properties = { + individualsText: { type: String, attribute: "individuals-text" }, + businessText: { type: String, attribute: "business-text" }, + educationText: { type: String, attribute: "education-text" }, + continueText: { type: String, attribute: "continue-text" }, + ready: { type: Boolean }, + step: { type: Number }, + singleCard: { state: true }, + selectedTab: { type: String, attribute: "selected-tab", reflect: true } + }; + selectedTab = this.preselectedTab(); + #log; + #cardIcons; + #handleOfferSelected; + #mobileAndTablet = new MatchMediaController(this, TABLET_DOWN); + individualsText = "Individuals"; + businessText = "Business"; + educationText = "Students and teachers"; + continueText = "Continue"; + ready = false; + constructor() { + super(); + this.step = 1; + this.#handleOfferSelected = this.handleOfferSelected.bind(this); + this.handleWhatsIncludedClick = this.handleWhatsIncludedClick.bind(this); + } + /** @type {Commerce.Log.Instance} */ + get log() { + if (!this.#log) { + this.#log = document.head.querySelector("wcms-commerce")?.Log.module("twp"); + } + return this.#log; + } + get individualsTab() { + if (this.cciCards.length === 0) + return html``; + return html` + - +
- `}get businessTab(){return this.cctCards.length===0?s``:s` - + `; + } + get businessTab() { + if (this.cctCards.length === 0) + return html``; + return html` + - +
- `}get educationTab(){return this.cceCards.length===0?s``:s` - + `; + } + get educationTab() { + if (this.cceCards.length === 0) + return html``; + return html` + - +
- `}preselectedTab(){let t=new URLSearchParams(window.location.search).get("plan");return t===a||t===l||t===c?t:a}get selectedTabPanel(){return this.shadowRoot.querySelector("sp-tab-panel[selected]")}get firstCardInSelectedTab(){return this.selectedTabPanel?.querySelector("slot").assignedElements()[0]}get tabs(){return this.cards.length===1?s``:this.singleCard&&this.step===1?s``:s` + `; + } + preselectedTab() { + const params = new URLSearchParams(window.location.search); + const plan = params.get("plan"); + if (plan === TAB_INDIVIDUALS || plan === TAB_BUSINESS || plan === TAB_EDUCATION) { + return plan; + } else { + return TAB_INDIVIDUALS; + } + } + get selectedTabPanel() { + return this.shadowRoot.querySelector("sp-tab-panel[selected]"); + } + get firstCardInSelectedTab() { + return this.selectedTabPanel?.querySelector("slot").assignedElements()[0]; + } + get tabs() { + if (this.cards.length === 1) + return html``; + if (this.singleCard && this.step === 1) + return html``; + return html` ${this.individualsTab} ${this.businessTab} ${this.educationTab} - `}async tabChanged(e){this.selectedTab=e.target.selected,await e.target.updateComplete,this.selectCard(this.firstCardInSelectedTab)}get singleCardFooter(){if(this.step===1)return s` + `; + } + async tabChanged(event) { + this.selectedTab = event.target.selected; + await event.target.updateComplete; + this.selectCard(this.firstCardInSelectedTab); + } + /** the footer is displayed only in the step 1 */ + get singleCardFooter() { + if (this.step !== 1) + return; + return html` - `}get desktopLayout(){return this.singleCard?s`
+ `; + } + get desktopLayout() { + if (this.singleCard) { + return html`
${this.tabs} @@ -255,19 +418,31 @@ import{LitElement as T,html as s}from"/libs/deps/lit-all.min.js";var r=class{con -
`:s` +
`; + } + return html`
${this.tabs}
- ${this.cciCards.length<3?s`` : ""} ${this.continueButton}
- `}get showSubscriptionPanelInStep1(){return this.#i.matches?!1:this.cciCards.length<3}get continueButton(){return this.showSubscriptionPanelInStep1?s``:s` + `; + } + get showSubscriptionPanelInStep1() { + if (this.#mobileAndTablet.matches) + return false; + return this.cciCards.length < 3; + } + get continueButton() { + if (this.showSubscriptionPanelInStep1) + return html``; + return html`
- `}selectSingleCard(e){e.setAttribute("data-slot",e.getAttribute("slot")),e.setAttribute("slot","single-card"),this.singleCard=e}unSelectSingleCard(){this.singleCard&&(this.singleCard.setAttribute("slot",this.singleCard.getAttribute("data-slot")),this.singleCard.removeAttribute("data-slot"),this.step=1,this.singleCard=void 0)}handleContinue(){this.step=2,this.selectSingleCard(this.cardToSelect),this.#s=[...this.singleCard.querySelectorAll("merch-icon")].map(e=>e.cloneNode(!0))}handleBack(){this.unSelectSingleCard()}get cardToSelect(){return this.selectedTabPanel?.card??this.querySelector("merch-card[aria-selected]")}get selectedCard(){return this.singleCard??this.selectedTabPanel.card}get mobileStepTwo(){return this.singleCard?s` + `; + } + selectSingleCard(card) { + card.setAttribute("data-slot", card.getAttribute("slot")); + card.setAttribute("slot", "single-card"); + this.singleCard = card; + } + unSelectSingleCard() { + if (!this.singleCard) + return; + this.singleCard.setAttribute( + "slot", + this.singleCard.getAttribute("data-slot") + ); + this.singleCard.removeAttribute("data-slot"); + this.step = 1; + this.singleCard = void 0; + } + handleContinue() { + this.step = 2; + this.selectSingleCard(this.cardToSelect); + this.#cardIcons = [ + ...this.singleCard.querySelectorAll("merch-icon") + ].map((el) => el.cloneNode(true)); + } + handleBack() { + this.unSelectSingleCard(); + } + get cardToSelect() { + return this.selectedTabPanel?.card ?? this.querySelector("merch-card[aria-selected]"); + } + // this.selectedTabPanel.card doesn't always exist, e.g. tab was switched but card wasn't selected yet + // this.singleCard ?? this.querySelector('merch-card[aria-selected]') + get selectedCard() { + return this.singleCard ?? this.selectedTabPanel.card; + } + get mobileStepTwo() { + if (!this.singleCard) + return html``; + return html` ${this.backButton} ${this.stepTwoCardIconsAndTitle} - `:s``}get stepTwoCardIconsAndTitle(){if(this.selectedCard)return s`
- ${this.#s} + `; + } + get stepTwoCardIconsAndTitle() { + if (!this.selectedCard) + return; + return html`
+ ${this.#cardIcons}

${this.selectedCard.title}

-
`}get backButton(){return this.step!==2?s``:s``; + } + get backButton() { + if (this.step !== 2) + return html``; + return html` Back`}get mobileLayout(){return this.step===1?s` + > Back`; + } + get mobileLayout() { + if (this.step === 1) { + return html`
${this.tabs} ${this.continueButton}
- `:s` + `; + } + return html`
${this.tabs}${this.mobileStepTwo}
- `}render(){return this.ready?s` + `; + } + render() { + if (!this.ready) + return html``; + return html` - ${this.#i.matches?this.mobileLayout:this.desktopLayout} + ${this.#mobileAndTablet.matches ? this.mobileLayout : this.desktopLayout} +
- `:s``}connectedCallback(){super.connectedCallback(),this.style.setProperty("--mod-tabs-font-weight",700),this.addEventListener(h,this.merchTwpReady),this.subscriptionPanel.addEventListener(p,this.#t),this.addEventListener(g,this.handleQuantityChange),this.addEventListener(u,this.handleStorageChange)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener(h,this.merchTwpReady),this.subscriptionPanel.removeEventListener(p,this.#t),this.removeEventListener(u,this.handleStorageChange)}handleOfferSelected(e){this.log.debug("Selecting plan type",e.target.planType),this.selectedCard.selectMerchOffer(e.target.selectedOffer)}handleQuantityChange(e){this.selectedTabPanel&&(this.selectedCard.quantitySelect.defaultValue=e.detail.option,this.requestUpdate())}setOfferSelectOnPanel(e){e.setAttribute("variant","subscription-options"),this.subscriptionPanel.offerSelect?.remove(),this.subscriptionPanel.appendChild(e)}handleStorageChange(e){let t=e.detail.offerSelect;t&&this.setOfferSelectOnPanel(t)}get preselectedCardId(){let e=x()["select-cards"]?.split(",").reduce((t,n)=>{let i=decodeURIComponent(n.trim().toLowerCase());return i&&t.push(i),t},[])||[];if(e.length&&this.selectedTab===a)return e[0];if(e.length>1&&this.selectedTab===l)return e[1];if(e.length>2&&this.selectedTab===c)return e[2]}get cardToBePreselected(){return this.selectedTabPanel?.querySelector("slot").assignedElements().find(e=>{let t=e.querySelector(".heading-xs")?.textContent.trim().toLowerCase()||"";return this.preselectedCardId&&t.includes(this.preselectedCardId)})}selectCard(e,t=!1){let n=this.selectedTabPanel,i=n?.card;(t||!i)&&(i&&(i.selected=void 0),i=this.cardToBePreselected||e,i.selected=!0,n?n.card=i:this.selectSingleCard(i)),i.focus(),this.subscriptionPanel.quantitySelect?.remove();let o=i.quantitySelect?.cloneNode(!0);o&&this.subscriptionPanel.appendChild(o);let C=i.offerSelect.cloneNode(!0);this.setOfferSelectOnPanel(C)}async processCards(){let e=[...this.querySelectorAll("merch-card")];e.forEach((t,n)=>{let{customerSegment:i,marketSegment:o}=t.offerSelect;i==="INDIVIDUAL"?o==="COM"?t.setAttribute("slot","individuals"):o==="EDU"&&t.setAttribute("slot","education"):i==="TEAM"&&t.setAttribute("slot","business"),t.addEventListener("click",()=>this.selectCard(t,!0))}),this.ready=!0,this.requestUpdate(),await this.updateComplete,await this.tabElement?.updateComplete,this.selectCard(e.length===1?e[0]:this.firstCardInSelectedTab,!0)}merchTwpReady(){this.querySelector("merch-card merch-offer-select:not([plan-type])")||this.processCards()}get cards(){return this.querySelectorAll("merch-card[slot]")}get cciCards(){return this.querySelectorAll('merch-card[slot="individuals"]')}get cctCards(){return this.querySelectorAll('merch-card[slot="business"]')}get cceCards(){return this.querySelectorAll('merch-card[slot="education"]')}get subscriptionPanel(){return this.querySelector("merch-subscription-panel")}get tabElement(){return this.shadowRoot.querySelector("sp-tabs")}};window.customElements.define(S,m);export{m as MerchTwpD2P}; -//# sourceMappingURL=merch-twp-d2p.js.map + `; + } + connectedCallback() { + super.connectedCallback(); + this.style.setProperty("--mod-tabs-font-weight", 700); + this.addEventListener(EVENT_MERCH_CARD_READY, this.merchTwpReady); + this.subscriptionPanel.addEventListener( + EVENT_OFFER_SELECTED, + this.#handleOfferSelected + ); + this.addEventListener( + EVENT_MERCH_QUANTITY_SELECTOR_CHANGE, + this.handleQuantityChange + ); + this.whatsIncludedLink?.addEventListener( + "click", + this.handleWhatsIncludedClick + ); + this.addEventListener( + EVENT_MERCH_STORAGE_CHANGE, + this.handleStorageChange + ); + } + disconnectedCallback() { + super.disconnectedCallback(); + this.removeEventListener(EVENT_MERCH_CARD_READY, this.merchTwpReady); + this.subscriptionPanel.removeEventListener( + EVENT_OFFER_SELECTED, + this.#handleOfferSelected + ); + this.whatsIncludedLink?.removeEventListener("click", this.handleWhatsIncludedClick); + this.removeEventListener( + EVENT_MERCH_STORAGE_CHANGE, + this.handleStorageChange + ); + } + handleOfferSelected(event) { + this.log.debug("Selecting plan type", event.target.planType); + this.selectedCard.selectMerchOffer(event.target.selectedOffer); + } + handleQuantityChange(event) { + if (!this.selectedTabPanel) + return; + this.selectedCard.quantitySelect.defaultValue = event.detail.option; + this.requestUpdate(); + } + get whatsIncludedLink() { + return this.querySelector("merch-card .merch-whats-included"); + } + get whatsIncluded() { + return this.querySelector('[slot="merch-whats-included"]'); + } + setOfferSelectOnPanel(offerSelect) { + offerSelect.setAttribute("variant", "subscription-options"); + this.subscriptionPanel.offerSelect?.remove(); + this.subscriptionPanel.appendChild(offerSelect); + } + handleStorageChange(event) { + const offerSelect = event.detail.offerSelect; + if (!offerSelect) + return; + this.setOfferSelectOnPanel(offerSelect); + } + get preselectedCardId() { + const preselectedCardIds = parseState()["select-cards"]?.split(",").reduce((res, item) => { + const formattedItem = decodeURIComponent( + item.trim().toLowerCase() + ); + formattedItem && res.push(formattedItem); + return res; + }, []) || []; + if (preselectedCardIds.length && this.selectedTab === TAB_INDIVIDUALS) { + return preselectedCardIds[0]; + } else if (preselectedCardIds.length > 1 && this.selectedTab === TAB_BUSINESS) { + return preselectedCardIds[1]; + } else if (preselectedCardIds.length > 2 && this.selectedTab === TAB_EDUCATION) { + return preselectedCardIds[2]; + } + } + get cardToBePreselected() { + return this.selectedTabPanel?.querySelector("slot").assignedElements().find((cardEl) => { + const cardTitle = cardEl.querySelector(".heading-xs")?.textContent.trim().toLowerCase() || ""; + return this.preselectedCardId && cardTitle.includes(this.preselectedCardId); + }); + } + selectCard(card, force = false) { + const tabPanel = this.selectedTabPanel; + let selectedCard = tabPanel?.card; + if (force || !selectedCard) { + if (selectedCard) { + selectedCard.selected = void 0; + } + selectedCard = this.cardToBePreselected || card; + selectedCard.selected = true; + if (tabPanel) { + tabPanel.card = selectedCard; + } else { + this.selectSingleCard(selectedCard); + } + } + selectedCard.focus(); + this.subscriptionPanel.quantitySelect?.remove(); + const quantitySelect = selectedCard.quantitySelect?.cloneNode(true); + if (quantitySelect) { + this.subscriptionPanel.appendChild(quantitySelect); + } + const offerSelect = selectedCard.offerSelect.cloneNode(true); + this.setOfferSelectOnPanel(offerSelect); + } + handleWhatsIncludedClick(event) { + event.preventDefault(); + this.whatsIncluded?.classList.toggle("hidden"); + } + async processCards() { + const allCards = [...this.querySelectorAll("merch-card")]; + allCards.forEach((card, i) => { + const { customerSegment, marketSegment } = card.offerSelect; + if (customerSegment === "INDIVIDUAL") { + if (marketSegment === "COM") { + card.setAttribute("slot", "individuals"); + } else if (marketSegment === "EDU") { + card.setAttribute("slot", "education"); + } + } else if (customerSegment === "TEAM") { + card.setAttribute("slot", "business"); + } + card.addEventListener("click", () => this.selectCard(card, true)); + }); + this.ready = true; + this.requestUpdate(); + await this.updateComplete; + await this.tabElement?.updateComplete; + this.selectCard( + allCards.length === 1 ? allCards[0] : this.firstCardInSelectedTab, + true + ); + } + merchTwpReady() { + if ( + // wait for all merch-offer-selects to be ready + this.querySelector("merch-card merch-offer-select:not([plan-type])") + ) + return; + this.processCards(); + } + /** All the getters for DOM elements */ + get cards() { + return this.querySelectorAll("merch-card[slot]"); + } + get cciCards() { + return this.querySelectorAll('merch-card[slot="individuals"]'); + } + get cctCards() { + return this.querySelectorAll('merch-card[slot="business"]'); + } + get cceCards() { + return this.querySelectorAll('merch-card[slot="education"]'); + } + get subscriptionPanel() { + return this.querySelector("merch-subscription-panel"); + } + get tabElement() { + return this.shadowRoot.querySelector("sp-tabs"); + } +}; +window.customElements.define(TAG_NAME, MerchTwpD2P); +export { + MerchTwpD2P +}; diff --git a/libs/deps/merch-whats-included.js b/libs/deps/merch-whats-included.js new file mode 100644 index 0000000000..0bf07b747b --- /dev/null +++ b/libs/deps/merch-whats-included.js @@ -0,0 +1,93 @@ +// branch: MWPW-142267 commit: db56fa6d1f49aa580f3da94842ffb9e73516ee18 Mon, 08 Jul 2024 21:06:50 GMT + +// src/merch-whats-included.js +import { html, css, LitElement } from "/libs/deps/lit-all.min.js"; +var MerchWhatsIncluded = class extends LitElement { + static styles = css` + :host { + display: inline-grid; + place-items: end start; + grid-auto-flow: row; + width: auto; + overflow: hidden; + place-content: stretch start; + box-sizing: border-box; + align-self: baseline; + margin-top: 16px; + margin-bottom: 16px; + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); + grid-auto-rows: unset; + height: inherit; + } + + ::slotted([slot='heading']) { + grid-column: 1 / -1; + font-size: 18px; + margin: 0; + margin-bottom: 16px; + } + + ::slotted([slot='content']) { + display: contents; + } + + .hidden { + display: none; + } + + .see-more { + font-size: 14px; + text-decoration: underline; + color: var(--link-color-dark); + margin-top: 16px; + } + `; + static properties = { + heading: { type: String, attribute: true }, + mobileRows: { type: Number, attribute: true } + }; + updated() { + this.hideSeeMoreEls(); + } + hideSeeMoreEls() { + if (this.isMobile) { + this.rows.forEach((node, index) => { + if (index >= 5) { + node.style.display = this.showAll ? "flex" : "none"; + } + }); + } + } + constructor() { + super(); + this.showAll = false; + this.mobileRows = this.mobileRows === void 0 ? 5 : this.mobileRows; + } + toggle() { + this.showAll = !this.showAll; + this.dispatchEvent( + new CustomEvent("hide-see-more-elements", { + bubbles: true, + composed: true + }) + ); + this.requestUpdate(); + } + render() { + return html` + + ${this.isMobile && this.rows.length > this.mobileRows ? html`
+ ${this.showAll ? "- See less" : "+ See more"} +
` : html``}`; + } + get isMobile() { + return window.matchMedia("(max-width: 767px)").matches; + } + get rows() { + return this.querySelectorAll("merch-mnemonic-list"); + } +}; +customElements.define("merch-whats-included", MerchWhatsIncluded); +export { + MerchWhatsIncluded +}; From 954105df11efbd1af1f73f712c3eb4b000d601d9 Mon Sep 17 00:00:00 2001 From: Axel Cureno Basurto Date: Mon, 8 Jul 2024 16:56:57 -0700 Subject: [PATCH 02/20] Update merch-whats-included.css --- .../merch-whats-included/merch-whats-included.css | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/libs/blocks/merch-whats-included/merch-whats-included.css b/libs/blocks/merch-whats-included/merch-whats-included.css index 34ee14bdc8..8a7cd0926f 100644 --- a/libs/blocks/merch-whats-included/merch-whats-included.css +++ b/libs/blocks/merch-whats-included/merch-whats-included.css @@ -6,8 +6,11 @@ .merch-whats-included-container .fragment .container { display: grid; grid-auto-flow: column; - align-items: start; - height: auto; - width: inherit; - padding: 0; + width: auto; +} + +@media screen and (max-width: 767px) { + .merch-whats-included-container .fragment .container { + grid-auto-flow: row; + } } From 6f6a0af94641ddbd816f15bb97142eb3c33892f0 Mon Sep 17 00:00:00 2001 From: Axel Cureno Basurto Date: Mon, 8 Jul 2024 17:16:40 -0700 Subject: [PATCH 03/20] Update merch-whats-included.css --- libs/blocks/merch-whats-included/merch-whats-included.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/libs/blocks/merch-whats-included/merch-whats-included.css b/libs/blocks/merch-whats-included/merch-whats-included.css index 8a7cd0926f..f95fdbd72b 100644 --- a/libs/blocks/merch-whats-included/merch-whats-included.css +++ b/libs/blocks/merch-whats-included/merch-whats-included.css @@ -10,6 +10,11 @@ } @media screen and (max-width: 767px) { + .merch-whats-included-container { + position: fixed; + overflow: hidden scroll; + } + .merch-whats-included-container .fragment .container { grid-auto-flow: row; } From 024f2b8e05dc94095dc0db7254a0da5d0403b5f2 Mon Sep 17 00:00:00 2001 From: Axel Cureno Basurto Date: Mon, 8 Jul 2024 17:20:04 -0700 Subject: [PATCH 04/20] Update merch-whats-included.css --- libs/blocks/merch-whats-included/merch-whats-included.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/libs/blocks/merch-whats-included/merch-whats-included.css b/libs/blocks/merch-whats-included/merch-whats-included.css index f95fdbd72b..84426107a4 100644 --- a/libs/blocks/merch-whats-included/merch-whats-included.css +++ b/libs/blocks/merch-whats-included/merch-whats-included.css @@ -14,7 +14,7 @@ position: fixed; overflow: hidden scroll; } - + .merch-whats-included-container .fragment .container { grid-auto-flow: row; } From 46fe52ce8e8d0e7311e278c943174bd6e8935deb Mon Sep 17 00:00:00 2001 From: Axel Cureno Basurto Date: Thu, 11 Jul 2024 13:14:51 -0700 Subject: [PATCH 05/20] updated libs from main --- libs/deps/merch-card.js | 238 ++++++++++----- libs/deps/merch-mnemonic-list.json | 1 + libs/deps/merch-twp-d2p.js | 442 ++-------------------------- libs/deps/merch-whats-included.json | 1 + 4 files changed, 199 insertions(+), 483 deletions(-) create mode 100644 libs/deps/merch-mnemonic-list.json create mode 100644 libs/deps/merch-whats-included.json diff --git a/libs/deps/merch-card.js b/libs/deps/merch-card.js index 34545131dd..05ccd2c451 100644 --- a/libs/deps/merch-card.js +++ b/libs/deps/merch-card.js @@ -1,7 +1,6 @@ -// branch: main commit: 258ad3d851cc4945eae2aab2dcc80a8d0c14d861 Fri, 28 Jun 2024 14:19:21 GMT -import{html as a,LitElement as j}from"/libs/deps/lit-all.min.js";import{LitElement as q,html as T,css as F}from"/libs/deps/lit-all.min.js";var s=class extends q{static properties={size:{type:String,attribute:!0},src:{type:String,attribute:!0},alt:{type:String,attribute:!0},href:{type:String,attribute:!0}};constructor(){super(),this.size="m",this.alt=""}render(){let{href:e}=this;return e?T` +import{html as o,LitElement as te,nothing as re}from"/libs/deps/lit-all.min.js";import{LitElement as Y,html as M,css as Q}from"/libs/deps/lit-all.min.js";var h=class extends Y{static properties={size:{type:String,attribute:!0},src:{type:String,attribute:!0},alt:{type:String,attribute:!0},href:{type:String,attribute:!0}};constructor(){super(),this.size="m",this.alt=""}render(){let{href:e}=this;return e?M` ${this.alt} - `:T` ${this.alt}`}static styles=F` + `:M` ${this.alt}`}static styles=Q` :host { --img-width: 32px; --img-height: 32px; @@ -24,7 +23,7 @@ import{html as a,LitElement as j}from"/libs/deps/lit-all.min.js";import{LitEleme width: var(--img-width); height: var(--img-height); } - `};customElements.define("merch-icon",s);import{css as k,unsafeCSS as u}from"/libs/deps/lit-all.min.js";var f="(max-width: 767px)",y="(max-width: 1199px)",i="(min-width: 768px)",c="(min-width: 1200px)",h="(min-width: 1600px)";var A=k` + `};customElements.define("merch-icon",h);var Z=localStorage.getItem("masAccessToken"),L={Authorization:`Bearer ${Z}`,pragma:"no-cache","cache-control":"no-cache"};async function J({path:c,query:e}){let t={};c&&(t.path=c),e&&(t.fullText={text:encodeURIComponent(e),queryMode:"EXACT_WORDS"});let r=new URLSearchParams({query:JSON.stringify({filter:t})}).toString();return fetch(`${this.cfSearchUrl}?${r}`,{headers:L}).then(n=>n.json()).then(({items:n})=>n)}async function X(c){return fetch(`${this.cfFragmentsUrl}?path=${c}`,{headers:L}).then(e=>e.json()).then(({items:[e]})=>e)}var k=class{sites={cf:{fragments:{search:J.bind(this),getCfByPath:X.bind(this)}}};constructor(e){let r=`${`https://${e}.adobeaemcloud.com`}/adobe/sites`;this.cfFragmentsUrl=`${r}/cf/fragments`,this.cfSearchUrl=`${this.cfFragmentsUrl}/search`}};var O="merch-offer-select:ready",N="merch-card:ready";var z="merch-storage:change",$="merch-quantity-selector:change";function P(c){let e=[];function t(r){r.nodeType===Node.TEXT_NODE?e.push(r):r.childNodes.forEach(t)}return t(c),e}function v(c,e={},t){let r=document.createElement(c);r.innerHTML=t;for(let[n,a]of Object.entries(e))r.setAttribute(n,a);return r}var H="aem-bucket",B={catalog:{name:"catalog",title:{tag:"h3",slot:"heading-xs"},prices:{tag:"h3",slot:"heading-xs"},description:{tag:"div",slot:"body-xs"},ctas:{size:"l"}},ah:{name:"ah",title:{tag:"h3",slot:"heading-xxs"},prices:{tag:"h3",slot:"heading-xs"},description:{tag:"div",slot:"body-xxs"},ctas:{size:"s"}},"ccd-action":{name:"ccd-action",title:{tag:"h3",slot:"heading-xs"},prices:{tag:"h3",slot:"heading-xs"},description:{tag:"div",slot:"body-xs"},ctas:{size:"l"}}};async function ee(c,e){let t=c.fields.reduce((a,{name:i,multiple:x,values:u})=>(a[i]=x?u:u[0],a),{}),{type:r="catalog"}=t,n=B[r]||B.catalog;if(e.variant=r,e.setAttribute("variant",r),t.icon?.forEach(a=>{let i=v("merch-icon",{slot:"icons",src:a,alt:"",href:"",size:"l"});e.append(i)}),t.title&&e.append(v(n.title.tag,{slot:n.title.slot},t.title)),t.prices){let a=t.prices,i=v(n.prices.tag,{slot:n.prices.slot},a);e.append(i)}if(e.append(v("p",{slot:"body-xxs",id:"individuals1"},"Desktop")),t.description){let a=v(n.description.tag,{slot:n.description.slot},t.description);e.append(a)}if(t.ctas){let a=t.ctas,i=v("div",{slot:"footer"},a);e.append(i)}}var T=class{#e=new Map;clear(){this.#e.clear()}add(...e){e.forEach(t=>{let{path:r}=t;r&&this.#e.set(r,t)})}has(e){return this.#e.has(e)}get(e){return this.#e.get(e)}remove(e){this.#e.delete(e)}},D=new T,m=class extends HTMLElement{#e;cache=D;path;static get observedAttributes(){return["source","path"]}attributeChangedCallback(e,t,r){this[e]=r}connectedCallback(){let e=this.getAttribute(H)??document.querySelector("mas-studio")?.getAttribute(H);this.#e=new k(e),this.fetchData()}refresh(){this.cache.remove(this.path),this.fetchData()}async fetchData(){let e=D.get(this.path);if(e||(e=await this.#e.sites.cf.fragments.getCfByPath(this.path)),e){ee(e,this.parentElement),this.render();return}this.render()}async render(){this.isConnected&&this.parentElement.tagName==="MERCH-CARD"&&await Promise.all([...this.parentElement.querySelectorAll('[is="inline-price"],[is="checkout-link"]')].map(e=>e.onceSettled()))}};customElements.define("merch-datasource",m);import{css as A,unsafeCSS as y}from"/libs/deps/lit-all.min.js";var b="(max-width: 767px)",C="(max-width: 1199px)",d="(min-width: 768px)",s="(min-width: 1200px)",g="(min-width: 1600px)";var I=A` :host { position: relative; display: flex; @@ -59,6 +58,10 @@ import{html as a,LitElement as j}from"/libs/deps/lit-all.min.js";import{LitEleme min-height: 214px; } + :host([variant='ccd-action']:not([size])) { + width: var(--consonant-merch-card-ccd-action-width); + } + :host([aria-selected]) { outline: none; box-sizing: border-box; @@ -329,7 +332,7 @@ import{html as a,LitElement as j}from"/libs/deps/lit-all.min.js";import{LitEleme height: var(--consonant-merch-card-mini-compare-top-section-height); } - @media screen and ${u(y)} { + @media screen and ${y(C)} { [class*'-merch-cards'] :host([variant='mini-compare-chart']) footer { flex-direction: column; align-items: stretch; @@ -337,7 +340,7 @@ import{html as a,LitElement as j}from"/libs/deps/lit-all.min.js";import{LitEleme } } - @media screen and ${u(f)} { + @media screen and ${y(b)} { :host([variant='mini-compare-chart']) .top-section { padding-top: var(--consonant-merch-spacing-xs); } @@ -347,7 +350,7 @@ import{html as a,LitElement as j}from"/libs/deps/lit-all.min.js";import{LitEleme top: 10px; } } - @media screen and ${u(c)} { + @media screen and ${y(s)} { :host([variant='mini-compare-chart']) footer { padding: var(--consonant-merch-spacing-xs) var(--consonant-merch-spacing-s) @@ -390,9 +393,9 @@ import{html as a,LitElement as j}from"/libs/deps/lit-all.min.js";import{LitEleme :host([variant='segment']) ::slotted([slot='heading-xs']) { max-width: var(--consonant-merch-card-heading-xs-max-width, 100%); } -`,R=()=>{let p=[k` +`,q=()=>{let c=[A` /* Tablet */ - @media screen and ${u(i)} { + @media screen and ${y(d)} { :host([size='wide']), :host([size='super-wide']) { grid-column: span 3; @@ -403,18 +406,18 @@ import{html as a,LitElement as j}from"/libs/deps/lit-all.min.js";import{LitEleme } /* Laptop */ - @media screen and ${u(c)} { + @media screen and ${y(s)} { :host([size='super-wide']) { grid-column: span 3; } - `];return p.push(k` + `];return c.push(A` /* Large desktop */ - @media screen and ${u(h)} { + @media screen and ${y(g)} { :host([size='super-wide']) { grid-column: span 4; } } - `),p};var[_,M,O,L,N,te]=["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Enter","Tab"];var P=document.createElement("style");P.innerHTML=` + `),c};var[j,F,U,V,W,Ue]=["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Enter","Tab"];var G=document.createElement("style");G.innerHTML=` :root { --consonant-merch-card-detail-font-size: 12px; --consonant-merch-card-detail-font-weight: 500; @@ -518,6 +521,11 @@ import{html as a,LitElement as j}from"/libs/deps/lit-all.min.js";import{LitEleme --consonant-merch-card-twp-mobile-width: 300px; --consonant-merch-card-twp-mobile-height: 358px; + /* ccd-action */ + --consonant-merch-card-ccd-action-width: 276px; + --consonant-merch-card-ccd-action-min-height: 320px; + + /*mini compare chart */ --consonant-merch-card-mini-compare-chart-icon-size: 32px; --consonant-merch-card-mini-compare-mobile-cta-font-size: 15px; @@ -533,6 +541,15 @@ import{html as a,LitElement as j}from"/libs/deps/lit-all.min.js";import{LitEleme --ellipsis-icon: url('data:image/svg+xml,'); + /* callout */ + --consonant-merch-card-callout-line-height: 21px; + --consonant-merch-card-callout-font-size: 14px; + --consonant-merch-card-callout-font-color: #2C2C2C; + --consonant-merch-card-callout-icon-size: 16px; + --consonant-merch-card-callout-icon-top: 6px; + --consonant-merch-card-callout-icon-right: 8px; + --consonant-merch-card-callout-letter-spacing: 0px; + --consonant-merch-card-callout-icon-padding: 34px; } merch-card-collection { @@ -643,6 +660,43 @@ merch-card [slot='heading-xl'] { color: var(--merch-color-grey-80); } +merch-card [slot='callout-text'] { + display: inline-block; + margin: var(--consonant-merch-spacing-xxxs) 0px; +} + +merch-card [slot='callout-text'] > div { + position: relative; + display: inline-grid; + background: rgba(203 203 203 / 50%); + border-radius: var(--consonant-merch-spacing-xxxs); + padding: var(--consonant-merch-spacing-xxxs) var(--consonant-merch-spacing-xxxs) var(--consonant-merch-spacing-xxxs) var(--consonant-merch-spacing-xxs); +} + +merch-card [slot='callout-text'] > div.callout-content-wrapper-with-icon { + padding-right: var(--consonant-merch-card-callout-icon-padding); +} + +merch-card [slot='callout-text'] > div > div { + display: inline-block; + text-align: left; + font: normal normal normal var(--consonant-merch-card-callout-font-size)/var(--consonant-merch-card-callout-line-height) Adobe Clean; + letter-spacing: var(--consonant-merch-card-callout-letter-spacing); + color: var(--consonant-merch-card-callout-font-color); +} + +merch-card [slot='callout-text'] img { + position: absolute; + top: var(--consonant-merch-card-callout-icon-top); + right: var(--consonant-merch-card-callout-icon-right); + width: var(--consonant-merch-card-callout-icon-size); + height: var(--consonant-merch-card-callout-icon-size); +} + +merch-card[variant="mini-compare-chart"] [slot="callout-text"] { + padding: 0px var(--consonant-merch-spacing-s); +} + merch-card [slot='detail-m'] { font-size: var(--consonant-merch-card-detail-m-font-size); letter-spacing: var(--consonant-merch-card-detail-m-letter-spacing); @@ -729,6 +783,10 @@ merch-card[variant="catalog"] [slot="action-menu-content"] a { text-decoration: underline; } +merch-card[variant="ccd-action"] .price-strikethrough { + font-size: 18px; +} + merch-card[variant="plans"] [slot="quantity-select"] { display: flex; justify-content: flex-start; @@ -875,7 +933,7 @@ merch-card[variant="mini-compare-chart"] .footer-row-cell-description a { text-decoration: solid; } -@media screen and ${f} { +@media screen and ${b} { merch-card[variant="mini-compare-chart"] .mini-compare-chart-badge + [slot='heading-m'] { margin-top: var(--consonant-merch-spacing-m); } @@ -966,7 +1024,7 @@ div[slot='bg-image'] img { } /* Mobile */ -@media screen and ${f} { +@media screen and ${b} { :root { --consonant-merch-card-mini-compare-chart-width: 142px; --consonant-merch-card-segment-width: 276px; @@ -978,7 +1036,7 @@ div[slot='bg-image'] img { /* Tablet */ -@media screen and ${i} { +@media screen and ${d} { :root { --consonant-merch-card-catalog-width: 302px; --consonant-merch-card-plans-width: 302px; @@ -991,7 +1049,7 @@ div[slot='bg-image'] img { } /* desktop */ -@media screen and ${c} { +@media screen and ${s} { :root { --consonant-merch-card-catalog-width: 276px; --consonant-merch-card-plans-width: 276px; @@ -1015,7 +1073,7 @@ div[slot='bg-image'] img { } /* Tablet */ -@media screen and ${i} { +@media screen and ${d} { .two-merch-cards.plans, .three-merch-cards.plans, .four-merch-cards.plans { @@ -1024,7 +1082,7 @@ div[slot='bg-image'] img { } /* desktop */ -@media screen and ${c} { +@media screen and ${s} { .three-merch-cards.plans, .four-merch-cards.plans { grid-template-columns: repeat(3, var(--consonant-merch-card-plans-width)); @@ -1032,7 +1090,7 @@ div[slot='bg-image'] img { } /* Large desktop */ - @media screen and ${h} { + @media screen and ${g} { .four-merch-cards.plans { grid-template-columns: repeat(4, var(--consonant-merch-card-plans-width)); } @@ -1048,7 +1106,7 @@ div[slot='bg-image'] img { } /* Tablet */ -@media screen and ${i} { +@media screen and ${d} { .two-merch-cards.catalog, .three-merch-cards.catalog, .four-merch-cards.catalog { @@ -1057,7 +1115,7 @@ div[slot='bg-image'] img { } /* desktop */ -@media screen and ${c} { +@media screen and ${s} { .three-merch-cards.catalog, .four-merch-cards.catalog { grid-template-columns: repeat(3, var(--consonant-merch-card-catalog-width)); @@ -1065,7 +1123,7 @@ div[slot='bg-image'] img { } /* Large desktop */ - @media screen and ${h} { + @media screen and ${g} { .four-merch-cards.catalog { grid-template-columns: repeat(4, var(--consonant-merch-card-catalog-width)); } @@ -1081,7 +1139,7 @@ div[slot='bg-image'] img { } /* Tablet */ -@media screen and ${i} { +@media screen and ${d} { .two-merch-cards.special-offers, .three-merch-cards.special-offers, .four-merch-cards.special-offers { @@ -1090,14 +1148,14 @@ div[slot='bg-image'] img { } /* desktop */ -@media screen and ${c} { +@media screen and ${s} { .three-merch-cards.special-offers, .four-merch-cards.special-offers { grid-template-columns: repeat(3, minmax(300px, var(--consonant-merch-card-special-offers-width))); } } -@media screen and ${h} { +@media screen and ${g} { .four-merch-cards.special-offers { grid-template-columns: repeat(4, minmax(300px, var(--consonant-merch-card-special-offers-width))); } @@ -1113,7 +1171,7 @@ div[slot='bg-image'] img { } /* Tablet */ -@media screen and ${i} { +@media screen and ${d} { .two-merch-cards.image, .three-merch-cards.image, .four-merch-cards.image { @@ -1122,7 +1180,7 @@ div[slot='bg-image'] img { } /* desktop */ -@media screen and ${c} { +@media screen and ${s} { .three-merch-cards.image, .four-merch-cards.image { grid-template-columns: repeat(3, var(--consonant-merch-card-image-width)); @@ -1130,7 +1188,7 @@ div[slot='bg-image'] img { } /* Large desktop */ - @media screen and ${h} { + @media screen and ${g} { .four-merch-cards.image { grid-template-columns: repeat(4, var(--consonant-merch-card-image-width)); } @@ -1146,7 +1204,7 @@ div[slot='bg-image'] img { } /* Tablet */ -@media screen and ${i} { +@media screen and ${d} { .two-merch-cards.segment, .three-merch-cards.segment, .four-merch-cards.segment { @@ -1155,7 +1213,7 @@ div[slot='bg-image'] img { } /* desktop */ -@media screen and ${c} { +@media screen and ${s} { .three-merch-cards.segment { grid-template-columns: repeat(3, minmax(276px, var(--consonant-merch-card-segment-width))); } @@ -1175,7 +1233,7 @@ div[slot='bg-image'] img { } /* Tablet */ -@media screen and ${i} { +@media screen and ${d} { .two-merch-cards.product, .three-merch-cards.product, .four-merch-cards.product { @@ -1184,7 +1242,7 @@ div[slot='bg-image'] img { } /* desktop */ -@media screen and ${c} { +@media screen and ${s} { .three-merch-cards.product, .four-merch-cards.product { grid-template-columns: repeat(3, var(--consonant-merch-card-product-width)); @@ -1192,7 +1250,7 @@ div[slot='bg-image'] img { } /* Large desktop */ - @media screen and ${h} { + @media screen and ${g} { .four-merch-cards.product { grid-template-columns: repeat(4, var(--consonant-merch-card-product-width)); } @@ -1206,7 +1264,7 @@ div[slot='bg-image'] img { } /* Tablet */ -@media screen and ${i} { +@media screen and ${d} { .one-merch-card.twp, .two-merch-cards.twp { grid-template-columns: repeat(2, var(--consonant-merch-card-twp-width)); @@ -1217,7 +1275,7 @@ div[slot='bg-image'] img { } /* desktop */ -@media screen and ${c} { +@media screen and ${s} { .one-merch-card.twp .two-merch-cards.twp { grid-template-columns: repeat(2, var(--consonant-merch-card-twp-width)); @@ -1228,7 +1286,7 @@ div[slot='bg-image'] img { } /* Large desktop */ - @media screen and ${h} { + @media screen and ${g} { .one-merch-card.twp .two-merch-cards.twp { grid-template-columns: repeat(2, var(--consonant-merch-card-twp-width)); @@ -1239,7 +1297,7 @@ div[slot='bg-image'] img { } /* Mobile */ -@media screen and ${f} { +@media screen and ${b} { .one-merch-card.twp, .two-merch-cards.twp, .three-merch-cards.twp { @@ -1256,7 +1314,7 @@ div[slot='bg-image'] img { } /* Tablet */ -@media screen and ${i} { +@media screen and ${d} { .two-merch-cards.inline-heading, .three-merch-cards.inline-heading, .four-merch-cards.inline-heading { @@ -1265,7 +1323,7 @@ div[slot='bg-image'] img { } /* desktop */ -@media screen and ${c} { +@media screen and ${s} { .three-merch-cards.inline-heading, .four-merch-cards.inline-heading { grid-template-columns: repeat(3, var(--consonant-merch-card-inline-heading-width)); @@ -1273,12 +1331,44 @@ div[slot='bg-image'] img { } /* Large desktop */ - @media screen and ${h} { + @media screen and ${g} { .four-merch-cards.inline-heading { grid-template-columns: repeat(4, var(--consonant-merch-card-inline-heading-width)); } } +/* grid style for ccd-action */ +.one-merch-card.ccd-action, +.two-merch-cards.ccd-action, +.three-merch-cards.ccd-action, +.four-merch-cards.ccd-action { + grid-template-columns: var(--consonant-merch-card-ccd-action-width); +} + +/* Tablet */ +@media screen and ${d} { + .two-merch-cards.ccd-action, + .three-merch-cards.ccd-action, + .four-merch-cards.ccd-action { + grid-template-columns: repeat(2, var(--consonant-merch-card-ccd-action-width)); + } +} + +/* desktop */ +@media screen and ${s} { + .three-merch-cards.ccd-action, + .four-merch-cards.ccd-action { + grid-template-columns: repeat(3, var(--consonant-merch-card-ccd-action-width)); + } +} + +/* Large desktop */ + @media screen and ${g} { + .four-merch-cards.ccd-action { + grid-template-columns: repeat(4, var(--consonant-merch-card-ccd-action-width)); + } +} + /* grid style for mini-compare-chart */ .one-merch-card.mini-compare-chart { grid-template-columns: var(--consonant-merch-card-mini-compare-chart-wide-width); @@ -1292,7 +1382,7 @@ div[slot='bg-image'] img { gap: var(--consonant-merch-spacing-xs); } -@media screen and ${f} { +@media screen and ${b} { .two-merch-cards.mini-compare-chart merch-card [slot="footer"] a, .three-merch-cards.mini-compare-chart merch-card [slot="footer"] a, .four-merch-cards.mini-compare-chart merch-card [slot="footer"] a { @@ -1300,7 +1390,7 @@ div[slot='bg-image'] img { } } -@media screen and ${y} { +@media screen and ${C} { .three-merch-cards.mini-compare-chart merch-card [slot="footer"] a, .four-merch-cards.mini-compare-chart merch-card [slot="footer"] a { flex: 1; @@ -1308,7 +1398,7 @@ div[slot='bg-image'] img { } /* Tablet */ -@media screen and ${i} { +@media screen and ${d} { .two-merch-cards.mini-compare-chart { grid-template-columns: repeat(2, minmax(var(--consonant-merch-card-mini-compare-chart-width), var(--consonant-merch-card-mini-compare-chart-wide-width))); gap: var(--consonant-merch-spacing-m); @@ -1321,7 +1411,7 @@ div[slot='bg-image'] img { } /* desktop */ -@media screen and ${c} { +@media screen and ${s} { .one-merch-card.mini-compare-chart { grid-template-columns: var(--consonant-merch-card-mini-compare-chart-wide-width); } @@ -1338,7 +1428,7 @@ div[slot='bg-image'] img { } } -@media screen and ${h} { +@media screen and ${g} { .four-merch-cards.mini-compare-chart { grid-template-columns: repeat(4, var(--consonant-merch-card-mini-compare-chart-width)); } @@ -1402,20 +1492,20 @@ body.merch-modal { scrollbar-gutter: stable; height: 100vh; } -`;document.head.appendChild(P);var H="merch-offer-select:ready",B="merch-card:ready";var C="merch-storage:change",z="merch-quantity-selector:change";function D(p){let e=[];function t(r){r.nodeType===Node.TEXT_NODE?e.push(r):r.childNodes.forEach(t)}return t(p),e}var l="MERCH-CARD",g="merch-card",W=32,S="mini-compare-chart",I=p=>`--consonant-merch-card-footer-row-${p}-min-height`,d=class extends j{static properties={name:{type:String,attribute:"name",reflect:!0},variant:{type:String,reflect:!0},size:{type:String,attribute:"size",reflect:!0},badgeColor:{type:String,attribute:"badge-color"},badgeBackgroundColor:{type:String,attribute:"badge-background-color"},badgeText:{type:String,attribute:"badge-text"},actionMenu:{type:Boolean,attribute:"action-menu"},actionMenuContent:{type:String,attribute:"action-menu-content"},customHr:{type:Boolean,attribute:"custom-hr"},detailBg:{type:String,attribute:"detail-bg"},secureLabel:{type:String,attribute:"secure-label"},checkboxLabel:{type:String,attribute:"checkbox-label"},selected:{type:Boolean,attribute:"aria-selected",reflect:!0},storageOption:{type:String,attribute:"storage",reflect:!0},stockOfferOsis:{type:Object,attribute:"stock-offer-osis",converter:{fromAttribute:e=>{let[t,r,n]=e.split(",");return{PUF:t,ABM:r,M2M:n}}}},filters:{type:String,reflect:!0,converter:{fromAttribute:e=>Object.fromEntries(e.split(",").map(t=>{let[r,n,o]=t.split(":"),m=Number(n);return[r,{order:isNaN(m)?void 0:m,size:o}]})),toAttribute:e=>Object.entries(e).map(([t,{order:r,size:n}])=>[t,r,n].filter(o=>o!=null).join(":")).join(",")}},types:{type:String,attribute:"types",reflect:!0},merchOffer:{type:Object}};static styles=[A,...R()];customerSegment;marketSegment;constructor(){super(),this.filters={},this.types="",this.selected=!1}#e;updated(e){e.has("badgeBackgroundColor")&&this.variant!=="twp"&&(this.style.border=`1px solid ${this.badgeBackgroundColor}`),this.updateComplete.then(async()=>{let t=Array.from(this.querySelectorAll('span[is="inline-price"][data-wcs-osi]'));await Promise.all(t.map(r=>r.onceSettled())),this.adjustTitleWidth(),this.adjustMiniCompareBodySlots(),this.adjustMiniCompareFooterRows()})}get evergreen(){return this.classList.contains("intro-pricing")}get stockCheckbox(){return this.checkboxLabel?a`