@ordergroove/offers 2.48.0 → 2.48.1-alpha-PR-1371-2.308

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ordergroove/offers",
-  "version": "2.48.0",
+  "version": "2.48.1-alpha-PR-1371-2.308+bb24afe7a",
   "description": "offer state component",
   "author": "Eugenio Lattanzio <eugenio63@gmail.com>",
   "homepage": "https://github.com/ordergroove/plush-toys#readme",
@@ -49,5 +49,5 @@
     "@ordergroove/offers-templates": "^0.10.0",
     "@types/lodash.memoize": "^4.1.9"
   },
-  "gitHead": "8ec942439e46e09a4970c14c0faa93bba6975f31"
+  "gitHead": "bb24afe7a715c5f0ea03ab04992bd4bc25cd648b"
 }

package/src/shopify/__tests__/shopifyMiddleware.spec.js

@@ -11,7 +11,8 @@ import {
   synchronizeCartOptin,
   getTrackingEvent,
   guessProductHandle,
-  synchronizeSellingPlan
+  synchronizeSellingPlan,
+  setupPdp
 } from '../shopifyMiddleware';
 import { getOrCreateHidden } from '../../core/utils';
 
@@ -508,3 +509,112 @@ describe('synchronizeSellingPlan', () => {
     expect(getFormData(formElement)).toEqual({});
   });
 });
+
+describe('setupPdp', () => {
+  let store = { dispatch: () => {} };
+  let offer;
+
+  function makeCartAddForm() {
+    const element = document.createElement('form');
+    element.action = '/cart/add';
+    element.innerHTML = `
+      <input value="variant-1" name="id" type="hidden">
+      <input value="2" name="quantity" type="hidden">
+    `;
+    document.body.appendChild(element);
+    return element;
+  }
+
+  // wait for the debounced syncProductId function to run
+  async function waitForDebounce() {
+    // order matters here - this allows the MutationObserver callback to run, which queues a syncProductId call
+    await Promise.resolve();
+    // then wait for the debounced function to execute
+    jasmine.clock().tick(100);
+  }
+
+  beforeEach(() => {
+    offer = document.createElement('og-offer');
+    offer.dataset.shopifyProductHandle = 'test-product-handle';
+    spyOn(offer, 'setAttribute').and.callThrough();
+
+    let form = makeCartAddForm();
+    form.append(offer);
+
+    fetchMock.route('/products/test-product-handle.js', {}, { method: 'GET' });
+    fetchMock.route('/cart.js', {}, { method: 'GET' });
+
+    fetchMock.mockGlobal();
+    jasmine.clock().install();
+  });
+
+  afterEach(() => {
+    fetchMock.removeRoutes().unmockGlobal();
+    jasmine.clock().uninstall();
+  });
+
+  it('should guess handle and fetch data', async () => {
+    await setupPdp(store, offer);
+
+    expect(
+      fetchMock.callHistory.called({
+        url: 'path:/products/test-product-handle.js'
+      })
+    ).toBe(true);
+  });
+
+  it('should update product attribute when hidden ID input is modified', async () => {
+    await setupPdp(store, offer);
+
+    const form = offer.closest('form');
+    // update variant ID
+    const idInput = form.querySelector('input[name="id"]');
+    idInput.value = 'variant-2';
+
+    await waitForDebounce();
+
+    expect(offer.setAttribute).toHaveBeenCalledWith('product', 'variant-2');
+  });
+
+  it('does not update product attribute if value attribute changes on a non-id input', async () => {
+    await setupPdp(store, offer);
+
+    const form = offer.closest('form');
+    const quantityInput = form.querySelector('input[name="quantity"]');
+    quantityInput.value = 5;
+
+    await waitForDebounce();
+
+    expect(offer.setAttribute).not.toHaveBeenCalled();
+  });
+
+  // this test is about covering existing behavior - in the future we may be able to strictly rely on the attribute change instead of subtree modifications
+  it('should update product attribute when node is added', async () => {
+    await setupPdp(store, offer);
+
+    const form = offer.closest('form');
+    const newInput = document.createElement('input');
+    newInput.name = 'other';
+    newInput.value = 'some-value';
+
+    form.appendChild(newInput);
+
+    await waitForDebounce();
+
+    // called with existing value in form
+    expect(offer.setAttribute).toHaveBeenCalledWith('product', 'variant-1');
+  });
+
+  // this test is about covering existing behavior - theoretically watching for changes to the "value" attribute should be sufficient
+  it('should update product attribute when change event fired', async () => {
+    await setupPdp(store, offer);
+    const form = offer.closest('form');
+
+    form.dispatchEvent(new Event('change'));
+
+    await waitForDebounce();
+
+    // called with existing value in form
+    expect(offer.setAttribute).toHaveBeenCalledWith('product', 'variant-1');
+  });
+});

package/src/shopify/shopifyMiddleware.ts

@@ -53,7 +53,7 @@ async function getCurrency() {
   return cart.currency;
 }
 
-async function setupPdp(store, offer) {
+export async function setupPdp(store, offer) {
   const handle = guessProductHandle(offer);
   if (handle) {
     try {
@@ -85,11 +85,26 @@ async function setupPdp(store, offer) {
   }
 
   if (form) {
-    // since syncProductId is debounced not matter which comes first mutation or onchange
+    // this code watches the cart form for changes, so that we can update the product ID on the offer when the variant changes
     const syncProductId = makeSyncProductId(offer);
+    // watch the cart form for changes
+    // note: changes to hidden inputs do not fire change events
     form.addEventListener('change', () => syncProductId(form));
-    const mo = new MutationObserver(() => syncProductId(form));
-    mo.observe(form, { subtree: true, childList: true });
+    // watch for added/removed nodes anywhere in the cart form (including updates to text content)
+    // also watch for changes to the "value" attribute, which will catch changes to hidden inputs
+    const mo = new MutationObserver(e => {
+      // if we're only looking at attribute changes
+      if (e.every(it => it.type === 'attributes')) {
+        // sync the product ID only if the "id" input changed - this happens when the product variant changes
+        // for performance reasons, avoid reacting to every form attribute change
+        if (e.some(it => (it.target as HTMLInputElement).name === 'id')) {
+          syncProductId(form);
+        }
+      } else {
+        syncProductId(form);
+      }
+    });
+    mo.observe(form, { subtree: true, childList: true, attributes: true, attributeFilter: ['value'] });
   } else {
     console.info('no /cart/add form found for og-offer', offer);
   }