ordering-ui-react-native 0.12.56 → 0.12.60

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

@@ -1,359 +0,0 @@
-import React, { useEffect, useState } from 'react'
-import { Messages as MessagesController, useSession, useUtils, useLanguage, ToastType, useToast } from 'ordering-components/native'
-import { useTheme } from 'styled-components/native';
-import { launchImageLibrary } from 'react-native-image-picker'
-import { GiftedChat, Actions, InputToolbar, Composer, Send, Bubble, MessageImage, InputToolbarProps, ComposerProps } from 'react-native-gifted-chat'
-import { USER_TYPE } from '../../config/constants'
-import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons'
-import { OIcon, OIconButton, OText } from '../shared'
-import { TouchableOpacity, ActivityIndicator, StyleSheet, View, Platform, Keyboard, I18nManager } from 'react-native'
-import { Header, TitleHeader, Wrapper } from './styles'
-import { MessagesParams } from '../../types'
-import { useWindowDimensions } from 'react-native'
-import { useSafeAreaInsets } from 'react-native-safe-area-context'
-import { getOrderStatus } from '../../utils';
-
-const MessagesUI = (props: MessagesParams) => {
-
-	const {
-		type,
-		order,
-		messages,
-		image,
-		message,
-		messagesToShow,
-		sendMessage,
-		setMessage,
-		handleSend,
-		setImage,
-		readMessages,
-		onClose,
-	} = props
-
-	const [{ user }] = useSession()
-	const [{ parseDate }] = useUtils()
-	const [, t] = useLanguage()
-	const [, { showToast }] = useToast();
-
-	const [formattedMessages, setFormattedMessages] = useState<Array<any>>([])
-	const [isKeyboardShow, setIsKeyboardShow] = useState(false)
-	const { height } = useWindowDimensions();
-	const { top, bottom } = useSafeAreaInsets();
-
-	const theme = useTheme();
-
-	const onChangeMessage = (val: string) => {
-		setMessage && setMessage(val)
-	}
-
-	const removeImage = () => {
-		setImage && setImage(null)
-	}
-
-	const imgOptions = {
-		mediaType: 'photo',
-		maxHeight: 300,
-		maxWidth: 300,
-		includeBase64: true,
-	}
-
-	const handleImagePicker = () => {
-		launchImageLibrary(imgOptions, (response: any) => {
-			if (response.didCancel) {
-				console.log('User cancelled image picker');
-			} else if (response.errorMessage) {
-				console.log('ImagePicker Error: ', response.errorMessage);
-				showToast(ToastType.Error, response.errorMessage);
-			} else {
-				if (Platform.OS === 'android') {
-					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'));
-					}
-				} 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'));
-					}
-				}
-			}
-		});
-	};
-
-	const onSubmit = (values: any) => {
-		handleSend && handleSend()
-		setImage && setImage(null)
-		setMessage && setMessage('')
-	}
-
-	const messageConsole = (message: any) => {
-		return message.change?.attribute !== 'driver_id'
-			?
-			`${t('ORDER', 'Order')} ${message.change.attribute} ${t('CHANGED_FROM', 'Changed from')} ${message.change.old !== null && t(getOrderStatus(parseInt(message.change.old, 10)))} ${t('TO', 'to')} ${t(getOrderStatus(parseInt(message.change.new, 10)))}`
-			: message.change.new
-				?
-				`${message.driver?.name} ${message.driver?.lastname !== null ? message.driver.lastname : ''} ${t('WAS_ASSIGNED_AS_DRIVER', 'Was assigned as driver')} ${message.comment ? message.comment.length : ''}`
-				:
-				`${t('DRIVER_UNASSIGNED', 'Driver unassigned')}`
-	}
-
-	useEffect(() => {
-		let newMessages: Array<any> = []
-		const console = `${t('ORDER_PLACED_FOR', 'Order placed for')} ${parseDate(order?.created_at)} ${t('VIA', 'Via')} ${order?.app_id ? t(order?.app_id.toUpperCase(), order?.app_id) : t('OTHER', 'Other')}`
-		const firstMessage = {
-			_id: 0,
-			text: console,
-			createdAt: order?.created_at,
-			system: true
-		}
-		messages.messages.map((message: any) => {
-			let newMessage
-			if (message.type !== 0 && (messagesToShow?.messages?.length || (message?.can_see?.includes('2')) || (message?.can_see?.includes('4') && type === USER_TYPE.DRIVER))) {
-				newMessage = {
-					_id: message.id,
-					text: message.type === 1 ? messageConsole(message) : message.comment,
-					createdAt: message.type !== 0 && message.created_at,
-					image: message.source,
-					system: message.type === 1,
-					user: {
-						_id: message.author.id,
-						name: message.author.name,
-						avatar: message.author.id !== user.id && type === USER_TYPE.DRIVER ? order?.driver?.photo : order?.business?.logo
-					}
-				}
-			}
-			if (message.type === 0) {
-				newMessage = firstMessage
-			}
-			newMessages = [...newMessages, newMessage]
-		})
-		setFormattedMessages([...newMessages.reverse()])
-	}, [messages.messages.length])
-
-	useEffect(() => {
-		const keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', () => {
-			setIsKeyboardShow(true)
-		})
-		const keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', () => {
-			setIsKeyboardShow(false)
-		})
-		return () => {
-			keyboardDidShowListener.remove()
-			keyboardDidHideListener.remove()
-		}
-	}, [])
-
-	const RenderActions = (props: any) => {
-		return (
-			<Actions
-				{...props}
-				options={{
-					'Send Image': () => handleImagePicker(),
-				}}
-				containerStyle={styles.containerActions}
-				optionTintColor='#222845'
-				icon={() => (
-					<>
-						<OIconButton
-							borderColor={theme.colors.white}
-							style={{ width: 32, height: 44, borderRadius: 10, backgroundColor: theme.colors.clear, borderColor: theme.colors.clear }}
-							icon={image ? { uri: image } : theme.images.general.image}
-							iconStyle={{ borderRadius: image ? 10 : 0, width: image ? 32 : 16, height: image ? 32 : 16 }}
-							onClick={handleImagePicker}
-							iconCover
-						/>
-						{image && (
-							<TouchableOpacity
-								style={{ position: 'absolute', top: -3, right: -3, borderColor: theme.colors.backgroundDark, backgroundColor: theme.colors.white, borderRadius: 10 }}
-								onPress={() => removeImage()}
-							>
-								<MaterialCommunityIcon name='close-circle-outline' color={theme.colors.backgroundDark} size={20} />
-							</TouchableOpacity>
-						)}
-					</>
-				)}
-			/>
-		)
-	}
-
-	const renderInputToolbar = (props: typeof InputToolbarProps) => (
-		<InputToolbar
-			{...props}
-			containerStyle={{
-				padding: Platform.OS === 'ios' && isKeyboardShow ? 0 : 10,
-				paddingHorizontal: 40
-			}}
-			primaryStyle={{ alignItems: 'center', justifyContent: 'flex-start' }}
-		/>
-	)
-
-	const renderComposer = (props: typeof ComposerProps) => (
-		<View style={{
-			flexDirection: 'row', width: '80%', alignItems: 'center', backgroundColor: theme.colors.backgroundGray100,
-			borderRadius: 7.6,
-		}}>
-			<Composer
-				{...props}
-				textInputStyle={{
-					height: 32,
-					minHeight: 32,
-					alignItems: 'center',
-					justifyContent: 'center',
-					paddingHorizontal: 12,
-					borderColor: '#DBDCDB',
-					color: '#010300',
-					fontSize: 12,
-					textAlign: I18nManager.isRTL ? 'right' : 'left'
-				}}
-				textInputProps={{
-					value: message,
-					onSubmitEditing: onSubmit,
-					returnKeyType: message ? 'send' : 'done',
-					blurOnSubmit: true,
-					multiline: false,
-					numberOfLines: 1,
-					autoCorrect: false,
-					autoCompleteType: 'off',
-					enablesReturnKeyAutomatically: false,
-					
-				}}
-				placeholder={t('TYPE_YOUR_MESSAGE_HERE', 'Type your message here')}
-			/>
-			<RenderActions {...props} />
-		</View>
-	)
-
-	const renderSend = (props: any) => (
-		<Send
-			{...props}
-			disabled={(sendMessage?.loading || (message === '' && !image) || messages?.loading)}
-			alwaysShowSend
-			containerStyle={styles.containerSend}
-		>
-			<OIconButton
-				onClick={onSubmit}
-				style={{
-					height: 44,
-					width: 44,
-					borderRadius: 7.6,
-					opacity: (sendMessage?.loading || (message === '' && !image) || messages?.loading) ? 0.4 : 1,
-					borderColor: theme.colors.primary,
-					backgroundColor: theme.colors.primary,
-				}}
-				iconStyle={{ marginTop: 3, marginRight: 2 }}
-				icon={theme.images.general.enter}
-				// RenderIcon={sendMessage?.loading ? <ActivityIndicator size='small' color={theme.colors.primary} /> : <View />}
-				disabled={(sendMessage?.loading || (message === '' && !image) || messages?.loading)}
-				disabledColor={theme.colors.white}
-			/>
-		</Send>
-	)
-
-	const renderBubble = (props: any) => (
-		<Bubble
-			{...props}
-			textStyle={{
-				left: {},
-				right: { color: theme.colors.white }
-			}}
-			containerStyle={{
-				left: { marginVertical: 5, borderBottomRightRadius: 7.6 },
-				right: { marginVertical: 5, borderBottomRightRadius: 7.6 }
-			}}
-			wrapperStyle={{
-				left: { backgroundColor: '#f7f7f7', padding: 5, borderBottomLeftRadius: 0 },
-				right: { backgroundColor: theme.colors.primary, padding: 5, borderBottomRightRadius: 0 }
-			}}
-		/>
-	)
-
-	const renderMessageImage = (props: any) => (
-		<MessageImage
-			{...props}
-		/>
-	)
-
-	const renderScrollToBottomComponent = () => (
-		<MaterialCommunityIcon name='chevron-double-down' size={32} />
-	)
-
-	return (
-		<View style={{ height: height - top - bottom, width: '100%' }}>
-			<Wrapper>
-				<Header>
-					<OIconButton icon={theme.images.general.arrow_left} style={{ paddingStart: 10, borderColor: theme.colors.clear }} onClick={onClose} />
-					<View style={{ marginRight: 10, shadowColor: theme.colors.black, shadowOpacity: 0.1, shadowOffset: { width: 0, height: 1 }, shadowRadius: 2 }}>
-						<OIcon
-							url={type === USER_TYPE.DRIVER ? order?.driver?.photo : order?.business?.logo}
-							width={40}
-							height={40}
-							style={{ borderRadius: 7.6 }}
-						/>
-					</View>
-					<TitleHeader>
-						<OText size={14} lineHeight={21} weight={'600'}>{type === USER_TYPE.DRIVER ? order?.driver?.name : order?.business?.name}</OText>
-						<OText size={12} color={theme.colors.textSecondary}>{type === USER_TYPE.DRIVER ? t('DRIVER', 'Driver') : t('BUSINESS', 'Business')}</OText>
-					</TitleHeader>
-				</Header>
-				<GiftedChat
-					messages={formattedMessages}
-					user={{
-						_id: user.id,
-						name: user.name,
-						avatar: user.photo
-					}}
-					onSend={onSubmit}
-					onInputTextChanged={onChangeMessage}
-					alignTop
-					scrollToBottom
-					renderAvatarOnTop
-					renderUsernameOnMessage
-					renderInputToolbar={renderInputToolbar}
-					renderComposer={renderComposer}
-					renderSend={renderSend}
-					renderBubble={renderBubble}
-					renderMessageImage={renderMessageImage}
-					scrollToBottomComponent={() => renderScrollToBottomComponent()}
-					messagesContainerStyle={{
-						paddingVertical: 18,
-						paddingHorizontal: 28,
-					}}
-					isLoadingEarlier={messages.loading}
-					renderLoading={() => <ActivityIndicator size="small" color="#000" />}
-					keyboardShouldPersistTaps='handled'
-				/>
-			</Wrapper>
-		</View>
-	)
-}
-
-const styles = StyleSheet.create({
-	containerActions: {
-		width: 44,
-		height: 44,
-		alignItems: 'center',
-		justifyContent: 'center',
-		marginHorizontal: 4,
-		marginBottom: 0,
-	},
-	containerSend: {
-		width: 64,
-		height: 44,
-		alignItems: 'center',
-		justifyContent: 'center',
-		marginHorizontal: 4
-	}
-})
-
-export const Messages = (props: MessagesParams) => {
-	const MessagesProps = {
-		...props,
-		UIComponent: MessagesUI
-	}
-	return <MessagesController {...MessagesProps} />
-}

