diff --git a/lib/shared/thread-settings-notifications-utils.js b/lib/shared/thread-settings-notifications-utils.js --- a/lib/shared/thread-settings-notifications-utils.js +++ b/lib/shared/thread-settings-notifications-utils.js @@ -2,17 +2,58 @@ 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'; +const threadSettingsNotificationsCopy = { + BANNER_NOTIFS: 'Banner notifs', + BADGE_COUNT: 'Badge 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', + SIDEBAR_TITLE: 'Thread notifications', + CHANNEL_TITLE: 'Channel notifications', + IS_SIDEBAR: + 'It’s not possible to move this thread to Background. ' + + '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 ' + + '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, ' + + '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: + 'It’s not possible to change the notif settings for a thread ' + + 'whose parent is in Background. 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 ' + + 'thread must also be there.', + PARENT_THREAD_IS_BACKGROUND_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: + '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, ); @@ -27,6 +68,9 @@ +onBackgroundSelected: () => mixed, +saveButtonDisabled: boolean, +onSave: () => mixed, + +isSidebar: boolean, + +canPromoteSidebar: boolean, + +parentThreadIsInBackground: boolean, } { const subscription = threadInfo.currentUser.subscription; @@ -97,6 +141,18 @@ ); }, [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 = + isSidebar && !parentThreadInfo?.currentUser.subscription.home; + return { notificationSettings, onFocusedSelected, @@ -104,7 +160,10 @@ onBackgroundSelected, saveButtonDisabled, onSave, + isSidebar, + canPromoteSidebar, + parentThreadIsInBackground, }; } -export { useThreadSettingsNotifications }; +export { threadSettingsNotificationsCopy, useThreadSettingsNotifications }; diff --git a/native/chat/chat.react.js b/native/chat/chat.react.js --- a/native/chat/chat.react.js +++ b/native/chat/chat.react.js @@ -29,6 +29,7 @@ import MessageStorePruner from 'lib/components/message-store-pruner.react.js'; import ThreadDraftUpdater from 'lib/components/thread-draft-updater.react.js'; import { isLoggedIn } from 'lib/selectors/user-selectors.js'; +import { threadSettingsNotificationsCopy } from 'lib/shared/thread-settings-notifications-utils.js'; import { threadIsPending, threadIsSidebar } from 'lib/shared/thread-utils.js'; import BackgroundChatThreadList from './background-chat-thread-list.react.js'; @@ -333,8 +334,8 @@ ... }) => ({ headerTitle: threadIsSidebar(route.params.threadInfo) - ? 'Thread notifications' - : 'Channel notifications', + ? threadSettingsNotificationsCopy.SIDEBAR_TITLE + : threadSettingsNotificationsCopy.CHANNEL_TITLE, headerBackTitleVisible: false, }); const changeRolesScreenOptions = ({ diff --git a/web/modals/threads/notifications/notifications-modal.css b/web/modals/threads/notifications/notifications-modal.css --- a/web/modals/threads/notifications/notifications-modal.css +++ b/web/modals/threads/notifications/notifications-modal.css @@ -12,6 +12,11 @@ color: var(--text-background-secondary-default); } +p.parentThreadIsInBackgroundNotice { + font-size: var(--m-font-16); + color: var(--text-background-secondary-default); +} + div.optionsContainer { display: flex; flex-direction: column; diff --git a/web/modals/threads/notifications/notifications-modal.react.js b/web/modals/threads/notifications/notifications-modal.react.js --- a/web/modals/threads/notifications/notifications-modal.react.js +++ b/web/modals/threads/notifications/notifications-modal.react.js @@ -2,10 +2,11 @@ import * as React from 'react'; -import { useCanPromoteSidebar } from 'lib/hooks/promote-sidebar.react.js'; import { threadInfoSelector } from 'lib/selectors/thread-selectors.js'; -import { useThreadSettingsNotifications } from 'lib/shared/thread-settings-notifications-utils.js'; -import { threadIsSidebar } from 'lib/shared/thread-utils.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'; @@ -16,24 +17,19 @@ import { useSelector } from '../../../redux/redux-utils.js'; import Modal from '../../modal.react.js'; -const BANNER_NOTIFS = 'Banner notifs'; -const BADGE_COUNT = 'Badge count'; -const IN_FOCUSED_TAB = 'Lives in Focused tab'; -const IN_BACKGROUND_TAB = 'Lives in Background tab'; - const focusedStatements = [ { - statement: BANNER_NOTIFS, + statement: threadSettingsNotificationsCopy.BANNER_NOTIFS, isStatementValid: true, styleStatementBasedOnValidity: true, }, { - statement: BADGE_COUNT, + statement: threadSettingsNotificationsCopy.BADGE_COUNT, isStatementValid: true, styleStatementBasedOnValidity: true, }, { - statement: IN_FOCUSED_TAB, + statement: threadSettingsNotificationsCopy.IN_FOCUSED_TAB, isStatementValid: true, styleStatementBasedOnValidity: true, }, @@ -41,17 +37,17 @@ const badgeOnlyStatements = [ { - statement: BANNER_NOTIFS, + statement: threadSettingsNotificationsCopy.BANNER_NOTIFS, isStatementValid: false, styleStatementBasedOnValidity: true, }, { - statement: BADGE_COUNT, + statement: threadSettingsNotificationsCopy.BADGE_COUNT, isStatementValid: true, styleStatementBasedOnValidity: true, }, { - statement: IN_FOCUSED_TAB, + statement: threadSettingsNotificationsCopy.IN_FOCUSED_TAB, isStatementValid: true, styleStatementBasedOnValidity: true, }, @@ -59,17 +55,17 @@ const backgroundStatements = [ { - statement: BANNER_NOTIFS, + statement: threadSettingsNotificationsCopy.BANNER_NOTIFS, isStatementValid: false, styleStatementBasedOnValidity: true, }, { - statement: BADGE_COUNT, + statement: threadSettingsNotificationsCopy.BADGE_COUNT, isStatementValid: false, styleStatementBasedOnValidity: true, }, { - statement: IN_BACKGROUND_TAB, + statement: threadSettingsNotificationsCopy.IN_BACKGROUND_TAB, isStatementValid: true, styleStatementBasedOnValidity: true, }, @@ -82,11 +78,6 @@ function NotificationsModal(props: Props): React.Node { const { onClose, threadID } = props; const threadInfo = useSelector(state => threadInfoSelector(state)[threadID]); - const { parentThreadID } = threadInfo; - const parentThreadInfo = useSelector(state => - parentThreadID ? threadInfoSelector(state)[parentThreadID] : null, - ); - const isSidebar = threadIsSidebar(threadInfo); const { notificationSettings, @@ -95,6 +86,9 @@ onBackgroundSelected, saveButtonDisabled, onSave, + isSidebar, + canPromoteSidebar, + parentThreadIsInBackground, } = useThreadSettingsNotifications(threadInfo, onClose); const isFocusedSelected = notificationSettings === 'focused'; @@ -103,7 +97,7 @@ return ( { if (!isSidebar) { return null; @@ -153,45 +146,28 @@ return ( <>

