ordering-ui-react-native 0.16.81-release → 0.16.82-release

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 (5) hide show
  1. package/package.json +1 -1
  2. package/themes/business/src/components/GoogleMap/index.tsx +58 -57
  3. package/themes/business/src/components/MapView/index.tsx +8 -8
  4. package/themes/business/src/components/OrderDetails/OrderContentComponent.tsx +3 -3
  5. package/themes/business/src/components/shared/OModal.tsx +16 -9
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ordering-ui-react-native",
3
- "version": "0.16.81-release",
3
+ "version": "0.16.82-release",
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/GoogleMap/index.tsx CHANGED
@@ -80,9 +80,9 @@ export const GoogleMap = (props: GoogleMapsParams) => {
80
80
  locations.map((location: { lat: number; lng: number; level: number }) => {
81
81
  return location.level === 4 && driverLocation?.lat
82
82
  ? {
83
- latitude: driverLocation?.lat,
84
- longitude: driverLocation?.lng,
85
- }
83
+ latitude: driverLocation?.lat,
84
+ longitude: driverLocation?.lng,
85
+ }
86
86
  : { latitude: location.lat, longitude: location.lng };
87
87
  });
88
88
 
@@ -107,7 +107,7 @@ export const GoogleMap = (props: GoogleMapsParams) => {
107
107
  }
108
108
  let data = null;
109
109
  const details = {
110
- geometry: { location: { lat: pos.latitude, lng: pos.longitude } },
110
+ geometry: { location: { lat: pos?.latitude, lng: pos?.longitude } },
111
111
  };
112
112
  if (isSetInputs) {
113
113
  data = {
@@ -165,8 +165,8 @@ export const GoogleMap = (props: GoogleMapsParams) => {
165
165
  const lat1 = pointA.lat;
166
166
  const lon1 = pointA.lng;
167
167
 
168
- const lat2 = pointB.latitude;
169
- const lon2 = pointB.longitude;
168
+ const lat2 = pointB?.latitude;
169
+ const lon2 = pointB?.longitude;
170
170
 
171
171
  const R = 6371e3;
172
172
  const φ1 = lat1 * (Math.PI / 180);
@@ -201,11 +201,11 @@ export const GoogleMap = (props: GoogleMapsParams) => {
201
201
  content: !(errKey === 'ERROR_MAX_LIMIT_LOCATION_TO')
202
202
  ? [t(errKey, mapErrors[errKey])]
203
203
  : [
204
- `${t(errKey, mapErrors[errKey])} ${maxLimitLocation} ${t(
205
- 'METTERS',
206
- 'meters',
207
- )}`,
208
- ],
204
+ `${t(errKey, mapErrors[errKey])} ${maxLimitLocation} ${t(
205
+ 'METTERS',
206
+ 'meters',
207
+ )}`,
208
+ ],
209
209
  key: errKey,
210
210
  });
211
211
  };
@@ -237,9 +237,9 @@ export const GoogleMap = (props: GoogleMapsParams) => {
237
237
  MARKERS = locations.map((location: { lat: number; lng: number; level: number }) => {
238
238
  return location.level === 4 && driverLocation?.lat
239
239
  ? {
240
- latitude: driverLocation?.lat,
241
- longitude: driverLocation?.lng,
242
- }
240
+ latitude: driverLocation?.lat,
241
+ longitude: driverLocation?.lng,
242
+ }
243
243
  : { latitude: location.lat, longitude: location.lng };
244
244
  })
245
245
  fitAllMarkers();
@@ -284,7 +284,7 @@ export const GoogleMap = (props: GoogleMapsParams) => {
284
284
  onRegionChangeComplete={
285
285
  !readOnly
286
286
  ? coordinates => handleChangeRegion(coordinates)
287
- : () => {}
287
+ : () => { }
288
288
  }
289
289
  zoomTapEnabled
290
290
  zoomEnabled
@@ -302,12 +302,13 @@ export const GoogleMap = (props: GoogleMapsParams) => {
302
302
  i: number,
303
303
  ) => (
304
304
  <React.Fragment key={i}>
305
- <Marker
306
- coordinate={location}
307
- onPress={() => {
305
+ <Marker
306
+ coordinate={location}
307
+ onPress={() => {
308
308
  mapRef.current?.animateCamera({
309
- center: { latitude: location.latitude, longitude:location.longitude },
310
- })}}
309
+ center: { latitude: location?.latitude, longitude: location?.longitude },
310
+ })
311
+ }}
311
312
  >
312
313
  <Icon
313
314
  name="map-marker"
