@ordergroove/offers 2.45.6 → 2.46.1-alpha-PR-1285-2.53

package/src/core/reducer.ts

@@ -10,15 +10,19 @@ import {
   AutoshipByDefaultState,
   AutoshipEligibleState,
   ConfigState,
+  Incentive,
   IncentiveObject,
   IncentivesState,
   NextUpcomingOrderState,
   OptedInState,
   OptedOutState,
   PrepaidShipmentsSelectedState,
+  PriceState,
+  ProductPlansState,
   ReceiveOfferPayload
 } from './types/reducer';
 import { EmptyObject } from './types/utility';
+import { IncentiveDisplay, IncentivesDisplayEnhanced } from './types/api';
 
 export const optedin = (state: OptedInState = [], action): OptedInState => {
   switch (action.type) {
@@ -160,11 +164,28 @@ export const eligibilityGroups = (state = {}, action) => {
   }
 };
 
-const mapIncentive = (incentive, incentiveDisplay) => {
-  return incentive.map(i => ({
-    ...incentiveDisplay[i],
-    id: [i][0]
-  }));
+const mapIncentive = (
+  incentive: string[],
+  incentiveDisplay: IncentiveDisplay,
+  incentiveDisplayEnhanced?: IncentivesDisplayEnhanced
+): Incentive[] => {
+  return incentive.map(i => {
+    const enhanced = incentiveDisplayEnhanced?.[i];
+    return {
+      ...incentiveDisplay[i],
+      // for standard incentives, include the criteria so we know which kind of incentive (e.g. PSI, prepaid, etc)
+      ...(enhanced
+        ? {
+            criteria: enhanced.criteria
+              ? enhanced.criteria
+              : // when there is no criteria in the enhanced incentive, it means it's a program wide incentive
+                // for ease-of-use, we set use a "PROGRAM_WIDE" pseudo-standard here
+                { node_type: 'PREMISE', standard: constants.INCENTIVE_STANDARD_TYPES.PROGRAM_WIDE, premise_value: null }
+          }
+        : {}),
+      id: [i][0]
+    };
+  });
 };
 
 export const incentives = (
@@ -185,11 +206,19 @@ export const incentives = (
                   ...incentiveObj,
                   initial: [
                     ...(incentiveObj.initial || []),
-                    ...mapIncentive(initial, action.payload.incentives_display)
+                    ...mapIncentive(
+                      initial,
+                      action.payload.incentives_display,
+                      action.payload.incentives_display_enhanced
+                    )
                   ],
                   ongoing: [
                     ...(incentiveObj.ongoing || []),
-                    ...mapIncentive(ongoing, action.payload.incentives_display)
+                    ...mapIncentive(
+                      ongoing,
+                      action.payload.incentives_display,
+                      action.payload.incentives_display_enhanced
+                    )
                   ]
                 }),
                 {}
@@ -501,7 +530,7 @@ export const templates = (state = [], action) => {
   }
 };
 
-export const productPlans = (state = {}, action) => {
+export const productPlans = (state: ProductPlansState = {}, action): ProductPlansState => {
   switch (action.type) {
     case constants.RECEIVE_PRODUCT_PLANS:
       return getObjectStructuredProductPlans(action.payload);
@@ -533,6 +562,8 @@ export const prepaidShipmentsSelected = (
   }
 };
 
+export const price = (state: PriceState = {}, _action) => state;
+
 export default combineReducers({
   optedin,
   optedout,
@@ -561,5 +592,6 @@ export default combineReducers({
   defaultFrequencies,
   templates,
   productPlans,
-  prepaidShipmentsSelected
+  prepaidShipmentsSelected,
+  price
 });

package/src/core/selectors.ts

@@ -3,7 +3,9 @@ import memoize from 'lodash.memoize';
 import { stringifyFrequency } from './api';
 import platform from '../platform';
 import { mapFrequencyToSellingPlan, safeProductId } from './utils';
-import { OfferElement, ProductFrequencyConfig, State } from './types/reducer';
+import { Incentive, OfferElement, ProductFrequencyConfig, State } from './types/reducer';
+import { money, percentage } from '../shopify/utils';
+import { INCENTIVE_STANDARD_TYPES } from './constants';
 
 memoize.Cache = Map;
 
@@ -230,6 +232,59 @@ export const makeFrequencyForPrepaidShipmentsSelector = (product: BaseProduct, p
     }
   );
 
+/** Determine the discounted price of the product, based on the incentives returned from the Offers endpoint. This assumes a pay-as-you-go subscription. */
+export const makeDiscountedProductPriceSelector = memoize((productId: string) =>
+  createSelector(
+    (state: State) => state.price || {},
+    (state: State) => state.incentives || {},
+    (state: State) => state.config.storeCurrency,
+    (prices, incentives, currency) => {
+      const productPriceObj = prices[safeProductId(productId)];
+      if (productPriceObj === undefined || productPriceObj === null || !currency) return {};
+
+      const productPrice = productPriceObj.value;
+      let regularPrice = productPrice;
+      let subscriptionPrice = productPrice;
+
+      const productIncentives = incentives[safeProductId(productId)];
+      const incentive = productIncentives?.initial.find(findRelevantIncentive);
+
+      let formatted_discount = '';
+
+      if (incentive) {
+        if (incentive.type === 'Discount Percent') {
+          // note: productPrice is in cents ($10 => 1000), so we round to the nearest whole number after applying the discount
+          subscriptionPrice = Math.round((productPrice * (100 - incentive.value)) / 100);
+          formatted_discount = percentage(incentive.value);
+        } else if (incentive.type === 'Discount Amount' && currency === 'USD') {
+          // for now, we only support USD for "dollar-off" discounts
+          // productPrice is in cents, while the incentive value is in dollars, so we multiply by 100
+          subscriptionPrice = Math.max(0, productPrice - Math.round(incentive.value * 100));
+        }
+      }
+      return {
+        regularPrice: money(regularPrice, currency),
+        subscriptionPrice: money(subscriptionPrice, currency),
+        discountRate: formatted_discount || money(regularPrice - subscriptionPrice, currency)
+      };
+    }
+  )
+);
+
+const validIncentiveStandards = [INCENTIVE_STANDARD_TYPES.PROGRAM_WIDE, INCENTIVE_STANDARD_TYPES.PSI];
+
+function findRelevantIncentive(incentive: Incentive) {
+  return (
+    incentive.object === 'item' &&
+    (incentive.type === 'Discount Percent' || incentive.type === 'Discount Amount') &&
+    // only attempt to determine a discount if the incentive is standardized, i.e. we have a criteria object
+    incentive.criteria &&
+    // note: the API should return either a PSI or a program-wide, not both
+    incentive.criteria.node_type === 'PREMISE' &&
+    validIncentiveStandards.includes(incentive.criteria.standard)
+  );
+}
+
 /**
  * Convert a string from camel case to kebab case.
  */
@@ -246,3 +301,13 @@ export const getFallbackValue = (element: HTMLElement & { offer: OfferElement },
  * Returns a list of opted in products id from the state
  */
 export const templatesSelector = (state: State) => ({ templates: state.templates || [] });
+
+/**
+ * Returns true if no selling plan has price adjustments (except for prepaid, which still use price adjustments). This means that we are calculating the subscription discount using a Shopify Discount Function instead of that information being stored in the selling plan.
+ * Generally, the Shopify Discount Function is used when the merchant is using standard flex incentives, i.e. the offer profile is standardized
+ */
+export const isShopifyDiscountFunctionInUseSelector = (state: State) => {
+  const plans = Object.values(state.productPlans).flat();
+
+  return plans.length > 0 && plans.every(plan => plan.hasPriceAdjustments === false || plan.prepaidShipments);
+};

package/src/core/types/api.ts

@@ -32,6 +32,19 @@ export type Incentive = {
   value: number;
 };
 
+export type StandardIncentive = {
+  incentive_target: string;
+  incentive_type: string;
+  incentive_value: string;
+  threshold_field: string | null;
+  threshold_value: string | null;
+  criteria?: {
+    node_type: string;
+    premise_value: unknown;
+    standard: string;
+  };
+};
+
 type ExperimentVariant = {
   public_id: string;
   parameters: any;
@@ -67,5 +80,10 @@ export type OfferResponse = {
       initial: string[];
     }
   >;
-  incentives_display: Record<string, Incentive>;
+  incentives_display: IncentiveDisplay;
+  // only present for standardized offer profiles
+  incentives_display_enhanced?: IncentivesDisplayEnhanced;
 };
+
+export type IncentiveDisplay = Record<string, Incentive>;
+export type IncentivesDisplayEnhanced = Record<string, StandardIncentive>;

package/src/core/types/reducer.ts

@@ -2,6 +2,7 @@ import { Order, Incentive as ApiIncentive, MerchantSettings, OfferResponse } fro
 import { type Offer } from '../../components/Offer';
 import { ShopifyCart, ShopifyProductEntity } from '../../shopify/types/shopify';
 import reducer from '../reducer';
+import { ProductPlanEntity } from '../../shopify/types/productPlan';
 
 export type State = ReturnType<typeof reducer>;
 
@@ -16,8 +17,16 @@ export type NextUpcomingOrderState = Partial<
 
 export type IncentivesState = Record<string, IncentiveObject>;
 
-type Incentive = ApiIncentive & {
+export type Incentive = ApiIncentive & {
   id: string;
+  /**
+   * undefined when the offer profile is not standardized
+   */
+  criteria?: {
+    node_type: string;
+    premise_value: unknown;
+    standard: string;
+  };
 };
 
 export type IncentiveObject = {
@@ -68,6 +77,10 @@ export type OptedOutState = { id: string }[];
 
 export type AutoshipByDefaultState = Record<string, boolean>;
 
+export type PriceState = { [productId: string]: { value: number } };
+
+export type ProductPlansState = { [productId: string]: ProductPlanEntity[] };
+
 // payload types
 
 export type ReceiveOfferPayload = OfferResponse & {

package/src/shopify/__tests__/productPlan.spec.js

@@ -308,7 +308,7 @@ describe('Shopify productPlan Reducer', () => {
 
       const productPlanCreated = mapSellingPlanToDiscount(allocation, [], 'USD');
 
-      expect(productPlanCreated).toEqual(expectedProductPlan);
+      expect(productPlanCreated).toEqual(jasmine.objectContaining(expectedProductPlan));
     });
 
     it('should create prepaid product plan', () => {
@@ -371,7 +371,7 @@ describe('Shopify productPlan Reducer', () => {
 
       const productPlanCreated = mapSellingPlanToDiscount(allocation, sellingPlans, 'USD');
 
-      expect(productPlanCreated).toEqual(expectedProductPlan);
+      expect(productPlanCreated).toEqual(jasmine.objectContaining(expectedProductPlan));
     });
 
     it('should create prepaid product plan that rounds subscriptionPrice to nearest decimal', () => {
@@ -512,7 +512,7 @@ describe('Shopify productPlan Reducer', () => {
 
       const productPlanCreated = mapSellingPlanToDiscount(allocation, sellingPlans, 'USD');
 
-      expect(productPlanCreated).toEqual(expectedProductPlan);
+      expect(productPlanCreated).toEqual(jasmine.objectContaining(expectedProductPlan));
     });
   });
 

package/src/shopify/__tests__/shopifyMiddleware.spec.js

@@ -7,7 +7,12 @@ import {
   PRODUCT_CHANGE_PREPAID_SHIPMENTS,
   SETUP_CART
 } from '../../core/constants';
-import { synchronizeCartOptin, getTrackingEvent, guessProductHandle } from '../shopifyMiddleware';
+import {
+  synchronizeCartOptin,
+  getTrackingEvent,
+  guessProductHandle,
+  synchronizeSellingPlan
+} from '../shopifyMiddleware';
 import { getOrCreateHidden } from '../../core/utils';
 
 function makeForm(addInput = true) {
@@ -92,7 +97,7 @@ describe('getTrackingEvent', () => {
 });
 
 describe('synchronizeCartOptin', () => {
-  let store, offer, frequency, product;
+  let store, offer, frequency, product, defaultState;
   beforeEach(() => {
     store = {
       dispatch: jasmine.createSpy('dispatch'),
@@ -106,6 +111,23 @@ describe('synchronizeCartOptin', () => {
     frequency = '1234';
     product = { id: '38995975209111:original-hash' };
 
+    defaultState = {
+      optedin: [],
+      offerId: 'offer-id-1234',
+      productPlans: {
+        38995975209111: [
+          {
+            frequency: '688815178030'
+          },
+          {
+            frequency: '1234'
+          }
+        ]
+      }
+    };
+
+    store.getState.and.returnValue(defaultState);
+
     fetchMock.route(
       '/cart.js',
       {
@@ -134,12 +156,64 @@ describe('synchronizeCartOptin', () => {
       { method: 'POST', repeat: 1 }
     );
 
+    fetchMock.route(
+      '/cart/update.js',
+      {
+        attributes: {}
+      },
+      { method: 'POST', repeat: 1 }
+    );
+
     fetchMock.mockGlobal();
+
+    // mock the date so that the tracking key is predictable
+    jasmine.clock().install();
+    jasmine.clock().mockDate(new Date('2025-01-01T00:00:00.000Z'));
   });
 
   afterEach(() => {
     fetchMock.removeRoutes().unmockGlobal();
     offer.remove();
+
+    jasmine.clock().uninstall();
+  });
+
+  it('should update cart attributes', async () => {
+    await synchronizeCartOptin({ type: OPTIN_PRODUCT, payload: { offer, frequency, product } }, store);
+
+    const lastUpdateCall = fetchMock.callHistory.calls('/cart/update.js').at(-1);
+    const body = JSON.parse(lastUpdateCall.options.body);
+
+    expect(body).toEqual({
+      attributes: {
+        og__1735689600: '38995975209111:original-hash,optin_product,,1234,'
+      }
+    });
+  });
+
+  it('should update cart attributes when Shopify Discount Function in use', async () => {
+    store.getState.and.returnValue({
+      ...defaultState,
+      productPlans: {
+        38995975209111: [
+          {
+            frequency: '688815178030',
+            hasPriceAdjustments: false
+          }
+        ]
+      }
+    });
+    await synchronizeCartOptin({ type: OPTIN_PRODUCT, payload: { offer, frequency, product } }, store);
+
+    const lastUpdateCall = fetchMock.callHistory.calls('/cart/update.js').at(-1);
+    const body = JSON.parse(lastUpdateCall.options.body);
+
+    expect(body).toEqual({
+      attributes: {
+        og__1735689600: '38995975209111:original-hash,optin_product,,1234,',
+        __ordergroove_offer_id: 'offer-id-1234'
+      }
+    });
   });
 
   it('should set new has product id', async () => {
@@ -173,7 +247,9 @@ describe('synchronizeCartOptin', () => {
     document.body.appendChild(sectionDiv);
 
     await synchronizeCartOptin({ type: OPTIN_PRODUCT, payload: { offer, frequency, product } }, store);
-    expect(fetchMock.callHistory.lastCall().options.body).toContain('"sections":["123456789__cart-items"]');
+    expect(fetchMock.callHistory.calls('/cart/change.js').at(-1).options.body).toContain(
+      '"sections":["123456789__cart-items"]'
+    );
     sectionDiv.remove();
   });
 
@@ -185,12 +261,15 @@ describe('synchronizeCartOptin', () => {
     document.body.appendChild(sectionDiv);
 
     await synchronizeCartOptin({ type: OPTIN_PRODUCT, payload: { offer, frequency, product } }, store);
-    expect(fetchMock.callHistory.lastCall().options.body).toContain('"sections":["123456789__cart-footer"]');
+    expect(fetchMock.callHistory.calls('/cart/change.js').at(-1).options.body).toContain(
+      '"sections":["123456789__cart-footer"]'
+    );
     sectionDiv.remove();
   });
 
   it('should get the subscribed frequency when no frequency is provided in the action payload', async () => {
     store.getState.and.returnValue({
+      ...defaultState,
       optedin: [
         {
           id: '38995975209111:original-hash',
@@ -223,11 +302,14 @@ describe('synchronizeCartOptin', () => {
       }
     });
 
-    expect(fetchMock.callHistory.lastCall().options.body).toContain('"selling_plan":"688815178030"');
+    expect(fetchMock.callHistory.calls('/cart/change.js').at(-1).options.body).toContain(
+      '"selling_plan":"688815178030"'
+    );
   });
 
   it('should have no selling plan when product is opted out', async () => {
     store.getState.and.returnValue({
+      ...defaultState,
       optedin: []
     });
 
@@ -254,7 +336,7 @@ describe('synchronizeCartOptin', () => {
       }
     });
 
-    expect(fetchMock.callHistory.lastCall().options.body).toContain('"selling_plan":null');
+    expect(fetchMock.callHistory.calls('/cart/change.js').at(-1).options.body).toContain('"selling_plan":null');
   });
 });
 
@@ -291,3 +373,142 @@ describe('guessProductHandle', () => {
     expect(guessProductHandle()).toEqual('some-meta-json');
   });
 });
+
+describe('synchronizeSellingPlan', () => {
+  const testProduct = '123456';
+  const testSellingPlan = '688815178030';
+  const testSessionId = 'session-123';
+  const testOfferId = 'offer-id-1234';
+
+  function makeCartAddForm(productId = testProduct) {
+    const element = document.createElement('form');
+    element.action = '/cart/add';
+    element.innerHTML = `
+      <input value="${productId}" name="id" type="hidden">
+    `;
+    document.body.appendChild(element);
+    return element;
+  }
+
+  function getFormData(formElement) {
+    const data = Object.fromEntries(new FormData(formElement));
+    delete data.id;
+    return data;
+  }
+
+  let store;
+  let offerElement = {
+    isCart: false,
+    shouldEnableOffer: true
+  };
+
+  beforeEach(() => {
+    document.body.innerHTML = '';
+    store = {
+      getState: jasmine.createSpy('getState')
+    };
+    store.getState.and.returnValue({
+      sessionId: testSessionId,
+      optedin: [{ id: testProduct, frequency: testSellingPlan }],
+      productPlans: {},
+      offerId: testOfferId
+    });
+  });
+
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  it('should add attributes when product is opted in', () => {
+    const formElement = makeCartAddForm();
+    expect(getFormData(formElement)).toEqual({});
+
+    synchronizeSellingPlan(store, offerElement);
+
+    expect(getFormData(formElement)).toEqual({
+      selling_plan: testSellingPlan,
+      'attributes[og__session]': testSessionId
+    });
+  });
+
+  it('should add attributes when product is opted in and Shopify Discount Function is in use', () => {
+    store.getState.and.returnValue({
+      ...store.getState(),
+      productPlans: {
+        [testProduct]: [
+          {
+            frequency: testSellingPlan,
+            hasPriceAdjustments: false
+          }
+        ]
+      }
+    });
+
+    const formElement = makeCartAddForm();
+    expect(getFormData(formElement)).toEqual({});
+
+    synchronizeSellingPlan(store, offerElement);
+
+    expect(getFormData(formElement)).toEqual({
+      selling_plan: testSellingPlan,
+      'attributes[og__session]': testSessionId,
+      'attributes[__ordergroove_offer_id]': testOfferId
+    });
+  });
+
+  it('should handle multiple forms on the page', () => {
+    const formElement1 = makeCartAddForm(testProduct);
+    const formElement2 = makeCartAddForm(testProduct);
+
+    synchronizeSellingPlan(store, offerElement);
+
+    expect(getFormData(formElement1)).toEqual({
+      selling_plan: testSellingPlan,
+      'attributes[og__session]': testSessionId
+    });
+    expect(getFormData(formElement2)).toEqual({
+      selling_plan: testSellingPlan,
+      'attributes[og__session]': testSessionId
+    });
+  });
+
+  it('should remove selling_plan input when product is not opted in', () => {
+    store.getState.and.returnValue({
+      ...store.getState(),
+      sessionId: testSessionId,
+      optedin: []
+    });
+
+    const formElement = makeCartAddForm();
+    // Add an existing selling_plan input
+    const existingInput = document.createElement('input');
+    existingInput.name = 'selling_plan';
+    existingInput.value = testSellingPlan;
+    existingInput.type = 'hidden';
+    formElement.appendChild(existingInput);
+
+    expect(getFormData(formElement).selling_plan).toEqual(testSellingPlan);
+
+    synchronizeSellingPlan(store, offerElement);
+
+    expect(getFormData(formElement).selling_plan).toEqual(undefined);
+  });
+
+  it('should not run when offerElement.isCart is true', () => {
+    const formElement = makeCartAddForm();
+    const offerElement = { isCart: true, shouldEnableOffer: true };
+
+    synchronizeSellingPlan(store, offerElement);
+
+    expect(getFormData(formElement)).toEqual({});
+  });
+
+  it('should not run when offerElement.shouldEnableOffer is false', () => {
+    const formElement = makeCartAddForm();
+    const offerElement = { isCart: false, shouldEnableOffer: false };
+
+    synchronizeSellingPlan(store, offerElement);
+
+    expect(getFormData(formElement)).toEqual({});
+  });
+});