ordering-ui-react-native 0.16.51 → 0.16.52

package/package.json

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

package/themes/original/index.tsx

@@ -29,6 +29,9 @@ 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';
@@ -186,6 +189,9 @@ export {
 	ReviewOrder,
 	ReviewProducts,
 	ReviewDriver,
+	ReviewOrderModal,
+	ReviewProductsModal,
+	ReviewDriverModal,
 	BusinessMenuList,
 	UserProfile,
 	MessageListing,

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

@@ -320,7 +320,15 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 					</MomentWrapper>
 					<View style={styles.wrapperOrderOptions}>
 						<WrapMomentOption onPress={() => navigation.navigate('OrderTypes', { configTypes: configTypes, setOrderTypeValue })}>
-							<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textSecondary}>{t(getTypesText(orderTypeValue || orderState?.options?.type || 1), 'Delivery')}</OText>
+							<OText
+								size={12}
+								numberOfLines={1}
+								ellipsizeMode={'tail'}
+								color={theme.colors.textSecondary}
+								style={{ textAlign: 'left' }}
+							>
+								{t(getTypesText(orderTypeValue || orderState?.options?.type || 1), 'Delivery')}
+							</OText>
 							<OIcon
 								src={theme.images.general.arrow_down}
 								width={10}

package/themes/original/src/components/BusinessesListing/Layout/Appointment/styles.tsx

@@ -43,8 +43,9 @@ export const WrapMomentOption = styled.TouchableOpacity`
   font-size: 12px;
   max-width: 240px;
   height: 26px;
+  width: 130px;
   align-items: center;
-  justify-content: center;
+  justify-content: space-between;
   padding-horizontal: 8px;
   flex-direction: row;
   margin-end: 12px;
@@ -84,7 +85,7 @@ export const FarAwayMessage = styled.View`
 `
 
 export const SearchBarWrapper = styled.View`
-  width: 100px;
+  width: 130px;
 `
 
 export const MomentWrapper = styled.View`

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

@@ -1,42 +1,91 @@
 
 import React, { useState, useEffect } from 'react'
-import { useOrder, useSession } from 'ordering-components/native';
+import { useOrder, useSession, useLanguage } from 'ordering-components/native';
 
 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'
 
 export const BusinessesListing = (props: any) => {
   const theme = useTheme()
+  const [, t] = useLanguage();
   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 [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 }
+  })
 
   const _getLastOrderHasNoReview = async () => {
     const lastOrderHasNoReview = await getLastOrderHasNoReview()
     lastOrderHasNoReview && handleOrderReview(lastOrderHasNoReview)
   }
 
+  const handleOrderReview = (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
+      },
+      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 }
+    })
+  }
+
+  const setIsReviewed = (reviewType: string) => {
+    const _reviewStatus = { ...lastOrderReview?.reviewed }
+    setLastOrderReview({
+      ...lastOrderReview,
+      reviewed: { ..._reviewStatus, [reviewType]: true }
+    })
+  }
+
+  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()
+    }
+  }
+
   useEffect(() => {
     auth && _getLastOrderHasNoReview()
   }, [auth])
@@ -45,6 +94,32 @@ export const BusinessesListing = (props: any) => {
     <>
       {(layout === 'original') && <OriginalBusinessListing {...props} />}
       {(layout === 'appointment') && <AppointmentBusinessListing {...props} />}
+
+      {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...')}
+          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')} />)
+          }
+
+        </OBottomPopup>
+      )}
     </>
   )
-}
+}

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

