ordering-ui-react-native 0.16.25 → 0.16.26-release

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

@@ -1,38 +1,63 @@
-import React from 'react';
+import React, { useState } from 'react';
 import {
 	useLanguage,
 	useConfig,
 	useOrder,
 	useUtils,
+	useSession,
+	ToastType,
+	useToast,
 	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, View, TouchableOpacity } from 'react-native';
-import { OText, OIcon } from '../shared';
+import { CardInfo, SoldOut, QuantityContainer, PricesContainer, RibbonBox, LogoWrapper } from './styles';
+import { StyleSheet, View } from 'react-native';
+import { InView } from 'react-native-intersection-observer'
+import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
+import { OButton, OIcon, OText } from '../shared';
 import FastImage from 'react-native-fast-image'
-import IconAntDesign from 'react-native-vector-icons/AntDesign'
 import { shape } from '../../utils';
+import { LottieAnimation } from '../LottieAnimation';
+import { CardAnimation } from '../shared/CardAnimation'
 
-const SinguleProductCardUI = (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 {
 		product,
 		isSoldOut,
 		onProductClick,
 		productAddedToCartLength,
 		style,
-		handleFavoriteProduct
+		handleFavoriteProduct,
+		enableIntersection,
+		navigation,
+		businessId,
+		isPreviously
 	} = props;
 
 	const theme = useTheme();
+	const hideAddButton = theme?.business_view?.components?.products?.components?.add_to_cart_button?.hidden ?? true
 
 	const styles = StyleSheet.create({
 		container: {
 			borderWidth: 1,
-			borderRadius: 7.6,
 			borderColor: theme.colors.border,
-			marginBottom: 28,
+			marginBottom: 25,
+			minHeight: hideAddButton ? 100 : 165,
+			flex: 1,
+			flexDirection: hideAddButton ? 'row' : 'column',
+			justifyContent: 'space-between',
+			alignItems: 'center',
+			padding: 12,
+			borderRadius: 10,
+			position: 'relative'
 		},
 		titleWrapper: {
 			flexDirection: 'row',
@@ -58,8 +83,8 @@ const SinguleProductCardUI = (props: SingleProductCardParams) => {
 		},
 		quantityContainer: {
 			position: 'absolute',
-			left: '100%',
-			bottom: '100%',
+			right: 0,
+			top: 0,
 			width: 25,
 			height: 25,
 			textAlign: 'center',
@@ -75,11 +100,13 @@ const SinguleProductCardUI = (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 [, { showToast }] = useToast()
+	const [isIntersectionObserver, setIsIntersectionObserver] = useState(!enableIntersection)
 
 	const editMode = typeof product?.code !== 'undefined';
 
@@ -106,110 +133,183 @@ const SinguleProductCardUI = (props: SingleProductCardParams) => {
 	);
 
 	const handleChangeFavorite = () => {
-		handleFavoriteProduct && handleFavoriteProduct(!product?.favorite)
+		if (auth) {
+			handleFavoriteProduct && handleFavoriteProduct(!product?.favorite)
+		} else {
+			navigation && navigation.navigate('Login');
+		}
+	}
+
+	const handleChangeIntersection = () => {
+		if (enableIntersection) {
+			setIsIntersectionObserver(true);
+		}
+	}
+
+	const handleClickproduct = () => {
+		if (productAddedToCartLength && product?.maximum_per_order && productAddedToCartLength >= product?.maximum_per_order) {
+			showToast(ToastType.Error, t('PRODUCT_ON_MAXIMUM_ORDER', 'The product is on maximum order'))
+			return
+		}
+		onProductClick?.(product)
 	}
 
 	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}
+		<InView style={{ minHeight: hideAddButton ? 125 : 190 }} triggerOnce={true} onChange={(inView: boolean) => handleChangeIntersection()}>
+			{isIntersectionObserver ? (
+				<CardAnimation
+					onClick={() => handleClickproduct()}
+					style={[
+						styles.container,
+						(isSoldOut || maxProductQuantity <= 0) && styles.soldOutBackgroundStyle,
+						(style && { ...style })
+					]}
+				>
+					<View style={{ flexDirection: 'row' }}>
+						{productAddedToCartLength > 0 && (
+							<QuantityContainer style={[styles.quantityContainer, {
+								transform: [{ translateX: 25 }, { translateY: hideAddButton ? -25 : -55 }],
+							}]}>
+								<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 && (
+									<LottieAnimation
+										type='favorite'
+										onClick={handleChangeFavorite}
+										initialValue={product?.favorite ? 0.75 : 0}
+										toValue={product?.favorite ? 0 : 0.75}
+										disableAnimation={!auth}
+										iconProps={{ color: theme.colors.danger5, size: 18 }}
+										isActive={product?.favorite}
+									/>
+								)}
+							</View>
+							<PricesContainer>
+								{!!product?.price && (
+									<OText color={theme.colors.primary}>{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 ? (
+								<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>
+						)}
+					</View>
+					{!hideAddButton && (
+						<OButton
+							onClick={() => handleClickproduct()}
+							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')}
 						/>
-					</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={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>
+				</CardAnimation>
+			) : (
+				<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 }}>
+								<PlaceholderLine width={60} style={{ marginBottom: 15 }} />
+								<PlaceholderLine width={20} />
+							</Placeholder>
+							<PlaceholderLine
+								width={24}
+								height={70}
+								style={{ marginLeft: 10, marginBottom: 10 }}
+							/>
+						</View>
+						<PlaceholderLine
+							height={52}
+						/>
+					</Placeholder>
+				</View>
 			)}
-		</CardContainer>
+		</InView>
 	);
-};
+}, SingleProductCardPropsAreEqual);
 
 export const SingleProductCard = (props: SingleProductCardParams) => {
 	const singleProductCardProps = {
 		...props,
-		UIComponent: SinguleProductCardUI
+		UIComponent: SingleProductCardUI
 	}
 	return <SingleProductCardController {...singleProductCardProps} />
 }

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

@@ -1,14 +1,5 @@
 import styled, { css } from 'styled-components/native'
 
-export const CardContainer = styled.TouchableOpacity`
-  flex: 1;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  padding: 12px;
-  border-radius: 10px;
-  position: relative;
-`
 export const CardInfo = styled.View`
   padding-start: 3px;
   flex: 1;
@@ -23,7 +14,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/SingleProductReview/index.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react'
-import { useLanguage } from 'ordering-components/native'
-import { OText, OButton, OInput } from '../shared'
+import { useLanguage, useUtils } from 'ordering-components/native'
+import { OText, OButton, OInput, OIcon } from '../shared'
 import { StyleSheet, TouchableOpacity, View } from 'react-native'
 import AntDesignIcons from 'react-native-vector-icons/AntDesign'
 import { useTheme } from 'styled-components/native'
@@ -14,7 +14,9 @@ import {
   LikeHandsActionContainer,
   LikeHandsButton,
   CommentsButtonGroup,
+  LogoWrapper,
 } from './styles'
+import FastImage from 'react-native-fast-image'
 
 export const SingleProductReview = (props: SingleProductReviewParams) => {
   const {
@@ -25,6 +27,7 @@ export const SingleProductReview = (props: SingleProductReviewParams) => {
 
   const [, t] = useLanguage()
   const theme = useTheme()
+  const [{ optimizeImage }] = useUtils()
 
   const styles = StyleSheet.create({
     inputTextArea: {
@@ -40,6 +43,12 @@ export const SingleProductReview = (props: SingleProductReviewParams) => {
       justifyContent: 'center',
       marginVertical: 10,
     },
+    productStyle: {
+      width: 80,
+      height: 80,
+      marginLeft: 'auto',
+      marginRight: 'auto'
+    }
   })
 
   const [comments, setComments] = useState<Array<any>>([])
@@ -55,6 +64,12 @@ export const SingleProductReview = (props: SingleProductReviewParams) => {
     return found
   }
 
+  const handleChangeQualification = (index: number) => {
+    if (qualification === index) return
+    setQualification(index)
+    setComments([])
+  }
+
   const handleChangeComment = (commentItem: any) => {
     const found = comments.find((comment: any) => comment?.key === commentItem.key)
     if (found) {
@@ -100,16 +115,34 @@ export const SingleProductReview = (props: SingleProductReviewParams) => {
   return (
     <>
       <ProductContainer>
+        <LogoWrapper>
+          {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}
+              width={80}
+              height={80}
+            />
+          )}
+        </LogoWrapper>
         <ProductHeader>
           <OText numberOfLines={1} style={{ flex: 1 }} color={theme.colors.textNormal}>{product?.name}</OText>
           <LikeHandsActionContainer>
             <LikeHandsButton
               isLike
-              onPress={() => setQualification(5)}
+              onPress={() => handleChangeQualification(5)}
             >
               <AntDesignIcons name='like2' size={20} color={qualification === 5 ? theme.colors.primary : theme.colors.lightGray} />
             </LikeHandsButton>
-            <LikeHandsButton onPress={() => setQualification(1)}>
+            <LikeHandsButton onPress={() => handleChangeQualification(1)}>
               <AntDesignIcons name='dislike2' size={20} color={qualification === 1 ? theme.colors.primary : theme.colors.lightGray} />
             </LikeHandsButton>
           </LikeHandsActionContainer>
@@ -129,7 +162,7 @@ export const SingleProductReview = (props: SingleProductReviewParams) => {
               style={{ height: 35, paddingLeft: 5, paddingRight: 5, marginHorizontal: 3, marginVertical: 10 }}
               imgRightSrc={isSelectedComment(commentItem.key) ? theme.images.general.close : null}
               imgRightStyle={{ tintColor: theme.colors.white, right: 5, margin: 5 }}
-              onClick={() => handleChangeComment(commentItem) }
+              onClick={() => handleChangeComment(commentItem)}
             />
           ))}
         </CommentsButtonGroup>

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

@@ -15,6 +15,18 @@ export const LikeHandsActionContainer = styled.View`
   flex-direction: row;
 `
 
+export const LogoWrapper = styled.View`
+  shadowRadius: 3;
+  shadowOffset: { width: 1, height: 4 };
+  elevation: 3;
+  borderRadius: 8;
+  shadowOpacity: 0.1;
+  overflow: hidden;
+  width: 80;
+  marginLeft: auto;
+  marginRight: auto;
+`
+
 export const LikeHandsButton = styled.TouchableOpacity`
   ${(props: any) => props.isLike && css`
     margin-horizontal: 15px;

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

@@ -61,17 +61,25 @@ 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)
-			const { paymentMethod } = await createPaymentMethod(params);
+			const { paymentMethod, error } = await createPaymentMethod(params);
+
+      if (error) {
+        setErrors(error?.message);
+        setCreatePmLoading(false)
+        return
+      }
 
 			setCreatePmLoading(false)
 			handleSource && handleSource({
@@ -94,16 +102,16 @@ 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);

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

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react'
-import { Platform, StyleSheet, View } from 'react-native'
+import { Platform, StyleSheet, TouchableOpacity, View } from 'react-native'
 import {
 	UpsellingPage as UpsellingPageController,
 	useUtils,
@@ -21,6 +21,7 @@ import {
 import { OrderSummary } from '../OrderSummary';
 import { ScrollView } from 'react-native-gesture-handler';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import AntDesignIcon from 'react-native-vector-icons/AntDesign'
 
 const UpsellingProductsUI = (props: UpsellingProductsParams) => {
 	const {
@@ -71,9 +72,15 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
 		},
 		btnBackArrow: {
 			borderWidth: 0,
+			width: 26,
+			height: 26,
 			backgroundColor: theme.colors.clear,
+			borderColor: theme.colors.clear,
 			shadowColor: theme.colors.clear,
-			padding: 40,
+			paddingLeft: 0,
+			paddingRight: 0,
+			marginLeft: 20,
+			marginBottom: 10
 		},
 	})
 
@@ -139,7 +146,7 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
 												</AddButton>
 											</View>
 											<View>
-												<OIcon url={product.images} style={styles.imageStyle} />
+												<OIcon url={product?.images || theme?.images?.dummies?.product} style={styles.imageStyle} />
 											</View>
 										</Item>
 									)) : (
@@ -161,11 +168,14 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
 			<>
 				<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 }}
+						icon={AntDesignIcon}
+						iconProps={{
+							name: 'arrowleft',
+							size: 26
+						}}
 					/>
 				</View>
 				<ScrollView style={{ marginTop: 10, marginBottom: props.isPage ? 40 : bottom + (Platform.OS == 'ios' ? 96 : 130) }} showsVerticalScrollIndicator={false}>