ordering-ui-external 4.0.4 → 4.0.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/_modules/themes/five/src/components/BusinessBasicInformation/index.js +12 -2
  2. package/_modules/themes/five/src/components/BusinessBasicInformation/styles.js +5 -3
  3. package/_modules/themes/five/src/components/ProductForm/styles.js +5 -5
  4. package/package.json +1 -1
  5. package/src/themes/five/src/components/BusinessBasicInformation/index.js +19 -2
  6. package/src/themes/five/src/components/BusinessBasicInformation/styles.js +12 -0
  7. package/src/themes/five/src/components/ProductForm/styles.js +5 -5
package/_modules/themes/five/src/components/BusinessBasicInformation/index.js CHANGED
@@ -23,6 +23,8 @@ var _isBetween = _interopRequireDefault(require("dayjs/plugin/isBetween"));
23
23
  var _useWindowSize = require("../../../../../hooks/useWindowSize");
24
24
  var _BusinessInfoComponent = require("./BusinessInfoComponent");
25
25
  var _SearchComponent = require("./SearchComponent");
26
+ var _reactBootstrapIcons = require("react-bootstrap-icons");
27
+ var _Buttons = _interopRequireDefault(require("../../styles/Buttons"));
26
28
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
27
29
  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); }
28
30
  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; }
@@ -50,7 +52,9 @@ var BusinessBasicInformation = function BusinessBasicInformation(props) {
50
52
  categoryState = props.categoryState,
51
53
  errorQuantityProducts = props.errorQuantityProducts,
52
54
  isCustomerMode = props.isCustomerMode,
53
- isCustomLayout = props.isCustomLayout;
55
+ isCustomLayout = props.isCustomLayout,
56
+ setCategoryClicked = props.setCategoryClicked,
57
+ categoryClicked = props.categoryClicked;
54
58
  var business = businessState.business,
55
59
  loading = businessState.loading;
56
60
  var theme = (0, _styledComponents.useTheme)();
@@ -217,7 +221,13 @@ var BusinessBasicInformation = function BusinessBasicInformation(props) {
217
221
  onClick: function onClick() {
218
222
  return setOpenBusinessInformation(true);
219
223
  }
220
- }))), /*#__PURE__*/_react.default.createElement(_Modal.Modal, {
224
+ }))), windowSize.width <= 768 && categoryClicked && /*#__PURE__*/_react.default.createElement(_styles.BackButton, null, /*#__PURE__*/_react.default.createElement(_Buttons.default, {
225
+ color: "primary",
226
+ initialIcon: true,
227
+ onClick: function onClick() {
228
+ return setCategoryClicked(false);
229
+ }
230
+ }, /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.ArrowLeft, null), /*#__PURE__*/_react.default.createElement("div", null, t('GO_TO_ALL_CATEGORIES', 'Go to all categories')))), /*#__PURE__*/_react.default.createElement(_Modal.Modal, {
221
231
  width: "70%",
222
232
  open: openBusinessInformation,
223
233
  onClose: setOpenBusinessInformation,
package/_modules/themes/five/src/components/BusinessBasicInformation/styles.js CHANGED
@@ -4,10 +4,10 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- exports.WrapperSearch = exports.WrapperFloatingSearch = exports.WrapperBusinessLogo = exports.TitleWrapper = exports.SocialList = exports.SearchWrapper = exports.SearchIconWrapper = exports.SearchComponentContainer = exports.RibbonBox = exports.IconWrapper = exports.CategorySelectedContainer = exports.BusinessMoreDetail = exports.BusinessLogo = exports.BusinessInfoWrapper = exports.BusinessInfoItem = exports.BusinessInfoContent = exports.BusinessInfoContainer = exports.BusinessInfo = exports.BusinessDetail = exports.BusinessContent = exports.BusinessContainer = void 0;
7
+ exports.WrapperSearch = exports.WrapperFloatingSearch = exports.WrapperBusinessLogo = exports.TitleWrapper = exports.SocialList = exports.SearchWrapper = exports.SearchIconWrapper = exports.SearchComponentContainer = exports.RibbonBox = exports.IconWrapper = exports.CategorySelectedContainer = exports.BusinessMoreDetail = exports.BusinessLogo = exports.BusinessInfoWrapper = exports.BusinessInfoItem = exports.BusinessInfoContent = exports.BusinessInfoContainer = exports.BusinessInfo = exports.BusinessDetail = exports.BusinessContent = exports.BusinessContainer = exports.BackButton = void 0;
8
8
  var _react = _interopRequireDefault(require("react"));
9
9
  var _styledComponents = _interopRequireWildcard(require("styled-components"));
10
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35, _templateObject36, _templateObject37, _templateObject38, _templateObject39, _templateObject40, _templateObject41, _templateObject42, _templateObject43, _templateObject44, _templateObject45, _templateObject46, _templateObject47, _templateObject48, _templateObject49, _templateObject50, _templateObject51, _templateObject52, _templateObject53;
10
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35, _templateObject36, _templateObject37, _templateObject38, _templateObject39, _templateObject40, _templateObject41, _templateObject42, _templateObject43, _templateObject44, _templateObject45, _templateObject46, _templateObject47, _templateObject48, _templateObject49, _templateObject50, _templateObject51, _templateObject52, _templateObject53, _templateObject54;
11
11
  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); }
