react-native-chatbot-ai 0.1.3 → 0.1.5

package/src/components/product/CardHorizontal.tsx

@@ -0,0 +1,390 @@
+import {
+  KButton,
+  KColors,
+  KContainer,
+  KDims,
+  KImage,
+  KLabel,
+  KRadiusValue,
+  KRating,
+  KSpacingValue,
+  KPromotionTag,
+} from '@droppii/libs';
+import { PTManager } from '../../utils/prototype';
+import { useMemo } from 'react';
+import { StyleSheet } from 'react-native';
+import useProductsStore from '../../store/products';
+import { PRODUCT_STATUSES } from '../../types';
+import { useChatContext } from '../../context/ChatContext';
+import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
+
+interface IProductHorizontalCardProps {
+  productId?: string;
+}
+
+const ProducHorizontalCard = (props: IProductHorizontalCardProps) => {
+  const { productId } = 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 {
+    avgRating,
+    discountPercentage,
+    gifts = [],
+    id = '',
+    image,
+    images,
+    isFavorite,
+    minPrice = 0,
+    name = '',
+    originalSellingPrice,
+    outOfStock,
+    productStatusId,
+    totalRating,
+    totalSold,
+    vouchers,
+  } = item || {};
+
+  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 totalSoldTxt = useMemo(() => {
+    return totalSold !== undefined && totalSold > 0
+      ? `Đã bán ${PTManager.number.formatShortened(totalSold, 'floor', {
+          decimalSeparators: ',',
+        })}`
+      : undefined;
+  }, [totalSold]);
+
+  const showPriceDiscount = useMemo(() => {
+    return (
+      minPrice !== originalSellingPrice && Number(originalSellingPrice) > 0
+    );
+  }, [minPrice, originalSellingPrice]);
+
+  const originalPriceText = useMemo(() => {
+    return typeof originalSellingPrice === 'number'
+      ? PTManager.number.formatCurrency(originalSellingPrice)
+      : 'Chưa nhập giá';
+  }, [originalSellingPrice]);
+
+  const isSuspended = useMemo(() => {
+    return productStatusId === PRODUCT_STATUSES.SUSPENDED;
+  }, [productStatusId]);
+
+  const isSoldOut = useMemo(() => {
+    return !!outOfStock;
+  }, [outOfStock]);
+
+  const isEnabledAddToCart = useMemo(() => {
+    return !isSuspended && !isSoldOut && typeof onAddToCart === 'function';
+  }, [isSuspended, isSoldOut, onAddToCart]);
+
+  const isEnabledBuyNow = useMemo(() => {
+    return !isSuspended && !isSoldOut && typeof onBuyNow === 'function';
+  }, [isSuspended, isSoldOut, onBuyNow]);
+
+  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={() => onNavigateToProduct?.(item)}
+    >
+      <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)}
+          />
+        </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"
+            />
+            <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.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.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={() => onAddToCart?.(item)}
+              background={KColors.palette.primary.w25}
+              tintColor={KColors.primary.normal}
+              icon={{
+                vectorName: 'cart-alt-o',
+                size: 16,
+              }}
+              size="sm"
+              disabled={!isEnabledAddToCart}
+            />
+            <KButton.Solid
+              onPress={() => onBuyNow?.(item)}
+              size="sm"
+              label="Mua ngay"
+              kind="primary"
+              disabled={!isEnabledBuyNow}
+            />
+          </KContainer.View>
+        </KContainer.View>
+      </KContainer.View>
+    </KContainer.Touchable>
+  );
+};
+
+export default ProducHorizontalCard;
+
+const styles = StyleSheet.create({
+  abs: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: KSpacingValue['1rem'],
+    backgroundColor: KColors.hexToRgba(KColors.black, 0.5),
+    borderRadius: KRadiusValue['2x'],
+    ...StyleSheet.absoluteFillObject,
+  },
+  container: {
+    flexDirection: 'row',
+    gap: KSpacingValue['0.75rem'],
+    padding: KSpacingValue['0.75rem'],
+    borderRadius: KRadiusValue['3x'],
+    borderWidth: 1,
+    borderColor: KColors.hexToRgba(KColors.gray.dark, 0.2),
+    backgroundColor: KColors.white,
+    width: '100%',
+  },
+  image: {
+    position: 'relative',
+    width: 72,
+    height: 72,
+    borderRadius: KRadiusValue['2x'],
+  },
+  content: {
+    flex: 1,
+    gap: KSpacingValue['0.25rem'],
+  },
+  saleRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: KSpacingValue['0.5rem'],
+    marginTop: -4,
+  },
+  ratingContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 2,
+  },
+  promotionRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 2,
+  },
+  labelLineThrough: {
+    textDecorationLine: 'line-through',
+    textDecorationStyle: 'solid',
+  },
+  discountPercentage: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingVertical: 2,
+    borderRadius: KRadiusValue['3x'],
+    backgroundColor: KColors.danger.normal,
+    width: 40,
+  },
+  actionsRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: KSpacingValue['0.25rem'],
+  },
+  favoriteContainer: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+  },
+});

