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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ordergroove/offers",
-  "version": "2.46.0",
+  "version": "2.46.1-alpha-PR-1285-2.53+40747106",
   "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.10.0",
     "@types/lodash.memoize": "^4.1.9"
   },
-  "gitHead": "29fe0f44f5d9dc13b9c8a150b894b5a99c31cd8d"
+  "gitHead": "407471063d9ba2bbeac751d0cd76bc46ab2ee279"
 }

package/src/components/Offer.js

@@ -76,7 +76,9 @@ export class Offer extends TemplateElement {
       productFrequency: { type: String },
       isCart: { type: Boolean, attribute: 'cart' },
       optedin: { type: Object },
-      variationId: { type: String }
+      variationId: { type: String },
+      /** Attribute to force reading prices from the Offer response instead of the selling plan. Only used for testing. */
+      overrideSellingPlanPrice: { type: Boolean, attribute: 'dev-override-selling-plan-price' }
     };
   }
 

package/src/components/Price.js

@@ -3,7 +3,11 @@ import { connect } from '../core/connect';
 
 import { withProduct } from '../core/resolveProperties';
 import { TemplateElement } from '../core/base';
-import { makeProductDefaultFrequencySelector, makeProductFrequencyOptedInSelector } from '../core/selectors';
+import {
+  makeDiscountedProductPriceSelector,
+  makeProductDefaultFrequencySelector,
+  makeProductFrequencyOptedInSelector
+} from '../core/selectors';
 import { safeProductId } from '../core/utils';
 
 export class Price extends withProduct(TemplateElement) {
@@ -13,9 +17,13 @@ export class Price extends withProduct(TemplateElement) {
       regular: { type: Boolean, reflect: true },
       subscription: { type: Boolean, reflect: true },
       discount: { type: Boolean, reflect: true },
+      /** Force displaying the pay-as-you-go price. This is relevant when there is a prepaid plan that the user has opted into, and you still want to display the pay-as-you-go price for comparison */
       payAsYouGo: { type: Boolean, reflect: true, attribute: 'pay-as-you-go' },
       frequency: { type: Object },
-      productPlans: { type: Object }
+      /** If Shopify, this is derived from the selling plans attached to the product */
+      productPlans: { type: Object },
+      /** The discounted price, as calculated from the Offers API response */
+      discountedProductPriceFromOffers: { type: Object }
     };
   }
 
