ordering-ui-admin-external 1.0.0 → 1.1.1

package/_modules/components/Settings/SiteSettingDetails/index.js

@@ -0,0 +1,85 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SiteSettingDetails = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _orderingComponentsAdminExternal = require("ordering-components-admin-external");
+
+var _reactLoadingSkeleton = _interopRequireDefault(require("react-loading-skeleton"));
+
+var _Shared = require("../../Shared");
+
+var _SettingsSelectUI = require("../SettingsSelectUI");
+
+var _styles = require("./styles");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var SiteSettingDetails = function SiteSettingDetails(props) {
+  var selectedSiteId = props.selectedSiteId,
+      siteConfigsState = props.siteConfigsState,
+      handleChangeConfig = props.handleChangeConfig;
+
+  var _useLanguage = (0, _orderingComponentsAdminExternal.useLanguage)(),
+      _useLanguage2 = _slicedToArray(_useLanguage, 2),
+      t = _useLanguage2[1];
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styles.SettingsListContainer, null, /*#__PURE__*/_react.default.createElement(_styles.GeneralTitle, null, /*#__PURE__*/_react.default.createElement("p", null, t('SETTINGS', 'All Settings'))), siteConfigsState.loading ? /*#__PURE__*/_react.default.createElement(_styles.SkeletonWrapper, null, _toConsumableArray(Array(6).keys()).map(function (i) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: i
+    }, /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
+      height: 14,
+      width: 200
+    }), /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
+      height: 30
+    }));
+  })) : /*#__PURE__*/_react.default.createElement(_styles.GeneralContainer, null, /*#__PURE__*/_react.default.createElement(_styles.FormContainer, null, siteConfigsState.configs.length > 0 && siteConfigsState.configs.map(function (config, i) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: i
+    }, config.type === 1 && /*#__PURE__*/_react.default.createElement(_styles.FormGroupText, {
+      className: "form-group"
+    }, /*#__PURE__*/_react.default.createElement("label", null, config === null || config === void 0 ? void 0 : config.name), /*#__PURE__*/_react.default.createElement("input", {
+      type: "text",
+      defaultValue: config === null || config === void 0 ? void 0 : config.value,
+      onChange: function onChange(e) {
+        return handleChangeConfig(e.target.value, selectedSiteId, config === null || config === void 0 ? void 0 : config.id);
+      },
+      className: "form-control",
+      placeholder: config === null || config === void 0 ? void 0 : config.name
+    })), config.type === 2 && /*#__PURE__*/_react.default.createElement(_SettingsSelectUI.SettingsSelectUI, {
+      config: config,
+      defaultValue: config === null || config === void 0 ? void 0 : config.value,
+      handleSelectChange: function handleSelectChange(value) {
+        return handleChangeConfig(value, selectedSiteId, config === null || config === void 0 ? void 0 : config.id);
+      }
+    }));
+  }))), !siteConfigsState.loading && siteConfigsState.error && /*#__PURE__*/_react.default.createElement(_Shared.NotFoundSource, {
+    content: t('NOT_FOUND_CONFIG', 'Sorry, we couldn\'t find the config.')
+  })));
+};
+
+exports.SiteSettingDetails = SiteSettingDetails;

