diff --git a/src/status_im/contexts/onboarding/intro/style.cljs b/src/status_im/contexts/onboarding/intro/style.cljs index ce13e2215e..0a2e303fe3 100644 --- a/src/status_im/contexts/onboarding/intro/style.cljs +++ b/src/status_im/contexts/onboarding/intro/style.cljs @@ -7,9 +7,14 @@ :justify-content :flex-end}) (def text-container - {:text-align :center - :margin-top 4 - :flex-wrap :wrap}) + {:flex 1 + :flex-wrap :wrap + :text-align :center}) + +(def terms-privacy-container + {:gap 8 + :padding-horizontal 20 + :padding-vertical 8}) (def plain-text {:color colors/white-opa-70}) diff --git a/src/status_im/contexts/onboarding/intro/view.cljs b/src/status_im/contexts/onboarding/intro/view.cljs index 2497d48b24..9fe3c263e5 100644 --- a/src/status_im/contexts/onboarding/intro/view.cljs +++ b/src/status_im/contexts/onboarding/intro/view.cljs @@ -6,45 +6,71 @@ [status-im.contexts.onboarding.common.background.view :as background] [status-im.contexts.onboarding.common.overlay.view :as overlay] [status-im.contexts.onboarding.intro.style :as style] + [status-im.contexts.onboarding.privacy.view :as privacy] [status-im.contexts.onboarding.terms.view :as terms] [utils.i18n :as i18n] [utils.re-frame :as rf])) (defn view [] - [rn/view {:style style/page-container} - [background/view false] - [quo/bottom-actions - {:container-style (style/bottom-actions-container (safe-area/get-bottom)) - :actions :two-vertical-actions - :description :bottom - :description-text [quo/text - {:style style/text-container - :size :paragraph-2 - :weight :regular} - [quo/text {:style style/plain-text} - (i18n/label :t/by-continuing-you-accept)] - [quo/text - {:on-press #(rf/dispatch [:show-bottom-sheet - {:content (fn [] [terms/terms-of-use]) - :shell? true}]) - :style style/highlighted-text} - (i18n/label :t/terms-of-service)]] - :button-one-label (i18n/label :t/sync-or-recover-profile) - :button-one-props {:type :dark-grey - :accessibility-label :already-use-status-button - :on-press (fn [] - (when-let [blur-show-fn @overlay/blur-show-fn-atom] - (blur-show-fn)) - (rf/dispatch - [:open-modal - :screen/onboarding.sync-or-recover-profile]))} - :button-two-label (i18n/label :t/create-profile) - :button-two-props {:accessibility-label :new-to-status-button - :on-press - (fn [] - (when-let [blur-show-fn @overlay/blur-show-fn-atom] - (blur-show-fn)) - (rf/dispatch - [:open-modal :screen/onboarding.new-to-status]))}}] - [overlay/view]]) + (let [[terms-accepted? set-terms-accepted?] (rn/use-state false)] + [rn/view {:style style/page-container} + [background/view false] + [quo/bottom-actions + {:container-style (style/bottom-actions-container (safe-area/get-bottom)) + :actions :two-vertical-actions + :description :top + :description-top-text [rn/view + {:style style/terms-privacy-container + :flex-direction :row} + [quo/selectors + {:type :checkbox + :checked? terms-accepted? + :on-change #(set-terms-accepted? not)}] + [rn/view {:style {:flex 1}} + [quo/text + {:style style/text-container + :size :paragraph-2} + [quo/text + {:style style/plain-text + :size :paragraph-2} + (str (i18n/label :t/accept-status-tos-prefix) " ")] + [quo/text + {:on-press #(rf/dispatch [:show-bottom-sheet + {:content (fn [] [terms/terms-of-use]) + :shell? true}]) + :style style/highlighted-text + :size :paragraph-2} + (i18n/label :t/terms-of-service)] + [quo/text + {:style style/plain-text + :size :paragraph-2} + " & "] + [quo/text + {:on-press #(rf/dispatch [:show-bottom-sheet + {:content (fn [] [privacy/privacy-statement]) + :shell? true}]) + :style style/highlighted-text + :size :paragraph-2 + :weight :regular} + (i18n/label :t/intro-privacy-statement)]]]] + :button-one-label (i18n/label :t/sync-or-recover-profile) + :button-one-props {:type :dark-grey + :disabled? (not terms-accepted?) + :accessibility-label :already-use-status-button + :on-press (fn [] + (when-let [blur-show-fn @overlay/blur-show-fn-atom] + (blur-show-fn)) + (rf/dispatch + [:open-modal + :screen/onboarding.sync-or-recover-profile]))} + :button-two-label (i18n/label :t/create-profile) + :button-two-props {:accessibility-label :new-to-status-button + :disabled? (not terms-accepted?) + :on-press + (fn [] + (when-let [blur-show-fn @overlay/blur-show-fn-atom] + (blur-show-fn)) + (rf/dispatch + [:open-modal :screen/onboarding.new-to-status]))}}] + [overlay/view]]))