@bigbinary/neeto-integrations-frontend 2.3.1 → 2.5.0

package/dist/index.cjs.js

@@ -2,14 +2,22 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var IntegrationCard = require('@bigbinary/neeto-molecules/IntegrationCard');
+var IntegrationDisconnectAlert = require('@bigbinary/neeto-molecules/IntegrationDisconnectAlert');
+var IntegrationWalkthroughModal = require('@bigbinary/neeto-molecules/IntegrationWalkthroughModal');
 var React = require('react');
-var classnames = require('classnames');
 var pure = require('@bigbinary/neeto-commons-frontend/pure');
-var utils = require('@bigbinary/neeto-commons-frontend/utils');
+var i18next = require('i18next');
 var neetoui = require('@bigbinary/neetoui');
+var formik = require('@bigbinary/neetoui/formik');
 var ramda = require('ramda');
 var reactI18next = require('react-i18next');
-var neetoIcons = require('@bigbinary/neeto-icons');
+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 }; }
 
@@ -31,268 +39,444 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
+var IntegrationCard__default = /*#__PURE__*/_interopDefaultLegacy(IntegrationCard);
+var IntegrationDisconnectAlert__default = /*#__PURE__*/_interopDefaultLegacy(IntegrationDisconnectAlert);
+var IntegrationWalkthroughModal__default = /*#__PURE__*/_interopDefaultLegacy(IntegrationWalkthroughModal);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
+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 _extends$1() {
-  _extends$1 = Object.assign ? Object.assign.bind() : 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];
-        }
+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 target;
-  };
-  return _extends$1.apply(this, arguments);
+    return _arr;
+  }
 }
 
-var renderDataCy = function renderDataCy(label, suffix) {
-  return "".concat(label.replace(/\./g, "").toLowerCase(), "-").concat(suffix);
-};
+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;
+}
 
