ordering-ui-react-native 0.15.32 → 0.15.34-release

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

@@ -90,33 +90,12 @@ const BusinessReviewsUI = (props: BusinessReviewsParams) => {
 		</View>
 	);
 
-	const ReviewItem = ({ comment, created_at, total, customer }: any) => (
+	const ReviewItem = ({ comment, created_at, total }: any) => (
 		<View style={{ marginBottom: 30 }}>
-			<View
-				style={{ flexDirection: 'row', marginBottom: 19, alignItems: 'center' }}>
-				<OIcon
-					url={theme.images.dummies.customerPhoto}
-					width={38}
-					height={38}
-					style={{
-						borderRadius: 7.6,
-						borderWidth: 1,
-						borderColor: theme.colors.border,
-						marginEnd: 9,
-					}}
-				/>
-				<View>
-					<OText size={12} color={theme.colors.textNormal} weight={'500'}>
-						{customer?.name || 'Jane Cooper'}
-					</OText>
-					<OText size={10} color={theme.colors.textSecondary}>
-						{moment(created_at).format('MMMM d, yyyy • hh:mm')}
-					</OText>
-				</View>
-			</View>
-			<OText size={10} color={theme.colors.textNormal}>
-				{comment}
+			<OText size={12} color={theme.colors.textSecondary}>
+				{moment(created_at).format('MMMM d, yyyy • hh:mm')}
 			</OText>
+			<OText size={12} color={theme.colors.textNormal}>{comment}</OText>
 		</View>
 	);
 

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

@@ -45,7 +45,6 @@ export const BusinessTypeFilterUI = (props: BusinessTypeFilterParams) => {
 	const renderTypes = ({ item }: any) => {
 		return (
 			<TouchableOpacity
-				key={item.id}
 				onPress={() => handleChangeBusinessType(item.id)}
 				style={{
 					height: 34,
@@ -103,7 +102,7 @@ export const BusinessTypeFilterUI = (props: BusinessTypeFilterParams) => {
 									showsHorizontalScrollIndicator={false}
 									data={typesState?.types}
 									renderItem={renderTypes}
-									keyExtractor={(type) => type.name}
+									keyExtractor={(type, index) => `${type.name}_${index}`}
 								/>
 								<TouchableOpacity
 									style={{ marginLeft: 15 }}

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

@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 import Geolocation from '@react-native-community/geolocation'
+import { getTrackingStatus, requestTrackingPermission } from 'react-native-tracking-transparency'
 import {
 	View,
 	StyleSheet,
@@ -47,7 +48,7 @@ import { getTypesText, convertToRadian } from '../../utils';
 import { OrderProgress } from '../OrderProgress';
 import { useFocusEffect, useIsFocused } from '@react-navigation/native';
 
-const PIXELS_TO_SCROLL = 1000;
+const PIXELS_TO_SCROLL = 2000;
 
 const BusinessesListingUI = (props: BusinessesListingParams) => {
 	const {
@@ -59,9 +60,10 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 		handleBusinessClick,
 		paginationProps,
 		handleChangeSearch,
-		businessId
+		businessId,
+		isGuestUser,
+		handleUpdateBusinessList
 	} = props;
-
 	const theme = useTheme();
 	const isFocused = useIsFocused();
 	const appState = useRef(AppState.currentState)
@@ -117,11 +119,13 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 	const [featuredBusiness, setFeaturedBusinesses] = useState(Array);
 	const [isFarAway, setIsFarAway] = useState(false)
 	const [businessTypes, setBusinessTypes] = useState(null)
-
+	const [orderTypeValue, setOrderTypeValue] = useState(orderState?.options.value)
 	const isPreorderEnabled = (configs?.preorder_status_enabled?.value === '1' || configs?.preorder_status_enabled?.value === 'true') &&
 		Number(configs?.max_days_preorder?.value) > 0
-
+	const isPreOrderSetting = configs?.preorder_status_enabled?.value === '1'
 	const timerId = useRef<any>(false)
+  const [favoriteIds, setFavoriteIds] = useState<any>([])
+
 	// const panResponder = useRef(
 	// 	PanResponder.create({
 	// 		onMoveShouldSetPanResponder: (e, gestureState) => {
@@ -191,19 +195,35 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 		}
 	}
 
+	const checkUserLocation = async () => {
+		let trackingStatus = await getTrackingStatus()
+		if (trackingStatus === 'not-determined') {
+			trackingStatus = await requestTrackingPermission()
+		}
+		if (trackingStatus === 'authorized' || trackingStatus === 'unavailable') {
+			Geolocation.getCurrentPosition((pos) => {
+				const crd = pos.coords
+				const distance = getDistance(crd.latitude, crd.longitude, orderState?.options?.address?.location?.lat, orderState?.options?.address?.location?.lng)
+				if (distance > 20) setIsFarAway(true)
+				else setIsFarAway(false)
+			}, (err) => {
+				console.log(`ERROR(${err.code}): ${err.message}`)
+			}, {
+				enableHighAccuracy: true, timeout: 15000, maximumAge: 10000
+			})
+		}
+	}
+
 	useEffect(() => {
-		Geolocation.getCurrentPosition((pos) => {
-			const crd = pos.coords
-			const distance = getDistance(crd.latitude, crd.longitude, orderState?.options?.address?.location?.lat, orderState?.options?.address?.location?.lng)
-			if (distance > 20) setIsFarAway(true)
-			else setIsFarAway(false)
-		}, (err) => {
-			console.log(`ERROR(${err.code}): ${err.message}`)
-		}, {
-			enableHighAccuracy: true, timeout: 15000, maximumAge: 10000
-		})
+		checkUserLocation()
 	}, [orderState?.options?.address?.location])
 
+	useEffect(() => {
+		if(!orderState?.loading){
+			setOrderTypeValue(orderState?.options?.type)
+		}
+	}, [orderState?.options?.type])
+
 	useFocusEffect(
 		useCallback(() => {
 			resetInactivityTimeout()
@@ -211,6 +231,17 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 		}, [navigation])
 	)
 
+	useEffect(() => {
+    if (!businessesList?.businesses?.length) return
+    const ids = [...favoriteIds]
+    businessesList.businesses.forEach((business: any) => {
+      if (business?.favorite) {
+        ids.push(business?.id)
+      }
+    })
+    setFavoriteIds([...new Set(ids)])
+  }, [businessesList?.businesses?.length])
+
 	return (
 		<ScrollView style={styles.container} onScroll={(e) => handleScroll(e)} showsVerticalScrollIndicator={false}
 			refreshControl={
@@ -221,7 +252,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 			}
 		>
 			<HeaderWrapper
-				source={theme.images.backgrounds.business_list_header}
+				source={theme.images.general.homeHero}
 				style={{ paddingTop: top + 20 }}>
 				{!auth && (
 					<TouchableOpacity onPress={() => navigation?.canGoBack() && navigation.goBack()} style={{ position: 'absolute', marginStart: 40, paddingVertical: 20 }}>
@@ -237,6 +268,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 								: navigation.navigate('AddressForm', {
 									address: orderState.options?.address,
 									isFromBusinesses: true,
+									isGuestUser: isGuestUser
 								})
 						}>
 						<OIcon
@@ -258,33 +290,35 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 				)}
 				<OrderControlContainer>
 					<View style={styles.wrapperOrderOptions}>
-						<WrapMomentOption onPress={() => navigation.navigate('OrderTypes', { configTypes: configTypes })}>
-							<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textSecondary}>{t(getTypesText(orderState?.options?.type || 1), 'Delivery')}</OText>
+						<WrapMomentOption onPress={() => navigation.navigate('OrderTypes', { configTypes: configTypes, setOrderTypeValue })}>
+							<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textSecondary}>{t(getTypesText(orderTypeValue || orderState?.options?.type || 1), 'Delivery')}</OText>
 							<OIcon
 								src={theme.images.general.arrow_down}
 								width={10}
 								style={{ marginStart: 8 }}
 							/>
 						</WrapMomentOption>
-						<WrapMomentOption
-							onPress={() => handleMomentClick()}>
-							<OText
-								size={12}
-								numberOfLines={1}
-								ellipsizeMode="tail"
-								color={theme.colors.textSecondary}>
-								{orderState.options?.momentß
-									? parseDate(orderState.options?.moment, { outputFormat: configs?.dates_moment_format?.value })
-									: t('ASAP_ABBREVIATION', 'ASAP')}
-							</OText>
-							{isPreorderEnabled && (
-								<OIcon
-									src={theme.images.general.arrow_down}
-									width={10}
-									style={{ marginStart: 8 }}
-								/>
-							)}
-						</WrapMomentOption>
+						{isPreOrderSetting && (
+							<WrapMomentOption
+								onPress={() => handleMomentClick()}>
+								<OText
+									size={12}
+									numberOfLines={1}
+									ellipsizeMode="tail"
+									color={theme.colors.textSecondary}>
+									{orderState.options?.moment
+										? parseDate(orderState.options?.moment, { outputFormat: configs?.dates_moment_format?.value })
+										: t('ASAP_ABBREVIATION', 'ASAP')}
+								</OText>
+								{isPreorderEnabled && (
+									<OIcon
+										src={theme.images.general.arrow_down}
+										width={10}
+										style={{ marginStart: 8 }}
+									/>
+								)}
+							</WrapMomentOption>
+						)}
 
 						{!businessId && (
 							<SearchBar
@@ -296,9 +330,9 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 								onCancel={() => handleChangeSearch('')}
 								placeholder={t('SEARCH', 'Search')}
 								height={26}
-								isDisabled={configs?.advanced_business_search_enabled?.value === '1' || !businessTypes}
+								isDisabled={!businessTypes}
 								inputStyle={{ ...styles.searchInput, ...Platform.OS === 'ios' ? {} : { paddingBottom: 4 } }}
-								onPress={() => { configs?.advanced_business_search_enabled?.value === '1' && navigation.navigate('BusinessSearch', { businessTypes }) }}
+								onSubmitEditing={() => { configs?.advanced_business_search_enabled?.value === '1' && navigation.navigate('BusinessSearch', { businessTypes, defaultTerm: searchValue }) }}
 							/>
 						)}
 
@@ -316,7 +350,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 			{
 				!businessId && !props.franchiseId && featuredBusiness && featuredBusiness.length > 0 && (
 					<FeaturedWrapper>
-						<OText size={16} style={{ marginLeft: 40 }} weight={Platform.OS === 'ios' ? '600' : 'bold'}>{t('FEATURED_BUSINESS', 'Featured business')}</OText>
+						<OText size={16} style={{ marginLeft: 40 }} weight={Platform.OS === 'ios' ? '600' : 'bold'}>{t('BUSINESS_FEATURE', 'Featured business')}</OText>
 						<ScrollView
 							showsHorizontalScrollIndicator={false}
 							nestedScrollEnabled
@@ -324,7 +358,6 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 							{featuredBusiness.map((bAry: any, idx) => (
 								<View key={'f-listing_' + idx}>
 									<BusinessFeaturedController
-										key={bAry[0].id}
 										business={bAry[0]}
 										isBusinessOpen={bAry[0]?.open}
 										handleCustomClick={handleBusinessClick}
@@ -332,7 +365,6 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 									/>
 									{bAry.length > 1 && (
 										<BusinessFeaturedController
-											key={bAry[1].id}
 											business={bAry[1]}
 											isBusinessOpen={bAry[1]?.open}
 											handleCustomClick={handleBusinessClick}
@@ -348,7 +380,12 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 			<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100 }} />
 			{
 				!businessId && !props.franchiseId && (
-					<HighestRatedBusinesses onBusinessClick={handleBusinessClick} navigation={navigation} />
+					<HighestRatedBusinesses
+						onBusinessClick={handleBusinessClick}
+						navigation={navigation}
+						favoriteIds={favoriteIds}
+						setFavoriteIds={setFavoriteIds}
+					/>
 				)
 			}
 			<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100 }} />
@@ -371,9 +408,9 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 					/>
 				)}
 				{businessesList.businesses?.map(
-					(business: any) => (
+					(business: any, i : number) => (
 						<BusinessController
-							key={business.id}
+							key={`${business.id}_` + i}
 							business={business}
 							isBusinessOpen={business.open}
 							handleCustomClick={handleBusinessClick}
@@ -387,6 +424,9 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 							businessDeliveryTime={business?.delivery_time}
 							businessPickupTime={business?.pickup_time}
 							businessDistance={business?.distance}
+							handleUpdateBusinessList={handleUpdateBusinessList}
+							favoriteIds={favoriteIds}
+							setFavoriteIds={setFavoriteIds}
 						/>
 					)
 				)}

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

@@ -106,7 +106,7 @@ const CartUI = (props: any) => {
   }
 
   const getIncludedTaxes = () => {
-    if (cart?.taxes === null) {
+    if (cart?.taxes === null || !cart?.taxes) {
       return cart.business.tax_type === 1 ? cart?.tax : 0
     } else {
       return cart?.taxes.reduce((taxIncluded: number, tax: any) => {
@@ -162,13 +162,13 @@ const CartUI = (props: any) => {
         handleClearProducts={handleClearProducts}
         handleCartOpen={handleCartOpen}
         onNavigationRedirect={props.onNavigationRedirect}
-        handleChangeStore={props.isFranchiseApp ? () => setOpenChangeStore(true) : null}
+        handleChangeStore={() => setOpenChangeStore(true)}
         handleClickCheckout={() => setOpenUpselling(true)}
         checkoutButtonDisabled={(openUpselling && !canOpenUpselling) || cart?.subtotal < cart?.minimum || !cart?.valid_address}
       >
-        {cart?.products?.length > 0 && cart?.products.map((product: any) => (
+        {cart?.products?.length > 0 && cart?.products.map((product: any, i: number) => (
           <ProductItemAccordion
-            key={product.code}
+            key={`${product.code}_${i}`}
             isCartPending={isCartPending}
             isCartProduct
             product={product}
@@ -202,8 +202,8 @@ const CartUI = (props: any) => {
               </OSTable>
             )}
             {
-              cart?.offers?.length > 0 && cart?.offers?.filter((offer: any) => offer?.target === 1)?.map((offer: any) => (
-                <OSTable key={offer.id}>
+              cart?.offers?.length > 0 && cart?.offers?.filter((offer: any) => offer?.target === 1)?.map((offer: any, i: number) => (
+                <OSTable key={`${offer.id}_${i}`}>
                   <OSRow>
                     <OText size={12} lineHeight={18}>{offer.name}</OText>
                     {offer.rate_type === 1 && (
@@ -234,8 +234,8 @@ const CartUI = (props: any) => {
               </OSTable>
             )}
             {
-              cart.taxes?.length > 0 && cart.taxes.filter((tax: any) => tax.type === 2 && tax?.rate !== 0).map((tax: any) => (
-                <OSTable key={tax.id}>
+              cart.taxes?.length > 0 && cart.taxes.filter((tax: any) => tax.type === 2 && tax?.rate !== 0).map((tax: any, i: number) => (
+                <OSTable key={`${tax.id}_${i}`}>
                   <OSRow>
                     <OText size={12} lineHeight={18} numberOfLines={1} >
                       {tax.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}{' '}
@@ -250,12 +250,12 @@ const CartUI = (props: any) => {
               ))
             }
             {
-              cart?.fees?.length > 0 && cart?.fees?.filter((fee: any) => !(fee.fixed === 0 && fee.percentage === 0)).map((fee: any) => (
-                <OSTable key={fee?.id}>
+              cart?.fees?.length > 0 && cart?.fees?.filter((fee: any) => !(fee.fixed === 0 && fee.percentage === 0)).map((fee: any, i: number) => (
+                <OSTable key={`${fee.id}_${i}`}>
                   <OSRow>
                     <OText size={12} lineHeight={18} numberOfLines={1}>
                       {fee.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}{' '}
-                      ({fee?.fixed > 0 && `${parsePrice(fee?.fixed)} + `}{fee.percentage}%){' '}
+                      ({fee?.fixed > 0 && `${parsePrice(fee?.fixed)}${fee.percentage > 0 ? ' + ' : ''}`}{fee.percentage > 0 && `${fee.percentage}%`}){' '}
                     </OText>
                     <TouchableOpacity onPress={() => setOpenTaxModal({ open: true, data: fee, type: 'fee' })} >
                       <AntIcon name='infocirlceo' size={16} color={theme.colors.primary} />
@@ -293,8 +293,8 @@ const CartUI = (props: any) => {
               </OSTable>
             )}
             {
-              cart?.offers?.length > 0 && cart?.offers?.filter((offer: any) => offer?.target === 2)?.map((offer: any) => (
-                <OSTable key={offer.id}>
+              cart?.offers?.length > 0 && cart?.offers?.filter((offer: any) => offer?.target === 2)?.map((offer: any, i: number) => (
+                <OSTable key={`${offer.id}_${i}`}>
                   <OSRow>
                     <OText size={12} lineHeight={18}>{offer.name}</OText>
                     {offer.rate_type === 1 && (
@@ -409,7 +409,7 @@ const CartUI = (props: any) => {
             )}
           </OSBill>
         )}
-        {cart?.valid_products && (
+        {cart?.valid_products ? (
           <CheckoutAction>
             <OButton
               text={(cart?.subtotal >= cart?.minimum || !cart?.minimum) && cart?.valid_address ? (
@@ -428,11 +428,17 @@ const CartUI = (props: any) => {
               style={{ width: '100%', flexDirection: 'row', justifyContent: 'center', borderRadius: 7.6, shadowOpacity: 0 }}
             />
           </CheckoutAction>
+        ) : (
+          <View style={{ alignItems: 'center', width: '100%' }}>
+            <OText size={12} color={theme.colors.red} style={{ textAlign: 'center', marginTop: 5 }}>
+              {t('WARNING_INVALID_PRODUCTS_CHECKOUT', 'To continue with your checkout, please remove from your cart the products that are not available.')}
+            </OText>
+          </View>
         )}
       </BusinessItemAccordion>
 
       <OModal
-        open={openChangeStore && props.isFranchiseApp}
+        open={openChangeStore}
         entireModal
         customClose
         onClose={() => setOpenChangeStore(false)}
@@ -446,8 +452,6 @@ const CartUI = (props: any) => {
         open={openTaxModal.open}
         onClose={() => setOpenTaxModal({ open: false, data: null, type: '' })}
         entireModal
-        title={`${openTaxModal.data?.name ||
-          t('INHERIT_FROM_BUSINESS', 'Inherit from business')} ${openTaxModal.data?.rate_type !== 2 ? `(${typeof openTaxModal.data?.rate === 'number' ? `${openTaxModal.data?.rate}%` : `${parsePrice(openTaxModal.data?.fixed ?? 0)} + ${openTaxModal.data?.percentage}%`})` : ''}  `}
       >
         <TaxInformation
           type={openTaxModal.type}

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

@@ -22,9 +22,9 @@ export const CartContent = (props: any) => {
 		<CCContainer>
 			{isOrderStateCarts && carts?.length > 0 && (
 				<>
-					<OText size={24} lineHeight={36} weight={'600'} style={{ marginBottom: 20 }}>
+					{/* <OText size={24} lineHeight={36} weight={'600'} style={{ marginBottom: 20 }}>
 						{carts.length > 1 ? t('MY_CARTS', 'My Carts') : t('CART', 'Cart')}
-					</OText>
+					</OText> */}
 					{carts.map((cart: any, i: number) => (
 						<CCList key={i} style={{ overflow: 'visible' }}>
 							{cart.products.length > 0 && (

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

@@ -85,8 +85,7 @@ const CheckoutUI = (props: any) => {
 		deliveryOptionSelected,
 		instructionsOptions,
 		handleChangeDeliveryOption,
-		currency,
-		merchantId
+		currency
 	} = props
 
 	const theme = useTheme();
@@ -113,7 +112,10 @@ const CheckoutUI = (props: any) => {
 			right: Platform.OS === 'ios' ? 5 : (I18nManager.isRTL ? 30 : 0),
 			position: 'absolute',
 			fontSize: 20
-		}
+		},
+		wrapperNavbar: Platform.OS === 'ios'
+			? { paddingVertical: 0, paddingHorizontal: 40 }
+			: { paddingVertical: 20, paddingHorizontal: 40 }
 	})
 
 	const [, { showToast }] = useToast();
@@ -133,11 +135,20 @@ const CheckoutUI = (props: any) => {
 	const [isDeliveryOptionModalVisible, setIsDeliveryOptionModalVisible] = useState(false)
 	const [showGateway, setShowGateway] = useState<any>({ closedByUsed: false, open: false });
 	const [webviewPaymethod, setWebviewPaymethod] = useState<any>(null)
-	
+
 	const placeSpotTypes = [3, 4]
-	const isWalletEnabled = configs?.wallet_enabled?.value === '1' && (configs?.wallet_cash_enabled?.value === '1' || configs?.wallet_credit_point_enabled?.value === '1')
+  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'
+  const isWalletEnabled = configs?.cash_wallet?.value && configs?.wallet_enabled?.value === '1' && (isWalletCashEnabled || isWalletCreditPointsEnabled)
+
 	const isPreOrder = configs?.preorder_status_enabled?.value === '1'
-	const isDisabledButtonPlace = loading || !cart?.valid || (!paymethodSelected && cart?.balance > 0) || placing || errorCash || cart?.subtotal < cart?.minimum || (placeSpotTypes.includes(options?.type) && !cart?.place)
+	const isDisabledButtonPlace = loading || !cart?.valid || (!paymethodSelected && cart?.balance > 0) || placing || errorCash ||
+		cart?.subtotal < cart?.minimum || (placeSpotTypes.includes(options?.type) && !cart?.place) ||
+		(options.type === 1 &&
+			validationFields?.fields?.checkout?.driver_tip?.enabled &&
+			validationFields?.fields?.checkout?.driver_tip?.required &&
+			(Number(cart?.driver_tip) <= 0))
 
 	const driverTipsOptions = typeof configs?.driver_tip_options?.value === 'string'
 		? JSON.parse(configs?.driver_tip_options?.value) || []
@@ -239,7 +250,7 @@ const CheckoutUI = (props: any) => {
 
 	useEffect(() => {
 		if (cart?.products?.length === 0) {
-			navigation?.canGoBack() && navigation.goBack();
+			onNavigationRedirect('Business', { store: cart?.business?.slug, header: null, logo: null })
 		}
 	}, [cart?.products])
 
@@ -250,13 +261,18 @@ const CheckoutUI = (props: any) => {
 	return (
 		<>
 			<Container noPadding>
-				<NavBar
-					isVertical
-					onActionLeft={() => navigation?.canGoBack() && navigation.goBack()}
-					title={t('CHECKOUT', 'Checkout')}
-					titleStyle={{ marginLeft: 0, marginRight: 0, paddingLeft: 40 }}
-					btnStyle={{ marginLeft: 40, padding: 40 }}
-				/>
+				<View style={styles.wrapperNavbar}>
+					<NavBar
+						title={t('CHECKOUT', 'Checkout')}
+						titleAlign={'center'}
+						onActionLeft={() => navigation?.canGoBack() && navigation.goBack()}
+						showCall={false}
+						btnStyle={{ paddingLeft: 0 }}
+						style={{ marginTop: Platform.OS === 'ios' ? 0 : 30 }}
+						titleWrapStyle={{ paddingHorizontal: 0 }}
+						titleStyle={{ marginRight: 0, marginLeft: 0 }}
+					/>
+				</View>
 				<ChContainer style={styles.pagePadding}>
 					<ChSection style={{ paddingTop: 0 }}>
 						<ChHeader>
@@ -547,18 +563,17 @@ const CheckoutUI = (props: any) => {
 									onNavigationRedirect={onNavigationRedirect}
 									paySelected={paymethodSelected}
 									handlePaymentMethodClickCustom={handlePaymentMethodClick}
-									handlePlaceOrder={handlePlaceOrder}
-									merchantId={merchantId}
 								/>
 							</ChPaymethods>
 						</ChSection>
 					)}
 
-					{!cartState.loading && cart && isWalletEnabled && (
+					{!cartState.loading && cart && isWalletEnabled && businessDetails?.business?.configs && (
 						<WalletPaymentOptionContainer>
 							<PaymentOptionWallet
 								cart={cart}
 								businessId={cart?.business_id}
+								businessConfigs={businessDetails?.business?.configs}
 							/>
 						</WalletPaymentOptionContainer>
 					)}
@@ -596,21 +611,19 @@ const CheckoutUI = (props: any) => {
 												</OText>
 											</TouchableOpacity>
 										</CartHeader>
-										{props.isFranchiseApp && (
-											<TouchableOpacity
-												onPress={() => setOpenChangeStore(true)}
-												style={{ alignSelf: 'flex-start' }}
+										<TouchableOpacity
+											onPress={() => setOpenChangeStore(true)}
+											style={{ alignSelf: 'flex-start' }}
+										>
+											<OText
+												size={12}
+												lineHeight={18}
+												color={theme.colors.textSecondary}
+												style={{ textDecorationLine: 'underline' }}
 											>
-												<OText
-													size={12}
-													lineHeight={18}
-													color={theme.colors.textSecondary}
-													style={{ textDecorationLine: 'underline' }}
-												>
-													{t('CHANGE_STORE', 'Change store')}
-												</OText>
-											</TouchableOpacity>
-										)}
+												{t('CHANGE_STORE', 'Change store')}
+											</OText>
+										</TouchableOpacity>
 										<OrderSummary
 											cart={cart}
 											isCartPending={cart?.status === 2}
@@ -624,7 +637,7 @@ const CheckoutUI = (props: any) => {
 
 					{!cartState.loading && cart && (
 						<View>
-							<ChErrors style={{ marginBottom: 0 }}>
+							<ChErrors style={{ marginBottom: 10 }}>
 								{!cart?.valid_address && cart?.status !== 2 && (
 									<OText
 										color={theme.colors.error}
@@ -648,7 +661,7 @@ const CheckoutUI = (props: any) => {
 										color={theme.colors.error}
 										size={12}
 									>
-										{t('WARNING_INVALID_PRODUCTS', 'Some products are invalid, please check them.')}
+										{t('WARNING_INVALID_PRODUCTS_CHECKOUT', 'To continue with your checkout, please remove from your cart the products that are not available.')}
 									</OText>
 								)}
 								{placeSpotTypes.includes(options?.type) && !cart?.place && (
@@ -659,11 +672,22 @@ const CheckoutUI = (props: any) => {
 										{t('WARNING_PLACE_SPOT', 'Please, select your spot to place order.')}
 									</OText>
 								)}
+								{options.type === 1 &&
+									validationFields?.fields?.checkout?.driver_tip?.enabled &&
+									validationFields?.fields?.checkout?.driver_tip?.required &&
+									(Number(cart?.driver_tip) <= 0) && (
+										<OText
+											color={theme.colors.error}
+											size={12}
+										>
+											{t('WARNING_INVALID_DRIVER_TIP', 'Driver Tip is required.')}
+										</OText>
+									)}
 							</ChErrors>
 						</View>
 					)}
 					<OModal
-						open={openChangeStore && props.isFranchiseApp}
+						open={openChangeStore}
 						entireModal
 						customClose
 						onClose={() => setOpenChangeStore(false)}
@@ -707,19 +731,6 @@ const CheckoutUI = (props: any) => {
 					setShowGateway={setShowGateway}
 				/>
 			)}
-			{webviewPaymethod?.gateway === 'square' && showGateway.open && (
-				<PaymentOptionsWebView
-					onNavigationRedirect={onNavigationRedirect}
-					uri={`https://test-square-f50f7.web.app`}
-					user={user}
-					token={token}
-					cart={cart}
-					currency={currency}
-					webviewPaymethod={webviewPaymethod}
-					setShowGateway={setShowGateway}
-					locationId={'L1NGAY5M6KJRX'}
-				/>
-			)}
 		</>
 	)
 }
@@ -872,7 +883,7 @@ export const Checkout = (props: any) => {
 		...props,
 		UIComponent: CheckoutUI,
 		cartState,
-		[props.isFranchiseApp ? 'uuid' : 'businessId']: props.isFranchiseApp ? cartUuid : cartState.cart?.business_id
+		uuid: cartUuid
 	}
 
 	return (