@bigbinary/neeto-integrations-frontend 2.3.0 → 2.4.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/Twilio.cjs.js +540 -0
- package/dist/Twilio.cjs.js.map +1 -0
- package/dist/Twilio.js +512 -0
- package/dist/Twilio.js.map +1 -0
- package/dist/index.cjs.js +441 -0
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.js +441 -4
- package/dist/index.js.map +1 -1
- package/package.json +10 -10
- package/src/translations/en.json +22 -1
- package/types.d.ts +10 -5
package/dist/index.js
CHANGED
|
@@ -1,12 +1,19 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import React__default from 'react';
|
|
2
|
+
import React__default, { useEffect, useRef, useState } from 'react';
|
|
3
3
|
import classnames from 'classnames';
|
|
4
|
-
import { noop, isNotEmpty } from '@bigbinary/neeto-commons-frontend/pure';
|
|
4
|
+
import { noop, isNotEmpty, keysToSnakeCase, _findBy } from '@bigbinary/neeto-commons-frontend/pure';
|
|
5
5
|
import { joinHyphenCase } from '@bigbinary/neeto-commons-frontend/utils';
|
|
6
6
|
import { Dropdown as Dropdown$1, Tag, Tooltip, Typography, Spinner, Button, Alert, Modal as Modal$1 } from '@bigbinary/neetoui';
|
|
7
|
-
import { isNotNil, isEmpty } from 'ramda';
|
|
7
|
+
import { isNotNil, isEmpty, prop, equals } from 'ramda';
|
|
8
8
|
import { useTranslation } from 'react-i18next';
|
|
9
9
|
import { MenuVertical, Warning, Check } from '@bigbinary/neeto-icons';
|
|
10
|
+
import i18next from 'i18next';
|
|
11
|
+
import { Input, Select, Form, ActionBlock } from '@bigbinary/neetoui/formik';
|
|
12
|
+
import { useStateWithDependency } from '@bigbinary/neeto-commons-frontend/react-utils';
|
|
13
|
+
import { DEFAULT_STALE_TIME } from '@bigbinary/neeto-commons-frontend/constants';
|
|
14
|
+
import { QueryClient, QueryCache, useQuery, useMutation } from 'react-query';
|
|
15
|
+
import axios from 'axios';
|
|
16
|
+
import * as yup from 'yup';
|
|
10
17
|
|
|
11
18
|
function _extends$1() {
|
|
12
19
|
_extends$1 = Object.assign ? Object.assign.bind() : function (target) {
|
|
@@ -652,6 +659,436 @@ var WalkthroughModal = function WalkthroughModal(_ref) {
|
|
|
652
659
|
})));
|
|
653
660
|
};
|
|
654
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
|
+
|
|
655
1092
|
var e = [],
|
|
656
1093
|
t = [];
|
|
657
1094
|
function n(n, r) {
|
|
@@ -677,5 +1114,5 @@ function n(n, r) {
|
|
|
677
1114
|
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%}";
|
|
678
1115
|
n(css,{});
|
|
679
1116
|
|
|
680
|
-
export { Card, Connect, Demo, DisconnectAlert, Finish, Modal, WalkthroughModal };
|
|
1117
|
+
export { Card, Connect, Demo, DisconnectAlert, Finish, Modal, Twilio, WalkthroughModal };
|
|
681
1118
|
//# sourceMappingURL=index.js.map
|