ordering-ui-react-native 0.12.49 → 0.12.53

package/package.json

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

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

@@ -1,15 +1,17 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { Dimensions, StyleSheet, View, SafeAreaView } from 'react-native';
-import MapView, { PROVIDER_GOOGLE, Marker, Region } from 'react-native-maps';
+import MapView, { PROVIDER_GOOGLE, Marker, Region, Callout } from 'react-native-maps';
 import Geocoder from 'react-native-geocoding';
 import { useLanguage, useConfig, useUtils } from 'ordering-components/native';
 import { GoogleMapsParams } from '../../types';
 import Alert from '../../providers/AlertProvider';
-import { OIconButton, OIcon } from '../shared';
+import { OIconButton, OIcon, OText, OButton } from '../shared';
 import { FloatingButton } from '../FloatingButton';
 import Icon from 'react-native-vector-icons/FontAwesome5';
 import { useTheme } from 'styled-components/native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useLocation } from '../../hooks/useLocation';
+import { showLocation } from 'react-native-map-link';
 
 export const GoogleMap = (props: GoogleMapsParams) => {
   const {
@@ -30,6 +32,15 @@ export const GoogleMap = (props: GoogleMapsParams) => {
     navigation,
   } = props;
 
+  const {
+    hasLocation,
+    initialPosition,
+    followUserLocation,
+    getCurrentLocation,
+    userLocation,
+    stopFollowUserLocation,
+  } = useLocation();
+
   const { top } = useSafeAreaInsets();
   const theme = useTheme();
   const [, t] = useLanguage();
@@ -64,7 +75,7 @@ export const GoogleMap = (props: GoogleMapsParams) => {
     ERROR_MAX_LIMIT_LOCATION_TO: 'Sorry, You can only set the position to',
   };
 
-  const MARKERS =
+  let MARKERS =
     locations &&
     locations.map((location: { lat: number; lng: number; level: number }) => {
       return location.level === 4 && driverLocation?.lat
@@ -221,6 +232,18 @@ export const GoogleMap = (props: GoogleMapsParams) => {
       fitAllMarkers();
     }
   }, [isMapReady]);
+  useEffect(() => {
+    if (!locations) return
+    MARKERS = locations.map((location: { lat: number; lng: number; level: number }) => {
+      return location.level === 4 && driverLocation?.lat
+        ? {
+            latitude: driverLocation?.lat,
+            longitude: driverLocation?.lng,
+          }
+        : { latitude: location.lat, longitude: location.lng };
+    })
+    fitAllMarkers();
+  }, [driverLocation])
 
   const styles = StyleSheet.create({
     map: {
@@ -279,7 +302,13 @@ export const GoogleMap = (props: GoogleMapsParams) => {
                     i: number,
                   ) => (
                     <React.Fragment key={i}>
-                      <Marker coordinate={location} title={locations[i]?.title}>
+                      <Marker 
+                        coordinate={location} 
+                        onPress={() => { 
+                          mapRef.current?.animateCamera({
+                          center: { latitude: location.latitude, longitude:location.longitude },
+                        })}}
+                      >
                         <Icon
                           name="map-marker"
                           size={50}
@@ -296,6 +325,51 @@ export const GoogleMap = (props: GoogleMapsParams) => {
                             height={25}
                           />
                         </View>
+                        <Callout
+                          onPress={() => {
+                            showLocation({
+                                      latitude: location.latitude,
+                                      longitude: location.longitude,
+                                      sourceLatitude: userLocation.latitude,
+                                      sourceLongitude: userLocation.longitude,
+                                      naverCallerName: 'com.businessapp',
+                                      dialogTitle: t('SHOW_IN_OTHER_MAPS', 'Show in other maps'),
+                                      dialogMessage: t('WHAT_APP_WOULD_YOU_USE', 'What app would you like to use?'),
+                                      cancelText: t('CANCEL', 'Cancel'),
+                            })
+                          }}
+                        >
+                          <View style={{flex: 1,width: 250, paddingRight: 10, paddingLeft: 10, justifyContent:'space-between' }}>
+                              <View style={{flex: 1, marginBottom: 20}}>
+                                <OText size={16} weight={'bold'} style={{paddingTop: 10, marginBottom: 10}}>{locations[i]?.title}</OText>
+                                { locations[i]?.address && (
+                                  <>
+                                    <OText size={16} >{locations[i]?.address.addressName}</OText>
+                                    <OText size={16} >{locations[i]?.address.zipcode}</OText>
+                                  </>
+                                )}
+                              </View>
+                              <OButton
+                                text={t('GO_TO_THIS_LOCATION', 'Go to this location')}
+                                imgRightSrc={null}
+                                textStyle={{
+                                  color: theme.colors.white,
+                                  fontFamily: 'Poppins',
+                                  fontStyle: 'normal',
+                                  fontWeight: 'normal',
+                                  fontSize: 16
+                                }}
+                                style={{
+                                  alignContent:'center',
+                                  borderRadius: 10,
+                                  height: 35,
+                                  bottom:10
+                                }}
+                                bgColor={theme.colors.primary}
+                                borderColor={theme.colors.primary}
+                              />   
+                          </View>
+                        </Callout>
                       </Marker>
                     </React.Fragment>
                   ),

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

@@ -319,10 +319,10 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     }
   }, [messagesReadList]);
 
-  const locations = [
+  let locations = [
     {
       ...order?.driver?.location,
-      title: t('DRIVER', 'Driver'),
+      title: order?.driver?.name ?? 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',
@@ -331,12 +331,20 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     {
       ...order?.business?.location,
       title: order?.business?.name,
+      address: {
+        addressName: order?.business?.address,
+        zipcode: order?.business?.zipcode
+      },
       icon: order?.business?.logo || theme.images.dummies.businessLogo,
       level: 2,
     },
     {
       ...order?.customer?.location,
-      title: t('CUSTOMER', 'Customer'),
+      title: order?.customer?.name ??  t('CUSTOMER', 'Customer'),
+      address: {
+        addressName: order?.customer?.address,
+        zipcode: order?.customer?.zipcode
+      },
       icon:
         order?.customer?.photo ||
         'https://res.cloudinary.com/demo/image/upload/c_thumb,g_face,r_max/d_avatar.png/non_existing_id.png',

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

@@ -1,6 +1,6 @@
 //React & React Native
 import React, { useState, useEffect } from 'react';
-import { StyleSheet, View, Platform } from 'react-native';
+import { StyleSheet, View, Platform, ScrollView } from 'react-native';
 
 // Thirds
 import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
@@ -50,9 +50,9 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     setDriverUpdateLocation,
     orderTitle,
     appTitle,
-    handleClickLogisticOrder
-  } = props;
+    handleClickLogisticOrder,
 
+  } = props;
   const [, { showToast }] = useToast();
   const { order } = props.order
   const theme = useTheme();
@@ -141,6 +141,13 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     handleArrowBack()
   }
 
+  const handleAcceptLogisticOrder = (order : any) => {
+    handleClickLogisticOrder?.(1, order?.logistic_order_id)
+    if(order?.order_group){
+      handleArrowBack()
+    }
+  }
+
   const locations = [
     {
       ...order?.business?.location,
@@ -243,107 +250,54 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     );
   }
 
-  const OrderDetailsInformation = (_order: any, isOrderGroup: boolean) => {
-    const { order } = _order
+  const OrderDetailsInformation = (props : {order: any, isOrderGroup?: boolean, lastOrder?: boolean}) => {
+    const {
+      order,
+      isOrderGroup,
+      lastOrder,
+    } = props
     return (
       <>
-        <OrderDetailsContainer
-          keyboardShouldPersistTaps="handled"
-          showsVerticalScrollIndicator={false}
-        >
-          <>
-            <OrderContentComponent
-              order={order}
-              logisticOrderStatus={logisticOrderStatus}
-              isOrderGroup={isOrderGroup}
+        <OrderContentComponent
+          order={order}
+          logisticOrderStatus={logisticOrderStatus}
+          isOrderGroup={isOrderGroup}
+          lastOrder={lastOrder}
+        />
+        {(order?.status === 8 || order?.status === 18) && order?.delivery_type === 1 && (
+          <Pickup>
+            <OButton
+              style={styles.btnPickUp}
+              textStyle={{ color: theme.colors.primary }}
+              text={t('ARRIVED_TO_BUSINESS', 'Arrived to bussiness')}
+              onClick={() =>
+                handleChangeOrderStatus && handleChangeOrderStatus(3)
+              }
+              imgLeftStyle={{ tintColor: theme.colors.backArrow }}
             />
-            {(order?.status === 8 || order?.status === 18) && order?.delivery_type === 1 && (
-              <Pickup>
-                <OButton
-                  style={styles.btnPickUp}
-                  textStyle={{ color: theme.colors.primary }}
-                  text={t('ARRIVED_TO_BUSINESS', 'Arrived to bussiness')}
-                  onClick={() =>
-                    handleChangeOrderStatus && handleChangeOrderStatus(3)
-                  }
-                  imgLeftStyle={{ tintColor: theme.colors.backArrow }}
-                />
-              </Pickup>
-            )}
-            {order?.status === 3 && order?.delivery_type === 1 && (
-              <View style={{ paddingVertical: 20, marginBottom: 20 }}>
-                <OButton
-                  style={styles.btnPickUp}
-                  textStyle={{ color: theme.colors.white }}
-                  text={t('ORDER_NOT_READY', 'Order not ready')}
-                  onClick={() =>
-                    handleViewActionOrder && handleViewActionOrder('notReady')
-                  }
-                  imgLeftStyle={{ tintColor: theme.colors.backArrow }}
-                  bgColor={theme.colors.red}
-                />
-              </View>
-            )}
-          </>
-          <View
-            style={{
-              height:
-                order?.status === 8 && order?.delivery_type === 1 ? 50 : 35,
-            }}
-          />
-        </OrderDetailsContainer>
-
-        {showFloatButtonsPickUp[order?.status] && (
-          <FloatingButton
-            disabled={props.order?.loading}
-            btnText={t('PICKUP_FAILED', 'Pickup failed')}
-            isSecondaryBtn={false}
-            secondButtonClick={() =>
-              handleChangeOrderStatus && handleChangeOrderStatus(9)
-            }
-            firstButtonClick={() =>
-              handleViewActionOrder && handleViewActionOrder('pickupFailed')
-            }
-            secondBtnText={t('PICKUP_COMPLETE', 'Pickup complete')}
-            secondButton={true}
-            firstColorCustom={theme.colors.red}
-            secondColorCustom={theme.colors.green}
-            widthButton={'45%'}
-          />
+          </Pickup>
         )}
-        {(order?.status === 9 || order?.status === 19) && (
-          <>
-            <FloatingButton
-              disabled={props.order?.loading}
-              btnText={t('DELIVERY_FAILED', 'Delivery Failed')}
-              isSecondaryBtn={false}
-              secondButtonClick={() =>
-                handleChangeOrderStatus && handleChangeOrderStatus(11)
+        {order?.status === 3 && order?.delivery_type === 1 && (
+          <View style={{ paddingVertical: 20, marginBottom: 20 }}>
+            <OButton
+              style={styles.btnPickUp}
+              textStyle={{ color: theme.colors.white }}
+              text={t('ORDER_NOT_READY', 'Order not ready')}
+              onClick={() =>
+                handleViewActionOrder && handleViewActionOrder('notReady')
               }
-              firstButtonClick={() =>
-                handleViewActionOrder && handleViewActionOrder('deliveryFailed')
-              }
-              secondBtnText={t('DELIVERY_COMPLETE', 'Delivery complete')}
-              secondButton={true}
-              firstColorCustom={theme.colors.red}
-              secondColorCustom={theme.colors.green}
-              widthButton={'45%'}
+              imgLeftStyle={{ tintColor: theme.colors.backArrow }}
+              bgColor={theme.colors.red}
             />
-          </>
-        )}
-        {showFloatButtonsAcceptOrReject[order?.status] && (
-          <FloatingButton
-            btnText={t('REJECT', 'Reject')}
-            isSecondaryBtn={false}
-            secondButtonClick={() => order?.isLogistic && logisticOrderStatus.includes(order?.status) ? handleClickLogisticOrder?.(1, order?.logistic_order_id) : handleViewActionOrder('accept')}
-            firstButtonClick={() => order?.isLogistic && logisticOrderStatus.includes(order?.status) ? handleRejectLogisticOrder() : handleViewActionOrder('reject')}
-            secondBtnText={t('ACCEPT', 'Accept')}
-            secondButton={true}
-            firstColorCustom={theme.colors.red}
-            secondColorCustom={theme.colors.green}
-            widthButton={'45%'}
-          />
+          </View>
         )}
+        <View
+          style={{
+            height:
+              order?.status === 8 && order?.delivery_type === 1 ? 50 : 35,
+          }}
+        />
+
       </>
     )
   }
@@ -390,10 +344,66 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
         />
         {order && Object.keys(order).length > 0 && (props.order?.error?.length < 1 || !props.order?.error) && (
           <>
-            {order?.order_group && order?.order_group_id ? order?.order_group?.orders.map((order: any) => (
-              <OrderDetailsInformation order={order} />
-            )) : (
-              <OrderDetailsInformation order={order} />
+            <OrderDetailsContainer
+              keyboardShouldPersistTaps="handled"
+              showsVerticalScrollIndicator={false}
+            >
+              {order?.order_group && order?.order_group_id && order?.isLogistic ? order?.order_group?.orders.map((order: any, i: number, hash: any) => (
+                <OrderDetailsInformation key={order?.id} order={order} isOrderGroup lastOrder={hash?.length === i + 1} />
+              )) : (
+                <OrderDetailsInformation order={order} />
+              )}
+            </OrderDetailsContainer>
+            {showFloatButtonsPickUp[order?.status] && (
+              <FloatingButton
+                disabled={props.order?.loading}
+                btnText={t('PICKUP_FAILED', 'Pickup failed')}
+                isSecondaryBtn={false}
+                secondButtonClick={() =>
+                  handleChangeOrderStatus && handleChangeOrderStatus(9)
+                }
+                firstButtonClick={() =>
+                  handleViewActionOrder && handleViewActionOrder('pickupFailed')
+                }
+                secondBtnText={t('PICKUP_COMPLETE', 'Pickup complete')}
+                secondButton={true}
+                firstColorCustom={theme.colors.red}
+                secondColorCustom={theme.colors.green}
+                widthButton={'45%'}
+              />
+            )}
+            {(order?.status === 9 || order?.status === 19) && (
+              <>
+                <FloatingButton
+                  disabled={props.order?.loading}
+                  btnText={t('DELIVERY_FAILED', 'Delivery Failed')}
+                  isSecondaryBtn={false}
+                  secondButtonClick={() =>
+                    handleChangeOrderStatus && handleChangeOrderStatus(11)
+                  }
+                  firstButtonClick={() =>
+                    handleViewActionOrder && handleViewActionOrder('deliveryFailed')
+                  }
+                  secondBtnText={t('DELIVERY_COMPLETE', 'Delivery complete')}
+                  secondButton={true}
+                  firstColorCustom={theme.colors.red}
+                  secondColorCustom={theme.colors.green}
+                  widthButton={'45%'}
+                />
+              </>
+            )}
+            {showFloatButtonsAcceptOrReject[order?.status] && (
+              <FloatingButton
+                btnText={t('REJECT', 'Reject')}
+                isSecondaryBtn={false}
+                secondButtonClick={() => (order?.isLogistic && (order?.order_group || logisticOrderStatus.includes(order?.status))) ? handleAcceptLogisticOrder(order) : handleViewActionOrder('accept')}
+                firstButtonClick={() => order?.isLogistic && (order?.order_group || logisticOrderStatus.includes(order?.status)) ? handleRejectLogisticOrder() : handleViewActionOrder('reject')}
+                secondBtnText={t('ACCEPT', 'Accept')}
+                secondButton={true}
+                firstColorCustom={theme.colors.red}
+                secondColorCustom={theme.colors.green}
+                widthButton={'45%'}
+              />
             )}
           </>
         )}

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

@@ -27,14 +27,16 @@ import { ReviewCustomer } from '../ReviewCustomer'
 
 interface OrderContent {
   order: any,
-  logisticOrderStatus?: Array<number>
+  logisticOrderStatus?: Array<number>,
+  isOrderGroup?: boolean,
+  lastOrder?: boolean
 }
 
 export const OrderContentComponent = (props: OrderContent) => {
   const [, t] = useLanguage();
   const theme = useTheme()
 
-  const { order, logisticOrderStatus } = props;
+  const { order, logisticOrderStatus, isOrderGroup, lastOrder } = props;
   const [{ parsePrice, parseNumber }] = useUtils();
   const [{ configs }] = useConfig();
   const [openReviewModal, setOpenReviewModal] = useState(false)
@@ -69,7 +71,10 @@ export const OrderContentComponent = (props: OrderContent) => {
   }
 
   return (
-    <OrderContent>
+    <OrderContent isOrderGroup={isOrderGroup} lastOrder={lastOrder}>
+      {isOrderGroup && (
+        <OText size={18}>{t('ORDER', 'Order')} #{isOrderGroup ? order?.order_group_id : order?.id}</OText>
+      )}
       <OrderBusiness>
         <OText style={{ marginBottom: 5 }} size={16} weight="600">
           {t('BUSINESS_DETAILS', 'Business details')}
@@ -148,42 +153,52 @@ export const OrderContentComponent = (props: OrderContent) => {
         <OText style={{ marginBottom: 5 }} size={16} weight="600">
           {t('CUSTOMER_DETAILS', 'Customer details')}
         </OText>
-
-        <View style={{ flexDirection: 'row' }}>
-          <OText numberOfLines={2} mBottom={4}>
-            <OText
-              numberOfLines={1}
-              mBottom={4}
-              ellipsizeMode="tail"
-              space>
-              {order?.customer?.name}
-            </OText>
-
-            <OText
-              numberOfLines={1}
-              mBottom={4}
-              ellipsizeMode="tail"
-              space>
-              {order?.customer?.middle_name}
-            </OText>
-
-            <OText
-              numberOfLines={1}
-              mBottom={4}
-              ellipsizeMode="tail"
-              space>
-              {order?.customer?.lastname}
-            </OText>
-
-            <OText
-              numberOfLines={1}
-              mBottom={4}
-              ellipsizeMode="tail"
-              space>
-              {order?.customer?.second_lastname}
-            </OText>
-          </OText>
-        </View>
+        {
+          (order?.customer?.name || order?.customer?.lastname) && (
+            <View style={{ flexDirection: 'row' }}>
+              <OText numberOfLines={2} mBottom={4}>
+                {order?.customer?.name && (
+                  <OText
+                    numberOfLines={1}
+                    mBottom={4}
+                    ellipsizeMode="tail"
+                    space>
+                    {order?.customer?.name}
+                  </OText>
+                )}
+                {order?.customer?.middle_name && (
+                  <OText
+                    numberOfLines={1}
+                    mBottom={4}
+                    ellipsizeMode="tail"
+                    space>
+                    {order?.customer?.middle_name}
+                  </OText>
+                )}
+                {order?.customer?.lastname && (
+                  <OText
+                    numberOfLines={1}
+                    mBottom={4}
+                    ellipsizeMode="tail"
+                    space>
+                    {order?.customer?.lastname}
+                  </OText>
+                )}
+                {
+                  order?.customer?.second_lastname && (
+                    <OText
+                      numberOfLines={1}
+                      mBottom={4}
+                      ellipsizeMode="tail"
+                      space>
+                      {order?.customer?.second_lastname}
+                    </OText>
+                  )
+                }
+              </OText>
+            </View>
+          )
+        }
 
         {!!order?.customer?.email && (
           <View style={styles.linkWithIcons}>

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

@@ -28,8 +28,8 @@ interface OrderHeader {
   handleOpenMessagesForBusiness?: any,
   getOrderStatus?: any,
   logisticOrderStatus?: Array<number>,
-  handleViewSummaryOrder: any;
-  handleCopyClipboard: any
+  handleViewSummaryOrder?: any;
+  handleCopyClipboard?: any
 }
 
 export const OrderHeaderComponent = (props: OrderHeader) => {
@@ -96,7 +96,7 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
         />
 
         {
-          (!order?.isLogistic || !logisticOrderStatus?.includes(order?.status)) && (
+          (!order?.isLogistic || (!logisticOrderStatus?.includes(order?.status) && !order?.order_group)) && (
             <Actions>
               {getOrderStatus(order?.status, t)?.value !==
                 t('PENDING', 'Pending') && (
@@ -111,7 +111,7 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
                       }}
                       borderColor={theme.colors.clear}
                       style={styles.icons}
-                      onClick={() => handleCopyClipboard()}
+                      onClick={() => handleCopyClipboard?.()}
                     />
                     <OIconButton
                       icon={theme.images.general.print}
@@ -122,7 +122,7 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
                       }}
                       borderColor={theme.colors.clear}
                       style={styles.icons}
-                      onClick={() => handleViewSummaryOrder()}
+                      onClick={() => handleViewSummaryOrder?.()}
                     />
                   </>
                 )}
@@ -162,7 +162,7 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
         <OText numberOfLines={2} size={20} weight="600">
           <>
             {`${t('INVOICE_ORDER_NO', 'Order No.')} ${order.id} `}
-            {(!order?.isLogistic || !logisticOrderStatus?.includes(order?.status)) && (
+            {!order?.isLogistic && (!order?.order_group_id || !logisticOrderStatus?.includes(order?.status)) && (
               <>
                 {t('IS', 'is')}{' '}
                 <OText
@@ -175,7 +175,7 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
             )}
           </>
         </OText>
-        {(!order?.isLogistic || !logisticOrderStatus?.includes(order?.status)) && (
+        {!order?.isLogistic && (!order?.order_group_id || !logisticOrderStatus?.includes(order?.status)) && (
           <OText size={13}>
             {`${order?.paymethod?.name} - ${order.delivery_type === 1
               ? t('DELIVERY', 'Delivery')

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

@@ -1,4 +1,4 @@
-import styled from 'styled-components/native';
+import styled, { css } from 'styled-components/native';
 
 export const OrderDetailsContainer = styled.ScrollView`
   flex: 1;
@@ -25,6 +25,15 @@ export const Logo = styled.View`
 
 export const OrderContent = styled.View`
   flex: 1;
+  ${(props : any) => props.isOrderGroup && css`
+    border-color: rgba(0, 0, 0, 0.2);
+    border-width: 1px;
+    padding: 10px;
+  `
+  }
+  ${(props : any) => props.lastOrder && css`
+    margin-bottom: 50px;
+  `}
 `;
 
 export const OrderHeader = styled.View`
@@ -45,7 +54,7 @@ export const OrderBusiness = styled.View`
 export const OrderCustomer = styled.View`
   border-bottom-width: 10px;
   border-bottom-color: ${(props: any) => props.theme.colors.inputChat};
-  padding-vertical: 20px;
+  padding-vertical: 10px;
 `;
 
 export const OrderProducts = styled(OrderCustomer)``;