Onboarding notifications flow

* enable notifications onboarding

* added blurred background

* support navigate to previous screen

src/quo2/components/navigation/page_nav.cljs

@@ -30,16 +30,16 @@
            {:no-color true})))
 
 (defn left-section-view
-  [{:keys [on-press icon accessibility-label type icon-override-theme] :or {type :grey}}
+  [{:keys [on-press icon accessibility-label type icon-background-color] :or {type :grey}}
    put-middle-section-on-left?]
   [rn/view {:style (when put-middle-section-on-left? {:margin-right 5})}
    [button/button
-    {:on-press            on-press
-     :icon                true
-     :type                type
-     :size                32
-     :accessibility-label accessibility-label
-     :override-theme      icon-override-theme}
+    {:on-press                  on-press
+     :icon                      true
+     :type                      type
+     :size                      32
+     :accessibility-label       accessibility-label
+     :override-background-color icon-background-color}
     icon]])
 
 (defn- mid-section-comp
@@ -235,15 +235,18 @@
                :align-items    :center}}
       (when left-section
         [left-section-view left-section put-middle-section-on-left?])
-      (when put-middle-section-on-left?
-        [mid-section-view
-         (assoc mid-section-props
-                :left-align?           true
-                :description           (:description mid-section)
-                :description-color     (:description-color mid-section)
-                :description-icon      (:description-icon mid-section)
-                :align-mid?            align-mid?
-                :description-user-icon (:description-user-icon mid-section))])]
-     (when-not put-middle-section-on-left?
-       [mid-section-view mid-section-props])
+      (when mid-section
+        (cond
+          put-middle-section-on-left?
+          [mid-section-view
+           (assoc mid-section-props
+                  :left-align?           true
+                  :description           (:description mid-section)
+                  :description-color     (:description-color mid-section)
+                  :description-icon      (:description-icon mid-section)
+                  :align-mid?            align-mid?
+                  :description-user-icon (:description-user-icon mid-section))]
+
+          (not put-middle-section-on-left?)
+          [mid-section-view mid-section-props]))]
      [right-section-view right-section-buttons]]))

src/status_im/multiaccounts/login/core.cljs

@@ -523,7 +523,7 @@
     (rf/merge cofx
               {:db          (-> db
                                 (dissoc :multiaccounts/login)
-                                (assoc :tos/next-root :onboarding-notification :chats/loading? false)
+                                (assoc :tos/next-root :enable-notifications :chats/loading? false)
                                 (assoc-in [:multiaccount :multiaccounts/first-account] first-account?))
                ::get-tokens [network-id accounts recovered-account?]}
               (finish-keycard-setup)
@@ -534,7 +534,7 @@
               (multiaccounts/switch-preview-privacy-mode-flag)
               (link-preview/request-link-preview-whitelist)
               (logging/set-log-level (:log-level multiaccount))
-              (navigation/init-root :shell-stack))))
+              (navigation/init-root :enable-notifications))))
 
 (defn- keycard-setup?
   [cofx]

src/status_im2/contexts/onboarding/common/background/view.cljs

@@ -23,4 +23,4 @@
      :style  (style/background-gradient-overlay dark-overlay?)}]
    (when dark-overlay?
      [rn/view
-      {:style style/background-blur-overlay}])])
+      {:style style/background-blur-overlay}])])

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

@@ -1,14 +1,26 @@
 (ns status-im2.contexts.onboarding.enable-notifications.style
-  (:require [quo2.foundations.colors :as colors]
-            [react-native.platform :as platform]))
+  (:require
+    [react-native.platform :as platform]
+    [quo2.foundations.colors :as colors]))
 
