ordering-ui-react-native 0.15.74-release → 0.15.75-release

package/package.json

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

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

@@ -367,6 +367,7 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
             key={business.id}
             business={business}
             isBusinessOpen={business.open}
+            enableIntersection={false}
             handleCustomClick={() => onBusinessClick(business)}
             handleUpdateBusinessList={handleUpdateBusinessList}
             orderType={orderState?.options?.type}
@@ -438,11 +439,12 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
                   key={product?.id}
                   isSoldOut={(product.inventoried && !product.quantity)}
                   product={product}
+                  enableIntersection={false}
                   businessId={business?.id}
                   onProductClick={(product: any) => onProductClick(business, category?.id, product?.id)}
                   productAddedToCartLength={0}
                   handleUpdateProducts={(productId: number, changes: any) => handleUpdateProducts(productId, category?.id, business?.id, changes)}
-                  style={{ width: screenWidth - 120, marginRight: i === category?.products?.length - 1 ? 0 : 20 }}
+                  style={{ width: screenWidth - 80, maxWidth: screenWidth - 80, marginRight: 20 }}
                 />
               )))}
 

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

@@ -0,0 +1,87 @@
+import React from 'react'
+import { useTheme } from 'styled-components/native'
+import { StyleSheet } from 'react-native'
+import { SubCategoriesContainer, ContainerButton } from './styles'
+import { OButton } from '../../shared'
+import { useLanguage } from 'ordering-components/native'
+
+function SubcategoriesComponentPropsAreEqual(prev: any, next: any) {
+    return prev.subcategoriesSelected === next.subcategoriesSelected &&
+        prev.category === next.category
+}
+
+interface SubcategoriesComponentParams {
+    subcategoriesSelected?: any,
+    category?: any,
+    onClickSubcategory: any
+}
+
+const SubcategoriesComponent = (props : SubcategoriesComponentParams) => {
+    const {
+        subcategoriesSelected,
+        category,
+        onClickSubcategory
+    } = props
+
+    const theme = useTheme()
+    const [, t] = useLanguage()
+    const allsubcategorySelected = !subcategoriesSelected?.some((subcategory: any) => category?.id === subcategory?.parent_category_id)
+
+    const bpStyles = StyleSheet.create({
+        catWrap: { flexDirection: 'row', alignItems: 'center', marginBottom: 19 },
+        catIcon: {
+            borderRadius: 7.6,
+            shadowColor: '#000000',
+            shadowOpacity: 0.1,
+            shadowOffset: { width: 0, height: 0 },
+            shadowRadius: 1,
+            marginEnd: 13,
+        },
+        categoryButtonStyle: {
+            borderWidth: 0,
+            marginLeft: 5,
+            marginRight: 5,
+            marginBottom: 10,
+            height: 35,
+            paddingLeft: 3,
+            paddingRight: 3,
+        }
+    });
+
+
+    return (
+        <SubCategoriesContainer>
+            <ContainerButton
+                isSelected={allsubcategorySelected}
+            >
+                <OButton
+                    onClick={() => onClickSubcategory(null, category)}
+                    bgColor={allsubcategorySelected ? theme.colors.primary : theme.colors.backgroundGray}
+                    text={`${t('ALL', 'All')} ${allsubcategorySelected ? 'X' : ''}`}
+                    style={bpStyles.categoryButtonStyle}
+                    textStyle={{ color: allsubcategorySelected ? theme.colors.white : theme.colors.textNormal, fontSize: 12 }}
+                />
+            </ContainerButton>
+            {category?.subcategories?.map((subcategory: any) => {
+                const isSubcategorySelected = subcategoriesSelected?.find((_subcategory: any) => _subcategory?.id === subcategory?.id)
+                return (
+                    <ContainerButton
+                        key={subcategory?.id}
+                        isSelected={isSubcategorySelected}
+                    >
+                        <OButton
+                            onClick={() => onClickSubcategory(subcategory, category)}
+                            bgColor={isSubcategorySelected ? theme.colors.primary : theme.colors.backgroundGray}
+                            text={`${subcategory?.name} ${isSubcategorySelected ? 'X' : ''}`}
+                            style={bpStyles.categoryButtonStyle}
+                            textStyle={{ color: isSubcategorySelected ? theme.colors.white : theme.colors.textNormal, fontSize: 12 }}
+                        />
+                    </ContainerButton>
+                )
+            }
+            )}
+        </SubCategoriesContainer>
+    )
+}
+
+export const SubcategoriesComponentMemoized = React.memo(SubcategoriesComponent, SubcategoriesComponentPropsAreEqual)

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

@@ -0,0 +1,12 @@
+import styled from "styled-components/native";
+
+export const SubCategoriesContainer = styled.View`
+  flex-direction: row;
+  flex-wrap: wrap;
+  margin-bottom: 10px;
+`
+
+export const ContainerButton = styled.View`
+`
+
+export const HeaderWrapper = styled.View``

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