@@ -328,46 +329,46 @@ export const GoogleMap = (props: GoogleMapsParams) => {
328
329
  <Callout
329
330
  onPress={() => {
330
331
  showLocation({
331
- latitude: location.latitude,
332
- longitude: location.longitude,
333
- sourceLatitude: userLocation.latitude,
334
- sourceLongitude: userLocation.longitude,
335
- naverCallerName: 'com.businessapp',
336
- dialogTitle: t('SHOW_IN_OTHER_MAPS', 'Show in other maps'),
337
- dialogMessage: t('WHAT_APP_WOULD_YOU_USE', 'What app would you like to use?'),
338
- cancelText: t('CANCEL', 'Cancel'),
332
+ latitude: location?.latitude,
333
+ longitude: location?.longitude,
334
+ sourceLatitude: userLocation?.latitude,
335
+ sourceLongitude: userLocation.longitude,
336
+ naverCallerName: 'com.businessapp',
337
+ dialogTitle: t('SHOW_IN_OTHER_MAPS', 'Show in other maps'),
338
+ dialogMessage: t('WHAT_APP_WOULD_YOU_USE', 'What app would you like to use?'),
339
+ cancelText: t('CANCEL', 'Cancel'),
339
340
  })
340
341
  }}
341
342
  >
342
- <View style={{flex: 1,width: 250, paddingRight: 10, paddingLeft: 10, justifyContent:'space-between' }}>
343
- <View style={{flex: 1, marginBottom: 20}}>
344
- <OText size={16} weight={'bold'} style={{paddingTop: 10, marginBottom: 10}}>{locations[i]?.title}</OText>
345
- { locations[i]?.address && (
346
- <>
347
- <OText size={16} >{locations[i]?.address.addressName}</OText>
348
- <OText size={16} >{locations[i]?.address.zipcode}</OText>
349
- </>
350
- )}
351
- </View>
352
- <OButton
353
- text={t('GO_TO_THIS_LOCATION', 'Go to this location')}
354
- imgRightSrc={null}
355
- textStyle={{
356
- color: theme.colors.white,
357
- fontFamily: 'Poppins',
358
- fontStyle: 'normal',
359
- fontWeight: 'normal',
360
- fontSize: 16
361
- }}
362
- style={{
363
- alignContent:'center',
364
- borderRadius: 10,
365
- height: 35,
366
- bottom:10
367
- }}
368
- bgColor={theme.colors.primary}
369
- borderColor={theme.colors.primary}
370
- />
343
+ <View style={{ flex: 1, width: 250, paddingRight: 10, paddingLeft: 10, justifyContent: 'space-between' }}>
344
+ <View style={{ flex: 1, marginBottom: 20 }}>
345
+ <OText size={16} weight={'bold'} style={{ paddingTop: 10, marginBottom: 10 }}>{locations[i]?.title}</OText>
346
+ {locations[i]?.address && (
347
+ <>
348
+ <OText size={16} >{locations[i]?.address.addressName}</OText>
349
+ <OText size={16} >{locations[i]?.address.zipcode}</OText>
350
+ </>
351
+ )}
352
+ </View>
353
+ <OButton
354
+ text={t('GO_TO_THIS_LOCATION', 'Go to this location')}
355
+ imgRightSrc={null}
356
+ textStyle={{
357
+ color: theme.colors.white,
358
+ fontFamily: 'Poppins',
359
+ fontStyle: 'normal',
360
+ fontWeight: 'normal',
361
+ fontSize: 16
362
+ }}
363
+ style={{
364
+ alignContent: 'center',
365
+ borderRadius: 10,
366
+ height: 35,
367
+ bottom: 10
368
+ }}
369
+ bgColor={theme.colors.primary}
370
+ borderColor={theme.colors.primary}
371
+ />
371
372
  </View>
372
373
  </Callout>
373
374
  </Marker>
package/themes/business/src/components/MapView/index.tsx CHANGED
@@ -42,7 +42,7 @@ const MapViewComponent = (props: MapViewParams) => {
42
42
  followUserLocation
43
43
  } = useLocation();
44
44
 
45
- const location = { lat: userLocation.latitude, lng: userLocation.longitude }
45
+ const location = { lat: userLocation?.latitude, lng: userLocation?.longitude }
46
46
  const haveOrders = Object.values(markerGroups)?.length > 0 && Object.values(customerMarkerGroups)?.length > 0
47
47
  const closeAlert = () => {
48
48
  setAlertState({
@@ -57,8 +57,8 @@ const MapViewComponent = (props: MapViewParams) => {
57
57
  [
58
58
  { latitude: location.latitude, longitude: location.longitude },
59
59
  {
60
- latitude: userLocation.latitude,
61
- longitude: userLocation.longitude,
60
+ latitude: userLocation?.latitude,
61
+ longitude: userLocation?.longitude,
62
62
  },
63
63
  ],
64
64
  {
@@ -213,10 +213,10 @@ const MapViewComponent = (props: MapViewParams) => {
213
213
  }
214
214
 
215
215
  useEffect(() => {
216
- if (userLocation.latitude !== 0 && userLocation.longitude !== 0) {
216
+ if (userLocation?.latitude !== 0 && userLocation?.longitude !== 0) {
217
217
  const location = {
218
- lat: userLocation.latitude,
219
- lng: userLocation.longitude
218
+ lat: userLocation?.latitude,
219
+ lng: userLocation?.longitude
220
220
  }
221
221
  setDriverLocation({ location })
222
222
  }
@@ -231,8 +231,8 @@ const MapViewComponent = (props: MapViewParams) => {
231
231
  ref={mapRef}
232
232
  provider={PROVIDER_GOOGLE}
233
233
  initialRegion={{
234
- latitude: initialPosition.latitude,
235
- longitude: initialPosition.longitude,
234
+ latitude: initialPosition?.latitude,
235
+ longitude: initialPosition?.longitude,
236
236
  latitudeDelta: haveOrders ? 0.01 : 0.1,
237
237
  longitudeDelta: haveOrders ? 0.01 * ASPECT_RATIO : 0.1 * ASPECT_RATIO,
238
238
  }}
package/themes/business/src/components/OrderDetails/OrderContentComponent.tsx CHANGED
@@ -43,12 +43,12 @@ interface OrderContent {
43
43
  export const OrderContentComponent = (props: OrderContent) => {
44
44
  const [, t] = useLanguage();
45
45
  const theme = useTheme()
46
- const [{user}] = useSession()
47
- console.log(user)
46
+ const [{ user }] = useSession()
48
47
  const { order, logisticOrderStatus, isOrderGroup, lastOrder } = props;
49
48
  const [{ parsePrice, parseNumber }] = useUtils();
50
49
  const [{ configs }] = useConfig();
51
50
  const [orientationState] = useDeviceOrientation();
51
+ const distanceUnit = configs?.distance_unit?.value
52
52
 
53
53
  const WIDTH_SCREEN = orientationState?.dimensions?.width
54
54
 
@@ -110,7 +110,7 @@ export const OrderContentComponent = (props: OrderContent) => {
110
110
 
111
111
  const onTextLayout = useCallback((e: any) => {
112
112
  setLengthMore((e.nativeEvent.lines.length == 2 && e.nativeEvent.lines[1].width > WIDTH_SCREEN * .76) || e.nativeEvent.lines.length > 2); //to check the text is more than 2 lines or not
113
- },[]);
113
+ }, []);
114
114
 
115
115
  return (
116
116
  <OrderContent isOrderGroup={isOrderGroup} lastOrder={lastOrder}>
package/themes/business/src/components/shared/OModal.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as React from 'react';
2
- import { Modal, StyleSheet, SafeAreaView, View } from 'react-native';
2
+ import { Modal, StyleSheet, SafeAreaView, View, TouchableOpacity } from 'react-native';
3
3
  import Icon from 'react-native-vector-icons/Feather';
4
4
  import OIcon from './OIcon';
5
5
  import OText from './OText';
@@ -158,6 +158,18 @@ const OModal = (props: Props): React.ReactElement => {
158
158
  fontWeight: '600',
159
159
  textAlign: 'center',
160
160
  },
161
+ btnBackArrow: {
162
+ borderWidth: 0,
163
+ width: 32,
164
+ height: 32,
165
+ tintColor: theme.colors.textGray,
166
+ backgroundColor: theme.colors.clear,
167
+ borderColor: theme.colors.clear,
168
+ shadowColor: theme.colors.clear,
169
+ paddingLeft: 0,
170
+ paddingRight: 0,
171
+ marginTop: 10
172
+ },
161
173
  });
162
174
 
163
175
  return (
@@ -205,14 +217,9 @@ const OModal = (props: Props): React.ReactElement => {
205
217
  {!customClose && (
206
218
  <View style={styles.titleSection}>
207
219
  <View style={styles.titleGroups}>
208
- <OIconButton
209
- icon={theme.images.general.arrow_left}
210
- iconStyle={{ width: 20, height: 20 }}
211
- borderColor={theme.colors.clear}
212
- style={styleCloseButton || styles.cancelBtn}
213
- onClick={onClose}
214
- />
215
-
220
+ <TouchableOpacity onPress={() => onClose()} style={styles.btnBackArrow}>
221
+ <OIcon src={theme.images.general.arrow_left} color={theme.colors.textGray} />
222
+ </TouchableOpacity>
216
223
  <OText
217
224
  size={16}
218
225
  style={styles.modalText}