@@ -0,0 +1,301 @@
+import React, { useState, useEffect } from 'react'
+import { useLanguage, useToast, ToastType, ReviewDriver as ReviewDriverController } from 'ordering-components/native'
+import { StyleSheet, View, I18nManager, TouchableOpacity } from 'react-native'
+import { ReviewDriverParams } from '../../../types'
+import { useTheme } from 'styled-components/native'
+import { useForm, Controller } from 'react-hook-form'
+import { OText, OIcon, OButton, OInput } from '../../shared'
+import LinearGradient from 'react-native-linear-gradient'
+import { FloatingBottomContainer } from '../../../layouts/FloatingBottomContainer'
+import Spinner from 'react-native-loading-spinner-overlay'
+
+import { reviewCommentList } from '../../../../../../src/utils'
+
+import {
+  ReviewDriverContainer,
+  DriverPhotoContainer,
+  FormReviews,
+  RatingBarContainer,
+  RatingTextContainer,
+  CommentsButtonGroup,
+  ActionContainer,
+} from './styles'
+
+const ReviewDriverUI = (props: ReviewDriverParams) => {
+  const {
+    order,
+    navigation,
+    formState,
+    dirverReviews,
+    setDriverReviews,
+    handleSendDriverReview,
+    closeReviewDriver
+  } = props
+
+  const [, t] = useLanguage()
+  const theme = useTheme()
+  const { handleSubmit, control, errors } = useForm()
+  const [, { showToast }] = useToast()
+
+  const [isDriverReviewed, setIsDriverReviewed] = useState(false)
+
+  const styles = StyleSheet.create({
+    photoWrapper: {
+      shadowColor: theme.colors.black,
+      shadowRadius: 3,
+      shadowOffset: { width: 1, height: 4 },
+      elevation: 3,
+      borderRadius: 8,
+      shadowOpacity: 0.1,
+      overflow: 'hidden'
+    },
+    inputTextArea: {
+      borderColor: theme.colors.lightGray,
+      borderRadius: 8,
+      marginTop: 10,
+      marginBottom: 40,
+      height: 100,
+      alignItems: 'flex-start'
+    },
+    statusBar: {
+      transform: [{ scaleX: I18nManager.isRTL ? -1 : 1 }],
+      height: 10,
+      borderRadius: 5,
+      marginTop: 5
+    },
+    ratingItemContainer: {
+      position: 'absolute',
+      top: -20
+    },
+    ratingItem: {
+      left: '-50%',
+      flexDirection: 'column',
+      alignItems: 'center'
+    },
+    ratingLineStyle: {
+      height: 10,
+      width: 1,
+      marginBottom: 10,
+      backgroundColor: theme.colors.dusk
+    }
+  })
+
+  const [comments, setComments] = useState<Array<any>>([])
+  const [extraComment, setExtraComment] = useState('')
+  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: 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 }
+  ]
+
+  const commentsList = reviewCommentList('driver')
+
+  const onSubmit = () => {
+    if (dirverReviews?.qualification === 0) {
+      setAlertState({
+        open: true,
+        content: dirverReviews?.qualification === 0 ? [`${t('REVIEW_QUALIFICATION_REQUIRED', 'Review qualification is required')}`] : []
+      })
+      return
+    }
+    handleSendDriverReview()
+    setAlertState({ ...alertState, success: true })
+  }
+
+  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])
+    }
+  }
+
+  const handleChangeQualification = (qualification: number) => {
+    if (qualification) setDriverReviews({ ...dirverReviews, qualification: qualification, comment: '' })
+    setComments([])
+  }
+
+  const handleSendReviewClick = () => {
+    (!order?.user_review && !isDriverReviewed) && onSubmit()
+  }
+
+  useEffect(() => {
+    if (!formState.loading && formState.result?.error) {
+      setAlertState({
+        open: true,
+        success: false,
+        content: formState.result?.result || [t('ERROR', 'Error')]
+      })
+    }
+    if (!formState.loading && !formState.result?.error && alertState.success) {
+      setIsDriverReviewed && setIsDriverReviewed(true)
+      closeReviewDriver && closeReviewDriver()
+    }
+  }, [formState])
+
+  useEffect(() => {
+    if (Object.keys(errors).length > 0) {
+      // Convert all errors in one string to show in toast provider
+      const list = Object.values(errors);
+      let stringError = '';
+      list.map((item: any, i: number) => {
+        stringError +=
+          i + 1 === list.length ? `- ${item.message}` : `- ${item.message}\n`;
+      });
+      showToast(ToastType.Error, stringError);
+    }
+  }, [errors])
+
+  useEffect(() => {
+    if (alertState.open) {
+      alertState.content && showToast(
+        ToastType.Error,
+        alertState.content
+      )
+    }
+  }, [alertState.content])
+
+  useEffect(() => {
+    let _comments = ''
+    if (comments.length > 0) {
+      comments.map((comment: any) => (_comments += comment.content + '. '))
+    }
+    const _comment = _comments + extraComment
+    setDriverReviews({ ...dirverReviews, comment: _comment })
+  }, [comments, extraComment])
+
+  return (
+    <>
+      <ReviewDriverContainer>
+        <DriverPhotoContainer>
+          <View
+            style={{
+              ...styles.photoWrapper,
+              backgroundColor: theme.colors.white,
+              padding: !order?.driver?.photo ? 5 : 0
+            }}
+          >
+            <OIcon
+              url={order?.driver?.photo}
+              src={!order?.driver?.photo && theme.images.general.user}
+              cover={order?.driver?.photo ? true : false}
+              width={80}
+              height={80}
+            />
+          </View>
+          <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' }}>
+          <FormReviews>
+            <OText mBottom={13} color={theme.colors.textNormal}>{t('HOW_WAS_YOUR_DRIVER', 'How was your driver?')}</OText>
+            <RatingBarContainer>
+              <LinearGradient
+                start={{ x: 0.0, y: 0.0 }}
+                end={{ x: qualificationList[dirverReviews?.qualification - 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={() => handleChangeQualification(qualification.key)}
+                    >
+                      <View
+                        style={{
+                          ...styles.ratingLineStyle,
+                          backgroundColor: (qualification.pointerColor && !(dirverReviews?.qualification >= qualification.key)) ? theme.colors.dusk : 'transparent'
+                        }}
+                      />
+                      <OText size={12} color={dirverReviews?.qualification === qualification.key ? theme.colors.black : theme.colors.lightGray}>{qualification.text}</OText>
+                    </TouchableOpacity>
+                  </View>
+                ))}
+              </RatingTextContainer>
+            </RatingBarContainer>
+
+            <OText style={{ marginTop: 30 }} color={theme.colors.textNormal}>
+              {commentsList[dirverReviews?.qualification || 1]?.title}
+            </OText>
+            <CommentsButtonGroup>
+              {commentsList[dirverReviews?.qualification || 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.textNormal,
+                    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
+                />
+              )}
+            />
+          </FormReviews>
+        </View>
+      </ReviewDriverContainer>
+      <Spinner visible={formState.loading} />
+      <FloatingBottomContainer>
+        <ActionContainer>
+          <OButton
+            textStyle={{ color: theme.colors.white, paddingRight: 10 }}
+            text={t('SEND_REVIEW', 'Send Review')}
+            style={{ borderRadius: 8 }}
+            imgRightStyle={{ tintColor: theme.colors.white, right: 5, margin: 5 }}
+            isDisabled={dirverReviews?.qualification < 1 || dirverReviews?.comment.length < 1}
+            onClick={handleSubmit(handleSendReviewClick)}
+          />
+        </ActionContainer>
+      </FloatingBottomContainer>
+    </>
+  )
+}
+
+export const ReviewDriver = (props: any) => {
+  const reviewDriverProps = {
+    ...props,
+    UIComponent: ReviewDriverUI,
+    isToast: true
+  }
+  return <ReviewDriverController {...reviewDriverProps} />
+}

