ordering-ui-admin-external 1.22.5 → 1.23.0

package/_modules/components/Delivery/DriversGroupDetails/index.js

@@ -44,7 +44,8 @@ var DriversGroupDetailsUI = function DriversGroupDetailsUI(props) {
     handleNextTour = props.handleNextTour,
     handleUpdateDriversGroup = props.handleUpdateDriversGroup,
     setIsExtendExtraOpen = props.setIsExtendExtraOpen,
-    actionDisabled = props.actionDisabled;
+    actionDisabled = props.actionDisabled,
+    driversGroupId = props.driversGroupId;
   var history = (0, _reactRouterDom.useHistory)();
   var query = new URLSearchParams((0, _reactRouterDom.useLocation)().search);
   var theme = (0, _styledComponents.useTheme)();
@@ -194,6 +195,9 @@ var DriversGroupDetailsUI = function DriversGroupDetailsUI(props) {
       handleTabClick(showMenu);
     }
   }, [driversGroupState.loading]);
+  (0, _react.useEffect)(function () {
+    setShowMenu('general');
+  }, [driversGroupId]);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styles2.DetailsContainer, null, /*#__PURE__*/_react.default.createElement(_styles2.Header, null, driversGroupState.driversGroup ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h1", null, (_driversGroupState$dr4 = driversGroupState.driversGroup) === null || _driversGroupState$dr4 === void 0 ? void 0 : _driversGroupState$dr4.name), /*#__PURE__*/_react.default.createElement(_styles.Switch, {
     defaultChecked: (_driversGroupState$dr5 = driversGroupState.driversGroup) === null || _driversGroupState$dr5 === void 0 ? void 0 : _driversGroupState$dr5.enabled,
     onChange: function onChange(enabled) {

package/_modules/components/Delivery/DriversGroupsListing/index.js

@@ -110,11 +110,13 @@ var DriversGroupsListingUI = function DriversGroupsListingUI(props) {
   var handleOpenDetails = function handleOpenDetails(driverGroup) {
     setMoveDistance(0);
     setCurDriversGroup(driverGroup);
+    setCurDriversGroupId(driverGroup === null || driverGroup === void 0 ? void 0 : driverGroup.id);
     setOpenDetails(true);
     if (!driverGroup) {
       setTimeout(function () {
         setCurrentTourStep(5);
       }, 50);
+      history.replace("".concat(location.pathname));
     } else {
       history.replace("".concat(location.pathname, "?id=").concat(driverGroup.id));
     }

package/_modules/components/Delivery/DriversMarkAsBusy/index.js

@@ -42,6 +42,11 @@ var DriversMarkAsBusy = function DriversMarkAsBusy(props) {
       handleChangesState(_defineProperty({}, e.target.name, changeValue));
     }
   };
+  (0, _react.useEffect)(function () {
+    if (typeof (changesState === null || changesState === void 0 ? void 0 : changesState.autoassign_max_in_pending) !== 'undefined' || typeof (changesState === null || changesState === void 0 ? void 0 : changesState.autoassign_max_in_accepted_by_business) !== 'undefined' || typeof (changesState === null || changesState === void 0 ? void 0 : changesState.autoassign_max_in_ready_for_pickup) !== 'undefined' || typeof (changesState === null || changesState === void 0 ? void 0 : changesState.autoassign_max_in_accepted_by_driver) !== 'undefined' || typeof (changesState === null || changesState === void 0 ? void 0 : changesState.autoassign_max_in_driver_in_business) !== 'undefined' || typeof (changesState === null || changesState === void 0 ? void 0 : changesState.autoassign_max_in_pickup_completed) !== 'undefined') {
+      setIsShowAdvancedOption(true);
+    }
+  }, [changesState]);
   return /*#__PURE__*/_react.default.createElement(_styles2.Container, null, /*#__PURE__*/_react.default.createElement("h1", null, t('MARK_DRIVER_BUSY', 'Mark Drivers As Busy')), /*#__PURE__*/_react.default.createElement(_styles2.InputWrapper, null, /*#__PURE__*/_react.default.createElement("label", null, t('MAX_AMOUNT_ORDERS_PER_DRIVER', 'Maximum amount of orders per drivers')), /*#__PURE__*/_react.default.createElement(_styles.Input, {
     name: "autoassign_max_orders",
     value: (_ref = (_changesState$autoass = changesState === null || changesState === void 0 ? void 0 : changesState.autoassign_max_orders) !== null && _changesState$autoass !== void 0 ? _changesState$autoass : curDriversGroup === null || curDriversGroup === void 0 ? void 0 : curDriversGroup.autoassign_max_orders) !== null && _ref !== void 0 ? _ref : '',

package/_modules/components/Orders/OrderBill/RefundToWallet.js

@@ -0,0 +1,238 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RefundToWallet = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _orderingComponentsAdminExternal = require("ordering-components-admin-external");
+var _reactHookForm = require("react-hook-form");
+var _styles = require("../../../styles");
+var _Shared = require("../../Shared");
+var _reactBootstrapIcons = require("react-bootstrap-icons");
+var _FirstSelect = require("../../../styles/Select/FirstSelect");
+var _styles2 = require("./styles");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _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(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+var RefundToWallet = function RefundToWallet(props) {
+  var _configs$refund_cash_, _configs$refund_credi, _configs$refund_strip, _configs$refund_other;
+  var order = props.order,
+    actionStatus = props.actionStatus,
+    handleOrderRefund = props.handleOrderRefund;
+  var _useLanguage = (0, _orderingComponentsAdminExternal.useLanguage)(),
+    _useLanguage2 = _slicedToArray(_useLanguage, 2),
+    t = _useLanguage2[1];
+  var _useConfig = (0, _orderingComponentsAdminExternal.useConfig)(),
+    _useConfig2 = _slicedToArray(_useConfig, 1),
+    configs = _useConfig2[0].configs;
+  var isAllowCashWalletRefund = (configs === null || configs === void 0 ? void 0 : (_configs$refund_cash_ = configs.refund_cash_wallet_allow_when_order_cancelled) === null || _configs$refund_cash_ === void 0 ? void 0 : _configs$refund_cash_.value) === '1';
+  var isAllowCreditPointRefund = (configs === null || configs === void 0 ? void 0 : (_configs$refund_credi = configs.refund_credit_point_allow_when_order_cancelled) === null || _configs$refund_credi === void 0 ? void 0 : _configs$refund_credi.value) === '1';
+  var isAllowStripeRefund = (configs === null || configs === void 0 ? void 0 : (_configs$refund_strip = configs.refund_stripe_allow_when_order_cancelled) === null || _configs$refund_strip === void 0 ? void 0 : _configs$refund_strip.value) === '1';
+  var isAllowOtherRefund = (configs === null || configs === void 0 ? void 0 : (_configs$refund_other = configs.refund_other_allow_when_order_cancelled) === null || _configs$refund_other === void 0 ? void 0 : _configs$refund_other.value) === '1';
+  var _useForm = (0, _reactHookForm.useForm)(),
+    handleSubmit = _useForm.handleSubmit,
+    register = _useForm.register,
+    errors = _useForm.errors;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    openModal = _useState2[0],
+    setOpenModal = _useState2[1];
+  var _useState3 = (0, _react.useState)({
+      open: false,
+      content: []
+    }),
+    _useState4 = _slicedToArray(_useState3, 2),
+    alertState = _useState4[0],
+    setAlertState = _useState4[1];
+  var _useState5 = (0, _react.useState)(true),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isRefundAll = _useState6[0],
+    setIsRefundAll = _useState6[1];
+  var _useState7 = (0, _react.useState)(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    refundDisabled = _useState8[0],
+    setRefundDisabled = _useState8[1];
+  var _useState9 = (0, _react.useState)(false),
+    _useState10 = _slicedToArray(_useState9, 2),
+    refundAllDisabled = _useState10[0],
+    setRefundAllDisabled = _useState10[1];
+  var _useState11 = (0, _react.useState)(null),
+    _useState12 = _slicedToArray(_useState11, 2),
+    selectedRefundOption = _useState12[0],
+    setSelectedRefundOption = _useState12[1];
+  var _useState13 = (0, _react.useState)([]),
+    _useState14 = _slicedToArray(_useState13, 2),
+    refundOptions = _useState14[0],
+    setRefundOptions = _useState14[1];
+  var onSubmit = function onSubmit(formData) {
+    var _order$summary;
+    if (!selectedRefundOption) {
+      setAlertState({
+        open: true,
+        content: t('VALIDATION_ERROR_FILLED', 'The _attribute_ field is required.').replace('_attribute_', t('TYPE', 'Type'))
+      });
+      return;
+    }
+    var data = {};
+    if (selectedRefundOption !== 'cash_wallet') {
+      data.order_payment_event_id = selectedRefundOption;
+    }
+    if (formData.description) data.description = formData.description;
+    data.amount = isRefundAll ? (order === null || order === void 0 ? void 0 : (_order$summary = order.summary) === null || _order$summary === void 0 ? void 0 : _order$summary.total) || (order === null || order === void 0 ? void 0 : order.total) : formData.amount;
+    data.transfer_to = selectedRefundOption !== 'cash_wallet' ? 'source' : 'cash_wallet';
+    handleOrderRefund(data);
+  };
+  (0, _react.useEffect)(function () {
+    var _Object$keys;
+    if ((Object === null || Object === void 0 ? void 0 : (_Object$keys = Object.keys(errors)) === null || _Object$keys === void 0 ? void 0 : _Object$keys.length) > 0) {
+      var _Object$values;
+      setAlertState({
+        open: true,
+        content: Object === null || Object === void 0 ? void 0 : (_Object$values = Object.values(errors)) === null || _Object$values === void 0 ? void 0 : _Object$values.map(function (error) {
+          return error === null || error === void 0 ? void 0 : error.message;
+        })
+      });
+    }
+  }, [errors]);
+  (0, _react.useEffect)(function () {
+    var _order$payment_events, _order$summary2, _order$payment_events2;
+    setSelectedRefundOption(null);
+    setRefundDisabled(false);
+    setRefundAllDisabled(false);
+    setIsRefundAll(true);
+    if (!(order !== null && order !== void 0 && order.payment_events)) return;
+    var totalRefundAmount = (order === null || order === void 0 ? void 0 : (_order$payment_events = order.payment_events) === null || _order$payment_events === void 0 ? void 0 : _order$payment_events.filter(function (item) {
+      return item.event === 'refund';
+    }).reduce(function (total, event) {
+      return total + ((event === null || event === void 0 ? void 0 : event.amount) || 0);
+    }, 0)) || 0;
+    if (totalRefundAmount === ((order === null || order === void 0 ? void 0 : (_order$summary2 = order.summary) === null || _order$summary2 === void 0 ? void 0 : _order$summary2.total) || (order === null || order === void 0 ? void 0 : order.total))) {
+      setRefundDisabled(true);
+    }
+    if (totalRefundAmount) {
+      setRefundAllDisabled(true);
+      setIsRefundAll(false);
+    }
+    var _refundOptions = [];
+    var paymentEvents = (order === null || order === void 0 ? void 0 : (_order$payment_events2 = order.payment_events) === null || _order$payment_events2 === void 0 ? void 0 : _order$payment_events2.filter(function (item) {
+      return item.event === 'payment';
+    })) || [];
+    paymentEvents.forEach(function (event) {
+      var _event$wallet_event, _event$wallet_event$w, _event$wallet_event2, _event$wallet_event2$, _event$paymethod, _event$data;
+      if ((event === null || event === void 0 ? void 0 : (_event$wallet_event = event.wallet_event) === null || _event$wallet_event === void 0 ? void 0 : (_event$wallet_event$w = _event$wallet_event.wallet) === null || _event$wallet_event$w === void 0 ? void 0 : _event$wallet_event$w.type) === 'cash') {
+        if (isAllowCashWalletRefund) {
+          _refundOptions.push({
+            value: event.id,
+            content: /*#__PURE__*/_react.default.createElement(_styles2.Option, null, t('CASH_WALLET', 'Cash Wallet'))
+          });
+        }
+      } else if ((event === null || event === void 0 ? void 0 : (_event$wallet_event2 = event.wallet_event) === null || _event$wallet_event2 === void 0 ? void 0 : (_event$wallet_event2$ = _event$wallet_event2.wallet) === null || _event$wallet_event2$ === void 0 ? void 0 : _event$wallet_event2$.type) === 'credit_point') {
+        if (isAllowCreditPointRefund) {
+          _refundOptions.push({
+            value: event.id,
+            content: /*#__PURE__*/_react.default.createElement(_styles2.Option, null, t('POINTS_WALLET', 'Points Wallet'))
+          });
+        }
+      } else if ((event === null || event === void 0 ? void 0 : (_event$paymethod = event.paymethod) === null || _event$paymethod === void 0 ? void 0 : _event$paymethod.gateway) === 'stripe' || (event === null || event === void 0 ? void 0 : (_event$data = event.data) === null || _event$data === void 0 ? void 0 : _event$data.gateway) === 'stripe') {
+        if (isAllowStripeRefund) {
+          _refundOptions.push({
+            value: event.id,
+            content: /*#__PURE__*/_react.default.createElement(_styles2.Option, null, t('STRIPE', 'Stripe'))
+          });
+        }
+      } else {
+        if (isAllowOtherRefund) {
+          var _event$paymethod2, _event$paymethod2$gat, _event$paymethod3, _event$data2, _event$data2$gateway, _event$data3, _event$data3$gateway;
+          _refundOptions.push({
+            value: event.id,
+            content: /*#__PURE__*/_react.default.createElement(_styles2.Option, null, event !== null && event !== void 0 && event.paymethod ? t(event === null || event === void 0 ? void 0 : (_event$paymethod2 = event.paymethod) === null || _event$paymethod2 === void 0 ? void 0 : (_event$paymethod2$gat = _event$paymethod2.gateway) === null || _event$paymethod2$gat === void 0 ? void 0 : _event$paymethod2$gat.toUpperCase(), event === null || event === void 0 ? void 0 : (_event$paymethod3 = event.paymethod) === null || _event$paymethod3 === void 0 ? void 0 : _event$paymethod3.name) : t(event === null || event === void 0 ? void 0 : (_event$data2 = event.data) === null || _event$data2 === void 0 ? void 0 : (_event$data2$gateway = _event$data2.gateway) === null || _event$data2$gateway === void 0 ? void 0 : _event$data2$gateway.toUpperCase(), event === null || event === void 0 ? void 0 : (_event$data3 = event.data) === null || _event$data3 === void 0 ? void 0 : (_event$data3$gateway = _event$data3.gateway) === null || _event$data3$gateway === void 0 ? void 0 : _event$data3$gateway.replaceAll('_', ' ')))
+          });
+        }
+      }
+    });
+    setRefundOptions(_refundOptions);
+  }, [JSON.stringify(order === null || order === void 0 ? void 0 : order.payment_events)], order === null || order === void 0 ? void 0 : order.id);
+  (0, _react.useEffect)(function () {
+    if (!(actionStatus !== null && actionStatus !== void 0 && actionStatus.loading)) {
+      setOpenModal(false);
+    }
+  }, [actionStatus === null || actionStatus === void 0 ? void 0 : actionStatus.loading]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styles2.RefundWalletButtonWrapper, null, /*#__PURE__*/_react.default.createElement(_styles.Button, {
+    color: "primary",
+    borderRadius: "8px",
+    disabled: (actionStatus === null || actionStatus === void 0 ? void 0 : actionStatus.loading) || refundDisabled,
+    onClick: function onClick() {
+      return setOpenModal(true);
+    }
+  }, t('REFUND_TO_WALLET', 'Refund to Wallet'))), /*#__PURE__*/_react.default.createElement(_Shared.Modal, {
+    width: "700px",
+    open: openModal,
+    onClose: function onClose() {
+      return setOpenModal(false);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_styles2.RefundContainer, {
+    onSubmit: handleSubmit(onSubmit),
+    autoComplete: "off"
+  }, /*#__PURE__*/_react.default.createElement("h2", null, t('REFUND_TO_WALLET', 'Refund to Wallet')), refundOptions.length > 0 ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styles2.SelectWrapper, null, /*#__PURE__*/_react.default.createElement("span", null, t('REFUND_TYPES', 'Refund types')), /*#__PURE__*/_react.default.createElement(_FirstSelect.Select, {
+    defaultValue: selectedRefundOption,
+    options: refundOptions,
+    placeholder: /*#__PURE__*/_react.default.createElement(_styles2.Option, null, t('SELECT_TYPE', 'Select type')),
+    onChange: function onChange(val) {
+      return setSelectedRefundOption(val);
+    }
+  })), /*#__PURE__*/_react.default.createElement("p", null, t('QUESTION_REFUND_AMOUNT', 'How do you want to refund?')), /*#__PURE__*/_react.default.createElement(_styles2.RadioItemContainer, {
+    active: isRefundAll,
+    disabled: refundAllDisabled,
+    onClick: function onClick() {
+      return setIsRefundAll(true);
+    }
+  }, isRefundAll ? /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.RecordCircleFill, null) : /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.Circle, null), /*#__PURE__*/_react.default.createElement("span", null, t('REFUND_ALL', 'Refund all'))), /*#__PURE__*/_react.default.createElement(_styles2.RadioItemContainer, {
+    active: !isRefundAll,
+    onClick: function onClick() {
+      return setIsRefundAll(false);
+    }
+  }, !isRefundAll ? /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.RecordCircleFill, null) : /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.Circle, null), /*#__PURE__*/_react.default.createElement("span", null, t('REFUND_ONLY_AN_AMOUNT', 'Refund only an amount'))), !isRefundAll && /*#__PURE__*/_react.default.createElement(_styles2.RefundAmountWrapper, null, /*#__PURE__*/_react.default.createElement(_styles.Input, {
+    name: "amount",
+    onKeyPress: function onKeyPress(e) {
+      if (!/^[0-9.]$/.test(e.key)) {
+        e.preventDefault();
+      }
+    },
+    ref: register({
+      required: t('VALIDATION_ERROR_FILLED', 'The _attribute_ field is required.').replace('_attribute_', t('AMOUNT', 'Amount'))
+    })
+  })), /*#__PURE__*/_react.default.createElement(_styles2.RefundReasonContainer, null, /*#__PURE__*/_react.default.createElement("label", null, t('COMMENTS', 'Comments')), /*#__PURE__*/_react.default.createElement(_styles.TextArea, {
+    rows: 3,
+    name: "description"
+  })), /*#__PURE__*/_react.default.createElement(_styles.Button, {
+    type: "submit",
+    color: "primary",
+    borderRadius: "8px"
+  }, t('REFUND', 'Refund'))) : /*#__PURE__*/_react.default.createElement(_styles2.ErrorText, null, t('REFUND_NOT_ALLOWED', 'The refund is not allowed.')))), /*#__PURE__*/_react.default.createElement(_Shared.Alert, {
+    title: t('WEB_APPNAME', 'Ordering'),
+    content: alertState === null || alertState === void 0 ? void 0 : alertState.content,
+    acceptText: t('ACCEPT', 'Accept'),
+    open: alertState === null || alertState === void 0 ? void 0 : alertState.open,
+    onClose: function onClose() {
+      return setAlertState({
+        open: false,
+        content: []
+      });
+    },
+    onAccept: function onAccept() {
+      return setAlertState({
+        open: false,
+        content: []
+      });
+    },
+    closeOnBackdrop: false
+  }));
+};
+exports.RefundToWallet = RefundToWallet;

package/_modules/components/Orders/OrderBill/index.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.OrderBill = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _orderingComponentsAdminExternal = require("ordering-components-admin-external");
+var _RefundToWallet = require("./RefundToWallet");
 var _utils = require("../../../utils");
 var _Shared = require("../../Shared");
 var _styles = require("../../../styles");
@@ -25,10 +26,11 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var OrderBill = function OrderBill(props) {
-  var _order$summary$subtot, _order$summary2, _ref, _order$summary3, _order$offers, _order$summary$discou, _order$summary4, _order$offers2, _order$offers3, _order$offers3$filter, _order$summary5, _order$summary6, _order$summary7, _ref2, _order$summary8, _order$summary$subtot2, _order$summary9, _order$taxes3, _order$summary$tax2, _order$summary10, _order$fees, _order$summary$servic, _order$summary11, _order$taxes4, _order$taxes5, _order$fees2, _order$fees3, _order$fees3$filter, _order$offers4, _order$offers5, _order$offers5$filter, _order$summary12, _order$summary13, _order$offers6, _order$offers7, _order$offers7$filter, _order$summary14, _order$summary15, _configs$driver_tip_t, _configs$driver_tip_u, _order$summary$driver, _order$summary16, _order$summary17, _order$payment_events, _order$payment_events2, _order$delivery_optio, _order$vehicle, _order$vehicle$type, _order$vehicle2, _order$vehicle3, _order$vehicle4, _order$vehicle5, _order$paymethod;
+  var _order$summary$subtot, _order$summary2, _ref, _order$summary3, _order$offers, _order$summary$discou, _order$summary4, _order$offers2, _order$offers3, _order$offers3$filter, _order$summary5, _order$summary6, _order$summary7, _ref2, _order$summary8, _order$summary$subtot2, _order$summary9, _order$taxes3, _order$summary$tax2, _order$summary10, _order$fees, _order$summary$servic, _order$summary11, _order$taxes4, _order$taxes5, _order$fees2, _order$fees3, _order$fees3$filter, _order$offers4, _order$offers5, _order$offers5$filter, _order$summary12, _order$summary13, _order$offers6, _order$offers7, _order$offers7$filter, _order$summary14, _order$summary15, _configs$driver_tip_t, _configs$driver_tip_u, _order$summary$driver, _order$summary16, _order$summary17, _order$payment_events, _order$payment_events2, _order$payment_events3, _order$payment_events4, _order$delivery_optio, _order$vehicle, _order$vehicle$type, _order$vehicle2, _order$vehicle3, _order$vehicle4, _order$vehicle5, _order$paymethod;
   var order = props.order,
     actionStatus = props.actionStatus,
-    handleRefundOrder = props.handleRefundOrder;
+    handleRefundPaymentsStripe = props.handleRefundPaymentsStripe,
+    handleOrderRefund = props.handleOrderRefund;
   var _useLanguage = (0, _orderingComponentsAdminExternal.useLanguage)(),
     _useLanguage2 = _slicedToArray(_useLanguage, 2),
     t = _useLanguage2[1];
@@ -83,7 +85,7 @@ var OrderBill = function OrderBill(props) {
         setConfirm(_objectSpread(_objectSpread({}, confirm), {}, {
           open: false
         }));
-        handleRefundOrder();
+        handleRefundPaymentsStripe();
       }
     });
   };
@@ -188,7 +190,9 @@ var OrderBill = function OrderBill(props) {
     className: "payments"
   }, /*#__PURE__*/_react.default.createElement("thead", null, /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("th", {
     colSpan: "2"
-  }, t('PAYMENTS', 'Payments')))), /*#__PURE__*/_react.default.createElement("tbody", null, order === null || order === void 0 ? void 0 : (_order$payment_events2 = order.payment_events) === null || _order$payment_events2 === void 0 ? void 0 : _order$payment_events2.map(function (event, i) {
+  }, t('PAYMENTS', 'Payments')))), /*#__PURE__*/_react.default.createElement("tbody", null, order === null || order === void 0 ? void 0 : (_order$payment_events2 = order.payment_events) === null || _order$payment_events2 === void 0 ? void 0 : _order$payment_events2.filter(function (item) {
+    return item.event === 'payment';
+  }).map(function (event, i) {
     var _walletName$event$wal, _event$wallet_event, _event$wallet_event$w, _event$paymethod, _event$paymethod$gate, _event$paymethod2, _event$data, _event$data2, _event$data2$gateway, _event$data3, _event$data3$gateway, _walletName$event$dat, _event$data4, _event$paymethod3;
     return /*#__PURE__*/_react.default.createElement("tr", {
       key: i
@@ -197,6 +201,25 @@ var OrderBill = function OrderBill(props) {
     }) : "-".concat(parsePrice(event === null || event === void 0 ? void 0 : event.amount, {
       currency: order === null || order === void 0 ? void 0 : order.currency
     }))));
+  }))), /*#__PURE__*/_react.default.createElement(_RefundToWallet.RefundToWallet, {
+    order: order,
+    actionStatus: actionStatus,
+    handleOrderRefund: handleOrderRefund
+  }), (order === null || order === void 0 ? void 0 : (_order$payment_events3 = order.payment_events) === null || _order$payment_events3 === void 0 ? void 0 : _order$payment_events3.filter(function (item) {
+    return item.event === 'refund';
+  }).length) > 0 && /*#__PURE__*/_react.default.createElement("table", {
+    className: "payments"
+  }, /*#__PURE__*/_react.default.createElement("thead", null, /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("th", {
+    colSpan: "2"
+  }, t('REFUND', 'Refund')))), /*#__PURE__*/_react.default.createElement("tbody", null, order === null || order === void 0 ? void 0 : (_order$payment_events4 = order.payment_events) === null || _order$payment_events4 === void 0 ? void 0 : _order$payment_events4.filter(function (item) {
+    return item.event === 'refund';
+  }).map(function (event, i) {
+    var _walletName$event$wal2, _event$wallet_event2, _event$wallet_event2$, _event$paymethod4, _event$paymethod4$gat, _event$paymethod5, _event$data5, _event$data6, _event$data6$gateway, _event$data7, _event$data7$gateway, _walletName$event$dat2, _event$data8;
+    return /*#__PURE__*/_react.default.createElement("tr", {
+      key: i
+    }, /*#__PURE__*/_react.default.createElement("td", null, event !== null && event !== void 0 && event.wallet_event ? (_walletName$event$wal2 = walletName[event === null || event === void 0 ? void 0 : (_event$wallet_event2 = event.wallet_event) === null || _event$wallet_event2 === void 0 ? void 0 : (_event$wallet_event2$ = _event$wallet_event2.wallet) === null || _event$wallet_event2$ === void 0 ? void 0 : _event$wallet_event2$.type]) === null || _walletName$event$wal2 === void 0 ? void 0 : _walletName$event$wal2.name : event !== null && event !== void 0 && event.paymethod ? t(event === null || event === void 0 ? void 0 : (_event$paymethod4 = event.paymethod) === null || _event$paymethod4 === void 0 ? void 0 : (_event$paymethod4$gat = _event$paymethod4.gateway) === null || _event$paymethod4$gat === void 0 ? void 0 : _event$paymethod4$gat.toUpperCase(), event === null || event === void 0 ? void 0 : (_event$paymethod5 = event.paymethod) === null || _event$paymethod5 === void 0 ? void 0 : _event$paymethod5.name) : event !== null && event !== void 0 && (_event$data5 = event.data) !== null && _event$data5 !== void 0 && _event$data5.gateway ? t(event === null || event === void 0 ? void 0 : (_event$data6 = event.data) === null || _event$data6 === void 0 ? void 0 : (_event$data6$gateway = _event$data6.gateway) === null || _event$data6$gateway === void 0 ? void 0 : _event$data6$gateway.toUpperCase(), event === null || event === void 0 ? void 0 : (_event$data7 = event.data) === null || _event$data7 === void 0 ? void 0 : (_event$data7$gateway = _event$data7.gateway) === null || _event$data7$gateway === void 0 ? void 0 : _event$data7$gateway.replaceAll('_', ' ')) : (_walletName$event$dat2 = walletName[event === null || event === void 0 ? void 0 : (_event$data8 = event.data) === null || _event$data8 === void 0 ? void 0 : _event$data8.wallet_currency]) === null || _walletName$event$dat2 === void 0 ? void 0 : _walletName$event$dat2.name), /*#__PURE__*/_react.default.createElement("td", null, parsePrice(event === null || event === void 0 ? void 0 : event.amount, {
+      currency: order === null || order === void 0 ? void 0 : order.currency
+    })));
   }))), /*#__PURE__*/_react.default.createElement("table", {
     className: "delivery_option"
   }, /*#__PURE__*/_react.default.createElement("thead", null, /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("th", {

package/_modules/components/Orders/OrderBill/styles.js

@@ -4,9 +4,9 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.RefundButtonWrapper = exports.OrderBillContainer = void 0;
+exports.SelectWrapper = exports.RefundWalletButtonWrapper = exports.RefundReasonContainer = exports.RefundContainer = exports.RefundButtonWrapper = exports.RefundAmountWrapper = exports.RadioItemContainer = exports.OrderBillContainer = exports.Option = exports.ErrorText = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17;
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
@@ -20,4 +20,42 @@ var OrderBillContainer = _styledComponents.default.div(_templateObject || (_temp
 });
 exports.OrderBillContainer = OrderBillContainer;
 var RefundButtonWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  width: 100%;\n  padding: 20px 0;\n\n  > button {\n    height: 44px;\n  }\n"])));
-exports.RefundButtonWrapper = RefundButtonWrapper;
+exports.RefundButtonWrapper = RefundButtonWrapper;
+var RefundWalletButtonWrapper = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  width: 100%;\n  padding: 20px 0;\n\n  > button {\n    height: 44px;\n  }\n"])));
+exports.RefundWalletButtonWrapper = RefundWalletButtonWrapper;
+var RefundContainer = _styledComponents.default.form(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n\n  h2 {\n    font-size: 20px;\n    font-weight: 700;\n    text-align: center;\n    margin: 0 0 30px 0;\n  }\n\n  p {\n    margin: 4px 0;\n    font-size: 14px;\n  }\n\n  button {\n    height: 44px;\n  }\n"])));
+exports.RefundContainer = RefundContainer;
+var RadioItemContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  padding: 15px 0;\n  cursor: pointer;\n\n  ", "\n\n  ", "\n\n  > span {\n    font-size: 14px;\n    ", "\n  }\n"])), function (_ref) {
+  var active = _ref.active;
+  return active && (0, _styledComponents.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    svg {\n      color: ", ";\n    }\n  "])), function (props) {
+    return props.theme.colors.primary;
+  });
+}, function (_ref2) {
+  var disabled = _ref2.disabled;
+  return disabled && (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    cursor: not-allowed;\n    pointer-events: none;\n    color: ", ";\n  "])), function (props) {
+    return props.theme.colors.disabled;
+  });
+}, function (props) {
+  var _props$theme2;
+  return (_props$theme2 = props.theme) !== null && _props$theme2 !== void 0 && _props$theme2.rtl ? (0, _styledComponents.css)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n      margin-right: 13px;\n    "]))) : (0, _styledComponents.css)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n      margin-left: 13px;\n    "])));
+});
+exports.RadioItemContainer = RadioItemContainer;
+var RefundAmountWrapper = _styledComponents.default.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  ", "\n"])), function (props) {
+  var _props$theme3;
+  return (_props$theme3 = props.theme) !== null && _props$theme3 !== void 0 && _props$theme3.rtl ? (0, _styledComponents.css)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n    margin-right: 28px;\n  "]))) : (0, _styledComponents.css)(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n    margin-left: 28px;\n  "])));
+});
+exports.RefundAmountWrapper = RefundAmountWrapper;
+var RefundReasonContainer = _styledComponents.default.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  margin: 40px 0;\n\n  label {\n    font-size: 14px;\n    margin-bottom: 7px;\n  }\n"])));
+exports.RefundReasonContainer = RefundReasonContainer;
+var Option = _styledComponents.default.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: 14px;\n  white-space: nowrap;\n"])), function (props) {
+  return props.theme.colors.secundaryContrast;
+});
+exports.Option = Option;
+var SelectWrapper = _styledComponents.default.div(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  margin-bottom: 20px;\n  \n  > span {\n    font-size: 14px;\n    margin-bottom: 7px;\n  }\n  .select {\n    width: 100%;\n    background: ", ";\n    border: none;\n\n    > div:first-child {\n      padding-top: 4px;\n      padding-bottom: 4px;\n    }\n  }\n"])), function (props) {
+  return props.theme.colors.secundary;
+});
+exports.SelectWrapper = SelectWrapper;
+var ErrorText = _styledComponents.default.div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n  text-align: center;\n  color: ", ";\n  font-size: 16px;\n"])), function (props) {
+  return props.theme.colors.danger;
+});
+exports.ErrorText = ErrorText;

