ordering-ui-react-native 0.21.55 → 0.21.56-release

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

@@ -214,11 +214,11 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                           text={t('VIEW_MORE', 'View more')}
                           parentStyle={{ padding: 0 }}
                           onClick={() => setOpenDescription(category)}
-                          bgColor='transparent'
+                          bgColor={theme.colors.white}
+                          borderColor={theme.colors.primary}
                           textStyle={{
                             fontSize: 12,
                             borderBottomWidth: 1,
-                            borderBottomColor: theme.colors.primary,
                             color: theme.colors.primary
                           }}
                         />
@@ -237,7 +237,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={!isFiltMode}
+                      // enableIntersection={!isFiltMode}
                       isSoldOut={product.inventoried && !product.quantity}
                       businessId={businessId}
                       product={product}

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

@@ -18,15 +18,12 @@ export const RibbonBox = styled.View`
   background-color: ${(props: any) => props.theme.colors.primary};
   padding: 2px 8px;
   max-width: 180px;
-
   ${(props: any) => props.bgColor && css`
     background-color: ${props.bgColor};
   `}
-
   ${(props: any) => props.isRoundRect && css`
     border-radius: 7.6px;
   `}
-
   ${(props: any) => props.isCapsule && css`
     border-radius: 50px;
   `}

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, Vibration } from 'react-native'
 import { IOScrollView } from 'react-native-intersection-observer'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { useTheme } from 'styled-components/native';
@@ -148,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) => {
@@ -190,13 +190,17 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
         setOpenService(true)
         return
       }
-      onRedirect('ProductDetails', {
-        product: product,
-        businessSlug: business.slug,
-        businessId: business.id || product?.category?.business_id,
-        productAddedToCartLength,
-        isRedirect: false
-      })
+      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)
   }
@@ -377,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])
 
@@ -491,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 }}
           >
@@ -530,7 +542,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
             </View>
           </FiltProductsContainer>
         )}
-        <IOScrollView
+        <ScrollView
           stickyHeaderIndices={[business?.professionals?.length > 0 ? 4 : 3]}
           style={{
             ...styles.mainContainer,
@@ -658,7 +670,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
           {isOpenFiltProducts && (
             <BackgroundGray isIos={Platform.OS === 'ios'} />
           )}
-        </IOScrollView>
+        </ScrollView>
         {viewOrderButtonVisible && (
           <View style={{ marginBottom: 0 }}>
             <FloatingButton
@@ -675,7 +687,10 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
               btnLeftValue={currentCart?.products.reduce((prev: number, product: any) => prev + product.quantity, 0)}
               btnRightValue={parsePrice(currentCart?.total)}
               disabled={subtotalWithTaxes < currentCart?.minimum || openUpselling}
-              handleClick={() => setOpenUpselling(true)}
+              handleClick={() => {
+                Vibration.vibrate(100)
+                setOpenUpselling(true)
+              }}
             />
           </View>
         )}

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

@@ -26,9 +26,9 @@ import { BusinessTypeFilterParams } from '../../types';
 const windowWidth = Dimensions.get('window').width;
 
 export const BusinessTypeFilterUI = (props: BusinessTypeFilterParams) => {
-	const { 
-		typesState, 
-		currentTypeSelected, 
+	const {
+		typesState,
+		currentTypeSelected,
 		handleChangeBusinessType,
 		setBusinessTypes,
 		isAppoint
@@ -38,13 +38,13 @@ export const BusinessTypeFilterUI = (props: BusinessTypeFilterParams) => {
 
 	const theme = useTheme();
 	const [isOpenAllCategories, setIsOpenAllCategories] = useState(false)
-	const defaultImage = (name : string) => theme.images?.categories?.[name.toLowerCase().replace(' ', '')]
+	const defaultImage = (name: string) => theme.images?.categories?.[name.toLowerCase().replace(' ', '')]
 
 	useEffect(() => {
-		if(typesState?.types?.length > 0){
-		  setBusinessTypes && setBusinessTypes(typesState?.types)
+		if (typesState?.types?.length > 0) {
+			setBusinessTypes && setBusinessTypes(typesState?.types)
 		}
-	  }, [typesState])
+	}, [typesState])
 
 	const handleChangeServiceType = (serviceId: any) => {
 		if (serviceId === currentTypeSelected) {
@@ -119,10 +119,11 @@ export const BusinessTypeFilterUI = (props: BusinessTypeFilterParams) => {
 									<OButton
 										key={i}
 										bgColor={(currentTypeSelected === businessType?.id) ? theme.colors.primary : theme.colors.backgroundGray200}
+										borderColor={(currentTypeSelected === businessType?.id) ? theme.colors.primary : theme.colors.backgroundGray200}
 										onClick={() => handleChangeServiceType(businessType?.id)}
 										text={`${businessType?.name} ${(currentTypeSelected === businessType?.id) ? ' X' : ''}`}
 										style={styles.businessType}
-										textStyle={{ fontSize: 10, color: (currentTypeSelected === businessType?.id) ? theme.colors.backgroundLight : theme.colors.textNormal }}
+										textStyle={{ fontSize: 10, color: (currentTypeSelected === businessType?.id) ? theme.colors.white : theme.colors.textNormal }}
 									/>
 								))}
 							</ServiceWrapper>

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

@@ -392,10 +392,11 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 							<OButton
 								key={i}
 								bgColor={(priceLevelSelected === price?.level) ? theme.colors.primary : theme.colors.backgroundGray200}
+								borderColor={(priceLevelSelected === price?.level) ? theme.colors.primary : theme.colors.backgroundGray200}
 								onClick={() => handleChangePriceLevel(price?.level)}
 								text={`${price.content} ${(priceLevelSelected === price?.level) ? ' X' : ''}`}
 								style={styles.priceLevel}
-								textStyle={{ fontSize: 10, color: (priceLevelSelected === price?.level) ? theme.colors.backgroundLight : theme.colors.textNormal }}
+								textStyle={{ fontSize: 10, color: (priceLevelSelected === price?.level) ? theme.colors.backgroundLight : theme.colors.black }}
 							/>
 						))}
 					</ScrollView>

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

@@ -168,7 +168,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 			setFeaturedBusinesses(ary);
 		}
 		resetInactivityTimeout()
-	}, [businessesList.loading])
+	}, [businessesList.loading, businessesList?.businesses])
 
 	const handleOnRefresh = () => {
 		if (!businessesList.loading) {

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

@@ -1,4 +1,3 @@
-
 import React, { useState, useEffect } from 'react'
 import { useOrder, useSession, useLanguage, useConfig } from 'ordering-components/native';
 

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

@@ -19,7 +19,7 @@ import { CouponControl } from '../CouponControl';
 import { OButton, OInput, OModal, OText } from '../shared';
 import { UpsellingProducts } from '../UpsellingProducts';
 import { verifyDecimals } from '../../utils';
-import { ActivityIndicator, TouchableOpacity, View } from 'react-native';
+import { ActivityIndicator, TouchableOpacity, View, Vibration } from 'react-native';
 import AntIcon from 'react-native-vector-icons/AntDesign'
 import { TaxInformation } from '../TaxInformation';
 import { CartStoresListing } from '../CartStoresListing';
@@ -114,6 +114,7 @@ const CartUI = (props: any) => {
   }
 
   const handleUpsellingPage = (individualCart: any) => {
+    Vibration.vibrate(100)
     const isProductCartParam = !!individualCart?.products?.length
     setOpenUpselling(false)
     setCanOpenUpselling(false)
@@ -121,7 +122,7 @@ const CartUI = (props: any) => {
     const cartsAvailable: any = Object.values(orderState?.carts)
       ?.filter((_cart: any) => _cart?.valid && _cart?.status !== 2 && _cart?.products?.length)
       ?.filter((_c: any) => !isProductCartParam ? _c.uuid !== individualCart?.uuid : _c)
-    if (cartsAvailable.length === 1 || !isMultiCheckout) {
+    if (cartsAvailable.length === 1 || !isMultiCheckout || !cart?.business_id) {
       const cart = isMultiCheckout ? cartsAvailable[0] : individualCart
       onNavigationRedirect('CheckoutNavigator', {
         screen: 'CheckoutPage',
@@ -196,6 +197,19 @@ const CartUI = (props: any) => {
     return acc = acc
   }, cart?.subtotal)
 
+  const handleClickCheckout = () => {
+    Vibration.vibrate(100)
+    if (cart?.business_id) {
+      setOpenUpselling(true)
+    } else {
+      onNavigationRedirect('CheckoutNavigator', {
+        screen: 'CheckoutPage',
+        cartUuid: cart?.uuid,
+        cartTotal: cart?.total
+      }, true)
+    }
+  }
+
   useEffect(() => {
     const limitDays = parseInt(preorderMaximumDays ?? configs?.max_days_preorder?.value, 10)
     const currentDate = new Date()
@@ -211,7 +225,7 @@ const CartUI = (props: any) => {
 
   return (
     <CContainer>
-      {openUpselling && (
+      {!!openUpselling && (
         <UpsellingProducts
           handleUpsellingPage={handleUpsellingPage}
           openUpselling={openUpselling}
@@ -231,8 +245,11 @@ const CartUI = (props: any) => {
         handleClearProducts={handleClearProducts}
         handleCartOpen={handleCartOpen}
         onNavigationRedirect={props.onNavigationRedirect}
-        handleChangeStore={() => setOpenChangeStore(true)}
-        handleClickCheckout={() => setOpenUpselling(true)}
+        handleChangeStore={() => {
+          Vibration.vibrate(100)
+          setOpenChangeStore(true)
+        }}
+        handleClickCheckout={() => handleClickCheckout()}
         checkoutButtonDisabled={(openUpselling && !canOpenUpselling) || subtotalWithTaxes < cart?.minimum || !cart?.valid_address}
         isMultiCheckout={isMultiCheckout}
         isFromUpselling={isFromUpselling}
@@ -532,7 +549,7 @@ const CartUI = (props: any) => {
             />
           </View>
         )}
-        {!isMultiCheckout && (
+        {(!isMultiCheckout || !cart?.business_id) && (
           <>
             {cart?.valid_products ? (
               <CheckoutAction>
@@ -545,11 +562,11 @@ const CartUI = (props: any) => {
                     `${t('MINIMUN_SUBTOTAL_ORDER', 'Minimum subtotal order:')} ${parsePrice(cart?.minimum)}`
                   )}
                   bgColor={(subtotalWithTaxes < cart?.minimum || !cart?.valid_address) ? theme.colors.secundary : theme.colors.primary}
+                  borderColor={(subtotalWithTaxes < cart?.minimum || !cart?.valid_address) ? theme.colors.secundary : theme.colors.primary}
                   isDisabled={(openUpselling && !canOpenUpselling) || subtotalWithTaxes < cart?.minimum || !cart?.valid_address}
-                  borderColor={theme.colors.primary}
                   imgRightSrc={null}
-                  textStyle={{ color: '#fff', textAlign: 'center', flex: 1 }}
-                  onClick={() => setOpenUpselling(true)}
+                  textStyle={{ textAlign: 'center', flex: 1 }}
+                  onClick={() => handleClickCheckout()}
                   style={{ width: '100%', flexDirection: 'row', justifyContent: 'center', borderRadius: 7.6, shadowOpacity: 0 }}
                 />
               </CheckoutAction>

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

@@ -1,5 +1,5 @@
-import React, { useCallback, useState } from 'react';
-import { View } from 'react-native';
+import React, { useCallback, useEffect, useState } from 'react';
+import { Vibration, View } from 'react-native';
 import { useLanguage, useConfig, useUtils, useOrder } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import { CCContainer, CCNotCarts, CCList, CheckoutAction, ChCartsTotal } from './styles';
@@ -13,7 +13,8 @@ export const CartContent = (props: any) => {
 	const {
 		onNavigationRedirect,
 		singleBusiness,
-		businessSlug
+		businessSlug,
+		navigation
 	} = props
 
 	const theme = useTheme();
@@ -22,7 +23,7 @@ export const CartContent = (props: any) => {
 	const [{ parsePrice }] = useUtils();
 	const [isCartsLoading, setIsCartsLoading] = useState(false)
 	const [cartsOpened, setCartsOpened] = useState([])
-	const [{ carts: cartsContext }] = useOrder();
+	const [{ carts: cartsContext }, { confirmCart }] = useOrder();
 	const cartsList =
 		(cartsContext &&
 			Object.values(cartsContext).filter((cart: any) => cart.products.length > 0)) ??
@@ -32,12 +33,13 @@ export const CartContent = (props: any) => {
 		: cartsList
 	const isOrderStateCarts = !!carts
 	const isMultiCheckout = configs?.checkout_multi_business_enabled?.value === '1'
-	const cartsAvailable: any = Object.values(carts || {})?.filter((cart: any) => cart?.valid && cart?.status !== 2)
+	const cartsAvailable: any = Object.values(carts || {})?.filter((cart: any) => cart?.valid && cart?.status !== 2 && cart?.business_id)
 	const totalCartsPrice = cartsAvailable?.length && cartsAvailable.reduce((total: any, cart: any) => { return total + cart?.total }, 0)
 	const totalCartsFee = cartsAvailable?.length && cartsAvailable
 		?.filter((cart: any) => cart?.status !== 1 && cart?.valid && cart?.products?.length)
 		?.reduce((total: any, cart: any) => { return total + (cart?.delivery_price_with_discount) }, 0)
 	const handleCheckoutRedirect = () => {
+		Vibration.vibrate(100)
 		if (cartsAvailable.length === 1) {
 			onNavigationRedirect('CheckoutNavigator', {
 				screen: 'CheckoutPage',
@@ -71,7 +73,7 @@ export const CartContent = (props: any) => {
 		}
 	}
 
-	const changeActiveState = useCallback((isClosed : boolean, uuid : string) => {
+	const changeActiveState = useCallback((isClosed: boolean, uuid: string) => {
 		const isActive = cartsOpened?.includes?.(uuid) || !!singleBusiness
 		if (isActive || !isClosed) {
 			setCartsOpened(cartsOpened?.filter?.((_uuid) => _uuid !== uuid))
@@ -83,6 +85,20 @@ export const CartContent = (props: any) => {
 		}
 	}, [cartsOpened])
 
+	useEffect(() => {
+		const unsuscribe = navigation.addListener('focus', () => {
+			const cartsListBlockedByPaypal = carts?.filter((cart: any) => cart?.status === 2 && cart?.paymethod_data?.gateway === 'paypal')
+			if (cartsListBlockedByPaypal?.length > 0) {
+				cartsListBlockedByPaypal.map(async (cart: any) => {
+					await confirmCart(cart?.uuid)
+				})
+			}
+		})
+		return () => {
+			return unsuscribe()
+		}
+	}, [carts, navigation])
+
 	return (
 		<CCContainer
 			style={{ paddingHorizontal: 20 }}
@@ -120,53 +136,52 @@ export const CartContent = (props: any) => {
 					{isMultiCheckout && (
 						<>
 							{!!cartsAvailable.length && (
-								<ChCartsTotal>
-									{!!totalCartsFee && configs?.multi_business_checkout_show_combined_delivery_fee?.value === '1' && (
-										<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
-											<OText size={14} lineHeight={24} color={theme.colors.textNormal} weight={'400'}>
-												{t('TOTAL_DELIVERY_FEE', 'Total delivery fee')}
-											</OText>
-											<OText size={14} lineHeight={24} color={theme.colors.textNormal} weight={'400'}>
-												{parsePrice(totalCartsFee)}
-											</OText>
-										</View>
-									)}
-									{cartsAvailable.reduce((sum: any, cart: any) => sum + cart?.driver_tip, 0) > 0 &&
-										configs?.multi_business_checkout_show_combined_driver_tip?.value === '1' && (
+								<>
+									<ChCartsTotal>
+										{!!totalCartsFee && configs?.multi_business_checkout_show_combined_delivery_fee?.value === '1' && (
 											<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
 												<OText size={14} lineHeight={24} color={theme.colors.textNormal} weight={'400'}>
-													{t('DRIVER_TIP', 'Driver tip')}
+													{t('TOTAL_DELIVERY_FEE', 'Total delivery fee')}
 												</OText>
 												<OText size={14} lineHeight={24} color={theme.colors.textNormal} weight={'400'}>
-													{parsePrice(cartsAvailable.reduce((sum: any, cart: any) => sum + cart?.driver_tip, 0))}
+													{parsePrice(totalCartsFee)}
 												</OText>
 											</View>
 										)}
-									<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
-										<OText size={16} lineHeight={24} color={theme.colors.textNormal} weight={'500'}>
-											{t('TOTAL_FOR_ALL_CARTS', 'Total for all Carts')}
-										</OText>
-										<OText size={16} lineHeight={24} color={theme.colors.textNormal} weight={'500'}>{parsePrice(totalCartsPrice)}</OText>
-									</View>
-									<View style={{ flexDirection: 'row', justifyContent: 'center', marginVertical: 20 }}>
-										<OText size={14} color={theme.colors.textNormal} weight={'300'} style={{ textAlign: 'center' }}>
-											{t('CART_GROUP_MESSAGE_ALERT', 'Discounts may be applied at the time of payment for this group.')}
-										</OText>
-									</View>
-								</ChCartsTotal>
+										{cartsAvailable.reduce((sum: any, cart: any) => sum + cart?.driver_tip, 0) > 0 &&
+											configs?.multi_business_checkout_show_combined_driver_tip?.value === '1' && (
+												<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+													<OText size={14} lineHeight={24} color={theme.colors.textNormal} weight={'400'}>
+														{t('DRIVER_TIP', 'Driver tip')}
+													</OText>
+													<OText size={14} lineHeight={24} color={theme.colors.textNormal} weight={'400'}>
+														{parsePrice(cartsAvailable.reduce((sum: any, cart: any) => sum + cart?.driver_tip, 0))}
+													</OText>
+												</View>
+											)}
+										<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+											<OText size={16} lineHeight={24} color={theme.colors.textNormal} weight={'500'}>
+												{t('TOTAL_FOR_ALL_CARTS', 'Total for all Carts')}
+											</OText>
+											<OText size={16} lineHeight={24} color={theme.colors.textNormal} weight={'500'}>{parsePrice(totalCartsPrice)}</OText>
+										</View>
+										<View style={{ flexDirection: 'row', justifyContent: 'center', marginVertical: 20 }}>
+											<OText size={14} color={theme.colors.textNormal} weight={'300'} style={{ textAlign: 'center' }}>
+												{t('CART_GROUP_MESSAGE_ALERT', 'Discounts may be applied at the time of payment for this group.')}
+											</OText>
+										</View>
+									</ChCartsTotal>
+									<CheckoutAction style={{ marginTop: 0 }}>
+										<OButton
+											text={t('CHECKOUT', 'Checkout')}
+											isDisabled={!cartsAvailable.length}
+											imgRightSrc={null}
+											onClick={() => handleCheckoutRedirect()}
+											style={{ width: '100%', flexDirection: 'row', justifyContent: 'center', borderRadius: 7.6, shadowOpacity: 0 }}
+										/>
+									</CheckoutAction>
+								</>
 							)}
-							<CheckoutAction style={{ marginTop: 0 }}>
-								<OButton
-									text={t('CHECKOUT', 'Checkout')}
-									bgColor={!cartsAvailable.length ? theme.colors.secundary : theme.colors.primary}
-									isDisabled={!cartsAvailable.length}
-									borderColor={theme.colors.primary}
-									imgRightSrc={null}
-									textStyle={{ color: 'white', textAlign: 'center', flex: 1 }}
-									onClick={() => handleCheckoutRedirect()}
-									style={{ width: '100%', flexDirection: 'row', justifyContent: 'center', borderRadius: 7.6, shadowOpacity: 0 }}
-								/>
-							</CheckoutAction>
 						</>
 					)}
 				</>