Skip to content

Commit d24200a

Browse files
seanstromseanstrom
committed
wip: adjust enable-notifications screen and flows
1 parent fcdf8d5 commit d24200a

File tree

6 files changed

+362
-98
lines changed

6 files changed

+362
-98
lines changed

‎src/status_im/contexts/onboarding/enable_biometrics/view.cljs‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -22,25 +22,28 @@
2222
[insets]
2323
(let [supported-biometric-type (rf/sub [:biometrics/supported-type])
2424
bio-type-label (biometric/get-label-by-type supported-biometric-type)
25-
profile-color (or (:color (rf/sub [:onboarding/profile]))
25+
onboarding-profile (rf/sub [:onboarding/profile])
26+
profile-color (or (:color onboarding-profile)
2627
(rf/sub [:profile/customization-color]))
27-
syncing? (= (rf/sub [:view-id]) :screen/onboarding.syncing-biometric)
28+
syncing? (:syncing? onboarding-profile)
2829
biometric-type (rf/sub [:biometrics/supported-type])]
2930
[rn/view {:style (style/buttons insets)}
3031
[quo/button
3132
{:size 40
3233
:accessibility-label :enable-biometrics-button
3334
:icon-left (biometric/get-icon-by-type biometric-type)
3435
:customization-color profile-color
35-
:on-press #(rf/dispatch [:onboarding/enable-biometrics])}
36+
:on-press #(rf/dispatch [:onboarding/biometrics-setup-start
37+
{:enable-biometrics? true
38+
:syncing? syncing?}])}
3639
(i18n/label :t/biometric-enable-button {:bio-type-label bio-type-label})]
3740
[quo/button
3841
{:accessibility-label :maybe-later-button
3942
:background :blur
4043
:type :grey
41-
:on-press #(rf/dispatch (if syncing?
42-
[:onboarding/finish-onboarding false]
43-
[:onboarding/create-account-and-login]))
44+
:on-press #(rf/dispatch [:onboarding/biometrics-setup-start
45+
{:enable-biometrics? false
46+
:syncing? syncing?}])
4447
:container-style {:margin-top 12}}
4548
(i18n/label :t/maybe-later)]]))
4649

‎src/status_im/contexts/onboarding/enable_notifications/style.cljs‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,3 +24,20 @@
2424
[insets]
2525
{:margin default-margin
2626
:margin-bottom (+ 14 (:bottom insets))})
27+
28+
(def background-image
29+
{:position :absolute
30+
:top 0
31+
:bottom 0
32+
:left 0
33+
:right 0})
34+
35+
(def news-notifications-checkbox-container
36+
{:flex-direction :row
37+
:gap 8
38+
:padding-top 8
39+
:padding-bottom 12
40+
:padding-horizontal 20})
41+
42+
(def news-notifications-checkbox-text
43+
{:flex 1})

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

Lines changed: 96 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,12 @@
11
(ns status-im.contexts.onboarding.enable-notifications.view
22
(:require
3+
[quo.context]
34
[quo.core :as quo]
45
[react-native.core :as rn]
6+
[react-native.platform :as platform]
57
[react-native.safe-area :as safe-area]
68
[status-im.common.resources :as resources]
9+
[status-im.contexts.onboarding.common.background.view :as background]
710
[status-im.contexts.onboarding.enable-notifications.style :as style]
811
[utils.i18n :as i18n]
912
[utils.re-frame :as rf]))
@@ -17,51 +20,106 @@
1720
:description (i18n/label :t/enable-notifications-sub-title)
1821
:description-accessibility-label :notifications-sub-title}])
1922

