feat: add bottom sheet to see community rules (#15130)

src/status_im2/contexts/communities/menus/community_options/view.cljs

@@ -2,6 +2,7 @@
   (:require [utils.i18n :as i18n]
             [utils.re-frame :as rf]
             [quo2.core :as quo]
+            [status-im2.contexts.communities.menus.see-rules.view :as see-rules]
             [status-im2.contexts.communities.menus.leave.view :as leave-menu]))
 
 (defn hide-sheet-and-dispatch
@@ -22,7 +23,9 @@
   {:icon                :i/bullet-list
    :right-icon          :i/chevron-right
    :accessibility-label :view-community-rules
-   :on-press            #(js/alert (str "implement action" id))
+   :on-press            #(rf/dispatch [:bottom-sheet/show-sheet
+                                       {:content        (constantly [see-rules/view id])
+                                        :content-height 400}])
    :label               (i18n/label :t/view-community-rules)})
 
 (defn view-token-gating

src/status_im2/contexts/communities/menus/community_rules_list/style.cljs

@@ -0,0 +1,31 @@
+(ns status-im2.contexts.communities.menus.community-rules-list.style
+  (:require [quo2.foundations.colors :as colors]))
+
+(def community-rule
+  {:height           18
+   :width            18
+   :margin-left      1
+   :margin-right     9
+   :background-color colors/white
+   :border-color     colors/neutral-20
+   :border-width     1
+   :border-radius    6})
+
+(def community-rule-container
+  {:flex       1
+   :margin-top 16})
+
+(def inner-community-rule-container
+  {:flex           1
+   :flex-direction :row
+   :align-items    :center})
+
+(def community-rule-text
+  {:margin-left   :auto
+   :margin-right  :auto
+   :margin-top    :auto
+   :margin-bottom :auto})
+
+(def community-rule-sub-text
+  {:margin-left 28
+   :margin-top  1})

src/status_im2/contexts/communities/menus/community_rules_list/view.cljs

@@ -0,0 +1,62 @@
+(ns status-im2.contexts.communities.menus.community-rules-list.view
+  (:require [react-native.core :as rn]
+            [status-im2.contexts.communities.menus.community-rules-list.style :as style]
+            [quo2.core :as quo]))
+
+;; TODO: update with real data
+(def rules
+  [{:index 1
+    :title "Be respectful"
+    :content
+    "You must respect all users, regardless of your liking towards them. Treat others the way you want to be treated."}
+   {:index 2
+    :title "No Inappropriate Language"
+    :content
+    "The use of profanity should be kept to a minimum. However, any derogatory language towards any user is prohibited."}
+   {:index 3
+    :title "No spamming"
+    :content
+    "Don't send a lot of small messages right after each other. Do not disrupt chat by spamming."}
+   {:index   4
+    :title   "No pornographic, adult or NSFW material"
+    :content "This is a community server and not meant to share this kind of material."}
+   {:index 5
+    :title "No advertisements"
+    :content
+    "We do not tolerate any kind of advertisements, whether it be for other communities or streams."}
+   {:index   6
+    :title   "No offensive names and profile pictures"
+    :content "You will be asked to change your name or picture if the staff deems them inappropriate."}])
+
+(defn community-rule-item
+  [{:keys [title content index]}]
+  [rn/view
+   {:style style/community-rule-container}
+   [rn/view
+    {:style style/inner-community-rule-container}
+    [rn/view
+     {:style style/community-rule}
+     [quo/text
+      {:style               style/community-rule-text
+       :accessibility-label :communities-rule-index
+       :weight              :medium
+       :size                :label}
+      (str index)]]
+    [quo/text
+     {:accessibility-label :communities-rule-title
+      :weight              :semi-bold
+      :size                :paragraph-2}
+     title]]
+   [quo/text
+    {:style               style/community-rule-sub-text
+     :accessibility-label :communities-rule-content
+     :size                :paragraph-2}
+    content]])
+
+(defn view
+  [rules]
+  [rn/flat-list
+   {:shows-horizontal-scroll-indicator false
+    :data                              rules
+    :separator                         [rn/view {:margin-top 1}]
+    :render-fn                         community-rule-item}])

src/status_im2/contexts/communities/menus/generic_menu/style.cljs

@@ -0,0 +1,17 @@
+(ns status-im2.contexts.communities.menus.generic-menu.style)
+
+(def container
+  {:flex          1
+   :margin-left   20
+   :margin-right  20
+   :margin-bottom 20})
+
+(def inner-container
+  {:display         :flex
+   :flex-direction  :row
+   :align-items     :center
+   :justify-content :space-between})
+
+(def context-tag
+  {:margin-right :auto
+   :margin-top   8})

src/status_im2/contexts/communities/menus/generic_menu/view.cljs

@@ -0,0 +1,21 @@
+(ns status-im2.contexts.communities.menus.generic-menu.view
+  (:require [utils.i18n :as i18n]
+            [quo2.core :as quo]
+            [status-im2.contexts.communities.menus.generic-menu.style :as style]
+            [react-native.core :as rn]
+            [utils.re-frame :as rf]))
+
+(defn view
+  [id children]
+  (let [{:keys [name images]} (rf/sub [:communities/community id])]
+    [rn/view {:style style/container}
+     [rn/view {:style style/inner-container}
+      [quo/text
+       {:accessibility-label :communities-join-community
+        :weight              :semi-bold
+        :size                :heading-1}
+       (i18n/label :t/leave-community?)]]
+     [quo/context-tag
+      {:style style/context-tag}
+      (:thumbnail images) name]
+     children]))

src/status_im2/contexts/communities/menus/leave/style.cljs

@@ -14,15 +14,3 @@
 (def action-button {:flex 1})
 
 (def text {:margin-top 16})
-
-(def container
-  {:height        180
-   :margin-left   20
-   :margin-right  20
-   :margin-bottom 20})
-
-(def inner-container
-  {:display         :flex
-   :flex-direction  :row
-   :align-items     :center
-   :justify-content :space-between})

src/status_im2/contexts/communities/menus/leave/view.cljs

@@ -1,6 +1,7 @@
 (ns status-im2.contexts.communities.menus.leave.view
   (:require [utils.i18n :as i18n]
             [quo2.core :as quo]
+            [status-im2.contexts.communities.menus.generic-menu.view :as generic-menu]
             [status-im2.contexts.communities.menus.leave.style :as style]
             [react-native.core :as rn]
             [utils.re-frame :as rf]))
@@ -12,19 +13,9 @@
 
 (defn leave-sheet
   [id]
-  (let [{:keys [name images]} (rf/sub [:communities/community id])]
+  [generic-menu/view
-    [rn/view {:style style/container}
+   id
-     [rn/view {:style style/inner-container}
+   [:<>
-      [quo/text
-       {:accessibility-label :communities-join-community
-        :weight              :semi-bold
-        :size                :heading-1}
-       (i18n/label :t/leave-community?)]]
-     [quo/context-tag
-      {:style
-       {:margin-right :auto
-        :margin-top   8}}
-      (:thumbnail images) name]
     [quo/text
      {:accessibility-label :communities-join-community
       :size                :paragraph-1
@@ -40,4 +31,4 @@
      [quo/button
       {:on-press #(hide-sheet-and-dispatch [:communities/leave id])
        :style    style/action-button}
-       (i18n/label :t/leave-community)]]]))
+      (i18n/label :t/leave-community)]]]])

