From 874f418c33192bedcb4ffc37220403c350b9ad53 Mon Sep 17 00:00:00 2001 From: Mariia Lukianets Date: Tue, 26 Nov 2024 20:28:55 +0100 Subject: [PATCH] MWPW-163041: fix analytics & add docs --- libs/deps/mas/mas.js | 2 +- libs/deps/mas/merch-card.js | 2 +- libs/features/mas/dist/mas.js | 2 +- libs/features/mas/docs/checkout-link.html | 26 ++++ libs/features/mas/docs/merch-card.html | 15 +++ libs/features/mas/docs/src/checkout-link.md | 28 +++-- libs/features/mas/docs/src/merch-card.md | 21 ++-- libs/features/mas/src/hydrate.js | 2 +- libs/features/mas/src/variants/ccd-slice.js | 2 +- libs/features/mas/test/hydrate.test.js | 125 +++++++++++++------- 10 files changed, 151 insertions(+), 74 deletions(-) diff --git a/libs/deps/mas/mas.js b/libs/deps/mas/mas.js index a2711dc2448..ce447b50e80 100644 --- a/libs/deps/mas/mas.js +++ b/libs/deps/mas/mas.js @@ -1983,7 +1983,7 @@ body.merch-modal { scrollbar-gutter: stable; height: 100vh; } -`;document.head.appendChild(cs);var Wl="#000000",ql="#F8D904",Zl=/(accent|primary|secondary)(-(outline|link))?/,Jl="mas:product_code/",Ql="daa-ll",Br="daa-lh";function eh(e,t,r){e.mnemonicIcon?.map((i,o)=>({icon:i,alt:e.mnemonicAlt[o]??"",link:e.mnemonicLink[o]??""}))?.forEach(({icon:i,alt:o,link:a})=>{if(a&&!/^https?:/.test(a))try{a=new URL(`https://${a}`).href.toString()}catch{a="#"}let s={slot:"icons",src:i,size:r?.size??"l"};o&&(s.alt=o),a&&(s.href=a);let c=de("merch-icon",s);t.append(c)})}function th(e,t){e.badge&&(t.setAttribute("badge-text",e.badge),t.setAttribute("badge-color",e.badgeColor||Wl),t.setAttribute("badge-background-color",e.badgeBackgroundColor||ql))}function rh(e,t,r){r?.includes(e.size)&&t.setAttribute("size",e.size)}function nh(e,t,r){e.cardTitle&&r&&t.append(de(r.tag,{slot:r.slot},e.cardTitle))}function ih(e,t,r){e.subtitle&&r&&t.append(de(r.tag,{slot:r.slot},e.subtitle))}function oh(e,t,r,n){if(e.backgroundImage)switch(n){case"ccd-slice":r&&t.append(de(r.tag,{slot:r.slot},``));break;case"ccd-suggested":t.setAttribute("background-image",e.backgroundImage);break}}function ah(e,t,r){if(e.prices&&r){let n=de(r.tag,{slot:r.slot},e.prices);t.append(n)}}function sh(e,t,r){if(e.description&&r){let n=de(r.tag,{slot:r.slot},e.description);t.append(n)}}function ch(e,t,r,n){n==="ccd-suggested"&&!e.className&&(e.className="primary-link");let i=Zl.exec(e.className)?.[0]??"accent",o=i.includes("accent"),a=i.includes("primary"),s=i.includes("secondary"),c=i.includes("-outline");if(i.includes("-link"))return e;let h="fill",d;o||t?d="accent":a?d="primary":s&&(d="secondary"),c&&(h="outline"),e.tabIndex=-1;let u=de("sp-button",{treatment:h,variant:d,tabIndex:0,size:r.ctas.size??"m"},e);return u.addEventListener("click",m=>{m.target!==e&&(m.stopPropagation(),e.click())}),u}function lh(e,t){return e.classList.add("con-button"),t&&e.classList.add("blue"),e}function hh(e,t,r,n){if(e.ctas){let{slot:i}=r.ctas,o=de("div",{slot:i},e.ctas),a=[...o.querySelectorAll("a")].map(s=>{let c=s.parentElement.tagName==="STRONG";return t.consonant?lh(s,c):ch(s,c,r,n)});o.innerHTML="",o.append(...a),t.append(o)}}function dh(e,t){let{tags:r}=e,n=r?.find(i=>i.startsWith(Jl))?.split("/").pop();n&&(t.setAttribute(Br,n),t.querySelectorAll("a[data-analytics-id]").forEach((i,o)=>{i.setAttribute(Ql,`${i.dataset.analyticsId}-${o+1}`)}))}async function ls(e,t){let{fields:r}=e,{variant:n}=r;if(!n)return;t.querySelectorAll("[slot]").forEach(o=>{o.remove()}),t.removeAttribute("background-image"),t.removeAttribute("badge-background-color"),t.removeAttribute("badge-color"),t.removeAttribute("badge-text"),t.removeAttribute("size"),t.removeAttribute(Br),t.variant=n,await t.updateComplete;let{aemFragmentMapping:i}=t.variantLayout;i&&(dh(r,t),oh(r,t,i.backgroundImage,n),th(r,t),hh(r,t,i,n),sh(r,t,i.description),eh(r,t,i.mnemonics),ah(r,t,i.prices),rh(r,t,i.allowedSizes),ih(r,t,i.subtitle),nh(r,t,i.title))}var uh="merch-card",mh=2e3,Di,Wt,Ui,Xt=class extends oe{constructor(){super();U(this,Wt);p(this,"customerSegment");p(this,"marketSegment");p(this,"variantLayout");U(this,Di,!1);this.filters={},this.types="",this.selected=!1,this.handleAemFragmentEvents=this.handleAemFragmentEvents.bind(this)}firstUpdated(){this.variantLayout=$i(this,!1),this.variantLayout?.connectedCallbackHook(),this.aemFragment?.updateComplete.catch(()=>{this.style.display="none"})}willUpdate(r){(r.has("variant")||!this.variantLayout)&&(this.variantLayout=$i(this),this.variantLayout.connectedCallbackHook())}updated(r){(r.has("badgeBackgroundColor")||r.has("borderColor"))&&(this.style.border=this.computedBorderStyle),this.variantLayout?.postCardUpdateHook(this)}get theme(){return this.closest("sp-theme")}get dir(){return this.closest("[dir]")?.getAttribute("dir")??"ltr"}get prices(){return Array.from(this.querySelectorAll('span[is="inline-price"][data-wcs-osi]'))}render(){if(!(!this.isConnected||!this.variantLayout||this.style.display==="none"))return this.variantLayout.renderLayout()}get computedBorderStyle(){return["twp","ccd-slice","ccd-suggested"].includes(this.variant)?"":`1px solid ${this.borderColor?this.borderColor:this.badgeBackgroundColor}`}get badgeElement(){return this.shadowRoot.getElementById("badge")}get headingmMSlot(){return this.shadowRoot.querySelector('slot[name="heading-m"]').assignedElements()[0]}get footerSlot(){return this.shadowRoot.querySelector('slot[name="footer"]')?.assignedElements()[0]}get price(){return this.headingmMSlot?.querySelector('span[is="inline-price"]')}get checkoutLinks(){return[...this.footerSlot?.querySelectorAll('a[is="checkout-link"]')??[]]}async toggleStockOffer({target:r}){if(!this.stockOfferOsis)return;let n=this.checkoutLinks;if(n.length!==0)for(let i of n){await i.onceSettled();let o=i.value?.[0]?.planType;if(!o)return;let a=this.stockOfferOsis[o];if(!a)return;let s=i.dataset.wcsOsi.split(",").filter(c=>c!==a);r.checked&&s.push(a),i.dataset.wcsOsi=s.join(",")}}handleQuantitySelection(r){let n=this.checkoutLinks;for(let i of n)i.dataset.quantity=r.detail.option}get titleElement(){return this.querySelector(this.variantLayout?.headingSelector||".card-heading")}get title(){return this.titleElement?.textContent?.trim()}get description(){return this.querySelector('[slot="body-xs"]')?.textContent?.trim()}updateFilters(r){let n={...this.filters};Object.keys(n).forEach(i=>{if(r){n[i].order=Math.min(n[i].order||2,2);return}let o=n[i].order;o===1||isNaN(o)||(n[i].order=Number(o)+1)}),this.filters=n}includes(r){return this.textContent.match(new RegExp(r,"i"))!==null}connectedCallback(){super.connectedCallback(),this.addEventListener(gr,this.handleQuantitySelection),this.addEventListener($n,this.merchCardReady,{once:!0}),this.updateComplete.then(()=>{this.merchCardReady()}),this.storageOptions?.addEventListener("change",this.handleStorageChange),this.addEventListener(Re,this.handleAemFragmentEvents),this.addEventListener(Oe,this.handleAemFragmentEvents),this.aemFragment||setTimeout(()=>this.checkReady(),0)}disconnectedCallback(){super.disconnectedCallback(),this.variantLayout.disconnectedCallbackHook(),this.removeEventListener(gr,this.handleQuantitySelection),this.storageOptions?.removeEventListener(fr,this.handleStorageChange),this.removeEventListener(Re,this.handleAemFragmentEvents),this.removeEventListener(Oe,this.handleAemFragmentEvents)}async handleAemFragmentEvents(r){if(r.type===Re&&be(this,Wt,Ui).call(this,"AEM fragment cannot be loaded"),r.type===Oe&&r.target.nodeName==="AEM-FRAGMENT"){let n=r.detail;await ls(n,this),this.checkReady()}}async checkReady(){let r=Promise.all([...this.querySelectorAll('span[is="inline-price"][data-wcs-osi],a[is="checkout-link"][data-wcs-osi]')].map(o=>o.onceSettled().catch(()=>o))).then(o=>o.every(a=>a.classList.contains("placeholder-resolved"))),n=new Promise(o=>setTimeout(()=>o(!1),mh));if(await Promise.race([r,n])===!0){this.dispatchEvent(new CustomEvent(Bn,{bubbles:!0,composed:!0}));return}be(this,Wt,Ui).call(this,"Contains unresolved offers")}get aemFragment(){return this.querySelector("aem-fragment")}get storageOptions(){return this.querySelector("sp-radio-group#storage")}get storageSpecificOfferSelect(){let r=this.storageOptions?.selected;if(r){let n=this.querySelector(`merch-offer-select[storage="${r}"]`);if(n)return n}return this.querySelector("merch-offer-select")}get offerSelect(){return this.storageOptions?this.storageSpecificOfferSelect:this.querySelector("merch-offer-select")}get quantitySelect(){return this.querySelector("merch-quantity-select")}merchCardReady(){this.offerSelect&&!this.offerSelect.planType||this.dispatchEvent(new CustomEvent(Un,{bubbles:!0}))}handleStorageChange(){let r=this.closest("merch-card")?.offerSelect.cloneNode(!0);r&&this.dispatchEvent(new CustomEvent(fr,{detail:{offerSelect:r},bubbles:!0}))}get dynamicPrice(){return this.querySelector('[slot="price"]')}selectMerchOffer(r){if(r===this.merchOffer)return;this.merchOffer=r;let n=this.dynamicPrice;if(r.price&&n){let i=r.price.cloneNode(!0);n.onceSettled?n.onceSettled().then(()=>{n.replaceWith(i)}):n.replaceWith(i)}}};Di=new WeakMap,Wt=new WeakSet,Ui=function(r){this.dispatchEvent(new CustomEvent(Gn,{detail:r,bubbles:!0,composed:!0}))},p(Xt,"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",reflect:!0},borderColor:{type:String,attribute:"border-color",reflect:!0},badgeBackgroundColor:{type:String,attribute:"badge-background-color",reflect:!0},backgroundImage:{type:String,attribute:"background-image",reflect:!0},badgeText:{type:String,attribute:"badge-text"},actionMenu:{type:Boolean,attribute:"action-menu"},customHr:{type:Boolean,attribute:"custom-hr"},consonant:{type:Boolean,attribute:"consonant"},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:r=>{let[n,i,o]=r.split(",");return{PUF:n,ABM:i,M2M:o}}}},filters:{type:String,reflect:!0,converter:{fromAttribute:r=>Object.fromEntries(r.split(",").map(n=>{let[i,o,a]=n.split(":"),s=Number(o);return[i,{order:isNaN(s)?void 0:s,size:a}]})),toAttribute:r=>Object.entries(r).map(([n,{order:i,size:o}])=>[n,i,o].filter(a=>a!=null).join(":")).join(",")}},types:{type:String,attribute:"types",reflect:!0},merchOffer:{type:Object},analyticsId:{type:String,attribute:Br,reflect:!0}}),p(Xt,"styles",[Ya,ss(),...Xa()]);customElements.define(uh,Xt);var vt=class extends oe{constructor(){super(),this.size="m",this.alt=""}render(){let{href:t}=this;return t?x` +`;document.head.appendChild(cs);var Wl="#000000",ql="#F8D904",Zl=/(accent|primary|secondary)(-(outline|link))?/,Jl="mas:product_code/",Ql="daa-ll",Br="daa-lh";function eh(e,t,r){e.mnemonicIcon?.map((i,o)=>({icon:i,alt:e.mnemonicAlt[o]??"",link:e.mnemonicLink[o]??""}))?.forEach(({icon:i,alt:o,link:a})=>{if(a&&!/^https?:/.test(a))try{a=new URL(`https://${a}`).href.toString()}catch{a="#"}let s={slot:"icons",src:i,size:r?.size??"l"};o&&(s.alt=o),a&&(s.href=a);let c=de("merch-icon",s);t.append(c)})}function th(e,t){e.badge&&(t.setAttribute("badge-text",e.badge),t.setAttribute("badge-color",e.badgeColor||Wl),t.setAttribute("badge-background-color",e.badgeBackgroundColor||ql))}function rh(e,t,r){r?.includes(e.size)&&t.setAttribute("size",e.size)}function nh(e,t,r){e.cardTitle&&r&&t.append(de(r.tag,{slot:r.slot},e.cardTitle))}function ih(e,t,r){e.subtitle&&r&&t.append(de(r.tag,{slot:r.slot},e.subtitle))}function oh(e,t,r,n){if(e.backgroundImage)switch(n){case"ccd-slice":r&&t.append(de(r.tag,{slot:r.slot},``));break;case"ccd-suggested":t.setAttribute("background-image",e.backgroundImage);break}}function ah(e,t,r){if(e.prices&&r){let n=de(r.tag,{slot:r.slot},e.prices);t.append(n)}}function sh(e,t,r){if(e.description&&r){let n=de(r.tag,{slot:r.slot},e.description);t.append(n)}}function ch(e,t,r,n){n==="ccd-suggested"&&!e.className&&(e.className="primary-link");let i=Zl.exec(e.className)?.[0]??"accent",o=i.includes("accent"),a=i.includes("primary"),s=i.includes("secondary"),c=i.includes("-outline");if(i.includes("-link"))return e;let h="fill",d;o||t?d="accent":a?d="primary":s&&(d="secondary"),c&&(h="outline"),e.tabIndex=-1;let u=de("sp-button",{treatment:h,variant:d,tabIndex:0,size:r.ctas.size??"m"},e);return u.addEventListener("click",m=>{m.target!==e&&(m.stopPropagation(),e.click())}),u}function lh(e,t){return e.classList.add("con-button"),t&&e.classList.add("blue"),e}function hh(e,t,r,n){if(e.ctas){let{slot:i}=r.ctas,o=de("div",{slot:i},e.ctas),a=[...o.querySelectorAll("a")].map(s=>{let c=s.parentElement.tagName==="STRONG";return t.consonant?lh(s,c):ch(s,c,r,n)});o.innerHTML="",o.append(...a),t.append(o)}}function dh(e,t){let{tags:r}=e,n=r?.find(i=>i.startsWith(Jl))?.split("/").pop();n&&(t.setAttribute(Br,n),t.querySelectorAll("a[data-analytics-id]").forEach((i,o)=>{i.setAttribute(Ql,`${i.dataset.analyticsId}-${o+1}`)}))}async function ls(e,t){let{fields:r}=e,{variant:n}=r;if(!n)return;t.querySelectorAll("[slot]").forEach(o=>{o.remove()}),t.removeAttribute("background-image"),t.removeAttribute("badge-background-color"),t.removeAttribute("badge-color"),t.removeAttribute("badge-text"),t.removeAttribute("size"),t.removeAttribute(Br),t.variant=n,await t.updateComplete;let{aemFragmentMapping:i}=t.variantLayout;i&&(oh(r,t,i.backgroundImage,n),th(r,t),hh(r,t,i,n),sh(r,t,i.description),eh(r,t,i.mnemonics),ah(r,t,i.prices),rh(r,t,i.allowedSizes),ih(r,t,i.subtitle),nh(r,t,i.title),dh(r,t))}var uh="merch-card",mh=2e3,Di,Wt,Ui,Xt=class extends oe{constructor(){super();U(this,Wt);p(this,"customerSegment");p(this,"marketSegment");p(this,"variantLayout");U(this,Di,!1);this.filters={},this.types="",this.selected=!1,this.handleAemFragmentEvents=this.handleAemFragmentEvents.bind(this)}firstUpdated(){this.variantLayout=$i(this,!1),this.variantLayout?.connectedCallbackHook(),this.aemFragment?.updateComplete.catch(()=>{this.style.display="none"})}willUpdate(r){(r.has("variant")||!this.variantLayout)&&(this.variantLayout=$i(this),this.variantLayout.connectedCallbackHook())}updated(r){(r.has("badgeBackgroundColor")||r.has("borderColor"))&&(this.style.border=this.computedBorderStyle),this.variantLayout?.postCardUpdateHook(this)}get theme(){return this.closest("sp-theme")}get dir(){return this.closest("[dir]")?.getAttribute("dir")??"ltr"}get prices(){return Array.from(this.querySelectorAll('span[is="inline-price"][data-wcs-osi]'))}render(){if(!(!this.isConnected||!this.variantLayout||this.style.display==="none"))return this.variantLayout.renderLayout()}get computedBorderStyle(){return["twp","ccd-slice","ccd-suggested"].includes(this.variant)?"":`1px solid ${this.borderColor?this.borderColor:this.badgeBackgroundColor}`}get badgeElement(){return this.shadowRoot.getElementById("badge")}get headingmMSlot(){return this.shadowRoot.querySelector('slot[name="heading-m"]').assignedElements()[0]}get footerSlot(){return this.shadowRoot.querySelector('slot[name="footer"]')?.assignedElements()[0]}get price(){return this.headingmMSlot?.querySelector('span[is="inline-price"]')}get checkoutLinks(){return[...this.footerSlot?.querySelectorAll('a[is="checkout-link"]')??[]]}async toggleStockOffer({target:r}){if(!this.stockOfferOsis)return;let n=this.checkoutLinks;if(n.length!==0)for(let i of n){await i.onceSettled();let o=i.value?.[0]?.planType;if(!o)return;let a=this.stockOfferOsis[o];if(!a)return;let s=i.dataset.wcsOsi.split(",").filter(c=>c!==a);r.checked&&s.push(a),i.dataset.wcsOsi=s.join(",")}}handleQuantitySelection(r){let n=this.checkoutLinks;for(let i of n)i.dataset.quantity=r.detail.option}get titleElement(){return this.querySelector(this.variantLayout?.headingSelector||".card-heading")}get title(){return this.titleElement?.textContent?.trim()}get description(){return this.querySelector('[slot="body-xs"]')?.textContent?.trim()}updateFilters(r){let n={...this.filters};Object.keys(n).forEach(i=>{if(r){n[i].order=Math.min(n[i].order||2,2);return}let o=n[i].order;o===1||isNaN(o)||(n[i].order=Number(o)+1)}),this.filters=n}includes(r){return this.textContent.match(new RegExp(r,"i"))!==null}connectedCallback(){super.connectedCallback(),this.addEventListener(gr,this.handleQuantitySelection),this.addEventListener($n,this.merchCardReady,{once:!0}),this.updateComplete.then(()=>{this.merchCardReady()}),this.storageOptions?.addEventListener("change",this.handleStorageChange),this.addEventListener(Re,this.handleAemFragmentEvents),this.addEventListener(Oe,this.handleAemFragmentEvents),this.aemFragment||setTimeout(()=>this.checkReady(),0)}disconnectedCallback(){super.disconnectedCallback(),this.variantLayout.disconnectedCallbackHook(),this.removeEventListener(gr,this.handleQuantitySelection),this.storageOptions?.removeEventListener(fr,this.handleStorageChange),this.removeEventListener(Re,this.handleAemFragmentEvents),this.removeEventListener(Oe,this.handleAemFragmentEvents)}async handleAemFragmentEvents(r){if(r.type===Re&&be(this,Wt,Ui).call(this,"AEM fragment cannot be loaded"),r.type===Oe&&r.target.nodeName==="AEM-FRAGMENT"){let n=r.detail;await ls(n,this),this.checkReady()}}async checkReady(){let r=Promise.all([...this.querySelectorAll('span[is="inline-price"][data-wcs-osi],a[is="checkout-link"][data-wcs-osi]')].map(o=>o.onceSettled().catch(()=>o))).then(o=>o.every(a=>a.classList.contains("placeholder-resolved"))),n=new Promise(o=>setTimeout(()=>o(!1),mh));if(await Promise.race([r,n])===!0){this.dispatchEvent(new CustomEvent(Bn,{bubbles:!0,composed:!0}));return}be(this,Wt,Ui).call(this,"Contains unresolved offers")}get aemFragment(){return this.querySelector("aem-fragment")}get storageOptions(){return this.querySelector("sp-radio-group#storage")}get storageSpecificOfferSelect(){let r=this.storageOptions?.selected;if(r){let n=this.querySelector(`merch-offer-select[storage="${r}"]`);if(n)return n}return this.querySelector("merch-offer-select")}get offerSelect(){return this.storageOptions?this.storageSpecificOfferSelect:this.querySelector("merch-offer-select")}get quantitySelect(){return this.querySelector("merch-quantity-select")}merchCardReady(){this.offerSelect&&!this.offerSelect.planType||this.dispatchEvent(new CustomEvent(Un,{bubbles:!0}))}handleStorageChange(){let r=this.closest("merch-card")?.offerSelect.cloneNode(!0);r&&this.dispatchEvent(new CustomEvent(fr,{detail:{offerSelect:r},bubbles:!0}))}get dynamicPrice(){return this.querySelector('[slot="price"]')}selectMerchOffer(r){if(r===this.merchOffer)return;this.merchOffer=r;let n=this.dynamicPrice;if(r.price&&n){let i=r.price.cloneNode(!0);n.onceSettled?n.onceSettled().then(()=>{n.replaceWith(i)}):n.replaceWith(i)}}};Di=new WeakMap,Wt=new WeakSet,Ui=function(r){this.dispatchEvent(new CustomEvent(Gn,{detail:r,bubbles:!0,composed:!0}))},p(Xt,"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",reflect:!0},borderColor:{type:String,attribute:"border-color",reflect:!0},badgeBackgroundColor:{type:String,attribute:"badge-background-color",reflect:!0},backgroundImage:{type:String,attribute:"background-image",reflect:!0},badgeText:{type:String,attribute:"badge-text"},actionMenu:{type:Boolean,attribute:"action-menu"},customHr:{type:Boolean,attribute:"custom-hr"},consonant:{type:Boolean,attribute:"consonant"},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:r=>{let[n,i,o]=r.split(",");return{PUF:n,ABM:i,M2M:o}}}},filters:{type:String,reflect:!0,converter:{fromAttribute:r=>Object.fromEntries(r.split(",").map(n=>{let[i,o,a]=n.split(":"),s=Number(o);return[i,{order:isNaN(s)?void 0:s,size:a}]})),toAttribute:r=>Object.entries(r).map(([n,{order:i,size:o}])=>[n,i,o].filter(a=>a!=null).join(":")).join(",")}},types:{type:String,attribute:"types",reflect:!0},merchOffer:{type:Object},analyticsId:{type:String,attribute:Br,reflect:!0}}),p(Xt,"styles",[Ya,ss(),...Xa()]);customElements.define(uh,Xt);var vt=class extends oe{constructor(){super(),this.size="m",this.alt=""}render(){let{href:t}=this;return t?x` ${this.alt} `:x` ${this.alt}`}};p(vt,"properties",{size:{type:String,attribute:!0},src:{type:String,attribute:!0},alt:{type:String,attribute:!0},href:{type:String,attribute:!0}}),p(vt,"styles",I` :host { diff --git a/libs/deps/mas/merch-card.js b/libs/deps/mas/merch-card.js index d2fa6302209..3af1c0b6731 100644 --- a/libs/deps/mas/merch-card.js +++ b/libs/deps/mas/merch-card.js @@ -2007,4 +2007,4 @@ body.merch-modal { scrollbar-gutter: stable; height: 100vh; } -`;document.head.appendChild(Oe);var ot="#000000",at="#F8D904",nt=/(accent|primary|secondary)(-(outline|link))?/,ct="mas:product_code/",it="daa-ll",V="daa-lh";function st(r,t,e){r.mnemonicIcon?.map((a,n)=>({icon:a,alt:r.mnemonicAlt[n]??"",link:r.mnemonicLink[n]??""}))?.forEach(({icon:a,alt:n,link:l})=>{if(l&&!/^https?:/.test(l))try{l=new URL(`https://${l}`).href.toString()}catch{l="#"}let x={slot:"icons",src:a,size:e?.size??"l"};n&&(x.alt=n),l&&(x.href=l);let v=f("merch-icon",x);t.append(v)})}function dt(r,t){r.badge&&(t.setAttribute("badge-text",r.badge),t.setAttribute("badge-color",r.badgeColor||ot),t.setAttribute("badge-background-color",r.badgeBackgroundColor||at))}function ht(r,t,e){e?.includes(r.size)&&t.setAttribute("size",r.size)}function lt(r,t,e){r.cardTitle&&e&&t.append(f(e.tag,{slot:e.slot},r.cardTitle))}function mt(r,t,e){r.subtitle&&e&&t.append(f(e.tag,{slot:e.slot},r.subtitle))}function pt(r,t,e,o){if(r.backgroundImage)switch(o){case"ccd-slice":e&&t.append(f(e.tag,{slot:e.slot},``));break;case"ccd-suggested":t.setAttribute("background-image",r.backgroundImage);break}}function gt(r,t,e){if(r.prices&&e){let o=f(e.tag,{slot:e.slot},r.prices);t.append(o)}}function ut(r,t,e){if(r.description&&e){let o=f(e.tag,{slot:e.slot},r.description);t.append(o)}}function xt(r,t,e,o){o==="ccd-suggested"&&!r.className&&(r.className="primary-link");let a=nt.exec(r.className)?.[0]??"accent",n=a.includes("accent"),l=a.includes("primary"),x=a.includes("secondary"),v=a.includes("-outline");if(a.includes("-link"))return r;let oe="fill",$;n||t?$="accent":l?$="primary":x&&($="secondary"),v&&(oe="outline"),r.tabIndex=-1;let ae=f("sp-button",{treatment:oe,variant:$,tabIndex:0,size:e.ctas.size??"m"},r);return ae.addEventListener("click",ne=>{ne.target!==r&&(ne.stopPropagation(),r.click())}),ae}function ft(r,t){return r.classList.add("con-button"),t&&r.classList.add("blue"),r}function vt(r,t,e,o){if(r.ctas){let{slot:a}=e.ctas,n=f("div",{slot:a},r.ctas),l=[...n.querySelectorAll("a")].map(x=>{let v=x.parentElement.tagName==="STRONG";return t.consonant?ft(x,v):xt(x,v,e,o)});n.innerHTML="",n.append(...l),t.append(n)}}function bt(r,t){let{tags:e}=r,o=e?.find(a=>a.startsWith(ct))?.split("/").pop();o&&(t.setAttribute(V,o),t.querySelectorAll("a[data-analytics-id]").forEach((a,n)=>{a.setAttribute(it,`${a.dataset.analyticsId}-${n+1}`)}))}async function $e(r,t){let{fields:e}=r,{variant:o}=e;if(!o)return;t.querySelectorAll("[slot]").forEach(n=>{n.remove()}),t.removeAttribute("background-image"),t.removeAttribute("badge-background-color"),t.removeAttribute("badge-color"),t.removeAttribute("badge-text"),t.removeAttribute("size"),t.removeAttribute(V),t.variant=o,await t.updateComplete;let{aemFragmentMapping:a}=t.variantLayout;a&&(bt(e,t),pt(e,t,a.backgroundImage,o),dt(e,t),vt(e,t,a,o),ut(e,t,a.description),st(e,t,a.mnemonics),gt(e,t,a.prices),ht(e,t,a.allowedSizes),mt(e,t,a.subtitle),lt(e,t,a.title))}var d="merch-card",wt=2e3,re,O,te,s=class extends yt{constructor(){super();T(this,O);c(this,"customerSegment");c(this,"marketSegment");c(this,"variantLayout");T(this,re,!1);this.filters={},this.types="",this.selected=!1,this.handleAemFragmentEvents=this.handleAemFragmentEvents.bind(this)}firstUpdated(){this.variantLayout=ee(this,!1),this.variantLayout?.connectedCallbackHook(),this.aemFragment?.updateComplete.catch(()=>{this.style.display="none"})}willUpdate(e){(e.has("variant")||!this.variantLayout)&&(this.variantLayout=ee(this),this.variantLayout.connectedCallbackHook())}updated(e){(e.has("badgeBackgroundColor")||e.has("borderColor"))&&(this.style.border=this.computedBorderStyle),this.variantLayout?.postCardUpdateHook(this)}get theme(){return this.closest("sp-theme")}get dir(){return this.closest("[dir]")?.getAttribute("dir")??"ltr"}get prices(){return Array.from(this.querySelectorAll('span[is="inline-price"][data-wcs-osi]'))}render(){if(!(!this.isConnected||!this.variantLayout||this.style.display==="none"))return this.variantLayout.renderLayout()}get computedBorderStyle(){return["twp","ccd-slice","ccd-suggested"].includes(this.variant)?"":`1px solid ${this.borderColor?this.borderColor:this.badgeBackgroundColor}`}get badgeElement(){return this.shadowRoot.getElementById("badge")}get headingmMSlot(){return this.shadowRoot.querySelector('slot[name="heading-m"]').assignedElements()[0]}get footerSlot(){return this.shadowRoot.querySelector('slot[name="footer"]')?.assignedElements()[0]}get price(){return this.headingmMSlot?.querySelector('span[is="inline-price"]')}get checkoutLinks(){return[...this.footerSlot?.querySelectorAll('a[is="checkout-link"]')??[]]}async toggleStockOffer({target:e}){if(!this.stockOfferOsis)return;let o=this.checkoutLinks;if(o.length!==0)for(let a of o){await a.onceSettled();let n=a.value?.[0]?.planType;if(!n)return;let l=this.stockOfferOsis[n];if(!l)return;let x=a.dataset.wcsOsi.split(",").filter(v=>v!==l);e.checked&&x.push(l),a.dataset.wcsOsi=x.join(",")}}handleQuantitySelection(e){let o=this.checkoutLinks;for(let a of o)a.dataset.quantity=e.detail.option}get titleElement(){return this.querySelector(this.variantLayout?.headingSelector||".card-heading")}get title(){return this.titleElement?.textContent?.trim()}get description(){return this.querySelector('[slot="body-xs"]')?.textContent?.trim()}updateFilters(e){let o={...this.filters};Object.keys(o).forEach(a=>{if(e){o[a].order=Math.min(o[a].order||2,2);return}let n=o[a].order;n===1||isNaN(n)||(o[a].order=Number(n)+1)}),this.filters=o}includes(e){return this.textContent.match(new RegExp(e,"i"))!==null}connectedCallback(){super.connectedCallback(),this.addEventListener(W,this.handleQuantitySelection),this.addEventListener(ge,this.merchCardReady,{once:!0}),this.updateComplete.then(()=>{this.merchCardReady()}),this.storageOptions?.addEventListener("change",this.handleStorageChange),this.addEventListener(H,this.handleAemFragmentEvents),this.addEventListener(F,this.handleAemFragmentEvents),this.aemFragment||setTimeout(()=>this.checkReady(),0)}disconnectedCallback(){super.disconnectedCallback(),this.variantLayout.disconnectedCallbackHook(),this.removeEventListener(W,this.handleQuantitySelection),this.storageOptions?.removeEventListener(Y,this.handleStorageChange),this.removeEventListener(H,this.handleAemFragmentEvents),this.removeEventListener(F,this.handleAemFragmentEvents)}async handleAemFragmentEvents(e){if(e.type===H&&K(this,O,te).call(this,"AEM fragment cannot be loaded"),e.type===F&&e.target.nodeName==="AEM-FRAGMENT"){let o=e.detail;await $e(o,this),this.checkReady()}}async checkReady(){let e=Promise.all([...this.querySelectorAll('span[is="inline-price"][data-wcs-osi],a[is="checkout-link"][data-wcs-osi]')].map(n=>n.onceSettled().catch(()=>n))).then(n=>n.every(l=>l.classList.contains("placeholder-resolved"))),o=new Promise(n=>setTimeout(()=>n(!1),wt));if(await Promise.race([e,o])===!0){this.dispatchEvent(new CustomEvent(fe,{bubbles:!0,composed:!0}));return}K(this,O,te).call(this,"Contains unresolved offers")}get aemFragment(){return this.querySelector("aem-fragment")}get storageOptions(){return this.querySelector("sp-radio-group#storage")}get storageSpecificOfferSelect(){let e=this.storageOptions?.selected;if(e){let o=this.querySelector(`merch-offer-select[storage="${e}"]`);if(o)return o}return this.querySelector("merch-offer-select")}get offerSelect(){return this.storageOptions?this.storageSpecificOfferSelect:this.querySelector("merch-offer-select")}get quantitySelect(){return this.querySelector("merch-quantity-select")}merchCardReady(){this.offerSelect&&!this.offerSelect.planType||this.dispatchEvent(new CustomEvent(ue,{bubbles:!0}))}handleStorageChange(){let e=this.closest("merch-card")?.offerSelect.cloneNode(!0);e&&this.dispatchEvent(new CustomEvent(Y,{detail:{offerSelect:e},bubbles:!0}))}get dynamicPrice(){return this.querySelector('[slot="price"]')}selectMerchOffer(e){if(e===this.merchOffer)return;this.merchOffer=e;let o=this.dynamicPrice;if(e.price&&o){let a=e.price.cloneNode(!0);o.onceSettled?o.onceSettled().then(()=>{o.replaceWith(a)}):o.replaceWith(a)}}};re=new WeakMap,O=new WeakSet,te=function(e){this.dispatchEvent(new CustomEvent(ve,{detail:e,bubbles:!0,composed:!0}))},c(s,"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",reflect:!0},borderColor:{type:String,attribute:"border-color",reflect:!0},badgeBackgroundColor:{type:String,attribute:"badge-background-color",reflect:!0},backgroundImage:{type:String,attribute:"background-image",reflect:!0},badgeText:{type:String,attribute:"badge-text"},actionMenu:{type:Boolean,attribute:"action-menu"},customHr:{type:Boolean,attribute:"custom-hr"},consonant:{type:Boolean,attribute:"consonant"},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[o,a,n]=e.split(",");return{PUF:o,ABM:a,M2M:n}}}},filters:{type:String,reflect:!0,converter:{fromAttribute:e=>Object.fromEntries(e.split(",").map(o=>{let[a,n,l]=o.split(":"),x=Number(n);return[a,{order:isNaN(x)?void 0:x,size:l}]})),toAttribute:e=>Object.entries(e).map(([o,{order:a,size:n}])=>[o,a,n].filter(l=>l!=null).join(":")).join(",")}},types:{type:String,attribute:"types",reflect:!0},merchOffer:{type:Object},analyticsId:{type:String,attribute:V,reflect:!0}}),c(s,"styles",[le,Me(),...me()]);customElements.define(d,s); +`;document.head.appendChild(Oe);var ot="#000000",at="#F8D904",nt=/(accent|primary|secondary)(-(outline|link))?/,ct="mas:product_code/",it="daa-ll",V="daa-lh";function st(r,t,e){r.mnemonicIcon?.map((a,n)=>({icon:a,alt:r.mnemonicAlt[n]??"",link:r.mnemonicLink[n]??""}))?.forEach(({icon:a,alt:n,link:l})=>{if(l&&!/^https?:/.test(l))try{l=new URL(`https://${l}`).href.toString()}catch{l="#"}let x={slot:"icons",src:a,size:e?.size??"l"};n&&(x.alt=n),l&&(x.href=l);let v=f("merch-icon",x);t.append(v)})}function dt(r,t){r.badge&&(t.setAttribute("badge-text",r.badge),t.setAttribute("badge-color",r.badgeColor||ot),t.setAttribute("badge-background-color",r.badgeBackgroundColor||at))}function ht(r,t,e){e?.includes(r.size)&&t.setAttribute("size",r.size)}function lt(r,t,e){r.cardTitle&&e&&t.append(f(e.tag,{slot:e.slot},r.cardTitle))}function mt(r,t,e){r.subtitle&&e&&t.append(f(e.tag,{slot:e.slot},r.subtitle))}function pt(r,t,e,o){if(r.backgroundImage)switch(o){case"ccd-slice":e&&t.append(f(e.tag,{slot:e.slot},``));break;case"ccd-suggested":t.setAttribute("background-image",r.backgroundImage);break}}function gt(r,t,e){if(r.prices&&e){let o=f(e.tag,{slot:e.slot},r.prices);t.append(o)}}function ut(r,t,e){if(r.description&&e){let o=f(e.tag,{slot:e.slot},r.description);t.append(o)}}function xt(r,t,e,o){o==="ccd-suggested"&&!r.className&&(r.className="primary-link");let a=nt.exec(r.className)?.[0]??"accent",n=a.includes("accent"),l=a.includes("primary"),x=a.includes("secondary"),v=a.includes("-outline");if(a.includes("-link"))return r;let oe="fill",$;n||t?$="accent":l?$="primary":x&&($="secondary"),v&&(oe="outline"),r.tabIndex=-1;let ae=f("sp-button",{treatment:oe,variant:$,tabIndex:0,size:e.ctas.size??"m"},r);return ae.addEventListener("click",ne=>{ne.target!==r&&(ne.stopPropagation(),r.click())}),ae}function ft(r,t){return r.classList.add("con-button"),t&&r.classList.add("blue"),r}function vt(r,t,e,o){if(r.ctas){let{slot:a}=e.ctas,n=f("div",{slot:a},r.ctas),l=[...n.querySelectorAll("a")].map(x=>{let v=x.parentElement.tagName==="STRONG";return t.consonant?ft(x,v):xt(x,v,e,o)});n.innerHTML="",n.append(...l),t.append(n)}}function bt(r,t){let{tags:e}=r,o=e?.find(a=>a.startsWith(ct))?.split("/").pop();o&&(t.setAttribute(V,o),t.querySelectorAll("a[data-analytics-id]").forEach((a,n)=>{a.setAttribute(it,`${a.dataset.analyticsId}-${n+1}`)}))}async function $e(r,t){let{fields:e}=r,{variant:o}=e;if(!o)return;t.querySelectorAll("[slot]").forEach(n=>{n.remove()}),t.removeAttribute("background-image"),t.removeAttribute("badge-background-color"),t.removeAttribute("badge-color"),t.removeAttribute("badge-text"),t.removeAttribute("size"),t.removeAttribute(V),t.variant=o,await t.updateComplete;let{aemFragmentMapping:a}=t.variantLayout;a&&(pt(e,t,a.backgroundImage,o),dt(e,t),vt(e,t,a,o),ut(e,t,a.description),st(e,t,a.mnemonics),gt(e,t,a.prices),ht(e,t,a.allowedSizes),mt(e,t,a.subtitle),lt(e,t,a.title),bt(e,t))}var d="merch-card",wt=2e3,re,O,te,s=class extends yt{constructor(){super();T(this,O);c(this,"customerSegment");c(this,"marketSegment");c(this,"variantLayout");T(this,re,!1);this.filters={},this.types="",this.selected=!1,this.handleAemFragmentEvents=this.handleAemFragmentEvents.bind(this)}firstUpdated(){this.variantLayout=ee(this,!1),this.variantLayout?.connectedCallbackHook(),this.aemFragment?.updateComplete.catch(()=>{this.style.display="none"})}willUpdate(e){(e.has("variant")||!this.variantLayout)&&(this.variantLayout=ee(this),this.variantLayout.connectedCallbackHook())}updated(e){(e.has("badgeBackgroundColor")||e.has("borderColor"))&&(this.style.border=this.computedBorderStyle),this.variantLayout?.postCardUpdateHook(this)}get theme(){return this.closest("sp-theme")}get dir(){return this.closest("[dir]")?.getAttribute("dir")??"ltr"}get prices(){return Array.from(this.querySelectorAll('span[is="inline-price"][data-wcs-osi]'))}render(){if(!(!this.isConnected||!this.variantLayout||this.style.display==="none"))return this.variantLayout.renderLayout()}get computedBorderStyle(){return["twp","ccd-slice","ccd-suggested"].includes(this.variant)?"":`1px solid ${this.borderColor?this.borderColor:this.badgeBackgroundColor}`}get badgeElement(){return this.shadowRoot.getElementById("badge")}get headingmMSlot(){return this.shadowRoot.querySelector('slot[name="heading-m"]').assignedElements()[0]}get footerSlot(){return this.shadowRoot.querySelector('slot[name="footer"]')?.assignedElements()[0]}get price(){return this.headingmMSlot?.querySelector('span[is="inline-price"]')}get checkoutLinks(){return[...this.footerSlot?.querySelectorAll('a[is="checkout-link"]')??[]]}async toggleStockOffer({target:e}){if(!this.stockOfferOsis)return;let o=this.checkoutLinks;if(o.length!==0)for(let a of o){await a.onceSettled();let n=a.value?.[0]?.planType;if(!n)return;let l=this.stockOfferOsis[n];if(!l)return;let x=a.dataset.wcsOsi.split(",").filter(v=>v!==l);e.checked&&x.push(l),a.dataset.wcsOsi=x.join(",")}}handleQuantitySelection(e){let o=this.checkoutLinks;for(let a of o)a.dataset.quantity=e.detail.option}get titleElement(){return this.querySelector(this.variantLayout?.headingSelector||".card-heading")}get title(){return this.titleElement?.textContent?.trim()}get description(){return this.querySelector('[slot="body-xs"]')?.textContent?.trim()}updateFilters(e){let o={...this.filters};Object.keys(o).forEach(a=>{if(e){o[a].order=Math.min(o[a].order||2,2);return}let n=o[a].order;n===1||isNaN(n)||(o[a].order=Number(n)+1)}),this.filters=o}includes(e){return this.textContent.match(new RegExp(e,"i"))!==null}connectedCallback(){super.connectedCallback(),this.addEventListener(W,this.handleQuantitySelection),this.addEventListener(ge,this.merchCardReady,{once:!0}),this.updateComplete.then(()=>{this.merchCardReady()}),this.storageOptions?.addEventListener("change",this.handleStorageChange),this.addEventListener(H,this.handleAemFragmentEvents),this.addEventListener(F,this.handleAemFragmentEvents),this.aemFragment||setTimeout(()=>this.checkReady(),0)}disconnectedCallback(){super.disconnectedCallback(),this.variantLayout.disconnectedCallbackHook(),this.removeEventListener(W,this.handleQuantitySelection),this.storageOptions?.removeEventListener(Y,this.handleStorageChange),this.removeEventListener(H,this.handleAemFragmentEvents),this.removeEventListener(F,this.handleAemFragmentEvents)}async handleAemFragmentEvents(e){if(e.type===H&&K(this,O,te).call(this,"AEM fragment cannot be loaded"),e.type===F&&e.target.nodeName==="AEM-FRAGMENT"){let o=e.detail;await $e(o,this),this.checkReady()}}async checkReady(){let e=Promise.all([...this.querySelectorAll('span[is="inline-price"][data-wcs-osi],a[is="checkout-link"][data-wcs-osi]')].map(n=>n.onceSettled().catch(()=>n))).then(n=>n.every(l=>l.classList.contains("placeholder-resolved"))),o=new Promise(n=>setTimeout(()=>n(!1),wt));if(await Promise.race([e,o])===!0){this.dispatchEvent(new CustomEvent(fe,{bubbles:!0,composed:!0}));return}K(this,O,te).call(this,"Contains unresolved offers")}get aemFragment(){return this.querySelector("aem-fragment")}get storageOptions(){return this.querySelector("sp-radio-group#storage")}get storageSpecificOfferSelect(){let e=this.storageOptions?.selected;if(e){let o=this.querySelector(`merch-offer-select[storage="${e}"]`);if(o)return o}return this.querySelector("merch-offer-select")}get offerSelect(){return this.storageOptions?this.storageSpecificOfferSelect:this.querySelector("merch-offer-select")}get quantitySelect(){return this.querySelector("merch-quantity-select")}merchCardReady(){this.offerSelect&&!this.offerSelect.planType||this.dispatchEvent(new CustomEvent(ue,{bubbles:!0}))}handleStorageChange(){let e=this.closest("merch-card")?.offerSelect.cloneNode(!0);e&&this.dispatchEvent(new CustomEvent(Y,{detail:{offerSelect:e},bubbles:!0}))}get dynamicPrice(){return this.querySelector('[slot="price"]')}selectMerchOffer(e){if(e===this.merchOffer)return;this.merchOffer=e;let o=this.dynamicPrice;if(e.price&&o){let a=e.price.cloneNode(!0);o.onceSettled?o.onceSettled().then(()=>{o.replaceWith(a)}):o.replaceWith(a)}}};re=new WeakMap,O=new WeakSet,te=function(e){this.dispatchEvent(new CustomEvent(ve,{detail:e,bubbles:!0,composed:!0}))},c(s,"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",reflect:!0},borderColor:{type:String,attribute:"border-color",reflect:!0},badgeBackgroundColor:{type:String,attribute:"badge-background-color",reflect:!0},backgroundImage:{type:String,attribute:"background-image",reflect:!0},badgeText:{type:String,attribute:"badge-text"},actionMenu:{type:Boolean,attribute:"action-menu"},customHr:{type:Boolean,attribute:"custom-hr"},consonant:{type:Boolean,attribute:"consonant"},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[o,a,n]=e.split(",");return{PUF:o,ABM:a,M2M:n}}}},filters:{type:String,reflect:!0,converter:{fromAttribute:e=>Object.fromEntries(e.split(",").map(o=>{let[a,n,l]=o.split(":"),x=Number(n);return[a,{order:isNaN(x)?void 0:x,size:l}]})),toAttribute:e=>Object.entries(e).map(([o,{order:a,size:n}])=>[o,a,n].filter(l=>l!=null).join(":")).join(",")}},types:{type:String,attribute:"types",reflect:!0},merchOffer:{type:Object},analyticsId:{type:String,attribute:V,reflect:!0}}),c(s,"styles",[le,Me(),...me()]);customElements.define(d,s); diff --git a/libs/features/mas/dist/mas.js b/libs/features/mas/dist/mas.js index a2711dc2448..ce447b50e80 100644 --- a/libs/features/mas/dist/mas.js +++ b/libs/features/mas/dist/mas.js @@ -1983,7 +1983,7 @@ body.merch-modal { scrollbar-gutter: stable; height: 100vh; } -`;document.head.appendChild(cs);var Wl="#000000",ql="#F8D904",Zl=/(accent|primary|secondary)(-(outline|link))?/,Jl="mas:product_code/",Ql="daa-ll",Br="daa-lh";function eh(e,t,r){e.mnemonicIcon?.map((i,o)=>({icon:i,alt:e.mnemonicAlt[o]??"",link:e.mnemonicLink[o]??""}))?.forEach(({icon:i,alt:o,link:a})=>{if(a&&!/^https?:/.test(a))try{a=new URL(`https://${a}`).href.toString()}catch{a="#"}let s={slot:"icons",src:i,size:r?.size??"l"};o&&(s.alt=o),a&&(s.href=a);let c=de("merch-icon",s);t.append(c)})}function th(e,t){e.badge&&(t.setAttribute("badge-text",e.badge),t.setAttribute("badge-color",e.badgeColor||Wl),t.setAttribute("badge-background-color",e.badgeBackgroundColor||ql))}function rh(e,t,r){r?.includes(e.size)&&t.setAttribute("size",e.size)}function nh(e,t,r){e.cardTitle&&r&&t.append(de(r.tag,{slot:r.slot},e.cardTitle))}function ih(e,t,r){e.subtitle&&r&&t.append(de(r.tag,{slot:r.slot},e.subtitle))}function oh(e,t,r,n){if(e.backgroundImage)switch(n){case"ccd-slice":r&&t.append(de(r.tag,{slot:r.slot},``));break;case"ccd-suggested":t.setAttribute("background-image",e.backgroundImage);break}}function ah(e,t,r){if(e.prices&&r){let n=de(r.tag,{slot:r.slot},e.prices);t.append(n)}}function sh(e,t,r){if(e.description&&r){let n=de(r.tag,{slot:r.slot},e.description);t.append(n)}}function ch(e,t,r,n){n==="ccd-suggested"&&!e.className&&(e.className="primary-link");let i=Zl.exec(e.className)?.[0]??"accent",o=i.includes("accent"),a=i.includes("primary"),s=i.includes("secondary"),c=i.includes("-outline");if(i.includes("-link"))return e;let h="fill",d;o||t?d="accent":a?d="primary":s&&(d="secondary"),c&&(h="outline"),e.tabIndex=-1;let u=de("sp-button",{treatment:h,variant:d,tabIndex:0,size:r.ctas.size??"m"},e);return u.addEventListener("click",m=>{m.target!==e&&(m.stopPropagation(),e.click())}),u}function lh(e,t){return e.classList.add("con-button"),t&&e.classList.add("blue"),e}function hh(e,t,r,n){if(e.ctas){let{slot:i}=r.ctas,o=de("div",{slot:i},e.ctas),a=[...o.querySelectorAll("a")].map(s=>{let c=s.parentElement.tagName==="STRONG";return t.consonant?lh(s,c):ch(s,c,r,n)});o.innerHTML="",o.append(...a),t.append(o)}}function dh(e,t){let{tags:r}=e,n=r?.find(i=>i.startsWith(Jl))?.split("/").pop();n&&(t.setAttribute(Br,n),t.querySelectorAll("a[data-analytics-id]").forEach((i,o)=>{i.setAttribute(Ql,`${i.dataset.analyticsId}-${o+1}`)}))}async function ls(e,t){let{fields:r}=e,{variant:n}=r;if(!n)return;t.querySelectorAll("[slot]").forEach(o=>{o.remove()}),t.removeAttribute("background-image"),t.removeAttribute("badge-background-color"),t.removeAttribute("badge-color"),t.removeAttribute("badge-text"),t.removeAttribute("size"),t.removeAttribute(Br),t.variant=n,await t.updateComplete;let{aemFragmentMapping:i}=t.variantLayout;i&&(dh(r,t),oh(r,t,i.backgroundImage,n),th(r,t),hh(r,t,i,n),sh(r,t,i.description),eh(r,t,i.mnemonics),ah(r,t,i.prices),rh(r,t,i.allowedSizes),ih(r,t,i.subtitle),nh(r,t,i.title))}var uh="merch-card",mh=2e3,Di,Wt,Ui,Xt=class extends oe{constructor(){super();U(this,Wt);p(this,"customerSegment");p(this,"marketSegment");p(this,"variantLayout");U(this,Di,!1);this.filters={},this.types="",this.selected=!1,this.handleAemFragmentEvents=this.handleAemFragmentEvents.bind(this)}firstUpdated(){this.variantLayout=$i(this,!1),this.variantLayout?.connectedCallbackHook(),this.aemFragment?.updateComplete.catch(()=>{this.style.display="none"})}willUpdate(r){(r.has("variant")||!this.variantLayout)&&(this.variantLayout=$i(this),this.variantLayout.connectedCallbackHook())}updated(r){(r.has("badgeBackgroundColor")||r.has("borderColor"))&&(this.style.border=this.computedBorderStyle),this.variantLayout?.postCardUpdateHook(this)}get theme(){return this.closest("sp-theme")}get dir(){return this.closest("[dir]")?.getAttribute("dir")??"ltr"}get prices(){return Array.from(this.querySelectorAll('span[is="inline-price"][data-wcs-osi]'))}render(){if(!(!this.isConnected||!this.variantLayout||this.style.display==="none"))return this.variantLayout.renderLayout()}get computedBorderStyle(){return["twp","ccd-slice","ccd-suggested"].includes(this.variant)?"":`1px solid ${this.borderColor?this.borderColor:this.badgeBackgroundColor}`}get badgeElement(){return this.shadowRoot.getElementById("badge")}get headingmMSlot(){return this.shadowRoot.querySelector('slot[name="heading-m"]').assignedElements()[0]}get footerSlot(){return this.shadowRoot.querySelector('slot[name="footer"]')?.assignedElements()[0]}get price(){return this.headingmMSlot?.querySelector('span[is="inline-price"]')}get checkoutLinks(){return[...this.footerSlot?.querySelectorAll('a[is="checkout-link"]')??[]]}async toggleStockOffer({target:r}){if(!this.stockOfferOsis)return;let n=this.checkoutLinks;if(n.length!==0)for(let i of n){await i.onceSettled();let o=i.value?.[0]?.planType;if(!o)return;let a=this.stockOfferOsis[o];if(!a)return;let s=i.dataset.wcsOsi.split(",").filter(c=>c!==a);r.checked&&s.push(a),i.dataset.wcsOsi=s.join(",")}}handleQuantitySelection(r){let n=this.checkoutLinks;for(let i of n)i.dataset.quantity=r.detail.option}get titleElement(){return this.querySelector(this.variantLayout?.headingSelector||".card-heading")}get title(){return this.titleElement?.textContent?.trim()}get description(){return this.querySelector('[slot="body-xs"]')?.textContent?.trim()}updateFilters(r){let n={...this.filters};Object.keys(n).forEach(i=>{if(r){n[i].order=Math.min(n[i].order||2,2);return}let o=n[i].order;o===1||isNaN(o)||(n[i].order=Number(o)+1)}),this.filters=n}includes(r){return this.textContent.match(new RegExp(r,"i"))!==null}connectedCallback(){super.connectedCallback(),this.addEventListener(gr,this.handleQuantitySelection),this.addEventListener($n,this.merchCardReady,{once:!0}),this.updateComplete.then(()=>{this.merchCardReady()}),this.storageOptions?.addEventListener("change",this.handleStorageChange),this.addEventListener(Re,this.handleAemFragmentEvents),this.addEventListener(Oe,this.handleAemFragmentEvents),this.aemFragment||setTimeout(()=>this.checkReady(),0)}disconnectedCallback(){super.disconnectedCallback(),this.variantLayout.disconnectedCallbackHook(),this.removeEventListener(gr,this.handleQuantitySelection),this.storageOptions?.removeEventListener(fr,this.handleStorageChange),this.removeEventListener(Re,this.handleAemFragmentEvents),this.removeEventListener(Oe,this.handleAemFragmentEvents)}async handleAemFragmentEvents(r){if(r.type===Re&&be(this,Wt,Ui).call(this,"AEM fragment cannot be loaded"),r.type===Oe&&r.target.nodeName==="AEM-FRAGMENT"){let n=r.detail;await ls(n,this),this.checkReady()}}async checkReady(){let r=Promise.all([...this.querySelectorAll('span[is="inline-price"][data-wcs-osi],a[is="checkout-link"][data-wcs-osi]')].map(o=>o.onceSettled().catch(()=>o))).then(o=>o.every(a=>a.classList.contains("placeholder-resolved"))),n=new Promise(o=>setTimeout(()=>o(!1),mh));if(await Promise.race([r,n])===!0){this.dispatchEvent(new CustomEvent(Bn,{bubbles:!0,composed:!0}));return}be(this,Wt,Ui).call(this,"Contains unresolved offers")}get aemFragment(){return this.querySelector("aem-fragment")}get storageOptions(){return this.querySelector("sp-radio-group#storage")}get storageSpecificOfferSelect(){let r=this.storageOptions?.selected;if(r){let n=this.querySelector(`merch-offer-select[storage="${r}"]`);if(n)return n}return this.querySelector("merch-offer-select")}get offerSelect(){return this.storageOptions?this.storageSpecificOfferSelect:this.querySelector("merch-offer-select")}get quantitySelect(){return this.querySelector("merch-quantity-select")}merchCardReady(){this.offerSelect&&!this.offerSelect.planType||this.dispatchEvent(new CustomEvent(Un,{bubbles:!0}))}handleStorageChange(){let r=this.closest("merch-card")?.offerSelect.cloneNode(!0);r&&this.dispatchEvent(new CustomEvent(fr,{detail:{offerSelect:r},bubbles:!0}))}get dynamicPrice(){return this.querySelector('[slot="price"]')}selectMerchOffer(r){if(r===this.merchOffer)return;this.merchOffer=r;let n=this.dynamicPrice;if(r.price&&n){let i=r.price.cloneNode(!0);n.onceSettled?n.onceSettled().then(()=>{n.replaceWith(i)}):n.replaceWith(i)}}};Di=new WeakMap,Wt=new WeakSet,Ui=function(r){this.dispatchEvent(new CustomEvent(Gn,{detail:r,bubbles:!0,composed:!0}))},p(Xt,"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",reflect:!0},borderColor:{type:String,attribute:"border-color",reflect:!0},badgeBackgroundColor:{type:String,attribute:"badge-background-color",reflect:!0},backgroundImage:{type:String,attribute:"background-image",reflect:!0},badgeText:{type:String,attribute:"badge-text"},actionMenu:{type:Boolean,attribute:"action-menu"},customHr:{type:Boolean,attribute:"custom-hr"},consonant:{type:Boolean,attribute:"consonant"},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:r=>{let[n,i,o]=r.split(",");return{PUF:n,ABM:i,M2M:o}}}},filters:{type:String,reflect:!0,converter:{fromAttribute:r=>Object.fromEntries(r.split(",").map(n=>{let[i,o,a]=n.split(":"),s=Number(o);return[i,{order:isNaN(s)?void 0:s,size:a}]})),toAttribute:r=>Object.entries(r).map(([n,{order:i,size:o}])=>[n,i,o].filter(a=>a!=null).join(":")).join(",")}},types:{type:String,attribute:"types",reflect:!0},merchOffer:{type:Object},analyticsId:{type:String,attribute:Br,reflect:!0}}),p(Xt,"styles",[Ya,ss(),...Xa()]);customElements.define(uh,Xt);var vt=class extends oe{constructor(){super(),this.size="m",this.alt=""}render(){let{href:t}=this;return t?x` +`;document.head.appendChild(cs);var Wl="#000000",ql="#F8D904",Zl=/(accent|primary|secondary)(-(outline|link))?/,Jl="mas:product_code/",Ql="daa-ll",Br="daa-lh";function eh(e,t,r){e.mnemonicIcon?.map((i,o)=>({icon:i,alt:e.mnemonicAlt[o]??"",link:e.mnemonicLink[o]??""}))?.forEach(({icon:i,alt:o,link:a})=>{if(a&&!/^https?:/.test(a))try{a=new URL(`https://${a}`).href.toString()}catch{a="#"}let s={slot:"icons",src:i,size:r?.size??"l"};o&&(s.alt=o),a&&(s.href=a);let c=de("merch-icon",s);t.append(c)})}function th(e,t){e.badge&&(t.setAttribute("badge-text",e.badge),t.setAttribute("badge-color",e.badgeColor||Wl),t.setAttribute("badge-background-color",e.badgeBackgroundColor||ql))}function rh(e,t,r){r?.includes(e.size)&&t.setAttribute("size",e.size)}function nh(e,t,r){e.cardTitle&&r&&t.append(de(r.tag,{slot:r.slot},e.cardTitle))}function ih(e,t,r){e.subtitle&&r&&t.append(de(r.tag,{slot:r.slot},e.subtitle))}function oh(e,t,r,n){if(e.backgroundImage)switch(n){case"ccd-slice":r&&t.append(de(r.tag,{slot:r.slot},``));break;case"ccd-suggested":t.setAttribute("background-image",e.backgroundImage);break}}function ah(e,t,r){if(e.prices&&r){let n=de(r.tag,{slot:r.slot},e.prices);t.append(n)}}function sh(e,t,r){if(e.description&&r){let n=de(r.tag,{slot:r.slot},e.description);t.append(n)}}function ch(e,t,r,n){n==="ccd-suggested"&&!e.className&&(e.className="primary-link");let i=Zl.exec(e.className)?.[0]??"accent",o=i.includes("accent"),a=i.includes("primary"),s=i.includes("secondary"),c=i.includes("-outline");if(i.includes("-link"))return e;let h="fill",d;o||t?d="accent":a?d="primary":s&&(d="secondary"),c&&(h="outline"),e.tabIndex=-1;let u=de("sp-button",{treatment:h,variant:d,tabIndex:0,size:r.ctas.size??"m"},e);return u.addEventListener("click",m=>{m.target!==e&&(m.stopPropagation(),e.click())}),u}function lh(e,t){return e.classList.add("con-button"),t&&e.classList.add("blue"),e}function hh(e,t,r,n){if(e.ctas){let{slot:i}=r.ctas,o=de("div",{slot:i},e.ctas),a=[...o.querySelectorAll("a")].map(s=>{let c=s.parentElement.tagName==="STRONG";return t.consonant?lh(s,c):ch(s,c,r,n)});o.innerHTML="",o.append(...a),t.append(o)}}function dh(e,t){let{tags:r}=e,n=r?.find(i=>i.startsWith(Jl))?.split("/").pop();n&&(t.setAttribute(Br,n),t.querySelectorAll("a[data-analytics-id]").forEach((i,o)=>{i.setAttribute(Ql,`${i.dataset.analyticsId}-${o+1}`)}))}async function ls(e,t){let{fields:r}=e,{variant:n}=r;if(!n)return;t.querySelectorAll("[slot]").forEach(o=>{o.remove()}),t.removeAttribute("background-image"),t.removeAttribute("badge-background-color"),t.removeAttribute("badge-color"),t.removeAttribute("badge-text"),t.removeAttribute("size"),t.removeAttribute(Br),t.variant=n,await t.updateComplete;let{aemFragmentMapping:i}=t.variantLayout;i&&(oh(r,t,i.backgroundImage,n),th(r,t),hh(r,t,i,n),sh(r,t,i.description),eh(r,t,i.mnemonics),ah(r,t,i.prices),rh(r,t,i.allowedSizes),ih(r,t,i.subtitle),nh(r,t,i.title),dh(r,t))}var uh="merch-card",mh=2e3,Di,Wt,Ui,Xt=class extends oe{constructor(){super();U(this,Wt);p(this,"customerSegment");p(this,"marketSegment");p(this,"variantLayout");U(this,Di,!1);this.filters={},this.types="",this.selected=!1,this.handleAemFragmentEvents=this.handleAemFragmentEvents.bind(this)}firstUpdated(){this.variantLayout=$i(this,!1),this.variantLayout?.connectedCallbackHook(),this.aemFragment?.updateComplete.catch(()=>{this.style.display="none"})}willUpdate(r){(r.has("variant")||!this.variantLayout)&&(this.variantLayout=$i(this),this.variantLayout.connectedCallbackHook())}updated(r){(r.has("badgeBackgroundColor")||r.has("borderColor"))&&(this.style.border=this.computedBorderStyle),this.variantLayout?.postCardUpdateHook(this)}get theme(){return this.closest("sp-theme")}get dir(){return this.closest("[dir]")?.getAttribute("dir")??"ltr"}get prices(){return Array.from(this.querySelectorAll('span[is="inline-price"][data-wcs-osi]'))}render(){if(!(!this.isConnected||!this.variantLayout||this.style.display==="none"))return this.variantLayout.renderLayout()}get computedBorderStyle(){return["twp","ccd-slice","ccd-suggested"].includes(this.variant)?"":`1px solid ${this.borderColor?this.borderColor:this.badgeBackgroundColor}`}get badgeElement(){return this.shadowRoot.getElementById("badge")}get headingmMSlot(){return this.shadowRoot.querySelector('slot[name="heading-m"]').assignedElements()[0]}get footerSlot(){return this.shadowRoot.querySelector('slot[name="footer"]')?.assignedElements()[0]}get price(){return this.headingmMSlot?.querySelector('span[is="inline-price"]')}get checkoutLinks(){return[...this.footerSlot?.querySelectorAll('a[is="checkout-link"]')??[]]}async toggleStockOffer({target:r}){if(!this.stockOfferOsis)return;let n=this.checkoutLinks;if(n.length!==0)for(let i of n){await i.onceSettled();let o=i.value?.[0]?.planType;if(!o)return;let a=this.stockOfferOsis[o];if(!a)return;let s=i.dataset.wcsOsi.split(",").filter(c=>c!==a);r.checked&&s.push(a),i.dataset.wcsOsi=s.join(",")}}handleQuantitySelection(r){let n=this.checkoutLinks;for(let i of n)i.dataset.quantity=r.detail.option}get titleElement(){return this.querySelector(this.variantLayout?.headingSelector||".card-heading")}get title(){return this.titleElement?.textContent?.trim()}get description(){return this.querySelector('[slot="body-xs"]')?.textContent?.trim()}updateFilters(r){let n={...this.filters};Object.keys(n).forEach(i=>{if(r){n[i].order=Math.min(n[i].order||2,2);return}let o=n[i].order;o===1||isNaN(o)||(n[i].order=Number(o)+1)}),this.filters=n}includes(r){return this.textContent.match(new RegExp(r,"i"))!==null}connectedCallback(){super.connectedCallback(),this.addEventListener(gr,this.handleQuantitySelection),this.addEventListener($n,this.merchCardReady,{once:!0}),this.updateComplete.then(()=>{this.merchCardReady()}),this.storageOptions?.addEventListener("change",this.handleStorageChange),this.addEventListener(Re,this.handleAemFragmentEvents),this.addEventListener(Oe,this.handleAemFragmentEvents),this.aemFragment||setTimeout(()=>this.checkReady(),0)}disconnectedCallback(){super.disconnectedCallback(),this.variantLayout.disconnectedCallbackHook(),this.removeEventListener(gr,this.handleQuantitySelection),this.storageOptions?.removeEventListener(fr,this.handleStorageChange),this.removeEventListener(Re,this.handleAemFragmentEvents),this.removeEventListener(Oe,this.handleAemFragmentEvents)}async handleAemFragmentEvents(r){if(r.type===Re&&be(this,Wt,Ui).call(this,"AEM fragment cannot be loaded"),r.type===Oe&&r.target.nodeName==="AEM-FRAGMENT"){let n=r.detail;await ls(n,this),this.checkReady()}}async checkReady(){let r=Promise.all([...this.querySelectorAll('span[is="inline-price"][data-wcs-osi],a[is="checkout-link"][data-wcs-osi]')].map(o=>o.onceSettled().catch(()=>o))).then(o=>o.every(a=>a.classList.contains("placeholder-resolved"))),n=new Promise(o=>setTimeout(()=>o(!1),mh));if(await Promise.race([r,n])===!0){this.dispatchEvent(new CustomEvent(Bn,{bubbles:!0,composed:!0}));return}be(this,Wt,Ui).call(this,"Contains unresolved offers")}get aemFragment(){return this.querySelector("aem-fragment")}get storageOptions(){return this.querySelector("sp-radio-group#storage")}get storageSpecificOfferSelect(){let r=this.storageOptions?.selected;if(r){let n=this.querySelector(`merch-offer-select[storage="${r}"]`);if(n)return n}return this.querySelector("merch-offer-select")}get offerSelect(){return this.storageOptions?this.storageSpecificOfferSelect:this.querySelector("merch-offer-select")}get quantitySelect(){return this.querySelector("merch-quantity-select")}merchCardReady(){this.offerSelect&&!this.offerSelect.planType||this.dispatchEvent(new CustomEvent(Un,{bubbles:!0}))}handleStorageChange(){let r=this.closest("merch-card")?.offerSelect.cloneNode(!0);r&&this.dispatchEvent(new CustomEvent(fr,{detail:{offerSelect:r},bubbles:!0}))}get dynamicPrice(){return this.querySelector('[slot="price"]')}selectMerchOffer(r){if(r===this.merchOffer)return;this.merchOffer=r;let n=this.dynamicPrice;if(r.price&&n){let i=r.price.cloneNode(!0);n.onceSettled?n.onceSettled().then(()=>{n.replaceWith(i)}):n.replaceWith(i)}}};Di=new WeakMap,Wt=new WeakSet,Ui=function(r){this.dispatchEvent(new CustomEvent(Gn,{detail:r,bubbles:!0,composed:!0}))},p(Xt,"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",reflect:!0},borderColor:{type:String,attribute:"border-color",reflect:!0},badgeBackgroundColor:{type:String,attribute:"badge-background-color",reflect:!0},backgroundImage:{type:String,attribute:"background-image",reflect:!0},badgeText:{type:String,attribute:"badge-text"},actionMenu:{type:Boolean,attribute:"action-menu"},customHr:{type:Boolean,attribute:"custom-hr"},consonant:{type:Boolean,attribute:"consonant"},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:r=>{let[n,i,o]=r.split(",");return{PUF:n,ABM:i,M2M:o}}}},filters:{type:String,reflect:!0,converter:{fromAttribute:r=>Object.fromEntries(r.split(",").map(n=>{let[i,o,a]=n.split(":"),s=Number(o);return[i,{order:isNaN(s)?void 0:s,size:a}]})),toAttribute:r=>Object.entries(r).map(([n,{order:i,size:o}])=>[n,i,o].filter(a=>a!=null).join(":")).join(",")}},types:{type:String,attribute:"types",reflect:!0},merchOffer:{type:Object},analyticsId:{type:String,attribute:Br,reflect:!0}}),p(Xt,"styles",[Ya,ss(),...Xa()]);customElements.define(uh,Xt);var vt=class extends oe{constructor(){super(),this.size="m",this.alt=""}render(){let{href:t}=this;return t?x` ${this.alt} `:x` ${this.alt}`}};p(vt,"properties",{size:{type:String,attribute:!0},src:{type:String,attribute:!0},alt:{type:String,attribute:!0},href:{type:String,attribute:!0}}),p(vt,"styles",I` :host { diff --git a/libs/features/mas/docs/checkout-link.html b/libs/features/mas/docs/checkout-link.html index 5ce535d45ff..a3df1d62740 100644 --- a/libs/features/mas/docs/checkout-link.html +++ b/libs/features/mas/docs/checkout-link.html @@ -64,6 +64,7 @@