-(def page-container
-  {:padding-top      (if platform/ios? 44 0)
-   :position         :absolute
-   :top              0
-   :bottom           0
-   :left             0
-   :right            0
+(def title-container
+  {:justify-content    :center
+   :margin-top         12
+   :padding-horizontal 20})
+
+(def enable-notifications-buttons
+  {:margin 20})
+
+(def enable-notifications
+  {:flex             1
+   :padding-top      (if platform/ios? 44 0)
    :background-color colors/neutral-80-opa-80-blur})
 
-(def navigation-bar {:height 56})
+(def page-illustration
+  {:flex              1
+   :background-color  colors/danger-50
+   :align-items       :center
+   :margin-horizontal 20
+   :border-radius     20
+   :margin-top        20
+   :justify-content   :center})

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

@@ -1,37 +1,71 @@
 (ns status-im2.contexts.onboarding.enable-notifications.view
-  (:require [quo2.core :as quo]
-            [quo2.foundations.colors :as colors]
-            [react-native.core :as rn]
-            [status-im2.contexts.onboarding.enable-notifications.style :as style]
-            [utils.i18n :as i18n]
-            [status-im2.contexts.onboarding.common.background.view :as background]
-            [utils.re-frame :as rf]))
+  (:require
+    [quo2.core :as quo]
+    [quo2.foundations.colors :as colors]
+    [utils.i18n :as i18n]
+    [utils.re-frame :as rf]
+    [react-native.core :as rn]
+    [react-native.platform :as platform]
+    [status-im.notifications.core :as notifications]
+    [status-im2.contexts.onboarding.common.background.view :as background]
+    [status-im2.contexts.onboarding.enable-notifications.style :as style]))
 
 (defn navigation-bar
   []
-  [rn/view {:style style/navigation-bar}
-   [quo/page-nav
-    {:align-mid?  true
-     :mid-section {:type :text-only :main-text ""}
-    }]])
+  [quo/page-nav
+   (merge {:horizontal-description? false
+           :one-icon-align-left?    true
+           :align-mid?              false
+           :page-nav-color          :transparent
+           :left-section            {:icon                  :i/arrow-left
+                                     :icon-background-color colors/white-opa-5
+                                     :icon-override-theme   :dark
+                                     :type                  :shell
+                                     :on-press              #()}})])
 
-(defn page
+(defn page-title
   []
-  [rn/view {:style style/page-container}
-   [navigation-bar]
-   [rn/view {:style {:padding-horizontal 20}}
-    [quo/text
-     {:size   :heading-1
-      :weight :semi-bold
-      :style  {:color colors/white}} "Enable-notifications"]
-    [quo/button
-     {:on-press       #(rf/dispatch [:init-root :shell-stack])
-      :type           :grey
-      :override-theme :dark
-      :style          {}} (i18n/label :t/continue)]]])
+  [rn/view {:style style/title-container}
+   [quo/text
+    {:accessibility-label :notifications-screen-title
+     :weight              :semi-bold
+     :size                :heading-1
+     :style               {:color colors/white}}
+    (i18n/label :t/intro-wizard-title6)]
+   [quo/text
+    {:accessibility-label :notifications-screen-sub-title
+     :weight              :regular
+     :size                :paragraph-1
+     :style               {:color colors/white}}
+    (i18n/label :t/enable-notifications-sub-title)]])
+
+(defn enable-notification-buttons
+  []
+  [rn/view {:style style/enable-notifications-buttons}
+   [quo/button
+    {:on-press                  (fn []
+                                  (rf/dispatch [::notifications/switch true platform/ios?])
+                                  (rf/dispatch [:init-root :welcome]))
+     :type                      :primary
+     :before                    :i/notifications
+     :accessibility-label       :enable-notifications-button
+     :override-background-color (colors/custom-color :magenta 60)}
+    (i18n/label :t/intro-wizard-title6)]
+   [quo/button
+    {:on-press                  #(rf/dispatch [:init-root :welcome])
+     :accessibility-label       :enable-notifications-later-button
+     :override-background-color colors/white-opa-5
+     :style                     {:margin-top 12}}
+    (i18n/label :t/maybe-later)]])
 
 (defn enable-notifications
   []
-  [rn/view {:style {:flex 1}}
+  [rn/view {:style style/enable-notifications}
    [background/view true]
-   [page]])
+   [navigation-bar]
+   [page-title]
+   [rn/view {:style style/page-illustration}
+    [quo/text
+     "[Illustration here]"]]
+   [enable-notification-buttons]])
+

src/status_im2/contexts/onboarding/welcome/style.cljs

@@ -0,0 +1,24 @@
+(ns status-im2.contexts.onboarding.welcome.style
+  (:require
+    [react-native.platform :as platform]
+    [quo2.foundations.colors :as colors]))
+
+(def title-container
+  {:justify-content    :center
+   :margin-top         12
+   :padding-horizontal 20})
+
+(def welcome-container
+  {:flex             1
+   :padding-top      (if platform/ios? 44 0)
+   :background-color colors/neutral-80-opa-80-blur})
+
+(def page-illustration
+  {:flex              1
+   :background-color  colors/danger-50
+   :align-items       :center
+   :margin-horizontal 20
+   :border-radius     20
+   :margin-top        20
+   :justify-content   :center})
+

src/status_im2/contexts/onboarding/welcome/view.cljs

@@ -0,0 +1,55 @@
+(ns status-im2.contexts.onboarding.welcome.view
+  (:require
+    [quo2.core :as quo]
+    [quo2.foundations.colors :as colors]
+    [utils.i18n :as i18n]
+    [utils.re-frame :as rf]
+    [react-native.core :as rn]
+    [status-im2.contexts.onboarding.welcome.style :as style]
+    [status-im2.contexts.onboarding.common.background.view :as background]))
+
+(defn page-title
+  []
+  [rn/view {:style style/title-container}
+   [quo/text
+    {:accessibility-label :notifications-screen-title
+     :weight              :semi-bold
+     :size                :heading-1
+     :style               {:color colors/white}}
+    (i18n/label :t/welcome-to-web3)]
+   [quo/text
+    {:accessibility-label :notifications-screen-sub-title
+     :weight              :regular
+     :size                :paragraph-1
+     :style               {:color colors/white}}
+    (i18n/label :t/welcome-to-web3-sub-title)]])
+
+
+(defn navigation-bar
+  [root]
+  [quo/page-nav
+   {:horizontal-description? false
+    :one-icon-align-left?    true
+    :align-mid?              false
+    :page-nav-color          :transparent
+    :left-section            {:icon                  :i/arrow-left
+                              :icon-background-color colors/white-opa-5
+                              :type                  :shell
+                              :on-press              #(rf/dispatch [:init-root root])}}])
+
+(defn view
+  []
+  [rn/view {:style style/welcome-container}
+   [background/view true]
+   [navigation-bar :enable-notifications]
+   [page-title]
+   [rn/view {:style style/page-illustration}
+    [quo/text
+     "Illustration here"]]
+   [quo/button
+    {:on-press                  #(rf/dispatch [:init-root :shell-stack])
+     :type                      :primary
+     :accessibility-label       :welcome-button
+     :override-background-color (colors/custom-color :magenta 60)
+     :style                     {:margin 20}}
+    (i18n/label :t/start-using-status)]])

src/status_im2/navigation/roots.cljs

@@ -110,15 +110,6 @@
                                     (status-bar-options)
                                     {:topBar (topbar-options)})}}}
 
-   ;;WELCOME
-   :welcome
-   {:root {:stack {:children [{:component {:name    :welcome
-                                           :id      :welcome
-                                           :options (status-bar-options)}}]
-                   :options  (merge (default-root)
-                                    (status-bar-options)
-                                    {:topBar (assoc (topbar-options) :visible false)})}}}
-
    ;;NOTIFICATIONS
    :onboarding-notification
    {:root {:stack {:children [{:component {:name    :onboarding-notification
@@ -173,12 +164,18 @@
                                             :id      :profiles
                                             :options (merge
                                                       (status-bar-options)
-                                                      {:topBar {:visible false}})}}]}}}
-          :enable-notifications
-          {:root
-           {:stack {:id       :enable-notifications
-                    :children [{:component {:name    :enable-notifications
-                                            :id      :enable-notifications
-                                            :options (merge
-                                                      (status-bar-options)
-                                                      {:topBar {:visible false}})}}]}}}}))
+                                                      {:topBar {:visible false}})}}]}}}}
+         {:enable-notifications
+          {:root {:stack {:children [{:component {:name    :enable-notifications
+                                                  :id      :enable-notifications
+                                                  :options (merge
+                                                            (status-bar-options)
+                                                            {:statusBar {:style :light}
+                                                             :topBar    {:visible false}})}}]}}}}
+         {:welcome
+          {:root {:stack {:children [{:component {:name    :welcome
+                                                  :id      :welcome
+                                                  :options (merge
+                                                            (status-bar-options)
+                                                            {:statusBar {:style :light}
+                                                             :topBar    {:visible false}})}}]}}}}))

