react-native-chatbot-ai 0.1.27 → 0.1.29

package/src/components/product/CardHorizontal.tsx

@@ -11,10 +11,10 @@ import {
   KPromotionTag,
 } from '@droppii/libs';
 import { PTManager } from '../../utils/prototype';
-import { useCallback, useMemo } from 'react';
+import { memo, useCallback, useMemo } from 'react';
 import { StyleSheet } from 'react-native';
 import useProductsStore from '../../store/products';
-import { PRODUCT_STATUSES } from '../../types';
+import { IProductItem, PRODUCT_STATUSES } from '../../types';
 import { useChatContext } from '../../context/ChatContext';
 // import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 import { GAEvents } from '../../constants/events';
@@ -26,335 +26,352 @@ interface IProductHorizontalCardProps {
   index?: number;
 }
 
-const ProductHorizontalCard = (props: IProductHorizontalCardProps) => {
-  const { productId, messageId, index } = props;
-  const item = useProductsStore((state) =>
-    state.products.find((p) => p.id === productId)
-  );
-  const onAddToCart = useChatContext()?.onAddToCart;
-  const onBuyNow = useChatContext()?.onBuyNow;
-  const onNavigateToProduct = useChatContext()?.onNavigateToProduct;
-  const logGA = useChatContext()?.logGA;
+const ProductHorizontalCardWrapper = memo(
+  (props: IProductHorizontalCardProps) => {
+    const { productId } = props;
+    const item = useProductsStore((state) => state.products[productId || '']);
 
-  const {
-    avgRating,
-    discountPercentage,
-    gifts = [],
-    id = '',
-    image,
-    images,
-    isFavorite,
-    minPrice = 0,
-    name = '',
-    originalSellingPrice,
-    outOfStock,
-    productStatusId,
-    totalRating,
-    totalSold,
-    vouchers,
-  } = item || {};
+    if (!item) {
+      return null;
+    }
 
-  const imageUrl = image || images?.['410x410']?.[0]?.url || '';
-  const mVouchers = useMemo(() => {
-    const rs: any = (vouchers || [])
-      .map((voucher) => ({
-        ...voucher,
-        discount:
-          voucher.resultType === 'PERCENTAGE_OFF'
-            ? `-${PTManager.number.formatShortened(
-                Math.round(Number(voucher.value || 0)),
-                'round',
-                {
-                  decimalSeparators: ',',
-                  precisionValue: 0,
-                }
-              )}%`
-            : `-${PTManager.number.formatShortened(
-                Math.round(Number(voucher.value || 0)),
-                'round',
-                {
-                  ignoreUnit: false,
-                  decimalSeparators: ',',
-                  precisionValue: 0,
-                }
-              )}`,
-      }))
-      .sort((a, b) => {
-        if (a.type > b.type) {
-          return 1;
-        }
-        if (a.type < b.type) {
-          return -1;
-        }
-        return 0;
-      })
-      .slice(0, 2);
+    return <ProductHorizontalCard item={item} {...props} />;
+  }
+);
+ProductHorizontalCardWrapper.displayName = 'ProductHorizontalCardWrapper';
 
-    if (gifts?.length > 0) {
-      rs.push({
-        type: 'GIFT',
-        discount: rs.length >= 2 ? '' : 'Quà tặng',
-        id: 'GIFT',
-        resultType: 'GIFT',
-      });
-    }
-    return rs;
-  }, [gifts.length, vouchers]);
+const ProductHorizontalCard = memo(
+  ({
+    item,
+    messageId,
+    index,
+  }: IProductHorizontalCardProps & { item: IProductItem }) => {
+    const onAddToCart = useChatContext()?.onAddToCart;
+    const onBuyNow = useChatContext()?.onBuyNow;
+    const onNavigateToProduct = useChatContext()?.onNavigateToProduct;
+    const logGA = useChatContext()?.logGA;
 
-  const totalSoldTxt = useMemo(() => {
-    return totalSold !== undefined && totalSold > 0
-      ? `Đã bán ${PTManager.number.formatShortened(totalSold, 'floor', {
-          decimalSeparators: ',',
-        })}`
-      : undefined;
-  }, [totalSold]);
+    const {
+      avgRating,
+      discountPercentage,
+      gifts = [],
+      id = '',
+      image,
+      images,
+      isFavorite,
+      minPrice = 0,
+      name = '',
+      originalSellingPrice,
+      outOfStock,
+      productStatusId,
+      totalRating,
+      totalSold,
+      vouchers,
+    } = item || {};
 
-  const showPriceDiscount = useMemo(() => {
-    return (
-      minPrice !== originalSellingPrice && Number(originalSellingPrice) > 0
-    );
-  }, [minPrice, originalSellingPrice]);
+    const imageUrl = image || images?.['410x410']?.[0]?.url || '';
+    const mVouchers = useMemo(() => {
+      const rs: any = (vouchers || [])
+        .map((voucher) => ({
+          ...voucher,
+          discount:
+            voucher.resultType === 'PERCENTAGE_OFF'
+              ? `-${PTManager.number.formatShortened(
+                  Math.round(Number(voucher.value || 0)),
+                  'round',
+                  {
+                    decimalSeparators: ',',
+                    precisionValue: 0,
+                  }
+                )}%`
+              : `-${PTManager.number.formatShortened(
+                  Math.round(Number(voucher.value || 0)),
+                  'round',
+                  {
+                    ignoreUnit: false,
+                    decimalSeparators: ',',
+                    precisionValue: 0,
+                  }
+                )}`,
+        }))
+        .sort((a, b) => {
+          if (a.type > b.type) {
+            return 1;
+          }
+          if (a.type < b.type) {
+            return -1;
+          }
+          return 0;
+        })
+        .slice(0, 2);
+
+      if (gifts?.length > 0) {
+        rs.push({
+          type: 'GIFT',
+          discount: rs.length >= 2 ? '' : 'Quà tặng',
+          id: 'GIFT',
+          resultType: 'GIFT',
+        });
+      }
+      return rs;
+    }, [gifts.length, vouchers]);
 
-  const originalPriceText = useMemo(() => {
-    return typeof originalSellingPrice === 'number'
-      ? PTManager.number.formatCurrency(originalSellingPrice)
-      : 'Chưa nhập giá';
-  }, [originalSellingPrice]);
+    const totalSoldTxt = useMemo(() => {
+      return totalSold !== undefined && totalSold > 0
+        ? `Đã bán ${PTManager.number.formatShortened(totalSold, 'floor', {
+            decimalSeparators: ',',
+          })}`
+        : undefined;
+    }, [totalSold]);
 
-  const isSuspended = useMemo(() => {
-    return productStatusId === PRODUCT_STATUSES.SUSPENDED;
-  }, [productStatusId]);
+    const showPriceDiscount = useMemo(() => {
+      return (
+        minPrice !== originalSellingPrice && Number(originalSellingPrice) > 0
+      );
+    }, [minPrice, originalSellingPrice]);
 
-  const isSoldOut = useMemo(() => {
-    return !!outOfStock;
-  }, [outOfStock]);
+    const originalPriceText = useMemo(() => {
+      return typeof originalSellingPrice === 'number'
+        ? PTManager.number.formatCurrency(originalSellingPrice)
+        : 'Chưa nhập giá';
+    }, [originalSellingPrice]);
 
-  const isEnabledAddToCart = useMemo(() => {
-    return !isSuspended && !isSoldOut && typeof onAddToCart === 'function';
-  }, [isSuspended, isSoldOut, onAddToCart]);
+    const isSuspended = useMemo(() => {
+      return productStatusId === PRODUCT_STATUSES.SUSPENDED;
+    }, [productStatusId]);
 
-  const isEnabledBuyNow = useMemo(() => {
-    return !isSuspended && !isSoldOut && typeof onBuyNow === 'function';
-  }, [isSuspended, isSoldOut, onBuyNow]);
+    const isSoldOut = useMemo(() => {
+      return !!outOfStock;
+    }, [outOfStock]);
 
-  const onPress = useCallback(() => {
-    if (!item) return;
-    onNavigateToProduct?.(item);
-    logGA(GAEvents.chatDetailProductCardTap, {
-      conversation_id: useSessionStore.getState().sessionId,
-      product_id: item.id,
-      position_in_list: index,
-    });
-  }, [onNavigateToProduct, logGA, item, index]);
+    const isEnabledAddToCart = useMemo(() => {
+      return !isSuspended && !isSoldOut && typeof onAddToCart === 'function';
+    }, [isSuspended, isSoldOut, onAddToCart]);
 
-  const onPressAddToCart = useCallback(() => {
-    if (!item) return;
-    onAddToCart?.(item);
-    logGA(GAEvents.chatDetailAddToCartBtnTap, {
-      conversation_id: useSessionStore.getState().sessionId,
-      product_id: item.id,
-      position_in_list: index,
-      pdp_id: item.pdpId,
-      message_chat_id: messageId,
-    });
-  }, [onAddToCart, logGA, item, messageId, index]);
+    const isEnabledBuyNow = useMemo(() => {
+      return !isSuspended && !isSoldOut && typeof onBuyNow === 'function';
+    }, [isSuspended, isSoldOut, onBuyNow]);
 
-  const onPressBuyNow = useCallback(() => {
-    if (!item) return;
-    onBuyNow?.(item);
-    logGA(GAEvents.chatDetailBuyNowBtnTap, {
-      conversation_id: useSessionStore.getState().sessionId,
-      product_id: item.id,
-      position_in_list: -1, //TODO: fix
-      pdp_id: item.pdpId,
-      message_chat_id: messageId,
-    });
-  }, [onBuyNow, logGA, item, messageId]);
+    const onPress = useCallback(() => {
+      if (!item) return;
+      onNavigateToProduct?.(item);
+      logGA(GAEvents.chatDetailProductCardTap, {
+        conversation_id: useSessionStore.getState().sessionId,
+        product_id: item.id,
+        position_in_list: index,
+      });
+    }, [onNavigateToProduct, logGA, item, index]);
+
+    const onPressAddToCart = useCallback(() => {
+      if (!item) return;
+      onAddToCart?.(item);
+      logGA(GAEvents.chatDetailAddToCartBtnTap, {
+        conversation_id: useSessionStore.getState().sessionId,
+        product_id: item.id,
+        position_in_list: index,
+        pdp_id: item.pdpId,
+        message_chat_id: messageId,
+      });
+    }, [onAddToCart, logGA, item, messageId, index]);
 
-  // if (!item) {
-  //   return (
-  //     <KContainer.View style={styles.container}>
-  //       <SkeletonPlaceholder borderRadius={4} speed={2000} direction="right">
-  //         <SkeletonPlaceholder.Item flexDirection="row" gap={12}>
-  //           <SkeletonPlaceholder.Item
-  //             width={72}
-  //             height={72}
-  //             borderRadius={12}
-  //           />
-  //           <SkeletonPlaceholder.Item
-  //             gap={12}
-  //             width={KDims.width - 160}
-  //             justifyContent="space-between"
-  //           >
-  //             <SkeletonPlaceholder.Item
-  //               height={16}
-  //               width={KDims.width / 2}
-  //               borderRadius={4}
-  //             />
-  //             <SkeletonPlaceholder.Item
-  //               height={16}
-  //               width={160}
-  //               borderRadius={4}
-  //             />
-  //             <SkeletonPlaceholder.Item
-  //               height={16}
-  //               width={80}
-  //               borderRadius={4}
-  //             />
-  //           </SkeletonPlaceholder.Item>
-  //         </SkeletonPlaceholder.Item>
-  //       </SkeletonPlaceholder>
-  //     </KContainer.View>
-  //   );
-  // }
+    const onPressBuyNow = useCallback(() => {
+      if (!item) return;
+      onBuyNow?.(item);
+      logGA(GAEvents.chatDetailBuyNowBtnTap, {
+        conversation_id: useSessionStore.getState().sessionId,
+        product_id: item.id,
+        position_in_list: -1, //TODO: fix
+        pdp_id: item.pdpId,
+        message_chat_id: messageId,
+      });
+    }, [onBuyNow, logGA, item, messageId]);
+
+    // if (!item) {
+    //   return (
+    //     <KContainer.View style={styles.container}>
+    //       <SkeletonPlaceholder borderRadius={4} speed={2000} direction="right">
+    //         <SkeletonPlaceholder.Item flexDirection="row" gap={12}>
+    //           <SkeletonPlaceholder.Item
+    //             width={72}
+    //             height={72}
+    //             borderRadius={12}
+    //           />
+    //           <SkeletonPlaceholder.Item
+    //             gap={12}
+    //             width={KDims.width - 160}
+    //             justifyContent="space-between"
+    //           >
+    //             <SkeletonPlaceholder.Item
+    //               height={16}
+    //               width={KDims.width / 2}
+    //               borderRadius={4}
+    //             />
+    //             <SkeletonPlaceholder.Item
+    //               height={16}
+    //               width={160}
+    //               borderRadius={4}
+    //             />
+    //             <SkeletonPlaceholder.Item
+    //               height={16}
+    //               width={80}
+    //               borderRadius={4}
+    //             />
+    //           </SkeletonPlaceholder.Item>
+    //         </SkeletonPlaceholder.Item>
+    //       </SkeletonPlaceholder>
+    //     </KContainer.View>
+    //   );
+    // }
 
-  return (
-    <KContainer.Touchable style={styles.container} onPress={onPress}>
-      <KContainer.View style={styles.image}>
-        <KImage.Base
-          uri={imageUrl}
-          size={72}
-          br="2x"
-          flashListForceRenderKey={id}
-        />
-        <KContainer.View style={styles.favoriteContainer}>
-          <KButton.Base
-            onPress={() => {}}
-            size="xs"
-            icon={{
-              vectorName: isFavorite ? 'heart-b' : 'heart-o',
-              size: 14,
-              tintColor: isFavorite
-                ? KColors.danger.normal
-                : KColors.gray.normal,
-            }}
-            br="round"
-            background={KColors.hexToRgba(KColors.white, 0.9)}
+    return (
+      <KContainer.Touchable style={styles.container} onPress={onPress}>
+        <KContainer.View style={styles.image}>
+          <KImage.Base
+            uri={imageUrl}
+            size={72}
+            br="2x"
+            flashListForceRenderKey={id}
           />
-        </KContainer.View>
-        <KContainer.VisibleView visible={isSuspended}>
-          <KContainer.View style={styles.abs}>
-            <KLabel.Text
-              typo="TextXsBold"
-              color={KColors.palette.gray.w50}
-              textAlign
-            >
-              {'Tạm ngừng kinh doanh'}
-            </KLabel.Text>
-          </KContainer.View>
-        </KContainer.VisibleView>
-        <KContainer.VisibleView visible={isSoldOut}>
-          <KContainer.View style={styles.abs}>
-            <KLabel.Text
-              typo="TextXsBold"
-              color={KColors.palette.gray.w50}
-              textAlign
-            >
-              {'Hết hàng'}
-            </KLabel.Text>
-          </KContainer.View>
-        </KContainer.VisibleView>
-      </KContainer.View>
-      <KContainer.View style={styles.content}>
-        <KLabel.Text typo="TextSmMedium" numberOfLines={2}>
-          {name}
-        </KLabel.Text>
-        <KContainer.View style={styles.saleRow}>
-          <KContainer.View style={styles.ratingContainer}>
-            <KRating.Stars
-              point={5}
-              currentPoints={avgRating || 0}
-              size="x-small"
+          <KContainer.View style={styles.favoriteContainer}>
+            <KButton.Base
+              onPress={() => {}}
+              size="xs"
+              icon={{
+                vectorName: isFavorite ? 'heart-b' : 'heart-o',
+                size: 14,
+                tintColor: isFavorite
+                  ? KColors.danger.normal
+                  : KColors.gray.normal,
+              }}
+              br="round"
+              background={KColors.hexToRgba(KColors.white, 0.9)}
             />
-            <KLabel.Text typo="Text2XsNormal" color={KColors.gray.light}>
-              {`(${totalRating || 0})`}
-            </KLabel.Text>
           </KContainer.View>
-          <KLabel.Text typo="TextXsMedium" color={KColors.gray.normal}>
-            {totalSoldTxt}
-          </KLabel.Text>
+          <KContainer.VisibleView visible={isSuspended}>
+            <KContainer.View style={styles.abs}>
+              <KLabel.Text
+                typo="TextXsBold"
+                color={KColors.palette.gray.w50}
+                textAlign
+              >
+                {'Tạm ngừng kinh doanh'}
+              </KLabel.Text>
+            </KContainer.View>
+          </KContainer.VisibleView>
+          <KContainer.VisibleView visible={isSoldOut}>
+            <KContainer.View style={styles.abs}>
+              <KLabel.Text
+                typo="TextXsBold"
+                color={KColors.palette.gray.w50}
+                textAlign
+              >
+                {'Hết hàng'}
+              </KLabel.Text>
+            </KContainer.View>
+          </KContainer.VisibleView>
         </KContainer.View>
-        <KContainer.VisibleView
-          visible={showPriceDiscount || mVouchers.length > 0}
-        >
-          <KContainer.View style={styles.promotionRow}>
-            <KContainer.VisibleView visible={showPriceDiscount}>
-              <KContainer.View style={styles.promotionRow}>
-                <KLabel.Text
-                  marginL={'0.25rem'}
-                  style={styles.labelLineThrough}
-                  typo="Text2XsNormal"
-                  color={KColors.gray.light}
-                >
-                  {originalPriceText}
-                </KLabel.Text>
-                <KContainer.View style={styles.discountPercentage}>
-                  <KLabel.Text typo="Text2XsBold" color={KColors.white}>
-                    {`-${discountPercentage}%`}
+        <KContainer.View style={styles.content}>
+          <KLabel.Text typo="TextSmMedium" numberOfLines={2}>
+            {name}
+          </KLabel.Text>
+          <KContainer.View style={styles.saleRow}>
+            <KContainer.View style={styles.ratingContainer}>
+              <KRating.Stars
+                point={5}
+                currentPoints={avgRating || 0}
+                size="x-small"
+              />
+              <KLabel.Text typo="Text2XsNormal" color={KColors.gray.light}>
+                {`(${totalRating || 0})`}
+              </KLabel.Text>
+            </KContainer.View>
+            <KLabel.Text typo="TextXsMedium" color={KColors.gray.normal}>
+              {totalSoldTxt}
+            </KLabel.Text>
+          </KContainer.View>
+          <KContainer.VisibleView
+            visible={showPriceDiscount || mVouchers.length > 0}
+          >
+            <KContainer.View style={styles.promotionRow}>
+              <KContainer.VisibleView visible={showPriceDiscount}>
+                <KContainer.View style={styles.promotionRow}>
+                  <KLabel.Text
+                    marginL={'0.25rem'}
+                    style={styles.labelLineThrough}
+                    typo="Text2XsNormal"
+                    color={KColors.gray.light}
+                  >
+                    {originalPriceText}
                   </KLabel.Text>
+                  <KContainer.View style={styles.discountPercentage}>
+                    <KLabel.Text typo="Text2XsBold" color={KColors.white}>
+                      {`-${discountPercentage}%`}
+                    </KLabel.Text>
+                  </KContainer.View>
                 </KContainer.View>
-              </KContainer.View>
-              <KContainer.VisibleView visible={mVouchers.length > 0}>
-                <KContainer.View
-                  row
-                  style={styles.voucherContainer}
-                  id="promotion"
-                >
-                  {mVouchers.map((i: any) => {
-                    return (
-                      <KPromotionTag
-                        key={i.id}
-                        type={i.type}
-                        discount={i.discount}
-                        isFree={
-                          i.type === 'SHIPPING_FEE' && i.resultType === 'FREE'
-                        }
-                        br={'2x'}
-                      />
-                    );
-                  })}
-                </KContainer.View>
+                <KContainer.VisibleView visible={mVouchers.length > 0}>
+                  <KContainer.View
+                    row
+                    style={styles.voucherContainer}
+                    id="promotion"
+                  >
+                    {mVouchers.map((i: any) => {
+                      return (
+                        <KPromotionTag
+                          key={i.id}
+                          type={i.type}
+                          discount={i.discount}
+                          isFree={
+                            i.type === 'SHIPPING_FEE' && i.resultType === 'FREE'
+                          }
+                          br={'2x'}
+                        />
+                      );
+                    })}
+                  </KContainer.View>
+                </KContainer.VisibleView>
               </KContainer.VisibleView>
-            </KContainer.VisibleView>
-          </KContainer.View>
-        </KContainer.VisibleView>
+            </KContainer.View>
+          </KContainer.VisibleView>
 
-        <KContainer.View row alignItems="center">
-          <KLabel.Text
-            typo="TextNmBold"
-            numberOfLines={1}
-            flex
-            color={KColors.warning.normal}
-          >
-            {`${PTManager.number.formatCurrency(minPrice)} `}
-          </KLabel.Text>
-          <KContainer.View style={styles.actionsRow}>
-            <KButton.Base
-              onPress={onPressAddToCart}
-              background={KColors.palette.primary.w25}
-              tintColor={KColors.primary.normal}
-              icon={{
-                vectorName: 'cart-alt-o',
-                size: 16,
-              }}
-              size="sm"
-              disabled={!isEnabledAddToCart}
-            />
-            <KButton.Solid
-              onPress={onPressBuyNow}
-              size="sm"
-              label="Mua ngay"
-              kind="primary"
-              disabled={!isEnabledBuyNow}
-            />
+          <KContainer.View row alignItems="center">
+            <KLabel.Text
+              typo="TextNmBold"
+              numberOfLines={1}
+              flex
+              color={KColors.warning.normal}
+            >
+              {`${PTManager.number.formatCurrency(minPrice)} `}
+            </KLabel.Text>
+            <KContainer.View style={styles.actionsRow}>
+              <KButton.Base
+                onPress={onPressAddToCart}
+                background={KColors.palette.primary.w25}
+                tintColor={KColors.primary.normal}
+                icon={{
+                  vectorName: 'cart-alt-o',
+                  size: 16,
+                }}
+                size="sm"
+                disabled={!isEnabledAddToCart}
+              />
+              <KButton.Solid
+                onPress={onPressBuyNow}
+                size="sm"
+                label="Mua ngay"
+                kind="primary"
+                disabled={!isEnabledBuyNow}
+              />
+            </KContainer.View>
           </KContainer.View>
         </KContainer.View>
-      </KContainer.View>
-    </KContainer.Touchable>
-  );
-};
+      </KContainer.Touchable>
+    );
+  }
+);
+ProductHorizontalCard.displayName = 'ProductHorizontalCard';
 
-export default ProductHorizontalCard;
+export default ProductHorizontalCardWrapper;
 
 const styles = StyleSheet.create({
   abs: {
@@ -374,6 +391,17 @@ const styles = StyleSheet.create({
     borderColor: KColors.hexToRgba(KColors.gray.dark, 0.2),
     backgroundColor: KColors.white,
     width: '100%',
+
+    shadowColor: KColors.hexToRgba(KColors.gray.dark, 0.5),
+
+    shadowOffset: {
+      width: 0,
+      height: 5,
+    },
+    shadowOpacity: 0.15,
+    shadowRadius: 6,
+
+    elevation: 5,
   },
   image: {
     position: 'relative',