ordering-ui-admin-external 1.43.86 → 1.43.88

package/_modules/components/Stores/PaymentOptionStripeLink/index.js

@@ -0,0 +1,347 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PaymentOptionStripeLink = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactRouterDom = require("react-router-dom");
+var _orderingComponentsAdminExternal = require("ordering-components-admin-external");
+var _RiCheckboxBlankLine = _interopRequireDefault(require("@meronex/icons/ri/RiCheckboxBlankLine"));
+var _RiCheckboxFill = _interopRequireDefault(require("@meronex/icons/ri/RiCheckboxFill"));
+var _styles = require("../../../styles");
+var _useWindowSize2 = require("../../../hooks/useWindowSize");
+var _styledComponents = require("styled-components");
+var _reactBootstrapIcons = require("react-bootstrap-icons");
+var _reactBootstrap = require("react-bootstrap");
+var _Shared = require("../../Shared");
+var _utils = require("../../../utils");
+var _styles2 = require("./styles");
+var _styles3 = require("../BusinessMenu/styles");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+var PaymentOptionStripeLinkUI = function PaymentOptionStripeLinkUI(props) {
+  var _localState$sites, _businessPaymethod$si, _sitesState$sites2, _ref2, _changesState$sandbox, _changesState$data, _changesState$data2, _businessPaymethod$da, _changesState$data3, _changesState$data4, _businessPaymethod$da2, _changesState$data_sa, _changesState$data_sa2, _businessPaymethod$da3, _changesState$data_sa3, _changesState$data_sa4, _businessPaymethod$da4, _configsState$configs, _sitesState$sites3;
+  var open = props.open,
+    onClose = props.onClose,
+    orderTypes = props.orderTypes,
+    sitesState = props.sitesState,
+    configsState = props.configsState,
+    changesState = props.changesState,
+    handleChangeBusinessPaymentState = props.handleChangeBusinessPaymentState,
+    cleanChangesState = props.cleanChangesState,
+    actionState = props.actionState,
+    handleChangeSandbox = props.handleChangeSandbox,
+    handleChangeInput = props.handleChangeInput,
+    handleSaveClick = props.handleSaveClick,
+    businessPaymethod = props.businessPaymethod,
+    handleDeletePaymethod = props.handleDeletePaymethod,
+    handleUpdateConfigs = props.handleUpdateConfigs;
+  var query = new URLSearchParams((0, _reactRouterDom.useLocation)().search);
+  var theme = (0, _styledComponents.useTheme)();
+  var _useLanguage = (0, _orderingComponentsAdminExternal.useLanguage)(),
+    _useLanguage2 = _slicedToArray(_useLanguage, 2),
+    t = _useLanguage2[1];
+  var _useWindowSize = (0, _useWindowSize2.useWindowSize)(),
+    width = _useWindowSize.width;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isMenuOpen = _useState2[0],
+    setIsMenuOpen = _useState2[1];
+  var _useState3 = (0, _react.useState)(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    paymentTabs = _useState4[0],
+    setPaymentTabs = _useState4[1];
+  var _useState5 = (0, _react.useState)({
+      open: false,
+      content: null,
+      handleOnAccept: null
+    }),
+    _useState6 = _slicedToArray(_useState5, 2),
+    confirm = _useState6[0],
+    setConfirm = _useState6[1];
+  var _useState7 = (0, _react.useState)({
+      allowed_order_types: businessPaymethod === null || businessPaymethod === void 0 ? void 0 : businessPaymethod.allowed_order_types,
+      sites: businessPaymethod === null || businessPaymethod === void 0 ? void 0 : businessPaymethod.sites
+    }),
+    _useState8 = _slicedToArray(_useState7, 2),
+    localState = _useState8[0],
+    setLocalState = _useState8[1];
+  var filteredOptions = (_localState$sites = localState === null || localState === void 0 ? void 0 : localState.sites) !== null && _localState$sites !== void 0 ? _localState$sites : businessPaymethod === null || businessPaymethod === void 0 || (_businessPaymethod$si = businessPaymethod.sites) === null || _businessPaymethod$si === void 0 ? void 0 : _businessPaymethod$si.filter(function (a) {
+    var _sitesState$sites;
+    return sitesState === null || sitesState === void 0 || (_sitesState$sites = sitesState.sites) === null || _sitesState$sites === void 0 ? void 0 : _sitesState$sites.find(function (b) {
+      return a.id === b.id;
+    });
+  });
+  var _useState9 = (0, _react.useState)(!(filteredOptions !== null && filteredOptions !== void 0 && filteredOptions.length)),
+    _useState10 = _slicedToArray(_useState9, 2),
+    all = _useState10[0],
+    setAll = _useState10[1];
+  var configsToShow = {
+    allow_text_messages_sms: true,
+    allow_text_messages_whatsapp: true
+  };
+  var setPaymethodInfo = function setPaymethodInfo(values) {
+    var data = {};
+    if ((values === null || values === void 0 ? void 0 : values.value) === 'All') {
+      data[values.key] = [];
+      setAll(!all);
+    } else {
+      var _ref, _changesState$values$, _businessPaymethod$va;
+      var array = (_ref = (_changesState$values$ = changesState === null || changesState === void 0 ? void 0 : changesState[values.key]) !== null && _changesState$values$ !== void 0 ? _changesState$values$ : values.key === 'allowed_order_types' ? businessPaymethod === null || businessPaymethod === void 0 ? void 0 : businessPaymethod[values.key] : businessPaymethod === null || businessPaymethod === void 0 || (_businessPaymethod$va = businessPaymethod[values.key]) === null || _businessPaymethod$va === void 0 ? void 0 : _businessPaymethod$va.map(function (i) {
+        return i.id;
+      })) !== null && _ref !== void 0 ? _ref : [];
+      array = _toConsumableArray(new Set(array.includes(values.value) ? array.filter(function (item) {
+        return item !== values.value;
+      }) : [].concat(_toConsumableArray(array), [values.value])));
+      data[values.key] = array.length > 0 ? array : [];
+      if (values.key === 'sites') {
+        var _data$sites;
+        setAll(!(data !== null && data !== void 0 && (_data$sites = data.sites) !== null && _data$sites !== void 0 && _data$sites.length));
+      }
+    }
+    handleChangeBusinessPaymentState(data);
+  };
+  var actionSidebar = function actionSidebar(value) {
+    if (!value) {
+      props.onClose();
+    }
+    setIsMenuOpen(value);
+  };
+  var onClickDeletePaymethod = function onClickDeletePaymethod() {
+    setConfirm({
+      open: true,
+      content: t('QUESTION_DELETE_ITEM', 'Are you sure to delete this _item_?').replace('_item_', t('PAYMETHOD_ID', 'Paymethod')),
+      handleOnAccept: function handleOnAccept() {
+        var _businessPaymethod$pa;
+        setConfirm(_objectSpread(_objectSpread({}, confirm), {}, {
+          open: false
+        }));
+        handleDeletePaymethod(businessPaymethod === null || businessPaymethod === void 0 || (_businessPaymethod$pa = businessPaymethod.paymethod) === null || _businessPaymethod$pa === void 0 ? void 0 : _businessPaymethod$pa.id);
+      }
+    });
+  };
+  (0, _react.useEffect)(function () {
+    if (isMenuOpen) {
+      if (width < 1000) {
+        document.getElementById('stripe_link').style.width = '100%';
+      } else {
+        document.getElementById('stripe_link').style.width = '500px';
+      }
+    }
+  }, [width]);
+  (0, _react.useEffect)(function () {
+    if (!open) return;
+    actionSidebar(true);
+  }, [open]);
+  (0, _react.useEffect)(function () {
+    var initState = {
+      sandbox: businessPaymethod === null || businessPaymethod === void 0 ? void 0 : businessPaymethod.sandbox,
+      allowed_order_types: (businessPaymethod === null || businessPaymethod === void 0 ? void 0 : businessPaymethod.allowed_order_types) || [1, 2, 3, 4, 5]
+    };
+    if (businessPaymethod !== null && businessPaymethod !== void 0 && businessPaymethod.data) {
+      initState.data = businessPaymethod.data;
+    }
+    if (businessPaymethod !== null && businessPaymethod !== void 0 && businessPaymethod.data_sandbox) {
+      initState.data_sandbox = businessPaymethod.data_sandbox;
+    }
+    cleanChangesState(initState);
+  }, []);
+  (0, _react.useEffect)(function () {
+    var changes = {};
+    if (changesState !== null && changesState !== void 0 && changesState.allowed_order_types) changes.allowed_order_types = changesState === null || changesState === void 0 ? void 0 : changesState.allowed_order_types;
+    if (changesState !== null && changesState !== void 0 && changesState.sites) changes.sites = changesState === null || changesState === void 0 ? void 0 : changesState.sites;
+    if (Object.keys(changes).length > 0) setLocalState(JSON.parse(JSON.stringify(changes)));
+  }, [changesState === null || changesState === void 0 ? void 0 : changesState.sites, changesState === null || changesState === void 0 ? void 0 : changesState.allowed_order_types]);
+  var handleTabClick = function handleTabClick(tab, isInitialRender) {
+    setPaymentTabs(tab);
+    if (!isInitialRender) {
+      (0, _utils.addQueryToUrl)({
+        payemthod_tab: tab
+      });
+    }
+  };
+  (0, _react.useEffect)(function () {
+    var payemthodTab = query.get('payemthod_tab');
+    if (payemthodTab) {
+      handleTabClick(Number(payemthodTab), true);
+    } else {
+      handleTabClick(0);
+    }
+  }, []);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styles2.Container, {
+    id: "stripe_link"
+  }, /*#__PURE__*/_react.default.createElement(_styles2.Header, null, /*#__PURE__*/_react.default.createElement("h1", null, t('STRIPE_LINK', 'Stripe link (Only for callcenter)')), /*#__PURE__*/_react.default.createElement(_styles2.ActionSelectorWrapper, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.DropdownButton, {
+    menuAlign: theme !== null && theme !== void 0 && theme.rtl ? 'left' : 'right',
+    title: /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.ThreeDots, null),
+    id: theme !== null && theme !== void 0 && theme.rtl ? 'dropdown-menu-align-left' : 'dropdown-menu-align-right'
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Item, {
+    onClick: function onClick() {
+      return onClickDeletePaymethod();
+    }
+  }, t('DELETE', 'Delete')))), /*#__PURE__*/_react.default.createElement(_styles2.CloseButton, null, /*#__PURE__*/_react.default.createElement(_styles.IconButton, {
+    color: "black",
+    onClick: function onClick() {
+      return onClose();
+    }
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.XLg, null)))), /*#__PURE__*/_react.default.createElement("p", {
+    className: "message"
+  }, t('STRIPE_AND_TWILIO_CONFIGS_REQUIERED', 'Stripe and Twilio keys are requiered to use this Payment Method')), /*#__PURE__*/_react.default.createElement(_styles3.TabsContainer, null, /*#__PURE__*/_react.default.createElement(_styles3.Tab, {
+    active: paymentTabs === 0,
+    onClick: function onClick() {
+      return handleTabClick(0);
+    }
+  }, t('GENERAL', 'General')), (sitesState === null || sitesState === void 0 || (_sitesState$sites2 = sitesState.sites) === null || _sitesState$sites2 === void 0 ? void 0 : _sitesState$sites2.length) > 0 && /*#__PURE__*/_react.default.createElement(_styles3.Tab, {
+    active: paymentTabs === 1,
+    onClick: function onClick() {
+      return handleTabClick(1);
+    }
+  }, t('CHANNELS', 'Channels')), /*#__PURE__*/_react.default.createElement(_styles3.Tab, {
+    active: paymentTabs === 2,
+    onClick: function onClick() {
+      return handleTabClick(2);
+    }
+  }, t('ORDER_TYPE', 'Order type'))), paymentTabs === 0 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styles2.SandboxWrapper, null, /*#__PURE__*/_react.default.createElement(_styles.Checkbox, {
+    checked: (_ref2 = (_changesState$sandbox = changesState === null || changesState === void 0 ? void 0 : changesState.sandbox) !== null && _changesState$sandbox !== void 0 ? _changesState$sandbox : businessPaymethod === null || businessPaymethod === void 0 ? void 0 : businessPaymethod.sandbox) !== null && _ref2 !== void 0 ? _ref2 : false,
+    onChange: function onChange(e) {
+      return handleChangeSandbox(e.target.checked);
+    }
+  }), /*#__PURE__*/_react.default.createElement("span", null, t('SANDBOX', 'Sandbox'))), /*#__PURE__*/_react.default.createElement(_styles2.FieldName, null, t('PUBLISHABLE_KEY', 'Publishable key')), /*#__PURE__*/_react.default.createElement(_styles.Input, {
+    name: "publishable",
+    defaultValue: changesState !== null && changesState !== void 0 && (_changesState$data = changesState.data) !== null && _changesState$data !== void 0 && _changesState$data.publishable ? changesState === null || changesState === void 0 || (_changesState$data2 = changesState.data) === null || _changesState$data2 === void 0 ? void 0 : _changesState$data2.publishable : businessPaymethod === null || businessPaymethod === void 0 || (_businessPaymethod$da = businessPaymethod.data) === null || _businessPaymethod$da === void 0 ? void 0 : _businessPaymethod$da.publishable,
+    placeholder: t('PUBLISHABLE_KEY', 'Publishable key'),
+    onChange: function onChange(e) {
+      return handleChangeInput(e, false);
+    }
+  }), /*#__PURE__*/_react.default.createElement(_styles2.FieldName, null, t('SECRET_KEY', 'Secret key')), /*#__PURE__*/_react.default.createElement(_styles.Input, {
+    name: "secret",
+    defaultValue: changesState !== null && changesState !== void 0 && (_changesState$data3 = changesState.data) !== null && _changesState$data3 !== void 0 && _changesState$data3.secret ? changesState === null || changesState === void 0 || (_changesState$data4 = changesState.data) === null || _changesState$data4 === void 0 ? void 0 : _changesState$data4.secret : businessPaymethod === null || businessPaymethod === void 0 || (_businessPaymethod$da2 = businessPaymethod.data) === null || _businessPaymethod$da2 === void 0 ? void 0 : _businessPaymethod$da2.secret,
+    placeholder: t('SECRET_KEY', 'Secret key'),
+    onChange: function onChange(e) {
+      return handleChangeInput(e, false);
+    }
+  }), /*#__PURE__*/_react.default.createElement(_styles2.FieldName, null, t('PUBLISHABLE_KEY', 'Publishable key'), " (", t('SANDBOX', 'Sandbox'), ")"), /*#__PURE__*/_react.default.createElement(_styles.Input, {
+    name: "publishable",
+    defaultValue: changesState !== null && changesState !== void 0 && (_changesState$data_sa = changesState.data_sandbox) !== null && _changesState$data_sa !== void 0 && _changesState$data_sa.publishable ? changesState === null || changesState === void 0 || (_changesState$data_sa2 = changesState.data_sandbox) === null || _changesState$data_sa2 === void 0 ? void 0 : _changesState$data_sa2.publishable : businessPaymethod === null || businessPaymethod === void 0 || (_businessPaymethod$da3 = businessPaymethod.data_sandbox) === null || _businessPaymethod$da3 === void 0 ? void 0 : _businessPaymethod$da3.publishable,
+    placeholder: "".concat(t('PUBLISHABLE_KEY', 'Publishable key'), " (").concat(t('SANDBOX', 'Sandbox'), ")"),
+    onChange: function onChange(e) {
+      return handleChangeInput(e, true);
+    }
+  }), /*#__PURE__*/_react.default.createElement(_styles2.FieldName, null, t('SECRECT_KEY', 'Secret key'), " (", t('SANDBOX', 'Sandbox'), ")"), /*#__PURE__*/_react.default.createElement(_styles.Input, {
+    name: "secret",
+    defaultValue: changesState !== null && changesState !== void 0 && (_changesState$data_sa3 = changesState.data_sandbox) !== null && _changesState$data_sa3 !== void 0 && _changesState$data_sa3.secret ? changesState === null || changesState === void 0 || (_changesState$data_sa4 = changesState.data_sandbox) === null || _changesState$data_sa4 === void 0 ? void 0 : _changesState$data_sa4.secret : businessPaymethod === null || businessPaymethod === void 0 || (_businessPaymethod$da4 = businessPaymethod.data_sandbox) === null || _businessPaymethod$da4 === void 0 ? void 0 : _businessPaymethod$da4.secret,
+    placeholder: "".concat(t('SECRECT_KEY', 'Secret key'), " (").concat(t('SANDBOX', 'Sandbox'), ")"),
+    onChange: function onChange(e) {
+      return handleChangeInput(e, true);
+    }
+  }), /*#__PURE__*/_react.default.createElement("p", {
+    className: "alert-message"
+  }, t('TWILIO_CONFIGURATION_MESSAGE', '*Enable these options after twilio configuration')), !(configsState !== null && configsState !== void 0 && configsState.loading) && (configsState === null || configsState === void 0 || (_configsState$configs = configsState.configs) === null || _configsState$configs === void 0 ? void 0 : _configsState$configs.filter(function (config) {
+    return configsToShow[config === null || config === void 0 ? void 0 : config.key];
+  }).map(function (config) {
+    var _config$options;
+    var options = config === null || config === void 0 || (_config$options = config.options) === null || _config$options === void 0 ? void 0 : _config$options.map(function (item) {
+      return {
+        value: item.value,
+        content: /*#__PURE__*/_react.default.createElement(_styles2.Option, null, t(item.text.toUpperCase()))
+      };
+    });
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styles2.FieldName, null, config === null || config === void 0 ? void 0 : config.name), (config === null || config === void 0 ? void 0 : config.type) === 2 && options && /*#__PURE__*/_react.default.createElement(_styles.DefaultSelect, {
+      notAsync: true,
+      defaultValue: config === null || config === void 0 ? void 0 : config.value,
+      options: options,
+      onChange: function onChange(typeValue) {
+        return handleUpdateConfigs(config === null || config === void 0 ? void 0 : config.id, {
+          value: typeValue
+        });
+      },
+      placeholder: t('SELECT_A_OPTION', 'Select a option')
+    }));
+  }))), paymentTabs === 1 && (sitesState === null || sitesState === void 0 || (_sitesState$sites3 = sitesState.sites) === null || _sitesState$sites3 === void 0 ? void 0 : _sitesState$sites3.length) > 0 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styles2.TabOption, {
+    key: "all",
+    onClick: function onClick() {
+      return setPaymethodInfo({
+        key: 'sites',
+        value: 'All'
+      });
+    }
+  }, all ? /*#__PURE__*/_react.default.createElement(_RiCheckboxFill.default, {
+    className: "fill"
+  }) : /*#__PURE__*/_react.default.createElement(_RiCheckboxBlankLine.default, null), /*#__PURE__*/_react.default.createElement(_styles2.TabOptionName, null, t('ALL', 'All'))), !all && (sitesState === null || sitesState === void 0 ? void 0 : sitesState.sites.map(function (site) {
+    var _ref3, _localState$sites2, _businessPaymethod$si2;
+    return /*#__PURE__*/_react.default.createElement(_styles2.TabOption, {
+      key: site.id,
+      onClick: function onClick() {
+        return setPaymethodInfo({
+          key: 'sites',
+          value: site.id
+        });
+      }
+    }, (_ref3 = (_localState$sites2 = localState === null || localState === void 0 ? void 0 : localState.sites) !== null && _localState$sites2 !== void 0 ? _localState$sites2 : businessPaymethod === null || businessPaymethod === void 0 || (_businessPaymethod$si2 = businessPaymethod.sites) === null || _businessPaymethod$si2 === void 0 ? void 0 : _businessPaymethod$si2.map(function (s) {
+      return s.id;
+    })) !== null && _ref3 !== void 0 && _ref3.includes(site.id) ? /*#__PURE__*/_react.default.createElement(_RiCheckboxFill.default, {
+      className: "fill"
+    }) : /*#__PURE__*/_react.default.createElement(_RiCheckboxBlankLine.default, null), /*#__PURE__*/_react.default.createElement(_styles2.TabOptionName, null, site.name));
+  }))), paymentTabs === 2 && orderTypes.map(function (type) {
+    var _ref4, _localState$allowed_o;
+    return /*#__PURE__*/_react.default.createElement(_styles2.TabOption, {
+      key: type.value,
+      onClick: function onClick() {
+        return setPaymethodInfo({
+          key: 'allowed_order_types',
+          value: type.value
+        });
+      }
+    }, (_ref4 = (_localState$allowed_o = localState === null || localState === void 0 ? void 0 : localState.allowed_order_types) !== null && _localState$allowed_o !== void 0 ? _localState$allowed_o : businessPaymethod === null || businessPaymethod === void 0 ? void 0 : businessPaymethod.allowed_order_types) !== null && _ref4 !== void 0 && _ref4.includes(type.value) ? /*#__PURE__*/_react.default.createElement(_RiCheckboxFill.default, {
+      className: "fill"
+    }) : /*#__PURE__*/_react.default.createElement(_RiCheckboxBlankLine.default, null), /*#__PURE__*/_react.default.createElement(_styles2.TabOptionName, null, type.text));
+  }), /*#__PURE__*/_react.default.createElement(_styles.Button, {
+    borderRadius: "5px",
+    color: "primary",
+    disabled: actionState.loading || Object.keys(changesState).length === 0,
+    onClick: function onClick() {
+      return handleSaveClick(businessPaymethod.id);
+    }
+  }, actionState.loading ? t('LOADING', 'Loading') : t('SAVE', 'Save'))), /*#__PURE__*/_react.default.createElement(_Shared.Confirm, {
+    width: "700px",
+    title: t('WEB_APPNAME', 'Ordering'),
+    content: confirm.content,
+    acceptText: t('ACCEPT', 'Accept'),
+    open: confirm.open,
+    onClose: function onClose() {
+      return setConfirm(_objectSpread(_objectSpread({}, confirm), {}, {
+        open: false
+      }));
+    },
+    onCancel: function onCancel() {
+      return setConfirm(_objectSpread(_objectSpread({}, confirm), {}, {
+        open: false
+      }));
+    },
+    onAccept: confirm.handleOnAccept,
+    closeOnBackdrop: false
+  }));
+};
+var PaymentOptionStripeLink = exports.PaymentOptionStripeLink = function PaymentOptionStripeLink(props) {
+  var paymentOptionStripeLinkProps = _objectSpread(_objectSpread({}, props), {}, {
+    UIComponent: PaymentOptionStripeLinkUI
+  });
+  return /*#__PURE__*/_react.default.createElement(_orderingComponentsAdminExternal.PaymentOptionStripeLink, paymentOptionStripeLinkProps);
+};

