MWPW-159374: Support MAS switch to Prosemirror RTE

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 },
+            );
+        });
+    });
 });