ordering-ui-react-native 0.21.21 → 0.21.22-release

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

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react'
-import { View, TouchableOpacity, StyleSheet, SafeAreaView, Dimensions, Platform, KeyboardAvoidingViewBase, KeyboardAvoidingView, Keyboard, KeyboardEvent, BackHandler } from 'react-native'
+import { View, TouchableOpacity, StyleSheet, SafeAreaView, Dimensions, Platform, KeyboardAvoidingViewBase, KeyboardAvoidingView, Keyboard, KeyboardEvent, BackHandler, ScrollView } from 'react-native'
 import { IOScrollView } from 'react-native-intersection-observer'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { useTheme } from 'styled-components/native';
@@ -45,6 +45,7 @@ import { ProfessionalFilter } from '../ProfessionalFilter';
 import { ServiceForm } from '../ServiceForm';
 import { BusinessesListing } from '../BusinessesListing/Layout/Original'
 import { PageBanner } from '../PageBanner'
+import { NavBack } from 'ordering-ui-react-native/src/components/OrderDetails/styles';
 
 const PIXELS_TO_SCROLL = 2000
 
@@ -72,7 +73,8 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
     handleUpdateProfessionals,
     handleChangeProfessionalSelected,
     onBusinessClick,
-    businessSingleId
+    businessSingleId,
+    productModal
   } = props
 
   const insets = useSafeAreaInsets()
@@ -112,7 +114,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
     },
     searchIcon: {
       borderWidth: 0,
-      padding: 15,
+      padding: 10,
       justifyContent: 'center',
       shadowColor: theme.colors.clear,
     },
@@ -146,7 +148,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
   const openCarts = (Object.values(orderState?.carts)?.filter((cart: any) => cart?.products && cart?.products?.length && cart?.status !== 2 && cart?.valid_schedule && cart?.valid_products && cart?.valid_address && cart?.valid_maximum && cart?.valid_minimum && !cart?.wallets) || null) || []
   const currentCart: any = Object.values(orderState.carts).find((cart: any) => cart?.business?.slug === business?.slug) ?? {}
   const isOpenFiltProducts = isOpenSearchBar && !!searchValue
-  const filtProductsHeight = Platform.OS === 'ios' ? 165 : 100
+  const filtProductsHeight = Platform.OS === 'ios' ? 65 : 30
   const viewOrderButtonVisible = !loading && auth && currentCart?.products?.length > 0 && categoryState.products.length !== 0
 
   const onRedirect = (route: string, params?: any) => {
@@ -188,12 +190,17 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
         setOpenService(true)
         return
       }
-      onRedirect('ProductDetails', {
-        product: product,
-        businessSlug: business.slug,
-        businessId: business.id,
-        productAddedToCartLength
-      })
+      if (product?.enabled) {
+        onRedirect('ProductDetails', {
+          product: product,
+          businessSlug: business.slug,
+          businessId: business.id || product?.category?.business_id,
+          productAddedToCartLength,
+          isRedirect: false
+        })
+      } else {
+        showToast(ToastType.Error, t('PRODUCT_NOT_FOUND', 'Product not found'))
+      }
     }
     events.emit('product_clicked', product)
   }
@@ -374,6 +381,14 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
         setViewedCategory(_viewedCategory)
         events.emit('product_list_viewed', _viewedCategory)
       }
+    } else {
+      if (business.categories) {
+        const categoryAll: any = {}
+        categoryAll.business_id = business.id
+        categoryAll.id = null
+        categoryAll.name = 'All'
+        events.emit('product_list_viewed', categoryAll)
+      }
     }
   }, [business?.lazy_load_products_recommended, selectedCategoryId, categorySelected?.id, viewedCategory])
 
@@ -388,6 +403,19 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
     }
   }, [])
 
