ordering-ui-react-native 0.16.77 → 0.16.78-release

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

@@ -0,0 +1,78 @@
+import React, { useRef, useState } from 'react'
+import Lottie from 'lottie-react-native';
+import { TouchableOpacity, Easing, ViewStyle, Animated } from 'react-native';
+import IconAntDesign from 'react-native-vector-icons/AntDesign'
+import { useTheme } from 'styled-components';
+
+interface Props {
+    initialValue: number,
+    onClick: any,
+    disableAnimation?: boolean
+    toValue: number,
+    style?: ViewStyle,
+    duration?: number,
+    type: 'favorite', // animation types
+    isActive: boolean,
+    animationType?: ((value: number) => number);
+    useNativeDriver?: boolean,
+    iconProps?: { color?: string, size?: number, style?: ViewStyle }
+}
+
+export const LottieAnimation = (props: Props) => {
+    const {
+        initialValue,
+        onClick,
+        disableAnimation,
+        toValue,
+        style,
+        duration,
+        type,
+        isActive,
+        useNativeDriver,
+        animationType,
+        iconProps
+    } = props
+    const theme = useTheme()
+    const animationProgress = useRef(new Animated.Value(initialValue))
+    const [isHide, setIsHide] = useState(true)
+    const favoriteArray = ['heart', 'hearto']
+    const icon = type === 'favorite' ? favoriteArray : []
+    const animationGif = type === 'favorite' ? theme.images?.general?.heart : ''
+    const onPressLottie = () => {
+        if (!disableAnimation) {
+            setIsHide(false)
+            Animated.timing(animationProgress.current, {
+                toValue,
+                duration: duration || 5000,
+                easing: animationType || Easing.linear,
+                useNativeDriver: useNativeDriver ?? true
+            }).start();
+            hideLottie()
+        }
+        onClick()
+    }
+
+    const hideLottie = () => {
+        setTimeout(() => setIsHide(true), 4500)
+    }
+
+    return (
+        <TouchableOpacity
+            onPress={onPressLottie}
+            style={style}
+        >
+            {!isHide &&
+                <Lottie
+                    progress={animationProgress.current}
+                    source={animationGif}
+                />
+            }
+            <IconAntDesign
+                name={isActive ? icon[0] : icon[1]}
+                color={iconProps?.color || theme.colors.danger5}
+                size={iconProps?.size || 16}
+                style={iconProps?.style}
+            />
+        </TouchableOpacity>
+    )
+}

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

@@ -16,11 +16,12 @@ import {
 	PlaceholderLine,
 	Fade
 } from "rn-placeholder";
-import { View, BackHandler } from 'react-native'
+import { View, BackHandler, Platform } from 'react-native'
 import {
 	MessageListingWrapper,
 	MessageContainer
 } from './styles';
