ordering-ui-react-native 0.9.5 → 0.9.6

package/package.json

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

package/src/index.tsx

@@ -64,6 +64,7 @@ import { UserDetails } from './components/UserDetails';
 import { UserFormDetailsUI } from './components/UserFormDetails';
 import { UserProfileForm } from './components/UserProfileForm';
 import { VerifyPhone } from './components/VerifyPhone';
+import { HelpParams } from './types';
 import {
   OAlert,
   OBottomPopup,
@@ -181,4 +182,6 @@ export {
   useTheme,
   // hooks
   DeviceOrientationMethods,
+  //types
+  HelpParams,
 }

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

@@ -458,6 +458,7 @@ const ChatUI = (props: MessagesParams) => {
     messages?.messages.map((message: any) => {
       let newMessage;
       if (
+        parseInt(message.order_id) === order?.id &&
         message.type !== 0 &&
         (messagesToShow?.messages?.length ||
           message?.can_see?.includes('2') ||

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

@@ -33,6 +33,9 @@ export const DriverMap = (props: GoogleMapsParams) => {
     isBusinessMarker,
     isToFollow,
     handleViewActionOrder,
+    updateDriverPosition,
+    driverUpdateLocation,
+    setDriverUpdateLocation,
   } = props;
 
   const theme = useTheme();
@@ -73,7 +76,6 @@ export const DriverMap = (props: GoogleMapsParams) => {
     longitude: initialPosition.longitude,
   };
   const destination = { latitude: location.lat, longitude: location.lng };
-
   const { top } = useSafeAreaInsets();
 
   useEffect(() => {
@@ -189,6 +191,23 @@ export const DriverMap = (props: GoogleMapsParams) => {
   };
 
   useEffect(() => {
+    if (driverUpdateLocation.error) {
+      stopFollowUserLocation();
+      setAlertState({
+        open: true,
+        content: [
+          `${driverUpdateLocation.error[0] || driverUpdateLocation.error}. ${t(
+            'TRY_AGAIN',
+            'Try Again',
+          )}`,
+        ],
+      });
+    }
+  }, [driverUpdateLocation.error]);
+
+  useEffect(() => {
+    if (driverUpdateLocation.error) return;
+
     calculateDistance(
       { lat: userLocation.latitude, lng: userLocation.longitude },
       destination,
@@ -203,9 +222,19 @@ export const DriverMap = (props: GoogleMapsParams) => {
     mapRef.current?.animateCamera({
       center: { latitude, longitude },
     });
+
+    if (userLocation.latitude && userLocation.longitude)
+      updateDriverPosition({
+        location: { lat: userLocation.latitude, lng: userLocation.longitude },
+      });
   }, [userLocation]);
 
   const handleArrowBack: any = () => {
+    setDriverUpdateLocation({
+      ...driverUpdateLocation,
+      error: null,
+      newLocation: null,
+    });
     handleOpenMapView && handleOpenMapView();
   };
 
@@ -307,7 +336,7 @@ export const DriverMap = (props: GoogleMapsParams) => {
     },
     facOrderStatus: {
       flexDirection: 'row',
-      paddingTop: top + 5,
+      paddingTop: top + 13,
       borderBottomWidth: 11,
       borderBottomColor: theme.colors.inputChat,
     },
@@ -321,10 +350,6 @@ export const DriverMap = (props: GoogleMapsParams) => {
     },
   });
 
-  const handleChangeRegion = (coordinates: Region) => {
-    validateResult(coordinates);
-  };
-
   return (
     <>
       <View style={{ flex: 1 }}>

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

@@ -43,6 +43,7 @@ import { OrderDetailsParams } from '../../types';
 import { verifyDecimals } from '../../utils';
 import { USER_TYPE } from '../../config/constants';
 import CountryPicker from 'react-native-country-picker-modal';
+import { NotFoundSource } from '../NotFoundSource';
 
 export const OrderDetailsUI = (props: OrderDetailsParams) => {
   const {
@@ -71,7 +72,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     business: false,
     driver: false,
   });
-  const { order, businessData, loading } = props.order;
+  const { order, businessData, loading, error } = props.order;
   const { drivers, loadingDriver } = props.drivers;
   const itemsDrivers: any = [];
   const [actionOrder, setActionOrder] = useState('');
@@ -507,7 +508,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
 
   return (
     <>
-      {(!order || Object.keys(order).length === 0) && (
+      {(!order || Object.keys(order).length === 0) && !error && (
         <View
           style={{
             padding: 20,
@@ -527,8 +528,14 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
           ))}
         </View>
       )}
-
-      {order && Object.keys(order).length > 0 && (
+      {error?.length > 0 && (
+        <NotFoundSource
+          btnTitle={t('GO_TO_MY_ORDERS', 'Go to my orders')}
+          content={props.order.error[0]}
+          onClickButton={() => navigation.navigate('Orders')}
+        />
+      )}
+      {order && Object.keys(order).length > 0 && !error && (
         <>
           <Header>
             <OIconButton
@@ -978,7 +985,6 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
 export const OrderDetails = (props: OrderDetailsParams) => {
   const orderDetailsProps = {
     ...props,
-    driverAndBusinessId: true,
     UIComponent: OrderDetailsUI,
   };
   return <OrderDetailsController {...orderDetailsProps} />;

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

@@ -27,6 +27,7 @@ import { ProductItemAccordion } from '../ProductItemAccordion';
 import { USER_TYPE } from '../../config/constants';
 import { useTheme } from 'styled-components/native';
 import { verifyDecimals } from '../../utils';
+import { NotFoundSource } from '../NotFoundSource';
 
 //Styles
 import {
@@ -56,13 +57,16 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     askLocationPermission,
     driverLocation,
     actions,
+    updateDriverPosition,
+    driverUpdateLocation,
+    setDriverUpdateLocation,
     titleAccept,
     titleReject,
     appTitle,
   } = props;
 
   const [, { showToast }] = useToast();
-  const { order, loading } = props.order;
+  const { order, loading, error } = props.order;
   const theme = useTheme();
   const [, t] = useLanguage();
   const [{ parsePrice, parseNumber, parseDate }] = useUtils();
@@ -444,7 +448,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
 
   return (
     <>
-      {(!order || Object.keys(order).length === 0) && (
+      {(!order || Object.keys(order).length === 0) && !error && (
         <View
           style={{
             padding: 20,
@@ -464,7 +468,14 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
           ))}
         </View>
       )}
-      {order && Object.keys(order).length > 0 && (
+      {error?.length > 0 && (
+        <NotFoundSource
+          btnTitle={t('GO_TO_MY_ORDERS', 'Go to my orders')}
+          content={props.order.error[0]}
+          onClickButton={() => navigation.navigate('Orders')}
+        />
+      )}
+      {order && Object.keys(order).length > 0 && !error && (
         <>
           <Header>
             <OIconButton
@@ -760,6 +771,9 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                 orderStatus={getOrderStatus(order?.status)?.value || ''}
                 location={locationMarker}
                 readOnly
+                updateDriverPosition={updateDriverPosition}
+                driverUpdateLocation={driverUpdateLocation}
+                setDriverUpdateLocation={setDriverUpdateLocation}
                 handleViewActionOrder={handleViewActionOrder}
                 isBusinessMarker={isBusinessMarker}
                 isToFollow={isToFollow}
@@ -828,7 +842,6 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
 export const OrderDetailsDelivery = (props: OrderDetailsParams) => {
   const orderDetailsProps = {
     ...props,
-    driverAndBusinessId: true,
     UIComponent: OrderDetailsUI,
   };
   return <OrderDetailsConTableoller {...orderDetailsProps} />;

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

@@ -134,6 +134,9 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
   const scrollRefTab = useRef() as React.MutableRefObject<ScrollView>;
 
   const [ordersFilter, setOrdersFilter] = useState(tabs[0].tags);
+  const [ordersFiltered, setOrdersFiltered] = useState(
+    orders.filter((order: any) => ordersFilter.includes(order?.status)),
+  );
   const [tabsStatus, setTabStatus] = useState(tabs[0].tags);
   const [tagsStatus, setTagsStatus] = useState(tabs[0].tags);
   const [isLoadedOrders, setIsLoadedOrders] = useState<any>({
@@ -153,6 +156,14 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
     parseInt(parseFloat(String(Dimensions.get('window').width)).toFixed(0)),
   );
 
+  useEffect(() => {
+    setOrdersFiltered(
+      orders.filter((order: any) =>
+        rememberOrderStatus.includes(order?.status),
+      ),
+    );
+  }, [ordersFilter, orders, rememberOrderStatus]);
+
   const handleChangeTab = (tags: number[], tabTitle: string) => {
     if (!isLoadedOrders[tabTitle].isFetched) {
       loadOrders && loadOrders(true, tags);
@@ -373,6 +384,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 
       {!loading &&
         (!ordersFilter.length ||
+          ordersFiltered?.length < 1 ||
           orderList.error ||
           !orderList.orders.length ||
           !rememberOrderStatus.length) && (
@@ -392,7 +404,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
       <ScrollView showsVerticalScrollIndicator={false} style={{ flex: 1 }}>
         {!reload && !error && orders.length > 0 && (
           <PreviousOrders
-            orders={orders}
+            orders={ordersFiltered}
             onNavigationRedirect={onNavigationRedirect}
             getOrderStatus={getOrderStatus}
             tabsFilter={rememberOrderStatus}

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

@@ -7,7 +7,7 @@ import { Card, Logo, Information, MyOrderOptions } from './styles';
 import { PreviousOrdersParams } from '../../types';
 
 export const PreviousOrders = (props: any) => {
-  const { orders, onNavigationRedirect, getOrderStatus, tabsFilter } = props;
+  const { orders, onNavigationRedirect, getOrderStatus } = props;
   const [, t] = useLanguage();
   const [{ parseDate, optimizeImage }] = useUtils();
   const theme = useTheme();
@@ -76,63 +76,61 @@ export const PreviousOrders = (props: any) => {
           })
           ?.map((order: any) => (
             <React.Fragment key={order.id}>
-              {tabsFilter.includes(order.status) && (
-                <TouchableOpacity
-                  onPress={() => handlePressOrder(order)}
-                  style={styles.cardButton}
-                  activeOpacity={1}>
-                  <Card key={order.id}>
-                    {!!order.business?.logo && (
-                      <Logo style={styles.logo}>
-                        <OIcon
-                          url={optimizeImage(
-                            order.business?.logo,
-                            'h_300,c_limit',
-                          )}
-                          style={styles.icon}
-                        />
-                      </Logo>
-                    )}
+              <TouchableOpacity
+                onPress={() => handlePressOrder(order)}
+                style={styles.cardButton}
+                activeOpacity={1}>
+                <Card key={order.id}>
+                  {!!order.business?.logo && (
+                    <Logo style={styles.logo}>
+                      <OIcon
+                        url={optimizeImage(
+                          order.business?.logo,
+                          'h_300,c_limit',
+                        )}
+                        style={styles.icon}
+                      />
+                    </Logo>
+                  )}
 
-                    <Information>
-                      <OText numberOfLines={1} style={styles.title}>
-                        {order.business?.name}
-                      </OText>
+                  <Information>
+                    <OText numberOfLines={1} style={styles.title}>
+                      {order.business?.name}
+                    </OText>
+
+                    <OText
+                      style={styles.date}
+                      numberOfLines={1}
+                      adjustsFontSizeToFit
+                      size={20}>
+                      {t('INVOICE_ORDER_NO', 'Order No.') + order.id + ' · '}
+                      {order?.delivery_datetime_utc
+                        ? parseDate(order?.delivery_datetime_utc)
+                        : parseDate(order?.delivery_datetime, { utc: false })}
+                    </OText>
 
+                    <MyOrderOptions>
                       <OText
-                        style={styles.date}
+                        style={styles.orderType}
+                        mRight={5}
                         numberOfLines={1}
                         adjustsFontSizeToFit
-                        size={20}>
-                        {t('INVOICE_ORDER_NO', 'Order No.') + order.id + ' · '}
-                        {order?.delivery_datetime_utc
-                          ? parseDate(order?.delivery_datetime_utc)
-                          : parseDate(order?.delivery_datetime, { utc: false })}
+                        size={18}>
+                        {order.delivery_type === 1
+                          ? t('DELIVERY', 'Delivery')
+                          : order.delivery_type === 2
+                          ? t('PICKUP', 'Pickup')
+                          : order.delivery_type === 3
+                          ? t('EAT_IN', 'Eat in')
+                          : order.delivery_type === 4
+                          ? t('CURBSIDE', 'Curbside')
+                          : t('DRIVER_THRU', 'Driver thru')}
+                        {` · ${getOrderStatus(order.status)}`}
                       </OText>
-
-                      <MyOrderOptions>
-                        <OText
-                          style={styles.orderType}
-                          mRight={5}
-                          numberOfLines={1}
-                          adjustsFontSizeToFit
-                          size={18}>
-                          {order.delivery_type === 1
-                            ? t('DELIVERY', 'Delivery')
-                            : order.delivery_type === 2
-                            ? t('PICKUP', 'Pickup')
-                            : order.delivery_type === 3
-                            ? t('EAT_IN', 'Eat in')
-                            : order.delivery_type === 4
-                            ? t('CURBSIDE', 'Curbside')
-                            : t('DRIVER_THRU', 'Driver thru')}
-                          {` · ${getOrderStatus(order.status)}`}
-                        </OText>
-                      </MyOrderOptions>
-                    </Information>
-                  </Card>
-                </TouchableOpacity>
-              )}
+                    </MyOrderOptions>
+                  </Information>
+                </Card>
+              </TouchableOpacity>
             </React.Fragment>
           ))}
     </>

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

@@ -45,6 +45,7 @@ export const UserFormDetailsUI = (props: any) => {
 
   const [{ user }] = useSession();
   const [passwordSee, setPasswordSee] = useState(false);
+  const [confirmSee, setConfirmSee] = useState(false);
   const [userPhoneNumber, setUserPhoneNumber] = useState<any>(null);
   const [phoneInputData, setPhoneInputData] = useState({
     error: '',
@@ -388,7 +389,7 @@ export const UserFormDetailsUI = (props: any) => {
                 control={control}
                 render={({ onChange, value }: any) => (
                   <OInput
-                    isSecured={!passwordSee ? true : false}
+                    isSecured={!confirmSee ? true : false}
                     placeholder={t(
                       'MOBILE_CONFIRM_PASSWORD',
                       'Confirm Password',
@@ -396,19 +397,19 @@ export const UserFormDetailsUI = (props: any) => {
                     style={styles.inputStyle}
                     placeholderTextColor={theme.colors.arrowColor}
                     iconCustomRight={
-                      passwordSee ? (
+                      confirmSee ? (
                         <MaterialCommunityIcons
                           name="eye-outline"
                           color={theme.colors.arrowColor}
                           size={24}
-                          onPress={() => setPasswordSee(!passwordSee)}
+                          onPress={() => setConfirmSee(!confirmSee)}
                         />
                       ) : (
                         <MaterialCommunityIcons
                           name="eye-off-outline"
                           color={theme.colors.arrowColor}
                           size={24}
-                          onPress={() => setPasswordSee(!passwordSee)}
+                          onPress={() => setConfirmSee(!confirmSee)}
                         />
                       )
                     }

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

@@ -104,20 +104,21 @@ const ProfileUI = (props: ProfileParams) => {
   };
 
   useEffect(() => {
-    if (userState.result.result && !isAvailableLoading) {
+    const isLoadingDriver = userState?.loadingDriver ?? true;
+
+    if (userState?.result?.result && !isLoadingDriver) {
       if (userState?.result?.error) {
-        showToast(
-          ToastType.Error,
-          t(userState.result.error, userState.result.error),
-        );
+        const messageError =
+          userState.result.error || userState.result.error[0];
+        showToast(ToastType.Error, t(messageError, messageError));
       } else {
         showToast(
           ToastType.Success,
-          t('UPDATE_SUCCESSFULLY', 'Update successfully'),
+          t('AVAILABLE_STATE_IS_UPDATED', 'Available state is updated'),
         );
       }
     }
-  }, [isAvailableLoading]);
+  }, [userState?.loadingDriver]);
 
   useEffect(() => {
     if (formState.result.result && !formState.loading) {
@@ -301,7 +302,7 @@ const ProfileUI = (props: ProfileParams) => {
                 )}
               </OText>
 
-              {isAvailableLoading ? (
+              {userState.loadingDriver ? (
                 <ActivityIndicator size="small" color={theme.colors.primary} />
               ) : (
                 <ToggleSwitch

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

@@ -67,7 +67,7 @@ export const useLocation = () => {
         setRoutesLines(routes => [...routes, location]);
       },
       err => console.log(err),
-      { enableHighAccuracy: true, distanceFilter: 1 },
+      { enableHighAccuracy: true, distanceFilter: 3 },
     );
   };
 

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

@@ -349,6 +349,9 @@ export interface OrderDetailsParams {
   permissions?: any;
   askLocationPermission?: any;
   redirectToSettings?: any;
+  updateDriverPosition?: any;
+  driverUpdateLocation?: any;
+  setDriverUpdateLocation?: any;
 }
 export interface ProductItemAccordionParams {
   isCartPending?: boolean;
@@ -488,6 +491,9 @@ export interface GoogleMapsParams {
   setSaveLocation?: (val: boolean) => void;
   handleToggleMap?: () => void;
   navigation: any;
+  updateDriverPosition?: any;
+  driverUpdateLocation?: any;
+  setDriverUpdateLocation: any;
 }
 
 export interface TagsParams {

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

@@ -60,7 +60,20 @@ export const PreviousOrders = (props: PreviousOrdersParams) => {
 	}
 
 	const handleClickOrderReview = (order: any) => {
-		onNavigationRedirect && onNavigationRedirect('ReviewOrder', { order: { id: order?.id, business_id: order?.business_id, logo: order.business?.logo } })
+		onNavigationRedirect && onNavigationRedirect(
+			'ReviewOrder',
+			{
+			  order: {
+				id: order?.id,
+				business_id: order?.business_id,
+				logo: order.business?.logo,
+				driver: order?.driver,
+				products: order?.products,
+				review: order?.review,
+				user_review: order?.user_review
+			  }
+			}
+		  )
 	}
 
 	const handleReorderClick = (id: number) => {

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

@@ -56,7 +56,20 @@ export const PreviousOrders = (props: PreviousOrdersParams) => {
   }
 
   const handleClickOrderReview = (order: any) => {
-    onNavigationRedirect && onNavigationRedirect('ReviewOrder', { order: { id: order?.id, business_id: order?.business_id, logo: order.business?.logo } })
+    onNavigationRedirect && onNavigationRedirect(
+      'ReviewOrder',
+      {
+        order: {
+          id: order?.id,
+          business_id: order?.business_id,
+          logo: order.business?.logo,
+          driver: order?.driver,
+          products: order?.products,
+          review: order?.review,
+          user_review: order?.user_review
+        }
+      }
+    )
   }
 
   const handleReorderClick = (id: number) => {

package/themes/original/src/components/PreviousOrders/index.tsx

@@ -86,6 +86,10 @@ export const PreviousOrders = (props: PreviousOrdersParams) => {
 					id: order?.id,
 					business_id: order?.business_id,
 					logo: order.business?.logo,
+					driver: order?.driver,
+					products: order?.products,
+					review: order?.review,
+					user_review: order?.user_review
 				},
 			});
 	};

package/themes/uber-eats/src/components/PreviousOrders/index.tsx

@@ -56,7 +56,20 @@ export const PreviousOrders = (props: PreviousOrdersParams) => {
   }
 
   const handleClickOrderReview = (order: any) => {
-    onNavigationRedirect && onNavigationRedirect('ReviewOrder', { order: { id: order?.id, business_id: order?.business_id, logo: order.business?.logo } })
+    onNavigationRedirect && onNavigationRedirect(
+      'ReviewOrder',
+      {
+        order: {
+          id: order?.id,
+          business_id: order?.business_id,
+          logo: order.business?.logo,
+          driver: order?.driver,
+          products: order?.products,
+          review: order?.review,
+          user_review: order?.user_review
+        }
+      }
+    )
   }
 
   const handleReorderClick = (id : number) => {