-var Menu = neetoui.Dropdown.Menu,
-  MenuItem = neetoui.Dropdown.MenuItem;
-var Dropdown = function Dropdown(_ref) {
-  var _ref$customDropDown = _ref.customDropDown,
-    CustomDropdown = _ref$customDropDown === void 0 ? {} : _ref$customDropDown,
-    _ref$handleManage = _ref.handleManage,
-    handleManage = _ref$handleManage === void 0 ? pure.noop : _ref$handleManage,
-    _ref$hideDisconnect = _ref.hideDisconnect,
-    hideDisconnect = _ref$hideDisconnect === void 0 ? false : _ref$hideDisconnect,
-    _ref$onDisconnect = _ref.onDisconnect,
-    onDisconnect = _ref$onDisconnect === void 0 ? pure.noop : _ref$onDisconnect;
-  var _useTranslation = reactI18next.useTranslation(),
-    t = _useTranslation.t;
-  var isManageable = ramda.isNotNil(handleManage);
-  if (ramda.isNotNil(CustomDropdown)) {
-    return CustomDropdown;
+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 TWILIO_INTEGRATION_STEPS = [{
+  step: "1",
+  label: i18next__default["default"].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.");
   }
-  if (!isManageable && hideDisconnect) {
-    return null;
+  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 /*#__PURE__*/React__default["default"].createElement(neetoui.Dropdown, {
-    buttonProps: {
-      onClick: function onClick(e) {
-        return e.stopPropagation();
-      }
-    },
-    buttonStyle: "text",
-    dropdownProps: {
-      onClick: function onClick(e) {
-        return e.stopPropagation();
-      }
-    },
-    icon: neetoIcons.MenuVertical
-  }, /*#__PURE__*/React__default["default"].createElement(Menu, null, isManageable && /*#__PURE__*/React__default["default"].createElement(MenuItem.Button, {
-    onClick: function onClick() {
-      return handleManage();
-    }
-  }, t("neetoIntegrations.common.manage")), !hideDisconnect && /*#__PURE__*/React__default["default"].createElement(MenuItem.Button, {
-    onClick: function onClick() {
-      return onDisconnect();
-    }
-  }, t("neetoIntegrations.common.disconnect"))));
-};
+  return obj;
+}
 
-var Status = function Status(_ref) {
-  var isExpired = _ref.isExpired;
+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 = reactI18next.useTranslation(),
     t = _useTranslation.t;
-  var tagProps = isExpired ? {
-    icon: neetoIcons.Warning,
-    label: t("neetoIntegrations.tags.expired"),
-    style: "warning"
-  } : {
-    icon: neetoIcons.Check,
-    label: t("neetoIntegrations.tags.connected"),
-    style: "success"
-  };
-  return /*#__PURE__*/React__default["default"].createElement(neetoui.Tag, _extends$1({
-    className: "flex-row-reverse"
-  }, tagProps));
+  var setFieldValue = formikProps.setFieldValue,
+    setValues = formikProps.setValues,
+    errors = formikProps.errors,
+    values = formikProps.values,
+    initialValues = formikProps.initialValues;
+  React.useEffect(function () {
+    selectedPhoneNumber && setFieldValue("twilioPhoneNumber", selectedPhoneNumber);
+  }, [selectedPhoneNumber, initialValues]);
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "flex w-full flex-col gap-4"
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "flex w-full"
+  }, /*#__PURE__*/React__default["default"].createElement(formik.Input, {
+    required: true,
+    autoFocus: !isUsingOverlay,
+    "data-testid": "integrations-twilio-sid",
+    label: t("neetoIntegrations.twilio.sid"),
+    name: "twilioSid",
+    ref: initialFocusRef
+  })), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "flex w-full"
+  }, /*#__PURE__*/React__default["default"].createElement(formik.Input, {
+    required: true,
+    "data-testid": "integrations-twilio-auth-token",
+    label: t("neetoIntegrations.twilio.authToken"),
+    name: "twilioAuthToken"
+  })), phoneNumberOptions && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "flex w-full"
+  }, /*#__PURE__*/React__default["default"].createElement(formik.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 _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-  return target;
+function _arrayWithoutHoles(arr) {
+  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
 }
 
-function _objectWithoutProperties(source, excluded) {
-  if (source == null) return {};
-  var target = _objectWithoutPropertiesLoose(source, excluded);
-  var key, i;
-  if (Object.getOwnPropertySymbols) {
-    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-    for (i = 0; i < sourceSymbolKeys.length; i++) {
-      key = sourceSymbolKeys[i];
-      if (excluded.indexOf(key) >= 0) continue;
-      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-      target[key] = source[key];
-    }
-  }
-  return target;
+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.");
 }
 
-var _excluded$1 = ["disabled", "children"];
-var TooltipWrapper = function TooltipWrapper(_ref) {
-  var disabled = _ref.disabled,
-    children = _ref.children,
-    tooltipProps = _objectWithoutProperties(_ref, _excluded$1);
-  return disabled ? /*#__PURE__*/React__default["default"].createElement(neetoui.Tooltip, tooltipProps, children) : children;
+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 = {
+  fetchTwilioSmsConfiguration: function fetchTwilioSmsConfiguration() {
+    return axios__default["default"].get(TWILIO_CONFIGURATION_BASE_URL);
+  },
+  removeTwilioConfiguration: function removeTwilioConfiguration() {
+    return axios__default["default"]["delete"](TWILIO_CONFIGURATION_BASE_URL);
+  },
+  getTwilioPhoneNumbers: function getTwilioPhoneNumbers(data) {
+    return axios__default["default"].get("".concat(TWILIO_CONFIGURATION_BASE_URL, "/new"), {
+      params: data
+    });
+  },
+  createTwilioConfiguration: function createTwilioConfiguration(payload) {
+    return axios__default["default"].post(TWILIO_CONFIGURATION_BASE_URL, payload);
+  }
 };
 
-var Card = function Card(_ref) {
-  var Icon = _ref.icon,
-    _ref$subIcons = _ref.subIcons,
-    subIcons = _ref$subIcons === void 0 ? [] : _ref$subIcons,
-    _ref$label = _ref.label,
-    label = _ref$label === void 0 ? "" : _ref$label,
-    _ref$description = _ref.description,
-    description = _ref$description === void 0 ? "" : _ref$description,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? "" : _ref$className,
-    _ref$onConnect = _ref.onConnect,
-    onConnect = _ref$onConnect === void 0 ? pure.noop : _ref$onConnect,
-    _ref$onDisconnect = _ref.onDisconnect,
-    onDisconnect = _ref$onDisconnect === void 0 ? pure.noop : _ref$onDisconnect,
-    _ref$onManage = _ref.onManage,
-    onManage = _ref$onManage === void 0 ? undefined : _ref$onManage,
-    _ref$isLoading = _ref.isLoading,
-    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
-    _ref$isConnected = _ref.isConnected,
-    isConnected = _ref$isConnected === void 0 ? false : _ref$isConnected,
-    _ref$isFailed = _ref.isFailed,
-    isFailed = _ref$isFailed === void 0 ? false : _ref$isFailed,
-    _ref$isExpired = _ref.isExpired,
-    isExpired = _ref$isExpired === void 0 ? false : _ref$isExpired,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    _ref$hidden = _ref.hidden,
-    hidden = _ref$hidden === void 0 ? false : _ref$hidden,
-    _ref$hideDisconnect = _ref.hideDisconnect,
-    hideDisconnect = _ref$hideDisconnect === void 0 ? false : _ref$hideDisconnect,
-    _ref$onClick = _ref.onClick,
-    onCardClick = _ref$onClick === void 0 ? undefined : _ref$onClick,
-    _ref$tooltipProps = _ref.tooltipProps,
-    tooltipProps = _ref$tooltipProps === void 0 ? {} : _ref$tooltipProps,
-    _ref$customDropDown = _ref.customDropDown,
-    customDropDown = _ref$customDropDown === void 0 ? null : _ref$customDropDown,
-    children = _ref.children;
+var QUERY_KEYS = {
+  TWILIO_SMS_CONFIGURATION: "twilio-sms-configuration",
+  TWILIO_PHONE_NUMBERS: "twilio-phone-numbers"
+};
+
+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;
+      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 reactQuery.useQuery([QUERY_KEYS.TWILIO_PHONE_NUMBERS, {
+    credentials: credentials
+  }], function () {
+    return twilioApi.getTwilioPhoneNumbers(pure.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);
+    }
+  });
+};
+
+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 ? pure.noop : _ref$onSave,
+    _ref$setSteps = _ref.setSteps,
+    setSteps = _ref$setSteps === void 0 ? pure.noop : _ref$setSteps,
+    _ref$useConnect = _ref.useConnect,
+    useConnect = _ref$useConnect === void 0 ? pure.noop : _ref$useConnect;
+  var _useFetchTwilioSmsCon = useFetchTwilioSmsConfiguration(),
+    configuration = _useFetchTwilioSmsCon.data,
+    isConfigurationLoading = _useFetchTwilioSmsCon.isLoading,
+    refetchTwilioSmsConfiguration = _useFetchTwilioSmsCon.refetch;
+  var _useStateWithDependen = reactUtils.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"
+    }, {});
+  };
+  React.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__namespace.object().shape({
+    twilioSid: yup__namespace.string().required(i18next__default["default"].t("neetoIntegrations.twilio.validations.sidReq")),
+    twilioAuthToken: yup__namespace.string().required(i18next__default["default"].t("neetoIntegrations.twilio.validations.authTokenReq")),
+    twilioPhoneNumber: isTwilioPhoneRequired ? yup__namespace.object().shape({
+      label: yup__namespace.string(),
+      value: yup__namespace.string().required(i18next__default["default"].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 ? pure.noop : _ref$onCancel,
+    _ref$onSave = _ref.onSave,
+    onSave = _ref$onSave === void 0 ? pure.noop : _ref$onSave,
+    _ref$setSteps = _ref.setSteps,
+    setSteps = _ref$setSteps === void 0 ? pure.noop : _ref$setSteps,
+    _ref$useConnect = _ref.useConnect,
+    useConnect = _ref$useConnect === void 0 ? pure.noop : _ref$useConnect,
+    _ref$isModal = _ref.isModal,
+    isModal = _ref$isModal === void 0 ? false : _ref$isModal;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
-  var cardProps = function cardProps() {
-    return isConnected && ramda.isNotNil(onCardClick) ? {
-      onClick: onCardClick
-    } : {};
+  var initialFocusRef = React.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 = pure._findBy({
+    label: configuration === null || configuration === void 0 ? void 0 : configuration.twilioPhoneNumber
+  }, phoneNumberOptions);
+  var wrapInModalBody = function wrapInModalBody(children) {
+    return /*#__PURE__*/React__default["default"].createElement(neetoui.Modal.Body, null, children);
   };
-  return /*#__PURE__*/React__default["default"].createElement(TooltipWrapper, _extends$1({
-    disabled: disabled,
-    position: "top",
-    content: disabled && t("neetoIntegrations.tooltip.integrationNotAvailable")
-  }, tooltipProps), /*#__PURE__*/React__default["default"].createElement("div", _extends$1({
-    className: classnames__default["default"]("outline-none neeto-ui-border-gray-300 neeto-ui-shadow-xs hover:neeto-ui-border-gray-500 focus:neeto-ui-border-gray-500 neeto-ui-rounded-lg flex flex-col border p-6 no-underline transition-colors", {
-      "hover:neeto-ui-bg-100 cursor-not-allowed opacity-50": disabled,
-      "cursor-pointer": isConnected && ramda.isNotNil(onCardClick),
-      hidden: hidden
-    }, className)
-  }, cardProps()), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "flex flex-grow justify-between",
-    "data-cy": "integration-tabs"
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "flex min-w-0 flex-col justify-end"
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "relative mb-4 flex h-8"
-  }, Icon && /*#__PURE__*/React__default["default"].createElement(Icon, {
-    className: "neeto-ui-text-gray-600",
-    size: 32
-  })), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "my-auto"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-    className: "mb-2",
-    "data-cy": renderDataCy(label, "integration-card-label"),
-    style: "h4",
-    weight: "semibold"
-  }, label), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-    className: "break-words",
-    "data-cy": "".concat(utils.joinHyphenCase(label), "-integration-description"),
-    style: "body2"
-  }, description), children)), pure.isNotEmpty(subIcons) && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "flex h-24 flex-col gap-2"
-  }, subIcons.map(function (Icon) {
-    return /*#__PURE__*/React__default["default"].createElement(Icon, {
-      className: "neeto-ui-text-gray-600",
-      key: Icon,
-      size: 24
+  var wrapInModalFooter = function wrapInModalFooter(children) {
+    return /*#__PURE__*/React__default["default"].createElement(neetoui.Modal.Footer, null, children);
+  };
+  var isLoading = isPhoneNumbersLoading || isConfigurationLoading;
+  var isSubmitDisabled = function isSubmitDisabled(values) {
+    return ramda.equals(_objectSpread(_objectSpread({}, configuration), {}, {
+      twilioPhoneNumber: selectedPhoneNumber
+    }), values) || isLoading;
+  };
+  var renderActionBlock = function renderActionBlock(values) {
+    return /*#__PURE__*/React__default["default"].createElement(formik.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
+      }
     });
-  }))), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "neeto-ui-border-gray-300 mt-4 w-full border-t pt-2"
-  }, isLoading ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "mt-3 flex items-center justify-start"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Spinner, null)) : /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "flex h-8 items-center justify-between"
-  }, isConnected && /*#__PURE__*/React__default["default"].createElement(Status, {
-    isExpired: isExpired
-  }), isFailed && /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
-    className: "neeto-ui-text-warning-500",
-    "data-cy": renderDataCy(label, "connect-button"),
-    disabled: disabled || isLoading,
-    label: t("neetoIntegrations.common.tryAgain"),
-    style: "link",
-    onClick: onConnect
-  }), !isConnected && !isFailed && /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
-    "data-cy": renderDataCy(label, "connect-button"),
-    disabled: disabled || isLoading,
-    label: t("neetoIntegrations.common.connect"),
-    style: "link",
-    onClick: onConnect
-  }), (isConnected || isFailed) && /*#__PURE__*/React__default["default"].createElement(Dropdown, {
-    customDropDown: customDropDown,
-    handleManage: onManage,
-    hideDisconnect: hideDisconnect,
-    onDisconnect: onDisconnect
-  })))));
+  };
+  var renderForm = function renderForm(formikProps) {
+    return /*#__PURE__*/React__default["default"].createElement(ConfigurationForm, {
+      formikProps: formikProps,
+      initialFocusRef: initialFocusRef,
+      isUsingOverlay: isModal,
+      phoneNumberOptions: phoneNumberOptions,
+      selectedPhoneNumber: selectedPhoneNumber
+    });
+  };
+  return /*#__PURE__*/React__default["default"].createElement(formik.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__default["default"].createElement(React__default["default"].Fragment, null, wrapInModalBody(renderForm(formikProps)), wrapInModalFooter(renderActionBlock(formikProps.values))) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, "renderForm(formikProps)", /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "mt-4 flex items-center gap-x-2"
+    }, renderActionBlock(formikProps.values)));
+  });
 };
 
