ordering-ui-external 1.1.5 → 1.1.7
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.
- package/_modules/themes/five/src/components/BusinessBasicInformation/index.js +33 -1
- package/_modules/themes/five/src/components/BusinessBasicInformation/styles.js +3 -1
- package/_modules/themes/five/src/components/BusinessProductsCategories/index.js +27 -11
- package/_modules/themes/five/src/components/BusinessProductsCategories/styles.js +1 -1
- package/_modules/themes/five/src/components/BusinessesListing/layouts/OriginalBusinessesListing/index.js +3 -7
- package/_modules/themes/five/src/components/OrderDetails/styles.js +65 -57
- package/_modules/themes/five/src/components/RenderProductsLayout/index.js +5 -4
- package/_modules/themes/five/src/components/RenderProductsLayout/styles.js +3 -1
- package/_modules/themes/five/src/components/SingleProductCard/index.js +2 -2
- package/package.json +1 -1
- package/src/themes/five/src/components/BusinessBasicInformation/index.js +29 -1
- package/src/themes/five/src/components/BusinessBasicInformation/styles.js +11 -0
- package/src/themes/five/src/components/BusinessProductsCategories/index.js +21 -11
- package/src/themes/five/src/components/BusinessProductsCategories/styles.js +3 -3
- package/src/themes/five/src/components/BusinessesListing/layouts/OriginalBusinessesListing/index.js +2 -4
- package/src/themes/five/src/components/OrderDetails/styles.js +70 -15
- package/src/themes/five/src/components/RenderProductsLayout/index.js +3 -2
- package/src/themes/five/src/components/RenderProductsLayout/styles.js +7 -3
- package/src/themes/five/src/components/SingleProductCard/index.js +1 -1
|
@@ -192,8 +192,36 @@ var BusinessBasicInformation = function BusinessBasicInformation(props) {
|
|
|
192
192
|
document.body.style.overflowY = openSearchProducts ? 'hidden' : 'auto';
|
|
193
193
|
}, [openSearchProducts]);
|
|
194
194
|
|
|
195
|
+
var handleScroll = function handleScroll() {
|
|
196
|
+
var searchElement = document.getElementById('search-component');
|
|
197
|
+
if (!searchElement) return;
|
|
198
|
+
var limit = window.pageYOffset >= (searchElement === null || searchElement === void 0 ? void 0 : searchElement.offsetTop) && window.pageYOffset > 0;
|
|
199
|
+
|
|
200
|
+
if (limit) {
|
|
201
|
+
var classAdded = searchElement.classList.contains('fixed-search');
|
|
202
|
+
!classAdded && searchElement.classList.add('fixed-search');
|
|
203
|
+
} else {
|
|
204
|
+
searchElement && searchElement.classList.remove('fixed-search');
|
|
205
|
+
}
|
|
206
|
+
};
|
|
207
|
+
|
|
208
|
+
(0, _react.useEffect)(function () {
|
|
209
|
+
window.addEventListener('scroll', handleScroll);
|
|
210
|
+
return function () {
|
|
211
|
+
return window.removeEventListener('scroll', handleScroll);
|
|
212
|
+
};
|
|
213
|
+
}, []);
|
|
214
|
+
(0, _react.useEffect)(function () {
|
|
215
|
+
window.scroll({
|
|
216
|
+
top: window.scrollY - 1,
|
|
217
|
+
left: 0
|
|
218
|
+
});
|
|
219
|
+
}, [sortByValue]);
|
|
220
|
+
|
|
195
221
|
var SearchComponent = function SearchComponent() {
|
|
196
|
-
return /*#__PURE__*/_react.default.createElement(_styles.WrapperSearch,
|
|
222
|
+
return /*#__PURE__*/_react.default.createElement(_styles.WrapperSearch, {
|
|
223
|
+
id: "search-component"
|
|
224
|
+
}, /*#__PURE__*/_react.default.createElement(_styles.SearchIconWrapper, {
|
|
197
225
|
onClick: function onClick() {
|
|
198
226
|
return setOpenSearchProducts(true);
|
|
199
227
|
}
|
|
@@ -319,6 +347,10 @@ var BusinessBasicInformation = function BusinessBasicInformation(props) {
|
|
|
319
347
|
onClose: function onClose() {
|
|
320
348
|
handleChangeSearch('');
|
|
321
349
|
setOpenSearchProducts(false);
|
|
350
|
+
window.scroll({
|
|
351
|
+
top: window.scrollY - 1,
|
|
352
|
+
left: 0
|
|
353
|
+
});
|
|
322
354
|
},
|
|
323
355
|
business: businessState.business
|
|
324
356
|
})), !isInfoShrunken && /*#__PURE__*/_react.default.createElement(BusinessInfoComponent, null), /*#__PURE__*/_react.default.createElement(_styles.BusinessContainer, {
|
|
@@ -90,7 +90,7 @@ var BusinessInfoContent = _styledComponents.default.div(_templateObject14 || (_t
|
|
|
90
90
|
|
|
91
91
|
exports.BusinessInfoContent = BusinessInfoContent;
|
|
92
92
|
|
|
93
|
-
var WrapperSearch = _styledComponents.default.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n margin: 15px 0px 0px;\n display: flex;\n align-items: flex-end;\n justify-content: flex-end;\n\n .search-bar {\n margin-right: 10px;\n ", "\n input {\n width: 100%;\n\n @media (min-width: 500px) {\n width: 250px;\n }\n }\n }\n\n div:last-child {\n text-align: right;\n\n ", "\n }\n\n #select-input {\n background-color: transparent !important;\n border: none;\n color: #748194 !important;\n\n #list {\n border-radius: 8px;\n }\n }\n"])), function (props) {
|
|
93
|
+
var WrapperSearch = _styledComponents.default.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n margin: 15px 0px 0px;\n display: flex;\n align-items: flex-end;\n justify-content: flex-end;\n box-sizing: border-box;\n\n .search-bar {\n margin-right: 10px;\n ", "\n input {\n width: 100%;\n\n @media (min-width: 500px) {\n width: 250px;\n }\n }\n }\n\n div:last-child {\n text-align: right;\n\n ", "\n }\n\n #select-input {\n background-color: transparent !important;\n border: none;\n color: #748194 !important;\n\n #list {\n border-radius: 8px;\n }\n }\n &.fixed-search {\n position: fixed;\n top: 0;\n left: 0;\n z-index: 1002;\n width: 100vw;\n margin-top: 0px;\n background-color: ", ";\n padding: 10px;\n }\n"])), function (props) {
|
|
94
94
|
var _props$theme4;
|
|
95
95
|
|
|
96
96
|
return ((_props$theme4 = props.theme) === null || _props$theme4 === void 0 ? void 0 : _props$theme4.rtl) && (0, _styledComponents.css)(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n margin-left: 10px;\n margin-right: 0;\n "])));
|
|
@@ -98,6 +98,8 @@ var WrapperSearch = _styledComponents.default.div(_templateObject15 || (_templat
|
|
|
98
98
|
var _props$theme5;
|
|
99
99
|
|
|
100
100
|
return ((_props$theme5 = props.theme) === null || _props$theme5 === void 0 ? void 0 : _props$theme5.rtl) && (0, _styledComponents.css)(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n text-align: left;\n "])));
|
|
101
|
+
}, function (props) {
|
|
102
|
+
return props.theme.colors.backgroundPage;
|
|
101
103
|
});
|
|
102
104
|
|
|
103
105
|
exports.WrapperSearch = WrapperSearch;
|
|
@@ -15,6 +15,10 @@ var _orderingComponentsExternal = require("ordering-components-external");
|
|
|
15
15
|
|
|
16
16
|
var _AutoScroll = require("../../../../../components/AutoScroll");
|
|
17
17
|
|
|
18
|
+
var _styledComponents = require("styled-components");
|
|
19
|
+
|
|
20
|
+
var _useWindowSize2 = require("../../../../../hooks/useWindowSize");
|
|
21
|
+
|
|
18
22
|
var _styles = require("./styles");
|
|
19
23
|
|
|
20
24
|
var _Tabs = require("../../styles/Tabs");
|
|
@@ -62,7 +66,9 @@ var BusinessProductsCategoriesUI = function BusinessProductsCategoriesUI(props)
|
|
|
62
66
|
openBusinessInformation = props.openBusinessInformation,
|
|
63
67
|
business = props.business,
|
|
64
68
|
handlerClickCategory = props.handlerClickCategory,
|
|
65
|
-
categorySelected = props.categorySelected
|
|
69
|
+
categorySelected = props.categorySelected,
|
|
70
|
+
useKioskApp = props.useKioskApp;
|
|
71
|
+
var theme = (0, _styledComponents.useTheme)();
|
|
66
72
|
|
|
67
73
|
var _useState = (0, _react.useState)({
|
|
68
74
|
id: null
|
|
@@ -71,6 +77,9 @@ var BusinessProductsCategoriesUI = function BusinessProductsCategoriesUI(props)
|
|
|
71
77
|
selectedCategory = _useState2[0],
|
|
72
78
|
setSelectedCateogry = _useState2[1];
|
|
73
79
|
|
|
80
|
+
var _useWindowSize = (0, _useWindowSize2.useWindowSize)(),
|
|
81
|
+
width = _useWindowSize.width;
|
|
82
|
+
|
|
74
83
|
var scrollTopSpan = 60;
|
|
75
84
|
|
|
76
85
|
var handleChangeCategory = function handleChangeCategory(category) {
|
|
@@ -126,12 +135,16 @@ var BusinessProductsCategoriesUI = function BusinessProductsCategoriesUI(props)
|
|
|
126
135
|
var _diff = -50;
|
|
127
136
|
|
|
128
137
|
var _moveDiff = 30;
|
|
138
|
+
|
|
139
|
+
var _paddDiff = scrollTopSpan + 10;
|
|
140
|
+
|
|
129
141
|
(_categories === null || _categories === void 0 ? void 0 : _categories.length) && _categories.some(function (category) {
|
|
130
|
-
var _document$getElementB3, _document$getElementB4;
|
|
142
|
+
var _document$getElementB3, _document$getElementB4, _document$getElementB5;
|
|
131
143
|
|
|
132
144
|
var topPos = category !== null && category !== void 0 && category.id ? (_document$getElementB3 = document.getElementById("category".concat(category.id))) === null || _document$getElementB3 === void 0 ? void 0 : _document$getElementB3.offsetTop : (_document$getElementB4 = document.getElementById('businessProductList')) === null || _document$getElementB4 === void 0 ? void 0 : _document$getElementB4.offsetTop;
|
|
145
|
+
var HeightOfEle = category !== null && category !== void 0 && category.id ? (_document$getElementB5 = document.getElementById("category".concat(category.id))) === null || _document$getElementB5 === void 0 ? void 0 : _document$getElementB5.clientHeight : 0;
|
|
133
146
|
|
|
134
|
-
if (topPos - windowTop <
|
|
147
|
+
if (windowTop > topPos - _paddDiff && windowTop < topPos + HeightOfEle - _paddDiff && category !== null && category !== void 0 && category.id) {
|
|
135
148
|
var choosedCategory = document.getElementById("category-menu".concat((category === null || category === void 0 ? void 0 : category.id) || '-all'));
|
|
136
149
|
var choosedCategoryLeft = (choosedCategory === null || choosedCategory === void 0 ? void 0 : choosedCategory.offsetLeft) || 0;
|
|
137
150
|
|
|
@@ -170,26 +183,29 @@ var BusinessProductsCategoriesUI = function BusinessProductsCategoriesUI(props)
|
|
|
170
183
|
};
|
|
171
184
|
|
|
172
185
|
(0, _react.useEffect)(function () {
|
|
186
|
+
if (typeof useKioskApp === 'undefined') return;
|
|
173
187
|
var styleSheet = document.getElementById('styles').sheet;
|
|
174
188
|
var style0 = '.sticky-prod-cat {';
|
|
175
189
|
style0 += 'position: fixed !important;';
|
|
176
|
-
style0 += 'top:
|
|
177
|
-
style0 += '
|
|
178
|
-
style0 += 'padding:
|
|
190
|
+
style0 += 'top: 0px !important;';
|
|
191
|
+
style0 += 'left: 0px !important;';
|
|
192
|
+
style0 += 'padding: 5px 5px 0px 5px !important;';
|
|
193
|
+
style0 += "width: calc(100% - ".concat(useKioskApp ? '50px' : '155px', ") !important;");
|
|
179
194
|
style0 += '}';
|
|
180
195
|
var style1 = '.sticky-prod-cart {';
|
|
181
196
|
style1 += 'position: fixed !important;';
|
|
182
|
-
style1 += 'top:
|
|
197
|
+
style1 += 'top: 38px !important;';
|
|
183
198
|
style1 += 'right: 2.5% !important;';
|
|
184
199
|
style1 += 'width: 28.5% !important;';
|
|
185
200
|
style1 += 'margin-top: 32px !important;';
|
|
186
201
|
style1 += '}';
|
|
187
202
|
var style2 = '.sticky-search {';
|
|
188
203
|
style2 += 'position: fixed !important;';
|
|
189
|
-
style2 += 'top:
|
|
190
|
-
style2 += 'right:
|
|
191
|
-
style2 += 'height: 50px !important;';
|
|
204
|
+
style2 += 'top: 0px !important;';
|
|
205
|
+
style2 += 'right: 0% !important;';
|
|
192
206
|
style2 += 'z-index: 9999 !important;';
|
|
207
|
+
style2 += 'width: 50px !important;';
|
|
208
|
+
style2 += "background-color: ".concat(theme.colors.backgroundPage, " !important;");
|
|
193
209
|
style2 += '}';
|
|
194
210
|
styleSheet.insertRule(style0, 0);
|
|
195
211
|
styleSheet.insertRule(style1, 1);
|
|
@@ -198,7 +214,7 @@ var BusinessProductsCategoriesUI = function BusinessProductsCategoriesUI(props)
|
|
|
198
214
|
return function () {
|
|
199
215
|
return window.removeEventListener('scroll', handleScroll);
|
|
200
216
|
};
|
|
201
|
-
}, []);
|
|
217
|
+
}, [useKioskApp]);
|
|
202
218
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (_props$beforeElements = props.beforeElements) === null || _props$beforeElements === void 0 ? void 0 : _props$beforeElements.map(function (BeforeElement, i) {
|
|
203
219
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
|
|
204
220
|
key: i
|
|
@@ -17,7 +17,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
|
17
17
|
|
|
18
18
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
19
19
|
|
|
20
|
-
var CategoriesContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n overflow-x: auto;\n padding: 5px 0px 0px 0px;\n background: ", ";\n z-index:
|
|
20
|
+
var CategoriesContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n overflow-x: auto;\n padding: 5px 0px 0px 0px;\n background: ", ";\n z-index: 1002;\n position: absolute;\n top: 0;\n border-bottom: 1px solid #D9D9D9;\n text-align: center;\n width: ", ";\n\n div.category {\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n padding: 10px 0px;\n margin: 0 15px;\n &:nth-of-type(1) {\n margin-left: 0;\n ", "\n }\n }\n\n div.special {\n ", "\n }\n\n /* @media (min-width: 381px) {\n padding: 15px 0px 0px 0px;\n } */\n @media (min-width: 992px) {\n width: ", ";\n }\n"])), function (props) {
|
|
21
21
|
return props.theme.colors.backgroundPage;
|
|
22
22
|
}, function (props) {
|
|
23
23
|
var _props$w;
|
|
@@ -90,7 +90,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
|
90
90
|
var PIXELS_TO_SCROLL = 300;
|
|
91
91
|
|
|
92
92
|
var BusinessesListingUI = function BusinessesListingUI(props) {
|
|
93
|
-
var
|
|
93
|
+
var _theme$business_listi, _theme$business_listi2, _theme$business_listi3, _theme$business_listi4, _businessesList$busin, _businessesList$busin3, _props$beforeElements, _props$beforeComponen, _theme$images2, _theme$images2$genera, _citiesState$cities2, _citiesState$cities3, _citiesState$cities3$, _configs$advanced_bus, _orderState$options4, _orderState$options4$, _configs$advanced_bus2, _orderState$options5, _orderState$options5$, _businessesList$busin6, _businessesList$busin7, _orderState$options8, _citiesState$cities4, _props$afterComponent, _props$afterElements;
|
|
94
94
|
|
|
95
95
|
var businessesList = props.businessesList,
|
|
96
96
|
paginationProps = props.paginationProps,
|
|
@@ -128,10 +128,6 @@ var BusinessesListingUI = function BusinessesListingUI(props) {
|
|
|
128
128
|
|
|
129
129
|
var theme = (0, _styledComponents.useTheme)();
|
|
130
130
|
|
|
131
|
-
var _useOrderingTheme = (0, _orderingComponentsExternal.useOrderingTheme)(),
|
|
132
|
-
_useOrderingTheme2 = _slicedToArray(_useOrderingTheme, 1),
|
|
133
|
-
orderingTheme = _useOrderingTheme2[0];
|
|
134
|
-
|
|
135
131
|
var _useState = (0, _react.useState)({
|
|
136
132
|
listOpen: false,
|
|
137
133
|
formOpen: false,
|
|
@@ -181,7 +177,7 @@ var BusinessesListingUI = function BusinessesListingUI(props) {
|
|
|
181
177
|
favoriteIds = _useState16[0],
|
|
182
178
|
setFavoriteIds = _useState16[1];
|
|
183
179
|
|
|
184
|
-
var hideCities =
|
|
180
|
+
var hideCities = (_theme$business_listi = theme === null || theme === void 0 ? void 0 : (_theme$business_listi2 = theme.business_listing_view) === null || _theme$business_listi2 === void 0 ? void 0 : (_theme$business_listi3 = _theme$business_listi2.components) === null || _theme$business_listi3 === void 0 ? void 0 : (_theme$business_listi4 = _theme$business_listi3.cities) === null || _theme$business_listi4 === void 0 ? void 0 : _theme$business_listi4.hidden) !== null && _theme$business_listi !== void 0 ? _theme$business_listi : true;
|
|
185
181
|
var businessesIds = isCustomLayout && businessesList.businesses && ((_businessesList$busin = businessesList.businesses) === null || _businessesList$busin === void 0 ? void 0 : _businessesList$busin.map(function (business) {
|
|
186
182
|
return business.id;
|
|
187
183
|
}));
|
|
@@ -387,7 +383,7 @@ var BusinessesListingUI = function BusinessesListingUI(props) {
|
|
|
387
383
|
page: 'business_search'
|
|
388
384
|
});
|
|
389
385
|
}
|
|
390
|
-
}),
|
|
386
|
+
}), !hideCities && (citiesState === null || citiesState === void 0 ? void 0 : (_citiesState$cities2 = citiesState.cities) === null || _citiesState$cities2 === void 0 ? void 0 : _citiesState$cities2.length) > 0 && /*#__PURE__*/_react.default.createElement(_Buttons.Button, {
|
|
391
387
|
color: "primary",
|
|
392
388
|
onClick: handleOpenCities
|
|
393
389
|
}, (citiesState === null || citiesState === void 0 ? void 0 : (_citiesState$cities3 = citiesState.cities) === null || _citiesState$cities3 === void 0 ? void 0 : (_citiesState$cities3$ = _citiesState$cities3.find(function (city) {
|
|
@@ -5,13 +5,13 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
value: true
|
|
7
7
|
});
|
|
8
|
-
exports.WrapperRightContainer = exports.WrapperLeftContainer = exports.WrapperDriver = exports.WrapperContainer = exports.TitleContainer = exports.StatusBar = exports.SkeletonWrapper = exports.SkeletonBlockWrapp = exports.SkeletonBlock = exports.ShareOrder = exports.SectionTitleContainer = exports.SectionTitle = exports.ReviewWrapper = exports.ReviewOrderLink = exports.ReOrder = exports.PlaceSpotSection = exports.PhotoBlock = exports.OrderProducts = exports.OrderPreferences = exports.OrderInfo = exports.OrderHistoryContainer = exports.OrderDriver = exports.OrderCustomer = exports.OrderBusiness = exports.OrderBill = exports.OrderActions = exports.NewOrder = exports.MyOrderActions = exports.MessagesIcon = exports.MapWrapper = exports.Map = exports.LinkWrapper = exports.HistoryItemWrapper = exports.HeaderTitle = exports.HeaderInfo = exports.ExclamationWrapper = exports.Exclamation = exports.Divider = exports.DetailWrapper = exports.Content = exports.Container = exports.CommentContainer = exports.ButtonWrapper = exports.BusinessWrapper = exports.BusinessTitle = exports.BusinessInfo = exports.BusinessExternalWrapper = exports.BtsOrderStatus = exports.ActionsBlock = void 0;
|
|
8
|
+
exports.WrapperRightContainer = exports.WrapperLeftContainer = exports.WrapperDriver = exports.WrapperContainer = exports.TitleContainer = exports.StatusBar = exports.SkeletonWrapper = exports.SkeletonBlockWrapp = exports.SkeletonBlock = exports.ShareOrder = exports.SectionTitleContainer = exports.SectionTitle = exports.ReviewWrapper = exports.ReviewOrderLink = exports.ReOrder = exports.PlaceSpotSection = exports.PhotoBlock = exports.OrderStatusAndLinkContainer = exports.OrderProducts = exports.OrderPreferences = exports.OrderInfo = exports.OrderIdSec = exports.OrderHistoryContainer = exports.OrderDriver = exports.OrderCustomer = exports.OrderBusiness = exports.OrderBill = exports.OrderActions = exports.NewOrder = exports.MyOrderActions = exports.MessagesIcon = exports.MapWrapper = exports.Map = exports.LinkWrapper = exports.HistoryItemWrapper = exports.HeaderTitle = exports.HeaderInfo = exports.ExclamationWrapper = exports.Exclamation = exports.Divider = exports.DetailWrapper = exports.Content = exports.Container = exports.CommentContainer = exports.ButtonWrapper = exports.BusinessWrapper = exports.BusinessTitle = exports.BusinessInfo = exports.BusinessExternalWrapper = exports.BtsOrderStatus = exports.ActionsBlock = void 0;
|
|
9
9
|
|
|
10
10
|
var _react = _interopRequireDefault(require("react"));
|
|
11
11
|
|
|
12
12
|
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
13
13
|
|
|
14
|
-
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, _templateObject55, _templateObject56, _templateObject57, _templateObject58, _templateObject59, _templateObject60;
|
|
14
|
+
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, _templateObject55, _templateObject56, _templateObject57, _templateObject58, _templateObject59, _templateObject60, _templateObject61, _templateObject62;
|
|
15
15
|
|
|
16
16
|
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); }
|
|
17
17
|
|
|
@@ -21,7 +21,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
|
21
21
|
|
|
22
22
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
23
23
|
|
|
24
|
-
var Container = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n margin: 20px 0;\n"])));
|
|
24
|
+
var Container = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n margin: 45px 0 20px;\n\n @media (min-width: 740px) {\n margin: 20px 0;\n }\n"])));
|
|
25
25
|
|
|
26
26
|
exports.Container = Container;
|
|
27
27
|
|
|
@@ -47,11 +47,7 @@ var OrderBusiness = _styledComponents.default.div(_templateObject6 || (_template
|
|
|
47
47
|
|
|
48
48
|
exports.OrderBusiness = OrderBusiness;
|
|
49
49
|
|
|
50
|
-
var BusinessWrapper = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n display: flex;\n width:
|
|
51
|
-
var _props$w;
|
|
52
|
-
|
|
53
|
-
return (_props$w = props.w) !== null && _props$w !== void 0 ? _props$w : '100%';
|
|
54
|
-
}, function (props) {
|
|
50
|
+
var BusinessWrapper = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n display: flex;\n width: 100%;\n display: flex;\n align-items: center;\n flex-direction: column;\n\n ", "\n ", "\n img {\n width: 100px;\n height: 100px;\n border-radius: 7.6px;\n margin-right: 0;\n\n @media (min-width: 400px) {\n margin-right: 40px;\n }\n }\n\n @media (min-width: 400px) {\n flex-direction: row;\n width: ", ";\n }\n"])), function (props) {
|
|
55
51
|
return props.borderBottom && (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n padding-bottom: 15px;\n border-bottom: 1px solid ", ";\n "])), function (props) {
|
|
56
52
|
return props.theme.colors.lightGray;
|
|
57
53
|
});
|
|
@@ -59,21 +55,25 @@ var BusinessWrapper = _styledComponents.default.div(_templateObject7 || (_templa
|
|
|
59
55
|
return props.borderTop && (0, _styledComponents.css)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n margin-top: 15px;\n border-top: 1px solid ", ";\n "])), function (props) {
|
|
60
56
|
return props.theme.colors.lightGray;
|
|
61
57
|
});
|
|
58
|
+
}, function (props) {
|
|
59
|
+
var _props$w;
|
|
60
|
+
|
|
61
|
+
return (_props$w = props.w) !== null && _props$w !== void 0 ? _props$w : '100%';
|
|
62
62
|
});
|
|
63
63
|
|
|
64
64
|
exports.BusinessWrapper = BusinessWrapper;
|
|
65
65
|
|
|
66
|
-
var BtsOrderStatus = _styledComponents.default.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n
|
|
66
|
+
var BtsOrderStatus = _styledComponents.default.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n align-items: center;\n margin-top: 20px;\n\n div + div {\n margin-left: 0;\n margin-top: 10px;\n }\n @media (min-width: 400px) {\n flex-direction: row;\n div + div {\n margin-left: 30px;\n margin-top: 0px;\n }\n }\n"])));
|
|
67
67
|
|
|
68
68
|
exports.BtsOrderStatus = BtsOrderStatus;
|
|
69
69
|
|
|
70
|
-
var BusinessInfo = _styledComponents.default.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n width: 100%;\n box-sizing: border-box;\n margin-right:
|
|
70
|
+
var BusinessInfo = _styledComponents.default.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n width: 100%;\n box-sizing: border-box;\n margin-right: 0;\n margin-top: 10px;\n\n h1,\n p {\n margin: 0;\n color: ", ";\n overflow-wrap: anywhere;\n }\n\n h2 {\n font-weight: 500;\n font-size: 18px;\n margin: 0px 0px 5px 0px;\n }\n p {\n font-size: 14px;\n margin-bottom: 5px;\n }\n\n @media (min-width: 400px) {\n margin-right: 15px;\n margin-top: 0;\n }\n"])), function (props) {
|
|
71
71
|
return props.theme.colors.darkTextColor;
|
|
72
72
|
});
|
|
73
73
|
|
|
74
74
|
exports.BusinessInfo = BusinessInfo;
|
|
75
75
|
|
|
76
|
-
var ActionsBlock = _styledComponents.default.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n justify-content: flex-start;\n
|
|
76
|
+
var ActionsBlock = _styledComponents.default.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n justify-content: flex-start;\n > * {\n margin-right: 5px;\n ", "\n }\n svg {\n font-size: 20px;\n cursor: pointer;\n color: #B1BCCC;\n }\n\n @media (min-width: 380px) {\n svg {\n font-size: 20px;\n }\n }\n"])), function (props) {
|
|
77
77
|
var _props$theme;
|
|
78
78
|
|
|
79
79
|
return ((_props$theme = props.theme) === null || _props$theme === void 0 ? void 0 : _props$theme.rtl) && (0, _styledComponents.css)(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n margin-left: 5px;\n margin-right: 0px;\n "])));
|
|
@@ -87,26 +87,30 @@ var OrderInfo = _styledComponents.default.div(_templateObject14 || (_templateObj
|
|
|
87
87
|
|
|
88
88
|
exports.OrderInfo = OrderInfo;
|
|
89
89
|
|
|
90
|
-
var
|
|
90
|
+
var OrderIdSec = _styledComponents.default.h1(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n font-size: 25px !important;\n @media (min-width: 350px) {\n font-size: 32px !important;\n }\n"])));
|
|
91
|
+
|
|
92
|
+
exports.OrderIdSec = OrderIdSec;
|
|
93
|
+
|
|
94
|
+
var ReviewOrderLink = _styledComponents.default.span(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n margin: 0;\n cursor: pointer;\n text-decoration-line: underline;\n user-select: none;\n ", "\n ", "\n"])), function (_ref) {
|
|
91
95
|
var active = _ref.active;
|
|
92
|
-
return active ? (0, _styledComponents.css)(
|
|
96
|
+
return active ? (0, _styledComponents.css)(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n color: ", ";\n "])), function (props) {
|
|
93
97
|
var _props$theme2;
|
|
94
98
|
|
|
95
99
|
return (_props$theme2 = props.theme) === null || _props$theme2 === void 0 ? void 0 : _props$theme2.colors.primary;
|
|
96
|
-
}) : (0, _styledComponents.css)(
|
|
100
|
+
}) : (0, _styledComponents.css)(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n color: #B1BCCC;\n cursor: not-allowed;\n span {\n pointer-events: none;\n }\n "])));
|
|
97
101
|
}, function (_ref2) {
|
|
98
102
|
var isMargin = _ref2.isMargin;
|
|
99
|
-
return isMargin && (0, _styledComponents.css)(
|
|
103
|
+
return isMargin && (0, _styledComponents.css)(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n margin: 0 10px 0 0;\n "])));
|
|
100
104
|
});
|
|
101
105
|
|
|
102
106
|
exports.ReviewOrderLink = ReviewOrderLink;
|
|
103
107
|
|
|
104
|
-
var StatusBarStyled = _styledComponents.default.div(
|
|
108
|
+
var StatusBarStyled = _styledComponents.default.div(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n height: 12px;\n margin: 18px 0px 8px;\n background: ", ";\n ", "\n"])), function (props) {
|
|
105
109
|
return "linear-gradient(to right, ".concat(props.theme.colors.primary, " ").concat(props.percentage, "%, ").concat(props.theme.colors.disabled, " ").concat(props.percentage, "%)");
|
|
106
110
|
}, function (props) {
|
|
107
111
|
var _props$theme3;
|
|
108
112
|
|
|
109
|
-
return ((_props$theme3 = props.theme) === null || _props$theme3 === void 0 ? void 0 : _props$theme3.rtl) && (0, _styledComponents.css)(
|
|
113
|
+
return ((_props$theme3 = props.theme) === null || _props$theme3 === void 0 ? void 0 : _props$theme3.rtl) && (0, _styledComponents.css)(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n background: linear-gradient(to left, ", " ", "%, ", " ", "%);\n "])), props.theme.colors.primary, props.percentage, props.theme.colors.disabled, props.percentage);
|
|
110
114
|
});
|
|
111
115
|
|
|
112
116
|
var StatusBar = function StatusBar(props) {
|
|
@@ -115,56 +119,56 @@ var StatusBar = function StatusBar(props) {
|
|
|
115
119
|
|
|
116
120
|
exports.StatusBar = StatusBar;
|
|
117
121
|
|
|
118
|
-
var SectionTitle = _styledComponents.default.h1(
|
|
122
|
+
var SectionTitle = _styledComponents.default.h1(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n margin: 20px 0 0 0;\n font-size: 20px;\n font-weight: 500;\n"])));
|
|
119
123
|
|
|
120
124
|
exports.SectionTitle = SectionTitle;
|
|
121
125
|
|
|
122
|
-
var SectionTitleContainer = _styledComponents.default.div(
|
|
126
|
+
var SectionTitleContainer = _styledComponents.default.div(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n h2 {\n font-size: 20px;\n font-weight: 500;\n margin: 0px 0px 5px 0px;\n }\n"])));
|
|
123
127
|
|
|
124
128
|
exports.SectionTitleContainer = SectionTitleContainer;
|
|
125
|
-
var OrderCustomer = (0, _styledComponents.default)(BusinessInfo)(
|
|
129
|
+
var OrderCustomer = (0, _styledComponents.default)(BusinessInfo)(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n border-radius: 7.6px;\n padding: 20px;\n box-shadow: 0px 4px 10px 0px #0000001F;\n margin-bottom: 30px;\n"])));
|
|
126
130
|
exports.OrderCustomer = OrderCustomer;
|
|
127
131
|
|
|
128
|
-
var PhotoBlock = _styledComponents.default.img(
|
|
132
|
+
var PhotoBlock = _styledComponents.default.img(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["\n border-radius: 7.6px;\n width: 100px;\n height: 100px;\n margin-right: 40px;\n"])));
|
|
129
133
|
|
|
130
134
|
exports.PhotoBlock = PhotoBlock;
|
|
131
135
|
|
|
132
|
-
var Map = _styledComponents.default.div(
|
|
136
|
+
var Map = _styledComponents.default.div(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["\n margin-bottom: 10px;\n width: 100%;\n height: 350px;\n > div {\n position: relative !important;\n width: 100% !important;\n height: 100% !important;\n }\n\n img {\n object-fit: cover;\n }\n"])));
|
|
133
137
|
|
|
134
138
|
exports.Map = Map;
|
|
135
|
-
var OrderDriver = (0, _styledComponents.default)(OrderCustomer)(
|
|
139
|
+
var OrderDriver = (0, _styledComponents.default)(OrderCustomer)(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral([""])));
|
|
136
140
|
exports.OrderDriver = OrderDriver;
|
|
137
141
|
|
|
138
|
-
var WrapperDriver = _styledComponents.default.div(
|
|
142
|
+
var WrapperDriver = _styledComponents.default.div(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["\n display: flex;\n width: 100%;\n align-items: center;\n\n div.photo {\n display: flex;\n align-items: center;\n justify-content: center;\n\n svg {\n width: 48px;\n height: 48px;\n margin-right: 10px;\n ", "\n }\n }\n"])), function (props) {
|
|
139
143
|
var _props$theme4;
|
|
140
144
|
|
|
141
|
-
return ((_props$theme4 = props.theme) === null || _props$theme4 === void 0 ? void 0 : _props$theme4.rtl) && (0, _styledComponents.css)(
|
|
145
|
+
return ((_props$theme4 = props.theme) === null || _props$theme4 === void 0 ? void 0 : _props$theme4.rtl) && (0, _styledComponents.css)(_templateObject29 || (_templateObject29 = _taggedTemplateLiteral(["\n margin-left: 10px;\n margin-right: 0;\n "])));
|
|
142
146
|
});
|
|
143
147
|
|
|
144
148
|
exports.WrapperDriver = WrapperDriver;
|
|
145
|
-
var OrderProducts = (0, _styledComponents.default)(OrderCustomer)(
|
|
149
|
+
var OrderProducts = (0, _styledComponents.default)(OrderCustomer)(_templateObject30 || (_templateObject30 = _taggedTemplateLiteral(["\n flex-direction: column;\n"])));
|
|
146
150
|
exports.OrderProducts = OrderProducts;
|
|
147
151
|
|
|
148
|
-
var OrderBill = _styledComponents.default.div(
|
|
152
|
+
var OrderBill = _styledComponents.default.div(_templateObject31 || (_templateObject31 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n margin-bottom: 25px;\n margin-top: 10px;\n table {\n width: 100%;\n font-size: 14px;\n td span {\n unicode-bidi: bidi-override;\n }\n tr td:nth-child(2) {\n text-align: right;\n ", "\n }\n }\n\n table.total {\n border-top: 1px solid #BFBFBF;\n margin-top: 15px;\n tr {\n font-size: 14px;\n td:nth-child(1) {\n font-weight: 600;\n font-size: 20px;\n padding-top: 10px;\n }\n td:nth-child(2) {\n font-weight: 600;\n font-size: 20px;\n padding-top: 10px;\n }\n }\n }\n\n table.comments {\n margin-top: 20px;\n align-items: center;\n tr {\n td:nth-child(1) {\n font-weight: bold;\n }\n }\n }\n\n @media (min-width: 678px) {\n table {\n font-size: 16px;\n }\n }\n"])), function (props) {
|
|
149
153
|
var _props$theme5;
|
|
150
154
|
|
|
151
|
-
return ((_props$theme5 = props.theme) === null || _props$theme5 === void 0 ? void 0 : _props$theme5.rtl) && (0, _styledComponents.css)(
|
|
155
|
+
return ((_props$theme5 = props.theme) === null || _props$theme5 === void 0 ? void 0 : _props$theme5.rtl) && (0, _styledComponents.css)(_templateObject32 || (_templateObject32 = _taggedTemplateLiteral(["\n text-align: left;\n "])));
|
|
152
156
|
});
|
|
153
157
|
|
|
154
158
|
exports.OrderBill = OrderBill;
|
|
155
159
|
|
|
156
|
-
var SkeletonBlock = _styledComponents.default.div(
|
|
160
|
+
var SkeletonBlock = _styledComponents.default.div(_templateObject33 || (_templateObject33 = _taggedTemplateLiteral(["\n width: ", ";\n border-radius: 16px;\n margin-bottom: 30px;\n display: flex;\n flex-direction: column;\n align-items: center;\n"])), function (_ref3) {
|
|
157
161
|
var width = _ref3.width;
|
|
158
162
|
return width && "".concat(width, "%");
|
|
159
163
|
});
|
|
160
164
|
|
|
161
165
|
exports.SkeletonBlock = SkeletonBlock;
|
|
162
166
|
|
|
163
|
-
var SkeletonBlockWrapp = _styledComponents.default.div(
|
|
167
|
+
var SkeletonBlockWrapp = _styledComponents.default.div(_templateObject34 || (_templateObject34 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n align-items: center;\n margin-top: 20px;\n line-height: 40px;\n"])));
|
|
164
168
|
|
|
165
169
|
exports.SkeletonBlockWrapp = SkeletonBlockWrapp;
|
|
166
170
|
|
|
167
|
-
var ShareOrder = _styledComponents.default.div(
|
|
171
|
+
var ShareOrder = _styledComponents.default.div(_templateObject35 || (_templateObject35 = _taggedTemplateLiteral(["\n display: flex;\n margin: 0 0 20px;\n justify-content: space-between;\n z-index: 1;\n\n div.wrap {\n & > div:first-child {\n left: 0;\n }\n button {\n border-radius: 7.6px;\n }\n }\n \n h1 {\n font-size: 15px;\n margin: 0px;\n }\n\n p {\n font-size: 13px;\n margin: 0px;\n }\n\n button {\n display: flex;\n justify-content: center;\n position: relative;\n font-size: 14px;\n align-items: center;\n background: ", ";\n\n svg {\n left: 0;\n margin-right: 6px;\n color: ", ";\n }\n\n &:hover {\n svg {\n color: #FFFFFF;\n }\n }\n }\n\n div.text {\n width: 60%;\n }\n\n div.wrap {\n display: flex;\n align-items: center;\n\n & > div:first-child {\n width: 100%;\n position: relative;\n div {\n right: 0px;\n left: initial;\n top: 35px;\n }\n }\n }\n\n @media (min-width: 1201px) {\n div.wrap {\n & > div:first-child {\n left: 0;\n }\n }\n }\n\n @media (min-width: 768px) {\n div.wrap {\n width: 30%;\n & > div:first-child {\n left: 0;\n }\n }\n\n h1 {\n font-size: 20px;\n }\n\n p {\n font-size: 18px;\n }\n\n button {\n font-size: 18px;\n width: 100%;\n svg {\n position: absolute;\n margin-left: 10px;\n }\n }\n }\n\n @media (min-width: 425px) {\n div.text {\n width: 70%;\n }\n\n h1 {\n font-size: 18px;\n }\n\n p {\n font-size: 15px;\n }\n }\n"])), function (props) {
|
|
168
172
|
return props.theme.colors.backgroundPage;
|
|
169
173
|
}, function (props) {
|
|
170
174
|
return props.theme.colors.primary;
|
|
@@ -172,11 +176,11 @@ var ShareOrder = _styledComponents.default.div(_templateObject34 || (_templateOb
|
|
|
172
176
|
|
|
173
177
|
exports.ShareOrder = ShareOrder;
|
|
174
178
|
|
|
175
|
-
var MessagesIcon = _styledComponents.default.span(
|
|
179
|
+
var MessagesIcon = _styledComponents.default.span(_templateObject36 || (_templateObject36 = _taggedTemplateLiteral(["\n position: relative;\n cursor: pointer;\n"])));
|
|
176
180
|
|
|
177
181
|
exports.MessagesIcon = MessagesIcon;
|
|
178
182
|
|
|
179
|
-
var ExclamationWrapper = _styledComponents.default.div(
|
|
183
|
+
var ExclamationWrapper = _styledComponents.default.div(_templateObject37 || (_templateObject37 = _taggedTemplateLiteral(["\n position: absolute;\n transform: translate(75%, -25%);\n svg{\n font-size: 16px;\n color: ", "\n }\n"])), function (props) {
|
|
180
184
|
var _props$theme6, _props$theme6$colors;
|
|
181
185
|
|
|
182
186
|
return (_props$theme6 = props.theme) === null || _props$theme6 === void 0 ? void 0 : (_props$theme6$colors = _props$theme6.colors) === null || _props$theme6$colors === void 0 ? void 0 : _props$theme6$colors.primary;
|
|
@@ -184,71 +188,75 @@ var ExclamationWrapper = _styledComponents.default.div(_templateObject36 || (_te
|
|
|
184
188
|
|
|
185
189
|
exports.ExclamationWrapper = ExclamationWrapper;
|
|
186
190
|
|
|
187
|
-
var WrapperLeftContainer = _styledComponents.default.div(
|
|
191
|
+
var WrapperLeftContainer = _styledComponents.default.div(_templateObject38 || (_templateObject38 = _taggedTemplateLiteral(["\n width: 100%;\n box-sizing: border-box;\n"])));
|
|
188
192
|
|
|
189
193
|
exports.WrapperLeftContainer = WrapperLeftContainer;
|
|
190
|
-
var WrapperRightContainer = (0, _styledComponents.default)(WrapperLeftContainer)(
|
|
194
|
+
var WrapperRightContainer = (0, _styledComponents.default)(WrapperLeftContainer)(_templateObject39 || (_templateObject39 = _taggedTemplateLiteral([""])));
|
|
191
195
|
exports.WrapperRightContainer = WrapperRightContainer;
|
|
192
196
|
|
|
193
|
-
var Divider = _styledComponents.default.div(
|
|
197
|
+
var Divider = _styledComponents.default.div(_templateObject40 || (_templateObject40 = _taggedTemplateLiteral(["\n height: 8px;\n background: #F8F9FA;\n width: calc(100% + 40px);\n margin-left: -20px;\n\n @media(min-width: 769px) {\n width: calc(100% + 80px);\n margin-left: -40px;\n }\n"])));
|
|
194
198
|
|
|
195
199
|
exports.Divider = Divider;
|
|
196
200
|
|
|
197
|
-
var MyOrderActions = _styledComponents.default.div(
|
|
201
|
+
var MyOrderActions = _styledComponents.default.div(_templateObject41 || (_templateObject41 = _taggedTemplateLiteral([""])));
|
|
198
202
|
|
|
199
203
|
exports.MyOrderActions = MyOrderActions;
|
|
200
204
|
|
|
201
|
-
var ReviewWrapper = _styledComponents.default.div(
|
|
205
|
+
var ReviewWrapper = _styledComponents.default.div(_templateObject42 || (_templateObject42 = _taggedTemplateLiteral(["\n .review-sent {\n border-radius: 7.6px;\n }\n"])));
|
|
202
206
|
|
|
203
207
|
exports.ReviewWrapper = ReviewWrapper;
|
|
204
208
|
|
|
205
|
-
var Exclamation = _styledComponents.default.div(
|
|
209
|
+
var Exclamation = _styledComponents.default.div(_templateObject43 || (_templateObject43 = _taggedTemplateLiteral(["\n position: relative;\n display: inline-flex;\n cursor: pointer;\n margin-left: 5px;\n top: 3px;\n"])));
|
|
206
210
|
|
|
207
211
|
exports.Exclamation = Exclamation;
|
|
208
212
|
|
|
209
|
-
var CommentContainer = _styledComponents.default.div(
|
|
213
|
+
var CommentContainer = _styledComponents.default.div(_templateObject44 || (_templateObject44 = _taggedTemplateLiteral(["\n margin: 0;\n h3 {\n margin: 0;\n }\n"])));
|
|
210
214
|
|
|
211
215
|
exports.CommentContainer = CommentContainer;
|
|
212
216
|
|
|
213
|
-
var NewOrder = _styledComponents.default.div(
|
|
217
|
+
var NewOrder = _styledComponents.default.div(_templateObject45 || (_templateObject45 = _taggedTemplateLiteral(["\n button {\n width: 160px;\n }\n"])));
|
|
214
218
|
|
|
215
219
|
exports.NewOrder = NewOrder;
|
|
216
220
|
|
|
217
|
-
var OrderActions = _styledComponents.default.div(
|
|
221
|
+
var OrderActions = _styledComponents.default.div(_templateObject46 || (_templateObject46 = _taggedTemplateLiteral(["\n display: flex;\n align-items: flex-end;\n justify-content: space-between;\n"])));
|
|
218
222
|
|
|
219
223
|
exports.OrderActions = OrderActions;
|
|
220
224
|
|
|
221
|
-
var TitleContainer = _styledComponents.default.div(
|
|
225
|
+
var TitleContainer = _styledComponents.default.div(_templateObject47 || (_templateObject47 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 90%;\n margin: auto;\n button {\n display: flex;\n align-items: center;\n font-size: 14px;\n justify-content: space-around;\n min-width: 200px;\n max-height: 53px;\n }\n > h1 {\n text-align: center;\n }\n @media (min-width: 650px) {\n width: 50%;\n }\n"])));
|
|
222
226
|
|
|
223
227
|
exports.TitleContainer = TitleContainer;
|
|
224
228
|
|
|
225
|
-
var ReOrder = _styledComponents.default.div(
|
|
229
|
+
var ReOrder = _styledComponents.default.div(_templateObject48 || (_templateObject48 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n margin-top: 20px;\n margin-bottom: 20px;\n flex-direction: column;\n\n button {\n padding: 5px 16px;\n min-width: unset;\n margin: 5px 5px;\n\n @media (min-width: 650px) {\n margin: 0px 5px;\n }\n }\n\n @media (min-width: 650px) {\n flex-direction: row;\n }\n"])));
|
|
226
230
|
|
|
227
231
|
exports.ReOrder = ReOrder;
|
|
228
232
|
|
|
229
|
-
var BusinessTitle = _styledComponents.default.div(
|
|
233
|
+
var BusinessTitle = _styledComponents.default.div(_templateObject49 || (_templateObject49 = _taggedTemplateLiteral(["\n display: flex;\n justify-content: space-between;\n"])));
|
|
230
234
|
|
|
231
235
|
exports.BusinessTitle = BusinessTitle;
|
|
232
|
-
var OrderPreferences = (0, _styledComponents.default)(OrderCustomer)(
|
|
236
|
+
var OrderPreferences = (0, _styledComponents.default)(OrderCustomer)(_templateObject50 || (_templateObject50 = _taggedTemplateLiteral([""])));
|
|
233
237
|
exports.OrderPreferences = OrderPreferences;
|
|
234
238
|
|
|
235
|
-
var HeaderTitle = _styledComponents.default.div(
|
|
239
|
+
var HeaderTitle = _styledComponents.default.div(_templateObject51 || (_templateObject51 = _taggedTemplateLiteral(["\n width: 100%;\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n h1{\n font-size: 20px;\n font-weight: 600;\n margin-bottom: 5px;\n }\n"])));
|
|
236
240
|
|
|
237
241
|
exports.HeaderTitle = HeaderTitle;
|
|
238
242
|
|
|
239
|
-
var PlaceSpotSection = _styledComponents.default.div(
|
|
243
|
+
var PlaceSpotSection = _styledComponents.default.div(_templateObject52 || (_templateObject52 = _taggedTemplateLiteral(["\n\n"])));
|
|
240
244
|
|
|
241
245
|
exports.PlaceSpotSection = PlaceSpotSection;
|
|
242
246
|
|
|
243
|
-
var
|
|
247
|
+
var OrderStatusAndLinkContainer = _styledComponents.default.div(_templateObject53 || (_templateObject53 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n\n @media (min-width: 450px) {\n flex-direction: row;\n }\n"])));
|
|
248
|
+
|
|
249
|
+
exports.OrderStatusAndLinkContainer = OrderStatusAndLinkContainer;
|
|
250
|
+
|
|
251
|
+
var LinkWrapper = _styledComponents.default.div(_templateObject54 || (_templateObject54 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n"])));
|
|
244
252
|
|
|
245
253
|
exports.LinkWrapper = LinkWrapper;
|
|
246
254
|
|
|
247
|
-
var OrderHistoryContainer = _styledComponents.default.div(
|
|
255
|
+
var OrderHistoryContainer = _styledComponents.default.div(_templateObject55 || (_templateObject55 = _taggedTemplateLiteral([""])));
|
|
248
256
|
|
|
249
257
|
exports.OrderHistoryContainer = OrderHistoryContainer;
|
|
250
258
|
|
|
251
|
-
var HistoryItemWrapper = _styledComponents.default.div(
|
|
259
|
+
var HistoryItemWrapper = _styledComponents.default.div(_templateObject56 || (_templateObject56 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n padding: 28px 23px;\n border-bottom: 1px solid ", ";\n\n > svg {\n width: 24px;\n height: 24px;\n color: ", ";\n }\n"])), function (props) {
|
|
252
260
|
return props.theme.colors.gray200;
|
|
253
261
|
}, function (props) {
|
|
254
262
|
return props.theme.colors.primary;
|
|
@@ -256,22 +264,22 @@ var HistoryItemWrapper = _styledComponents.default.div(_templateObject54 || (_te
|
|
|
256
264
|
|
|
257
265
|
exports.HistoryItemWrapper = HistoryItemWrapper;
|
|
258
266
|
|
|
259
|
-
var DetailWrapper = _styledComponents.default.div(
|
|
260
|
-
return props.theme.rtl && (0, _styledComponents.css)(
|
|
267
|
+
var DetailWrapper = _styledComponents.default.div(_templateObject57 || (_templateObject57 = _taggedTemplateLiteral(["\n margin-left: 50px;\n ", "\n\n h3 {\n font-weight: 600;\n font-size: 16px;\n line-height: 24px;\n margin: 0px;\n }\n p {\n font-weight: 400;\n font-size: 14px;\n line-height: 24px;\n margin: 0px;\n }\n"])), function (props) {
|
|
268
|
+
return props.theme.rtl && (0, _styledComponents.css)(_templateObject58 || (_templateObject58 = _taggedTemplateLiteral(["\n margin-left: 0px;\n margin-right: 50px;\n "])));
|
|
261
269
|
});
|
|
262
270
|
|
|
263
271
|
exports.DetailWrapper = DetailWrapper;
|
|
264
272
|
|
|
265
|
-
var ButtonWrapper = _styledComponents.default.div(
|
|
266
|
-
return props.theme.rtl && (0, _styledComponents.css)(
|
|
273
|
+
var ButtonWrapper = _styledComponents.default.div(_templateObject59 || (_templateObject59 = _taggedTemplateLiteral(["\n margin-top: 40px;\n button {\n width: 100%;\n height: 44px;\n position: relative;\n\n svg {\n position: absolute;\n top: 10px;\n font-size: 22px;\n right: 16px;\n ", "\n }\n }\n"])), function (props) {
|
|
274
|
+
return props.theme.rtl && (0, _styledComponents.css)(_templateObject60 || (_templateObject60 = _taggedTemplateLiteral(["\n left: 16px;\n right: initial;\n transform: rotate(180deg);\n "])));
|
|
267
275
|
});
|
|
268
276
|
|
|
269
277
|
exports.ButtonWrapper = ButtonWrapper;
|
|
270
278
|
|
|
271
|
-
var MapWrapper = _styledComponents.default.div(
|
|
279
|
+
var MapWrapper = _styledComponents.default.div(_templateObject61 || (_templateObject61 = _taggedTemplateLiteral(["\n width: 100%;\n margin-top: 20px;\n\n @media (min-width: 769px) {\n width: 50%;\n margin-top: 0px;\n }\n"])));
|
|
272
280
|
|
|
273
281
|
exports.MapWrapper = MapWrapper;
|
|
274
282
|
|
|
275
|
-
var BusinessExternalWrapper = _styledComponents.default.div(
|
|
283
|
+
var BusinessExternalWrapper = _styledComponents.default.div(_templateObject62 || (_templateObject62 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n width: 100%;\n\n @media (min-width: 769px) {\n width: 50%;\n }\n"])));
|
|
276
284
|
|
|
277
285
|
exports.BusinessExternalWrapper = BusinessExternalWrapper;
|
|
@@ -84,7 +84,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
|
84
84
|
var layoutOne = 'groceries';
|
|
85
85
|
|
|
86
86
|
var RenderProductsLayout = function RenderProductsLayout(props) {
|
|
87
|
-
var _configs$use_parent_c, _configs$use_parent_c2, _orderingTheme$theme, _orderingTheme$theme$, _orderingTheme$theme$2, _orderingTheme$theme$3, _orderingTheme$theme$4, _orderingTheme$theme$5, _orderingTheme$theme2, _orderingTheme$theme3, _orderingTheme$theme4, _orderingTheme$theme5, _orderingTheme$theme6, _orderingTheme$theme7, _orderingTheme$theme8, _orderingTheme$theme9, _orderingTheme$theme10, _orderingTheme$theme11, _orderingTheme$theme12, _orderingTheme$theme13, _orderingTheme$theme14, _orderingTheme$theme15, _orderingTheme$theme16, _orderingTheme$theme17, _orderingTheme$theme18, _orderingTheme$theme19, _orderingTheme$theme20, _orderingTheme$theme21, _orderingTheme$theme22, _orderingTheme$theme23, _orderingTheme$theme24, _orderingTheme$theme25, _orderingTheme$theme26, _orderingTheme$theme27, _orderingTheme$theme28, _orderingTheme$theme29, _orderingTheme$theme30,
|
|
87
|
+
var _configs$use_parent_c, _configs$use_parent_c2, _orderingTheme$theme, _orderingTheme$theme$, _orderingTheme$theme$2, _orderingTheme$theme$3, _orderingTheme$theme$4, _orderingTheme$theme$5, _orderingTheme$theme2, _orderingTheme$theme3, _orderingTheme$theme4, _orderingTheme$theme5, _orderingTheme$theme6, _orderingTheme$theme7, _orderingTheme$theme8, _orderingTheme$theme9, _orderingTheme$theme10, _orderingTheme$theme11, _orderingTheme$theme12, _orderingTheme$theme13, _orderingTheme$theme14, _orderingTheme$theme15, _orderingTheme$theme16, _orderingTheme$theme17, _orderingTheme$theme18, _orderingTheme$theme19, _orderingTheme$theme20, _orderingTheme$theme21, _orderingTheme$theme22, _orderingTheme$theme23, _orderingTheme$theme24, _orderingTheme$theme25, _orderingTheme$theme26, _orderingTheme$theme27, _orderingTheme$theme28, _orderingTheme$theme29, _orderingTheme$theme30, _theme$business_view$, _theme$business_view, _theme$business_view$2, _theme$business_view$3, _businessState$busine, _businessState$busine2, _business$categories, _theme$defaultLanguag, _theme$defaultLanguag2, _business$professiona, _theme$defaultLanguag3, _theme$defaultLanguag4, _currentCart$products, _business$professiona2, _business$categories2, _theme$defaultLanguag5, _theme$defaultLanguag6, _theme$defaultLanguag7, _theme$defaultLanguag8, _currentCart$products2, _currentCart$products3;
|
|
88
88
|
|
|
89
89
|
var errors = props.errors,
|
|
90
90
|
isError = props.isError,
|
|
@@ -156,12 +156,12 @@ var RenderProductsLayout = function RenderProductsLayout(props) {
|
|
|
156
156
|
layoutOne: frontLayout === layoutOne && isUseParentCategory
|
|
157
157
|
};
|
|
158
158
|
var showCartOnProductList = !(orderingTheme !== null && orderingTheme !== void 0 && (_orderingTheme$theme26 = orderingTheme.theme) !== null && _orderingTheme$theme26 !== void 0 && (_orderingTheme$theme27 = _orderingTheme$theme26.business_view) !== null && _orderingTheme$theme27 !== void 0 && (_orderingTheme$theme28 = _orderingTheme$theme27.components) !== null && _orderingTheme$theme28 !== void 0 && (_orderingTheme$theme29 = _orderingTheme$theme28.cart) !== null && _orderingTheme$theme29 !== void 0 && (_orderingTheme$theme30 = _orderingTheme$theme29.components) !== null && _orderingTheme$theme30 !== void 0 && _orderingTheme$theme30.hidden);
|
|
159
|
-
var hideBusinessNearCity =
|
|
159
|
+
var hideBusinessNearCity = (_theme$business_view$ = theme === null || theme === void 0 ? void 0 : (_theme$business_view = theme.business_view) === null || _theme$business_view === void 0 ? void 0 : (_theme$business_view$2 = _theme$business_view.components) === null || _theme$business_view$2 === void 0 ? void 0 : (_theme$business_view$3 = _theme$business_view$2.near_business) === null || _theme$business_view$3 === void 0 ? void 0 : _theme$business_view$3.hidden) !== null && _theme$business_view$ !== void 0 ? _theme$business_view$ : true;
|
|
160
160
|
var BusinessLayoutCategories = businessLayout.layoutOne ? _groceries.BusinessProductsCategories : _BusinessProductsCategories.BusinessProductsCategories;
|
|
161
161
|
var BusinessLayoutProductsList = businessLayout.layoutOne ? _groceries2.BusinessProductsList : _BusinessProductsList.BusinessProductsList;
|
|
162
162
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !isLoading && (business === null || business === void 0 ? void 0 : business.id) && /*#__PURE__*/_react.default.createElement(_styles.WrappLayout, {
|
|
163
163
|
isCartOnProductsList: isCartOnProductsList
|
|
164
|
-
},
|
|
164
|
+
}, !hideBusinessNearCity && !useKioskApp && /*#__PURE__*/_react.default.createElement(_styles.NearBusiness, null, /*#__PURE__*/_react.default.createElement(_BusinessesListing.BusinessesListing, {
|
|
165
165
|
logosLayout: true,
|
|
166
166
|
propsToFetch: ['id', 'logo', 'location', 'timezone', 'schedule', 'open', 'slug'],
|
|
167
167
|
cityId: businessState === null || businessState === void 0 ? void 0 : (_businessState$busine = businessState.business) === null || _businessState$busine === void 0 ? void 0 : _businessState$busine.city_id,
|
|
@@ -317,7 +317,8 @@ var RenderProductsLayout = function RenderProductsLayout(props) {
|
|
|
317
317
|
openBusinessInformation: openBusinessInformation,
|
|
318
318
|
openCategories: openCategories,
|
|
319
319
|
business: business,
|
|
320
|
-
currentCart: currentCart
|
|
320
|
+
currentCart: currentCart,
|
|
321
|
+
useKioskApp: useKioskApp
|
|
321
322
|
})), /*#__PURE__*/_react.default.createElement(_styles.BusinessCategoryProductWrapper, null, /*#__PURE__*/_react.default.createElement(_styles.WrapContent, null, /*#__PURE__*/_react.default.createElement(BusinessLayoutProductsList, {
|
|
322
323
|
categories: [{
|
|
323
324
|
id: null,
|
|
@@ -95,7 +95,9 @@ var ProfessionalFilterWrapper = _styledComponents.default.div(_templateObject16
|
|
|
95
95
|
|
|
96
96
|
exports.ProfessionalFilterWrapper = ProfessionalFilterWrapper;
|
|
97
97
|
|
|
98
|
-
var WrapperSearchAbsolute = _styledComponents.default.div(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n position: absolute;\n right: 5px;\n top:
|
|
98
|
+
var WrapperSearchAbsolute = _styledComponents.default.div(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n position: absolute;\n right: 5px;\n top: 0px;\n display: flex;\n justify-content: center;\n align-items: flex-end;\n width: 40px;\n height: 52px;\n background-color: ", ";\n box-sizing: border-box;\n padding-bottom: 5px;\n"])), function (props) {
|
|
99
|
+
return props.theme.colors.backgroundPage;
|
|
100
|
+
});
|
|
99
101
|
|
|
100
102
|
exports.WrapperSearchAbsolute = WrapperSearchAbsolute;
|
|
101
103
|
|
|
@@ -66,7 +66,7 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
|
|
|
66
66
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
67
67
|
|
|
68
68
|
var SingleProductCardUI = function SingleProductCardUI(props) {
|
|
69
|
-
var
|
|
69
|
+
var _theme$business_view$, _theme$business_view, _theme$business_view$2, _theme$business_view$3, _theme$business_view$4, _theme$business_view$5, _product$ribbon, _product$ribbon2, _product$ribbon3, _product$ribbon4, _product$ribbon5, _product$ribbon6, _theme$defaultLanguag, _theme$defaultLanguag2, _theme$defaultLanguag3, _theme$defaultLanguag4;
|
|
70
70
|
|
|
71
71
|
var product = props.product,
|
|
72
72
|
isSoldOut = props.isSoldOut,
|
|
@@ -138,7 +138,7 @@ var SingleProductCardUI = function SingleProductCardUI(props) {
|
|
|
138
138
|
}, 0);
|
|
139
139
|
var totalBalance = (productBalance || 0) - removeToBalance;
|
|
140
140
|
var maxCartProductConfig = (stateConfig.configs.max_product_amount ? parseInt(stateConfig.configs.max_product_amount) : 100) - totalBalance;
|
|
141
|
-
var hideAddButton =
|
|
141
|
+
var hideAddButton = (_theme$business_view$ = theme === null || theme === void 0 ? void 0 : (_theme$business_view = theme.business_view) === null || _theme$business_view === void 0 ? void 0 : (_theme$business_view$2 = _theme$business_view.components) === null || _theme$business_view$2 === void 0 ? void 0 : (_theme$business_view$3 = _theme$business_view$2.products) === null || _theme$business_view$3 === void 0 ? void 0 : (_theme$business_view$4 = _theme$business_view$3.components) === null || _theme$business_view$4 === void 0 ? void 0 : (_theme$business_view$5 = _theme$business_view$4.add_to_cart_button) === null || _theme$business_view$5 === void 0 ? void 0 : _theme$business_view$5.hidden) !== null && _theme$business_view$ !== void 0 ? _theme$business_view$ : true; // const productsRows = theme?.layouts?.business_view?.components?.products?.components?.layout?.rows
|
|
142
142
|
|
|
143
143
|
var maxCartProductInventory = (product !== null && product !== void 0 && product.inventoried ? product === null || product === void 0 ? void 0 : product.quantity : undefined) - totalBalance;
|
|
144
144
|
maxCartProductInventory = !isNaN(maxCartProductInventory) ? maxCartProductInventory : maxCartProductConfig;
|
package/package.json
CHANGED
|
@@ -121,9 +121,33 @@ export const BusinessBasicInformation = (props) => {
|
|
|
121
121
|
document.body.style.overflowY = openSearchProducts ? 'hidden' : 'auto'
|
|
122
122
|
}, [openSearchProducts])
|
|
123
123
|
|
|
124
|
+
const handleScroll = () => {
|
|
125
|
+
const searchElement = document.getElementById('search-component')
|
|
126
|
+
if (!searchElement) return
|
|
127
|
+
const limit = window.pageYOffset >= searchElement?.offsetTop && window.pageYOffset > 0
|
|
128
|
+
if (limit) {
|
|
129
|
+
const classAdded = searchElement.classList.contains('fixed-search')
|
|
130
|
+
!classAdded && searchElement.classList.add('fixed-search')
|
|
131
|
+
} else {
|
|
132
|
+
searchElement && searchElement.classList.remove('fixed-search')
|
|
133
|
+
}
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
useEffect(() => {
|
|
137
|
+
window.addEventListener('scroll', handleScroll)
|
|
138
|
+
return () => window.removeEventListener('scroll', handleScroll)
|
|
139
|
+
}, [])
|
|
140
|
+
|
|
141
|
+
useEffect(() => {
|
|
142
|
+
window.scroll({
|
|
143
|
+
top: window.scrollY - 1,
|
|
144
|
+
left: 0
|
|
145
|
+
})
|
|
146
|
+
}, [sortByValue])
|
|
147
|
+
|
|
124
148
|
const SearchComponent = () => {
|
|
125
149
|
return (
|
|
126
|
-
<WrapperSearch>
|
|
150
|
+
<WrapperSearch id='search-component'>
|
|
127
151
|
<SearchIconWrapper
|
|
128
152
|
onClick={() => setOpenSearchProducts(true)}
|
|
129
153
|
>
|
|
@@ -345,6 +369,10 @@ export const BusinessBasicInformation = (props) => {
|
|
|
345
369
|
onClose={() => {
|
|
346
370
|
handleChangeSearch('')
|
|
347
371
|
setOpenSearchProducts(false)
|
|
372
|
+
window.scroll({
|
|
373
|
+
top: window.scrollY - 1,
|
|
374
|
+
left: 0
|
|
375
|
+
})
|
|
348
376
|
}}
|
|
349
377
|
business={businessState.business}
|
|
350
378
|
/>
|
|
@@ -159,6 +159,7 @@ export const WrapperSearch = styled.div`
|
|
|
159
159
|
display: flex;
|
|
160
160
|
align-items: flex-end;
|
|
161
161
|
justify-content: flex-end;
|
|
162
|
+
box-sizing: border-box;
|
|
162
163
|
|
|
163
164
|
.search-bar {
|
|
164
165
|
margin-right: 10px;
|
|
@@ -192,6 +193,16 @@ export const WrapperSearch = styled.div`
|
|
|
192
193
|
border-radius: 8px;
|
|
193
194
|
}
|
|
194
195
|
}
|
|
196
|
+
&.fixed-search {
|
|
197
|
+
position: fixed;
|
|
198
|
+
top: 0;
|
|
199
|
+
left: 0;
|
|
200
|
+
z-index: 1002;
|
|
201
|
+
width: 100vw;
|
|
202
|
+
margin-top: 0px;
|
|
203
|
+
background-color: ${props => props.theme.colors.backgroundPage};
|
|
204
|
+
padding: 10px;
|
|
205
|
+
}
|
|
195
206
|
`
|
|
196
207
|
|
|
197
208
|
export const BusinessDetail = styled.div`
|
|
@@ -2,6 +2,8 @@ import React, { useEffect, useState } from 'react'
|
|
|
2
2
|
import Skeleton from 'react-loading-skeleton'
|
|
3
3
|
import { BusinessProductsCategories as ProductsCategories } from 'ordering-components-external'
|
|
4
4
|
import { AutoScroll } from '../../../../../components/AutoScroll'
|
|
5
|
+
import { useTheme } from 'styled-components'
|
|
6
|
+
import { useWindowSize } from '../../../../../hooks/useWindowSize'
|
|
5
7
|
|
|
6
8
|
import { CategoriesContainer } from './styles'
|
|
7
9
|
import { Tabs, Tab } from '../../styles/Tabs'
|
|
@@ -14,10 +16,13 @@ const BusinessProductsCategoriesUI = (props) => {
|
|
|
14
16
|
openBusinessInformation,
|
|
15
17
|
business,
|
|
16
18
|
handlerClickCategory,
|
|
17
|
-
categorySelected
|
|
19
|
+
categorySelected,
|
|
20
|
+
useKioskApp
|
|
18
21
|
} = props
|
|
19
22
|
|
|
23
|
+
const theme = useTheme()
|
|
20
24
|
const [selectedCategory, setSelectedCateogry] = useState({ id: null })
|
|
25
|
+
const { width } = useWindowSize()
|
|
21
26
|
const scrollTopSpan = 60
|
|
22
27
|
|
|
23
28
|
const handleChangeCategory = (category) => {
|
|
@@ -69,12 +74,14 @@ const BusinessProductsCategoriesUI = (props) => {
|
|
|
69
74
|
|
|
70
75
|
const _diff = -50
|
|
71
76
|
const _moveDiff = 30
|
|
77
|
+
const _paddDiff = scrollTopSpan + 10
|
|
72
78
|
|
|
73
79
|
_categories?.length && _categories.some(category => {
|
|
74
80
|
const topPos = category?.id ? document.getElementById(`category${category.id}`)?.offsetTop
|
|
75
81
|
: document.getElementById('businessProductList')?.offsetTop
|
|
76
|
-
|
|
77
|
-
if (topPos - windowTop <
|
|
82
|
+
const HeightOfEle = category?.id ? document.getElementById(`category${category.id}`)?.clientHeight : 0
|
|
83
|
+
if ((windowTop > topPos - _paddDiff && windowTop < topPos + HeightOfEle - _paddDiff) &&
|
|
84
|
+
category?.id) {
|
|
78
85
|
const choosedCategory = document.getElementById(`category-menu${category?.id || '-all'}`)
|
|
79
86
|
const choosedCategoryLeft = choosedCategory?.offsetLeft || 0
|
|
80
87
|
|
|
@@ -112,18 +119,20 @@ const BusinessProductsCategoriesUI = (props) => {
|
|
|
112
119
|
}
|
|
113
120
|
|
|
114
121
|
useEffect(() => {
|
|
122
|
+
if (typeof useKioskApp === 'undefined') return
|
|
115
123
|
const styleSheet = document.getElementById('styles').sheet
|
|
116
124
|
|
|
117
125
|
let style0 = '.sticky-prod-cat {'
|
|
118
126
|
style0 += 'position: fixed !important;'
|
|
119
|
-
style0 += 'top:
|
|
120
|
-
style0 += '
|
|
121
|
-
style0 += 'padding:
|
|
127
|
+
style0 += 'top: 0px !important;'
|
|
128
|
+
style0 += 'left: 0px !important;'
|
|
129
|
+
style0 += 'padding: 5px 5px 0px 5px !important;'
|
|
130
|
+
style0 += `width: calc(100% - ${useKioskApp ? '50px' : '155px'}) !important;`
|
|
122
131
|
style0 += '}'
|
|
123
132
|
|
|
124
133
|
let style1 = '.sticky-prod-cart {'
|
|
125
134
|
style1 += 'position: fixed !important;'
|
|
126
|
-
style1 += 'top:
|
|
135
|
+
style1 += 'top: 38px !important;'
|
|
127
136
|
style1 += 'right: 2.5% !important;'
|
|
128
137
|
style1 += 'width: 28.5% !important;'
|
|
129
138
|
style1 += 'margin-top: 32px !important;'
|
|
@@ -131,10 +140,11 @@ const BusinessProductsCategoriesUI = (props) => {
|
|
|
131
140
|
|
|
132
141
|
let style2 = '.sticky-search {'
|
|
133
142
|
style2 += 'position: fixed !important;'
|
|
134
|
-
style2 += 'top:
|
|
135
|
-
style2 += 'right:
|
|
136
|
-
style2 += 'height: 50px !important;'
|
|
143
|
+
style2 += 'top: 0px !important;'
|
|
144
|
+
style2 += 'right: 0% !important;'
|
|
137
145
|
style2 += 'z-index: 9999 !important;'
|
|
146
|
+
style2 += 'width: 50px !important;'
|
|
147
|
+
style2 += `background-color: ${theme.colors.backgroundPage} !important;`
|
|
138
148
|
style2 += '}'
|
|
139
149
|
|
|
140
150
|
styleSheet.insertRule(style0, 0)
|
|
@@ -143,7 +153,7 @@ const BusinessProductsCategoriesUI = (props) => {
|
|
|
143
153
|
|
|
144
154
|
window.addEventListener('scroll', handleScroll)
|
|
145
155
|
return () => window.removeEventListener('scroll', handleScroll)
|
|
146
|
-
}, [])
|
|
156
|
+
}, [useKioskApp])
|
|
147
157
|
|
|
148
158
|
return (
|
|
149
159
|
<>
|
|
@@ -5,7 +5,7 @@ export const CategoriesContainer = styled.div`
|
|
|
5
5
|
overflow-x: auto;
|
|
6
6
|
padding: 5px 0px 0px 0px;
|
|
7
7
|
background: ${props => props.theme.colors.backgroundPage};
|
|
8
|
-
z-index:
|
|
8
|
+
z-index: 1002;
|
|
9
9
|
position: absolute;
|
|
10
10
|
top: 0;
|
|
11
11
|
border-bottom: 1px solid #D9D9D9;
|
|
@@ -33,9 +33,9 @@ export const CategoriesContainer = styled.div`
|
|
|
33
33
|
`}
|
|
34
34
|
}
|
|
35
35
|
|
|
36
|
-
@media (min-width: 381px) {
|
|
36
|
+
/* @media (min-width: 381px) {
|
|
37
37
|
padding: 15px 0px 0px 0px;
|
|
38
|
-
}
|
|
38
|
+
} */
|
|
39
39
|
@media (min-width: 992px) {
|
|
40
40
|
width: ${props => props.w ?? 'auto'};
|
|
41
41
|
}
|
package/src/themes/five/src/components/BusinessesListing/layouts/OriginalBusinessesListing/index.js
CHANGED
|
@@ -9,7 +9,6 @@ import {
|
|
|
9
9
|
useSession,
|
|
10
10
|
useLanguage,
|
|
11
11
|
useConfig,
|
|
12
|
-
useOrderingTheme,
|
|
13
12
|
BusinessList as BusinessListController
|
|
14
13
|
} from 'ordering-components-external'
|
|
15
14
|
|
|
@@ -77,7 +76,6 @@ const BusinessesListingUI = (props) => {
|
|
|
77
76
|
const [{ auth }] = useSession()
|
|
78
77
|
const [{ configs }] = useConfig()
|
|
79
78
|
const theme = useTheme()
|
|
80
|
-
const [orderingTheme] = useOrderingTheme()
|
|
81
79
|
const [modals, setModals] = useState({ listOpen: false, formOpen: false, citiesOpen: false })
|
|
82
80
|
const [alertState, setAlertState] = useState({ open: false, content: [] })
|
|
83
81
|
const [activeMap, setActiveMap] = useState(false)
|
|
@@ -87,7 +85,7 @@ const BusinessesListingUI = (props) => {
|
|
|
87
85
|
const [hasHighRatedBusiness, setHasHighRatedBusiness] = useState(true)
|
|
88
86
|
const userCustomer = JSON.parse(window.localStorage.getItem('user-customer'))
|
|
89
87
|
const [favoriteIds, setFavoriteIds] = useState([])
|
|
90
|
-
const hideCities =
|
|
88
|
+
const hideCities = theme?.business_listing_view?.components?.cities?.hidden ?? true
|
|
91
89
|
|
|
92
90
|
const businessesIds = isCustomLayout &&
|
|
93
91
|
businessesList.businesses &&
|
|
@@ -273,7 +271,7 @@ const BusinessesListingUI = (props) => {
|
|
|
273
271
|
onSearch={handleChangeSearch}
|
|
274
272
|
handleCustomEnter={() => onRedirectPage({ page: 'business_search' })}
|
|
275
273
|
/>
|
|
276
|
-
{
|
|
274
|
+
{!hideCities && citiesState?.cities?.length > 0 && (
|
|
277
275
|
<Button color='primary' onClick={handleOpenCities}>
|
|
278
276
|
{citiesState?.cities?.find(city => city?.id === orderState?.options?.city_id)?.name || t('SELECT_A_CITY', 'Select a city')}
|
|
279
277
|
</Button>
|
|
@@ -6,7 +6,11 @@ export const Container = styled.div`
|
|
|
6
6
|
display: flex;
|
|
7
7
|
flex-direction: column;
|
|
8
8
|
align-items: center;
|
|
9
|
-
margin:
|
|
9
|
+
margin: 45px 0 20px;
|
|
10
|
+
|
|
11
|
+
@media (min-width: 740px) {
|
|
12
|
+
margin: 20px 0;
|
|
13
|
+
}
|
|
10
14
|
`
|
|
11
15
|
|
|
12
16
|
export const WrapperContainer = styled.div`
|
|
@@ -70,9 +74,11 @@ export const OrderBusiness = styled.div`
|
|
|
70
74
|
|
|
71
75
|
export const BusinessWrapper = styled.div`
|
|
72
76
|
display: flex;
|
|
73
|
-
width:
|
|
77
|
+
width: 100%;
|
|
74
78
|
display: flex;
|
|
75
79
|
align-items: center;
|
|
80
|
+
flex-direction: column;
|
|
81
|
+
|
|
76
82
|
${props => props.borderBottom && css`
|
|
77
83
|
padding-bottom: 15px;
|
|
78
84
|
border-bottom: 1px solid ${props => props.theme.colors.lightGray};
|
|
@@ -85,32 +91,50 @@ export const BusinessWrapper = styled.div`
|
|
|
85
91
|
width: 100px;
|
|
86
92
|
height: 100px;
|
|
87
93
|
border-radius: 7.6px;
|
|
88
|
-
margin-right:
|
|
94
|
+
margin-right: 0;
|
|
95
|
+
|
|
96
|
+
@media (min-width: 400px) {
|
|
97
|
+
margin-right: 40px;
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
@media (min-width: 400px) {
|
|
102
|
+
flex-direction: row;
|
|
103
|
+
width: ${props => props.w ?? '100%'};
|
|
89
104
|
}
|
|
90
105
|
`
|
|
91
106
|
|
|
92
107
|
export const BtsOrderStatus = styled.div`
|
|
93
|
-
width: calc(100% - 20px);
|
|
94
108
|
display: flex;
|
|
95
|
-
flex-direction:
|
|
109
|
+
flex-direction: column;
|
|
96
110
|
justify-content: space-between;
|
|
97
111
|
align-items: center;
|
|
98
112
|
margin-top: 20px;
|
|
99
113
|
|
|
100
114
|
div + div {
|
|
101
|
-
margin-left:
|
|
115
|
+
margin-left: 0;
|
|
116
|
+
margin-top: 10px;
|
|
117
|
+
}
|
|
118
|
+
@media (min-width: 400px) {
|
|
119
|
+
flex-direction: row;
|
|
120
|
+
div + div {
|
|
121
|
+
margin-left: 30px;
|
|
122
|
+
margin-top: 0px;
|
|
123
|
+
}
|
|
102
124
|
}
|
|
103
125
|
`
|
|
104
126
|
|
|
105
127
|
export const BusinessInfo = styled.div`
|
|
106
128
|
width: 100%;
|
|
107
129
|
box-sizing: border-box;
|
|
108
|
-
margin-right:
|
|
130
|
+
margin-right: 0;
|
|
131
|
+
margin-top: 10px;
|
|
132
|
+
|
|
109
133
|
h1,
|
|
110
134
|
p {
|
|
111
135
|
margin: 0;
|
|
112
136
|
color: ${props => props.theme.colors.darkTextColor};
|
|
113
|
-
overflow-wrap:
|
|
137
|
+
overflow-wrap: anywhere;
|
|
114
138
|
}
|
|
115
139
|
|
|
116
140
|
h2 {
|
|
@@ -122,13 +146,17 @@ export const BusinessInfo = styled.div`
|
|
|
122
146
|
font-size: 14px;
|
|
123
147
|
margin-bottom: 5px;
|
|
124
148
|
}
|
|
149
|
+
|
|
150
|
+
@media (min-width: 400px) {
|
|
151
|
+
margin-right: 15px;
|
|
152
|
+
margin-top: 0;
|
|
153
|
+
}
|
|
125
154
|
`
|
|
126
155
|
|
|
127
156
|
export const ActionsBlock = styled.div`
|
|
128
157
|
display: flex;
|
|
129
158
|
align-items: center;
|
|
130
159
|
justify-content: flex-start;
|
|
131
|
-
flex-direction: column;
|
|
132
160
|
> * {
|
|
133
161
|
margin-right: 5px;
|
|
134
162
|
${props => props.theme?.rtl && css`
|
|
@@ -143,8 +171,6 @@ export const ActionsBlock = styled.div`
|
|
|
143
171
|
}
|
|
144
172
|
|
|
145
173
|
@media (min-width: 380px) {
|
|
146
|
-
flex-direction: row;
|
|
147
|
-
|
|
148
174
|
svg {
|
|
149
175
|
font-size: 20px;
|
|
150
176
|
}
|
|
@@ -185,7 +211,12 @@ export const OrderInfo = styled.div`
|
|
|
185
211
|
font-size: 16px;
|
|
186
212
|
}
|
|
187
213
|
`
|
|
188
|
-
|
|
214
|
+
export const OrderIdSec = styled.h1`
|
|
215
|
+
font-size: 25px !important;
|
|
216
|
+
@media (min-width: 350px) {
|
|
217
|
+
font-size: 32px !important;
|
|
218
|
+
}
|
|
219
|
+
`
|
|
189
220
|
export const ReviewOrderLink = styled.span`
|
|
190
221
|
margin: 0;
|
|
191
222
|
cursor: pointer;
|
|
@@ -201,7 +232,7 @@ export const ReviewOrderLink = styled.span`
|
|
|
201
232
|
}
|
|
202
233
|
`}
|
|
203
234
|
${({ isMargin }) => isMargin && css`
|
|
204
|
-
margin:
|
|
235
|
+
margin: 0 10px 0 0;
|
|
205
236
|
`}
|
|
206
237
|
`
|
|
207
238
|
|
|
@@ -553,7 +584,7 @@ export const TitleContainer = styled.div`
|
|
|
553
584
|
display: flex;
|
|
554
585
|
flex-direction: column;
|
|
555
586
|
align-items: center;
|
|
556
|
-
width:
|
|
587
|
+
width: 90%;
|
|
557
588
|
margin: auto;
|
|
558
589
|
button {
|
|
559
590
|
display: flex;
|
|
@@ -563,6 +594,12 @@ export const TitleContainer = styled.div`
|
|
|
563
594
|
min-width: 200px;
|
|
564
595
|
max-height: 53px;
|
|
565
596
|
}
|
|
597
|
+
> h1 {
|
|
598
|
+
text-align: center;
|
|
599
|
+
}
|
|
600
|
+
@media (min-width: 650px) {
|
|
601
|
+
width: 50%;
|
|
602
|
+
}
|
|
566
603
|
`
|
|
567
604
|
|
|
568
605
|
export const ReOrder = styled.div`
|
|
@@ -570,11 +607,20 @@ export const ReOrder = styled.div`
|
|
|
570
607
|
align-items: center;
|
|
571
608
|
margin-top: 20px;
|
|
572
609
|
margin-bottom: 20px;
|
|
610
|
+
flex-direction: column;
|
|
573
611
|
|
|
574
612
|
button {
|
|
575
613
|
padding: 5px 16px;
|
|
576
614
|
min-width: unset;
|
|
577
|
-
margin:
|
|
615
|
+
margin: 5px 5px;
|
|
616
|
+
|
|
617
|
+
@media (min-width: 650px) {
|
|
618
|
+
margin: 0px 5px;
|
|
619
|
+
}
|
|
620
|
+
}
|
|
621
|
+
|
|
622
|
+
@media (min-width: 650px) {
|
|
623
|
+
flex-direction: row;
|
|
578
624
|
}
|
|
579
625
|
`
|
|
580
626
|
|
|
@@ -600,10 +646,19 @@ export const HeaderTitle = styled.div`
|
|
|
600
646
|
export const PlaceSpotSection = styled.div`
|
|
601
647
|
|
|
602
648
|
`
|
|
649
|
+
export const OrderStatusAndLinkContainer = styled.div`
|
|
650
|
+
display: flex;
|
|
651
|
+
flex-direction: column;
|
|
652
|
+
justify-content: space-between;
|
|
603
653
|
|
|
654
|
+
@media (min-width: 450px) {
|
|
655
|
+
flex-direction: row;
|
|
656
|
+
}
|
|
657
|
+
`
|
|
604
658
|
export const LinkWrapper = styled.div`
|
|
605
659
|
display: flex;
|
|
606
660
|
align-items: center;
|
|
661
|
+
justify-content: space-between;
|
|
607
662
|
`
|
|
608
663
|
|
|
609
664
|
export const OrderHistoryContainer = styled.div``
|
|
@@ -111,7 +111,7 @@ export const RenderProductsLayout = (props) => {
|
|
|
111
111
|
layoutOne: frontLayout === layoutOne && isUseParentCategory
|
|
112
112
|
}
|
|
113
113
|
const showCartOnProductList = !orderingTheme?.theme?.business_view?.components?.cart?.components?.hidden
|
|
114
|
-
const hideBusinessNearCity =
|
|
114
|
+
const hideBusinessNearCity = theme?.business_view?.components?.near_business?.hidden ?? true
|
|
115
115
|
|
|
116
116
|
const BusinessLayoutCategories = businessLayout.layoutOne
|
|
117
117
|
? CategoriesLayoutGroceries
|
|
@@ -125,7 +125,7 @@ export const RenderProductsLayout = (props) => {
|
|
|
125
125
|
<>
|
|
126
126
|
{!isLoading && business?.id && (
|
|
127
127
|
<WrappLayout isCartOnProductsList={isCartOnProductsList}>
|
|
128
|
-
{
|
|
128
|
+
{!hideBusinessNearCity && !useKioskApp && (
|
|
129
129
|
<NearBusiness>
|
|
130
130
|
<BusinessesListing
|
|
131
131
|
logosLayout
|
|
@@ -328,6 +328,7 @@ export const RenderProductsLayout = (props) => {
|
|
|
328
328
|
openCategories={openCategories}
|
|
329
329
|
business={business}
|
|
330
330
|
currentCart={currentCart}
|
|
331
|
+
useKioskApp={useKioskApp}
|
|
331
332
|
/>
|
|
332
333
|
)}
|
|
333
334
|
</BusinessCategoriesContainer>
|
|
@@ -214,11 +214,15 @@ export const ProfessionalFilterWrapper = styled.div`
|
|
|
214
214
|
export const WrapperSearchAbsolute = styled.div`
|
|
215
215
|
position: absolute;
|
|
216
216
|
right: 5px;
|
|
217
|
-
top:
|
|
218
|
-
height: 100%;
|
|
217
|
+
top: 0px;
|
|
219
218
|
display: flex;
|
|
220
219
|
justify-content: center;
|
|
221
|
-
align-items:
|
|
220
|
+
align-items: flex-end;
|
|
221
|
+
width: 40px;
|
|
222
|
+
height: 52px;
|
|
223
|
+
background-color: ${props => props.theme.colors.backgroundPage};
|
|
224
|
+
box-sizing: border-box;
|
|
225
|
+
padding-bottom: 5px;
|
|
222
226
|
`
|
|
223
227
|
|
|
224
228
|
export const NearBusiness = styled.div`
|
|
@@ -67,7 +67,7 @@ const SingleProductCardUI = (props) => {
|
|
|
67
67
|
|
|
68
68
|
const maxCartProductConfig = (stateConfig.configs.max_product_amount ? parseInt(stateConfig.configs.max_product_amount) : 100) - totalBalance
|
|
69
69
|
|
|
70
|
-
const hideAddButton =
|
|
70
|
+
const hideAddButton = theme?.business_view?.components?.products?.components?.add_to_cart_button?.hidden ?? true
|
|
71
71
|
// const productsRows = theme?.layouts?.business_view?.components?.products?.components?.layout?.rows
|
|
72
72
|
|
|
73
73
|
let maxCartProductInventory = (product?.inventoried ? product?.quantity : undefined) - totalBalance
|