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

package/src/social/features/chat/features/group/select-member/styles.ts

@@ -0,0 +1,20 @@
+// Styles for SelectGroupMember — ported from AmityUiKitWeb
+// v4/chat/features/group/select-member/SelectGroupMember.module.css.
+// Web `min-height: 100svh` → flex:1 (no svh in RN). Colours via design tokens.
+
+import { StyleSheet } from 'react-native';
+import { useToken } from '../../../../../../core/design/theme/useToken';
+import { AmityColorToken } from '../../../../../../core/design/tokens/amity-color-tokens';
+
+export const useStyles = () => {
+  const token = useToken();
+
+  const styles = StyleSheet.create({
+    selectGroupMember: {
+      flex: 1,
+      backgroundColor: token(AmityColorToken.SurfacePageBackgroundDefault),
+    },
+  });
+
+  return { styles, token };
+};

package/src/social/features/chat/features/group/setting/GroupSetting.tsx

@@ -0,0 +1,94 @@
+// GroupSetting — group chat settings screen, ported from AmityUiKitWeb
+// v4/chat/features/group/setting/GroupSetting. A header + group avatar over one
+// or two sections of tappable SettingMenu rows, then a destructive "Leave group".
+//
+// RN adaptations from web:
+//   - `<div>` → View; the page scrolls via ScrollView (web relied on document flow).
+//   - Web resolved the avatar from the SDK File; RN's Avatar.GroupChat takes a
+//     resolved `avatarUrl` + `isPublic` (the hook resolves the url via useFile).
+//   - Section titles use Typography `titleBold`; the inter-section divider only
+//     renders when both sections have visible rows. The "Your preferences" section
+//     holds the per-user "Notifications" row (visible to all members); the group
+//     section's moderator-only "Group notifications" mode row shows for moderators.
+
+// 1. React / RN imports
+import { ScrollView, View } from 'react-native';
+
+// 2. Internal imports (relative)
+import { Typography } from '../../../../../../core/design/components/Typography';
+import { Avatar } from '../../../elements/Avatar';
+import { SettingMenu } from '../../../elements/SettingMenu';
+import { Header } from './components/Header/Header';
+import {
+  useGroupSetting,
+  type GroupSettingProps,
+} from './hooks/useGroupSetting';
+import { useStyles } from './styles';
+
+// 3. Named function component
+export function GroupSetting({ channelId }: GroupSettingProps) {
+  const { styles } = useStyles();
+  const {
+    title,
+    avatarUrl,
+    groupSettingsSection,
+    yourPreferencesSection,
+    leaveGroupLabel,
+    handleClose,
+    handleLeaveGroup,
+    visibleGroupItems,
+    visiblePreferenceItems,
+  } = useGroupSetting({ channelId });
+
+  return (
+    <View style={styles.container}>
+      <Header title={title} onBack={handleClose} />
+      <ScrollView>
+        <View style={styles.avatarWrapper}>
+          <View style={styles.avatar}>
+            <Avatar.GroupChat avatarUrl={avatarUrl} size="lg" />
+          </View>
+        </View>
+
+        {visibleGroupItems.length > 0 && (
+          <View style={styles.section}>
+            <Typography variant="titleBold" style={styles.sectionTitle}>
+              {groupSettingsSection}
+            </Typography>
+            {visibleGroupItems.map(
+              ({ key, visible: _visible, ...itemProps }) => (
+                <SettingMenu key={key} {...itemProps} />
+              )
+            )}
+          </View>
+        )}
+
+        {visibleGroupItems.length > 0 && visiblePreferenceItems.length > 0 && (
+          <View style={styles.divider} />
+        )}
+
+        {visiblePreferenceItems.length > 0 && (
+          <View style={styles.section}>
+            <Typography variant="titleBold" style={styles.sectionTitle}>
+              {yourPreferencesSection}
+            </Typography>
+            {visiblePreferenceItems.map(
+              ({ key, visible: _visible, ...itemProps }) => (
+                <SettingMenu key={key} {...itemProps} />
+              )
+            )}
+          </View>
+        )}
+
+        <View style={styles.section}>
+          <SettingMenu
+            destructive
+            label={leaveGroupLabel}
+            onPress={handleLeaveGroup}
+            accessibilityLabel={leaveGroupLabel}
+          />
+        </View>
+      </ScrollView>
+    </View>
+  );
+}

package/src/social/features/chat/features/group/setting/components/Header/Header.tsx