Attributes Attributes workflow step to land on the unified checkout page email false +mas.js data-extra-options additional query params to append to the url, see: Table of public query params {} false +mas.js data-ims-country the ims country to code of the user if signed in, overrides the locale country in the generated checkout url false +mas.js or consumer code data-perpetual whether this is a perpetual offer true|false false +mas.js data-promotion-code Flex promotion code, if applicable false +mas.js data-quantity Quantity of the offer to purchase 1 false +mas.js or consumer code data-entitlement entitlement flag for client side interpretation false false +mas.js data-upgrade upgrade flag for client side interpretation false false +mas.js data-modal modal flag for client side interpretation false false +mas.js + + +data-analytics-id +human-readable, non-translatable link id for analytics. Authored in Studio in Link Editor. +false +false +mas.js + + +daa-ll +martech-compatible link id for analytics. Format: ‘${data-analytics-id}-${#}’, where # is the position of the link within a card. E.g. : see-terms-1, buy-now-2 +false +false +mas.js diff --git a/libs/features/mas/docs/merch-card.html b/libs/features/mas/docs/merch-card.html index 5545bf05c1f..44909d395c4 100644 --- a/libs/features/mas/docs/merch-card.html +++ b/libs/features/mas/docs/merch-card.html @@ -123,6 +123,7 @@

Attributes Attributes Attributes Attributes Click me', }; - processCTAs(fragment, merchCard, aemFragmentMapping); + processCTAs(fields, merchCard, aemFragmentMapping); const appendCall = merchCard.append.firstCall; expect(appendCall).to.exist; @@ -132,13 +134,13 @@ describe('processCTAs', async () => { }); it('should create consonant buttons when merchCard.consonant is true', async () => { - // when a merch-card with a fragment is rendered in a Milo page. + // when a merch-card with a fields is rendered in a Milo page. merchCard.consonant = true; - const fragment = { + const fields = { ctas: 'Click me', }; - processCTAs(fragment, merchCard, aemFragmentMapping); + processCTAs(fields, merchCard, aemFragmentMapping); const appendCall = merchCard.append.firstCall; expect(appendCall).to.exist; @@ -150,7 +152,7 @@ describe('processCTAs', async () => { }); it('should handle multiple CTAs', async () => { - const fragment = { + const fields = { ctas: ` Accent Primary @@ -158,7 +160,7 @@ describe('processCTAs', async () => { `, }; - processCTAs(fragment, merchCard, aemFragmentMapping); + processCTAs(fields, merchCard, aemFragmentMapping); const footer = merchCard.append.firstCall.args[0]; const buttons = footer.children; @@ -170,11 +172,11 @@ describe('processCTAs', async () => { }); it('should handle strong wrapped CTAs', async () => { - const fragment = { + const fields = { ctas: 'Strong CTA', }; - processCTAs(fragment, merchCard, aemFragmentMapping); + processCTAs(fields, merchCard, aemFragmentMapping); const footer = merchCard.append.firstCall.args[0]; const button = footer.firstChild; @@ -182,11 +184,11 @@ describe('processCTAs', async () => { }); it('should handle outline CTAs', async () => { - const fragment = { + const fields = { ctas: 'Outline CTA', }; - processCTAs(fragment, merchCard, aemFragmentMapping); + processCTAs(fields, merchCard, aemFragmentMapping); const footer = merchCard.append.firstCall.args[0]; const button = footer.firstChild; @@ -195,12 +197,12 @@ describe('processCTAs', async () => { }); it('should handle link-style CTAs', async () => { - const fragment = { + const fields = { ctas: `Link Style Link Style`, }; - processCTAs(fragment, merchCard, aemFragmentMapping, 'ccd-suggested'); + processCTAs(fields, merchCard, aemFragmentMapping, 'ccd-suggested'); const footer = merchCard.append.firstCall.args[0]; const link = footer.firstChild; @@ -209,11 +211,11 @@ describe('processCTAs', async () => { }); it('should handle click events on spectrum buttons', async () => { - const fragment = { + const fields = { ctas: 'Click me', }; - processCTAs(fragment, merchCard, aemFragmentMapping); + processCTAs(fields, merchCard, aemFragmentMapping); const footer = merchCard.append.firstCall.args[0]; const button = footer.firstChild; @@ -252,31 +254,31 @@ describe('processSubtitle', () => { sinon.restore(); }); - it('should not append subtitle when fragment.subtitle is falsy', () => { - const fragment = { subtitle: null }; + it('should not append subtitle when fields.subtitle is falsy', () => { + const fields = { subtitle: null }; const subtitleConfig = { tag: 'h3', slot: 'subtitle' }; - processSubtitle(fragment, merchCard, subtitleConfig); + processSubtitle(fields, merchCard, subtitleConfig); expect(merchCard.append.called).to.be.false; expect(merchCard.outerHTML).to.equal('
'); }); it('should not append subtitle when subtitleConfig is falsy', () => { - const fragment = { subtitle: 'Test Subtitle' }; + const fields = { subtitle: 'Test Subtitle' }; const subtitleConfig = null; - processSubtitle(fragment, merchCard, subtitleConfig); + processSubtitle(fields, merchCard, subtitleConfig); expect(merchCard.append.called).to.be.false; expect(merchCard.outerHTML).to.equal('
'); }); it('should append subtitle with correct tag and slot', () => { - const fragment = { subtitle: 'Test Subtitle' }; + const fields = { subtitle: 'Test Subtitle' }; const subtitleConfig = { tag: 'h3', slot: 'subtitle' }; - processSubtitle(fragment, merchCard, subtitleConfig); + processSubtitle(fields, merchCard, subtitleConfig); expect(merchCard.outerHTML).to.equal( '

Test Subtitle

', @@ -295,13 +297,13 @@ describe('processBackgroundImage', () => { sinon.restore(); }); - it('should not process background image when fragment.backgroundImage is falsy', () => { - const fragment = { backgroundImage: null }; + it('should not process background image when fields.backgroundImage is falsy', () => { + const fields = { backgroundImage: null }; const backgroundImageConfig = { tag: 'div', slot: 'background' }; const variant = 'ccd-slice'; processBackgroundImage( - fragment, + fields, merchCard, backgroundImageConfig, variant, @@ -312,12 +314,12 @@ describe('processBackgroundImage', () => { }); it('should append background image for ccd-slice variant', () => { - const fragment = { backgroundImage: 'test-image.jpg' }; + const fields = { backgroundImage: 'test-image.jpg' }; const backgroundImageConfig = { tag: 'div', slot: 'background' }; const variant = 'ccd-slice'; processBackgroundImage( - fragment, + fields, merchCard, backgroundImageConfig, variant, @@ -329,12 +331,12 @@ describe('processBackgroundImage', () => { }); it('should set background-image attribute for ccd-suggested variant', () => { - const fragment = { backgroundImage: 'test-image.jpg' }; + const fields = { backgroundImage: 'test-image.jpg' }; const backgroundImageConfig = { tag: 'div', slot: 'background' }; const variant = 'ccd-suggested'; processBackgroundImage( - fragment, + fields, merchCard, backgroundImageConfig, variant, @@ -346,12 +348,12 @@ describe('processBackgroundImage', () => { }); it('should not process background image for unknown variant', () => { - const fragment = { backgroundImage: 'test-image.jpg' }; + const fields = { backgroundImage: 'test-image.jpg' }; const backgroundImageConfig = { tag: 'div', slot: 'background' }; const variant = 'unknown-variant'; processBackgroundImage( - fragment, + fields, merchCard, backgroundImageConfig, variant, @@ -362,12 +364,12 @@ describe('processBackgroundImage', () => { }); it('should not append background image for ccd-slice when backgroundImageConfig is falsy', () => { - const fragment = { backgroundImage: 'test-image.jpg' }; + const fields = { backgroundImage: 'test-image.jpg' }; const backgroundImageConfig = null; const variant = 'ccd-slice'; processBackgroundImage( - fragment, + fields, merchCard, backgroundImageConfig, variant, @@ -383,35 +385,34 @@ describe('processAnalytics', () => { beforeEach(() => { merchCard = mockMerchCard(); - //merchCard.innerHTML = 'See terms' }); afterEach(() => { sinon.restore(); }); - it('should not set analytics attributes if no fragment.tags', () => { - const fragment = {}; - processAnalytics(fragment, merchCard); + it('should not set analytics attributes if no fields.tags', () => { + const fields = {}; + processAnalytics(fields, merchCard); expect(merchCard.hasAttribute(ANALYTICS_SECTION_ATTR)).to.be.false; expect(merchCard.querySelectorAll(`a[${ANALYTICS_LINK_ATTR}]`).length).to.equal(0); }); it(`should not set analytics attributes when no tags start with ${ANALYTICS_TAG}`, () => { - const fragment = { tags: ['mas:term/montly'] }; - processAnalytics(fragment, merchCard); + const fields = { tags: ['mas:term/montly'] }; + processAnalytics(fields, merchCard); expect(merchCard.hasAttribute(ANALYTICS_SECTION_ATTR)).to.be.false; expect(merchCard.querySelectorAll(`a[${ANALYTICS_LINK_ATTR}]`).length).to.equal(0); }); it('should set analytics-section attribute on merchCard', () => { - const fragment = { tags: ['mas:product_code/phsp'] }; - processAnalytics(fragment, merchCard); + const fields = { tags: ['mas:product_code/phsp'] }; + processAnalytics(fields, merchCard); expect(merchCard.getAttribute(ANALYTICS_SECTION_ATTR)).to.equal('phsp'); }); it('should set analytics-link attributes on links inside merchCard', () => { - const fragment = { tags: ['mas:term/montly', 'mas:product_code/ccsn'] }; + const fields = { tags: ['mas:term/montly', 'mas:product_code/ccsn'] }; const seeTerms = document.createElement('a'); seeTerms.setAttribute('data-analytics-id', 'see-terms'); @@ -422,7 +423,7 @@ describe('processAnalytics', () => { merchCard.appendChild(buyNow); merchCard.appendChild(noAnalytics); - processAnalytics(fragment, merchCard); + processAnalytics(fields, merchCard); expect(merchCard.getAttribute(ANALYTICS_SECTION_ATTR)).to.equal('ccsn'); expect(seeTerms.getAttribute(ANALYTICS_LINK_ATTR)).to.equal('see-terms-1'); expect(buyNow.getAttribute(ANALYTICS_LINK_ATTR)).to.equal('buy-now-2'); @@ -430,3 +431,35 @@ describe('processAnalytics', () => { expect(merchCard.querySelectorAll(`a[${ANALYTICS_LINK_ATTR}]`).length).to.equal(2); }); }); + +describe('hydrate', () => { + let merchCard; + + beforeEach(() => { + merchCard = mockMerchCard(); + }); + + afterEach(() => { + sinon.restore(); + }); + + it('should hydrate a ccd-slice merch card', async () => { + const fragment = { + fields: { + variant: 'ccd-slice', + mnemonicIcon: ['www.adobe.com/icons/photoshop.svg'], + mnemonicAlt: [], + mnemonicLink: ['www.adobe.com'], + backgroundImage: 'test-image.jpg', + ctas: 'Click me', + tags: ['mas:term/montly', 'mas:product_code/ccsn'], + }, + }; + merchCard.variantLayout = { aemFragmentMapping: AEM_FRAGMENT_MAPPING }; + await hydrate(fragment, merchCard); + + expect(merchCard.getAttribute(ANALYTICS_SECTION_ATTR)).to.equal('ccsn'); + expect(merchCard.querySelector(`a[data-analytics-id]`).getAttribute('daa-ll')).to.equal('buy-now-1'); + }); + +});