ordering-ui-react-native 0.22.75 → 0.22.76-release

package/themes/business/src/hooks/useLocation.tsx

@@ -1,24 +1,26 @@
 import { useEffect, useState, useRef } from 'react';
 import GeoLocation from 'react-native-geolocation-service';
 import { Location } from '../types';
-import {useApi, useSession, useLanguage} from 'ordering-components/native'
+import { useApi, useSession, useLanguage } from 'ordering-components/native'
 
 export const useLocation = () => {
-  const [,t] = useLanguage()
+  const [, t] = useLanguage()
   const [ordering] = useApi()
-  const [{token, user}] = useSession()
+  const [{ token, user }] = useSession()
   const [hasLocation, setHasLocation] = useState(false);
   const [initialPosition, setInitialPosition] = useState<Location>({
     longitude: 0,
     latitude: 0,
     speed: 0,
+    mocked: false
   });
   const [userLocation, setUserLocation] = useState<Location>({
     longitude: 0,
     latitude: 0,
     speed: 0,
+    mocked: false
   });
-  const [newLocation,setNewLocation] = useState<any>({ loading: false, error: null, newLocation: null })
+  const [newLocation, setNewLocation] = useState<any>({ loading: false, error: null, newLocation: null })
   const [routeLines, setRoutesLines] = useState<Location[]>([]);
   const isMounted = useRef(true);
 
@@ -37,7 +39,7 @@ export const useLocation = () => {
         if (!isMounted.current) return;
         setInitialPosition(location);
         setUserLocation(location);
-        setRoutesLines(routes => [...routes, location]);
+        setRoutesLines((routes: any) => [...routes, location]);
         setHasLocation(true);
       })
       .catch(err => console.log(err));
