ordering-ui-admin-external 1.2.0 → 1.3.1

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

@@ -104,7 +104,8 @@ var BusinessProductsListingUI = function BusinessProductsListingUI(props) {
       taxes = props.taxes,
       setTaxes = props.setTaxes,
       fees = props.fees,
-      setFees = props.setFees;
+      setFees = props.setFees,
+      getBusiness = props.getBusiness;
 
   var _useLanguage = (0, _orderingComponentsAdminExternal.useLanguage)(),
       _useLanguage2 = _slicedToArray(_useLanguage, 2),
@@ -143,19 +144,24 @@ var BusinessProductsListingUI = function BusinessProductsListingUI(props) {
       selectedBusiness = _useState10[0],
       setSelectedBusiness = _useState10[1];
 
-  var categoryListRef = (0, _react.useRef)();
-
-  var _useState11 = (0, _react.useState)(false),
+  var _useState11 = (0, _react.useState)(10),
       _useState12 = _slicedToArray(_useState11, 2),
-      batchImageFormOpen = _useState12[0],
-      setBatchImageFormOpen = _useState12[1];
+      productsPerPage = _useState12[0],
+      setProductsPerPage = _useState12[1];
+
+  var categoryListRef = (0, _react.useRef)();
 
-  var _useState13 = (0, _react.useState)(null),
+  var _useState13 = (0, _react.useState)(false),
       _useState14 = _slicedToArray(_useState13, 2),
-      openSidebar = _useState14[0],
-      setOpenSidebar = _useState14[1];
+      batchImageFormOpen = _useState14[0],
+      setBatchImageFormOpen = _useState14[1];
 
-  var _useState15 = (0, _react.useState)({
+  var _useState15 = (0, _react.useState)(null),
+      _useState16 = _slicedToArray(_useState15, 2),
+      openSidebar = _useState16[0],
+      setOpenSidebar = _useState16[1];
+
+  var _useState17 = (0, _react.useState)({
     id: true,
     name: true,
     description: true,
@@ -164,9 +170,9 @@ var BusinessProductsListingUI = function BusinessProductsListingUI(props) {
     inventoried: true,
     quantity: true
   }),
-      _useState16 = _slicedToArray(_useState15, 2),
-      allowSpreadColumns = _useState16[0],
-      setAllowSpreadColumns = _useState16[1];
+      _useState18 = _slicedToArray(_useState17, 2),
+      allowSpreadColumns = _useState18[0],
+      setAllowSpreadColumns = _useState18[1];
 
   var spreadColumnOptions = [{
     value: 'cost_price',
@@ -288,7 +294,7 @@ var BusinessProductsListingUI = function BusinessProductsListingUI(props) {
     onClick: function onClick() {
       return handleMenuCollapse(false);
     }
-  }, /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.List, null)), /*#__PURE__*/_react.default.createElement("div", null, !selectedBusiness && businessState.loading ? /*#__PURE__*/_react.default.createElement("h1", null, /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.List, null)), /*#__PURE__*/_react.default.createElement("div", null, !selectedBusiness && !businessState.business ? /*#__PURE__*/_react.default.createElement("h1", null, /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
     width: 200,
     height: 30
   })) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styles2.BusinessSelector, null, /*#__PURE__*/_react.default.createElement(_styles2.BusinessNameWrapper, {
@@ -306,7 +312,21 @@ var BusinessProductsListingUI = function BusinessProductsListingUI(props) {
     onClick: function onClick() {
       return setOpenSidebar('business_details');
     }
-  }, (selectedBusiness === null || selectedBusiness === void 0 ? void 0 : selectedBusiness.name) || (businessState === null || businessState === void 0 ? void 0 : (_businessState$busine7 = businessState.business) === null || _businessState$busine7 === void 0 ? void 0 : _businessState$busine7.name)), /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.ChevronRight, null), /*#__PURE__*/_react.default.createElement("span", null, categorySelected === null || categorySelected === void 0 ? void 0 : categorySelected.name))))), slug && /*#__PURE__*/_react.default.createElement(_styles2.ActionsGroup, null, /*#__PURE__*/_react.default.createElement(_ImportersButton.ImportersButton, null), /*#__PURE__*/_react.default.createElement(_styles.Button, {
+  }, (selectedBusiness === null || selectedBusiness === void 0 ? void 0 : selectedBusiness.name) || (businessState === null || businessState === void 0 ? void 0 : (_businessState$busine7 = businessState.business) === null || _businessState$busine7 === void 0 ? void 0 : _businessState$busine7.name)), /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.ChevronRight, null), /*#__PURE__*/_react.default.createElement("span", null, categorySelected === null || categorySelected === void 0 ? void 0 : categorySelected.name))))), slug && /*#__PURE__*/_react.default.createElement(_styles2.ActionsGroup, null, /*#__PURE__*/_react.default.createElement(_styles.Button, {
+    color: "lightPrimary",
+    borderRadius: "8px",
+    onClick: function onClick() {
+      return getBusiness();
+    },
+    className: businessState.loading ? 'loading' : ''
+  }, t('REFRESH', 'Refresh'), /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.ArrowRepeat, {
+    size: 16,
+    style: {
+      marginLeft: 5
+    }
+  })), /*#__PURE__*/_react.default.createElement(_ImportersButton.ImportersButton, {
+    customClass: "importerGroup"
+  }), /*#__PURE__*/_react.default.createElement(_styles.Button, {
     borderRadius: "8px",
     color: "lightPrimary",
     onClick: function onClick() {
@@ -324,7 +344,8 @@ var BusinessProductsListingUI = function BusinessProductsListingUI(props) {
     lazyLoad: true,
     search: searchValue,
     onSearch: handleChangeSearch,
-    placeholder: t('SEARCH', 'Search')
+    placeholder: t('SEARCH', 'Search'),
+    customClass: "searchBar"
   }))), slug && /*#__PURE__*/_react.default.createElement(_styles2.CategoryProductsContent, null, /*#__PURE__*/_react.default.createElement(_styles2.CategoryListContainer, {
     ref: categoryListRef
   }, /*#__PURE__*/_react.default.createElement(_BusinessProductsCategories.BusinessProductsCategories, _extends({}, props, {
@@ -382,7 +403,9 @@ var BusinessProductsListingUI = function BusinessProductsListingUI(props) {
     handleOpenProductDetails: handleOpenProductDetails,
     handleParentProductAdd: handleProductAdd,
     isParentProductAdd: openSidebar === 'add_product',
-    allowSpreadColumns: allowSpreadColumns
+    allowSpreadColumns: allowSpreadColumns,
+    productsPerPage: productsPerPage,
+    setProductsPerPage: setProductsPerPage
   }))))), openSidebar === 'category_details' && /*#__PURE__*/_react.default.createElement(_Shared.SideBar, {
     open: openSidebar === 'category_details',
     onClose: handleCloseEdit
@@ -430,10 +453,10 @@ var BusinessProductsListingUI = function BusinessProductsListingUI(props) {
 };
 
 var BusinessProductsListing = function BusinessProductsListing(props) {
-  var _useState17 = (0, _react.useState)(false),
-      _useState18 = _slicedToArray(_useState17, 2),
-      isInitialRender = _useState18[0],
-      setIsInitialRender = _useState18[1];
+  var _useState19 = (0, _react.useState)(false),
+      _useState20 = _slicedToArray(_useState19, 2),
+      isInitialRender = _useState20[0],
+      setIsInitialRender = _useState20[1];
 
   var businessProductslistingProps = _objectSpread(_objectSpread({}, props), {}, {
     UIComponent: BusinessProductsListingUI,

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

@@ -11,7 +11,7 @@ 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;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21;
 
 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); }
 
@@ -19,7 +19,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var CategoryProductsContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  flex: 1;\n  padding: 20px;\n  box-sizing: border-box;\n  transition: all 0.5s;\n\n  @media print {\n    display: none;\n  }\n\n  @media (min-width: 768px) {\n    overflow: hidden;\n  }\n"])));
+var CategoryProductsContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  flex: 1;\n  padding: 20px;\n  box-sizing: border-box;\n  transition: all 0.5s;\n  width: calc(100% - 40px);\n\n  @media print {\n    display: none;\n  }\n\n  @media (min-width: 768px) {\n    overflow: hidden;\n  }\n"])));
 
 exports.CategoryProductsContainer = CategoryProductsContainer;
 
@@ -33,37 +33,41 @@ var HeaderTitleContainer = _styledComponents.default.div(_templateObject3 || (_t
 
 exports.HeaderTitleContainer = HeaderTitleContainer;
 
-var ActionsGroup = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  margin-top: 15px;\n  flex-wrap: wrap;\n\n  > button {\n    height: 41px;\n    ", "\n  }\n\n  input {\n    background: ", ";\n  }\n\n  > div {\n    width: 100%;\n    flex: inherit;\n    margin-top: 15px;\n  }\n     \n  @media (min-width: 992px) {\n    margin-top: 0px;\n    > div {\n      width: initial;\n      margin-top: 0;\n    }\n  }\n"])), function (props) {
+var ActionsGroup = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  margin-top: 15px;\n  flex-wrap: wrap;\n\n  > button {\n    height: 41px;\n    width: 90px;\n    white-space: nowrap;\n    margin-top: 5px;\n    ", "\n    @media (min-width: 768px) {\n      width: unset;\n    }\n  }\n\n  input {\n    background: ", ";\n  }\n\n  > .searchBar {\n    min-width: 100px;\n    margin-top: 5px;\n  }\n  > .importerGroup {\n    margin-top: 5px;\n    ", "\n\n    > button {\n      width: 90px;\n      > svg {\n        display: none;\n        @media (min-width: 768px) {\n          display: inline;\n        }\n      }\n      @media (min-width: 768px) {\n        width: unset;\n      }\n    }\n  }\n\n  @keyframes spinner-content {\n    0% { transform: rotate(0) }\n    100% { transform: rotate(360deg) }\n  }\n\n  > .loading {\n    > svg {\n      animation: spinner-content 1.85s linear infinite;\n    }\n  }\n"])), function (props) {
   var _props$theme;
 
   return (_props$theme = props.theme) !== null && _props$theme !== void 0 && _props$theme.rtl ? (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      margin-left: 15px;\n    "]))) : (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      margin-right: 15px;\n    "])));
 }, function (props) {
   return props.theme.colors.secundary;
+}, function (props) {
+  var _props$theme2;
+
+  return (_props$theme2 = props.theme) !== null && _props$theme2 !== void 0 && _props$theme2.rtl ? (0, _styledComponents.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      margin-left: 15px;\n    "]))) : (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n      margin-right: 15px;\n    "])));
 });
 
 exports.ActionsGroup = ActionsGroup;
 
