NotificationsScreen: Offer link to system notification settings for Zulip

Author: chrisbobbe

ios/ZulipMobile/ZLPConstants.swift

@@ -15,6 +15,21 @@ class ZLPConstants: NSObject {
 
   @objc
   func constantsToExport() -> [String: Any]! {
-    return ["resourceURL": Bundle.main.resourceURL!.absoluteString]
+    var result: [String: Any] = [:]
+    result["resourceURL"] = Bundle.main.resourceURL!.absoluteString
+    result["UIApplication.openSettingsURLString"] = UIApplication.openSettingsURLString
+    if #available(iOS 16.0, *) {
+      // New name for the notification-settings URL
+      // https://developer.apple.com/documentation/uikit/uiapplication/4013180-opennotificationsettingsurlstrin/
+      // TODO(ios-16.0): Remove conditional and fallback for 15.4+.
+      result["UIApplication.openNotificationSettingsURLString"] = UIApplication.openNotificationSettingsURLString
+    }
+    if #available(iOS 15.4, *) {
+      // Old name for the notification-settings URL
+      // https://developer.apple.com/documentation/uikit/uiapplicationopennotificationsettingsurlstring
+      // TODO(ios-15.4): Remove conditional.
+      result["UIApplicationOpenNotificationSettingsURLString"] = UIApplicationOpenNotificationSettingsURLString
+    }
+    return result
   }
 }

package.json

@@ -60,6 +60,7 @@
     "react-native-document-picker": "^3.2.4",
     "react-native-gesture-handler": "^2.8.0",
     "react-native-image-picker": "4.10.2",
+    "react-native-open-notification": "^0.1.4",
     "react-native-photo-view": "alwx/react-native-photo-view#91b873c85",
     "react-native-reanimated": "^2.2.0 <2.3.0",
     "react-native-safe-area-context": "^4.3.1",

src/settings/NotificationsScreen.js

@@ -2,6 +2,8 @@
 
 import React, { useCallback } from 'react';
 import type { Node } from 'react';
+import { Platform, Linking, NativeModules } from 'react-native';
+import OpenNotification from 'react-native-open-notification';
 
 import type { RouteProp } from '../react-navigation';
 import type { AppNavigationProp } from '../nav/AppNavigator';
@@ -11,19 +13,50 @@ import SwitchRow from '../common/SwitchRow';
 import Screen from '../common/Screen';
 import * as api from '../api';
 import ServerPushSetupBanner from '../common/ServerPushSetupBanner';
+import NestedNavRow from '../common/NestedNavRow';
+
+const { ZLPConstants } = NativeModules;
 
 type Props = $ReadOnly<{|
   navigation: AppNavigationProp<'notifications'>,
   route: RouteProp<'notifications', void>,
 |}>;
 
