ordering-ui-react-native 0.17.86 → 0.17.87

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 (19) hide show
  1. package/package.json +1 -1
  2. package/themes/business/src/components/MapView/index.tsx +2 -2
  3. package/themes/original/src/components/BusinessProductsListing/index.tsx +30 -42
  4. package/themes/original/src/components/BusinessesListing/Layout/Original/index.tsx +1 -1
  5. package/themes/original/src/components/Cart/index.tsx +28 -65
  6. package/themes/original/src/components/CartContent/index.tsx +47 -2
  7. package/themes/original/src/components/CartContent/styles.tsx +10 -0
  8. package/themes/original/src/components/Checkout/index.tsx +1 -1
  9. package/themes/original/src/components/MultiCart/index.tsx +41 -54
  10. package/themes/original/src/components/PageBanner/index.tsx +60 -33
  11. package/themes/original/src/components/PageBanner/styles.tsx +0 -7
  12. package/themes/original/src/components/PaymentOptionStripe/styles.tsx +1 -1
  13. package/themes/original/src/components/ProductForm/index.tsx +2 -2
  14. package/themes/original/src/components/SingleOrderCard/index.tsx +15 -17
  15. package/themes/original/src/components/StripeCardsList/index.tsx +1 -1
  16. package/themes/original/src/components/UpsellingProducts/index.tsx +243 -216
  17. package/themes/original/src/components/UpsellingProducts/styles.tsx +12 -1
  18. package/themes/original/src/types/index.tsx +2 -0
  19. package/themes/original/src/utils/index.tsx +0 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ordering-ui-react-native",
3
- "version": "0.17.86",
3
+ "version": "0.17.87",
4
4
  "description": "Reusable components made in react native",
5
5
  "main": "src/index.tsx",
6
6
  "author": "ordering.inc",
package/themes/business/src/components/MapView/index.tsx CHANGED
@@ -103,7 +103,7 @@ const MapViewComponent = (props: MapViewParams) => {
103
103
  return () => {
104
104
  stopFollowUserLocation();
105
105
  };
106
- }, []);
106
+ }, [isFocused]);
107
107
 
