@amityco/react-native-social-uikit 4.1.1-fdf83f6b.0 → 4.2.0

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

@@ -1,290 +0,0 @@
-// 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/chat/components/AmityConversationChatUserActionComponent/index.ts

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

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

@@ -1,23 +0,0 @@
-// 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/chat/components/AmityGroupMemberActionComponent/AmityGroupMemberActionComponent.tsx

@@ -1,347 +0,0 @@
-// 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/chat/components/AmityGroupMemberActionComponent/index.ts

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

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

@@ -1,20 +0,0 @@
-// 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 };
-};