@bigbinary/neeto-integrations-frontend 2.4.0 → 2.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/Twilio.cjs.js +240 -71
  2. package/dist/Twilio.cjs.js.map +1 -1
  3. package/dist/Twilio.js +240 -71
  4. package/dist/Twilio.js.map +1 -1
  5. package/dist/index.cjs.js +475 -740
  6. package/dist/index.cjs.js.map +1 -1
  7. package/dist/index.js +462 -739
  8. package/dist/index.js.map +1 -1
  9. package/package.json +2 -2
package/dist/index.js CHANGED
@@ -1,302 +1,473 @@
1
+ export { default as Card } from '@bigbinary/neeto-molecules/IntegrationCard';
2
+ export { default as DisconnectAlert } from '@bigbinary/neeto-molecules/IntegrationDisconnectAlert';
3
+ export { default as WalkthroughModal } from '@bigbinary/neeto-molecules/IntegrationWalkthroughModal';
1
4
  import * as React from 'react';
2
5
  import React__default, { useEffect, useRef, useState } from 'react';
3
- import classnames from 'classnames';
4
- import { noop, isNotEmpty, keysToSnakeCase, _findBy } from '@bigbinary/neeto-commons-frontend/pure';
5
- import { joinHyphenCase } from '@bigbinary/neeto-commons-frontend/utils';
6
- import { Dropdown as Dropdown$1, Tag, Tooltip, Typography, Spinner, Button, Alert, Modal as Modal$1 } from '@bigbinary/neetoui';
7
- import { isNotNil, isEmpty, prop, equals } from 'ramda';
8
- import { useTranslation } from 'react-i18next';
9
- import { MenuVertical, Warning, Check } from '@bigbinary/neeto-icons';
6
+ import { keysToSnakeCase, noop, _findBy, isNotEmpty } from '@bigbinary/neeto-commons-frontend/pure';
10
7
  import i18next from 'i18next';
8
+ import { Modal as Modal$1, Typography, Button } from '@bigbinary/neetoui';
11
9
  import { Input, Select, Form, ActionBlock } from '@bigbinary/neetoui/formik';
10
+ import { prop, equals, isEmpty } from 'ramda';
11
+ import { useTranslation } from 'react-i18next';
12
12
  import { useStateWithDependency } from '@bigbinary/neeto-commons-frontend/react-utils';
13
13
  import { DEFAULT_STALE_TIME } from '@bigbinary/neeto-commons-frontend/constants';
14
14
  import { QueryClient, QueryCache, useQuery, useMutation } from 'react-query';
15
15
  import axios from 'axios';
16
16
  import * as yup from 'yup';
17
+ import classnames from 'classnames';
17
18
 
