ordering-ui-react-native 0.17.0 → 0.17.1-release

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

@@ -5,18 +5,21 @@ import {
 	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, Image, Animated } from 'react-native';
+import { CardInfo, SoldOut, QuantityContainer, PricesContainer, RibbonBox, LogoWrapper, TagsContainer } from './styles';
+import { ScrollView, StyleSheet, TouchableWithoutFeedback, View } from 'react-native';
 import { InView } from 'react-native-intersection-observer'
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
-import { OButton, OText } from '../shared';
+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 { lightenDarkenColor, shape } from '../../utils';
+import { LottieAnimation } from '../LottieAnimation';
+import { CardAnimation } from '../shared/CardAnimation'
 
 function SingleProductCardPropsAreEqual(prevProps: any, nextProps: any) {
 	return JSON.stringify(prevProps.product) === JSON.stringify(nextProps.product) &&
@@ -36,19 +39,34 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 		enableIntersection,
 		navigation,
 		businessId,
-		isPreviously
+		isPreviously,
+		viewString,
+		businessSingleId
 	} = props;
 
 	const theme = useTheme();
 	const hideAddButton = theme?.business_view?.components?.products?.components?.add_to_cart_button?.hidden ?? true
+	const isChewLayout = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
+	const hideProductDescription = theme?.business_view?.components?.products?.components?.product?.components?.description?.hidden
+	const hideProductLogo = viewString
+		? theme?.[viewString]?.components?.cart?.components?.products?.image?.hidden
+		: theme?.business_view?.components?.products?.components?.product?.components?.image?.hidden
+	const textSize = isChewLayout ? 12 : 10
+	const logoPosition = theme?.business_view?.components?.products?.components?.product?.components?.image?.position
 
 	const styles = StyleSheet.create({
 		container: {
 			borderWidth: 1,
-			borderRadius: 7.6,
 			borderColor: theme.colors.border,
 			marginBottom: 25,
-			minHeight: hideAddButton ? 100 : 165
+			minHeight: hideAddButton ? 100 : 165,
+			flex: 1,
+			flexDirection: hideAddButton ? 'row' : 'column',
+			justifyContent: 'space-between',
+			alignItems: 'center',
+			padding: 12,
+			borderRadius: 10,
+			position: 'relative'
 		},
 		titleWrapper: {
 			flexDirection: 'row',
@@ -68,8 +86,8 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 			textTransform: 'uppercase',
 		},
 		productStyle: {
-			width: 75,
-			height: 75,
+			width: 85,
+			height: 85,
 			borderRadius: 7.6
 		},
 		quantityContainer: {
@@ -87,7 +105,12 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 			color: '#808080',
 			textDecorationLine: 'line-through',
 			marginLeft: 7,
-			marginRight: 7
+			marginRight: 0
+		},
+		productTagsStyle: {
+			width: 30,
+			height: 30,
+			marginRight: 5
 		}
 	});
 
@@ -96,6 +119,7 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 	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';
@@ -136,22 +160,29 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 		}
 	}
 
