diff --git a/native/chat/settings/thread-settings-notifications.react.js b/native/chat/settings/thread-settings-notifications.react.js
--- a/native/chat/settings/thread-settings-notifications.react.js
+++ b/native/chat/settings/thread-settings-notifications.react.js
@@ -1,11 +1,21 @@
// @flow
import * as React from 'react';
+import { View } 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 HeaderRightTextButton from '../../navigation/header-right-text-button.react.js';
import type { NavigationRoute } from '../../navigation/route-names.js';
+import { useStyles } 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 = {
@@ -19,21 +29,107 @@
function ThreadSettingsNotifications(props: Props): React.Node {
const {
- navigation: { setOptions },
+ navigation: { setOptions, goBack },
+ route: {
+ params: { threadInfo },
+ },
} = props;
- const onPressSave = React.useCallback(() => {
- // TODO: implement this
- }, []);
+
+ const {
+ notificationSettings,
+ onFocusedSelected,
+ onBadgeOnlySelected,
+ onBackgroundSelected,
+ saveButtonDisabled,
+ onSave,
+ } = useThreadSettingsNotifications(threadInfo, goBack);
React.useEffect(() => {
setOptions({
headerRight: () => (
-
+
),
});
- }, [onPressSave, setOptions]);
+ }, [saveButtonDisabled, onSave, setOptions]);
+
+ const styles = useStyles(unboundStyles);
+
+ const allNotificationsIllustration = React.useMemo(
+ () => (
+
+
+
+ ),
+ [styles.notificationOptionIconContainer],
+ );
- return null;
+ const badgeOnlyIllustration = React.useMemo(
+ () => (
+
+
+
+ ),
+ [styles.notificationOptionIconContainer],
+ );
+
+ const mutedIllustration = React.useMemo(
+ () => (
+
+
+
+ ),
+ [styles.notificationOptionIconContainer],
+ );
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ );
}
+const unboundStyles = {
+ container: {
+ backgroundColor: 'panelForeground',
+ },
+ enumSettingsOptionContainer: {
+ padding: 8,
+ },
+ notificationOptionIconContainer: {
+ justifyContent: 'center',
+ marginLeft: 8,
+ marginRight: 16,
+ },
+};
+
export default ThreadSettingsNotifications;