package/themes/original/src/components/Reviews/ReviewDriver/styles.tsx

@@ -0,0 +1,39 @@
+import styled from 'styled-components/native'
+
+export const ReviewDriverContainer = styled.ScrollView`
+  padding: 20px 40px;
+  margin-bottom: 100px;
+  max-height: 400px;
+`
+
+export const DriverPhotoContainer = styled.View`
+  margin-vertical: 5px;
+  flex-direction: column;
+  align-items: center;
+`
+
+export const FormReviews = styled.View`
+  flex: 1;
+  height: 100%;
+  margin-top: 30px;
+`
+
+export const RatingBarContainer = styled.View`
+  margin-top: 10px;
+  margin-bottom: 25px;
+`
+
+export const RatingTextContainer = styled.View`
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 10px;
+`
+export const CommentsButtonGroup = styled.View`
+  flex-direction: row;
+  flex-wrap: wrap;
+`
+
+export const ActionContainer = styled.View`
+  padding: 3px 30px;
+`

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

@@ -0,0 +1,326 @@
+import React, { useState, useEffect } from 'react'
+import { TouchableOpacity, StyleSheet, View, I18nManager } from 'react-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'
+
+import {
+  ReviewOrderContainer,
+  BusinessLogo,
+  FormReviews,
+  CommentsButtonGroup,
+  ActionContainer,
+  SkipButton,
+  RatingBarContainer,
+  RatingTextContainer,
+  RatingStarContainer,
+  PlacedDate
+} from './styles'
+import { OButton, OIcon, OInput, OText } from '../../shared'
+import { FloatingBottomContainer } from '../../../layouts/FloatingBottomContainer'
+import Spinner from 'react-native-loading-spinner-overlay'
+
+import { ReviewOrderParams } from '../../../types'
+import { useTheme } from 'styled-components/native'
+
+import { reviewCommentList } from '../../../../../../src/utils'
+
+export const ReviewOrderUI = (props: ReviewOrderParams) => {
+  const {
+    order,
+    stars,
+    handleSendReview,
+    formState,
+    setStars,
+    setIsReviewed,
+    closeReviewOrder,
+    skipReview
+  } = props
+
+  const theme = useTheme()
+
+  const styles = StyleSheet.create({
+    logoWrapper: {
+      shadowColor: theme.colors.black,
+      shadowRadius: 3,
+      shadowOffset: { width: 1, height: 4 },
+      elevation: 3,
+      borderRadius: 8,
+      shadowOpacity: 0.1,
+      overflow: 'hidden'
+    },
+    inputTextArea: {
+      borderColor: theme.colors.lightGray,
+      borderRadius: 8,
+      marginTop: 10,
+      marginBottom: 40,
+      height: 100,
+      alignItems: 'flex-start'
+    },
+    statusBar: {
+      transform: [{ scaleX: I18nManager.isRTL ? -1 : 1 }],
+      height: 10,
+      borderRadius: 5,
+      marginTop: 5
+    },
+    ratingItemContainer: {
+      position: 'absolute',
+      top: -20
+    },
+    ratingItem: {
+      left: '-50%',
+      flexDirection: 'column',
+      alignItems: 'center'
+    },
+    ratingLineStyle: {
+      height: 10,
+      width: 1,
+      marginBottom: 10,
+      backgroundColor: theme.colors.dusk
+    },
+    reviewedStyle: {
+      flexDirection: 'row',
+      justifyContent: 'center',
+      marginVertical: 20
+    },
+  })
+
+  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)) {
+      setAlertState({
+        open: true,
+        content: stars.quality === 0 ? [`${t('REVIEW_QUALIFICATION_REQUIRED', 'Review qualification is required')}`] : []
+      })
+      return
+    }
+    setAlertState({ ...alertState, success: true })
+    handleSendReview()
+  }
+
+  const qualificationList = [
+    { 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 }
+  ]
+
+  const commentsList = reviewCommentList('order')
+
+  const handleChangeStars = (index: number) => {
+    if (index) setStars({ ...stars, quality: index, punctiality: index, service: index, packaging: index, comments: '' })
+    setComments([])
+  }
+
+  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])
+    }
+  }
+
+  const isSelectedComment = (commentKey: number) => {
+    const found = comments.find((comment: any) => comment?.key === commentKey)
+    return found
+  }
+
+  const handleContinueClick = () => {
+    !order?.review && onSubmit()
+  }
+
+  useEffect(() => {
+    if (formState.error && !formState?.loading) {
+      showToast(ToastType.Error, formState.result)
+    }
+    if (!formState.loading && !formState.error && alertState.success) {
+      showToast(ToastType.Success, t('ORDER_REVIEW_SUCCESS_CONTENT', 'Thank you, Order review successfully submitted!'))
+      setIsReviewed && setIsReviewed(true)
+      closeReviewOrder && closeReviewOrder()
+    }
+  }, [formState.result])
+
+  useEffect(() => {
+    if (Object.keys(errors).length > 0) {
+      // Convert all errors in one string to show in toast provider
+      const list = Object.values(errors);
+      let stringError = '';
+      list.map((item: any, i: number) => {
+        stringError +=
+          i + 1 === list.length ? `- ${item.message}` : `- ${item.message}\n`;
+      });
+      showToast(ToastType.Error, stringError);
+    }
+  }, [errors])
+
+  useEffect(() => {
+    if (alertState.open) {
+      alertState.content && showToast(
+        ToastType.Error,
+        alertState.content
+      )
+    }
+  }, [alertState.content])
+
+  useEffect(() => {
+    let _comments = ''
+    if (comments.length > 0) {
+      comments.map(comment => _comments += comment.content + '. ')
+    }
+    let _comment
+    _comment = _comments + extraComment
+    setStars({ ...stars, comments: _comment })
+  }, [comments, extraComment])
+
+  return (
+    <>
+      <ReviewOrderContainer>
+        <BusinessLogo>
+          <View style={styles.logoWrapper}>
+            <OIcon
+              url={order?.logo}
+              width={80}
+              height={80}
+            />
+          </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>
+          </View>
+        ) : (
+          <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 }}
+                      >
+                        <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>
+        )}
+        <Spinner visible={formState.loading} />
+      </ReviewOrderContainer>
+      <FloatingBottomContainer>
+        <ActionContainer>
+          <SkipButton
+            onPress={skipReview}
+          >
+            <OText weight={700} size={18} color={theme.colors.textNormal}>{t('FRONT_VISUALS_SKIP', 'Skip')}</OText>
+          </SkipButton>
+          <OButton
+            textStyle={{ color: theme.colors.white, paddingRight: 10 }}
+            text={t('CONTINUE_REVIEW', 'Continue Review')}
+            style={{ borderRadius: 8 }}
+            imgRightSrc={theme.images.general.arrow_right}
+            imgRightStyle={{ tintColor: theme.colors.white, right: 5, margin: 5 }}
+            onClick={handleSubmit(handleContinueClick)}
+          />
+        </ActionContainer>
+      </FloatingBottomContainer>
+    </>
+  )
+}
+
+export const ReviewOrder = (props: ReviewOrderParams) => {
+  const reviewOrderProps = {
+    ...props,
+    UIComponent: ReviewOrderUI,
+    defaultStar: 5
+  }
+  return <ReviewOrderController {...reviewOrderProps} />
+}

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

