ordering-ui-react-native 0.15.27 → 0.15.28-release

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

@@ -12,11 +12,9 @@ export const FormSide = styled.View`
   margin: auto;
 `;
 
-export const OTabs = styled.View`
+export const OTabs = styled.ScrollView`
   flex-direction: row;
   width: 100%;
-  flex-wrap: wrap;
-  justify-content: flex-start;
   margin-bottom: -1px;
 `;
 
@@ -36,7 +34,7 @@ export const LoginWith = styled.View`
   width: 100%;
   align-items: flex-start;
   border-bottom-width: 1px;
-  border-bottom-color: ${(props: any) => props.theme.colors.border}
+  border-bottom-color: ${(props: any) => props.theme.colors.border};
 `;
 
 export const FormInput = styled.View`
@@ -80,3 +78,8 @@ export const LineSeparator = styled.View`
 export const SkeletonWrapper = styled.View`
   width: 90%;
 `
+export const RecaptchaButton = styled.View`
+  flex-direction: row;
+  align-items: center;
+  margin-bottom: 10px;
+`

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

@@ -3,14 +3,20 @@ import { TouchableOpacity } from 'react-native';
 import { LogoutAction } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import { OIcon, OText } from '../shared';
+import { _retrieveStoreData } from '../../providers/StoreUtil';
 
 const LogoutButtonUI = (props: any) => {
 	const { handleLogoutClick, text, color, iconSize } = props
 	const theme = useTheme();
 
+	const handleClick = async () => {
+		const data = await _retrieveStoreData('notification_state');
+		handleLogoutClick(data)
+	  };
+	
 	return (
 		<TouchableOpacity
-			onPress={() => handleLogoutClick()}
+			onPress={() => handleClick()}
 			style={{ flexDirection: 'row', alignItems: 'center' }}
 		>
 			<OIcon

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

@@ -36,7 +36,9 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 		loadOrders,
 		setSelectedOrderId,
 		setOrderList,
-		setOpenMessges
+		setOpenMessges,
+		setRefreshOrders,
+		refreshOrders
 	} = props
 
 	const theme = useTheme();
@@ -99,6 +101,13 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 		setOrderList(orderList)
 	}, [orderList, loading])
 
+	useEffect(() => {
+		if(refreshOrders){
+			loadOrders(false, false, false, true)
+			setRefreshOrders && setRefreshOrders(false)
+		}
+	}, [refreshOrders])
+
 	return (
 		<>
 			{!loading && orders.length === 0 && (

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

@@ -39,7 +39,7 @@ const ORDER_STATUS: any = {
   	23: 'ORDER_DRIVER_ON_WAY'
 }
 
-const filterSpecialStatus = ['prepared_in', 'delivered_in']
+const filterSpecialStatus = ['prepared_in', 'delivered_in', 'delivery_datetime']
 
 
 const MessagesUI = (props: MessagesParams) => {
@@ -332,30 +332,34 @@ const MessagesUI = (props: MessagesParams) => {
 		)
 	)
 
-	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}
-				disabled={(sendMessage?.loading || (message === '' && !image) || messages?.loading)}
-				disabledColor={theme.colors.white}
-			/>
-		</Send>
-	)
+	const renderSend = (props: any) => {
+		const isDisabled = (sendMessage?.loading || (message === '' && !image) || messages?.loading)
+		return (
+			<Send
+				{...props}
+				disabled={isDisabled}
+				alwaysShowSend
+				containerStyle={styles.containerSend}
+			>
+				<OIconButton
+					onClick={onSubmit}
+					style={{
+						height: 44,
+						width: 44,
+						borderRadius: 7.6,
+						opacity: isDisabled ? 0.2 : 1,
+						borderColor: isDisabled ? theme.colors.secondary : theme.colors.primary,
+						backgroundColor: isDisabled ? theme.colors.secondary : theme.colors.primary,
+					}}
+					iconStyle={{ marginTop: 3, marginRight: 2 }}
+					icon={theme.images.general.enter}
+					iconColor={isDisabled ? '#000' : '#fff'}
+					disabled={isDisabled}
+					disabledColor={theme.colors.secondary}
+				/>
+			</Send>
+		)
+	}
 
 	const renderBubble = (props: any) => (
 		<Bubble
@@ -536,6 +540,11 @@ const styles = StyleSheet.create({
 
 export const Messages = (props: MessagesParams) => {
 	const [allMessages, setAllMessages] = useState(props.messages)
+
+	useEffect(() => {
+		setAllMessages(props.messages)
+	}, [props.messages])
+
 	const MessagesProps = {
 		...props,
 		UIComponent: MessagesUI,

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

@@ -1,7 +1,5 @@
-
 import styled, { css } from 'styled-components/native'
 
-
 export const Wrapper = styled.View`
   flex: 1;
   background-color: ${(props: any) => props.theme.colors.white};
