'], + }, + ]); + const previewFragment = mockFragment([ + { + name: 'prices', + values: ['
'], + }, + ]); + const editor = mockEditor(sourceFragment, previewFragment); + const card = document.createElement('merch-card'); + const resolvedPrice = document.createElement('span'); + resolvedPrice.setAttribute('is', 'inline-price'); + resolvedPrice.setAttribute('data-template', 'price'); + resolvedPrice.setAttribute('data-wcs-osi', 'abc'); + const priceInner = document.createElement('span'); + priceInner.className = 'price'; + priceInner.append(document.createTextNode('26,21 €/mois')); + const taxLabel = document.createElement('span'); + taxLabel.className = 'price-tax-inclusivity'; + taxLabel.textContent = 'TTC'; + priceInner.append(taxLabel); + resolvedPrice.append(priceInner); + card.append(resolvedPrice); + editor.querySelector = sandbox.stub().withArgs('merch-card').returns(card); + editorStub.withArgs('mas-fragment-editor').returns(editor); + + const priceField = el.copyableFields.find((f) => f.name === 'prices'); + expect(priceField.preview).to.include('TTC'); + expect(priceField.preview).to.include('26,21'); + }); + it('should resolve inline-price tokens inside description from rendered preview card', () => { const sourceFragment = mockFragment([ { diff --git a/web-components/dist/mas-field.js b/web-components/dist/mas-field.js index f81d9a982..ba529b0fc 100644 --- a/web-components/dist/mas-field.js +++ b/web-components/dist/mas-field.js @@ -1,8 +1,8 @@ -var O=n=>{throw TypeError(n)};var C=(n,E,e)=>E.has(n)||O("Cannot "+e);var a=(n,E,e)=>(C(n,E,"read from private field"),e?e.call(n):E.get(n)),_=(n,E,e)=>E.has(n)?O("Cannot add the same private member more than once"):E instanceof WeakSet?E.add(n):E.set(n,e),d=(n,E,e,t)=>(C(n,E,"write to private field"),t?t.call(n,e):E.set(n,e),e),i=(n,E,e)=>(C(n,E,"access private method"),e);var w=Object.freeze({MONTH:"MONTH",YEAR:"YEAR",TWO_YEARS:"TWO_YEARS",THREE_YEARS:"THREE_YEARS",PERPETUAL:"PERPETUAL",TERM_LICENSE:"TERM_LICENSE",ACCESS_PASS:"ACCESS_PASS",THREE_MONTHS:"THREE_MONTHS",SIX_MONTHS:"SIX_MONTHS"}),k=Object.freeze({ANNUAL:"ANNUAL",MONTHLY:"MONTHLY",TWO_YEARS:"TWO_YEARS",THREE_YEARS:"THREE_YEARS",P1D:"P1D",P1Y:"P1Y",P3Y:"P3Y",P10Y:"P10Y",P15Y:"P15Y",P3D:"P3D",P7D:"P7D",P30D:"P30D",HALF_YEARLY:"HALF_YEARLY",QUARTERLY:"QUARTERLY"});var U='span[is="inline-price"][data-wcs-osi]',g='a[is="checkout-link"][data-wcs-osi],button[is="checkout-button"][data-wcs-osi]';var V='a[is="upt-link"]',K=`${U},${g},${V}`;var N="aem:load";var W=Object.freeze({SEGMENTATION:"segmentation",BUNDLE:"bundle",COMMITMENT:"commitment",RECOMMENDATION:"recommendation",EMAIL:"email",PAYMENT:"payment",CHANGE_PLAN_TEAM_PLANS:"change-plan/team-upgrade/plans",CHANGE_PLAN_TEAM_PAYMENT:"change-plan/team-upgrade/payment"});var B=Object.freeze({STAGE:"STAGE",PRODUCTION:"PRODUCTION",LOCAL:"LOCAL"});var F="mas-field",b=/(accent|primary|secondary)(-(outline|link))?/,G=` +var x=t=>{throw TypeError(t)};var C=(t,r,e)=>r.has(t)||x("Cannot "+e);var i=(t,r,e)=>(C(t,r,"read from private field"),e?e.call(t):r.get(t)),l=(t,r,e)=>r.has(t)?x("Cannot add the same private member more than once"):r instanceof WeakSet?r.add(t):r.set(t,e),A=(t,r,e,n)=>(C(t,r,"write to private field"),n?n.call(t,e):r.set(t,e),e),a=(t,r,e)=>(C(t,r,"access private method"),e);var k=Object.freeze({MONTH:"MONTH",YEAR:"YEAR",TWO_YEARS:"TWO_YEARS",THREE_YEARS:"THREE_YEARS",PERPETUAL:"PERPETUAL",TERM_LICENSE:"TERM_LICENSE",ACCESS_PASS:"ACCESS_PASS",THREE_MONTHS:"THREE_MONTHS",SIX_MONTHS:"SIX_MONTHS"}),$=Object.freeze({ANNUAL:"ANNUAL",MONTHLY:"MONTHLY",TWO_YEARS:"TWO_YEARS",THREE_YEARS:"THREE_YEARS",P1D:"P1D",P1Y:"P1Y",P3Y:"P3Y",P10Y:"P10Y",P15Y:"P15Y",P3D:"P3D",P7D:"P7D",P30D:"P30D",HALF_YEARLY:"HALF_YEARLY",QUARTERLY:"QUARTERLY"});var b='span[is="inline-price"][data-wcs-osi]',V='a[is="checkout-link"][data-wcs-osi],button[is="checkout-button"][data-wcs-osi]';var y='a[is="upt-link"]',q=`${b},${V},${y}`;var S="aem:load";var Q=Object.freeze({SEGMENTATION:"segmentation",BUNDLE:"bundle",COMMITMENT:"commitment",RECOMMENDATION:"recommendation",EMAIL:"email",PAYMENT:"payment",CHANGE_PLAN_TEAM_PLANS:"change-plan/team-upgrade/plans",CHANGE_PLAN_TEAM_PAYMENT:"change-plan/team-upgrade/payment"});var Z=Object.freeze({STAGE:"STAGE",PRODUCTION:"PRODUCTION",LOCAL:"LOCAL"});var M="mas-ff-defaults";var G="mas-commerce-service";function O(){return document.getElementsByTagName(G)?.[0]}var D="mas-field",v=/(accent|primary|secondary)(-(outline|link))?/;function P(t,r){if(!t?.closest?.(D))return r;r[M]=!0}function B(t){!t?.providers||t.providers.has(P)||t.providers.price(P)}var K=` mas-field div[slot="footer"] { display: flex; gap: 24px; flex-wrap: wrap; align-items: center; } -`;if(!document.querySelector("style[data-mas-field]")){let n=document.createElement("style");n.setAttribute("data-mas-field",""),n.textContent=G,document.head.append(n)}var A,m,R,l,S,o,h,P,f,x,M,I,D,H,L=class extends HTMLElement{constructor(){super(...arguments);_(this,o);_(this,A,null);_(this,m,!1);_(this,R,null);_(this,l,null);_(this,S,e=>{e.target===this.aemFragment&&(d(this,R,e.detail?.fields||null),d(this,m,!0),i(this,o,M).call(this))})}static get observedAttributes(){return["field"]}attributeChangedCallback(e,t,r){e==="field"&&(d(this,A,r),i(this,o,M).call(this))}connectedCallback(){this.addEventListener(N,a(this,S)),i(this,o,h).call(this),this.aemFragment?.setAttribute("hidden","")}disconnectedCallback(){this.removeEventListener(N,a(this,S))}checkReady(){return a(this,m)?Promise.resolve(!0):new Promise(e=>{this.addEventListener(N,()=>e(!0),{once:!0})})}get aemFragment(){return this.querySelector("aem-fragment")}};A=new WeakMap,m=new WeakMap,R=new WeakMap,l=new WeakMap,S=new WeakMap,o=new WeakSet,h=function(){if(a(this,l)?.isConnected)return a(this,l);let e=this.querySelector(':scope > span[data-role="mas-field-content"]');if(e)return d(this,l,e),e;let t=document.createElement("span");return t.setAttribute("data-role","mas-field-content"),this.append(t),d(this,l,t),t},P=function(e){return e&&typeof e=="object"&&"value"in e?e.value:e},f=function(e){let t=e?.match(/^(.+)\[(\d+)\]$/);return t?{fieldName:t[1],index:parseInt(t[2],10)}:{fieldName:e,index:null}},x=function(e,t){if(typeof e!="string")return null;let r=document.createElement("template");r.innerHTML=e;let s=[...r.content.querySelectorAll("a")][t-1];return s?(s.removeAttribute("class"),s.outerHTML):null},M=function(){if(!a(this,R)||!a(this,A))return;let{fieldName:e,index:t}=i(this,o,f).call(this,a(this,A)),r=i(this,o,P).call(this,a(this,R)[e]);if(r===void 0)return;let s=i(this,o,h).call(this),c;if(t!==null){if(c=i(this,o,x).call(this,r,t),c===null)return}else c=i(this,o,H).call(this,r);if(typeof c=="string"){if(a(this,A)==="ctas"){let u=i(this,o,D).call(this,c);if(u){s.replaceChildren(u);return}}s.innerHTML=c;return}s.textContent=c==null?"":String(c)},I=function(e){if(!!!e.getAttribute("data-wcs-osi"))return e.cloneNode(!0);let r=b.exec(e.className??"")?.[0]??"accent",s=r.startsWith("accent"),c=r.includes("-link"),T=customElements.get("checkout-link")?.createCheckoutLink(e.dataset,e.textContent)??(()=>{let p=document.createElement("a",{is:"checkout-link"});return p.innerHTML=`${e.textContent}`,p})();for(let{name:p,value:Y}of e.attributes)["class","is","href"].includes(p)||T.setAttribute(p,Y);return T.firstElementChild?.classList.add("spectrum-Button-label"),c||(T.classList.add("button","con-button"),s?T.classList.add("blue"):r.startsWith("primary")&&!r.includes("-outline")&&T.classList.add("fill")),T},D=function(e){let r=[...new DOMParser().parseFromString(e,"text/html").body.querySelectorAll("a")];if(!r.length)return null;let s=document.createElement("div");return s.setAttribute("slot","footer"),s.append(...r.map(c=>i(this,o,I).call(this,c))),s},H=function(e){if(typeof e!="string")return e;let t=e.trim();if(!(t.startsWith("
")&&t.endsWith("
")))return e;let s=t.slice(3,-4);return s.includes("")?e:s};customElements.define(F,L); +`;if(!document.querySelector("style[data-mas-field]")){let t=document.createElement("style");t.setAttribute("data-mas-field",""),t.textContent=K,document.head.append(t)}var _,m,T,d,R,o,L,I,H,g,f,w,U,Y,N=class extends HTMLElement{constructor(){super(...arguments);l(this,o);l(this,_,null);l(this,m,!1);l(this,T,null);l(this,d,null);l(this,R,e=>{e.target===this.aemFragment&&(A(this,T,e.detail?.fields||null),A(this,m,!0),a(this,o,f).call(this))})}static get observedAttributes(){return["field"]}attributeChangedCallback(e,n,s){e==="field"&&(A(this,_,s),a(this,o,f).call(this))}connectedCallback(){this.addEventListener(S,i(this,R)),a(this,o,L).call(this),this.aemFragment?.setAttribute("hidden",""),B(O())}disconnectedCallback(){this.removeEventListener(S,i(this,R))}checkReady(){return i(this,m)?Promise.resolve(!0):new Promise(e=>{this.addEventListener(S,()=>e(!0),{once:!0})})}get aemFragment(){return this.querySelector("aem-fragment")}};_=new WeakMap,m=new WeakMap,T=new WeakMap,d=new WeakMap,R=new WeakMap,o=new WeakSet,L=function(){if(i(this,d)?.isConnected)return i(this,d);let e=this.querySelector(':scope > span[data-role="mas-field-content"]');if(e)return A(this,d,e),e;let n=document.createElement("span");return n.setAttribute("data-role","mas-field-content"),this.append(n),A(this,d,n),n},I=function(e){return e&&typeof e=="object"&&"value"in e?e.value:e},H=function(e){let n=e?.match(/^(.+)\[(\d+)\]$/);return n?{fieldName:n[1],index:parseInt(n[2],10)}:{fieldName:e,index:null}},g=function(e,n){if(typeof e!="string")return null;let s=document.createElement("template");s.innerHTML=e;let c=[...s.content.querySelectorAll("a")][n-1];return c?(c.removeAttribute("class"),c.outerHTML):null},f=function(){if(!i(this,T)||!i(this,_))return;let{fieldName:e,index:n}=a(this,o,H).call(this,i(this,_)),s=a(this,o,I).call(this,i(this,T)[e]);if(s===void 0)return;let c=a(this,o,L).call(this),E;if(n!==null){if(E=a(this,o,g).call(this,s,n),E===null)return}else E=a(this,o,Y).call(this,s);if(typeof E=="string"){if(i(this,_)==="ctas"){let h=a(this,o,U).call(this,E);if(h){c.replaceChildren(h);return}}c.innerHTML=E;return}c.textContent=E==null?"":String(E)},w=function(e){if(!!!e.getAttribute("data-wcs-osi"))return e.cloneNode(!0);let s=v.exec(e.className??"")?.[0]??"accent",c=s.startsWith("accent"),E=s.includes("-link"),u=customElements.get("checkout-link")?.createCheckoutLink(e.dataset,e.textContent)??(()=>{let p=document.createElement("a",{is:"checkout-link"});return p.innerHTML=`${e.textContent}`,p})();for(let{name:p,value:F}of e.attributes)["class","is","href"].includes(p)||u.setAttribute(p,F);return u.firstElementChild?.classList.add("spectrum-Button-label"),E||(u.classList.add("button","con-button"),c?u.classList.add("blue"):s.startsWith("primary")&&!s.includes("-outline")&&u.classList.add("fill")),u},U=function(e){let s=[...new DOMParser().parseFromString(e,"text/html").body.querySelectorAll("a")];if(!s.length)return null;let c=document.createElement("div");return c.setAttribute("slot","footer"),c.append(...s.map(E=>a(this,o,w).call(this,E))),c},Y=function(e){if(typeof e!="string")return e;let n=e.trim();if(!(n.startsWith("
")&&n.endsWith("
")))return e;let c=n.slice(3,-4);return c.includes("")?e:c};customElements.define(D,N);export{P as priceOptionsProvider};
diff --git a/web-components/src/mas-field.js b/web-components/src/mas-field.js
index e1bf95033..3b8628fd9 100644
--- a/web-components/src/mas-field.js
+++ b/web-components/src/mas-field.js
@@ -1,8 +1,27 @@
-import { EVENT_AEM_LOAD } from './constants.js';
+import { EVENT_AEM_LOAD, FF_DEFAULTS } from './constants.js';
+import { getService } from './utils.js';
const MAS_FIELD_TAG = 'mas-field';
const CHECKOUT_STYLE_PATTERN = /(accent|primary|secondary)(-(outline|link))?/;
+/**
+ * Opts headless mas-field-hosted inline-prices into FF_DEFAULTS so they
+ * resolve displayTax / displayPerUnit from country+language defaults
+ * (the same way merch-card does for its aem-fragment-backed prices).
+ * Without this, prices rendered through