@droppii-org/chat-mobile 0.2.53 → 0.2.55

package/src/hooks/useMuteConversation.tsx

@@ -0,0 +1,124 @@
+import { useCallback } from 'react';
+import OpenIMSDK, {
+  MessageReceiveOptType,
+} from '@droppii/openim-rn-client-sdk';
+import type { ConversationItem } from '@droppii/openim-rn-client-sdk';
+import { UIUtils } from '../utils/UIUtils';
+import { trans } from '../translation';
+import { KContainer, KLabel } from '@droppii/libs';
+import { Image, StyleSheet } from 'react-native';
+import Images from '../assets/images';
+
+export function useMuteConversation() {
+  const openMutePopup = useCallback(() => {
+    return new Promise((resolve, reject) => {
+      UIUtils.popup.open({
+        header: {
+          title: { text: trans('chat:mute_confirm_title') },
+          alignment: 'center',
+        },
+        body: {
+          renderContent: () => {
+            return (
+              <KContainer.View padding={'1rem'} justifyContent alignItems>
+                <KContainer.View paddingV={'1rem'}>
+                  <Image
+                    source={Images.NOTIFICATION_WARNING}
+                    style={styles.notificationWarning}
+                  />
+                </KContainer.View>
+                <KLabel.RichText
+                  typo="TextMdNormal"
+                  richTextOptions={{
+                    i18nKey: trans('chat:mute_confirm_desc'),
+                    components: {
+                      b: <KLabel.Text typo="TextMdBold" />,
+                    },
+                  }}
+                />
+              </KContainer.View>
+            );
+          },
+        },
+        actions: {
+          buttons: [
+            {
+              label: trans('chat:mute_confirm_secondary'),
+              kind: 'light',
+              onPress: reject,
+            },
+            {
+              label: trans('chat:mute_confirm_primary'),
+              kind: 'primary',
+              onPress: resolve,
+            },
+          ],
+          type: 'horizontal-button',
+        },
+      });
+    });
+  }, []);
+
+  const muteConversation = useCallback(
+    async (conversation?: ConversationItem) => {
+      if (conversation == null) return;
+
+      try {
+        await openMutePopup();
+      } catch {
+        return;
+      }
+
+      try {
+        await OpenIMSDK.setConversationRecvMessageOpt({
+          conversationID: conversation.conversationID,
+          opt: MessageReceiveOptType.NotNotify,
+        });
+        UIUtils.toast.open({
+          title: trans('chat:mute_toast_success'),
+          theme: 'light',
+        });
+      } catch (error) {
+        console.error('muteConversation failed', error);
+        UIUtils.toast.open({
+          title: trans('chat:generic_error'),
+          theme: 'error',
+        });
+      }
+    },
+    [openMutePopup]
+  );
+
+  const unmuteConversation = useCallback(
+    async (conversation?: ConversationItem) => {
+      if (conversation == null) return;
+
+      try {
+        await OpenIMSDK.setConversationRecvMessageOpt({
+          conversationID: conversation.conversationID,
+          opt: MessageReceiveOptType.Normal,
+        });
+        UIUtils.toast.open({
+          title: trans('chat:unmute_toast_success'),
+          theme: 'light',
+        });
+      } catch (error) {
+        console.error('unmuteConversation failed', error);
+        UIUtils.toast.open({
+          title: trans('chat:generic_error'),
+          theme: 'error',
+        });
+      }
+    },
+    []
+  );
+
+  return { muteConversation, unmuteConversation };
+}
+
+const styles = StyleSheet.create({
+  notificationWarning: {
+    width: 120,
+    height: 144,
+  },
+});

package/src/index.tsx

@@ -31,6 +31,7 @@ export { default as MediaViewerScreen } from './screens/MediaView';
 export { default as ResourceCenterScreen } from './screens/ResourceCenter';
 export type { ResourceCenterScreenProps } from './screens/ResourceCenter/types';
 export * from './screens/chat-detail';