@@ -39,4 +37,4 @@ export const MessageTypeItem = styled.View`
   ${({ active }: any) => active && css`
     background-color: ${(props: any) => props.theme.colors.whiteGray};
   `}
-`
+`

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

@@ -4,6 +4,7 @@ import CalendarStrip from 'react-native-calendar-strip'
 import {
 	useLanguage,
 	useConfig,
+	useUtils,
 	useOrder,
 	MomentOption as MomentOptionController,
 } from 'ordering-components/native';
@@ -132,6 +133,7 @@ const MomentOptionUI = (props: MomentOptionParams) => {
 
 	const [, t] = useLanguage();
 	const [{ configs }] = useConfig();
+	const [{ parseTime }] = useUtils()
 	const [orderState] = useOrder();
 	const [optionSelected, setOptionSelected] = useState({
 		isAsap: false,
@@ -143,6 +145,8 @@ const MomentOptionUI = (props: MomentOptionParams) => {
 	});
 	const { bottom } = useSafeAreaInsets();
 
+	const is12hours = configs?.dates_moment_format?.value?.includes('hh:mm')
+
 	const [selectedTime, setSelectedTime] = useState(null);
 	const [datesWhitelist, setDateWhitelist] = useState<any>([{ start: null, end: null }])
 	const [selectDate, setSelectedDate] = useState<any>(null)
@@ -338,7 +342,12 @@ const MomentOptionUI = (props: MomentOptionParams) => {
 													style={{
 														lineHeight: 24
 													}}
-												>{time.startTime}</OText>
+												>{is12hours ? ( 
+													time.startTime.includes('12') 
+														? `${time.startTime}PM`
+														: parseTime(moment(time.startTime, 'HH:mm'), { outputFormat: 'hh:mma' })
+													) : time.startTime
+												}</OText>
 											</TimeItem>
 										</TouchableOpacity>
 									))}

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

@@ -18,7 +18,7 @@ export const OrderTimeWrapper = styled.View`
 
 export const TimeListWrapper = styled.ScrollView`
   margin-top: 30px;
-  max-height: 160px;
+  max-height: 210px;
 `
 
 export const TimeContentWrapper = styled.View`

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

@@ -1,10 +1,12 @@
 import React, { useState, useEffect } from 'react';
 import { View, StyleSheet, BackHandler, Platform, Linking } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
+import { _setStoreData } from '../../providers/StoreUtil';
 import {
   useLanguage,
   OrderDetails as OrderDetailsConTableoller,
   useUtils,
+  useOrder,
   useConfig
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
@@ -40,7 +42,7 @@ import { OSRow } from '../OrderSummary/styles';
 import AntIcon from 'react-native-vector-icons/AntDesign'
 import { TaxInformation } from '../TaxInformation';
 import { Placeholder, PlaceholderLine } from 'rn-placeholder';
-
+import NavBar from '../NavBar'
 export const OrderDetailsUI = (props: OrderDetailsParams) => {
   const {
     navigation,
@@ -80,17 +82,20 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
       justifyContent: 'flex-start',
       paddingLeft: 0,
       height: 30,
-      width: 40,
+      width: 30,
+      marginTop: Platform.OS === 'ios' ? 0 : 30
     },
   });
 
   const [, t] = useLanguage();
   const [{ parsePrice, parseNumber, parseDate }] = useUtils();
   const [{ configs }] = useConfig();
+  const [{ carts }] = useOrder()
+
   const [isReviewed, setIsReviewed] = useState(false)
   const [openTaxModal, setOpenTaxModal] = useState<any>({ open: false, tax: null, type: '' })
-
   const { order, businessData } = props.order;
+  const mapValidStatuses = [9, 19, 23]
 
   const walletName: any = {
     cash: {
@@ -328,7 +333,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
   };
 
   const getIncludedTaxes = () => {
-    if (order?.taxes?.length === 0) {
+    if (order?.taxes?.length === 0 || !order?.taxes) {
       return order.tax_type === 1 ? order?.summary?.tax ?? 0 : 0
     } else {
       return order?.taxes.reduce((taxIncluded: number, tax: any) => {
@@ -361,11 +366,24 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
 
 
   useEffect(() => {
+    const _businessId = 'businessId:' + businessData?.id
     if (reorderState?.error) {
-      navigation.navigate('Business', { store: businessData?.slug })
+      if (businessData?.id) {
+        _setStoreData('adjust-cart-products', JSON.stringify(_businessId))
+        navigation.navigate('Business', { store: businessData?.slug })
+      }
     }
-    if (!reorderState?.error && reorderState?.result?.uuid) {
-      onNavigationRedirect && onNavigationRedirect('CheckoutNavigator', { cartUuid: reorderState?.result.uuid })
+    if (!reorderState?.error && reorderState.loading === false && businessData?.id) {
+      const products = carts?.[_businessId]?.products
+      const available = products.every((product: any) => product.valid === true)
+
+      if (available && reorderState?.result?.uuid && (products?.length === order?.products.length)) {
+        onNavigationRedirect && onNavigationRedirect('CheckoutNavigator', { cartUuid: reorderState?.result.uuid })
+      } else {
+        _setStoreData('adjust-cart-products', JSON.stringify(_businessId))
+        products?.length !== order?.products.length && _setStoreData('already-removed', JSON.stringify('removed'))
+        navigation.navigate('Business', { store: businessData?.slug })
+      }
     }
   }, [reorderState])
 
@@ -397,6 +415,12 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
         'https://res.cloudinary.com/demo/image/upload/c_thumb,g_face,r_max/d_avatar.png/non_existing_id.png',
     },
   ];
+  const driverLocationString = typeof order?.driver?.location?.location === 'string' && order?.driver?.location?.location?.split(',').map((l: string) => l.replace(/[^-.0-9]/g, ''))
+  const parsedLocations = locations.map(location => typeof location?.location === 'string' ? {
+      ...location,
+      lat: parseFloat(location?.location?.split(',')[0].replace(/[^-.0-9]/g, '')),
+      lng: parseFloat(location?.location?.split(',')[1].replace(/[^-.0-9]/g, ''))
+    } : location)
 
   useEffect(() => {
     if (driverLocation) {
@@ -461,27 +485,23 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
       {order && Object.keys(order).length > 0 && (
         <>
           <Header>
-            <OButton
-              imgLeftSrc={theme.images.general.arrow_left}
-              imgRightSrc={null}
-              style={styles.btnBackArrow}
-              onClick={() => handleArrowBack()}
-              imgLeftStyle={{ tintColor: theme.colors.disabled }}
+            <NavBar
+              title={`${t('ORDER', 'Order')} #${order?.id}`}
+              titleAlign={'center'}
+              onActionLeft={handleArrowBack}
+              showCall={false}
+              btnStyle={{ paddingLeft: 0 }}
+              style={{ marginTop: Platform.OS === 'ios' ? 0 : 20 }}
+              titleWrapStyle={{ paddingHorizontal: 0 }}
+              titleStyle={{ marginRight: 0, marginLeft: 0 }}
+              subTitle={<OText size={12} lineHeight={18} color={theme.colors.textNormal}>
+                {order?.delivery_datetime_utc
+                  ? parseDate(order?.delivery_datetime_utc)
+                  : parseDate(order?.delivery_datetime, { utc: false })}
+              </OText>}
             />
             <OrderInfo>
               <OrderData>
