Communities Join Screens - Implement all permutations of Context Drawer options (#14700)

shadow-cljs.edn

@@ -113,8 +113,8 @@
    :compiler-options {:optimizations :simple
                       :source-map    false}}
   :component-test {:target           :npm-module
-                   :entries          [quo2.core-spec]
+                   :entries          [quo2.core-spec status-im2.core-spec]
-                   :ns-regexp        "-component-spec$"
+                   :ns-regexp        "component-spec$"
                    :output-dir       "component-spec"
                    :compiler-options {:warnings-as-errors false
                                       :static-fns         false

src/quo2/components/community/token_gating.cljs

@@ -8,7 +8,7 @@
             [quo2.components.tags.token-tag :as token-tag]
             [quo2.foundations.colors :as colors]
             [i18n.i18n :as i18n]
-            [status-im.ui.components.fast-image :as fast-image]))
+            [react-native.fast-image :as fast-image]))
 
 (def ^:private token-tag-horizontal-spacing 7)
 (def token-tag-vertical-spacing 5)

src/quo2/components/icons/icons.clj

@@ -4,16 +4,10 @@
 
 (def icon-path "./resources/images/icons2/")
 
-(defn combine-path
-  [path el]
-  (if (System/getenv "COMPONENT_TEST")
-    (str "." path el "@2x.png")
-    (str "." path el ".png")))
-
 (defn require-icon
   [size path]
   (fn [el]
-    (let [s (combine-path path el)
+    (let [s (str "." path el ".png")
           k (-> el
                 (string/replace "_" "-")
                 (string/replace " " "-")

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

@@ -7,7 +7,7 @@
             [react-native.safe-area :as safe-area]
             [reagent.core :as reagent]
             [status-im.react-native.resources :as resources]
-            [status-im.ui.screens.communities.community :as community]
+            [status-im2.contexts.communities.menus.community-options.view :as options]
             [utils.re-frame :as rf]))
 
 (def mock-community-item-data  ;; TODO: remove once communities are loaded with this data.
@@ -40,12 +40,11 @@
        {:on-press      (fn []
                          (rf/dispatch [:communities/load-category-states (:id item)])
                          (rf/dispatch [:dismiss-keyboard])
-                         (rf/dispatch [:navigate-to :community (:id item)]))
+                         (rf/dispatch [:navigate-to :community {:community-id (:id item)}]))
-        :on-long-press #(rf/dispatch [:bottom-sheet/show-sheet
+        :on-long-press #(rf/dispatch
-                                      {:content (fn []
+                         [:bottom-sheet/show-sheet
-                                                  ;; TODO implement with quo2
+                          {:content (fn []
-                                                  [community/community-actions item])}])}
+                                      [options/community-options-bottom-sheet (:id item)])}])}])))
-       item])))
 
 (defn screen-title
   []

src/status_im2/contexts/communities/home/actions/view.cljs

@@ -1,113 +0,0 @@
-(ns status-im2.contexts.communities.home.actions.view
-  (:require [i18n.i18n :as i18n]
-            [quo2.core :as quo]
-            [react-native.core :as rn]
-            [utils.re-frame :as rf]))
-
-(defn hide-sheet-and-dispatch
-  [event]
-  (rf/dispatch [:bottom-sheet/hide])
-  (rf/dispatch event))
-
-(def not-joined-options
-  {:actions [{:icon  :i/members
-              :label (i18n/label :t/view-members)}
-             {:icon       :i/bullet-list
-              :right-icon :i/chevron-right
-              :label      (i18n/label :t/view-community-rules)}
-             {:icon  :i/add-user
-              :label (i18n/label :t/invite-contacts)}
-             {:icon  :i/qr-code
-              :label (i18n/label :t/show-qr)}
-             {:icon  :i/share
-              :label (i18n/label :t/share-community)}]})
-
-(defn joined-options
-  [id]
-  {:actions
-   [{:icon                :i/members
-     :accessibility-label :i/view-members
-     :label               (i18n/label :t/view-members)
-     :on-press            #(hide-sheet-and-dispatch [:navigate-to :community-members
-                                                     {:community-id id}])}
-    {:icon                :i/bullet-list
-     :right-icon          :i/chevron-right
-     :accessibility-label :view-community-rules
-     :label               (i18n/label :t/view-community-rules)}
-    {:icon                :i/up-to-date
-     :accessibility-label :mark-as-read
-     :label               (i18n/label :t/mark-as-read)
-     :on-press            #(hide-sheet-and-dispatch [:chat.ui/mark-all-read-in-community-pressed id])}
-    {:icon                :i/muted
-     :accessibility-label :mute-community
-     :label               (i18n/label :t/mute-community)
-     :right-icon          :i/chevron-right}
-    {:icon                :i/notifications
-     :accessibility-label :community-notification-settings
-     :label               (i18n/label :t/community-notification-settings)
-     :right-icon          :i/chevron-right}
-    {:icon                :i/add-user
-     :accessibility-label :invite-people-from-contacts
-     :label               (i18n/label :t/invite-people-from-contacts)
-     :on-press            #(hide-sheet-and-dispatch [:communities/invite-people-pressed id])}
-    {:icon                :i/qr-code
-     :accessibility-label :show-qr
-     :label               (i18n/label :t/show-qr)}
-    {:icon                :i/share
-     :accessibility-label :share-community
-     :label               (i18n/label :t/share-community)
-     :on-press            #(hide-sheet-and-dispatch [:communities/share-community-pressed id])}]})
-
-(defn leave-sheet
-  [community]
-  [rn/view {:style {:flex 1 :margin-left 20 :margin-right 20 :margin-bottom 20}}
-   [rn/view {:style {:flex 1 :flex-direction :row :align-items :center :justify-content :space-between}}
-
-    [quo/text
-     {:accessibility-label :communities-join-community
-      :weight              :semi-bold
-      :size                :heading-1}
-     (i18n/label :t/leave-community?)]]
-   ;; TODO get tag image from community data
-   #_[quo/context-tag
-      {:style
-       {:margin-right :auto
-        :margin-top   8}}
-      (resources/get-image :status-logo) (:name community)]
-   [quo/text
-    {:accessibility-label :communities-join-community
-     :size                :paragraph-1
-     :style               {:margin-top 16}}
-    (i18n/label :t/leave-community-message)]
-   [rn/view
-    {:style {:margin-top      16
-             :margin-bottom   16
-             :flex            1
-             :flex-direction  :row
-             :align-items     :center
-             :justify-content :space-evenly}}
-    [quo/button
-     {:on-press #(rf/dispatch [:bottom-sheet/hide])
-      :type     :grey
-      :style    {:flex         1
-                 :margin-right 12}}
-     (i18n/label :t/cancel)]
-    [quo/button
-     {:on-press #(hide-sheet-and-dispatch [:communities/leave (:id community)])
-      :style    {:flex 1}}
-     (i18n/label :t/leave-community)]]])
-
-(defn actions
-  [id]
-  (let [community (rf/sub [:communities/community id])]
-    [quo/action-drawer
-     [(get (if (:joined community)
-             (joined-options (:id community))
-             not-joined-options)
-           :actions)
-      (when (:joined community)
-        [{:icon     :i/log-out
-          :label    (i18n/label :t/leave-community)
-          :on-press #(rf/dispatch [:bottom-sheet/show-sheet
-                                   {:content        (constantly [leave-sheet community])
-                                    :content-height 300}])}])]]))

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

@@ -1,11 +1,10 @@
 (ns status-im2.contexts.communities.home.view
   (:require [i18n.i18n :as i18n]
-            [quo2.components.community.discover-card :as discover-card]
             [quo2.core :as quo]
             [react-native.core :as rn]
             [reagent.core :as reagent]
             [status-im2.common.home.view :as common.home]
-            [status-im2.contexts.communities.home.actions.view :as home.actions]
+            [status-im2.contexts.communities.menus.community-options.view :as options]
             [utils.re-frame :as rf]))
 
 (defn render-fn
@@ -19,7 +18,7 @@
       :on-long-press #(rf/dispatch
                        [:bottom-sheet/show-sheet
                         {:content       (fn []
-                                          [home.actions/actions id])
+                                          [options/community-options-bottom-sheet id])
                          :selected-item (fn []
                                           [quo/communities-membership-list-item {} community-item])}])}
      community-item]))
