ordering-ui-react-native 0.22.57 → 0.22.58-release

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

@@ -1,27 +1,48 @@
 import React, { useState } from 'react'
-import { useTheme } from 'styled-components/native';
-import { Platform, RefreshControl } from 'react-native'
-import { HelpParams } from '../../types'
+import { Platform, RefreshControl, View } from 'react-native'
+import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder'
+import { useTheme } from 'styled-components/native'
 import { useLanguage } from 'ordering-components/native'
+
+import { HelpParams } from '../../types'
+import { CmsContent } from './functions'
+import { HelpSubItem, LastOrdersContainer } from './styles'
+import { Container } from '../../layouts/Container'
+
+import { OText, OIcon } from '../shared'
+import { NotFoundSource } from '../NotFoundSource'
 import NavBar from '../NavBar'
-import { OText } from '../shared'
 import { LastOrders } from '../LastOrders'
-import { Container } from '../../layouts/Container'
 
-import {
-  HelpSubItem,
-  LastOrdersContainer
-} from './styles'
+const HelpUI = (props: HelpParams) => {
+  const { cmsState, navigation } = props
+
+  const { items, loading, error, pages } = cmsState
 
-export const Help = (props: HelpParams) => {
-  const {
-    navigation
-  } = props
   const [, t] = useLanguage()
   const theme = useTheme()
-  const [refreshing] = useState(false);
+
+  const [refreshing] = useState(false)
   const [refresh, setRefresh] = useState(false)
 
+  const HelpItem = ({ item }: any) => {
+    const currentItem = pages.find((p: any) => p.id === item.id)
+    return (
+      <HelpSubItem
+        activeOpacity={0.7}
+        onPress={() => onRedirect('HelpOptions', { item: currentItem })}
+      >
+        <OText size={14} style={{ width: '90%' }}>
+          {item.name}
+        </OText>
+        <OIcon
+          width={15}
+          src={theme.images.general.chevron_right}
+        />
+      </HelpSubItem>
+    )
+  }
+
   const goToBack = () => navigation?.canGoBack() && navigation.goBack()
   const onRedirect = (route: string, params?: any) => {
     navigation.navigate(route, params)
@@ -49,22 +70,36 @@ export const Help = (props: HelpParams) => {
         showCall={false}
         btnStyle={{ paddingLeft: 0 }}
       />
-      <HelpSubItem
-        onPress={() => onRedirect('HelpOrder')}
+      <OText
+        size={20}
+        weight={'bold'}
+        style={{ marginBottom: 20 }}
       >
-        <OText size={14}>{t('HELP_WITH_ORDER', 'Help with an order')}</OText>
-      </HelpSubItem>
-      <HelpSubItem
-        onPress={() => onRedirect('HelpAccountAndPayment')}
-      >
-        <OText size={14}>{t('ACCOUNT_PAYMENT_OPTIONS', 'Account and Payment Options')}</OText>
-      </HelpSubItem>
-      <HelpSubItem
-        onPress={() => onRedirect('HelpGuide')}
-      >
-        <OText size={14}>{t('GUIDE_TO_ORDERING', 'Guide to Ordering')}</OText>
-      </HelpSubItem>
-
+        {t('ALL_THE_THEMES', 'All the themes')}
+      </OText>
+      {!loading && !error && items.map((item: any) => (
+        <HelpItem
+          key={item.id}
+          item={item}
+        />
+      ))}
+      {loading && (
+        <Placeholder Animation={Fade}>
+          <View style={{ flexDirection: 'column' }}>
+            {[...Array(5)].map((_, i) => (
+              <HelpSubItem key={i}>
+                <PlaceholderLine key={i} height={30} width={90} noMargin />
+              </HelpSubItem>
+            ))}
+          </View>
+        </Placeholder>
+      )}
+      {!loading && !!error && (
+        <NotFoundSource
+          simple
+          content={error}
+        />
+      )}
       <LastOrdersContainer>
         <OText size={18} weight={600}>{t('LAST_ORDERS', 'Last Orders')}</OText>
         <LastOrders {...props} onRedirect={onRedirect} refresh={refresh} setRefresh={setRefresh} />
@@ -72,3 +107,13 @@ export const Help = (props: HelpParams) => {
     </Container>
   )
 }
+
+export const Help = (props: HelpParams) => {
+  const helpProps = {
+    ...props,
+    UIComponent: HelpUI
+  }
+  return (
+    <CmsContent {...helpProps} />
+  )
+}

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

@@ -1,9 +1,12 @@
 import styled from 'styled-components/native'
 
 export const HelpSubItem = styled.TouchableOpacity`
-  border-bottom-color: #E9ECEF;
+  border-bottom-color: ${(props: any) => props.theme.colors.border};
   border-bottom-width: 1px;
   padding-vertical: 15px;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
 `
 
 export const LastOrdersContainer = styled.View`

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

@@ -0,0 +1,44 @@
+import React from 'react'
+import { Dimensions, Platform } from 'react-native'
+import { WebView } from 'react-native-webview'
+import { useLanguage } from 'ordering-components/native'
+
+import { Container } from '../../layouts/Container'
+import { NotFoundSource } from '../NotFoundSource'
+import NavBar from '../NavBar'
+
+const HEIGHT_SCREEN = Dimensions.get('screen').height
+
+export const HelpOptions = (props: any) => {
+  const { item, goToBack } = props
+  const [, t] = useLanguage()
+
+  return (
+    <Container
+      pt={Platform.OS === 'ios' ? 20 : 10}
+      noPadding
+    >
+      <NavBar
+        title={t('HELP', 'Help')}
+        titleAlign={'center'}
+        onActionLeft={goToBack}
+        showCall={false}
+        btnStyle={{ paddingLeft: 0 }}
+      />
+      {!!item?.body && (
+        <WebView
+          originWhitelist={['*']}
+          automaticallyAdjustContentInsets={false}
+          source={{ html: item.body }}
+          style={{ flex: 1, height: HEIGHT_SCREEN }}
+        />
+      )}
+      {!item?.body && (
+        <NotFoundSource
+          simple
+          content={t('NO_CONTENT_TO_SHOW', 'Nothing to show')}
+        />
+      )}
+    </Container>
+  )
+}

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

@@ -162,4 +162,4 @@ export const HighestRatedBusinesses = (props: any) => {
   };
 
   return <BusinessesListingController {...highestRatedBusinessesProps} />;
-}; 
+};

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

@@ -1,33 +1,53 @@
-import React, { useEffect } from 'react';
-import { useLanguage, useOrder, useConfig } from 'ordering-components/native';
+import React from 'react';
+import { useLanguage, useOrder, useConfig, useSession, useApi, ToastType, useToast } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import { StyleSheet, View } from 'react-native';
 import { OButton, OIcon, OText } from '../shared';
 import { LanguageSelector } from '../LanguageSelector';
 import { TouchableOpacity } from 'react-native-gesture-handler';
 import { useWindowDimensions, Platform } from 'react-native';
+import uuid from 'react-native-uuid';
 
 export const Home = (props: any) => {
 	const { onNavigationRedirect, businessSlug } = props;
 	const { width, height } = useWindowDimensions();
 	const [, t] = useLanguage();
-	const [orderState] = useOrder();
+	const [orderState, { handleOrderStateLoading, setStateInitialValues }] = useOrder();
 	const [{ configs }] = useConfig()
+	const [, { login }] = useSession()
+	const [ordering] = useApi()
+	const [, { showToast }] = useToast()
 
 	const theme = useTheme();
-	const unaddressedTypes = configs?.unaddressed_order_types_allowed?.value.split('|').map((value: any) => Number(value)) || []
-	const isAllowUnaddressOrderType = unaddressedTypes.includes(orderState?.options?.type)
 
-	useEffect(() => {
-		if (isAllowUnaddressOrderType) {
-			onNavigationRedirect(!!businessSlug ? 'Business' : 'BusinessList')
+	const handleCreateGuestUser = async (values: any) => {
+		try {
+			await handleOrderStateLoading(true)
+			const { content: { error, result } } = await ordering.users().save(values)
+			if (!error) {
+				await login({
+					user: result,
+					token: result.session?.access_token
+				})
+			} else {
+				showToast(ToastType.Error, t('ERROR_CREATING_GUEST_USER', 'Error creating guest users'))
+			}
+			await handleOrderStateLoading(false)
+		} catch (err) {
+			await handleOrderStateLoading(false)
+			showToast(ToastType.Error, t('ERROR_CREATING_GUEST_USER', 'Error creating guest users'))
 		}
-	}, [isAllowUnaddressOrderType])
+	}
+
+	const handleUpdateGuest = async () => {
+		const guestToken = uuid.v4()
+		if (guestToken) await handleCreateGuestUser({ guest_token: guestToken })
+	}
 
 	return (
 		<View style={styles.container}>
 			<View>
-				<View style={{ paddingTop: (height <= 756 && Platform.OS !== 'ios') ? (height * 0.05) : 0 }}>
+				<View style={{paddingTop: (height <= 756 && Platform.OS !== 'ios') ? (height * 0.05) : 0 }}>
 					<LanguageSelector />
 				</View>
 				<OIcon
@@ -53,6 +73,7 @@ export const Home = (props: any) => {
 					isCircle={false}
 					onClick={() => onNavigationRedirect('Login')}
 					imgRightSrc={null}
+					isDisabled={orderState?.loading}
 				/>
 				<OButton
 					text={t('SIGNUP', 'Signup')}
@@ -62,15 +83,13 @@ export const Home = (props: any) => {
 					textStyle={{ color: 'black' }}
 					onClick={() => onNavigationRedirect('Signup')}
 					imgRightSrc={null}
+					isDisabled={orderState?.loading}
 				/>
 				<TouchableOpacity
+					disabled={orderState?.loading}
 					style={{ ...styles.textLink, marginTop: 12 }}
-					onPress={() =>
-						orderState?.options?.address?.address
-							? onNavigationRedirect(!!businessSlug ? 'Business' : 'BusinessList', { isGuestUser: true })
-							: onNavigationRedirect('AddressForm', { isGuestUser: true })
-					}>
-					<OText weight="normal" size={18} color={theme.colors.white}>
+					onPress={() => handleUpdateGuest()}>
+					<OText weight="normal" size={18} color={orderState?.loading ? '#ccc' : theme.colors.white}>
 						{t('CONTINUE_AS_GUEST', 'Continue as guest')}
 					</OText>
 				</TouchableOpacity>

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

@@ -73,7 +73,8 @@ const LoginFormUI = (props: LoginParams) => {
 		generateOtpCode,
 		useLoginOtpEmail,
 		useLoginOtpCellphone,
-		isGuest
+		isGuest,
+		setCellphoneStartZero
 	} = props;
 
 	const [, { showToast }] = useToast();
@@ -106,9 +107,9 @@ const LoginFormUI = (props: LoginParams) => {
 
 	const [isCheckingCode, setCheckingCode] = useState(false)
 
-	const googleLoginEnabled = configs?.google_login_enabled?.value === '1' || !configs?.google_login_enabled?.enabled
-	const facebookLoginEnabled = configs?.facebook_login_enabled?.value === '1' || !configs?.facebook_login_enabled?.enabled
-	const appleLoginEnabled = Platform.OS === 'ios' && (configs?.apple_login_enabled?.value === '1' || !configs?.apple_login_enabled?.enabled)
+	const googleLoginEnabled = configs?.google_login_enabled?.value === '1'
+	const facebookLoginEnabled = configs?.facebook_login_enabled?.value === '1'
+	const appleLoginEnabled = Platform.OS === 'ios' && (configs?.apple_login_enabled?.value === '1')
 
 	const loginStyle = StyleSheet.create({
 		btnOutline: {
@@ -300,6 +301,11 @@ const LoginFormUI = (props: LoginParams) => {
 		setTabLayouts(_tabLayouts)
 	}
 
+	const handleChangePhoneNumber = (number: any, rawNumber: any) => {
+		setPhoneInputData(number)
+		setCellphoneStartZero && setCellphoneStartZero(rawNumber?.number && rawNumber?.countryCallingCode ? rawNumber?.number : null)
+	}
+
 	useEffect(() => {
 		if (configs && Object.keys(configs).length > 0 && enableReCaptcha) {
 			if (configs?.security_recaptcha_type?.value === 'v3' &&
@@ -586,7 +592,7 @@ const LoginFormUI = (props: LoginParams) => {
 							<View style={{ marginBottom: 28 }}>
 								<PhoneInputNumber
 									data={phoneInputData}
-									handleData={(val: any) => setPhoneInputData(val)}
+									handleData={handleChangePhoneNumber}
 									textInputProps={{
 										returnKeyType: 'next',
 										onSubmitEditing: () => passwordRef?.current?.focus?.(),
@@ -630,6 +636,7 @@ const LoginFormUI = (props: LoginParams) => {
 												/>
 											)
 										}
+										autoCapitalize='none'
 										value={value}
 										forwardRef={passwordRef}
 										onChange={(val: any) => onChange(val)}

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

@@ -200,7 +200,7 @@ export const OrderListing = (props: OrdersOptionParams) => {
 	const OrderListingProps = {
 		...props,
 		UIComponent: OrdersOptionUI,
-		orderStatus: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23],
+		orderStatus: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26],
 		useDefualtSessionManager: true,
 		paginationSettings: {
 			initialPage: 1,

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

@@ -1,6 +1,6 @@
 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 { Messages as MessagesController, useSession, useUtils, useLanguage, ToastType, useToast, useConfig } 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'
@@ -39,7 +39,10 @@ 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',
+	24: 'ORDER_DRIVER_WAITING_FOR_ORDER',
+	25: 'ORDER_ACCEPTED_BY_DRIVER_COMPANY',
+	26: 'ORDER_DRIVER_ARRIVED_CUSTOMER'
 }
 
 const filterSpecialStatus = ['prepared_in', 'delivered_in', 'delivery_datetime']
@@ -52,7 +55,6 @@ const MessagesUI = (props: MessagesParams) => {
 		messages,
 		image,
 		message,
-		messagesToShow,
 		sendMessage,
 		setCanRead,
 		setMessage,
@@ -67,13 +69,14 @@ const MessagesUI = (props: MessagesParams) => {
 	} = props
 
 	const [{ user }] = useSession()
+	const [{ configs }] = useConfig()
 	const [{ parseDate }] = useUtils()
 	const [, t] = useLanguage()
 	const [, { showToast }] = useToast();
 
 	const [formattedMessages, setFormattedMessages] = useState<Array<any>>([])
 	const [isKeyboardShow, setIsKeyboardShow] = useState(false)
-	const previousStatus = [1, 2, 5, 6, 10, 11, 12, 16, 17]
+	const previousStatus = [1, 2, 5, 6, 10, 11, 12, 15, 16, 17]
 	const chatDisabled = previousStatus.includes(order?.status)
 	const { height } = useWindowDimensions();
 	const { top, bottom } = useSafeAreaInsets();
@@ -142,23 +145,24 @@ const MessagesUI = (props: MessagesParams) => {
 	}
 
 	useEffect(() => {
-		let newMessages: Array<any> = []
+		const 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,
+			type: 0,
 			text: _console,
 			createdAt: parseDate(order?.created_at, { outputFormat: 'YYYY-MM-DD HH:mm:ss' }),
 			system: true
 		}
-		const newMessage: any = [];
 		messages.messages.map((message: any) => {
 			if (message.change?.attribute === 'driver_group_id') return
-			if (business && message.type !== 0 && (messagesToShow?.messages?.length || message?.can_see?.includes('2'))) {
-				newMessage.push({
+			if (business && message.type !== 0 && (props?.messagesToShow?.messages?.length || message?.can_see?.includes('2'))) {
+				newMessages.push({
 					_id: message?.id,
 					text: message.type === 1 ? messageConsole(message) : message.comment,
 					createdAt: message.type !== 0 && parseDate(message?.created_at, { outputFormat: 'YYYY-MM-DD HH:mm:ss' }),
 					image: message.source,
+					type: message.type,
 					system: message.type === 1,
 					user: {
 						_id: message.author && message.author.id,
@@ -168,12 +172,13 @@ const MessagesUI = (props: MessagesParams) => {
 				});
 			}
 
-			if (driver && message.type !== 0 && (messagesToShow?.messages?.length || message?.can_see?.includes('4'))) {
-				newMessage.push({
+			if (driver && message.type !== 0 && (props?.messagesToShow?.messages?.length || message?.can_see?.includes('4'))) {
+				newMessages.push({
 					_id: message?.id,
 					text: message.type === 1 ? messageConsole(message) : message.comment,
 					createdAt: message.type !== 0 && parseDate(message?.created_at, { outputFormat: 'YYYY-MM-DD HH:mm:ss' }),
 					image: message.source,
+					type: message.type,
 					system: message.type === 1,
 					user: {
 						_id: message.author && message.author.id,
@@ -184,10 +189,12 @@ const MessagesUI = (props: MessagesParams) => {
 			}
 
 			if (message.type === 0) {
-				newMessage.push(firstMessage);
+				newMessages.push(firstMessage);
 			}
 		})
-		setFormattedMessages(newMessage.reverse())
+		let _arrayMessages = [...newMessages.reverse()]
+
+		setFormattedMessages(_arrayMessages);
 	}, [messages.messages.length, business, driver])
 
 	useEffect(() => {
@@ -461,7 +468,7 @@ const MessagesUI = (props: MessagesParams) => {
 										active={business}
 									>
 										<OIcon
-											url={order?.business?.logo || theme.images.dummies.businessLogo}
+											url={order?.business?.logo}
 											width={32}
 											height={32}
 											style={{ borderRadius: 32 }}

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

@@ -0,0 +1,56 @@
+import React from 'react'
+import { Pressable } from 'react-native'
+import {
+    TimeItem,
+} from './styles'
+import { OIcon, OText } from '../shared'
+import { useTheme } from 'styled-components/native'
+
+const timeListItemPropsAreEqual = (prevProps: any, nextProps: any) => {
+    return JSON.stringify(prevProps.time) === JSON.stringify(nextProps.time) && 
+    JSON.stringify(prevProps.selectedTime) === JSON.stringify(nextProps.selectedTime) &&
+    JSON.stringify(prevProps.cateringPreorder) === JSON.stringify(nextProps.cateringPreorder)
+}
+export const TimeListItem = React.memo((props : any) => {
+    const {
+        time,
+        selectedTime,
+        handleChangeTimeSelected,
+        cateringPreorder
+    } = props
+    const theme = useTheme()
+
+    return (
+        <Pressable onPress={() => handleChangeTimeSelected(time.value)}>
+            <TimeItem
+                active={selectedTime === time.value}
+                cateringPreorder={cateringPreorder}
+            >
+                {cateringPreorder && (
+                    <>
+                        {selectedTime === time.value ? (
+                            <OIcon
+                                src={theme.images.general.option_checked}
+                                width={18}
+                                style={{ marginEnd: 24, bottom: 2 }}
+                            />
+                        ) : (
+                            <OIcon
+                                src={theme.images.general.option_normal}
+                                width={18}
+                                style={{ marginEnd: 24, bottom: 2 }}
+                            />
+                        )}
+                    </>
+                )}
+                <OText
+                    size={cateringPreorder ? 18 : 16}
+                    color={selectedTime === time.value ? theme.colors.primary : theme.colors.textNormal}
+                    style={{
+                        lineHeight: 24
+                    }}
+                >{time.text} {cateringPreorder && `- ${time.endText}`}</OText>
+            </TimeItem>
+        </Pressable>
+    )
+}, timeListItemPropsAreEqual)