-                <OText
-                  size={20}
-                  lineHeight={30}
-                  weight={'600'}
-                  color={theme.colors.textNormal}>
-                  {t('ORDER', 'Order')} #{order?.id}
-                </OText>
-                <OText size={12} lineHeight={18} color={theme.colors.textNormal}>
-                  {order?.delivery_datetime_utc
-                    ? parseDate(order?.delivery_datetime_utc)
-                    : parseDate(order?.delivery_datetime, { utc: false })}
-                </OText>
                 {
                   (
                     parseInt(order?.status) === 1 ||
@@ -662,7 +682,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                   </OText>
                 </View>
               )}
-              {order?.comment && (
+              {!!order?.comment && (
                 <View style={{ marginTop: 15 }}>
                   <OText size={16} style={{ textAlign: 'left' }} color={theme.colors.textNormal}>
                     {t('COMMENT', 'Comment')}
@@ -672,11 +692,16 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
               )}
               {order?.driver && (
                 <>
-                  {order?.driver?.location && parseInt(order?.status) === 9 && (
+                  {order?.driver?.location && mapValidStatuses.includes(parseInt(order?.status)) && (
                     <Map>
-                      <GoogleMap
-                        location={order?.driver?.location}
-                        locations={locations}
+                     <GoogleMap
+                        location={typeof order?.driver?.location?.location === 'string'
+                        ? {
+                            lat: parseFloat(driverLocationString[0]),
+                            lng: parseFloat(driverLocationString[1]),
+                          } : driverLocation ?? order?.driver?.location
+                        }
+                        locations={parsedLocations}
                         readOnly
                       />
                     </Map>
@@ -890,7 +915,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                     <OSRow>
                       <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal} numberOfLines={1}>
                         {fee.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}
-                        ({fee?.fixed > 0 && `${parsePrice(fee?.fixed)} + `}{fee.percentage}%){' '}
+                        ({fee?.fixed > 0 && `${parsePrice(fee?.fixed)}${fee.percentage > 0 ? ' + ' : ''}`}{fee.percentage > 0 && `${fee.percentage}%`}){' '}
                       </OText>
                       <TouchableOpacity onPress={() => setOpenTaxModal({ open: true, data: fee, type: 'fee' })}>
                         <AntIcon name='infocirlceo' size={16} color={theme.colors.primary} />
@@ -1017,8 +1042,6 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
         open={openTaxModal.open}
         onClose={() => setOpenTaxModal({ open: false, data: null, type: '' })}
         entireModal
-        title={`${openTaxModal.data?.name ||
-          t('INHERIT_FROM_BUSINESS', 'Inherit from business')} ${openTaxModal.data?.rate_type !== 2 ? `(${typeof openTaxModal.data?.rate === 'number' ? `${openTaxModal.data?.rate}%` : `${parsePrice(openTaxModal.data?.fixed ?? 0)} + ${openTaxModal.data?.percentage}%`})` : ''}  `}
       >
         <TaxInformation
           type={openTaxModal.type}

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

@@ -5,7 +5,6 @@ export const OrderDetailsContainer = styled.ScrollView`
 `
 
 export const NavBack = styled.TouchableOpacity`
-
 `
 
 
@@ -127,4 +126,4 @@ export const Divider = styled.View`
 `
 export const OrderAction = styled.View`
   flex-direction: row;
-`
+`

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

@@ -98,7 +98,7 @@ const OrderProgressUI = (props: any) => {
       { key: 20, value: t('ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS', theme?.defaultLanguages?.ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS || 'Customer almost arrived to business'), slug: 'ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS', percentage: 90 },
       { key: 21, value: t('ORDER_CUSTOMER_ARRIVED_BUSINESS', theme?.defaultLanguages?.ORDER_CUSTOMER_ARRIVED_BUSINESS || 'Customer arrived to business'), slug: 'ORDER_CUSTOMER_ARRIVED_BUSINESS', percentage: 95 },
       { key: 22, value: t('ORDER_LOOKING_FOR_DRIVER', theme?.defaultLanguages?.ORDER_LOOKING_FOR_DRIVER || 'Looking for driver'), slug: 'ORDER_LOOKING_FOR_DRIVER', percentage: 35 },
-      { key: 23, value: t('ORDER_DRIVER_ON_WAY', theme?.defaultLanguages?.ORDER_DRIVER_ON_WAY  || 'Driver on way'), slug: 'ORDER_DRIVER_ON_WAY', percentage: 45 }
+      { key: 23, value: t('ORDER_DRIVER_ON_WAY', theme?.defaultLanguages?.ORDER_DRIVER_ON_WAY || 'Driver on way'), slug: 'ORDER_DRIVER_ON_WAY', percentage: 45 }
     ]
 
     const objectStatus = orderStatus.find((o) => o.key === status)
@@ -131,7 +131,7 @@ const OrderProgressUI = (props: any) => {
 
   useEffect(() => {
     if (isFocused) {
-      loadOrders()
+      loadOrders(false, false, false, true)
     }
   }, [isFocused])
 
@@ -188,7 +188,7 @@ const OrderProgressUI = (props: any) => {
               <ProgressBar style={{ width: getOrderStatus(lastOrder.status)?.percentage ? `${getOrderStatus(lastOrder.status)?.percentage}%` : '0%' }} />
             </ProgressContentWrapper>
             <ProgressTextWrapper>
-              <OText size={12}>{getOrderStatus(lastOrder.status)?.value}</OText>
+              <OText size={12} style={{ width: '50%' }}>{getOrderStatus(lastOrder.status)?.value}</OText>
               <TimeWrapper>
                 <OText size={11}>{t('ESTIMATED_DELIVERY', 'Estimated delivery')}</OText>
                 <OText size={11}>
@@ -218,7 +218,7 @@ export const OrderProgress = (props: any) => {
   const orderProgressProps = {
     ...props,
     UIComponent: OrderProgressUI,
-    orderStatus: [0, 3, 4, 7, 8, 9, 13, 14, 15, 18, 19, 20, 21, 22, 23],
+    orderStatus: [0, 3, 4, 7, 8, 9, 13, 14, 18, 19, 20, 21, 22, 23],
     useDefualtSessionManager: true,
     paginationSettings: {
       initialPage: 1,

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

@@ -20,6 +20,7 @@ export const ProgressTextWrapper = styled.View`
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
+  width: 100%;
 `
 
 export const OrderInfoWrapper = styled.View`

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

@@ -71,7 +71,7 @@ const OrderSummaryUI = (props: any) => {
   }
 
   const getIncludedTaxes = () => {
-    if (cart?.taxes === null) {
+    if (cart?.taxes === null || !cart?.taxes) {
       return cart.business.tax_type === 1 ? cart?.tax : 0
     } else {
       return cart?.taxes.reduce((taxIncluded: number, tax: any) => {
@@ -112,7 +112,7 @@ const OrderSummaryUI = (props: any) => {
       {cart?.products?.length > 0 && (
         <>
           <OSProductList>
-            {cart?.products.map((product: any) => (
+            {cart?.products?.map((product: any) => (
               <ProductItemAccordion
                 key={product.code}
                 product={product}
@@ -202,7 +202,7 @@ const OrderSummaryUI = (props: any) => {
                     <OSRow>
                       <OText size={12} numberOfLines={1}>
                         {fee.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}{' '}
-                        ({parsePrice(fee?.fixed)} + {fee?.percentage}%){' '}
+                        ({fee?.fixed > 0 && `${parsePrice(fee?.fixed)}${fee.percentage > 0 ? ' + ' : ''}`}{fee.percentage > 0 && `${fee.percentage}%`}){' '}
                       </OText>
                       <TouchableOpacity onPress={() => setOpenTaxModal({ open: true, data: fee, type: 'fee' })} >
                         <AntIcon name='infocirlceo' size={16} color={theme.colors.primary} />

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

@@ -19,7 +19,8 @@ const OrderTypeSelectorUI = (props: OrderTypeSelectParams) => {
 		typeSelected,
 		defaultValue,
 		configTypes,
-		orderTypes
+		orderTypes,
+		setOrderTypeValue
 	} = props
 
 	const theme = useTheme();
@@ -39,6 +40,7 @@ const OrderTypeSelectorUI = (props: OrderTypeSelectParams) => {
 
 	const handleChangeOrderTypeCallback = (orderType: number) => {
 		if (!orderState.loading) {
+			setOrderTypeValue && setOrderTypeValue(orderType)
 			handleChangeOrderType(orderType)
 			goToBack();
 		}
@@ -51,7 +53,7 @@ const OrderTypeSelectorUI = (props: OrderTypeSelectParams) => {
 				btnStyle={{ paddingLeft: 0 }}
 				paddingTop={0}
 				style={{ paddingBottom: 0 }}
-				title={t('HOW_WILL_YOUR_ORDER_TYPE', 'How will your order type?')}
+				title={t('HOW_WILL_YOU_DELIVERY_TYPE', 'How will your order type?')}
 				titleAlign={'center'}
 				titleStyle={{ fontSize: 14 }}
 			/>