npm - @ordergroove/offers - Versions diffs - 2.37.2 → 2.38.1-alpha-PR-966-7.19 - Mend

@ordergroove/offers 2.37.2 → 2.38.1-alpha-PR-966-7.19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (20) hide show

package/CHANGELOG.md +11 -0
package/dist/bundle-report.html +45 -32
package/dist/offers.js +69 -69
package/dist/offers.js.map +4 -4
package/examples/tata-pdp.html +50 -0
package/package.json +3 -2
package/src/__tests__/offers.spec.js +8 -4
package/src/core/__tests__/actions.spec.js +15 -12
package/src/core/__tests__/experiments.spec.js +44 -0
package/src/core/actions.js +11 -5
package/src/core/api.js +11 -4
package/src/core/constants.js +3 -0
package/src/core/experiments.js +56 -0
package/src/core/reducer.js +8 -0
package/src/core/waitUntilOffersReady.js +2 -0
package/src/index.js +4 -1
package/src/make-api.js +4 -2
package/src/shopify/__tests__/shopifyReducer.spec.js +5 -5
package/src/shopify/shopifyReducer.js +23 -12
package/src/types.ts +12 -0

package/examples/tata-pdp.html ADDED Viewed

@@ -0,0 +1,50 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Ordergroove Offers</title>
+  </head>
+  <body id="single-offer">
+    <script>
+      localStorage.clear();
+    </script>
+    <script type="text/javascript" src="../dist/offers.js"></script>
+    <og-offer product="64"></og-offer>
+    <script type="text/javascript">
+      og.offers
+        .initialize('d7ab5d5a4cdd11e9b066bc764e10b970', 'staging', '', {
+          experiments: {
+            enabled: true,
+            variants: [
+              { public_id: '80ed33e0e1b211ec97c68ab73961e12c', weight: 50 },
+              { public_id: '3a23f74ee1b411ec934f8ab73961e12c', weight: 50 }
+            ]
+          }
+        })
+        .setTemplates([
+          {
+            selector: 'og-offer',
+            markup: `\
+<og-when test="regularEligible">
+  <p>
+  <og-optout-button>Buy one time</og-optout-button>
+  </p>
+  <p>
+  <og-optin-button>
+    Subscribed to get <og-incentive-text from="DiscountPercent"></og-incentive-text>
+  </og-optin-button>
+  </p>
+  <p style="margin-left: 1.5em">
+  Ships every
+  <og-select-frequency>
+    <option value="1w">1 week</option>
+    <option value="2w" selected>2 weeks (recomended)</option>
+    <option value="1m">1 month </option>
+  </og-select-frequency>
+  </p>
+</og-when>`
+          }
+        ]);
+    </script>
+  </body>
+</html>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@ordergroove/offers",
-  "version": "2.37.2",
+  "version": "2.38.1-alpha-PR-966-7.19+f3b6f17a",
   "description": "offer state component",
   "author": "Eugenio Lattanzio <eugenio63@gmail.com>",
   "homepage": "https://github.com/ordergroove/plush-toys#readme",
@@ -40,6 +40,7 @@
     "lit-element": "^2.1.0",
     "lodash.memoize": "^4.1.2",
     "logical-expression-parser": "1.0.0",
+    "murmurhash-js": "^1.0.0",
     "redux": "^4.0.1",
     "reselect": "^4.0.0",
     "throttle-debounce": "^2.1.0"
@@ -48,5 +49,5 @@
     "@ordergroove/offers-templates": "^0.9.6",
     "@types/lodash.memoize": "^4.1.9"
   },
-  "gitHead": "7576fcab14c780a395ee0e581b8147525bd96127"
+  "gitHead": "f3b6f17a09bfb2a2a1729e95a60bd2ef56b2dc73"
 }

package/src/__tests__/offers.spec.js CHANGED Viewed

@@ -38,13 +38,14 @@ describe('Offers', () => {
     offers.setPublicPath('yum-path');
   });
