feat: Update the enable-notifications flows and notification settings UI (#22524)

This change integrates the Firebase news notifications into the onboarding flow. This change also introduces some changes to the notifications settings screen to match the recent designs and behaviors. Note, that these changes are currently still behind a feature-flag.

Author: seanstrom

ios/GoogleService-Info.plist

@@ -2,8 +2,12 @@
 <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
 <plist version="1.0">
 <dict>
+	<key>CLIENT_ID</key>
+	<string>854811651919-30s20e3l0me0ins0vc4185jbnj7ja49o.apps.googleusercontent.com</string>
+	<key>REVERSED_CLIENT_ID</key>
+	<string>com.googleusercontent.apps.854811651919-30s20e3l0me0ins0vc4185jbnj7ja49o</string>
 	<key>API_KEY</key>
-	<string>AIzaSyAm5D6giymR_2llh-8SbCRL3oPxX_v3EZs</string>
+	<string>AIzaSyB_ZCi76uSX1RBqGiLIllUnJ8D6_cKrRGQ</string>
 	<key>GCM_SENDER_ID</key>
 	<string>854811651919</string>
 	<key>PLIST_VERSION</key>

shadow-cljs.edn

@@ -168,7 +168,24 @@
                        :fn-invoke-direct   true
                        :optimizations      :advanced
                        :js-options         {:js-provider :closure}
-                       :reader-features    #{:mobile}}}}
+                       :reader-features    #{:mobile
+                                             ;; NOTE(@seanstrom): Here we are allowing for an
+                                             ;; environment variable to configure the intended store
+                                             ;; where a user could download the app. For example, we
+                                             ;; support the FDroid and Google Play stores, so we can
+                                             ;; configure the app to build for FDroid by setting the
+                                             ;; `ANDROID_STORE` environment variable to `fdroid`.
+                                             ;;
+                                             ;; This value is used for configuring Shadow-CLJS to
+                                             ;; only require namespaces that will be compatible with
+                                             ;; some restrictions imposed by the Android stores. For
+                                             ;; example, FDroid does not allow for Google Play
+                                             ;; services like Firebase, so we use the
+                                             ;; reader-conditional of `:fdroid` or `:google` to
+                                             ;; clearly avoid importing Firebase dependencies in the
+                                             ;; FDroid builds.
+                                             #shadow/env ["ANDROID_STORE" :as :keyword :default
+                                                          :google]}}}}
   ;; the tests are ran with node, react-native dependencies are mocked
   ;; by using node --require override.js, which uses the node-library
   ;; produced by the target :mocks below and redefines node require

src/legacy/status_im/events.cljs

