ordering-ui-react-native 0.23.98 → 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
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
|
+
}
|