ordering-ui-react-native 0.18.55 → 0.18.56-crash-driver-1

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

@@ -1,8 +1,13 @@
-import React, { useState, useEffect } from 'react';
-import { View, StyleSheet, TouchableOpacity, Platform, I18nManager, ScrollView } from 'react-native';
+import React, { useState, useEffect, useCallback, useRef } from 'react';
+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 {
 	Checkout as CheckoutController,
 	useOrder,
@@ -44,17 +49,20 @@ import {
 	DeliveryOptionsContainer,
 	DeliveryOptionItem,
 	WalletPaymentOptionContainer,
-	CartHeader
+	CartHeader,
+	TopHeader,
+	TopActions
 } from './styles';
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
-
 import { FloatingButton } from '../FloatingButton';
 import { Container } from '../../layouts/Container';
 import NavBar from '../NavBar';
 import { OrderSummary } from '../OrderSummary';
-import { getTypesText, vibrateApp } from '../../utils';
+import { getTypesText } from '../../utils';
 import { CartStoresListing } from '../CartStoresListing';
 import { PaymentOptionsWebView } from '../../../../../src/components/PaymentOptionsWebView';
+import { DeviceOrientationMethods } from '../../../../../src/hooks/DeviceOrientation'
+const { useDeviceOrientation } = DeviceOrientationMethods
 
 const mapConfigs = {
 	mapZoom: 16,
@@ -93,10 +101,14 @@ const CheckoutUI = (props: any) => {
 		currency,
 		merchantId,
 		setPlaceSpotNumber,
-		maxDate
+		maxDate,
+		androidAppId,
+		urlscheme,
+		checkoutFieldsState
 	} = props
 
 	const theme = useTheme();
+	const isFocused = useIsFocused();
 
 	const styles = StyleSheet.create({
 		btnBackArrow: {
@@ -112,7 +124,7 @@ const CheckoutUI = (props: any) => {
 			padding: 20
 		},
 		pagePadding: {
-			paddingHorizontal: 40
+			paddingHorizontal: 20
 		},
 		icon: {
 			top: 15,
@@ -121,13 +133,14 @@ const CheckoutUI = (props: any) => {
 			fontSize: 20
 		},
 		detailWrapper: {
-			paddingHorizontal: 40,
+			paddingHorizontal: 20,
 			width: '100%'
 		},
 		wrapperNavbar: {
-			paddingVertical: 0,
-			paddingHorizontal: 40,
-			marginVertical: 2
+			paddingVertical: 2,
+			paddingHorizontal: 20,
+			backgroundColor: theme?.colors?.white,
+			borderWidth: 0
 		}
 	})
 
@@ -140,6 +153,10 @@ const CheckoutUI = (props: any) => {
 	const [{ options, carts, loading }, { confirmCart }] = useOrder();
 	const [validationFields] = useValidationFields();
 	const [events] = useEvent()
+	const [orientationState] = useDeviceOrientation();
+	const [isReadMore, setIsReadMore] = useState(false)
+	const [lengthMore, setLengthMore] = useState(false)
+	const WIDTH_SCREEN = orientationState?.dimensions?.width
 
 	const [errorCash, setErrorCash] = useState(false);
 	const [userErrors, setUserErrors] = useState<any>([]);
@@ -147,17 +164,24 @@ 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>([])
-	const [openModal, setOpenModal] = useState({ login: false, signup: false })
+	const [openModal, setOpenModal] = useState({ login: false, signup: false, isGuest: false })
 	const [allowedGuest, setAllowedGuest] = useState(false)
 	const [placeByMethodPay, setPlaceByMethodPay] = useState(false)
 	const [methodPaySupported, setMethodPaySupported] = useState({ enabled: false, message: null, loading: true })
+	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 notFields = ['coupon', 'driver_tip', 'mobile_phone', 'address', 'zipcode', 'address_notes', 'comments']
 	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'
@@ -181,14 +205,21 @@ const CheckoutUI = (props: any) => {
 	}, cart?.subtotal)
 
 	const validateCommentsCartField = validationFields?.fields?.checkout?.comments?.enabled && validationFields?.fields?.checkout?.comments?.required && (cart?.comment === null || cart?.comment?.trim().length === 0)
+	const validateZipcodeCard = validationFields?.fields?.card?.zipcode?.enabled &&
+		validationFields?.fields?.card?.zipcode?.required &&
+		paymethodSelected?.data?.card &&
+		!paymethodSelected?.data?.card?.zipcode &&
+		paymethodSelected?.gateway === 'stripe'
 
 	const isDisabledButtonPlace = loading || !cart?.valid || (!paymethodSelected && cart?.balance > 0) ||
 		placing || errorCash || subtotalWithTaxes < cart?.minimum ||
-		(options.type === 1 &&
+		(cardsMethods.includes(paymethodSelected?.gateway) && cardList?.cards?.length === 0) ||
+		(options.type === 1 && !isGiftCardCart &&
 			validationFields?.fields?.checkout?.driver_tip?.enabled &&
 			validationFields?.fields?.checkout?.driver_tip?.required &&
 			(Number(cart?.driver_tip) <= 0)) ||
-		(validateCommentsCartField)
+		(validateCommentsCartField) ||
+		(validateZipcodeCard)
 		|| (methodsPay.includes(paymethodSelected?.gateway) && (!methodPaySupported.enabled || methodPaySupported.loading))
 
 	const driverTipsOptions = typeof configs?.driver_tip_options?.value === 'string'
@@ -199,6 +230,9 @@ const CheckoutUI = (props: any) => {
 
 	const cartsWithProducts = carts && Object.values(carts).filter((cart: any) => cart.products.length) || null
 
+	const isSandboxCredomatic = configs?.credomatic_integration_sandbox?.value === '1'
+	const credomaticKeyId = isSandboxCredomatic ? configs?.credomatic_integration_public_sandbox_key?.value : configs?.credomatic_integration_public_production_key?.value
+	const credomaticUrl = `https://integrations.ordering.co/credomatic/front/auth_mobile.html?title=${t('CREDOMATIC_PAYMENT', 'Credomatic payment')}&body=${t('CREDOMATIC_PROCESSING', 'Processing transaction')}`
 	const deliveryOptions = instructionsOptions?.result && instructionsOptions?.result?.filter((option: any) => option?.enabled)?.map((option: any) => {
 		return {
 			value: option?.id, key: option?.id, label: t(option?.name.toUpperCase().replace(/\s/g, '_'), option?.name)
@@ -211,12 +245,21 @@ const CheckoutUI = (props: any) => {
 		}
 	}
 
+	const vibrateApp = (impact?: string) => {
+		const options = {
+			enableVibrateFallback: true,
+			ignoreAndroidSystemSettings: false
+		};
+		ReactNativeHapticFeedback.trigger(impact || "impactLight", options);
+	}
+
 	const handleSuccessSignup = (user: any) => {
 		login({
 			user,
 			token: user?.session?.access_token
 		})
-		setOpenModal({ ...openModal, signup: false })
+		openModal?.isGuest && handlePlaceOrderAsGuest()
+		setOpenModal({ ...openModal, signup: false, isGuest: false })
 	}
 
 	const handleSuccessLogin = (user: any) => {
@@ -224,9 +267,14 @@ const CheckoutUI = (props: any) => {
 	}
 
 	const handlePlaceOrder = (confirmPayment: any, forcePlace: boolean = false) => {
-		if (!userErrors.length && (!requiredFields?.length || allowedGuest) || forcePlace) {
+		if (stripePaymethods.includes(paymethodSelected?.gateway) && user?.guest_id) {
+			setOpenModal({ ...openModal, signup: true, isGuest: true })
+			return
+		}
+
+		if (!userErrors.length && (!requiredFields?.length) || forcePlace) {
 			vibrateApp()
-			handlerClickPlaceOrder && handlerClickPlaceOrder(null, null, confirmPayment)
+			handlerClickPlaceOrder && handlerClickPlaceOrder(null, { isNative: true }, confirmPayment, NativeStripeSdk?.dismissPlatformPay)
 			return
 		}
 		if (requiredFields?.length) {
@@ -264,7 +312,6 @@ const CheckoutUI = (props: any) => {
 	const checkValidationFields = () => {
 		setUserErrors([])
 		const errors = []
-		const notFields = ['coupon', 'driver_tip', 'mobile_phone', 'address', 'zipcode', 'address_notes']
 		const _requiredFields: any = []
 
 		Object.values(validationFields?.fields?.checkout).map((field: any) => {
@@ -292,16 +339,46 @@ const CheckoutUI = (props: any) => {
 		setUserErrors(errors)
 	}
 
+	const checkGuestValidationFields = () => {
+		const userSelected = user
+		const _requiredFields = checkoutFieldsState?.fields
+			.filter((field: any) => (field?.order_type_id === options?.type) && field?.enabled && field?.required &&
+				!notFields.includes(field?.validation_field?.code) &&
+				userSelected && !userSelected[field?.validation_field?.code])
+			.map((item: any) => item?.validation_field?.code)
+		const guestCheckoutCellPhone = checkoutFieldsState?.fields?.find((field: any) => field.order_type_id === options?.type && field?.validation_field?.code === 'mobile_phone')
+
+		if (
+			userSelected &&
+			!userSelected?.cellphone &&
+			((guestCheckoutCellPhone?.enabled &&
+				guestCheckoutCellPhone?.required) ||
+				configs?.verification_phone_required?.value === '1')
+		) {
+			_requiredFields.push('cellphone')
+		}
+		setRequiredFields(_requiredFields)
+	}
+
 	const togglePhoneUpdate = (val: boolean) => {
 		setPhoneUpdate(val)
 	}
 
+	const handleScroll = ({ nativeEvent: { contentOffset } }: any) => {
+		setShowTitle(contentOffset.y > 30)
+	}
+
 	useEffect(() => {
-		if (validationFields && validationFields?.fields?.checkout) {
+		if (validationFields && validationFields?.fields?.checkout && !user?.guest_id) {
 			checkValidationFields()
 		}
 	}, [validationFields, user])
 
+	useEffect(() => {
+		if (checkoutFieldsState?.loading || !user?.guest_id) return
+		checkGuestValidationFields()
+	}, [user, checkoutFieldsState])
+
 	useEffect(() => {
 		if (errors) {
 			const errorText = manageErrorsToShow(errors)
@@ -311,13 +388,23 @@ const CheckoutUI = (props: any) => {
 
 	useEffect(() => {
 		if (cart?.products?.length === 0) {
-			if (cart?.business?.slug) {
-				onNavigationRedirect('Business', { store: cart?.business?.slug, header: null, logo: null })
-			} else {
+			if (cart?.business_id !== null) {
+				onNavigationRedirect('Business', { store: cart?.business?.slug, header: null, logo: null, fromMulti: props.fromMulti })
+			} 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()
@@ -342,11 +429,84 @@ const CheckoutUI = (props: any) => {
 		cart && events.emit('checkout_started', cart)
 	}, [])
 
+	useEffect(() => {
+		if (cart?.paymethod_data?.gateway === 'credomatic') {
+			if (cart?.paymethod_data?.status === 2) {
+				setShowGateway({ ...showGateway, open: true })
+			} else if (cart?.paymethod_data?.gateway === 'credomatic' && cart?.paymethod_data?.status === 4) {
+				setShowGateway({ ...showGateway, open: false })
+			}
+		}
+	}, [cart?.paymethod_data])
+
+	const onTextLayout = useCallback((e: any) => {
+		setLengthMore((e.nativeEvent.lines.length == 3 && e.nativeEvent.lines[2].width > WIDTH_SCREEN * .76) || e.nativeEvent.lines.length > 3)
+	}, [])
+
+	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) {
+				showToast(ToastType.Error, cartState?.error || cartState.cart)
+				navigation.navigate('BusinessList')
+			}
+		}
+	}, [cartState?.error, cartState?.cart, cartState?.loading, isFocused])
+
+	useEffect(() => {
+		const keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', () => {
+			containerRef?.current?.scrollToEnd && containerRef.current.scrollToEnd({ animated: true })
+		})
+		return () => {
+			keyboardDidShowListener.remove()
+		}
+	}, [])
+
+	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 (
 		<>
-			<Container noPadding>
+			<SafeAreaView style={{ backgroundColor: theme.colors.backgroundPage }}>
+				<View style={styles.wrapperNavbar}>
+					<TopHeader>
+						<TopActions onPress={() => onNavigationRedirect('BottomTab', { screen: 'Cart' }, !props.fromMulti)}>
+							<IconAntDesign
+								name='arrowleft'
+								size={26}
+							/>
+						</TopActions>
+						{showTitle && (
+							<OText
+								size={16}
+								style={{ flex: 1, textAlign: 'center', right: 15 }}
+								weight={Platform.OS === 'ios' ? '600' : 'bold'}
+								numberOfLines={2}
+								ellipsizeMode='tail'
+							>
+								{t('CHECKOUT', 'Checkout')}
+							</OText>
+						)}
+					</TopHeader>
+				</View>
+			</SafeAreaView>
+			<Container pt={0} forwardRef={containerRef} showsVerticalScrollIndicator={false} noPadding onScroll={handleScroll}>
 				<View style={styles.wrapperNavbar}>
 					<NavBar
+						hideArrowLeft
 						title={t('CHECKOUT', 'Checkout')}
 						titleAlign={'center'}
 						onActionLeft={() => onNavigationRedirect('BottomTab', { screen: 'Cart' }, !props.fromMulti)}
@@ -358,44 +518,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>
@@ -433,6 +595,25 @@ const CheckoutUI = (props: any) => {
 														{businessDetails?.business?.address}
 													</OText>
 												)}
+												{businessDetails?.business?.address_notes && (
+													<>
+														<OText
+															size={12}
+															lineHeight={18}
+															numberOfLines={isReadMore ? 20 : 3}
+															onTextLayout={onTextLayout}
+														>
+															{businessDetails?.business?.address_notes}
+														</OText>
+														{lengthMore && (
+															<TouchableOpacity
+																onPress={() => setIsReadMore(!isReadMore)}
+															>
+																<OText size={12} color={theme.colors.primary}>{isReadMore ? t('SHOW_LESS', 'Show less') : t('READ_MORE', 'Read more')}</OText>
+															</TouchableOpacity>
+														)}
+													</>
+												)}
 											</View>
 										</>
 									)}
@@ -466,13 +647,15 @@ const CheckoutUI = (props: any) => {
 											<OButton
 												text={t('SIGN_UP', 'Sign up')}
 												textStyle={{ color: theme.colors.white }}
+												bgColor={theme.colors.primary}
+												borderColor={theme.colors.primary}
 												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}
+												textStyle={{ color: theme.colors.white }}
+												bgColor={theme.colors.primary}
 												borderColor={theme.colors.primary}
 												style={{ borderRadius: 7.6, marginTop: 20 }}
 												onClick={() => setOpenModal({ ...openModal, login: true })}
@@ -547,7 +730,7 @@ const CheckoutUI = (props: any) => {
 												data: deliveryOptions || [],
 												renderItem: ({ item }: any) => (
 													<TouchableOpacity
-														onPress={() => changeDeliveryOption(item.value)}
+														onPress={() => !!cart?.uuid && changeDeliveryOption(item.value)}
 														disabled={
 															deliveryOptionSelected === item.value
 														}
@@ -617,7 +800,7 @@ const CheckoutUI = (props: any) => {
 						cart?.status !== 2 &&
 						validationFields?.fields?.checkout?.driver_tip?.enabled &&
 						driverTipsOptions && driverTipsOptions?.length > 0 &&
-						!isGiftCardCart &&
+						cart?.business_id &&
 						(
 							<ChSection>
 								<ChDriverTips>
@@ -665,10 +848,18 @@ const CheckoutUI = (props: any) => {
 									handlePaymentMethodClickCustom={handlePaymentMethodClick}
 									handlePlaceOrder={handlePlaceOrder}
 									merchantId={merchantId}
+									urlscheme={urlscheme}
+									androidAppId={androidAppId}
 									setMethodPaySupported={setMethodPaySupported}
 									methodPaySupported={methodPaySupported}
 									placeByMethodPay={placeByMethodPay}
 									setPlaceByMethodPay={setPlaceByMethodPay}
+									cardList={cardList}
+									setCardList={setCardList}
+									requiredFields={requiredFields}
+									openUserModal={setIsOpen}
+									paymethodClicked={paymethodClicked}
+									setPaymethodClicked={setPaymethodClicked}
 								/>
 							</ChPaymethods>
 						</ChSection>
@@ -704,7 +895,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')}
@@ -782,13 +973,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
@@ -798,7 +991,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) && (
@@ -818,6 +1011,15 @@ const CheckoutUI = (props: any) => {
 										{t('WARNING_INVALID_CART_COMMENTS', 'Cart comments is required.')}
 									</OText>
 								)}
+
+								{validateZipcodeCard && (
+									<OText
+										color={theme.colors.error}
+										size={12}
+									>
+										{t('WARNING_CARD_ZIPCODE_REQUIRED', 'Your card selected has not zipcode')}
+									</OText>
+								)}
 							</ChErrors>
 						</View>
 					)}
@@ -853,7 +1055,14 @@ const CheckoutUI = (props: any) => {
 								handlePlaceOrderAsGuest={handlePlaceOrderAsGuest}
 								onClose={() => {
 									setIsOpen(false)
-									handlePlaceOrder(null, true)
+									if (paymethodClicked) {
+										setPaymethodClicked({
+											...paymethodClicked,
+											confirmed: true
+										})
+									} else {
+										handlePlaceOrder(null, true)
+									}
 								}}
 								setIsOpen={setIsOpen}
 							/>
@@ -861,7 +1070,7 @@ const CheckoutUI = (props: any) => {
 					</OModal>
 					<OModal
 						open={openModal.signup}
-						onClose={() => setOpenModal({ ...openModal, signup: false })}
+						onClose={() => setOpenModal({ ...openModal, signup: false, isGuest: false })}
 					>
 						<ScrollView style={{ paddingHorizontal: 20, width: '100%' }}>
 							<SignupForm
@@ -938,6 +1147,29 @@ const CheckoutUI = (props: any) => {
 					locationId={'L1NGAY5M6KJRX'}
 				/>
 			)}
+			{cart?.paymethod_data?.gateway === 'credomatic' && cart?.paymethod_data?.status === 2 && showGateway.open && (
+				<PaymentOptionsWebView
+					title={t('CREDOMATIC_PAYMENT', 'Credomatic payment')}
+					onNavigationRedirect={onNavigationRedirect}
+					uri={credomaticUrl}
+					user={user}
+					cart={cart}
+					additionalParams={{
+						type: 'auth',
+						key_id: credomaticKeyId,
+						hash: cart?.paymethod_data?.result?.hash,
+						time: cart?.paymethod_data?.result?.time,
+						amount: cart?.total,
+						orderid: cart?.uuid,
+						ccnumber: cardList?.cards?.[0]?.number,
+						ccexp: cardList?.cards?.[0]?.expiryString,
+						cvv: cardList?.cards?.[0]?.cvc,
+						redirect: credomaticUrl
+					}}
+					webviewPaymethod={webviewPaymethod}
+					setShowGateway={setShowGateway}
+				/>
+			)}
 		</>
 	)
 }
@@ -964,7 +1196,8 @@ export const Checkout = (props: any) => {
 	const getOrder = async (cartId: any) => {
 		try {
 			let result: any = {}
-			const cart = orderState?.carts.find((cart: any) => cart.uuid === cartId)
+			const cartsWithProducts = orderState?.carts && (Object.values(orderState?.carts)?.filter(cart => cart?.products && cart?.products?.length) || null)
+			const cart = cartsWithProducts?.find((cart: any) => cart.uuid === cartId)
 			if (cart) {
 				result = { ...cart }
 			} else {

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;