ordering-ui-react-native 0.15.30 → 0.15.33

package/package.json

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

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

@@ -541,7 +541,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
           </TabsContainer>
         </ScrollView>
       </FiltersTab>
-      <View style={{ flex: 1, minHeight: HEIGHT_SCREEN - 250 }}>
+      <View style={{ flex: 1, minHeight: HEIGHT_SCREEN - 450 }}>
         {currentTabSelected !== 'logisticOrders' && (
           <View
             style={{

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

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { StyleSheet, TouchableOpacity, View } from 'react-native';
+import { StyleSheet, TouchableOpacity, View, Platform, PlatformIOSStatic } from 'react-native';
 import { useTheme } from 'styled-components/native';
 import moment from 'moment'
 import { useLanguage, useUtils } from 'ordering-components/native';
@@ -9,6 +9,7 @@ import {
 } from './styles';
 import EntypoIcon from 'react-native-vector-icons/Entypo'
 import { DeviceOrientationMethods } from '../../../../../src/hooks/DeviceOrientation'
+import DeviceInfo from 'react-native-device-info';
 
 const { useDeviceOrientation, PORTRAIT } = DeviceOrientationMethods
 
@@ -32,6 +33,10 @@ export const PreviousOrders = (props: any) => {
 
   const IS_PORTRAIT = orientationState.orientation === PORTRAIT
 
+  const platformIOS = Platform as PlatformIOSStatic
+  const isIpad = platformIOS.isPad
+  const isTablet = DeviceInfo.isTablet();
+
   const handlePressOrder = (order: any) => {
     if (order?.locked && isLogisticOrder) return
     handleClickOrder && handleClickOrder(order)
@@ -46,8 +51,8 @@ export const PreviousOrders = (props: any) => {
   const styles = StyleSheet.create({
     cardButton: {
       flex: 1,
-      paddingVertical: 20,
-      marginBottom: IS_PORTRAIT ? 20 : 0,
+      paddingVertical: (isIpad || isTablet) ? 20 : 0,
+      marginBottom: IS_PORTRAIT ? 25 : 0,
       marginLeft: 3,
     },
     icon: {

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

@@ -379,7 +379,7 @@ const CartUI = (props: any) => {
         <ProductForm
           productCart={curProduct}
           businessSlug={cart?.business?.slug}
-          businessId={curProduct?.business_id}
+          businessId={cart?.business_id}
           categoryId={curProduct?.category_id}
           productId={curProduct?.id}
           onSave={handlerProductAction}

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

@@ -179,7 +179,7 @@ const CartBottomSheetUI = (props: CartBottomSheetUIProps): React.ReactElement |
         <ProductForm
           productCart={curProduct}
           businessSlug={cart?.business?.slug}
-          businessId={curProduct?.business_id}
+          businessId={cart?.business_id}
           categoryId={curProduct?.category_id}
           productId={curProduct?.id}
           onSave={handlerProductAction}

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

@@ -5,7 +5,7 @@ export const StyledContainer = styled.ScrollView`
 	zIndex: 1000;
 	width: 100%;
 	background-color: #fff;
-	padding: 20px 20px 20px 0px;
+	padding: 20px 0 0;
 	bottom: 0;
 	shadow-color: #000;
 	shadow-opacity:  0.4;

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

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { useLanguage } from 'ordering-components/native';
-
+import { useCartBottomSheet } from '../../providers/CartBottomSheetProvider';
 import { CCNotCarts } from './styles';
 
 import { Cart } from '../Cart';
@@ -22,6 +22,7 @@ export const CartContent = (props: any) => {
 
   const [, t] = useLanguage()
   const [isCartsLoading, setIsCartsLoading] = useState(false)
+  const [, { hideCartBottomSheet }] = useCartBottomSheet();
 
   const cartProps = {
     navigation,
@@ -33,6 +34,15 @@ export const CartContent = (props: any) => {
     resetInactivityTimeout,
   }
 
+  useEffect(() => {
+    if (!cart && showNotFound) {
+      navigation?.canGoBack()
+        ? navigation.goBack()
+        : props.onNavigationRedirect && props.onNavigationRedirect('Business')
+      hideCartBottomSheet()
+    }
+  }, [cart])
+
   const content = (
     <>
       {(isOrderStateCarts && cart) && (
@@ -46,13 +56,13 @@ export const CartContent = (props: any) => {
           }
         </>
       )}
-      {(!cart && showNotFound) && (
+      {/* {(!cart && showNotFound) && (
         <CCNotCarts>
           <OText size={24} style={{ textAlign: 'center' }}>
             {t('CARTS_NOT_FOUND', 'You don\'t have carts available')}
           </OText>
         </CCNotCarts>
-      )}
+      )} */}
       <Spinner visible={isCartsLoading} />
     </>
   )

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

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
-import { View, Animated, TouchableOpacity } from 'react-native';
+import { View, Animated, TouchableOpacity, ImageBackground } from 'react-native';
 import { useLanguage, useUtils } from 'ordering-components/native';
+import FastImage from 'react-native-fast-image'
 
 import {
   StyledCartItem,
@@ -70,13 +71,24 @@ const CartItem = (props: CartItemProps) => {
       >
         <StyledCartItem>
           <View style={{ flexDirection: 'row' }}>
-            <OImage
-              source={{ uri: product?.images || '' }}
-              height={60}
-              width={60}
-              resizeMode="cover"
-              borderRadius={6}
-            />
+            {product?.images ? (
+              <FastImage
+                style={{ height: 60, width: 80, borderRadius: 6 }}
+                source={{
+                  uri: product?.images,
+                  priority: FastImage.priority.normal,
+                  // cache:FastImage.cacheControl.web
+                }}
+                resizeMode={FastImage.resizeMode.cover}
+              />
+            ) : (
+              <ImageBackground
+                style={{ height: 60, width: 80, borderRadius: 6 }}
+                source={theme.images.dummies.product}
+                imageStyle={{ borderRadius: 6 }}
+                resizeMode='cover'
+              />
+            )}
 
             <View style={{ flexDirection: 'column', justifyContent: 'space-evenly', marginHorizontal: 15, marginTop: 10 }}>
               <View>

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

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import { useLanguage, ToastType, useToast } from 'ordering-components/native';
-import { _setStoreData } from '../../../../../src/providers/StoreUtil';
+import { _setStoreData, _removeStoreData } from '../../../../../src/providers/StoreUtil';
 
 import { OButton, OInput, OText } from '../shared';
 import { useForm, Controller } from 'react-hook-form';
@@ -28,6 +28,11 @@ const CustomerName = (props: Props): React.ReactElement => {
     onProceedToPay()
   };
 
+  const onSkip = () => {
+    _removeStoreData('customer_name')
+    onProceedToPay()
+  }
+
   const styles = StyleSheet.create({
     inputStyle: {
       borderRadius: 4,
@@ -75,7 +80,7 @@ const CustomerName = (props: Props): React.ReactElement => {
     <View style={{ flex: 1, alignItems: 'center' }}>
       <OButton
         text={t('SKIP', 'Skip')}
-        onClick={onProceedToPay}
+        onClick={onSkip}
         textStyle={{ color: theme.colors.primary, fontSize: 20 }}
         parentStyle={{
           height: orientationState?.orientation === PORTRAIT

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

@@ -140,7 +140,7 @@ const Intro = (props: any): React.ReactElement => {
 
 const styles = StyleSheet.create({
   buttonLandStyle: {
-    width: 290,
+    minWidth: 130,
     marginBottom: 16
   }
 });

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

@@ -212,7 +212,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
           setCustomerName(name)
       } catch (e) {
         if (e) {
-          setCustomerName('')
+          setCustomerName(null)
         }
       }
     }
@@ -553,7 +553,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                       size={orientationState?.dimensions?.width * 0.048}
                       weight="700"
                     >
-                      {`${t('HUNGRY', 'hungry')}, ${customerName}`}
+                      {t('HUNGRY', 'hungry')}{!!customerName && `, ${customerName}`}
                     </OText>
                   </OText>
 

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

@@ -169,7 +169,7 @@ const OrderSummaryUI = (props: any) => {
               isCartProduct
               productCart={curProduct}
               businessSlug={cart?.business?.slug}
-              businessId={curProduct?.business_id}
+              businessId={cart?.business_id}
               categoryId={curProduct?.category_id}
               productId={curProduct?.id}
               onSave={handlerProductAction}

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

@@ -1,4 +1,5 @@
 import React, { useState } from 'react'
+import FastImage from 'react-native-fast-image'
 import {
   View,
   TouchableOpacity,
@@ -69,7 +70,7 @@ export const ProductOptionsUI = (props: any) => {
 
   const { product, loading, error } = productObject;
 
-  const HEADER_EXPANDED_HEIGHT = Platform.OS === 'ios' ? orientationState?.dimensions?.height * 0.65 : orientationState?.dimensions?.height * 0.4;
+  const HEADER_EXPANDED_HEIGHT = orientationState?.dimensions?.height * 0.4;
   const HEADER_COLLAPSED_HEIGHT = orientationState?.dimensions?.height * 0.2;
 
   const isError = (id: number) => {
@@ -203,7 +204,6 @@ export const ProductOptionsUI = (props: any) => {
     },
     scrollContainer: {
       padding: 16,
-      paddingTop: HEADER_EXPANDED_HEIGHT
     },
     header: {
       backgroundColor: '#fff',
@@ -225,6 +225,10 @@ export const ProductOptionsUI = (props: any) => {
       shadowOpacity: 0.4,
       shadowRadius: 3,
       elevation: 5,
+    },
+    imageStyle: {
+      width: '100%',
+      height: HEADER_EXPANDED_HEIGHT,
     }
   });
 
@@ -232,118 +236,173 @@ export const ProductOptionsUI = (props: any) => {
     <>
       <ScrollView
         style={styles.mainContainer}
-        contentContainerStyle={styles.scrollContainer}
         onScroll={Animated.event(
           [{ nativeEvent: { contentOffset: { y: scrollY } } }],
           { useNativeDriver: false })
         }
         scrollEventThrottle={16}
       >
-        <Animated.View style={[styles.header, { height: headerHeight }]}>
-          {!isDrawer && (<Animated.View style={{ opacity: navBar1ContainerOpacity }}>
-            <NavBar
-              {...navBarProps}
-              titleColor={theme.colors.white}
-              btnStyle={{
-                width: 55,
-                height: 55,
-                overflow: 'scroll',
-                backgroundColor: 'black',
-                borderRadius: 100,
-                color: 'white',
-                opacity: 0.8,
-                left: 20,
-              }}
-            />
-          </Animated.View>
-          )}
-          <Animated.View style={{ opacity: navBar2ContainerOpacity, position: 'absolute' }}>
-            <NavBar
-              {...navBarProps}
-              btnStyle={{
-                width: 55,
-                height: 55,
-                backgroundColor: 'transparent',
-                borderRadius: 100,
-                left: 20,
-              }}
-            />
-          </Animated.View>
+        {!isDrawer ? (
+          <Animated.View style={[styles.header, { height: headerHeight }]}>
+            {!isDrawer && (
+              <Animated.View style={{ opacity: navBar1ContainerOpacity }}>
+                <NavBar
+                  {...navBarProps}
+                  titleColor={theme.colors.white}
+                  btnStyle={{
+                    width: 55,
+                    height: 55,
+                    overflow: 'scroll',
+                    backgroundColor: 'black',
+                    borderRadius: 100,
+                    color: 'white',
+                    opacity: 0.8,
+                    left: 20,
+                  }}
+                />
+              </Animated.View>
+            )}
+            <Animated.View style={{ opacity: navBar2ContainerOpacity, position: 'absolute' }}>
+              <NavBar
+                {...navBarProps}
+                btnStyle={{
+                  width: 55,
+                  height: 55,
+                  backgroundColor: 'transparent',
+                  borderRadius: 100,
+                  left: 20,
+                }}
+              />
+            </Animated.View>
 
-          <Animated.View style={{
-            backgroundColor: 'white',
-            width: orientationState?.dimensions?.width,
-            opacity: collapsedBarContainerOpacity,
-          }}>
-            <View
-              style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                padding: 20,
-                paddingTop: 0,
-                paddingBottom: 10
-              }}
-            >
-              <OImage
-                source={{ uri: product?.images }}
-                width={70}
-                height={70}
-                resizeMode="cover"
-                borderRadius={6}
+            <Animated.View style={{
+              backgroundColor: 'white',
+              width: orientationState?.dimensions?.width,
+              opacity: collapsedBarContainerOpacity,
+            }}>
+              <View
+                style={{
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                  padding: 20,
+                  paddingTop: 0,
+                  paddingBottom: 10
+                }}
+              >
+                {product?.images ? (
+                  <FastImage
+                    style={{ height: 70, width: 70, borderRadius: 6 }}
+                    source={{
+                      uri: product?.images,
+                      priority: FastImage.priority.normal,
+                      // cache:FastImage.cacheControl.web
+                    }}
+                    resizeMode={FastImage.resizeMode.cover}
+                  />
+                ) : (
+                  <ImageBackground
+                    style={{ height: 70, width: 70, borderRadius: 6 }}
+                    source={theme.images.dummies.product}
+                    imageStyle={{ borderRadius: 6 }}
+                    resizeMode='cover'
+                  />
+                )}
+                <OText
+                  size={orientationState?.dimensions?.width * 0.025}
+                  weight="bold"
+                  mLeft={20}
+                  numberOfLines={2}
+                >
+                  {product?.name}
+                </OText>
+              </View>
+              <View
+                style={{
+                  position: 'absolute',
+                  bottom: -2,
+                  height: 1,
+                  backgroundColor: 'white',
+                  width: orientationState?.dimensions?.width,
+                  ...styles.shadow,
+                }}
               />
-              <OText
-                size={orientationState?.dimensions?.width * 0.025}
-                weight="bold"
-                mLeft={20}
-                numberOfLines={2}
+            </Animated.View>
+
+            <Animated.View style={{
+              opacity: heroContainerOpacity,
+              position: 'absolute',
+              zIndex: -100,
+              transform: [{ translateY: heroTranslateY }],
+            }}>
+              <View
+                style={{
+                  width: orientationState?.dimensions?.width,
+                  height: HEADER_EXPANDED_HEIGHT,
+                  position: 'absolute',
+                  zIndex: 1,
+                  backgroundColor: 'rgba(24, 28, 50, 0.4)',
+                }}
               >
-                {product?.name}
-              </OText>
-            </View>
-            <View
-              style={{
-                position: 'absolute',
-                bottom: -2,
-                height: 1,
-                backgroundColor: 'white',
-                width: orientationState?.dimensions?.width,
-                ...styles.shadow,
-              }}
-            />
+                {product?.images ? (
+                  <FastImage
+                    style={{ flex: 1, justifyContent: 'center' }}
+                    source={{
+                      uri: product?.images,
+                      priority: FastImage.priority.normal,
+                      // cache:FastImage.cacheControl.web
+                    }}
+                    resizeMode={FastImage.resizeMode.cover}
+                  />
+                ) : (
+                  <ImageBackground
+                    style={{ flex: 1, justifyContent: 'center' }}
+                    source={theme.images.dummies.product}
+                    resizeMode='cover'
+                  />
+                )}
+              </View>
+            </Animated.View>
           </Animated.View>
-
-          <Animated.View style={{
-            opacity: heroContainerOpacity,
-            position: 'absolute',
-            zIndex: -100,
-            transform: [{ translateY: heroTranslateY }],
-          }}>
-            <View
+        ) : (
+          <View style={{...styles.imageStyle}}>
+            <Animated.View
               style={{
-                width: orientationState?.dimensions?.width,
-                height: HEADER_EXPANDED_HEIGHT,
+                ...styles.imageStyle,
+                opacity: heroContainerOpacity,
                 position: 'absolute',
-                zIndex: 1,
-                backgroundColor: 'rgba(24, 28, 50, 0.4)',
+                zIndex: -100,
+                transform: [{ translateY: heroTranslateY }],
               }}
             >
-              <ImageBackground source={{ uri: product?.images }} resizeMode='cover' style={{ flex: 1, justifyContent: 'center' }} />
+              <View style={styles.imageStyle}>
+                {product?.images ? (
+                  <FastImage
+                    style={{ flex: 1 }}
+                    source={{
+                      uri: product?.images,
+                      priority: FastImage.priority.normal,
+                      // cache:FastImage.cacheControl.web
+                    }}
+                    resizeMode={FastImage.resizeMode.cover}
+                  />
+                ) : (
+                  <ImageBackground
+                    style={{ flex: 1, justifyContent: 'center' }}
+                    source={theme.images.dummies.product}
+                    resizeMode='cover'
+                  />
+                )}
+              </View>
+            </Animated.View>
+          </View>
+        )}
 
-            </View>
 
-            <Animated.View
-              style={{
-                transform: [{ translateY: heroTranslateY }],
-                width: orientationState?.dimensions?.width * 0.75,
-                height: HEADER_EXPANDED_HEIGHT / 2,
-                position: 'relative',
-                top: HEADER_EXPANDED_HEIGHT / 3,
-                zIndex: 100,
-                padding: 20,
-              }}
-            >
+        {!loading && !error && product && (
+          <View style={{ paddingTop: isDrawer ? 20 : HEADER_EXPANDED_HEIGHT, paddingBottom: 80, paddingHorizontal: 16 }}>
+            <WrapContent isDrawer={isDrawer}>
               <OText
-                color={theme.colors.white}
+                style={{ marginTop: 20 }}
                 size={orientationState?.dimensions?.width * 0.038}
                 weight="bold"
                 mBottom={10}
@@ -352,33 +411,23 @@ export const ProductOptionsUI = (props: any) => {
                 {product?.name || productCart?.name}
               </OText>
 
-              <OText
-                color={theme.colors.white}
-                numberOfLines={4}
-              >
-                {product?.description || productCart?.description}
-              </OText>
-            </Animated.View>
-          </Animated.View>
-        </Animated.View>
+              {(product?.description || productCart?.description) && (
+                <OText
+                  numberOfLines={4}
+                >
+                  {product?.description || productCart?.description}
+                </OText>
+              )}
+
+              {((product?.sku && product?.sku !== '-1' && product?.sku !== '1') ||
+                (productCart?.sku && productCart?.sku !== '-1' && productCart?.sku !== '1')
+              ) && (
+                <ProductDescription>
+                  <OText size={20}>{t('SKU', 'Sku')}</OText>
+                  <OText>{product?.sku || productCart?.sku}</OText>
+                </ProductDescription>
+              )}
 
-        {/* {!isFromCheckout && (
-          <Spinner visible={loading} />
-        )} */}
-        {!loading && !error && product && (
-          <View style={{ paddingTop: isDrawer ? 10 : 20, paddingBottom: 80 }}>
-            <WrapContent isDrawer={isDrawer}>
-              <ProductDescription>
-                {(
-                  (product?.sku && product?.sku !== '-1' && product?.sku !== '1') ||
-                  (productCart?.sku && productCart?.sku !== '-1' && productCart?.sku !== '1')
-                ) && (
-                    <>
-                      <OText size={20}>{t('SKU', 'Sku')}</OText>
-                      <OText>{product?.sku || productCart?.sku}</OText>
-                    </>
-                  )}
-              </ProductDescription>
               <ProductEditions>
                 {product?.ingredients.length > 0 && (
                   <View style={styles.optionContainer}>

package/themes/kiosk/src/components/ProductForm/styles.tsx

@@ -40,7 +40,7 @@ export const ProductTitle = styled.View`
 `
 
 export const ProductDescription = styled.View`
-  margin-bottom: 30px;
+  margin-top: 10px;
 `
 
 export const ProductEditions = styled.View`

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

@@ -32,6 +32,7 @@ const ProductOptionUI = (props: any) => {
         <OText
           size={26}
           weight="bold"
+          style={{ width: '80%' }}
         >
           {option.name}
         </OText>

package/themes/kiosk/src/components/ProductOption/styles.tsx

@@ -12,4 +12,5 @@ export const WrapHeader = styled.View`
   background-color: ${(props: any) => props.theme.colors.paleGray};
   border-top-left-radius: 10px;
   border-top-right-radius: 10px;
+  width: 100%;
 `

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

@@ -25,12 +25,20 @@ import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome5';
 import FastImage from 'react-native-fast-image'
 
 export const BusinessControllerUI = (props: BusinessControllerParams) => {
-	const { 
-		business, 
-		handleClick, 
-		navigation, 
-		isBusinessOpen, 
-		style
+	const {
+		business,
+		handleClick,
+		navigation,
+		isBusinessOpen,
+		style,
+		businessHeader,
+		businessFeatured,
+		businessLogo,
+		businessReviews,
+		businessDeliveryPrice,
+		businessDeliveryTime,
+		businessPickupTime,
+		businessDistance
 	} = props;
 	const [{ parsePrice, parseDistance, parseNumber, optimizeImage }] = useUtils();
 	const [orderState] = useOrder();
@@ -116,12 +124,12 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 				<FastImage
 					style={{ height: 120 }}
 					source={{
-							uri: optimizeImage(business?.header, 'h_500,c_limit'),
-							priority: FastImage.priority.normal,
+						uri: optimizeImage(businessHeader || business?.header, 'h_500,c_limit'),
+						priority: FastImage.priority.normal,
 					}}
 					resizeMode={FastImage.resizeMode.cover}
 				/>
-				{business?.featured && (
+				{(businessFeatured ?? business?.featured) && (
 					<View style={styles.featured}>
 						<FontAwesomeIcon name="crown" size={26} color="gold" />
 					</View>
@@ -145,17 +153,17 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 						<FastImage
 							style={{ width: 56, height: 56 }}
 							source={{
-									uri: optimizeImage(business?.logo, 'h_150,c_limit'),
-									priority: FastImage.priority.normal,
+								uri: optimizeImage(businessLogo || business?.logo, 'h_150,c_limit'),
+								priority: FastImage.priority.normal,
 							}}
 							resizeMode={FastImage.resizeMode.cover}
 						/>
 					</BusinessLogo>
-					{business?.reviews?.total > 0 && (
+					{(businessReviews?.reviews?.total > 0 ?? business?.reviews?.total > 0) && (
 						<Reviews>
 							<OIcon src={theme.images.general.star} width={12} style={styles.starIcon} />
 							<OText size={10} style={{ lineHeight: 15 }}>
-								{parseNumber(business?.reviews?.total, { separator: '.' })}
+								{parseNumber(businessReviews?.reviews?.total ?? business?.reviews?.total, { separator: '.' })}
 							</OText>
 						</Reviews>
 					)}
@@ -182,14 +190,14 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 					) : (
 						<View style={styles.bullet}>
 							<OText size={10} color={theme.colors.textSecondary}>
-								{`${t('DELIVERY_FEE', 'Delivery fee')} ${parsePrice(business?.delivery_price) + ' \u2022 '}`}
+								{`${t('DELIVERY_FEE', 'Delivery fee')} ${parsePrice(businessDeliveryPrice ?? business?.delivery_price) + ' \u2022 '}`}
 							</OText>
 							<OText size={10} color={theme.colors.textSecondary}>{`${convertHoursToMinutes(
 								orderState?.options?.type === 1
-									? business?.delivery_time
-									: business?.pickup_time,
+									? (businessDeliveryTime ?? business?.delivery_time)
+									: (businessPickupTime ?? business?.pickup_time),
 							)} \u2022 `}</OText>
-							<OText size={10} color={theme.colors.textSecondary}>{parseDistance(business?.distance)}</OText>
+							<OText size={10} color={theme.colors.textSecondary}>{parseDistance(businessDistance ?? business?.distance)}</OText>
 						</View>
 					)}
 				</Metadata>

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

@@ -237,7 +237,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
 };
 
 const bpStyles = StyleSheet.create({
-  catWrap: { flexDirection: 'row', alignItems: 'center', height: 41, marginBottom: 19 },
+  catWrap: { flexDirection: 'row', alignItems: 'center', marginBottom: 19 },
   catIcon: {
     borderRadius: 7.6,
     shadowColor: '#000000',

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

@@ -72,6 +72,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 			borderWidth: 0,
 			backgroundColor: theme.colors.clear,
 			shadowColor: theme.colors.clear,
+			padding: 40,
 		},
 		searchIcon: {
 			borderWidth: 0,

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

@@ -166,8 +166,15 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 		return R * c
 	}
 
+	const resetInactivityTimeout = () => {
+		clearTimeout(timerId.current)
+		timerId.current = setInterval(() => {
+			getBusinesses(true)
+		}, 120000)
+	}
+
 	useEffect(() => {
-		if (businessesList.businesses.length > 0) {
+		if (!businessesList?.loading) {
 			const fb = businessesList.businesses.filter((b) => b.featured === true && b?.open);
 			const ary = [];
 			while (fb.length > 0) {
@@ -175,16 +182,6 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 			}
 			setFeaturedBusinesses(ary);
 		}
-	}, [businessesList.businesses]);
-
-	const resetInactivityTimeout = () => {
-		clearTimeout(timerId.current)
-		timerId.current = setInterval(() => {
-			getBusinesses(true)
-		}, 300000)
-	}
-
-	useEffect(() => {
 		resetInactivityTimeout()
 	}, [businessesList.loading])
 
@@ -207,27 +204,8 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 		})
 	}, [orderState?.options?.address?.location])
 
-	useEffect(() => {
-		const onFocusApp = (nextAppState: any) => {
-			if (
-				appState.current.match(/inactive|background/) &&
-				nextAppState === "active"
-			) {
-				getBusinesses(true);
-			}
-			appState.current = nextAppState;
-			setAppStateVisible(appState.current);
-		}
-
-		AppState.addEventListener("change", onFocusApp);
-		return () => {
-			AppState.removeEventListener('change', onFocusApp);
-		};
-	}, [])
-
 	useFocusEffect(
 		useCallback(() => {
-			getBusinesses(true)
 			resetInactivityTimeout()
 			return () => clearTimeout(timerId.current)
 		}, [navigation])
@@ -401,6 +379,14 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 							handleCustomClick={handleBusinessClick}
 							orderType={orderState?.options?.type}
 							navigation={navigation}
+							businessHeader={business?.header}
+							businessFeatured={business?.featured}
+							businessLogo={business?.logo}
+							businessReviews={business?.reviews}
+							businessDeliveryPrice={business?.delivery_price}
+							businessDeliveryTime={business?.delivery_time}
+							businessPickupTime={business?.pickup_time}
+							businessDistance={business?.distance}
 						/>
 					)
 				)}

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

@@ -254,8 +254,8 @@ const CheckoutUI = (props: any) => {
 					isVertical
 					onActionLeft={() => navigation?.canGoBack() && navigation.goBack()}
 					title={t('CHECKOUT', 'Checkout')}
-					style={styles.pagePadding}
-					titleStyle={{ marginLeft: 0, marginRight: 0 }}
+					titleStyle={{ marginLeft: 0, marginRight: 0, paddingLeft: 40 }}
+					btnStyle={{ marginLeft: 40, padding: 40 }}
 				/>
 				<ChContainer style={styles.pagePadding}>
 					<ChSection style={{ paddingTop: 0 }}>

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

@@ -1,8 +1,8 @@
 import React, { useEffect } from 'react';
 import {
-	BusinessList as BusinessesListingController,
+  BusinessList as BusinessesListingController,
   useLanguage,
-	useOrder
+  useOrder
 } from 'ordering-components/native';
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 import { View, ScrollView, Platform, Dimensions } from 'react-native';
@@ -24,117 +24,125 @@ const HighestRatedBusinessesUI = (props: HighestRatedBusinessesParams) => {
   } = props;
 
   const [, t] = useLanguage()
-	const [orderState] = useOrder();
+  const [orderState] = useOrder()
 
   const windowWidth = Dimensions.get('window').width;
 
   useEffect(() => {
-    if (businessesList?.loading || !isLoading) return 
+    if (businessesList?.loading || !isLoading) return
     getBusinesses(true)
   }, [isLoading])
 
   return (
     <>
-      <ListWrapper>
-        <OText size={16} mBottom={5} weight={Platform.OS === 'ios' ? '600' : 'bold'}>{t('HIGHEST_RATED', 'Highest rated')}</OText>
-        <OText size={12}>{t('TOP_RATINGS_AND_GREAT_SERVICE', 'Top ratings and great service')}</OText>
-        <ScrollView
-          showsHorizontalScrollIndicator={false}
-          nestedScrollEnabled
-          horizontal
-          style={{ height: 300 }}
-        >
-          {businessesList.loading ? (
-            <>
-              {[
-                ...Array(10).keys()
-              ].map((item, i) => (
-                <Placeholder
-                  Animation={Fade}
-                  key={i}
-                  style={{
-                    marginTop: 20,
-                    width: windowWidth - 100,
-                    paddingHorizontal: 5,
-                    height: '100%'
-                  }}>
-                  <View style={{ width: '100%' }}>
-                    <PlaceholderLine
-                      height={150}
-                      style={{ marginBottom: 20, borderRadius: 8 }}
-                    />
-                    <View style={{ paddingHorizontal: 10 }}>
-                      <View
-                        style={{
-                          flexDirection: 'row',
-                          justifyContent: 'space-between',
-                        }}>
-                        <PlaceholderLine
-                          height={15}
-                          width={40}
-                          style={{ marginBottom: 15 }}
-                        />
-                        <PlaceholderLine
-                          height={15}
-                          width={20}
-                          style={{ marginBottom: 15 }}
-                        />
-                      </View>
+
+      {businessesList.loading ? (
+        <>
+          <ScrollView
+            showsHorizontalScrollIndicator={false}
+            nestedScrollEnabled
+            horizontal
+            style={{ height: 300, paddingHorizontal: 40 }}
+          >
+            {[
+              ...Array(10).keys()
+            ].map((item, i) => (
+              <Placeholder
+                Animation={Fade}
+                key={i}
+                style={{
+                  marginTop: 20,
+                  width: windowWidth - 100,
+                  paddingHorizontal: 5,
+                  height: '100%'
+                }}>
+                <View style={{ width: '100%' }}>
+                  <PlaceholderLine
+                    height={150}
+                    style={{ marginBottom: 20, borderRadius: 8 }}
+                  />
+                  <View style={{ paddingHorizontal: 10 }}>
+                    <View
+                      style={{
+                        flexDirection: 'row',
+                        justifyContent: 'space-between',
+                      }}>
                       <PlaceholderLine
                         height={15}
-                        width={30}
-                        style={{ marginBottom: 10 }}
+                        width={40}
+                        style={{ marginBottom: 15 }}
                       />
                       <PlaceholderLine
                         height={15}
-                        width={80}
-                        style={{ marginBottom: 10 }}
+                        width={20}
+                        style={{ marginBottom: 15 }}
                       />
                     </View>
+                    <PlaceholderLine
+                      height={15}
+                      width={30}
+                      style={{ marginBottom: 10 }}
+                    />
+                    <PlaceholderLine
+                      height={15}
+                      width={80}
+                      style={{ marginBottom: 10 }}
+                    />
                   </View>
-                </Placeholder>
-              ))}
-            </>
-          ) : (
-            <>
-              {businessesList.businesses.length > 0 ? (
-                businessesList.businesses?.map(
-                  (business: any) => (
-                    <View
-                      key={business.id}
-                      style={{
-                        width: windowWidth - 100,
-                        paddingHorizontal: 5,
-                        height: '100%'
-                      }}
-                    >
-                      <BusinessController
-                        business={business}
-                        isBusinessOpen={business?.open}
-                        handleCustomClick={onBusinessClick}
-                        orderType={orderState?.options?.type}
-                        navigation={navigation}
-                      />
-                    </View>
+                </View>
+              </Placeholder>
+            ))}
+          </ScrollView>
+        </>
+      ) : (
+        <>
+          {businessesList.businesses.length > 0 && (
+            <ListWrapper>
+              <OText size={16} mBottom={5} weight={Platform.OS === 'ios' ? '600' : 'bold'}>{t('HIGHEST_RATED', 'Highest rated')}</OText>
+              <OText size={12}>{t('TOP_RATINGS_AND_GREAT_SERVICE', 'Top ratings and great service')}</OText>
+              <ScrollView
+                showsHorizontalScrollIndicator={false}
+                nestedScrollEnabled
+                horizontal
+                style={{ height: 300 }}
+              >
+                {
+                  businessesList.businesses?.map(
+                    (business: any) => (
+                      <View
+                        key={business.id}
+                        style={{
+                          width: windowWidth - 100,
+                          paddingHorizontal: 5,
+                          height: '100%'
+                        }}
+                      >
+                        <BusinessController
+                          business={business}
+                          isBusinessOpen={business?.open}
+                          handleCustomClick={onBusinessClick}
+                          orderType={orderState?.options?.type}
+                          navigation={navigation}
+                        />
+                      </View>
+                    )
                   )
-                )
-              ) : (
-                <NotFoundSource />
-              )}
-            </>
+                }
+              </ScrollView>
+            </ListWrapper>
           )}
-        </ScrollView>
-      </ListWrapper>
+        </>
+      )}
     </>
   )
 }
 
 export const HighestRatedBusinesses = (props: any) => {
-	const highestRatedBusinessesProps = {
-		...props,
-		UIComponent: HighestRatedBusinessesUI,
+  const highestRatedBusinessesProps = {
+    ...props,
+    UIComponent: HighestRatedBusinessesUI,
     initialOrderByValue: 'rating'
-	};
+  };
 
-	return <BusinessesListingController {...highestRatedBusinessesProps} />;
+  return <BusinessesListingController {...highestRatedBusinessesProps} />;
 }; 

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

@@ -332,30 +332,34 @@ const MessagesUI = (props: MessagesParams) => {
 		)
 	)
 
-	const renderSend = (props: any) => (
-		<Send
-			{...props}
-			disabled={(sendMessage?.loading || (message === '' && !image) || messages?.loading)}
-			alwaysShowSend
-			containerStyle={styles.containerSend}
-		>
-			<OIconButton
-				onClick={onSubmit}
-				style={{
-					height: 44,
-					width: 44,
-					borderRadius: 7.6,
-					opacity: (sendMessage?.loading || (message === '' && !image) || messages?.loading) ? 0.4 : 1,
-					borderColor: theme.colors.primary,
-					backgroundColor: theme.colors.primary,
-				}}
-				iconStyle={{ marginTop: 3, marginRight: 2 }}
-				icon={theme.images.general.enter}
-				disabled={(sendMessage?.loading || (message === '' && !image) || messages?.loading)}
-				disabledColor={theme.colors.white}
-			/>
-		</Send>
-	)
+	const renderSend = (props: any) => {
+		const isDisabled = (sendMessage?.loading || (message === '' && !image) || messages?.loading)
+		return (
+			<Send
+				{...props}
+				disabled={isDisabled}
+				alwaysShowSend
+				containerStyle={styles.containerSend}
+			>
+				<OIconButton
+					onClick={onSubmit}
+					style={{
+						height: 44,
+						width: 44,
+						borderRadius: 7.6,
+						opacity: isDisabled ? 0.2 : 1,
+						borderColor: isDisabled ? theme.colors.secondary : theme.colors.primary,
+						backgroundColor: isDisabled ? theme.colors.secondary : theme.colors.primary,
+					}}
+					iconStyle={{ marginTop: 3, marginRight: 2 }}
+					icon={theme.images.general.enter}
+					iconColor={isDisabled ? '#000' : '#fff'}
+					disabled={isDisabled}
+					disabledColor={theme.colors.secondary}
+				/>
+			</Send>
+		)
+	}
 
 	const renderBubble = (props: any) => (
 		<Bubble

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

@@ -218,7 +218,7 @@ export const OrderProgress = (props: any) => {
   const orderProgressProps = {
     ...props,
     UIComponent: OrderProgressUI,
-    orderStatus: [0, 3, 4, 7, 8, 9, 13, 14, 15, 18, 19, 20, 21, 22, 23],
+    orderStatus: [0, 3, 4, 7, 8, 9, 13, 14, 18, 19, 20, 21, 22, 23],
     useDefualtSessionManager: true,
     paginationSettings: {
       initialPage: 1,

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

@@ -239,8 +239,8 @@ export const OrdersOption = (props: OrdersOptionParams) => {
 		...props,
 		UIComponent: OrdersOptionUI,
 		orderStatus: props.preOrders ? [13] : props.activeOrders
-			? [0, 3, 4, 7, 8, 9, 14, 15, 18, 19, 20, 21, 22, 23]
-			: [1, 2, 5, 6, 10, 11, 12, 16, 17],
+			? [0, 3, 4, 7, 8, 9, 14, 18, 19, 20, 21, 22, 23]
+			: [1, 2, 5, 6, 10, 11, 12, 15, 16, 17],
 		useDefualtSessionManager: true,
 	}
 

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

@@ -85,7 +85,7 @@ export const PreviousOrders = (props: PreviousOrdersParams) => {
 				order: {
 					id: order?.id,
 					business_id: order?.business_id,
-					logo: order.business?.logo,
+					logo: order?.business?.logo,
 					driver: order?.driver,
 					products: order?.products,
 					review: order?.review,

package/themes/original/src/components/ProductForm/styles.tsx

@@ -6,9 +6,10 @@ export const WrapHeader = styled.View`
 `
 
 export const TopActions = styled.TouchableOpacity`
-	height: 44px;
+	height: 60px;
 	justify-content: center;
   padding-horizontal: 30px;
+  width: 80px;
 `;
 
 export const TopHeader = styled.View`

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

@@ -43,7 +43,7 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
     logoWrapper: {
       shadowColor: theme.colors.black,
       shadowRadius: 3,
-      shadowOffset: {width: 1, height: 4},
+      shadowOffset: { width: 1, height: 4 },
       elevation: 3,
       borderRadius: 8,
       shadowOpacity: 0.1,
@@ -108,11 +108,11 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
   }
 
   const qualificationList = [
-    { key: 1, text: t('TERRIBLE', 'Terrible'), percent: 0,  parentStyle: { left: '0%' }, isInnerStyle: false, pointerColor: false },
+    { key: 1, text: t('TERRIBLE', 'Terrible'), percent: 0, parentStyle: { left: '0%' }, isInnerStyle: false, pointerColor: false },
     { key: 2, text: t('BAD', 'Bad'), percent: 0.25, parentStyle: { left: '25%' }, isInnerStyle: true, pointerColor: true },
     { key: 3, text: t('OKAY', 'Okay'), percent: 0.5, parentStyle: { left: '50%' }, isInnerStyle: true, pointerColor: true },
     { key: 4, text: t('GOOD', 'Good'), percent: 0.75, parentStyle: { left: '75%' }, isInnerStyle: true, pointerColor: true },
-    { key: 5, text: t('GREAT', 'Great'), percent: 1, parentStyle: { right: '0%' }, isInnerStyle: false,  pointerColor: false }
+    { key: 5, text: t('GREAT', 'Great'), percent: 1, parentStyle: { right: '0%' }, isInnerStyle: false, pointerColor: false }
   ]
 
   const commentsList = reviewCommentList('order')
@@ -137,7 +137,7 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
     return found
   }
 
-  const handleContinueClick  = () => {
+  const handleContinueClick = () => {
     if (!order?.review) {
       onSubmit()
     } else {
@@ -183,7 +183,7 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
       comments.map(comment => _comments += comment.content + '. ')
     }
     let _comment
-    _comment = _comments  + extraComment
+    _comment = _comments + extraComment
     setStars({ ...stars, comments: _comment })
   }, [comments, extraComment])
 
@@ -214,7 +214,7 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
             <OText color={theme.colors.primary}>{t('ORDER_REVIEWED', 'This order has been already reviewed')}</OText>
           </View>
         ) : (
-          <View style={{flex: 1, justifyContent: 'flex-end'}}>
+          <View style={{ flex: 1, justifyContent: 'flex-end' }}>
             <FormReviews>
               <OText mBottom={13} color={theme.colors.textNormal}>{t('HOW_WAS_YOUR_ORDER', 'How was your order?')}</OText>
               <RatingBarContainer>
@@ -266,7 +266,7 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
                     style={{ height: 35, paddingLeft: 5, paddingRight: 5, marginHorizontal: 3, marginVertical: 10 }}
                     imgRightSrc={isSelectedComment(commentItem.key) ? theme.images.general.close : null}
                     imgRightStyle={{ tintColor: theme.colors.white, right: 5, margin: 5 }}
-                    onClick={() => handleChangeComment(commentItem) }
+                    onClick={() => handleChangeComment(commentItem)}
                   />
                 ))}
               </CommentsButtonGroup>
@@ -304,7 +304,7 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
             textStyle={{ color: theme.colors.white, paddingRight: 10 }}
             text={t('CONTINUE', 'Continue')}
             style={{ borderRadius: 8 }}
-			      imgRightSrc={theme.images.general.arrow_right}
+            imgRightSrc={theme.images.general.arrow_right}
             imgRightStyle={{ tintColor: theme.colors.white, right: 5, margin: 5 }}
             onClick={handleSubmit(handleContinueClick)}
           />
@@ -317,7 +317,8 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
 export const ReviewOrder = (props: ReviewOrderParams) => {
   const reviewOrderProps = {
     ...props,
-    UIComponent: ReviewOrderUI
+    UIComponent: ReviewOrderUI,
+    defaultStar: 5
   }
   return <ReviewOrderController {...reviewOrderProps} />
 }

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

@@ -74,7 +74,7 @@ const ReviewProductsUI = (props: ReviewProductParams) => {
           titleWrapStyle={{ paddingHorizontal: 0 }}
           titleStyle={{ marginRight: 0, marginLeft: 0 }}
         />
-        {order?.products.map((product: any) => (
+        {order?.products?.map((product: any) => (
           <SingleProductReview
             key={product.id}
             product={product}

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

@@ -141,8 +141,8 @@ const ProfileListUI = (props: ProfileParams) => {
 				{t('PROFILE', 'Profile')}
 			</OText>
 			<CenterView style={styles.pagePadding}>
-				<View style={styles.photo}>
-					{user?.photo ? (
+				{user?.photo && (
+					<View style={styles.photo}>
 						<FastImage
 							style={{ height: 60, width: 60, borderRadius: 8 }}
 							source={{
@@ -151,10 +151,8 @@ const ProfileListUI = (props: ProfileParams) => {
 							}}
 							resizeMode={FastImage.resizeMode.cover}
 						/>
-					) : (
-						<Ionicons name='person-outline' size={50} style={{ marginRight: 10 }} />
-					)}
-				</View>
+					</View>
+				)}
 				<View style={{ flexBasis: '70%' }}>
 					<OText size={20} lineHeight={30} weight={Platform.OS === 'ios' ? '500' : 'bold'} color={theme.colors.textNormal}>{user?.name} {user?.lastname}</OText>
 					<TouchableOpacity onPress={() => navigation.navigate('ProfileForm', { ...detailProps })}>

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

@@ -166,7 +166,15 @@ export interface BusinessControllerParams {
 	businessWillCloseSoonMinutes?: number
 	isBusinessClose?: number,
 	navigation?: any,
-	style?: ViewStyle
+	style?: ViewStyle,
+	businessHeader?: string,
+	businessFeatured?: boolean,
+	businessLogo?: string,
+	businessReviews?: any,
+	businessDeliveryPrice?: number,
+	businessDeliveryTime?: string,
+	businessPickupTime?: string,
+	businessDistance?: number
 }
 export interface BusinessProductsListingParams {
 	navigation?: any;