ordering-ui-admin-external 1.2.0 → 1.3.0

package/_modules/components/SidebarMenu/styles.js

@@ -9,7 +9,7 @@ exports.UserInfo = exports.SubMenu = exports.SidebarMainContent = exports.Sideba
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-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;
+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;
 
 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); }
 
@@ -83,32 +83,42 @@ var UserInfo = _styledComponents.default.div(_templateObject13 || (_templateObje
 
 exports.UserInfo = UserInfo;
 
-var MenuContainer = _styledComponents.default.div(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n  margin: 5px 0;\n  > button {\n    width: 100%;\n    text-align: initial;\n  }\n"])));
+var MenuContainer = _styledComponents.default.div(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n  margin: 5px 0;\n  > button {\n    width: 100%;\n    text-align: initial;\n  }\n\n  ", "\n"])), function (_ref3) {
+  var disabledFeature = _ref3.disabledFeature;
+  return disabledFeature && (0, _styledComponents.css)(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n    background-color: ", ";\n    cursor: not-allowed;\n    > button {\n      pointer-events: none;\n    }\n  "])), function (props) {
+    return props.theme.colors.disabled;
+  });
+});
 
 exports.MenuContainer = MenuContainer;
 
-var MenuContent = _styledComponents.default.div(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n  padding: 5px 0;\n"])));
+var MenuContent = _styledComponents.default.div(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n  padding: 5px 0;\n"])));
 
 exports.MenuContent = MenuContent;
 
-var SubMenu = _styledComponents.default.div(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n  cursor: pointer;\n  padding: 5px 0;\n  font-size: 14px;\n  color: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  border-radius: 8px;\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  ", "\n  ", "\n"])), function (props) {
+var SubMenu = _styledComponents.default.div(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n  cursor: pointer;\n  padding: 5px 0;\n  font-size: 14px;\n  color: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  border-radius: 8px;\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  ", "\n  ", "\n\n  ", "\n"])), function (props) {
   return props.theme.colors.lightGray;
 }, function (props) {
   return props.theme.colors.lightPrimary;
-}, function (_ref3) {
-  var active = _ref3.active;
-  return active && (0, _styledComponents.css)(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n    color: ", ";\n  "])), function (props) {
+}, function (_ref4) {
+  var active = _ref4.active;
+  return active && (0, _styledComponents.css)(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n    color: ", ";\n  "])), function (props) {
     return props.theme.colors.primary;
   });
+}, function (_ref5) {
+  var disabledFeature = _ref5.disabledFeature;
+  return disabledFeature && (0, _styledComponents.css)(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n    background-color: ", "!important;\n    cursor: not-allowed;\n  "])), function (props) {
+    return props.theme.colors.disabled;
+  });
 }, function (props) {
   var _props$theme5;
 
-  return (_props$theme5 = props.theme) !== null && _props$theme5 !== void 0 && _props$theme5.rtl ? (0, _styledComponents.css)(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n    padding-right: 40px;\n  "]))) : (0, _styledComponents.css)(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n    padding-left: 40px;\n  "])));
+  return (_props$theme5 = props.theme) !== null && _props$theme5 !== void 0 && _props$theme5.rtl ? (0, _styledComponents.css)(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["\n    padding-right: 40px;\n  "]))) : (0, _styledComponents.css)(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["\n    padding-left: 40px;\n  "])));
 });
 
 exports.SubMenu = SubMenu;
 
-var LanguageSelectorContainer = _styledComponents.default.div(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["\n  position: relative;\n  border-radius: 8px;\n  min-height: 35px;\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  .options {\n    > div {\n      font-size: 14px;\n    }\n  }\n"])), function (props) {
+var LanguageSelectorContainer = _styledComponents.default.div(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["\n  position: relative;\n  border-radius: 8px;\n  min-height: 35px;\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  .options {\n    > div {\n      font-size: 14px;\n    }\n  }\n"])), function (props) {
   return props.theme.colors.lightPrimary;
 });
 

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

@@ -21,6 +21,8 @@ var _styles = require("../../../styles");
 
 var _reactBootstrapIcons = require("react-bootstrap-icons");
 
