@amityco/react-native-social-uikit 4.0.2-bfd939a.0 → 4.1.0

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

@@ -0,0 +1,45 @@
+import { StyleSheet } from 'react-native';
+import { useTheme } from 'react-native-paper';
+import type { MyMD3Theme } from '../../../../core/providers/AmityUIKitProvider';
+
+export const useStyles = () => {
+  const theme = useTheme<MyMD3Theme>();
+
+  const styles = StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: theme.colors.background,
+    },
+    contentContainer: {
+      flex: 1,
+      alignItems: 'center',
+      paddingHorizontal: 32,
+      flexDirection: 'column',
+      justifyContent: 'center',
+    },
+    icon: {
+      marginBottom: 16,
+    },
+    title: {
+      maxWidth: 252,
+      textAlign: 'center',
+      color: theme.colors.baseShade3,
+    },
+    subtitle: {
+      maxWidth: 252,
+      textAlign: 'center',
+      color: theme.colors.baseShade3,
+    },
+    signInButton: {
+      marginTop: 16,
+      borderRadius: 8,
+      paddingVertical: 10,
+      paddingHorizontal: 16,
+    },
+    signInText: {
+      color: theme.colors.primary,
+    },
+  });
+
+  return { styles, theme };
+};

package/src/social/hooks/index.ts

@@ -35,3 +35,5 @@ export * from './usePostSubscription';
 export * from './useRoomSubscription';
 export * from './queries/useFlagPost';
 export * from './queries/useClosePoll';
+export * from './useGlobalBehavior';
+export * from './useInteractionBehavior';

package/src/social/hooks/useGlobalBehavior.ts

@@ -0,0 +1,33 @@
+import { useCallback } from 'react';
+import useAuth from '../../core/hooks/useAuth';
+import { useBehaviour } from '../providers/BehaviourProvider';
+import { useToast } from '../../core/stores/slices/toastSlice';
+import {
+  VISITOR_USER_ACTION_TOAST,
+  VISITOR_TOAST_DURATION,
+} from '../../core/constants';
+
+export const useGlobalBehavior = () => {
+  const { showToast } = useToast();
+  const { isVisitorOrBot } = useAuth();
+  const { AmityGlobalBehaviour } = useBehaviour();
+
+  const handleGlobalBehavior = useCallback(
+    ({ defaultBehavior }: { defaultBehavior?: () => void }) => {
+      if (isVisitorOrBot) {
+        if (AmityGlobalBehaviour?.handleVisitorUserAction) {
+          return AmityGlobalBehaviour.handleVisitorUserAction();
+        }
+        return showToast({
+          message: VISITOR_USER_ACTION_TOAST,
+          type: 'informative',
+          duration: VISITOR_TOAST_DURATION,
+        });
+      }
+      return defaultBehavior?.();
+    },
+    [isVisitorOrBot, AmityGlobalBehaviour, showToast]
+  );
+
+  return { handleGlobalBehavior, isVisitorOrBot };
+};

package/src/social/hooks/useInteractionBehavior.ts

@@ -0,0 +1,47 @@
+import { useCallback } from 'react';
+import { useBehaviour } from '../providers/BehaviourProvider';
+import { useToast } from '../../core/stores/slices/toastSlice';
+import { useGlobalBehavior } from './useGlobalBehavior';
+import {
+  NON_MEMBER_ACTION_TOAST,
+  VISITOR_TOAST_DURATION,
+} from '../../core/constants';
+
+type HandleInteractionParams = {
+  defaultBehavior?: () => void;
+  allowNonMember?: boolean;
+  isJoined?: boolean;
+};
+
+export const useInteractionBehavior = () => {
+  const { showToast } = useToast();
+  const { AmityGlobalBehaviour } = useBehaviour();
+  const { handleGlobalBehavior, isVisitorOrBot } = useGlobalBehavior();
+
+  const handleInteraction = useCallback(
+    ({
+      defaultBehavior,
+      allowNonMember,
+      isJoined,
+    }: HandleInteractionParams) => {
+      handleGlobalBehavior({
+        defaultBehavior: () => {
+          if (allowNonMember || isJoined) {
+            return defaultBehavior?.();
+          }
+          if (AmityGlobalBehaviour?.handleNonMemberAction) {
+            return AmityGlobalBehaviour.handleNonMemberAction();
+          }
+          return showToast({
+            message: NON_MEMBER_ACTION_TOAST,
+            type: 'informative',
+            duration: VISITOR_TOAST_DURATION,
+          });
+        },
+      });
+    },
+    [handleGlobalBehavior, AmityGlobalBehaviour, showToast]
+  );
+
+  return { handleInteraction, isVisitorOrBot };
+};

