ordering-ui-react-native 0.11.60 → 0.12.2

package/package.json

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

package/src/components/BusinessBasicInformation/index.tsx

@@ -21,6 +21,7 @@ import {
   WrapBusinessInfo
 } from './styles'
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
+import { ScrollView } from 'react-native-gesture-handler';
 const types = ['food', 'laundry', 'alcohol', 'groceries']
 
 export const BusinessBasicInformation = (props: BusinessBasicInformationParams) => {
@@ -83,7 +84,10 @@ export const BusinessBasicInformation = (props: BusinessBasicInformationParams)
                 <PlaceholderLine height={30} width={20} />
               </Placeholder>
             ) : (
-              <View style={{ maxWidth: '75%', justifyContent: 'flex-start' }}>
+              <ScrollView
+                horizontal
+                style={{ maxWidth: isBusinessInfoShow ? '85%' : '75%' }}
+              >
                 <OText
                   size={20}
                   weight='bold'
@@ -92,7 +96,7 @@ export const BusinessBasicInformation = (props: BusinessBasicInformationParams)
                 >
                   {business?.name}
                 </OText>
-              </View>
+              </ScrollView>
             )}
             {!isBusinessInfoShow && (
               <WrapBusinessInfo

package/src/components/SingleProductCard/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useRef } from 'react'
 import { useLanguage, useConfig, useOrder, useUtils } from 'ordering-components/native'
 import { SingleProductCardParams } from '../../types'
 import {
@@ -9,6 +9,7 @@ import {
 import { StyleSheet } from 'react-native'
 import { OText, OIcon } from '../shared'
 import { useTheme } from 'styled-components/native'
+import { ScrollView } from 'react-native-gesture-handler'
 
 export const SingleProductCard = (props: SingleProductCardParams) => {
   const {
@@ -33,7 +34,7 @@ export const SingleProductCard = (props: SingleProductCardParams) => {
     soldOutBackgroundStyle: {
       backgroundColor: '#B8B8B8',
     },
-    soldOutTextStyle : {
+    soldOutTextStyle: {
       textTransform: 'uppercase'
     },
     productStyle: {
@@ -62,12 +63,19 @@ export const SingleProductCard = (props: SingleProductCardParams) => {
   maxCartProductInventory = !isNaN(maxCartProductInventory) ? maxCartProductInventory : maxCartProductConfig
 
   const maxProductQuantity = Math.min(maxCartProductConfig, maxCartProductInventory)
+  const descriptionRef = useRef()
 
+  const handleClickProduct = (e, product) => {
+    console.log(descriptionRef?.current?.tar)
+    // if (descriptionRef?.current?.contains(e?.target)) {
+    //   console.log(":)")
+    // }
+  }
   return (
     <CardContainer
       style={[styles.container, (isSoldOut || maxProductQuantity <= 0) && styles.soldOutBackgroundStyle]}
       activeOpacity={1}
-      onPress={() => onProductClick(product)}
+      onPress={(e) => handleClickProduct(e, product)}
     >
       <OIcon
         url={optimizeImage(product?.images, 'h_200,c_limit')}
@@ -75,7 +83,9 @@ export const SingleProductCard = (props: SingleProductCardParams) => {
       />
       <CardInfo>
         <OText numberOfLines={1} ellipsizeMode='tail' style={styles.textStyle}>{product?.name}</OText>
-        <OText size={12} numberOfLines={2} ellipsizeMode='tail' style={styles.textStyle}>{product?.description}</OText>
+        <ScrollView horizontal ref={(ref : any) => descriptionRef.current = ref}>
+          <OText size={12} numberOfLines={2} ellipsizeMode='tail' style={styles.textStyle}>{product?.description}</OText>
+        </ScrollView>
         <OText color={theme.colors.primary}>{parsePrice(product?.price)}</OText>
       </CardInfo>
 

package/src/config.json

@@ -2,7 +2,7 @@
   "app_id": "react-native-app",
   "notification_app": "orderingapp",
   "app_name": "Ordering",
-  "project": "reactdemo",
+  "project": "luisv4",
   "api": {
     "url": "https://apiv4.ordering.co",
     "language": "en",

package/themes/business/index.tsx

@@ -34,7 +34,7 @@ import { UserFormDetailsUI } from './src/components/UserFormDetails';
 import { UserProfileForm } from './src/components/UserProfileForm';
 import { VerifyPhone } from './src/components/VerifyPhone';
 import { DriverMap } from './src/components/DriverMap';
-
+import { MapViewUI as MapView } from './src/components/MapView'
 //OComponents
 import {
   OText,
@@ -74,6 +74,7 @@ export {
   LogoutButton,
   MessagesOption,
   NotFoundSource,
+  MapView,
   OrderDetailsBusiness,
   OrderDetailsDelivery,
   OrderMessage,

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

@@ -12,16 +12,17 @@ import Alert from '../../providers/AlertProvider';
 import { useTheme } from 'styled-components/native';
 import { useLocation } from '../../hooks/useLocation';
 import Icon from 'react-native-vector-icons/FontAwesome5';
-import { OIcon, OText } from '../shared'
-
+import { OIcon, OText, OFab } from '../shared'
 const MapViewComponent = (props: MapViewParams) => {
 
   const {
-    onNavigationRedirect,
     isLoadingBusinessMarkers,
-    getBusinessLocations,
     markerGroups,
-    customerMarkerGroups
+    customerMarkerGroups,
+    alertState,
+    setAlertState,
+    onNavigationRedirect,
+    getBusinessLocations,
   } = props;
 
   const theme = useTheme();
@@ -29,16 +30,10 @@ const MapViewComponent = (props: MapViewParams) => {
   const [{ user }] = useSession()
   const { width, height } = Dimensions.get('window');
   const ASPECT_RATIO = width / height;
-  const mapRef = useRef<MapView>(null);
+  const mapRef = useRef<MapView | any>(null);
   const following = useRef<boolean>(true);
   const [isFocused, setIsFocused] = useState(false)
   const [locationSelected, setLocationSelected] = useState<any>(null)
-  const [alertState, setAlertState] = useState<{
-    open: boolean;
-    content: Array<string>;
-    key?: string | null;
-  }>({ open: false, content: [], key: null });
-
   const {
     initialPosition,
     userLocation,
@@ -72,6 +67,24 @@ const MapViewComponent = (props: MapViewParams) => {
     }
   };
 
+  const onPressZoomIn = () => {
+    const lastRegion = mapRef?.current?.__lastRegion
+    mapRef?.current && mapRef.current.animateToRegion({
+      ...mapRef?.current?.__lastRegion,
+      longitudeDelta: lastRegion.longitudeDelta / 8,
+      latitudeDelta: lastRegion.longitudeDelta / 8
+    })
+  }
+
+  const onPressZoomOut = () => {
+    const lastRegion = mapRef?.current?.__lastRegion
+    mapRef?.current && mapRef.current.animateToRegion({
+      ...lastRegion,
+      longitudeDelta: lastRegion.longitudeDelta * 8,
+      latitudeDelta: lastRegion.longitudeDelta * 8
+    })
+  }
+
   useEffect(() => {
     fitCoordinates(locationSelected || userLocation);
   }, [userLocation, locationSelected]);
@@ -91,7 +104,6 @@ const MapViewComponent = (props: MapViewParams) => {
     };
   }, []);
 
-
   useFocusEffect(
     useCallback(() => {
       setIsFocused(true)
@@ -125,8 +137,6 @@ const MapViewComponent = (props: MapViewParams) => {
         markerRef?.current?.props?.coordinate?.longitude === locationSelected?.longitude
       ) {
         markerRef?.current?.showCallout()
-      } else {
-        markerRef?.current?.hideCallout()
       }
     }, [locationSelected])
 
@@ -200,19 +210,20 @@ const MapViewComponent = (props: MapViewParams) => {
       </Marker>
     )
   }
+
   return (
     <SafeAreaView style={{ flex: 1 }}>
       <View style={{ flex: 1 }}>
-        <View style={{ flex: 1 }}>
-          {typeof initialPosition?.latitude === 'number' && !isLoadingBusinessMarkers && isFocused && (
+        {!isLoadingBusinessMarkers && isFocused && (
+          <View style={{ flex: 1 }}>
             <MapView
               ref={mapRef}
               provider={PROVIDER_GOOGLE}
               initialRegion={{
                 latitude: initialPosition.latitude,
                 longitude: initialPosition.longitude,
-                latitudeDelta: 0.01,
-                longitudeDelta: 0.01 * ASPECT_RATIO,
+                latitudeDelta: 0.001,
+                longitudeDelta: 0.001 * ASPECT_RATIO,
               }}
               style={{ flex: 1 }}
               zoomTapEnabled
@@ -261,8 +272,28 @@ const MapViewComponent = (props: MapViewParams) => {
                 </Marker>
               </>
             </MapView>
-          )}
-        </View>
+            <OFab
+              materialIcon
+              iconName="plus"
+              onPress={() => onPressZoomIn()}
+              style={{
+                position: 'absolute',
+                bottom: 75,
+                right: 20,
+              }}
+            />
+            <OFab
+              materialIcon
+              iconName="minus"
+              onPress={() => onPressZoomOut()}
+              style={{
+                position: 'absolute',
+                bottom: 35,
+                right: 20,
+              }}
+            />
+          </View>
+        )}
       </View>
       <View>
         <Alert

package/themes/business/src/components/shared/OFab.tsx

@@ -7,20 +7,25 @@ import {
   TouchableOpacity,
 } from 'react-native';
 import Icon from 'react-native-vector-icons/Ionicons';
-
+import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons'
 interface Props {
   iconName: string;
   onPress: () => void;
   style?: StyleProp<ViewStyle>;
+  materialIcon?: boolean
 }
-const OFab = ({ iconName, onPress, style = {} }: Props) => {
+const OFab = ({ iconName, materialIcon, onPress, style = {} }: Props) => {
   return (
     <View style={{ ...(style as any) }}>
       <TouchableOpacity
         activeOpacity={0.8}
         onPress={onPress}
         style={styles.blackButton}>
-        <Icon name={iconName} color="white" size={20} />
+        {materialIcon ? (
+          <MaterialIcon name={iconName} color="white" size={20} />
+        ) : (
+          <Icon name={iconName} color="white" size={20} />
+        )}
       </TouchableOpacity>
     </View>
   );

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

@@ -545,5 +545,7 @@ export interface MapViewParams {
   getBusinessLocations: () => void,
   isLoadingBusinessMarkers?: boolean,
   markerGroups: Array<any>,
-  customerMarkerGroups: Array<any>
+  customerMarkerGroups: Array<any>,
+  alertState: { open: boolean, content: Array<string>, key?: string | null },
+  setAlertState: ({open, content, key} : { open: boolean, content: Array<string>, key?: string | null }) => void
 }

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

@@ -1,5 +1,5 @@
-import React from 'react';
-import { TouchableOpacity, View } from 'react-native';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { PanResponder, TouchableOpacity, View } from 'react-native';
 import {
   useLanguage,
   useOrder,
@@ -27,7 +27,8 @@ const BusinessMenu = (props:any): React.ReactElement => {
 
   const { navigation, businessProductsListingProps } = props;
 
-  const [{ carts }] = useOrder();
+  const [{ carts }, {clearCart} ] = useOrder();
+  const [isClearCart, setClearCart] = useState(false)
   const cartsList = (carts && Object.values(carts).filter((cart: any) => cart.products.length > 0)) || []
   const VISIBLE_CART_BOTTOM_SHEET_HEIGHT = orientationState?.dimensions?.height * (orientationState.orientation === PORTRAIT ? 0.5 : 1);
 
@@ -36,6 +37,39 @@ const BusinessMenu = (props:any): React.ReactElement => {
   if (cartsList?.length > 0) {
     cart = cartsList?.find((item: any) => item.business_id == businessProductsListingProps.slug);
   }
+  const clearCartWhenTimeOut = () => {
+    if (cart?.uuid) clearCart(cart?.uuid)
+  }
+  const timerId = useRef(false);
+
+  const clearInactivityTimeout = () =>{ 
+    clearTimeout(timerId.current);
+  }
+  const panResponder = React.useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponderCapture: () => {
+        resetInactivityTimeout()
+      },
+    })
+  ).current
+  const resetInactivityTimeout = useCallback(() => {
+    clearTimeout(timerId.current);
+    timerId.current = setTimeout(() => {
+      setClearCart(true)
+      navigation.reset({
+        routes: [{ name: 'Intro' }],
+      })
+    }, 1000*10);
+  }, []);
+  
+  useEffect(() => {
+    if(isClearCart && cart?.uuid) clearCart(cart?.uuid)
+  }, [cart, isClearCart]);
+
+  useEffect(() => {
+    resetInactivityTimeout();
+    hideCartBottomSheet()
+  }, []);
 
   const cartProps = {
     ...props,
@@ -51,7 +85,10 @@ const BusinessMenu = (props:any): React.ReactElement => {
     showNotFound: false
   }
 
-  const goToBack = () => navigation.goBack()
+  const goToBack = () => {
+    clearInactivityTimeout()
+    navigation.goBack()
+  }
 
   const onToggleCart = () => {
     if (bottomSheetVisibility) hideCartBottomSheet();
@@ -62,7 +99,9 @@ const BusinessMenu = (props:any): React.ReactElement => {
     <View style={{
       flex: 1,
       flexDirection: orientationState?.orientation === PORTRAIT ? 'column' : 'row'
-    }}>
+    }}
+    {...panResponder.panHandlers}
+    >
       <View
         style={{
           flex: 1,
@@ -100,6 +139,9 @@ const BusinessMenu = (props:any): React.ReactElement => {
 
           <BusinessProductsListing
             { ...businessProductsListingProps }
+            resetInactivityTimeout={resetInactivityTimeout}
+            clearInactivityTimeout={clearInactivityTimeout}
+            bottomSheetVisibility={bottomSheetVisibility}
           />
         </Container>
       </View>
@@ -112,6 +154,8 @@ const BusinessMenu = (props:any): React.ReactElement => {
         >
           <CartContent
             {...cartProps}
+            resetInactivityTimeout={resetInactivityTimeout}
+            clearInactivityTimeout={clearInactivityTimeout}
           />
         </View>
     </View>

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

@@ -11,7 +11,7 @@ import { LANDSCAPE, useDeviceOrientation } from '../../../../../src/hooks/Device
 import { useTheme } from 'styled-components/native';
 
 const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
-  const {navigation, businessState} = props;
+  const {navigation, businessState, resetInactivityTimeout, clearInactivityTimeout, bottomSheetVisibility } = props;
 
   const business: Business = businessState.business;
 
@@ -47,6 +47,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
         image={{uri: item?.images}}
         isOutOfStock={!item?.inventoried}
         onPress={() => {
+          resetInactivityTimeout()
           navigation.navigate('ProductDetails', {
             businessId: business?.api?.businessId,
             businessSlug: business?.slug,
@@ -99,15 +100,18 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
             style={{
               width:
                 orientationState?.orientation === LANDSCAPE
-                  ? orientationState?.dimensions?.width * 0.16
+                  ? bottomSheetVisibility ? orientationState?.dimensions?.width * 0.15 :orientationState?.dimensions?.width * 0.16
                   : orientationState?.dimensions?.width * 0.21,
             }}
             onPress={() => {
+              resetInactivityTimeout()
               navigation.navigate('Category', {
                 category,
                 categories: business.original.categories,
                 businessId: business?.api?.businessId,
                 businessSlug: business?.slug,
+                clearInactivityTimeout,
+                resetInactivityTimeout,
               });
             }}
             titleStyle={{textAlign: 'center'}}

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

@@ -34,6 +34,8 @@ const CartBottomSheetUI = (props: CartBottomSheetUIProps): React.ReactElement |
     setIsCartsLoading,
 		isFromCart,
 		navigation,
+    clearInactivityTimeout,
+    resetInactivityTimeout,
 	}  = props
 
   const theme = useTheme()
@@ -87,6 +89,7 @@ const CartBottomSheetUI = (props: CartBottomSheetUIProps): React.ReactElement |
   }
 
   const handleUpsellingPage = () => {
+    clearInactivityTimeout()
     onCloseUpselling()
     navigation?.navigate('Cart', { businessId: cart?.business_id })
   }
@@ -159,7 +162,10 @@ const CartBottomSheetUI = (props: CartBottomSheetUIProps): React.ReactElement |
           borderColor={theme.colors.primary}
           imgRightSrc={null}
           textStyle={{ color: 'white', textAlign: 'center', flex: 1 }}
-          onClick={() => setOpenUpselling(true)}
+          onClick={() => {
+            resetInactivityTimeout()
+            setOpenUpselling(true)
+          }}
           style={{width: '100%', flexDirection: 'row', justifyContent: 'center'}}
         />
       </StyledBottomContent>
@@ -192,6 +198,7 @@ const CartBottomSheetUI = (props: CartBottomSheetUIProps): React.ReactElement |
           canOpenUpselling={canOpenUpselling}
           setCanOpenUpselling={setCanOpenUpselling}
           onClose={onCloseUpselling}
+          resetInactivityTimeout={resetInactivityTimeout}
         />
       )}
     </StyledContainer>
@@ -251,6 +258,8 @@ interface CartBottomSheetUIProps {
 	isFromCart: any,
 	navigation: any,
 	onNavigationRedirect: any,
+  clearInactivityTimeout: any,
+  resetInactivityTimeout: any,
 }
 
 export const CartBottomSheet = (props: any) => {

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useLanguage } from 'ordering-components/native';
 
 import { CCNotCarts } from './styles';
@@ -16,6 +16,8 @@ export const CartContent = (props: any) => {
     CustomCartComponent,
     extraPropsCustomCartComponent,
     showNotFound,
+    clearInactivityTimeout,
+    resetInactivityTimeout,
   }: Props = props
 
   const [, t] = useLanguage()
@@ -27,6 +29,8 @@ export const CartContent = (props: any) => {
     onNavigationRedirect: props.onNavigationRedirect,
     isCartsLoading,
     setIsCartsLoading,
+    clearInactivityTimeout,
+    resetInactivityTimeout,
   }
 
   const content = (
@@ -67,4 +71,6 @@ interface Props {
   CustomCartComponent?: any,
   extraPropsCustomCartComponent?: JSON,
   showNotFound?: boolean,
+  clearInactivityTimeout: any,
+  resetInactivityTimeout: any,
 }

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

@@ -31,6 +31,8 @@ const CategoriesMenu = (props: any): React.ReactElement => {
     categories,
     businessId,
     businessSlug,
+    clearInactivityTimeout,
+    resetInactivityTimeout
   }: Params = route.params;
 
   const theme = useTheme()
@@ -40,7 +42,10 @@ const CategoriesMenu = (props: any): React.ReactElement => {
   const [orientationState] = useDeviceOrientation();
   const [bottomSheetVisibility, { showCartBottomSheet, hideCartBottomSheet }] = useCartBottomSheet();
 
-  const onChangeTabs = (idx: number) => setIndexCateg(idx);
+  const onChangeTabs = (idx: number) => {
+    resetInactivityTimeout();
+    setIndexCateg(idx);
+  }
 
   const goToBack = () => navigation.goBack()
 
@@ -64,6 +69,8 @@ const CategoriesMenu = (props: any): React.ReactElement => {
       orientationState,
       height: VISIBLE_CART_BOTTOM_SHEET_HEIGHT,
       visible: bottomSheetVisibility,
+      clearInactivityTimeout,
+      resetInactivityTimeout,
     },
     showNotFound: false,
     showCartBottomSheet,
@@ -133,6 +140,7 @@ const CategoriesMenu = (props: any): React.ReactElement => {
                 }}
                 titleStyle={{marginTop: Platform.OS === 'ios' ? 10 : 0}}
                 onPress={() => {
+                  resetInactivityTimeout()
                   navigation.navigate('ProductDetails', {
                     businessId,
                     businessSlug,
@@ -167,6 +175,8 @@ interface Params {
   categories: Category[];
   businessId: string;
   businessSlug: string;
+  clearInactivityTimeout: any;
+  resetInactivityTimeout: any;
 }
 
 export default CategoriesMenu;