ordering-ui-react-native 0.14.56 → 0.14.57

package/package.json

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

package/src/components/BusinessesListing/index.tsx

@@ -191,7 +191,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
         {isFarAway && (
 					<FarAwayMessage style={styles.farAwayMsg}>
 						<Ionicons name='md-warning-outline' style={styles.iconStyle} />
-						<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textNormal}>{t('YOU_ARE_FAR_FROM_ADDRESS', 'Your are far from this address')}</OText>
+						<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textNormal}>{t('YOU_ARE_FAR_FROM_ADDRESS', 'You are far from this address')}</OText>
 					</FarAwayMessage>
 				)}
       </OrderControlContainer>

package/themes/doordash/src/components/BusinessesListing/index.tsx

@@ -197,7 +197,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 			{isFarAway && (
 				<FarAwayMessage style={styles.farAwayMsg}>
 					<Ionicons name='md-warning-outline' style={styles.iconStyle} />
-					<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textNormal}>{t('YOU_ARE_FAR_FROM_ADDRESS', 'Your are far from this address')}</OText>
+					<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textNormal}>{t('YOU_ARE_FAR_FROM_ADDRESS', 'You are far from this address')}</OText>
 				</FarAwayMessage>
 			)}
 			{!auth && (

package/themes/instacart/src/components/BusinessesListing/index.tsx

@@ -155,7 +155,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 				{isFarAway && (
 					<FarAwayMessage style={styles.farAwayMsg}>
 						<Ionicons name='md-warning-outline' style={styles.iconStyle} />
-						<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textNormal}>{t('YOU_ARE_FAR_FROM_ADDRESS', 'Your are far from this address')}</OText>
+						<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textNormal}>{t('YOU_ARE_FAR_FROM_ADDRESS', 'You are far from this address')}</OText>
 					</FarAwayMessage>
 				)}
 				<View style={styles.wrapperOrderOptions}>

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

@@ -130,8 +130,7 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
     disabledDateNumber: {
       color: '#B1BCCC',
       fontSize: 14,
-      fontWeight: '500',
-
+      fontWeight: '500'
     }
   })
 

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

@@ -155,6 +155,10 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 	const handleTouchDrag = useCallback(() => {
 		setCategoryClicked(false);
 	  }, []);
+	
+	const handleBackNavigation = () => {
+		navigation?.canGoBack() ? navigation.goBack() : navigation.navigate('BottomTab')
+	}
 
 	return (
 		<SafeAreaView
@@ -169,7 +173,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 									imgLeftSrc={theme.images.general.arrow_left}
 									imgRightSrc={null}
 									style={styles.btnBackArrow}
-									onClick={() => navigation?.canGoBack() && navigation.goBack()}
+									onClick={() => handleBackNavigation()}
 									imgLeftStyle={{ tintColor: theme.colors.textNormal, width: 16 }}
 								/>
 							</View>
@@ -231,7 +235,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 								selectedCategoryId={selectedCategoryId}
 								lazyLoadProductsRecommended={business?.lazy_load_products_recommended}
 								setSelectedCategoryId={setSelectedCategoryId}
-              	setCategoryClicked={setCategoryClicked}
+              					setCategoryClicked={setCategoryClicked}
 							/>
 						)}
 					</>
@@ -309,13 +313,13 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 					business={currentCart?.business}
 					cartProducts={currentCart?.products}
 					cart={currentCart}
-          setOpenUpselling={setOpenUpselling}
+          			setOpenUpselling={setOpenUpselling}
 					handleUpsellingPage={handleUpsellingPage}
 					handleCloseUpsellingPage={handleCloseUpsellingPage}
 					openUpselling={openUpselling}
 					canOpenUpselling={canOpenUpselling}
 					setCanOpenUpselling={setCanOpenUpselling}
-          onRedirect={onRedirect}
+          			onRedirect={onRedirect}
 				/>
 			)}
 		</SafeAreaView>

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

@@ -1,18 +1,18 @@
-import React, { useState, useEffect, useCallback } from 'react';
-import moment, { Moment } from 'moment';
+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 {
-	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,
-	WrapDelveryTime,
+	OrderTimeWrapper,
+	TimeListWrapper,
+	TimeContentWrapper,
+	TimeItem
 } 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,12 +76,62 @@ 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,
@@ -91,14 +141,11 @@ const MomentOptionUI = (props: MomentOptionParams) => {
 		isLoading: 0,
 		isEditing: false,
 	});
-	const { width } = useWindowDimensions();
 	const { bottom } = useSafeAreaInsets();
 
-	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 [selectedTime, setSelectedTime] = useState(null);
+	const [datesWhitelist, setDateWhitelist] = useState<any>([{ start: null, end: null }])
+	const [selectDate, setSelectedDate] = useState<any>(null)
 
 	const goToBack = () => navigation?.canGoBack() && navigation.goBack();
 
@@ -126,19 +173,6 @@ 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 });
@@ -160,14 +194,34 @@ const MomentOptionUI = (props: MomentOptionParams) => {
 		}
 	}, [momentState.isLoading]);
 