package/src/social/hooks/usePostPermission.ts

@@ -12,13 +12,14 @@ type UsePostPermissionParams = {
 };
 
 export function usePostPermission({ community }: UsePostPermissionParams) {
-  const { client } = useAuth();
+  const { client, isVisitorOrBot } = useAuth();
   const [hasPostPermission, setHasPostPermission] = useState(false);
 
   const isOnlyAdminCanPost =
     community?.postSetting === CommunityPostSettings.ONLY_ADMIN_CAN_POST;
 
   useEffect(() => {
+    if (isVisitorOrBot) return;
     if (!community?.communityId || !client?.userId) return;
 
     CommunityRepository.Membership.getMembers(
@@ -41,6 +42,7 @@ export function usePostPermission({ community }: UsePostPermissionParams) {
     client?.userId,
     isOnlyAdminCanPost,
     community?.isJoined,
+    isVisitorOrBot,
   ]);
 
   return hasPostPermission;

package/src/social/hooks/useStoryPermission.ts

@@ -4,17 +4,19 @@ import useSocialSettings from '../../core/hooks/useSocialSettings';
 import { checkStoryPermission, isAdmin } from '../utils/permissions';
 
 export function useStoryPermission(communityId?: string) {
-  const { client } = useAuth();
+  const { client, isVisitorOrBot } = useAuth();
   const { socialSettings } = useSocialSettings();
   const user = useUser(client?.userId || '');
 
   const isGlobalAdmin = isAdmin(user?.roles);
 
-  const hasStoryPermission = !communityId
-    ? socialSettings?.story?.allowAllUserToCreateStory
-    : socialSettings?.story?.allowAllUserToCreateStory ||
-      isGlobalAdmin ||
-      checkStoryPermission(client, communityId);
+  const hasStoryPermission =
+    !isVisitorOrBot &&
+    (!communityId
+      ? socialSettings?.story?.allowAllUserToCreateStory
+      : socialSettings?.story?.allowAllUserToCreateStory ||
+        isGlobalAdmin ||
+        checkStoryPermission(client, communityId));
 
   return { hasStoryPermission };
 }

package/src/social/providers/BehaviourProvider.tsx

@@ -14,6 +14,7 @@ export const BehaviourProvider = ({
 }: IBehavioudProviderProps) => {
   const defaultBehaviour = useMemo(
     () => ({
+      AmityGlobalBehaviour: {},
       AmitySocialHomePageBehaviour: {},
       AmityGlobalFeedComponentBehavior: {},
       AmityPostContentComponentBehavior: {},

package/src/social/screens/CommunityProfile/components/Header/Header.tsx

@@ -6,6 +6,7 @@ import {
   useCommunity,
   isModerator,
   useUser,
+  useGlobalBehavior,
 } from '../../../../hooks';
 import { useStyles } from './styles';
 import { CommunityCover } from '../../elements/CommunityCover/CommunityCover';
@@ -50,6 +51,7 @@ const AmityCommunityHeaderComponent: FC<AmityCommunityHeaderComponentProps> = ({
   const client = Client.getActiveClient();
   const navigation =
     useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+  const { handleGlobalBehavior } = useGlobalBehavior();
   const componentId = ComponentID.community_header;
   const { community } = useCommunity(communityId);
   const { posts: pendingPosts } = usePosts({
@@ -153,8 +155,12 @@ const AmityCommunityHeaderComponent: FC<AmityCommunityHeaderComponentProps> = ({
             community={community}
             style={styles.infoWrap}
             onPress={() => {
-              navigation.navigate('CommunityMembership', {
-                community: community,
+              handleGlobalBehavior({
+                defaultBehavior: () => {
+                  navigation.navigate('CommunityMembership', {
+                    community: community,
+                  });
+                },
               });
             }}
           />

package/src/social/screens/SocialHomePage/index.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { useCallback, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { StyleSheet, View } from 'react-native';
 import CustomSocialTab from '../../components/CustomSocialTab/CustomSocialTab';
-import { useUiKitConfig } from '../../hooks';
+import { useAmityElement, useUiKitConfig } from '../../hooks';
 import { ComponentID, ElementID, PageID } from '../../enums/enumUIKitID';
 import { useTheme } from 'react-native-paper';
 import { useBehaviour } from '../../providers/BehaviourProvider';
@@ -20,7 +20,7 @@ const PROFILE_TAB = 'Profile';
 
 const AmitySocialHomePage = () => {
   const theme = useTheme() as MyMD3Theme;
-  const { client } = useAuth();
+  const { client, isVisitorOrBot } = useAuth();
 
   const styles = StyleSheet.create({
     container: {
@@ -52,9 +52,29 @@ const AmitySocialHomePage = () => {
     keys: ['text'],
   }) as string[];
 
+  const { isExcluded: isExploreExcluded } = useAmityElement({
+    pageId: PageID.social_home_page,
+    componentId: ComponentID.WildCardComponent,
+    elementId: ElementID.explore_button,
+  });
+
+  const allTabs = [newsFeedTab, exploreTab, myCommunitiesTab, PROFILE_TAB];
+
+  const visibleTabs = isExploreExcluded
+    ? allTabs.filter((t) => t !== exploreTab)
+    : allTabs;
+
   const [activeTab, setActiveTab] = useState<string>(newsFeedTab);
+
   const visitedTabs = useRef<Set<string>>(new Set([newsFeedTab]));
 
+  useEffect(() => {
+    if (isVisitorOrBot) {
+      visitedTabs.current.add(exploreTab);
+      setActiveTab(exploreTab);
+    }
+  }, [isVisitorOrBot, exploreTab]);
+
   const onTabChange = useCallback(
     (tabName: string) => {
       if (AmitySocialHomePageBehaviour?.onChooseTab)
@@ -74,6 +94,8 @@ const AmitySocialHomePage = () => {
     display: activeTab === tab ? ('flex' as const) : ('none' as const),
   });
 
+  const tabNames = isVisitorOrBot ? [exploreTab] : visibleTabs;
+
   return (
     <SafeAreaView
       testID="social_home_page"
@@ -82,24 +104,30 @@ const AmitySocialHomePage = () => {
       style={styles.container}
     >
       <AmitySocialHomeTopNavigationComponent activeTab={activeTab} />
-      <CustomSocialTab
-        activeTab={activeTab}
-        onTabChange={onTabChange}
-        tabNames={[newsFeedTab, exploreTab, myCommunitiesTab, PROFILE_TAB]}
-      />
-      <Divider />
-      <View style={tabStyle(newsFeedTab)}>
-        <AmityNewsFeedComponent
-          pageId={PageID.social_home_page}
-          onPressExploreCommunity={onPressExploreCommunity}
-        />
-      </View>
+      {tabNames.length > 1 && (
+        <>
+          <CustomSocialTab
+            activeTab={activeTab}
+            onTabChange={onTabChange}
+            tabNames={tabNames}
+          />
+          <Divider />
+        </>
+      )}
+      {!isVisitorOrBot && (
+        <View style={tabStyle(newsFeedTab)}>
+          <AmityNewsFeedComponent
+            pageId={PageID.social_home_page}
+            onPressExploreCommunity={onPressExploreCommunity}
+          />
+        </View>
+      )}
       {visitedTabs.current.has(exploreTab) && (
         <View style={tabStyle(exploreTab)}>
           <AmityExploreComponent pageId={PageID.social_home_page} />
         </View>
       )}
-      {visitedTabs.current.has(myCommunitiesTab) && (
+      {!isVisitorOrBot && visitedTabs.current.has(myCommunitiesTab) && (
         <View style={tabStyle(myCommunitiesTab)}>
           <AmityMyCommunitiesComponent
             pageId={PageID.social_home_page}
@@ -107,7 +135,7 @@ const AmitySocialHomePage = () => {
           />
         </View>
       )}
-      {visitedTabs.current.has(PROFILE_TAB) && (
+      {!isVisitorOrBot && visitedTabs.current.has(PROFILE_TAB) && (
         <View style={tabStyle(PROFILE_TAB)}>
           <UserProfile inline stickyTab={false} userId={client?.userId ?? ''} />
         </View>

package/src/social/screens/VisitorUsageLimit/VisitorUsageLimit.tsx

@@ -0,0 +1,5 @@
+import { UsageLimit } from '../../features/visitor/UsageLimit';
+
+export function VisitorUsageLimit() {
+  return <UsageLimit />;
+}

package/src/social/screens/VisitorUsageLimit/index.ts

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