+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); }
@@ -67,6 +69,14 @@ var BusinessMenuUI = function BusinessMenuUI(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 _useWindowSize = (0, _useWindowSize2.useWindowSize)(),
       width = _useWindowSize.width;
 
@@ -104,6 +114,13 @@ var BusinessMenuUI = function BusinessMenuUI(props) {
       menuList = _useState12[0],
       setMenuList = _useState12[1];
 
+  var _useState13 = (0, _react.useState)(false),
+      _useState14 = _slicedToArray(_useState13, 2),
+      isDisabledFeature = _useState14[0],
+      setIsDisabledFeature = _useState14[1];
+
+  var featureName = 'shared_menus';
+
   var handleOpenOptions = function handleOpenOptions(name, menu) {
     setCurrentMenu(menu);
     setIsExtendExtraOpen(true);
@@ -133,6 +150,16 @@ var BusinessMenuUI = function BusinessMenuUI(props) {
     });
     setMenuList(filteredMenus);
   }, [JSON.stringify(businessMenusState.menus), JSON.stringify(businessMenusState.menusShared), searchValue, isSelectedSharedMenus]);
+  (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 && isSelectedSharedMenus) {
+        setIsDisabledFeature(true);
+        return;
+      }
+
+      setIsDisabledFeature(false);
+    }
+  }, [configs, isSelectedSharedMenus]);
   return /*#__PURE__*/_react.default.createElement(_styles2.MainContainer, null, /*#__PURE__*/_react.default.createElement(_styles2.MenuContainer, {
     isHide: isOpenSharedProduct
   }, /*#__PURE__*/_react.default.createElement(_styles2.Header, null, /*#__PURE__*/_react.default.createElement(_styles2.Title, null, t('MENU_V21', 'Menu')), /*#__PURE__*/_react.default.createElement(_styles.Button, {
@@ -140,7 +167,8 @@ var BusinessMenuUI = function BusinessMenuUI(props) {
     color: "lightPrimary",
     onClick: function onClick() {
       return handleOpenOptions('option', {});
-    }
+    },
+    disabled: isDisabledFeature
   }, t('ADD_MENU', 'Add menu'))), /*#__PURE__*/_react.default.createElement(_styles2.TabsContainer, null, /*#__PURE__*/_react.default.createElement(_styles2.Tab, {
     active: !isSelectedSharedMenus,
     onClick: function onClick() {
@@ -153,7 +181,9 @@ var BusinessMenuUI = function BusinessMenuUI(props) {
       handleCloseOption();
       setIsSelectedSharedMenus(true);
     }
-  }, t('SHARED_MENUS', 'Shared menus'))), /*#__PURE__*/_react.default.createElement(_styles2.SearchBarWrapper, null, /*#__PURE__*/_react.default.createElement(_Shared.SearchBar, {
+  }, t('SHARED_MENUS', 'Shared menus'))), /*#__PURE__*/_react.default.createElement(_styles2.SearchBarWrapper, {
+    isDisabledFeature: isDisabledFeature
+  }, /*#__PURE__*/_react.default.createElement(_Shared.SearchBar, {
     isCustomLayout: true,
     lazyLoad: true,
     placeholder: t('SEARCH', 'Search'),
@@ -167,8 +197,9 @@ var BusinessMenuUI = function BusinessMenuUI(props) {
       isBorderTop: index === 0,
       active: menu.id === (currentMenu === null || currentMenu === void 0 ? void 0 : currentMenu.id),
       onClick: function onClick(e) {
-        return handleOpenEdit(e, menu);
-      }
+        return !isDisabledFeature && handleOpenEdit(e, menu);
+      },
+      isDisabledFeature: isDisabledFeature
     }, /*#__PURE__*/_react.default.createElement(_styles2.CheckboxWrapper, {
       className: "business_checkbox_control"
     }, /*#__PURE__*/_react.default.createElement(_styles.Checkbox, {
@@ -181,7 +212,7 @@ var BusinessMenuUI = function BusinessMenuUI(props) {
     onClick: function onClick() {
       return handleOpenOptions('option', {});
     }
-  }, t('ADD_MENU', 'Add menu'))), width >= 1000 ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showOption === 'option' && /*#__PURE__*/_react.default.createElement(_BusinessMenuOptions.BusinessMenuOptions, {
+  }, t('ADD_MENU', 'Add menu'))), isDisabledFeature && /*#__PURE__*/_react.default.createElement(_DisabledFeatureAlert.DisabledFeatureAlert, null), width >= 1000 ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showOption === 'option' && /*#__PURE__*/_react.default.createElement(_BusinessMenuOptions.BusinessMenuOptions, {
     open: showOption === 'option',
     business: business,
     menu: currentMenu,

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

@@ -9,7 +9,7 @@ exports.Title = exports.TabsContainer = exports.Tab = exports.SelectButtonGroup
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-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;
+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;
 
 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); }
 
@@ -45,7 +45,7 @@ var Title = _styledComponents.default.h1(_templateObject10 || (_templateObject10
 
 exports.Title = Title;
 
-var MeunItem = _styledComponents.default.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 0;\n  border-bottom: 1px solid ", ";\n  cursor: pointer;\n  user-select: none;\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  ", "\n\n  ", "\n\n  > svg {\n    color: ", ";\n    margin: 0 3px;\n    font-size: 13px;\n  }\n"])), function (props) {
+var MeunItem = _styledComponents.default.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 0;\n  border-bottom: 1px solid ", ";\n  cursor: pointer;\n  user-select: none;\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  ", "\n\n  ", "\n\n  > svg {\n    color: ", ";\n    margin: 0 3px;\n    font-size: 13px;\n  }\n\n  ", "\n"])), function (props) {
   return props.theme.colors.borderColor;
 }, function (props) {
   return props.theme.colors.lightPrimary;
@@ -65,66 +65,77 @@ var MeunItem = _styledComponents.default.div(_templateObject11 || (_templateObje
   });
 }, function (props) {
   return props.theme.colors.secundaryLight;
+}, function (_ref5) {
+  var isDisabledFeature = _ref5.isDisabledFeature;
+  return isDisabledFeature && (0, _styledComponents.css)(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n      cursor: not-allowed;\n      opacity: 0.4;\n      &:hover {\n        background-color: ", ";\n      }\n  "])), function (props) {
+    return props.theme.colors.white;
+  });
 });
 
 exports.MeunItem = MeunItem;
 
-var MenuName = _styledComponents.default.span(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  flex: 1;\n  font-size: 14px;\n"])));
+var MenuName = _styledComponents.default.span(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  flex: 1;\n  font-size: 14px;\n"])));
 
 exports.MenuName = MenuName;
 
-var CheckboxWrapper = _styledComponents.default.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  ", "\n"])), function (props) {
+var CheckboxWrapper = _styledComponents.default.div(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  ", "\n"])), function (props) {
   var _props$theme2;
 
-  return (_props$theme2 = props.theme) !== null && _props$theme2 !== void 0 && _props$theme2.rtl ? (0, _styledComponents.css)(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n    margin-left: 20px;\n  "]))) : (0, _styledComponents.css)(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n    margin-right: 20px;\n  "])));
+  return (_props$theme2 = props.theme) !== null && _props$theme2 !== void 0 && _props$theme2.rtl ? (0, _styledComponents.css)(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n    margin-left: 20px;\n  "]))) : (0, _styledComponents.css)(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n    margin-right: 20px;\n  "])));
 });
 
 exports.CheckboxWrapper = CheckboxWrapper;
 
