ordering-ui-react-native 0.15.69 → 0.15.70-release

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

@@ -1,29 +1,48 @@
-import React from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import {
 	useLanguage,
 	useConfig,
 	useOrder,
 	useUtils,
+	useSession,
+	SingleProductCard as SingleProductCardController
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import { SingleProductCardParams } from '../../types';
 import { CardContainer, CardInfo, SoldOut, QuantityContainer, PricesContainer, RibbonBox, LogoWrapper } from './styles';
-import { StyleSheet } from 'react-native';
-import { OText, OIcon } from '../shared';
+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';
 import FastImage from 'react-native-fast-image'
+import IconAntDesign from 'react-native-vector-icons/AntDesign'
 import { shape } from '../../utils';
 
-export const SingleProductCard = (props: SingleProductCardParams) => {
+function SingleProductCardPropsAreEqual(prevProps: any, nextProps: any) {
+	return JSON.stringify(prevProps.product) === JSON.stringify(nextProps.product) &&
+		prevProps.isSoldOut === nextProps.isSoldOut &&
+		prevProps.productAddedToCartLength === nextProps.productAddedToCartLength &&
+		prevProps.categoryState === nextProps.categoryState
+}
+
+const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 	const {
-		businessId,
 		product,
 		isSoldOut,
 		onProductClick,
 		productAddedToCartLength,
-		style
+		style,
+		handleFavoriteProduct,
+		enableIntersection,
+		navigation,
+		businessId,
+		isPreviously
 	} = props;
 
 	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 styles = StyleSheet.create({
 		container: {
@@ -31,6 +50,12 @@ export const SingleProductCard = (props: SingleProductCardParams) => {
 			borderRadius: 7.6,
 			borderColor: theme.colors.border,
 			marginBottom: 28,
+			minHeight: 165
+		},
+		titleWrapper: {
+			flexDirection: 'row',
+			alignItems: 'center',
+			justifyContent: 'space-between'
 		},
 		line18: {
 			lineHeight: 18,
@@ -68,11 +93,12 @@ export const SingleProductCard = (props: SingleProductCardParams) => {
 		}
 	});
 
-
 	const [, t] = useLanguage();
 	const [stateConfig] = useConfig();
-	const [{ parsePrice, optimizeImage }] = useUtils();
-	const [orderState] = useOrder();
+	const [{ auth }] = useSession()
+	const [{ parsePrice, optimizeImage, parseDate }] = useUtils();
+	const [orderState] = useOrder()
+	const [isIntersectionObserver, setIsIntersectionObserver] = useState(!enableIntersection)
 
 	const editMode = typeof product?.code !== 'undefined';
 
@@ -97,88 +123,186 @@ export const SingleProductCard = (props: SingleProductCardParams) => {
 		maxCartProductConfig,
 		maxCartProductInventory,
 	);
+
+	const fadeIn = () => {
+    Animated.timing(fadeAnim, {
+      toValue: 1,
+      duration: 500,
+			useNativeDriver: true
+    }).start();
+  };
+
+	const handleChangeFavorite = () => {
+		if (auth) {
+			handleFavoriteProduct && handleFavoriteProduct(!product?.favorite)
+		} else {
+			navigation && navigation.navigate('Login');
+		}
+	}
+
+	const handleChangeIntersection = () => {
+		setIsIntersectionObserver(true);
+		fadeIn();
+	}
+
+	useEffect(() => {
+		if (!enableIntersection) fadeIn()
+	}, [enableIntersection])
+
 	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>
-				<OText
-					size={12}
-					weight={'500'}
-					numberOfLines={1}
-					ellipsizeMode="tail"
-					style={styles.line18}>
-					{product?.name}
-				</OText>
-				<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: 200 }} triggerOnce={true} onChange={(inView: boolean) => handleChangeIntersection()}>
+			{isIntersectionObserver ? (
+				<CardContainer
+					showAddButton={!hideAddButton}
+					style={[
+						styles.container,
+						(isSoldOut || maxProductQuantity <= 0) && styles.soldOutBackgroundStyle,
+						(style && { ...style }),
+					]}
+					onPress={() => onProductClick?.(product)}
+				>
+					<View style={{ flexDirection: 'row' }}>
+						{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, flex: 1 }}>
+									{product?.name}
+								</OText>
+								{!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>
+								{product?.offer_price !== null && product?.in_offer && (
+									<OText style={styles.regularPriceStyle}>{product?.offer_price ? parsePrice(product?.offer_price) : ''}</OText>
+								)}
+							</PricesContainer>
+							<OText
+								size={10}
+								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 && (
+								<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 && (
+								<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>
+
+						{(isSoldOut || maxProductQuantity <= 0) && (
+							<SoldOut>
+								<OText size={12} weight="bold" color={theme.colors.textSecondary} style={styles.soldOutTextStyle}>
+									{t('SOLD_OUT', 'SOLD OUT')}
+								</OText>
+							</SoldOut>
+						)}
+					</View>
+					{!hideAddButton && (
+						<OButton
+							onClick={() => onProductClick?.(product)}
+							style={{
+								width: '100%',
+								borderRadius: 7.6,
+								marginTop: 10,
+
+							}}
+							bgColor={isSoldOut ? '#B8B8B8' : theme?.colors?.white}
+							borderColor={theme?.colors.primary}
+							textStyle={{ color: theme.colors.primary }}
+							text={t('ADD', 'Add')}
+						/>
 					)}
-				</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}
-					>
-						<OText
-							size={10}
-							weight={'400'}
-							color={theme.colors.white}
-							numberOfLines={2}
-              ellipsizeMode='tail'
-							lineHeight={13}
-						>
-							{product?.ribbon?.text}
-						</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}
-					/>
-				) : (
-					<OIcon
-						src={theme?.images?.dummies?.product}
-						style={styles.productStyle}
-					/>
-				)}
-			</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>
+			) : (
+				<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>
 			)}