20-
(defn enable-notification-buttons
21-
[{:keys [insets]}]
22-
(let [profile-color (rf/sub [:onboarding/customization-color])
23-
ask-permission (fn []
24-
(rf/dispatch
25-
[:request-notifications
26-
{:on-allowed (fn []
27-
(js/setTimeout
28-
#(rf/dispatch [:onboarding/finish-onboarding true])
29-
300))
30-
:on-denied (fn []
31-
(js/setTimeout
32-
#(rf/dispatch [:onboarding/finish-onboarding false])
33-
300))}]))
34-
skip-permission #(rf/dispatch [:onboarding/finish-onboarding false])]
35-
[rn/view {:style (style/buttons insets)}
36-
[quo/button
37-
{:on-press ask-permission
38-
:type :primary
39-
:icon-left :i/notifications
40-
:accessibility-label :enable-notifications-button
41-
:customization-color profile-color}
42-
(i18n/label :t/intro-wizard-title6)]
43-
[quo/button
44-
{:on-press skip-permission
45-
:accessibility-label :enable-notifications-later-button
46-
:type :grey
47-
:background :blur
48-
:container-style {:margin-top 12}}
49-
(i18n/label :t/maybe-later)]]))
23+
(defn on-notifications-setup-start
24+
[params]
25+
(rf/dispatch [:onboarding/notifications-setup-start params]))
5026

51-
(defn enable-notifications-simple
27+
(defn notifications-info-view
28+
[{:keys [blur?]}]
29+
[quo/documentation-drawers
30+
{:title "Enable Notifications"
31+
:show-button? true
32+
:shell? blur?
33+
:button-label (i18n/label :t/read-more)
34+
:button-icon :i/info}
35+
[quo/text "Describe how using Firebase affects privacy."]])
36+
37+
(defn on-open-info
38+
[{:keys [blur? theme]
39+
:or {blur? true}}]
40+
(rf/dispatch [:show-bottom-sheet
41+
{:content (fn []
42+
[notifications-info-view {:blur? blur?}])
43+
:theme theme
44+
:shell? blur?}]))
45+
46+
(defn enable-notification-form
47+
[{:keys [insets params]}]
48+
(let [profile-color (rf/sub [:onboarding/customization-color])
49+
[third-party-checked?
50+
set-third-party-checked] (rn/use-state true)
51+
on-enable-notifications (rn/use-callback
52+
(fn []
53+
(on-notifications-setup-start
54+
(assoc params
55+
:enable-notifications? true
56+
:enable-news-notifications? third-party-checked?)))
57+
[params third-party-checked?])
58+
on-skip-notifications (rn/use-callback
59+
(fn []
60+
(on-notifications-setup-start
61+
(assoc params
62+
:enable-notifications? false
63+
:enable-news-notifications? false))))]
64+
[rn/view
65+
(when platform/android?
66+
[rn/view
67+
{:style style/news-notifications-checkbox-container}
68+
[quo/selectors
69+
{:type :checkbox
70+
:blur? true
71+
:checked? third-party-checked?
72+
:on-change set-third-party-checked}]
73+
[quo/text
74+
{:size :paragraph-2
75+
:style style/news-notifications-checkbox-text}
76+
(i18n/label :t/enable-news-notifications-third-party)]])
77+
[rn/view {:style (style/buttons insets)}
78+
[quo/button
79+
{:on-press on-enable-notifications
80+
:type :primary
81+
:icon-left :i/notifications
82+
:accessibility-label :enable-notifications-button
83+
:customization-color profile-color}
84+
(i18n/label :t/intro-wizard-title6)]
85+
[quo/button
86+
{:on-press on-skip-notifications
87+
:accessibility-label :enable-notifications-later-button
88+
:type :grey
89+
:background :blur
90+
:container-style {:margin-top 12}}
91+
(i18n/label :t/maybe-later)]]]))
92+
93+
(defn enable-notifications-illustration
5294
[]
5395
(let [width (:width (rn/get-window))]
5496
[rn/image
5597
{:resize-mode :contain
5698
:style (style/page-illustration width)
5799
:source (resources/get-image :notifications)}]))
58100

101+
(defn background-image
102+
[]
103+
[rn/view {:style style/background-image}
104+
[background/view true]])
105+
59106
(defn view
60107
[]
61-
(let [insets safe-area/insets]
62-
[rn/view {:style (style/page-container insets)}
63-
[rn/view {:style style/page-heading}
64-
[quo/page-nav {:type :no-title :background :blur}]
65-
[page-title]]
66-
[enable-notifications-simple]
67-
[enable-notification-buttons {:insets insets}]]))
108+
(let [insets safe-area/insets
109+
params (quo.context/use-screen-params)]
110+
[:<>
111+
(when-not (:onboarding? params)
112+
[background-image])
113+
[rn/view {:style (style/page-container insets)}
114+
[rn/view {:style style/page-heading}
115+
[quo/page-nav
116+
{:type :no-title
117+
:background :blur
118+
:right-side [{:icon-name :i/info
119+
:on-press on-open-info
120+
:accessibility-label :notifications-info-button}]}]
121+
[page-title]]
122+
[enable-notifications-illustration]
123+
[enable-notification-form
124+
{:insets insets
125+
:params params}]]]))

0 commit comments

Comments
 (0)