@@ -107,6 +107,7 @@
   (let [new-account?            (get db :onboarding/new-account?)
         app-in-background-since (get db :app-in-background-since)
         signed-up?              (get-in db [:profile/profile :signed-up?])
+        notifications-settings? (= (:view-id db) :screen/settings.notifications)
         requires-bio-auth       (and
                                  signed-up?
                                  (= (:auth-method db) "biometric")
@@ -121,7 +122,9 @@
               #(when-let [chat-id (:current-chat-id db)]
                  {:dispatch [:chat/mark-all-as-read chat-id]})
               #(when requires-bio-auth
-                 {:dispatch [:biometric/authenticate {:on-fail on-biometric-auth-fail}]}))))
+                 {:dispatch [:biometric/authenticate {:on-fail on-biometric-auth-fail}]})
+              #(when notifications-settings?
+                 {:dispatch [:notifications/check-notifications-blocked]}))))
 
 (rf/defn on-going-in-background
   [{:keys [db now]}]

src/react_native/permissions.cljs

@@ -1,7 +1,7 @@
 (ns react-native.permissions
   (:require
     ["react-native-permissions" :refer
-     [check checkNotifications PERMISSIONS requestMultiple
+     [check checkNotifications openSettings PERMISSIONS requestMultiple
       requestNotifications RESULTS]]
     [clojure.string :as string]
     [promesa.core :as promesa]
@@ -95,3 +95,7 @@
   []
   (-> (checkNotifications)
       (promesa/then notification-permissions->notification-permission-statuses)))
+
+(defn open-notification-settings
+  []
+  (openSettings "notifications"))

src/status_im/common/kv_storage/effects.cljs

@@ -0,0 +1,19 @@
+(ns status-im.common.kv-storage.effects
+  (:require
+    [react-native.mmkv :as mmkv]
+    [utils.re-frame :as rf]))
+
+(rf/reg-fx :effects.kv/set-object
+ (fn [{:keys [id value]}]
+   (mmkv/set-object id value)))
+
+(rf/reg-fx :effects.kv/merge-object
+ (fn [{key-id :key
+       :keys  [value]}]
+   (let [kv-object (mmkv/get-object key-id {})]
+     (mmkv/set-object key-id
+                      (merge kv-object value)))))
+
+(rf/reg-fx :effects.kv/delete-key
+ (fn [key-id]
+   (mmkv/delete-key key-id)))

src/status_im/contexts/onboarding/enable_biometrics/view.cljs

@@ -22,25 +22,28 @@
   [insets]
   (let [supported-biometric-type (rf/sub [:biometrics/supported-type])
         bio-type-label           (biometric/get-label-by-type supported-biometric-type)
-        profile-color            (or (:color (rf/sub [:onboarding/profile]))
+        onboarding-profile       (rf/sub [:onboarding/profile])
+        profile-color            (or (:color onboarding-profile)
                                      (rf/sub [:profile/customization-color]))
-        syncing?                 (= (rf/sub [:view-id]) :screen/onboarding.syncing-biometric)
+        syncing?                 (:syncing? onboarding-profile)
         biometric-type           (rf/sub [:biometrics/supported-type])]
     [rn/view {:style (style/buttons insets)}
      [quo/button
       {:size                40
        :accessibility-label :enable-biometrics-button
        :icon-left           (biometric/get-icon-by-type biometric-type)
        :customization-color profile-color
-       :on-press            #(rf/dispatch [:onboarding/enable-biometrics])}
+       :on-press            #(rf/dispatch [:onboarding/biometrics-setup-start
+                                           {:enable-biometrics? true
+                                            :syncing?           syncing?}])}
       (i18n/label :t/biometric-enable-button {:bio-type-label bio-type-label})]
      [quo/button
       {:accessibility-label :maybe-later-button
        :background          :blur
        :type                :grey
-       :on-press            #(rf/dispatch (if syncing?
-                                            [:onboarding/finish-onboarding false]
-                                            [:onboarding/create-account-and-login]))
+       :on-press            #(rf/dispatch [:onboarding/biometrics-setup-start
+                                           {:enable-biometrics? false
+                                            :syncing?           syncing?}])
        :container-style     {:margin-top 12}}
       (i18n/label :t/maybe-later)]]))
 

src/status_im/contexts/onboarding/enable_notifications/style.cljs

@@ -24,3 +24,13 @@
   [insets]
   {:margin        default-margin
    :margin-bottom (+ 14 (:bottom insets))})
+
+(def news-notifications-checkbox-container
+  {:flex-direction     :row
+   :gap                8
+   :padding-top        8
+   :padding-bottom     12
+   :padding-horizontal 20})
+
+(def news-notifications-checkbox-text
+  {:flex 1})

src/status_im/contexts/onboarding/enable_notifications/view.cljs

@@ -1,10 +1,14 @@
 (ns status-im.contexts.onboarding.enable-notifications.view
   (:require
+    [quo.context]
     [quo.core :as quo]
     [react-native.core :as rn]
+    [react-native.platform :as platform]
     [react-native.safe-area :as safe-area]
     [status-im.common.resources :as resources]
+    [status-im.contexts.onboarding.common.background.view :as background]
     [status-im.contexts.onboarding.enable-notifications.style :as style]
+    [status-im.feature-flags :as ff]
     [utils.i18n :as i18n]
     [utils.re-frame :as rf]))
 
@@ -17,51 +21,111 @@
     :description                     (i18n/label :t/enable-notifications-sub-title)
     :description-accessibility-label :notifications-sub-title}])
 
