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

package/src/social/features/chat/features/group/members/components/MemberTabs/MemberTabs.tsx

@@ -0,0 +1,86 @@
+// MemberTabs — ported from AmityUiKitWeb
+// v4/chat/features/group/members/components/MemberTabs.
+//
+// Members / Moderators tabs, each with a search bar over a MemberList. Web's
+// react-aria Tabs rendered the panel content itself; the RN Tabs molecule is the
+// bar only, so this composes the bar + the active panel manually. Web debounced
+// via react-use `useDebounce`; RN uses a plain setTimeout effect (react-use is
+// not a dependency here), matching useCreateConversation.
+
+// 1. React / RN imports
+import { useEffect, useState } from 'react';
+import { View } from 'react-native';
+
+// 2. Internal imports
+import { Tabs } from '../../../../../../../../core/design/molecules/Tabs';
+import { SearchInput } from '../../../../../../../../core/design/molecules/SearchInput';
+import { useString } from '../../../../../../../../core/localization';
+import { MemberList } from '../MemberList';
+import { useStyles } from './styles';
+
+const SEARCH_DEBOUNCE_MS = 300;
+
+export enum MembershipsTab {
+  Members = 'members',
+  Moderators = 'moderators',
+}
+
+// 3. Types
+type MemberTabsProps = {
+  channelId: string;
+};
+
+// 4. Named function component
+export function MemberTabs({ channelId }: MemberTabsProps) {
+  const { styles } = useStyles();
+  const [activeTab, setActiveTab] = useState<string>(MembershipsTab.Members);
+  const [searchText, setSearchText] = useState('');
+  const [debouncedSearch, setDebouncedSearch] = useState('');
+
+  const searchPlaceholder = useString('amity_chat_search_placeholder');
+  const membersTabLabel = useString('amity_chat_member_tab_members');
+  const moderatorsTabLabel = useString('amity_chat_member_tab_moderators');
+
+  useEffect(() => {
+    const timer = setTimeout(
+      () => setDebouncedSearch(searchText),
+      SEARCH_DEBOUNCE_MS
+    );
+    return () => clearTimeout(timer);
+  }, [searchText]);
+
+  function handleTabChange(value: string) {
+    setActiveTab(value);
+    setSearchText('');
+    setDebouncedSearch('');
+  }
+
+  const onlyModerators = activeTab === MembershipsTab.Moderators;
+
+  return (
+    <View style={styles.container}>
+      <Tabs
+        variant="underlined"
+        value={activeTab}
+        onChange={handleTabChange}
+        tabs={[
+          { value: MembershipsTab.Members, label: membersTabLabel },
+          { value: MembershipsTab.Moderators, label: moderatorsTabLabel },
+        ]}
+      />
+      <View style={styles.searchBar}>
+        <SearchInput
+          value={searchText}
+          onChange={setSearchText}
+          placeholder={searchPlaceholder}
+          accessibilityLabel={searchPlaceholder}
+        />
+      </View>
+      <MemberList
+        channelId={channelId}
+        search={debouncedSearch}
+        onlyModerators={onlyModerators}
+      />
+    </View>
+  );
+}

package/src/social/features/chat/features/group/members/components/MemberTabs/index.ts

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

package/src/social/features/chat/features/group/members/components/MemberTabs/styles.ts

@@ -0,0 +1,18 @@
+// Styles for MemberTabs — ported from AmityUiKitWeb MemberTabs.module.css.
+// Column layout; search bar padding 0.5rem 1rem → 8/16.
+
+import { StyleSheet } from 'react-native';
+
+export const useStyles = () => {
+  const styles = StyleSheet.create({
+    container: {
+      flex: 1,
+    },
+    searchBar: {
+      paddingVertical: 8,
+      paddingHorizontal: 16,
+    },
+  });
+
+  return { styles };
+};

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

@@ -0,0 +1,4 @@
+export * from './Header';
+export * from './MemberItem';
+export * from './MemberList';
+export * from './MemberTabs';

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

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

package/src/social/features/chat/features/group/members/hooks/useGroupMembers.ts

