react-native-chatbot-ai 0.1.62 → 0.1.64

package/src/components/product/CardHorizontal.tsx

@@ -13,13 +13,14 @@ import {
 import { PTManager } from '../../utils/prototype';
 import { memo, useCallback, useMemo } from 'react';
 import { StyleSheet } from 'react-native';
-import { IProductItem, PRODUCT_STATUSES } from '../../types';
+import { EventProvider, IProductItem, PRODUCT_STATUSES } from '../../types';
 import { useChatContext } from '../../context/ChatContext';
 // import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 import { GAEvents } from '../../constants/events';
 import useSessionStore from '../../store/session';
 import { getRouteKey } from '../../constants';
 import { useSearchProduct } from '../../hooks/product/useSearchProduct';
+import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 
 interface IProductHorizontalCardProps {
   productId?: string;
@@ -31,15 +32,61 @@ interface IProductHorizontalCardProps {
 const ProductHorizontalCardWrapper = memo(
   (props: IProductHorizontalCardProps) => {
     const { productId } = props;
-    const { data: product } = useSearchProduct({
+    const {
+      data: product,
+      isLoading,
+      error,
+    } = useSearchProduct({
       productIds: productId ? [productId] : [],
     });
     const item = product?.[0];
 
-    if (!item) {
+    if (error || (!isLoading && !item)) {
       return null;
     }
 
+    if (isLoading) {
+      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
+                  height={16}
+                  width={80}
+                  borderRadius={4}
+                />
+              </SkeletonPlaceholder.Item>
+            </SkeletonPlaceholder.Item>
+          </SkeletonPlaceholder>
+        </KContainer.View>
+      );
+    }
+
     return <ProductHorizontalCard item={item} {...props} />;
   }
 );
@@ -51,7 +98,7 @@ const ProductHorizontalCard = memo(
     messageId,
     index,
     showFavorite = false,
-  }: IProductHorizontalCardProps & { item: IProductItem }) => {
+  }: IProductHorizontalCardProps & { item?: IProductItem }) => {
     const onAddToCart = useChatContext()?.onAddToCart;
     const onBuyNow = useChatContext()?.onBuyNow;
     const onNavigateToProduct = useChatContext()?.onNavigateToProduct;
@@ -170,6 +217,19 @@ const ProductHorizontalCard = memo(
         tab_name: getRouteKey(tabIndex),
         type: 'horizontal',
       });
+
+      logGA(
+        GAEvents.chatDetailProductCardTap,
+        {
+          conversation_id: useSessionStore.getState().sessionId,
+          message_chat_id: messageId,
+          product_id: item.id,
+          position_in_list: index,
+          tab_name: getRouteKey(tabIndex),
+          type: 'horizontal',
+        },
+        EventProvider.netcore
+      );
     }, [onNavigateToProduct, logGA, item, index, messageId, tabIndex]);
 
     const onPressAddToCart = useCallback(() => {
@@ -184,6 +244,20 @@ const ProductHorizontalCard = memo(
         tab_name: getRouteKey(tabIndex),
         type: 'horizontal',
       });
+
+      logGA(
+        GAEvents.chatDetailAddToCartBtnTap,
+        {
+          conversation_id: useSessionStore.getState().sessionId,
+          product_id: item.id,
+          position_in_list: index,
+          pdp_id: item.pdpId,
+          message_chat_id: messageId,
+          tab_name: getRouteKey(tabIndex),
+          type: 'horizontal',
+        },
+        EventProvider.netcore
+      );
     }, [onAddToCart, logGA, item, messageId, index, tabIndex]);
 
     const onPressBuyNow = useCallback(() => {
@@ -198,6 +272,19 @@ const ProductHorizontalCard = memo(
         tab_name: getRouteKey(tabIndex),
         type: 'horizontal',
       });
+      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,
+          tab_name: getRouteKey(tabIndex),
+          type: 'horizontal',
+        },
+        EventProvider.netcore
+      );
     }, [onBuyNow, logGA, item, messageId, tabIndex]);
 
     return (

package/src/hooks/message/useSendMessage.ts

@@ -6,6 +6,7 @@ import { useStreamMessage } from './useStreamMessage';
 import { events, GAEvents } from '../../constants/events';
 import { DeviceEventEmitter } from 'react-native';
 import {
+  EventProvider,
   IAttachment,
   IMessageItem,
   MessageType,
@@ -80,6 +81,17 @@ export const useSendMessage = () => {
         action_type: actionType,
       });
 
+      logGA(
+        GAEvents.chatDetailSendBtnTap,
+        {
+          chat_type: useSessionStore.getState().sessionLogType,
+          conversation_id:
+            latestSessionId || useSessionStore.getState().sessionId,
+          action_type: actionType,
+        },
+        EventProvider.netcore
+      );
+
       if (attachments?.length && attachments.length > 0) {
         const totalFileCount = attachments.filter(
           (i) => i.type === 'file'

package/src/hooks/message/useStreamMessage.ts

@@ -2,6 +2,7 @@ import { useEffect, useRef, useCallback } from 'react';
 import { useChatContext } from '../../context/ChatContext';
 import { ENDPOINTS } from '../../services/endpoints';
 import {
+  EventProvider,
   SendActionLogType,
   type IMessageItem,
   type StreamMessageRequest,
@@ -108,6 +109,16 @@ export const useStreamMessage = () => {
                 message_chat_id: m?.id,
                 group_id: m?.group_suggestion_id,
               });
+
+              logGA?.(
+                GAEvents.chatDetailInConvPrmSuggReturn,
+                {
+                  conversation_id: sessionId,
+                  message_chat_id: m?.id,
+                  group_id: m?.group_suggestion_id,
+                },
+                EventProvider.netcore
+              );
             }
           });
         }
