ordering-ui-react-native 0.14.99 → 0.15.0-release

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} />

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

@@ -6,37 +6,61 @@ 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 OrderTimeWrapper = styled.View`
-  margin-top: 34px;
+export const Days = styled.View`
+  flex-wrap: wrap;
+  flex-direction: row;
+  margin-vertical: 10px;
 `
+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};
 
-export const TimeListWrapper = styled.ScrollView`
-  margin-top: 30px;
-  max-height: 160px;
+  ${(props: any) => props.borderLeftShow && css`
+    border-left-width: 1px;
+  `}
 `
-
-export const TimeContentWrapper = styled.View`
+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 Hours = styled.View`
   flex: 1;
   flex-wrap: wrap;
   flex-direction: row;
   justify-content: space-between;
+  margin: 0 20px;
 `
-
-export const TimeItem = styled.View`
-  width: 86px;
-  height: 34px;
-  background: #E9ECEF;
-  border-radius: 7.6px;
+export const Hour = styled.TouchableOpacity`
+  flex-direction: row;
   justify-content: center;
   align-items: center;
-  margin: 10px 0px;
-  ${({ active }: any) => active && css`
-    background: #F5F9FF;
-  `}
+  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;
 `