@@ -0,0 +1,36 @@
+// useGroupMembers — ported from AmityUiKitWeb
+// v4/chat/features/group/members/hooks/useGroupMembers.
+//
+// Web computed the viewer's moderator status from `useChannelMyMembership` and
+// navigated via the in-app ChatNavigationProvider (pop / push AddGroupMemberPage).
+// RN reads moderator status through the shared `useChannelMyMembership` hook and
+// takes navigation as callback props (the hosting page owns the stack, which is
+// out of scope here): `onBack` defaults to `useChatNavigation().pop()`.
+
+import { useChannelMyMembership } from '../../../../hooks/useChannelMyMembership';
+import { useChatNavigation } from '../../../../hooks/useChatNavigation';
+
+export type UseGroupMembersParams = {
+  channelId: string;
+  onBack?: () => void;
+  onAddMember?: () => void;
+};
+
+export function useGroupMembers({
+  channelId,
+  onBack,
+  onAddMember,
+}: UseGroupMembersParams) {
+  const { pop } = useChatNavigation();
+  const { isViewerModerator } = useChannelMyMembership(channelId);
+
+  const handleBack = onBack ?? pop;
+  const handleOpenAddMember = onAddMember ?? (() => {});
+
+  return {
+    channelId,
+    isViewerModerator,
+    handleBack,
+    handleOpenAddMember,
+  };
+}

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

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

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

@@ -0,0 +1,19 @@
+// Styles for GroupMembers — ported from AmityUiKitWeb GroupMembers.module.css.
+// A full-height column filling the page background.
+
+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({
+    groupMembers: {
+      flex: 1,
+      backgroundColor: token(AmityColorToken.SurfacePageBackgroundDefault),
+    },
+  });
+
+  return { styles, token };
+};

package/src/social/features/chat/features/group/notification-preference/NotificationPreference.tsx

@@ -0,0 +1,66 @@
+// NotificationPreference — RN port of AmityUiKitWeb
+// v4/chat/features/group/notification-preference/NotificationPreference. A TopBar
+// over a single "allow notifications" toggle row. When the channel is silenced by
+// a moderator the toggle is shown read-only (reflecting the persisted value).
+//
+// RN adaptations from web:
+//   - `<div>` → View.
+//   - The web `Toggle` atom is skipped in RN (the parity map maps it to the native
+//     `Switch`), so `AllowNotifications` renders an RN `Switch`; the Controller
+//     wiring is preserved 1:1.
+//   - iOS-ALIGNED DEVIATION FROM WEB: web hard-codes `showDisabledByModeratorBanner
+//     = false` (the banner never renders on web), but iOS shows a moderator banner
+//     whenever the channel is silenced (`notificationMode === silent`), and cleverden
+//     REQ-004 mandates it. Since this feature is ported from iOS, the banner renders
+//     on `isSilent` (the toggle is already read-only in that state).
+
+// 1. React / RN imports
+import { View } from 'react-native';
+
+// 2. Third-party imports
+import { Controller } from 'react-hook-form';
+
+// 3. Internal imports (relative)
+import { TopBar } from '../../../elements/TopBar';
+import { useString } from '../../../../../../core/localization';
+import { AllowNotifications } from './components/AllowNotifications/AllowNotifications';
+import { DisabledByModeratorBanner } from './components/DisabledByModeratorBanner/DisabledByModeratorBanner';
+import {
+  useNotificationPreference,
+  type NotificationPreferenceProps,
+} from './hooks/useNotificationPreference';
+import { useStyles } from './styles';
+
+// 4. Named function component
+export function NotificationPreference({
+  channelId,
+}: NotificationPreferenceProps) {
+  const { styles } = useStyles();
+  const { control, handleClose, handleSave, isSilent, persistedIsEnabled } =
+    useNotificationPreference({ channelId });
+  const pageTitle = useString('amity_chat_group_notif_pref_navbar_title');
+
+  return (
+    <View style={styles.container}>
+      <TopBar title={pageTitle} leadingType="back" onLeading={handleClose} />
+      {isSilent && <DisabledByModeratorBanner />}
+      {isSilent ? (
+        <AllowNotifications isSelected={persistedIsEnabled} isDisabled />
+      ) : (
+        <Controller
+          control={control}
+          name="isEnabled"
+          render={({ field: { value, onChange } }) => (
+            <AllowNotifications
+              isSelected={value}
+              onChange={(next) => {
+                onChange(next);
+                handleSave();
+              }}
+            />
+          )}
+        />
+      )}
+    </View>
+  );
+}

package/src/social/features/chat/features/group/notification-preference/components/AllowNotifications/AllowNotifications.tsx

