diff --git a/lib/shared/thread-settings-notifications-utils.js b/lib/shared/thread-settings-notifications-utils.js index ea9ff0dba..05631c48f 100644 --- a/lib/shared/thread-settings-notifications-utils.js +++ b/lib/shared/thread-settings-notifications-utils.js @@ -1,169 +1,169 @@ // @flow import * as React from 'react'; import { threadIsSidebar } from './thread-utils.js'; import { updateSubscriptionActionTypes, useUpdateSubscription, } from '../actions/user-actions.js'; import { useCanPromoteSidebar } from '../hooks/promote-sidebar.react.js'; import { createLoadingStatusSelector } from '../selectors/loading-selectors.js'; import { threadInfoSelector } from '../selectors/thread-selectors.js'; import type { ThreadInfo } from '../types/minimally-encoded-thread-permissions-types.js'; import { useDispatchActionPromise } from '../utils/redux-promise-utils.js'; import { useSelector } from '../utils/redux-utils.js'; -type NotificationSettings = 'focused' | 'badge-only' | 'background'; +type NotificationSettings = 'home' | 'notif-count-only' | 'muted'; const threadSettingsNotificationsCopy = { BANNER_NOTIFS: 'Banner notifs', NOTIF_COUNT: 'Notif count', - IN_FOCUSED_TAB: 'Lives in Focused tab', - IN_BACKGROUND_TAB: 'Lives in Background tab', - FOCUSED: 'Focused (enabled)', - BADGE_ONLY: 'Focused (badge only)', - BACKGROUND: 'Background', + IN_HOME_TAB: 'Lives in Home tab', + IN_MUTED_TAB: 'Lives in Muted tab', + HOME: 'Home', + NOTIF_COUNT_ONLY: 'Home (notif count only)', + MUTED: 'Muted', SIDEBAR_TITLE: 'Thread notifications', CHANNEL_TITLE: 'Channel notifications', IS_SIDEBAR: - 'It’s not possible to move this thread to Background. ' + + 'It’s not possible to move this thread to Muted. ' + 'That’s because Comm’s design always shows threads ' + 'underneath their parent in the Inbox, which means ' + - 'that if a thread’s parent is in Focused, the thread ' + + 'that if a thread’s parent is in Home, the thread ' + 'must also be there.', IS_SIDEBAR_CAN_PROMOTE: - 'If you want to move this thread to Background, ' + - 'you can either move the parent to Background, ' + + 'If you want to move this thread to Muted, ' + + 'you can either move the parent to Muted, ' + 'or you can promote the thread to a channel.', IS_SIDEBAR_CAN_NOT_PROMOTE: - 'If you want to move this thread to Background, ' + - 'you’ll have to move the parent to Background.', - PARENT_THREAD_IS_BACKGROUND: + 'If you want to move this thread to Muted, ' + + 'you’ll have to move the parent to Muted.', + PARENT_THREAD_IS_MUTED: 'It’s not possible to change the notif settings for a thread ' + - 'whose parent is in Background. That’s because Comm’s design ' + + 'whose parent is in Muted. That’s because Comm’s design ' + 'always shows threads underneath their parent in the Inbox, ' + - 'which means that if a thread’s parent is in Background, the ' + + 'which means that if a thread’s parent is in Muted, the ' + 'thread must also be there.', - PARENT_THREAD_IS_BACKGROUND_CAN_PROMOTE: + PARENT_THREAD_IS_MUTED_CAN_PROMOTE: 'If you want to change the notif settings for this thread, ' + 'you can either change the notif settings for the parent, ' + 'or you can promote the thread to a channel.', - PARENT_THREAD_IS_BACKGROUND_CAN_NOT_PROMOTE: + PARENT_THREAD_IS_MUTED_CAN_NOT_PROMOTE: 'If you want to change the notif settings for this thread, ' + 'you’ll have to change the notif settings for the parent.', }; const updateSubscriptionLoadingStatusSelector = createLoadingStatusSelector( updateSubscriptionActionTypes, ); function useThreadSettingsNotifications( threadInfo: ThreadInfo, onSuccessCallback: () => mixed, ): { +notificationSettings: NotificationSettings, - +onFocusedSelected: () => mixed, - +onBadgeOnlySelected: () => mixed, - +onBackgroundSelected: () => mixed, + +onHomeSelected: () => mixed, + +onNotifCountOnlySelected: () => mixed, + +onMutedSelected: () => mixed, +saveButtonDisabled: boolean, +onSave: () => mixed, +isSidebar: boolean, +canPromoteSidebar: boolean, - +parentThreadIsInBackground: boolean, + +parentThreadIsMuted: boolean, } { const subscription = threadInfo.currentUser.subscription; const initialThreadSetting = React.useMemo(() => { if (!subscription.home) { - return 'background'; + return 'muted'; } if (!subscription.pushNotifs) { - return 'badge-only'; + return 'notif-count-only'; } - return 'focused'; + return 'home'; }, [subscription.home, subscription.pushNotifs]); const [notificationSettings, setNotificationSettings] = React.useState(initialThreadSetting); - const onFocusedSelected = React.useCallback( - () => setNotificationSettings('focused'), + const onHomeSelected = React.useCallback( + () => setNotificationSettings('home'), [], ); - const onBadgeOnlySelected = React.useCallback( - () => setNotificationSettings('badge-only'), + const onNotifCountOnlySelected = React.useCallback( + () => setNotificationSettings('notif-count-only'), [], ); - const onBackgroundSelected = React.useCallback( - () => setNotificationSettings('background'), + const onMutedSelected = React.useCallback( + () => setNotificationSettings('muted'), [], ); const dispatchActionPromise = useDispatchActionPromise(); const callUpdateSubscription = useUpdateSubscription(); const updateSubscriptionPromise = React.useCallback(async () => { const res = await callUpdateSubscription({ threadID: threadInfo.id, updatedFields: { - home: notificationSettings !== 'background', - pushNotifs: notificationSettings === 'focused', + home: notificationSettings !== 'muted', + pushNotifs: notificationSettings === 'home', }, }); onSuccessCallback(); return res; }, [ callUpdateSubscription, notificationSettings, onSuccessCallback, threadInfo.id, ]); const updateSubscriptionLoadingStatus = useSelector( updateSubscriptionLoadingStatusSelector, ); const isLoading = updateSubscriptionLoadingStatus === 'loading'; const saveButtonDisabled = isLoading || notificationSettings === initialThreadSetting; const onSave = React.useCallback(() => { if (saveButtonDisabled) { return; } void dispatchActionPromise( updateSubscriptionActionTypes, updateSubscriptionPromise(), ); }, [saveButtonDisabled, dispatchActionPromise, updateSubscriptionPromise]); const isSidebar = threadIsSidebar(threadInfo); const { parentThreadID } = threadInfo; const parentThreadInfo = useSelector(state => parentThreadID ? threadInfoSelector(state)[parentThreadID] : null, ); const canPromoteSidebar = useCanPromoteSidebar(threadInfo, parentThreadInfo); - const parentThreadIsInBackground = + const parentThreadIsMuted = isSidebar && !parentThreadInfo?.currentUser.subscription.home; return { notificationSettings, - onFocusedSelected, - onBadgeOnlySelected, - onBackgroundSelected, + onHomeSelected, + onNotifCountOnlySelected, + onMutedSelected, saveButtonDisabled, onSave, isSidebar, canPromoteSidebar, - parentThreadIsInBackground, + parentThreadIsMuted, }; } export { threadSettingsNotificationsCopy, useThreadSettingsNotifications }; diff --git a/native/chat/settings/thread-settings-notifications.react.js b/native/chat/settings/thread-settings-notifications.react.js index ff2013848..588f5f2e4 100644 --- a/native/chat/settings/thread-settings-notifications.react.js +++ b/native/chat/settings/thread-settings-notifications.react.js @@ -1,388 +1,384 @@ // @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, +notifCountEnabled: boolean, - +livesInFocusedTab: boolean, + +livesInHomeTab: boolean, }; function NotificationDescription( props: NotificationDescriptionProps, ): React.Node { - const { - selected, - bannerNotifsEnabled, - notifCountEnabled, - livesInFocusedTab, - } = props; + const { selected, bannerNotifsEnabled, notifCountEnabled, livesInHomeTab } = + 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 notifCountDescriptionTextStyles = React.useMemo(() => { const style = [styles.notificationOptionDescriptionText]; if (selected && !notifCountEnabled) { style.push(styles.notificationOptionDescriptionTextDisabledSelected); } else if (!notifCountEnabled) { style.push(styles.notificationOptionDescriptionTextDisabled); } return style; }, [ notifCountEnabled, selected, styles.notificationOptionDescriptionText, styles.notificationOptionDescriptionTextDisabled, styles.notificationOptionDescriptionTextDisabledSelected, ]); let bannerNotifsIconColor = colors.panelForegroundSecondaryLabel; if (selected && !bannerNotifsEnabled) { bannerNotifsIconColor = colors.panelInputSecondaryForeground; } else if (!bannerNotifsEnabled) { bannerNotifsIconColor = colors.panelSecondaryForeground; } let notifCountIconColor = colors.panelForegroundSecondaryLabel; if (selected && !notifCountEnabled) { notifCountIconColor = colors.panelInputSecondaryForeground; } else if (!notifCountEnabled) { notifCountIconColor = colors.panelSecondaryForeground; } return ( <> {threadSettingsNotificationsCopy.BANNER_NOTIFS} {threadSettingsNotificationsCopy.NOTIF_COUNT} - {livesInFocusedTab - ? threadSettingsNotificationsCopy.IN_FOCUSED_TAB - : threadSettingsNotificationsCopy.IN_BACKGROUND_TAB} + {livesInHomeTab + ? threadSettingsNotificationsCopy.IN_HOME_TAB + : threadSettingsNotificationsCopy.IN_MUTED_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, + onHomeSelected, + onNotifCountOnlySelected, + onMutedSelected, saveButtonDisabled, onSave, isSidebar, canPromoteSidebar, - parentThreadIsInBackground, + parentThreadIsMuted, } = useThreadSettingsNotifications(threadInfo, goBack); React.useEffect(() => { setOptions({ headerRight: () => - parentThreadIsInBackground ? null : ( + parentThreadIsMuted ? null : ( ), }); - }, [saveButtonDisabled, onSave, setOptions, parentThreadIsInBackground]); + }, [saveButtonDisabled, onSave, setOptions, parentThreadIsMuted]); const styles = useStyles(unboundStyles); const allNotificationsIllustration = React.useMemo( () => ( ), [styles.notificationOptionIconContainer], ); - const badgeOnlyIllustration = React.useMemo( + const notifCountOnlyIllustration = React.useMemo( () => ( ), [styles.notificationOptionIconContainer], ); const mutedIllustration = React.useMemo( () => ( ), [styles.notificationOptionIconContainer], ); const allNotificationsDescription = React.useMemo( () => ( ), [notificationSettings], ); - const badgeOnlyDescription = React.useMemo( + const notifCountOnlyDescription = 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, ]); const threadSettingsNotifications = React.useMemo(() => { - if (parentThreadIsInBackground) { + if (parentThreadIsMuted) { return ( - - - {threadSettingsNotificationsCopy.PARENT_THREAD_IS_BACKGROUND} + + + {threadSettingsNotificationsCopy.PARENT_THREAD_IS_MUTED} - + {canPromoteSidebar - ? threadSettingsNotificationsCopy.PARENT_THREAD_IS_BACKGROUND_CAN_PROMOTE - : threadSettingsNotificationsCopy.PARENT_THREAD_IS_BACKGROUND_CAN_NOT_PROMOTE} + ? threadSettingsNotificationsCopy.PARENT_THREAD_IS_MUTED_CAN_PROMOTE + : threadSettingsNotificationsCopy.PARENT_THREAD_IS_MUTED_CAN_NOT_PROMOTE} ); } return ( {noticeText} ); }, [ + parentThreadIsMuted, + styles.container, + styles.enumSettingsOptionContainer, + styles.parentThreadIsMutedNoticeContainerStyle, + styles.parentThreadIsMutedNoticeText, + notificationSettings, + onHomeSelected, allNotificationsDescription, allNotificationsIllustration, - badgeOnlyDescription, - badgeOnlyIllustration, - canPromoteSidebar, - isSidebar, + onNotifCountOnlySelected, + notifCountOnlyDescription, + notifCountOnlyIllustration, + onMutedSelected, mutedDescription, mutedIllustration, + isSidebar, noticeText, - notificationSettings, - onBackgroundSelected, - onBadgeOnlySelected, - onFocusedSelected, - parentThreadIsInBackground, - styles.container, - styles.enumSettingsOptionContainer, - styles.parentThreadIsInBackgroundNoticeContainerStyle, - styles.parentThreadIsInBackgroundNoticeText, + canPromoteSidebar, ]); return threadSettingsNotifications; } 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, }, - parentThreadIsInBackgroundNoticeContainerStyle: { + parentThreadIsMutedNoticeContainerStyle: { backgroundColor: 'panelForeground', paddingHorizontal: 16, paddingVertical: 8, }, - parentThreadIsInBackgroundNoticeText: { + parentThreadIsMutedNoticeText: { color: 'panelForegroundSecondaryLabel', fontSize: 16, lineHeight: 20, textAlign: 'left', marginVertical: 8, }, }; export default ThreadSettingsNotifications; diff --git a/native/chat/settings/thread-settings-push-notifs.react.js b/native/chat/settings/thread-settings-push-notifs.react.js index 148c54270..34439fec7 100644 --- a/native/chat/settings/thread-settings-push-notifs.react.js +++ b/native/chat/settings/thread-settings-push-notifs.react.js @@ -1,160 +1,160 @@ // @flow import * as React from 'react'; import { Platform, TouchableOpacity, View } from 'react-native'; import Linking from 'react-native/Libraries/Linking/Linking.js'; import { extractKeyserverIDFromID } from 'lib/keyserver-conn/keyserver-call-utils.js'; import { deviceTokenSelector } from 'lib/selectors/keyserver-selectors.js'; import { threadSettingsNotificationsCopy } from 'lib/shared/thread-settings-notifications-utils.js'; import type { ThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js'; import type { ThreadSettingsNavigate } from './thread-settings.react.js'; import EditSettingButton from '../../components/edit-setting-button.react.js'; import SingleLine from '../../components/single-line.react.js'; import SWMansionIcon from '../../components/swmansion-icon.react.js'; import { ThreadSettingsNotificationsRouteName } from '../../navigation/route-names.js'; import { CommAndroidNotifications } from '../../push/android.js'; import { useSelector } from '../../redux/redux-utils.js'; import { useStyles } from '../../themes/colors.js'; import Alert from '../../utils/alert.js'; const unboundStyles = { label: { color: 'panelForegroundTertiaryLabel', fontSize: 16, flex: 1, }, row: { alignItems: 'center', backgroundColor: 'panelForeground', flexDirection: 'row', paddingHorizontal: 24, paddingVertical: 3, }, }; type BaseProps = { +threadInfo: ThreadInfo, +navigate: ThreadSettingsNavigate, }; type Props = { ...BaseProps, // Redux state +styles: $ReadOnly, +hasPushPermissions: boolean, }; class ThreadSettingsPushNotifs extends React.PureComponent { render(): React.Node { - let componentLabel = threadSettingsNotificationsCopy.FOCUSED; + let componentLabel = threadSettingsNotificationsCopy.HOME; if (!this.props.threadInfo.currentUser.subscription.home) { - componentLabel = threadSettingsNotificationsCopy.BACKGROUND; + componentLabel = threadSettingsNotificationsCopy.MUTED; } else if (!this.props.threadInfo.currentUser.subscription.pushNotifs) { - componentLabel = threadSettingsNotificationsCopy.BADGE_ONLY; + componentLabel = threadSettingsNotificationsCopy.NOTIF_COUNT_ONLY; } let editSettingsButton, notifSettingsLinkingButton; if (this.props.hasPushPermissions) { editSettingsButton = ( ); } else { notifSettingsLinkingButton = ( ); } return ( {componentLabel} {editSettingsButton} {notifSettingsLinkingButton} ); } onNotificationsSettingsLinkingIconPress = async () => { let platformRequestsPermission; if (Platform.OS !== 'android') { platformRequestsPermission = true; } else { platformRequestsPermission = await CommAndroidNotifications.canRequestNotificationsPermissionFromUser(); } const alertTitle = platformRequestsPermission ? 'Need notif permissions' : 'Unable to initialize notifs'; const notificationsSettingsPath = Platform.OS === 'ios' ? 'Settings App → Notifications → Comm' : 'Settings → Apps → Comm → Notifications'; let alertMessage; if ( platformRequestsPermission && this.props.threadInfo.currentUser.subscription.pushNotifs ) { alertMessage = 'Notifs for this chat are enabled, but cannot be delivered ' + 'to this device because you haven’t granted notif permissions to Comm. ' + 'Please enable them in ' + notificationsSettingsPath; } else if (platformRequestsPermission) { alertMessage = 'In order to enable push notifs for this chat, ' + 'you need to first grant notif permissions to Comm. ' + 'Please enable them in ' + notificationsSettingsPath; } else { alertMessage = 'Please check your network connection, make sure Google Play ' + 'services are installed and enabled, and confirm that your Google ' + 'Play credentials are valid in the Google Play Store.'; } Alert.alert(alertTitle, alertMessage, [ { text: 'Go to settings', onPress: () => Linking.openSettings(), }, { text: 'Cancel', style: 'cancel', }, ]); }; onPressEditThreadNotificationSettings = () => { this.props.navigate(ThreadSettingsNotificationsRouteName, { threadInfo: this.props.threadInfo, }); }; } const ConnectedThreadSettingsPushNotifs: React.ComponentType = React.memo(function ConnectedThreadSettingsPushNotifs( props: BaseProps, ) { const keyserverID = extractKeyserverIDFromID(props.threadInfo.id); const deviceToken = useSelector(deviceTokenSelector(keyserverID)); const hasPushPermissions = deviceToken !== null && deviceToken !== undefined; const styles = useStyles(unboundStyles); return ( ); }); export default ConnectedThreadSettingsPushNotifs; diff --git a/web/modals/threads/notifications/notifications-modal.react.js b/web/modals/threads/notifications/notifications-modal.react.js index 60956a110..44cfd20ff 100644 --- a/web/modals/threads/notifications/notifications-modal.react.js +++ b/web/modals/threads/notifications/notifications-modal.react.js @@ -1,219 +1,219 @@ // @flow import * as React from 'react'; import { threadInfoSelector } from 'lib/selectors/thread-selectors.js'; import { threadSettingsNotificationsCopy, useThreadSettingsNotifications, } from 'lib/shared/thread-settings-notifications-utils.js'; import css from './notifications-modal.css'; import AllNotifsIllustration from '../../../assets/all-notifs.react.js'; import BadgeNotifsIllustration from '../../../assets/badge-notifs.react.js'; import MutedNotifsIllustration from '../../../assets/muted-notifs.react.js'; import Button from '../../../components/button.react.js'; import EnumSettingsOption from '../../../components/enum-settings-option.react.js'; import { useSelector } from '../../../redux/redux-utils.js'; import Modal from '../../modal.react.js'; -const focusedStatements = [ +const homeStatements = [ { statement: threadSettingsNotificationsCopy.BANNER_NOTIFS, isStatementValid: true, styleStatementBasedOnValidity: true, }, { statement: threadSettingsNotificationsCopy.NOTIF_COUNT, isStatementValid: true, styleStatementBasedOnValidity: true, }, { - statement: threadSettingsNotificationsCopy.IN_FOCUSED_TAB, + statement: threadSettingsNotificationsCopy.IN_HOME_TAB, isStatementValid: true, styleStatementBasedOnValidity: true, }, ]; -const badgeOnlyStatements = [ +const notifCountOnlyStatements = [ { statement: threadSettingsNotificationsCopy.BANNER_NOTIFS, isStatementValid: false, styleStatementBasedOnValidity: true, }, { statement: threadSettingsNotificationsCopy.NOTIF_COUNT, isStatementValid: true, styleStatementBasedOnValidity: true, }, { - statement: threadSettingsNotificationsCopy.IN_FOCUSED_TAB, + statement: threadSettingsNotificationsCopy.IN_HOME_TAB, isStatementValid: true, styleStatementBasedOnValidity: true, }, ]; -const backgroundStatements = [ +const mutedStatements = [ { statement: threadSettingsNotificationsCopy.BANNER_NOTIFS, isStatementValid: false, styleStatementBasedOnValidity: true, }, { statement: threadSettingsNotificationsCopy.NOTIF_COUNT, isStatementValid: false, styleStatementBasedOnValidity: true, }, { - statement: threadSettingsNotificationsCopy.IN_BACKGROUND_TAB, + statement: threadSettingsNotificationsCopy.IN_MUTED_TAB, isStatementValid: true, styleStatementBasedOnValidity: true, }, ]; type Props = { +threadID: string, +onClose: () => void, }; function NotificationsModal(props: Props): React.Node { const { onClose, threadID } = props; const threadInfo = useSelector(state => threadInfoSelector(state)[threadID]); const { notificationSettings, - onFocusedSelected, - onBadgeOnlySelected, - onBackgroundSelected, + onHomeSelected, + onNotifCountOnlySelected, + onMutedSelected, saveButtonDisabled, onSave, isSidebar, canPromoteSidebar, - parentThreadIsInBackground, + parentThreadIsMuted, } = useThreadSettingsNotifications(threadInfo, onClose); - const isFocusedSelected = notificationSettings === 'focused'; - const focusedItem = React.useMemo(() => { + const isHomeSelected = notificationSettings === 'home'; + const homeItem = React.useMemo(() => { const icon = ; return ( ); - }, [isFocusedSelected, onFocusedSelected]); + }, [isHomeSelected, onHomeSelected]); - const isFocusedBadgeOnlySelected = notificationSettings === 'badge-only'; - const focusedBadgeOnlyItem = React.useMemo(() => { + const isNotifyCountOnlySelected = notificationSettings === 'notif-count-only'; + const notifCountOnlyItem = React.useMemo(() => { const icon = ; return ( ); - }, [isFocusedBadgeOnlySelected, onBadgeOnlySelected]); + }, [isNotifyCountOnlySelected, onNotifCountOnlySelected]); - const isBackgroundSelected = notificationSettings === 'background'; + const isMutedSelected = notificationSettings === 'muted'; const backgroundItem = React.useMemo(() => { const icon = ; return ( ); - }, [isBackgroundSelected, onBackgroundSelected, isSidebar]); + }, [isMutedSelected, onMutedSelected, isSidebar]); const modalName = isSidebar ? threadSettingsNotificationsCopy.SIDEBAR_TITLE : threadSettingsNotificationsCopy.CHANNEL_TITLE; const noticeText = React.useMemo(() => { if (!isSidebar) { return null; } return ( <>

