npm - ordering-ui-react-native - Versions diffs - 0.16.68 → 0.16.71 - Mend

ordering-ui-react-native 0.16.68 → 0.16.71

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (16) hide show

package/package.json CHANGED Viewed

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

package/src/components/ActiveOrders/index.tsx CHANGED Viewed

@@ -48,75 +48,73 @@ export const ActiveOrders = (props: ActiveOrdersParams) => {
   }, [orders.length])
   const Order = ({ order }: { order: any }) => (
-    <React.Fragment>
-      <Card
-        isMiniCard={configs?.google_maps_api_key?.value}
-        onPress={() => handleClickCard(order?.uuid)}
-      >
-        {!!(configs?.google_maps_api_key?.value) && (
-          <Map>
+    <Card
+      isMiniCard={configs?.google_maps_api_key?.value}
+      onPress={() => handleClickCard(order?.uuid)}
+    >
+      {!!(configs?.google_maps_api_key?.value) && (
+        <Map>
+          <OIcon
+            url={getGoogleMapImage(order?.business?.location, configs?.google_maps_api_key?.value)}
+            height={100}
+            width={320}
+            style={{resizeMode: 'cover', borderTopRightRadius: 24, borderTopLeftRadius: 24}}
+          />
+        </Map>
+      )}
+      <Information>
+        {!!order.business?.logo && (
+          <Logo>
             <OIcon
-              url={getGoogleMapImage(order?.business?.location, configs?.google_maps_api_key?.value)}
-              height={100}
-              width={320}
-              style={{resizeMode: 'cover', borderTopRightRadius: 24, borderTopLeftRadius: 24}}
+              url={optimizeImage(order.business?.logo, 'h_300,c_limit')}
+              style={styles.logo}
             />
-          </Map>
+          </Logo>
         )}
-        <Information>
-          {!!order.business?.logo && (
-            <Logo>
-              <OIcon
-                url={optimizeImage(order.business?.logo, 'h_300,c_limit')}
-                style={styles.logo}
-              />
-            </Logo>
-          )}
-          <OrderInformation>
-            <BusinessInformation style={{ width: '60%' }}>
-              <GestureHandlerScrollView
-                  showsVerticalScrollIndicator={false}
-                  showsHorizontalScrollIndicator={false}
-                  horizontal
-              >
-                <TouchableWithoutFeedback>
-                  <View>
-                    <OText
-                      size={16}
-                      numberOfLines={1}
-                      ellipsizeMode='tail'
-                    >
-                      {order.business?.name}
-                    </OText>
-                  </View>
-                </TouchableWithoutFeedback>
-              </GestureHandlerScrollView>
-              <GestureHandlerScrollView
+        <OrderInformation>
+          <BusinessInformation style={{ width: '60%' }}>
+            <GestureHandlerScrollView
                 showsVerticalScrollIndicator={false}
                 showsHorizontalScrollIndicator={false}
                 horizontal
-              >
-                <TouchableWithoutFeedback>
-                  <View style={styles.orderNumber}>
-                    <OText size={12} space color={theme.colors.textSecondary}>{t('ORDER_NUMBER', 'Order No.')}</OText>
-                    <OText size={12} color={theme.colors.textSecondary}>{order.id}</OText>
-                  </View>
-                </TouchableWithoutFeedback>
-              </GestureHandlerScrollView>
-              <OText size={12} color={theme.colors.textSecondary}>{order?.delivery_datetime_utc
-                ? parseDate(order?.delivery_datetime_utc)
-                : parseDate(order?.delivery_datetime, { utc: false })}</OText>
-            </BusinessInformation>
-            <Price>
-              <OText size={16}>{parsePrice(order?.summary?.total || order?.total)}</OText>
-              {order?.status !== 0 && (
-                <OText color={theme.colors.primary} size={12} numberOfLines={2}>{getOrderStatus(order.status)?.value}</OText>
-              )}
-            </Price>
-          </OrderInformation>
-        </Information>
-      </Card>
-    </React.Fragment>
+            >
+              <TouchableWithoutFeedback>
+                <View>
+                  <OText
+                    size={16}
+                    numberOfLines={1}
+                    ellipsizeMode='tail'
+                  >
+                    {order.business?.name}
+                  </OText>
+                </View>
+              </TouchableWithoutFeedback>
+            </GestureHandlerScrollView>
+            <GestureHandlerScrollView
+              showsVerticalScrollIndicator={false}
+              showsHorizontalScrollIndicator={false}
+              horizontal
+            >
+              <TouchableWithoutFeedback>
+                <View style={styles.orderNumber}>
+                  <OText size={12} space color={theme.colors.textSecondary}>{t('ORDER_NUMBER', 'Order No.')}</OText>
+                  <OText size={12} color={theme.colors.textSecondary}>{order.id}</OText>
+                </View>
+              </TouchableWithoutFeedback>
+            </GestureHandlerScrollView>
+            <OText size={12} color={theme.colors.textSecondary}>{order?.delivery_datetime_utc
+              ? parseDate(order?.delivery_datetime_utc)
+              : parseDate(order?.delivery_datetime, { utc: false })}</OText>
+          </BusinessInformation>
+          <Price>
+            <OText size={16}>{parsePrice(order?.summary?.total || order?.total)}</OText>
+            {order?.status !== 0 && (
+              <OText color={theme.colors.primary} size={12} numberOfLines={2}>{getOrderStatus(order.status)?.value}</OText>
+            )}
+          </Price>
+        </OrderInformation>
+      </Information>
+    </Card>
   )
   return (

package/src/components/ActiveOrders/styles.tsx CHANGED Viewed

@@ -2,7 +2,7 @@ import styled from 'styled-components/native'
 export const ActiveOrdersContainer = styled.ScrollView`
   margin-bottom: 20px;
-  height: ${({ isMiniCards }: { isMiniCards: boolean }) => !isMiniCards ? '150px' : '220px'};
+  height: ${({ isMiniCards }: { isMiniCards: boolean }) => !isMiniCards ? '150px' : '450px'};
   max-height: ${({ isMiniCards }: { isMiniCards: boolean }) => !isMiniCards ? '150px' : '220px'};
 `

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

@@ -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/BusinessProductsListing/index.tsx CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 {