@ordergroove/offers 2.48.6 → 2.48.7-alpha-PR-1482-3.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ordergroove/offers",
-  "version": "2.48.6",
+  "version": "2.48.7-alpha-PR-1482-3.31+dbac0c59c",
   "description": "offer state component",
   "author": "Eugenio Lattanzio <eugenio63@gmail.com>",
   "homepage": "https://github.com/ordergroove/plush-toys#readme",
@@ -50,5 +50,5 @@
     "@ordergroove/offers-templates": "^0.10.4",
     "@types/lodash.memoize": "^4.1.9"
   },
-  "gitHead": "f76cf94b1c295431c581a1c46f6f1180f920de76"
+  "gitHead": "dbac0c59cdfab98862e3f758ab96d6872c48cf28"
 }

package/src/__tests__/offers.spec.js

@@ -20,6 +20,7 @@ describe('Offers API', () => {
     register: jasmine.any(Function),
     resolveSettings: jasmine.any(Function),
     setAuthUrl: jasmine.any(Function),
+    setBenefitMessages: jasmine.any(Function),
     setEnvironment: jasmine.any(Function),
     setLocale: jasmine.any(Function),
     setMerchantId: jasmine.any(Function),

package/src/components/BenefitMessages.js

@@ -0,0 +1,66 @@
+import { LitElement, html } from 'lit-element';
+import { connect } from '../core/connect';
+import { withProduct } from '../core/resolveProperties';
+import { safeProductId } from '../core/utils';
+
+export class BenefitMessages extends withProduct(LitElement) {
+  static get properties() {
+    return {
+      ...super.properties,
+      messages: { type: Array, attribute: false }
+    };
+  }
+
+  createRenderRoot() {
+    return this;
+  }
+
+  render() {
+    if (!this.messages?.length) return html``;
+    return html`
+      <ul class="og-benefit-messages">
+        ${this.messages.map(
+          msg => html`
+            <li>${msg}</li>
+          `
+        )}
+      </ul>
+    `;
+  }
+}
+
+/**
+ * Walks the product's applicable incentives (initial first, then ongoing) and
+ * returns the deduped list of messages — one per unique incentive id that
+ * (a) was present in the offer response's `incentives_display_enhanced` and
+ * (b) has a configured benefit message. Either array (initial / ongoing) may
+ * be absent. Returns an empty array when no qualifying incentive has a
+ * matching message.
+ */
+export const mapStateToProps = (state, ownProps) => {
+  const productId = safeProductId(ownProps?.product?.id);
+  const productIncentives = (state.incentives || {})[productId];
+  const benefitMap = state.benefitMessages || {};
+
+  if (!productIncentives) return { messages: [] };
+
+  const seen = new Set();
+  const messages = [];
+
+  [productIncentives.initial, productIncentives.ongoing].forEach(list => {
+    (list || []).forEach(incentive => {
+      if (!incentive?.enhanced) return;
+      const id = incentive.id;
+      if (!id || seen.has(id)) return;
+      seen.add(id);
+      const msg = benefitMap[id];
+      if (msg) messages.push(msg);
+    });
+  });
+
+  return { messages };
+};
+
+export const ConnectedBenefitMessages = connect(mapStateToProps)(BenefitMessages);
+
+export default ConnectedBenefitMessages;

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

@@ -0,0 +1,221 @@
+import { BenefitMessages, mapStateToProps } from '../BenefitMessages';
+import { appendToBody } from './utils';
+
+customElements.define('og-benefit-messages-test', BenefitMessages);
+
+describe('BenefitMessages', () => {
+  it('renders one li per message inside a ul', async () => {
+    const el = new BenefitMessages();
+    el.messages = ['Free shipping', 'Cancel anytime', '5% off every order'];
+    await appendToBody(el);
+
+    const ul = el.querySelector('ul.og-benefit-messages');
+    expect(ul).toBeTruthy();
+    const items = el.querySelectorAll('li');
+    expect(items.length).toBe(3);
+    expect(items[0].textContent.trim()).toBe('Free shipping');
+    expect(items[1].textContent.trim()).toBe('Cancel anytime');
+    expect(items[2].textContent.trim()).toBe('5% off every order');
+  });
+
+  it('renders nothing when messages is an empty array', async () => {
+    const el = new BenefitMessages();
+    el.messages = [];
+    await appendToBody(el);
+
+    expect(el.querySelector('ul')).toBeNull();
+    expect(el.querySelectorAll('li').length).toBe(0);
+  });
+
+  it('renders nothing when messages is undefined', async () => {
+    const el = new BenefitMessages();
+    await appendToBody(el);
+
+    expect(el.querySelector('ul')).toBeNull();
+  });
+
+  it('escapes message strings as text (no HTML interpolation)', async () => {
+    const el = new BenefitMessages();
+    el.messages = ['<img src=x onerror="alert(1)">'];
+    await appendToBody(el);
+
+    const li = el.querySelector('li');
+    expect(li).toBeTruthy();
+    expect(li.querySelector('img')).toBeNull();
+    expect(li.textContent.trim()).toBe('<img src=x onerror="alert(1)">');
+  });
+
+  it('re-renders correctly after disconnect and reconnect', async () => {
+    const el = new BenefitMessages();
+    el.messages = ['First'];
+    await appendToBody(el);
+    expect(el.querySelector('li').textContent.trim()).toBe('First');
+
+    el.remove();
+
+    el.messages = ['After remount A', 'After remount B'];
+    await appendToBody(el);
+
+    const items = el.querySelectorAll('li');
+    expect(items.length).toBe(2);
+    expect(items[0].textContent.trim()).toBe('After remount A');
+    expect(items[1].textContent.trim()).toBe('After remount B');
+  });
+});
+
+describe('BenefitMessages mapStateToProps', () => {
+  const state = ({ incentivesForProduct, benefitMessages, productId = 'prod-1' } = {}) => ({
+    incentives: incentivesForProduct ? { [productId]: incentivesForProduct } : {},
+    benefitMessages: benefitMessages || {}
+  });
+
+  it('returns messages for the product, initial first then ongoing', () => {
+    expect(
+      mapStateToProps(
+        state({
+          incentivesForProduct: {
+            initial: [{ enhanced: true, id: 'inc-init' }],
+            ongoing: [{ enhanced: true, id: 'inc-ongoing' }]
+          },
+          benefitMessages: {
+            'inc-init': 'First-order bonus',
+            'inc-ongoing': 'Every-order discount'
+          }
+        }),
+        { product: { id: 'prod-1' } }
+      )
+    ).toEqual({ messages: ['First-order bonus', 'Every-order discount'] });
+  });
+
+  it('dedupes by incentive id when the same id appears in both initial and ongoing', () => {
+    expect(
+      mapStateToProps(
+        state({
+          incentivesForProduct: {
+            initial: [{ enhanced: true, id: 'inc-shared' }],
+            ongoing: [
+              { enhanced: true, id: 'inc-shared' },
+              { enhanced: true, id: 'inc-extra' }
+            ]
+          },
+          benefitMessages: {
+            'inc-shared': 'Shared',
+            'inc-extra': 'Extra'
+          }
+        }),
+        { product: { id: 'prod-1' } }
+      )
+    ).toEqual({ messages: ['Shared', 'Extra'] });
+  });
+
+  it('skips incentives that have no configured message', () => {
+    expect(
+      mapStateToProps(
+        state({
+          incentivesForProduct: {
+            initial: [
+              { enhanced: true, id: 'inc-1' },
+              { enhanced: true, id: 'inc-2' }
+            ],
+            ongoing: [{ enhanced: true, id: 'inc-3' }]
+          },
+          benefitMessages: {
+            'inc-2': 'Only this one is configured'
+          }
+        }),
+        { product: { id: 'prod-1' } }
+      )
+    ).toEqual({ messages: ['Only this one is configured'] });
+  });
+
+  it('handles missing initial array (only ongoing)', () => {
+    expect(
+      mapStateToProps(
+        state({
+          incentivesForProduct: { ongoing: [{ enhanced: true, id: 'inc-1' }] },
+          benefitMessages: { 'inc-1': 'Ongoing only' }
+        }),
+        { product: { id: 'prod-1' } }
+      )
+    ).toEqual({ messages: ['Ongoing only'] });
+  });
+
+  it('handles missing ongoing array (only initial)', () => {
+    expect(
+      mapStateToProps(
+        state({
+          incentivesForProduct: { initial: [{ enhanced: true, id: 'inc-1' }] },
+          benefitMessages: { 'inc-1': 'Initial only' }
+        }),
+        { product: { id: 'prod-1' } }
+      )
+    ).toEqual({ messages: ['Initial only'] });
+  });
+
+  it('returns [] when both initial and ongoing are empty', () => {
+    expect(
+      mapStateToProps(
+        state({
+          incentivesForProduct: { initial: [], ongoing: [] },
+          benefitMessages: { 'inc-1': 'Should not appear' }
+        }),
+        { product: { id: 'prod-1' } }
+      )
+    ).toEqual({ messages: [] });
+  });
+
+  it('returns [] when the product has no incentives entry', () => {
+    expect(
+      mapStateToProps(
+        { incentives: {}, benefitMessages: { 'inc-1': 'Should not appear' } },
+        { product: { id: 'prod-1' } }
+      )
+    ).toEqual({ messages: [] });
+  });
+
+  it('returns [] when state has no benefitMessages key', () => {
+    expect(
+      mapStateToProps(
+        { incentives: { 'prod-1': { initial: [{ enhanced: true, id: 'inc-1' }], ongoing: [] } } },
+        { product: { id: 'prod-1' } }
+      )
+    ).toEqual({ messages: [] });
+  });
+
+  it('returns [] when no incentive has a matching message', () => {
+    expect(
+      mapStateToProps(
+        state({
+          incentivesForProduct: {
+            initial: [{ enhanced: true, id: 'inc-1' }],
+            ongoing: [{ enhanced: true, id: 'inc-2' }]
+          },
+          benefitMessages: { 'inc-other': 'Unrelated' }
+        }),
+        { product: { id: 'prod-1' } }
+      )
+    ).toEqual({ messages: [] });
+  });
+
+  it('returns [] when ownProps has no product', () => {
+    expect(mapStateToProps({ benefitMessages: { 'inc-1': 'm' } }, {})).toEqual({ messages: [] });
+  });
+
+  it('skips incentives that were not in incentives_display_enhanced', () => {
+    expect(
+      mapStateToProps(
+        state({
+          incentivesForProduct: {
+            initial: [{ id: 'inc-non-enhanced' }, { enhanced: true, id: 'inc-enhanced' }],
+            ongoing: []
+          },
+          benefitMessages: {
+            'inc-non-enhanced': 'Should not appear',
+            'inc-enhanced': 'Should appear'
+          }
+        }),
+        { product: { id: 'prod-1' } }
+      )
+    ).toEqual({ messages: ['Should appear'] });
+  });
+});

package/src/components/__tests__/OG.fspec.js

@@ -68,6 +68,7 @@ describe('og.offers', function () {
     register: jasmine.any(Function),
     resolveSettings: jasmine.any(Function),
     setAuthUrl: jasmine.any(Function),
+    setBenefitMessages: jasmine.any(Function),
     setEnvironment: jasmine.any(Function),
     setLocale: jasmine.any(Function),
     setMerchantId: jasmine.any(Function),

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

@@ -1140,6 +1140,7 @@ describe('reducers', () => {
               type: 'Discount Percent',
               value: 10.0,
               id: '8285f16f826e4cf29b49f073e45e32ab',
+              enhanced: true,
               threshold_field: null,
               threshold_value: null,
               criteria: {
@@ -1154,6 +1155,7 @@ describe('reducers', () => {
               type: 'Discount Percent',
               value: 20.0,
               id: 'threshold-id',
+              enhanced: true,
               threshold_field: 'order',
               threshold_value: '10.00',
               criteria: {
@@ -1168,6 +1170,7 @@ describe('reducers', () => {
               type: 'Discount Amount',
               value: 5.0,
               id: '10205e185a5c4ccf83de75459241623a',
+              enhanced: true,
               threshold_field: null,
               threshold_value: null,
               criteria: {
@@ -1184,6 +1187,7 @@ describe('reducers', () => {
               type: 'Discount Percent',
               value: 11.0,
               id: '0f98a321d29e47d2a17fe3a8a7522d26',
+              enhanced: true,
               threshold_field: null,
               threshold_value: null,
               criteria: {

package/src/core/actions.js

@@ -296,6 +296,17 @@ export const setConfig = payload => ({
   payload
 });
 
+/**
+ * Set benefit messages keyed by incentive public id. Each value is the
+ * already-locale-resolved message text to display when the incentive applies
+ * to the product being rendered. Replaces the entire map on each call.
+ * @param {{ [incentivePublicId: string]: string }} payload
+ */
+export const setBenefitMessages = payload => ({
+  type: constants.SET_BENEFIT_MESSAGES,
+  payload
+});
+
 export const addTemplate = (selector, markup, config) => ({
   type: constants.ADD_TEMPLATE,
   payload: { selector, markup, config }

package/src/core/constants.js

@@ -32,6 +32,7 @@ export const CHECKOUT = 'CHECKOUT';
 export const RECEIVE_FETCH = 'RECEIVE_FETCH';
 export const SET_LOCALE = 'SET_LOCALE';
 export const SET_CONFIG = 'SET_CONFIG';
+export const SET_BENEFIT_MESSAGES = 'SET_BENEFIT_MESSAGES';
 export const SET_PREVIEW_STANDARD_OFFER = 'SET_PREVIEW_STANDARD_OFFER';
 export const SET_PREVIEW_UPSELL_OFFER = 'SET_PREVIEW_UPSELL_OFFER';
 export const SET_PREVIEW_PREPAID_OFFER = 'SET_PREVIEW_PREPAID_OFFER';

package/src/core/reducer.ts

@@ -9,6 +9,7 @@ import { experimentsReducer } from './experiments';
 import {
   AutoshipByDefaultState,
   AutoshipEligibleState,
+  BenefitMessagesState,
   ConfigState,
   Incentive,
   IncentiveObject,
@@ -176,6 +177,7 @@ const mapIncentive = (
       // for standard incentives, include the criteria so we know which kind of incentive (e.g. PSI, prepaid, etc)
       ...(enhanced
         ? {
+            enhanced: true,
             criteria: enhanced.criteria
               ? enhanced.criteria
               : // when there is no criteria in the enhanced incentive, it means it's a program wide incentive
@@ -570,6 +572,15 @@ export const prepaidShipmentsSelected = (
 
 export const price = (state: PriceState = {}, _action) => state;
 
+export const benefitMessages = (state: BenefitMessagesState = {}, action): BenefitMessagesState => {
+  switch (action.type) {
+    case constants.SET_BENEFIT_MESSAGES:
+      return { ...(action.payload || {}) };
+    default:
+      return state;
+  }
+};
+
 export default combineReducers({
   optedin,
   optedout,
@@ -599,5 +610,6 @@ export default combineReducers({
   templates,
   productPlans,
   prepaidShipmentsSelected,
-  price
+  price,
+  benefitMessages
 });

package/src/core/types/reducer.ts

@@ -17,11 +17,15 @@ export type NextUpcomingOrderState = Partial<
 
 export type IncentivesState = Record<string, IncentiveObject>;
 
+export type BenefitMessagesState = Record<string, string>;
+
 export type Incentive = ApiIncentive & {
   id: string;
   /**
-   * all these fields are undefined when the offer profile is not standardized
+   * True when the incentive id was present in `incentives_display_enhanced`
+   * on the offer response. The fields below are only populated in that case.
    */
+  enhanced?: boolean;
   threshold_field?: string | null;
   threshold_value?: string | null;
   criteria?: {

package/src/index.js

@@ -28,6 +28,7 @@ export const previewMode = offers.previewMode;
 export const register = offers.register;
 export const resolveSettings = offers.resolveSettings;
 export const setAuthUrl = offers.setAuthUrl;
+export const setBenefitMessages = offers.setBenefitMessages;
 export const setEnvironment = offers.setEnvironment;
 export const setLocale = offers.setLocale;
 export const setMerchantId = offers.setMerchantId;

package/src/make-api.js

@@ -12,6 +12,7 @@ import { ConnectedOptinToggle } from './components/OptinToggle';
 import { ConnectedOptinStatus } from './components/OptinStatus';
 import { ConnectedText } from './components/Text';
 import { ConnectedIncentiveText } from './components/IncentiveText';
+import { ConnectedBenefitMessages } from './components/BenefitMessages';
 import { ConnectedSelectFrequency } from './components/SelectFrequency';
 import { ConnectedNextUpcomingOrder } from './components/NextUpcomingOrder';
 import { ConnectedOffer } from './components/Offer';
@@ -38,6 +39,7 @@ export default function makeApi(store) {
     customElements.define('og-when', ConnectedWhen);
     customElements.define('og-text', ConnectedText);
     customElements.define('og-incentive-text', ConnectedIncentiveText);
+    customElements.define('og-benefit-messages', ConnectedBenefitMessages);
     customElements.define('og-offer', ConnectedOffer);
     customElements.define('og-select-frequency', ConnectedSelectFrequency);
     customElements.define('og-optout-button', ConnectedOptoutButton);
@@ -121,6 +123,16 @@ export default function makeApi(store) {
       store.dispatch(actions.setLocale(locale));
       return this;
     },
+    /**
+     * Set benefit messages keyed by incentive public id. Each value is the
+     * already-locale-resolved message text to display when the incentive
+     * applies to the product being rendered. Replaces the entire map.
+     * @param {{ [incentivePublicId: string]: string }} messages
+     */
+    setBenefitMessages(messages) {
+      store.dispatch(actions.setBenefitMessages(messages));
+      return this;
+    },
     addTemplate(tagName, content, configOption) {
       store.dispatch(actions.addTemplate(tagName, content, configOption));
       return this;

package/src/shopify/shopifyReducer.ts

@@ -5,6 +5,7 @@ import baseReducer, {
   autoshipByDefault,
   auth,
   authUrl,
+  benefitMessages,
   defaultFrequencies,
   eligibilityGroups,
   environment,
@@ -433,7 +434,8 @@ const reducer = combineReducers({
   productToSubscribe,
   sessionId,
   templates,
-  prepaidShipmentsSelected
+  prepaidShipmentsSelected,
+  benefitMessages
 });
 
 export default function shopifyReducer(state, action) {