-var CategoryProductsContent = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  margin-top: 50px;\n  min-height: calc(100% - 150px);\n\n  @media (max-width: 768px) {\n    flex-direction: column;\n  }\n"])));
+var CategoryProductsContent = _styledComponents.default.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  margin-top: 50px;\n  min-height: calc(100% - 150px);\n\n  @media (max-width: 768px) {\n    flex-direction: column;\n  }\n"])));
 
 exports.CategoryProductsContent = CategoryProductsContent;
 
-var CategoryListContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  min-width: 260px;\n\n  @media (max-width: 576px) {\n    width:100%;\n  }\n"])));
+var CategoryListContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  min-width: 260px;\n\n  @media (max-width: 576px) {\n    width:100%;\n  }\n"])));
 
 exports.CategoryListContainer = CategoryListContainer;
 
-var ProductListContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  flex-grow: 1;\n  width: 100%;\n\n  @media (min-width: 769px) {\n    width: calc(100% - 260px);\n  }\n"])));
+var ProductListContainer = _styledComponents.default.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  flex-grow: 1;\n  width: 100%;\n\n  @media (min-width: 769px) {\n    width: calc(100% - 260px);\n  }\n"])));
 
 exports.ProductListContainer = ProductListContainer;
 
-var ProductHeader = _styledComponents.default.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n\n  h1 {\n    font-weight: 600;\n    font-size: 14px;\n    margin: 0;\n  }\n\n  @media (min-width: 768px) {\n    padding: 0 10px;\n\n    ", "\n  }\n"])), function (props) {
-  var _props$theme2;
+var ProductHeader = _styledComponents.default.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n\n  h1 {\n    font-weight: 600;\n    font-size: 14px;\n    margin: 0;\n  }\n\n  @media (min-width: 768px) {\n    padding: 0 10px;\n\n    ", "\n  }\n"])), function (props) {
+  var _props$theme3;
 
