ordering-ui-react-native 0.23.97 → 0.23.99
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 +1 -1
- package/themes/business/src/components/MapView/RenderMarker.tsx +146 -0
- package/themes/business/src/components/MapView/index.tsx +48 -127
- package/themes/business/src/types/index.tsx +12 -0
- package/themes/original/src/components/Checkout/index.tsx +27 -10
- package/themes/original/src/components/MultiCheckout/index.tsx +22 -10
- package/themes/original/src/components/PaymentOptions/index.tsx +10 -1
package/package.json
CHANGED
|
@@ -0,0 +1,146 @@
|
|
|
1
|
+
import React, { useEffect, useRef, useState } from 'react'
|
|
2
|
+
import { StyleSheet, View } from 'react-native';
|
|
3
|
+
import { Callout, Marker } from 'react-native-maps'
|
|
4
|
+
import Icon from 'react-native-vector-icons/FontAwesome5';
|
|
5
|
+
import FastImage from 'react-native-fast-image';
|
|
6
|
+
import { useTheme } from 'styled-components/native';
|
|
7
|
+
|
|
8
|
+
import { useLanguage } from 'ordering-components/native';
|
|
9
|
+
import { OText } from '../shared';
|
|
10
|
+
import { RenderMarkerParams } from '../../types'
|
|
11
|
+
|
|
12
|
+
const styles = StyleSheet.create({
|
|
13
|
+
image: {
|
|
14
|
+
borderRadius: 50,
|
|
15
|
+
width: 25,
|
|
16
|
+
height: 25
|
|
17
|
+
},
|
|
18
|
+
view: {
|
|
19
|
+
width: 25,
|
|
20
|
+
position: 'absolute',
|
|
21
|
+
top: 6,
|
|
22
|
+
left: 6,
|
|
23
|
+
bottom: 0,
|
|
24
|
+
right: 0,
|
|
25
|
+
},
|
|
26
|
+
});
|
|
27
|
+
|
|
28
|
+
export const RenderMarker = (props: RenderMarkerParams) => {
|
|
29
|
+
const {
|
|
30
|
+
marker,
|
|
31
|
+
customer,
|
|
32
|
+
orderIds,
|
|
33
|
+
onNavigationRedirect,
|
|
34
|
+
initialPosition,
|
|
35
|
+
locationSelected,
|
|
36
|
+
setLocationSelected
|
|
37
|
+
} = props
|
|
38
|
+
const markerRef = useRef<any>()
|
|
39
|
+
const theme = useTheme()
|
|
40
|
+
const [, t] = useLanguage()
|
|
41
|
+
|
|
42
|
+
const [imageLoaded, setImageLoaded] = useState(false)
|
|
43
|
+
|
|
44
|
+
let coordinateLat = (customer
|
|
45
|
+
? typeof marker?.customer?.location?.lat === 'number' && !Number.isNaN(marker?.customer?.location?.lat)
|
|
46
|
+
? marker?.customer?.location?.lat
|
|
47
|
+
: 0
|
|
48
|
+
: typeof marker?.business?.location?.lat === 'number' && !Number.isNaN(marker?.business?.location?.lat)
|
|
49
|
+
? marker?.business?.location?.lat
|
|
50
|
+
: 0) ?? (initialPosition?.latitude || 0)
|
|
51
|
+
let coordinateLng = (customer
|
|
52
|
+
? typeof marker?.customer?.location?.lng === 'number' && !Number.isNaN(marker?.customer?.location?.lng)
|
|
53
|
+
? marker?.customer?.location?.lng
|
|
54
|
+
: 0
|
|
55
|
+
: typeof marker?.business?.location?.lng === 'number' && !Number.isNaN(marker?.business?.location?.lng)
|
|
56
|
+
? marker?.business?.location?.lng
|
|
57
|
+
: 0) ?? (initialPosition?.longitude || 0)
|
|
58
|
+
|
|
59
|
+
useEffect(() => {
|
|
60
|
+
if (
|
|
61
|
+
markerRef?.current?.props?.coordinate?.latitude === locationSelected?.latitude &&
|
|
62
|
+
markerRef?.current?.props?.coordinate?.longitude === locationSelected?.longitude
|
|
63
|
+
) {
|
|
64
|
+
markerRef?.current?.showCallout()
|
|
65
|
+
}
|
|
66
|
+
}, [locationSelected])
|
|
67
|
+
|
|
68
|
+
const markerImage = customer ? marker?.customer?.photo ?? theme?.images?.dummies?.customerPhoto : marker?.business?.logo ?? theme?.images?.dummies?.businessLogo
|
|
69
|
+
|
|
70
|
+
return (
|
|
71
|
+
<Marker
|
|
72
|
+
key={customer ? marker?.customer?.id : marker?.business?.id}
|
|
73
|
+
coordinate={{
|
|
74
|
+
latitude: coordinateLat,
|
|
75
|
+
longitude: coordinateLng
|
|
76
|
+
}}
|
|
77
|
+
onPress={() =>
|
|
78
|
+
setLocationSelected({
|
|
79
|
+
latitude: coordinateLat,
|
|
80
|
+
longitude: coordinateLng
|
|
81
|
+
})
|
|
82
|
+
}
|
|
83
|
+
ref={(ref) => markerRef.current = ref}
|
|
84
|
+
tracksViewChanges={!imageLoaded}
|
|
85
|
+
>
|
|
86
|
+
<Icon
|
|
87
|
+
name="map-marker"
|
|
88
|
+
size={50}
|
|
89
|
+
color={theme.colors.primary}
|
|
90
|
+
/>
|
|
91
|
+
{!!markerImage && (
|
|
92
|
+
<View style={styles.view}>
|
|
93
|
+
<FastImage
|
|
94
|
+
style={styles.image}
|
|
95
|
+
source={markerImage?.includes('https') ? {
|
|
96
|
+
uri: markerImage,
|
|
97
|
+
priority: FastImage.priority.high,
|
|
98
|
+
cache: FastImage.cacheControl.immutable
|
|
99
|
+
} : markerImage}
|
|
100
|
+
resizeMode={FastImage.resizeMode.cover}
|
|
101
|
+
onLoadEnd={() => setImageLoaded(true)}
|
|
102
|
+
/>
|
|
103
|
+
</View>
|
|
104
|
+
)}
|
|
105
|
+
<Callout
|
|
106
|
+
onPress={() => !!orderIds && orderIds.toString().includes(',') ? onNavigationRedirect('Orders') : onNavigationRedirect('OrderDetails', { order: marker })}
|
|
107
|
+
>
|
|
108
|
+
<View style={{ flex: 1, width: 200, padding: 5 }}>
|
|
109
|
+
<OText weight='bold'>{customer ? `${marker?.customer?.name} ${marker?.customer?.lastname}` : marker?.business?.name}</OText>
|
|
110
|
+
<OText>
|
|
111
|
+
{!!orderIds && orderIds.toString().includes(',') ? (
|
|
112
|
+
<>
|
|
113
|
+
{t('ORDER_NUMBERS', 'Order Numbers')} {orderIds}
|
|
114
|
+
</>
|
|
115
|
+
) : (
|
|
116
|
+
<>
|
|
117
|
+
{t('ORDER_NUMBER', 'Order No.')} {marker?.id}
|
|
118
|
+
</>
|
|
119
|
+
)}
|
|
120
|
+
</OText>
|
|
121
|
+
<OText>{customer ? marker?.customer?.address : marker?.business?.address}</OText>
|
|
122
|
+
{((customer && marker?.customer?.city?.address_notes) || !customer) && (
|
|
123
|
+
<OText>{customer ? marker?.customer?.city?.address_notes : marker?.business?.city?.name}</OText>
|
|
124
|
+
)}
|
|
125
|
+
{((customer && !!marker?.business?.zipcode) || (!customer && !!marker?.business?.zipcode)) && (
|
|
126
|
+
<OText>{customer ? marker?.customer?.zipcode ?? '' : marker?.business?.zipcode ?? ''}</OText>
|
|
127
|
+
)}
|
|
128
|
+
{customer && !!marker?.customer?.internal_number && (
|
|
129
|
+
<OText>{marker?.customer?.internal_number}</OText>
|
|
130
|
+
)}
|
|
131
|
+
<OText textDecorationLine='underline' color={theme.colors.primary}>
|
|
132
|
+
{!!orderIds && orderIds.toString().includes(',') ? (
|
|
133
|
+
<>
|
|
134
|
+
{t('SHOW_ORDERS', 'Show orders')}
|
|
135
|
+
</>
|
|
136
|
+
) : (
|
|
137
|
+
<>
|
|
138
|
+
{t('MORE_INFO', 'More info')}
|
|
139
|
+
</>
|
|
140
|
+
)}
|
|
141
|
+
</OText>
|
|
142
|
+
</View>
|
|
143
|
+
</Callout>
|
|
144
|
+
</Marker>
|
|
145
|
+
)
|
|
146
|
+
}
|
|
@@ -1,20 +1,37 @@
|
|
|
1
|
-
import React, { useState, useEffect, useRef, useCallback } from 'react';
|
|
1
|
+
import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';
|
|
2
2
|
import { Dimensions, Platform, SafeAreaView, StyleSheet, View } from 'react-native';
|
|
3
3
|
import { useFocusEffect } from '@react-navigation/native'
|
|
4
4
|
import MapView, {
|
|
5
5
|
PROVIDER_GOOGLE,
|
|
6
|
-
Marker
|
|
7
|
-
Callout
|
|
6
|
+
Marker
|
|
8
7
|
} from 'react-native-maps';
|
|
8
|
+
import FastImage from 'react-native-fast-image'
|
|
9
9
|
import { useLanguage, useSession, MapView as MapViewController } from 'ordering-components/native';
|
|
10
10
|
import { MapViewParams } from '../../types';
|
|
11
11
|
import Alert from '../../providers/AlertProvider';
|
|
12
12
|
import { useTheme } from 'styled-components/native';
|
|
13
13
|
import { useLocation } from '../../hooks/useLocation';
|
|
14
14
|
import Icon from 'react-native-vector-icons/FontAwesome5';
|
|
15
|
-
import {
|
|
16
|
-
|
|
15
|
+
import { OFab } from '../shared'
|
|
16
|
+
import { RenderMarker } from './RenderMarker'
|
|
17
|
+
|
|
18
|
+
const styles = StyleSheet.create({
|
|
19
|
+
image: {
|
|
20
|
+
borderRadius: 50,
|
|
21
|
+
width: 25,
|
|
22
|
+
height: 25
|
|
23
|
+
},
|
|
24
|
+
view: {
|
|
25
|
+
width: 25,
|
|
26
|
+
position: 'absolute',
|
|
27
|
+
top: 6,
|
|
28
|
+
left: 6,
|
|
29
|
+
bottom: 0,
|
|
30
|
+
right: 0,
|
|
31
|
+
},
|
|
32
|
+
});
|
|
17
33
|
|
|
34
|
+
const MapViewComponent = (props: MapViewParams) => {
|
|
18
35
|
const {
|
|
19
36
|
isLoadingBusinessMarkers,
|
|
20
37
|
markerGroups,
|
|
@@ -36,6 +53,7 @@ const MapViewComponent = (props: MapViewParams) => {
|
|
|
36
53
|
const following = useRef<boolean>(true);
|
|
37
54
|
const [isFocused, setIsFocused] = useState(false)
|
|
38
55
|
const [locationSelected, setLocationSelected] = useState<any>(null)
|
|
56
|
+
const [imageLoaded, setImageLoaded] = useState(false)
|
|
39
57
|
const {
|
|
40
58
|
initialPosition,
|
|
41
59
|
userLocation,
|
|
@@ -43,7 +61,10 @@ const MapViewComponent = (props: MapViewParams) => {
|
|
|
43
61
|
followUserLocation
|
|
44
62
|
} = useLocation();
|
|
45
63
|
|
|
46
|
-
const location =
|
|
64
|
+
const location = useMemo(() => {
|
|
65
|
+
return { lat: userLocation?.latitude, lng: userLocation?.longitude }
|
|
66
|
+
}, [userLocation?.latitude, userLocation?.longitude])
|
|
67
|
+
|
|
47
68
|
const haveOrders = Object.values(markerGroups)?.length > 0 && Object.values(customerMarkerGroups)?.length > 0
|
|
48
69
|
const closeAlert = () => {
|
|
49
70
|
setAlertState({
|
|
@@ -124,120 +145,6 @@ const MapViewComponent = (props: MapViewParams) => {
|
|
|
124
145
|
}, [])
|
|
125
146
|
)
|
|
126
147
|
|
|
127
|
-
const styles = StyleSheet.create({
|
|
128
|
-
image: {
|
|
129
|
-
borderRadius: 50,
|
|
130
|
-
},
|
|
131
|
-
view: {
|
|
132
|
-
width: 25,
|
|
133
|
-
position: 'absolute',
|
|
134
|
-
top: 6,
|
|
135
|
-
left: 6,
|
|
136
|
-
bottom: 0,
|
|
137
|
-
right: 0,
|
|
138
|
-
},
|
|
139
|
-
});
|
|
140
|
-
|
|
141
|
-
const RenderMarker = ({ marker, customer, orderIds }: { marker: any, customer?: boolean, orderIds?: Array<number> }) => {
|
|
142
|
-
const markerRef = useRef<any>()
|
|
143
|
-
|
|
144
|
-
let coordinateLat = (customer
|
|
145
|
-
? typeof marker?.customer?.location?.lat === 'number' && !Number.isNaN(marker?.customer?.location?.lat)
|
|
146
|
-
? marker?.customer?.location?.lat
|
|
147
|
-
: 0
|
|
148
|
-
: typeof marker?.business?.location?.lat === 'number' && !Number.isNaN(marker?.business?.location?.lat)
|
|
149
|
-
? marker?.business?.location?.lat
|
|
150
|
-
: 0) ?? (initialPosition?.latitude || 0)
|
|
151
|
-
let coordinateLng = (customer
|
|
152
|
-
? typeof marker?.customer?.location?.lng === 'number' && !Number.isNaN(marker?.customer?.location?.lng)
|
|
153
|
-
? marker?.customer?.location?.lng
|
|
154
|
-
: 0
|
|
155
|
-
: typeof marker?.business?.location?.lng === 'number' && !Number.isNaN(marker?.business?.location?.lng)
|
|
156
|
-
? marker?.business?.location?.lng
|
|
157
|
-
: 0) ?? (initialPosition?.longitude || 0)
|
|
158
|
-
|
|
159
|
-
useEffect(() => {
|
|
160
|
-
if (
|
|
161
|
-
markerRef?.current?.props?.coordinate?.latitude === locationSelected?.latitude &&
|
|
162
|
-
markerRef?.current?.props?.coordinate?.longitude === locationSelected?.longitude
|
|
163
|
-
) {
|
|
164
|
-
markerRef?.current?.showCallout()
|
|
165
|
-
}
|
|
166
|
-
}, [locationSelected])
|
|
167
|
-
|
|
168
|
-
return (
|
|
169
|
-
<Marker
|
|
170
|
-
key={customer ? marker?.customer?.id : marker?.business?.id}
|
|
171
|
-
coordinate={{
|
|
172
|
-
latitude: coordinateLat,
|
|
173
|
-
longitude: coordinateLng
|
|
174
|
-
}}
|
|
175
|
-
onPress={() =>
|
|
176
|
-
setLocationSelected({
|
|
177
|
-
latitude: coordinateLat,
|
|
178
|
-
longitude: coordinateLng
|
|
179
|
-
})
|
|
180
|
-
}
|
|
181
|
-
ref={(ref: any) => markerRef.current = ref}
|
|
182
|
-
>
|
|
183
|
-
<Icon
|
|
184
|
-
name="map-marker"
|
|
185
|
-
size={50}
|
|
186
|
-
color={theme.colors.primary}
|
|
187
|
-
/>
|
|
188
|
-
{(!!marker?.customer?.photo || !!marker?.business?.logo) && (
|
|
189
|
-
<View style={styles.view}>
|
|
190
|
-
<OIcon
|
|
191
|
-
style={styles.image}
|
|
192
|
-
src={{ uri: customer ? marker?.customer?.photo : marker?.business?.logo }}
|
|
193
|
-
width={25}
|
|
194
|
-
height={25}
|
|
195
|
-
/>
|
|
196
|
-
</View>
|
|
197
|
-
)}
|
|
198
|
-
<Callout
|
|
199
|
-
onPress={() => !!orderIds && orderIds.toString().includes(',') ? onNavigationRedirect('Orders') : onNavigationRedirect('OrderDetails', { order: marker })}
|
|
200
|
-
>
|
|
201
|
-
<View style={{ flex: 1, width: 200, padding: 5 }}>
|
|
202
|
-
<OText weight='bold'>{customer ? `${marker?.customer?.name} ${marker?.customer?.lastname}` : marker?.business?.name}</OText>
|
|
203
|
-
<OText>
|
|
204
|
-
{!!orderIds && orderIds.toString().includes(',') ? (
|
|
205
|
-
<>
|
|
206
|
-
{t('ORDER_NUMBERS', 'Order Numbers')} {orderIds}
|
|
207
|
-
</>
|
|
208
|
-
) : (
|
|
209
|
-
<>
|
|
210
|
-
{t('ORDER_NUMBER', 'Order No.')} {marker?.id}
|
|
211
|
-
</>
|
|
212
|
-
)}
|
|
213
|
-
</OText>
|
|
214
|
-
<OText>{customer ? marker?.customer?.address : marker?.business?.address}</OText>
|
|
215
|
-
{((customer && marker?.customer?.city?.address_notes) || !customer) && (
|
|
216
|
-
<OText>{customer ? marker?.customer?.city?.address_notes : marker?.business?.city?.name}</OText>
|
|
217
|
-
)}
|
|
218
|
-
{((customer && !!marker?.business?.zipcode) || (!customer && !!marker?.business?.zipcode)) && (
|
|
219
|
-
<OText>{customer ? marker?.customer?.zipcode ?? '' : marker?.business?.zipcode ?? ''}</OText>
|
|
220
|
-
)}
|
|
221
|
-
{customer && !!marker?.customer?.internal_number && (
|
|
222
|
-
<OText>{marker?.customer?.internal_number}</OText>
|
|
223
|
-
)}
|
|
224
|
-
<OText textDecorationLine='underline' color={theme.colors.primary}>
|
|
225
|
-
{!!orderIds && orderIds.toString().includes(',') ? (
|
|
226
|
-
<>
|
|
227
|
-
{t('SHOW_ORDERS', 'Show orders')}
|
|
228
|
-
</>
|
|
229
|
-
) : (
|
|
230
|
-
<>
|
|
231
|
-
{t('MORE_INFO', 'More info')}
|
|
232
|
-
</>
|
|
233
|
-
)}
|
|
234
|
-
</OText>
|
|
235
|
-
</View>
|
|
236
|
-
</Callout>
|
|
237
|
-
</Marker>
|
|
238
|
-
)
|
|
239
|
-
}
|
|
240
|
-
|
|
241
148
|
useEffect(() => {
|
|
242
149
|
if (userLocation?.latitude !== 0 && userLocation?.longitude !== 0) {
|
|
243
150
|
const location = {
|
|
@@ -248,17 +155,24 @@ const MapViewComponent = (props: MapViewParams) => {
|
|
|
248
155
|
}
|
|
249
156
|
}, [userLocation])
|
|
250
157
|
|
|
158
|
+
const renderMarkerDefaultProps = {
|
|
159
|
+
onNavigationRedirect: onNavigationRedirect,
|
|
160
|
+
initialPosition: initialPosition,
|
|
161
|
+
locationSelected: locationSelected,
|
|
162
|
+
setLocationSelected: setLocationSelected
|
|
163
|
+
}
|
|
164
|
+
|
|
251
165
|
return (
|
|
252
166
|
<SafeAreaView style={{ flex: 1 }}>
|
|
253
167
|
<View style={{ flex: 1 }}>
|
|
254
|
-
{(isDeliveryApp || (!isLoadingBusinessMarkers && isFocused)) && (
|
|
168
|
+
{(isDeliveryApp || (!isLoadingBusinessMarkers && isFocused)) && !!initialPosition?.latitude && !!initialPosition?.longitude && (
|
|
255
169
|
<View style={{ flex: 1 }}>
|
|
256
170
|
<MapView
|
|
257
171
|
ref={mapRef}
|
|
258
172
|
provider={PROVIDER_GOOGLE}
|
|
259
173
|
initialRegion={{
|
|
260
|
-
latitude: initialPosition?.latitude
|
|
261
|
-
longitude: initialPosition?.longitude
|
|
174
|
+
latitude: initialPosition?.latitude,
|
|
175
|
+
longitude: initialPosition?.longitude,
|
|
262
176
|
latitudeDelta: haveOrders ? 0.01 : 0.1,
|
|
263
177
|
longitudeDelta: haveOrders ? 0.01 * ASPECT_RATIO : 0.1 * ASPECT_RATIO,
|
|
264
178
|
}}
|
|
@@ -273,6 +187,7 @@ const MapViewComponent = (props: MapViewParams) => {
|
|
|
273
187
|
<>
|
|
274
188
|
{Object.values(markerGroups).map((marker: any) => (
|
|
275
189
|
<RenderMarker
|
|
190
|
+
{...renderMarkerDefaultProps}
|
|
276
191
|
key={marker[0]?.business_id}
|
|
277
192
|
marker={marker[0]}
|
|
278
193
|
orderIds={marker.map((order: any) => order.id).join(', ')}
|
|
@@ -280,6 +195,7 @@ const MapViewComponent = (props: MapViewParams) => {
|
|
|
280
195
|
))}
|
|
281
196
|
{Object.values(customerMarkerGroups).map((marker: any) => (
|
|
282
197
|
<RenderMarker
|
|
198
|
+
{...renderMarkerDefaultProps}
|
|
283
199
|
key={marker[0]?.customer_id}
|
|
284
200
|
marker={marker[0]}
|
|
285
201
|
orderIds={marker.map((order: any) => order.id).join(', ')}
|
|
@@ -287,6 +203,7 @@ const MapViewComponent = (props: MapViewParams) => {
|
|
|
287
203
|
/>
|
|
288
204
|
))}
|
|
289
205
|
<Marker
|
|
206
|
+
tracksViewChanges={!imageLoaded}
|
|
290
207
|
coordinate={{
|
|
291
208
|
latitude: typeof location.lat === 'number' && !Number.isNaN(location.lat) ? location.lat : 0,
|
|
292
209
|
longitude: typeof location.lng === 'number' && !Number.isNaN(location.lng) ? location.lng : 0,
|
|
@@ -299,11 +216,15 @@ const MapViewComponent = (props: MapViewParams) => {
|
|
|
299
216
|
color={theme.colors.primary}
|
|
300
217
|
/>
|
|
301
218
|
<View style={styles.view}>
|
|
302
|
-
<
|
|
219
|
+
<FastImage
|
|
303
220
|
style={styles.image}
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
221
|
+
source={user.photo?.includes('https') ? {
|
|
222
|
+
uri: user.photo,
|
|
223
|
+
priority: FastImage.priority.high,
|
|
224
|
+
cache: FastImage.cacheControl.immutable
|
|
225
|
+
} : user.photo ?? theme?.images?.dummies?.driverPhoto}
|
|
226
|
+
resizeMode={FastImage.resizeMode.cover}
|
|
227
|
+
onLoadEnd={() => setImageLoaded(true)}
|
|
307
228
|
/>
|
|
308
229
|
</View>
|
|
309
230
|
</Marker>
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { TextInputProps, ViewStyle } from 'react-native';
|
|
2
|
+
import { LatLng } from 'react-native-maps';
|
|
2
3
|
export interface LoginParams {
|
|
3
4
|
navigation?: any;
|
|
4
5
|
formState?: any;
|
|
@@ -654,3 +655,14 @@ export interface SessionsParams {
|
|
|
654
655
|
handleDeleteSession: any,
|
|
655
656
|
handleDeleteAllSessions: any
|
|
656
657
|
}
|
|
658
|
+
|
|
659
|
+
export interface RenderMarkerParams {
|
|
660
|
+
key?: number,
|
|
661
|
+
marker: any,
|
|
662
|
+
customer?: boolean,
|
|
663
|
+
orderIds?: Array<number>
|
|
664
|
+
onNavigationRedirect?: any,
|
|
665
|
+
initialPosition?: LatLng,
|
|
666
|
+
locationSelected?: LatLng,
|
|
667
|
+
setLocationSelected ?: any
|
|
668
|
+
}
|
|
@@ -201,7 +201,7 @@ const CheckoutUI = (props: any) => {
|
|
|
201
201
|
const hideBusinessDetails = theme?.checkout?.components?.business?.hidden
|
|
202
202
|
const hideBusinessMap = theme?.checkout?.components?.business?.components?.map?.hidden
|
|
203
203
|
const hideCustomerDetails = theme?.checkout?.components?.customer?.hidden
|
|
204
|
-
|
|
204
|
+
const isGuestCheckoutEnabled = configs?.guest_checkout_enabled?.value === '1'
|
|
205
205
|
const creditPointPlan = loyaltyPlansState?.result?.find((loyal: any) => loyal.type === 'credit_point')
|
|
206
206
|
const creditPointPlanOnBusiness = creditPointPlan?.businesses?.find((b: any) => b.business_id === cart?.business_id && b.accumulates)
|
|
207
207
|
const methodsPay = ['google_pay', 'apple_pay']
|
|
@@ -230,7 +230,8 @@ const CheckoutUI = (props: any) => {
|
|
|
230
230
|
validateDriverTipField ||
|
|
231
231
|
validateCouponField ||
|
|
232
232
|
validateZipcodeCard ||
|
|
233
|
-
(!userHasCards && cardsPaymethods.includes(paymethodSelected?.gateway))
|
|
233
|
+
(!userHasCards && cardsPaymethods.includes(paymethodSelected?.gateway)) ||
|
|
234
|
+
(!isGuestCheckoutEnabled && !!user?.guest_id)
|
|
234
235
|
|
|
235
236
|
const driverTipsOptions = typeof configs?.driver_tip_options?.value === 'string'
|
|
236
237
|
? JSON.parse(configs?.driver_tip_options?.value) || []
|
|
@@ -276,6 +277,10 @@ const CheckoutUI = (props: any) => {
|
|
|
276
277
|
if (user) setOpenModal({ ...openModal, login: false })
|
|
277
278
|
}
|
|
278
279
|
|
|
280
|
+
const handleOpenGuestSignup = () => {
|
|
281
|
+
setOpenModal({ ...openModal, signup: true, isGuest: true })
|
|
282
|
+
}
|
|
283
|
+
|
|
279
284
|
const handlePlaceOrder = (confirmPayment: any, forcePlace: boolean = false) => {
|
|
280
285
|
if (stripePaymethods.includes(paymethodSelected?.gateway) && user?.guest_id) {
|
|
281
286
|
setOpenModal({ ...openModal, signup: true, isGuest: true })
|
|
@@ -671,14 +676,16 @@ const CheckoutUI = (props: any) => {
|
|
|
671
676
|
style={{ borderRadius: 7.6, marginTop: 20 }}
|
|
672
677
|
onClick={() => setOpenModal({ ...openModal, login: true })}
|
|
673
678
|
/>
|
|
674
|
-
|
|
675
|
-
|
|
676
|
-
|
|
677
|
-
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
|
|
679
|
+
{isGuestCheckoutEnabled && (
|
|
680
|
+
<OButton
|
|
681
|
+
text={t('CONTINUE_AS_GUEST', 'Continue as guest')}
|
|
682
|
+
textStyle={{ color: theme.colors.black }}
|
|
683
|
+
bgColor={theme.colors.white}
|
|
684
|
+
borderColor={theme.colors.black}
|
|
685
|
+
style={{ borderRadius: 7.6, marginTop: 20 }}
|
|
686
|
+
onClick={() => setAllowedGuest(true)}
|
|
687
|
+
/>
|
|
688
|
+
)}
|
|
682
689
|
</View>
|
|
683
690
|
) : (
|
|
684
691
|
<UserDetails
|
|
@@ -869,6 +876,8 @@ const CheckoutUI = (props: any) => {
|
|
|
869
876
|
paymethodClicked={paymethodClicked}
|
|
870
877
|
setPaymethodClicked={setPaymethodClicked}
|
|
871
878
|
setUserHasCards={setUserHasCards}
|
|
879
|
+
handleOpenGuestSignup={handleOpenGuestSignup}
|
|
880
|
+
guestDisabledError={(!isGuestCheckoutEnabled && !!user?.guest_id)}
|
|
872
881
|
/>
|
|
873
882
|
</ChPaymethods>
|
|
874
883
|
</ChSection>
|
|
@@ -1038,6 +1047,14 @@ const CheckoutUI = (props: any) => {
|
|
|
1038
1047
|
{t('WARNING_INVALID_COUPON_FIELD', 'Coupon is required.')}
|
|
1039
1048
|
</OText>
|
|
1040
1049
|
)}
|
|
1050
|
+
{(!isGuestCheckoutEnabled && !!user?.guest_id) && (
|
|
1051
|
+
<OText
|
|
1052
|
+
color={theme.colors.error}
|
|
1053
|
+
size={12}
|
|
1054
|
+
>
|
|
1055
|
+
{t('LOGIN_SIGN_UP_COMPLETE_ORDER', 'Login/Sign up to complete your order.')}
|
|
1056
|
+
</OText>
|
|
1057
|
+
)}
|
|
1041
1058
|
</ChErrors>
|
|
1042
1059
|
</View>
|
|
1043
1060
|
)}
|
|
@@ -103,6 +103,7 @@ const MultiCheckoutUI = (props: any) => {
|
|
|
103
103
|
const configTypes = configs?.order_types_allowed?.value.split('|').map((value: any) => Number(value)) || []
|
|
104
104
|
const isPreOrder = configs?.preorder_status_enabled?.value === '1'
|
|
105
105
|
const isMultiDriverTips = configs?.checkout_multi_business_enabled?.value === '1'
|
|
106
|
+
const isGuestCheckoutEnabled = configs?.guest_checkout_enabled?.value === '1'
|
|
106
107
|
const walletCarts = (Object.values(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) || []
|
|
107
108
|
const isChewLayout = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
|
|
108
109
|
const cartsToShow = openCarts?.length > 0 ? openCarts : cartsInvalid
|
|
@@ -123,7 +124,7 @@ const MultiCheckoutUI = (props: any) => {
|
|
|
123
124
|
|
|
124
125
|
const creditPointGeneralPlan = loyaltyPlansState?.result?.find((loyal: any) => loyal.type === 'credit_point')
|
|
125
126
|
const loyalBusinessAvailable = creditPointGeneralPlan?.businesses?.filter((b: any) => b.accumulates) ?? []
|
|
126
|
-
const checkoutFields = useMemo(() => checkoutFieldsState?.fields?.filter((field
|
|
127
|
+
const checkoutFields = useMemo(() => checkoutFieldsState?.fields?.filter((field: any) => field.order_type_id === options?.type), [checkoutFieldsState, options])
|
|
127
128
|
|
|
128
129
|
const accumulationRateBusiness = (businessId: number) => {
|
|
129
130
|
const value = loyalBusinessAvailable?.find((loyal: any) => loyal.business_id === businessId)?.accumulation_rate ?? 0
|
|
@@ -162,7 +163,8 @@ const MultiCheckoutUI = (props: any) => {
|
|
|
162
163
|
const isDisablePlaceOrderButton = cartGroup?.loading || placing || (!(paymethodSelected?.paymethod_id || paymethodSelected?.wallet_id) && cartGroup?.result?.balance > 0) ||
|
|
163
164
|
(paymethodSelected?.paymethod?.gateway === 'stripe' && !paymethodSelected?.paymethod_data) ||
|
|
164
165
|
walletCarts.length > 0
|
|
165
|
-
|| (methodsPay.includes(paymethodSelected?.gateway) && (!methodPaySupported.enabled || methodPaySupported.loading)) || openCarts?.length === 0
|
|
166
|
+
|| (methodsPay.includes(paymethodSelected?.gateway) && (!methodPaySupported.enabled || methodPaySupported.loading)) || openCarts?.length === 0 ||
|
|
167
|
+
(!isGuestCheckoutEnabled && !!user?.guest_id)
|
|
166
168
|
|
|
167
169
|
const handleMomentClick = () => {
|
|
168
170
|
if (isPreOrder) {
|
|
@@ -428,14 +430,16 @@ const MultiCheckoutUI = (props: any) => {
|
|
|
428
430
|
style={{ borderRadius: 7.6, marginTop: 20 }}
|
|
429
431
|
onClick={() => setOpenModal({ ...openModal, login: true })}
|
|
430
432
|
/>
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
433
|
+
{isGuestCheckoutEnabled && (
|
|
434
|
+
<OButton
|
|
435
|
+
text={t('CONTINUE_AS_GUEST', 'Continue as guest')}
|
|
436
|
+
textStyle={{ color: theme.colors.black }}
|
|
437
|
+
bgColor={theme.colors.white}
|
|
438
|
+
borderColor={theme.colors.black}
|
|
439
|
+
style={{ borderRadius: 7.6, marginTop: 20 }}
|
|
440
|
+
onClick={() => setAllowedGuest(true)}
|
|
441
|
+
/>
|
|
442
|
+
)}
|
|
439
443
|
</View>
|
|
440
444
|
) : (
|
|
441
445
|
<UserDetails
|
|
@@ -643,6 +647,14 @@ const MultiCheckoutUI = (props: any) => {
|
|
|
643
647
|
{t('WARNING_INVALID_PRODUCTS_CHECKOUT', 'To continue with your checkout, please remove from your cart the products that are not available.')}
|
|
644
648
|
</OText>
|
|
645
649
|
)}
|
|
650
|
+
{(!isGuestCheckoutEnabled && !!user?.guest_id) && (
|
|
651
|
+
<OText
|
|
652
|
+
color={theme.colors.error}
|
|
653
|
+
size={12}
|
|
654
|
+
>
|
|
655
|
+
{t('LOGIN_SIGN_UP_COMPLETE_ORDER', 'Login/Sign up to complete your order.')}
|
|
656
|
+
</OText>
|
|
657
|
+
)}
|
|
646
658
|
</ChContainer>
|
|
647
659
|
<OModal
|
|
648
660
|
open={openModal.signup}
|
|
@@ -48,6 +48,8 @@ const stripeDirectMethods = ['stripe_direct']
|
|
|
48
48
|
const webViewPaymentGateway: any = ['paypal', 'square']
|
|
49
49
|
const multiCheckoutMethods = ['global_google_pay', 'global_apple_pay']
|
|
50
50
|
const cardsPaymethods = ['credomatic']
|
|
51
|
+
const guestNotSupportedMethods = ['stripe', 'stripe_connect', 'stripe_redirect']
|
|
52
|
+
const popupMethods = [...guestNotSupportedMethods, 'stripe_direct', 'paypal']
|
|
51
53
|
|
|
52
54
|
const PaymentOptionsUI = (props: any) => {
|
|
53
55
|
const {
|
|
@@ -77,7 +79,9 @@ const PaymentOptionsUI = (props: any) => {
|
|
|
77
79
|
paymethodClicked,
|
|
78
80
|
setPaymethodClicked,
|
|
79
81
|
androidAppId,
|
|
80
|
-
setUserHasCards
|
|
82
|
+
setUserHasCards,
|
|
83
|
+
guestDisabledError,
|
|
84
|
+
handleOpenGuestSignup
|
|
81
85
|
} = props
|
|
82
86
|
|
|
83
87
|
const theme = useTheme();
|
|
@@ -125,6 +129,11 @@ const PaymentOptionsUI = (props: any) => {
|
|
|
125
129
|
const paymethodsFieldRequired = ['paypal', 'apple_pay', 'global_apple_pay']
|
|
126
130
|
|
|
127
131
|
const handlePaymentMethodClick = (paymethod: any) => {
|
|
132
|
+
const _guestNotSupportedMethods = guestDisabledError ? popupMethods : guestNotSupportedMethods
|
|
133
|
+
if (handleOpenGuestSignup && _guestNotSupportedMethods.includes(paymethod?.gateway) && !!user?.guest_id) {
|
|
134
|
+
handleOpenGuestSignup()
|
|
135
|
+
return
|
|
136
|
+
}
|
|
128
137
|
if (cart?.balance > 0 || !!user?.guest_id) {
|
|
129
138
|
if (paymethodsFieldRequired.includes(paymethod?.gateway) && requiredFields.length > 0) {
|
|
130
139
|
openUserModal && openUserModal(true)
|