ordering-ui-react-native 0.15.16 → 0.15.19

package/package.json

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

package/src/components/ProductForm/index.tsx

@@ -378,7 +378,7 @@ const styles = StyleSheet.create({
     borderBottomLeftRadius: 10,
     borderBottomRightRadius: 10,
     borderColor: '#DBDCDB',
-    height: 100,
+    height: 160,
     alignItems: 'flex-start',
   },
   quantityControl: {

package/src/components/ProductForm/styles.tsx

@@ -66,6 +66,7 @@ export const WrapperSubOption = styled.View`
 `
 
 export const ProductComment = styled.View`
+  height: 160px;
 `
 
 export const ProductActions = styled.View`

package/themes/original/index.tsx

@@ -25,6 +25,7 @@ import { ReviewProducts } from './src/components/ReviewProducts';
 import { ReviewDriver } from './src/components/ReviewDriver';
 import { UserProfile } from './src/components/UserProfile';
 import { MessageListing } from './src/components/MessageListing';
+import { Messages } from './src/components/Messages';
 import { Help } from './src/components/Help';
 import { HelpAccountAndPayment } from './src/components/HelpAccountAndPayment';
 import { HelpGuide } from './src/components/HelpGuide';
@@ -93,6 +94,7 @@ export {
 	BusinessMenuList,
 	UserProfile,
 	MessageListing,
+  Messages,
 	Help,
 	HelpAccountAndPayment,
 	HelpGuide,

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

@@ -6,7 +6,7 @@ import { BusinessProductsListParams } from '../../types';
 import { OButton, OIcon, OModal, OText } from '../shared';
 import { ProductsContainer, ErrorMessage, WrapperNotFound } from './styles';
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
-import { View } from 'react-native';
+import { View, ScrollView } from 'react-native';
 import { StyleSheet } from 'react-native';
 import { useTheme } from 'styled-components/native';
 
@@ -220,7 +220,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
         title={openDescription?.name}
         onClose={() => setOpenDescription(null)}
       >
-        <View style={{ padding: 20 }}>
+        <ScrollView style={{ padding: 20 }}>
           {!!openDescription?.image && (
             <OIcon
               url={optimizeImage(openDescription?.image, 'h_100,c_limit')}
@@ -230,7 +230,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
             />
           )}
           <OText>{openDescription?.description}</OText>
-        </View>
+        </ScrollView>
       </OModal>
     </ProductsContainer>
   );

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

@@ -168,7 +168,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 
 	useEffect(() => {
 		if (businessesList.businesses.length > 0) {
-			const fb = businessesList.businesses.filter((b) => b.featured == true);
+			const fb = businessesList.businesses.filter((b) => b.featured === true && b?.open);
 			const ary = [];
 			while (fb.length > 0) {
 				ary.push(fb.splice(0, 2));

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

@@ -24,6 +24,7 @@ import AntIcon from 'react-native-vector-icons/AntDesign'
 import { TaxInformation } from '../TaxInformation';
 import { CartStoresListing } from '../CartStoresListing';
 import { OAlert } from '../../../../../src/components/shared'
+import { PlaceSpot } from '../PlaceSpot'
 
 const CartUI = (props: any) => {
   const {
@@ -54,12 +55,14 @@ const CartUI = (props: any) => {
   const [canOpenUpselling, setCanOpenUpselling] = useState(false)
   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 isCartPending = cart?.status === 2
   const isCouponEnabled = validationFields?.fields?.checkout?.coupon?.enabled
 
   const business: any = (orderState?.carts && Object.values(orderState.carts).find((_cart: any) => _cart?.uuid === props.cartuuid)) ?? {}
   const businessId = business?.business_id ?? null
+  const placeSpotTypes = [3, 4]
 
   const momentFormatted = !orderState?.option?.moment
     ? t('RIGHT_NOW', 'Right Now')
@@ -353,6 +356,24 @@ const CartUI = (props: any) => {
                 </OText>
               </OSTable>
             </OSTotal>
+            {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 }}>
@@ -434,14 +455,26 @@ const CartUI = (props: any) => {
           products={cart?.products}
         />
       </OModal>
-        <OAlert
-          open={confirm.open}
-          title={confirm.title}
-          content={confirm.content}
-          onAccept={confirm.handleOnAccept}
-          onCancel={() => setConfirm({ ...confirm, open: false, title: null })}
-          onClose={() => setConfirm({ ...confirm, open: false, title: null })}
+      <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}
+        content={confirm.content}
+        onAccept={confirm.handleOnAccept}
+        onCancel={() => setConfirm({ ...confirm, open: false, title: null })}
+        onClose={() => setConfirm({ ...confirm, open: false, title: null })}
+      />
     </CContainer>
   )
 }

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

@@ -132,10 +132,11 @@ const CheckoutUI = (props: any) => {
 	const [isDeliveryOptionModalVisible, setIsDeliveryOptionModalVisible] = useState(false)
 	const [showGateway, setShowGateway] = useState<any>({ closedByUsed: false, open: false });
 	const [webviewPaymethod, setWebviewPaymethod] = useState<any>(null)
-
-
+	
+	const placeSpotTypes = [3, 4]
 	const isWalletEnabled = configs?.wallet_enabled?.value === '1' && (configs?.wallet_cash_enabled?.value === '1' || configs?.wallet_credit_point_enabled?.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 driverTipsOptions = typeof configs?.driver_tip_options?.value === 'string'
 		? JSON.parse(configs?.driver_tip_options?.value) || []
@@ -156,7 +157,7 @@ const CheckoutUI = (props: any) => {
 			navigation.navigate('MomentOption')
 		}
 	}
-	
+
 	const handlePlaceOrder = () => {
 		if (!userErrors.length) {
 			handlerClickPlaceOrder && handlerClickPlaceOrder()
@@ -201,8 +202,8 @@ const CheckoutUI = (props: any) => {
 		if (
 			!user?.cellphone &&
 			((validationFields?.fields?.checkout?.cellphone?.enabled &&
-        validationFields?.fields?.checkout?.cellphone?.required) ||
-        configs?.verification_phone_required?.value === '1')
+				validationFields?.fields?.checkout?.cellphone?.required) ||
+				configs?.verification_phone_required?.value === '1')
 		) {
 			errors.push(t('VALIDATION_ERROR_MOBILE_PHONE_REQUIRED', 'The field Phone number is required'))
 		}
@@ -268,15 +269,15 @@ const CheckoutUI = (props: any) => {
 								/>
 							</CHMomentWrapper>
 							<CHMomentWrapper
-									onPress={() => handleMomentClick()}
-									disabled={loading}
+								onPress={() => handleMomentClick()}
+								disabled={loading}
 							>
 								<OText size={12} numberOfLines={1} ellipsizeMode='tail' color={theme.colors.textSecondary}>
 									{options?.moment
 										? parseDate(options?.moment, { outputFormat: configs?.dates_moment_format?.value })
 										: t('ASAP_ABBREVIATION', 'ASAP')}
 								</OText>
-								{ isPreOrder && (
+								{isPreOrder && (
 									<OIcon
 										src={theme.images.general.arrow_down}
 										width={10}
@@ -648,6 +649,14 @@ const CheckoutUI = (props: any) => {
 										{t('WARNING_INVALID_PRODUCTS', 'Some products are invalid, please check them.')}
 									</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>
+								)}
 							</ChErrors>
 						</View>
 					)}
@@ -667,8 +676,8 @@ const CheckoutUI = (props: any) => {
 			{!cartState.loading && cart && cart?.status !== 2 && (
 				<FloatingButton
 					handleClick={() => handlePlaceOrder()}
-					isSecondaryBtn={loading || !cart?.valid || (!paymethodSelected && cart?.balance > 0) || placing || errorCash || cart?.subtotal < cart?.minimum}
-					disabled={loading || !cart?.valid || (!paymethodSelected && cart?.balance > 0) || placing || errorCash || cart?.subtotal < cart?.minimum}
+					isSecondaryBtn={isDisabledButtonPlace}
+					disabled={isDisabledButtonPlace}
 					btnText={cart?.subtotal >= cart?.minimum
 						? (
 							placing

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

@@ -63,7 +63,7 @@ const DriverTipsUI = (props: any) => {
 	return (
 		<DTContainer>
 			<DTWrapperTips>
-				{driverTipsOptions.map((option: any, i: number) => (				
+				{driverTipsOptions.map((option: any, i: number) => (
 					<TouchableOpacity
 						key={i}
 						onPress={() => handlerChangeOption(option)}

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

@@ -98,27 +98,17 @@ const MessagesUI = (props: MessagesParams) => {
 
 	const handleImagePicker = () => {
 		launchImageLibrary({ mediaType: 'photo', maxHeight: 2048, maxWidth: 2048, includeBase64: true }, (response: any) => {
-			if (response.didCancel) {
-				console.log('User cancelled image picker');
-			} else if (response.errorMessage) {
-				console.log('ImagePicker Error: ', response.errorMessage);
+			if (response?.didCancel) {
+				showToast(ToastType.Error, t('IMAGE_CANCELLED', 'User cancelled image picker'));
+			} else if (response?.errorMessage) {
 				showToast(ToastType.Error, response.errorMessage);
 			} else {
-				if (Platform.OS === 'ios') {
-					if (response.uri) {
-						const url = `data:${response.type};base64,${response.base64}`
-						setImage && setImage(url);
-					} else {
-						showToast(ToastType.Error, t('IMAGE_NOT_FOUND', 'Image not found'));
-					}
+				if (response?.assets?.length > 0) {
+					const image = response?.assets[0]
+					const url = `data:${image.type};base64,${image.base64}`
+					setImage && setImage(url);
 				} else {
-					if (response?.assets?.length > 0) {
-						const image = response?.assets[0]
-						const url = `data:${image.type};base64,${image.base64}`
-						setImage && setImage(url);
-					} else {
-						showToast(ToastType.Error, t('IMAGE_NOT_FOUND', 'Image not found'));
-					}
+					showToast(ToastType.Error, t('IMAGE_NOT_FOUND', 'Image not found'));
 				}
 			}
 		});
@@ -237,7 +227,7 @@ const MessagesUI = (props: MessagesParams) => {
 						{image && (
 							<TouchableOpacity
 								style={{ position: 'absolute', top: -5, right: -5, borderColor: theme.colors.backgroundDark, backgroundColor: theme.colors.white, borderRadius: 25 }}
-								onPress={() => removeImage()}
+								onPress={removeImage}
 							>
 								<MaterialCommunityIcon name='close-circle-outline' color={theme.colors.backgroundDark} size={24} />
 							</TouchableOpacity>
@@ -545,9 +535,15 @@ const styles = StyleSheet.create({
 })
 
 export const Messages = (props: MessagesParams) => {
+	const [allMessages, setAllMessages] = useState(props.messages)
 	const MessagesProps = {
 		...props,
-		UIComponent: MessagesUI
+		UIComponent: MessagesUI,
+		messages: allMessages,
+		setMessages: (values: any) => {
+			props.setMessages && props.setMessages(values)
+			setAllMessages(values)
+		}
 	}
 	return <MessagesController {...MessagesProps} />
 }

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

@@ -1,14 +1,11 @@
 import React, { useState, useEffect } from 'react';
-import { View, StyleSheet, BackHandler, KeyboardAvoidingView, Platform, Linking } from 'react-native';
-import Spinner from 'react-native-loading-spinner-overlay';
+import { View, StyleSheet, BackHandler, Platform, Linking } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
-import { Messages } from '../Messages';
 import {
   useLanguage,
   OrderDetails as OrderDetailsConTableoller,
   useUtils,
   useConfig,
-  useSession,
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import {
@@ -16,14 +13,10 @@ import {
   Header,
   OrderContent,
   OrderBusiness,
-  Logo,
   OrderData,
   OrderInfo,
-  OrderStatus,
   StaturBar,
-  StatusImage,
   OrderCustomer,
-  CustomerPhoto,
   InfoBlock,
   HeaderInfo,
   Customer,
@@ -31,7 +24,6 @@ import {
   Table,
   OrderBill,
   Total,
-  NavBack,
   Icons,
   OrderDriver,
   Map,
@@ -41,7 +33,6 @@ import { OButton, OIcon, OModal, OText } from '../shared';
 import { ProductItemAccordion } from '../ProductItemAccordion';
 import { TouchableOpacity } from 'react-native-gesture-handler';
 import { OrderDetailsParams } from '../../types';
-import { USER_TYPE } from '../../config/constants';
 import { GoogleMap } from '../GoogleMap';
 import { verifyDecimals } from '../../utils';
 import { OSRow } from '../OrderSummary/styles';
@@ -55,7 +46,6 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     messages,
     setMessages,
     readMessages,
-    messagesReadList,
     isFromCheckout,
     driverLocation,
   } = props;
@@ -92,19 +82,12 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
 
   const [, t] = useLanguage();
   const [{ parsePrice, parseNumber, parseDate }] = useUtils();
-  const [{ user }] = useSession();
   const [{ configs }] = useConfig();
 
-  const [openModalForBusiness, setOpenModalForBusiness] = useState(false);
-  const [openModalForDriver, setOpenModalForDriver] = useState(false);
   const [isReviewed, setIsReviewed] = useState(false)
-  const [unreadAlert, setUnreadAlert] = useState({
-    business: false,
-    driver: false,
-  });
   const [openTaxModal, setOpenTaxModal] = useState<any>({ open: false, tax: null, type: '' })
 
-  const { order, businessData } = props.order;
+  const { order } = props.order;
 
   const walletName: any = {
     cash: {
@@ -293,18 +276,18 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
         percentage: 95,
         image: theme.images.order.status7,
       },
-      { 
-        key: 22, 
-        value: t('ORDER_LOOKING_FOR_DRIVER', 'Looking for driver'), 
-        slug: 'ORDER_LOOKING_FOR_DRIVER', 
-        percentage: 35, 
-        image: theme.images.order.status8 
+      {
+        key: 22,
+        value: t('ORDER_LOOKING_FOR_DRIVER', 'Looking for driver'),
+        slug: 'ORDER_LOOKING_FOR_DRIVER',
+        percentage: 35,
+        image: theme.images.order.status8
       },
-      { 
-        key: 23, 
-        value: t('ORDER_DRIVER_ON_WAY', 'Driver on way'), 
-        slug: 'ORDER_DRIVER_ON_WAY', 
-        percentage: 45, 
+      {
+        key: 23,
+        value: t('ORDER_DRIVER_ON_WAY', 'Driver on way'),
+        slug: 'ORDER_DRIVER_ON_WAY',
+        percentage: 45,
         image: theme.images.order.status8
       }
     ];
@@ -314,38 +297,24 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     return objectStatus && objectStatus;
   };
 
-  const handleOpenMessagesForBusiness = () => {
-    setOpenModalForBusiness(true);
-    readMessages && readMessages();
-    setUnreadAlert({ ...unreadAlert, business: false });
-  };
-
-  const handleOpenMessagesForDriver = () => {
-    setOpenModalForDriver(true);
+  const handleGoToMessages = (type: string) => {
     readMessages && readMessages();
-    setUnreadAlert({ ...unreadAlert, driver: false });
-  };
-
-  const unreadMessages = () => {
-    const length = messages?.messages.length;
-    const unreadLength = order?.unread_count;
-    const unreadedMessages = messages.messages.slice(
-      length - unreadLength,
-      length,
-    );
-    const business = unreadedMessages.some((message: any) =>
-      message?.can_see?.includes(2),
-    );
-    const driver = unreadedMessages.some((message: any) =>
-      message?.can_see?.includes(4),
-    );
-    setUnreadAlert({ business, driver });
-  };
-
-  const handleCloseModal = () => {
-    setOpenModalForBusiness(false);
-    setOpenModalForDriver(false);
-  };
+    navigation.navigate(
+      'MessageDetails',
+      {
+        type,
+        order,
+        messages,
+        setMessages,
+        orderId: order?.id,
+        business: type === 'business',
+        driver: type === 'driver',
+        onClose: () => navigation?.canGoBack()
+        ? navigation.goBack()
+        : navigation.navigate('BottomTab', { screen: 'MyOrders' }),
+      }
+    )
+  }
 
   const handleArrowBack: any = () => {
     if (!isFromCheckout) {
@@ -394,14 +363,6 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     };
   }, []);
 
-  useEffect(() => {
-    if (messagesReadList?.length) {
-      openModalForBusiness
-        ? setUnreadAlert({ ...unreadAlert, business: false })
-        : setUnreadAlert({ ...unreadAlert, driver: false });
-    }
-  }, [messagesReadList]);
-
   const locations = [
     {
       ...order?.driver?.location,
@@ -430,10 +391,6 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     }
   }, [driverLocation]);
 
-  useEffect(() => {
-    console.log('order: ', order)
-  }, [order]);
-
   return (
     <OrderDetailsContainer keyboardShouldPersistTaps="handled">
       {(!order || Object.keys(order).length === 0) && (
@@ -481,7 +438,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
             <PlaceholderLine width={65} height={10} />
             <PlaceholderLine width={80} height={10} />
             <PlaceholderLine width={70} height={10} />
-            <View style={{marginTop: 10}}>
+            <View style={{ marginTop: 10 }}>
               <PlaceholderLine width={60} height={20} />
               <PlaceholderLine width={40} height={10} />
             </View>
@@ -610,7 +567,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                     )}
                     <TouchableOpacity
                       style={{ paddingStart: 5 }}
-                      onPress={() => handleOpenMessagesForBusiness()}>
+                      onPress={() => handleGoToMessages('business')}>
                       <OIcon
                         src={theme.images.general.chat}
                         width={16}
@@ -739,7 +696,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                         </OText>
                         <Icons>
                           <TouchableOpacity
-                            onPress={() => handleOpenMessagesForDriver()}>
+                            onPress={() => handleGoToMessages('driver')}>
                             <OIcon
                               src={theme.images.general.chat}
                               width={16}
@@ -1022,22 +979,6 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
           </OrderContent>
         </>
       )}
-      <OModal
-        open={openModalForBusiness || openModalForDriver}
-        entireModal
-        customClose
-        onClose={() => handleCloseModal()}>
-        <Messages
-          type={openModalForBusiness ? USER_TYPE.BUSINESS : USER_TYPE.DRIVER}
-          orderId={order?.id}
-          messages={messages}
-          order={order}
-          business={openModalForBusiness}
-          driver={openModalForDriver}
-          setMessages={setMessages}
-          onClose={handleCloseModal}
-        />
-      </OModal>
       <OModal
         open={openTaxModal.open}
         onClose={() => setOpenTaxModal({ open: false, data: null, type: '' })}

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

@@ -26,6 +26,7 @@ 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 {
@@ -49,7 +50,9 @@ 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 placeSpotTypes = [3, 4]
 
   const handleDeleteClick = (product: any) => {
     removeProduct(product, cart)
@@ -301,6 +304,24 @@ const OrderSummaryUI = (props: any) => {
                   </OSTable>
                 </View>
               )}
+              {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 }}>
@@ -349,6 +370,18 @@ 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

@@ -0,0 +1,114 @@
+import React, { useEffect, useState } from 'react'
+import { View } from 'react-native'
+import { PlaceSpot as PlaceSpotController, useLanguage } from 'ordering-components/native'
+import { PlaceGroupContainer, PlaceSpotContainer } from './styles'
+import { NotFoundSource } from '../NotFoundSource'
+import { OText, ODropDown } from '../shared'
+import { Placeholder, PlaceholderLine } from 'rn-placeholder'
+import { PlaceSpotParams } from '../../types'
+
+const PlaceSpotUI = (props: PlaceSpotParams) => {
+  const {
+    isOpenPlaceSpot,
+    cart,
+    placesState,
+    handleChangePlace,
+    getPlacesList,
+    setOpenPlaceModal
+  } = props
+
+  const [, t] = useLanguage()
+  const [placeGroupSelected, setPlaceGroupSelected] = useState<any>(null)
+
+  const getPlacesGroups = () => {
+    const groups = placesState.placeGroups?.filter((group: any) => group?.enabled && placesState?.places?.find((place: any) => place?.enabled && place?.place_group_id === group?.id))
+    return groups.map((group: any) => ({
+      value: group,
+      content: group?.name,
+      showOnSelected: group?.name
+    }))
+  }
+
+  const getPlaces = () => {
+    const places = placeGroupSelected && placesState?.places?.filter((place: any) => place?.enabled && place?.place_group_id === placeGroupSelected?.id)
+    return places.map((place: any) => ({
+      value: place,
+      content: place.name,
+      showOnSelected: place.name
+    }))
+  }
+
+  const handlerChangePlace = (place: any) => {
+    setOpenPlaceModal(false)
+    handleChangePlace(place)
+  }
+
+
+  useEffect(() => {
+    if (!placesState?.loading) {
+      const placeGroupOnCart = placesState?.placeGroups.find((group: any) => group?.id === cart?.place?.place_group_id)
+      setPlaceGroupSelected(placeGroupOnCart)
+    }
+  }, [placesState])
+
+  useEffect(() => {
+    getPlacesList()
+  }, [isOpenPlaceSpot])
+
+  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} />
+          </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>
+          )}
+        </>
+      )}
+    </PlaceSpotContainer>
+  )
+}
+
+export const PlaceSpot = (props: PlaceSpotParams) => {
+  const placeSpotProps = {
+    ...props,
+    UIComponent: PlaceSpotUI
+  }
+
+  return <PlaceSpotController {...placeSpotProps} />
+}

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

@@ -0,0 +1,11 @@
+import styled from 'styled-components/native'
+
+export const PlaceSpotContainer = styled.View`
+  min-height: 300px;
+  padding: 20px;
+`
+
+export const PlaceGroupContainer = styled.View`
+  margin-bottom: 40px;
+  margin-top: 20px;
+`

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

@@ -887,7 +887,6 @@ export const ProductOptionsUI = (props: any) => {
 								<OIcon
 									src={theme.images.general.minus}
 									width={16}
-									style={{ borderWidth: 1, borderColor: 'red' }}
 									color={
 										productCart.quantity === 1 || isSoldOut
 											? theme.colors.backgroundGray
@@ -931,7 +930,6 @@ export const ProductOptionsUI = (props: any) => {
 								<OIcon
 									src={theme.images.general.plus}
 									width={16}
-									style={{ borderWidth: 1, borderColor: 'red' }}
 									color={
 										maxProductQuantity <= 0 ||
 											productCart.quantity >= maxProductQuantity ||

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

@@ -16,6 +16,7 @@ import { LogoutButton } from '../LogoutButton'
 import { LanguageSelector } from '../LanguageSelector'
 import MessageCircle from 'react-native-vector-icons/AntDesign'
 import Ionicons from 'react-native-vector-icons/Ionicons'
+import FastImage from 'react-native-fast-image'
 
 import {
 	OIcon,
@@ -142,12 +143,13 @@ const ProfileListUI = (props: ProfileParams) => {
 			<CenterView style={styles.pagePadding}>
 				<View style={styles.photo}>
 					{user?.photo ? (
-						<OIcon
-							url={user?.photo}
-							cover
-							width={60}
-							height={60}
-							borderRadius={8}
+						<FastImage
+							style={{ height: 60, width: 60, borderRadius: 8 }}
+							source={{
+								uri: user?.photo,
+								priority: FastImage.priority.normal,
+							}}
+							resizeMode={FastImage.resizeMode.cover}
 						/>
 					) : (
 						<Ionicons name='person-outline' size={50} style={{ marginRight: 10 }} />

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

@@ -21,6 +21,7 @@ import NavBar from '../NavBar';
 import { Container } from '../../layouts/Container';
 import { VerifyPhone } from '../VerifyPhone'
 import Ionicons from 'react-native-vector-icons/Ionicons'
+import FastImage from 'react-native-fast-image'
 
 const ProfileUI = (props: ProfileParams) => {
 	const {
@@ -288,12 +289,13 @@ const ProfileUI = (props: ProfileParams) => {
 					<CenterView style={styles.pagePadding}>
 						<View style={styles.photo}>
 							{user?.photo ? (
-								<OIcon
-									url={user?.photo}
-									cover
-									width={60}
-									height={60}
-									borderRadius={8}
+								<FastImage
+									style={{ height: 60, width: 80, borderRadius: 8 }}
+									source={{
+										uri: user?.photo,
+										priority: FastImage.priority.normal,
+									}}
+									resizeMode={FastImage.resizeMode.cover}
 								/>
 							) : (
 								<Ionicons name='person-outline' size={50} />

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

@@ -383,7 +383,7 @@ export interface MessagesParams {
 	handleSend?: () => {},
 	setImage?: (image: string | null) => {},
 	setMessage?: (comment: string) => {},
-	setMessages?: () => {},
+	setMessages?: (image: any | null) => {},
 	readMessages?: () => {},
 	onClose?: () => void,
 	isMeesageListing?: boolean,
@@ -546,3 +546,12 @@ export interface BusinessSearchParams {
 export interface NoNetworkParams {
 	image?: any,
 }
+
+export interface PlaceSpotParams {
+	isOpenPlaceSpot?: boolean,
+	cart?: any ,
+	placesState?: any,
+	handleChangePlace?: any,
+	getPlacesList?: any,
+	setOpenPlaceModal?: any
+}