feat: Update the enable-notifications flows and notification settings UI

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}]]]))