@amityco/react-native-social-uikit 4.0.2-8e4d4f3a.0 → 4.0.2-a91dab2.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');
     }
   };
+
+  const { handleGlobalBehavior } = useGlobalBehavior();
+
+  const onPressLike = () =>
+    handleGlobalBehavior({ defaultBehavior: addReactionToComment });
+
   const deleteReplyComment = () => {
     Alert.alert('Delete reply', 'This reply will be permanently deleted.', [
       {
@@ -292,10 +299,7 @@ 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>
@@ -342,6 +346,7 @@ const ReplyCommentList = ({
                 styles.twoOptions,
             ]}
           >
+            <View style={styles.handleBar} />
             {user?.userId === (client as Amity.Client).userId ? (
               <View>
                 <TouchableOpacity
@@ -369,7 +374,12 @@ const ReplyCommentList = ({
               </View>
             ) : (
               <TouchableOpacity
-                onPress={reportCommentObject}
+                onPress={() => {
+                  closeModal();
+                  handleGlobalBehavior({
+                    defaultBehavior: reportCommentObject,
+                  });
+                }}
                 style={styles.modalRow}
               >
                 <SvgXml

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

@@ -6,6 +6,14 @@ export const useStyles = () => {
   const theme = useTheme() as MyMD3Theme;
 
   const styles = StyleSheet.create({
+    handleBar: {
+      alignSelf: 'center',
+      width: 36,
+      backgroundColor: theme.colors.baseShade4,
+      height: 5,
+      marginVertical: 10,
+      borderRadius: 10,
+    },
     commentWrap: {
       backgroundColor: theme.colors.background,
       paddingHorizontal: 12,

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/livestream/Player/Player.tsx

@@ -83,7 +83,7 @@ function AmityLiveStreamPlayerPage() {
   };
   useRoomSubscription({ room });
 
-  const { client } = useAuth();
+  const { client, isVisitorOrBot } = useAuth();
   const videoRef = useRef<any>(null);
   const isStreamEnding = useRef(false);
 
@@ -127,7 +127,7 @@ function AmityLiveStreamPlayerPage() {
   }, []);
 
   useEffect(() => {
-    if (!room?.status) return;
+    if (!room?.status || isVisitorOrBot) return;
 
     const shouldEnd =
       room.status === RoomStatus.ended ||
@@ -149,13 +149,14 @@ function AmityLiveStreamPlayerPage() {
         setVideoKey((prev) => prev + 1);
       }, 50);
     }
-  }, [room?.status, wasLive]);
+  }, [room?.status, wasLive, isVisitorOrBot]);
 
   useEffect(() => {
+    if (isVisitorOrBot) return;
     if (room?.status === RoomStatus.terminated) {
       navigation.replace('LivestreamTerminated', { type: 'viewer' });
     }
-  }, [room?.status, navigation]);
+  }, [room?.status, navigation, isVisitorOrBot]);
 
   const showControlsTemporarily = useCallback(() => {
     setShowControls(true);
@@ -171,9 +172,10 @@ function AmityLiveStreamPlayerPage() {
   }, [showControlsTemporarily]);
 
   const shouldShowEndThumbnail =
-    room?.status === RoomStatus.ended ||
-    (room?.status === RoomStatus.recorded && wasLive) ||
-    (room as any)?.user?.isGlobalBan;
+    !isVisitorOrBot &&
+    (room?.status === RoomStatus.ended ||
+      (room?.status === RoomStatus.recorded && wasLive) ||
+      (room as any)?.user?.isGlobalBan);
 
   if (!room || error) {
     return (
@@ -246,6 +248,7 @@ function AmityLiveStreamPlayerPage() {
                     setIsPaused(false);
                   }
                 }}
+                onEnd={() => setIsPaused(true)}
               />
             )}
 

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,8 @@ const AmityPostDetailPage: FC<AmityPostDetailPageType> = ({
 }) => {
   const pageId = PageID.post_detail_page;
   const componentId = ComponentID.WildCardComponent;
+
+  const { isVisitorOrBot } = useAuth();
   const disabledInteraction = false;
   const navigation =
     useNavigation<NativeStackNavigationProp<RootStackParamList>>();
@@ -285,7 +288,7 @@ const AmityPostDetailPage: FC<AmityPostDetailPageType> = ({
               </TouchableOpacity>
             </View>
           )}
-          {!disabledInteraction && (
+          {!disabledInteraction && !isVisitorOrBot && (
             <View style={styles.InputWrap}>
               <MyAvatar style={styles.myAvatar} />
               <View style={styles.inputContainer}>
@@ -398,7 +401,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/EngagementActions/Components/DetailStyle.tsx

@@ -8,7 +8,10 @@ import {
 } from '@amityco/ts-sdk-react-native';
 import { AmityPostEngagementActionsSubComponentType } from './type';
 import { useStyles } from './styles';
-import { useAmityComponent } from '../../../../../hooks';
+import {
+  useAmityComponent,
+  useInteractionBehavior,
+} from '../../../../../hooks';
 import { PageID, ComponentID } from '../../../../../enums';
 import { SvgXml } from 'react-native-svg';
 import { likeReaction } from '../../../../../../core/assets/icons/xml';
@@ -34,6 +37,7 @@ const DetailStyle: FC<AmityPostEngagementActionsSubComponentType> = ({
     componentId: ComponentID.post_content,
   });
   const styles = useStyles(themeStyles);
+  const { handleInteraction } = useInteractionBehavior();
   const [postData, setPostData] = useState<Amity.Post>(null);
 
   const { shareLink, handleSharePress } = usePostShareAction({
@@ -95,19 +99,20 @@ const DetailStyle: FC<AmityPostEngagementActionsSubComponentType> = ({
     }
   }, [isLike, postId]);
 
-  const onClickReactions = useCallback(() => {
-    setIsReactionListVisible(true);
-  }, []);
+  const onPressReaction = useCallback(() => {
+    handleInteraction({
+      defaultBehavior: addReactionToPost,
+      isJoined: community ? community.isJoined : true,
+    });
+  }, [addReactionToPost, handleInteraction, community]);
 
-  if (community && community.isJoined === false) {
-    return (
-      <View style={styles.actionSection}>
-        <Text style={styles.btnText}>
-          Join community to interact with all posts
-        </Text>
-      </View>
-    );
-  }
+  const onClickReactions = useCallback(() => {
+    handleInteraction({
+      defaultBehavior: () => setIsReactionListVisible(true),
+      allowNonMember: true,
+      isJoined: community?.isJoined,
+    });
+  }, [handleInteraction, community]);
 
   return (
     <>
@@ -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,10 @@ import {
   subscribeTopic,
 } from '@amityco/ts-sdk-react-native';
 import { useStyles } from './styles';
-import { useAmityComponent } from '../../../../../hooks';
+import {
+  useAmityComponent,
+  useInteractionBehavior,
+} from '../../../../../hooks';
 import { PageID, ComponentID } from '../../../../../enums';
 import { SvgXml } from 'react-native-svg';
 import { likeReaction } from '../../../../../../core/assets/icons/xml';
@@ -38,6 +41,7 @@ const FeedStyle: FC<AmityPostEngagementActionsSubComponentType> = ({
   });
   const styles = useStyles(themeStyles);
   const { AmityGlobalFeedComponentBehavior } = useBehaviour();
+  const { handleInteraction } = useInteractionBehavior();
   const navigation =
     useNavigation<NativeStackNavigationProp<RootStackParamList>>();
   const [postData, setPostData] = useState<Amity.Post>(null);
@@ -81,7 +85,14 @@ const FeedStyle: FC<AmityPostEngagementActionsSubComponentType> = ({
     }
   }, [isLike, postData, postId]);
 
-  const onPressComment = useCallback(() => {
+  const onPressReaction = useCallback(() => {
+    handleInteraction({
+      defaultBehavior: addReactionToPost,
+      isJoined: community ? community.isJoined : true,
+    });
+  }, [addReactionToPost, handleInteraction, community]);
+
+  const goToPostDetail = useCallback(() => {
     if (AmityGlobalFeedComponentBehavior.goToPostDetailPage) {
       return AmityGlobalFeedComponentBehavior.goToPostDetailPage();
     }
@@ -90,20 +101,17 @@ const FeedStyle: FC<AmityPostEngagementActionsSubComponentType> = ({
     });
   }, [AmityGlobalFeedComponentBehavior, navigation, postId]);
 
-  if (community && community.isJoined === false) {
-    return (
-      <View style={styles.actionSection}>
-        <Text style={styles.btnText}>
-          Join community to interact with all posts
-        </Text>
-      </View>
-    );
-  }
+  const onPressComment = useCallback(() => {
+    handleInteraction({
+      defaultBehavior: goToPostDetail,
+      isJoined: community ? community.isJoined : true,
+    });
+  }, [goToPostDetail, handleInteraction, community]);
 
   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/story/View/components/AmityViewStoryItem.tsx

@@ -13,7 +13,11 @@ import {
 } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 import { FC, memo, useCallback, useRef, useState } from 'react';
-import { useConfigImageUri, useStory } from '../../../../hooks';
+import {
+  useConfigImageUri,
+  useInteractionBehavior,
+  useStory,
+} from '../../../../hooks';
 import { useStyles } from '../styles';
 import Video, { OnLoadData } from 'react-native-video';
 import {
@@ -40,6 +44,7 @@ import GestureRecognizer from 'react-native-swipe-gestures';
 import uiSlice from '../../../../../core/stores/slices/uiSlice';
 import { LoadingOverlay } from '../../../../components/legacy/LoadingOverlay';
 import Toast from '../../../../components/legacy/Toast/Toast';
+import GlobalToast from '../../../../components/Toast';
 import { Typography } from '../../../../../core/components/Typography/Typography';
 import { useTheme } from 'react-native-paper';
 import { MyMD3Theme } from '../../../../../core/providers/AmityUIKitProvider';
@@ -87,6 +92,7 @@ const AmityViewStoryItem: FC<IAmityViewStoryItem> = ({
   const progress = useRef(new Animated.Value(0)).current;
   const sheetRef = useRef<BottomSheetMethods>(null);
   const { handleReaction } = useStory();
+  const { handleInteraction } = useInteractionBehavior();
   const currentStory = storyData[current];
   const storyHyperLink = currentStory?.items[0]?.data || undefined;
   const timeDifference = useTimeDifference(currentStory?.createdAt, true);
@@ -204,33 +210,24 @@ const AmityViewStoryItem: FC<IAmityViewStoryItem> = ({
   }, [progress]);
 
   const onPressReaction = useCallback(() => {
-    if (communityData?.isJoined) {
-      handleReaction({
-        targetId: currentStory?.storyId,
-        reactionName: 'like',
-        isLiked,
-      });
-      setTotalReaction((prev) => (isLiked ? prev - 1 : prev + 1));
-      setIsLiked((prev) => !prev);
-      return;
-    }
-    progress.stopAnimation(() => setPressed(true));
-    Alert.alert('Join community to interact with all stories', null, [
-      {
-        text: 'OK',
-        onPress: () => {
-          startAnimation();
-          setPressed(false);
-        },
+    handleInteraction({
+      defaultBehavior: () => {
+        handleReaction({
+          targetId: currentStory?.storyId,
+          reactionName: 'like',
+          isLiked,
+        });
+        setTotalReaction((prev) => (isLiked ? prev - 1 : prev + 1));
+        setIsLiked((prev) => !prev);
       },
-    ]);
+      isJoined: communityData?.isJoined,
+    });
   }, [
     communityData?.isJoined,
     currentStory?.storyId,
+    handleInteraction,
     handleReaction,
     isLiked,
-    progress,
-    startAnimation,
   ]);
 
   const onCloseBottomSheet = useCallback(() => {
@@ -652,6 +649,7 @@ const AmityViewStoryItem: FC<IAmityViewStoryItem> = ({
               withAvatar={true}
             />
           </KeyboardAvoidingView>
+          <GlobalToast />
         </Modal>
       )}
       <BottomSheet
@@ -675,6 +673,7 @@ const AmityViewStoryItem: FC<IAmityViewStoryItem> = ({
       </BottomSheet>
       <LoadingOverlay isLoading={loading} />
       <Toast />
+      <GlobalToast />
     </View>
   );
 };

package/src/social/features/user/Profile/components/Header/hooks/useHeader.ts

@@ -8,7 +8,7 @@ import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { RootStackParamList } from '../../../../../../../core/routes/RouteParamList';
 import { UserRelationshipTab } from '../../../../../../types';
 import { useBehaviour } from '../../../../../../providers/BehaviourProvider';
-import { useBlockUser } from '../../../../../../hooks';
+import { useBlockUser, useGlobalBehavior } from '../../../../../../hooks';
 import useAuth from '../../../../../../../core/hooks/useAuth';
 import { useFollowUser } from '../../../../../../hooks/queries/useFollowUser';
 import useSocialSettings from '../../../../../../../core/hooks/useSocialSettings';
@@ -31,6 +31,7 @@ export function useHeader(user?: Amity.User) {
   const { openBottomSheet, closeBottomSheet, bottomSheetHeight } =
     useBottomSheet();
   const { showToast } = useToast();
+  const { handleGlobalBehavior } = useGlobalBehavior();
   const {
     followUser,
     unfollowUser,
@@ -56,7 +57,9 @@ export function useHeader(user?: Amity.User) {
 
   const handleFollow = () => {
     if (!user?.userId) return;
-    followUser(user.userId);
+    handleGlobalBehavior({
+      defaultBehavior: () => followUser(user.userId),
+    });
   };
 
   const handleUnfollow = () => {
@@ -109,24 +112,28 @@ export function useHeader(user?: Amity.User) {
 
   const navigateToRelationship = (tab: UserRelationshipTab) => {
     if (!user?.userId) return;
-    if (!isMyProfile && isPrivateNetwork && !isFollowing) {
-      showToast({
-        type: 'informative',
-        message: TOAST.USER.RELATIONSHIP.FOLLOW_TO_INTERACT,
-      });
-      return;
-    }
-    if (AmityUserProfileHeaderComponentBehavior?.goToUserRelationshipPage) {
-      AmityUserProfileHeaderComponentBehavior.goToUserRelationshipPage({
-        userId: user.userId,
-        selectedTab: tab,
-      });
-    } else {
-      navigation.push('UserRelationship', {
-        userId: user.userId,
-        selectedTab: tab,
-      });
-    }
+    handleGlobalBehavior({
+      defaultBehavior: () => {
+        if (!isMyProfile && isPrivateNetwork && !isFollowing) {
+          showToast({
+            type: 'informative',
+            message: TOAST.USER.RELATIONSHIP.FOLLOW_TO_INTERACT,
+          });
+          return;
+        }
+        if (AmityUserProfileHeaderComponentBehavior?.goToUserRelationshipPage) {
+          AmityUserProfileHeaderComponentBehavior.goToUserRelationshipPage({
+            userId: user.userId,
+            selectedTab: tab,
+          });
+        } else {
+          navigation.push('UserRelationship', {
+            userId: user.userId,
+            selectedTab: tab,
+          });
+        }
+      },
+    });
   };
 
   return {

package/src/social/features/user/Profile/components/Header/styles.ts

@@ -51,6 +51,8 @@ export const useStyles = (
     },
     hiddenText: {
       position: 'absolute',
+      left: 0,
+      right: 0,
       opacity: 0,
     },
     seeMore: {

package/src/social/features/user/Profile/elements/Menu/hooks/useMenu.ts

@@ -17,6 +17,7 @@ import { useUserFlaggedByMeQuery } from '../../../../../../hooks/queries/useFlag
 import { useBlockUser } from '../../../../../../hooks/queries/useBlockUser';
 import { useFollowInfo } from '../../../../../../hooks/objects';
 import { useBehaviour } from '../../../../../../providers/BehaviourProvider';
+import { useGlobalBehavior } from '../../../../../../hooks';
 
 type UseMenuParams = {
   userId?: string;
@@ -28,6 +29,7 @@ export function useMenu({ userId, displayName }: UseMenuParams) {
 
   const { client } = useAuth();
   const { getShareLink } = useShareableLink();
+  const { handleGlobalBehavior } = useGlobalBehavior();
   const { AmityUserProfilePageBehavior } = useBehaviour();
   const { accessibilityId: menuButtonId } = useAmityElement({
     pageId,
@@ -97,8 +99,10 @@ export function useMenu({ userId, displayName }: UseMenuParams) {
       testID: 'report-user-button',
       accessibilityLabel: 'Report user',
       onPress: () => {
-        if (userId) reportUser(userId);
         closeBottomSheet();
+        handleGlobalBehavior({
+          defaultBehavior: () => userId && reportUser(userId),
+        });
       },
     },
     {
@@ -108,8 +112,10 @@ export function useMenu({ userId, displayName }: UseMenuParams) {
       testID: 'unreport-user-button',
       accessibilityLabel: 'Unreport user',
       onPress: () => {
-        if (userId) unreportUser(userId);
         closeBottomSheet();
+        handleGlobalBehavior({
+          defaultBehavior: () => userId && unreportUser(userId),
+        });
       },
     },
     {
@@ -120,7 +126,10 @@ export function useMenu({ userId, displayName }: UseMenuParams) {
       accessibilityLabel: 'Block user',
       onPress: () => {
         closeBottomSheet();
-        if (userId) blockUser(userId, displayName ?? userId);
+        handleGlobalBehavior({
+          defaultBehavior: () =>
+            userId && blockUser(userId, displayName ?? userId),
+        });
       },
     },
     {
@@ -131,7 +140,10 @@ export function useMenu({ userId, displayName }: UseMenuParams) {
       accessibilityLabel: 'Unblock user',
       onPress: () => {
         closeBottomSheet();
-        if (userId) unBlockUser(userId, displayName ?? userId);
+        handleGlobalBehavior({
+          defaultBehavior: () =>
+            userId && unBlockUser(userId, displayName ?? userId),
+        });
       },
     },
   ].filter((action) => action.visible);

package/src/social/features/visitor/UsageLimit/UsageLimit.tsx

@@ -0,0 +1,43 @@
+import { TouchableOpacity, View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { SvgXml } from 'react-native-svg';
+import { Typography } from '../../../../core/components/Typography/Typography';
+import { visitorLimit } from '../../../../core/assets/icons';
+import { VISITOR_USAGE_LIMIT_MESSAGE } from '../../../../core/constants';
+import { useUsageLimit } from './hooks';
+
+export function UsageLimit() {
+  const { styles, theme, onPressSignIn } = useUsageLimit();
+
+  return (
+    <SafeAreaView style={styles.container} edges={['top', 'left']}>
+      <View style={styles.contentContainer}>
+        <SvgXml
+          accessible
+          accessibilityLabel="Usage limit reached"
+          width={60}
+          height={40}
+          style={styles.icon}
+          xml={visitorLimit()}
+          color={theme.colors.secondaryShade4}
+        />
+        <Typography.TitleBold style={styles.title}>
+          {VISITOR_USAGE_LIMIT_MESSAGE.TITLE}
+        </Typography.TitleBold>
+        <Typography.Caption style={styles.subtitle}>
+          {VISITOR_USAGE_LIMIT_MESSAGE.SUBTITLE}
+        </Typography.Caption>
+        <TouchableOpacity
+          style={styles.signInButton}
+          onPress={onPressSignIn}
+          accessibilityRole="button"
+          accessibilityLabel={VISITOR_USAGE_LIMIT_MESSAGE.SIGN_IN}
+        >
+          <Typography.BodyBold style={styles.signInText}>
+            {VISITOR_USAGE_LIMIT_MESSAGE.SIGN_IN}
+          </Typography.BodyBold>
+        </TouchableOpacity>
+      </View>
+    </SafeAreaView>
+  );
+}

package/src/social/features/visitor/UsageLimit/hooks/index.ts

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

package/src/social/features/visitor/UsageLimit/hooks/useUsageLimit.ts

@@ -0,0 +1,46 @@
+import { useCallback, useEffect } from 'react';
+import { BackHandler } from 'react-native';
+import { useStyles } from '../styles';
+import { useToast } from '../../../../../core/stores/slices/toastSlice';
+import { useBehaviour } from '../../../../providers/BehaviourProvider';
+import {
+  VISITOR_USAGE_LIMIT_MESSAGE,
+  VISITOR_TOAST_DURATION,
+} from '../../../../../core/constants';
+
+export const useUsageLimit = () => {
+  const { styles, theme } = useStyles();
+  const { showToast } = useToast();
+  const { AmityGlobalBehaviour } = useBehaviour();
+
+  const showSignInToast = useCallback(() => {
+    showToast({
+      message: VISITOR_USAGE_LIMIT_MESSAGE.TOAST,
+      type: 'informative',
+      duration: VISITOR_TOAST_DURATION,
+    });
+  }, []);
+
+  useEffect(() => {
+    showSignInToast();
+  }, [showSignInToast]);
+
+  // Dead-end page: swallow the Android hardware back press so the user
+  // cannot navigate away from the error state.
+  useEffect(() => {
+    const subscription = BackHandler.addEventListener(
+      'hardwareBackPress',
+      () => true
+    );
+    return () => subscription.remove();
+  }, []);
+
+  const onPressSignIn = useCallback(() => {
+    if (AmityGlobalBehaviour?.handleVisitorUsageLimitSignIn) {
+      return AmityGlobalBehaviour.handleVisitorUsageLimitSignIn();
+    }
+    showSignInToast();
+  }, [AmityGlobalBehaviour, showSignInToast]);
+
+  return { styles, theme, onPressSignIn };
+};

package/src/social/features/visitor/UsageLimit/index.ts

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