From f6f5dfbe03f0ec26349caf3b8a6d801d59f96cbc Mon Sep 17 00:00:00 2001 From: Jamie Caprani Date: Fri, 17 Mar 2023 12:19:39 +0000 Subject: [PATCH] chore: add skeleton flow for onboarding (#15334) --- .../onboarding/small_option_card/view.cljs | 6 +-- .../common/{ => background}/style.cljs | 2 +- .../{background.cljs => background/view.cljs} | 7 ++-- .../onboarding/create_password/style.cljs | 14 +++++++ .../onboarding/create_password/view.cljs | 42 +++++++++++++++++++ .../onboarding/create_profile/style.cljs | 15 +++++++ .../onboarding/create_profile/view.cljs | 38 +++++++++++++++++ .../onboarding/enable_biometrics/style.cljs | 14 +++++++ .../onboarding/enable_biometrics/view.cljs | 37 ++++++++++++++++ .../enable_notifications/style.cljs | 14 +++++++ .../onboarding/enable_notifications/view.cljs | 37 ++++++++++++++++ .../onboarding/new_to_status/view.cljs | 10 ++++- .../contexts/onboarding/profiles/view.cljs | 2 +- src/status_im2/navigation/screens.cljs | 34 ++++++++++++++- test/appium/views/sign_in_view.py | 2 +- 15 files changed, 262 insertions(+), 12 deletions(-) rename src/status_im2/contexts/onboarding/common/{ => background}/style.cljs (89%) rename src/status_im2/contexts/onboarding/common/{background.cljs => background/view.cljs} (76%) create mode 100644 src/status_im2/contexts/onboarding/create_password/style.cljs create mode 100644 src/status_im2/contexts/onboarding/create_password/view.cljs create mode 100644 src/status_im2/contexts/onboarding/create_profile/style.cljs create mode 100644 src/status_im2/contexts/onboarding/create_profile/view.cljs create mode 100644 src/status_im2/contexts/onboarding/enable_biometrics/style.cljs create mode 100644 src/status_im2/contexts/onboarding/enable_biometrics/view.cljs create mode 100644 src/status_im2/contexts/onboarding/enable_notifications/style.cljs create mode 100644 src/status_im2/contexts/onboarding/enable_notifications/view.cljs diff --git a/src/quo2/components/onboarding/small_option_card/view.cljs b/src/quo2/components/onboarding/small_option_card/view.cljs index 5a6bc09009..09cd9c90b6 100644 --- a/src/quo2/components/onboarding/small_option_card/view.cljs +++ b/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] - :or {variant :main}}] + [{:keys [variant title subtitle image max-height on-press accessibility-label] + :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 diff --git a/src/status_im2/contexts/onboarding/common/style.cljs b/src/status_im2/contexts/onboarding/common/background/style.cljs similarity index 89% rename from src/status_im2/contexts/onboarding/common/style.cljs rename to src/status_im2/contexts/onboarding/common/background/style.cljs index 8eabb5139f..6924ef8b69 100644 --- a/src/status_im2/contexts/onboarding/common/style.cljs +++ b/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 diff --git a/src/status_im2/contexts/onboarding/common/background.cljs b/src/status_im2/contexts/onboarding/common/background/view.cljs similarity index 76% rename from src/status_im2/contexts/onboarding/common/background.cljs rename to src/status_im2/contexts/onboarding/common/background/view.cljs index e3540443ab..a37e340b91 100644 --- a/src/status_im2/contexts/onboarding/common/background.cljs +++ b/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") diff --git a/src/status_im2/contexts/onboarding/create_password/style.cljs b/src/status_im2/contexts/onboarding/create_password/style.cljs new file mode 100644 index 0000000000..99c54b2da2 --- /dev/null +++ b/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}) diff --git a/src/status_im2/contexts/onboarding/create_password/view.cljs b/src/status_im2/contexts/onboarding/create_password/view.cljs new file mode 100644 index 0000000000..b1feca6751 --- /dev/null +++ b/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]]) diff --git a/src/status_im2/contexts/onboarding/create_profile/style.cljs b/src/status_im2/contexts/onboarding/create_profile/style.cljs new file mode 100644 index 0000000000..a1146a7a33 --- /dev/null +++ b/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}) + diff --git a/src/status_im2/contexts/onboarding/create_profile/view.cljs b/src/status_im2/contexts/onboarding/create_profile/view.cljs new file mode 100644 index 0000000000..d52b7ea3f1 --- /dev/null +++ b/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]]) diff --git a/src/status_im2/contexts/onboarding/enable_biometrics/style.cljs b/src/status_im2/contexts/onboarding/enable_biometrics/style.cljs new file mode 100644 index 0000000000..fd76986f31 --- /dev/null +++ b/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}) diff --git a/src/status_im2/contexts/onboarding/enable_biometrics/view.cljs b/src/status_im2/contexts/onboarding/enable_biometrics/view.cljs new file mode 100644 index 0000000000..ddc9948122 --- /dev/null +++ b/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]]) diff --git a/src/status_im2/contexts/onboarding/enable_notifications/style.cljs b/src/status_im2/contexts/onboarding/enable_notifications/style.cljs new file mode 100644 index 0000000000..26ee7187e6 --- /dev/null +++ b/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}) diff --git a/src/status_im2/contexts/onboarding/enable_notifications/view.cljs b/src/status_im2/contexts/onboarding/enable_notifications/view.cljs new file mode 100644 index 0000000000..72b4bf359f --- /dev/null +++ b/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]]) diff --git a/src/status_im2/contexts/onboarding/new_to_status/view.cljs b/src/status_im2/contexts/onboarding/new_to_status/view.cljs index 07ad8be9f8..70f2597584 100644 --- a/src/status_im2/contexts/onboarding/new_to_status/view.cljs +++ b/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) diff --git a/src/status_im2/contexts/onboarding/profiles/view.cljs b/src/status_im2/contexts/onboarding/profiles/view.cljs index f013f086eb..77bca64f8f 100644 --- a/src/status_im2/contexts/onboarding/profiles/view.cljs +++ b/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 [] diff --git a/src/status_im2/navigation/screens.cljs b/src/status_im2/navigation/screens.cljs index f82c0cfc2b..29b67ab4e0 100644 --- a/src/status_im2/navigation/screens.cljs +++ b/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) diff --git a/test/appium/views/sign_in_view.py b/test/appium/views/sign_in_view.py index 2e498fcd98..861f44a158 100644 --- a/test/appium/views/sign_in_view.py +++ b/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,