ordering-ui-react-native 0.17.11 → 0.17.12-release

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

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { View, StyleSheet, TouchableOpacity, Platform, I18nManager } from 'react-native';
+import { View, StyleSheet, TouchableOpacity, Platform, I18nManager, ScrollView } from 'react-native';
 import { initStripe, useConfirmPayment } from '@stripe/stripe-react-native';
 import Picker from 'react-native-country-picker-modal';
 import MaterialIcons from 'react-native-vector-icons/MaterialIcons'
@@ -14,9 +14,10 @@ import {
 	useConfig,
 	useToast,
 	ToastType,
+	useEvent
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
-import { OText, OIcon, OModal } from '../shared';
+import { OText, OIcon, OModal, OButton } from '../shared';
 
 import { AddressDetails } from '../AddressDetails';
 import { PaymentOptions } from '../PaymentOptions';
@@ -25,6 +26,8 @@ import { NotFoundSource } from '../NotFoundSource';
 import { UserDetails } from '../UserDetails';
 import { PaymentOptionWallet } from '../PaymentOptionWallet';
 import { PlaceSpot } from '../PlaceSpot'
+import { SignupForm } from '../SignupForm'
+import { LoginForm } from '../LoginForm'
 
 import {
 	ChContainer,
@@ -49,7 +52,7 @@ import { FloatingButton } from '../FloatingButton';
 import { Container } from '../../layouts/Container';
 import NavBar from '../NavBar';
 import { OrderSummary } from '../OrderSummary';
-import { getTypesText } from '../../utils';
+import { getTypesText, vibrateApp } from '../../utils';
 import { CartStoresListing } from '../CartStoresListing';
 import { PaymentOptionsWebView } from '../../../../../src/components/PaymentOptionsWebView';
 
@@ -78,6 +81,7 @@ const CheckoutUI = (props: any) => {
 		placing,
 		cartState,
 		cartUuid,
+		loyaltyPlansState,
 		businessDetails,
 		paymethodSelected,
 		handlePaymethodChange,
@@ -87,7 +91,9 @@ const CheckoutUI = (props: any) => {
 		instructionsOptions,
 		handleChangeDeliveryOption,
 		currency,
-		merchantId
+		merchantId,
+		setPlaceSpotNumber,
+		maxDate
 	} = props
 
 	const theme = useTheme();
@@ -118,19 +124,22 @@ const CheckoutUI = (props: any) => {
 			paddingHorizontal: 40,
 			width: '100%'
 		},
-		wrapperNavbar: Platform.OS === 'ios'
-			? { paddingVertical: 0, paddingHorizontal: 40 }
-			: { paddingVertical: 20, paddingHorizontal: 40 }
+		wrapperNavbar: {
+			paddingVertical: 0,
+			paddingHorizontal: 40,
+			marginVertical: 2
+		}
 	})
 
 	const [, { showToast }] = useToast();
 	const [, t] = useLanguage();
-	const [{ user, token }] = useSession();
+	const [{ user, token }, { login }] = useSession();
 	const [ordering] = useApi()
 	const [{ configs }] = useConfig();
 	const [{ parsePrice, parseDate }] = useUtils();
 	const [{ options, carts, loading }, { confirmCart }] = useOrder();
 	const [validationFields] = useValidationFields();
+	const [events] = useEvent()
 
 	const [errorCash, setErrorCash] = useState(false);
 	const [userErrors, setUserErrors] = useState<any>([]);
@@ -142,23 +151,45 @@ const CheckoutUI = (props: any) => {
 	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 [allowedGuest, setAllowedGuest] = useState(false)
+	const [placeByMethodPay, setPlaceByMethodPay] = useState(false)
+	const [methodPaySupported, setMethodPaySupported] = useState({ enabled: false, message: null, loading: true })
 	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'
 	const isWalletEnabled = configs?.cash_wallet?.value && configs?.wallet_enabled?.value === '1' && (isWalletCashEnabled || isWalletCreditPointsEnabled)
 	const isBusinessChangeEnabled = configs?.cart_change_business_validation?.value === '1'
+	const isChewLayout = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
+	const hideBusinessAddress = theme?.checkout?.components?.business?.components?.address?.hidden
+	const hideBusinessDetails = theme?.checkout?.components?.business?.hidden
+	const hideBusinessMap = theme?.checkout?.components?.business?.components?.map?.hidden
+	const hideCustomerDetails = theme?.checkout?.components?.customer?.hidden
+
+	const creditPointPlan = loyaltyPlansState?.result?.find((loyal: any) => loyal.type === 'credit_point')
+	const creditPointPlanOnBusiness = creditPointPlan?.businesses?.find((b: any) => b.business_id === cart?.business_id && b.accumulates)
+	const methodsPay = ['google_pay', 'apple_pay']
 
 	const isPreOrder = configs?.preorder_status_enabled?.value === '1'
+	const subtotalWithTaxes = cart?.taxes?.reduce((acc: any, item: any) => {
+		if (item?.type === 1)
+			return acc = acc + item?.summary?.tax
+		return acc = acc
+	}, cart?.subtotal)
+
+	const validateCommentsCartField = validationFields?.fields?.checkout?.comments?.enabled && validationFields?.fields?.checkout?.comments?.required && (cart?.comment === null || cart?.comment?.trim().length === 0)
+
 	const isDisabledButtonPlace = loading || !cart?.valid || (!paymethodSelected && cart?.balance > 0) ||
-		placing || errorCash || cart?.subtotal < cart?.minimum ||
-		// (placeSpotTypes.includes(options?.type) && !cart?.place) ||
+		placing || errorCash || subtotalWithTaxes < cart?.minimum ||
 		(options.type === 1 &&
 			validationFields?.fields?.checkout?.driver_tip?.enabled &&
 			validationFields?.fields?.checkout?.driver_tip?.required &&
-			(Number(cart?.driver_tip) <= 0))
+			(Number(cart?.driver_tip) <= 0)) ||
+		(validateCommentsCartField)
+		|| (methodsPay.includes(paymethodSelected?.gateway) && (!methodPaySupported.enabled || methodPaySupported.loading))
 
 	const driverTipsOptions = typeof configs?.driver_tip_options?.value === 'string'
 		? JSON.parse(configs?.driver_tip_options?.value) || []
@@ -180,8 +211,21 @@ const CheckoutUI = (props: any) => {
 		}
 	}
 
