ordering-ui-react-native 0.16.49 → 0.16.52

package/package.json

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

package/src/components/ReviewProducts/index.tsx

@@ -61,6 +61,17 @@ const ReviewProductsUI = (props: ReviewProductParams) => {
     }
   }, [formState])
 
+  useEffect(() => {
+    const _changes = order?.products.map(product => {
+      return {
+        product_id: product?.product_id,
+        comment: '',
+        qualification: 5
+      }
+    })
+    handleChangeFormState(_changes)
+  }, [])
+
   return (
     <>
       <ReviewProductsContainer>

package/src/components/SingleProductReview/index.tsx

@@ -69,7 +69,7 @@ export const SingleProductReview = (props: SingleProductReviewParams) => {
   }
 
   useEffect(() => {
-    if (comments?.length === 0 && !extraComment && formState.changes?.length === 0 && qualification === 5) return
+    if (comments?.length === 0 && !extraComment) return
     let _comments = ''
     if (comments.length > 0) {
       comments.map(comment => (_comments += comment.content + '. '))

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

@@ -4,7 +4,9 @@ import {
 	useUtils,
 	useOrder,
 	useLanguage,
-	useConfig
+	useConfig,
+	useToast,
+	ToastType
 } from 'ordering-components/native';
 import { OIcon, OText } from '../shared';
 import { StyleSheet, TouchableOpacity, View } from 'react-native';
@@ -44,14 +46,16 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 		businessDeliveryTime,
 		businessPickupTime,
 		businessDistance,
-		handleFavoriteBusiness
+		handleFavoriteBusiness,
+		enableIntersection
 	} = props;
 	const [{ parsePrice, parseDistance, parseNumber, optimizeImage }] = useUtils();
+	const [, { showToast }] = useToast()
 	const [orderState] = useOrder();
 	const [configState] = useConfig();
 	const [, t] = useLanguage();
 	const theme = useTheme()
-	const [isIntersectionObserver, setIsIntersectionObserver] = useState(false)
+	const [isIntersectionObserver, setIsIntersectionObserver] = useState(!enableIntersection)
 	const styles = StyleSheet.create({
 		headerStyle: {
 			borderTopLeftRadius: 7.6,
@@ -121,7 +125,11 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 	const handleBusinessClick = (selectedBusiness: any) => {
 		if (business?.open) handleClick && handleClick(selectedBusiness)
 		else {
-			navigation.navigate('BusinessPreorder', { business: selectedBusiness, handleBusinessClick: handleClick })
+			if (configState?.configs?.preorder_status_enabled?.value === '1') {
+				navigation.navigate('BusinessPreorder', { business: selectedBusiness, handleBusinessClick: handleClick })
+				return
+			}
+			showToast(ToastType.Info, t('ERROR_ADD_PRODUCT_BUSINESS_CLOSED', 'The business is closed at the moment'));
 		}
 	}
 

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

@@ -239,6 +239,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                   {products.sort((a: any, b: any) => a.rank - b.rank).map((product: any, i: any) => (
                     <SingleProductCard
                       key={`${product?.id}_${i}`}
+                      enableIntersection
                       isSoldOut={product.inventoried && !product.quantity}
                       businessId={businessId}
                       product={product}

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

@@ -223,7 +223,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 	}, [currentCart])
 
 	return (
-		<IOScrollView rootMargin={{ top: 0, bottom: 0 }}>
+		<>
 			<ContainerSafeAreaView
 				style={{ flex: 1 }}
 				isOpenFiltProducts={isOpenFiltProducts}
@@ -366,7 +366,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 						</>
 					)}
 					{!loading && business?.id && (
-						<>
+						<IOScrollView rootMargin={{ top: 0, bottom: 0 }}>
 							<WrapContent
 								onLayout={(event: any) => setProductListLayout(event.nativeEvent.layout)}
 							>
@@ -397,7 +397,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 									handleUpdateProducts={handleUpdateProducts}
 								/>
 							</WrapContent>
-						</>
+						</IOScrollView>
 					)}
 					{loading && !error && (
 						<>
@@ -481,7 +481,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 					onClose={() => setOpenService(false)}
 				/>
 			</OModal>
-		</IOScrollView>
+		</>
 	)
 }
 

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

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
+import { IOScrollView } from 'react-native-intersection-observer'
 import Geolocation from '@react-native-community/geolocation'
 import { getTrackingStatus, requestTrackingPermission } from 'react-native-tracking-transparency'
 import {
@@ -319,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}
@@ -460,29 +469,32 @@ 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 && (
 					<>
 						{[

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/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,
@@ -162,7 +163,6 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 		const hasMore = !(
 			paginationProps.totalPages === paginationProps.currentPage
 		);
-
 		if (y + PIXELS_TO_SCROLL > height && !businessesList.loading && hasMore) {
 			getBusinesses();
 		}
@@ -430,29 +430,32 @@ 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 && (
 					<>
 						{[

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

@@ -1,51 +1,125 @@
 
 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 { IOScrollView } from 'react-native-intersection-observer'
 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])
 
   return (
-    <IOScrollView rootMargin={{ top: 0, bottom: 0 }}>
+    <>
       {(layout === 'original') && <OriginalBusinessListing {...props} />}
       {(layout === 'appointment') && <AppointmentBusinessListing {...props} />}
-    </IOScrollView>
+
+      {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>
+      )}
+    </>
   )
-}
+}