ordering-ui-react-native 0.15.14 → 0.15.17

package/package.json

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

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

@@ -1,6 +1,6 @@
 import React, { useEffect, useState, useRef } from 'react';
 import { View, Pressable, StyleSheet, ScrollView, RefreshControl, Linking, Platform, TextInput } from 'react-native';
-import { useLanguage, useUtils, useToast, ToastType, OrderListGroups } from 'ordering-components/native';
+import { useLanguage, useUtils, useToast, ToastType, OrderListGroups, useConfig } from 'ordering-components/native';
 import SelectDropdown from 'react-native-select-dropdown'
 import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
 import FeatherIcon from 'react-native-vector-icons/Feather';
@@ -400,20 +400,6 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
     setOpenSLASettingModal(false)
   }
 
-  const [settingTimeErrorMessage, setSettingTimeErrorMessage] = useState('')
-
-  const handlSLASettingTime = () => {
-    if (!hour || !minute) {
-      setSettingTimeErrorMessage(t('SLA_SETTING_ERROR', 'Time value is invalid'))
-      return
-    }
-    const _settingTimeSecond = hour * 3600 + minute * 60
-    setSlaSettingTime(_settingTimeSecond)
-    handleClose()
-    showToast(ToastType.Success, t('SLA_SETTING_UPDATED', 'SLAs setting updated'))
-  }
-
-
   useEffect(() => {
     setCurrentFilters(null)
     onFiltered && onFiltered(null)
@@ -859,24 +845,10 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
                       key={i}
                       item={item}
                       last={i + 1 === selectedTabStatus.length}
-                      setHour={setHour}
-                      setMinute={setMinute}
-                      setSettingTimeErrorMessage={setSettingTimeErrorMessage}
                     />
                   ))}
                   <VerticalLine />
                 </DeliveryStatusWrapper>
-                {settingTimeErrorMessage !== '' && (
-                  <OText style={styles.errorMessage}>{settingTimeErrorMessage}</OText>
-                )}
-                <Actions>
-                  <OButton
-                    text={t('ACCEPT', 'Accept')}
-                    textStyle={{ color: 'white', fontSize: 14 }}
-                    onClick={handlSLASettingTime}
-                    style={styles.acceptButtonStyle}
-                  />
-                </Actions>
               </SlaSettingModalContent>
             )}
           </ModalContainer>