-var AddMenuButton = _styledComponents.default.a(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n  cursor: pointer;\n  color: ", ";\n  margin: 15px 0;\n  display: inline-block;\n  text-decoration: none;\n  font-size: 14px;\n"])), function (props) {
+var AddMenuButton = _styledComponents.default.a(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n  cursor: pointer;\n  color: ", ";\n  margin: 15px 0;\n  display: inline-block;\n  text-decoration: none;\n  font-size: 14px;\n"])), function (props) {
   return props.theme.colors.lightGray;
 });
 
 exports.AddMenuButton = AddMenuButton;
 
-var TabsContainer = _styledComponents.default.div(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n  width: 100%;\n  display: flex;\n  border-bottom: 1px solid ", ";\n  margin-bottom: 10px;\n"])), function (props) {
+var TabsContainer = _styledComponents.default.div(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n  width: 100%;\n  display: flex;\n  border-bottom: 1px solid ", ";\n  margin-bottom: 10px;\n"])), function (props) {
   return props.theme.colors.borderColor;
 });
 
 exports.TabsContainer = TabsContainer;
 
-var Tab = _styledComponents.default.div(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n  user-select: none;\n  padding: 10px 0px;\n  cursor: pointer;\n  color: ", ";\n  font-size: 14px;\n  white-space: nowrap;\n  ", "\n\n  ", "\n\n  ", "\n"])), function (props) {
+var Tab = _styledComponents.default.div(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n  user-select: none;\n  padding: 10px 0px;\n  cursor: pointer;\n  color: ", ";\n  font-size: 14px;\n  white-space: nowrap;\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.headingColor;
 }, function (props) {
   var _props$theme3;
 
-  return (_props$theme3 = props.theme) !== null && _props$theme3 !== void 0 && _props$theme3.rtl ? (0, _styledComponents.css)(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n    margin-left: 30px;\n  "]))) : (0, _styledComponents.css)(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n    margin-right: 30px;\n  "])));
-}, function (_ref5) {
-  var active = _ref5.active;
-  return active && (0, _styledComponents.css)(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n    border-bottom: 2px solid;\n    font-weight: 500;\n  "])));
+  return (_props$theme3 = props.theme) !== null && _props$theme3 !== void 0 && _props$theme3.rtl ? (0, _styledComponents.css)(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n    margin-left: 30px;\n  "]))) : (0, _styledComponents.css)(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n    margin-right: 30px;\n  "])));
 }, function (_ref6) {
   var active = _ref6.active;
-  return !active && (0, _styledComponents.css)(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["\n    color: ", ";\n  "])), function (props) {
+  return active && (0, _styledComponents.css)(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["\n    border-bottom: 2px solid;\n    font-weight: 500;\n  "])));
+}, function (_ref7) {
+  var active = _ref7.active;
+  return !active && (0, _styledComponents.css)(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["\n    color: ", ";\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.lightGray;
   });
+}, function (_ref8) {
+  var disabledFeature = _ref8.disabledFeature;
+  return disabledFeature && (0, _styledComponents.css)(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["\n    cursor: not-allowed;\n  "])));
 });
 
 exports.Tab = Tab;
 
