ordering-ui-react-native 0.15.66-release → 0.15.67-release

package/package.json

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

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 import {
 	BusinessController as BusinessSingleCard,
@@ -10,7 +10,7 @@ import {
 	ToastType
 } from 'ordering-components/native';
 import { OIcon, OText } from '../shared';
-import { StyleSheet, TouchableOpacity, View } from 'react-native';
+import { StyleSheet, TouchableOpacity, View, Animated } from 'react-native';
 import { InView } from 'react-native-intersection-observer'
 import { BusinessControllerParams } from '../../types';
 import { convertHoursToMinutes, shape } from '../../utils';
@@ -57,6 +57,8 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 	const [, t] = useLanguage();
 	const theme = useTheme()
 	const [isIntersectionObserver, setIsIntersectionObserver] = useState(!enableIntersection)
+	const fadeAnim = useRef(new Animated.Value(0)).current;
+
 	const styles = StyleSheet.create({
 		headerStyle: {
 			borderTopLeftRadius: 7.6,
@@ -138,8 +140,25 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 		handleFavoriteBusiness && handleFavoriteBusiness(!business?.favorite)
 	}
 
+	const fadeIn = () => {
+    Animated.timing(fadeAnim, {
+      toValue: 1,
+      duration: 500,
+			useNativeDriver: true
+    }).start();
+  };
+
+	const handleChangeInterSection = (inView: boolean) => {
+		setIsIntersectionObserver(inView)
+		fadeIn()
+	}
+
+	useEffect(() => {
+		if (!enableIntersection) fadeIn()
+	}, [enableIntersection])
+
 	return (
-		<InView style={{ minHeight: 200 }} triggerOnce={true} onChange={(inView: boolean) => setIsIntersectionObserver(inView)}>
+		<InView style={{ minHeight: 200 }} triggerOnce={true} onChange={(inView: boolean) => handleChangeInterSection(inView)}>
 			{isIntersectionObserver ? (
 				<Card activeOpacity={1} onPress={() => handleBusinessClick(business)} style={style}>
 					{business?.ribbon?.enabled && (
@@ -161,6 +180,13 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 						</RibbonBox>
 					)}
 					<BusinessHero>
+					<Animated.View
+						style={[
+							{
+								opacity: fadeAnim
+							}
+						]}
+					>
 						<FastImage
 							style={{ height: 120 }}
 							source={{
@@ -169,6 +195,7 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 							}}
 							resizeMode={FastImage.resizeMode.cover}
 						/>
+					</Animated.View>
 						{(businessFeatured ?? business?.featured) && (
 							<View style={styles.featured}>
 								<FontAwesomeIcon name="crown" size={26} color="gold" />

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

@@ -122,6 +122,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
             <SingleProductCard
               key={'prod_' + product.id + `_${i}`}
               isSoldOut={product.inventoried && !product.quantity}
+              enableIntersection
               product={product}
               businessId={businessId}
               categoryState={categoryState}
@@ -148,6 +149,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                       key={'feat_' + product.id + `_${i}`}
                       isSoldOut={product.inventoried && !product.quantity}
                       product={product}
+                      enableIntersection
                       businessId={businessId}
                       categoryState={categoryState}
                       onProductClick={onProductClick}

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import {
 	useLanguage,
 	useConfig,
@@ -11,7 +11,7 @@ import {
 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 { StyleSheet, View, TouchableOpacity, Image, Animated } from 'react-native';
 import { InView } from 'react-native-intersection-observer'
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 import { OButton, OText } from '../shared';
@@ -26,7 +26,7 @@ function SingleProductCardPropsAreEqual(prevProps: any, nextProps: any) {
 		prevProps.categoryState === nextProps.categoryState
 }
 
-const SinguleProductCardUI = React.memo((props: SingleProductCardParams) => {
+const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 	const {
 		product,
 		isSoldOut,
@@ -34,13 +34,18 @@ const SinguleProductCardUI = React.memo((props: SingleProductCardParams) => {
 		productAddedToCartLength,
 		style,
 		handleFavoriteProduct,
-		enableIntersection
+		enableIntersection,
+		navigation,
+		businessId,
+		isPreviously
 	} = props;
 
 	const theme = useTheme();
 	const [orderingTheme] = useOrderingTheme()
 	const hideAddButton = orderingTheme?.theme?.business_view?.components?.products?.components?.add_to_cart_button?.hidden
 
+	const fadeAnim = useRef(new Animated.Value(0)).current;
+
 	const styles = StyleSheet.create({
 		container: {
 			borderWidth: 1,
@@ -89,10 +94,10 @@ const SinguleProductCardUI = React.memo((props: SingleProductCardParams) => {
 		}
 	});
 
-
 	const [, t] = useLanguage();
 	const [stateConfig] = useConfig();
-	const [{ parsePrice, optimizeImage }] = useUtils();
+	const [{ auth }] = useSession()
+	const [{ parsePrice, optimizeImage, parseDate }] = useUtils();
 	const [orderState] = useOrder()
 	const [isIntersectionObserver, setIsIntersectionObserver] = useState(!enableIntersection)
 
@@ -120,13 +125,34 @@ const SinguleProductCardUI = React.memo((props: SingleProductCardParams) => {
 		maxCartProductInventory,
 	);
 
+	const fadeIn = () => {
+    Animated.timing(fadeAnim, {
+      toValue: 1,
+      duration: 500,
+			useNativeDriver: true
+    }).start();
+  };
+
 	const handleChangeFavorite = () => {
-		handleFavoriteProduct && handleFavoriteProduct(!product?.favorite)
+		if (auth) {
+			handleFavoriteProduct && handleFavoriteProduct(!product?.favorite)
+		} else {
+			navigation && navigation.navigate('Login');
+		}
+	}
+
+	const handleChangeIntersection = () => {
+		setIsIntersectionObserver(true);
+		fadeIn();
 	}
 
+	useEffect(() => {
+		if (!enableIntersection) fadeIn()
+	}, [enableIntersection])
+
 	return (
-		<InView style={{ minHeight: 140 }} triggerOnce={true} onChange={(inView: boolean) => setIsIntersectionObserver(true)}>
-			{isIntersectionObserver && (
+		<InView style={{ minHeight: 200 }} triggerOnce={true} onChange={(inView: boolean) => handleChangeIntersection()}>
+			{isIntersectionObserver ? (
 				<CardContainer
 					showAddButton={!hideAddButton}
 					style={[
@@ -151,18 +177,20 @@ const SinguleProductCardUI = React.memo((props: SingleProductCardParams) => {
 									weight={'500'}
 									numberOfLines={1}
 									ellipsizeMode="tail"
-									style={styles.line18}>
+									style={{ ...styles.line18, flex: 1 }}>
 									{product?.name}
 								</OText>
-								<TouchableOpacity
-									onPress={handleChangeFavorite}
-								>
-									<IconAntDesign
-										name={product?.favorite ? 'heart' : 'hearto'}
-										color={theme.colors.danger5}
-										size={18}
-									/>
-								</TouchableOpacity>
+								{!isPreviously && (
+									<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>
@@ -172,12 +200,22 @@ const SinguleProductCardUI = React.memo((props: SingleProductCardParams) => {
 							</PricesContainer>
 							<OText
 								size={10}
-								numberOfLines={2}
+								numberOfLines={!isPreviously ? 2 : 1}
 								ellipsizeMode="tail"
 								color={theme.colors.textSecondary}
 								style={styles.line15}>
 								{product?.description}
 							</OText>
+							{isPreviously && (
+								<OText
+									size={10}
+									numberOfLines={1}
+									ellipsizeMode="tail"
+									color={theme.colors.primary}
+									style={styles.line15}>
+									{t('LAST_ORDERED_ON', 'Last ordered on')} {parseDate(product?.last_ordered_date, { outputFormat: 'MMM DD, YYYY' })}
+								</OText>
+							)}
 						</CardInfo>
 						<LogoWrapper>
 							{product?.ribbon?.enabled && (
@@ -198,24 +236,24 @@ const SinguleProductCardUI = React.memo((props: SingleProductCardParams) => {
 									</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}
-								/>
+							{product?.images && (
+								<Animated.View
+									style={[
+										{
+											// Bind opacity to animated value
+											opacity: fadeAnim
+										}
+									]}
+								>
+									<FastImage
+										style={styles.productStyle}
+										source={{
+											uri: optimizeImage(product?.images, 'h_250,c_limit'),
+											priority: FastImage.priority.normal,
+										}}
+										resizeMode={FastImage.resizeMode.cover}
+									/>
+								</Animated.View>
 							)}
 						</LogoWrapper>
 
@@ -243,6 +281,20 @@ const SinguleProductCardUI = React.memo((props: SingleProductCardParams) => {
 						/>
 					)}
 				</CardContainer>
+			) : (
+				<Placeholder style={{ padding: 5 }} Animation={Fade}>
+					<View style={{ flexDirection: 'row' }}>
+						<PlaceholderLine
+							width={24}
+							height={70}
+							style={{ marginRight: 10, marginBottom: 10 }}
+						/>
+						<Placeholder style={{ paddingVertical: 10 }}>
+							<PlaceholderLine width={60} style={{ marginBottom: 25 }} />
+							<PlaceholderLine width={20} />
+						</Placeholder>
+					</View>
+				</Placeholder>
 			)}
 		</InView>
 	);
@@ -251,7 +303,7 @@ const SinguleProductCardUI = React.memo((props: SingleProductCardParams) => {
 export const SingleProductCard = (props: SingleProductCardParams) => {
 	const singleProductCardProps = {
 		...props,
-		UIComponent: SinguleProductCardUI
+		UIComponent: SingleProductCardUI
 	}
 	return <SingleProductCardController {...singleProductCardProps} />
 }