ordering-ui-react-native 0.9.2 → 0.9.6

package/src/components/SingleProductReview/index.tsx

@@ -0,0 +1,166 @@
+import React, { useState, useEffect } from 'react'
+import { useLanguage } from 'ordering-components/native'
+import { OText, OButton, OInput } from '../shared'
+import { StyleSheet, TouchableOpacity, View } from 'react-native'
+import AntDesignIcons from 'react-native-vector-icons/AntDesign'
+import { useTheme } from 'styled-components/native'
+import { SingleProductReviewParams } from '../../types'
+
+import {
+  ProductContainer,
+  ProductHeader,
+  LikeHandsActionContainer,
+  LikeHandsButton,
+  CommentsButtonGroup,
+} from './styles'
+
+export const SingleProductReview = (props: SingleProductReviewParams) => {
+  const {
+    product,
+    formState,
+    handleChangeFormState,
+  } = props
+
+  const [, t] = useLanguage()
+  const theme = useTheme()
+
+  const styles = StyleSheet.create({
+    inputTextArea: {
+      borderColor: theme.colors.lightGray,
+      borderRadius: 8,
+      marginTop: 10,
+      marginBottom: 40,
+      height: 100,
+      alignItems: 'flex-start'
+    },
+    additionalCommentButton: {
+      flexDirection: 'row',
+      justifyContent: 'center',
+      marginVertical: 10,
+    },
+  })
+
+  const [comments, setComments] = useState<Array<any>>([])
+  const [extraComment, setExtraComment] = useState('')
+  const [isShowTextArea, setIsShowTextArea] = useState(false)
+  const [qualification, setQualification] = useState(5)
+
+  const commentsList = [
+    { key: 0, content: t('IT_WASNT_TASTY', "It wasn't tasty") },
+    { key: 1, content: t('SMALL_PORTION', 'Small portion') },
+    { key: 2, content: t('WET_OR_LEAKY', 'Wet or leaky') },
+    { key: 3, content: t('SLOPPY_PRESENTATION', 'Sloppy presentation') },
+    { key: 4, content: t('COLD_OR_MELTED', 'Cold or melted') }
+  ]
+
+  const isSelectedComment = (commentKey: number) => {
+    const found = comments.find((comment: any) => comment?.key === commentKey)
+    return found
+  }
+
+  const handleChangeComment = (commentItem: any) => {
+    const found = comments.find((comment: any) => comment?.key === commentItem.key)
+    if (found) {
+      const _comments = comments.filter((comment: any) => comment?.key !== commentItem.key)
+      setComments(_comments)
+    } else {
+      setComments([...comments, commentItem])
+    }
+  }
+
+  useEffect(() => {
+    if (comments?.length === 0 && !extraComment && formState.changes?.length === 0 && qualification === 5) return
+    let _comments = ''
+    if (comments.length > 0) {
+      comments.map(comment => (_comments += comment.content + '. '))
+    }
+    const _comment = _comments + extraComment
+    let found = false
+    const _changes = formState.changes.map((item: any) => {
+      if (item?.product_id === product?.product_id) {
+        found = true
+        return {
+          product_id: product?.product_id,
+          comment: _comment,
+          qualification: qualification
+        }
+      }
+      return item
+    })
+    if (!found) {
+      _changes.push({
+        product_id: product?.product_id,
+        comment: _comment,
+        qualification: qualification
+      })
+    }
+    handleChangeFormState && handleChangeFormState(_changes)
+  }, [comments, extraComment, qualification])
+
+  return (
+    <>
+      <ProductContainer>
+        <ProductHeader>
+          <OText numberOfLines={1} style={{ flex: 1 }}>{product?.name}</OText>
+          <LikeHandsActionContainer>
+            <LikeHandsButton
+              isLike
+              onPress={() => setQualification(5)}
+            >
+              <AntDesignIcons name='like2' size={20} color={qualification === 5 ? theme.colors.primary : theme.colors.lightGray} />
+            </LikeHandsButton>
+            <LikeHandsButton onPress={() => setQualification(1)}>
+              <AntDesignIcons name='dislike2' size={20} color={qualification === 1 ? theme.colors.primary : theme.colors.lightGray} />
+            </LikeHandsButton>
+          </LikeHandsActionContainer>
+        </ProductHeader>
+        <CommentsButtonGroup>
+          {commentsList.map(commentItem => (
+            <OButton
+              key={commentItem.key}
+              text={commentItem.content}
+              bgColor={isSelectedComment(commentItem.key) ? theme.colors.primary : theme.colors.lightGray}
+              borderColor={isSelectedComment(commentItem.key) ? theme.colors.primary : theme.colors.lightGray}
+              textStyle={{
+                color: isSelectedComment(commentItem.key) ? theme.colors.white : theme.colors.black,
+                fontSize: 13,
+                paddingRight: isSelectedComment(commentItem.key) ? 15 : 0
+              }}
+              style={{ height: 35, paddingLeft: 5, paddingRight: 5, marginHorizontal: 3, marginVertical: 10 }}
+              imgRightSrc={isSelectedComment(commentItem.key) ? theme.images.general.close : null}
+              imgRightStyle={{ tintColor: theme.colors.white, right: 5, margin: 5 }}
+              onClick={() => handleChangeComment(commentItem) }
+            />
+          ))}
+        </CommentsButtonGroup>
+        <TouchableOpacity
+          style={styles.additionalCommentButton}
+          onPress={() => setIsShowTextArea(!isShowTextArea)}
+        >
+          <OText
+            color={isShowTextArea ? theme.colors.primary : theme.colors.lightGray}
+            style={{
+              borderBottomColor: isShowTextArea ? theme.colors.primary : theme.colors.lightGray,
+              borderBottomWidth: 1
+            }}
+          >
+            {t('ADDITIONAL_COMMENTS', 'Additional comments')}
+          </OText>
+        </TouchableOpacity>
+        {isShowTextArea && (
+          <View>
+            <OText style={{ marginTop: 10 }}>{t('REVIEW_COMMENT_QUESTION', 'Do you want to add something?')}</OText>
+            <OInput
+              name='comments'
+              onChange={(val: any) => {
+                setExtraComment(val.target.value)
+              }}
+              style={styles.inputTextArea}
+              multiline
+            />
+          </View>
+        )}
+      </ProductContainer>
+    </>
+  )
+}

