ordering-ui-react-native 0.16.69 → 0.16.72

package/package.json

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

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

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { StyleSheet, View, TouchableOpacity, Linking, Pressable } from 'react-native';
-import { useUtils, useOrder, useLanguage, useOrderingTheme } from 'ordering-components/native';
+import { useUtils, useOrder, useLanguage } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import { OIcon, OText, OModal } from '../shared';
 import { BusinessBasicInformationParams } from '../../types';
@@ -38,7 +38,6 @@ export const BusinessBasicInformation = (
 	const { business, loading } = businessState;
 
 	const theme = useTheme();
-	const [orderingTheme] = useOrderingTheme()
 	const [orderState] = useOrder();
 	const [, t] = useLanguage();
 	const [{ parsePrice, parseDistance, optimizeImage }] = useUtils();
@@ -46,9 +45,9 @@ export const BusinessBasicInformation = (
 	const [openBusinessReviews, setOpenBusinessReviews] = useState(false);
 	const [businessInformationObtained, setBusinessInformationObtained] = useState(false)
 	const [businessReviewsObtained, setBusinessReviewsObtainedbtained] = useState(false)
-	const isChewLayout = orderingTheme?.theme?.business_view?.components?.header?.components?.layout?.type === 'chew'
-	const showLogo = !orderingTheme?.theme?.business_view?.components?.header?.components?.business?.components?.logo?.hidden
-	
+	const isChewLayout = theme?.business_view?.components?.header?.components?.layout?.type === 'original'
+	const showLogo = !theme?.business_view?.components?.header?.components?.business?.components?.logo?.hidden
+
 	const styles = StyleSheet.create({
 		businesInfoheaderStyle: {
 			height: 150,
@@ -247,7 +246,7 @@ export const BusinessBasicInformation = (
 						)}
 						{isChewLayout && (
 							<TouchableOpacity onPress={() => handleClickBusinessInformation()}>
-								<OText style={{textDecorationColor: theme.colors.black, textDecorationLine: 'underline'}}>
+								<OText style={{ textDecorationColor: theme.colors.black, textDecorationLine: 'underline' }}>
 									{t('SEE_MORE_DESCRIPTION', 'See more')}
 								</OText>
 							</TouchableOpacity>
@@ -298,22 +297,14 @@ export const BusinessBasicInformation = (
 			<BusinessInfo style={styles.businessInfo}>
 				{showLogo && (
 					<BusinessLogo isChewLayout={isChewLayout}>
-						{loading ? (
-							<View>
-								<Placeholder Animation={Fade}>
-									<PlaceholderLine height={50} width={20} />
-								</Placeholder>
-							</View>
-						) : (
-							!isBusinessInfoShow && (
-								<OIcon
-									url={
-										logo ||
-										optimizeImage(businessState?.business?.logo, 'h_70,c_limit')
-									}
-									style={styles.businessLogo}
-								/>
-							)
+						{!isBusinessInfoShow && (
+							<OIcon
+								url={
+									logo ||
+									optimizeImage(businessState?.business?.logo, 'h_70,c_limit')
+								}
+								style={styles.businessLogo}
+							/>
 						)}
 					</BusinessLogo>
 				)}

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

@@ -327,16 +327,17 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
         </OText>
       </WrapHeader>
       <SearchWrapper>
-        <SearchBar
-          autoFocus
-          lazyLoad
-          inputStyle={{ ...styles.searchInput, ...Platform.OS === 'ios' ? {} : { paddingBottom: 4 } }}
-          placeholder={`${t('SEARCH_BUSINESSES', 'Search Businesses')} / ${t('TYPE_AT_LEAST_3_CHARACTERS', 'type at least 3 characters')}`}
-          onSearch={(val: string) => handleChangeTermValue(val)}
-          value={termValue}
-          iconCustomRight={<AntDesignIcon name='filter' size={16} style={{ bottom: 2 }} onPress={() => handleOpenfilters()} />}
-        />
-
+        {isFocused && (
+          <SearchBar
+            autoFocus
+            lazyLoad
+            inputStyle={{ ...styles.searchInput, ...Platform.OS === 'ios' ? {} : { paddingBottom: 4 } }}
+            placeholder={`${t('SEARCH_BUSINESSES', 'Search Businesses')} / ${t('TYPE_AT_LEAST_3_CHARACTERS', 'type at least 3 characters')}`}
+            onSearch={(val: string) => handleChangeTermValue(val)}
+            value={termValue}
+            iconCustomRight={<AntDesignIcon name='filter' size={16} style={{ bottom: 2 }} onPress={() => handleOpenfilters()} />}
+          />
+        )}
       </SearchWrapper>
       {
         noResults && (

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

@@ -10,9 +10,9 @@ import {
 	useUtils,
 	ToastType,
 	useToast,
-	useConfig,
-	useOrderingTheme
+	useConfig
 } from 'ordering-components/native'
+import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 import { OButton, OIcon, OModal, OText } from '../shared'
 import Alert from '../../providers/AlertProvider'
 import { BusinessBasicInformation } from '../BusinessBasicInformation'
@@ -66,7 +66,6 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 	} = props
 
 	const theme = useTheme();
-	const [orderingTheme] = useOrderingTheme()
 	const [, t] = useLanguage()
 	const [{ auth }] = useSession()
 	const [orderState, { clearCart }] = useOrder()
@@ -75,9 +74,9 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 	const [{ configs }] = useConfig()
 	const isPreOrder = configs?.preorder_status_enabled?.value === '1'
 
-	const isChewLayout = orderingTheme?.theme?.business_view?.components?.header?.components?.layout?.type === 'chew'
-	const showLogo = !orderingTheme?.theme?.business_view?.components?.header?.components?.business?.components?.logo?.hidden
-	const hideBusinessNearCity = orderingTheme?.theme?.business_view?.components?.near_business?.hidden
+	const isChewLayout = theme?.business_view?.components?.header?.components?.layout?.type === 'chew'
+	const showLogo = !theme?.business_view?.components?.header?.components?.business?.components?.logo?.hidden
+	const hideBusinessNearCity = theme?.business_view?.components?.near_business?.hidden ?? true
 
 	const styles = StyleSheet.create({
 		mainContainer: {
@@ -103,7 +102,13 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 			padding: 15,
 			justifyContent: 'center',
 			shadowColor: theme.colors.clear,
-		}
+		},
+		businessSkeleton: {
+			borderRadius: 8,
+			marginRight: 20,
+			width: 56,
+			height: 56
+		},
 	})
 
 	const { business, loading, error } = businessState
@@ -277,6 +282,19 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 							</WrapSearchBar>
 						)}
 					</TopHeader>
+					{!hideBusinessNearCity && loading && (
+						<NearBusiness style={{ paddingBottom: 10 }}>
+							<Placeholder Animation={Fade}>
+								<View style={{ flexDirection: 'row' }}>
+									{[...Array(10).keys()].map(i => (
+										<View style={styles.businessSkeleton} key={i}>
+											<PlaceholderLine style={{ width: '100%', height: '100%' }} />
+										</View>
+									))}
+								</View>
+							</Placeholder>
+						</NearBusiness>
+					)}
 					{!hideBusinessNearCity && businessState?.business?.city_id && (
 						<NearBusiness>
 							<BusinessesListing

package/themes/original/src/components/BusinessesListing/Layout/Original/index.tsx

@@ -18,8 +18,7 @@ import {
 	useSession,
 	useOrder,
 	useConfig,
-	useUtils,
-	useOrderingTheme
+	useUtils
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import Ionicons from 'react-native-vector-icons/Ionicons'
@@ -75,13 +74,12 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 		logosLayout
 	} = props;
 	const theme = useTheme();
-	const [orderingTheme] = useOrderingTheme()
 	const isFocused = useIsFocused();
 	const appState = useRef(AppState.currentState)
 	const searchBarRef = useRef<any>()
 	const [appStateVisible, setAppStateVisible] = useState(appState.current);
-	const isChewLayout = orderingTheme?.theme?.header?.components?.layout?.type === 'chew'
-	const hideCities = orderingTheme?.theme?.business_listing_view?.components?.cities?.hidden
+	const isChewLayout = theme?.header?.components?.layout?.type === 'original'
+	const hideCities = theme?.business_listing_view?.components?.cities?.hidden ?? true
 	const [refreshing] = useState(false);
 	const styles = StyleSheet.create({
 		container: {
@@ -132,7 +130,10 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 			borderColor: theme.colors.backgroundGray,
 			borderRadius: 8,
 			marginHorizontal: 40,
-			height: 45
+			minHeight: 45,
+			paddingVertical: 5,
+			paddingHorizontal: 20,
+			borderWidth: 1
 		},
 		businessSkeleton: {
 			borderRadius: 8,
@@ -426,7 +427,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 					</OrderControlContainer>
 				) : (
 					<>
-						{!isPreOrderSetting && (// cambiar
+						{isPreOrderSetting && (
 							<View style={{ paddingHorizontal: 30 }}>
 								<PreorderInput
 									isChewLayout={isChewLayout}
@@ -474,25 +475,28 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 					onCancel={() => handleChangeSearch('')}
 					placeholder={t('SEARCH', 'Search')}
 					height={50}
-					isDisabled={!businessTypes}
+					isDisabled={true}
 					inputContainerStyles={styles.inputContainerStyles}
 					containerStyles={{
 						marginHorizontal: 40,
 						marginTop: 20
 					}}
 					inputStyle={{ ...styles.searchInput, ...Platform.OS === 'ios' ? { paddingBottom: 6 } : { paddingBottom: 4 } }}
-					onSubmitEditing={() => { configs?.advanced_business_search_enabled?.value === '1' && navigation.navigate('BusinessSearch', { businessTypes, defaultTerm: searchValue }) }}
+					onPress={() => { navigation.navigate('BusinessSearch', { businessTypes }) }}
+					onSubmitEditing={() => { navigation.navigate('BusinessSearch', { businessTypes, defaultTerm: searchValue }) }}
 				/>
 			)}
 
 			{!hideCities && (
 				<View style={{ marginTop: 10 }}>
-					<OButton
-						onClick={() => setIsOpenCities(true)}
-						text={citiesState?.cities?.find((city: any) => city?.id === orderState?.options?.city_id)?.name || t('FILTER_BY_CITY', 'Filter by city')}
-						style={styles?.buttonCityStyle}
-						textStyle={{ color: theme.colors.backgroundGray, fontWeight: 'bold', fontSize: 18 }}
-					/>
+					<TouchableOpacity
+						style={styles.buttonCityStyle}
+						onPress={() => setIsOpenCities(true)}
+					>
+						<OText size={18} color={theme.colors.backgroundGray} weight='bold' style={{ textAlign: 'center' }}>
+							{citiesState?.cities?.find((city: any) => city?.id === orderState?.options?.city_id)?.name || t('FILTER_BY_CITY', 'Filter by city')}
+						</OText>
+					</TouchableOpacity>
 				</View>
 			)}
 			<OrderProgressWrapper>

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

@@ -1,6 +1,6 @@
 
 import React, { useState, useEffect } from 'react'
-import { useOrder, useSession, useLanguage, useOrderingTheme } from 'ordering-components/native';
+import { useOrder, useSession, useLanguage } from 'ordering-components/native';
 
 import { useTheme } from 'styled-components/native'
 import { BusinessesListing as OriginalBusinessListing } from './Layout/Original'
@@ -12,8 +12,7 @@ import { NotificationSetting } from '../../../../../src/components/NotificationS
 export const BusinessesListing = (props: any) => {
   const { logosLayout } = props
   const theme = useTheme()
-  const [orderingTheme] = useOrderingTheme()
-  const layout = orderingTheme?.theme?.business_listing_view?.components?.layout?.type || 'original'
+  const layout = theme?.business_listing_view?.components?.layout?.type || 'original'
   const [, t] = useLanguage();
   const [{ auth }] = useSession()
   const [, { getLastOrderHasNoReview }] = useOrder();

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

@@ -24,6 +24,7 @@ import { DriverTips } from '../DriverTips';
 import { NotFoundSource } from '../NotFoundSource';
 import { UserDetails } from '../UserDetails';
 import { PaymentOptionWallet } from '../PaymentOptionWallet';
+import { PlaceSpot } from '../PlaceSpot'
 
 import {
 	ChContainer,
@@ -143,7 +144,8 @@ const CheckoutUI = (props: any) => {
 	const [isOpen, setIsOpen] = useState(false)
 	const [requiredFields, setRequiredFields] = useState<any>([])
 
-	const placeSpotTypes = [4]
+	const placeSpotTypes = [3, 4, 5]
+	const placeSpotsEnabled = placeSpotTypes.includes(options?.type)
 	const businessConfigs = businessDetails?.business?.configs ?? []
 	const isWalletCashEnabled = businessConfigs.find((config: any) => config.key === 'wallet_cash_enabled')?.value === '1'
 	const isWalletCreditPointsEnabled = businessConfigs.find((config: any) => config.key === 'wallet_credit_point_enabled')?.value === '1'
@@ -151,8 +153,9 @@ const CheckoutUI = (props: any) => {
 	const isBusinessChangeEnabled = configs?.cart_change_business_validation?.value === '1'
 
 	const isPreOrder = configs?.preorder_status_enabled?.value === '1'
-	const isDisabledButtonPlace = loading || !cart?.valid || (!paymethodSelected && cart?.balance > 0) || placing || errorCash ||
-		cart?.subtotal < cart?.minimum || (placeSpotTypes.includes(options?.type) && !cart?.place) ||
+	const isDisabledButtonPlace = loading || !cart?.valid || (!paymethodSelected && cart?.balance > 0) ||
+		placing || errorCash || cart?.subtotal < cart?.minimum ||
+		// (placeSpotTypes.includes(options?.type) && !cart?.place) ||
 		(options.type === 1 &&
 			validationFields?.fields?.checkout?.driver_tip?.enabled &&
 			validationFields?.fields?.checkout?.driver_tip?.required &&
@@ -595,6 +598,20 @@ const CheckoutUI = (props: any) => {
 					)}
 
 
+					{!cartState.loading && placeSpotsEnabled && (
+						<>
+							<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginTop: 30, marginHorizontal: -40 }} />
+							<PlaceSpot
+								isCheckout
+								isInputMode
+								cart={cart}
+								spotNumberDefault={cartState?.cart?.spot_number ?? cart?.spot_number}
+								vehicleDefault={cart?.vehicle}
+							/>
+							<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginHorizontal: -40 }} />
+						</>
+					)}
+
 					{!cartState.loading && cart && (
 						<ChSection>
 							<ChCart>
@@ -683,14 +700,6 @@ const CheckoutUI = (props: any) => {
 										{t('WARNING_INVALID_PRODUCTS_CHECKOUT', 'To continue with your checkout, please remove from your cart the products that are not available.')}
 									</OText>
 								)}
-								{placeSpotTypes.includes(options?.type) && !cart?.place && (
-									<OText
-										color={theme.colors.error}
-										size={12}
-									>
-										{t('WARNING_PLACE_SPOT', 'Please, select your spot to place order.')}
-									</OText>
-								)}
 								{options.type === 1 &&
 									validationFields?.fields?.checkout?.driver_tip?.enabled &&
 									validationFields?.fields?.checkout?.driver_tip?.required &&

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

@@ -30,7 +30,8 @@ import {
   OrderDriver,
   Map,
   Divider,
-  OrderAction
+  OrderAction,
+  PlaceSpotWrapper
 } from './styles';
 import { OButton, OIcon, OModal, OText } from '../shared';
 import { ProductItemAccordion } from '../ProductItemAccordion';
@@ -44,6 +45,7 @@ import { TaxInformation } from '../TaxInformation';
 import { Placeholder, PlaceholderLine } from 'rn-placeholder';
 import NavBar from '../NavBar'
 import { OrderHistory } from './OrderHistory';
+import { PlaceSpot } from '../PlaceSpot'
 export const OrderDetailsUI = (props: OrderDetailsParams) => {
   const {
     navigation,
@@ -105,6 +107,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
   const [refreshing] = useState(false);
   const { order, businessData } = props.order;
   const mapValidStatuses = [9, 19, 23]
+  const placeSpotTypes = [3, 4, 5]
 
   const walletName: any = {
     cash: {
@@ -680,6 +683,18 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                 </OText>
               </View>
             </OrderBusiness>
+            
+            {placeSpotTypes.includes(order?.delivery_type) && (
+              <PlaceSpotWrapper>
+                <PlaceSpot
+                  isInputMode
+                  cart={order}
+                  spotNumberDefault={order?.spot_number}
+                  vehicleDefault={order?.vehicle}
+                />
+              </PlaceSpotWrapper>
+            )}
+
             <View
               style={{
                 height: 8,

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

@@ -127,4 +127,8 @@ export const Divider = styled.View`
 `
 export const OrderAction = styled.View`
   flex-direction: row;
-`
+`
+
+export const PlaceSpotWrapper = styled.View`
+  padding-horizontal: 40px;
+`

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

@@ -26,7 +26,6 @@ import AntIcon from 'react-native-vector-icons/AntDesign'
 import { TaxInformation } from '../TaxInformation';
 import { TouchableOpacity } from 'react-native';
 import { OAlert } from '../../../../../src/components/shared'
-import { PlaceSpot } from '../PlaceSpot'
 
 const OrderSummaryUI = (props: any) => {
   const {
@@ -39,8 +38,7 @@ const OrderSummaryUI = (props: any) => {
     commentState,
     handleChangeComment,
     onNavigationRedirect,
-    handleRemoveOfferClick,
-    placeSpotTypes
+    handleRemoveOfferClick
   } = props;
 
   const theme = useTheme()
@@ -51,7 +49,6 @@ const OrderSummaryUI = (props: any) => {
   const [validationFields] = useValidationFields();
   const [openTaxModal, setOpenTaxModal] = useState<any>({ open: false, data: null, type: '' })
   const [confirm, setConfirm] = useState<any>({ open: false, content: null, handleOnAccept: null, id: null, title: null })
-  const [openPlaceModal, setOpenPlaceModal] = useState(false)
   const isCouponEnabled = validationFields?.fields?.checkout?.coupon?.enabled;
 
   const handleDeleteClick = (product: any) => {
@@ -304,24 +301,6 @@ const OrderSummaryUI = (props: any) => {
                   </OSTable>
                 </View>
               )}
-              {placeSpotTypes && placeSpotTypes.includes(orderState?.options?.type) && (
-                <OSTable style={{ marginTop: 15 }}>
-                  <OText size={14} lineHeight={21} weight={'600'}>
-                    {t('SPOT', 'Spot')}: {cart?.place?.name || t('NO_SELECTED', 'No selected')}
-                  </OText>
-                  <TouchableOpacity onPress={() => setOpenPlaceModal(true)}>
-                    <OText
-                      size={14}
-                      lineHeight={21}
-                      weight={'600'}
-                      color={theme.colors.primary}
-                      style={{ textDecorationLine: 'underline' }}
-                    >
-                      {t('EDIT', 'Edit')}
-                    </OText>
-                  </TouchableOpacity>
-                </OSTable>
-              )}
               {cart?.status !== 2 && (
                 <OSTable>
                   <View style={{ width: '100%', marginTop: 20 }}>
@@ -370,18 +349,6 @@ const OrderSummaryUI = (props: any) => {
               products={cart?.products}
             />
           </OModal>
-          <OModal
-            open={openPlaceModal}
-            title={t('CHOOSE_YOUR_SPOT', 'Choose your spot')}
-            onClose={() => setOpenPlaceModal(false)}
-            entireModal
-          >
-            <PlaceSpot
-              cart={cart}
-              isOpenPlaceSpot={openPlaceModal}
-              setOpenPlaceModal={setOpenPlaceModal}
-            />
-          </OModal>
           <OAlert
             open={confirm.open}
             title={confirm.title}

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

@@ -1,24 +1,78 @@
 import React, { useEffect, useState } from 'react'
-import { View } from 'react-native'
-import { PlaceSpot as PlaceSpotController, useLanguage } from 'ordering-components/native'
+import { View, StyleSheet } from 'react-native'
+import { PlaceSpot as PlaceSpotController, useLanguage, useOrder, useToast, ToastType } from 'ordering-components/native'
 import { PlaceGroupContainer, PlaceSpotContainer } from './styles'
 import { NotFoundSource } from '../NotFoundSource'
-import { OText, ODropDown } from '../shared'
+import { OText, ODropDown, OInput, OButton } from '../shared'
 import { Placeholder, PlaceholderLine } from 'rn-placeholder'
 import { PlaceSpotParams } from '../../types'
+import { useTheme } from 'styled-components/native'
+import SelectDropdown from 'react-native-select-dropdown'
+import IconAntDesign from 'react-native-vector-icons/AntDesign'
 
 const PlaceSpotUI = (props: PlaceSpotParams) => {
   const {
-    isOpenPlaceSpot,
     cart,
+    orderTypes,
     placesState,
     handleChangePlace,
-    getPlacesList,
-    setOpenPlaceModal
+    spotNumber,
+    spotState,
+    isCheckout,
+    vehicle,
+    isInputMode,
+    setSpotNumber,
+    setVehicle,
+    handleChangeSpot
   } = props
 
+  const theme = useTheme()
   const [, t] = useLanguage()
+  const [orderState] = useOrder()
+	const [, { showToast }] = useToast();
+
   const [placeGroupSelected, setPlaceGroupSelected] = useState<any>(null)
+  const vehicleInputAllowed = [4, 5]
+
+  const currentOrderType = isCheckout ? orderState?.options?.type : cart?.delivery_type
+  const isEatin = currentOrderType === 3
+  const isDriveThru = currentOrderType === 5
+  const placeholderText = isEatin
+    ? t('EATIN_SPOT_NUMBER', 'Table number')
+    : isDriveThru
+      ? t('DRIVE_THRU_SPOT_NUMBER', 'Drive thru lane')
+      : t('CURBSIDE_SPOT_NUMBER', 'Spot number')
+
+  const styles = StyleSheet.create({
+    selectOption: {
+      backgroundColor: theme.colors.backgroundGray100,
+      borderRadius: 7.6,
+      paddingVertical: 10,
+      paddingHorizontal: 14,
+      flexDirection: 'row-reverse',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      height: 50,
+      width: '100%'
+    },
+    optionWrapper: {
+      marginBottom: 20
+    }
+  })
+
+  const vehicleTypeList: any = [
+    { key: 'car', text: t('VEHICLE_TYPE_CAR', 'Car') },
+    { key: 'truck', text: t('VEHICLE_TYPE_TRUCK', 'Truck') },
+    { key: 'suv', text: t('VEHICLE_TYPE_SUV', 'SUV') },
+    { key: 'van', text: t('VEHICLE_TYPE_VAN', 'Van') },
+    { key: 'motorcycle', text: t('VEHICLE_TYPE_MOTORCYCLE', 'Motorcycle') }
+  ]
+
+  const vehicleInputList = [
+    { key: 'model', text: t('VEHICLE_MODEL', 'Model') },
+    { key: 'car_registration', text: t('VEHICLE_CAR_REGISTRATION', 'Car registration') },
+    { key: 'color', text: t('VEHICLE_COLOR', 'Color') }
+  ]
 
   const getPlacesGroups = () => {
     const groups = placesState.placeGroups?.filter((group: any) => group?.enabled && placesState?.places?.find((place: any) => place?.enabled && place?.place_group_id === group?.id))
@@ -39,10 +93,29 @@ const PlaceSpotUI = (props: PlaceSpotParams) => {
   }
 
   const handlerChangePlace = (place: any) => {
-    setOpenPlaceModal(false)
     handleChangePlace(place)
   }
 
+  const onChangeSpot = () => {
+    if (orderState.loading) return
+    const isVehicle = Object.values(vehicle).every(e => e)
+    const bodyToSend: any = {}
+    spotNumber && (bodyToSend.spot_number = spotNumber)
+    isVehicle && (bodyToSend.vehicle = vehicle)
+
+    if (Object.keys(bodyToSend).length) {
+      handleChangeSpot({ bodyToSend, isCheckout: !!isCheckout })
+    }
+  }
+
+  const manageErrorsToShow = (array = []) => {
+    let stringError = ''
+    const list = Array.isArray(array) ? array : Object.values(array)
+    list.map((item: any, i: number) => {
+      stringError += (i + 1) === array.length ? `- ${item?.message || item}` : `- ${item?.message || item}\n`
+    })
+    return stringError;
+  }
 
   useEffect(() => {
     if (!placesState?.loading) {
@@ -52,51 +125,157 @@ const PlaceSpotUI = (props: PlaceSpotParams) => {
   }, [placesState])
 
   useEffect(() => {
-    getPlacesList()
-  }, [isOpenPlaceSpot])
+    if (spotState?.error?.length > 0) {
+      const errorText = manageErrorsToShow(spotState?.errors)
+			showToast(ToastType.Error, errorText)
+    }
+  }, [spotState?.error])
 
   return (
     <PlaceSpotContainer>
-      {(placesState.error || placesState?.placeGroups?.length === 0) && !placesState?.loading && (
-        <NotFoundSource
-          content={t('NO_PLACES_THIS_BUSINESS', 'There are not places for this business')}
-        />
-      )}
-      {placesState?.loading && (
-        <Placeholder>
-          <PlaceGroupContainer>
-            <PlaceholderLine width={100} height={25} />
-            <PlaceholderLine height={30} />
-          </PlaceGroupContainer>
-          <View>
-            <PlaceholderLine width={120} height={25} />
-            <PlaceholderLine height={30} />
+      {isInputMode ? (
+        <PlaceGroupContainer>
+          <OText color={theme.colors.textNormal} size={16} weight='500' mBottom={15}>{orderTypes[currentOrderType]}</OText>
+          {vehicleInputAllowed.includes(currentOrderType) && (
+            <>
+              <View style={styles.optionWrapper}>
+                <OText color={theme.colors.textNormal} size={12} mBottom={5}>{t('VEHICLE_TYPE', 'Vehicle type')}</OText>
+                <SelectDropdown
+                  defaultButtonText={t('SELECT_AN_OPTION', 'Select an option')}
+                  data={vehicleTypeList}
+                  defaultValue={vehicle?.type ? vehicleTypeList.find((obj: any) => obj.key === vehicle.type) : null}
+                  onSelect={(selectedItem, index) => {
+                    setVehicle({ ...vehicle, type: selectedItem.key ?? '' })
+                  }}
+                  buttonTextAfterSelection={(selectedItem, index) => {
+                    return selectedItem.text
+                  }}
+                  rowTextForSelection={(item, index) => {
+                    return item.text
+                  }}
+                  buttonStyle={styles.selectOption}
+                  buttonTextStyle={{
+                    color: theme.colors.disabled,
+                    fontSize: 14,
+                    textAlign: 'left',
+                    marginHorizontal: 0
+                  }}
+                  dropdownStyle={{
+                    borderRadius: 8,
+                    borderColor: theme.colors.lightGray
+                  }}
+                  rowStyle={{
+                    borderBottomColor: theme.colors.backgroundGray100,
+                    backgroundColor: theme.colors.backgroundGray100,
+                    height: 40,
+                    flexDirection: 'column',
+                    alignItems: 'flex-start',
+                    paddingTop: 8,
+                    paddingHorizontal: 14
+                  }}
+                  rowTextStyle={{
+                    color: theme.colors.disabled,
+                    fontSize: 14,
+                    marginHorizontal: 0
+                  }}
+                  renderDropdownIcon={() => {
+                    return (
+                      <IconAntDesign
+                        name='down'
+                        color={theme.colors.textThird}
+                        size={16}
+                      />
+                    )
+                  }}
+                />
+              </View>
+              {vehicleInputList.map((input: any) => (
+                <View key={input.key}>
+                  <OText color={theme.colors.textNormal} size={12} mBottom={5}>{input.text}</OText>
+                  <OInput
+                    placeholder={input.text}
+                    value={vehicle[input.key] ?? ''}
+                    onChange={(value: string) => setVehicle({ ...vehicle, [input.key]: value })}
+                    style={{
+                      borderColor: theme.colors.border,
+                      borderRadius: 7.6,
+                      marginBottom: 20
+                    }}
+                    inputStyle={{ fontSize: 12, color: theme.colors.textNormal }}
+                  />
+                </View>
+              ))}
+            </>
+          )}
+          <OText color={theme.colors.textNormal} size={12} mBottom={5}>{placeholderText}</OText>
+          <OInput
+            value={spotNumber?.toString() ?? ''}
+            placeholder={placeholderText}
+            keyboardType='number-pad'
+            onChange={(value: string) => setSpotNumber(value)}
+            style={{
+              borderColor: theme.colors.border,
+              borderRadius: 7.6
+            }}
+						inputStyle={{ fontSize: 12, color: theme.colors.textNormal }}
+          />
+          <View style={{ alignItems: 'flex-start' }}>
+            <OButton
+              onClick={() => onChangeSpot()}
+              bgColor={theme.colors.primary}
+              borderColor={theme.colors.primary}
+              textStyle={{ color: 'white', fontSize: 12 }}
+              imgRightSrc={null}
+              text={t('UPDATE_SPOT_NUMBER', 'Update')}
+              isDisabled={(!spotNumber && !Object.values(vehicle).every(e => e))}
+              style={{ borderRadius: 7.6, height: 44, shadowOpacity: 0, marginTop: 20 }}
+            />
           </View>
-        </Placeholder>
-      )}
-      {!(placesState.error || placesState?.placeGroups?.length === 0) && !placesState?.loading && (
+        </PlaceGroupContainer>
+      ) : (
         <>
-          <PlaceGroupContainer>
-            <OText size={16} mBottom={10}>{t('PLACE_GROUP', 'Place group')}</OText>
-            <ODropDown
-              placeholder={t('PLACE_GROUP', 'Place group')}
-              options={getPlacesGroups()}
-              onSelect={(group: any) => setPlaceGroupSelected(group)}
-              defaultValue={placeGroupSelected ?? cart?.place}
-              isModal
+          {(placesState.error || placesState?.placeGroups?.length === 0) && !placesState?.loading && (
+            <NotFoundSource
+              content={t('NO_PLACES_THIS_BUSINESS', 'There are not places for this business')}
             />
-          </PlaceGroupContainer>
-          {placeGroupSelected && (
-            <View>
-              <OText size={16} mBottom={10}>{t('SELECT_YOUR_SPOT', 'Select your spot')}</OText>
-              <ODropDown
-                onSelect={(place: any) => handlerChangePlace(place)}
-                placeholder={t('SELECT_YOUR_SPOT', 'Select your spot')}
-                options={getPlaces()}
-                defaultValue={placesState?.places?.find((place : any) => place?.id === cart?.place_id)}
-                isModal
-              />
-            </View>
+          )}
+          {placesState?.loading && (
+            <Placeholder>
+              <PlaceGroupContainer>
+                <PlaceholderLine width={100} height={25} />
+                <PlaceholderLine height={30} />
+              </PlaceGroupContainer>
+              <View>
+                <PlaceholderLine width={120} height={25} />
+                <PlaceholderLine height={30} />
+              </View>
+            </Placeholder>
+          )}
+          {!(placesState.error || placesState?.placeGroups?.length === 0) && !placesState?.loading && (
+            <>
+              <PlaceGroupContainer>
+                <OText size={16} mBottom={10}>{t('PLACE_GROUP', 'Place group')}</OText>
+                <ODropDown
+                  placeholder={t('PLACE_GROUP', 'Place group')}
+                  options={getPlacesGroups()}
+                  onSelect={(group: any) => setPlaceGroupSelected(group)}
+                  defaultValue={placeGroupSelected ?? cart?.place}
+                  isModal
+                />
+              </PlaceGroupContainer>
+              {placeGroupSelected && (
+                <View>
+                  <OText size={16} mBottom={10}>{t('SELECT_YOUR_SPOT', 'Select your spot')}</OText>
+                  <ODropDown
+                    onSelect={(place: any) => handlerChangePlace(place)}
+                    placeholder={t('SELECT_YOUR_SPOT', 'Select your spot')}
+                    options={getPlaces()}
+                    defaultValue={placesState?.places?.find((place : any) => place?.id === cart?.place_id)}
+                    isModal
+                  />
+                </View>
+              )}
+            </>
           )}
         </>
       )}
@@ -105,9 +284,18 @@ const PlaceSpotUI = (props: PlaceSpotParams) => {
 }
 
 export const PlaceSpot = (props: PlaceSpotParams) => {
+  const [, t] = useLanguage()
+
   const placeSpotProps = {
     ...props,
-    UIComponent: PlaceSpotUI
+    UIComponent: PlaceSpotUI,
+    orderTypes: {
+      1: t('DELIVERY', 'Delivery'),
+      2: t('PICKUP', 'Pickup'),
+      3: t('EAT_IN', 'Eat in'),
+      4: t('CURBSIDE', 'Curbside'),
+      5: t('DRIVE_THRU', 'Drive thru')
+    }
   }
 
   return <PlaceSpotController {...placeSpotProps} />

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

@@ -1,8 +1,6 @@
 import styled from 'styled-components/native'
 
 export const PlaceSpotContainer = styled.View`
-  min-height: 300px;
-  padding: 20px;
 `
 
 export const PlaceGroupContainer = styled.View`

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

@@ -145,6 +145,10 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
   };
 
   const handleClickViewOrder = (uuid: string) => {
+    if (isMessageView) {
+      handleClickOrder(order?.uuid)
+      return
+    }
     onNavigationRedirect &&
       onNavigationRedirect('OrderDetails', { orderId: uuid });
   };
@@ -274,16 +278,18 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
                   {getOrderStatus(order.status)?.value}
                 </OText>
               </View>
-              <TouchableOpacity
-                onPress={handleChangeFavorite}
-                style={{ marginTop: 5 }}
-              >
-                <IconAntDesign
-                  name={order?.favorite ? 'heart' : 'hearto'}
-                  color={theme.colors.danger5}
-                  size={16}
-                />
-              </TouchableOpacity>
+              {!isMessageView && (
+                <TouchableOpacity
+                  onPress={handleChangeFavorite}
+                  style={{ marginTop: 5 }}
+                >
+                  <IconAntDesign
+                    name={order?.favorite ? 'heart' : 'hearto'}
+                    color={theme.colors.danger5}
+                    size={16}
+                  />
+                </TouchableOpacity>
+              )}
             </ContentFooter>
           </CardInfoWrapper>
         </InnerContainer>

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

@@ -5,7 +5,6 @@ import {
 	useOrder,
 	useUtils,
 	useSession,
-	useOrderingTheme,
 	SingleProductCard as SingleProductCardController
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
@@ -41,8 +40,7 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 	} = props;
 
 	const theme = useTheme();
-	const [orderingTheme] = useOrderingTheme()
-	const hideAddButton = orderingTheme?.theme?.business_view?.components?.products?.components?.add_to_cart_button?.hidden
+	const hideAddButton = theme?.business_view?.components?.products?.components?.add_to_cart_button?.hidden ?? true
 
 	const fadeAnim = useRef(new Animated.Value(0)).current;
 
@@ -52,6 +50,7 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 			borderRadius: 7.6,
 			borderColor: theme.colors.border,
 			marginBottom: 28,
+			minHeight: 165
 		},
 		titleWrapper: {
 			flexDirection: 'row',

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

@@ -642,12 +642,20 @@ export interface NoNetworkParams {
 }
 
 export interface PlaceSpotParams {
-	isOpenPlaceSpot?: boolean,
+	isCheckout?: any,
+	isInputMode?: any,
 	cart?: any,
+	spotNumberDefault?: any,
+	vehicleDefault?: any,
+	spotNumber?: any,
+    setSpotNumber?: any,
+	orderTypes?: any,
 	placesState?: any,
-	handleChangePlace?: any,
-	getPlacesList?: any,
-	setOpenPlaceModal?: any
+	handleChangePlace? : any,
+	spotState?: any,
+	vehicle?: any,
+	setVehicle?: any,
+	handleChangeSpot?: any
 }
 
 export interface PromotionParams {