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

package/lib/typescript/social/screens/VisitorUsageLimit/styles.d.ts

@@ -0,0 +1,38 @@
+import type { MyMD3Theme } from '../../../core/providers/AmityUIKitProvider';
+export declare const useStyles: () => {
+    styles: {
+        container: {
+            flex: number;
+            backgroundColor: string;
+        };
+        contentContainer: {
+            flex: number;
+            alignItems: "center";
+            paddingHorizontal: number;
+            flexDirection: "column";
+            justifyContent: "center";
+        };
+        icon: {
+            marginBottom: number;
+        };
+        title: {
+            textAlign: "center";
+            color: string;
+        };
+        subtitle: {
+            textAlign: "center";
+            color: string;
+        };
+        signInButton: {
+            marginTop: number;
+            borderRadius: number;
+            paddingVertical: number;
+            paddingHorizontal: number;
+        };
+        signInText: {
+            color: string;
+        };
+    };
+    theme: MyMD3Theme;
+};
+//# sourceMappingURL=styles.d.ts.map

package/lib/typescript/social/screens/VisitorUsageLimit/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../src/social/screens/VisitorUsageLimit/styles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,4CAA4C,CAAC;AAE7E,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsCrB,CAAC"}

package/lib/typescript/social/screens/index.d.ts

@@ -1,6 +1,7 @@
 export * from './ImageViewer';
 export * from './VideoPlayer';
 export * from './EditUser';
+export * from './CreateUserProfile';
 export * from './UserProfile';
 export * from './UserRelationship';
 export * from './BlockedUsers';

