ordering-ui-react-native 0.16.47 → 0.16.50

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

@@ -49,7 +49,7 @@ export const ProductDescription = styled.View`
 `
 
 export const ProductEditions = styled.View`
-
+  padding: 0 40px;
 `
 
 export const SectionTitle = styled.View`
@@ -99,4 +99,8 @@ export const WeightUnitItem = styled.View`
   `}
 `
 export const ProductSummary = styled.View`
+  padding: 26px 40px;
+  position: relative;
+  background-color: white;
+  z-index: 100;
 `

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

@@ -1,5 +1,4 @@
 import React, { useState } from 'react';
-import moment from 'moment';
 import {
   SingleOrderCard as SingleOrderCardController,
   useUtils,
@@ -36,20 +35,20 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
     handleClickOrder
   } = props;
 
-  const [{ parsePrice, optimizeImage }] = useUtils();
+  const [{ parsePrice, optimizeImage, parseDate }] = useUtils();
   const [, t] = useLanguage();
-	const theme = useTheme();
+  const theme = useTheme();
 
-	const [reorderSelected, setReorderSelected] = useState<number | null>(null);
+  const [reorderSelected, setReorderSelected] = useState<number | null>(null);
 
-	const allowedOrderStatus = [1, 2, 5, 6, 10, 11, 12];
+  const allowedOrderStatus = [1, 2, 5, 6, 10, 11, 12];
 
   const styles = StyleSheet.create({
-		logo: {
-			borderRadius: 8,
-			width: 64,
-			height: 64
-		},
+    logo: {
+      borderRadius: 8,
+      width: 64,
+      height: 64
+    },
     logoWrapper: {
       overflow: 'hidden',
       backgroundColor: 'white',
@@ -62,79 +61,75 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
     },
     buttonText: {
       color: theme.colors.primary,
-			fontSize: 10,
-			marginLeft: 2,
-			marginRight: 2,
+      fontSize: 10,
+      marginLeft: 2,
+      marginRight: 2,
     },
     reorderLoading: {
       width: 80,
-			height: 40,
-			borderRadius: 10,
+      height: 40,
+      borderRadius: 10,
     },
     reorderbutton: {
-			height: 23,
-			paddingLeft: 10,
-			paddingRight: 10,
-			borderRadius: 23,
-			shadowOpacity: 0,
-			backgroundColor: theme.colors.primaryContrast,
-			borderWidth: 0,
-		},
+      height: 23,
+      paddingLeft: 10,
+      paddingRight: 10,
+      borderRadius: 23,
+      shadowOpacity: 0,
+      backgroundColor: theme.colors.primaryContrast,
+      borderWidth: 0,
+    },
     reviewButton: {
-			height: 23,
-			maxHeight: 23,
-			backgroundColor: theme.colors.white,
-			alignItems: 'center',
-			justifyContent: 'center',
-			paddingHorizontal: 10,
-			borderRadius: 23,
-			borderWidth: 1,
-			borderColor: theme.colors.primaryContrast,
+      height: 23,
+      maxHeight: 23,
+      backgroundColor: theme.colors.white,
+      alignItems: 'center',
+      justifyContent: 'center',
+      paddingHorizontal: 10,
+      borderRadius: 23,
+      borderWidth: 1,
+      borderColor: theme.colors.primaryContrast,
       marginRight: 2
-		},
+    },
     infoText: {
       flexDirection: 'row',
       alignItems: 'center'
     }
