ordering-ui-react-native 0.12.59 → 0.12.63

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.12.59",
+  "version": "0.12.63",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",
@@ -69,6 +69,7 @@
     "react-native-background-timer": "^2.4.1",
     "react-native-bootsplash": "^3.2.3",
     "react-native-calendar-picker": "^7.1.2",
+    "react-native-calendar-strip": "^2.2.5",
     "react-native-country-picker-modal": "^2.0.0",
     "react-native-credit-card-input": "^0.4.1",
     "react-native-document-picker": "^5.2.0",

package/src/components/AppleLogin/index.tsx

@@ -10,8 +10,7 @@ import { useTheme } from 'styled-components/native';
 import { OText } from '../shared';
 import { AppleLoginParams } from '../../types';
 
-export const AppleLogin = (props : AppleLoginParams) => {
-
+export const AppleLogin = (props: AppleLoginParams) => {
   const {
     notificationState,
     handleErrors,
@@ -55,7 +54,7 @@ export const AppleLogin = (props : AppleLoginParams) => {
           handleErrors && handleErrors(t('ERROR_LOGIN_APPLE', 'Error login with apple'))
         }
 
-      } catch (error : any) {
+      } catch (error: any) {
         handleErrors && handleErrors(error.message)
       }
     } else {
@@ -70,15 +69,22 @@ export const AppleLogin = (props : AppleLoginParams) => {
         });
         const { code } = await appleAuthAndroid.signIn();
         handleLoginApple(code)
-      } catch (error : any) {
+      } catch (error: any) {
         handleErrors && handleErrors(error?.message)
       }
     }
   }
   const handleLoginApple = async (code: string) => {
-    const body: any = {
-      code,
-      platform: Platform.OS === 'ios' && 'ios'
+    let body: any
+    if (Platform.OS === 'ios') {
+      body = {
+        code,
+        platform: 'ios'
+      }
+    } else {
+      body = {
+        code
+      }
     }
     if (notificationState?.notification_token) {
       body.notification_token = notificationState.notification_token
@@ -99,7 +105,7 @@ export const AppleLogin = (props : AppleLoginParams) => {
       } else {
         handleErrors && handleErrors(result || t('ERROR_LOGIN_AUTH_APPLE', 'Error login auth with apple'))
       }
-    } catch (error : any) {
+    } catch (error: any) {
       handleLoading && handleLoading(false)
       handleErrors && handleErrors(error?.message)
     }

package/src/components/Messages/index.tsx

@@ -67,10 +67,10 @@ const MessagesUI = (props: MessagesParams) => {
   const theme = useTheme();
 
   const quickMessageList = [
-    { key: 'driver_message_1', text: t('DRIVER_MESSAGE_1', 'driver_message_1') },
-    { key: 'driver_message_2', text: t('DRIVER_MESSAGE_2', 'driver_message_2') },
-    { key: 'driver_message_3', text: t('DRIVER_MESSAGE_3', 'driver_message_3') },
-    { key: 'driver_message_4', text: t('DRIVER_MESSAGE_4', 'driver_message_4') }
+    { key: 'customer_message_1', text: t('CUSTOMER_MESSAGE_1', 'customer_message_1') },
+    { key: 'customer_message_2', text: t('CUSTOMER_MESSAGE_2', 'customer_message_2') },
+    { key: 'customer_message_3', text: t('CUSTOMER_MESSAGE_3', 'customer_message_3') },
+    { key: 'customer_message_4', text: t('CUSTOMER_MESSAGE_4', 'customer_message_4') }
   ]
 
   const [formattedMessages, setFormattedMessages] = useState<Array<any>>([])

package/src/components/OrderCreating/index.tsx

@@ -86,7 +86,7 @@ export const OrderCreating = (props: any) => {
     if (business?.address) {
       AsyncStorage.setItem(
         'business-address',
-        JSON.stringify(business?.address)
+        business?.address
       );
       setAddress(business?.address)
     }
@@ -97,7 +97,6 @@ export const OrderCreating = (props: any) => {
       if (isOrderDetail) {
         try {
           const value = await AsyncStorage.getItem('business-address');
-          value != null ? JSON.parse(value) : null;
           setAddress(value)
         } catch {
           console.log('err')

package/src/components/OrderDetails/index.tsx

@@ -105,7 +105,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
   const [openModalForDriver, setOpenModalForDriver] = useState(false)
   const [unreadAlert, setUnreadAlert] = useState({ business: false, driver: false })
   const [isReviewed, setIsReviewed] = useState(false)
-  const [openOrderCreating, setOpenOrderCreating] = useState(true)
+  const [openOrderCreating, setOpenOrderCreating] = useState(false)
   const [openTaxModal, setOpenTaxModal] = useState<any>({ open: false, data: null })
   const { order, loading, businessData, error } = props.order
   const isTaxIncluded = order?.tax_type === 1
@@ -245,6 +245,12 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     }
   }, [loading])
 
+  useEffect(() => {
+    AsyncStorage.getItem('business-address', (err, result) => {
+      if (result !== null) setOpenOrderCreating(true)
+    })
+  }, [])
+
   return (
     <OrderDetailsContainer keyboardShouldPersistTaps='handled'>
       {order && order?.id && !error && !loading && (

package/src/navigators/HomeNavigator.tsx

@@ -21,7 +21,6 @@ import HelpOrder from '../pages/HelpOrder'
 import HelpGuide from '../pages/HelpGuide'
 import HelpAccountAndPayment from '../pages/HelpAccountAndPayment'
 import Splash from '../pages/Splash';
-
 const Stack = createStackNavigator();
 
 const HomeNavigator = (e : any) => {

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

@@ -66,14 +66,22 @@ const ChatUI = (props: MessagesParams) => {
   const [, t] = useLanguage();
   const [, { showToast }] = useToast();
   const theme = useTheme();
+  const [messageList, setMessageList] = useState<any>([])
 
-  const quickMessageList = [
+  const storeMessageList: any = [
     { key: 'store_message_1', text: t('STORE_MESSAGE_1', 'store_message_1') },
     { key: 'store_message_2', text: t('STORE_MESSAGE_2', 'store_message_2') },
     { key: 'store_message_3', text: t('STORE_MESSAGE_3', 'store_message_3') },
     { key: 'store_message_4', text: t('STORE_MESSAGE_4', 'store_message_4') }
   ]
 
+  const driverMessageList: any = [
+    { key: 'driver_message_1', text: t('DRIVER_MESSAGE_1', 'driver_message_1') },
+    { key: 'driver_message_2', text: t('DRIVER_MESSAGE_2', 'driver_message_2') },
+    { key: 'driver_message_3', text: t('DRIVER_MESSAGE_3', 'driver_message_3') },
+    { key: 'driver_message_4', text: t('DRIVER_MESSAGE_4', 'driver_message_4') }
+  ]
+
   const handleClickQuickMessage = (text: string) => {
     setMessage && setMessage(`${message}${text}`)
   }
@@ -464,6 +472,12 @@ const ChatUI = (props: MessagesParams) => {
     );
   };
 
+  useEffect(() => {
+    if (user.level === 2) setMessageList(storeMessageList)
+    else if (user.level === 4) setMessageList(driverMessageList)
+    else setMessageList([])
+  }, [user])
+
   useEffect(() => {
     let newMessages: Array<any> = [];
     const console = (
@@ -754,21 +768,22 @@ const ChatUI = (props: MessagesParams) => {
         horizontal
         showsHorizontalScrollIndicator={false}
       >
-        {quickMessageList.map((quickMessage, i) => (
-          <OButton
-            key={i}
-            text={quickMessage.text}
-            bgColor='#E9ECEF'
-            borderColor='#E9ECEF'
-            imgRightSrc={null}
-            textStyle={{
-              fontSize: 11,
-              lineHeight: 16,
-              color: '#414954'
-            }}
-            style={{ ...styles.editButton }}
-            onClick={() => handleClickQuickMessage(quickMessage.text)}
-          />
+        {messageList.map((quickMessage: any, i: number) => (
+          <React.Fragment key={i}>
+            <OButton
+              text={quickMessage.text}
+              bgColor='#E9ECEF'
+              borderColor='#E9ECEF'
+              imgRightSrc={null}
+              textStyle={{
+                fontSize: 11,
+                lineHeight: 16,
+                color: '#414954'
+              }}
+              style={{ ...styles.editButton }}
+              onClick={() => handleClickQuickMessage(quickMessage.text)}
+            />
+          </React.Fragment>
         ))}
       </QuickMessageContainer>
     </View>

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

@@ -43,7 +43,7 @@ const LastOrdersUI = (props: LastOrdersParams) => {
   })
 
   const goToOrders = useCallback((order) => {
-    navigation.navigate('BottomTab', { screen: 'MyOrders' });
+    navigation.navigate('OrderDetails', { orderId: order.uuid });
   }, [])
 
   return (

package/themes/original/index.tsx

@@ -15,6 +15,8 @@ import { MomentOption } from './src/components/MomentOption';
 import { OrdersOption } from './src/components/OrdersOption';
 import { OrderDetails } from './src/components/OrderDetails';
 import { OrderProgress } from './src/components/OrderProgress';
+import { BusinessPreorder } from './src/components/BusinessPreorder';
+import { BusinessMenuList } from './src/components/BusinessMenuList';
 import { UserProfileForm } from './src/components/UserProfileForm';
 import { ReviewOrder } from './src/components/ReviewOrder';
 import { UserProfile } from './src/components/UserProfile';
@@ -69,8 +71,10 @@ export {
 	OrdersOption,
 	OrderDetails,
 	OrderProgress,
+	BusinessPreorder,
 	UserProfileForm,
 	ReviewOrder,
+	BusinessMenuList,
 	UserProfile,
 	Help,
 	HelpAccountAndPayment,

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

@@ -231,4 +231,4 @@ const styles = StyleSheet.create({
 		zIndex: 100,
 		left: 40
 	},
-});
+});

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

@@ -25,7 +25,7 @@ import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome5';
 import FastImage from 'react-native-fast-image'
 
 export const BusinessControllerUI = (props: BusinessControllerParams) => {
-	const { business, handleClick } = props;
+	const { business, handleClick, navigation } = props;
 	const [{ parsePrice, parseDistance, parseNumber, optimizeImage }] =
 		useUtils();
 	const [orderState] = useOrder();
@@ -98,8 +98,15 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 		return _types.join(', ');
 	};
 
+	const handleBusinessClick = (selectedBusiness: any) => {
+		if (business?.open) handleClick && handleClick(selectedBusiness)
+		else {
+			navigation.navigate('BusinessPreorder', { business: selectedBusiness, handleBusinessClick: handleClick })
+		}
+	}
+
 	return (
-		<Card activeOpacity={1} onPress={() => handleClick(business)}>
+		<Card activeOpacity={1} onPress={() => handleBusinessClick(business)}>
 			<BusinessHero>
 				<FastImage
 					style={{ height: 120 }}

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

@@ -0,0 +1,132 @@
+import React, { useState } from 'react'
+import { useLanguage, BusinessMenuListing } from 'ordering-components/native'
+import { OModal, OText } from '../shared'
+import { BusinessMenuListParams } from '../../types'
+import { View, StyleSheet, TouchableOpacity, Text } from 'react-native'
+import { useTheme } from 'styled-components/native'
+import IconAntDesign from 'react-native-vector-icons/AntDesign'
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'
+import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder'
+import { MenuListWrapper, DropOption } from './styles'
+
+const BusinessMenuListUI = (props: BusinessMenuListParams) => {
+  const {
+    menu,
+    businessMenuList,
+    setMenu
+  } = props
+
+  const [, t] = useLanguage()
+  const theme = useTheme()
+  const [isShowMenuList, setIsShowMenuList] = useState(false)
+
+  const styles = StyleSheet.create({
+    selectOption: {
+      backgroundColor: theme.colors.backgroundGray100,
+      borderRadius: 7.6,
+      paddingVertical: 10,
+      paddingHorizontal: 14,
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      height: 44
+    }
+	})
+
+  const handleClickMenu = (option: any) => {
+    setMenu(option)
+    setIsShowMenuList(false)
+  }
+
+  return (
+    <>
+      {businessMenuList.loading ? (
+        <Placeholder Animation={Fade}>
+          <View>
+            <PlaceholderLine height={44}/>
+          </View>
+        </Placeholder>
+      ) : (
+        <TouchableOpacity onPress={() => setIsShowMenuList(true)}>
+          <View style={styles.selectOption}>
+            <OText
+              size={14}
+              color={theme.colors.disabled}
+              style={{
+                lineHeight: 24,
+                flex: 1
+              }}
+              numberOfLines={1}
+              ellipsizeMode="tail"
+            >
+              {menu?.name || t('MENU_NAME', 'Menu name')}
+            </OText>
+            <IconAntDesign
+              name='down'
+              color={theme.colors.textThird}
+              size={16}
+            />
+          </View>
+        </TouchableOpacity>
+      )}
+
+      <OModal
+        open={isShowMenuList}
+        onClose={() => setIsShowMenuList(false)}
+        customClose
+        entireModal
+      >
+        <MenuListWrapper>
+          <TouchableOpacity onPress={() => setIsShowMenuList(false)} style={{ marginBottom: 12 }}>
+            <IconAntDesign
+              name='close'
+              color={theme.colors.textThird}
+              size={24}
+            />
+          </TouchableOpacity>
+          {businessMenuList?.menus && businessMenuList?.menus.length > 0 && businessMenuList.menus.map((option: any, index: number) => (
+            <TouchableOpacity
+              key={index}
+              onPress={() => handleClickMenu(option)}
+            >
+              <DropOption
+                selected={option.id === menu.id}
+              >
+                <View style={{ marginRight: 10 }}>
+                  {option.id === menu.id ? (
+                    <MaterialCommunityIcons
+                      name='radiobox-marked'
+                      size={24}
+                      color={theme.colors.primary}
+                    />
+                  ) : (
+                    <MaterialCommunityIcons
+                      name='radiobox-blank'
+                      size={24}
+                      color={theme.colors.arrowColor}
+                    />
+                  )}
+                </View>
+                <Text
+                  numberOfLines={1}
+                  ellipsizeMode="tail"
+                  style={{flex: 1}}
+                >{option.name}</Text>
+              </DropOption>
+            </TouchableOpacity>
+          ))}
+        </MenuListWrapper>
+      </OModal>
+    </>
+
+  )
+}
+
+export const BusinessMenuList = (props: any) => {
+  const businessMenuListProps = {
+    ...props,
+    UIComponent: BusinessMenuListUI,
+  };
+
+  return <BusinessMenuListing {...businessMenuListProps} />;
+};

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

@@ -0,0 +1,15 @@
+import styled from 'styled-components/native'
+
+export const MenuListWrapper = styled.ScrollView`
+  padding: 20px 40px 30px 40px;
+`
+
+export const DropOption = styled.View`
+  padding: 10px;
+  margin-bottom: 5px;
+  font-size: 16px;
+  border-bottom-width: 1px;
+  border-bottom-color: ${(props: any) => props.theme.colors.lightGray};
+  flex-direction: row;
+  align-items: center;
+`

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

@@ -0,0 +1,474 @@
+import React, { useState, useEffect } from 'react'
+import { TouchableOpacity, StyleSheet, View, Text } from 'react-native'
+import { useLanguage, useUtils, useConfig, useOrder, MomentOption } from 'ordering-components/native'
+import { OButton, OModal, OText } from '../shared'
+import { useTheme } from 'styled-components/native'
+import IconAntDesign from 'react-native-vector-icons/AntDesign'
+import FastImage from 'react-native-fast-image'
+import CalendarStrip from 'react-native-calendar-strip'
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'
+import { BusinessMenuList } from '../BusinessMenuList'
+import Spinner from 'react-native-loading-spinner-overlay'
+import { BusinessPreorderParams } from '../../types'
+import moment from 'moment'
+import {
+  PreOrderContainer,
+  BusinessInfoWrapper,
+  PreorderTypeWrapper,
+  MenuWrapper,
+  OrderTimeWrapper,
+  TimeListWrapper,
+  TimeContentWrapper,
+  TimeItem,
+  PreorderTypeListWrapper,
+  DropOption
+} from './styles'
+
+const BusinessPreorderUI = (props: BusinessPreorderParams) => {
+  const {
+    goToBack,
+    business,
+    datesList,
+    hoursList,
+    dateSelected,
+    timeSelected,
+    handleBusinessClick,
+    handleChangeDate,
+    handleChangeTime
+  } = props
+
+  const theme = useTheme()
+  const [, t] = useLanguage()
+  const [{ optimizeImage, parseTime }] = useUtils()
+  const [{ configs }] = useConfig()
+  const [orderState] = useOrder()
+  const [selectedPreorderType, setSelectedPreorderType] = useState({ key: 'business_hours', name: t('BUSINESS_HOURS', 'Business hours') })
+  const [isPreorderTypeList, setIsPreorderTypeList] = useState(false)
+  const [menu, setMenu] = useState({})
+  const [timeList, setTimeList] = useState<any>([])
+  const [selectDate, setSelectedDate] = useState<any>(null)
+  const [datesWhitelist, setDateWhitelist] = useState<any>([{start: null, end: null}])
+
+  const styles = StyleSheet.create({
+		businessLogo: {
+			backgroundColor: 'white',
+			width: 60,
+			height: 60,
+			borderRadius: 7.6,
+			justifyContent: 'center',
+			alignItems: 'center',
+			shadowColor: '#000000',
+			shadowOffset: { width: 0, height: 1 },
+			shadowOpacity: 0.1,
+			shadowRadius: 1,
+			elevation: 2
+		},
+    selectOption: {
+      backgroundColor: theme.colors.backgroundGray100,
+      borderRadius: 7.6,
+      paddingVertical: 10,
+      paddingHorizontal: 14,
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      height: 44
+    },
+    calendar: {
+      paddingBottom: 15,
+      borderBottomWidth: 1,
+      borderColor: theme.colors.backgroundGray200,
+      height: 90
+    },
+    calendarHeaderContainer: {
+      flex: 1,
+      justifyContent: 'flex-start',
+      textAlign: 'left',
+      marginBottom: 17,
+      borderBottomWidth: 1,
+      borderColor: theme.colors.backgroundGray200
+    },
+    calendarHeader: {
+      color: '#344050',
+      alignSelf: 'flex-start',
+      fontSize: 14,
+      fontWeight: '400'
+    },
+    dateNumber: {
+      color: '#B1BCCC',
+      fontSize: 16,
+      fontWeight: '500'
+    },
+    dateName: {
+      color: '#B1BCCC',
+      fontSize: 12,
+      textTransform: 'capitalize'
+    },
+    highlightDateName: {
+      color: '#344050',
+      fontSize: 12,
+      textTransform: 'capitalize'
+    },
+    highlightDateNumber: {
+      color: '#344050',
+      fontSize: 16,
+      textTransform: 'capitalize'
+    },
+    disabledDateName: {
+      color: '#B1BCCC',
+      fontSize: 10,
+      textTransform: 'capitalize',
+      opacity: 1
+    },
+    disabledDateNumber: {
+      color: '#B1BCCC',
+      fontSize: 14,
+      fontWeight: '500'
+    }
+	})
+
+  const preorderTypeList = [
+    { key: 'business_menu', name: t('BUSINESS_MENU', 'Business menu') },
+    { key: 'business_hours', name: t('BUSINESS_HOURS', 'Business hours') }
+  ]
+
+  const handleClickPreorderType = (option: any) => {
+    setSelectedPreorderType(option)
+    setIsPreorderTypeList(false)
+  }
+
+  const getTimes = (curdate: any, menu: any) => {
+    const date = new Date()
+    var dateSeleted = new Date(curdate)
+    var times = []
+    for (var k = 0; k < menu.schedule[dateSeleted.getDay()].lapses.length; k++) {
+      var open = {
+        hour: menu.schedule[dateSeleted.getDay()].lapses[k].open.hour,
+        minute: menu.schedule[dateSeleted.getDay()].lapses[k].open.minute
+      }
+      var close = {
+        hour: menu.schedule[dateSeleted.getDay()].lapses[k].close.hour,
+        minute: menu.schedule[dateSeleted.getDay()].lapses[k].close.minute
+      }
+      for (var i = open.hour; i <= close.hour; i++) {
+        if (date.getDate() !== dateSeleted.getDate() || i >= date.getHours()) {
+          let hour = ''
+          let meridian = ''
+          if (configs?.format_time?.value === '12') {
+            if (i === 0) {
+              hour = '12'
+              meridian = ' ' + t('AM', 'AM')
+            } else if (i > 0 && i < 12) {
+              hour = (i < 10 ? '0' + i : i)
+              meridian = ' ' + t('AM', 'AM')
+            } else if (i === 12) {
+              hour = '12'
+              meridian = ' ' + t('PM', 'PM')
+            } else {
+              hour = ((i - 12 < 10) ? '0' + (i - 12) : `${(i - 12)}`)
+              meridian = ' ' + t('PM', 'PM')
+            }
+          } else {
+            hour = i < 10 ? '0' + i : i
+          }
+          for (let j = (i === open.hour ? open.minute : 0); j <= (i === close.hour ? close.minute : 59); j += 15) {
+            if (i !== date.getHours() || j >= date.getMinutes() || date.getDate() !== dateSeleted.getDate()) {
+              times.push({
+                text: hour + ':' + (j < 10 ? '0' + j : j) + meridian,
+                value: (i < 10 ? '0' + i : i) + ':' + (j < 10 ? '0' + j : j)
+              })
+            }
+          }
+        }
+      }
+    }
+    return times
+  }
+
+  const onSelectDate = (val: any) => {
+    setSelectedDate(val)
+    if (handleChangeDate) handleChangeDate(moment(val).format('YYYY-MM-DD'))
+  }
+
+  const LeftSelector = () => {
+    return (
+      <View style={{height: '100%', justifyContent: 'flex-end'}}>
+        <IconAntDesign
+          name='caretleft'
+          color={theme.colors.textNormal}
+          size={16}
+        />
+      </View>
+    )
+  }
+
+  const RightSelector = () => {
+    return (
+      <View style={{height: '100%', justifyContent: 'flex-end'}}>
+        <IconAntDesign
+          name='caretright'
+          color={theme.colors.textNormal}
+          size={16}
+        />
+      </View>
+    )
+  }
+
+  useEffect(() => {
+    if (datesList?.length > 0) {
+      const _datesList = datesList.slice(0, Number(configs?.max_days_preorder?.value || 6))
+      const minDateParts = _datesList[0].split('-')
+      const maxDateParts = _datesList[_datesList.length - 1].split('-')
+      const _minDate = new Date(minDateParts[0], minDateParts[1] - 1, minDateParts[2])
+      const _maxDate = new Date(maxDateParts[0], maxDateParts[1] - 1, maxDateParts[2])
+      setDateWhitelist([{ start: _minDate, end: _maxDate }])
+    }
+  }, [datesList])
+
+  const handleClickBusiness = () => {
+    handleBusinessClick && handleBusinessClick(business)
+  }
+
+  useEffect(() => {
+    if (hoursList.length === 0) return
+    if (Object.keys(menu).length > 0) {
+      const _times: any = getTimes(selectDate, menu)
+      setTimeList(_times)
+    } else {
+      const _timeLists = hoursList.map((hour: any) => {
+        return {
+          value: hour.startTime,
+          text: configs?.format_time?.value === '12' ? (
+            hour.startTime.includes('12')
+              ? `${hour.startTime}PM`
+              : parseTime(moment(hour.startTime, 'HH:mm'), { outputFormat: 'hh:mma' })
+          ) : (
+            parseTime(moment(hour.startTime, 'HH:mm'), { outputFormat: 'HH:mm' })
+          )
+        }
+      })
+      setTimeList(_timeLists)
+    }
+  }, [selectDate, hoursList, menu])
+
+  useEffect(() => {
+    if (selectedPreorderType.key === 'business_hours' && Object.keys(menu).length > 0) setMenu({})
+  }, [selectedPreorderType])
+
+  useEffect(() => {
+    if (dateSelected) {
+      const dateParts = dateSelected.split('-')
+      const _dateSelected = new Date(dateParts[0], dateParts[1] - 1, dateParts[2])
+      setSelectedDate(_dateSelected)
+    }
+  }, [dateSelected])
+
+  return (
+    <>
+      <PreOrderContainer>
+        <TouchableOpacity onPress={() => goToBack && goToBack()} style={{ marginBottom: 12 }}>
+          <IconAntDesign
+            name='close'
+            color={theme.colors.textThird}
+            size={24}
+          />
+        </TouchableOpacity>
+        <BusinessInfoWrapper>
+          <OText
+            size={20}
+            style={{
+              fontWeight: '600'
+            }}
+          >{t('PREORDER', 'Preorder')}</OText>
+          <View style={styles.businessLogo}>
+            <FastImage
+              style={{ width: 59, height: 59 }}
+              source={{
+                  uri: optimizeImage(business?.logo, 'h_60,c_limit'),
+                  priority: FastImage.priority.normal,
+              }}
+              resizeMode={FastImage.resizeMode.cover}
+            />
+          </View>
+        </BusinessInfoWrapper>
+        <PreorderTypeWrapper>
+          <OText
+            size={16}
+            style={{
+              fontWeight: '600',
+              lineHeight: 24,
+              marginBottom: 12
+            }}
+          >
+            {t('PREORDER_TYPE', 'Preorder type')}
+          </OText>
+          <TouchableOpacity onPress={() => setIsPreorderTypeList(true)}>
+            <View style={styles.selectOption}>
+              <OText
+                size={14}
+                color={theme.colors.disabled}
+                style={{
+                  lineHeight: 24
+                }}
+              >
+                {selectedPreorderType.name}
+              </OText>
+              <IconAntDesign
+                name='down'
+                color={theme.colors.textThird}
+                size={16}
+              />
+            </View>
+          </TouchableOpacity>
+        </PreorderTypeWrapper>
+        {selectedPreorderType?.key === 'business_menu' && (
+          <MenuWrapper>
+            <OText
+              size={16}
+              style={{
+                fontWeight: '600',
+                lineHeight: 24,
+                marginBottom: 12
+              }}
+            >
+              {t('MENU', 'Menu')}
+            </OText>
+            <BusinessMenuList
+              businessId={business.id}
+              setMenu={setMenu}
+              menu={menu}
+            />
+          </MenuWrapper> 
+        )}
+        <OrderTimeWrapper>
+          <OText
+            size={16}
+            style={{
+              fontWeight: '600',
+              lineHeight: 24
+            }}
+          >
+            {t('ORDER_TIME', 'Order time')}
+          </OText>
+          <View style={{ flex: 1 }}>
+            {selectDate && datesWhitelist[0].start !== null && (
+              <CalendarStrip
+                scrollable
+                style={styles.calendar}
+                calendarHeaderContainerStyle={styles.calendarHeaderContainer}
+                calendarHeaderStyle={styles.calendarHeader}
+                dateNumberStyle={styles.dateNumber}
+                dateNameStyle={styles.dateName}
+                iconContainer={{flex: 0.1}}
+                highlightDateNameStyle={styles.highlightDateName}
+                highlightDateNumberStyle={styles.highlightDateNumber}
+                calendarHeaderFormat='MMMM, YYYY'
+                iconStyle={{borderWidth: 1}}
+                selectedDate={selectDate}
+                datesWhitelist={datesWhitelist}
+                disabledDateNameStyle={styles.disabledDateName}
+                disabledDateNumberStyle={styles.disabledDateNumber}
+                disabledDateOpacity={0.6}
+                onDateSelected={(date) => onSelectDate(date)}
+                leftSelector={<LeftSelector />}
+                rightSelector={<RightSelector />}
+              />
+            )}
+          </View>
+          <TimeListWrapper nestedScrollEnabled={true}>
+            <TimeContentWrapper>
+              {timeList.map((time: any, i: number) => (
+                <TouchableOpacity key={i} onPress={() => handleChangeTime(time.value)}>
+                  <TimeItem active={timeSelected === time.value}>
+                    <OText
+                      size={14}
+                      color={timeSelected === time.value ? theme.colors.primary: theme.colors.textNormal}
+                      style={{
+                        lineHeight: 24
+                      }}
+                    >{time.text}</OText>
+                  </TimeItem>
+                </TouchableOpacity>
+              ))}
+              {timeList.length % 3 === 2 && (
+                <TimeItem style={{backgroundColor: 'transparent'}}/>
+              )}
+            </TimeContentWrapper>
+          </TimeListWrapper>
+        </OrderTimeWrapper>
+        <OButton
+          text={t('GO_TO_MENU', 'Go to menu')}
+          textStyle={{color: 'white'}}
+          style={{borderRadius: 7.6, marginBottom: 50, marginTop: 30}}
+          onClick={() => handleClickBusiness()}
+        />
+      </PreOrderContainer>
+      <Spinner visible={orderState.loading} />
+      <OModal
+        open={isPreorderTypeList}
+        onClose={() => setIsPreorderTypeList(false)}
+        customClose
+        entireModal
+      >
+        <PreorderTypeListWrapper>
+          <TouchableOpacity onPress={() => setIsPreorderTypeList(false)} style={{ marginBottom: 12 }}>
+            <IconAntDesign
+              name='close'
+              color={theme.colors.textThird}
+              size={24}
+            />
+          </TouchableOpacity>
+          {preorderTypeList?.map((option: any, index: number) => (
+            <TouchableOpacity
+              key={index}
+              onPress={() => handleClickPreorderType(option)}
+            >
+              <DropOption
+                numberOfLines={1}
+                selected={option.key === selectedPreorderType.key}
+              >
+                <View style={{ marginRight: 10 }}>
+                  {option.key === selectedPreorderType.key ? (
+                    <MaterialCommunityIcons
+                      name='radiobox-marked'
+                      size={24}
+                      color={theme.colors.primary}
+                    />
+                  ) : (
+                    <MaterialCommunityIcons
+                      name='radiobox-blank'
+                      size={24}
+                      color={theme.colors.arrowColor}
+                    />
+                  )}
+                </View>
+                <Text>{option.name}</Text>
+              </DropOption>
+            </TouchableOpacity>
+          ))}
+        </PreorderTypeListWrapper>
+      </OModal>
+    </>
+  )
+}
+
+export const BusinessPreorder = (props: any) => {
+  const [{ configs }] = useConfig()
+
+  const limitDays = parseInt(configs?.max_days_preorder?.value, 10)
+
+  const currentDate = new Date()
+  const time = limitDays > 1
+    ? currentDate.getTime() + ((limitDays - 1) * 24 * 60 * 60 * 1000)
+    : limitDays === 1 ? currentDate.getTime() : currentDate.getTime() + (6 * 24 * 60 * 60 * 1000)
+
+  currentDate.setTime(time)
+  currentDate.setHours(23)
+  currentDate.setMinutes(59)
+
+  const businessPreorderProps = {
+    ...props,
+    UIComponent: BusinessPreorderUI,
+    maxDate: currentDate
+  }
+  return <MomentOption {...businessPreorderProps} />
+}

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

@@ -0,0 +1,60 @@
+import styled, { css } from 'styled-components/native'
+
+export const PreOrderContainer = styled.ScrollView`
+  padding: 20px 40px 30px 40px;
+`
+
+export const BusinessInfoWrapper = styled.View`
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+`
+
+export const PreorderTypeWrapper = styled.View`
+  margin-top: 23px;
+`
+
+export const MenuWrapper = styled(PreorderTypeWrapper)``
+
+export const OrderTimeWrapper = styled.View`
+  margin-top: 34px;
+`
+
+export const TimeListWrapper = styled.ScrollView`
+  margin-top: 30px;
+  max-height: 160px;
+`
+
+export const TimeContentWrapper = styled.View`
+  flex: 1;
+  flex-wrap: wrap;
+  flex-direction: row;
+  justify-content: space-between;
+`
+
+export const TimeItem = styled.View`
+  width: 86px;
+  height: 34px;
+  background: #E9ECEF;
+  border-radius: 7.6px;
+  justify-content: center;
+  align-items: center;
+  margin: 10px 0px;
+  ${({ active }: any) => active && css`
+    background: #F5F9FF;
+  `}
+`
+
+export const PreorderTypeListWrapper = styled.ScrollView`
+  padding: 20px 40px 30px 40px;
+`
+
+export const DropOption = styled.View`
+  padding: 10px;
+  margin-bottom: 5px;
+  font-size: 16px;
+  border-bottom-width: 1px;
+  border-bottom-color: ${(props: any) => props.theme.colors.lightGray};
+  flex-direction: row;
+  align-items: center;
+`

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

@@ -263,7 +263,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 				</FeaturedWrapper>
 			)}
 			<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100 }} />
-			<HighestRatedBusinesses onBusinessClick={handleBusinessClick} />
+			<HighestRatedBusinesses onBusinessClick={handleBusinessClick} navigation={navigation} />
 			<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100 }} />
 			<ListWrapper>
 				<BusinessTypeFilter
@@ -287,6 +287,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 							business={business}
 							handleCustomClick={handleBusinessClick}
 							orderType={orderState?.options?.type}
+							navigation={navigation}
 						/>
 					)
 				)}

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

@@ -17,7 +17,8 @@ import {
 const HighestRatedBusinessesUI = (props: HighestRatedBusinessesParams) => {
   const {
     businessesList,
-    onBusinessClick
+    onBusinessClick,
+    navigation
   } = props;
 
   const [, t] = useLanguage()
@@ -104,6 +105,7 @@ const HighestRatedBusinessesUI = (props: HighestRatedBusinessesParams) => {
                         business={business}
                         handleCustomClick={onBusinessClick}
                         orderType={orderState?.options?.type}
+                        navigation={navigation}
                       />
                     </View>
                   )

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

@@ -132,6 +132,7 @@ export interface BusinessesListingParams {
 export interface HighestRatedBusinessesParams {
 	businessesList: { businesses: Array<any>, loading: boolean, error: null | string };
 	onBusinessClick?: void;
+	navigation? :any;
 }
 export interface BusinessTypeFilterParams {
 	businessTypes?: Array<any>;
@@ -149,7 +150,8 @@ export interface BusinessControllerParams {
 	handleClick?: any;
 	isBusinessOpen?: boolean;
 	businessWillCloseSoonMinutes?: number
-	isBusinessClose?: number
+	isBusinessClose?: number,
+	navigation?: any
 }
 export interface BusinessProductsListingParams {
 	navigation?: any;
@@ -379,6 +381,25 @@ export interface MomentOptionParams {
 	handleChangeDate: (value: any) => {};
 	handleChangeTime: (value: any) => {};
 }
+export interface BusinessPreorderParams {
+	navigation?: any;
+	datesList: Array<any>;
+	hoursList: Array<any>;
+	dateSelected?: any;
+	timeSelected?: any;
+	isAsap?: boolean;
+	handleAsap?: () => {};
+	handleChangeDate: (value: any) => {};
+	handleChangeTime: (value: any) => {};
+	goToBack: any;
+	business: any;
+	handleBusinessClick: (value: any) => {};
+}
+export interface BusinessMenuListParams {
+	menu: any;
+	businessMenuList: any;
+	setMenu: (value: any) => {};
+}
 export interface OrderTypeSelectParams {
 	navigation?: any;
 	handleChangeOrderType: (value: any) => {};

package/themes/single-business/src/components/Cart/index.tsx

@@ -8,7 +8,7 @@ import {
   useValidationFields,
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
-import { ScrollView, View, useWindowDimensions, ActivityIndicator } from 'react-native';
+import { ScrollView, View, useWindowDimensions, ActivityIndicator, StyleSheet } from 'react-native';
 import {
   CheckoutAction,
   OSBill,
@@ -20,7 +20,8 @@ import {
   BIHeader,
   BIInfo,
   BIContentInfo,
-  BITotal
+  BITotal,
+  TopHeader
 } from './styles';
 
 import { ProductItemAccordion } from '../ProductItemAccordion';
@@ -187,6 +188,15 @@ const CartUI = (props: any) => {
     )
   }
 
+  const styles = StyleSheet.create({
+    headerItem: {
+      overflow: 'hidden',
+      backgroundColor: theme.colors.clear,
+      width: 35,
+      marginVertical: 18,
+    },
+  })
+
   return (
     cart?.products?.length > 0 ? (
       <ScrollView
@@ -307,32 +317,22 @@ const CartUI = (props: any) => {
                     </OSTable>
                   )}
 
-                  <OSTotal>
-                    <OSTable style={{ marginTop: 15 }}>
-                      <OText size={14} lineHeight={21} weight={'600'}>
-                        {t('TOTAL', 'Total')}
-                      </OText>
-                      <OText size={14} lineHeight={21} weight={'600'}>
-                        {cart?.total >= 1 && parsePrice(cart?.total)}
-                      </OText>
-                    </OSTable>
-                  </OSTotal>
                   {cart?.status !== 2 && (
                     <OSTable>
-                      <View style={{ width: '100%', marginTop: 20 }}>
-                        <OText size={12}>{t('COMMENTS', 'Comments')}</OText>
+                      <View style={{ width: '100%', marginTop: 0 }}>
+                        <OText size={14} style={{ marginBottom: 10 }}>{t('COMMENTS', 'Comments')}</OText>
                         <View style={{ flex: 1, width: '100%' }}>
                           <OInput
                             value={cart?.comment}
                             placeholder={t('SPECIAL_COMMENTS', 'Special Comments')}
                             onChange={(value: string) => handleChangeComment(value)}
                             style={{
+                              borderColor: theme.colors.border,
+                              borderRadius: 10,
+                              marginBottom: 20,
+                              height: 104,
+                              maxHeight: 104,
                               alignItems: 'flex-start',
-                              width: '100%',
-                              height: 100,
-                              borderColor: theme.colors.textSecondary,
-                              paddingRight: 50,
-                              marginTop: 10
                             }}
                             multiline
                           />
@@ -349,6 +349,17 @@ const CartUI = (props: any) => {
                       </View>
                     </OSTable>
                   )}
+
+                  <OSTotal>
+                    <OSTable style={{ marginTop: 15 }}>
+                      <OText size={14} lineHeight={21} weight={'600'}>
+                        {t('TOTAL', 'Total')}
+                      </OText>
+                      <OText size={14} lineHeight={21} weight={'600'}>
+                        {cart?.total >= 1 && parsePrice(cart?.total)}
+                      </OText>
+                    </OSTable>
+                  </OSTotal>
                 </OSBill>
               )}
             </View>
@@ -427,7 +438,24 @@ const CartUI = (props: any) => {
             onSave={handlerProductAction}
             onClose={() => setModalIsOpen(false)}
           />
+        </OModal>
 
+        <OModal
+          open={openTaxModal.open}
+          onClose={() => setOpenTaxModal({ open: false, data: null })}
+          entireModal
+          customClose
+        >
+          <>
+            <TopHeader>
+              <TouchableOpacity
+                style={styles.headerItem}
+                onPress={() => setOpenTaxModal({ open: false, data: null })}>
+                <OIcon src={theme.images.general.close} width={16} />
+              </TouchableOpacity>
+            </TopHeader>
+            <TaxInformation data={openTaxModal.data} products={cart?.products} />
+          </>
         </OModal>
       </ScrollView>
     ) : (
@@ -445,13 +473,6 @@ const CartUI = (props: any) => {
             image={theme.images.general.notFound}
           />
         </View>
-        <OModal
-          open={openTaxModal.open}
-          onClose={() => setOpenTaxModal({ open: false, data: null })}
-          entireModal
-        >
-          <TaxInformation data={openTaxModal.data} products={cart?.products} />
-        </OModal>
       </Container>
     )
   )

package/themes/single-business/src/components/Cart/styles.tsx

@@ -100,3 +100,12 @@ export const BITotal = styled.View`
   flex-direction: column;
   align-items: flex-end;
 `
+
+export const TopHeader = styled.View`
+  width: 100%;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  z-index: 1;
+  padding-horizontal: 40px;
+`

package/themes/single-business/src/components/TaxInformation/index.tsx

@@ -21,31 +21,36 @@ export const TaxInformation = (props: taxInformationParams) => {
   const isTax = typeof data?.rate === 'number'
   const TaxFeeString = isTax ? 'tax' : 'fee'
   const includedOnPriceString = data?.type === 1 ? `(${t('INCLUDED_ON_PRICE', 'Included on price')})` : `(${t('NOT_INCLUDED_ON_PRICE', 'Not included on price')})`
+  const productsWithTaxes = products
+    .filter((product: any) => isTax
+      ? (product.tax?.id ? product.tax?.id === data?.id: product.tax?.id === null && data?.id === null)
+      : (product.fee?.id ? product.fee?.id === data?.id : (product.fee?.id === null && data?.id === null))) ?? []
 
   return (
     <TaxInformationContainer>
-      <OText size={24} style={{ alignSelf: 'center', textAlign: 'center' }} mBottom={10}>
-        {`${data?.name ||
-          t('INHERIT_FROM_BUSINESS', 'Inherit from business')} (${typeof data?.rate === 'number' ? `${data?.rate}%` : `${parsePrice(data?.fixed ?? 0)} + ${data?.percentage}%`})`}
+      <OText size={18} style={{ alignSelf: 'flex-start', textAlign: 'left' }} mBottom={10}>
+        {`${data?.name ?? t('INHERIT_FROM_BUSINESS', 'Inherit from business')} (${typeof data?.rate === 'number' ? `${data?.rate}%` : `${parsePrice(data?.fixed ?? 0)} + ${data?.percentage}%`})`}
       </OText>
       {data?.description && (
-        <OText mBottom={10} size={18} style={{ alignSelf: 'center', textAlign: 'center' }}>
+        <OText mBottom={10} size={16} style={{ alignSelf: 'flex-start', textAlign: 'left' }}>
           {t('DESCRIPTION', 'Description')}: {data?.description} {data?.type && includedOnPriceString}
         </OText>
       )}
-      <OText>{t(`OTHER_PRODUCTS_WITH_THIS_${TaxFeeString.toUpperCase()}`, `Other products with this ${TaxFeeString}`)}:</OText>
-      <ProductContainer>
-        {
-          products.filter((product: any) => isTax ? (product.tax?.id ? product.tax?.id === data?.id : product.tax?.id === null && data?.id === null) : (product.fee?.id ? product.fee?.id === data?.id : (product.fee?.id === null && data?.id === null))).map(product => (
-            <SingleProductCard
-              key={product.id}
-              product={product}
-              isSoldOut={false}
-              businessId={product?.business_id}
-            />
-          ))
-        }
-      </ProductContainer>
+      {productsWithTaxes.length > 0 && (
+        <>
+          <OText>{`${t(`OTHER_PRODUCTS_WITH_THIS_${TaxFeeString.toUpperCase()}`, `Other products with this ${TaxFeeString}`)}:`}</OText>
+          <ProductContainer>
+            {productsWithTaxes.map(product => (
+              <SingleProductCard
+                key={product.id}
+                product={product}
+                isSoldOut={false}
+                businessId={product?.business_id}
+              />
+            ))}
+          </ProductContainer>
+        </>
+      )}
     </TaxInformationContainer>
   )
 }

package/themes/single-business/src/components/TaxInformation/styles.tsx

@@ -1,9 +1,10 @@
 import styled from 'styled-components/native'
 
 export const TaxInformationContainer = styled.ScrollView`
-  padding: 10px;
+  padding: 10px 40px;
 `
 
 export const ProductContainer = styled.View`
-  flex: 1
+  flex: 1;
+  margin-top: 10px;
 `

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

@@ -215,7 +215,7 @@ export interface SingleProductCardParams {
 	businessId: any,
 	product: any;
 	isSoldOut: boolean;
-	onProductClick: any;
+	onProductClick?: any;
 }
 export interface BusinessInformationParams {
 	navigation?: any,