ordering-ui-react-native 0.14.83 → 0.14.84-release

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

@@ -67,7 +67,7 @@ const LoginFormUI = (props: LoginParams) => {
 	const [, t] = useLanguage();
 	const [{ configs }] = useConfig();
 	const [, { login }] = useSession();
-	const { control, handleSubmit, errors } = useForm();
+	const { control, handleSubmit, errors, reset, register, setValue } = useForm();
 	const [passwordSee, setPasswordSee] = useState(false);
 	const [isLoadingVerifyModal, setIsLoadingVerifyModal] = useState(false);
 	const [isModalVisible, setIsModalVisible] = useState(false);
@@ -91,7 +91,7 @@ const LoginFormUI = (props: LoginParams) => {
 		inputStyle: {
 			marginBottom: 28,
 			borderWidth: 1,
-			borderColor: theme.colors.border,
+			// borderColor: theme.colors.border,
 			borderRadius: 7.6,
 		},
 		line: {
@@ -189,33 +189,21 @@ const LoginFormUI = (props: LoginParams) => {
 	}, [verifyPhoneState]);
 
 	useEffect(() => {
-		if (Object.keys(errors).length > 0) {
-			// Convert all errors in one string to show in toast provider
-			const list = Object.values(errors);
-			let stringError = '';
-			if (phoneInputData.error) {
-				list.unshift({ message: phoneInputData.error });
-			}
-			if (
-				loginTab === 'cellphone' &&
-				!phoneInputData.error &&
-				!phoneInputData.phone.country_phone_code &&
-				!phoneInputData.phone.cellphone
-			) {
-				list.unshift({
-					message: t(
-						'VALIDATION_ERROR_MOBILE_PHONE_REQUIRED',
-						'The field Mobile phone is required.',
-					),
-				});
-			}
-			list.map((item: any, i: number) => {
-				stringError +=
-					i + 1 === list.length ? `- ${item.message}` : `- ${item.message}\n`;
-			});
-			showToast(ToastType.Error, stringError);
-		}
-	}, [errors]);
+		if (phoneInputData?.phone?.cellphone) setValue('cellphone', phoneInputData?.phone?.cellphone, '')
+		else setValue('cellphone', '')
+	}, [phoneInputData?.phone?.cellphone])
+
+	useEffect(() => {
+    register('cellphone', {
+      required: loginTab === 'cellphone'
+        ? t('VALIDATION_ERROR_MOBILE_PHONE_REQUIRED', 'The field Mobile phone is required').replace('_attribute_', t('CELLPHONE', 'Cellphone'))
+        : null
+    })
+  }, [register])
+
+	useEffect(() => {
+    reset()
+  }, [loginTab])
 
 	return (
 		<Container>
@@ -284,43 +272,58 @@ const LoginFormUI = (props: LoginParams) => {
 				{(useLoginByCellphone || useLoginByEmail) && (
 					<FormInput>
 						{useLoginByEmail && loginTab === 'email' && (
-							<Controller
-								control={control}
-								render={({ onChange, value }: any) => (
-									<OInput
-										placeholder={t('EMAIL', 'Email')}
-										style={loginStyle.inputStyle}
-										icon={theme.images.general.email}
-										onChange={(e: any) => {
-											handleChangeInputEmail(e, onChange);
-										}}
-										value={value}
-										autoCapitalize="none"
-										autoCorrect={false}
-										type="email-address"
-										autoCompleteType="email"
-										returnKeyType="next"
-										onSubmitEditing={() => passwordRef.current?.focus()}
-										blurOnSubmit={false}
-										forwardRef={emailRef}
-									/>
+							<>
+								{errors?.email && (
+									<OText
+										size={14}
+										color={theme.colors.danger5}
+										weight={'normal'}>
+										{errors?.email?.message}{errors?.email?.type === 'required' && '*'}
+									</OText>
 								)}
-								name="email"
-								rules={{
-									required: t(
-										'VALIDATION_ERROR_EMAIL_REQUIRED',
-										'The field Email is required',
-									).replace('_attribute_', t('EMAIL', 'Email')),
-									pattern: {
-										value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
-										message: t(
-											'INVALID_ERROR_EMAIL',
-											'Invalid email address',
-										).replace('_attribute_', t('EMAIL', 'Email')),
-									},
-								}}
-								defaultValue=""
-							/>
+								<Controller
+									control={control}
+									render={({ onChange, value }: any) => (
+										<OInput
+											placeholder={t('EMAIL', 'Email')}
+											style={loginStyle.inputStyle}
+											icon={theme.images.general.email}
+											onChange={(e: any) => {
+												handleChangeInputEmail(e, onChange);
+											}}
+											value={value}
+											autoCapitalize="none"
+											autoCorrect={false}
+											type="email-address"
+											autoCompleteType="email"
+											returnKeyType="next"
+											onSubmitEditing={() => passwordRef.current?.focus()}
+											blurOnSubmit={false}
+											forwardRef={emailRef}
+											borderColor={errors?.email ? theme.colors.danger5 : theme.colors.border}
+										/>
+									)}
+									name="email"
+									rules={{
+										required: {
+											value: true,
+											message: 	t(
+											'VALIDATION_ERROR_EMAIL_REQUIRED',
+											'The field Email is required',
+										).replace('_attribute_', t('EMAIL', 'Email'))
+										},
+										pattern: {
+											value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
+											message: t(
+												'INVALID_ERROR_EMAIL',
+												'Invalid email address',
+											).replace('_attribute_', t('EMAIL', 'Email')),
+										}
+									}}
+									defaultValue=""
+								/>
+							</>
+
 						)}
 						{useLoginByCellphone && loginTab === 'cellphone' && (
 							<View style={{ marginBottom: 28 }}>
@@ -331,10 +334,18 @@ const LoginFormUI = (props: LoginParams) => {
 										returnKeyType: 'next',
 										onSubmitEditing: () => passwordRef?.current?.focus?.(),
 									}}
+									isStartValidation={errors?.cellphone}
 								/>
 							</View>
 						)}
-
+						{errors?.password && (
+							<OText
+								size={14}
+								color={theme.colors.danger5}
+								weight={'normal'}>
+								{errors?.password?.message}{errors?.password?.type === 'required' && '*'}
+							</OText>
+						)}
 						<Controller
 							control={control}
 							render={({ onChange, value }: any) => (
@@ -366,14 +377,18 @@ const LoginFormUI = (props: LoginParams) => {
 									returnKeyType="done"
 									onSubmitEditing={handleSubmit(onSubmit)}
 									blurOnSubmit
+									borderColor={errors?.password ? theme.colors.danger5 : theme.colors.border}
 								/>
 							)}
 							name="password"
 							rules={{
-								required: t(
+								required: {
+									value: true,
+									message: t(
 									'VALIDATION_ERROR_PASSWORD_REQUIRED',
 									'The field Password is required',
-								).replace('_attribute_', t('PASSWORD', 'Password')),
+								).replace('_attribute_', t('PASSWORD', 'Password'))
+								}
 							}}
 							defaultValue=""
 						/>

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

@@ -73,7 +73,9 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 			{ key: 18, value: t('DRIVER_ALMOST_ARRIVED_TO_BUSINESS', 'Driver almost arrived to business') },
 			{ key: 19, value: t('DRIVER_ALMOST_ARRIVED_TO_CUSTOMER', 'Driver almost arrived to customer') },
 			{ key: 20, value: t('ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS', 'Customer almost arrived to business') },
-			{ key: 21, value: t('ORDER_CUSTOMER_ARRIVED_BUSINESS', 'Customer arrived to business') }
+			{ key: 21, value: t('ORDER_CUSTOMER_ARRIVED_BUSINESS', 'Customer arrived to business') },
+			{ key: 22, value: t('ORDER_LOOKING_FOR_DRIVER', 'Looking for driver') },
+      		{ key: 23, value: t('ORDER_DRIVER_ON_WAY', 'Driver on way') }
 		]
 
 		const objectStatus = orderStatus.find((o) => o.key === status)
@@ -218,7 +220,7 @@ export const OrderListing = (props: OrdersOptionParams) => {
 	const OrderListingProps = {
 		...props,
 		UIComponent: OrdersOptionUI,
-		orderStatus: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21],
+		orderStatus: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23],
 		useDefualtSessionManager: true,
 		paginationSettings: {
 			initialPage: 1,

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

@@ -35,6 +35,8 @@ const ORDER_STATUS: any = {
 	19: 'ORDER_DRIVER_ALMOST_ARRIVED_CUSTOMER',
 	20: 'ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS',
 	21: 'ORDER_CUSTOMER_ARRIVED_BUSINESS',
+	22: 'ORDER_LOOKING_FOR_DRIVER',
+  	23: 'ORDER_DRIVER_ON_WAY'
 }
 
 const filterSpecialStatus = ['prepared_in', 'delivered_in']
@@ -95,28 +97,18 @@ const MessagesUI = (props: MessagesParams) => {
 	}
 
 	const handleImagePicker = () => {
-		launchImageLibrary({ mediaType: 'photo', maxHeight: 300, maxWidth: 300, includeBase64: true }, (response: any) => {
-			if (response.didCancel) {
-				console.log('User cancelled image picker');
-			} else if (response.errorMessage) {
-				console.log('ImagePicker Error: ', response.errorMessage);
+		launchImageLibrary({ mediaType: 'photo', maxHeight: 2048, maxWidth: 2048, includeBase64: true }, (response: any) => {
+			if (response?.didCancel) {
+				showToast(ToastType.Error, t('IMAGE_CANCELLED', 'User cancelled image picker'));
+			} else if (response?.errorMessage) {
 				showToast(ToastType.Error, response.errorMessage);
 			} else {
-				if (Platform.OS === 'ios') {
-					if (response.uri) {
-						const url = `data:${response.type};base64,${response.base64}`
-						setImage && setImage(url);
-					} else {
-						showToast(ToastType.Error, t('IMAGE_NOT_FOUND', 'Image not found'));
-					}
+				if (response?.assets?.length > 0) {
+					const image = response?.assets[0]
+					const url = `data:${image.type};base64,${image.base64}`
+					setImage && setImage(url);
 				} else {
-					if (response?.assets?.length > 0) {
-						const image = response?.assets[0]
-						const url = `data:${image.type};base64,${image.base64}`
-						setImage && setImage(url);
-					} else {
-						showToast(ToastType.Error, t('IMAGE_NOT_FOUND', 'Image not found'));
-					}
+					showToast(ToastType.Error, t('IMAGE_NOT_FOUND', 'Image not found'));
 				}
 			}
 		});
@@ -235,7 +227,7 @@ const MessagesUI = (props: MessagesParams) => {
 						{image && (
 							<TouchableOpacity
 								style={{ position: 'absolute', top: -5, right: -5, borderColor: theme.colors.backgroundDark, backgroundColor: theme.colors.white, borderRadius: 25 }}
-								onPress={() => removeImage()}
+								onPress={removeImage}
 							>
 								<MaterialCommunityIcon name='close-circle-outline' color={theme.colors.backgroundDark} size={24} />
 							</TouchableOpacity>
@@ -543,9 +535,15 @@ const styles = StyleSheet.create({
 })
 
 export const Messages = (props: MessagesParams) => {
+	const [allMessages, setAllMessages] = useState(props.messages)
 	const MessagesProps = {
 		...props,
-		UIComponent: MessagesUI
+		UIComponent: MessagesUI,
+		messages: allMessages,
+		setMessages: (values: any) => {
+			props.setMessages && props.setMessages(values)
+			setAllMessages(values)
+		}
 	}
 	return <MessagesController {...MessagesProps} />
 }

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

@@ -1,18 +1,18 @@
-import React, { useState, useEffect } from 'react';
-import moment from 'moment';
-import CalendarStrip from 'react-native-calendar-strip'
+import React, { useState, useEffect, useCallback } from 'react';
+import moment, { Moment } from 'moment';
 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 {
+	ImageStore,
 	StyleSheet,
+	useWindowDimensions,
 	View,
-	TouchableOpacity
 } from 'react-native';
 import Spinner from 'react-native-loading-spinner-overlay';
 import { MomentOptionParams } from '../../types';
@@ -21,16 +21,16 @@ import { OButton, OIcon, OText } from '../shared';
 import { Container } from '../../layouts/Container';
 import {
 	WrapSelectOption,
-	OrderTimeWrapper,
-	TimeListWrapper,
-	TimeContentWrapper,
-	TimeItem
+	WrapDelveryTime,
 } from './styles';
+import CalendarPicker from 'react-native-calendar-picker';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import SelectDropdown from 'react-native-select-dropdown';
 
 const MomentOptionUI = (props: MomentOptionParams) => {
 	const {
 		navigation,
+		nopadding,
 		datesList,
 		hoursList,
 		dateSelected,
@@ -76,62 +76,12 @@ const MomentOptionUI = (props: MomentOptionParams) => {
 			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,
@@ -141,11 +91,14 @@ const MomentOptionUI = (props: MomentOptionParams) => {
 		isLoading: 0,
 		isEditing: false,
 	});
+	const { width } = useWindowDimensions();
 	const { bottom } = useSafeAreaInsets();
 
-	const [selectedTime, setSelectedTime] = useState(null);
-	const [datesWhitelist, setDateWhitelist] = useState<any>([{ start: null, end: null }])
-	const [selectDate, setSelectedDate] = useState<any>(null)
+	const [toggleTime, setToggleTime] = useState(false);
+	const [selectedTime, setSelectedTime] = useState(timeSelected);
+	const [minDate, setMinDate] = useState(new Date())
+	const [maxDate, setMaxDate] = useState(new Date)
+	const [alert, setAlert] = useState<any>({ show: false })
 
 	const goToBack = () => navigation?.canGoBack() && navigation.goBack();
 
@@ -173,6 +126,19 @@ const MomentOptionUI = (props: MomentOptionParams) => {
 		.utc()
 		.format('YYYY-MM-DD HH:mm:ss');
 
+	const getTwoChar = (ori: string) => {
+		return ori.substring(0, 2);
+	};
+	const weekDays = [
+		getTwoChar(t('SUNDAY_ABBREVIATION', 'Su')),
+		getTwoChar(t('MONDAY_ABBREVIATION', 'Mo')),
+		getTwoChar(t('TUESDAY_ABBREVIATION', 'Tu')),
+		getTwoChar(t('WEDNESDAY_ABBREVIATION', 'We')),
+		getTwoChar(t('THURSDAY_ABBREVIATION', 'Th')),
+		getTwoChar(t('FRIDAY_ABBREVIATION', 'Fr')),
+		getTwoChar(t('SATURDAY_ABBREVIATION', 'Sa')),
+	];
+
 	useEffect(() => {
 		if (orderState.options?.moment) {
 			setOptionSelected({ isAsap: false, isSchedule: true });
@@ -194,34 +160,14 @@ const MomentOptionUI = (props: MomentOptionParams) => {
 		}
 	}, [momentState.isLoading]);
 
-	const onSelectDate = (val: any) => {
-		setSelectedDate(val)
-		if (handleChangeDate) handleChangeDate(moment(val).format('YYYY-MM-DD'))
-	}
-
-	const LeftSelector = () => {
-		return (
-			<View style={{ height: '100%', justifyContent: 'flex-end' }}>
-				<IconAntDesign
-					name='caretleft'
-					color={theme.colors.textNormal}
-					size={16}
-				/>
-			</View>
-		)
-	}
-
-	const RightSelector = () => {
-		return (
-			<View style={{ height: '100%', justifyContent: 'flex-end' }}>
-				<IconAntDesign
-					name='caretright'
-					color={theme.colors.textNormal}
-					size={16}
-				/>
-			</View>
-		)
-	}
+	const customDayHeaderStylesCallback = () => {
+		return {
+			textStyle: {
+				color: theme.colors.disabled,
+				fontSize: 12,
+			},
+		};
+	};
 
 	useEffect(() => {
 		if (datesList?.length > 0) {
@@ -230,22 +176,11 @@ const MomentOptionUI = (props: MomentOptionParams) => {
 			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 }])
+			setMinDate(_minDate)
+			setMaxDate(_maxDate)
 		}
 	}, [datesList])
 
-	useEffect(() => {
-		if (dateSelected) {
-			const dateParts = dateSelected.split('-')
-			const _dateSelected = new Date(dateParts[0], dateParts[1] - 1, dateParts[2])
-			setSelectedDate(_dateSelected)
-		}
-	}, [dateSelected])
-
-	useEffect(() => {
-		setSelectedTime(timeSelected)
-	}, [timeSelected])
-
 	return (
 		<>
 			<Container style={{ paddingLeft: 40, paddingRight: 40 }}>
@@ -299,55 +234,95 @@ const MomentOptionUI = (props: MomentOptionParams) => {
 					</WrapSelectOption>
 
 					{optionSelected.isSchedule && (
-						<OrderTimeWrapper>
-							<View style={{ flex: 1 }}>
-								{selectDate && datesWhitelist[0]?.start !== null && (
-									<CalendarStrip
-										scrollable
-										style={styles.calendar}
-										calendarHeaderContainerStyle={styles.calendarHeaderContainer}
-										calendarHeaderStyle={styles.calendarHeader}
-										dateNumberStyle={styles.dateNumber}
-										dateNameStyle={styles.dateName}
-										iconContainer={{ flex: 0.1 }}
-										highlightDateNameStyle={styles.highlightDateName}
-										highlightDateNumberStyle={styles.highlightDateNumber}
-										dayContainerStyle={{ height: '100%' }}
-										highlightDateContainerStyle={{ height: '100%' }}
-										calendarHeaderFormat='MMMM, YYYY'
-										iconStyle={{ borderWidth: 1 }}
-										selectedDate={selectDate}
-										datesWhitelist={datesWhitelist}
-										disabledDateNameStyle={styles.disabledDateName}
-										disabledDateNumberStyle={styles.disabledDateNumber}
-										disabledDateOpacity={0.6}
-										onDateSelected={(date) => onSelectDate(date)}
-										leftSelector={<LeftSelector />}
-										rightSelector={<RightSelector />}
+						<WrapDelveryTime>
+							{datesList.length > 0 && (
+								<View style={styles.dateWrap}>
+									<View style={styles.dateLabel}>
+										<OText size={12} color={theme.colors.textNormal}>{dateSelected}</OText>
+									</View>
+									<SelectDropdown
+										defaultButtonText={timeSelected ? timeSelected : t('DELIVERY_TIME', 'Delivery Time')}
+										defaultValue={74}
+										data={hoursList}
+										disabled={orderState.loading}
+										onSelect={(selectedItem, index) => {
+											setSelectedTime(selectedItem.startTime)
+										}}
+										buttonTextAfterSelection={(selectedItem, index) => {
+											return `${selectedItem.startTime} - ${selectedItem.endTime}`
+										}}
+										rowTextForSelection={(item, index) => {
+											return `${item.startTime} - ${item.endTime}`
+										}}
+										buttonStyle={{
+											backgroundColor: theme.colors.white,
+											borderColor: theme.colors.border,
+											borderWidth: 1,
+											borderRadius: 8,
+											height: 40,
+											width: '100%',
+											flexDirection: 'column',
+											alignItems: 'flex-start',
+											marginBottom: 20
+										}}
+										buttonTextStyle={{
+											color: theme.colors.textNormal,
+											fontSize: 12,
+											paddingTop: 10
+										}}
+										dropdownStyle={{
+											borderRadius: 8,
+											borderColor: theme.colors.lightGray,
+										}}
+										rowStyle={{
+											borderBottomColor: theme.colors.white,
+											backgroundColor: theme.colors.white,
+											height: 40,
+											flexDirection: 'column',
+											alignItems: 'flex-start',
+											paddingTop: 8,
+											paddingLeft: 22
+										}}
+										rowTextStyle={{
+											color: theme.colors.textNormal,
+											fontSize: 14,
+										}}
+									/>
+									<CalendarPicker
+										nextTitle=">"
+										width={width - 80}
+										previousTitle="<"
+										nextComponent={
+											<OIcon
+												src={theme.images.general.chevron_right}
+												color={theme.colors.disabled}
+												width={12}
+												style={{ marginHorizontal: 4 }}
+											/>
+										}
+										previousComponent={
+											<OIcon
+												src={theme.images.general.chevron_left}
+												color={theme.colors.disabled}
+												width={12}
+												style={{ marginHorizontal: 4 }}
+											/>
+										}
+										onDateChange={(date: moment.Moment) =>
+											handleChangeDate(date.format('YYYY-MM-DD'))
+										}
+										selectedDayColor={theme.colors.primaryContrast}
+										todayBackgroundColor={theme.colors.border}
+										dayLabelsWrapper={{ borderColor: theme.colors.clear }}
+										customDayHeaderStyles={customDayHeaderStylesCallback}
+										weekdays={weekDays}
+										selectedStartDate={momento}
+										minDate={minDate}
+										maxDate={maxDate}
 									/>
-								)}
-							</View>
-							<TimeListWrapper nestedScrollEnabled={true}>
-								<TimeContentWrapper>
-									{hoursList.map((time: any, i: number) => (
-										<TouchableOpacity key={i} onPress={() => setSelectedTime(time.startTime)}>
-											<TimeItem active={selectedTime === time.startTime}>
-												<OText
-													size={14}
-													color={selectedTime === time.startTime ? theme.colors.primary : theme.colors.textNormal}
-													style={{
-														lineHeight: 24
-													}}
-												>{time.startTime}</OText>
-											</TimeItem>
-										</TouchableOpacity>
-									))}
-									{hoursList.length % 3 === 2 && (
-										<TimeItem style={{ backgroundColor: 'transparent' }} />
-									)}
-								</TimeContentWrapper>
-							</TimeListWrapper>
-						</OrderTimeWrapper>
+								</View>
+							)}
+						</WrapDelveryTime>
 					)}
 				</View>
 				<Spinner visible={momentState.isLoading === 1} />