chore(onboarding): Remove welcome screen from onboarding (#20912)

* Fix customization color in disclaimer on onboarding

* Remove welcome page from onboarding

* Fix notification permission request on onboarding

* e2e: updated create user flow

---------

Co-authored-by: Ulises M <ulises.ssb@hotmail.com>
Co-authored-by: Yevheniia Berdnyk <ie.berdnyk@gmail.com>

src/legacy/status_im/events.cljs

@@ -57,6 +57,11 @@
  (fn [options]
    (permissions/request-permissions options)))
 
+(re-frame/reg-fx
+ :request-notifications-fx
+ (fn [options]
+   (permissions/request-notifications options)))
+
 (re-frame/reg-fx
  :ui/show-error
  (fn [content]
@@ -164,6 +169,12 @@
   [_ options]
   {:request-permissions-fx options})
 
+(rf/reg-event-fx
+ :request-notifications
+ (fn [_ [options]]
+   (prn options)
+   {:request-notifications-fx options}))
+
 (rf/defn update-window-dimensions
   {:events [:update-window-dimensions]}
   [{:keys [db]} dimensions]

src/react_native/permissions.cljs

@@ -1,7 +1,10 @@
 (ns react-native.permissions
   (:require
-    ["react-native-permissions" :refer (check openSettings requestMultiple PERMISSIONS RESULTS)]
+    ["react-native-permissions" :refer
-    [react-native.platform :as platform]))
+     [check openSettings PERMISSIONS requestMultiple requestNotifications
+      RESULTS]]
+    [react-native.platform :as platform]
+    [taoensso.timbre :as log]))
 
 (def permissions-map
   {:read-external-storage  (cond
@@ -45,3 +48,20 @@
       (.catch #(on-error %))))
 
 (def open-settings openSettings)
+
+(defn request-notifications
+  "`notification-options` is only used on iOS.
+    A map with `:status` and `settings` (only for iOS) is passed to the callbacks.
+    See https://github.com/zoontek/react-native-permissions?tab=readme-ov-file#requestnotifications."
+  [{:keys [notification-options on-allowed on-denied]
+    :or   {notification-options #js ["alert"]}}]
+  (-> (requestNotifications notification-options)
+      (.then (fn [js-response]
+               (let [response (js->clj js-response :keywordize-keys true)]
+                 (if (= (:status response) "granted")
+                   (do
+                     (on-allowed response)
+                     (log/debug "Notification permission were allowed" response))
+                   (do
+                     (on-denied response)
+                     (log/debug "Notification permission were denied" response))))))))

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

@@ -209,9 +209,10 @@
        (when same-passwords?
          [rn/view {:style style/disclaimer-container}
           [quo/disclaimer
-           {:blur?     true
+           {:blur?               true
-            :on-change (partial set-accepts-disclaimer? not)
+            :on-change           (partial set-accepts-disclaimer? not)
-            :checked?  accepts-disclaimer?}
+            :checked?            accepts-disclaimer?
+            :customization-color user-color}
            (i18n/label :t/password-creation-disclaimer)]])
        (when (and (= focused-input :password) (not same-passwords?))
          [help

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

@@ -7,7 +7,6 @@
     [status-im.contexts.onboarding.enable-notifications.style :as style]
     [status-im.contexts.shell.jump-to.constants :as shell.constants]
     [status-im.contexts.shell.jump-to.utils :as shell.utils]
-    [taoensso.timbre :as log]
     [utils.i18n :as i18n]
     [utils.re-frame :as rf]))
 
@@ -20,39 +19,36 @@
     :description                     (i18n/label :t/enable-notifications-sub-title)
     :description-accessibility-label :notifications-sub-title}])
 
+(defn- finish-onboarding
+  [notifications-enabled?]
+  (rf/dispatch [:push-notifications/switch notifications-enabled?])
+  (shell.utils/change-selected-stack-id shell.constants/default-selected-stack true nil)
+  (rf/dispatch [:update-theme-and-init-root :shell-stack])
+  (rf/dispatch [:profile/show-testnet-mode-banner-if-enabled])
+  (rf/dispatch [:universal-links/process-stored-event]))
+
 (defn enable-notification-buttons
   [{:keys [insets]}]
-  (let [profile-color (rf/sub [:onboarding/customization-color])]
+  (let [profile-color   (rf/sub [:onboarding/customization-color])
+        ask-permission  (fn []
+                          (rf/dispatch [:request-notifications
+                                        {:on-allowed (fn []
+                                                       (js/setTimeout #(finish-onboarding true)
+                                                                      300))
+                                         :on-denied  (fn []
+                                                       (js/setTimeout #(finish-onboarding false)
+                                                                      300))}]))
+        skip-permission #(finish-onboarding false)]
     [rn/view {:style (style/buttons insets)}
      [quo/button
-      {:on-press            (fn []
+      {:on-press            ask-permission
-                              (shell.utils/change-selected-stack-id
-                               shell.constants/default-selected-stack
-                               true
-                               nil)
-                              (rf/dispatch
-                               [:request-permissions
-                                {:permissions [:post-notifications]
-                                 :on-allowed  #(log/info "push notification permissions were allowed")
-                                 :on-denied   #(log/error "user denied push notification permissions")}])
-                              (rf/dispatch [:push-notifications/switch true])
-                              (rf/dispatch [:navigate-to-within-stack
-                                            [:screen/onboarding.welcome
-                                             :screen/onboarding.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            (fn []
+      {:on-press            skip-permission
-                              (shell.utils/change-selected-stack-id
-                               shell.constants/default-selected-stack
-                               true
-                               nil)
-                              (rf/dispatch [:navigate-to-within-stack
-                                            [:screen/onboarding.welcome
-                                             :screen/onboarding.enable-notifications]]))
        :accessibility-label :enable-notifications-later-button
        :type                :grey
        :background          :blur

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

@@ -1,36 +0,0 @@
-(ns status-im.contexts.onboarding.welcome.style)
-
-(def default-margin 20)
-
-(defn page-container
-  [insets]
-  {:flex        1
-   :padding-top (:top insets)})
-
-(defn page-illustration
-  [width]
-  {:width        width
-   :aspect-ratio 0.7
-   :height       :auto})
-
-(def page-title
-  {:margin-top        12
-   :margin-horizontal 20
-   :margin-bottom     8})
-
-(defn buttons
-  [insets]
-  {:position      :absolute
-   :left          0
-   :right         0
-   :padding-left  default-margin
-   :padding-right default-margin
-   :bottom        (+ 12 (:bottom insets))})
-
-(def bottom-shadow
-  {:position :absolute
-   :height   64
-   :top      0
-   :bottom   0
-   :left     0
-   :right    0})

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

@@ -1,54 +0,0 @@
-(ns status-im.contexts.onboarding.welcome.view
-  (:require
-    [quo.core :as quo]
-    [quo.foundations.colors :as colors]
-    [react-native.core :as rn]
-    [react-native.linear-gradient :as linear-gradient]
-    [react-native.safe-area :as safe-area]
-    [status-im.common.resources :as resources]
-    [status-im.contexts.onboarding.welcome.style :as style]
-    [utils.i18n :as i18n]
-    [utils.re-frame :as rf]))
-
-(defn page-title
-  []
-  (let [new-account? (rf/sub [:onboarding/new-account?])]
-    [quo/text-combinations
-     {:container-style                 style/page-title
-      :title                           (i18n/label (if new-account?
-                                                     :t/welcome-to-web3
-                                                     :t/welcome-back))
-      :title-accessibility-label       :welcome-title
-      :description                     (i18n/label :t/welcome-to-web3-sub-title)
-      :description-accessibility-label :welcome-sub-title}]))
-
-(defn view
-  []
-  (let [profile-color (rf/sub [:onboarding/customization-color])
-        window        (rf/sub [:dimensions/window])
-        insets        (safe-area/get-insets)]
-    [rn/view {:style (style/page-container insets)}
-     [quo/page-nav
-      {:type       :no-title
-       :background :blur
-       :icon-name  :i/arrow-left
-       :on-press   #(rf/dispatch [:navigate-back])}]
-     [page-title]
-     [rn/image
-      {:style       (style/page-illustration (:width window))
-       :resize-mode :contain
-       :source      (resources/get-image :welcome-illustration)}]
-     [rn/view {:style (style/buttons insets)}
-      (when rn/small-screen?
-        [linear-gradient/linear-gradient
-         {:style  style/bottom-shadow
-          :colors [colors/neutral-100-opa-0 colors/neutral-100-opa-80]}])
-      [quo/button
-       {:on-press            (fn []
-                               (rf/dispatch [:update-theme-and-init-root :shell-stack])
-                               (rf/dispatch [:profile/show-testnet-mode-banner-if-enabled])
-                               (rf/dispatch [:universal-links/process-stored-event]))
-        :type                :primary
-        :accessibility-label :welcome-button
-        :customization-color profile-color}
-       (i18n/label :t/start-using-status)]]]))

src/status_im/navigation/screens.cljs

@@ -37,7 +37,6 @@
     [status-im.contexts.onboarding.sign-in.view :as sign-in]
     [status-im.contexts.onboarding.syncing.progress.view :as syncing-devices]
     [status-im.contexts.onboarding.syncing.results.view :as syncing-results]
-    [status-im.contexts.onboarding.welcome.view :as welcome]
     [status-im.contexts.preview.feature-flags.view :as feature-flags]
     [status-im.contexts.preview.quo.component-preview.view :as component-preview]
     [status-im.contexts.preview.quo.main :as quo.preview]
@@ -356,9 +355,7 @@
     {:name      :screen/onboarding.enable-notifications
      :options   {:theme                  :dark
                  :layout                 options/onboarding-transparent-layout
-                 :animations             (merge
+                 :animations             transitions/push-animations-for-transparent-background
-                                          transitions/new-to-status-modal-animations
-                                          transitions/push-animations-for-transparent-background)
                  :popGesture             false
                  :modalPresentationStyle :overCurrentContext
                  :hardwareBackButton     {:dismissModalOnPress false
@@ -409,12 +406,6 @@
      :options   {:theme :dark}
      :component syncing-results/view}
 
-    {:name      :screen/onboarding.welcome
-     :options   {:theme      :dark
-                 :layout     options/onboarding-transparent-layout
-                 :animations transitions/push-animations-for-transparent-background}
-     :component welcome/view}
-
     {:name      :emoji-picker
      :options   {:sheet? true}
      :component emoji-picker/view}

test/appium/views/sign_in_view.py

@@ -267,12 +267,11 @@ class SignInView(BaseView):
             for _ in range(3):
                 self.allow_button.click_if_shown(sec=10)
                 self.enable_notifications_button.click_if_shown()
-                if self.start_button.is_element_displayed():
+                if self.chats_tab.is_element_displayed():
                     break
         else:
-            self.maybe_later_button.click_until_presence_of_element(self.start_button)
+            self.maybe_later_button.wait_and_click()
         self.cancel_button.click_if_shown()  # TODO: remove when issue 20806 is fixed
-        self.start_button.click()
         self.chats_tab.wait_for_visibility_of_element(30)
         self.driver.info("## New multiaccount is created successfully!", device=False)
         return self.get_home_view()
@@ -298,11 +297,10 @@ class SignInView(BaseView):
         #     self.enable_biometric_maybe_later_button.click()
         # self.identifiers_button.wait_and_click(30)
         if enable_notifications:
-            self.enable_notifications_button.click_until_presence_of_element(self.start_button)
+            self.enable_notifications_button.click()
         else:
-            self.maybe_later_button.click_until_presence_of_element(self.start_button)
+            self.maybe_later_button.wait_and_click()
         self.cancel_button.click_if_shown()  # TODO: remove when issue 20806 is fixed
-        self.start_button.click()
         self.chats_tab.wait_for_visibility_of_element(30)
         self.driver.info("## Multiaccount is recovered successfully!", device=False)
         return self.get_home_view()