package/_modules/components/Orders/OrderDetails/index.js

@@ -21,6 +21,7 @@ var _reactBootstrapIcons = require("react-bootstrap-icons");
 var _Shared = require("../../Shared");
 var _styles = require("../../../styles");
 var _OrderToPrint = require("../OrderToPrint");
+var _OrderToPrintTicket = require("../OrderToPrintTicket");
 var _styles2 = require("./styles");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -51,7 +52,8 @@ var OrderDetailsUI = function OrderDetailsUI(props) {
     setIsTourFlag = props.setIsTourFlag,
     setIsTourOpen = props.setIsTourOpen,
     actionStatus = props.actionStatus,
-    handleRefundOrder = props.handleRefundOrder,
+    handleRefundPaymentsStripe = props.handleRefundPaymentsStripe,
+    handleOrderRefund = props.handleOrderRefund,
     isServiceOrder = props.isServiceOrder;
   var history = (0, _reactRouterDom.useHistory)();
   var query = new URLSearchParams((0, _reactRouterDom.useLocation)().search);
@@ -78,6 +80,7 @@ var OrderDetailsUI = function OrderDetailsUI(props) {
     _useSession2 = _slicedToArray(_useSession, 1),
     user = _useSession2[0].user;
   var printRef = (0, _react.useRef)();
+  var printTicketRef = (0, _react.useRef)();
   var _useState5 = (0, _react.useState)({
       business: false,
       driver: false,
@@ -487,7 +490,8 @@ var OrderDetailsUI = function OrderDetailsUI(props) {
     isTourOpen: isTourOpen,
     currentTourStep: currentTourStep,
     setIsTourOpen: setIsTourOpen,
-    printRef: printRef
+    printRef: printRef,
+    printTicketRef: printTicketRef
   }), /*#__PURE__*/_react.default.createElement(_styles2.OrderStatus, {
     isDisabled: isTourOpen && currentTourStep === 1
   }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h2", null, t('ORDER_STATUS_TEXT', 'Order status')), /*#__PURE__*/_react.default.createElement("p", null, order !== null && order !== void 0 && order.delivery_datetime_utc ? parseDate(order === null || order === void 0 ? void 0 : order.delivery_datetime_utc) : parseDate(order === null || order === void 0 ? void 0 : order.delivery_datetime, {
@@ -520,7 +524,8 @@ var OrderDetailsUI = function OrderDetailsUI(props) {
   }))), /*#__PURE__*/_react.default.createElement(_OrderBill.OrderBill, {
     order: order,
     actionStatus: actionStatus,
-    handleRefundOrder: handleRefundOrder
+    handleRefundPaymentsStripe: handleRefundPaymentsStripe,
+    handleOrderRefund: handleOrderRefund
   })), /*#__PURE__*/_react.default.createElement(_styles2.DetailBottom, null)), extraOpen && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, width >= 1000 ? /*#__PURE__*/_react.default.createElement(_styles2.OrderDetailsExtraContent, null, /*#__PURE__*/_react.default.createElement(_styles2.CloseButtonWrapper, null, /*#__PURE__*/_react.default.createElement(_styles.IconButton, {
     color: "black",
     onClick: function onClick() {
@@ -608,6 +613,10 @@ var OrderDetailsUI = function OrderDetailsUI(props) {
     getOrderStatus: getOrderStatus,
     getLogisticTag: getLogisticTag,
     getPriorityTag: getPriorityTag
+  }), order && Object.keys(order).length > 0 && !loading && /*#__PURE__*/_react.default.createElement(_OrderToPrintTicket.OrderToPrintTicket, {
+    ref: printTicketRef,
+    order: order,
+    getOrderStatus: getOrderStatus
   }));
 };
 var OrderDetails = function OrderDetails(props) {

package/_modules/components/Orders/OrderDetailsHeader/index.js

@@ -34,7 +34,8 @@ var OrderDetailsHeader = function OrderDetailsHeader(props) {
     openMessage = props.openMessage,
     printRef = props.printRef,
     isServiceOrder = props.isServiceOrder,
-    extraOpen = props.extraOpen;
+    extraOpen = props.extraOpen,
+    printTicketRef = props.printTicketRef;
   var _useLanguage = (0, _orderingComponentsAdminExternal.useLanguage)(),
     _useLanguage2 = _slicedToArray(_useLanguage, 2),
     t = _useLanguage2[1];
@@ -47,6 +48,11 @@ var OrderDetailsHeader = function OrderDetailsHeader(props) {
     setIsExpand = _useState2[1];
   var _useWindowSize = (0, _useWindowSize2.useWindowSize)(),
     width = _useWindowSize.width;
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    showPrinterOptions = _useState4[0],
+    setShowPrinterOptions = _useState4[1];
+  var dropdownReference = (0, _react.useRef)();
   var stripePaymethods = ['stripe', 'stripe_direct', 'stripe_connect', 'stripe_redirect'];
   var walletName = {
     cash: {
@@ -68,9 +74,27 @@ var OrderDetailsHeader = function OrderDetailsHeader(props) {
       return !prev;
     });
   };
+  var closeSelect = function closeSelect(e) {
+    if (showPrinterOptions) {
+      var _dropdownReference$cu;
+      var outsideDropdown = !((_dropdownReference$cu = dropdownReference.current) !== null && _dropdownReference$cu !== void 0 && _dropdownReference$cu.contains(e.target));
+      if (outsideDropdown) {
+        setShowPrinterOptions(false);
+      }
+    }
+  };
   (0, _react.useEffect)(function () {
     if (extraOpen) setIsExpand(false);
   }, [extraOpen]);
+  (0, _react.useEffect)(function () {
+    if (!showPrinterOptions) {
+      return;
+    }
+    document.addEventListener('click', closeSelect);
+    return function () {
+      return document.removeEventListener('click', closeSelect);
+    };
+  }, [showPrinterOptions]);
   return /*#__PURE__*/_react.default.createElement(_styles2.OrderDetailsHeaderContainer, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h1", null, isServiceOrder ? t('APPOINTMENT_NO', 'Appointment No.') : t('INVOICE_ORDER_NO', 'Order No'), " ", order === null || order === void 0 ? void 0 : order.id), /*#__PURE__*/_react.default.createElement(_styles2.ButtonGroup, null, (user === null || user === void 0 ? void 0 : user.level) !== 5 && /*#__PURE__*/_react.default.createElement(_styles.IconButton, {
     color: "black",
     active: openMessage === null || openMessage === void 0 ? void 0 : openMessage.chat,
@@ -78,18 +102,43 @@ var OrderDetailsHeader = function OrderDetailsHeader(props) {
       return handleShowOption('chat');
     },
     isDisabled: isTourOpen && currentTourStep === 1
-  }, /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.Chat, null), (order === null || order === void 0 ? void 0 : order.unread_count) > 0 && /*#__PURE__*/_react.default.createElement(_styles2.UreadMessageAlert, null, /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.Dot, null))), /*#__PURE__*/_react.default.createElement(_reactToPrint.default, {
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.Chat, null), (order === null || order === void 0 ? void 0 : order.unread_count) > 0 && /*#__PURE__*/_react.default.createElement(_styles2.UreadMessageAlert, null, /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.Dot, null))), /*#__PURE__*/_react.default.createElement(_styles2.PrinterSelectContainer, null, /*#__PURE__*/_react.default.createElement(_styles.IconButton, {
+    color: "black",
+    isDisabled: isTourOpen && currentTourStep === 1,
+    onClick: function onClick() {
+      return setShowPrinterOptions(!showPrinterOptions);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.Printer, null)), showPrinterOptions && /*#__PURE__*/_react.default.createElement(_styles2.PrinterSelect, {
+    ref: dropdownReference
+  }, /*#__PURE__*/_react.default.createElement(_reactToPrint.default, {
     trigger: function trigger() {
       return /*#__PURE__*/_react.default.createElement(_styles.IconButton, {
         color: "black",
-        isDisabled: isTourOpen && currentTourStep === 1
-      }, /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.Printer, null));
+        isDisabled: isTourOpen && currentTourStep === 1,
+        onClick: function onClick() {
+          return setShowPrinterOptions(false);
+        }
+      }, t('NORMAL', 'Normal'));
     },
     content: function content() {
       return printRef.current;
     },
     removeAfterPrint: true
-  }), /*#__PURE__*/_react.default.createElement(_styles.IconButton, {
+  }), /*#__PURE__*/_react.default.createElement(_reactToPrint.default, {
+    trigger: function trigger() {
+      return /*#__PURE__*/_react.default.createElement(_styles.IconButton, {
+        color: "black",
+        isDisabled: isTourOpen && currentTourStep === 1,
+        onClick: function onClick() {
+          return setShowPrinterOptions(false);
+        }
+      }, t('TICKET', 'Ticket'));
+    },
+    content: function content() {
+      return printTicketRef.current;
+    },
+    removeAfterPrint: true
+  }))), /*#__PURE__*/_react.default.createElement(_styles.IconButton, {
     color: "black",
     active: openMessage === null || openMessage === void 0 ? void 0 : openMessage.history,
     onClick: function onClick() {
@@ -113,7 +162,9 @@ var OrderDetailsHeader = function OrderDetailsHeader(props) {
     onClick: function onClick() {
       return closeSideBar();
     }
-  }, /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.XLg, null)))), /*#__PURE__*/_react.default.createElement("p", null, (order === null || order === void 0 ? void 0 : (_order$payment_events = order.payment_events) === null || _order$payment_events === void 0 ? void 0 : _order$payment_events.length) > 0 ? order === null || order === void 0 ? void 0 : (_order$payment_events2 = order.payment_events) === null || _order$payment_events2 === void 0 ? void 0 : _order$payment_events2.map(function (event, i) {
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.XLg, null)))), /*#__PURE__*/_react.default.createElement("p", null, (order === null || order === void 0 ? void 0 : (_order$payment_events = order.payment_events) === null || _order$payment_events === void 0 ? void 0 : _order$payment_events.length) > 0 ? order === null || order === void 0 ? void 0 : (_order$payment_events2 = order.payment_events) === null || _order$payment_events2 === void 0 ? void 0 : _order$payment_events2.filter(function (item) {
+    return item.event === 'payment';
+  }).map(function (event, i) {
     var _walletName$event$wal, _event$wallet_event, _event$wallet_event$w, _event$paymethod, _event$paymethod$gate, _event$paymethod2, _event$data, _event$paymethod3, _event$data2, _event$data2$result, _event$data3, _event$data3$extra, _event$data4, _event$data4$result, _event$data5, _event$data5$extra;
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
       key: i

package/_modules/components/Orders/OrderDetailsHeader/styles.js

@@ -4,9 +4,9 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.UreadMessageAlert = exports.StripeLink = exports.OrderDetailsHeaderContainer = exports.ButtonGroup = void 0;
+exports.UreadMessageAlert = exports.StripeLink = exports.PrinterSelectContainer = exports.PrinterSelect = exports.OrderDetailsHeaderContainer = exports.ButtonGroup = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
@@ -32,4 +32,12 @@ var StripeLink = _styledComponents.default.a(_templateObject10 || (_templateObje
 }, function (props) {
   return props.theme.colors.primary;
 });
-exports.StripeLink = StripeLink;
+exports.StripeLink = StripeLink;
+var PrinterSelectContainer = _styledComponents.default.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  position: relative;\n  margin-right: 8px;\n"])));
+exports.PrinterSelectContainer = PrinterSelectContainer;
+var PrinterSelect = _styledComponents.default.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  position: absolute;\n  border-radius: 8px;\n  display: flex;\n  flex-direction: column;\n  z-index: 100;\n  border: 1px solid ", ";\n\n  button {\n    padding: 10px 20px;\n    color: ", ";\n    &:hover {\n      background-color: #f5f5f5;\n    }\n  }\n"])), function (props) {
+  return props.theme.colors.textGray;
+}, function (props) {
+  return props.theme.colors.textGray;
+});
+exports.PrinterSelect = PrinterSelect;