From 71e56c50b1e800ad786732576af6fabb7701afb1 Mon Sep 17 00:00:00 2001 From: Nicolas Peltier <1032754+npeltier@users.noreply.github.com> Date: Thu, 25 Jul 2024 11:15:56 +0200 Subject: [PATCH 1/4] MWPW-153245 [merch][analytics] dispatch wcomp events, and let default lh (#2610) * MWPW-153245 [merch][analytics] dispatch web comp events, and let default lh - dispatch merch wc shadow event for analytics, - if lh attribute is already set, keep it, appending eventually mep information, - also remove merch-sidenav dependency that is only consumed in CC atm, * MWPW-153245 update deps * fix dep * MWPW-153245 update dependencies * MWPW-153245 resolve chris' comment --------- Co-authored-by: milo-pr-merge[bot] <169241390+milo-pr-merge[bot]@users.noreply.github.com> --- libs/deps/merch-card-collection.js | 28 +- libs/deps/merch-card.js | 34 +-- libs/deps/merch-sidenav.js | 447 ----------------------------- libs/martech/attributes.js | 11 +- 4 files changed, 40 insertions(+), 480 deletions(-) delete mode 100644 libs/deps/merch-sidenav.js diff --git a/libs/deps/merch-card-collection.js b/libs/deps/merch-card-collection.js index e298cd5cf5..40616d16b7 100644 --- a/libs/deps/merch-card-collection.js +++ b/libs/deps/merch-card-collection.js @@ -1,5 +1,5 @@ -// branch: main commit: dd5f72e1449ed667f48ef5be086043ddf9cc113d Mon, 24 Jun 2024 12:52:40 GMT -import{html as a,LitElement as N}from"/libs/deps/lit-all.min.js";var m=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))}};var E="hashchange";function S(r=window.location.hash){let e=[],t=r.replace(/^#/,"").split("&");for(let o of t){let[i,l=""]=o.split("=");i&&e.push([i,decodeURIComponent(l.replace(/\+/g," "))])}return Object.fromEntries(e)}function p(r){let e=new URLSearchParams(window.location.hash.slice(1));Object.entries(r).forEach(([i,l])=>{l?e.set(i,l):e.delete(i)}),e.sort();let t=e.toString(),o=window.scrollY||document.documentElement.scrollTop;window.location.hash=t,window.scrollTo(0,o)}function x(r){let e=()=>{if(!window.location.hash.includes("="))return;let t=S(window.location.hash);r(t)};return e(),window.addEventListener(E,e),()=>{window.removeEventListener(E,e)}}var g=(r,e={})=>{r.querySelectorAll("span[data-placeholder]").forEach(t=>{let{placeholder:o}=t.dataset;t.innerText=e[o]??""})};var T="(max-width: 1199px)",y="(min-width: 768px)",C="(min-width: 1200px)";import{css as _,unsafeCSS as w}from"/libs/deps/lit-all.min.js";var b=_` +// branch: main commit: edd23b3bf8505bfd02280d9ae77ece1ce3a25147 Wed, 24 Jul 2024 17:16:07 GMT +import{html as a,LitElement as v}from"/libs/deps/lit-all.min.js";var m=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))}};var E="hashchange";function N(r=window.location.hash){let e=[],t=r.replace(/^#/,"").split("&");for(let o of t){let[n,c=""]=o.split("=");n&&e.push([n,decodeURIComponent(c.replace(/\+/g," "))])}return Object.fromEntries(e)}function u(r){let e=new URLSearchParams(window.location.hash.slice(1));Object.entries(r).forEach(([n,c])=>{c?e.set(n,c):e.delete(n)}),e.sort();let t=e.toString();if(t===window.location.hash)return;let o=window.scrollY||document.documentElement.scrollTop;window.location.hash=t,window.scrollTo(0,o)}function g(r){let e=()=>{if(!window.location.hash.includes("="))return;let t=N(window.location.hash);r(t)};return e(),window.addEventListener(E,e),()=>{window.removeEventListener(E,e)}}var R=localStorage.getItem("masAccessToken"),U={Authorization:`Bearer ${R}`,pragma:"no-cache","cache-control":"no-cache"};var T="merch-card-collection:sort",x="merch-card-collection:showmore";var C=(r,e={})=>{r.querySelectorAll("span[data-placeholder]").forEach(t=>{let{placeholder:o}=t.dataset;t.innerText=e[o]??""})};var y="(max-width: 1199px)",_="(min-width: 768px)",b="(min-width: 1200px)";import{css as A,unsafeCSS as S}from"/libs/deps/lit-all.min.js";var w=A` #header, #resultText, #footer { @@ -62,7 +62,7 @@ import{html as a,LitElement as N}from"/libs/deps/lit-all.min.js";var m=class{con } /* tablets */ - @media screen and ${w(y)} { + @media screen and ${S(_)} { #header { grid-template-columns: 1fr fit-content(100%) fit-content(100%); } @@ -81,7 +81,7 @@ import{html as a,LitElement as N}from"/libs/deps/lit-all.min.js";var m=class{con } /* Laptop */ - @media screen and ${w(C)} { + @media screen and ${S(b)} { #resultText { grid-column: span 2; order: -3; @@ -93,9 +93,9 @@ import{html as a,LitElement as N}from"/libs/deps/lit-all.min.js";var m=class{con justify-content: end; } } -`;var u=(r,e)=>r.querySelector(`[slot="${e}"]`).textContent.trim();var A="merch-card-collection",n={alphabetical:"alphabetical",authored:"authored"},R={filters:["noResultText","resultText","resultsText"],mobile:["noSearchResultsMobileText","searchResultMobileText","searchResultsMobileText"],desktop:["noSearchResultsText","searchResultText","searchResultsText"]},v=(r,{filter:e})=>r.filter(t=>t.filters.hasOwnProperty(e)),M=(r,{types:e})=>e?(e=e.split(","),r.filter(t=>e.some(o=>t.types.includes(o)))):r,L=r=>r.sort((e,t)=>(e.title??"").localeCompare(t.title??"","en",{sensitivity:"base"})),D=(r,{filter:e})=>r.sort((t,o)=>o.filters[e]?.order==null||isNaN(o.filters[e]?.order)?-1:t.filters[e]?.order==null||isNaN(t.filters[e]?.order)?1:t.filters[e].order-o.filters[e].order),k=(r,{search:e})=>e?.length?(e=e.toLowerCase(),r.filter(t=>(t.title??"").toLowerCase().includes(e))):r,f=class extends N{static properties={filter:{type:String,attribute:"filter",reflect:!0},filtered:{type:String,attribute:"filtered"},search:{type:String,attribute:"search",reflect:!0},sort:{type:String,attribute:"sort",default:n.authored,reflect:!0},types:{type:String,attribute:"types",reflect:!0},limit:{type:Number,attribute:"limit"},page:{type:Number,attribute:"page",reflect:!0},singleApp:{type:String,attribute:"single-app",reflect:!0},hasMore:{type:Boolean},displayResult:{type:Boolean,attribute:"display-result"},resultCount:{type:Number},sidenav:{type:Object}};mobileAndTablet=new m(this,T);constructor(){super(),this.filter="all",this.hasMore=!1,this.resultCount=void 0,this.displayResult=!1}render(){return a`${this.header} +`;var p=(r,e)=>r.querySelector(`[slot="${e}"]`).textContent.trim();var M="merch-card-collection",i={alphabetical:"alphabetical",authored:"authored"},O={filters:["noResultText","resultText","resultsText"],mobile:["noSearchResultsMobileText","searchResultMobileText","searchResultsMobileText"],desktop:["noSearchResultsText","searchResultText","searchResultsText"]},L=(r,{filter:e})=>r.filter(t=>t.filters.hasOwnProperty(e)),$=(r,{types:e})=>e?(e=e.split(","),r.filter(t=>e.some(o=>t.types.includes(o)))):r,D=r=>r.sort((e,t)=>(e.title??"").localeCompare(t.title??"","en",{sensitivity:"base"})),k=(r,{filter:e})=>r.sort((t,o)=>o.filters[e]?.order==null||isNaN(o.filters[e]?.order)?-1:t.filters[e]?.order==null||isNaN(t.filters[e]?.order)?1:t.filters[e].order-o.filters[e].order),B=(r,{search:e})=>e?.length?(e=e.toLowerCase(),r.filter(t=>(t.title??"").toLowerCase().includes(e))):r,f=class extends v{static properties={filter:{type:String,attribute:"filter",reflect:!0},filtered:{type:String,attribute:"filtered"},search:{type:String,attribute:"search",reflect:!0},sort:{type:String,attribute:"sort",default:i.authored,reflect:!0},types:{type:String,attribute:"types",reflect:!0},limit:{type:Number,attribute:"limit"},page:{type:Number,attribute:"page",reflect:!0},singleApp:{type:String,attribute:"single-app",reflect:!0},hasMore:{type:Boolean},displayResult:{type:Boolean,attribute:"display-result"},resultCount:{type:Number},sidenav:{type:Object}};mobileAndTablet=new m(this,y);constructor(){super(),this.filter="all",this.hasMore=!1,this.resultCount=void 0,this.displayResult=!1}render(){return a`${this.header} - ${this.footer}`}updated(e){if(!this.querySelector("merch-card"))return;let t=window.scrollY||document.documentElement.scrollTop,o=[...this.children].filter(s=>s.tagName==="MERCH-CARD");if(o.length===0)return;e.has("singleApp")&&this.singleApp&&o.forEach(s=>{s.updateFilters(s.name===this.singleApp)});let i=this.sort===n.alphabetical?L:D,c=[v,M,k,i].reduce((s,h)=>h(s,this),o).map((s,h)=>[s,h]);if(this.resultCount=c.length,this.page&&this.limit){let s=this.page*this.limit;this.hasMore=c.length>s,c=c.filter(([,h])=>h{d.has(s)?(s.style.order=d.get(s),s.size=s.filters[this.filter]?.size,s.style.removeProperty("display"),s.requestUpdate()):(s.style.display="none",s.size=void 0,s.style.removeProperty("order"))}),window.scrollTo(0,t),this.updateComplete.then(()=>{let s=this.shadowRoot.getElementById("resultText")?.firstElementChild?.assignedElements?.()?.[0];s&&g(s,{resultCount:this.resultCount,searchTerm:this.search,filter:this.sidenav?.filters.selectedText})})}connectedCallback(){super.connectedCallback(),this.filtered?(this.filter=this.filtered,this.page=1):this.startDeeplink(),this.sidenav=document.querySelector("merch-sidenav")}disconnectedCallback(){super.disconnectedCallback(),this.stopDeeplink?.()}get header(){if(!this.filtered)return a` - `}get badgeElement(){return this.shadowRoot.getElementById("badge")}getContainer(){return this.closest('[class*="-merch-cards"]')??this.parentElement}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"]')??[]]}get isMobileOrTablet(){return window.matchMedia("(max-width: 1024px)").matches}async toggleStockOffer({target:e}){if(!this.stockOfferOsis)return;let t=this.checkoutLinks;if(t.length!==0)for(let r of t){await r.onceSettled();let n=r.value?.[0]?.planType;if(!n)return;let a=this.stockOfferOsis[n];if(!a)return;let i=r.dataset.wcsOsi.split(",").filter(x=>x!==a);e.checked&&i.push(a),r.dataset.wcsOsi=i.join(",")}}toggleActionMenu(e){let t=e?.type==="mouseleave"?!0:void 0,r=this.shadowRoot.querySelector('slot[name="action-menu-content"]');r&&r.classList.toggle("hidden",t)}handleQuantitySelection(e){let t=this.checkoutLinks;for(let r of t)r.dataset.quantity=e.detail.option}get titleElement(){return this.variant==="special-offers"?this.querySelector('[slot="detail-m"]'):this.querySelector('[slot="heading-xs"]')}get title(){return this.titleElement?.textContent?.trim()}get description(){return this.querySelector('[slot="body-xs"]')?.textContent?.trim()}updateFilters(e){let t={...this.filters};Object.keys(t).forEach(r=>{if(e){t[r].order=Math.min(t[r].order||2,2);return}let n=t[r].order;n===1||isNaN(n)||(t[r].order=Number(n)+1)}),this.filters=t}includes(e){return this.textContent.match(new RegExp(e,"i"))!==null}render(){if(!(!this.isConnected||this.style.display==="none"))switch(this.variant){case"special-offers":return this.renderSpecialOffer();case"segment":return this.renderSegment();case"plans":return this.renderPlans();case"catalog":return this.renderCatalog();case"image":return this.renderImage();case"product":return this.renderProduct();case"inline-heading":return this.renderInlineHeading();case R:return this.renderMiniCompareChart();case"ccd-action":return this.renderCcdAction();case"twp":return this.renderTwp();default:return this.renderProduct()}}renderSpecialOffer(){return o`${this.cardImage} + `}get badgeElement(){return this.shadowRoot.getElementById("badge")}getContainer(){return this.closest('[class*="-merch-cards"]')??this.parentElement}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"]')??[]]}get isMobileOrTablet(){return window.matchMedia("(max-width: 1024px)").matches}async toggleStockOffer({target:e}){if(!this.stockOfferOsis)return;let t=this.checkoutLinks;if(t.length!==0)for(let r of t){await r.onceSettled();let n=r.value?.[0]?.planType;if(!n)return;let a=this.stockOfferOsis[n];if(!a)return;let i=r.dataset.wcsOsi.split(",").filter(u=>u!==a);e.checked&&i.push(a),r.dataset.wcsOsi=i.join(",")}}toggleActionMenu(e){let t=e?.type==="mouseleave"?!0:void 0,r=this.shadowRoot.querySelector('slot[name="action-menu-content"]');r&&(t||this.dispatchEvent(new CustomEvent(H,{bubbles:!0,composed:!0,detail:{card:this.name,type:"action-menu"}})),r.classList.toggle("hidden",t))}handleQuantitySelection(e){let t=this.checkoutLinks;for(let r of t)r.dataset.quantity=e.detail.option}get titleElement(){return this.variant==="special-offers"?this.querySelector('[slot="detail-m"]'):this.querySelector('[slot="heading-xs"]')}get title(){return this.titleElement?.textContent?.trim()}get description(){return this.querySelector('[slot="body-xs"]')?.textContent?.trim()}updateFilters(e){let t={...this.filters};Object.keys(t).forEach(r=>{if(e){t[r].order=Math.min(t[r].order||2,2);return}let n=t[r].order;n===1||isNaN(n)||(t[r].order=Number(n)+1)}),this.filters=t}includes(e){return this.textContent.match(new RegExp(e,"i"))!==null}render(){if(!(!this.isConnected||this.style.display==="none"))switch(this.variant){case"special-offers":return this.renderSpecialOffer();case"segment":return this.renderSegment();case"plans":return this.renderPlans();case"catalog":return this.renderCatalog();case"image":return this.renderImage();case"product":return this.renderProduct();case"inline-heading":return this.renderInlineHeading();case _:return this.renderMiniCompareChart();case"ccd-action":return this.renderCcdAction();case"twp":return this.renderTwp();default:return this.renderProduct()}}renderSpecialOffer(){return o`${this.cardImage}
@@ -1547,8 +1547,8 @@ body.merch-modal { - - + + ${this.stockCheckbox}
@@ -1571,9 +1571,11 @@ body.merch-modal { - ${this.promoBottom?"":o``} + ${this.promoBottom?"":o``} - ${this.promoBottom?o``:""} + ${this.promoBottom?o``:""} ${this.secureLabelFooter}`}renderImage(){return o`${this.cardImage}
@@ -1631,7 +1633,7 @@ body.merch-modal {
-
`}get defaultSlot(){return this.querySelector(":scope > a:not([slot]),:scope > p:not([slot]),:scope > div:not([slot]),:scope > span:not([slot])")?o``:re}renderCcdAction(){return o`
+
`}get defaultSlot(){return this.querySelector(":scope > a:not([slot]),:scope > p:not([slot]),:scope > div:not([slot]),:scope > span:not([slot])")?o``:ne}renderCcdAction(){return o`
${this.badge} @@ -1639,5 +1641,5 @@ body.merch-modal {
${this.defaultSlot} -
`}connectedCallback(){super.connectedCallback(),this.#e=this.getContainer(),this.setAttribute("tabindex",this.getAttribute("tabindex")??"0"),this.addEventListener("keydown",this.keydownHandler),this.addEventListener("mouseleave",this.toggleActionMenu),this.addEventListener($,this.handleQuantitySelection),this.addEventListener(O,this.merchCardReady,{once:!0}),this.updateComplete.then(()=>{this.merchCardReady()}),this.storageOptions?.addEventListener("change",this.handleStorageChange)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",this.keydownHandler),this.removeEventListener($,this.handleQuantitySelection),this.storageOptions?.removeEventListener(z,this.handleStorageChange)}appendInvisibleSpacesToFooterLinks(){[...this.querySelectorAll('[slot="footer"] a')].forEach(e=>{P(e).forEach(r=>{let i=r.textContent.split(" ").map(x=>x.match(/.{1,7}/g)?.join("\u200B")).join(" ");r.textContent=i})})}keydownHandler(e){let t=document.activeElement?.closest(p);if(!t)return;function r(E,S){let w=document.elementFromPoint(E,S)?.closest(p);w&&(t.selected=!1,e.preventDefault(),e.stopImmediatePropagation(),w.focus(),w.selected=!0,w.scrollIntoView({behavior:"smooth",block:"center"}))}let{x:n,y:a,width:i,height:x}=t.getBoundingClientRect(),u=64,{code:_}=e;if(_==="Tab"){let E=Array.from(this.querySelectorAll('a[href], button:not([disabled]), textarea, input[type="text"], input[type="radio"], input[type="checkbox"], select')),S=E[0],w=E[E.length-1];(!e.shiftKey&&document.activeElement===w||e.shiftKey&&document.activeElement===S)&&(e.preventDefault(),e.stopImmediatePropagation())}else switch(_){case j:r(n-u,a);break;case F:r(n+i+u,a);break;case U:r(n,a-u);break;case V:r(n,a+x+u);break;case W:if(this.variant==="twp")return;this.footerSlot?.querySelector("a")?.click();break}}updateMiniCompareElementMinHeight(e,t){let r=`--consonant-merch-card-mini-compare-${t}-height`,n=Math.max(0,parseInt(window.getComputedStyle(e).height)||0),a=parseInt(this.#e.style.getPropertyValue(r))||0;n>a&&this.#e.style.setProperty(r,`${n}px`)}async adjustTitleWidth(){if(!["segment","plans"].includes(this.variant))return;let e=this.getBoundingClientRect().width,t=this.badgeElement?.getBoundingClientRect().width||0;e===0||t===0||this.style.setProperty("--consonant-merch-card-heading-xs-max-width",`${Math.round(e-t-16)}px`)}async adjustMiniCompareBodySlots(){if(this.variant!==R||this.getBoundingClientRect().width===0)return;this.updateMiniCompareElementMinHeight(this.shadowRoot.querySelector(".top-section"),"top-section"),["heading-m","body-m","heading-m-price","price-commitment","offers","promo-text","secure-transaction-label"].forEach(r=>this.updateMiniCompareElementMinHeight(this.shadowRoot.querySelector(`slot[name="${r}"]`),r)),this.updateMiniCompareElementMinHeight(this.shadowRoot.querySelector("footer"),"footer");let t=this.shadowRoot.querySelector(".mini-compare-chart-badge");t&&t.textContent!==""&&this.#e.style.setProperty("--consonant-merch-card-mini-compare-top-section-mobile-height","32px")}adjustMiniCompareFooterRows(){if(this.variant!==R||this.getBoundingClientRect().width===0)return;[...this.querySelector('[slot="footer-rows"]').children].forEach((t,r)=>{let n=Math.max(ne,parseInt(window.getComputedStyle(t).height)||0),a=parseInt(this.#e.style.getPropertyValue(K(r+1)))||0;n>a&&this.#e.style.setProperty(K(r+1),`${n}px`)})}get storageOptions(){return this.querySelector("sp-radio-group#storage")}get storageSpecificOfferSelect(){let e=this.storageOptions?.selected;if(e){let t=this.querySelector(`merch-offer-select[storage="${e}"]`);if(t)return t}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(N,{bubbles:!0}))}handleStorageChange(){let e=this.closest("merch-card")?.offerSelect.cloneNode(!0);e&&this.dispatchEvent(new CustomEvent(z,{detail:{offerSelect:e},bubbles:!0}))}get dynamicPrice(){return this.querySelector('[slot="price"]')}selectMerchOffer(e){if(e===this.merchOffer)return;this.merchOffer=e;let t=this.dynamicPrice;if(e.price&&t){let r=e.price.cloneNode(!0);t.onceSettled?t.onceSettled().then(()=>{t.replaceWith(r)}):t.replaceWith(r)}}};customElements.define(f,l); +
`}connectedCallback(){super.connectedCallback(),this.#e=this.getContainer(),this.setAttribute("tabindex",this.getAttribute("tabindex")??"0"),this.addEventListener("keydown",this.keydownHandler),this.addEventListener("mouseleave",this.toggleActionMenu),this.addEventListener(T,this.handleQuantitySelection),this.addEventListener(L,this.merchCardReady,{once:!0}),this.updateComplete.then(()=>{this.merchCardReady()}),this.storageOptions?.addEventListener("change",this.handleStorageChange)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",this.keydownHandler),this.removeEventListener(T,this.handleQuantitySelection),this.storageOptions?.removeEventListener(z,this.handleStorageChange)}appendInvisibleSpacesToFooterLinks(){[...this.querySelectorAll('[slot="footer"] a')].forEach(e=>{P(e).forEach(r=>{let i=r.textContent.split(" ").map(u=>u.match(/.{1,7}/g)?.join("\u200B")).join(" ");r.textContent=i})})}keydownHandler(e){let t=document.activeElement?.closest(p);if(!t)return;function r(E,S){let w=document.elementFromPoint(E,S)?.closest(p);w&&(t.selected=!1,e.preventDefault(),e.stopImmediatePropagation(),w.focus(),w.selected=!0,w.scrollIntoView({behavior:"smooth",block:"center"}))}let{x:n,y:a,width:i,height:u}=t.getBoundingClientRect(),x=64,{code:R}=e;if(R==="Tab"){let E=Array.from(this.querySelectorAll('a[href], button:not([disabled]), textarea, input[type="text"], input[type="radio"], input[type="checkbox"], select')),S=E[0],w=E[E.length-1];(!e.shiftKey&&document.activeElement===w||e.shiftKey&&document.activeElement===S)&&(e.preventDefault(),e.stopImmediatePropagation())}else switch(R){case F:r(n-x,a);break;case U:r(n+i+x,a);break;case V:r(n,a-x);break;case W:r(n,a+u+x);break;case G:if(this.variant==="twp")return;this.footerSlot?.querySelector("a")?.click();break}}updateMiniCompareElementMinHeight(e,t){let r=`--consonant-merch-card-mini-compare-${t}-height`,n=Math.max(0,parseInt(window.getComputedStyle(e).height)||0),a=parseInt(this.#e.style.getPropertyValue(r))||0;n>a&&this.#e.style.setProperty(r,`${n}px`)}async adjustTitleWidth(){if(!["segment","plans"].includes(this.variant))return;let e=this.getBoundingClientRect().width,t=this.badgeElement?.getBoundingClientRect().width||0;e===0||t===0||this.style.setProperty("--consonant-merch-card-heading-xs-max-width",`${Math.round(e-t-16)}px`)}async adjustMiniCompareBodySlots(){if(this.variant!==_||this.getBoundingClientRect().width===0)return;this.updateMiniCompareElementMinHeight(this.shadowRoot.querySelector(".top-section"),"top-section"),["heading-m","body-m","heading-m-price","price-commitment","offers","promo-text","secure-transaction-label"].forEach(r=>this.updateMiniCompareElementMinHeight(this.shadowRoot.querySelector(`slot[name="${r}"]`),r)),this.updateMiniCompareElementMinHeight(this.shadowRoot.querySelector("footer"),"footer");let t=this.shadowRoot.querySelector(".mini-compare-chart-badge");t&&t.textContent!==""&&this.#e.style.setProperty("--consonant-merch-card-mini-compare-top-section-mobile-height","32px")}adjustMiniCompareFooterRows(){if(this.variant!==_||this.getBoundingClientRect().width===0)return;[...this.querySelector('[slot="footer-rows"]').children].forEach((t,r)=>{let n=Math.max(ae,parseInt(window.getComputedStyle(t).height)||0),a=parseInt(this.#e.style.getPropertyValue(Y(r+1)))||0;n>a&&this.#e.style.setProperty(Y(r+1),`${n}px`)})}get storageOptions(){return this.querySelector("sp-radio-group#storage")}get storageSpecificOfferSelect(){let e=this.storageOptions?.selected;if(e){let t=this.querySelector(`merch-offer-select[storage="${e}"]`);if(t)return t}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(N,{bubbles:!0}))}handleStorageChange(){let e=this.closest("merch-card")?.offerSelect.cloneNode(!0);e&&this.dispatchEvent(new CustomEvent(z,{detail:{offerSelect:e},bubbles:!0}))}get dynamicPrice(){return this.querySelector('[slot="price"]')}selectMerchOffer(e){if(e===this.merchOffer)return;this.merchOffer=e;let t=this.dynamicPrice;if(e.price&&t){let r=e.price.cloneNode(!0);t.onceSettled?t.onceSettled().then(()=>{t.replaceWith(r)}):t.replaceWith(r)}}};customElements.define(f,l); //# sourceMappingURL=merch-card.js.map diff --git a/libs/deps/merch-sidenav.js b/libs/deps/merch-sidenav.js deleted file mode 100644 index 040e35f2c6..0000000000 --- a/libs/deps/merch-sidenav.js +++ /dev/null @@ -1,447 +0,0 @@ -// branch: develop commit: 369516f3cda51fb1219ad0b3cf2c94c8f094c49b Tue, 21 May 2024 08:39:16 GMT - -// src/sidenav/merch-sidenav.js -import { html as html4, css as css5, LitElement as LitElement4 } 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/sidenav/merch-sidenav-heading.css.js -import { css } from "/libs/deps/lit-all.min.js"; -var headingStyles = css` - h2 { - font-size: 11px; - font-style: normal; - font-weight: 500; - height: 32px; - letter-spacing: 0.06em; - padding: 0 12px; - line-height: 32px; - color: #747474; - } -`; - -// src/merch-search.js -import { html, LitElement, css as css2 } from "/libs/deps/lit-all.min.js"; - -// 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)]); - } - } - return Object.fromEntries(result); -} -function pushStateFromComponent(component, value) { - if (component.deeplink) { - const state = {}; - state[component.deeplink] = value; - pushState(state); - } -} -function pushState(state) { - const hash = new URLSearchParams(window.location.hash.slice(1)); - Object.entries(state).forEach(([key, value]) => { - if (value) { - hash.set(key, value); - } else { - hash.delete(key); - } - }); - hash.sort(); - window.location.hash = decodeURIComponent(hash.toString()); -} - -// src/utils.js -function debounce(func, delay) { - let debounceTimer; - return function() { - const context = this; - const args = arguments; - clearTimeout(debounceTimer); - debounceTimer = setTimeout(() => func.apply(context, args), delay); - }; -} - -// src/merch-search.js -var MerchSearch = class extends LitElement { - static properties = { - deeplink: { type: String } - }; - static styles = [ - css2` - :host { - display: contents; - } - ` - ]; - get search() { - return this.querySelector(`sp-search`); - } - constructor() { - super(); - this.handleInput = () => pushStateFromComponent(this, this.search.value); - this.handleInputDebounced = debounce(this.handleInput.bind(this)); - } - connectedCallback() { - super.connectedCallback(); - if (!this.search) - return; - this.search.addEventListener("input", this.handleInputDebounced); - this.search.addEventListener("change", this.handleInputDebounced); - this.updateComplete.then(() => { - this.setStateFromURL(); - }); - } - disconnectedCallback() { - super.disconnectedCallback(); - this.search.removeEventListener("input", this.handleInputDebounced); - this.search.removeEventListener("change", this.handleInputDebounced); - } - /* - * set the state of the search based on the URL - */ - setStateFromURL() { - const state = parseState(); - const value = state[this.deeplink]; - if (value) { - this.search.value = value; - } - } - render() { - return html``; - } -}; -customElements.define("merch-search", MerchSearch); - -// src/sidenav/merch-sidenav-list.js -import { html as html2, LitElement as LitElement2, css as css3 } from "/libs/deps/lit-all.min.js"; -var MerchSidenavList = class extends LitElement2 { - static properties = { - title: { type: String }, - label: { type: String }, - deeplink: { type: String, attribute: "deeplink" }, - selectedText: { - type: String, - reflect: true, - attribute: "selected-text" - }, - selectedValue: { - type: String, - reflect: true, - attribute: "selected-value" - } - }; - static styles = [ - css3` - :host { - display: block; - contain: content; - padding-top: 16px; - } - .right { - position: absolute; - right: 0; - } - `, - headingStyles - ]; - constructor() { - super(); - this.handleClickDebounced = debounce(this.handleClick.bind(this)); - } - selectElement(element, selected = true) { - if (element.parentNode.tagName === "SP-SIDENAV-ITEM") { - this.selectElement(element.parentNode, false); - } - if (element.firstElementChild?.tagName === "SP-SIDENAV-ITEM") { - element.expanded = true; - } - if (selected) { - this.selectedElement = element; - this.selectedText = element.label; - this.selectedValue = element.value; - setTimeout(() => { - element.selected = true; - }, 1); - } - } - /* - * set the state of the sidenav based on the URL - */ - setStateFromURL() { - const state = parseState(); - const value = state[this.deeplink] ?? "all"; - if (value) { - const element = this.querySelector(`sp-sidenav-item[value="${value}"]`) ?? this.querySelector(`sp-sidenav-item`); - if (!element) - return; - this.updateComplete.then(() => { - this.selectElement(element); - }); - } - } - /** - * click handler to manage first level items state of sidenav - * @param {*} param - */ - handleClick({ target: item }) { - const { value, parentNode } = item; - this.selectElement(item); - if (parentNode && parentNode.tagName === "SP-SIDENAV") { - pushStateFromComponent(this, value); - item.selected = true; - parentNode.querySelectorAll( - "sp-sidenav-item[expanded],sp-sidenav-item[selected]" - ).forEach((item2) => { - if (item2.value !== value) { - item2.expanded = false; - item2.selected = false; - } - }); - } - } - /** - * leaf level item selection handler - * @param {*} event - */ - selectionChanged({ target: { value, parentNode } }) { - this.selectElement( - this.querySelector(`sp-sidenav-item[value="${value}"]`) - ); - pushStateFromComponent(this, value); - } - connectedCallback() { - super.connectedCallback(); - this.addEventListener("click", this.handleClickDebounced); - this.updateComplete.then(() => { - this.setStateFromURL(); - }); - } - disconnectedCallback() { - super.disconnectedCallback(); - this.removeEventListener("click", this.handleClickDebounced); - } - render() { - return html2`
- ${this.title ? html2`

${this.title}

` : ""} - -
`; - } -}; -customElements.define("merch-sidenav-list", MerchSidenavList); - -// src/sidenav/merch-sidenav-checkbox-group.js -import { html as html3, LitElement as LitElement3, css as css4 } from "/libs/deps/lit-all.min.js"; -var MerchSidenavCheckboxGroup = class extends LitElement3 { - static properties = { - title: { type: String }, - label: { type: String }, - deeplink: { type: String }, - selectedValues: { type: Array, reflect: true }, - value: { type: String } - }; - static styles = css4` - :host { - display: block; - contain: content; - border-top: 1px solid var(--color-gray-200); - padding: 12px; - } - h3 { - font-size: 14px; - font-style: normal; - font-weight: 700; - height: 32px; - letter-spacing: 0px; - padding: 0px; - line-height: 18.2px; - color: var(--color-gray-600); - margin: 0px; - } - .checkbox-group { - display: flex; - flex-direction: column; - } - `; - /* - * set the state of the sidenav based on the URL - */ - setStateFromURL() { - this.selectedValues = []; - const { types: state } = parseState(); - if (state) { - this.selectedValues = state.split(","); - this.selectedValues.forEach((name) => { - const element = this.querySelector(`sp-checkbox[name=${name}]`); - if (element) { - element.checked = true; - } - }); - } - } - /** - * leaf level item change handler - * @param {*} event - */ - selectionChanged({ target }) { - const name = target.getAttribute("name"); - if (name) { - const index = this.selectedValues.indexOf(name); - if (target.checked && index === -1) { - this.selectedValues.push(name); - } else if (!target.checked && index >= 0) { - this.selectedValues.splice(index, 1); - } - } - pushStateFromComponent(this, this.selectedValues.join(",")); - } - connectedCallback() { - super.connectedCallback(); - this.updateComplete.then(async () => { - this.setStateFromURL(); - }); - } - render() { - return html3`
-

${this.title}

-
- -
-
`; - } -}; -customElements.define( - "merch-sidenav-checkbox-group", - MerchSidenavCheckboxGroup -); - -// src/media.js -var SPECTRUM_MOBILE_LANDSCAPE = "(max-width: 700px)"; -var TABLET_DOWN = "(max-width: 1199px)"; - -// src/sidenav/merch-sidenav.js -var MerchSideNav = class extends LitElement4 { - static properties = { - title: { type: String }, - closeText: { type: String, attribute: "close-text" }, - modal: { type: Boolean, attribute: "modal", reflect: true } - }; - // modal target - #target; - constructor() { - super(); - this.modal = false; - } - static styles = [ - css5` - :host { - display: block; - max-width: 248px; - --mod-button-border-radius: 5px; - } - - #sidenav { - width: 100%; - display: flex; - flex-direction: column; - place-items: center; - min-height: 60vh; - } - `, - headingStyles - ]; - mobileDevice = new MatchMediaController(this, SPECTRUM_MOBILE_LANDSCAPE); - mobileAndTablet = new MatchMediaController(this, TABLET_DOWN); - get filters() { - return this.querySelector("merch-sidenav-list"); - } - render() { - return this.mobileAndTablet.matches ? this.asDialog : this.asAside; - } - get asDialog() { - if (!this.modal) - return; - return html4` - - -
-
-

${this.title}

- -
-
-
-
- `; - } - get asAside() { - return html4`

${this.title}

-
`; - } - openModal() { - this.updateComplete.then(async () => { - const content = this.shadowRoot.querySelector("sp-dialog-wrapper"); - const options = { - trigger: this.#target, - type: "modal" - }; - const overlay = await window.__merch__spectrum_Overlay.open( - content, - options - ); - overlay.addEventListener("close", () => { - this.modal = false; - }); - this.shadowRoot.querySelector("sp-theme").append(overlay); - }); - } - updated() { - if (this.modal) - this.openModal(); - } - showModal({ target }) { - this.#target = target; - this.modal = true; - } -}; -customElements.define("merch-sidenav", MerchSideNav); -export { - MerchSideNav -}; diff --git a/libs/martech/attributes.js b/libs/martech/attributes.js index 5b1dc75b63..9bb2b3dc5f 100644 --- a/libs/martech/attributes.js +++ b/libs/martech/attributes.js @@ -73,9 +73,14 @@ export async function decorateSectionAnalytics(section, idx, config) { }); const mepMartech = config?.mep?.martech || ''; section.querySelectorAll('[data-block]').forEach((block, blockIdx) => { - const blockName = block.classList[0] || ''; - block.setAttribute('daa-lh', `b${blockIdx + 1}|${blockName.slice(0, 15)}${mepMartech}`); - decorateDefaultLinkAnalytics(block, config); + const lhAtt = block.getAttribute('daa-lh'); + if (lhAtt) { + block.setAttribute('daa-lh', `${lhAtt}${mepMartech}`); + } else { + const blockName = block.classList[0] || ''; + block.setAttribute('daa-lh', `b${blockIdx + 1}|${blockName.slice(0, 15)}${mepMartech}`); + decorateDefaultLinkAnalytics(block, config); + } block.removeAttribute('data-block'); }); } From 3a1ff43b2b0cd88311d69b4cd7bf03a883ca6d63 Mon Sep 17 00:00:00 2001 From: Okan Sahin <39759830+mokimo@users.noreply.github.com> Date: Thu, 25 Jul 2024 11:20:37 +0200 Subject: [PATCH 2/4] Correct error messages for duplicate files on the stage to main workflow (#2621) * Correct error messages for duplicate files * Improved variable naming --- .github/workflows/merge-to-stage.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/.github/workflows/merge-to-stage.js b/.github/workflows/merge-to-stage.js index e081251f20..b3dd6b3e7e 100644 --- a/.github/workflows/merge-to-stage.js +++ b/.github/workflows/merge-to-stage.js @@ -130,9 +130,10 @@ const merge = async ({ prs, type }) => { for await (const { number, files, html_url, title } of prs) { try { - if (files.some((file) => SEEN[file])) { + const fileOverlap = files.find((file) => SEEN[file]); + if (fileOverlap) { commentOnPR( - `Skipped ${number}: ${title} due to file "${file}" overlap. Merging will be attempted in the next batch`, + `Skipped ${number}: "${title}" due to file "${fileOverlap}" overlap. Merging will be attempted in the next batch`, number ); continue; From ee4f063a766a4b6f0c2a32b6cfc32123c4236e46 Mon Sep 17 00:00:00 2001 From: Okan Sahin <39759830+mokimo@users.noreply.github.com> Date: Thu, 25 Jul 2024 17:10:40 +0200 Subject: [PATCH 3/4] mwpw-154965: Fetch federal stage content from hlx.page instead of stage.adobe.com (#2618) * Fetch stage federal content from hlx.page instead of stage.adobe.com * address PR feedback --- libs/utils/federated.js | 5 +---- test/blocks/global-navigation/global-navigation.test.js | 4 ++-- test/blocks/global-navigation/test-utilities.js | 2 +- test/blocks/global-navigation/utilities/utilities.test.js | 2 +- test/utils/federated.test.js | 2 +- 5 files changed, 6 insertions(+), 9 deletions(-) diff --git a/libs/utils/federated.js b/libs/utils/federated.js index c32b4ac627..59b93ca59a 100644 --- a/libs/utils/federated.js +++ b/libs/utils/federated.js @@ -20,10 +20,7 @@ export const getFederatedContentRoot = () => { : 'https://www.adobe.com'; if (origin.includes('localhost') || origin.includes('.hlx.')) { - // Akamai as proxy to avoid 401s, given AEM-EDS MS auth cross project limitations - federatedContentRoot = origin.includes('.hlx.live') - ? 'https://main--federal--adobecom.hlx.live' - : 'https://www.stage.adobe.com'; + federatedContentRoot = `https://main--federal--adobecom.hlx.${origin.endsWith('.live') ? 'live' : 'page'}`; } return federatedContentRoot; diff --git a/test/blocks/global-navigation/global-navigation.test.js b/test/blocks/global-navigation/global-navigation.test.js index 263ed5aeca..61f6c91a23 100644 --- a/test/blocks/global-navigation/global-navigation.test.js +++ b/test/blocks/global-navigation/global-navigation.test.js @@ -517,7 +517,7 @@ describe('global navigation', () => { document.body.replaceChildren(toFragment``); await initGnav(document.body.querySelector('header')); expect( - fetchStub.calledOnceWith('https://www.stage.adobe.com/federal/path/to/gnav.plain.html'), + fetchStub.calledOnceWith('https://main--federal--adobecom.hlx.page/federal/path/to/gnav.plain.html'), ).to.be.true; }); @@ -527,7 +527,7 @@ describe('global navigation', () => { document.body.replaceChildren(toFragment``); await initGnav(document.body.querySelector('header')); expect( - fetchStub.calledOnceWith('https://www.stage.adobe.com/federal/path/to/gnav.plain.html'), + fetchStub.calledOnceWith('https://main--federal--adobecom.hlx.page/federal/path/to/gnav.plain.html'), ).to.be.true; }); diff --git a/test/blocks/global-navigation/test-utilities.js b/test/blocks/global-navigation/test-utilities.js index bbc98f0bc8..70be91e0ca 100644 --- a/test/blocks/global-navigation/test-utilities.js +++ b/test/blocks/global-navigation/test-utilities.js @@ -176,7 +176,7 @@ export const createFullGlobalNavigation = async ({ if (url.endsWith('large-menu-cross-cloud.plain.html')) { return mockRes({ payload: largeMenuCrossCloud }); } if (url.endsWith('large-menu-active.plain.html')) { return mockRes({ payload: largeMenuActiveMock }); } if (url.endsWith('large-menu-wide-column.plain.html')) { return mockRes({ payload: largeMenuWideColumnMock }); } - if (url.includes('https://www.stage.adobe.com') + if (url.includes('https://main--federal--adobecom.hlx.page') && url.endsWith('feds-menu.plain.html')) { return mockRes({ payload: largeMenuMock }); } if (url.includes('gnav')) { return mockRes({ payload: globalNavigation || globalNavigationMock }); } if (url.includes('correct-promo-fragment')) { return mockRes({ payload: correctPromoFragmentMock }); } diff --git a/test/blocks/global-navigation/utilities/utilities.test.js b/test/blocks/global-navigation/utilities/utilities.test.js index 3a23b991e5..7d06b9e528 100644 --- a/test/blocks/global-navigation/utilities/utilities.test.js +++ b/test/blocks/global-navigation/utilities/utilities.test.js @@ -19,7 +19,7 @@ import { setConfig, getConfig } from '../../../../libs/utils/utils.js'; import { createFullGlobalNavigation, config } from '../test-utilities.js'; import mepInBlock from '../mocks/mep-config.js'; -const baseHost = 'https://www.stage.adobe.com'; +const baseHost = 'https://main--federal--adobecom.hlx.page'; describe('global navigation utilities', () => { beforeEach(() => { document.body.innerHTML = ''; diff --git a/test/utils/federated.test.js b/test/utils/federated.test.js index 8351300556..160ce5c1db 100644 --- a/test/utils/federated.test.js +++ b/test/utils/federated.test.js @@ -1,7 +1,7 @@ import { expect } from '@esm-bundle/chai'; import { getFederatedUrl, getFederatedContentRoot } from '../../libs/utils/federated.js'; -const baseHost = 'https://www.stage.adobe.com'; +const baseHost = 'https://main--federal--adobecom.hlx.page'; describe('Federated navigation utilities', () => { describe('getFederatedContentRoot', () => { From add97450a24c4344de5abf01a716959b0965ce98 Mon Sep 17 00:00:00 2001 From: Vivian A Goodrich <101133187+vgoodric@users.noreply.github.com> Date: Thu, 25 Jul 2024 12:51:41 -0600 Subject: [PATCH 4/4] MWPW-154998 [MEP][MILO] Manifests do not execute in the right order when there is a disabled manifest (#2632) add default order --- libs/features/personalization/personalization.js | 1 + test/utils/utils.test.js | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/libs/features/personalization/personalization.js b/libs/features/personalization/personalization.js index 30b993165b..cce6c71084 100644 --- a/libs/features/personalization/personalization.js +++ b/libs/features/personalization/personalization.js @@ -615,6 +615,7 @@ const createDefaultExperiment = (manifest) => ({ disabled: manifest.disabled, event: manifest.event, manifest: manifest.manifestPath, + executionOrder: '1-1', selectedVariant: { commands: [], fragments: [] }, selectedVariantName: 'default', variantNames: ['all'], diff --git a/test/utils/utils.test.js b/test/utils/utils.test.js index e75e67afd4..586183ec6a 100644 --- a/test/utils/utils.test.js +++ b/test/utils/utils.test.js @@ -631,7 +631,7 @@ describe('Utils', () => { document.head.innerHTML = await readFile({ path: './mocks/head-personalization.html' }); await utils.loadArea(); const resultConfig = utils.getConfig(); - const resultExperiment = resultConfig.mep.experiments[2]; + const resultExperiment = resultConfig.mep.experiments[0]; expect(resultConfig.mep.preview).to.be.true; expect(resultConfig.mep.experiments.length).to.equal(3); expect(resultExperiment.manifest).to.equal('/products/special-offers-manifest.json');