-(defn enable-notification-buttons
-  [{:keys [insets]}]
-  (let [profile-color   (rf/sub [:onboarding/customization-color])
-        ask-permission  (fn []
-                          (rf/dispatch
-                           [:request-notifications
-                            {:on-allowed (fn []
-                                           (js/setTimeout
-                                            #(rf/dispatch [:onboarding/finish-onboarding true])
-                                            300))
-                             :on-denied  (fn []
-                                           (js/setTimeout
-                                            #(rf/dispatch [:onboarding/finish-onboarding false])
-                                            300))}]))
-        skip-permission #(rf/dispatch [:onboarding/finish-onboarding false])]
-    [rn/view {:style (style/buttons insets)}
-     [quo/button
-      {:on-press            ask-permission
-       :type                :primary
-       :icon-left           :i/notifications
-       :accessibility-label :enable-notifications-button
-       :customization-color profile-color}
-      (i18n/label :t/intro-wizard-title6)]
-     [quo/button
-      {:on-press            skip-permission
-       :accessibility-label :enable-notifications-later-button
-       :type                :grey
-       :background          :blur
-       :container-style     {:margin-top 12}}
-      (i18n/label :t/maybe-later)]]))
+(defn on-notifications-setup-start
+  [params]
+  (rf/dispatch [:onboarding/notifications-setup-start params]))
 
-(defn enable-notifications-simple
+(defn notifications-info-view
+  [{:keys [blur?]}]
+  [quo/documentation-drawers
+   {:title        (i18n/label :t/enable-notifications)
+    :show-button? true
+    :shell?       blur?
+    :button-label (i18n/label :t/read-more)
+    :button-icon  :i/info}
+   [quo/text (i18n/label :t/enable-notifications-info-description)]])
+
+(defn on-open-info
+  [{:keys [blur? theme]
+    :or   {blur? true}}]
+  (rf/dispatch [:show-bottom-sheet
+                {:content (fn []
+                            [notifications-info-view {:blur? blur?}])
+                 :theme   theme
+                 :shell?  blur?}]))
+
+(defn enable-notification-form
+  [{:keys [insets params]}]
+  (let [profile-color             (rf/sub [:onboarding/customization-color
+                                           {:onboarding? (:onboarding? params)}])
+        [third-party-checked?
+         set-third-party-checked] (rn/use-state
+                                   (boolean? (ff/enabled? ::ff/settings.news-notifications)))
+        on-enable-notifications   (rn/use-callback
+                                   (fn []
+                                     (on-notifications-setup-start
+                                      (assoc params
+                                             :enable-notifications?      true
+                                             :enable-news-notifications? third-party-checked?)))
+                                   [params third-party-checked?])
+        on-skip-notifications     (rn/use-callback
+                                   (fn []
+                                     (on-notifications-setup-start
+                                      (assoc params
+                                             :enable-notifications?      false
+                                             :enable-news-notifications? false)))
+                                   [params])]
+    [rn/view
+     (when (and platform/android?
+                (ff/enabled? ::ff/settings.news-notifications))
+       [rn/view
+        {:style style/news-notifications-checkbox-container}
+        [quo/selectors
+         {:type                :checkbox
+          :blur?               true
+          :customization-color profile-color
+          :checked?            third-party-checked?
+          :on-change           set-third-party-checked}]
+        [quo/text
+         {:size  :paragraph-2
+          :style style/news-notifications-checkbox-text}
+         (i18n/label :t/enable-news-notifications-third-party)]])
+     [rn/view {:style (style/buttons insets)}
+      [quo/button
+       {:on-press            on-enable-notifications
+        :type                :primary
+        :icon-left           :i/notifications
+        :accessibility-label :enable-notifications-button
+        :customization-color profile-color}
+       (i18n/label :t/intro-wizard-title6)]
+      [quo/button
+       {:on-press            on-skip-notifications
+        :accessibility-label :enable-notifications-later-button
+        :type                :grey
+        :background          :blur
+        :container-style     {:margin-top 12}}
+       (i18n/label :t/maybe-later)]]]))
+
+(defn enable-notifications-illustration
   []
   (let [width (:width (rn/get-window))]
     [rn/image
      {:resize-mode :contain
       :style       (style/page-illustration width)
       :source      (resources/get-image :notifications)}]))
 
+(defn background-image
+  []
+  [rn/view {:style rn/stylesheet-absolute-fill}
+   [background/view true]])
+
 (defn view
   []
-  (let [insets safe-area/insets]
-    [rn/view {:style (style/page-container insets)}
-     [rn/view {:style style/page-heading}
-      [quo/page-nav {:type :no-title :background :blur}]
-      [page-title]]
-     [enable-notifications-simple]
-     [enable-notification-buttons {:insets insets}]]))
+  (let [insets safe-area/insets
+        params (quo.context/use-screen-params)]
+    [:<>
+     (when-not (:onboarding? params)
+       [background-image])
+     [rn/view {:style (style/page-container insets)}
+      [rn/view {:style style/page-heading}
+       [quo/page-nav
+        {:type       :no-title
+         :background :blur
+         :right-side [{:icon-name           :i/info
+                       :on-press            on-open-info
+                       :accessibility-label :notifications-info-button}]}]
+       [page-title]]
+      [enable-notifications-illustration]
+      [enable-notification-form
+       {:insets insets
+        :params params}]]]))