ordering-ui-react-native 0.12.12 → 0.12.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.12.12",
+  "version": "0.12.16",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",

package/src/components/AddressList/index.tsx

@@ -57,7 +57,7 @@ const AddressListUI = (props: AddressListParams) => {
 
   const [orderState] = useOrder()
   const [, t] = useLanguage()
-  const [{ auth }] = useSession()
+  const [{ auth }, { logout }] = useSession()
   const [alert, setAlert] = useState<any>({ show: false })
 
   const onNavigatorRedirect = () => {
@@ -261,6 +261,8 @@ const AddressListUI = (props: AddressListParams) => {
                   addressList.error[0] ||
                   t('NETWORK_ERROR', 'Network Error, please reload the app')
                 }
+                btnTitle={t('LOGIN', 'Login')}
+                onClickButton={() => logout()}
               />
             )
           )}

package/src/components/GoogleMap/index.tsx

@@ -41,7 +41,7 @@ export const GoogleMap = (props: GoogleMapsParams) => {
     ERROR_NOT_FOUND_ADDRESS: 'Sorry, we couldn\'t find an address',
     ERROR_MAX_LIMIT_LOCATION_TO: 'Sorry, You can only set the position to'
   }
-  const MARKERS = locations && locations.map((location: { lat: number, lng: number }) => {
+  let MARKERS = locations && locations.map((location: { lat: number, lng: number }) => {
     return {
       latitude: location.lat,
       longitude: location.lng
@@ -176,6 +176,17 @@ export const GoogleMap = (props: GoogleMapsParams) => {
     return () => clearInterval(interval)
   }, [locations])
 
+  useEffect(() => {
+    if(!locations) return
+    locations[0] = {...locations[0], lat: location.lat, lng: location.lng}
+    MARKERS = locations && locations.map((location: { lat: number, lng: number }) => {
+      return {
+        latitude: location.lat,
+        longitude: location.lng
+      }
+    })
+  }, [location])
+
   return (
     <>
       <MapView

package/src/components/OrderDetails/index.tsx

@@ -208,7 +208,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     }
   }, [messagesReadList])
 
-  const locations = [
+  let locations = [
     { ...order?.driver?.location, title: t('DRIVER', 'Driver'), icon: order?.driver?.photo || 'https://res.cloudinary.com/demo/image/fetch/c_thumb,g_face,r_max/https://www.freeiconspng.com/thumbs/driver-icon/driver-icon-14.png' },
     { ...order?.business?.location, title: order?.business?.name, icon: order?.business?.logo || theme.images.dummies.businessLogo },
     { ...order?.customer?.location, title: t('YOUR_LOCATION', 'Your Location'), icon: order?.customer?.photo || 'https://res.cloudinary.com/demo/image/upload/c_thumb,g_face,r_max/d_avatar.png/non_existing_id.png' }
@@ -216,7 +216,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
 
   useEffect(() => {
     if (driverLocation) {
-      locations[0] = driverLocation
+      locations[0] = {...locations[0], lat: driverLocation.lat, lng: driverLocation.lng}
     }
   }, [driverLocation])
 
@@ -361,9 +361,8 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                   {order?.driver?.location && parseInt(order?.status) === 9 && (
                     <Map>
                       <GoogleMap
-                        location={order?.driver?.location}
+                        location={driverLocation ?? order?.driver?.location}
                         locations={locations}
-                        readOnly
                       />
                     </Map>
                   )}

package/themes/business/src/components/AcceptOrRejectOrder/index.tsx

@@ -111,7 +111,7 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
       openTimerIOnput();
     }
 
-    if (actions && action === 'reject') {
+    if (actions && (action === 'reject' || action === 'failed')) {
       openTextTareaOInput();
     }
   }, []);
@@ -178,6 +178,10 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
         comment: comments,
         status: 6,
       },
+      failedByDriver: {
+        comment: comments,
+        status: 12
+      }
     };
 
     if (actions && action === 'accept') {
@@ -186,6 +190,9 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
     if (actions && action === 'reject') {
       bodyToSend = orderStatus[actions.reject];
     }
+    if(actions && action === 'failed'){
+      bodyToSend = orderStatus[actions.failed]
+    }
 
     bodyToSend.id = orderId;
 
@@ -330,7 +337,6 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
               </Timer>
             </View>
           )}
-            
           <TimeField
             ref={timerRef}
             keyboardType="numeric"
@@ -346,11 +352,11 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
             onEndEditing={handleFixTime}
           />
 