108
108
  useFocusEffect(
109
109
  useCallback(() => {
@@ -252,7 +252,7 @@ const MapViewComponent = (props: MapViewParams) => {
252
252
  orderIds={marker.map((order: any) => order.id).join(', ')}
253
253
  />
254
254
  ))}
255
- {Object.values(customerMarkerGroups).map((marker: any) => (
255
+ {Object.values(customerMarkerGroups).map((marker: any) => (
256
256
  <RenderMarker
257
257
  key={marker[0]?.customer_id}
258
258
  marker={marker[0]}
package/themes/original/src/components/BusinessProductsListing/index.tsx CHANGED
@@ -187,47 +187,35 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
187
187
  const handleUpsellingPage = () => {
188
188
  setOpenUpselling(false)
189
189
  setCanOpenUpselling(false)
190
- const cartSelectedHasGroup = currentCart?.group?.uuid
191
- const cartFilterValidation = (cart: any) => cart?.valid && cart?.status !== 2
192
- const cartsGroupLength = cartSelectedHasGroup ? Object.values(orderState.carts).filter((_cart: any) => _cart?.group?.uuid === cartSelectedHasGroup && cartFilterValidation(_cart))?.length : 0
193
- if (cartsGroupLength > 1 && isCheckoutMultiBusinessEnabled) {
194
- props.onNavigationRedirect('CheckoutNavigator', {
195
- screen: 'MultiCheckout',
196
- cartUuid: currentCart?.group?.uuid
197
- })
198
- return
199
- }
200
- const cartGroupsCount: any = {}
201
- Object.values(orderState.carts).filter(_cart => cartFilterValidation(_cart))?.forEach((_cart: any) => {
202
- if (cartGroupsCount[_cart?.group?.uuid]) {
203
- cartGroupsCount[_cart?.group?.uuid] += 1
204
- } else {
205
- cartGroupsCount[_cart?.group?.uuid] = 1
206
- }
207
- })
208
- let groupForTheCart
209
- const groupForAddCartArray = Object.keys(cartGroupsCount).filter(cartGroupUuid => cartGroupsCount[cartGroupUuid] > 0 && cartGroupsCount[cartGroupUuid] < 5)
210
- const max = Math.max(...groupForAddCartArray.map(uuid => cartGroupsCount[uuid]))
211
- const indexes = groupForAddCartArray.filter(uuid => cartGroupsCount[uuid] === max)
212
- if (indexes?.length > 1) {
213
- groupForTheCart = indexes.find(uuid => uuid !== 'undefined')
214
- } else {
215
- groupForTheCart = indexes[0]
216
- }
217
- if (isCheckoutMultiBusinessEnabled && openCarts.length > 1) {
218
- onRedirect('CheckoutNavigator', {
219
- screen: 'MultiCheckout'
220
- })
221
- } else {
222
- onRedirect('CheckoutNavigator', {
223
- screen: 'CheckoutPage',
224
- cartUuid: currentCart?.uuid,
225
- businessLogo: logo,
226
- businessName: business?.name,
227
- cartTotal: currentCart?.total
228
- })
229
- }
230
- setOpenUpselling(false)
190
+ const cartsAvailable: any = Object.values(orderState?.carts)?.filter((cart: any) => cart?.valid && cart?.status !== 2)
191
+ if (cartsAvailable.length === 1) {
192
+ props.onNavigationRedirect('CheckoutNavigator', {
193
+ screen: 'CheckoutPage',
194
+ cartUuid: cartsAvailable[0]?.uuid,
195
+ businessLogo: cartsAvailable[0]?.business?.logo,
196
+ businessName: cartsAvailable[0]?.business?.name,
197
+ cartTotal: cartsAvailable[0]?.total
198
+ })
199
+ } else {
200
+ const groupKeys: any = {}
201
+ cartsAvailable.forEach((_cart: any) => {
202
+ groupKeys[_cart?.group?.uuid]
203
+ ? groupKeys[_cart?.group?.uuid] += 1
204
+ : groupKeys[_cart?.group?.uuid ?? 'null'] = 1
205
+ })
206
+
207
+ if (
208
+ (Object.keys(groupKeys).length === 1 && Object.keys(groupKeys)[0] === 'null') ||
209
+ Object.keys(groupKeys).length > 1
210
+ ) {
211
+ props.onNavigationRedirect('CheckoutNavigator', { screen: 'MultiCart' })
212
+ } else {
213
+ props.onNavigationRedirect('CheckoutNavigator', {
214
+ screen: 'MultiCheckout',
215
+ cartUuid: cartsAvailable[0]?.group?.uuid
216
+ })
217
+ }
218
+ }
231
219
  }
232
220
 
233
221
  const handleCloseUpsellingPage = () => {
@@ -460,7 +448,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
460
448
  />
461
449
  </ProfessionalFilterWrapper>
462
450
  )}
463
- <PageBanner position='app_business_page' />
451
+ <PageBanner position='app_business_page' navigation={navigation} />
464
452
  <View
465
453
  style={{
466
454
  height: 8,
package/themes/original/src/components/BusinessesListing/Layout/Original/index.tsx CHANGED
@@ -572,7 +572,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
572
572
  </>
573
573
  )}
574
574
 
575
- <PageBanner position='app_business_listing' />
575
+ <PageBanner position='app_business_listing' navigation={navigation} />
576
576
 
577
577
  <View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100 }} />
578
578
  <ListWrapper style={{ paddingHorizontal: isChewLayout ? 20 : 40 }}>
package/themes/original/src/components/Cart/index.tsx CHANGED
@@ -8,7 +8,7 @@ import {
8
8
  useValidationFields,
9
9
  } from 'ordering-components/native';
10
10
  import { useTheme } from 'styled-components/native';
11
- import { CContainer, CheckoutAction, Divider, DriverTipsContainer } from './styles';
11
+ import { CContainer, CheckoutAction, DriverTipsContainer } from './styles';
12
12
 
13
13
  import { OSBill, OSTable, OSCoupon, OSTotal, OSRow } from '../OrderSummary/styles';
14
14
 
@@ -43,8 +43,7 @@ const CartUI = (props: any) => {
43
43
  handleRemoveOfferClick,
44
44
  isMultiCheckout,
45
45
  hideDeliveryFee,
46
- hideDriverTip,
47
- showGeneralBtn
46
+ hideDriverTip
48
47
  } = props
49
48
 
50
49
  const theme = useTheme();
@@ -64,9 +63,6 @@ const CartUI = (props: any) => {
64
63
 
65
64
  const isCartPending = cart?.status === 2
66
65
  const isCouponEnabled = validationFields?.fields?.checkout?.coupon?.enabled
67
- const isCheckoutMultiBusinessEnabled: Boolean = configs?.checkout_multi_business_enabled?.value === '1'
68
- const openCarts = (Object.values(orderState?.carts)?.filter((cart: any) => cart?.products && cart?.products?.length && cart?.status !== 2 && cart?.valid_schedule && cart?.valid_products && cart?.valid_address && cart?.valid_maximum && cart?.valid_minimum && !cart?.wallets) || null) || []
69
-
70
66
  const business: any = (orderState?.carts && Object.values(orderState.carts).find((_cart: any) => _cart?.uuid === props.cartuuid)) ?? {}
71
67
  const businessId = business?.business_id ?? null
72
68
  const placeSpotTypes = [4]
@@ -108,47 +104,34 @@ const CartUI = (props: any) => {
108
104
  const handleUpsellingPage = () => {
109
105
  setOpenUpselling(false)
110
106
  setCanOpenUpselling(false)
111
- const cartSelectedHasGroup = cart?.group?.uuid
112
- const cartFilterValidation = (cart : any) => cart?.valid && cart?.status !== 2
113
- const cartsGroupLength = cartSelectedHasGroup ? Object.values(orderState.carts).filter((_cart : any) => _cart?.group?.uuid === cartSelectedHasGroup && cartFilterValidation(_cart))?.length : 0
114
- if (cartsGroupLength > 1 && isCheckoutMultiBusinessEnabled) {
115
- props.onNavigationRedirect('CheckoutNavigator', {
116
- screen: 'MultiCheckout',
117
- cartUuid: cart?.group?.uuid
107
+ const cartsAvailable: any = Object.values(orderState?.carts)?.filter((cart: any) => cart?.valid && cart?.status !== 2)
108
+ if (cartsAvailable.length === 1) {
109
+ onNavigationRedirect('CheckoutNavigator', {
110
+ screen: 'CheckoutPage',
111
+ cartUuid: cartsAvailable[0]?.uuid,
112
+ businessLogo: cartsAvailable[0]?.business?.logo,
113
+ businessName: cartsAvailable[0]?.business?.name,
114
+ cartTotal: cartsAvailable[0]?.total
118
115
  })
119
- return
120
- }
121
- const cartGroupsCount : any = {}
122
- Object.values(orderState.carts).filter(_cart => cartFilterValidation(_cart))?.forEach((_cart : any) => {
123
- if (cartGroupsCount[_cart?.group?.uuid]) {
124
- cartGroupsCount[_cart?.group?.uuid] += 1
125
- } else {
126
- cartGroupsCount[_cart?.group?.uuid] = 1
127
- }
128
- })
129
- let groupForTheCart
130
- const groupForAddCartArray = Object.keys(cartGroupsCount).filter(cartGroupUuid => cartGroupsCount[cartGroupUuid] > 0 && cartGroupsCount[cartGroupUuid] < 5)
131
- const max = Math.max(...groupForAddCartArray.map(uuid => cartGroupsCount[uuid]))
132
- const indexes = groupForAddCartArray.filter(uuid => cartGroupsCount[uuid] === max)
133
- if (indexes?.length > 1) {
134
- groupForTheCart = indexes.find(uuid => uuid !== 'undefined')
135
116
  } else {
136
- groupForTheCart = indexes[0]
137
- }
138
- if (isCheckoutMultiBusinessEnabled && openCarts.length > 1 && groupForTheCart) {
139
- props.onNavigationRedirect('CheckoutNavigator', {
140
- screen: 'MultiCart',
141
- cartUuid: cart.uuid,
142
- cartGroup: groupForTheCart === 'undefined' ? 'create' : groupForTheCart
143
- })
144
- } else {
145
- props.onNavigationRedirect('CheckoutNavigator', {
146
- screen: 'CheckoutPage',
147
- cartUuid: cart?.uuid,
148
- businessLogo: cart?.business?.logo,
149
- businessName: cart?.business?.name,
150
- cartTotal: cart?.total
117
+ const groupKeys: any = {}
118
+ cartsAvailable.forEach((_cart: any) => {
119
+ groupKeys[_cart?.group?.uuid]
120
+ ? groupKeys[_cart?.group?.uuid] += 1
121
+ : groupKeys[_cart?.group?.uuid ?? 'null'] = 1
151
122
  })
123
+
124
+ if (
125
+ (Object.keys(groupKeys).length === 1 && Object.keys(groupKeys)[0] === 'null') ||
126
+ Object.keys(groupKeys).length > 1
127
+ ) {
128
+ onNavigationRedirect('CheckoutNavigator', { screen: 'MultiCart' })
129
+ } else {
130
+ onNavigationRedirect('CheckoutNavigator', {
131
+ screen: 'MultiCheckout',
132
+ cartUuid: cartsAvailable[0]?.group?.uuid
133
+ })
134
+ }
152
135
  }
153
136
  }
154
137
 
@@ -195,26 +178,6 @@ const CartUI = (props: any) => {
195
178
 
196
179
  return (
197
180
  <CContainer>
198
- {showGeneralBtn && cart?.valid_products &&(
199
- <CheckoutAction style={{ marginTop: 0 }}>
200
- <OButton
201
- text={(subtotalWithTaxes >= cart?.minimum || !cart?.minimum) && cart?.valid_address ? (
202
- !openUpselling !== canOpenUpselling ? t('CHECKOUT', 'Checkout') : t('LOADING', 'Loading')
203
- ) : !cart?.valid_address ? (
204
- `${t('OUT_OF_COVERAGE', 'Out of Coverage')}`
205
- ) : (
206
- `${t('MINIMUN_SUBTOTAL_ORDER', 'Minimum subtotal order:')} ${parsePrice(cart?.minimum)}`
207
- )}
208
- bgColor={(subtotalWithTaxes < cart?.minimum || !cart?.valid_address) ? theme.colors.secundary : theme.colors.primary}
209
- isDisabled={(openUpselling && !canOpenUpselling) || subtotalWithTaxes < cart?.minimum || !cart?.valid_address}
210
- borderColor={theme.colors.primary}
211
- imgRightSrc={null}
212
- textStyle={{ color: 'white', textAlign: 'center', flex: 1 }}
213
- onClick={() => handleUpsellingPage()}
214
- style={{ width: '100%', flexDirection: 'row', justifyContent: 'center', borderRadius: 7.6, shadowOpacity: 0 }}
215
- />
216
- </CheckoutAction>
217
- )}
218
181
  {openUpselling && (
219
182
  <UpsellingProducts
220
183
  handleUpsellingPage={handleUpsellingPage}
@@ -437,7 +400,7 @@ const CartUI = (props: any) => {
437
400
  <DriverTips
438
401
  uuid={cart?.uuid}
439
402
  businessId={cart?.business_id}
440
- driverTipsOptions={driverTipsOptions}
403
+ driverTipsOptions={!driverTipsOptions.includes(0) ? [0, ...driverTipsOptions] : driverTipsOptions}
441
404
  isFixedPrice={parseInt(configs?.driver_tip_type?.value, 10) === 1 || !!parseInt(configs?.driver_tip_use_custom?.value, 10)}
442
405
  isDriverTipUseCustom={!!parseInt(configs?.driver_tip_use_custom?.value, 10)}
443
406
  driverTip={parseInt(configs?.driver_tip_type?.value, 10) === 1 || !!parseInt(configs?.driver_tip_use_custom?.value, 10)
package/themes/original/src/components/CartContent/index.tsx CHANGED
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
2
2
  import { View } from 'react-native';
3
3
  import { useLanguage, useConfig } from 'ordering-components/native';
4
4
  import { useTheme } from 'styled-components/native';
5
- import { CCContainer, CCNotCarts, CCList } from './styles';
5
+ import { CCContainer, CCNotCarts, CCList, CheckoutAction } from './styles';
6
6
 
7
7
  import { Cart } from '../Cart';
8
8
  import { OButton, OText } from '../shared';
@@ -22,6 +22,38 @@ export const CartContent = (props: any) => {
22
22
 
23
23
  const isChewLayout = theme?.header?.components?.layout?.type === 'chew'
24
24
  const isMultiCheckout = configs?.checkout_multi_business_enabled?.value === '1'
25
+ const cartsAvailable: any = Object.values(carts)?.filter((cart: any) => cart?.valid && cart?.status !== 2)
26
+
27
+ const handleCheckoutRedirect = () => {
28
+ if (cartsAvailable.length === 1) {
29
+ onNavigationRedirect('CheckoutNavigator', {
30
+ screen: 'CheckoutPage',
31
+ cartUuid: cartsAvailable[0]?.uuid,
32
+ businessLogo: cartsAvailable[0]?.business?.logo,
33
+ businessName: cartsAvailable[0]?.business?.name,
34
+ cartTotal: cartsAvailable[0]?.total
35
+ })
36
+ } else {
37
+ const groupKeys: any = {}
38
+ cartsAvailable.forEach((_cart: any) => {
39
+ groupKeys[_cart?.group?.uuid]
40
+ ? groupKeys[_cart?.group?.uuid] += 1
41
+ : groupKeys[_cart?.group?.uuid ?? 'null'] = 1
42
+ })
43
+
44
+ if (
45
+ (Object.keys(groupKeys).length === 1 && Object.keys(groupKeys)[0] === 'null') ||
46
+ Object.keys(groupKeys).length > 1
47
+ ) {
48
+ onNavigationRedirect('CheckoutNavigator', { screen: 'MultiCart' })
49
+ } else {
50
+ onNavigationRedirect('CheckoutNavigator', {
51
+ screen: 'MultiCheckout',
52
+ cartUuid: cartsAvailable[0]?.group?.uuid
53
+ })
54
+ }
55
+ }
56
+ }
25
57
 
26
58
  return (
27
59
  <CCContainer
@@ -34,7 +66,6 @@ export const CartContent = (props: any) => {
34
66
  {cart.products.length > 0 && (
35
67
  <>
36
68
  <Cart
37
- showGeneralBtn={i === 0 && isMultiCheckout}
38
69
  singleBusiness={props.singleBusiness}
39
70
  isFranchiseApp={props.isFranchiseApp}
40
71
  cart={cart}
@@ -50,6 +81,20 @@ export const CartContent = (props: any) => {
50
81
  )}
51
82
  </CCList>
52
83
  ))}
84
+ {isMultiCheckout && (
85
+ <CheckoutAction style={{ marginTop: 0 }}>
86
+ <OButton
87
+ text={t('CHECKOUT', 'Checkout')}
88
+ bgColor={!cartsAvailable.length ? theme.colors.secundary : theme.colors.primary}
89
+ isDisabled={!cartsAvailable.length}
90
+ borderColor={theme.colors.primary}
91
+ imgRightSrc={null}
92
+ textStyle={{ color: 'white', textAlign: 'center', flex: 1 }}
93
+ onClick={() => handleCheckoutRedirect()}
94
+ style={{ width: '100%', flexDirection: 'row', justifyContent: 'center', borderRadius: 7.6, shadowOpacity: 0 }}
95
+ />
96
+ </CheckoutAction>
97
+ )}
53
98
  </>
54
99
  )}
55
100
  {(!carts || carts?.length === 0) && (
package/themes/original/src/components/CartContent/styles.tsx CHANGED
@@ -17,3 +17,13 @@ export const CCNotCarts = styled.View`
17
17
  export const CCList = styled.ScrollView`
18
18
  padding: 10px 0px;
19
19
  `
20
+
21
+ export const CheckoutAction = styled.View`
22
+ width: 100%;
23
+ display: flex;
24
+ justify-content: center;
25
+ flex-direction: column;
26
+ align-items: center;
27
+ margin-top: 10px;
28
+ margin-bottom: 10px;
29
+ `
package/themes/original/src/components/Checkout/index.tsx CHANGED
@@ -557,7 +557,7 @@ const CheckoutUI = (props: any) => {
557
557
  <DriverTips
558
558
  uuid={cartUuid}
559
559
  businessId={cart?.business_id}
560
- driverTipsOptions={driverTipsOptions}
560
+ driverTipsOptions={!driverTipsOptions.includes(0) ? [0, ...driverTipsOptions] : driverTipsOptions}
561
561
  isFixedPrice={parseInt(configs?.driver_tip_type?.value, 10) === 1 || !!parseInt(configs?.driver_tip_use_custom?.value, 10)}
562
562
  isDriverTipUseCustom={!!parseInt(configs?.driver_tip_use_custom?.value, 10)}
563
563
  driverTip={parseInt(configs?.driver_tip_type?.value, 10) === 1 || !!parseInt(configs?.driver_tip_use_custom?.value, 10)
package/themes/original/src/components/MultiCart/index.tsx CHANGED
@@ -1,63 +1,50 @@
1
1
  import React from 'react'
2
- import { ChAddress, ChContainer, ChSection, ChUserDetails, DeliveryOptionsContainer } from '../Checkout/styles'
2
+ import { View } from 'react-native'
3
3
  import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder'
4
- import { Container } from '../../layouts/Container';
5
- import { View, StyleSheet } from 'react-native'
6
4
  import { useTheme } from 'styled-components/native';
7
5
  import { MultiCartCreate } from 'ordering-components/native'
8
6
 
9
- export const MultiCartUI = () => {
10
- const theme = useTheme();
11
-
12
- const styles = StyleSheet.create({
13
- pagePadding: {
14
- paddingHorizontal: 40
15
- }
16
- })
17
-
18
- return (
19
- <>
20
- <Container noPadding>
21
- <ChContainer style={styles.pagePadding}>
22
- <ChSection>
23
- <ChUserDetails>
24
- <Placeholder Animation={Fade}>
25
- <PlaceholderLine height={20} />
26
- <PlaceholderLine height={12} />
27
- <PlaceholderLine height={12} />
28
- <PlaceholderLine height={12} style={{ marginBottom: 20 }} />
29
- </Placeholder>
30
- </ChUserDetails>
31
- <View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginHorizontal: -40 }} />
32
- </ChSection>
33
- <DeliveryOptionsContainer>
34
- <View style={{ height: 110 }}>
35
- <Placeholder Animation={Fade}>
36
- <PlaceholderLine height={20} />
37
- <PlaceholderLine height={40} />
38
- </Placeholder>
39
- </View>
40
- </DeliveryOptionsContainer>
41
- <ChSection>
42
- <ChAddress>
43
- <Placeholder Animation={Fade}>
44
- <PlaceholderLine height={20} style={{ marginBottom: 50 }} />
45
- <PlaceholderLine height={100} />
46
- </Placeholder>
47
- </ChAddress>
48
- <View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginTop: 13, marginHorizontal: -40 }} />
49
- </ChSection>
50
- </ChContainer>
51
- </Container>
7
+ import { Container } from '../../layouts/Container';
8
+ import { ChContainer, ChSection, ChUserDetails } from '../Checkout/styles'
52
9
 
53
- </>
54
- )
10
+ export const MultiCartUI = () => {
11
+ const theme = useTheme();
12
+ return (
13
+ <Container noPadding>
14
+ <ChContainer style={{ paddingHorizontal: 40 }}>
15
+ <ChSection>
16
+ <ChUserDetails>
17
+ <Placeholder Animation={Fade}>
18
+ <PlaceholderLine height={20} />
19
+ <PlaceholderLine height={20} />
20
+ <PlaceholderLine height={20} />
21
+ <PlaceholderLine height={20} style={{ marginBottom: 20 }} />
22
+ </Placeholder>
23
+ <View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginHorizontal: -40, marginBottom: 20 }} />
24
+ <Placeholder Animation={Fade}>
25
+ <PlaceholderLine height={20} />
26
+ <PlaceholderLine height={20} />
27
+ <PlaceholderLine height={20} />
28
+ <PlaceholderLine height={20} style={{ marginBottom: 20 }} />
29
+ </Placeholder>
30
+ <View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginHorizontal: -40, marginBottom: 20 }} />
31
+ <Placeholder Animation={Fade}>
32
+ <PlaceholderLine height={20} />
33
+ <PlaceholderLine height={120} style={{ marginBottom: 20, borderRadius: 8 }} />
34
+ <PlaceholderLine height={20} />
35
+ <PlaceholderLine height={20} />
36
+ </Placeholder>
37
+ </ChUserDetails>
38
+ </ChSection>
39
+ </ChContainer>
40
+ </Container>
41
+ )
55
42
  }
56
43
 
57
- export const MultiCart = (props : any) => {
58
- const mulcartProps = {
59
- ...props,
60
- UIComponent: MultiCartUI
61
- }
62
- return <MultiCartCreate {...mulcartProps} />
44
+ export const MultiCart = (props: any) => {
45
+ const mulcartProps = {
46
+ ...props,
47
+ UIComponent: MultiCartUI
48
+ }
49
+ return <MultiCartCreate {...mulcartProps} />
63
50
  }
package/themes/original/src/components/PageBanner/index.tsx CHANGED
@@ -1,17 +1,17 @@
1
1
  import React, { useRef } from 'react'
2
2
  import { useUtils, PageBanner as PageBannerController } from 'ordering-components/native'
3
-
4
3
  import { View, StyleSheet, Dimensions, TouchableOpacity } from 'react-native'
5
4
  import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
6
5
  import Carousel from 'react-native-snap-carousel'
7
6
  import FastImage from 'react-native-fast-image';
8
7
  import IconAntDesign from 'react-native-vector-icons/AntDesign';
9
8
  import { useTheme } from 'styled-components/native';
10
- import { PageBannerWrapper, ArrowButtonsContainer } from './styles'
9
+ import { PageBannerWrapper } from './styles'
11
10
 
12
11
  const PageBannerUI = (props: any) => {
13
12
  const {
14
- pageBannerState
13
+ pageBannerState,
14
+ navigation
15
15
  } = props
16
16
 
17
17
  const theme = useTheme();
@@ -25,7 +25,8 @@ const PageBannerUI = (props: any) => {
25
25
  height: 300,
26
26
  },
27
27
  swiperButton: {
28
- marginHorizontal: 25,
28
+ position: 'absolute',
29
+ zIndex: 100,
29
30
  alignItems: 'center',
30
31
  justifyContent: 'center',
31
32
  width: 32,
@@ -39,15 +40,43 @@ const PageBannerUI = (props: any) => {
39
40
  }
40
41
  })
41
42
 
43
+ const onRedirect = (route: string, params?: any) => {
44
+ navigation.navigate(route, params)
45
+ }
46
+
47
+ const handleGoToPage = (action: any) => {
48
+ if (!action?.url) return
49
+ let slug
50
+ if (action.type === 'business') {
51
+ slug = action.url.split('store/')[1]
52
+ onRedirect('Business', {
53
+ store: slug
54
+ })
55
+ }
56
+ if (action.type === 'product') {
57
+ slug = action.url.split('store/')[1]?.split('?')[0]
58
+ onRedirect('ProductDetails', {
59
+ businessSlug: slug,
60
+ businessId: action.business_id,
61
+ categoryId: action.category_id,
62
+ productId: action.product_id
63
+ })
64
+ }
65
+ }
66
+
42
67
  const renderItem = ({ item, index }) => {
43
68
  return (
44
- <View style={styles.sliderWrapper}>
45
- <FastImage
46
- style={{ height: '100%', width: '100%' }}
47
- resizeMode='cover'
48
- source={{ uri: optimizeImage(item.url, 'h_300,c_limit') }}
49
- />
50
- </View>
69
+ <TouchableOpacity
70
+ onPress={() => handleGoToPage(item.action)}
71
+ >
72
+ <View style={styles.sliderWrapper}>
73
+ <FastImage
74
+ style={{ height: '100%', width: '100%' }}
75
+ resizeMode='cover'
76
+ source={{ uri: optimizeImage(item.url, 'h_300,c_limit') }}
77
+ />
78
+ </View>
79
+ </TouchableOpacity>
51
80
  )
52
81
  }
53
82
 
@@ -68,28 +97,26 @@ const PageBannerUI = (props: any) => {
68
97
  <>
69
98
  {pageBannerState.banner?.items && pageBannerState.banner?.items.length > 0 && (
70
99
  <PageBannerWrapper>
71
- <ArrowButtonsContainer>
72
- <TouchableOpacity
73
- style={styles.swiperButton}
74
- onPress={() => carouselRef.current.snapToPrev()}
75
- >
76
- <IconAntDesign
77
- name="caretleft"
78
- color={theme.colors.white}
79
- size={13}
80
- />
81
- </TouchableOpacity>
82
- <TouchableOpacity
83
- style={styles.swiperButton}
84
- onPress={() => carouselRef.current.snapToNext()}
85
- >
86
- <IconAntDesign
87
- name="caretright"
88
- color={theme.colors.white}
89
- size={13}
90
- />
91
- </TouchableOpacity>
92
- </ArrowButtonsContainer>
100
+ <TouchableOpacity
101
+ style={[styles.swiperButton, { left: 25 }]}
102
+ onPress={() => carouselRef.current.snapToPrev()}
103
+ >
104
+ <IconAntDesign
105
+ name="caretleft"
106
+ color={theme.colors.white}
107
+ size={13}
108
+ />
109
+ </TouchableOpacity>
110
+ <TouchableOpacity
111
+ style={[styles.swiperButton, { right: 25 }]}
112
+ onPress={() => carouselRef.current.snapToNext()}
113
+ >
114
+ <IconAntDesign
115
+ name="caretright"
116
+ color={theme.colors.white}
117
+ size={13}
118
+ />
119
+ </TouchableOpacity>
93
120
  <Carousel
94
121
  ref={carouselRef}
95
122
  loop={pageBannerState.banner?.items.length > 1}
package/themes/original/src/components/PageBanner/styles.tsx CHANGED
@@ -9,10 +9,3 @@ export const PageBannerWrapper = styled.View`
9
9
  flex-direction: row;
10
10
  align-items: center;
11
11
  `
12
- export const ArrowButtonsContainer = styled.View`
13
- position: absolute;
14
- z-index: 100;
15
- flex-direction: row;
16
- justify-content: space-between;
17
- width: 100%;
18
- `
package/themes/original/src/components/PaymentOptionStripe/styles.tsx CHANGED
@@ -39,7 +39,7 @@ export const OSItem = styled.View`
39
39
  flex-direction: row;
40
40
  justify-content: space-between;
41
41
  align-items: center;
42
- padding: 20px 0px;
42
+ padding: 10px 0px;
43
43
  `;
44
44
 
45
45
  export const OSItemContent = styled.TouchableOpacity`
package/themes/original/src/components/ProductForm/index.tsx CHANGED
@@ -553,7 +553,7 @@ export const ProductOptionsUI = (props: any) => {
553
553
  >
554
554
  {(String(img).includes('http') || typeof img === 'number') ? (
555
555
  <FastImage
556
- style={{ height: '100%', opacity: isSoldOut ? 0.5 : 1, aspectRatio: 3 / 2 }}
556
+ style={{ height: '100%', opacity: isSoldOut ? 0.5 : 1, aspectRatio: 16 / 9 }}
557
557
  source={typeof img !== 'number' ? {
558
558
  uri: optimizeImage(img, 'h_1024,c_limit'),
559
559
  priority: FastImage.priority.normal,
@@ -581,7 +581,7 @@ export const ProductOptionsUI = (props: any) => {
581
581
  paddingVertical: 15
582
582
  }}
583
583
  >
584
- {gallery?.length > 0 && gallery.map((img, index) => (
584
+ {gallery?.length > 1 && gallery.map((img, index) => (
585
585
  <TouchableOpacity
586
586
  key={index}
587
587
  onPress={() => handleClickThumb(index)}
package/themes/original/src/components/SingleOrderCard/index.tsx CHANGED
@@ -209,24 +209,22 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
209
209
  <>
210
210
  {order?.business?.length > 1 ? (
211
211
  <MultiLogosContainer>
212
- {order?.business?.map((business: any, i: number) => (
213
- <View key={business?.id}>
214
- {i > 1 ? (
215
- <>
216
- {console.log(order?.business?.length - 2)}
217
- <OText mRight={3}> + {order?.business?.length - 2}</OText>
218
- </>
219
- ) : (
220
- <Logo style={styles.logoWrapper} isMulti>
221
- <OIcon
222
- url={optimizeImage(business?.logo, 'h_300,c_limit')}
223
- src={optimizeImage(!business?.logo && theme?.images?.dummies?.businessLogo, 'h_300,c_limit')}
224
- style={styles.minilogo}
225
- />
226
- </Logo>
227
- )}
228
- </View>
212
+ {order?.business?.map((business: any, i: number) => i < 2 && (
213
+ <Logo
214
+ isMulti
215
+ key={business?.id}
216
+ style={styles.logoWrapper}
217
+ >
218
+ <OIcon
219
+ url={optimizeImage(business?.logo, 'h_300,c_limit')}
220
+ src={optimizeImage(!business?.logo && theme?.images?.dummies?.businessLogo, 'h_300,c_limit')}
221
+ style={styles.minilogo}
222
+ />
223
+ </Logo>
229
224
  ))}
225
+ {order?.business?.length > 1 && (order?.business?.length - 2) > 0 && (
226
+ <OText mRight={3}> + {order?.business?.length - 2}</OText>
227
+ )}
230
228
  </MultiLogosContainer>
231
229
  ) : (
232
230
  <Logo style={styles.logoWrapper}>
package/themes/original/src/components/StripeCardsList/index.tsx CHANGED
@@ -128,7 +128,7 @@ const styles = StyleSheet.create({
128
128
  },
129
129
  cardsList: {
130
130
  width: '100%',
131
- maxHeight: 130
131
+ maxHeight: 150
132
132
  },
133
133
  })
134
134
 
package/themes/original/src/components/UpsellingProducts/index.tsx CHANGED
@@ -1,244 +1,271 @@
1
1
  import React, { useState, useEffect } from 'react'
2
2
  import { Platform, StyleSheet, TouchableOpacity, View } from 'react-native'
3
3
  import {
4
- UpsellingPage as UpsellingPageController,
5
- useUtils,
6
- useLanguage,
7
- useOrder
4
+ UpsellingPage as UpsellingPageController,
5
+ useUtils,
6
+ useLanguage,
7
+ useOrder,
8
+ useConfig
8
9
  } from 'ordering-components/native'
9
10
  import { useTheme } from 'styled-components/native';
10
11
  import { OText, OIcon, OBottomPopup, OButton } from '../shared'
11
12
  import { UpsellingProductsParams } from '../../types'
12
13
  import {
13
- Container,
14
- UpsellingContainer,
15
- Item,
16
- Details,
17
- AddButton,
18
- TopBar,
19
- TopActions
14
+ Container,
15
+ UpsellingContainer,
16
+ Item,
17
+ Details,
18
+ AddButton,
19
+ CartList,
20
+ CartDivider
20
21
  } from './styles'
21
22
  import { OrderSummary } from '../OrderSummary';
23
+ import { Cart } from '../Cart';
22
24
  import { ScrollView } from 'react-native-gesture-handler';
23
25
  import { useSafeAreaInsets } from 'react-native-safe-area-context';
24
26
 
25
27
  const UpsellingProductsUI = (props: UpsellingProductsParams) => {
26
- const {
27
- isCustomMode,
28
- upsellingProducts,
29
- business,
30
- handleUpsellingPage,
31
- handleCloseUpsellingPage,
32
- openUpselling,
33
- canOpenUpselling,
34
- setCanOpenUpselling,
35
- isFromCart,
36
- onNavigationRedirect,
37
- onGoBack
38
- } = props
28
+ const {
29
+ isCustomMode,
30
+ upsellingProducts,
31
+ business,
32
+ handleUpsellingPage,
33
+ handleCloseUpsellingPage,
34
+ openUpselling,
35
+ canOpenUpselling,
36
+ setCanOpenUpselling,
37
+ isFromCart,
38
+ onNavigationRedirect,
39
+ onGoBack
40
+ } = props
39
41
 
40
- const theme = useTheme();
42
+ const theme = useTheme();
41
43
 
42
- const styles = StyleSheet.create({
43
- imageStyle: {
44
- width: 73,
45
- height: 73,
46
- resizeMode: 'cover',
47
- borderRadius: 7.6,
48
- },
49
- closeUpsellingButton: {
50
- borderRadius: 7.6,
51
- borderColor: theme.colors.primary,
52
- backgroundColor: theme.colors.primary,
53
- borderWidth: 1,
54
- alignSelf: 'center',
55
- height: 44,
56
- shadowOpacity: 0,
57
- width: '80%',
58
- },
59
- cancelBtn: {
60
- paddingHorizontal: 18,
61
- borderWidth: 1,
62
- borderRadius: 7.6,
63
- borderColor: theme.colors.textSecondary,
64
- height: 38
65
- },
66
- headerItem: {
67
- flexDirection: 'row',
68
- alignItems: 'center',
69
- marginVertical: 2,
70
- marginHorizontal: 20,
71
- },
72
- btnBackArrow: {
73
- borderWidth: 0,
74
- width: 26,
75
- height: 26,
76
- backgroundColor: theme.colors.clear,
77
- borderColor: theme.colors.clear,
78
- shadowColor: theme.colors.clear,
79
- paddingLeft: 0,
80
- paddingRight: 0,
81
- marginLeft: 20,
82
- marginBottom: 10
83
- },
84
- })
44
+ const styles = StyleSheet.create({
45
+ imageStyle: {
46
+ width: 73,
47
+ height: 73,
48
+ resizeMode: 'cover',
49
+ borderRadius: 7.6,
50
+ },
51
+ closeUpsellingButton: {
52
+ borderRadius: 7.6,
53
+ borderColor: theme.colors.primary,
54
+ backgroundColor: theme.colors.primary,
55
+ borderWidth: 1,
56
+ alignSelf: 'center',
57
+ height: 44,
58
+ shadowOpacity: 0,
59
+ width: '80%',
60
+ },
61
+ cancelBtn: {
62
+ paddingHorizontal: 18,
63
+ borderWidth: 1,
64
+ borderRadius: 7.6,
65
+ borderColor: theme.colors.textSecondary,
66
+ height: 38
67
+ },
68
+ headerItem: {
69
+ flexDirection: 'row',
70
+ alignItems: 'center',
71
+ marginVertical: 2,
72
+ marginHorizontal: 20,
73
+ },
74
+ btnBackArrow: {
75
+ borderWidth: 0,
76
+ width: 26,
77
+ height: 26,
78
+ backgroundColor: theme.colors.clear,
79
+ borderColor: theme.colors.clear,
80
+ shadowColor: theme.colors.clear,
81
+ paddingLeft: 0,
82
+ paddingRight: 0,
83
+ marginLeft: 20,
84
+ marginBottom: 10
85
+ },
86
+ })
85
87
 
86
- const [modalIsOpen, setModalIsOpen] = useState(false)
87
- const [{ carts }] = useOrder()
88
- const [{ parsePrice }] = useUtils()
89
- const [, t] = useLanguage()
90
- const { bottom } = useSafeAreaInsets()
91
- const [isCheckout, setIsCheckout] = useState(false)
88
+ const [modalIsOpen, setModalIsOpen] = useState(false)
89
+ const [{ carts }] = useOrder()
90
+ const [{ parsePrice }] = useUtils()
91
+ const [{ configs }] = useConfig()
92
+ const [, t] = useLanguage()
93
+ const { bottom } = useSafeAreaInsets()
94
+ const [isCheckout, setIsCheckout] = useState(false)
95
+ const [isCartsLoading, setIsCartsLoading] = useState(false)
92
96
 
93
- const cart = carts?.[`businessId:${props.businessId}`] ?? {}
94
- const cartProducts = cart?.products?.length
95
- ? cart?.products.map((product: any) => product.id)
96
- : []
97
+ const isMultiCheckout = configs?.checkout_multi_business_enabled?.value === '1'
98
+ const isChewLayout = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
99
+ const showCartList = isChewLayout
100
+ const commentDelayTime = isChewLayout ? 500 : null
97
101
 
98
- const productsList = !upsellingProducts.loading && !upsellingProducts.error
99
- ? upsellingProducts?.products?.length
100
- ? upsellingProducts?.products.filter((product: any) => !cartProducts.includes(product.id))
101
- : (props?.products ?? []).filter((product: any) => !cartProducts.includes(product.id)) ?? []
102
- : []
102
+ const cart = carts?.[`businessId:${props.businessId}`] ?? {}
103
+ const cartList = (carts && Object.values(carts).filter((_cart: any) => _cart?.products?.length > 0 && _cart.uuid !== cart?.uuid)) || []
104
+ const cartProducts = cart?.products?.length
105
+ ? cart?.products.map((product: any) => product.id)
106
+ : []
103
107
 
104
- useEffect(() => {
105
- if (!isCustomMode && !props.products) {
106
- if (!upsellingProducts.loading) {
107
- if (upsellingProducts?.products?.length && !isFromCart) {
108
- setCanOpenUpselling && setCanOpenUpselling(true)
109
- } else {
110
- handleUpsellingPage && handleUpsellingPage()
111
- }
112
- }
113
- }
114
- }, [upsellingProducts.loading, upsellingProducts?.products.length])
108
+ const productsList = !upsellingProducts.loading && !upsellingProducts.error
109
+ ? upsellingProducts?.products?.length
110
+ ? upsellingProducts?.products.filter((product: any) => !cartProducts.includes(product.id))
111
+ : (props?.products ?? []).filter((product: any) => !cartProducts.includes(product.id)) ?? []
112
+ : []
115
113
 
116
- const handleFormProduct = (product: any) => {
117
- onNavigationRedirect && onNavigationRedirect('ProductDetails', {
118
- product: product,
119
- businessId: product?.api?.businessId,
120
- businessSlug: business.slug,
121
- })
122
- }
114
+ useEffect(() => {
115
+ if (!isCustomMode && !props.products) {
116
+ if (!upsellingProducts.loading) {
117
+ if (upsellingProducts?.products?.length && !isFromCart) {
118
+ setCanOpenUpselling && setCanOpenUpselling(true)
119
+ } else {
120
+ handleUpsellingPage && handleUpsellingPage()
121
+ }
122
+ }
123
+ }
124
+ }, [upsellingProducts.loading, upsellingProducts?.products.length])
123
125
 
124
- const UpsellingLayout = () => {
125
- return (
126
- <Container>
127
- <UpsellingContainer
128
- horizontal
129
- showsHorizontalScrollIndicator={false}
130
- contentContainerStyle={{ paddingHorizontal: Platform.OS === 'ios' ? 40 : 0 }}
131
- >
132
- {
133
- !upsellingProducts.loading && (
134
- <>
135
- {
136
- !upsellingProducts.error ? productsList.map((product: any, i: number) => (
137
- <Item key={`${product.id}_${i}`}>
138
- <View style={{ flexBasis: '57%' }}>
139
- <Details>
140
- <OText size={12} lineHeight={18} numberOfLines={1} ellipsizeMode='tail'>{product.name}</OText>
141
- <OText size={12} lineHeight={18} color={theme.colors.textNormal}>{parsePrice(product.price)}</OText>
142
- </Details>
143
- <AddButton onPress={() => handleFormProduct(product)}>
144
- <OText size={10} color={theme.colors.primary}>{t('ADD', 'Add')}</OText>
145
- </AddButton>
146
- </View>
147
- <View>
148
- <OIcon url={product?.images || theme?.images?.dummies?.product} style={styles.imageStyle} />
149
- </View>
150
- </Item>
151
- )) : (
152
- <OText>
153
- {upsellingProducts.message}
154
- </OText>
155
- )
156
- }
157
- </>
158
- )
159
- }
160
- </UpsellingContainer>
161
- </Container>
162
- )
163
- }
126
+ const handleFormProduct = (product: any) => {
127
+ onNavigationRedirect && onNavigationRedirect('ProductDetails', {
128
+ product: product,
129
+ businessId: product?.api?.businessId,
130
+ businessSlug: business.slug,
131
+ })
132
+ }
164
133
 
165
- const UpsellingContent = () => {
166
- return (
167
- <>
168
- <View style={{ ...styles.headerItem, flex: 1, marginTop: Platform.OS == 'ios' ? 35 : 14 }}>
169
- <TouchableOpacity onPress={() => onGoBack()} style={styles.btnBackArrow}>
170
- <OIcon src={theme.images.general.arrow_left} color={theme.colors.textNormal} />
171
- </TouchableOpacity>
172
- </View>
173
- <ScrollView style={{ marginTop: 10, marginBottom: props.isPage ? 40 : bottom + (Platform.OS == 'ios' ? 96 : 130) }} showsVerticalScrollIndicator={false}>
174
- {productsList.length > 0 &&
175
- <View style={{ paddingHorizontal: 40, overflow: 'visible' }}>
176
- <OText size={16} lineHeight={24} weight={'500'}>{t('WANT_SOMETHING_ELSE', 'Do you want something else?')}</OText>
177
- <UpsellingLayout />
178
- </View>
179
- }
180
- <View style={{ paddingHorizontal: 40 }}>
181
- <OText size={20} lineHeight={30} weight={600} style={{ marginTop: 10, marginBottom: 17 }}>{t('YOUR_CART', 'Your cart')}</OText>
182
- <OrderSummary
183
- cart={cart}
184
- isCartPending={cart?.status === 2}
185
- onNavigationRedirect={onNavigationRedirect}
186
- />
187
- </View>
188
- </ScrollView>
189
- <View
190
- style={{
191
- alignItems: 'center',
192
- bottom: props.isPage ? Platform.OS === 'ios' ? 0 : 20 : Platform.OS === 'ios' ? bottom + 59 : bottom + 125
193
- }}
194
- >
195
- <OButton
196
- imgRightSrc=''
197
- text={t('CHECKOUT', 'Checkout')}
198
- style={{ ...styles.closeUpsellingButton }}
199
- textStyle={{ color: theme.colors.white, fontSize: 14 }}
200
- onClick={() => {
201
- handleUpsellingPage()
202
- setIsCheckout(true)
203
- }}
204
- />
205
- </View>
206
- </>
207
- )
208
- }
134
+ const UpsellingLayout = () => {
135
+ return (
136
+ <Container>
137
+ <UpsellingContainer
138
+ horizontal
139
+ showsHorizontalScrollIndicator={false}
140
+ contentContainerStyle={{ paddingHorizontal: Platform.OS === 'ios' ? 40 : 0 }}
141
+ >
142
+ {
143
+ !upsellingProducts.loading && (
144
+ <>
145
+ {
146
+ !upsellingProducts.error ? productsList.map((product: any, i: number) => (
147
+ <Item key={`${product.id}_${i}`}>
148
+ <View style={{ flexBasis: '57%' }}>
149
+ <Details>
150
+ <OText size={12} lineHeight={18} numberOfLines={1} ellipsizeMode='tail'>{product.name}</OText>
151
+ <OText size={12} lineHeight={18} color={theme.colors.textNormal}>{parsePrice(product.price)}</OText>
152
+ </Details>
153
+ <AddButton onPress={() => handleFormProduct(product)}>
154
+ <OText size={10} color={theme.colors.primary}>{t('ADD', 'Add')}</OText>
155
+ </AddButton>
156
+ </View>
157
+ <View>
158
+ <OIcon url={product?.images || theme?.images?.dummies?.product} style={styles.imageStyle} />
159
+ </View>
160
+ </Item>
161
+ )) : (
162
+ <OText>
163
+ {upsellingProducts.message}
164
+ </OText>
165
+ )
166
+ }
167
+ </>
168
+ )
169
+ }
170
+ </UpsellingContainer>
171
+ </Container>
172
+ )
173
+ }
209
174
 
210
- return (
211
- <>
212
- {isCustomMode ? (
213
- <UpsellingLayout />
214
- ) : (
215
- <>
216
- {props.isPage ? (
217
- <UpsellingContent />
218
- ) : (
219
- canOpenUpselling && !modalIsOpen && (
220
- <OBottomPopup
221
- title={''}
222
- open={openUpselling}
223
- onClose={() => handleUpsellingPage()}
224
- isStatusBar
225
- >
226
- <UpsellingContent />
227
- </OBottomPopup>
228
- )
229
- )}
230
- </>
231
- )}
232
- </>
233
- )
175
+ const UpsellingContent = () => {
176
+ return (
177
+ <>
178
+ <View style={{ ...styles.headerItem, flex: 1, marginTop: Platform.OS == 'ios' ? 35 : 14 }}>
179
+ <TouchableOpacity onPress={() => onGoBack()} style={styles.btnBackArrow}>
180
+ <OIcon src={theme.images.general.arrow_left} color={theme.colors.textNormal} />
181
+ </TouchableOpacity>
182
+ </View>
183
+ <ScrollView style={{ marginTop: 10, marginBottom: props.isPage ? 40 : bottom + (Platform.OS == 'ios' ? 96 : 130) }} showsVerticalScrollIndicator={false}>
184
+ {productsList.length > 0 &&
185
+ <View style={{ paddingHorizontal: 40, overflow: 'visible' }}>
186
+ <OText size={16} lineHeight={24} weight={'500'}>{t('WANT_SOMETHING_ELSE', 'Do you want something else?')}</OText>
187
+ <UpsellingLayout />
188
+ </View>
189
+ }
190
+ <View style={{ paddingHorizontal: 40 }}>
191
+ <OText size={20} lineHeight={30} weight={600} style={{ marginTop: 10, marginBottom: 17 }}>{t('YOUR_CART', 'Your cart')}</OText>
192
+ <OrderSummary
193
+ cart={cart}
194
+ commentDelayTime={commentDelayTime}
195
+ isCartPending={cart?.status === 2}
196
+ onNavigationRedirect={onNavigationRedirect}
197
+ />
198
+ </View>
199
+ {showCartList && cartList.map((cart: any, i: number) => (
200
+ <CartList key={i}>
201
+ <Cart
202
+ cart={cart}
203
+ cartuuid={cart.uuid}
204
+ hideUpselling
205
+ singleBusiness={props.singleBusiness}
206
+ isFranchiseApp={props.isFranchiseApp}
207
+ isCartsLoading={isCartsLoading}
208
+ setIsCartsLoading={setIsCartsLoading}
209
+ isMultiCheckout={isMultiCheckout}
210
+ onNavigationRedirect={props.onNavigationRedirect}
211
+ />
212
+ <CartDivider />
213
+ </CartList>
214
+ ))}
215
+ </ScrollView>
216
+ <View
217
+ style={{
218
+ alignItems: 'center',
219
+ bottom: props.isPage ? Platform.OS === 'ios' ? 0 : 20 : Platform.OS === 'ios' ? bottom + 59 : bottom + 125
220
+ }}
221
+ >
222
+ <OButton
223
+ imgRightSrc=''
224
+ text={t('CHECKOUT', 'Checkout')}
225
+ style={{ ...styles.closeUpsellingButton }}
226
+ textStyle={{ color: theme.colors.white, fontSize: 14 }}
227
+ onClick={() => {
228
+ handleUpsellingPage()
229
+ setIsCheckout(true)
230
+ }}
231
+ />
232
+ </View>
233
+ </>
234
+ )
235
+ }
236
+
237
+ return (
238
+ <>
239
+ {isCustomMode ? (
240
+ <UpsellingLayout />
241
+ ) : (
242
+ <>
243
+ {props.isPage ? (
244
+ <UpsellingContent />
245
+ ) : (
246
+ canOpenUpselling && !modalIsOpen && (
247
+ <OBottomPopup
248
+ title={''}
249
+ open={openUpselling}
250
+ onClose={() => handleUpsellingPage()}
251
+ isStatusBar
252
+ >
253
+ <UpsellingContent />
254
+ </OBottomPopup>
255
+ )
256
+ )}
257
+ </>
258
+ )}
259
+ </>
260
+ )
234
261
  }
235
262
 
236
263
  export const UpsellingProducts = (props: UpsellingProductsParams) => {
237
- const upsellingProductsProps = {
238
- ...props,
239
- UIComponent: UpsellingProductsUI
240
- }
241
- return (
242
- <UpsellingPageController {...upsellingProductsProps} />
243
- )
264
+ const upsellingProductsProps = {
265
+ ...props,
266
+ UIComponent: UpsellingProductsUI
267
+ }
268
+ return (
269
+ <UpsellingPageController {...upsellingProductsProps} />
270
+ )
244
271
  }
package/themes/original/src/components/UpsellingProducts/styles.tsx CHANGED
@@ -47,4 +47,15 @@ export const TopBar = styled.View`
47
47
  export const TopActions = styled.TouchableOpacity`
48
48
  height: 44px;
49
49
  justify-content: center;
50
- `;
50
+ `;
51
+
52
+ export const CartList = styled.ScrollView`
53
+ padding: 10px 40px;
54
+ overflow: visible;
55
+ `
56
+
57
+ export const CartDivider = styled.View`
58
+ height: 8px;
59
+ background-color: ${(props: any) => props.theme.colors.backgroundGray100};
60
+ margin: 20px -40px 0;
61
+ `
package/themes/original/src/types/index.tsx CHANGED
@@ -595,6 +595,8 @@ export interface UpsellingProductsParams {
595
595
  products?: any;
596
596
  onNavigationRedirect?: any;
597
597
  onGoBack?: any;
598
+ singleBusiness?: any;
599
+ isFranchiseApp?: any;
598
600
  }
599
601
 
600
602
  export interface GoogleMapsParams {
package/themes/original/src/utils/index.tsx CHANGED
@@ -356,7 +356,6 @@ export const priceList = [
356
356
  ]
357
357
 
358
358
  export const getLogisticTag = (status: any) => {
359
- const [, t] = useLanguage()
360
359
  const keyList: any = {
361
360
  0: t('PENDING', 'Pending'),
362
361
  1: t('IN_PROGRESS', 'In progress'),