+function openSystemNotificationSettings() {
+  if (Platform.OS === 'ios') {
+    Linking.openURL(
+      // Link directly to notification settings when iOS supports it
+      // (15.4+). Otherwise, link to the regular settings, and the user
+      // should get to notification settings with one tap from there.
+      ZLPConstants['UIApplication.openNotificationSettingsURLString'] // New name, iOS 16.0+
+        // TODO(ios-16.0): Remove use of old name
+        ?? ZLPConstants.UIApplicationOpenNotificationSettingsURLString // Old name, iOS 15.4+
+        // TODO(ios-15.4): Remove fallback.
+        ?? ZLPConstants['UIApplication.openSettingsURLString'],
+    );
+  } else {
+    // On iOS, react-native-open-notification doesn't support opening all
+    // the way to *notification* settings. It does support that on
+    // Android, so we use it here. The library is oddly named for one that
+    // opens notification settings; perhaps one day we'll replace it with
+    // our own code. But Greg points out that the implementation is small
+    // and reasonable:
+    //   https://github.com/zulip/zulip-mobile/pull/5627#discussion_r1058039648
+    OpenNotification.open();
+  }
+}
+
 /** (NB this is a per-account screen -- these are per-account settings.) */
 export default function NotificationsScreen(props: Props): Node {
   const auth = useSelector(getAuth);
   const offlineNotification = useSelector(state => getSettings(state).offlineNotification);
   const onlineNotification = useSelector(state => getSettings(state).onlineNotification);
   const streamNotification = useSelector(state => getSettings(state).streamNotification);
 
+  const handleSystemSettingsPress = useCallback(() => {
+    openSystemNotificationSettings();
+  }, []);
+
   // TODO(#3999): It'd be good to show "working on it" UI feedback while a
   //   request is pending, after the user touches a switch.
 
@@ -54,6 +87,7 @@ export default function NotificationsScreen(props: Props): Node {
   return (
     <Screen title="Notifications">
       <ServerPushSetupBanner isDismissable={false} />
+      <NestedNavRow label="System settings for Zulip" onPress={handleSystemSettingsPress} />
       <SwitchRow
         label="Notifications when offline"
         value={offlineNotification}

static/translations/messages_en.json

@@ -223,6 +223,7 @@
   "Forgot password?": "Forgot password?",
   "Recipients": "Recipients",
   "Delete message": "Delete message",
+  "System settings for Zulip": "System settings for Zulip",
   "Notifications when online": "Notifications when online",
   "Notifications when offline": "Notifications when offline",
   "Stream notifications": "Stream notifications",

tools/tsflower

@@ -147,6 +147,10 @@ run_only()
     # TODO get list of packages from data... better yet, make it
     #   one tsflower command, reading a TsFlower config file
 
+    package=react-native-open-notification
+    run_on_package "${package}"
+    format_dir "${rootdir}"/types/"${package}"
+
     package=expo-application
     run_on_package "${package}"
     format_dir "${rootdir}"/types/"${package}"

types/patches/0044-tsflower-r-n-open-notification-Translate-a-ModuleDec.patch

@@ -0,0 +1,32 @@
+From 0000000000000000000000000000000000000000 Mon Sep 17 00:00:00 2001
+From: Chris Bobbe <[email protected]>
+Date: Thu, 22 Dec 2022 12:03:43 -0500
+Subject: [tsflower] r-n-open-notification: Translate a ModuleDeclaration
+
+---
+ types/react-native-open-notification/index.js.flow | 12 +++++-------
+ 1 file changed, 5 insertions(+), 7 deletions(-)
+
+diff --git types/react-native-open-notification/index.js.flow types/react-native-open-notification/index.js.flow
+index 209d470f6..7782c030c 100644
+--- types/react-native-open-notification/index.js.flow
++++ types/react-native-open-notification/index.js.flow
+@@ -1,10 +1,8 @@
+ /* @flow
+  * @generated by TsFlower
+  */
+-/* tsflower-unimplemented: ModuleDeclaration */
+-/* declare module 'react-native-open-notification' {
+-  class NotificationSetting {
+-    static open: () => void;
+-  }
+-  export default NotificationSetting;
+-} */
++
++class NotificationSetting {
++  static open: () => void;
++}
++export default NotificationSetting;
+-- 
+2.32.0
+

types/react-native-open-notification/index.js.flow

@@ -0,0 +1,8 @@
+/* @flow
+ * @generated by TsFlower
+ */
+
+class NotificationSetting {
+  static open: () => void;
+}
+export default NotificationSetting;

yarn.lock

@@ -10232,6 +10232,11 @@ react-native-iphone-x-helper@^1.3.0:
   resolved "https://registry.yarnpkg.com/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.3.1.tgz#20c603e9a0e765fd6f97396638bdeb0e5a60b010"
   integrity sha512-HOf0jzRnq2/aFUcdCJ9w9JGzN3gdEg0zFE4FyYlp4jtidqU03D5X7ZegGKfT1EWteR0gPBGp9ye5T5FvSWi9Yg==
 
+react-native-open-notification@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/react-native-open-notification/-/react-native-open-notification-0.1.4.tgz#20b7c03a1543ce36f3f99ff9924c67eef2688aa9"
+  integrity sha512-TPeFRsao6nDFW5nvBseD6nheRCN1U3poaY90iDzBY1MEEVepClqfEC9Iw0cqj7LYnpDSF8V25fb/SpjEg3HdQQ==
+
 react-native-photo-view@alwx/react-native-photo-view#91b873c85:
   version "1.5.3"
   resolved "https://codeload.github.com/alwx/react-native-photo-view/tar.gz/91b873c85c5c48af41b93cf6bf34e0a40502f754"