package/_modules/components/Settings/SiteSettingDetails/styles.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SkeletonWrapper = exports.SettingsListContainer = exports.Required = exports.GeneralTitle = exports.GeneralContainer = exports.FormGroupText = exports.FormContainer = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+
+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 SettingsListContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  padding: 26px 20px;\n  overflow-x: hidden;\n"])));
+
+exports.SettingsListContainer = SettingsListContainer;
+
+var GeneralContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral([""])));
+
+exports.GeneralContainer = GeneralContainer;
+
+var GeneralTitle = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n\n  p {\n    font-weight: bold;\n    font-size: 20px;\n    color: ", ";\n    margin-bottom: 6px;\n  }\n"])), function (props) {
+  return props.theme.colors.headingColor;
+});
+
+exports.GeneralTitle = GeneralTitle;
+
+var FormContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  margin-top: 20px;\n"])));
+
+exports.FormContainer = FormContainer;
+
+var FormGroupText = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  margin-bottom: 20px;\n\n  label {\n    font-weight: 600;\n    margin-bottom: 10px;\n    font-size: 14px;\n    color: ", ";\n  }\n\n  input[type='text'] {\n    font-size: 14px;\n    height: 44px;\n    border: 1px solid #DEE2E6;\n    box-sizing: border-box;\n    border-radius: 7.6px;\n  }\n"])), function (props) {
+  return props.theme.colors.headingColor;
+});
+
+exports.FormGroupText = FormGroupText;
+
+var Required = _styledComponents.default.span(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  font-weight: 600;\n  font-size: 10px;\n  color: #E63757;\n"])));
+
+exports.Required = Required;
+
+var SkeletonWrapper = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  margin-top: 20px;\n\n  div {\n    margin-bottom: 15px;\n  }\n"])));
+
+exports.SkeletonWrapper = SkeletonWrapper;

package/_modules/components/Settings/SitesAuthSettings/index.js

@@ -0,0 +1,154 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SitesAuthSettings = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _orderingComponentsAdminExternal = require("ordering-components-admin-external");
+
+var _reactLoadingSkeleton = _interopRequireDefault(require("react-loading-skeleton"));
+
+var _BsChevronRight = _interopRequireDefault(require("@meronex/icons/bs/BsChevronRight"));
+
+var _Shared = require("../../Shared");
+
+var _SiteSettingDetails = require("../SiteSettingDetails");
+
+var _styles = require("./styles");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var SitesAuthSettingsUI = function SitesAuthSettingsUI(props) {
+  var sitesState = props.sitesState,
+      actionState = props.actionState,
+      setMoveDistance = props.setMoveDistance,
+      siteConfigsState = props.siteConfigsState,
+      handleGetSiteConfigs = props.handleGetSiteConfigs,
+      handleChangeConfig = props.handleChangeConfig;
+
+  var _useLanguage = (0, _orderingComponentsAdminExternal.useLanguage)(),
+      _useLanguage2 = _slicedToArray(_useLanguage, 2),
+      t = _useLanguage2[1];
+
+  var _useState = (0, _react.useState)(null),
+      _useState2 = _slicedToArray(_useState, 2),
+      selectedSiteId = _useState2[0],
+      setSelectedSiteId = _useState2[1];
+
+  var _useState3 = (0, _react.useState)({
+    open: false,
+    content: []
+  }),
+      _useState4 = _slicedToArray(_useState3, 2),
+      alertState = _useState4[0],
+      setAlertState = _useState4[1];
+
+  var handleOpenSiteSettingDetails = function handleOpenSiteSettingDetails(siteId) {
+    handleGetSiteConfigs(siteId);
+    setSelectedSiteId(siteId);
+    setMoveDistance(500);
+  };
+
+  var handleCloseDetails = function handleCloseDetails() {
+    setSelectedSiteId(null);
+    setMoveDistance(0);
+  };
+
+  (0, _react.useEffect)(function () {
+    if (actionState.error) {
+      setAlertState({
+        open: true,
+        content: actionState.error
+      });
+    }
+  }, [actionState.error]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styles.SitesListContainer, null, /*#__PURE__*/_react.default.createElement("h1", null, t('SITES_LOGIN_SIGNUP_SETTINGS', 'Sites Login/Signup Settings')), sitesState.loading ? /*#__PURE__*/_react.default.createElement(_styles.SitesWrapper, null, _toConsumableArray(Array(5).keys()).map(function (i) {
+    return /*#__PURE__*/_react.default.createElement(_styles.SiteItem, {
+      key: i
+    }, /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
+      width: 100,
+      height: 14
+    }));
+  })) : /*#__PURE__*/_react.default.createElement(_styles.SitesWrapper, null, sitesState.sites.map(function (site) {
+    return /*#__PURE__*/_react.default.createElement(_styles.SiteItem, {
+      key: site.id,
+      active: site.id === selectedSiteId,
+      onClick: function onClick() {
+        return handleOpenSiteSettingDetails(site.id);
+      }
+    }, /*#__PURE__*/_react.default.createElement("span", null, site.name), /*#__PURE__*/_react.default.createElement(_BsChevronRight.default, null));
+  }))), selectedSiteId && /*#__PURE__*/_react.default.createElement(_Shared.SideBar, {
+    isBorderShow: true,
+    open: selectedSiteId,
+    onClose: function onClose() {
+      return handleCloseDetails();
+    }
+  }, /*#__PURE__*/_react.default.createElement(_SiteSettingDetails.SiteSettingDetails, {
+    selectedSiteId: selectedSiteId,
+    siteConfigsState: siteConfigsState,
+    handleChangeConfig: handleChangeConfig
+  })), /*#__PURE__*/_react.default.createElement(_Shared.Alert, {
+    title: t('SETTINGS', 'Settings'),
+    content: alertState.content,
+    acceptText: t('ACCEPT', 'Accept'),
+    open: alertState.open,
+    onClose: function onClose() {
+      return setAlertState({
+        open: false,
+        content: []
+      });
+    },
+    onAccept: function onAccept() {
+      return setAlertState({
+        open: false,
+        content: []
+      });
+    },
+    closeOnBackdrop: false
+  }));
+};
+
+var SitesAuthSettings = function SitesAuthSettings(props) {
+  var sitesAuthSettinsProps = _objectSpread(_objectSpread({}, props), {}, {
+    UIComponent: SitesAuthSettingsUI
+  });
+
+  return /*#__PURE__*/_react.default.createElement(_orderingComponentsAdminExternal.SitesAuthSettings, sitesAuthSettinsProps);
+};
+
+exports.SitesAuthSettings = SitesAuthSettings;

