@amityco/react-native-social-uikit 4.0.0-df1703f8.0 → 4.0.0-e0eb8745.0

package/src/social/elements/ModeratorBadgeElement/ModeratorBadgeElement.tsx

@@ -1,10 +1,11 @@
 import { TextProps, Text, View } from 'react-native';
 import { FC, memo } from 'react';
-import { ComponentID, ElementID, PageID } from '../../enums/enumUIKitID';
-import { useAmityElement } from '../../hooks';
+
 import ImageElement from '../CommonElements/ImageElement';
 import { useStyles } from './styles';
-import { useIsCommunityModerator } from '../../hooks';
+import { useUser } from '../../hooks/objects';
+import { isModerator, useAmityElement } from '../../hooks';
+import { ComponentID, ElementID, PageID } from '../../enums';
 
 type ModeratorBadgeElementType = Partial<TextProps> & {
   pageID: PageID;
@@ -20,10 +21,7 @@ const ModeratorBadgeElement: FC<ModeratorBadgeElementType> = ({
   communityId,
   ...props
 }) => {
-  const { isCommunityModerator } = useIsCommunityModerator({
-    communityId,
-    userId,
-  });
+  const { user } = useUser({ userId });
   const elementID = ElementID.moderator_badge;
   const { isExcluded, config, accessibilityId, themeStyles } = useAmityElement({
     pageId: pageID,
@@ -32,8 +30,8 @@ const ModeratorBadgeElement: FC<ModeratorBadgeElementType> = ({
   });
   const styles = useStyles(themeStyles);
   if (isExcluded) return null;
-  if (!isCommunityModerator || !communityId || !userId) return null;
-  const text = config?.text ?? '';
+  if (!isModerator(user?.roles) || !communityId || !userId) return null;
+  const text = (config?.text as string) ?? '';
 
   return (
     <View style={styles.moderatorRow}>

package/src/social/elements/VideoGallery/VideoGallery.tsx

@@ -81,8 +81,11 @@ const VideoGallery: FC<VideoGalleryProps> = ({
           item: Amity.Post<'video'>;
           index: number;
         }) => {
-          const uri = item.getVideoThumbnailInfo().fileUrl + '?size=medium';
-          const videoInfo = item.getVideoInfo() as Amity.File<'video'>;
+          const videoThumbnailInfo = item.getVideoThumbnailInfo();
+          const uri = videoThumbnailInfo?.fileUrl
+            ? videoThumbnailInfo.fileUrl + '?size=medium'
+            : undefined;
+          const videoInfo = item.getVideoInfo();
           const duration = formatDuration(
             (videoInfo?.attributes?.metadata?.video as Amity.VideoMetadata)
               ?.duration as number
@@ -129,7 +132,7 @@ const VideoGallery: FC<VideoGalleryProps> = ({
             playWhenInactive={false}
             playInBackground={false}
             source={{
-              uri: posts[currentImageIndex].getVideoInfo().fileUrl,
+              uri: posts[currentImageIndex].getVideoInfo()?.fileUrl,
             }}
             fullscreenOrientation="all"
           />

package/src/social/enums/enumUIKitID.ts

@@ -24,9 +24,15 @@ export enum PageID {
   pending_request_page = 'pending_request_page',
   user_profile_page = 'user_profile_page',
   edit_user_profile_page = 'edit_user_profile_page',
+  create_user_profile_page = 'create_user_profile_page',
   blocked_users_page = 'blocked_users_page',
   user_relationship_page = 'user_relationship_page',
   user_pending_follow_request_page = 'user_pending_follow_request_page',
+  community_notification_page = 'community_notification_page',
+  community_posts_notification_page = 'community_posts_notification_page',
+  community_comments_notification_page = 'community_comments_notification_page',
+  community_stories_notification_page = 'community_stories_notification_page',
+  community_livestreams_notification_page = 'community_livestreams_notification_page',
 }
 export enum ComponentID {
   EditComment = 'edit_comment_component',
@@ -199,6 +205,7 @@ export enum ElementID {
   user_display_name_title = 'user_display_name_title',
   user_about_title = 'user_about_title',
   update_user_profile_button = 'update_user_profile_button',
+  create_user_profile_button = 'create_user_profile_button',
   unblock_user_button = 'unblock_user_button',
   follow_user_button = 'follow_user_button',
   following_user_button = 'following_user_button',

package/src/social/features/comment/components/PostComment/CommentListItem/CommentListItem.tsx

@@ -43,8 +43,9 @@ import { useTheme } from 'react-native-paper';
 import type { MyMD3Theme } from '../../../../../../core/providers/AmityUIKitProvider';
 import ReplyCommentList from '../ReplyCommentList/index';
 import { CommentRepository } from '@amityco/ts-sdk-react-native';
-import { useTimeDifference } from '../../../../../hooks';
+import { useGlobalBehavior, useTimeDifference } from '../../../../../hooks';
 import ModeratorBadgeElement from '../../../../../elements/ModeratorBadgeElement/ModeratorBadgeElement';
+import { BrandBadge } from '../../../../../elements/BrandBadge';
 import { ComponentID, PageID } from '../../../../../enums';
 import { LinkPreview } from '../../../../../components/PreviewLink/LinkPreview';
 import AmityReactionListComponent from '../../../../reaction/components/List';
@@ -183,6 +184,7 @@ const CommentListItem = ({
             displayName: userObject.data.displayName,
             avatarFileId: userObject.data.avatarFileId,
             avatarCustomUrl: userObject.data?.avatarCustomUrl,
+            isBrand: userObject.data?.isBrand,
           };
 
           return {
@@ -244,22 +246,18 @@ const CommentListItem = ({
     }
   };
 
-  const deletePostObject = () => {
-    Alert.alert(
-      'Delete this post',
-      `This post will be permanently deleted. You'll no longer see and find this post`,
-      [
-        {
-          text: 'Cancel',
-          style: 'cancel',
-        },
-        {
-          text: 'Delete',
-          style: 'destructive',
-          onPress: () => onDelete && onDelete(commentId),
-        },
-      ]
-    );
+  const deleteComment = () => {
+    Alert.alert('Delete comment', 'This comment will be permanently deleted.', [
+      {
+        text: 'Cancel',
+        style: 'cancel',
+      },
+      {
+        text: 'Delete',
+        style: 'destructive',
+        onPress: () => onDelete && onDelete(commentId),
+      },
+    ]);
     setIsVisible(false);
   };
   const reportCommentObject = async () => {
@@ -317,11 +315,21 @@ const CommentListItem = ({
     onClickReply && onClickReply(user, commentId);
   };
 
+  // Web parity: visitors see Like/Reply but taps show the sign-in toast
+  const { handleGlobalBehavior, isVisitorOrBot } = useGlobalBehavior();
+  const onPressLike = () =>
+    handleGlobalBehavior({ defaultBehavior: addReactionToComment });
+  const onPressReply = () =>
+    handleGlobalBehavior({ defaultBehavior: onHandleReply });
+
   const onPressCommentReaction = () => {
     onNavigate && onNavigate();
     setIsReactionListVisible(true);
   };
 
+  const replyCount =
+    childrenNumber === 0 ? replyCommentList.length : childrenNumber;
+
   return (
     <View key={commentId} style={styles.commentWrap}>
       <View style={styles.headerSection}>
@@ -358,7 +366,16 @@ const CommentListItem = ({
                   });
               }}
             >
-              <Text style={styles.headerText}>{user?.displayName}</Text>
+              <View style={styles.displayNameRow}>
+                <Text
+                  style={styles.headerText}
+                  numberOfLines={1}
+                  ellipsizeMode="tail"
+                >
+                  {user?.displayName}
+                </Text>
+                {user?.isBrand && <BrandBadge width={16} height={16} />}
+              </View>
             </TouchableOpacity>
             {targetType === 'community' && targetId && (
               // eslint-disable-next-line react-native/no-inline-styles
@@ -389,27 +406,26 @@ const CommentListItem = ({
                   )}
                 </View>
 
-                <TouchableOpacity
-                  onPress={() => addReactionToComment()}
-                  style={styles.likeBtn}
-                >
+                <TouchableOpacity onPress={onPressLike} style={styles.likeBtn}>
                   <Text style={isLike ? styles.likedText : styles.btnText}>
                     {!isLike ? 'Like' : 'Liked'}
                   </Text>
                 </TouchableOpacity>
-                <TouchableOpacity
-                  onPress={onHandleReply}
-                  style={styles.likeBtn}
-                >
+                <TouchableOpacity onPress={onPressReply} style={styles.likeBtn}>
                   <Text style={styles.btnText}>Reply</Text>
                 </TouchableOpacity>
-                <TouchableOpacity onPress={openModal} style={styles.threeDots}>
-                  <SvgXml
-                    xml={threeDots(theme.colors.base)}
-                    width="20"
-                    height="16"
-                  />
-                </TouchableOpacity>
+                {!isVisitorOrBot && (
+                  <TouchableOpacity
+                    onPress={openModal}
+                    style={styles.threeDots}
+                  >
+                    <SvgXml
+                      xml={threeDots(theme.colors.base)}
+                      width="20"
+                      height="16"
+                    />
+                  </TouchableOpacity>
+                )}
               </View>
 
               {likeReaction > 0 && (
@@ -463,11 +479,7 @@ const CommentListItem = ({
             >
               <SvgXml xml={expandIcon} />
               <Text style={styles.viewMoreText}>
-                View{' '}
-                {childrenNumber === 0
-                  ? replyCommentList.length
-                  : childrenNumber}{' '}
-                replies
+                View {replyCount} {replyCount === 1 ? 'reply' : 'replies'}
               </Text>
             </TouchableOpacity>
           )}
@@ -513,7 +525,7 @@ const CommentListItem = ({
                   <Text style={styles.deleteText}> Edit Comment</Text>
                 </TouchableOpacity>
                 <TouchableOpacity
-                  onPress={deletePostObject}
+                  onPress={deleteComment}
                   style={styles.modalRow}
                 >
                   <SvgXml

package/src/social/features/comment/components/PostComment/CommentListItem/styles.ts

@@ -28,7 +28,7 @@ export const useStyles = () => {
       fontWeight: '600',
       fontSize: 15,
       color: theme.colors.base,
-      marginBottom: 4,
+      flexShrink: 1,
     },
     headerTextTime: {
       fontSize: 13,
@@ -53,6 +53,7 @@ export const useStyles = () => {
       borderRadius: 12,
       borderTopLeftRadius: 0,
       alignSelf: 'flex-start',
+      maxWidth: '100%',
     },
 
     viewMoreReplyBtn: {
@@ -160,6 +161,11 @@ export const useStyles = () => {
       color: theme.colors.base,
       fontSize: 15,
     },
+    displayNameRow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 4,
+    },
   });
 
   return styles;

package/src/social/features/comment/components/PostComment/PostComment.tsx

@@ -38,7 +38,7 @@ type AmityPostCommentComponentType = {
   disabledInteraction?: boolean;
   setReplyUserName?: (arg: string) => void;
   setReplyCommentId?: (arg: string) => void;
-  ListHeaderComponent?: React.JSX.Element;
+  ListHeaderComponent?: React.ReactElement;
 };
 
 const commentListLimit = 10;
@@ -106,6 +106,7 @@ const AmityPostCommentComponent: FC<AmityPostCommentComponentType> = ({
         displayName: item.creator?.displayName,
         avatarFileId: item.creator?.avatarFileId,
         avatarCustomUrl: item.creator?.avatarCustomUrl,
+        isBrand: item.creator?.isBrand,
       };
 
       return {

package/src/social/features/comment/components/PostComment/ReplyCommentList/index.tsx

@@ -12,10 +12,11 @@ import {
 import { useStyles } from './styles';
 import { SvgXml } from 'react-native-svg';
 import {
-  expandIcon,
+  editIcon,
   likeCircle,
   personXml,
   reportOutLine,
+  storyDraftDeletHyperLink,
   threeDots,
 } from '../../../../../../core/assets/icons/xml';
 import type { UserInterface } from '../../../../../../core/types';
@@ -26,6 +27,7 @@ import {
 import { Pressable } from 'react-native';
 import useAuth from '../../../../../../core/hooks/useAuth';
 import { useTimeDifference } from '../../../../../hooks/useTimeDifference';
+import { useGlobalBehavior } from '../../../../../hooks/useGlobalBehavior';
 import {
   isReportTarget,
   reportTargetById,
@@ -36,6 +38,7 @@ import { useTheme } from 'react-native-paper';
 import type { MyMD3Theme } from '../../../../../../core/providers/AmityUIKitProvider';
 import { IMentionPosition } from '../../../../../../core/types';
 import ModeratorBadgeElement from '../../../../../elements/ModeratorBadgeElement/ModeratorBadgeElement';
+import { BrandBadge } from '../../../../../elements/BrandBadge';
 import { ComponentID, PageID } from '../../../../../enums';
 import AmityReactionListComponent from '../../../../reaction/components/List';
 import RenderTextWithMention from '../../../../../components/RenderTextWithMention/RenderTextWithMention';
@@ -83,7 +86,6 @@ const ReplyCommentList = ({
     childrenComment,
     editedAt,
     mentionPosition,
-    childrenNumber,
     targetType,
     targetId,
   } = commentDetail;
@@ -143,22 +145,24 @@ const ReplyCommentList = ({
       await addCommentReaction(commentId, 'like');
     }
   };
-  const deletePostObject = () => {
-    Alert.alert(
-      'Delete this post',
-      `This post will be permanently deleted. You'll no longer see and find this post`,
-      [
-        {
-          text: 'Cancel',
-          style: 'cancel',
-        },
-        {
-          text: 'Delete',
-          style: 'destructive',
-          onPress: () => onDelete && onDelete(commentId),
-        },
-      ]
-    );
+
+  // Web parity: visitors see Like but taps show the sign-in toast
+  const { handleGlobalBehavior, isVisitorOrBot } = useGlobalBehavior();
+  const onPressLike = () =>
+    handleGlobalBehavior({ defaultBehavior: addReactionToComment });
+
+  const deleteReplyComment = () => {
+    Alert.alert('Delete reply', 'This reply will be permanently deleted.', [
+      {
+        text: 'Cancel',
+        style: 'cancel',
+      },
+      {
+        text: 'Delete',
+        style: 'destructive',
+        onPress: () => onDelete && onDelete(commentId),
+      },
+    ]);
     setIsVisible(false);
   };
   const reportCommentObject = async () => {
@@ -252,7 +256,16 @@ const ReplyCommentList = ({
                 })
               }
             >
-              <Text style={styles.headerText}>{user?.displayName}</Text>
+              <View style={styles.displayNameRow}>
+                <Text
+                  style={styles.headerText}
+                  numberOfLines={1}
+                  ellipsizeMode="tail"
+                >
+                  {user?.displayName}
+                </Text>
+                {user?.isBrand && <BrandBadge width={16} height={16} />}
+              </View>
             </TouchableOpacity>
             {targetType === 'community' && targetId && (
               // eslint-disable-next-line react-native/no-inline-styles
@@ -286,21 +299,20 @@ const ReplyCommentList = ({
                 )}
               </View>
 
-              <TouchableOpacity
-                onPress={() => addReactionToComment()}
-                style={styles.likeBtn}
-              >
+              <TouchableOpacity onPress={onPressLike} style={styles.likeBtn}>
                 <Text style={isLike ? styles.likedText : styles.btnText}>
                   {!isLike ? 'Like' : 'Liked'}
                 </Text>
               </TouchableOpacity>
-              <TouchableOpacity onPress={openModal} style={styles.threeDots}>
-                <SvgXml
-                  xml={threeDots(theme.colors.base)}
-                  width="20"
-                  height="16"
-                />
-              </TouchableOpacity>
+              {!isVisitorOrBot && (
+                <TouchableOpacity onPress={openModal} style={styles.threeDots}>
+                  <SvgXml
+                    xml={threeDots(theme.colors.base)}
+                    width="20"
+                    height="16"
+                  />
+                </TouchableOpacity>
+              )}
             </View>
 
             {likeReaction > 0 && (
@@ -319,17 +331,6 @@ const ReplyCommentList = ({
               </TouchableOpacity>
             )}
           </View>
-
-          <View>
-            {childrenComment && childrenComment.length > 0 && (
-              <Pressable style={styles.viewMoreReplyBtn}>
-                <SvgXml xml={expandIcon} />
-                <Text style={styles.viewMoreText}>
-                  View {childrenNumber} replies
-                </Text>
-              </Pressable>
-            )}
-          </View>
         </View>
       </View>
       <Modal
@@ -353,13 +354,23 @@ const ReplyCommentList = ({
                   onPress={openEditCommentModal}
                   style={styles.modalRow}
                 >
-                  <Text style={styles.deleteText}> Edit Comment</Text>
+                  <SvgXml
+                    xml={editIcon(theme.colors.base)}
+                    width="20"
+                    height="20"
+                  />
+                  <Text style={styles.deleteText}> Edit reply</Text>
                 </TouchableOpacity>
                 <TouchableOpacity
-                  onPress={deletePostObject}
+                  onPress={deleteReplyComment}
                   style={styles.modalRow}
                 >
-                  <Text style={styles.deleteText}> Delete Comment</Text>
+                  <SvgXml
+                    xml={storyDraftDeletHyperLink()}
+                    width="20"
+                    height="20"
+                  />
+                  <Text style={styles.deleteText}> Delete reply</Text>
                 </TouchableOpacity>
               </View>
             ) : (
@@ -373,7 +384,7 @@ const ReplyCommentList = ({
                   height="20"
                 />
                 <Text style={styles.deleteText}>
-                  {isReportByMe ? 'Unreport comment' : 'Report comment'}
+                  {isReportByMe ? 'Unreport reply' : 'Report reply'}
                 </Text>
               </TouchableOpacity>
             )}

package/src/social/features/comment/components/PostComment/ReplyCommentList/styles.ts

@@ -31,6 +31,7 @@ export const useStyles = () => {
       fontSize: 15,
       color: theme.colors.base,
       marginBottom: 4,
+      flexShrink: 1,
     },
     headerTextTime: {
       fontSize: 13,
@@ -61,6 +62,7 @@ export const useStyles = () => {
       borderRadius: 12,
       borderTopLeftRadius: 0,
       alignSelf: 'flex-start',
+      maxWidth: '100%',
     },
 
     viewMoreReplyBtn: {
@@ -157,6 +159,11 @@ export const useStyles = () => {
       alignItems: 'center',
       gap: 8,
     },
+    displayNameRow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 4,
+    },
   });
 
   return styles;

package/src/social/features/community/AddCategory/AddCategory.tsx

@@ -113,6 +113,7 @@ const AddCategory = () => {
       />
       <View style={styles.submitButtonContainer}>
         <ActionButton
+          fullWidth
           label="Add category"
           onPress={handleSubmit(onSubmit)}
           disabled={!isDirty || !isValid || isSubmitting}

package/src/social/features/community/AddMember/hooks/useAddMember.ts

@@ -6,7 +6,10 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { useForm } from 'react-hook-form';
 import { useUserCollection } from '../../../../hooks/collections/user/useUserCollection';
 import { useSearchUserByDisplayNameCollection } from '../../../../hooks/collections/search/useSearchUserByDisplayNameCollection';
-import { SearchUsersByEnum } from '@amityco/ts-sdk-react-native';
+import {
+  SearchUsersByEnum,
+  UserRepository,
+} from '@amityco/ts-sdk-react-native';
 
 type UseAddMemberProps = {
   communityId?: string;
@@ -49,6 +52,7 @@ function useAddMember({ communityId }: UseAddMemberProps = {}) {
       displayName: values.search,
       limit: 20,
       searchBy: [SearchUsersByEnum.DISPLAY_NAME],
+      matchType: UserRepository.AmityUserSearchMatchType.PARTIAL,
     },
     enabled: !!values.search && !communityId,
   });