+  const theState = { sessionId: 'xyz' };
   beforeEach(() => {
     register = spyOn(offers, 'register');
     fetchOfferSpy = spyOn(api, 'fetchOffer');
     const dispatch = jasmine.createSpy();
     mockStore = {
       getState() {
-        return { sessionId: 'xyz' };
+        return theState;
       },
       dispatch
     };
@@ -77,7 +78,8 @@ describe('Offers', () => {
         '0e5de2bedc5e11e3a2e4bc764e106cf4',
         'xyz',
         '123',
-        'pdp'
+        'pdp',
+        theState
       );
     });
@@ -95,14 +97,16 @@ describe('Offers', () => {
         '0e5de2bedc5e11e3a2e4bc764e106cf4',
         'xyz',
         '123',
-        'pdp'
+        'pdp',
+        theState
       ]);
       expect(fetchOfferSpy.calls.argsFor(1)).toEqual([
         'https://staging.offers.ordergroove.com',
         '0e5de2bedc5e11e3a2e4bc764e106cf4',
         'xyz',
         '456',
-        'pdp'
+        'pdp',
+        theState
       ]);
     });

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

@@ -144,15 +144,16 @@ describe('redux actions', function () {
   });
   describe('actions.offer', () => {
+    const theState = {
+      merchantId: 'foo',
+      sessionId: 'bar',
+      environment: {
+        apiUrl: 'some-apiUrl'
+      }
+    };
     beforeEach(() => {
       this.dispatch = jasmine.createSpy('dispatch');
-      this.getState = jasmine.createSpy('getState').and.returnValue({
-        merchantId: 'foo',
-        sessionId: 'bar',
-        environment: {
-          apiUrl: 'some-apiUrl'
-        }
-      });
+      this.getState = jasmine.createSpy('getState').and.returnValue(theState);
     });
     it('fetchOffer should return a function', () => {
@@ -160,11 +161,12 @@ describe('redux actions', function () {
     });
     it('should call api.fetchOffer with environment.apiUrl from state as first param ', async () => {
-      const getState = jasmine.createSpy('getState').and.returnValue({
+      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(
@@ -172,7 +174,8 @@ describe('redux actions', function () {
         'the merchantId',
         'the sessionId',
         'the product',
-        'pdp'
+        'pdp',
+        state
       );
     });
@@ -185,7 +188,7 @@ describe('redux actions', function () {
       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');
+      expect(fetchOfferSpy).toHaveBeenCalledWith('some-apiUrl', 'foo', 'bar', 'yum product', 'pdp', theState);
     });
     it('should dispatch fetchResponseError if api fails', async () => {
@@ -195,7 +198,7 @@ describe('redux actions', function () {
       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');
+      expect(fetchOfferSpy).toHaveBeenCalledWith('some-apiUrl', 'foo', 'bar', 'yum product', 'pdp', theState);
       expect(this.getState).toHaveBeenCalled();
     });
   });

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

@@ -0,0 +1,44 @@
+import { experimentsReducer } from '../experiments';
+import { RECEIVE_MERCHANT_SETTINGS } from '../constants';
+import { createSessionId } from '../actions';
+describe('experiments', () => {
+  const inputs = [
+    [30, 30, 40],
+    [50, 50],
+    [30, 70],
+    [80, 20],
+    [10, 90],
+    [10, 20, 40, 30]
+  ];
+  function test(weights, attempts = 100_000) {
+    const result = weights.map(() => 0);
+    const payload = {
+      experiments: {
+        enabled: true,
+        variants: weights.map((weight, ix) => ({ public_id: `weight ${ix} ${weights}%`, weight }))
+      }
+    };
+    for (let index = 0; index < attempts; index++) {
+      const { payload: sessionId } = createSessionId('abc');
+      const initial = { sessionId };
+      const action = { type: RECEIVE_MERCHANT_SETTINGS, payload };
+      const {
+        experiments: { currentVariant }
+      } = experimentsReducer(initial, action);
+      result[currentVariant]++;
+    }
+    return result.map(r => Math.round((r / attempts) * 100));
+  }
+  inputs.forEach(weights =>
+    it(`should roll the dice ${weights}`, () => {
+      expect(test(weights)).toEqual(weights);
+    })
+  );
+});

package/src/core/actions.js CHANGED Viewed

@@ -147,6 +147,11 @@ export const fetchOrders = (status = 1, ordering = 'place') =>
 export const setEnvironment = env => {
   switch (env) {
+    case constants.ENV_LOCAL:
+      return {
+        type: constants.SET_ENVIRONMENT_LOCAL,
+        payload: env
+      };
     case constants.ENV_DEV:
       return {
         type: constants.SET_ENVIRONMENT_DEV,
@@ -193,22 +198,23 @@ export const requestOffer = (product, module = constants.DEFAULT_OFFER_MODULE, o
   payload: { product, module, offer }
 });
-export const fetchOffer = (product, module = constants.DEFAULT_OFFER_MODULE, offer) =>
+export const fetchOffer = (product, module = constants.DEFAULT_OFFER_MODULE, offerElement) =>
   function fetchOfferThunk(dispatch, getState) {
+    const state = getState();
     const {
       merchantId,
       sessionId,
       environment: { apiUrl }
-    } = getState();
-    const requestAction = requestOffer(product, module, offer);
+    } = 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)
+      .fetchOffer(apiUrl, merchantId, sessionId, productId, module, state)
       .then(
-        response => dispatch(receiveOffer(response, offer)),
+        response => dispatch(receiveOffer(response, offerElement)),
         err => dispatch(fetchResponseError(err))
       )
       .finally(() => dispatch(fetchDone(requestAction)));

package/src/core/api.js CHANGED Viewed

@@ -66,19 +66,26 @@ export const toProductId = product =>
 export const fetchOffer = memoize(
   withFetchJson(
-    withHost((merchantId, sessionId, product, module = 'pdp') => {
+    withHost((merchantId, sessionId, product, module = 'pdp', state = {}) => {
       if (!merchantId) throw Error('merchantId required');
       if (!sessionId) throw Error('sessionId required');
       if (!product) throw Error('product required');
-      const query = toQuery([
+      const query = [
         ['session_id', sessionId],
         ['page_type', 1],
         ['p', toProductId(product)],
         ['module_view', JSON.stringify(['regular'])]
-      ]);
+      ];
-      return [`/offer/${merchantId}/${module}?${query}`];
+      const { experiments } = state;
+      const variant = experiments?.variants?.at(experiments.currentVariant);
+      if (variant) {
+        query.push(['variant', variant.public_id]);
+      }
+      return [`/offer/${merchantId}/${module}?${toQuery(query)}`];
     })
   ),
   memoizeKey

package/src/core/constants.js CHANGED Viewed

@@ -17,6 +17,8 @@ export const CART_PRODUCT_KEY_HAS_CHANGED = 'CART_PRODUCT_KEY_HAS_CHANGED';
 export const RECEIVE_ORDER_ITEMS = 'RECEIVE_ORDER_ITEMS';
 export const FETCH_RESPONSE_ERROR = 'FETCH_RESPONSE_ERROR';
+export const SET_ENVIRONMENT_LOCAL = 'SET_ENVIRONMENT_LOCAL';
 export const SET_ENVIRONMENT_STAGING = 'SET_ENVIRONMENT_STAGING';
 export const SET_ENVIRONMENT_DEV = 'SET_ENVIRONMENT_DEV';
 export const SET_ENVIRONMENT_PROD = 'SET_ENVIRONMENT_PROD';
@@ -44,6 +46,7 @@ export const SETUP_PRODUCT = 'SETUP_PRODUCT';
 export const SETUP_CART = 'SETUP_CART';
 export const RECEIVE_MERCHANT_SETTINGS = 'RECEIVE_MERCHANT_SETTINGS';
 export const DEFAULT_OFFER_MODULE = 'pdp';
+export const ENV_LOCAL = 'local';
 export const ENV_DEV = 'dev';
 export const ENV_STAGING = 'staging';
 export const ENV_PROD = 'prod';

package/src/core/experiments.js ADDED Viewed

@@ -0,0 +1,56 @@
+import { RECEIVE_MERCHANT_SETTINGS } from './constants';
+import murmur from 'murmurhash-js';
+function getVariantIx(sessionId, variants) {
+  const weights = variants.map(variant => variant.weight);
+  if (weights.reduce((a, b) => a + b, 0) !== 100) {
+    console.error('Sum of weights for variants must be 100');
+  }
+  const m = murmur.murmur3(sessionId, 0);
+  const n = m % 100;
+  let lower_bound = 0;
+  for (let i = 0; i < variants.length; i++) {
+    const v = variants[i];
+    const upper_bound = lower_bound + v.weight;
+    // If a variant has a weight of 0, ignore it
+    if (v.weight > 0 && n < upper_bound) {
+      return i;
+    }
+    lower_bound = upper_bound;
+  }
+  return variants.length - 1;
+}
+export function experimentsReducer(state = {}, action) {
+  if (action.type === RECEIVE_MERCHANT_SETTINGS) {
+    if (action.payload?.experiments) {
+      const experimentSettings = action.payload.experiments;
+      const { sessionId } = state;
+      const variants = experimentSettings.variants;
+      const variantIx = getVariantIx(sessionId, variants);
+      const variant = variants[variantIx];
+      return {
+        ...state,
+        experiments: {
+          ...action.payload.experiments,
+          currentVariant: variantIx,
+          offerProfileId: variant.parameters?.offer_profile_public_id
+        }
+      };
+    }
+  }
+  return state;
+}
+export const addExperimentsReducer =
+  baseReducer =>
+  (prevState = {}, action) => {
+    const state = baseReducer(prevState, action);
+    return experimentsReducer(state, action);
+  };

package/src/core/reducer.js CHANGED Viewed

@@ -305,6 +305,13 @@ export const productToSubscribe = (state = {}, action) => {
 export const environment = (state = {}, action) => {
   switch (action.type) {
+    case constants.SET_ENVIRONMENT_LOCAL:
+      return {
+        ...state,
+        name: 'local',
+        apiUrl: 'http://py3web.ordergroove.localhost',
+        legoUrl: 'http://py3lego.ordergroove.localhost'
+      };
     case constants.SET_ENVIRONMENT_STAGING:
       return {
         ...state,
@@ -518,6 +525,7 @@ export default combineReducers({
   authUrl,
   offer,
   offerId,
+  experiments: (state = {}) => state,
   sessionId,
   productOffer,
   firstOrderPlaceDate,

package/src/core/waitUntilOffersReady.js CHANGED Viewed

@@ -1,6 +1,7 @@
 import { createSessionId, fetchAuth } from './actions';
 import {
   CREATED_SESSION_ID,
+  SET_ENVIRONMENT_LOCAL,
   SET_ENVIRONMENT_DEV,
   SET_ENVIRONMENT_PROD,
   SET_ENVIRONMENT_STAGING,
@@ -49,6 +50,7 @@ export function waitUntilOffersReady(store) {
   return next => async action => {
     if (
+      SET_ENVIRONMENT_LOCAL === action.type ||
       SET_ENVIRONMENT_DEV === action.type ||
       SET_ENVIRONMENT_STAGING === action.type ||
       SET_ENVIRONMENT_PROD === action.type

package/src/index.js CHANGED Viewed

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

package/src/make-api.js CHANGED Viewed

@@ -147,11 +147,13 @@ export default function makeApi(store) {
           products = products.concat(settings.cart.products);
         }
         const { apiUrl } = environment({}, actions.setEnvironment(env));
-        const { sessionId } = storeInstance.getState();
+        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);
+            api.fetchOffer(apiUrl, merchantId, sessionId, `${id}`, DEFAULT_OFFER_MODULE, state);
           });
         }

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

@@ -147,7 +147,7 @@ describe('autoshipEligible', () => {
     });
   });
-  it('should return false if there are only PSFL selling plans', () => {
+  it('should return true if there are only PSFL selling plans', () => {
     const actual = autoshipEligible(
       {},
       {
@@ -155,8 +155,8 @@ describe('autoshipEligible', () => {
         payload: getSetupProductPayload({
           variants: {
             'single-non-psfl': [sellingPlans.default],
-            'sub-eligible-psfl': [sellingPlans.default, sellingPlans.psfl],
-            'not-sub-eligible-psfl': [sellingPlans.psfl]
+            'default-sub-psfl': [sellingPlans.default, sellingPlans.psfl],
+            'not-default-sub-psfl': [sellingPlans.psfl]
           },
           additionalSellingPlanGroups: {
             og_psfl_2m: [sellingPlans.psfl]
@@ -168,8 +168,8 @@ describe('autoshipEligible', () => {
     expect(actual).toEqual({
       'yum product id': false,
       'single-non-psfl': true,
-      'sub-eligible-psfl': true,
-      'not-sub-eligible-psfl': false
+      'default-sub-psfl': true,
+      'not-default-sub-psfl': true
     });
   });
 });

package/src/shopify/shopifyReducer.js CHANGED Viewed

@@ -127,6 +127,7 @@ export const reduceNewOptinsFromOfferResponse = (
   }, []);
 const getOGSellingPlanGroup = product => {
+  // retrieve an OG Default or PSFL Selling Plan Group, preferring to return PSFL groups if they exist
   const productSpecificFrequencySellingPlanGroup = product?.selling_plan_groups.find(
     isProductSpecificFrequencySellingPlanGroup
   );
@@ -134,10 +135,20 @@ const getOGSellingPlanGroup = product => {
   return productSpecificFrequencySellingPlanGroup || getDefaultSubscriptionSellingPlanGroup(product);
 };
+const getOGSellingPlanGroups = product => {
+  const sellingPlanGroups = (product?.selling_plan_groups || []).filter(
+    group => isDefaultSellingPlanGroup(group) || isProductSpecificFrequencySellingPlanGroup(group)
+  );
+  return sellingPlanGroups;
+};
 const getDefaultSubscriptionSellingPlanGroup = product => {
-  return product?.selling_plan_groups.find(group => group.name === DEFAULT_PAY_AS_YOU_GO_GROUP_NAME);
+  // retrieve the OG Default Selling Plan Group
+  return product?.selling_plan_groups.find(isDefaultSellingPlanGroup);
 };
+const isDefaultSellingPlanGroup = group => group.name === DEFAULT_PAY_AS_YOU_GO_GROUP_NAME;
 const isProductSpecificFrequencySellingPlanGroup = group => group.name.startsWith('og_psfl');
 const productOrVariantInStockReducer = (acc, cur) => ({
@@ -164,19 +175,18 @@ export const autoshipEligible = (state = {}, action) => {
     const {
       payload: { product }
     } = action;
-    const defaultSellingPlanGroup = getDefaultSubscriptionSellingPlanGroup(product);
-    const sellingPlanIdsInDefaultGroup = new Set(
-      defaultSellingPlanGroup?.selling_plans.map(sellingPlan => sellingPlan.id) ?? []
+    const applicableSellingPlanGroups = getOGSellingPlanGroups(product);
+    const ogSellingPlanIds = new Set(
+      applicableSellingPlanGroups.flatMap(group => group.selling_plans.map(sellingPlan => sellingPlan.id)) ?? []
     );
-    return [product, ...(product?.variants || [])]?.reduce((acc, cur) => {
-      const productSellingPlansFromDefaultGroup =
-        cur?.selling_plan_allocations?.filter(sellingPlan =>
-          sellingPlanIdsInDefaultGroup.has(sellingPlan.selling_plan_id)
-        ) ?? [];
-      // a product is autoship eligible if it has plans from the default "Subscribe and Save" selling plan group
-      // the presence of other selling plans (prepaid, product-specific frequencies) does not mean it is autoship eligible
-      const isAutoshipEligible = productSellingPlansFromDefaultGroup.length > 0;
+    return [product, ...(product?.variants || [])]?.reduce((acc, cur) => {
+      const productSellingPlansFromOG =
+        cur?.selling_plan_allocations?.filter(sellingPlan => ogSellingPlanIds.has(sellingPlan.selling_plan_id)) ?? [];
+      // a product is autoship eligible if it has plans from the default or PSFL selling plan group
+      // the presence of prepaid selling plans does not mean it is autoship eligible
+      const isAutoshipEligible = productSellingPlansFromOG.length > 0;
       return {
         ...overrideLineKey(acc, cur.id, isAutoshipEligible),
@@ -505,6 +515,7 @@ const reducer = combineReducers({
   nextUpcomingOrder,
   offer,
   offerId,
+  experiments: (state = {}) => state,
   optedin,
   optedout,
   previewStandardOffer,

package/src/types.ts CHANGED Viewed

@@ -1,4 +1,16 @@
+export type ExperimentVariant = {
+  public_id: string;
+  parameters: any;
+  weight: number;
+};
+export type ExperimentConfig = {
+  public_id: string;
+  variants: ExperimentVariant[];
+};
 export interface MerchantSettings {
   currency_code: string;
   multicurrency_enabled: boolean;
+  experiments?: ExperimentConfig;
 }