ordering-ui-react-native 0.12.1 → 0.12.5

package/package.json

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

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/franchises/src/components/Checkout/index.tsx

@@ -96,7 +96,7 @@ const CheckoutUI = (props: any) => {
 		}
 	})
 
-	const { showToast } = useToast();
+	const [, { showToast }] = useToast();
 	const [, t] = useLanguage();
 	const [{ user }] = useSession();
 	const [{ configs }] = useConfig();
@@ -514,7 +514,7 @@ export const Checkout = (props: any) => {
 		onNavigationRedirect,
 	} = props
 
-	const { showToast } = useToast();
+	const [, { showToast }] = useToast();
 	const [, t] = useLanguage();
 	const [{ token }] = useSession();
 	const [ordering] = useApi();

package/themes/franchises/src/components/ForgotPasswordForm/index.tsx

@@ -22,7 +22,7 @@ const ForgotPasswordUI = (props: any) => {
 		handleButtonForgotPasswordClick,
 	} = props;
 	const [, t] = useLanguage();
-	const { showToast } = useToast();
+	const [, { showToast }] = useToast();
 	const { control, handleSubmit, errors } = useForm();
 
 	const theme = useTheme();

package/themes/franchises/src/components/LanguageSelector/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useCallback } from 'react'
 import { LanguageSelector as LanguageSelectorController, useOrder } from 'ordering-components/native'
 import { useTheme } from 'styled-components/native';
 import { Platform, StyleSheet, View } from 'react-native'
@@ -61,13 +61,19 @@ const LanguageSelectorUI = (props: LanguageSelectorParams) => {
 		(a.content > b.content) ? 1 : ((b.content > a.content) ? -1 : 0)
 	)
 
