ordering-ui-admin-external 1.27.1 → 1.28.1

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

@@ -41,33 +41,29 @@ var DriversGroupsListingDetailsUI = function DriversGroupsListingDetailsUI(props
   var _useLanguage = (0, _orderingComponentsAdminExternal.useLanguage)(),
     _useLanguage2 = _slicedToArray(_useLanguage, 2),
     t = _useLanguage2[1];
-  var _useState = (0, _react.useState)(null),
-    _useState2 = _slicedToArray(_useState, 2),
-    searchValue = _useState2[0],
-    setSearchValue = _useState2[1];
-  var _useState3 = (0, _react.useState)({
+  var _useState = (0, _react.useState)({
       open: false,
       content: []
     }),
-    _useState4 = _slicedToArray(_useState3, 2),
-    alertState = _useState4[0],
-    setAlertState = _useState4[1];
-  var _useState5 = (0, _react.useState)({
+    _useState2 = _slicedToArray(_useState, 2),
+    alertState = _useState2[0],
+    setAlertState = _useState2[1];
+  var _useState3 = (0, _react.useState)({
       open: false,
       content: null,
       handleOnAccept: null
     }),
+    _useState4 = _slicedToArray(_useState3, 2),
+    confirm = _useState4[0],
+    setConfirm = _useState4[1];
+  var _useState5 = (0, _react.useState)(false),
     _useState6 = _slicedToArray(_useState5, 2),
-    confirm = _useState6[0],
-    setConfirm = _useState6[1];
-  var _useState7 = (0, _react.useState)(false),
+    isTourOpen = _useState6[0],
+    setIsTourOpen = _useState6[1];
+  var _useState7 = (0, _react.useState)(4),
     _useState8 = _slicedToArray(_useState7, 2),
-    isTourOpen = _useState8[0],
-    setIsTourOpen = _useState8[1];
-  var _useState9 = (0, _react.useState)(4),
-    _useState10 = _slicedToArray(_useState9, 2),
-    currentTourStep = _useState10[0],
-    setCurrentTourStep = _useState10[1];
+    currentTourStep = _useState8[0],
+    setCurrentTourStep = _useState8[1];
   (0, _react.useEffect)(function () {
     if (!(actionState !== null && actionState !== void 0 && actionState.error)) return;
     setAlertState({
@@ -76,7 +72,6 @@ var DriversGroupsListingDetailsUI = function DriversGroupsListingDetailsUI(props
     });
   }, [actionState === null || actionState === void 0 ? void 0 : actionState.error]);
   var handleOpenTour = function handleOpenTour() {
-    setOpenDetails(false);
     setCurrentTourStep(4);
     setIsTourOpen(true);
   };
@@ -113,19 +108,9 @@ var DriversGroupsListingDetailsUI = function DriversGroupsListingDetailsUI(props
   (0, _react.useEffect)(function () {
     getDataFromStorage();
   }, []);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styles.SearchContainer, null, /*#__PURE__*/_react.default.createElement(_Shared.SearchBar, {
-    lazyLoad: true,
-    isCustomLayout: true,
-    onSearch: function onSearch(val) {
-      return setSearchValue(val);
-    },
-    search: searchValue,
-    placeholder: t('SEARCH', 'Search'),
-    customClass: "searchBar"
-  })), /*#__PURE__*/_react.default.createElement(_styles.DriversGroupsListingContainer, null, /*#__PURE__*/_react.default.createElement(_DriversGroupsList.DriversGroupsList, {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styles.Description, null, t('BUSINESS_IN_FOLLOWING_DRIVER_GROUPS', 'This business is in the following driver groups')), /*#__PURE__*/_react.default.createElement(_styles.DriversGroupsListingContainer, null, /*#__PURE__*/_react.default.createElement(_DriversGroupsList.DriversGroupsList, {
     isFromStore: true,
     driversGroupsState: driversGroupsState,
-    searchValue: searchValue,
     handleUpdateDriversGroup: handleUpdateDriversGroup,
     selectedGroupList: selectedGroupList,
     handleSelectGroup: handleSelectGroup,

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

@@ -3,12 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SearchContainer = exports.DriversGroupsListingContainer = void 0;
+exports.DriversGroupsListingContainer = exports.Description = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _templateObject, _templateObject2;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-var DriversGroupsListingContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  flex: 1;\n  padding: 20px;\n  box-sizing: border-box;\n  transition: all 0.5s;\n  max-height: 100vh;\n  overflow: auto;\n"])));
+var DriversGroupsListingContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  > div {\n    padding: 0;\n    margin-bottom: 30px;\n  }\n"])));
 exports.DriversGroupsListingContainer = DriversGroupsListingContainer;
-var SearchContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  input {\n    width: 100%\n  }\n"])));
-exports.SearchContainer = SearchContainer;
+var Description = _styledComponents.default.p(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  font-size: 14px;\n"])));
+exports.Description = Description;

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

@@ -146,6 +146,12 @@ var BusinessProductsListingUI = function BusinessProductsListingUI(props) {
   var spreadColumnOptions = [{
     value: 'cost_price',
     content: t('PRODUCT_COST', 'Product cost')
+  }, {
+    value: 'inventoried',
+    content: t('INVENTORY', 'Inventory')
+  }, {
+    value: 'quantity',
+    content: t('QUANTITY', 'Quantity')
   }];
   var handleChangeAllowSpreadColumns = function handleChangeAllowSpreadColumns(type) {
     setAllowSpreadColumns(_objectSpread(_objectSpread({}, allowSpreadColumns), {}, _defineProperty({}, type, !allowSpreadColumns[type])));

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

@@ -116,6 +116,10 @@ var ProductExtraOptionDetailsUI = function ProductExtraOptionDetailsUI(props) {
     _useState12 = _slicedToArray(_useState11, 2),
     externalId = _useState12[0],
     setExternalId = _useState12[1];
+  var _useState13 = (0, _react.useState)(null),
+    _useState14 = _slicedToArray(_useState13, 2),
+    timer = _useState14[0],
+    setTimer = _useState14[1];
   var handleClickSubOptionImage = function handleClickSubOptionImage(id) {
     document.getElementById(id).click();
   };
@@ -183,6 +187,16 @@ var ProductExtraOptionDetailsUI = function ProductExtraOptionDetailsUI(props) {
       handleSubmit(handleAddOption)();
     }
   };
+  var onChangeAddModifierName = function onChangeAddModifierName(e) {
+    e.persist();
+    clearTimeout(timer);
+    var _timer = setTimeout(function () {
+      if (e.target.value) {
+        handleSubmit(handleAddOption)();
+      }
+    }, 750);
+    setTimer(_timer);
+  };
   var handleUpdateExternalId = function handleUpdateExternalId() {
     handleUpdateOption({
       external_id: externalId
@@ -329,13 +343,17 @@ var ProductExtraOptionDetailsUI = function ProductExtraOptionDetailsUI(props) {
     defaultValue: editSubOptionId === null && (changesState === null || changesState === void 0 ? void 0 : (_changesState$changes3 = changesState.changes) === null || _changesState$changes3 === void 0 ? void 0 : _changesState$changes3.name) || '',
     ref: register({
       required: t('NAME_REQUIRED', 'The name is required.')
-    })
+    }),
+    onChange: function onChange(e) {
+      return onChangeAddModifierName(e);
+    },
+    readOnly: optionState === null || optionState === void 0 ? void 0 : optionState.loading
   }))), /*#__PURE__*/_react.default.createElement(_styles2.RightSubOptionContent, null, /*#__PURE__*/_react.default.createElement(_styles2.InputWrapper, {
     primary: (optionState === null || optionState === void 0 ? void 0 : (_optionState$option8 = optionState.option) === null || _optionState$option8 === void 0 ? void 0 : (_optionState$option8$ = _optionState$option8.suboptions) === null || _optionState$option8$ === void 0 ? void 0 : _optionState$option8$.length) === 0
   }, /*#__PURE__*/_react.default.createElement(_styles.Input, {
     name: "price",
     placeholder: t('PRICE', 'Price'),
-    defaultValue: editSubOptionId === null && (changesState === null || changesState === void 0 ? void 0 : (_changesState$changes4 = changesState.changes) === null || _changesState$changes4 === void 0 ? void 0 : _changesState$changes4.price) || '',
+    defaultValue: editSubOptionId === null && (changesState === null || changesState === void 0 ? void 0 : (_changesState$changes4 = changesState.changes) === null || _changesState$changes4 === void 0 ? void 0 : _changesState$changes4.price) || 0,
     ref: register(),
     onKeyPress: function onKeyPress(e) {
       if (!/^[0-9.]$/.test(e.key)) {

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

@@ -179,8 +179,18 @@ var ProductExtraOptionsUI = function ProductExtraOptionsUI(props) {
     }
     setIsMenuOpen(value);
   };
-  var onSubmit = function onSubmit() {
-    handleAddOption();
+  var onSubmit = function onSubmit(formValues) {
+    handleAddOption(formValues);
+  };
+  var onChangeAddExtraOptionName = function onChangeAddExtraOptionName(e) {
+    e.persist();
+    clearTimeout(timer);
+    var _timer = setTimeout(function () {
+      if (e.target.value) {
+        handleSubmit(onSubmit)();
+      }
+    }, 750);
+    setTimer(_timer);
   };
   (0, _react.useEffect)(function () {
     if (Object.keys(errors).length > 0) {
@@ -340,9 +350,10 @@ var ProductExtraOptionsUI = function ProductExtraOptionsUI(props) {
         value: value,
         onChange: function onChange(e) {
           _onChange(e);
-          handleChangeAddOption(e);
+          onChangeAddExtraOptionName(e);
         },
-        autoComplete: "off"
+        autoComplete: "off",
+        readOnly: extraState === null || extraState === void 0 ? void 0 : extraState.loading
       });
     },
     rules: {
@@ -397,7 +408,10 @@ var ProductExtraOptionsUI = function ProductExtraOptionsUI(props) {
       required: t('MAX_PURCHASED_REQUIRED', 'The max is required.')
     }
   }), /*#__PURE__*/_react.default.createElement(_styles.IconButton, {
-    type: "submit"
+    type: "submit",
+    style: {
+      visibility: 'hidden'
+    }
   }, /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.PlusCircle, null)))), /*#__PURE__*/_react.default.createElement(_Shared.Alert, {
     title: t('WEB_APPNAME', 'Ordering'),
     content: alertState.content,

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

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.OptionsList = exports.OptionsContainer = exports.OptionNameContainer = exports.OptionItem = exports.OptionImage = exports.MinimumPurchase = exports.MaxPurchase = exports.MainContainer = exports.Header = exports.DragImageWrapper = exports.ArrowWrpper = exports.AddOptionForm = 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, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35, _templateObject36, _templateObject37, _templateObject38;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35, _templateObject36;
 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) } })); }
@@ -23,7 +23,7 @@ var Header = _styledComponents.default.div(_templateObject5 || (_templateObject5
   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        "])));
 });
 exports.Header = Header;
-var OptionNameContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  flex: 1;\n  display: flex;\n  align-items: center;\n  width: 70%;\n  margin: 12px 0;\n  font-size: 14px;\n  > input {\n    flex: 1;\n    height: 32px;\n    width: 32px;\n    padding: 5px;\n    border: none;\n    outline: none;\n    background: ", ";\n\n    &:focus {\n      border: 1px dashed ", ";\n    }\n    ", "\n  }\n\n  ", "\n\n  ", "\n"])), function (props) {
+var OptionNameContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  flex: 1;\n  display: flex;\n  align-items: center;\n  width: 70%;\n  margin: 12px 0;\n  font-size: 14px;\n  > input {\n    flex: 1;\n    height: 32px;\n    width: 32px;\n    padding: 5px;\n    border: none;\n    outline: none;\n    background: ", ";\n\n    &:focus {\n      border: 1px dashed ", ";\n    }\n    &:read-only {\n      background-color: #F8F9FA;\n      cursor: not-allowed;\n    }\n    ", "\n  }\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) {
@@ -66,7 +66,7 @@ var ActionSelectorWrapper = _styledComponents.default.div(_templateObject17 || (
   return props.theme.colors.danger;
 });
 exports.ActionSelectorWrapper = ActionSelectorWrapper;
-var AddOptionForm = _styledComponents.default.form(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  border-top: 13px solid ", ";\n  border-bottom: 1px solid ", ";\n\n  > input {\n    width: 75px;\n    height: 32px;\n    padding: 5px;\n    border: none;\n    outline: none;\n    font-size: 14px;\n    background: ", ";\n\n    &:focus {\n      border: 1px dashed ", ";\n    }\n  }\n  > button {\n    ", "\n  }\n\n  @media (min-width: 450px) {\n    > input {\n      width: 80px;\n    }\n  }\n"])), function (props) {
+var AddOptionForm = _styledComponents.default.form(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  border-top: 13px solid ", ";\n  border-bottom: 1px solid ", ";\n\n  > input {\n    width: 75px;\n    height: 32px;\n    padding: 5px;\n    border: none;\n    outline: none;\n    font-size: 14px;\n    background: ", ";\n\n    &:focus {\n      border: 1px dashed ", ";\n    }\n  }\n\n  @media (min-width: 450px) {\n    > input {\n      width: 80px;\n    }\n  }\n"])), function (props) {
   return props.theme.colors.borderColor;
 }, function (props) {
   return props.theme.colors.borderColor;
@@ -75,23 +75,20 @@ var AddOptionForm = _styledComponents.default.form(_templateObject18 || (_templa
   return ((_props$theme$colors2 = props.theme.colors) === null || _props$theme$colors2 === void 0 ? void 0 : _props$theme$colors2.backgroundPage) || '#FFF';
 }, function (props) {
   return props.theme.colors.lightGray;
-}, function (props) {
-  var _props$theme6;
-  return (_props$theme6 = props.theme) !== null && _props$theme6 !== void 0 && _props$theme6.rtl ? (0, _styledComponents.css)(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n      margin-right: 10px;\n    "]))) : (0, _styledComponents.css)(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n      margin-left: 10px;\n    "])));
 });
 exports.AddOptionForm = AddOptionForm;
-var OptionsList = _styledComponents.default.div(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n"])));
+var OptionsList = _styledComponents.default.div(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n"])));
 exports.OptionsList = OptionsList;
-var OptionItem = _styledComponents.default.div(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  border-bottom: 1px solid ", ";\n\n  ", "\n  ", "\n\n  ", "\n\n  ", "\n"])), function (props) {
+var OptionItem = _styledComponents.default.div(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  border-bottom: 1px solid ", ";\n\n  ", "\n  ", "\n\n  ", "\n\n  ", "\n"])), function (props) {
   return props.theme.colors.borderColor;
 }, function (_ref2) {
   var isHeader = _ref2.isHeader;
-  return !isHeader && (0, _styledComponents.css)(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n    cursor: pointer;\n    &:hover {\n      background-color: ", ";\n    }\n  "])), function (props) {
+  return !isHeader && (0, _styledComponents.css)(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n    cursor: pointer;\n    &:hover {\n      background-color: ", ";\n    }\n  "])), function (props) {
     return props.theme.colors.lightPrimary;
   });
 }, function (_ref3) {
   var active = _ref3.active;
-  return active && (0, _styledComponents.css)(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["\n    background-color: ", ";\n    border-top: 1px solid ", ";\n    border-bottom: 1px solid ", ";\n  "])), function (props) {
+  return active && (0, _styledComponents.css)(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n    background-color: ", ";\n    border-top: 1px solid ", ";\n    border-bottom: 1px solid ", ";\n  "])), function (props) {
     return props.theme.colors.lightPrimary;
   }, function (props) {
     return props.theme.colors.primary;
@@ -100,35 +97,35 @@ var OptionItem = _styledComponents.default.div(_templateObject22 || (_templateOb
   });
 }, function (_ref4) {
   var isDragOver = _ref4.isDragOver;
-  return isDragOver && (0, _styledComponents.css)(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["\n    border-top: 1px solid ", ";\n  "])), function (props) {
+  return isDragOver && (0, _styledComponents.css)(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n    border-top: 1px solid ", ";\n  "])), function (props) {
     return props.theme.colors.primary;
   });
 }, function (_ref5) {
   var isBorderBottom = _ref5.isBorderBottom;
-  return isBorderBottom && (0, _styledComponents.css)(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["\n    border-bottom: 1px solid ", ";\n  "])), function (props) {
+  return isBorderBottom && (0, _styledComponents.css)(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["\n    border-bottom: 1px solid ", ";\n  "])), function (props) {
     return props.theme.colors.primary;
   });
 });
 exports.OptionItem = OptionItem;
-var MinimumPurchase = _styledComponents.default.div(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["\n  min-width: 75px;\n  ", "\n  @media (min-width: 450px) {\n    min-width: 80px;\n  }\n"])), function (_ref6) {
+var MinimumPurchase = _styledComponents.default.div(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["\n  min-width: 75px;\n  ", "\n  @media (min-width: 450px) {\n    min-width: 80px;\n  }\n"])), function (_ref6) {
   var isHeader = _ref6.isHeader;
-  return isHeader ? (0, _styledComponents.css)(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["\n    font-size: 12px;\n    font-weight: 700;\n  "]))) : (0, _styledComponents.css)(_templateObject29 || (_templateObject29 = _taggedTemplateLiteral(["\n    font-size: 14px;\n  "])));
+  return isHeader ? (0, _styledComponents.css)(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["\n    font-size: 12px;\n    font-weight: 700;\n  "]))) : (0, _styledComponents.css)(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["\n    font-size: 14px;\n  "])));
 });
 exports.MinimumPurchase = MinimumPurchase;
-var MaxPurchase = _styledComponents.default.div(_templateObject30 || (_templateObject30 = _taggedTemplateLiteral(["\n  min-width: 75px;\n  ", "\n  @media (min-width: 450px) {\n    min-width: 80px;\n  }\n"])), function (_ref7) {
+var MaxPurchase = _styledComponents.default.div(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["\n  min-width: 75px;\n  ", "\n  @media (min-width: 450px) {\n    min-width: 80px;\n  }\n"])), function (_ref7) {
   var isHeader = _ref7.isHeader;
-  return isHeader ? (0, _styledComponents.css)(_templateObject31 || (_templateObject31 = _taggedTemplateLiteral(["\n    font-size: 12px;\n    font-weight: 700;\n  "]))) : (0, _styledComponents.css)(_templateObject32 || (_templateObject32 = _taggedTemplateLiteral(["\n    font-size: 14px;\n  "])));
+  return isHeader ? (0, _styledComponents.css)(_templateObject29 || (_templateObject29 = _taggedTemplateLiteral(["\n    font-size: 12px;\n    font-weight: 700;\n  "]))) : (0, _styledComponents.css)(_templateObject30 || (_templateObject30 = _taggedTemplateLiteral(["\n    font-size: 14px;\n  "])));
 });
 exports.MaxPurchase = MaxPurchase;
-var ArrowWrpper = _styledComponents.default.div(_templateObject33 || (_templateObject33 = _taggedTemplateLiteral(["\n  width: 30px;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  svg {\n    font-size: 13px;\n    color: ", ";\n    margin: 0 5px;\n  }\n"])), function (props) {
+var ArrowWrpper = _styledComponents.default.div(_templateObject31 || (_templateObject31 = _taggedTemplateLiteral(["\n  width: 30px;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  svg {\n    font-size: 13px;\n    color: ", ";\n    margin: 0 5px;\n  }\n"])), function (props) {
   return props.theme.colors.secundaryLight;
 });
 exports.ArrowWrpper = ArrowWrpper;
-var DragImageWrapper = _styledComponents.default.div(_templateObject34 || (_templateObject34 = _taggedTemplateLiteral(["\n  img {\n    ", "\n    &:hover {\n      cursor: grab;\n    }\n    @media (min-width: 450px) {\n      ", "\n    }\n  }\n"])), function (props) {
-  var _props$theme7;
-  return (_props$theme7 = props.theme) !== null && _props$theme7 !== void 0 && _props$theme7.rtl ? (0, _styledComponents.css)(_templateObject35 || (_templateObject35 = _taggedTemplateLiteral(["\n      margin-left: 10px;\n    "]))) : (0, _styledComponents.css)(_templateObject36 || (_templateObject36 = _taggedTemplateLiteral(["\n      margin-right: 10px;\n    "])));
+var DragImageWrapper = _styledComponents.default.div(_templateObject32 || (_templateObject32 = _taggedTemplateLiteral(["\n  img {\n    ", "\n    &:hover {\n      cursor: grab;\n    }\n    @media (min-width: 450px) {\n      ", "\n    }\n  }\n"])), function (props) {
+  var _props$theme6;
+  return (_props$theme6 = props.theme) !== null && _props$theme6 !== void 0 && _props$theme6.rtl ? (0, _styledComponents.css)(_templateObject33 || (_templateObject33 = _taggedTemplateLiteral(["\n      margin-left: 10px;\n    "]))) : (0, _styledComponents.css)(_templateObject34 || (_templateObject34 = _taggedTemplateLiteral(["\n      margin-right: 10px;\n    "])));
 }, function (props) {
-  var _props$theme8;
-  return (_props$theme8 = props.theme) !== null && _props$theme8 !== void 0 && _props$theme8.rtl ? (0, _styledComponents.css)(_templateObject37 || (_templateObject37 = _taggedTemplateLiteral(["\n        margin-left: 20px;\n      "]))) : (0, _styledComponents.css)(_templateObject38 || (_templateObject38 = _taggedTemplateLiteral(["\n        margin-right: 20px;\n      "])));
+  var _props$theme7;
+  return (_props$theme7 = props.theme) !== null && _props$theme7 !== void 0 && _props$theme7.rtl ? (0, _styledComponents.css)(_templateObject35 || (_templateObject35 = _taggedTemplateLiteral(["\n        margin-left: 20px;\n      "]))) : (0, _styledComponents.css)(_templateObject36 || (_templateObject36 = _taggedTemplateLiteral(["\n        margin-right: 20px;\n      "])));
 });
 exports.DragImageWrapper = DragImageWrapper;

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

@@ -35,12 +35,10 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var ProductExtrasUI = function ProductExtrasUI(props) {
   var productState = props.productState,
     extrasState = props.extrasState,
-    changesState = props.changesState,
     isAddMode = props.isAddMode,
     handleOpenAddForm = props.handleOpenAddForm,
     handleChangeExtraInput = props.handleChangeExtraInput,
     handleAddExtra = props.handleAddExtra,
-    handleChangeAddExtraInput = props.handleChangeAddExtraInput,
     setIsExtendExtraOpen = props.setIsExtendExtraOpen,
     business = props.business,
     handleUpdateBusinessState = props.handleUpdateBusinessState,
@@ -92,6 +90,10 @@ var ProductExtrasUI = function ProductExtrasUI(props) {
     _useState12 = _slicedToArray(_useState11, 2),
     isCheckboxClicked = _useState12[0],
     setIsCheckboxClicked = _useState12[1];
+  var _useState13 = (0, _react.useState)(null),
+    _useState14 = _slicedToArray(_useState13, 2),
+    timer = _useState14[0],
+    setTimer = _useState14[1];
   var handleOpenExtraDetails = function handleOpenExtraDetails(e, extra, isInitialRender) {
     var _e$target, _e$target2;
     if (e !== null && e !== void 0 && (_e$target = e.target) !== null && _e$target !== void 0 && _e$target.closest('.extra-checkbox') || e !== null && e !== void 0 && (_e$target2 = e.target) !== null && _e$target2 !== void 0 && _e$target2.closest('.draggable-dots')) return;
@@ -114,13 +116,6 @@ var ProductExtrasUI = function ProductExtrasUI(props) {
     var section = query.get('section');
     history.replace("".concat(location.pathname, "?category=").concat(category, "&product=").concat(product, "&section=").concat(section));
   };
-  var addExtraListener = function addExtraListener(e) {
-    var _conatinerRef$current;
-    var outsideDropdown = !((_conatinerRef$current = conatinerRef.current) !== null && _conatinerRef$current !== void 0 && _conatinerRef$current.contains(e.target));
-    if (outsideDropdown) {
-      handleAddExtra();
-    }
-  };
   var handleExtraState = function handleExtraState(id, checked) {
     if (checked) {
       setExtraIds(function (prevState) {
@@ -135,6 +130,18 @@ var ProductExtrasUI = function ProductExtrasUI(props) {
     }
     setIsCheckboxClicked(true);
   };
+  var onChangeAddExtraInput = function onChangeAddExtraInput(e) {
+    e.persist();
+    clearTimeout(timer);
+    var _timer = setTimeout(function () {
+      if (e.target.value) {
+        handleAddExtra({
+          name: e.target.value
+        });
+      }
+    }, 750);
+    setTimer(_timer);
+  };
   (0, _react.useEffect)(function () {
     var _productState$product;
     var _extraIds = [];
@@ -151,13 +158,6 @@ var ProductExtrasUI = function ProductExtrasUI(props) {
     setIsCheckboxClicked(false);
     handleProductExtraState(extraIds);
   }, [isCheckboxClicked, extraIds]);
-  (0, _react.useEffect)(function () {
-    if (!isAddMode) return;
-    document.addEventListener('click', addExtraListener);
-    return function () {
-      return document.removeEventListener('click', addExtraListener);
-    };
-  }, [isAddMode, changesState]);
   (0, _react.useEffect)(function () {
     var _productState$product3, _extrasState$extras;
     if (productState !== null && productState !== void 0 && (_productState$product3 = productState.product) !== null && _productState$product3 !== void 0 && _productState$product3.error || extrasState !== null && extrasState !== void 0 && (_extrasState$extras = extrasState.extras) !== null && _extrasState$extras !== void 0 && _extrasState$extras.error) {
@@ -231,9 +231,10 @@ var ProductExtrasUI = function ProductExtrasUI(props) {
     name: "name",
     placeholder: t('WRITE_A_NAME', 'Write a name'),
     onChange: function onChange(e) {
-      return handleChangeAddExtraInput(e);
+      return onChangeAddExtraInput(e);
     },
-    autoComplete: "off"
+    autoComplete: "off",
+    readOnly: extrasState === null || extrasState === void 0 ? void 0 : extrasState.loading
   })), /*#__PURE__*/_react.default.createElement(_styles2.AddButtonWrapper, null, /*#__PURE__*/_react.default.createElement(_styles.LinkButton, {
     onClick: function onClick() {
       return handleOpenAddForm();

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

@@ -62,7 +62,7 @@ var Details = _styledComponents.default.div(_templateObject12 || (_templateObjec
 exports.Details = Details;
 var AddButtonWrapper = _styledComponents.default.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  padding: 12px 0;\n"])));
 exports.AddButtonWrapper = AddButtonWrapper;
-var ExtraAddForm = _styledComponents.default.form(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n\n  input {\n    width: 100%;\n    border: none;\n    outline: none;\n    border-bottom: 1px solid ", ";\n    background: ", ";\n    padding: 12px 0;\n\n    &::placeholder,\n    &::-webkit-input-placeholder {\n      color: #B1BCCC;\n    }\n    &:-ms-input-placeholder {\n      color: #B1BCCC;\n    }\n  }\n"])), function (props) {
+var ExtraAddForm = _styledComponents.default.form(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n\n  input {\n    width: 100%;\n    border: none;\n    outline: none;\n    border-bottom: 1px solid ", ";\n    background: ", ";\n    padding: 12px 0;\n\n    &::placeholder,\n    &::-webkit-input-placeholder {\n      color: #B1BCCC;\n    }\n    &:-ms-input-placeholder {\n      color: #B1BCCC;\n    }\n    &:read-only {\n      background-color: #F8F9FA;\n      cursor: not-allowed;\n    }\n  }\n"])), function (props) {
   return props.theme.colors.borderColor;
 }, function (props) {
   var _props$theme$colors;

package/package.json

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

package/src/components/BusinessIntelligence/AnalyticsOrdersStatus/index.js

@@ -50,7 +50,7 @@ export const AnalyticsOrdersStatus = (props) => {
   const generateLabels = () => {
     const labels = [t('ALL', 'All')]
     for (const label of orderStatusList?.data) {
-      labels.push(orderStatus[label.status].value)
+      labels.push(orderStatus?.[label.status]?.value)
     }
     return labels
   }

package/src/components/BusinessIntelligence/BusinessAnalytics/index.js

@@ -194,18 +194,11 @@ const BusinessAnalyticsUI = (props) => {
           onClose={() => setIsBrandFilter(false)}
         />
       </Modal>
-      <Modal
-        width='450px'
-        height='650px'
-        padding='25px'
-        open={openCountryFilter}
-        onClose={() => setOpenCountryFilter(false)}
-      >
-        <CountryFilter
-          {...props}
-          onClose={() => setOpenCountryFilter(false)}
-        />
-      </Modal>
+      <CountryFilter
+        {...props}
+        openCountryFilter={openCountryFilter}
+        setOpenCountryFilter={setOpenCountryFilter}
+      />
     </BusinessAnalyticsContainer>
   )
 }

package/src/components/BusinessIntelligence/CountryFilter/index.js

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react'
 import { useLanguage, CountryList } from 'ordering-components-admin-external'
 import { Button } from '../../../styles'
 import Skeleton from 'react-loading-skeleton'
-import { SearchBar, Pagination } from '../../Shared'
+import { SearchBar, Pagination, Modal } from '../../Shared'
 import { RecordCircleFill, Circle } from 'react-bootstrap-icons'
 import {
   Container,
@@ -20,7 +20,10 @@ const CountryFilterUI = (props) => {
     onSearch,
     handleClickFilterButton,
     code,
-    setCode
+    openCountryFilter,
+    setOpenCountryFilter,
+    setCode,
+    actionState
   } = props
 
   const [, t] = useLanguage()
@@ -58,61 +61,73 @@ const CountryFilterUI = (props) => {
 
   return (
     <>
-      <Container>
-        <h2>{t('CHOOSE_A_COUNTRY', 'Choose a country')}</h2>
-        <SearchWrapper>
-          <SearchBar
-            search={searchValue}
-            isCustomLayout
-            lazyLoad
-            onSearch={(value) => onSearch(value)}
-            placeholder={t('SEARCH', 'Search')}
-          />
-        </SearchWrapper>
-        <CountryListWrapper>
-          {countriesState?.loading ? (
-            <>
-              {[...Array(10).keys()].map(i => (
-                <CountryItem
-                  key={i}
-                >
-                  <Skeleton width={18} height={18} circle />
-                  <Skeleton width={200} height={20} style={{ marginLeft: 10 }} />
-                </CountryItem>
-              ))}
-            </>
-          ) : (
-            <>
-              {currentPages?.map(country => (
-                <CountryItem key={country?.id} onClick={() => setCode(country?.code)}>
-                  {code === country?.code ? <RecordCircleFill className='checked' /> : <Circle />}
-                  <span className='name'>{country?.name}</span>
-                </CountryItem>
-              ))}
-            </>
-          )}
-        </CountryListWrapper>
-        <PaginationWrapper>
-          {countriesState?.countries?.length > 0 && (
-            <Pagination
-              currentPage={currentPage}
-              totalPages={totalPages}
-              handleChangePage={handleChangePage}
-              defaultPageSize={pagesPerPage}
-              handleChangePageSize={handleChangePageSize}
-            />
-          )}
-        </PaginationWrapper>
-      </Container>
-      <ButtonWrapper>
-        <Button
-          color='primary'
-          disabled={countriesState.loading}
-          onClick={handleClickFilterButton}
+      {!countriesState?.loading && currentPages?.length > 0 && (
+        <Modal
+          width='450px'
+          height='650px'
+          padding='25px'
+          open={openCountryFilter}
+          onClose={() => setOpenCountryFilter(false)}
         >
-          {t('FILTER', 'Filter')}
-        </Button>
-      </ButtonWrapper>
+          <>
+            <Container>
+              <h2>{t('CHOOSE_A_COUNTRY', 'Choose a country')}</h2>
+              <SearchWrapper>
+                <SearchBar
+                  search={searchValue}
+                  isCustomLayout
+                  lazyLoad
+                  onSearch={(value) => onSearch(value)}
+                  placeholder={t('SEARCH', 'Search')}
+                />
+              </SearchWrapper>
+              <CountryListWrapper>
+                {actionState?.loading ? (
+                  <>
+                    {[...Array(10).keys()].map(i => (
+                      <CountryItem
+                        key={i}
+                      >
+                        <Skeleton width={18} height={18} circle />
+                        <Skeleton width={200} height={20} style={{ marginLeft: 10 }} />
+                      </CountryItem>
+                    ))}
+                  </>
+                ) : (
+                  <>
+                    {currentPages?.map(country => (
+                      <CountryItem key={country?.id} onClick={() => setCode(country?.code)}>
+                        {code === country?.code ? <RecordCircleFill className='checked' /> : <Circle />}
+                        <span className='name'>{country?.name}</span>
+                      </CountryItem>
+                    ))}
+                  </>
+                )}
+              </CountryListWrapper>
+              <PaginationWrapper>
+                {countriesState?.countries?.length > 0 && (
+                  <Pagination
+                    currentPage={currentPage}
+                    totalPages={totalPages}
+                    handleChangePage={handleChangePage}
+                    defaultPageSize={pagesPerPage}
+                    handleChangePageSize={handleChangePageSize}
+                  />
+                )}
+              </PaginationWrapper>
+            </Container>
+            <ButtonWrapper>
+              <Button
+                color='primary'
+                disabled={countriesState.loading}
+                onClick={handleClickFilterButton}
+              >
+                {t('FILTER', 'Filter')}
+              </Button>
+            </ButtonWrapper>
+          </>
+        </Modal>
+      )}
     </>
 
   )
@@ -122,6 +137,7 @@ export const CountryFilter = (props) => {
   const countryFilterProps = {
     ...props,
     UIComponent: CountryFilterUI,
+    onClose: () => props.setOpenCountryFilter(false),
     isSearchByName: true
   }
   return <CountryList {...countryFilterProps} />