ordering-ui-react-native 0.16.76 → 0.16.77-release

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

@@ -8,12 +8,10 @@ import {
 import { StyleSheet, TouchableOpacity, View } from 'react-native';
 import { useTheme } from 'styled-components/native';
 import { OIcon, OText, OButton } from '../shared';
-import IconAntDesign from 'react-native-vector-icons/AntDesign'
 import { SingleOrderCardParams } from '../../types';
 import { OAlert } from '../../../../../src/components/shared'
 
 import {
-  Container,
   InnerContainer,
   Logo,
   CardInfoWrapper,
@@ -21,8 +19,11 @@ import {
   ButtonWrapper,
   ContentFooter,
   UnreadMessageCounter,
-  Price
+  Price,
+  MultiLogosContainer
 } from './styles';
+import { LottieAnimation } from '../LottieAnimation';
+import { CardAnimation } from '../shared/CardAnimation';
 
 const SingleOrderCardUI = (props: SingleOrderCardParams) => {
   const {
@@ -46,15 +47,26 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
 
   const [reorderSelected, setReorderSelected] = useState<number | null>(null);
   const [confirm, setConfirm] = useState<any>({ open: false, content: null, handleOnAccept: null, id: null, title: null })
+  const [isPressed, setIsPressed] = useState(false)
 
   const allowedOrderStatus = [1, 2, 5, 6, 10, 11, 12];
 
   const styles = StyleSheet.create({
+    container: {
+      borderRadius: 7.6,
+      marginBottom: 10,
+      paddingVertical: 5,
+    },
     logo: {
       borderRadius: 8,
       width: 64,
       height: 64
     },
+    minilogo: {
+      borderRadius: 8,
+      width: 40,
+      height: 40
+    },
     logoWrapper: {
       overflow: 'hidden',
       backgroundColor: 'white',
@@ -72,9 +84,13 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
       marginRight: 2,
     },
     reorderLoading: {
-      width: 80,
-      height: 40,
-      borderRadius: 10,
+      height: 23,
+      paddingLeft: 20,
+      paddingRight: 20,
+      borderRadius: 23,
+      shadowOpacity: 0,
+      backgroundColor: theme.colors.primary,
+      borderWidth: 0,
     },
     reorderbutton: {
       height: 23,
@@ -100,6 +116,14 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
     infoText: {
       flexDirection: 'row',
       alignItems: 'center'
+    },
+    cardAnimation: {
+      elevation: isPressed ? 2 : 0,
+      shadowColor: '#888',
+      shadowOffset: { width: 0, height: isPressed ? 2 : 0 },
+      shadowRadius: 18,
+      shadowOpacity: isPressed ? 0.8 : 0,
+      borderRadius: 12,
     }
   });
 
@@ -127,11 +151,12 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
           order: {
             id: order?.id,
             business_id: order?.business_id,
-            logo: order?.business?.logo,
+            logo: order?.business?.length > 1 ? order?.business?.map?.((business: any) => business?.logo) : order?.business?.logo,
             driver: order?.driver,
             products: order?.products,
             review: order?.review,
-            user_review: order?.user_review
+            user_review: order?.user_review,
+            business: order?.business
           },
         });
       return
@@ -144,13 +169,16 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
       onNavigationRedirect('OrderDetails', { orderId: order?.uuid });
   };
 
-  const handleClickViewOrder = (uuid: string) => {
+  const handleClickViewOrder = (order: any) => {
     if (isMessageView) {
       handleClickOrder(order?.uuid)
       return
     }
-    onNavigationRedirect &&
-      onNavigationRedirect('OrderDetails', { orderId: uuid });
+    if (order?.cart_group_id) {
+      onNavigationRedirect?.('MultiOrdersDetails', { orderId: order?.cart_group_id });
+    } else {
+      onNavigationRedirect?.('OrderDetails', { orderId: order?.uuid });
+    }
   };
 
   const handleChangeFavorite = () => {
@@ -159,32 +187,65 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
 
   const handleOriginalReorder = () => {
     setConfirm({ ...confirm, open: false, title: null })
-    setReorderSelected(order?.id);
-    handleReorder && handleReorder(order?.id);
   }
 
+  const hideBusinessLogo = theme?.orders?.components?.business_logo?.hidden
+  const hideDate = theme?.orders?.components?.date?.hidden
+  const hideBusinessName = theme?.orders?.components?.business_name?.hidden
+  const hideOrderNumber = theme?.orders?.components?.order_number?.hidden
+  const hideReviewOrderButton = theme?.orders?.components?.review_order_button?.hidden
+  const hideReorderButton = theme?.orders?.components?.reorder_button?.hidden
+  const hideFavorite = theme?.orders?.components?.favorite?.hidden
+  const hideOrderStatus = theme?.orders?.components?.order_status?.hidden
+
   return (
     <>
-      <Container
-        onPress={() => handleClickViewOrder(order?.uuid)}
-        activeOpacity={0.7}
+      <CardAnimation
+        onClick={() => handleClickViewOrder(order)}
+        style={[styles.container]}
       >
         <InnerContainer>
-          {!!order.business?.logo && (
-            <Logo style={styles.logoWrapper}>
-              <OIcon
-                url={optimizeImage(order.business?.logo, 'h_300,c_limit')}
-                style={styles.logo}
-              />
-            </Logo>
+          {!hideBusinessLogo && (!!order.business?.logo || theme?.images?.dummies?.businessLogo) && (
+            <>
+              {order?.business?.length > 1 ? (
+                <MultiLogosContainer>
+                  {order?.business?.map((business: any, i: number) => i < 2 && (
+                    <Logo
+                      isMulti
+                      key={business?.id}
+                      style={styles.logoWrapper}
+                    >
+                      <OIcon
+                        url={optimizeImage(business?.logo, 'h_300,c_limit')}
+                        src={optimizeImage(!business?.logo && theme?.images?.dummies?.businessLogo, 'h_300,c_limit')}
+                        style={styles.minilogo}
+                      />
+                    </Logo>
+                  ))}
+                  {order?.business?.length > 1 && (order?.business?.length - 2) > 0 && (
+                    <OText mRight={3}> + {order?.business?.length - 2}</OText>
+                  )}
+                </MultiLogosContainer>
+              ) : (
+                <Logo style={styles.logoWrapper}>
+                  <OIcon
+                    url={optimizeImage(order.business?.logo, 'h_300,c_limit')}
+                    src={optimizeImage(!order.business?.logo && theme?.images?.dummies?.businessLogo, 'h_300,c_limit')}
+                    style={styles.logo}
+                  />
+                </Logo>
+              )}
+            </>
           )}
           <CardInfoWrapper>
             <ContentHeader>
-              <View style={{ flex: 1 }}>
-                <OText size={12} lineHeight={18} weight={'600'} numberOfLines={1} ellipsizeMode={'tail'}>
-                  {order.business?.name}
-                </OText>
-              </View>
+              {(order?.business?.length > 1 && !hideOrderNumber) || (!order?.business?.length && !hideBusinessName) && (
+                <View style={{ flex: 1 }}>
+                  <OText size={12} lineHeight={18} weight={'600'} numberOfLines={1} ellipsizeMode={'tail'}>
+                    {order?.business?.length > 1 ? `${t('GROUP_ORDER', 'Group Order')} ${t('No', 'No')}. ${order?.cart_group_id}` : order.business?.name}
+                  </OText>
+                </View>
+              )}
               {!!!pastOrders && (
                 <>
                   {isMessageView ? (
@@ -208,7 +269,8 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
               )}
               {!!pastOrders && (
                 <ButtonWrapper>
-                  {allowedOrderStatus.includes(parseInt(order?.status)) &&
+                  {!hideReviewOrderButton &&
+                    allowedOrderStatus.includes(parseInt(order?.status)) &&
                     !order.review && (
                       <TouchableOpacity
                         onPress={() => handleClickOrderReview(order)}
@@ -218,7 +280,7 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
                         </OText>
                       </TouchableOpacity>
                     )}
-                  {order.cart && (
+                  {order.cart && !hideReorderButton && (
                     <OButton
                       text={t('REORDER', 'Reorder')}
                       imgRightSrc={''}
@@ -238,7 +300,7 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
             <ContentFooter>
               <View style={{ flex: 1 }}>
                 <View style={styles.infoText}>
-                  {!!!pastOrders && (
+                  {(!!!pastOrders || order?.business?.length > 1) && !hideOrderNumber && (
                     <>
                       <OText
                         size={10}
@@ -248,7 +310,7 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
                         lineHeight={15}
                         numberOfLines={1}
                       >
-                        {t('ORDER_NO', 'Order No') + '.'}
+                        {order?.business?.length > 1 ? order?.business?.length : (t('ORDER_NO', 'Order No') + '.')}
                       </OText>
                       <OText
                         size={10}
@@ -257,43 +319,50 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
                         lineHeight={15}
                         numberOfLines={1}
                       >
-                        {order.id + ` \u2022 `}
+                        {order?.business?.length > 1 ? t('ORDERS', 'orders') + ' \u2022 ' : order.id + ` \u2022 `}
                       </OText>
                     </>
                   )}
+                  {!hideDate && (
+                    <OText
+                      size={10}
+                      lineHeight={15}
+                      color={theme.colors.textSecondary}
+                      style={{ marginVertical: 3 }}
+                      numberOfLines={1}>
+                      {
+                        pastOrders
+                          ? order?.delivery_datetime_utc ? parseDate(order?.delivery_datetime_utc) : parseDate(order?.delivery_datetime, { utc: false })
+                          : order?.eta_time + 'min'
+                      }
+                    </OText>
+                  )}
+                </View>
+                {!hideOrderStatus && (
                   <OText
+                    color={theme.colors.primary}
                     size={10}
                     lineHeight={15}
-                    color={theme.colors.textSecondary}
-                    style={{ marginVertical: 3 }}
                     numberOfLines={1}>
-                    {order?.delivery_datetime_utc ? parseDate(order?.delivery_datetime_utc) : parseDate(order?.delivery_datetime, { utc: false })}
+                    {getOrderStatus(order.status)?.value}
                   </OText>
-                </View>
-                <OText
-                  color={theme.colors.primary}
-                  size={10}
-                  lineHeight={15}
-                  numberOfLines={1}>
-                  {getOrderStatus(order.status)?.value}
-                </OText>
+                )}
               </View>
-              {!isMessageView && (
-                <TouchableOpacity
-                  onPress={handleChangeFavorite}
-                  style={{ marginTop: 5 }}
-                >
-                  <IconAntDesign
-                    name={order?.favorite ? 'heart' : 'hearto'}
-                    color={theme.colors.danger5}
-                    size={16}
-                  />
-                </TouchableOpacity>
+              {!isMessageView && !order?.business?.length && !hideFavorite && (
+                <LottieAnimation
+                  type='favorite'
+                  onClick={handleChangeFavorite}
+                  initialValue={order?.favorite ? 0.75 : 0}
+                  toValue={order?.favorite ? 0 : 0.75}
+                  style={{ marginBottom: 5 }}
+                  iconProps={{ color: theme.colors.danger5, size: 16, style: { top: 7 } }}
+                  isActive={order?.favorite}
+                />
               )}
             </ContentFooter>
           </CardInfoWrapper>
         </InnerContainer>
-      </Container>
+      </CardAnimation>
       <OAlert
         open={confirm.open}
         title={confirm.title}

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

@@ -1,11 +1,4 @@
-import styled from 'styled-components/native'
-
-export const Container = styled.TouchableOpacity`
-  border-radius: 7.6px;
-	box-shadow: 0 1px 2px #0000001A;
-  margin-bottom: 10px;
-  padding-vertical: 5px;
-`
+import styled, { css } from 'styled-components/native'
 
 export const InnerContainer = styled.View`
   flex-direction: row;
@@ -15,6 +8,9 @@ export const InnerContainer = styled.View`
 export const Logo = styled.View`
 	border-radius: 7.6px;
   margin-right: 12px;
+  ${({ isMulti } : any) => isMulti && css`
+      margin-right: 5px;
+    `}
 `
 
 export const CardInfoWrapper = styled.View`
@@ -52,3 +48,9 @@ export const Price = styled.View`
   margin-left: 10px;
   width: 30%;
 `
+
+export const MultiLogosContainer = styled.View`
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+`

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

@@ -1,22 +1,25 @@
-import React, { useState, useRef, useEffect } 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, 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 { LottieAnimation } from '../LottieAnimation';
+import { CardAnimation } from '../shared/CardAnimation'
 
 function SingleProductCardPropsAreEqual(prevProps: any, nextProps: any) {
 	return JSON.stringify(prevProps.product) === JSON.stringify(nextProps.product) &&
@@ -36,21 +39,33 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 		enableIntersection,
 		navigation,
 		businessId,
-		isPreviously
+		isPreviously,
+		viewString
 	} = 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 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: 28,
-			minHeight: 165
+			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',
@@ -70,8 +85,8 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 			textTransform: 'uppercase',
 		},
 		productStyle: {
-			width: 75,
-			height: 75,
+			width: 85,
+			height: 85,
 			borderRadius: 7.6
 		},
 		quantityContainer: {
@@ -89,7 +104,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
 		}
 	});
 
@@ -98,6 +118,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';
@@ -124,14 +145,6 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 		maxCartProductInventory,
 	);
 
-	const fadeIn = () => {
-		Animated.timing(fadeAnim, {
-			toValue: 1,
-			duration: 500,
-			useNativeDriver: true
-		}).start();
-	};
-
 	const handleChangeFavorite = () => {
 		if (auth) {
 			handleFavoriteProduct && handleFavoriteProduct(!product?.favorite)
@@ -141,30 +154,34 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 	}
 
 	const handleChangeIntersection = () => {
-		setIsIntersectionObserver(true);
-		fadeIn();
+		if (enableIntersection) {
+			setIsIntersectionObserver(true);
+		}
 	}
 
-	useEffect(() => {
-		if (!enableIntersection) fadeIn()
-	}, [enableIntersection])
+	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: 200 }} triggerOnce={true} onChange={(inView: boolean) => handleChangeIntersection()}>
+		<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: -55 }],
+								transform: [{ translateX: 25 }, { translateY: -25 }],
 							}]}>
 								<OText size={12} color={theme.colors.white}>{productAddedToCartLength.toString()}</OText>
 							</QuantityContainer>
@@ -172,7 +189,7 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 						<CardInfo>
 							<View style={styles.titleWrapper}>
 								<OText
-									size={12}
+									size={textSize + 2}
 									weight={'500'}
 									numberOfLines={1}
 									ellipsizeMode="tail"
@@ -180,34 +197,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}
@@ -216,15 +261,15 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 								</OText>
 							)}
 						</CardInfo>
-						<LogoWrapper>
-							{product?.ribbon?.enabled && (
+						<LogoWrapper logoPosition={logoPosition}>
+							{!!product?.ribbon?.enabled && (
 								<RibbonBox
 									bgColor={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}
 										numberOfLines={2}
@@ -235,24 +280,15 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 									</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>
+							{!hideProductLogo && (
+								<FastImage
+									style={styles.productStyle}
+									source={product?.images ? {
+										uri: optimizeImage(product?.images, 'h_250,c_limit'),
+										priority: FastImage.priority.normal,
+									} : theme?.images?.dummies?.product}
+									resizeMode={FastImage.resizeMode.cover}
+								/>
 							)}
 						</LogoWrapper>
 
@@ -266,11 +302,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}
@@ -279,9 +316,9 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 							text={t('ADD', 'Add')}
 						/>
 					)}
-				</CardContainer>
+				</CardAnimation>
 			) : (
-				<View style={{ minHeight: 165, marginBottom: 28, padding: 12 }}>
+				<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 }}>