@ordergroove/offers 2.26.9 → 2.27.0

package/src/core/resolveProperties.js

@@ -93,22 +93,17 @@ export const withProduct = Base =>
 export const withChildOptions = Base =>
   class extends Base {
     get childOptions() {
-      return this._childOptions || { options: [] };
-    }
-
-    connectedCallback() {
       const options = [];
       let isSelected = null;
+
       this.querySelectorAll('option').forEach(it => {
         const value = sanitizeFrequencyString(it.value);
         const text = it.innerText.trim();
         options.push({ value, text });
-
         if (!isSelected && it.selected) {
           isSelected = value;
         }
       });
-      this._childOptions = { options, isSelected };
-      super.connectedCallback && super.connectedCallback();
+      return { options, isSelected };
     }
   };

package/src/core/selectors.js

@@ -133,9 +133,9 @@ export const kebabCase = string => {
  */
 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]) ||
-    (state.config && state.config[key]) ||
     defaultValue
 });
 

package/src/core/store.js

@@ -1,10 +1,10 @@
 import { createStore, compose, applyMiddleware } from 'redux';
 import thunk from 'redux-thunk';
-import reducer from './reducer';
-import { loadState, saveState } from './localStorage';
-import { dispatchMiddleware, localStorageMiddleware } from './middleware';
 
-export function getStore() {
+import { loadState } from './localStorage';
+import { dispatchMiddleware, localStorageMiddleware, offerEvents } from './middleware';
+
+export function makeStore(reducer, ...extraMiddlewares) {
   if (window.og && window.og.store) return window.og.store;
 
   const isPreviewMode = window.og && window.og.previewMode;
@@ -18,17 +18,25 @@ export function getStore() {
         })
       : compose;
 
-  const middlewares = [thunk, dispatchMiddleware];
+  const middlewares = [thunk, dispatchMiddleware, offerEvents];
+
+  let initial = {};
+
   if (!isPreviewMode) {
-    middlewares.push(localStorageMiddleware);
+    try {
+      initial = loadState();
+      middlewares.push(localStorageMiddleware);
+    } catch (err) {
+      // localStorage not available during preview in sandbox
+    }
   }
 
-  const enhancer = composeEnhancers(applyMiddleware(...middlewares));
-  const store = createStore(reducer, isPreviewMode ? {} : loadState(), enhancer);
+  const enhancer = composeEnhancers(applyMiddleware(...middlewares, ...extraMiddlewares));
+  const store = createStore(reducer, initial, enhancer);
 
   window.og = window.og || {};
   window.og.store = store;
   return store;
 }
 
-export default getStore;
+export default makeStore;

package/src/core/utils.ts

@@ -0,0 +1,67 @@
+import platform from '../platform';
+import { ENV_PROD, ENV_STAGING, STAGING_STATIC_HOST, STATIC_HOST } from './constants';
+
+export function onReady(fn) {
+  if (document.readyState === 'loading') {
+    window.addEventListener('DOMContentLoaded', fn);
+  } else {
+    fn();
+  }
+}
+
+export function getMainJs(): HTMLScriptElement {
+  return document.querySelector(
+    [
+      `script[src^="https://${STATIC_HOST}"]`,
+      `script[src^="https://${STAGING_STATIC_HOST}"]`,
+      `script[src^="http://${STATIC_HOST}"]`,
+      `script[src^="http://${STAGING_STATIC_HOST}"]`
+    ].join(',')
+  ) as HTMLScriptElement;
+}
+/**
+ *
+ * @returns array of two elements [merchantId, env];
+ */
+export function resolveEnvAndMerchant() {
+  const script = getMainJs();
+  if (!script) return [];
+  const url = new URL(script.src);
+  const env = url.host.startsWith(ENV_STAGING) ? ENV_STAGING : ENV_PROD;
+  const merchantId = url.pathname.split('/')[1];
+
+  if (!env && !merchantId) return [];
+
+  return [merchantId, env, script];
+}
+
+export const safeProductId = product => {
+  let productId = `${product.id || product}`;
+  if (platform?.shopify_selling_plans) {
+    // we can't avoid make offer request since we need to know the upsell group and autoship by default
+    // cart offer contains <product>:<cart_id>, we care about product only
+    productId = productId.split(':')[0];
+  }
+  return productId;
+};
+/**
+ * Attempts to auto initialize the offer library reading the merchantId and env from
+ * integration script i.e. <script src="http://static.ordergroove...."/>.
+ * Useful when local develop using http redirects
+ */
+export function autoInitializeOffers(offers) {
+  if (offers.isReady()) return;
+  const [merchantId, env] = resolveEnvAndMerchant();
+  if (!env && !merchantId) return;
+  offers.initialize(merchantId, env);
+}
+
+export const clearCookie = cookieId => {
+  // clear existing OG auth cookie
+  document.cookie = `${cookieId}=; expires=Thu, 01 Jan 1970 00:00:01 GMT;`;
+};
+
+export function getCookieValue(cookieId) {
+  const cookie = document.cookie.match(`(^|;) ?${cookieId}=([^;]*)(;|$)`);
+  return cookie ? cookie[2] : null;
+}