+export * from './screens/ChatInfo';
 
 export type {
   PeerType,
@@ -52,6 +53,7 @@ export type {
   ChatQuickActionsRenderParams,
   ChatPanelProps,
 } from './screens/chat-detail';
+export type * from './screens/ChatInfo';
 
 export { registerUIUtils, UIUtils } from './utils/UIUtils';
 

package/src/screens/ChatInfo/ChatInfo.tsx

@@ -0,0 +1,61 @@
+import { memo } from 'react';
+import { KContainer, KNavigation } from '@droppii/libs';
+import { useNavigation } from '@react-navigation/native';
+import { useGetConversationTarget } from '../../hooks/conversation/useGetConversationDetail';
+import { useConversation } from '../../store';
+import ChatInfoProfile from './ChatInfoProfile';
+import ChatInfoMediaRow from './ChatInfoMediaRow';
+import ChatInfoActions from './ChatInfoActions';
+import type { ChatInfoProps } from './types';
+import { trans } from '../../translation';
+
+const ChatInfo = memo(
+  ({
+    conversationId = '',
+    onBack,
+    onPressSearch,
+    onPressMedia,
+    onPressOrders,
+    onPressCreateGroup,
+    onPressAddToGroup,
+  }: ChatInfoProps) => {
+    const navigation = useNavigation();
+
+    const conversation = useConversation(conversationId);
+    const { data: target } = useGetConversationTarget(conversationId);
+    const isTargetActive = target ? target.isActive : true;
+
+    return (
+      <KContainer.Page flex edges={['bottom']} background="#EBEDF2">
+        <KNavigation.Header
+          theme="light"
+          alignment="left"
+          size="small"
+          leftButton={{
+            id: 'ChatInfoBackButton',
+            icon: { vectorName: 'arrow-left-o' },
+            onPress: onBack ?? navigation.goBack,
+          }}
+          title={trans('chat:info_title')}
+          shadow={false}
+        />
+        <KContainer.ScrollView showsVerticalScrollIndicator={false}>
+          <ChatInfoProfile
+            conversation={conversation}
+            onPressSearch={onPressSearch}
+          />
+          <ChatInfoMediaRow onPressMedia={onPressMedia} />
+          <ChatInfoActions
+            conversation={conversation}
+            isTargetActive={isTargetActive}
+            onPressOrders={onPressOrders}
+            onPressCreateGroup={onPressCreateGroup}
+            onPressAddToGroup={onPressAddToGroup}
+          />
+        </KContainer.ScrollView>
+      </KContainer.Page>
+    );
+  }
+);
+
+export default ChatInfo;

package/src/screens/ChatInfo/ChatInfoActions.tsx

@@ -0,0 +1,168 @@
+import { memo, useCallback, useMemo } from 'react';
+import {
+  KContainer,
+  KListItem,
+  KColors,
+  type KListItemBaseItemProps,
+  KLabel,
+} from '@droppii/libs';
+import type { ConversationItem } from '@droppii/openim-rn-client-sdk';
+import { usePinConversation } from '../../hooks/usePinConversation';
+import { trans } from '../../translation';
+
+interface ChatInfoActionsProps {
+  conversation?: ConversationItem;
+  isTargetActive: boolean;
+  onPressOrders?: () => void;
+  onPressCreateGroup?: () => void;
+  onPressAddToGroup?: () => void;
+}
+
+const ChatInfoActions = memo(
+  ({
+    conversation,
+    isTargetActive,
+    onPressOrders,
+    onPressCreateGroup,
+    onPressAddToGroup,
+  }: ChatInfoActionsProps) => {
+    const { pinConversation, unpinConversation } = usePinConversation();
+    const isPinned = Boolean(conversation?.isPinned);
+    const showName = conversation?.showName || '';
+
+    const handlePinPress = useCallback(() => {
+      if (isPinned) {
+        unpinConversation(conversation);
+      } else {
+        pinConversation(conversation);
+      }
+    }, [isPinned, conversation, pinConversation, unpinConversation]);
+
+    const handleDeleteHistory = useCallback(() => {}, []);
+
+    const primaryData = useMemo(() => {
+      const items: KListItemBaseItemProps[] = [
+        {
+          leftNode: { icon: { vectorName: 'receipt-o' } },
+          onPress: onPressOrders,
+          paddingH: '0.75rem',
+          paddingV: '0.75rem',
+          customLabel: (
+            <KLabel.Text typo="TextMdMedium" numberOfLines={1}>
+              {trans('chat:info_orders', { name: showName })}
+            </KLabel.Text>
+          ),
+        },
+      ];
+
+      if (isTargetActive) {
+        items.push(
+          {
+            leftNode: { icon: { vectorName: 'user-two-o' } },
+            onPress: onPressCreateGroup,
+            paddingH: '0.75rem',
+            paddingV: '0.75rem',
+            customLabel: (
+              <KLabel.Text typo="TextMdMedium" numberOfLines={1}>
+                {trans('chat:info_create_group', { name: showName })}
+              </KLabel.Text>
+            ),
+          },
+          {
+            leftNode: { icon: { vectorName: 'user-add-o' } },
+            onPress: onPressAddToGroup,
+            paddingH: '0.75rem',
+            paddingV: '0.75rem',
+            customLabel: (
+              <KLabel.Text typo="TextMdMedium" numberOfLines={1}>
+                {trans('chat:info_add_to_group')}
+              </KLabel.Text>
+            ),
+          }
+        );
+      }
+
+      items.push({
+        leftNode: {
+          icon: { vectorName: isPinned ? 'thumbtack-off-o' : 'thumbtack-o' },
+        },
+        onPress: handlePinPress,
+        showChevron: false,
+        paddingH: '0.75rem',
+        paddingV: '0.75rem',
+        customLabel: (
+          <KLabel.Text typo="TextMdMedium" numberOfLines={1}>
+            {isPinned
+              ? trans('chat:info_unpin_message')
+              : trans('chat:info_pin_message')}
+          </KLabel.Text>
+        ),
+      });
+
+      return items;
+    }, [
+      showName,
+      isTargetActive,
+      isPinned,
+      onPressOrders,
+      onPressCreateGroup,
+      onPressAddToGroup,
+      handlePinPress,
+    ]);
+
+    const deleteData: KListItemBaseItemProps[] = useMemo(
+      () => [
+        {
+          label: trans('chat:info_delete_history'),
+          leftNode: {
+            icon: {
+              vectorName: 'trash-alt-o',
+              tintColor: KColors.danger.normal,
+            },
+          },
+          tintColor: KColors.danger.normal,
+          onPress: handleDeleteHistory,
+          showChevron: false,
+          paddingH: '0.75rem',
+          paddingV: '0.75rem',
+          customLabel: (
+            <KLabel.Text
+              typo="TextMdMedium"
+              color={KColors.danger.normal}
+              numberOfLines={1}
+            >
+              {trans('chat:info_delete_history')}
+            </KLabel.Text>
+          ),
+        },
+      ],
+      [handleDeleteHistory]
+    );
+
+    return (
+      <>
+        <KContainer.View
+          background={KColors.white}
+          br={'3x'}
+          marginH="0.75rem"
+          marginT="0.75rem"
+          hiddenOverflow
+        >
+          <KListItem.Base data={primaryData} />
+        </KContainer.View>
+
+        <KContainer.View
+          background={KColors.white}
+          br={'3x'}
+          marginH="0.75rem"
+          marginT="0.75rem"
+          hiddenOverflow
+        >
+          <KListItem.Base data={deleteData} />
+        </KContainer.View>
+      </>
+    );
+  }
+);
+
+export default ChatInfoActions;

package/src/screens/ChatInfo/ChatInfoMediaRow.tsx

@@ -0,0 +1,73 @@
+import { memo } from 'react';
+import { KContainer, KImage, KLabel, KColors } from '@droppii/libs';
+import { trans } from '../../translation';
+import { DThreadResourceContentType } from '../../types/chat';
+
+const MEDIA_TABS: Array<{
+  tab: DThreadResourceContentType;
+  iconName: string;
+  labelKey: string;
+}> = [
+  {
+    tab: DThreadResourceContentType.IMAGE,
+    iconName: 'image-o',
+    labelKey: 'chat:info_media_photo',
+  },
+  {
+    tab: DThreadResourceContentType.VIDEO,
+    iconName: 'video-o',
+    labelKey: 'chat:info_media_video',
+  },
+  {
+    tab: DThreadResourceContentType.FILE,
+    iconName: 'paperclip-o',
+    labelKey: 'chat:info_media_file',
+  },
+  {
+    tab: DThreadResourceContentType.URL_TEXT,
+    iconName: 'link-alt-o',
+    labelKey: 'chat:info_media_link',
+  },
+];
+
+interface ChatInfoMediaRowProps {
+  onPressMedia?: (tab: DThreadResourceContentType) => void;
+}
+
+const ChatInfoMediaRow = memo(({ onPressMedia }: ChatInfoMediaRowProps) => {
+  return (
+    <KContainer.View
+      row
+      background={KColors.white}
+      br={'3x'}
+      marginH="0.75rem"
+      marginT="0.75rem"
+    >
+      {MEDIA_TABS.map(({ tab, iconName, labelKey }) => (
+        <KContainer.Touchable
+          key={tab}
+          flex
+          alignItems
+          justifyContent
+          paddingV="0.75rem"
+          onPress={() => onPressMedia?.(tab)}
+        >
+          <KImage.VectorIcons
+            name={iconName}
+            size={24}
+            color={KColors.gray.dark}
+          />
+          <KLabel.Text
+            typo="TextXsNormal"
+            color={KColors.gray.dark}
+            marginT="0.25rem"
+          >
+            {trans(labelKey)}
+          </KLabel.Text>
+        </KContainer.Touchable>
+      ))}
+    </KContainer.View>
+  );
+});
+
+export default ChatInfoMediaRow;

package/src/screens/ChatInfo/ChatInfoProfile.tsx

@@ -0,0 +1,145 @@
+import { memo, useCallback, useMemo } from 'react';
+import { KContainer, KImage, KLabel, KColors } from '@droppii/libs';
+import {
+  MessageReceiveOptType,
+  PeerType,
+  type ConversationItem,
+} from '@droppii/openim-rn-client-sdk';
+import { Avatar } from '../../components/Avatar';
+import { useMuteConversation } from '../../hooks/useMuteConversation';
+import { trans } from '../../translation';
+import { StyleSheet } from 'react-native';
+import { NamePrefixIcon } from '../../components/ThreadCard';
+
+interface QuickActionProps {
+  iconName: string;
+  label: string;
+  background: string;
+  iconColor: string;
+  onPress?: () => void;
+}
+
+const QuickAction = memo(
+  ({ iconName, label, background, iconColor, onPress }: QuickActionProps) => (
+    <KContainer.View alignItems paddingH="0.75rem" paddingV="0.5rem">
+      <KContainer.Touchable
+        height={40}
+        width={40}
+        br={'round'}
+        background={background}
+        center
+        onPress={onPress}
+      >
+        <KImage.VectorIcons name={iconName} size={18} color={iconColor} />
+      </KContainer.Touchable>
+      <KLabel.Text
+        typo="TextSmMedium"
+        color={KColors.gray.dark}
+        marginT="0.25rem"
+        textAlign="center"
+      >
+        {label}
+      </KLabel.Text>
+    </KContainer.View>
+  )
+);
+
+interface ChatInfoProfileProps {
+  conversation?: ConversationItem;
+  onPressSearch?: () => void;
+}
+
+const ChatInfoProfile = memo(
+  ({ conversation, onPressSearch }: ChatInfoProfileProps) => {
+    const { faceURL, showName = '' } = conversation ?? {};
+
+    const isMuted =
+      conversation != null &&
+      conversation.recvMsgOpt !== MessageReceiveOptType.Normal;
+
+    const { muteConversation, unmuteConversation } = useMuteConversation();
+
+    const handleNotificationPress = useCallback(() => {
+      if (isMuted) {
+        unmuteConversation(conversation);
+      } else {
+        muteConversation(conversation);
+      }
+    }, [isMuted, conversation, muteConversation, unmuteConversation]);
+
+    const badge = useMemo(() => {
+      switch (conversation?.peerType) {
+        case PeerType.Bot:
+          return { variant: 'bot' } as const;
+
+        case PeerType.Customer:
+          return { variant: 'mall' } as const;
+        default:
+          return;
+      }
+    }, [conversation?.peerType]);
+
+    return (
+      <KContainer.View
+        background={KColors.white}
+        brBL={'4x'}
+        brBR={'4x'}
+        paddingV="0.5rem"
+      >
+        <KContainer.View alignItems>
+          <Avatar
+            source={faceURL}
+            size="4xlg"
+            fullName={showName}
+            badge={badge}
+          />
+          <KContainer.View row alignItems marginT="0.5rem">
+            <NamePrefixIcon peerType={conversation?.peerType} />
+            <KLabel.Text
+              typo="TextLgBold"
+              color={KColors.black}
+              numberOfLines={1}
+            >
+              {showName}
+            </KLabel.Text>
+          </KContainer.View>
+        </KContainer.View>
+
+        <KContainer.View
+          row
+          justifyContent="center"
+          alignItems
+          style={styles.quickActionContainer}
+          marginT="0.5rem"
+        >
+          <QuickAction
+            iconName="search-o"
+            label={trans('chat:info_search_action')}
+            onPress={onPressSearch}
+            background={KColors.palette.gray.w25}
+            iconColor={KColors.gray.dark}
+          />
+          <QuickAction
+            iconName={isMuted ? 'bell-b' : 'bell-off-o'}
+            label={
+              isMuted ? trans('chat:unmute_action') : trans('chat:mute_action')
+            }
+            background={
+              isMuted ? KColors.primary.normal : KColors.palette.gray.w25
+            }
+            iconColor={isMuted ? KColors.white : KColors.gray.dark}
+            onPress={handleNotificationPress}
+          />
+        </KContainer.View>
+      </KContainer.View>
+    );
+  }
+);
+
+export default ChatInfoProfile;
+
+const styles = StyleSheet.create({
+  quickActionContainer: {
+    gap: 8,
+  },
+});

package/src/screens/ChatInfo/index.ts

@@ -0,0 +1,2 @@
+export { default as ChatInfo } from './ChatInfo';
+export type * from './types';

package/src/screens/ChatInfo/types.ts

@@ -0,0 +1,11 @@
+import type { DThreadResourceContentType } from '../../types/chat';
+
+export interface ChatInfoProps {
+  conversationId?: string;
+  onBack?: () => void;
+  onPressSearch?: () => void;
+  onPressMedia?: (tab: DThreadResourceContentType) => void;
+  onPressOrders?: () => void;
+  onPressCreateGroup?: () => void;
+  onPressAddToGroup?: () => void;
+}

package/src/screens/chat-detail/ChatDetail.tsx

@@ -46,7 +46,6 @@ const ChatDetail = memo(
     onPressSearch,
     onPressAddMember,
     onPressMenu,
-    onPressAvatar,
     onPressUrl,
     customMessageItemFactory,
     pannelActions,
@@ -149,6 +148,10 @@ const ChatDetail = memo(
       });
     }, [currentUser, unpinMessage, customMessageItemFactory]);
 
