@bigbinary/neeto-integrations-frontend 2.5.2 → 2.6.0

package/dist/Twilio.cjs.js

@@ -3,17 +3,19 @@
 var React = require('react');
 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 classnames = require('classnames');
-var reactI18next = require('react-i18next');
-var ramda = require('ramda');
+var DisconnectAlert = require('@bigbinary/neeto-molecules/IntegrationDisconnectAlert');
+var WalkthroughModal = require('@bigbinary/neeto-molecules/IntegrationWalkthroughModal');
 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 PageLoader = require('@bigbinary/neeto-molecules/PageLoader');
+var neetoui = require('@bigbinary/neetoui');
+var formik = require('@bigbinary/neetoui/formik');
+var reactI18next = require('react-i18next');
+var classnames = require('classnames');
+var ramda = require('ramda');
 var yup = require('yup');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -37,9 +39,12 @@ function _interopNamespace(e) {
 }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
+var DisconnectAlert__default = /*#__PURE__*/_interopDefaultLegacy(DisconnectAlert);
+var WalkthroughModal__default = /*#__PURE__*/_interopDefaultLegacy(WalkthroughModal);
 var i18next__default = /*#__PURE__*/_interopDefaultLegacy(i18next);
 var axios__default = /*#__PURE__*/_interopDefaultLegacy(axios);
