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;