ordering-ui-admin-external 1.43.54 → 1.43.55

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

@@ -42,6 +42,13 @@ var ExportCSVUI = function ExportCSVUI(props) {
     _useState4 = _slicedToArray(_useState3, 2),
     modalOpen = _useState4[0],
     setModalOpen = _useState4[1];
+  var _useState5 = (0, _react.useState)({
+      open: false,
+      content: []
+    }),
+    _useState6 = _slicedToArray(_useState5, 2),
+    alertState = _useState6[0],
+    setAlertState = _useState6[1];
   var handleExportAll = function handleExportAll() {
     setPopoverOpen(false);
     getCSV(false);
@@ -53,6 +60,12 @@ var ExportCSVUI = function ExportCSVUI(props) {
   var closePopover = function closePopover() {
     setPopoverOpen(false);
   };
+  var closeAlert = function closeAlert() {
+    setAlertState({
+      open: false,
+      content: []
+    });
+  };
   (0, _react.useEffect)(function () {
     if (!popoverOpen) return;
     document.addEventListener('click', closePopover);
@@ -61,6 +74,12 @@ var ExportCSVUI = function ExportCSVUI(props) {
     };
   }, [popoverOpen]);
   (0, _react.useEffect)(function () {
+    if (actionStatus !== null && actionStatus !== void 0 && actionStatus.error) {
+      setAlertState({
+        open: true,
+        content: actionStatus === null || actionStatus === void 0 ? void 0 : actionStatus.error
+      });
+    }
     if (!(actionStatus !== null && actionStatus !== void 0 && actionStatus.result) || actionStatus !== null && actionStatus !== void 0 && actionStatus.error) return;
     setModalOpen(true);
   }, [actionStatus]);
@@ -71,7 +90,9 @@ var ExportCSVUI = function ExportCSVUI(props) {
     onClick: function onClick() {
       return setPopoverOpen(!popoverOpen);
     }
-  }, width > 600 && t('CSV', 'CSV'), /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.Download, null)), popoverOpen && /*#__PURE__*/_react.default.createElement(_styles2.PopoverContainer, null, /*#__PURE__*/_react.default.createElement(_styles2.Item, {
+  }, width > 600 && t('CSV', 'CSV'), /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.Download, null)), popoverOpen && /*#__PURE__*/_react.default.createElement(_styles2.PopoverContainer, {
+    disabled: actionStatus.loading
+  }, /*#__PURE__*/_react.default.createElement(_styles2.Item, {
     onClick: function onClick() {
       return handleExportAll();
     }
@@ -98,7 +119,19 @@ var ExportCSVUI = function ExportCSVUI(props) {
     onClick: function onClick() {
       return setModalOpen(false);
     }
-  }, t('OK', 'OK')))));
+  }, t('OK', 'OK')))), /*#__PURE__*/_react.default.createElement(_Shared.Alert, {
+    title: t('CSV_ORDERS', 'Csv orders'),
+    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 closeAlert();
+    },
+    onAccept: function onAccept() {
+      return closeAlert();
+    },
+    closeOnBackdrop: false
+  }));
 };
 var OrdersExportCSV = exports.OrdersExportCSV = function OrdersExportCSV(props) {
   var ExportCSVControlProps = _objectSpread(_objectSpread({}, props), {}, {

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

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.PopoverContainer = exports.Item = exports.ExportContainer = exports.ExportCSVResult = exports.ErrorMessage = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
 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(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
@@ -17,19 +17,22 @@ var ExportContainer = exports.ExportContainer = _styledComponents.default.div(_t
   var _props$theme2;
   return (_props$theme2 = props.theme) !== null && _props$theme2 !== void 0 && _props$theme2.rtl ? (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        margin-right: 5px;\n      "]))) : (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n        margin-left: 5px;\n      "])));
 });
-var PopoverContainer = exports.PopoverContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  position: absolute;\n  margin-top: 5px;\n  padding: 5px 0;\n  background: ", ";\n  box-shadow: 0 6px 12px rgba(0,0,0,.175);\n  z-index: 110;\n\n  ", "\n"])), function (props) {
+var PopoverContainer = exports.PopoverContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  position: absolute;\n  margin-top: 5px;\n  padding: 5px 0;\n  background: ", ";\n  box-shadow: 0 6px 12px rgba(0,0,0,.175);\n  z-index: 1100;\n\n  ", "\n\n  ", "\n"])), function (props) {
   var _props$theme$colors;
   return ((_props$theme$colors = props.theme.colors) === null || _props$theme$colors === void 0 ? void 0 : _props$theme$colors.backgroundPage) || '#FFF';
 }, function (props) {
   var _props$theme3;
   return (_props$theme3 = props.theme) !== null && _props$theme3 !== void 0 && _props$theme3.rtl ? (0, _styledComponents.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    left: 14px;\n  "]))) : (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    right: 14px;\n  "])));
+}, function (_ref) {
+  var disabled = _ref.disabled;
+  return disabled && (0, _styledComponents.css)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    pointer-events: none;\n  "])));
 });