@@ -0,0 +1,17 @@
+// Header — group-setting header, ported from AmityUiKitWeb
+// v4/chat/features/group/setting/components/Header. Thin wrapper over the shared
+// TopBar (back variant) showing the group title.
+
+// 1. Internal imports (relative)
+import { TopBar } from '../../../../../elements/TopBar';
+
+// 2. Types
+type HeaderProps = {
+  title: string;
+  onBack: () => void;
+};
+
+// 3. Named function component
+export function Header({ title, onBack }: HeaderProps) {
+  return <TopBar title={title} leadingType="back" onLeading={onBack} />;
+}

package/src/social/features/chat/features/group/setting/components/Header/index.ts

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

package/src/social/features/chat/features/group/setting/components/index.ts

@@ -0,0 +1 @@
+export * from './Header';

package/src/social/features/chat/features/group/setting/hooks/index.ts

@@ -0,0 +1 @@
+export * from './useGroupSetting';

package/src/social/features/chat/features/group/setting/hooks/useGroupSetting.ts

@@ -0,0 +1,324 @@
+// useGroupSetting — RN port of AmityUiKitWeb v4/chat/features/group/setting/hooks/useGroupSetting.
+// Owns the group-settings screen state: the live channel object, the viewer's
+// moderator role, the visible setting rows and the leave-group flow.
+//
+// RN adaptations from web:
+//   - Web `useChannelObject` → an inline `ChannelRepository.getChannel` live-object
+//     subscription (gated on `useAuth().isConnected`, mirroring `useConversation`).
+//   - Web `useChannelMyMembership(channel)` → the channel's own `myMembership`
+//     live subscription, whose callback delivers `{ data: membership }`.
+//   - Web `useChatNavigation` (in-memory page stack push/pop) → React Navigation.
+//     The group sub-pages register in a later wave, so navigation is done through
+//     an `any`-typed `useNavigation` (same pattern as `AmityChatHomePage`) so the
+//     not-yet-registered route names typecheck.
+//   - Web `useConfirmContext().confirm` (in-app dialog) → RN `Alert.alert`.
+//   - Web `useNotifications('chat').success/error` → the redux toast (`useToast`).
+//   - The two notification rows are now live (iOS-aligned): the "Group notifications"
+//     row (moderator-only) opens the mode page and shows the current mode label
+//     (Default/Silent/Subscribe) from `channel.notificationMode`; the "Notifications"
+//     preference row (all members) opens the per-user toggle page and shows On/Off
+//     from `Client.notifications().channel(id).getSettings().isEnabled` — the exact
+//     surface the notification-preference port already uses.
+//   - `SettingMenu` takes `iconName` (SoT icon name) rather than web's `icon`
+//     element, and `accessibilityLabel` rather than web's `ariaLabel`.
+
+// 1. React / RN imports
+import { useCallback, useEffect, useState } from 'react';
+import { Alert } from 'react-native';
+
+// 2. Third-party imports
+import {
+  AmityChannelNotificationModeEnum,
+  ChannelRepository,
+  Client,
+} from '@amityco/ts-sdk-react-native';
+import { useFocusEffect, useNavigation } from '@react-navigation/native';
+import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
+
+// 3. Internal imports (relative)
+import useAuth from '../../../../../../../core/hooks/useAuth';
+import useFile from '../../../../../../../core/hooks/useFile';
+import { useString } from '../../../../../../../core/localization';
+import { useToast } from '../../../../../../../core/stores/slices/toastSlice';
+import type { SettingMenuProps } from '../../../../elements/SettingMenu';
+
+// 4. Types
+export type GroupSettingProps = {
+  channelId: string;
+};
+
+export type SettingMenuItem = SettingMenuProps & {
+  key: string;
+  visible: boolean;
+};
+
+// Web reads MODERATOR_ROLES from chat/constants/memberRoles; inlined here to match
+// the sibling RN port (AmityChatListItem) and keep the feature self-contained.
+const MODERATOR_ROLES = [
+  'moderator',
+  'community-moderator',
+  'channel-moderator',
+];
+
+function hasModeratorRole(roles?: string[]): boolean {
+  if (!roles || roles.length === 0) return false;
+  return roles.some((role) => MODERATOR_ROLES.includes(role));
+}
+
+// 5. Hook
+export function useGroupSetting({ channelId }: GroupSettingProps) {
+  const { isConnected } = useAuth();
+  const { showToast } = useToast();
+  const navigation = useNavigation<NativeStackNavigationProp<any>>();
+
+  const [channel, setChannel] = useState<Amity.Channel | undefined>(undefined);
+  const [roles, setRoles] = useState<string[] | undefined>(undefined);
+  // Per-user channel push setting — drives the "Notifications" row's On/Off label.
+  const [isNotificationsEnabled, setIsNotificationsEnabled] = useState(true);
+
+  // Live channel object (web `useChannelObject`).
+  useEffect(() => {
+    if (!isConnected || !channelId) return undefined;
+    const unsub = ChannelRepository.getChannel(channelId, ({ data }) => {
+      if (data) setChannel(data);
+    });
+    return () => {
+      unsub();
+    };
+  }, [isConnected, channelId]);
+
+  // Viewer's channel membership (web `useChannelMyMembership`).
+  useEffect(() => {
+    if (!channel) return undefined;
+    const unsub = channel.myMembership(({ data }) => {
+      setRoles(data?.roles);
+    });
+    return () => {
+      unsub();
+    };
+  }, [channel]);
+
+  // Channel push setting (web `useChannelPushNotificationQuery`) — drives the
+  // trailing On/Off label. Reloaded on every screen focus (iOS
+  // `loadNotificationStatus` on appear) so the label refreshes after the user
+  // returns from AmityGroupNotificationPreferencePage having toggled it.
+  useFocusEffect(
+    useCallback(() => {
+      if (!isConnected || !channelId) return undefined;
+      let active = true;
+      Client.notifications()
+        .channel(channelId)
+        .getSettings()
+        .then((settings) => {
+          if (active) setIsNotificationsEnabled(settings.isEnabled);
+        })
+        .catch(() => {});
+      return () => {
+        active = false;
+      };
+    }, [isConnected, channelId])
+  );
+
+  const isModerator = hasModeratorRole(roles);
+  const avatarUrl = useFile({ fileId: channel?.avatarFileId ?? '' });
+
+  const groupSettingsSection = useString('amity_chat_group_settings_section');
+  const yourPreferencesSection = useString(
+    'amity_chat_your_preferences_section'
+  );
+  const leaveGroupLabel = useString('amity_chat_group_leave');
+
+  const lastModTitle = useString('amity_chat_group_leave_last_mod_title');
+  const lastModMessage = useString('amity_chat_group_leave_last_mod_message');
+  const promoteMemberLabel = useString('amity_chat_group_promote_member');
+  const cancelLabel = useString('amity_chat_cancel');
+  const leaveTitle = useString('amity_chat_group_leave_confirm_title');
+  const leaveMessage = useString('amity_chat_group_leave_confirm_message');
+  const leaveConfirm = useString('amity_chat_group_leave_confirm_label');
+  const leaveSuccessToast = useString('amity_chat_toast_group_chat_left');
+  const leaveFailedToast = useString('amity_chat_action_leave_group_failed');
+
+  const groupProfileLabel = useString('amity_chat_group_profile');
+  const groupNotificationsLabel = useString('amity_chat_group_notifications');
+  const memberPermissionsLabel = useString(
+    'amity_chat_group_member_permissions'
+  );
+  const allMembersLabel = useString('amity_chat_group_members_label');
+  const bannedUsersLabel = useString('amity_chat_group_banned_members');
+  const notificationsLabel = useString('amity_chat_notifications_title');
+
+  // Trailing labels (iOS `notificationModeLabel()` + On/Off).
+  const modeDefaultLabel = useString(
+    'amity_chat_group_notification_default_label'
+  );
+  const modeSilentLabel = useString(
+    'amity_chat_group_notification_silent_label'
+  );
+  const modeSubscribeLabel = useString(
+    'amity_chat_group_notification_subscribe_label'
+  );
+  const notificationsOnLabel = useString('amity_chat_notifications_on');
+  const notificationsOffLabel = useString('amity_chat_notifications_off');
+
+  const notificationModeLabel =
+    channel?.notificationMode === AmityChannelNotificationModeEnum.Silent
+      ? modeSilentLabel
+      : channel?.notificationMode === AmityChannelNotificationModeEnum.Subscribe
+      ? modeSubscribeLabel
+      : modeDefaultLabel;
+  const notificationsTrailing = isNotificationsEnabled
+    ? notificationsOnLabel
+    : notificationsOffLabel;
+
+  function handleClose() {
+    navigation.goBack();
+  }
+
+  function handleOpenGroupProfile() {
+    navigation.navigate('AmityEditGroupProfilePage', { channelId });
+  }
+
+  function handleOpenGroupNotification() {
+    navigation.navigate('AmityEditGroupNotificationPage', { channelId });
+  }
+
+  function handleOpenGroupMemberPermissions() {
+    navigation.navigate('AmityEditGroupMemberPermissionsPage', { channelId });
+  }
+
+  function handleOpenGroupNotificationPreference() {
+    navigation.navigate('AmityGroupNotificationPreferencePage', { channelId });
+  }
+
+  function handleOpenAllMembers() {
+    navigation.navigate('AmityGroupMemberListPage', { channelId });
+  }
+
+  function handleOpenBannedMembers() {
+    navigation.navigate('AmityBannedGroupMemberListPage', { channelId });
+  }
+
+  // Web `pop(); pop();` returns to the channel list past the group chat; on native
+  // stack `pop(2)` does the same in a single, batching-safe call.
+  function popToList() {
+    if (typeof navigation.pop === 'function') {
+      navigation.pop(2);
+    } else {
+      navigation.goBack();
+      navigation.goBack();
+    }
+  }
+
+  function handleLeaveGroup() {
+    if (!isConnected || !channelId) return;
+    const moderatorCount = channel?.moderatorMemberCount ?? 0;
+    const isLastModerator = isModerator && moderatorCount <= 1;
+
+    if (isLastModerator) {
+      Alert.alert(lastModTitle, lastModMessage, [
+        { text: cancelLabel, style: 'cancel' },
+        {
+          text: promoteMemberLabel,
+          onPress: () => handleOpenAllMembers(),
+        },
+      ]);
+      return;
+    }
+
+    Alert.alert(leaveTitle, leaveMessage, [
+      { text: cancelLabel, style: 'cancel' },
+      {
+        text: leaveConfirm,
+        style: 'destructive',
+        onPress: async () => {
+          try {
+            await ChannelRepository.leaveChannel(channelId);
+            popToList();
+            showToast({
+              message: leaveSuccessToast,
+              type: 'success',
+              variant: 'custom',
+            });
+          } catch {
+            showToast({
+              message: leaveFailedToast,
+              type: 'failed',
+              variant: 'custom',
+            });
+          }
+        },
+      },
+    ]);
+  }
+
+  const groupItems: SettingMenuItem[] = [
+    {
+      key: 'group-profile',
+      iconName: 'pen-s',
+      label: groupProfileLabel,
+      onPress: handleOpenGroupProfile,
+      accessibilityLabel: groupProfileLabel,
+      visible: isModerator,
+    },
+    {
+      key: 'group-notifications',
+      iconName: 'bell-s',
+      label: groupNotificationsLabel,
+      trailingText: notificationModeLabel,
+      onPress: handleOpenGroupNotification,
+      accessibilityLabel: groupNotificationsLabel,
+      visible: isModerator,
+    },
+    {
+      key: 'member-permissions',
+      iconName: 'user-lock-s',
+      label: memberPermissionsLabel,
+      onPress: handleOpenGroupMemberPermissions,
+      accessibilityLabel: memberPermissionsLabel,
+      visible: isModerator,
+    },
+    {
+      key: 'all-members',
+      iconName: 'user-group-s',
+      label: allMembersLabel,
+      onPress: handleOpenAllMembers,
+      accessibilityLabel: allMembersLabel,
+      visible: true,
+    },
+    {
+      key: 'banned-users',
+      iconName: 'ban-s',
+      label: bannedUsersLabel,
+      onPress: handleOpenBannedMembers,
+      accessibilityLabel: bannedUsersLabel,
+      visible: isModerator,
+    },
+  ];
+
+  const preferenceItems: SettingMenuItem[] = [
+    {
+      key: 'notifications',
+      iconName: 'bell-s',
+      label: notificationsLabel,
+      trailingText: notificationsTrailing,
+      onPress: handleOpenGroupNotificationPreference,
+      accessibilityLabel: notificationsLabel,
+      visible: true,
+    },
+  ];
+
+  const visibleGroupItems = groupItems.filter((item) => item.visible);
+  const visiblePreferenceItems = preferenceItems.filter((item) => item.visible);
+
+  return {
+    title: channel?.displayName ?? '',
+    avatarUrl,
+    groupSettingsSection,
+    yourPreferencesSection,
+    leaveGroupLabel,
+    handleClose,
+    handleLeaveGroup,
+    visibleGroupItems,
+    visiblePreferenceItems,
+  };
+}

