@bigbinary/neeto-integrations-frontend 2.3.1 → 2.5.0

package/dist/Twilio.js

@@ -0,0 +1,681 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { noop, keysToSnakeCase, _findBy } from '@bigbinary/neeto-commons-frontend/pure';
+import '@bigbinary/neeto-molecules/IntegrationCard';
+import '@bigbinary/neeto-molecules/IntegrationDisconnectAlert';
+import '@bigbinary/neeto-molecules/IntegrationWalkthroughModal';
+import { Typography, Modal as Modal$1 } from '@bigbinary/neetoui';
+import classnames from 'classnames';
+import { useTranslation } from 'react-i18next';
+import { prop, equals } from 'ramda';
+import i18next from 'i18next';
+import { Input, Select, Form, ActionBlock } from '@bigbinary/neetoui/formik';
+import { useStateWithDependency } from '@bigbinary/neeto-commons-frontend/react-utils';
+import { DEFAULT_STALE_TIME } from '@bigbinary/neeto-commons-frontend/constants';
+import { QueryClient, QueryCache, useQuery, useMutation } from 'react-query';
+import axios from 'axios';
+import * as yup from 'yup';
+
+function _arrayWithHoles(arr) {
+  if (Array.isArray(arr)) return arr;
+}
+
+function _iterableToArrayLimit(arr, i) {
+  var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"];
+  if (null != _i) {
+    var _s,
+      _e,
+      _x,
+      _r,
+      _arr = [],
+      _n = !0,
+      _d = !1;
+    try {
+      if (_x = (_i = _i.call(arr)).next, 0 === i) {
+        if (Object(_i) !== _i) return;
+        _n = !1;
+      } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0);
+    } catch (err) {
+      _d = !0, _e = err;
+    } finally {
+      try {
+        if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return;
+      } finally {
+        if (_d) throw _e;
+      }
+    }
+    return _arr;
+  }
+}
+
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+  return arr2;
+}
+
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
+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.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.createElement("li", {
+      className: "flex items-center gap-4",
+      key: step
+    }, step !== "1" && /*#__PURE__*/React.createElement("div", {
+      className: classnames("w-10 border-b", {
+        "neeto-ui-border-gray-800": isActiveOrCompleted(isActive, isCompleted),
+        "neeto-ui-border-gray-400": !isActiveOrCompleted(isActive, isCompleted)
+      })
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "flex items-center gap-2"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: classnames("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.createElement(Typography, {
+      component: "span",
+      style: "body2",
+      weight: "normal"
+    }, step)), /*#__PURE__*/React.createElement(Typography, {
+      style: "body2",
+      weight: "normal",
+      className: classnames({
+        "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 ? noop : _ref$isOpen,
+    _ref$onClose = _ref.onClose,
+    onClose = _ref$onClose === void 0 ? noop : _ref$onClose,
+    _ref$steps = _ref.steps,
+    steps = _ref$steps === void 0 ? {} : _ref$steps,
+    children = _ref.children;
+  return /*#__PURE__*/React.createElement(Modal$1, {
+    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.createElement(Modal$1.Header, null, /*#__PURE__*/React.createElement(Stepper, {
+    steps: steps
+  })), /*#__PURE__*/React.createElement(Modal$1.Body, {
+    className: "neeto-ui-flex neeto-ui-justify-center neeto-ui-items-center neeto-ui-flex-grow"
+  }, /*#__PURE__*/React.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.t("neetoIntegrations.steps.configure"),
+  isActive: true,
+  isCompleted: false
+}];
+
+function _typeof(obj) {
+  "@babel/helpers - typeof";
+
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
+    return typeof obj;
+  } : function (obj) {
+    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+  }, _typeof(obj);
+}
+
+function _toPrimitive(input, hint) {
+  if (_typeof(input) !== "object" || input === null) return input;
+  var prim = input[Symbol.toPrimitive];
+  if (prim !== undefined) {
+    var res = prim.call(input, hint || "default");
+    if (_typeof(res) !== "object") return res;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return (hint === "string" ? String : Number)(input);
+}
+
+function _toPropertyKey(arg) {
+  var key = _toPrimitive(arg, "string");
+  return _typeof(key) === "symbol" ? key : String(key);
+}
+
+function _defineProperty(obj, key, value) {
+  key = _toPropertyKey(key);
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
+
+function ownKeys$2(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$2(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var ConfigurationForm = function ConfigurationForm(_ref) {
+  var _errors$twilioPhoneNu;
+  var phoneNumberOptions = _ref.phoneNumberOptions,
+    _ref$selectedPhoneNum = _ref.selectedPhoneNumber,
+    selectedPhoneNumber = _ref$selectedPhoneNum === void 0 ? null : _ref$selectedPhoneNum,
+    _ref$initialFocusRef = _ref.initialFocusRef,
+    initialFocusRef = _ref$initialFocusRef === void 0 ? null : _ref$initialFocusRef,
+    _ref$isUsingOverlay = _ref.isUsingOverlay,
+    isUsingOverlay = _ref$isUsingOverlay === void 0 ? false : _ref$isUsingOverlay,
+    _ref$formikProps = _ref.formikProps,
+    formikProps = _ref$formikProps === void 0 ? {} : _ref$formikProps;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var setFieldValue = formikProps.setFieldValue,
+    setValues = formikProps.setValues,
+    errors = formikProps.errors,
+    values = formikProps.values,
+    initialValues = formikProps.initialValues;
+  useEffect(function () {
+    selectedPhoneNumber && setFieldValue("twilioPhoneNumber", selectedPhoneNumber);
+  }, [selectedPhoneNumber, initialValues]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "flex w-full flex-col gap-4"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex w-full"
+  }, /*#__PURE__*/React.createElement(Input, {
+    required: true,
+    autoFocus: !isUsingOverlay,
+    "data-testid": "integrations-twilio-sid",
+    label: t("neetoIntegrations.twilio.sid"),
+    name: "twilioSid",
+    ref: initialFocusRef
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "flex w-full"
+  }, /*#__PURE__*/React.createElement(Input, {
+    required: true,
+    "data-testid": "integrations-twilio-auth-token",
+    label: t("neetoIntegrations.twilio.authToken"),
+    name: "twilioAuthToken"
+  })), phoneNumberOptions && /*#__PURE__*/React.createElement("div", {
+    className: "flex w-full"
+  }, /*#__PURE__*/React.createElement(Select, {
+    error: (_errors$twilioPhoneNu = errors.twilioPhoneNumber) === null || _errors$twilioPhoneNu === void 0 ? void 0 : _errors$twilioPhoneNu.value,
+    label: t("neetoIntegrations.common.phNo"),
+    name: "twilioPhoneNumber",
+    options: phoneNumberOptions,
+    size: "large",
+    onChange: function onChange(selected) {
+      return setValues(_objectSpread$2(_objectSpread$2({}, values), {}, {
+        twilioPhoneNumber: selected
+      }));
+    }
+  })));
+};
+
+function _arrayWithoutHoles(arr) {
+  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
+}
+
+function _iterableToArray(iter) {
+  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+}
+
+function _nonIterableSpread() {
+  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
+function _toConsumableArray(arr) {
+  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
+}
+
+var queryClient = new QueryClient({
+  queryCache: new QueryCache()
+});
+
+var TWILIO_CONFIGURATION_BASE_URL = "/neeto_integrations/twilio/sms_configurations";
+
+var twilioApi = {
+  fetchTwilioSmsConfiguration: function fetchTwilioSmsConfiguration() {
+    return axios.get(TWILIO_CONFIGURATION_BASE_URL);
+  },
+  removeTwilioConfiguration: function removeTwilioConfiguration() {
+    return axios["delete"](TWILIO_CONFIGURATION_BASE_URL);
+  },
+  getTwilioPhoneNumbers: function getTwilioPhoneNumbers(data) {
+    return axios.get("".concat(TWILIO_CONFIGURATION_BASE_URL, "/new"), {
+      params: data
+    });
+  },
+  createTwilioConfiguration: function createTwilioConfiguration(payload) {
+    return axios.post(TWILIO_CONFIGURATION_BASE_URL, payload);
+  }
+};
+
+var QUERY_KEYS = {
+  TWILIO_SMS_CONFIGURATION: "twilio-sms-configuration",
+  TWILIO_PHONE_NUMBERS: "twilio-phone-numbers"
+};
+
+var useFetchTwilioSmsConfiguration = function useFetchTwilioSmsConfiguration() {
+  return useQuery(QUERY_KEYS.TWILIO_SMS_CONFIGURATION, twilioApi.fetchTwilioSmsConfiguration, {
+    staleTime: DEFAULT_STALE_TIME,
+    select: function select(response) {
+      var _smsConfiguration$twi, _smsConfiguration$twi2, _smsConfiguration$twi3;
+      var smsConfiguration = response.smsConfiguration;
+      return {
+        twilioSid: (_smsConfiguration$twi = smsConfiguration === null || smsConfiguration === void 0 ? void 0 : smsConfiguration.twilioSid) !== null && _smsConfiguration$twi !== void 0 ? _smsConfiguration$twi : "",
+        twilioAuthToken: (_smsConfiguration$twi2 = smsConfiguration === null || smsConfiguration === void 0 ? void 0 : smsConfiguration.twilioAuthToken) !== null && _smsConfiguration$twi2 !== void 0 ? _smsConfiguration$twi2 : "",
+        twilioPhoneNumber: (_smsConfiguration$twi3 = smsConfiguration === null || smsConfiguration === void 0 ? void 0 : smsConfiguration.twilioPhoneNumber) !== null && _smsConfiguration$twi3 !== void 0 ? _smsConfiguration$twi3 : ""
+      };
+    }
+  });
+};
+var useFetchTwilioPhoneNumbers = function useFetchTwilioPhoneNumbers(_ref) {
+  var credentials = _ref.credentials;
+  return useQuery([QUERY_KEYS.TWILIO_PHONE_NUMBERS, {
+    credentials: credentials
+  }], function () {
+    return twilioApi.getTwilioPhoneNumbers(keysToSnakeCase(credentials));
+  }, {
+    staleTime: DEFAULT_STALE_TIME,
+    enabled: !!(credentials !== null && credentials !== void 0 && credentials.twilio_sid) || !!(credentials !== null && credentials !== void 0 && credentials.twilioSid),
+    select: prop("phoneNumbers"),
+    retry: false
+  });
+};
+var useCreateTwilioConfiguration = function useCreateTwilioConfiguration() {
+  return useMutation(twilioApi.createTwilioConfiguration, {
+    onSuccess: function onSuccess() {
+      return queryClient.invalidateQueries(QUERY_KEYS.TWILIO_SMS_CONFIGURATION);
+    }
+  });
+};
+
+function ownKeys$1(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$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 ? noop : _ref$onSave,
+    _ref$setSteps = _ref.setSteps,
+    setSteps = _ref$setSteps === void 0 ? noop : _ref$setSteps,
+    _ref$useConnect = _ref.useConnect,
+    useConnect = _ref$useConnect === void 0 ? noop : _ref$useConnect;
+  var _useFetchTwilioSmsCon = useFetchTwilioSmsConfiguration(),
+    configuration = _useFetchTwilioSmsCon.data,
+    isConfigurationLoading = _useFetchTwilioSmsCon.isLoading,
+    refetchTwilioSmsConfiguration = _useFetchTwilioSmsCon.refetch;
+  var _useStateWithDependen = useStateWithDependency(configuration),
+    _useStateWithDependen2 = _slicedToArray(_useStateWithDependen, 2),
+    credentials = _useStateWithDependen2[0],
+    setCredentials = _useStateWithDependen2[1];
+  var _useFetchTwilioPhoneN = useFetchTwilioPhoneNumbers({
+      credentials: credentials
+    }),
+    phoneNumbers = _useFetchTwilioPhoneN.data,
+    isPhoneNumbersLoading = _useFetchTwilioPhoneN.isLoading;
+  var _useCreateTwilioConfi = useCreateTwilioConfiguration(),
+    saveConfiguration = _useCreateTwilioConfi.mutate,
+    isSubmitting = _useCreateTwilioConfi.isLoading;
+  var _useConnect = useConnect(),
+    installIntegration = _useConnect.mutate;
+  var connectTwilioApp = function connectTwilioApp() {
+    return installIntegration({
+      id: "twilio"
+    }, {});
+  };
+  useEffect(function () {
+    if (!(configuration !== null && configuration !== void 0 && configuration.twilioPhoneNumber)) return;
+    setSteps(function (steps) {
+      var stepsClone = _toConsumableArray(steps);
+      stepsClone[0] = _objectSpread$1(_objectSpread$1({}, steps[0]), {}, {
+        isCompleted: true
+      });
+      return stepsClone;
+    });
+  }, [configuration]);
+  var handleSubmit = function handleSubmit(values) {
+    var _values$twilioPhoneNu;
+    var payload = {
+      twilio_sid: values.twilioSid,
+      twilio_auth_token: values.twilioAuthToken,
+      twilio_phone_number_sid: (_values$twilioPhoneNu = values.twilioPhoneNumber) === null || _values$twilioPhoneNu === void 0 ? void 0 : _values$twilioPhoneNu.value
+    };
+    if (!phoneNumbers && !(configuration !== null && configuration !== void 0 && configuration.twilioPhoneNumber)) {
+      setCredentials(payload);
+      return;
+    }
+    saveConfiguration(payload, {
+      onSuccess: function onSuccess() {
+        onSave();
+        connectTwilioApp();
+        refetchTwilioSmsConfiguration();
+      }
+    });
+  };
+  return {
+    handleSubmit: handleSubmit,
+    phoneNumbers: phoneNumbers,
+    isConfigurationLoading: isConfigurationLoading,
+    isPhoneNumbersLoading: isPhoneNumbersLoading,
+    isSubmitting: isSubmitting,
+    configuration: configuration
+  };
+};
+
+var buildTwilioConfigurationValidationSchema = function buildTwilioConfigurationValidationSchema(isTwilioPhoneRequired) {
+  return yup.object().shape({
+    twilioSid: yup.string().required(i18next.t("neetoIntegrations.twilio.validations.sidReq")),
+    twilioAuthToken: yup.string().required(i18next.t("neetoIntegrations.twilio.validations.authTokenReq")),
+    twilioPhoneNumber: isTwilioPhoneRequired ? yup.object().shape({
+      label: yup.string(),
+      value: yup.string().required(i18next.t("neetoIntegrations.twilio.validations.phNumReq"))
+    }) : null
+  });
+};
+
+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; }
+var TwilioConfiguration = function TwilioConfiguration(_ref) {
+  var _ref$onCancel = _ref.onCancel,
+    onCancel = _ref$onCancel === void 0 ? noop : _ref$onCancel,
+    _ref$onSave = _ref.onSave,
+    onSave = _ref$onSave === void 0 ? noop : _ref$onSave,
+    _ref$setSteps = _ref.setSteps,
+    setSteps = _ref$setSteps === void 0 ? noop : _ref$setSteps,
+    _ref$useConnect = _ref.useConnect,
+    useConnect = _ref$useConnect === void 0 ? noop : _ref$useConnect,
+    _ref$isModal = _ref.isModal,
+    isModal = _ref$isModal === void 0 ? false : _ref$isModal;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var initialFocusRef = useRef();
+  var _useTwilio = useTwilio({
+      onSave: onSave,
+      setSteps: setSteps,
+      useConnect: useConnect
+    }),
+    handleSubmit = _useTwilio.handleSubmit,
+    phoneNumbers = _useTwilio.phoneNumbers,
+    isConfigurationLoading = _useTwilio.isConfigurationLoading,
+    isPhoneNumbersLoading = _useTwilio.isPhoneNumbersLoading,
+    isSubmitting = _useTwilio.isSubmitting,
+    configuration = _useTwilio.configuration;
+  var phoneNumberOptions = phoneNumbers === null || phoneNumbers === void 0 ? void 0 : phoneNumbers.map(function (_ref2) {
+    var phoneNumber = _ref2.phoneNumber,
+      sid = _ref2.sid;
+    return {
+      label: phoneNumber,
+      value: sid
+    };
+  });
+  var selectedPhoneNumber = _findBy({
+    label: configuration === null || configuration === void 0 ? void 0 : configuration.twilioPhoneNumber
+  }, phoneNumberOptions);
+  var wrapInModalBody = function wrapInModalBody(children) {
+    return /*#__PURE__*/React.createElement(Modal$1.Body, null, children);
+  };
+  var wrapInModalFooter = function wrapInModalFooter(children) {
+    return /*#__PURE__*/React.createElement(Modal$1.Footer, null, children);
+  };
+  var isLoading = isPhoneNumbersLoading || isConfigurationLoading;
+  var isSubmitDisabled = function isSubmitDisabled(values) {
+    return equals(_objectSpread(_objectSpread({}, configuration), {}, {
+      twilioPhoneNumber: selectedPhoneNumber
+    }), values) || isLoading;
+  };
+  var renderActionBlock = function renderActionBlock(values) {
+    return /*#__PURE__*/React.createElement(ActionBlock, {
+      cancelButtonProps: {
+        onClick: onCancel,
+        disabled: false
+      },
+      className: "space-x-3",
+      submitButtonProps: {
+        label: phoneNumberOptions ? t("neetoIntegrations.common.saveChanges") : t("neetoIntegrations.common.verify"),
+        disabled: isSubmitDisabled(values),
+        loading: isSubmitting || isPhoneNumbersLoading && !configuration.twilioAuthToken
+      }
+    });
+  };
+  var renderForm = function renderForm(formikProps) {
+    return /*#__PURE__*/React.createElement(ConfigurationForm, {
+      formikProps: formikProps,
+      initialFocusRef: initialFocusRef,
+      isUsingOverlay: isModal,
+      phoneNumberOptions: phoneNumberOptions,
+      selectedPhoneNumber: selectedPhoneNumber
+    });
+  };
+  return /*#__PURE__*/React.createElement(Form, {
+    className: "mx-auto flex w-full max-w-md flex-col",
+    formikProps: {
+      enableReinitialize: true,
+      validationSchema: buildTwilioConfigurationValidationSchema(!!phoneNumbers),
+      initialValues: configuration,
+      onSubmit: handleSubmit
+    }
+  }, function (formikProps) {
+    return isModal ? /*#__PURE__*/React.createElement(React.Fragment, null, wrapInModalBody(renderForm(formikProps)), wrapInModalFooter(renderActionBlock(formikProps.values))) : /*#__PURE__*/React.createElement(React.Fragment, null, "renderForm(formikProps)", /*#__PURE__*/React.createElement("div", {
+      className: "mt-4 flex items-center gap-x-2"
+    }, renderActionBlock(formikProps.values)));
+  });
+};
+
+var Twilio = function Twilio(_ref) {
+  var _ref$onClose = _ref.onClose,
+    onClose = _ref$onClose === void 0 ? noop : _ref$onClose,
+    _ref$useConnect = _ref.useConnect,
+    useConnect = _ref$useConnect === void 0 ? noop : _ref$useConnect;
+  var _useState = useState(TWILIO_INTEGRATION_STEPS),
+    _useState2 = _slicedToArray(_useState, 2),
+    steps = _useState2[0],
+    setSteps = _useState2[1];
+  return /*#__PURE__*/React.createElement(Modal, {
+    isOpen: true,
+    steps: steps,
+    onClose: onClose
+  }, /*#__PURE__*/React.createElement(TwilioConfiguration, {
+    isModal: true,
+    setSteps: setSteps,
+    useConnect: useConnect,
+    onCancel: onClose
+  }));
+};
+
+export { Twilio as default };
+//# sourceMappingURL=Twilio.js.map