ordering-ui-react-native 0.11.12 → 0.11.16

package/package.json

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

package/src/components/OrderDetails/index.tsx

@@ -469,12 +469,8 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
               {
                 (
                   parseInt(order?.status) === 1 ||
-                  parseInt(order?.status) === 2 ||
-                  parseInt(order?.status) === 5 ||
-                  parseInt(order?.status) === 6 ||
-                  parseInt(order?.status) === 10 ||
                   parseInt(order?.status) === 11 ||
-                  parseInt(order?.status) === 12
+                  parseInt(order?.status) === 15 
                 ) && !order.review && !isReviewed && (
                   <OButton
                     onClick={() => handleClickOrderReview(order)}

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

@@ -53,6 +53,7 @@ const FloatingButtonUI = (props: FloatingButtonParams) => {
   return (
     <Container
       isIos={Platform.OS === 'ios'}
+      paddingBottomIos={props.paddingBottomIos}
       style={{ paddingHorizontal: props.isPadding ? 30 : 0 }}>
       <View
         style={{

package/themes/business/src/components/FloatingButton/styles.tsx

@@ -15,7 +15,7 @@ export const Container = styled.View`
   ${(props: any) =>
     props.isIos &&
     css`
-      padding-bottom: 5px;
+      padding-bottom: ${(props: any) => props.paddingBottomIos ? `${props.paddingBottomIos}px` : '5px'};
     `}
 `;
 

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

@@ -436,6 +436,7 @@ export interface FloatingButtonParams {
   secondButton?: boolean;
   firstColorCustom?: string;
   secondColorCustom?: string;
+  paddingBottomIos?: any;
 }
 export interface MomentOptionParams {
   navigation: any;

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

@@ -1,9 +1,9 @@
 import React, { createRef, useEffect, useRef, useState } from 'react';
-import { View, Pressable, StyleSheet, Keyboard, TextStyle } from 'react-native';
+import { View, Pressable, StyleSheet, Keyboard, TextStyle, Linking, TouchableOpacity, Platform } from 'react-native';
 import { useForm, Controller } from 'react-hook-form';
 import Spinner from 'react-native-loading-spinner-overlay';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'
-
+import CheckBox from '@react-native-community/checkbox';
 import { PhoneInputNumber } from '../PhoneInputNumber'
 import { FacebookLogin } from '../FacebookLogin'
 
@@ -99,7 +99,11 @@ const SignupFormUI = (props: SignupParams) => {
 			flexDirection: 'row',
 			justifyContent: 'space-between',
 			marginBottom: 30
-		}
+		},
+		checkBoxStyle: {
+      width: 25,
+      height: 25,
+    }
 	});
 	const showInputPhoneNumber = validationFields?.fields?.checkout?.cellphone?.enabled ?? false
 
@@ -259,6 +263,15 @@ const SignupFormUI = (props: SignupParams) => {
 		onChange(value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, ''))
 	}
 
+	const handleOpenTermsUrl = async (url: any) => {
+		const supported = await Linking.canOpenURL(url);	
+		if (supported) {
+			await Linking.openURL(url);
+		} else {
+			showToast(ToastType.Error, t('VALIDATION_ERROR_ACTIVE_URL', 'The _attribute_ is not a valid URL.').replace('_attribute_', t('URL', 'URL')))
+		}
+	}
+
 	useEffect(() => {
 		if (!formState.loading && formState.result?.error) {
 			formState.result?.result && showToast(
@@ -509,6 +522,42 @@ const SignupFormUI = (props: SignupParams) => {
 						<Spinner visible />
 					)}
 
+					{configs?.terms_and_conditions?.value === 'true' && (
+						<View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 10 }}>
+							<Controller
+								control={control}
+								render={({ onChange, value }: any) => (
+                  <CheckBox
+                    value={value}
+                    onValueChange={newValue => {
+                      onChange(newValue)
+                    }}
+                    boxType={'square'}
+                    tintColors={{
+                      true: theme.colors.primary,
+                      false: theme.colors.disabled
+                    }}
+                    tintColor={theme.colors.disabled}
+                    onCheckColor={theme.colors.primary}
+                    onTintColor={theme.colors.primary}
+                    style={Platform.OS === 'ios' && registerStyles.checkBoxStyle}
+                  />
+								)}
+								name='termsAccept'
+								rules={{
+									required: t('VALIDATION_ERROR_ACCEPTED', 'The _attribute_ must be accepted.').replace('_attribute_', t('TERMS_AND_CONDITIONS', 'Terms & Conditions'))
+								}}
+								defaultValue={false}
+							/>
+							<OText style={{ ...theme.labels.middle, paddingHorizontal: 5 }}>{t('TERMS_AND_CONDITIONS_TEXT', 'I’m agree with')}</OText>
+							<TouchableOpacity
+								onPress={() => handleOpenTermsUrl(configs?.terms_and_conditions_url?.value)}
+							>
+								<OText style={{ ...theme.labels.middle }} color={theme.colors.primary}>{t('TERMS_AND_CONDITIONS', 'Terms & Conditions')}</OText>
+							</TouchableOpacity>
+						</View>
+					)}
+
 					{signupTab === 'cellphone' && useSignupByEmail && useSignupByCellphone ? (
 						<OButton
 							onClick={handleSubmit(onSubmit)}

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

@@ -1,5 +1,5 @@
 import React, { createRef, useEffect, useRef, useState } from 'react';
-import { View, Pressable, StyleSheet, Keyboard } from 'react-native';
+import { View, Pressable, StyleSheet, Keyboard, Linking, Platform } from 'react-native';
 import { useForm, Controller } from 'react-hook-form';
 import Spinner from 'react-native-loading-spinner-overlay';
 
@@ -31,6 +31,7 @@ import NavBar from '../NavBar'
 import { VerifyPhone } from '../VerifyPhone';
 
 import { OText, OButton, OInput, OModal } from '../shared';
+import CheckBox from '@react-native-community/checkbox';
 import { SignupParams } from '../../types';
 import { sortInputFields } from '../../utils';
 import { useTheme } from 'styled-components/native';
@@ -90,7 +91,11 @@ const SignupFormUI = (props: SignupParams) => {
 			paddingBottom: 20 + bottom,
 			borderTopWidth: 1,
 			borderTopColor: theme.colors.secundary
-		}
+		},
+		checkBoxStyle: {
+      width: 20,
+      height: 20,
+    }
 	});
 
 	const showInputPhoneNumber = validationFields?.fields?.checkout?.cellphone?.enabled ?? false
@@ -249,6 +254,16 @@ const SignupFormUI = (props: SignupParams) => {
 		onChange(value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, ''))
 	}
 
+	const handleOpenTermsUrl = async (url: any) => {
+		const supported = await Linking.canOpenURL(url);
+
+		if (supported) {
+		  	await Linking.openURL(url);
+		} else {
+		  	showToast(ToastType.Error, t('VALIDATION_ERROR_ACTIVE_URL', 'The _attribute_ is not a valid URL.').replace('_attribute_', t('URL', 'URL')))
+		}
+	}
+
 	useEffect(() => {
 		if (!formState.loading && formState.result?.error) {
 			formState.result?.result && showToast(
@@ -394,6 +409,46 @@ const SignupFormUI = (props: SignupParams) => {
 								</View>
 							)}
 
+							{configs?.terms_and_conditions?.value === 'true' && (
+								<View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 20 }}>
+									<Controller
+										control={control}
+										render={({ onChange, value }: any) => (
+											<CheckBox
+												value={value}
+												onValueChange={newValue => {
+													onChange(newValue)
+												}}
+												boxType={'square'}
+												tintColors={{
+													true: theme.colors.primary,
+													false: theme.colors.disabled
+												}}
+												tintColor={theme.colors.disabled}
+												onCheckColor={theme.colors.primary}
+												onTintColor={theme.colors.primary}
+												style={Platform.OS === 'ios' && style.checkBoxStyle}
+											/>
+										)}
+										name='termsAccept'
+										rules={{
+											required: t('VALIDATION_ERROR_ACCEPTED', 'The _attribute_ must be accepted.').replace('_attribute_', t('TERMS_AND_CONDITIONS', 'Terms & Conditions'))
+										}}
+										defaultValue={false}
+									/>
+									<OText style={{ ...theme.labels.normal, paddingHorizontal: 5 }}>{t('TERMS_AND_CONDITIONS_TEXT', 'I’m agree with')}</OText>
+									<OButton
+										imgRightSrc={null}
+										text={t('TERMS_AND_CONDITIONS', 'Terms & Conditions')}
+										bgColor='#FFF'
+										borderColor='#FFF'
+										style={{ paddingLeft: 0, paddingRight: 0, height: 30, shadowColor: '#FFF' }}
+										textStyle={{ color: theme.colors.primary, marginLeft: 0, marginRight: 0 }}
+										onClick={() => handleOpenTermsUrl(configs?.terms_and_conditions_url?.value)}
+									/>
+								</View>
+							)}
+
 							{signupTab !== 'cellphone' && (
 								<View style={{ minHeight: 42, marginBottom: 16 }}>
 									<Controller

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

@@ -6,9 +6,7 @@ import {
   useOrder,
   useSession,
   useConfig,
-  useApi,
-  useToast,
-  ToastType
+  useApi
 } from 'ordering-components/native'
 import Carousel from 'react-native-snap-carousel';
 import Geocoder from 'react-native-geocoding';
@@ -28,18 +26,16 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 
   const theme = useTheme();
   const [, t] = useLanguage();
-  const [{user, auth, accessToken}] = useSession()
+  const [{user, accessToken}] = useSession()
   const [, {changeAddress}] = useOrder()
   const [orientationState] = useDeviceOrientation();
   const [configState] = useConfig()
   const [ordering] = useApi()
-  const [, {showToast}] = useToast()
   const [addressState, setAddressState] = useState<any>({ loading: false, changes: {}, error: null, address: {} })
   const googleMapsApiKey = configState?.configs?.google_maps_api_key?.value
 
   const _categories: any = business?.original?.categories;
   let _promos: any = [];
-
   _categories?.forEach((categ: any) => {
     const _featuredProds = categ?.products?.filter(
       (prod: any) => prod.featured,
@@ -52,7 +48,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 
   const handleCurrentUserLocation = async () => {
     let addressValue : any = []
-    const data: any = { address: null, error: null }
+    let data: any = { address: null, error: null }
     const filterAddressInfo = [
       { tag: 'street_number', isShort: true },
       { tag: 'route', isShort: true },
@@ -60,13 +56,11 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
       { tag: 'administrative_area_level_1', isShort: false },
       { tag: 'country', isShort: false },
     ]
-
-    try {
       Geocoder.init(googleMapsApiKey);
       Geocoder.from({
-        latitude: business.location.lat,
-        longitude: business.location.lng
-      }).then((json : any) => {
+        latitude: business.location?.lat,
+        longitude: business.location?.lng
+      }).then( async (json : any) => {
         if(json.results && json.results?.length > 0){
             for (const component of json.results?.[0].address_components) {
               const addressType = component.types?.[0]
@@ -76,7 +70,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
                 }
               }
             }
-            data.address = {
+            data = {
               address: addressValue.join(', '),
               location: json.results[0].geometry.location,
               map_data: {
@@ -84,44 +78,38 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
                 place_id: json.results?.[0].place_id
               }
             }
+            setAddressState({ ...addressState, loading: true })
+            try {
+              const { content } = await ordering
+              .users(user?.id)
+              .addresses()
+              .save(data.address, { accessToken })
+              setAddressState({
+                ...addressState,
+                loading: false,
+                error: content.error ? content.result : null,
+              })
+              if (!content.error && data) {
+                setAddressState({
+                  ...addressState,
+                  address: data
+                })
+                changeAddress(data)
+              }
+            } catch (err : any) {
+              setAddressState({
+                ...addressState,
+                loading: false,
+                error: [err.message],
+                address: {}
+              })
+            }
         }
       })
-    } catch (err : any){
-      showToast(ToastType.Error, err?.message)
-    }
-    setAddressState({ ...addressState, loading: true })
-    try {
-      const { content } = await ordering
-        .users(user?.id)
-        .addresses()
-        .save(data.address, { accessToken })
-      setAddressState({
-        ...addressState,
-        loading: false,
-        error: content.error ? content.result : null,
-      })
-      if (!content.error) {
-        setAddressState({
-          ...addressState,
-          address: content.result
-        })
-        changeAddress(content.result.id, {
-          address: content.result,
-          isEdit: false
-        })
-      }
-    } catch (err : any) {
-      setAddressState({
-        ...addressState,
-        loading: false,
-        error: [err.message],
-        address: {}
-      })
-    }
   }
 
   useEffect(() => {
-    if(business?.location && auth && googleMapsApiKey){
+    if(business?.location?.lat && business?.location?.lng){
       handleCurrentUserLocation()
     }
   }, [business?.location, googleMapsApiKey])
@@ -212,7 +200,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
   );
 
   if (businessState?.error || addressState.error) {
-    return <OText>error!</OText>;
+    return <OText>{t('ERROR', 'Error')}</OText>;
   }
 
   return (

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

@@ -122,7 +122,7 @@ const CartUI = (props: any) => {
         >
           <OText
             weight="500"
-            size={21}
+            size={18}
             color={theme.colors.black}
           >
             {t('THIS_ORDER_IS_TO', 'This order is to')}
@@ -136,7 +136,7 @@ const CartUI = (props: any) => {
             bgColor="transparent"
             borderColor="transparent"
             style={{ paddingEnd: 0 }}
-            textStyle={{ color: theme.colors.primary, marginEnd: 0 }}
+            textStyle={{ color: theme.colors.primary, marginEnd: 0, fontSize: 18 }}
             onClick={handleChangeOrderType}
           />
         </OrderTypeWrapper>

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

@@ -187,14 +187,14 @@ const TopBar = (props:any) => {
 		<StyledTopBar>
 			<View>
 				<OText
-					size={20}
+					size={24}
 					weight="700"
 					mBottom={4}
 				>
 					{t('YOUR_ORDER', 'your order')}
 				</OText>
 				<OText
-					size={20}
+					size={18}
 					weight="500"
 					color={theme.colors.mediumGray}
 				>

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

@@ -55,6 +55,7 @@ const CustomerName = (props: Props): React.ReactElement => {
   const submitButton  = (<OButton
     text={t('PROCEED_TO_PAY', 'Proceed to Pay')}
     onClick={handleSubmit(onSubmit)}
+    textStyle={{color: theme.colors.primaryContrast, fontSize: 20}}
     parentStyle={{
       height: orientationState?.orientation === PORTRAIT
          ? 50 : 100
@@ -118,14 +119,13 @@ const CustomerName = (props: Props): React.ReactElement => {
                 'Invalid name',
               ).replace('_attribute_', t('NAME', 'Name')),
             }
-          
           }}
           defaultValue=""
         />
 
         {orientationState?.orientation === LANDSCAPE && submitButton}
       </Container>
-      
+
       {(orientationState?.orientation === PORTRAIT) && (
         <OSActions>
           {submitButton}

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

@@ -18,6 +18,7 @@ import {
   OSTable,
   OSActions,
   OSInputWrapper,
+  SentReceipt
 } from './styles'
 import { OrderDetailsParams, Product } from '../../types'
 import { Container } from '../../layouts/Container';
@@ -29,7 +30,7 @@ import { verifyDecimals } from '../../../../../src/utils'
 import { LANDSCAPE, PORTRAIT, useDeviceOrientation } from '../../../../../src/hooks/DeviceOrientation'
 import { useTheme } from 'styled-components/native'
 import { _retrieveStoreData } from '../../../../../src/providers/StoreUtil';
-
+import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons'
 const _EMAIL = 'email';
 const _SMS = 'sms';
 
@@ -161,7 +162,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
         setCountReceipts(countReceipts - 1)
       }
 
-    }catch (error) {
+    } catch (error : any) {
       showToast(ToastType.Error, error.message)
     }
     setIsLoading(false)
@@ -243,17 +244,19 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
             marginBottom: 10,
           }}
         >
-
-          <OText>{t('SEND_RECEIPT', 'Send receipt')}</OText>
+          <SentReceipt>
+            <MaterialIcon name='check-circle' color={theme.colors.primary} size={28} />
+            <OText size={20} mLeft={10}>{t('SEND_RECEIPT', 'Send receipt')}</OText>
+          </SentReceipt>
+          <OText size={20}>
+            {countReceipts}/5 {t('RECIPTS_REMAINING', 'Recipts remaining')}
+          </OText>
 
           {/* <OptionSwitch
             options={optionsToSendReceipt}
             onChange={setOptionToSendReceipt}
           /> */}
         </OSTable>
-        <OText size={14} style={{alignSelf: 'flex-end'}}>
-          {countReceipts}/5 {t('RECIPTS_REMAINING', 'Recipts remaining')}
-        </OText>
         <OSTable>
           {optionToSendReceipt?.value === _EMAIL && (
             <Controller
@@ -334,21 +337,21 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
       }}
     >
       <OSTable>
-        <OText>
+        <View style={{flexDirection: 'row', bottom: 10}}>
           <OText
-            size={orientationState?.dimensions?.width * 0.04}
+            size={orientationState?.dimensions?.width * 0.039}
             weight="700"
           >
             {t('ORDER_NUMBER', 'Order No.')} {' '}
           </OText>
           <OText
-            size={orientationState?.dimensions?.width * 0.04}
+            size={orientationState?.dimensions?.width * 0.039}
             weight="700"
             color={theme.colors.primary}
           >
             {order?.id}
           </OText>
-        </OText>
+        </View>
       </OSTable>
 
       {order?.products?.length && (
@@ -392,7 +395,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
         >
           {t('PROMO_CODE', 'Promo code')}
           {'\n'}
-          <OText weight="400">
+          <OText weight="400" style={{fontSize: 14}}>
             {order?.offer_type === 1 ? `${verifyDecimals(order?.offer_rate, parseNumber)}%` : parsePrice(order?.summary?.discount || order?.discount)} {t('OFF', 'off')}
           </OText>
         </OText>

package/themes/kiosk/src/components/OrderDetails/styles.tsx

@@ -26,3 +26,7 @@ export const OSInputWrapper = styled.View`
 	min-height: 150px;
   background-color: #FFF;
 `
+
+export const SentReceipt = styled.View`
+  flex-direction: row;
+`

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

@@ -5,6 +5,7 @@ import styled, { useTheme } from 'styled-components/native'
 const Wrapper = styled.ScrollView`
 	background-color: ${(props: any) => props.theme.colors.whiteGray};
 	flex-direction: row;
+  padding-left: 10px;
 `
 const SegItem = styled.View`
 	padding: 24px 12px;
@@ -32,8 +33,7 @@ interface Props {
 }
 
 const OSegment = (props: Props) => {
-    
-    var [curIndex, onSelected] = React.useState(props.selectedIdx)
+    const [curIndex, onSelected] = React.useState(props.selectedIdx)
     const onSelectItem = (idx: number) => {
         onSelected(idx)
         props.onSelectItem(idx)

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

@@ -16,7 +16,7 @@ import {
 	DivideView,
 	MediaWrapper,
 } from './styles';
-import { StyleSheet, View } from 'react-native';
+import { Platform, StyleSheet, View } from 'react-native';
 import { BusinessInformationParams } from '../../types';
 import { GoogleMap } from '../GoogleMap';
 import { WebView } from 'react-native-webview';
@@ -116,7 +116,7 @@ const BusinessInformationUI = (props: BusinessInformationParams) => {
 										lineHeight={21}
 										mBottom={16}
 										size={14}
-										weight={'600'}
+										weight={Platform.OS === 'android' ? 'bold' : '600'}
 										style={{ flexBasis: '20%' }}>
 										{daysOfWeek[i].toUpperCase()}
 									</OText>

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

@@ -25,6 +25,7 @@ import {
 import { FloatingButton } from '../FloatingButton'
 import { ProductForm } from '../ProductForm'
 import { UpsellingProducts } from '../UpsellingProducts'
+
 const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 	const {
 		navigation,
@@ -139,7 +140,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 										imgRightSrc={null}
 										style={styles.btnBackArrow}
 										onClick={() => navigation?.canGoBack() && navigation.goBack()}
-										imgLeftStyle={{ tintColor: theme.colors.textNormal }}
+										imgLeftStyle={{ tintColor: theme.colors.textNormal, width: 16 }}
 									/>
 									{/* <AddressInput
                       onPress={() => auth

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

@@ -31,6 +31,7 @@ const CartUI = (props: any) => {
 		removeProduct,
 		handleCartOpen,
 		setIsCartsLoading,
+		hideUpselling
 		// isFromCart
 	} = props
 
@@ -248,6 +249,7 @@ const CartUI = (props: any) => {
 					canOpenUpselling={canOpenUpselling}
 					setCanOpenUpselling={setCanOpenUpselling}
 					handleCloseUpsellingPage={() => { }}
+					isFromCart
 				/>
 			)}
 		</CContainer>

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

@@ -34,6 +34,7 @@ export const CartContent = (props: any) => {
 										onNavigationRedirect={props.onNavigationRedirect}
 										isCartsLoading={isCartsLoading}
 										setIsCartsLoading={setIsCartsLoading}
+										hideUpselling
 									/>
 									<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginHorizontal: -40, marginTop: 20 }} />
 								</>

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

@@ -36,7 +36,7 @@ const DriverTipsUI = (props: any) => {
 
 	const style = StyleSheet.create({
 		circle: {
-			borderRadius: 20
+			borderRadius: 30
 		},
 		inputStyle: {
 			flex: 1,
@@ -74,7 +74,7 @@ const DriverTipsUI = (props: any) => {
 									style={style.circle}
 									isActive={option === optionSelected}
 								>
-									<OText size={18} color={option === optionSelected ? '#FFF' : '#000'}>
+									<OText size={13} color={option === optionSelected ? '#FFF' : theme.colors.textSecondary}>
 										{`${isFixedPrice ? parsePrice(option) : `${option}%`}`}
 									</OText>
 								</DTCard>

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

@@ -13,7 +13,7 @@ export const DTWrapperTips = styled.View`
   display: flex;
   flex-direction: row;
   width: 100%;
-  justify-content: space-evenly;
+  justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
 `
@@ -22,11 +22,12 @@ export const DTCard = styled.View`
   display: flex;
   justify-content: center;
   align-items: center;
-  padding: 10px;
-  border: 1px solid ${(props: any) => props.theme.colors.primary};
+  border: 1px solid ${(props: any) => props.isActive ? props.theme.colors.primary : props.theme.colors.border};
   text-transform: capitalize;
-  min-height: 60px;
-  min-width: 60px;
+  min-height: 48px;
+  min-width: 48px;
+  max-width: 48px;
+  max-height: 48px;
   margin-right: 10px;
   margin-top: 10px;
 

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

@@ -4,7 +4,7 @@ import { useTheme } from 'styled-components/native';
 import { Platform, StyleSheet, View } from 'react-native'
 
 import RNPickerSelect from 'react-native-picker-select'
-import { Container } from './styles'
+import { Container, DummyContainer } from './styles'
 import { LanguageSelectorParams } from '../../types'
 import { OIcon } from '../shared'
 
@@ -63,7 +63,7 @@ const LanguageSelectorUI = (props: LanguageSelectorParams) => {
 
 	return (
 		<Container>
-			{languagesState?.languages && (
+			{languagesState?.languages ? (
 				<>
 					{iconColor && <OIcon src={theme.images.general.language} color={iconColor} style={{ marginEnd: 14 }} width={16} />}
 					<RNPickerSelect
@@ -77,7 +77,7 @@ const LanguageSelectorUI = (props: LanguageSelectorParams) => {
 						disabled={orderState.loading}
 					/>
 				</>
-			)}
+			) : <DummyContainer />}
 		</Container>
 	)
 }

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

@@ -5,3 +5,6 @@ export const Container = styled.View`
   justify-content: flex-start;
   flex-direction: row;
 `
+export const DummyContainer = styled.View`
+  height: 40px;
+`

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

@@ -337,7 +337,7 @@ const LoginFormUI = (props: LoginParams) => {
 								<OInput
 									isSecured={!passwordSee ? true : false}
 									placeholder={t('PASSWORD', 'Password')}
-									style={loginStyle.inputStyle}
+									style={{...loginStyle.inputStyle, marginBottom: 14}}
 									icon={theme.images.general.lock}
 									iconCustomRight={
 										!passwordSee ? (
@@ -373,6 +373,13 @@ const LoginFormUI = (props: LoginParams) => {
 							}}
 							defaultValue=""
 						/>
+						{onNavigationRedirect && forgotButtonText && (
+							<TouchableOpacity onPress={() => onNavigationRedirect('Forgot')}>
+								<OText size={14} mBottom={18}>
+									{forgotButtonText}
+								</OText>
+							</TouchableOpacity>
+						)}
 						<OButton
 							onClick={handleSubmit(onSubmit)}
 							text={loginButtonText}
@@ -386,13 +393,6 @@ const LoginFormUI = (props: LoginParams) => {
 					</FormInput>
 				)}
 
-				{onNavigationRedirect && forgotButtonText && (
-					<TouchableOpacity onPress={() => onNavigationRedirect('Forgot')}>
-						<OText size={16} mBottom={18}>
-							{forgotButtonText}
-						</OText>
-					</TouchableOpacity>
-				)}
 
 				{useLoginByCellphone &&
 					loginTab === 'cellphone' &&

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

@@ -36,9 +36,6 @@ const MessagesUI = (props: MessagesParams) => {
 
 	const [formattedMessages, setFormattedMessages] = useState<Array<any>>([])
 	const [isKeyboardShow, setIsKeyboardShow] = useState(false)
-	const previousStatus = [1, 2, 5, 6, 10, 11, 12, 16, 17]
-  const chatDisabled = previousStatus.includes(order?.status)
-
 	const { height } = useWindowDimensions();
 	const { top, bottom } = useSafeAreaInsets();
 
@@ -239,52 +236,36 @@ const MessagesUI = (props: MessagesParams) => {
 	)
 
 	const renderComposer = (props: typeof ComposerProps) => (
-		chatDisabled ? (
-      <View
-        style={{
-          width: '100%',
-          flexDirection: 'column',
-          alignItems: 'center'
-        }}
-      >
-        <MaterialCommunityIcon
-          name='close-octagon-outline'
-          size={24}
-        />
-        <OText size={14}>{t('NOT_SEND_MESSAGES', 'You can\'t send messages because the order has ended')}</OText>
-      </View>
-    ) : (
-			<View style={{
-				flexDirection: 'row', width: '80%', alignItems: 'center', backgroundColor: theme.colors.backgroundGray100,
-				borderRadius: 7.6,
-			}}>
-				<Composer
-					{...props}
-					textInputStyle={{
-						height: 32,
-						minHeight: 32,
-						alignItems: 'center',
-						justifyContent: 'center',
-						paddingHorizontal: 12,
-						borderColor: '#DBDCDB',
-						color: '#010300',
-					}}
-					textInputProps={{
-						value: message,
-						onSubmitEditing: onSubmit,
-						returnKeyType: message ? 'send' : 'done',
-						blurOnSubmit: true,
-						multiline: false,
-						numberOfLines: 1,
-						autoCorrect: false,
-						autoCompleteType: 'off',
-						enablesReturnKeyAutomatically: false
-					}}
-					placeholder={t('WRITE_MESSAGE', 'Write message...')}
-				/>
-				<RenderActions {...props} />
-			</View>
-		)
+		<View style={{
+			flexDirection: 'row', width: '80%', alignItems: 'center', backgroundColor: theme.colors.backgroundGray100,
+			borderRadius: 7.6,
+		}}>
+			<Composer
+				{...props}
+				textInputStyle={{
+					height: 32,
+					minHeight: 32,
+					alignItems: 'center',
+					justifyContent: 'center',
+					paddingHorizontal: 12,
+					borderColor: '#DBDCDB',
+					color: '#010300',
+				}}
+				textInputProps={{
+					value: message,
+					onSubmitEditing: onSubmit,
+					returnKeyType: message ? 'send' : 'done',
+					blurOnSubmit: true,
+					multiline: false,
+					numberOfLines: 1,
+					autoCorrect: false,
+					autoCompleteType: 'off',
+					enablesReturnKeyAutomatically: false
+				}}
+				placeholder={t('WRITE_MESSAGE', 'Write message...')}
+			/>
+			<RenderActions {...props} />
+		</View>
 	)
 
 	const renderSend = (props: any) => (

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

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react'
+import React, { useEffect, useState } from 'react'
 import {
 	OrderTypeControl,
 	useLanguage,
@@ -26,6 +26,7 @@ const OrderTypeSelectorUI = (props: OrderTypeSelectParams) => {
 	const [orderState] = useOrder();
 	const [, t] = useLanguage();
 	const _orderTypes = orderTypes.filter((type: any) => configTypes?.includes(type.value));
+	const [isChanging, setChanging] = useState(false);
 	
 	const items = _orderTypes.map((type) => {
 		return {
@@ -40,9 +41,14 @@ const OrderTypeSelectorUI = (props: OrderTypeSelectParams) => {
 	const handleChangeOrderTypeCallback = (orderType: number) => {
 		if (!orderState.loading) {
 			handleChangeOrderType(orderType)
+			setChanging(true);
 		}
 	}
 
+	useEffect(() => {
+		if (isChanging)	goToBack();
+	}, [orderState?.options])
+
 	return (
 		<Wrapper>
 			<NavBar

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

@@ -81,7 +81,7 @@ export const SearchBar = (props: any) => {
 				icon={theme.images.general.search}
 				iconStyle={{ width: 12 }}
 				returnKeyType='done'
-				inputStyle={inputStyle}
+				inputStyle={{padding: 0, paddingTop: Platform.OS == 'android' ? 2 : 0, ...inputStyle}}
 			/>
 			{isCancelButtonShow && (
 				<OButton

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

@@ -1,9 +1,9 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { View, Pressable, StyleSheet } from 'react-native';
+import { View, Pressable, StyleSheet, Linking, Platform } from 'react-native';
 import { useForm, Controller } from 'react-hook-form';
 import Spinner from 'react-native-loading-spinner-overlay';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
-
+import CheckBox from '@react-native-community/checkbox';
 import { PhoneInputNumber } from '../PhoneInputNumber';
 import { FacebookLogin } from '../FacebookLogin';
 
@@ -90,6 +90,10 @@ const SignupFormUI = (props: SignupParams) => {
 			flexGrow: 1,
 			marginBottom: 7,
 		},
+		checkBoxStyle: {
+      width: 25,
+      height: 25,
+    }
 	});
 
 	const showInputPhoneNumber =
@@ -272,6 +276,16 @@ const SignupFormUI = (props: SignupParams) => {
 		onChange(value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, ''));
 	};
 
+	const handleOpenTermsUrl = async (url: any) => {
+		const supported = await Linking.canOpenURL(url);
+
+		if (supported) {
+		  	await Linking.openURL(url);
+		} else {
+		  	showToast(ToastType.Error, t('VALIDATION_ERROR_ACTIVE_URL', 'The _attribute_ is not a valid URL.').replace('_attribute_', t('URL', 'URL')))
+		}
+	}
+
 	useEffect(() => {
 		if (!formState.loading && formState.result?.error) {
 			formState.result?.result &&
@@ -453,6 +467,46 @@ const SignupFormUI = (props: SignupParams) => {
 								</View>
 							)}
 
+							{configs?.terms_and_conditions?.value === 'true' && (
+								<View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 20 }}>
+									<Controller
+										control={control}
+										render={({ onChange, value }: any) => (
+											<CheckBox
+												value={value}
+												onValueChange={newValue => {
+													onChange(newValue)
+												}}
+												boxType={'square'}
+												tintColors={{
+													true: theme.colors.primary,
+													false: theme.colors.disabled
+												}}
+												tintColor={theme.colors.disabled}
+												onCheckColor={theme.colors.primary}
+												onTintColor={theme.colors.primary}
+												style={Platform.OS === 'ios' && style.checkBoxStyle}
+											/>
+										)}
+										name='termsAccept'
+										rules={{
+											required: t('VALIDATION_ERROR_ACCEPTED', 'The _attribute_ must be accepted.').replace('_attribute_', t('TERMS_AND_CONDITIONS', 'Terms & Conditions'))
+										}}
+										defaultValue={false}
+									/>
+									<OText style={{ fontSize: 14, paddingHorizontal: 5 }}>{t('TERMS_AND_CONDITIONS_TEXT', 'I’m agree with')}</OText>
+									<OButton
+										imgRightSrc={null}
+										text={t('TERMS_AND_CONDITIONS', 'Terms & Conditions')}
+										bgColor='#FFF'
+										borderColor='#FFF'
+										style={{ paddingLeft: 0, paddingRight: 0, height: 30, shadowColor: '#FFF' }}
+										textStyle={{ color: theme.colors.primary, marginLeft: 0, marginRight: 0 }}
+										onClick={() => handleOpenTermsUrl(configs?.terms_and_conditions_url?.value)}
+									/>
+								</View>
+							)}
+
 							{signupTab !== 'cellphone' && (
 								<Controller
 									control={control}
@@ -535,11 +589,25 @@ const SignupFormUI = (props: SignupParams) => {
 							textStyle={{ color: 'white' }}
 							imgRightSrc={null}
 							isDisabled={formState.loading || validationFields.loading}
-							style={{ borderRadius: 7.6, marginTop: 6 }}
+							style={{ borderRadius: 7.6, marginTop: 6,shadowOpacity: 0 }}
 						/>
 					)}
 				</FormInput>
 
+				{
+          onNavigationRedirect && loginButtonText && (
+            <View style={style.wrappText}>
+              <OText size={14} style={{ marginRight: 5 }}>
+                {t('MOBILE_FRONT_ALREADY_HAVE_AN_ACCOUNT', 'Already have an account?')}
+              </OText>
+              <Pressable onPress={() => onNavigationRedirect('Login')}>
+                <OText size={14} color={theme.colors.primary}>
+                  {loginButtonText}
+                </OText>
+              </Pressable>
+            </View>
+          )
+        }
 				<View
 					style={{
 						flexDirection: 'row',
@@ -579,20 +647,6 @@ const SignupFormUI = (props: SignupParams) => {
 					</SocialButtons>
 				</ButtonsWrapper>
 
-				{/* {
-          onNavigationRedirect && loginButtonText && (
-            <View style={style.wrappText}>
-              <OText size={18} style={{ marginRight: 5 }}>
-                {t('MOBILE_FRONT_ALREADY_HAVE_AN_ACCOUNT', 'Already have an account?')}
-              </OText>
-              <Pressable onPress={() => onNavigationRedirect('Login')}>
-                <OText size={18} color={theme.colors.primary}>
-                  {loginButtonText}
-                </OText>
-              </Pressable>
-            </View>
-          )
-        } */}
 
 				{/* {
           configs && Object.keys(configs).length > 0 && (

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

@@ -106,8 +106,7 @@ const StripeElementsFormUI = (props: any) => {
 				!!card?.last4 &&
 				!!card?.expiryMonth &&
 				!!card?.expiryYear &&
-				!!card?.brand &&
-				!!card?.postalCode
+				!!card?.brand
 			)
 		}
 	}, [card])
@@ -118,12 +117,13 @@ const StripeElementsFormUI = (props: any) => {
 				<View style={{ flex: 1 }}>
 					<StripeProvider publishableKey={publicKey}>
 						<CardField
-							postalCodeEnabled={true}
+							postalCodeEnabled={false}
 							cardStyle={{
 								backgroundColor: '#FFFFFF',
 								textColor: '#000000',
+								fontSize: 17,
 								styles: {
-
+									
 								}
 							}}
 							style={{
@@ -132,7 +132,7 @@ const StripeElementsFormUI = (props: any) => {
 								marginVertical: 50,
 								borderWidth: 1,
 								borderColor: theme.colors.border,
-								borderRadius: 7.6
+								borderRadius: 7.6,
 							}}
 							onCardChange={(cardDetails: any) => setCard(cardDetails)}
 						/>

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

@@ -1,7 +1,5 @@
 import React, { useState, useEffect } from 'react'
-import Spinner from 'react-native-loading-spinner-overlay';
-import MaterialComIcon from 'react-native-vector-icons/MaterialCommunityIcons'
-import { Platform, SafeAreaView, StyleSheet, TouchableOpacity, View } from 'react-native'
+import { Platform, StyleSheet, View } from 'react-native'
 import {
 	UpsellingPage as UpsellingPageController,
 	useUtils,
@@ -23,7 +21,6 @@ import {
 import { ProductForm } from '../ProductForm';
 import { OrderSummary } from '../OrderSummary';
 import { ScrollView } from 'react-native-gesture-handler';
-import NavBar from '../NavBar';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 const UpsellingProductsUI = (props: UpsellingProductsParams) => {
@@ -36,7 +33,8 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
 		handleCloseUpsellingPage,
 		openUpselling,
 		canOpenUpselling,
-		setCanOpenUpselling
+		setCanOpenUpselling,
+		isFromCart
 	} = props
 
 	const theme = useTheme();
@@ -76,7 +74,11 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
 	useEffect(() => {
 		if (!isCustomMode) {
 			if (!upsellingProducts.loading) {
-				setCanOpenUpselling && setCanOpenUpselling(true)
+				if (upsellingProducts?.products?.length && !isFromCart) {
+					setCanOpenUpselling && setCanOpenUpselling(true)
+				} else {
+					handleUpsellingPage && handleUpsellingPage()
+				}
 			}
 			// if ((!upsellingProducts?.products?.length && !upsellingProducts.loading && !canOpenUpselling && openUpselling) ||
 			// 	(!upsellingProducts?.products?.length && !upsellingProducts.loading && openUpselling)) {
@@ -85,6 +87,10 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
 		}
 	}, [upsellingProducts.loading, upsellingProducts?.products.length])
 
+	useEffect(() => {
+		if (!cart?.validate && cart?.products?.length == 0) handleCloseUpsellingPage()
+	}, [cart])
+
 	const handleFormProduct = (product: any) => {
 		setActualProduct(product)
 		setModalIsOpen(true)
@@ -149,6 +155,7 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
 									title={''}
 									open={openUpselling}
 									onClose={() => handleUpsellingPage()}
+									isStatusBar
 								>
 									<TopBar style={{ paddingTop: Platform.OS == 'ios' ? 10 : 30 }}>
 										<TopActions onPress={() => handleCloseUpsellingPage()}>

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Modal, TouchableWithoutFeedback, Dimensions, StyleSheet, View, Text } from 'react-native'
+import { Modal, TouchableWithoutFeedback, Dimensions, StyleSheet, View, Text, Platform, StatusBar } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 const deviceHeight = Dimensions.get('window').height
 
@@ -8,13 +8,15 @@ interface Props {
 	title?: string;
 	children?: any;
 	onClose?: any;
+	isStatusBar?: boolean;
 }
 const OBottomPopup = (props: Props) => {
 	const {
 		open,
 		title,
 		onClose,
-		children
+		children,
+		isStatusBar
 	} = props
 	const { top, bottom } = useSafeAreaInsets();
 	return (
@@ -25,6 +27,7 @@ const OBottomPopup = (props: Props) => {
 			onRequestClose={() => onClose()}
 			presentationStyle={'fullScreen'}
 		>
+		  {isStatusBar && <StatusBar translucent={false} />}
 			<View style={styles.container}>
 				<TouchableWithoutFeedback
 					style={styles.touchableOutsideStyle}

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

@@ -127,7 +127,7 @@ const styles = StyleSheet.create({
 		backgroundColor: 'transparent',
 		width: 35,
 		height: 35,
-		marginStart: -4,
+		marginStart: -9,
 		marginTop: 12,
 		alignItems: 'center',
 		justifyContent: 'center',

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

@@ -387,6 +387,7 @@ export interface UpsellingProductsParams {
 	setCanOpenUpselling?: (value: any) => void;
 	cart?: any;
 	handleCloseUpsellingPage: () => void;
+	isFromCart?: boolean;
 }
 
 export interface GoogleMapsParams {