-var SearchBarWrapper = _styledComponents.default.div(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["\n  margin-bottom: 15px;\n"])));
+var SearchBarWrapper = _styledComponents.default.div(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["\n  margin-bottom: 15px;\n  ", "\n"])), function (_ref9) {
+  var isDisabledFeature = _ref9.isDisabledFeature;
+  return isDisabledFeature && (0, _styledComponents.css)(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["\n      cursor: not-allowed;\n      > div {\n        pointer-events: none;\n        opacity: 0.4;\n      }\n  "])));
+});
 
 exports.SearchBarWrapper = SearchBarWrapper;
 
-var SelectButtonGroup = _styledComponents.default.div(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  padding-bottom: 15px;\n  border-bottom: 1px solid ", ";\n  button {\n    font-size: 12px;\n\n    &:first-child {\n      ", "\n    }\n  }\n"])), function (props) {
+var SelectButtonGroup = _styledComponents.default.div(_templateObject29 || (_templateObject29 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  padding-bottom: 15px;\n  border-bottom: 1px solid ", ";\n  button {\n    font-size: 12px;\n\n    &:first-child {\n      ", "\n    }\n  }\n"])), function (props) {
   return props.theme.colors.borderColor;
 }, function (props) {
   var _props$theme4;
 
-  return (_props$theme4 = props.theme) !== null && _props$theme4 !== void 0 && _props$theme4.rtl ? (0, _styledComponents.css)(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["\n        margin-left: 16px;\n      "]))) : (0, _styledComponents.css)(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["\n        margin-right: 16px;\n      "])));
+  return (_props$theme4 = props.theme) !== null && _props$theme4 !== void 0 && _props$theme4.rtl ? (0, _styledComponents.css)(_templateObject30 || (_templateObject30 = _taggedTemplateLiteral(["\n        margin-left: 16px;\n      "]))) : (0, _styledComponents.css)(_templateObject31 || (_templateObject31 = _taggedTemplateLiteral(["\n        margin-right: 16px;\n      "])));
 });
 
 exports.SelectButtonGroup = SelectButtonGroup;

package/_modules/components/Stores/BusinessMenuOptions/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, _templateObject20, _templateObject21;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22;
 
 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); }
 
@@ -83,7 +83,7 @@ var TabInnerContainer = _styledComponents.default.div(_templateObject14 || (_tem
 
 exports.TabInnerContainer = TabInnerContainer;
 
-var Tab = _styledComponents.default.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  padding: 10px 0px;\n  cursor: pointer;\n  color: ", ";\n  white-space: nowrap;\n  font-size: 14px;\n  ", "\n\n  ", "\n\n  ", "\n"])), function (props) {
+var Tab = _styledComponents.default.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  padding: 10px 0px;\n  cursor: pointer;\n  color: ", ";\n  white-space: nowrap;\n  font-size: 14px;\n  ", "\n\n  ", "\n\n  ", "\n\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;
@@ -99,14 +99,19 @@ var Tab = _styledComponents.default.div(_templateObject15 || (_templateObject15
   return !active && (0, _styledComponents.css)(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n    color: ", ";\n  "])), function (props) {
     return props.theme.colors.lightGray;
   });
+}, function (_ref3) {
+  var disabledFeature = _ref3.disabledFeature;
+  return disabledFeature && (0, _styledComponents.css)(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n    background-color: ", ";\n    border-radius: 5px;\n    cursor: not-allowed;\n  "])), function (props) {
+    return props.theme.colors.disabled;
+  });
 });
 
 exports.Tab = Tab;
 
