MWPW-161625: fix mas:pending event on requestUpdate

libs/deps/mas/merch-card-collection.js

@@ -1,4 +1,4 @@
-var N=Object.defineProperty;var y=(s,e,t)=>e in s?N(s,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):s[e]=t;var E=(s,e,t)=>(y(s,typeof e!="symbol"?e+"":e,t),t);import{html as l,LitElement as O}from"../lit-all.min.js";var f=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 x="hashchange";function L(s=window.location.hash){let e=[],t=s.replace(/^#/,"").split("&");for(let o of t){let[n,i=""]=o.split("=");n&&e.push([n,decodeURIComponent(i.replace(/\+/g," "))])}return Object.fromEntries(e)}function d(s){let e=new URLSearchParams(window.location.hash.slice(1));Object.entries(s).forEach(([n,i])=>{i?e.set(n,i):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 T(s){let e=()=>{if(window.location.hash&&!window.location.hash.includes("="))return;let t=L(window.location.hash);s(t)};return e(),window.addEventListener(x,e),()=>{window.removeEventListener(x,e)}}var g="merch-card-collection:sort",S="merch-card-collection:showmore";var A="(max-width: 1199px)",R="(min-width: 768px)",C="(min-width: 1200px)";import{css as M,unsafeCSS as w}from"../lit-all.min.js";var b=M`
+var y=Object.defineProperty;var N=(s,e,t)=>e in s?y(s,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):s[e]=t;var E=(s,e,t)=>(N(s,typeof e!="symbol"?e+"":e,t),t);import{html as l,LitElement as O}from"../lit-all.min.js";var f=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 x="hashchange";function L(s=window.location.hash){let e=[],t=s.replace(/^#/,"").split("&");for(let o of t){let[n,i=""]=o.split("=");n&&e.push([n,decodeURIComponent(i.replace(/\+/g," "))])}return Object.fromEntries(e)}function d(s){let e=new URLSearchParams(window.location.hash.slice(1));Object.entries(s).forEach(([n,i])=>{i?e.set(n,i):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 T(s){let e=()=>{if(window.location.hash&&!window.location.hash.includes("="))return;let t=L(window.location.hash);s(t)};return e(),window.addEventListener(x,e),()=>{window.removeEventListener(x,e)}}var g="merch-card-collection:sort",S="merch-card-collection:showmore";var A="(max-width: 1199px)",R="(min-width: 768px)",C="(min-width: 1200px)";import{css as M,unsafeCSS as w}from"../lit-all.min.js";var b=M`
     #header,
     #resultText,
     #footer {

libs/deps/mas/merch-sidenav.js

@@ -1,4 +1,4 @@
-var M=Object.defineProperty;var V=(o,e,t)=>e in o?M(o,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):o[e]=t;var i=(o,e,t)=>(V(o,typeof e!="symbol"?e+"":e,t),t),g=(o,e,t)=>{if(!e.has(o))throw TypeError("Cannot "+t)};var v=(o,e,t)=>(g(o,e,"read from private field"),t?t.call(o):e.get(o)),S=(o,e,t)=>{if(e.has(o))throw TypeError("Cannot add the same private member more than once");e instanceof WeakSet?e.add(o):e.set(o,t)},b=(o,e,t,s)=>(g(o,e,"write to private field"),s?s.call(o,t):e.set(o,t),t);import{html as O,css as Y,LitElement as K}from"/libs/deps/lit-all.min.js";var c=class{constructor(e,t){this.key=Symbol("match-media-key"),this.matches=!1,this.host=e,this.host.addController(this),this.media=window.matchMedia(t),this.matches=this.media.matches,this.onChange=this.onChange.bind(this),e.addController(this)}hostConnected(){var e;(e=this.media)==null||e.addEventListener("change",this.onChange)}hostDisconnected(){var e;(e=this.media)==null||e.removeEventListener("change",this.onChange)}onChange(e){this.matches!==e.matches&&(this.matches=e.matches,this.host.requestUpdate(this.key,!this.matches))}};import{css as I}from"/libs/deps/lit-all.min.js";var u=I`
+var M=Object.defineProperty;var V=(o,e,t)=>e in o?M(o,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):o[e]=t;var i=(o,e,t)=>(V(o,typeof e!="symbol"?e+"":e,t),t),v=(o,e,t)=>{if(!e.has(o))throw TypeError("Cannot "+t)};var g=(o,e,t)=>(v(o,e,"read from private field"),t?t.call(o):e.get(o)),S=(o,e,t)=>{if(e.has(o))throw TypeError("Cannot add the same private member more than once");e instanceof WeakSet?e.add(o):e.set(o,t)},b=(o,e,t,s)=>(v(o,e,"write to private field"),s?s.call(o,t):e.set(o,t),t);import{html as O,css as Y,LitElement as K}from"/libs/deps/lit-all.min.js";var c=class{constructor(e,t){this.key=Symbol("match-media-key"),this.matches=!1,this.host=e,this.host.addController(this),this.media=window.matchMedia(t),this.matches=this.media.matches,this.onChange=this.onChange.bind(this),e.addController(this)}hostConnected(){var e;(e=this.media)==null||e.addEventListener("change",this.onChange)}hostDisconnected(){var e;(e=this.media)==null||e.removeEventListener("change",this.onChange)}onChange(e){this.matches!==e.matches&&(this.matches=e.matches,this.host.requestUpdate(this.key,!this.matches))}};import{css as I}from"/libs/deps/lit-all.min.js";var u=I`
     h2 {
         font-size: 11px;
         font-style: normal;
@@ -90,7 +90,7 @@ var M=Object.defineProperty;var V=(o,e,t)=>e in o?M(o,e,{enumerable:!0,configura
         `}get asAside(){return O`<sp-theme  color="light" scale="medium"
             ><h2>${this.sidenavTitle}</h2>
             <slot></slot
-        ></sp-theme>`}get dialog(){return this.shadowRoot.querySelector("sp-dialog-base")}closeModal(t){t.preventDefault(),this.dialog?.close(),document.body.classList.remove("merch-modal")}openModal(){this.updateComplete.then(async()=>{D(this.dialog),document.body.classList.add("merch-modal");let t={trigger:v(this,p),notImmediatelyClosable:!0,type:"auto"},s=await window.__merch__spectrum_Overlay.open(this.dialog,t);s.addEventListener("close",()=>{this.modal=!1,document.body.classList.remove("merch-modal"),k(this.dialog)}),this.shadowRoot.querySelector("sp-theme").append(s)})}updated(){this.modal&&this.openModal()}showModal({target:t}){b(this,p,t),this.modal=!0}};p=new WeakMap,i(h,"properties",{sidenavTitle:{type:String},closeText:{type:String,attribute:"close-text"},modal:{type:Boolean,attribute:"modal",reflect:!0}}),i(h,"styles",[Y`
+        ></sp-theme>`}get dialog(){return this.shadowRoot.querySelector("sp-dialog-base")}closeModal(t){t.preventDefault(),this.dialog?.close(),document.body.classList.remove("merch-modal")}openModal(){this.updateComplete.then(async()=>{D(this.dialog),document.body.classList.add("merch-modal");let t={trigger:g(this,p),notImmediatelyClosable:!0,type:"auto"},s=await window.__merch__spectrum_Overlay.open(this.dialog,t);s.addEventListener("close",()=>{this.modal=!1,document.body.classList.remove("merch-modal"),k(this.dialog)}),this.shadowRoot.querySelector("sp-theme").append(s)})}updated(){this.modal&&this.openModal()}showModal({target:t}){b(this,p,t),this.modal=!0}};p=new WeakMap,i(h,"properties",{sidenavTitle:{type:String},closeText:{type:String,attribute:"close-text"},modal:{type:Boolean,attribute:"modal",reflect:!0}}),i(h,"styles",[Y`
             :host {
                 display: block;
                 z-index: 2;

libs/deps/mas/merch-subscription-panel.js

@@ -1,4 +1,4 @@
-var A=Object.defineProperty;var y=(o,e,t)=>e in o?A(o,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):o[e]=t;var h=(o,e,t)=>(y(o,typeof e!="symbol"?e+"":e,t),t),T=(o,e,t)=>{if(!e.has(o))throw TypeError("Cannot "+t)};var u=(o,e,t)=>(T(o,e,"read from private field"),t?t.call(o):e.get(o)),_=(o,e,t)=>{if(e.has(o))throw TypeError("Cannot add the same private member more than once");e instanceof WeakSet?e.add(o):e.set(o,t)};import{html as n,LitElement as R}from"../lit-all.min.js";var i=class{constructor(e,t){this.key=Symbol("match-media-key"),this.matches=!1,this.host=e,this.host.addController(this),this.media=window.matchMedia(t),this.matches=this.media.matches,this.onChange=this.onChange.bind(this),e.addController(this)}hostConnected(){var e;(e=this.media)==null||e.addEventListener("change",this.onChange)}hostDisconnected(){var e;(e=this.media)==null||e.removeEventListener("change",this.onChange)}onChange(e){this.matches!==e.matches&&(this.matches=e.matches,this.host.requestUpdate(this.key,!this.matches))}};import{css as C}from"../lit-all.min.js";var S=C`
+var A=Object.defineProperty;var y=(o,e,t)=>e in o?A(o,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):o[e]=t;var h=(o,e,t)=>(y(o,typeof e!="symbol"?e+"":e,t),t),C=(o,e,t)=>{if(!e.has(o))throw TypeError("Cannot "+t)};var u=(o,e,t)=>(C(o,e,"read from private field"),t?t.call(o):e.get(o)),_=(o,e,t)=>{if(e.has(o))throw TypeError("Cannot add the same private member more than once");e instanceof WeakSet?e.add(o):e.set(o,t)};import{html as n,LitElement as R}from"../lit-all.min.js";var i=class{constructor(e,t){this.key=Symbol("match-media-key"),this.matches=!1,this.host=e,this.host.addController(this),this.media=window.matchMedia(t),this.matches=this.media.matches,this.onChange=this.onChange.bind(this),e.addController(this)}hostConnected(){var e;(e=this.media)==null||e.addEventListener("change",this.onChange)}hostDisconnected(){var e;(e=this.media)==null||e.removeEventListener("change",this.onChange)}onChange(e){this.matches!==e.matches&&(this.matches=e.matches,this.host.requestUpdate(this.key,!this.matches))}};import{css as T}from"../lit-all.min.js";var S=T`
     :host {
         --merch-focused-outline: var(--merch-color-focus-ring) auto 1px;
         background-color: #f5f5f5;

libs/features/mas/docs/checkout-link.html

@@ -284,10 +284,6 @@ <h2 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" hre
 </thead>
 <tbody>
 <tr>
-<td><code>mas:pending</code></td>
-<td>fires when checkout link starts loading</td>
-</tr>
-<tr>
 <td><code>mas:resolved</code></td>
 <td>fires when the offer is successfully resolved</td>
 </tr>
@@ -323,9 +319,6 @@ <h3 id="example-2" tabindex="-1">Example <a class="header-anchor" href="#example
     <span class="hljs-keyword">const</span> <span class="hljs-title function_">logger</span> = (<span class="hljs-params">...messages</span>) =&gt;
         (log.<span class="hljs-property">innerHTML</span> = <span class="hljs-string">`<span class="hljs-subst">${messages.join(<span class="hljs-string">&#x27; &#x27;</span>)}</span>&lt;br&gt;<span class="hljs-subst">${log.innerHTML}</span>`</span>);
     <span class="hljs-keyword">const</span> eventsDemo = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&#x27;eventsDemo&#x27;</span>);
-    eventsDemo.<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">&#x27;mas:pending&#x27;</span>, <span class="hljs-function">() =&gt;</span>
-        <span class="hljs-title function_">logger</span>(<span class="hljs-string">&#x27;checkout-link pending&#x27;</span>),
-    );
     eventsDemo.<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">&#x27;mas:resolved&#x27;</span>, <span class="hljs-function">(<span class="hljs-params">e</span>) =&gt;</span>
         <span class="hljs-title function_">logger</span>(<span class="hljs-string">&#x27;checkout-link resolved&#x27;</span>),
     );

libs/features/mas/docs/inline-price.html

@@ -271,10 +271,6 @@ <h2 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" hre
 </thead>
 <tbody>
 <tr>
-<td><code>mas:pending</code></td>
-<td>Fires when inline price starts loading</td>
-</tr>
-<tr>
 <td><code>mas:resolved</code></td>
 <td>Fires when the price is successfully resolved</td>
 </tr>
@@ -300,7 +296,6 @@ <h3 id="example-2" tabindex="-1">Example <a class="header-anchor" href="#example
     <span class="hljs-keyword">const</span> <span class="hljs-title function_">logger</span> = (<span class="hljs-params">...messages</span>) =&gt;
         (log.<span class="hljs-property">innerHTML</span> = <span class="hljs-string">`<span class="hljs-subst">${messages.join(<span class="hljs-string">&#x27; &#x27;</span>)}</span>&lt;br&gt;<span class="hljs-subst">${log.innerHTML}</span>`</span>);
     <span class="hljs-keyword">const</span> span = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&#x27;ip2&#x27;</span>);
-    span.<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">&#x27;mas:pending&#x27;</span>, <span class="hljs-function">() =&gt;</span> <span class="hljs-title function_">logger</span>(<span class="hljs-string">&#x27;inline-price pending&#x27;</span>));
     span.<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">&#x27;mas:resolved&#x27;</span>, <span class="hljs-function">() =&gt;</span>
         <span class="hljs-title function_">logger</span>(<span class="hljs-string">&#x27;inline-price resolved&#x27;</span>),
     );

libs/features/mas/docs/mas.js.html

@@ -52,7 +52,7 @@ <h2 id="introduction" tabindex="-1">Introduction <a class="header-anchor" href="
 <h2 id="enablement-mas-commerce-service" tabindex="-1">Enablement <code>mas-commerce-service</code> <a class="header-anchor" href="#enablement-mas-commerce-service" href="#enablement-mas-commerce-service" title="Permalink to this heading">#</a></h2>
 <p>You do need to have mas.js on your page / application, including it can be done like the following</p>
 <pre><code class="hljs language-html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>
-    <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://www.adobe.com/libs/features/mas/mas/dist/mas.js&quot;</span>
+    <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://www.adobe.com/libs/features/mas/dist/mas.js&quot;</span>
     <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;module&quot;</span>
 &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
 </code></pre>

libs/features/mas/docs/src/checkout-link.md

@@ -154,7 +154,6 @@ Two photoshop and three acrobat pro single apps (TEAMS):
 
 | Event          | Description                                        |
 | -------------- | -------------------------------------------------- |
-| `mas:pending`  | fires when checkout link starts loading            |
 | `mas:resolved` | fires when the offer is successfully resolved      |
 | `mas:failed`   | fires when the offer could not be found or fetched |
 | `click`        | native click event on the `a` element              |
@@ -185,9 +184,6 @@ For each event except `click`, the following css classes are toggled on the elem
     const logger = (...messages) =>
         (log.innerHTML = `${messages.join(' ')}<br>${log.innerHTML}`);
     const eventsDemo = document.getElementById('eventsDemo');
-    eventsDemo.addEventListener('mas:pending', () =>
-        logger('checkout-link pending'),
-    );
     eventsDemo.addEventListener('mas:resolved', (e) =>
         logger('checkout-link resolved'),
     );

libs/features/mas/docs/src/inline-price.md

@@ -148,7 +148,6 @@ vs
 
 | Event          | Description                                        |
 | -------------- | -------------------------------------------------- |
-| `mas:pending`  | Fires when inline price starts loading             |
 | `mas:resolved` | Fires when the price is successfully resolved      |
 | `mas:failed`   | Fires when the price could not be found or fetched |
 
@@ -172,7 +171,6 @@ For each event, the following CSS classes are toggled on the element: `placehold
     const logger = (...messages) =>
         (log.innerHTML = `${messages.join(' ')}<br>${log.innerHTML}`);
     const span = document.getElementById('ip2');
-    span.addEventListener('mas:pending', () => logger('inline-price pending'));
     span.addEventListener('mas:resolved', () =>
         logger('inline-price resolved'),
     );

libs/features/mas/docs/src/mas.js.md

@@ -16,7 +16,7 @@ You do need to have mas.js on your page / application, including it can be done
 
 ```html
 <script
-    src="https://www.adobe.com/libs/features/mas/mas/dist/mas.js"
+    src="https://www.adobe.com/libs/features/mas/dist/mas.js"
     type="module"
 ></script>
 ```

libs/features/mas/src/constants.js

@@ -64,7 +64,6 @@ export const ERROR_MESSAGE_OFFER_NOT_FOUND = 'Commerce offer not found';
 export const ERROR_MESSAGE_MISSING_LITERALS_URL = 'Literals URL not provided';
 
 export const EVENT_TYPE_FAILED = 'mas:failed';
-export const EVENT_TYPE_PENDING = 'mas:pending';
 export const EVENT_TYPE_RESOLVED = 'mas:resolved';
 
 export const LOG_NAMESPACE = 'mas/commerce';

libs/features/mas/src/mas-element.js

@@ -3,7 +3,6 @@ import {
     CLASS_NAME_PENDING,
     CLASS_NAME_RESOLVED,
     EVENT_TYPE_FAILED,
-    EVENT_TYPE_PENDING,
     EVENT_TYPE_RESOLVED,
     STATE_FAILED,
     STATE_PENDING,
@@ -13,18 +12,6 @@ import { ignore } from './external.js';
 import { discoverService, setImmediate, useService } from './utilities.js';
 import { Log } from './log.js';
 
-const MasElementConstants = {
-    CLASS_NAME_FAILED,
-    CLASS_NAME_PENDING,
-    CLASS_NAME_RESOLVED,
-    EVENT_TYPE_FAILED,
-    EVENT_TYPE_PENDING,
-    EVENT_TYPE_RESOLVED,
-    STATE_FAILED,
-    STATE_PENDING,
-    STATE_RESOLVED,
-};
-
 const StateClassName = {
     [STATE_FAILED]: CLASS_NAME_FAILED,
     [STATE_PENDING]: CLASS_NAME_PENDING,
@@ -33,7 +20,6 @@ const StateClassName = {
 
 const StateEventType = {
     [STATE_FAILED]: EVENT_TYPE_FAILED,
-    [STATE_PENDING]: EVENT_TYPE_PENDING,
     [STATE_RESOLVED]: EVENT_TYPE_RESOLVED,
 };
 
@@ -135,9 +121,6 @@ export class MasElement {
         this.value = value;
         this.update();
         this.log?.debug('Resolved:', { element: this.wrapperElement, value });
-        // Allow calling code to perform sync updates of this element
-        // before notifying observers about state change
-        setImmediate(() => this.notify());
         return true;
     };
 
@@ -153,7 +136,6 @@ export class MasElement {
         this.state = STATE_FAILED;
         this.update();
         this.log?.error('Failed:', { element: this.wrapperElement, error });
-        setImmediate(() => this.notify());
         return true;
     }
 
@@ -166,7 +148,7 @@ export class MasElement {
         if (options) this.options = options;
         this.state = STATE_PENDING;
         this.update();
-        setImmediate(() => this.notify());
+        this.log?.debug('Pending:', { element: this.wrapperElement });
         return this.version;
     }
 
@@ -214,13 +196,15 @@ export class MasElement {
                         this.state = state;
                         this.error = error;
                         this.value = value;
-                        // Update CSS and notify observers/listeners
+                        // Update CSS 
                         this.update();
-                        this.notify();
                     }
+                    // notify observers/listeners
+                    this.notify();
                 } catch (error) {
                     log.error(`Failed to render mas-element: `, error);
                     this.toggleFailed(this.version, error, options);
+                    this.notify();
                 }
             }
         });

nala/features/mas/docs/docs.spec.js

@@ -0,0 +1,15 @@
+/* eslint-disable max-len */
+
+module.exports = {
+  FeatureName: 'Merch CCD Card Feature',
+  features: [
+    // Checkout Link Page
+    {
+      tcid: '0',
+      name: '@MAS-DOCS-checkout-link',
+      path: '/libs/features/mas/docs/checkout-link.html',
+      browserParams: '?theme=dark',
+      tags: '@mas-docs @checkout-link @commerce @smoke @regression @milo',
+    },
+  ],
+};