@ordergroove/offers 2.44.1-alpha-PR-1167-2.36 → 2.45.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ordergroove/offers",
-  "version": "2.44.1-alpha-PR-1167-2.36+cf24ab29",
+  "version": "2.45.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.7",
     "@types/lodash.memoize": "^4.1.9"
   },
-  "gitHead": "cf24ab29685dd3a20acce3d0c6ce8eea63c073f8"
+  "gitHead": "221fe44cdecde025a85ff117df9639fb5068dfd5"
 }

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

@@ -4,7 +4,8 @@ import {
   isSameProduct,
   templatesSelector,
   makeProductSpecificDefaultFrequencySelector,
-  makeProductPrepaidShipmentOptionsSelector
+  makeProductPrepaidShipmentOptionsSelector,
+  makeProductFrequenciesSelector
 } from '../selectors';
 import { stringifyFrequency } from '../api';
 
@@ -141,3 +142,92 @@ describe('makeProductPrepaidShipmentOptionsSelector', () => {
     ).toEqual([3, 6, 12]);
   });
 });
+
+describe('makeProductFrequenciesSelector', () => {
+  const productFrequencies = {
+    123: {
+      frequencies: ['default-group-plan-1', 'default-group-plan-2', 'default-group-plan-3'],
+      frequenciesEveryPeriod: ['1_3', '2_3', '3_3'],
+      frequenciesText: ['month', '2 months', '3 months'],
+      defaultFrequency: 'default-group-plan-1'
+    },
+    456: {
+      frequencies: ['other-group-plan-1', 'other-group-plan-2', 'other-group-plan-3'],
+      frequenciesEveryPeriod: ['2_3', '4_3', '6_3'],
+      frequenciesText: ['2 months', '4 months', '6 months'],
+      defaultFrequency: 'other-group-plan-1'
+    }
+  };
+  // note: in real life, these "global" frequencies are likely the same as the one of the sets in productFrequencies
+  // for unit testing, they are different so it is obvious which set of fields was returned
+  const frequencies = ['fallback-group-plan-1', 'fallback-group-plan-2', 'fallback-group-plan-3'];
+  const frequenciesEveryPeriod = ['1_2', '2_2', '3_2'];
+  const frequenciesText = ['week', '2 weeks', '3 weeks'];
+  const defaultFrequency = 'fallback-group-plan-1';
+  const config = { productFrequencies, frequencies, frequenciesEveryPeriod, frequenciesText, defaultFrequency };
+
+  it('returns product frequencies for product ID', () => {
+    const selectorProduct1 = makeProductFrequenciesSelector(123);
+    expect(
+      selectorProduct1({
+        config
+      })
+    ).toEqual({
+      frequencies: ['default-group-plan-1', 'default-group-plan-2', 'default-group-plan-3'],
+      frequenciesEveryPeriod: ['1_3', '2_3', '3_3'],
+      frequenciesText: ['month', '2 months', '3 months'],
+      defaultFrequency: 'default-group-plan-1'
+    });
+
+    const selectorProduct2 = makeProductFrequenciesSelector(456);
+    expect(selectorProduct2({ config })).toEqual({
+      frequencies: ['other-group-plan-1', 'other-group-plan-2', 'other-group-plan-3'],
+      frequenciesEveryPeriod: ['2_3', '4_3', '6_3'],
+      frequenciesText: ['2 months', '4 months', '6 months'],
+      defaultFrequency: 'other-group-plan-1'
+    });
+
+    // product ID does not exist
+    const selectorProduct3 = makeProductFrequenciesSelector(789);
+    expect(selectorProduct3({ config })).toEqual({});
+  });
+
+  it('falls back to old frequency fields if productFrequencies is not defined', () => {
+    const selector = makeProductFrequenciesSelector(123);
+    expect(
+      selector({
+        config: {
+          ...config,
+          productFrequencies: null
+        }
+      })
+    ).toEqual({
+      frequencies,
+      frequenciesEveryPeriod,
+      frequenciesText,
+      defaultFrequency
+    });
+  });
+
+  it('does not use old frequency fields if productFrequencies is defined but empty', () => {
+    const selector = makeProductFrequenciesSelector(123);
+    expect(
+      selector({
+        config: {
+          ...config,
+          productFrequencies: {}
+        }
+      })
+    ).toEqual({});
+  });
+
+  it('returns object with undefined fields when everything is undefined', () => {
+    const selector = makeProductFrequenciesSelector(123);
+    expect(selector({ config: {} })).toEqual({
+      frequencies: undefined,
+      frequenciesEveryPeriod: undefined,
+      frequenciesText: undefined,
+      defaultFrequency: undefined
+    });
+  });
+});

