ordering-ui-react-native 0.12.62 → 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.
Files changed (21) hide show
  1. package/package.json +2 -1
  2. package/src/components/BusinessProductsListing/index.tsx +2 -1
  3. package/src/components/Messages/index.tsx +4 -4
  4. package/src/components/OrderCreating/index.tsx +1 -2
  5. package/src/components/OrderDetails/index.tsx +7 -1
  6. package/src/navigators/HomeNavigator.tsx +0 -1
  7. package/themes/business/src/components/Chat/index.tsx +31 -16
  8. package/themes/doordash/src/components/BusinessProductsListing/index.tsx +341 -341
  9. package/themes/original/index.tsx +4 -0
  10. package/themes/original/src/components/BusinessBasicInformation/index.tsx +1 -1
  11. package/themes/original/src/components/BusinessController/index.tsx +9 -2
  12. package/themes/original/src/components/BusinessMenuList/index.tsx +132 -0
  13. package/themes/original/src/components/BusinessMenuList/styles.tsx +15 -0
  14. package/themes/original/src/components/BusinessPreorder/index.tsx +474 -0
  15. package/themes/original/src/components/BusinessPreorder/styles.tsx +60 -0
  16. package/themes/original/src/components/BusinessesListing/index.tsx +2 -1
  17. package/themes/original/src/components/HighestRatedBusinesses/index.tsx +3 -1
  18. package/themes/original/src/types/index.tsx +22 -1
  19. package/themes/single-business/src/components/BusinessBasicInformation/index.tsx +2 -2
  20. package/themes/single-business/src/components/BusinessProductsListing/index.tsx +2 -2
  21. package/themes/single-business/src/components/BusinessesListing/index.tsx +1 -1
package/themes/doordash/src/components/BusinessProductsListing/index.tsx 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
- BusinessAndProductList,
5
- useLanguage,
6
- useOrder,
7
- useSession,
8
- useUtils,
9
- useToast,
10
- ToastType
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
- WrapHeader,
20
- TopHeader,
21
- AddressInput,
22
- WrapSearchBar,
23
- WrapContent,
24
- BusinessProductsListingContainer,
25
- SortWrap,
26
- SortButton,
27
- CategoryWrap,
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
- 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()
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
- 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
- })
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
- 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')
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
- const scrollViewRef = useRef<any>(null)
116
+ const scrollViewRef = useRef<any>(null)
117
117
 
118
- const { top } = useSafeAreaInsets();
119
- const [sortBy, setSortBy] = useState('alphabet');
118
+ const { top } = useSafeAreaInsets();
119
+ const [sortBy, setSortBy] = useState('alphabet');
120
120
 
121
- const currentCart: any = Object.values(orderState.carts).find((cart: any) => cart?.business?.slug === business?.slug) ?? {}
121
+ const currentCart: any = Object.values(orderState.carts).find((cart: any) => cart?.business?.slug === business?.slug) ?? {}
122
122
 
123
- const onRedirect = (route: string, params?: any) => {
124
- navigation.navigate(route, params)
125
- }
123
+ const onRedirect = (route: string, params?: any) => {
124
+ navigation.navigate(route, params)
125
+ }
126
126
 
127
- const onProductClick = (product: any) => {
128
- setCurProduct(product)
129
- }
127
+ const onProductClick = (product: any) => {
128
+ setCurProduct(product)
129
+ }
130
130
 
131
- const handleCancel = () => {
132
- handleChangeSearch('')
133
- }
131
+ const handleCancel = () => {
132
+ handleChangeSearch('')
133
+ }
134
134
 
135
- const handleCloseProductModal = () => {
136
- setCurProduct(null)
137
- updateProductModal && updateProductModal(null)
138
- }
135
+ const handleCloseProductModal = () => {
136
+ setCurProduct(null)
137
+ updateProductModal && updateProductModal(null)
138
+ }
139
139
 
140
- const handleCloseCartModal = () => {
141
- setOpenCart(false);
142
- }
140
+ const handleCloseCartModal = () => {
141
+ setOpenCart(false);
142
+ }
143
143
 
144
- const handlerProductAction = () => {
145
- handleCloseProductModal()
146
- }
144
+ const handlerProductAction = () => {
145
+ handleCloseProductModal()
146
+ }
147
147
 
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
- }
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
- 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
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
- const handleTouchDrag = useCallback(() => {
187
- setCategoryClicked(false);
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
- 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
- )
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
- const businessProductslistingProps = {
380
- ...props,
381
- UIComponent: BusinessProductsListingUI
382
- }
383
- return (
384
- <BusinessAndProductList {...businessProductslistingProps} />
385
- )
379
+ const businessProductslistingProps = {
380
+ ...props,
381
+ UIComponent: BusinessProductsListingUI
382
+ }
383
+ return (
384
+ <BusinessAndProductList {...businessProductslistingProps} />
385
+ )
386
386
  }