-	const customDayHeaderStylesCallback = () => {
-		return {
-			textStyle: {
-				color: theme.colors.disabled,
-				fontSize: 12,
-			},
-		};
-	};
+	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>
+		)
+	}
 
 	useEffect(() => {
 		if (datesList?.length > 0) {
@@ -176,11 +230,22 @@ 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])
-			setMinDate(_minDate)
-			setMaxDate(_maxDate)
+			setDateWhitelist([{ start: _minDate, end: _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 }}>
@@ -212,7 +277,7 @@ const MomentOptionUI = (props: MomentOptionParams) => {
 								style={{ marginEnd: 24 }}
 							/>
 						)}
-						<OText color={optionSelected.isAsap ? theme.colors.textNormal : theme.colors.disabled}>{t('ASAP_ABBREVIATION', 'ASAP') + ` (${moment().format('dddd, MMM D, yyyy h:mm A')} + delivery time)`}</OText>
+						<OText color={optionSelected.isAsap ? theme.colors.textNormal : theme.colors.disabled}>{t('ASAP_ABBREVIATION', 'ASAP') + ` (${moment().format('dddd, MMM d, yyyy h:mm A')} + delivery time)`}</OText>
 					</WrapSelectOption>
 					<WrapSelectOption
 						onPress={() => setOptionSelected({ isAsap: false, isSchedule: true })}
@@ -234,102 +299,58 @@ const MomentOptionUI = (props: MomentOptionParams) => {
 					</WrapSelectOption>
 
 					{optionSelected.isSchedule && (
-						<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,
-										}}
+						<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 />}
 									/>
-									<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>
-							)}
-						</WrapDelveryTime>
+								)}
+							</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>
-				<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>
 		</>
 	);
 };

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

@@ -6,61 +6,37 @@ export const Container = styled.ScrollView`
   padding: 0 20px;
   padding-bottom: 20px;
 `
-export const HeaderTitle = styled.View`
-  flex-direction: column;
-  margin-bottom: 20px;
-`
+
 export const WrapSelectOption = styled.TouchableOpacity`
   flex-direction: row;
   align-items: center;
   margin-vertical: 5px;
 `
-export const Days = styled.View`
-  flex-wrap: wrap;
-  flex-direction: row;
-  margin-vertical: 10px;
+export const OrderTimeWrapper = styled.View`
+  margin-top: 34px;
 `
-export const Day = styled.TouchableOpacity`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  border-right-width: 1px;
-  width: 25%;
-  margin-vertical: 10px;
-  border-color: ${(props: any) => props.theme.colors.textSecondary};
 
-  ${(props: any) => props.borderLeftShow && css`
-    border-left-width: 1px;
-  `}
-`
-export const WrapHours = styled.ScrollView`
-  border-width: 1px;
-  border-color: ${(props: any) => props.theme.colors.border};
-  border-radius: 7.6px;
-  margin-top: 6px;
-  height: 140px;
-  max-height: 140px;
+export const TimeListWrapper = styled.ScrollView`
+  margin-top: 30px;
+  max-height: 160px;
 `
-export const Hours = styled.View`
+
+export const TimeContentWrapper = styled.View`
   flex: 1;
   flex-wrap: wrap;
   flex-direction: row;
   justify-content: space-between;
-  margin: 0 20px;
 `
-export const Hour = styled.TouchableOpacity`
-  flex-direction: row;
+
+export const TimeItem = styled.View`
+  width: 86px;
+  height: 34px;
+  background: #E9ECEF;
+  border-radius: 7.6px;
   justify-content: center;
   align-items: center;
-  padding: 5px;
-  border-width: 1px;
-  border-radius: 7.6px;
-  border-color: ${(props: any) => props.theme.colors.border};
-  width: 90px;
-  margin-vertical: 7px;
-`
-
-export const WrapDelveryTime = styled.View`
-  flex: 1;
+  margin: 10px 0px;
+  ${({ active }: any) => active && css`
+    background: #F5F9FF;
+  `}
 `

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

@@ -458,7 +458,7 @@ export const ProductOptionsUI = (props: any) => {
 														textDecorationLine: 'line-through',
 														marginLeft: 7,
 														marginRight: 7
-													}}>{parsePrice(product?.offer_price)}</OText>
+													}}>{product?.offer_price ? parsePrice(product?.offer_price) : ''}</OText>
 												)}
 											</View>
 										)}

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

@@ -121,9 +121,9 @@ export const SingleProductCard = (props: SingleProductCardParams) => {
 					{product?.name}
 				</OText>
 				<PricesContainer>
-					<OText color={theme.colors.primary}>{parsePrice(product?.price)}</OText>
+					<OText color={theme.colors.primary}>{product?.price ? parsePrice(product?.price) : ''}</OText>
 					{product?.offer_price !== null && product?.in_offer && (
-						<OText style={styles.regularPriceStyle}>{parsePrice(product?.offer_price)}</OText>
+						<OText style={styles.regularPriceStyle}>{product?.offer_price ? parsePrice(product?.offer_price) : ''}</OText>
 					)}
 				</PricesContainer>
 				<OText

package/themes/uber-eats/src/components/BusinessesListing/index.tsx

@@ -144,7 +144,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
         {isFarAway && (
 					<FarAwayMessage style={styles.farAwayMsg}>
 						<Ionicons name='md-warning-outline' style={styles.iconStyle} />
-						<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textNormal}>{t('YOU_ARE_FAR_FROM_ADDRESS', 'Your are far from this address')}</OText>
+						<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textNormal}>{t('YOU_ARE_FAR_FROM_ADDRESS', 'You are far from this address')}</OText>
 					</FarAwayMessage>
 				)}
         <View style={styles.wrapperOrderOptions}>