Skip to content

Commit 2f84cfd

Browse files
jo-mutjo-mut
authored
Onboarding notifications flow
* enable notifications onboarding * added blurred background * support navigate to previous screen
1 parent 7b60a5f commit 2f84cfd

File tree

10 files changed

+215
-78
lines changed

10 files changed

+215
-78
lines changed

Diff for: ‎src/quo2/components/navigation/page_nav.cljs

+21-18
Original file line numberDiff line numberDiff line change
@@ -30,16 +30,16 @@
3030
{:no-color true})))
3131

3232
(defn left-section-view
33-
[{:keys [on-press icon accessibility-label type icon-override-theme] :or {type :grey}}
33+
[{:keys [on-press icon accessibility-label type icon-background-color] :or {type :grey}}
3434
put-middle-section-on-left?]
3535
[rn/view {:style (when put-middle-section-on-left? {:margin-right 5})}
3636
[button/button
37-
{:on-press on-press
38-
:icon true
39-
:type type
40-
:size 32
41-
:accessibility-label accessibility-label
42-
:override-theme icon-override-theme}
37+
{:on-press on-press
38+
:icon true
39+
:type type
40+
:size 32
41+
:accessibility-label accessibility-label
42+
:override-background-color icon-background-color}
4343
icon]])
4444

4545
(defn- mid-section-comp
@@ -235,15 +235,18 @@
235235
:align-items :center}}
236236
(when left-section
237237
[left-section-view left-section put-middle-section-on-left?])
238-
(when put-middle-section-on-left?
239-
[mid-section-view
240-
(assoc mid-section-props
241-
:left-align? true
242-
:description (:description mid-section)
243-
:description-color (:description-color mid-section)
244-
:description-icon (:description-icon mid-section)
245-
:align-mid? align-mid?
246-
:description-user-icon (:description-user-icon mid-section))])]
247-
(when-not put-middle-section-on-left?
248-
[mid-section-view mid-section-props])
238+
(when mid-section
239+
(cond
240+
put-middle-section-on-left?
241+
[mid-section-view
242+
(assoc mid-section-props
243+
:left-align? true
244+
:description (:description mid-section)
245+
:description-color (:description-color mid-section)
246+
:description-icon (:description-icon mid-section)
247+
:align-mid? align-mid?
248+
:description-user-icon (:description-user-icon mid-section))]
249+
250+
(not put-middle-section-on-left?)
251+
[mid-section-view mid-section-props]))]
249252
[right-section-view right-section-buttons]]))

Diff for: ‎src/status_im/multiaccounts/login/core.cljs

+2-2
Original file line numberDiff line numberDiff line change
@@ -523,7 +523,7 @@
523523
(rf/merge cofx
524524
{:db (-> db
525525
(dissoc :multiaccounts/login)
526-
(assoc :tos/next-root :onboarding-notification :chats/loading? false)
526+
(assoc :tos/next-root :enable-notifications :chats/loading? false)
527527
(assoc-in [:multiaccount :multiaccounts/first-account] first-account?))
528528
::get-tokens [network-id accounts recovered-account?]}
529529
(finish-keycard-setup)
@@ -534,7 +534,7 @@
534534
(multiaccounts/switch-preview-privacy-mode-flag)
535535
(link-preview/request-link-preview-whitelist)
536536
(logging/set-log-level (:log-level multiaccount))
537-
(navigation/init-root :shell-stack))))
537+
(navigation/init-root :enable-notifications))))
538538

539539
(defn- keycard-setup?
540540
[cofx]

Diff for: ‎src/status_im2/contexts/onboarding/common/background/view.cljs

+1-1
Original file line numberDiff line numberDiff line change
@@ -23,4 +23,4 @@
2323
:style (style/background-gradient-overlay dark-overlay?)}]
2424
(when dark-overlay?
2525
[rn/view
26-
{:style style/background-blur-overlay}])])
26+
{:style style/background-blur-overlay}])])

Diff for: ‎src/status_im2/contexts/onboarding/enable_notifications/style.cljs

