No OneTemporary
Actions

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

Mime Type: text/x-diff
Expires: Wed, Dec 25, 7:18 PM (1 d, 8 h)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 2700877
Default Alt Text: (36 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions