ordering-ui-react-native 0.22.43 → 0.22.45

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.22.43",
+  "version": "0.22.45",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",

package/themes/business/src/components/LogoutButton/index.tsx

@@ -15,7 +15,7 @@ const LogoutButtonUI = (props: any) => {
     const data = await _retrieveStoreData('notification_state');
     const res = await handleLogoutClick(data);
     if (res) {
-      _clearStoreData({ excludedKeys: ['isTutorial'] });
+      _clearStoreData({ excludedKeys: ['isTutorial', 'language'] });
     }
   };
 

package/themes/business/src/components/PreviousOrders/OrderItem.tsx

@@ -191,13 +191,13 @@ export const OrderItem = React.memo((props: any) => {
                 {order?.external_id ?? t('NO_EXTERNAL_ID', 'No external Id ') + t('NO', 'Order No.') + order?.id}
               </OText>
             )}
-            {!showExternalId && <OText
+            <OText
               style={styles.date}
               color={theme.colors.unselectText}
               numberOfLines={1}
               adjustsFontSizeToFit
             >
-              {((!!order?.order_group_id && order?.order_group && isLogisticOrder
+              {!showExternalId && ((!!order?.order_group_id && order?.order_group && isLogisticOrder
                 ? `${order?.order_group?.orders?.length} ${t('ORDERS', 'Orders')}`
                 : (t('NO', 'Order No.') + order?.id)
               ) + ' · ')}
@@ -205,7 +205,6 @@ export const OrderItem = React.memo((props: any) => {
                 ? parseDate(order?.delivery_datetime_utc)
                 : parseDate(order?.delivery_datetime, { utc: false })}
             </OText>
-            }
             {((currentTabSelected === 'pending' || currentTabSelected === 'inProgress') && allowColumns?.timer) && (
               <>
                 {!showExternalId && <OText> · </OText>}

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

@@ -66,7 +66,8 @@ const AddressFormUI = (props: AddressFormParams) => {
 		isFromProductsList,
 		hasAddressDefault,
 		afterSignup,
-		businessSlug
+		businessSlug,
+		isFromCheckout
 	} = props;
 
 	const theme = useTheme();
@@ -383,9 +384,11 @@ const AddressFormUI = (props: AddressFormParams) => {
 			auth &&
 			!afterSignup
 		) {
-			!isFromProductsList
-				? navigation.navigate('BottomTab')
-				: navigation.navigate('Business');
+			isFromCheckout
+				? navigation.goBack()
+				: !isFromProductsList
+					? navigation.navigate('BottomTab')
+					: navigation.navigate('Business');
 		}
 	}, [orderState?.options?.address]);
 
@@ -539,6 +542,11 @@ const AddressFormUI = (props: AddressFormParams) => {
 					style={{ marginTop: Platform.OS === 'ios' ? 0 : 10 }}
 					titleWrapStyle={{ paddingHorizontal: 0, width: '100%' }}
 					titleStyle={{ marginRight: 0, marginLeft: 0, paddingRight: 5 }}
+          buttonProps={{
+						bgColor: theme.colors.white,
+						borderColor: theme.colors.white,
+						textStyle: { color: theme.colors.btnFont }
+					}}
 				/>
 			</View>
 			<TouchableWithoutFeedback onPress={Keyboard.dismiss}>

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

@@ -152,6 +152,11 @@ const AddressListUI = (props: AddressListParams) => {
 							showCall={false}
 							paddingTop={10}
 							btnStyle={{ paddingLeft: 0 }}
+              buttonProps={{
+                bgColor: theme.colors.white,
+                borderColor: theme.colors.white,
+                textStyle: { color: theme.colors.btnFont }
+              }}
 						/>
 					)}
 					{
@@ -173,6 +178,11 @@ const AddressListUI = (props: AddressListParams) => {
 								style={{ marginTop: 0 }}
 								titleWrapStyle={{ paddingHorizontal: 0 }}
 								titleStyle={{ marginLeft: 0, marginRight: 0 }}
+                buttonProps={{
+                  bgColor: theme.colors.white,
+                  borderColor: theme.colors.white,
+                  textStyle: { color: theme.colors.btnFont }
+                }}
 							/>
 						)}
 					{addressList.loading && addressList?.addresses?.length === 0 && (
@@ -217,7 +227,8 @@ const AddressListUI = (props: AddressListParams) => {
 													onSaveAddress: handleSaveAddress,
 													isSelectedAfterAdd: true,
 													isFromProductsList: isFromProductsList,
-													hasAddressDefault: !!orderState.options?.address?.location
+													hasAddressDefault: !!orderState.options?.address?.location,
+													isFromCheckout: route?.params?.isFromCheckout
 												}
 											) : onNavigationRedirect(
 												'AddressFormInitial',
@@ -228,7 +239,8 @@ const AddressListUI = (props: AddressListParams) => {
 													onSaveAddress: handleSaveAddress,
 													isSelectedAfterAdd: true,
 													isFromProductsList: isFromProductsList,
-													hasAddressDefault: !!orderState.options?.address?.location
+													hasAddressDefault: !!orderState.options?.address?.location,
+													isFromCheckout: route?.params?.isFromCheckout
 												})}
 										>
 											<OIcon src={theme.images.general.pencil} width={16} style={{ marginHorizontal: 4 }} />
@@ -305,7 +317,8 @@ const AddressListUI = (props: AddressListParams) => {
 										addressesList: addressList?.addresses,
 										nopadding: true,
 										isSelectedAfterAdd: true,
-										hasAddressDefault: !!orderState.options?.address?.location
+										hasAddressDefault: !!orderState.options?.address?.location,
+										isFromCheckout: route?.params?.isFromCheckout
 									}) : onNavigationRedirect(
 										'AddressFormInitial',
 										{
@@ -314,7 +327,8 @@ const AddressListUI = (props: AddressListParams) => {
 											addressesList: addressList?.addresses,
 											nopadding: true,
 											isSelectedAfterAdd: true,
-											hasAddressDefault: !!orderState.options?.address?.location
+											hasAddressDefault: !!orderState.options?.address?.location,
+											isFormCheckout: route?.params?.isFromCheckout
 										})}
 							/>
 						</>

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

@@ -103,7 +103,8 @@ const CheckoutUI = (props: any) => {
 		setPlaceSpotNumber,
 		maxDate,
 		androidAppId,
-		urlscheme
+		urlscheme,
+		checkoutFieldsState
 	} = props
 
 	const theme = useTheme();
@@ -178,6 +179,7 @@ const CheckoutUI = (props: any) => {
 	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 businessConfigs = businessDetails?.business?.configs ?? []
@@ -270,7 +272,7 @@ const CheckoutUI = (props: any) => {
 			return
 		}
 
-		if (!userErrors.length && (!requiredFields?.length || allowedGuest) || forcePlace) {
+		if (!userErrors.length && (!requiredFields?.length) || forcePlace) {
 			vibrateApp()
 			handlerClickPlaceOrder && handlerClickPlaceOrder(null, { isNative: true }, confirmPayment, NativeStripeSdk?.dismissPlatformPay)
 			return
@@ -310,7 +312,6 @@ const CheckoutUI = (props: any) => {
 	const checkValidationFields = () => {
 		setUserErrors([])
 		const errors = []
-		const notFields = ['coupon', 'driver_tip', 'mobile_phone', 'address', 'zipcode', 'address_notes', 'comments']
 		const _requiredFields: any = []
 
 		Object.values(validationFields?.fields?.checkout).map((field: any) => {
@@ -338,6 +339,27 @@ 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)
 	}
@@ -347,11 +369,16 @@ const CheckoutUI = (props: any) => {
 	}
 
 	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)

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

@@ -44,6 +44,11 @@ export const Favorite = (props: any) => {
         paddingTop={Platform.OS === 'ios' ? 20 : 10}
         style={{ paddingVertical: 0 }}
         btnStyle={{ paddingLeft: 0 }}
+        buttonProps={{
+          bgColor: theme.colors.white,
+          borderColor: theme.colors.white,
+          textStyle: { color: theme.colors.btnFont }
+        }}
       />
       <TabContainer>
         {tabList.map((menu, i) => (

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

@@ -125,6 +125,11 @@ const ForgotPasswordUI = (props: any) => {
 				style={{ flexDirection: 'column', alignItems: 'flex-start' }}
 				titleStyle={{ width: '100%', marginLeft: 0, paddingLeft: 0 }}
 				titleWrapStyle={{ paddingHorizontal: 0, paddingStart: 0, flex: 1 }}
+        buttonProps={{
+          bgColor: theme.colors.white,
+          borderColor: theme.colors.white,
+          textStyle: { color: theme.colors.btnFont }
+        }}
 			/>
 			<FormSide>
 				<OText

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

@@ -1,4 +1,5 @@
 import React, { useState } from 'react'
+import { useTheme } from 'styled-components/native';
 import { Platform, RefreshControl } from 'react-native'
 import { HelpParams } from '../../types'
 import { useLanguage } from 'ordering-components/native'
@@ -17,6 +18,7 @@ export const Help = (props: HelpParams) => {
     navigation
   } = props
   const [, t] = useLanguage()
+  const theme = useTheme()
   const [refreshing] = useState(false);
   const [refresh, setRefresh] = useState(false)
 
@@ -46,6 +48,11 @@ export const Help = (props: HelpParams) => {
         onActionLeft={goToBack}
         showCall={false}
         btnStyle={{ paddingLeft: 0 }}
+        buttonProps={{
+          bgColor: theme.colors.white,
+          borderColor: theme.colors.white,
+          textStyle: { color: theme.colors.btnFont }
+        }}
       />
       <HelpSubItem
         onPress={() => onRedirect('HelpOrder')}

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

@@ -37,6 +37,11 @@ export const HelpAccountAndPayment = (props: HelpAccountAndPaymentParams) => {
         onActionLeft={goToBack}
         btnStyle={{ paddingLeft: 0 }}
         showCall={false}
+        buttonProps={{
+          bgColor: theme.colors.white,
+          borderColor: theme.colors.white,
+          textStyle: { color: theme.colors.btnFont }
+        }}
       />
       <Content>
         <OText mBottom={20}>

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

@@ -43,6 +43,11 @@ export const HelpGuide = (props: HelpGuideParams) => {
         onActionLeft={goToBack}
         btnStyle={{ paddingLeft: 0 }}
         showCall={false}
+        buttonProps={{
+          bgColor: theme.colors.white,
+          borderColor: theme.colors.white,
+          textStyle: { color: theme.colors.btnFont }
+        }}
       />
       <Content>
         <OText mBottom={15}>

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

@@ -39,6 +39,11 @@ export const HelpOrder = (props: HelpOrderParams) => {
         onActionLeft={goToBack}
         btnStyle={{ paddingLeft: 0 }}
         showCall={false}
+        buttonProps={{
+          bgColor: theme.colors.white,
+          borderColor: theme.colors.white,
+          textStyle: { color: theme.colors.btnFont }
+        }}
       />
       <Content>
         <OText mBottom={20}>

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

@@ -108,7 +108,7 @@ const LoginFormUI = (props: LoginParams) => {
 
 	const googleLoginEnabled = configs?.google_login_enabled?.value === '1' || !configs?.google_login_enabled?.enabled
 	const facebookLoginEnabled = configs?.facebook_login_enabled?.value === '1' || !configs?.facebook_login_enabled?.enabled
-	const appleLoginEnabled = Platform.OS === 'ios' && configs?.apple_login_enabled?.value === '1' || !configs?.apple_login_enabled?.enabled
+	const appleLoginEnabled = Platform.OS === 'ios' && (configs?.apple_login_enabled?.value === '1' || !configs?.apple_login_enabled?.enabled)
 
 	const loginStyle = StyleSheet.create({
 		btnOutline: {
@@ -412,6 +412,11 @@ const LoginFormUI = (props: LoginParams) => {
 					btnStyle={{ paddingLeft: 0 }}
 					titleWrapStyle={{ paddingHorizontal: 0 }}
 					titleStyle={{ marginRight: 0, marginLeft: 0 }}
+					buttonProps={{
+						bgColor: theme.colors.white,
+						borderColor: theme.colors.white,
+						textStyle: { color: theme.colors.btnFont }
+					}}
 				/>
 			)}
 			<FormSide>
@@ -802,7 +807,7 @@ const LoginFormUI = (props: LoginParams) => {
 											handleSuccessGoogleLogin={handleSuccessFacebook}
 										/>
 									)}
-									{(configs?.apple_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null) && appleLoginEnabled && (
+									{(configs?.apple_login_client_id?.value !== '' && configs?.apple_login_client_id?.value !== null) && appleLoginEnabled && (
 										<AppleLogin
 											notificationState={notificationState}
 											handleErrors={(err: any) => { showToast(ToastType.Error, err), vibrateApp() }}

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

@@ -237,6 +237,7 @@ export const MessageListing = (props: MessageListingParams) => {
 	const [seletedOrder, setSeletedOrder] = useState<any>()
 	const [openMessages, setOpenMessges] = useState(false)
 	const [, t] = useLanguage()
+	const theme = useTheme()
 
 	const goToBack = () => {
 		navigation?.canGoBack() && navigation.goBack()
@@ -265,6 +266,11 @@ export const MessageListing = (props: MessageListingParams) => {
 				showCall={false}
 				paddingTop={Platform.OS === 'ios' ? 20 : 10}
 				btnStyle={{ paddingLeft: 0 }}
+				buttonProps={{
+          bgColor: theme.colors.white,
+          borderColor: theme.colors.white,
+          textStyle: { color: theme.colors.btnFont }
+        }}
 			/>
 			<OrderListing
 				ordersLength={{ activeOrdersLength: 0, previousOrdersLength: 0 }}

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

@@ -343,6 +343,11 @@ const MomentOptionUI = (props: MomentOptionParams) => {
 							titleAlign={'center'}
 							titleStyle={{ fontSize: 20, marginRight: 0, marginLeft: 0 }}
 							titleWrapStyle={{ paddingHorizontal: 0 }}
+              buttonProps={{
+                bgColor: theme.colors.white,
+                borderColor: theme.colors.white,
+                textStyle: { color: theme.colors.btnFont }
+              }}
 						/>
 					)}
 					{(preorderMinimumDays === 0 && preorderLeadTime === 0) || !cateringPreorder && (

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

@@ -101,6 +101,11 @@ export const MyOrders = (props: any) => {
               showCall={false}
               paddingTop={30}
               btnStyle={{ paddingLeft: 0 }}
+              buttonProps={{
+                bgColor: theme.colors.white,
+                borderColor: theme.colors.white,
+                textStyle: { color: theme.colors.btnFont }
+              }}
             />
           )}
         </View>

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

@@ -44,6 +44,7 @@ interface Props {
 	isVertical?: boolean,
 	noMargin?: any
 	hideArrowLeft?: boolean
+	buttonProps?: any
 }
 
 const NavBar = (props: Props) => {
@@ -64,6 +65,7 @@ const NavBar = (props: Props) => {
 		<Wrapper style={{ paddingTop: props.paddingTop, ...{ flexDirection: props.isVertical ? 'column' : 'row', alignItems: props.isVertical ? 'flex-start' : 'center' }, ...props.style }}>
 			{!props.hideArrowLeft && (
 				<OButton
+					{...props.buttonProps}
 					iconProps={{
 						name: 'arrowleft',
 						size: 26

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

@@ -75,6 +75,11 @@ const NotificationsUI = (props: any) => {
 				showCall={false}
 				style={{ paddingVertical: 0 }}
 				btnStyle={{ paddingLeft: 0 }}
+        buttonProps={{
+          bgColor: theme.colors.white,
+          borderColor: theme.colors.white,
+          textStyle: { color: theme.colors.btnFont }
+        }}
 			/>
 			{showCustomerPromotions && showNotifications && (
 				<>

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

@@ -103,6 +103,11 @@ const OrderTypeSelectorUI = (props: OrderTypeSelectParams) => {
 						title={t('HOW_WILL_YOU_DELIVERY_TYPE', 'How will your order type?')}
 						titleAlign={'center'}
 						noMargin
+            buttonProps={{
+              bgColor: theme.colors.white,
+              borderColor: theme.colors.white,
+              textStyle: { color: theme.colors.btnFont }
+            }}
 					/>
 					{
 						items.length > 0 && (

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

@@ -49,6 +49,8 @@ export const PreviousOrders = (props: PreviousOrdersParams) => {
 						onClick={loadMoreOrders}
 						text={t('LOAD_MORE_ORDERS', 'Load more orders')}
 						imgRightSrc={null}
+						bgColor={theme.colors.primary}
+						borderColor={theme.colors.primary}
 						textStyle={{ color: theme.colors.white }}
 						style={{ borderRadius: 7.6, shadowOpacity: 0, marginTop: 20 }}
 					/>

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

@@ -113,6 +113,11 @@ const PromotionsUI = (props: PromotionParams) => {
         paddingTop={Platform.OS === 'ios' ? 20 : 10}
         style={{ paddingVertical: 0 }}
         btnStyle={{ paddingLeft: 0 }}
+        buttonProps={{
+          bgColor: theme.colors.white,
+          borderColor: theme.colors.white,
+          textStyle: { color: theme.colors.btnFont }
+        }}
       />
       <PromotionsContainer>
         <SearchBarContainer>

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

@@ -192,6 +192,11 @@ const ReviewDriverUI = (props: ReviewDriverParams) => {
           style={{ flexDirection: 'column', alignItems: 'flex-start' }}
           titleWrapStyle={{ paddingHorizontal: 0 }}
           titleStyle={{ marginRight: 0, marginLeft: 0 }}
+          buttonProps={{
+            bgColor: theme.colors.white,
+            borderColor: theme.colors.white,
+            textStyle: { color: theme.colors.btnFont }
+          }}
         />
         <DriverPhotoContainer>
           <View

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

@@ -215,6 +215,11 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
           style={{ flexDirection: 'column', alignItems: 'flex-start' }}
           titleWrapStyle={{ paddingHorizontal: 0 }}
           titleStyle={{ marginRight: 0, marginLeft: 0 }}
+          buttonProps={{
+            bgColor: theme.colors.white,
+            borderColor: theme.colors.white,
+            textStyle: { color: theme.colors.btnFont }
+          }}
         />
         <BusinessLogo isMulti={order?.business?.length > 1}>
           {typeof order?.logo === 'string' || !order?.logo ? (

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

@@ -73,6 +73,11 @@ const ReviewProductsUI = (props: ReviewProductParams) => {
           style={{ flexDirection: 'column', alignItems: 'flex-start' }}
           titleWrapStyle={{ paddingHorizontal: 0 }}
           titleStyle={{ marginRight: 0, marginLeft: 0 }}
+          buttonProps={{
+            bgColor: theme.colors.white,
+            borderColor: theme.colors.white,
+            textStyle: { color: theme.colors.btnFont }
+          }}
         />
         {order?.products && order.products.length > 0 && order?.products.map(productsOrder => (
           productsOrder?.length ? productsOrder?.map((product: any, i: any) => !product?.deleted ?

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

@@ -72,6 +72,11 @@ export const SessionsUI = (props: SessionsParams) => {
         showCall={false}
         paddingTop={10}
         btnStyle={{ paddingLeft: 0 }}
+        buttonProps={{
+          bgColor: theme.colors.white,
+          borderColor: theme.colors.white,
+          textStyle: { color: theme.colors.btnFont }
+        }}
       />
       {user?.session_strategy === 'jwt_session' ? (
         <>

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

@@ -155,7 +155,7 @@ const SignupFormUI = (props: SignupParams) => {
 	const showInputPhoneNumber = (validationFields?.fields?.checkout?.cellphone?.enabled ?? false) || configs?.verification_phone_required?.value === '1'
 	const googleLoginEnabled = configs?.google_login_enabled?.value === '1' || !configs?.google_login_enabled?.enabled
 	const facebookLoginEnabled = configs?.facebook_login_enabled?.value === '1' || !configs?.facebook_login_enabled?.enabled
-	const appleLoginEnabled = configs?.apple_login_enabled?.value === '1' || !configs?.apple_login_enabled?.enabled
+	const appleLoginEnabled = Platform.OS === 'ios' && (configs?.apple_login_enabled?.value === '1' || !configs?.apple_login_enabled?.enabled)
 
 	const closeAlert = () => {
 		setAlertState({
@@ -488,6 +488,11 @@ const SignupFormUI = (props: SignupParams) => {
 					btnStyle={{ paddingLeft: 0 }}
 					titleWrapStyle={{ paddingHorizontal: 0 }}
 					titleStyle={{ marginLeft: 0, marginRight: 0 }}
+          buttonProps={{
+						bgColor: theme.colors.white,
+						borderColor: theme.colors.white,
+						textStyle: { color: theme.colors.btnFont }
+					}}
 				/>
 			)}
 			<FormSide>

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

@@ -381,7 +381,7 @@ export const UserFormDetailsUI = (props: any) => {
 										))
 								},
 							)}
-							{showInputBirthday && (
+							{showInputBirthday && ((requiredFields && requiredFields?.includes?.('birthdate')) || !requiredFields) && (
 								<>
 									<WrapperBirthdate>
 										<OText size={14} lineHeight={21} color={theme.colors.textNormal} weight={'500'} style={{ textTransform: 'capitalize', alignSelf: 'flex-start' }}>
@@ -396,7 +396,7 @@ export const UserFormDetailsUI = (props: any) => {
 									<DatePickerUI open={showDatePicker} birthdate={birthdate} onConfirm={_handleChangeDate} onCancel={() => setShowDatePicker(false)} />
 								</>
 							)}
-							{!!showInputPhoneNumber && ((requiredFields && requiredFields.includes('cellphone')) || !requiredFields) && (
+							{!!showInputPhoneNumber && ((requiredFields && requiredFields?.includes?.('cellphone')) || !requiredFields) && (
 								<WrapperPhone>
 									<OText size={14} lineHeight={21} weight={'500'} color={theme.colors.textNormal}>{t('PHONE', 'Phone')}</OText>
 									<PhoneInputNumber
@@ -523,10 +523,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>

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

@@ -287,6 +287,11 @@ const ProfileUI = (props: ProfileParams) => {
 					onActionLeft={() => navigation.goBack()}
 					showCall={false}
 					btnStyle={{ paddingLeft: 0 }}
+          buttonProps={{
+            bgColor: theme.colors.white,
+            borderColor: theme.colors.white,
+            textStyle: { color: theme.colors.btnFont }
+          }}
 				/>
 				<CenterView>
 					<View style={styles.photo}>

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

@@ -141,6 +141,11 @@ const WalletsUI = (props: any) => {
               btnStyle={{ paddingLeft: 0 }}
               isVertical={!hideWalletsTheme}
               hideArrowLeft={!hideWalletsTheme}
+              buttonProps={{
+                bgColor: theme.colors.white,
+                borderColor: theme.colors.white,
+                textStyle: { color: theme.colors.btnFont }
+              }}
             />
             {isChewLayout && !openHistory && (
               <OButton

package/themes/original/src/components/shared/OButton.tsx

@@ -119,7 +119,7 @@ const OButton = (props: Props): React.ReactElement => {
 			style={{ width: props.isCircle ? 52 : props.style?.width, ...props.parentStyle }}
 			disabled={props.isDisabledWithSameStyles}
 		>
-			<StyledButton style={{ ...props.style, backgroundColor: props.bgColor ?? theme?.general?.components?.buttons?.color, borderColor: props.borderColor ?? theme?.general?.components?.buttons?.color, borderRadius: parseInt(theme?.general?.components?.buttons?.borderRadius) || props.style?.borderRadius }}>
+			<StyledButton style={{ ...props.style, backgroundColor: props.bgColor, borderColor: props.borderColor, borderRadius: props.style?.borderRadius }}>
 				{props.icon ? (
 					<props.icon {...props.iconProps} />
 				) : null}
@@ -127,7 +127,7 @@ const OButton = (props: Props): React.ReactElement => {
 					<OIcon style={props.imgLeftStyle} src={props.imgLeftSrc} color={theme.colors.textNormal} />
 				) : null}
 				{props.text ? (
-					<StyledText style={{ ...props.textStyle, color: props?.textStyle?.color ?? theme?.general?.components?.buttons?.buttonTextColor }}>{props.text}</StyledText>
+					<StyledText style={{ ...props.textStyle, color: props?.textStyle?.color }}>{props.text}</StyledText>
 				) : null}
 				{props.imgRightSrc ? (
 					<EndImage style={props.imgRightStyle} source={props.imgRightSrc} />