ordering-ui-react-native 0.16.42 → 0.16.45

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.16.42",
+  "version": "0.16.45",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",
@@ -86,6 +86,7 @@
     "react-native-google-places-autocomplete": "^2.1.3",
     "react-native-html-to-pdf": "^0.10.0",
     "react-native-image-picker": "^4.0.6",
+    "react-native-intersection-observer": "^0.0.9",
     "react-native-lightbox": "^0.8.1",
     "react-native-linear-gradient": "^2.5.6",
     "react-native-loading-spinner-overlay": "^2.0.0",

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/business/src/components/PreviousOrders/index.tsx

@@ -182,7 +182,7 @@ export const PreviousOrders = (props: any) => {
                     <Timestatus style={{ backgroundColor: getStatusClassName(getDelayMinutes(order)) === 'in_time' ? '#00D27A' : getStatusClassName(getDelayMinutes(order)) === 'at_risk' ? '#FFC700' : getStatusClassName(getDelayMinutes(order)) === 'delayed' ? '#E63757' : '' }} />
                   )}
                     {
-                      order.business?.logo && (
+                      !!order.business?.logo && (
                         <Logo style={styles.logo}>
                           <OIcon
                             url={optimizeImage(
@@ -194,17 +194,17 @@ export const PreviousOrders = (props: any) => {
                         </Logo>
                       )}
                     <Information>
-                      {order?.order_group_id && (
+                      {!!order?.order_group_id && (
                         <OText>
                           <OText>{(t('INVOICE_GROUP_NO', 'Group No.') + order?.order_group_id)}</OText>
                         </OText>
                       )}
-                      {order.business?.name && (
+                      {!!order.business?.name && (
                         <OText numberOfLines={1} style={styles.title}>
                           {order.business?.name}
                         </OText>
                       )}
-                      {order?.showNotification && (
+                      {!!order?.showNotification && (
                         <NotificationIcon>
                           <EntypoIcon
                             name="dot-single"
@@ -258,7 +258,7 @@ export const PreviousOrders = (props: any) => {
                 </TouchableOpacity>
                 {isLogisticOrder && (
                   <AcceptOrRejectOrder>
-                    {order?.order_group_id && order?.order_group ? (
+                    {!!order?.order_group_id && !!order?.order_group ? (
                       <OButton
                         text={t('VIEW_ORDER', 'View order')}
                         onClick={() => handlePressOrder({ ...order, logistic_order_id: _order?.id })}

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

@@ -203,7 +203,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 			multiRemoveProducts && await multiRemoveProducts(unavailableProducts, _carts)
 			return
 		}
-	
+
 		if (alreadyRemoved === 'removed') {
 			setAlertState({ open: true, content: [t('NOT_AVAILABLE_PRODUCT', 'This product is not available.')] })
 		}
@@ -223,7 +223,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 
 	return (
 		<>
-					<ContainerSafeAreaView
+			<ContainerSafeAreaView
 				style={{ flex: 1 }}
 				isOpenFiltProducts={isOpenFiltProducts}
 			>
@@ -237,7 +237,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 										imgRightSrc={null}
 										style={styles.btnBackArrow}
 										onClick={() => handleBackNavigation()}
-										imgLeftStyle={{ tintColor: theme.colors.textNormal, width: 16 }}
+										imgLeftStyle={{ tintColor: theme.colors.textNormal, width: 30 }}
 									/>
 								</View>
 								{!errorQuantityProducts && (
@@ -255,6 +255,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 						{isOpenSearchBar && (
 							<WrapSearchBar>
 								<SearchBar
+									autoFocus
 									onSearch={handleChangeSearch}
 									onCancel={() => handleCancel()}
 									isCancelXButtonShow
@@ -268,42 +269,42 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 				</Animated.View>
 
 				{business?.categories?.length > 0 && isOpenFiltProducts && (
-						<FiltProductsContainer
-							isIos={Platform.OS === 'ios'}
-							style={{
-								height: Dimensions.get('window').height - filtProductsHeight
-							}}
-						>
-							<View style={{ padding: 20, backgroundColor: theme.colors.white }}>
-								<BusinessProductsList
-									categories={[
-										{ id: null, name: t('ALL', 'All') },
-										{ id: 'featured', name: t('FEATURED', 'Featured') },
-										...business?.categories.sort((a: any, b: any) => a.rank - b.rank)
-									]}
-									category={categorySelected}
-									categoryState={categoryState}
-									businessId={business.id}
-									errors={errors}
-									onProductClick={onProductClick}
-									handleSearchRedirect={handleSearchRedirect}
-									featured={featuredProducts}
-									searchValue={searchValue}
-									handleClearSearch={handleChangeSearch}
-									errorQuantityProducts={errorQuantityProducts}
-									handleCancelSearch={handleCancel}
-									categoriesLayout={categoriesLayout}
-									subcategoriesSelected={subcategoriesSelected}
-									lazyLoadProductsRecommended={business?.lazy_load_products_recommended}
-									setCategoriesLayout={setCategoriesLayout}
-									currentCart={currentCart}
-									setSubcategoriesSelected={setSubcategoriesSelected}
-									onClickCategory={handleChangeCategory}
-									handleUpdateProducts={handleUpdateProducts}
-									isFiltMode
-								/>
-							</View>
-						</FiltProductsContainer>
+					<FiltProductsContainer
+						isIos={Platform.OS === 'ios'}
+						style={{
+							height: Dimensions.get('window').height - filtProductsHeight
+						}}
+					>
+						<View style={{ padding: 20, backgroundColor: theme.colors.white }}>
+							<BusinessProductsList
+								categories={[
+									{ id: null, name: t('ALL', 'All') },
+									{ id: 'featured', name: t('FEATURED', 'Featured') },
+									...business?.categories.sort((a: any, b: any) => a.rank - b.rank)
+								]}
+								category={categorySelected}
+								categoryState={categoryState}
+								businessId={business.id}
+								errors={errors}
+								onProductClick={onProductClick}
+								handleSearchRedirect={handleSearchRedirect}
+								featured={featuredProducts}
+								searchValue={searchValue}
+								handleClearSearch={handleChangeSearch}
+								errorQuantityProducts={errorQuantityProducts}
+								handleCancelSearch={handleCancel}
+								categoriesLayout={categoriesLayout}
+								subcategoriesSelected={subcategoriesSelected}
+								lazyLoadProductsRecommended={business?.lazy_load_products_recommended}
+								setCategoriesLayout={setCategoriesLayout}
+								currentCart={currentCart}
+								setSubcategoriesSelected={setSubcategoriesSelected}
+								onClickCategory={handleChangeCategory}
+								handleUpdateProducts={handleUpdateProducts}
+								isFiltMode
+							/>
+						</View>
+					</FiltProductsContainer>
 				)}
 				{isOpenFiltProducts && (
 					<BackgroundGray />

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/Checkout/index.tsx

@@ -178,7 +178,7 @@ const CheckoutUI = (props: any) => {
 		}
 	}
 
-	const handlePlaceOrder = (confirmPayment) => {
+	const handlePlaceOrder = (confirmPayment : any) => {
 		if (!userErrors.length && !requiredFields?.length) {
 			handlerClickPlaceOrder && handlerClickPlaceOrder(null, null, confirmPayment)
 			return
@@ -741,7 +741,7 @@ const CheckoutUI = (props: any) => {
 			</Container>
 			{!cartState.loading && cart && cart?.status !== 2 && (
 				<FloatingButton
-					handleClick={() => handlePlaceOrder()}
+					handleClick={() => handlePlaceOrder(null)}
 					isSecondaryBtn={isDisabledButtonPlace}
 					disabled={isDisabledButtonPlace}
 					btnText={cart?.subtotal >= cart?.minimum
@@ -755,7 +755,7 @@ const CheckoutUI = (props: any) => {
 						: (`${t('MINIMUN_SUBTOTAL_ORDER', 'Minimum subtotal order:')} ${parsePrice(cart?.minimum)}`)
 					}
 					btnRightValueShow
-					btnRightValue={parsePrice(cart?.total)}
+					btnRightValue={parsePrice(cart?.balance)}
 					iosBottom={30}
 				/>
 			)}

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/ProductForm/index.tsx

@@ -370,7 +370,7 @@ export const ProductOptionsUI = (props: any) => {
 		<SafeAreaView style={{ flex: 1 }}>
 			<TopHeader>
 				<TopActions onPress={() => handleGoBack()}>
-					<OIcon src={theme.images.general.arrow_left} width={15} />
+					<OIcon src={theme.images.general.arrow_left} width={30} />
 				</TopActions>
 			</TopHeader>
 			<ScrollView ref={scrollViewRef}>

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/components/SearchBar/index.tsx

@@ -25,7 +25,8 @@ export const SearchBar = (props: any) => {
 		blurOnSubmit,
 		inputContainerStyles,
 		containerStyles,
-		hideIcon
+		hideIcon,
+		autoFocus
 	} = props
 
 	const theme = useTheme();
@@ -82,15 +83,16 @@ export const SearchBar = (props: any) => {
 	return (
 		<Pressable style={[styles.container, containerStyles, { height: height }]}>
 			<OInput
+				autoFocus={autoFocus}
 				value={searchValue}
 				onChange={onChangeSearch}
-				style={{...styles.inputStyle, ...inputContainerStyles}}
+				style={{ ...styles.inputStyle, ...inputContainerStyles }}
 				placeholder={placeholder}
 				icon={!hideIcon && theme.images.general.search}
 				isDisabled={isDisabled}
 				iconStyle={{ width: 12 }}
 				returnKeyType='done'
-				inputStyle={{padding: 0, paddingTop: Platform.OS == 'android' ? 2 : 0, ...inputStyle}}
+				inputStyle={{ padding: 0, paddingTop: Platform.OS == 'android' ? 2 : 0, ...inputStyle }}
 				onPress={() => onPress && onPress()}
 				iconCustomRight={iconCustomRight}
 				onSubmitEditing={() => onSubmitEditing && onSubmitEditing()}

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

@@ -271,16 +271,16 @@ const ProfileUI = (props: ProfileParams) => {
 	}, [verifyPhoneState])
 
 	const handleSendPhoneCode = (values: any) => {
-    setWillVerifyOtpState(false)
+		setWillVerifyOtpState(false)
 		setIsModalVisible(false)
-    setFormState({
-      ...formState,
-      changes: {
-        ...formState?.changes,
-        verification_code: values?.code
-      }
-    })
-  }
+		setFormState({
+			...formState,
+			changes: {
+				...formState?.changes,
+				verification_code: values?.code
+			}
+		})
+	}
 
 	return (
 		<>
@@ -289,7 +289,7 @@ const ProfileUI = (props: ProfileParams) => {
 				titleAlign={'center'}
 				onActionLeft={() => navigation.goBack()}
 				showCall={false}
-				style={{ paddingHorizontal: 40, paddingVertical: Platform.OS === 'ios' ? 0 : 30 , marginTop: Platform.OS === 'ios' ? 50 : 40 }}
+				style={{ paddingHorizontal: 40, paddingVertical: Platform.OS === 'ios' ? 0 : 30 }}
 			/>
 			<KeyboardAvoidingView behavior={Platform.OS == 'ios' ? 'padding' : 'height'} enabled style={{ flex: 1, flexDirection: 'column', justifyContent: 'center' }}>
 				<Container noPadding>

package/themes/original/src/components/shared/OInput.tsx

@@ -56,7 +56,7 @@ const Wrapper = styled.Pressable`
 const OInput = (props: Props): React.ReactElement => {
 	return (
 		<Wrapper
-			onPress={() => {props.forwardRef?.current?.focus?.(); props.onPress && props.onPress()}}
+			onPress={() => { props.forwardRef?.current?.focus?.(); props.onPress && props.onPress() }}
 			style={{
 				backgroundColor: props.bgColor,
 				borderColor: props.borderColor,
@@ -75,6 +75,7 @@ const OInput = (props: Props): React.ReactElement => {
 				<MaterialIcon name={props?.vertorIcon} size={20} color={props?.vectorIconColor} style={{ marginHorizontal: 10 }} />
 			)}
 			<Input
+				autoFocus={props?.autoFocus}
 				name={props.name}
 				secureTextEntry={props.isSecured}
 				onChangeText={(txt: any) => props.name ? props.onChange({ target: { name: props.name, value: txt } }) : props.onChange(txt)}
@@ -90,7 +91,7 @@ const OInput = (props: Props): React.ReactElement => {
 				returnKeyType={props.returnKeyType}
 				onSubmitEditing={props.onSubmitEditing}
 				blurOnSubmit={props.blurOnSubmit}
-				ref={(e : any) => {
+				ref={(e: any) => {
 					props.forwardRef && (props.forwardRef.current = e)
 				}}
 				style={props?.inputStyle}

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,