package/_modules/components/Stores/PaymentOptionStripeLink/styles.js

@@ -0,0 +1,57 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TabOptionName = exports.TabOption = exports.SandboxWrapper = exports.Option = exports.Header = exports.FieldName = exports.Container = exports.CloseButton = exports.ActionSelectorWrapper = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _polished = require("polished");
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+var Container = exports.Container = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 20px;\n  overflow: auto;\n  transition: 0.3s;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n\n  > button {\n    margin-top: 20px;\n    padding: 5px 15px 35px;\n    position: sticky;\n    top: 100%;\n    width: fit-content;\n    height: 42px;\n  }\n\n  .message {\n    margin: 0px;\n    font-size: 12px;\n  }\n\n  .alert-message {\n    margin: 30px 0 0 0;\n    font-weight: 700;\n  }\n\n  .select {\n    width: 100%;\n    > div:first-child {\n      padding: 8px 15px;\n    }\n  }\n\n  @media (min-width: 1000px) {\n    width: 0;\n    ", "\n  }\n"])), function (props) {
+  var _props$theme;
+  return (_props$theme = props.theme) !== null && _props$theme !== void 0 && _props$theme.rtl ? (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      border-right: 1px solid #E9ECEF;\n    "]))) : (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      border-left: 1px solid #E9ECEF;\n    "])));
+});
+var Option = exports.Option = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  column-gap: 10px;\n  font-size: 13px;\n  line-height: 2;\n  font-weight: 500;\n"])));
+var SandboxWrapper = exports.SandboxWrapper = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  margin-top: 30px;\n  display: flex;\n  align-items: center;\n  color: ", ";\n  span {\n    ", "\n  }\n"])), function (props) {
+  return props.theme.colors.headingColor;
+}, function (props) {
+  var _props$theme2;
+  return (_props$theme2 = props.theme) !== null && _props$theme2 !== void 0 && _props$theme2.rtl ? (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      margin-right: 10px;\n    "]))) : (0, _styledComponents.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      margin-left: 10px;\n    "])));
+});
+var FieldName = exports.FieldName = _styledComponents.default.p(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  color: ", ";\n  margin: 30px 0 10px;\n"])), function (props) {
+  return props.theme.colors.headingColor;
+});
+var Header = exports.Header = _styledComponents.default.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  h1 {\n    font-size: 20px;\n    color: ", ";\n    font-weight: 700;\n    flex: 1;\n    margin: 0;\n  }\n"])), function (props) {
+  return props.theme.colors.headingColor;
+});
+var CloseButton = exports.CloseButton = _styledComponents.default.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  display: none;\n  @media (min-width: 1000px) {\n    display: flex;\n    align-items: center;\n  }\n"])));
+var TabOption = exports.TabOption = _styledComponents.default.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  padding: 12px 0;\n  cursor: pointer;\n  color: ", ";\n\n  > svg {\n    font-size: 20px;\n    &.fill {\n      color: ", ";\n    }\n  }\n"])), function (props) {
+  return props.theme.colors.headingColor;
+}, function (props) {
+  return props.theme.colors.primary;
+});
+var TabOptionName = exports.TabOptionName = _styledComponents.default.span(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  color: ", ";\n  ", "\n"])), function (props) {
+  return props.theme.colors.headingColor;
+}, function (props) {
+  var _props$theme3;
+  return (_props$theme3 = props.theme) !== null && _props$theme3 !== void 0 && _props$theme3.rtl ? (0, _styledComponents.css)(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n    margin-right: 10px;\n  "]))) : (0, _styledComponents.css)(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n    margin-left: 10px;\n  "])));
+});
+var ActionSelectorWrapper = exports.ActionSelectorWrapper = _styledComponents.default.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  margin: 0 10px;\n  button {\n    background: transparent !important;\n    border: none;\n    padding: 0px 5px;\n    &:active,\n    &:focus {\n      border-color: unset !important;\n      box-shadow: none !important;\n    }\n    svg {\n      color: ", ";\n      font-size: 20px;\n    }\n\n    &:after {\n      display: none;\n    }\n\n    &:hover {\n      background: ", " !important;\n    }\n    &:active {\n      background: ", " !important;\n    }\n  }\n\n  .show {\n    button {\n      background: ", " !important;\n    }\n    >div {\n      border: 1px solid ", ";\n      box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.12);\n    }\n  }\n\n  > div {\n    > div {\n      border-radius: 8px;\n      .dropdown-item {\n        font-size: 12px;\n        color: ", ";\n        &:active {\n          background: ", " !important;\n        }\n      }\n      .dropdown-item:last-child {\n        color: #E63757;\n      }\n    }\n  }\n"])), function (props) {
+  return props.theme.colors.headingColor;
+}, function (props) {
+  return (0, _polished.darken)(0.04, props.theme.colors.secundary);
+}, function (props) {
+  return (0, _polished.darken)(0.1, props.theme.colors.secundary);
+}, function (props) {
+  return (0, _polished.darken)(0.04, props.theme.colors.secundary);
+}, function (props) {
+  return props.theme.colors.borderColor;
+}, function (props) {
+  return props.theme.colors.headingColor;
+}, function (props) {
+  return (0, _polished.darken)(0.1, props.theme.colors.secundary);
+});

package/_modules/components/Stores/ProductExtraOptionDetails/index.js

@@ -124,6 +124,10 @@ var ProductExtraOptionDetailsUI = function ProductExtraOptionDetailsUI(props) {
     _useState14 = _slicedToArray(_useState13, 2),
     isExtraOptionSnooze = _useState14[0],
     setIsExtraOptionSnooze = _useState14[1];
+  var _useState15 = (0, _react.useState)(false),
+    _useState16 = _slicedToArray(_useState15, 2),
+    isDraggingExtraOption = _useState16[0],
+    setIsDraggingExtraOption = _useState16[1];
   var handleClickSubOptionImage = function handleClickSubOptionImage(id) {
     document.getElementById(id).click();
   };
@@ -292,7 +296,9 @@ var ProductExtraOptionDetailsUI = function ProductExtraOptionDetailsUI(props) {
       hanldeDragOver: hanldeDragOver,
       handleDrop: handleDrop,
       handleDragEnd: handleDragEnd,
-      handleDuplicateSubOption: handleDuplicateSubOption
+      handleDuplicateSubOption: handleDuplicateSubOption,
+      isDraggingExtraOption: isDraggingExtraOption,
+      setIsDraggingExtraOption: setIsDraggingExtraOption
     });
   }), isAddForm && /*#__PURE__*/_react.default.createElement(_styles2.AdddSubOptionForm, {
     onSubmit: handleSubmit(handleAddOption)
@@ -302,7 +308,7 @@ var ProductExtraOptionDetailsUI = function ProductExtraOptionDetailsUI(props) {
     name: "image",
     control: control,
     render: function render() {
-      var _changesState$result, _changesState$result2, _changesState$changes, _changesState$changes2;
+      var _changesState$changes, _changesState$changes2;
       return /*#__PURE__*/_react.default.createElement(_styles2.SubOptionImage, {
         onClick: function onClick() {
           return handleClickSubOptionImage('add_suboption_image');
@@ -319,12 +325,8 @@ var ProductExtraOptionDetailsUI = function ProductExtraOptionDetailsUI(props) {
           return handleSubOptionFiles(dataTransfer.files, 'add_suboption_image');
         },
         accept: "image/png, image/jpeg, image/jpg",
-        disabled: optionState.loading
-      }, changesState !== null && changesState !== void 0 && (_changesState$result = changesState.result) !== null && _changesState$result !== void 0 && _changesState$result.image && editSubOptionId === null ? /*#__PURE__*/_react.default.createElement("img", {
-        src: changesState === null || changesState === void 0 || (_changesState$result2 = changesState.result) === null || _changesState$result2 === void 0 ? void 0 : _changesState$result2.image,
-        alt: "sub option image",
-        loading: "lazy"
-      }) : (changesState === null || changesState === void 0 || (_changesState$changes = changesState.changes) === null || _changesState$changes === void 0 ? void 0 : _changesState$changes.image) && editSubOptionId === null && /*#__PURE__*/_react.default.createElement("img", {
+        disabled: optionState.loading || isDraggingExtraOption
+      }, (changesState === null || changesState === void 0 || (_changesState$changes = changesState.changes) === null || _changesState$changes === void 0 ? void 0 : _changesState$changes.image) && editSubOptionId === null && /*#__PURE__*/_react.default.createElement("img", {
         src: changesState === null || changesState === void 0 || (_changesState$changes2 = changesState.changes) === null || _changesState$changes2 === void 0 ? void 0 : _changesState$changes2.image,
         alt: "sub option image",
         loading: "lazy"

package/_modules/components/Stores/ProductExtraSuboption/index.js

@@ -52,7 +52,9 @@ var ProductExtraSuboption = exports.ProductExtraSuboption = function ProductExtr
     hanldeDragOver = props.hanldeDragOver,
     handleDrop = props.handleDrop,
     handleDragEnd = props.handleDragEnd,
-    handleDuplicateSubOption = props.handleDuplicateSubOption;
+    handleDuplicateSubOption = props.handleDuplicateSubOption,
+    isDraggingExtraOption = props.isDraggingExtraOption,
+    setIsDraggingExtraOption = props.setIsDraggingExtraOption;
   var theme = (0, _styledComponents.useTheme)();
   var _useLanguage = (0, _orderingComponentsAdminExternal.useLanguage)(),
     _useLanguage2 = _slicedToArray(_useLanguage, 2),
@@ -177,6 +179,13 @@ var ProductExtraSuboption = exports.ProductExtraSuboption = function ProductExtr
     });
     setExternalIdOpen(false);
   };
+  var handleDropSubOption = function handleDropSubOption(e, subOption) {
+    setIsDraggingExtraOption(false);
+    handleDrop(e, subOption);
+  };
+  var handleDragStartSubOption = function handleDragStartSubOption() {
+    setIsDraggingExtraOption(true);
+  };
   (0, _react.useEffect)(function () {
     if (Object.keys(errors).length > 0) {
       setAlertState({
@@ -202,11 +211,12 @@ var ProductExtraSuboption = exports.ProductExtraSuboption = function ProductExtr
     onSubmit: handleSubmit(onSubmit),
     isDragOver: dragoverSubOptionId === subOption.id,
     isBorderBottom: isSubOptionsBottom && isLastSubOption,
+    onDragStart: handleDragStartSubOption,
     onDragOver: function onDragOver(e) {
       return hanldeDragOver(e, subOption, isLastSubOption);
     },
     onDrop: function onDrop(e) {
-      return handleDrop(e, subOption);
+      return handleDropSubOption(e, subOption);
     },
     onDragEnd: handleDragEnd,
     className: "draggable-suboption"
@@ -233,7 +243,7 @@ var ProductExtraSuboption = exports.ProductExtraSuboption = function ProductExtr
       return handleSubOptionFiles(dataTransfer.files, subOption.id);
     },
     accept: "image/png, image/jpeg, image/jpg",
-    disabled: optionState.loading
+    disabled: optionState.loading || isDraggingExtraOption
   }, changesState !== null && changesState !== void 0 && (_changesState$result = changesState.result) !== null && _changesState$result !== void 0 && _changesState$result.image && editSubOptionId === subOption.id ? /*#__PURE__*/_react.default.createElement("img", {
     src: changesState === null || changesState === void 0 || (_changesState$result2 = changesState.result) === null || _changesState$result2 === void 0 ? void 0 : _changesState$result2.image,
     alt: "sub option image",

package/_modules/components/Stores/index.js

@@ -507,6 +507,12 @@ Object.defineProperty(exports, "PaymentOptionStripeDirect", {
     return _PaymentOptionStripeDirect.PaymentOptionStripeDirect;
   }
 });
+Object.defineProperty(exports, "PaymentOptionStripeLink", {
+  enumerable: true,
+  get: function get() {
+    return _PaymentOptionStripeLink.PaymentOptionStripeLink;
+  }
+});
 Object.defineProperty(exports, "PaymethodOptionPaypalExpress", {
   enumerable: true,
   get: function get() {
@@ -751,6 +757,7 @@ var _BusinessMenuOptions = require("./BusinessMenuOptions");
 var _BusinessDeliveryDetails = require("./BusinessDeliveryDetails");
 var _BusinessPickupDetails = require("./BusinessPickupDetails");
 var _PaymentOptionStripeDirect = require("./PaymentOptionStripeDirect");
+var _PaymentOptionStripeLink = require("./PaymentOptionStripeLink");
 var _PaymentOption = require("./PaymentOption");
 var _PaymethodOptionPaypalExpress = require("./PaymethodOptionPaypalExpress");
 var _PaymethodOptionStripeRedirect = require("./PaymethodOptionStripeRedirect");

package/_modules/index.js

@@ -1695,6 +1695,12 @@ Object.defineProperty(exports, "PaymentOptionStripeDirect", {
     return _Stores.PaymentOptionStripeDirect;
   }
 });
+Object.defineProperty(exports, "PaymentOptionStripeLink", {
+  enumerable: true,
+  get: function get() {
+    return _Stores.PaymentOptionStripeLink;
+  }
+});
 Object.defineProperty(exports, "PaymethodOptionPaypalExpress", {
   enumerable: true,
   get: function get() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-admin-external",
-  "version": "1.43.86",
+  "version": "1.43.88",
   "description": "Ordering UI Admin Components",
   "main": "./_modules/index.js",
   "exports": {
@@ -83,7 +83,7 @@
     "lodash": "^4.17.20",
     "moment": "^2.29.1",
     "moment-range": "^4.0.2",
-    "ordering-components-admin-external": "1.43.55",
+    "ordering-components-admin-external": "1.43.57",
     "polished": "^3.6.7",
     "prop-types": "^15.7.2",
     "react-big-calendar": "^1.4.2",

package/src/components/Orders/AllInOne/index.js

@@ -60,7 +60,9 @@ const OrdersManagerUI = (props) => {
     adminsList,
     assignableDriverGroupList,
     mapsData,
-    setMapsData
+    setMapsData,
+    detailsOrder,
+    setDetailsOrder
   } = props
 
   const [, t] = useLanguage()
@@ -72,7 +74,6 @@ const OrdersManagerUI = (props) => {
   const query = new URLSearchParams(useLocation().search)
   const [isOpenOrderDetail, setIsOpenOrderDetail] = useState(false)
   const [orderDetailId, setOrderDetailId] = useState(null)
-  const [detailsOrder, setDetailsOrder] = useState(null)
   const [filterModalOpen, setFilterModalOpen] = useState(false)
   const [assignedOrders, setAssignedOrders] = useState({ loading: false, error: null, orders: [] })
 
@@ -195,6 +196,7 @@ const OrdersManagerUI = (props) => {
         isSelectedOrders={isSelectedOrders}
       >
         <OrdersContentHeader
+          disableSocketRoomDriver
           isDisableTitle={isSelectedOrders}
           isDisableControl={isSelectedOrders}
           title={t('ORDER_MANAGER', 'Orders manager')}
@@ -223,6 +225,7 @@ const OrdersManagerUI = (props) => {
             <DriversContainer>
               <DriversManager
                 disableSocketRoomDriver
+                disableDriverLocationsSockets
                 showCompressedInfo
                 filterValues={filterValues}
                 driverGroupList={driverGroupList}

package/src/components/Orders/DeliveriesManager/index.js

@@ -34,7 +34,9 @@ const DeliveriesManagerUI = (props) => {
     setTimeStatus,
     isUseQuery,
     adminsList,
-    assignableDriverGroupList
+    assignableDriverGroupList,
+    detailsOrder,
+    setDetailsOrder
   } = props
 
   const [, t] = useLanguage()
@@ -42,7 +44,6 @@ const DeliveriesManagerUI = (props) => {
   const query = new URLSearchParams(useLocation().search)
   const [isOpenOrderDetail, setIsOpenOrderDetail] = useState(false)
   const [orderDetailId, setOrderDetailId] = useState(null)
-  const [detailsOrder, setDetailsOrder] = useState(null)
   const [filterModalOpen, setFilterModalOpen] = useState(false)
   const [slaSettingTime, setSlaSettingTime] = useState(60000)
   const [ordersAmountByStatus, setOrdersAmountByStatus] = useState({

package/src/components/Orders/OrderContactInformation/index.js

@@ -42,7 +42,8 @@ export const OrderContactInformation = (props) => {
     setAddressState,
     setCommentInfostate,
     commentInfoState,
-    addressState
+    addressState,
+    disableSocketRoomDriver
   } = props
 
   const [, t] = useLanguage()
@@ -393,6 +394,7 @@ export const OrderContactInformation = (props) => {
                 isOrderDrivers
                 orderId={order?.id}
                 setCommentInfostate={setCommentInfostate}
+                disableSocketRoomDriver={disableSocketRoomDriver}
               />
             </DriverSelectorContainer>
           )}