package/src/index.js

@@ -1,206 +1,49 @@
-import { offersLiveEditor } from '@ordergroove/offers-live-editor';
-import { setStore } from './core/connect';
-import { getStore } from './core/store';
-import { listenLocalStorageChanges } from './core/localStorage';
-import * as adapters from './core/adapters';
-import * as actions from './core/actions';
-import { ConnectedWhen } from './components/When';
-import { ConnectedOptinButton } from './components/OptinButton';
-import { ConnectedOptoutButton } from './components/OptoutButton';
-import { ConnectedOptinSelect } from './components/OptinSelect';
-import { ConnectedUpsellButton } from './components/UpsellButton';
-import { ConnectedUpsellModal } from './components/UpsellModal';
-import { ConnectedOptinToggle } from './components/OptinToggle';
-import { ConnectedOptinStatus } from './components/OptinStatus';
-import { ConnectedText } from './components/Text';
-import { ConnectedIncentiveText } from './components/IncentiveText';
-import { ConnectedSelectFrequency } from './components/SelectFrequency';
-import { ConnectedNextUpcomingOrder } from './components/NextUpcomingOrder';
-import { ConnectedOffer } from './components/Offer';
-import { Modal } from './components/Modal';
-import { Select } from './components/Select';
-import { Tooltip } from './components/Tooltip';
-import { ConnectedFrequencyStatus } from './components/FrequencyStatus';
-import * as testMode from './test-mode';
-import { api } from './core/api';
-import { environment, offer } from './core/reducer';
-import { RECEIVE_PRODUCT_PLANS } from './core/constants';
-import ConnectedPrice from './components/Price';
-
-testMode.enable();
-let store;
-
-export const offers = {};
-
-export function setEnvironment(e) {
-  store.dispatch(actions.setEnvironment(e));
-  return offers;
-}
-export function setMerchantId(m) {
-  store.dispatch(actions.setMerchantId(m));
-  return offers;
-}
-export function setAuthUrl(authUrl) {
-  store.dispatch(actions.setAuthUrl(authUrl));
-  return offers;
-}
-export function getProductsForPurchasePost(productIds = []) {
-  return adapters.getProductsForPurchasePost(store.getState(), productIds);
-}
-export function getOptins(productIds = []) {
-  return adapters.getProductsForPurchasePost(store.getState(), productIds);
-}
-export function clear() {
-  store.dispatch(actions.checkout());
-}
-export function addOptinChangedCallback(fn) {
-  if (typeof fn === 'function') document.addEventListener('optin-changed', e => fn(e.detail));
-}
-export function disableOptinChangedCallbacks() {
-  document.addEventListener('optin-changed', e => e.stopPropagation(), true);
-}
-export function register() {
-  try {
-    customElements.define('og-when', ConnectedWhen);
-    customElements.define('og-text', ConnectedText);
-    customElements.define('og-incentive-text', ConnectedIncentiveText);
-    customElements.define('og-offer', ConnectedOffer);
-    customElements.define('og-select-frequency', ConnectedSelectFrequency);
-    customElements.define('og-optout-button', ConnectedOptoutButton);
-    customElements.define('og-optin-toggle', ConnectedOptinToggle);
-    customElements.define('og-optin-status', ConnectedOptinStatus);
-    customElements.define('og-optin-button', ConnectedOptinButton);
-    customElements.define('og-optin-select', ConnectedOptinSelect);
-    customElements.define('og-upsell-button', ConnectedUpsellButton);
-    customElements.define('og-frequency-status', ConnectedFrequencyStatus);
-    customElements.define('og-modal', Modal);
-    customElements.define('og-select', Select);
-    customElements.define('og-tooltip', Tooltip);
-    customElements.define('og-upsell-modal', ConnectedUpsellModal);
-    customElements.define('og-next-upcoming-order', ConnectedNextUpcomingOrder);
-    customElements.define('og-price', ConnectedPrice);
-  } catch (err) {
-    // eslint-disable-next-line no-console
-    console.warn(err);
-  }
-  offers.register = () => 0;
-}
-export function previewMode(set) {
-  window.og = window.og || {};
-  if (set === false) {
-    delete window.og;
-  } else {
-    window.og.previewMode = true;
-  }
-  return this;
-}
-export function config(configuration) {
-  store.dispatch(actions.setConfig(configuration));
-  return offers;
-}
-export function setLocale(locale) {
-  store.dispatch(actions.setLocale(locale));
-  return offers;
-}
-export function addTemplate(tagName, content, configOption) {
-  store.dispatch(actions.addTemplate(tagName, content, configOption));
-  return offers;
-}
-/**
- * templates object where keys are selectors and values are content
- */
-export function setTemplates(templates) {
-  store.dispatch(actions.setTemplates(templates));
-  return offers;
-}
-export function setPublicPath(publicPath) {
-  return offers;
-}
-export function resolveSettings(merchantId, env, settings, storeInstance = store) {
-  if (merchantId && env && settings) {
-    let products = [];
-    if (settings.product) {
-      products.push(settings.product);
-    } else if (settings.cart && Array.isArray(settings.cart.products)) {
-      products = products.concat(settings.cart.products);
-    }
-    const { apiUrl } = environment({}, actions.setEnvironment(env));
-    const { sessionId } = storeInstance.getState();
-    if (sessionId) {
-      products.forEach(product => {
-        api.fetchOffer(apiUrl, merchantId, sessionId, `${product}`, 'pdp');
-      });
-    }
-
-    if (settings.product_discounts && typeof settings.product_discounts === 'object') {
-      storeInstance.dispatch({ type: RECEIVE_PRODUCT_PLANS, payload: settings.product_discounts });
-    }
-  }
-}
-
-/**
- * Initialize OG object
- * @param {*} merchantId
- * @param {*} env
- * @param {*} authUrl
+import { makeStore } from './core/store';
+import makeApi from './make-api';
+import defaultReducer from './core/reducer';
+import shopifyReducer from './shopify/shopifyReducer';
+import shopifyMiddleware from './shopify/shopifyMiddleware';
+import platform from './platform';
+import { autoInitializeOffers, onReady } from './core/utils';
+import { authorizeShopifyCustomer } from './shopify/shopifyBootstrap';
+
+export const store = makeStore(
+  ...(platform?.shopify_selling_plans ? [shopifyReducer, shopifyMiddleware] : [defaultReducer])
+);
+
+export const offers = makeApi(store);
+
+export const isReady = offers.isReady;
+export const addOptinChangedCallback = offers.addOptinChangedCallback;
+export const addTemplate = offers.addTemplate;
+export const clear = offers.clear;
+export const config = offers.config;
+export const disableOptinChangedCallbacks = offers.disableOptinChangedCallbacks;
+export const getOptins = offers.getOptins;
+export const getProductsForPurchasePost = offers.getProductsForPurchasePost;
+export const initialize = offers.initialize;
+export const previewMode = offers.previewMode;
+export const register = offers.register;
+export const resolveSettings = offers.resolveSettings;
+export const setAuthUrl = offers.setAuthUrl;
+export const setEnvironment = offers.setEnvironment;
+export const setLocale = offers.setLocale;
+export const setMerchantId = offers.setMerchantId;
+export const setPublicPath = offers.setPublicPath;
+export const setTemplates = offers.setTemplates;
+export const setupCart = offers.setupCart;
+export const setupProduct = offers.setupProduct;
+export const setupProducts = offers.setupProducts;
+export { platform };
+export default offers.initialize;
+
+/*
+ * Attempts to auto initialize the offer library reading the merchantId and env from
+ * integration script i.e. <script src="http://static.ordergroove...."/>.
+ * Useful when local develop using http redirects
  */