-          {action === 'reject' && (
+          {(action === 'reject' || action === 'failed') && (
             <Comments ref={viewRef}>
               <OTextarea
                 textTareaRef={textTareaRef}
-                autoFocus={actions && action === 'reject'}
+                autoFocus={actions && (action === 'reject' || action === 'failed')}
                 onFocus={handleFocus}
                 placeholder={t(
                   'PLEASE_TYPE_YOUR_COMMENTS_IN_HERE',

package/themes/business/src/components/MapView/index.tsx

@@ -42,7 +42,7 @@ const MapViewComponent = (props: MapViewParams) => {
   } = useLocation();
 
   const location = { lat: userLocation.latitude, lng: userLocation.longitude }
-
+  const haveOrders = Object.values(markerGroups)?.length > 0 && Object.values(customerMarkerGroups)?.length > 0
   const closeAlert = () => {
     setAlertState({
       open: false,
@@ -222,8 +222,8 @@ const MapViewComponent = (props: MapViewParams) => {
               initialRegion={{
                 latitude: initialPosition.latitude,
                 longitude: initialPosition.longitude,
-                latitudeDelta: 0.001,
-                longitudeDelta: 0.001 * ASPECT_RATIO,
+                latitudeDelta: haveOrders ? 0.01 : 0.1,
+                longitudeDelta: haveOrders ? 0.01 * ASPECT_RATIO : 0.1 * ASPECT_RATIO,
               }}
               style={{ flex: 1 }}
               zoomTapEnabled
@@ -241,7 +241,7 @@ const MapViewComponent = (props: MapViewParams) => {
                     orderIds={marker.map((order: any) => order.id).join(', ')}
                   />
                 ))}
-                {Object.values(customerMarkerGroups).map((marker: any) => (
+                {Object.values(customerMarkerGroups).map((marker: any) =>  (
                   <RenderMarker
                     key={marker[0]?.customer_id}
                     marker={marker[0]}

package/themes/business/src/components/NewOrderNotification/index.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useCallback } from 'react'
-import { useEvent, useLanguage, useUtils, useSession } from 'ordering-components/native'
+import { useEvent, useLanguage, useUtils, useSession, useApi } from 'ordering-components/native'
 import { View, Modal, StyleSheet, TouchableOpacity, Dimensions } from 'react-native'
 import { OText, OIcon } from '../shared'
 import { useTheme } from 'styled-components/native'
@@ -7,7 +7,7 @@ import Icon from 'react-native-vector-icons/Feather'
 import { NotificationContainer } from './styles'
 import Sound from 'react-native-sound'
 import moment from 'moment'
-
+import { useLocation } from '../../hooks/useLocation'
 Sound.setCategory('Playback')
 
 const windowWidth = Dimensions.get('screen').width
@@ -16,9 +16,10 @@ export const NewOrderNotification = (props: any) => {
   const [events] = useEvent()
   const theme = useTheme()
   const [, t] = useLanguage()
-  const [{ user }] = useSession()
+  const [{ user, token }] = useSession()
+  const [ordering] = useApi()
   const [{ getTimeAgo }] = useUtils()
-
+  const { getCurrentLocation } = useLocation();
   const [modalOpen, setModalOpen] = useState(false)
   const [newOrderId, setNewOrderId] = useState(null)
   const [soundTimeout, setSoundTimeout] = useState<any>(null)
@@ -33,15 +34,21 @@ export const NewOrderNotification = (props: any) => {
 
 
   const handlePlayNotificationSound = () => {
+    let times = 0
     const _timeout = setInterval(function () {
       notificationSound.play(success => {
         if (success) {
           console.log('successfully finished playing');
+          times = times + 1
         } else {
           console.log('playback failed due to audio decoding errors');
         }
       })
       setSoundTimeout(_timeout)
+      if (times === 3) {
+        clearInterval(_timeout)
+        clearInterval(soundTimeout)
+      }
     }, 2500)
   }
 
@@ -64,9 +71,16 @@ export const NewOrderNotification = (props: any) => {
     }
   }, [handleNotification])
 
-  
-  const handleUpdateOrder = useCallback((order: any) => {
+  const handleUpdateOrder = useCallback(async (order: any) => {
     if (order?.driver) {
+      const location = await getCurrentLocation()
+      await fetch(`${ordering.root}/users/${user.id}/locations`, {
+        method: 'POST',
+        body: JSON.stringify({
+          location: JSON.stringify({location: `{lat: ${location.latitude}, lng: ${location.longitude}}`})
+        }),
+        headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` }
+      })
       const assignedTimeDiff = moment.utc(order?.driver?.last_order_assigned_at).local().fromNow()
       if (assignedTimeDiff === 'a few seconds ago') {
         clearInterval(soundTimeout)

package/themes/business/src/components/OrderDetails/Delivery.tsx

@@ -75,13 +75,14 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
   const showFloatButtonsPickUp: any = {
     8: true,
     3: true,
-    18: true
+    18: true,
   };
 
   const showFloatButtonsAcceptOrReject: any = {
     0: true,
     4: true,
     7: true,
+    14: true
   };
 
   const marginContainer: any = {
@@ -295,7 +296,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                 </Pickup>
               )}
               {(order?.status === 3) && order?.delivery_type === 1 && (
-                <View style={{paddingVertical: 20, marginBottom: 20}}>
+                <View style={{ paddingVertical: 20, marginBottom: 20 }}>
                   <OButton
                     style={styles.btnPickUp}
                     textStyle={{ color: theme.colors.white }}
@@ -388,7 +389,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                 handleChangeOrderStatus && handleChangeOrderStatus(9)
               }
               firstButtonClick={() =>
-                handleChangeOrderStatus && handleChangeOrderStatus(12)
+                handleViewActionOrder && handleViewActionOrder('failed')
               }
               secondBtnText={t('PICKUP_COMPLETE', 'Pickup complete')}
               secondButton={true}
@@ -407,7 +408,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                   handleChangeOrderStatus && handleChangeOrderStatus(11)
                 }
                 firstButtonClick={() =>
-                  handleChangeOrderStatus && handleChangeOrderStatus(12)
+                  handleViewActionOrder && handleViewActionOrder('failed')
                 }
                 secondBtnText={t('DELIVERY_COMPLETE', 'Delivery complete')}
                 secondButton={true}

package/themes/business/src/components/OrderDetails/OrderContentComponent.tsx

@@ -49,6 +49,9 @@ export const OrderContentComponent = (props: OrderContent) => {
         textBold: {
             fontWeight: '600',
         },
+        textLink: {
+          color: '#365CC7'
+        }
     })
     return (
         <OrderContent>
@@ -67,6 +70,7 @@ export const OrderContentComponent = (props: OrderContent) => {
                 PressStyle={styles.linkWithIcons}
                 url={`mailto:${order?.business?.email}`}
                 shorcut={order?.business?.email}
+                TextStyle={styles.textLink}
               />
             </View>
           )}
@@ -77,6 +81,7 @@ export const OrderContentComponent = (props: OrderContent) => {
                 PressStyle={styles.linkWithIcons}
                 url={`tel:${order?.business?.cellphone}`}
                 shorcut={`${order?.business?.cellphone}`}
+                TextStyle={styles.textLink}
               />
             </View>
           )}
@@ -87,6 +92,7 @@ export const OrderContentComponent = (props: OrderContent) => {
                 PressStyle={styles.linkWithIcons}
                 url={`tel:${order?.business?.phone}`}
                 shorcut={order?.business?.phone}
+                TextStyle={styles.textLink}
               />
             </View>
           )}
@@ -100,6 +106,7 @@ export const OrderContentComponent = (props: OrderContent) => {
                   android: `geo:0,0?q=${order?.business?.address}`,
                 })}
                 shorcut={order?.business?.address}
+                TextStyle={styles.textLink}
               />
             </View>
           )}
@@ -113,6 +120,7 @@ export const OrderContentComponent = (props: OrderContent) => {
                   android: `geo:0,0?q=${order?.business?.address_notes}`,
                 })}
                 shorcut={order?.business?.address_notes}
+                TextStyle={styles.textLink}
               />
             </View>
           )}
@@ -165,6 +173,8 @@ export const OrderContentComponent = (props: OrderContent) => {
                 PressStyle={styles.linkWithIcons}
                 url={`mailto:${order?.customer?.email}`}
                 shorcut={order?.customer?.email}
+                TextStyle={styles.textLink}
+
               />
             </View>
           )}
@@ -175,6 +185,7 @@ export const OrderContentComponent = (props: OrderContent) => {
                 PressStyle={styles.linkWithIcons}
                 url={`tel:${order?.customer?.cellphone}`}
                 shorcut={order?.customer?.cellphone}
+                TextStyle={styles.textLink}
               />
             </View>
           )}
@@ -185,6 +196,7 @@ export const OrderContentComponent = (props: OrderContent) => {
                 PressStyle={styles.linkWithIcons}
                 url={`tel:${order?.customer?.phone}`}
                 shorcut={order?.customer?.phone}
+                TextStyle={styles.textLink}
               />
             </View>
           )}
@@ -198,6 +210,7 @@ export const OrderContentComponent = (props: OrderContent) => {
                   android: `geo:0,0?q=${order?.customer?.address}`,
                 })}
                 shorcut={order?.customer?.address}
+                TextStyle={styles.textLink}
               />
             </View>
           )}
@@ -226,7 +239,7 @@ export const OrderContentComponent = (props: OrderContent) => {
             {t('ORDER_DETAILS', 'Order Details')}
           </OText>
 
-          {order?.products?.length &&
+          {order?.products?.length > 0 &&
             order?.products.map((product: any, i: number) => (
               <ProductItemAccordion
                 key={product?.id || i}