@amityco/react-native-social-uikit 4.0.0 → 4.0.1-324acbfd.0

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

@@ -43,7 +43,7 @@ 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';
@@ -315,6 +315,13 @@ 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);
@@ -399,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 && (

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

@@ -27,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,
@@ -144,6 +145,12 @@ const ReplyCommentList = ({
       await addCommentReaction(commentId, 'like');
     }
   };
+
+  // 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.', [
       {
@@ -292,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 && (

package/src/social/features/feed/components/TopNavigation/TopNavigation.tsx

@@ -15,6 +15,7 @@ import AmityCreatePostMenuComponent from '../CreatePostMenu';
 import TextKeyElement from '../../../../elements/TextKeyElement/TextKeyElement';
 import { usePopup } from '../../../../hooks/usePopup';
 import Popup from '../../../../components/PopupMenu/PopupMenu';
+import useAuth from '../../../../../core/hooks/useAuth';
 
 type AmitySocialHomeTopNavigationComponentType = {
   activeTab: string;
@@ -29,6 +30,7 @@ const AmitySocialHomeTopNavigationComponent: FC<
   const theme = componentConfig.themeStyles;
   const { AmitySocialHomeTopNavigationComponentBehaviour } = useBehaviour();
   const { isOpen, setIsOpen, toggle } = usePopup();
+  const { isVisitorOrBot } = useAuth();
 
   const [myCommunitiesTab] = useUiKitConfig({
     page: PageID.social_home_page,
@@ -169,7 +171,7 @@ const AmitySocialHomeTopNavigationComponent: FC<
           >
             <Image source={searchIcon} style={styles.icon} />
           </TouchableOpacity>
-          {activeTab !== exploreTab && (
+          {!isVisitorOrBot && activeTab !== exploreTab && (
             <TouchableOpacity
               style={styles.iconBtn}
               onPress={onPressCreate}

package/src/social/features/post/Detail/index.tsx

@@ -43,6 +43,7 @@ import NetInfo from '@react-native-community/netinfo';
 import { useToast } from '../../../../core/stores/slices/toastSlice';
 import MyAvatar from '../../../components/MyAvatar/MyAvatar';
 import { MAX_MENTION_USERS } from '../../../../core/constants';
+import useAuth from '../../../../core/hooks/useAuth';
 
 import { SafeAreaView } from 'react-native-safe-area-context';
 import ErrorComponent from '../../../components/ErrorComponent/ErrorComponent';
@@ -73,6 +74,9 @@ const AmityPostDetailPage: FC<AmityPostDetailPageType> = ({
 }) => {
   const pageId = PageID.post_detail_page;
   const componentId = ComponentID.WildCardComponent;
+  // Web parity (CommentTray.canShowComposer): visitors never see the
+  // composer; comment rows stay visible and their actions toast on tap.
+  const { isVisitorOrBot } = useAuth();
   const disabledInteraction = false;
   const navigation =
     useNavigation<NativeStackNavigationProp<RootStackParamList>>();
@@ -285,7 +289,7 @@ const AmityPostDetailPage: FC<AmityPostDetailPageType> = ({
               </TouchableOpacity>
             </View>
           )}
-          {!disabledInteraction && (
+          {!disabledInteraction && !isVisitorOrBot && (
             <View style={styles.InputWrap}>
               <MyAvatar style={styles.myAvatar} />
               <View style={styles.inputContainer}>
@@ -398,7 +402,7 @@ const AmityPostDetailPage: FC<AmityPostDetailPageType> = ({
                 postData?.targetType === 'community' && postData?.targetId
               }
               postType="post"
-              disabledInteraction={false}
+              disabledInteraction={disabledInteraction}
               ListHeaderComponent={
                 postData && (
                   <AmityPostContentComponent

package/src/social/features/post/components/Content/Content.tsx

@@ -35,6 +35,7 @@ import { PostMenu } from '../../../../components/PostMenu';
 import PinBadge from '../../../../elements/PinBadge';
 import AnnouncementBadge from '../../../../elements/AnnouncementBadge';
 import { Typography } from '../../../../../core/components/Typography/Typography';
+import useAuth from '../../../../../core/hooks/useAuth';
 
 type AmityPostContentComponentProps = {
   post: Amity.Post;
@@ -74,6 +75,7 @@ const AmityPostContentComponent: FC<AmityPostContentComponentProps> = ({
     componentId: componentId,
   });
   const styles = useStyles(themeStyles);
+  const { isVisitorOrBot } = useAuth();
   const [textPost, setTextPost] = useState<string>('');
   const [communityData, setCommunityData] = useState<Amity.Community>(null);
   const navigation =
@@ -292,10 +294,11 @@ const AmityPostContentComponent: FC<AmityPostContentComponentProps> = ({
             category === AmityPostCategory.PIN_AND_ANNOUNCEMENT) && (
             <PinBadge componentId={ComponentID.post_content} />
           )}
-          {AmityPostContentComponentStyle ===
-            AmityPostContentComponentStyleEnum.feed && (
-            <PostMenu post={post} pageId={pageId} componentId={componentId} />
-          )}
+          {!isVisitorOrBot &&
+            AmityPostContentComponentStyle ===
+              AmityPostContentComponentStyleEnum.feed && (
+              <PostMenu post={post} pageId={pageId} componentId={componentId} />
+            )}
         </Pressable>
         <View>
           <View style={styles.bodySection}>

package/src/social/features/post/components/EngagementActions/Components/DetailStyle.tsx

@@ -8,7 +8,7 @@ import {
 } from '@amityco/ts-sdk-react-native';
 import { AmityPostEngagementActionsSubComponentType } from './type';
 import { useStyles } from './styles';
-import { useAmityComponent } from '../../../../../hooks';
+import { useAmityComponent, useGlobalBehavior } from '../../../../../hooks';
 import { PageID, ComponentID } from '../../../../../enums';
 import { SvgXml } from 'react-native-svg';
 import { likeReaction } from '../../../../../../core/assets/icons/xml';
@@ -34,6 +34,7 @@ const DetailStyle: FC<AmityPostEngagementActionsSubComponentType> = ({
     componentId: ComponentID.post_content,
   });
   const styles = useStyles(themeStyles);
+  const { handleGlobalBehavior } = useGlobalBehavior();
   const [postData, setPostData] = useState<Amity.Post>(null);
 
   const { shareLink, handleSharePress } = usePostShareAction({
@@ -95,6 +96,10 @@ const DetailStyle: FC<AmityPostEngagementActionsSubComponentType> = ({
     }
   }, [isLike, postId]);
 
+  const onPressReaction = useCallback(() => {
+    handleGlobalBehavior({ defaultBehavior: addReactionToPost });
+  }, [addReactionToPost, handleGlobalBehavior]);
+
   const onClickReactions = useCallback(() => {
     setIsReactionListVisible(true);
   }, []);
@@ -136,7 +141,7 @@ const DetailStyle: FC<AmityPostEngagementActionsSubComponentType> = ({
       </View>
       <View style={[styles.actionSection, styles.detailActionSection]}>
         <View style={styles.row}>
-          <TouchableOpacity onPress={addReactionToPost} style={styles.likeBtn}>
+          <TouchableOpacity onPress={onPressReaction} style={styles.likeBtn}>
             {isLike ? (
               <SvgXml
                 xml={likeReaction(themeStyles.colors.background)}

package/src/social/features/post/components/EngagementActions/Components/FeedStyle.tsx

@@ -8,7 +8,7 @@ import {
   subscribeTopic,
 } from '@amityco/ts-sdk-react-native';
 import { useStyles } from './styles';
-import { useAmityComponent } from '../../../../../hooks';
+import { useAmityComponent, useGlobalBehavior } from '../../../../../hooks';
 import { PageID, ComponentID } from '../../../../../enums';
 import { SvgXml } from 'react-native-svg';
 import { likeReaction } from '../../../../../../core/assets/icons/xml';
@@ -38,6 +38,7 @@ const FeedStyle: FC<AmityPostEngagementActionsSubComponentType> = ({
   });
   const styles = useStyles(themeStyles);
   const { AmityGlobalFeedComponentBehavior } = useBehaviour();
+  const { handleGlobalBehavior } = useGlobalBehavior();
   const navigation =
     useNavigation<NativeStackNavigationProp<RootStackParamList>>();
   const [postData, setPostData] = useState<Amity.Post>(null);
@@ -81,6 +82,10 @@ const FeedStyle: FC<AmityPostEngagementActionsSubComponentType> = ({
     }
   }, [isLike, postData, postId]);
 
+  const onPressReaction = useCallback(() => {
+    handleGlobalBehavior({ defaultBehavior: addReactionToPost });
+  }, [addReactionToPost, handleGlobalBehavior]);
+
   const onPressComment = useCallback(() => {
     if (AmityGlobalFeedComponentBehavior.goToPostDetailPage) {
       return AmityGlobalFeedComponentBehavior.goToPostDetailPage();
@@ -103,7 +108,7 @@ const FeedStyle: FC<AmityPostEngagementActionsSubComponentType> = ({
   return (
     <Pressable onPress={onPressComment} style={styles.actionSection}>
       <View style={styles.row}>
-        <TouchableOpacity onPress={addReactionToPost} style={styles.likeBtn}>
+        <TouchableOpacity onPress={onPressReaction} style={styles.likeBtn}>
           {isLike ? (
             <SvgXml
               xml={likeReaction(themeStyles.colors.background)}

package/src/social/features/user/CreateProfile/CreateProfile.tsx

@@ -0,0 +1,121 @@
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { KeyboardAvoidingView, Platform, ScrollView, View } from 'react-native';
+import { Controller } from 'react-hook-form';
+import { TopBar, ImageUpload } from './components';
+import { useCreateProfile } from './hooks';
+import FormInput from '../../../components/FormInput';
+import { CHARACTER_LIMIT } from '../../../../core/constants';
+import { ElementID, PageID } from '../../../enums';
+import ActionButton from '../../../elements/ActionButton';
+
+export type CreateProfileProps = {
+  /**
+   * The userId to create / sign in as. The profile is created on the network
+   * the first time this user logs in. Required because the page performs the
+   * real (signed-in) login on save.
+   */
+  userId: string;
+  /**
+   * Optional auth token for the signed-in login when the network uses secure
+   * mode. Mirrors `authToken` on AmityUiKitProvider.
+   */
+  authToken?: string;
+  /**
+   * Fired after the profile is successfully created and the user is signed in.
+   * Receives the created userId and the chosen displayName. The host decides
+   * what to render next (e.g. swap to the main UIKit / redirect to newsfeed).
+   */
+  onCreated?: (user: { userId: string; displayName: string }) => void;
+  /**
+   * Fired when the user dismisses the create-profile flow without creating.
+   */
+  onCancel?: () => void;
+};
+
+export function CreateProfile({
+  userId,
+  authToken,
+  onCreated,
+  onCancel,
+}: CreateProfileProps) {
+  const {
+    styles,
+    control,
+    onSubmit,
+    isValid,
+    isSubmitting,
+    handleSubmit,
+    accessibilityId,
+  } = useCreateProfile({ userId, authToken, onCreated });
+
+  return (
+    <SafeAreaView testID={accessibilityId} style={styles.container}>
+      <TopBar onCancel={onCancel} disabled={isSubmitting} />
+      <KeyboardAvoidingView
+        style={styles.keyboardAvoidingView}
+        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+      >
+        <ScrollView contentContainerStyle={styles.contentContainer}>
+          <Controller
+            name="image"
+            control={control}
+            render={({ field: { onChange, value } }) => (
+              <ImageUpload
+                value={value}
+                onChange={onChange}
+                disabled={isSubmitting}
+              />
+            )}
+          />
+          <View style={styles.inputContainer}>
+            <Controller
+              name="displayName"
+              control={control}
+              render={({ field: { onChange, onBlur, value } }) => (
+                <FormInput
+                  value={value}
+                  onBlur={onBlur}
+                  multiline={false}
+                  editable={!isSubmitting}
+                  onChangeText={onChange}
+                  placeholder="Username"
+                  pageId={PageID.create_user_profile_page}
+                  maxLength={CHARACTER_LIMIT.USER_DISPLAY_NAME}
+                  elementId={ElementID.user_display_name_title}
+                />
+              )}
+            />
+          </View>
+          <View style={styles.inputContainer}>
+            <Controller
+              name="description"
+              control={control}
+              render={({ field: { onChange, onBlur, value } }) => (
+                <FormInput
+                  optional
+                  multiline
+                  value={value}
+                  onBlur={onBlur}
+                  editable={!isSubmitting}
+                  onChangeText={onChange}
+                  placeholder="Write something about yourself"
+                  pageId={PageID.create_user_profile_page}
+                  elementId={ElementID.user_about_title}
+                  maxLength={CHARACTER_LIMIT.USER_DESCRIPTION}
+                />
+              )}
+            />
+          </View>
+        </ScrollView>
+        <View style={styles.submitButtonContainer}>
+          <ActionButton
+            onPress={handleSubmit(onSubmit)}
+            pageId={PageID.create_user_profile_page}
+            elementId={ElementID.create_user_profile_button}
+            disabled={!isValid || isSubmitting}
+          />
+        </View>
+      </KeyboardAvoidingView>
+    </SafeAreaView>
+  );
+}

package/src/social/features/user/CreateProfile/components/ImageUpload/ImageUpload.tsx

@@ -0,0 +1,85 @@
+import { Alert, TouchableOpacity, View } from 'react-native';
+import { launchImageLibrary } from 'react-native-image-picker';
+import { useStyles } from './styles';
+import { SvgXml } from 'react-native-svg';
+import { camera } from '../../../../../../core/assets/icons';
+import { isValidImageType } from '../../../../../utils';
+import { Avatar } from '../../../../../components';
+import { Typography } from '../../../../../../core/components/Typography/Typography';
+import type { LocalImage } from '../../hooks/useCreateProfile';
+
+type ImageUploadProps = {
+  value?: LocalImage | null;
+  onChange: (image: LocalImage | null) => void;
+  disabled?: boolean;
+};
+
+// Pick-only: a visitor session is read-only, so the avatar can't be uploaded
+// here. We hold the local image uri and the page uploads it after Client.login.
+export function ImageUpload({ value, onChange, disabled }: ImageUploadProps) {
+  const { styles, theme } = useStyles();
+
+  const onPickImage = async () => {
+    const result = await launchImageLibrary({
+      mediaType: 'photo',
+      selectionLimit: 1,
+      includeBase64: false,
+      quality: 1,
+    });
+
+    if (result.didCancel || !result.assets || result.assets.length === 0) {
+      return;
+    }
+
+    const asset = result.assets[0];
+    if (!isValidImageType(asset?.type)) {
+      Alert.alert(
+        'Unsupported image type',
+        'Please upload a PNG or JPG image.',
+        [{ text: 'OK' }]
+      );
+      return;
+    }
+
+    if (asset?.uri) {
+      onChange({ uri: asset.uri });
+    }
+  };
+
+  return (
+    <View style={[styles.container, disabled && styles.disabled]}>
+      <TouchableOpacity
+        hitSlop={0.8}
+        activeOpacity={0.7}
+        disabled={disabled}
+        style={styles.imageContainer}
+        onPress={onPickImage}
+      >
+        <Avatar.User
+          uri={value?.uri}
+          viewable={false}
+          userId=""
+          imageStyle={styles.image}
+          shouldRedirectToUserProfile={false}
+        />
+        <View style={styles.iconContainer}>
+          <SvgXml
+            width={24}
+            height={24}
+            xml={camera()}
+            color={theme.colors.white}
+          />
+        </View>
+      </TouchableOpacity>
+      <TouchableOpacity
+        activeOpacity={0.7}
+        disabled={disabled}
+        onPress={onPickImage}
+      >
+        <Typography.BodyBold style={styles.choosePhotoLabel}>
+          Choose a photo
+        </Typography.BodyBold>
+      </TouchableOpacity>
+    </View>
+  );
+}

package/src/social/features/user/CreateProfile/components/ImageUpload/index.ts

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

package/src/social/features/user/CreateProfile/components/ImageUpload/styles.ts

@@ -0,0 +1,44 @@
+import { StyleSheet } from 'react-native';
+import { useTheme } from 'react-native-paper';
+import { MyMD3Theme } from '../../../../../../core/providers/AmityUIKitProvider';
+
+export const useStyles = () => {
+  const theme = useTheme<MyMD3Theme>();
+
+  const styles = StyleSheet.create({
+    container: {
+      gap: 8,
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    choosePhotoLabel: {
+      color: theme.colors.primary,
+    },
+    disabled: {
+      opacity: 0.5,
+    },
+    imageContainer: {
+      width: 64,
+      height: 64,
+      borderRadius: 100,
+      position: 'relative',
+    },
+    image: {
+      width: '100%',
+      height: '100%',
+      borderRadius: 100,
+      objectFit: 'cover',
+    },
+    iconContainer: {
+      inset: 0,
+      zIndex: 10,
+      padding: 20,
+      borderRadius: 100,
+      position: 'absolute',
+      backgroundColor: theme.colors.transparentBlack,
+    },
+  });
+
+  return { styles, theme };
+};

package/src/social/features/user/CreateProfile/components/TopBar/TopBar.tsx

@@ -0,0 +1,30 @@
+import { View } from 'react-native';
+import { useStyles } from './styles';
+import BackButton from '../../../../../elements/BackButton';
+import { Title } from '../../../../../elements';
+import { ElementID, PageID } from '../../../../../enums';
+
+type TopBarProps = {
+  onCancel?: () => void;
+  disabled?: boolean;
+};
+
+export function TopBar({ onCancel, disabled }: TopBarProps) {
+  const { styles } = useStyles();
+
+  return (
+    <View style={styles.container}>
+      <BackButton
+        disabled={disabled}
+        pageId={PageID.create_user_profile_page}
+        onPress={onCancel}
+      />
+      <Title
+        style={styles.title}
+        pageId={PageID.create_user_profile_page}
+        elementId={ElementID.title}
+      />
+      <View style={styles.dummy} />
+    </View>
+  );
+}

package/src/social/features/user/CreateProfile/components/TopBar/index.ts

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

package/src/social/features/user/CreateProfile/components/TopBar/styles.ts

@@ -0,0 +1,30 @@
+import { StyleSheet } from 'react-native';
+import type { MyMD3Theme } from '../../../../../../core/providers/AmityUIKitProvider';
+import { useTheme } from 'react-native-paper';
+
+export const useStyles = () => {
+  const theme = useTheme<MyMD3Theme>();
+
+  const styles = StyleSheet.create({
+    container: {
+      gap: 8,
+      paddingVertical: 16,
+      flexDirection: 'row',
+      alignItems: 'center',
+      paddingHorizontal: 12,
+      justifyContent: 'space-between',
+      backgroundColor: theme.colors.background,
+    },
+    title: {
+      flex: 1,
+      textAlign: 'center',
+      color: theme.colors.base,
+    },
+    dummy: {
+      width: 24,
+      height: 24,
+    },
+  });
+
+  return { styles, theme };
+};

package/src/social/features/user/CreateProfile/components/index.ts

@@ -0,0 +1,2 @@
+export * from './ImageUpload';
+export * from './TopBar';

package/src/social/features/user/CreateProfile/hooks/index.ts

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