package/_modules/components/Settings/SitesAuthSettings/styles.js

@@ -0,0 +1,49 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SitesWrapper = exports.SitesListContainer = exports.SiteItem = void 0;
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+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) } })); }
+
+var SitesListContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 26px 20px;\n  box-sizing: border-box;\n  width: 100%;\n  overflow-x: hidden;\n\n  h1 {\n    font-weight: 700;\n    font-size: 20px;\n    margin: 0;\n  }\n"])));
+
+exports.SitesListContainer = SitesListContainer;
+
+var SitesWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-top: 35px;\n  border: 1px solid ", ";\n  border-radius: 8px;\n  overflow: hidden;\n  > div:first-child {\n    border-top: none !important;\n  }\n\n  > div:last-child {\n    border-bottom: none !important;\n  } \n"])), function (props) {
+  return props.theme.colors.borderColor;
+});
+
+exports.SitesWrapper = SitesWrapper;
+
+var SiteItem = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  cursor: pointer;\n  padding: 12px 15px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  color: ", ";\n  border-bottom: 1px solid ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n  span {\n    font-size: 14px;\n  }\n  svg {\n    font-size: 20px;\n  }\n  ", "\n"])), function (props) {
+  return props.theme.colors.lightGray;
+}, 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)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    color: ", ";\n    border-top: 1px solid ", ";\n    border-bottom: 1px solid ", " !important;\n    background-color: ", ";\n  "])), function (props) {
+    return props.theme.colors.headingColor;
+  }, function (props) {
+    return props.theme.colors.primary;
+  }, function (props) {
+    return props.theme.colors.primary;
+  }, function (props) {
+    return props.theme.colors.lightPrimary;
+  });
+});
+
+exports.SiteItem = SiteItem;

package/_modules/components/SidebarMenu/index.js