src/status_im2/navigation/screens.cljs

@@ -18,6 +18,7 @@
     [status-im2.contexts.onboarding.create-profile.view :as create-profile]
     [status-im2.contexts.onboarding.enable-biometrics.view :as enable-biometrics]
     [status-im2.contexts.onboarding.enable-notifications.view :as enable-notifications]
+    [status-im2.contexts.onboarding.welcome.view :as welcome]
     [status-im2.contexts.onboarding.new-to-status.view :as new-to-status]
     [status-im2.contexts.onboarding.sign-in.view :as sign-in]
     [status-im2.contexts.onboarding.syncing.syncing-devices.view :as syncing-devices]
@@ -197,7 +198,14 @@
                  :topBar        {:visible false}
                  :navigationBar {:backgroundColor colors/black}}
      :insets    {:top false}
-     :component syncing-devices/syncing-devices}]
+     :component syncing-devices/syncing-devices}
+
+    {:name      :welcome
+     :options   {:statusBar     {:style :light}
+                 :topBar        {:visible false}
+                 :navigationBar {:backgroundColor colors/black}}
+     :insets    {:top false}
+     :component welcome/view}]
 
    (when config/quo-preview-enabled?
      quo.preview/screens)

translations/en.json

@@ -485,6 +485,7 @@
     "empty-chat-description-community": "It's been quiet here for the last {{quiet-hours}}.",
     "empty-chat-description-public-share-this": "share this chat.",
     "enable": "Enable",
