ordering-ui-react-native 0.16.43 → 0.16.46

package/package.json

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

package/src/pages/BusinessesListing.tsx

@@ -1,24 +1,25 @@
-import React, {useEffect} from 'react'
+import React, { useEffect } from 'react'
 import { BusinessesListing as BusinessListingController } from '../components/BusinessesListing'
 import styled from 'styled-components/native'
 import { useTheme } from 'styled-components/native'
 
 const BusinessesListing = (props: any) => {
   const theme = useTheme()
-  const businessId =  props.route.params?.businessId
+  const businessId = props.route.params?.businessId
   const categoryId = props.route.params?.categoryId
-  const productId =  props.route.params?.productId
-  const store =  props.route.params?.store
+  const productId = props.route.params?.productId
+  const store = props.route.params?.store
 
   useEffect(() => {
-    if(store){
-      props.navigation.navigate('Business', {store,businessId,categoryId,productId})
+    if (store) {
+      props.navigation.navigate('Business', { store, businessId, categoryId, productId })
       return
     }
   }, [businessId, categoryId, productId, store])
 
   const BusinessesListingProps = {
     ...props,
+    navigation: props?.navigation,
     isSearchByName: true,
     isSearchByDescription: true,
     propsToFetch: ['id', 'name', 'header', 'logo', 'ribbon', 'location', 'schedule', 'open', 'delivery_price', 'distance', 'delivery_time', 'pickup_time', 'reviews', 'featured', 'offers', 'food', 'laundry', 'alcohol', 'groceries', 'slug'],

package/src/pages/OrderDetails.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { OrderDetails as OrderDetailsController } from '../components/OrderDetails'
 import { SafeAreaContainer } from '../layouts/SafeAreaContainer'
 
-const OrderDetails = ({ navigation, route } : any) => {
+const OrderDetails = ({ navigation, route }: any) => {
   const orderDetailsProps = {
     navigation,
     orderId: route.params?.orderId,

package/src/pages/ReviewDriver.tsx

@@ -1,14 +1,14 @@
 import React from 'react'
 import { Platform } from 'react-native';
 import styled from 'styled-components/native';
-import {ReviewDriver as ReviewDriverController} from '../components/ReviewDriver'
+import { ReviewDriver as ReviewDriverController } from '../components/ReviewDriver'
 import { SafeAreaContainer } from '../layouts/SafeAreaContainer';
 
 const KeyboardView = styled.KeyboardAvoidingView`
   flex: 1;
 `;
 
-const ReviewDriver = ({navigation, route} : any) => {
+const ReviewDriver = ({ navigation, route }: any) => {
   const reviewDriverProps = {
     navigation,
     order: route?.params?.order,

package/src/pages/ReviewOrder.tsx

@@ -1,14 +1,14 @@
 import React from 'react'
 import { Platform } from 'react-native';
 import styled from 'styled-components/native';
-import {ReviewOrder as ReviewOrderController} from '../components/ReviewOrder'
+import { ReviewOrder as ReviewOrderController } from '../components/ReviewOrder'
 import { SafeAreaContainer } from '../layouts/SafeAreaContainer';
 
 const KeyboardView = styled.KeyboardAvoidingView`
   flex: 1;
 `;
 
-const ReviewOrder = ({navigation, route} : any) => {
+const ReviewOrder = ({ navigation, route }: any) => {
   const reviewOrderProps = {
     navigation,
     order: route?.params?.order,

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

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

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

@@ -104,8 +104,8 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 		},
 		searchInput: {
 			fontSize: 12,
-			// backgroundColor: theme.colors.white,
-			paddingLeft: 10,
+			paddingLeft: 0,
+			paddingRight: 17,
 			paddingTop: 7
 		},
 		iconStyle: {

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

@@ -97,10 +97,10 @@ export const FilterWrapper = styled.View`
 `
 
 export const ServiceWrapper = styled.View`
-  padding-left: 40px;
+  padding-horizontal: 40px;
 `
 
 export const PriceWrapper = styled.View`
-  padding-left: 40px;
+  padding-horizontal: 40px;
   margin-top: 30px;
 `

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

@@ -332,7 +332,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 				</OrderControlContainer>
 			</View>
 			<HeaderWrapper
-				source={theme.images.general.homeHero}
+				source={theme.images.backgrounds.business_list_header}
 				style={{ paddingTop: top + 20 }}
 				resizeMode='stretch'
 			>

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

@@ -1,17 +1,50 @@
 
-import React from 'react'
+import React, { useState, useEffect } from 'react'
+import { useOrder, useSession } from 'ordering-components/native';
+
 import { useTheme } from 'styled-components/native'
 import { BusinessesListing as OriginalBusinessListing } from './Layout/Original'
 import { BusinessesListing as AppointmentBusinessListing } from './Layout/Appointment'
 
 export const BusinessesListing = (props: any) => {
-	const theme = useTheme()
-	const layout = theme?.layout?.businessListing?.layout?.type || 'original'
+  const theme = useTheme()
+  const layout = theme?.layout?.businessListing?.layout?.type || 'original'
+  const [{ auth }] = useSession()
+  const [, { getLastOrderHasNoReview }] = useOrder();
+  const [, setIsReviewed] = useState(false)
+  const handleOrderReview = (order: any) => {
+    props?.navigation && props.navigation.navigate(
+      'ReviewOrder',
+      {
+        order: {
+          id: order?.id,
+          business_id: order?.business_id,
+          business_name: order?.business?.name,
+          delivery_datetime: order?.delivery_datetime,
+          logo: order.business?.logo,
+          driver: order?.driver,
+          products: order?.products,
+          review: order?.review,
+          user_review: order?.user_review
+        },
+        setIsReviewed
+      }
+    )
+  }
+
+  const _getLastOrderHasNoReview = async () => {
+    const lastOrderHasNoReview = await getLastOrderHasNoReview()
+    lastOrderHasNoReview && handleOrderReview(lastOrderHasNoReview)
+  }
+
+  useEffect(() => {
+    auth && _getLastOrderHasNoReview()
+  }, [auth])
 
-	return (
+  return (
     <>
       {(layout === 'original') && <OriginalBusinessListing {...props} />}
       {(layout === 'appointment') && <AppointmentBusinessListing {...props} />}
     </>
-	)
+  )
 }

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

@@ -62,7 +62,7 @@ const NavBar = (props: Props) => {
 		<Wrapper style={{ paddingTop: props.paddingTop, ...{ flexDirection: props.isVertical ? 'column' : 'row', alignItems: props.isVertical ? 'flex-start' : 'center' }, ...props.style }}>
 			<OButton
 				imgLeftSrc={props.leftImg || theme.images.general.arrow_left}
-				imgLeftStyle={{width: 18}}
+				imgLeftStyle={{ width: 18 }}
 				imgRightSrc={null}
 				style={{ ...btnBackArrow, ...props.btnStyle, ...props.isVertical ? (I18nManager.isRTL ? { paddingRight: 0 } : { paddingLeft: 0 }) : {} }}
 				onClick={props?.onActionLeft}
@@ -126,9 +126,9 @@ NavBar.defaultProps = {
 	textAlign: 'center'
 };
 
-const areEqual=(prevProps: { route?: any; }, nextProps: { route?: any; })=>{
-  return prevProps.route === nextProps.route
-  return true
+const areEqual = (prevProps: { route?: any; }, nextProps: { route?: any; }) => {
+	return prevProps.route === nextProps.route
+	return true
 }
 
 export default React.memo(NavBar, areEqual);

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

@@ -354,6 +354,8 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
           id: order?.id,
           business_id: order?.business_id,
           logo: order.business?.logo,
+          business_name: order?.business?.name,
+          delivery_datetime: order?.delivery_datetime,
           driver: order?.driver,
           products: order?.products,
           review: order?.review,

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

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

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

@@ -62,7 +62,7 @@ export const ProfessionalProfile = (props: ProfessionalProfileParams) => {
 
   const onDateChange = (date: any) => {
     setSelectedDate(date)
-    dropdownRef.current.reset()
+    dropdownRef?.current && dropdownRef.current.reset()
   }
 
   const dropDownIcon = () => {
@@ -191,9 +191,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 +237,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')
@@ -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>