ordering-ui-react-native 0.18.1 → 0.18.3

package/package.json

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

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

@@ -12,7 +12,7 @@ import Icon from 'react-native-vector-icons/FontAwesome5';
 import { useTheme } from 'styled-components/native';
 import { useLocation } from '../../hooks/useLocation';
 import { FloatingButton } from '../FloatingButton';
-import { showLocation } from 'react-native-map-link';
+import { Popup } from 'react-native-map-link';
 import { transformDistance } from '../../utils';
 
 export const DriverMap = (props: GoogleMapsParams) => {
@@ -48,6 +48,7 @@ export const DriverMap = (props: GoogleMapsParams) => {
   const [distancesFromTwoPlacesKm, setDistancesFromTwoPlacesKm] = useState(0);
   const [isMin, setIsMin] = useState(false);
   const [{ parseDate }] = useUtils();
+  const [popUp, setPopUp] = useState<boolean>(false);
   const mapErrors: any = {
     ERROR_NOT_FOUND_ADDRESS: "Sorry, we couldn't find an address",
     ERROR_MAX_LIMIT_LOCATION_TO: 'Sorry, You can only set the position to',
@@ -478,7 +479,7 @@ export const DriverMap = (props: GoogleMapsParams) => {
                 style={styles.arrowDistance}
               />
               <OText size={12} numberOfLines={3}>
-                {`${transformDistance(distancesFromTwoPlacesKm, distanceUnit)} ${t(distanceUnit.toUpperCase(), distanceUnit)}`} 
+                {`${transformDistance(distancesFromTwoPlacesKm, distanceUnit)} ${t(distanceUnit.toUpperCase(), distanceUnit)}`}
               </OText>
 
             </View>
@@ -501,7 +502,18 @@ export const DriverMap = (props: GoogleMapsParams) => {
             imgRightSrc=''
             textStyle={{ color: theme.colors.white }}
             style={styles.showButton}
-            onClick={() => showLocation({
+            onClick={() => setPopUp(true)}
+            text={t('SHOW_IN_OTHER_MAPS', 'Show in other maps')}
+          />
+          <Popup
+            isVisible={popUp}
+            onCancelPressed={() => setPopUp(false)}
+            onAppPressed={() => setPopUp(false)}
+            onBackButtonPressed={() => setPopUp(false)}
+            modalProps={{
+              animationIn: 'slideInUp'
+            }}
+            options={{
               latitude: destination.latitude,
               longitude: destination.longitude,
               sourceLatitude: userLocation.latitude,
@@ -510,8 +522,7 @@ export const DriverMap = (props: GoogleMapsParams) => {
               dialogTitle: t('SHOW_IN_OTHER_MAPS', 'Show in other maps'),
               dialogMessage: t('WHAT_APP_WOULD_YOU_USE', 'What app would you like to use?'),
               cancelText: t('CANCEL', 'Cancel'),
-            })}
-            text={t('SHOW_IN_OTHER_MAPS', 'Show in other maps')}
+            }}
           />
         </View>
         {showAcceptOrReject && (

package/themes/business/src/components/OrderDetails/OrderContentComponent.tsx

@@ -29,6 +29,10 @@ import { ReviewCustomer } from '../ReviewCustomer'
 
 import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons'
 
+import { DeviceOrientationMethods } from '../../../../../src/hooks/DeviceOrientation'
+
+const { useDeviceOrientation } = DeviceOrientationMethods
+
 interface OrderContent {
   order: any,
   logisticOrderStatus?: Array<number>,
@@ -39,13 +43,15 @@ interface OrderContent {
 export const OrderContentComponent = (props: OrderContent) => {
   const [, t] = useLanguage();
   const theme = useTheme()
-  const [{user}] = useSession()
-  console.log(user)
+  const [{ user }] = useSession()
   const { order, logisticOrderStatus, isOrderGroup, lastOrder } = props;
   const [{ parsePrice, parseNumber }] = useUtils();
   const [{ configs }] = useConfig();
+  const [orientationState] = useDeviceOrientation();
   const distanceUnit = configs?.distance_unit?.value
 
+  const WIDTH_SCREEN = orientationState?.dimensions?.width
+
   const [openReviewModal, setOpenReviewModal] = useState(false)
 
   const [isReadMore, setIsReadMore] = useState(false)
@@ -103,8 +109,8 @@ export const OrderContentComponent = (props: OrderContent) => {
   }
 
   const onTextLayout = useCallback((e: any) => {
-    setLengthMore(e.nativeEvent.lines.length >= 3); //to check the text is more than 2 lines or not
-  },[]);
+    setLengthMore((e.nativeEvent.lines.length == 2 && e.nativeEvent.lines[1].width > WIDTH_SCREEN * .76) || e.nativeEvent.lines.length > 2); //to check the text is more than 2 lines or not
+  }, []);
 
   return (
     <OrderContent isOrderGroup={isOrderGroup} lastOrder={lastOrder}>

package/themes/business/src/components/OrderDetails/OrderHeaderComponent.tsx

@@ -9,12 +9,15 @@ import {
 
 //Components
 import {
+  OIcon,
   OIconButton,
   OText,
 } from '../shared'
 
 import { useTheme } from 'styled-components/native';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet, TouchableOpacity, View } from 'react-native';
+import SimpleLineIcons from 'react-native-vector-icons/SimpleLineIcons'
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'
 
 import {
   useLanguage,
@@ -54,6 +57,19 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
       height: 40,
       padding: 10,
       alignItems: 'flex-end',
+      color: theme.colors.textGray,
+    },
+    btnBackArrow: {
+      borderWidth: 0,
+      width: 32,
+      height: 32,
+      tintColor: theme.colors.textGray,
+      backgroundColor: theme.colors.clear,
+      borderColor: theme.colors.clear,
+      shadowColor: theme.colors.clear,
+      paddingLeft: 0,
+      paddingRight: 0,
+      marginTop: 10
     },
   })
 
@@ -108,42 +124,30 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
     <>
       {!props.isCustomView && (
         <Header>
-          <OIconButton
-            icon={theme.images.general.arrow_left}
-            iconStyle={{ width: 20, height: 20 }}
-            borderColor={theme.colors.clear}
-            style={{ ...styles.icons, justifyContent: 'flex-end' }}
-            onClick={() => handleArrowBack()}
-          />
-
+          <TouchableOpacity onPress={() => handleArrowBack()} style={styles.btnBackArrow}>
+            <OIcon src={theme.images.general.arrow_left} color={theme.colors.textGray} />
+          </TouchableOpacity>
           {(!order?.isLogistic || (!logisticOrderStatus?.includes(order?.status) && !order?.order_group)) && (
             <Actions>
               {getOrderStatus(order?.status, t)?.value !==
                 t('PENDING', 'Pending') && (
                   <>
-                    <OIconButton
-                      icon={theme.images.general.copy}
-                      iconStyle={{
-                        width: 20,
-                        height: 25,
-                        top: 2,
-                        tintColor: theme.colors.backArrow,
-                      }}
-                      borderColor={theme.colors.clear}
-                      style={styles.icons}
-                      onClick={() => handleCopyClipboard?.()}
-                    />
-                    <OIconButton
-                      icon={theme.images.general.print}
-                      iconStyle={{
-                        width: 25,
-                        height: 22,
-                        tintColor: theme.colors.backArrow,
-                      }}
-                      borderColor={theme.colors.clear}
-                      style={styles.icons}
-                      onClick={() => handleViewSummaryOrder?.()}
-                    />
+                    <TouchableOpacity onPress={() => handleCopyClipboard?.()}>
+                      <MaterialCommunityIcons
+                        name='content-copy'
+                        color={theme.colors.textGray}
+                        size={20}
+                        style={styles.icons}
+                      />
+                    </TouchableOpacity>
+                    <TouchableOpacity onPress={() => handleViewSummaryOrder?.()}>
+                      <SimpleLineIcons
+                        name='printer'
+                        color={theme.colors.textGray}
+                        size={20}
+                        style={styles.icons}
+                      />
+                    </TouchableOpacity>
                   </>
                 )}
               <OIconButton
@@ -151,7 +155,7 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
                 iconStyle={{
                   width: 20,
                   height: 20,
-                  tintColor: theme.colors.backArrow,
+                  tintColor: theme.colors.textGray,
                 }}
                 borderColor={theme.colors.clear}
                 style={styles.icons}
@@ -163,7 +167,7 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
                 iconStyle={{
                   width: 20,
                   height: 20,
-                  tintColor: theme.colors.backArrow,
+                  tintColor: theme.colors.textGray,
                 }}
                 borderColor={theme.colors.clear}
                 style={styles.icons}
@@ -193,29 +197,22 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
                 {getOrderStatus(order?.status, t)?.value !==
                   t('PENDING', 'Pending') && (
                     <>
-                      <OIconButton
-                        icon={theme.images.general.copy}
-                        iconStyle={{
-                          width: 20,
-                          height: 25,
-                          top: 2,
-                          tintColor: theme.colors.backArrow,
-                        }}
-                        borderColor={theme.colors.clear}
-                        style={styles.icons}
-                        onClick={() => handleCopyClipboard?.()}
-                      />
-                      <OIconButton
-                        icon={theme.images.general.print}
-                        iconStyle={{
-                          width: 25,
-                          height: 22,
-                          tintColor: theme.colors.backArrow,
-                        }}
-                        borderColor={theme.colors.clear}
-                        style={styles.icons}
-                        onClick={() => handleViewSummaryOrder?.()}
-                      />
+                      <TouchableOpacity onPress={() => handleCopyClipboard?.()}>
+                        <MaterialCommunityIcons
+                          name='content-copy'
+                          color={theme.colors.textGray}
+                          size={20}
+                          style={styles.icons}
+                        />
+                      </TouchableOpacity>
+                      <TouchableOpacity onPress={() => handleViewSummaryOrder?.()}>
+                        <SimpleLineIcons
+                          name='printer'
+                          color={theme.colors.textGray}
+                          size={20}
+                          style={styles.icons}
+                        />
+                      </TouchableOpacity>
                     </>
                   )}
                 <OIconButton
@@ -223,7 +220,7 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
                   iconStyle={{
                     width: 20,
                     height: 20,
-                    tintColor: theme.colors.backArrow,
+                    tintColor: theme.colors.textGray,
                   }}
                   borderColor={theme.colors.clear}
                   style={styles.icons}
@@ -235,7 +232,7 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
                   iconStyle={{
                     width: 20,
                     height: 20,
-                    tintColor: theme.colors.backArrow,
+                    tintColor: theme.colors.textGray,
                   }}
                   borderColor={theme.colors.clear}
                   style={styles.icons}

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

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
 import { Chat } from '../Chat';
-import { StyleSheet, View, BackHandler } from 'react-native';
+import { StyleSheet, View, BackHandler, TouchableOpacity } from 'react-native';
 import {
   useLanguage,
   OrderDetails as OrderDetailsController,
@@ -9,7 +9,7 @@ import {
 } from 'ordering-components/native';
 import { useUtils } from 'ordering-components/native';
 
-import { OIcon, OIconButton, OText } from '../shared';
+import { OIcon, OText } from '../shared';
 import { OrderDetailsParams } from '../../types';
 import { USER_TYPE } from '../../config/constants';
 import { useTheme } from 'styled-components/native';
@@ -146,13 +146,6 @@ export const OrderMessageUI = (props: OrderDetailsParams) => {
       shadowRadius: 3.84,
       elevation: 3,
     },
-    cancelBtn: {
-      marginRight: 5,
-      zIndex: 10000,
-      height: 30,
-      width: 20,
-      justifyContent: 'flex-end',
-    },
     modalText: {
       fontFamily: 'Poppins',
       fontStyle: 'normal',
@@ -161,6 +154,18 @@ export const OrderMessageUI = (props: OrderDetailsParams) => {
       textAlign: 'center',
       zIndex: 10,
     },
+    btnBackArrow: {
+      borderWidth: 0,
+      width: 32,
+      height: 32,
+      tintColor: theme.colors.textGray,
+      backgroundColor: theme.colors.clear,
+      borderColor: theme.colors.clear,
+      shadowColor: theme.colors.clear,
+      paddingLeft: 0,
+      paddingRight: 0,
+      marginTop: 10
+    },
   });
 
   return (
@@ -260,13 +265,9 @@ export const OrderMessageUI = (props: OrderDetailsParams) => {
         <>
           <View style={styles.titleSection}>
             <View style={styles.titleGroups}>
-              <OIconButton
-                icon={theme.images.general.arrow_left}
-                iconStyle={{ width: 23, height: 23 }}
-                borderColor={theme.colors.clear}
-                style={styles.cancelBtn}
-                onClick={handleArrowBack}
-              />
+              <TouchableOpacity onPress={() => handleArrowBack()} style={styles.btnBackArrow}>
+                <OIcon src={theme.images.general.arrow_left} color={theme.colors.textGray} />
+              </TouchableOpacity>
 
               <OText size={16} style={styles.modalText} adjustsFontSizeToFit>
                 {`${t('INVOICE_ORDER_NO', 'Order No.')} ${order?.id}`}
@@ -292,7 +293,7 @@ export const OrderMessageUI = (props: OrderDetailsParams) => {
                 <OIcon
                   url={optimizeImage(
                     order?.customer?.photo ||
-                      theme?.images?.dummies?.customerPhoto,
+                    theme?.images?.dummies?.customerPhoto,
                     'h_300,c_limit',
                   )}
                   style={styles.titleIcons}

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useState, useRef } from 'react';
-import { View, Pressable, StyleSheet, ScrollView, RefreshControl, Platform } from 'react-native';
+import { View, Pressable, StyleSheet, ScrollView, RefreshControl, Platform, TouchableOpacity } from 'react-native';
 import { useLanguage, useUtils, useToast, OrderListGroups, useConfig } from 'ordering-components/native';
 import SelectDropdown from 'react-native-select-dropdown'
 import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
@@ -239,6 +239,19 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
       overflow: 'hidden',
       minHeight: 155
     },
+    btnBackArrow: {
+      borderWidth: 0,
+      width: 32,
+      height: 32,
+      tintColor: theme.colors.textGray,
+      backgroundColor: theme.colors.clear,
+      borderColor: theme.colors.clear,
+      shadowColor: theme.colors.clear,
+      paddingLeft: 0,
+      paddingRight: 0,
+      marginBottom: 30,
+      marginTop: 30
+    },
     rowStyle: {
       display: 'flex',
       borderBottomWidth: 0,
@@ -696,20 +709,9 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
           <ModalContainer
             nestedScrollEnabled={true}
           >
-            <OIconButton
-              icon={theme.images.general.arrow_left}
-              borderColor={theme.colors.clear}
-              iconColor={theme.colors.backArrow}
-              iconStyle={{ width: 20, height: 13 }}
-              style={{
-                maxWidth: 40,
-                height: 35,
-                justifyContent: 'flex-end',
-                marginBottom: 30,
-                marginTop: 30
-              }}
-              onClick={() => handleClose()}
-            />
+            <TouchableOpacity onPress={() => handleClose()} style={styles.btnBackArrow}>
+              <OIcon src={theme.images.general.arrow_left} color={theme.colors.textGray} />
+            </TouchableOpacity>
             {openSearchModal && (
               <SearchModalContent>
                 <ModalTitle>{t('SEARCH_ORDERS', 'Search orders')}</ModalTitle>

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

@@ -3,6 +3,10 @@ import { View, Animated, TouchableOpacity } from 'react-native';
 import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons';
 import { useUtils, useLanguage } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
+import { DeviceOrientationMethods } from '../../../../../src/hooks/DeviceOrientation'
+
+const { useDeviceOrientation } = DeviceOrientationMethods
+
 import {
   Accordion,
   AccordionSection,
@@ -34,6 +38,8 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
   const [, t] = useLanguage();
   const theme = useTheme();
   const [{ parsePrice }] = useUtils();
+  const [orientationState] = useDeviceOrientation();
+  const WIDTH_SCREEN = orientationState?.dimensions?.width
 
   const [isActive, setActiveState] = useState(false);
   const [isReadMore, setIsReadMore] = useState(false);
@@ -111,7 +117,7 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
   }, []);
 
   const onTextLayout = useCallback((e: any) => {
-    setLengthMore(e.nativeEvent.lines.length >= 3); //to check the text is more than 2 lines or not
+    setLengthMore((e.nativeEvent.lines.length == 2 && e.nativeEvent.lines[1].width > WIDTH_SCREEN * .76) || e.nativeEvent.lines.length > 2); //to check the text is more than 2 lines or not
   },[]);
 
   return (

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

@@ -86,6 +86,18 @@ const ReviewCustomerUI = (props: ReviewCustomerParams) => {
       marginBottom: 10,
       backgroundColor: theme.colors.lightGray
     },
+    btnBackArrow: {
+      borderWidth: 0,
+      width: 32,
+      height: 32,
+      tintColor: theme.colors.textGray,
+      backgroundColor: theme.colors.clear,
+      borderColor: theme.colors.clear,
+      shadowColor: theme.colors.clear,
+      paddingLeft: 0,
+      paddingRight: 0,
+      marginBottom: 20
+    },
     inputTextArea: {
       borderColor: theme.colors.lightGray,
       borderRadius: 8,
@@ -177,18 +189,9 @@ const ReviewCustomerUI = (props: ReviewCustomerParams) => {
       }}
     >
       <View>
-        <OIconButton
-          icon={theme.images.general.arrow_left}
-          borderColor={theme.colors.clear}
-          iconStyle={{ width: 20, height: 16 }}
-          style={{
-            maxWidth: 40,
-            height: 20,
-            justifyContent: 'flex-end',
-            marginBottom: 20,
-          }}
-          onClick={() => closeModal()}
-        />
+        <TouchableOpacity onPress={() => closeModal()} style={styles.btnBackArrow}>
+          <OIcon src={theme.images.general.arrow_left} color={theme.colors.textGray} />
+        </TouchableOpacity>
         <OText
           size={20}
           weight="600"

package/themes/business/src/components/shared/OModal.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Modal, StyleSheet, SafeAreaView, View } from 'react-native';
+import { Modal, StyleSheet, SafeAreaView, View, TouchableOpacity } from 'react-native';
 import Icon from 'react-native-vector-icons/Feather';
 import OIcon from './OIcon';
 import OText from './OText';
@@ -158,6 +158,18 @@ const OModal = (props: Props): React.ReactElement => {
       fontWeight: '600',
       textAlign: 'center',
     },
+    btnBackArrow: {
+      borderWidth: 0,
+      width: 32,
+      height: 32,
+      tintColor: theme.colors.textGray,
+      backgroundColor: theme.colors.clear,
+      borderColor: theme.colors.clear,
+      shadowColor: theme.colors.clear,
+      paddingLeft: 0,
+      paddingRight: 0,
+      marginTop: 10
+    },
   });
 
   return (
@@ -205,14 +217,9 @@ const OModal = (props: Props): React.ReactElement => {
             {!customClose && (
               <View style={styles.titleSection}>
                 <View style={styles.titleGroups}>
-                  <OIconButton
-                    icon={theme.images.general.arrow_left}
-                    iconStyle={{ width: 20, height: 20 }}
-                    borderColor={theme.colors.clear}
-                    style={styleCloseButton || styles.cancelBtn}
-                    onClick={onClose}
-                  />
-
+                  <TouchableOpacity onPress={() => onClose()} style={styles.btnBackArrow}>
+                    <OIcon src={theme.images.general.arrow_left} color={theme.colors.textGray} />
+                  </TouchableOpacity>
                   <OText
                     size={16}
                     style={styles.modalText}

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

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react'
 import { TouchableOpacity, StyleSheet, View, Dimensions, Platform } from 'react-native'
 import { useLanguage, useUtils, useConfig, useOrder, MomentOption } from 'ordering-components/native'
-import { OButton, OText } from '../shared'
+import { OButton, OIcon, OText } from '../shared'
 import { useTheme } from 'styled-components/native'
 import IconAntDesign from 'react-native-vector-icons/AntDesign'
 import FastImage from 'react-native-fast-image'
@@ -37,7 +37,10 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
     handleChangeDate,
     handleChangeTime,
     handleAsap,
-    isAsap
+    getActualSchedule,
+    isAsap,
+    cateringPreorder,
+    preorderLeadTime
   } = props
 
   const theme = useTheme()
@@ -52,6 +55,8 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
   const [datesWhitelist, setDateWhitelist] = useState<any>([{ start: null, end: null }])
   const [isEnabled, setIsEnabled] = useState(false)
   const { top } = useSafeAreaInsets()
+  const is12hours = configs?.dates_moment_format?.value?.includes('hh:mm')
+
   const showOrderTime = (selectedPreorderType === 1 && Object.keys(menu)?.length > 0) || selectedPreorderType === 0
   const isPreOrderSetting = configs?.preorder_status_enabled?.value === '1'
   const styles = StyleSheet.create({
@@ -252,10 +257,45 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
 
   useEffect(() => {
     if (selectDate === null) return
-    const selectedMenu = Object.keys(menu).length > 0 ? (menu?.use_business_schedule ? business : menu) : business
-    const _times = getTimes(selectDate, selectedMenu)
-    setTimeList(_times)
-  }, [selectDate, menu])
+    if (cateringPreorder) {
+      let _timeLists = []
+      const schedule = business && getActualSchedule()
+      if (!schedule && cateringPreorder && Object.keys(business)?.length > 0) {
+        return
+      }
+      _timeLists = hoursList
+        .filter(hour => ((Object.keys(business || {})?.length === 0) || schedule?.lapses?.some((lapse: any) =>
+          moment(dateSelected + ` ${hour.startTime}`) >= moment(dateSelected + ` ${lapse.open.hour}:${lapse.open.minute}`).add(preorderLeadTime, 'minutes') && moment(dateSelected + ` ${hour.endTime}`) <= moment(dateSelected + ` ${lapse.close.hour}:${lapse.close.minute}`))) &&
+          moment(dateSelected + ` ${hour.startTime}`) < moment(dateSelected + ` ${hour.endTime}`) &&
+          (moment().add(preorderLeadTime, 'minutes') < moment(dateSelected + ` ${hour.startTime}`) || !cateringPreorder))
+        .map(hour => {
+          return {
+            value: hour.startTime,
+            text: is12hours ? (
+              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' })
+            ),
+            endText: is12hours ? (
+              hour.endTime.includes('12')
+                ? `${hour.endTime}PM`
+                : parseTime(moment(hour.endTime, 'HH:mm'), { outputFormat: 'hh:mma' })
+            ) : (
+              parseTime(moment(hour.endTime, 'HH:mm'), { outputFormat: 'HH:mm' })
+            )
+          }
+        })
+      if (_timeLists?.length > 0) {
+        setTimeList(_timeLists)
+      }
+    } else {
+      const selectedMenu = Object.keys(menu).length > 0 ? (menu?.use_business_schedule ? business : menu) : business
+      const _times = getTimes(selectDate, selectedMenu)
+      setTimeList(_times)
+    }
+  }, [selectDate, menu, business, cateringPreorder, hoursList, dateSelected])
 
   useEffect(() => {
     if (selectedPreorderType === 0 && Object.keys(menu).length > 0) setMenu({})
@@ -263,6 +303,7 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
 
   useEffect(() => {
     if (dateSelected) {
+
       const dateParts = dateSelected.split('-')
       const _dateSelected = new Date(dateParts[0], dateParts[1] - 1, dateParts[2])
       setSelectedDate(_dateSelected)
@@ -302,7 +343,7 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
             />
           </View>
         </BusinessInfoWrapper>
-        {isPreOrderSetting && (
+        {isPreOrderSetting && !cateringPreorder && (
           <PreorderTypeWrapper>
             <OText
               size={16}
@@ -415,19 +456,36 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
                 />
               )}
             </View>
-            <TimeListWrapper nestedScrollEnabled={true}>
-              {(isEnabled && timeList?.length > 0) ? (
+            <TimeListWrapper nestedScrollEnabled={true} cateringPreorder={cateringPreorder}>
+              {((isEnabled || cateringPreorder) && timeList?.length > 0) ? (
                 <TimeContentWrapper>
                   {timeList.map((time: any, i: number) => (
                     <TouchableOpacity key={i} onPress={() => handleChangeTime(time.value)}>
-                      <TimeItem active={timeSelected === time.value}>
+                      <TimeItem active={timeSelected === time.value} cateringPreorder={cateringPreorder}>
+                        {cateringPreorder && (
+                          <>
+                            {timeSelected === time.value ? (
+                              <OIcon
+                                src={theme.images.general.option_checked}
+                                width={18}
+                                style={{ marginEnd: 24, bottom: 2 }}
+                              />
+                            ) : (
+                              <OIcon
+                                src={theme.images.general.option_normal}
+                                width={18}
+                                style={{ marginEnd: 24, bottom: 2 }}
+                              />
+                            )}
+                          </>
+                        )}
                         <OText
-                          size={14}
+                          size={cateringPreorder ? 18 : 16}
                           color={timeSelected === time.value ? theme.colors.primary : theme.colors.textNormal}
                           style={{
                             lineHeight: 24
                           }}
-                        >{time.text}</OText>
+                        >{time.text} {cateringPreorder && `- ${time.endText}`}</OText>
                       </TimeItem>
                     </TouchableOpacity>
                   ))}
@@ -461,7 +519,7 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
               marginBottom: 12,
               textAlign: 'center'
             }}
-            >
+          >
             {t('ERROR_ADD_PRODUCT_BUSINESS_CLOSED', 'The business is closed at the moment')}
           </OText>
         )}
@@ -480,7 +538,7 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
 
 export const BusinessPreorder = (props: any) => {
   const [{ configs }] = useConfig()
-
+  const [orderState] = useOrder()
   const limitDays = parseInt(configs?.max_days_preorder?.value, 10)
 
   const currentDate = new Date()
@@ -492,10 +550,33 @@ export const BusinessPreorder = (props: any) => {
   currentDate.setHours(23)
   currentDate.setMinutes(59)
 
+  const cateringTypeString = orderState?.options?.type === 7
+  ? 'catering_delivery'
+  : orderState?.options?.type === 8
+    ? 'catering_pickup'
+    : null
+
+const splitCateringValue = (configName : string) =>
+  Object.values(a || props?.business?.configs || {})
+    ?.find(config => config?.key === configName)
+    ?.value?.split('|')
+    ?.find(val => val.includes(cateringTypeString || ''))?.split(',')[1]
+const preorderSlotInterval = parseInt(splitCateringValue('preorder_slot_interval'))
+const preorderLeadTime = parseInt(splitCateringValue('preorder_lead_time'))
+const preorderTimeRange = parseInt(splitCateringValue('preorder_time_range'))
+const preorderMaximumDays = parseInt(splitCateringValue('preorder_maximum_days'))
+const preorderMinimumDays = parseInt(splitCateringValue('preorder_minimum_days'))
+
   const businessPreorderProps = {
     ...props,
     UIComponent: BusinessPreorderUI,
-    maxDate: currentDate
+    maxDate: currentDate,
+    preorderLeadTime,
+    preorderSlotInterval,
+    preorderTimeRange,
+    preorderMaximumDays,
+    preorderMinimumDays,
+    cateringPreorder: !!cateringTypeString
   }
   return <MomentOption {...businessPreorderProps} />
 }

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

@@ -21,6 +21,10 @@ export const OrderTimeWrapper = styled.View`
 export const TimeListWrapper = styled.ScrollView`
   margin-top: 30px;
   max-height: 160px;
+  ${({ cateringPreorder }: any) => cateringPreorder && css`
+    max-height: 210px;
+    height: 210px;
+  `}
 `
 
 export const TimeContentWrapper = styled.View`
@@ -38,6 +42,16 @@ export const TimeItem = styled.View`
   justify-content: center;
   align-items: center;
   margin: 10px 0px;
+  ${({ cateringPreorder }: any) => cateringPreorder && css`
+    background: #fff;
+    width: 100%;
+    min-width: 100%;
+    height: 50px;
+    flex-direction: row;
+    justify-content: flex-start;
+    padding-left: 10px;
+    margin: 0;
+  `}
   ${({ active }: any) => active && css`
     background: #F5F9FF;
   `}

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

@@ -415,7 +415,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
           <BackgroundGray isIos={Platform.OS === 'ios'} />
         )}
         <IOScrollView
-          stickyHeaderIndices={[business?.professionals?.length > 0 ? 4 : 2]}
+          stickyHeaderIndices={[business?.professionals?.length > 0 ? 3 : 2]}
           style={{
             ...styles.mainContainer,
             marginBottom: currentCart?.products?.length > 0 && categoryState.products.length !== 0 ?

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

@@ -24,6 +24,7 @@ const DriverTipsUI = (props: any) => {
 		driverTipsOptions,
 		isMulti,
 		cart,
+		carts,
 		isDriverTipUseCustom,
 		handlerChangeOption,
 		isFixedPrice
@@ -64,6 +65,10 @@ const DriverTipsUI = (props: any) => {
 		setvalue(val)
 	}
 
+	const multiCartTipsAmmout = carts?.reduce((total: any, cart: any) => {
+		return total + parseFloat(cart?.driver_tip || 0)
+	}, 0)
+
 	return (
 		<DTContainer>
 			<DTLabel>
@@ -138,7 +143,7 @@ const DriverTipsUI = (props: any) => {
 					style={{ marginTop: 10, textAlign: 'center' }}
 				>
 					{t('CURRENT_DRIVER_TIP_AMOUNT', 'Current driver tip amount')}{!isFixedPrice &&
-						` (${driverTip}%)`}: {isFixedPrice ? parsePrice(driverTip) : parsePrice(cart?.driver_tip)}
+						` (${driverTip}%)`}: {isFixedPrice ? parsePrice(multiCartTipsAmmout ?? driverTip) : parsePrice(multiCartTipsAmmout ?? cart?.driver_tip)}
 				</OText>
 			)}
 		</DTContainer>

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

@@ -481,9 +481,9 @@ export const ProductOptionsUI = (props: any) => {
 								: t('LOGIN_SIGNUP', 'Login / Sign Up')
 						}
 						imgRightSrc=""
-						textStyle={{ color: theme.colors.primary, fontSize: 14 }}
+						textStyle={{ color: theme.colors.primary, fontSize: 13, textAlign: 'center' }}
 						style={{
-							height: 44,
+							height: 42,
 							borderColor: theme.colors.primary,
 							backgroundColor: theme.colors.white,
 							paddingLeft: 0,
@@ -498,7 +498,7 @@ export const ProductOptionsUI = (props: any) => {
 								<PlaceholderLine width={60} height={20} />
 							</Placeholder>
 						) : (
-							<OText color={theme.colors.primary} size={13}>{t('WITH_GUEST_USER', 'With Guest user')}</OText>
+							<OText color={theme.colors.primary} size={13} style={{ textAlign: 'center' }}>{t('WITH_GUEST_USER', 'With Guest user')}</OText>
 						)}
 					</TouchableOpacity>
 				)}

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

@@ -570,6 +570,9 @@ export interface BusinessPreorderParams {
 	goToBack: any;
 	business: any;
 	handleBusinessClick: (value: any) => {};
+	getActualSchedule?: any;
+	cateringPreorder?: boolean;
+	preorderLeadTime?: number 
 }
 export interface BusinessMenuListParams {
 	menu: any;