-		</CardContainer>
+		</InView>
 	);
-};
+}, SingleProductCardPropsAreEqual);
+
+export const SingleProductCard = (props: SingleProductCardParams) => {
+	const singleProductCardProps = {
+		...props,
+		UIComponent: SingleProductCardUI
+	}
+	return <SingleProductCardController {...singleProductCardProps} />
+}

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

@@ -2,7 +2,7 @@ import styled, { css } from 'styled-components/native'
 
 export const CardContainer = styled.TouchableOpacity`
   flex: 1;
-  flex-direction: row;
+  flex-direction: ${(props : any) => props.showAddButton ? 'column' : 'row'};
   justify-content: space-between;
   align-items: center;
   padding: 12px;
@@ -23,7 +23,7 @@ export const SoldOut = styled.View`
 `
 
 export const QuantityContainer = styled.View`
-  background: ${({ theme } : any) => theme.colors.primary};
+  background: ${({ theme }: any) => theme.colors.primary};
   align-items: center;
   justify-content: center;
 `

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

@@ -27,7 +27,8 @@ const StripeElementsFormUI = (props: any) => {
 		paymethod,
 		onCancel,
 		cart,
-		merchantId
+		merchantId,
+		businessIds
 	} = props;
 
 	const theme = useTheme();
@@ -60,13 +61,13 @@ const StripeElementsFormUI = (props: any) => {
 	}
 
 	if (user?.address) {
-		billingDetails.addressLine1 = user?.address
+		billingDetails.address.line1 = user?.address
 	}
 
 	const createPayMethod = async () => {
-		const params: any = { type: 'Card' }
+		const params: any = { paymentMethodType: 'Card', paymentMethodData: {} }
 		if (Object.keys(billingDetails).length > 0) {
-			params.billingDetails = billingDetails
+			params.paymentMethodData.billingDetails = {...billingDetails, token: card?.last4}
 		}
 		try {
 			setCreatePmLoading(true)
@@ -93,22 +94,29 @@ const StripeElementsFormUI = (props: any) => {
 			setErrors(error?.message || error?.toString());
 		}
 	}
-
+	
 	const handleSaveCard = async () => {
 		setErrors('');
 		if (!requirements) {
 			createPayMethod();
 			return
 		}
-		const params: any = { type: 'Card' }
+		const params: any = { paymentMethodType: 'Card', paymentMethodData: {} }
 		if (Object.keys(billingDetails).length > 0) {
-			params.billingDetails = billingDetails
+			params.paymentMethodData.billingDetails = {...billingDetails, token: card?.last4}
 		}
 		try {
 			const { setupIntent, error } = await confirmSetupIntent(requirements, params);
 
 			if (setupIntent?.status === 'Succeeded') {
-				stripeTokenHandler(setupIntent?.paymentMethodId, user, businessId);
+				if (businessIds) {
+					businessIds.forEach((_businessId: any, index: any) => {
+					  const _isNewCard = index === 0
+					  stripeTokenHandler(setupIntent?.paymentMethodId, user, businessId, _isNewCard);
+					})
+				} else {
+					stripeTokenHandler(setupIntent?.paymentMethodId, user, businessId);
+				}
 			}
 
 			if (error) {

package/themes/original/src/components/StripeElementsForm/naked.tsx

@@ -40,7 +40,7 @@ export const StripeElementsForm = (props: any) => {
     }
   }
 
-  const stripeTokenHandler = async (tokenId: string, user: any, businessId: string) => {
+  const stripeTokenHandler = async (tokenId: string, user: any, businessId: string, isNewCard: any = true) => {
     try {
       setState({
         ...state,
@@ -60,7 +60,7 @@ export const StripeElementsForm = (props: any) => {
         })
       })
       const response = await result.json();
-      props.onSelectCard && props.onSelectCard(response.result);
+      isNewCard && props.onSelectCard && props.onSelectCard(response.result);
       setState({
         ...state,
         loadingAdd: false

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

@@ -4,7 +4,7 @@ import {
 	UpsellingPage as UpsellingPageController,
 	useUtils,
 	useLanguage,
-  useOrder
+	useOrder
 } from 'ordering-components/native'
 import { useTheme } from 'styled-components/native';
 import { OText, OIcon, OBottomPopup, OButton } from '../shared'
@@ -62,7 +62,19 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
 			borderRadius: 7.6,
 			borderColor: theme.colors.textSecondary,
 			height: 38
-		}
+		},
+		headerItem: {
+			flexDirection: 'row',
+			alignItems: 'center',
+			marginVertical: 2,
+			marginHorizontal: 20,
+		},
+		btnBackArrow: {
+			borderWidth: 0,
+			backgroundColor: theme.colors.clear,
+			shadowColor: theme.colors.clear,
+			padding: 40,
+		},
 	})
 
 	const [modalIsOpen, setModalIsOpen] = useState(false)
@@ -77,11 +89,11 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
 		? cart?.products.map((product: any) => product.id)
 		: []
 
-  	const productsList = !upsellingProducts.loading && !upsellingProducts.error
-      ? upsellingProducts?.products?.length
-      	? upsellingProducts?.products.filter((product: any) => !cartProducts.includes(product.id))
-      	: (props?.products ?? []).filter((product: any) => !cartProducts.includes(product.id)) ?? []
-      : []
+	const productsList = !upsellingProducts.loading && !upsellingProducts.error
+		? upsellingProducts?.products?.length
+			? upsellingProducts?.products.filter((product: any) => !cartProducts.includes(product.id))
+			: (props?.products ?? []).filter((product: any) => !cartProducts.includes(product.id)) ?? []
+		: []
 
 	useEffect(() => {
 		if (!isCustomMode && !props.products) {
@@ -95,15 +107,11 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
 		}
 	}, [upsellingProducts.loading, upsellingProducts?.products.length])
 
-	useEffect(() => {
-		isCheckout && Object.keys(cart).length === 0 && onNavigationRedirect && onNavigationRedirect('MyOrders')
-	}, [cart, isCheckout])
-
 	const handleFormProduct = (product: any) => {
-    onNavigationRedirect && onNavigationRedirect('ProductDetails', {
-      product: product,
-      businessId: product?.api?.businessId,
-      businessSlug: business.slug,
+		onNavigationRedirect && onNavigationRedirect('ProductDetails', {
+			product: product,
+			businessId: product?.api?.businessId,
+			businessSlug: business.slug,
 		})
 	}
 
@@ -119,8 +127,8 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
 						!upsellingProducts.loading && (
 							<>
 								{
-									!upsellingProducts.error ? productsList.map((product: any) => (
-										<Item key={product.id}>
+									!upsellingProducts.error ? productsList.map((product: any, i: number) => (
+										<Item key={`${product.id}_${i}`}>
 											<View style={{ flexBasis: '57%' }}>
 												<Details>
 													<OText size={12} lineHeight={18} numberOfLines={1} ellipsizeMode='tail'>{product.name}</OText>
@@ -148,50 +156,54 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
 		)
 	}
 
-  const UpsellingContent = () => {
-    return (
-      <>
-        <TopBar style={{ paddingTop: Platform.OS == 'ios' ? 10 : 30 }}>
-          <TopActions onPress={() => onGoBack()}>
-            <OIcon src={theme.images.general.arrow_left} width={15} />
-          </TopActions>
-        </TopBar>
-        <ScrollView style={{ marginBottom: props.isPage ? 40 : bottom + (Platform.OS == 'ios' ? 96 : 130) }} showsVerticalScrollIndicator={false}>
+	const UpsellingContent = () => {
+		return (
+			<>
+				<View style={{ ...styles.headerItem, flex: 1, marginTop: Platform.OS == 'ios' ? 35 : 70 }}>
+					<OButton
+						imgLeftSrc={theme.images.general.arrow_left}
+						imgRightSrc={null}
+						style={styles.btnBackArrow}
+						onClick={() => onGoBack()}
+						imgLeftStyle={{ tintColor: theme.colors.textNormal, width: 16 }}
+					/>
+				</View>
+				<ScrollView style={{ marginTop: 10, marginBottom: props.isPage ? 40 : bottom + (Platform.OS == 'ios' ? 96 : 130) }} showsVerticalScrollIndicator={false}>
 					{productsList.length > 0 &&
-            <View style={{ paddingHorizontal: 40, overflow: 'visible' }}>
-              <OText size={16} lineHeight={24} weight={'500'}>{t('WANT_SOMETHING_ELSE', 'Do you want something else?')}</OText>
-              <UpsellingLayout />
-            </View>
-          }
-          <View style={{ paddingHorizontal: 40 }}>
-            <OText size={20} lineHeight={30} weight={600} style={{ marginTop: 10, marginBottom: 17 }}>{t('YOUR_CART', 'Your cart')}</OText>
-            <OrderSummary
-              cart={cart}
-              isCartPending={cart?.status === 2}
-              onNavigationRedirect={onNavigationRedirect}
-            />
-          </View>
-        </ScrollView>
-        <View
-          style={{
-            alignItems: 'center',
-            bottom: props.isPage ? Platform.OS === 'ios' ? 0 : 20 : Platform.OS === 'ios' ? bottom  + 59 :  bottom + 125
-          }}
-        >
-          <OButton
-            imgRightSrc=''
-            text={t('CHECKOUT', 'Checkout')}
-            style={{...styles.closeUpsellingButton}}
-            textStyle={{ color: theme.colors.white, fontSize: 14 }}
-            onClick={() => {
-				handleUpsellingPage()
-				setIsCheckout(true)
-			}}
-          />
-        </View>
-      </>
-    )
-  }
+						<View style={{ paddingHorizontal: 40, overflow: 'visible' }}>
+							<OText size={16} lineHeight={24} weight={'500'}>{t('WANT_SOMETHING_ELSE', 'Do you want something else?')}</OText>
+							<UpsellingLayout />
+						</View>
+					}
+					<View style={{ paddingHorizontal: 40 }}>
+						<OText size={20} lineHeight={30} weight={600} style={{ marginTop: 10, marginBottom: 17 }}>{t('YOUR_CART', 'Your cart')}</OText>
+						<OrderSummary
+							cart={cart}
+							isCartPending={cart?.status === 2}
+							onNavigationRedirect={onNavigationRedirect}
+						/>
+					</View>
+				</ScrollView>
+				<View
+					style={{
+						alignItems: 'center',
+						bottom: props.isPage ? Platform.OS === 'ios' ? 0 : 20 : Platform.OS === 'ios' ? bottom + 59 : bottom + 125
+					}}
+				>
+					<OButton
+						imgRightSrc=''
+						text={t('CHECKOUT', 'Checkout')}
+						style={{ ...styles.closeUpsellingButton }}
+						textStyle={{ color: theme.colors.white, fontSize: 14 }}
+						onClick={() => {
+							handleUpsellingPage()
+							setIsCheckout(true)
+						}}
+					/>
+				</View>
+			</>
+		)
+	}
 
 	return (
 		<>
@@ -199,20 +211,20 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
 				<UpsellingLayout />
 			) : (
 				<>
-          {props.isPage ? (
-            <UpsellingContent />
-          ) : (
-            canOpenUpselling && !modalIsOpen && (
-              <OBottomPopup
-                title={''}
-                open={openUpselling}
-                onClose={() => handleUpsellingPage()}
-                isStatusBar
-              >
-                <UpsellingContent />
-              </OBottomPopup>
-            )
-          )}
+					{props.isPage ? (
+						<UpsellingContent />
+					) : (
+						canOpenUpselling && !modalIsOpen && (
+							<OBottomPopup
+								title={''}
+								open={openUpselling}
+								onClose={() => handleUpsellingPage()}
+								isStatusBar
+							>
+								<UpsellingContent />
+							</OBottomPopup>
+						)
+					)}
 				</>
 			)}
 		</>