@droppii-org/chat-mobile 0.2.52 → 0.2.54

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,75 @@
+import { memo } from 'react';
+import { KContainer, KNavigation } from '@droppii/libs';
+import { useNavigation } from '@react-navigation/native';
+import {
+  useGetConversationDetail,
+  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(
+  ({
+    targetConversationId = '',
+    targetUserId = '',
+    targetGroupId = '',
+    targetBotId = '',
+    onBack,
+    onPressSearch,
+    onPressMedia,
+    onPressOrders,
+    onPressCreateGroup,
+    onPressAddToGroup,
+  }: ChatInfoProps) => {
+    const navigation = useNavigation();
+
+    const { conversationId } = useGetConversationDetail({
+      targetConversationId,
+      targetUserId,
+      targetGroupId,
+      targetBotId,
+    });
+
+    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}
+            targetUserId={targetUserId}
+            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,147 @@
+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 { useGetUsersInfo } from '../../hooks/users/useGetUsersInfo';
+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;
+  onPress?: () => void;
+}
+
+const QuickAction = memo(({ iconName, label, onPress }: QuickActionProps) => (
+  <KContainer.View alignItems paddingH="0.75rem" paddingV="0.5rem">
+    <KContainer.Touchable
+      height={40}
+      width={40}
+      br={'round'}
+      background={KColors.palette.gray.w25}
+      center
+      onPress={onPress}
+    >
+      <KImage.VectorIcons name={iconName} size={18} color={KColors.gray.dark} />
+    </KContainer.Touchable>
+    <KLabel.Text
+      typo="TextSmMedium"
+      color={KColors.gray.dark}
+      marginT="0.25rem"
+      textAlign="center"
+    >
+      {label}
+    </KLabel.Text>
+  </KContainer.View>
+));
+
+interface ChatInfoProfileProps {
+  conversation?: ConversationItem;
+  targetUserId?: string;
+  onPressSearch?: () => void;
+}
+
+const ChatInfoProfile = memo(
+  ({ conversation, targetUserId, onPressSearch }: ChatInfoProfileProps) => {
+    const { data: usersInfo } = useGetUsersInfo(
+      targetUserId ? [targetUserId] : []
+    );
+
+    const { faceURL, showName } = useMemo(() => {
+      const userInfo = usersInfo?.[0];
+      return {
+        faceURL: conversation?.faceURL || userInfo?.faceURL,
+        showName: conversation?.showName || userInfo?.nickname,
+      };
+    }, [conversation, usersInfo]);
+
+    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}
+          />
+          <QuickAction
+            iconName={isMuted ? 'bell-o' : 'bell-off-o'}
+            label={
+              isMuted ? trans('chat:unmute_action') : trans('chat:mute_action')
+            }
+            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,14 @@
+import type { DThreadResourceContentType } from '../../types/chat';
+
+export interface ChatInfoProps {
+  targetConversationId?: string;
+  targetUserId?: string;
+  targetGroupId?: string;
+  targetBotId?: string;
+  onBack?: () => void;
+  onPressSearch?: () => void;
+  onPressMedia?: (tab: DThreadResourceContentType) => void;
+  onPressOrders?: () => void;
+  onPressCreateGroup?: () => void;
+  onPressAddToGroup?: () => void;
+}