@@ -887,7 +859,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 };
 
 export const StatusBlock = (props: any) => {
-  const { item, last, setHour, setMinute, setSettingTimeErrorMessage } = props
+  const { item, last } = props
   const [showTime, setShowTime] = useState(false)
 
   useEffect(() => {
@@ -898,7 +870,7 @@ export const StatusBlock = (props: any) => {
 
   return (
     <StatusItems>
-      <Pressable onPress={() => setShowTime(!showTime)} style={{ marginBottom: 5 }}>
+      <Pressable style={{ marginBottom: 10 }}>
         <ItemHeader>
           <IconWrapper>
             <OIcon
@@ -916,11 +888,7 @@ export const StatusBlock = (props: any) => {
         <OText>{item?.des}</OText>
       </ItemContent>
       {showTime && (
-        <Timer
-          setHour={setHour}
-          setMinute={setMinute}
-          setSettingTimeErrorMessage={setSettingTimeErrorMessage}
-        />
+        <Timer />
       )}
       {last && (
         <OverLine />
@@ -929,47 +897,28 @@ export const StatusBlock = (props: any) => {
   )
 }
 
-export const Timer = (props: any) => {
-  const { setHour, setMinute, setSettingTimeErrorMessage } = props
+export const Timer = () => {
   const [, t] = useLanguage()
   const theme = useTheme()
+  const [{ configs }] = useConfig();
 
   const styles = StyleSheet.create({
-    inputStyle: {
-      paddingHorizontal: 7,
-      paddingVertical: 2,
-      borderRadius: 0,
+    settingTime: {
       fontSize: 14,
+      borderWidth: 1,
+      borderRadius: 7.6,
+      margin: 0,
+      marginRight: 10,
+      paddingHorizontal: 10,
+      paddingTop: 5,
+      borderColor: theme.colors.disabled
     }
   })
 
-  const handleChangeInput = (val: any, type: string) => {
-    setSettingTimeErrorMessage('')
-    if (type === 'hour') {
-      setHour(val)
-    }
-    if (type === 'minute') {
-      setMinute(val)
-    }
-  }
-
   return (
     <TimerInputWrapper>
-      <TextInput
-        placeholder='HH'
-        keyboardType='number-pad'
-        maxLength={2}
-        style={{ ...styles.inputStyle, width: 36 }}
-        onChangeText={hour => handleChangeInput(hour, 'hour')}
-      />
-      <OText color={theme.colors.disabled}>:</OText>
-      <TextInput
-        placeholder='MM'
-        keyboardType='number-pad'
-        maxLength={2}
-        style={{ ...styles.inputStyle, width: 40 }}
-        onChangeText={minute => handleChangeInput(minute, 'minute')}
-      />
+      <OText style={styles.settingTime} color={theme.colors.disabled}>{configs?.order_deadlines_delayed_time?.value}</OText>
+      <OText>{t('MIN', 'min')}</OText>
     </TimerInputWrapper>
   )
 }

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

@@ -130,15 +130,12 @@ export const ItemContent = styled.View`
 `
 
 export const TimerInputWrapper = styled.View`
-  border-width: 1px;
-  border-radius: 7.6px;
   color: ${(props: any) => props.theme.colors.disabled};
-  border-color: ${(props: any) => props.theme.colors.disabled};
+  margin-top: 15px;
   margin-left: 30px;
   margin-right: 30px;
   flex-direction: row;
-  align-items: center;
-  width: 80px;
+  align-items: flex-end;
 `
 export const OverLine = styled.View`
   position: absolute;

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

@@ -93,7 +93,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
       >
         <Category
           style={cardStyle}
-          source={{uri: item.images}}
+          source={item.images ? {uri: item.images} : theme.images.categories.all}
           resizeMode="cover"
           w={widthScreen}
           borderRadius={16}
@@ -172,7 +172,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
           <OCard
             key={category.id}
             title={category?.name || ''}
-            image={{uri: category?.image}}
+            image={category.images ? {uri: category.images} : theme.images.categories.all}
             style={{
               width:
                 orientationState?.orientation === LANDSCAPE

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/Messages/index.tsx

@@ -97,7 +97,7 @@ const MessagesUI = (props: MessagesParams) => {
 	}
 
 	const handleImagePicker = () => {
-		launchImageLibrary({ mediaType: 'photo', maxHeight: 300, maxWidth: 300, includeBase64: true }, (response: any) => {
+		launchImageLibrary({ mediaType: 'photo', maxHeight: 2048, maxWidth: 2048, includeBase64: true }, (response: any) => {
 			if (response.didCancel) {
 				console.log('User cancelled image picker');
 			} else if (response.errorMessage) {

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

@@ -293,18 +293,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
       }
     ];
@@ -430,10 +430,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 +477,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>
@@ -594,18 +590,20 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                     {order?.business?.name}
                   </OText>
                   <Icons>
-                    <TouchableOpacity
-                      onPress={() => order?.business?.cellphone &&
-                        Linking.openURL(`tel:${order?.business?.cellphone}`)
-                      }
-                      style={{ paddingEnd: 5 }}
-                    >
-                      <OIcon
-                        src={theme.images.general.phone}
-                        width={16}
-                        color={theme.colors.disabled}
-                      />
-                    </TouchableOpacity>
+                    {!!order?.business?.cellphone && (
+                      <TouchableOpacity
+                        onPress={() => order?.business?.cellphone &&
+                          Linking.openURL(`tel:${order?.business?.cellphone}`)
+                        }
+                        style={{ paddingEnd: 5 }}
+                      >
+                        <OIcon
+                          src={theme.images.general.phone}
+                          width={16}
+                          color={theme.colors.disabled}
+                        />
+                      </TouchableOpacity>
+                    )}
                     <TouchableOpacity
                       style={{ paddingStart: 5 }}
                       onPress={() => handleOpenMessagesForBusiness()}>
@@ -624,13 +622,15 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                   mBottom={2}>
                   {order?.business?.email}
                 </OText>
-                <OText
-                  size={12}
-                  lineHeight={18}
-                  color={theme.colors.textNormal}
-                  mBottom={2}>
-                  {order?.business?.cellphone}
-                </OText>
+                {!!order?.business?.cellphone && (
+                  <OText
+                    size={12}
+                    lineHeight={18}
+                    color={theme.colors.textNormal}
+                    mBottom={2}>
+                    {order?.business?.cellphone}
+                  </OText>
+                )}
                 <OText size={12} lineHeight={18} color={theme.colors.textNormal}>
                   {order?.business?.address}
                 </OText>
@@ -978,7 +978,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                       marginTop: 10
                     }}
                   >
-                    {order?.payment_events?.map((event: any) => (
+                    {order?.payment_events?.map((event: any) => event.amount > 0 && (
                       <View
                         key={event.id}
                         style={{

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

@@ -872,9 +872,13 @@ export const ProductOptionsUI = (props: any) => {
 			</ScrollView>
 			{!loading && !error && product && (
 				<ProductActions ios={Platform?.OS === 'ios'}>
-					<OText size={16} lineHeight={24} weight={'600'}>
-						{productCart.total ? parsePrice(productCart?.total) : ''}
-					</OText>
+					<View>
+						<OText size={16} lineHeight={24} weight={'600'}>
+							{productCart.total ? parsePrice(productCart?.total) : ''}
+						</OText>
+						{product?.minimum_per_order && productCart?.quantity < product?.minimum_per_order && <OText size={12} color={theme.colors?.red}>{t('MOBILE_MINIMUM_TO_ORDER', 'Min. _number_ ').replace('_number_', product?.minimum_per_order)}</OText>}
+						{product?.maximum_per_order && productCart?.quantity > product?.maximum_per_order && <OText size={12} color={theme.colors?.red}>{t('MOBILE_MAXIMUM_TO_ORDER', 'Max. _number_'.replace('_number_', product?.maximum_per_order))}</OText>}
+					</View>
 					{productCart && !isSoldOut && maxProductQuantity > 0 && (
 						<View style={styles.quantityControl}>
 							<TouchableOpacity
@@ -987,14 +991,14 @@ export const ProductOptionsUI = (props: any) => {
 												? t('UPDATE', 'Update')
 												: t('ADD', 'Add')
 										}`}
-									isDisabled={isSoldOut || maxProductQuantity <= 0}
+									isDisabled={isSoldOut || maxProductQuantity <= 0 || productCart?.quantity < product?.minimum_per_order || productCart?.quantity > product?.maximum_per_order}
 									textStyle={{
 										color: saveErrors || isSoldOut || maxProductQuantity <= 0 ? theme.colors.primary : theme.colors.white,
 										fontSize: orderState.loading || editMode ? 10 : 14
 									}}
 									style={{
-										backgroundColor: saveErrors || isSoldOut || maxProductQuantity <= 0 ? theme.colors.lightGray : theme.colors.primary,
-										borderColor: saveErrors || isSoldOut || maxProductQuantity <= 0 ? theme.colors.white : theme.colors.primary,
+										backgroundColor: saveErrors || isSoldOut || maxProductQuantity <= 0 || productCart?.quantity < product?.minimum_per_order || productCart?.quantity > product?.maximum_per_order ? theme.colors.lightGray : theme.colors.primary,
+										borderColor: saveErrors || isSoldOut || maxProductQuantity <= 0 || productCart?.quantity < product?.minimum_per_order || productCart?.quantity > product?.maximum_per_order ? theme.colors.white : theme.colors.primary,
 										opacity: saveErrors || isSoldOut || maxProductQuantity <= 0 ? 0.3 : 1,
 										borderRadius: 7.6,
 										height: 44,

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

@@ -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
+}