src/status_im2/contexts/communities/menus/request_to_join/style.cljs

@@ -1,35 +1,6 @@
 (ns status-im2.contexts.communities.menus.request-to-join.style
   (:require [quo2.foundations.colors :as colors]))
 
-(def community-rule
-  {:height           18
-   :width            18
-   :margin-left      1
-   :margin-right     9
-   :background-color colors/white
-   :border-color     colors/neutral-20
-   :border-width     1
-   :border-radius    6})
-
-(def community-rule-container
-  {:flex       1
-   :margin-top 16})
-
-(def inner-community-rule-container
-  {:flex           1
-   :flex-direction :row
-   :align-items    :center})
-
-(def community-rule-text
-  {:margin-left   :auto
-   :margin-right  :auto
-   :margin-top    :auto
-   :margin-bottom :auto})
-
-(def community-rule-sub-text
-  {:margin-left 28
-   :margin-top  1})
-
 (def page-container
   {:margin-left   20
    :margin-right  20

src/status_im2/contexts/communities/menus/request_to_join/view.cljs

@@ -1,6 +1,7 @@
 (ns status-im2.contexts.communities.menus.request-to-join.view
   (:require [react-native.core :as rn]
             [react-native.safe-area :as safe-area]
+            [status-im2.contexts.communities.menus.community-rules-list.view :as community-rules]
             [reagent.core :as reagent]
             [status-im2.contexts.communities.menus.request-to-join.style :as style]
             [quo2.core :as quo]
@@ -8,71 +9,12 @@
             [utils.re-frame :as rf]
             [utils.requests :as requests]))
 
-;; TODO: update with real data
-(def community-rules
-  [{:index 1
-    :title "Be respectful"
-    :content
-    "You must respect all users, regardless of your liking towards them. Treat others the way you want to be treated."}
-   {:index 2
-    :title "No Inappropriate Language"
-    :content
-    "The use of profanity should be kept to a minimum. However, any derogatory language towards any user is prohibited."}
-   {:index 3
-    :title "No spamming"
-    :content
-    "Don't send a lot of small messages right after each other. Do not disrupt chat by spamming."}
-   {:index   4
-    :title   "No pornographic, adult or NSFW material"
-    :content "This is a community server and not meant to share this kind of material."}
-   {:index 5
-    :title "No advertisements"
-    :content
-    "We do not tolerate any kind of advertisements, whether it be for other communities or streams."}
-   {:index   6
-    :title   "No offensive names and profile pictures"
-    :content "You will be asked to change your name or picture if the staff deems them inappropriate."}])
-
 (defn request-to-join-text
   [is-open?]
   (if is-open?
     (i18n/label :t/join-open-community)
     (i18n/label :t/request-to-join)))
 
-(defn community-rule-item
-  [{:keys [title content index]}]
-  [rn/view
-   {:style style/community-rule-container}
-   [rn/view
-    {:style style/inner-community-rule-container}
-    [rn/view
-     {:style style/community-rule}
-     [quo/text
-      {:style               style/community-rule-text
-       :accessibility-label :communities-rule-index
-       :weight              :medium
-       :size                :label}
-
-      (str index)]]
-    [quo/text
-     {:accessibility-label :communities-rule-title
-      :weight              :semi-bold
-      :size                :paragraph-2}
-     title]]
-   [quo/text
-    {:style               style/community-rule-sub-text
-     :accessibility-label :communities-rule-content
-     :size                :paragraph-2}
-    content]])
-
-(defn community-rules-list
-  [rules]
-  [rn/flat-list
-   {:shows-horizontal-scroll-indicator false
-    :data                              rules
-    :separator                         [rn/view {:margin-top 1}]
-    :render-fn                         community-rule-item}])
-
 (defn request-to-join
   [{:keys [permissions
            name
@@ -92,7 +34,6 @@
              [rn/view style/page-container
               [rn/view
                {:style style/title-container}
-
                [quo/text
                 {:accessibility-label :communities-join-community
                  :weight              :semi-bold
@@ -112,22 +53,18 @@
                 :weight              :semi-bold
                 :size                :paragraph-1}
                (i18n/label :t/community-rules)]
-
+              [community-rules/view community-rules/rules]
-              [community-rules-list community-rules]
-
               [quo/disclaimer
                {:accessibility-label :rules-disclaimer-checkbox
                 :container-style     {:margin-top 20}
                 :on-change           #(swap! agreed-to-rules? not)}
                (i18n/label :t/accept-community-rules)]
-
               [rn/view {:style (style/bottom-container insets)}
                [quo/button
                 {:accessibility-label :cancel
                  :on-press            #(rf/dispatch [:bottom-sheet/hide])
                  :type                :grey
                  :style               style/cancel-button} (i18n/label :t/cancel)]
-
                [quo/button
                 {:accessibility-label :join-community-button
                  :on-press            (fn []

src/status_im2/contexts/communities/menus/see_rules/view.cljs

@@ -0,0 +1,9 @@
+(ns status-im2.contexts.communities.menus.see-rules.view
+  (:require [status-im2.contexts.communities.menus.generic-menu.view :as generic-menu]
+            [status-im2.contexts.communities.menus.community-rules-list.view :as community-rules]))
+
+(defn view
+  [id]
+  [generic-menu/view
+   id
+   [community-rules/view community-rules/rules]])

src/status_im2/contexts/communities/overview/view.cljs

@@ -16,7 +16,6 @@
             [status-im2.contexts.communities.overview.utils :as utils]
             [utils.re-frame :as rf]))
 
-
 (defn preview-user-list
   [user-list]
   [rn/view style/preview-user