+  const changeLang = useCallback((lang) => {
+		if (lang !== currentLanguage || orderState.loading)	{
+			handleChangeLanguage(lang);
+		}
+	}, []);
+
 	return (
 		<Container>
 			{languagesState?.languages && (
 				<>
 					{iconColor && <OIcon src={theme.images.general.language} color={iconColor} style={{ marginEnd: 14 }} width={16} />}
 					<RNPickerSelect
-						onValueChange={handleChangeLanguage}
+						onValueChange={changeLang}
 						items={_languages || []}
 						value={currentLanguage}
 						style={pickerStyle ? pickerStyle : _pickerStyle}

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

@@ -58,7 +58,7 @@ const LoginFormUI = (props: LoginParams) => {
 		onNavigationRedirect,
 	} = props;
 
-	const { showToast } = useToast();
+	const [, { showToast }] = useToast();
 	const [, t] = useLanguage();
 	const [{ configs }] = useConfig();
 	const [, { login }] = useSession();

package/themes/franchises/src/components/PaymentOptions/index.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { FlatList, TouchableOpacity, View, StyleSheet, KeyboardAvoidingView, Platform } from 'react-native';
+import { View, StyleSheet, KeyboardAvoidingView, Platform } from 'react-native';
 import {
 	Placeholder,
 	PlaceholderLine,
@@ -24,12 +24,10 @@ import { OText, OIcon, OModal, OButton } from '../shared';
 import {
 	PMContainer,
 	PMItem,
-	PMCardSelected,
-	PMCardItemContent,
 	PMDropDownWrapper,
 	PMDropDownCont
 } from './styles'
-import { getIconCard, flatArray } from '../../utils';
+import { TouchableOpacity } from 'react-native-gesture-handler';
 
 const stripeOptions: any = ['stripe_direct', 'stripe', 'stripe_connect']
 // const stripeRedirectOptions = [
@@ -134,7 +132,7 @@ const PaymentOptionsUI = (props: any) => {
 					/>
 					<OText
 						size={10}
-						style={{ marginStart: 12 }}
+						style={{ marginLeft: 12, marginRight: 12 }}
 						color={paymethodSelected?.id === item.id ? theme.colors.white : '#000'}
 					>
 						{t(item.gateway.toUpperCase(), item.name)}
@@ -151,8 +149,8 @@ const PaymentOptionsUI = (props: any) => {
 	return (
 		<PMContainer>
 			{paymethodsList.paymethods.length > 0 && (
-				<PMDropDownWrapper onPress={() => setShowMethods(true)}>
-					<OText color={theme.colors.textSecondary} style={{marginStart: 14}}>{paymethodSelected?.paymethod?.name || t('SELECT_PAYMENT_METHOD', 'Select Paymethod')}</OText>
+				<PMDropDownWrapper onPress={() => setShowMethods(!isShowMethods)}>
+        <OText color={theme.colors.textSecondary} style={{marginLeft: 14, marginRight: 14}}>{paymethodSelected?.paymethod?.name || t('SELECT_PAYMENT_METHOD', 'Select Paymethod')}</OText>
 					<OIcon color={theme.colors.textSecondary} width={16} src={theme.images.general.chevron_right} style={{transform: [{rotate: '90deg'}], marginEnd: 14}} />
 					{isShowMethods && <PMDropDownCont>
 						{

package/themes/franchises/src/components/PaymentOptions/styles.tsx

@@ -73,4 +73,5 @@ export const PMDropDownCont = styled.View`
   width: 100%;
   padding: 10px 16px;
   box-shadow: 0 2px 3px #0000004D;
-`;
+  border: 1px solid #EEE;
+`;

package/themes/franchises/src/components/ProductItemAccordion/index.tsx

@@ -142,7 +142,7 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
 				activeOpacity={1}
 			>
 				<View style={{ flexDirection: 'row', alignItems: 'flex-start' }}>
-					<ContentInfo>
+          <ContentInfo style={{alignItems: 'center'}}>
 						{product?.images && (
 							<ProductImage>
 								{isFromCheckout ? (

package/themes/franchises/src/components/SignupForm/index.tsx

@@ -95,7 +95,7 @@ const SignupFormUI = (props: SignupParams) => {
 	const showInputPhoneNumber =
 		validationFields?.fields?.checkout?.cellphone?.enabled ?? false;
 
-	const { showToast } = useToast();
+  const [, { showToast }] = useToast();
 	const [, t] = useLanguage();
 	const [, { login }] = useSession();
 	const [{ configs }] = useConfig();

package/themes/franchises/src/components/StripeRedirectForm/index.tsx

@@ -26,7 +26,7 @@ const StripeRedirectFormUI = (props: any) => {
 	//   // androidPayMode: 'test', // Android only
 	// })
 
-	const { showToast } = useToast();
+	const [, { showToast }] = useToast();
 	const { control, handleSubmit, errors } = useForm();
 
 	const [{ user }] = useSession();

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

@@ -62,7 +62,7 @@ export const UserFormDetailsUI = (props: any) => {
 	});
 
 	const [, t] = useLanguage();
-	const { showToast } = useToast();
+	const [, { showToast }] = useToast();
 	const { handleSubmit, control, errors, setValue } = useForm();
 
 	const [{ user }] = useSession();

package/themes/franchises/src/components/UserProfile/index.tsx

@@ -84,7 +84,7 @@ const ProfileListUI = (props: ProfileParams) => {
 
 	const [{ user }] = useSession();
 	const [, t] = useLanguage();
-	const { showToast } = useToast();
+	const [, { showToast }] = useToast();
 	const { errors } = useForm();
 
 	const { height } = useWindowDimensions();

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

@@ -52,7 +52,7 @@ const ProfileUI = (props: ProfileParams) => {
 
 	const [{ user }] = useSession();
 	const [, t] = useLanguage();
-	const { showToast } = useToast();
+	const [, { showToast }] = useToast();
 	const { handleSubmit, errors, setValue, control } = useForm();
 
 	const [phoneInputData, setPhoneInputData] = useState({

package/themes/franchises/src/components/shared/OToast.tsx

@@ -9,7 +9,7 @@ const bottomPosition = 20;
 export const Toast: React.FC = () => {
 	const theme = useTheme();
 	// const insets = useSafeAreaInsets();
-	const { toastConfig, hideToast } = useToast();
+	const [, { toastConfig, hideToast }] = useToast();
 	const opacity = React.useRef(new Animated.Value(0)).current;
 
 	const fadeIn = React.useCallback(() => {

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

@@ -10,7 +10,7 @@ import {
   WrapperNotFound
 } from './styles'
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder'
-import { Platform, View } from 'react-native'
+import { Platform, View, TouchableOpacity } from 'react-native'
 import { useTheme } from 'styled-components/native'
 import { ScrollView } from 'react-native-gesture-handler'
 
@@ -28,7 +28,8 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
     handleSearchRedirect,
     handleClearSearch,
     errorQuantityProducts,
-    handleCancelSearch
+    handleCancelSearch,
+    handlerClickCategory
   } = props
 
   const [, t] = useLanguage()
@@ -52,7 +53,11 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
         !category.id && (
           featured && categoryState?.products?.find((product: any) => product.featured) && (
             <>
-              <OText style={{...theme.labels.subtitle, fontWeight: Platform.OS == 'ios' ? '600' : 'bold'}} mBottom={10}>{t('FEATURED', 'Featured')}</OText>
+              <TouchableOpacity
+                onPress={() => handlerClickCategory({ id: 'featured', name: 'Featured' })}
+              >
+                <OText style={{...theme.labels.subtitle, fontWeight: Platform.OS == 'ios' ? '600' : 'bold'}} mBottom={10}>{t('FEATURED', 'Featured')}</OText>
+              </TouchableOpacity>
               <ScrollView horizontal showsHorizontalScrollIndicator={false}>
                 {categoryState.products?.map((product: any) => product.featured && (
                   <SingleProductCard
@@ -77,7 +82,11 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
               {
                 products.length > 0 && (
                   <>
-                    <OText style={{...theme.labels.subtitle, fontWeight: Platform.OS === 'ios' ? '600' : 'bold'}} mBottom={10}>{category.name}</OText>
+                    <TouchableOpacity
+                      onPress={() => handlerClickCategory(category)}
+                    >
+                      <OText style={{...theme.labels.subtitle, fontWeight: Platform.OS === 'ios' ? '600' : 'bold'}} mBottom={10}>{category.name}</OText>
+                    </TouchableOpacity>
                     <ScrollView horizontal showsHorizontalScrollIndicator={false}>
                       {
                         products.map((product: any) => (
@@ -104,7 +113,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
           <>
             {[...Array(categoryState?.pagination?.nextPageItems).keys()].map((item, i) => (
               <Placeholder key={i} style={{ padding: 5, marginBottom: 20 }} Animation={Fade}>
-                <PlaceholderLine width={70} height={20} style={{ marginBottom: 20 }} />
+                <PlaceholderLine width={50} height={20} style={{ marginBottom: 20 }} />
                 <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
                   <View style={{flexBasis: '47%'}}>
                     <PlaceholderLine width={80} height={100} style={{ marginBottom: 10 }} />

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

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { View, TouchableOpacity, StyleSheet } from 'react-native'
+import { View, TouchableOpacity, StyleSheet, ScrollView } from 'react-native'
 import MaterialIcon from 'react-native-vector-icons/MaterialIcons'
 import {
 	BusinessAndProductList,
@@ -29,6 +29,8 @@ import { useTheme } from 'styled-components/native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { OrderSummary } from '../OrderSummary'
 import { Cart } from '../Cart'
+import { SingleProductCard } from '../../../../../src/components/SingleProductCard'
+import NavBar from '../NavBar'
 
 const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 	const {
@@ -151,20 +153,21 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 								handleClearSearch={handleChangeSearch}
 								errorQuantityProducts={errorQuantityProducts}
 								handleCancelSearch={handleCancel}
+								handlerClickCategory={handleChangeCategory}
 							/>
 						</WrapContent>
 					</>
 				)}
 				{loading && !error && (
 					<>
-						<BusinessProductsCategories
+						{/* <BusinessProductsCategories
 							categories={[]}
 							categorySelected={categorySelected}
 							onClickCategory={handleChangeCategory}
 							featured={featuredProducts}
 							openBusinessInformation={openBusinessInformation}
 							loading={loading}
-						/>
+						/> */}
 						<WrapContent>
 							<BusinessProductsList
 								categories={[]}
@@ -209,6 +212,40 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 				/>
 			</OModal>
 
+			<OModal
+				open={categorySelected.id !== null}
+				onClose={() => handleChangeCategory({ id: null, name: 'All' })}
+				entireModal
+				customClose
+			>
+				<ScrollView
+					contentContainerStyle={{
+						paddingHorizontal: 40,
+						paddingVertical: 20
+					}}
+				>
+					<NavBar
+						title={categorySelected?.name}
+						onActionLeft={() => handleChangeCategory({ id: null, name: 'All' })}
+						showCall={false}
+						style={{ paddingHorizontal: 0, marginHorizontal: -7 }}
+					/>
+					<View>
+						{categorySelected.id && (
+							categoryState.products?.map((product: any) => (
+								<SingleProductCard
+									key={product.id}
+									isSoldOut={(product.inventoried && !product.quantity)}
+									product={product}
+									businessId={business.id}
+									onProductClick={() => onProductClick(product)}
+								/>
+							))
+						)}
+					</View>
+				</ScrollView>
+			</OModal>
+
 			{openUpselling && (
 				<UpsellingProducts
 					businessId={currentCart?.business_id}
@@ -239,9 +276,11 @@ const styles = StyleSheet.create({
 	btnBackArrow: {
 		borderWidth: 0,
 		color: '#FFF',
-		backgroundColor: 'transparent',
-		borderRadius: 24,
+		backgroundColor: 'rgba(0,0,0,0.3)',
+		borderRadius: 16,
+		paddingHorizontal: 15,
 		marginRight: 15,
+		marginTop: 20
 	},
 	searchIcon: {
 		borderWidth: 0,

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

@@ -6,7 +6,7 @@ import {
   CardInfo,
   SoldOut
 } from './styles'
-import { StyleSheet, TouchableOpacity } from 'react-native'
+import { StyleSheet, TouchableOpacity, Dimensions } from 'react-native'
 import { OText, OIcon } from '../shared'
 import { useTheme } from 'styled-components/native'
 
@@ -19,10 +19,13 @@ export const SingleProductCard = (props: SingleProductCardParams) => {
   } = props
 
   const theme = useTheme();
+  const windowWidth = Dimensions.get('window').width;
 
   const styles = StyleSheet.create({
     container: {
       marginBottom: 15,
+      width: (windowWidth - 140) / 2,
+      minHeight: (windowWidth - 140) / 2 + 50
     },
     textStyle: {
       flex: 1,
@@ -34,8 +37,8 @@ export const SingleProductCard = (props: SingleProductCardParams) => {
       lineHeight: 18
     },
     productStyle: {
-      width: 100,
-      height: 100,
+      width: (windowWidth - 200) / 2,
+      height: (windowWidth - 200) / 2,
       borderRadius: 3,
 		  marginTop: 5
     },
@@ -74,10 +77,11 @@ export const SingleProductCard = (props: SingleProductCardParams) => {
   return (
     <CardContainer style={styles.container}
       onPress={() => onProductClick(product)}
-		activeOpacity={0.8}
+		  activeOpacity={0.8}
     >
       <OIcon
         url={optimizeImage(product?.images, 'h_200,c_limit')}
+        src={!product?.images && theme.images.dummies.product}
         style={{...styles.productStyle, opacity: (isSoldOut || maxProductQuantity <= 0) ? 0.4 : 1}}
       />
       <CardInfo>

package/themes/instacart/src/components/SingleProductCard/styles.tsx

@@ -5,11 +5,8 @@ export const CardContainer = styled.TouchableOpacity`
   align-items: flex-start;
   padding: 10px;
   position: relative;
-  max-width: 150px;
-  width: 150px;
   margin-end: 10px;
   border-radius: 3px;
-  min-height: 200px;
 `
 export const CardInfo = styled.View`
   flex: 1;

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

@@ -162,7 +162,7 @@ export interface BusinessProductsListingParams {
 	productModal?: any;
 	handleChangeCategory: (value: any) => {};
 	setProductLogin?: () => {};
-	updateProductModal?: (value: any) => {}
+	updateProductModal?: (value: any) => {},
 }
 export interface BusinessBasicInformationParams {
 	navigation?: any;
@@ -196,9 +196,11 @@ export interface BusinessProductsListParams {
 	handleClearSearch?: (value: any) => {};
 	isBusinessLoading?: any,
 	errorQuantityProducts?: boolean,
-	handleCancelSearch?: () => void
+	handleCancelSearch?: () => void,
+	handlerClickCategory?: any,
 }
 export interface SingleProductCardParams {
+	isFullCategoryView?: boolean,
 	businessId: any,
 	product: any;
 	isSoldOut: boolean;

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' }],
+      })
+    }, 60000*2);
+  }, []);
+  
+  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;

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

@@ -31,6 +31,7 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
     canOpenUpselling,
     setCanOpenUpselling,
     onClose,
+    resetInactivityTimeout,
   } = props
   const [actualProduct, setActualProduct] = useState<any>(null)
   const [modalIsOpen, setModalIsOpen] = useState(false)
@@ -150,7 +151,10 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
                         style={{ height: 40, width: '100%' }}
                         bgColor="#EAF2FE"
                         borderColor="#EAF2FE"
-                        onClick={() => handleFormProduct(product)}
+                        onClick={() => {
+                          resetInactivityTimeout()
+                          handleFormProduct(product)
+                        }}
                       />
                     </Item>
                   )) : (
@@ -221,7 +225,10 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
                                 style={{ minHeight: 40, height: 'auto', width: '100%' }}
                                 bgColor="#EAF2FE"
                                 borderColor="#EAF2FE"
-                                onClick={() => handleFormProduct(product)}
+                                onClick={() => {
+                                  resetInactivityTimeout()
+                                  handleFormProduct(product)
+                                }}
                               />
                             </Item>
                           )}
@@ -251,7 +258,10 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
                         imgRightSrc=''
                         text={t('I_AM_FINE_THANK_YOU', 'I’m fine, thank you')}
                         style={styles.closeUpsellingButton}
-                        onClick={() => handleUpsellingPage()}
+                        onClick={() => {
+                          resetInactivityTimeout()
+                          handleUpsellingPage()
+                        }}
                       />
                     </CloseUpsellingLand>
                   </View>

package/themes/kiosk/src/types/index.d.ts

@@ -12,6 +12,9 @@ export interface BusinessProductsListingParams {
   errorQuantityProducts?: boolean;
   header?: any;
   logo?: any;
+  resetInactivityTimeout: any;
+  clearInactivityTimeout: any;
+  bottomSheetVisibility: any;
 }
 
 export interface OrderDetailsParams {
@@ -49,6 +52,7 @@ export interface UpsellingProductsParams {
   canOpenUpselling?: boolean;
   setCanOpenUpselling?: (value: any) => void;
   onClose?: () => void;
+  resetInactivityTimeout: any;
 }
 
 export interface LanguageSelectorParams {
@@ -464,4 +468,5 @@ export interface Cart {
   service_fee_with_discount: number;
   delivery_price_with_discount: number;
   total: number;
+  clearInactivityTimeout: any;
 }