-	const handlePlaceOrder = (confirmPayment: any) => {
-		if (!userErrors.length && !requiredFields?.length) {
+	const handleSuccessSignup = (user: any) => {
+		login({
+			user,
+			token: user?.session?.access_token
+		})
+		setOpenModal({ ...openModal, signup: false })
+	}
+
+	const handleSuccessLogin = (user: any) => {
+		if (user) setOpenModal({ ...openModal, login: false })
+	}
+
+	const handlePlaceOrder = (confirmPayment: any, forcePlace: boolean = false) => {
+		if (!userErrors.length && (!requiredFields?.length || allowedGuest) || forcePlace) {
+			vibrateApp()
 			handlerClickPlaceOrder && handlerClickPlaceOrder(null, null, confirmPayment)
 			return
 		}
@@ -197,6 +241,11 @@ const CheckoutUI = (props: any) => {
 		setIsUserDetailsEdit(true)
 	}
 
+	const handlePlaceOrderAsGuest = () => {
+		setIsOpen(false)
+		handlerClickPlaceOrder && handlerClickPlaceOrder()
+	}
+
 	const handlePaymentMethodClick = (paymethod: any) => {
 		setShowGateway({ closedByUser: false, open: true })
 		setWebviewPaymethod(paymethod)
@@ -260,13 +309,13 @@ const CheckoutUI = (props: any) => {
 		}
 	}, [errors])
 
-	// useEffect(() => {
-	//   handlePaymethodChange(null)
-	// }, [cart?.total])
-
 	useEffect(() => {
 		if (cart?.products?.length === 0) {
-			onNavigationRedirect('Business', { store: cart?.business?.slug, header: null, logo: null })
+			if (cart?.business?.slug) {
+				onNavigationRedirect('Business', { store: cart?.business?.slug, header: null, logo: null })
+			} else {
+				onNavigationRedirect('Wallets')
+			}
 		}
 	}, [cart?.products])
 
@@ -274,6 +323,25 @@ const CheckoutUI = (props: any) => {
 		onFailPaypal()
 	}, [showGateway.closedByUser])
 
+	const HeaderTitle = (props: any) => {
+		const { text } = props
+		return (
+			<OText
+				size={16}
+				lineHeight={24}
+				weight={'500'}
+				mBottom={props.mb ?? 10}
+				color={theme.colors.textNormal}
+			>
+				{text}
+			</OText>
+		)
+	}
+
+	useEffect(() => {
+		cart && events.emit('checkout_started', cart)
+	}, [])
+
 	return (
 		<>
 			<Container noPadding>
@@ -281,24 +349,31 @@ const CheckoutUI = (props: any) => {
 					<NavBar
 						title={t('CHECKOUT', 'Checkout')}
 						titleAlign={'center'}
-						onActionLeft={() => navigation?.canGoBack() && navigation.goBack()}
+						onActionLeft={() => onNavigationRedirect('BottomTab', { screen: 'Cart' }, !props.fromMulti)}
 						showCall={false}
-						btnStyle={{ paddingLeft: 0 }}
-						style={{ marginTop: Platform.OS === 'ios' ? 0 : 30 }}
+						btnStyle={{ paddingLeft: 0, paddingTop: Platform.OS == 'ios' ? 0 : 2 }}
 						titleWrapStyle={{ paddingHorizontal: 0 }}
 						titleStyle={{ marginRight: 0, marginLeft: 0 }}
+						style={{ marginTop: 20 }}
 					/>
 				</View>
 				<ChContainer style={styles.pagePadding}>
 					<ChSection style={{ paddingTop: 0 }}>
 						<ChHeader>
-							{/* <OrderTypeSelector configTypes={configTypes} /> */}
-							<CHMomentWrapper onPress={() => navigation.navigate('OrderTypes', { configTypes: configTypes })}>
-								<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textSecondary}>{t(getTypesText(options?.type || 1), 'Delivery')}</OText>
+							<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
@@ -322,85 +397,116 @@ const CheckoutUI = (props: any) => {
 						<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginTop: 18, marginHorizontal: -40 }} />
 					</ChSection>
 
-					<ChSection>
-						<ChBusinessDetails>
-							{
-								(businessDetails?.loading || cartState.loading || !businessDetails?.business || Object.values(businessDetails?.business).length === 0) &&
-								!businessDetails?.error &&
-								(
+					{!isGiftCardCart && !hideBusinessDetails && (
+						<ChSection>
+							<ChBusinessDetails>
+								{
+									(businessDetails?.loading || cartState.loading || !businessDetails?.business || Object.values(businessDetails?.business).length === 0) &&
+									!businessDetails?.error &&
+									(
+										<Placeholder Animation={Fade}>
+											<PlaceholderLine height={20} />
+											<PlaceholderLine height={12} />
+											<PlaceholderLine height={12} />
+											<PlaceholderLine height={12} style={{ marginBottom: 20 }} />
+										</Placeholder>
+									)}
+								{
+									!cartState.loading &&
+									businessDetails?.business &&
+									Object.values(businessDetails?.business).length > 0 &&
+									(
+										<>
+											<HeaderTitle text={t('BUSINESS_DETAILS', 'Business Details')} />
+											<View>
+												<OText size={12} lineHeight={18} weight={'400'}>
+													{businessDetails?.business?.name}
+												</OText>
+												<OText size={12} lineHeight={18} weight={'400'}>
+													{businessDetails?.business?.email}
+												</OText>
+												<OText size={12} lineHeight={18} weight={'400'}>
+													{businessDetails?.business?.cellphone}
+												</OText>
+												{!hideBusinessAddress && (
+													<OText size={12} lineHeight={18} weight={'400'}>
+														{businessDetails?.business?.address}
+													</OText>
+												)}
+											</View>
+										</>
+									)}
+								{businessDetails?.error && businessDetails?.error?.length > 0 && (
+									<View>
+										<HeaderTitle text={t('BUSINESS_DETAILS', 'Business Details')} />
+										<NotFoundSource
+											content={businessDetails?.error[0]?.message || businessDetails?.error[0]}
+										/>
+									</View>
+								)}
+							</ChBusinessDetails>
+							<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginHorizontal: -40 }} />
+						</ChSection>
+					)}
+					{!hideCustomerDetails && (
+
+						<ChSection>
+							<ChUserDetails>
+								{cartState.loading ? (
 									<Placeholder Animation={Fade}>
 										<PlaceholderLine height={20} />
 										<PlaceholderLine height={12} />
 										<PlaceholderLine height={12} />
 										<PlaceholderLine height={12} style={{ marginBottom: 20 }} />
 									</Placeholder>
-								)}
-							{
-								!cartState.loading &&
-								businessDetails?.business &&
-								Object.values(businessDetails?.business).length > 0 &&
-								(
-									<>
-										<OText size={16} lineHeight={24} weight={'500'} mBottom={10}>
-											{t('BUSINESS_DETAILS', 'Business Details')}
-										</OText>
+								) : (
+									(user?.guest_id && !allowedGuest) ? (
 										<View>
-											<OText size={12} lineHeight={18} weight={'400'}>
-												{businessDetails?.business?.name}
-											</OText>
-											<OText size={12} lineHeight={18} weight={'400'}>
-												{businessDetails?.business?.email}
-											</OText>
-											<OText size={12} lineHeight={18} weight={'400'}>
-												{businessDetails?.business?.cellphone}
-											</OText>
-											<OText size={12} lineHeight={18} weight={'400'}>
-												{businessDetails?.business?.address}
-											</OText>
+											<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 })}
+											/>
+											<OButton
+												text={t('CONTINUE_AS_GUEST', 'Continue as guest')}
+												textStyle={{ color: theme.colors.black }}
+												bgColor={theme.colors.white}
+												borderColor={theme.colors.black}
+												style={{ borderRadius: 7.6, marginTop: 20 }}
+												onClick={() => setAllowedGuest(true)}
+											/>
 										</View>
-									</>
+									) : (
+										<UserDetails
+											isUserDetailsEdit={isUserDetailsEdit}
+											HeaderTitle={<HeaderTitle text={t('CUSTOMER_DETAILS', 'Customer Details')} mb={0} />}
+											cartStatus={cart?.status}
+											businessId={cart?.business_id}
+											useValidationFields
+											useDefualtSessionManager
+											useSessionUser
+											isCheckout
+											phoneUpdate={phoneUpdate}
+											togglePhoneUpdate={togglePhoneUpdate}
+										/>
+									)
 								)}
