Request to join screen - show modal title and community context tag (#18077)

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})

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 [{id :community-id}          (rf/sub [:get-screen-params])
-    (let [{:keys [_name
+        {:keys [name color images]} (rf/sub [:communities/community id])]
-                  id
+    [rn/view {:style style/container}
-                  _images]} (rf/sub [:get-screen-params])]
+     [quo/page-nav
-      [rn/view {:flex 1}
+      {:text-align          :left
-       [gesture/scroll-view {:style {:flex 1}}
+       :icon-name           :i/close
-        [rn/view style/page-container
+       :on-press            #(rf/dispatch [:navigate-back])
-         [quo/text
+       :accessibility-label :back-button}]
-          {:style               {:margin-top 24}
+     [page-top
-           :accessibility-label :community-rules-title
+      {:community-name name
-           :weight              :semi-bold
+       :logo-uri       (get-in images [:thumbnail :uri])}]
-           :size                :paragraph-1}
+     [gesture/scroll-view
-          (i18n/label :t/community-rules)]
+      [rn/view {:style style/content}
-         [community-rules/view id]
+       [quo/text
-         [rn/view {:style (style/bottom-container)}
+        {:style               {:margin-top 24}
-          [quo/button
+         :accessibility-label :community-rules-title
-           {:accessibility-label :cancel
+         :weight              :semi-bold
-            :on-press            #(rf/dispatch [:navigate-back])
+         :size                :paragraph-1}
-            :type                :grey
+        (i18n/label :t/community-rules)]
-            :container-style     style/cancel-button}
+       [community-rules/view id]]]
-           (i18n/label :t/cancel)]
+     [rn/view {:style (style/bottom-actions)}
-          [quo/button
+      [quo/slide-button
-           {:accessibility-label :join-community-button
+       {:size                :size-48
-            :on-press            #(join-community-and-navigate-back id)
+        :track-text          (i18n/label :t/slide-to-request-to-join)
-            :container-style     {:flex 1}}
+        :track-icon          :i/face-id
-           (i18n/label :t/request-to-join)]]]]])))
+        :customization-color color
+        :on-complete         #(join-community-and-navigate-back id)}]]]))

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

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"
 }