@@ -46,7 +46,7 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 var SidebarMenu = function SidebarMenu(props) {
-  var _configs$dashboard_lo, _theme$images, _theme$images$logos, _sessionState$user, _sessionState$user4, _sessionState$user5, _sessionState$user7, _sessionState$user8, _sessionState$user9, _sessionState$user10, _sessionState$user11, _sessionState$user12, _sessionState$user13, _sessionState$user14, _sessionState$user15, _sessionState$user16, _sessionState$user17, _sessionState$user18, _sessionState$user19, _sessionState$user20, _sessionState$user21;
+  var _configs$dashboard_lo, _theme$images, _theme$images$logos, _sessionState$user, _sessionState$user4, _sessionState$user5, _sessionState$user7, _sessionState$user8, _sessionState$user9, _sessionState$user10, _sessionState$user11, _sessionState$user12, _sessionState$user13, _sessionState$user14, _sessionState$user15, _sessionState$user16, _sessionState$user17, _sessionState$user18, _sessionState$user19, _sessionState$user20, _sessionState$user21, _sessionState$user22;
 
   var location = (0, _reactRouterDom.useLocation)();
   var theme = (0, _styledComponents.useTheme)();
@@ -451,7 +451,15 @@ var SidebarMenu = function SidebarMenu(props) {
         });
       }
     }, item.title);
-  }))))), (sessionState === null || sessionState === void 0 ? void 0 : (_sessionState$user15 = sessionState.user) === null || _sessionState$user15 === void 0 ? void 0 : _sessionState$user15.level) === 0 && /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
+  }))))), (sessionState === null || sessionState === void 0 ? void 0 : (_sessionState$user15 = sessionState.user) === null || _sessionState$user15 === void 0 ? void 0 : _sessionState$user15.level) !== 5 && /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
+    className: "d-flex align-items-center",
+    variant: location.pathname === '/ordering-products' && 'primary',
+    onClick: function onClick() {
+      return handleGoToPage({
+        page: 'ordering_products'
+      });
+    }
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.WindowDock, null), /*#__PURE__*/_react.default.createElement("span", null, t('ORDERING_PRODUCTS', 'Ordering products'))), (sessionState === null || sessionState === void 0 ? void 0 : (_sessionState$user16 = sessionState.user) === null || _sessionState$user16 === void 0 ? void 0 : _sessionState$user16.level) === 0 && /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
     className: "d-flex align-items-center",
     variant: location.pathname === '/support' && 'primary',
     onClick: function onClick() {
@@ -459,13 +467,13 @@ var SidebarMenu = function SidebarMenu(props) {
         page: 'support'
       });
     }
-  }, /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.Headset, null), /*#__PURE__*/_react.default.createElement("span", null, t('SUPPORT', 'Support'))), (sessionState === null || sessionState === void 0 ? void 0 : (_sessionState$user16 = sessionState.user) === null || _sessionState$user16 === void 0 ? void 0 : _sessionState$user16.level) === 0 && /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.Headset, null), /*#__PURE__*/_react.default.createElement("span", null, t('SUPPORT', 'Support'))), (sessionState === null || sessionState === void 0 ? void 0 : (_sessionState$user17 = sessionState.user) === null || _sessionState$user17 === void 0 ? void 0 : _sessionState$user17.level) === 0 && /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
     className: "d-flex align-items-center",
     variant: false,
     onClick: function onClick() {
       return handleGoToLink('https://apps.tryordering.com/store/marketplace');
     }
