Implement onboarding share usage data screen

This commit is contained in:
Parvesh Monu 2024-11-27 03:27:27 +05:30
parent 91761a92c7
commit 338b241c8e
No known key found for this signature in database
GPG Key ID: F399696520817DE9
15 changed files with 183 additions and 170 deletions

View File

@ -2,11 +2,12 @@
(defn container
[container-style]
(merge container-style
{:padding-vertical 7
:padding-horizontal 20
:flex-direction :row
:align-items :flex-start}))
(merge
{:padding-vertical 7
:padding-horizontal 20
:flex-direction :row
:align-items :flex-start}
container-style))
(def index
{:margin-left 5})

View File

@ -41,7 +41,7 @@
(defn view
[{:keys [title description tag-picture tag-name description-after-tag step-number
customization-color type blur? container-style]
customization-color type blur? container-style icon icon-props]
:or {type :bullet}}]
(let [theme (quo.theme/use-theme)]
[rn/view {:style (style/container container-style)}
@ -54,6 +54,8 @@
:type (if customization-color :complete :neutral)} step-number]
:lock
[icon/icon :i/locked {:color (get-colors theme blur?)}]
:custom-icon
[icon/icon icon icon-props]
[icon/icon :i/bullet {:color (get-colors theme blur?)}])]
[rn/view {:style style/text-container}
(when title

View File

@ -1,19 +0,0 @@
(ns status-im.common.metrics-confirmation-modal.style)
(def points-wrapper
{:margin-top 11
:margin-horizontal 20
:gap 21
:margin-bottom 8})
(def item-text
{:margin-left -24})
(def info-text
{:margin-top -5})
(def privacy-policy
{:margin-top 4
:margin-horizontal 20
:margin-bottom 20
:align-items :center})

View File

@ -1,119 +0,0 @@
(ns status-im.common.metrics-confirmation-modal.view
(:require
[quo.core :as quo]
[quo.foundations.colors :as colors]
[quo.theme]
[react-native.core :as rn]
[status-im.common.metrics-confirmation-modal.style :as style]
[status-im.common.privacy.view :as privacy]
[utils.i18n :as i18n]
[utils.re-frame :as rf]))
(defn- dismiss-keyboard
[]
(rf/dispatch [:dismiss-keyboard]))
(defn- hide-bottom-sheet
[]
(rf/dispatch [:hide-bottom-sheet]))
(def ^:private will-receive-for-current-points
[:t/number-of-messages-sent
:t/connected-peers
:t/successful-messages-rate
:t/connection-type
:t/os-app-version-bandwidth])
(def ^:private will-receive-for-all-points
[:t/action-logs
:t/ip-addresses-uuid])
(def ^:private not-receive-points
[:t/your-profile-information
:t/your-addresses
:t/information-you-input-and-send])
(defn- bullet-points
[{:keys [title points lock?]}]
[rn/view
[quo/text {:weight :semi-bold}
title]
(for [label points]
^{:key label}
[quo/markdown-list
{:description (i18n/label label)
:blur? true
:type (when lock? :lock)
:container-style style/item-text}])])
(defn- on-share-usage
[]
(rf/dispatch [:centralized-metrics/toggle-centralized-metrics true true])
(hide-bottom-sheet))
(defn- on-do-not-share
[]
(rf/dispatch [:centralized-metrics/toggle-centralized-metrics false true])
(hide-bottom-sheet))
(declare view)
(defn- on-privacy-policy-press
[]
(rf/dispatch
[:show-bottom-sheet
{:content privacy/privacy-statement
:on-close (fn []
(rf/dispatch [:show-bottom-sheet
{:content view
:theme :dark
:shell? true}]))
:theme :dark
:shell? true}]))
(defn- privacy-policy-text
[]
[rn/view {:style style/privacy-policy}
[quo/text
[quo/text
{:style {:color colors/white-opa-50}
:size :paragraph-2}
(i18n/label :t/more-details-in-privacy-policy-1)]
[quo/text
{:size :paragraph-2
:weight :bold
:on-press on-privacy-policy-press}
(i18n/label :t/more-details-in-privacy-policy-2)]]])
(defn view
[]
(rn/use-mount #(dismiss-keyboard))
[:<>
[quo/drawer-top
{:title (i18n/label :t/help-us-improve-status)
:description (i18n/label :t/collecting-usage-data)}]
[rn/scroll-view
[rn/view {:style style/points-wrapper}
[bullet-points
{:title (i18n/label :t/we-will-receive-from-all-profiles)
:points will-receive-for-all-points}]
[bullet-points
{:title (i18n/label :t/we-will-receive-from-the-current-profile)
:points will-receive-for-current-points}]
[bullet-points
{:title (i18n/label :t/what-we-wont-receive)
:points not-receive-points
:lock? true}]
[quo/text
{:size :paragraph-2
:style style/info-text}
(i18n/label :t/sharing-usage-data-can-be-turned-off)]]]
[quo/bottom-actions
{:actions :two-actions
:blur? true
:button-one-label (i18n/label :t/help-us-improve-status)
:button-one-props {:on-press on-share-usage}
:button-two-label (i18n/label :t/not-now)
:button-two-props {:type :grey
:on-press on-do-not-share}}]
[privacy-policy-text]])

View File

@ -36,18 +36,10 @@
(assoc :centralized-metrics/enabled? enabled?)
(assoc :centralized-metrics/onboarding-enabled? (and onboarding? enabled?)))}))
(rf/reg-event-fx :centralized-metrics/check-modal
(fn [{:keys [db]} [modal-view]]
(rf/reg-event-fx :centralized-metrics/check-user-confirmation
(fn [{:keys [db]}]
(when-not (:centralized-metrics/user-confirmed? db)
{:fx [[:dispatch
[:show-bottom-sheet
{:content (fn [] [modal-view])
;; When in the profiles screen do biometric auth after the metrics sheet is dismissed
;; https://github.com/status-im/status-mobile/issues/20932
:on-close (when (= (:view-id db) :screen/profile.profiles)
#(rf/dispatch [:profile.login/login-with-biometric-if-available
(get-in db [:profile/login :key-uid])]))
:shell? true}]]]})))
{:fx [[:dispatch [:navigate-to :screen/onboarding.share-usage]]]})))
(rf/reg-fx :effects.centralized-metrics/track
(fn [event]

View File

@ -5,7 +5,7 @@
[react-native.core :as rn]
[react-native.safe-area :as safe-area]
[status-im.common.check-before-syncing.view :as check-before-syncing]
[status-im.common.metrics-confirmation-modal.view :as metrics-modal]
[status-im.common.events-helper :as events-helper]
[status-im.common.resources :as resources]
[status-im.config :as config]
[status-im.contexts.onboarding.create-or-sync-profile.style :as style]
@ -142,18 +142,12 @@
[use-empty-keycard-icon-card]
[log-in-with-keycard-icon-card])]))
(defn- navigate-back
[]
(rf/dispatch [:onboarding/overlay-dismiss])
(rf/dispatch [:navigate-back]))
(defn- navigate-to-quo-preview
[]
(rf/dispatch [:navigate-to :quo-preview]))
(defn- internal-view
[sign-in-type]
(rn/use-mount #(rf/dispatch [:centralized-metrics/check-modal metrics-modal/view]))
(let [{:keys [top]} (safe-area/get-insets)]
[rn/view {:style style/content-container}
[quo/page-nav
@ -161,7 +155,7 @@
:type :no-title
:background :blur
:icon-name :i/arrow-left
:on-press navigate-back
:on-press events-helper/navigate-back
:right-side [{:icon-name :i/info
:on-press getting-started-doc/show-as-bottom-sheet}
(when config/quo-preview-enabled?

View File

@ -52,13 +52,16 @@
[]
(when-let [blur-show-fn @overlay/blur-show-fn-atom]
(blur-show-fn))
(rf/dispatch [:open-modal :screen/onboarding.sync-or-recover-profile]))
(rf/dispatch [:open-modal
:screen/onboarding.share-usage
{:next-screen :screen/onboarding.sync-or-recover-profile}]))
(defn- create-profile
[]
(when-let [blur-show-fn @overlay/blur-show-fn-atom]
(blur-show-fn))
(rf/dispatch [:open-modal :screen/onboarding.new-to-status]))
(rf/dispatch [:open-modal :screen/onboarding.share-usage
{:next-screen :screen/onboarding.new-to-status}]))
(defn view
[]

View File

@ -0,0 +1,58 @@
(ns status-im.contexts.onboarding.share-usage.learn-more-sheet
(:require
[quo.core :as quo]
[quo.foundations.colors :as colors]
[quo.theme]
[react-native.core :as rn]
[status-im.common.terms.view :as terms]
[utils.i18n :as i18n]
[utils.re-frame :as rf]))
(def ^:private bullet-points-data
[[:t/help-us-improve-status-bullet-point-1 true]
[:t/help-us-improve-status-bullet-point-2 true]
[:t/help-us-improve-status-bullet-point-3 false]
[:t/help-us-improve-status-bullet-point-4 false]
[:t/help-us-improve-status-bullet-point-5 false]])
(defn- privacy-policy-text
[]
[rn/view {:style {:margin-horizontal 20 :margin-vertical 8}}
[quo/text
[quo/text
{:style {:color colors/white-opa-50}
:size :paragraph-2}
(i18n/label :t/more-details-in-privacy-policy-1-onboarding)]
[quo/text
{:size :paragraph-2
:weight :bold
:on-press #(rf/dispatch [:show-bottom-sheet {:content terms/terms-of-use :shell? true}])}
(i18n/label :t/more-details-in-privacy-policy-2)]]])
(defn- bullet-points
[]
[:<>
(for [[label collected?] bullet-points-data]
^{:key label}
[quo/markdown-list
{:description (i18n/label label)
:blur? true
:type :custom-icon
:container-style {:padding-vertical 5}
:icon (if collected? :i/check-circle :i/clear)
:icon-props (if collected?
{:no-color true}
{:size 20 :color colors/danger-60 :color-2 colors/white})}])])
(defn view
[]
[:<>
[quo/drawer-top
{:title (i18n/label :t/help-us-improve-status)}]
[quo/text
{:size :paragraph-1
:style {:padding-horizontal 20}}
(i18n/label :t/help-us-improve-status-subtitle)]
[rn/view {:style {:padding-vertical 8}}
[bullet-points]]
[privacy-policy-text]])

View File

@ -0,0 +1,18 @@
(ns status-im.contexts.onboarding.share-usage.style)
(def title-container
{:margin-horizontal 20
:padding-bottom 20
:padding-top 12})
(defn page-illustration
[width]
{:flex 1
:margin-top 12
:margin-bottom 10
:width width})
(defn buttons
[insets]
{:margin 20
:margin-bottom (+ 12 (:bottom insets))})

View File

@ -0,0 +1,62 @@
(ns status-im.contexts.onboarding.share-usage.view
(:require
[quo.core :as quo]
[react-native.core :as rn]
[react-native.safe-area :as safe-area]
[status-im.common.events-helper :as events-helper]
[status-im.common.resources :as resources]
[status-im.contexts.onboarding.share-usage.learn-more-sheet :as learn-more-sheet]
[status-im.contexts.onboarding.share-usage.style :as style]
[utils.i18n :as i18n]
[utils.re-frame :as rf]))
(defn- share-usage-data-fn
[enabled? next-screen]
(rf/dispatch [:centralized-metrics/toggle-centralized-metrics enabled? true])
(if next-screen
(rf/dispatch [:navigate-to-within-stack [next-screen :screen/onboarding.share-usage]]) ;; Onboarding
(rf/dispatch [:navigate-back]))) ;; Login Screen
(defn view
[]
(let [insets (safe-area/get-insets)
next-screen (:next-screen (rf/sub [:get-screen-params :screen/onboarding.share-usage]))
share-usage-data (rn/use-callback #(share-usage-data-fn true next-screen))
maybe-later (rn/use-callback #(share-usage-data-fn false next-screen))
learn-more (rn/use-callback #(rf/dispatch [:show-bottom-sheet
{:content learn-more-sheet/view
:shell? true}]))]
[:<>
[quo/page-nav
{:margin-top (:top insets)
:background :blur
:icon-name :i/arrow-left
:on-press events-helper/navigate-back
:right-side [{:icon-left :i/info
:accessibility-label :learn-more
:label (i18n/label :t/learn-more)
:on-press learn-more}]}]
[quo/text-combinations
{:container-style style/title-container
:title (i18n/label :t/help-us-improve-status)
:title-accessibility-label :share-usage-title
:description (i18n/label :t/collecting-usage-data)
:description-accessibility-label :share-usage-subtitle}]
[rn/image
{:resize-mode :contain
:style (style/page-illustration (:width (rn/get-window)))
:source (resources/get-image :biometrics)}]
[rn/view {:style (style/buttons insets)}
[quo/button
{:size 40
:accessibility-label :share-usage-data
:on-press share-usage-data}
(i18n/label :t/agree)]
[quo/button
{:size 40
:accessibility-label :maybe-later-button
:background :blur
:type :grey
:on-press maybe-later
:container-style {:margin-top 12}}
(i18n/label :t/maybe-later)]]]))

View File

@ -7,7 +7,6 @@
[react-native.reanimated :as reanimated]
[react-native.safe-area :as safe-area]
[status-im.common.confirmation-drawer.view :as confirmation-drawer]
[status-im.common.metrics-confirmation-modal.view :as metrics-modal]
[status-im.common.standard-authentication.core :as standard-authentication]
[status-im.config :as config]
[status-im.constants :as constants]
@ -277,10 +276,10 @@
(defn view
[]
(rn/use-mount #(rf/dispatch [:centralized-metrics/check-modal metrics-modal/view]))
(let [[show-profiles? set-show-profiles] (rn/use-state true)
show-profiles (rn/use-callback #(set-show-profiles true))
hide-profiles (rn/use-callback #(set-show-profiles false))]
(rn/use-mount #(rf/dispatch [:centralized-metrics/check-user-confirmation]))
[:<>
[background/view true]
(if show-profiles?

View File

@ -43,4 +43,4 @@
:stickers/packs-pending #{}
:settings/change-password {}
:keycard {}
:theme :light})
:theme :dark})

View File

@ -103,8 +103,8 @@
(rf/defn show-next-bottom-sheet
{:events [:show-next-bottom-sheet]}
[_]
{:show-bottom-sheet nil})
[{:keys [db] :as cofx}]
{:show-bottom-sheet {:theme (:theme db)}})
(rf/defn show-bottom-sheet
{:events [:show-bottom-sheet]}

View File

@ -49,6 +49,7 @@
[status-im.contexts.onboarding.identifiers.view :as identifiers]
[status-im.contexts.onboarding.intro.view :as intro]
[status-im.contexts.onboarding.preparing-status.view :as preparing-status]
[status-im.contexts.onboarding.share-usage.view :as onboarding.share-usage]
[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]
@ -769,6 +770,18 @@
:popStackOnPress false}}
:component enable-biometrics/view})
(def onboarding-share-usage
{:name :screen/onboarding.share-usage
:metrics {:track? true}
:options {:theme :dark
:layout options/onboarding-transparent-layout
:animations (merge
transitions/new-to-status-modal-animations
transitions/push-animations-for-transparent-background)
:popGesture false
:modalPresentationStyle :overCurrentContext}
:component onboarding.share-usage/view})
(def onboarding-preparing-status
{:name :screen/onboarding.preparing-status
:metrics {:track? true}
@ -873,6 +886,7 @@
onboarding-entering-seed-phrase
onboarding-enable-notifications
onboarding-identifiers
onboarding-share-usage
onboarding-sign-in-intro
onboarding-sign-in
onboarding-syncing-progress

View File

@ -108,6 +108,7 @@
"advertiser-starter-pack-description": "Heres some crypto to get you started! Use it to get stickers, an ENS name and try dapps",
"advertiser-starter-pack-title": "Starter Pack",
"advertiser-title": "Privacy by default",
"agree": "Agree",
"agree-by-continuing": "By continuing you agree\n to our ",
"airdrop-addresses": "Address for airdrops",
"album-images-count": "{{album-images-count}} photos",
@ -1148,6 +1149,12 @@
"help-center": "Help Center",
"help-improve-status": "Help improve Status",
"help-us-improve-status": "Help us improve Status",
"help-us-improve-status-bullet-point-1": "Collect basic usage data like taps and page views",
"help-us-improve-status-bullet-point-2": "Collect core diagnostics, like bandwidth usage",
"help-us-improve-status-bullet-point-3": "Never collect your profile information or wallet address",
"help-us-improve-status-bullet-point-4": "Never collect information you input or send",
"help-us-improve-status-bullet-point-5": "Never sell your usage analytics data",
"help-us-improve-status-subtitle": "Well collect anonymous analytics and diagnostics from your app to enhance Statuss quality and performance.",
"here-is-a-cat-in-a-box-instead": "Heres a cat in a box instead",
"hex": "Hex",
"hide": "Hide",
@ -1637,6 +1644,7 @@
"more": "more",
"more-details": "More details",
"more-details-in-privacy-policy-1": "For more details refer to our ",
"more-details-in-privacy-policy-1-onboarding": "For more details and other cases where we handle your data, refer to our ",
"more-details-in-privacy-policy-2": "Privacy Policy",
"more-details-in-privacy-policy-settings-1": "For details on this and other potential limited data processing by Status, see our ",
"move-and-reset": "Move and Reset",