ordering-ui-react-native 0.22.13 → 0.22.14-release

package/themes/business/src/layouts/SafeAreaContainer.tsx

@@ -1,12 +1,12 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import {
   Dimensions,
   Platform,
   StatusBar,
-  StyleSheet,
   View,
 } from 'react-native';
-import styled from 'styled-components/native';
+import styled, { useTheme } from 'styled-components/native';
+import { useNetInfo } from '@react-native-community/netinfo';
 
 export const SafeAreaContainer = styled.SafeAreaView`
   flex: 1;
@@ -14,6 +14,10 @@ export const SafeAreaContainer = styled.SafeAreaView`
 `;
 
 export const SafeAreaContainerLayout = (props: any) => {
+  const theme = useTheme();
+  const netInfo = useNetInfo()
+
+  const [statusColor, setStatusColor] = useState<string | null>(null)
   const [orientation, setOrientation] = useState(
     Dimensions.get('window').width < Dimensions.get('window').height
       ? 'Portrait'
@@ -28,22 +32,34 @@ export const SafeAreaContainerLayout = (props: any) => {
     }
   });
 
+  useEffect(() => {
+    if (netInfo.isConnected === false) {
+      setStatusColor(theme.colors.danger500)
+    }
+
+    if (netInfo.isConnected && statusColor) {
+      setStatusColor(theme.colors.success500)
+      setTimeout(() => {
+        setStatusColor(null)
+      }, 2000);
+    }
+  }, [netInfo.isConnected])
+
   return (
-    <>
-      <SafeAreaContainer>
-        <View
-          style={{
-            paddingHorizontal: 30,
-            paddingTop: 30,
-            paddingBottom: 0,
-            flex: 1,
-          }}>
-          <StatusBar
-            barStyle={Platform.OS === 'ios' ? 'dark-content' : 'default'}
-          />
-          {props.children}
-        </View>
-      </SafeAreaContainer>
-    </>
+    <SafeAreaContainer>
+      <View
+        style={{
+          paddingHorizontal: 30,
+          paddingTop: 0,
+          paddingBottom: 0,
+          flex: 1,
+        }}>
+        <StatusBar
+          barStyle={Platform.OS === 'ios' ? 'dark-content' : 'default'}
+          {...statusColor && ({ backgroundColor: statusColor })}
+        />
+        {props.children}
+      </View>
+    </SafeAreaContainer>
   );
 };

package/themes/business/src/types/index.tsx

@@ -311,9 +311,9 @@ export interface OrdersOptionParams {
     cancelled?: Array<number>;
   };
   isBusinessApp?: boolean;
-  handleClickLogisticOrder: (status: number, orderId: number) => void,
-  logisticOrders: { orders: Array<any>, loading: boolean, error: Array<string> | string },
-  loadLogisticOrders: () => void;
+  handleClickLogisticOrder?: (status: number, orderId: number) => void,
+  logisticOrders?: { orders: Array<any>, loading: boolean, error: Array<string> | string },
+  loadLogisticOrders?: () => void;
   isLogisticActivated?: boolean;
   isAlsea?: boolean;
   checkNotification?: boolean;
@@ -321,6 +321,10 @@ export interface OrdersOptionParams {
   handleChangeOrderStatus?: () => void;
   handleSendCustomerReview?: () => void;
   orderDetailsProps?: any;
+  isNetConnected?: boolean;
+  isDriverApp?: boolean;
+  combineTabs?: boolean;
+  setCombineTabsState?: any;
 }
 export interface ActiveOrdersParams {
   orders?: any;
@@ -411,6 +415,8 @@ export interface OrderDetailsParams {
   orderTitle?: any;
   forceUpdate?: number;
   getPermissions?: any
+  loadMessages?: any;
+  notificationApp?: string
 }
 export interface ProductItemAccordionParams {
   isCartPending?: boolean;
@@ -446,6 +452,7 @@ export interface MessagesParams {
   sendMessage?: any;
   canRead?: any;
   setCanRead?: any;
+  notificationApp?: string
   handleSend?: () => {};
   setImage?: (image: string | null) => {};
   setMessage?: (comment: string) => {};
@@ -496,7 +503,8 @@ export interface FloatingButtonParams {
   firstColorCustom?: string;
   secondColorCustom?: string;
   paddingBottomIos?: any;
-  isHideRejectButtons?: boolean
+  isHideRejectButtons?: boolean;
+  principalButtonColor?: string;
 }
 export interface MomentOptionParams {
   navigation: any;
@@ -597,6 +605,7 @@ export interface AcceptOrRejectOrderParams {
   isPage?: boolean
   navigation?: any
   route?: any
+  isLoadingOrder?: boolean
 }
 
 export interface MapViewParams {

package/themes/business/src/utils/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import FontAwesome from 'react-native-vector-icons/FontAwesome';
 import { CODES } from 'ordering-components/native';
+import { CURRENCY } from '../config/currency'
 
 export const flatArray = (arr: any) => [].concat(...arr);
 
@@ -39,7 +40,8 @@ export const getTraduction = (key: string, t: any) => {
     ERROR_USER_UPDATE_YOU_HAVE_ASSIGNED_ORDERS:
       "You can't because you have assigned orders",
     ERROR_INVALID_OFFER: 'The offer doesn\'t exist',
-    ERROR_AUTH_DRIVER_LOGIN_VALIDATION: 'Error auth driver login validation'
+    ERROR_AUTH_DRIVER_LOGIN_VALIDATION: 'Error auth driver login validation',
+    ERROR_DRIVER_UPDATE_SCHEDULE: 'Error driver update schedule',
   };
 
   return keyList[key] ? t(key, keyList[key]) : t(key);
@@ -146,17 +148,22 @@ export const transformCountryCode = (countryCode: number) => {
   return code?.countryCode;
 };
 
+export const findExitingCode = (countryCode: string) => {
+  const code = CODES.find((code: any) => code.countryCode === (countryCode || '').toUpperCase())
+  return code?.countryCode
+}
+
 /**
  * Function to check if a number is decimal or not
  * @param {*} value number to check if decimal or not
  * @param {*} parser function fallback when is decimal
  * @returns string
  */
-export const verifyDecimals = (value: number, parser: any) => {
+export const verifyDecimals = (value: number, parser: any, options?: any) => {
   if (value % 1 === 0) {
     return value;
   } else {
-    return parser(value);
+    return options ? parser(value, options) : parser(value);
   }
 };
 
@@ -338,6 +345,24 @@ export const getOrderStatus = (s: string, t: any) => {
       value: t('ORDER_DRIVER_ON_WAY', 'Driver on way'),
       slug: 'ORDER_DRIVER_ON_WAY',
       percentage: 45
+    },
+    {
+      key: 24,
+      value: t('ORDER_DRIVER_WAITING_FOR_ORDER', 'Driver waiting for order'),
+      slug: 'ORDER_DRIVER_WAITING_FOR_ORDER',
+      percentage: 25
+    },
+    {
+      key: 25,
+      value: t('ORDER_ACCEPTED_BY_DRIVER_COMPANY', 'Accepted by driver company'),
+      slug: 'ORDER_ACCEPTED_BY_DRIVER_COMPANY',
+      percentage: 25
+    },
+    {
+      key: 26,
+      value: t('ORDER_DRIVER_ARRIVED_CUSTOMER', 'Driver arrived to customer'),
+      slug: 'ORDER_DRIVER_ARRIVED_CUSTOMER',
+      percentage: 80
     }
   ];
 
@@ -396,3 +421,8 @@ export const calculateDistance = (
   const distanceInKm = distance / 1000;
   return distanceInKm;
 };
+
+export const getCurrenySymbol = (code : string) => {
+  return CURRENCY?.[code]?.symbol ?? code
+}
+

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

@@ -197,7 +197,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 			{isFarAway && (
 				<FarAwayMessage style={styles.farAwayMsg}>
 					<Ionicons name='md-warning-outline' style={styles.iconStyle} />
-					<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textNormal}>{t('YOU_ARE_FAR_FROM_ADDRESS', 'You are far from this address')}</OText>
+					<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textNormal}>{t('YOU_ARE_FAR_FROM_ADDRESS', 'Your are far from this address')}</OText>
 				</FarAwayMessage>
 			)}
 			{!auth && (

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

@@ -410,8 +410,7 @@ const LoginFormUI = (props: LoginParams) => {
                     textInputProps={{
                       returnKeyType: 'next',
                       onSubmitEditing: () => inputRef?.current?.focus?.(),
-                      style: { borderWidth: 0, fontSize: 12 },
-					  maxLength: 10
+                      style: { borderWidth: 0, fontSize: 12 }
                     }}
                     textWrapStyle={{ borderColor: theme.colors.clear, borderWidth: 0, height: 40, paddingStart: 0 }}
                   />

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

@@ -155,7 +155,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 				{isFarAway && (
 					<FarAwayMessage style={styles.farAwayMsg}>
 						<Ionicons name='md-warning-outline' style={styles.iconStyle} />
-						<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textNormal}>{t('YOU_ARE_FAR_FROM_ADDRESS', 'You are far from this address')}</OText>
+						<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textNormal}>{t('YOU_ARE_FAR_FROM_ADDRESS', 'Your are far from this address')}</OText>
 					</FarAwayMessage>
 				)}
 				<View style={styles.wrapperOrderOptions}>

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

@@ -50,6 +50,12 @@ const CheckoutUI = (props: any) => {
     }
   }, [cart])
 
+  useEffect(() => {
+    if (!cartState.loading && cart && !cart?.valid && cart?.status === 2) {
+      navigation?.canGoBack() && navigation.goBack()
+    }
+  }, [cart])
+
   return (
     <>
       <PaymentOptions

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

@@ -4,6 +4,7 @@ import { OIcon, OButton, OText } from '../shared'
 import { ImageStyle, TextStyle, View, Platform, TouchableOpacity } from 'react-native'
 import { useConfig, useLanguage, useOrder } from 'ordering-components/native'
 import { useTheme } from 'styled-components/native'
+
 const Wrapper = styled.View`
   background-color: ${(props: any) => props.theme.colors.white};
   padding: 10px 0px 20px 0px;
