@ordergroove/offers 2.24.0 → 2.24.1-alpha-PR-566-5.3

package/src/index.js

@@ -1,169 +1,207 @@
-const { offersLiveEditor } = require('@ordergroove/offers-live-editor');
-
-const { setStore } = require('./core/connect');
-const { getStore } = require('./core/store');
-const { listenLocalStorageChanges } = require('./core/localStorage');
-const adapters = require('./core/adapters');
-const actions = require('./core/actions');
-const { ConnectedWhen } = require('./components/When');
-const { ConnectedOptinButton } = require('./components/OptinButton');
-const { ConnectedOptoutButton } = require('./components/OptoutButton');
-const { ConnectedOptinSelect } = require('./components/OptinSelect');
-const { ConnectedUpsellButton } = require('./components/UpsellButton');
-const { ConnectedUpsellModal } = require('./components/UpsellModal');
-const { ConnectedOptinToggle } = require('./components/OptinToggle');
-const { ConnectedOptinStatus } = require('./components/OptinStatus');
-const { ConnectedText } = require('./components/Text');
-const { ConnectedIncentiveText } = require('./components/IncentiveText');
-const { ConnectedSelectFrequency } = require('./components/SelectFrequency');
-const { ConnectedNextUpcomingOrder } = require('./components/NextUpcomingOrder');
-const { ConnectedOffer } = require('./components/Offer');
-const { Modal } = require('./components/Modal');
-const { Select } = require('./components/Select');
-const { Tooltip } = require('./components/Tooltip');
-const { ConnectedFrequencyStatus } = require('./components/FrequencyStatus');
-const testMode = require('./test-mode');
-const { default: api } = require('./core/api');
-const { environment } = require('./core/reducer');
+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;
-const offers = {
-  setEnvironment(e) {
-    store.dispatch(actions.setEnvironment(e));
-    return offers;
-  },
-  setMerchantId(m) {
-    store.dispatch(actions.setMerchantId(m));
-    return offers;
-  },
-  setAuthUrl(authUrl) {
-    store.dispatch(actions.setAuthUrl(authUrl));
-    return offers;
-  },
-  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() {
-    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);
-    } catch (err) {
-      // eslint-disable-next-line no-console
-      console.log('this?', err);
-    }
-    offers.register = () => 0;
-  },
-  previewMode(set) {
-    window.og = window.og || {};
-    if (set === false) {
-      delete window.og;
-    } else {
-      window.og.previewMode = true;
+
+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);
     }
-    return this;
-  },
-  /**
-   * 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 offers;
+    const { apiUrl } = environment({}, actions.setEnvironment(env));
+    const { sessionId } = storeInstance.getState();
+    if (sessionId) {
+      products.forEach(product => {
+        console.log(product);
+        api.fetchOffer(apiUrl, merchantId, sessionId, `${product}`, 'pdp');
+      });
     }
-    store = getStore();
-
-    const settings = window.og_settings;
-    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 } = store.getState();
-      if (sessionId) {
-        products.forEach(product => api.fetchOffer(apiUrl, merchantId, sessionId, `${product}`, 'pdp'));
-      }
+
+    if (settings.product_x_plans && typeof settings.product_x_plans === 'object') {
+      storeInstance.dispatch({ type: RECEIVE_PRODUCT_PLANS, payload: settings.product_x_plans });
     }
+  }
+}
 
-    setStore(store);
-    if (merchantId) offers.setMerchantId(merchantId);
-    if (env) offers.setEnvironment(env);
-    if (authUrl) offers.setAuthUrl(authUrl);
+/**
+ * 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;
+  }
 
-    window.addEventListener('storage', listenLocalStorageChanges(store));
+  store = getStore();
 
-    if (merchantId && env) {
-      store.dispatch(actions.requestSessionId());
-      store.dispatch(actions.fetchAuth());
-      offers.register();
-    }
+  offers.store = store;
+  offers.resolveSettings(merchantId, env, window.og_settings, store);
 
-    offers.isReady = true;
+  setStore(store);
 
-    return offers;
-  },
+  if (merchantId) offers.setMerchantId(merchantId);
+  if (env) offers.setEnvironment(env);
+  if (authUrl) offers.setAuthUrl(authUrl);
 
-  config(configuration) {
-    store.dispatch(actions.setConfig(configuration));
-    return offers;
-  },
-  setLocale(locale) {
-    store.dispatch(actions.setLocale(locale));
-    return offers;
-  },
-  addTemplate(tagName, content, config) {
-    store.dispatch(actions.addTemplate(tagName, content, config));
-    return offers;
-  },
-  /**
-   * templates object where keys are selectors and values are content
-   */
-  setTemplates(templates) {
-    store.dispatch(actions.setTemplates(templates));
-    return offers;
-  },
-  setPublicPath(publicPath) {
-    return offers;
+  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;
+// // use this syntax to allow es6 module be called as default function og.offers(...)
+// module.exports = offers.initialize;

package/src/init-func-tests.js

@@ -1,4 +1,4 @@
 window.OG_SAVE_TO_LOCAL_TIMEOUT = 1;
 window.merchantId = '12345678901234567890123456789012';
 window.env = 'staging';
-window.og.offers(window.merchantId, window.env, 0);
+window.og.offers.initialize(window.merchantId, window.env, 0);

package/src/init-test.js

@@ -1,3 +1,3 @@
-import og from './index';
+import { initialize } from './index';
 
-og.initialize('some-merchant', 'staging');
+initialize('some-merchant', 'staging');