@ordergroove/offers 2.27.23 → 2.28.1

package/src/shopify/shopifyMiddleware.ts

@@ -38,7 +38,8 @@ async function setupPdp(store, offer) {
   const handle = guessProductHandle();
   if (handle) {
     try {
-      store.dispatch({ type: SETUP_PRODUCT, payload: await getProduct(handle) });
+      const product = await getProduct(handle);
+      store.dispatch({ type: SETUP_PRODUCT, payload: { product, offer } });
     } catch (err) {
       console.warn('OG: Unable to fetch product details for PDP', err);
     }
@@ -126,7 +127,7 @@ async function setupCart(store, offer) {
   }
 
   const products = await Promise.all(Array.from(new Set(items.map(({ handle }) => handle))).map(getProduct));
-  products.forEach(product => store.dispatch({ type: SETUP_PRODUCT, payload: product }));
+  products.forEach(product => store.dispatch({ type: SETUP_PRODUCT, payload: { product, offer } }));
 }
 
 /**
@@ -339,7 +340,7 @@ export function getOrCreateHidden(parent, name, value) {
  * @param store
  */
 function synchronizeSellingPlan(store: any, offerElement?: HTMLElement) {
-  [...document.querySelectorAll('[name=id]')].forEach((productIdInput: HTMLInputElement) => {
+  [...document.querySelectorAll('form[action$="/cart/add"] [name=id]')].forEach((productIdInput: HTMLInputElement) => {
     const productId = productIdInput.value;
 
     const subscribedSelector = makeSubscribedSelector({ id: productId });

package/src/shopify/shopifyReducer.js

@@ -23,7 +23,13 @@ import baseReducer, {
   sessionId,
   templates
 } from '../core/reducer';
-import { safeProductId } from '../core/utils';
+import {
+  getFirstSellingPlan,
+  hasShopifySellingPlans,
+  isOgFrequency,
+  mapFrequencyToSellingPlan,
+  safeProductId
+} from '../core/utils';
 
 const money = val => (val === null ? '' : `$${val.toString().replace(/(\d\d)$/, '.$1')}`);
 
@@ -54,6 +60,84 @@ const overrideLineKey = (state, productId, newValue) => {
   return state;
 };
 
+export const getDefaultSellingPlan = (sellingPlans, frequenciesEveryPeriod, defaultFrequency) => {
+  if (!defaultFrequency) {
+    return null;
+  }
+
+  if (!isOgFrequency(defaultFrequency)) {
+    return defaultFrequency;
+  }
+
+  if (hasShopifySellingPlans(sellingPlans, frequenciesEveryPeriod)) {
+    const sellingPlan = mapFrequencyToSellingPlan(sellingPlans, frequenciesEveryPeriod, defaultFrequency);
+
+    if (sellingPlan) {
+      return sellingPlan;
+    }
+
+    return getFirstSellingPlan(sellingPlans);
+  }
+
+  return defaultFrequency;
+};
+
+export const mapExistingOptinsFromOfferResponse = (state, offerEl) =>
+  state.map(it => {
+    if (isOgFrequency(it?.frequency)) {
+      return {
+        ...it,
+        frequency: hasShopifySellingPlans(offerEl?.config?.frequencies, offerEl?.config?.frequenciesEveryPeriod)
+          ? mapFrequencyToSellingPlan(
+              offerEl?.config?.frequencies,
+              offerEl?.config?.frequenciesEveryPeriod,
+              it.frequency
+            ) ||
+            mapFrequencyToSellingPlan(
+              offerEl?.config?.frequencies,
+              offerEl?.config?.frequenciesEveryPeriod,
+              offerEl.defaultFrequency
+            ) ||
+            getFirstSellingPlan(offerEl?.config?.frequencies)
+          : it.frequency
+      };
+    }
+
+    return it;
+  });
+
+export const reduceNewOptinsFromOfferResponse = (
+  { autoship = {}, autoship_by_default = {}, default_frequencies = {}, in_stock = {} },
+  existingOptins,
+  offerEl
+) =>
+  Object.keys(autoship).reduce((acc, id) => {
+    if (!existingOptins.some(it => it.id === id)) {
+      if (!(autoship[id] && autoship_by_default[id] && in_stock[id])) return acc;
+      const { config: { frequencies: sellingPlans, frequenciesEveryPeriod } = {}, defaultFrequency } = offerEl;
+      const psdf = default_frequencies[id];
+      let frequency;
+
+      if (default_frequencies[id] && hasShopifySellingPlans(sellingPlans, frequenciesEveryPeriod)) {
+        frequency =
+          mapFrequencyToSellingPlan(sellingPlans, frequenciesEveryPeriod, `${psdf.every}_${psdf.every_period}`) ||
+          getDefaultSellingPlan(sellingPlans, frequenciesEveryPeriod, defaultFrequency) ||
+          getFirstSellingPlan(sellingPlans);
+      } else if (default_frequencies[id]) {
+        frequency = `${psdf.every}_${psdf.every_period}`;
+      } else {
+        frequency = getDefaultSellingPlan(sellingPlans, frequenciesEveryPeriod, defaultFrequency) || '_'; // Placeholder to be backfilled in SETUP_PRODUCT reducer
+      }
+
+      return acc.concat({
+        id,
+        frequency
+      });
+    }
+
+    return acc;
+  }, []);
+
 const getOGSellingPlanGroup = product => {
   const sellingPlanGroup = product?.selling_plan_groups.find(group => {
     return group.name === 'Subscribe and Save';
@@ -88,7 +172,9 @@ export const autoshipEligible = (state = {}, action) => {
     return cart.items.reduce(reduceProductCartLine, state);
   }
   if (constants.SETUP_PRODUCT === action.type) {
-    const { payload: product } = action;
+    const {
+      payload: { product }
+    } = action;
     return [product, ...(product?.variants || [])]?.reduce(
       (acc, cur) => ({
         ...overrideLineKey(acc, cur.id, cur.selling_plan_allocations?.length > 0),
@@ -109,6 +195,21 @@ export function textToFreq(text) {
   return null;
 }
 
+export function sellingPlansToEveryPeriod(sellingPlanGroup) {
+  return sellingPlanGroup?.selling_plans
+    ?.map(({ options }) => options || [])
+    .flat()
+    .map(({ value }) => textToFreq(value));
+}
+
+export function sellingPlansToText(sellingPlanGroup, frequencies) {
+  return sellingPlanGroup.options?.[0]?.values || frequencies;
+}
+
+export function sellingPlansToFrequencies(sellingPlanGroup) {
+  return sellingPlanGroup?.selling_plans?.map(({ id }) => `${id}`);
+}
+
 export const config = (
   state = {
     frequencies: [],
@@ -132,25 +233,54 @@ export const config = (
   }
 
   if (constants.SETUP_PRODUCT === action.type) {
-    const product = action.payload;
+    const {
+      payload: { offer: offerEl, product }
+    } = action;
     const sellingPlanGroup = getOGSellingPlanGroup(product);
     const frequencies = sellingPlanGroup?.selling_plans?.map(({ id }) => `${id}`);
     if (frequencies?.length) {
-      const frequenciesEveryPeriod = sellingPlanGroup?.selling_plans
-        ?.map(({ options }) => options || [])
-        .flat()
-        .map(({ value }) => textToFreq(value));
+      const frequenciesEveryPeriod = sellingPlansToEveryPeriod(sellingPlanGroup);
       const frequenciesText = sellingPlanGroup.options?.[0]?.values || frequencies;
+      let defaultFrequency = state.defaultFrequency;
+
+      if (defaultFrequency && isOgFrequency(defaultFrequency)) {
+        defaultFrequency =
+          mapFrequencyToSellingPlan(frequencies, frequenciesEveryPeriod, defaultFrequency) ||
+          getFirstSellingPlan(frequencies) ||
+          defaultFrequency;
+      }
+
       return {
         ...state,
-        defaultFrequency: frequencies[0],
         frequenciesEveryPeriod,
         frequencies,
-        frequenciesText
+        frequenciesText,
+        ...(defaultFrequency ? { defaultFrequency } : {})
       };
     }
   }
 
+  if (constants.RECEIVE_OFFER === action.type) {
+    const {
+      payload: { offer: offerEl }
+    } = action;
+    const { defaultFrequency, config: { frequencies: sellingPlans, frequenciesEveryPeriod } = {} } = offerEl;
+
+    if (!isOgFrequency(defaultFrequency))
+      return {
+        ...state,
+        defaultFrequency: defaultFrequency
+      };
+
+    return {
+      ...state,
+      defaultFrequency:
+        mapFrequencyToSellingPlan(sellingPlans, frequenciesEveryPeriod, defaultFrequency) ||
+        getFirstSellingPlan(sellingPlans) ||
+        defaultFrequency
+    };
+  }
+
   return state;
 };
 
@@ -166,8 +296,9 @@ export const inStock = (state = {}, action) => {
   }
 
   if (constants.SETUP_PRODUCT === action.type) {
-    const product = action.payload;
-
+    const {
+      payload: { product }
+    } = action;
     return [product, ...product?.variants]?.reduce(productOrVariantInStockReducer, state) || state;
   }
   // force offer to refresh when requesting a new one
@@ -194,33 +325,35 @@ export const optedin = (state = [], action) => {
         )
       );
   }
+
   if (constants.RECEIVE_OFFER === action.type) {
-    const { autoship, autoship_by_default, in_stock, offer: offerEl } = action.payload;
-
-    return Object.keys(autoship).reduce(
-      (acc, id) =>
-        acc.concat(
-          !acc.some(it => it.id === id) && autoship[id] && autoship_by_default[id] && in_stock[id]
-            ? { id, frequency: offerEl.defaultFrequency }
-            : []
-        ),
-      state
-    );
+    const { offer: offerEl = {}, ...payload } = action.payload;
+    const existingOptins = mapExistingOptinsFromOfferResponse(state, offerEl);
+    const newOptins = reduceNewOptinsFromOfferResponse(payload, existingOptins, offerEl);
+
+    return [...existingOptins, ...newOptins];
   }
 
   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
-    }));
+    const { product } = action.payload;
+    const sellingPlanGroup = getOGSellingPlanGroup(product);
+    const frequencies = sellingPlansToFrequencies(sellingPlanGroup);
+    const frequenciesEveryPeriod = sellingPlansToEveryPeriod(sellingPlanGroup);
+
+    return state.map(curr => {
+      if (isOgFrequency(curr.frequency)) {
+        return {
+          ...curr,
+          frequency:
+            mapFrequencyToSellingPlan(frequencies, frequenciesEveryPeriod, curr.frequency) ||
+            getFirstSellingPlan(frequencies)
+        };
+      }
+
+      return curr;
+    });
   }
+
   return coreOptedin(state, action);
 };
 
@@ -228,7 +361,9 @@ export const productOffer = (state = {}, action) => state;
 
 export const productPlans = (state = {}, action) => {
   if (constants.SETUP_PRODUCT === action.type) {
-    const product = action.payload;
+    const {
+      payload: { product }
+    } = action;
     return (
       [product, ...product?.variants]?.reduce(
         (acc, cur) => ({