@@ -12,6 +12,7 @@ import { useTheme } from 'styled-components/native';
 import { shape } from '../../utils'
 import { CategoryDescriptionMemoized } from './CategoryDescription';
 import { OrderItAgain } from '../OrderItAgain'
+import { SubcategoriesComponentMemoized } from './SubcategoriesComponent';
 
 const BusinessProductsListUI = (props: BusinessProductsListParams) => {
   const {
@@ -70,49 +71,15 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
     }
   }
 
-  const SubcategoriesComponent = ({ category }: any) => {
-    const allsubcategorySelected = !subcategoriesSelected?.some((subcategory: any) => category?.id === subcategory?.parent_category_id)
-
-    return (
-      <SubCategoriesContainer>
-        <ContainerButton
-          isSelected={allsubcategorySelected}
-        >
-          <OButton
-            onClick={() => onClickSubcategory(null, category)}
-            bgColor={allsubcategorySelected ? theme.colors.primary : theme.colors.backgroundGray}
-            text={`${t('ALL', 'All')} ${allsubcategorySelected ? 'X' : ''}`}
-            style={bpStyles.categoryButtonStyle}
-            textStyle={{ color: allsubcategorySelected ? theme.colors.white : theme.colors.textNormal, fontSize: 12 }}
-          />
-        </ContainerButton>
-        {category?.subcategories?.map((subcategory: any) => {
-          const isSubcategorySelected = subcategoriesSelected?.find((_subcategory: any) => _subcategory?.id === subcategory?.id)
-          return (
-            <ContainerButton
-              key={subcategory?.id}
-              isSelected={isSubcategorySelected}
-            >
-              <OButton
-                onClick={() => onClickSubcategory(subcategory, category)}
-                bgColor={isSubcategorySelected ? theme.colors.primary : theme.colors.backgroundGray}
-                text={`${subcategory?.name} ${isSubcategorySelected ? 'X' : ''}`}
-                style={bpStyles.categoryButtonStyle}
-                textStyle={{ color: isSubcategorySelected ? theme.colors.white : theme.colors.textNormal, fontSize: 12 }}
-              />
-            </ContainerButton>
-          )
-        }
-        )}
-      </SubCategoriesContainer>
-    )
-  }
-
   return (
     <ProductsContainer renderToHardwareTextureAndroid={categoryState.loading || isBusinessLoading}>
       <HeaderWrapper>
         {category?.subcategories?.length > 0 && (
-          <SubcategoriesComponent category={category} />
+          <SubcategoriesComponentMemoized
+            category={category}
+            subcategoriesSelected={subcategoriesSelected}
+            onClickSubcategory={onClickSubcategory}
+          />
         )}
       </HeaderWrapper>
       {previouslyProducts?.length > 0 && (
@@ -136,7 +103,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
             <SingleProductCard
               key={'prod_' + product.id + `_${i}`}
               isSoldOut={product.inventoried && !product.quantity}
-              enableIntersection={!isFiltMode}
+              enableIntersection={!isFiltMode && categoryState.products?.length < 80}
               product={product}
               businessId={businessId}
               categoryState={categoryState}
@@ -164,7 +131,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                       key={'feat_' + product.id + `_${i}`}
                       isSoldOut={product.inventoried && !product.quantity}
                       product={product}
-                      enableIntersection={!isFiltMode}
+                      enableIntersection={!isFiltMode && categoryState.products?.length < 80}
                       businessId={businessId}
                       categoryState={categoryState}
                       onProductClick={onProductClick}
@@ -251,13 +218,17 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                   </View>
                 )}
                 {category?.subcategories?.length > 0 && !isFiltMode && (
-                  <SubcategoriesComponent category={category} />
+                  <SubcategoriesComponentMemoized
+                    category={category}
+                    subcategoriesSelected={subcategoriesSelected}
+                    onClickSubcategory={onClickSubcategory}
+                  />
                 )}
                 <>
                   {products.sort((a: any, b: any) => a.rank - b.rank).map((product: any, i: any) => (
                     <SingleProductCard
                       key={`${product?.id}_${i}`}
-                      enableIntersection={!isFiltMode}
+                      enableIntersection={!isFiltMode && categoryState.products?.length < 80}
                       isSoldOut={product.inventoried && !product.quantity}
                       businessId={businessId}
                       product={product}
@@ -279,7 +250,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
         <>
           {[...Array(categoryState?.pagination?.nextPageItems).keys()].map(
             (item, i) => (
-              <View style={{ minHeight: 165, marginBottom: 28, padding: 12 }}>
+              <View style={{ minHeight: 165, marginBottom: 28, padding: 12 }} key={i}>
                 <Placeholder style={{ padding: 5 }} Animation={Fade}>
                   <View style={{ flexDirection: 'row' }}>
                     <Placeholder style={{ paddingVertical: 10, flex: 1 }}>

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

@@ -363,6 +363,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 					onScroll={handlePageScroll}
 					onScrollBeginDrag={handleTouchDrag}
 					scrollEventThrottle={16}
+					bounces={false}
 				>
 					<BusinessBasicInformation
 						navigation={navigation}

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

@@ -92,6 +92,7 @@ export const BusinessesListing = (props: any) => {
           bottomContainerStyle={{ height: 'auto', borderRadius: 10 }}
           titleStyle={{ textAlign: 'center' }}
           closeIcon={theme.images.general.close}
+          presentationStyle='overFullScreen'
         >
           {lastOrderReview?.order && <ReviewTrigger order={lastOrderReview?.order} handleOpenOrderReview={handleOpenOrderReview} />}
         </OBottomPopup>

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

@@ -105,8 +105,7 @@ const CheckoutUI = (props: any) => {
 			padding: 20
 		},
 		pagePadding: {
-			paddingLeft: 40,
-			paddingRight: 40
+			paddingHorizontal: 40
 		},
 		icon: {
 			top: 15,

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

@@ -76,7 +76,6 @@ export const ChCart = styled(ChPaymethods)``
 
 export const WalletPaymentOptionContainer = styled(ChPaymethods)`
   padding-bottom: 0;
-  margin-left: -20px;
 `
 
 export const ChPlaceOrderBtn = styled.View`

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

@@ -42,7 +42,7 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 	const theme = useTheme();
 	const hideAddButton = theme?.business_view?.components?.products?.components?.add_to_cart_button?.hidden ?? true
 
-	const fadeAnim = useRef(new Animated.Value(0)).current;
+	const fadeAnim = useRef(new Animated.Value(enableIntersection ? 0 : 1)).current;
 
 	const styles = StyleSheet.create({
 		container: {
@@ -50,7 +50,7 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 			borderRadius: 7.6,
 			borderColor: theme.colors.border,
 			marginBottom: 28,
-			minHeight: 165
+			minHeight: hideAddButton ? 100 : 165
 		},
 		titleWrapper: {
 			flexDirection: 'row',
@@ -123,7 +123,7 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 		maxCartProductConfig,
 		maxCartProductInventory,
 	);
-
+	
 	const fadeIn = () => {
 		Animated.timing(fadeAnim, {
 			toValue: 1,
@@ -141,16 +141,18 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 	}
 
 	const handleChangeIntersection = () => {
-		setIsIntersectionObserver(true);
-		fadeIn();
+		if (enableIntersection) {
+			setIsIntersectionObserver(true);
+			fadeIn();
+		}
 	}
 
 	useEffect(() => {
-		if (!enableIntersection) fadeIn()
+		if (enableIntersection) fadeIn()
 	}, [enableIntersection])
 
 	return (
-		<InView style={{ minHeight: 200 }} triggerOnce={true} onChange={(inView: boolean) => handleChangeIntersection()}>
+		<InView style={{ minHeight: hideAddButton ? 125 : 165 }} triggerOnce={true} onChange={(inView: boolean) => handleChangeIntersection()}>
 			{isIntersectionObserver ? (
 				<CardContainer
 					showAddButton={!hideAddButton}
@@ -164,7 +166,7 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 					<View style={{ flexDirection: 'row' }}>
 						{productAddedToCartLength > 0 && (
 							<QuantityContainer style={[styles.quantityContainer, {
-								transform: [{ translateX: 25 }, { translateY: -55 }],
+								transform: [{ translateX: 25 }, { translateY: hideAddButton ? -25 : -55 }],
 							}]}>
 								<OText size={12} color={theme.colors.white}>{productAddedToCartLength.toString()}</OText>
 							</QuantityContainer>
@@ -281,7 +283,7 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 					)}
 				</CardContainer>
 			) : (
-				<View style={{ minHeight: 165, marginBottom: 28, padding: 12 }}>
+				<View style={{ marginBottom: 28, padding: 12, height: hideAddButton ? 125 : 165 }}>
 					<Placeholder style={{ padding: 5 }} Animation={Fade}>
 						<View style={{ flexDirection: 'row' }}>
 							<Placeholder style={{ paddingVertical: 10, flex: 1 }}>

package/themes/original/src/components/shared/OBottomPopup.tsx

@@ -14,6 +14,7 @@ interface Props {
 	bottomContainerStyle?: any;
 	titleStyle?: any;
 	closeIcon?: any;
+	presentationStyle?: "fullScreen" | "pageSheet" | "formSheet" | "overFullScreen" | undefined
 }
 const OBottomPopup = (props: Props) => {
 	const {
@@ -25,17 +26,18 @@ const OBottomPopup = (props: Props) => {
 		isStatusBar,
 		titleStyle,
 		bottomContainerStyle,
-		closeIcon
+		closeIcon,
+		presentationStyle
 	} = props
 	const { top, bottom } = useSafeAreaInsets();
-
+	
 	return (
 		<Modal
 			animationType='slide'
 			transparent={transparent}
 			visible={open}
 			onRequestClose={() => onClose()}
-			presentationStyle={'fullScreen'}
+			presentationStyle={presentationStyle || 'fullScreen'}
 		>
 			{isStatusBar && <StatusBar translucent={false} />}
 			<View style={styles.container}>