-  }, /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.BoxArrowUpRight, null), /*#__PURE__*/_react.default.createElement("span", null, t('MARKETPLACE', 'Marketplace'))), (sessionState === null || sessionState === void 0 ? void 0 : (_sessionState$user17 = sessionState.user) === null || _sessionState$user17 === void 0 ? void 0 : _sessionState$user17.level) === 0 && /*#__PURE__*/_react.default.createElement(_reactBootstrap.Accordion, null, /*#__PURE__*/_react.default.createElement(_styles.MenuContainer, null, /*#__PURE__*/_react.default.createElement(ContextAwareToggle, {
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.BoxArrowUpRight, null), /*#__PURE__*/_react.default.createElement("span", null, t('MARKETPLACE', 'Marketplace'))), (sessionState === null || sessionState === void 0 ? void 0 : (_sessionState$user18 = sessionState.user) === null || _sessionState$user18 === void 0 ? void 0 : _sessionState$user18.level) === 0 && /*#__PURE__*/_react.default.createElement(_reactBootstrap.Accordion, null, /*#__PURE__*/_react.default.createElement(_styles.MenuContainer, null, /*#__PURE__*/_react.default.createElement(ContextAwareToggle, {
     eventKey: "11",
     active: location.pathname === '/downloads/free-products' || location.pathname === '/downloads/purchased-products'
   }, /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.CloudDownload, null), /*#__PURE__*/_react.default.createElement("span", null, t('DOWNLOADS', 'Downloads'))), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Accordion.Collapse, {
@@ -491,12 +499,12 @@ var SidebarMenu = function SidebarMenu(props) {
       });
     },
     variant: location.pathname === '/profile' && 'primary'
-  }, sessionState !== null && sessionState !== void 0 && (_sessionState$user18 = sessionState.user) !== null && _sessionState$user18 !== void 0 && _sessionState$user18.photo ? /*#__PURE__*/_react.default.createElement(_reactBootstrap.Image, {
-    src: sessionState === null || sessionState === void 0 ? void 0 : (_sessionState$user19 = sessionState.user) === null || _sessionState$user19 === void 0 ? void 0 : _sessionState$user19.photo,
+  }, sessionState !== null && sessionState !== void 0 && (_sessionState$user19 = sessionState.user) !== null && _sessionState$user19 !== void 0 && _sessionState$user19.photo ? /*#__PURE__*/_react.default.createElement(_reactBootstrap.Image, {
+    src: sessionState === null || sessionState === void 0 ? void 0 : (_sessionState$user20 = sessionState.user) === null || _sessionState$user20 === void 0 ? void 0 : _sessionState$user20.photo,
     width: "30px",
     height: "30px",
     roundedCircle: true
-  }) : /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.PersonFill, null), /*#__PURE__*/_react.default.createElement("span", null, sessionState === null || sessionState === void 0 ? void 0 : (_sessionState$user20 = sessionState.user) === null || _sessionState$user20 === void 0 ? void 0 : _sessionState$user20.name, " ", sessionState === null || sessionState === void 0 ? void 0 : (_sessionState$user21 = sessionState.user) === null || _sessionState$user21 === void 0 ? void 0 : _sessionState$user21.lastname)), /*#__PURE__*/_react.default.createElement(_LogoutButton.LogoutButton, null))))));
+  }) : /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.PersonFill, null), /*#__PURE__*/_react.default.createElement("span", null, sessionState === null || sessionState === void 0 ? void 0 : (_sessionState$user21 = sessionState.user) === null || _sessionState$user21 === void 0 ? void 0 : _sessionState$user21.name, " ", sessionState === null || sessionState === void 0 ? void 0 : (_sessionState$user22 = sessionState.user) === null || _sessionState$user22 === void 0 ? void 0 : _sessionState$user22.lastname)), /*#__PURE__*/_react.default.createElement(_LogoutButton.LogoutButton, null))))));
 };
 
 exports.SidebarMenu = SidebarMenu;

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