-var BusinessMenuBasicContainer = _styledComponents.default.div(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n"])));
+var BusinessMenuBasicContainer = _styledComponents.default.div(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n"])));
 
 exports.BusinessMenuBasicContainer = BusinessMenuBasicContainer;
 
-var BusinessScheduleWrapper = _styledComponents.default.div(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n  > div {\n    padding: 0px;\n\n    h1 {\n      font-size: 18px;\n      margin-top: 30px;\n    }\n\n    > div {\n      margin-top: 0px;\n    }\n  }\n"])));
+var BusinessScheduleWrapper = _styledComponents.default.div(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n  > div {\n    padding: 0px;\n\n    h1 {\n      font-size: 18px;\n      margin-top: 30px;\n    }\n\n    > div {\n      margin-top: 0px;\n    }\n  }\n"])));
 
 exports.BusinessScheduleWrapper = BusinessScheduleWrapper;

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

@@ -116,6 +116,10 @@ var BusinessPaymentMethodsUI = function BusinessPaymentMethodsUI(props) {
       _useConfig2 = _slicedToArray(_useConfig, 1),
       configs = _useConfig2[0].configs;
 
+  var _useSession = (0, _orderingComponentsAdminExternal.useSession)(),
+      _useSession2 = _slicedToArray(_useSession, 1),
+      user = _useSession2[0].user;
+
   var _useWindowSize = (0, _useWindowSize2.useWindowSize)(),
       width = _useWindowSize.width;
 
@@ -152,6 +156,13 @@ var BusinessPaymentMethodsUI = function BusinessPaymentMethodsUI(props) {
       isOpenWalletDetails = _useState12[0],
       setIsOpenWalletDetails = _useState12[1];
 
+  var featureName = 'payments_advanced';
+
+  var _useState13 = (0, _react.useState)(false),
+      _useState14 = _slicedToArray(_useState13, 2),
+      isDisabledFeature = _useState14[0],
+      setIsDisabledFeature = _useState14[1];
+
   var isWalletCashEnabled = (configs === null || configs === void 0 ? void 0 : (_configs$wallet_enabl = configs.wallet_enabled) === null || _configs$wallet_enabl === void 0 ? void 0 : _configs$wallet_enabl.value) === '1';
   var orderTypes = [{
     value: 1,
@@ -250,6 +261,16 @@ var BusinessPaymentMethodsUI = function BusinessPaymentMethodsUI(props) {
     });
     setSelectedBusinessPaymethod(updatedPaymethod);
   }, [businessPaymethodsState === null || businessPaymethodsState === void 0 ? void 0 : businessPaymethodsState.paymethods, selectedBusinessPaymethod]);
+  (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);
+        return;
+      }
+
+      setIsDisabledFeature(false);
+    }
+  }, [configs]);
   return /*#__PURE__*/_react.default.createElement(_styles2.MainContainer, null, /*#__PURE__*/_react.default.createElement(_styles2.PaymentMethodsContainer, {
     isOpenWalletDetails: isOpenWalletDetails
   }, /*#__PURE__*/_react.default.createElement("h1", null, t('PAYMETHODS', 'Payment methods')), /*#__PURE__*/_react.default.createElement(_styles2.SearchBarWrapper, null, /*#__PURE__*/_react.default.createElement(_Shared.SearchBar, {
@@ -329,7 +350,8 @@ var BusinessPaymentMethodsUI = function BusinessPaymentMethodsUI(props) {
     handleChangeSandbox: handleChangeSandbox,
     handleChangeInput: handleChangeInput,
     handleSaveClick: handleSaveClick,
-    handleDeletePaymethod: handleDeleteBusinessPaymethodOption
+    handleDeletePaymethod: handleDeleteBusinessPaymethodOption,
+    isDisabledFeature: isDisabledFeature
   }), selectedPaymethodGateway === 'apple_pay' && /*#__PURE__*/_react.default.createElement(_PaymentOptionMethods.PaymentOptionMethods, {
     sitesState: sitesState,
     open: isEdit,
@@ -347,7 +369,8 @@ var BusinessPaymentMethodsUI = function BusinessPaymentMethodsUI(props) {
     handleSaveClick: handleSaveClick,
     handleDeletePaymethod: handleDeleteBusinessPaymethodOption,
     id: selectedPaymethodGateway,
-    title: "Apple pay"
+    title: "Apple pay",
+    isDisabledFeature: isDisabledFeature
   }), selectedPaymethodGateway === 'google_pay' && /*#__PURE__*/_react.default.createElement(_PaymentOptionMethods.PaymentOptionMethods, {
     sitesState: sitesState,
     open: isEdit,
@@ -365,7 +388,8 @@ var BusinessPaymentMethodsUI = function BusinessPaymentMethodsUI(props) {
     handleSaveClick: handleSaveClick,
     handleDeletePaymethod: handleDeleteBusinessPaymethodOption,
     id: selectedPaymethodGateway,
-    title: "Google pay"
+    title: "Google pay",
+    isDisabledFeature: isDisabledFeature
   }), selectedPaymethodGateway === 'stripe_direct' && /*#__PURE__*/_react.default.createElement(_PaymentOptionStripeDirect.PaymentOptionStripeDirect, {
     sitesState: sitesState,
     open: isEdit,
@@ -381,7 +405,8 @@ var BusinessPaymentMethodsUI = function BusinessPaymentMethodsUI(props) {
     handleChangeSandbox: handleChangeSandbox,
     handleChangeInput: handleChangeInput,
     handleSaveClick: handleSaveClick,
-    handleDeletePaymethod: handleDeleteBusinessPaymethodOption
+    handleDeletePaymethod: handleDeleteBusinessPaymethodOption,
+    isDisabledFeature: isDisabledFeature
   }), selectedPaymethodGateway === 'paypal' && /*#__PURE__*/_react.default.createElement(_PaymentOptionPaypal.PaymentOptionPaypal, {
     open: isEdit,
     sitesState: sitesState,
@@ -397,7 +422,8 @@ var BusinessPaymentMethodsUI = function BusinessPaymentMethodsUI(props) {
     handleChangeSandbox: handleChangeSandbox,
     handleChangeInput: handleChangeInput,
     handleSaveClick: handleSaveClick,
-    handleDeletePaymethod: handleDeleteBusinessPaymethodOption
+    handleDeletePaymethod: handleDeleteBusinessPaymethodOption,
+    isDisabledFeature: isDisabledFeature
   }), selectedPaymethodGateway === 'paypal_express' && /*#__PURE__*/_react.default.createElement(_PaymethodOptionPaypalExpress.PaymethodOptionPaypalExpress, {
     open: isEdit,
     sitesState: sitesState,
@@ -413,7 +439,8 @@ var BusinessPaymentMethodsUI = function BusinessPaymentMethodsUI(props) {
     handleChangeSandbox: handleChangeSandbox,
     handleChangeInput: handleChangeInput,
     handleSaveClick: handleSaveClick,
-    handleDeletePaymethod: handleDeleteBusinessPaymethodOption
+    handleDeletePaymethod: handleDeleteBusinessPaymethodOption,
+    isDisabledFeature: isDisabledFeature
   }), selectedPaymethodGateway === 'stripe_redirect' && /*#__PURE__*/_react.default.createElement(_PaymethodOptionStripeRedirect.PaymethodOptionStripeRedirect, {
     open: isEdit,
     sitesState: sitesState,
@@ -429,7 +456,8 @@ var BusinessPaymentMethodsUI = function BusinessPaymentMethodsUI(props) {
     handleChangeSandbox: handleChangeSandbox,
     handleChangeInput: handleChangeInput,
     handleSaveClick: handleSaveClick,
-    handleDeletePaymethod: handleDeleteBusinessPaymethodOption
+    handleDeletePaymethod: handleDeleteBusinessPaymethodOption,
+    isDisabledFeature: isDisabledFeature
   }), selectedPaymethodGateway === 'stripe_connect' && /*#__PURE__*/_react.default.createElement(_PaymethodOptionStripeConnect.PaymethodOptionStripeConnect, {
     open: isEdit,
     sitesState: sitesState,
@@ -445,7 +473,8 @@ var BusinessPaymentMethodsUI = function BusinessPaymentMethodsUI(props) {
     handleStripeConnect: handleStripeConnect,
     handleChangeStripeInput: handleChangeStripeInput,
     handleStripeSave: handleStripeSave,
-    handleDeletePaymethod: handleDeleteBusinessPaymethodOption
+    handleDeletePaymethod: handleDeleteBusinessPaymethodOption,
+    isDisabledFeature: isDisabledFeature
   }), selectedPaymethodGateway === 'square' && /*#__PURE__*/_react.default.createElement(_PaymentOptionSquare.PaymentOptionSquare, {
     open: isEdit,
     sitesState: sitesState,
@@ -459,7 +488,8 @@ var BusinessPaymentMethodsUI = function BusinessPaymentMethodsUI(props) {
     handleDeletePaymethod: handleDeleteBusinessPaymethodOption,
     handleChangeBusinessPaymentState: handleChangeBusinessPaymentState,
     businessPaymethods: businessPaymethodsState === null || businessPaymethodsState === void 0 ? void 0 : businessPaymethodsState.paymethods,
-    handleSuccessPaymethodUpdate: handleSuccessPaymethodUpdate
+    handleSuccessPaymethodUpdate: handleSuccessPaymethodUpdate,
+    isDisabledFeature: isDisabledFeature
   }))) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isEdit && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Shared.Modal, {
     width: "80%",
     open: isEdit,
@@ -481,7 +511,8 @@ var BusinessPaymentMethodsUI = function BusinessPaymentMethodsUI(props) {
     handleChangeSandbox: handleChangeSandbox,
     handleChangeInput: handleChangeInput,
     handleSaveClick: handleSaveClick,
-    handleDeletePaymethod: handleDeleteBusinessPaymethodOption
+    handleDeletePaymethod: handleDeleteBusinessPaymethodOption,
+    isDisabledFeature: isDisabledFeature
   }), selectedPaymethodGateway === 'stripe_direct' && /*#__PURE__*/_react.default.createElement(_PaymentOptionStripeDirect.PaymentOptionStripeDirect, {
     sitesState: sitesState,
     open: isEdit,
@@ -497,7 +528,8 @@ var BusinessPaymentMethodsUI = function BusinessPaymentMethodsUI(props) {
     handleChangeSandbox: handleChangeSandbox,
     handleChangeInput: handleChangeInput,
     handleSaveClick: handleSaveClick,
-    handleDeletePaymethod: handleDeleteBusinessPaymethodOption
+    handleDeletePaymethod: handleDeleteBusinessPaymethodOption,
+    isDisabledFeature: isDisabledFeature
   }), selectedPaymethodGateway === 'paypal' && /*#__PURE__*/_react.default.createElement(_PaymentOptionPaypal.PaymentOptionPaypal, {
     open: isEdit,
     sitesState: sitesState,
@@ -513,7 +545,8 @@ var BusinessPaymentMethodsUI = function BusinessPaymentMethodsUI(props) {
     handleChangeSandbox: handleChangeSandbox,
     handleChangeInput: handleChangeInput,
     handleSaveClick: handleSaveClick,
-    handleDeletePaymethod: handleDeleteBusinessPaymethodOption
+    handleDeletePaymethod: handleDeleteBusinessPaymethodOption,
+    isDisabledFeature: isDisabledFeature
   }), selectedPaymethodGateway === 'paypal_express' && /*#__PURE__*/_react.default.createElement(_PaymethodOptionPaypalExpress.PaymethodOptionPaypalExpress, {
     open: isEdit,
     sitesState: sitesState,
@@ -529,7 +562,8 @@ var BusinessPaymentMethodsUI = function BusinessPaymentMethodsUI(props) {
     handleChangeSandbox: handleChangeSandbox,
     handleChangeInput: handleChangeInput,
     handleSaveClick: handleSaveClick,
-    handleDeletePaymethod: handleDeleteBusinessPaymethodOption
+    handleDeletePaymethod: handleDeleteBusinessPaymethodOption,
+    isDisabledFeature: isDisabledFeature
   }), selectedPaymethodGateway === 'stripe_redirect' && /*#__PURE__*/_react.default.createElement(_PaymethodOptionStripeRedirect.PaymethodOptionStripeRedirect, {
     open: isEdit,
     sitesState: sitesState,
@@ -545,7 +579,8 @@ var BusinessPaymentMethodsUI = function BusinessPaymentMethodsUI(props) {
     handleChangeSandbox: handleChangeSandbox,
     handleChangeInput: handleChangeInput,
     handleSaveClick: handleSaveClick,
-    handleDeletePaymethod: handleDeleteBusinessPaymethodOption
+    handleDeletePaymethod: handleDeleteBusinessPaymethodOption,
+    isDisabledFeature: isDisabledFeature
   }), selectedPaymethodGateway === 'stripe_connect' && /*#__PURE__*/_react.default.createElement(_PaymethodOptionStripeConnect.PaymethodOptionStripeConnect, {
     open: isEdit,
     sitesState: sitesState,
@@ -562,7 +597,8 @@ var BusinessPaymentMethodsUI = function BusinessPaymentMethodsUI(props) {
     handleStripeConnect: handleStripeConnect,
     handleChangeStripeInput: handleChangeStripeInput,
     handleStripeSave: handleStripeSave,
-    handleDeletePaymethod: handleDeleteBusinessPaymethodOption
+    handleDeletePaymethod: handleDeleteBusinessPaymethodOption,
+    isDisabledFeature: isDisabledFeature
   }), selectedPaymethodGateway === 'square' && /*#__PURE__*/_react.default.createElement(_PaymentOptionSquare.PaymentOptionSquare, {
     open: isEdit,
     sitesState: sitesState,
@@ -576,7 +612,8 @@ var BusinessPaymentMethodsUI = function BusinessPaymentMethodsUI(props) {
     handleDeletePaymethod: handleDeleteBusinessPaymethodOption,
     handleChangeBusinessPaymentState: handleChangeBusinessPaymentState,
     businessPaymethods: businessPaymethodsState === null || businessPaymethodsState === void 0 ? void 0 : businessPaymethodsState.paymethods,
-    handleSuccessPaymethodUpdate: handleSuccessPaymethodUpdate
+    handleSuccessPaymethodUpdate: handleSuccessPaymethodUpdate,
+    isDisabledFeature: isDisabledFeature
   })))), /*#__PURE__*/_react.default.createElement(_Shared.Alert, {
     title: t('PAYMETHODS', 'Payment methods'),
     content: alertState.content,

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

@@ -69,6 +69,8 @@ var BusinessProductList = function BusinessProductList(props) {
       handleParentProductAdd = props.handleParentProductAdd,
       allowSpreadColumns = props.allowSpreadColumns,
       getPageProducts = props.getPageProducts,
+      productsPerPage = props.productsPerPage,
+      setProductsPerPage = props.setProductsPerPage,
       categorySelected = props.categorySelected;
 
   var _useLanguage = (0, _orderingComponentsAdminExternal.useLanguage)(),
@@ -132,18 +134,13 @@ var BusinessProductList = function BusinessProductList(props) {
   var _useState7 = (0, _react.useState)(1),
       _useState8 = _slicedToArray(_useState7, 2),
       currentPage = _useState8[0],
-      setCurrentPage = _useState8[1];
-
-  var _useState9 = (0, _react.useState)(10),
-      _useState10 = _slicedToArray(_useState9, 2),
-      productsPerPage = _useState10[0],
-      setProductsPerPage = _useState10[1]; // Get current products
+      setCurrentPage = _useState8[1]; // Get current products
 
 
-  var _useState11 = (0, _react.useState)([]),
-      _useState12 = _slicedToArray(_useState11, 2),
-      currentProducts = _useState12[0],
-      setCurrentProducts = _useState12[1];
+  var _useState9 = (0, _react.useState)([]),
+      _useState10 = _slicedToArray(_useState9, 2),
+      currentProducts = _useState10[0],
+      setCurrentProducts = _useState10[1];
 
   var handleChangePage = function handleChangePage(page) {
     setCurrentPage(page);

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

@@ -83,12 +83,12 @@ var BusinessProductsCategories = function BusinessProductsCategories(props) {
     ref: containerRef
   }, /*#__PURE__*/_react.default.createElement(_styles.HeaderContainer, null, /*#__PURE__*/_react.default.createElement("h1", null, t('BUSINESS_CATEGORY', 'Business category'))), /*#__PURE__*/_react.default.createElement(_styles.ListContent, {
     ref: listRef
-  }, businessState.loading && _toConsumableArray(Array(6).keys()).map(function (i) {
+  }, (businessState === null || businessState === void 0 ? void 0 : businessState.loading) && _toConsumableArray(Array(6).keys()).map(function (i) {
     return /*#__PURE__*/_react.default.createElement(_SingleBusinessSubCateogries.SingleBusinessSubCateogries, {
       key: i,
       isSkeleton: true
     });
-  }), (businessState === null || businessState === void 0 ? void 0 : (_businessState$busine = businessState.business) === null || _businessState$busine === void 0 ? void 0 : (_businessState$busine2 = _businessState$busine.categories) === null || _businessState$busine2 === void 0 ? void 0 : _businessState$busine2.length) > 0 && (businessState === null || businessState === void 0 ? void 0 : businessState.business.categories.sort(function (a, b) {
+  }), !(businessState !== null && businessState !== void 0 && businessState.loading) && (businessState === null || businessState === void 0 ? void 0 : (_businessState$busine = businessState.business) === null || _businessState$busine === void 0 ? void 0 : (_businessState$busine2 = _businessState$busine.categories) === null || _businessState$busine2 === void 0 ? void 0 : _businessState$busine2.length) > 0 && (businessState === null || businessState === void 0 ? void 0 : businessState.business.categories.sort(function (a, b) {
     return a.rank - b.rank;
   }).map(function (category, i) {
     var _businessState$busine3, _businessState$busine4;