package/lib/typescript/social/screens/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/social/screens/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,6BAA6B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/social/screens/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,qBAAqB,CAAC;AACpC,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,6BAA6B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@amityco/react-native-social-uikit",
-  "version": "4.0.0",
+  "version": "4.0.1-324acbfd.0",
   "description": "Social UIKit",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -57,7 +57,7 @@
     "registry": "https://registry.npmjs.org/"
   },
   "devDependencies": {
-    "@amityco/ts-sdk-react-native": "7.18.1-72bd324a.0",
+    "@amityco/ts-sdk-react-native": "7.22.1-f15e84ea.0",
     "@babel/plugin-transform-export-namespace-from": "^7.27.1",
     "@commitlint/config-conventional": "^17.0.2",
     "@evilmartians/lefthook": "^1.2.2",
@@ -119,7 +119,7 @@
     "@types/react": "^19.1.0"
   },
   "peerDependencies": {
-    "@amityco/ts-sdk-react-native": "7.18.1-72bd324a.0",
+    "@amityco/ts-sdk-react-native": "7.22.1-f15e84ea.0",
     "@livekit/react-native": "^2.9.6",
     "@livekit/react-native-webrtc": "^137.0.2",
     "@react-native-async-storage/async-storage": "^1.19.3",

package/src/core/assets/icons/index.ts

@@ -34,6 +34,7 @@ export { default as pause } from './pause';
 export { default as resume } from './resume';
 export { default as terminated } from './terminated';
 export { default as warning } from './warning';
+export { default as visitorLimit } from './visitorLimit';
 export { default as ban } from './ban';
 export { default as arrowLeft } from './arrowLeft';
 export { default as poll } from './poll';

package/src/core/assets/icons/visitorLimit.tsx

@@ -0,0 +1,23 @@
+export const icon = () => `<svg
+  width="100%"
+  height="100%"
+  viewBox="0 0 61 42"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M58.3438 0.75C59.7148 0.75 60.875 1.91016 60.875 3.28125V38.7188C60.875 40.1953 59.7148 41.25 58.3438 41.25H5.1875C2.33984 41.25 0.125 39.0352 0.125 36.1875V6.65625C0.125 5.28516 1.17969 4.125 2.65625 4.125H6.875V3.28125C6.875 1.91016 7.92969 0.75 9.40625 0.75H58.3438ZM3.5 36.1875C3.5 37.1367 4.23828 37.875 5.1875 37.875C6.03125 37.875 6.875 37.1367 6.875 36.1875V7.5H3.5V36.1875ZM57.5 37.875V4.125H10.25V36.1875V36.293C10.25 36.7148 10.0391 37.4531 9.93359 37.875H57.5Z"
+    fill="currentColor"
+  />
+  <path
+    d="M34.5 13C34.5 12.4477 34.9477 12 35.5 12C36.0523 12 36.5 12.4477 36.5 13V23C36.5 23.5523 36.0523 24 35.5 24C34.9477 24 34.5 23.5523 34.5 23V13Z"
+    fill="currentColor"
+  />
+  <path
+    d="M35.5 25.75C36.4665 25.75 37.25 26.5335 37.25 27.5C37.25 28.4665 36.4665 29.25 35.5 29.25C34.5335 29.25 33.75 28.4665 33.75 27.5C33.75 26.5335 34.5335 25.75 35.5 25.75Z"
+    fill="currentColor"
+  />
+</svg>
+`;
+
+export default icon;

package/src/core/constants/index.ts

@@ -88,11 +88,23 @@ export const ERROR_CODE = {
   ONLY_ONE_MODERATOR: '400317',
   ONLY_ONE_MEMBER: '400318',
   GLOBAL_BAN: '400312',
+  VISITOR_USAGE_LIMIT_EXCEEDED: '400323',
   INVALID_IMAGE:
     'Amity SDK (500000): Image uploading failed: Request has invalid image format',
   DISPLAY_NAME_UPDATE: '400301',
 };
 
+export const VISITOR_USAGE_LIMIT_MESSAGE = {
+  TITLE: "You've reached your daily limit.",
+  SUBTITLE: 'Create an account or sign in to keep exploring the community.',
+  SIGN_IN: 'Sign in',
+  TOAST: 'Create an account or sign in to continue.',
+};
+
+// Web parity: amity_social_label_create_account_or_sign_in
+export const VISITOR_USER_ACTION_TOAST =
+  'Create an account or sign in to continue.';
+
 export const COMMENT_ERROR_MESSAGE = {
   BLOCKED_WORD:
     'Your comment contains inappropriate word. Please review and delete it.',

package/src/core/hooks/useAuth.ts

@@ -14,6 +14,8 @@ const useAuth = (): AuthContextInterface => {
     sessionState,
     apiRegion,
     isGlobalBan,
+    isVisitorUsageLimitReached,
+    isVisitorOrBot,
   } = useContext(AuthContext);
 
   return {
@@ -26,6 +28,8 @@ const useAuth = (): AuthContextInterface => {
     sessionState,
     apiRegion,
     isGlobalBan,
+    isVisitorUsageLimitReached,
+    isVisitorOrBot,
   };
 };
 

package/src/core/providers/AmityUIKitProvider.tsx

@@ -21,7 +21,8 @@ import { ErrorBoundary } from '../components/ErrorBoundary';
 
 export type CusTomTheme = typeof DefaultTheme;
 export interface IAmityUIkitProvider {
-  userId: string;
+  /** Omit to connect as a visitor (read-only session). */
+  userId?: string;
   displayName?: string;
   apiKey: string;
   apiRegion?: string;

package/src/core/providers/AuthProvider.tsx

@@ -24,6 +24,8 @@ export const AuthContext = createContext<AuthContextInterface>({
   authToken: '',
   fcmToken: undefined,
   isGlobalBan: false,
+  isVisitorUsageLimitReached: false,
+  isVisitorOrBot: false,
 });
 
 export const AuthContextProvider: FC<IAmityUIkitProvider> = ({
@@ -44,6 +46,9 @@ export const AuthContextProvider: FC<IAmityUIkitProvider> = ({
     apiEndpoint: { http: apiEndpoint },
   });
   const [isGlobalBan, setIsGlobalBan] = useState(false);
+  const [isVisitorUsageLimitReached, setIsVisitorUsageLimitReached] =
+    useState(false);
+  const [isVisitorOrBot, setIsVisitorOrBot] = useState(false);
 
   const sessionHandler: Amity.SessionHandler = {
     sessionWillRenewAccessToken(renewal) {
@@ -64,22 +69,39 @@ export const AuthContextProvider: FC<IAmityUIkitProvider> = ({
     if (sessionState === 'established') {
       setIsConnected(true);
       onSdkReady();
+      // Same check as the Web UIKit's isVisitorOrBot in SDKProvider
+      setIsVisitorOrBot(Client.getCurrentUserType() !== 'signed-in');
     }
   }, [sessionState]);
 
-  const handleConnect = useCallback(async () => {
-    let loginParam;
+  useEffect(() => {
+    // SDK emits this (throttled, 2s window) when a visitor/bot session gets
+    // error 400323 — daily usage limit exceeded. The session stays alive, so
+    // this is tracked separately from isGlobalBan. In-memory only: the flag
+    // resets when the provider remounts or the user signs in with a userId.
+    return Client.onVisitorUsageLimitReached(() => {
+      setIsVisitorUsageLimitReached(true);
+    });
+  }, []);
 
-    loginParam = {
-      userId: userId,
-      displayName: displayName,
-    };
-    if (authToken?.length > 0) {
-      loginParam = { ...loginParam, authToken: authToken };
-    }
+  const handleConnect = useCallback(async () => {
     try {
-      const response = await Client.login(loginParam, sessionHandler);
-      if (!response) return;
+      if (userId) {
+        let loginParam: Amity.ConnectClientParams = {
+          userId: userId,
+          displayName: displayName,
+        };
+        if (authToken?.length > 0) {
+          loginParam = { ...loginParam, authToken: authToken };
+        }
+        const response = await Client.login(loginParam, sessionHandler);
+        if (!response) return;
+      } else {
+        // No userId — connect as a visitor (read-only session, same
+        // convention as the Web UIKit's registerDevice without userId)
+        const response = await Client.loginAsVisitor({ sessionHandler });
+        if (!response) return;
+      }
     } catch (err) {
       if (err?.message?.includes(ERROR_CODE.GLOBAL_BAN)) {
         setIsGlobalBan(true);
@@ -93,7 +115,11 @@ export const AuthContextProvider: FC<IAmityUIkitProvider> = ({
         console.log(err);
       }
     }
-  }, []);
+    // Depend on userId (and the other login params) so that when the host
+    // switches a visitor session to a signed-in one by passing a userId, this
+    // callback re-reads the new value and calls Client.login instead of
+    // re-using the stale (undefined) userId and re-connecting as a visitor.
+  }, [userId, displayName, authToken, fcmToken]);
 
   const login = async () => {
     setError('');
@@ -111,6 +137,7 @@ export const AuthContextProvider: FC<IAmityUIkitProvider> = ({
     }
   };
   useEffect(() => {
+    setIsVisitorUsageLimitReached(false);
     login();
   }, [userId]);
 
@@ -138,6 +165,8 @@ export const AuthContextProvider: FC<IAmityUIkitProvider> = ({
         sessionState,
         apiRegion: apiRegion.toLowerCase(),
         isGlobalBan,
+        isVisitorUsageLimitReached,
+        isVisitorOrBot,
       }}
     >
       {children}

package/src/core/routes/AmityPageRenderer.tsx

@@ -22,6 +22,7 @@ import { useTheme } from 'react-native-paper';
 import PostTypeChoiceModal from '../../social/components/legacy/PostTypeChoiceModal/PostTypeChoiceModal';
 import CreateStoryScreen from '../../social/screens/CreateStory/CreateStoryScreen';
 import Toast from '../../social/components/legacy/Toast/Toast';
+import SnackbarToast from '../../social/components/Toast';
 import AmitySocialGlobalSearchPage from '../../social/screens/SocialGlobalSearch';
 import AmityMyCommunitiesSearchPage from '../../social/screens/MyCommunitiesSearch';
 import PostTargetSelection from '../../social/screens/PostTargetSelection';
@@ -91,6 +92,13 @@ export default function PageRenderer({ children }: PageRendererProps) {
               name="AmityPostEngagementContentComponent"
               children={() => children}
             />
+            {/* Prop-driven page (e.g. AmityCreateProfilePage) rendered directly
+                by the host. The component's displayName resolves to this route
+                so it can be the navigator's initialRouteName. */}
+            <Stack.Screen
+              name="AmityCreateUserProfilePage"
+              children={() => children}
+            />
 
             {/* --- Social Home --- */}
             <Stack.Screen
@@ -251,6 +259,9 @@ export default function PageRenderer({ children }: PageRendererProps) {
         )}
         <PostTypeChoiceModal />
         <Toast />
+        {/* Redux toastSlice renderer (useToast). The legacy Toast above reads a
+            different slice (state.ui), so pages using useToast need this. */}
+        <SnackbarToast />
       </NavigationContainer>
     </NavigationIndependentTree>
   );

package/src/core/routes/AmityUIKitNavigator.tsx

@@ -1,7 +1,9 @@
+import { useEffect, useRef } from 'react';
 import {
   NavigationContainer,
   NavigationIndependentTree,
 } from '@react-navigation/native';
+import { View } from 'react-native';
 import { navigationRef, onNavigationReady } from './navigation';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import type { RootStackParamList } from './RouteParamList';
@@ -43,6 +45,8 @@ import { CommunityStoriesNotificationSettingScreen } from '../../social/screens/
 import { CommunityLivestreamsNotificationSettingScreen } from '../../social/screens/CommunityLivestreamsNotificationSetting';
 import CommunityPendingRequest from '../../social/screens/CommunityPendingRequest';
 import { GlobalBan } from '../../social/screens/GlobalBan';
+import { VisitorUsageLimit } from '../../social/screens/VisitorUsageLimit';
+import { useBehaviour } from '../../social/providers/BehaviourProvider';
 import {
   ImageViewerScreen,
   VideoPlayerScreen,
@@ -60,10 +64,43 @@ const Stack = createNativeStackNavigator<
 
 export default function AmitySocialUIKitV4Navigator() {
   const theme = useTheme<MyMD3Theme>();
-  const { isGlobalBan } = useAuth();
+  const { isGlobalBan, isVisitorUsageLimitReached, isConnected } = useAuth();
+  const { AmityGlobalBehavior } = useBehaviour();
+
+  const handleVisitorUsageLimitReached =
+    AmityGlobalBehavior?.handleVisitorUsageLimitReached;
+  const hasHandledUsageLimit = useRef(false);
+
+  useEffect(() => {
+    if (!isVisitorUsageLimitReached) {
+      hasHandledUsageLimit.current = false;
+      return;
+    }
+    // Customer override replaces the default full-page swap; guard so rapid
+    // repeat events trigger a single navigation.
+    if (handleVisitorUsageLimitReached && !hasHandledUsageLimit.current) {
+      hasHandledUsageLimit.current = true;
+      handleVisitorUsageLimitReached();
+    }
+  }, [isVisitorUsageLimitReached, handleVisitorUsageLimitReached]);
 
   if (isGlobalBan) return <GlobalBan />;
 
+  // Wait for the session to establish before mounting the home page. Until then
+  // isVisitorOrBot is unknown (defaults to false), so rendering now would flash
+  // the full signed-in UIKit for a frame before resolving to visitor mode.
+  if (!isConnected) {
+    return (
+      <View style={{ flex: 1, backgroundColor: theme.colors.background }} />
+    );
+  }
+
+  // Default usage-limit handling: replace the whole navigation tree with the
+  // dead-end error page so back-navigation cannot escape it.
+  if (isVisitorUsageLimitReached && !handleVisitorUsageLimitReached) {
+    return <VisitorUsageLimit />;
+  }
+
   return (
     <NavigationIndependentTree>
       <NavigationContainer ref={navigationRef} onReady={onNavigationReady}>

package/src/core/routes/RouteParamList.tsx

@@ -140,6 +140,10 @@ export type RootStackParamList = {
     userId: string;
   };
 
+  // Prop-driven page rendered via AmityPageRenderer (no route params). The
+  // route only exists so the renderer can register a pass-through screen.
+  AmityCreateUserProfilePage: undefined;
+
   UserRelationship: {
     userId: string;
     selectedTab?: UserRelationshipTab;

package/src/core/types/auth.ts

@@ -10,4 +10,6 @@ export type AuthContextInterface = {
   authToken?: string;
   fcmToken?: string;
   isGlobalBan: boolean;
+  isVisitorUsageLimitReached: boolean;
+  isVisitorOrBot: boolean;
 };

package/src/core/types/behaviour.ts

@@ -17,6 +17,24 @@ export type CommunitySettingPageContext = {
 };
 
 export interface IBehaviour {
+  AmityGlobalBehavior?: {
+    /**
+     * Called when a visitor attempts a restricted action (comment, react,
+     * follow, join…). Default shows a toast; override to open a sign-in flow.
+     */
+    handleVisitorUserAction?: () => void;
+    /**
+     * Called when a visitor session exceeds its daily usage limit (error
+     * 400323). Providing this skips the default full-page
+     * <VisitorUsageLimit /> swap so a custom error page can be shown instead.
+     */
+    handleVisitorUsageLimitReached?: () => void;
+    /**
+     * Called when "Sign in" is pressed on the usage-limit error page.
+     * Default shows a toast; override to navigate to a sign-in flow.
+     */
+    handleVisitorUsageLimitSignIn?: () => void;
+  };
   AmitySocialHomePageBehaviour?: {
     onChooseTab?: (arg?: string) => void;
   };

package/src/index.tsx

@@ -73,8 +73,10 @@ import {
   PostDetail,
   AmityUserProfilePage,
   AmityEditUserProfilePage,
+  AmityCreateProfilePage,
   AmityUserRelationshipPage,
   AmityBlockedUsersPage,
+  VisitorUsageLimit,
 } from './social';
 
 // Polyfill for BackHandler compatibility with older libraries like react-native-modalbox
@@ -106,6 +108,7 @@ export {
   AmityUiKitProvider,
   ErrorBoundary,
   AmityUiKitSocial,
+  VisitorUsageLimit,
   AmityStoryTabComponent,
   AmityStoryTabComponentEnum,
   AmityCreateStoryPage,
@@ -141,6 +144,7 @@ export {
   PostDetail,
   AmityUserProfilePage,
   AmityEditUserProfilePage,
+  AmityCreateProfilePage,
   AmityUserRelationshipPage,
   AmityBlockedUsersPage,
   AmityAllCategoriesPage,

package/src/social/components/Social/CommentList/CommentList.tsx

@@ -31,6 +31,7 @@ import { useToast } from '../../../../core/stores/slices/toastSlice';
 import { lock } from '../../../../core/assets/icons';
 import { Typography } from '../../../../core/components/Typography/Typography';
 import { MAX_MENTION_USERS } from '../../../../core/constants';
+import useAuth from '../../../../core/hooks/useAuth';
 
 interface ICommentListProp {
   postId: string;
@@ -68,6 +69,9 @@ const CommentList: FC<ICommentListProp> = ({
   withAvatar,
   disabledComment,
 }) => {
+  // Web parity: visitors never see the comment composer
+  const { isVisitorOrBot } = useAuth();
+  const hideComposer = disabledInteraction || isVisitorOrBot;
   const styles = useStyles();
   const theme = useTheme() as MyMD3Theme;
   const onNextPageRef = useRef<() => void | null>(null);
@@ -284,7 +288,7 @@ const CommentList: FC<ICommentListProp> = ({
               </TouchableOpacity>
             </View>
           )}
-          {!disabledInteraction &&
+          {!hideComposer &&
             (disabledComment ? (
               <View style={styles.disabledCommentWrap}>
                 <SvgXml

package/src/social/components/Social/CommentListItem/CommentListItem.tsx

@@ -44,6 +44,7 @@ import ReplyCommentList from '../../legacy/Social/ReplyCommentList';
 import AmityReactionListComponent from '../../../features/reaction/components/List';
 import { CommentRepository } from '@amityco/ts-sdk-react-native';
 import { useTimeDifference } from '../../../hooks/useTimeDifference';
+import { useGlobalBehavior } from '../../../hooks/useGlobalBehavior';
 import { LinkPreview } from '../../PreviewLink';
 import { Typography } from '../../../../core/components/Typography/Typography';
 import { pen, report, trash, unreport } from '../../../../core/assets/icons';
@@ -290,6 +291,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 = () => {
     setIsReactionListVisible(true);
   };
@@ -348,10 +356,7 @@ const CommentListItem = ({
                     </Typography.Caption>
                   )}
                 </View>
-                <TouchableOpacity
-                  onPress={() => addReactionToComment()}
-                  style={styles.likeBtn}
-                >
+                <TouchableOpacity onPress={onPressLike} style={styles.likeBtn}>
                   <Typography.CaptionBold
                     style={isLike ? styles.likedText : styles.btnText}
                   >
@@ -359,20 +364,22 @@ const CommentListItem = ({
                   </Typography.CaptionBold>
                 </TouchableOpacity>
                 <TouchableOpacity
-                  onPress={disabledComment ? undefined : onHandleReply}
+                  onPress={disabledComment ? undefined : onPressReply}
                   style={styles.likeBtn}
                 >
                   <Typography.CaptionBold style={styles.btnText}>
                     Reply
                   </Typography.CaptionBold>
                 </TouchableOpacity>
-                <TouchableOpacity onPress={openModal}>
-                  <SvgXml
-                    xml={threeDots(theme.colors.baseShade2)}
-                    width="20"
-                    height="20"
-                  />
-                </TouchableOpacity>
+                {!isVisitorOrBot && (
+                  <TouchableOpacity onPress={openModal}>
+                    <SvgXml
+                      xml={threeDots(theme.colors.baseShade2)}
+                      width="20"
+                      height="20"
+                    />
+                  </TouchableOpacity>
+                )}
               </View>
 
               {likeReaction > 0 && (

package/src/social/components/legacy/Social/ReplyCommentList/index.tsx

@@ -44,6 +44,7 @@ import { useNavigation } from '@react-navigation/native';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { RootStackParamList } from '../../../../../core/routes/RouteParamList';
 import { useTimeDifference } from '../../../../hooks';
+import { useGlobalBehavior } from '../../../../hooks/useGlobalBehavior';
 import { useToast } from '../../../../../core/stores/slices/toastSlice';
 import AmityReactionListComponent from '../../../../features/reaction/components/List';
 
@@ -155,6 +156,12 @@ export default function 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 deletePostObject = () => {
     Alert.alert('Delete reply', `This reply will be permanently deleted.`, [
       {
@@ -267,10 +274,7 @@ export default function ReplyCommentList({
                   </Typography.Caption>
                 )}
               </View>
-              <TouchableOpacity
-                onPress={() => addReactionToComment()}
-                style={styles.likeBtn}
-              >
+              <TouchableOpacity onPress={onPressLike} style={styles.likeBtn}>
                 <Typography.CaptionBold
                   style={isLike ? styles.likedText : styles.btnText}
                 >
@@ -278,13 +282,15 @@ export default function ReplyCommentList({
                 </Typography.CaptionBold>
               </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 && (
               <TouchableOpacity

package/src/social/elements/CommunityJoinButtonElement/CommunityJoinButtonElement.tsx

@@ -1,7 +1,11 @@
 import { FC, memo } from 'react';
 import { TouchableOpacityProps } from 'react-native';
 import { ComponentID, ElementID, PageID } from '../../enums/enumUIKitID';
-import { useAmityElement, useJoinCommunity } from '../../hooks';
+import {
+  useAmityElement,
+  useGlobalBehavior,
+  useJoinCommunity,
+} from '../../hooks';
 import { Button, BUTTON_SIZE } from '../../components/Button/Button';
 import { plus } from '../../../core/assets/icons';
 import { useCustomRankingGlobalFeed } from '../../hooks/useCustomRankingGlobalFeed';
@@ -36,9 +40,13 @@ const CommunityJoinButton: FC<CommunityJoinButtonType> = ({
     },
   });
 
+  const { handleGlobalBehavior } = useGlobalBehavior();
+
   const handleJoinCommunity = () => {
     if (!communityId) return;
-    joinCommunity(communityId);
+    handleGlobalBehavior({
+      defaultBehavior: () => joinCommunity(communityId),
+    });
   };
 
   if (isExcluded) return null;

package/src/social/enums/enumUIKitID.ts

@@ -24,6 +24,7 @@ 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',
@@ -204,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',