package/themes/franchises/src/components/Messages/styles.tsx

@@ -1,20 +0,0 @@
-
-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;
-  background-color: ${(props: any) => props.theme.colors.white};
-  box-shadow: 0 2px 2px #0000001A;
-  padding-bottom: 10px;
-  padding-top: 14px;
-  padding-horizontal: 30px;
-`
-
-export const TitleHeader = styled.View`
-
-`

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

@@ -1,321 +0,0 @@
-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 {
-	ImageStore,
-	StyleSheet,
-	useWindowDimensions,
-	View,
-} from 'react-native';
-import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons';
-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 {
-	HeaderTitle,
-	WrapSelectOption,
-	Days,
-	Day,
-	WrapHours,
-	Hours,
-	Hour,
-	WrapDelveryTime,
-} from './styles';
-import CalendarPicker from 'react-native-calendar-picker';
-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,
-		},
-		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 [optionSelected, setOptionSelected] = useState({
-		isAsap: false,
-		isSchedule: false,
-	});
-	const [momentState, setMomentState] = useState({
-		isLoading: 0,
-		isEditing: false,
-	});
-	const { width } = useWindowDimensions();
-
-	const [toggleTime, setToggleTime] = useState(false);
-
-	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);
-	};
-
-	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 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 });
-		} 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]);
-
-	const customDayHeaderStylesCallback = () => {
-		return {
-			textStyle: {
-				color: theme.colors.disabled,
-				fontSize: 12,
-			},
-		};
-	};
-
-	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>
-								<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}
-								/>
-							</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} />;
-};