@@ -0,0 +1,75 @@
+// AllowNotifications — RN port of AmityUiKitWeb
+// v4/chat/features/group/notification-preference/components/AllowNotifications.
+// A list row: title + description on the left, an on/off toggle on the right.
+//
+// RN adaptations from web:
+//   - `<div>` → View; `data-disabled` styling → conditional `disabled` text styles.
+//   - The web `Toggle` atom is skipped in RN (parity map → native `Switch`); the
+//     Switch is tinted with the Surface/Toggle design tokens so the on/off/thumb
+//     colours match the web toggle.
+
+// 1. React / RN imports
+import { Switch, View } from 'react-native';
+
+// 2. Internal imports (relative)
+import { Typography } from '../../../../../../../../core/design/components/Typography';
+import { AmityColorToken } from '../../../../../../../../core/design/tokens/amity-color-tokens';
+import { useString } from '../../../../../../../../core/localization';
+import { useStyles } from './styles';
+
+// 3. Types
+type AllowNotificationsProps = {
+  isSelected: boolean;
+  isDisabled?: boolean;
+  onChange?: (value: boolean) => void;
+};
+
+// 4. Named function component
+export function AllowNotifications({
+  isSelected,
+  isDisabled = false,
+  onChange,
+}: AllowNotificationsProps) {
+  const { styles, token } = useStyles();
+  const title = useString('amity_chat_group_notification_preference_title');
+  const description = useString(
+    'amity_chat_group_notification_preference_description'
+  );
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.textBlock}>
+        <Typography
+          variant="bodyBold"
+          style={isDisabled ? styles.titleDisabled : styles.title}
+        >
+          {title}
+        </Typography>
+        <Typography
+          variant="caption"
+          style={isDisabled ? styles.descriptionDisabled : styles.description}
+        >
+          {description}
+        </Typography>
+      </View>
+      <Switch
+        value={isSelected}
+        disabled={isDisabled}
+        onValueChange={onChange}
+        accessibilityLabel={title}
+        thumbColor={token(
+          isSelected
+            ? AmityColorToken.SurfaceToggleThumbActiveEnabled
+            : AmityColorToken.SurfaceToggleThumbInactiveEnabled
+        )}
+        ios_backgroundColor={token(
+          AmityColorToken.SurfaceToggleBackgroundInactiveEnabled
+        )}
+        trackColor={{
+          true: token(AmityColorToken.SurfaceToggleBackgroundActiveEnabled),
+          false: token(AmityColorToken.SurfaceToggleBackgroundInactiveEnabled),
+        }}
+      />
+    </View>
+  );
+}

package/src/social/features/chat/features/group/notification-preference/components/AllowNotifications/index.ts

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

package/src/social/features/chat/features/group/notification-preference/components/AllowNotifications/styles.ts

@@ -0,0 +1,45 @@
+// Styles for AllowNotifications — ported from AmityUiKitWeb
+// v4/chat/features/group/notification-preference/components/AllowNotifications/AllowNotifications.module.css.
+// rem → px×16; colours via design tokens (no hardcoded hex). The `[data-disabled]`
+// text colours become the `*Disabled` style variants.
+
+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({
+    // .allowNotifications — row, 0.75rem gap, 1rem padding, list surface.
+    container: {
+      flexDirection: 'row',
+      gap: 12,
+      padding: 16,
+      alignItems: 'flex-start',
+      backgroundColor: token(AmityColorToken.SurfaceListDefaultDefault),
+    },
+    // .allowNotifications__textBlock — grows, 0.125rem gap.
+    textBlock: {
+      flex: 1,
+      flexDirection: 'column',
+      gap: 2,
+      minWidth: 0,
+    },
+    title: {
+      color: token(AmityColorToken.TextListHeaderDefaultDefault),
+    },
+    description: {
+      color: token(AmityColorToken.TextListTextDescriptionDefaultDefault),
+    },
+    // [data-disabled='true'] variants.
+    titleDisabled: {
+      color: token(AmityColorToken.TextListHeaderDefaultDisabled),
+    },
+    descriptionDisabled: {
+      color: token(AmityColorToken.TextListTextDescriptionDefaultDisabled),
+    },
+  });
+
+  return { styles, token };
+};

package/src/social/features/chat/features/group/notification-preference/components/DisabledByModeratorBanner/DisabledByModeratorBanner.tsx

