ordering-ui-react-native 0.24.43-test → 0.25.1

package/themes/single-business/src/components/Messages/styles.tsx

@@ -1,20 +1,20 @@
-
-import styled from 'styled-components/native'
-
-export const Wrapper = styled.View`
-  flex: 1;
-  background-color: ${(props: any) => props.theme.colors.white};
-`
-export const Header = styled.View`
-  flex-direction: row;
-  align-items: center;
-  justify-content: flex-start;
-  background-color: ${(props: any) => props.theme.colors.white};
-  box-shadow: 0 2px 2px #0000001A;
-  padding-bottom: 10px;
-  padding-top: 14px;
-`
-
-export const TitleHeader = styled.View`
-
-`
+
+import styled from 'styled-components/native'
+
+export const Wrapper = styled.View`
+  flex: 1;
+  background-color: ${(props: any) => props.theme.colors.white};
+`
+export const Header = styled.View`
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  background-color: ${(props: any) => props.theme.colors.white};
+  box-shadow: 0 2px 2px #0000001A;
+  padding-bottom: 10px;
+  padding-top: 14px;
+`
+
+export const TitleHeader = styled.View`
+
+`

package/themes/single-business/src/components/MomentOption/index.tsx

@@ -1,290 +1,290 @@
-import React, { useState, useEffect } from 'react';
-import moment from 'moment';
-import {
-	useLanguage,
-	useConfig,
-	useUtils,
-	useOrder,
-	MomentOption as MomentOptionController,
-} from 'ordering-components/native';
-import { useTheme } from 'styled-components/native';
-import {
-	TouchableOpacity,
-	StyleSheet,
-	useWindowDimensions,
-	View,
-} from 'react-native';
-import Spinner from 'react-native-loading-spinner-overlay';
-import { MomentOptionParams } from '../../types';
-import NavBar from '../NavBar';
-import { OIcon, OText } from '../shared';
-import { Container } from '../../layouts/Container';
-import {
-	WrapSelectOption,
-	Days,
-	Day,
-	WrapHours,
-	Hours,
-	Hour,
-	WrapDelveryTime,
-} from './styles';
-import { TouchableRipple } from 'react-native-paper';
-
-const MomentOptionUI = (props: MomentOptionParams) => {
-	const {
-		navigation,
-		nopadding,
-		datesList,
-		hoursList,
-		dateSelected,
-		timeSelected,
-		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,
-      marginHorizontal: 10,
-      marginTop: 10
-		},
-		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'
-		}
-	});
-
-	const [, t] = useLanguage();
-	const [{ configs }] = useConfig();
-	const [{ parseTime }] = useUtils();
-	const [orderState] = useOrder();
-  const { width } = useWindowDimensions();
-
-  const [toggleTime, setToggleTime] = useState(false);
-	const [optionSelected, setOptionSelected] = useState({
-		isAsap: false,
-		isSchedule: false,
-	});
-	const [momentState, setMomentState] = useState({
-		isLoading: 0,
-		isEditing: false,
-	});
-	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');
-
-	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);
-	};
-
-	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]);
-
-	return (
-		<Container style={{ paddingLeft: 40, paddingRight: 40 }}>
-			<View style={{ paddingBottom: 10 }}>
-				<NavBar
-					onActionLeft={() => goToBack()}
-					btnStyle={{ paddingLeft: 0 }}
-					paddingTop={0}
-					style={{ paddingBottom: 0 }}
-					title={t('WHEN_DO_WE_DELIVERY', 'When do we delivery?')}
-					titleAlign={'center'}
-					titleStyle={{ fontSize: 14 }}
-					titleWrapStyle={{ flexBasis: '80%' }}
-				/>
-
-				<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') + ` (${moment().format('dddd, MMM D, yyyy h:mm A')} + 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 && (
-					<WrapDelveryTime>
-						{datesList.length > 0 && (
-							<View style={styles.dateWrap}>
-								<View style={styles.dateLabel}>
-									<OText size={12} color={theme.colors.disabled}>{dateSelected}</OText>
-								</View>
-								<Days>
-                  {datesList.slice(0, 6).map((date: any, i: any) => {
-                    const dateParts = date.split('-')
-                    const _date = new Date(dateParts[0], dateParts[1] - 1, dateParts[2])
-                    const dayName = t('DAY' + (_date.getDay() >= 1 ? _date.getDay() : 7)).substring(0, 3).toUpperCase()
-                    const dayNumber = (_date.getDate() < 10 ? '0' : '') + _date.getDate()
-                    return (
-                      <TouchableOpacity
-                        key={dayNumber}
-                        style={{ paddingHorizontal: 10, paddingBottom: 10, paddingTop: 10, borderColor: 'transparent', borderWidth: 1 }}
-                      >
-                        <Day onPress={() => handleChangeDate(date)} style={{ width: (width * 0.25) - 108 }}>
-                          <OText
-                            style={styles.dayNameStyle}
-                            color={(dateSelected === date && optionSelected.isSchedule) ? theme.colors.primary : theme.colors.textSecondary}
-                          >{dayName}</OText>
-                          <OText
-                            size={20}
-                            color={(dateSelected === date && optionSelected.isSchedule) ? theme.colors.primary : theme.colors.textSecondary}
-                          >{dayNumber}</OText>
-                        </Day>
-                      </TouchableOpacity>
-                    )
-                  })}
-                </Days>
-							</View>
-						)}
-
-						{hoursList.length > 0 && optionSelected.isSchedule && (
-							<>
-								<TouchableRipple style={styles.timeLabel} onPress={() => { setToggleTime(!toggleTime) }}>
-									<>
-										<OIcon src={theme.images.general.clock} width={16} />
-										<OText style={{ flexGrow: 1, paddingHorizontal: 12 }} color={theme.colors.disabled}>{timeSelected ? timeSelected : t('DELIVERY_TIME', 'Delivery Time')}</OText>
-										<OIcon src={theme.images.general.arrow_down} width={16} style={{ transform: [{ rotate: toggleTime ? '180deg' : '0deg' }] }} />
-									</>
-								</TouchableRipple>
-								{toggleTime ? (
-
-									<WrapHours nestedScrollEnabled={true}>
-										<Hours name="hours">
-											{hoursList.map((hour: any, i: any) => (
-												<Hour
-													key={i}
-													onPress={() => handleChangeMoment(hour.startTime)}
-													disabled={orderState.loading}
-													style={{ borderColor: timeSelected === hour.startTime ? theme.colors.primary : theme.colors.border }}
-												>
-													<OText
-														color={
-															timeSelected === hour.startTime
-																? theme.colors.primary
-																: theme.colors.textSecondary
-														}>
-														{configs?.format_time?.value === '12'
-															? 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',
-															})}
-													</OText>
-												</Hour>
-											))}
-										</Hours>
-									</WrapHours>
-								) : null}
-							</>
-						)}
-					</WrapDelveryTime>
-				)}
-			</View>
-			<Spinner visible={momentState.isLoading === 1} />
-		</Container>
-	);
-};
-
-export const MomentOption = (props: any) => {
-	const momentOptionProps = {
-		...props,
-		UIComponent: MomentOptionUI,
-	};
-	return <MomentOptionController {...momentOptionProps} />;
-};
+import React, { useState, useEffect } from 'react';
+import moment from 'moment';
+import {
+	useLanguage,
+	useConfig,
+	useUtils,
+	useOrder,
+	MomentOption as MomentOptionController,
+} from 'ordering-components/native';
+import { useTheme } from 'styled-components/native';
+import {
+	TouchableOpacity,
+	StyleSheet,
+	useWindowDimensions,
+	View,
+} from 'react-native';
+import Spinner from 'react-native-loading-spinner-overlay';
+import { MomentOptionParams } from '../../types';
+import NavBar from '../NavBar';
+import { OIcon, OText } from '../shared';
+import { Container } from '../../layouts/Container';
+import {
+	WrapSelectOption,
+	Days,
+	Day,
+	WrapHours,
+	Hours,
+	Hour,
+	WrapDelveryTime,
+} from './styles';
+import { TouchableRipple } from 'react-native-paper';
+
+const MomentOptionUI = (props: MomentOptionParams) => {
+	const {
+		navigation,
+		nopadding,
+		datesList,
+		hoursList,
+		dateSelected,
+		timeSelected,
+		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,
+      marginHorizontal: 10,
+      marginTop: 10
+		},
+		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'
+		}
+	});
+
+	const [, t] = useLanguage();
+	const [{ configs }] = useConfig();
+	const [{ parseTime }] = useUtils();
+	const [orderState] = useOrder();
+  const { width } = useWindowDimensions();
+
+  const [toggleTime, setToggleTime] = useState(false);
+	const [optionSelected, setOptionSelected] = useState({
+		isAsap: false,
+		isSchedule: false,
+	});
+	const [momentState, setMomentState] = useState({
+		isLoading: 0,
+		isEditing: false,
+	});
+	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');
+
+	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);
+	};
+
+	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]);
+
+	return (
+		<Container style={{ paddingLeft: 40, paddingRight: 40 }}>
+			<View style={{ paddingBottom: 10 }}>
+				<NavBar
+					onActionLeft={() => goToBack()}
+					btnStyle={{ paddingLeft: 0 }}
+					paddingTop={0}
+					style={{ paddingBottom: 0 }}
+					title={t('WHEN_DO_WE_DELIVERY', 'When do we delivery?')}
+					titleAlign={'center'}
+					titleStyle={{ fontSize: 14 }}
+					titleWrapStyle={{ flexBasis: '80%' }}
+				/>
+
+				<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') + ` (${moment().format('dddd, MMM D, yyyy h:mm A')} + 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 && (
+					<WrapDelveryTime>
+						{datesList.length > 0 && (
+							<View style={styles.dateWrap}>
+								<View style={styles.dateLabel}>
+									<OText size={12} color={theme.colors.disabled}>{dateSelected}</OText>
+								</View>
+								<Days>
+                  {datesList.slice(0, 6).map((date: any, i: any) => {
+                    const dateParts = date.split('-')
+                    const _date = new Date(dateParts[0], dateParts[1] - 1, dateParts[2])
+                    const dayName = t('DAY' + (_date.getDay() >= 1 ? _date.getDay() : 7)).substring(0, 3).toUpperCase()
+                    const dayNumber = (_date.getDate() < 10 ? '0' : '') + _date.getDate()
+                    return (
+                      <TouchableOpacity
+                        key={dayNumber}
+                        style={{ paddingHorizontal: 10, paddingBottom: 10, paddingTop: 10, borderColor: 'transparent', borderWidth: 1 }}
+                      >
+                        <Day onPress={() => handleChangeDate(date)} style={{ width: (width * 0.25) - 108 }}>
+                          <OText
+                            style={styles.dayNameStyle}
+                            color={(dateSelected === date && optionSelected.isSchedule) ? theme.colors.primary : theme.colors.textSecondary}
+                          >{dayName}</OText>
+                          <OText
+                            size={20}
+                            color={(dateSelected === date && optionSelected.isSchedule) ? theme.colors.primary : theme.colors.textSecondary}
+                          >{dayNumber}</OText>
+                        </Day>
+                      </TouchableOpacity>
+                    )
+                  })}
+                </Days>
+							</View>
+						)}
+
+						{hoursList.length > 0 && optionSelected.isSchedule && (
+							<>
+								<TouchableRipple style={styles.timeLabel} onPress={() => { setToggleTime(!toggleTime) }}>
+									<>
+										<OIcon src={theme.images.general.clock} width={16} />
+										<OText style={{ flexGrow: 1, paddingHorizontal: 12 }} color={theme.colors.disabled}>{timeSelected ? timeSelected : t('DELIVERY_TIME', 'Delivery Time')}</OText>
+										<OIcon src={theme.images.general.arrow_down} width={16} style={{ transform: [{ rotate: toggleTime ? '180deg' : '0deg' }] }} />
+									</>
+								</TouchableRipple>
+								{toggleTime ? (
+
+									<WrapHours nestedScrollEnabled={true}>
+										<Hours name="hours">
+											{hoursList.map((hour: any, i: any) => (
+												<Hour
+													key={i}
+													onPress={() => handleChangeMoment(hour.startTime)}
+													disabled={orderState.loading}
+													style={{ borderColor: timeSelected === hour.startTime ? theme.colors.primary : theme.colors.border }}
+												>
+													<OText
+														color={
+															timeSelected === hour.startTime
+																? theme.colors.primary
+																: theme.colors.textSecondary
+														}>
+														{configs?.format_time?.value === '12'
+															? 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',
+															})}
+													</OText>
+												</Hour>
+											))}
+										</Hours>
+									</WrapHours>
+								) : null}
+							</>
+						)}
+					</WrapDelveryTime>
+				)}
+			</View>
+			<Spinner visible={momentState.isLoading === 1} />
+		</Container>
+	);
+};
+
+export const MomentOption = (props: any) => {
+	const momentOptionProps = {
+		...props,
+		UIComponent: MomentOptionUI,
+	};
+	return <MomentOptionController {...momentOptionProps} />;
+};