+23-11
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,26 @@
11
(ns status-im2.contexts.onboarding.enable-notifications.style
2-
(:require [quo2.foundations.colors :as colors]
3-
[react-native.platform :as platform]))
4-
5-
(def page-container
6-
{:padding-top (if platform/ios? 44 0)
7-
:position :absolute
8-
:top 0
9-
:bottom 0
10-
:left 0
11-
:right 0
2+
(:require
3+
[react-native.platform :as platform]
4+
[quo2.foundations.colors :as colors]))
5+
6+
(def title-container
7+
{:justify-content :center
8+
:margin-top 12
9+
:padding-horizontal 20})
10+
11+
(def enable-notifications-buttons
12+
{:margin 20})
13+
14+
(def enable-notifications
15+
{:flex 1
16+
:padding-top (if platform/ios? 44 0)
1217
:background-color colors/neutral-80-opa-80-blur})
1318

14-
(def navigation-bar {:height 56})
19+
(def page-illustration
20+
{:flex 1
21+
:background-color colors/danger-50
22+
:align-items :center
23+
:margin-horizontal 20
24+
:border-radius 20
25+
:margin-top 20
26+
:justify-content :center})

Diff for: ‎src/status_im2/contexts/onboarding/enable_notifications/view.cljs

+61-27
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,71 @@
11
(ns status-im2.contexts.onboarding.enable-notifications.view
2-
(:require [quo2.core :as quo]
3-
[quo2.foundations.colors :as colors]
4-
[react-native.core :as rn]
5-
[status-im2.contexts.onboarding.enable-notifications.style :as style]
6-
[utils.i18n :as i18n]
7-
[status-im2.contexts.onboarding.common.background.view :as background]
8-
[utils.re-frame :as rf]))
2+
(:require
3+
[quo2.core :as quo]
4+
[quo2.foundations.colors :as colors]
5+
[utils.i18n :as i18n]
6+
[utils.re-frame :as rf]
7+
[react-native.core :as rn]
8+
[react-native.platform :as platform]
9+
[status-im.notifications.core :as notifications]
10+
[status-im2.contexts.onboarding.common.background.view :as background]
11+
[status-im2.contexts.onboarding.enable-notifications.style :as style]))
912

1013
(defn navigation-bar
1114
[]
12-
[rn/view {:style style/navigation-bar}
13-
[quo/page-nav
14-
{:align-mid? true
15-
:mid-section {:type :text-only :main-text ""}
16-
}]])
15+
[quo/page-nav
16+
(merge {:horizontal-description? false
17+
:one-icon-align-left? true
18+
:align-mid? false
19+
:page-nav-color :transparent
20+
:left-section {:icon :i/arrow-left
21+
:icon-background-color colors/white-opa-5
22+
:icon-override-theme :dark
23+
:type :shell
24+
:on-press #()}})])
1725

18-
(defn page
26+
(defn page-title
1927
[]
20-
[rn/view {:style style/page-container}
21-
[navigation-bar]
22-
[rn/view {:style {:padding-horizontal 20}}
23-
[quo/text
24-
{:size :heading-1
25-
:weight :semi-bold
26-
:style {:color colors/white}} "Enable-notifications"]
27-
[quo/button
28-
{:on-press #(rf/dispatch [:init-root :shell-stack])
29-
:type :grey
30-
:override-theme :dark
31-
:style {}} (i18n/label :t/continue)]]])
28+
[rn/view {:style style/title-container}
29+
[quo/text
30+
{:accessibility-label :notifications-screen-title
31+
:weight :semi-bold
32+
:size :heading-1
33+
:style {:color colors/white}}
34+
(i18n/label :t/intro-wizard-title6)]
35+
[quo/text
36+
{:accessibility-label :notifications-screen-sub-title
37+
:weight :regular
38+
:size :paragraph-1
39+
:style {:color colors/white}}
40+
(i18n/label :t/enable-notifications-sub-title)]])
41+
42+
(defn enable-notification-buttons
43+
[]
44+
[rn/view {:style style/enable-notifications-buttons}
45+
[quo/button
46+
{:on-press (fn []
47+
(rf/dispatch [::notifications/switch true platform/ios?])
48+
(rf/dispatch [:init-root :welcome]))
49+
:type :primary
50+
:before :i/notifications
51+
:accessibility-label :enable-notifications-button
52+
:override-background-color (colors/custom-color :magenta 60)}
53+
(i18n/label :t/intro-wizard-title6)]
54+
[quo/button
55+
{:on-press #(rf/dispatch [:init-root :welcome])
56+
:accessibility-label :enable-notifications-later-button
57+
:override-background-color colors/white-opa-5
58+
:style {:margin-top 12}}
59+
(i18n/label :t/maybe-later)]])
3260

3361
(defn enable-notifications
3462
[]
35-
[rn/view {:style {:flex 1}}
63+
[rn/view {:style style/enable-notifications}
3664
[background/view true]
37-
[page]])
65+
[navigation-bar]
66+
[page-title]
67+
[rn/view {:style style/page-illustration}
68+
[quo/text
69+
"[Illustration here]"]]
70+
[enable-notification-buttons]])
71+

Diff for: ‎src/status_im2/contexts/onboarding/welcome/style.cljs

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
(ns status-im2.contexts.onboarding.welcome.style
2+
(:require
3+
[react-native.platform :as platform]
4+
[quo2.foundations.colors :as colors]))
5+
6+
(def title-container
7+
{:justify-content :center
8+
:margin-top 12
9+
:padding-horizontal 20})
10+
11+
(def welcome-container
12+
{:flex 1
13+
:padding-top (if platform/ios? 44 0)
14+
:background-color colors/neutral-80-opa-80-blur})
15+
16+
(def page-illustration
17+
{:flex 1
18+
:background-color colors/danger-50
19+
:align-items :center
20+
:margin-horizontal 20
21+
:border-radius 20
22+
:margin-top 20
23+
:justify-content :center})
24+

Diff for: ‎src/status_im2/contexts/onboarding/welcome/view.cljs

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
(ns status-im2.contexts.onboarding.welcome.view
2+
(:require
3+
[quo2.core :as quo]
4+
[quo2.foundations.colors :as colors]
5+
[utils.i18n :as i18n]
6+
[utils.re-frame :as rf]
7+
[react-native.core :as rn]
8+
[status-im2.contexts.onboarding.welcome.style :as style]
9+
[status-im2.contexts.onboarding.common.background.view :as background]))
10+
11+
(defn page-title
12+
[]
13+
[rn/view {:style style/title-container}
14+
[quo/text
15+
{:accessibility-label :notifications-screen-title
16+
:weight :semi-bold
17+
:size :heading-1
18+
:style {:color colors/white}}
19+
(i18n/label :t/welcome-to-web3)]
20+
[quo/text
21+
{:accessibility-label :notifications-screen-sub-title
22+
:weight :regular
23+
:size :paragraph-1
24+
:style {:color colors/white}}
25+
(i18n/label :t/welcome-to-web3-sub-title)]])
26+
27+
28+
(defn navigation-bar
29+
[root]
30+
[quo/page-nav
31+
{:horizontal-description? false
32+
:one-icon-align-left? true
33+
:align-mid? false
34+
:page-nav-color :transparent
35+
:left-section {:icon :i/arrow-left
36+
:icon-background-color colors/white-opa-5
37+
:type :shell
38+
:on-press #(rf/dispatch [:init-root root])}}])
39+
40+
(defn view
41+
[]
42+
[rn/view {:style style/welcome-container}
43+
[background/view true]
44+
[navigation-bar :enable-notifications]
45+
[page-title]
46+
[rn/view {:style style/page-illustration}
47+
[quo/text
48+
"Illustration here"]]
49+
[quo/button
50+
{:on-press #(rf/dispatch [:init-root :shell-stack])
51+
:type :primary
52+
:accessibility-label :welcome-button
53+
:override-background-color (colors/custom-color :magenta 60)
54+
:style {:margin 20}}
55+
(i18n/label :t/start-using-status)]])

Diff for: ‎src/status_im2/navigation/roots.cljs

+15-18
Original file line numberDiff line numberDiff line change
@@ -110,15 +110,6 @@
110110
(status-bar-options)
111111
{:topBar (topbar-options)})}}}
112112

113-
;;WELCOME
114-
:welcome
115-
{:root {:stack {:children [{:component {:name :welcome
116-
:id :welcome
117-
:options (status-bar-options)}}]
118-
:options (merge (default-root)
119-
(status-bar-options)
120-
{:topBar (assoc (topbar-options) :visible false)})}}}
121-
122113
;;NOTIFICATIONS
123114
:onboarding-notification
124115
{:root {:stack {:children [{:component {:name :onboarding-notification
@@ -173,12 +164,18 @@
173164
:id :profiles
174165
:options (merge
175166
(status-bar-options)
176-
{:topBar {:visible false}})}}]}}}
177-
:enable-notifications
178-
{:root
179-
{:stack {:id :enable-notifications
180-
:children [{:component {:name :enable-notifications
181-
:id :enable-notifications
182-
:options (merge
183-
(status-bar-options)
184-
{:topBar {:visible false}})}}]}}}}))
167+
{:topBar {:visible false}})}}]}}}}
168+
{:enable-notifications
169+
{:root {:stack {:children [{:component {:name :enable-notifications
170+
:id :enable-notifications
171+
:options (merge
172+
(status-bar-options)
173+
{:statusBar {:style :light}
174+
:topBar {:visible false}})}}]}}}}
175+
{:welcome
176+
{:root {:stack {:children [{:component {:name :welcome
177+
:id :welcome
178+
:options (merge
179+
(status-bar-options)
180+
{:statusBar {:style :light}
181+
:topBar {:visible false}})}}]}}}}))

