@bigbinary/neeto-integrations-frontend 2.8.0 → 2.10.1

package/dist/Twilio.js

@@ -1,76 +1,14 @@
-import React, { useState, useEffect, useRef } from 'react';
-import { isNotPresent, isPresent, noop, keysToSnakeCase, _findBy } from '@bigbinary/neeto-cist';
-import '@bigbinary/neeto-molecules/IntegrationCard';
-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 React, { useEffect, useRef } from 'react';
+import { keysToSnakeCase, noop, _findBy } from '@bigbinary/neeto-cist';
+import { Input, Select, Form, ActionBlock } from '@bigbinary/neetoui/formik';
+import { prop, equals } from 'ramda';
+import { useTranslation } from 'react-i18next';
+import { useMutationWithInvalidation, useStateWithDependency } from '@bigbinary/neeto-commons-frontend/react-utils';
 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 i18next from 'i18next';
 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();
-}
-
 function _typeof(obj) {
   "@babel/helpers - typeof";
 
@@ -112,557 +50,8 @@ function _defineProperty(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",
-  ZOOM_DETAILS: "zoom-details"
-};
-
-function ownKeys$4(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$4(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$4(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$4(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$4({
-    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;
-  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 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; }
+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,
@@ -711,31 +100,73 @@ var ConfigurationForm = function ConfigurationForm(_ref) {
     options: phoneNumberOptions,
     size: "large",
     onChange: function onChange(selected) {
-      return setValues(_objectSpread$3(_objectSpread$3({}, values), {}, {
+      return setValues(_objectSpread$2(_objectSpread$2({}, values), {}, {
         twilioPhoneNumber: selected
       }));
     }
   })));
 };
 
-function _arrayWithoutHoles(arr) {
-  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
+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 _iterableToArray(iter) {
-  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+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 _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 _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 _toConsumableArray(arr) {
-  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
+function _slicedToArray(arr, i) {
+  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
 
-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 INTEGRATIONS_ENGINE_BASE_URL = "/neeto_integrations";
+var TWILIO_CONFIGURATION_BASE_URL = "".concat(INTEGRATIONS_ENGINE_BASE_URL, "/twilio/sms_configurations");
+
+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 fetchTwilioSmsConfiguration = function fetchTwilioSmsConfiguration(integrable) {
   return axios.get(TWILIO_CONFIGURATION_BASE_URL, {
     params: integrable
@@ -750,7 +181,7 @@ var getTwilioPhoneNumbers = function getTwilioPhoneNumbers(data) {
   });
 };
 var createTwilioConfiguration = function createTwilioConfiguration(payload, integrable) {
-  return axios.post(TWILIO_CONFIGURATION_BASE_URL, _objectSpread$2(_objectSpread$2({}, payload), integrable));
+  return axios.post(TWILIO_CONFIGURATION_BASE_URL, _objectSpread$1(_objectSpread$1({}, payload), integrable));
 };
 var twilioApi = {
   fetchTwilioSmsConfiguration: fetchTwilioSmsConfiguration,
@@ -759,9 +190,16 @@ var twilioApi = {
   createTwilioConfiguration: createTwilioConfiguration
 };
 
+var QUERY_KEYS = {
+  TWILIO_SMS_CONFIGURATION: "twilio-sms-configuration",
+  TWILIO_PHONE_NUMBERS: "twilio-phone-numbers",
+  DAILY_CO_DETAILS: "daily-co-details",
+  ZOOM_DETAILS: "zoom-details"
+};
+
 var useFetchTwilioSmsConfiguration = function useFetchTwilioSmsConfiguration(_ref) {
   var integrable = _ref.integrable;
-  return useQuery([QUERY_KEYS.TWILIO_SMS_CONFIGURATION, integrable === null || integrable === void 0 ? void 0 : integrable.integrableId], function () {
+  return useQuery([QUERY_KEYS.TWILIO_SMS_CONFIGURATION, integrable === null || integrable === void 0 ? void 0 : integrable.integrableType, integrable === null || integrable === void 0 ? void 0 : integrable.integrableId], function () {
     return twilioApi.fetchTwilioSmsConfiguration(integrable);
   }, {
     select: function select(response) {
@@ -776,7 +214,7 @@ var useFetchTwilioSmsConfiguration = function useFetchTwilioSmsConfiguration(_re
   });
 };
 var useFetchTwilioPhoneNumbers = function useFetchTwilioPhoneNumbers(_ref2) {
-  var _formRef$current, _formRef$current$valu, _formRef$current2, _formRef$current2$val;
+  var _formRef$current, _formRef$current2;
   var credentials = _ref2.credentials,
     formRef = _ref2.formRef;
   return useQuery([QUERY_KEYS.TWILIO_PHONE_NUMBERS, {
@@ -784,7 +222,7 @@ var useFetchTwilioPhoneNumbers = function useFetchTwilioPhoneNumbers(_ref2) {
   }], function () {
     return twilioApi.getTwilioPhoneNumbers(keysToSnakeCase(credentials));
   }, {
-    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),
+    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 = _formRef$current.values) !== null && _formRef$current !== void 0 && _formRef$current.twilioSid) || !!(formRef !== null && formRef !== void 0 && (_formRef$current2 = formRef.current) !== null && _formRef$current2 !== void 0 && (_formRef$current2 = _formRef$current2.values) !== null && _formRef$current2 !== void 0 && _formRef$current2.twilioAuthToken),
     select: prop("phoneNumbers"),
     retry: false
   });
@@ -794,16 +232,12 @@ var useCreateTwilioConfiguration = function useCreateTwilioConfiguration(_ref3)
   return useMutationWithInvalidation(function (payload) {
     return twilioApi.createTwilioConfiguration(payload, integrable);
   }, {
-    keysToInvalidate: [QUERY_KEYS.TWILIO_SMS_CONFIGURATION, integrable === null || integrable === void 0 ? void 0 : integrable.integrableId]
+    keysToInvalidate: [QUERY_KEYS.TWILIO_SMS_CONFIGURATION, integrable === null || integrable === void 0 ? void 0 : integrable.integrableType, integrable === null || integrable === void 0 ? void 0 : integrable.integrableId]
   });
 };
 
-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$setSteps = _ref.setSteps,
-    setSteps = _ref$setSteps === void 0 ? noop : _ref$setSteps,
-    _ref$onConnect = _ref.onConnect,
+  var _ref$onConnect = _ref.onConnect,
     onConnect = _ref$onConnect === void 0 ? noop : _ref$onConnect,
     _ref$formRef = _ref.formRef,
     formRef = _ref$formRef === void 0 ? null : _ref$formRef,
@@ -812,7 +246,8 @@ var useTwilio = function useTwilio(_ref) {
   var _useFetchTwilioSmsCon = useFetchTwilioSmsConfiguration({
       integrable: integrable
     }),
-    configuration = _useFetchTwilioSmsCon.data,
+    _useFetchTwilioSmsCon2 = _useFetchTwilioSmsCon.data,
+    configuration = _useFetchTwilioSmsCon2 === void 0 ? {} : _useFetchTwilioSmsCon2,
     isConfigurationLoading = _useFetchTwilioSmsCon.isLoading;
   var _useStateWithDependen = useStateWithDependency(configuration),
     _useStateWithDependen2 = _slicedToArray(_useStateWithDependen, 2),
@@ -829,16 +264,6 @@ var useTwilio = function useTwilio(_ref) {
     }),
     saveConfiguration = _useCreateTwilioConfi.mutate,
     isSubmitting = _useCreateTwilioConfi.isLoading;
-  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 = {
@@ -874,26 +299,31 @@ var buildTwilioConfigurationValidationSchema = function buildTwilioConfiguration
     }) : null
   });
 };
+var buildPhoneNumberOptions = function buildPhoneNumberOptions(phoneNumbers) {
+  return phoneNumbers === null || phoneNumbers === void 0 ? void 0 : phoneNumbers.map(function (_ref) {
+    var phoneNumber = _ref.phoneNumber,
+      sid = _ref.sid;
+    return {
+      label: phoneNumber,
+      value: sid
+    };
+  });
+};
 
 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$setSteps = _ref.setSteps,
-    setSteps = _ref$setSteps === void 0 ? noop : _ref$setSteps,
+var Twilio = function Twilio(_ref) {
+  var _ref$integrable = _ref.integrable,
+    integrable = _ref$integrable === void 0 ? null : _ref$integrable,
+    _ref$onClose = _ref.onClose,
+    onClose = _ref$onClose === void 0 ? noop : _ref$onClose,
     _ref$onConnect = _ref.onConnect,
-    onConnect = _ref$onConnect === void 0 ? noop : _ref$onConnect,
-    _ref$isModal = _ref.isModal,
-    isModal = _ref$isModal === void 0 ? false : _ref$isModal,
-    _ref$integrable = _ref.integrable,
-    integrable = _ref$integrable === void 0 ? null : _ref$integrable;
+    onConnect = _ref$onConnect === void 0 ? noop : _ref$onConnect;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var initialFocusRef = useRef();
   var formRef = useRef();
   var _useTwilio = useTwilio({
-      setSteps: setSteps,
       onConnect: onConnect,
       formRef: formRef,
       integrable: integrable
@@ -904,54 +334,18 @@ var TwilioConfiguration = function TwilioConfiguration(_ref) {
     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 phoneNumberOptions = buildPhoneNumberOptions(phoneNumbers);
   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 !== null && configuration !== void 0 && 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$2, {
-    className: "mx-auto flex w-full max-w-md flex-col",
+  return /*#__PURE__*/React.createElement(Form, {
+    className: "mx-auto flex w-full max-w-md flex-col p-5",
     formikProps: {
       enableReinitialize: true,
       validationSchema: buildTwilioConfigurationValidationSchema(!!phoneNumbers),
@@ -960,39 +354,27 @@ var TwilioConfiguration = function TwilioConfiguration(_ref) {
       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", {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ConfigurationForm, {
+      formikProps: formikProps,
+      initialFocusRef: initialFocusRef,
+      phoneNumberOptions: phoneNumberOptions,
+      selectedPhoneNumber: selectedPhoneNumber
+    }), /*#__PURE__*/React.createElement("div", {
       className: "mt-4 flex items-center gap-x-2"
-    }, renderActionBlock(formikProps.values)));
+    }, /*#__PURE__*/React.createElement(ActionBlock, {
+      cancelButtonProps: {
+        onClick: onClose,
+        disabled: false
+      },
+      className: "space-x-3",
+      submitButtonProps: {
+        label: phoneNumberOptions ? t("neetoIntegrations.common.saveChanges") : t("neetoIntegrations.common.verify"),
+        disabled: isSubmitDisabled(formikProps.values),
+        loading: isSubmitting || isPhoneNumbersLoading && !(configuration !== null && configuration !== void 0 && configuration.twilioAuthToken)
+      }
+    })));
   });
 };
 
-var Twilio = function Twilio(_ref) {
-  var _ref$integrable = _ref.integrable,
-    integrable = _ref$integrable === void 0 ? null : _ref$integrable,
-    _ref$isModal = _ref.isModal,
-    isModal = _ref$isModal === void 0 ? true : _ref$isModal,
-    _ref$isModalOpen = _ref.isModalOpen,
-    isModalOpen = _ref$isModalOpen === void 0 ? true : _ref$isModalOpen,
-    _ref$onClose = _ref.onClose,
-    onClose = _ref$onClose === void 0 ? noop : _ref$onClose,
-    _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],
-    setSteps = _useState2[1];
-  return /*#__PURE__*/React.createElement(Modal, {
-    isOpen: isModalOpen,
-    steps: steps,
-    onClose: onClose
-  }, /*#__PURE__*/React.createElement(TwilioConfiguration, {
-    integrable: integrable,
-    isModal: isModal,
-    setSteps: setSteps,
-    onCancel: onClose,
-    onConnect: onConnect
-  }));
-};
-
 export { Twilio as default };
 //# sourceMappingURL=Twilio.js.map