ordering-ui-react-native 0.16.35 → 0.16.36-release

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

@@ -9,7 +9,7 @@ export const TopActions = styled.TouchableOpacity`
 	height: 60px;
 	justify-content: center;
   padding-horizontal: 30px;
-  width: 80px;
+  width: 100px;
 `;
 
 export const TopHeader = styled.View`
@@ -49,7 +49,7 @@ export const ProductDescription = styled.View`
 `
 
 export const ProductEditions = styled.View`
-
+  padding: 0 40px;
 `
 
 export const SectionTitle = styled.View`
@@ -65,26 +65,23 @@ export const WrapperSubOption = styled.View`
 `
 
 export const ProductComment = styled.View`
-  padding-bottom: 50px;
+  padding-bottom: ${(props: any) => props.pb || 60}px;
 `
 
 export const ProductActions = styled.View`
   position: absolute;
   bottom: 0px;
-	min-height: 70px;
   padding-top: ${(props: any) => props.ios ? '20px' : '0'};
   padding-horizontal: 40px;
+  padding-vertical: 20px;
   width: 100%;
-  flex-direction: row;
+  flex-direction: ${(props: any) => props.isColumn ? 'column' : 'row'};
   background-color: #FFF;
   z-index: 1000;
-  align-items: center;
-  justify-content: space-between;
   border-top-width: 1px;
   border-top-color: ${(props: any) => props.theme.colors.border};
 `
 export const ExtraOptionWrap = styled.ScrollView`
-	margin-horizontal: -40px;
 `;
 
 export const WeightUnitSwitch = styled.View`
@@ -99,4 +96,8 @@ export const WeightUnitItem = styled.View`
   `}
 `
 export const ProductSummary = styled.View`
+  padding: 26px 40px;
+  position: relative;
+  background-color: white;
+  z-index: 100;
 `

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

@@ -4,6 +4,8 @@ import { useUtils, useLanguage, useOrder } from 'ordering-components/native'
 import { useTheme } from 'styled-components/native';
 import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons'
 import RNPickerSelect from 'react-native-picker-select'
+import { ServiceForm } from '../ServiceForm';
+import FastImage from 'react-native-fast-image'
 
 import {
 	Accordion,
@@ -18,7 +20,7 @@ import {
 	ProductSubOption,
 	ProductComment
 } from './styles'
-import { OIcon, OText, OAlert } from '../shared'
+import { OIcon, OText, OAlert, OModal } from '../shared'
 
 import { ProductItemAccordionParams } from '../../types'
 
@@ -68,9 +70,10 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
 
 	const [, t] = useLanguage()
 	const [orderState] = useOrder()
-	const [{ parsePrice, optimizeImage }] = useUtils()
+	const [{ parsePrice, optimizeImage, parseDate }] = useUtils()
 
 	const [isActive, setActiveState] = useState(false)
+	const [isServiceOpen, setIsServiceOpen] = useState(false)
 	// const [setHeight, setHeightState] = useState({ height: new Animated.Value(0) })
 	// const [setRotate, setRotateState] = useState({ angle: new Animated.Value(0) })
 
@@ -92,6 +95,14 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
 		return product
 	}
 
