@ordergroove/offers 2.40.2 → 2.40.4-alpha-PR-1091-3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ordergroove/offers",
-  "version": "2.40.2",
+  "version": "2.40.4-alpha-PR-1091-3.0+b3ec3088",
   "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": "d2b9d0b60d78396e064037cffebf1cb2a494cd5f"
+  "gitHead": "b3ec3088230992d2339dd18c604084b6f4cd2044"
 }

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__/localStorage.spec.js

@@ -60,6 +60,7 @@ describe('loadState', () => {
   });
 
   it('should load empty object if preview mode', () => {
+    window.og = window.og || {};
     const tmp = window.og.previewMode;
     window.og.previewMode = true;
     expect(loadState()).toEqual({});
@@ -68,10 +69,21 @@ describe('loadState', () => {
 });
 
 describe('saveState', () => {
+  let cookieSpy;
   let getItemSpy, setItemSpy;
   beforeEach(() => {
     getItemSpy = spyOn(Object.getPrototypeOf(localStorage), 'getItem');
     setItemSpy = spyOn(Object.getPrototypeOf(localStorage), 'setItem');
+    cookieSpy = '';
+    Object.defineProperty(document, 'cookie', {
+      get: function () {
+        return cookieSpy;
+      },
+      set: function (value) {
+        cookieSpy = value;
+      },
+      configurable: true // Ensure property can be redefined in future tests
+    });
   });
 
   it('should not save empty state', function () {
@@ -83,6 +95,7 @@ describe('saveState', () => {
   it('should not save if same state', function () {
     getItemSpy.and.returnValue(JSON.stringify({ sessionId: 'yum' }));
     saveState({ sessionId: 'yum' });
+    expect(cookieSpy).toEqual('og_session_id=yum; path=/; expires=Fri, 31 Dec 9999 23:59:59 GMT; SameSite=Lax');
     expect(getItemSpy).toHaveBeenCalledWith(STORE_ROOT);
     expect(setItemSpy).not.toHaveBeenCalled();
   });
@@ -90,6 +103,7 @@ describe('saveState', () => {
   it('should save if different state', function () {
     const payload = { sessionId: 'yum' };
     saveState(payload);
+    expect(cookieSpy).toEqual('og_session_id=yum; path=/; expires=Fri, 31 Dec 9999 23:59:59 GMT; SameSite=Lax');
     expect(getItemSpy).toHaveBeenCalledWith(STORE_ROOT);
     expect(setItemSpy).toHaveBeenCalledWith(STORE_ROOT, JSON.stringify({ sessionId: 'yum' }));
   });

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

@@ -0,0 +1,81 @@
+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(
+      new URL(
+        'http://localhost/offer/abc-merchant/pdp?session_id=x.y.z&page_type=1&module_view=%5B%22regular%22%5D&p=%5B%22123%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({
+      result: 'error'
+    });
+    store.dispatch(requestOffer('123'));
+    expect(fetch).toHaveBeenCalledTimes(1);
+    expect(fetch).toHaveBeenCalledWith(
+      new URL(
+        'http://localhost/offer/abc-merchant/pdp?session_id=x.y.z&page_type=1&module_view=%5B%22regular%22%5D&p=%5B%22123%22%5D'
+      )
+    );
+
+    await new Promise(r => setTimeout(r, 10));
+
+    expect(store.getState().lastError).toEqual({ type: FETCH_RESPONSE_ERROR, payload: { result: 'error' } });
+  });
+});

package/src/core/actions.js

@@ -199,26 +199,7 @@ export const requestOffer = (product, module = constants.DEFAULT_OFFER_MODULE, o
 });
 
 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)));
-  };
+  requestOffer(product, module, offerElement);
 
 export const checkout = () => ({
   type: constants.CHECKOUT

package/src/core/experiments.js

@@ -1,4 +1,4 @@
-import { RECEIVE_MERCHANT_SETTINGS, SET_EXPERIMENT_VARIANT } from './constants';
+import { RECEIVE_MERCHANT_SETTINGS, REQUEST_OFFER, SET_EXPERIMENT_VARIANT } from './constants';
 import murmur from 'murmurhash-js';
 
 /**
@@ -82,22 +82,33 @@ export function getAssignedExperimentVariant(experimentSettings, sessionId) {
  * @return {function} A function that takes the next middleware function and an action as arguments.
  */
 export function experimentsMiddleware(store) {
+  let variant, experimentSettings;
+
   return next => action => {
     const response = next(action);
-    if (action.type !== RECEIVE_MERCHANT_SETTINGS) {
-      return response;
-    }
+    if (action.type === RECEIVE_MERCHANT_SETTINGS) {
+      experimentSettings = action.payload.experiments;
 
-    const { experiments: experimentSettings, sessionId } = store.getState();
-    const variant = getAssignedExperimentVariant(experimentSettings, sessionId);
+      const { sessionId } = store.getState();
 
-    if (variant) {
-      store.dispatch({
-        type: SET_EXPERIMENT_VARIANT,
-        payload: variant
-      });
-    }
+      variant = getAssignedExperimentVariant(experimentSettings, sessionId);
 
+      if (variant) {
+        store.dispatch({
+          type: SET_EXPERIMENT_VARIANT,
+          payload: variant
+        });
+      }
+    } else if (action.type === REQUEST_OFFER) {
+      if (variant) {
+        action.payload.searchParams = {
+          ...action.payload.searchParams,
+          variant: variant.public_id
+        };
+      }
+    }
     return response;
   };
 }
+
+experimentsMiddleware.position = -1;

package/src/core/localStorage.js

@@ -39,6 +39,13 @@ export const serializeState = state => {
 
 export const saveState = state => {
   if (isPreviewMode()) return;
+  if (state && state.sessionId) {
+    document.cookie =
+      'og_session_id=' +
+      encodeURIComponent(state.sessionId) +
+      '; path=/; expires=Fri, 31 Dec 9999 23:59:59 GMT; SameSite=Lax';
+  }
+
   const serializedState = serializeState(state);
   if (serializedState && localStorage.getItem(STORE_ROOT) !== serializedState) {
     localStorage.setItem(STORE_ROOT, serializedState);

package/src/core/offerRequest.js

@@ -0,0 +1,96 @@
+import { toProductId } from './api';
+import { DEFAULT_OFFER_MODULE, FETCH_RESPONSE_ERROR, RECEIVE_FETCH, RECEIVE_OFFER, REQUEST_OFFER } from './constants';
+import { safeProductId } from './utils';
+
+function mapStateToOfferURL(state, { module = DEFAULT_OFFER_MODULE, ...params } = {}) {
+  const {
+    merchantId,
+    sessionId,
+    environment: { apiUrl }
+  } = state;
+
+  const url = new URL(`/offer/${merchantId}/${module}`, apiUrl);
+
+  [
+    ['session_id', sessionId],
+    ['page_type', 1],
+    ['module_view', JSON.stringify(['regular'])],
+    ...Object.entries(params)
+  ].forEach(([k, v]) => url.searchParams.set(k, v));
+
+  return url;
+}
+
+/**
+ * Creates a function that processes a batch of actions by sending an offer request
+ * based on the product IDs extracted from the actions' payloads. The created function
+ * dispatches appropriate actions to the store depending on the success or failure of the offer request.
+ *
+ * @function makeDoOfferRequest
+ * @param {Object} store - The Redux store instance used to dispatch actions and retrieve the state.
+ * @returns {Function} A function that accepts a spread of actions and processes them
+ *                     by making an offer request and dispatching the appropriate responses.
+ *
+ * @example
+ * const doOfferRequest = makeDoOfferRequest(store);
+ *
+ * const actions = [
+ *   { payload: { product: 'product1', offer: 'offer1' } },
+ *   { payload: { product: 'product2', offer: 'offer2' } }
+ * ];
+ *
+ * doOfferRequest(...actions);
+ *
+ * // The returned function will:
+ * // 1. Extract product IDs from the actions' payloads.
+ * // 2. Construct the offer request URL.
+ * // 3. Make an HTTP request to fetch the offers.
+ * // 4. Dispatch appropriate actions to the store based on the response.
+ * // 5. Handle errors and dispatch error actions if necessary.
+ * // 6. Finally, dispatch a `fetchDone` action to signal completion.
+ */
+function createOfferRequestHandler(store) {
+  return async function doOfferRequest(action) {
+    const state = store.getState();
+
+    const offerRequestUrl = mapStateToOfferURL(state, {
+      p: toProductId(safeProductId(action.payload.product)),
+      ...action.payload.searchParams
+    });
+
+    try {
+      const httpResponse = await fetch(offerRequestUrl);
+      const jsonResponse = await httpResponse.json();
+
+      store.dispatch({
+        type: RECEIVE_OFFER,
+        payload: {
+          ...jsonResponse,
+          offer: action.payload.offer
+        }
+      });
+    } catch (err) {
+      console.log(err);
+      store.dispatch({
+        type: FETCH_RESPONSE_ERROR,
+        payload: err
+      });
+    } finally {
+      store.dispatch({
+        type: RECEIVE_FETCH,
+        payload: action
+      });
+    }
+  };
+}
+
+export function offerRequestMiddleware(store) {
+  const doOfferRequests = createOfferRequestHandler(store);
+
+  return next => action => {
+    next(action);
+    if (action.type === REQUEST_OFFER) {
+      doOfferRequests(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,7 @@ import thunk from 'redux-thunk';
 import { loadState } from './localStorage';
 import { dispatchMiddleware, localStorageMiddleware, offerEvents } from './middleware';
 import { waitUntilOffersReady } from './waitUntilOffersReady';
+import { offerRequestMiddleware } from './offerRequest';
 
 export function makeStore(reducer, ...extraMiddlewares) {
   if (window.og && window.og.store) return window.og.store;
@@ -17,7 +18,13 @@ export function makeStore(reducer, ...extraMiddlewares) {
         })
       : compose;
 
-  const middlewares = [waitUntilOffersReady, thunk, dispatchMiddleware, offerEvents];
+  const middlewares = [
+    waitUntilOffersReady,
+    thunk, // remove thisone after migration, it will save some KB
+    offerRequestMiddleware,
+    dispatchMiddleware,
+    offerEvents
+  ];
 
   let initial = {};
 
@@ -30,7 +37,13 @@ export function makeStore(reducer, ...extraMiddlewares) {
     }
   }
 
-  const enhancer = composeEnhancers(applyMiddleware(...middlewares, ...extraMiddlewares.filter(it => it)));
+  const sortedMiddlewares = extraMiddlewares
+    .filter(it => (it?.position || 0) < 0)
+    .concat(middlewares)
+    .concat(extraMiddlewares.filter(it => it && (it?.position || 0) >= 0));
+
+  const enhancer = composeEnhancers(applyMiddleware(...sortedMiddlewares));
+
   const store = createStore(reducer, initial, enhancer);
 
   window.og = window.og || {};