wip: adjust notification settings screen with nested ui

Author: seanstrom

src/status_im/contexts/profile/settings/screens/notifications/view.cljs

@@ -1,6 +1,7 @@
 (ns status-im.contexts.profile.settings.screens.notifications.view
   (:require
     [quo.core :as quo]
+    [quo.foundations.colors :as colors]
     [react-native.core :as rn]
     [react-native.platform :as platform]
     [status-im.common.events-helper :as events-helper]
@@ -51,13 +52,15 @@
         on-change (rn/use-callback
                    #(toggle-non-contact-notifications non-contact-notifications-enabled?)
                    [non-contact-notifications-enabled?])]
-    {:blur?        true
-     :title        (i18n/label :t/notifications-non-contacts)
-     :action       :selector
-     :action-props {:on-change (when-not disabled? on-change)
-                    :disabled? disabled?
-                    :checked?  (and (not disabled?)
-                                    non-contact-notifications-enabled?)}}))
+    {:blur?             true
+     :title             (i18n/label :t/notifications-non-contacts)
+     :description       :text
+     :description-props {:text (i18n/label :t/notifications-non-contacts-description)}
+     :action            :selector
+     :action-props      {:on-change (when-not disabled? on-change)
+                         :disabled? disabled?
+                         :checked?  (and (not disabled?)
+                                         non-contact-notifications-enabled?)}}))
 
 (defn chat-community-mentions-notifications-setting
   [{:keys [notifications-enabled?
@@ -68,39 +71,87 @@
         on-change (rn/use-callback
                    #(toggle-community-mentions-notifications community-mentions-notifications-enabled?)
                    [community-mentions-notifications-enabled?])]
-    {:blur?        true
-     :title        (i18n/label :t/allow-mention-notifications)
-     :action       :selector
-     :action-props {:on-change (when-not disabled? on-change)
-                    :disabled? disabled?
-                    :checked?  (and (not disabled?)
-                                    community-mentions-notifications-enabled?)}}))
+    {:blur?             true
+     :title             (i18n/label :t/communities)
+     :description       :text
+     :description-props {:text (i18n/label :t/allow-community-mentions-notifications-description)}
+     :action            :selector
+     :action-props      {:on-change (when-not disabled? on-change)
+                         :disabled? disabled?
+                         :checked?  (and (not disabled?)
+                                         community-mentions-notifications-enabled?)}}))
 
 (defn messenger-notifications-setting
   [{:keys [notifications-enabled? messenger-notifications-enabled?]}]
   (let [disabled? (not notifications-enabled?)
         on-change (rn/use-callback
                    #(toggle-messenger-notifications messenger-notifications-enabled?)
                    [messenger-notifications-enabled?])]
-    {:blur?        true
-     :title        (i18n/label :t/allow-messenger-notifications)
-     :action       :selector
-     :action-props {:on-change (when-not disabled? on-change)
-                    :disabled? disabled?
-                    :checked?  messenger-notifications-enabled?}}))
+    (cond-> {:blur?        true
+             :title        (i18n/label :t/allow-messenger-notifications)
+             :action       :selector
+             :action-props {:on-change (when-not disabled? on-change)
+                            :disabled? disabled?
+                            :checked?  messenger-notifications-enabled?}}
+      platform/android?
+      (assoc :title             (i18n/label :t/allow-messages-and-communities-notifications)
+             :description       :text
+             :description-props {:text (i18n/label
+                                        :t/allow-messages-and-communities-notifications-description)}))))
 
 (defn news-notifications-setting
   [{:keys [notifications-enabled? news-notifications-enabled?]}]
   (let [disabled? (not notifications-enabled?)
         on-change (rn/use-callback
                    #(toggle-news-notifications news-notifications-enabled?)
                    [news-notifications-enabled?])]
-    {:blur?        true
-     :title        (i18n/label :t/allow-news-notifications)
-     :action       :selector
-     :action-props {:on-change (when-not disabled? on-change)
-                    :disabled? disabled?
-                    :checked?  news-notifications-enabled?}}))
+    (cond-> {:blur?        true
+             :title        (i18n/label :t/allow-news-notifications)
+             :action       :selector
+             :action-props {:on-change (when-not disabled? on-change)
+                            :disabled? disabled?
+                            :checked?  news-notifications-enabled?}}
+      platform/android?
+      (assoc :description       :text
+             :description-props {:text (i18n/label :t/allow-news-notifications-description)}))))
+
+(defn- nested-setting
+  [item & _rest]
+  [quo/category
+   {:blur?           true
+    :list-type       :settings
+    :container-style {:padding-horizontal 8
+                      :padding-top        0
+                      :paddong-bottom     0}
+    :data            [item]}])
+
+(defn- messenger-notifications-settings
+  [notifications-settings]
+  (let [{:keys [action-props title]} (messenger-notifications-setting notifications-settings)]
+    [rn/pressable
+     {:on-press (:on-change action-props)
+      :style    {:margin-horizontal 20
+                 :margin-vertical   8
+                 :border-width      1
+                 :border-radius     20
+                 :border-color      colors/white-opa-5}}
+     [rn/view
+      {:style {:flex-direction   :row
+               :padding-left     16
+               :padding-right    12
+               :padding-vertical 13
+               :gap              12}}
+      [quo/text {:style {:flex 1}} title]
+      [quo/selectors
+       {:type      :toggle
+        :checked?  (:checked? action-props)
+        :on-change (:on-change action-props)}]]
+     [rn/view {}
+      [rn/flat-list
+       {:data      [(chat-non-contacts-notifications-setting notifications-settings)
+                    (chat-community-mentions-notifications-setting notifications-settings)]
+        :render-fn nested-setting
+        :separator [rn/view {:style {:height 0}}]}]]]))
 
 (defn view
   []
@@ -136,12 +187,8 @@
        [:<>
         (cond
           platform/ios?
-          [quo/category
-           {:blur?     true
-            :list-type :settings
-            :data      [(messenger-notifications-setting notifications-settings)
-                        (chat-non-contacts-notifications-setting notifications-settings)
-                        (chat-community-mentions-notifications-setting notifications-settings)]}]
+          [messenger-notifications-settings notifications-settings]
+
           platform/android?
           [quo/category
            {:blur?     true

translations/en.json

@@ -132,10 +132,14 @@
   "all-time": "All time",
   "allow": "Allow",
   "allow-and-send": "Allow and send",
+  "allow-community-mentions-notifications-description": "Mentions and replies",
   "allow-mention-notifications": "Show @ mentions",
+  "allow-messages-and-communities-notifications": "Messages and communities",
+  "allow-messages-and-communities-notifications-description": "1-1 and group messages, replies and mentions in communities. Possible high battery usage.",
   "allow-messenger-notifications": "Show messenger notifications",
   "allow-new-contact-requests": "Allow new contact requests",
-  "allow-news-notifications": "Show news notifications",
+  "allow-news-notifications": "News from Status",
+  "allow-news-notifications-description": "Uses Google services, and works even when the app is closed.",
   "allowing-authorizes-this-dapp": "Allowing authorizes this DApp to retrieve your wallet address and enable Web3",
   "alphabetically": "Alphabetically",
   "already-have-asset": "You already have this asset",
@@ -1895,7 +1899,8 @@
   "notification-settings": "Notification settings",
   "notifications": "Notifications",
   "notifications-marked-as-read": "{{count}} notifications marked as read",
-  "notifications-non-contacts": "Notifications from non-contacts",
+  "notifications-non-contacts": "From non-contacts",
+  "notifications-non-contacts-description": "Contact requests and group messages",
   "notifications-preferences": "Notification preferences",
   "notifications-servers": "Notification servers",
   "notifications-switch": "Show notifications",