-							{businessDetails?.error && businessDetails?.error?.length > 0 && (
-								<View>
-									<OText size={16} lineHeight={24} weight={'500'}>
-										{t('BUSINESS_DETAILS', 'Business Details')}
-									</OText>
-									<NotFoundSource
-										content={businessDetails?.error[0]?.message || businessDetails?.error[0]}
-									/>
-								</View>
-							)}
-						</ChBusinessDetails>
-						<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginHorizontal: -40 }} />
-					</ChSection>
-
-					<ChSection>
-						<ChUserDetails>
-							{cartState.loading ? (
-								<Placeholder Animation={Fade}>
-									<PlaceholderLine height={20} />
-									<PlaceholderLine height={12} />
-									<PlaceholderLine height={12} />
-									<PlaceholderLine height={12} style={{ marginBottom: 20 }} />
-								</Placeholder>
-							) : (
-								<UserDetails
-									isUserDetailsEdit={isUserDetailsEdit}
-									cartStatus={cart?.status}
-									businessId={cart?.business_id}
-									useValidationFields
-									useDefualtSessionManager
-									useSessionUser
-									isCheckout
-									phoneUpdate={phoneUpdate}
-									togglePhoneUpdate={togglePhoneUpdate}
-								/>
-							)}
-						</ChUserDetails>
-						<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginHorizontal: -40 }} />
-					</ChSection>
+							</ChUserDetails>
+							<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginHorizontal: -40 }} />
+						</ChSection>
+					)}
 
