@amityco/react-native-social-uikit 4.1.0 → 4.1.1-d7da0c5c.0

package/src/social/features/chat/components/AmityConversationChatUserActionComponent/AmityConversationChatUserActionComponent.tsx

@@ -0,0 +1,293 @@
+// AmityConversationChatUserActionComponent — RN port of the 1-1 conversation
+// user action menu that AmityUiKitWeb builds in
+// `conversation/chat/hooks/useConversationActions` (block / report / notification).
+//
+// RN MOBILE ADAPTATION: web mounts this menu in a desktop Popover triggered from
+// the conversation Header's trailing button. On RN it is a native BOTTOM SHEET —
+// the component now owns the trailing "⋮" trigger and, on press, pushes the same
+// action list into the repo's global @devvie bottom sheet
+// (`useBottomSheet` → BottomSheetComponent). The menu body reuses the SoT `Menu`
+// in its `drawer` container (mirrors the web mobile drawer). Only the CONTAINER
+// changed Popover → bottom sheet: the items, handlers, labels, tokens and
+// destructive confirmations are unchanged.
+//
+// This mirrors web `useConversationActions` (and iOS
+// `AmityConversationChatUserActionComponent`): three actions — notification
+// (mute/unmute), report, block. The notification row toggles the channel push
+// setting via `Client.notifications().channel(id)` (enable → unmuted, disable →
+// muted), the exact surface the group notification-preference port uses; its
+// state is read once from `getSettings().isEnabled`. Icon/label are action-facing:
+// enabled → `bell-slash-r` + "Turn off notification"; disabled → `bell-s` +
+// "Turn on notification" (iOS `bellSlashR`/`bellS`). `isBlockedByMe` is read live
+// from `UserRepository.Relationship.getFollowInfo` (`status === 'blocked'`) so the
+// block/unblock label is always correct; report toggles flag/unflag off its own
+// live `UserRepository.isUserFlaggedByMe` state (label flips Report ↔ Unreport
+// user), mirroring the block/unblock row. Web's
+// `ConfirmProvider` maps to the native `Alert.alert`. SDK calls are gated on
+// `useAuth().isConnected`.
+
+// 1. React / RN imports
+import { useEffect, useState } from 'react';
+import { Alert, Pressable, View } from 'react-native';
+
+// 2. Third-party imports
+import { Client, UserRepository } from '@amityco/ts-sdk-react-native';
+
+// 3. Internal imports
+import { Menu } from '../../../../../core/design/components/Menu';
+import {
+  AmityIcon,
+  type AmityIconName,
+} from '../../../../../core/design/icons';
+import { AmityColorToken } from '../../../../../core/design/tokens/amity-color-tokens';
+import { resolveString } from '../../../../../core/localization';
+import useAuth from '../../../../../core/hooks/useAuth';
+import { useBottomSheet } from '../../../../../core/stores/slices/bottomSheetSlice';
+import { useChatNotifications } from '../../hooks/useChatNotifications';
+import { useStyles } from './styles';
+
+// 4. Types
+type AmityConversationChatUserActionComponentProps = {
+  user: Amity.InternalUser;
+  channelId: string;
+};
+
+type ActionItem = {
+  key: string;
+  icon: AmityIconName;
+  label: string;
+  onPress: () => void;
+};
+
+// 5. Named function component
+export function AmityConversationChatUserActionComponent({
+  user,
+  channelId,
+}: AmityConversationChatUserActionComponentProps) {
+  const { styles } = useStyles();
+  const { isConnected } = useAuth();
+  const { success, error } = useChatNotifications();
+  const { openBottomSheet, closeBottomSheet, bottomSheetHeight } =
+    useBottomSheet();
+
+  const userId = user.userId;
+  const displayName = user.displayName ?? user.userId;
+
+  const [isBlockedByMe, setIsBlockedByMe] = useState(false);
+  // Report state: read once from `UserRepository.isUserFlaggedByMe`; the report
+  // row toggles flag/unflag live so the label flips Report ↔ Unreport user.
+  const [isFlaggedByMe, setIsFlaggedByMe] = useState(false);
+  // Channel push-notification state (web `useChannelPushNotificationQuery`):
+  // read once from `getSettings().isEnabled`; the row toggles it live.
+  const [isNotificationEnabled, setIsNotificationEnabled] = useState(true);
+
+  useEffect(() => {
+    if (!isConnected || !userId) return undefined;
+    const unsub = UserRepository.Relationship.getFollowInfo(
+      userId,
+      ({ data }) => {
+        setIsBlockedByMe(data?.status === 'blocked');
+      }
+    );
+    return () => {
+      unsub();
+    };
+  }, [isConnected, userId]);
+
+  useEffect(() => {
+    if (!isConnected || !userId) return undefined;
+    let active = true;
+    UserRepository.isUserFlaggedByMe(userId)
+      .then((flagged) => {
+        if (active) setIsFlaggedByMe(flagged);
+      })
+      .catch(() => {});
+    return () => {
+      active = false;
+    };
+  }, [isConnected, userId]);
+
+  useEffect(() => {
+    if (!isConnected || !channelId) return undefined;
+    let active = true;
+    Client.notifications()
+      .channel(channelId)
+      .getSettings()
+      .then((settings) => {
+        if (active) setIsNotificationEnabled(settings.isEnabled);
+      })
+      .catch(() => {});
+    return () => {
+      active = false;
+    };
+  }, [isConnected, channelId]);
+
+  async function handleToggleNotification() {
+    if (!isConnected || !channelId) return;
+    const next = !isNotificationEnabled;
+    try {
+      const manager = Client.notifications().channel(channelId);
+      if (next) {
+        await manager.enable();
+      } else {
+        await manager.disable();
+      }
+      setIsNotificationEnabled(next);
+      success({
+        content: resolveString(
+          next ? 'amity_chat_action_unmute' : 'amity_chat_action_mute'
+        ),
+      });
+    } catch {
+      error({
+        content: resolveString(
+          next
+            ? 'amity_chat_action_unmute_failed'
+            : 'amity_chat_action_mute_failed'
+        ),
+      });
+    }
+  }
+
+  async function handleReport() {
+    if (!isConnected) return;
+    const next = !isFlaggedByMe;
+    try {
+      if (next) {
+        await UserRepository.flagUser(userId);
+      } else {
+        await UserRepository.unflagUser(userId);
+      }
+      setIsFlaggedByMe(next);
+      success({
+        content: resolveString(
+          next
+            ? 'amity_chat_action_report_user_success'
+            : 'amity_chat_action_unreport_user_success'
+        ),
+      });
+    } catch {
+      error({
+        content: resolveString(
+          next
+            ? 'amity_chat_action_report_user_failed'
+            : 'amity_chat_action_unreport_user_failed'
+        ),
+      });
+    }
+  }
+
+  function handleToggleBlock() {
+    if (!isConnected) return;
+    if (isBlockedByMe) {
+      Alert.alert(
+        resolveString('amity_chat_unblock_confirm_title'),
+        resolveString('amity_chat_unblock_confirm_message', displayName),
+        [
+          { text: resolveString('amity_chat_cancel'), style: 'cancel' },
+          {
+            text: resolveString('amity_chat_unblock_confirm_label'),
+            onPress: async () => {
+              await UserRepository.Relationship.unBlockUser(userId);
+              success({ content: resolveString('amity_chat_unblock_success') });
+            },
+          },
+        ]
+      );
+    } else {
+      Alert.alert(
+        resolveString('amity_chat_block_confirm_title'),
+        resolveString('amity_chat_block_confirm_message', displayName),
+        [
+          { text: resolveString('amity_chat_cancel'), style: 'cancel' },
+          {
+            text: resolveString('amity_chat_block_confirm_label'),
+            style: 'destructive',
+            onPress: async () => {
+              await UserRepository.Relationship.blockUser(userId);
+              success({ content: resolveString('amity_chat_block_success') });
+            },
+          },
+        ]
+      );
+    }
+  }
+
+  const items: ActionItem[] = [
+    {
+      key: 'notification',
+      // Both states use the REGULAR (outline) bell: web's useConversationActions
+      // resolves `isNotificationEnabled ? BellSlash : Bell`, and its bare `Bell` /
+      // `BellSlash` exports are the Regular variant (Solid is opt-in via
+      // `Bell.Solid`). The group-setting rows are the ones that legitimately use
+      // the solid bell — web asks for `Bell.Solid` there.
+      icon: isNotificationEnabled ? 'bell-slash-r' : 'bell-r',
+      label: resolveString(
+        isNotificationEnabled
+          ? 'amity_chat_action_turn_off_notification'
+          : 'amity_chat_action_turn_on_notification'
+      ),
+      onPress: handleToggleNotification,
+    },
+    {
+      key: 'report',
+      // PDT-4143 (web PR 1822): the icon flips with the state, not just the
+      // label — `isReported ? FlagSlash : Flag`.
+      icon: isFlaggedByMe ? 'flag-slash-r' : 'flag-r',
+      label: resolveString(
+        isFlaggedByMe
+          ? 'amity_chat_action_unreport_user'
+          : 'amity_chat_action_report_user'
+      ),
+      onPress: handleReport,
+    },
+    {
+      key: 'block',
+      icon: 'ban-r',
+      label: resolveString(
+        isBlockedByMe
+          ? 'amity_chat_action_unblock_user'
+          : 'amity_chat_action_block_user'
+      ),
+      onPress: handleToggleBlock,
+    },
+  ];
+
+  function openActionSheet() {
+    openBottomSheet({
+      height: bottomSheetHeight[items.length as keyof typeof bottomSheetHeight],
+      content: (
+        <View style={styles.sheetContainer}>
+          <Menu variant="chat" container="drawer">
+            {items.map((item) => (
+              <Menu.Item
+                key={item.key}
+                icon={item.icon}
+                label={item.label}
+                typography="body"
+                onPress={() => {
+                  closeBottomSheet();
+                  item.onPress();
+                }}
+              />
+            ))}
+          </Menu>
+        </View>
+      ),
+    });
+  }
+
+  return (
+    <Pressable
+      onPress={openActionSheet}
+      accessibilityRole="button"
+      accessibilityLabel="Conversation actions"
+    >
+      <AmityIcon
+        name="ellipsis-v-r"
+        size={24}
+        tokenColor={AmityColorToken.IconIconButtonGhostSecondaryDefault}
+      />
+    </Pressable>
+  );
+}