-var Item = exports.Item = _styledComponents.default.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  padding: 3px 20px;\n  white-space: nowrap;\n  cursor: pointer;\n  &:hover {\n    background-color: #F2F2F2;\n  }\n"])));
-var ExportCSVResult = exports.ExportCSVResult = _styledComponents.default.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n\n  h1 {\n    font-size: 24px;\n    color: ", ";\n  }\n\n  button {\n    width: 100%;\n    padding-top: 5px;\n    padding-bottom: 5px;\n    margin-top: 20px;\n  }\n"])), function (props) {
+var Item = exports.Item = _styledComponents.default.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  padding: 3px 20px;\n  white-space: nowrap;\n  cursor: pointer;\n  &:hover {\n    background-color: #F2F2F2;\n  }\n"])));
+var ExportCSVResult = exports.ExportCSVResult = _styledComponents.default.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n\n  h1 {\n    font-size: 24px;\n    color: ", ";\n  }\n\n  button {\n    width: 100%;\n    padding-top: 5px;\n    padding-bottom: 5px;\n    margin-top: 20px;\n  }\n"])), function (props) {
   var _props$theme$colors2;
   return (_props$theme$colors2 = props.theme.colors) === null || _props$theme$colors2 === void 0 ? void 0 : _props$theme$colors2.headingColor;
 });
-var ErrorMessage = exports.ErrorMessage = _styledComponents.default.p(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  text-align: center;\n  margin: 5px 0;\n  color: ", ";\n"])), function (props) {
+var ErrorMessage = exports.ErrorMessage = _styledComponents.default.p(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  text-align: center;\n  margin: 5px 0;\n  color: ", ";\n"])), function (props) {
   var _props$theme$colors3;
   return (_props$theme$colors3 = props.theme.colors) === null || _props$theme$colors3 === void 0 ? void 0 : _props$theme$colors3.headingColor;
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-admin-external",
-  "version": "1.43.54",
+  "version": "1.43.55",
   "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.35",
+    "ordering-components-admin-external": "1.43.36",
     "polished": "^3.6.7",
     "prop-types": "^15.7.2",
     "react-big-calendar": "^1.4.2",

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

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react'
 import { useLanguage, ExportCSV as ExportCSVController } from 'ordering-components-admin-external'
-import { Modal, SpinnerLoader } from '../../Shared'
+import { Alert, Modal, SpinnerLoader } from '../../Shared'
 import { useWindowSize } from '../../../hooks/useWindowSize'
 import { Button } from '../../../styles'
 import { Download } from 'react-bootstrap-icons'
@@ -20,6 +20,7 @@ const ExportCSVUI = (props) => {
   const { width } = useWindowSize()
   const [popoverOpen, setPopoverOpen] = useState(false)
   const [modalOpen, setModalOpen] = useState(false)
+  const [alertState, setAlertState] = useState({ open: false, content: [] })
 
   const handleExportAll = () => {
     setPopoverOpen(false)
@@ -35,6 +36,13 @@ const ExportCSVUI = (props) => {
     setPopoverOpen(false)
   }
 
+  const closeAlert = () => {
+    setAlertState({
+      open: false,
+      content: []
+    })
+  }
+
   useEffect(() => {
     if (!popoverOpen) return
     document.addEventListener('click', closePopover)
@@ -42,6 +50,12 @@ const ExportCSVUI = (props) => {
   }, [popoverOpen])
 
   useEffect(() => {
+    if (actionStatus?.error) {
+      setAlertState({
+        open: true,
+        content: actionStatus?.error
+      })
+    }
     if (!actionStatus?.result || actionStatus?.error) return
     setModalOpen(true)
   }, [actionStatus])
@@ -59,7 +73,7 @@ const ExportCSVUI = (props) => {
           <Download />
         </Button>
         {popoverOpen && (
-          <PopoverContainer>
+          <PopoverContainer disabled={actionStatus.loading}>
             <Item onClick={() => handleExportAll()}>
               {t('EXPORT_ALL', 'Export all')}
             </Item>
@@ -92,6 +106,15 @@ const ExportCSVUI = (props) => {
           </Button>
         </ExportCSVResult>
       </Modal>
+      <Alert
+        title={t('CSV_ORDERS', 'Csv orders')}
+        content={alertState?.content}
+        acceptText={t('ACCEPT', 'Accept')}
+        open={alertState?.open}
+        onClose={() => closeAlert()}
+        onAccept={() => closeAlert()}
+        closeOnBackdrop={false}
+      />
     </>
   )
 }

package/src/components/Orders/OrdersExportCSV/styles.js

@@ -26,13 +26,17 @@ export const PopoverContainer = styled.div`
   padding: 5px 0;
   background: ${props => props.theme.colors?.backgroundPage || '#FFF'};
   box-shadow: 0 6px 12px rgba(0,0,0,.175);
-  z-index: 110;
+  z-index: 1100;
 
   ${props => props.theme?.rtl ? css`
     left: 14px;
   ` : css`
     right: 14px;
   `}
+
+  ${({ disabled }) => disabled && css`
+    pointer-events: none;
+  `}
 `
 
 export const Item = styled.div`