ordering-ui-react-native 0.21.63 → 0.21.64-release

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

@@ -26,9 +26,9 @@ import { BusinessTypeFilterParams } from '../../types';
 const windowWidth = Dimensions.get('window').width;
 
 export const BusinessTypeFilterUI = (props: BusinessTypeFilterParams) => {
-	const { 
-		typesState, 
-		currentTypeSelected, 
+	const {
+		typesState,
+		currentTypeSelected,
 		handleChangeBusinessType,
 		setBusinessTypes,
 		isAppoint
@@ -38,13 +38,13 @@ export const BusinessTypeFilterUI = (props: BusinessTypeFilterParams) => {
 
 	const theme = useTheme();
 	const [isOpenAllCategories, setIsOpenAllCategories] = useState(false)
-	const defaultImage = (name : string) => theme.images?.categories?.[name.toLowerCase().replace(' ', '')]
+	const defaultImage = (name: string) => theme.images?.categories?.[name.toLowerCase().replace(' ', '')]
 
 	useEffect(() => {
-		if(typesState?.types?.length > 0){
-		  setBusinessTypes && setBusinessTypes(typesState?.types)
+		if (typesState?.types?.length > 0) {
+			setBusinessTypes && setBusinessTypes(typesState?.types)
 		}
-	  }, [typesState])
+	}, [typesState])
 
 	const handleChangeServiceType = (serviceId: any) => {
 		if (serviceId === currentTypeSelected) {
@@ -119,10 +119,11 @@ export const BusinessTypeFilterUI = (props: BusinessTypeFilterParams) => {
 									<OButton
 										key={i}
 										bgColor={(currentTypeSelected === businessType?.id) ? theme.colors.primary : theme.colors.backgroundGray200}
+										borderColor={(currentTypeSelected === businessType?.id) ? theme.colors.primary : theme.colors.backgroundGray200}
 										onClick={() => handleChangeServiceType(businessType?.id)}
 										text={`${businessType?.name} ${(currentTypeSelected === businessType?.id) ? ' X' : ''}`}
 										style={styles.businessType}
-										textStyle={{ fontSize: 10, color: (currentTypeSelected === businessType?.id) ? theme.colors.backgroundLight : theme.colors.textNormal }}
+										textStyle={{ fontSize: 10, color: (currentTypeSelected === businessType?.id) ? theme.colors.white : theme.colors.textNormal }}
 									/>
 								))}
 							</ServiceWrapper>

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

@@ -392,10 +392,11 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 							<OButton
 								key={i}
 								bgColor={(priceLevelSelected === price?.level) ? theme.colors.primary : theme.colors.backgroundGray200}
+								borderColor={(priceLevelSelected === price?.level) ? theme.colors.primary : theme.colors.backgroundGray200}
 								onClick={() => handleChangePriceLevel(price?.level)}
 								text={`${price.content} ${(priceLevelSelected === price?.level) ? ' X' : ''}`}
 								style={styles.priceLevel}
-								textStyle={{ fontSize: 10, color: (priceLevelSelected === price?.level) ? theme.colors.backgroundLight : theme.colors.textNormal }}
+								textStyle={{ fontSize: 10, color: (priceLevelSelected === price?.level) ? theme.colors.backgroundLight : theme.colors.black }}
 							/>
 						))}
 					</ScrollView>

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

@@ -168,7 +168,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 			setFeaturedBusinesses(ary);
 		}
 		resetInactivityTimeout()
