@bigbinary/neeto-integrations-frontend 2.5.2 → 2.6.0

package/dist/Twilio.js

@@ -1,17 +1,19 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { noop, keysToSnakeCase, _findBy } from '@bigbinary/neeto-cist';
+import React, { useState, useEffect, useRef } from 'react';
+import { isNotPresent, isPresent, noop, keysToSnakeCase, _findBy } from '@bigbinary/neeto-cist';
 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 { useMutationWithInvalidation, useStateWithDependency } from '@bigbinary/neeto-commons-frontend/react-utils';
+import DisconnectAlert from '@bigbinary/neeto-molecules/IntegrationDisconnectAlert';
+import WalkthroughModal from '@bigbinary/neeto-molecules/IntegrationWalkthroughModal';
+import i18next, { t as t$1 } from 'i18next';
+import { useMutationWithInvalidation, withTitle, withT, useStateWithDependency } from '@bigbinary/neeto-commons-frontend/react-utils';
+import { DEFAULT_STALE_TIME } from '@bigbinary/neeto-commons-frontend/constants';
 import { useQuery } from 'react-query';
 import axios from 'axios';
+import PageLoader from '@bigbinary/neeto-molecules/PageLoader';
+import { Button, Typography, Modal as Modal$1 } from '@bigbinary/neetoui';
+import { Form as Form$2, Input, Select, ActionBlock } from '@bigbinary/neetoui/formik';
+import { useTranslation, Trans } from 'react-i18next';
+import classnames from 'classnames';
+import { prop, equals } from 'ramda';
 import * as yup from 'yup';
 
 function _arrayWithHoles(arr) {
@@ -69,6 +71,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.post(INTEGRATIONS_ENGINE_DAILY_URL, {
+    daily: payload
+  });
+};
+var show = function show() {
+  return axios.get(INTEGRATIONS_ENGINE_DAILY_URL);
+};
+var destroy = function destroy() {
+  return axios["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 useMutationWithInvalidation(dailiesApi.create, _objectSpread$3({
+    keysToInvalidate: [QUERY_KEYS.DAILY_CO_DETAILS]
+  }, options));
+};
+var useFetchDaily = function useFetchDaily() {
+  return useQuery(QUERY_KEYS.DAILY_CO_DETAILS, dailiesApi.show, {
+    staleTime: DEFAULT_STALE_TIME
+  });
+};
+var useDestroyDaily = function useDestroyDaily(_ref) {
+  var onSuccess = _ref.onSuccess;
+  return 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.createElement("a", _extends({
+    className: classnames(["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.memo(ExternalLink);
+
+var MANAGE_DAILY_CO_FORM_INITIAL_VALUES = {
+  apiKey: ""
+};
+var DAILY_CO_VALIDATION_SCHEMA = yup.object().shape({
+  apiKey: yup.string().trim().required(t$1("neetoIntegrations.errors.required", {
+    entity: t$1("neetoIntegrations.daily.apiKey")
+  }))
+});
+
+var Form = function Form(_ref) {
+  var helpDocUrl = _ref.helpDocUrl,
+    videoUrl = _ref.videoUrl,
+    onConnect = _ref.onConnect;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useState = 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.createElement(PageLoader, null);
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: "mx-auto w-full max-w-md"
+  }, /*#__PURE__*/React.createElement(Form$2, {
+    formikProps: {
+      initialValues: MANAGE_DAILY_CO_FORM_INITIAL_VALUES,
+      validationSchema: DAILY_CO_VALIDATION_SCHEMA,
+      onSubmit: handleSubmit
+    }
+  }, function (_ref2) {
+    var dirty = _ref2.dirty;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "mt-10 w-full space-y-5"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "block"
+    }, /*#__PURE__*/React.createElement(Input, {
+      autoFocus: true,
+      required: true,
+      label: t("neetoIntegrations.daily.apiKey"),
+      name: "apiKey",
+      helpText: /*#__PURE__*/React.createElement(Trans, {
+        i18nKey: "neetoIntegrations.daily.helpDoc",
+        components: {
+          externalLink: /*#__PURE__*/React.createElement(ExternalLink$1, {
+            href: helpDocUrl,
+            rel: "noreferrer",
+            target: "_blank"
+          })
+        }
+      })
+    }), /*#__PURE__*/React.createElement(Button, {
+      className: "mt-8",
+      label: t("neetoIntegrations.daily.walkthroughText"),
+      style: "link",
+      onClick: function onClick() {
+        return setIsDemoModalOpen(true);
+      }
+    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
+      disabled: isConnecting || !dirty,
+      label: t("neetoIntegrations.common.connect"),
+      loading: isConnecting,
+      type: "submit"
+    })));
+  }), /*#__PURE__*/React.createElement(WalkthroughModal, {
+    isOpen: isDemoModalOpen,
+    videoUrl: videoUrl,
+    onClose: function onClose() {
+      return setIsDemoModalOpen(false);
+    }
+  }));
+};
+var Form$1 = withTitle(Form, i18next.t("neetoIntegrations.browserTitles.integrations.dailyco"));
+
+var Manage$1 = 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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "mx-auto w-full max-w-md"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "mt-10 w-full space-y-4"
+  }, /*#__PURE__*/React.createElement(Typography, {
+    className: "neeto-ui-text-gray-800 mb-0.5",
+    style: "h3",
+    weight: "semibold"
+  }, title), /*#__PURE__*/React.createElement(Typography, {
+    className: "neeto-ui-text-gray-600 break-all",
+    style: "body1",
+    weight: "normal"
+  }, description), /*#__PURE__*/React.createElement(Button, {
+    label: t("neetoIntegrations.common.disconnect"),
+    style: "danger",
+    onClick: function onClick() {
+      return setIsDisconnectAlertOpen(true);
+    }
+  }))), /*#__PURE__*/React.createElement(DisconnectAlert, {
+    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 = 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 = 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.createElement(PageLoader, null);
+  }
+  if (isNotPresent(apiKey)) {
+    onDisconnect === null || onDisconnect === void 0 ? void 0 : onDisconnect();
+  }
+  return /*#__PURE__*/React.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 ? noop : _ref$onConnect,
+    _ref$onDisconnect = _ref.onDisconnect,
+    onDisconnect = _ref$onDisconnect === void 0 ? 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 (isPresent(apiKey) && !isOnboarding) {
+    return /*#__PURE__*/React.createElement(Manage, {
+      onDisconnect: onDisconnect
+    });
+  }
+  return /*#__PURE__*/React.createElement(Form$1, {
+    onConnect: onConnect,
+    helpDocUrl: helpDocUrl,
+    videoUrl: videoUrl
+  });
+};
+withTitle(Daily, i18next.t("neetoIntegrations.browserTitles.integrations.dailyco"));
+
 var Stepper = function Stepper(_ref) {
   var _ref$steps = _ref.steps,
     steps = _ref$steps === void 0 ? {} : _ref$steps;
@@ -308,47 +660,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) {
@@ -422,8 +733,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.get(TWILIO_CONFIGURATION_BASE_URL);
@@ -441,11 +750,6 @@ var twilioApi = {
   }
 };
 
