@bigbinary/neeto-integrations-frontend 2.4.0 → 2.5.1

package/dist/Twilio.cjs.js

@@ -1,18 +1,20 @@
 'use strict';
 
 var React = require('react');
-var pure = require('@bigbinary/neeto-commons-frontend/pure');
-var i18next = require('i18next');
+var neetoCist = require('@bigbinary/neeto-cist');
+require('@bigbinary/neeto-molecules/IntegrationCard');
+require('@bigbinary/neeto-molecules/IntegrationDisconnectAlert');
+require('@bigbinary/neeto-molecules/IntegrationWalkthroughModal');
 var neetoui = require('@bigbinary/neetoui');
-var formik = require('@bigbinary/neetoui/formik');
-var ramda = require('ramda');
+var classnames = require('classnames');
 var reactI18next = require('react-i18next');
+var ramda = require('ramda');
+var i18next = require('i18next');
+var formik = require('@bigbinary/neetoui/formik');
 var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
-var constants = require('@bigbinary/neeto-commons-frontend/constants');
 var reactQuery = require('react-query');
 var axios = require('axios');
 var yup = require('yup');
-var classnames = require('classnames');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -35,10 +37,10 @@ function _interopNamespace(e) {
 }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 var i18next__default = /*#__PURE__*/_interopDefaultLegacy(i18next);
 var axios__default = /*#__PURE__*/_interopDefaultLegacy(axios);
 var yup__namespace = /*#__PURE__*/_interopNamespace(yup);
