ordering-ui-react-native 0.24.18 → 0.25.1

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

@@ -1,575 +1,575 @@
-import React, { useState, useEffect } from 'react';
-import moment from 'moment';
-import CalendarStrip from 'react-native-calendar-strip'
-import {
-	useLanguage,
-	useConfig,
-	useUtils,
-	useOrder,
-	MomentOption as MomentOptionController,
-} from 'ordering-components/native';
-import { useTheme } from 'styled-components/native';
-import IconAntDesign from 'react-native-vector-icons/AntDesign'
-import {
-	StyleSheet,
-	View,
-	Platform,
-	Pressable
-} from 'react-native';
-import Spinner from 'react-native-loading-spinner-overlay';
-import { MomentOptionParams } from '../../types';
-import NavBar from '../NavBar';
-import { OButton, OIcon, OText } from '../shared';
-import { Container } from '../../layouts/Container';
-import {
-	WrapSelectOption,
-	OrderTimeWrapper,
-	TimeListWrapper,
-	TimeContentWrapper,
-	TimeItem
-} from './styles';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { monthsEnum, setLocalMoment } from '../../utils';
-import { TimeListItem } from './TimeListItem';
-
-const MomentOptionUI = (props: MomentOptionParams) => {
-	const {
-		navigation,
-		datesList,
-		hoursList,
-		dateSelected,
-		timeSelected,
-		cateringPreorder,
-		isCart,
-		preorderLeadTime,
-		business,
-		getActualSchedule,
-		preorderMaximumDays,
-		preorderMinimumDays,
-		isPage,
-		handleAsap,
-		handleChangeDate,
-		handleChangeTime,
-	} = props;
-
-	const theme = useTheme();
-
-	const styles = StyleSheet.create({
-		icon: {
-			marginRight: 10,
-		},
-		dayNameStyle: {
-			textTransform: 'uppercase',
-		},
-		selectStyle: {
-			zIndex: 10,
-		},
-		dateLabel: {
-			borderWidth: 1,
-			borderColor: theme.colors.border,
-			borderRadius: 7.6,
-			paddingHorizontal: 12,
-			paddingVertical: 9,
-			marginBottom: 12,
-		},
-		dateWrap: {
-			marginTop: 40,
-			borderRadius: 7.6,
-			borderColor: theme.colors.border,
-			borderWidth: 1,
-			padding: 17,
-			marginBottom: 23,
-		},
-		timeLabel: {
-			borderWidth: 1,
-			borderColor: theme.colors.border,
-			borderRadius: 7.6,
-			height: 44,
-			paddingHorizontal: 16,
-			flexDirection: 'row',
-			alignItems: 'center'
-		},
-		calendar: {
-			paddingBottom: 15,
-			borderBottomWidth: 1,
-			borderColor: theme.colors.backgroundGray200,
-			height: 100
-		},
-		calendarHeaderContainer: {
-			flex: 1,
-			justifyContent: 'flex-start',
-			textAlign: 'left',
-			marginBottom: 17,
-			borderBottomWidth: 1,
-			borderColor: theme.colors.backgroundGray200
-		},
-		calendarHeader: {
-			color: '#344050',
-			alignSelf: 'flex-start',
-			fontSize: 14,
-			fontWeight: '400'
-		},
-		dateNumber: {
-			color: '#B1BCCC',
-			fontSize: 16,
-			fontWeight: '500',
-		},
-		dateName: {
-			color: '#B1BCCC',
-			fontSize: 12,
-			textTransform: 'capitalize',
-		},
-		highlightDateName: {
-			color: '#344050',
-			fontSize: 12,
-			textTransform: 'capitalize',
-		},
-		highlightDateNumber: {
-			color: '#344050',
-			fontSize: 16,
-			textTransform: 'capitalize',
-		},
-		disabledDateName: {
-			color: '#B1BCCC',
-			fontSize: 10,
-			textTransform: 'capitalize',
-			opacity: 1,
-		},
-		disabledDateNumber: {
-			color: '#B1BCCC',
-			fontSize: 14,
-			fontWeight: '500'
-		}
-	});
-
-	const [, t] = useLanguage();
-	const [{ configs }] = useConfig();
-	const [{ parseTime }] = useUtils()
-	const [orderState] = useOrder();
-	const [optionSelected, setOptionSelected] = useState({
-		isAsap: false,
-		isSchedule: false,
-	});
-	const [momentState, setMomentState] = useState({
-		isLoading: 0,
-		isEditing: false,
-	});
-	const { bottom } = useSafeAreaInsets();
-
-	const is12hours = configs?.general_hour_format?.value?.includes('hh:mm')
-
-	const [selectedTime, setSelectedTime] = useState(null);
-	const [datesWhitelist, setDateWhitelist] = useState<any>([{ start: null, end: null }])
-	const [selectDate, setSelectedDate] = useState<any>(dateSelected)
-	const [timeList, setTimeList] = useState<any>(hoursList)
-	const [nextTime, setNextTime] = useState(null)
-	const [isEnabled, setIsEnabled] = useState(false)
-
-	const goToBack = () => navigation?.canGoBack() && navigation.goBack();
-
-	const _handleAsap = () => {
-		setMomentState({ isLoading: 1, isEditing: true });
-		handleAsap();
-		setOptionSelected({ isAsap: true, isSchedule: false });
-		if (!orderState.options?.moment) {
-			setMomentState({ isLoading: 2, isEditing: false });
-		}
-	};
-
-	const handleChangeMoment = (time?: any) => {
-		setMomentState({ isLoading: 1, isEditing: true });
-		handleChangeTime(time ?? selectedTime);
-	};
-
-	const validateSelectedDate = (curdate: any, menu: any) => {
-		const day = moment(curdate).format('d')
-		setIsEnabled(menu?.schedule?.[day]?.enabled || false)
-	}
-
-	const getTimes = (curdate: any, menu: any) => {
-		validateSelectedDate(curdate, menu)
-		const date = new Date()
-		var dateSeleted = new Date(curdate)
-		var times = []
-		for (var k = 0; k < menu.schedule[dateSeleted.getDay()].lapses.length; k++) {
-			var open = {
-				hour: menu.schedule[dateSeleted.getDay()].lapses[k].open.hour,
-				minute: menu.schedule[dateSeleted.getDay()].lapses[k].open.minute
-			}
-			var close = {
-				hour: menu.schedule[dateSeleted.getDay()].lapses[k].close.hour,
-				minute: menu.schedule[dateSeleted.getDay()].lapses[k].close.minute
-			}
-			for (var i = open.hour; i <= close.hour; i++) {
-				if (date.getDate() !== dateSeleted.getDate() || i >= date.getHours()) {
-					let hour = ''
-					let meridian = ''
-					if (is12hours) {
-						if (i === 0) {
-							hour = '12'
-							meridian = ' ' + t('AM', 'AM')
-						} else if (i > 0 && i < 12) {
-							hour = (i < 10 ? '0' + i : i)
-							meridian = ' ' + t('AM', 'AM')
-						} else if (i === 12) {
-							hour = '12'
-							meridian = ' ' + t('PM', 'PM')
-						} else {
-							hour = ((i - 12 < 10) ? '0' + (i - 12) : `${(i - 12)}`)
-							meridian = ' ' + t('PM', 'PM')
-						}
-					} else {
-						hour = i < 10 ? '0' + i : i
-					}
-					for (let j = (i === open.hour ? open.minute : 0); j <= (i === close.hour ? close.minute : 59); j += 15) {
-						if (i !== date.getHours() || j >= date.getMinutes() || date.getDate() !== dateSeleted.getDate()) {
-							times.push({
-								text: hour + ':' + (j < 10 ? '0' + j : j) + meridian,
-								value: (i < 10 ? '0' + i : i) + ':' + (j < 10 ? '0' + j : j)
-							})
-						}
-					}
-				}
-			}
-		}
-		return times
-	}
-
-	const momento = moment(
-		`${dateSelected} ${timeSelected}`,
-		'YYYY-MM-DD HH:mm',
-	).toDate();
-	const momentUnix = momento.getTime() / 1000;
-	const momentFormat = moment
-		.unix(momentUnix)
-		.utc()
-		.format('YYYY-MM-DD HH:mm:ss');
-
-	useEffect(() => {
-		if (orderState.options?.moment) {
-			setOptionSelected({ isAsap: false, isSchedule: true });
-		} else {
-			setOptionSelected({ isAsap: true, isSchedule: false });
-		}
-
-		if (
-			momentState.isEditing &&
-			(momentFormat === orderState.options?.moment || timeSelected === null)
-		) {
-			setMomentState({ isLoading: 2, isEditing: false });
-		}
-	}, [orderState.options?.moment]);
-
-	useEffect(() => {
-		if (momentState.isLoading === 2 && !orderState?.loading) {
-			goToBack();
-		}
-	}, [momentState.isLoading]);
-
-	const onSelectDate = (val: any) => {
-		setSelectedDate(val)
-		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' }}>
-				<IconAntDesign
-					name='caretleft'
-					color={theme.colors.textNormal}
-					size={16}
-				/>
-			</View>
-		)
-	}
-
-	const RightSelector = () => {
-		return (
-			<View style={{ height: '100%', justifyContent: 'flex-end' }}>
-				<IconAntDesign
-					name='caretright'
-					color={theme.colors.textNormal}
-					size={16}
-				/>
-			</View>
-		)
-	}
-
-	useEffect(() => {
-		if (datesList?.length > 0) {
-			const _datesList = datesList.slice((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 }])
-			}
-		}
-	}, [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])
-
-	useEffect(() => {
-		setSelectedTime(timeSelected)
-	}, [timeSelected])
-
-	useEffect(() => {
-		if (cateringPreorder) {
-			let _timeLists = []
-			const schedule = business && getActualSchedule()
-			if (!schedule && business) {
-				setTimeList([])
-				return
-			}
-			_timeLists = hoursList
-				.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,
-						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 {
-			let _times: any = []
-			if (business) {
-				_times = getTimes(selectDate, business)
-			} else {
-				_times = 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' })
-						)
-					}
-				})
-				setIsEnabled(true)
-			}
-			setTimeList(_times)
-		}
-	}, [dateSelected, hoursList?.length, JSON.stringify(datesWhitelist), JSON.stringify(business)])
-
-	useEffect(() => {
-		setLocalMoment(moment, t)
-	}, [])
-
-	useEffect(() => {
-		if (preorderMinimumDays === 0 && preorderLeadTime === 0) return
-		const isToday = dateSelected === moment().format('YYYY-MM-DD')
-		if (isCart && isToday && !orderState?.loading && timeList?.length > 0) {
-			setNextTime(timeList?.[0] ?? null)
-		}
-	}, [timeList?.length])
-
-	useEffect(() => {
-		if (nextTime?.value && timeList?.length > 0 && isCart && !orderState?.loading && !(preorderMinimumDays === 0 && preorderLeadTime === 0)) {
-			const notime = timeList?.filter((_: any, i: number) => i !== 0)?.find?.((time: any) => time?.value === timeSelected)
-			if (!notime) {
-				handleChangeTime(nextTime?.value)
-			}
-		}
-	}, [nextTime?.value])
-
-	return (
-		<>
-			<Container
-				style={{
-					paddingLeft: !cateringPreorder || isPage ? 20 : 0,
-					paddingRight: !cateringPreorder || isPage ? 20 : 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}>
-						{optionSelected.isSchedule ? (
-							<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.isSchedule ? theme.colors.textNormal : theme.colors.disabled}>{t('SCHEDULE_FOR_LATER', 'Schedule for later')}</OText>
-					</WrapSelectOption>
-					{optionSelected.isSchedule && (
-						<OrderTimeWrapper>
-							{datesWhitelist[0]?.start === datesWhitelist[0]?.end && (
-								<OText>
-									{moment(selectDate).format('Do MMMM, YYYY')}
-								</OText>
-							)}
-							{datesWhitelist[0]?.start !== datesWhitelist[0]?.end && (
-								<View style={{ flex: 1 }}>
-									{selectDate && datesWhitelist[0]?.start !== null && (
-										<CalendarStrip
-											scrollable
-											style={styles.calendar}
-											calendarHeaderContainerStyle={styles.calendarHeaderContainer}
-											calendarHeaderStyle={styles.calendarHeader}
-											iconContainer={{ flex: 0.1 }}
-											dayContainerStyle={{ height: '100%' }}
-											highlightDateContainerStyle={{ height: '100%' }}
-											calendarHeaderFormat='MMMM, YYYY'
-											iconStyle={{ borderWidth: 1 }}
-											selectedDate={dateSelected}
-											datesWhitelist={datesWhitelist}
-											highlightDateNumberStyle={styles.highlightDateNumber}
-											highlightDateNameStyle={styles.highlightDateName}
-											minDate={moment()}
-											maxDate={cateringPreorder ? moment().add(preorderMaximumDays, 'days') : undefined}
-											disabledDateNameStyle={styles.disabledDateName}
-											disabledDateNumberStyle={styles.disabledDateNumber}
-											disabledDateOpacity={0.6}
-											dateNumberStyle={styles.dateNumber}
-											dateNameStyle={styles.dateName}
-											onDateSelected={(date: any) => onSelectDate(date)}
-											leftSelector={<LeftSelector />}
-											rightSelector={<RightSelector />}
-										/>
-									)}
-								</View>
-							)}
-							<TimeListWrapper nestedScrollEnabled={true} cateringPreorder={cateringPreorder}>
-								{isEnabled && timeList?.length > 0 ? (
-									<TimeContentWrapper>
-										{timeList.map((time: any, i: number) => (
-											<TimeListItem
-												key={i}
-												time={time}
-												selectedTime={selectedTime}
-												handleChangeTimeSelected={handleChangeTimeSelected}
-												cateringPreorder={cateringPreorder}
-											/>
-										))}
-										{timeList.length % 3 === 2 && (
-											<TimeItem style={{ backgroundColor: 'transparent' }} />
-										)}
-									</TimeContentWrapper>
-								) : (
-									<OText
-										size={16}
-										style={{
-											fontWeight: '600',
-											lineHeight: 24,
-											marginBottom: 12,
-											textAlign: 'center'
-										}}
-									>
-										{t('ERROR_ADD_PRODUCT_BUSINESS_CLOSED', 'The business is closed at the moment')}
-									</OText>
-								)}
-							</TimeListWrapper>
-						</OrderTimeWrapper>
-					)}
-				</View>
-				<Spinner visible={momentState.isLoading === 1} />
-			</Container>
-			{!isCart && !cateringPreorder && (
-				<View style={{ position: 'absolute', bottom: bottom, paddingBottom: 20, paddingHorizontal: 20, backgroundColor: 'white', width: '100%' }}>
-					<OButton
-						onClick={() => handleChangeMoment()}
-						isDisabled={!selectedTime}
-						text={t('CONTINUE', 'Continue')}
-						style={{ borderRadius: 7.6, height: 44, shadowOpacity: 0 }}
-						textStyle={{ fontSize: 14 }}
-						showNextIcon
-					/>
-				</View>
-			)}
-		</>
-	);
-};
-
-export const MomentOption = (props: any) => {
-	const momentOptionProps = {
-		...props,
-		UIComponent: MomentOptionUI,
-	};
-	return <MomentOptionController {...momentOptionProps} />;
-};
+import React, { useState, useEffect } from 'react';
+import moment from 'moment';
+import CalendarStrip from 'react-native-calendar-strip'
+import {
+	useLanguage,
+	useConfig,
+	useUtils,
+	useOrder,
+	MomentOption as MomentOptionController,
+} from 'ordering-components/native';
+import { useTheme } from 'styled-components/native';
+import IconAntDesign from 'react-native-vector-icons/AntDesign'
+import {
+	StyleSheet,
+	View,
+	Platform,
+	Pressable
+} from 'react-native';
+import Spinner from 'react-native-loading-spinner-overlay';
+import { MomentOptionParams } from '../../types';
+import NavBar from '../NavBar';
+import { OButton, OIcon, OText } from '../shared';
+import { Container } from '../../layouts/Container';
+import {
+	WrapSelectOption,
+	OrderTimeWrapper,
+	TimeListWrapper,
+	TimeContentWrapper,
+	TimeItem
+} from './styles';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { monthsEnum, setLocalMoment } from '../../utils';
+import { TimeListItem } from './TimeListItem';
+
+const MomentOptionUI = (props: MomentOptionParams) => {
+	const {
+		navigation,
+		datesList,
+		hoursList,
+		dateSelected,
+		timeSelected,
+		cateringPreorder,
+		isCart,
+		preorderLeadTime,
+		business,
+		getActualSchedule,
+		preorderMaximumDays,
+		preorderMinimumDays,
+		isPage,
+		handleAsap,
+		handleChangeDate,
+		handleChangeTime,
+	} = props;
+
+	const theme = useTheme();
+
+	const styles = StyleSheet.create({
+		icon: {
+			marginRight: 10,
+		},
+		dayNameStyle: {
+			textTransform: 'uppercase',
+		},
+		selectStyle: {
+			zIndex: 10,
+		},
+		dateLabel: {
+			borderWidth: 1,
+			borderColor: theme.colors.border,
+			borderRadius: 7.6,
+			paddingHorizontal: 12,
+			paddingVertical: 9,
+			marginBottom: 12,
+		},
+		dateWrap: {
+			marginTop: 40,
+			borderRadius: 7.6,
+			borderColor: theme.colors.border,
+			borderWidth: 1,
+			padding: 17,
+			marginBottom: 23,
+		},
+		timeLabel: {
+			borderWidth: 1,
+			borderColor: theme.colors.border,
+			borderRadius: 7.6,
+			height: 44,
+			paddingHorizontal: 16,
+			flexDirection: 'row',
+			alignItems: 'center'
+		},
+		calendar: {
+			paddingBottom: 15,
+			borderBottomWidth: 1,
+			borderColor: theme.colors.backgroundGray200,
+			height: 100
+		},
+		calendarHeaderContainer: {
+			flex: 1,
+			justifyContent: 'flex-start',
+			textAlign: 'left',
+			marginBottom: 17,
+			borderBottomWidth: 1,
+			borderColor: theme.colors.backgroundGray200
+		},
+		calendarHeader: {
+			color: '#344050',
+			alignSelf: 'flex-start',
+			fontSize: 14,
+			fontWeight: '400'
+		},
+		dateNumber: {
+			color: '#B1BCCC',
+			fontSize: 16,
+			fontWeight: '500',
+		},
+		dateName: {
+			color: '#B1BCCC',
+			fontSize: 12,
+			textTransform: 'capitalize',
+		},
+		highlightDateName: {
+			color: '#344050',
+			fontSize: 12,
+			textTransform: 'capitalize',
+		},
+		highlightDateNumber: {
+			color: '#344050',
+			fontSize: 16,
+			textTransform: 'capitalize',
+		},
+		disabledDateName: {
+			color: '#B1BCCC',
+			fontSize: 10,
+			textTransform: 'capitalize',
+			opacity: 1,
+		},
+		disabledDateNumber: {
+			color: '#B1BCCC',
+			fontSize: 14,
+			fontWeight: '500'
+		}
+	});
+
+	const [, t] = useLanguage();
+	const [{ configs }] = useConfig();
+	const [{ parseTime }] = useUtils()
+	const [orderState] = useOrder();
+	const [optionSelected, setOptionSelected] = useState({
+		isAsap: false,
+		isSchedule: false,
+	});
+	const [momentState, setMomentState] = useState({
+		isLoading: 0,
+		isEditing: false,
+	});
+	const { bottom } = useSafeAreaInsets();
+
+	const is12hours = configs?.general_hour_format?.value?.includes('hh:mm')
+
+	const [selectedTime, setSelectedTime] = useState(null);
+	const [datesWhitelist, setDateWhitelist] = useState<any>([{ start: null, end: null }])
+	const [selectDate, setSelectedDate] = useState<any>(dateSelected)
+	const [timeList, setTimeList] = useState<any>(hoursList)
+	const [nextTime, setNextTime] = useState(null)
+	const [isEnabled, setIsEnabled] = useState(false)
+
+	const goToBack = () => navigation?.canGoBack() && navigation.goBack();
+
+	const _handleAsap = () => {
+		setMomentState({ isLoading: 1, isEditing: true });
+		handleAsap();
+		setOptionSelected({ isAsap: true, isSchedule: false });
+		if (!orderState.options?.moment) {
+			setMomentState({ isLoading: 2, isEditing: false });
+		}
+	};
+
+	const handleChangeMoment = (time?: any) => {
+		setMomentState({ isLoading: 1, isEditing: true });
+		handleChangeTime(time ?? selectedTime);
+	};
+
+	const validateSelectedDate = (curdate: any, menu: any) => {
+		const day = moment(curdate).format('d')
+		setIsEnabled(menu?.schedule?.[day]?.enabled || false)
+	}
+
+	const getTimes = (curdate: any, menu: any) => {
+		validateSelectedDate(curdate, menu)
+		const date = new Date()
+		var dateSeleted = new Date(curdate)
+		var times = []
+		for (var k = 0; k < menu.schedule[dateSeleted.getDay()].lapses.length; k++) {
+			var open = {
+				hour: menu.schedule[dateSeleted.getDay()].lapses[k].open.hour,
+				minute: menu.schedule[dateSeleted.getDay()].lapses[k].open.minute
+			}
+			var close = {
+				hour: menu.schedule[dateSeleted.getDay()].lapses[k].close.hour,
+				minute: menu.schedule[dateSeleted.getDay()].lapses[k].close.minute
+			}
+			for (var i = open.hour; i <= close.hour; i++) {
+				if (date.getDate() !== dateSeleted.getDate() || i >= date.getHours()) {
+					let hour = ''
+					let meridian = ''
+					if (is12hours) {
+						if (i === 0) {
+							hour = '12'
+							meridian = ' ' + t('AM', 'AM')
+						} else if (i > 0 && i < 12) {
+							hour = (i < 10 ? '0' + i : i)
+							meridian = ' ' + t('AM', 'AM')
+						} else if (i === 12) {
+							hour = '12'
+							meridian = ' ' + t('PM', 'PM')
+						} else {
+							hour = ((i - 12 < 10) ? '0' + (i - 12) : `${(i - 12)}`)
+							meridian = ' ' + t('PM', 'PM')
+						}
+					} else {
+						hour = i < 10 ? '0' + i : i
+					}
+					for (let j = (i === open.hour ? open.minute : 0); j <= (i === close.hour ? close.minute : 59); j += 15) {
+						if (i !== date.getHours() || j >= date.getMinutes() || date.getDate() !== dateSeleted.getDate()) {
+							times.push({
+								text: hour + ':' + (j < 10 ? '0' + j : j) + meridian,
+								value: (i < 10 ? '0' + i : i) + ':' + (j < 10 ? '0' + j : j)
+							})
+						}
+					}
+				}
+			}
+		}
+		return times
+	}
+
+	const momento = moment(
+		`${dateSelected} ${timeSelected}`,
+		'YYYY-MM-DD HH:mm',
+	).toDate();
+	const momentUnix = momento.getTime() / 1000;
+	const momentFormat = moment
+		.unix(momentUnix)
+		.utc()
+		.format('YYYY-MM-DD HH:mm:ss');
+
+	useEffect(() => {
+		if (orderState.options?.moment) {
+			setOptionSelected({ isAsap: false, isSchedule: true });
+		} else {
+			setOptionSelected({ isAsap: true, isSchedule: false });
+		}
+
+		if (
+			momentState.isEditing &&
+			(momentFormat === orderState.options?.moment || timeSelected === null)
+		) {
+			setMomentState({ isLoading: 2, isEditing: false });
+		}
+	}, [orderState.options?.moment]);
+
+	useEffect(() => {
+		if (momentState.isLoading === 2 && !orderState?.loading) {
+			goToBack();
+		}
+	}, [momentState.isLoading]);
+
+	const onSelectDate = (val: any) => {
+		setSelectedDate(val)
+		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' }}>
+				<IconAntDesign
+					name='caretleft'
+					color={theme.colors.textNormal}
+					size={16}
+				/>
+			</View>
+		)
+	}
+
+	const RightSelector = () => {
+		return (
+			<View style={{ height: '100%', justifyContent: 'flex-end' }}>
+				<IconAntDesign
+					name='caretright'
+					color={theme.colors.textNormal}
+					size={16}
+				/>
+			</View>
+		)
+	}
+
+	useEffect(() => {
+		if (datesList?.length > 0) {
+			const _datesList = datesList.slice((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 }])
+			}
+		}
+	}, [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])
+
+	useEffect(() => {
+		setSelectedTime(timeSelected)
+	}, [timeSelected])
+
+	useEffect(() => {
+		if (cateringPreorder) {
+			let _timeLists = []
+			const schedule = business && getActualSchedule()
+			if (!schedule && business) {
+				setTimeList([])
+				return
+			}
+			_timeLists = hoursList
+				.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,
+						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 {
+			let _times: any = []
+			if (business) {
+				_times = getTimes(selectDate, business)
+			} else {
+				_times = 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' })
+						)
+					}
+				})
+				setIsEnabled(true)
+			}
+			setTimeList(_times)
+		}
+	}, [dateSelected, hoursList?.length, JSON.stringify(datesWhitelist), JSON.stringify(business)])
+
+	useEffect(() => {
+		setLocalMoment(moment, t)
+	}, [])
+
+	useEffect(() => {
+		if (preorderMinimumDays === 0 && preorderLeadTime === 0) return
+		const isToday = dateSelected === moment().format('YYYY-MM-DD')
+		if (isCart && isToday && !orderState?.loading && timeList?.length > 0) {
+			setNextTime(timeList?.[0] ?? null)
+		}
+	}, [timeList?.length])
+
+	useEffect(() => {
+		if (nextTime?.value && timeList?.length > 0 && isCart && !orderState?.loading && !(preorderMinimumDays === 0 && preorderLeadTime === 0)) {
+			const notime = timeList?.filter((_: any, i: number) => i !== 0)?.find?.((time: any) => time?.value === timeSelected)
+			if (!notime) {
+				handleChangeTime(nextTime?.value)
+			}
+		}
+	}, [nextTime?.value])
+
+	return (
+		<>
+			<Container
+				style={{
+					paddingLeft: !cateringPreorder || isPage ? 20 : 0,
+					paddingRight: !cateringPreorder || isPage ? 20 : 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}>
+						{optionSelected.isSchedule ? (
+							<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.isSchedule ? theme.colors.textNormal : theme.colors.disabled}>{t('SCHEDULE_FOR_LATER', 'Schedule for later')}</OText>
+					</WrapSelectOption>
+					{optionSelected.isSchedule && (
+						<OrderTimeWrapper>
+							{datesWhitelist[0]?.start === datesWhitelist[0]?.end && (
+								<OText>
+									{moment(selectDate).format('Do MMMM, YYYY')}
+								</OText>
+							)}
+							{datesWhitelist[0]?.start !== datesWhitelist[0]?.end && (
+								<View style={{ flex: 1 }}>
+									{selectDate && datesWhitelist[0]?.start !== null && (
+										<CalendarStrip
+											scrollable
+											style={styles.calendar}
+											calendarHeaderContainerStyle={styles.calendarHeaderContainer}
+											calendarHeaderStyle={styles.calendarHeader}
+											iconContainer={{ flex: 0.1 }}
+											dayContainerStyle={{ height: '100%' }}
+											highlightDateContainerStyle={{ height: '100%' }}
+											calendarHeaderFormat='MMMM, YYYY'
+											iconStyle={{ borderWidth: 1 }}
+											selectedDate={dateSelected}
+											datesWhitelist={datesWhitelist}
+											highlightDateNumberStyle={styles.highlightDateNumber}
+											highlightDateNameStyle={styles.highlightDateName}
+											minDate={moment()}
+											maxDate={cateringPreorder ? moment().add(preorderMaximumDays, 'days') : undefined}
+											disabledDateNameStyle={styles.disabledDateName}
+											disabledDateNumberStyle={styles.disabledDateNumber}
+											disabledDateOpacity={0.6}
+											dateNumberStyle={styles.dateNumber}
+											dateNameStyle={styles.dateName}
+											onDateSelected={(date: any) => onSelectDate(date)}
+											leftSelector={<LeftSelector />}
+											rightSelector={<RightSelector />}
+										/>
+									)}
+								</View>
+							)}
+							<TimeListWrapper nestedScrollEnabled={true} cateringPreorder={cateringPreorder}>
+								{isEnabled && timeList?.length > 0 ? (
+									<TimeContentWrapper>
+										{timeList.map((time: any, i: number) => (
+											<TimeListItem
+												key={i}
+												time={time}
+												selectedTime={selectedTime}
+												handleChangeTimeSelected={handleChangeTimeSelected}
+												cateringPreorder={cateringPreorder}
+											/>
+										))}
+										{timeList.length % 3 === 2 && (
+											<TimeItem style={{ backgroundColor: 'transparent' }} />
+										)}
+									</TimeContentWrapper>
+								) : (
+									<OText
+										size={16}
+										style={{
+											fontWeight: '600',
+											lineHeight: 24,
+											marginBottom: 12,
+											textAlign: 'center'
+										}}
+									>
+										{t('ERROR_ADD_PRODUCT_BUSINESS_CLOSED', 'The business is closed at the moment')}
+									</OText>
+								)}
+							</TimeListWrapper>
+						</OrderTimeWrapper>
+					)}
+				</View>
+				<Spinner visible={momentState.isLoading === 1} />
+			</Container>
+			{!isCart && !cateringPreorder && (
+				<View style={{ position: 'absolute', bottom: bottom, paddingBottom: 20, paddingHorizontal: 20, backgroundColor: 'white', width: '100%' }}>
+					<OButton
+						onClick={() => handleChangeMoment()}
+						isDisabled={!selectedTime}
+						text={t('CONTINUE', 'Continue')}
+						style={{ borderRadius: 7.6, height: 44, shadowOpacity: 0 }}
+						textStyle={{ fontSize: 14 }}
+						showNextIcon
+					/>
+				</View>
+			)}
+		</>
+	);
+};
+
+export const MomentOption = (props: any) => {
+	const momentOptionProps = {
+		...props,
+		UIComponent: MomentOptionUI,
+	};
+	return <MomentOptionController {...momentOptionProps} />;
+};