-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, {
     select: function select(response) {
@@ -460,13 +764,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 useQuery([QUERY_KEYS.TWILIO_PHONE_NUMBERS, {
     credentials: credentials
   }], function () {
     return twilioApi.getTwilioPhoneNumbers(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: prop("phoneNumbers"),
     retry: false
   });
@@ -484,8 +790,10 @@ var useTwilio = function useTwilio(_ref) {
     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$onConnect = _ref.onConnect,
+    onConnect = _ref$onConnect === void 0 ? noop : _ref$onConnect,
+    _ref$formRef = _ref.formRef,
+    formRef = _ref$formRef === void 0 ? null : _ref$formRef;
   var _useFetchTwilioSmsCon = useFetchTwilioSmsConfiguration(),
     configuration = _useFetchTwilioSmsCon.data,
     isConfigurationLoading = _useFetchTwilioSmsCon.isLoading,
@@ -495,20 +803,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"
-    }, {});
-  };
   useEffect(function () {
     if (!(configuration !== null && configuration !== void 0 && configuration.twilioPhoneNumber)) return;
     setSteps(function (steps) {
@@ -533,8 +835,8 @@ var useTwilio = function useTwilio(_ref) {
     saveConfiguration(payload, {
       onSuccess: function onSuccess() {
         onSave();
-        connectTwilioApp();
         refetchTwilioSmsConfiguration();
+        onConnect === null || onConnect === void 0 ? void 0 : onConnect();
       }
     });
   };
@@ -568,17 +870,19 @@ var TwilioConfiguration = function TwilioConfiguration(_ref) {
     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$onConnect = _ref.onConnect,
+    onConnect = _ref$onConnect === void 0 ? noop : _ref$onConnect,
     _ref$isModal = _ref.isModal,
     isModal = _ref$isModal === void 0 ? false : _ref$isModal;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var initialFocusRef = useRef();
+  var formRef = useRef();
   var _useTwilio = useTwilio({
       onSave: onSave,
       setSteps: setSteps,
-      useConnect: useConnect
+      onConnect: onConnect,
+      formRef: formRef
     }),
     handleSubmit = _useTwilio.handleSubmit,
     phoneNumbers = _useTwilio.phoneNumbers,
@@ -619,7 +923,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)
       }
     });
   };
@@ -632,12 +936,13 @@ var TwilioConfiguration = function TwilioConfiguration(_ref) {
       selectedPhoneNumber: selectedPhoneNumber
     });
   };
-  return /*#__PURE__*/React.createElement(Form, {
+  return /*#__PURE__*/React.createElement(Form$2, {
     className: "mx-auto flex w-full max-w-md flex-col",
     formikProps: {
       enableReinitialize: true,
       validationSchema: buildTwilioConfigurationValidationSchema(!!phoneNumbers),
       initialValues: configuration,
+      innerRef: formRef,
       onSubmit: handleSubmit
     }
   }, function (formikProps) {
@@ -650,8 +955,8 @@ var TwilioConfiguration = function TwilioConfiguration(_ref) {
 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;
+    _ref$onConnect = _ref.onConnect,
+    onConnect = _ref$onConnect === void 0 ? noop : _ref$onConnect;
   var _useState = useState(TWILIO_INTEGRATION_STEPS),
     _useState2 = _slicedToArray(_useState, 2),
     steps = _useState2[0],
@@ -663,8 +968,8 @@ var Twilio = function Twilio(_ref) {
   }, /*#__PURE__*/React.createElement(TwilioConfiguration, {
     isModal: true,
     setSteps: setSteps,
-    useConnect: useConnect,
-    onCancel: onClose
+    onCancel: onClose,
+    onConnect: onConnect
   }));
 };