ordering-ui-react-native 0.17.93 → 0.17.95

package/package.json

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

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

@@ -364,7 +364,7 @@ const AddressFormUI = (props: AddressFormParams) => {
 		if (
 			orderState.loading &&
 			!addressesList &&
-			orderState.options.address &&
+			orderState?.options?.address &&
 			auth &&
 			!afterSignup
 		) {
@@ -372,7 +372,7 @@ const AddressFormUI = (props: AddressFormParams) => {
 				? navigation.navigate('BottomTab')
 				: navigation.navigate('Business');
 		}
-	}, [orderState.options.address]);
+	}, [orderState?.options?.address]);
 
 	useEffect(() => {
 		if (alertState.open && alertState?.key !== 'ERROR_MAX_LIMIT_LOCATION') {

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 : 3]}
+          stickyHeaderIndices={[business?.professionals?.length > 0 ? 4 : 2]}
           style={{
             ...styles.mainContainer,
             marginBottom: currentCart?.products?.length > 0 && categoryState.products.length !== 0 ?

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

@@ -160,7 +160,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 	const [featuredBusiness, setFeaturedBusinesses] = useState(Array);
 	const [isFarAway, setIsFarAway] = useState(false)
 	const [businessTypes, setBusinessTypes] = useState(null)
-	const [orderTypeValue, setOrderTypeValue] = useState(orderState?.options.value)
+	const [orderTypeValue, setOrderTypeValue] = useState(orderState?.options?.value)
 	const [isOpenCities, setIsOpenCities] = useState(false)
 	const isPreorderEnabled = (configs?.preorder_status_enabled?.value === '1' || configs?.preorder_status_enabled?.value === 'true') &&
 		Number(configs?.max_days_preorder?.value) > 0

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import {
   Cart as CartController,
   useOrder,
@@ -26,6 +26,7 @@ import { CartStoresListing } from '../CartStoresListing';
 import { OAlert } from '../../../../../src/components/shared'
 import { PlaceSpot } from '../PlaceSpot'
 import { DriverTips } from '../DriverTips'
+import { MomentOption } from '../MomentOption'
 
 const CartUI = (props: any) => {
   const {
@@ -43,7 +44,13 @@ const CartUI = (props: any) => {
     handleRemoveOfferClick,
     isMultiCheckout,
     hideDeliveryFee,
-    hideDriverTip
+    hideDriverTip,
+    preorderSlotInterval,
+    preorderLeadTime,
+    preorderTimeRange,
+    preorderMaximumDays,
+    preorderMinimumDays,
+    cateringTypes
   } = props
 
   const theme = useTheme();
@@ -60,7 +67,7 @@ const CartUI = (props: any) => {
   const [openTaxModal, setOpenTaxModal] = useState<any>({ open: false, data: null, type: '' })
   const [confirm, setConfirm] = useState<any>({ open: false, content: null, handleOnAccept: null, id: null, title: null })
   const [openPlaceModal, setOpenPlaceModal] = useState(false)
-
+  const [maxDate, setMaxDate] = useState<any>(null)
   const isCartPending = cart?.status === 2
   const isCouponEnabled = validationFields?.fields?.checkout?.coupon?.enabled
   const business: any = (orderState?.carts && Object.values(orderState.carts).find((_cart: any) => _cart?.uuid === props.cartuuid)) ?? {}
@@ -179,6 +186,19 @@ const CartUI = (props: any) => {
     return acc = acc
   }, cart?.subtotal)
 
+  useEffect(() => {
+    const limitDays = parseInt(preorderMaximumDays ?? 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)
+    setMaxDate(currentDate)
+  }, [preorderMaximumDays, configs?.max_days_preorder?.value])
+
   return (
     <CContainer>
       {openUpselling && (
@@ -486,6 +506,21 @@ const CartUI = (props: any) => {
             )}
           </OSBill>
         )}
+        {cateringTypes.includes(orderState?.options?.type) && maxDate && cart?.valid_products && (
+          <View>
+            <MomentOption
+              maxDate={maxDate}
+              cateringPreorder
+              isCart
+              preorderSlotInterval={preorderSlotInterval}
+              preorderLeadTime={preorderLeadTime}
+              preorderTimeRange={preorderTimeRange}
+              preorderMaximumDays={preorderMaximumDays}
+              preorderMinimumDays={preorderMinimumDays}
+              business={cart?.business}
+            />
+          </View>
+        )}
         {!isMultiCheckout && (
           <>
             {cart?.valid_products ? (
@@ -502,7 +537,7 @@ const CartUI = (props: any) => {
                   isDisabled={(openUpselling && !canOpenUpselling) || subtotalWithTaxes < cart?.minimum || !cart?.valid_address}
                   borderColor={theme.colors.primary}
                   imgRightSrc={null}
-                  textStyle={{ color: 'white', textAlign: 'center', flex: 1 }}
+                  textStyle={{ color: '#fff', textAlign: 'center', flex: 1 }}
                   onClick={() => setOpenUpselling(true)}
                   style={{ width: '100%', flexDirection: 'row', justifyContent: 'center', borderRadius: 7.6, shadowOpacity: 0 }}
                 />

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

@@ -25,37 +25,37 @@ export const CartContent = (props: any) => {
 	const cartsAvailable: any = Object.values(carts)?.filter((cart: any) => cart?.valid && cart?.status !== 2)
 
 	const handleCheckoutRedirect = () => {
-    if (cartsAvailable.length === 1) {
-      onNavigationRedirect('CheckoutNavigator', {
-        screen: 'CheckoutPage',
-        cartUuid: cartsAvailable[0]?.uuid,
-        businessLogo: cartsAvailable[0]?.business?.logo,
-        businessName: cartsAvailable[0]?.business?.name,
-        cartTotal: cartsAvailable[0]?.total
-      })
-    } else {
-      const groupKeys: any = {}
-      cartsAvailable.forEach((_cart: any) => {
-        groupKeys[_cart?.group?.uuid]
-          ? groupKeys[_cart?.group?.uuid] += 1
-          : groupKeys[_cart?.group?.uuid ?? 'null'] = 1
-      })
+		if (cartsAvailable.length === 1) {
+			onNavigationRedirect('CheckoutNavigator', {
+				screen: 'CheckoutPage',
+				cartUuid: cartsAvailable[0]?.uuid,
+				businessLogo: cartsAvailable[0]?.business?.logo,
+				businessName: cartsAvailable[0]?.business?.name,
+				cartTotal: cartsAvailable[0]?.total
+			})
+		} else {
+			const groupKeys: any = {}
+			cartsAvailable.forEach((_cart: any) => {
+				groupKeys[_cart?.group?.uuid]
+					? groupKeys[_cart?.group?.uuid] += 1
+					: groupKeys[_cart?.group?.uuid ?? 'null'] = 1
+			})
 
-      if (
-        (Object.keys(groupKeys).length === 1 && Object.keys(groupKeys)[0] === 'null') ||
-        Object.keys(groupKeys).length > 1
-      ) {
-        onNavigationRedirect('CheckoutNavigator', {
+			if (
+				(Object.keys(groupKeys).length === 1 && Object.keys(groupKeys)[0] === 'null') ||
+				Object.keys(groupKeys).length > 1
+			) {
+				onNavigationRedirect('CheckoutNavigator', {
 					screen: 'MultiCheckout',
 					checkCarts: true
 				})
-      } else {
-        onNavigationRedirect('CheckoutNavigator', {
-          screen: 'MultiCheckout',
-          cartUuid: cartsAvailable[0]?.group?.uuid
-        })
-      }
-    }
+			} else {
+				onNavigationRedirect('CheckoutNavigator', {
+					screen: 'MultiCheckout',
+					cartUuid: cartsAvailable[0]?.group?.uuid
+				})
+			}
+		}
 	}
 
 	return (
@@ -65,7 +65,7 @@ export const CartContent = (props: any) => {
 			{isOrderStateCarts && carts?.length > 0 && (
 				<>
 					{carts.map((cart: any, i: number) => (
-						<CCList key={i} style={{ overflow: 'visible' }}>
+						<CCList nestedScrollEnabled={true} key={i} style={{ overflow: 'visible' }}>
 							{cart.products.length > 0 && (
 								<>
 									<Cart
@@ -78,6 +78,7 @@ export const CartContent = (props: any) => {
 										setIsCartsLoading={setIsCartsLoading}
 										isMultiCheckout={isMultiCheckout}
 										hideUpselling
+										businessConfigs={cart?.business?.configs}
 									/>
 									<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginHorizontal: -40, marginTop: 20 }} />
 								</>

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

@@ -88,7 +88,8 @@ const CheckoutUI = (props: any) => {
 		handleChangeDeliveryOption,
 		currency,
 		merchantId,
-		setPlaceSpotNumber
+		setPlaceSpotNumber,
+		maxDate
 	} = props
 
 	const theme = useTheme();
@@ -211,6 +212,11 @@ const CheckoutUI = (props: any) => {
 		setIsUserDetailsEdit(true)
 	}
 
+	const handlePlaceOrderAsGuest = () => {
+    setIsOpen(false)
+    handlerClickPlaceOrder && handlerClickPlaceOrder()
+  }
+
 	const handlePaymentMethodClick = (paymethod: any) => {
 		setShowGateway({ closedByUser: false, open: true })
 		setWebviewPaymethod(paymethod)
@@ -675,6 +681,8 @@ const CheckoutUI = (props: any) => {
 											isCartPending={cart?.status === 2}
 											onNavigationRedirect={onNavigationRedirect}
 											placeSpotTypes={placeSpotTypes}
+											businessConfigs={businessConfigs}
+											maxDate={maxDate}
 										/>
 									</>
 								)}
@@ -711,6 +719,14 @@ const CheckoutUI = (props: any) => {
 										{t('WARNING_INVALID_PRODUCTS_CHECKOUT', 'To continue with your checkout, please remove from your cart the products that are not available.')}
 									</OText>
 								)}
+								{!cart?.valid_preorder && (
+									<OText
+										color={theme.colors.error}
+										size={12}
+									>
+										{t('INVALID_CART_MOMENT', 'Selected schedule time is invalid, please select a schedule into the business schedule interval.')}
+									</OText>
+								)}
 								{options.type === 1 &&
 									validationFields?.fields?.checkout?.driver_tip?.enabled &&
 									validationFields?.fields?.checkout?.driver_tip?.required &&
@@ -754,6 +770,7 @@ const CheckoutUI = (props: any) => {
 								togglePhoneUpdate={togglePhoneUpdate}
 								requiredFields={requiredFields}
 								hideUpdateButton
+								handlePlaceOrderAsGuest={handlePlaceOrderAsGuest}
 								onClose={() => {
 									setIsOpen(false)
 									handlePlaceOrder(null, true)

package/themes/original/src/components/GiftCard/RedeemGiftCard/index.tsx

@@ -148,8 +148,8 @@ const RedeemGiftCardUI = (props: any) => {
             <OText color={theme.colors.textNormal} size={14} mBottom={6}>{t('TYPE', 'Type')}: {redeemedGiftCard?.type}</OText>
             <OText color={theme.colors.textNormal} size={14} mBottom={6}>{t('AMOUNT', 'Amount')}: {parsePrice(redeemedGiftCard?.amount)}</OText>
             <OText color={theme.colors.textNormal} size={14} mBottom={6}>{t('FROM', 'From')}: {redeemedGiftCard?.receiver?.name} {redeemedGiftCard?.receiver?.lastname}</OText>
-            <OText color={theme.colors.textNormal} size={14} mBottom={6}>{t('TITLE', 'Title')}: {redeemedGiftCard?.title}</OText>
-            <OText color={theme.colors.textNormal} size={14} mBottom={6}>{t('MESSAGES', 'Messages')}: {redeemedGiftCard?.message}</OText>
+            {!!redeemedGiftCard?.title && <OText color={theme.colors.textNormal} size={14} mBottom={6}>{t('TITLE', 'Title')}: {redeemedGiftCard?.title}</OText>}
+            {!!redeemedGiftCard?.message && <OText color={theme.colors.textNormal} size={14} mBottom={6}>{t('MESSAGES', 'Messages')}: {redeemedGiftCard?.message}</OText>}
             <OButton
               onClick={() => {
                 setRedeemedGiftCard(null)

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

@@ -13,8 +13,8 @@ import IconAntDesign from 'react-native-vector-icons/AntDesign'
 import {
 	StyleSheet,
 	View,
-	TouchableOpacity,
-	Platform
+	Platform,
+	Pressable
 } from 'react-native';
 import Spinner from 'react-native-loading-spinner-overlay';
 import { MomentOptionParams } from '../../types';
@@ -38,6 +38,14 @@ const MomentOptionUI = (props: MomentOptionParams) => {
 		hoursList,
 		dateSelected,
 		timeSelected,
+		cateringPreorder,
+		isCart,
+		preorderLeadTime,
+		business,
+		getActualSchedule,
+		preorderMaximumDays,
+		preorderMinimumDays,
+		isPage,
 		handleAsap,
 		handleChangeDate,
 		handleChangeTime,
@@ -151,8 +159,8 @@ const MomentOptionUI = (props: MomentOptionParams) => {
 
 	const [selectedTime, setSelectedTime] = useState(null);
 	const [datesWhitelist, setDateWhitelist] = useState<any>([{ start: null, end: null }])
-	const [selectDate, setSelectedDate] = useState<any>(null)
-
+	const [selectDate, setSelectedDate] = useState<any>(dateSelected)
+	const [timeList, setTimeList] = useState<any>(hoursList)
 	const goToBack = () => navigation?.canGoBack() && navigation.goBack();
 
 	const _handleAsap = () => {
@@ -164,9 +172,9 @@ const MomentOptionUI = (props: MomentOptionParams) => {
 		}
 	};
 
-	const handleChangeMoment = () => {
+	const handleChangeMoment = (time?: any) => {
 		setMomentState({ isLoading: 1, isEditing: true });
-		handleChangeTime(selectedTime);
+		handleChangeTime(time ?? selectedTime);
 	};
 
 	const momento = moment(
@@ -205,6 +213,14 @@ const MomentOptionUI = (props: MomentOptionParams) => {
 		if (handleChangeDate) handleChangeDate(moment(val).format('YYYY-MM-DD'))
 	}
 
+	const handleChangeTimeSelected = (time: any) => {
+		if (cateringPreorder) {
+			handleChangeMoment(time)
+		} else {
+			setSelectedTime(time)
+		}
+	}
+
 	const LeftSelector = () => {
 		return (
 			<View style={{ height: '100%', justifyContent: 'flex-end' }}>
@@ -231,20 +247,25 @@ const MomentOptionUI = (props: MomentOptionParams) => {
 
 	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 }])
+			const _datesList = datesList.slice((cateringPreorder && preorderMinimumDays) || 0, Number(cateringPreorder ? preorderMaximumDays || configs?.max_days_preorder?.value : configs?.max_days_preorder?.value ?? 6))
+			if (_datesList?.length > 0) {
+				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])
+	}, [JSON.stringify(datesList), preorderMinimumDays, preorderMaximumDays])
 
 	useEffect(() => {
 		if (dateSelected) {
 			const dateParts = dateSelected.split('-')
 			const _dateSelected = new Date(dateParts[0], dateParts[1] - 1, dateParts[2])
 			setSelectedDate(_dateSelected)
+			if (cateringPreorder) {
+				onSelectDate(_dateSelected)
+			}
 		}
 	}, [dateSelected])
 
@@ -252,42 +273,98 @@ const MomentOptionUI = (props: MomentOptionParams) => {
 		setSelectedTime(timeSelected)
 	}, [timeSelected])
 
+	useEffect(() => {
+		if (cateringPreorder) {
+			let _timeLists = []
+			const schedule = business && getActualSchedule()
+			if (!schedule && business) {
+				return
+			}
+			_timeLists = hoursList
+				.filter(hour => (!business || 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 {
+			setTimeList(hoursList.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' })
+					)
+				}
+			}))
+		}
+	}, [dateSelected, JSON.stringify(hoursList), JSON.stringify(datesWhitelist), cateringPreorder])
+
 	return (
 		<>
 			<Container
 				style={{
-					paddingLeft: 40,
-					paddingRight: 40
-				}}>
-				<View style={{ paddingBottom: 90, paddingRight: 20 }}>
-					<NavBar
-						onActionLeft={() => goToBack()}
-						btnStyle={{ paddingLeft: 0 }}
-						style={{ paddingBottom: 0 }}
-						paddingTop={Platform.OS === 'ios' ? 10 : 0}
-						title={t('QUESTION_WHEN_ORDER', 'When do you want your order?')}
-						titleAlign={'center'}
-						titleStyle={{ fontSize: 20, marginRight: 0, marginLeft: 0 }}
-						titleWrapStyle={{ paddingHorizontal: 0 }}
-					/>
-					<WrapSelectOption
-						onPress={() => _handleAsap()}
-						disabled={orderState.loading} style={{ alignItems: 'flex-start' }}>
-						{optionSelected.isAsap ? (
-							<OIcon
-								src={theme.images.general.option_checked}
-								width={16}
-								style={{ marginEnd: 24 }}
-							/>
-						) : (
-							<OIcon
-								src={theme.images.general.option_normal}
-								width={16}
-								style={{ marginEnd: 24 }}
-							/>
-						)}
-						<OText color={optionSelected.isAsap ? theme.colors.textNormal : theme.colors.disabled}>{t('ASAP_ABBREVIATION', 'ASAP') + ` (${t(moment().format('dddd')?.toLocaleUpperCase(), moment().format('dddd'))}, ${t(monthsEnum[moment().format('MMM')], moment().format('MMM'))}${moment().format(' D, yyyy h:mm A')} + ${t('DELIVERY_TIME', 'delivery time')})`}</OText>
-					</WrapSelectOption>
+					paddingLeft: !cateringPreorder || isPage ? 40 : 0,
+					paddingRight: !cateringPreorder || isPage ? 40 : 0
+				}}
+				nestedScrollEnabled
+			>
+				<View style={{ paddingBottom: cateringPreorder ? 0 : 90, paddingRight: 20 }}>
+					{!isCart && (
+						<NavBar
+							onActionLeft={() => goToBack()}
+							btnStyle={{ paddingLeft: 0 }}
+							style={{ paddingBottom: 0 }}
+							paddingTop={Platform.OS === 'ios' ? 10 : 0}
+							title={t('QUESTION_WHEN_ORDER', 'When do you want your order?')}
+							titleAlign={'center'}
+							titleStyle={{ fontSize: 20, marginRight: 0, marginLeft: 0 }}
+							titleWrapStyle={{ paddingHorizontal: 0 }}
+						/>
+					)}
+					{(preorderMinimumDays === 0 && preorderLeadTime === 0) || !cateringPreorder && (
+						<WrapSelectOption
+							onPress={() => _handleAsap()}
+							disabled={orderState.loading} style={{ alignItems: 'flex-start' }}>
+							{optionSelected.isAsap ? (
+								<OIcon
+									src={theme.images.general.option_checked}
+									width={16}
+									style={{ marginEnd: 24 }}
+								/>
+							) : (
+								<OIcon
+									src={theme.images.general.option_normal}
+									width={16}
+									style={{ marginEnd: 24 }}
+								/>
+							)}
+							<OText color={optionSelected.isAsap ? theme.colors.textNormal : theme.colors.disabled}>{t('ASAP_ABBREVIATION', 'ASAP') + ` (${t(moment().format('dddd')?.toLocaleUpperCase(), moment().format('dddd'))}, ${t(monthsEnum[moment().format('MMM')], moment().format('MMM'))}${moment().format(' D, yyyy h:mm A')} + ${t('DELIVERY_TIME', 'delivery time')})`}</OText>
+						</WrapSelectOption>
+					)}
 					<WrapSelectOption
 						onPress={() => setOptionSelected({ isAsap: false, isSchedule: true })}
 						disabled={orderState.loading}>
@@ -326,8 +403,10 @@ const MomentOptionUI = (props: MomentOptionParams) => {
 										highlightDateContainerStyle={{ height: '100%' }}
 										calendarHeaderFormat='MMMM, YYYY'
 										iconStyle={{ borderWidth: 1 }}
-										selectedDate={selectDate}
+										selectedDate={dateSelected}
 										datesWhitelist={datesWhitelist}
+										minDate={moment()}
+										maxDate={cateringPreorder ? moment().add(preorderMaximumDays, 'days') : undefined}
 										disabledDateNameStyle={styles.disabledDateName}
 										disabledDateNumberStyle={styles.disabledDateNumber}
 										disabledDateOpacity={0.6}
@@ -337,27 +416,42 @@ const MomentOptionUI = (props: MomentOptionParams) => {
 									/>
 								)}
 							</View>
-							<TimeListWrapper nestedScrollEnabled={true}>
+							<TimeListWrapper nestedScrollEnabled={true} cateringPreorder={cateringPreorder}>
 								<TimeContentWrapper>
-									{hoursList.map((time: any, i: number) => (
-										<TouchableOpacity key={i} onPress={() => setSelectedTime(time.startTime)}>
-											<TimeItem active={selectedTime === time.startTime}>
+									{timeList.map((time: any, i: number) => (
+										<Pressable key={i} onPress={() => handleChangeTimeSelected(time.value)}>
+											<TimeItem
+												active={selectedTime === time.value}
+												cateringPreorder={cateringPreorder}
+											>
+												{cateringPreorder && (
+													<>
+														{selectedTime === 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}
-													color={selectedTime === time.startTime ? theme.colors.primary : theme.colors.textNormal}
+													size={cateringPreorder ? 18 : 16}
+													color={selectedTime === time.value ? theme.colors.primary : theme.colors.textNormal}
 													style={{
 														lineHeight: 24
 													}}
-												>{is12hours ? (
-													time.startTime.includes('12')
-														? `${time.startTime}PM`
-														: parseTime(moment(time.startTime, 'HH:mm'), { outputFormat: 'hh:mma' })
-												) : time.startTime
-													}</OText>
+												>{time.text} {cateringPreorder && `- ${time.endText}`}</OText>
 											</TimeItem>
-										</TouchableOpacity>
+										</Pressable>
 									))}
-									{hoursList.length % 3 === 2 && (
+									{timeList.length % 3 === 2 && (
 										<TimeItem style={{ backgroundColor: 'transparent' }} />
 									)}
 								</TimeContentWrapper>
@@ -367,9 +461,11 @@ const MomentOptionUI = (props: MomentOptionParams) => {
 				</View>
 				<Spinner visible={momentState.isLoading === 1} />
 			</Container>
-			<View style={{ position: 'absolute', bottom: bottom, paddingBottom: 20, paddingHorizontal: 40, backgroundColor: 'white', width: '100%' }}>
-				<OButton onClick={handleChangeMoment} isDisabled={!selectedTime} text={t('CONTINUE', 'Continue')} style={{ borderRadius: 7.6, height: 44, shadowOpacity: 0 }} textStyle={{ color: 'white', fontSize: 14 }} showNextIcon />
-			</View>
+			{!isCart && (
+				<View style={{ position: 'absolute', bottom: bottom, paddingBottom: 20, paddingHorizontal: 40, backgroundColor: 'white', width: '100%' }}>
+					<OButton onClick={handleChangeMoment} isDisabled={!selectedTime} text={t('CONTINUE', 'Continue')} style={{ borderRadius: 7.6, height: 44, shadowOpacity: 0 }} textStyle={{ color: 'white', fontSize: 14 }} showNextIcon />
+				</View>
+			)}
 		</>
 	);
 };

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

@@ -19,6 +19,10 @@ export const OrderTimeWrapper = styled.View`
 export const TimeListWrapper = styled.ScrollView`
   margin-top: 30px;
   max-height: 210px;
+  ${({ cateringPreorder }: any) => cateringPreorder && css`
+    max-height: 250px;
+    height: 250px;
+  `}
 `
 
 export const TimeContentWrapper = styled.View`
@@ -26,6 +30,7 @@ export const TimeContentWrapper = styled.View`
   flex-wrap: wrap;
   flex-direction: row;
   justify-content: space-between;
+  
 `
 
 export const TimeItem = styled.View`
@@ -36,6 +41,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/OrderSummary/index.tsx

@@ -26,6 +26,7 @@ import AntIcon from 'react-native-vector-icons/AntDesign'
 import { TaxInformation } from '../TaxInformation';
 import { TouchableOpacity } from 'react-native';
 import { OAlert } from '../../../../../src/components/shared'
+import { MomentOption } from '../MomentOption';
 
 const OrderSummaryUI = (props: any) => {
   const {
@@ -38,7 +39,14 @@ const OrderSummaryUI = (props: any) => {
     commentState,
     handleChangeComment,
     onNavigationRedirect,
-    handleRemoveOfferClick
+    handleRemoveOfferClick,
+    preorderSlotInterval,
+    preorderLeadTime,
+    preorderTimeRange,
+    preorderMaximumDays,
+    preorderMinimumDays,
+    cateringTypes,
+    maxDate
   } = props;
 
   const theme = useTheme()
@@ -339,6 +347,21 @@ const OrderSummaryUI = (props: any) => {
               )}
             </OSBill>
           )}
+          {cateringTypes.includes(orderState?.options?.type) && maxDate && cart?.business && (
+            <View>
+              <MomentOption
+                maxDate={maxDate}
+                cateringPreorder
+                isCart
+                preorderSlotInterval={preorderSlotInterval}
+                preorderLeadTime={preorderLeadTime}
+                preorderTimeRange={preorderTimeRange}
+                preorderMaximumDays={preorderMaximumDays}
+                preorderMinimumDays={preorderMinimumDays}
+                business={cart?.business}
+              />
+            </View>
+          )}
           <OModal
             open={openTaxModal.open}
             onClose={() => setOpenTaxModal({ open: false, data: null, type: '' })}

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

@@ -19,8 +19,10 @@ import {
 	useOrder,
 	useUtils,
 	ToastType,
-	useToast
+	useToast,
+	useConfig
 } from 'ordering-components/native';
+import uuid from 'react-native-uuid';
 import { useTheme } from 'styled-components/native';
 import { ProductIngredient } from '../ProductIngredient';
 import { ProductOption } from '../ProductOption';
@@ -52,6 +54,7 @@ import { ProductOptionSubOption } from '../ProductOptionSubOption';
 import { NotFoundSource } from '../NotFoundSource';
 import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
 import NavBar from '../NavBar';
+import { orderTypeList } from '../../utils';
 const windowWidth = Dimensions.get('window').width;
 
 export const ProductOptionsUI = (props: any) => {
@@ -71,7 +74,9 @@ export const ProductOptionsUI = (props: any) => {
 		handleChangeSuboptionState,
 		handleChangeCommentState,
 		productObject,
-		productAddedToCartLength
+		productAddedToCartLength,
+		actionStatus,
+		handleCreateGuestUser
 	} = props;
 
 	const theme = useTheme();
@@ -178,6 +183,7 @@ export const ProductOptionsUI = (props: any) => {
 	const [, t] = useLanguage();
 	const [orderState] = useOrder();
 	const [{ auth }] = useSession();
+	const [{ configs }] = useConfig()
 	const { product, loading, error } = productObject;
 	const [gallery, setGallery] = useState([])
 	const [thumbsSwiper, setThumbsSwiper] = useState(0)
@@ -198,6 +204,9 @@ export const ProductOptionsUI = (props: any) => {
 	const [isScrollAvailable, setIsScrollAvailable] = useState(null)
 	const [editionsLayoutY, setEditionsLayoutY] = useState(null)
 
+	const guestCheckoutEnabled = configs?.guest_checkout_enabled?.value === '1'
+  const orderTypeEnabled = !orderTypeList[orderState?.options?.type - 1] || configs?.allowed_order_types_guest_checkout?.value?.includes(orderTypeList[orderState?.options?.type - 1])
+
 	const isError = (id: number) => {
 		let bgColor = theme.colors.white;
 		if (errors[`id:${id}`]) {
@@ -294,6 +303,11 @@ export const ProductOptionsUI = (props: any) => {
 		}
 	}
 
+	const handleUpdateGuest = () => {
+		const guestToken = uuid.v4()
+		if (guestToken) handleCreateGuestUser({ guest_token: guestToken })
+	}
+
 	const handleOnLayout = (event: any, optionId: any) => {
 		const _optionLayout = { ...optionLayout }
 		const optionKey = 'id:' + optionId
@@ -472,9 +486,22 @@ export const ProductOptionsUI = (props: any) => {
 							height: 44,
 							borderColor: theme.colors.primary,
 							backgroundColor: theme.colors.white,
+							paddingLeft: 0,
+							paddingRight: 0
 						}}
 					/>
 				)}
+				{!auth && guestCheckoutEnabled && orderTypeEnabled && (
+					<TouchableOpacity style={{ marginTop: 10 }} onPress={handleUpdateGuest}>
+						{actionStatus?.loading ? (
+							<Placeholder Animation={Fade}>
+								<PlaceholderLine width={60} height={20} />
+							</Placeholder>
+						) : (
+							<OText color={theme.colors.primary} size={13}>{t('WITH_GUEST_USER', 'With Guest user')}</OText>
+						)}
+					</TouchableOpacity>
+				)}
 			</View>
 		)
 	}

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

@@ -11,6 +11,8 @@ import FeatherIcon from 'react-native-vector-icons/Feather';
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { ServiceFormParams } from '../../types'
 import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
+import uuid from 'react-native-uuid';
+import { orderTypeList } from '../../utils'
 
 import {
   ProductForm as ProductFormController,
@@ -45,7 +47,9 @@ const ServiceFormUI = (props: ServiceFormParams) => {
     maxProductQuantity,
     onClose,
     professionalListState,
-    isCartProduct
+    isCartProduct,
+    actionStatus,
+    handleCreateGuestUser
   } = props
 
   const theme = useTheme()
@@ -65,6 +69,9 @@ const ServiceFormUI = (props: ServiceFormParams) => {
   const [isOpen, setIsOpen] = useState(false)
   const [currentProfessional, setCurrentProfessional] = useState<any>(null)
 
+  const guestCheckoutEnabled = configs?.guest_checkout_enabled?.value === '1'
+  const orderTypeEnabled = !orderTypeList[orderState?.options?.type - 1] || configs?.allowed_order_types_guest_checkout?.value?.includes(orderTypeList[orderState?.options?.type - 1])
+
   const dropdownRef = useRef<any>(null)
 
   const styles = StyleSheet.create({
@@ -140,6 +147,11 @@ const ServiceFormUI = (props: ServiceFormParams) => {
     )
   }
 
+  const handleUpdateGuest = () => {
+		const guestToken = uuid.v4()
+		if (guestToken) handleCreateGuestUser({ guest_token: guestToken })
+	}
+
   const customDayHeaderStylesCallback = () => {
     return {
       textStyle: {
@@ -563,6 +575,17 @@ const ServiceFormUI = (props: ServiceFormParams) => {
                   }}
                 />
               )}
+              {!auth && guestCheckoutEnabled && orderTypeEnabled &&  (
+                <TouchableOpacity style={{ marginTop: 10 }} onPress={handleUpdateGuest}>
+                  {actionStatus?.loading ? (
+                    <Placeholder Animation={Fade}>
+                      <PlaceholderLine width={60} height={20} />
+                    </Placeholder>
+                  ) : (
+                    <OText color={theme.colors.primary} size={13}>{t('WITH_GUEST_USER', 'With Guest user')}</OText>
+                  )}
+                </TouchableOpacity>
+              )}
           </ButtonWrapper>
         </Container>
       )}

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

@@ -83,7 +83,8 @@ const SignupFormUI = (props: SignupParams) => {
 		signUpTab,
 		useSignUpFullDetails,
 		useSignUpOtpEmail,
-		useSignUpOtpCellphone
+		useSignUpOtpCellphone,
+		isGuest
 	} = props;
 
 	const theme = useTheme();
@@ -465,15 +466,19 @@ const SignupFormUI = (props: SignupParams) => {
 
 	return (
 		<View>
-			<NavBar
-				title={t('SIGNUP', 'Signup')}
-				titleAlign={'center'}
-				onActionLeft={() => navigation?.canGoBack() && navigation.goBack()}
-				showCall={false}
-				btnStyle={{ paddingLeft: 0 }}
-				titleWrapStyle={{ paddingHorizontal: 0 }}
-				titleStyle={{ marginLeft: 0, marginRight: 0 }}
-			/>
+			{isGuest ? (
+				<OText style={{ textAlign: 'center', marginBottom: 10 }} size={18}>{t('SIGNUP', 'Signup')}</OText>
+			) : (
+				<NavBar
+					title={t('SIGNUP', 'Signup')}
+					titleAlign={'center'}
+					onActionLeft={() => navigation?.canGoBack() && navigation.goBack()}
+					showCall={false}
+					btnStyle={{ paddingLeft: 0 }}
+					titleWrapStyle={{ paddingHorizontal: 0 }}
+					titleStyle={{ marginLeft: 0, marginRight: 0 }}
+				/>
+			)}
 			<FormSide>
 				{((Number(useSignUpFullDetails) + Number(useSignUpOtpEmail) + Number(useSignUpOtpCellphone)) > 1) && (
 					<SignupWith>
@@ -893,7 +898,7 @@ const SignupFormUI = (props: SignupParams) => {
 						</View>
 					)
 				}
-				{configs && Object.keys(configs).length > 0 && (
+				{configs && Object.keys(configs).length > 0 && !isGuest && (
 					(((configs?.facebook_login?.value === 'true' || configs?.facebook_login?.value === '1') && configs?.facebook_id?.value && facebookLoginEnabled) ||
 						((configs?.google_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null) && googleLoginEnabled) ||
 						((configs?.apple_login_client_id?.value !== '' && configs?.apple_login_client_id?.value !== null) && appleLoginEnabled)) &&

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

@@ -1,12 +1,13 @@
 import React, { useEffect, useState } from 'react';
-import { Platform, StyleSheet, TouchableOpacity } from 'react-native';
+import { Platform, StyleSheet, TouchableOpacity, ScrollView } from 'react-native';
 import { useSession, useLanguage, ToastType, useToast, useConfig } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import { useForm, Controller } from 'react-hook-form';
+import { SignupForm } from '../SignupForm'
 
 import { UDForm, UDLoader, UDWrapper, WrapperPhone } from './styles';
 
-import { OText, OButton, OInput } from '../shared';
+import { OText, OButton, OInput, OModal } from '../shared';
 
 import { PhoneInputNumber } from '../PhoneInputNumber';
 import { sortInputFields } from '../../utils';
@@ -27,6 +28,8 @@ export const UserFormDetailsUI = (props: any) => {
 		phoneUpdate,
 		hideUpdateButton,
 		setWillVerifyOtpState,
+		handlePlaceOrderAsGuest,
+		isCheckout
 	} = props;
 
 	const theme = useTheme();
@@ -68,10 +71,11 @@ export const UserFormDetailsUI = (props: any) => {
 	const [, { showToast }] = useToast();
 	const { handleSubmit, control, errors, setValue } = useForm();
 
-	const [{ user }] = useSession();
+	const [{ user }, { login }] = useSession();
 	const [userPhoneNumber, setUserPhoneNumber] = useState<any>(null);
 	const [isValid, setIsValid] = useState(false)
 	const [isChanged, setIsChanged] = useState(false)
+	const [isModalOpen, setIsModalOpen] = useState(false)
 	const [phoneInputData, setPhoneInputData] = useState({
 		error: '',
 		phone: {
@@ -82,6 +86,14 @@ export const UserFormDetailsUI = (props: any) => {
 
 	const showInputPhoneNumber = (validationFields?.fields?.checkout?.cellphone?.enabled ?? false) || configs?.verification_phone_required?.value === '1'
 
+	const handleSuccessSignup = (user: any) => {
+    login({
+      user,
+      token: user?.session?.access_token
+    })
+    handlePlaceOrderAsGuest && handlePlaceOrderAsGuest()
+  }
+
 	const getInputRules = (field: any) => {
 		const rules: any = {
 			required: isRequiredField(field.code)
@@ -187,6 +199,11 @@ export const UserFormDetailsUI = (props: any) => {
 		handleChangeInput(countryCode, true);
 	}
 
+	const handleClickBtn = () => {
+		if (!user?.guest_id) handleSubmit(onSubmit)
+		else setIsModalOpen(true)
+	}
+
 	useEffect(() => {
 		if (Object.keys(errors).length > 0) {
 			const list = Object.values(errors);
@@ -423,17 +440,38 @@ export const UserFormDetailsUI = (props: any) => {
 					text={
 						formState.loading
 							? t('UPDATING', 'Updating...')
-							: t('CONTINUE', 'Continue')
+							: ((isCheckout && !!user?.guest_id)
+									? t('SIGN_UP_AND_PLACE_ORDER', 'Sign up and place order')
+									: t('CONTINUE', 'Continue'))
 					}
 					bgColor={theme.colors.white}
 					textStyle={{ color: theme.colors.primary, fontSize: 14 }}
 					borderColor={theme.colors.primary}
-					isDisabled={formState.loading || !isValid}
+					isDisabled={!user?.guest_id && (formState.loading || !isValid)}
 					imgRightSrc={null}
 					style={{ borderRadius: 7.6, shadowOpacity: 0, width: '100%', borderWidth: 1, marginTop: 20, marginBottom: 20 }}
-					onClick={handleSubmit(onSubmit)}
+					onClick={handleClickBtn}
 				/>
 			)}
+			{isCheckout && !!user?.guest_id && (
+				<TouchableOpacity style={{ marginTop: 10 }} onPress={() => handlePlaceOrderAsGuest()}>
+					<OText color={theme.colors.primary} style={{ textAlign: 'center' }}>{t('PLACE_ORDER_AS_GUEST', 'Place order as guest')}</OText>
+				</TouchableOpacity>
+			)}
+			<OModal
+				open={isModalOpen}
+				onClose={() => setIsModalOpen(false)}
+			>
+				<ScrollView style={{ paddingHorizontal: 20, width: '100%'}}>
+					<SignupForm
+						handleSuccessSignup={handleSuccessSignup}
+						isGuest
+						signupButtonText={t('SIGNUP', 'Signup')}
+						useSignupByEmail
+						useChekoutFileds
+					/>
+				</ScrollView>
+			</OModal>
 		</>
 	);
 };

package/themes/original/src/config/constants.tsx

@@ -29,5 +29,15 @@ export const ORDER_TYPES = [
 		value: 5,
 		content: 'DRIVE_THRU',
 		description: 'ORDERTYPE_DESCRIPTION_DRIVETHRU',
+	},
+	{
+		value: 7,
+		content: 'CATERING_DELIVERY',
+		description: 'ORDERTYPE_DESCRIPTION_CATERING_DELIVERY',
+	},
+	{
+		value: 8,
+		content: 'CATERING_PICKUP',
+		description: 'ORDERTYPE_DESCRIPTION_CATERING_PICKUP',
 	}
 ]

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

@@ -118,6 +118,7 @@ export interface SignupParams {
 	useSignUpOtpEmail?: boolean;
 	useSignUpOtpCellphone?: boolean;
 	willVerifyOtpState?: boolean;
+	isGuest?: any;
 	numOtpInputs?: number;
 	handleChangePromotions: () => void;
 	handleChangeInput?: (in1: any, in2: any) => void;
@@ -318,7 +319,7 @@ export interface SingleProductCardParams {
 	navigation?: any;
 	isPreviously?: any;
 	isProductId?: any;
-	viewString?: string; 
+	viewString?: string;
 }
 export interface BusinessInformationParams {
 	navigation?: any,
@@ -544,6 +545,14 @@ export interface MomentOptionParams {
 	dateSelected?: any;
 	timeSelected?: any;
 	isAsap?: boolean;
+	cateringPreorder?: boolean,
+	isCart?: boolean,
+	preorderLeadTime?: number,
+	business?: any,
+	getActualSchedule?: any,
+	preorderMaximumDays?: number,
+	preorderMinimumDays?: number,
+	isPage?: boolean,
 	handleAsap: () => {};
 	handleChangeDate: (value: any) => {};
 	handleChangeTime: (value: any) => {};
@@ -761,7 +770,9 @@ export interface ServiceFormParams {
 	professionalList: any,
 	productObject?: any,
 	professionalListState?: any,
-	isCartProduct?: any
+	isCartProduct?: any,
+	actionStatus?: any,
+	handleCreateGuestUser?: any
 }
 
 export interface ProfessionalFilterParams {

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

@@ -10,6 +10,11 @@ const theme = useTheme()
 
 export const flatArray = (arr: any) => [].concat(...arr)
 
+/**
+ * List of order type
+ */
+export const orderTypeList = ['delivery', 'pickup', 'eatin', 'curbside', 'drivethru', 'seatdelivery']
+
 /**
  * Function to return the traduction depending of a key 't'
  * @param {string} key for traduction