-var _excluded = ["isOpen", "isDisconnecting", "title", "message", "onClose", "onDisconnect"];
-var DisconnectAlert = function DisconnectAlert(_ref) {
-  var _ref$isOpen = _ref.isOpen,
-    isOpen = _ref$isOpen === void 0 ? false : _ref$isOpen,
-    _ref$isDisconnecting = _ref.isDisconnecting,
-    isDisconnecting = _ref$isDisconnecting === void 0 ? false : _ref$isDisconnecting,
-    _ref$title = _ref.title,
-    title = _ref$title === void 0 ? "" : _ref$title,
-    _ref$message = _ref.message,
-    message = _ref$message === void 0 ? "" : _ref$message,
-    _ref$onClose = _ref.onClose,
+var Twilio = function Twilio(_ref) {
+  var _ref$onClose = _ref.onClose,
     onClose = _ref$onClose === void 0 ? pure.noop : _ref$onClose,
-    _ref$onDisconnect = _ref.onDisconnect,
-    onDisconnect = _ref$onDisconnect === void 0 ? pure.noop : _ref$onDisconnect,
-    otherProps = _objectWithoutProperties(_ref, _excluded);
-  var _useTranslation = reactI18next.useTranslation(),
-    t = _useTranslation.t;
-  return /*#__PURE__*/React__default["default"].createElement(neetoui.Alert, _extends$1({
-    closeOnEsc: true,
-    closeOnOutsideClick: true,
-    isOpen: isOpen,
-    isSubmitting: isDisconnecting,
-    message: message,
-    submitButtonLabel: t("neetoIntegrations.common.disconnect"),
-    title: title,
-    onClose: onClose,
-    onSubmit: onDisconnect
-  }, otherProps));
+    _ref$useConnect = _ref.useConnect,
+    useConnect = _ref$useConnect === void 0 ? pure.noop : _ref$useConnect;
+  var _useState = React.useState(TWILIO_INTEGRATION_STEPS),
+    _useState2 = _slicedToArray(_useState, 2),
+    steps = _useState2[0],
+    setSteps = _useState2[1];
+  return /*#__PURE__*/React__default["default"].createElement(Modal, {
+    isOpen: true,
+    steps: steps,
+    onClose: onClose
+  }, /*#__PURE__*/React__default["default"].createElement(TwilioConfiguration, {
+    isModal: true,
+    setSteps: setSteps,
+    useConnect: useConnect,
+    onCancel: onClose
+  }));
 };
 
 var Stepper = function Stepper(_ref) {
@@ -361,6 +545,21 @@ var Modal = function Modal(_ref) {
   }, children)));
 };
 