-var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 
 function _arrayWithHoles(arr) {
   if (Array.isArray(arr)) return arr;
@@ -95,6 +97,238 @@ function _slicedToArray(arr, i) {
   return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
 
+var Stepper = function Stepper(_ref) {
+  var _ref$steps = _ref.steps,
+    steps = _ref$steps === void 0 ? {} : _ref$steps;
+  var isActiveOrCompleted = function isActiveOrCompleted(activeStatus, completedStatus) {
+    return activeStatus || completedStatus;
+  };
+  return /*#__PURE__*/React__default["default"].createElement("ul", {
+    className: "flex gap-4"
+  }, steps === null || steps === void 0 ? void 0 : steps.map(function (_ref2) {
+    var step = _ref2.step,
+      label = _ref2.label,
+      isActive = _ref2.isActive,
+      isCompleted = _ref2.isCompleted;
+    return /*#__PURE__*/React__default["default"].createElement("li", {
+      className: "flex items-center gap-4",
+      key: step
+    }, step !== "1" && /*#__PURE__*/React__default["default"].createElement("div", {
+      className: classnames__default["default"]("w-10 border-b", {
+        "neeto-ui-border-gray-800": isActiveOrCompleted(isActive, isCompleted),
+        "neeto-ui-border-gray-400": !isActiveOrCompleted(isActive, isCompleted)
+      })
+    }), /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "flex items-center gap-2"
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      className: classnames__default["default"]("neeto-ui-rounded-full neeto-ui-gray-600 flex h-6 w-6 items-center justify-center border", {
+        "neeto-ui-bg-success-600 neeto-ui-border-success-600 neeto-ui-text-white": isActive,
+        "neeto-ui-bg-primary-600 neeto-ui-border-primary-600 neeto-ui-text-white": isCompleted,
+        "neeto-ui-border-gray-400": !isActiveOrCompleted(isActive, isCompleted)
+      })
+    }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+      component: "span",
+      style: "body2",
+      weight: "normal"
+    }, step)), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+      style: "body2",
+      weight: "normal",
+      className: classnames__default["default"]({
+        "neeto-ui-text-gray-800": isActiveOrCompleted(isActive, isCompleted),
+        "neeto-ui-text-gray-600": !isActiveOrCompleted(isActive, isCompleted)
+      })
+    }, label)));
+  }));
+};
+
+var Modal = function Modal(_ref) {
+  var _ref$isOpen = _ref.isOpen,
+    isOpen = _ref$isOpen === void 0 ? neetoCist.noop : _ref$isOpen,
+    _ref$onClose = _ref.onClose,
+    onClose = _ref$onClose === void 0 ? neetoCist.noop : _ref$onClose,
+    _ref$steps = _ref.steps,
+    steps = _ref$steps === void 0 ? {} : _ref$steps,
+    children = _ref.children;
+  return /*#__PURE__*/React__default["default"].createElement(neetoui.Modal, {
+    className: "neeto-ui-flex neeto-ui-flex-col neeto-ui-transform-none w-screen overflow-y-auto",
+    isOpen: isOpen,
+    size: "fullScreen",
+    onClose: onClose
+  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Modal.Header, null, /*#__PURE__*/React__default["default"].createElement(Stepper, {
+    steps: steps
+  })), /*#__PURE__*/React__default["default"].createElement(neetoui.Modal.Body, {
+    className: "neeto-ui-flex neeto-ui-justify-center neeto-ui-items-center neeto-ui-flex-grow"
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "neeto-ui-w-full py-10"
+  }, children)));
+};
+
+var propTypes = {exports: {}};
+
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var ReactPropTypesSecret$1 = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED';
+var ReactPropTypesSecret_1 = ReactPropTypesSecret$1;
+
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var ReactPropTypesSecret = ReactPropTypesSecret_1;
+function emptyFunction() {}
+function emptyFunctionWithReset() {}
+emptyFunctionWithReset.resetWarningCache = emptyFunction;
+var factoryWithThrowingShims = function factoryWithThrowingShims() {
+  function shim(props, propName, componentName, location, propFullName, secret) {
+    if (secret === ReactPropTypesSecret) {
+      // It is still safe when called from React.
+      return;
+    }
+    var err = new Error('Calling PropTypes validators directly is not supported by the `prop-types` package. ' + 'Use PropTypes.checkPropTypes() to call them. ' + 'Read more at http://fb.me/use-check-prop-types');
+    err.name = 'Invariant Violation';
+    throw err;
+  }
+  shim.isRequired = shim;
+  function getShim() {
+    return shim;
+  }
+  // Important!
+  // Keep this list in sync with production version in `./factoryWithTypeCheckers.js`.
+  var ReactPropTypes = {
+    array: shim,
+    bigint: shim,
+    bool: shim,
+    func: shim,
+    number: shim,
+    object: shim,
+    string: shim,
+    symbol: shim,
+    any: shim,
+    arrayOf: getShim,
+    element: shim,
+    elementType: shim,
+    instanceOf: getShim,
+    node: shim,
+    objectOf: getShim,
+    oneOf: getShim,
+    oneOfType: getShim,
+    shape: getShim,
+    exact: getShim,
+    checkPropTypes: emptyFunctionWithReset,
+    resetWarningCache: emptyFunction
+  };
+  ReactPropTypes.PropTypes = ReactPropTypes;
+  return ReactPropTypes;
+};
+
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+{
+  // By explicitly using `prop-types` you are opting into new production behavior.
+  // http://fb.me/prop-types-in-prod
+  propTypes.exports = factoryWithThrowingShims();
+}
+
+({
+  /**
+   * To specify the Icon to be shown
+   */
+  Icon: propTypes.exports.PropTypes.node,
+  /**
+   * To specify the title of the connect component
+   */
+  title: propTypes.exports.PropTypes.string,
+  /**
+   * To specify the description for connect component
+   */
+  description: propTypes.exports.PropTypes.string,
+  /**
+   * To specify the props for the connect button
+   */
+  buttonProps: propTypes.exports.PropTypes.object,
+  /**
+   * Handler function that is triggered when the connect button is clicked.
+   */
+  onConnect: propTypes.exports.PropTypes.func
+});
+
+({
+  /**
+   * To specify whether the integration modal should be opened or closed.
+   */
+  onClose: propTypes.exports.func,
+  /**
+   * To specify the walkthrough video link
+   */
+  videoUrl: propTypes.exports.string,
+  /**
+   * To specify the title of the demo component
+   */
+  title: propTypes.exports.string,
+  /**
+   * To specify the subtitle of the demo component
+   */
+  subtitle: propTypes.exports.string,
+  /**
+   * To specify the title of the video in the iframe
+   */
+  iframeTitle: propTypes.exports.string
+});
+
+({
+  /**
+   * To specify whether the integration modal should be opened or closed.
+   */
+  onClick: propTypes.exports.func,
+  /**
+   * To show the title of the Finish component
+   */
+  title: propTypes.exports.string,
+  /**
+   * To specify props for primary button
+   */
+  buttonProps: propTypes.exports.object,
+  /**
+   * To specify props for secondary button
+   */
+  secondaryButtonProps: propTypes.exports.object
+});
+
+var e = [],
+  t = [];
+function n(n, r) {
+  if (n && "undefined" != typeof document) {
+    var a,
+      s = !0 === r.prepend ? "prepend" : "append",
+      d = !0 === r.singleTag,
+      i = "string" == typeof r.container ? document.querySelector(r.container) : document.getElementsByTagName("head")[0];
+    if (d) {
+      var u = e.indexOf(i);
+      -1 === u && (u = e.push(i) - 1, t[u] = {}), a = t[u] && t[u][s] ? t[u][s] : t[u][s] = c();
+    } else a = c();
+    65279 === n.charCodeAt(0) && (n = n.substring(1)), a.styleSheet ? a.styleSheet.cssText += n : a.appendChild(document.createTextNode(n));
+  }
+  function c() {
+    var e = document.createElement("style");
+    if (e.setAttribute("type", "text/css"), r.attributes) for (var t = Object.keys(r.attributes), n = 0; n < t.length; n++) e.setAttribute(t[n], r.attributes[t[n]]);
+    var a = "prepend" === s ? "afterbegin" : "beforeend";
+    return i.insertAdjacentElement(a, e), e;
+  }
+}
+
+var css = ".intrinsic-container{height:0;overflow:hidden;position:relative}.intrinsic-container-16x9{padding-bottom:56.25%}.intrinsic-container-4x3{padding-bottom:75%}.intrinsic-container iframe{height:100%;left:0;position:absolute;top:0;width:100%}";
+n(css,{});
+
 var TWILIO_INTEGRATION_STEPS = [{
   step: "1",
   label: i18next__default["default"].t("neetoIntegrations.steps.configure"),
@@ -216,10 +450,6 @@ function _toConsumableArray(arr) {
   return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
 }
 
-var queryClient = new reactQuery.QueryClient({
-  queryCache: new reactQuery.QueryCache()
-});
-
 var TWILIO_CONFIGURATION_BASE_URL = "/neeto_integrations/twilio/sms_configurations";
 
 var twilioApi = {
@@ -246,7 +476,6 @@ var QUERY_KEYS = {
 
 var useFetchTwilioSmsConfiguration = function useFetchTwilioSmsConfiguration() {
   return reactQuery.useQuery(QUERY_KEYS.TWILIO_SMS_CONFIGURATION, twilioApi.fetchTwilioSmsConfiguration, {
-    staleTime: constants.DEFAULT_STALE_TIME,
     select: function select(response) {
       var _smsConfiguration$twi, _smsConfiguration$twi2, _smsConfiguration$twi3;
       var smsConfiguration = response.smsConfiguration;
@@ -263,19 +492,16 @@ var useFetchTwilioPhoneNumbers = function useFetchTwilioPhoneNumbers(_ref) {
   return reactQuery.useQuery([QUERY_KEYS.TWILIO_PHONE_NUMBERS, {
     credentials: credentials
   }], function () {
-    return twilioApi.getTwilioPhoneNumbers(pure.keysToSnakeCase(credentials));
+    return twilioApi.getTwilioPhoneNumbers(neetoCist.keysToSnakeCase(credentials));
   }, {
-    staleTime: constants.DEFAULT_STALE_TIME,
     enabled: !!(credentials !== null && credentials !== void 0 && credentials.twilio_sid) || !!(credentials !== null && credentials !== void 0 && credentials.twilioSid),
     select: ramda.prop("phoneNumbers"),
     retry: false
   });
 };
 var useCreateTwilioConfiguration = function useCreateTwilioConfiguration() {
-  return reactQuery.useMutation(twilioApi.createTwilioConfiguration, {
-    onSuccess: function onSuccess() {
-      return queryClient.invalidateQueries(QUERY_KEYS.TWILIO_SMS_CONFIGURATION);
-    }
+  return reactUtils.useMutationWithInvalidation(twilioApi.createTwilioConfiguration, {
+    keysToInvalidate: [QUERY_KEYS.TWILIO_SMS_CONFIGURATION]
   });
 };
 
@@ -283,11 +509,11 @@ function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if
 function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var useTwilio = function useTwilio(_ref) {
   var _ref$onSave = _ref.onSave,
-    onSave = _ref$onSave === void 0 ? pure.noop : _ref$onSave,
+    onSave = _ref$onSave === void 0 ? neetoCist.noop : _ref$onSave,
     _ref$setSteps = _ref.setSteps,
-    setSteps = _ref$setSteps === void 0 ? pure.noop : _ref$setSteps,
+    setSteps = _ref$setSteps === void 0 ? neetoCist.noop : _ref$setSteps,
     _ref$useConnect = _ref.useConnect,
-    useConnect = _ref$useConnect === void 0 ? pure.noop : _ref$useConnect;
+    useConnect = _ref$useConnect === void 0 ? neetoCist.noop : _ref$useConnect;
   var _useFetchTwilioSmsCon = useFetchTwilioSmsConfiguration(),
     configuration = _useFetchTwilioSmsCon.data,
     isConfigurationLoading = _useFetchTwilioSmsCon.isLoading,
@@ -365,13 +591,13 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 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; }
 var TwilioConfiguration = function TwilioConfiguration(_ref) {
   var _ref$onCancel = _ref.onCancel,
-    onCancel = _ref$onCancel === void 0 ? pure.noop : _ref$onCancel,
+    onCancel = _ref$onCancel === void 0 ? neetoCist.noop : _ref$onCancel,
     _ref$onSave = _ref.onSave,
-    onSave = _ref$onSave === void 0 ? pure.noop : _ref$onSave,
+    onSave = _ref$onSave === void 0 ? neetoCist.noop : _ref$onSave,
     _ref$setSteps = _ref.setSteps,
-    setSteps = _ref$setSteps === void 0 ? pure.noop : _ref$setSteps,
+    setSteps = _ref$setSteps === void 0 ? neetoCist.noop : _ref$setSteps,
     _ref$useConnect = _ref.useConnect,
-    useConnect = _ref$useConnect === void 0 ? pure.noop : _ref$useConnect,
+    useConnect = _ref$useConnect === void 0 ? neetoCist.noop : _ref$useConnect,
     _ref$isModal = _ref.isModal,
     isModal = _ref$isModal === void 0 ? false : _ref$isModal;
   var _useTranslation = reactI18next.useTranslation(),
@@ -396,7 +622,7 @@ var TwilioConfiguration = function TwilioConfiguration(_ref) {
       value: sid
     };
   });
-  var selectedPhoneNumber = pure._findBy({
+  var selectedPhoneNumber = neetoCist._findBy({
     label: configuration === null || configuration === void 0 ? void 0 : configuration.twilioPhoneNumber
   }, phoneNumberOptions);
   var wrapInModalBody = function wrapInModalBody(children) {
@@ -449,77 +675,11 @@ var TwilioConfiguration = function TwilioConfiguration(_ref) {
   });
 };
 
-var Stepper = function Stepper(_ref) {
-  var _ref$steps = _ref.steps,
-    steps = _ref$steps === void 0 ? {} : _ref$steps;
-  var isActiveOrCompleted = function isActiveOrCompleted(activeStatus, completedStatus) {
-    return activeStatus || completedStatus;
-  };
-  return /*#__PURE__*/React__default["default"].createElement("ul", {
-    className: "flex gap-4"
-  }, steps === null || steps === void 0 ? void 0 : steps.map(function (_ref2) {
-    var step = _ref2.step,
-      label = _ref2.label,
-      isActive = _ref2.isActive,
-      isCompleted = _ref2.isCompleted;
-    return /*#__PURE__*/React__default["default"].createElement("li", {
-      className: "flex items-center gap-4",
-      key: step
-    }, step !== "1" && /*#__PURE__*/React__default["default"].createElement("div", {
-      className: classnames__default["default"]("w-10 border-b", {
-        "neeto-ui-border-gray-800": isActiveOrCompleted(isActive, isCompleted),
-        "neeto-ui-border-gray-400": !isActiveOrCompleted(isActive, isCompleted)
-      })
-    }), /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "flex items-center gap-2"
-    }, /*#__PURE__*/React__default["default"].createElement("div", {
-      className: classnames__default["default"]("neeto-ui-rounded-full neeto-ui-gray-600 flex h-6 w-6 items-center justify-center border", {
-        "neeto-ui-bg-success-600 neeto-ui-border-success-600 neeto-ui-text-white": isActive,
-        "neeto-ui-bg-primary-600 neeto-ui-border-primary-600 neeto-ui-text-white": isCompleted,
-        "neeto-ui-border-gray-400": !isActiveOrCompleted(isActive, isCompleted)
-      })
-    }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-      component: "span",
-      style: "body2",
-      weight: "normal"
-    }, step)), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-      style: "body2",
-      weight: "normal",
-      className: classnames__default["default"]({
-        "neeto-ui-text-gray-800": isActiveOrCompleted(isActive, isCompleted),
-        "neeto-ui-text-gray-600": !isActiveOrCompleted(isActive, isCompleted)
-      })
-    }, label)));
-  }));
-};
-
-var Modal = function Modal(_ref) {
-  var _ref$isOpen = _ref.isOpen,
-    isOpen = _ref$isOpen === void 0 ? pure.noop : _ref$isOpen,
-    _ref$onClose = _ref.onClose,
-    onClose = _ref$onClose === void 0 ? pure.noop : _ref$onClose,
-    _ref$steps = _ref.steps,
-    steps = _ref$steps === void 0 ? {} : _ref$steps,
-    children = _ref.children;
-  return /*#__PURE__*/React__default["default"].createElement(neetoui.Modal, {
-    className: "neeto-ui-flex neeto-ui-flex-col neeto-ui-transform-none w-screen overflow-y-auto",
-    isOpen: isOpen,
-    size: "fullScreen",
-    onClose: onClose
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Modal.Header, null, /*#__PURE__*/React__default["default"].createElement(Stepper, {
-    steps: steps
-  })), /*#__PURE__*/React__default["default"].createElement(neetoui.Modal.Body, {
-    className: "neeto-ui-flex neeto-ui-justify-center neeto-ui-items-center neeto-ui-flex-grow"
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "neeto-ui-w-full py-10"
-  }, children)));
-};
-
 var Twilio = function Twilio(_ref) {
   var _ref$onClose = _ref.onClose,
-    onClose = _ref$onClose === void 0 ? pure.noop : _ref$onClose,
+    onClose = _ref$onClose === void 0 ? neetoCist.noop : _ref$onClose,
     _ref$useConnect = _ref.useConnect,
-    useConnect = _ref$useConnect === void 0 ? pure.noop : _ref$useConnect;
+    useConnect = _ref$useConnect === void 0 ? neetoCist.noop : _ref$useConnect;
   var _useState = React.useState(TWILIO_INTEGRATION_STEPS),
     _useState2 = _slicedToArray(_useState, 2),
     steps = _useState2[0],