@@ -57,8 +57,7 @@ var BusinessessListingUI = function BusinessessListingUI(props) {
       getPageBusinesses = props.getPageBusinesses,
       isOpen = props.isOpen,
       close = props.close,
-      changeBusinessState = props.changeBusinessState,
-      defaultPageSize = props.defaultPageSize;
+      changeBusinessState = props.changeBusinessState;
 
   var _useLanguage = (0, _orderingComponentsAdminExternal.useLanguage)(),
       _useLanguage2 = _slicedToArray(_useLanguage, 2),
@@ -70,44 +69,13 @@ var BusinessessListingUI = function BusinessessListingUI(props) {
 
   var dropdownReference = (0, _react.useRef)();
 
-  var _useState = (0, _react.useState)(defaultPageSize !== null && defaultPageSize !== void 0 ? defaultPageSize : 6),
-      _useState2 = _slicedToArray(_useState, 2),
-      businessesPerPage = _useState2[0],
-      setBusinessesPerPage = _useState2[1];
-
-  var _useState3 = (0, _react.useState)(1),
-      _useState4 = _slicedToArray(_useState3, 2),
-      currentPage = _useState4[0],
-      setCurrentPage = _useState4[1];
-
-  var _useState5 = (0, _react.useState)([]),
-      _useState6 = _slicedToArray(_useState5, 2),
-      currentBusinessess = _useState6[0],
-      setCurrentBusinessess = _useState6[1];
-
-  var _useState7 = (0, _react.useState)(null),
-      _useState8 = _slicedToArray(_useState7, 2),
-      totalPages = _useState8[0],
-      setTotalPages = _useState8[1];
-
   var handleChangePage = function handleChangePage(page) {
-    if (pagination.from <= page * businessesPerPage && page * businessesPerPage <= pagination.to || pagination.from <= page * businessesPerPage && page * businessesPerPage > pagination.total) {
-      setCurrentPage(page);
-    } else {
-      getPageBusinesses(businessesPerPage, page);
-    }
+    getPageBusinesses(pagination.pageSize, page);
   };
 
   var handleChangePageSize = function handleChangePageSize(pageSize) {
-    setBusinessesPerPage(pageSize);
     var expectedPage = Math.ceil(pagination.from / pageSize);
-
-    if (pagination.from <= expectedPage * pageSize && expectedPage * pageSize <= pagination.to || pagination.from <= expectedPage * pageSize && expectedPage * pageSize > pagination.total) {
-      setCurrentPage(expectedPage);
-    } else {
-      setCurrentPage(expectedPage);
-      getPageBusinesses(pageSize, expectedPage);
-    }
+    getPageBusinesses(pageSize, expectedPage);
   };
 
   var closeSelect = function closeSelect(e) {
@@ -122,30 +90,11 @@ var BusinessessListingUI = function BusinessessListingUI(props) {
     }
   };
 
-  (0, _react.useEffect)(function () {
-    if (businessList.loading) return;
-
-    var _totalPages;
-
-    if (pagination !== null && pagination !== void 0 && pagination.total) {
-      _totalPages = Math.ceil((pagination === null || pagination === void 0 ? void 0 : pagination.total) / businessesPerPage);
-    } else if (businessList.businesses.length > 0) {
-      _totalPages = Math.ceil(businessList.businesses.length / businessesPerPage);
-    }
-
-    var indexOfLastPost = currentPage * businessesPerPage;
-    var indexOfFirstPost = indexOfLastPost - businessesPerPage;
-
-    var _currentBusinessess = businessList.businesses.slice(indexOfFirstPost, indexOfLastPost);
-
-    setTotalPages(_totalPages);
-    setCurrentBusinessess(_currentBusinessess);
-  }, [businessList, currentPage, pagination, businessesPerPage]);
   (0, _react.useEffect)(function () {
     if (!isOpen) return;
-    document.addEventListener('click', closeSelect);
+    document.addEventListener('mouseup', closeSelect);
     return function () {
-      return document.removeEventListener('click', closeSelect);
+      return document.removeEventListener('mouseup', closeSelect);
     };
   }, [isOpen]);
   return /*#__PURE__*/_react.default.createElement(_styles.PopMenuContatiner, {
@@ -156,7 +105,7 @@ var BusinessessListingUI = function BusinessessListingUI(props) {
     onSearch: onSearch,
     search: searchValue,
     placeholder: t('SEARCH', 'Search')
-  })), /*#__PURE__*/_react.default.createElement(_styles.BusinessList, null, businessList.loading ? _toConsumableArray(Array(businessesPerPage).keys()).map(function (i) {
+  })), /*#__PURE__*/_react.default.createElement(_styles.BusinessList, null, businessList.loading ? _toConsumableArray(Array(pagination.pageSize).keys()).map(function (i) {
     return /*#__PURE__*/_react.default.createElement(_styles.OptionItem, {
       key: i
     }, /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
@@ -172,7 +121,7 @@ var BusinessessListingUI = function BusinessessListingUI(props) {
       }
     }, /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
       height: 15,
-      width: 100
+      width: 140
     }), /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
       height: 12,
       width: 80,
@@ -180,7 +129,7 @@ var BusinessessListingUI = function BusinessessListingUI(props) {
         marginTop: '7px'
       }
     })));
