@amityco/react-native-social-uikit 4.0.0-03e2bf8.0 → 4.0.0-0871dfa8.0

package/src/v4/PublicApi/Pages/AmityPostDetailPage/AmityPostDetailPage.tsx

@@ -18,6 +18,7 @@ import React, {
 } from 'react';
 import { ComponentID, PageID } from '../../../../v4/enum/';
 import { TSearchItem, useAmityPage } from '../../../../v4/hook';
+import useAuth from '../../../../hooks/useAuth';
 import { useStyles } from './styles';
 import BackButtonIconElement from '../../Elements/BackButtonIconElement/BackButtonIconElement';
 import { CommonActions, useNavigation } from '@react-navigation/native';
@@ -40,6 +41,8 @@ import { closeIcon } from '../../../../svg/svg-xml-list';
 import { SvgXml } from 'react-native-svg';
 import { IMentionPosition } from '../../../../types';
 import uiSlice from '../../../../redux/slices/uiSlice';
+import NetInfo from '@react-native-community/netinfo';
+import { useToast } from '../../../../v4/stores/slices/toast';
 import MyAvatar from '../../../../v4/component/MyAvatar/MyAvatar';
 import {
   comment_contains_inapproproate_word,
@@ -64,6 +67,7 @@ type AmityPostDetailPageType = {
   isFromComponent?: boolean;
   showEndPopup?: boolean;
   category?: AmityPostCategory;
+  isDeleted?: boolean;
 };
 
 const AmityPostDetailPage: FC<AmityPostDetailPageType> = ({
@@ -71,15 +75,20 @@ const AmityPostDetailPage: FC<AmityPostDetailPageType> = ({
   isFromComponent,
   showEndPopup,
   category,
+  isDeleted,
 }) => {
   const pageId = PageID.post_detail_page;
   const dispatch = useUIKitDispatch();
   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>>();
   const { isExcluded, themeStyles, accessibilityId } = useAmityPage({ pageId });
   const styles = useStyles(themeStyles);
+  const { showToast } = useToast();
   const [postData, setPostData] = useState<Amity.Post<any>>(null);
   const [loading, setLoading] = useState<boolean>(true);
 
@@ -108,6 +117,20 @@ const AmityPostDetailPage: FC<AmityPostDetailPageType> = ({
 
   const { showToastMessage } = uiSlice.actions;
 
+  useEffect(() => {
+    const unsubscribe = NetInfo.addEventListener((state) => {
+      if (!state.isConnected) {
+        showToast({
+          type: 'failed',
+          message: 'No internet connection.',
+          duration: 3000,
+          bottomPosition: 96,
+        });
+      }
+    });
+    return () => unsubscribe();
+  }, [showToast]);
+
   useLayoutEffect(() => {
     if (!postId) return () => {};
     setLoading(true);
@@ -249,7 +272,7 @@ const AmityPostDetailPage: FC<AmityPostDetailPageType> = ({
               </TouchableOpacity>
             </View>
           )}
-          {!disabledInteraction && (
+          {!disabledInteraction && !isVisitorOrBot && (
             <View style={styles.InputWrap}>
               <MyAvatar style={styles.myAvatar} />
               <View style={styles.inputContainer}>
@@ -304,7 +327,7 @@ const AmityPostDetailPage: FC<AmityPostDetailPageType> = ({
 
   if (isExcluded) return null;
 
-  if (postData?.isDeleted) {
+  if (isDeleted || postData?.isDeleted) {
     return (
       <ErrorComponent
         themeStyle={themeStyles}
@@ -361,7 +384,7 @@ const AmityPostDetailPage: FC<AmityPostDetailPageType> = ({
                 postData?.targetType === 'community' && postData?.targetId
               }
               postType="post"
-              disabledInteraction={false}
+              disabledInteraction={disabledInteraction}
               ListHeaderComponent={
                 postData && (
                   <AmityPostContentComponent

package/src/v4/PublicApi/Pages/AmityPostTargetSelectionPage/AmityPostTargetSelectionPage.tsx

@@ -81,10 +81,17 @@ const AmityPostTargetSelectionPage = ({
     }
   };
 
+  const onClickClose = () => {
+    if (AmityPostTargetSelectionPageBehavior?.onClickClose) {
+      AmityPostTargetSelectionPageBehavior.onClickClose();
+    }
+  };
+
   return (
     <TargetSelectionPage
       pageId={PageID.select_post_target_page}
       onSelectFeed={onSelectFeed}
+      onClickClose={onClickClose}
     />
   );
 };

package/src/v4/PublicApi/Pages/AmitySocialGlobalSearchPage/AmitySocialGlobalSearchPage.tsx

@@ -31,7 +31,6 @@ const AmitySocialGlobalSearchPage = () => {
       />
     </View>
   );
-
   const isCommunity = searchType === TabName.Communities;
   if (isExcluded) return null;
   return (

package/src/v4/PublicApi/Pages/AmitySocialHomePage/AmitySocialHomePage.tsx

@@ -1,22 +1,23 @@
 import * as React from 'react';
-import { useCallback, useState } from 'react';
-import { LogBox, SafeAreaView, StyleSheet } from 'react-native';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { SafeAreaView, StyleSheet, View } from 'react-native';
 import CustomSocialTab from '../../../../v4/component/CustomSocialTab/CustomSocialTab';
 import { useUiKitConfig } from '../../../../v4/hook';
-import { ComponentID, ElementID, PageID } from '../../../../v4/enum/enumUIKitID';
+import {
+  ComponentID,
+  ElementID,
+  PageID,
+} from '../../../../v4/enum/enumUIKitID';
 
 import { useTheme } from 'react-native-paper';
 import { useBehaviour } from '../../../../v4/providers/BehaviourProvider';
 import AmitySocialHomeTopNavigationComponent from '../../../../v4/PublicApi/Components/AmitySocialHomeTopNavigationComponent/AmitySocialHomeTopNavigationComponent';
-import AmityEmptyNewsFeedComponent from '../../../../v4/PublicApi/Components/AmityEmptyNewsFeedComponent/AmityEmptyNewsFeedComponent';
 import AmityMyCommunitiesComponent from '../../../../v4/PublicApi/Components/AmityMyCommunitiesComponent/AmityMyCommunitiesComponent';
 import AmityNewsFeedComponent from '../../../../v4/PublicApi/Components/AmityNewsFeedComponent/AmityNewsFeedComponent';
 import AmityExploreComponent from '../../../../v4/PublicApi/Components/AmityExploreComponent/AmityExploreComponent';
-import NewsFeedLoadingComponent from '../../../../v4/component/NewsFeedLoadingComponent/NewsFeedLoadingComponent';
-import { useCustomRankingGlobalFeed } from '../../../../v4/hook/useCustomRankingGlobalFeed';
 import { MyMD3Theme } from '../../../../providers/amity-ui-kit-provider';
+import useAuth from '../../../../hooks/useAuth';
 
-LogBox.ignoreAllLogs(true);
 const AmitySocialHomePage = () => {
   const theme = useTheme() as MyMD3Theme;
   const styles = StyleSheet.create({
@@ -27,8 +28,6 @@ const AmitySocialHomePage = () => {
   });
 
   const { AmitySocialHomePageBehaviour } = useBehaviour();
-  const { itemWithAds: globalFeedPosts, loading } =
-    useCustomRankingGlobalFeed();
 
   const [newsFeedTab] = useUiKitConfig({
     page: PageID.social_home_page,
@@ -51,12 +50,24 @@ const AmitySocialHomePage = () => {
     keys: ['text'],
   }) as string[];
 
+  const { isVisitorOrBot } = useAuth();
   const [activeTab, setActiveTab] = useState<string>(newsFeedTab);
+  const visitedTabs = useRef<Set<string>>(new Set([newsFeedTab]));
+
+  // Web parity (SocialHomePage): visitors land on the community browsing tab
+  // and never see Newsfeed / My Communities.
+  useEffect(() => {
+    if (isVisitorOrBot) {
+      visitedTabs.current.add(exploreTab);
+      setActiveTab(exploreTab);
+    }
+  }, [isVisitorOrBot, exploreTab]);
 
   const onTabChange = useCallback(
     (tabName: string) => {
       if (AmitySocialHomePageBehaviour.onChooseTab)
         return AmitySocialHomePageBehaviour.onChooseTab(tabName);
+      visitedTabs.current.add(tabName);
       setActiveTab(tabName);
     },
     [AmitySocialHomePageBehaviour]
@@ -66,30 +77,10 @@ const AmitySocialHomePage = () => {
     onTabChange(exploreTab);
   }, [exploreTab, onTabChange]);
 
-  const renderNewsFeed = () => {
-    if (loading) return <NewsFeedLoadingComponent />;
-    if (activeTab === exploreTab)
-      return <AmityExploreComponent pageId={PageID.social_home_page} />;
-
-    if (activeTab === newsFeedTab) {
-      if (!loading && globalFeedPosts?.length === 0)
-        return (
-          <AmityEmptyNewsFeedComponent
-            pageId={PageID.social_home_page}
-            onPressExploreCommunity={onPressExploreCommunity}
-          />
-        );
-      return <AmityNewsFeedComponent pageId={PageID.social_home_page} />;
-    }
-    if (activeTab === myCommunitiesTab)
-      return (
-        <AmityMyCommunitiesComponent
-          pageId={PageID.social_home_page}
-          componentId={ComponentID.my_communities}
-        />
-      );
-    return null;
-  };
+  const tabStyle = (tab: string) => ({
+    flex: 1,
+    display: activeTab === tab ? ('flex' as const) : ('none' as const),
+  });
 
   return (
     <SafeAreaView
@@ -100,11 +91,35 @@ const AmitySocialHomePage = () => {
     >
       <AmitySocialHomeTopNavigationComponent activeTab={activeTab} />
       <CustomSocialTab
-        tabNames={[newsFeedTab, exploreTab, myCommunitiesTab]}
+        tabNames={
+          isVisitorOrBot
+            ? [exploreTab]
+            : [newsFeedTab, exploreTab, myCommunitiesTab]
+        }
         onTabChange={onTabChange}
         activeTab={activeTab}
       />
-      {renderNewsFeed()}
+      {!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>
+      )}
+      {!isVisitorOrBot && visitedTabs.current.has(myCommunitiesTab) && (
+        <View style={tabStyle(myCommunitiesTab)}>
+          <AmityMyCommunitiesComponent
+            pageId={PageID.social_home_page}
+            componentId={ComponentID.my_communities}
+          />
+        </View>
+      )}
     </SafeAreaView>
   );
 };

package/src/v4/PublicApi/Pages/AmityStoryTargetSelectionPage/AmityStoryTargetSelectionPage.tsx

@@ -24,11 +24,18 @@ const AmityStoryTargetSelectionPage = () => {
     });
   };
 
+  const onClickClose = () => {
+    if (AmityStoryTargetSelectionPageBehavior?.onClickClose) {
+      AmityStoryTargetSelectionPageBehavior.onClickClose();
+    }
+  };
+
   return (
     <TargetSelectionPage
       pageId={PageID.select_story_target_page}
       onSelectFeed={onSelectFeed}
       hideMyTimelineTarget={true}
+      onClickClose={onClickClose}
     />
   );
 };

package/src/v4/PublicApi/Pages/AmityUserProfilePage/AmityUserProfilePage.tsx

@@ -49,7 +49,7 @@ import { TabName } from '../../../../enum/tabNameState';
 import uiSlice from '../../../../redux/slices/uiSlice';
 import { PostTargetType } from '../../../../enum/postTargetType';
 import GalleryComponent from '../../../component/Gallery/GalleryComponent';
-import { useFile } from '../../../hook';
+import { useFile, useGlobalBehavior } from '../../../hook';
 import { defaultAvatarUri } from '../../../assets';
 import { ImageSizeState } from '../../../enum';
 
@@ -105,13 +105,17 @@ function UserProfile({
       user: user,
     });
   };
+  const { handleGlobalBehavior } = useGlobalBehavior();
   const onFollowTap = async () => {
-    const { data: followStatus } = await UserRepository.Relationship.follow(
-      userId
-    );
-    if (followStatus) {
-      setFollowStatus(followStatus.status);
-    }
+    handleGlobalBehavior({
+      defaultBehavior: async () => {
+        const { data: newFollowStatus } =
+          await UserRepository.Relationship.follow(userId);
+        if (newFollowStatus) {
+          setFollowStatus(newFollowStatus.status);
+        }
+      },
+    });
   };
   const onUnblockUser = async () => {
     await UserRepository.Relationship.unBlockUser(userId);
@@ -152,7 +156,9 @@ function UserProfile({
         </TouchableOpacity>
       ),
       headerLeft: () => {
-        return isShowBackButton ? <BackButton onPress={handleGoBack} /> : null;
+        return isShowBackButton ? (
+          <BackButton goBack={false} onPress={handleGoBack} />
+        ) : null;
       },
     });
   }, [
@@ -174,17 +180,32 @@ function UserProfile({
   }, [client]);
 
   useEffect(() => {
-    if (!user?.avatarFileId) {
-      return setAvatar(defaultAvatarUri);
-    }
-    (async () => {
+    const loadAvatar = async () => {
+      if (!user) {
+        setAvatar(defaultAvatarUri);
+        return;
+      }
+
+      if (user.avatarCustomUrl) {
+        setAvatar(user.avatarCustomUrl);
+        return;
+      }
+
+      if (!user.avatarFileId) {
+        setAvatar(defaultAvatarUri);
+        return;
+      }
+
       const avatarUrl = await getImage({
         fileId: user.avatarFileId,
         imageSize: ImageSizeState.small,
       });
+
       setAvatar(avatarUrl ?? defaultAvatarUri);
-    })();
-  }, [getImage, user?.avatarFileId]);
+    };
+
+    loadAvatar();
+  }, [getImage, user]);
 
   useFocusEffect(
     useCallback(() => {

package/src/v4/PublicApi/Pages/AmityViewStoryPage/AmityViewStoryPage.tsx

@@ -34,7 +34,7 @@ const AmityViewStoryPage: FC<IAmityViewStoryPage> = ({
 }) => {
   const { client } = useAuth();
   const userId = (client as Amity.Client).userId;
-  const hasStoryPermission = useStoryPermission(targetId);
+  const { hasStoryPermission } = useStoryPermission(targetId);
   const styles = useStyles();
   const { getStories, stories, loading } = useStory();
   const { getImage } = useFile();

package/src/v4/PublicApi/Pages/AmityViewStoryPage/Components/AmityViewStoryItem.tsx

@@ -43,6 +43,8 @@ import { Typography } from '../../../../component/Typography/Typography';
 import { useTheme } from 'react-native-paper';
 import { MyMD3Theme } from '../../../../../providers/amity-ui-kit-provider';
 import { useUIKitDispatch } from '../../../../../redux/store';
+import { informative } from '../../../../../v4/assets/icons/toast';
+import { close as closeIcon } from '../../../../assets/icons';
 
 interface IAmityViewStoryItem {
   communityData: Amity.Community;
@@ -96,7 +98,6 @@ const AmityViewStoryItem: FC<IAmityViewStoryItem> = ({
   const [isLiked, setIsLiked] = useState<boolean>(myReactions?.length > 0);
   const [openCommentSheet, setOpenCommentSheet] = useState(false);
   const [load, setLoad] = useState(true);
-  const [error, setError] = useState(false);
   const [loading, setLoading] = useState(false);
   const dispatch = useUIKitDispatch();
   const { showToastMessage } = uiSlice.actions;
@@ -248,10 +249,20 @@ const AmityViewStoryItem: FC<IAmityViewStoryItem> = ({
       );
       if (deleted) {
         current === 0 && previous();
-        dispatch(showToastMessage({ toastMessage: 'Story deleted' }));
+        dispatch(
+          showToastMessage({
+            toastMessage: 'Story deleted',
+            isSuccessToast: true,
+          })
+        );
       }
     } catch (err) {
-      dispatch(showToastMessage({ toastMessage: 'Delete Story Error!' }));
+      dispatch(
+        showToastMessage({
+          toastMessage: 'Failed to delete story. Please try again.',
+          isSuccessToast: false,
+        })
+      );
     } finally {
       setLoading(false);
       sheetRef?.current?.close();
@@ -288,6 +299,30 @@ const AmityViewStoryItem: FC<IAmityViewStoryItem> = ({
     sheetRef.current?.open();
   }, [progress]);
 
+  const onPressMenuButtonFailed = useCallback(() => {
+    progress.stopAnimation(() => setPressed(true));
+    Alert.alert(
+      'Failed to upload story',
+      'Would you like to discard uploading?',
+      [
+        { text: 'Cancel', onPress: () => sheetRef?.current?.close() },
+        { text: 'Delete', style: 'destructive', onPress: deleteStory },
+      ]
+    );
+  }, [deleteStory, progress]);
+
+  const isFailedImageUpload =
+    currentStory?.dataType === 'image' &&
+    (currentStory?.syncState === 'error' ||
+      currentStory?.syncState === 'syncing' ||
+      !currentStory?.imageData?.fileUrl);
+
+  const isFailedVideoUpload =
+    currentStory?.dataType === 'video' &&
+    (currentStory?.syncState === 'error' ||
+      currentStory?.syncState === 'syncing' ||
+      !currentStory?.videoData?.fileUrl);
+
   return (
     <View style={[styles.container]}>
       <SafeAreaView>
@@ -296,7 +331,13 @@ const AmityViewStoryItem: FC<IAmityViewStoryItem> = ({
             <Video
               onLoadStart={() => setLoad(true)}
               onProgress={({ currentTime }) => setCurrentSeek(currentTime)}
-              source={{ uri: currentStory?.videoData.fileUrl }}
+              source={{
+                uri:
+                  currentStory?.videoData?.fileUrl ||
+                  (typeof currentStory?.data?.fileData === 'string'
+                    ? currentStory?.data?.fileData
+                    : ''),
+              }}
               style={styles.video}
               resizeMode="contain"
               controls={false}
@@ -308,12 +349,15 @@ const AmityViewStoryItem: FC<IAmityViewStoryItem> = ({
           ) : currentStory?.dataType === 'image' ? (
             <Image
               onLoadStart={() => setLoad(true)}
-              onError={({ nativeEvent: { error: err } }) =>
-                err && setError(true)
-              }
               onLoadEnd={() => start()}
-              source={{ uri: currentStory?.imageData.fileUrl }}
-              style={[styles.image]}
+              source={{
+                uri:
+                  currentStory?.imageData?.fileUrl ||
+                  (typeof currentStory?.data?.fileData === 'string'
+                    ? currentStory?.data?.fileData
+                    : ''),
+              }}
+              style={[styles.image, isFailedImageUpload && { opacity: 0.6 }]}
               resizeMode="contain"
             />
           ) : null}
@@ -322,11 +366,6 @@ const AmityViewStoryItem: FC<IAmityViewStoryItem> = ({
               <ActivityIndicator size="large" color={'white'} />
             </View>
           )}
-          {error && (
-            <View style={styles.spinnerContainer}>
-              <Text style={styles.error}>Story load error</Text>
-            </View>
-          )}
         </View>
       </SafeAreaView>
       <GestureRecognizer onSwipeUp={onPressComment} style={styles.flexCol}>
@@ -399,7 +438,12 @@ const AmityViewStoryItem: FC<IAmityViewStoryItem> = ({
                 </TouchableOpacity>
               )}
               <TouchableOpacity hitSlop={5} onPress={() => onClose()}>
-                <Text style={styles.whiteText}>X</Text>
+                <SvgXml
+                  xml={closeIcon()}
+                  width="28"
+                  height="28"
+                  color="white"
+                />
               </TouchableOpacity>
             </View>
           </View>
@@ -465,49 +509,70 @@ const AmityViewStoryItem: FC<IAmityViewStoryItem> = ({
           </TouchableOpacity>
         )}
       </GestureRecognizer>
-      <View style={styles.footer}>
-        {hasStoryImpressionPermission ? (
-          <TouchableOpacity
-            style={[
-              styles.seenContainer,
-              { backgroundColor: storyViewerBgColor },
-            ]}
-          >
-            <SvgXml xml={seenIcon()} width="25" height="25" />
-            <Text style={styles.seen}>{reachCount}</Text>
-          </TouchableOpacity>
-        ) : (
-          <View style={styles.seenContainer} />
-        )}
-        <View style={styles.seenContainer}>
-          <TouchableOpacity
-            style={[
-              styles.iconContainer,
-              { backgroundColor: storyCommentBgColor },
-            ]}
-            onPress={onPressComment}
-          >
-            <SvgXml xml={storyCommentIcon()} width="25" height="25" />
-            <Text style={styles.seen}>{commentsCounts}</Text>
-          </TouchableOpacity>
-          <TouchableOpacity
-            style={[
-              styles.iconContainer,
-              {
-                backgroundColor: storyReactionBgColor,
-              },
-            ]}
-            onPress={onPressReaction}
-          >
-            <SvgXml
-              xml={isLiked ? storyLikedIcon : storyLikeIcon}
-              width="25"
-              height="25"
-            />
-            <Text style={styles.seen}>{totalReaction}</Text>
-          </TouchableOpacity>
+      {(isFailedImageUpload || isFailedVideoUpload) && hasStoryPermission ? (
+        <View style={styles.errorContainer}>
+          <View style={styles.errorContainerLeft}>
+            <SvgXml xml={informative('white')} width="20" height="20" />
+            <Typography.Body style={styles.errorText}>
+              Failed to upload story
+            </Typography.Body>
+          </View>
+          {
+            <TouchableOpacity
+              hitSlop={5}
+              style={styles.threeDotsMenu}
+              onPress={onPressMenuButtonFailed}
+            >
+              <SvgXml xml={storyThreedotsMenu()} width="20" height="20" />
+            </TouchableOpacity>
+          }
         </View>
-      </View>
+      ) : (
+        <View style={styles.footer}>
+          {hasStoryImpressionPermission ? (
+            <TouchableOpacity
+              style={[
+                styles.seenContainer,
+                { backgroundColor: storyViewerBgColor },
+              ]}
+            >
+              <SvgXml xml={seenIcon()} width="25" height="25" />
+              <Text style={styles.seen}>{reachCount}</Text>
+            </TouchableOpacity>
+          ) : (
+            <View style={styles.seenContainer} />
+          )}
+          <View style={styles.seenContainer}>
+            <TouchableOpacity
+              style={[
+                styles.iconContainer,
+                { backgroundColor: storyCommentBgColor },
+              ]}
+              onPress={onPressComment}
+            >
+              <SvgXml xml={storyCommentIcon()} width="25" height="25" />
+              <Text style={styles.seen}>{commentsCounts}</Text>
+            </TouchableOpacity>
+            <TouchableOpacity
+              style={[
+                styles.iconContainer,
+                {
+                  backgroundColor: storyReactionBgColor,
+                },
+              ]}
+              onPress={onPressReaction}
+            >
+              <SvgXml
+                xml={isLiked ? storyLikedIcon : storyLikeIcon}
+                width="25"
+                height="25"
+              />
+              <Text style={styles.seen}>{totalReaction}</Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+      )}
+
       {openCommentSheet && (
         <Modal
           style={styles.bottomSheet}
@@ -530,6 +595,7 @@ const AmityViewStoryItem: FC<IAmityViewStoryItem> = ({
             <CommentList
               postId={currentStory?.storyId}
               postType="story"
+              disabledComment={!communityData?.allowCommentInStory}
               disabledInteraction={!communityData?.isJoined}
               onNavigate={onClose}
             />

package/src/v4/PublicApi/Pages/AmityViewStoryPage/styles.ts

@@ -14,6 +14,7 @@ export const useStyles = () => {
       flex: 1,
       width: width,
       backgroundColor: '#000',
+      position: 'relative',
     },
     flex: {
       flex: 1,
@@ -73,7 +74,7 @@ export const useStyles = () => {
       fontSize: 14,
     },
     avatarSubText: {
-      color: theme.colors.background,
+      color: 'white',
       fontSize: 12,
     },
     closeIconContainer: {
@@ -219,6 +220,27 @@ export const useStyles = () => {
       color: theme.colors.base,
       fontSize: 14,
     },
+    errorContainer: {
+      width: '100%',
+      position: 'absolute',
+      bottom: 120,
+      left: 0,
+      backgroundColor: theme.colors.alert,
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      paddingVertical: 12,
+      paddingHorizontal: 16,
+    },
+    errorContainerLeft: {
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 4,
+    },
+    errorText: {
+      color: 'white',
+    },
   });
 
   return styles;

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

@@ -33,6 +33,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';