+    "enable-notifications-sub-title": "Receive notifications when somebody sends you a message or crypto to your wallet",
     "encrypt-with-password": "Encrypt with password",
     "ending-not-allowed": "{{ending}} ending is not allowed",
     "ens-10-SNT": "10 SNT",
@@ -1259,6 +1260,7 @@
     "start-conversation": "Start conversation",
     "start-group-chat": "Start group chat",
     "start-new-chat": "Start new chat",
+    "start-using-status": "Start using Status",
     "status": "Status",
     "status-confirmed": "Confirmed",
     "status-hardwallet": "Status hardwallet",
@@ -1441,6 +1443,8 @@
     "web-view-error": "Unable to load page",
     "welcome-screen-text": "Set up your wallet, invite friends to chat\n and browse popular dapps!",
     "welcome-to-status": "Welcome to Status!",
+    "welcome-to-web3": "Welcome to web3",
+    "welcome-to-web3-sub-title": "What are you waiting for? Go explore!",
     "welcome-to-status-description": "Set up your crypto wallet, invite friends to chat and browse decentralized apps",
     "welcome-blank-message": "Your chats will appear here. To start new chats press the ⊕ button",
     "welcome-community-blank-message": "Your channels will appear here. To create a new channel, click on the ⊕ button and select \"Create a channel\"",