@ordergroove/offers 2.40.4-alpha-PR-1095-4.10 → 2.41.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ordergroove/offers",
-  "version": "2.40.4-alpha-PR-1095-4.10+cab51c63",
+  "version": "2.41.0",
   "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.9.6",
     "@types/lodash.memoize": "^4.1.9"
   },
-  "gitHead": "cab51c63b058f168847b0bbf9d0b5de7a8c2abe7"
+  "gitHead": "24e315047abbe0e265409f1f5265e3d9fd462672"
 }

package/src/__tests__/offers.spec.js

@@ -1,5 +1,6 @@
 import * as offersAll from '../index';
 import { api } from '../core/api';
+import { REQUEST_OFFER } from '../core/constants';
 
 const offers = offersAll.offers;
 
@@ -71,16 +72,13 @@ describe('Offers', () => {
   });
 
   describe('offers.resolveSettings', () => {
-    it('should fetch offer for single product in pdp', () => {
+    it('should fetch offer for single product in pdp', async () => {
       offers.resolveSettings('0e5de2bedc5e11e3a2e4bc764e106cf4', 'staging', { product: '123' }, mockStore);
-      expect(fetchOfferSpy).toHaveBeenCalledWith(
-        'https://staging.offers.ordergroove.com',
-        '0e5de2bedc5e11e3a2e4bc764e106cf4',
-        'xyz',
-        '123',
-        'pdp',
-        theState
-      );
+      expect(mockStore.dispatch).toHaveBeenCalledTimes(1);
+      expect(mockStore.dispatch).toHaveBeenCalledWith({
+        type: REQUEST_OFFER,
+        payload: { product: '123', module: 'pdp', offer: undefined }
+      });
     });
 
     it('should fetch offer for each product in cart', () => {
@@ -90,23 +88,14 @@ describe('Offers', () => {
         { cart: { products: ['123', '456'] } },
         mockStore
       );
-      expect(fetchOfferSpy).toHaveBeenCalledTimes(2);
 
-      expect(fetchOfferSpy.calls.argsFor(0)).toEqual([
-        'https://staging.offers.ordergroove.com',
-        '0e5de2bedc5e11e3a2e4bc764e106cf4',
-        'xyz',
-        '123',
-        'pdp',
-        theState
+      expect(mockStore.dispatch).toHaveBeenCalledTimes(2);
+
+      expect(mockStore.dispatch.calls.argsFor(0)).toEqual([
+        { type: REQUEST_OFFER, payload: { product: '123', module: 'pdp', offer: undefined } }
       ]);
-      expect(fetchOfferSpy.calls.argsFor(1)).toEqual([
-        'https://staging.offers.ordergroove.com',
-        '0e5de2bedc5e11e3a2e4bc764e106cf4',
-        'xyz',
-        '456',
-        'pdp',
-        theState
+      expect(mockStore.dispatch.calls.argsFor(1)).toEqual([
+        { type: REQUEST_OFFER, payload: { product: '456', module: 'pdp', offer: undefined } }
       ]);
     });
 

package/src/core/__tests__/actions.spec.js

@@ -157,49 +157,7 @@ describe('redux actions', function () {
     });
 
     it('fetchOffer should return a function', () => {
-      expect(fetchOffer()).toEqual(jasmine.any(Function));
-    });
-
-    it('should call api.fetchOffer with environment.apiUrl from state as first param ', async () => {
-      const state = {
-        merchantId: 'the merchantId',
-        sessionId: 'the sessionId',
-        environment: { apiUrl: 'the environment.apiUrl' }
-      };
-      const getState = jasmine.createSpy('getState').and.returnValue(state);
-      const fetchOfferSpy = spyOn(api, 'fetchOffer').and.resolveTo({ hey: 'ho' });
-      await fetchOffer('the product')(this.dispatch, getState);
-      expect(fetchOfferSpy).toHaveBeenCalledWith(
-        'the environment.apiUrl',
-        'the merchantId',
-        'the sessionId',
-        'the product',
-        'pdp',
-        state
-      );
-    });
-
-    it('should dispatch the receiveOffer if api returns', async () => {
-      const fetchOfferSpy = spyOn(api, 'fetchOffer').and.resolveTo({ hey: 'ho' });
-
-      await fetchOffer('yum product')(this.dispatch, this.getState);
-
-      expect(this.dispatch.calls.count()).toEqual(3);
-      expect(this.dispatch.calls.argsFor(0)[0]).toEqual(requestOffer('yum product', 'pdp'));
-      expect(this.dispatch.calls.argsFor(1)[0]).toEqual(receiveOffer({ hey: 'ho' }));
-      expect(this.getState).toHaveBeenCalled();
-      expect(fetchOfferSpy).toHaveBeenCalledWith('some-apiUrl', 'foo', 'bar', 'yum product', 'pdp', theState);
-    });
-
-    it('should dispatch fetchResponseError if api fails', async () => {
-      const fetchOfferSpy = spyOn(api, 'fetchOffer').and.rejectWith(Error({ hey: 'ho' }));
-      await fetchOffer('yum product')(this.dispatch, this.getState);
-
-      expect(this.dispatch.calls.count()).toEqual(3);
-      expect(this.dispatch.calls.argsFor(0)[0]).toEqual(requestOffer('yum product', 'pdp'));
-      expect(this.dispatch.calls.argsFor(1)[0]).toEqual(fetchResponseError(Error({ hey: 'ho' })));
-      expect(fetchOfferSpy).toHaveBeenCalledWith('some-apiUrl', 'foo', 'bar', 'yum product', 'pdp', theState);
-      expect(this.getState).toHaveBeenCalled();
+      expect(fetchOffer()).toEqual(requestOffer());
     });
   });
 

package/src/core/__tests__/experiments.spec.js

@@ -1,5 +1,5 @@
 import { experimentsMiddleware, experimentsReducer, getAssignedExperimentVariant } from '../experiments';
-import { CREATED_SESSION_ID, RECEIVE_MERCHANT_SETTINGS } from '../constants';
+import { CREATED_SESSION_ID, READY, RECEIVE_MERCHANT_SETTINGS } from '../constants';
 import { createSessionId } from '../actions';
 import { createStore, combineReducers, applyMiddleware } from 'redux';
 import { sessionId } from '../reducer';
@@ -34,7 +34,9 @@ describe('experiments', () => {
 
     store.dispatch({ type: CREATED_SESSION_ID, payload: 'abc' });
     store.dispatch({ type: RECEIVE_MERCHANT_SETTINGS, payload: { experiments } });
+    store.dispatch({ type: READY });
 
+    await new Promise(r => setTimeout(r, 10));
     const {
       experiments: { currentVariant }
     } = store.getState();
@@ -56,7 +58,9 @@ describe('experiments', () => {
 
     store.dispatch({ type: CREATED_SESSION_ID, payload: 'cda' });
     store.dispatch({ type: RECEIVE_MERCHANT_SETTINGS, payload: { experiments } });
+    store.dispatch({ type: READY });
 
+    await new Promise(r => setTimeout(r, 10));
     const {
       experiments: { currentVariant }
     } = store.getState();

package/src/core/__tests__/offerRequest.spec.js

@@ -0,0 +1,78 @@
+import { offerRequestMiddleware } from '../offerRequest';
+
+import { environment, merchantId, offer, sessionId } from '../reducer';
+import { requestOffer } from '../actions';
+import { createStore, combineReducers, applyMiddleware } from 'redux';
+import { FETCH_RESPONSE_ERROR } from '../constants';
+
+const mockOfferResponse = (productId, inStock = true, autoship = true, defaultFrequency) => {
+  return Promise.resolve({
+    json() {
+      return Promise.resolve({
+        in_stock: { [productId]: inStock },
+        eligibility_groups: { [productId]: ['subscription', 'upsell'] },
+        result: 'success',
+        autoship: { [productId]: autoship },
+        autoship_by_default: { [productId]: false },
+        modifiers: {},
+        module_view: { regular: '096135e6650111e9a444bc764e106cf4' },
+        incentives_display: {},
+        incentives: {
+          [productId]: { initial: [], ongoing: [] }
+        },
+        ...(defaultFrequency && {
+          default_frequencies: {
+            [productId]: defaultFrequency
+          }
+        })
+      });
+    }
+  });
+};
+
+describe('offerRequest', () => {
+  let fetch, store;
+  const lastError = (acc = null, cur) => (cur.type == FETCH_RESPONSE_ERROR ? cur : acc);
+  beforeEach(() => {
+    fetch = spyOn(window, 'fetch');
+
+    store = createStore(
+      combineReducers({ offer, environment, merchantId, sessionId, lastError }),
+      {
+        environment: { apiUrl: 'http://localhost' },
+        merchantId: 'abc-merchant',
+        sessionId: 'x.y.z',
+        lastError: null
+      },
+      applyMiddleware(offerRequestMiddleware)
+    );
+  });
+
+  it('should call fetch offer with environment apiUrl from state as first param', async () => {
+    fetch.and.returnValue(mockOfferResponse('123', true, true));
+    store.dispatch(requestOffer('123'));
+    expect(fetch).toHaveBeenCalledTimes(1);
+    expect(fetch).toHaveBeenCalledWith(
+      'http://localhost/offer/abc-merchant/pdp?session_id=x.y.z&page_type=1&p=%5B%22123%22%5D&module_view=%5B%22regular%22%5D',
+
+      {}
+    );
+
+    await new Promise(r => setTimeout(r, 10));
+    expect(store.getState().offer.offerId).toEqual('096135e6650111e9a444bc764e106cf4');
+  });
+
+  it('should dispatch fetchResponseError if api fails', async () => {
+    fetch.and.rejectWith({ error: true });
+    store.dispatch(requestOffer('1234'));
+    await new Promise(r => setTimeout(r, 100));
+    expect(fetch).toHaveBeenCalledTimes(1);
+    expect(fetch).toHaveBeenCalledWith(
+      'http://localhost/offer/abc-merchant/pdp?session_id=x.y.z&page_type=1&p=%5B%221234%22%5D&module_view=%5B%22regular%22%5D',
+
+      {}
+    );
+
+    expect(store.getState().lastError).toEqual({ type: FETCH_RESPONSE_ERROR, payload: { error: true } });
+  });
+});

package/src/core/actions.js

@@ -198,27 +198,7 @@ export const requestOffer = (product, module = constants.DEFAULT_OFFER_MODULE, o
   payload: { product, module, offer }
 });
 
-export const fetchOffer = (product, module = constants.DEFAULT_OFFER_MODULE, offerElement) =>
-  function fetchOfferThunk(dispatch, getState) {
-    const state = getState();
-    const {
-      merchantId,
-      sessionId,
-      environment: { apiUrl }
-    } = state;
-    const requestAction = requestOffer(product, module, offerElement);
-    dispatch(requestAction);
-
-    const productId = safeProductId(product);
-    if (!productId) return null;
-    return api
-      .fetchOffer(apiUrl, merchantId, sessionId, productId, module, state)
-      .then(
-        response => dispatch(receiveOffer(response, offerElement)),
-        err => dispatch(fetchResponseError(err))
-      )
-      .finally(() => dispatch(fetchDone(requestAction)));
-  };
+export const fetchOffer = requestOffer;
 
 export const checkout = () => ({
   type: constants.CHECKOUT

package/src/core/api.js

@@ -66,7 +66,7 @@ export const toProductId = product =>
 
 export const fetchOffer = memoize(
   withFetchJson(
-    withHost((merchantId, sessionId, product, module = 'pdp', state = {}) => {
+    withHost((merchantId, sessionId, product, module = 'pdp', searchParams = {}) => {
       if (!merchantId) throw Error('merchantId required');
       if (!sessionId) throw Error('sessionId required');
       if (!product) throw Error('product required');
@@ -75,18 +75,10 @@ export const fetchOffer = memoize(
         ['session_id', sessionId],
         ['page_type', 1],
         ['p', toProductId(product)],
-        ['module_view', JSON.stringify(['regular'])]
+        ['module_view', JSON.stringify(['regular'])],
+        ...Object.entries(searchParams)
       ];
 
-      // NOTE: This block is only relevant for merchants actively running an AB test.
-      // For all other merchants, experiments.variants will be null.
-      const { experiments } = state;
-      const variant = experiments?.variants?.at(experiments.currentVariant);
-
-      if (variant) {
-        query.push(['variant', variant.public_id]);
-      }
-
       return [`/offer/${merchantId}/${module}?${toQuery(query)}`];
     })
   ),

package/src/core/experiments.js

@@ -1,5 +1,6 @@
-import { RECEIVE_MERCHANT_SETTINGS, SET_EXPERIMENT_VARIANT } from './constants';
+import { READY, RECEIVE_MERCHANT_SETTINGS, REQUEST_OFFER, SET_EXPERIMENT_VARIANT } from './constants';
 import murmur from 'murmurhash-js';
+import { waitFor } from './waitUntilOffersReady';
 
 /**
  * Returns the index of a variant based on the provided key and variants.
@@ -82,22 +83,37 @@ export function getAssignedExperimentVariant(experimentSettings, sessionId) {
  * @return {function} A function that takes the next middleware function and an action as arguments.
  */
 export function experimentsMiddleware(store) {
-  return next => action => {
-    const response = next(action);
-    if (action.type !== RECEIVE_MERCHANT_SETTINGS) {
-      return response;
-    }
+  const [waitForReady, resolveReady] = waitFor();
+
+  let variant, experimentSettings;
+
+  return next => async action => {
+    if (action.type === READY) {
+      resolveReady();
+    } else if (action.type === RECEIVE_MERCHANT_SETTINGS) {
+      await waitForReady;
+      experimentSettings = action.payload.experiments;
+
+      const { sessionId } = store.getState();
 
-    const { experiments: experimentSettings, sessionId } = store.getState();
-    const variant = getAssignedExperimentVariant(experimentSettings, sessionId);
+      variant = getAssignedExperimentVariant(experimentSettings, sessionId);
 
-    if (variant) {
-      store.dispatch({
-        type: SET_EXPERIMENT_VARIANT,
-        payload: variant
-      });
+      if (variant) {
+        store.dispatch({
+          type: SET_EXPERIMENT_VARIANT,
+          payload: variant
+        });
+      }
+    } else if (action.type === REQUEST_OFFER) {
+      await waitForReady;
+      if (variant) {
+        action.payload.searchParams = {
+          ...action.payload.searchParams,
+          variant: variant.public_id
+        };
+      }
     }
 
-    return response;
+    return next(action);
   };
 }

package/src/core/offerRequest.js

@@ -0,0 +1,34 @@
+import { fetchDone, fetchResponseError, receiveOffer } from './actions';
+import api from './api';
+import { DEFAULT_OFFER_MODULE, REQUEST_OFFER } from './constants';
+import { safeProductId } from './utils';
+
+export function offerRequestMiddleware(store) {
+  return next => action => {
+    if (action.type === REQUEST_OFFER) {
+      const {
+        merchantId,
+        sessionId,
+        environment: { apiUrl }
+      } = store.getState();
+
+      const productId = safeProductId(action.payload.product);
+      if (productId)
+        api
+          .fetchOffer(
+            apiUrl,
+            merchantId,
+            sessionId,
+            productId,
+            action.payload.module || DEFAULT_OFFER_MODULE,
+            action.payload.searchParams
+          )
+          .then(
+            response => store.dispatch(receiveOffer(response, action.payload.offer)),
+            err => store.dispatch(fetchResponseError(err))
+          )
+          .finally(() => store.dispatch(fetchDone(action)));
+    }
+    return next(action);
+  };
+}

package/src/core/reducer.js

@@ -271,7 +271,7 @@ export const productOffer = (state = {}, action) => {
         ...state,
         ...Object.entries(action.payload.autoship)
           .map(([key]) => ({ [key]: Object.keys(action.payload.modifiers) }))
-          .reduce((acc, object) => ({ ...acc, ...object }))
+          .reduce((acc, object) => ({ ...acc, ...object }), {})
       };
     case constants.CHECKOUT:
       return {};

package/src/core/store.js

@@ -4,6 +4,8 @@ import thunk from 'redux-thunk';
 import { loadState } from './localStorage';
 import { dispatchMiddleware, localStorageMiddleware, offerEvents } from './middleware';
 import { waitUntilOffersReady } from './waitUntilOffersReady';
+import { offerRequestMiddleware } from './offerRequest';
+import { experimentsMiddleware } from './experiments';
 
 export function makeStore(reducer, ...extraMiddlewares) {
   if (window.og && window.og.store) return window.og.store;
@@ -17,7 +19,14 @@ export function makeStore(reducer, ...extraMiddlewares) {
         })
       : compose;
 
-  const middlewares = [waitUntilOffersReady, thunk, dispatchMiddleware, offerEvents];
+  const middlewares = [
+    waitUntilOffersReady,
+    thunk,
+    experimentsMiddleware,
+    offerRequestMiddleware,
+    dispatchMiddleware,
+    offerEvents
+  ];
 
   let initial = {};
 

package/src/index.js

@@ -7,12 +7,10 @@ import platform from './platform';
 import { autoInitializeOffers, onReady } from './core/utils';
 import { authorizeShopifyCustomer } from './shopify/shopifyBootstrap';
 import shopifyTrackingMiddleware from './shopify/shopifyTrackingMiddleware';
-import { experimentsMiddleware } from './core/experiments';
 
 export const store = makeStore(
   ...(platform?.shopify_selling_plans ? [shopifyReducer, shopifyMiddleware] : [defaultReducer]),
-  platform.shopify && shopifyTrackingMiddleware,
-  experimentsMiddleware
+  platform.shopify && shopifyTrackingMiddleware
 );
 
 export const offers = makeApi(store);

package/src/make-api.js

@@ -146,15 +146,11 @@ export default function makeApi(store) {
         } else if (settings.cart && Array.isArray(settings.cart.products)) {
           products = products.concat(settings.cart.products);
         }
-        const { apiUrl } = environment({}, actions.setEnvironment(env));
 
         const state = storeInstance.getState();
         const { sessionId } = state;
         if (sessionId) {
-          products.forEach(product => {
-            const id = safeProductId(product);
-            api.fetchOffer(apiUrl, merchantId, sessionId, `${id}`, DEFAULT_OFFER_MODULE, state);
-          });
+          products.forEach(product => storeInstance.dispatch(actions.requestOffer(product)));
         }
 
         if (settings.product_discounts && typeof settings.product_discounts === 'object') {

package/src/shopify/shopifyMiddleware.ts

@@ -345,8 +345,8 @@ export function getSubscribedFrequency(productId, store) {
  * @param store
  */
 function synchronizeSellingPlan(store: any, offerElement?: HTMLElement) {
-  if (offerElement.isCart) return; // hidden inputs are used when product page, not cart.
-  if (!offerElement.shouldEnableOffer) return; // do not set a selling plan if we're hiding the offer
+  if (offerElement?.isCart) return; // hidden inputs are used when product page, not cart.
+  if (!offerElement?.shouldEnableOffer) return; // do not set a selling plan if we're hiding the offer
 
   [...document.querySelectorAll('form[action$="/cart/add"] [name=id]')].forEach((productIdInput: HTMLInputElement) => {
     const productId = productIdInput.value;

package/src/shopify/shopifyReducer.js

@@ -85,7 +85,7 @@ export const mapExistingOptinsFromOfferResponse = (state, offerEl) =>
             mapFrequencyToSellingPlan(
               offerEl?.config?.frequencies,
               offerEl?.config?.frequenciesEveryPeriod,
-              offerEl.defaultFrequency
+              offerEl?.defaultFrequency
             ) ||
             getFirstSellingPlan(offerEl?.config?.frequencies)
           : it.frequency
@@ -103,7 +103,7 @@ export const reduceNewOptinsFromOfferResponse = (
   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 { config: { frequencies: sellingPlans, frequenciesEveryPeriod } = {}, defaultFrequency } = offerEl || {};
       const psdf = default_frequencies[id];
       let frequency;
 
@@ -314,7 +314,7 @@ export const config = (
       defaultFrequency,
       config: { frequencies: sellingPlans, frequenciesEveryPeriod, prepaidSellingPlans = {} } = {},
       product
-    } = offerEl;
+    } = offerEl || {};
 
     // We don't want to be setting the default frequency to a prepaid selling plan
     if (prepaidSellingPlans[product?.id]?.some(({ sellingPlan }) => sellingPlan === defaultFrequency)) {
@@ -381,10 +381,10 @@ export const offer = (state = {}, _action) => state;
 function getFrequencyForPrepaidShipments({ prepaidShipments, offer: offerEl, product }) {
   if (prepaidShipments) {
     const productId = safeProductId(product.id);
-    const plan = offerEl.config.prepaidSellingPlans[productId]?.find(p => p.numberShipments === prepaidShipments);
+    const plan = offerEl?.config.prepaidSellingPlans[productId]?.find(p => p.numberShipments === prepaidShipments);
     return plan ? plan.sellingPlan : null;
   }
-  return offerEl.config.frequencies[0];
+  return offerEl?.config.frequencies[0];
 }
 
 function getOptedInItem(cartItem) {