@bigbinary/neeto-integrations-frontend 4.0.32 → 4.0.34

package/dist/cjs/Zoom.js

@@ -8,7 +8,7 @@ var Spinner = require('@bigbinary/neetoui/Spinner');
 var Typography = require('@bigbinary/neetoui/Typography');
 var reactI18next = require('react-i18next');
 var Manage = require('./Manage.js');
-var useZoomApi = require('../useZoomApi-B127NAGl.js');
+var useZoomApi = require('../useZoomApi-C8AUYMlp.js');
 var jsxRuntime = require('react/jsx-runtime');
 require('@babel/runtime/helpers/defineProperty');
 require('@bigbinary/neeto-commons-frontend/react-utils');
@@ -24,7 +24,7 @@ require('@bigbinary/neetoui/Alert');
 require('@tanstack/react-query');
 require('@bigbinary/neeto-commons-frontend/constants');
 require('axios');
-require('../query-CySi2Ki7.js');
+require('../query-BF3HFRA7.js');
 
 var Zoom = function Zoom(_ref) {
   var _ref$connectUrl = _ref.connectUrl,

package/dist/cjs/index.js

@@ -8,7 +8,7 @@ var Tag = require('@bigbinary/neetoui/Tag');
 var ramda = require('ramda');
 var reactI18next = require('react-i18next');
 var reactRouterDom = require('react-router-dom');
-var useDisconnectionAlertsApi = require('../useDisconnectionAlertsApi-C8Q2wbVl.js');
+var useDisconnectionAlertsApi = require('../useDisconnectionAlertsApi-CWMlpOJD.js');
 var jsxRuntime = require('react/jsx-runtime');
 var Daily = require('./Daily.js');
 var DailyForm = require('./DailyForm.js');
@@ -21,7 +21,7 @@ var Connect = require('./Connect.js');
 var Demo = require('./Demo.js');
 var Finish = require('./Finish.js');
 var WalkthroughModal = require('./WalkthroughModal.js');
-var query = require('../query-CySi2Ki7.js');
+var query = require('../query-BF3HFRA7.js');
 require('@babel/runtime/helpers/defineProperty');
 require('@bigbinary/neeto-cist');
 require('@bigbinary/neeto-commons-frontend/react-utils');
@@ -38,7 +38,7 @@ require('@tanstack/react-query');
 require('@bigbinary/neeto-commons-frontend/constants');
 require('axios');
 require('i18next');
-require('../useDailiesApi-BjcmweuZ.js');
+require('../useDailiesApi-CEJPknLb.js');
 require('@bigbinary/neeto-commons-frontend/utils');
 require('@bigbinary/neeto-icons/misc/Daily');
 require('@bigbinary/neeto-molecules/CopyToClipboardButton');
@@ -55,10 +55,10 @@ require('@bigbinary/neeto-icons/misc/GoogleCalendar');
 require('@bigbinary/neeto-icons/misc/Google');
 require('@bigbinary/neeto-molecules/PageLoader');
 require('@bigbinary/neetoui/formik/Select');
-require('../useTelnyxApi-DDTzGMgk.js');
-require('../useTwilioApi-DPyyUWOs.js');
+require('../useTelnyxApi-DS3IVijP.js');
+require('../useTwilioApi-CUL0-Xgf.js');
 require('@bigbinary/neeto-icons/misc/Zoom');
-require('../useZoomApi-B127NAGl.js');
+require('../useZoomApi-C8AUYMlp.js');
 require('@bigbinary/neetoui/Modal');
 require('classnames');
 require('../index-dxk7jTL7.js');

package/dist/cjs/v2/Daily.js

@@ -3,7 +3,7 @@
 var i18next = require('i18next');
 var neetoCist = require('@bigbinary/neeto-cist');
 var reactUtils = require('@bigbinary/neeto-commons-frontend/v2/react-utils');
-var useDailiesApi = require('../../useDailiesApi-BjcmweuZ.js');
+var useDailiesApi = require('../../useDailiesApi-CEJPknLb.js');
 var v2_DailyForm = require('./DailyForm.js');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var React = require('react');
@@ -19,7 +19,7 @@ require('@tanstack/react-query');
 require('@bigbinary/neeto-commons-frontend/constants');
 require('@bigbinary/neeto-commons-frontend/react-utils');
 require('axios');
-require('../../query-CySi2Ki7.js');
+require('../../query-BF3HFRA7.js');
 require('@bigbinary/neeto-atoms/formik');
 require('@bigbinary/neeto-molecules/v2/CardLayout');
 require('@bigbinary/neeto-molecules/v2/Container');

package/dist/cjs/v2/DailyForm.js

@@ -11,7 +11,7 @@ var Container = require('@bigbinary/neeto-molecules/v2/Container');
 var Header = require('@bigbinary/neeto-molecules/v2/Header');
 var reactI18next = require('react-i18next');
 var reactRouterDom = require('react-router-dom');
-var useDailiesApi = require('../../useDailiesApi-BjcmweuZ.js');
+var useDailiesApi = require('../../useDailiesApi-CEJPknLb.js');
 var yup = require('yup');
 var v2_WalkthroughModal = require('./WalkthroughModal.js');
 var jsxRuntime = require('react/jsx-runtime');
@@ -20,7 +20,7 @@ require('@tanstack/react-query');
 require('@bigbinary/neeto-commons-frontend/constants');
 require('@bigbinary/neeto-commons-frontend/react-utils');
 require('axios');
-require('../../query-CySi2Ki7.js');
+require('../../query-BF3HFRA7.js');
 require('@bigbinary/neeto-cist');
 require('@bigbinary/neeto-commons-frontend/v2/react-utils/withT');
 

package/dist/cjs/v2/DisconnectedIntegrationsRibbon.js

@@ -4,13 +4,13 @@ var neetoAtoms = require('@bigbinary/neeto-atoms');
 var ramda = require('ramda');
 var reactI18next = require('react-i18next');
 var reactRouterDom = require('react-router-dom');
-var useDisconnectionAlertsApi = require('../../useDisconnectionAlertsApi-C8Q2wbVl.js');
+var useDisconnectionAlertsApi = require('../../useDisconnectionAlertsApi-CWMlpOJD.js');
 var jsxRuntime = require('react/jsx-runtime');
 require('@tanstack/react-query');
 require('@bigbinary/neeto-commons-frontend/constants');
 require('@bigbinary/neeto-commons-frontend/react-utils');
 require('axios');
-require('../../query-CySi2Ki7.js');
+require('../../query-BF3HFRA7.js');
 
 var IntegrationLinks = function IntegrationLinks(_ref) {
   var alerts = _ref.alerts,

package/dist/cjs/v2/Telnyx.js

@@ -8,14 +8,14 @@ var PageLoader = require('@bigbinary/neeto-molecules/v2/PageLoader');
 var reactI18next = require('react-i18next');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var ramda = require('ramda');
-var useTelnyxApi = require('../../useTelnyxApi-DDTzGMgk.js');
+var useTelnyxApi = require('../../useTelnyxApi-DS3IVijP.js');
 var i18next = require('i18next');
 var yup = require('yup');
 var jsxRuntime = require('react/jsx-runtime');
 require('@tanstack/react-query');
 require('@bigbinary/neeto-commons-frontend/react-utils');
 require('axios');
-require('../../query-CySi2Ki7.js');
+require('../../query-BF3HFRA7.js');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);

package/dist/cjs/v2/Twilio.js

@@ -1,22 +1,23 @@
 'use strict';
 
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var React = require('react');
 var formik = require('@bigbinary/neeto-atoms/formik');
 var neetoCist = require('@bigbinary/neeto-cist');
 var CardLayout = require('@bigbinary/neeto-molecules/v2/CardLayout');
 var ramda = require('ramda');
 var reactI18next = require('react-i18next');
+var neetoAtoms = require('@bigbinary/neeto-atoms');
 var jsxRuntime = require('react/jsx-runtime');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var reactUtils = require('@bigbinary/neeto-commons-frontend/v2/react-utils');
-var useTwilioApi = require('../../useTwilioApi-DPyyUWOs.js');
+var useTwilioApi = require('../../useTwilioApi-CUL0-Xgf.js');
 var i18next = require('i18next');
 var yup = require('yup');
 require('@tanstack/react-query');
 require('@bigbinary/neeto-commons-frontend/react-utils');
 require('axios');
-require('../../query-CySi2Ki7.js');
+require('../../query-BF3HFRA7.js');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -37,13 +38,60 @@ function _interopNamespaceDefault(e) {
 
 var yup__namespace = /*#__PURE__*/_interopNamespaceDefault(yup);
 
-function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var CONNECTION_TYPES = {
+  PHONE_NUMBER: "phone_number",
+  MESSAGING_SERVICE: "messaging_service"
+};
+
+var ConnectionTypeCard = function ConnectionTypeCard(_ref) {
+  var value = _ref.value,
+    selected = _ref.selected,
+    title = _ref.title,
+    description = _ref.description,
+    _ref$recommended = _ref.recommended,
+    recommended = _ref$recommended === void 0 ? false : _ref$recommended,
+    onSelect = _ref.onSelect,
+    children = _ref.children;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var isSelected = selected === value;
+  var cardClass = "flex w-full cursor-pointer flex-col gap-y-2 neeto-ui-rounded border p-4 ".concat(isSelected ? "border-green-700 bg-green-50" : "neeto-ui-border-gray-200");
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: cardClass,
+    onClick: function onClick() {
+      return onSelect(value);
+    },
+    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex items-center gap-x-2",
+      children: [/*#__PURE__*/jsxRuntime.jsx("input", {
+        value: value,
+        checked: isSelected,
+        name: "connectionType",
+        type: "radio",
+        onChange: function onChange() {
+          return onSelect(value);
+        },
+        onClick: function onClick(e) {
+          return e.stopPropagation();
+        }
+      }), /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "font-semibold",
+        children: title
+      }), recommended && /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Badge, {
+        variant: "green-subtle",
+        label: t("neetoIntegrations.twilio.connectionType.messagingService.recommendedBadge")
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "text-sm neeto-ui-text-gray-600",
+      children: description
+    }), isSelected && children]
+  });
+};
+
 var ConfigurationForm = function ConfigurationForm(_ref) {
-  var _errors$twilioPhoneNu;
+  var _errors$twilioPhoneNu, _errors$twilioMessagi;
   var phoneNumberOptions = _ref.phoneNumberOptions,
-    _ref$selectedPhoneNum = _ref.selectedPhoneNumber,
-    selectedPhoneNumber = _ref$selectedPhoneNum === void 0 ? null : _ref$selectedPhoneNum,
+    messagingServiceOptions = _ref.messagingServiceOptions,
     _ref$initialFocusRef = _ref.initialFocusRef,
     initialFocusRef = _ref$initialFocusRef === void 0 ? null : _ref$initialFocusRef,
     _ref$isUsingOverlay = _ref.isUsingOverlay,
@@ -53,51 +101,88 @@ var ConfigurationForm = function ConfigurationForm(_ref) {
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var setFieldValue = formikProps.setFieldValue,
-    setValues = formikProps.setValues,
-    errors = formikProps.errors,
     values = formikProps.values,
-    initialValues = formikProps.initialValues;
-  React.useEffect(function () {
-    selectedPhoneNumber && setFieldValue("twilioPhoneNumber", selectedPhoneNumber);
-  }, [selectedPhoneNumber, initialValues]);
+    errors = formikProps.errors;
+  var handleConnectionTypeChange = function handleConnectionTypeChange(nextType) {
+    setFieldValue("connectionType", nextType);
+    if (nextType === CONNECTION_TYPES.PHONE_NUMBER) {
+      setFieldValue("twilioMessagingService", null);
+    } else {
+      setFieldValue("twilioPhoneNumber", null);
+    }
+  };
+  var senderOptionsAvailable = phoneNumberOptions !== null || messagingServiceOptions !== null;
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: "flex w-full flex-col gap-y-4",
-    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "flex w-full",
-      children: /*#__PURE__*/jsxRuntime.jsx(formik.Input, {
+    className: "flex w-full flex-col gap-y-6",
+    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex w-full flex-col gap-y-4",
+      children: [/*#__PURE__*/jsxRuntime.jsx(formik.Input, {
         required: true,
         autoFocus: !isUsingOverlay,
         "data-testid": "integrations-twilio-sid",
         label: t("neetoIntegrations.twilio.sid"),
         name: "twilioSid",
         ref: initialFocusRef
-      })
-    }), /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "flex w-full",
-      children: /*#__PURE__*/jsxRuntime.jsx(formik.Input, {
+      }), /*#__PURE__*/jsxRuntime.jsx(formik.Input, {
         required: true,
         "data-testid": "integrations-twilio-auth-token",
         label: t("neetoIntegrations.twilio.authToken"),
         name: "twilioAuthToken"
-      })
-    }), phoneNumberOptions && /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "flex w-full",
-      children: /*#__PURE__*/jsxRuntime.jsx(formik.Select, {
-        error: (_errors$twilioPhoneNu = errors.twilioPhoneNumber) === null || _errors$twilioPhoneNu === void 0 ? void 0 : _errors$twilioPhoneNu.value,
-        label: t("neetoIntegrations.common.phNo"),
-        name: "twilioPhoneNumber",
-        options: phoneNumberOptions,
-        size: "large",
-        onChange: function onChange(selected) {
-          return setValues(_objectSpread$1(_objectSpread$1({}, values), {}, {
-            twilioPhoneNumber: selected
-          }));
-        }
-      })
+      })]
+    }), senderOptionsAvailable && /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex w-full flex-col gap-y-4",
+      children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+        children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "font-semibold",
+          children: t("neetoIntegrations.twilio.smsSendingMethod.title")
+        }), /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "text-sm neeto-ui-text-gray-600",
+          children: t("neetoIntegrations.twilio.smsSendingMethod.subtitle")
+        })]
+      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex w-full flex-col gap-y-3",
+        children: [/*#__PURE__*/jsxRuntime.jsx(ConnectionTypeCard, {
+          selected: values.connectionType,
+          value: CONNECTION_TYPES.PHONE_NUMBER,
+          description: t("neetoIntegrations.twilio.connectionType.phoneNumber.description"),
+          title: t("neetoIntegrations.twilio.connectionType.phoneNumber.label"),
+          onSelect: handleConnectionTypeChange,
+          children: /*#__PURE__*/jsxRuntime.jsx(formik.Select, {
+            error: (_errors$twilioPhoneNu = errors.twilioPhoneNumber) === null || _errors$twilioPhoneNu === void 0 ? void 0 : _errors$twilioPhoneNu.value,
+            label: t("neetoIntegrations.common.phNo"),
+            name: "twilioPhoneNumber",
+            options: phoneNumberOptions !== null && phoneNumberOptions !== void 0 ? phoneNumberOptions : [],
+            size: "large",
+            onChange: function onChange(selected) {
+              return setFieldValue("twilioPhoneNumber", selected);
+            }
+          })
+        }), /*#__PURE__*/jsxRuntime.jsx(ConnectionTypeCard, {
+          recommended: true,
+          selected: values.connectionType,
+          value: CONNECTION_TYPES.MESSAGING_SERVICE,
+          description: t("neetoIntegrations.twilio.connectionType.messagingService.description"),
+          title: t("neetoIntegrations.twilio.connectionType.messagingService.label"),
+          onSelect: handleConnectionTypeChange,
+          children: /*#__PURE__*/jsxRuntime.jsx(formik.Select, {
+            error: (_errors$twilioMessagi = errors.twilioMessagingService) === null || _errors$twilioMessagi === void 0 ? void 0 : _errors$twilioMessagi.value,
+            label: t("neetoIntegrations.twilio.messagingService.label"),
+            name: "twilioMessagingService",
+            options: messagingServiceOptions !== null && messagingServiceOptions !== void 0 ? messagingServiceOptions : [],
+            size: "large",
+            placeholder: t("neetoIntegrations.twilio.messagingService.placeholder"),
+            onChange: function onChange(selected) {
+              return setFieldValue("twilioMessagingService", selected);
+            }
+          })
+        })]
+      })]
     })]
   });
 };
 
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var useTwilio = function useTwilio(_ref) {
   var _ref$onConnect = _ref.onConnect,
     onConnect = _ref$onConnect === void 0 ? neetoCist.noop : _ref$onConnect,
@@ -115,28 +200,37 @@ var useTwilio = function useTwilio(_ref) {
     _useStateWithDependen2 = _slicedToArray(_useStateWithDependen, 2),
     credentials = _useStateWithDependen2[0],
     setCredentials = _useStateWithDependen2[1];
-  var _useFetchTwilioPhoneN = useTwilioApi.useFetchTwilioPhoneNumbers({
+  var _useFetchTwilioSender = useTwilioApi.useFetchTwilioSenderOptions({
       credentials: credentials,
       formRef: formRef
     }),
-    phoneNumbers = _useFetchTwilioPhoneN.data,
-    isPhoneNumbersLoading = _useFetchTwilioPhoneN.isLoading;
+    senderOptions = _useFetchTwilioSender.data,
+    isSenderOptionsLoading = _useFetchTwilioSender.isLoading;
+  var phoneNumbers = senderOptions === null || senderOptions === void 0 ? void 0 : senderOptions.phoneNumbers;
+  var messagingServices = senderOptions === null || senderOptions === void 0 ? void 0 : senderOptions.messagingServices;
   var _useCreateTwilioConfi = useTwilioApi.useCreateTwilioConfiguration({
       integrable: integrable
     }),
     saveConfiguration = _useCreateTwilioConfi.mutate,
     isSubmitting = _useCreateTwilioConfi.isPending;
   var handleSubmit = function handleSubmit(values) {
-    var _values$twilioPhoneNu;
-    var payload = {
+    var _values$twilioMessagi, _values$twilioMessagi2, _values$twilioPhoneNu;
+    var credentialsPayload = {
       twilio_sid: values.twilioSid,
-      twilio_auth_token: values.twilioAuthToken,
-      twilio_phone_number_sid: (_values$twilioPhoneNu = values.twilioPhoneNumber) === null || _values$twilioPhoneNu === void 0 ? void 0 : _values$twilioPhoneNu.value
+      twilio_auth_token: values.twilioAuthToken
     };
-    if (!phoneNumbers && !(configuration !== null && configuration !== void 0 && configuration.twilioPhoneNumber)) {
-      setCredentials(payload);
+    if (!senderOptions && !(configuration !== null && configuration !== void 0 && configuration.connectionType)) {
+      setCredentials(credentialsPayload);
       return;
     }
+    var payload = values.connectionType === CONNECTION_TYPES.MESSAGING_SERVICE ? _objectSpread(_objectSpread({}, credentialsPayload), {}, {
+      connection_type: CONNECTION_TYPES.MESSAGING_SERVICE,
+      twilio_messaging_service_sid: (_values$twilioMessagi = values.twilioMessagingService) === null || _values$twilioMessagi === void 0 ? void 0 : _values$twilioMessagi.value,
+      twilio_messaging_service_friendly_name: (_values$twilioMessagi2 = values.twilioMessagingService) === null || _values$twilioMessagi2 === void 0 ? void 0 : _values$twilioMessagi2.label
+    }) : _objectSpread(_objectSpread({}, credentialsPayload), {}, {
+      connection_type: CONNECTION_TYPES.PHONE_NUMBER,
+      twilio_phone_number_sid: (_values$twilioPhoneNu = values.twilioPhoneNumber) === null || _values$twilioPhoneNu === void 0 ? void 0 : _values$twilioPhoneNu.value
+    });
     saveConfiguration(payload, {
       onSuccess: onConnect
     });
@@ -144,37 +238,64 @@ var useTwilio = function useTwilio(_ref) {
   return {
     handleSubmit: handleSubmit,
     phoneNumbers: phoneNumbers,
+    messagingServices: messagingServices,
     isConfigurationLoading: isConfigurationLoading,
-    isPhoneNumbersLoading: isPhoneNumbersLoading,
+    isSenderOptionsLoading: isSenderOptionsLoading,
     isSubmitting: isSubmitting,
     configuration: configuration
   };
 };
 
-var buildTwilioConfigurationValidationSchema = function buildTwilioConfigurationValidationSchema(isTwilioPhoneRequired) {
+var buildTwilioConfigurationValidationSchema = function buildTwilioConfigurationValidationSchema() {
   return yup__namespace.object().shape({
     twilioSid: yup__namespace.string().required(i18next.t("neetoIntegrations.twilio.validations.sidReq")),
     twilioAuthToken: yup__namespace.string().required(i18next.t("neetoIntegrations.twilio.validations.authTokenReq")),
-    twilioPhoneNumber: isTwilioPhoneRequired ? yup__namespace.object().shape({
-      label: yup__namespace.string(),
-      value: yup__namespace.string().required(i18next.t("neetoIntegrations.twilio.validations.phNumReq"))
-    }) : null
+    connectionType: yup__namespace.string().oneOf([CONNECTION_TYPES.PHONE_NUMBER, CONNECTION_TYPES.MESSAGING_SERVICE]).required(),
+    twilioPhoneNumber: yup__namespace.object().nullable().when("connectionType", {
+      is: CONNECTION_TYPES.PHONE_NUMBER,
+      then: function then(schema) {
+        return schema.shape({
+          label: yup__namespace.string(),
+          value: yup__namespace.string().required(i18next.t("neetoIntegrations.twilio.validations.phNumReq"))
+        });
+      }
+    }),
+    twilioMessagingService: yup__namespace.object().nullable().when("connectionType", {
+      is: CONNECTION_TYPES.MESSAGING_SERVICE,
+      then: function then(schema) {
+        return schema.shape({
+          label: yup__namespace.string(),
+          value: yup__namespace.string().required(i18next.t("neetoIntegrations.twilio.validations.messagingServiceReq"))
+        });
+      }
+    })
   });
 };
 var buildPhoneNumberOptions = function buildPhoneNumberOptions(phoneNumbers) {
-  return phoneNumbers === null || phoneNumbers === void 0 ? void 0 : phoneNumbers.map(function (_ref) {
+  var _phoneNumbers$map;
+  return (_phoneNumbers$map = phoneNumbers === null || phoneNumbers === void 0 ? void 0 : phoneNumbers.map(function (_ref) {
     var phoneNumber = _ref.phoneNumber,
       sid = _ref.sid;
     return {
       label: phoneNumber,
       value: sid
     };
-  });
+  })) !== null && _phoneNumbers$map !== void 0 ? _phoneNumbers$map : [];
+};
+var buildMessagingServiceOptions = function buildMessagingServiceOptions(messagingServices) {
+  var _messagingServices$ma;
+  return (_messagingServices$ma = messagingServices === null || messagingServices === void 0 ? void 0 : messagingServices.map(function (_ref2) {
+    var sid = _ref2.sid,
+      friendlyName = _ref2.friendlyName;
+    return {
+      label: friendlyName,
+      value: sid
+    };
+  })) !== null && _messagingServices$ma !== void 0 ? _messagingServices$ma : [];
 };
 
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Twilio = function Twilio(_ref) {
+  var _configuration$twilio, _configuration$twilio2;
   var _ref$integrable = _ref.integrable,
     integrable = _ref$integrable === void 0 ? null : _ref$integrable,
     _ref$onClose = _ref.onClose,
@@ -192,26 +313,37 @@ var Twilio = function Twilio(_ref) {
     }),
     handleSubmit = _useTwilio.handleSubmit,
     phoneNumbers = _useTwilio.phoneNumbers,
+    messagingServices = _useTwilio.messagingServices,
     isConfigurationLoading = _useTwilio.isConfigurationLoading,
-    isPhoneNumbersLoading = _useTwilio.isPhoneNumbersLoading,
+    isSenderOptionsLoading = _useTwilio.isSenderOptionsLoading,
     isSubmitting = _useTwilio.isSubmitting,
     configuration = _useTwilio.configuration;
   var phoneNumberOptions = buildPhoneNumberOptions(phoneNumbers);
+  var messagingServiceOptions = buildMessagingServiceOptions(messagingServices);
   var selectedPhoneNumber = neetoCist._findBy({
     label: configuration === null || configuration === void 0 ? void 0 : configuration.twilioPhoneNumber
   }, phoneNumberOptions);
-  var isLoading = isPhoneNumbersLoading || isConfigurationLoading;
+  var selectedMessagingService = neetoCist._findBy({
+    value: configuration === null || configuration === void 0 ? void 0 : configuration.twilioMessagingServiceSid
+  }, messagingServiceOptions);
+  var initialValues = {
+    twilioSid: (_configuration$twilio = configuration === null || configuration === void 0 ? void 0 : configuration.twilioSid) !== null && _configuration$twilio !== void 0 ? _configuration$twilio : "",
+    twilioAuthToken: (_configuration$twilio2 = configuration === null || configuration === void 0 ? void 0 : configuration.twilioAuthToken) !== null && _configuration$twilio2 !== void 0 ? _configuration$twilio2 : "",
+    connectionType: (configuration === null || configuration === void 0 ? void 0 : configuration.connectionType) || CONNECTION_TYPES.PHONE_NUMBER,
+    twilioPhoneNumber: selectedPhoneNumber !== null && selectedPhoneNumber !== void 0 ? selectedPhoneNumber : null,
+    twilioMessagingService: selectedMessagingService !== null && selectedMessagingService !== void 0 ? selectedMessagingService : null
+  };
+  var senderOptionsAvailable = !!phoneNumbers || !!messagingServices;
+  var isLoading = isSenderOptionsLoading || isConfigurationLoading;
   var isSubmitDisabled = function isSubmitDisabled(values) {
-    return ramda.equals(_objectSpread(_objectSpread({}, configuration), {}, {
-      twilioPhoneNumber: selectedPhoneNumber
-    }), values) || isLoading;
+    return ramda.equals(initialValues, values) || isLoading;
   };
   return /*#__PURE__*/jsxRuntime.jsx(formik.Form, {
     className: "w-full",
     formikProps: {
       enableReinitialize: true,
-      validationSchema: buildTwilioConfigurationValidationSchema(!!phoneNumbers),
-      initialValues: configuration,
+      validationSchema: buildTwilioConfigurationValidationSchema(),
+      initialValues: initialValues,
       innerRef: formRef,
       onSubmit: handleSubmit
     },
@@ -223,16 +355,16 @@ var Twilio = function Twilio(_ref) {
             onClick: onClose
           },
           submitButtonProps: {
-            label: phoneNumberOptions ? t("neetoIntegrations.common.saveChanges") : t("neetoIntegrations.common.verify"),
+            label: senderOptionsAvailable ? t("neetoIntegrations.common.saveChanges") : t("neetoIntegrations.common.verify"),
             disabled: isSubmitDisabled(formikProps.values) || isSubmitting,
-            loading: isSubmitting || isPhoneNumbersLoading && !(configuration !== null && configuration !== void 0 && configuration.twilioAuthToken)
+            loading: isSubmitting || isSenderOptionsLoading && !(configuration !== null && configuration !== void 0 && configuration.twilioAuthToken)
           }
         }),
         children: /*#__PURE__*/jsxRuntime.jsx(ConfigurationForm, {
           formikProps: formikProps,
           initialFocusRef: initialFocusRef,
-          phoneNumberOptions: phoneNumberOptions,
-          selectedPhoneNumber: selectedPhoneNumber
+          messagingServiceOptions: senderOptionsAvailable ? messagingServiceOptions : null,
+          phoneNumberOptions: senderOptionsAvailable ? phoneNumberOptions : null
         })
       });
     }