@@ -0,0 +1,53 @@
+import styled from 'styled-components/native'
+
+export const ReviewOrderContainer = styled.ScrollView`
+  padding: 20px 40px;
+  margin-bottom: 100px;
+`
+
+export const BusinessLogo = styled.View`
+  margin-vertical: 5px;
+  align-items: center;
+`
+
+export const FormReviews = styled.View`
+  flex: 1;
+  height: 100%;
+  margin-top: 30px;
+`
+
+export const CommentsButtonGroup = styled.View`
+  flex-direction: row;
+  flex-wrap: wrap;
+`
+
+export const ActionContainer = styled.View`
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding: 3px 30px;
+`
+
+export const SkipButton = styled.TouchableOpacity`
+`
+
+export const RatingBarContainer = styled.View`
+  margin-top: 10px;
+  margin-bottom: 25px;
+`
+
+export const RatingTextContainer = styled.View`
+  flex-direction: row;
+  align-items: center;
+  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/Reviews/ReviewProducts/index.tsx

@@ -0,0 +1,101 @@
+import React, { useState, useEffect } from 'react'
+import { useLanguage, useToast, ToastType, ReviewProduct as ReviewProductController } from 'ordering-components/native'
+import { OText, OButton } from '../../shared'
+import { ReviewProductParams } from '../../../types'
+import { FloatingBottomContainer } from '../../../layouts/FloatingBottomContainer'
+import { useTheme } from 'styled-components/native'
+import { SingleProductReview } from '../../SingleProductReview'
+
+import {
+  ReviewProductsContainer,
+  ActionContainer,
+  SkipButton
+} from './styles'
+
+const ReviewProductsUI = (props: ReviewProductParams) => {
+  const {
+    navigation,
+    order,
+    formState,
+    handleChangeFormState,
+    handleSendProductReview,
+    closeReviewProduct
+  } = props
+
+  const [, t] = useLanguage()
+  const theme = useTheme()
+  const [, { showToast }] = useToast()
+
+  const [isProductReviewed, setIsProductReviewed] = useState(false)
+  const [alertState, setAlertState] = useState<{ open: boolean, content: Array<any>, success?: boolean }>({ open: false, content: [], success: false })
+
+  const handleContinueClick = () => {
+    setAlertState({ ...alertState, success: true })
+    handleSendProductReview()
+  }
+  useEffect(() => {
+    if (alertState.open) {
+      alertState.content && showToast(
+        ToastType.Error,
+        alertState.content
+      )
+    }
+  }, [alertState.content])
+
+  useEffect(() => {
+    if (!formState.loading && formState.result?.error) {
+      setAlertState({
+        open: true,
+        success: false,
+        content: formState.result?.result || [t('ERROR', 'Error')]
+      })
+    }
+    if (!formState.loading && !formState.result?.error && alertState.success) {
+      setIsProductReviewed && setIsProductReviewed(true)
+      closeReviewProduct && closeReviewProduct()
+    }
+  }, [formState])
+
+  return (
+    <>
+      <ReviewProductsContainer>
+        {order?.products?.map((product: any) => (
+          <SingleProductReview
+            key={product.id}
+            product={product}
+            formState={formState}
+            handleChangeFormState={handleChangeFormState}
+          />
+        ))}
+      </ReviewProductsContainer>
+
+      <FloatingBottomContainer>
+        <ActionContainer>
+          <SkipButton
+            onPress={() => closeReviewProduct && closeReviewProduct()}
+          >
+            <OText weight={700} size={18} color={theme.colors.textNormal}>{t('FRONT_VISUALS_SKIP', 'Skip')}</OText>
+          </SkipButton>
+          <OButton
+            textStyle={{ color: theme.colors.white, paddingRight: 10 }}
+            text={order?.driver && !order?.user_review ? t('CONTINUE', 'Continue') : t('SEND_REVIEW', 'Send Review')}
+            style={{ borderRadius: 8 }}
+            imgRightSrc={theme.images.general.arrow_right}
+            imgRightStyle={{ tintColor: theme.colors.white, right: 5, margin: 5 }}
+            isDisabled={formState.loading || formState?.changes?.length === 0}
+            onClick={() => handleContinueClick()}
+          />
+        </ActionContainer>
+      </FloatingBottomContainer>
+    </>
+  )
+}
+
+export const ReviewProducts = (props: any) => {
+  const reviewProductProps = {
+    ...props,
+    UIComponent: ReviewProductsUI,
+    isToast: true
+  }
+  return <ReviewProductController {...reviewProductProps} />
+}

package/themes/original/src/components/Reviews/ReviewProducts/styles.tsx

@@ -0,0 +1,17 @@
+import styled from 'styled-components/native'
+
+export const ReviewProductsContainer = styled.ScrollView`
+  padding: 20px 40px;
+  margin-bottom: 100px;
+  max-height: 400px;
+`
+
+export const ActionContainer = styled.View`
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding: 3px 30px;
+`
+
+export const SkipButton = styled.TouchableOpacity`
+`

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

@@ -0,0 +1,9 @@
+import { ReviewOrder as ReviewOrderModal } from './ReviewOrder';
+import { ReviewProducts as ReviewProductsModal } from './ReviewProducts';
+import { ReviewDriver as ReviewDriverModal } from './ReviewDriver';
+
+export {
+    ReviewOrderModal,
+    ReviewProductsModal,
+    ReviewDriverModal
+}

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

@@ -65,8 +65,8 @@ const ServiceFormUI = (props: ServiceFormParams) => {
 
   const styles = StyleSheet.create({
     photoStyle: {
-      width: 42,
-			height: 42,
+      width: 45,
+			height: 45,
 			borderRadius: 7.6
     },
     buttonStyle: {
@@ -313,12 +313,14 @@ const ServiceFormUI = (props: ServiceFormParams) => {
                   <OText
                     size={14}
                     weight={'400'}
+                    lineHeight={22}
                   >
                     {currentProfessional?.name} {currentProfessional?.lastname}
                   </OText>
                   <OText
                     size={12}
                     weight={'400'}
+                    lineHeight={17}
                     color={isBusyTime(currentProfessional) ? theme.colors.danger5 : theme.colors.success500}
                   >
                     {isBusyTime(currentProfessional)
@@ -459,9 +461,7 @@ const ServiceFormUI = (props: ServiceFormParams) => {
             size={14}
             weight={Platform.OS === 'ios' ? '600' : 'bold'}
           >
-            {dateSelected
-              ? moment(dateSelected).format('hh:mm A')
-              : t('ASAP_ABBREVIATION', 'ASAP')}
+            {dateSelected && moment(dateSelected).format('hh:mm A')}
           </OText>
           {((productCart &&
             auth &&
@@ -517,6 +517,14 @@ const ServiceFormUI = (props: ServiceFormParams) => {
 				entireModal
 			>
 				<ScrollView contentContainerStyle={styles.professionalList}>
+          <View style={{ padding: 11 }}>
+            <OText
+              size={14}
+              weight={'400'}
+            >
+              {t('ANY_OROFESSIONAL_MEMBER', 'Any professional member')}
+            </OText>
+          </View>
           {professionalList?.map((professional: any) => professional?.products?.includes(product?.id) && (
             <TouchableOpacity
               key={professional?.id}
@@ -536,12 +544,14 @@ const ServiceFormUI = (props: ServiceFormParams) => {
                   <OText
                     size={14}
                     weight={'400'}
+                    lineHeight={22}
                   >
                     {professional?.name} {professional?.lastname}
                   </OText>
                   <OText
                     size={12}
                     weight={'400'}
+                    lineHeight={17}
                     color={isBusyTime(professional) ? theme.colors.danger5 : theme.colors.success500}
                   >
                     {isBusyTime(professional)

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

@@ -1,6 +1,7 @@
 import React from 'react'
-import { Modal, TouchableWithoutFeedback, Dimensions, StyleSheet, View, Text, Platform, StatusBar } from 'react-native'
+import { Modal, TouchableWithoutFeedback, TouchableOpacity, Dimensions, StyleSheet, View, Text, Platform, StatusBar } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { OIcon } from '.';
 const deviceHeight = Dimensions.get('window').height
 
 interface Props {
@@ -9,6 +10,9 @@ interface Props {
 	children?: any;
 	onClose?: any;
 	isStatusBar?: boolean;
+	bottomContainerStyle?: any;
+	titleStyle?: any;
+	closeIcon?: any;
 }
 const OBottomPopup = (props: Props) => {
 	const {
@@ -16,7 +20,10 @@ const OBottomPopup = (props: Props) => {
 		title,
 		onClose,
 		children,
-		isStatusBar
+		isStatusBar,
+		titleStyle,
+		bottomContainerStyle,
+		closeIcon
 	} = props
 	const { top, bottom } = useSafeAreaInsets();
 	return (
@@ -27,7 +34,7 @@ const OBottomPopup = (props: Props) => {
 			onRequestClose={() => onClose()}
 			presentationStyle={'fullScreen'}
 		>
-		  {isStatusBar && <StatusBar translucent={false} />}
+			{isStatusBar && <StatusBar translucent={false} />}
 			<View style={styles.container}>
 				<TouchableWithoutFeedback
 					style={styles.touchableOutsideStyle}
@@ -35,10 +42,18 @@ const OBottomPopup = (props: Props) => {
 				>
 					<View style={styles.touchableOutsideStyle} />
 				</TouchableWithoutFeedback>
-				<View style={styles.bottomContainer}>
+				<View style={{ ...styles.bottomContainer, ...bottomContainerStyle }}>
 					<View style={{ paddingTop: top, paddingBottom: bottom }}>
-						{title != '' && (
-							<Text style={styles.titleStyle}>
+						{closeIcon && (
+							<TouchableOpacity onPress={onClose} style={styles.closeIconStyle}>
+								<OIcon
+									src={closeIcon}
+									width={30}
+								/>
+							</TouchableOpacity>
+						)}
+						{!!title && (
+							<Text style={{ ...styles.titleStyle, ...titleStyle }}>
 								{title}
 							</Text>
 						)}
@@ -69,7 +84,11 @@ const styles = StyleSheet.create({
 	titleStyle: {
 		fontSize: 20,
 		fontWeight: 'bold',
-		marginVertical: 15
+		marginVertical: 10
+	},
+	closeIconStyle: {
+		paddingTop: 20,
+		paddingLeft: 20
 	}
 })
 

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

@@ -417,25 +417,28 @@ export interface ProductItemAccordionParams {
 	isFromCheckout?: any
 }
 export interface ReviewOrderParams {
-	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,
-	handleSendReview?: any,
-	formState?: any,
-	navigation?: any,
-	setIsReviewed?: (isReviewed: boolean) => {},
-	handleReviewState?: any,
-	setStars?: any,
-	onNavigationRedirect?: any
+	order?: { id: number, business_id: 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;
+	handleSendReview?: any;
+	formState?: any;
+	navigation?: any;
+	setIsReviewed?: (isReviewed: boolean) => void;
+	handleReviewState?: any;
+	setStars?: any;
+	onNavigationRedirect?: any;
+	closeReviewOrder?: () => void;
+	skipReview?: () => void;
 }
 export interface ReviewProductParams {
 	navigation?: any,
 	onNavigationRedirect?: any,
-	order?: { orderId: number, businessId: number, logo: string, driver: any, products: Array<any>, review: any, user_review: any },
+	order?: { orderId: number, business_id: number, logo: string, driver: any, products: Array<any>, review: any, user_review: any },
 	formState?: any,
 	handleChangeFormState?: any,
-	handleSendProductReview?: any
+	handleSendProductReview?: any;
+	closeReviewProduct?: () => void;
 }
 export interface SingleProductReviewParams {
 	product: any,
@@ -445,12 +448,13 @@ export interface SingleProductReviewParams {
 export interface ReviewDriverParams {
 	navigation?: any,
 	onNavigationRedirect?: any,
-	order?: { orderId: number, businessId: number, logo: string, driver: any, products: Array<any>, review: any, user_review: any },
+	order?: { orderId: number, business_id: number, logo: string, driver: any, products: Array<any>, review: any, user_review: any },
 	formState?: any,
 	setIsDriverReviewed?: (isReviewed: boolean) => {},
 	dirverReviews?: any,
 	setDriverReviews?: any,
-	handleSendDriverReview?: any
+	handleSendDriverReview?: any;
+	closeReviewDriver?: () => void;
 }
 export interface MessagesParams {
 	type?: string,