Page Menu
Home
Phabricator
Search
Configure Global Search
Log In
Files
F3526036
No One
Temporary
Actions
View File
Edit File
Delete File
View Transforms
Subscribe
Mute Notifications
Award Token
Flag For Later
Size
36 KB
Referenced Files
None
Subscribers
None
View Options
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<NotificationSettings>(() => {
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<NotificationSettings>(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 (
<>
<View style={styles.notificationOptionDescriptionListItem}>
<SWMansionIcon
name={bannerNotifsEnabled ? 'check' : 'cross'}
size={12}
color={bannerNotifsIconColor}
/>
<Text style={bannerNotifsDescriptionTextStyles}>
{threadSettingsNotificationsCopy.BANNER_NOTIFS}
</Text>
</View>
<View style={styles.notificationOptionDescriptionListItem}>
<SWMansionIcon
name={notifCountEnabled ? 'check' : 'cross'}
size={12}
color={notifCountIconColor}
/>
<Text style={notifCountDescriptionTextStyles}>
{threadSettingsNotificationsCopy.NOTIF_COUNT}
</Text>
</View>
<View style={styles.notificationOptionDescriptionListItem}>
<SWMansionIcon
name="check"
size={12}
color={colors.panelForegroundSecondaryLabel}
/>
<Text style={styles.notificationOptionDescriptionText}>
- {livesInFocusedTab
- ? threadSettingsNotificationsCopy.IN_FOCUSED_TAB
- : threadSettingsNotificationsCopy.IN_BACKGROUND_TAB}
+ {livesInHomeTab
+ ? threadSettingsNotificationsCopy.IN_HOME_TAB
+ : threadSettingsNotificationsCopy.IN_MUTED_TAB}
</Text>
</View>
</>
);
}
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 : (
<HeaderRightTextButton
label="Save"
onPress={onSave}
disabled={saveButtonDisabled}
/>
),
});
- }, [saveButtonDisabled, onSave, setOptions, parentThreadIsInBackground]);
+ }, [saveButtonDisabled, onSave, setOptions, parentThreadIsMuted]);
const styles = useStyles(unboundStyles);
const allNotificationsIllustration = React.useMemo(
() => (
<View style={styles.notificationOptionIconContainer}>
<AllNotifsIllustration />
</View>
),
[styles.notificationOptionIconContainer],
);
- const badgeOnlyIllustration = React.useMemo(
+ const notifCountOnlyIllustration = React.useMemo(
() => (
<View style={styles.notificationOptionIconContainer}>
<BadgeNotifsIllustration />
</View>
),
[styles.notificationOptionIconContainer],
);
const mutedIllustration = React.useMemo(
() => (
<View style={styles.notificationOptionIconContainer}>
<MutedNotifsIllustration />
</View>
),
[styles.notificationOptionIconContainer],
);
const allNotificationsDescription = React.useMemo(
() => (
<NotificationDescription
- selected={notificationSettings === 'focused'}
+ selected={notificationSettings === 'home'}
bannerNotifsEnabled={true}
notifCountEnabled={true}
- livesInFocusedTab={true}
+ livesInHomeTab={true}
/>
),
[notificationSettings],
);
- const badgeOnlyDescription = React.useMemo(
+ const notifCountOnlyDescription = React.useMemo(
() => (
<NotificationDescription
- selected={notificationSettings === 'badge-only'}
+ selected={notificationSettings === 'notif-count-only'}
bannerNotifsEnabled={false}
notifCountEnabled={true}
- livesInFocusedTab={true}
+ livesInHomeTab={true}
/>
),
[notificationSettings],
);
const mutedDescription = React.useMemo(
() => (
<NotificationDescription
- selected={notificationSettings === 'background'}
+ selected={notificationSettings === 'muted'}
bannerNotifsEnabled={false}
notifCountEnabled={false}
- livesInFocusedTab={false}
+ livesInHomeTab={false}
/>
),
[notificationSettings],
);
const noticeText = React.useMemo(() => {
if (!isSidebar) {
return null;
}
return (
<View style={styles.noticeTextContainer}>
<Text style={styles.noticeText}>
{threadSettingsNotificationsCopy.IS_SIDEBAR}
</Text>
<Text style={styles.noticeText}>
{canPromoteSidebar
? threadSettingsNotificationsCopy.IS_SIDEBAR_CAN_PROMOTE
: threadSettingsNotificationsCopy.IS_SIDEBAR_CAN_NOT_PROMOTE}
</Text>
</View>
);
}, [
canPromoteSidebar,
isSidebar,
styles.noticeText,
styles.noticeTextContainer,
]);
const threadSettingsNotifications = React.useMemo(() => {
- if (parentThreadIsInBackground) {
+ if (parentThreadIsMuted) {
return (
- <View style={styles.parentThreadIsInBackgroundNoticeContainerStyle}>
- <Text style={styles.parentThreadIsInBackgroundNoticeText}>
- {threadSettingsNotificationsCopy.PARENT_THREAD_IS_BACKGROUND}
+ <View style={styles.parentThreadIsMutedNoticeContainerStyle}>
+ <Text style={styles.parentThreadIsMutedNoticeText}>
+ {threadSettingsNotificationsCopy.PARENT_THREAD_IS_MUTED}
</Text>
- <Text style={styles.parentThreadIsInBackgroundNoticeText}>
+ <Text style={styles.parentThreadIsMutedNoticeText}>
{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}
</Text>
</View>
);
}
return (
<View style={styles.container}>
<View style={styles.enumSettingsOptionContainer}>
<EnumSettingsOption
- name={threadSettingsNotificationsCopy.FOCUSED}
- enumValue={notificationSettings === 'focused'}
- onEnumValuePress={onFocusedSelected}
+ name={threadSettingsNotificationsCopy.HOME}
+ enumValue={notificationSettings === 'home'}
+ onEnumValuePress={onHomeSelected}
description={allNotificationsDescription}
icon={allNotificationsIllustration}
/>
</View>
<View style={styles.enumSettingsOptionContainer}>
<EnumSettingsOption
- name={threadSettingsNotificationsCopy.BADGE_ONLY}
- enumValue={notificationSettings === 'badge-only'}
- onEnumValuePress={onBadgeOnlySelected}
- description={badgeOnlyDescription}
- icon={badgeOnlyIllustration}
+ name={threadSettingsNotificationsCopy.NOTIF_COUNT_ONLY}
+ enumValue={notificationSettings === 'notif-count-only'}
+ onEnumValuePress={onNotifCountOnlySelected}
+ description={notifCountOnlyDescription}
+ icon={notifCountOnlyIllustration}
/>
</View>
<View style={styles.enumSettingsOptionContainer}>
<EnumSettingsOption
- name={threadSettingsNotificationsCopy.BACKGROUND}
- enumValue={notificationSettings === 'background'}
- onEnumValuePress={onBackgroundSelected}
+ name={threadSettingsNotificationsCopy.MUTED}
+ enumValue={notificationSettings === 'muted'}
+ onEnumValuePress={onMutedSelected}
description={mutedDescription}
icon={mutedIllustration}
disabled={isSidebar}
/>
</View>
{noticeText}
</View>
);
}, [
+ 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<typeof unboundStyles>,
+hasPushPermissions: boolean,
};
class ThreadSettingsPushNotifs extends React.PureComponent<Props> {
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 = (
<EditSettingButton
onPress={this.onPressEditThreadNotificationSettings}
/>
);
} else {
notifSettingsLinkingButton = (
<TouchableOpacity
onPress={this.onNotificationsSettingsLinkingIconPress}
>
<SWMansionIcon name="info-circle" size={20} color="gray" />
</TouchableOpacity>
);
}
return (
<View style={this.props.styles.row}>
<SingleLine style={this.props.styles.label} adjustsFontSizeToFit={true}>
{componentLabel}
</SingleLine>
{editSettingsButton}
{notifSettingsLinkingButton}
</View>
);
}
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<BaseProps> =
React.memo<BaseProps>(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 (
<ThreadSettingsPushNotifs
{...props}
styles={styles}
hasPushPermissions={hasPushPermissions}
/>
);
});
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 = <AllNotifsIllustration />;
return (
<EnumSettingsOption
- selected={isFocusedSelected}
- title={threadSettingsNotificationsCopy.FOCUSED}
- statements={focusedStatements}
+ selected={isHomeSelected}
+ title={threadSettingsNotificationsCopy.HOME}
+ statements={homeStatements}
icon={icon}
- onSelect={onFocusedSelected}
+ onSelect={onHomeSelected}
/>
);
- }, [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 = <BadgeNotifsIllustration />;
return (
<EnumSettingsOption
- selected={isFocusedBadgeOnlySelected}
- title={threadSettingsNotificationsCopy.BADGE_ONLY}
- statements={badgeOnlyStatements}
+ selected={isNotifyCountOnlySelected}
+ title={threadSettingsNotificationsCopy.NOTIF_COUNT_ONLY}
+ statements={notifCountOnlyStatements}
icon={icon}
- onSelect={onBadgeOnlySelected}
+ onSelect={onNotifCountOnlySelected}
/>
);
- }, [isFocusedBadgeOnlySelected, onBadgeOnlySelected]);
+ }, [isNotifyCountOnlySelected, onNotifCountOnlySelected]);
- const isBackgroundSelected = notificationSettings === 'background';
+ const isMutedSelected = notificationSettings === 'muted';
const backgroundItem = React.useMemo(() => {
const icon = <MutedNotifsIllustration />;
return (
<EnumSettingsOption
- selected={isBackgroundSelected}
- title={threadSettingsNotificationsCopy.BACKGROUND}
- statements={backgroundStatements}
+ selected={isMutedSelected}
+ title={threadSettingsNotificationsCopy.MUTED}
+ statements={mutedStatements}
icon={icon}
disabled={isSidebar}
- onSelect={onBackgroundSelected}
+ onSelect={onMutedSelected}
/>
);
- }, [isBackgroundSelected, onBackgroundSelected, isSidebar]);
+ }, [isMutedSelected, onMutedSelected, isSidebar]);
const modalName = isSidebar
? threadSettingsNotificationsCopy.SIDEBAR_TITLE
: threadSettingsNotificationsCopy.CHANNEL_TITLE;
const noticeText = React.useMemo(() => {
if (!isSidebar) {
return null;
}
return (
<>
<p className={css.notice}>
{threadSettingsNotificationsCopy.IS_SIDEBAR}
</p>
<p className={css.notice}>
{canPromoteSidebar
? threadSettingsNotificationsCopy.IS_SIDEBAR_CAN_PROMOTE
: threadSettingsNotificationsCopy.IS_SIDEBAR_CAN_NOT_PROMOTE}
</p>
</>
);
}, [isSidebar, canPromoteSidebar]);
const modalContent = React.useMemo(() => {
- if (parentThreadIsInBackground) {
+ if (parentThreadIsMuted) {
return (
<>
<p className={css.parentThreadIsInBackgroundNotice}>
- {threadSettingsNotificationsCopy.PARENT_THREAD_IS_BACKGROUND}
+ {threadSettingsNotificationsCopy.PARENT_THREAD_IS_MUTED}
</p>
<p className={css.parentThreadIsInBackgroundNotice}>
{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}
</p>
</>
);
}
return (
<>
<div className={css.optionsContainer}>
- {focusedItem}
- {focusedBadgeOnlyItem}
+ {homeItem}
+ {notifCountOnlyItem}
{backgroundItem}
</div>
{noticeText}
</>
);
}, [
+ parentThreadIsMuted,
+ homeItem,
+ notifCountOnlyItem,
backgroundItem,
- focusedBadgeOnlyItem,
- focusedItem,
noticeText,
- parentThreadIsInBackground,
canPromoteSidebar,
]);
const saveButton = React.useMemo(() => {
- if (parentThreadIsInBackground) {
+ if (parentThreadIsMuted) {
return undefined;
}
return (
<Button variant="filled" onClick={onSave} disabled={saveButtonDisabled}>
Save
</Button>
);
- }, [saveButtonDisabled, onSave, parentThreadIsInBackground]);
+ }, [parentThreadIsMuted, onSave, saveButtonDisabled]);
return (
<Modal
name={modalName}
size="fit-content"
onClose={onClose}
primaryButton={saveButton}
>
<div className={css.container}>{modalContent}</div>
</Modal>
);
}
export default NotificationsModal;
File Metadata
Details
Attached
Mime Type
text/x-diff
Expires
Wed, Dec 25, 7:18 PM (19 h, 27 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2700877
Default Alt Text
(36 KB)
Attached To
Mode
rCOMM Comm
Attached
Detach File
Event Timeline
Log In to Comment