ordering-ui-react-native 0.12.0 → 0.12.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.12.0",
+  "version": "0.12.4",
   "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/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;
 }

package/themes/single-business/src/components/BusinessBasicInformation/index.tsx

@@ -55,6 +55,11 @@ export const BusinessBasicInformation = (
 		return _types.join(', ');
 	};
 
+  const onNavigationRedirect = (page: string, params: any) => {
+    if (!page) return
+    navigation.navigate(page, params);
+  }
+
 	return (
 		<BusinessContainer>
 			<BusinessHeader
@@ -150,7 +155,12 @@ export const BusinessBasicInformation = (
 								{business?.name}
 							</OText>
 							{!isBusinessInfoShow && (
-								<WrapBusinessInfo onPress={() => setOpenBusinessInformation(true)}>
+								<WrapBusinessInfo
+                  onPress={() => onNavigationRedirect(
+                    'BusinessInformation',
+                    { businessState, business }
+                  )}
+                >
 									<OIcon src={theme.images.general.info} width={16} color={theme.colors.textSecondary} />
 								</WrapBusinessInfo>
 							)}
@@ -227,7 +237,7 @@ export const BusinessBasicInformation = (
 					)}
 				</WrapReviews>
 			</BusinessInfo>
-			<OModal
+			{/* <OModal
 				titleSectionStyle={styles.modalTitleSectionStyle}
 				open={openBusinessInformation}
 				onClose={() => setOpenBusinessInformation(false)}
@@ -236,7 +246,7 @@ export const BusinessBasicInformation = (
 					businessState={businessState}
 					business={business}
 				/>
-			</OModal>
+			</OModal> */}
 			<OModal
 				entireModal
 				titleSectionStyle={styles.modalTitleSectionStyle}

package/themes/single-business/src/components/BusinessBasicInformation/styles.tsx

@@ -62,4 +62,4 @@ export const DropOptionButton = styled.TouchableOpacity`
   padding-horizontal: 8px;
   flex-direction: row;
   margin-end: 12px;
-`
+`

package/themes/single-business/src/components/BusinessInformation/index.tsx

@@ -1,10 +1,11 @@
-import React from 'react';
+import React, { useState } from 'react';
 import {
 	BusinessInformation as BusinessInformationController,
 	useLanguage, useUtils
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
-import { OIcon, OText } from '../shared';
+import { SliderBox } from 'react-native-image-slider-box';
+import { OIcon, OText, OModal } from '../shared';
 import {
 	BusinessInformationContainer,
 	WrapMainContent,
@@ -16,17 +17,21 @@ import {
 	DivideView,
 	MediaWrapper,
 } from './styles';
-import { Platform, StyleSheet, View } from 'react-native';
+import { Platform, StyleSheet, TouchableOpacity, View } from 'react-native';
 import { BusinessInformationParams } from '../../types';
 import { GoogleMap } from '../GoogleMap';
 import { WebView } from 'react-native-webview';
+import NavBar from '../../../../../src/components/NavBar'
 
 const BusinessInformationUI = (props: BusinessInformationParams) => {
-	const { businessState, businessSchedule, businessLocation } = props;
+	const { businessState, business, businessSchedule, businessLocation } = props;
 
 	const theme = useTheme();
 	const [, t] = useLanguage();
 	const [{ optimizeImage }] = useUtils();
+
+  const [openImages, setOpenImages] = useState(false)
+
 	const daysOfWeek = [
 		t('SUNDAY_ABBREVIATION', 'Sun'),
 		t('MONDAY_ABBREVIATION', 'Mon'),
@@ -69,7 +74,7 @@ const BusinessInformationUI = (props: BusinessInformationParams) => {
 		return vAry;
 	};
 	const bImages: any = () => {
-		const len = businessState?.business?.gallery?.length | 0;
+		const len = businessState?.business?.gallery?.length ?? 0;
 		if (len == 0) return [];
 		const iAry = businessState?.business?.gallery.filter(
 			({ type, video }: any) => type == 1 && video == null,
@@ -79,6 +84,10 @@ const BusinessInformationUI = (props: BusinessInformationParams) => {
 
 	return (
 		<BusinessInformationContainer>
+      <NavBar
+        style={{ paddingBottom: 0 }}
+        onActionLeft={() => props.navigation?.canGoBack() && props.navigation.goBack()}
+      />
 			<WrapMainContent contentContainerStyle={{}}>
 				<InnerContent>
 					<OText size={24} weight={Platform.OS === 'ios' ? '600' : 'bold'}>
@@ -89,7 +98,7 @@ const BusinessInformationUI = (props: BusinessInformationParams) => {
 							{t('BUSINESS_LOCATION', 'Business Location')}
 						</OText>
 					</GrayBackground>
-					{businessLocation.location && (
+					{!!businessLocation.location && (
 						<WrapBusinessMap style={styles.wrapMapStyle}>
 							<GoogleMap
 								readOnly
@@ -107,7 +116,7 @@ const BusinessInformationUI = (props: BusinessInformationParams) => {
 							{t('OPENING_TIME', 'Opening Time')}
 						</OText>
 					</GrayBackground>
-					{businessSchedule && businessSchedule?.length > 0 && (
+					{!!businessSchedule && businessSchedule?.length > 0 && (
 						<WrapScheduleBlock>
 							{businessSchedule.map((schedule: any, i: number) => (
 								<ScheduleBlock key={i}>
@@ -164,19 +173,41 @@ const BusinessInformationUI = (props: BusinessInformationParams) => {
 										{t('IMAGES', 'Images')}
 									</OText>
 								</GrayBackground>
+
 								<MediaWrapper horizontal>
-									{bImages().map((i: any) => (
-										i.file != null &&
-										<View key={i.id} style={{ width: 210, height: 127, borderRadius: 7.6, marginEnd: 20, overflow: 'hidden' }}>
-											<OIcon cover url={optimizeImage(i?.file, 'h_150,c_limit')} width={210} height={127} />
-										</View>
-									))}
+									{bImages().map((i: any) => ( i.file != null && (
+                    <View key={i.id} style={{ width: 210, height: 127, borderRadius: 7.6, marginEnd: 20, overflow: 'hidden' }}>
+                      <TouchableOpacity  onPress={() => setOpenImages(true)}>
+                        <OIcon cover url={optimizeImage(i?.file, 'h_150,c_limit')} width={210} height={127} />
+                      </TouchableOpacity>
+                    </View>
+                  )))}
 								</MediaWrapper>
 							</>
 						)}
 					</>
 				</InnerContent>
 			</WrapMainContent>
+      <OModal
+				titleSectionStyle={styles.modalTitleSectionStyle}
+				open={openImages}
+				onClose={() => setOpenImages(false)}
+				isNotDecoration
+      >
+        <View style={{ height: '100%', flexDirection: 'row', justifyContent: 'center', alignItems: 'center'}}>
+          <View style={{ marginTop: 20, height: 200}}>
+            <SliderBox
+              // circleLoop
+              sliderBoxHeight={200}
+              images={bImages().map((image: any) => optimizeImage(image?.file, 'h_300,c_limit'))}
+              dotColor={theme.colors.primary}
+              inactiveDotColor={theme.colors.backgroundGray}
+              dotStyle={styles.dotStyle}
+              activeOpacity={1}
+            />
+          </View>
+        </View>
+			</OModal>
 		</BusinessInformationContainer>
 	);
 };
@@ -187,6 +218,21 @@ const styles = StyleSheet.create({
 		marginTop: 15,
 		marginBottom: 10,
 	},
+  dotStyle: {
+    width: 15,
+    height: 15,
+    borderRadius: 15,
+    marginHorizontal: 10,
+    padding: 0,
+    margin: 0
+  },
+  modalTitleSectionStyle: {
+		position: 'absolute',
+		width: '100%',
+		top: 0,
+		zIndex: 100,
+		left: 40
+	},
 });
 
 export const BusinessInformation = (props: BusinessInformationParams) => {

package/themes/single-business/src/components/BusinessInformation/styles.tsx

@@ -8,7 +8,7 @@ export const GrayBackground = styled.View`
   margin-top: 27px;
 `
 export const WrapMainContent = styled.ScrollView`
-  margin-top: 40px;
+  /* margin-top: 40px; */
 `
 export const MediaWrapper = styled.ScrollView`
   margin-top: 16px;
@@ -36,4 +36,4 @@ export const DivideView = styled.View`
 	height: 8px;
 	background-color: ${(props: any) => props.theme.colors.backgroundGray100};
 	margin-horizontal: -40px;
-`;
+`;

package/themes/single-business/src/components/Checkout/index.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { View, StyleSheet } from 'react-native';
 import { initStripe, useConfirmPayment } from '@stripe/stripe-react-native';
-
+import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 import {
 	Checkout as CheckoutController,
 	useOrder,
@@ -22,6 +22,10 @@ import { PaymentOptions } from '../PaymentOptions';
 import { DriverTips } from '../DriverTips';
 import { NotFoundSource } from '../NotFoundSource';
 import { UserDetails } from '../UserDetails';
+import { FloatingButton } from '../FloatingButton';
+import { Container } from '../../layouts/Container';
+import NavBar from '../NavBar';
+import { OrderSummary } from '../OrderSummary';
 
 import {
 	ChContainer,
@@ -36,12 +40,7 @@ import {
 	ChUserDetails,
 	ChCart
 } from './styles';
-import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 
-import { FloatingButton } from '../FloatingButton';
-import { Container } from '../../layouts/Container';
-import NavBar from '../NavBar';
-import { OrderSummary } from '../OrderSummary';
 import { getTypesText } from '../../utils';
 
 const mapConfigs = {

package/themes/single-business/src/components/DriverTips/index.tsx

@@ -84,6 +84,7 @@ const DriverTipsUI = (props: any) => {
 							<TouchableOpacity
 								key={i}
 								onPress={() => handleChangeOpt(option)}
+                disabled={loading}
 							>
 								<DTCard
 									style={style.circle}

package/themes/single-business/src/components/DriverTips/styles.tsx

@@ -13,21 +13,22 @@ export const DTWrapperTips = styled.View`
   display: flex;
   flex-direction: row;
   width: 100%;
-  justify-content: space-between;
+  justify-content: space-evenly;
   align-items: center;
   flex-wrap: wrap;
 `
 
 export const DTCard = styled.View`
+  display: flex;
   justify-content: center;
   align-items: center;
-  padding: 10px;
-  border: 1px solid ${(props: any) => props.isActive ? props.theme.colors.primary : props.theme.colors.border};
+  padding: 15px;
+  border: 1px solid ${(props: any) => props.theme.colors.whiteGray};
   text-transform: capitalize;
-  min-height: 48px;
-  min-width: 48px;
-  width: 48px;
-  height: 48px;
+  min-height: 60px;
+  min-width: 60px;
+  margin-right: 10px;
+  margin-top: 10px;
 
   ${(props: any) => props.isActive && css`
     background-color: ${(props: any) => props.theme.colors.primary};
@@ -45,11 +46,11 @@ export const DTForm = styled.View`
 export const DTLabel = styled.Text`
   font-size: 10px;
   align-self: flex-start;
-  color: ${(props: any) => props.theme.colors.textSecondary}
+  color: ${(props: any) => props.theme.colors.textSecondary};
   ${(props: any) => props.theme?.rtl && css`
     margin-left: 20px;
     margin-right: 0;
-  `}
+  `};
   margin-top: 5px;
   margin-bottom: 17px;
 `

package/themes/single-business/src/components/PaymentOptions/index.tsx

@@ -134,7 +134,7 @@ const PaymentOptionsUI = (props: any) => {
 					/>
 					<OText
 						size={10}
-						style={{ marginStart: 12 }}
+						style={{ marginLeft: 12 }}
 						color={paymethodSelected?.id === item.id ? theme.colors.white : '#000'}
 					>
 						{t(item.gateway.toUpperCase(), item.name)}
@@ -151,19 +151,21 @@ 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>
-					<OIcon color={theme.colors.textSecondary} width={16} src={theme.images.general.chevron_right} style={{transform: [{rotate: '90deg'}], marginEnd: 14}} />
-					{isShowMethods && <PMDropDownCont>
-						{
-							pmData.map((item: any, idx: number) => 
-							<React.Fragment key={idx}>
-								{renderPaymethods({item})}
-							</React.Fragment>	
-							)
-						}
-					</PMDropDownCont>}
-				</PMDropDownWrapper>
+        <View style={{ flexDirection: 'column' }}>
+          <PMDropDownWrapper onPress={() => setShowMethods(!isShowMethods)}>
+            <OText color={theme.colors.textSecondary} style={{marginLeft: 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}} />
+          </PMDropDownWrapper>
+          {isShowMethods && (
+            <PMDropDownCont>
+              {pmData.map((item: any, idx: number) =>
+                <TouchableOpacity key={idx} onPress={() => console.log('asdasdasda')}>
+                  {renderPaymethods({item})}
+                </TouchableOpacity>
+              )}
+            </PMDropDownCont>
+          )}
+        </View>
 			)}
 
 			{(paymethodsList.loading || isLoading) && (

package/themes/single-business/src/components/PaymentOptions/styles.tsx

@@ -66,11 +66,9 @@ export const PMDropDownWrapper = styled.TouchableOpacity`
 `;
 
 export const PMDropDownCont = styled.View`
-  background-color: white;
-  border-radius: 7.6px;
-  position: absolute;
-  top: 44px;
+  border-radius: 8px;
   width: 100%;
-  padding: 10px 16px;
+  padding: 10px 0 0;
   box-shadow: 0 2px 3px #0000004D;
-`;
+  z-index: 99999;
+`;