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

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

@@ -3,7 +3,7 @@ import {
   makeOptedinSelector,
   isSameProduct,
   templatesSelector,
-  makeProductDefaultFrequencySelector,
+  makeProductSpecificDefaultFrequencySelector,
   makeProductPrepaidShipmentOptionsSelector
 } from '../selectors';
 import { stringifyFrequency } from '../api';
@@ -61,25 +61,25 @@ describe('templatesSelector', () => {
   });
 });
 
-describe('makeProductDefaultFrequencySelector', () => {
+describe('makeProductSpecificDefaultFrequencySelector', () => {
   it('should return memoized function', () => {
-    const firsCall = makeProductDefaultFrequencySelector(123);
+    const firsCall = makeProductSpecificDefaultFrequencySelector(123);
     expect(firsCall).toEqual(jasmine.any(Function));
-    expect(firsCall).toBe(makeProductDefaultFrequencySelector(123));
+    expect(firsCall).toBe(makeProductSpecificDefaultFrequencySelector(123));
   });
 
   it('should return null by default', () => {
-    const selectProductDefaultFrequency = makeProductDefaultFrequencySelector(123);
+    const selectProductDefaultFrequency = makeProductSpecificDefaultFrequencySelector(123);
     expect(selectProductDefaultFrequency({})).toEqual(null);
   });
 
   it('should select the product default frequency if there is one', () => {
-    const selectProductDefaultFrequency = makeProductDefaultFrequencySelector(123);
+    const selectProductDefaultFrequency = makeProductSpecificDefaultFrequencySelector(123);
     expect(selectProductDefaultFrequency({ defaultFrequencies: { 123: '2_w' } })).toEqual('2_w');
   });
 
   it('should select the product default frequency if there is one (object frequency)', () => {
-    const selectProductDefaultFrequency = makeProductDefaultFrequencySelector(123);
+    const selectProductDefaultFrequency = makeProductSpecificDefaultFrequencySelector(123);
     const frequency = { every: '2', period: 'w' };
     expect(selectProductDefaultFrequency({ defaultFrequencies: { 123: frequency } })).toEqual(
       stringifyFrequency(frequency)

package/src/core/actions-preview.js

@@ -58,7 +58,8 @@ export const setPreviewStandardOffer = (isPreview, productId, offer) =>
             }
           }
         },
-        offer
+        offer,
+        productId
       )
     );
   };
@@ -94,7 +95,8 @@ export const setPreviewUpsellOffer = (isPreview, productId, offer) =>
             autoship_by_default: { [productId]: false },
             modifiers: {}
           },
-          offer
+          offer,
+          productId
         )
       );
       await dispatch(
@@ -194,7 +196,8 @@ export const setPreviewPrepaid = (isPreview, productId, offer) =>
             }
           }
         },