package/src/social/features/chat/features/group/setting/index.ts

@@ -0,0 +1,2 @@
+export { GroupSetting } from './GroupSetting';
+export type { GroupSettingProps } from './hooks/useGroupSetting';

package/src/social/features/chat/features/group/setting/styles.ts

@@ -0,0 +1,50 @@
+// Styles for GroupSetting — ported from AmityUiKitWeb
+// v4/chat/features/group/setting/GroupSetting.module.css.
+// rem → px×16; colours via design tokens (no hardcoded hex).
+
+import { StyleSheet } from 'react-native';
+import { useToken } from '../../../../../../core/design/theme/useToken';
+import { AmityColorToken } from '../../../../../../core/design/tokens/amity-color-tokens';
+
+export const useStyles = () => {
+  const token = useToken();
+
+  const styles = StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: token(AmityColorToken.SurfacePageBackgroundDefault),
+    },
+    // .groupSetting__avatarWrapper — center, 1rem vertical padding.
+    avatarWrapper: {
+      alignItems: 'center',
+      justifyContent: 'center',
+      paddingVertical: 16,
+    },
+    // .groupSetting__avatar — 7.5rem square, 1.5rem radius, clipped.
+    avatar: {
+      width: 120,
+      height: 120,
+      borderRadius: 24,
+      overflow: 'hidden',
+    },
+    section: {
+      width: '100%',
+      flexDirection: 'column',
+    },
+    // .groupSetting__sectionTitle — padding 1.5rem/1rem/0.25rem.
+    sectionTitle: {
+      paddingTop: 24,
+      paddingHorizontal: 16,
+      paddingBottom: 4,
+      color: token(AmityColorToken.TextListHeaderDefaultDefault),
+    },
+    // .groupSetting__divider — hairline, inset 1rem, post-divider tint.
+    divider: {
+      height: 1,
+      marginHorizontal: 16,
+      backgroundColor: token(AmityColorToken.LineDividerPostDefault),
+    },
+  });
+
+  return { styles, token };
+};