+function _extends$1() {
+  _extends$1 = Object.assign ? Object.assign.bind() : 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$1.apply(this, arguments);
+}
+
 var propTypes = {exports: {}};
 
 /**
@@ -646,39 +845,6 @@ Finish.prototypes = {
   secondaryButtonProps: propTypes.exports.object
 };
 
-var WalkthroughModal = function WalkthroughModal(_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$videoUrl = _ref.videoUrl,
-    videoUrl = _ref$videoUrl === void 0 ? "" : _ref$videoUrl,
-    children = _ref.children;
-  var _useTranslation = reactI18next.useTranslation(),
-    t = _useTranslation.t;
-  return /*#__PURE__*/React__default["default"].createElement(neetoui.Modal, {
-    isOpen: isOpen,
-    size: "large",
-    onClose: onClose
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Modal.Header, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-    style: "h2",
-    weight: "semibold"
-  }, t("neetoIntegrations.walkthroughModal.header"))), /*#__PURE__*/React__default["default"].createElement(neetoui.Modal.Body, null, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "w-full py-10"
-  }, /*#__PURE__*/React__default["default"].createElement("video", {
-    autoPlay: true,
-    controls: true,
-    muted: true,
-    className: "cursor-pointer",
-    id: "walkthrough-video"
-  }, /*#__PURE__*/React__default["default"].createElement("source", {
-    src: videoUrl
-  })), children)), /*#__PURE__*/React__default["default"].createElement(neetoui.Modal.Footer, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
-    label: t("neetoIntegrations.walkthroughModal.continue"),
-    onClick: onClose
-  })));
-};
-
 var e = [],
   t = [];
 function n(n, r) {
@@ -704,11 +870,21 @@ function n(n, r) {
 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,{});
 
-exports.Card = Card;
+Object.defineProperty(exports, 'Card', {
+  enumerable: true,
+  get: function () { return IntegrationCard__default["default"]; }
+});
+Object.defineProperty(exports, 'DisconnectAlert', {
+  enumerable: true,
+  get: function () { return IntegrationDisconnectAlert__default["default"]; }
+});
+Object.defineProperty(exports, 'WalkthroughModal', {
+  enumerable: true,
+  get: function () { return IntegrationWalkthroughModal__default["default"]; }
+});
 exports.Connect = Connect;
 exports.Demo = Demo;
-exports.DisconnectAlert = DisconnectAlert;
 exports.Finish = Finish;
 exports.Modal = Modal;
-exports.WalkthroughModal = WalkthroughModal;
+exports.Twilio = Twilio;
 //# sourceMappingURL=index.cjs.js.map