@buddy-technology/offer-component 0.2.5

package/API.md

@@ -0,0 +1,132 @@
+## 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="#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="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 |
+| [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.' |
+| [data] | [<code>DataObject</code>](#DataObject) |  | Any customer or policy data to pre-fill the offer with. Refer to your individual ION for data structure. |
+| [onAddToCart] | [<code>AddToCartFunction</code>](#AddToCartFunction) |  | - |
+| [onRemoveFromCart] | [<code>RemoveFromCartFunction</code>](#RemoveFromCartFunction) |  |  |
+| [theme] | [<code>ThemeObject</code>](#ThemeObject) |  |  |
+

package/CHANGELOG.md

@@ -0,0 +1,78 @@
+# CHANGELOG 
+
+### v0.2.5  
+2022-08-09  
+ 
+- remove pre-release tags    
+---  
+  
+
+### v0.2.4  
+2022-08-09  
+ 
+- making public    
+---  
+  
+
+### v0.2.2  
+2022-07-28  
+ 
+- added error catch for stage enums   
+- few more console warnings for users   
+- test-app to use DEV stage and buddytest partner    
+---  
+  
+
+### v0.2.1  
+2022-07-27  
+ 
+- moved unneeded deps into devDeps and peerDeps to not cause react conflicts   
+- added a catch for a non-enum stage being passed    
+---  
+  
+
+### v0.1.12  
+2022-05-13  
+ 
+- Removed crossOrigin    
+---  
+  
+
+### v0.1.11  
+2022-05-13  
+ 
+- The crossOrigin thing    
+---  
+  
+
+### v0.1.10  
+2022-05-13  
+ 
+- Version number change    
+---  
+  
+
+### v0.1.9  
+2022-05-13  
+ 
+- Added crossDomain to script tag    
+---  
+  
+
+### v0.1.8  
+2022-05-11  
+ 
+- docs    
+---  
+  
+
+### v0.1.7  
+2022-05-11  
+ 
+- fix build script   
+- fix gh workflow   
+- add changelog   
+- add env urls   
+- check for required props in loadScript    
+---  
+ 

package/README.md

@@ -0,0 +1,295 @@
+# Buddy Offer Component
+---
+React component for adding [Buddy's](https://buddy.insure) Insurance Gateway
+
+## Requirements
+Contact [Buddy](mailto:partners@buddy.insure) to obtain a `partnerID` and compatible `ions` for your specific use case.
+
+---
+## Installation
+Install it from npm and include it in your React build process
+
+`npm install @buddy-technology/offer-component`
+  or 
+`yarn add @buddy-technology/offer-component`
+
+---
+## Basic Usage
+```javascript
+import React from 'react';
+import BuddyOfferElement from '@buddy-technology/offer-component';
+
+function App() {
+  return (
+    <div id="app">
+      <h1>My App</h1>
+      <BuddyOfferElement ion="MY_ION" partnerID="my-partner-id" stage="staging" />
+    </div>
+  );
+}
+export default App;
+```
+---
+## Props
+
+| Option Name | Type | Default | Description
+| --- | --- | --- | --- |
+| *partnerID | string | | The partnerID assigned to you from Buddy |
+| *ion | string | | The ion ID for the product to be presented |
+| stage | enum | "STAGING" | One of: `"STAGING"`, `"PRODUCTION"`. Set to `"STAGING"` (default) for testing and development. |
+| viewType | enum | `"paginated"` | Sets how the offer element is displayed. One of: `"paginated"`, `"single-form"`, `"offer-only"`. _See [View types](#view-types) for details._|
+| includeCheckout | boolean | `true` | Toggles whether to render the secure checkout.  |
+| onAddToCart | function | | The callback fired when a user opts into an offer. See Buddy's Partner API docs for details on how to complete the transaction.|
+| onRemoveCart | function | | The callback fired when a user opts out of the offer. |
+| data | object | | Customer or policy data to pre-load the offer with. Refer to specific ION documentation for the data structure.  |
+| theme | object | |The [theme](#styling) object for passing in styles and color palettes |
+_*required_
+
+---
+## View Types
+
+Buddy's Offer Element comes in three different view types:
+
+- __paginated__ (default) - A paginated form where users click through to the next section.
+- __single form__ - A single form where all fields are displayed in the same, scrollable view.
+- __offer only__ - Hide all the form fields and only display the insurance offer with the quote. Using this mode requires collecting all necessary data and a payment integration (See Buddy's [Partner API docs](https://buddyinsurance.stoplight.io/docs/partner-api-documentation/ZG9jOjE1NDc1MzQx)).
+
+---
+## Checkout
+### For client-side only apps
+
+The embed widget's default mode includes a full checkout. Customers can go through the entire flow through to a secure purchase and policies will be delivered directly to their inbox.
+
+To explicitly set the widget to include checkout, set the `includeCheckout` property to `true`.
+### For full stack apps
+
+In server side and full-stack applications where customers are already purchasing other products, it's best to exclude the secure checkout built into the widget so customers can purchase their insurance alongside any other products as part of a single transaction. A backend integration (See Buddy's [Partner API docs](https://buddyinsurance.stoplight.io/docs/partner-api-documentation/ZG9jOjE1NDc1MzQx)) is required in order to complete the transaction.
+
+To use this mode, set `includeCheckout` to `false`, or set viewType to `offer-only`. 
+
+When users opt in, the `onAddToCart` callback is fired with the completed application object. If a user opts out, `onRemoveFromCart` will be called.
+
+```javascript
+import React from 'react';
+import BuddyOfferElement from '@buddy-technology/offer-component';
+
+function App() {
+  const handleAddToCart = (payload) => {
+    console.log(payload)
+  };
+
+  const handleRemoveFromCart = (payload) => {
+    console.log(payload)
+  };
+
+  return (
+    <div id="app">
+      <h1>My App</h1>
+      <BuddyOfferElement
+        ion="MY_ION"
+        partnerID="my-partner-id"
+        viewType="offer-only"
+        onAddToCart={handleAddToCart}
+        onRemoveFromCart={handleRemoveFromCart}
+        stage="PRODUCTION"
+      />
+    </div>
+  );
+}
+export default App;
+```
+---
+## Pre-filling Data
+
+
+It's a best practice to pass in any customer and policy data that has already been collected to optimize user experience. Unless viewType is `offer-only`, users will be able to see and edit any data that is passed.
+
+Data follows the application object structure. Refer to your specific ION (or offering) documentation.
+
+```javascript
+import React from 'react';
+import BuddyOfferElement from '@buddy-technology/offer-component';
+
+function App() {
+  const data = {
+    customer: {
+      firstName: 'customer first name',
+      lastName: 'customer last name',
+      address: {
+        line1: 'street address',
+        city: 'city',
+        state: 'state',
+        zip: 'zip',
+      }
+    },
+    policy: {
+      startDate: '12/31/2022',
+    }
+  };
+
+  return (
+    <div id="app">
+      <h1>My App</h1>
+      <BuddyOfferElement
+        ion="MY_ION"
+        partnerID="my-partner-id"
+        data={data}
+        stage="PRODUCTION"
+      />
+    </div>
+  );
+}
+export default App;
+```
+---
+## Styling
+
+Buddy's offer element supports extensive visual customization, allowing you to seamlessly match the design of your site with the theme prop.
+
+1. Pick a base theme and color palette:
+  Quickly get running by picking the prebuilt theme and palette that most closely resembles your website.
+
+2. Customize even further by adding [overrides](#overrides):
+   Virtually any property can be further customized using [CSS object styling](https://emotion.sh/docs/object-styles).
+
+```javascript
+import React from 'react';
+import BuddyOfferElement from '@buddy-technology/offer-component';
+
+function App() {
+  const customTheme = {
+    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' },
+    },
+  };
+
+  return (
+    <div id="app">
+      <h1>My App</h1>
+      <BuddyOfferElement
+        ion="MY_ION"
+        partnerID="my-partner-id"
+        theme={customTheme}
+        stage="PRODUCTION"
+      />
+    </div>
+  );
+}
+export default App;
+```
+### Base Themes
+
+We currently offer two baseThemes to start with (with more coming soon!) If you plan on doing very extensive overrides, set the baseTheme to `'none'`.
+
+#### Available themes:
+
+`'base`':
+![base_theme.png](https://stoplight.io/api/v1/projects/cHJqOjEwMDA3NA/images/P1s10VpVT64)
+
+`'buddy'`:
+![buddy_theme.png](https://stoplight.io/api/v1/projects/cHJqOjEwMDA3NA/images/ker3veyTXrs)
+
+### Color Palettes
+We currently offer two color palettes to start with (with more coming soon!).
+
+__Base__:
+
+    primary: '#000000',
+    secondary: '#254E70',
+    tertiary: '#848484',
+    negative: '#e45b78',
+    positive: '#A3D9B1',
+    textPrimary: '#000',
+    textSecondary: '848484',
+    backgroundPrimary: '#fff',
+    backgroundSecondary: '#7d8387',
+
+__Buddy__:
+
+	primary: '#DC5648',
+	secondary: '#0A242D99',
+	tertiary: '#46460E33',
+	negative: '#D62719',
+	positive: '#A3D9B1',
+	textPrimary: '#0A242D',
+	textSecondary: '#0A242D99',
+	backgroundPrimary: 'linear-gradient(#D6F1F2, #F8F6D2)',
+	backgroundSecondary: '#FBF9EF',
+
+### Overrides
+
+The overrides object consists of three major properties:
+
+`webFonts`: An array of string urls for web fonts. _Note: if using web fonts, it is still necessary to set the `fontFamily` property on any elements using that particular webfont._
+
+`styles`: A CSS styles object with any CSS overrides on a given theme. Styles will overwrite existing theme styles. Media queries and child selectors can be accessed as a string key name, and nested within a given selector (see the example above). [Component classes](#classes-and-components) can also be manipulated within the styles object.
+
+`colors`: A colors object will override any of the color properties in the table below:
+
+| Key  | Where its used |
+| --- | --- |
+| primary | graphics, call-outs, primary buttons  |
+| secondary | focused borders, accents |
+| tertiary | inactive accents |
+| negative | error messages (note: this is currently set to "accessible red." be mindful of accessibility when overriding this property) |
+| positive | success messages |
+| textPrimary | primary body copy |
+| textSecondary | secondary copy, accents |
+| backgroundPrimary | main background (containers) |
+| backgroundSecondary | secondary backgrounds |
+
+### Classes and Components
+
+Some components can be directly modified by accessing their class names in the theme object. See the full list of component class names below.
+
+```javascript
+  var customTheme = {
+    style: {
+      h1: { fontSize: 36 },
+      '.button-primary': {
+        // custom styles
+      },
+    },
+  };
+
+```
+
+**Available Classes**
+
+- card
+- button-primary
+- button-secondary
+- input-text
+- input-invalid
+- input-select
+- input-label
+- input-label-invalid
+- offer-container
+- field-container
+- view-container
+
+---

package/dist/index.js

@@ -0,0 +1,120 @@
+"use strict";
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("core-js/modules/es.promise.js");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _util = require("./util");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+// eslint-disable-next-line no-unused-vars
+
+/**
+ * @typedef {Object} DataObject
+ * @property {Object} [customer] - customer data
+ * @property {Object} [policy] - policy data
+ */
+
+/**
+ * @typedef {Function} AddToCartFunction
+ * @description A callback to be called with a payload object when users opt into the offer.
+ * @returns {DataObject} the policy payload
+ */
+
+/**
+ * @typedef {Function} RemoveFromCartFunction
+ * @description A callback to be called with a payload object when users opt out of the offer.
+ * @returns {DataObject} the policy payload
+ */
+
+/**
+ * @typedef {Object} OverridesObject
+ * @property {Array<String>} [webFonts] - array of url strings linking to web fonts.
+ * @property {Object} [styles] - Object Styles object for overriding any css.
+ * @property {Object} [colors] - Object for overriding individual color options.
+ */
+
+/**
+ * @typedef {Object} ThemeObject
+ * @property {String} [baseTheme='base'] - The base theme to style with. Can be used simply as a started and overwritten.
+ * @property {String} [palette='base'] - The base color scheme to style with. Can be used simply as a started and overwritten.
+ * @property {OverridesObject} [overrides]
+ * @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' },
+ * 		},
+ * 	};
+ */
+
+/**
+ * @typedef {Object} BuddyOfferElementProps
+ * @property {String} ion - The ion id for the offering.
+ * @property {String} partnerID - The partner ID required for instantiating the Offer
+ * @property {String} [viewType="paginated"] - establishes how the offer should display to the user. One of: 'paginated', 'single-form' or 'offer-only.'
+ * @property {DataObject} [data] - Any customer or policy data to pre-fill the offer with. Refer to your individual ION for data structure.
+ * @property {AddToCartFunction} [onAddToCart] -
+ * @property {RemoveFromCartFunction} [onRemoveFromCart]
+ * @property {ThemeObject} [theme]
+ */
+
+/**
+ * @function BuddyOfferElement
+ * @param {BuddyOfferElementProps} options
+ * @returns {FunctionComponent<BuddyOfferElementProps>}
+ */
+function BuddyOfferElement(options) {
+  const getScript = async () => {
+    try {
+      await (0, _util.loadScript)(options);
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error(error);
+    }
+  };
+
+  getScript();
+  (0, _react.useEffect)(() => {
+    (0, _util.updateOffer)(options);
+  }, [options]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    id: "buddy_offer"
+  });
+}
+
+var _default = BuddyOfferElement;
+exports.default = _default;

package/dist/util.js

@@ -0,0 +1,247 @@
+"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\/?(\?.*)?$/
+  },
+  DEVELOPMENT: {
+    URL: 'https://js.buddy.insure/v2/dev/index.js',
+    REGEX: /^https:\/\/js\.buddy\.insure\/v2\/staging\/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

@@ -0,0 +1,111 @@
+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 ion - The ion id for the offering.
+ * @property partnerID - The partner ID required for instantiating the Offer
+ * @property [viewType = paginated] - establishes how the offer should display to the user. One of: 'paginated', 'single-form' or 'offer-only.'
+ * @property [data] - Any customer or policy data to pre-fill the offer with. Refer to your individual ION for data structure.
+ * @property [onAddToCart] - -
+ */
+declare type BuddyOfferElementProps = {
+    ion: string;
+    partnerID: string;
+    viewType?: string;
+    data?: DataObject;
+    onAddToCart?: AddToCartFunction;
+    onRemoveFromCart?: RemoveFromCartFunction;
+    theme?: ThemeObject;
+};
+
+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;
+

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@buddy-technology/offer-component",
+  "version": "0.2.5",
+  "author": "Buddy Technology",
+  "main": "dist/index.js",
+  "types": "./lib/types.d.ts",
+  "license": "UNLICENSED",
+  "private": false,
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/Buddy-Technology/offer-component.git"
+  },
+  "bugs": {
+    "url": "https://github.com/Buddy-Technology/offer-component/issues"
+  },
+  "homepage": "https://github.com/Buddy-Technology/offer-component#readme",
+  "scripts": {
+    "build": "rm -rf dist && NODE_ENV=production babel src --out-dir dist",
+    "dev": "concurrently \"yarn watch:src\" \"cd test-app && PORT=3006 yarn dev\"",
+    "deploy": "yarn version",
+    "document": "jsdoc2md -c jsdoc.config.json src/index.js > API.md && node createTypesFile",
+    "postversion": "yarn document && yarn build && ./deploy.sh",
+    "watch:src": "rm -rf dist && NODE_ENV=development babel src --out-dir dist --watch",
+    "start": "ESLINT_NO_DEV_ERRORS=true react-scripts start",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.17.10",
+    "@babel/core": "^7.17.10",
+    "@babel/preset-env": "^7.17.10",
+    "concurrently": "^7.3.0",
+    "core-js": "^3.22.4",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-react": "^7.29.4",
+    "jsdoc": "^3.6.10",
+    "jsdoc-to-markdown": "^7.1.1",
+    "jsdoc-tsimport-plugin": "^1.0.5",
+    "react": "^18.1.0",
+    "react-scripts": "5.0.1",
+    "regenerator-runtime": "^0.13.9",
+    "tsd-jsdoc": "^2.5.0"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+  }
+}