ordering-ui-react-native 0.16.80-release → 0.16.81-release

package/package.json

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

package/src/components/OrderCreating/index.tsx

@@ -131,26 +131,6 @@ export const OrderCreating = (props: any) => {
           <OText size={14}>{address}</OText>
         </LocationWrapper>
       )}
-      {cart && !orderState?.options?.moment && (
-        <DeliveryWrapper>
-          <DeliveryContentWrapper>
-            <SimpleIcon
-              name='clock'
-              size={20}
-              color={theme.colors.primary}
-              style={{ marginRight: 10 }}
-            />
-            <OText size={14}>
-            {orderState?.options?.type === 1
-              ? t('DELIVERY_TIME', 'Delivery Time')
-              : t('PICK_UP', 'Pick Time')}
-            </OText>
-          </DeliveryContentWrapper>
-          <View>
-            <OText size={14} weight='700'>{parseDeliveryTime()}</OText>
-          </View>
-        </DeliveryWrapper>
-      )}
       {cardData?.card?.brand && (
         <View style={{ flexDirection: 'row', marginBottom: 27 }}>
           {getIconCard(cardData?.card?.brand, 20)}

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

@@ -1,6 +1,6 @@
 import React, { useState, useCallback } from 'react'
 
-import { Platform, StyleSheet, View, TouchableOpacity } from 'react-native';
+import { Platform, StyleSheet, View, TouchableOpacity, ScrollView } from 'react-native';
 
 import { OButton, OText, OLink, OModal } from '../shared'
 import {
@@ -348,9 +348,15 @@ export const OrderContentComponent = (props: OrderContent) => {
         )}
 
         {!!order?.customer?.address_notes && (
-          <OText numberOfLines={1} mBottom={4} ellipsizeMode="tail">
-            {order?.customer?.address_notes}
-          </OText>
+          <ScrollView
+            showsVerticalScrollIndicator={false}
+            showsHorizontalScrollIndicator={false}
+            horizontal
+          >
+            <OText numberOfLines={1} mBottom={4} ellipsizeMode="tail">
+              {order?.customer?.address_notes}
+            </OText>
+          </ScrollView>
         )}
 
         {!!order?.customer?.zipcode && (

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

@@ -54,12 +54,12 @@ export const OrderDetailsLogisticUI = (props: OrderDetailsLogisticParams) => {
     };
 
     const handleRejectLogisticOrder = (order: any) => {
-        handleClickLogisticOrder?.(2, orderAssingId || order?.logistic_order_id)
+        handleClickLogisticOrder?.(2, orderAssingId || order?.logistic_order_id, order)
         handleArrowBack()
     }
 
     const handleAcceptLogisticOrder = (order: any) => {
-        handleClickLogisticOrder?.(1, orderAssingId || order?.logistic_order_id)
+        handleClickLogisticOrder?.(1, orderAssingId || order?.logistic_order_id, order)
         handleArrowBack()
     }
 

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

@@ -346,7 +346,7 @@ export const getOrderStatus = (s: string, t: any) => {
   return objectStatus && objectStatus;
 };
 
-export const transformDistance = (value : number, distanceUnit?: string) => {
+export const transformDistance = (value: number, distanceUnit?: string) => {
   return distanceUnit === 'mi'
     ? (value / 1.609).toFixed(2)
     : distanceUnit === 'ft'
@@ -354,7 +354,7 @@ export const transformDistance = (value : number, distanceUnit?: string) => {
       : (value).toFixed(2)
 }
 
-export const formatSeconds = (seconds : number) => {
+export const formatSeconds = (seconds: number) => {
   // Hours, minutes and seconds
   const hrs = Math.floor(seconds / 3600)
   const mins = Math.floor((seconds % 3600) / 60)
@@ -377,8 +377,8 @@ export const calculateDistance = (
   const lat1 = pointA.lat;
   const lon1 = pointA.lng;
 
-  const lat2 = pointB.latitude;
-  const lon2 = pointB.longitude;
+  const lat2 = pointB?.latitude;
+  const lon2 = pointB?.longitude;
 
   const R = 6371e3;
   const φ1 = lat1 * (Math.PI / 180);

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,7 +38,14 @@ const MomentOptionUI = (props: MomentOptionParams) => {
 		hoursList,
 		dateSelected,
 		timeSelected,
-    isCart,
+		cateringPreorder,
+		isCart,
+		preorderLeadTime,
+		business,
+		getActualSchedule,
+		preorderMaximumDays,
+		preorderMinimumDays,
+		isPage,
 		handleAsap,
 		handleChangeDate,
 		handleChangeTime,
@@ -152,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 = () => {
@@ -165,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(
@@ -206,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' }}>
@@ -232,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, cateringPreorder])
 
 	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])
 
@@ -253,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, JSON.stringify(business)])
+
 	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: 14, 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}>
@@ -307,57 +383,80 @@ const MomentOptionUI = (props: MomentOptionParams) => {
 						)}
 						<OText color={optionSelected.isSchedule ? theme.colors.textNormal : theme.colors.disabled}>{t('SCHEDULE_FOR_LATER', 'Schedule for later')}</OText>
 					</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 />}
-									/>
-								)}
-							</View>
-							<TimeListWrapper nestedScrollEnabled={true}>
+							{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}
+											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={dateSelected}
+											datesWhitelist={datesWhitelist}
+											minDate={moment()}
+											maxDate={cateringPreorder ? moment().add(preorderMaximumDays, 'days') : undefined}
+											disabledDateNameStyle={styles.disabledDateName}
+											disabledDateNumberStyle={styles.disabledDateNumber}
+											disabledDateOpacity={0.6}
+											onDateSelected={(date) => onSelectDate(date)}
+											leftSelector={<LeftSelector />}
+											rightSelector={<RightSelector />}
+										/>
+									)}
+								</View>
+							)}
+							<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,7 +466,7 @@ const MomentOptionUI = (props: MomentOptionParams) => {
 				</View>
 				<Spinner visible={momentState.isLoading === 1} />
 			</Container>
-			{!isCart && (
+			{!isCart && !cateringPreorder && (
 				<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/MultiCheckout/index.tsx

@@ -279,6 +279,7 @@ const MultiCheckoutUI = (props: any) => {
                     hideDeliveryFee={configs?.multi_business_checkout_show_combined_delivery_fee?.value === '1'}
                     hideDriverTip={configs?.multi_business_checkout_show_combined_driver_tip?.value === '1'}
                     onNavigationRedirect={(route: string, params: any) => props.navigation.navigate(route, params)}
+                    businessConfigs={cart?.business?.configs}
                   />
                   <View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginTop: 13, marginHorizontal: -40 }} />
                 </React.Fragment>