|
@@ -13,6 +13,11 @@ import { Colors } from '../../theme';
|
|
|
import { styles } from './style';
|
|
|
import BlinkingDot from '../BlinkingDot';
|
|
|
import { useNotification } from 'src/contexts/NotificationContext';
|
|
|
+import MessagesDot from '../MessagesDot';
|
|
|
+import { storage, StoreType } from 'src/storage';
|
|
|
+import { WarningModal } from '../WarningModal';
|
|
|
+import { useState } from 'react';
|
|
|
+import { useMessagesStore } from 'src/stores/unreadMessagesStore';
|
|
|
|
|
|
const getTabIcon = (routeName: string) => {
|
|
|
switch (routeName) {
|
|
@@ -43,15 +48,24 @@ const TabBarButton = ({
|
|
|
navigation: any;
|
|
|
}) => {
|
|
|
const IconComponent: React.FC<SvgProps> | null = getTabIcon(label);
|
|
|
+ const token = storage.get('token', StoreType.STRING);
|
|
|
const { isNotificationActive } = useNotification();
|
|
|
+ const unreadMessagesCount = useMessagesStore((state) => state.unreadMessagesCount);
|
|
|
+ const [isWarningModalVisible, setIsWarningModalVisible] = useState(false);
|
|
|
|
|
|
let currentColor = focused ? Colors.DARK_BLUE : Colors.LIGHT_GRAY;
|
|
|
|
|
|
return (
|
|
|
<TouchableWithoutFeedback
|
|
|
- onPress={() =>
|
|
|
- label === NAVIGATION_PAGES.MENU_DRAWER ? (navigation as any)?.openDrawer() : onPress()
|
|
|
- }
|
|
|
+ onPress={() => {
|
|
|
+ if (label === NAVIGATION_PAGES.MENU_DRAWER) {
|
|
|
+ (navigation as any)?.openDrawer();
|
|
|
+ } else if (label === NAVIGATION_PAGES.IN_APP_MESSAGES_TAB && !token) {
|
|
|
+ setIsWarningModalVisible(true);
|
|
|
+ } else {
|
|
|
+ onPress();
|
|
|
+ }
|
|
|
+ }}
|
|
|
>
|
|
|
<View style={styles.buttonStyle}>
|
|
|
<View style={{ alignItems: 'center' }}>
|
|
@@ -59,8 +73,16 @@ const TabBarButton = ({
|
|
|
{label === NAVIGATION_PAGES.IN_APP_TRAVELLERS_TAB && isNotificationActive && (
|
|
|
<BlinkingDot diameter={8} />
|
|
|
)}
|
|
|
+ {label === NAVIGATION_PAGES.IN_APP_MESSAGES_TAB && unreadMessagesCount > 0 && (
|
|
|
+ <MessagesDot messagesCount={unreadMessagesCount} />
|
|
|
+ )}
|
|
|
<Text style={[styles.labelStyle, { color: currentColor }]}>{label}</Text>
|
|
|
</View>
|
|
|
+ <WarningModal
|
|
|
+ type={'unauthorized'}
|
|
|
+ isVisible={isWarningModalVisible}
|
|
|
+ onClose={() => setIsWarningModalVisible(false)}
|
|
|
+ />
|
|
|
</View>
|
|
|
</TouchableWithoutFeedback>
|
|
|
);
|