{threadSettingsNotificationsCopy.IS_SIDEBAR}

{canPromoteSidebar ? threadSettingsNotificationsCopy.IS_SIDEBAR_CAN_PROMOTE : threadSettingsNotificationsCopy.IS_SIDEBAR_CAN_NOT_PROMOTE}

); }, [isSidebar, canPromoteSidebar]); const modalContent = React.useMemo(() => { - if (parentThreadIsInBackground) { + if (parentThreadIsMuted) { return ( <>

- {threadSettingsNotificationsCopy.PARENT_THREAD_IS_BACKGROUND} + {threadSettingsNotificationsCopy.PARENT_THREAD_IS_MUTED}

{canPromoteSidebar - ? threadSettingsNotificationsCopy.PARENT_THREAD_IS_BACKGROUND_CAN_PROMOTE - : threadSettingsNotificationsCopy.PARENT_THREAD_IS_BACKGROUND_CAN_NOT_PROMOTE} + ? threadSettingsNotificationsCopy.PARENT_THREAD_IS_MUTED_CAN_PROMOTE + : threadSettingsNotificationsCopy.PARENT_THREAD_IS_MUTED_CAN_NOT_PROMOTE}

); } return ( <>
- {focusedItem} - {focusedBadgeOnlyItem} + {homeItem} + {notifCountOnlyItem} {backgroundItem}
{noticeText} ); }, [ + parentThreadIsMuted, + homeItem, + notifCountOnlyItem, backgroundItem, - focusedBadgeOnlyItem, - focusedItem, noticeText, - parentThreadIsInBackground, canPromoteSidebar, ]); const saveButton = React.useMemo(() => { - if (parentThreadIsInBackground) { + if (parentThreadIsMuted) { return undefined; } return ( ); - }, [saveButtonDisabled, onSave, parentThreadIsInBackground]); + }, [parentThreadIsMuted, onSave, saveButtonDisabled]); return (
{modalContent}
); } export default NotificationsModal;