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