+    const handlePressMenu = useCallback(() => {
+      onPressMenu?.(conversationId);
+    }, [conversationId, onPressMenu]);
+
     return (
       <KContainer.Page flex edges={['bottom']}>
         <ChatDetailHeader
@@ -158,8 +161,8 @@ const ChatDetail = memo(
           onBack={onBack ?? handleBackDefault}
           onPressSearch={onPressSearch}
           onPressAddMember={onPressAddMember}
-          onPressMenu={onPressMenu}
-          onPressAvatar={onPressAvatar}
+          onPressMenu={handlePressMenu}
+          onPressAvatar={handlePressMenu}
         />
 
         <PinnedMessageBar

package/src/screens/chat-detail/types.ts

@@ -42,7 +42,7 @@ export interface ChatDetailHeaderProps {
   onBack?: () => void;
   onPressSearch?: () => void;
   onPressAddMember?: () => void;
-  onPressMenu?: () => void;
+  onPressMenu?: (conversationId?: string) => void;
   onPressAvatar?: () => void;
   conversationId: string;
   targetUserId?: string;

package/src/translation/resources/i18n.ts

@@ -80,6 +80,18 @@ const i18nKey: Record<string, string> = {
   'chat:mute_confirm_secondary': 'Quay lại',
   'chat:mute_toast_success': 'Đã tắt thông báo',
   'chat:unmute_toast_success': 'Đã bật thông báo',
+  'chat:info_title': 'Tuỳ chọn',
+  'chat:info_search_action': 'Tìm tin nhắn',
+  'chat:info_media_photo': 'Ảnh',
+  'chat:info_media_video': 'Video',
+  'chat:info_media_file': 'Tập tin',
+  'chat:info_media_link': 'Liên kết',
+  'chat:info_orders': 'Đơn hàng đã tạo cho {{name}}',
+  'chat:info_create_group': 'Tạo nhóm trò chuyện với {{name}}',
+  'chat:info_add_to_group': 'Thêm vào nhóm',
+  'chat:info_pin_message': 'Ghim trò chuyện',
+  'chat:info_unpin_message': 'Bỏ ghim trò chuyện',
+  'chat:info_delete_history': 'Xoá lịch sử trò chuyện',
   'start': 'Bắt đầu',
   'restart': 'Bắt đầu lại',
   'gallery': 'Ảnh/Video',