package/src/core/actions.js

@@ -189,6 +189,7 @@ export const requestSessionId = () => (dispatch, getState) => {
 };
 
 export const receiveOffer = (response, offer, productId) => (dispatch, getState) => {
+  // this is a thunk so that we access the state for the selector
   const frequencyConfig = makeProductFrequenciesSelector(productId)(getState());
   dispatch({
     type: constants.RECEIVE_OFFER,

package/src/core/reducer.ts

@@ -419,6 +419,7 @@ export const config = (
       return {
         ...state,
         ...action.payload,
+        // these are not populated by default; only if the merchant calls the config method on the Offers API
         defaultFrequency: action.payload.defaultFrequency
           ? stringifyFrequency(action.payload.defaultFrequency)
           : state.defaultFrequency,

package/src/core/selectors.ts

@@ -3,7 +3,7 @@ import memoize from 'lodash.memoize';
 import { stringifyFrequency } from './api';
 import platform from '../platform';
 import { mapFrequencyToSellingPlan, safeProductId } from './utils';
-import { OfferElement, State } from './types/reducer';
+import { OfferElement, ProductFrequencyConfig, State } from './types/reducer';
 
 memoize.Cache = Map;
 
@@ -151,7 +151,7 @@ export const makeProductPrepaidShipmentOptionsSelector = memoize((productId: str
 );
 
 /**
- * If the product has a product-specific default frequency, return that frequency
+ * If the product has a product-specific default frequency configured in OG, return that frequency
  */
 export const makeProductSpecificDefaultFrequencySelector = memoize((productId: string) =>
   createSelector(
@@ -168,15 +168,48 @@ export const makeProductFrequencyOptionsSelector = memoize((productId: string) =
   createSelector(makeProductFrequenciesSelector(productId), productFrequencies => productFrequencies.frequencies)
 );
 
+/**
+ * returns the default frequency for the product from the config state
+ * all products have a defaultFrequency stored in state, even if a specific frequency is not configured in OG's database
+ * this takes more into account, e.g. whether the customer had opted into a specific frequency previously - see the config reducer for how this is calculated
+ */
 export const makeProductDefaultFrequencySelector = memoize((productId: string) =>
   createSelector(makeProductFrequenciesSelector(productId), productFrequencies => productFrequencies.defaultFrequency)
 );
 
+/**
+ * Get the configured frequencies for the given product IDs
+ * Using this selector should be preferred over accessing config values directly
+ */
 export const makeProductFrequenciesSelector = memoize((productId: string) =>
   createSelector(
-    (state: State) => state?.config?.productFrequencies || {},
-    productFrequencies => {
-      return productFrequencies[safeProductId(productId)] || {};
+    (state: State) => state?.config?.productFrequencies,
+    (state: State) => state?.config?.frequencies,
+    (state: State) => state?.config?.frequenciesEveryPeriod,
+    (state: State) => state?.config?.frequenciesText,
+    (state: State) => state?.config?.defaultFrequency,
+    (
+      productFrequencies,
+      oldFrequencies,
+      oldFrequenciesEveryPeriod,
+      oldFrequenciesText,
+      oldDefaultFrequency
+    ): ProductFrequencyConfig => {
+      if (productFrequencies) {
+        // for Shopify, always use productFrequencies
+        // this is necessary to handle cases where different product variants have different selling plans associated with them
+        return productFrequencies[safeProductId(productId)] || {};
+      } else {
+        // productFrequencies are only populated for Shopify
+        // fall back to the old "global" frequency values if it is not set
+        // these would only be present if the merchant explicitly called `offers.config({ frequencies: [...] })`, so they generally won't be defined
+        return {
+          frequencies: oldFrequencies,
+          frequenciesEveryPeriod: oldFrequenciesEveryPeriod,
+          frequenciesText: oldFrequenciesText,
+          defaultFrequency: oldDefaultFrequency
+        };
+      }
     }
   )
 );

package/src/core/types/reducer.ts

@@ -49,7 +49,7 @@ export type ConfigState = Partial<{
   productFrequencies: Record<string, ProductFrequencyConfig>;
 }>;
 
-type ProductFrequencyConfig = {
+export type ProductFrequencyConfig = {
   frequencies?: string[];
   frequenciesEveryPeriod?: string[];
   frequenciesText?: string[];

package/src/shopify/__tests__/reducers/config.spec.js

@@ -69,7 +69,10 @@ describe('config', () => {
           'yum product id': jasmine.objectContaining({
             defaultFrequency: 'yum selling plan id 2'
           })
-        }
+        },
+        // fallback value in case a merchant was accessing our config directly
+        // productFrequencies should be used instead
+        defaultFrequency: 'yum selling plan id 2'
       })
     );
   });
@@ -432,6 +435,136 @@ describe('config', () => {
     );
   });
 
+  const multiVariantSellingPlanPayload = {
+    product: {
+      id: 'product-id',
+      variants: [
+        {
+          id: 'variant-id-1',
+          selling_plan_allocations: [
+            {
+              selling_plan_id: 'default-group-plan-1',
+              selling_plan_group_id: 'default-group-id'
+            },
+            {
+              selling_plan_id: 'default-group-plan-2',
+              selling_plan_group_id: 'default-group-id'
+            },
+            {
+              selling_plan_id: 'default-group-plan-3',
+              selling_plan_group_id: 'default-group-id'
+            }
+          ]
+        },
+        {
+          id: 'variant-id-2',
+          selling_plan_allocations: [
+            {
+              selling_plan_id: 'psi-group-plan-1',
+              selling_plan_group_id: 'psi-group-id'
+            },
+            {
+              selling_plan_id: 'psi-group-plan-2',
+              selling_plan_group_id: 'psi-group-id'
+            },
+            {
+              selling_plan_id: 'psi-group-plan-3',
+              selling_plan_group_id: 'psi-group-id'
+            }
+          ]
+        }
+      ],
+      selling_plan_groups: [
+        {
+          id: 'default-group-id',
+          name: 'Subscribe and Save',
+          options: [{ name: 'Delivery every', position: 1, values: ['month', '2 months', '3 months'] }],
+          selling_plans: [
+            {
+              id: 'default-group-plan-1',
+              name: 'Delivered every month. Get 10% off today and all future orders.',
+              options: [{ name: 'Delivery every', position: 1, value: 'month' }],
+              price_adjustments: [{ order_count: null, position: 1, value_type: 'percentage', value: 10 }]
+            },
+            {
+              id: 'default-group-plan-2',
+              name: 'Delivered every 2 months. Get 10% off today and all future orders.',
+              options: [{ name: 'Delivery every', position: 1, value: '2 months' }],
+              price_adjustments: [{ order_count: null, position: 1, value_type: 'percentage', value: 10 }]
+            },
+            {
+              id: 'default-group-plan-3',
+              name: 'Delivered every 3 months. Get 10% off today and all future orders.',
+              options: [{ name: 'Delivery every', position: 1, value: '3 months' }],
+              price_adjustments: [{ order_count: null, position: 1, value_type: 'percentage', value: 10 }]
+            }
+          ],
+          app_id: 'ordergroove-subscribe-and-save'
+        },
+        {
+          id: 'psi-group-id',
+          name: 'test-incentive-group',
+          options: [{ name: 'Delivery every', position: 1, values: ['week', '2 weeks', '3 weeks'] }],
+          selling_plans: [
+            {
+              id: 'psi-group-plan-1',
+              name: 'Delivered every week. Get 10% off today and 21% off future orders.',
+              options: [{ name: 'Delivery every', position: 1, value: 'week' }],
+              price_adjustments: [{ order_count: null, position: 1, value_type: 'percentage', value: 10 }]
+            },
+            {
+              id: 'psi-group-plan-2',
+              name: 'Delivered every 2 weeks. Get 10% off today and 21% off future orders.',
+              options: [{ name: 'Delivery every', position: 1, value: '2 weeks' }],
+              price_adjustments: [{ order_count: null, position: 1, value_type: 'percentage', value: 10 }]
+            },
+            {
+              id: 'psi-group-plan-3',
+              name: 'Delivered every 3 weeks. Get 10% off today and 21% off future orders.',
+              options: [{ name: 'Delivery every', position: 1, value: '3 weeks' }],
+              price_adjustments: [{ order_count: null, position: 1, value_type: 'percentage', value: 10 }]
+            }
+          ],
+          app_id: 'ordergroove-subscribe-and-save'
+        }
+      ]
+    }
+  };
+
+  it('should populate frequencies for each product variant', () => {
+    const actual = config(
+      {
+        productFrequencies: {}
+      },
+      {
+        type: constants.SETUP_PRODUCT,
+        payload: multiVariantSellingPlanPayload
+      }
+    );
+
+    expect(actual).toEqual(
+      jasmine.objectContaining({
+        productFrequencies: {
+          'variant-id-1': {
+            frequencies: ['default-group-plan-1', 'default-group-plan-2', 'default-group-plan-3'],
+            frequenciesEveryPeriod: ['1_3', '2_3', '3_3'],
+            frequenciesText: ['month', '2 months', '3 months']
+          },
+          'variant-id-2': {
+            frequencies: ['psi-group-plan-1', 'psi-group-plan-2', 'psi-group-plan-3'],
+            frequenciesEveryPeriod: ['1_2', '2_2', '3_2'],
+            frequenciesText: ['week', '2 weeks', '3 weeks']
+          }
+        },
+        // fallback values in case a merchant was accessing our config directly
+        // productFrequencies should be used instead
+        frequencies: ['default-group-plan-1', 'default-group-plan-2', 'default-group-plan-3'],
+        frequenciesEveryPeriod: ['1_3', '2_3', '3_3'],
+        frequenciesText: ['month', '2 months', '3 months']
+      })
+    );
+  });
+
   it('should set prepaidSellingPlans', () => {
     const sellingPlanGroups = [
       {
@@ -591,13 +724,14 @@ describe('config', () => {
         }
       }
     });
-    expect(actual).toEqual({
-      ...initial,
-      productFrequencies: {
-        123: jasmine.objectContaining({
-          defaultFrequency: 'yum selling plan id 1'
-        })
-      }
-    });
+    expect(actual).toEqual(
+      jasmine.objectContaining({
+        productFrequencies: {
+          123: jasmine.objectContaining({
+            defaultFrequency: 'yum selling plan id 1'
+          })
+        }
+      })
+    );
   });
 });

package/src/shopify/reducers/config.ts

@@ -18,7 +18,9 @@ import { ShopifySellingPlanGroupsEntity, ShopifyVariantsEntity } from '../types/
 const config = (
   state: ConfigState = {
     offerType: 'radio',
-    productFrequencies: {}
+    productFrequencies: {},
+    frequencies: [],
+    frequenciesEveryPeriod: []
   },
   action
 ): ConfigState => {
@@ -27,18 +29,22 @@ const config = (
       payload: { product, currency }
     } = action as { payload: SetupProductPayload };
     let configToAdd: ConfigState = {};
-    let productFrequencies = product.variants?.reduce(
+    let productFrequencies: ConfigState['productFrequencies'] = product.variants?.reduce(
       (acc, variant) => reduceSellingPlansToFrequencies(acc, variant, product.selling_plan_groups, state),
       {}
     );
 
+    let updatedProductFrequencies = {
+      ...state.productFrequencies,
+      ...productFrequencies
+    };
+
     configToAdd = {
       ...configToAdd,
-
-      productFrequencies: {
-        ...state.productFrequencies,
-        ...productFrequencies
-      }
+      productFrequencies: updatedProductFrequencies,
+      // populate the old frequency fields for backwards compatibility
+      // these are only needed if someone was reading our config state directly, which shouldn't be common but is possible
+      ...Object.values(updatedProductFrequencies)[0]
     };
 
     // prepaid selling plans
@@ -68,21 +74,25 @@ const config = (
     const productId = safeProductId(product?.id);
     const currentProductFrequencies = state.productFrequencies[productId];
 
+    let updatedProductFrequencies: ConfigState['productFrequencies'] = {
+      ...state.productFrequencies,
+      [productId]: {
+        ...currentProductFrequencies,
+        defaultFrequency: getUpdatedDefaultFrequency(
+          productId,
+          defaultFrequency,
+          prepaidSellingPlans,
+          currentProductFrequencies?.frequencies,
+          currentProductFrequencies?.frequenciesEveryPeriod
+        )
+      }
+    };
+
     return {
       ...state,
-      productFrequencies: {
-        ...state.productFrequencies,
-        [productId]: {
-          ...currentProductFrequencies,
-          defaultFrequency: getUpdatedDefaultFrequency(
-            productId,
-            defaultFrequency,
-            prepaidSellingPlans,
-            currentProductFrequencies?.frequencies,
-            currentProductFrequencies?.frequenciesEveryPeriod
-          )
-        }
-      }
+      productFrequencies: updatedProductFrequencies,
+      // populate the old frequency fields for backwards compatibility
+      ...Object.values(updatedProductFrequencies)[0]
     };
   }