-					{options?.type === 1 && (
+					{options?.type === 1 && !isGiftCardCart && (
 						<DeliveryOptionsContainer>
 							{cartState.loading || deliveryOptionSelected === undefined ? (
 								<View style={{ height: 110 }}>
@@ -410,8 +516,8 @@ const CheckoutUI = (props: any) => {
 									</Placeholder>
 								</View>
 							) : (
-								<>
-									<OText size={16}>{t('DELIVERY_OPTIONS', 'Delivery options')}</OText>
+								<ChSection>
+									<HeaderTitle text={t('DELIVERY_OPTIONS', 'Delivery options')} />
 									<View
 										style={{
 											backgroundColor: theme.colors.inputDisabled,
@@ -430,7 +536,7 @@ const CheckoutUI = (props: any) => {
 														<OText
 															size={14}
 														>
-															{deliveryOptions.find((option: any) => option.value === deliveryOptionSelected).label}
+															{deliveryOptions.find((option: any) => option.value === deliveryOptionSelected)?.label}
 														</OText>
 														<MaterialIcons name='keyboard-arrow-down' style={styles.icon} />
 													</DeliveryOptionItem>
@@ -457,7 +563,7 @@ const CheckoutUI = (props: any) => {
 										/>
 									</View>
 									<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginHorizontal: -40 }} />
-								</>
+								</ChSection>
 							)}
 
 						</DeliveryOptionsContainer>
@@ -479,50 +585,30 @@ const CheckoutUI = (props: any) => {
 						</ChSection>
 					)}
 
-					{/* <ChSection>
-        <ChTotal>
-          {
-            (
-              <>
-                <OIcon
-                  url={businessLogo || businessDetails?.business?.logo}
-                  width={80}
-                  height={80}
-                  borderRadius={80}
-                />
-                <View style={{ marginLeft: 10, width: '85%' }}>
-                  <OText size={22} numberOfLines={2} ellipsizeMode='tail' style={{ width: '85%' }}>
-                    {businessName || businessDetails?.business?.name}
-                  </OText>
-                  <OText size={22}>
-                    {cart?.total >= 1 && parsePrice(cart?.total) || cartTotal >= 1 && parsePrice(cartTotal)}
-                  </OText>
-                </View>
-              </>
-            )}
-        </ChTotal>
-      </ChSection> */}
-					<ChSection>
-						<ChAddress>
-							{(businessDetails?.loading || cartState.loading) ? (
-								<Placeholder Animation={Fade}>
-									<PlaceholderLine height={20} style={{ marginBottom: 50 }} />
-									<PlaceholderLine height={100} />
-								</Placeholder>
-							) : (
-								<AddressDetails
-									navigation={navigation}
-									location={businessDetails?.business?.location}
-									businessLogo={businessDetails?.business?.logo}
-									isCartPending={cart?.status === 2}
-									uuid={cartUuid}
-									apiKey={configs?.google_maps_api_key?.value}
-									mapConfigs={mapConfigs}
-								/>
-							)}
-						</ChAddress>
-						<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginTop: 13, marginHorizontal: -40 }} />
-					</ChSection>
+					{!isGiftCardCart && !hideBusinessMap && (
+						<ChSection>
+							<ChAddress>
+								{(businessDetails?.loading || cartState.loading) ? (
+									<Placeholder Animation={Fade}>
+										<PlaceholderLine height={20} style={{ marginBottom: 50 }} />
+										<PlaceholderLine height={100} />
+									</Placeholder>
+								) : (
+									<AddressDetails
+										navigation={navigation}
+										location={options?.address?.location}
+										businessLogo={businessDetails?.business?.logo}
+										isCartPending={cart?.status === 2}
+										uuid={cartUuid}
+										apiKey={configs?.google_maps_api_key?.value}
+										mapConfigs={mapConfigs}
+										HeaderTitle={<HeaderTitle text={t('DELIVERY_ADDRESS', 'Delivery address')} mb={0} />}
+									/>
+								)}
+							</ChAddress>
+							<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginTop: 13, marginHorizontal: -40 }} />
+						</ChSection>
+					)}
 
 					{!cartState.loading &&
 						cart &&
@@ -531,22 +617,22 @@ const CheckoutUI = (props: any) => {
 						cart?.status !== 2 &&
 						validationFields?.fields?.checkout?.driver_tip?.enabled &&
 						driverTipsOptions && driverTipsOptions?.length > 0 &&
+						!isGiftCardCart &&
 						(
 							<ChSection>
 								<ChDriverTips>
-									<OText size={16} lineHeight={24} color={theme.colors.textNormal}>
-										{t('DRIVER_TIPS', 'Driver Tips')}
-									</OText>
+									<HeaderTitle text={t('DRIVER_TIPS', 'Driver Tips')} mb={0} />
 									<DriverTips
 										uuid={cartUuid}
 										businessId={cart?.business_id}
-										driverTipsOptions={driverTipsOptions}
-										isFixedPrice={parseInt(configs?.driver_tip_type?.value, 10) === 1 || !!parseInt(configs?.driver_tip_use_custom?.value, 10)}
+										driverTipsOptions={!driverTipsOptions.includes(0) ? [0, ...driverTipsOptions] : driverTipsOptions}
+										isFixedPrice={parseInt(configs?.driver_tip_type?.value, 10) === 1}
 										isDriverTipUseCustom={!!parseInt(configs?.driver_tip_use_custom?.value, 10)}
-										driverTip={parseInt(configs?.driver_tip_type?.value, 10) === 1 || !!parseInt(configs?.driver_tip_use_custom?.value, 10)
+										driverTip={parseInt(configs?.driver_tip_type?.value, 10) === 1
 											? cart?.driver_tip
 											: cart?.driver_tip_rate}
 										useOrderContext
+										cart={cart}
 									/>
 								</ChDriverTips>
 							</ChSection>
@@ -555,9 +641,7 @@ const CheckoutUI = (props: any) => {
 					{!cartState.loading && cart && cart?.status !== 2 && cart?.valid && (
 						<ChSection>
 							<ChPaymethods>
-								<OText size={16} lineHeight={24} color={theme.colors.textNormal}>
-									{t('PAYMENT_METHOD', 'Payment Method')}
-								</OText>
+								<HeaderTitle text={t('PAYMENT_METHOD', 'Payment Method')} mb={0} />
 								{!cartState.loading && cart?.status === 4 && (
 									<OText
 										style={{ textAlign: 'center', marginTop: 20 }}
@@ -570,8 +654,8 @@ const CheckoutUI = (props: any) => {
 								<PaymentOptions
 									cart={cart}
 									isDisabled={cart?.status === 2}
-									businessId={businessDetails?.business?.id}
-									isLoading={businessDetails.loading}
+									businessId={!isGiftCardCart ? businessDetails?.business?.id : -1}
+									isLoading={!isGiftCardCart ? businessDetails.loading : false}
 									paymethods={businessDetails?.business?.paymethods}
 									onPaymentChange={handlePaymethodChange}
 									errorCash={errorCash}
@@ -581,6 +665,10 @@ const CheckoutUI = (props: any) => {
 									handlePaymentMethodClickCustom={handlePaymentMethodClick}
 									handlePlaceOrder={handlePlaceOrder}
 									merchantId={merchantId}
+									setMethodPaySupported={setMethodPaySupported}
+									methodPaySupported={methodPaySupported}
+									placeByMethodPay={placeByMethodPay}
+									setPlaceByMethodPay={setPlaceByMethodPay}
 								/>
 							</ChPaymethods>
 						</ChSection>
@@ -590,6 +678,7 @@ const CheckoutUI = (props: any) => {
 						<WalletPaymentOptionContainer>
 							<PaymentOptionWallet
 								cart={cart}
+								loyaltyPlansState={loyaltyPlansState}
 								businessId={cart?.business_id}
 								businessConfigs={businessDetails?.business?.configs}
 							/>
@@ -597,7 +686,7 @@ const CheckoutUI = (props: any) => {
 					)}
 
 
-					{!cartState.loading && placeSpotsEnabled && (
+					{!cartState.loading && placeSpotsEnabled && !isGiftCardCart && (
 						<>
 							<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginTop: 30, marginHorizontal: -40 }} />
 							<PlaceSpot
@@ -605,6 +694,7 @@ const CheckoutUI = (props: any) => {
 								isInputMode
 								cart={cart}
 								spotNumberDefault={cartState?.cart?.spot_number ?? cart?.spot_number}
+								setPlaceSpotNumber={setPlaceSpotNumber}
 								vehicleDefault={cart?.vehicle}
 							/>
 							<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginHorizontal: -40 }} />
@@ -622,26 +712,21 @@ const CheckoutUI = (props: any) => {
 								) : (
 									<>
 										<CartHeader>
-											<OText
-												size={16}
-												lineHeight={24}
-												color={theme.colors.textNormal}
-												style={{ fontWeight: '500' }}
-											>
-												{t('MOBILE_FRONT_YOUR_ORDER', 'Your order')}
-											</OText>
-											<TouchableOpacity
-												onPress={() => onNavigationRedirect('Business', { store: cart?.business?.slug })}
-											>
-												<OText
-													size={10}
-													lineHeight={15}
-													color={theme.colors.primary}
-													style={{ textDecorationLine: 'underline' }}
+											<HeaderTitle text={t('MOBILE_FRONT_YOUR_ORDER', 'Your order')} mb={0} />
+											{!isGiftCardCart && (
+												<TouchableOpacity
+													onPress={() => onNavigationRedirect('Business', { store: cart?.business?.slug })}
 												>
-													{t('ADD_PRODUCTS', 'Add products')}
-												</OText>
-											</TouchableOpacity>
+													<OText
+														size={12}
+														lineHeight={15}
+														color={theme.colors.primary}
+														style={{ textDecorationLine: 'underline' }}
+													>
+														{t('ADD_PRODUCTS', 'Add products')}
+													</OText>
+												</TouchableOpacity>
+											)}
 										</CartHeader>
 										{isBusinessChangeEnabled && (
 											<TouchableOpacity
@@ -651,7 +736,7 @@ const CheckoutUI = (props: any) => {
 												<OText
 													size={12}
 													lineHeight={18}
-													color={theme.colors.textSecondary}
+													color={theme.colors.primary}
 													style={{ textDecorationLine: 'underline' }}
 												>
 													{t('CHANGE_STORE', 'Change store')}
@@ -663,6 +748,12 @@ const CheckoutUI = (props: any) => {
 											isCartPending={cart?.status === 2}
 											onNavigationRedirect={onNavigationRedirect}
 											placeSpotTypes={placeSpotTypes}
+											businessConfigs={businessConfigs}
+											maxDate={maxDate}
+											loyaltyRewardRate={
+												creditPointPlanOnBusiness?.accumulation_rate ??
+												(!!creditPointPlanOnBusiness && creditPointPlan?.accumulation_rate) ?? 0
+											}
 										/>
 									</>
 								)}
@@ -672,7 +763,7 @@ const CheckoutUI = (props: any) => {
 
 					{!cartState.loading && cart && (
 						<View>
-							<ChErrors style={{ marginBottom: 10 }}>
+							<ChErrors style={{ marginBottom: Platform.OS === 'ios' ? 35 : 10 }}>
 								{!cart?.valid_address && cart?.status !== 2 && (
 									<OText
 										color={theme.colors.error}
@@ -699,6 +790,14 @@ const CheckoutUI = (props: any) => {
 										{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
+										color={theme.colors.error}
+										size={12}
+									>
+										{t('INVALID_CART_MOMENT', 'Selected schedule time is invalid, please select a schedule into the business schedule interval.')}
+									</OText>
+								)}
 								{options.type === 1 &&
 									validationFields?.fields?.checkout?.driver_tip?.enabled &&
 									validationFields?.fields?.checkout?.driver_tip?.required &&
@@ -710,6 +809,15 @@ const CheckoutUI = (props: any) => {
 											{t('WARNING_INVALID_DRIVER_TIP', 'Driver Tip is required.')}
 										</OText>
 									)}
+
+								{validateCommentsCartField && (
+									<OText
+										color={theme.colors.error}
+										size={12}
+									>
+										{t('WARNING_INVALID_CART_COMMENTS', 'Cart comments is required.')}
+									</OText>
+								)}
 							</ChErrors>
 						</View>
 					)}
@@ -742,18 +850,55 @@ const CheckoutUI = (props: any) => {
 								togglePhoneUpdate={togglePhoneUpdate}
 								requiredFields={requiredFields}
 								hideUpdateButton
-								onClose={() => setIsOpen(false)}
+								handlePlaceOrderAsGuest={handlePlaceOrderAsGuest}
+								onClose={() => {
+									setIsOpen(false)
+									handlePlaceOrder(null, true)
+								}}
+								setIsOpen={setIsOpen}
 							/>
 						</View>
 					</OModal>
+					<OModal
+						open={openModal.signup}
+						onClose={() => setOpenModal({ ...openModal, signup: false })}
+					>
+						<ScrollView style={{ paddingHorizontal: 20, width: '100%' }}>
+							<SignupForm
+								handleSuccessSignup={handleSuccessSignup}
+								isGuest
+								signupButtonText={t('SIGNUP', 'Signup')}
+								useSignupByEmail
+								useChekoutFileds
+							/>
+						</ScrollView>
+					</OModal>
+					<OModal
+						open={openModal.login}
+						onClose={() => setOpenModal({ ...openModal, login: false })}
+					>
+						<ScrollView style={{ paddingHorizontal: 20, width: '100%' }}>
+							<LoginForm
+								handleSuccessLogin={handleSuccessLogin}
+								isGuest
+								loginButtonText={t('LOGIN', 'Login')}
+								loginButtonBackground={theme.colors.primary}
+							/>
+						</ScrollView>
+					</OModal>
 				</ChContainer>
 			</Container>
 			{!cartState.loading && cart && cart?.status !== 2 && (
 				<FloatingButton
-					handleClick={() => handlePlaceOrder(null)}
+					handleClick={
+						isDisabledButtonPlace
+							? () => vibrateApp()
+							: methodsPay.includes(paymethodSelected?.gateway)
+								? () => setPlaceByMethodPay(true)
+								: () => handlePlaceOrder(null)}
 					isSecondaryBtn={isDisabledButtonPlace}
 					disabled={isDisabledButtonPlace}
-					btnText={cart?.subtotal >= cart?.minimum
+					btnText={subtotalWithTaxes >= cart?.minimum
 						? (
 							placing
 								? t('PLACING', 'Placing')