package/src/constants/query.ts

@@ -2,4 +2,5 @@ export const QUERY_KEYS = {
   GET_SUGGESTIONS: 'GET_SUGGESTIONS',
   GET_SESSION_BY_ID: 'GET_SESSION_BY_ID',
   CREATE_SESSION: 'CREATE_SESSION',
+  SEARCH_PRODUCT: 'SEARCH_PRODUCT',
 };

package/src/context/ChatContext.tsx

@@ -7,15 +7,40 @@ export const ChatContext = createContext<ChatContextType>({
   apiAddress: '',
   userId: '',
   cartButton: undefined,
+  onAddToCart: () => {},
+  onBuyNow: () => {},
+  onNavigateToProduct: () => {},
+  csTeamId: '',
+  pushLinkTo: () => {},
 });
 
 export const useChatContext = () => useContext(ChatContext);
 
 export const ChatProvider = (props: ChatProviderProps) => {
-  const { apiAddress, userId, cartButton, openImageViewer } = props;
+  const {
+    apiAddress,
+    userId,
+    cartButton,
+    openImageViewer,
+    onAddToCart,
+    onBuyNow,
+    onNavigateToProduct,
+    csTeamId,
+    pushLinkTo,
+  } = props;
   return (
     <ChatContext.Provider
-      value={{ apiAddress, userId, cartButton, openImageViewer }}
+      value={{
+        apiAddress,
+        userId,
+        cartButton,
+        openImageViewer,
+        onAddToCart,
+        onBuyNow,
+        onNavigateToProduct,
+        csTeamId,
+        pushLinkTo,
+      }}
     >
       <ChatBotAI />
       <Portal />

package/src/hooks/message/useStreamMessage.ts

@@ -106,7 +106,6 @@ export const useStreamMessage = () => {
       });
 
       es.addEventListener('close', () => {
-        console.log('🔴 Stream closed');
         DeviceEventEmitter.emit(
           events.forceUpdateMessages,
           Object.values(buffers)

package/src/hooks/product/useSearchProduct.ts

@@ -0,0 +1,29 @@
+import { useQuery } from '@tanstack/react-query';
+import { QUERY_KEYS } from '../../constants/query';
+import { apiInstance } from '../../services/apis';
+import { ENDPOINTS } from '../../services/endpoints';
+import { BaseResponse } from '../../types/common';
+import { IProductItem } from '../../types/dto';
+import useProductsStore from '../../store/products';
+
+interface IUseFetchProductProps {
+  productIds: string[];
+}
+export const useSearchProduct = ({ productIds }: IUseFetchProductProps) =>
+  useQuery({
+    queryKey: [QUERY_KEYS.SEARCH_PRODUCT],
+    queryFn: async () => {
+      const res = await apiInstance?.post<BaseResponse<IProductItem[]>>(
+        ENDPOINTS.productService.search,
+        {
+          ReturnPromotionTag: true,
+          productIds,
+        }
+      );
+      return res?.data?.data;
+    },
+    enabled: !!apiInstance && productIds?.length > 0,
+    onSuccess: (data: IProductItem[]) => {
+      useProductsStore.setState({ products: data || [] });
+    },
+  });

package/src/services/endpoints.ts

@@ -10,4 +10,7 @@ export const ENDPOINTS = {
   uploaderService: {
     upload: '/uploader-service/v1/uploader/permanently',
   },
+  productService: {
+    search: '/search-service/v2/app/product/search',
+  },
 };

package/src/store/products.ts

@@ -0,0 +1,9 @@
+import { ProductsStore } from 'src/types';
+import { create } from 'zustand';
+
+const useProductsStore = create<ProductsStore>((set) => ({
+  products: [],
+  setProducts: (products) => set({ products }),
+}));
+
+export default useProductsStore;

package/src/types/chat.ts

@@ -1,11 +1,16 @@
 import { JSX } from 'react';
-import { IMessageItem } from './dto';
+import { IMessageItem, IProductItem } from './dto';
 
 export interface ChatContextType {
   apiAddress: string;
   userId: string;
   cartButton?: JSX.Element;
   openImageViewer?: (images: { url: string }[], index: number) => void;
+  onAddToCart?: (product: any) => void;
+  onBuyNow?: (product: any) => void;
+  onNavigateToProduct?: (product: any) => void;
+  csTeamId?: string;
+  pushLinkTo?: (url: string, resParams?: any) => void;
 }
 
 export interface ChatProviderProps {
@@ -13,6 +18,11 @@ export interface ChatProviderProps {
   userId: string;
   cartButton?: JSX.Element;
   openImageViewer?: (images: { url: string }[], index: number) => void;
+  onAddToCart?: (product: any) => void;
+  onBuyNow?: (product: any) => void;
+  onNavigateToProduct?: (product: any) => void;
+  csTeamId?: string;
+  pushLinkTo?: (url: string, resParams?: any) => void;
 }
 
 export interface SessionStore {
@@ -26,3 +36,8 @@ export interface StreamMessageStore {
   streamMessage: Record<string, IMessageItem>;
   setStreamMessage: (streamMessage: Record<string, IMessageItem>) => void;
 }
+
+export interface ProductsStore {
+  products: IProductItem[];
+  setProducts: (products: IProductItem[]) => void;
+}

package/src/types/common.ts

@@ -30,3 +30,23 @@ export enum RoleType {
   user = 'user',
   ai = 'ai',
 }
+
+export enum EPdpLabel {
+  DIAMOND = 'DIAMOND',
+  PLATINUM = 'PLATINUM',
+  GOLD = 'GOLD',
+}
+
+export enum ProductType {
+  combo = 2,
+  normal = 0,
+  promotion = 1,
+  service = 3,
+  flexiblePrice = 5,
+}
+
+export enum PRODUCT_STATUSES {
+  ACTIVE = 1,
+  INACTIVE = 2,
+  SUSPENDED = 3,
+}

package/src/types/dto.ts

@@ -92,3 +92,77 @@ export interface CreateSessionResponse {
     source: string;
   };
 }
+
+export interface IProductDiscountCampaign {
+  id: string;
+  discountType: 'PERCENTAGE_OFF' | 'FIXED_PRICE';
+  remainingUsage: number;
+  discountValue: number;
+  discountPercentage: number;
+}
+
+export type ProductTypes = 0 | 1 | 2 | 3 | 4 | 5;
+
+export interface IPromotionInProductItem {
+  id: string;
+  title: string;
+  value: string;
+  type: 'ORDER_DISCOUNT' | 'SHIPPING_FEE';
+  resultType: 'FIXED_PRICE' | 'PERCENTAGE_OFF' | 'FREE';
+}
+
+export interface ImageItem {
+  url: string;
+  main: boolean;
+}
+
+export interface IProductImages {
+  '410x410': ImageItem[];
+  '0x0': ImageItem[];
+  '504x504': ImageItem[];
+  '227x227': ImageItem[];
+  '820x820': ImageItem[];
+  '100x100': ImageItem[];
+}
+
+export interface IWarehouseItem {
+  id: string;
+  quantity: number;
+  supportedPlatforms: string[];
+}
+
+export interface IProductItem {
+  avgRating: number;
+  diamondAccountDiscountPrice: number;
+  discountPercentage: number;
+  gifts: IPromotionInProductItem[];
+  id: string;
+  image?: string;
+  images: IProductImages | null;
+  isFavorite: boolean;
+  isFavorited: boolean;
+  isNew: boolean;
+  isNormalProduct: boolean;
+  maxBP: number;
+  maxDiscount: number;
+  minBP: number;
+  minDiscount: number;
+  minOriginalPriceByDiscount: number;
+  minPrice: number;
+  minPriceByDiscount: number;
+  name: string;
+  originalSellingPrice: number;
+  outOfStock: boolean;
+  pdpId: string;
+  pdpName: string;
+  productDiscountCampaigns: any[];
+  productStatusId: number;
+  productType: ProductTypes;
+  promotions: any[];
+  segmentIds: string[];
+  totalRating: number;
+  totalSold: number;
+  vat: number;
+  vouchers: any[];
+  warehouses: IWarehouseItem[];
+}