@@ -65,28 +66,27 @@ const NavBar = (props: Props) => {
 
   return (
     <Wrapper style={{ paddingTop: props.paddingTop, ...props.style }}>
-      {(props?.onActionLeft) && (
+      {(props?.onActionLeft || props?.leftImg) && (
         <OButton
-          imgLeftSrc={props.leftImg}
+          imgLeftSrc={props.leftImg || theme.images.general.arrow_left}
           imgRightSrc={null}
           style={{ ...btnBackArrow, ...props.btnStyle }}
           onClick={props.onActionLeft}
-          imgLeftStyle={props.imgLeftStyle}
-          {...(!props.leftImg && { iconProps: { name: 'arrowleft', size: 28, color: props.btnStyle?.color } })}
+          imgLeftStyle= {props.imgLeftStyle}
         />)
       }
       <TitleTopWrapper>
         {props.withIcon
           ? (
-            <OIcon
-              url={props.icon}
-              style={{
-                borderColor: theme.colors.lightGray,
-                borderRadius: 20,
-              }}
-              width={60}
-              height={60}
-            />
+              <OIcon
+                url={props.icon}
+                style={{
+                  borderColor: theme.colors.lightGray,
+                  borderRadius: 20,
+                }}
+                width={60}
+                height={60}
+              />
           )
           : null
         }
@@ -134,7 +134,7 @@ const NavBar = (props: Props) => {
         </View>
       )}
 
-      {props.rightComponent}
+      { props.rightComponent }
     </Wrapper>
   )
 }

package/themes/kiosk/src/components/OptionCard/index.tsx

@@ -95,7 +95,7 @@ interface Props {
   style?: ViewStyle;
   bgImage: ImageSourcePropType;
   innerStyle?: ViewStyle;
-  icon?: ImageSourcePropType;
+  icon: ImageSourcePropType;
   iconStyle?: ImageStyle;
   callToActionText: string;
   callToActionTextStyle?: TextStyle;

package/themes/kiosk/src/components/OrderTypeCardSelector/index.tsx

@@ -15,8 +15,6 @@ import { Container } from '../../layouts/Container'
 import NavBar from '../NavBar'
 import { LANDSCAPE, PORTRAIT, useDeviceOrientation } from '../../../../../src/hooks/DeviceOrientation'
 import GridContainer from '../../layouts/GridContainer'
-import AntDesignIcon from 'react-native-vector-icons/AntDesign'
-import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons'
 
 const OrderTypeSelectorCardUI = (props: OrderTypeSelectParams) => {
   const {
@@ -29,7 +27,7 @@ const OrderTypeSelectorCardUI = (props: OrderTypeSelectParams) => {
     callback
   } = props
 
-  const theme = useTheme();
+	const theme = useTheme();
   const [, t] = useLanguage();
   const [orientationState] = useDeviceOrientation();
   const [orderState] = useOrder()
@@ -47,7 +45,7 @@ const OrderTypeSelectorCardUI = (props: OrderTypeSelectParams) => {
   }
 
   useEffect(() => {
-    if (isCardCliked) {
+    if(isCardCliked){
       callback?.()
       setIsCardClicked(false)
       setIsLoadingCard(null)
@@ -85,13 +83,13 @@ const OrderTypeSelectorCardUI = (props: OrderTypeSelectParams) => {
             style={cardStyle}
             isDisabled={isCardCliked}
             isLoading={isLoadingCard === 'Eat In'}
-            title={t('EAT_IN', 'Eat In')}
+            title={t('EAT_IN','Eat In')}
             description={t('EAT_IN_DESCRIPTION', 'We are very glad to have you here. Bon appetit!')}
             bgImage={theme.images.general.eatIn}
-            VectorIcon={() => <MaterialIcon name='pin-outline' size={28} color='white' style={{ marginBottom: 10 }} />}
+            icon={theme.images.general.pushPin}
             callToActionText={t('START_MY_ORDER', 'Start my order')}
             onClick={() => {
-              if (_eatIn?.value !== orderState?.options?.type) {
+              if(_eatIn?.value !== orderState?.options?.type){
                 handleChangeOrderType(_eatIn?.value);
                 setIsCardClicked(true)
                 setIsLoadingCard('Eat In')
@@ -108,15 +106,15 @@ const OrderTypeSelectorCardUI = (props: OrderTypeSelectParams) => {
 
           <OptionCard
             style={cardStyle}
-            title={t('TAKE_OUT', 'Take out')}
+            title={t('TAKE_OUT','Take out')}
             isDisabled={isCardCliked}
             isLoading={isLoadingCard === 'Take out'}
             description={t('TAKE_OUT_DESCRIPTION', 'You are very welcome anytime you visit us!')}
             bgImage={theme.images.general.takeOut}
-            VectorIcon={() => <AntDesignIcon name='shoppingcart' size={28} color='white' style={{ marginBottom: 10 }} />}
+            icon={theme.images.general.shoppingCart}
             callToActionText={t('START_MY_ORDER', 'Start my order')}
             onClick={() => {
-              if (_takeOut?.value !== orderState?.options?.type) {
+              if(_takeOut?.value !== orderState?.options?.type){
                 handleChangeOrderType(_takeOut?.value);
                 setIsCardClicked(true)
                 setIsLoadingCard('Take out')

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

@@ -10,8 +10,6 @@ import {
 
 import * as React from 'react';
 import styled from 'styled-components/native';
-import AntDesignIcon from 'react-native-vector-icons/AntDesign'
-import { Icon, IconProps } from 'react-native-vector-icons/Icon';
 
 const StyledButton = styled.View<Props>`
   background-color: ${(props: any) => props.theme.colors.primary};
@@ -79,19 +77,17 @@ interface Props {
   isCircle?: boolean;
   bgColor?: string;
   borderColor?: string;
-  iconProps?: IconProps;
-  IconCustom?: React.FunctionComponent
 }
 
 const OButton = (props: Props): React.ReactElement => {
   if (props.isDisabled) {
     return (
       <View style={props.parentStyle}>
-        <StyledButtonDisabled style={props.style}>
-          <StyledTextDisabled style={props.disabledTextStyle ? props.disabledTextStyle : props.textStyle}>
-            {props.text}
-          </StyledTextDisabled>
-        </StyledButtonDisabled>
+      <StyledButtonDisabled style={props.style}>
+        <StyledTextDisabled style={props.disabledTextStyle ? props.disabledTextStyle : props.textStyle}>
+          {props.text}
+        </StyledTextDisabled>
+      </StyledButtonDisabled>
       </View>
     );
   }
@@ -115,15 +111,6 @@ const OButton = (props: Props): React.ReactElement => {
         {props.imgLeftSrc ? (
           <StyledImage style={props.imgLeftStyle} source={props.imgLeftSrc} />
         ) : null}
-        {props.iconProps ? (
-          <>
-            {props?.IconCustom ? (
-              <props.IconCustom {...props.iconProps} />
-            ) : (
-              <AntDesignIcon {...props.iconProps} />
-            )}
-          </>
-        ) : null}
         {props.text ? (
           <StyledText style={props.textStyle}>{props.text}</StyledText>
         ) : null}

package/themes/original/index.tsx

@@ -19,6 +19,7 @@ import { Favorite } from './src/components/Favorite';
 import { FavoriteList } from './src/components/FavoriteList';
 import { FloatingButton } from './src/components/FloatingButton';
 import { ForgotPasswordForm } from './src/components/ForgotPasswordForm';
+import { GPSButton } from './src/components/GPSButton';
 import { MomentOption } from './src/components/MomentOption';
 import { OrdersOption } from './src/components/OrdersOption';
 import { OrderDetails } from './src/components/OrderDetails';
@@ -85,6 +86,7 @@ import { VerifyPhone } from './src/components/VerifyPhone';
 import { GoogleLogin } from './src/components/GoogleLogin';
 import { PreviousOrders } from './src/components/PreviousOrders';
 import { PaymentOptionCash } from './src/components/PaymentOptionCash';
+import { SendGiftCard } from './src/components/GiftCard/SendGiftCard';
 import { StripeElementsForm } from './src/components/StripeElementsForm';
 import { StripeCardsList } from './src/components/StripeCardsList';
 import { ProductIngredient } from './src/components/ProductIngredient';
@@ -106,6 +108,8 @@ import { OSBill, OSTable, OSCoupon, OSTotal, OSRow } from './src/components/Orde
 import { FormInput, FormSide, ButtonsWrapper, LoginWith, OTab, OTabs } from './src/components/LoginForm/styles';
 import { OSItem, OSItemContent, OSItemActions } from './src/components/PaymentOptionStripe/styles';
 
+import { orderTypeList, getTraduction, verifyDecimals, getOrderStatus, getOrderStatuPickUp } from './src/utils'
+
 import Alert from './src/providers/AlertProvider'
 
 import {
@@ -182,6 +186,7 @@ export {
 	Checkout,
 	Favorite,
 	FavoriteList,
+  GPSButton,
 	ForgotPasswordForm,
 	MomentOption,
 	OrdersOption,
@@ -256,6 +261,7 @@ export {
 	ProductIngredient,
 	ProductOption,
 	ProductOptionSubOption,
+  SendGiftCard,
 	Sessions,
 	SingleProductReview,
 	LogoutButton,
@@ -343,6 +349,11 @@ export {
 	_setStoreData,
 	_removeStoreData,
 	_clearStoreData,
+	orderTypeList,
+  getTraduction,
+  verifyDecimals,
+  getOrderStatus,
+  getOrderStatuPickUp,
 
 	// Date Picker
 	DatePickerUI

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

@@ -66,7 +66,9 @@ const AddressFormUI = (props: AddressFormParams) => {
 		isFromProductsList,
 		hasAddressDefault,
 		afterSignup,
-		businessSlug
+		businessSlug,
+		isFromCheckout,
+		onNavigationRedirect
 	} = props;
 
 	const theme = useTheme();
@@ -132,6 +134,7 @@ const AddressFormUI = (props: AddressFormParams) => {
 	const [configState] = useConfig();
 	const [orderState] = useOrder();
 	const { handleSubmit, errors, control, setValue } = useForm();
+	const [autoCompleteAddress, setAutoCompleteAddress] = useState(false)
 
 	const [toggleMap, setToggleMap] = useState(false);
 	const [alertState, setAlertState] = useState<{
@@ -172,6 +175,8 @@ const AddressFormUI = (props: AddressFormParams) => {
 	const isHideMap = theme?.address?.components?.map?.hidden
 	const isHideIcons = theme?.address?.components?.icons?.hidden
 	const continueAsGuest = () => navigation.navigate(!!businessSlug ? 'Business' : 'BusinessList', { isGuestUser: true });
+	const unaddressedTypes = configState?.configs?.unaddressed_order_types_allowed?.value.split('|').map((value: any) => Number(value)) || []
+	const isAllowUnaddressOrderType = unaddressedTypes.includes(orderState?.options?.type)
 	const goToBack = () => navigation?.canGoBack() && navigation.goBack();
 
 	const getAddressFormatted = (address: any) => {
@@ -351,9 +356,6 @@ const AddressFormUI = (props: AddressFormParams) => {
 			map_data: { library: 'google', place_id: data.place_id },
 			zip_code: data?.zip_code || null,
 		};
-		if (googleInput?.current) {
-			googleInput?.current?.setAddressText(addressSelected.address);
-		}
 		updateChanges(addressSelected);
 	};
 
@@ -371,6 +373,10 @@ const AddressFormUI = (props: AddressFormParams) => {
 		setToggleMap(!toggleMap);
 	};
 
+	const showFieldWithTheme = (name) => {
+		return !theme?.address?.components?.[name]?.hidden
+	}
+
 	useEffect(() => {
 		if (
 			orderState.loading &&
@@ -379,9 +385,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]);
 
@@ -520,6 +528,12 @@ const AddressFormUI = (props: AddressFormParams) => {
 		setIsSignUpEffect(true);
 	}, [orderState.loading]);
 
+	useEffect(() => {
+		if (isAllowUnaddressOrderType) {
+			onNavigationRedirect && onNavigationRedirect(!!businessSlug ? 'Business' : 'BusinessList')
+		}
+	}, [isAllowUnaddressOrderType])
+
 	return (
 		<ScrollView
 			keyboardShouldPersistTaps='always'
@@ -565,6 +579,7 @@ const AddressFormUI = (props: AddressFormParams) => {
 											placeholder={t('ADD_ADDRESS', 'Add a address')}
 											onPress={(data, details: any) => {
 												handleChangeAddress(data, details);
+												setAutoCompleteAddress(true);
 											}}
 											query={{
 												key: googleMapsApiKey,
@@ -579,6 +594,7 @@ const AddressFormUI = (props: AddressFormParams) => {
 															target: { name: 'address', value: text },
 														});
 														setValue('address', text);
+														setAutoCompleteAddress(true)
 													}
 													setIsFirstTime(false);
 													setAddressEditing(text.length == 0);
@@ -666,13 +682,15 @@ const AddressFormUI = (props: AddressFormParams) => {
 											setSaveLocation={setSaveMapLocation}
 											handleToggleMap={handleToggleMap}
 											isIntGeoCoder
+											setAutoCompleteAddress={setAutoCompleteAddress}
+											autoCompleteAddress={autoCompleteAddress}
 										/>
 									</GoogleMapContainer>
 								</View>
 							)}
 
 							<View style={{ flexDirection: 'row', flexBasis: '50%' }}>
-								{showField && showField('internal_number') && (
+								{showField?.('internal_number') && ((isRequiredField && isRequiredField('internal_number')) || showFieldWithTheme('internal_number')) && (
 									<Controller
 										control={control}
 										name="internal_number"
@@ -708,7 +726,7 @@ const AddressFormUI = (props: AddressFormParams) => {
 												isFocusHighlight
 												style={{
 													...styles.inputsStyle,
-													marginRight: showField('internal_number') && showField('zipcode') ? 24 : 0
+													marginRight: showField?.('internal_number') && showField?.('zipcode') ? 24 : 0
 												}}
 												forwardRef={internalNumberRef}
 												returnKeyType="next"
@@ -719,7 +737,7 @@ const AddressFormUI = (props: AddressFormParams) => {
 									/>
 								)}
 
-								{showField && showField('zipcode') && (
+								{showField?.('zipcode') && ((isRequiredField && isRequiredField('zipcode')) || showFieldWithTheme('zipcode')) && (
 									<Controller
 										control={control}
 										name="zipcode"
@@ -764,7 +782,7 @@ const AddressFormUI = (props: AddressFormParams) => {
 								)}
 							</View>
 
-							{showField && showField('address_notes') && (
+							{showField?.('address_notes') && ((isRequiredField && isRequiredField('address_notes')) || showFieldWithTheme('address_notes')) && (
 								<Controller
 									control={control}
 									name="address_notes"
@@ -845,9 +863,6 @@ const AddressFormUI = (props: AddressFormParams) => {
 										: t('LOADING', 'Loading')
 								}
 								onClick={handleSubmit(onSubmit)}
-								bgColor={theme.colors.primary}
-								borderColor={theme.colors.primary}
-								textStyle={{ color: theme.colors.white }}
 								isDisabled={formState.loading}
 								style={{ borderRadius: 7.6, shadowOpacity: 0 }}
 								showNextIcon
@@ -855,8 +870,9 @@ const AddressFormUI = (props: AddressFormParams) => {
 						) : (
 							<OButton
 								text={t('CANCEL', 'Cancel')}
-								bgColor={theme.colors.white}
-								borderColor={theme.colors.primary}
+								bgColor={theme.colors.secundary}
+								borderColor={theme.colors.secundary}
+								textStyle={{ color: theme.colors.textNormal }}
 								style={{ borderRadius: 7.6, borderWidth: 1, shadowOpacity: 0 }}
 								onClick={() => navigation?.canGoBack() && navigation.goBack()}
 							/>
@@ -882,7 +898,6 @@ const AddressFormUI = (props: AddressFormParams) => {
 						)}
 						<OButton
 							text={t('SAVE', 'Save')}
-							textStyle={{ color: theme.colors.white }}
 							imgRightSrc={null}
 							style={{ marginHorizontal: 30, marginBottom: 10 }}
 							onClick={() => setSaveMapLocation(true)}