-	}, [businessesList.loading])
+	}, [businessesList.loading, businessesList?.businesses])
 
 	const handleOnRefresh = () => {
 		if (!businessesList.loading) {

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

@@ -60,7 +60,7 @@ export const WrapMomentOption = styled.TouchableOpacity`
 
 export const HeaderWrapper = styled.ImageBackground`
 	width: 100%;
-  height: ${({ bgHeaderHeight } : any) => bgHeaderHeight || '270px'};
+  height: 270px;
 	padding: 20px;
 	background-color: transparent;
 `;

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

@@ -1,4 +1,3 @@
-
 import React, { useState, useEffect } from 'react'
 import { useOrder, useSession, useLanguage, useConfig } from 'ordering-components/native';
 

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

@@ -19,7 +19,7 @@ import { CouponControl } from '../CouponControl';
 import { OButton, OInput, OModal, OText } from '../shared';
 import { UpsellingProducts } from '../UpsellingProducts';
 import { verifyDecimals } from '../../utils';
-import { ActivityIndicator, TouchableOpacity, View } from 'react-native';
+import { ActivityIndicator, TouchableOpacity, View, Vibration } from 'react-native';
 import AntIcon from 'react-native-vector-icons/AntDesign'
 import { TaxInformation } from '../TaxInformation';
 import { CartStoresListing } from '../CartStoresListing';
@@ -114,6 +114,7 @@ const CartUI = (props: any) => {
   }
 
   const handleUpsellingPage = (individualCart: any) => {
+    Vibration.vibrate(100)
     const isProductCartParam = !!individualCart?.products?.length
     setOpenUpselling(false)
     setCanOpenUpselling(false)
@@ -121,7 +122,7 @@ const CartUI = (props: any) => {
     const cartsAvailable: any = Object.values(orderState?.carts)
       ?.filter((_cart: any) => _cart?.valid && _cart?.status !== 2 && _cart?.products?.length)
       ?.filter((_c: any) => !isProductCartParam ? _c.uuid !== individualCart?.uuid : _c)
-    if (cartsAvailable.length === 1 || !isMultiCheckout) {
+    if (cartsAvailable.length === 1 || !isMultiCheckout || !cart?.business_id) {
       const cart = isMultiCheckout ? cartsAvailable[0] : individualCart
       onNavigationRedirect('CheckoutNavigator', {
         screen: 'CheckoutPage',
@@ -196,6 +197,19 @@ const CartUI = (props: any) => {
     return acc = acc
   }, cart?.subtotal)
 
+  const handleClickCheckout = () => {
+    Vibration.vibrate(100)
+    if (cart?.business_id) {
+      setOpenUpselling(true)
+    } else {
+      onNavigationRedirect('CheckoutNavigator', {
+        screen: 'CheckoutPage',
+        cartUuid: cart?.uuid,
+        cartTotal: cart?.total
+      }, true)
+    }
+  }
+
   useEffect(() => {
     const limitDays = parseInt(preorderMaximumDays ?? configs?.max_days_preorder?.value, 10)
     const currentDate = new Date()
@@ -211,7 +225,7 @@ const CartUI = (props: any) => {
 
   return (
     <CContainer>
-      {openUpselling && (
+      {!!openUpselling && (
         <UpsellingProducts
           handleUpsellingPage={handleUpsellingPage}
           openUpselling={openUpselling}
@@ -231,8 +245,11 @@ const CartUI = (props: any) => {
         handleClearProducts={handleClearProducts}
         handleCartOpen={handleCartOpen}
         onNavigationRedirect={props.onNavigationRedirect}
-        handleChangeStore={() => setOpenChangeStore(true)}
-        handleClickCheckout={() => setOpenUpselling(true)}
+        handleChangeStore={() => {
+          Vibration.vibrate(100)
+          setOpenChangeStore(true)
+        }}
+        handleClickCheckout={() => handleClickCheckout()}
         checkoutButtonDisabled={(openUpselling && !canOpenUpselling) || subtotalWithTaxes < cart?.minimum || !cart?.valid_address}
         isMultiCheckout={isMultiCheckout}
         isFromUpselling={isFromUpselling}
@@ -532,7 +549,7 @@ const CartUI = (props: any) => {
             />
           </View>
         )}
-        {!isMultiCheckout && (
+        {(!isMultiCheckout || !cart?.business_id) && (
           <>
             {cart?.valid_products ? (
               <CheckoutAction>
@@ -545,11 +562,11 @@ const CartUI = (props: any) => {
                     `${t('MINIMUN_SUBTOTAL_ORDER', 'Minimum subtotal order:')} ${parsePrice(cart?.minimum)}`
                   )}
                   bgColor={(subtotalWithTaxes < cart?.minimum || !cart?.valid_address) ? theme.colors.secundary : theme.colors.primary}
+                  borderColor={(subtotalWithTaxes < cart?.minimum || !cart?.valid_address) ? theme.colors.secundary : theme.colors.primary}
                   isDisabled={(openUpselling && !canOpenUpselling) || subtotalWithTaxes < cart?.minimum || !cart?.valid_address}
-                  borderColor={theme.colors.primary}
                   imgRightSrc={null}
-                  textStyle={{ color: '#fff', textAlign: 'center', flex: 1 }}
-                  onClick={() => setOpenUpselling(true)}
+                  textStyle={{ textAlign: 'center', flex: 1 }}
+                  onClick={() => handleClickCheckout()}
                   style={{ width: '100%', flexDirection: 'row', justifyContent: 'center', borderRadius: 7.6, shadowOpacity: 0 }}
                 />
               </CheckoutAction>

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

@@ -1,5 +1,5 @@
-import React, { useCallback, useState } from 'react';
-import { View } from 'react-native';
+import React, { useCallback, useEffect, useState } from 'react';
+import { Vibration, View } from 'react-native';
 import { useLanguage, useConfig, useUtils, useOrder } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import { CCContainer, CCNotCarts, CCList, CheckoutAction, ChCartsTotal } from './styles';
@@ -13,7 +13,8 @@ export const CartContent = (props: any) => {
 	const {
 		onNavigationRedirect,
 		singleBusiness,
-		businessSlug
+		businessSlug,
+		navigation
 	} = props
 
 	const theme = useTheme();
@@ -22,7 +23,7 @@ export const CartContent = (props: any) => {
 	const [{ parsePrice }] = useUtils();
 	const [isCartsLoading, setIsCartsLoading] = useState(false)
 	const [cartsOpened, setCartsOpened] = useState([])
-	const [{ carts: cartsContext }] = useOrder();
+	const [{ carts: cartsContext }, { confirmCart }] = useOrder();
 	const cartsList =
 		(cartsContext &&
 			Object.values(cartsContext).filter((cart: any) => cart.products.length > 0)) ??
@@ -32,12 +33,13 @@ export const CartContent = (props: any) => {
 		: cartsList
 	const isOrderStateCarts = !!carts
 	const isMultiCheckout = configs?.checkout_multi_business_enabled?.value === '1'
-	const cartsAvailable: any = Object.values(carts || {})?.filter((cart: any) => cart?.valid && cart?.status !== 2)
+	const cartsAvailable: any = Object.values(carts || {})?.filter((cart: any) => cart?.valid && cart?.status !== 2 && cart?.business_id)
 	const totalCartsPrice = cartsAvailable?.length && cartsAvailable.reduce((total: any, cart: any) => { return total + cart?.total }, 0)
 	const totalCartsFee = cartsAvailable?.length && cartsAvailable
 		?.filter((cart: any) => cart?.status !== 1 && cart?.valid && cart?.products?.length)
 		?.reduce((total: any, cart: any) => { return total + (cart?.delivery_price_with_discount) }, 0)
 	const handleCheckoutRedirect = () => {
+		Vibration.vibrate(100)
 		if (cartsAvailable.length === 1) {
 			onNavigationRedirect('CheckoutNavigator', {
 				screen: 'CheckoutPage',
@@ -71,7 +73,7 @@ export const CartContent = (props: any) => {
 		}
 	}
 
-	const changeActiveState = useCallback((isClosed : boolean, uuid : string) => {
+	const changeActiveState = useCallback((isClosed: boolean, uuid: string) => {
 		const isActive = cartsOpened?.includes?.(uuid) || !!singleBusiness
 		if (isActive || !isClosed) {
 			setCartsOpened(cartsOpened?.filter?.((_uuid) => _uuid !== uuid))
@@ -83,6 +85,20 @@ export const CartContent = (props: any) => {
 		}
 	}, [cartsOpened])
 
+	useEffect(() => {
+		const unsuscribe = navigation.addListener('focus', () => {
+			const cartsListBlockedByPaypal = carts?.filter((cart: any) => cart?.status === 2 && cart?.paymethod_data?.gateway === 'paypal')
+			if (cartsListBlockedByPaypal?.length > 0) {
+				cartsListBlockedByPaypal.map(async (cart: any) => {
+					await confirmCart(cart?.uuid)
+				})
+			}
+		})
+		return () => {
+			return unsuscribe()
+		}
+	}, [carts, navigation])
+
 	return (
 		<CCContainer
 			style={{ paddingHorizontal: 20 }}
@@ -120,53 +136,52 @@ export const CartContent = (props: any) => {
 					{isMultiCheckout && (
 						<>
 							{!!cartsAvailable.length && (
-								<ChCartsTotal>
-									{!!totalCartsFee && configs?.multi_business_checkout_show_combined_delivery_fee?.value === '1' && (
-										<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
-											<OText size={14} lineHeight={24} color={theme.colors.textNormal} weight={'400'}>
-												{t('TOTAL_DELIVERY_FEE', 'Total delivery fee')}
-											</OText>
-											<OText size={14} lineHeight={24} color={theme.colors.textNormal} weight={'400'}>
-												{parsePrice(totalCartsFee)}
-											</OText>
-										</View>
-									)}
-									{cartsAvailable.reduce((sum: any, cart: any) => sum + cart?.driver_tip, 0) > 0 &&
-										configs?.multi_business_checkout_show_combined_driver_tip?.value === '1' && (
+								<>
+									<ChCartsTotal>
+										{!!totalCartsFee && configs?.multi_business_checkout_show_combined_delivery_fee?.value === '1' && (
 											<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
 												<OText size={14} lineHeight={24} color={theme.colors.textNormal} weight={'400'}>
-													{t('DRIVER_TIP', 'Driver tip')}
+													{t('TOTAL_DELIVERY_FEE', 'Total delivery fee')}
 												</OText>
 												<OText size={14} lineHeight={24} color={theme.colors.textNormal} weight={'400'}>
-													{parsePrice(cartsAvailable.reduce((sum: any, cart: any) => sum + cart?.driver_tip, 0))}
+													{parsePrice(totalCartsFee)}
 												</OText>
 											</View>
 										)}
-									<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
-										<OText size={16} lineHeight={24} color={theme.colors.textNormal} weight={'500'}>
-											{t('TOTAL_FOR_ALL_CARTS', 'Total for all Carts')}
-										</OText>
-										<OText size={16} lineHeight={24} color={theme.colors.textNormal} weight={'500'}>{parsePrice(totalCartsPrice)}</OText>
-									</View>
-									<View style={{ flexDirection: 'row', justifyContent: 'center', marginVertical: 20 }}>
-										<OText size={14} color={theme.colors.textNormal} weight={'300'} style={{ textAlign: 'center' }}>
-											{t('CART_GROUP_MESSAGE_ALERT', 'Discounts may be applied at the time of payment for this group.')}
-										</OText>
-									</View>
-								</ChCartsTotal>
+										{cartsAvailable.reduce((sum: any, cart: any) => sum + cart?.driver_tip, 0) > 0 &&
+											configs?.multi_business_checkout_show_combined_driver_tip?.value === '1' && (
+												<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+													<OText size={14} lineHeight={24} color={theme.colors.textNormal} weight={'400'}>
+														{t('DRIVER_TIP', 'Driver tip')}
+													</OText>
+													<OText size={14} lineHeight={24} color={theme.colors.textNormal} weight={'400'}>
+														{parsePrice(cartsAvailable.reduce((sum: any, cart: any) => sum + cart?.driver_tip, 0))}
+													</OText>
+												</View>
+											)}
+										<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+											<OText size={16} lineHeight={24} color={theme.colors.textNormal} weight={'500'}>
+												{t('TOTAL_FOR_ALL_CARTS', 'Total for all Carts')}
+											</OText>
+											<OText size={16} lineHeight={24} color={theme.colors.textNormal} weight={'500'}>{parsePrice(totalCartsPrice)}</OText>
+										</View>
+										<View style={{ flexDirection: 'row', justifyContent: 'center', marginVertical: 20 }}>
+											<OText size={14} color={theme.colors.textNormal} weight={'300'} style={{ textAlign: 'center' }}>
+												{t('CART_GROUP_MESSAGE_ALERT', 'Discounts may be applied at the time of payment for this group.')}
+											</OText>
+										</View>
+									</ChCartsTotal>
+									<CheckoutAction style={{ marginTop: 0 }}>
+										<OButton
+											text={t('CHECKOUT', 'Checkout')}
+											isDisabled={!cartsAvailable.length}
+											imgRightSrc={null}
+											onClick={() => handleCheckoutRedirect()}
+											style={{ width: '100%', flexDirection: 'row', justifyContent: 'center', borderRadius: 7.6, shadowOpacity: 0 }}
+										/>
+									</CheckoutAction>
+								</>
 							)}
-							<CheckoutAction style={{ marginTop: 0 }}>
-								<OButton
-									text={t('CHECKOUT', 'Checkout')}
-									bgColor={!cartsAvailable.length ? theme.colors.secundary : theme.colors.primary}
-									isDisabled={!cartsAvailable.length}
-									borderColor={theme.colors.primary}
-									imgRightSrc={null}
-									textStyle={{ color: 'white', textAlign: 'center', flex: 1 }}
-									onClick={() => handleCheckoutRedirect()}
-									style={{ width: '100%', flexDirection: 'row', justifyContent: 'center', borderRadius: 7.6, shadowOpacity: 0 }}
-								/>
-							</CheckoutAction>
 						</>
 					)}
 				</>

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

@@ -1,10 +1,11 @@
 import React, { useState, useEffect, useCallback, useRef } from 'react';
-import { View, StyleSheet, TouchableOpacity, Platform, I18nManager, ScrollView, Keyboard } from 'react-native';
+import { View, StyleSheet, TouchableOpacity, Platform, I18nManager, ScrollView, Keyboard, BackHandler, SafeAreaView } from 'react-native';
 import { initStripe, useConfirmPayment } from '@stripe/stripe-react-native';
 import NativeStripeSdk from '@stripe/stripe-react-native/src/NativeStripeSdk'
 import Picker from 'react-native-country-picker-modal';
 import MaterialIcons from 'react-native-vector-icons/MaterialIcons'
 import IconAntDesign from 'react-native-vector-icons/AntDesign';
+import { useIsFocused } from '@react-navigation/native';
 
 import ReactNativeHapticFeedback from "react-native-haptic-feedback";
 import {
@@ -100,10 +101,13 @@ const CheckoutUI = (props: any) => {
 		currency,
 		merchantId,
 		setPlaceSpotNumber,
-		maxDate
+		maxDate,
+		androidAppId,
+		urlscheme
 	} = props
 
 	const theme = useTheme();
+	const isFocused = useIsFocused();
 
 	const styles = StyleSheet.create({
 		btnBackArrow: {
@@ -159,7 +163,7 @@ const CheckoutUI = (props: any) => {
 	const [phoneUpdate, setPhoneUpdate] = useState(false);
 	const [openChangeStore, setOpenChangeStore] = useState(false)
 	const [isDeliveryOptionModalVisible, setIsDeliveryOptionModalVisible] = useState(false)
-	const [showGateway, setShowGateway] = useState<any>({ closedByUsed: false, open: false });
+	const [showGateway, setShowGateway] = useState<any>({ closedByUser: false, open: false });
 	const [webviewPaymethod, setWebviewPaymethod] = useState<any>(null)
 	const [isOpen, setIsOpen] = useState(false)
 	const [requiredFields, setRequiredFields] = useState<any>([])
@@ -170,12 +174,12 @@ const CheckoutUI = (props: any) => {
 	const [paymethodClicked, setPaymethodClicked] = useState<any>(null)
 	const [showTitle, setShowTitle] = useState(false)
 	const [cardList, setCardList] = useState<any>({ cards: [], loading: false, error: null })
+	const [isGiftCardCart, setIsGiftCardCart] = useState(!cart?.business_id)
 	const containerRef = useRef<any>()
 	const cardsMethods = ['credomatic']
 	const stripePaymethods: any = ['stripe', 'stripe_direct', 'stripe_connect', 'stripe_redirect']
 	const placeSpotTypes = [3, 4, 5]
 	const placeSpotsEnabled = placeSpotTypes.includes(options?.type)
-	const isGiftCardCart = !cart?.business_id
 	const businessConfigs = businessDetails?.business?.configs ?? []
 	const isWalletCashEnabled = businessConfigs.find((config: any) => config.key === 'wallet_cash_enabled')?.value === '1'
 	const isWalletCreditPointsEnabled = businessConfigs.find((config: any) => config.key === 'wallet_credit_point_enabled')?.value === '1'
@@ -208,7 +212,7 @@ const CheckoutUI = (props: any) => {
 	const isDisabledButtonPlace = loading || !cart?.valid || (!paymethodSelected && cart?.balance > 0) ||
 		placing || errorCash || subtotalWithTaxes < cart?.minimum ||
 		(cardsMethods.includes(paymethodSelected?.gateway) && cardList?.cards?.length === 0) ||
-		(options.type === 1 &&
+		(options.type === 1 && !isGiftCardCart &&
 			validationFields?.fields?.checkout?.driver_tip?.enabled &&
 			validationFields?.fields?.checkout?.driver_tip?.required &&
 			(Number(cart?.driver_tip) <= 0)) ||
@@ -359,11 +363,21 @@ const CheckoutUI = (props: any) => {
 		if (cart?.products?.length === 0) {
 			if (cart?.business_id !== null) {
 				onNavigationRedirect('Business', { store: cart?.business?.slug, header: null, logo: null, fromMulti: props.fromMulti })
-			} else {
+			} else if (isGiftCardCart) {
 				onNavigationRedirect('Wallets')
 			}
 		}
-	}, [cart?.products])
+	}, [cart?.products?.length])
+
+	useEffect(() => {
+		if (cart?.products?.length > 0) {
+			if (cart?.uuid && cart?.business_id === null) {
+				setIsGiftCardCart(true)
+			} else {
+				setIsGiftCardCart(false)
+			}
+		}
+	}, [cart?.uuid, cart?.products?.length])
 
 	useEffect(() => {
 		onFailPaypal()
@@ -403,6 +417,7 @@ const CheckoutUI = (props: any) => {
 	}, [])
 
 	useEffect(() => {
+		if (!isFocused) return
 		if (!cartState?.loading && (cartState?.error || typeof cartState?.cart === 'string')) {
 			const error = cartState?.error || typeof cartState.cart === 'string' && cartState.cart
 			if (error) {
@@ -410,7 +425,7 @@ const CheckoutUI = (props: any) => {
 				navigation.navigate('BusinessList')
 			}
 		}
-	}, [cartState?.error, cartState?.cart, cartState?.loading])
+	}, [cartState?.error, cartState?.cart, cartState?.loading, isFocused])
 
 	useEffect(() => {
 		const keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', () => {
@@ -421,11 +436,26 @@ const CheckoutUI = (props: any) => {
 		}
 	}, [])
 
+	useEffect(() => {
+		const onBackFunction = () => {
+			if (webviewPaymethod?.gateway === 'paypal' && showGateway.open) {
+				setShowGateway({ open: false, closedByUser: true })
+				return true
+			} else {
+				return false
+			}
+		}
+		BackHandler.addEventListener('hardwareBackPress', onBackFunction)
+		return () => {
+			BackHandler.removeEventListener('hardwareBackPress', onBackFunction)
+		}
+	}, [BackHandler, webviewPaymethod?.gateway, showGateway.open])
+
 	return (
 		<>
-			<View style={styles.wrapperNavbar}>
-				<TopHeader>
-					<>
+			<SafeAreaView style={{ backgroundColor: theme.colors.backgroundPage }}>
+				<View style={styles.wrapperNavbar}>
+					<TopHeader>
 						<TopActions onPress={() => onNavigationRedirect('BottomTab', { screen: 'Cart' }, !props.fromMulti)}>
 							<IconAntDesign
 								name='arrowleft'
@@ -443,10 +473,10 @@ const CheckoutUI = (props: any) => {
 								{t('CHECKOUT', 'Checkout')}
 							</OText>
 						)}
-					</>
-				</TopHeader>
-			</View>
-			<Container forwardRef={containerRef} noPadding onScroll={handleScroll}>
+					</TopHeader>
+				</View>
+			</SafeAreaView>
+			<Container pt={0} forwardRef={containerRef} showsVerticalScrollIndicator={false} noPadding onScroll={handleScroll}>
 				<View style={styles.wrapperNavbar}>
 					<NavBar
 						hideArrowLeft
@@ -461,44 +491,46 @@ const CheckoutUI = (props: any) => {
 					/>
 				</View>
 				<ChContainer style={styles.pagePadding}>
-					<ChSection style={{ paddingTop: 0 }}>
-						<ChHeader>
-							<CHMomentWrapper isCustomColor={isChewLayout} onPress={() => navigation.navigate('OrderTypes', { configTypes: configTypes })}>
-								<OText
-									size={12}
-									numberOfLines={1}
-									ellipsizeMode={'tail'}
-									color={theme.colors?.[isChewLayout ? 'white' : 'textSecondary']}
-								>
-									{t(getTypesText(options?.type || 1), 'Delivery')}
-								</OText>
-								<OIcon
-									src={theme.images.general.arrow_down}
-									width={10}
-									style={{ marginStart: 8 }}
-									{...(isChewLayout && { color: 'white' })}
-								/>
-							</CHMomentWrapper>
-							<CHMomentWrapper
-								onPress={() => handleMomentClick()}
-								disabled={loading}
-							>
-								<OText size={12} numberOfLines={1} ellipsizeMode='tail' color={theme.colors.textSecondary}>
-									{options?.moment
-										? parseDate(options?.moment, { outputFormat: configs?.dates_moment_format?.value })
-										: t('ASAP_ABBREVIATION', 'ASAP')}
-								</OText>
-								{isPreOrder && (
+					{!isGiftCardCart && (
+						<ChSection style={{ paddingTop: 0 }}>
+							<ChHeader>
+								<CHMomentWrapper isCustomColor={isChewLayout} onPress={() => navigation.navigate('OrderTypes', { configTypes: configTypes })}>
+									<OText
+										size={12}
+										numberOfLines={1}
+										ellipsizeMode={'tail'}
+										color={theme.colors?.[isChewLayout ? 'white' : 'textSecondary']}
+									>
+										{t(getTypesText(options?.type || 1), 'Delivery')}
+									</OText>
 									<OIcon
 										src={theme.images.general.arrow_down}
 										width={10}
 										style={{ marginStart: 8 }}
+										{...(isChewLayout && { color: 'white' })}
 									/>
-								)}
-							</CHMomentWrapper>
-						</ChHeader>
-						<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginTop: 18, marginHorizontal: -40 }} />
-					</ChSection>
+								</CHMomentWrapper>
+								<CHMomentWrapper
+									onPress={() => handleMomentClick()}
+									disabled={loading}
+								>
+									<OText size={12} numberOfLines={1} ellipsizeMode='tail' color={theme.colors.textSecondary}>
+										{options?.moment
+											? parseDate(options?.moment, { outputFormat: configs?.dates_moment_format?.value })
+											: t('ASAP_ABBREVIATION', 'ASAP')}
+									</OText>
+									{isPreOrder && (
+										<OIcon
+											src={theme.images.general.arrow_down}
+											width={10}
+											style={{ marginStart: 8 }}
+										/>
+									)}
+								</CHMomentWrapper>
+							</ChHeader>
+							<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginTop: 18, marginHorizontal: -40 }} />
+						</ChSection>
+					)}
 
 					{!isGiftCardCart && !hideBusinessDetails && (
 						<ChSection>
@@ -587,15 +619,11 @@ const CheckoutUI = (props: any) => {
 											<HeaderTitle text={t('CUSTOMER_DETAILS', 'Customer details')} />
 											<OButton
 												text={t('SIGN_UP', 'Sign up')}
-												textStyle={{ color: theme.colors.white }}
 												style={{ borderRadius: 7.6, marginTop: 20 }}
 												onClick={() => setOpenModal({ ...openModal, signup: true })}
 											/>
 											<OButton
 												text={t('LOGIN', 'Login')}
-												textStyle={{ color: theme.colors.primary }}
-												bgColor={theme.colors.white}
-												borderColor={theme.colors.primary}
 												style={{ borderRadius: 7.6, marginTop: 20 }}
 												onClick={() => setOpenModal({ ...openModal, login: true })}
 											/>
@@ -739,7 +767,7 @@ const CheckoutUI = (props: any) => {
 						cart?.status !== 2 &&
 						validationFields?.fields?.checkout?.driver_tip?.enabled &&
 						driverTipsOptions && driverTipsOptions?.length > 0 &&
-						!isGiftCardCart &&
+						cart?.business_id &&
 						(
 							<ChSection>
 								<ChDriverTips>
@@ -787,6 +815,8 @@ const CheckoutUI = (props: any) => {
 									handlePaymentMethodClickCustom={handlePaymentMethodClick}
 									handlePlaceOrder={handlePlaceOrder}
 									merchantId={merchantId}
+									urlscheme={urlscheme}
+									androidAppId={androidAppId}
 									setMethodPaySupported={setMethodPaySupported}
 									methodPaySupported={methodPaySupported}
 									placeByMethodPay={placeByMethodPay}
@@ -832,7 +862,7 @@ const CheckoutUI = (props: any) => {
 					{!cartState.loading && cart && (
 						<ChSection>
 							<ChCart>
-								{cartsWithProducts && cart?.products?.length === 0 ? (
+								{cartsWithProducts?.length > 0 && cart?.products?.length === 0 ? (
 									<NotFoundSource
 										content={t('NOT_FOUND_CARTS', 'Sorry, You don\'t seem to have any carts.')}
 										btnTitle={t('SEARCH_REDIRECT', 'Go to Businesses')}
@@ -910,13 +940,15 @@ const CheckoutUI = (props: any) => {
 									</OText>
 								)}
 
-								{!cart?.valid_products && cart?.status !== 2 && (
-									<OText
-										color={theme.colors.error}
-										size={12}
-									>
-										{t('WARNING_INVALID_PRODUCTS_CHECKOUT', 'To continue with your checkout, please remove from your cart the products that are not available.')}
-									</OText>
+								{!cart?.valid_products && cart?.status !== 2 && cart?.total !== 0 && (
+									<>
+										<OText
+											color={theme.colors.error}
+											size={12}
+										>
+											{t('WARNING_INVALID_PRODUCTS_CHECKOUT', 'To continue with your checkout, please remove from your cart the products that are not available.')}
+										</OText>
+									</>
 								)}
 								{cart?.valid_preorder !== undefined && !cart?.valid_preorder && (
 									<OText
@@ -926,7 +958,7 @@ const CheckoutUI = (props: any) => {
 										{t('INVALID_CART_MOMENT', 'Selected schedule time is invalid, please select a schedule into the business schedule interval.')}
 									</OText>
 								)}
-								{options.type === 1 &&
+								{options.type === 1 && !isGiftCardCart &&
 									validationFields?.fields?.checkout?.driver_tip?.enabled &&
 									validationFields?.fields?.checkout?.driver_tip?.required &&
 									(Number(cart?.driver_tip) <= 0) && (

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

@@ -69,10 +69,7 @@ export const CitiesControl = (props: any) => {
       </View>
       <OButton
         text={t('CONTINUE', 'Continue')}
-        bgColor={theme.colors.primary}
-        borderColor={theme.colors.primary}
         style={styles.btnStyle}
-        textStyle={{ color: 'white' }}
         onClick={() => handleClick()}
       />
     </Container>

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

@@ -102,9 +102,7 @@ const CouponControlUI = (props: any) => {
 					/>
 					<OButton
 						onClick={() => onButtonApplyClick()}
-						bgColor={theme.colors.primary}
-						borderColor={theme.colors.primary}
-						textStyle={{ color: 'white', fontSize: 12 }}
+						textStyle={{ fontSize: 12 }}
 						imgRightSrc={null}
 						text={t('APPLY', 'Apply')}
 						isDisabled={!couponInput}