ordering-ui-react-native 0.22.41 → 0.22.42-release

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

@@ -48,11 +48,13 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 	const hideAddButton = theme?.business_view?.components?.products?.components?.add_to_cart_button?.hidden ?? true
 	const isChewLayout = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
 	const hideProductDescription = theme?.business_view?.components?.products?.components?.product?.components?.description?.hidden
+	const hideProductDummyLogo = theme?.business_view?.components?.products?.components?.product?.components?.dummy?.hidden
 	const hideProductLogo = viewString
 		? theme?.[viewString]?.components?.cart?.components?.products?.image?.hidden
 		: theme?.business_view?.components?.products?.components?.product?.components?.image?.hidden
 	const textSize = isChewLayout ? 12 : 10
 	const logoPosition = theme?.business_view?.components?.products?.components?.product?.components?.image?.position
+	const hideFavoriteIcon = theme?.business_view?.components?.products?.components?.product?.components?.favorite?.hidden
 
 	const styles = StyleSheet.create({
 		container: {
@@ -197,7 +199,7 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 									style={{ ...styles.line18, flex: 1 }}>
 									{product?.name}
 								</OText>
-								{!isPreviously && (
+								{!isPreviously && !hideFavoriteIcon && (
 									<LottieAnimation
 										type='favorite'
 										onClick={handleChangeFavorite}
@@ -283,7 +285,7 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 									</OText>
 								</RibbonBox>
 							)}
-							{!hideProductLogo && (
+							{(!hideProductLogo && (product?.images || !hideProductDummyLogo)) && (
 								<FastImage
 									style={styles.productStyle}
 									source={product?.images ? {
@@ -313,9 +315,7 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 								height: 40
 
 							}}
-							bgColor={isSoldOut ? '#B8B8B8' : theme?.colors?.white}
-							borderColor={theme?.colors.primary}
-							textStyle={{ color: theme.colors.primary }}
+							isDisabled={isSoldOut}
 							text={t('ADD', 'Add')}
 						/>
 					)}

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

@@ -49,15 +49,12 @@ export const RibbonBox = styled.View`
   background-color: ${(props: any) => props.theme.colors.primary};
   padding: 1px 8px;
   max-width: 60px;
-
   ${(props: any) => props.bgColor && css`
     background-color: ${props.bgColor};
   `}
-
   ${(props: any) => props.isRoundRect && css`
     border-radius: 7.6px;
   `}
-
   ${(props: any) => props.isCapsule && css`
     border-radius: 50px;
   `}

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

@@ -65,9 +65,6 @@ const StripeCardFormUI = (props: any) => {
 					<OButton
 						text={loading ? t('LOADING', 'Loading...') : t('ADD', 'Add')}
 						isDisabled={!cardState?.valid || loading}
-						bgColor={theme.colors.primary}
-						borderColor={theme.colors.primary}
-						textStyle={{ color: 'white' }}
 						imgRightSrc={null}
 						onClick={handleSubmit}
 					/>

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

@@ -26,12 +26,14 @@ export const StripeCardsListUI = (props: any) => {
 	const {
 		onSelectCard,
 		deleteCard,
-		cardSelected,
 		cardsList,
 		handleCardClick,
 		onOpen,
 		gateway,
-		paySelected
+		paySelected,
+		newCardAdded,
+		addNewCardAsDefault,
+		setUserHasCards
 	} = props;
 
 	const theme = useTheme();
@@ -55,6 +57,17 @@ export const StripeCardsListUI = (props: any) => {
 		}
 	}, [cardsList?.loading])
 
+	useEffect(() => {
+		if (newCardAdded && addNewCardAsDefault) {
+			handleCardSelected(newCardAdded)
+		}
+	}, [JSON.stringify(newCardAdded)])
+
+	useEffect(() => {
+		const hasCardSelected = cardsList?.cards?.some?.((card : any) => card?.id === paySelected?.data?.id)
+		setUserHasCards && setUserHasCards(cardsList?.cards?.length > 0 && hasCardSelected)
+	}, [cardsList?.cards?.length, paySelected])
+
 	return (
 		<>
 			{token && !cardsList.loading && cardsList.cards && cardsList.cards.length === 0 && (
@@ -96,7 +109,7 @@ export const StripeCardsListUI = (props: any) => {
 						<OSItem key={card.id} isUnique={cardsList.cards.length} isInvalid={!card?.zipcode && validateZipcodeCard}>
 							<OSItemContent onPress={() => handleCardSelected(card)}>
 								<View style={styles.viewStyle}>
-									{(card.id === cardSelected?.id || card.id === paySelected?.data?.id) ? (
+									{(card.id === paySelected?.data?.id) ? (
 										<OIcon
 											src={theme.images.general.radio_act}
 											width={16}

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

@@ -35,9 +35,10 @@ const StripeElementsFormUI = (props: any) => {
 		setPlaceByMethodPay,
 		cartTotal,
 		publicKeyAddCard,
-		urlScheme,
+		urlscheme,
 		androidAppId,
-		businessNames
+		businessNames,
+		setNewCardAdded
 	} = props;
 
 	const theme = useTheme();
@@ -150,6 +151,10 @@ const StripeElementsFormUI = (props: any) => {
 						const _isNewCard = index === 0
 						stripeTokenHandler(setupIntent?.paymentMethodId, user, businessId, _isNewCard);
 					})
+					setNewCardAdded?.({
+						...card,
+						id: setupIntent?.paymentMethodId
+					})
 				} else {
 					stripeTokenHandler(setupIntent?.paymentMethodId, user, businessId);
 				}
@@ -213,7 +218,7 @@ const StripeElementsFormUI = (props: any) => {
 							<StripeProvider
 								publishableKey={isToSave}
 								merchantIdentifier={merchantId}
-								urlScheme={`${urlScheme}://checkout/${cart?.uuid}`}
+								urlscheme={`${urlscheme}://checkout/${cart?.uuid}`}
 							>
 								{methodsPay?.includes(paymethod) ? (
 									<StripeMethodForm
@@ -282,7 +287,6 @@ const StripeElementsFormUI = (props: any) => {
 					bgColor={isCompleted ? theme.colors.primary : theme.colors.backgroundGray}
 					borderColor={isCompleted ? theme.colors.primary : theme.colors.backgroundGray}
 					style={styles.btnAddStyle}
-					textStyle={{ color: 'white' }}
 					imgRightSrc={null}
 					onClick={() => handleSaveCard()}
 					isDisabled={!isCompleted}

package/themes/original/src/components/StripeElementsForm/naked.tsx

@@ -53,7 +53,7 @@ export const StripeElementsForm = (props: any) => {
       const result = await fetch(`${ordering.root}/payments/stripe/cards`, {
         method: 'POST',
         headers: {
-          Authorization: `Bearer ${user?.session?.access_token}`,
+          Authorization: `Bearer ${token}`,
           'Content-Type': 'application/json'
         },
         body: JSON.stringify({

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

@@ -138,9 +138,6 @@ const StripeRedirectFormUI = (props: any) => {
 			<OButton
 				// text={formState.isSubmitting ? t('LOADING', 'Loading...') : t('OK', 'OK')}
 				text={t('OK', 'OK')}
-				bgColor={theme.colors.primary}
-				borderColor={theme.colors.primary}
-				textStyle={{ color: 'white' }}
 				imgRightSrc={null}
 				// isDisabled={formState.isSubmitting}
 				// onClick={() => handleSubmit(onSubmit)}

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

@@ -14,7 +14,8 @@ interface taxInformationParams {
     percentage?: number,
     id: number,
     discounts?: any,
-    rate_type?: number
+    rate_type?: number,
+    target?: string
   },
   products: Array<any>,
   type: string
@@ -34,7 +35,7 @@ export const TaxInformation = (props: taxInformationParams) => {
   const offersHideArray = ['offer_target_2', 'offer_target_3']
   const hideProductsSectionOffers = offersHideArray.includes(type)
   const dataHideArray : Array<string | number> = ['platform', 'business']
-  const hideProductsSectionData = dataHideArray.includes(data.type)
+  const hideProductsSectionData = dataHideArray.includes(data.type) || data?.target === 'delivery_fee'
 
   const getFilterValidation = (product: any) => {
     return (

package/themes/original/src/components/UpsellingProducts/UpsellingContent.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Platform, StyleSheet, View } from 'react-native'
+import { Platform, StyleSheet, View, Vibration } from 'react-native'
 import {
     useLanguage,
     useOrder,
@@ -90,6 +90,11 @@ export const UpsellingContent = (props: any) => {
         setShowTitle(contentOffset.y > 30)
     }
 
+    const handleClickCheckout = () => {
+        Vibration.vibrate(100)
+        handleUpsellingPage(cart)
+    }
+
     return (
         <>
             <View style={styles.wrapperNavbar}>
@@ -158,11 +163,9 @@ export const UpsellingContent = (props: any) => {
                 <OButton
                     imgRightSrc=''
                     text={t('CHECKOUT', 'Checkout')}
-                    textStyle={{ color: theme.colors.white, fontSize: 14 }}
-                    bgColor={theme.colors.primary}
-                    borderColor={theme.colors.primary}
+                    textStyle={{ fontSize: 14 }}
                     style={{ ...styles.closeUpsellingButton }}
-                    onClick={() => handleUpsellingPage(cart)}
+                    onClick={() => handleClickCheckout()}
                 />
             </View>
         </>

package/themes/original/src/components/UpsellingProducts/UpsellingLayout.tsx

@@ -25,6 +25,9 @@ export const UpsellingLayout = (props : any) => {
     const [{ parsePrice }] = useUtils()
     const [, t] = useLanguage()
 
+    const hideProductDummyLogo = theme?.business_view?.components?.products?.components?.product?.components?.dummy?.hidden
+
+
     const styles = StyleSheet.create({
         imageStyle: {
             width: 73,
@@ -66,9 +69,11 @@ export const UpsellingLayout = (props : any) => {
                                                     <OText size={10} color={theme.colors.primary}>{t('ADD', 'Add')}</OText>
                                                 </AddButton>
                                             </View>
-                                            <View>
-                                                <OIcon url={product?.images || theme?.images?.dummies?.product} style={styles.imageStyle} />
-                                            </View>
+                                            {(product?.images || !hideProductDummyLogo) && (
+                                                <View>
+                                                    <OIcon url={product?.images || theme?.images?.dummies?.product} style={styles.imageStyle} />
+                                                </View>
+                                            )}
                                         </Item>
                                     )) : (
                                         <OText>

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

@@ -35,7 +35,8 @@ const UserDetailsUI = (props: any) => {
 		handleSendVerifyCode,
 		verifyPhoneState,
 		setFormState,
-		setIsOpen
+		setIsOpen,
+		isCheckoutPlace
 	} = props
 
 	const theme = useTheme();
@@ -95,23 +96,23 @@ const UserDetailsUI = (props: any) => {
 				},
 			});
 			handleSendVerifyCode({
-			  cellphone: cellphone,
-			  country_phone_code: countryPhoneCode
+				cellphone: cellphone,
+				country_phone_code: countryPhoneCode
 			})
 		}
 	}
 
 	const handleSendPhoneCode = (values: any) => {
-    setWillVerifyOtpState(false)
+		setWillVerifyOtpState(false)
 		setIsModalVisible(false)
-    setFormState({
-      ...formState,
-      changes: {
-        ...formState?.changes,
-        verification_code: values?.code
-      }
-    })
-  }
+		setFormState({
+			...formState,
+			changes: {
+				...formState?.changes,
+				verification_code: values?.code
+			}
+		})
+	}
 
 	useEffect(() => {
 		if (willVerifyOtpState) handleVerifyCodeClick()
@@ -158,7 +159,7 @@ const UserDetailsUI = (props: any) => {
 								{t('CUSTOMER_DETAILS', 'Customer Details')}
 							</OText>
 						)}
-						{cartStatus !== 2 && !requiredFields && (
+						{cartStatus !== 2 && !isCheckoutPlace && (
 							!isEdit ? (
 								<EditBtn onPress={() => toggleIsEdit()} activeOpacity={0.7}>
 									<OIcon
@@ -189,12 +190,12 @@ const UserDetailsUI = (props: any) => {
 								{userData?.name} {userData?.middle_name} {userData?.lastname} {userData?.second_lastname}
 							</OText>
 							<OText size={12} lineHeight={18} weight={'400'}>
-								{userData?.email}
+								{userData?.guest_id ? userData?.guest_email : userData?.email}
 							</OText>
-							{!!(userData?.cellphone || user?.cellphone) && (
+							{!!((userData?.cellphone ?? userData?.guest_cellphone) || (user?.cellphone ?? user?.guest_cellphone)) && (
 								<>
 									<OText size={12} lineHeight={18} weight={'400'}>
-										{(userData?.country_phone_code) && `+${(userData?.country_phone_code)} `}{(userData?.cellphone)}
+										{(userData?.country_phone_code) && `+${(userData?.country_phone_code)} `}{(userData?.guest_id ? user?.guest_cellphone : userData?.cellphone)}
 									</OText>
 									{!!phoneUpdate && (
 										<OText color={theme.colors.error} style={{ textAlign: 'center' }}>{t('NECESSARY_UPDATE_COUNTRY_PHONE_CODE', 'It is necessary to update your phone number')}</OText>

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

@@ -16,6 +16,8 @@ import { ListItem } from '../UserProfile/styles';
 import moment from 'moment';
 import { DatePickerUI } from '../DatePicker';
 
+const CONDITIONAL_CODES = ['PR']
+
 export const UserFormDetailsUI = (props: any) => {
 	const {
 		isEdit,
@@ -36,7 +38,12 @@ export const UserFormDetailsUI = (props: any) => {
 		isCheckout,
 		setIsOpen,
 		handleRemoveAccount,
-		isProfile
+		isProfile,
+		isGuest,
+		isOrderTypeValidationField,
+		checkoutFields,
+		isCheckoutPlace,
+		setCellphoneStartZero
 	} = props;
 
 	const theme = useTheme();
@@ -78,7 +85,7 @@ export const UserFormDetailsUI = (props: any) => {
 	const [, { showToast }] = useToast();
 	const { handleSubmit, control, errors, setValue } = useForm();
 
-	const [{ user }, { login }] = useSession();
+	const [{ user }, { login, logout }] = useSession();
 	const [userPhoneNumber, setUserPhoneNumber] = useState<any>(null);
 	const [isValid, setIsValid] = useState(false)
 	const [isChanged, setIsChanged] = useState(false)
@@ -95,8 +102,8 @@ export const UserFormDetailsUI = (props: any) => {
 	const [confirm, setConfirm] = useState<any>({ open: false, content: null, handleOnAccept: null, id: null, title: null })
 
 	const isAdmin = user?.level === 0
-	const showInputPhoneNumber = (validationFields?.fields?.checkout?.cellphone?.enabled ?? false) || configs?.verification_phone_required?.value === '1'
-	const showInputBirthday = validationFields?.fields?.checkout?.birthdate?.enabled ?? false
+	const showInputPhoneNumber = isOrderTypeValidationField ? checkoutFields?.find(field => field?.validation_field?.code === 'mobile_phone')?.enabled : (validationFields?.fields?.checkout?.cellphone?.enabled ?? false)
+	const showInputBirthday = isOrderTypeValidationField ? checkoutFields?.find(field => field?.validation_field?.code === 'birthdate')?.enabled : (validationFields?.fields?.checkout?.birthdate?.enabled ?? false)
 
 	const handleSuccessSignup = (user: any) => {
 		login({
@@ -127,15 +134,27 @@ export const UserFormDetailsUI = (props: any) => {
 		return rules;
 	};
 
+	const cellphoneValue = () => {
+		let cellphone = user?.guest_id ? user?.guest_cellphone : user?.cellphone
+		if (cellphone && CONDITIONAL_CODES.includes(user?.country_code)) {
+			if (user?.country_code === 'PR') {
+				cellphone = user?.cellphone?.slice(3)
+			}
+		}
+		return cellphone
+	}
+
 	const setUserCellPhone = (isEdit = false) => {
 		if (userPhoneNumber && !userPhoneNumber.includes('null') && !isEdit) {
 			setUserPhoneNumber(userPhoneNumber);
 			return;
 		}
-		if (user?.cellphone) {
+		const cellphone = user?.guest_id ? user?.guest_cellphone : user?.cellphone
+
+		if (cellphone) {
 			let phone = null;
 			if (user?.country_phone_code) {
-				phone = `+${user?.country_phone_code} ${user?.cellphone}`;
+				phone = `+${user?.country_phone_code} ${cellphone}`;
 			} else {
 				phone = user?.cellphone;
 			}
@@ -144,17 +163,22 @@ export const UserFormDetailsUI = (props: any) => {
 				...phoneInputData,
 				phone: {
 					country_phone_code: user?.country_phone_code || null,
-					cellphone: user?.cellphone || null,
+					cellphone: cellphoneValue()
 				},
 			});
 			return;
 		}
-		setUserPhoneNumber(user?.cellphone || '');
+		setUserPhoneNumber(cellphone || '');
 	};
 
 	const onSubmit = () => {
+		let content = ''
+		if (requiredFields?.includes?.('birthdate') && !birthdate) {
+			content = content + `${t('VALIDATION_ERROR_BIRTHDATE_REQUIRED', 'Birthdate is required')}\n`
+		}
 		if (phoneInputData.error) {
-			showToast(ToastType.Error, phoneInputData.error);
+			content = content + `${phoneInputData.error}\n`
+			showToast(ToastType.Error, content);
 			return;
 		}
 		if (Object.keys(formState.changes).length > 0) {
@@ -162,17 +186,16 @@ export const UserFormDetailsUI = (props: any) => {
 				formState.changes?.cellphone === null &&
 				((validationFields?.fields?.checkout?.cellphone?.enabled &&
 					validationFields?.fields?.checkout?.cellphone?.required) ||
-					configs?.verification_phone_required?.value === '1')
+					(configs?.verification_phone_required?.value === '1' && !user?.guest_id))
 			) {
-				showToast(
-					ToastType.Error,
-					t(
-						'VALIDATION_ERROR_MOBILE_PHONE_REQUIRED',
-						'The field Phone Number is required.',
-					),
-				);
+				content = content + `${t('VALIDATION_ERROR_MOBILE_PHONE_REQUIRED', 'The field Phone Number is required.',)}\n`
+				showToast(ToastType.Error, content);
 				return;
 			}
+			if (content.length > 0) {
+				showToast(ToastType.Error, content);
+				return
+			}
 			let changes = null;
 			if (user?.cellphone && !userPhoneNumber) {
 				changes = {
@@ -185,7 +208,7 @@ export const UserFormDetailsUI = (props: any) => {
 		}
 	};
 
-	const handleChangePhoneNumber = (number: any) => {
+	const handleChangePhoneNumber = (number: any, rawNumber : any) => {
 		setPhoneInputData(number);
 		setIsChanged(true)
 		let phoneNumber = {
@@ -198,6 +221,7 @@ export const UserFormDetailsUI = (props: any) => {
 				value: number.phone.cellphone,
 			},
 		};
+		setCellphoneStartZero && setCellphoneStartZero(rawNumber?.number && rawNumber?.countryCallingCode ? rawNumber?.number : null)
 		handleChangeInput(phoneNumber, true);
 	};
 
@@ -223,9 +247,12 @@ export const UserFormDetailsUI = (props: any) => {
 			open: true,
 			content: [t('QUESTION_REMOVE_ACCOUNT', 'Are you sure that you want to remove your account?')],
 			title: t('ACCOUNT_ALERT', 'Account alert'),
-			handleOnAccept: () => {
+			handleOnAccept: async () => {
 				setConfirm({ ...confirm, open: false })
-				handleRemoveAccount && handleRemoveAccount(user?.id)
+				const response = await handleRemoveAccount?.(user?.id)
+				if (response === 'OK'){
+					logout()
+				}
 			}
 		})
 	}
@@ -298,16 +325,16 @@ export const UserFormDetailsUI = (props: any) => {
 		<>
 			<UDForm>
 				{!validationFields?.loading &&
-					sortInputFields({ values: validationFields?.fields?.checkout })
+					sortInputFields({ values: isOrderTypeValidationField ? checkoutFields : validationFields?.fields?.checkout })
 						.length > 0 && (
 						<UDWrapper>
 							{sortInputFields({
-								values: validationFields.fields?.checkout,
+								values: isOrderTypeValidationField ? checkoutFields : validationFields?.fields?.checkout,
 							}).map(
 								(item: any) => {
 									const field = item?.validation_field || item
-									return (showField &&
-										showField(field.code) && ((requiredFields && requiredFields.includes(field.code)) || !requiredFields) && (
+									return (
+										((isOrderTypeValidationField ? item?.enabled : (showField && showField(field.code))) && ((requiredFields && requiredFields?.includes?.(field.code)) || !requiredFields || !isCheckoutPlace)) && (
 											<React.Fragment key={field.id}>
 												<Controller
 													key={field.id}
@@ -331,7 +358,7 @@ export const UserFormDetailsUI = (props: any) => {
 																isDisabled={false}
 																value={
 																	formState?.changes[field.code] ??
-																	(user && user[field.code]) ??
+																	(user && user?.guest_id && field.code === 'email' ? user?.guest_email : user?.[field.code]) ??
 																	''
 																}
 																onChange={(val: any) => {
@@ -375,52 +402,58 @@ export const UserFormDetailsUI = (props: any) => {
 													)}
 													name={field.code}
 													rules={getInputRules(field)}
-													defaultValue={user && user[field.code]}
+													defaultValue={user && (field.code === 'email' && user?.guest_id ? user?.guest_email : user?.[field.code])}
 												/>
 											</React.Fragment>
 										))
 								},
 							)}
-							{showInputBirthday && (
-								<>
-									<WrapperBirthdate>
-										<OText size={14} lineHeight={21} color={theme.colors.textNormal} weight={'500'} style={{ textTransform: 'capitalize', alignSelf: 'flex-start' }}>
-											{t('BIRTHDATE', 'Birthdate')}
-										</OText>
-										<TouchableOpacity onPress={() => setShowDatePicker(!showDatePicker)}>
-											<OText size={14} lineHeight={21} color={theme.colors.textNormal} weight={'500'} style={{ marginTop: 6 }}>
-												{birthdate ? moment(birthdate).format('YYYY-MM-DD') : ''}
+							{((!user?.guest_id && showInputBirthday) || (isOrderTypeValidationField || user?.guest_id)) &&
+								showInputBirthday &&
+								((requiredFields && requiredFields?.includes?.('birthdate')) || !requiredFields || !isCheckoutPlace) &&
+								(
+									<>
+										<WrapperBirthdate>
+											<OText size={14} lineHeight={21} color={theme.colors.textNormal} weight={'500'} style={{ textTransform: 'capitalize', alignSelf: 'flex-start' }}>
+												{t('BIRTHDATE', 'Birthdate')}
 											</OText>
-										</TouchableOpacity>
-									</WrapperBirthdate>
-									<DatePickerUI open={showDatePicker} birthdate={birthdate} onConfirm={_handleChangeDate} onCancel={() => setShowDatePicker(false)} />
-								</>
-							)}
-							{!!showInputPhoneNumber && ((requiredFields && requiredFields.includes('cellphone')) || !requiredFields) && (
-								<WrapperPhone>
-									<OText size={14} lineHeight={21} weight={'500'} color={theme.colors.textNormal}>{t('PHONE', 'Phone')}</OText>
-									<PhoneInputNumber
-										data={phoneInputData}
-										handleData={(val: any) => handleChangePhoneNumber(val)}
-										changeCountry={(val: any) => changeCountry(val)}
-										defaultValue={phoneUpdate ? '' : user?.cellphone}
-										defaultCode={user?.country_code ?? user?.country_phone_code ?? null}
-										boxStyle={styles.phoneSelect}
-										inputStyle={styles.phoneInputStyle}
-										textStyle={{ color: theme.colors.textNormal, fontSize: 12, padding: 0 }}
-										noDropIcon
-									/>
-									{phoneUpdate && (
-										<OText
-											size={10}
-											color={theme.colors.error}
-											style={{ marginHorizontal: 10, textAlign: 'center' }}>
-											{t('YOUR_PREVIOUS_CELLPHONE', 'Your previous cellphone')}:{' '}
-											{user?.cellphone}
-										</OText>
-									)}
-								</WrapperPhone>
-							)}
+											<TouchableOpacity onPress={() => setShowDatePicker(!showDatePicker)}>
+												<OText size={14} lineHeight={21} color={theme.colors.textNormal} weight={'500'} style={{ marginTop: 6 }}>
+													{birthdate ? moment(birthdate).format('YYYY-MM-DD') : ''}
+												</OText>
+											</TouchableOpacity>
+										</WrapperBirthdate>
+										<DatePickerUI open={showDatePicker} birthdate={birthdate} onConfirm={_handleChangeDate} onCancel={() => setShowDatePicker(false)} />
+									</>
+								)}
+							{((!user?.guest_id && !!showInputPhoneNumber) || (isOrderTypeValidationField || user?.guest_id)) &&
+								((requiredFields && requiredFields?.includes?.('cellphone')) || !requiredFields || !isCheckoutPlace) &&
+								(
+									<WrapperPhone>
+										<OText size={14} lineHeight={21} weight={'500'} color={theme.colors.textNormal}>{t('PHONE', 'Phone')}</OText>
+										<PhoneInputNumber
+											data={phoneInputData}
+											handleData={handleChangePhoneNumber}
+											changeCountry={(val: any) => changeCountry(val)}
+											defaultValue={phoneUpdate ? '' : cellphoneValue()}
+											defaultCode={user?.country_code ?? user?.country_phone_code ?? null}
+											defaultCodeFallback={user?.country_phone_code}
+											boxStyle={styles.phoneSelect}
+											inputStyle={styles.phoneInputStyle}
+											textStyle={{ color: theme.colors.textNormal, fontSize: 12, padding: 0 }}
+											noDropIcon
+										/>
+										{phoneUpdate && (
+											<OText
+												size={10}
+												color={theme.colors.error}
+												style={{ marginHorizontal: 10, textAlign: 'center' }}>
+												{t('YOUR_PREVIOUS_CELLPHONE', 'Your previous cellphone')}:{' '}
+												{cellphoneValue()}
+											</OText>
+										)}
+									</WrapperPhone>
+								)}
 							{!requiredFields && (
 								<Controller
 									control={control}
@@ -484,9 +517,7 @@ export const UserFormDetailsUI = (props: any) => {
 										? t('UPDATING', 'Updating...')
 										: t('UPDATE', 'Update')
 								}
-								bgColor={theme.colors.primary}
-								textStyle={{ color: theme.colors.white, fontSize: 14 }}
-								borderColor={theme.colors.primary}
+								textStyle={{ fontSize: 14 }}
 								isDisabled={formState.loading}
 								imgRightSrc={null}
 								style={{ borderRadius: 7.6, shadowOpacity: 0, width: '100%', borderWidth: 1, marginTop: 20, marginBottom: 20 }}
@@ -495,7 +526,7 @@ export const UserFormDetailsUI = (props: any) => {
 						)}
 				</>
 			)}
-			{requiredFields && (
+			{isCheckoutPlace && (
 				<OButton
 					text={
 						formState.loading
@@ -504,12 +535,10 @@ export const UserFormDetailsUI = (props: any) => {
 								? t('SIGN_UP_AND_PLACE_ORDER', 'Sign up and place order')
 								: t('CONTINUE', 'Continue'))
 					}
-					bgColor={theme.colors.primary}
 					textStyle={{
 						color: !user?.guest_id && (formState.loading || !isValid) ? theme.colors.primary : theme.colors.white,
 						fontSize: 14
 					}}
-					borderColor={theme.colors.primary}
 					isDisabled={!user?.guest_id && (formState.loading || !isValid)}
 					imgRightSrc={null}
 					style={{
@@ -523,10 +552,10 @@ export const UserFormDetailsUI = (props: any) => {
 						borderColor: !user?.guest_id && (formState.loading || !isValid) ? theme.colors.white : theme.colors.primary,
 						opacity: !user?.guest_id && (formState.loading || !isValid) ? 0.3 : 1,
 					}}
-					onClick={!user?.guest_id ? handleSubmit(onSubmit) : () => setIsModalOpen(true)}
+					onClick={handleSubmit(onSubmit)}
 				/>
 			)}
-			{isCheckout && !!user?.guest_id && (
+			{isCheckout && !!user?.guest_id && !requiredFields && (
 				<TouchableOpacity style={{ marginTop: 10 }} onPress={() => handlePlaceOrderAsGuest()}>
 					<OText color={theme.colors.primary} style={{ textAlign: 'center' }}>{t('PLACE_ORDER_AS_GUEST', 'Place order as guest')}</OText>
 				</TouchableOpacity>
@@ -556,4 +585,3 @@ export const UserFormDetailsUI = (props: any) => {
 		</>
 	);
 };
-