@@ -203,6 +214,15 @@ export const useStreamMessage = () => {
         conversation_id: sessionId,
         action_type: SendActionLogType.retry,
       });
+      logGA(
+        GAEvents.chatDetailSendBtnTap,
+        {
+          chat_type: useSessionStore.getState().sessionLogType,
+          conversation_id: sessionId,
+          action_type: SendActionLogType.retry,
+        },
+        EventProvider.netcore
+      );
 
       startStream(
         {

package/src/hooks/messageActions/useFeedback.ts

@@ -12,6 +12,7 @@ import type { IMessageItem } from '../../types/dto';
 import useSessionStore from '../../store/session';
 import { useChatContext } from '../../context/ChatContext';
 import { GAEvents } from '../../constants/events';
+import { EventProvider } from '../../types';
 
 export const useFeedback = (messageId: string, message?: IMessageItem) => {
   const { logGA, notifyError } = useChatContext();
@@ -96,6 +97,17 @@ export const useFeedback = (messageId: string, message?: IMessageItem) => {
           message_chat_id: messageId,
         });
 
+        logGA(
+          GAEvents.chatDetailLikeDislikeBtnTap,
+          {
+            fb_type: type,
+            message_chat_id: messageId,
+          },
+          EventProvider.netcore
+        );
+
+        // Updat
+
         // Update local state AFTER successful API call
         setFeedback(messageId, type, reason);
 

package/src/types/chat.ts

@@ -2,6 +2,12 @@ import { JSX } from 'react';
 import { IMessageItem } from './dto';
 import EventSource from 'react-native-sse';
 
+export const EventProvider = {
+  ga: 'ga',
+  appsflyer: 'appsflyer',
+  netcore: 'netcore',
+} as const;
+
 export interface ChatContextType {
   apiAddress: string;
   userId: string;
@@ -15,7 +21,11 @@ export interface ChatContextType {
   openDrawer: () => void;
   closeDrawer: () => void;
   chatbotUrl: string;
-  logGA: (event: string, params?: any) => void;
+  logGA: (
+    event: string,
+    params?: any,
+    provider?: `${keyof typeof EventProvider}`
+  ) => void;
   notifyError?: ErrorLogger;
   tabIndex: number;
   setTabIndex: (tabIndex: number) => void;