ordering-ui-react-native 0.22.75 → 0.22.76-release

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

@@ -21,7 +21,7 @@ export const AppleLogin = (props: any) => {
   const [{ configs }] = useConfig();
   const [credentialStateForUser, updateCredentialStateForUser] = useState<any>(-1);
 
-  let user : any= null
+  let user: any = null
 
   const buttonText = auth
     ? t('CONTINUE_WITH_APPLE', 'Logout with Apple')
@@ -53,7 +53,7 @@ export const AppleLogin = (props: any) => {
     }
   }
 
-  const fetchAndUpdateCredentialState = async (updateCredentialStateForUser : any) => {
+  const fetchAndUpdateCredentialState = async (updateCredentialStateForUser: any) => {
     if (user === null) {
       updateCredentialStateForUser('N/A');
     } else {
@@ -66,7 +66,7 @@ export const AppleLogin = (props: any) => {
     }
   }
 
-  const onIOSButtonPress = async (updateCredentialStateForUser : any) => {
+  const onIOSButtonPress = async (updateCredentialStateForUser: any) => {
     try {
       const appleAuthRequestResponse = await appleAuth.performRequest({
         requestedOperation: appleAuth.Operation.LOGIN,
@@ -79,7 +79,6 @@ export const AppleLogin = (props: any) => {
         identityToken,
         authorizationCode
       } = appleAuthRequestResponse;
-  
       user = newUser;
 
       fetchAndUpdateCredentialState(updateCredentialStateForUser).catch(error =>

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

@@ -40,6 +40,8 @@ function BusinessControllerPropsAreEqual(prevProps: any, nextProps: any) {
 		prevProps.isBusinessOpen === nextProps.isBusinessOpen
 }
 
+const deliveryTypes = [1, 7]
+
 export const BusinessControllerUI = React.memo((props: BusinessControllerParams) => {
 	const {
 		business,
@@ -321,14 +323,14 @@ export const BusinessControllerUI = React.memo((props: BusinessControllerParams)
 								</View>
 							) : (
 								<View style={styles.bullet}>
-									{orderState?.options?.type === 1 && !hideBusinessFee && (
+									{deliveryTypes.includes(orderState?.options?.type) && !hideBusinessFee && (
 										<OText size={textSize} color={theme.colors.textSecondary}>
 											{`${t('DELIVERY_FEE', 'Delivery fee')} ${parsePrice(businessDeliveryPrice ?? business?.delivery_price) + ' \u2022 '}`}
 										</OText>
 									)}
 									{!hideBusinessTime && (
 										<OText size={textSize} color={theme.colors.textSecondary}>{`${convertHoursToMinutes(
-											orderState?.options?.type === 1
+											deliveryTypes.includes(orderState?.options?.type)
 												? (businessDeliveryTime ?? business?.delivery_time)
 												: (businessPickupTime ?? business?.pickup_time),
 										)} \u2022 `}</OText>

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

@@ -1,5 +1,5 @@
 import React, { useState, useRef, useEffect } from 'react';
-import { TouchableOpacity, View } from 'react-native';
+import { TouchableOpacity, View, Vibration } from 'react-native';
 import { useOrder, useLanguage, useUtils, useConfig, useEvent } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import {
@@ -49,7 +49,7 @@ export const BusinessItemAccordion = (props: any) => {
 		if (cartsLength === 1) {
 			changeActiveState && changeActiveState(!isClosed, cart?.uuid)
 		}
-	}, [orderState?.carts, isClosed])
+	}, [orderState?.carts?.length, isClosed])
 
 	const subtotalWithTaxes = cart?.taxes?.reduce((acc: any, item: any) => {
 		if (item?.type === 1)
@@ -69,6 +69,11 @@ export const BusinessItemAccordion = (props: any) => {
 		}
 	}, [isActive, viewedCart])
 
+	const handleGoToStore = () => {
+		Vibration.vibrate(100)
+		props.onNavigationRedirect('Business', { store: cart?.business?.slug })
+	}
+
 	return (
 		<BIContainer isClosed={isClosed} isMultiCheckout={isMultiCheckout} checkoutVisible={!isActive && !isClosed && !!isProducts && !checkoutButtonDisabled}>
 			<BIHeader
@@ -82,7 +87,7 @@ export const BusinessItemAccordion = (props: any) => {
 						<View style={{ flexDirection: 'row' }}>
 							{props.onNavigationRedirect && !isClosed && !isGiftCart && (
 								<>
-									<TouchableOpacity onPress={() => props.onNavigationRedirect('Business', { store: cart?.business?.slug })}>
+									<TouchableOpacity onPress={() => handleGoToStore()}>
 										<OText color={theme.colors.primary} size={12} lineHeight={18} style={{ textDecorationLine: 'underline' }}>{t('GO_TO_STORE', 'Go to store')}</OText>
 									</TouchableOpacity>
 								</>

package/themes/original/src/components/BusinessListingSearch/BusinessSearchFooter.tsx

@@ -1,5 +1,5 @@
-import React, { useState } from 'react'
-import { useLanguage, useOrder } from 'ordering-components/native'
+import React from 'react'
+import { useLanguage, useOrder, useConfig } from 'ordering-components/native'
 import { ScrollView, StyleSheet, TouchableOpacity, View, Dimensions } from 'react-native'
 import { useTheme } from 'styled-components/native'
 import { OButton, OModal, OText } from '../shared'
@@ -38,6 +38,7 @@ export const BusinessSearchFooter = (props: any) => {
     const [orderState] = useOrder()
 
     const [, t] = useLanguage()
+    const [{ configs }] = useConfig()
 
     const maxDeliveryFeeOptions = [15, 25, 35, 'default']
     // const maxProductPriceOptions = [5, 10, 15, 'default']
@@ -57,6 +58,8 @@ export const BusinessSearchFooter = (props: any) => {
         { level: '5', content: '$$$$$' }
     ]
 
+    const filterOptionsEnabled = configs?.filter_search_options?.value?.split('|') || []
+
     const styles = StyleSheet.create({
         container: {
             paddingHorizontal: 40,
@@ -165,90 +168,97 @@ export const BusinessSearchFooter = (props: any) => {
                     >
                         {t('FILTER', 'Filter')}
                     </OText>
-                    <SortContainer>
-                        <OText weight='bold' mBottom={7} size={16}>
-                            {t('SORT', 'Sort')}
-                        </OText>
-                        {sortItems?.filter(item => !(orderState?.options?.type === 1 && item?.value === 'pickup_time') && !(orderState?.options?.type === 2 && item?.value === 'delivery_time'))?.map(item => (
-                            <TouchableOpacity
-                                key={item?.value}
-                                onPress={() => handleChangeFilters('orderBy', item?.value)}
-                                style={{ marginBottom: 7 }}
+                    {filterOptionsEnabled.includes('sort') && (
+                        <SortContainer>
+                            <OText weight='bold' mBottom={7} size={16}>
+                                {t('SORT', 'Sort')}
+                            </OText>
+                            {sortItems?.filter(item => !(orderState?.options?.type === 1 && item?.value === 'pickup_time') && !(orderState?.options?.type === 2 && item?.value === 'delivery_time'))?.map(item => (
+                                <TouchableOpacity
+                                    key={item?.value}
+                                    onPress={() => handleChangeFilters('orderBy', item?.value)}
+                                    style={{ marginBottom: 7 }}
+                                >
+                                    <OText
+                                        weight={filters?.orderBy?.includes(item?.value) ? 'bold' : '500'}
+                                        mBottom={filters?.orderBy?.includes(item?.value) ? 5 : 0}
+                                    >
+                                        {item?.text}  {(filters?.orderBy?.includes(item?.value)) && <>{filters?.orderBy?.includes('-') ? <AntDesignIcon name='caretup' /> : <AntDesignIcon name='caretdown' />}</>}
+                                    </OText>
+                                </TouchableOpacity>
+                            ))}
+                        </SortContainer>
+                    )}
+                    {filterOptionsEnabled.includes('brands') && (
+
+                        <BrandContainer>
+                            <OText
+                                size={16}
+                                weight='bold'
+                                lineHeight={24}
+                                style={{ marginBottom: 10 }}
                             >
-                                <OText
-                                    weight={filters?.orderBy?.includes(item?.value) ? 'bold' : '500'}
-                                    mBottom={filters?.orderBy?.includes(item?.value) ? 5 : 0}
+                                {t('BRANDS', 'Brands')}
+                            </OText>
+                            {!brandList?.loading && !brandList?.error && brandList?.brands?.length > 0 && (
+                                <ScrollView
+                                    style={{ maxHeight: 300, marginBottom: 10 }}
+                                    showsVerticalScrollIndicator={true}
+                                    nestedScrollEnabled={true}
                                 >
-                                    {item?.text}  {(filters?.orderBy?.includes(item?.value)) && <>{filters?.orderBy?.includes('-') ? <AntDesignIcon name='caretup' /> : <AntDesignIcon name='caretdown' />}</>}
-                                </OText>
-                            </TouchableOpacity>
-                        ))}
-                    </SortContainer>
-                    <BrandContainer>
-                        <OText
-                            size={16}
-                            weight='bold'
-                            lineHeight={24}
-                            style={{ marginBottom: 10 }}
-                        >
-                            {t('BRANDS', 'Brands')}
-                        </OText>
-                        {!brandList?.loading && !brandList?.error && brandList?.brands?.length > 0 && (
-                            <ScrollView
-                                style={{ maxHeight: 300, marginBottom: 10 }}
-                                showsVerticalScrollIndicator={true}
-                                nestedScrollEnabled={true}
+                                    {brandList?.brands.map((brand: any, i: number) => brand?.enabled && (
+                                        <BrandItem
+                                            key={i}
+                                            onPress={() => handleChangeBrandFilter(brand?.id)}
+                                        >
+                                            <OText
+                                                size={14}
+                                                weight={'400'}
+                                                lineHeight={24}
+                                            >
+                                                {brand?.name}
+                                            </OText>
+                                            {filters?.franchise_ids?.includes(brand?.id) && (
+                                                <AntDesignIcon
+                                                    name='check'
+                                                    color={theme.colors.success500}
+                                                    size={16}
+                                                />
+                                            )}
+                                        </BrandItem>
+                                    ))}
+                                </ScrollView>
+                            )}
+                            {!brandList?.loading && ((brandList?.brands?.filter((brand: any) => brand?.enabled))?.length === 0) && (
+                                <OText size={14} weight='400'>{t('NO_RESULTS_FOUND', 'Sorry, no results found')}</OText>
+                            )}
+                        </BrandContainer>
+                    )}
+                    {filterOptionsEnabled.includes('price_range') && (
+                        <PriceFilterWrapper>
+                            <OText
+                                size={16}
+                                weight='bold'
+                                lineHeight={24}
+                                style={{ marginBottom: 5 }}
                             >
-                                {brandList?.brands.map((brand: any, i: number) => brand?.enabled && (
-                                    <BrandItem
+                                {t('PRICE_RANGE', 'Price range')}
+                            </OText>
+                            <View style={styles.priceContainer}>
+                                {priceList.map((price: any, i: number) => (
+                                    <OButton
                                         key={i}
-                                        onPress={() => handleChangeBrandFilter(brand?.id)}
-                                    >
-                                        <OText
-                                            size={14}
-                                            weight={'400'}
-                                            lineHeight={24}
-                                        >
-                                            {brand?.name}
-                                        </OText>
-                                        {filters?.franchise_ids?.includes(brand?.id) && (
-                                            <AntDesignIcon
-                                                name='check'
-                                                color={theme.colors.success500}
-                                                size={16}
-                                            />
-                                        )}
-                                    </BrandItem>
+                                        bgColor={(filters?.price_level === price?.level) ? theme.colors.primary : theme.colors.backgroundGray200}
+                                        onClick={() => handleChangePriceRange(price?.level)}
+                                        text={`${price.content} ${(filters?.price_level === price?.level) ? ' X' : ''}`}
+                                        style={styles.priceItem}
+                                        textStyle={{ fontSize: 10, color: (filters?.price_level === price?.level) ? theme.colors.white : theme.colors.textNormal }}
+                                    />
                                 ))}
-                            </ScrollView>
-                        )}
-                        {!brandList?.loading && ((brandList?.brands?.filter((brand: any) => brand?.enabled))?.length === 0) && (
-                            <OText size={14} weight='400'>{t('NO_RESULTS_FOUND', 'Sorry, no results found')}</OText>
-                        )}
-                    </BrandContainer>
-                    <PriceFilterWrapper>
-                        <OText
-                            size={16}
-                            weight='bold'
-                            lineHeight={24}
-                            style={{ marginBottom: 5 }}
-                        >
-                            {t('PRICE_RANGE', 'Price range')}
-                        </OText>
-                        <View style={styles.priceContainer}>
-                            {priceList.map((price: any, i: number) => (
-                                <OButton
-                                    key={i}
-                                    bgColor={(filters?.price_level === price?.level) ? theme.colors.primary : theme.colors.backgroundGray200}
-                                    onClick={() => handleChangePriceRange(price?.level)}
-                                    text={`${price.content} ${(filters?.price_level === price?.level) ? ' X' : ''}`}
-                                    style={styles.priceItem}
-                                    textStyle={{ fontSize: 10, color: (filters?.price_level === price?.level) ? theme.colors.white : theme.colors.textNormal }}
-                                />
-                            ))}
-                        </View>
-                    </PriceFilterWrapper>
-                    {orderState?.options?.type === 1 && (
+                            </View>
+                        </PriceFilterWrapper>
+                    )}
+                    {orderState?.options?.type === 1 && filterOptionsEnabled.includes('max_delivery_fee') && (
                         <MaxSectionItem
                             filters={filters}
                             title={t('MAX_DELIVERY_FEE', 'Max delivery fee')}
@@ -257,7 +267,7 @@ export const BusinessSearchFooter = (props: any) => {
                             handleChangeFilters={handleChangeFilters}
                         />
                     )}
-                    {[1, 2].includes(orderState?.options?.type) && (
+                    {[1, 2].includes(orderState?.options?.type) && filterOptionsEnabled.includes('max_delivery_time') && (
                         <MaxSectionItem
                             filters={filters}
                             title={orderState?.options?.type === 1 ? t('MAX_DELIVERY_TIME', 'Max delivery time') : t('MAX_PICKUP_TIME', 'Max pickup time')}
@@ -266,14 +276,16 @@ export const BusinessSearchFooter = (props: any) => {
                             handleChangeFilters={handleChangeFilters}
                         />
                     )}
-                    <MaxSectionItem
-                        filters={filters}
-                        title={t('MAX_DISTANCE', 'Max distance')}
-                        options={maxDistanceOptions}
-                        filter='max_distance'
-                        handleChangeFilters={handleChangeFilters}
-                    />
-                    {businessTypes?.length > 0 && (
+                    {filterOptionsEnabled.includes('max_distance') && (
+                        <MaxSectionItem
+                            filters={filters}
+                            title={t('MAX_DISTANCE', 'Max distance')}
+                            options={maxDistanceOptions}
+                            filter='max_distance'
+                            handleChangeFilters={handleChangeFilters}
+                        />
+                    )}
+                    {businessTypes?.length > 0 && filterOptionsEnabled.includes('business_categories') && (
                         <TagsContainer>
                             <OText weight='bold' mBottom={7} size={16}>{t('BUSINESS_CATEGORIES', 'Business categories')}</OText>
                             <View style={styles.businessTypesContainer}>

package/themes/original/src/components/BusinessListingSearch/BusinessSearchHeader.tsx

@@ -1,5 +1,5 @@
-import React, { useEffect, useState } from 'react'
-import { useLanguage } from 'ordering-components/native'
+import React from 'react'
+import { useLanguage, useConfig } from 'ordering-components/native'
 import { View, Platform, StyleSheet, Dimensions } from 'react-native'
 import { HeaderTitle, OButton, OText } from '../shared'
 import { SearchBar } from '../SearchBar';
@@ -20,6 +20,8 @@ export const BusinessSearchHeader = (props: any) => {
     } = props
     const theme = useTheme()
     const [, t] = useLanguage()
+    const [{ configs }] = useConfig()
+
     const noResults = (!businessesSearchList.loading && !businessesSearchList.lengthError && businessesSearchList?.businesses?.length === 0)
     const isChewLayout = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
     const hideBrowse = theme?.bar_menu?.components?.browse?.hidden
@@ -61,7 +63,9 @@ export const BusinessSearchHeader = (props: any) => {
                     />
                 )}
                 <HeaderTitle ph={20} text={t('SEARCH', 'Search')} />
-                <AntDesignIcon name='filter' size={18} style={{ marginLeft: 'auto', marginTop: Platform.OS === 'ios' ? 35 : 55, paddingHorizontal: 20 }} onPress={() => handleOpenfilters()} />
+                {configs?.filter_search_options?.value !== '' && (
+                    <AntDesignIcon name='filter' size={18} style={{ marginLeft: 'auto', marginTop: Platform.OS === 'ios' ? 35 : 55, paddingHorizontal: 20 }} onPress={() => handleOpenfilters()} />
+                )}
             </View>
             <BContainer
                 style={{ paddingHorizontal: 20 }}

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useMemo, useState, useCallback } from 'react'
 import { useLanguage, BusinessSearchList, useOrder, useUtils, useEvent, showToast, ToastType } from 'ordering-components/native'
 import { ScrollView, StyleSheet, Dimensions, FlatList } from 'react-native'
 import { useTheme } from 'styled-components/native'
@@ -16,7 +16,6 @@ import {
 import FastImage from 'react-native-fast-image'
 import { convertHoursToMinutes } from '../../utils'
 import { BusinessSearchParams } from '../../types'
-import { useIsFocused } from '@react-navigation/native';
 
 import { BusinessSearchHeader } from './BusinessSearchHeader'
 import { BusinessSearchFooter } from './BusinessSearchFooter'
@@ -49,8 +48,6 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
 
   const [openFilters, setOpenFilters] = useState(false)
 
-  const isFocused = useIsFocused();
-
   const styles = StyleSheet.create({
     productsContainer: {
       marginTop: 20
@@ -130,17 +127,16 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
     })
   }
 
-  const handleScroll = ({ nativeEvent }: any) => {
+  const handleScroll = useCallback(({ nativeEvent }: any) => {
     const y = nativeEvent.contentOffset.y;
     const height = nativeEvent.contentSize.height;
     const hasMore = !(
       paginationProps.totalPages === paginationProps.currentPage
     );
-
-    if (y + PIXELS_TO_SCROLL > height && !businessesSearchList.loading && hasMore && businessesSearchList?.businesses?.length > 0) {
+    if (height > 1000 && y + PIXELS_TO_SCROLL > height && !businessesSearchList.loading && hasMore && businessesSearchList?.businesses?.length > 0) {
       handleSearchbusinessAndProducts();
     }
-  };
+  }, [businessesSearchList.loading, businessesSearchList?.businesses?.length]);
 
   const onChangeTermValue = (query: any) => {
     handleChangeTermValue(query)
@@ -159,15 +155,14 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
     handleSearchbusinessAndProducts(true)
   }, [])
 
-
-  useEffect(() => {
-    handleChangeTermValue('')
-  }, [isFocused])
+  const businessFiltered = useMemo(() => {
+    return businessesSearchList.businesses?.filter((business: any) => business?.categories?.length > 0)
+  }, [businessesSearchList.businesses])
 
   return (
     <>
       <FlatList
-        data={businessesSearchList.businesses?.filter((business: any) => business?.categories?.length > 0)}
+        data={businessFiltered}
         ListFooterComponent={<BusinessSearchFooter
           businessesSearchList={businessesSearchList}
           handleCloseFilters={handleCloseFilters}

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

@@ -43,7 +43,8 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
     getActualSchedule,
     isAsap,
     cateringPreorder,
-    preorderLeadTime
+    preorderLeadTime,
+    preorderMaximumDays
   } = props
 
   const theme = useTheme()
@@ -263,14 +264,23 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
     if (cateringPreorder) {
       let _timeLists = []
       const schedule = business && getActualSchedule()
-      if (!schedule && cateringPreorder && Object.keys(business)?.length > 0) {
+      if (!schedule && business) {
+        setTimeList([])
         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))
+        .filter(hour => {
+          return (Object.keys(business || {})?.length === 0 || schedule?.lapses?.some((lapse: any) => {
+            const openHour = lapse.open.hour < 10 ? `0${lapse.open.hour}` : lapse.open.hour
+            const openMinute = lapse.open.minute < 10 ? `0${lapse.open.minute}` : lapse.open.minute
+            const closeHour = lapse.close.hour < 10 ? `0${lapse.close.hour}` : lapse.close.hour
+            const closeMinute = lapse.close.minute < 10 ? `0${lapse.close.minute}` : lapse.close.minute
+            return moment(dateSelected + ` ${hour.startTime}`) >= moment(dateSelected + ` ${openHour}:${openMinute}`).add(preorderLeadTime, 'minutes') && moment(dateSelected + ` ${hour.endTime}`) <= moment(dateSelected + ` ${closeHour}:${closeMinute}`)
+          })) &&
+            (moment(dateSelected + ` ${hour.startTime}`) < moment(dateSelected + ` ${hour.endTime}`)) &&
+            (moment().add(preorderLeadTime, 'minutes') < moment(dateSelected + ` ${hour.startTime}`) || !cateringPreorder)
+        })
         .map(hour => {
           return {
             value: hour.startTime,
@@ -298,7 +308,7 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
       const _times = getTimes(selectDate, selectedMenu)
       setTimeList(_times)
     }
-  }, [selectDate, menu, business, cateringPreorder, hoursList, dateSelected])
+  }, [selectDate, menu, JSON.stringify(datesWhitelist), JSON.stringify(business), cateringPreorder, JSON.stringify(hoursList), dateSelected])
 
   useEffect(() => {
     if (selectedPreorderType === 0 && Object.keys(menu).length > 0) setMenu({})
@@ -314,8 +324,8 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
   }, [dateSelected])
 
   useEffect(() => {
-		setLocalMoment(moment, t)
-	}, [])
+    setLocalMoment(moment, t)
+  }, [])
 
   useFocusEffect(
     React.useCallback(() => {
@@ -444,21 +454,23 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
                   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}
                   dayContainerStyle={{ height: '100%' }}
                   highlightDateContainerStyle={{ height: '100%' }}
                   calendarHeaderFormat='MMMM, YYYY'
                   iconStyle={{ borderWidth: 1 }}
                   selectedDate={selectDate}
                   datesWhitelist={datesWhitelist}
+                  highlightDateNameStyle={styles.highlightDateName}
+                  highlightDateNumberStyle={styles.highlightDateNumber}
+                  minDate={moment()}
+                  maxDate={cateringPreorder ? moment().add(preorderMaximumDays, 'days') : undefined}
                   disabledDateNameStyle={styles.disabledDateName}
                   disabledDateNumberStyle={styles.disabledDateNumber}
+                  dateNumberStyle={styles.dateNumber}
+                  dateNameStyle={styles.dateName}
                   disabledDateOpacity={0.6}
-                  onDateSelected={(date) => onSelectDate(date)}
+                  onDateSelected={(date: any) => onSelectDate(date)}
                   leftSelector={<LeftSelector />}
                   rightSelector={<RightSelector />}
                 />
@@ -565,9 +577,10 @@ export const BusinessPreorder = (props: any) => {
 
   const splitCateringValue = (configName: string) =>
     Object.values(props?.business?.configs || {})
-      ?.find(config => config?.key === configName)
+      ?.find((config : any) => config?.key === configName)
       ?.value?.split('|')
-      ?.find(val => val.includes(cateringTypeString || ''))?.split(',')[1]
+      ?.find((val : any) => 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'))
@@ -586,4 +599,4 @@ export const BusinessPreorder = (props: any) => {
     cateringPreorder: !!cateringTypeString
   }
   return <MomentOption {...businessPreorderProps} />
-}
+}