Diff for: ‎src/status_im2/navigation/screens.cljs

+9-1
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
[status-im2.contexts.onboarding.create-profile.view :as create-profile]
1919
[status-im2.contexts.onboarding.enable-biometrics.view :as enable-biometrics]
2020
[status-im2.contexts.onboarding.enable-notifications.view :as enable-notifications]
21+
[status-im2.contexts.onboarding.welcome.view :as welcome]
2122
[status-im2.contexts.onboarding.new-to-status.view :as new-to-status]
2223
[status-im2.contexts.onboarding.sign-in.view :as sign-in]
2324
[status-im2.contexts.onboarding.syncing.syncing-devices.view :as syncing-devices]
@@ -197,7 +198,14 @@
197198
:topBar {:visible false}
198199
:navigationBar {:backgroundColor colors/black}}
199200
:insets {:top false}
200-
:component syncing-devices/syncing-devices}]
201+
:component syncing-devices/syncing-devices}
202+
203+
{:name :welcome
204+
:options {:statusBar {:style :light}
205+
:topBar {:visible false}
206+
:navigationBar {:backgroundColor colors/black}}
207+
:insets {:top false}
208+
:component welcome/view}]
201209

202210
(when config/quo-preview-enabled?
203211
quo.preview/screens)

Diff for: ‎translations/en.json

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

0 commit comments

Comments
 (0)