@@ -46,17 +54,28 @@ export class Price extends withProduct(TemplateElement) {
     const frequency = this.frequency || this.configDefaultFrequency || this.offer?.defaultFrequency;
     const plans = this.productPlans[realProductId] || [];
 
-    if (this.payAsYouGo) {
-      const payAsYouGoPlan = plans.find(plan => plan.prepaidShipments === null || plan.prepaidShipments === undefined);
-      if (!payAsYouGoPlan) return '';
-      return payAsYouGoPlan.subscriptionPrice;
-    }
+    let currentPlan = this.payAsYouGo
+      ? plans.find(plan => plan.prepaidShipments === null || plan.prepaidShipments === undefined)
+      : plans.find(plan => plan.frequency === frequency);
 
-    const currentPlan = plans.find(plan => plan.frequency === frequency);
     if (!currentPlan) return '';
-    const { regularPrice, discountRate, subscriptionPrice } = currentPlan;
 
-    if (subscriptionPrice === regularPrice) return '';
+    // default to pulling from the selling plan
+    let { regularPrice, discountRate, subscriptionPrice } = currentPlan;
+    // if the selling plan has no price adjustments, then use the offer response to determine the discounted price
+    // this will be true for merchants on standardized offer profiles
+    // we still rely on the selling plan for prepaid subscriptions, for simplicity
+    if (
+      // overrideSellingPlanPrice is a dev flag to force using the offer price for testing purposes
+      (currentPlan.hasPriceAdjustments === false || this.offer?.overrideSellingPlanPrice) &&
+      !currentPlan.prepaidShipments
+    ) {
+      ({ regularPrice, discountRate, subscriptionPrice } = this.discountedProductPriceFromOffers);
+    }
+
+    // if payAsYouGo, always show the price even if no discount
+    // it's unclear if this was the original intention, but preserving existing behavior
+    if (subscriptionPrice === regularPrice && !this.payAsYouGo) return '';
 
     if (this.regular) {
       return regularPrice;
@@ -82,7 +101,8 @@ export class Price extends withProduct(TemplateElement) {
 const mapStateToProps = (state, ownProps) => ({
   productPlans: state.productPlans,
   configDefaultFrequency: makeProductDefaultFrequencySelector(ownProps.product?.id)(state),
-  frequency: makeProductFrequencyOptedInSelector(ownProps.product)(state)
+  frequency: makeProductFrequencyOptedInSelector(ownProps.product)(state),
+  discountedProductPriceFromOffers: makeDiscountedProductPriceSelector(ownProps.product?.id)(state)
 });
 
 export default connect(mapStateToProps)(Price);

package/src/components/__tests__/Price.spec.js

@@ -18,7 +18,8 @@ async function renderPriceTemplate(
           subscriptionPrice: '$0.90'
         }
       ]
-    }
+    },
+    discountedProductPriceFromOffers: {}
   }
 ) {
   // make sure the element was cleaned up
@@ -27,6 +28,7 @@ async function renderPriceTemplate(
   const element = document.querySelector(TAG_NAME_UNDER_TEST);
   element.frequency = properties.frequency;
   element.productPlans = properties.productPlans;
+  element.discountedProductPriceFromOffers = properties.discountedProductPriceFromOffers;
   await element.updateComplete;
   return element;
 }
@@ -141,6 +143,28 @@ describe('Price', () => {
     expect(ogPriceNullPrepaid).toContain('$4.50');
   });
 
+  // note: it's unclear whether this behavior was intentional when first implemented, but codifying it with a test in case any merchant is relying on it
+  it('should render payAsYouGo price even if no discount', async () => {
+    const template = html`
+      <og-some-price pay-as-you-go product="yum id"></og-some-price>
+    `;
+
+    const priceDiv = await renderPriceTemplate(template, {
+      frequency: '1_3',
+      productPlans: {
+        'yum id': [
+          {
+            frequency: '1_3',
+            regularPrice: '$5.00',
+            discountRate: '$0.00',
+            subscriptionPrice: '$5.00'
+          }
+        ]
+      }
+    });
+    expect(priceDiv.shadowRoot.innerHTML).toContain('$5.00');
+  });
+
   it('should render empty price when subscription is equal to regular', async () => {
     const template = html`
       <og-some-price discount product="yum id"></og-some-price>
@@ -162,4 +186,53 @@ describe('Price', () => {
     expect(ogPrice).not.toContain('10%');
     expect(ogPrice).not.toContain('$1.00');
   });
+
+  describe('discountedProductPriceFromOffers', () => {
+    async function setupDiscountedProductPriceTest(hasPriceAdjustments, extraPlanProps = {}) {
+      const template = html`
+        <og-some-price product="yum id"></og-some-price>
+      `;
+      return renderPriceTemplate(template, {
+        frequency: '1_3',
+        productPlans: {
+          'yum id': [
+            {
+              frequency: '1_3',
+              regularPrice: '$1.00',
+              discountRate: '10%',
+              subscriptionPrice: '$PLAN_PRICE',
+              hasPriceAdjustments: hasPriceAdjustments,
+              ...extraPlanProps
+            }
+          ]
+        },
+        discountedProductPriceFromOffers: {
+          regularPrice: '$1.00',
+          discountRate: '20%',
+          subscriptionPrice: '$OFFER_PRICE'
+        }
+      });
+    }
+
+    it('should render discountedProductPriceFromOffers when selling plan has no price adjustments', async () => {
+      const priceDiv = await setupDiscountedProductPriceTest(false);
+
+      const insideText = priceDiv.shadowRoot.textContent.trim();
+      expect(insideText).toBe('$OFFER_PRICE');
+    });
+
+    it('should not use discountedProductPriceFromOffers when selling plan has price adjustments', async () => {
+      const priceDiv = await setupDiscountedProductPriceTest(true);
+
+      const insideText = priceDiv.shadowRoot.textContent.trim();
+      expect(insideText).toBe('$PLAN_PRICE');
+    });
+
+    it('should use discountedProductPriceFromOffers for prepaid subscriptions even when plan does not have price adjustments', async () => {
+      const priceDiv = await setupDiscountedProductPriceTest(false, { prepaidShipments: 3 });
+
+      const insideText = priceDiv.shadowRoot.textContent.trim();
+      expect(insideText).toBe('$PLAN_PRICE');
+    });
+  });
 });

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

@@ -281,6 +281,19 @@ describe('experiments.shopify', () => {
 
   const session_A = 'cda';
   const session_B = 'abc';
+
+  function expectPlanFrequenciesToMatch(actualProductPlans, expectedProductPlans) {
+    for (const productId in expectedProductPlans) {
+      const actualPlans = actualProductPlans[productId];
+      const expectedPlans = expectedProductPlans[productId];
+
+      const actualFrequencies = actualPlans.map(plan => plan.frequency).sort();
+      const expectedFrequencies = expectedPlans.map(plan => plan.frequency).sort();
+
+      expect(actualFrequencies).toEqual(expectedFrequencies);
+    }
+  }
+
   it('should not change selling plan groups if no experiment matches', async () => {
     const experiments = {
       public_id: '123',
@@ -302,7 +315,7 @@ describe('experiments.shopify', () => {
 
     await new Promise(r => setTimeout(r, 10));
 
-    expect(store.getState().productPlans).toEqual(expectedNoModifiedProductPlans);
+    expectPlanFrequenciesToMatch(store.getState().productPlans, expectedNoModifiedProductPlans);
   });
 
   it('should change selling plan groups if experiment matches variant A', async () => {
@@ -360,7 +373,7 @@ describe('experiments.shopify', () => {
         }
       ]
     };
-    expect(store.getState().productPlans).toEqual(expectedVariantAProductPlans);
+    expectPlanFrequenciesToMatch(store.getState().productPlans, expectedVariantAProductPlans);
   });
 
   it('should change selling plan groups if experiment matches variant B', async () => {
@@ -413,6 +426,6 @@ describe('experiments.shopify', () => {
       ]
     };
 
-    expect(store.getState().productPlans).toEqual(expectedVariantBProductPlans);
+    expectPlanFrequenciesToMatch(store.getState().productPlans, expectedVariantBProductPlans);
   });
 });

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

@@ -11,7 +11,8 @@ import {
   eligibilityGroups,
   defaultFrequencies,
   productPlans,
-  prepaidShipmentsSelected
+  prepaidShipmentsSelected,
+  incentives
 } from '../reducer';
 import * as constants from '../constants';
 import { getObjectStructuredProductPlans } from '../adapters';
@@ -1003,4 +1004,154 @@ describe('reducers', () => {
       });
     });
   });
+
+  describe('incentives', () => {
+    const offerResponse = {
+      result: 'success',
+      module_view: { regular: 'f5aa0b83653c4fae956bc0440415dfcb' },
+      incentives: {
+        44198332104980: {
+          ongoing: ['8285f16f826e4cf29b49f073e45e32ab', '10205e185a5c4ccf83de75459241623a'],
+          initial: ['0f98a321d29e47d2a17fe3a8a7522d26']
+        }
+      },
+      incentives_display: {
+        '8285f16f826e4cf29b49f073e45e32ab': {
+          object: 'order',
+          field: 'sub_total',
+          type: 'Discount Percent',
+          value: 10.0
+        },
+        '10205e185a5c4ccf83de75459241623a': {
+          object: 'item',
+          field: 'total_price',
+          type: 'Discount Amount',
+          value: 5.0
+        },
+        '0f98a321d29e47d2a17fe3a8a7522d26': {
+          object: 'item',
+          field: 'total_price',
+          type: 'Discount Percent',
+          value: 11.0
+        }
+      }
+    };
+
+    it('should map incentives correctly', () => {
+      expect(incentives({}, { type: constants.RECEIVE_OFFER, payload: offerResponse })).toEqual({
+        44198332104980: {
+          ongoing: [
+            {
+              object: 'order',
+              field: 'sub_total',
+              type: 'Discount Percent',
+              value: 10.0,
+              id: '8285f16f826e4cf29b49f073e45e32ab'
+            },
+            {
+              object: 'item',
+              field: 'total_price',
+              type: 'Discount Amount',
+              value: 5.0,
+              id: '10205e185a5c4ccf83de75459241623a'
+            }
+          ],
+          initial: [
+            {
+              object: 'item',
+              field: 'total_price',
+              type: 'Discount Percent',
+              value: 11.0,
+              id: '0f98a321d29e47d2a17fe3a8a7522d26'
+            }
+          ]
+        }
+      });
+    });
+
+    it('should consider incentives_display_enhanced if present', () => {
+      const enhancedOfferResponse = {
+        ...offerResponse,
+        incentives_display_enhanced: {
+          '8285f16f826e4cf29b49f073e45e32ab': {
+            incentive_target: 'order',
+            incentive_type: 'discount_percent',
+            incentive_value: '10.00',
+            // no criteria, since this is program-wide
+            threshold_field: null,
+            threshold_value: null
+          },
+          '10205e185a5c4ccf83de75459241623a': {
+            incentive_target: 'item',
+            incentive_type: 'discount_percent',
+            incentive_value: '5.00',
+            threshold_field: null,
+            threshold_value: null,
+            criteria: {
+              node_type: 'PREMISE',
+              standard: 'PREPAID_ORDERS_PER_BILLING',
+              premise_value: 3
+            }
+          },
+          '0f98a321d29e47d2a17fe3a8a7522d26': {
+            incentive_target: 'item',
+            incentive_type: 'discount_percent',
+            incentive_value: '11.00',
+            threshold_field: null,
+            threshold_value: null,
+            criteria: {
+              node_type: 'PREMISE',
+              standard: 'PSI',
+              premise_value: ['Product Group A']
+            }
+          }
+        }
+      };
+
+      expect(incentives({}, { type: constants.RECEIVE_OFFER, payload: enhancedOfferResponse })).toEqual({
+        44198332104980: {
+          ongoing: [
+            {
+              object: 'order',
+              field: 'sub_total',
+              type: 'Discount Percent',
+              value: 10.0,
+              id: '8285f16f826e4cf29b49f073e45e32ab',
+              criteria: {
+                node_type: 'PREMISE',
+                standard: 'PROGRAM_WIDE',
+                premise_value: null
+              }
+            },
+            {
+              object: 'item',
+              field: 'total_price',
+              type: 'Discount Amount',
+              value: 5.0,
+              id: '10205e185a5c4ccf83de75459241623a',
+              criteria: {
+                node_type: 'PREMISE',
+                standard: 'PREPAID_ORDERS_PER_BILLING',
+                premise_value: 3
+              }
+            }
+          ],
+          initial: [
+            {
+              object: 'item',
+              field: 'total_price',
+              type: 'Discount Percent',
+              value: 11.0,
+              id: '0f98a321d29e47d2a17fe3a8a7522d26',
+              criteria: {
+                node_type: 'PREMISE',
+                standard: 'PSI',
+                premise_value: ['Product Group A']
+              }
+            }
+          ]
+        }
+      });
+    });
+  });
 });