@@ -0,0 +1,42 @@
+// DisabledByModeratorBanner — RN port of AmityUiKitWeb
+// v4/chat/features/group/notification-preference/components/DisabledByModeratorBanner.
+// A centered subdued banner (bell-slash icon + caption) shown when notifications
+// were silenced by a moderator.
+//
+// RN adaptations from web:
+//   - `<div role="status">` → View with `accessibilityRole="alert"` (RN has no
+//     "status" role; "alert" is the closest live-region role).
+//   - Web `BellSlash` (its default = Regular variant) → the SoT `bell-slash-r`
+//     icon (byte-identical to web's Regular path).
+//   - Web's Subdue banner icon/text tokens are not yet in the RN SoT catalog; the
+//     colour-identical GreyBG variants are used (documented in the fidelity
+//     checker's allowlist).
+
+// 1. React / RN imports
+import { View } from 'react-native';
+
+// 2. Internal imports (relative)
+import { Typography } from '../../../../../../../../core/design/components/Typography';
+import { AmityIcon } from '../../../../../../../../core/design/icons';
+import { AmityColorToken } from '../../../../../../../../core/design/tokens/amity-color-tokens';
+import { useString } from '../../../../../../../../core/localization';
+import { useStyles } from './styles';
+
+// 3. Named function component
+export function DisabledByModeratorBanner() {
+  const { styles } = useStyles();
+  const text = useString('amity_chat_group_notifications_disabled');
+
+  return (
+    <View style={styles.container} accessibilityRole="alert">
+      <AmityIcon
+        name="bell-slash-r"
+        size={18}
+        tokenColor={AmityColorToken.IconBannerSubdueDescriptionGeneral}
+      />
+      <Typography variant="caption" style={styles.text}>
+        {text}
+      </Typography>
+    </View>
+  );
+}

package/src/social/features/chat/features/group/notification-preference/components/DisabledByModeratorBanner/index.ts

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

package/src/social/features/chat/features/group/notification-preference/components/DisabledByModeratorBanner/styles.ts

@@ -0,0 +1,33 @@
+// Styles for DisabledByModeratorBanner — ported from AmityUiKitWeb
+// v4/chat/features/group/notification-preference/components/DisabledByModeratorBanner/DisabledByModeratorBanner.module.css.
+// rem → px×16; colours via design tokens (no hardcoded hex). The Subdue banner
+// surface has a direct RN token; the icon/text Subdue colours use the
+// colour-identical GreyBG variants (see fidelity allowlist).
+
+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({
+    // .disabledByModeratorBanner — centered row, 0.25rem gap, 0.75rem/1rem padding.
+    container: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: 4,
+      paddingVertical: 12,
+      paddingHorizontal: 16,
+      backgroundColor: token(AmityColorToken.SurfaceBannerSubdueGeneral),
+    },
+    // .disabledByModeratorBanner__text — centered caption.
+    text: {
+      color: token(AmityColorToken.TextBannerSubdueTextDescriptionGeneral),
+      textAlign: 'center',
+    },
+  });
+
+  return { styles, token };
+};

package/src/social/features/chat/features/group/notification-preference/components/index.ts

@@ -0,0 +1,2 @@
+export * from './AllowNotifications';
+export * from './DisabledByModeratorBanner';

package/src/social/features/chat/features/group/notification-preference/hooks/index.ts

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

package/src/social/features/chat/features/group/notification-preference/hooks/useNotificationPreference.ts