+	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 (
 		<InView style={{ minHeight: hideAddButton ? 125 : 190 }} triggerOnce={true} onChange={(inView: boolean) => handleChangeIntersection()}>
 			{isIntersectionObserver ? (
-				<CardContainer
-					showAddButton={!hideAddButton}
+				<CardAnimation
+					onClick={() => handleClickproduct()}
 					style={[
 						styles.container,
 						(isSoldOut || maxProductQuantity <= 0) && styles.soldOutBackgroundStyle,
-						(style && { ...style }),
+						(style && { ...style })
 					]}
-					onPress={() => onProductClick?.(product)}
 				>
-					<View style={{ flexDirection: 'row' }}>
+					<View style={{ flexDirection: logoPosition === 'left' ? 'row-reverse' : 'row' }}>
 						{productAddedToCartLength > 0 && (
-							<QuantityContainer style={[styles.quantityContainer, {
-								transform: [{ translateX: 25 }, { translateY: hideAddButton ? -25 : -55 }],
+							<QuantityContainer businessSingleId={businessSingleId} style={[styles.quantityContainer, {
+								transform: [{ translateX: 25 }, { translateY: -25 }],
 							}]}>
 								<OText size={12} color={theme.colors.white}>{productAddedToCartLength.toString()}</OText>
 							</QuantityContainer>
@@ -159,7 +190,7 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 						<CardInfo>
 							<View style={styles.titleWrapper}>
 								<OText
-									size={12}
+									size={textSize + 2}
 									weight={'500'}
 									numberOfLines={1}
 									ellipsizeMode="tail"
@@ -167,34 +198,62 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 									{product?.name}
 								</OText>
 								{!isPreviously && (
-									<TouchableOpacity
-										onPress={handleChangeFavorite}
-									>
-										<IconAntDesign
-											name={product?.favorite ? 'heart' : 'hearto'}
-											color={theme.colors.danger5}
-											size={18}
-										/>
-									</TouchableOpacity>
+									<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>
-								<OText color={theme.colors.primary}>{product?.price ? parsePrice(product?.price) : ''}</OText>
-								{product?.offer_price !== null && product?.in_offer && (
+								{!!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>
 								)}
+								{!isPreviously && product?.tags && product?.tags.length > 0 && (
+									<ScrollView
+										showsVerticalScrollIndicator={false}
+										showsHorizontalScrollIndicator={false}
+										horizontal
+										style={{ marginLeft: 10 }}
+										contentContainerStyle={{ flexGrow: 1 }}
+									>
+										{product?.tags.map((tag: any, i: any) => (
+											<TouchableWithoutFeedback key={i}>
+												<TagsContainer>
+													<FastImage
+														style={styles.productTagsStyle}
+														source={tag.image ? {
+															uri: optimizeImage(tag.image, 'h_250,c_limit'),
+															priority: FastImage.priority.normal,
+														} : theme?.images?.dummies?.product}
+														resizeMode={FastImage.resizeMode.cover}
+													/>
+												</TagsContainer>
+											</TouchableWithoutFeedback>
+										))}
+									</ScrollView>
+								)}
 							</PricesContainer>
-							<OText
-								size={10}
-								numberOfLines={!isPreviously ? 2 : 1}
-								ellipsizeMode="tail"
-								color={theme.colors.textSecondary}
-								style={styles.line15}>
-								{product?.description}
-							</OText>
+							{!hideProductDescription && (
+								<OText
+									size={textSize}
+									numberOfLines={!isPreviously ? 2 : 1}
+									ellipsizeMode="tail"
+									color={theme.colors.textSecondary}
+									style={styles.line15}>
+									{product?.description}
+								</OText>
+							)}
 							{isPreviously && (
 								<OText
-									size={10}
+									size={textSize}
 									numberOfLines={1}
 									ellipsizeMode="tail"
 									color={theme.colors.primary}
@@ -203,17 +262,19 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 								</OText>
 							)}
 						</CardInfo>
-						<LogoWrapper>
-							{product?.ribbon?.enabled && (
+						<LogoWrapper logoPosition={logoPosition}>
+							{!!product?.ribbon?.enabled && (
 								<RibbonBox
 									bgColor={product?.ribbon?.color}
+									colorText={lightenDarkenColor(product?.ribbon?.color)}
+									borderRibbon={lightenDarkenColor(product?.ribbon?.color)}
 									isRoundRect={product?.ribbon?.shape === shape?.rectangleRound}
 									isCapsule={product?.ribbon?.shape === shape?.capsuleShape}
 								>
 									<OText
-										size={10}
+										size={textSize}
 										weight={'400'}
-										color={theme.colors.white}
+										color={lightenDarkenColor(product?.ribbon?.color) ? theme.colors.black : theme.colors.white}
 										numberOfLines={2}
 										ellipsizeMode='tail'
 										lineHeight={13}
@@ -222,13 +283,13 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 									</OText>
 								</RibbonBox>
 							)}
-							{(product?.images || theme?.images?.dummies?.product) && (
+							{!hideProductLogo && (
 								<FastImage
 									style={styles.productStyle}
-									source={{
-										uri: optimizeImage(product?.images || theme?.images?.dummies?.product, 'h_250,c_limit'),
+									source={product?.images ? {
+										uri: optimizeImage(product?.images, 'h_250,c_limit'),
 										priority: FastImage.priority.normal,
-									}}
+									} : theme?.images?.dummies?.product}
 									resizeMode={FastImage.resizeMode.cover}
 								/>
 							)}
@@ -244,11 +305,12 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 					</View>
 					{!hideAddButton && (
 						<OButton
-							onClick={() => onProductClick?.(product)}
+							onClick={() => handleClickproduct()}
 							style={{
 								width: '100%',
 								borderRadius: 7.6,
 								marginTop: 10,
+								height: 40
 
 							}}
 							bgColor={isSoldOut ? '#B8B8B8' : theme?.colors?.white}
@@ -257,7 +319,7 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 							text={t('ADD', 'Add')}
 						/>
 					)}
-				</CardContainer>
+				</CardAnimation>
 			) : (
 				<View style={{ marginBottom: 28, padding: 12, height: hideAddButton ? 125 : 165 }}>
 					<Placeholder style={{ padding: 5 }} Animation={Fade}>

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

@@ -1,17 +1,9 @@
 import styled, { css } from 'styled-components/native'
 
-export const CardContainer = styled.TouchableOpacity`
-  flex: 1;
-  flex-direction: ${(props : any) => props.showAddButton ? 'column' : '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;
+  min-height: 85px;
 `
 export const SoldOut = styled.View`
   position: absolute;
@@ -26,15 +18,32 @@ export const QuantityContainer = styled.View`
   background: ${({ theme }: any) => theme.colors.primary};
   align-items: center;
   justify-content: center;
+  ${({ businessSingleId }: any) => businessSingleId ? css`
+    left: 0;
+  ` : css`
+    right: 0;
+  `}
 `
 export const PricesContainer = styled.View`
   flex-direction: row;
   align-items: center;
+  margin-vertical: 6px;
 `
 
 export const LogoWrapper = styled.View`
   position: relative;
-  margin-left: 12px;
+  margin-left: ${(props) => !props.logoPosition || props.logoPosition === 'right' ? '12px' : '0px'};
+  margin-right: ${(props) => props.logoPosition === 'right' ? '0px' : '12px'};
+`
+export const WrapTags = styled.View`
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  margin-left: 10px;
+`
+export const TagsContainer = styled.View`
+    display: flex;
+    margin: auto;
 `
 
 export const RibbonBox = styled.View`
@@ -45,16 +54,21 @@ export const RibbonBox = styled.View`
   background-color: ${(props: any) => props.theme.colors.primary};
   padding: 1px 8px;
   max-width: 60px;
-
   ${(props: any) => props.bgColor && css`
     background-color: ${props.bgColor};
   `}
-
   ${(props: any) => props.isRoundRect && css`
     border-radius: 7.6px;
   `}
-
   ${(props: any) => props.isCapsule && css`
     border-radius: 50px;
   `}
+
+  ${(props: any) => props.colorText && css`
+    color: ${props.colorText ? 'black' : 'white'};
+  `}
+
+  ${(props: any) => props.borderRibbon && css`
+    border: 1px solid ${props.borderRibbon ? 'black' : 'white'};
+  `}
 `

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;
+  border-radius: 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/StripeCardsList/index.tsx

@@ -128,7 +128,7 @@ const styles = StyleSheet.create({
 	},
 	cardsList: {
 		width: '100%',
-		maxHeight: 130
+		maxHeight: 150
 	},
 })
 

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

@@ -177,7 +177,7 @@ const StripeElementsFormUI = (props: any) => {
 				<View style={{ flex: 1 }}>
 					<StripeProvider
 						publishableKey={publicKey}
-						merchantIdentifier={`merchant.${merchantId}`}
+						merchantIdentifier={merchantId}
 						urlScheme={merchantId}
 					>
 						{methodsPay?.includes(paymethod) ? (
@@ -195,6 +195,9 @@ const StripeElementsFormUI = (props: any) => {
 								cardStyle={{
 									backgroundColor: '#FFFFFF',
 									textColor: '#000000',
+									borderWidth: 1,
+									borderRadius: 8,
+									borderColor: theme.colors.border
 								}}
 								style={{
 									width: '100%',