feat(profile): Make terms of use and privacy policy easily accessible (…

…#21759)

* Fix `:true` keyword being used in navigation screens.

* Add about screen, terms of use and privacy policy links

* Remove old about app screen

src/legacy/status_im/ui/screens/screens.cljs

@@ -1,7 +1,6 @@
 (ns legacy.status-im.ui.screens.screens
   (:require
     [legacy.status-im.ui.components.colors :as colors]
-    [legacy.status-im.ui.screens.about-app.views :as about-app]
     [legacy.status-im.ui.screens.advanced-settings.views :as advanced-settings]
     [legacy.status-im.ui.screens.appearance.views :as appearance]
     [legacy.status-im.ui.screens.backup-settings.view :as backup-settings]
@@ -93,12 +92,6 @@
                 :insets {:top? platform/android?}}
     :component sync-settings/sync-settings}
 
-   ;; ABOUT
-   {:name      :about-app
-    :options   {:topBar {:visible false}
-                :insets {:top? platform/android?}}
-    :component about-app/about-app}
-
    ;; STATUS HELP
    {:name      :help-center
     :options   {:topBar {:visible false}

src/quo/components/settings/data_item/view.cljs

@@ -16,7 +16,8 @@
     [rn/view {:style (style/loading-container size blur? theme)}]))
 
 (defn- left-subtitle
-  [{:keys [size subtitle-type subtitle-color icon icon-color blur? subtitle customization-color emoji
+  [{:keys [size subtitle-text-props subtitle-type subtitle-color icon icon-color blur? subtitle
+           customization-color emoji
            network-image]
     :or   {subtitle-type :default}}]
   (let [theme (quo.theme/use-theme)]
@@ -39,9 +40,10 @@
                      :style               style/image}]
           nil)])
      [text/text
-      {:weight :medium
-       :size   :paragraph-2
-       :style  (style/description subtitle-color blur? theme)}
+      (merge {:weight :medium
+              :size   :paragraph-2
+              :style  (style/description subtitle-color blur? theme)}
+             subtitle-text-props)
       subtitle]
      (when (= subtitle-type :editable)
        [icons/icon :i/edit
@@ -75,7 +77,8 @@
 
 (defn- left-side
   "The description can either be given as a string `subtitle-type` or a component `custom-subtitle`"
-  [{:keys [title status size blur? custom-subtitle icon subtitle subtitle-type subtitle-color icon-color
+  [{:keys [title subtitle-text-props status size blur? custom-subtitle icon subtitle subtitle-type
+           subtitle-color icon-color
            customization-color network-image emoji title-icon]
     :as   props}]
   (let [theme (quo.theme/use-theme)]
@@ -94,6 +97,7 @@
          [custom-subtitle props]
          [left-subtitle
           {:theme               theme
+           :subtitle-text-props subtitle-text-props
            :size                size
            :subtitle-type       subtitle-type
            :subtitle-color      subtitle-color
@@ -140,6 +144,7 @@
       [:size {:optional true} [:maybe [:enum :default :small :large]]]
       [:title :string]
       [:subtitle {:optional true} [:maybe [:or :string :double]]]
+      [:subtitle-text-props {:optional true} [:maybe :map]]
       [:custom-subtitle {:optional true} [:maybe fn?]]
       [:icon {:optional true} [:maybe :keyword]]
       [:title-icon {:optional true} [:maybe :keyword]]

src/status_im/common/privacy/view.cljs

@@ -1,11 +1,20 @@
 (ns status-im.common.privacy.view
   (:require-macros [legacy.status-im.utils.slurp :refer [slurp]])
   (:require [quo.core :as quo]
-            [react-native.gesture :as gesture]))
+            [react-native.gesture :as gesture]
+            [status-im.contexts.settings.common.header :as header]
+            [utils.i18n :as i18n]))
 
 (def privacy-statement-text (slurp "resources/privacy.mdwn"))
 
 (defn privacy-statement
   []
-  [gesture/scroll-view {:margin 20}
+  [gesture/scroll-view {:style {:margin 20}}
    [quo/text privacy-statement-text]])
+
+(defn view
+  []
+  [quo/overlay {:type :shell}
+   [header/view {:title (i18n/label :t/privacy-policy)}]
+   [gesture/scroll-view {:style {:padding-horizontal 20}}
+    [quo/text privacy-statement-text]]])

src/status_im/common/terms/view.cljs

@@ -1,11 +1,20 @@
 (ns status-im.common.terms.view
   (:require-macros [legacy.status-im.utils.slurp :refer [slurp]])
   (:require [quo.core :as quo]
-            [react-native.gesture :as gesture]))
+            [react-native.gesture :as gesture]
+            [status-im.contexts.settings.common.header :as header]
+            [utils.i18n :as i18n]))
 
 (def terms-of-use-text (slurp "resources/terms-of-use.mdwn"))
 
 (defn terms-of-use
   []
-  [gesture/scroll-view {:margin 20}
+  [gesture/scroll-view {:style {:margin 20}}
    [quo/text terms-of-use-text]])
+
+(defn view
+  []
+  [quo/overlay {:type :shell}
+   [header/view {:title (i18n/label :t/terms-of-service)}]
+   [gesture/scroll-view {:style {:padding-horizontal 20}}
+    [quo/text terms-of-use-text]]])

src/status_im/constants.cljs

@@ -642,3 +642,9 @@
 (def ^:const wallet-connect-transaction-refresh-interval-ms 10000)
 
 (def ^:const native-token-symbol "ETH")
+
+;; About app links
+(def ^:const status-app-url "http://status.app")
+(def ^:const go-waku-url "https://github.com/waku-org/go-waku")
+(def ^:const status-go-url "https://github.com/status-im/status-go")
+(def ^:const status-mobile-url "https://github.com/status-im/status-mobile")

src/status_im/contexts/profile/settings/list_items.cljs

@@ -125,7 +125,7 @@
        :blur?       true
        :image-props :i/light})]
    [{:title    (i18n/label :t/about)
-     :on-press #(rf/dispatch [:open-modal :about-app])
+     :on-press #(rf/dispatch [:open-modal :screen/settings.about])
      :action   :arrow
      :blur?    true}
     {:title    (i18n/label :t/status-help)

src/status_im/contexts/settings/about/style.cljs

@@ -0,0 +1,9 @@
+(ns status-im.contexts.settings.about.style)
+
+(def category-spacing {:padding-bottom 12})
+
+(def app-info-container
+  {:padding-horizontal 20
+   :padding-top        8
+   :padding-bottom     16
+   :row-gap            16})

src/status_im/contexts/settings/about/view.cljs

@@ -0,0 +1,101 @@
+(ns status-im.contexts.settings.about.view
+  (:require [quo.core :as quo]
+            [react-native.core :as rn]
+            [status-im.constants :as constants]
+            [status-im.contexts.settings.about.style :as style]
+            [status-im.contexts.settings.common.header :as header]
+            [utils.i18n :as i18n]
+            [utils.re-frame :as rf]))
+
+(defn- open-link
+  [url]
+  (rf/dispatch [:browser.ui/open-url url]))
+
+(defn- copy
+  [data item-name]
+  (rf/dispatch [:share/copy-text-and-show-toast
+                {:text-to-copy      data
+                 :post-copy-message (str item-name
+                                         " "
+                                         (i18n/label :t/sharing-copied-to-clipboard))}]))
+
+(def about-data
+  [{:app-info? true}
+   {:category-label (i18n/label :t/website)
+    :items          [{:title        "status.app"
+                      :on-press     #(open-link constants/status-app-url)
+                      :blur?        true
+                      :action       :arrow
+                      :action-props {:icon :i/external}}]}
+   {:category-label (i18n/label :t/github-repos)
+    :items          [{:title        "status-mobile"
+                      :on-press     #(open-link constants/status-mobile-url)
+                      :blur?        true
+                      :action       :arrow
+                      :action-props {:icon :i/external}}
+                     {:title        "status-go"
+                      :on-press     #(open-link constants/status-go-url)
+                      :blur?        true
+                      :action       :arrow
+                      :action-props {:icon :i/external}}
+                     {:title        "go-waku"
+                      :on-press     #(open-link constants/go-waku-url)
+                      :blur?        true
+                      :action       :arrow
+                      :action-props {:icon :i/external}}]}
+   {:category-label (i18n/label :t/documents)
+    :items          [{:title    (i18n/label :t/privacy-policy)
+                      :on-press #(rf/dispatch [:open-modal :screen/settings.privacy-policy])
+                      :blur?    true
+                      :action   :arrow}
+                     {:title    (i18n/label :t/terms-of-service)
+                      :on-press #(rf/dispatch [:open-modal :screen/settings.terms-of-use])
+                      :blur?    true
+                      :action   :arrow}]}])
+
+(defn info-item
+  [{:keys [title info]}]
+  [quo/data-item
+   {:size                :default
+    :status              :default
+    :right-icon          :i/copy
+    :card?               true
+    :blur?               true
+    :title               title
+    :on-press            #(copy info title)
+    :subtitle            info
+    :subtitle-type       :default
+    :subtitle-text-props {:number-of-lines 1
+                          :ellipsize-mode  :middle}}])
+
+(defn- app-info
+  []
+  (let [app-version  (rf/sub [:get-app-short-version])
+        commit-hash  (rf/sub [:get-commit-hash])
+        node-version (rf/sub [:get-app-node-version])]
+    [rn/view {:style style/app-info-container}
+     [info-item {:title (i18n/label :t/version) :info app-version}]
+     [info-item {:title (i18n/label :t/app-commit) :info commit-hash}]
+     [info-item {:title (i18n/label :t/node-version) :info node-version}]]))
+
+(defn category
+  [{:keys [app-info? category-label items]}]
+  (if app-info?
+    [app-info]
+    [quo/category
+     {:label           category-label
+      :list-type       :settings
+      :container-style style/category-spacing
+      :blur?           true
+      :data            items}]))
+
+(defn view
+  []
+  [quo/overlay {:type :shell}
+   [header/view {:title (i18n/label :t/about)}]
+   [rn/flat-list
+    {:data                            about-data
+     :shows-vertical-scroll-indicator false
+     :render-fn                       category
+     :bounces                         false
+     :over-scroll-mode                :never}]])

src/status_im/contexts/settings/common/header.cljs

@@ -0,0 +1,14 @@
+(ns status-im.contexts.settings.common.header
+  (: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]))
+
+(defn view
+  [{:keys [title]}]
+  [rn/view {:style {:padding-top (safe-area/get-top)}}
+   [quo/page-nav
+    {:background :blur
+     :icon-name  :i/arrow-left
+     :on-press   events-helper/navigate-back}]
+   [quo/page-top {:title title}]])