+  useEffect(() => {
+    if (!business && !loading && !error) {
+      showToast(ToastType.Error, t('BUSINESS_NOT_FOUND', 'Business not found'))
+      navigation.navigate('BusinessList')
+    }
+  }, [business, error, loading])
+
+  useEffect(() => {
+    if (productModal?.product && !productModal?.loading && !productModal?.error) {
+      onProductClick(props?.productModal?.product)
+    }
+  }, [productModal])
+
   return (
     <>
       <View style={{ flex: 1, backgroundColor: backgroundColor }}>
@@ -475,8 +503,8 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
         {business?.categories?.length > 0 && isOpenFiltProducts && (
           <FiltProductsContainer
             style={{
-              height: Dimensions.get('window').height - filtProductsHeight - keyboardHeight - (keyboardHeight > 0 && viewOrderButtonVisible ? 55 : 0),
-              top: Platform.OS === 'ios' ? (searchBarHeight - 10) + insets.top : searchBarHeight,
+              height: Dimensions.get('window').height - filtProductsHeight - keyboardHeight - (keyboardHeight > 0 && viewOrderButtonVisible ? 10 : 0),
+              top: Platform.OS === 'ios' ? viewOrderButtonVisible ? (searchBarHeight - 10) + insets.top + 10 : (searchBarHeight - 10) + insets.top : searchBarHeight,
             }}
             contentContainerStyle={{ flexGrow: 1 }}
           >
@@ -514,10 +542,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
             </View>
           </FiltProductsContainer>
         )}
-        {isOpenFiltProducts && (
-          <BackgroundGray isIos={Platform.OS === 'ios'} />
-        )}
-        <IOScrollView
+        <ScrollView
           stickyHeaderIndices={[business?.professionals?.length > 0 ? 4 : 3]}
           style={{
             ...styles.mainContainer,
@@ -555,7 +580,9 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
               />
             </ProfessionalFilterWrapper>
           )}
-          <PageBanner position='app_business_page' navigation={navigation} />
+          {businessState?.business?.id && (
+            <PageBanner position='app_business_page' businessId={businessState?.business?.id} navigation={navigation} />
+          )}
           <View
             style={{
               height: 8,
@@ -583,7 +610,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
             <>
               <WrapContent
                 onLayout={(event: any) => setProductListLayout(event.nativeEvent.layout)}
-                style={{ paddingHorizontal: isChewLayout ? 20 : 40 }}
+                style={{ paddingHorizontal: 20 }}
               >
                 <BusinessProductsList
                   categories={[
@@ -640,7 +667,10 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
               </WrapContent>
             </>
           )}
-        </IOScrollView>
+          {isOpenFiltProducts && (
+            <BackgroundGray isIos={Platform.OS === 'ios'} />
+          )}
+        </ScrollView>
         {viewOrderButtonVisible && (
           <View style={{ marginBottom: 0 }}>
             <FloatingButton
@@ -697,7 +727,6 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
           professionalList={business?.professionals}
           professionalSelected={professionalSelected}
           handleChangeProfessional={handleChangeProfessionalSelected}
-          handleChangeProfessional={handleChangeProfessionalSelected}
           handleUpdateProfessionals={handleUpdateProfessionals}
           onSave={() => setOpenService(false)}
           onClose={() => setOpenService(false)}
@@ -711,6 +740,8 @@ export const BusinessProductsListing = (props: BusinessProductsListingParams) =>
   const businessProductslistingProps = {
     ...props,
     isForceSearch: Platform.OS === 'ios',
+    isApp: true,
+    isFetchAllProducts: true,
     UIComponent: BusinessProductsListingUI
   }
   return (

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

@@ -42,16 +42,15 @@ export const FiltProductsContainer = styled.ScrollView`
 
 export const BackgroundGray = styled.View`
   flex: 1;
-  height: ${(props: any) => props.isIos ? '80%' : '100%'};
+  height: 100%;
   background-color: rgba(0,0,0,0.5);
   position: absolute;
-  margin-top: 100px;
   z-index: 10000;
   width: 100%;
 `
 
 export const ProfessionalFilterWrapper = styled.View`
-  padding-left: 40px;
+  padding-left: 20px;
   margin-bottom: 35px;
 `
 
@@ -64,6 +63,6 @@ export const NearBusiness = styled.View`
 export const TopActions = styled.TouchableOpacity`
 	height: 60px;
 	justify-content: center;
-  padding-horizontal: 30px;
+  padding-horizontal: 20px;
   width: 100px;
 `;

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

@@ -109,7 +109,7 @@ const BusinessReviewsUI = (props: BusinessReviewsParams) => {
 	return (
 		<BusinessReviewsContainer>
 			<BusinessReviewContent
-				contentContainerStyle={{ paddingHorizontal: 40, paddingVertical: 27 }}>
+				contentContainerStyle={{ paddingHorizontal: 20, paddingVertical: 27 }}>
 				{reviewsList.error ? (
 					<OText size={16}>{t('ERROR_UNKNOWN', 'An error has ocurred')}</OText>
 				) : (

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

@@ -415,7 +415,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 						<ScrollView
 							showsHorizontalScrollIndicator={false}
 							nestedScrollEnabled
-							horizontal contentContainerStyle={{ paddingHorizontal: 40 }}>
+							horizontal contentContainerStyle={{ paddingHorizontal: 20 }}>
 							{featuredBusiness.map((bAry: any, idx) => (
 								<View key={'f-listing_' + idx}>
 									<BusinessFeaturedController

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

@@ -54,13 +54,13 @@ export const WrapMomentOption = styled.TouchableOpacity`
 export const HeaderWrapper = styled.ImageBackground`
 	width: 100%;
 	height: 370px;
-	padding: 20px 40px;
+	padding: 20px;
 	background-color: transparent;
 `;
 
 export const ListWrapper = styled.View`
 	background-color: ${(props: any) => props.theme.colors.backgroundLight};
-	padding-horizontal: 40px;
+	padding-horizontal: 20px;
 `;
 
 export const FeaturedWrapper = styled.View`
@@ -72,7 +72,7 @@ export const FeaturedWrapper = styled.View`
 export const OrderProgressWrapper = styled.View`
   margin-top: 37px;
   margin-bottom: 20px;
-	padding-horizontal: 40px;
+	padding-horizontal: 20px;
 `
 
 export const FarAwayMessage = styled.View`
@@ -98,10 +98,10 @@ export const FilterWrapper = styled.View`
 `
 
 export const ServiceWrapper = styled.View`
-  padding-horizontal: 40px;
+  padding-horizontal: 20px;
 `
 
 export const PriceWrapper = styled.View`
-  padding-horizontal: 40px;
+  padding-horizontal: 20px;
   margin-top: 30px;
 `

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

@@ -0,0 +1,69 @@
+import React from 'react'
+import { ListWrapper } from './styles'
+import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder'
+import { View } from 'react-native'
+
+export const FlatListBusinessListFooter = (props : any) => {
+    const {
+        businessesList,
+        paginationProps,
+        isChewLayout
+    } = props
+    return (
+        <>
+            <ListWrapper style={{ paddingHorizontal: 20 }}>
+                {(businessesList.loading || !businessesList?.fetched) && (
+                    <>
+                        {[
+                            ...Array(
+                                paginationProps.nextPageItems
+                                    ? paginationProps.nextPageItems
+                                    : 8,
+                            ).keys(),
+                        ].map((item, i) => (
+                            <Placeholder
+                                Animation={Fade}
+                                key={i}
+                                style={{ marginBottom: 20 }}>
+                                <View style={{ width: '100%' }}>
+                                    <PlaceholderLine
+                                        height={200}
+                                        style={{ marginBottom: 20, borderRadius: 25 }}
+                                    />
+                                    <View style={{ paddingHorizontal: 10 }}>
+                                        <View
+                                            style={{
+                                                flexDirection: 'row',
+                                                justifyContent: 'space-between',
+                                            }}>
+                                            <PlaceholderLine
+                                                height={25}
+                                                width={40}
+                                                style={{ marginBottom: 10 }}
+                                            />
+                                            <PlaceholderLine
+                                                height={25}
+                                                width={20}
+                                                style={{ marginBottom: 10 }}
+                                            />
+                                        </View>
+                                        <PlaceholderLine
+                                            height={20}
+                                            width={30}
+                                            style={{ marginBottom: 10 }}
+                                        />
+                                        <PlaceholderLine
+                                            height={20}
+                                            width={80}
+                                            style={{ marginBottom: 10 }}
+                                        />
+                                    </View>
+                                </View>
+                            </Placeholder>
+                        ))}
+                    </>
+                )}
+            </ListWrapper>
+        </>
+    )
+}