package/src/components/SingleProductReview/styles.tsx

@@ -0,0 +1,26 @@
+import styled, { css } from 'styled-components/native'
+
+export const ProductContainer = styled.View`
+  margin-bottom: 15px;
+`
+
+export const ProductHeader = styled.View`
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+`
+
+export const LikeHandsActionContainer = styled.View`
+  flex-direction: row;
+`
+
+export const LikeHandsButton = styled.TouchableOpacity`
+  ${(props: any) => props.isLike && css`
+    margin-horizontal: 15px;
+  `}
+`
+
+export const CommentsButtonGroup = styled.View`
+  flex-direction: row;
+  flex-wrap: wrap;
+`

package/src/components/shared/OButton.tsx

@@ -52,7 +52,6 @@ const EndImage = styled.Image`
   width: 15px;
   height: 15px;
   resize-mode: contain;
-  right: 20px;
   position: absolute;
   right: 20px;
 `;

package/src/index.tsx

@@ -49,7 +49,9 @@ import { ProductIngredient } from './components/ProductIngredient';
 import { ProductItemAccordion } from './components/ProductItemAccordion';
 import { ProductOption } from './components/ProductOption';
 import { ProductOptionSubOption } from './components/ProductOptionSubOption';
+import { ReviewDriver } from './components/ReviewDriver';
 import { ReviewOrder } from './components/ReviewOrder';
+import { ReviewProducts } from './components/ReviewProducts';
 import { SearchBar } from './components/SearchBar';
 import { SignupForm } from './components/SignupForm';
 import { SingleProductCard } from './components/SingleProductCard';
@@ -62,6 +64,7 @@ import { UserDetails } from './components/UserDetails';
 import { UserFormDetailsUI } from './components/UserFormDetails';
 import { UserProfileForm } from './components/UserProfileForm';
 import { VerifyPhone } from './components/VerifyPhone';
