@ordergroove/offers 2.44.0 → 2.44.1-alpha-PR-1166-3.30

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.js → selectors.ts}

@@ -2,11 +2,17 @@ import { createSelector } from 'reselect';
 import memoize from 'lodash.memoize';
 import { stringifyFrequency } from './api';
 import platform from '../platform';
-import { mapFrequencyToSellingPlan, safeProductId } from '../core/utils';
+import { mapFrequencyToSellingPlan, safeProductId } from './utils';
+import { OfferElement, State } from './types/reducer';
 
 memoize.Cache = Map;
 
-function arraysEqual(a, b) {
+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;
@@ -22,14 +28,14 @@ function arraysEqual(a, b) {
   return true;
 }
 
-function resolveFrequency(sellingPlans, frequenciesEveryPeriod, frequency) {
+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 = (a, b) => {
-  if (a === b) return true;
+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))) {
@@ -47,28 +53,23 @@ export const isSameProduct = (a, b) => {
  * Returns a list of opted in products id from the state
  * @param {object} state
  */
-export const optedinSelector = state => state.optedin || [];
+export const optedinSelector = (state: State) => state.optedin || [];
 
-export const optedoutSelector = state => state.optedout || [];
+const optedoutSelector = (state: State) => state.optedout || [];
 
-export const autoshipSelector = state => state.autoshipByDefault || {};
+export const autoshipSelector = (state: State) => state.autoshipByDefault || {};
 
-export const defaultFrequenciesSelector = state => state.defaultFrequencies || {};
+const defaultFrequenciesSelector = (state: State) => state.defaultFrequencies || {};
 
-export const sellingPlansSelector = state => state?.config?.frequencies || [];
-
-export const frequenciesEveryPeriodSelector = state => state?.config?.frequenciesEveryPeriod || [];
-
-export const prepaidSellingPlansSelector = state => state?.config?.prepaidSellingPlans || [];
-export const prepaidShipmentsSelectedSelector = state => state?.prepaidShipmentsSelected || {};
+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
- * @param {String} productId
  */
 export const makeOptedinSelector = memoize(
-  product =>
+  (product: BaseProduct) =>
     createSelector(optedinSelector, optedoutSelector, autoshipSelector, (optedin, optedout, autoshipByDefault) => {
       const entry = optedin.find(b => isSameProduct(product, b));
       if (entry) {
@@ -87,10 +88,9 @@ export const makeOptedinSelector = memoize(
 /**
  * Creates a function with state arguments that return the true when
  * productId is in the optedin array
- * @param {String} productId
  */
 export const makeSubscribedSelector = memoize(
-  product =>
+  (product: BaseProduct) =>
     createSelector(optedinSelector, optedin => {
       const entry = optedin.find(b => isSameProduct(product, b));
       if (entry) {
@@ -102,13 +102,13 @@ export const makeSubscribedSelector = memoize(
 );
 
 export const makePrepaidSubscribedSelector = memoize(
-  product =>
+  (product: BaseProduct) =>
     createSelector(optedinSelector, optedin => optedin.some(b => isSameProduct(product, b) && b.prepaidShipments)),
   product => JSON.stringify(product)
 );
 
 export const makePrepaidShipmentsSelectedSelector = memoize(
-  product =>
+  (product: BaseProduct) =>
     createSelector(
       prepaidShipmentsSelectedSelector,
       prepaidShipmentsSelected => prepaidShipmentsSelected[product.id] || null
@@ -119,23 +119,28 @@ export const makePrepaidShipmentsSelectedSelector = memoize(
 /**
  * Creates a function with state arguments that return the true when
  * productId is in the optedout array
- * @param {String} productId
  */
-export const makeOptedoutSelector = memoize(productId =>
-  createSelector(optedoutSelector, optedout => optedout.find(b => isSameProduct(productId, b)))
+export const makeOptedoutSelector = memoize((product: BaseProduct) =>
+  createSelector(optedoutSelector, optedout => optedout.find(b => isSameProduct(product, b)))
 );
 
-export const frequencySelector = state => state.frequency;
+export const frequencySelector = (state: State) => state.frequency;
 
-export const makeProductFrequencySelector = memoize(productId =>
-  createSelector(makeOptedinSelector(productId), productOptin => (productOptin && productOptin.frequency) || null)
+export const makeProductFrequencyOptedInSelector = memoize((product: BaseProduct) =>
+  createSelector(
+    makeOptedinSelector(product),
+    productOptin => (productOptin && 'frequency' in productOptin && productOptin.frequency) || null
+  )
 );
 
-export const makeProductPrepaidShipmentsOptedInSelector = memoize(product =>
-  createSelector(makeOptedinSelector(product), productOptin => (productOptin && productOptin.prepaidShipments) || null)
+export const makeProductPrepaidShipmentsOptedInSelector = memoize((product: BaseProduct) =>
+  createSelector(
+    makeOptedinSelector(product),
+    productOptin => (productOptin && 'prepaidShipments' in productOptin && productOptin.prepaidShipments) || null
+  )
 );
 
-export const makeProductPrepaidShipmentOptionsSelector = memoize(productId =>
+export const makeProductPrepaidShipmentOptionsSelector = memoize((productId: string) =>
   createSelector(prepaidSellingPlansSelector, prepaidSellingPlans => {
     const shipmentsList =
       prepaidSellingPlans[safeProductId(productId)]?.map(({ numberShipments }) => numberShipments) || [];
@@ -144,49 +149,60 @@ export const makeProductPrepaidShipmentOptionsSelector = memoize(productId =>
 );
 
 /**
- * Creates a function with state arguments that returns stringified frequency
- * if default frequency exists for the product
- * @param {String} productId
+ * If the product has a product-specific default frequency, return that frequency
  */
-export const makeProductDefaultFrequencySelector = memoize(productId =>
+export const makeProductSpecificDefaultFrequencySelector = memoize((productId: string) =>
   createSelector(
     defaultFrequenciesSelector,
-    sellingPlansSelector,
-    frequenciesEveryPeriodSelector,
-    (defaultFrequencies, sellingPlans, frequenciesEveryPeriod) =>
+    makeProductFrequenciesSelector(productId),
+    (defaultFrequencies, { frequencies: sellingPlans = [], frequenciesEveryPeriod = [] }) =>
       (defaultFrequencies[safeProductId(productId)] &&
         resolveFrequency(sellingPlans, frequenciesEveryPeriod, defaultFrequencies[safeProductId(productId)])) ||
       null
   )
 );
 
+export const makeProductFrequencyOptionsSelector = (productId: string) =>
+  createSelector(makeProductFrequenciesSelector(productId), productFrequencies => productFrequencies.frequencies);
+
+export const makeProductDefaultFrequencySelector = (productId: string) =>
+  createSelector(makeProductFrequenciesSelector(productId), productFrequencies => productFrequencies.defaultFrequency);
+
+export const makeProductFrequenciesSelector = (productId: string) =>
+  createSelector(
+    (state: State) => state?.config?.productFrequencies || {},
+    productFrequencies => {
+      return productFrequencies[safeProductId(productId)] || {};
+    }
+  );
+
+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.
- * @param {String} string
- * @returns {String}
  */
-export const kebabCase = string => {
+export const kebabCase = (string: string) => {
   return string.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();
 };
 
-/**
- * Resolve element configuration by looking into html attribute or state config
- *
- * @param {Object} state
- * @param {HTMLElement} element
- * @param {String} key
- * @returns {Object}
- */
-export const configSelector = (state, element, key, defaultValue) => ({
-  [key]:
-    (state.config && state.config[key]) ||
-    (element && element.hasAttribute && element.hasAttribute(kebabCase(key)) && element[key]) ||
-    (element.offer && typeof (element.offer[key] !== 'undefined') && element.offer[key]) ||
-    defaultValue
-});
+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
- * @param {object} state
  */
-export const templatesSelector = state => ({ templates: state.templates || [] });
+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,95 @@
+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[];
+  hasProductSpecificFrequencies: boolean;
+  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>;