-  return (_props$theme2 = props.theme) !== null && _props$theme2 !== void 0 && _props$theme2.rtl ? (0, _styledComponents.css)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n      margin-right: 20px;\n    "]))) : (0, _styledComponents.css)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n      margin-left: 20px;\n    "])));
+  return (_props$theme3 = props.theme) !== null && _props$theme3 !== void 0 && _props$theme3.rtl ? (0, _styledComponents.css)(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n      margin-right: 20px;\n    "]))) : (0, _styledComponents.css)(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n      margin-left: 20px;\n    "])));
 });
 
 exports.ProductHeader = ProductHeader;
 
-var ActionIconList = _styledComponents.default.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  button.batch-image-upload {\n    border: 1px solid ", ";\n    background-color: transparent;\n    color: ", ";\n    padding: 4px 15px;\n    &:hover {\n      background: ", ";\n      color: ", ";\n    }\n  }\n"])), function (props) {
+var ActionIconList = _styledComponents.default.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  button.batch-image-upload {\n    border: 1px solid ", ";\n    background-color: transparent;\n    color: ", ";\n    padding: 4px 15px;\n    &:hover {\n      background: ", ";\n      color: ", ";\n    }\n  }\n"])), function (props) {
   return props.theme.colors.primary;
 }, function (props) {
   return (0, _polished.darken)(0.07, props.theme.colors.primary);
@@ -75,26 +79,26 @@ var ActionIconList = _styledComponents.default.div(_templateObject13 || (_templa
 
 exports.ActionIconList = ActionIconList;
 
-var ViewMethodButton = _styledComponents.default.span(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  margin-left: 12px;\n  cursor: pointer;\n  color: ", ";\n\n  svg {\n    font-size: 16px;\n  }\n\n  &.batch {\n    svg {\n      font-size: 18px;\n    }\n  }\n\n  ", "\n"])), function (props) {
+var ViewMethodButton = _styledComponents.default.span(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n  margin-left: 12px;\n  cursor: pointer;\n  color: ", ";\n\n  svg {\n    font-size: 16px;\n  }\n\n  &.batch {\n    svg {\n      font-size: 18px;\n    }\n  }\n\n  ", "\n"])), function (props) {
   return props.theme.colors.headingColor;
 }, function (_ref) {
   var active = _ref.active;
-  return active && (0, _styledComponents.css)(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n    color: ", ";\n  "])), function (props) {
+  return active && (0, _styledComponents.css)(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n    color: ", ";\n  "])), function (props) {
     return props.theme.colors.primary;
   });
 });
 
 exports.ViewMethodButton = ViewMethodButton;
 
-var BusinessSelector = _styledComponents.default.div(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n  position: relative;\n  width: fit-content;\n"])));
+var BusinessSelector = _styledComponents.default.div(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n  position: relative;\n  width: fit-content;\n"])));
 
 exports.BusinessSelector = BusinessSelector;
 
-var BusinessNameWrapper = _styledComponents.default.div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n  h1 {\n    font-size: 20px;\n    font-weight: 700;\n  }\n  cursor: pointer;\n  h1 {\n    svg {\n      font-size: 0.7em;\n      transition: 0.2s ease-in-out;\n    }\n    svg.rotate-arrow {\n      transform: rotate(180deg);\n    }\n  }\n"])));
+var BusinessNameWrapper = _styledComponents.default.div(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n  h1 {\n    font-size: 20px;\n    font-weight: 700;\n  }\n  cursor: pointer;\n  h1 {\n    svg {\n      font-size: 0.7em;\n      transition: 0.2s ease-in-out;\n    }\n    svg.rotate-arrow {\n      transform: rotate(180deg);\n    }\n  }\n"])));
 
 exports.BusinessNameWrapper = BusinessNameWrapper;
 
-var Breadcrumb = _styledComponents.default.div(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  font-size: 12px;\n  color: ", ";\n\n  span {\n    &.business {\n      color: ", ";\n      cursor: pointer;\n    }\n  }\n\n  svg {\n    margin: 0 9px;\n  }\n"])), function (props) {
+var Breadcrumb = _styledComponents.default.div(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  font-size: 12px;\n  color: ", ";\n\n  span {\n    &.business {\n      color: ", ";\n      cursor: pointer;\n    }\n  }\n\n  svg {\n    margin: 0 9px;\n  }\n"])), function (props) {
   return props.theme.colors.lightGray;
 }, function (props) {
   return props.theme.colors.primary;
@@ -102,6 +106,6 @@ var Breadcrumb = _styledComponents.default.div(_templateObject18 || (_templateOb
 
 exports.Breadcrumb = Breadcrumb;
 
-var ColumnsAllowWrapper = _styledComponents.default.div(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n  position: relative;\n  margin: 0 5px;\n"])));
+var ColumnsAllowWrapper = _styledComponents.default.div(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n  position: relative;\n  margin: 0 5px;\n"])));
 
 exports.ColumnsAllowWrapper = ColumnsAllowWrapper;

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

@@ -80,6 +80,7 @@ var BusinessesListingUI = function BusinessesListingUI(props) {
       handleSucessRemoveBusiness = props.handleSucessRemoveBusiness,
       handleSucessAddBusiness = props.handleSucessAddBusiness,
       handleSucessUpdateBusiness = props.handleSucessUpdateBusiness,
+      loadBusinesses = props.loadBusinesses,
       onSearch = props.onSearch,
       onBusinessRedirect = props.onBusinessRedirect,
       getPageBusinesses = props.getPageBusinesses;
@@ -255,7 +256,9 @@ var BusinessesListingUI = function BusinessesListingUI(props) {
     onSearch: onSearch,
     handleOpenAddBusiness: handleOpenAddBusiness,
     handleStartTutorial: handleStartTutorial,
-    handleOpenSync: handleOpenSync
+    handleOpenSync: handleOpenSync,
+    handleRefreshBusinesses: loadBusinesses,
+    loading: businessList.loading
   }), /*#__PURE__*/_react.default.createElement(_styles.ViewContainer, null, /*#__PURE__*/_react.default.createElement(_BusinessActiveStateFilter.BusinessActiveStateFilter, {
     selectedBusinessActiveState: selectedBusinessActiveState,
     handleChangeBusinessActiveState: handleChangeBusinessActiveState

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

@@ -42,7 +42,9 @@ var BusinessesListingHeader = function BusinessesListingHeader(props) {
       onSearch = props.onSearch,
       handleOpenAddBusiness = props.handleOpenAddBusiness,
       handleStartTutorial = props.handleStartTutorial,
-      handleOpenSync = props.handleOpenSync;
+      handleOpenSync = props.handleOpenSync,
+      handleRefreshBusinesses = props.handleRefreshBusinesses,
+      loading = props.loading;
 
   var _useLanguage = (0, _orderingComponentsAdminExternal.useLanguage)(),
       _useLanguage2 = _slicedToArray(_useLanguage, 2),
@@ -67,7 +69,21 @@ var BusinessesListingHeader = function BusinessesListingHeader(props) {
     onClick: function onClick() {
       return handleStartTutorial();
     }
-  }, /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.LifePreserver, null)))), /*#__PURE__*/_react.default.createElement(_styles2.ActionsWrapper, null, /*#__PURE__*/_react.default.createElement(_ImportersButton.ImportersButton, null), /*#__PURE__*/_react.default.createElement(_styles.Button, {
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.LifePreserver, null)))), /*#__PURE__*/_react.default.createElement(_styles2.ActionsWrapper, null, /*#__PURE__*/_react.default.createElement(_styles.Button, {
+    color: "lightPrimary",
+    borderRadius: "8px",
+    onClick: function onClick() {
+      return handleRefreshBusinesses();
+    },
+    className: loading ? 'loading' : ''
+  }, t('REFRESH', 'Refresh'), /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.ArrowRepeat, {
+    size: 16,
+    style: {
+      marginLeft: 5
+    }
+  })), /*#__PURE__*/_react.default.createElement(_ImportersButton.ImportersButton, {
+    customClass: "importerGroup"
+  }), /*#__PURE__*/_react.default.createElement(_styles.Button, {
     color: "lightPrimary",
     borderRadius: "8px",
     onClick: function onClick() {
@@ -78,7 +94,8 @@ var BusinessesListingHeader = function BusinessesListingHeader(props) {
     lazyLoad: true,
     onSearch: onSearch,
     search: searchValue,
-    placeholder: t('SEARCH', 'Search')
+    placeholder: t('SEARCH', 'Search'),
+    customClass: "searchBar"
   })));
 };
 

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

@@ -9,7 +9,7 @@ exports.HeaderTitleContainer = exports.HeaderContainer = exports.ActionsWrapper
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
 
 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); }
 
@@ -37,10 +37,14 @@ var HeaderTitleContainer = _styledComponents.default.div(_templateObject2 || (_t
 
 exports.HeaderTitleContainer = HeaderTitleContainer;
 
-var ActionsWrapper = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  > button {\n    height: 41px;\n    width: 90px;\n    white-space: nowrap;\n    ", "\n    @media (min-width: 768px) {\n      width: unset;\n    }\n  }\n"])), function (props) {
+var ActionsWrapper = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  > button {\n    height: 41px;\n    width: 90px;\n    white-space: nowrap;\n    margin-top: 5px;\n    ", "\n    @media (min-width: 768px) {\n      width: unset;\n    }\n  }\n  > .searchBar {\n    min-width: 100px;\n    margin-top: 5px;\n  }\n  > .importerGroup {\n    margin-top: 5px;\n    ", "\n\n    > button {\n      width: 90px;\n      > svg {\n        display: none;\n        @media (min-width: 768px) {\n          display: inline;\n        }\n      }\n      @media (min-width: 768px) {\n        width: unset;\n      }\n    }\n  }\n\n  @keyframes spinner-content {\n    0% { transform: rotate(0) }\n    100% { transform: rotate(360deg) }\n  }\n\n  > .loading {\n    > svg {\n      animation: spinner-content 1.85s linear infinite;\n    }\n  }\n"])), function (props) {
   var _props$theme3;
 
   return (_props$theme3 = props.theme) !== null && _props$theme3 !== void 0 && _props$theme3.rtl ? (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n      margin-left: 15px;\n    "]))) : (0, _styledComponents.css)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n      margin-right: 15px;\n    "])));
+}, function (props) {
+  var _props$theme4;
+
+  return (_props$theme4 = props.theme) !== null && _props$theme4 !== void 0 && _props$theme4.rtl ? (0, _styledComponents.css)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n      margin-left: 15px;\n    "]))) : (0, _styledComponents.css)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n      margin-right: 15px;\n    "])));
 });
 
 exports.ActionsWrapper = ActionsWrapper;

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

@@ -52,7 +52,8 @@ var ImportersList = function ImportersList(props) {
       handleDeleteImporter = props.handleDeleteImporter,
       selectedImporter = props.selectedImporter,
       setSelectedImporter = props.setSelectedImporter,
-      handleEditImporter = props.handleEditImporter;
+      handleEditImporter = props.handleEditImporter,
+      isDisabledFeature = props.isDisabledFeature;
 
   var _useLanguage = (0, _orderingComponentsAdminExternal.useLanguage)(),
       _useLanguage2 = _slicedToArray(_useLanguage, 2),
@@ -68,7 +69,9 @@ var ImportersList = function ImportersList(props) {
     createImporterJob(importer);
   };
 
-  return /*#__PURE__*/_react.default.createElement(_styles2.ImportListContainer, null, /*#__PURE__*/_react.default.createElement(_styles2.ImportersTableWrapper, null, /*#__PURE__*/_react.default.createElement(_styles2.ImpotersTable, null, /*#__PURE__*/_react.default.createElement("thead", null, /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("th", null, t('NAME', 'Name')), /*#__PURE__*/_react.default.createElement("th", {
+  return /*#__PURE__*/_react.default.createElement(_styles2.ImportListContainer, {
+    isDisabledFeature: isDisabledFeature
+  }, /*#__PURE__*/_react.default.createElement(_styles2.ImportersTableWrapper, null, /*#__PURE__*/_react.default.createElement(_styles2.ImpotersTable, null, /*#__PURE__*/_react.default.createElement("thead", null, /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("th", null, t('NAME', 'Name')), /*#__PURE__*/_react.default.createElement("th", {
     colSpan: "2"
   }, t('ACTION', 'Action')))), importerList.loading ? _toConsumableArray(Array(10).keys()).map(function (i) {
     return /*#__PURE__*/_react.default.createElement(_styles2.ImoportTbody, {

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

@@ -11,7 +11,7 @@ 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;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
 
 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); }
 
@@ -19,15 +19,18 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var ImportListContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral([" \n"])));
+var ImportListContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref) {
+  var isDisabledFeature = _ref.isDisabledFeature;
+  return isDisabledFeature && (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    cursor: not-allowed;\n    opacity: 0.5;\n    > div {\n      pointer-events: none;\n    }\n  "])));
+});
 
 exports.ImportListContainer = ImportListContainer;
 
-var ImportersTableWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n"])));
+var ImportersTableWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n"])));
 
 exports.ImportersTableWrapper = ImportersTableWrapper;
 
-var ImpotersTable = _styledComponents.default.table(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  width: 100%;\n  color: ", ";\n\n  td, th {\n    padding: 10px 0;\n    font-size: 14px;\n    &:first-child {\n      width: 50%;\n    }\n  }\n\n  thead {\n    border-bottom: solid 1px ", ";\n  }\n"])), function (props) {
+var ImpotersTable = _styledComponents.default.table(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  width: 100%;\n  color: ", ";\n\n  td, th {\n    padding: 10px 0;\n    font-size: 14px;\n    &:first-child {\n      width: 50%;\n    }\n  }\n\n  thead {\n    border-bottom: solid 1px ", ";\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.headingColor;
@@ -37,15 +40,15 @@ var ImpotersTable = _styledComponents.default.table(_templateObject3 || (_templa
 
 exports.ImpotersTable = ImpotersTable;
 
-var ImoportTbody = _styledComponents.default.tbody(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  tr {\n    td {\n      padding-right: 10px;\n      .importer-name {\n        display: flex;\n        width: 100%;\n        border-right: 1px solid ", ";\n      }\n    }\n  }\n  cursor: pointer;\n  border-bottom: 1px solid ", ";\n  &:hover {\n    background-color: ", ";\n  }\n  ", "\n"])), function (props) {
+var ImoportTbody = _styledComponents.default.tbody(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  tr {\n    td {\n      padding-right: 10px;\n      .importer-name {\n        display: flex;\n        width: 100%;\n        border-right: 1px solid ", ";\n      }\n    }\n  }\n  cursor: pointer;\n  border-bottom: 1px solid ", ";\n  &:hover {\n    background-color: ", ";\n  }\n  ", "\n"])), function (props) {
   return props.theme.colors.borderColor;
 }, function (props) {
   return props.theme.colors.borderColor;
 }, function (props) {
   return props.theme.colors.lightPrimary;
-}, function (_ref) {
-  var active = _ref.active;
-  return active && (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    background-color: ", ";\n    td {\n      border-top: 1px solid ", ";\n      border-bottom: 1px solid ", ";\n    }\n  "])), function (props) {
+}, function (_ref2) {
+  var active = _ref2.active;
+  return active && (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    background-color: ", ";\n    td {\n      border-top: 1px solid ", ";\n      border-bottom: 1px solid ", ";\n    }\n  "])), function (props) {
     return props.theme.colors.lightPrimary;
   }, function (props) {
     return props.theme.colors.primary;
@@ -56,34 +59,34 @@ var ImoportTbody = _styledComponents.default.tbody(_templateObject4 || (_templat
 
 exports.ImoportTbody = ImoportTbody;
 
-var UserEnableWrapper = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  width: fit-content;\n\n  span {\n    font-size: 14px;\n\n    ", "\n  }\n"])), function (props) {
+var UserEnableWrapper = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  width: fit-content;\n\n  span {\n    font-size: 14px;\n\n    ", "\n  }\n"])), function (props) {
   var _props$theme;
 
-  return (_props$theme = props.theme) !== null && _props$theme !== void 0 && _props$theme.rtl ? (0, _styledComponents.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      padding-left: 10px;\n    "]))) : (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n      padding-right: 10px;\n    "])));
+  return (_props$theme = props.theme) !== null && _props$theme !== void 0 && _props$theme.rtl ? (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n      padding-left: 10px;\n    "]))) : (0, _styledComponents.css)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n      padding-right: 10px;\n    "])));
 });
 
 exports.UserEnableWrapper = UserEnableWrapper;
 
-var WrapperUserActionSelector = _styledComponents.default.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: flex-end;\n  button {\n    background: transparent !important;\n    border: none;\n    padding: 0px;\n    &:active,\n    &:focus {\n      border-color: unset !important;\n      box-shadow: none !important;\n    }\n    svg {\n      color: ", ";\n    }\n    &:after {\n      display: none;\n    }\n  }\n  .show {\n    button {\n      background: #F8F9FA !important;\n      border-color: unset !important;\n      box-shadow: none !important;\n    }\n    >div {\n      border: 1px solid #E9ECEF;\n      box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.12);\n    }\n  }\n  > div {\n    border-radius: 8px;\n    ", "\n    > div {\n      a:last-child {\n        color: #E63757;\n      }\n    }\n    .dropdown-item {\n      font-size: 14px;\n    }\n  }\n"])), function (props) {
+var WrapperUserActionSelector = _styledComponents.default.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: flex-end;\n  button {\n    background: transparent !important;\n    border: none;\n    padding: 0px;\n    &:active,\n    &:focus {\n      border-color: unset !important;\n      box-shadow: none !important;\n    }\n    svg {\n      color: ", ";\n    }\n    &:after {\n      display: none;\n    }\n  }\n  .show {\n    button {\n      background: #F8F9FA !important;\n      border-color: unset !important;\n      box-shadow: none !important;\n    }\n    >div {\n      border: 1px solid #E9ECEF;\n      box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.12);\n    }\n  }\n  > div {\n    border-radius: 8px;\n    ", "\n    > div {\n      a:last-child {\n        color: #E63757;\n      }\n    }\n    .dropdown-item {\n      font-size: 14px;\n    }\n  }\n"])), function (props) {
   return props.theme.colors.headingColor;
 }, function (props) {
   var _props$theme2;
 
-  return (_props$theme2 = props.theme) !== null && _props$theme2 !== void 0 && _props$theme2.rtl ? (0, _styledComponents.css)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n      margin-left: 5px;\n    "]))) : (0, _styledComponents.css)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n      margin-right: 5px;\n    "])));
+  return (_props$theme2 = props.theme) !== null && _props$theme2 !== void 0 && _props$theme2.rtl ? (0, _styledComponents.css)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n      margin-left: 5px;\n    "]))) : (0, _styledComponents.css)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n      margin-right: 5px;\n    "])));
 });
 
 exports.WrapperUserActionSelector = WrapperUserActionSelector;
 
-var ImportersBottomContainer = _styledComponents.default.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n\n"])));
+var ImportersBottomContainer = _styledComponents.default.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n\n"])));
 
 exports.ImportersBottomContainer = ImportersBottomContainer;
 
-var AddNewImporterButton = _styledComponents.default.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  display: inline-flex;\n  width: fit-content;\n  cursor: pointer;\n  color: rgb(144, 155, 169);\n  font-size: 14px;\n  margin-top: 20px;\n  &:hover {\n    color: ", ";\n  }\n"])), function (props) {
+var AddNewImporterButton = _styledComponents.default.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  display: inline-flex;\n  width: fit-content;\n  cursor: pointer;\n  color: rgb(144, 155, 169);\n  font-size: 14px;\n  margin-top: 20px;\n  &:hover {\n    color: ", ";\n  }\n"])), function (props) {
   return (0, _polished.darken)(0.05, props.theme.colors.primary);
 });
 
 exports.AddNewImporterButton = AddNewImporterButton;
 
-var NotFoundWrapper = _styledComponents.default.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: 100%;\n  position: relative;\n  #not-found-source {\n    height: auto;\n    h1 {\n      font-size: 18px;\n      margin-top: 25px;\n    }\n  }\n"])));
+var NotFoundWrapper = _styledComponents.default.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: 100%;\n  position: relative;\n  #not-found-source {\n    height: auto;\n    h1 {\n      font-size: 18px;\n      margin-top: 25px;\n    }\n  }\n"])));
 
 exports.NotFoundWrapper = NotFoundWrapper;

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

@@ -25,6 +25,8 @@ var _ImporterHelpContent = require("../ImporterHelpContent");
 
 var _Shared = require("../../Shared");
 
+var _DisabledFeatureAlert = require("../../DisabledFeatureAlert");
+
 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); }
@@ -61,6 +63,16 @@ var ImportersListingUI = function ImportersListingUI(props) {
       _useLanguage2 = _slicedToArray(_useLanguage, 2),
       t = _useLanguage2[1];
 
+  var _useConfig = (0, _orderingComponentsAdminExternal.useConfig)(),
+      _useConfig2 = _slicedToArray(_useConfig, 1),
+      configs = _useConfig2[0].configs;
+
+  var _useSession = (0, _orderingComponentsAdminExternal.useSession)(),
+      _useSession2 = _slicedToArray(_useSession, 1),
+      user = _useSession2[0].user;
+
+  var featureName = 'massive_importer';
+
   var _useState = (0, _react.useState)(false),
       _useState2 = _slicedToArray(_useState, 2),
       openNewImporter = _useState2[0],
@@ -96,6 +108,11 @@ var ImportersListingUI = function ImportersListingUI(props) {
       openMappingDetails = _useState14[0],
       setOpenMappingDetails = _useState14[1];
 
+  var _useState15 = (0, _react.useState)(false),
+      _useState16 = _slicedToArray(_useState15, 2),
+      isDisabledFeature = _useState16[0],
+      setIsDisabledFeature = _useState16[1];
+
   var addNewImporter = function addNewImporter() {
     setSelectedImporter({});
     setOpenImportCsv(false);
@@ -120,17 +137,26 @@ var ImportersListingUI = function ImportersListingUI(props) {
   (0, _react.useEffect)(function () {
     setExtraOpen && setExtraOpen(openNewImporter);
   }, [openNewImporter]);
+  (0, _react.useEffect)(function () {
+    if (configs && Object.keys(configs).length > 0 && user) {
+      if (!Object.keys(configs).includes(featureName) && (user === null || user === void 0 ? void 0 : user.level) === 0) {
+        setIsDisabledFeature(true);
+      }
+    }
+  }, [configs]);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styles2.ImportersListingContainer, null, /*#__PURE__*/_react.default.createElement(_styles2.Header, null, /*#__PURE__*/_react.default.createElement(_styles2.Title, null, /*#__PURE__*/_react.default.createElement(_styles2.TitleContent, null, t('IMPORTERS', 'Importers')), /*#__PURE__*/_react.default.createElement(_styles.IconButton, {
     color: "primary",
     onClick: function onClick() {
       return setOpenImporterHelp(true);
-    }
+    },
+    disabled: isDisabledFeature
   }, /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.InfoCircle, null))), /*#__PURE__*/_react.default.createElement(_styles2.ActionButtons, null, /*#__PURE__*/_react.default.createElement(_styles.Button, {
     color: "lightPrimary",
     borderRadius: "5px",
     onClick: function onClick() {
       return addNewImporter();
-    }
+    },
+    disabled: isDisabledFeature
   }, t('ADD_IMPORTER', 'Add importer')))), /*#__PURE__*/_react.default.createElement(_ImportersList.ImportersList, {
     importerList: importerList,
     paginationDetail: paginationDetail,
@@ -139,8 +165,9 @@ var ImportersListingUI = function ImportersListingUI(props) {
     handleDeleteImporter: handleDeleteImporter,
     selectedImporter: selectedImporter,
     setSelectedImporter: setSelectedImporter,
-    handleEditImporter: handleEditImporter
-  }), openNewImporter && /*#__PURE__*/_react.default.createElement(_Shared.SideBar, {
+    handleEditImporter: handleEditImporter,
+    isDisabledFeature: isDisabledFeature
+  }), isDisabledFeature && /*#__PURE__*/_react.default.createElement(_DisabledFeatureAlert.DisabledFeatureAlert, null), openNewImporter && /*#__PURE__*/_react.default.createElement(_Shared.SideBar, {
     isBorderShow: !openMappingDetails,
     open: openNewImporter,
     defaultSideBarWidth: openMappingDetails ? 1000 : 500,

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

@@ -29,6 +29,8 @@ var _reactBootstrap = require("react-bootstrap");
 
 var _Shared = require("../../Shared");
 
+var _DisabledFeatureAlert = require("../../DisabledFeatureAlert");
+
 var _styles3 = require("./styles");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -76,7 +78,8 @@ var PaymentOption = function PaymentOption(props) {
       actionState = props.actionState,
       handleSaveClick = props.handleSaveClick,
       businessPaymethod = props.businessPaymethod,
-      handleDeletePaymethod = props.handleDeletePaymethod;
+      handleDeletePaymethod = props.handleDeletePaymethod,
+      isDisabledFeature = props.isDisabledFeature;
   var theme = (0, _styledComponents.useTheme)();
 
   var _useLanguage = (0, _orderingComponentsAdminExternal.useLanguage)(),
@@ -197,11 +200,12 @@ var PaymentOption = function PaymentOption(props) {
     return /*#__PURE__*/_react.default.createElement(_styles3.TabOption, {
       key: site.id,
       onClick: function onClick() {
-        return setPaymethodInfo({
+        return !isDisabledFeature && setPaymethodInfo({
           key: 'sites',
           value: site.id
         });
-      }
+      },
+      isDisabledFeature: isDisabledFeature
     }, (_ref2 = (_changesState$sites = changesState === null || changesState === void 0 ? void 0 : changesState.sites) !== null && _changesState$sites !== void 0 ? _changesState$sites : businessPaymethod === null || businessPaymethod === void 0 ? void 0 : (_businessPaymethod$si = businessPaymethod.sites) === null || _businessPaymethod$si === void 0 ? void 0 : _businessPaymethod$si.map(function (s) {
       return s.id;
     })) !== null && _ref2 !== void 0 && _ref2.includes(site.id) ? /*#__PURE__*/_react.default.createElement(_RiCheckboxFill.default, {
@@ -213,22 +217,23 @@ var PaymentOption = function PaymentOption(props) {
     return /*#__PURE__*/_react.default.createElement(_styles3.TabOption, {
       key: type.value,
       onClick: function onClick() {
-        return setPaymethodInfo({
+        return !isDisabledFeature && setPaymethodInfo({
           key: 'allowed_order_types',
           value: type.value
         });
-      }
+      },
+      isDisabledFeature: isDisabledFeature
     }, (_ref3 = (_changesState$allowed = changesState === null || changesState === void 0 ? void 0 : changesState.allowed_order_types) !== null && _changesState$allowed !== void 0 ? _changesState$allowed : businessPaymethod === null || businessPaymethod === void 0 ? void 0 : businessPaymethod.allowed_order_types) !== null && _ref3 !== void 0 && _ref3.includes(type.value) ? /*#__PURE__*/_react.default.createElement(_RiCheckboxFill.default, {
       className: "fill"
     }) : /*#__PURE__*/_react.default.createElement(_RiCheckboxBlankLine.default, null), /*#__PURE__*/_react.default.createElement(_styles3.TabOptionName, null, type.text));
   }), /*#__PURE__*/_react.default.createElement(_styles.Button, {
     borderRadius: "5px",
     color: "primary",
-    disabled: actionState.loading || Object.keys(changesState).length === 0,
+    disabled: isDisabledFeature || actionState.loading || Object.keys(changesState).length === 0,
     onClick: function onClick() {
       return handleSaveClick(businessPaymethod.id);
     }
-  }, actionState.loading ? t('LOADING', 'Loading') : t('SAVE', 'Save'))), /*#__PURE__*/_react.default.createElement(_Shared.Confirm, {
+  }, actionState.loading ? t('LOADING', 'Loading') : t('SAVE', 'Save'))), isDisabledFeature && /*#__PURE__*/_react.default.createElement(_DisabledFeatureAlert.DisabledFeatureAlert, null), /*#__PURE__*/_react.default.createElement(_Shared.Confirm, {
     width: "700px",
     title: t('WEB_APPNAME', 'Ordering'),
     content: confirm.content,