chore: add skeleton flow for onboarding (#15334)

src/quo2/components/onboarding/small_option_card/view.cljs

@@ -49,8 +49,8 @@
 
 (defn small-option-card
   "Variants: `:main` or `:icon`"
-  [{:keys [variant title subtitle image max-height on-press]
+  [{:keys [variant title subtitle image max-height on-press accessibility-label]
-    :or   {variant :main}}]
+    :or   {variant :main accessibility-label :small-option-card}}]
   (let [main-variant?  (= variant :main)
         card-component (if main-variant? main-variant icon-variant)
         card-height    (cond
@@ -59,7 +59,7 @@
                          :else               style/main-variant-height)]
     [rn/view
      [rn/touchable-highlight
-      {:accessibility-label :small-option-card
+      {:accessibility-label accessibility-label
        :style               style/touchable-overlay
        :active-opacity      1
        :underlay-color      colors/white-opa-5

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

@@ -1,4 +1,4 @@
-(ns status-im2.contexts.onboarding.common.style
+(ns status-im2.contexts.onboarding.common.background.style
   (:require [quo2.foundations.colors :as colors]))
 
 (def background-container

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

@@ -1,19 +1,18 @@
-(ns status-im2.contexts.onboarding.common.background
+(ns status-im2.contexts.onboarding.common.background.view
   (:require [react-native.core :as rn]
             [quo2.foundations.colors :as colors]
             [status-im2.common.resources :as resources]
             [react-native.linear-gradient :as linear-gradient]
-            [status-im2.contexts.onboarding.common.style :as style]))
+            [status-im2.contexts.onboarding.common.background.style :as style]))
 
 (defn view
   [dark-overlay?]
   [rn/view
    {:style style/background-container}
-   ;; Todo - add carousel component as background once ready
-   ;; https://github.com/status-im/status-mobile/issues/15012
    [rn/image
     {:blur-radius (if dark-overlay? 13 0)
      :style       {:flex 1}
+     ;; Todo - get background image from sub using carousel index on landing page
      :source      (resources/get-image :onboarding-bg-1)}]
    [linear-gradient/linear-gradient
     {:colors [(if dark-overlay? (colors/custom-color :yin 50) "#000716")

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

@@ -0,0 +1,14 @@
+(ns status-im2.contexts.onboarding.create-password.style
+  (:require [quo2.foundations.colors :as colors]
+            [react-native.platform :as platform]))
+
+(def navigation-bar {:height 56})
+
+(def page-container
+  {:padding-top      (if platform/ios? 44 0)
+   :position         :absolute
+   :top              0
+   :bottom           0
+   :left             0
+   :right            0
+   :background-color colors/neutral-80-opa-80-blur})

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

@@ -0,0 +1,42 @@
+(ns status-im2.contexts.onboarding.create-password.view
+  (:require [quo2.core :as quo]
+            [quo2.foundations.colors :as colors]
+            [react-native.core :as rn]
+            [status-im2.contexts.onboarding.create-password.style :as style]
+            [utils.i18n :as i18n]
+            [status-im2.contexts.onboarding.common.background.view :as background]
+            [utils.re-frame :as rf]))
+
+(defn navigation-bar
+  []
+  [rn/view {:style style/navigation-bar}
+   [quo/page-nav
+    {:align-mid?            true
+     :mid-section           {:type :text-only :main-text ""}
+     :left-section          {:type                :blur-bg
+                             :icon                :i/arrow-left
+                             :icon-override-theme :dark
+                             :on-press            #(rf/dispatch [:navigate-back])}
+     :right-section-buttons [{:type                :blur-bg
+                              :icon                :i/info
+                              :icon-override-theme :dark
+                              :on-press            #(js/alert "Pending")}]}]])
+
+(defn page
+  []
+  [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}} "Create profile password"]
+    [quo/button
+     {:on-press #(rf/dispatch [:navigate-to :enable-biometrics])
+      :style    {}} (i18n/label :t/continue)]]])
+
+(defn create-password
+  []
+  [rn/view {:style {:flex 1}}
+   [background/view true]
+   [page]])

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

@@ -0,0 +1,15 @@
+(ns status-im2.contexts.onboarding.create-profile.style
+  (:require [quo2.foundations.colors :as colors]
+            [react-native.platform :as platform]))
+
+(def page-container
+  {:padding-top      (if platform/ios? 44 0)
+   :position         :absolute
+   :top              0
+   :bottom           0
+   :left             0
+   :right            0
+   :background-color colors/neutral-80-opa-80-blur})
+
+(def navigation-bar {:height 56})
+

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

@@ -0,0 +1,38 @@
+(ns status-im2.contexts.onboarding.create-profile.view
+  (:require [quo2.core :as quo]
+            [quo2.foundations.colors :as colors]
+            [react-native.core :as rn]
+            [status-im2.contexts.onboarding.create-profile.style :as style]
+            [utils.i18n :as i18n]
+            [status-im2.contexts.onboarding.common.background.view :as background]
+            [utils.re-frame :as rf]))
+
+(defn navigation-bar
+  []
+  [rn/view {:style style/navigation-bar}
+   [quo/page-nav
+    {:align-mid?   true
+     :mid-section  {:type :text-only :main-text ""}
+     :left-section {:type                :blur-bg
+                    :icon                :i/arrow-left
+                    :icon-override-theme :dark
+                    :on-press            #(rf/dispatch [:navigate-back])}}]])
+
+(defn page
+  []
+  [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}} "Create Profile"]
+    [quo/button
+     {:on-press #(rf/dispatch [:navigate-to :create-profile-password])
+      :style    {}} (i18n/label :t/continue)]]])
+
+(defn create-profile
+  []
+  [rn/view {:style {:flex 1}}
+   [background/view true]
+   [page]])

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

@@ -0,0 +1,14 @@
+(ns status-im2.contexts.onboarding.enable-biometrics.style
+  (:require [quo2.foundations.colors :as colors]
+            [react-native.platform :as platform]))
+
+(def page-container
+  {:padding-top      (if platform/ios? 44 0)
+   :position         :absolute
+   :top              0
+   :bottom           0
+   :left             0
+   :right            0
+   :background-color colors/neutral-80-opa-80-blur})
+
+(def navigation-bar {:height 56})

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

@@ -0,0 +1,37 @@
+(ns status-im2.contexts.onboarding.enable-biometrics.view
+  (:require [quo2.core :as quo]
+            [quo2.foundations.colors :as colors]
+            [react-native.core :as rn]
+            [status-im2.contexts.onboarding.enable-biometrics.style :as style]
+            [utils.i18n :as i18n]
+            [status-im2.contexts.onboarding.common.background.view :as background]
+            [utils.re-frame :as rf]))
+
+(defn navigation-bar
+  []
+  [rn/view {:style style/navigation-bar}
+   [quo/page-nav
+    {:align-mid?  true
+     :mid-section {:type :text-only :main-text ""}
+    }]])
+
+(defn page
+  []
+  [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-biometrics"]
+    [quo/button
+     {:on-press       #(rf/dispatch [:navigate-to :enable-notifications])
+      :type           :grey
+      :override-theme :dark
+      :style          {}} (i18n/label :t/continue)]]])
+
+(defn enable-biometrics
+  []
+  [rn/view {:style {:flex 1}}
+   [background/view true]
+   [page]])

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

@@ -0,0 +1,14 @@
+(ns status-im2.contexts.onboarding.enable-notifications.style
+  (:require [quo2.foundations.colors :as colors]
+            [react-native.platform :as platform]))
+
+(def page-container
+  {:padding-top      (if platform/ios? 44 0)
+   :position         :absolute
+   :top              0
+   :bottom           0
+   :left             0
+   :right            0
+   :background-color colors/neutral-80-opa-80-blur})
+
+(def navigation-bar {:height 56})

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

@@ -0,0 +1,37 @@
+(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]))
+
+(defn navigation-bar
+  []
+  [rn/view {:style style/navigation-bar}
+   [quo/page-nav
+    {:align-mid?  true
+     :mid-section {:type :text-only :main-text ""}
+    }]])
+
+(defn page
+  []
+  [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 [:navigate-to :shell-stack])
+      :type           :grey
+      :override-theme :dark
+      :style          {}} (i18n/label :t/continue)]]])
+
+(defn enable-notifications
+  []
+  [rn/view {:style {:flex 1}}
+   [background/view true]
+   [page]])

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

@@ -49,7 +49,7 @@
                       (* 2 56) ;; two other list items
                       (* 2 16) ;; spacing between items
                       220)     ;; extra spacing (top bar)
-       :on-press   #(rf/dispatch [:generate-and-derive-addresses])}]
+       :on-press   #(rf/dispatch [:navigate-to :create-profile])}]
 
      [rn/view {:style style/subtitle-container}
       [quo/text
@@ -59,6 +59,14 @@
        (i18n/label :t/experienced-web3)]]
 
      [rn/view {:style style/suboptions}
+      [quo/small-option-card
+       {:variant             :icon
+        :title               "Temporary (old) generate keys flow"
+        :subtitle            "generate keys"
+        :image               (resources/get-image :use-keycard)
+        :accessibility-label :generate-old-key
+        :on-press            #(rf/dispatch [:generate-and-derive-addresses])}]
+      [rn/view {:style style/space-between-suboptions}]
       [quo/small-option-card
        {:variant  :icon
         :title    (i18n/label :t/use-recovery-phrase)

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

@@ -1,5 +1,5 @@
 (ns status-im2.contexts.onboarding.profiles.view
-  (:require [status-im2.contexts.onboarding.common.background :as background]))
+  (:require [status-im2.contexts.onboarding.common.background.view :as background]))
 
 (defn views
   []

src/status_im2/navigation/screens.cljs

@@ -13,6 +13,10 @@
             [status-im2.contexts.communities.discover.view :as communities.discover]
             [status-im2.contexts.communities.overview.view :as communities.overview]
             [status-im2.contexts.onboarding.common.intro.view :as intro]
+            [status-im2.contexts.onboarding.create-password.view :as create-password]
+            [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.new-to-status.view :as new-to-status]
             [status-im2.contexts.onboarding.profiles.view :as profiles]
             [status-im2.contexts.quo-preview.main :as quo.preview]
@@ -116,7 +120,35 @@
                  :topBar        {:visible false}
                  :navigationBar {:backgroundColor colors/black}}
      :insets    {:top false}
-     :component new-to-status/new-to-status}]
+     :component new-to-status/new-to-status}
+
+    {:name      :create-profile
+     :options   {:statusBar     {:style :light}
+                 :topBar        {:visible false}
+                 :navigationBar {:backgroundColor colors/black}}
+     :insets    {:top false}
+     :component create-profile/create-profile}
+
+    {:name      :create-profile-password
+     :options   {:statusBar     {:style :light}
+                 :topBar        {:visible false}
+                 :navigationBar {:backgroundColor colors/black}}
+     :insets    {:top false}
+     :component create-password/create-password}
+
+    {:name      :enable-biometrics
+     :options   {:statusBar     {:style :light}
+                 :topBar        {:visible false}
+                 :navigationBar {:backgroundColor colors/black}}
+     :insets    {:top false}
+     :component enable-biometrics/enable-biometrics}
+
+    {:name      :enable-notifications
+     :options   {:statusBar     {:style :light}
+                 :topBar        {:visible false}
+                 :navigationBar {:backgroundColor colors/black}}
+     :insets    {:top false}
+     :component enable-notifications/enable-notifications}]
 
    (when config/quo-preview-enabled?
      quo.preview/screens)

test/appium/views/sign_in_view.py

@@ -133,7 +133,7 @@ class SignInView(BaseView):
         self.migration_password_input = EditBox(self.driver, accessibility_id="enter-password-input")
         self.sign_in_button = SignInButton(self.driver)
         self.access_key_button = AccessKeyButton(self.driver)
-        self.generate_key_button = Button(self.driver, translation_id="generate-new-key")
+        self.generate_key_button = Button(self.driver, accessibility_id="generate-old-key")
         self.your_keys_more_icon = Button(self.driver, xpath="//androidx.appcompat.widget.LinearLayoutCompat")
         self.generate_new_key_button = Button(self.driver, accessibility_id="generate-a-new-key")
         self.create_password_input = EditBox(self.driver,