package/src/social/features/chat/components/AmityConversationChatUserActionComponent/index.ts

@@ -0,0 +1 @@
+export { AmityConversationChatUserActionComponent } from './AmityConversationChatUserActionComponent';

package/src/social/features/chat/components/AmityConversationChatUserActionComponent/styles.ts

@@ -0,0 +1,23 @@
+// Styles for AmityConversationChatUserActionComponent.
+// RN mobile adaptation: web presents the 1-1 user-action menu in a desktop
+// Popover; RN presents it in a native bottom sheet (the repo's global @devvie
+// BottomSheetComponent). The sheet body reuses the SoT `Menu` in its `drawer`
+// container, which renders rows with paddingHorizontal 0 — so this wrapper adds
+// the drawer's page side-padding (1rem → 16) plus a bottom inset.
+
+import { StyleSheet } from 'react-native';
+import { useToken } from '../../../../../core/design/theme/useToken';
+
+export const useStyles = () => {
+  const token = useToken();
+
+  const styles = StyleSheet.create({
+    // Bottom-sheet body wrapper around the drawer-variant Menu.
+    sheetContainer: {
+      paddingHorizontal: 16,
+      paddingBottom: 16,
+    },
+  });
+
+  return { styles, token };
+};

package/src/social/features/chat/components/AmityGroupMemberActionComponent/AmityGroupMemberActionComponent.tsx