18
- function _extends$1() {
19
- _extends$1 = Object.assign ? Object.assign.bind() : function (target) {
20
- for (var i = 1; i < arguments.length; i++) {
21
- var source = arguments[i];
22
- for (var key in source) {
23
- if (Object.prototype.hasOwnProperty.call(source, key)) {
24
- target[key] = source[key];
25
- }
19
+ function _arrayWithHoles(arr) {
20
+ if (Array.isArray(arr)) return arr;
21
+ }
22
+
23
+ function _iterableToArrayLimit(arr, i) {
24
+ var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"];
25
+ if (null != _i) {
26
+ var _s,
27
+ _e,
28
+ _x,
29
+ _r,
30
+ _arr = [],
31
+ _n = !0,
32
+ _d = !1;
33
+ try {
34
+ if (_x = (_i = _i.call(arr)).next, 0 === i) {
35
+ if (Object(_i) !== _i) return;
36
+ _n = !1;
37
+ } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0);
38
+ } catch (err) {
39
+ _d = !0, _e = err;
40
+ } finally {
41
+ try {
42
+ if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return;
43
+ } finally {
44
+ if (_d) throw _e;
26
45
  }
27
46
  }
28
- return target;
29
- };
30
- return _extends$1.apply(this, arguments);
47
+ return _arr;
48
+ }
31
49
  }
32
50
 
33
- var renderDataCy = function renderDataCy(label, suffix) {
34
- return "".concat(label.replace(/\./g, "").toLowerCase(), "-").concat(suffix);
35
- };
51
+ function _arrayLikeToArray(arr, len) {
52
+ if (len == null || len > arr.length) len = arr.length;
53
+ for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
54
+ return arr2;
55
+ }
36
56
 
37
- var Menu = Dropdown$1.Menu,
38
- MenuItem = Dropdown$1.MenuItem;
39
- var Dropdown = function Dropdown(_ref) {
40
- var _ref$customDropDown = _ref.customDropDown,
41
- CustomDropdown = _ref$customDropDown === void 0 ? {} : _ref$customDropDown,
42
- _ref$handleManage = _ref.handleManage,
43
- handleManage = _ref$handleManage === void 0 ? noop : _ref$handleManage,
44
- _ref$hideDisconnect = _ref.hideDisconnect,
45
- hideDisconnect = _ref$hideDisconnect === void 0 ? false : _ref$hideDisconnect,
46
- _ref$onDisconnect = _ref.onDisconnect,
47
- onDisconnect = _ref$onDisconnect === void 0 ? noop : _ref$onDisconnect;
48
- var _useTranslation = useTranslation(),
49
- t = _useTranslation.t;
50
- var isManageable = isNotNil(handleManage);
51
- if (isNotNil(CustomDropdown)) {
52
- return CustomDropdown;
53
- }
54
- if (!isManageable && hideDisconnect) {
55
- return null;
56
- }
57
- return /*#__PURE__*/React__default.createElement(Dropdown$1, {
58
- buttonProps: {
59
- onClick: function onClick(e) {
60
- return e.stopPropagation();
61
- }
62
- },
63
- buttonStyle: "text",
64
- dropdownProps: {
65
- onClick: function onClick(e) {
66
- return e.stopPropagation();
67
- }
68
- },
69
- icon: MenuVertical
70
- }, /*#__PURE__*/React__default.createElement(Menu, null, isManageable && /*#__PURE__*/React__default.createElement(MenuItem.Button, {
71
- onClick: function onClick() {
72
- return handleManage();
73
- }
74
- }, t("neetoIntegrations.common.manage")), !hideDisconnect && /*#__PURE__*/React__default.createElement(MenuItem.Button, {
75
- onClick: function onClick() {
76
- return onDisconnect();
77
- }
78
- }, t("neetoIntegrations.common.disconnect"))));
79
- };
57
+ function _unsupportedIterableToArray(o, minLen) {
58
+ if (!o) return;
59
+ if (typeof o === "string") return _arrayLikeToArray(o, minLen);
60
+ var n = Object.prototype.toString.call(o).slice(8, -1);
61
+ if (n === "Object" && o.constructor) n = o.constructor.name;
62
+ if (n === "Map" || n === "Set") return Array.from(o);
63
+ if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
64
+ }
80
65
 
81
- var Status = function Status(_ref) {
82
- var isExpired = _ref.isExpired;
83
- var _useTranslation = useTranslation(),
84
- t = _useTranslation.t;
85
- var tagProps = isExpired ? {
86
- icon: Warning,
87
- label: t("neetoIntegrations.tags.expired"),
88
- style: "warning"
89
- } : {
90
- icon: Check,
91
- label: t("neetoIntegrations.tags.connected"),
92
- style: "success"
93
- };
94
- return /*#__PURE__*/React__default.createElement(Tag, _extends$1({
95
- className: "flex-row-reverse"
96
- }, tagProps));
97
- };
66
+ function _nonIterableRest() {
67
+ throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
68
+ }
98
69
 
99
- function _objectWithoutPropertiesLoose(source, excluded) {
100
- if (source == null) return {};
101
- var target = {};
102
- var sourceKeys = Object.keys(source);
103
- var key, i;
104
- for (i = 0; i < sourceKeys.length; i++) {
105
- key = sourceKeys[i];
106
- if (excluded.indexOf(key) >= 0) continue;
107
- target[key] = source[key];
108
- }
109
- return target;
70
+ function _slicedToArray(arr, i) {
71
+ return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
110
72
  }
111
73
 
112
- function _objectWithoutProperties(source, excluded) {
113
- if (source == null) return {};
114
- var target = _objectWithoutPropertiesLoose(source, excluded);
115
- var key, i;
116
- if (Object.getOwnPropertySymbols) {
117
- var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
118
- for (i = 0; i < sourceSymbolKeys.length; i++) {
119
- key = sourceSymbolKeys[i];
120
- if (excluded.indexOf(key) >= 0) continue;
121
- if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
122
- target[key] = source[key];
123
- }
74
+ var TWILIO_INTEGRATION_STEPS = [{
75
+ step: "1",
76
+ label: i18next.t("neetoIntegrations.steps.configure"),
77
+ isActive: true,
78
+ isCompleted: false
79
+ }];
80
+
81
+ function _typeof(obj) {
82
+ "@babel/helpers - typeof";
83
+
84
+ return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
85
+ return typeof obj;
86
+ } : function (obj) {
87
+ return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
88
+ }, _typeof(obj);
89
+ }
90
+
91
+ function _toPrimitive(input, hint) {
92
+ if (_typeof(input) !== "object" || input === null) return input;
93
+ var prim = input[Symbol.toPrimitive];
94
+ if (prim !== undefined) {
95
+ var res = prim.call(input, hint || "default");
96
+ if (_typeof(res) !== "object") return res;
97
+ throw new TypeError("@@toPrimitive must return a primitive value.");
124
98
  }
125
- return target;
99
+ return (hint === "string" ? String : Number)(input);
126
100
  }
127
101
 
128
- var _excluded$1 = ["disabled", "children"];
129
- var TooltipWrapper = function TooltipWrapper(_ref) {
130
- var disabled = _ref.disabled,
131
- children = _ref.children,
132
- tooltipProps = _objectWithoutProperties(_ref, _excluded$1);
133
- return disabled ? /*#__PURE__*/React__default.createElement(Tooltip, tooltipProps, children) : children;
134
- };
102
+ function _toPropertyKey(arg) {
103
+ var key = _toPrimitive(arg, "string");
104
+ return _typeof(key) === "symbol" ? key : String(key);
105
+ }
135
106
 
136
- var Card = function Card(_ref) {
137
- var Icon = _ref.icon,
138
- _ref$subIcons = _ref.subIcons,
139
- subIcons = _ref$subIcons === void 0 ? [] : _ref$subIcons,
140
- _ref$label = _ref.label,
141
- label = _ref$label === void 0 ? "" : _ref$label,
142
- _ref$description = _ref.description,
143
- description = _ref$description === void 0 ? "" : _ref$description,
144
- _ref$className = _ref.className,
145
- className = _ref$className === void 0 ? "" : _ref$className,
146
- _ref$onConnect = _ref.onConnect,
147
- onConnect = _ref$onConnect === void 0 ? noop : _ref$onConnect,
148
- _ref$onDisconnect = _ref.onDisconnect,
149
- onDisconnect = _ref$onDisconnect === void 0 ? noop : _ref$onDisconnect,
150
- _ref$onManage = _ref.onManage,
151
- onManage = _ref$onManage === void 0 ? undefined : _ref$onManage,
152
- _ref$isLoading = _ref.isLoading,
153
- isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
154
- _ref$isConnected = _ref.isConnected,
155
- isConnected = _ref$isConnected === void 0 ? false : _ref$isConnected,
156
- _ref$isFailed = _ref.isFailed,
157
- isFailed = _ref$isFailed === void 0 ? false : _ref$isFailed,
158
- _ref$isExpired = _ref.isExpired,
159
- isExpired = _ref$isExpired === void 0 ? false : _ref$isExpired,
160
- _ref$disabled = _ref.disabled,
161
- disabled = _ref$disabled === void 0 ? false : _ref$disabled,
162
- _ref$hidden = _ref.hidden,
163
- hidden = _ref$hidden === void 0 ? false : _ref$hidden,
164
- _ref$hideDisconnect = _ref.hideDisconnect,
165
- hideDisconnect = _ref$hideDisconnect === void 0 ? false : _ref$hideDisconnect,
166
- _ref$onClick = _ref.onClick,
167
- onCardClick = _ref$onClick === void 0 ? undefined : _ref$onClick,
168
- _ref$tooltipProps = _ref.tooltipProps,
169
- tooltipProps = _ref$tooltipProps === void 0 ? {} : _ref$tooltipProps,
170
- _ref$customDropDown = _ref.customDropDown,
171
- customDropDown = _ref$customDropDown === void 0 ? null : _ref$customDropDown,
172
- children = _ref.children;
107
+ function _defineProperty(obj, key, value) {
108
+ key = _toPropertyKey(key);
109
+ if (key in obj) {
110
+ Object.defineProperty(obj, key, {
111
+ value: value,
112
+ enumerable: true,
113
+ configurable: true,
114
+ writable: true
115
+ });
116
+ } else {
117
+ obj[key] = value;
118
+ }
119
+ return obj;
120
+ }
121
+
122
+ 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; }
123
+ 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; }
124
+ var ConfigurationForm = function ConfigurationForm(_ref) {
125
+ var _errors$twilioPhoneNu;
126
+ var phoneNumberOptions = _ref.phoneNumberOptions,
127
+ _ref$selectedPhoneNum = _ref.selectedPhoneNumber,
128
+ selectedPhoneNumber = _ref$selectedPhoneNum === void 0 ? null : _ref$selectedPhoneNum,
129
+ _ref$initialFocusRef = _ref.initialFocusRef,
130
+ initialFocusRef = _ref$initialFocusRef === void 0 ? null : _ref$initialFocusRef,
131
+ _ref$isUsingOverlay = _ref.isUsingOverlay,
132
+ isUsingOverlay = _ref$isUsingOverlay === void 0 ? false : _ref$isUsingOverlay,
133
+ _ref$formikProps = _ref.formikProps,
134
+ formikProps = _ref$formikProps === void 0 ? {} : _ref$formikProps;
173
135
  var _useTranslation = useTranslation(),
174
136
  t = _useTranslation.t;
175
- var cardProps = function cardProps() {
176
- return isConnected && isNotNil(onCardClick) ? {
177
- onClick: onCardClick
178
- } : {};
179
- };
180
- return /*#__PURE__*/React__default.createElement(TooltipWrapper, _extends$1({
181
- disabled: disabled,
182
- position: "top",
183
- content: disabled && t("neetoIntegrations.tooltip.integrationNotAvailable")
184
- }, tooltipProps), /*#__PURE__*/React__default.createElement("div", _extends$1({
185
- className: classnames("outline-none neeto-ui-border-gray-300 neeto-ui-shadow-xs hover:neeto-ui-border-gray-500 focus:neeto-ui-border-gray-500 neeto-ui-rounded-lg flex flex-col border p-6 no-underline transition-colors", {
186
- "hover:neeto-ui-bg-100 cursor-not-allowed opacity-50": disabled,
187
- "cursor-pointer": isConnected && isNotNil(onCardClick),
188
- hidden: hidden
189
- }, className)
190
- }, cardProps()), /*#__PURE__*/React__default.createElement("div", {
191
- className: "flex flex-grow justify-between",
192
- "data-cy": "integration-tabs"
193
- }, /*#__PURE__*/React__default.createElement("div", {
194
- className: "flex min-w-0 flex-col justify-end"
137
+ var setFieldValue = formikProps.setFieldValue,
138
+ setValues = formikProps.setValues,
139
+ errors = formikProps.errors,
140
+ values = formikProps.values,
141
+ initialValues = formikProps.initialValues;
142
+ useEffect(function () {
143
+ selectedPhoneNumber && setFieldValue("twilioPhoneNumber", selectedPhoneNumber);
144
+ }, [selectedPhoneNumber, initialValues]);
145
+ return /*#__PURE__*/React__default.createElement("div", {
146
+ className: "flex w-full flex-col gap-4"
195
147
  }, /*#__PURE__*/React__default.createElement("div", {
196
- className: "relative mb-4 flex h-8"
197
- }, Icon && /*#__PURE__*/React__default.createElement(Icon, {
198
- className: "neeto-ui-text-gray-600",
199
- size: 32
148
+ className: "flex w-full"
149
+ }, /*#__PURE__*/React__default.createElement(Input, {
150
+ required: true,
151
+ autoFocus: !isUsingOverlay,
152
+ "data-testid": "integrations-twilio-sid",
153
+ label: t("neetoIntegrations.twilio.sid"),
154
+ name: "twilioSid",
155
+ ref: initialFocusRef
200
156
  })), /*#__PURE__*/React__default.createElement("div", {
201
- className: "my-auto"
202
- }, /*#__PURE__*/React__default.createElement(Typography, {
203
- className: "mb-2",
204
- "data-cy": renderDataCy(label, "integration-card-label"),
205
- style: "h4",
206
- weight: "semibold"
207
- }, label), /*#__PURE__*/React__default.createElement(Typography, {
208
- className: "break-words",
209
- "data-cy": "".concat(joinHyphenCase(label), "-integration-description"),
210
- style: "body2"
211
- }, description), children)), isNotEmpty(subIcons) && /*#__PURE__*/React__default.createElement("div", {
212
- className: "flex h-24 flex-col gap-2"
213
- }, subIcons.map(function (Icon) {
214
- return /*#__PURE__*/React__default.createElement(Icon, {
215
- className: "neeto-ui-text-gray-600",
216
- key: Icon,
217
- size: 24
157
+ className: "flex w-full"
158
+ }, /*#__PURE__*/React__default.createElement(Input, {
159
+ required: true,
160
+ "data-testid": "integrations-twilio-auth-token",
161
+ label: t("neetoIntegrations.twilio.authToken"),
162
+ name: "twilioAuthToken"
163
+ })), phoneNumberOptions && /*#__PURE__*/React__default.createElement("div", {
164
+ className: "flex w-full"
165
+ }, /*#__PURE__*/React__default.createElement(Select, {
166
+ error: (_errors$twilioPhoneNu = errors.twilioPhoneNumber) === null || _errors$twilioPhoneNu === void 0 ? void 0 : _errors$twilioPhoneNu.value,
167
+ label: t("neetoIntegrations.common.phNo"),
168
+ name: "twilioPhoneNumber",
169
+ options: phoneNumberOptions,
170
+ size: "large",
171
+ onChange: function onChange(selected) {
172
+ return setValues(_objectSpread$2(_objectSpread$2({}, values), {}, {
173
+ twilioPhoneNumber: selected
174
+ }));
175
+ }
176
+ })));
177
+ };
178
+
179
+ function _arrayWithoutHoles(arr) {
180
+ if (Array.isArray(arr)) return _arrayLikeToArray(arr);
181
+ }
182
+
183
+ function _iterableToArray(iter) {
184
+ if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
185
+ }
186
+
187
+ function _nonIterableSpread() {
188
+ throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
189
+ }
190
+
191
+ function _toConsumableArray(arr) {
192
+ return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
193
+ }
194
+
195
+ var queryClient = new QueryClient({
196
+ queryCache: new QueryCache()
197
+ });
198
+
199
+ var TWILIO_CONFIGURATION_BASE_URL = "/neeto_integrations/twilio/sms_configurations";
200
+
201
+ var twilioApi = {
202
+ fetchTwilioSmsConfiguration: function fetchTwilioSmsConfiguration() {
203
+ return axios.get(TWILIO_CONFIGURATION_BASE_URL);
204
+ },
205
+ removeTwilioConfiguration: function removeTwilioConfiguration() {
206
+ return axios["delete"](TWILIO_CONFIGURATION_BASE_URL);
207
+ },
208
+ getTwilioPhoneNumbers: function getTwilioPhoneNumbers(data) {
209
+ return axios.get("".concat(TWILIO_CONFIGURATION_BASE_URL, "/new"), {
210
+ params: data
218
211
  });
219
- }))), /*#__PURE__*/React__default.createElement("div", {
220
- className: "neeto-ui-border-gray-300 mt-4 w-full border-t pt-2"
221
- }, isLoading ? /*#__PURE__*/React__default.createElement("div", {
222
- className: "mt-3 flex items-center justify-start"
223
- }, /*#__PURE__*/React__default.createElement(Spinner, null)) : /*#__PURE__*/React__default.createElement("div", {
224
- className: "flex h-8 items-center justify-between"
225
- }, isConnected && /*#__PURE__*/React__default.createElement(Status, {
226
- isExpired: isExpired
227
- }), isFailed && /*#__PURE__*/React__default.createElement(Button, {
228
- className: "neeto-ui-text-warning-500",
229
- "data-cy": renderDataCy(label, "connect-button"),
230
- disabled: disabled || isLoading,
231
- label: t("neetoIntegrations.common.tryAgain"),
232
- style: "link",
233
- onClick: onConnect
234
- }), !isConnected && !isFailed && /*#__PURE__*/React__default.createElement(Button, {
235
- "data-cy": renderDataCy(label, "connect-button"),
236
- disabled: disabled || isLoading,
237
- label: t("neetoIntegrations.common.connect"),
238
- style: "link",
239
- onClick: onConnect
240
- }), (isConnected || isFailed) && /*#__PURE__*/React__default.createElement(Dropdown, {
241
- customDropDown: customDropDown,
242
- handleManage: onManage,
243
- hideDisconnect: hideDisconnect,
244
- onDisconnect: onDisconnect
245
- })))));
212
+ },
213
+ createTwilioConfiguration: function createTwilioConfiguration(payload) {
214
+ return axios.post(TWILIO_CONFIGURATION_BASE_URL, payload);
215
+ }
246
216
  };
247
217
 
248
- var _excluded = ["isOpen", "isDisconnecting", "title", "message", "onClose", "onDisconnect"];
249
- var DisconnectAlert = function DisconnectAlert(_ref) {
250
- var _ref$isOpen = _ref.isOpen,
251
- isOpen = _ref$isOpen === void 0 ? false : _ref$isOpen,
252
- _ref$isDisconnecting = _ref.isDisconnecting,
253
- isDisconnecting = _ref$isDisconnecting === void 0 ? false : _ref$isDisconnecting,
254
- _ref$title = _ref.title,
255
- title = _ref$title === void 0 ? "" : _ref$title,
256
- _ref$message = _ref.message,
257
- message = _ref$message === void 0 ? "" : _ref$message,
258
- _ref$onClose = _ref.onClose,
259
- onClose = _ref$onClose === void 0 ? noop : _ref$onClose,
260
- _ref$onDisconnect = _ref.onDisconnect,
261
- onDisconnect = _ref$onDisconnect === void 0 ? noop : _ref$onDisconnect,
262
- otherProps = _objectWithoutProperties(_ref, _excluded);
263
- var _useTranslation = useTranslation(),
264
- t = _useTranslation.t;
265
- return /*#__PURE__*/React__default.createElement(Alert, _extends$1({
266
- closeOnEsc: true,
267
- closeOnOutsideClick: true,
268
- isOpen: isOpen,
269
- isSubmitting: isDisconnecting,
270
- message: message,
271
- submitButtonLabel: t("neetoIntegrations.common.disconnect"),
272
- title: title,
273
- onClose: onClose,
274
- onSubmit: onDisconnect
275
- }, otherProps));
218
+ var QUERY_KEYS = {
219
+ TWILIO_SMS_CONFIGURATION: "twilio-sms-configuration",
220
+ TWILIO_PHONE_NUMBERS: "twilio-phone-numbers"
276
221
  };
277
222
 
278
- var Stepper = function Stepper(_ref) {
279
- var _ref$steps = _ref.steps,
280
- steps = _ref$steps === void 0 ? {} : _ref$steps;
281
- var isActiveOrCompleted = function isActiveOrCompleted(activeStatus, completedStatus) {
282
- return activeStatus || completedStatus;
283
- };
284
- return /*#__PURE__*/React__default.createElement("ul", {
285
- className: "flex gap-4"
286
- }, steps === null || steps === void 0 ? void 0 : steps.map(function (_ref2) {
287
- var step = _ref2.step,
288
- label = _ref2.label,
289
- isActive = _ref2.isActive,
290
- isCompleted = _ref2.isCompleted;
291
- return /*#__PURE__*/React__default.createElement("li", {
292
- className: "flex items-center gap-4",
293
- key: step
294
- }, step !== "1" && /*#__PURE__*/React__default.createElement("div", {
295
- className: classnames("w-10 border-b", {
296
- "neeto-ui-border-gray-800": isActiveOrCompleted(isActive, isCompleted),
297
- "neeto-ui-border-gray-400": !isActiveOrCompleted(isActive, isCompleted)
298
- })
299
- }), /*#__PURE__*/React__default.createElement("div", {
223
+ var useFetchTwilioSmsConfiguration = function useFetchTwilioSmsConfiguration() {
224
+ return useQuery(QUERY_KEYS.TWILIO_SMS_CONFIGURATION, twilioApi.fetchTwilioSmsConfiguration, {
225
+ staleTime: DEFAULT_STALE_TIME,
226
+ select: function select(response) {
227
+ var _smsConfiguration$twi, _smsConfiguration$twi2, _smsConfiguration$twi3;
228
+ var smsConfiguration = response.smsConfiguration;
229
+ return {
230
+ twilioSid: (_smsConfiguration$twi = smsConfiguration === null || smsConfiguration === void 0 ? void 0 : smsConfiguration.twilioSid) !== null && _smsConfiguration$twi !== void 0 ? _smsConfiguration$twi : "",
231
+ twilioAuthToken: (_smsConfiguration$twi2 = smsConfiguration === null || smsConfiguration === void 0 ? void 0 : smsConfiguration.twilioAuthToken) !== null && _smsConfiguration$twi2 !== void 0 ? _smsConfiguration$twi2 : "",
232
+ twilioPhoneNumber: (_smsConfiguration$twi3 = smsConfiguration === null || smsConfiguration === void 0 ? void 0 : smsConfiguration.twilioPhoneNumber) !== null && _smsConfiguration$twi3 !== void 0 ? _smsConfiguration$twi3 : ""
233
+ };
234
+ }
235
+ });
236
+ };
237
+ var useFetchTwilioPhoneNumbers = function useFetchTwilioPhoneNumbers(_ref) {
238
+ var credentials = _ref.credentials;
239
+ return useQuery([QUERY_KEYS.TWILIO_PHONE_NUMBERS, {
240
+ credentials: credentials
241
+ }], function () {
242
+ return twilioApi.getTwilioPhoneNumbers(keysToSnakeCase(credentials));
243
+ }, {
244
+ staleTime: DEFAULT_STALE_TIME,
245
+ enabled: !!(credentials !== null && credentials !== void 0 && credentials.twilio_sid) || !!(credentials !== null && credentials !== void 0 && credentials.twilioSid),
246
+ select: prop("phoneNumbers"),
247
+ retry: false
248
+ });
249
+ };
250
+ var useCreateTwilioConfiguration = function useCreateTwilioConfiguration() {
251
+ return useMutation(twilioApi.createTwilioConfiguration, {
252
+ onSuccess: function onSuccess() {
253
+ return queryClient.invalidateQueries(QUERY_KEYS.TWILIO_SMS_CONFIGURATION);
254
+ }
255
+ });
256
+ };
257
+
258
+ 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; }
259
+ 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; }
260
+ var useTwilio = function useTwilio(_ref) {
261
+ var _ref$onSave = _ref.onSave,
262
+ onSave = _ref$onSave === void 0 ? noop : _ref$onSave,
263
+ _ref$setSteps = _ref.setSteps,
264
+ setSteps = _ref$setSteps === void 0 ? noop : _ref$setSteps,
265
+ _ref$useConnect = _ref.useConnect,
266
+ useConnect = _ref$useConnect === void 0 ? noop : _ref$useConnect;
267
+ var _useFetchTwilioSmsCon = useFetchTwilioSmsConfiguration(),
268
+ configuration = _useFetchTwilioSmsCon.data,
269
+ isConfigurationLoading = _useFetchTwilioSmsCon.isLoading,
270
+ refetchTwilioSmsConfiguration = _useFetchTwilioSmsCon.refetch;
271
+ var _useStateWithDependen = useStateWithDependency(configuration),
272
+ _useStateWithDependen2 = _slicedToArray(_useStateWithDependen, 2),
273
+ credentials = _useStateWithDependen2[0],
274
+ setCredentials = _useStateWithDependen2[1];
275
+ var _useFetchTwilioPhoneN = useFetchTwilioPhoneNumbers({
276
+ credentials: credentials
277
+ }),
278
+ phoneNumbers = _useFetchTwilioPhoneN.data,
279
+ isPhoneNumbersLoading = _useFetchTwilioPhoneN.isLoading;
280
+ var _useCreateTwilioConfi = useCreateTwilioConfiguration(),
281
+ saveConfiguration = _useCreateTwilioConfi.mutate,
282
+ isSubmitting = _useCreateTwilioConfi.isLoading;
283
+ var _useConnect = useConnect(),
284
+ installIntegration = _useConnect.mutate;
285
+ var connectTwilioApp = function connectTwilioApp() {
286
+ return installIntegration({
287
+ id: "twilio"
288
+ }, {});
289
+ };
290
+ useEffect(function () {
291
+ if (!(configuration !== null && configuration !== void 0 && configuration.twilioPhoneNumber)) return;
292
+ setSteps(function (steps) {
293
+ var stepsClone = _toConsumableArray(steps);
294
+ stepsClone[0] = _objectSpread$1(_objectSpread$1({}, steps[0]), {}, {
295
+ isCompleted: true
296
+ });
297
+ return stepsClone;
298
+ });
299
+ }, [configuration]);
300
+ var handleSubmit = function handleSubmit(values) {
301
+ var _values$twilioPhoneNu;
302
+ var payload = {
303
+ twilio_sid: values.twilioSid,
304
+ twilio_auth_token: values.twilioAuthToken,
305
+ twilio_phone_number_sid: (_values$twilioPhoneNu = values.twilioPhoneNumber) === null || _values$twilioPhoneNu === void 0 ? void 0 : _values$twilioPhoneNu.value
306
+ };
307
+ if (!phoneNumbers && !(configuration !== null && configuration !== void 0 && configuration.twilioPhoneNumber)) {
308
+ setCredentials(payload);
309
+ return;
310
+ }
311
+ saveConfiguration(payload, {
312
+ onSuccess: function onSuccess() {
313
+ onSave();
314
+ connectTwilioApp();
315
+ refetchTwilioSmsConfiguration();
316
+ }
317
+ });
318
+ };
319
+ return {
320
+ handleSubmit: handleSubmit,
321
+ phoneNumbers: phoneNumbers,
322
+ isConfigurationLoading: isConfigurationLoading,
323
+ isPhoneNumbersLoading: isPhoneNumbersLoading,
324
+ isSubmitting: isSubmitting,
325
+ configuration: configuration
326
+ };
327
+ };
328
+
329
+ var buildTwilioConfigurationValidationSchema = function buildTwilioConfigurationValidationSchema(isTwilioPhoneRequired) {
330
+ return yup.object().shape({
331
+ twilioSid: yup.string().required(i18next.t("neetoIntegrations.twilio.validations.sidReq")),
332
+ twilioAuthToken: yup.string().required(i18next.t("neetoIntegrations.twilio.validations.authTokenReq")),
333
+ twilioPhoneNumber: isTwilioPhoneRequired ? yup.object().shape({
334
+ label: yup.string(),
335
+ value: yup.string().required(i18next.t("neetoIntegrations.twilio.validations.phNumReq"))
336
+ }) : null
337
+ });
338
+ };
339
+
340
+ 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; }
341
+ 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; }
342
+ var TwilioConfiguration = function TwilioConfiguration(_ref) {
343
+ var _ref$onCancel = _ref.onCancel,
344
+ onCancel = _ref$onCancel === void 0 ? noop : _ref$onCancel,
345
+ _ref$onSave = _ref.onSave,
346
+ onSave = _ref$onSave === void 0 ? noop : _ref$onSave,
347
+ _ref$setSteps = _ref.setSteps,
348
+ setSteps = _ref$setSteps === void 0 ? noop : _ref$setSteps,
349
+ _ref$useConnect = _ref.useConnect,
350
+ useConnect = _ref$useConnect === void 0 ? noop : _ref$useConnect,
351
+ _ref$isModal = _ref.isModal,
352
+ isModal = _ref$isModal === void 0 ? false : _ref$isModal;
353
+ var _useTranslation = useTranslation(),
354
+ t = _useTranslation.t;
355
+ var initialFocusRef = useRef();
356
+ var _useTwilio = useTwilio({
357
+ onSave: onSave,
358
+ setSteps: setSteps,
359
+ useConnect: useConnect
360
+ }),
361
+ handleSubmit = _useTwilio.handleSubmit,
362
+ phoneNumbers = _useTwilio.phoneNumbers,
363
+ isConfigurationLoading = _useTwilio.isConfigurationLoading,
364
+ isPhoneNumbersLoading = _useTwilio.isPhoneNumbersLoading,
365
+ isSubmitting = _useTwilio.isSubmitting,
366
+ configuration = _useTwilio.configuration;
367
+ var phoneNumberOptions = phoneNumbers === null || phoneNumbers === void 0 ? void 0 : phoneNumbers.map(function (_ref2) {
368
+ var phoneNumber = _ref2.phoneNumber,
369
+ sid = _ref2.sid;
370
+ return {
371
+ label: phoneNumber,
372
+ value: sid
373
+ };
374
+ });
375
+ var selectedPhoneNumber = _findBy({
376
+ label: configuration === null || configuration === void 0 ? void 0 : configuration.twilioPhoneNumber
377
+ }, phoneNumberOptions);
378
+ var wrapInModalBody = function wrapInModalBody(children) {
379
+ return /*#__PURE__*/React__default.createElement(Modal$1.Body, null, children);
380
+ };
381
+ var wrapInModalFooter = function wrapInModalFooter(children) {
382
+ return /*#__PURE__*/React__default.createElement(Modal$1.Footer, null, children);
383
+ };
384
+ var isLoading = isPhoneNumbersLoading || isConfigurationLoading;
385
+ var isSubmitDisabled = function isSubmitDisabled(values) {
386
+ return equals(_objectSpread(_objectSpread({}, configuration), {}, {
387
+ twilioPhoneNumber: selectedPhoneNumber
388
+ }), values) || isLoading;
389
+ };
390
+ var renderActionBlock = function renderActionBlock(values) {
391
+ return /*#__PURE__*/React__default.createElement(ActionBlock, {
392
+ cancelButtonProps: {
393
+ onClick: onCancel,
394
+ disabled: false
395
+ },
396
+ className: "space-x-3",
397
+ submitButtonProps: {
398
+ label: phoneNumberOptions ? t("neetoIntegrations.common.saveChanges") : t("neetoIntegrations.common.verify"),
399
+ disabled: isSubmitDisabled(values),
400
+ loading: isSubmitting || isPhoneNumbersLoading && !configuration.twilioAuthToken
401
+ }
402
+ });
403
+ };
404
+ var renderForm = function renderForm(formikProps) {
405
+ return /*#__PURE__*/React__default.createElement(ConfigurationForm, {
406
+ formikProps: formikProps,
407
+ initialFocusRef: initialFocusRef,
408
+ isUsingOverlay: isModal,
409
+ phoneNumberOptions: phoneNumberOptions,
410
+ selectedPhoneNumber: selectedPhoneNumber
411
+ });
412
+ };
413
+ return /*#__PURE__*/React__default.createElement(Form, {
414
+ className: "mx-auto flex w-full max-w-md flex-col",
415
+ formikProps: {
416
+ enableReinitialize: true,
417
+ validationSchema: buildTwilioConfigurationValidationSchema(!!phoneNumbers),
418
+ initialValues: configuration,
419
+ onSubmit: handleSubmit
420
+ }
421
+ }, function (formikProps) {
422
+ return isModal ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, wrapInModalBody(renderForm(formikProps)), wrapInModalFooter(renderActionBlock(formikProps.values))) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, "renderForm(formikProps)", /*#__PURE__*/React__default.createElement("div", {
423
+ className: "mt-4 flex items-center gap-x-2"
424
+ }, renderActionBlock(formikProps.values)));
425
+ });
426
+ };
427
+
428
+ var Twilio = function Twilio(_ref) {
429
+ var _ref$onClose = _ref.onClose,
430
+ onClose = _ref$onClose === void 0 ? noop : _ref$onClose,
431
+ _ref$useConnect = _ref.useConnect,
432
+ useConnect = _ref$useConnect === void 0 ? noop : _ref$useConnect;
433
+ var _useState = useState(TWILIO_INTEGRATION_STEPS),
434
+ _useState2 = _slicedToArray(_useState, 2),
435
+ steps = _useState2[0],
436
+ setSteps = _useState2[1];
437
+ return /*#__PURE__*/React__default.createElement(Modal, {
438
+ isOpen: true,
439
+ steps: steps,
440
+ onClose: onClose
441
+ }, /*#__PURE__*/React__default.createElement(TwilioConfiguration, {
442
+ isModal: true,
443
+ setSteps: setSteps,
444
+ useConnect: useConnect,
445
+ onCancel: onClose
446
+ }));
447
+ };
448
+
449
+ var Stepper = function Stepper(_ref) {
450
+ var _ref$steps = _ref.steps,
451
+ steps = _ref$steps === void 0 ? {} : _ref$steps;
452
+ var isActiveOrCompleted = function isActiveOrCompleted(activeStatus, completedStatus) {
453
+ return activeStatus || completedStatus;
454
+ };
455
+ return /*#__PURE__*/React__default.createElement("ul", {
456
+ className: "flex gap-4"
457
+ }, steps === null || steps === void 0 ? void 0 : steps.map(function (_ref2) {
458
+ var step = _ref2.step,
459
+ label = _ref2.label,
460
+ isActive = _ref2.isActive,
461
+ isCompleted = _ref2.isCompleted;
462
+ return /*#__PURE__*/React__default.createElement("li", {
463
+ className: "flex items-center gap-4",
464
+ key: step
465
+ }, step !== "1" && /*#__PURE__*/React__default.createElement("div", {
466
+ className: classnames("w-10 border-b", {
467
+ "neeto-ui-border-gray-800": isActiveOrCompleted(isActive, isCompleted),
468
+ "neeto-ui-border-gray-400": !isActiveOrCompleted(isActive, isCompleted)
469
+ })
470
+ }), /*#__PURE__*/React__default.createElement("div", {
300
471
  className: "flex items-center gap-2"
301
472
  }, /*#__PURE__*/React__default.createElement("div", {
302
473
  className: classnames("neeto-ui-rounded-full neeto-ui-gray-600 flex h-6 w-6 items-center justify-center border", {
@@ -341,14 +512,29 @@ var Modal = function Modal(_ref) {
341
512
  }, children)));
342
513
  };
343
514
 
344
- var propTypes = {exports: {}};
345
-
346
- /**
347
- * Copyright (c) 2013-present, Facebook, Inc.
348
- *
349
- * This source code is licensed under the MIT license found in the
350
- * LICENSE file in the root directory of this source tree.
351
- */
515
+ function _extends$1() {
516
+ _extends$1 = Object.assign ? Object.assign.bind() : function (target) {
517
+ for (var i = 1; i < arguments.length; i++) {
518
+ var source = arguments[i];
519
+ for (var key in source) {
520
+ if (Object.prototype.hasOwnProperty.call(source, key)) {
521
+ target[key] = source[key];
522
+ }
523
+ }
524
+ }
525
+ return target;
526
+ };
527
+ return _extends$1.apply(this, arguments);
528
+ }
529
+
530
+ var propTypes = {exports: {}};
531
+
532
+ /**
533
+ * Copyright (c) 2013-present, Facebook, Inc.
534
+ *
535
+ * This source code is licensed under the MIT license found in the
536
+ * LICENSE file in the root directory of this source tree.
537
+ */
352
538
  var ReactPropTypesSecret$1 = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED';
353
539
  var ReactPropTypesSecret_1 = ReactPropTypesSecret$1;
354
540
 
@@ -626,469 +812,6 @@ Finish.prototypes = {
626
812
  secondaryButtonProps: propTypes.exports.object
627
813
  };
628
814
 
629
- var WalkthroughModal = function WalkthroughModal(_ref) {
630
- var _ref$isOpen = _ref.isOpen,
631
- isOpen = _ref$isOpen === void 0 ? noop : _ref$isOpen,
632
- _ref$onClose = _ref.onClose,
633
- onClose = _ref$onClose === void 0 ? noop : _ref$onClose,
634
- _ref$videoUrl = _ref.videoUrl,
635
- videoUrl = _ref$videoUrl === void 0 ? "" : _ref$videoUrl,
636
- children = _ref.children;
637
- var _useTranslation = useTranslation(),
638
- t = _useTranslation.t;
639
- return /*#__PURE__*/React__default.createElement(Modal$1, {
640
- isOpen: isOpen,
641
- size: "large",
642
- onClose: onClose
643
- }, /*#__PURE__*/React__default.createElement(Modal$1.Header, null, /*#__PURE__*/React__default.createElement(Typography, {
644
- style: "h2",
645
- weight: "semibold"
646
- }, t("neetoIntegrations.walkthroughModal.header"))), /*#__PURE__*/React__default.createElement(Modal$1.Body, null, /*#__PURE__*/React__default.createElement("div", {
647
- className: "w-full py-10"
648
- }, /*#__PURE__*/React__default.createElement("video", {
649
- autoPlay: true,
650
- controls: true,
651
- muted: true,
652
- className: "cursor-pointer",
653
- id: "walkthrough-video"
654
- }, /*#__PURE__*/React__default.createElement("source", {
655
- src: videoUrl
656
- })), children)), /*#__PURE__*/React__default.createElement(Modal$1.Footer, null, /*#__PURE__*/React__default.createElement(Button, {
657
- label: t("neetoIntegrations.walkthroughModal.continue"),
658
- onClick: onClose
659
- })));
660
- };
661
-
662
- function _arrayWithHoles(arr) {
663
- if (Array.isArray(arr)) return arr;
664
- }
665
-
666
- function _iterableToArrayLimit(arr, i) {
667
- var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"];
668
- if (null != _i) {
669
- var _s,
670
- _e,
671
- _x,
672
- _r,
673
- _arr = [],
674
- _n = !0,
675
- _d = !1;
676
- try {
677
- if (_x = (_i = _i.call(arr)).next, 0 === i) {
678
- if (Object(_i) !== _i) return;
679
- _n = !1;
680
- } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0);
681
- } catch (err) {
682
- _d = !0, _e = err;
683
- } finally {
684
- try {
685
- if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return;
686
- } finally {
687
- if (_d) throw _e;
688
- }
689
- }
690
- return _arr;
691
- }
692
- }
693
-
694
- function _arrayLikeToArray(arr, len) {
695
- if (len == null || len > arr.length) len = arr.length;
696
- for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
697
- return arr2;
698
- }
699
-
700
- function _unsupportedIterableToArray(o, minLen) {
701
- if (!o) return;
702
- if (typeof o === "string") return _arrayLikeToArray(o, minLen);
703
- var n = Object.prototype.toString.call(o).slice(8, -1);
704
- if (n === "Object" && o.constructor) n = o.constructor.name;
705
- if (n === "Map" || n === "Set") return Array.from(o);
706
- if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
707
- }
708
-
709
- function _nonIterableRest() {
710
- throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
711
- }
712
-
713
- function _slicedToArray(arr, i) {
714
- return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
715
- }
716
-
717
- var TWILIO_INTEGRATION_STEPS = [{
718
- step: "1",
719
- label: i18next.t("neetoIntegrations.steps.configure"),
720
- isActive: true,
721
- isCompleted: false
722
- }];
723
-
724
- function _typeof(obj) {
725
- "@babel/helpers - typeof";
726
-
727
- return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
728
- return typeof obj;
729
- } : function (obj) {
730
- return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
731
- }, _typeof(obj);
732
- }
733
-
734
- function _toPrimitive(input, hint) {
735
- if (_typeof(input) !== "object" || input === null) return input;
736
- var prim = input[Symbol.toPrimitive];
737
- if (prim !== undefined) {
738
- var res = prim.call(input, hint || "default");
739
- if (_typeof(res) !== "object") return res;
740
- throw new TypeError("@@toPrimitive must return a primitive value.");
741
- }
742
- return (hint === "string" ? String : Number)(input);
743
- }
744
-
745
- function _toPropertyKey(arg) {
746
- var key = _toPrimitive(arg, "string");
747
- return _typeof(key) === "symbol" ? key : String(key);
748
- }
749
-
750
- function _defineProperty(obj, key, value) {
751
- key = _toPropertyKey(key);
752
- if (key in obj) {
753
- Object.defineProperty(obj, key, {
754
- value: value,
755
- enumerable: true,
756
- configurable: true,
757
- writable: true
758
- });
759
- } else {
760
- obj[key] = value;
761
- }
762
- return obj;
763
- }
764
-
765
- 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; }
766
- 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; }
767
- var ConfigurationForm = function ConfigurationForm(_ref) {
768
- var _errors$twilioPhoneNu;
769
- var phoneNumberOptions = _ref.phoneNumberOptions,
770
- _ref$selectedPhoneNum = _ref.selectedPhoneNumber,
771
- selectedPhoneNumber = _ref$selectedPhoneNum === void 0 ? null : _ref$selectedPhoneNum,
772
- _ref$initialFocusRef = _ref.initialFocusRef,
773
- initialFocusRef = _ref$initialFocusRef === void 0 ? null : _ref$initialFocusRef,
774
- _ref$isUsingOverlay = _ref.isUsingOverlay,
775
- isUsingOverlay = _ref$isUsingOverlay === void 0 ? false : _ref$isUsingOverlay,
776
- _ref$formikProps = _ref.formikProps,
777
- formikProps = _ref$formikProps === void 0 ? {} : _ref$formikProps;
778
- var _useTranslation = useTranslation(),
779
- t = _useTranslation.t;
780
- var setFieldValue = formikProps.setFieldValue,
781
- setValues = formikProps.setValues,
782
- errors = formikProps.errors,
783
- values = formikProps.values,
784
- initialValues = formikProps.initialValues;
785
- useEffect(function () {
786
- selectedPhoneNumber && setFieldValue("twilioPhoneNumber", selectedPhoneNumber);
787
- }, [selectedPhoneNumber, initialValues]);
788
- return /*#__PURE__*/React__default.createElement("div", {
789
- className: "flex w-full flex-col gap-4"
790
- }, /*#__PURE__*/React__default.createElement("div", {
791
- className: "flex w-full"
792
- }, /*#__PURE__*/React__default.createElement(Input, {
793
- required: true,
794
- autoFocus: !isUsingOverlay,
795
- "data-testid": "integrations-twilio-sid",
796
- label: t("neetoIntegrations.twilio.sid"),
797
- name: "twilioSid",
798
- ref: initialFocusRef
799
- })), /*#__PURE__*/React__default.createElement("div", {
800
- className: "flex w-full"
801
- }, /*#__PURE__*/React__default.createElement(Input, {
802
- required: true,
803
- "data-testid": "integrations-twilio-auth-token",
804
- label: t("neetoIntegrations.twilio.authToken"),
805
- name: "twilioAuthToken"
806
- })), phoneNumberOptions && /*#__PURE__*/React__default.createElement("div", {
807
- className: "flex w-full"
808
- }, /*#__PURE__*/React__default.createElement(Select, {
809
- error: (_errors$twilioPhoneNu = errors.twilioPhoneNumber) === null || _errors$twilioPhoneNu === void 0 ? void 0 : _errors$twilioPhoneNu.value,
810
- label: t("neetoIntegrations.common.phNo"),
811
- name: "twilioPhoneNumber",
812
- options: phoneNumberOptions,
813
- size: "large",
814
- onChange: function onChange(selected) {
815
- return setValues(_objectSpread$2(_objectSpread$2({}, values), {}, {
816
- twilioPhoneNumber: selected
817
- }));
818
- }
819
- })));
820
- };
821
-
822
- function _arrayWithoutHoles(arr) {
823
- if (Array.isArray(arr)) return _arrayLikeToArray(arr);
824
- }
825
-
826
- function _iterableToArray(iter) {
827
- if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
828
- }
829
-
830
- function _nonIterableSpread() {
831
- throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
832
- }
833
-
834
- function _toConsumableArray(arr) {
835
- return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
836
- }
837
-
838
- var queryClient = new QueryClient({
839
- queryCache: new QueryCache()
840
- });
841
-
842
- var TWILIO_CONFIGURATION_BASE_URL = "/neeto_integrations/twilio/sms_configurations";
843
-
844
- var twilioApi = {
845
- fetchTwilioSmsConfiguration: function fetchTwilioSmsConfiguration() {
846
- return axios.get(TWILIO_CONFIGURATION_BASE_URL);
847
- },
848
- removeTwilioConfiguration: function removeTwilioConfiguration() {
849
- return axios["delete"](TWILIO_CONFIGURATION_BASE_URL);
850
- },
851
- getTwilioPhoneNumbers: function getTwilioPhoneNumbers(data) {
852
- return axios.get("".concat(TWILIO_CONFIGURATION_BASE_URL, "/new"), {
853
- params: data
854
- });
855
- },
856
- createTwilioConfiguration: function createTwilioConfiguration(payload) {
857
- return axios.post(TWILIO_CONFIGURATION_BASE_URL, payload);
858
- }
859
- };
860
-
861
- var QUERY_KEYS = {
862
- TWILIO_SMS_CONFIGURATION: "twilio-sms-configuration",
863
- TWILIO_PHONE_NUMBERS: "twilio-phone-numbers"
864
- };
865
-
866
- var useFetchTwilioSmsConfiguration = function useFetchTwilioSmsConfiguration() {
867
- return useQuery(QUERY_KEYS.TWILIO_SMS_CONFIGURATION, twilioApi.fetchTwilioSmsConfiguration, {
868
- staleTime: DEFAULT_STALE_TIME,
869
- select: function select(response) {
870
- var _smsConfiguration$twi, _smsConfiguration$twi2, _smsConfiguration$twi3;
871
- var smsConfiguration = response.smsConfiguration;
872
- return {
873
- twilioSid: (_smsConfiguration$twi = smsConfiguration === null || smsConfiguration === void 0 ? void 0 : smsConfiguration.twilioSid) !== null && _smsConfiguration$twi !== void 0 ? _smsConfiguration$twi : "",
874
- twilioAuthToken: (_smsConfiguration$twi2 = smsConfiguration === null || smsConfiguration === void 0 ? void 0 : smsConfiguration.twilioAuthToken) !== null && _smsConfiguration$twi2 !== void 0 ? _smsConfiguration$twi2 : "",
875
- twilioPhoneNumber: (_smsConfiguration$twi3 = smsConfiguration === null || smsConfiguration === void 0 ? void 0 : smsConfiguration.twilioPhoneNumber) !== null && _smsConfiguration$twi3 !== void 0 ? _smsConfiguration$twi3 : ""
876
- };
877
- }
878
- });
879
- };
880
- var useFetchTwilioPhoneNumbers = function useFetchTwilioPhoneNumbers(_ref) {
881
- var credentials = _ref.credentials;
882
- return useQuery([QUERY_KEYS.TWILIO_PHONE_NUMBERS, {
883
- credentials: credentials
884
- }], function () {
885
- return twilioApi.getTwilioPhoneNumbers(keysToSnakeCase(credentials));
886
- }, {
887
- staleTime: DEFAULT_STALE_TIME,
888
- enabled: !!(credentials !== null && credentials !== void 0 && credentials.twilio_sid) || !!(credentials !== null && credentials !== void 0 && credentials.twilioSid),
889
- select: prop("phoneNumbers"),
890
- retry: false
891
- });
892
- };
893
- var useCreateTwilioConfiguration = function useCreateTwilioConfiguration() {
894
- return useMutation(twilioApi.createTwilioConfiguration, {
895
- onSuccess: function onSuccess() {
896
- return queryClient.invalidateQueries(QUERY_KEYS.TWILIO_SMS_CONFIGURATION);
897
- }
898
- });
899
- };
900
-
901
- 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; }
902
- 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; }
903
- var useTwilio = function useTwilio(_ref) {
904
- var _ref$onSave = _ref.onSave,
905
- onSave = _ref$onSave === void 0 ? noop : _ref$onSave,
906
- _ref$setSteps = _ref.setSteps,
907
- setSteps = _ref$setSteps === void 0 ? noop : _ref$setSteps,
908
- _ref$useConnect = _ref.useConnect,
909
- useConnect = _ref$useConnect === void 0 ? noop : _ref$useConnect;
910
- var _useFetchTwilioSmsCon = useFetchTwilioSmsConfiguration(),
911
- configuration = _useFetchTwilioSmsCon.data,
912
- isConfigurationLoading = _useFetchTwilioSmsCon.isLoading,
913
- refetchTwilioSmsConfiguration = _useFetchTwilioSmsCon.refetch;
914
- var _useStateWithDependen = useStateWithDependency(configuration),
915
- _useStateWithDependen2 = _slicedToArray(_useStateWithDependen, 2),
916
- credentials = _useStateWithDependen2[0],
917
- setCredentials = _useStateWithDependen2[1];
918
- var _useFetchTwilioPhoneN = useFetchTwilioPhoneNumbers({
919
- credentials: credentials
920
- }),
921
- phoneNumbers = _useFetchTwilioPhoneN.data,
922
- isPhoneNumbersLoading = _useFetchTwilioPhoneN.isLoading;
923
- var _useCreateTwilioConfi = useCreateTwilioConfiguration(),
924
- saveConfiguration = _useCreateTwilioConfi.mutate,
925
- isSubmitting = _useCreateTwilioConfi.isLoading;
926
- var _useConnect = useConnect(),
927
- installIntegration = _useConnect.mutate;
928
- var connectTwilioApp = function connectTwilioApp() {
929
- return installIntegration({
930
- id: "twilio"
931
- }, {});
932
- };
933
- useEffect(function () {
934
- if (!(configuration !== null && configuration !== void 0 && configuration.twilioPhoneNumber)) return;
935
- setSteps(function (steps) {
936
- var stepsClone = _toConsumableArray(steps);
937
- stepsClone[0] = _objectSpread$1(_objectSpread$1({}, steps[0]), {}, {
938
- isCompleted: true
939
- });
940
- return stepsClone;
941
- });
942
- }, [configuration]);
943
- var handleSubmit = function handleSubmit(values) {
944
- var _values$twilioPhoneNu;
945
- var payload = {
946
- twilio_sid: values.twilioSid,
947
- twilio_auth_token: values.twilioAuthToken,
948
- twilio_phone_number_sid: (_values$twilioPhoneNu = values.twilioPhoneNumber) === null || _values$twilioPhoneNu === void 0 ? void 0 : _values$twilioPhoneNu.value
949
- };
950
- if (!phoneNumbers && !(configuration !== null && configuration !== void 0 && configuration.twilioPhoneNumber)) {
951
- setCredentials(payload);
952
- return;
953
- }
954
- saveConfiguration(payload, {
955
- onSuccess: function onSuccess() {
956
- onSave();
957
- connectTwilioApp();
958
- refetchTwilioSmsConfiguration();
959
- }
960
- });
961
- };
962
- return {
963
- handleSubmit: handleSubmit,
964
- phoneNumbers: phoneNumbers,
965
- isConfigurationLoading: isConfigurationLoading,
966
- isPhoneNumbersLoading: isPhoneNumbersLoading,
967
- isSubmitting: isSubmitting,
968
- configuration: configuration
969
- };
970
- };
971
-
972
- var buildTwilioConfigurationValidationSchema = function buildTwilioConfigurationValidationSchema(isTwilioPhoneRequired) {
973
- return yup.object().shape({
974
- twilioSid: yup.string().required(i18next.t("neetoIntegrations.twilio.validations.sidReq")),
975
- twilioAuthToken: yup.string().required(i18next.t("neetoIntegrations.twilio.validations.authTokenReq")),
976
- twilioPhoneNumber: isTwilioPhoneRequired ? yup.object().shape({
977
- label: yup.string(),
978
- value: yup.string().required(i18next.t("neetoIntegrations.twilio.validations.phNumReq"))
979
- }) : null
980
- });
981
- };
982
-
983
- 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; }
984
- 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; }
985
- var TwilioConfiguration = function TwilioConfiguration(_ref) {
986
- var _ref$onCancel = _ref.onCancel,
987
- onCancel = _ref$onCancel === void 0 ? noop : _ref$onCancel,
988
- _ref$onSave = _ref.onSave,
989
- onSave = _ref$onSave === void 0 ? noop : _ref$onSave,
990
- _ref$setSteps = _ref.setSteps,
991
- setSteps = _ref$setSteps === void 0 ? noop : _ref$setSteps,
992
- _ref$useConnect = _ref.useConnect,
993
- useConnect = _ref$useConnect === void 0 ? noop : _ref$useConnect,
994
- _ref$isModal = _ref.isModal,
995
- isModal = _ref$isModal === void 0 ? false : _ref$isModal;
996
- var _useTranslation = useTranslation(),
997
- t = _useTranslation.t;
998
- var initialFocusRef = useRef();
999
- var _useTwilio = useTwilio({
1000
- onSave: onSave,
1001
- setSteps: setSteps,
1002
- useConnect: useConnect
1003
- }),
1004
- handleSubmit = _useTwilio.handleSubmit,
1005
- phoneNumbers = _useTwilio.phoneNumbers,
1006
- isConfigurationLoading = _useTwilio.isConfigurationLoading,
1007
- isPhoneNumbersLoading = _useTwilio.isPhoneNumbersLoading,
1008
- isSubmitting = _useTwilio.isSubmitting,
1009
- configuration = _useTwilio.configuration;
1010
- var phoneNumberOptions = phoneNumbers === null || phoneNumbers === void 0 ? void 0 : phoneNumbers.map(function (_ref2) {
1011
- var phoneNumber = _ref2.phoneNumber,
1012
- sid = _ref2.sid;
1013
- return {
1014
- label: phoneNumber,
1015
- value: sid
1016
- };
1017
- });
1018
- var selectedPhoneNumber = _findBy({
1019
- label: configuration === null || configuration === void 0 ? void 0 : configuration.twilioPhoneNumber
1020
- }, phoneNumberOptions);
1021
- var wrapInModalBody = function wrapInModalBody(children) {
1022
- return /*#__PURE__*/React__default.createElement(Modal$1.Body, null, children);
1023
- };
1024
- var wrapInModalFooter = function wrapInModalFooter(children) {
1025
- return /*#__PURE__*/React__default.createElement(Modal$1.Footer, null, children);
1026
- };
1027
- var isLoading = isPhoneNumbersLoading || isConfigurationLoading;
1028
- var isSubmitDisabled = function isSubmitDisabled(values) {
1029
- return equals(_objectSpread(_objectSpread({}, configuration), {}, {
1030
- twilioPhoneNumber: selectedPhoneNumber
1031
- }), values) || isLoading;
1032
- };
1033
- var renderActionBlock = function renderActionBlock(values) {
1034
- return /*#__PURE__*/React__default.createElement(ActionBlock, {
1035
- cancelButtonProps: {
1036
- onClick: onCancel,
1037
- disabled: false
1038
- },
1039
- className: "space-x-3",
1040
- submitButtonProps: {
1041
- label: phoneNumberOptions ? t("neetoIntegrations.common.saveChanges") : t("neetoIntegrations.common.verify"),
1042
- disabled: isSubmitDisabled(values),
1043
- loading: isSubmitting || isPhoneNumbersLoading && !configuration.twilioAuthToken
1044
- }
1045
- });
1046
- };
1047
- var renderForm = function renderForm(formikProps) {
1048
- return /*#__PURE__*/React__default.createElement(ConfigurationForm, {
1049
- formikProps: formikProps,
1050
- initialFocusRef: initialFocusRef,
1051
- isUsingOverlay: isModal,
1052
- phoneNumberOptions: phoneNumberOptions,
1053
- selectedPhoneNumber: selectedPhoneNumber
1054
- });
1055
- };
1056
- return /*#__PURE__*/React__default.createElement(Form, {
1057
- className: "mx-auto flex w-full max-w-md flex-col",
1058
- formikProps: {
1059
- enableReinitialize: true,
1060
- validationSchema: buildTwilioConfigurationValidationSchema(!!phoneNumbers),
1061
- initialValues: configuration,
1062
- onSubmit: handleSubmit
1063
- }
1064
- }, function (formikProps) {
1065
- return isModal ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, wrapInModalBody(renderForm(formikProps)), wrapInModalFooter(renderActionBlock(formikProps.values))) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, "renderForm(formikProps)", /*#__PURE__*/React__default.createElement("div", {
1066
- className: "mt-4 flex items-center gap-x-2"
1067
- }, renderActionBlock(formikProps.values)));
1068
- });
1069
- };
1070
-
1071
- var Twilio = function Twilio(_ref) {
1072
- var _ref$onClose = _ref.onClose,
1073
- onClose = _ref$onClose === void 0 ? noop : _ref$onClose,
1074
- _ref$useConnect = _ref.useConnect,
1075
- useConnect = _ref$useConnect === void 0 ? noop : _ref$useConnect;
1076
- var _useState = useState(TWILIO_INTEGRATION_STEPS),
1077
- _useState2 = _slicedToArray(_useState, 2),
1078
- steps = _useState2[0],
1079
- setSteps = _useState2[1];
1080
- return /*#__PURE__*/React__default.createElement(Modal, {
1081
- isOpen: true,
1082
- steps: steps,
1083
- onClose: onClose
1084
- }, /*#__PURE__*/React__default.createElement(TwilioConfiguration, {
1085
- isModal: true,
1086
- setSteps: setSteps,
1087
- useConnect: useConnect,
1088
- onCancel: onClose
1089
- }));
1090
- };
1091
-
1092
815
  var e = [],
1093
816
  t = [];
1094
817
  function n(n, r) {
@@ -1114,5 +837,5 @@ function n(n, r) {
1114
837
  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%}";
1115
838
  n(css,{});
1116
839
 
1117
- export { Card, Connect, Demo, DisconnectAlert, Finish, Modal, Twilio, WalkthroughModal };
840
+ export { Connect, Demo, Finish, Modal, Twilio };
1118
841
  //# sourceMappingURL=index.js.map