12
12
  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; }
13
13
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -186,4 +186,6 @@ var WrapperFloatingSearch = _styledComponents.default.div(_templateObject53 || (
186
186
  var theme = _ref14.theme;
187
187
  return theme.colors.white;
188
188
  });
189
- exports.WrapperFloatingSearch = WrapperFloatingSearch;
189
+ exports.WrapperFloatingSearch = WrapperFloatingSearch;
190
+ var BackButton = _styledComponents.default.div(_templateObject54 || (_templateObject54 = _taggedTemplateLiteral(["\n button {\n display: flex;\n flex-direction: row;\n align-items: center;}\n margin-top: 10px;\n svg {\n margin-right: 10px;\n }\n }\n"])));
191
+ exports.BackButton = BackButton;
package/_modules/themes/five/src/components/ProductForm/styles.js CHANGED
@@ -20,7 +20,7 @@ var TitleWrapper = _styledComponents.default.div(_templateObject3 || (_templateO
20
20
  exports.TitleWrapper = TitleWrapper;
21
21
  var WrapperImage = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n margin-left: -20px;\n margin-top: 20px;\n width: calc(100% + 40px);\n position: relative;\n"])));
22
22
  exports.WrapperImage = WrapperImage;
23
- var SwiperWrapper = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n position: relative;\n width: 100%;\n\n img{\n ", "\n }\n .mySwiper2 {\n height: 250px;\n width: 100%;\n ", "\n .swiper-slide-active {\n border-radius: 0px;\n img {\n border-radius: 0px;\n }\n }\n\n @media (min-width: 480px){\n ", "\n }\n\n @media (min-width: 576px) {\n height: 320px;\n ", "\n }\n ", "\n }\n \n\n .swiper {\n width: 100%;\n height: 500px;\n margin-left: auto;\n margin-right: auto;\n }\n\n .swiper-slide {\n background-size: cover;\n background-position: center;\n .active-img {\n ", "\n }\n }\n\n .product-thumb {\n box-sizing: border-box;\n padding: 30px 0px;\n margin: 0px 20px;\n\n .swiper-slide {\n display: flex;\n opacity: 0.8;\n border-radius: 7.6px;\n height: auto;\n cursor: pointer;\n overflow: hidden;\n\n img {\n border-radius: 7.6px;\n max-height: 70px;\n ", "\n }\n }\n\n .swiper-slide-thumb-active {\n opacity: 1;\n }\n }\n\n .swiper-slide img {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n ", "\n }\n\n .active-img {\n ", "\n }\n\n .swiper-button-next {\n background-image: url(", ");\n background-color: #d1d0d04d;\n background-repeat: no-repeat;\n background-position: 55% center;\n width: 32px;\n height: 32px;\n box-shadow: rgb(0 0 0 / 7%) 0px 4px 10px;\n border-radius: 50%;\n transition: all 0.2s ease;\n\n &:hover {\n transform: scale(1.05);\n }\n }\n\n .swiper-button-prev {\n background-image: url(", ");\n background-color: #d1d0d04d;\n background-repeat: no-repeat;\n background-position: 45% center;\n width: 32px;\n height: 32px;\n border-radius: 50%;\n box-shadow: rgb(0 0 0 / 7%) 0px 4px 10px;\n transition: all 0.2s ease;\n\n &:hover {\n transform: scale(1.05);\n }\n }\n\n .swiper-button-next::after, .swiper-button-prev::after {\n display: none;\n }\n"])), function (props) {
23
+ var SwiperWrapper = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n position: relative;\n width: 100%;\n\n img{\n ", "\n }\n .mySwiper2 {\n height: 250px;\n width: 100%;\n ", "\n .swiper-slide-active {\n border-radius: 0px;\n img {\n border-radius: 0px;\n }\n }\n\n @media (min-width: 480px){\n ", "\n }\n\n @media (min-width: 576px) {\n height: 320px;\n ", "\n }\n ", "\n }\n\n\n .swiper {\n width: 100%;\n height: 500px;\n margin-left: auto;\n margin-right: auto;\n }\n\n .swiper-slide {\n background-size: cover;\n background-position: center;\n .active-img {\n ", "\n }\n }\n\n .product-thumb {\n box-sizing: border-box;\n padding: 30px 0px;\n margin: 0px 20px;\n\n .swiper-slide {\n display: flex;\n opacity: 0.8;\n border-radius: 7.6px;\n height: auto;\n cursor: pointer;\n overflow: hidden;\n\n img {\n border-radius: 7.6px;\n max-height: 70px;\n ", "\n }\n }\n\n .swiper-slide-thumb-active {\n opacity: 1;\n }\n }\n\n .swiper-slide img {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n ", "\n }\n\n .active-img {\n ", "\n }\n\n .swiper-button-next {\n background-image: url(", ");\n background-color: #d1d0d04d;\n background-repeat: no-repeat;\n background-position: 55% center;\n width: 32px;\n height: 32px;\n box-shadow: rgb(0 0 0 / 7%) 0px 4px 10px;\n border-radius: 50%;\n transition: all 0.2s ease;\n\n &:hover {\n transform: scale(1.05);\n }\n }\n\n .swiper-button-prev {\n background-image: url(", ");\n background-color: #d1d0d04d;\n background-repeat: no-repeat;\n background-position: 45% center;\n width: 32px;\n height: 32px;\n border-radius: 50%;\n box-shadow: rgb(0 0 0 / 7%) 0px 4px 10px;\n transition: all 0.2s ease;\n\n &:hover {\n transform: scale(1.05);\n }\n }\n\n .swiper-button-next::after, .swiper-button-prev::after {\n display: none;\n }\n"])), function (props) {
24
24
  return props.isSoldOut && (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n filter: grayscale(1);\n "])));
25
25
  }, function (_ref) {
26
26
  var _theme$business_view, _theme$business_view$, _theme$business_view$2, _theme$business_view$3, _theme$business_view$4;
@@ -72,7 +72,7 @@ var SectionTitle = _styledComponents.default.h3(_templateObject18 || (_templateO
72
72
  exports.SectionTitle = SectionTitle;
73
73
  var ProductComment = _styledComponents.default.div(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n margin-bottom: 130px;\n\n textarea {\n margin-top: 8px;\n }\n\n p {\n font-weight: 300;\n margin-bottom: 5px;\n }\n\n @media (min-width: 577px) {\n margin-bottom: 62px;\n }\n\n @media (min-width: 769px) {\n margin-bottom: 0px;\n padding-bottom: 10px;\n }\n"])));
74
74
  exports.ProductComment = ProductComment;
75
- var ProductActions = _styledComponents.default.div(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 10px 0px;\n width: 100%;\n z-index: 9999997;\n\n position: fixed;\n bottom: 0;\n right: 0;\n width: 100%;\n background-color: #FFF;\n\n div.price {\n padding-top: 10px;\n color: ", ";\n h4 {\n margin: 0;\n font-weight: 600;\n font-size: 20px;\n line-height: 20px;\n }\n span {\n font-size: 13px;\n color: #D83520;\n line-height: 15px;\n }\n }\n\n div.incdec-control {\n width: 195px;\n display: flex;\n justify-content: space-around;\n align-items: center;\n position: relative;\n\n svg {\n width: 25px;\n height: 25px;\n cursor: pointer;\n }\n }\n\n div.price-amount-block {\n display: flex;\n justify-content: space-between;\n width: 70%\n }\n\n svg {\n color: ", ";\n }\n\n svg.disabled {\n pointer-events: none;\n color: #CED4DA;\n }\n\n button:disabled,\n button.disabled {\n background: #E9ECEF;\n border: 1px solid #E9ECEF;\n color: #B1BCCC;\n }\n\n button.add {\n width: 90%;\n padding: 5px 10px;\n margin-top: 10px;\n position: relative;\n\n &.soldout {\n width: 100%;\n pointer-events: none;\n }\n }\n .qty {\n flex: 1;\n text-align: center;\n display: flex;\n align-items: center;\n height: 38px;\n min-width: 60px;\n box-sizing: border-box;\n padding: 0;\n margin: 0 10px;\n }\n\n #address_control {\n button.add {\n width: calc(100% - 20px) !important;\n margin: 10px 10px 0 10px;\n }\n }\n \n div#address_list {\n padding: 0;\n }\n\n @media (min-width: 577px) {\n position: sticky;\n }\n\n @media (min-width: 1200px) {\n bottom: 0px;\n flex-direction: row;\n justify-content: space-between;\n border-top: 1px solid #E9ECEF;\n width: calc(100% + 40px);\n transform: translateX(-20px);\n padding: 10px 20px;\n box-sizing: border-box;\n\n ", "\n\n div.price {\n width: 25%;\n }\n\n button.add {\n width: 35%;\n margin-top: 0;\n }\n\n div.incdec-control {\n margin-right: 18%;\n &.show-weight-unit{\n width: 40%;\n }\n }\n }\n"])), function (props) {
75
+ var ProductActions = _styledComponents.default.div(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 10px 0px;\n width: 100%;\n z-index: 9999997;\n\n position: fixed;\n bottom: 0;\n right: 0;\n width: 100%;\n background-color: #FFF;\n\n div.price {\n padding-top: 10px;\n color: ", ";\n h4 {\n margin: 0;\n font-weight: 600;\n font-size: 20px;\n line-height: 20px;\n }\n span {\n font-size: 13px;\n color: #D83520;\n line-height: 15px;\n }\n }\n\n div.incdec-control {\n width: 195px;\n display: flex;\n justify-content: space-around;\n align-items: center;\n position: relative;\n\n svg {\n width: 25px;\n height: 25px;\n cursor: pointer;\n }\n }\n\n div.price-amount-block {\n display: flex;\n justify-content: space-between;\n width: 70%\n }\n\n svg {\n color: ", ";\n }\n\n svg.disabled {\n pointer-events: none;\n color: #CED4DA;\n }\n\n button:disabled,\n button.disabled {\n background: #E9ECEF;\n border: 1px solid #E9ECEF;\n color: #B1BCCC;\n }\n\n button.add {\n width: 90%;\n padding: 5px 10px;\n margin-top: 10px;\n position: relative;\n\n &.soldout {\n width: 100%;\n pointer-events: none;\n }\n }\n .qty {\n flex: 1;\n text-align: center;\n display: flex;\n align-items: center;\n height: 38px;\n min-width: 60px;\n box-sizing: border-box;\n padding: 0;\n margin: 0 10px;\n }\n\n #address_control {\n button.add {\n width: calc(100% - 20px) !important;\n margin: 10px 10px 0 10px;\n }\n }\n\n div#address_list {\n padding: 0;\n }\n\n @media (min-width: 577px) {\n position: sticky;\n }\n\n @media (min-width: 1200px) {\n bottom: 0px;\n flex-direction: row;\n justify-content: space-between;\n border-top: 1px solid #E9ECEF;\n width: calc(100% + 40px);\n transform: translateX(-20px);\n padding: 10px 20px;\n box-sizing: border-box;\n\n ", "\n\n div.price {\n width: 25%;\n }\n\n button.add {\n width: 35%;\n margin-top: 0;\n }\n\n div.incdec-control {\n margin-right: 18%;\n &.show-weight-unit{\n width: 40%;\n }\n }\n }\n"])), function (props) {
76
76
  var _props$theme;
77
77
  return (_props$theme = props.theme) === null || _props$theme === void 0 ? void 0 : _props$theme.colors.darkTextColor;
78
78
  }, function (props) {
@@ -96,7 +96,7 @@ var WrapperIngredients = _styledComponents.default.div(_templateObject25 || (_te
96
96
  return isProductSoldout && (0, _styledComponents.css)(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["\n border-radius: 10px;\n pointer-events: none;\n background: hsl(0, 0%, 72%);\n "])));
97
97
  });
98
98
  exports.WrapperIngredients = WrapperIngredients;
99
- var ProductTabContainer = _styledComponents.default.div(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["\n border-bottom: 1px solid #E9ECEF;\n position: sticky;\n top: 50px;\n background: white;\n z-index: 9999996;\n overflow: scroll hidden;\n width: 100%;\n ::-webkit-scrollbar {\n height: 0px;\n }\n\n #optionList {\n > div {\n white-space: nowrap;\n max-width: 200px;\n overflow: hidden;\n text-overflow: ellipsis;\n padding: 10px 0px;\n margin-right: 25px;\n ", "\n }\n }\n"])), function (props) {
99
+ var ProductTabContainer = _styledComponents.default.div(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["\n border-bottom: 1px solid #E9ECEF;\n position: sticky;\n top: 0px;\n background: white;\n z-index: 9999996;\n overflow: scroll hidden;\n width: 100%;\n ::-webkit-scrollbar {\n height: 0px;\n }\n\n #optionList {\n > div {\n white-space: nowrap;\n max-width: 200px;\n overflow: hidden;\n text-overflow: ellipsis;\n padding: 10px 0px;\n margin-right: 25px;\n ", "\n }\n }\n"])), function (props) {
100
100
  return props.theme.rtl && (0, _styledComponents.css)(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["\n margin-right: 0px;\n margin-left: 25px;\n "])));
101
101
  });
102
102
  exports.ProductTabContainer = ProductTabContainer;
@@ -126,12 +126,12 @@ var ProductTagWrapper = _styledComponents.default.div(_templateObject39 || (_tem
126
126
  return (_props$theme3 = props.theme) !== null && _props$theme3 !== void 0 && _props$theme3.rtl ? (0, _styledComponents.css)(_templateObject40 || (_templateObject40 = _taggedTemplateLiteral(["\n margin: 0 10px 0 20px;\n "]))) : (0, _styledComponents.css)(_templateObject41 || (_templateObject41 = _taggedTemplateLiteral(["\n margin: 0 20px 0 10px;\n "])));
127
127
  });
128
128
  exports.ProductTagWrapper = ProductTagWrapper;
129
- var WeightUnitSwitch = _styledComponents.default.div(_templateObject42 || (_templateObject42 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n width: auto;\n margin-left: 10px;\n \n ", "\n"])), function (props) {
129
+ var WeightUnitSwitch = _styledComponents.default.div(_templateObject42 || (_templateObject42 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n width: auto;\n margin-left: 10px;\n\n ", "\n"])), function (props) {
130
130
  var _props$theme4;
131
131
  return ((_props$theme4 = props.theme) === null || _props$theme4 === void 0 ? void 0 : _props$theme4.rtl) && (0, _styledComponents.css)(_templateObject43 || (_templateObject43 = _taggedTemplateLiteral(["\n margin-right: 10px;\n margin-left: 0;\n "])));
132
132
  });
133
133
  exports.WeightUnitSwitch = WeightUnitSwitch;
134
- var WeightUnitItem = _styledComponents.default.span(_templateObject44 || (_templateObject44 = _taggedTemplateLiteral(["\n display: inline-flex;\n width: fit-content;\n min-width: unset !important;\n font-size: 12px;\n line-height: 18px;\n padding: 2px 6px;\n cursor: pointer;\n \n ", "\n"])), function (_ref12) {
134
+ var WeightUnitItem = _styledComponents.default.span(_templateObject44 || (_templateObject44 = _taggedTemplateLiteral(["\n display: inline-flex;\n width: fit-content;\n min-width: unset !important;\n font-size: 12px;\n line-height: 18px;\n padding: 2px 6px;\n cursor: pointer;\n\n ", "\n"])), function (_ref12) {
135
135
  var active = _ref12.active;
136
136
  return active && (0, _styledComponents.css)(_templateObject45 || (_templateObject45 = _taggedTemplateLiteral(["\n background-color: ", "15;\n border-radius: 3px;\n color: ", ";\n "])), function (props) {
137
137
  return props.theme.colors.primary;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ordering-ui-external",
3
- "version": "4.0.4",
3
+ "version": "4.0.6",
4
4
  "description": "Ordering UI Components",
5
5
  "main": "./_modules/index.js",
6
6
  "exports": {
package/src/themes/five/src/components/BusinessBasicInformation/index.js CHANGED
@@ -19,7 +19,8 @@ import {
19
19
  BusinessMoreDetail,
20
20
  SearchComponentContainer,
21
21
  BusinessInfoWrapper,
22
- WrapperFloatingSearch
22
+ WrapperFloatingSearch,
23
+ BackButton
23
24
  } from './styles'
24
25
  import { BusinessPreorder } from '../BusinessPreorder'
25
26
 
@@ -29,6 +30,8 @@ import isBetween from 'dayjs/plugin/isBetween'
29
30
  import { useWindowSize } from '../../../../../hooks/useWindowSize'
30
31
  import { BusinessInfoComponent } from './BusinessInfoComponent'
31
32
  import { SearchComponent } from './SearchComponent'
33
+ import { ArrowLeft } from 'react-bootstrap-icons'
34
+ import Button from '../../styles/Buttons'
32
35
 
33
36
  dayjs.extend(timezone)
34
37
  dayjs.extend(isBetween)
@@ -49,7 +52,9 @@ export const BusinessBasicInformation = (props) => {
49
52
  categoryState,
50
53
  errorQuantityProducts,
51
54
  isCustomerMode,
52
- isCustomLayout
55
+ isCustomLayout,
56
+ setCategoryClicked,
57
+ categoryClicked
53
58
  } = props
54
59
  const { business, loading } = businessState
55
60
 
@@ -243,6 +248,18 @@ export const BusinessBasicInformation = (props) => {
243
248
  </BusinessMoreDetail>
244
249
  )}
245
250
  </BusinessInfoWrapper>
251
+ {(windowSize.width <= 768 && categoryClicked) && (
252
+ <BackButton>
253
+ <Button
254
+ color='primary'
255
+ initialIcon
256
+ onClick={() => setCategoryClicked(false)}
257
+ >
258
+ <ArrowLeft />
259
+ <div>{t('GO_TO_ALL_CATEGORIES', 'Go to all categories')}</div>
260
+ </Button>
261
+ </BackButton>
262
+ )}
246
263
  <Modal
247
264
  width='70%'
248
265
  open={openBusinessInformation}
package/src/themes/five/src/components/BusinessBasicInformation/styles.js CHANGED
@@ -561,3 +561,15 @@ export const WrapperFloatingSearch = styled.div`
561
561
  }
562
562
  }
563
563
  `
564
+
565
+ export const BackButton = styled.div`
566
+ button {
567
+ display: flex;
568
+ flex-direction: row;
569
+ align-items: center;}
570
+ margin-top: 10px;
571
+ svg {
572
+ margin-right: 10px;
573
+ }
574
+ }
575
+ `
package/src/themes/five/src/components/ProductForm/styles.js CHANGED
@@ -94,7 +94,7 @@ export const SwiperWrapper = styled.div`
94
94
  }
95
95
  `}
96
96
  }
97
-
97
+
98
98
 
99
99
  .swiper {
100
100
  width: 100%;
@@ -362,7 +362,7 @@ export const ProductActions = styled.div`
362
362
  margin: 10px 10px 0 10px;
363
363
  }
364
364
  }
365
-
365
+
366
366
  div#address_list {
367
367
  padding: 0;
368
368
  }
@@ -439,7 +439,7 @@ export const WrapperIngredients = styled.div`
439
439
  export const ProductTabContainer = styled.div`
440
440
  border-bottom: 1px solid #E9ECEF;
441
441
  position: sticky;
442
- top: 50px;
442
+ top: 0px;
443
443
  background: white;
444
444
  z-index: 9999996;
445
445
  overflow: scroll hidden;
@@ -587,7 +587,7 @@ export const WeightUnitSwitch = styled.div`
587
587
  flex-direction: column;
588
588
  width: auto;
589
589
  margin-left: 10px;
590
-
590
+
591
591
  ${props => props.theme?.rtl && css`
592
592
  margin-right: 10px;
593
593
  margin-left: 0;
@@ -601,7 +601,7 @@ export const WeightUnitItem = styled.span`
601
601
  line-height: 18px;
602
602
  padding: 2px 6px;
603
603
  cursor: pointer;
604
-
604
+
605
605
  ${({ active }) => active && css`
606
606
  background-color: ${props => props.theme.colors.primary}15;
607
607
  border-radius: 3px;