-export function initialize(merchantId, env, authUrl) {
-  if (offers.isReady) {
-    console.warn('og.offers has been initialized already. Skipping.');
-    return offers;
-  }
-
-  store = getStore();
-
-  offers.store = store;
-  offers.resolveSettings(merchantId, env, window.og_settings, store);
-
-  setStore(store);
-
-  if (merchantId) offers.setMerchantId(merchantId);
-  if (env) offers.setEnvironment(env);
-  if (authUrl) offers.setAuthUrl(authUrl);
+onReady(() => autoInitializeOffers(offers));
 
-  window.addEventListener('storage', listenLocalStorageChanges(store));
-
-  if (merchantId && env) {
-    store.dispatch(actions.requestSessionId());
-    store.dispatch(actions.fetchAuth());
-    offers.register();
-  }
-
-  offers.isReady = true;
-
-  return offers;
+if (platform?.shopify_selling_plans) {
+  onReady(() => authorizeShopifyCustomer(offers));
 }
-
-export default initialize;
-
-Object.assign(offers, {
-  setEnvironment,
-  setMerchantId,
-  setAuthUrl,
-  getProductsForPurchasePost,
-  getOptins,
-  clear,
-  addOptinChangedCallback,
-  disableOptinChangedCallbacks,
-  register,
-  previewMode,
-  config,
-  setLocale,
-  addTemplate,
-  setTemplates,
-  setPublicPath,
-  resolveSettings,
-  initialize
-});
-
-window.OG = window.OG || {};
-Object.assign(window.OG, offers);
-Object.assign(offers.initialize, offers);
-
-offersLiveEditor();
-
-// // use this syntax to allow es6 module be called as default function og.offers(...)
-// module.exports = offers.initialize;

package/src/make-api.js

@@ -0,0 +1,195 @@
+import { offersLiveEditor } from '@ordergroove/offers-live-editor';
+import { setStore } from './core/connect';
+import { listenLocalStorageChanges } from './core/localStorage';
+import * as adapters from './core/adapters';
+import * as actions from './core/actions';
+import { ConnectedWhen } from './components/When';
+import { ConnectedOptinButton } from './components/OptinButton';
+import { ConnectedOptoutButton } from './components/OptoutButton';
+import { ConnectedOptinSelect } from './components/OptinSelect';
+import { ConnectedUpsellButton } from './components/UpsellButton';
+import { ConnectedUpsellModal } from './components/UpsellModal';
+import { ConnectedOptinToggle } from './components/OptinToggle';
+import { ConnectedOptinStatus } from './components/OptinStatus';
+import { ConnectedText } from './components/Text';
+import { ConnectedIncentiveText } from './components/IncentiveText';
+import { ConnectedSelectFrequency } from './components/SelectFrequency';
+import { ConnectedNextUpcomingOrder } from './components/NextUpcomingOrder';
+import { ConnectedOffer } from './components/Offer';
+import { Modal } from './components/Modal';
+import { Select } from './components/Select';
+import { Tooltip } from './components/Tooltip';
+import { ConnectedFrequencyStatus } from './components/FrequencyStatus';
+import * as testMode from './test-mode';
+import { api } from './core/api';
+import { environment, offer } from './core/reducer';
+import { DEFAULT_OFFER_MODULE, RECEIVE_PRODUCT_PLANS, SETUP_CART, SETUP_PRODUCT } from './core/constants';
+import ConnectedPrice from './components/Price';
+import { safeProductId } from './core/utils';
+
+export default function makeApi(store) {
+  testMode.enable();
+
+  setStore(store);
+
+  try {
+    customElements.define('og-when', ConnectedWhen);
+    customElements.define('og-text', ConnectedText);
+    customElements.define('og-incentive-text', ConnectedIncentiveText);
+    customElements.define('og-offer', ConnectedOffer);
+    customElements.define('og-select-frequency', ConnectedSelectFrequency);
+    customElements.define('og-optout-button', ConnectedOptoutButton);
+    customElements.define('og-optin-toggle', ConnectedOptinToggle);
+    customElements.define('og-optin-status', ConnectedOptinStatus);
+    customElements.define('og-optin-button', ConnectedOptinButton);
+    customElements.define('og-optin-select', ConnectedOptinSelect);
+    customElements.define('og-upsell-button', ConnectedUpsellButton);
+    customElements.define('og-frequency-status', ConnectedFrequencyStatus);
+    customElements.define('og-modal', Modal);
+    customElements.define('og-select', Select);
+    customElements.define('og-tooltip', Tooltip);
+    customElements.define('og-upsell-modal', ConnectedUpsellModal);
+    customElements.define('og-next-upcoming-order', ConnectedNextUpcomingOrder);
+    customElements.define('og-price', ConnectedPrice);
+  } catch (err) {
+    console.info('OG WebComponents already registered, skipping.');
+  }
+
+  // // use this syntax to allow es6 module be called as default function og.offers(...)
+  // module.exports = offers.initialize;
+  let isReady = false;
+  const offers = {
+    store,
+    isReady: () => isReady,
+    setEnvironment(e) {
+      store.dispatch(actions.setEnvironment(e));
+      return this;
+    },
+    setMerchantId(m) {
+      store.dispatch(actions.setMerchantId(m));
+      return this;
+    },
+    setAuthUrl(authUrl) {
+      store.dispatch(actions.setAuthUrl(authUrl));
+      return this;
+    },
+    getProductsForPurchasePost(productIds = []) {
+      return adapters.getProductsForPurchasePost(store.getState(), productIds);
+    },
+    getOptins(productIds = []) {
+      return adapters.getProductsForPurchasePost(store.getState(), productIds);
+    },
+    clear() {
+      store.dispatch(actions.checkout());
+    },
+    addOptinChangedCallback(fn) {
+      if (typeof fn === 'function') document.addEventListener('optin-changed', e => fn(e.detail));
+    },
+    disableOptinChangedCallbacks() {
+      document.addEventListener('optin-changed', e => e.stopPropagation(), true);
+    },
+
+    register() {
+      /* noop */
+    },
+    previewMode(set) {
+      window.og = window.og || {};
+      if (set === false) {
+        delete window.og;
+      } else {
+        window.og.previewMode = true;
+      }
+      return this;
+    },
+    config(configuration) {
+      store.dispatch(actions.setConfig(configuration));
+      return this;
+    },
+    setLocale(locale) {
+      store.dispatch(actions.setLocale(locale));
+      return this;
+    },
+    addTemplate(tagName, content, configOption) {
+      store.dispatch(actions.addTemplate(tagName, content, configOption));
+      return this;
+    },
+    /**
+     * templates object where keys are selectors and values are content
+     */
+    setTemplates(templates) {
+      store.dispatch(actions.setTemplates(templates));
+      return this;
+    },
+
+    setPublicPath(publicPath) {
+      return this;
+    },
+
+    resolveSettings(merchantId, env, settings, storeInstance = store) {
+      if (merchantId && env && settings) {
+        let products = [];
+        if (settings.product) {
+          products.push(settings.product);
+        } else if (settings.cart && Array.isArray(settings.cart.products)) {
+          products = products.concat(settings.cart.products);
+        }
+        const { apiUrl } = environment({}, actions.setEnvironment(env));
+        const { sessionId } = storeInstance.getState();
+        if (sessionId) {
+          products.forEach(product => {
+            const id = safeProductId(product);
+            api.fetchOffer(apiUrl, merchantId, sessionId, `${id}`, DEFAULT_OFFER_MODULE);
+          });
+        }
+
+        if (settings.product_discounts && typeof settings.product_discounts === 'object') {
+          storeInstance.dispatch({ type: RECEIVE_PRODUCT_PLANS, payload: settings.product_discounts });
+        }
+      }
+    },
+
+    /**
+     * Initialize OG object
+     * @param {*} merchantId
+     * @param {*} env
+     * @param {*} authUrl
+     */
+    initialize(merchantId, env, authUrl) {
+      // settings resolves once, before anything.
+      if (!isReady) offers.resolveSettings(merchantId, env, window.og_settings, store);
+
+      const state = store.getState();
+      // dont re-trigger actions if value is the same. allowing set new authurl only
+      if (merchantId && merchantId !== state.merchantId) offers.setMerchantId(merchantId);
+      if (env && env !== state.environment?.name) offers.setEnvironment(env);
+      // allow set new authUrl
+      if (authUrl) offers.setAuthUrl(authUrl);
+
+      if (isReady) {
+        console.warn('og.offers has been initialized already. Skipping.');
+      } else {
+        window.addEventListener('storage', listenLocalStorageChanges(store));
+        store.dispatch(actions.requestSessionId());
+      }
+
+      if (arguments.length === 3) {
+        // fetch auth is not there already
+        if (!store.getState().auth?.ts) {
+          store.dispatch(actions.fetchAuth());
+        }
+      }
+
+      isReady = true;
+
+      return this;
+    }
+  };
+
+  window.OG = window.OG || {};
+  Object.assign(window.OG, offers);
+  Object.assign(offers.initialize, offers);
+
+  offersLiveEditor();
+
+  return offers;
+}

package/src/platform.ts

@@ -0,0 +1,9 @@
+import { getMainJs } from './core/utils';
+
+const script = getMainJs();
+
+export default {
+  shopify: typeof script?.dataset.shopifySellingPlans !== 'undefined',
+  // detect in the frontend if we should use shopify selling plans or not
+  shopify_selling_plans: typeof script?.dataset.shopifySellingPlans !== 'undefined'
+};