@ordergroove/offers 2.48.8 → 2.49.0

package/examples/index.js

@@ -383,6 +383,11 @@ Add item to order on
 ];
 
 const componentExamples = [
+  {
+    name: 'og-benefit-messages',
+    selector: 'og-offer[location="benefit-messages"]',
+    markup: `<og-benefit-messages></og-benefit-messages>`
+  },
   {
     name: 'og-optin-button',
     selector: 'og-offer[location=og-optin-button]',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ordergroove/offers",
-  "version": "2.48.8",
+  "version": "2.49.0",
   "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": "b59fd55f3c3771c7e8019cd42cb82f1064d284b2"
+  "gitHead": "7b58b4c90e38ed68f42a40be308ecea2b6589d9e"
 }

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,38 @@
+import { LitElement, html } from 'lit-element';
+import { unsafeHTML } from 'lit-html/directives/unsafe-html';
+import { connect } from '../core/connect';
+import { withProduct } from '../core/resolveProperties';
+import { makeBenefitMessagesSelector } from '../core/selectors';
+
+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``;
+    // Messages are expected to be pre-sanitized by SSPC, so we can safely render them as HTML.
+    return html`
+      <ul class="og-benefit-messages">
+        ${this.messages.map(
+          msg => html`
+            <li>${unsafeHTML(msg)}</li>
+          `
+        )}
+      </ul>
+    `;
+  }
+}
+
+export const mapStateToProps = (state, ownProps) => makeBenefitMessagesSelector(ownProps?.product)(state);
+
+export const ConnectedBenefitMessages = connect(mapStateToProps)(BenefitMessages);
+
+export default ConnectedBenefitMessages;

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