-	});
+  });
 
   const handleReorderClick = (id: number) => {
-		setReorderSelected(id);
-		handleReorder && handleReorder(id);
-	};
+    setReorderSelected(id);
+    handleReorder && handleReorder(id);
+  };
 
   const handleClickOrderReview = (order: any) => {
     if (pastOrders) {
       onNavigationRedirect &&
-      onNavigationRedirect('ReviewOrder', {
-        order: {
-          id: order?.id,
-          business_id: order?.business_id,
-          logo: order?.business?.logo,
-          driver: order?.driver,
-          products: order?.products,
-          review: order?.review,
-          user_review: order?.user_review
-        },
-      });
+        onNavigationRedirect('ReviewOrder', {
+          order: {
+            id: order?.id,
+            business_id: order?.business_id,
+            logo: order?.business?.logo,
+            driver: order?.driver,
+            products: order?.products,
+            review: order?.review,
+            user_review: order?.user_review
+          },
+        });
       return
     }
     if (isMessageView) {
-			handleClickOrder(order?.uuid)
-			return
-		}
-		onNavigationRedirect &&
-			onNavigationRedirect('OrderDetails', { orderId: order?.uuid });
-	};
+      handleClickOrder(order?.uuid)
+      return
+    }
+    onNavigationRedirect &&
+      onNavigationRedirect('OrderDetails', { orderId: order?.uuid });
+  };
 
   const handleClickViewOrder = (uuid: string) => {
-		onNavigationRedirect &&
-			onNavigationRedirect('OrderDetails', { orderId: uuid });
-	};
-
-  const formatDate = (date: string, option?: any) => {
-		return option?.utc ? moment.utc(date).format('DD/MM/YY \u2022 h:m a') : moment(date).format('DD/MM/YY \u2022 h:m a');
-	};
+    onNavigationRedirect &&
+      onNavigationRedirect('OrderDetails', { orderId: uuid });
+  };
 
   const handleChangeFavorite = () => {
     handleFavoriteOrder && handleFavoriteOrder(!order?.favorite)
@@ -143,7 +138,7 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
   return (
     <Container
       onPress={() => handleClickViewOrder(order?.uuid)}
-			activeOpacity={0.7}
+      activeOpacity={0.7}
     >
       <InnerContainer>
         {!!order.business?.logo && (
@@ -164,22 +159,22 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
             {!!!pastOrders && (
               <>
                 {isMessageView ? (
-                <>
-                  {order?.unread_count > 0 && (
-                    <UnreadMessageCounter>
-                      <OText size={12} color={theme.colors.primary} lineHeight={18} >
-                        {order?.unread_count}
-                      </OText>
-                    </UnreadMessageCounter>
-                  )}
-                </>
-              ) : (
-                <Price>
-                  <OText size={12} lineHeight={18}>
-                    {parsePrice(order?.summary?.total || order?.total)}
-                  </OText>
-                </Price>
-              )}
+                  <>
+                    {order?.unread_count > 0 && (
+                      <UnreadMessageCounter>
+                        <OText size={12} color={theme.colors.primary} lineHeight={18} >
+                          {order?.unread_count}
+                        </OText>
+                      </UnreadMessageCounter>
+                    )}
+                  </>
+                ) : (
+                  <Price>
+                    <OText size={12} lineHeight={18}>
+                      {parsePrice(order?.summary?.total || order?.total)}
+                    </OText>
+                  </Price>
+                )}
               </>
             )}
             {!!pastOrders && (
@@ -243,29 +238,27 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
                   color={theme.colors.textSecondary}
                   style={{ marginVertical: 3 }}
                   numberOfLines={1}>
-                  {order?.delivery_datetime_utc
-                    ? formatDate(order?.delivery_datetime_utc)
-                    : formatDate(order?.delivery_datetime, { utc: false })}
+                  {order?.delivery_datetime_utc ? parseDate(order?.delivery_datetime_utc) : parseDate(order?.delivery_datetime, { utc: false })}
                 </OText>
               </View>
-							<OText
-								color={theme.colors.primary}
-								size={10}
-								lineHeight={15}
-								numberOfLines={1}>
-								{getOrderStatus(order.status)?.value}
-							</OText>
+              <OText
+                color={theme.colors.primary}
+                size={10}
+                lineHeight={15}
+                numberOfLines={1}>
+                {getOrderStatus(order.status)?.value}
+              </OText>
             </View>
             <TouchableOpacity
-							onPress={handleChangeFavorite}
+              onPress={handleChangeFavorite}
               style={{ marginTop: 5 }}
-						>
-							<IconAntDesign
-								name={order?.favorite ? 'heart' : 'hearto'}
-								color={theme.colors.danger5}
-								size={16}
-							/>
-						</TouchableOpacity>
+            >
+              <IconAntDesign
+                name={order?.favorite ? 'heart' : 'hearto'}
+                color={theme.colors.danger5}
+                size={16}
+              />
+            </TouchableOpacity>
           </ContentFooter>
         </CardInfoWrapper>
       </InnerContainer>

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import {
 	useLanguage,
 	useConfig,
@@ -10,6 +10,8 @@ import { useTheme } from 'styled-components/native';
 import { SingleProductCardParams } from '../../types';
 import { CardContainer, CardInfo, SoldOut, QuantityContainer, PricesContainer, RibbonBox, LogoWrapper } from './styles';
 import { StyleSheet, View, TouchableOpacity, Image } from 'react-native';
+import { InView } from 'react-native-intersection-observer'
+import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 import { OText } from '../shared';
 import FastImage from 'react-native-fast-image'
 import IconAntDesign from 'react-native-vector-icons/AntDesign'
@@ -29,7 +31,8 @@ const SinguleProductCardUI = React.memo((props: SingleProductCardParams) => {
 		onProductClick,
 		productAddedToCartLength,
 		style,
-		handleFavoriteProduct
+		handleFavoriteProduct,
+		enableIntersection
 	} = props;
 
 	const theme = useTheme();
@@ -87,7 +90,7 @@ const SinguleProductCardUI = React.memo((props: SingleProductCardParams) => {
 	const [stateConfig] = useConfig();
 	const [{ parsePrice, optimizeImage }] = useUtils();
 	const [orderState] = useOrder();
-
+	const [isIntersectionObserver, setIsIntersectionObserver] = useState(!enableIntersection)
 	const editMode = typeof product?.code !== 'undefined';
 
 	const removeToBalance = editMode ? product?.quantity : 0;
@@ -117,103 +120,110 @@ const SinguleProductCardUI = React.memo((props: SingleProductCardParams) => {
 	}
 
 	return (
-		<CardContainer
-			style={[
-				styles.container,
-				(isSoldOut || maxProductQuantity <= 0) && styles.soldOutBackgroundStyle,
-				(style && { ...style }),
-			]}
-			onPress={() => onProductClick?.(product)}>
-			{productAddedToCartLength > 0 && (
-				<QuantityContainer style={[styles.quantityContainer, {
-					transform: [{ translateX: 10 }, { translateY: -10 }],
-				}]}>
-					<OText size={12} color={theme.colors.white}>{productAddedToCartLength.toString()}</OText>
-				</QuantityContainer>
-			)}
-			<CardInfo>
-				<View style={styles.titleWrapper}>
-					<OText
-						size={12}
-						weight={'500'}
-						numberOfLines={1}
-						ellipsizeMode="tail"
-						style={styles.line18}>
-						{product?.name}
-					</OText>
-					<TouchableOpacity
-						onPress={handleChangeFavorite}
-					>
-						<IconAntDesign
-							name={product?.favorite ? 'heart' : 'hearto'}
-							color={theme.colors.danger5}
-							size={18}
-						/>
-					</TouchableOpacity>
-				</View>
-				<PricesContainer>
-					<OText color={theme.colors.primary}>{product?.price ? parsePrice(product?.price) : ''}</OText>
-					{product?.offer_price !== null && product?.in_offer && (
-						<OText style={styles.regularPriceStyle}>{product?.offer_price ? parsePrice(product?.offer_price) : ''}</OText>
+		<InView style={{ minHeight: 140 }} triggerOnce={true} onChange={(inView: boolean) => setIsIntersectionObserver(true)}>
+			{isIntersectionObserver && (
+				<CardContainer
+					style={[
+						styles.container,
+						(isSoldOut || maxProductQuantity <= 0) && styles.soldOutBackgroundStyle,
+						(style && { ...style }),
+					]}
+					onPress={() => onProductClick?.(product)}>
+					{productAddedToCartLength > 0 && (
+						<QuantityContainer style={[styles.quantityContainer, {
+							transform: [{ translateX: 10 }, { translateY: -10 }],
+						}]}>
+							<OText size={12} color={theme.colors.white}>{productAddedToCartLength.toString()}</OText>
+						</QuantityContainer>
 					)}
-				</PricesContainer>
-				<OText
-					size={10}
-					numberOfLines={2}
-					ellipsizeMode="tail"
-					color={theme.colors.textSecondary}
-					style={styles.line15}>
-					{product?.description}
-				</OText>
-			</CardInfo>
-			<LogoWrapper>
-				{product?.ribbon?.enabled && (
-					<RibbonBox
-						bgColor={product?.ribbon?.color}
-						isRoundRect={product?.ribbon?.shape === shape?.rectangleRound}
-						isCapsule={product?.ribbon?.shape === shape?.capsuleShape}
-					>
+					<CardInfo>
+						<View style={styles.titleWrapper}>
+							<OText
+								size={12}
+								weight={'500'}
+								numberOfLines={1}
+								ellipsizeMode="tail"
+								style={styles.line18}>
+								{product?.name}
+							</OText>
+							<TouchableOpacity
+								onPress={handleChangeFavorite}
+							>
+								<IconAntDesign
+									name={product?.favorite ? 'heart' : 'hearto'}
+									color={theme.colors.danger5}
+									size={18}
+								/>
+							</TouchableOpacity>
+						</View>
+						<PricesContainer>
+							<OText color={theme.colors.primary}>{product?.price ? parsePrice(product?.price) : ''}</OText>
+							{product?.offer_price !== null && product?.in_offer && (
+								<OText style={styles.regularPriceStyle}>{product?.offer_price ? parsePrice(product?.offer_price) : ''}</OText>
+							)}
+						</PricesContainer>
 						<OText
 							size={10}
-							weight={'400'}
-							color={theme.colors.white}
 							numberOfLines={2}
-							ellipsizeMode='tail'
-							lineHeight={13}
-						>
-							{product?.ribbon?.text}
+							ellipsizeMode="tail"
+							color={theme.colors.textSecondary}
+							style={styles.line15}>
+							{product?.description}
 						</OText>
-					</RibbonBox>
-				)}
-				{product?.images ? (
-					<FastImage
-						style={styles.productStyle}
-						source={{
-							uri: optimizeImage(product?.images, 'h_250,c_limit'),
-							priority: FastImage.priority.normal,
-						}}
-						resizeMode={FastImage.resizeMode.cover}
-					/>
-				) : (
-					<FastImage
-						style={styles.productStyle}
-						source={{
-							uri: Image.resolveAssetSource(theme.images.dummies.product).uri,
-							priority: FastImage.priority.normal,
-						}}
-						resizeMode={FastImage.resizeMode.cover}
-					/>
-				)}
-			</LogoWrapper>
-
-			{(isSoldOut || maxProductQuantity <= 0) && (
-				<SoldOut>
-					<OText size={12} weight="bold" color={theme.colors.textSecondary} style={styles.soldOutTextStyle}>
-						{t('SOLD_OUT', 'SOLD OUT')}
-					</OText>
-				</SoldOut>
+					</CardInfo>
+					<LogoWrapper>
+						{product?.ribbon?.enabled && (
+							<RibbonBox
+								bgColor={product?.ribbon?.color}
+								isRoundRect={product?.ribbon?.shape === shape?.rectangleRound}
+								isCapsule={product?.ribbon?.shape === shape?.capsuleShape}
+							>
+								<OText
+									size={10}
+									weight={'400'}
+									color={theme.colors.white}
+									numberOfLines={2}
+									ellipsizeMode='tail'
+									lineHeight={13}
+								>
+									{product?.ribbon?.text}
+								</OText>
+							</RibbonBox>
+						)}
+						{product?.images ? (
+							<>
+								{isIntersectionObserver && (
+									<FastImage
+										style={styles.productStyle}
+										source={{
+											uri: optimizeImage(product?.images, 'h_250,c_limit'),
+											priority: FastImage.priority.normal,
+										}}
+										resizeMode={FastImage.resizeMode.cover}
+									/>
+								)}
+							</>
+						) : (
+							<FastImage
+								style={styles.productStyle}
+								source={{
+									uri: Image.resolveAssetSource(theme.images.dummies.product).uri,
+									priority: FastImage.priority.normal,
+								}}
+								resizeMode={FastImage.resizeMode.cover}
+							/>
+						)}
+					</LogoWrapper>
+					{(isSoldOut || maxProductQuantity <= 0) && (
+						<SoldOut>
+							<OText size={12} weight="bold" color={theme.colors.textSecondary} style={styles.soldOutTextStyle}>
+								{t('SOLD_OUT', 'SOLD OUT')}
+							</OText>
+						</SoldOut>
+					)}
+				</CardContainer>
 			)}
-		</CardContainer>
+		</InView >
 	);
 }, SingleProductCardPropsAreEqual);
 

package/themes/original/src/types/index.tsx

@@ -213,6 +213,7 @@ export interface BusinessControllerParams {
 	handleFavoriteBusiness?: any,
 	setFavoriteIds?: any;
 	handleUpdateBusinessList?: any;
+	enableIntersection?: boolean;
 }
 export interface BusinessProductsListingParams {
 	navigation?: any;
@@ -289,15 +290,16 @@ export interface BusinessProductsListParams {
 	handleUpdateProducts?: any
 }
 export interface SingleProductCardParams {
-	businessId: any,
+	businessId: any;
 	product: any;
 	isSoldOut: boolean;
 	onProductClick: any;
 	productAddedToCartLength: number;
-	style?: ViewStyle,
-	categoryState?: any,
-	handleFavoriteProduct?: any,
-	handleUpdateProducts?: any
+	style?: ViewStyle;
+	categoryState?: any;
+	handleFavoriteProduct?: any;
+	handleUpdateProducts?: any;
+	enableIntersection?: boolean;
 }
 export interface BusinessInformationParams {
 	navigation?: any,