ordering-ui-react-native 0.23.98 → 0.24.0
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/Cart/index.tsx +2 -1
- package/themes/original/src/components/Checkout/index.tsx +6 -4
- package/themes/original/src/components/MultiCheckout/index.tsx +2 -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
|
+
}
|
|
@@ -84,6 +84,7 @@ const CartUI = (props: any) => {
|
|
|
84
84
|
const driverTipsOptions = typeof configs?.driver_tip_options?.value === 'string'
|
|
85
85
|
? JSON.parse(configs?.driver_tip_options?.value) || []
|
|
86
86
|
: configs?.driver_tip_options?.value || []
|
|
87
|
+
const allowDriverTipPickup = configs?.driver_tip_allowed_at_pickup?.value === '1' && orderState?.options?.type === 2
|
|
87
88
|
|
|
88
89
|
const momentFormatted = !orderState?.option?.moment
|
|
89
90
|
? t('RIGHT_NOW', 'Right Now')
|
|
@@ -465,7 +466,7 @@ const CartUI = (props: any) => {
|
|
|
465
466
|
{!isMultiCheckout &&
|
|
466
467
|
cart &&
|
|
467
468
|
cart?.valid &&
|
|
468
|
-
orderState?.options?.type === 1 &&
|
|
469
|
+
(orderState?.options?.type === 1 || allowDriverTipPickup) &&
|
|
469
470
|
cart?.status !== 2 &&
|
|
470
471
|
validationFields?.fields?.checkout?.driver_tip?.enabled &&
|
|
471
472
|
driverTipsOptions && driverTipsOptions?.length > 0 &&
|
|
@@ -71,6 +71,8 @@ const mapConfigs = {
|
|
|
71
71
|
}
|
|
72
72
|
};
|
|
73
73
|
|
|
74
|
+
const driverTipsTypes = [1, 2]
|
|
75
|
+
|
|
74
76
|
const manageErrorsToShow = (array = []) => {
|
|
75
77
|
let stringError = ''
|
|
76
78
|
const list = Array.isArray(array) ? array : Object.values(array)
|
|
@@ -184,7 +186,7 @@ const CheckoutUI = (props: any) => {
|
|
|
184
186
|
const notFields = ['coupon', 'driver_tip', 'mobile_phone', 'address', 'zipcode', 'address_notes', 'comments']
|
|
185
187
|
|
|
186
188
|
const checkoutFields = useMemo(() => checkoutFieldsState?.fields?.filter((field: any) => field.order_type_id === options?.type), [checkoutFieldsState, options])
|
|
187
|
-
const guestCheckoutDriveTip = useMemo(() => checkoutFields?.find((field: any) => field.order_type_id
|
|
189
|
+
const guestCheckoutDriveTip = useMemo(() => checkoutFields?.find((field: any) => driverTipsTypes.includes(field.order_type_id) && field?.validation_field?.code === 'driver_tip'), [JSON.stringify(checkoutFields), options])
|
|
188
190
|
const guestCheckoutComment = useMemo(() => checkoutFields?.find((field: any) => field.order_type_id === options?.type && field?.validation_field?.code === 'comments'), [JSON.stringify(checkoutFields), options])
|
|
189
191
|
const guestCheckoutCoupon = useMemo(() => checkoutFields?.find((field: any) => field.order_type_id === options?.type && field?.validation_field?.code === 'coupon'), [JSON.stringify(checkoutFields), options])
|
|
190
192
|
const guestCheckoutZipcode = useMemo(() => checkoutFields?.find((field: any) => field.order_type_id === options?.type && field?.validation_field?.code === 'zipcode'), [JSON.stringify(checkoutFields), options])
|
|
@@ -213,9 +215,9 @@ const CheckoutUI = (props: any) => {
|
|
|
213
215
|
return acc = acc + item?.summary?.tax
|
|
214
216
|
return acc = acc
|
|
215
217
|
}, cart?.subtotal)
|
|
216
|
-
|
|
218
|
+
const allowDriverTipPickup = configs?.driver_tip_allowed_at_pickup?.value === '1' && options?.type === 2
|
|
217
219
|
const validateCommentsCartField = (guestCheckoutComment?.enabled && (user?.guest_id ? guestCheckoutComment?.required_with_guest : guestCheckoutComment?.required)) && (cart?.comment === null || cart?.comment?.trim().length === 0)
|
|
218
|
-
const validateDriverTipField = options.type === 1 && (guestCheckoutDriveTip?.enabled && (user?.guest_id ? guestCheckoutDriveTip?.required_with_guest : guestCheckoutDriveTip?.required)) && (Number(cart?.driver_tip) <= 0)
|
|
220
|
+
const validateDriverTipField = (options.type === 1 || allowDriverTipPickup) && (guestCheckoutDriveTip?.enabled && (user?.guest_id ? guestCheckoutDriveTip?.required_with_guest : guestCheckoutDriveTip?.required)) && (Number(cart?.driver_tip) <= 0)
|
|
219
221
|
const validateCouponField = (guestCheckoutCoupon?.enabled && (user?.guest_id ? guestCheckoutCoupon?.required_with_guest : guestCheckoutCoupon?.required)) && !cart?.offers?.some((offer: any) => offer?.type === 2)
|
|
220
222
|
const validateZipcodeCard = (guestCheckoutZipcode?.enabled && (user?.guest_id ? guestCheckoutZipcode?.required_with_guest : guestCheckoutZipcode?.required)) && paymethodSelected?.gateway === 'stripe' && paymethodSelected?.data?.card && !paymethodSelected?.data?.card?.zipcode
|
|
221
223
|
|
|
@@ -236,7 +238,7 @@ const CheckoutUI = (props: any) => {
|
|
|
236
238
|
const driverTipsOptions = typeof configs?.driver_tip_options?.value === 'string'
|
|
237
239
|
? JSON.parse(configs?.driver_tip_options?.value) || []
|
|
238
240
|
: configs?.driver_tip_options?.value || []
|
|
239
|
-
const driverTipsField = !cartState.loading && cart && cart?.business_id && options.type === 1 && cart?.status !== 2 && (guestCheckoutDriveTip?.enabled) && driverTipsOptions.length > 0
|
|
241
|
+
const driverTipsField = !cartState.loading && cart && cart?.business_id && (options.type === 1 || allowDriverTipPickup) && cart?.status !== 2 && (guestCheckoutDriveTip?.enabled) && driverTipsOptions.length > 0
|
|
240
242
|
|
|
241
243
|
const configTypes = configs?.order_types_allowed?.value.split('|').map((value: any) => Number(value)) || []
|
|
242
244
|
|
|
@@ -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 allowDriverTipPickup = configs?.driver_tip_allowed_at_pickup?.value === '1' && options?.type === 2
|
|
106
107
|
const isGuestCheckoutEnabled = configs?.guest_checkout_enabled?.value === '1'
|
|
107
108
|
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) || []
|
|
108
109
|
const isChewLayout = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
|
|
@@ -494,7 +495,7 @@ const MultiCheckoutUI = (props: any) => {
|
|
|
494
495
|
)}
|
|
495
496
|
{
|
|
496
497
|
isMultiDriverTips &&
|
|
497
|
-
options?.type === 1 &&
|
|
498
|
+
(options?.type === 1 || allowDriverTipPickup) &&
|
|
498
499
|
validationFields?.fields?.checkout?.driver_tip?.enabled &&
|
|
499
500
|
openCarts.every((cart: any) => cart.business_id && cart.status !== 2) &&
|
|
500
501
|
driverTipsOptions && driverTipsOptions?.length > 0 &&
|