- {'It’s not possible to move this thread to Background. ' + - '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 ' + - 'must also be there.'} + {threadSettingsNotificationsCopy.IS_SIDEBAR}

{canPromoteSidebar - ? 'If you want to move this thread to Background, ' + - 'you can either move the parent to Background, ' + - 'or you can promote the thread to a channel.' - : 'If you want to move this thread to Background, ' + - 'you’ll have to move the parent to Background.'} + ? threadSettingsNotificationsCopy.IS_SIDEBAR_CAN_PROMOTE + : threadSettingsNotificationsCopy.IS_SIDEBAR_CAN_NOT_PROMOTE}

); }, [isSidebar, canPromoteSidebar]); - const parentThreadIsInBackground = - isSidebar && !parentThreadInfo?.currentUser.subscription.home; - const modalContent = React.useMemo(() => { if (parentThreadIsInBackground) { return ( <> -

- {'It’s not possible to change the notif settings for a thread ' + - 'whose parent is in Background. 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 ' + - 'thread must also be there.'} +

+ {threadSettingsNotificationsCopy.PARENT_THREAD_IS_BACKGROUND}

-

+

{canPromoteSidebar - ? '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.' - : 'If you want to change the notif settings for this thread, ' + - 'you’ll have to change the notif settings for the parent.'} + ? threadSettingsNotificationsCopy.PARENT_THREAD_IS_BACKGROUND_CAN_PROMOTE + : threadSettingsNotificationsCopy.PARENT_THREAD_IS_BACKGROUND_CAN_NOT_PROMOTE}

);