@buddy-technology/offer-component 0.3.3 → 1.0.0

package/CHANGELOG.md

@@ -1,3 +1,22 @@
+# @buddy-technology/offer-component-v1.0.0 (2023-12-01)
+
+
+### Bug Fixes
+
+* eslint ts set up ([28438bd](https://github.com/Buddy-Technology/ion-to-react/commit/28438bd5d8709a653bbacdbc4e58044b9229d2b4))
+* ts interfaces ([69f26ae](https://github.com/Buddy-Technology/ion-to-react/commit/69f26ae6e09ce086be15d331d2e49bc3b22132ba))
+* typo in readme ([7969747](https://github.com/Buddy-Technology/ion-to-react/commit/7969747aff3a697edc41b912844bb44134ae7de1))
+* update repo field in package jsons ([9a2b638](https://github.com/Buddy-Technology/ion-to-react/commit/9a2b638de3dbbac4d3af649d8410b5249885720c))
+
+
+### Features
+
+* convert to typescript ([4d27be6](https://github.com/Buddy-Technology/ion-to-react/commit/4d27be6f7020394b32808e442558eea3367e810e))
+* expose hook for loading configs ([81bd708](https://github.com/Buddy-Technology/ion-to-react/commit/81bd7089ae3f3f13da3f3179a1882882e39ab84b))
+* map config inside the Buddy obj ([fda8376](https://github.com/Buddy-Technology/ion-to-react/commit/fda8376cd44e10195b388e43a01cb1eced3d7320))
+* offer component and example app added ([e72aa94](https://github.com/Buddy-Technology/ion-to-react/commit/e72aa94b22053f94f753bed6d0a26ebbad6fa60a))
+* test-utils ([7d44088](https://github.com/Buddy-Technology/ion-to-react/commit/7d4408827fff795ab6fd88c1c80765a6b014e2cb))
+
 # CHANGELOG 
 
 ### v0.3.3  
@@ -104,5 +123,4 @@
 - add changelog   
 - add env urls   
 - check for required props in loadScript    
----  
- 
+---

package/README.md

@@ -29,6 +29,40 @@ function App() {
 }
 export default App;
 ```
+
+## Combined with useConfig hook
+```javascript
+import React from 'react';
+import BuddyOfferElement, { useConfig } from '@buddy-technology/offer-component';
+
+function App() {
+	const { config, isLoading } = useConfig('https://config-domain.com/config.js');
+
+	if (isLoading || !config) {
+		return null;
+	}
+
+  // grab relevant properties from config
+  const theme = config.themeBase;
+  const data = config.data;
+  const handleUserEvents = config.userEvents;
+
+  return (
+    <div id="app">
+      <h1>My App</h1>
+      <BuddyOfferElement
+        ion="MY_ION"
+        partnerID="my-partner-id"
+        stage="staging"
+        theme={theme}
+        data={data}
+        onUserEvent={handleUserEvents}
+      />
+    </div>
+  );
+}
+export default App;
+```
 ---
 ## Props
 
@@ -43,7 +77,7 @@ export default App;
 | onUserEvent | function | | A callback for tracking user behavioral data. See [Capturing Data](#capturing-data) 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. |
+| onRemoveFromCart | function | | The callback fired when a user opts out of the offer. |
 _*required_
 
 ---
@@ -53,7 +87,8 @@ 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)).
+- __offer only__ -  View for displaying just the insurance offer with a quote and checkbox that fires `onAddToCart` when checked and `onRemoveFromCart` when unchecked (see [For full stack apps](#for-full-stack-apps) for more info). 
+**NOTE**: Offer-Only implementations are meant to be rendered in a controlled environment with necessary data passed into it, and will require a payment integration for checkout (see Buddy's [Partner API docs](https://buddyinsurance.stoplight.io/docs/partner-api-documentation/ZG9jOjE1NDc1MzQx)). If any fields are missing or invalid, a step-through form will render with the individual views that include the needed fields. Views with satisfied fields will be skipped. Once users rectify any needed info, they will land on the offer only screen. 
 
 ---
 ## Checkout
@@ -71,16 +106,52 @@ To use this mode, set `includeCheckout` to `false`, or set viewType to `offer-on
 When users opt in, the `onAddToCart` callback is fired with the completed application object. If a user opts out, `onRemoveFromCart` will be called.
 
 ```javascript
+// simple paginated example to collect data
 import React from 'react';
 import BuddyOfferElement from '@buddy-technology/offer-component';
+import { handleAddToCart, handleRemoveFromCart } from './myApi';
 
 function App() {
   const handleAddToCart = (payload) => {
-    console.log(payload)
+    handleAddToCart(payload)
   };
 
   const handleRemoveFromCart = (payload) => {
-    console.log(payload)
+    handleRemoveFromCart(payload)
+  };
+
+  return (
+    <div id="app">
+      <h1>My App</h1>
+      <BuddyOfferElement
+        ion="MY_ION"
+        partnerID="my-partner-id"
+        viewType="paginated"
+        includeCheckout={false}
+        onAddToCart={handleAddToCart}
+        onRemoveFromCart={handleRemoveFromCart}
+        stage="PRODUCTION"
+      />
+    </div>
+  );
+}
+export default App;
+```
+
+```javascript
+// example using offer-only and passing in customer/policy data
+import React from 'react';
+import BuddyOfferElement from '@buddy-technology/offer-component';
+import { handleAddToCart, handleRemoveFromCart } from './myApi';
+
+// passing down data as prop in this example
+function App({ userAndPolicyData }) {
+  const handleAddToCart = (payload) => {
+    handleAddToCart(payload)
+  };
+
+  const handleRemoveFromCart = (payload) => {
+    handleRemoveFromCart(payload)
   };
 
   return (
@@ -90,6 +161,7 @@ function App() {
         ion="MY_ION"
         partnerID="my-partner-id"
         viewType="offer-only"
+        data={userAndPolicyData} // data is passed in, if any fields are invalid, they will be displayed to user to rectify before purchasing.
         onAddToCart={handleAddToCart}
         onRemoveFromCart={handleRemoveFromCart}
         stage="PRODUCTION"
@@ -202,17 +274,6 @@ function App() {
 }
 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!).
@@ -540,4 +601,4 @@ function App() {
   );
 }
 export default App;
-```
+```

package/dist/index.js

@@ -1,149 +1,317 @@
-"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 {Function} ScrollToTopFunction
- * @description A function to override the default scroll to top of offer element behavior when navigating between screens
- */
-
-/**
- * @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} LogoOverride
- * @property {String} url - destination url when users click the trust badge
- * @property {String} src - src of the img for displaying the trust badge
- * @property {String} [alt] - alt text for trust badge image
- */
-
-/**
- *@typedef {Object} EventObject
- *@param {string} eventType - the type of user event (eg:'onCheckout')
- *@param {object} data - data object related to the user event.
- *@param {object} data.timestamp - timestamp of the event. All events have a timestamp property.
-*/
-
-/**
- *@typedef {Function} OnUserEventCallback
- *@param {EventObject} type - the type of user event (eg:'onCheckout')
-*/
-
-/**
- * @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} [stage="STAGING"] - toggle's the environment for the Offer Component. Defaults to STAGING. Must be set to "PRODUCTION" before going live.
- * @property {String} [viewType="paginated"] - establishes how the offer should display to the user. One of: 'paginated', 'single-form' or 'offer-only.'
- * @property {ThemeObject} [theme] - theming object for customizing offer component's styles
- * @property {DataObject} [data] - Any customer or policy data to pre-fill the offer with. Refer to your individual ION for data structure.
- * @property {OnUserEventCallback} [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 {AddToCartFunction} [onAddToCart] - callback function triggered when users opt into an offer-only offer.
- * @property {RemoveFromCartFunction} [onRemoveFromCart] - callback function triggered when users opt out of an offer-only offer.
- * @property {ScrollToTopFunction} [overrideScrollToTop] - When present, this overrides the default scroll to top of offer element behavior when navigating between screens.
- * @property {boolean} [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} [logoOverride] - object for overriding Buddy's trust badge.
- */
-
-/**
- * @function BuddyOfferElement
- * @param {BuddyOfferElementProps} options
- * @returns {FunctionComponent<BuddyOfferElementProps>}
- */
-function BuddyOfferElement(options) {
-  const getScript = async () => {
+var React = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
+var EXISTING_SCRIPT_MESSAGE = 'Buddy Offer Script is already loaded.';
+var SCRIPTS = {
+  LOCAL: {
+    URL: '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'
+  },
+  TESTING: {
+    URL: 'https://js.buddy.insure/v2/testing/index.js'
+  },
+  STAGING: {
+    URL: 'https://js.buddy.insure/v2/staging/index.js'
+  },
+  PRODUCTION: {
+    URL: 'https://js.buddy.insure/v2/index.js'
+  }
+};
+var STAGES = Object.keys(SCRIPTS);
+
+var defaultOptions = {
+  stage: 'STAGING'
+};
+
+var isEmptyOrNil = function isEmptyOrNil(value) {
+  var isNil = function isNil(val) {
+    return [undefined, null].includes(val);
+  };
+
+  var isEmptyStr = function isEmptyStr(str) {
+    return typeof str === 'string' && str.trim().length === 0;
+  };
+
+  var isEmptyObjOrArr = function isEmptyObjOrArr(obj) {
+    return typeof obj === 'object' && obj.length === undefined && Object.keys(obj).length === 0 || Array.isArray(obj) && obj.length === 0;
+  };
+
+  return isNil(value) || isEmptyStr(value) || isEmptyObjOrArr(value);
+};
+
+var validatePropertiesOfObject = function validatePropertiesOfObject(propsToCheck, obj) {
+  var emptyProps = propsToCheck.filter(function (prop) {
+    return isEmptyOrNil(obj[prop]);
+  });
+
+  if (emptyProps.length) {
+    var displayMissingProps = emptyProps.reduce(function (prev, current, i) {
+      var isLastEl = i === emptyProps.length - 1;
+      return isLastEl ? "" + prev + current + "." : "" + prev + current + ", ";
+    }, '');
+    return "The following props are required: " + displayMissingProps;
+  }
+
+  return null;
+};
+
+var findScript = function findScript(url) {
+  var scripts = Array.from(document.querySelectorAll('script'));
+  return scripts.find(function (_ref) {
+    var src = _ref.src;
+    return src.startsWith(url);
+  });
+};
+var findOfferScript = function findOfferScript(stage) {
+  if (stage === void 0) {
+    stage = defaultOptions.stage;
+  }
+
+  var URL = SCRIPTS[stage].URL;
+  var matchedScript = findScript(URL);
+  return matchedScript;
+};
+var updateOffer = function updateOffer(options) {
+  if (window.Buddy) {
+    try {
+      window.Buddy.updateOffer(options);
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error(error);
+    }
+  }
+};
+
+var createOffer = function createOffer(options) {
+  if (window.Buddy) {
     try {
-      await (0, _util.loadScript)(options);
+      window.Buddy.createOffer(options);
     } catch (error) {
       // eslint-disable-next-line no-console
       console.error(error);
     }
+  }
+};
+
+var injectScript = function injectScript(options) {
+  var finalOptions = _extends({}, defaultOptions, options);
+
+  var script = document.createElement('script');
+  script.src = "" + SCRIPTS[finalOptions.stage].URL;
+
+  script.onload = function () {
+    return createOffer(finalOptions);
+  };
+
+  document.body.appendChild(script);
+  return script;
+};
+
+var scriptPromise = null;
+var loadScript = function loadScript(options) {
+  // Ensure that we only attempt to script once
+  if (scriptPromise !== null) {
+    return scriptPromise;
+  }
+
+  scriptPromise = new Promise(function (resolve, reject) {
+    var _window$Buddy;
+
+    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 = window.Buddy) != null && _window$Buddy.createOffer) {
+      // eslint-disable-next-line no-console
+      console.warn(EXISTING_SCRIPT_MESSAGE);
+      resolve(window.Buddy);
+      return;
+    }
+
+    try {
+      var requiredProps = ['ion', 'partnerID'];
+      var missingRequiredProps = validatePropertiesOfObject(requiredProps, options);
+
+      if (missingRequiredProps) {
+        reject(new Error(missingRequiredProps));
+        return;
+      }
+
+      if (!(options != null && options.stage)) {
+        // eslint-disable-next-line no-console
+        console.warn("No stage passed to BuddyOfferElement. Using default stage: " + defaultOptions.stage);
+      } // If stage is passed, ensure it is one of the prescribed options.
+
+
+      if (options != null && options.stage && !STAGES.includes(options.stage)) {
+        var msg = "The stage prop must be one of: [" + STAGES.join(' , ') + "], but received \"" + options.stage + ".\"";
+        reject(new Error(msg));
+        return;
+      }
+
+      var script = findOfferScript(options == null ? void 0 : options.stage);
+
+      if (script) {
+        var _window$Buddy2;
+
+        // eslint-disable-next-line no-console
+        console.warn(EXISTING_SCRIPT_MESSAGE);
+
+        if ((_window$Buddy2 = window.Buddy) != null && _window$Buddy2.createOffer) {
+          resolve(window.Buddy);
+        } else {
+          reject(new Error('Buddy Offer Element not available'));
+        }
+      } else if (!script) {
+        script = injectScript(options);
+      }
+
+      script.addEventListener('load', function () {
+        var _window$Buddy3;
+
+        if ((_window$Buddy3 = window.Buddy) != null && _window$Buddy3.createOffer) {
+          resolve(window.Buddy);
+        } else {
+          reject(new Error('Buddy Offer Element not available'));
+        }
+      });
+      script.addEventListener('error', function () {
+        reject(new Error('Failed to load Buddy Offer Element'));
+      });
+    } catch (error) {
+      reject(error);
+    }
+  });
+  return scriptPromise;
+};
+
+function useConfig(src) {
+  var _useState = React.useState(null),
+      config = _useState[0],
+      setConfig = _useState[1];
+
+  var _useState2 = React.useState(true),
+      isLoading = _useState2[0],
+      setIsLoading = _useState2[1];
+
+  var hasConfig = typeof window !== 'undefined';
+  React.useEffect(function () {
+    var script = findScript(src);
+
+    if (!script) {
+      script = document.createElement('script');
+      script.src = src;
+
+      script.onload = function () {
+        // Assuming the script sets a global variable named 'config'
+        if (hasConfig) {
+          setConfig(window.Buddy.config);
+          setIsLoading(false);
+        }
+      };
+
+      document.body.appendChild(script);
+    } else {
+      // eslint-disable-next-line no-console
+      console.warn('Config script is already loaded.');
+
+      if (hasConfig) {
+        setConfig(window.Buddy.config);
+        setIsLoading(false);
+      }
+    }
+
+    return function () {
+      if (script) {
+        document.body.removeChild(script);
+      }
+    };
+  }, [src]);
+  return {
+    config: config,
+    isLoading: isLoading
+  };
+}
+
+var useUpdateEffect = function useUpdateEffect(effect, deps) {
+  var isFirstMount = React.useRef(true); // need to return only in the else condition in case a cleanup func is passed in effect.
+  // eslint-disable-next-line consistent-return
+
+  React.useEffect(function () {
+    if (isFirstMount) {
+      isFirstMount.current = false;
+    } else {
+      return effect();
+    }
+  }, deps);
+};
+
+function _catch(body, recover) {
+  try {
+    var result = body();
+  } catch (e) {
+    return recover(e);
+  }
+
+  if (result && result.then) {
+    return result.then(void 0, recover);
+  }
+
+  return result;
+}
+
+function BuddyOfferElement(options) {
+  var getScript = function getScript() {
+    try {
+      var _temp2 = _catch(function () {
+        return Promise.resolve(loadScript(options)).then(function () {});
+      }, function (error) {
+        // eslint-disable-next-line no-console
+        console.error(error);
+      });
+
+      return Promise.resolve(_temp2 && _temp2.then ? _temp2.then(function () {}) : void 0);
+    } catch (e) {
+      return Promise.reject(e);
+    }
   };
 
   getScript();
-  (0, _react.useEffect)(() => {
-    (0, _util.updateOffer)(options);
+  useUpdateEffect(function () {
+    updateOffer(options);
   }, [options]);
-  return /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/React__default["default"].createElement("div", {
     id: "buddy_offer"
   });
 }
 
-var _default = BuddyOfferElement;
-exports.default = _default;
+exports["default"] = BuddyOfferElement;
+exports.useConfig = useConfig;
+//# sourceMappingURL=index.js.map