+import { getOrderStatus } from '../../utils'
 
 const OrdersOptionUI = (props: OrdersOptionParams) => {
 	const {
@@ -51,40 +52,6 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 		: theme.images.general.emptyPastOrders
 	const orders = customArray || values || []
 
-	const getOrderStatus = (s: string) => {
-		const status = parseInt(s)
-		const orderStatus = [
-			{ key: 0, value: t('PENDING', 'Pending') },
-			{ key: 1, value: t('COMPLETED', 'Completed') },
-			{ key: 2, value: t('REJECTED', 'Rejected') },
-			{ key: 3, value: t('DRIVER_IN_BUSINESS', 'Driver in business') },
-			{ key: 4, value: t('PREPARATION_COMPLETED', 'Preparation Completed') },
-			{ key: 5, value: t('REJECTED_BY_BUSINESS', 'Rejected by business') },
-			{ key: 6, value: t('REJECTED_BY_DRIVER', 'Rejected by Driver') },
-			{ key: 7, value: t('ACCEPTED_BY_BUSINESS', 'Accepted by business') },
-			{ key: 8, value: t('ACCEPTED_BY_DRIVER', 'Accepted by driver') },
-			{ key: 9, value: t('PICK_UP_COMPLETED_BY_DRIVER', 'Pick up completed by driver') },
-			{ key: 10, value: t('PICK_UP_FAILED_BY_DRIVER', 'Pick up Failed by driver') },
-			{ key: 11, value: t('DELIVERY_COMPLETED_BY_DRIVER', 'Delivery completed by driver') },
-			{ key: 12, value: t('DELIVERY_FAILED_BY_DRIVER', 'Delivery Failed by driver') },
-			{ key: 13, value: t('PREORDER', 'PreOrder') },
-			{ key: 14, value: t('ORDER_NOT_READY', 'Order not ready') },
-			{ key: 15, value: t('ORDER_PICKEDUP_COMPLETED_BY_CUSTOMER', 'Order picked up completed by customer') },
-			{ key: 16, value: t('CANCELLED_BY_CUSTOMER', 'Cancelled by customer') },
-			{ key: 17, value: t('ORDER_NOT_PICKEDUP_BY_CUSTOMER', 'Order not picked up by customer') },
-			{ key: 18, value: t('DRIVER_ALMOST_ARRIVED_TO_BUSINESS', 'Driver almost arrived to business') },
-			{ key: 19, value: t('DRIVER_ALMOST_ARRIVED_TO_CUSTOMER', 'Driver almost arrived to customer') },
-			{ key: 20, value: t('ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS', 'Customer almost arrived to business') },
-			{ key: 21, value: t('ORDER_CUSTOMER_ARRIVED_BUSINESS', 'Customer arrived to business') },
-			{ key: 22, value: t('ORDER_LOOKING_FOR_DRIVER', 'Looking for driver') },
-      		{ key: 23, value: t('ORDER_DRIVER_ON_WAY', 'Driver on way') }
-		]
-
-		const objectStatus = orderStatus.find((o) => o.key === status)
-
-		return objectStatus && objectStatus
-	}
-
 	const handleClickOrder = (uuid: string) => {
 		setSelectedOrderId(uuid)
 		setOpenMessges(true)
@@ -102,7 +69,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 	}, [orderList, loading])
 
 	useEffect(() => {
-		if(refreshOrders){
+		if (refreshOrders) {
 			loadOrders(false, false, false, true)
 			setRefreshOrders && setRefreshOrders(false)
 		}
@@ -225,7 +192,7 @@ const OrderMessageUI = (props: any) => {
 }
 
 export const OrderListing = (props: OrdersOptionParams) => {
-  const [businessState] = useBusiness();
+	const [businessState] = useBusiness();
 	const OrderListingProps = {
 		...props,
 		UIComponent: OrdersOptionUI,
@@ -236,7 +203,7 @@ export const OrderListing = (props: OrdersOptionParams) => {
 			pageSize: 10,
 			controlType: 'infinity'
 		},
-    businessId: businessState?.business?.id,
+		businessId: businessState?.business?.id,
 		profileMessages: true,
 		orderBy: 'last_direct_message_at',
 		orderDirection: 'asc'
@@ -292,7 +259,7 @@ export const MessageListing = (props: MessageListingParams) => {
 				titleAlign={'center'}
 				onActionLeft={goToBack}
 				showCall={false}
-				paddingTop={10}
+				paddingTop={Platform.OS === 'ios' ? 20 : 10}
 				btnStyle={{ paddingLeft: 0 }}
 			/>
 			<OrderListing
@@ -300,7 +267,7 @@ export const MessageListing = (props: MessageListingParams) => {
 				setSelectedOrderId={setSelectedOrderId}
 				setOrderList={setOrderListStatus}
 				setOpenMessges={setOpenMessges}
-        franchiseId={props.franchiseId}
+				franchiseId={props.franchiseId}
 			/>
 			{openMessages && seletedOrder && (
 				<OModal

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

@@ -1,16 +1,19 @@
 import React, { useEffect, useState } from 'react'
+import Clipboard from '@react-native-clipboard/clipboard';
 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, ActionsProps, 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 AntDesignIcon from 'react-native-vector-icons/AntDesign'
 import { OIcon, OIconButton, OText, OButton } from '../shared'
 import { TouchableOpacity, ActivityIndicator, StyleSheet, View, Platform, Keyboard } from 'react-native'
 import { Header, TitleHeader, Wrapper, QuickMessageContainer, ProfileMessageHeader, MessageTypeItem } from './styles'
 import { MessagesParams } from '../../types'
 import { useWindowDimensions } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { getLogisticTag } from '../../utils'
 
 const ORDER_STATUS: any = {
 	0: 'ORDER_STATUS_PENDING',
@@ -36,7 +39,7 @@ const ORDER_STATUS: any = {
 	20: 'ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS',
 	21: 'ORDER_CUSTOMER_ARRIVED_BUSINESS',
 	22: 'ORDER_LOOKING_FOR_DRIVER',
-  	23: 'ORDER_DRIVER_ON_WAY'
+	23: 'ORDER_DRIVER_ON_WAY'
 }
 
 const filterSpecialStatus = ['prepared_in', 'delivered_in', 'delivery_datetime']
@@ -122,18 +125,17 @@ const MessagesUI = (props: MessagesParams) => {
 
 	const messageConsole = (message: any) => {
 		return message.change?.attribute !== 'driver_id'
-		  ?
-		  `${t('ORDER', 'Order')} ${t(message.change.attribute.toUpperCase(), message.change.attribute.replace('_', ' '))} ${t('CHANGED_FROM', 'Changed from')} ${
-			filterSpecialStatus.includes(message.change.attribute) ? 
-			`${message.change.old === null ? '0' : message.change.old} ${t('TO', 'to')} ${message.change.new} ${t('MINUTES', 'Minutes')}` : 
-			`${message.change.old !== null && t(ORDER_STATUS[parseInt(message.change.old, 10)])} ${t('TO', 'to')} ${t(ORDER_STATUS[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')}`
-	  }
+			`${t('ORDER', 'Order')} ${t(message.change.attribute.toUpperCase(), message.change.attribute.replace('_', ' '))} ${t('CHANGED_FROM', 'Changed from')} ${filterSpecialStatus.includes(message.change.attribute) ?
+				`${message.change.old === null ? '0' : message.change.old} ${t('TO', 'to')} ${message.change.new} ${t('MINUTES', 'Minutes')}` :
+				`${message.change?.attribute !== 'logistic_status' ? message.change.old !== null && t(ORDER_STATUS[parseInt(message.change.old, 10)]) : message.change.old !== null && getLogisticTag(message.change.old)} ${t('TO', 'to')} ${message.change?.attribute !== 'logistic_status' ? t(ORDER_STATUS[parseInt(message.change.new, 10)]) : getLogisticTag(message.change.new)}`
+			}`
+			: 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> = []
@@ -141,7 +143,7 @@ const MessagesUI = (props: MessagesParams) => {
 		const firstMessage = {
 			_id: 0,
 			text: _console,
-			createdAt: order?.created_at,
+			createdAt: parseDate(order?.created_at, { outputFormat: 'YYYY-MM-DD HH:mm:ss' }),
 			system: true
 		}
 		const newMessage: any = [];
@@ -150,13 +152,13 @@ const MessagesUI = (props: MessagesParams) => {
 				newMessage.push({
 					_id: message?.id,
 					text: message.type === 1 ? messageConsole(message) : message.comment,
-					createdAt: message.type !== 0 && message.created_at,
+					createdAt: message.type !== 0 && parseDate(message?.created_at, { outputFormat: 'YYYY-MM-DD HH:mm:ss' }),
 					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
+						_id: message.author && message.author.id,
+						name: message.author && message.author.name,
+						avatar: message.author && (message.author.id !== user.id && type === USER_TYPE.DRIVER ? order?.driver?.photo : order?.business?.logo)
 					}
 				});
 			}
@@ -165,13 +167,13 @@ const MessagesUI = (props: MessagesParams) => {
 				newMessage.push({
 					_id: message?.id,
 					text: message.type === 1 ? messageConsole(message) : message.comment,
-					createdAt: message.type !== 0 && message.created_at,
+					createdAt: message.type !== 0 && parseDate(message?.created_at, { outputFormat: 'YYYY-MM-DD HH:mm:ss' }),
 					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
+						_id: message.author && message.author.id ,
+						name: message.author && message.author.name,
+						avatar: message.author && (message.author.id !== user.id && type === USER_TYPE.DRIVER ? order?.driver?.photo : order?.business?.logo)
 					}
 				});
 			}
@@ -397,12 +399,27 @@ const MessagesUI = (props: MessagesParams) => {
 		}
 	}
 
+	const onLongPress = (context: any, message: any) => {
+		const options = [
+			t('COPY_TEXT', 'Copy text'),
+			t('CANCEL', 'Cancel'),
+		];
+		const cancelButtonIndex = options.length - 1;
+		context.actionSheet().showActionSheetWithOptions({
+			options,
+			cancelButtonIndex
+		}, (buttonIndex: any) => buttonIndex === 0 && Clipboard.setString(message.text)
+		);
+	}
+
 	return (
 		<View style={{ height: getViewHeight(), width: '100%', paddingTop: 12, backgroundColor: 'white' }}>
 			<Wrapper>
 				{!isMeesageListing ? (
 					<Header>
-						<OIconButton icon={theme.images.general.arrow_left} style={{ paddingStart: 10, borderColor: theme.colors.clear }} onClick={onClose} />
+						<TouchableOpacity onPress={onClose} style={{ paddingStart: 10, borderColor: theme.colors.clear }}>
+							<AntDesignIcon name='arrowleft' size={26} />
+						</TouchableOpacity>
 						<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}
@@ -419,10 +436,8 @@ const MessagesUI = (props: MessagesParams) => {
 				) : (
 					<ProfileMessageHeader>
 						<View style={{ ...styles.headerTitle }}>
-							<TouchableOpacity
-								style={styles.headerItem}
-								onPress={onClose}>
-								<OIcon src={theme.images.general.arrow_left} width={16} />
+							<TouchableOpacity onPress={onClose} style={styles.headerItem}>
+								<AntDesignIcon name='arrowleft' size={26} />
 							</TouchableOpacity>
 							<OText size={18}>{t('ORDER', theme?.defaultLanguages?.ORDER || 'Order')} #{order?.id}</OText>
 						</View>
@@ -473,6 +488,7 @@ const MessagesUI = (props: MessagesParams) => {
 					onSend={onSubmit}
 					onInputTextChanged={onChangeMessage}
 					alignTop
+					onLongPress={(context: any, message: any) => onLongPress(context, message)}
 					scrollToBottom
 					renderAvatarOnTop
 					renderUsernameOnMessage

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

@@ -13,7 +13,8 @@ import IconAntDesign from 'react-native-vector-icons/AntDesign'
 import {
 	StyleSheet,
 	View,
-	TouchableOpacity
+	TouchableOpacity,
+	Platform
 } from 'react-native';
 import Spinner from 'react-native-loading-spinner-overlay';
 import { MomentOptionParams } from '../../types';
@@ -28,6 +29,7 @@ import {
 	TimeItem
 } from './styles';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { locale, monthsEnum } from '../../utils';
 
 const MomentOptionUI = (props: MomentOptionParams) => {
 	const {
@@ -36,6 +38,7 @@ const MomentOptionUI = (props: MomentOptionParams) => {
 		hoursList,
 		dateSelected,
 		timeSelected,
+    isCart,
 		handleAsap,
 		handleChangeDate,
 		handleChangeTime,
@@ -252,19 +255,22 @@ const MomentOptionUI = (props: MomentOptionParams) => {
 
 	return (
 		<>
-			<Container style={{ paddingLeft: 40, paddingRight: 40 }}>
-				<View style={{ paddingBottom: 90 }}>
+			<Container
+				style={{
+					paddingLeft: 40,
+					paddingRight: 40
+				}}>
+				<View style={{ paddingBottom: 90, paddingRight: 20 }}>
 					<NavBar
 						onActionLeft={() => goToBack()}
 						btnStyle={{ paddingLeft: 0 }}
-						paddingTop={0}
-						style={{ paddingBottom: 0, flexDirection: 'column', alignItems: 'flex-start' }}
+						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' }}>
@@ -281,7 +287,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') + ` (${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 })}
@@ -308,6 +314,7 @@ const MomentOptionUI = (props: MomentOptionParams) => {
 								{selectDate && datesWhitelist[0]?.start !== null && (
 									<CalendarStrip
 										scrollable
+										locale={locale}
 										style={styles.calendar}
 										calendarHeaderContainerStyle={styles.calendarHeaderContainer}
 										calendarHeaderStyle={styles.calendarHeader}
@@ -342,12 +349,12 @@ const MomentOptionUI = (props: MomentOptionParams) => {
 													style={{
 														lineHeight: 24
 													}}
-												>{is12hours ? ( 
-													time.startTime.includes('12') 
+												>{is12hours ? (
+													time.startTime.includes('12')
 														? `${time.startTime}PM`
 														: parseTime(moment(time.startTime, 'HH:mm'), { outputFormat: 'hh:mma' })
-													) : time.startTime
-												}</OText>
+												) : time.startTime
+													}</OText>
 											</TimeItem>
 										</TouchableOpacity>
 									))}
@@ -361,9 +368,11 @@ const MomentOptionUI = (props: MomentOptionParams) => {
 				</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>
+			{!isCart && (
+				<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/MultiCart/index.tsx

@@ -0,0 +1,50 @@
+import React from 'react'
+import { View } from 'react-native'
+import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder'
+import { useTheme } from 'styled-components/native';
+import { MultiCartCreate } from 'ordering-components/native'
+
+import { Container } from '../../layouts/Container';
+import { ChContainer, ChSection, ChUserDetails } from '../Checkout/styles'
+
+export const MultiCartUI = () => {
+  const theme = useTheme();
+  return (
+    <Container noPadding>
+      <ChContainer style={{ paddingHorizontal: 40 }}>
+        <ChSection>
+          <ChUserDetails>
+            <Placeholder Animation={Fade}>
+              <PlaceholderLine height={20} />
+              <PlaceholderLine height={20} />
+              <PlaceholderLine height={20} />
+              <PlaceholderLine height={20} style={{ marginBottom: 20 }} />
+            </Placeholder>
+            <View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginHorizontal: -40, marginBottom: 20 }} />
+            <Placeholder Animation={Fade}>
+              <PlaceholderLine height={20} />
+              <PlaceholderLine height={20} />
+              <PlaceholderLine height={20} />
+              <PlaceholderLine height={20} style={{ marginBottom: 20 }} />
+            </Placeholder>
+            <View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginHorizontal: -40, marginBottom: 20 }} />
+            <Placeholder Animation={Fade}>
+              <PlaceholderLine height={20} />
+              <PlaceholderLine height={120} style={{ marginBottom: 20, borderRadius: 8 }} />
+              <PlaceholderLine height={20} />
+              <PlaceholderLine height={20} />
+            </Placeholder>
+          </ChUserDetails>
+        </ChSection>
+      </ChContainer>
+    </Container>
+  )
+}
+
+export const MultiCart = (props: any) => {
+  const mulcartProps = {
+    ...props,
+    UIComponent: MultiCartUI
+  }
+  return <MultiCartCreate {...mulcartProps} />
+}