@@ -0,0 +1,303 @@
+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('renders HTML markup from messages (sanitized by backend)', async () => {
+    const el = new BenefitMessages();
+    el.messages = ['Get <strong>10% off</strong> every order'];
+    await appendToBody(el);
+
+    const li = el.querySelector('li');
+    expect(li).toBeTruthy();
+    expect(li.querySelector('strong')).toBeTruthy();
+    expect(li.textContent.trim()).toBe('Get 10% off every order');
+  });
+
+  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 en = msg => ({ 'en-US': msg });
+  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': en('First-order bonus'),
+            'inc-ongoing': en('Every-order discount')
+          }
+        }),
+        { product: { id: 'prod-1' } }
+      )
+    ).toEqual({ messages: ['First-order bonus', 'Every-order discount'] });
+  });
+
+  it('falls back to en-US when browser locale has no matching entry', () => {
+    Object.defineProperty(navigator, 'language', { value: 'en-US', configurable: true });
+    expect(
+      mapStateToProps(
+        state({
+          incentivesForProduct: {
+            initial: [{ enhanced: true, id: 'inc-1' }],
+            ongoing: []
+          },
+          benefitMessages: {
+            'inc-1': { 'en-US': 'Get 10% off!', 'es-ES': 'Obtén 10% extra!' }
+          }
+        }),
+        { product: { id: 'prod-1' } }
+      )
+    ).toEqual({ messages: ['Get 10% off!'] });
+  });
+
+  it('prefers browser locale message over en-US when it matches', () => {
+    Object.defineProperty(navigator, 'language', { value: 'es-ES', configurable: true });
+    expect(
+      mapStateToProps(
+        state({
+          incentivesForProduct: {
+            initial: [{ enhanced: true, id: 'inc-1' }],
+            ongoing: []
+          },
+          benefitMessages: {
+            'inc-1': { 'en-US': 'Get 10% off!', 'es-ES': 'Obtén 10% extra!' }
+          }
+        }),
+        { product: { id: 'prod-1' } }
+      )
+    ).toEqual({ messages: ['Obtén 10% extra!'] });
+    Object.defineProperty(navigator, 'language', { value: 'en-US', configurable: true });
+  });
+
+  it('skips incentives with no entry for the current locale and no en-US fallback', () => {
+    Object.defineProperty(navigator, 'language', { value: 'en-US', configurable: true });
+    expect(
+      mapStateToProps(
+        state({
+          incentivesForProduct: {
+            initial: [
+              { enhanced: true, id: 'inc-no-en' },
+              { enhanced: true, id: 'inc-with-en' }
+            ],
+            ongoing: []
+          },
+          benefitMessages: {
+            'inc-no-en': { 'es-ES': 'Solo español' },
+            'inc-with-en': en('Has en-US')
+          }
+        }),
+        { product: { id: 'prod-1' } }
+      )
+    ).toEqual({ messages: ['Has en-US'] });
+  });
+
+  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': en('Shared'),
+            'inc-extra': en('Extra')
+          }
+        }),
+        { product: { id: 'prod-1' } }
+      )
+    ).toEqual({ messages: ['Shared', 'Extra'] });
+  });
+
+  it('dedupes by message string when distinct incentive ids resolve to the same message', () => {
+    expect(
+      mapStateToProps(
+        state({
+          incentivesForProduct: {
+            initial: [
+              { enhanced: true, id: 'inc-a' },
+              { enhanced: true, id: 'inc-b' }
+            ],
+            ongoing: [{ enhanced: true, id: 'inc-c' }]
+          },
+          benefitMessages: {
+            'inc-a': en('Free shipping'),
+            'inc-b': en('Free shipping'),
+            'inc-c': en('Cancel anytime')
+          }
+        }),
+        { product: { id: 'prod-1' } }
+      )
+    ).toEqual({ messages: ['Free shipping', 'Cancel anytime'] });
+  });
+
+  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': en('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': en('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': en('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': en('Should not appear') }
+        }),
+        { product: { id: 'prod-1' } }
+      )
+    ).toEqual({ messages: [] });
+  });
+
+  it('returns [] when the product has no incentives entry', () => {
+    expect(
+      mapStateToProps(
+        { incentives: {}, benefitMessages: { 'inc-1': en('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': en('Unrelated') }
+        }),
+        { product: { id: 'prod-1' } }
+      )
+    ).toEqual({ messages: [] });
+  });
+
+  it('returns [] when ownProps has no product', () => {
+    expect(mapStateToProps({ benefitMessages: { 'inc-1': en('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': en('Should not appear'),
+            'inc-enhanced': en('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-preview.js

@@ -1,4 +1,4 @@
-import { receiveOffer, receiveOrders, authorize, unauthorized, optinProduct } from './actions';
+import { receiveOffer, receiveOrders, authorize, unauthorized, optinProduct, setBenefitMessages } from './actions';
 import { getObjectStructuredProductPlans } from './adapters';
 import * as constants from './constants';
 
@@ -11,6 +11,13 @@ export const setPreviewStandardOffer = (isPreview, productId, offer) =>
     await dispatch({
       type: constants.UNAUTHORIZED
     });
+    await dispatch(
+      setBenefitMessages({
+        '47c01e9aacbe40389b5c7325d79091aa': { 'en-US': 'Coffee products with 15% off' },
+        e6534b9d877f41e586c37b7d8abc3a58: { 'en-US': 'Get a free gift on your 3rd order' },
+        f35e842710b24929922db4a529eecd40: { 'en-US': 'Free shipping for your recurring orders' }
+      })
+    );
     await dispatch(
       receiveOffer(
         {
@@ -83,6 +90,12 @@ export const setPreviewUpsellOffer = (isPreview, productId, offer) =>
 
     const { merchantId } = getState();
     if (isPreview) {
+      await dispatch(
+        setBenefitMessages({
+          '47c01e9aacbe40389b5c7325d79091aa': { 'en-US': 'Coffee products with 15% off' },
+          e6534b9d877f41e586c37b7d8abc3a58: { 'en-US': 'Get a free gift on your 3rd order' }
+        })
+      );
       await dispatch(
         receiveOffer(
           {
@@ -149,6 +162,12 @@ export const setPreviewPrepaid = (isPreview, productId, offer) =>
     await dispatch({
       type: constants.UNAUTHORIZED
     });
+    await dispatch(
+      setBenefitMessages({
+        '47c01e9aacbe40389b5c7325d79091aa': { 'en-US': 'Coffee products with 15% off' },
+        e6534b9d877f41e586c37b7d8abc3a58: { 'en-US': 'Get a free gift on your 3rd order' }
+      })
+    );
     await dispatch(
       receiveOffer(
         {

package/src/core/actions.js

@@ -296,6 +296,11 @@ export const setConfig = payload => ({
   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

@@ -11,6 +11,7 @@ import {
   EnvironmentState,
   AutoshipByDefaultState,
   AutoshipEligibleState,
+  BenefitMessagesState,
   ConfigState,
   Incentive,
   IncentiveObject,
@@ -178,6 +179,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
@@ -572,6 +574,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,
@@ -601,5 +612,6 @@ export default combineReducers({
   templates,
   productPlans,
   prepaidShipmentsSelected,
-  price
+  price,
+  benefitMessages
 });

package/src/core/selectors.ts

@@ -317,3 +317,60 @@ export const isShopifyDiscountFunctionInUseSelector = (state: State) => {
 
   return plans.length > 0 && plans.every(plan => plan.hasPriceAdjustments === false || plan.prepaidShipments);
 };
+
+/**
+ * Pick benefit message to be rendered in PDP. Preferences are:
+ * 1. Message matching the browser's locale exactly (eg "es-MX")
+ * 2. Message matching any locale with the same language prefix (eg "es-ES" for "es-MX")
+ * 3. US English message ("en-US")
+ * Returns null when none are present — the incentive is then skipped.
+ */
+const resolveLocaleMessage = (localeMap: Record<string, string>): string | null => {
+  if (!localeMap || typeof localeMap !== 'object') return null;
+
+  const enUS = 'en-US';
+  const browserLocale = navigator?.language || enUS;
+  const langPrefix = browserLocale.split('-')[0];
+
+  const partialMatch = Object.keys(localeMap).find(key => key !== browserLocale && key.split('-')[0] === langPrefix);
+
+  const msg = localeMap[browserLocale] || localeMap[partialMatch] || localeMap[enUS];
+  return typeof msg === 'string' && msg.length > 0 ? msg : null;
+};
+
+/**
+ * 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 in the active locale. Returns { messages: [] }
+ * when no qualifying incentive has a matching message.
+ */
+export const makeBenefitMessagesSelector = memoize(
+  (product: BaseProduct) =>
+    createSelector(
+      (state: State) => (state.incentives || {})[safeProductId(product?.id)],
+      (state: State) => state.benefitMessages || {},
+      (productIncentives, benefitMap) => {
+        if (!productIncentives) return { messages: [] as string[] };
+
+        const isPreview = window?.og?.previewMode;
+        const seenIds = new Set<string>();
+        const seenMessages = new Set<string>();
+
+        [productIncentives.initial, productIncentives.ongoing].forEach(list => {
+          (list || []).forEach(incentive => {
+            if (!isPreview && !incentive?.enhanced) return;
+            const id = incentive.id;
+            if (!id || seenIds.has(id)) return;
+            seenIds.add(id);
+            const msg = resolveLocaleMessage(benefitMap[id]);
+            if (!msg) return;
+            seenMessages.add(msg);
+          });
+        });
+
+        return { messages: [...seenMessages] };
+      }
+    ),
+  product => JSON.stringify(product)
+);

package/src/core/types/reducer.ts

@@ -25,11 +25,15 @@ export type NextUpcomingOrderState = Partial<
 
 export type IncentivesState = Record<string, IncentiveObject>;
 
+export type BenefitMessagesState = Record<string, 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 a
+     * locale map (IETF tag → message text) for the incentive; the consumer
+     * picks the appropriate locale at render time. Replaces the entire map.
+     * @param {{ [incentivePublicId: string]: { [locale: 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) {