@ordergroove/offers 2.27.10 → 2.27.12-alpha-PR-651-2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ordergroove/offers",
-  "version": "2.27.10",
+  "version": "2.27.12-alpha-PR-651-2.0+647b5a6d",
   "description": "offer state component",
   "author": "Eugenio Lattanzio <eugenio63@gmail.com>",
   "homepage": "https://github.com/ordergroove/plush-toys#readme",
@@ -45,5 +45,5 @@
   "devDependencies": {
     "@ordergroove/offers-templates": "^0.4.14"
   },
-  "gitHead": "d77d371f9090d52b3aff92314743d3782676adb6"
+  "gitHead": "647b5a6d8eb2c3d2ceb1196b2ca16533a9ae158e"
 }

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

@@ -337,32 +337,29 @@ describe('offerId', () => {
 
 describe('optedin', () => {
   it('should return optins given action SETUP_CART', () => {
-    const actual = optedin(
-      {},
-      {
-        type: constants.SETUP_CART,
-        payload: {
-          items: [
-            {
-              key: 'yum item key 1',
-              selling_plan_allocation: {
-                selling_plan: {
-                  id: 'yum selling plan id 1'
-                }
+    const actual = optedin([], {
+      type: constants.SETUP_CART,
+      payload: {
+        items: [
+          {
+            key: 'yum item key 1',
+            selling_plan_allocation: {
+              selling_plan: {
+                id: 'yum selling plan id 1'
               }
-            },
-            {
-              key: 'yum item key 2',
-              selling_plan_allocation: {
-                selling_plan: {
-                  id: 'yum selling plan id 2'
-                }
+            }
+          },
+          {
+            key: 'yum item key 2',
+            selling_plan_allocation: {
+              selling_plan: {
+                id: 'yum selling plan id 2'
               }
             }
-          ]
-        }
+          }
+        ]
       }
-    );
+    });
 
     expect(actual).toEqual([
       {

package/src/shopify/shopifyMiddleware.ts

@@ -22,7 +22,11 @@ const PRODUCTS_URL = `${SHOPIFY_ROOT}products/`;
 
 const syncProductId = debounce(100, false, function(form, offer) {
   const { id } = Object.fromEntries([...new FormData(form).entries()]);
-  offer.setAttribute('product', id);
+  if (id) {
+    offer.setAttribute('product', id);
+  } else {
+    offer.removeAttribute('product');
+  }
 });
 
 async function setupPdp(store, offer) {
@@ -34,18 +38,34 @@ async function setupPdp(store, offer) {
       console.warn('OG: Unable to fetch product details for PDP', err);
     }
   }
-  const form = offer.closest('form');
+  // try closest form (safer)
+  let form = offer.closest('form');
+
+  // sometimes template is so closest does not work
+  // <div>
+  //   <og-offer ..>
+  // </div>
+  // <div>
+  //   <form action="/cart/add"/>
+  // </div>
+  if (!form) {
+    let ref = offer.parentElement;
+    // look up parents element of offer that contains the form. This will fix eventually category offers.
+    while (ref) {
+      form = ref.querySelector('form[action="/cart/add"]');
+      if (form) break;
+      if (ref.tagName.toLowerCase() === 'body') break;
+      ref = ref.parentElement;
+    }
+  }
+
   if (form) {
+    // since syncProductId is debounced not matter which comes first mutation or onchange
+    form.addEventListener('change', ev => syncProductId(form, offer));
     const mo = new MutationObserver(() => syncProductId(form, offer));
     mo.observe(form, { subtree: true, childList: true });
   } else {
-    for (let it of document.querySelectorAll('form[action="/cart/add"] [name=id]')) {
-      const input = it as HTMLFormElement;
-      if (input.getAttribute('value') === offer.getAttribute('product')) {
-        const mo = new MutationObserver(() => syncProductId(input.form, offer));
-        mo.observe(input.form, { subtree: true, childList: true });
-      }
-    }
+    console.info('no /cart/add form found for og-offer', offer);
   }
 }
 
@@ -323,6 +343,7 @@ export default function shopifyMiddleware(store) {
         } else {
           setupPdp(store, action.payload.offer);
         }
+        break;
       default:
     }
 

package/src/shopify/shopifyReducer.js

@@ -165,13 +165,17 @@ export const offerId = (state = '', action) => 'native-shopify-offer';
 export const optedin = (state = [], action) => {
   if (constants.SETUP_CART === action.type) {
     const cart = action.payload;
-    return cart.items.reduce(
-      (acc, cur) =>
-        cur.selling_plan_allocation
-          ? [...acc, { id: cur.key, frequency: `${cur.selling_plan_allocation.selling_plan.id}` }]
-          : acc,
-      []
-    );
+    return state
+      .filter(it => !it.id.includes(':'))
+      .concat(
+        cart.items.reduce(
+          (acc, cur) =>
+            cur.selling_plan_allocation
+              ? [...acc, { id: cur.key, frequency: `${cur.selling_plan_allocation.selling_plan.id}` }]
+              : acc,
+          []
+        )
+      );
   }
   if (constants.RECEIVE_OFFER === action.type) {
     const { autoship, autoship_by_default, in_stock, offer: offerEl } = action.payload;
@@ -186,6 +190,20 @@ export const optedin = (state = [], action) => {
       state
     );
   }
+
+  if (constants.SETUP_PRODUCT === action.type) {
+    const productIds = action.payload.variants.map(variant => variant.id).map(id => `${id}`);
+    const sellingPlanGroup = getOGSellingPlanGroup(action.payload);
+    const frequencies = sellingPlanGroup?.selling_plans?.map(({ id }) => `${id}`);
+    // if the product is in the list of variants and its frequency isn't a valid selling plan, replace with the first valid selling plan
+    return state.map(cur => ({
+      ...cur,
+      frequency:
+        productIds.some(id => id === cur.id) && !frequencies.some(freq => freq === cur.frequency)
+          ? frequencies[0]
+          : cur.frequency
+    }));
+  }
   return coreOptedin(state, action);
 };