@buddy-technology/offer-component 0.3.2 → 1.0.0

package/tsconfig.eslint.json

@@ -0,0 +1,12 @@
+{
+  "extends": "./tsconfig.json",
+  "include": [
+    "**/*.ts",
+    "**/*.js",
+    "**/*.tsx",
+    "**/*.jsx",
+    ".eslintrc.js",
+    "release.config.js",
+    "setupTests.ts",
+  ],
+}

package/API.md

@@ -1,174 +0,0 @@
-## Functions
-
-<dl>
-<dt><a href="#BuddyOfferElement">BuddyOfferElement(options)</a> ⇒ <code><a href="#BuddyOfferElementProps">FunctionComponent.&lt;BuddyOfferElementProps&gt;</a></code></dt>
-<dd></dd>
-</dl>
-
-## Typedefs
-
-<dl>
-<dt><a href="#DataObject">DataObject</a> : <code>Object</code></dt>
-<dd></dd>
-<dt><a href="#AddToCartFunction">AddToCartFunction</a> ⇒ <code><a href="#DataObject">DataObject</a></code></dt>
-<dd><p>A callback to be called with a payload object when users opt into the offer.</p>
-</dd>
-<dt><a href="#RemoveFromCartFunction">RemoveFromCartFunction</a> ⇒ <code><a href="#DataObject">DataObject</a></code></dt>
-<dd><p>A callback to be called with a payload object when users opt out of the offer.</p>
-</dd>
-<dt><a href="#OverridesObject">OverridesObject</a> : <code>Object</code></dt>
-<dd></dd>
-<dt><a href="#ThemeObject">ThemeObject</a> : <code>Object</code></dt>
-<dd></dd>
-<dt><a href="#LogoOverride">LogoOverride</a> : <code>Object</code></dt>
-<dd></dd>
-<dt><a href="#EventObject">EventObject</a> : <code>Object</code></dt>
-<dd></dd>
-<dt><a href="#OnUserEventCallback">OnUserEventCallback</a> : <code>function</code></dt>
-<dd></dd>
-<dt><a href="#BuddyOfferElementProps">BuddyOfferElementProps</a> : <code>Object</code></dt>
-<dd></dd>
-</dl>
-
-<a name="BuddyOfferElement"></a>
-
-## BuddyOfferElement(options) ⇒ [<code>FunctionComponent.&lt;BuddyOfferElementProps&gt;</code>](#BuddyOfferElementProps)
-**Kind**: global function  
-
-| Param | Type |
-| --- | --- |
-| options | [<code>BuddyOfferElementProps</code>](#BuddyOfferElementProps) | 
-
-<a name="DataObject"></a>
-
-## DataObject : <code>Object</code>
-**Kind**: global typedef  
-**Properties**
-
-| Name | Type | Description |
-| --- | --- | --- |
-| [customer] | <code>Object</code> | customer data |
-| [policy] | <code>Object</code> | policy data |
-
-<a name="AddToCartFunction"></a>
-
-## AddToCartFunction ⇒ [<code>DataObject</code>](#DataObject)
-A callback to be called with a payload object when users opt into the offer.
-
-**Kind**: global typedef  
-**Returns**: [<code>DataObject</code>](#DataObject) - the policy payload  
-<a name="RemoveFromCartFunction"></a>
-
-## RemoveFromCartFunction ⇒ [<code>DataObject</code>](#DataObject)
-A callback to be called with a payload object when users opt out of the offer.
-
-**Kind**: global typedef  
-**Returns**: [<code>DataObject</code>](#DataObject) - the policy payload  
-<a name="OverridesObject"></a>
-
-## OverridesObject : <code>Object</code>
-**Kind**: global typedef  
-**Properties**
-
-| Name | Type | Description |
-| --- | --- | --- |
-| [webFonts] | <code>Array.&lt;String&gt;</code> | array of url strings linking to web fonts. |
-| [styles] | <code>Object</code> | Object Styles object for overriding any css. |
-| [colors] | <code>Object</code> | Object for overriding individual color options. |
-
-<a name="ThemeObject"></a>
-
-## ThemeObject : <code>Object</code>
-**Kind**: global typedef  
-**Properties**
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| [baseTheme] | <code>String</code> | <code>&#x27;base&#x27;</code> | The base theme to style with. Can be used simply as a started and overwritten. |
-| [palette] | <code>String</code> | <code>&#x27;base&#x27;</code> | The base color scheme to style with. Can be used simply as a started and overwritten. |
-| [overrides] | [<code>OverridesObject</code>](#OverridesObject) |  |  |
-
-**Example**  
-```js
-const theme = {
-	baseTheme: 'base',
-		palette: 'buddy',
-		overrides: {
-			webFonts: [
-				'https://fonts.googleapis.com/css2?family=Rubik:wght@700&display=swap',
-			],
-			styles: {
-				h1: {
-					color: 'var(--color-text-primary)',
-					fontFamily: 'Rubik, sans-serif',
-					fontSize: '2rem',
-					'@media (min-width: 992px)': {
-						fontSize: '3rem',
-					},
-					'&:hover': {
-						boxShadow: 'none',
-						backgroundColor: '#FBF9EF',
-					},
-				},
-				body: { color: '#0A242D' },
-				'.input-text': {
-					border: 'none',
-					color: '#333333',
-				},
-			},
-			colors: { textPrimary: '#0A242D' },
-		},
-	};
-```
-<a name="LogoOverride"></a>
-
-## LogoOverride : <code>Object</code>
-**Kind**: global typedef  
-**Properties**
-
-| Name | Type | Description |
-| --- | --- | --- |
-| url | <code>String</code> | destination url when users click the trust badge |
-| src | <code>String</code> | src of the img for displaying the trust badge |
-| [alt] | <code>String</code> | alt text for trust badge image |
-
-<a name="EventObject"></a>
-
-## EventObject : <code>Object</code>
-**Kind**: global typedef  
-
-| Param | Type | Description |
-| --- | --- | --- |
-| eventType | <code>string</code> | the type of user event (eg:'onCheckout') |
-| data | <code>object</code> | data object related to the user event. |
-| data.timestamp | <code>object</code> | timestamp of the event. All events have a timestamp property. |
-
-<a name="OnUserEventCallback"></a>
-
-## OnUserEventCallback : <code>function</code>
-**Kind**: global typedef  
-
-| Param | Type | Description |
-| --- | --- | --- |
-| type | [<code>EventObject</code>](#EventObject) | the type of user event (eg:'onCheckout') |
-
-<a name="BuddyOfferElementProps"></a>
-
-## BuddyOfferElementProps : <code>Object</code>
-**Kind**: global typedef  
-**Properties**
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| ion | <code>String</code> |  | The ion id for the offering. |
-| partnerID | <code>String</code> |  | The partner ID required for instantiating the Offer |
-| [stage] | <code>String</code> | <code>&quot;STAGING&quot;</code> | toggle's the environment for the Offer Component. Defaults to STAGING. Must be set to "PRODUCTION" before going live. |
-| [viewType] | <code>String</code> | <code>&quot;paginated&quot;</code> | establishes how the offer should display to the user. One of: 'paginated', 'single-form' or 'offer-only.' |
-| [theme] | [<code>ThemeObject</code>](#ThemeObject) |  | theming object for customizing offer component's styles |
-| [data] | [<code>DataObject</code>](#DataObject) |  | Any customer or policy data to pre-fill the offer with. Refer to your individual ION for data structure. |
-| [onUserEvent] | [<code>OnUserEventCallback</code>](#OnUserEventCallback) |  | callback function for tracking user behavioral data. Triggers on user interactions such as input focus/blur, in-app navigation, etc. Refer to the docs for more details. |
-| [onAddToCart] | [<code>AddToCartFunction</code>](#AddToCartFunction) |  | callback function triggered when users opt into an offer-only offer. |
-| [onRemoveFromCart] | [<code>RemoveFromCartFunction</code>](#RemoveFromCartFunction) |  | callback function triggered when users opt out of an offer-only offer. |
-| [includeCheckout] | <code>boolean</code> |  | toggles whether or not to display the card capture checkout view. Defaults to true. When false, an AddToCart callback must be provided. |
-| [logoOverride] | [<code>LogoOverride</code>](#LogoOverride) |  | object for overriding Buddy's trust badge. |
-

package/dist/util.js

@@ -1,252 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.updateOffer = exports.loadScript = exports.findScript = void 0;
-
-require("core-js/modules/es.array.includes.js");
-
-require("core-js/modules/es.string.trim.js");
-
-require("core-js/modules/es.array.reduce.js");
-
-require("core-js/modules/es.regexp.exec.js");
-
-require("core-js/modules/es.regexp.test.js");
-
-require("core-js/modules/es.promise.js");
-
-require("core-js/modules/es.string.includes.js");
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-const EXISTING_SCRIPT_MESSAGE = 'Buddy Offer Script is already loaded.';
-const SCRIPTS = {
-  LOCAL: {
-    URL: 'http://localhost:8008/index.js',
-    REGEX: /^http:\/\/localhost:8008\/index\.js\/?(\?.*)?$/
-  },
-  // TODO: Delete this in favor of "testing", once we're sure nothing is using it.
-  DEVELOPMENT: {
-    URL: 'https://js.buddy.insure/v2/dev/index.js',
-    REGEX: /^https:\/\/js\.buddy\.insure\/v2\/dev\/index\.js\/?(\?.*)?$/
-  },
-  TESTING: {
-    URL: 'https://js.buddy.insure/v2/testing/index.js',
-    REGEX: /^https:\/\/js\.buddy\.insure\/v2\/testing\/index\.js\/?(\?.*)?$/
-  },
-  STAGING: {
-    URL: 'https://js.buddy.insure/v2/staging/index.js',
-    REGEX: /^https:\/\/js\.buddy\.insure\/v2\/staging\/index\.js\/?(\?.*)?$/
-  },
-  PRODUCTION: {
-    URL: 'https://js.buddy.insure/v2/index.js',
-    REGEX: /^https:\/\/js\.buddy\.insure\/v2\/index\.js\/?(\?.*)?$/
-  }
-};
-const STAGES = Object.keys(SCRIPTS);
-/**
- * @type {Object}
- * @property {string} stage
- */
-
-const defaultOptions = {
-  stage: 'STAGING'
-};
-/**
- * @function isEmptyOrNil
- * @param  {*} value
- * @returns {Boolean}
- */
-
-const isEmptyOrNil = value => {
-  const isNil = val => [undefined, null].includes(val);
-
-  const isEmptyStr = str => typeof str === 'string' && str.trim().length === 0;
-
-  const isEmptyObjOrArr = obj => typeof obj === 'object' && obj.length === undefined && Object.keys(obj).length === 0 || Array.isArray(obj) && obj.length === 0;
-
-  return isNil(value) || isEmptyStr(value) || isEmptyObjOrArr(value);
-};
-/**
- * @param  {Array<String>} propsToCheck
- * @param  {Object} obj
- * @returns {(null | String)}
- */
-
-
-const validatePropertiesOfObject = (propsToCheck, obj) => {
-  const emptyProps = propsToCheck.filter(prop => isEmptyOrNil(obj[prop]));
-
-  if (emptyProps.length) {
-    const displayMissingProps = emptyProps.reduce((prev, current, i) => {
-      const isLastEl = i === emptyProps.length - 1;
-      return isLastEl ? "".concat(prev).concat(current, ".") : "".concat(prev).concat(current, ", ");
-    }, '');
-    return "The following props are required: ".concat(displayMissingProps);
-  }
-
-  return null;
-};
-/**
- * @function findScript
- * @param {String} stage
- * @returns {(HTMLElement | undefined)}
- */
-
-
-const findScript = function findScript() {
-  let stage = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultOptions.stage;
-  const {
-    URL,
-    REGEX
-  } = SCRIPTS[stage];
-  const scripts = Array.from(document.querySelectorAll("script[src^=\"".concat(URL, "\"]")));
-  const matchedScript = scripts.find(_ref => {
-    let {
-      src
-    } = _ref;
-    return REGEX.test(src);
-  });
-  return matchedScript;
-};
-/**
- * @function updateOffer
- * @param  {Object} options
- */
-
-
-exports.findScript = findScript;
-
-const updateOffer = options => {
-  if (window.Buddy) {
-    try {
-      window.Buddy.updateOffer(options);
-    } catch (error) {
-      // eslint-disable-next-line no-console
-      console.error(error);
-    }
-  }
-};
-/**
- * @function createOffer
- * @param  {Object} options
- */
-
-
-exports.updateOffer = updateOffer;
-
-const createOffer = options => {
-  if (window.Buddy) {
-    try {
-      window.Buddy.createOffer(options);
-    } catch (error) {
-      // eslint-disable-next-line no-console
-      console.error(error);
-    }
-  }
-};
-/**
- * @function injectScript
- * @param  {Object} options
- * @returns {HTMLElement}
- */
-
-
-const injectScript = options => {
-  const finalOptions = _objectSpread(_objectSpread({}, defaultOptions), options);
-
-  const script = document.createElement('script');
-  script.src = "".concat(SCRIPTS[finalOptions.stage].URL);
-  document.body.appendChild(script);
-
-  script.onload = () => createOffer(finalOptions);
-
-  return script;
-};
-/**
- * @type {(Promise | null)}
- */
-
-
-let scriptPromise = null;
-/**
- * @function loadScript
- * @param  {Object} options
- * @returns {Promise}
- */
-
-const loadScript = options => {
-  // Ensure that we only attempt to script once
-  if (scriptPromise !== null) {
-    return scriptPromise;
-  }
-
-  scriptPromise = new Promise((resolve, reject) => {
-    if (typeof window === 'undefined') {
-      // Resolve to null when imported server side. This makes the module
-      // safe to import in an isomorphic code base.
-      resolve(null);
-      return;
-    }
-
-    if (window.Buddy) {
-      // eslint-disable-next-line no-console
-      console.warn(EXISTING_SCRIPT_MESSAGE);
-      resolve(window.Buddy);
-      return;
-    }
-
-    try {
-      const requiredProps = ['ion', 'partnerID'];
-      const missingRequiredProps = validatePropertiesOfObject(requiredProps, options);
-
-      if (missingRequiredProps) {
-        reject(new Error(missingRequiredProps));
-        return;
-      }
-
-      if (!(options !== null && options !== void 0 && options.stage)) {
-        // eslint-disable-next-line no-console
-        console.warn("No stage passed to BuddyOfferElement. Using default stage: ".concat(defaultOptions.stage));
-      } // If stage is passed, ensure it is one of the prescribed options.
-
-
-      if (options !== null && options !== void 0 && options.stage && !STAGES.includes(options.stage)) {
-        const msg = "The stage prop must be one of: [".concat(STAGES.join(' , '), "], but received \"").concat(options.stage, ".\"");
-        reject(new Error(msg));
-        return;
-      }
-
-      let script = findScript(options === null || options === void 0 ? void 0 : options.stage);
-
-      if (script) {
-        // eslint-disable-next-line no-console
-        console.warn(EXISTING_SCRIPT_MESSAGE);
-      } else if (!script) {
-        script = injectScript(options);
-      }
-
-      script.addEventListener('load', () => {
-        if (window.Buddy) {
-          resolve(window.Buddy);
-        } else {
-          reject(new Error('Buddy Offer Element not available'));
-        }
-      });
-      script.addEventListener('error', () => {
-        reject(new Error('Failed to load Buddy Offer Element'));
-      });
-    } catch (error) {
-      reject(error);
-    }
-  });
-  return scriptPromise;
-};
-
-exports.loadScript = loadScript;

package/lib/types.d.ts

@@ -1,144 +0,0 @@
-export = BuddyOfferElement
-
-/**
- * @property [customer] - customer data
- * @property [policy] - policy data
- */
-declare type DataObject = {
-    customer?: any;
-    policy?: any;
-};
-
-/**
- * A callback to be called with a payload object when users opt into the offer.
- */
-declare type AddToCartFunction = () => DataObject;
-
-/**
- * A callback to be called with a payload object when users opt out of the offer.
- */
-declare type RemoveFromCartFunction = () => DataObject;
-
-/**
- * @property [webFonts] - array of url strings linking to web fonts.
- * @property [styles] - Object Styles object for overriding any css.
- * @property [colors] - Object for overriding individual color options.
- */
-declare type OverridesObject = {
-    webFonts?: String[];
-    styles?: any;
-    colors?: any;
-};
-
-/**
- * @example
- * const theme = {
- * 	baseTheme: 'base',
- * 		palette: 'buddy',
- * 		overrides: {
- * 			webFonts: [
- * 				'https://fonts.googleapis.com/css2?family=Rubik:wght@700&display=swap',
- * 			],
- * 			styles: {
- * 				h1: {
- * 					color: 'var(--color-text-primary)',
- * 					fontFamily: 'Rubik, sans-serif',
- * 					fontSize: '2rem',
- * 					'@media (min-width: 992px)': {
- * 						fontSize: '3rem',
- * 					},
- * 					'&:hover': {
- * 						boxShadow: 'none',
- * 						backgroundColor: '#FBF9EF',
- * 					},
- * 				},
- * 				body: { color: '#0A242D' },
- * 				'.input-text': {
- * 					border: 'none',
- * 					color: '#333333',
- * 				},
- * 			},
- * 			colors: { textPrimary: '#0A242D' },
- * 		},
- * 	};
- * @property [baseTheme = 'base'] - The base theme to style with. Can be used simply as a started and overwritten.
- * @property [palette = 'base'] - The base color scheme to style with. Can be used simply as a started and overwritten.
- */
-declare type ThemeObject = {
-    baseTheme?: string;
-    palette?: string;
-    overrides?: OverridesObject;
-};
-
-/**
- * @property url - destination url when users click the trust badge
- * @property src - src of the img for displaying the trust badge
- * @property [alt] - alt text for trust badge image
- */
-declare type LogoOverride = {
-    url: string;
-    src: string;
-    alt?: string;
-};
-
-/**
- * @param eventType - the type of user event (eg:'onCheckout')
- * @param data - data object related to the user event.
- * @param data.timestamp - timestamp of the event. All events have a timestamp property.
- */
-declare type EventObject = any;
-
-/**
- * @param type - the type of user event (eg:'onCheckout')
- */
-declare type OnUserEventCallback = (type: EventObject) => void;
-
-/**
- * @property ion - The ion id for the offering.
- * @property partnerID - The partner ID required for instantiating the Offer
- * @property [stage = STAGING] - toggle's the environment for the Offer Component. Defaults to STAGING. Must be set to PRODUCTION before going live.
- * @property [viewType = paginated] - establishes how the offer should display to the user. One of: 'paginated', 'single-form' or 'offer-only.'
- * @property [theme] - theming object for customizing offer component's styles
- * @property [data] - Any customer or policy data to pre-fill the offer with. Refer to your individual ION for data structure.
- * @property [onUserEvent] - callback function for tracking user behavioral data. Triggers on user interactions such as input focus/blur, in-app navigation, etc. Refer to the docs for more details.
- * @property [onAddToCart] - callback function triggered when users opt into an offer-only offer.
- * @property [onRemoveFromCart] - callback function triggered when users opt out of an offer-only offer.
- * @property [includeCheckout] - toggles whether or not to display the card capture checkout view. Defaults to true. When false, an AddToCart callback must be provided.
- * @property [logoOverride] - object for overriding Buddy's trust badge.
- */
-declare type BuddyOfferElementProps = {
-    ion: string;
-    partnerID: string;
-    stage?: string;
-    viewType?: string;
-    theme?: ThemeObject;
-    data?: DataObject;
-    onUserEvent?: OnUserEventCallback;
-    onAddToCart?: AddToCartFunction;
-    onRemoveFromCart?: RemoveFromCartFunction;
-    includeCheckout?: boolean;
-    logoOverride?: LogoOverride;
-};
-
-declare function BuddyOfferElement(options: BuddyOfferElementProps): FunctionComponent<BuddyOfferElementProps>;
-
-declare const defaultOptions: {
-    stage: string;
-};
-
-declare function isEmptyOrNil(value: any): boolean;
-
-declare function validatePropertiesOfObject(propsToCheck: String[], obj: any): null | string;
-
-declare function findScript(stage: string): HTMLElement | undefined;
-
-declare function updateOffer(options: any): void;
-
-declare function createOffer(options: any): void;
-
-declare function injectScript(options: any): HTMLElement;
-
-declare var scriptPromise: Promise | null;
-
-declare function loadScript(options: any): Promise;
-