diff --git a/native/chat/settings/thread-settings-notifications.react.js b/native/chat/settings/thread-settings-notifications.react.js
index 0a3b21e5b..cfc73dfe6 100644
--- a/native/chat/settings/thread-settings-notifications.react.js
+++ b/native/chat/settings/thread-settings-notifications.react.js
@@ -1,298 +1,336 @@
// @flow
import * as React from 'react';
import { View, Text } from 'react-native';
import {
threadSettingsNotificationsCopy,
useThreadSettingsNotifications,
} from 'lib/shared/thread-settings-notifications-utils.js';
import type { ThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
import EnumSettingsOption from '../../components/enum-settings-option.react.js';
import SWMansionIcon from '../../components/swmansion-icon.react.js';
import HeaderRightTextButton from '../../navigation/header-right-text-button.react.js';
import type { NavigationRoute } from '../../navigation/route-names.js';
import { useStyles, useColors } from '../../themes/colors.js';
import AllNotifsIllustration from '../../vectors/all-notifs-illustration.react.js';
import BadgeNotifsIllustration from '../../vectors/badge-notifs-illustration.react.js';
import MutedNotifsIllustration from '../../vectors/muted-notifs-illustration.react.js';
import type { ChatNavigationProp } from '../chat.react.js';
export type ThreadSettingsNotificationsParams = {
+threadInfo: ThreadInfo,
};
type NotificationDescriptionProps = {
+selected: boolean,
+bannerNotifsEnabled: boolean,
+badgeCountEnabled: boolean,
+livesInFocusedTab: boolean,
};
function NotificationDescription(
props: NotificationDescriptionProps,
): React.Node {
const {
selected,
bannerNotifsEnabled,
badgeCountEnabled,
livesInFocusedTab,
} = props;
const styles = useStyles(unboundStyles);
const colors = useColors();
const bannerNotifsDescriptionTextStyles = React.useMemo(() => {
const style = [styles.notificationOptionDescriptionText];
if (selected && !bannerNotifsEnabled) {
style.push(styles.notificationOptionDescriptionTextDisabledSelected);
} else if (!bannerNotifsEnabled) {
style.push(styles.notificationOptionDescriptionTextDisabled);
}
return style;
}, [
bannerNotifsEnabled,
selected,
styles.notificationOptionDescriptionText,
styles.notificationOptionDescriptionTextDisabled,
styles.notificationOptionDescriptionTextDisabledSelected,
]);
const badgeCountDescriptionTextStyles = React.useMemo(() => {
const style = [styles.notificationOptionDescriptionText];
if (selected && !badgeCountEnabled) {
style.push(styles.notificationOptionDescriptionTextDisabledSelected);
} else if (!badgeCountEnabled) {
style.push(styles.notificationOptionDescriptionTextDisabled);
}
return style;
}, [
badgeCountEnabled,
selected,
styles.notificationOptionDescriptionText,
styles.notificationOptionDescriptionTextDisabled,
styles.notificationOptionDescriptionTextDisabledSelected,
]);
let bannerNotifsIconColor = colors.panelForegroundSecondaryLabel;
if (selected && !bannerNotifsEnabled) {
bannerNotifsIconColor = colors.panelInputSecondaryForeground;
} else if (!bannerNotifsEnabled) {
bannerNotifsIconColor = colors.panelSecondaryForeground;
}
let badgeCountIconColor = colors.panelForegroundSecondaryLabel;
if (selected && !badgeCountEnabled) {
badgeCountIconColor = colors.panelInputSecondaryForeground;
} else if (!badgeCountEnabled) {
badgeCountIconColor = colors.panelSecondaryForeground;
}
return (
<>
{threadSettingsNotificationsCopy.BANNER_NOTIFS}
{threadSettingsNotificationsCopy.BADGE_COUNT}
{livesInFocusedTab
? threadSettingsNotificationsCopy.IN_FOCUSED_TAB
: threadSettingsNotificationsCopy.IN_BACKGROUND_TAB}
>
);
}
type Props = {
+navigation: ChatNavigationProp<'ThreadSettingsNotifications'>,
+route: NavigationRoute<'ThreadSettingsNotifications'>,
};
function ThreadSettingsNotifications(props: Props): React.Node {
const {
navigation: { setOptions, goBack },
route: {
params: { threadInfo },
},
} = props;
const {
notificationSettings,
onFocusedSelected,
onBadgeOnlySelected,
onBackgroundSelected,
saveButtonDisabled,
onSave,
+ isSidebar,
+ canPromoteSidebar,
} = useThreadSettingsNotifications(threadInfo, goBack);
React.useEffect(() => {
setOptions({
headerRight: () => (
),
});
}, [saveButtonDisabled, onSave, setOptions]);
const styles = useStyles(unboundStyles);
const allNotificationsIllustration = React.useMemo(
() => (
),
[styles.notificationOptionIconContainer],
);
const badgeOnlyIllustration = React.useMemo(
() => (
),
[styles.notificationOptionIconContainer],
);
const mutedIllustration = React.useMemo(
() => (
),
[styles.notificationOptionIconContainer],
);
const allNotificationsDescription = React.useMemo(
() => (
),
[notificationSettings],
);
const badgeOnlyDescription = React.useMemo(
() => (
),
[notificationSettings],
);
const mutedDescription = React.useMemo(
() => (
),
[notificationSettings],
);
+ const noticeText = React.useMemo(() => {
+ if (!isSidebar) {
+ return null;
+ }
+
+ return (
+
+
+ {threadSettingsNotificationsCopy.IS_SIDEBAR}
+
+
+ {canPromoteSidebar
+ ? threadSettingsNotificationsCopy.IS_SIDEBAR_CAN_PROMOTE
+ : threadSettingsNotificationsCopy.IS_SIDEBAR_CAN_NOT_PROMOTE}
+
+
+ );
+ }, [
+ canPromoteSidebar,
+ isSidebar,
+ styles.noticeText,
+ styles.noticeTextContainer,
+ ]);
+
return (
+ {noticeText}
);
}
const unboundStyles = {
container: {
backgroundColor: 'panelForeground',
},
enumSettingsOptionContainer: {
padding: 8,
},
notificationOptionIconContainer: {
justifyContent: 'center',
marginLeft: 8,
marginRight: 16,
},
notificationOptionDescriptionListItem: {
flexDirection: 'row',
alignItems: 'center',
marginTop: 4,
},
notificationOptionDescriptionText: {
color: 'panelForegroundSecondaryLabel',
marginLeft: 4,
fontSize: 14,
},
notificationOptionDescriptionTextDisabled: {
textDecorationLine: 'line-through',
color: 'panelSecondaryForeground',
},
notificationOptionDescriptionTextDisabledSelected: {
color: 'panelInputSecondaryForeground',
textDecorationLine: 'line-through',
},
+ noticeTextContainer: {
+ padding: 16,
+ },
+ noticeText: {
+ color: 'panelForegroundSecondaryLabel',
+ textAlign: 'center',
+ fontSize: 14,
+ lineHeight: 18,
+ marginVertical: 8,
+ },
};
export default ThreadSettingsNotifications;