New users TOS opt in fixes #12206

Author: shivekkhurana

src/status_im/ui/screens/onboarding/intro/styles.cljs

@@ -41,18 +41,3 @@
 (def wizard-title
   {:margin-bottom 16
    :text-align    :center})
-
-(def buttons-container
-  {:align-items        :center
-   :padding-horizontal 32})
-
-(def bottom-button
-  {:padding-horizontal 24
-   :justify-content    :center
-   :align-items        :center
-   :flex-direction     :row})
-
-(def welcome-text-bottom-note
-  {:typography  :caption
-   :color       colors/gray
-   :text-align  :center})

src/status_im/ui/screens/onboarding/intro/views.cljs

@@ -1,5 +1,6 @@
 (ns status-im.ui.screens.onboarding.intro.views
   (:require [quo.animated :as animated]
+            [quo.react-native :as rn]
             [status-im.ui.screens.onboarding.intro.styles :as styles]
             [status-im.ui.components.react :as react]
             [reagent.core :as reagent]
@@ -133,6 +134,8 @@
        [dots-selector {:progress progress
                        :n        (count slides)}]])))
 
+(defonce tos-accepted (reagent/atom false))
+
 (defn intro []
   [react/view {:style styles/intro-view}
    [carousel [{:image (resources/get-theme-image :chat)
@@ -145,13 +148,25 @@
                :title :intro-title3
                :text  :intro-text3}]
     @(re-frame/subscribe [:dimensions/window-width])]
-   [react/view styles/buttons-container
-    [react/view {:style (assoc styles/bottom-button :margin-bottom 16)}
-     [quo/button {:on-press #(re-frame/dispatch [:init-root :onboarding])}
+   [react/view {:style {:align-items :center}}
+    [react/view {:flex-direction  :row
+                 :justify-content :space-between
+                 :margin-top      36
+                 :margin-bottom   24}
+     [quo/checkbox {:value     @tos-accepted
+                    :on-change #(swap! tos-accepted not)}]
+     [rn/touchable-opacity {:on-press #(swap! tos-accepted not)}
+      [react/nested-text {:style {:margin-left 12}}
+       (i18n/label :t/accept-status-tos-prefix)
+       [{:style    {:color colors/blue}
+         :on-press #(re-frame/dispatch [:open-modal :terms-of-service])}
+        " "
+        (i18n/label :t/terms-of-service)]]]]
+    [react/view {:style {:margin-bottom 24}}
+     [quo/button {:disabled (not @tos-accepted)
+                  :on-press #(re-frame/dispatch [:init-root :onboarding])}
       (i18n/label :t/get-started)]]
-    [react/nested-text
-     {:style styles/welcome-text-bottom-note}
-     (i18n/label :t/intro-privacy-policy-note1)
-     [{:style    (assoc styles/welcome-text-bottom-note :color colors/blue)
-       :on-press #(re-frame/dispatch [:open-modal :privacy-policy])}
-      (i18n/label :t/intro-privacy-policy-note2)]]]])
+    [react/text
+     {:style    {:color      colors/blue}
+      :on-press #(re-frame/dispatch [:open-modal :privacy-policy])}
+     (i18n/label :t/privacy-policy)]]])

translations/en.json

@@ -1578,5 +1578,6 @@
     "new-password": "New password",
     "confirm-new-password": "Confirm new password",
     "password-mismatch": "New password and confirmation does not match",
-    "terms-of-service": "Terms of service"
+    "terms-of-service": "Terms of service",
+    "accept-status-tos-prefix": "I accept Status"
 }