@@ -0,0 +1,347 @@
+// AmityGroupMemberActionComponent — RN port of the member long-press action menu
+// that AmityUiKitWeb builds inline in `group/members/components/MemberList`
+// (`getActions`) and renders through its `ActionMenu`.
+//
+// Renders in the global @devvie bottom sheet (RN mobile adaptation; web uses a
+// desktop popover) — mirrors the sibling AmityConversationChatUserActionComponent.
+// The owning MemberItem row still wires the trailing ellipsis via the `anchor`
+// render-prop, whose `openPopover` now opens the sheet. Item visibility follows
+// web's `getActions` exactly: promote,
+// demote, mute, unmute, report, unreport, ban, remove — with the same
+// conditions (mute vs unmute by the member's mute state; report vs unreport by
+// whether the viewer has flagged them). Web's `ConfirmProvider` maps to the
+// native `Alert.alert` (the `useFailedMessageSheet` pattern), and
+// `useNotifications('chat')` to the `useChatNotifications` stub. Live SDK calls
+// are gated on `useAuth().isConnected`. Web resolves `isFlaggedByMe` lazily when
+// the menu opens (`queryIsFlaggedByMe`); RN resolves it once per row via
+// `UserRepository.isUserFlaggedByMe` (the visibility condition is what matters).
+
+// 1. React / RN imports
+import { useEffect, useState, type ReactNode } from 'react';
+import { Alert, View } from 'react-native';
+
+// 2. Third-party imports
+import {
+  ChannelRepository,
+  UserRepository,
+} from '@amityco/ts-sdk-react-native';
+
+// 3. Internal imports
+import { Menu } from '../../../../../core/design/components/Menu';
+import { type AmityIconName } from '../../../../../core/design/icons';
+import { resolveString } from '../../../../../core/localization';
+import { MemberRoles } from '../../../../../core/constants';
+import useAuth from '../../../../../core/hooks/useAuth';
+import { useBottomSheet } from '../../../../../core/stores/slices/bottomSheetSlice';
+import { useChatNotifications } from '../../hooks/useChatNotifications';
+import { useStyles } from './styles';
+
+// 4. Types
+type TriggerArgs = {
+  isOpen: boolean;
+  isDesktop: boolean;
+  openPopover: () => void;
+  closePopover: () => void;
+};
+
+type AmityGroupMemberActionComponentProps = {
+  /** Trigger render-prop (RN equivalent of web's `anchor`); wire the row's
+   *  ellipsis onPress to `openPopover`. */
+  anchor: (args: TriggerArgs) => ReactNode;
+  channelId: string;
+  user: Amity.InternalUser;
+  isMemberModerator: boolean;
+  isViewerModerator: boolean;
+  isMuted?: boolean;
+};
+
+type ActionItem = {
+  key: string;
+  icon: AmityIconName;
+  label: string;
+  destructive?: boolean;
+  onPress: () => void;
+  visible: boolean;
+};
+
+// 5. Named function component
+export function AmityGroupMemberActionComponent({
+  anchor,
+  channelId,
+  user,
+  isMemberModerator,
+  isViewerModerator,
+  isMuted = false,
+}: AmityGroupMemberActionComponentProps) {
+  const { styles } = useStyles();
+  const { isConnected } = useAuth();
+  const { success } = useChatNotifications();
+  const { openBottomSheet, closeBottomSheet, bottomSheetHeight } =
+    useBottomSheet();
+
+  const userId = user.userId;
+
+  const [isFlaggedByMe, setIsFlaggedByMe] = useState(false);
+
+  useEffect(() => {
+    if (!isConnected) return undefined;
+    let active = true;
+    UserRepository.isUserFlaggedByMe(userId)
+      .then((flagged) => {
+        if (active) setIsFlaggedByMe(!!flagged);
+      })
+      .catch(() => {});
+    return () => {
+      active = false;
+    };
+  }, [isConnected, userId]);
+
+  function confirmAlert(
+    title: string,
+    message: string,
+    confirmLabel: string,
+    destructive: boolean,
+    onConfirm: () => void
+  ) {
+    Alert.alert(title, message, [
+      { text: resolveString('amity_chat_cancel'), style: 'cancel' },
+      {
+        text: confirmLabel,
+        style: destructive ? 'destructive' : 'default',
+        onPress: onConfirm,
+      },
+    ]);
+  }
+
+  async function handlePromote() {
+    if (!isConnected) return;
+    await ChannelRepository.Moderation.addRole(
+      channelId,
+      MemberRoles.CHANNEL_MODERATOR,
+      [userId]
+    );
+    success({
+      content: resolveString('amity_chat_group_member_list_toast_promoted'),
+    });
+  }
+
+  async function handleDemote() {
+    if (!isConnected) return;
+    await ChannelRepository.Moderation.removeRole(
+      channelId,
+      MemberRoles.CHANNEL_MODERATOR,
+      [userId]
+    );
+    success({
+      content: resolveString('amity_chat_group_member_list_toast_demoted'),
+    });
+  }
+
+  async function handleBan() {
+    if (!isConnected) return;
+    await ChannelRepository.Moderation.banMembers(channelId, [userId]);
+    success({
+      content: resolveString('amity_chat_group_member_list_toast_banned'),
+    });
+  }
+
+  async function handleRemove() {
+    if (!isConnected) return;
+    await ChannelRepository.Membership.removeMembers(channelId, [userId]);
+    success({ content: resolveString('amity_chat_action_remove_member') });
+  }
+
+  async function handleMute() {
+    if (!isConnected) return;
+    await ChannelRepository.Moderation.muteMembers(channelId, [userId]);
+    success({ content: resolveString('amity_chat_action_mute_user') });
+  }
+
+  async function handleUnmute() {
+    if (!isConnected) return;
+    await ChannelRepository.Moderation.unmuteMembers(channelId, [userId]);
+    success({ content: resolveString('amity_chat_action_unmute_user') });
+  }
+
+  async function handleReport() {
+    if (!isConnected) return;
+    await UserRepository.flagUser(userId);
+    setIsFlaggedByMe(true);
+    success({
+      content: resolveString('amity_chat_action_report_user_success'),
+    });
+  }
+
+  async function handleUnreport() {
+    if (!isConnected) return;
+    await UserRepository.unflagUser(userId);
+    setIsFlaggedByMe(false);
+    success({
+      content: resolveString('amity_chat_action_unreport_user_success'),
+    });
+  }
+
+  const items: ActionItem[] = [
+    {
+      key: 'promote',
+      icon: 'user-shield-r',
+      label: resolveString('amity_chat_member_action_promote'),
+      visible: isViewerModerator && !isMemberModerator,
+      onPress: () =>
+        confirmAlert(
+          resolveString('amity_chat_group_member_list_promote_title'),
+          resolveString('amity_chat_group_member_list_promote_message'),
+          resolveString('amity_chat_group_member_list_promote_confirm'),
+          false,
+          handlePromote
+        ),
+    },
+    {
+      key: 'demote',
+      icon: 'user-shield-r',
+      label: resolveString('amity_chat_member_action_demote'),
+      visible: isViewerModerator && isMemberModerator,
+      onPress: () =>
+        confirmAlert(
+          resolveString('amity_chat_group_member_list_demote_title'),
+          resolveString('amity_chat_group_member_list_demote_message'),
+          resolveString('amity_chat_group_member_list_demote_confirm'),
+          true,
+          handleDemote
+        ),
+    },
+    {
+      key: 'mute',
+      icon: 'volume-slash-r',
+      label: resolveString('amity_chat_group_member_action_mute'),
+      visible: isViewerModerator && !isMuted && !isMemberModerator,
+      onPress: () =>
+        confirmAlert(
+          resolveString('amity_chat_mute_confirm_title'),
+          resolveString('amity_chat_mute_confirm_message'),
+          resolveString('amity_chat_mute_confirm_label'),
+          true,
+          handleMute
+        ),
+    },
+    {
+      key: 'unmute',
+      icon: 'volume-s',
+      label: resolveString('amity_chat_group_member_action_unmute'),
+      visible: isViewerModerator && isMuted && !isMemberModerator,
+      onPress: () =>
+        confirmAlert(
+          resolveString('amity_chat_unmute_confirm_title'),
+          resolveString('amity_chat_unmute_confirm_message'),
+          resolveString('amity_chat_unmute_confirm_label'),
+          false,
+          handleUnmute
+        ),
+    },
+    {
+      key: 'report',
+      icon: 'flag-r',
+      label: resolveString('amity_chat_member_action_report'),
+      visible: !isFlaggedByMe,
+      onPress: handleReport,
+    },
+    {
+      key: 'unreport',
+      // LEADS WEB (PDT-4143): web PR 1822 gave the slashed flag to the message
+      // menu and the 1:1 conversation menu but missed this third site — its
+      // MemberList still renders `icon: Flag` for both report and unreport.
+      // Same intent applies here, so RN uses flag-slash-r; drop this marker once
+      // web's member list catches up.
+      icon: 'flag-slash-r',
+      label: resolveString('amity_chat_member_action_unreport'),
+      visible: isFlaggedByMe,
+      onPress: handleUnreport,
+    },
+    {
+      key: 'ban',
+      icon: 'ban-r',
+      label: resolveString('amity_chat_user_action_ban'),
+      visible: isViewerModerator,
+      onPress: () =>
+        confirmAlert(
+          resolveString('amity_chat_ban_confirm_title'),
+          resolveString('amity_chat_ban_confirm_message'),
+          resolveString('amity_chat_ban_confirm_label'),
+          true,
+          handleBan
+        ),
+    },
+    {
+      key: 'remove',
+      icon: 'trash-r',
+      label: resolveString('amity_chat_member_action_remove'),
+      destructive: true,
+      visible: isViewerModerator,
+      onPress: () =>
+        confirmAlert(
+          resolveString('amity_chat_group_member_list_remove_title'),
+          resolveString('amity_chat_group_member_list_remove_message'),
+          resolveString('amity_chat_group_member_list_remove_confirm'),
+          true,
+          handleRemove
+        ),
+    },
+  ];
+
+  const visibleItems = items.filter((item) => item.visible);
+
+  if (visibleItems.length === 0) {
+    return (
+      <>
+        {anchor({
+          isOpen: false,
+          isDesktop: true,
+          openPopover: () => {},
+          closePopover: () => {},
+        })}
+      </>
+    );
+  }
+
+  // Member actions render in the global bottom sheet (RN mobile adaptation —
+  // web uses a desktop popover). The row's ellipsis still triggers via the
+  // `anchor` render-prop; its `openPopover` now opens the sheet.
+  function openActionSheet() {
+    openBottomSheet({
+      height:
+        bottomSheetHeight[
+          visibleItems.length as keyof typeof bottomSheetHeight
+        ],
+      content: (
+        <View style={styles.sheetContainer}>
+          <Menu variant="chat" container="drawer">
+            {visibleItems.map((item) => (
+              <Menu.Item
+                key={item.key}
+                icon={item.icon}
+                label={item.label}
+                destructive={item.destructive}
+                typography="body"
+                onPress={() => {
+                  closeBottomSheet();
+                  item.onPress();
+                }}
+              />
+            ))}
+          </Menu>
+        </View>
+      ),
+    });
+  }
+
+  return (
+    <>
+      {anchor({
+        isOpen: false,
+        isDesktop: false,
+        openPopover: openActionSheet,
+        closePopover: closeBottomSheet,
+      })}
+    </>
+  );
+}

package/src/social/features/chat/components/AmityGroupMemberActionComponent/index.ts

@@ -0,0 +1 @@
+export { AmityGroupMemberActionComponent } from './AmityGroupMemberActionComponent';

package/src/social/features/chat/components/AmityGroupMemberActionComponent/styles.ts

@@ -0,0 +1,20 @@
+// Styles for AmityGroupMemberActionComponent. Member actions render in the global
+// bottom sheet (RN mobile adaptation; web uses a desktop popover). The drawer Menu
+// rows have 0 horizontal padding, so the sheet wrapper adds the 16px inset + a
+// bottom inset — mirroring the sibling AmityConversationChatUserActionComponent.
+
+import { StyleSheet } from 'react-native';
+import { useToken } from '../../../../../core/design/theme/useToken';
+
+export const useStyles = () => {
+  const token = useToken();
+
+  const styles = StyleSheet.create({
+    sheetContainer: {
+      paddingHorizontal: 16,
+      paddingBottom: 8,
+    },
+  });
+
+  return { styles, token };
+};