ordering-ui-react-native 0.16.43 → 0.16.44

package/package.json

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

package/src/pages/BusinessesListing.tsx

@@ -1,24 +1,25 @@
-import React, {useEffect} from 'react'
+import React, { useEffect } from 'react'
 import { BusinessesListing as BusinessListingController } from '../components/BusinessesListing'
 import styled from 'styled-components/native'
 import { useTheme } from 'styled-components/native'
 
 const BusinessesListing = (props: any) => {
   const theme = useTheme()
-  const businessId =  props.route.params?.businessId
+  const businessId = props.route.params?.businessId
   const categoryId = props.route.params?.categoryId
-  const productId =  props.route.params?.productId
-  const store =  props.route.params?.store
+  const productId = props.route.params?.productId
+  const store = props.route.params?.store
 
   useEffect(() => {
-    if(store){
-      props.navigation.navigate('Business', {store,businessId,categoryId,productId})
+    if (store) {
+      props.navigation.navigate('Business', { store, businessId, categoryId, productId })
       return
     }
   }, [businessId, categoryId, productId, store])
 
   const BusinessesListingProps = {
     ...props,
+    navigation: props?.navigation,
     isSearchByName: true,
     isSearchByDescription: true,
     propsToFetch: ['id', 'name', 'header', 'logo', 'ribbon', 'location', 'schedule', 'open', 'delivery_price', 'distance', 'delivery_time', 'pickup_time', 'reviews', 'featured', 'offers', 'food', 'laundry', 'alcohol', 'groceries', 'slug'],

package/src/pages/OrderDetails.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { OrderDetails as OrderDetailsController } from '../components/OrderDetails'
 import { SafeAreaContainer } from '../layouts/SafeAreaContainer'
 
-const OrderDetails = ({ navigation, route } : any) => {
+const OrderDetails = ({ navigation, route }: any) => {
   const orderDetailsProps = {
     navigation,
     orderId: route.params?.orderId,

package/src/pages/ReviewDriver.tsx

@@ -1,14 +1,14 @@
 import React from 'react'
 import { Platform } from 'react-native';
 import styled from 'styled-components/native';
-import {ReviewDriver as ReviewDriverController} from '../components/ReviewDriver'
+import { ReviewDriver as ReviewDriverController } from '../components/ReviewDriver'
 import { SafeAreaContainer } from '../layouts/SafeAreaContainer';
 
 const KeyboardView = styled.KeyboardAvoidingView`
   flex: 1;
 `;
 
-const ReviewDriver = ({navigation, route} : any) => {
+const ReviewDriver = ({ navigation, route }: any) => {
   const reviewDriverProps = {
     navigation,
     order: route?.params?.order,

package/src/pages/ReviewOrder.tsx

@@ -1,14 +1,14 @@
 import React from 'react'
 import { Platform } from 'react-native';
 import styled from 'styled-components/native';
-import {ReviewOrder as ReviewOrderController} from '../components/ReviewOrder'
+import { ReviewOrder as ReviewOrderController } from '../components/ReviewOrder'
 import { SafeAreaContainer } from '../layouts/SafeAreaContainer';
 
 const KeyboardView = styled.KeyboardAvoidingView`
   flex: 1;
 `;
 
-const ReviewOrder = ({navigation, route} : any) => {
+const ReviewOrder = ({ navigation, route }: any) => {
   const reviewOrderProps = {
     navigation,
     order: route?.params?.order,

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

@@ -1,17 +1,50 @@
 
-import React from 'react'
+import React, { useState, useEffect } from 'react'
+import { useOrder, useSession } from 'ordering-components/native';
+
 import { useTheme } from 'styled-components/native'
 import { BusinessesListing as OriginalBusinessListing } from './Layout/Original'
 import { BusinessesListing as AppointmentBusinessListing } from './Layout/Appointment'
 
 export const BusinessesListing = (props: any) => {
-	const theme = useTheme()
-	const layout = theme?.layout?.businessListing?.layout?.type || 'original'
+  const theme = useTheme()
+  const layout = theme?.layout?.businessListing?.layout?.type || 'original'
+  const [{ auth }] = useSession()
+  const [, { getLastOrderHasNoReview }] = useOrder();
+  const [, setIsReviewed] = useState(false)
+  const handleOrderReview = (order: any) => {
+    props?.navigation && props.navigation.navigate(
+      'ReviewOrder',
+      {
+        order: {
+          id: order?.id,
+          business_id: order?.business_id,
+          business_name: order?.business?.name,
+          delivery_datetime: order?.delivery_datetime,
+          logo: order.business?.logo,
+          driver: order?.driver,
+          products: order?.products,
+          review: order?.review,
+          user_review: order?.user_review
+        },
+        setIsReviewed
+      }
+    )
+  }
+
+  const _getLastOrderHasNoReview = async () => {
+    const lastOrderHasNoReview = await getLastOrderHasNoReview()
+    lastOrderHasNoReview && handleOrderReview(lastOrderHasNoReview)
+  }
+
+  useEffect(() => {
+    auth && _getLastOrderHasNoReview()
+  }, [auth])
 
-	return (
+  return (
     <>
       {(layout === 'original') && <OriginalBusinessListing {...props} />}
       {(layout === 'appointment') && <AppointmentBusinessListing {...props} />}
     </>
-	)
+  )
 }

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

@@ -62,7 +62,7 @@ const NavBar = (props: Props) => {
 		<Wrapper style={{ paddingTop: props.paddingTop, ...{ flexDirection: props.isVertical ? 'column' : 'row', alignItems: props.isVertical ? 'flex-start' : 'center' }, ...props.style }}>
 			<OButton
 				imgLeftSrc={props.leftImg || theme.images.general.arrow_left}
-				imgLeftStyle={{width: 18}}
+				imgLeftStyle={{ width: 18 }}
 				imgRightSrc={null}
 				style={{ ...btnBackArrow, ...props.btnStyle, ...props.isVertical ? (I18nManager.isRTL ? { paddingRight: 0 } : { paddingLeft: 0 }) : {} }}
 				onClick={props?.onActionLeft}
@@ -126,9 +126,9 @@ NavBar.defaultProps = {
 	textAlign: 'center'
 };
 
-const areEqual=(prevProps: { route?: any; }, nextProps: { route?: any; })=>{
-  return prevProps.route === nextProps.route
-  return true
+const areEqual = (prevProps: { route?: any; }, nextProps: { route?: any; }) => {
+	return prevProps.route === nextProps.route
+	return true
 }
 
 export default React.memo(NavBar, areEqual);

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

@@ -354,6 +354,8 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
           id: order?.id,
           business_id: order?.business_id,
           logo: order.business?.logo,
+          business_name: order?.business?.name,
+          delivery_datetime: order?.delivery_datetime,
           driver: order?.driver,
           products: order?.products,
           review: order?.review,

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

@@ -44,7 +44,7 @@ const ReviewDriverUI = (props: ReviewDriverParams) => {
     photoWrapper: {
       shadowColor: theme.colors.black,
       shadowRadius: 3,
-      shadowOffset: {width: 1, height: 4},
+      shadowOffset: { width: 1, height: 4 },
       elevation: 3,
       borderRadius: 8,
       shadowOpacity: 0.1,
@@ -86,11 +86,11 @@ const ReviewDriverUI = (props: ReviewDriverParams) => {
   const [alertState, setAlertState] = useState<{ open: boolean, content: Array<any>, success?: boolean }>({ open: false, content: [], success: false })
 
   const qualificationList = [
-    { key: 1, text: t('TERRIBLE', 'Terrible'), percent: 0,  parentStyle: { left: '0%' }, isInnerStyle: false, pointerColor: false },
+    { key: 1, text: t('TERRIBLE', 'Terrible'), percent: 0, parentStyle: { left: '0%' }, isInnerStyle: false, pointerColor: false },
     { key: 2, text: t('BAD', 'Bad'), percent: 0.25, parentStyle: { left: '25%' }, isInnerStyle: true, pointerColor: true },
     { key: 3, text: t('OKAY', 'Okay'), percent: 0.5, parentStyle: { left: '50%' }, isInnerStyle: true, pointerColor: true },
     { key: 4, text: t('GOOD', 'Good'), percent: 0.75, parentStyle: { left: '75%' }, isInnerStyle: true, pointerColor: true },
-    { key: 5, text: t('GREAT', 'Great'), percent: 1, parentStyle: { right: '0%' }, isInnerStyle: false,  pointerColor: false }
+    { key: 5, text: t('GREAT', 'Great'), percent: 1, parentStyle: { right: '0%' }, isInnerStyle: false, pointerColor: false }
   ]
 
   const commentsList = reviewCommentList('driver')
@@ -204,7 +204,7 @@ const ReviewDriverUI = (props: ReviewDriverParams) => {
             <OIcon
               url={order?.driver?.photo}
               src={!order?.driver?.photo && theme.images.general.user}
-              cover={order?.driver?.photo ? true: false}
+              cover={order?.driver?.photo ? true : false}
               width={80}
               height={80}
             />
@@ -212,7 +212,7 @@ const ReviewDriverUI = (props: ReviewDriverParams) => {
           <OText weight={500} style={{ marginVertical: 10 }} color={theme.colors.textNormal}>{order?.driver?.name} {order?.driver?.lastname}</OText>
         </DriverPhotoContainer>
 
-        <View style={{flex: 1, justifyContent: 'flex-end'}}>
+        <View style={{ flex: 1, justifyContent: 'flex-end' }}>
           <FormReviews>
             <OText mBottom={13} color={theme.colors.textNormal}>{t('HOW_WAS_YOUR_DRIVER', 'How was your driver?')}</OText>
             <RatingBarContainer>
@@ -264,7 +264,7 @@ const ReviewDriverUI = (props: ReviewDriverParams) => {
                   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) }
+                  onClick={() => handleChangeComment(commentItem)}
                 />
               ))}
             </CommentsButtonGroup>

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

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react'
-import { OrderReview as ReviewOrderController, useLanguage, useToast, ToastType } from 'ordering-components/native'
+import FontAwesome from 'react-native-vector-icons/FontAwesome';
+import { OrderReview as ReviewOrderController, useLanguage, useToast, ToastType, useUtils } from 'ordering-components/native'
 import { useForm, Controller } from 'react-hook-form'
 import LinearGradient from 'react-native-linear-gradient'
 
@@ -11,7 +12,9 @@ import {
   ActionContainer,
   SkipButton,
   RatingBarContainer,
-  RatingTextContainer
+  RatingTextContainer,
+  RatingStarContainer,
+  PlacedDate
 } from './styles'
 import { OButton, OIcon, OInput, OText } from '../shared'
 import { TouchableOpacity, StyleSheet, View, I18nManager } from 'react-native';
@@ -88,10 +91,11 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
   const [, t] = useLanguage()
   const [, { showToast }] = useToast()
   const { handleSubmit, control, errors } = useForm()
-
+  const [{ parseDate }] = useUtils()
   const [alertState, setAlertState] = useState<{ open: boolean, content: Array<any>, success?: boolean }>({ open: false, content: [], success: false })
   const [comments, setComments] = useState<Array<any>>([])
   const [extraComment, setExtraComment] = useState('')
+  const placedOnDate = parseDate(order?.delivery_datetime, { outputFormat: 'dddd MMMM DD, YYYY' })
 
   const onSubmit = () => {
     if (Object.values(stars).some((value: any) => value === 0)) {
@@ -191,14 +195,15 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
     <>
       <ReviewOrderContainer>
         <NavBar
-          title={t('REVIEW_ORDER', 'Review your Order')}
+          title={t('HEY', 'Hey! ') + t('HOW_WAS_YOUR_ORDER', 'How was your order?')}
           titleAlign={'center'}
+          leftImg={theme.images.general.close}
           onActionLeft={() => navigation?.canGoBack() && navigation.goBack()}
           showCall={false}
           btnStyle={{ paddingLeft: 0 }}
-          style={{ flexDirection: 'column', alignItems: 'flex-start' }}
-          titleWrapStyle={{ paddingHorizontal: 0 }}
-          titleStyle={{ marginRight: 0, marginLeft: 0 }}
+          style={{ flexDirection: 'column', alignItems: 'flex-start', justifyContent: 'center' }}
+          titleWrapStyle={{ paddingHorizontal: 0, width: '100%', justifyContent: 'center' }}
+          titleStyle={{ textAlign: 'center', marginRight: 0, marginLeft: 0 }}
         />
         <BusinessLogo>
           <View style={styles.logoWrapper}>
@@ -209,6 +214,7 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
             />
           </View>
         </BusinessLogo>
+        {!!order?.business_name && <OText style={{ textAlign: 'center', marginTop: 15 }} color={theme.colors.textNormal}>{order?.business_name}</OText>}
         {order?.review ? (
           <View style={styles.reviewedStyle}>
             <OText color={theme.colors.primary}>{t('ORDER_REVIEWED', 'This order has been already reviewed')}</OText>
@@ -216,78 +222,92 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
         ) : (
           <View style={{ flex: 1, justifyContent: 'flex-end' }}>
             <FormReviews>
-              <OText mBottom={13} color={theme.colors.textNormal}>{t('HOW_WAS_YOUR_ORDER', 'How was your order?')}</OText>
-              <RatingBarContainer>
-                <LinearGradient
-                  start={{ x: 0.0, y: 0.0 }}
-                  end={{ x: qualificationList[stars.quality - 1]?.percent || 0, y: 0 }}
-                  locations={[.9999, .9999]}
-                  colors={[theme.colors.primary, theme.colors.backgroundGray200]}
-                  style={styles.statusBar}
-                />
-                <RatingTextContainer>
-                  {qualificationList.map((qualification: any) => (
-                    <View
-                      key={qualification.key}
-                      style={{ ...qualification.parentStyle, ...styles.ratingItemContainer }}
-                    >
-                      <TouchableOpacity
-                        style={qualification.isInnerStyle && styles.ratingItem}
-                        onPress={() => handleChangeStars(qualification.key)}
-                      >
-                        <View
-                          style={{
-                            ...styles.ratingLineStyle,
-                            backgroundColor: (qualification.pointerColor && !(stars.quality >= qualification.key)) ? theme.colors.dusk : 'transparent'
-                          }}
-                        />
-                        <OText size={12} color={stars.quality === qualification.key ? theme.colors.black : theme.colors.backgroundGray200}>{qualification.text}</OText>
-                      </TouchableOpacity>
-                    </View>
-                  ))}
-                </RatingTextContainer>
-              </RatingBarContainer>
-
-              <OText style={{ marginTop: 30 }} color={theme.colors.textNormal}>
-                {commentsList[stars?.quality || 1]?.title}
-              </OText>
-              <CommentsButtonGroup>
-                {commentsList[stars?.quality || 1]?.list?.map(commentItem => (
-                  <OButton
-                    key={commentItem.key}
-                    text={commentItem.content}
-                    bgColor={isSelectedComment(commentItem.key) ? theme.colors.primary : theme.colors.backgroundGray200}
-                    borderColor={isSelectedComment(commentItem.key) ? theme.colors.primary : theme.colors.backgroundGray200}
-                    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>
-
-              <OText style={{ marginTop: 30 }} color={theme.colors.textNormal}>{t('REVIEW_COMMENT_QUESTION', 'Do you want to add something?')}</OText>
-              <Controller
-                control={control}
-                defaultValue=''
-                name='comments'
-                render={({ onChange }: any) => (
-                  <OInput
-                    name='comments'
-                    onChange={(val: any) => {
-                      onChange(val)
-                      setExtraComment(val.target.value)
-                    }}
-                    style={styles.inputTextArea}
-                    multiline
+              {/* <OText mBottom={13} color={theme.colors.textNormal}>{t('HOW_WAS_YOUR_ORDER', 'How was your order?')}</OText> */}
+              {false && (
+                <RatingBarContainer>
+                  <LinearGradient
+                    start={{ x: 0.0, y: 0.0 }}
+                    end={{ x: qualificationList[stars.quality - 1]?.percent || 0, y: 0 }}
+                    locations={[.9999, .9999]}
+                    colors={[theme.colors.primary, theme.colors.backgroundGray200]}
+                    style={styles.statusBar}
                   />
+                  <RatingTextContainer>
+                    {qualificationList.map((qualification: any) => (
+                      <View
+                        key={qualification.key}
+                        style={{ ...qualification.parentStyle, ...styles.ratingItemContainer }}
+                      >
+                        <TouchableOpacity
+                          style={qualification.isInnerStyle && styles.ratingItem}
+                          onPress={() => handleChangeStars(qualification.key)}
+                        >
+                          <View
+                            style={{
+                              ...styles.ratingLineStyle,
+                              backgroundColor: (qualification.pointerColor && !(stars.quality >= qualification.key)) ? theme.colors.dusk : 'transparent'
+                            }}
+                          />
+                          <OText size={12} color={stars.quality === qualification.key ? theme.colors.black : theme.colors.backgroundGray200}>{qualification.text}</OText>
+                        </TouchableOpacity>
+                      </View>
+                    ))}
+                  </RatingTextContainer>
+                </RatingBarContainer>
+              )}
+              <RatingStarContainer>
+                {[...Array(5).keys()].map((index) => (<FontAwesome name={(index <= (stars?.quality - 1)) ? 'star' : 'star-o'} size={28} key={`star-symbol-${index}`} onPress={() => handleChangeStars(index + 1)} color={theme?.colors?.primary} />)
                 )}
-              />
+              </RatingStarContainer>
+              <PlacedDate>
+                <OText color={theme.colors.textNormal}>{t('DONOT_FORGET_RATE_YOUR_ORDER', 'Do not forget to rate your order placed on ')}</OText>
+                <OText color={theme.colors.textNormal} style={{ fontWeight: "bold" }}>{placedOnDate}</OText>
+              </PlacedDate>
+              {false && (
+                <>
+                  <OText style={{ marginTop: 30 }} color={theme.colors.textNormal}>
+                    {commentsList[stars?.quality || 1]?.title}
+                  </OText>
+                  <CommentsButtonGroup>
+                    {commentsList[stars?.quality || 1]?.list?.map((commentItem: any) => (
+                      <OButton
+                        key={commentItem.key}
+                        text={commentItem.content}
+                        bgColor={isSelectedComment(commentItem.key) ? theme.colors.primary : theme.colors.backgroundGray200}
+                        borderColor={isSelectedComment(commentItem.key) ? theme.colors.primary : theme.colors.backgroundGray200}
+                        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>
+                </>
+              )}
+              {/* <OText style={{ marginTop: 30 }} color={theme.colors.textNormal}>{t('REVIEW_COMMENT_QUESTION', 'Do you want to add something?')}</OText> */}
+              {false && (
+                <Controller
+                  control={control}
+                  defaultValue=''
+                  name='comments'
+                  render={({ onChange }: any) => (
+                    <OInput
+                      name='comments'
+                      onChange={(val: any) => {
+                        onChange(val)
+                        setExtraComment(val.target.value)
+                      }}
+                      style={styles.inputTextArea}
+                      multiline
+                    />
+                  )}
+                />
+              )}
             </FormReviews>
           </View>
         )}
@@ -302,7 +322,7 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
           </SkipButton>
           <OButton
             textStyle={{ color: theme.colors.white, paddingRight: 10 }}
-            text={t('CONTINUE', 'Continue')}
+            text={t('GOTO_REVIEW', 'Go to review')}
             style={{ borderRadius: 8 }}
             imgRightSrc={theme.images.general.arrow_right}
             imgRightStyle={{ tintColor: theme.colors.white, right: 5, margin: 5 }}

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

@@ -42,3 +42,12 @@ export const RatingTextContainer = styled.View`
   justify-content: space-between;
   margin-top: 10px;
 `
+export const RatingStarContainer = styled.View`
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 10px;
+`
+export const PlacedDate = styled.View`
+  margin-top: 30px;
+`

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

@@ -415,7 +415,7 @@ export interface ProductItemAccordionParams {
 	isFromCheckout?: any
 }
 export interface ReviewOrderParams {
-	order?: { id: number, businessId: number, logo: string, driver: any, products: Array<any>, review: any, user_review: any },
+	order?: { id: number, businessId: number, business_name?: string, delivery_datetime?: string, logo: string, driver: any, products: Array<any>, review: any, user_review: any },
 	stars?: any,
 	handleChangeInput?: any,
 	handleChangeRating?: any,