+var PageLoader__default = /*#__PURE__*/_interopDefaultLegacy(PageLoader);
+var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 var yup__namespace = /*#__PURE__*/_interopNamespace(yup);
 
 function _arrayWithHoles(arr) {
@@ -97,6 +102,356 @@ function _slicedToArray(arr, i) {
   return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
 
+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;
+}
+
+var INTEGRATIONS_ENGINE_BASE_URL = "/neeto_integrations";
+var TWILIO_CONFIGURATION_BASE_URL = "".concat(INTEGRATIONS_ENGINE_BASE_URL, "/twilio/sms_configurations");
+var INTEGRATIONS_ENGINE_DAILY_URL = "".concat(INTEGRATIONS_ENGINE_BASE_URL, "/daily");
+
+var create = function create(payload) {
+  return axios__default["default"].post(INTEGRATIONS_ENGINE_DAILY_URL, {
+    daily: payload
+  });
+};
+var show = function show() {
+  return axios__default["default"].get(INTEGRATIONS_ENGINE_DAILY_URL);
+};
+var destroy = function destroy() {
+  return axios__default["default"]["delete"](INTEGRATIONS_ENGINE_DAILY_URL);
+};
+var dailiesApi = {
+  create: create,
+  show: show,
+  destroy: destroy
+};
+
+var QUERY_KEYS = {
+  TWILIO_SMS_CONFIGURATION: "twilio-sms-configuration",
+  TWILIO_PHONE_NUMBERS: "twilio-phone-numbers",
+  DAILY_CO_DETAILS: "daily-co-details"
+};
+
+function ownKeys$3(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$3(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$3(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var useCreateDaily = function useCreateDaily() {
+  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return reactUtils.useMutationWithInvalidation(dailiesApi.create, _objectSpread$3({
+    keysToInvalidate: [QUERY_KEYS.DAILY_CO_DETAILS]
+  }, options));
+};
+var useFetchDaily = function useFetchDaily() {
+  return reactQuery.useQuery(QUERY_KEYS.DAILY_CO_DETAILS, dailiesApi.show, {
+    staleTime: constants.DEFAULT_STALE_TIME
+  });
+};
+var useDestroyDaily = function useDestroyDaily(_ref) {
+  var onSuccess = _ref.onSuccess;
+  return reactUtils.useMutationWithInvalidation(dailiesApi.destroy, {
+    keysToInvalidate: [QUERY_KEYS.DAILY_CO_DETAILS],
+    onSuccess: onSuccess
+  });
+};
+
+function _extends() {
+  _extends = 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.apply(this, arguments);
+}
+
+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 _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;
+}
+
+var _excluded = ["className", "children"];
+var ExternalLink = function ExternalLink(_ref) {
+  var _ref$className = _ref.className,
+    className = _ref$className === void 0 ? "" : _ref$className,
+    _ref$children = _ref.children,
+    children = _ref$children === void 0 ? null : _ref$children,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React__default["default"].createElement("a", _extends({
+    className: classnames__default["default"](["neeto-ui-text-primary-800 hover:neeto-ui-text-primary-800 visited:neeto-ui-text-primary-600 font-medium", className])
+  }, props), children);
+};
+var ExternalLink$1 = /*#__PURE__*/React__default["default"].memo(ExternalLink);
+
+var MANAGE_DAILY_CO_FORM_INITIAL_VALUES = {
+  apiKey: ""
+};
+var DAILY_CO_VALIDATION_SCHEMA = yup__namespace.object().shape({
+  apiKey: yup__namespace.string().trim().required(i18next.t("neetoIntegrations.errors.required", {
+    entity: i18next.t("neetoIntegrations.daily.apiKey")
+  }))
+});
+
+var Form = function Form(_ref) {
+  var helpDocUrl = _ref.helpDocUrl,
+    videoUrl = _ref.videoUrl,
+    onConnect = _ref.onConnect;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var _useState = React.useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isDemoModalOpen = _useState2[0],
+    setIsDemoModalOpen = _useState2[1];
+  var _useCreateDaily = useCreateDaily({
+      onSuccess: function onSuccess() {
+        return onConnect === null || onConnect === void 0 ? void 0 : onConnect();
+      }
+    }),
+    createDaily = _useCreateDaily.mutate,
+    isConnecting = _useCreateDaily.isLoading;
+  var handleSubmit = function handleSubmit(payload) {
+    return createDaily(payload);
+  };
+  if (isConnecting) {
+    return /*#__PURE__*/React__default["default"].createElement(PageLoader__default["default"], null);
+  }
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "mx-auto w-full max-w-md"
+  }, /*#__PURE__*/React__default["default"].createElement(formik.Form, {
+    formikProps: {
+      initialValues: MANAGE_DAILY_CO_FORM_INITIAL_VALUES,
+      validationSchema: DAILY_CO_VALIDATION_SCHEMA,
+      onSubmit: handleSubmit
+    }
+  }, function (_ref2) {
+    var dirty = _ref2.dirty;
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "mt-10 w-full space-y-5"
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "block"
+    }, /*#__PURE__*/React__default["default"].createElement(formik.Input, {
+      autoFocus: true,
+      required: true,
+      label: t("neetoIntegrations.daily.apiKey"),
+      name: "apiKey",
+      helpText: /*#__PURE__*/React__default["default"].createElement(reactI18next.Trans, {
+        i18nKey: "neetoIntegrations.daily.helpDoc",
+        components: {
+          externalLink: /*#__PURE__*/React__default["default"].createElement(ExternalLink$1, {
+            href: helpDocUrl,
+            rel: "noreferrer",
+            target: "_blank"
+          })
+        }
+      })
+    }), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+      className: "mt-8",
+      label: t("neetoIntegrations.daily.walkthroughText"),
+      style: "link",
+      onClick: function onClick() {
+        return setIsDemoModalOpen(true);
+      }
+    })), /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+      disabled: isConnecting || !dirty,
+      label: t("neetoIntegrations.common.connect"),
+      loading: isConnecting,
+      type: "submit"
+    })));
+  }), /*#__PURE__*/React__default["default"].createElement(WalkthroughModal__default["default"], {
+    isOpen: isDemoModalOpen,
+    videoUrl: videoUrl,
+    onClose: function onClose() {
+      return setIsDemoModalOpen(false);
+    }
+  }));
+};
+var Form$1 = reactUtils.withTitle(Form, i18next__default["default"].t("neetoIntegrations.browserTitles.integrations.dailyco"));
+
+var Manage$1 = reactUtils.withT(function (_ref) {
+  var t = _ref.t,
+    title = _ref.title,
+    description = _ref.description,
+    integration = _ref.integration,
+    isDisconnectAlertOpen = _ref.isDisconnectAlertOpen,
+    setIsDisconnectAlertOpen = _ref.setIsDisconnectAlertOpen,
+    isDisconnecting = _ref.isDisconnecting,
+    onDisconnect = _ref.onDisconnect,
+    onClose = _ref.onClose;
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "mx-auto w-full max-w-md"
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "mt-10 w-full space-y-4"
+  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    className: "neeto-ui-text-gray-800 mb-0.5",
+    style: "h3",
+    weight: "semibold"
+  }, title), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    className: "neeto-ui-text-gray-600 break-all",
+    style: "body1",
+    weight: "normal"
+  }, description), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+    label: t("neetoIntegrations.common.disconnect"),
+    style: "danger",
+    onClick: function onClick() {
+      return setIsDisconnectAlertOpen(true);
+    }
+  }))), /*#__PURE__*/React__default["default"].createElement(DisconnectAlert__default["default"], {
+    isDisconnecting: isDisconnecting,
+    onClose: onClose,
+    onDisconnect: onDisconnect,
+    isOpen: isDisconnectAlertOpen,
+    message: t("neetoIntegrations.".concat(integration, ".disconnect.message")),
+    title: t("neetoIntegrations.".concat(integration, ".disconnect.title"))
+  }));
+});
+
+var Manage = function Manage(_ref) {
+  var onDisconnect = _ref.onDisconnect;
+  var _useState = React.useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isDisconnectAlertOpen = _useState2[0],
+    setIsDisconnectAlertOpen = _useState2[1];
+  var _useFetchDaily = useFetchDaily(),
+    _useFetchDaily$data = _useFetchDaily.data,
+    _useFetchDaily$data2 = _useFetchDaily$data === void 0 ? {} : _useFetchDaily$data,
+    _useFetchDaily$data2$ = _useFetchDaily$data2.metadata,
+    metadata = _useFetchDaily$data2$ === void 0 ? {} : _useFetchDaily$data2$,
+    isLoading = _useFetchDaily.isLoading;
+  var _ref2 = metadata || {},
+    _ref2$apiKey = _ref2.apiKey,
+    apiKey = _ref2$apiKey === void 0 ? null : _ref2$apiKey;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var _useDestroyDaily = useDestroyDaily({
+      onSuccess: function onSuccess() {
+        setIsDisconnectAlertOpen(false);
+        onDisconnect === null || onDisconnect === void 0 ? void 0 : onDisconnect();
+      }
+    }),
+    destroyIntegration = _useDestroyDaily.mutate,
+    isDisconnecting = _useDestroyDaily.isLoading;
+  var handleDisconnect = function handleDisconnect() {
+    return destroyIntegration("daily");
+  };
+  if (isLoading || isDisconnecting) {
+    return /*#__PURE__*/React__default["default"].createElement(PageLoader__default["default"], null);
+  }
+  if (neetoCist.isNotPresent(apiKey)) {
+    onDisconnect === null || onDisconnect === void 0 ? void 0 : onDisconnect();
+  }
+  return /*#__PURE__*/React__default["default"].createElement(Manage$1, {
+    isDisconnectAlertOpen: isDisconnectAlertOpen,
+    isDisconnecting: isDisconnecting,
+    setIsDisconnectAlertOpen: setIsDisconnectAlertOpen,
+    description: t("neetoIntegrations.daily.yourApiKey", {
+      apiKey: apiKey
+    }),
+    integration: "daily",
+    title: t("neetoIntegrations.daily.connected"),
+    onClose: function onClose() {
+      return setIsDisconnectAlertOpen(false);
+    },
+    onDisconnect: handleDisconnect
+  });
+};
+
+var Daily = function Daily(_ref) {
+  var _ref$isOnboarding = _ref.isOnboarding,
+    isOnboarding = _ref$isOnboarding === void 0 ? false : _ref$isOnboarding,
+    _ref$helpDocUrl = _ref.helpDocUrl,
+    helpDocUrl = _ref$helpDocUrl === void 0 ? "" : _ref$helpDocUrl,
+    _ref$videoUrl = _ref.videoUrl,
+    videoUrl = _ref$videoUrl === void 0 ? "" : _ref$videoUrl,
+    _ref$onConnect = _ref.onConnect,
+    onConnect = _ref$onConnect === void 0 ? neetoCist.noop : _ref$onConnect,
+    _ref$onDisconnect = _ref.onDisconnect,
+    onDisconnect = _ref$onDisconnect === void 0 ? neetoCist.noop : _ref$onDisconnect;
+  var _useFetchDaily = useFetchDaily(),
+    _useFetchDaily$data = _useFetchDaily.data,
+    _useFetchDaily$data2 = _useFetchDaily$data === void 0 ? {} : _useFetchDaily$data,
+    _useFetchDaily$data2$ = _useFetchDaily$data2.metadata,
+    metadata = _useFetchDaily$data2$ === void 0 ? {} : _useFetchDaily$data2$;
+  var _ref2 = metadata || {},
+    _ref2$apiKey = _ref2.apiKey,
+    apiKey = _ref2$apiKey === void 0 ? null : _ref2$apiKey;
+  if (neetoCist.isPresent(apiKey) && !isOnboarding) {
+    return /*#__PURE__*/React__default["default"].createElement(Manage, {
+      onDisconnect: onDisconnect
+    });
+  }
+  return /*#__PURE__*/React__default["default"].createElement(Form$1, {
+    onConnect: onConnect,
+    helpDocUrl: helpDocUrl,
+    videoUrl: videoUrl
+  });
+};
+reactUtils.withTitle(Daily, i18next__default["default"].t("neetoIntegrations.browserTitles.integrations.dailyco"));
+
 var Stepper = function Stepper(_ref) {
   var _ref$steps = _ref.steps,
     steps = _ref$steps === void 0 ? {} : _ref$steps;
@@ -336,47 +691,6 @@ var TWILIO_INTEGRATION_STEPS = [{
   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) {
@@ -450,8 +764,6 @@ function _toConsumableArray(arr) {
   return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
 }
 
-var TWILIO_CONFIGURATION_BASE_URL = "/neeto_integrations/twilio/sms_configurations";
-
 var twilioApi = {
   fetchTwilioSmsConfiguration: function fetchTwilioSmsConfiguration() {
     return axios__default["default"].get(TWILIO_CONFIGURATION_BASE_URL);
@@ -469,11 +781,6 @@ var twilioApi = {
   }
 };
 
-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, {
     select: function select(response) {
@@ -488,13 +795,15 @@ var useFetchTwilioSmsConfiguration = function useFetchTwilioSmsConfiguration() {
   });
 };
 var useFetchTwilioPhoneNumbers = function useFetchTwilioPhoneNumbers(_ref) {
-  var credentials = _ref.credentials;
+  var _formRef$current, _formRef$current$valu, _formRef$current2, _formRef$current2$val;
+  var credentials = _ref.credentials,
+    formRef = _ref.formRef;
   return reactQuery.useQuery([QUERY_KEYS.TWILIO_PHONE_NUMBERS, {
     credentials: credentials
   }], function () {
     return twilioApi.getTwilioPhoneNumbers(neetoCist.keysToSnakeCase(credentials));
   }, {
-    enabled: !!(credentials !== null && credentials !== void 0 && credentials.twilio_sid) || !!(credentials !== null && credentials !== void 0 && credentials.twilioSid),
+    enabled: !!(credentials !== null && credentials !== void 0 && credentials.twilio_sid) || !!(credentials !== null && credentials !== void 0 && credentials.twilioSid) || !!(formRef !== null && formRef !== void 0 && (_formRef$current = formRef.current) !== null && _formRef$current !== void 0 && (_formRef$current$valu = _formRef$current.values) !== null && _formRef$current$valu !== void 0 && _formRef$current$valu.twilioSid) || !!(formRef !== null && formRef !== void 0 && (_formRef$current2 = formRef.current) !== null && _formRef$current2 !== void 0 && (_formRef$current2$val = _formRef$current2.values) !== null && _formRef$current2$val !== void 0 && _formRef$current2$val.twilioAuthToken),
     select: ramda.prop("phoneNumbers"),
     retry: false
   });
@@ -512,8 +821,10 @@ var useTwilio = function useTwilio(_ref) {
     onSave = _ref$onSave === void 0 ? neetoCist.noop : _ref$onSave,
     _ref$setSteps = _ref.setSteps,
     setSteps = _ref$setSteps === void 0 ? neetoCist.noop : _ref$setSteps,
-    _ref$useConnect = _ref.useConnect,
-    useConnect = _ref$useConnect === void 0 ? neetoCist.noop : _ref$useConnect;
+    _ref$onConnect = _ref.onConnect,
+    onConnect = _ref$onConnect === void 0 ? neetoCist.noop : _ref$onConnect,
+    _ref$formRef = _ref.formRef,
+    formRef = _ref$formRef === void 0 ? null : _ref$formRef;
   var _useFetchTwilioSmsCon = useFetchTwilioSmsConfiguration(),
     configuration = _useFetchTwilioSmsCon.data,
     isConfigurationLoading = _useFetchTwilioSmsCon.isLoading,
@@ -523,20 +834,14 @@ var useTwilio = function useTwilio(_ref) {
     credentials = _useStateWithDependen2[0],
     setCredentials = _useStateWithDependen2[1];
   var _useFetchTwilioPhoneN = useFetchTwilioPhoneNumbers({
-      credentials: credentials
+      credentials: credentials,
+      formRef: formRef
     }),
     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) {
@@ -561,8 +866,8 @@ var useTwilio = function useTwilio(_ref) {
     saveConfiguration(payload, {
       onSuccess: function onSuccess() {
         onSave();
-        connectTwilioApp();
         refetchTwilioSmsConfiguration();
+        onConnect === null || onConnect === void 0 ? void 0 : onConnect();
       }
     });
   };
@@ -596,17 +901,19 @@ var TwilioConfiguration = function TwilioConfiguration(_ref) {
     onSave = _ref$onSave === void 0 ? neetoCist.noop : _ref$onSave,
     _ref$setSteps = _ref.setSteps,
     setSteps = _ref$setSteps === void 0 ? neetoCist.noop : _ref$setSteps,
-    _ref$useConnect = _ref.useConnect,
-    useConnect = _ref$useConnect === void 0 ? neetoCist.noop : _ref$useConnect,
+    _ref$onConnect = _ref.onConnect,
+    onConnect = _ref$onConnect === void 0 ? neetoCist.noop : _ref$onConnect,
     _ref$isModal = _ref.isModal,
     isModal = _ref$isModal === void 0 ? false : _ref$isModal;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var initialFocusRef = React.useRef();
+  var formRef = React.useRef();
   var _useTwilio = useTwilio({
       onSave: onSave,
       setSteps: setSteps,
-      useConnect: useConnect
+      onConnect: onConnect,
+      formRef: formRef
     }),
     handleSubmit = _useTwilio.handleSubmit,
     phoneNumbers = _useTwilio.phoneNumbers,
@@ -647,7 +954,7 @@ var TwilioConfiguration = function TwilioConfiguration(_ref) {
       submitButtonProps: {
         label: phoneNumberOptions ? t("neetoIntegrations.common.saveChanges") : t("neetoIntegrations.common.verify"),
         disabled: isSubmitDisabled(values),
-        loading: isSubmitting || isPhoneNumbersLoading && !configuration.twilioAuthToken
+        loading: isSubmitting || isPhoneNumbersLoading && !(configuration !== null && configuration !== void 0 && configuration.twilioAuthToken)
       }
     });
   };
@@ -666,6 +973,7 @@ var TwilioConfiguration = function TwilioConfiguration(_ref) {
       enableReinitialize: true,
       validationSchema: buildTwilioConfigurationValidationSchema(!!phoneNumbers),
       initialValues: configuration,
+      innerRef: formRef,
       onSubmit: handleSubmit
     }
   }, function (formikProps) {
@@ -678,8 +986,8 @@ var TwilioConfiguration = function TwilioConfiguration(_ref) {
 var Twilio = function Twilio(_ref) {
   var _ref$onClose = _ref.onClose,
     onClose = _ref$onClose === void 0 ? neetoCist.noop : _ref$onClose,
-    _ref$useConnect = _ref.useConnect,
-    useConnect = _ref$useConnect === void 0 ? neetoCist.noop : _ref$useConnect;
+    _ref$onConnect = _ref.onConnect,
+    onConnect = _ref$onConnect === void 0 ? neetoCist.noop : _ref$onConnect;
   var _useState = React.useState(TWILIO_INTEGRATION_STEPS),
     _useState2 = _slicedToArray(_useState, 2),
     steps = _useState2[0],
@@ -691,8 +999,8 @@ var Twilio = function Twilio(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement(TwilioConfiguration, {
     isModal: true,
     setSteps: setSteps,
-    useConnect: useConnect,
-    onCancel: onClose
+    onCancel: onClose,
+    onConnect: onConnect
   }));
 };