ordering-ui-react-native 0.16.53 → 0.16.54

package/package.json

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

package/themes/original/index.tsx

@@ -29,9 +29,6 @@ import { UserProfileForm } from './src/components/UserProfileForm';
 import { ReviewOrder } from './src/components/ReviewOrder';
 import { ReviewProducts } from './src/components/ReviewProducts';
 import { ReviewDriver } from './src/components/ReviewDriver';
-import { ReviewOrder as ReviewOrderModal } from './src/components/Reviews/ReviewOrder';
-import { ReviewProducts as ReviewProductsModal } from './src/components/Reviews/ReviewProducts';
-import { ReviewDriver as ReviewDriverModal } from './src/components/Reviews/ReviewDriver';
 import { UserProfile } from './src/components/UserProfile';
 import { MessageListing } from './src/components/MessageListing';
 import { Messages } from './src/components/Messages';
@@ -189,9 +186,6 @@ export {
 	ReviewOrder,
 	ReviewProducts,
 	ReviewDriver,
-	ReviewOrderModal,
-	ReviewProductsModal,
-	ReviewDriverModal,
 	BusinessMenuList,
 	UserProfile,
 	MessageListing,

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

@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 import Geolocation from '@react-native-community/geolocation'
+import { IOScrollView } from 'react-native-intersection-observer'
 import { getTrackingStatus, requestTrackingPermission } from 'react-native-tracking-transparency'
 import {
 	View,
@@ -201,7 +202,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 	}
 
 	const resetInactivityTimeout = () => {
-		if(!logosLayout){
+		if (!logosLayout) {
 			clearTimeout(timerId.current)
 			timerId.current = setInterval(() => {
 				getBusinesses(true)
@@ -247,7 +248,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 	}
 
 	useEffect(() => {
-		if(!logosLayout){
+		if (!logosLayout) {
 			checkUserLocation()
 		}
 	}, [orderState?.options?.address?.location])
@@ -284,11 +285,11 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 		return (
 			<BusinessLogosContainer horizontal>
 				{businessesList?.loading ? (
-						<Placeholder Animation={Fade}>
-							{[...Array(10).keys()].map(item => (
-								<PlaceholderLine key={item} width={56} height={56} />
-							))}
-						</Placeholder>
+					<Placeholder Animation={Fade}>
+						{[...Array(10).keys()].map(item => (
+							<PlaceholderLine key={item} width={56} height={56} />
+						))}
+					</Placeholder>
 				) : (
 					<>
 						{businessesList.businesses
@@ -478,7 +479,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 				<View style={{ marginTop: 10 }}>
 					<OButton
 						onClick={() => setIsOpenCities(true)}
-						text={citiesState?.cities?.find((city : any) => city?.id === orderState?.options?.city_id)?.name || t('FILTER_BY_CITY', 'Filter by city')}
+						text={citiesState?.cities?.find((city: any) => city?.id === orderState?.options?.city_id)?.name || t('FILTER_BY_CITY', 'Filter by city')}
 						style={styles?.buttonCityStyle}
 						textStyle={{ color: theme.colors.backgroundGray, fontWeight: 'bold', fontSize: 18 }}
 					/>
@@ -552,29 +553,33 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 						)}
 					/>
 				)}
-				{businessesList.businesses?.map(
-					(business: any, i: number) => (
-						<BusinessController
-							key={`${business.id}_` + i}
-							business={business}
-							isBusinessOpen={business.open}
-							handleCustomClick={handleBusinessClick}
-							orderType={orderState?.options?.type}
-							navigation={navigation}
-							businessHeader={business?.header}
-							businessFeatured={business?.featured}
-							businessLogo={business?.logo}
-							businessReviews={business?.reviews}
-							businessDeliveryPrice={business?.delivery_price}
-							businessDeliveryTime={business?.delivery_time}
-							businessPickupTime={business?.pickup_time}
-							businessDistance={business?.distance}
-							handleUpdateBusinessList={handleUpdateBusinessList}
-							favoriteIds={favoriteIds}
-							setFavoriteIds={setFavoriteIds}
-						/>
-					)
-				)}
+				<IOScrollView>
+
+					{businessesList.businesses?.map(
+						(business: any, i: number) => (
+							<BusinessController
+								key={`${business.id}_` + i}
+								enableIntersection
+								business={business}
+								isBusinessOpen={business.open}
+								handleCustomClick={handleBusinessClick}
+								orderType={orderState?.options?.type}
+								navigation={navigation}
+								businessHeader={business?.header}
+								businessFeatured={business?.featured}
+								businessLogo={business?.logo}
+								businessReviews={business?.reviews}
+								businessDeliveryPrice={business?.delivery_price}
+								businessDeliveryTime={business?.delivery_time}
+								businessPickupTime={business?.pickup_time}
+								businessDistance={business?.distance}
+								handleUpdateBusinessList={handleUpdateBusinessList}
+								favoriteIds={favoriteIds}
+								setFavoriteIds={setFavoriteIds}
+							/>
+						)
+					)}
+				</IOScrollView>
 				{businessesList.loading && (
 					<>
 						{[
@@ -633,7 +638,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 				title={t('SELECT_A_CITY', 'Select a city')}
 			>
 				<View style={{ padding: 40, width: '100%' }}>
-					{citiesState?.cities?.map((city : any) => (
+					{citiesState?.cities?.map((city: any) => (
 						<TouchableOpacity
 							key={city?.id}
 							style={{

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

@@ -6,84 +6,68 @@ import { useTheme } from 'styled-components/native'
 import { BusinessesListing as OriginalBusinessListing } from './Layout/Original'
 import { BusinessesListing as AppointmentBusinessListing } from './Layout/Appointment'
 import { OBottomPopup } from '../shared';
-import { ReviewOrderModal, ReviewProductsModal, ReviewDriverModal } from '../Reviews'
+import { ReviewTrigger } from '../ReviewTrigger';
 
 export const BusinessesListing = (props: any) => {
   const theme = useTheme()
-	const layout = theme?.layouts?.business_listing_view?.components?.layout?.type || 'original'
+  const layout = theme?.layouts?.business_listing_view?.components?.layout?.type || 'original'
   const [, t] = useLanguage();
   const [{ auth }] = useSession()
   const [, { getLastOrderHasNoReview }] = useOrder();
 
+  const [, setIsReviewed] = useState()
+  const defaultOrder = {
+    id: 0,
+    business_id: 0,
+    business_name: '',
+    logo: '',
+    driver: {},
+    products: [],
+    review: {},
+    user_review: {},
+    delivery_datetime: ''
+  }
   const [lastOrderReview, setLastOrderReview] = useState({
     isReviewOpen: false,
-    order: {
-      id: 0,
-      business_id: 0,
-      business_name: '',
-      delivery_datetime: '',
-      logo: '',
-      driver: null,
-      products: [],
-      review: null,
-      user_review: null
-    },
-    reviewStatus: { order: false, product: false, driver: false },
-    reviewed: { isOrderReviewed: false, isProductReviewed: false, isDriverReviewed: false }
+    order: defaultOrder,
+    defaultStar: 5,
   })
 
   const _getLastOrderHasNoReview = async () => {
     const lastOrderHasNoReview = await getLastOrderHasNoReview()
-    lastOrderHasNoReview && handleOrderReview(lastOrderHasNoReview)
+    lastOrderHasNoReview && OrderReviewRequired(lastOrderHasNoReview)
   }
 
-  const handleOrderReview = (order: any) => {
+  const OrderReviewRequired = (order: any) => {
     setLastOrderReview({
       isReviewOpen: true,
       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
+        user_review: order?.user_review,
+        delivery_datetime: order?.delivery_datetime_utc
       },
-      reviewStatus: { order: true, product: false, driver: false },
-      reviewed: { isOrderReviewed: false, isProductReviewed: false, isDriverReviewed: false }
-    })
-  }
-
-  const handleCloseReivew = () => {
-    setLastOrderReview({
-      ...lastOrderReview,
-      isReviewOpen: false,
-      reviewStatus: { order: false, product: false, driver: false }
+      defaultStar: 5
     })
   }
 
-  const setIsReviewed = (reviewType: string) => {
-    const _reviewStatus = { ...lastOrderReview?.reviewed }
+  const handleOpenOrderReview = (star: number) => {
     setLastOrderReview({
-      ...lastOrderReview,
-      reviewed: { ..._reviewStatus, [reviewType]: true }
+      ...lastOrderReview, isReviewOpen: false, order: defaultOrder
     })
-  }
-
-  const closeReviewOrder = () => {
-    if (!lastOrderReview?.reviewed?.isProductReviewed) setLastOrderReview({ ...lastOrderReview, reviewStatus: { order: false, product: true, driver: false } })
-    else if (lastOrderReview?.order?.driver && !lastOrderReview?.order?.user_review && !lastOrderReview?.reviewed?.isDriverReviewed) setLastOrderReview({ ...lastOrderReview, reviewStatus: { order: false, product: false, driver: true } })
-    else handleCloseReivew()
-  }
-
-  const closeReviewProduct = () => {
-    if (lastOrderReview?.order?.driver && !lastOrderReview?.order?.user_review && !lastOrderReview?.reviewed?.isDriverReviewed) setLastOrderReview({ ...lastOrderReview, reviewStatus: { order: false, product: false, driver: true } })
-    else {
-      setIsReviewed('isDriverReviewed')
-      handleCloseReivew()
-    }
+    props?.navigation && props.navigation.navigate(
+      'ReviewOrder',
+      {
+        order: lastOrderReview.order,
+        defaultStar: star || 5,
+        setIsReviewed
+      }
+    )
   }
 
   useEffect(() => {
@@ -98,25 +82,14 @@ export const BusinessesListing = (props: any) => {
       {lastOrderReview?.isReviewOpen && (
         <OBottomPopup
           open={lastOrderReview?.isReviewOpen}
-          onClose={handleCloseReivew}
-          title={lastOrderReview?.order
-            ? (lastOrderReview?.reviewStatus?.order
-              ? t('HEY', 'Hey! ') + t('HOW_WAS_YOUR_ORDER', 'How was your order?')
-              : (lastOrderReview?.reviewStatus?.product
-                ? t('REVIEW_PRODUCT', 'Review Product')
-                : t('REVIEW_DRIVER', 'Review Driver')))
-            : t('LOADING', 'Loading...')}
+          transparent={true}
+          onClose={() => setLastOrderReview({ ...lastOrderReview, isReviewOpen: false, order: defaultOrder })}
+          title={t('HEY', 'Hey! ') + t('HOW_WAS_YOUR_ORDER', 'How was your order?')}
           bottomContainerStyle={{ height: 'auto' }}
           titleStyle={{ textAlign: 'center' }}
           closeIcon={theme.images.general.close}
         >
-          {
-            lastOrderReview?.reviewStatus?.order
-              ? <ReviewOrderModal order={lastOrderReview?.order} closeReviewOrder={closeReviewOrder} skipReview={handleCloseReivew} setIsReviewed={() => setIsReviewed('isOrderReviewed')} />
-              : (lastOrderReview?.reviewStatus?.product
-                ? <ReviewProductsModal order={lastOrderReview?.order} closeReviewProduct={closeReviewProduct} setIsProductReviewed={() => setIsReviewed('isProductReviewed')} />
-                : <ReviewDriverModal order={lastOrderReview?.order} closeReviewDriver={handleCloseReivew} setIsDriverReviewed={() => setIsReviewed('isDriverReviewed')} />)
-          }
+          {lastOrderReview?.order && <ReviewTrigger order={lastOrderReview?.order} handleOpenOrderReview={handleOpenOrderReview} />}
 
         </OBottomPopup>
       )}

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

@@ -361,8 +361,6 @@ 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,
@@ -524,41 +522,41 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
               <OrderData>
                 <View style={styles.linkWrapper}>
                   {
-                  (
-                    parseInt(order?.status) === 1 ||
-                    parseInt(order?.status) === 11 ||
-                    parseInt(order?.status) === 15
-                  ) && !order.review && !isReviewed && (
-                    <TouchableOpacity
-                      activeOpacity={0.7}
-                      style={{ marginTop: 6, marginRight: 10 }}
-                      onPress={() => handleClickOrderReview(order)}
-                    >
-                      <OText
-                        size={10}
-                        lineHeight={15}
-                        color={theme.colors.primary}
-                        style={{ textDecorationLine: 'underline' }}
+                    (
+                      parseInt(order?.status) === 1 ||
+                      parseInt(order?.status) === 11 ||
+                      parseInt(order?.status) === 15
+                    ) && !order.review && !isReviewed && (
+                      <TouchableOpacity
+                        activeOpacity={0.7}
+                        style={{ marginTop: 6, marginRight: 10 }}
+                        onPress={() => handleClickOrderReview(order)}
                       >
-                        {t('REVIEW_YOUR_ORDER', 'Review your order')}
-                      </OText>
-                    </TouchableOpacity>
-                  )}
-                    <TouchableOpacity
-                      activeOpacity={0.7}
-                      style={{ marginTop: 6 }}
-                      onPress={() => setIsOrderHistory(true)}
+                        <OText
+                          size={10}
+                          lineHeight={15}
+                          color={theme.colors.primary}
+                          style={{ textDecorationLine: 'underline' }}
+                        >
+                          {t('REVIEW_YOUR_ORDER', 'Review your order')}
+                        </OText>
+                      </TouchableOpacity>
+                    )}
+                  <TouchableOpacity
+                    activeOpacity={0.7}
+                    style={{ marginTop: 6 }}
+                    onPress={() => setIsOrderHistory(true)}
 
+                  >
+                    <OText
+                      size={10}
+                      lineHeight={15}
+                      color={theme.colors.primary}
+                      style={{ textDecorationLine: 'underline', textTransform: 'capitalize' }}
                     >
-                      <OText
-                        size={10}
-                        lineHeight={15}
-                        color={theme.colors.primary}
-                        style={{ textDecorationLine: 'underline', textTransform: 'capitalize' }}
-                      >
-                        {t('VIEW_DETAILS', 'View Details')}
-                      </OText>
-                    </TouchableOpacity>
+                      {t('VIEW_DETAILS', 'View Details')}
+                    </OText>
+                  </TouchableOpacity>
                 </View>
 
                 <StaturBar>

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

@@ -1,6 +1,5 @@
 import React, { useState, useEffect } from 'react'
-import FontAwesome from 'react-native-vector-icons/FontAwesome';
-import { OrderReview as ReviewOrderController, useLanguage, useToast, ToastType, useUtils } from 'ordering-components/native'
+import { OrderReview as ReviewOrderController, useLanguage, useToast, ToastType } from 'ordering-components/native'
 import { useForm, Controller } from 'react-hook-form'
 import LinearGradient from 'react-native-linear-gradient'
 
@@ -12,9 +11,7 @@ import {
   ActionContainer,
   SkipButton,
   RatingBarContainer,
-  RatingTextContainer,
-  RatingStarContainer,
-  PlacedDate
+  RatingTextContainer
 } from './styles'
 import { OButton, OIcon, OInput, OText } from '../shared'
 import { TouchableOpacity, StyleSheet, View, I18nManager } from 'react-native';
@@ -91,11 +88,10 @@ 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)) {
@@ -195,15 +191,14 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
     <>
       <ReviewOrderContainer>
         <NavBar
-          title={t('HEY', 'Hey! ') + t('HOW_WAS_YOUR_ORDER', 'How was your order?')}
+          title={t('REVIEW_ORDER', 'Review 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', justifyContent: 'center' }}
-          titleWrapStyle={{ paddingHorizontal: 0, width: '100%', justifyContent: 'center' }}
-          titleStyle={{ textAlign: 'center', marginRight: 0, marginLeft: 0 }}
+          style={{ flexDirection: 'column', alignItems: 'flex-start' }}
+          titleWrapStyle={{ paddingHorizontal: 0 }}
+          titleStyle={{ marginRight: 0, marginLeft: 0 }}
         />
         <BusinessLogo>
           <View style={styles.logoWrapper}>
@@ -214,7 +209,6 @@ 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>
@@ -222,92 +216,78 @@ 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> */}
-              {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 }}
+              <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)}
                       >
-                        <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} />)
+                        <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
+                  />
                 )}
-              </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>
         )}
@@ -322,7 +302,7 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
           </SkipButton>
           <OButton
             textStyle={{ color: theme.colors.white, paddingRight: 10 }}
-            text={t('GOTO_REVIEW', 'Go to review')}
+            text={t('CONTINUE', 'Continue')}
             style={{ borderRadius: 8 }}
             imgRightSrc={theme.images.general.arrow_right}
             imgRightStyle={{ tintColor: theme.colors.white, right: 5, margin: 5 }}
@@ -338,7 +318,7 @@ export const ReviewOrder = (props: ReviewOrderParams) => {
   const reviewOrderProps = {
     ...props,
     UIComponent: ReviewOrderUI,
-    defaultStar: 5
+    defaultStar: props?.defaultStar || 5
   }
   return <ReviewOrderController {...reviewOrderProps} />
 }

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

@@ -42,12 +42,3 @@ 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;
-`