feat: finish enable notifications (#18084)

src/status_im2/common/resources.cljs

@@ -47,6 +47,7 @@
    :no-contacts-to-invite-dark    (js/require "../resources/images/ui2/no-contacts-to-invite-dark.png")
    :no-notifications-light        (js/require "../resources/images/ui2/no-notifications-light.png")
    :no-notifications-dark         (js/require "../resources/images/ui2/no-notifications-dark.png")
+   :notifications                 (js/require "../resources/images/ui2/notifications.png")
    :welcome-illustration          (js/require "../resources/images/ui2/welcome_illustration.png")})
 
 (def ui-themed
@@ -138,7 +139,11 @@
                    (js/require "../resources/videos2/biometrics_04.mp4")]
    :generate-keys [(js/require "../resources/videos2/generating_keys_01.mp4")
                    (js/require "../resources/videos2/generating_keys_02.mp4")
-                   (js/require "../resources/videos2/generating_keys_03.mp4")]})
+                   (js/require "../resources/videos2/generating_keys_03.mp4")]
+   :notifications [(js/require "../resources/videos2/notifications_01.mp4")
+                   (js/require "../resources/videos2/notifications_02.mp4")
+                   (js/require "../resources/videos2/notifications_03.mp4")
+                   (js/require "../resources/videos2/notifications_04.mp4")]})
 
 (def services
   {:latamex (js/require "../resources/images/services/Latamex.png")

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

@@ -1,22 +1,19 @@
-(ns status-im2.contexts.onboarding.enable-notifications.style
+(ns status-im2.contexts.onboarding.enable-notifications.style)
-  (:require
-    [quo.foundations.colors :as colors]))
 
 (def default-margin 20)
 
 (defn page-container
   [insets]
-  {:flex        1
+  {:flex            1
-   :padding-top (:top insets)})
+   :justify-content :space-between
+   :padding-top     (:top insets)})
 
-(def page-illustration
+(defn page-illustration
-  {:flex              1
+  [width]
-   :background-color  colors/danger-50
+  {:flex  1
-   :align-items       :center
+   :width width})
-   :margin-horizontal default-margin
+
-   :border-radius     20
+(def page-heading {:z-index 1})
-   :margin-top        default-margin
-   :justify-content   :center})
 
 (defn buttons
   [insets]

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

@@ -4,6 +4,9 @@
     [react-native.core :as rn]
     [react-native.platform :as platform]
     [react-native.safe-area :as safe-area]
+    [status-im2.common.parallax.view :as parallax]
+    [status-im2.common.parallax.whitelist :as whitelist]
+    [status-im2.common.resources :as resources]
     [status-im2.contexts.onboarding.enable-notifications.style :as style]
     [status-im2.contexts.shell.jump-to.utils :as shell.utils]
     [taoensso.timbre :as log]
@@ -35,7 +38,7 @@
                               (rf/dispatch [:navigate-to-within-stack
                                             [:welcome :enable-notifications]]))
        :type                :primary
-       :before              :i/notifications
+       :icon-left           :i/notifications
        :accessibility-label :enable-notifications-button
        :customization-color profile-color}
       (i18n/label :t/intro-wizard-title6)]
@@ -50,16 +53,36 @@
        :container-style     {:margin-top 12}}
       (i18n/label :t/maybe-later)]]))
 
-(defn enable-notifications
+(defn enable-notifications-parallax
+  []
+  (let [stretch (if rn/small-screen? -40 -25)]
+    [parallax/video
+     {:layers  (:notifications resources/parallax-video)
+      :stretch stretch}]))
+
+(defn enable-notifications-simple
+  []
+  (let [width (:width (rn/get-window))]
+    [rn/image
+     {:resize-mode :contain
+      :style       (style/page-illustration width)
+      :source      (resources/get-image :notifications)}]))
+
+(defn f-enable-notifications
   []
   (let [insets (safe-area/get-insets)]
     [rn/view {:style (style/page-container insets)}
-     [quo/page-nav
+     [rn/view {:style style/page-heading}
-      {:background :blur
+      [quo/page-nav
-       :icon-name  :i/arrow-left
+       {:background :blur
-       :on-press   #(rf/dispatch [:navigate-back-within-stack :enable-biometrics])}]
+        :icon-name  :i/arrow-left
-     [page-title]
+        :on-press   #(rf/dispatch [:navigate-back-within-stack :enable-biometrics])}]
-     [rn/view {:style style/page-illustration}
+      [page-title]]
-      [quo/text
+     (if whitelist/whitelisted?
-       "Illustration here"]]
+       [enable-notifications-parallax]
+       [enable-notifications-simple])
      [enable-notification-buttons {:insets insets}]]))
+
+(defn view
+  []
+  [:f> f-enable-notifications])

src/status_im2/navigation/screens.cljs

@@ -210,7 +210,7 @@
                  :animations             (merge transitions/new-to-status-modal-animations
                                                 transitions/push-animations-for-transparent-background)
                  :modalPresentationStyle :overCurrentContext}
-     :component enable-notifications/enable-notifications}
+     :component enable-notifications/view}
 
     {:name      :identifiers
      :component identifiers/view

translations/en.json

@@ -494,7 +494,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",
+    "enable-notifications-sub-title": "Receive notifications about your new messages or wallet transactions",
     "encrypt-with-password": "Encrypt with password",
     "ending-not-allowed": "{{ending}} ending is not allowed",
     "ends-with-space": "Cannot end with space",