From 03444ae4ffd48eee53f519970bbbbd22d793f26e Mon Sep 17 00:00:00 2001 From: Icaro Motta Date: Wed, 6 Dec 2023 18:10:47 -0300 Subject: [PATCH] Request to join screen - show modal title and community context tag (#18077) --- .../actions/accounts_selection/style.cljs | 27 +++++++ .../actions/accounts_selection/view.cljs | 71 +++++++++++-------- .../contexts/communities/overview/view.cljs | 4 +- translations/en.json | 3 +- 4 files changed, 74 insertions(+), 31 deletions(-) create mode 100644 src/status_im2/contexts/communities/actions/accounts_selection/style.cljs diff --git a/src/status_im2/contexts/communities/actions/accounts_selection/style.cljs b/src/status_im2/contexts/communities/actions/accounts_selection/style.cljs new file mode 100644 index 0000000000..eb94b4cc4e --- /dev/null +++ b/src/status_im2/contexts/communities/actions/accounts_selection/style.cljs @@ -0,0 +1,27 @@ +(ns status-im2.contexts.communities.actions.accounts-selection.style + (:require + [quo.foundations.colors :as colors])) + +(def screen-horizontal-padding 20) + +(def container + {:flex 1}) + +(def page-top + {:padding-vertical 12 + :padding-horizontal screen-horizontal-padding}) + +(def content + {:margin-bottom 20 + :padding-horizontal screen-horizontal-padding}) + +(defn bottom-actions + [] + {:position :absolute + :background-color (colors/theme-colors colors/white colors/neutral-95) + :bottom 0 + :left 0 + :right 0 + :padding-horizontal screen-horizontal-padding + :padding-vertical 12 + :flex 1}) diff --git a/src/status_im2/contexts/communities/actions/accounts_selection/view.cljs b/src/status_im2/contexts/communities/actions/accounts_selection/view.cljs index b80d51363f..9aa83f297d 100644 --- a/src/status_im2/contexts/communities/actions/accounts_selection/view.cljs +++ b/src/status_im2/contexts/communities/actions/accounts_selection/view.cljs @@ -4,12 +4,12 @@ [react-native.core :as rn] [react-native.gesture :as gesture] [status-im2.common.password-authentication.view :as password-authentication] + [status-im2.contexts.communities.actions.accounts-selection.style :as style] [status-im2.contexts.communities.actions.community-rules.view :as community-rules] - [status-im2.contexts.communities.actions.request-to-join.style :as style] [utils.i18n :as i18n] [utils.re-frame :as rf])) -(defn join-community-and-navigate-back +(defn- join-community-and-navigate-back [id] (rf/dispatch [:password-authentication/show {:content (fn [] [password-authentication/view])} @@ -18,31 +18,46 @@ {:community-id id :password %}])}]) (rf/dispatch [:navigate-back])) +(defn- page-top + [{:keys [community-name logo-uri]}] + [rn/view {:style style/page-top} + [quo/text + {:size :heading-1 + :weight :semi-bold} + (i18n/label :t/request-to-join)] + [quo/context-tag + {:type :community + :size 24 + :community-logo logo-uri + :community-name community-name + :container-style {:margin-top 8}}]]) + (defn view [] - (fn [] - (let [{:keys [_name - id - _images]} (rf/sub [:get-screen-params])] - [rn/view {:flex 1} - [gesture/scroll-view {:style {:flex 1}} - [rn/view style/page-container - [quo/text - {:style {:margin-top 24} - :accessibility-label :community-rules-title - :weight :semi-bold - :size :paragraph-1} - (i18n/label :t/community-rules)] - [community-rules/view id] - [rn/view {:style (style/bottom-container)} - [quo/button - {:accessibility-label :cancel - :on-press #(rf/dispatch [:navigate-back]) - :type :grey - :container-style style/cancel-button} - (i18n/label :t/cancel)] - [quo/button - {:accessibility-label :join-community-button - :on-press #(join-community-and-navigate-back id) - :container-style {:flex 1}} - (i18n/label :t/request-to-join)]]]]]))) + (let [{id :community-id} (rf/sub [:get-screen-params]) + {:keys [name color images]} (rf/sub [:communities/community id])] + [rn/view {:style style/container} + [quo/page-nav + {:text-align :left + :icon-name :i/close + :on-press #(rf/dispatch [:navigate-back]) + :accessibility-label :back-button}] + [page-top + {:community-name name + :logo-uri (get-in images [:thumbnail :uri])}] + [gesture/scroll-view + [rn/view {:style style/content} + [quo/text + {:style {:margin-top 24} + :accessibility-label :community-rules-title + :weight :semi-bold + :size :paragraph-1} + (i18n/label :t/community-rules)] + [community-rules/view id]]] + [rn/view {:style (style/bottom-actions)} + [quo/slide-button + {:size :size-48 + :track-text (i18n/label :t/slide-to-request-to-join) + :track-icon :i/face-id + :customization-color color + :on-complete #(join-community-and-navigate-back id)}]]])) diff --git a/src/status_im2/contexts/communities/overview/view.cljs b/src/status_im2/contexts/communities/overview/view.cljs index 0bc3c40eb5..626c92ab15 100644 --- a/src/status_im2/contexts/communities/overview/view.cljs +++ b/src/status_im2/contexts/communities/overview/view.cljs @@ -173,7 +173,7 @@ (i18n/label :t/join-open-community)]]))) (defn join-community - [{:keys [joined color permissions token-permissions] :as community} + [{:keys [joined color permissions token-permissions id] :as community} pending?] (let [access-type (get-access-type (:access permissions)) unknown-access? (= access-type :unknown-access) @@ -185,7 +185,7 @@ [quo/button {:on-press (if config/community-accounts-selection-enabled? - #(rf/dispatch [:open-modal :community-account-selection community]) + #(rf/dispatch [:open-modal :community-account-selection {:community-id id}]) #(rf/dispatch [:open-modal :community-requests-to-join community])) :accessibility-label :show-request-to-join-screen-button diff --git a/translations/en.json b/translations/en.json index 8dd205bff4..d25d4e9908 100644 --- a/translations/en.json +++ b/translations/en.json @@ -1902,6 +1902,7 @@ "swap": "Swap", "select-token-to-swap": "Select token to Swap", "select-token-to-receive": "Select token to receive", + "slide-to-request-to-join": "Slide to request to join", "slide-to-reveal-code": "Slide to reveal code", "slide-to-create-account": "Slide to create account", "minimum-received": "Minimum received", @@ -2405,5 +2406,5 @@ "send-limit": "Max: {{limit}}", "searching-for-activity": "Searching for activity...", "this-address-has-no-activity": "This address has no activity", - "this-address-has-activity": "This address has activity" + "this-address-has-activity": "This address has activity" }