+import { HelpParams } from './types';
 import {
   OAlert,
   OBottomPopup,
@@ -77,6 +80,7 @@ import {
 
 // layouts
 import { Container } from './layouts/Container';
+import { FloatingBottomContainer } from './layouts/FloatingBottomContainer';
 import { SafeAreaContainer } from './layouts/SafeAreaContainer';
 
 // providers
@@ -141,7 +145,9 @@ export {
   ProductItemAccordion,
   ProductOption,
   ProductOptionSubOption,
+  ReviewDriver,
   ReviewOrder,
+  ReviewProducts,
   SearchBar,
   SignupForm,
   SingleProductCard,
@@ -166,6 +172,7 @@ export {
   OToast,
   // layouts
   Container,
+  FloatingBottomContainer,
   SafeAreaContainer,
   // providers
   Alert,
@@ -175,4 +182,6 @@ export {
   useTheme,
   // hooks
   DeviceOrientationMethods,
+  //types
+  HelpParams,
 }

package/src/layouts/FloatingBottomContainer.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import styled from 'styled-components/native'
+import { Platform, Dimensions } from 'react-native'
+const windowWidth = Dimensions.get('window').width
+
+export const Container = styled.View`
+  position: absolute;
+  flex: 1;
+  bottom: 0px;
+  left: 0;
+  right: 0;
+  padding: 10px;
+  border-top-width: 1px;
+  border-color: ${(props: any) => props.theme.colors.lightGray};
+  z-index: 1000;
+  background-color: ${(props: any) => props.bgColor ? props.bgColor : '#FFF'};
+  padding-bottom: ${Platform.OS === 'ios' ? '20px' : '10px'};
+`
+
+export const FloatingBottomContainer = (props: any) => {
+  return (
+    <Container style={{ width: windowWidth }}>
+      {props.children}
+    </Container>
+  )
+}

package/src/navigators/HomeNavigator.tsx

@@ -12,6 +12,8 @@ import AddressForm from '../pages/AddressForm';
 import OrderDetails from '../pages/OrderDetails';
 import BusinessProductsList from '../pages/BusinessProductsList';
 import ReviewOrder from '../pages/ReviewOrder'
+import ReviewProducts from '../pages/ReviewProducts';
+import ReviewDriver from '../pages/ReviewDriver'
 import MomentOption from '../pages/MomentOption'
 import Account from '../pages/Account'
 import Help from '../pages/Help'
@@ -105,6 +107,16 @@ const HomeNavigator = (e : any) => {
                     component={ReviewOrder}
                     options={{ headerShown: false }}
                   />
+                  <Stack.Screen
+                    name="ReviewProducts"
+                    component={ReviewProducts}
+                    options={{ headerShown: false }}
+                  />
+                  <Stack.Screen
+                    name="ReviewDriver"
+                    component={ReviewDriver}
+                    options={{ headerShown: false }}
+                  />
                   <Stack.Screen
                     name='MomentOption'
                     component={MomentOption}

package/src/pages/ReviewDriver.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import { Platform } from 'react-native';
+import styled from 'styled-components/native';
+import {ReviewDriver as ReviewDriverController} from '../components/ReviewDriver'
+import { SafeAreaContainer } from '../layouts/SafeAreaContainer';
+
+const KeyboardView = styled.KeyboardAvoidingView`
+  flex: 1;
+`;
+
+const ReviewDriver = ({navigation, route} : any) => {
+  const reviewDriverProps = {
+    navigation,
+    order: route?.params?.order,
+    onNavigationRedirect: (route: string, params: any) => navigation.navigate(route, params)
+  }
+
+  return (
+    <KeyboardView
+      enabled
+      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+    >
+      <SafeAreaContainer>
+        <ReviewDriverController {...reviewDriverProps} />
+      </SafeAreaContainer>
+    </KeyboardView>
+  )
+}
+
+export default ReviewDriver

package/src/pages/ReviewOrder.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { Platform } from 'react-native';
 import styled from 'styled-components/native';
 import {ReviewOrder as ReviewOrderController} from '../components/ReviewOrder'
-import { Container } from '../layouts/Container';
+import { SafeAreaContainer } from '../layouts/SafeAreaContainer';
 
 const KeyboardView = styled.KeyboardAvoidingView`
   flex: 1;
@@ -12,7 +12,8 @@ const ReviewOrder = ({navigation, route} : any) => {
   const reviewOrderProps = {
     navigation,
     order: route?.params?.order,
-    setIsReviewed: route?.params?.setIsReviewed
+    setIsReviewed: route?.params?.setIsReviewed,
+    onNavigationRedirect: (route: string, params: any) => navigation.navigate(route, params)
   }
 
   return (
@@ -20,9 +21,9 @@ const ReviewOrder = ({navigation, route} : any) => {
       enabled
       behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
     >
-      <Container>
+      <SafeAreaContainer>
         <ReviewOrderController {...reviewOrderProps} />
-      </Container>
+      </SafeAreaContainer>
     </KeyboardView>
   )
 }

package/src/pages/ReviewProducts.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import { Platform } from 'react-native';
+import styled from 'styled-components/native';
+import {ReviewProducts as ReviewProductsController} from '../components/ReviewProducts'
+import { SafeAreaContainer } from '../layouts/SafeAreaContainer';
+
+const KeyboardView = styled.KeyboardAvoidingView`
+  flex: 1;
+`;
+
+const ReviewProducts = ({navigation, route} : any) => {
+  const reviewProductProps = {
+    navigation,
+    order: route?.params?.order,
+    onNavigationRedirect: (route: string, params: any) => navigation.navigate(route, params)
+  }
+
+  return (
+    <KeyboardView
+      enabled
+      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+    >
+      <SafeAreaContainer>
+        <ReviewProductsController {...reviewProductProps} />
+      </SafeAreaContainer>
+    </KeyboardView>
+  )
+}
+
+export default ReviewProducts

package/src/theme.json

@@ -87,7 +87,8 @@
       "stripes": "",
       "stripesb": "",
       "creditCard": "",
-      "help": ""
+      "help": "",
+      "close": ""
     },
     "order": {
       "status0": "",

package/src/types/index.tsx

@@ -299,14 +299,39 @@ export interface ProductItemAccordionParams {
   isFromCheckout?: any
 }
 export interface ReviewOrderParams {
-  order?: { orderId: number, businessId: number, logo: string },
+  order?: { orderId: number, businessId: number, logo: string, driver: any, products: Array<any>, review: any, user_review: any },
   stars?: any,
   handleChangeInput?: any,
   handleChangeRating?: any,
   handleSendReview?: any,
   formState?: any,
   navigation?: any,
-  setIsReviewed?: (isReviewed: boolean) => {}
+  setIsReviewed?: (isReviewed: boolean) => {},
+  setStars?: any,
+  onNavigationRedirect?: any
+}
+export interface ReviewProductParams {
+  navigation?: any,
+  onNavigationRedirect?: any,
+  order?: { orderId: number, businessId: number, logo: string, driver: any, products: Array<any>, review: any, user_review: any },
+  formState?: any,
+  handleChangeFormState?: any,
+  handleSendProductReview?: any
+}
+export interface ReviewDriverParams {
+  navigation?: any,
+  onNavigationRedirect?: any,
+  order?: { orderId: number, businessId: number, logo: string, driver: any, products: Array<any>, review: any, user_review: any },
+  formState?: any,
+  setIsDriverReviewed?: (isReviewed: boolean) => {},
+  dirverReviews?: any,
+  setDriverReviews?: any,
+  handleSendDriverReview?: any
+}
+export interface SingleProductReviewParams {
+  product: any,
+  formState?: any,
+  handleChangeFormState?: any,
 }
 export interface MessagesParams {
   type?: string,

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

@@ -458,6 +458,7 @@ const ChatUI = (props: MessagesParams) => {
     messages?.messages.map((message: any) => {
       let newMessage;
       if (
+        parseInt(message.order_id) === order?.id &&
         message.type !== 0 &&
         (messagesToShow?.messages?.length ||
           message?.can_see?.includes('2') ||

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

@@ -33,6 +33,9 @@ export const DriverMap = (props: GoogleMapsParams) => {
     isBusinessMarker,
     isToFollow,
     handleViewActionOrder,
+    updateDriverPosition,
+    driverUpdateLocation,
+    setDriverUpdateLocation,
   } = props;
 
   const theme = useTheme();
@@ -73,7 +76,6 @@ export const DriverMap = (props: GoogleMapsParams) => {
     longitude: initialPosition.longitude,
   };
   const destination = { latitude: location.lat, longitude: location.lng };
-
   const { top } = useSafeAreaInsets();
 
   useEffect(() => {
@@ -189,6 +191,23 @@ export const DriverMap = (props: GoogleMapsParams) => {
   };
 
   useEffect(() => {
+    if (driverUpdateLocation.error) {
+      stopFollowUserLocation();
+      setAlertState({
+        open: true,
+        content: [
+          `${driverUpdateLocation.error[0] || driverUpdateLocation.error}. ${t(
+            'TRY_AGAIN',
+            'Try Again',
+          )}`,
+        ],
+      });
+    }
+  }, [driverUpdateLocation.error]);
+
+  useEffect(() => {
+    if (driverUpdateLocation.error) return;
+
     calculateDistance(
       { lat: userLocation.latitude, lng: userLocation.longitude },
       destination,
@@ -203,9 +222,19 @@ export const DriverMap = (props: GoogleMapsParams) => {
     mapRef.current?.animateCamera({
       center: { latitude, longitude },
     });
+
+    if (userLocation.latitude && userLocation.longitude)
+      updateDriverPosition({
+        location: { lat: userLocation.latitude, lng: userLocation.longitude },
+      });
   }, [userLocation]);
 
   const handleArrowBack: any = () => {
+    setDriverUpdateLocation({
+      ...driverUpdateLocation,
+      error: null,
+      newLocation: null,
+    });
     handleOpenMapView && handleOpenMapView();
   };
 
@@ -307,7 +336,7 @@ export const DriverMap = (props: GoogleMapsParams) => {
     },
     facOrderStatus: {
       flexDirection: 'row',
-      paddingTop: top + 5,
+      paddingTop: top + 13,
       borderBottomWidth: 11,
       borderBottomColor: theme.colors.inputChat,
     },
@@ -321,10 +350,6 @@ export const DriverMap = (props: GoogleMapsParams) => {
     },
   });
 
-  const handleChangeRegion = (coordinates: Region) => {
-    validateResult(coordinates);
-  };
-
   return (
     <>
       <View style={{ flex: 1 }}>

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

@@ -43,6 +43,7 @@ import { OrderDetailsParams } from '../../types';
 import { verifyDecimals } from '../../utils';
 import { USER_TYPE } from '../../config/constants';
 import CountryPicker from 'react-native-country-picker-modal';
+import { NotFoundSource } from '../NotFoundSource';
 
 export const OrderDetailsUI = (props: OrderDetailsParams) => {
   const {
@@ -71,7 +72,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     business: false,
     driver: false,
   });
-  const { order, businessData, loading } = props.order;
+  const { order, businessData, loading, error } = props.order;
   const { drivers, loadingDriver } = props.drivers;
   const itemsDrivers: any = [];
   const [actionOrder, setActionOrder] = useState('');
@@ -129,6 +130,34 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     }
   }
 
+  const colors: any = {
+    //BLUE
+    0: theme.colors.statusOrderBlue,
+    3: theme.colors.statusOrderBlue,
+    4: theme.colors.statusOrderBlue,
+    7: theme.colors.statusOrderBlue,
+    8: theme.colors.statusOrderBlue,
+    9: theme.colors.statusOrderBlue,
+    13: theme.colors.statusOrderBlue,
+    14: theme.colors.statusOrderBlue,
+    18: theme.colors.statusOrderBlue,
+    19: theme.colors.statusOrderBlue,
+    20: theme.colors.statusOrderBlue,
+    21: theme.colors.statusOrderBlue,
+    //GREEN
+    1: theme.colors.statusOrderGreen,
+    11: theme.colors.statusOrderGreen,
+    15: theme.colors.statusOrderGreen,
+    //RED
+    2: theme.colors.statusOrderRed,
+    5: theme.colors.statusOrderRed,
+    6: theme.colors.statusOrderRed,
+    10: theme.colors.statusOrderRed,
+    12: theme.colors.statusOrderRed,
+    16: theme.colors.statusOrderRed,
+    17: theme.colors.statusOrderRed,
+  };
+
   const handleCopyClipboard = () => {
     const name = `${t('NAME', 'Name')}: ${order?.customer?.name || null}`;
     const customerPhone = `${t('PHONE', 'Phone')}: ${
@@ -377,14 +406,6 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     setOpenModalForMapView(!openModalForMapView);
   };
 
-  const colors: any = {
-    0: theme.colors.statusOrderBlue,
-    1: theme.colors.statusOrderGreen,
-    5: theme.colors.statusOrderRed,
-    7: theme.colors.statusOrderBlue,
-    8: theme.colors.statusOrderBlue,
-  };
-
   const handleArrowBack: any = () => {
     navigation?.canGoBack() && navigation.goBack();
   };
@@ -487,7 +508,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
 
   return (
     <>
-      {(!order || Object.keys(order).length === 0) && (
+      {(!order || Object.keys(order).length === 0) && !error && (
         <View
           style={{
             padding: 20,
@@ -507,8 +528,14 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
           ))}
         </View>
       )}
-
-      {order && Object.keys(order).length > 0 && (
+      {error?.length > 0 && (
+        <NotFoundSource
+          btnTitle={t('GO_TO_MY_ORDERS', 'Go to my orders')}
+          content={props.order.error[0]}
+          onClickButton={() => navigation.navigate('Orders')}
+        />
+      )}
+      {order && Object.keys(order).length > 0 && !error && (
         <>
           <Header>
             <OIconButton
@@ -958,7 +985,6 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
 export const OrderDetails = (props: OrderDetailsParams) => {
   const orderDetailsProps = {
     ...props,
-    driverAndBusinessId: true,
     UIComponent: OrderDetailsUI,
   };
   return <OrderDetailsController {...orderDetailsProps} />;