+	const handleEditProduct = (curProduct: any) => {
+		if (!curProduct?.calendar_event) {
+			onEditProduct && onEditProduct(curProduct)
+			return
+		}
+		setIsServiceOpen(true)
+	}
+
 	/* const toggleAccordion = () => {
 		if ((!product?.valid_menu && isCartProduct)) return
 		if (isActive) {
@@ -133,135 +144,195 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
 	})
 
 	return (
-		<AccordionSection>
-			<Accordion
-				isValid={product?.valid ?? true}
-				onPress={() => (!product?.valid_menu && isCartProduct)
-					? {}
-					: setActiveState(!isActive)}
-				activeOpacity={1}
-			>
-				<View style={{ flexDirection: 'row', alignItems: 'flex-start' }}>
-					<ContentInfo>
-						{product?.images && (
-							<ProductImage>
-								{isFromCheckout ? (
-									<OIcon url={optimizeImage(product?.images, 'h_100,c_limit')} style={{ ...styles.productImage, ...{ width: 82, height: 82 } }} />
-								) : (
-									<OIcon url={optimizeImage(product?.images, 'h_100,c_limit')} style={styles.productImage} />
-								)}
-							</ProductImage>
-						)}
-						{isCartProduct && !isCartPending && getProductMax && (
-							<ProductInfo>
-								<RNPickerSelect
-									items={productOptions}
-									onValueChange={handleChangeQuantity}
-									value={product.quantity.toString()}
-									style={pickerStyle}
-									useNativeAndroidPickerStyle={false}
-									placeholder={{}}
-									Icon={() => <View style={pickerStyle.icon}><OIcon src={theme.images.general.arrow_down} color={theme.colors.textNormal} width={8} /></View>}
-									disabled={orderState.loading}
-								/>
-							</ProductInfo>
-						)}
-						{isFromCheckout && (
-							<ProductQuantity>
-								<OText size={12} lineHeight={18}>
-									{product?.quantity}
-								</OText>
-							</ProductQuantity>
-						)}
-						<View style={{ flex: 1 }}>
-							<OText size={12} lineHeight={18} weight={'400'}>{product.name}</OText>
-						</View>
-						<View style={{ display: 'flex', flexDirection: 'column', flex: 1, alignItems: 'flex-end' }}>
-							<View style={{ flexDirection: 'row' }}>
-								<OText size={12} lineHeight={18} weight={'400'}>{parsePrice(product.total || product.price)}</OText>
-								{(productInfo().ingredients.length > 0 || productInfo().options.length > 0 || product.comment) && (
-									<MaterialCommunityIcon name='chevron-down' size={18} />
-								)}
+		<>
+			<AccordionSection>
+				<Accordion
+					isValid={product?.valid ?? true}
+					onPress={() => (!product?.valid_menu && isCartProduct)
+						? {}
+						: setActiveState(!isActive)}
+					activeOpacity={1}
+				>
+					<View style={{ flexDirection: 'row', alignItems: 'flex-start' }}>
+						<ContentInfo>
+							{(product?.images || theme?.images?.dummies?.product) && (
+								<ProductImage>
+									{isFromCheckout ? (
+										product?.images ? (
+											<FastImage
+												style={{ ...styles.productImage, ...{ width: 82, height: 82 } }}
+												source={{
+													uri: optimizeImage(product?.images, 'h_100,c_limit'),
+													priority: FastImage.priority.normal,
+												}}
+												resizeMode={FastImage.resizeMode.cover}
+											/>
+										) : (
+											<OIcon
+												src={theme?.images?.dummies?.product}
+												style={{ ...styles.productImage, ...{ width: 82, height: 82 } }}
+											/>
+										)
+									) : (
+										product?.images ? (
+											<FastImage
+												style={styles.productImage}
+												source={{
+													uri: optimizeImage(product?.images, 'h_100,c_limit'),
+													priority: FastImage.priority.normal,
+												}}
+												resizeMode={FastImage.resizeMode.cover}
+											/>
+										) : (
+											<OIcon
+												src={theme?.images?.dummies?.product}
+												style={styles.productImage}
+											/>
+										)
+									)}
+								</ProductImage>
+							)}
+							{!!product?.calendar_event ? (
+								<View style={{ flex: 1, marginLeft: 10, flexDirection: 'column' }}>
+									<View>
+										<OText size={12} lineHeight={18} weight={'400'} numberOfLines={1}>{product?.name}</OText>
+									</View>
+									<OText size={10} color={theme.colors.textSecondary} style={{ marginTop: 3 }}>
+										{parseDate(product?.calendar_event?.start, { outputFormat: 'hh:mm a' })} - {parseDate(product?.calendar_event?.end, { outputFormat: 'hh:mm a' })}
+									</OText>
+								</View>
+							) : (
+								<>
+									{isCartProduct && !isCartPending && getProductMax && (
+										<ProductInfo>
+											<RNPickerSelect
+												items={productOptions}
+												onValueChange={handleChangeQuantity}
+												value={product.quantity.toString()}
+												style={pickerStyle}
+												useNativeAndroidPickerStyle={false}
+												placeholder={{}}
+												Icon={() => <View style={pickerStyle.icon}><OIcon src={theme.images.general.arrow_down} color={theme.colors.textNormal} width={8} /></View>}
+												disabled={orderState.loading}
+											/>
+										</ProductInfo>
+									)}
+									{isFromCheckout && (
+										<ProductQuantity>
+											<OText size={12} lineHeight={18}>
+												{product?.quantity}
+											</OText>
+										</ProductQuantity>
+									)}
+									<View style={{ flex: 1 }}>
+										<OText size={12} lineHeight={18} weight={'400'}>{product.name}</OText>
+									</View>
+								</>
+							)}
+							<View style={{ display: 'flex', flexDirection: 'column', flex: 1, alignItems: 'flex-end', maxWidth: 100 }}>
+								<View style={{ flexDirection: 'row' }}>
+									<OText size={12} lineHeight={18} weight={'400'}>{parsePrice(product.total || product.price)}</OText>
+									{(productInfo().ingredients.length > 0 || productInfo().options.length > 0 || product.comment) && (
+										<MaterialCommunityIcon name='chevron-down' size={18} />
+									)}
+								</View>
+								<View style={{ display: 'flex', flexDirection: 'row', justifyContent: 'flex-start' }}>
+									{onEditProduct && isCartProduct && !isCartPending && product?.valid_menu && (
+										<TouchableOpacity onPress={() => handleEditProduct(product)} style={{ marginEnd: 7 }}>
+											<OIcon
+												src={theme.images.general.pencil}
+												width={20}
+												color={theme.colors.textSecondary}
+											/>
+										</TouchableOpacity>
+									)}
+									{onDeleteProduct && isCartProduct && !isCartPending && (
+										<OAlert
+											title={t('DELETE_PRODUCT', 'Delete Product')}
+											message={t('QUESTION_DELETE_PRODUCT', 'Are you sure that you want to delete the product?')}
+											onAccept={() => onDeleteProduct(product)}
+										>
+											<OIcon
+												src={theme.images.general.trash}
+												width={20}
+												color={theme.colors.textSecondary}
+											/>
+										</OAlert>
+									)}
+								</View>
 							</View>
-							<View style={{ display: 'flex', flexDirection: 'row', justifyContent: 'flex-start' }}>
-								{onEditProduct && isCartProduct && !isCartPending && product?.valid_menu && (
-									<TouchableOpacity onPress={() => onEditProduct(product)} style={{ marginEnd: 7 }}>
-										<OIcon
-											src={theme.images.general.pencil}
-											width={16}
-											color={theme.colors.textSecondary}
-										/>
-									</TouchableOpacity>
-								)}
-								{onDeleteProduct && isCartProduct && !isCartPending && (
-									<OAlert
-										title={t('DELETE_PRODUCT', 'Delete Product')}
-										message={t('QUESTION_DELETE_PRODUCT', 'Are you sure that you want to delete the product?')}
-										onAccept={() => onDeleteProduct(product)}
-									>
-										<OIcon
-											src={theme.images.general.trash}
-											width={17}
-											color={theme.colors.textSecondary}
-										/>
-									</OAlert>
-								)}
+						</ContentInfo>
+					</View>
+					{((isCartProduct && !isCartPending && product?.valid_menu && !product?.valid_quantity) ||
+						(!product?.valid_menu && isCartProduct && !isCartPending)) && (
+							<View style={{ alignItems: 'flex-end', width: '100%', }}>
+								<OText size={14} color={theme.colors.red} style={{ textAlign: 'right', marginTop: 5 }}>
+									{t('NOT_AVAILABLE', 'Not available')}
+								</OText>
 							</View>
-						</View>
-					</ContentInfo>
-				</View>
-				{((isCartProduct && !isCartPending && product?.valid_menu && !product?.valid_quantity) ||
-					(!product?.valid_menu && isCartProduct && !isCartPending)) && (
-						<View style={{ alignItems: 'flex-end', width: '100%', }}>
-							<OText size={14} color={theme.colors.red} style={{ textAlign: 'right', marginTop: 5 }}>
-								{t('NOT_AVAILABLE', 'Not available')}
-							</OText>
-						</View>
-					)}
-			</Accordion>
-
-			<View style={{ display: isActive ? 'flex' : 'none', paddingStart: 40 }}>
-				<Animated.View>
-					<AccordionContent>
-						{productInfo().ingredients.length > 0 && productInfo().ingredients.some((ingredient: any) => !ingredient.selected) && (
-							<ProductOptionsList>
-								<OText size={10} color={theme.colors.textSecondary}>{t('INGREDIENTS', 'Ingredients')}</OText>
-								{productInfo().ingredients.map((ingredient: any) => !ingredient.selected && (
-									<OText size={10} color={theme.colors.textThird} key={ingredient.id} style={{ marginLeft: 10 }}>{t('NO', 'No')} {ingredient.name}</OText>
-								))}
-							</ProductOptionsList>
-						)}
-						{productInfo().options.length > 0 && (
-							<ProductOptionsList>
-								{productInfo().options.map((option: any, i: number) => (
-									<ProductOption key={option.id + i}>
-										<OText size={10} color={theme.colors.textSecondary}>{option.name}</OText>
-										{option.suboptions.map((suboption: any) => (
-											<ProductSubOption key={suboption.id}>
-												<OText size={10} color={theme.colors.textThird}>
-													{getFormattedSubOptionName({
-														quantity: suboption.quantity,
-														name: suboption.name,
-														position: (suboption.position !== 'whole') ? t(suboption.position.toUpperCase(), suboption.position) : '',
-														price: parsePrice(suboption.price)
-													})}
-												</OText>
-											</ProductSubOption>
-										))}
-									</ProductOption>
-								))}
-							</ProductOptionsList>
 						)}
-						{product.comment && (
-							<ProductComment>
-								<OText size={10} color={theme.colors.textSecondary}>{t('SPECIAL_COMMENT', 'Special Comment')}</OText>
-								<OText size={10} color={theme.colors.textThird}>{product.comment}</OText>
-							</ProductComment>
-						)}
-					</AccordionContent>
-				</Animated.View>
-			</View>
-		</AccordionSection>
+				</Accordion>
+
+				<View style={{ display: isActive ? 'flex' : 'none', paddingStart: 40 }}>
+					<Animated.View>
+						<AccordionContent>
+							{productInfo().ingredients.length > 0 && productInfo().ingredients.some((ingredient: any) => !ingredient.selected) && (
+								<ProductOptionsList>
+									<OText size={10} color={theme.colors.textSecondary}>{t('INGREDIENTS', 'Ingredients')}</OText>
+									{productInfo().ingredients.map((ingredient: any) => !ingredient.selected && (
+										<OText size={10} color={theme.colors.textThird} key={ingredient.id} style={{ marginLeft: 10 }}>{t('NO', 'No')} {ingredient.name}</OText>
+									))}
+								</ProductOptionsList>
+							)}
+							{productInfo().options.length > 0 && (
+								<ProductOptionsList>
+									{productInfo().options.map((option: any, i: number) => (
+										<ProductOption key={option.id + i}>
+											<OText size={10} color={theme.colors.textSecondary}>{option.name}</OText>
+											{option.suboptions.map((suboption: any) => (
+												<ProductSubOption key={suboption.id}>
+													<OText size={10} color={theme.colors.textThird}>
+														{getFormattedSubOptionName({
+															quantity: suboption.quantity,
+															name: suboption.name,
+															position: (suboption.position !== 'whole') ? t(suboption.position.toUpperCase(), suboption.position) : '',
+															price: parsePrice(suboption.price)
+														})}
+													</OText>
+												</ProductSubOption>
+											))}
+										</ProductOption>
+									))}
+								</ProductOptionsList>
+							)}
+							{product.comment && (
+								<ProductComment>
+									<OText size={10} color={theme.colors.textSecondary}>{t('SPECIAL_COMMENT', 'Special Comment')}</OText>
+									<OText size={10} color={theme.colors.textThird}>{product.comment}</OText>
+								</ProductComment>
+							)}
+						</AccordionContent>
+					</Animated.View>
+				</View>
+			</AccordionSection>
+			<OModal
+				open={isServiceOpen}
+				onClose={() => setIsServiceOpen(false)}
+				entireModal
+			>
+				<ServiceForm
+					isCartProduct
+					isService
+					businessId={product?.business_id}
+					categoryId={product?.category_id}
+					productId={product?.id}
+					productCart={product}
+					onSave={() => setIsServiceOpen(false)}
+					onClose={() => setIsServiceOpen(false)}
+					professionalSelected={product?.calendar_event?.professional}
+				/>
+			</OModal>
+		</>
 	)
 }
 

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

@@ -30,7 +30,7 @@ const ProductOptionUI = (props: any) => {
 	return (
 		<Container style={{ color: error ? 'orange' : theme.colors.white }}>
 			<WrapHeader>
-				<OText size={16} lineHeight={24} weight={'600'}>{option.name}</OText>
+				<OText size={16} lineHeight={24} weight={'600'} style={{ flex: 1 }}>{option.name}</OText>
 				<OText color={theme.colors.red}>{maxMin}</OText>
 			</WrapHeader>
 			{children}

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

@@ -97,7 +97,8 @@ export const ProfessionalFilter = (props: ProfessionalFilterParams) => {
                 />
               ) : (
                 <OIcon
-                  src={theme?.images?.dummies?.product}
+                  src={theme?.images?.general?.user}
+                  cover={false}
                   style={styles.photoStyle}
                 />
               )}

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

@@ -6,7 +6,7 @@ import CalendarPicker from 'react-native-calendar-picker'
 import FeatherIcon from 'react-native-vector-icons/Feather';
 import moment from 'moment'
 import SelectDropdown from 'react-native-select-dropdown'
-import { OButton, OText } from '../shared'
+import { OButton, OText, OIcon } from '../shared'
 import IconAntDesign from 'react-native-vector-icons/AntDesign'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { ProfessionalProfileParams } from '../../types'
@@ -58,11 +58,14 @@ export const ProfessionalProfile = (props: ProfessionalProfileParams) => {
       height: 40,
       marginBottom: 30
     },
+    photoStyle: {
+      alignSelf: 'center'
+    }
   })
 
   const onDateChange = (date: any) => {
     setSelectedDate(date)
-    dropdownRef.current.reset()
+    dropdownRef?.current && dropdownRef.current.reset()
   }
 
   const dropDownIcon = () => {
@@ -151,13 +154,21 @@ export const ProfessionalProfile = (props: ProfessionalProfileParams) => {
 
   return (
     <Container>
-			<ProfessionalPhoto
-				source={{
-					uri:
-          professional?.photo ||
-						optimizeImage(theme.images.general.user, 'h_250,c_limit'),
-				}}
-      />
+      {!!professional?.photo ? (
+        <ProfessionalPhoto
+          source={{
+            uri: professional?.photo
+          }}
+        />
+      ) : (
+        <OIcon
+          src={theme.images.general.user}
+          style={styles.photoStyle}
+          cover={false}
+          width={200}
+          height={200}
+        />
+      )}
       <InfoWrapper>
         <OText
           size={20}
@@ -191,9 +202,9 @@ export const ProfessionalProfile = (props: ProfessionalProfileParams) => {
             {t('REQUIRED', 'Required')}
           </OText>
         </View>
-        {(!!professional?.schedule && isEnabled) ? (
+        {!!professional?.schedule ? (
           <CalendarWrapper>
-            {timeList?.length > 0 ? (
+            {(timeList?.length > 0 && isEnabled) ? (
               <SelectDropdown
                 ref={dropdownRef} 
                 data={timeList}
@@ -237,11 +248,12 @@ export const ProfessionalProfile = (props: ProfessionalProfileParams) => {
               />
             ) : (
               <OText
-                size={20}
+                size={12}
                 style={{ marginBottom: 30 }}
-                weight={Platform.OS === 'ios' ? '600' : 'bold'}
+                weight={'400'}
+                color={theme.colors?.danger5}
               >
-                {t('NOT_AVAILABLE', 'Not available')}
+                {t('PROFESSIONAL_NOT_AVAILABLE', 'Professional is not available at the moment')}
               </OText>
             )}
 

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')
@@ -186,7 +186,7 @@ const ReviewDriverUI = (props: ReviewDriverParams) => {
         <NavBar
           title={t('REVIEW_DRIVER', 'Review driver')}
           titleAlign={'center'}
-          onActionLeft={() => navigation?.canGoBack() && navigation.goBack()}
+          onActionLeft={() => onNavigationRedirect('BottomTab')}
           showCall={false}
           btnStyle={{ paddingLeft: 0 }}
           style={{ flexDirection: 'column', alignItems: 'flex-start' }}
@@ -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

@@ -92,6 +92,7 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
   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 [enableProduct, setEnableProduct] = useState(true)
 
   const onSubmit = () => {
     if (Object.values(stars).some((value: any) => value === 0)) {
@@ -105,6 +106,7 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
     handleReviewState && handleReviewState(order?.id)
     setIsReviewed && setIsReviewed(true)
     setAlertState({ ...alertState, success: true })
+    !enableProduct && navigation?.canGoBack() && navigation.goBack()
   }
 
   const qualificationList = [
@@ -141,7 +143,16 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
     if (!order?.review) {
       onSubmit()
     } else {
-      onNavigationRedirect('ReviewProducts', { order: order })
+      skipOrderReview()
+    }
+  }
+
+  const skipOrderReview = () => {
+    if (enableProduct) onNavigationRedirect('ReviewProducts', { order: order })
+    else if (order?.driver && !order?.user_review) {
+      onNavigationRedirect('ReviewDriver', { order: order })
+    } else {
+      navigation?.canGoBack() && navigation.goBack()
     }
   }
 
@@ -187,6 +198,10 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
     setStars({ ...stars, comments: _comment })
   }, [comments, extraComment])
 
+  useEffect(() => {
+    setEnableProduct(!order?.products.every(product => product?.deleted))
+  }, [order])
+
   return (
     <>
       <ReviewOrderContainer>
@@ -296,7 +311,7 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
       <FloatingBottomContainer>
         <ActionContainer>
           <SkipButton
-            onPress={() => onNavigationRedirect('ReviewProducts', { order: order })}
+            onPress={() => skipOrderReview()}
           >
             <OText weight={700} size={18} color={theme.colors.textNormal}>{t('FRONT_VISUALS_SKIP', 'Skip')}</OText>
           </SkipButton>
@@ -318,7 +333,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/ReviewProducts/index.tsx

@@ -67,14 +67,14 @@ const ReviewProductsUI = (props: ReviewProductParams) => {
         <NavBar
           title={t('REVIEW_PRODUCT', 'Review product')}
           titleAlign={'center'}
-          onActionLeft={() => onNavigationRedirect('MyOrders')}
+          onActionLeft={() => onNavigationRedirect('BottomTab')}
           showCall={false}
           btnStyle={{ paddingLeft: 0 }}
           style={{ flexDirection: 'column', alignItems: 'flex-start' }}
           titleWrapStyle={{ paddingHorizontal: 0 }}
           titleStyle={{ marginRight: 0, marginLeft: 0 }}
         />
-        {order?.products?.map((product: any) => (
+        {order?.products?.map((product: any) => !product?.deleted && (
           <SingleProductReview
             key={product.id}
             product={product}