ordering-ui-react-native 0.14.90 → 0.14.93

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.14.90",
+  "version": "0.14.93",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",

package/src/DeliveryApp.tsx

@@ -88,7 +88,8 @@ theme.images = {
     close: require('./assets/icons/close.png'),
     orderCreating: require('./assets/images/order-creating.png'),
     orderSuccess: require('./assets/images/order-success.png'),
-    newOrder: require('./assets/images/new-order.png')
+    newOrder: require('./assets/images/new-order.png'),
+    noNetwork: require('./assets/images/no-network.png')
   },
   order: {
     status0: require('./assets/images/status-0.png'),

package/src/providers/AlertProvider.tsx

@@ -28,7 +28,10 @@ const Alert = (props: Props) => {
       show={open}
       showProgress={false}
       title={title}
-      message={getTraduction(content?.[0], t)}
+      message={typeof content === 'string'
+        ? content
+        : getTraduction(content?.[0], t)
+      }
       closeOnTouchOutside={true}
       closeOnHardwareBackPress={false}
       showConfirmButton={true}

package/src/theme.json

@@ -93,7 +93,8 @@
       "close": "",
       "orderCreating": "",
       "orderSuccess": "",
-      "newOrder": ""
+      "newOrder": "",
+      "noNetwork": ""
     },
     "order": {
       "status0": "",

package/themes/business/index.tsx

@@ -10,6 +10,7 @@ import { LanguageSelector } from './src/components/LanguageSelector';
 import { LoginForm } from './src/components/LoginForm';
 import { LogoutButton } from './src/components/LogoutButton';
 import { MessagesOption } from './src/components/MessagesOption';
+import { NetworkError } from './src/components/NetworkError';
 import { NotFoundSource } from './src/components/NotFoundSource';
 import { OrderMessage } from './src/components/OrderMessage';
 import { OrderDetailsBusiness } from './src/components/OrderDetails/Business';
@@ -77,6 +78,7 @@ export {
   MessagesOption,
   MapView,
   NewOrderNotification,
+  NetworkError,
   NotFoundSource,
   OrderDetailsBusiness,
   OrderDetailsDelivery,

package/themes/business/src/components/NetworkError/index.tsx

@@ -0,0 +1,61 @@
+import React from 'react'
+import { useLanguage } from 'ordering-components/native'
+import { Dimensions } from 'react-native'
+import RNRestart from 'react-native-restart'
+import { OText, OIcon, OButton } from '../shared'
+import { useTheme } from 'styled-components/native'
+import { NoNetworkParams } from '../../types'
+import {
+  Container,
+  ImageContainer
+} from './styles'
+
+export const NetworkError = (props: NoNetworkParams) => {
+  const {
+    image
+  } = props
+  const theme = useTheme()
+  const [, t] = useLanguage()
+
+  const noNetworkImage = image || theme.images.general.noNetwork
+  const deviceWidth = Dimensions.get('screen').width
+
+  return (
+    <Container>
+      <OText
+        color={theme.colors.darkText}
+        size={20}
+        weight='700'
+        style={{ marginBottom: 14 }}
+      >
+        {t('MOBILE_NO_INTERNET', 'No internet connection')}
+      </OText>
+      <OText
+        color={theme.colors.darkText}
+        size={14}
+      >
+        {t('NETWORK_OFFLINE_MESSAGE', 'Your connection appears to be off-line. Try to refresh the page')}
+      </OText>
+      <ImageContainer>
+        <OIcon
+          src={noNetworkImage}
+          width={(deviceWidth - 80) * 0.9}
+          height={(deviceWidth - 80) * 0.8}
+        />
+        <OButton
+          text={t('REFRESH', 'Refresh')}
+          bgColor={theme.colors.primary}
+          borderColor={theme.colors.primary}
+          style={{
+            borderRadius: 8,
+            marginTop: 45
+          }}
+          textStyle={{
+            color: theme.colors.white
+          }}
+          onClick={() => RNRestart.Restart()}
+        />
+      </ImageContainer>
+    </Container>
+  )
+}

package/themes/business/src/components/NetworkError/styles.tsx

@@ -0,0 +1,11 @@
+import styled from 'styled-components/native'
+
+export const Container = styled.View`
+  flex: 1;
+  padding: 20px 40px;
+`
+export const ImageContainer = styled.View`
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+`

package/themes/business/src/components/ReviewCustomer/index.tsx

@@ -38,7 +38,6 @@ const ReviewCustomerUI = (props: ReviewCustomerParams) => {
     reviewState,
     setReviewState,
     actionState,
-    handleChangeQualification,
     handleSendCustomerReview
   } = props
 
@@ -105,6 +104,11 @@ const ReviewCustomerUI = (props: ReviewCustomerParams) => {
 
   const commentsList = reviewCommentList('customer')
 
+  const handleChangeQualification = (index: any) => {
+    if (index) setReviewState({ ...reviewState, qualification: index, comment: '' })
+    setComments([])
+  }
+
   const isSelectedComment = (commentKey: number) => {
     const found = comments.find((comment: any) => comment?.key === commentKey)
     return found

package/themes/business/src/types/index.tsx

@@ -575,3 +575,7 @@ export interface ReviewCustomerParams {
   handleChangeQualification?: any,
   handleSendCustomerReview?: any,
 }
+
+export interface NoNetworkParams {
+  image?: any;
+}

package/themes/kiosk/index.tsx

@@ -14,6 +14,7 @@ import { LanguageSelector } from './src/components/LanguageSelector'
 import { LoginForm } from './src/components/LoginForm'
 import { LogoutPopup } from './src/components/LogoutPopup'
 import Navbar from './src/components/NavBar'
+import { NetworkError } from './src/components/NetworkError'
 import { NotFoundSource } from './src/components/NotFoundSource'
 import OptionCard from './src/components/OptionCard'
 import { OrderDetails } from './src/components/OrderDetails'
@@ -82,6 +83,7 @@ export {
   LoginForm,
   LogoutPopup,
   Navbar,
+  NetworkError,
   NotFoundSource,
   OptionCard,
   OrderDetails,

package/themes/kiosk/src/components/NetworkError/index.tsx

@@ -0,0 +1,60 @@
+import React from 'react'
+import { useLanguage } from 'ordering-components/native'
+import { Dimensions } from 'react-native'
+import RNRestart from 'react-native-restart'
+import { OText, OIcon, OButton } from '../shared'
+import { useTheme } from 'styled-components/native'
+import { NoNetworkParams } from '../../types'
+import {
+  Container,
+  ImageContainer
+} from './styles'
+
+export const NetworkError = (props: NoNetworkParams) => {
+  const {
+    image
+  } = props
+  const theme = useTheme()
+  const [, t] = useLanguage()
+
+  const noNetworkImage = image || theme.images.general.noNetwork
+  const deviceHeight = Dimensions.get('screen').height
+
+  return (
+    <Container>
+      <OText
+        size={20}
+        weight='700'
+        style={{ marginBottom: 14 }}
+      >
+        {t('MOBILE_NO_INTERNET', 'No internet connection')}
+      </OText>
+      <OText
+        size={14}
+      >
+        {t('NETWORK_OFFLINE_MESSAGE', 'Your connection appears to be off-line. Try to refresh the page')}
+      </OText>
+      <ImageContainer>
+        <OIcon
+          src={noNetworkImage}
+          width={(deviceHeight - 180) * 0.7}
+          height={(deviceHeight - 180) * 0.63}
+        />
+        <OButton
+          text={t('REFRESH', 'Refresh')}
+          bgColor={theme.colors.primary}
+          borderColor={theme.colors.primary}
+          style={{
+            borderRadius: 8,
+            marginTop: 45,
+            height: 44
+          }}
+          textStyle={{
+            color: theme.colors.white
+          }}
+          onClick={() => RNRestart.Restart()}
+        />
+      </ImageContainer>
+    </Container>
+  )
+}

package/themes/kiosk/src/components/NetworkError/styles.tsx

@@ -0,0 +1,11 @@
+import styled from 'styled-components/native'
+
+export const Container = styled.View`
+  flex: 1;
+  padding: 20px 40px;
+`
+export const ImageContainer = styled.View`
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+`

package/themes/kiosk/src/types/index.d.ts

@@ -473,3 +473,7 @@ export interface Cart {
   total: number;
   clearInactivityTimeout: any;
 }
+
+export interface NoNetworkParams {
+  image?: any;
+}

package/themes/original/index.tsx

@@ -28,6 +28,7 @@ import { Help } from './src/components/Help';
 import { HelpAccountAndPayment } from './src/components/HelpAccountAndPayment';
 import { HelpGuide } from './src/components/HelpGuide';
 import { HelpOrder } from './src/components/HelpOrder';
+import { NetworkError } from './src/components/NetworkError';
 import { NotFoundSource } from './src/components/NotFoundSource';
 import { OrderTypeSelector } from './src/components/OrderTypeSelector';
 import { Wallets } from './src/components/Wallets';
@@ -93,6 +94,7 @@ export {
 	HelpAccountAndPayment,
 	HelpGuide,
 	HelpOrder,
+	NetworkError,
 	NotFoundSource,
 	OrderTypeSelector,
   Wallets,

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

@@ -0,0 +1,61 @@
+import React from 'react'
+import { useLanguage } from 'ordering-components/native'
+import { Dimensions } from 'react-native'
+import RNRestart from 'react-native-restart'
+import { OText, OIcon, OButton } from '../shared'
+import { useTheme } from 'styled-components/native'
+import { NoNetworkParams } from '../../types'
+import {
+  Container,
+  ImageContainer
+} from './styles'
+
+export const NetworkError = (props: NoNetworkParams) => {
+  const {
+    image
+  } = props
+  const theme = useTheme()
+  const [, t] = useLanguage()
+
+  const noNetworkImage = image || theme.images.general.noNetwork
+  const deviceWidth = Dimensions.get('screen').width
+
+  return (
+    <Container>
+      <OText
+        color={theme.colors.textNormal}
+        size={20}
+        weight='700'
+        style={{ marginBottom: 14 }}
+      >
+        {t('MOBILE_NO_INTERNET', 'No internet connection')}
+      </OText>
+      <OText
+        color={theme.colors.textNormal}
+        size={14}
+      >
+        {t('NETWORK_OFFLINE_MESSAGE', 'Your connection appears to be off-line. Try to refresh the page')}
+      </OText>
+      <ImageContainer>
+        <OIcon
+          src={noNetworkImage}
+          width={(deviceWidth - 80) * 0.9}
+          height={(deviceWidth - 80) * 0.8}
+        />
+        <OButton
+          text={t('REFRESH', 'Refresh')}
+          bgColor={theme.colors.primary}
+          borderColor={theme.colors.primary}
+          style={{
+            borderRadius: 8,
+            marginTop: 45
+          }}
+          textStyle={{
+            color: theme.colors.white
+          }}
+          onClick={() => RNRestart.Restart()}
+        />
+      </ImageContainer>
+    </Container>
+  )
+}

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

@@ -0,0 +1,11 @@
+import styled from 'styled-components/native'
+
+export const Container = styled.View`
+  flex: 1;
+  padding: 20px 40px;
+`
+export const ImageContainer = styled.View`
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+`

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

@@ -95,7 +95,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 			{ 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') }
+			{ key: 23, value: t('ORDER_DRIVER_ON_WAY', 'Driver on way') }
 		]
 
 		const objectStatus = orderStatus.find((o) => o.key === status)
@@ -105,9 +105,9 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 
 	useFocusEffect(
 		React.useCallback(() => {
-		  loadOrders()
+			loadOrders()
 		}, [navigation])
-	  )
+	)
 
 	useEffect(() => {
 		const hasMore = pagination?.totalPages && pagination?.currentPage !== pagination?.totalPages
@@ -126,27 +126,11 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 		} else if (!preOrders) {
 			setOrdersLength && setOrdersLength({ ...ordersLength, previousOrdersLength: updateOrders?.length })
 		}
-	}, [orders?.length])
+	}, [orders, activeOrders])
 
 	return (
 		<>
-			<OptionTitle>
-				<OText size={16} lineHeight={24} weight={'500'} color={theme.colors.textNormal} mBottom={10} >
-					{titleContent || (activeOrders
-						? t('ACTIVE', 'Active')
-						: preOrders
-							? t('PREORDERS', 'Preorders')
-							: t('PAST', 'Past'))}
-				</OText>
-			</OptionTitle>
-			{!(activeOrders && ordersLength.activeOrdersLength === 0 && ordersLength.previousOrdersLength === 0) && !loading && orders.length === 0 && (
-				<NotFoundSource
-					content={t('NO_RESULTS_FOUND', 'Sorry, no results found')}
-					image={imageFails}
-					conditioned
-				/>
-			)}
-			{!loading && ordersLength.activeOrdersLength === 0 && ordersLength.previousOrdersLength === 0 && activeOrders && (
+			{!loading && ordersLength.activeOrdersLength === 0 && ordersLength.previousOrdersLength === 0 && !activeOrders && (
 				<NoOrdersWrapper>
 					<OText size={14} numberOfLines={1}>
 						{t('YOU_DONT_HAVE_ORDERS', 'You don\'t have any orders')}
@@ -157,9 +141,32 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 						textStyle={{ color: 'white', fontSize: 14 }}
 						style={{ borderRadius: 7.6, marginBottom: 10, marginTop: 10, height: 44, paddingLeft: 10, paddingRight: 10 }}
 					/>
-					
+
 				</NoOrdersWrapper>
 			)}
+			{(ordersLength.activeOrdersLength > 0 || ordersLength.previousOrdersLength > 0) && (
+				<>
+					<OptionTitle>
+						<OText size={16} lineHeight={24} weight={'500'} color={theme.colors.textNormal} mBottom={10} >
+							{titleContent || (activeOrders
+								? t('ACTIVE', 'Active')
+								: preOrders
+									? t('PREORDERS', 'Preorders')
+									: t('PAST', 'Past'))}
+						</OText>
+					</OptionTitle>
+					{!(ordersLength.activeOrdersLength === 0 && ordersLength.previousOrdersLength === 0) &&
+						!loading &&
+						orders.filter((order: any) => orderStatus.includes(order.status)).length === 0 &&
+						(
+							<NotFoundSource
+								content={t('NO_RESULTS_FOUND', 'Sorry, no results found')}
+								image={imageFails}
+								conditioned
+							/>
+						)}
+				</>
+			)}
 			{loading && (
 				<>
 					{!activeOrders ? (

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

@@ -7,4 +7,5 @@ export const OptionTitle = styled.View`
 export const NoOrdersWrapper = styled.View`
 	flex-direction: column;
 	align-items: center;
+	margin-top: 50px;
 `

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

@@ -123,7 +123,8 @@ const ReviewDriverUI = (props: ReviewDriverParams) => {
   }
 
   const handleChangeQualification = (qualification: number) => {
-    if (qualification) setDriverReviews({ ...dirverReviews, qualification: qualification })
+    if (qualification) setDriverReviews({ ...dirverReviews, qualification: qualification, comment: '' })
+    setComments([])
   }
 
   const handleSendReviewClick = () => {

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

@@ -118,23 +118,8 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
   const commentsList = reviewCommentList('order')
 
   const handleChangeStars = (index: number) => {
-    switch (index) {
-      case 1:
-        setStars({ ...stars, quality: 1, punctiality: 1, service: 1, packaging: 1 })
-        break
-      case 2:
-        setStars({ ...stars, quality: 2, punctiality: 2, service: 2, packaging: 2 })
-        break
-      case 3:
-        setStars({ ...stars, quality: 3, punctiality: 3, service: 3, packaging: 3 })
-        break
-      case 4:
-        setStars({ ...stars, quality: 4, punctiality: 4, service: 4, packaging: 4 })
-        break
-      case 5:
-        setStars({ ...stars, quality: 5, punctiality: 5, service: 5, packaging: 5 })
-        break
-    }
+    if (index) setStars({ ...stars, quality: index, punctiality: index, service: index, packaging: index, comments: '' })
+    setComments([])
   }
 
   const handleChangeComment = (commentItem: any) => {

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

@@ -46,6 +46,7 @@ export const SingleProductReview = (props: SingleProductReviewParams) => {
   const [extraComment, setExtraComment] = useState('')
   const [isShowTextArea, setIsShowTextArea] = useState(false)
   const [qualification, setQualification] = useState(5)
+  const [currentValue, setCurrentValue] = useState(5)
 
   const commentsList = reviewCommentList('product')
 
@@ -65,6 +66,9 @@ export const SingleProductReview = (props: SingleProductReviewParams) => {
   }
 
   useEffect(() => {
+    const value = qualification ? 5 : 1
+    setCurrentValue(value)
+    if (value !== currentValue) setComments([])
     if (comments?.length === 0 && !extraComment && formState.changes?.length === 0 && qualification === 5) return
     let _comments = ''
     if (comments.length > 0) {

package/themes/original/src/types/index.tsx

@@ -520,3 +520,6 @@ export interface MessageListingParams {
 	navigation: any;
 	franchiseId?: any;
 }
+export interface NoNetworkParams {
+	image?: any,
+}