@ordergroove/offers 2.26.2 → 2.26.3-alpha-PR-593-11.14

package/src/index.js

@@ -1,206 +1,44 @@
-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
- */
-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);
-
-  window.addEventListener('storage', listenLocalStorageChanges(store));
-
-  if (merchantId && env) {
-    store.dispatch(actions.requestSessionId());
-    store.dispatch(actions.fetchAuth());
-    offers.register();
-  }
-
-  offers.isReady = true;
-
-  return 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;
+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';
+
+// detect the
+export const platform = {
+  shopify: !!window.Shopify
+};
+
+export const flags = {
+  // detect in the frontend if we should use shopify selling plans or not
+  selling_plans: !!window.Shopify
+};
+
+export const store = makeStore(
+  ...(platform.shopify && flags.selling_plans ? [shopifyReducer, shopifyMiddleware] : [defaultReducer])
+);
+
+export const offers = makeApi(store);
+
+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 default offers.initialize;

package/src/make-api.js

@@ -0,0 +1,187 @@
+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 { RECEIVE_PRODUCT_PLANS, SETUP_CART, SETUP_PRODUCT } from './core/constants';
+import ConnectedPrice from './components/Price';
+
+export default function makeApi(store) {
+  testMode.enable();
+
+  setStore(store);
+
+  // // use this syntax to allow es6 module be called as default function og.offers(...)
+  // module.exports = offers.initialize;
+
+  const offers = {
+    store,
+    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 => {
+            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
+     */
+    initialize(merchantId, env, authUrl) {
+      if (offers.isReady) {
+        console.warn('og.offers has been initialized already. Skipping.');
+        return this;
+      }
+
+      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.');
+      }
+
+      offers.store = store;
+      offers.resolveSettings(merchantId, env, window.og_settings, store);
+
+      if (merchantId) offers.setMerchantId(merchantId);
+      if (env) offers.setEnvironment(env);
+      if (authUrl) offers.setAuthUrl(authUrl);
+
+      window.addEventListener('storage', listenLocalStorageChanges(store));
+
+      if (merchantId && env) {
+        store.dispatch(actions.requestSessionId());
+        store.dispatch(actions.fetchAuth());
+      }
+
+      offers.isReady = true;
+
+      return this;
+    }
+  };
+
+  window.OG = window.OG || {};
+  Object.assign(window.OG, offers);
+  Object.assign(offers.initialize, offers);
+
+  offersLiveEditor();
+
+  return offers;
+}