From 73c4be8dee4fba3059033f06d9c7f31f7d7f9acb Mon Sep 17 00:00:00 2001 From: Jamie Caprani Date: Fri, 13 Jan 2023 09:35:41 +0000 Subject: [PATCH] Communities Join Screens - Implement all permutations of Context Drawer options (#14700) --- shadow-cljs.edn | 4 +- .../components/community/token_gating.cljs | 2 +- src/quo2/components/icons/icons.clj | 8 +- .../contexts/communities/discover/view.cljs | 13 +- .../communities/home/actions/view.cljs | 113 ----------- .../contexts/communities/home/view.cljs | 7 +- .../community_options/component_spec.cljs | 192 ++++++++++++++++++ .../menus/community_options/view.cljs | 169 +++++++++++++++ .../communities/menus/leave/style.cljs | 29 +++ .../communities/menus/leave/view.cljs | 43 ++++ .../request_to_join}/style.cljs | 2 +- .../request_to_join}/view.cljs | 15 +- .../contexts/communities/overview/view.cljs | 22 +- src/status_im2/core_spec.cljs | 3 + src/test_helpers/component.cljs | 6 + test/jest/jest.config.js | 10 +- test/jest/jestSetup.js | 5 +- translations/en.json | 2 + 18 files changed, 487 insertions(+), 158 deletions(-) delete mode 100644 src/status_im2/contexts/communities/home/actions/view.cljs create mode 100644 src/status_im2/contexts/communities/menus/community_options/component_spec.cljs create mode 100644 src/status_im2/contexts/communities/menus/community_options/view.cljs create mode 100644 src/status_im2/contexts/communities/menus/leave/style.cljs create mode 100644 src/status_im2/contexts/communities/menus/leave/view.cljs rename src/status_im2/contexts/communities/{requests/actions => menus/request_to_join}/style.cljs (95%) rename src/status_im2/contexts/communities/{requests/actions => menus/request_to_join}/view.cljs (91%) create mode 100644 src/status_im2/core_spec.cljs diff --git a/shadow-cljs.edn b/shadow-cljs.edn index 4499333a35..1ecc0d606b 100644 --- a/shadow-cljs.edn +++ b/shadow-cljs.edn @@ -113,8 +113,8 @@ :compiler-options {:optimizations :simple :source-map false}} :component-test {:target :npm-module - :entries [quo2.core-spec] - :ns-regexp "-component-spec$" + :entries [quo2.core-spec status-im2.core-spec] + :ns-regexp "component-spec$" :output-dir "component-spec" :compiler-options {:warnings-as-errors false :static-fns false diff --git a/src/quo2/components/community/token_gating.cljs b/src/quo2/components/community/token_gating.cljs index e56e0a466e..f431c51de9 100644 --- a/src/quo2/components/community/token_gating.cljs +++ b/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) diff --git a/src/quo2/components/icons/icons.clj b/src/quo2/components/icons/icons.clj index 730961da7c..ae4faf2a24 100644 --- a/src/quo2/components/icons/icons.clj +++ b/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 " " "-") diff --git a/src/status_im2/contexts/communities/discover/view.cljs b/src/status_im2/contexts/communities/discover/view.cljs index be890b20ac..8608a842fa 100644 --- a/src/status_im2/contexts/communities/discover/view.cljs +++ b/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)])) - :on-long-press #(rf/dispatch [:bottom-sheet/show-sheet - {:content (fn [] - ;; TODO implement with quo2 - [community/community-actions item])}])} - item]))) + (rf/dispatch [:navigate-to :community {:community-id (:id item)}])) + :on-long-press #(rf/dispatch + [:bottom-sheet/show-sheet + {:content (fn [] + [options/community-options-bottom-sheet (:id item)])}])}]))) (defn screen-title [] diff --git a/src/status_im2/contexts/communities/home/actions/view.cljs b/src/status_im2/contexts/communities/home/actions/view.cljs deleted file mode 100644 index c852ca711e..0000000000 --- a/src/status_im2/contexts/communities/home/actions/view.cljs +++ /dev/null @@ -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}])}])]])) diff --git a/src/status_im2/contexts/communities/home/view.cljs b/src/status_im2/contexts/communities/home/view.cljs index 4f5ad2a704..8e805a7cad 100644 --- a/src/status_im2/contexts/communities/home/view.cljs +++ b/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) diff --git a/src/status_im2/contexts/communities/menus/community_options/component_spec.cljs b/src/status_im2/contexts/communities/menus/community_options/component_spec.cljs new file mode 100644 index 0000000000..0fdf97cc21 --- /dev/null +++ b/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)))) + + diff --git a/src/status_im2/contexts/communities/menus/community_options/view.cljs b/src/status_im2/contexts/communities/menus/community_options/view.cljs new file mode 100644 index 0000000000..d598e915e3 --- /dev/null +++ b/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})]) diff --git a/src/status_im2/contexts/communities/menus/leave/style.cljs b/src/status_im2/contexts/communities/menus/leave/style.cljs new file mode 100644 index 0000000000..76358c09af --- /dev/null +++ b/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}) diff --git a/src/status_im2/contexts/communities/menus/leave/view.cljs b/src/status_im2/contexts/communities/menus/leave/view.cljs new file mode 100644 index 0000000000..0aca1c9dc4 --- /dev/null +++ b/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)]]]) diff --git a/src/status_im2/contexts/communities/requests/actions/style.cljs b/src/status_im2/contexts/communities/menus/request_to_join/style.cljs similarity index 95% rename from src/status_im2/contexts/communities/requests/actions/style.cljs rename to src/status_im2/contexts/communities/menus/request_to_join/style.cljs index 39f7bcad50..ee13f868b9 100644 --- a/src/status_im2/contexts/communities/requests/actions/style.cljs +++ b/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 diff --git a/src/status_im2/contexts/communities/requests/actions/view.cljs b/src/status_im2/contexts/communities/menus/request_to_join/view.cljs similarity index 91% rename from src/status_im2/contexts/communities/requests/actions/view.cljs rename to src/status_im2/contexts/communities/menus/request_to_join/view.cljs index e26562eca5..753df1960e 100644 --- a/src/status_im2/contexts/communities/requests/actions/view.cljs +++ b/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 - (when can-join? - (rf/dispatch [::communities/join id])) - (rf/dispatch [:bottom-sheet/hide]) - (when + (if can-join? + (do (rf/dispatch [::communities/join id]) + (rf/dispatch [:bottom-sheet/hide])) + (do (and can-request-access? (not (pos? requested-to-join-at)) (requests/can-request-access-again? requested-to-join-at)) diff --git a/src/status_im2/contexts/communities/overview/view.cljs b/src/status_im2/contexts/communities/overview/view.cljs index a557ab755a..03d1d73b8f 100644 --- a/src/status_im2/contexts/communities/overview/view.cljs +++ b/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 - [:bottom-sheet/show-sheet - {:content - (fn [] - [home.actions/actions - community]) - :content-height 400}])}]} + :on-press + #(rf/dispatch + [:bottom-sheet/show-sheet + {:content + (fn [] + [options/community-options-bottom-sheet + id])}])}]} name)] (fn [] (let [page-component (memoize (render-page-content community channel-heights first-channel-height)) diff --git a/src/status_im2/core_spec.cljs b/src/status_im2/core_spec.cljs new file mode 100644 index 0000000000..72ce9fa911 --- /dev/null +++ b/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])) diff --git a/src/test_helpers/component.cljs b/src/test_helpers/component.cljs index d189035fe3..16bb20931c 100644 --- a/src/test_helpers/component.cljs +++ b/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)) diff --git a/test/jest/jest.config.js b/test/jest/jest.config.js index 9aead15fff..244d6e57db 100644 --- a/test/jest/jest.config.js +++ b/test/jest/jest.config.js @@ -7,9 +7,12 @@ module.exports = { ], "testPathIgnorePatterns": [ ], + "moduleNameMapper": { + '^[@./a-zA-Z0-9$_-]+\\.(png|jpg|jpeg|gif)$': '/../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" ] -} \ No newline at end of file +} diff --git a/test/jest/jestSetup.js b/test/jest/jestSetup.js index d12ef09234..42de64e5a3 100644 --- a/test/jest/jestSetup.js +++ b/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 = { diff --git a/translations/en.json b/translations/en.json index 2f4d6a9ad4..342c26f5f9 100644 --- a/translations/en.json +++ b/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",