@@ -86,7 +85,7 @@
         {:label               (i18n/label :t/communities)
          :handler             #(rf/dispatch [:bottom-sheet/show-sheet :add-new {}])
          :accessibility-label :new-chat-button}]
-       [discover-card/discover-card
+       [quo/discover-card
         {:on-press            #(rf/dispatch [:navigate-to :discover-communities])
          :title               (i18n/label :t/discover)
          :description         (i18n/label :t/whats-trending)

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

@@ -0,0 +1,192 @@
+
+(ns status-im2.contexts.communities.menus.community-options.component-spec
+  (:require [re-frame.core :as re-frame]
+            [test-helpers.component :as h]
+            [i18n.i18n :as i18n]
+            [status-im2.setup.i18n-resources :as i18n-resources]
+            [status-im2.contexts.communities.menus.community-options.view :as options]))
+
+(defn init
+  []
+  (i18n/set-language "en")
+  (i18n-resources/load-language "en"))
+
+(defn setup-sub
+  [opts]
+  (re-frame/reg-sub
+   :communities/community
+   (fn [_] opts)))
+
+(h/describe "community options for bottom sheets"
+  (h/test "joined options - Non token Gated"
+    (setup-sub {:joined true})
+    (h/render [options/community-options-bottom-sheet {:id "test"}])
+    (-> (h/expect (h/get-by-text "View members"))
+        (.toBeTruthy))
+    (-> (h/expect (h/get-by-text "View Community Rules"))
+        (.toBeTruthy))
+    (-> (h/expect (h/get-by-text "Mark as read"))
+        (.toBeTruthy))
+    (-> (h/expect (h/get-by-text "Mute community"))
+        (.toBeTruthy))
+    (-> (h/expect (h/get-by-text "Notification settings"))
+        (.toBeTruthy))
+    (-> (h/expect (h/get-by-text "Invite people from contact list"))
+        (.toBeTruthy))
+    (-> (h/expect (h/get-by-text "Show QR code"))
+        (.toBeTruthy))
+    (-> (h/expect (h/get-by-text "Share community"))
+        (.toBeTruthy))
+    (-> (h/expect (h/get-by-text "Leave community"))
+        (.toBeTruthy)))
+
+  (h/test "joined options - Token Gated"
+    (setup-sub {:joined       true
+                :token-gated? true})
+    (h/render [options/community-options-bottom-sheet {:id "test"}])
+    (-> (h/expect (h/get-by-text "View members"))
+        (.toBeTruthy))
+    (-> (h/expect (h/get-by-text "View Community Rules"))
+        (.toBeTruthy))
+    (-> (h/expect (h/get-by-text "View token gating"))
+        (.toBeTruthy))
+    (-> (h/expect (h/get-by-text "Mark as read"))
+        (.toBeTruthy))
+    (-> (h/expect (h/get-by-text "Mute community"))
+        (.toBeTruthy))
+    (-> (h/expect (h/get-by-text "Notification settings"))
+        (.toBeTruthy))
+    (-> (h/expect (h/get-by-text "Invite people from contact list"))
+        (.toBeTruthy))
+    (-> (h/expect (h/get-by-text "Show QR code"))
+        (.toBeTruthy))
+    (-> (h/expect (h/get-by-text "Share community"))
+        (.toBeTruthy))
+    (-> (h/expect (h/get-by-text "Leave community"))
+        (.toBeTruthy)))
+
+  (h/test "admin options - Non token Gated"
+    (setup-sub {:admin true})
+    (h/render [options/community-options-bottom-sheet {:id "test"}])
+    (-> (h/expect (h/get-by-text "View members"))
+        (.toBeTruthy))
+    (-> (h/expect (h/get-by-text "View Community Rules"))
+        (.toBeTruthy))
+    (-> (h/expect (h/get-by-text "Edit community"))
+        (.toBeTruthy))
+    (-> (h/expect (h/get-by-text "Mark as read"))
+        (.toBeTruthy))
+    (-> (h/expect (h/get-by-text "Mute community"))
+        (.toBeTruthy))
+    (-> (h/expect (h/get-by-text "Notification settings"))
+        (.toBeTruthy))
+    (-> (h/expect (h/get-by-text "Invite people from contact list"))
+        (.toBeTruthy))
+    (-> (h/expect (h/get-by-text "Show QR code"))
+        (.toBeTruthy))
+    (-> (h/expect (h/get-by-text "Share community"))
+        (.toBeTruthy)))
+
+  (h/test "admin options - Token Gated"
+    (setup-sub {:admin        true
+                :token-gated? true})
+    (h/render [options/community-options-bottom-sheet {:id "test"}])
+    (-> (h/expect (h/get-by-text "View members"))
+        (.toBeTruthy))
+    (-> (h/expect (h/get-by-text "View Community Rules"))
+        (.toBeTruthy))
+    (-> (h/expect (h/get-by-text "Edit community"))
+        (.toBeTruthy))
+    (-> (h/expect (h/get-by-text "Mark as read"))
+        (.toBeTruthy))
+    (-> (h/expect (h/get-by-text "Mute community"))
+        (.toBeTruthy))
+    (-> (h/expect (h/get-by-text "Notification settings"))
+        (.toBeTruthy))
+    (-> (h/expect (h/get-by-text "Invite people from contact list"))
+        (.toBeTruthy))
+    (-> (h/expect (h/get-by-text "Show QR code"))
+        (.toBeTruthy))
+    (-> (h/expect (h/get-by-text "Share community"))
+        (.toBeTruthy)))
+
+  (h/test "request sent options - Non token Gated"
+    (setup-sub {:requested-to-join-at true})
+    (h/render [options/community-options-bottom-sheet {:id "test"}])
+    (-> (h/expect (h/get-by-text "View members"))
+        (.toBeTruthy))
+    (-> (h/expect (h/get-by-text "View Community Rules"))
+        (.toBeTruthy))
+    (-> (h/expect (h/get-by-text "Invite people from contact list"))
+        (.toBeTruthy))
+    (-> (h/expect (h/get-by-text "Show QR code"))
+        (.toBeTruthy))
+    (-> (h/expect (h/get-by-text "Share community"))
+        (.toBeTruthy))
+    (-> (h/expect (h/get-by-text "Cancel request to join"))
+        (.toBeTruthy)))
+
+  (h/test "request sent options - Token Gated"
+    (setup-sub {:requested-to-join-at 100
+                :token-gated?         true})
+    (h/render [options/community-options-bottom-sheet {:id "test"}])
+    (-> (h/expect (h/get-by-text "Invite people from contact list"))
+        (.toBeTruthy))
+    (-> (h/expect (h/get-by-text "View token gating"))
+        (.toBeTruthy))
+    (-> (h/expect (h/get-by-text "Show QR code"))
+        (.toBeTruthy))
+    (-> (h/expect (h/get-by-text "Share community"))
+        (.toBeTruthy))
+    (-> (h/expect (h/get-by-text "Cancel request to join"))
+        (.toBeTruthy)))
+
+  (h/test "banned options - Non token Gated"
+    (setup-sub {:banList true})
+    (h/render [options/community-options-bottom-sheet {:id "test"}])
+    (-> (h/expect (h/get-by-text "View members"))
+        (.toBeTruthy))
+    (-> (h/expect (h/get-by-text "View Community Rules"))
+        (.toBeTruthy))
+    (-> (h/expect (h/get-by-text "Invite people from contact list"))
+        (.toBeTruthy))
+    (-> (h/expect (h/get-by-text "Show QR code"))
+        (.toBeTruthy))
+    (-> (h/expect (h/get-by-text "Share community"))
+        (.toBeTruthy)))
+
+  (h/test "banned options - Token Gated"
+    (setup-sub {:banList      100
+                :token-gated? true})
+    (h/render [options/community-options-bottom-sheet {:id "test"}])
+    (-> (h/expect (h/get-by-text "Invite people from contact list"))
+        (.toBeTruthy))
+    (-> (h/expect (h/get-by-text "View token gating"))
+        (.toBeTruthy))
+    (-> (h/expect (h/get-by-text "Show QR code"))
+        (.toBeTruthy))
+    (-> (h/expect (h/get-by-text "Share community"))
+        (.toBeTruthy)))
+
+  (h/test "banned options - Token Gated"
+    (setup-sub {:banList      100
+                :token-gated? true})
+    (h/render [options/community-options-bottom-sheet {:id "test"}])
+    (-> (h/expect (h/get-by-text "Invite people from contact list"))
+        (.toBeTruthy))
+    (-> (h/expect (h/get-by-text "View token gating"))
+        (.toBeTruthy))
+    (-> (h/expect (h/get-by-text "Show QR code"))
+        (.toBeTruthy))
+    (-> (h/expect (h/get-by-text "Share community"))
+        (.toBeTruthy)))
+
+  (h/test "joined and muted community"
+    (setup-sub {:joined       true
+                :muted        true
+                :token-gated? true})
+    (h/render [options/community-options-bottom-sheet {:id "test"}])
+    (-> (h/expect (h/get-by-text "Unmute community"))
+        (.toBeTruthy))))
+
+

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

@@ -0,0 +1,169 @@
+(ns status-im2.contexts.communities.menus.community-options.view
+  (:require [i18n.i18n :as i18n]
+            [utils.re-frame :as rf]
+            [quo2.core :as quo]
+            [status-im2.contexts.communities.menus.leave.view :as leave-menu]))
+
+(defn hide-sheet-and-dispatch
+  [event]
+  (rf/dispatch [:bottom-sheet/hide])
+  (rf/dispatch event))
+
+(defn view-members
+  [id]
+  {:icon                :i/members
+   :accessibility-label :view-members
+   :label               (i18n/label :t/view-members)
+   :on-press            #(hide-sheet-and-dispatch [:navigate-to :community-members
+                                                   {:community-id id}])})
+
+(defn view-rules
+  [id]
+  {:icon                :i/bullet-list
+   :right-icon          :i/chevron-right
+   :accessibility-label :view-community-rules
+   :on-press            #(js/alert (str "implement action" id))
+   :label               (i18n/label :t/view-community-rules)})
+
+(defn view-token-gating
+  [id]
+  {:icon                :i/bullet-list
+   :right-icon          :i/token
+   :accessibility-label :view-token-gating
+   :on-press            #(js/alert (str "implement action" id))
+   :label               (i18n/label :t/view-token-gating)})
+
+(defn mark-as-read
+  [id]
+  {:icon                :i/up-to-date
+   :accessibility-label :mark-as-read
+   :label               (i18n/label :t/mark-as-read)
+   :on-press            #(hide-sheet-and-dispatch [:chat.ui/mark-all-read-in-community-pressed id])})
+
+(defn mute-community
+  [_ muted?]
+  {:icon                (if muted? :i/muted :i/activity-center)
+   :accessibility-label (if muted? :unmute-community :mute-community)
+   :label               (i18n/label (if muted? :t/unmute-community :t/mute-community))
+   :sub-label           (when muted? (str "muted for 15 minutes"))
+   :right-icon          :i/chevron-right})
+
+(defn community-notification-settings
+  [id]
+  {:icon                :i/notifications
+   :accessibility-label :community-notification-settings
+   :label               (i18n/label :t/community-notification-settings)
+   :on-press            #(js/alert (str "implement action" id))
+   :right-icon          :i/chevron-right})
+
+(defn invite-contacts
+  [id]
+  {:icon                :i/add-user
+   :accessibility-label :invite-people-from-contacts
+   :label               (i18n/label :t/invite-people-from-contacts)
+   :on-press            #(hide-sheet-and-dispatch [:communities/invite-people-pressed id])})
+
+(defn show-qr
+  [id]
+  {:icon                :i/qr-code
+   :accessibility-label :show-qr
+   :on-press            #(js/alert (str "implement action" id))
+   :label               (i18n/label :t/show-qr)})
+
+(defn share-community
+  [id]
+  {:icon                :i/share
+   :accessibility-label :share-community
+   :label               (i18n/label :t/share-community)
+   :on-press            #(hide-sheet-and-dispatch [:communities/share-community-pressed id])})
+
+(defn leave-community
+  [id]
+  {:icon                :i/log-out
+   :label               (i18n/label :t/leave-community)
+   :accessibility-label :leave-community
+
+   :danger?             true
+   :on-press            #(rf/dispatch [:bottom-sheet/show-sheet
+                                       {:content        (constantly [leave-menu/leave-sheet id])
+                                        :content-height 400}])})
+
+(defn cancel-request-to-join
+  [id]
+  {:icon                :i/block
+   :label               (i18n/label :t/cancel-request-to-join)
+   :accessibility-label :cancel-request-to-join
+   :danger?             true
+   :on-press            #(js/alert (str "implement action" id))})
+
+(defn edit-community
+  [id]
+  {:icon                :i/edit
+   :label               (i18n/label :t/edit-community)
+   :accessibility-label :edit-community
+   :on-press            #(js/alert (str "implement action" id))})
+
+(defn not-joined-options
+  [id token-gated?]
+  [[(when-not token-gated? (view-members id))
+    (when-not token-gated? (view-rules id))
+    (invite-contacts id)
+    (when token-gated? (view-token-gating id))
+    (show-qr id)
+    (share-community id)]])
+
+(defn join-request-sent-options
+  [id token-gated?]
+  [(conj (first (not-joined-options id token-gated?))
+         (assoc (cancel-request-to-join id) :add-divider? true))])
+
+(defn banned-options
+  [id token-gated?]
+  (not-joined-options id token-gated?))
+
+(defn joined-options
+  [id token-gated? muted?]
+  [[(view-members id)
+    (view-rules id)
+    (when token-gated? (view-token-gating id))
+    (mark-as-read id)
+    (mute-community id muted?)
+    (community-notification-settings id)
+    (invite-contacts id)
+    (show-qr id)
+    (share-community id)]
+   [(assoc (leave-community id) :add-divider? true)]])
+
+(defn owner-options
+  [id token-gated? muted?]
+  [[(view-members id)
+    (view-rules id)
+    (when token-gated? (view-token-gating id))
+    (edit-community id)
+    (mark-as-read id)
+    (mute-community id muted?)
+    (community-notification-settings id)
+    (invite-contacts id)
+    (show-qr id)
+    (share-community id)]])
+
+(defn get-context-drawers
+  [{:keys [id]}]
+  (let [community     (rf/sub [:communities/community id])
+        token-gated?  (:token-gated? community)
+        joined?       (:joined community)
+        admin?        (:admin community)
+        request-sent? (pos? (:requested-to-join-at community))
+        muted?        (:muted community)
+        banned?       (:banList community)]
+    (cond
+      joined?       (joined-options id token-gated? muted?)
+      admin?        (owner-options id token-gated? muted?)
+      request-sent? (join-request-sent-options id token-gated?)
+      banned?       (banned-options id token-gated?)
+      :else         (not-joined-options id token-gated?))))
+
+(defn community-options-bottom-sheet
+  [id]
+  [quo/action-drawer
+   (get-context-drawers {:id id})])

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

@@ -0,0 +1,29 @@
+(ns status-im2.contexts.communities.menus.leave.style)
+
+(def button-container
+  {:margin-top      16
+   :margin-bottom   16
+   :flex            1
+   :flex-direction  :row
+   :align-items     :center
+   :justify-content :space-evenly})
+
+(def cancel-button
+  {:flex         1
+   :margin-right 12})
+
+(def action-button {:flex 1})
+
+(def text {:margin-top 16})
+
+(def container
+  {:height        160
+   :margin-left   20
+   :margin-right  20
+   :margin-bottom 20})
+
+(def inner-container
+  {:flex            1
+   :flex-direction  :row
+   :align-items     :center
+   :justify-content :space-between})

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

@@ -0,0 +1,43 @@
+(ns status-im2.contexts.communities.menus.leave.view
+  (:require [i18n.i18n :as i18n]
+            [quo2.core :as quo]
+            [status-im2.contexts.communities.menus.leave.style :as style]
+            [react-native.core :as rn]
+            [utils.re-frame :as rf]))
+
+(defn hide-sheet-and-dispatch
+  [event]
+  (rf/dispatch [:bottom-sheet/hide])
+  (rf/dispatch event))
+
+(defn leave-sheet
+  [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?)]]
+   ;; TODO get tag image from community data - https://github.com/status-im/status-mobile/issues/14740
+   #_[quo/context-tag
+      {:style
+       {:margin-right :auto
+        :margin-top   8}}
+      (resources/get-image :status-logo) (:name community)]
+   [quo/text
+    {:accessibility-label :communities-join-community
+     :size                :paragraph-1
+     :style               style/text}
+    (i18n/label :t/leave-community-message)]
+   [rn/view
+    {:style style/button-container}
+    [quo/button
+     {:on-press #(rf/dispatch [:bottom-sheet/hide])
+      :type     :grey
+      :style    style/cancel-button}
+     (i18n/label :t/cancel)]
+    [quo/button
+     {:on-press #(hide-sheet-and-dispatch [:communities/leave id])
+      :style    style/action-button}
+     (i18n/label :t/leave-community)]]])

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

@@ -1,4 +1,4 @@
-(ns status-im2.contexts.communities.requests.actions.style
+(ns status-im2.contexts.communities.menus.request-to-join.style
   (:require [quo2.foundations.colors :as colors]))
 
 (def community-rule

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

@@ -1,11 +1,11 @@
-(ns status-im2.contexts.communities.requests.actions.view
+(ns status-im2.contexts.communities.menus.request-to-join.view
   (:require [quo.react-native :as rn]
             [quo2.core :as quo]
             [reagent.core :as reagent]
             [status-im.communities.core :as communities]
             [i18n.i18n :as i18n]
             [status-im.react-native.resources :as resources]
-            [status-im2.contexts.communities.requests.actions.style :as style]
+            [status-im2.contexts.communities.menus.request-to-join.style :as style]
             [utils.re-frame :as rf]
             [utils.requests :as requests]))
 
@@ -75,7 +75,7 @@
     :render-fn                         community-rule-item}])
 
 (defn request-to-join
-  [{:keys [permissions name id joined
+  [{:keys [permissions name id
            can-join? can-request-access?
            requested-to-join-at]}]
   (let [agreed-to-rules? (reagent/atom false)
@@ -122,11 +122,10 @@
         [quo/button
          {:accessibility-label :join-community-button
           :on-press            (fn []
-                                 (when-not joined
+                                 (if can-join?
-                                   (when can-join?
+                                   (do (rf/dispatch [::communities/join id])
-                                     (rf/dispatch [::communities/join id]))
+                                       (rf/dispatch [:bottom-sheet/hide]))
-                                   (rf/dispatch [:bottom-sheet/hide])
+                                   (do
-                                   (when
                                      (and can-request-access?
                                           (not (pos? requested-to-join-at))
                                           (requests/can-request-access-again? requested-to-join-at))

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

@@ -8,9 +8,9 @@
             [reagent.core :as reagent]
             [status-im2.common.constants :as constants]
             [status-im2.common.scroll-page.view :as scroll-page]
-            [status-im2.contexts.communities.home.actions.view :as home.actions]
             [status-im2.contexts.communities.overview.style :as style]
-            [status-im2.contexts.communities.requests.actions.view :as requests.actions]
+            [status-im2.contexts.communities.menus.community-options.view :as options]
+            [status-im2.contexts.communities.menus.request-to-join.view :as join-menu]
             [utils.re-frame :as rf]))
 
 (def knc-token-img (js/require "../resources/images/tokens/mainnet/KNC.png"))
@@ -188,7 +188,7 @@
        [quo/button
         {:on-press                  #(rf/dispatch
                                       [:bottom-sheet/show-sheet
-                                       {:content        (fn [] [requests.actions/request-to-join
+                                       {:content        (fn [] [join-menu/request-to-join
                                                                 community])
                                         :content-height 300}])
          :accessibility-label       :show-request-to-join-screen-button
@@ -319,7 +319,7 @@
          :chevron-position :left}]])))
 
 (defn community-card-page-view
-  [{:keys [name images] :as community}]
+  [{:keys [name images id] :as community}]
   (let [channel-heights      (reagent/atom [])
         first-channel-height (reagent/atom 0)
         scroll-component     (scroll-page/scroll-page
@@ -329,13 +329,13 @@
                                                         :background-color (scroll-page/icon-color)}
                                                        {:icon             :i/options
                                                         :background-color (scroll-page/icon-color)
-                                                        :on-press         #(rf/dispatch
+                                                        :on-press
-                                                                            [:bottom-sheet/show-sheet
+                                                        #(rf/dispatch
-                                                                             {:content
+                                                          [:bottom-sheet/show-sheet
-                                                                              (fn []
+                                                           {:content
-                                                                                [home.actions/actions
+                                                            (fn []
-                                                                                 community])
+                                                              [options/community-options-bottom-sheet
-                                                                              :content-height 400}])}]}
+                                                               id])}])}]}
                               name)]
     (fn []
       (let [page-component (memoize (render-page-content community channel-heights first-channel-height))

src/status_im2/core_spec.cljs

@@ -0,0 +1,3 @@
+(ns status-im2.core-spec
+  (:require
+   [status-im2.contexts.communities.menus.community-options.component-spec]))

src/test_helpers/component.cljs

@@ -21,6 +21,12 @@
   [test-id]
   (rtl/screen.getByTestId (name test-id)))
 
+(defn get-by-text
+  [text]
+  (rtl/screen.getByText text))
+
 (defn get-by-label-text
   [label]
   (rtl/screen.getByLabelText (name label)))
+
+(defn expect [match] (js/expect match))

test/jest/jest.config.js

@@ -7,9 +7,12 @@ module.exports = {
     ],
     "testPathIgnorePatterns": [
     ],
+    "moduleNameMapper": {
+        '^[@./a-zA-Z0-9$_-]+\\.(png|jpg|jpeg|gif)$': '<rootDir>/../node_modules/react-native/Libraries/Image/RelativeImageStub'
+      },
     "testTimeout": 60000,
     "transformIgnorePatterns": [
-        "/node_modules/(?!(@react-native|react-native-image-crop-picker|@react-native-community|react-native-linear-gradient|react-native-background-timer|react-native|rn-emoji-keyboard|react-native-languages|react-native-shake|react-native-reanimated)/).*/"
+        "/node_modules/(?!(@react-native|react-native-haptic-feedback|react-native-redash|react-native-image-crop-picker|@react-native-community|react-native-linear-gradient|react-native-background-timer|react-native|rn-emoji-keyboard|react-native-languages|react-native-shake|react-native-reanimated)/).*/"
     ],
     "globals": {
         "__TEST__": true
@@ -17,6 +20,7 @@ module.exports = {
     "testEnvironment": "node",
     rootDir: "../../component-spec",
     testMatch: [
-        "**/*__tests__*"
+        "**/*__tests__*",
+         "**/*.component_spec.js"
     ]
-}
+}

test/jest/jestSetup.js

@@ -29,7 +29,10 @@ jest.mock('react-native-languages', () => ({
         language: 'en',
         languages: ['en'],
     },
-    default: {},
+    default: {
+        language: 'en',
+        locale: 'en'
+    },
 }));
 
 NativeModules.ReactLocalization = {

translations/en.json

@@ -124,6 +124,7 @@
     "can-not-add-yourself": "That's you, to start a chat choose someone else",
     "cancel": "Cancel",
     "cancel-keycard-setup": "Cancel Keycard setup",
+    "cancel-request-to-join": "Cancel request to join",
     "cannot-read-card": "Can't read card.\nPlease hold it to the back of your phone",
     "cannot-use-default-pin": "Passcode 000000 is not allowed.\nPlease use another number",
     "card-is-blank": "This card is blank",
@@ -1372,6 +1373,7 @@
     "view-details": "View Details",
     "view-signing": "View signing phrase",
     "view-superrare": "View in SuperRare",
+    "view-token-gating": "View token gating",
     "vote-to-feature": "Vote to feature this community",
     "waiting-for-wifi": "No Wi-fi, message syncing disabled.",
     "waiting-for-wifi-change": "Settings",