-  }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, currentBusinessess && currentBusinessess.length > 0 && currentBusinessess.map(function (business) {
+  }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, businessList.businesses.map(function (business) {
     var _business$city;
 
     return /*#__PURE__*/_react.default.createElement(_styles.OptionItem, {
@@ -191,27 +140,29 @@ var BusinessessListingUI = function BusinessessListingUI(props) {
     }, /*#__PURE__*/_react.default.createElement("img", {
       src: optimizeImage(business === null || business === void 0 ? void 0 : business.logo, 'h_50,c_limit'),
       alt: ""
-    }), /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement("b", null, business === null || business === void 0 ? void 0 : business.name), business === null || business === void 0 ? void 0 : (_business$city = business.city) === null || _business$city === void 0 ? void 0 : _business$city.name));
+    }), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("b", null, business === null || business === void 0 ? void 0 : business.name), /*#__PURE__*/_react.default.createElement("p", null, business === null || business === void 0 ? void 0 : (_business$city = business.city) === null || _business$city === void 0 ? void 0 : _business$city.name)));
   }))), pagination && /*#__PURE__*/_react.default.createElement(_styles.WrapperPagination, {
     className: "pagination-container"
-  }, !businessList.loading && totalPages > 0 && /*#__PURE__*/_react.default.createElement(_Shared.Pagination, {
-    currentPage: currentPage,
-    totalPages: totalPages,
+  }, (pagination === null || pagination === void 0 ? void 0 : pagination.total) && /*#__PURE__*/_react.default.createElement(_Shared.Pagination, {
+    currentPage: pagination.currentPage,
+    totalPages: Math.ceil((pagination === null || pagination === void 0 ? void 0 : pagination.total) / pagination.pageSize),
     handleChangePage: handleChangePage,
-    defaultPageSize: businessesPerPage,
+    defaultPageSize: pagination.pageSize,
     handleChangePageSize: handleChangePageSize,
     isHidePagecontrol: true
   }))));
 };
 
 var BusinessSelectHeader = function BusinessSelectHeader(props) {
-  var _props$defaultPropsTo;
+  var _props$defaultPageSiz, _props$defaultPageSiz2, _props$defaultPropsTo;
 
   var businessListingProps = _objectSpread(_objectSpread({}, props), {}, {
     UIComponent: BusinessessListingUI,
     asDashboard: true,
-    initialPageSize: 50,
-    loadMorePageSize: 10,
+    loadMorePageSize: (_props$defaultPageSiz = props.defaultPageSize) !== null && _props$defaultPageSiz !== void 0 ? _props$defaultPageSiz : 6,
+    paginationSettings: {
+      pageSize: (_props$defaultPageSiz2 = props.defaultPageSize) !== null && _props$defaultPageSiz2 !== void 0 ? _props$defaultPageSiz2 : 6
+    },
     isSearchByBusinessName: true,
     isSearchByBusinessEmail: true,
     isSearchByBusinessPhone: true,

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

@@ -17,7 +17,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 PopMenuContatiner = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  left:0px;\n  background: ", ";\n  width: 240px;\n  border: 1px solid #E9ECEF;\n  box-sizing: border-box;\n  box-shadow: 0px 4px 10px rgb(0 0 0 / 12%);\n  border-radius: 7.6px;\n  padding: 8px;\n  z-index: 999;\n"])), function (props) {
+var PopMenuContatiner = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  left:0px;\n  background: ", ";\n  width: 280px;\n  border: 1px solid #E9ECEF;\n  box-sizing: border-box;\n  box-shadow: 0px 4px 10px rgb(0 0 0 / 12%);\n  border-radius: 7.6px;\n  padding: 8px;\n  z-index: 999;\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';
@@ -35,16 +35,16 @@ var BusinessSearch = _styledComponents.default.div(_templateObject3 || (_templat
 
 exports.BusinessSearch = BusinessSearch;
 
-var OptionItem = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  padding: 5px;\n  border-radius: 7.6px;\n  &:hover {\n    background-color: ", ";\n  }\n  img {\n    min-height: 38px;\n    min-width: 38px;\n    height: 38px;\n    width: 38px;\n    border-radius: 8px;\n    object-fit: cover;\n    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;\n    margin-right: 8px;\n    ", "\n  }\n  span {\n    display: flex;\n    flex-direction: column;\n    font-size: 12px;\n    max-width: 170px;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    overflow: hidden;\n    color: ", ";\n    b {\n      font-size: 14px;\n      line-height: 20px;\n      font-weight: 400;\n      color: ", ";\n    }\n  }\n"])), function (props) {
+var OptionItem = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  padding: 5px;\n  border-radius: 7.6px;\n  &:hover {\n    background-color: ", ";\n  }\n  img {\n    min-height: 38px;\n    min-width: 38px;\n    height: 38px;\n    width: 38px;\n    border-radius: 8px;\n    object-fit: cover;\n    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;\n    margin-right: 8px;\n    ", "\n  }\n  > div {\n    display: flex;\n    flex-direction: column;\n    max-width: 210px;\n    b {\n      font-size: 14px;\n      line-height: 20px;\n      font-weight: 400;\n      color: ", ";\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      overflow: hidden;\n    }\n    p {\n      margin: 0;\n      font-size: 12px;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      overflow: hidden;\n      color: ", ";\n    }\n  }\n  span {\n    display: flex;\n  }\n"])), function (props) {
   return props.theme.colors.lightPrimary;
 }, function (props) {
   var _props$theme;
 
   return ((_props$theme = props.theme) === null || _props$theme === void 0 ? void 0 : _props$theme.rtl) && (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      margin-right: 0px;\n      margin-left: 8px;\n    "])));
-}, function (props) {
-  return props.theme.colors.textGray;
 }, function (props) {
   return props.theme.colors.textBlack;
+}, function (props) {
+  return props.theme.colors.textGray;
 });
 
 exports.OptionItem = OptionItem;
@@ -53,6 +53,6 @@ var BusinessList = _styledComponents.default.div(_templateObject6 || (_templateO
 
 exports.BusinessList = BusinessList;
 
-var WrapperPagination = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: flex-end;\n  margin-top: 10px;\n  >div>div{\n    margin: 0;\n    button {\n      width: 20px;\n      height: 20px;\n      font-size: 12px;\n    }\n  }\n"])));
+var WrapperPagination = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  margin-top: 10px;\n  >div>div{\n    margin: 0;\n    button {\n      font-size: 12px;\n    }\n  }\n"])));
 
 exports.WrapperPagination = WrapperPagination;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-admin-external",
-  "version": "1.0.0",
+  "version": "1.1.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.0.0",
+    "ordering-components-admin-external": "1.1.1",
     "polished": "^3.6.7",
     "prop-types": "^15.7.2",
     "react-bootstrap": "^1.6.0",