@@ -46,14 +48,15 @@ export const useLocation = () => {
   const getCurrentLocation = (): Promise<Location> => {
     return new Promise((resolve, reject) => {
       GeoLocation.getCurrentPosition(
-        ({ coords }) => {
+        ({ coords, mocked }: any) => {
           resolve({
             latitude: typeof coords.latitude === 'number' && !Number.isNaN(coords.latitude) ? coords.latitude : 0,
             longitude: typeof coords.longitude === 'number' && !Number.isNaN(coords.longitude) ? coords.longitude : 0,
             speed: coords.speed,
+            mocked
           });
         },
-        err => reject({ err }),
+        (err: any) => reject({ err }),
         { enableHighAccuracy: true, timeout: 15000, maximumAge: 10000 },
       );
     });
@@ -61,18 +64,19 @@ export const useLocation = () => {
 
   const followUserLocation = () => {
     watchId.current = GeoLocation.watchPosition(
-      ({ coords }) => {
+      ({ coords, mocked }: any) => {
         if (!isMounted.current) return;
         if (typeof coords.latitude !== 'number' || typeof coords.longitude !== 'number') return
         const location: Location = {
           latitude: coords.latitude || 0,
           longitude: coords.longitude || 0,
           speed: coords.speed,
+          mocked
         };
         setUserLocation(location);
-        setRoutesLines(routes => [...routes, location]);
+        setRoutesLines((routes: any) => [...routes, location]);
       },
-      err => console.log(err),
+      (err: any) => console.log(err),
       { enableHighAccuracy: true, distanceFilter: 3 },
     );
   };
@@ -83,14 +87,14 @@ export const useLocation = () => {
 
   const updateDriverPosition = async (newLocation = {}) => {
     try {
-      setNewLocation({...newLocation, loading: true})
+      setNewLocation({ ...newLocation, loading: true })
       const { content: { error, result } } = await ordering.setAccessToken(token).users(user?.id).driverLocations().save(newLocation)
       if (error) {
         setNewLocation({ ...newLocation, loading: false, error: [result[0] || result || t('ERROR_UPDATING_POSITION', 'Error updating position')] })
       } else {
         setNewLocation({ ...newLocation, loading: false, newLocation: { ...newLocation, ...result } })
       }
-    } catch (error : any) {
+    } catch (error: any) {
       setNewLocation({ ...newLocation, loading: false, error: [error?.message || t('NETWORK_ERROR', 'Network Error')] })
     }
   }

package/themes/business/src/layouts/SafeAreaContainer.tsx

@@ -1,12 +1,12 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import {
   Dimensions,
   Platform,
   StatusBar,
-  StyleSheet,
   View,
 } from 'react-native';
-import styled from 'styled-components/native';
+import styled, { useTheme } from 'styled-components/native';
+import { useNetInfo } from '@react-native-community/netinfo';
 
 export const SafeAreaContainer = styled.SafeAreaView`
   flex: 1;
@@ -14,6 +14,10 @@ export const SafeAreaContainer = styled.SafeAreaView`
 `;
 
 export const SafeAreaContainerLayout = (props: any) => {
+  const theme = useTheme();
+  const netInfo = useNetInfo()
+
+  const [statusColor, setStatusColor] = useState<string | null>(null)
   const [orientation, setOrientation] = useState(
     Dimensions.get('window').width < Dimensions.get('window').height
       ? 'Portrait'
@@ -28,22 +32,34 @@ export const SafeAreaContainerLayout = (props: any) => {
     }
   });
 
+  useEffect(() => {
+    if (netInfo.isConnected === false) {
+      setStatusColor(theme.colors.danger500)
+    }
+
+    if (netInfo.isConnected && statusColor) {
+      setStatusColor(theme.colors.success500)
+      setTimeout(() => {
+        setStatusColor(null)
+      }, 2000);
+    }
+  }, [netInfo.isConnected])
+
   return (
-    <>
-      <SafeAreaContainer>
-        <View
-          style={{
-            paddingHorizontal: 30,
-            paddingTop: 30,
-            paddingBottom: 0,
-            flex: 1,
-          }}>
-          <StatusBar
-            barStyle={Platform.OS === 'ios' ? 'dark-content' : 'default'}
-          />
-          {props.children}
-        </View>
-      </SafeAreaContainer>
-    </>
+    <SafeAreaContainer>
+      <View
+        style={{
+          paddingHorizontal: 30,
+          paddingTop: 0,
+          paddingBottom: 0,
+          flex: 1,
+        }}>
+        <StatusBar
+          barStyle={Platform.OS === 'ios' ? 'dark-content' : 'default'}
+          {...statusColor && ({ backgroundColor: statusColor })}
+        />
+        {props.children}
+      </View>
+    </SafeAreaContainer>
   );
 };

package/themes/business/src/types/index.tsx

@@ -1,4 +1,5 @@
 import { TextInputProps, ViewStyle } from 'react-native';
+import { LatLng } from 'react-native-maps';
 export interface LoginParams {
   navigation?: any;
   formState?: any;
@@ -29,7 +30,8 @@ export interface LoginParams {
   generateOtpCode: (values?: any) => void,
   useLoginOtpEmail?: boolean,
   useLoginOtpCellphone?: boolean,
-  useLoginOtp?: boolean
+  useLoginOtp?: boolean,
+  validateDeveloperMode: boolean
 }
 export interface otpParams {
   willVerifyOtpState: boolean,
@@ -43,6 +45,7 @@ export interface ProfileParams {
   navigation?: any;
   isEdit?: boolean;
   formState?: any;
+  setRootState?: any;
   userState?: any;
   toggleIsEdit?: any;
   cleanFormState?: any;
@@ -51,6 +54,7 @@ export interface ProfileParams {
   handleChangeInput?: any;
   handleButtonUpdateClick?: any;
   handleToggleAvalaibleStatusDriver?: any;
+  handleRemoveAccount?: any;
   onNavigationRedirect?: any;
   handlechangeImage?: any;
   validationFields?: any;
@@ -285,8 +289,8 @@ export interface OrdersOptionParams {
   rememberOrderStatus?: any;
   titleContent?: string;
   customArray?: Array<any>;
-  loadMoreOrders?: () => {};
-  loadOrders?: ({ }: any) => {};
+  loadMoreOrders?: (options?: any) => {};
+  loadOrders?: ({ }: any, options?: any) => {};
   messages?: any;
   setMessages?: () => {};
   loadMessages?: () => {};
@@ -325,6 +329,7 @@ export interface OrdersOptionParams {
   isDriverApp?: boolean;
   combineTabs?: boolean;
   setCombineTabsState?: any;
+  ordersFiltered?: any
 }
 export interface ActiveOrdersParams {
   orders?: any;
@@ -415,6 +420,8 @@ export interface OrderDetailsParams {
   orderTitle?: any;
   forceUpdate?: number;
   getPermissions?: any
+  loadMessages?: any;
+  notificationApp?: string
 }
 export interface ProductItemAccordionParams {
   isCartPending?: boolean;
@@ -450,6 +457,7 @@ export interface MessagesParams {
   sendMessage?: any;
   canRead?: any;
   setCanRead?: any;
+  notificationApp?: string
   handleSend?: () => {};
   setImage?: (image: string | null) => {};
   setMessage?: (comment: string) => {};
@@ -500,7 +508,8 @@ export interface FloatingButtonParams {
   firstColorCustom?: string;
   secondColorCustom?: string;
   paddingBottomIos?: any;
-  isHideRejectButtons?: boolean
+  isHideRejectButtons?: boolean;
+  principalButtonColor?: string;
 }
 export interface MomentOptionParams {
   navigation: any;
@@ -537,6 +546,7 @@ export interface Location {
   latitude: number;
   longitude: number;
   speed: number;
+  mocked?: boolean;
 }
 
 export interface GoogleMapsParams {
@@ -609,6 +619,7 @@ export interface MapViewParams {
   getBusinessLocations: () => void,
   setDriverLocation: (location: any) => void,
   isLoadingBusinessMarkers?: boolean,
+  isDeliveryApp: boolean,
   markerGroups: Array<any>,
   customerMarkerGroups: Array<any>,
   alertState: { open: boolean, content: Array<string>, key?: string | null },
@@ -644,3 +655,14 @@ export interface SessionsParams {
   handleDeleteSession: any,
   handleDeleteAllSessions: any
 }
+
+export interface RenderMarkerParams {
+  key?: number,
+  marker: any,
+  customer?: boolean,
+  orderIds?: Array<number>
+  onNavigationRedirect?: any,
+  initialPosition?: LatLng,
+  locationSelected?: LatLng,
+  setLocationSelected ?: any
+}

package/themes/business/src/utils/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import FontAwesome from 'react-native-vector-icons/FontAwesome';
 import { CODES } from 'ordering-components/native';
+import { CURRENCY } from '../config/currency'
 
 export const flatArray = (arr: any) => [].concat(...arr);
 
@@ -158,11 +159,11 @@ export const findExitingCode = (countryCode: string) => {
  * @param {*} parser function fallback when is decimal
  * @returns string
  */
-export const verifyDecimals = (value: number, parser: any) => {
+export const verifyDecimals = (value: number, parser: any, options?: any) => {
   if (value % 1 === 0) {
     return value;
   } else {
-    return parser(value);
+    return options ? parser(value, options) : parser(value);
   }
 };
 
@@ -344,6 +345,24 @@ export const getOrderStatus = (s: string, t: any) => {
       value: t('ORDER_DRIVER_ON_WAY', 'Driver on way'),
       slug: 'ORDER_DRIVER_ON_WAY',
       percentage: 45
+    },
+    {
+      key: 24,
+      value: t('ORDER_DRIVER_WAITING_FOR_ORDER', 'Driver waiting for order'),
+      slug: 'ORDER_DRIVER_WAITING_FOR_ORDER',
+      percentage: 25
+    },
+    {
+      key: 25,
+      value: t('ORDER_ACCEPTED_BY_DRIVER_COMPANY', 'Accepted by driver company'),
+      slug: 'ORDER_ACCEPTED_BY_DRIVER_COMPANY',
+      percentage: 25
+    },
+    {
+      key: 26,
+      value: t('ORDER_DRIVER_ARRIVED_CUSTOMER', 'Driver arrived to customer'),
+      slug: 'ORDER_DRIVER_ARRIVED_CUSTOMER',
+      percentage: 80
     }
   ];
 
@@ -402,3 +421,8 @@ export const calculateDistance = (
   const distanceInKm = distance / 1000;
   return distanceInKm;
 };
+
+export const getCurrenySymbol = (code : string) => {
+  return CURRENCY?.[code]?.symbol ?? code
+}
+

package/themes/doordash/src/components/BusinessesListing/index.tsx

@@ -197,7 +197,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 			{isFarAway && (
 				<FarAwayMessage style={styles.farAwayMsg}>
 					<Ionicons name='md-warning-outline' style={styles.iconStyle} />
-					<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textNormal}>{t('YOU_ARE_FAR_FROM_ADDRESS', 'You are far from this address')}</OText>
+					<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textNormal}>{t('YOU_ARE_FAR_FROM_ADDRESS', 'Your are far from this address')}</OText>
 				</FarAwayMessage>
 			)}
 			{!auth && (

package/themes/doordash/src/components/LoginForm/index.tsx

@@ -410,8 +410,7 @@ const LoginFormUI = (props: LoginParams) => {
                     textInputProps={{
                       returnKeyType: 'next',
                       onSubmitEditing: () => inputRef?.current?.focus?.(),
-                      style: { borderWidth: 0, fontSize: 12 },
-					  maxLength: 10
+                      style: { borderWidth: 0, fontSize: 12 }
                     }}
                     textWrapStyle={{ borderColor: theme.colors.clear, borderWidth: 0, height: 40, paddingStart: 0 }}
                   />

package/themes/instacart/src/components/BusinessesListing/index.tsx

@@ -155,7 +155,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 				{isFarAway && (
 					<FarAwayMessage style={styles.farAwayMsg}>
 						<Ionicons name='md-warning-outline' style={styles.iconStyle} />
-						<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textNormal}>{t('YOU_ARE_FAR_FROM_ADDRESS', 'You are far from this address')}</OText>
+						<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textNormal}>{t('YOU_ARE_FAR_FROM_ADDRESS', 'Your are far from this address')}</OText>
 					</FarAwayMessage>
 				)}
 				<View style={styles.wrapperOrderOptions}>

package/themes/kiosk/src/components/Checkout/index.tsx

@@ -31,8 +31,7 @@ const CheckoutUI = (props: any) => {
     paymethodSelected,
     handlePaymethodChange,
     handlerClickPlaceOrder,
-    onNavigationRedirect,
-    isKiosk
+    onNavigationRedirect
   } = props
 
   const [errorCash, setErrorCash] = useState(false);
@@ -51,6 +50,12 @@ const CheckoutUI = (props: any) => {
     }
   }, [cart])
 
+  useEffect(() => {
+    if (!cartState.loading && cart && !cart?.valid && cart?.status === 2) {
+      navigation?.canGoBack() && navigation.goBack()
+    }
+  }, [cart])
+
   return (
     <>
       <PaymentOptions
@@ -69,7 +74,6 @@ const CheckoutUI = (props: any) => {
         isLoading={cartState.loading || businessDetails.loading}
         paymethods={businessDetails?.business?.paymethods}
         setErrorCash={setErrorCash}
-        isKiosk={isKiosk}
       />
     </>
   )
@@ -86,7 +90,7 @@ export const Checkout = (props: any) => {
   const [, { showToast }] = useToast();
   const [{ token }] = useSession();
   const [ordering] = useApi();
-  const [, { confirmCart }] = useOrder();
+  const [,{ confirmCart }] = useOrder();
 
   const [cartState, setCartState] = useState<any>({ loading: true, error: [], cart: null });
 
@@ -111,7 +115,7 @@ export const Checkout = (props: any) => {
           const confirmCartRes = await confirmCart(cartUuid)
           if (confirmCartRes.error) {
             showToast(ToastType.Error, confirmCartRes.error.message)
-          } getOrder
+          }getOrder
           getOrder
           if (confirmCartRes.result.order?.uuid) {
             onNavigationRedirect('OrderDetails', { orderId: confirmCartRes.result.order.uuid, isFromCheckout: true })

package/themes/kiosk/src/components/CustomerName/index.tsx

@@ -81,7 +81,7 @@ const CustomerName = (props: Props): React.ReactElement => {
       <OButton
         text={t('SKIP', 'Skip')}
         onClick={onSkip}
-        textStyle={{ color: theme.colors.primary, fontSize: 18 }}
+        textStyle={{ color: theme.colors.primary, fontSize: 20 }}
         parentStyle={{
           height: orientationState?.orientation === PORTRAIT
             ? 50 : 100

package/themes/kiosk/src/components/NavBar/index.tsx

@@ -4,6 +4,7 @@ import { OIcon, OButton, OText } from '../shared'
 import { ImageStyle, TextStyle, View, Platform, TouchableOpacity } from 'react-native'
 import { useConfig, useLanguage, useOrder } from 'ordering-components/native'
 import { useTheme } from 'styled-components/native'
+
 const Wrapper = styled.View`
   background-color: ${(props: any) => props.theme.colors.white};
   padding: 10px 0px 20px 0px;
@@ -65,28 +66,27 @@ const NavBar = (props: Props) => {
 
   return (
     <Wrapper style={{ paddingTop: props.paddingTop, ...props.style }}>
-      {(props?.onActionLeft) && (
+      {(props?.onActionLeft || props?.leftImg) && (
         <OButton
-          imgLeftSrc={props.leftImg}
+          imgLeftSrc={props.leftImg || theme.images.general.arrow_left}
           imgRightSrc={null}
           style={{ ...btnBackArrow, ...props.btnStyle }}
           onClick={props.onActionLeft}
-          imgLeftStyle={props.imgLeftStyle}
-          {...(!props.leftImg && { iconProps: { name: 'arrowleft', size: 28, color: props.btnStyle?.color } })}
+          imgLeftStyle= {props.imgLeftStyle}
         />)
       }
       <TitleTopWrapper>
         {props.withIcon
           ? (
-            <OIcon
-              url={props.icon}
-              style={{
-                borderColor: theme.colors.lightGray,
-                borderRadius: 20,
-              }}
-              width={60}
-              height={60}
-            />
+              <OIcon
+                url={props.icon}
+                style={{
+                  borderColor: theme.colors.lightGray,
+                  borderRadius: 20,
+                }}
+                width={60}
+                height={60}
+              />
           )
           : null
         }
@@ -134,7 +134,7 @@ const NavBar = (props: Props) => {
         </View>
       )}
 
-      {props.rightComponent}
+      { props.rightComponent }
     </Wrapper>
   )
 }

package/themes/kiosk/src/components/OptionCard/index.tsx

@@ -95,7 +95,7 @@ interface Props {
   style?: ViewStyle;
   bgImage: ImageSourcePropType;
   innerStyle?: ViewStyle;
-  icon?: ImageSourcePropType;
+  icon: ImageSourcePropType;
   iconStyle?: ImageStyle;
   callToActionText: string;
   callToActionTextStyle?: TextStyle;

package/themes/kiosk/src/components/OrderTypeCardSelector/index.tsx

@@ -15,8 +15,6 @@ import { Container } from '../../layouts/Container'
 import NavBar from '../NavBar'
 import { LANDSCAPE, PORTRAIT, useDeviceOrientation } from '../../../../../src/hooks/DeviceOrientation'
 import GridContainer from '../../layouts/GridContainer'
-import AntDesignIcon from 'react-native-vector-icons/AntDesign'
-import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons'
 
 const OrderTypeSelectorCardUI = (props: OrderTypeSelectParams) => {
   const {
@@ -29,7 +27,7 @@ const OrderTypeSelectorCardUI = (props: OrderTypeSelectParams) => {
     callback
   } = props
 
-  const theme = useTheme();
+	const theme = useTheme();
   const [, t] = useLanguage();
   const [orientationState] = useDeviceOrientation();
   const [orderState] = useOrder()
@@ -47,7 +45,7 @@ const OrderTypeSelectorCardUI = (props: OrderTypeSelectParams) => {
   }
 
   useEffect(() => {
-    if (isCardCliked) {
+    if(isCardCliked){
       callback?.()
       setIsCardClicked(false)
       setIsLoadingCard(null)
@@ -85,13 +83,13 @@ const OrderTypeSelectorCardUI = (props: OrderTypeSelectParams) => {
             style={cardStyle}
             isDisabled={isCardCliked}
             isLoading={isLoadingCard === 'Eat In'}
-            title={t('EAT_IN', 'Eat In')}
+            title={t('EAT_IN','Eat In')}
             description={t('EAT_IN_DESCRIPTION', 'We are very glad to have you here. Bon appetit!')}
             bgImage={theme.images.general.eatIn}
-            VectorIcon={() => <MaterialIcon name='pin-outline' size={28} color='white' style={{ marginBottom: 10 }} />}
+            icon={theme.images.general.pushPin}
             callToActionText={t('START_MY_ORDER', 'Start my order')}
             onClick={() => {
-              if (_eatIn?.value !== orderState?.options?.type) {
+              if(_eatIn?.value !== orderState?.options?.type){
                 handleChangeOrderType(_eatIn?.value);
                 setIsCardClicked(true)
                 setIsLoadingCard('Eat In')
@@ -108,15 +106,15 @@ const OrderTypeSelectorCardUI = (props: OrderTypeSelectParams) => {
 
           <OptionCard
             style={cardStyle}
-            title={t('TAKE_OUT', 'Take out')}
+            title={t('TAKE_OUT','Take out')}
             isDisabled={isCardCliked}
             isLoading={isLoadingCard === 'Take out'}
             description={t('TAKE_OUT_DESCRIPTION', 'You are very welcome anytime you visit us!')}
             bgImage={theme.images.general.takeOut}
-            VectorIcon={() => <AntDesignIcon name='shoppingcart' size={28} color='white' style={{ marginBottom: 10 }} />}
+            icon={theme.images.general.shoppingCart}
             callToActionText={t('START_MY_ORDER', 'Start my order')}
             onClick={() => {
-              if (_takeOut?.value !== orderState?.options?.type) {
+              if(_takeOut?.value !== orderState?.options?.type){
                 handleChangeOrderType(_takeOut?.value);
                 setIsCardClicked(true)
                 setIsLoadingCard('Take out')