MWPW-161355: Update MAS documentation

libs/features/mas/build-docs.mjs

@@ -25,8 +25,6 @@ if (!targetFile) {
     process.exit(1);
 }
 
-const skipMas = process.argv.includes('--skip-mas');
-
 // Initialize markdown-it with desired plugins
 const md = markdownIt({
     html: true,
@@ -76,14 +74,16 @@ const htmlTemplate = `
   </script>
   <!-- Include your custom element script as an ES6 module -->
   <script src="../../../features/spectrum-web-components/dist/theme.js" type="module"></script>
+  <script src="../../../features/spectrum-web-components/dist/action-button.js" type="module"></script>
   <script src="../../../features/spectrum-web-components/dist/button.js" type="module"></script>
   <script type="module" src="../../../deps/mas/mas.js"></script>
 
   <script type="module">
     const params = new URLSearchParams(document.location.search);
     const masCommerceService = document.createElement('mas-commerce-service');
-    ['locale','language','env'].forEach((attribute) => {
-      const value = params.get(attribute);
+    ['locale','language','env','cli'].forEach((attribute) => {
+      let value = params.get(attribute);
+      if (value === 'cli') attribute = 'checkout-client-id';
       if (value) masCommerceService.setAttribute(attribute, value);
     });
     document.head.appendChild(masCommerceService);

libs/features/mas/commerce/checkout-link.md

@@ -164,29 +164,43 @@ For each event except `click`, the following css classes are toggled on the elem
 ### Example
 
 ```html {.demo}
-<a
-    id="co2"
-    href="#"
-    is="checkout-link"
-    data-wcs-osi="A1xn6EL4pK93bWjM8flffQpfEL-bnvtoQKQAvkx574M"
-    >Buy now (click me)</a
->
+<div id="eventsDemo">
+    <a
+        is="checkout-link"
+        data-wcs-osi="A1xn6EL4pK93bWjM8flffQpfEL-bnvtoQKQAvkx574M"
+        >Buy now (click me)</a
+    >
+    <br />
+    <a
+        is="checkout-link"
+        data-wcs-osi="A1xn6EL4pK93bWjM8flffQpfEL-bnvtoQKQAvkx574M"
+        ><span>Span + <strong>Strong + Buy now</strong></span></a
+    >
+</div>
 <button id="btnRefresh">Refresh</button>
 <script type="module">
     const log = document.getElementById('log');
     const logger = (...messages) =>
         (log.innerHTML = `${messages.join(' ')}<br>${log.innerHTML}`);
-    const a = document.getElementById('co2');
-    a.addEventListener('mas:pending', () => logger('checkout-link pending'));
-    a.addEventListener('mas:resolved', () => logger('checkout-link resolved'));
-    a.addEventListener('mas:failed', () => logger('checkout-link failed'));
-    a.addEventListener('click', (e) => {
+    const eventsDemo = document.getElementById('eventsDemo');
+    eventsDemo.addEventListener('mas:pending', () =>
+        logger('checkout-link pending'),
+    );
+    eventsDemo.addEventListener('mas:resolved', (e) =>
+        logger('checkout-link resolved'),
+    );
+    eventsDemo.addEventListener('mas:failed', () =>
+        logger('checkout-link failed'),
+    );
+    eventsDemo.addEventListener('click', (e) => {
         e.preventDefault();
         e.stopPropagation();
         logger('checkout link is clicked: ', e.target.href);
     });
     document.getElementById('btnRefresh').addEventListener('click', () => {
-        a.requestUpdate(true);
+        [...eventsDemo.querySelectorAll('a')].forEach((a) =>
+            a.requestUpdate(true),
+        );
     });
 </script>
 ```

libs/features/mas/commerce/src/checkout-link.js

@@ -13,6 +13,7 @@ export class CheckoutLink extends HTMLAnchorElement {
     static is = 'checkout-link';
     static tag = 'a';
 
+    /* c8 ignore next 1 */
     #checkoutActionHandler;
 
     masElement = new MasElement(this);
@@ -23,10 +24,12 @@ export class CheckoutLink extends HTMLAnchorElement {
 
     connectedCallback() {
         this.masElement.connectedCallback();
+        this.addEventListener('click', this.handleClick);
     }
 
     disconnectedCallback() {
         this.masElement.disconnectedCallback();
+        this.removeEventListener('click', this.handleClick);
     }
 
     onceSettled() {
@@ -37,13 +40,17 @@ export class CheckoutLink extends HTMLAnchorElement {
         return this.masElement.value;
     }
 
+    get options() {
+        return this.masElement.options;
+    }
+
     requestUpdate(force = false) {
         return this.masElement.requestUpdate(force);
     }
 
     constructor() {
         super();
-        this.addEventListener('click', this.clickHandler);
+        this.handleClick = this.handleClick.bind(this);
     }
 
     static get observedAttributes() {
@@ -107,8 +114,20 @@ export class CheckoutLink extends HTMLAnchorElement {
      * Triggers checkout action handler, if provided.
      * @param {*} event
      */
-    clickHandler(event) {
-      this.#checkoutActionHandler?.(event);
+    handleClick(event) {
+        if (event.target !== this) {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+            this.dispatchEvent(
+                new MouseEvent('click', {
+                    bubbles: true,
+                    cancelable: true,
+                    view: window,
+                }),
+            );
+            return;
+        }
+        this.#checkoutActionHandler?.(event);
     }
 
     async render(overrides = {}) {
@@ -126,8 +145,8 @@ export class CheckoutLink extends HTMLAnchorElement {
         let extraOptions;
         try {
             extraOptions = JSON.parse(options.extraOptions ?? '{}');
+            /* c8 ignore next 3 */
         } catch (e) {
-            /* c8 ignore next 2 */
             this.masElement.log?.error('cannot parse exta checkout options', e);
         }
         const version = this.masElement.togglePending(options);
@@ -139,7 +158,7 @@ export class CheckoutLink extends HTMLAnchorElement {
         const checkoutAction = await service.buildCheckoutAction?.(
             offers.flat(),
             { ...extraOptions, ...options },
-            this
+            this,
         );
         return this.renderOffers(
             offers.flat(),
@@ -173,6 +192,7 @@ export class CheckoutLink extends HTMLAnchorElement {
         options = { ...extraOptions, ...options, ...overrides };
         version ??= this.masElement.togglePending(options);
         if (this.#checkoutActionHandler) {
+            /* c8 ignore next 2 */
             this.#checkoutActionHandler = undefined;
         }
         if (checkoutAction) {
@@ -183,8 +203,8 @@ export class CheckoutLink extends HTMLAnchorElement {
             if (text) this.firstElementChild.innerHTML = text;
             if (className) this.classList.add(...className.split(' '));
             if (handler) {
-              this.setAttribute('href', '#');
-              this.#checkoutActionHandler = handler.bind(this);
+                this.setAttribute('href', '#');
+                this.#checkoutActionHandler = handler.bind(this);
             }
             return true;
         } else if (offers.length) {
@@ -200,7 +220,6 @@ export class CheckoutLink extends HTMLAnchorElement {
                 return true;
             }
         }
-        return false;
     }
 
     updateOptions(options = {}) {

libs/features/mas/commerce/src/inline-price.js

@@ -149,17 +149,22 @@ export class InlinePrice extends HTMLSpanElement {
 
     disconnectedCallback() {
         this.masElement.disconnectedCallback();
-        this.removeEventListener('click', this.handleClick.bind(this));
+        this.removeEventListener('click', this.handleClick);
     }
 
-
     handleClick(event) {
-      /* c8 ignore next 4 */
-      if (event.target === this) return;
-      // re-dispatch click event from the price element
-      event.stopImmediatePropagation();
-      this.dispatchEvent(new CustomEvent('click', { bubbles: true }));
-  }
+        /* c8 ignore next 4 */
+        if (event.target === this) return;
+        // re-dispatch click event from the price element
+        event.stopImmediatePropagation();
+        this.dispatchEvent(
+            new MouseEvent('click', {
+                bubbles: true,
+                cancelable: true,
+                view: window,
+            }),
+        );
+    }
 
     onceSettled() {
         return this.masElement.onceSettled();

libs/features/mas/commerce/test/checkout.test.js

@@ -64,6 +64,31 @@ describe('class "CheckoutLink"', () => {
             'https://commerce.adobe.com/store/email?items%5B0%5D%5Bid%5D=632B3ADD940A7FBB7864AA5AD19B8D28&cli=adobe_com&ctx=fp&co=US&lang=en',
         );
         expect(checkoutLink.value).to.be.not.empty;
+        expect(checkoutLink.options).to.be.not.empty;
+    });
+
+    it('re-dispatches click event', async () => {
+        await initMasCommerceService();
+        const checkoutLink = mockCheckoutLink('abm');
+        let targetIsCheckoutlink = false;
+        checkoutLink.addEventListener(
+            'click',
+            (event) => {
+                event.preventDefault();
+                event.stopImmediatePropagation();
+                targetIsCheckoutlink = event.target === checkoutLink;
+            },
+            { once: true },
+        );
+        await checkoutLink.onceSettled();
+        checkoutLink.firstElementChild.dispatchEvent(
+            new MouseEvent('click', {
+                bubbles: true,
+                cancelable: true,
+                view: window,
+            }),
+        );
+        expect(targetIsCheckoutlink).to.be.true;
     });
 
     it('renders link with workflow step from settings', async () => {

libs/features/mas/commerce/test/price.test.js

@@ -5,13 +5,17 @@ import {
 } from '../src/constants.js';
 import { InlinePrice } from '../src/inline-price.js';
 import { Price } from '../src/price.js';
-import { getSettings } from '../src/settings.js';
+import { getSettings } from '../src/settings.js';
 
 import { mockFetch } from './mocks/fetch.js';
 import { mockLana, unmockLana } from './mocks/lana.js';
 import snapshots from './mocks/snapshots.js';
 import { withWcs } from './mocks/wcs.js';
-import { initMasCommerceService, expect, disableMasCommerceService } from './utilities.js';
+import {
+    initMasCommerceService,
+    expect,
+    disableMasCommerceService,
+} from './utilities.js';
 
 /**
  * @param {string} wcsOsi
@@ -44,6 +48,28 @@ describe('class "InlinePrice"', () => {
         expect(inlinePrice.value).to.be.not.empty;
     });
 
+    it('re-dispatches click event', async () => {
+        await initMasCommerceService();
+        const inlinePrice = mockInlinePrice('puf');
+        let targetIsInlinePrice = false;
+        inlinePrice.addEventListener(
+            'click',
+            (event) => {
+                targetIsInlinePrice = event.target === inlinePrice;
+            },
+            { once: true },
+        );
+        await inlinePrice.onceSettled();
+        inlinePrice.firstElementChild.dispatchEvent(
+            new MouseEvent('click', {
+                bubbles: true,
+                cancelable: true,
+                view: window,
+            }),
+        );
+        expect(targetIsInlinePrice).to.be.true;
+    });
+
     it('renders strikethrough price', async () => {
         await initMasCommerceService();
         const inlinePrice = mockInlinePrice('puf');
@@ -174,18 +200,22 @@ describe('class "InlinePrice"', () => {
         it('fails placeholder if "orders" array is empty', async () => {
             await initMasCommerceService();
             const inlinePrice = mockInlinePrice('abm');
-            inlinePrice.renderOffers([], {}, inlinePrice.masElement.togglePending());
+            inlinePrice.renderOffers(
+                [],
+                {},
+                inlinePrice.masElement.togglePending(),
+            );
             expect(inlinePrice.state).to.equal(InlinePrice.STATE_FAILED);
         });
     });
 
     describe('method "requestUpdate"', () => {
-      it('has requestUpdate method', async () => {
-          await initMasCommerceService();
-          const inlinePrice = mockInlinePrice('abm');
-          inlinePrice.requestUpdate();
-      });
-  });
+        it('has requestUpdate method', async () => {
+            await initMasCommerceService();
+            const inlinePrice = mockInlinePrice('abm');
+            inlinePrice.requestUpdate();
+        });
+    });
 
     describe('method "updateOptions"', () => {
         it('updates element data attributes', async () => {
@@ -632,17 +662,38 @@ describe('commerce service', () => {
         });
     });
     describe('function "direct price calls"', () => {
-      it('works as expected', async () => {
-          const service = await initMasCommerceService();
-          const { collectPriceOptions, buildPriceHTML } = new Price({
-            literals: { price: {} }, providers: { price: [(p,o) => {/*nop*/} ]}, settings: getSettings(service.config)});
-          const inlinePrice1 = mockInlinePrice('abm');
-          const options = collectPriceOptions({}, inlinePrice1);
-          expect(options).not.to.be.empty;
-          buildPriceHTML({ priceDetails:{} }, { template: 'discount', ...options } );
-          buildPriceHTML({ priceDetails:{} }, { template: 'strikethrough', ...options });
-          buildPriceHTML({ priceDetails:{} }, { template: 'optical', ...options });
-          buildPriceHTML({ priceDetails:{} }, { template: 'annual', ...options });
-      });
-  });
+        it('works as expected', async () => {
+            const service = await initMasCommerceService();
+            const { collectPriceOptions, buildPriceHTML } = new Price({
+                literals: { price: {} },
+                providers: {
+                    price: [
+                        (p, o) => {
+                            /*nop*/
+                        },
+                    ],
+                },
+                settings: getSettings(service.config),
+            });
+            const inlinePrice1 = mockInlinePrice('abm');
+            const options = collectPriceOptions({}, inlinePrice1);
+            expect(options).not.to.be.empty;
+            buildPriceHTML(
+                { priceDetails: {} },
+                { template: 'discount', ...options },
+            );
+            buildPriceHTML(
+                { priceDetails: {} },
+                { template: 'strikethrough', ...options },
+            );
+            buildPriceHTML(
+                { priceDetails: {} },
+                { template: 'optical', ...options },
+            );
+            buildPriceHTML(
+                { priceDetails: {} },
+                { template: 'annual', ...options },
+            );
+        });
+    });
 });