package/src/social/features/chat/features/home/ChatHome.tsx

@@ -0,0 +1,84 @@
+// ChatHome — ported from AmityUiKitWeb v4/chat/features/home/ChatHome.
+// Composes the Header, the tab bar (All / Direct / Groups) and the active
+// ChannelList for the selected tab's channel types.
+//
+// RN adaptations from web:
+//   - `useChatFeatureFlags` gating is dropped for M1: a static three-tab config
+//     is used (All + Direct + Groups).
+//   - Web has no notification features, so the "Push notifications have been
+//     disabled by admin" banner is ported from AmityUIKitIOS (release/4.25.0):
+//     usePushNotificationEnabled fetches the network/chat-module push setting and
+//     ChannelList renders the banner above the list when it's disabled.
+
+// 1. React / RN imports
+import { useMemo, useState } from 'react';
+import { View } from 'react-native';
+
+// 2. Internal imports (relative)
+import { Tabs } from '../../../../../core/design/molecules/Tabs';
+import { useString } from '../../../../../core/localization';
+import { Header } from './components/Header';
+import { ChannelList } from './components/ChannelList';
+import { usePushNotificationEnabled } from './hooks';
+import { useStyles } from './styles';
+
+// 3. Types
+export type ChatHomeProps = {
+  /** Called with the pressed channel id + display name + type — the page wires navigation. */
+  onChannelPress?: (
+    channelId: string,
+    displayName?: string,
+    type?: Amity.ChannelType
+  ) => void;
+  /** Called when the empty-state create button is pressed. */
+  onCreatePress?: () => void;
+};
+
+const TAB_TYPES: Record<string, Amity.ChannelType[]> = {
+  all: ['conversation', 'community'],
+  direct: ['conversation'],
+  group: ['community'],
+};
+
+// 4. Named function component
+export function ChatHome({ onChannelPress, onCreatePress }: ChatHomeProps) {
+  const { styles } = useStyles();
+  const isPushNotificationEnabled = usePushNotificationEnabled();
+
+  const allLabel = useString('amity_chat_tab_all');
+  const directLabel = useString('amity_chat_tab_direct');
+  const groupsLabel = useString('amity_chat_tab_groups');
+
+  const [activeTab, setActiveTab] = useState<string>('all');
+
+  const tabs = useMemo(
+    () => [
+      { value: 'all', label: allLabel },
+      { value: 'direct', label: directLabel },
+      { value: 'group', label: groupsLabel },
+    ],
+    [allLabel, directLabel, groupsLabel]
+  );
+
+  return (
+    <View style={styles.container}>
+      <Header />
+      <View style={styles.tabsWrapper}>
+        <Tabs
+          variant="pill"
+          value={activeTab}
+          onChange={setActiveTab}
+          tabs={tabs}
+        />
+      </View>
+      <View style={styles.listWrapper}>
+        <ChannelList
+          types={TAB_TYPES[activeTab]}
+          isPushNotificationEnabled={isPushNotificationEnabled}
+          onChannelPress={onChannelPress}
+          onCreatePress={onCreatePress}
+        />
+      </View>
+    </View>
+  );
+}