MM-39711 Gekidou Settings - Notification Main Screen (#6285)

* added chevron to menu item component

* starting with the skeleton

* starting with the skeleton

* starting with the skeleton

* starting with the skeleton

* remove extra line

* tested on tablets

* some corrections

* corrections as per review

* starting with notification skeleton

* attached notification settings to navigation

* added auto responder

* update translation

* update snapshot

* updated snapshot

* correction after review

* removed unnecessary screen

* refactored

* updated the testIDs

* Update Package.resolved

* refactor

* removed Mattermost as default server name

* fix ts

* refactored settings constant

* correction after review

Co-authored-by: Mattermod <mattermod@users.noreply.github.com>

app/constants/screens.ts

@@ -40,6 +40,7 @@ export const SEARCH = 'Search';
 export const SELECT_TEAM = 'SelectTeam';
 export const SERVER = 'Server';
 export const SETTINGS = 'Settings';
+export const NOTIFICATION_SETTINGS = 'NotificationSettings';
 export const SNACK_BAR = 'SnackBar';
 export const SSO = 'SSO';
 export const THREAD = 'Thread';
@@ -79,6 +80,7 @@ export default {
     LOGIN,
     MENTIONS,
     MFA,
+    NOTIFICATION_SETTINGS,
     PERMALINK,
     POST_OPTIONS,
     REACTIONS,

app/screens/index.tsx

@@ -185,6 +185,9 @@ Navigation.setLazyComponentRegistrator((screenName) => {
         case Screens.SETTINGS:
             screen = withServerDatabase(require('@screens/settings').default);
             break;
+        case Screens.NOTIFICATION_SETTINGS:
+            screen = withServerDatabase(require('@screens/settings/notifications').default);
+            break;
     }
 
     if (screen) {

app/screens/settings/constant.ts

@@ -35,3 +35,27 @@ export const SettingOptionConfig = {
         showArrow: false,
     },
 };
+
+export const NotificationsOptionConfig = {
+    mentions: {
+        iconName: 'at',
+        testID: 'notification_settings.mentions_replies.action',
+    },
+    push_notification: {
+        defaultMessage: 'Push Notifications',
+        i18nId: t('mobile.notification_settings.mobile'),
+        iconName: 'cellphone',
+        testID: 'notification_settings.push_notification',
+    },
+    automatic_dm_replies: {
+        defaultMessage: 'Automatic Direct Message Replies',
+        i18nId: t('mobile.notification_settings.ooo_auto_responder'),
+        iconName: 'reply-outline',
+        testID: 'notification_settings.automatic_dm_replies',
+    },
+};
+
+export default {
+    ...SettingOptionConfig,
+    ...NotificationsOptionConfig,
+};

app/screens/settings/index.tsx

@@ -6,7 +6,7 @@ import withObservables from '@nozbe/with-observables';
 import {of as of$} from 'rxjs';
 import {switchMap} from 'rxjs/operators';
 
-import {observeConfig} from '@queries/servers/system';
+import {observeConfigValue} from '@queries/servers/system';
 import {isValidUrl} from '@utils/url';
 
 import Settings from './settings';
@@ -14,9 +14,8 @@ import Settings from './settings';
 import type {WithDatabaseArgs} from '@typings/database/database';
 
 const enhanced = withObservables([], ({database}: WithDatabaseArgs) => {
-    const config = observeConfig(database);
-    const siteName = config.pipe(switchMap((c) => of$(c?.SiteName)));
-    const showHelp = observeConfig(database).pipe(switchMap((c) => of$(c?.HelpLink ? isValidUrl(c.HelpLink) : false)));
+    const siteName = observeConfigValue(database, 'SiteName');
+    const showHelp = observeConfigValue(database, 'HelpLink').pipe(switchMap((link) => of$(link ? isValidUrl(link) : false)));
 
     return {
         showHelp,

app/screens/settings/notifications/index.tsx

@@ -0,0 +1,22 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {withDatabase} from '@nozbe/watermelondb/DatabaseProvider';
+import withObservables from '@nozbe/with-observables';
+
+import {observeConfigBooleanValue} from '@queries/servers/system';
+import {observeIsCRTEnabled} from '@queries/servers/thread';
+import {WithDatabaseArgs} from '@typings/database/database';
+
+import NotificationSettings from './notifications';
+
+const enhanced = withObservables([], ({database}: WithDatabaseArgs) => {
+    const isCRTEnabled = observeIsCRTEnabled(database);
+    const enableAutoResponder = observeConfigBooleanValue(database, 'ExperimentalEnableAutomaticReplies');
+    return {
+        isCRTEnabled,
+        enableAutoResponder,
+    };
+});
+
+export default withDatabase(enhanced(NotificationSettings));

app/screens/settings/notifications/notifications.tsx

@@ -0,0 +1,91 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+import {Alert, Platform, ScrollView, View} from 'react-native';
+import {Edge, SafeAreaView} from 'react-native-safe-area-context';
+
+import {changeOpacity, makeStyleSheetFromTheme} from '@app/utils/theme';
+import {useTheme} from '@context/theme';
+import {t} from '@i18n';
+import SettingOption from '@screens/settings/setting_option';
+
+const getStyleSheet = makeStyleSheetFromTheme((theme) => {
+    return {
+        container: {
+            flex: 1,
+            backgroundColor: theme.centerChannelBg,
+        },
+        wrapper: {
+            backgroundColor: changeOpacity(theme.centerChannelColor, 0.06),
+            ...Platform.select({
+                ios: {
+                    flex: 1,
+                    paddingTop: 35,
+                },
+            }),
+        },
+        divider: {
+            backgroundColor: changeOpacity(theme.centerChannelColor, 0.1),
+            height: 1,
+            width: '100%',
+        },
+    };
+});
+const edges: Edge[] = ['left', 'right'];
+
+type NotificationsProps = {
+    isCRTEnabled: boolean;
+    enableAutoResponder: boolean;
+}
+const Notifications = ({isCRTEnabled, enableAutoResponder}: NotificationsProps) => {
+    const theme = useTheme();
+    const styles = getStyleSheet(theme);
+
+    let mentionsI18nId = t('mobile.notification_settings.mentions_replies');
+    let mentionsI18nDefault = 'Mentions and Replies';
+    if (isCRTEnabled) {
+        mentionsI18nId = t('mobile.notification_settings.mentions');
+        mentionsI18nDefault = 'Mentions';
+    }
+
+    const onPressHandler = () => {
+        return Alert.alert(
+            'The functionality you are trying to use has not yet been implemented.',
+        );
+    };
+
+    return (
+        <SafeAreaView
+            edges={edges}
+            testID='notification_settings.screen'
+            style={styles.container}
+        >
+            <ScrollView
+                contentContainerStyle={styles.wrapper}
+                alwaysBounceVertical={false}
+            >
+                <View style={styles.divider}/>
+                <SettingOption
+                    defaultMessage={mentionsI18nDefault}
+                    i18nId={mentionsI18nId}
+                    onPress={onPressHandler}
+                    optionName='mentions'
+                />
+                <SettingOption
+                    optionName='push_notification'
+                    onPress={onPressHandler}
+                />
+                {enableAutoResponder && (
+                    <SettingOption
+                        onPress={onPressHandler}
+                        optionName='automatic_dm_replies'
+                    />
+                )}
+                <View style={styles.divider}/>
+            </ScrollView>
+        </SafeAreaView>
+    );
+};
+
+export default Notifications;

app/screens/settings/setting_option.tsx

@@ -9,10 +9,11 @@ import {useTheme} from '@context/theme';
 import {makeStyleSheetFromTheme} from '@utils/theme';
 import {typography} from '@utils/typography';
 
-import {SettingOptionConfig} from './constant';
+import Options, {NotificationsOptionConfig, SettingOptionConfig} from './constant';
 
-type Props = {
-    type: 'notification' | 'display' | 'advanced_settings' | 'about' | 'help';
+type SettingsConfig = keyof typeof SettingOptionConfig | keyof typeof NotificationsOptionConfig
+type SettingOptionProps = {
+    optionName: SettingsConfig;
     onPress: () => void;
 } & Omit<MenuItemProps, 'testID'| 'theme'>;
 
@@ -25,11 +26,10 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
     };
 });
 
-const SettingOption = ({type, onPress, ...rest}: Props) => {
+const SettingOption = ({onPress, optionName, ...rest}: SettingOptionProps) => {
     const theme = useTheme();
     const styles = getStyleSheet(theme);
-    const optionConfig = SettingOptionConfig[type];
-    const options = {...optionConfig, ...rest};
+    const props = {...rest, ...Options[optionName]} as unknown as Omit<MenuItemProps, 'onPress'| 'theme'>;
 
     return (
         <MenuItem
@@ -38,7 +38,7 @@ const SettingOption = ({type, onPress, ...rest}: Props) => {
             separator={true}
             showArrow={Platform.select({ios: true, default: false})}
             theme={theme}
-            {...options}
+            {...props}
         />
     );
 };

app/screens/settings/settings.tsx

@@ -121,6 +121,13 @@ const Settings = ({componentId, showHelp, siteName}: SettingsProps) => {
         );
     };
 
+    const goToNotifications = preventDoubleTap(() => {
+        const screen = 'NotificationSettings';
+        const title = intl.formatMessage({id: 'user.settings.modal.notifications', defaultMessage: 'Notifications'});
+
+        goToScreen(screen, title);
+    });
+
     const goToAbout = preventDoubleTap(() => {
         const screen = Screens.ABOUT;
         const title = intl.formatMessage({id: 'about.title', defaultMessage: 'About {appTitle}'}, {appTitle: serverName});
@@ -148,19 +155,19 @@ const Settings = ({componentId, showHelp, siteName}: SettingsProps) => {
                     style={styles.group}
                 >
                     <SettingOption
-                        type='notification'
+                        optionName='notification'
+                        onPress={goToNotifications}
+                    />
+                    <SettingOption
+                        optionName='display'
                         onPress={onPressHandler}
                     />
                     <SettingOption
-                        type='display'
+                        optionName='advanced_settings'
                         onPress={onPressHandler}
                     />
                     <SettingOption
-                        type='advanced_settings'
-                        onPress={onPressHandler}
-                    />
-                    <SettingOption
-                        type='about'
+                        optionName='about'
                         onPress={goToAbout}
                         messageValues={{appTitle: serverName}}
                         separator={Platform.OS === 'ios'}
@@ -172,7 +179,7 @@ const Settings = ({componentId, showHelp, siteName}: SettingsProps) => {
                 >
                     {showHelp &&
                     <SettingOption
-                        type='help'
+                        optionName='help'
                         onPress={onPressHandler}
                         isLink={true}
                         containerStyle={styles.innerContainerStyle}

assets/base/i18n/en.json

@@ -385,6 +385,10 @@
   "mobile.notice_mobile_link": "mobile apps",
   "mobile.notice_platform_link": "server",
   "mobile.notice_text": "Mattermost is made possible by the open source software used in our {platform} and {mobile}.",
+  "mobile.notification_settings.mentions": "Mentions",
+  "mobile.notification_settings.mentions_replies": "Mentions and Replies",
+  "mobile.notification_settings.mobile": "Push Notifications",
+  "mobile.notification_settings.ooo_auto_responder": "Automatic Direct Message Replies",
   "mobile.oauth.failed_to_login": "Your login attempt failed. Please try again.",
   "mobile.oauth.failed_to_open_link": "The link failed to open. Please try again.",
   "mobile.oauth.failed_to_open_link_no_browser": "The link failed to open. Please verify that a browser is installed on the device.",