-        offer
+        offer,
+        productId
       )
     );
     await dispatch({

package/src/core/actions.js

@@ -1,7 +1,8 @@
 import { resolveAuth } from '@ordergroove/auth';
 import * as constants from './constants';
 import { api } from './api';
-import { safeOgFrequency, safeProductId } from './utils';
+import { safeOgFrequency } from './utils';
+import { makeFrequencyForPrepaidShipmentsSelector, makeProductFrequenciesSelector } from './selectors';
 
 export const optinProduct = (product, frequency, offer) => ({
   type: constants.OPTIN_PRODUCT,
@@ -23,10 +24,14 @@ export const productChangeFrequency = (product, frequency, offer) => ({
   payload: { product, frequency, offer }
 });
 
-export const productChangePrepaidShipments = (product, prepaidShipments, offer) => ({
-  type: constants.PRODUCT_CHANGE_PREPAID_SHIPMENTS,
-  payload: { product, prepaidShipments, offer }
-});
+export const productChangePrepaidShipments = (product, prepaidShipments, offer) => (dispatch, getState) => {
+  // this is a thunk so that we access the state for the selector
+  const frequency = makeFrequencyForPrepaidShipmentsSelector(product, prepaidShipments)(getState());
+  dispatch({
+    type: constants.PRODUCT_CHANGE_PREPAID_SHIPMENTS,
+    payload: { product, prepaidShipments, offer, frequency }
+  });
+};
 
 export const cartProductKeyHasChanged = (oldCartProductKey, newCartProductKey) => ({
   type: constants.CART_PRODUCT_KEY_HAS_CHANGED,
@@ -183,10 +188,13 @@ export const requestSessionId = () => (dispatch, getState) => {
   return sessionId;
 };
 
-export const receiveOffer = (response, offer) => ({
-  type: constants.RECEIVE_OFFER,
-  payload: { ...response, offer }
-});
+export const receiveOffer = (response, offer, productId) => (dispatch, getState) => {
+  const frequencyConfig = makeProductFrequenciesSelector(productId)(getState());
+  dispatch({
+    type: constants.RECEIVE_OFFER,
+    payload: { ...response, offer, frequencyConfig }
+  });
+};
 
 export const fetchResponseError = err => ({
   type: constants.FETCH_RESPONSE_ERROR,
@@ -226,18 +234,19 @@ export const receiveConvertOneTime = (response, product) => ({
 
 export const createIu = (product, order, quantity, subscribed = false, initialFrequency = null) =>
   function createIuThunk(dispatch, getState) {
+    const state = getState();
     const {
       auth,
-      config,
       environment: { legoUrl },
       previewUpsellOffer,
       offerId: offer,
       sessionId
-    } = getState();
+    } = state;
 
     if (!auth) return dispatch(unauthorized('No auth set.'));
 
-    const frequency = safeOgFrequency(initialFrequency, config);
+    const { frequencies, frequenciesEveryPeriod } = makeProductFrequenciesSelector(product.id)(state);
+    const frequency = safeOgFrequency(initialFrequency, frequencies, frequenciesEveryPeriod);
 
     const requestAction = requestCreateOneTime(product, order, quantity, offer);
 
@@ -301,7 +310,7 @@ export const setProductToSubscribe = (product, productToSubscribe) => ({
 });
 
 /**
- * @param {import('../types').MerchantSettings} settings
+ * @param {import('../core/types/api').MerchantSettings} settings
  */
 export const receiveMerchantSettings = settings => ({
   type: constants.RECEIVE_MERCHANT_SETTINGS,

package/src/core/base.js

@@ -1,30 +1,7 @@
 import { LitElement } from 'lit-element';
-import { kebabCase } from './selectors';
 
 export const withTemplate = Base =>
   class extends Base {
-    /**
-     *
-     * @param {*} key html attribute key name
-     * @param {*} optional configKey key name in configuration object
-     */
-    getOption(key, configKey = key) {
-      const attrName = kebabCase(key);
-      if (this.hasAttribute(attrName)) {
-        const attr = this.getAttribute(attrName);
-        if (attr.toString().toLowerCase() === 'true') return true;
-        if (attr.toString().toLowerCase() === 'false') return false;
-        return attr;
-      }
-
-      if (this.template && this.template.config && typeof this.template.config[configKey] !== 'undefined')
-        return this.template.config[configKey];
-
-      if (this.config && typeof this.config[configKey] !== 'undefined') return this.config[configKey];
-
-      return undefined;
-    }
-
     applyTemplate(template) {
       this.template = template;
       // update innerHTML if change (performance)

package/src/core/offerRequest.js

@@ -24,7 +24,7 @@ export function offerRequestMiddleware(store) {
             action.payload.searchParams
           )
           .then(
-            response => store.dispatch(receiveOffer(response, action.payload.offer)),
+            response => store.dispatch(receiveOffer(response, action.payload.offer, productId)),
             err => store.dispatch(fetchResponseError(err))
           )
           .finally(() => store.dispatch(fetchDone(action)));

package/src/core/{reducer.js → reducer.ts}

@@ -6,7 +6,21 @@ import { getObjectStructuredProductPlans } from './adapters';
 import { safeProductId, getMatchingProductIfExists } from './utils';
 import { experimentsReducer } from './experiments';
 
-export const optedin = (state = [], action) => {
+import {
+  AutoshipByDefaultState,
+  AutoshipEligibleState,
+  ConfigState,
+  IncentiveObject,
+  IncentivesState,
+  NextUpcomingOrderState,
+  OptedInState,
+  OptedOutState,
+  PrepaidShipmentsSelectedState,
+  ReceiveOfferPayload
+} from './types/reducer';
+import { EmptyObject } from './types/utility';
+
+export const optedin = (state: OptedInState = [], action): OptedInState => {
   switch (action.type) {
     case constants.LOCAL_STORAGE_CLEAR:
       return [];
@@ -49,7 +63,7 @@ export const optedin = (state = [], action) => {
   }
 };
 
-export const optedout = (state = [], action) => {
+export const optedout = (state: OptedOutState = [], action): OptedOutState => {
   switch (action.type) {
     case constants.LOCAL_STORAGE_CLEAR:
       return [];
@@ -77,7 +91,7 @@ export const optedout = (state = [], action) => {
   }
 };
 
-export const nextUpcomingOrder = (state = {}, { type, payload }) => {
+export const nextUpcomingOrder = (state: NextUpcomingOrderState = {}, { type, payload }): NextUpcomingOrderState => {
   switch (type) {
     case constants.RECEIVE_ORDERS:
       return payload && payload.count > 0
@@ -107,7 +121,7 @@ export const nextUpcomingOrder = (state = {}, { type, payload }) => {
   }
 };
 
-export const autoshipEligible = (state = {}, action) => {
+export const autoshipEligible = (state: AutoshipEligibleState = {}, action): AutoshipEligibleState => {
   switch (action.type) {
     case constants.RECEIVE_OFFER:
       return {
@@ -153,7 +167,10 @@ const mapIncentive = (incentive, incentiveDisplay) => {
   }));
 };
 
-export const incentives = (state = {}, action) => {
+export const incentives = (
+  state: IncentivesState = {},
+  action: { type: string; payload: ReceiveOfferPayload }
+): IncentivesState => {
   switch (action.type) {
     case constants.RECEIVE_OFFER:
       return {
@@ -164,7 +181,7 @@ export const incentives = (state = {}, action) => {
             [uniqueProductId]: Object.entries(action.payload.incentives)
               .filter(([productId]) => productId === uniqueProductId)
               .reduce(
-                (incentiveObj, [, { initial, ongoing }]) => ({
+                (incentiveObj: IncentiveObject | EmptyObject, [, { initial, ongoing }]) => ({
                   ...incentiveObj,
                   initial: [
                     ...(incentiveObj.initial || []),
@@ -392,11 +409,11 @@ export const locale = (
 };
 
 export const config = (
-  state = {
+  state: ConfigState = {
     offerType: 'radio'
   },
   action
-) => {
+): ConfigState => {
   switch (action.type) {
     case constants.SET_CONFIG:
       return {
@@ -447,7 +464,7 @@ export const previewPrepaidOffer = (state = false, action) => {
   }
 };
 
-export const autoshipByDefault = (state = [], action) => {
+export const autoshipByDefault = (state: AutoshipByDefaultState = {}, action): AutoshipByDefaultState => {
   switch (action.type) {
     case constants.RECEIVE_OFFER:
       return {
@@ -492,7 +509,10 @@ export const productPlans = (state = {}, action) => {
   }
 };
 
-export const prepaidShipmentsSelected = (state = {}, action) => {
+export const prepaidShipmentsSelected = (
+  state: PrepaidShipmentsSelectedState = {},
+  action
+): PrepaidShipmentsSelectedState => {
   switch (action.type) {
     // Given that, in the cart, products will have a composed id (<productId>:<cartId>) and that every time
     // a product changes in the cart we need to sync these changes back with the eComm platform, this operation

package/src/core/selectors.ts

@@ -0,0 +1,215 @@
+import { createSelector } from 'reselect';
+import memoize from 'lodash.memoize';
+import { stringifyFrequency } from './api';
+import platform from '../platform';
+import { mapFrequencyToSellingPlan, safeProductId } from './utils';
+import { OfferElement, State } from './types/reducer';
+
+memoize.Cache = Map;
+
+type BaseProduct = {
+  id: string;
+  components?: string[];
+};
+
+function arraysEqual<T>(a: T[], b: T[]) {
+  if (a === b) return true;
+  if (a === null || b === null) return false;
+  if (a.length !== b.length) return false;
+
+  // If you don't care about the order of the elements inside
+  // the array, you should sort both arrays here.
+  // Please note that calling sort on an array will modify that array.
+  // you might want to clone your array first.
+
+  for (let i = 0; i < a.length; ++i) {
+    if (a[i] !== b[i]) return false;
+  }
+  return true;
+}
+
+function resolveFrequency(sellingPlans: string[], frequenciesEveryPeriod: string[], frequency) {
+  const ogFrequency = stringifyFrequency(frequency);
+  if (!platform.shopify_selling_plans) return ogFrequency;
+  return mapFrequencyToSellingPlan(sellingPlans, frequenciesEveryPeriod, ogFrequency);
+}
+
+export const isSameProduct = <T extends BaseProduct, S extends BaseProduct>(a: T, b: S) => {
+  if ((a as BaseProduct) === b) return true;
+  if (typeof a === 'object' && typeof b === 'object' && a && b) {
+    if (a.id === b.id) {
+      if (!(Array.isArray(a.components) && Array.isArray(b.components))) {
+        return true;
+      }
+      if (arraysEqual((a.components || []).sort(), (b.components || []).sort())) {
+        return true;
+      }
+    }
+  }
+  return false;
+};
+
+/**
+ * Returns a list of opted in products id from the state
+ * @param {object} state
+ */
+export const optedinSelector = (state: State) => state.optedin || [];
+
+const optedoutSelector = (state: State) => state.optedout || [];
+
+export const autoshipSelector = (state: State) => state.autoshipByDefault || {};
+
+const defaultFrequenciesSelector = (state: State) => state.defaultFrequencies || {};
+
+const prepaidSellingPlansSelector = (state: State) => state?.config?.prepaidSellingPlans || [];
+const prepaidShipmentsSelectedSelector = (state: State) => state?.prepaidShipmentsSelected || {};
+
+/**
+ * Creates a function with state arguments that return the true when
+ * productId is in the optedin array or not in optedout or autoship by default
+ */
+export const makeOptedinSelector = memoize(
+  (product: BaseProduct) =>
+    createSelector(optedinSelector, optedoutSelector, autoshipSelector, (optedin, optedout, autoshipByDefault) => {
+      const entry = optedin.find(b => isSameProduct(product, b));
+      if (entry) {
+        return entry;
+      }
+      if (optedout.find(b => isSameProduct(product, b))) {
+        return false;
+      }
+      if (product && autoshipByDefault[product.id]) {
+        return { id: product.id };
+      }
+      return false;
+    }),
+  product => JSON.stringify(product)
+);
+/**
+ * Creates a function with state arguments that return the true when
+ * productId is in the optedin array
+ */
+export const makeSubscribedSelector = memoize(
+  (product: BaseProduct) =>
+    createSelector(optedinSelector, optedin => {
+      const entry = optedin.find(b => isSameProduct(product, b));
+      if (entry) {
+        return entry;
+      }
+      return false;
+    }),
+  product => JSON.stringify(product)
+);
+
+export const makePrepaidSubscribedSelector = memoize(
+  (product: BaseProduct) =>
+    createSelector(optedinSelector, optedin => optedin.some(b => isSameProduct(product, b) && b.prepaidShipments)),
+  product => JSON.stringify(product)
+);
+
+export const makePrepaidShipmentsSelectedSelector = memoize(
+  (product: BaseProduct) =>
+    createSelector(
+      prepaidShipmentsSelectedSelector,
+      prepaidShipmentsSelected => prepaidShipmentsSelected[product.id] || null
+    ),
+  product => JSON.stringify(product)
+);
+
+/**
+ * Creates a function with state arguments that return the true when
+ * productId is in the optedout array
+ */
+export const makeOptedoutSelector = memoize((product: BaseProduct) =>
+  createSelector(optedoutSelector, optedout => optedout.find(b => isSameProduct(product, b)))
+);
+
+export const makeProductFrequencyOptedInSelector = memoize(
+  (product: BaseProduct) =>
+    createSelector(
+      makeOptedinSelector(product),
+      productOptin => (productOptin && 'frequency' in productOptin && productOptin.frequency) || null
+    ),
+  product => JSON.stringify(product)
+);
+
+export const makeProductPrepaidShipmentsOptedInSelector = memoize(
+  (product: BaseProduct) =>
+    createSelector(
+      makeOptedinSelector(product),
+      productOptin => (productOptin && 'prepaidShipments' in productOptin && productOptin.prepaidShipments) || null
+    ),
+  product => JSON.stringify(product)
+);
+
+export const makeProductPrepaidShipmentOptionsSelector = memoize((productId: string) =>
+  createSelector(prepaidSellingPlansSelector, prepaidSellingPlans => {
+    const shipmentsList =
+      prepaidSellingPlans[safeProductId(productId)]?.map(({ numberShipments }) => numberShipments) || [];
+    return shipmentsList.sort((a, b) => a - b);
+  })
+);
+
+/**
+ * If the product has a product-specific default frequency, return that frequency
+ */
+export const makeProductSpecificDefaultFrequencySelector = memoize((productId: string) =>
+  createSelector(
+    defaultFrequenciesSelector,
+    makeProductFrequenciesSelector(productId),
+    (defaultFrequencies, { frequencies: sellingPlans = [], frequenciesEveryPeriod = [] }) =>
+      (defaultFrequencies[safeProductId(productId)] &&
+        resolveFrequency(sellingPlans, frequenciesEveryPeriod, defaultFrequencies[safeProductId(productId)])) ||
+      null
+  )
+);
+
+export const makeProductFrequencyOptionsSelector = memoize((productId: string) =>
+  createSelector(makeProductFrequenciesSelector(productId), productFrequencies => productFrequencies.frequencies)
+);
+
+export const makeProductDefaultFrequencySelector = memoize((productId: string) =>
+  createSelector(makeProductFrequenciesSelector(productId), productFrequencies => productFrequencies.defaultFrequency)
+);
+
+export const makeProductFrequenciesSelector = memoize((productId: string) =>
+  createSelector(
+    (state: State) => state?.config?.productFrequencies || {},
+    productFrequencies => {
+      return productFrequencies[safeProductId(productId)] || {};
+    }
+  )
+);
+
+// this selector is only called when an action is dispatched, so we don't need to memoize
+// other selectors are called whenever the Redux state is updated
+export const makeFrequencyForPrepaidShipmentsSelector = (product: BaseProduct, prepaidShipments: number) =>
+  createSelector(
+    prepaidSellingPlansSelector,
+    makeProductFrequenciesSelector(product.id),
+    (prepaidSellingPlans, { frequencies }) => {
+      if (prepaidShipments) {
+        const productId = safeProductId(product.id);
+        const plan = prepaidSellingPlans[productId]?.find(p => p.numberShipments === prepaidShipments);
+        return plan ? plan.sellingPlan : null;
+      }
+      return frequencies[0];
+    }
+  );
+
+/**
+ * Convert a string from camel case to kebab case.
+ */
+export const kebabCase = (string: string) => {
+  return string.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();
+};
+
+export const getFallbackValue = (element: HTMLElement & { offer: OfferElement }, key: string, defaultValue?) =>
+  (element && element.hasAttribute && element.hasAttribute(kebabCase(key)) && element[key]) ||
+  (element.offer && typeof (element.offer[key] !== 'undefined') && element.offer[key]) ||
+  defaultValue;
+
+/**
+ * Returns a list of opted in products id from the state
+ */
+export const templatesSelector = (state: State) => ({ templates: state.templates || [] });

package/src/core/types/api.ts

@@ -0,0 +1,71 @@
+export type Order = {
+  merchant: string;
+  customer: string;
+  payment: string;
+  shipping_address: string;
+  public_id: string;
+  sub_total: string;
+  tax_total: string;
+  shipping_total: string;
+  discount_total: string;
+  total: string;
+  created: string;
+  updated: string;
+  place: string;
+  cancelled: string | null;
+  tries: number;
+  generic_error_count: number;
+  status: number;
+  type: number;
+  order_merchant_id: string | null;
+  rejected_message: string | null;
+  extra_data: unknown;
+  locked: boolean;
+  oos_free_shipping: boolean;
+  currency_code: string;
+};
+
+export type Incentive = {
+  object: string;
+  field: string;
+  type: string;
+  value: number;
+};
+
+type ExperimentVariant = {
+  public_id: string;
+  parameters: any;
+  weight: number;
+};
+
+type ExperimentConfig = {
+  public_id: string;
+  variants: ExperimentVariant[];
+};
+
+export interface MerchantSettings {
+  currency_code: string;
+  multicurrency_enabled: boolean;
+  experiments?: ExperimentConfig;
+}
+
+export type OfferResponse = {
+  result: string;
+  module_view: {
+    regular: string;
+  };
+  modifiers: Record<string, { coupon_code: string }>;
+  autoship: Record<string, boolean>;
+  in_stock: Record<string, boolean>;
+  autoship_by_default: Record<string, boolean>;
+  default_frequencies: Record<string, { every: number; every_period: number }>;
+  eligibility_groups: Record<string, string[]>;
+  incentives: Record<
+    string,
+    {
+      ongoing: string[];
+      initial: string[];
+    }
+  >;
+  incentives_display: Record<string, Incentive>;
+};

package/src/core/types/reducer.ts

@@ -0,0 +1,94 @@
+import { Order, Incentive as ApiIncentive, MerchantSettings, OfferResponse } from './api';
+import { type Offer } from '../../components/Offer';
+import { ShopifyCart, ShopifyProductEntity } from '../../shopify/types/shopify';
+import reducer from '../reducer';
+
+export type State = ReturnType<typeof reducer>;
+
+// state types
+
+export type NextUpcomingOrderState = Partial<
+  Order & {
+    place: Date;
+    products: string[];
+  }
+>;
+
+export type IncentivesState = Record<string, IncentiveObject>;
+
+type Incentive = ApiIncentive & {
+  id: string;
+};
+
+export type IncentiveObject = {
+  initial: Incentive[];
+  ongoing: Incentive[];
+};
+
+export type ConfigState = Partial<{
+  /**
+   * @deprecated use productFrequencies instead
+   */
+  frequencies: string[];
+  offerType: string;
+  /**
+   * @deprecated use productFrequencies instead
+   */
+  frequenciesEveryPeriod: string[];
+  merchantSettings: MerchantSettings;
+  /**
+   * @deprecated use productFrequencies instead
+   */
+  defaultFrequency: string;
+  /**
+   * @deprecated use productFrequencies instead
+   */
+  frequenciesText: string[];
+  prepaidSellingPlans: Record<string, { numberShipments: number; sellingPlan: string }[]>;
+  storeCurrency: string;
+  productFrequencies: Record<string, ProductFrequencyConfig>;
+}>;
+
+type ProductFrequencyConfig = {
+  frequencies?: string[];
+  frequenciesEveryPeriod?: string[];
+  frequenciesText?: string[];
+  defaultFrequency?: string;
+};
+
+export type AutoshipEligibleState = Record<string, boolean>;
+
+export type PrepaidShipmentsSelectedState = Record<string, number>;
+
+export type OptInItem = { id: string; frequency: string; prepaidShipments?: number; components?: string[] };
+
+export type OptedInState = OptInItem[];
+
+export type OptedOutState = { id: string }[];
+
+export type AutoshipByDefaultState = Record<string, boolean>;
+
+// payload types
+
+export type ReceiveOfferPayload = OfferResponse & {
+  offer: OfferElement;
+  frequencyConfig: {
+    frequencies?: string[];
+    frequenciesEveryPeriod?: string[];
+    frequenciesText?: string[];
+  };
+};
+
+export type OfferElement = InstanceType<typeof Offer> & { config: ConfigState };
+
+export type ReceiveProductPlansPayload = Record<string, string[]>;
+
+export type SetupProductPayload = {
+  product: ShopifyProductEntity;
+  offer: OfferElement;
+  currency: string;
+};
+
+export type SetupCartPayload = ShopifyCart;
+
+export type ReceiveMerchantSettingsPayload = MerchantSettings;

package/src/core/types/utility.ts

@@ -0,0 +1 @@
+export type EmptyObject = Record<string, never>;