@@ -0,0 +1,163 @@
+// useNotificationPreference — RN port of AmityUiKitWeb
+// v4/chat/features/group/notification-preference/hooks/useNotificationPreference.
+// Owns the "allow notifications" toggle: the persisted channel push-notification
+// setting, the enable/disable mutation, and the moderator-silenced state.
+//
+// RN adaptations from web:
+//   - Web imports `useChannelPushNotificationQuery` / `useChannelObject` from
+//     `chat/hooks/queries` + `chat/hooks/objects`. Those query layers have no RN
+//     counterpart (they are not tracked port units), so the same calls are made
+//     inline here with the identical SDK surface:
+//       • read/enable/disable → `Client.notifications().channel(id)` (the exact
+//         API the RN community notification port already uses).
+//       • `channel.notificationMode` (for `isSilent`) → an inline
+//         `ChannelRepository.getChannel` live subscription gated on
+//         `useAuth().isConnected` (the sibling edit-permission port's pattern).
+//   - react-hook-form + zod + @tanstack/react-query are all kept 1:1 with web
+//     (all three are present in the RN app).
+//   - Web `useChatNavigation().pop()` → React Navigation `goBack`.
+//   - Web `useNotifications('chat').success/error` → the redux toast (`useToast`).
+
+// 1. React / RN imports
+import { useEffect, useState } from 'react';
+
+// 2. Third-party imports
+import {
+  ChannelRepository,
+  Client,
+  AmityChannelNotificationModeEnum,
+} from '@amityco/ts-sdk-react-native';
+import { useMutation, useQuery } from '@tanstack/react-query';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import * as z from 'zod';
+import { useNavigation } from '@react-navigation/native';
+import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
+
+// 3. Internal imports (relative)
+import useAuth from '../../../../../../../core/hooks/useAuth';
+import { useString } from '../../../../../../../core/localization';
+import { useToast } from '../../../../../../../core/stores/slices/toastSlice';
+
+// Web `CHANNEL_PUSH_NOTIFICATION_QUERY_KEY`.
+const CHANNEL_PUSH_NOTIFICATION_QUERY_KEY = 'channelPushNotification';
+
+const schema = z.object({
+  isEnabled: z.boolean(),
+});
+
+type NotificationPreferenceForm = z.infer<typeof schema>;
+
+// 4. Types
+export type NotificationPreferenceProps = {
+  channelId: string;
+};
+
+type UpdateChannelPushNotificationPayload = {
+  channelId: string;
+  isEnabled: boolean;
+};
+
+// 5. Hook
+export function useNotificationPreference({
+  channelId,
+}: NotificationPreferenceProps) {
+  const { isConnected } = useAuth();
+  const { showToast } = useToast();
+  const navigation = useNavigation<NativeStackNavigationProp<any>>();
+
+  // Web `useChannelPushNotificationQuery` mute/unmute toasts.
+  const muteSuccess = useString('amity_chat_action_mute');
+  const muteError = useString('amity_chat_action_mute_failed');
+  const unmuteSuccess = useString('amity_chat_action_unmute');
+  const unmuteError = useString('amity_chat_action_unmute_failed');
+
+  // Web `useChannelObject` → inline live channel subscription (for notificationMode).
+  const [channel, setChannel] = useState<Amity.Channel | undefined>(undefined);
+  const [isChannelLoading, setIsChannelLoading] = useState(true);
+
+  useEffect(() => {
+    if (!isConnected || !channelId) return undefined;
+    setIsChannelLoading(true);
+    const unsub = ChannelRepository.getChannel(
+      channelId,
+      ({ data, loading }) => {
+        if (data) setChannel(data);
+        if (loading === false) setIsChannelLoading(false);
+      }
+    );
+    return () => {
+      unsub();
+    };
+  }, [isConnected, channelId]);
+
+  // Web `useChannelPushNotificationQuery` — read the channel push setting.
+  const {
+    data,
+    isLoading: isSettingsLoading,
+    refetch,
+  } = useQuery({
+    queryKey: [CHANNEL_PUSH_NOTIFICATION_QUERY_KEY, channelId],
+    queryFn: () => Client.notifications().channel(channelId).getSettings(),
+    enabled: !!channelId,
+  });
+
+  const persistedIsEnabled = data?.isEnabled ?? true;
+
+  const { mutateAsync } = useMutation<
+    void,
+    Error,
+    UpdateChannelPushNotificationPayload
+  >({
+    mutationFn: ({ channelId: id, isEnabled }) =>
+      isEnabled
+        ? Client.notifications().channel(id).enable()
+        : Client.notifications().channel(id).disable(),
+    onSuccess: (_, variables) => {
+      refetch();
+      showToast({
+        message: variables.isEnabled ? unmuteSuccess : muteSuccess,
+        type: 'success',
+        variant: 'custom',
+      });
+    },
+    onError: (_, variables) => {
+      showToast({
+        message: variables.isEnabled ? unmuteError : muteError,
+        type: 'failed',
+        variant: 'custom',
+      });
+    },
+  });
+
+  const isSilent =
+    channel?.notificationMode === AmityChannelNotificationModeEnum.Silent;
+  const isLoading = isChannelLoading || isSettingsLoading;
+
+  const { control, handleSubmit } = useForm<NotificationPreferenceForm>({
+    mode: 'onChange',
+    resolver: zodResolver(schema),
+    values: {
+      isEnabled: persistedIsEnabled,
+    },
+  });
+
+  function handleClose() {
+    navigation.goBack();
+  }
+
+  const handleSave = handleSubmit(
+    async (values: NotificationPreferenceForm) => {
+      await mutateAsync({ channelId, isEnabled: values.isEnabled });
+    }
+  );
+
+  return {
+    control,
+    isLoading,
+    isSilent,
+    persistedIsEnabled,
+    handleClose,
+    handleSave,
+  };
+}

package/src/social/features/chat/features/group/notification-preference/index.ts

@@ -0,0 +1,2 @@
+export { NotificationPreference } from './NotificationPreference';
+export type { NotificationPreferenceProps } from './hooks/useNotificationPreference';

package/src/social/features/chat/features/group/notification-preference/styles.ts

@@ -0,0 +1,22 @@
+// Styles for NotificationPreference — ported from AmityUiKitWeb
+// v4/chat/features/group/notification-preference/NotificationPreference.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({
+    // .notificationPreference — full-height page surface.
+    container: {
+      flex: 1,
+      width: '100%',
+      backgroundColor: token(AmityColorToken.SurfacePageBackgroundDefault),
+    },
+  });
+
+  return { styles, token };
+};