ordering-ui-react-native 0.17.99-release → 0.18.0-release

package/package.json

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

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

@@ -111,6 +111,7 @@ export const OrderContentComponent = (props: OrderContent) => {
   }
 
   const containsOnlyNumbers = (str: string) => {
+    str = str?.replace('+', '');
     return /^\d+$/.test(str);
   }
 
@@ -183,7 +184,7 @@ export const OrderContentComponent = (props: OrderContent) => {
                 <OLink
                   PressStyle={styles.linkWithIcons}
                   url={`tel:${containsOnlyNumbers(order?.business?.cellphone) ? order?.business?.cellphone : 'invalid'}`}
-                  shorcut={`${order?.business?.cellphone}`}
+                  shorcut={`${(!!order?.business?.country_phone_code && !order?.business?.cellphone?.includes('+')) ? '+' + order?.business?.country_phone_code : ''}${order?.business?.cellphone}`}
                   TextStyle={styles.textLink}
                 />
               </View>
@@ -193,8 +194,8 @@ export const OrderContentComponent = (props: OrderContent) => {
               <View style={styles.linkWithIcons}>
                 <OLink
                   PressStyle={styles.linkWithIcons}
-                  url={`tel:${containsOnlyNumbers(order?.business?.cellphone) ? order?.business?.phone : 'invalid'}`}
-                  shorcut={order?.business?.phone}
+                  url={`tel:${containsOnlyNumbers(order?.business?.phone) ? order?.business?.phone : 'invalid'}`}
+                  shorcut={`${(!!order?.business?.country_phone_code && !order?.business?.phone?.includes('+')) ? '+' + order?.business?.country_phone_code : ''}${order?.business?.phone}`}
                   TextStyle={styles.textLink}
                 />
               </View>
@@ -325,7 +326,7 @@ export const OrderContentComponent = (props: OrderContent) => {
             <OLink
               PressStyle={styles.linkWithIcons}
               url={`tel:${!!order?.customer?.country_phone_code ? '+' + order?.customer?.country_phone_code : ''} ${containsOnlyNumbers(order?.customer?.cellphone) ? order?.customer?.cellphone : 'invalid'}`}
-              shorcut={`${!!order?.customer?.country_phone_code ? '+' + order?.customer?.country_phone_code : ''} ${order?.customer?.cellphone}`}
+              shorcut={`${!!order?.customer?.country_phone_code ? '+' + order?.customer?.country_phone_code : ''}${order?.customer?.cellphone}`}
               TextStyle={styles.textLink}
             />
           </View>
@@ -335,8 +336,8 @@ export const OrderContentComponent = (props: OrderContent) => {
           <View style={styles.linkWithIcons}>
             <OLink
               PressStyle={styles.linkWithIcons}
-              url={`tel:${containsOnlyNumbers(order?.customer?.phone) ? order?.customer?.phone : 'invalid'}`}
-              shorcut={order?.customer?.phone}
+              url={`tel:${!!order?.customer?.country_phone_code ? '+' + order?.customer?.country_phone_code : ''} ${containsOnlyNumbers(order?.customer?.phone) ? order?.customer?.phone : 'invalid'}`}
+              shorcut={`${!!order?.customer?.country_phone_code ? '+' + order?.customer?.country_phone_code : ''}${order?.customer?.phone}`}
               TextStyle={styles.textLink}
             />
           </View>

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

@@ -122,8 +122,8 @@ const AddressFormUI = (props: AddressFormParams) => {
 			width: 16
 		},
 		wrapperNavbar: Platform.OS === 'ios'
-			? { paddingVertical: 0, paddingLeft: 40, paddingRight: 20 }
-			: { paddingVertical: 10, paddingLeft: 40, paddingRight: 20 }
+			? { paddingVertical: 0, paddingLeft: 20, paddingRight: 20 }
+			: { paddingVertical: 10, paddingLeft: 20, paddingRight: 20 }
 	});
 
 	const [, t] = useLanguage();

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

@@ -2,7 +2,7 @@ import styled from 'styled-components/native'
 
 export const AddressFormContainer = styled.View`
     flex: 1;
-    padding: 0px 40px 20px;
+    padding: 0px 20px 20px;
     background-color: ${(props: any) => props.theme.colors.backgroundPage};
     justify-content: space-between;
 `

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

@@ -3,10 +3,10 @@ import styled from 'styled-components/native'
 export const Container = styled.ScrollView`
     position: relative;
     flex: 1;
-	 paddingLeft: 40px;
-	 paddingRight: 40px;
-     margin-bottom: 40px;
-     padding-top: 10px;
+	paddingLeft: 20px;
+	paddingRight: 20px;
+    margin-bottom: 40px;
+    padding-top: 10px;
 `
 
 export const AddressItem = styled.TouchableOpacity`

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

@@ -72,7 +72,7 @@ export const BusinessBasicInformation = (
 			alignItems: 'flex-start'
 		},
 		businessInfo: {
-			paddingHorizontal: 40,
+			paddingHorizontal: 20,
 			paddingTop: isChewLayout ? 0 : 56,
 		},
 		bullet: {
@@ -95,7 +95,7 @@ export const BusinessBasicInformation = (
 			width: '100%',
 			top: 0,
 			zIndex: 100,
-			left: 40
+			left: 20
 		},
 		socialIcon: {
 			borderRadius: 3,

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

@@ -11,7 +11,7 @@ export const BusinessHeader = styled.ImageBackground`
 `;
 export const BusinessLogo = styled.View`
   position: absolute;
-  start: 40px;
+  start: 20px;
   top: -36px;
   z-index: 50;
   box-shadow: 0 0 2px ${Platform.OS == 'android' ? '#000000DD' : '#0000001A'};

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

@@ -17,7 +17,7 @@ export const MediaWrapper = styled.ScrollView`
   height: 127px;
 `
 export const InnerContent = styled.View`
-  padding: 20px 40px;
+  padding: 20px;
 `
 export const WrapScheduleBlock = styled.View`
   margin: 20px 0;
@@ -36,4 +36,4 @@ export const DivideView = styled.View`
 	height: 8px;
 	background-color: ${(props: any) => props.theme.colors.backgroundGray100};
 	margin-horizontal: -40px;
-`;
+`;

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

@@ -24,6 +24,8 @@ export const BusinessItemAccordion = (props: any) => {
 		checkoutButtonDisabled,
 		isMultiCheckout,
 		isFromUpselling,
+		changeActiveState,
+		isActive,
 		isGiftCart
 	} = props
 
@@ -39,14 +41,13 @@ export const BusinessItemAccordion = (props: any) => {
 	const isProducts = cart?.products?.length
 	const isBusinessChangeEnabled = configs?.cart_change_business_validation?.value === '1'
 
-	const [isActive, setActiveState] = useState(!!singleBusiness)
 	const [viewedCart, setViewedCart] = useState<any>(null)
 
 	useEffect(() => {
 		const cartsArray = Object.values(orderState?.carts)
 		const cartsLength = cartsArray.filter((cart: any) => cart.products.length > 0).length ?? 0
 		if (cartsLength === 1) {
-			setActiveState(!isClosed)
+			changeActiveState(!isClosed, cart?.uuid)
 		}
 	}, [orderState?.carts, isClosed])
 
@@ -69,7 +70,7 @@ export const BusinessItemAccordion = (props: any) => {
 		<BIContainer isClosed={isClosed} isMultiCheckout={isMultiCheckout} checkoutVisible={!isActive && !isClosed && !!isProducts && !checkoutButtonDisabled}>
 			<BIHeader
 				isClosed={isClosed}
-				onPress={() => !isClosed ? setActiveState(!isActive) : isClosed}
+				onPress={() => !isClosed ? changeActiveState(!isClosed, cart?.uuid) : isClosed}
 				activeOpacity={1}
 			>
 				<BIInfo>

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

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import { useLanguage, BusinessSearchList, useOrder, useUtils, useEvent, showToast, ToastType } from 'ordering-components/native'
-import { ScrollView, StyleSheet, TouchableOpacity, View, Dimensions } from 'react-native'
+import { ScrollView, StyleSheet, TouchableOpacity, View, Dimensions, Platform } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { useTheme } from 'styled-components/native'
 import { HeaderTitle, OButton, OModal, OText } from '../shared'
@@ -92,7 +92,7 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
     },
     filterContainer: {
       maxHeight: screenHeight - 150,
-      paddingHorizontal: 40,
+      paddingHorizontal: 20,
       width: '100%'
     },
     searchInput: {
@@ -259,7 +259,6 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
         display: 'flex',
         flexDirection: 'row',
         alignItems: 'center',
-        paddingHorizontal: hideBrowse && !isChewLayout ? 40 : 20,
       }}>
         {hideBrowse && !isChewLayout && (
           <OButton
@@ -285,10 +284,10 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
           />
         )}
         <HeaderTitle ph={20} text={t('SEARCH', 'Search')} />
-        <AntDesignIcon name='filter' size={18} style={{ marginLeft: 'auto', marginTop: 55, paddingHorizontal: 20 }} onPress={() => handleOpenfilters()} />
+        <AntDesignIcon name='filter' size={18} style={{ marginLeft: 'auto', marginTop: Platform.OS === 'ios' ? 35 : 55, paddingHorizontal: 20 }} onPress={() => handleOpenfilters()} />
       </View>
       <BContainer
-        style={{ paddingHorizontal: isChewLayout ? 20 : 40 }}
+        style={{ paddingHorizontal: 20 }}
       >
         <SearchWrapper>
           <SearchBar

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

@@ -1,7 +1,7 @@
 import styled, { css } from 'styled-components/native'
 
 export const BContainer = styled.View`
-  padding: 20px 40px;
+  padding: 20px;
 `
 
 export const SearchWrapper = styled.View`

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

@@ -92,7 +92,7 @@ const BusinessProductsCategoriesUI = (props: any) => {
 			ref={tabsRef}
 			horizontal
 			style={{ ...styles.container, borderBottomWidth: loading ? 0 : 1 }}
-			contentContainerStyle={{ paddingHorizontal: 40 }}
+			contentContainerStyle={{ paddingHorizontal: 20 }}
 			showsHorizontalScrollIndicator={false}
 			onScroll={(e: any) => setScrollOffsetX(e.nativeEvent.contentOffset.x)}
 			scrollEventThrottle={16}

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

@@ -45,6 +45,7 @@ import { ProfessionalFilter } from '../ProfessionalFilter';
 import { ServiceForm } from '../ServiceForm';
 import { BusinessesListing } from '../BusinessesListing/Layout/Original'
 import { PageBanner } from '../PageBanner'
+import { NavBack } from 'ordering-ui-react-native/src/components/OrderDetails/styles';
 
 const PIXELS_TO_SCROLL = 2000
 
@@ -72,7 +73,8 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
     handleUpdateProfessionals,
     handleChangeProfessionalSelected,
     onBusinessClick,
-    businessSingleId
+    businessSingleId,
+    productModal
   } = props
 
   const insets = useSafeAreaInsets()
@@ -112,7 +114,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
     },
     searchIcon: {
       borderWidth: 0,
-      padding: 15,
+      padding: 10,
       justifyContent: 'center',
       shadowColor: theme.colors.clear,
     },
@@ -143,8 +145,10 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 
   const isCheckoutMultiBusinessEnabled: Boolean = configs?.checkout_multi_business_enabled?.value === '1'
   const isQuickAddProduct = configs?.add_product_with_one_click?.value === '1'
+  const openCarts = (Object.values(orderState?.carts)?.filter((cart: any) => cart?.products && cart?.products?.length && cart?.status !== 2 && cart?.valid_schedule && cart?.valid_products && cart?.valid_address && cart?.valid_maximum && cart?.valid_minimum && !cart?.wallets) || null) || []
   const currentCart: any = Object.values(orderState.carts).find((cart: any) => cart?.business?.slug === business?.slug) ?? {}
   const isOpenFiltProducts = isOpenSearchBar && !!searchValue
+  const filtProductsHeight = Platform.OS === 'ios' ? 65 : 30
   const viewOrderButtonVisible = !loading && auth && currentCart?.products?.length > 0 && categoryState.products.length !== 0
 
   const onRedirect = (route: string, params?: any) => {
@@ -189,8 +193,9 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
       onRedirect('ProductDetails', {
         product: product,
         businessSlug: business.slug,
-        businessId: business.id,
-        productAddedToCartLength
+        businessId: business.id || product?.category?.business_id,
+        productAddedToCartLength,
+        isRedirect: false
       })
     }
     events.emit('product_clicked', product)
@@ -386,6 +391,19 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
     }
   }, [])
 
+  useEffect(() => {
+    if (!business && !loading && !error) {
+      showToast(ToastType.Error, t('BUSINESS_NOT_FOUND', 'Business not found'))
+      navigation.navigate('BusinessList')
+    }
+  }, [business, error, loading])
+
+  useEffect(() => {
+    if (productModal?.product && !productModal?.loading && !productModal?.error) {
+      onProductClick(props?.productModal?.product)
+    }
+  }, [productModal])
+
   return (
     <>
       <View style={{ flex: 1, backgroundColor: backgroundColor }}>
@@ -473,8 +491,8 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
         {business?.categories?.length > 0 && isOpenFiltProducts && (
           <FiltProductsContainer
             style={{
-              height: Dimensions.get('window').height - (keyboardHeight + (Platform.OS === 'ios' ? 100 : 80)),
-              top: Platform.OS === 'ios' ? searchBarHeight + insets.top : searchBarHeight
+              height: Dimensions.get('window').height - filtProductsHeight - keyboardHeight - (keyboardHeight > 0 && viewOrderButtonVisible ? 55 : 0),
+              top: Platform.OS === 'ios' ? (searchBarHeight - 10) + insets.top : searchBarHeight,
             }}
             contentContainerStyle={{ flexGrow: 1 }}
           >
@@ -512,9 +530,6 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
             </View>
           </FiltProductsContainer>
         )}
-        {isOpenFiltProducts && (
-          <BackgroundGray isIos={Platform.OS === 'ios'} style={{ marginTop: insets.top + 60 }} />
-        )}
         <IOScrollView
           stickyHeaderIndices={[business?.professionals?.length > 0 ? 4 : 3]}
           style={{
@@ -553,7 +568,9 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
               />
             </ProfessionalFilterWrapper>
           )}
-          <PageBanner position='app_business_page' navigation={navigation} />
+          {businessState?.business?.id && (
+            <PageBanner position='app_business_page' businessId={businessState?.business?.id} navigation={navigation} />
+          )}
           <View
             style={{
               height: 8,
@@ -581,7 +598,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
             <>
               <WrapContent
                 onLayout={(event: any) => setProductListLayout(event.nativeEvent.layout)}
-                style={{ paddingHorizontal: isChewLayout ? 20 : 40 }}
+                style={{ paddingHorizontal: 20 }}
               >
                 <BusinessProductsList
                   categories={[
@@ -638,6 +655,9 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
               </WrapContent>
             </>
           )}
+          {isOpenFiltProducts && (
+            <BackgroundGray isIos={Platform.OS === 'ios'} />
+          )}
         </IOScrollView>
         {viewOrderButtonVisible && (
           <View style={{ marginBottom: 0 }}>
@@ -695,7 +715,6 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
           professionalList={business?.professionals}
           professionalSelected={professionalSelected}
           handleChangeProfessional={handleChangeProfessionalSelected}
-          handleChangeProfessional={handleChangeProfessionalSelected}
           handleUpdateProfessionals={handleUpdateProfessionals}
           onSave={() => setOpenService(false)}
           onClose={() => setOpenService(false)}

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

@@ -50,7 +50,7 @@ export const BackgroundGray = styled.View`
 `
 
 export const ProfessionalFilterWrapper = styled.View`
-  padding-left: 40px;
+  padding-left: 20px;
   margin-bottom: 35px;
 `
 
@@ -63,6 +63,6 @@ export const NearBusiness = styled.View`
 export const TopActions = styled.TouchableOpacity`
 	height: 60px;
 	justify-content: center;
-  padding-horizontal: 30px;
+  padding-horizontal: 20px;
   width: 100px;
 `;

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

@@ -109,7 +109,7 @@ const BusinessReviewsUI = (props: BusinessReviewsParams) => {
 	return (
 		<BusinessReviewsContainer>
 			<BusinessReviewContent
-				contentContainerStyle={{ paddingHorizontal: 40, paddingVertical: 27 }}>
+				contentContainerStyle={{ paddingHorizontal: 20, paddingVertical: 27 }}>
 				{reviewsList.error ? (
 					<OText size={16}>{t('ERROR_UNKNOWN', 'An error has ocurred')}</OText>
 				) : (

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

@@ -415,7 +415,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 						<ScrollView
 							showsHorizontalScrollIndicator={false}
 							nestedScrollEnabled
-							horizontal contentContainerStyle={{ paddingHorizontal: 40 }}>
+							horizontal contentContainerStyle={{ paddingHorizontal: 20 }}>
 							{featuredBusiness.map((bAry: any, idx) => (
 								<View key={'f-listing_' + idx}>
 									<BusinessFeaturedController

package/themes/original/src/components/BusinessesListing/Layout/Appointment/styles.tsx

@@ -54,13 +54,13 @@ export const WrapMomentOption = styled.TouchableOpacity`
 export const HeaderWrapper = styled.ImageBackground`
 	width: 100%;
 	height: 370px;
-	padding: 20px 40px;
+	padding: 20px;
 	background-color: transparent;
 `;
 
 export const ListWrapper = styled.View`
 	background-color: ${(props: any) => props.theme.colors.backgroundLight};
-	padding-horizontal: 40px;
+	padding-horizontal: 20px;
 `;
 
 export const FeaturedWrapper = styled.View`
@@ -72,7 +72,7 @@ export const FeaturedWrapper = styled.View`
 export const OrderProgressWrapper = styled.View`
   margin-top: 37px;
   margin-bottom: 20px;
-	padding-horizontal: 40px;
+	padding-horizontal: 20px;
 `
 
 export const FarAwayMessage = styled.View`
@@ -98,10 +98,10 @@ export const FilterWrapper = styled.View`
 `
 
 export const ServiceWrapper = styled.View`
-  padding-horizontal: 40px;
+  padding-horizontal: 20px;
 `
 
 export const PriceWrapper = styled.View`
-  padding-horizontal: 40px;
+  padding-horizontal: 20px;
   margin-top: 30px;
 `

package/themes/original/src/components/BusinessesListing/Layout/Original/FlatListBusinessListFooter.tsx

@@ -11,7 +11,7 @@ export const FlatListBusinessListFooter = (props : any) => {
     } = props
     return (
         <>
-            <ListWrapper style={{ paddingHorizontal: isChewLayout ? 20 : 40 }}>
+            <ListWrapper style={{ paddingHorizontal: 20 }}>
                 {(businessesList.loading || !businessesList?.fetched) && (
                     <>
                         {[

package/themes/original/src/components/BusinessesListing/Layout/Original/FlatListBusinessListHeader.tsx

@@ -133,7 +133,7 @@ export const FlatListBusinessListHeader = (props: any) => {
             backgroundColor: theme.colors.white,
             borderColor: theme.colors.backgroundGray,
             borderRadius: 8,
-            marginHorizontal: 40,
+            marginHorizontal: 20,
             minHeight: 45,
             paddingVertical: 5,
             paddingHorizontal: 20,
@@ -165,7 +165,7 @@ export const FlatListBusinessListHeader = (props: any) => {
             )}
             <View style={{
                 height: !isPreOrderSetting && isChewLayout ? 150 : isChewLayout ? 200 : isFarAway ? 150 : 100,
-                marginTop: isChewLayout ? 0 : Platform.OS == 'ios' ? 0 : 50,
+                marginTop: 0,
                 backgroundColor: isChewLayout ? theme?.colors?.chew : theme.colors?.white
             }}
             >
@@ -276,7 +276,7 @@ export const FlatListBusinessListHeader = (props: any) => {
                             bgHeaderHeight={bgHeaderHeight}
                         >
                             {!auth && (
-                                <TouchableOpacity onPress={() => navigation?.canGoBack() && navigation.goBack()} style={{ position: 'absolute', marginStart: 40, paddingVertical: 20 }}>
+                                <TouchableOpacity onPress={() => navigation?.canGoBack() && navigation.goBack()} style={{ position: 'absolute', marginStart: 20, paddingVertical: 20 }}>
                                     <OIcon src={theme.images.general.arrow_left} color={theme.colors.textNormal} />
                                 </TouchableOpacity>
                             )}
@@ -284,7 +284,7 @@ export const FlatListBusinessListHeader = (props: any) => {
                     ) : (
                         <>
                             {!auth && (
-                                <TouchableOpacity onPress={() => navigation?.canGoBack() && navigation.goBack()} style={{ position: 'absolute', marginStart: 40, paddingVertical: 20 }}>
+                                <TouchableOpacity onPress={() => navigation?.canGoBack() && navigation.goBack()} style={{ position: 'absolute', marginStart: 20, paddingVertical: 20 }}>
                                     <OIcon src={theme.images.general.arrow_left} color={theme.colors.textNormal} />
                                 </TouchableOpacity>
                             )}
@@ -324,12 +324,12 @@ export const FlatListBusinessListHeader = (props: any) => {
             {
                 !businessId && !props.franchiseId && featuredBusiness && featuredBusiness.length > 0 && (
                     <FeaturedWrapper>
-                        <OText size={16} style={{ marginLeft: 40 }} weight={Platform.OS === 'ios' ? '600' : 'bold'}>{t('BUSINESS_FEATURE', 'Featured business')}</OText>
+                        <OText size={16} style={{ marginLeft: 20 }} weight={Platform.OS === 'ios' ? '600' : 'bold'}>{t('BUSINESS_FEATURE', 'Featured business')}</OText>
                         <ScrollView
                             showsHorizontalScrollIndicator={false}
                             nestedScrollEnabled
                             horizontal
-                            contentContainerStyle={{ paddingHorizontal: 40 }}
+                            contentContainerStyle={{ paddingHorizontal: 20 }}
                         >
                             {featuredBusiness.map((bAry: any, idx: number) => (
                                 <View key={'f-listing_' + idx}>
@@ -372,7 +372,7 @@ export const FlatListBusinessListHeader = (props: any) => {
             <PageBanner position='app_business_listing' navigation={navigation} />
             <View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100 }} />
 
-            <ListWrapper style={{ paddingHorizontal: isChewLayout ? 20 : 40 }}>
+            <ListWrapper style={{ paddingHorizontal: 20 }}>
                 {!businessId && !isAllCategoriesHidden && (
                     <BusinessTypeFilter
                         images={props.images}

package/themes/original/src/components/BusinessesListing/Layout/Original/styles.tsx

@@ -61,7 +61,7 @@ export const WrapMomentOption = styled.TouchableOpacity`
 export const HeaderWrapper = styled.ImageBackground`
 	width: 100%;
   height: 270px;
-	padding: 20px 40px;
+	padding: 20px;
 	background-color: transparent;
 `;
 

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

@@ -9,7 +9,7 @@ export const Container = styled.View`
 `
 
 export const ItemListing = styled.ScrollView`
-  padding: 0 40px;
+  padding: 0 20px;
   margin: 0 0 140px;
 `
 
@@ -19,7 +19,7 @@ export const TopHeader = styled.View`
   align-items: center;
   justify-content: space-between;
   z-index: 1;
-  padding: 0 40px;
+  padding: 0 20px;
 `
 
 export const HeaderItem = styled.TouchableOpacity`

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

@@ -357,7 +357,7 @@ const CheckoutUI = (props: any) => {
 
 	useEffect(() => {
 		if (cart?.products?.length === 0) {
-			if (cart?.business?.slug) {
+			if (cart?.business_id !== null) {
 				onNavigationRedirect('Business', { store: cart?.business?.slug, header: null, logo: null, fromMulti: props.fromMulti })
 			} else {
 				onNavigationRedirect('Wallets')

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

@@ -113,3 +113,20 @@ export const CartHeader = styled.View`
   justify-content: space-between;
   margin-bottom: 10px;
 `
+
+export const TopActions = styled.TouchableOpacity`
+	height: 60px;
+	justify-content: center;
+  min-width: 30px;
+  padding-right: 15px;
+`;
+
+export const TopHeader = styled.View`
+  width: 100%;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  z-index: 1;
+  height: 60px;
+  min-height: 60px;
+`

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

@@ -2,7 +2,7 @@ import styled, { css } from 'styled-components/native'
 
 export const Container = styled.View`
   width: 100%;
-  padding: 0 40px;
+  padding: 0 20px;
   justify-content: space-between;
   padding-bottom: 12px;
 

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

@@ -34,15 +34,14 @@ export const Favorite = (props: any) => {
   }
 
   return (
-    <Container
-      pdng={Platform.OS === 'ios' ? '10px' : '20px'}
-    >
+    <Container>
       <NavBar
         title={t('FAVORITE', 'Favorite')}
         titleAlign={'center'}
         onActionLeft={goToBack}
         showCall={false}
-        paddingTop={10}
+        paddingTop={Platform.OS === 'ios' ? 20 : 10}
+        style={{ paddingVertical: 0 }}
         btnStyle={{ paddingLeft: 0 }}
       />
       <TabContainer>

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

@@ -16,7 +16,5 @@ export const Tab = styled.TouchableOpacity`
 `
 
 export const Container = styled.View`
-  padding-horizontal: 40px;
   padding-bottom: 20px;
-  padding-top: ${(props: any) => props.pdng};
 `

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

@@ -5,7 +5,7 @@ export const Container = styled.View`
   bottom: 0px;
   left: 0;
   right: 0;
-  padding: 12px 40px;
+  padding: 12px 20px;
   flex-direction: row;
   border-top-width: 1px;
   border-color: ${(props: any) => props.theme.colors.border};

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

@@ -61,7 +61,7 @@ export const GPSButton = (props: any) => {
     if (trackingStatus === 'not-determined') {
       trackingStatus = await requestTrackingPermission()
     }
-    if (trackingStatus === 'authorized' || trackingStatus === 'unavailable') {
+    if ( trackingStatus === 'authorized' || trackingStatus === 'denied' || trackingStatus === 'unavailable') {
       setLoading(true)
       Geolocation.getCurrentPosition((pos) => {
         geoCodePosition(pos.coords)

package/themes/original/src/components/GiftCard/PurchaseGiftCard/styles.tsx

@@ -2,7 +2,7 @@ import styled from 'styled-components/native'
 
 export const Container = styled.View`
   width: 100%;
-  padding-horizontal: 40px;
+  padding-horizontal: 20px;
   flex: 1;
   padding-bottom: 30px;
 `

package/themes/original/src/components/GiftCard/RedeemGiftCard/styles.tsx

@@ -1,7 +1,7 @@
 import styled from 'styled-components/native'
 
 export const Container = styled.View`
-  padding-horizontal: 40px;
+  padding-horizontal: 20px;
 `
 export const FormController = styled.View`
   margin-bottom: 25px;