ordering-ui-react-native 0.12.65 → 0.12.66
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/package.json
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import React, { useState, useRef, useCallback } from 'react'
|
|
2
2
|
import { View, TouchableOpacity, StyleSheet, TextStyle, ScrollView, I18nManager, Platform } from 'react-native'
|
|
3
3
|
import {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
4
|
+
BusinessAndProductList,
|
|
5
|
+
useLanguage,
|
|
6
|
+
useOrder,
|
|
7
|
+
useSession,
|
|
8
|
+
useUtils,
|
|
9
|
+
useToast,
|
|
10
|
+
ToastType
|
|
11
11
|
} from 'ordering-components/native'
|
|
12
12
|
import { OButton, OIcon, OModal, OText } from '../shared'
|
|
13
13
|
import { BusinessBasicInformation } from '../BusinessBasicInformation'
|
|
@@ -16,15 +16,15 @@ import { BusinessProductsCategories } from '../BusinessProductsCategories'
|
|
|
16
16
|
import { BusinessProductsList } from '../BusinessProductsList'
|
|
17
17
|
import { BusinessProductsListingParams } from '../../types'
|
|
18
18
|
import {
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
19
|
+
WrapHeader,
|
|
20
|
+
TopHeader,
|
|
21
|
+
AddressInput,
|
|
22
|
+
WrapSearchBar,
|
|
23
|
+
WrapContent,
|
|
24
|
+
BusinessProductsListingContainer,
|
|
25
|
+
SortWrap,
|
|
26
|
+
SortButton,
|
|
27
|
+
CategoryWrap,
|
|
28
28
|
} from './styles'
|
|
29
29
|
import { useTheme } from 'styled-components/native'
|
|
30
30
|
import { FloatingButton } from '../FloatingButton'
|
|
@@ -40,347 +40,347 @@ import SocialShareFav from '../SocialShare'
|
|
|
40
40
|
const PIXELS_TO_SCROLL = 1000
|
|
41
41
|
|
|
42
42
|
const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
43
|
+
const {
|
|
44
|
+
navigation,
|
|
45
|
+
errors,
|
|
46
|
+
businessState,
|
|
47
|
+
categoryState,
|
|
48
|
+
handleChangeSearch,
|
|
49
|
+
categorySelected,
|
|
50
|
+
searchValue,
|
|
51
|
+
handleSearchRedirect,
|
|
52
|
+
featuredProducts,
|
|
53
|
+
errorQuantityProducts,
|
|
54
|
+
header,
|
|
55
|
+
logo,
|
|
56
|
+
productModal,
|
|
57
|
+
handleChangeCategory,
|
|
58
|
+
setProductLogin,
|
|
59
|
+
updateProductModal,
|
|
60
|
+
getNextProducts
|
|
61
|
+
} = props
|
|
62
|
+
const theme = useTheme()
|
|
63
63
|
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
64
|
+
const styles = StyleSheet.create({
|
|
65
|
+
mainContainer: {
|
|
66
|
+
flex: 1,
|
|
67
|
+
marginTop: 64
|
|
68
|
+
},
|
|
69
|
+
BackIcon: {
|
|
70
|
+
paddingRight: 20,
|
|
71
|
+
},
|
|
72
|
+
headerItem: {
|
|
73
|
+
flexDirection: 'row',
|
|
74
|
+
alignItems: 'center',
|
|
75
|
+
},
|
|
76
|
+
btnBackArrow: {
|
|
77
|
+
borderWidth: 0,
|
|
78
|
+
backgroundColor: theme.colors.clear,
|
|
79
|
+
paddingLeft: I18nManager.isRTL ? 7 : 0,
|
|
80
|
+
paddingRight: I18nManager.isRTL ? 0 : 7,
|
|
81
|
+
},
|
|
82
|
+
searchIcon: {
|
|
83
|
+
width: 25,
|
|
84
|
+
height: 25,
|
|
85
|
+
borderWidth: 0,
|
|
86
|
+
backgroundColor: theme.colors.white,
|
|
87
|
+
borderRadius: 24,
|
|
88
|
+
justifyContent: 'center',
|
|
89
|
+
alignItems: 'center',
|
|
90
|
+
shadowOpacity: 0,
|
|
91
|
+
marginEnd: -6
|
|
92
|
+
},
|
|
93
|
+
categorySticky: {
|
|
94
|
+
position: 'absolute',
|
|
95
|
+
start: 1,
|
|
96
|
+
end: 0,
|
|
97
|
+
top: 0
|
|
98
|
+
}
|
|
99
|
+
})
|
|
100
100
|
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
101
|
+
const [, t] = useLanguage()
|
|
102
|
+
const [{ auth }] = useSession()
|
|
103
|
+
const [orderState] = useOrder()
|
|
104
|
+
const [{ parsePrice }] = useUtils()
|
|
105
|
+
const [, { showToast }] = useToast()
|
|
106
|
+
const { business, loading, error } = businessState
|
|
107
|
+
const [openBusinessInformation, setOpenBusinessInformation] = useState(false)
|
|
108
|
+
const [curProduct, setCurProduct] = useState(null)
|
|
109
|
+
const [openUpselling, setOpenUpselling] = useState(false)
|
|
110
|
+
const [openCart, setOpenCart] = useState(false)
|
|
111
|
+
const [isCategoryClicked, setCategoryClicked] = useState(false)
|
|
112
|
+
const [categoriesLayout, setCategoriesLayout] = useState<any>({})
|
|
113
|
+
const [productListLayout, setProductListLayout] = useState<any>(null)
|
|
114
|
+
const [selectedCategoryId, setSelectedCategoryId] = useState<any>('cat_all')
|
|
115
115
|
|
|
116
|
-
|
|
116
|
+
const scrollViewRef = useRef<any>(null)
|
|
117
117
|
|
|
118
|
-
|
|
119
|
-
|
|
118
|
+
const { top } = useSafeAreaInsets();
|
|
119
|
+
const [sortBy, setSortBy] = useState('alphabet');
|
|
120
120
|
|
|
121
|
-
|
|
121
|
+
const currentCart: any = Object.values(orderState.carts).find((cart: any) => cart?.business?.slug === business?.slug) ?? {}
|
|
122
122
|
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
123
|
+
const onRedirect = (route: string, params?: any) => {
|
|
124
|
+
navigation.navigate(route, params)
|
|
125
|
+
}
|
|
126
126
|
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
127
|
+
const onProductClick = (product: any) => {
|
|
128
|
+
setCurProduct(product)
|
|
129
|
+
}
|
|
130
130
|
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
131
|
+
const handleCancel = () => {
|
|
132
|
+
handleChangeSearch('')
|
|
133
|
+
}
|
|
134
134
|
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
135
|
+
const handleCloseProductModal = () => {
|
|
136
|
+
setCurProduct(null)
|
|
137
|
+
updateProductModal && updateProductModal(null)
|
|
138
|
+
}
|
|
139
139
|
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
140
|
+
const handleCloseCartModal = () => {
|
|
141
|
+
setOpenCart(false);
|
|
142
|
+
}
|
|
143
143
|
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
144
|
+
const handlerProductAction = () => {
|
|
145
|
+
handleCloseProductModal()
|
|
146
|
+
}
|
|
147
147
|
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
148
|
+
const handleUpsellingPage = () => {
|
|
149
|
+
onRedirect('CheckoutNavigator', {
|
|
150
|
+
screen: 'CheckoutPage',
|
|
151
|
+
cartUuid: currentCart?.uuid,
|
|
152
|
+
businessLogo: logo,
|
|
153
|
+
businessName: business?.name,
|
|
154
|
+
cartTotal: currentCart?.total
|
|
155
|
+
})
|
|
156
|
+
setOpenCart(false)
|
|
157
|
+
}
|
|
158
158
|
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
for (const key in categoriesLayout) {
|
|
172
|
-
const categoryOffset = categoriesLayout[key].y + productListLayout?.y - 70
|
|
173
|
-
if (scrollOffset < 10) {
|
|
174
|
-
setSelectedCategoryId('cat_all');
|
|
175
|
-
return;
|
|
176
|
-
}
|
|
177
|
-
if (categoryOffset - 50 <= scrollOffset && scrollOffset <= categoryOffset + 50) {
|
|
178
|
-
if (selectedCategoryId !== key) {
|
|
179
|
-
setSelectedCategoryId(key)
|
|
180
|
-
}
|
|
181
|
-
}
|
|
182
|
-
}
|
|
183
|
-
}
|
|
184
|
-
}, [isCategoryClicked, selectedCategoryId])
|
|
159
|
+
const handlePageScroll = useCallback(({ nativeEvent }: any) => {
|
|
160
|
+
const scrollOffset = nativeEvent.contentOffset.y
|
|
161
|
+
if (businessState?.business?.lazy_load_products_recommended) {
|
|
162
|
+
const height = nativeEvent.contentSize.height
|
|
163
|
+
const hasMore = !(categoryState.pagination.totalPages === categoryState.pagination.currentPage)
|
|
164
|
+
if (scrollOffset + PIXELS_TO_SCROLL > height && !loading && hasMore && getNextProducts) {
|
|
165
|
+
getNextProducts()
|
|
166
|
+
showToast(ToastType.Info, t('LOADING_MORE_PRODUCTS', 'Loading more products'))
|
|
167
|
+
}
|
|
168
|
+
} else {
|
|
169
|
+
if (!scrollOffset || !categoriesLayout || !productListLayout || isCategoryClicked) return
|
|
185
170
|
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
171
|
+
for (const key in categoriesLayout) {
|
|
172
|
+
const categoryOffset = categoriesLayout[key].y + productListLayout?.y - 70
|
|
173
|
+
if (scrollOffset < 10) {
|
|
174
|
+
setSelectedCategoryId('cat_all');
|
|
175
|
+
return;
|
|
176
|
+
}
|
|
177
|
+
if (categoryOffset - 50 <= scrollOffset && scrollOffset <= categoryOffset + 50) {
|
|
178
|
+
if (selectedCategoryId !== key) {
|
|
179
|
+
setSelectedCategoryId(key)
|
|
180
|
+
}
|
|
181
|
+
}
|
|
182
|
+
}
|
|
183
|
+
}
|
|
184
|
+
}, [isCategoryClicked, selectedCategoryId, productListLayout])
|
|
189
185
|
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
186
|
+
const handleTouchDrag = useCallback(() => {
|
|
187
|
+
setCategoryClicked(false);
|
|
188
|
+
}, []);
|
|
189
|
+
|
|
190
|
+
return (
|
|
191
|
+
<>
|
|
192
|
+
<Animated.View style={{ flex: 1, backgroundColor: theme.colors.white, position: 'absolute', width: '100%', top: top, zIndex: 1 }}>
|
|
193
|
+
{!loading && business?.id && (
|
|
194
|
+
<TopHeader>
|
|
195
|
+
<OButton
|
|
196
|
+
imgLeftSrc={theme.images.general.arrow_left}
|
|
197
|
+
imgRightSrc={null}
|
|
198
|
+
style={styles.btnBackArrow}
|
|
199
|
+
onClick={() => (navigation?.canGoBack() && navigation.goBack()) || (auth && navigation.navigate('BottomTab'))}
|
|
200
|
+
imgLeftStyle={{ tintColor: theme.colors.textPrimary }}
|
|
201
|
+
/>
|
|
202
|
+
{!errorQuantityProducts && (
|
|
203
|
+
<View style={{ ...styles.headerItem }}>
|
|
204
|
+
<View
|
|
205
|
+
style={styles.searchIcon}
|
|
206
|
+
>
|
|
207
|
+
<SocialShareFav
|
|
208
|
+
icon={theme.images.general.share}
|
|
209
|
+
style={{ width: 19, height: 19 }}
|
|
210
|
+
/>
|
|
211
|
+
</View>
|
|
212
|
+
</View>
|
|
213
|
+
)}
|
|
214
|
+
</TopHeader>
|
|
215
|
+
)}
|
|
216
|
+
</Animated.View>
|
|
217
|
+
<BusinessProductsListingContainer
|
|
218
|
+
style={styles.mainContainer}
|
|
219
|
+
isActiveFloatingButtom={currentCart?.products?.length > 0 && categoryState.products.length !== 0}
|
|
220
|
+
stickyHeaderIndices={[1]}
|
|
221
|
+
ref={scrollViewRef}
|
|
222
|
+
onScroll={handlePageScroll}
|
|
223
|
+
onScrollBeginDrag={handleTouchDrag}
|
|
224
|
+
scrollEventThrottle={16}
|
|
225
|
+
>
|
|
226
|
+
<WrapHeader>
|
|
227
|
+
<BusinessBasicInformation
|
|
228
|
+
businessState={businessState}
|
|
229
|
+
openBusinessInformation={openBusinessInformation}
|
|
230
|
+
header={header}
|
|
231
|
+
logo={logo}
|
|
232
|
+
noImage={true}
|
|
233
|
+
/>
|
|
234
|
+
<View style={{ display: 'flex', position: 'relative', flexDirection: 'row', minHeight: 42, paddingHorizontal: 40, marginTop: 12 }}>
|
|
235
|
+
<WrapSearchBar>
|
|
236
|
+
<SearchBar
|
|
237
|
+
onSearch={handleChangeSearch}
|
|
238
|
+
isCancelXButtonShow
|
|
239
|
+
noBorderShow
|
|
240
|
+
placeholder={t('SEARCH', 'Search')}
|
|
241
|
+
lazyLoad={businessState?.business?.lazy_load_products_recommended}
|
|
242
|
+
inputWrapStyle={{ height: 40, backgroundColor: theme.colors.clear, borderWidth: 0, paddingStart: 11, marginEnd: 0 }}
|
|
243
|
+
/>
|
|
244
|
+
</WrapSearchBar>
|
|
245
|
+
<SortWrap>
|
|
246
|
+
<SortButton onPress={() => setSortBy('rank')} style={{ marginEnd: 7 }}>
|
|
247
|
+
<OText size={12} weight={Platform.OS == 'ios' ? '600' : 'bold'} color={theme.colors.textPrimary}>{t('RANK', 'Rank')}</OText>
|
|
248
|
+
</SortButton>
|
|
249
|
+
<SortButton onPress={() => setSortBy('alphabet')}>
|
|
250
|
+
<OText size={12} weight={Platform.OS == 'ios' ? '600' : 'bold'} color={theme.colors.textPrimary}>{t('A_TO_Z', 'A to Z')}</OText>
|
|
251
|
+
</SortButton>
|
|
252
|
+
</SortWrap>
|
|
253
|
+
</View>
|
|
254
|
+
</WrapHeader>
|
|
255
|
+
{!loading && business?.id && !(business?.categories?.length === 0) && (
|
|
256
|
+
<CategoryWrap>
|
|
257
|
+
<BusinessProductsCategories
|
|
258
|
+
categories={[{ id: 'all', name: t('ALL', 'All') }, { id: 'featured', name: t('FEATURED', 'Featured') }, ...business?.categories.sort((a: any, b: any) => a.rank - b.rank)]}
|
|
259
|
+
categorySelected={categorySelected}
|
|
260
|
+
onClickCategory={handleChangeCategory}
|
|
261
|
+
featured={featuredProducts}
|
|
262
|
+
openBusinessInformation={openBusinessInformation}
|
|
263
|
+
scrollViewRef={scrollViewRef}
|
|
264
|
+
contentStyle={{ paddingHorizontal: 40 }}
|
|
265
|
+
productListLayout={productListLayout}
|
|
266
|
+
categoriesLayout={categoriesLayout}
|
|
267
|
+
selectedCategoryId={selectedCategoryId}
|
|
268
|
+
setSelectedCategoryId={setSelectedCategoryId}
|
|
269
|
+
setCategoryClicked={setCategoryClicked}
|
|
270
|
+
lazyLoadProductsRecommended={business?.lazy_load_products_recommended}
|
|
271
|
+
/>
|
|
272
|
+
</CategoryWrap>
|
|
273
|
+
)}
|
|
274
|
+
<View>
|
|
275
|
+
{!loading && business?.id && (
|
|
276
|
+
<WrapContent onLayout={(event: any) => setProductListLayout(event.nativeEvent.layout)}>
|
|
277
|
+
<BusinessProductsList
|
|
278
|
+
categories={[
|
|
279
|
+
{ id: null, name: t('ALL', 'All') },
|
|
280
|
+
{ id: 'featured', name: t('FEATURED', 'Featured') },
|
|
281
|
+
...business?.categories.sort((a: any, b: any) => a.rank - b.rank)
|
|
282
|
+
]}
|
|
283
|
+
category={categorySelected}
|
|
284
|
+
categoryState={categoryState}
|
|
285
|
+
businessId={business.id}
|
|
286
|
+
errors={errors}
|
|
287
|
+
onProductClick={onProductClick}
|
|
288
|
+
handleSearchRedirect={handleSearchRedirect}
|
|
289
|
+
featured={featuredProducts}
|
|
290
|
+
searchValue={searchValue}
|
|
291
|
+
handleClearSearch={handleChangeSearch}
|
|
292
|
+
errorQuantityProducts={errorQuantityProducts}
|
|
293
|
+
handleCancelSearch={handleCancel}
|
|
294
|
+
sortBy={sortBy}
|
|
295
|
+
categoriesLayout={categoriesLayout}
|
|
296
|
+
setCategoriesLayout={setCategoriesLayout}
|
|
297
|
+
/>
|
|
298
|
+
</WrapContent>
|
|
299
|
+
)}
|
|
300
|
+
{loading && !error && (
|
|
301
|
+
<>
|
|
302
|
+
<BusinessProductsCategories
|
|
303
|
+
categories={[]}
|
|
304
|
+
categorySelected={categorySelected}
|
|
305
|
+
onClickCategory={handleChangeCategory}
|
|
306
|
+
featured={featuredProducts}
|
|
307
|
+
openBusinessInformation={openBusinessInformation}
|
|
308
|
+
loading={loading}
|
|
309
|
+
/>
|
|
310
|
+
<WrapContent>
|
|
311
|
+
<BusinessProductsList
|
|
312
|
+
categories={[]}
|
|
313
|
+
category={categorySelected}
|
|
314
|
+
categoryState={categoryState}
|
|
315
|
+
isBusinessLoading={loading}
|
|
316
|
+
errorQuantityProducts={errorQuantityProducts}
|
|
317
|
+
/>
|
|
318
|
+
</WrapContent>
|
|
319
|
+
</>
|
|
320
|
+
)}
|
|
321
|
+
</View>
|
|
322
|
+
</BusinessProductsListingContainer>
|
|
323
|
+
{!loading && auth && currentCart?.products?.length > 0 && categoryState.products.length !== 0 && !openCart && curProduct === null && (
|
|
324
|
+
<FloatingButton
|
|
325
|
+
btnText={
|
|
326
|
+
currentCart?.subtotal >= currentCart?.minimum
|
|
327
|
+
? !openUpselling ? t('VIEW_CART', 'View Cart') : t('LOADING', 'Loading')
|
|
328
|
+
: `${t('MINIMUN_SUBTOTAL_ORDER', 'Minimum subtotal order:')} ${parsePrice(currentCart?.minimum)}`
|
|
329
|
+
}
|
|
330
|
+
isSecondaryBtn={currentCart?.subtotal < currentCart?.minimum}
|
|
331
|
+
// btnLeftValueShow={currentCart?.subtotal >= currentCart?.minimum && !openUpselling && currentCart?.products?.length > 0}
|
|
332
|
+
// btnRightValueShow={currentCart?.subtotal >= currentCart?.minimum && !openUpselling && currentCart?.products?.length > 0}
|
|
333
|
+
btnLeftValue={currentCart?.products?.length}
|
|
334
|
+
btnRightValue={parsePrice(currentCart?.total)}
|
|
335
|
+
disabled={openUpselling || currentCart?.subtotal < currentCart?.minimum}
|
|
336
|
+
handleClick={() => setOpenCart(true)}
|
|
337
|
+
/>
|
|
338
|
+
)}
|
|
339
|
+
<OModal
|
|
340
|
+
open={!!curProduct || (!!productModal.product && !orderState.loading)}
|
|
341
|
+
onClose={handleCloseProductModal}
|
|
342
|
+
entireModal
|
|
343
|
+
customClose
|
|
344
|
+
>
|
|
345
|
+
<ProductForm
|
|
346
|
+
product={curProduct || productModal.product}
|
|
347
|
+
businessSlug={business?.slug}
|
|
348
|
+
businessId={business?.id || productModal?.product?.category?.business_id}
|
|
349
|
+
onClose={handleCloseProductModal}
|
|
350
|
+
navigation={navigation}
|
|
351
|
+
onSave={handlerProductAction}
|
|
352
|
+
setProductLogin={setProductLogin}
|
|
353
|
+
/>
|
|
354
|
+
</OModal>
|
|
355
|
+
<OModal
|
|
356
|
+
open={openCart}
|
|
357
|
+
onClose={handleCloseCartModal}
|
|
358
|
+
entireModal
|
|
359
|
+
customClose
|
|
360
|
+
>
|
|
361
|
+
<ScrollView stickyHeaderIndices={[0]} style={{ backgroundColor: 'white' }} contentContainerStyle={{ paddingBottom: 100 }}>
|
|
362
|
+
<NavBar title={t('CART', 'Cart')} onActionLeft={handleCloseCartModal} leftImg={theme.images.general.close} noBorder btnStyle={{ paddingLeft: 0 }} />
|
|
363
|
+
<OrderSummary
|
|
364
|
+
cart={currentCart}
|
|
365
|
+
isCartPending={currentCart?.status === 2}
|
|
366
|
+
hasUpSelling={true}
|
|
367
|
+
isFromCheckout
|
|
368
|
+
title={t('ITEMS', 'Items')}
|
|
369
|
+
paddingH={40}
|
|
370
|
+
/>
|
|
371
|
+
</ScrollView>
|
|
372
|
+
<FloatingButton btnText={t('CHECKOUT', 'Checkout')} handleClick={() => handleUpsellingPage()} />
|
|
373
|
+
</OModal>
|
|
374
|
+
</>
|
|
375
|
+
)
|
|
376
376
|
}
|
|
377
377
|
|
|
378
378
|
export const BusinessProductsListing = (props: BusinessProductsListingParams) => {
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
379
|
+
const businessProductslistingProps = {
|
|
380
|
+
...props,
|
|
381
|
+
UIComponent: BusinessProductsListingUI
|
|
382
|
+
}
|
|
383
|
+
return (
|
|
384
|
+
<BusinessAndProductList {...businessProductslistingProps} />
|
|
385
|
+
)
|
|
386
386
|
}
|