feature: integrate contact-request sheet

Author: seanstrom

src/status_im/contexts/profile/contact/contact_request/style.cljs

@@ -0,0 +1,10 @@
+(ns status-im.contexts.profile.contact.contact-request.style)
+
+(def message-prompt-wrapper
+  {:padding-top        4
+   :padding-bottom     8
+   :padding-horizontal 20})
+
+(def message-input-wrapper
+  {:padding-vertical   8
+   :padding-horizontal 20})

src/status_im/contexts/profile/contact/contact_request/view.cljs

@@ -0,0 +1,39 @@
+(ns status-im.contexts.profile.contact.contact-request.view
+  (:require [clojure.string :as string]
+            [quo.core :as quo]
+            [react-native.core :as rn]
+            [status-im.contexts.profile.contact.contact-request.style :as style]
+            [utils.i18n :as i18n]
+            [utils.re-frame :as rf]))
+
+(defn view
+  [{:keys [full-name profile-picture customization-color public-key]}]
+  (let [[message set-message] (rn/use-state "")
+        on-message-change     (rn/use-callback #(set-message %))
+        on-message-submit     (rn/use-callback (fn []
+                                                 (rf/dispatch [:hide-bottom-sheet])
+                                                 (rf/dispatch [:contact.ui/send-contact-request
+                                                               public-key message]))
+                                               [public-key message])]
+    [:<>
+     [quo/drawer-top
+      {:type                :context-tag
+       :context-tag-type    :default
+       :title               (i18n/label :t/send-contact-request)
+       :full-name           full-name
+       :profile-picture     profile-picture
+       :customization-color customization-color}]
+     [rn/text {:style style/message-prompt-wrapper}
+      (i18n/label :t/contact-request-message-prompt)]
+     [rn/view {:style style/message-input-wrapper}
+      [quo/input
+       {:type           :text
+        :multiline?     true
+        :char-limit     280
+        :label          (i18n/label :t/message)
+        :on-change-text on-message-change}]]
+     [quo/bottom-actions
+      {:actions          :one-action
+       :button-one-props {:disabled? (string/blank? message)
+                          :on-press  on-message-submit}
+       :button-one-label (i18n/label :t/send-contact-request)}]]))

src/status_im/contexts/profile/contact/header/view.cljs

@@ -5,6 +5,7 @@
             [react-native.core :as rn]
             [status-im.common.not-implemented]
             [status-im.common.scalable-avatar.view :as avatar]
+            [status-im.contexts.profile.contact.contact-request.view :as contact-request]
             [status-im.contexts.profile.contact.header.style :as style]
             [status-im.contexts.profile.utils :as profile.utils]
             [utils.i18n :as i18n]
@@ -36,6 +37,11 @@
        :emoji-dash       emoji-hash}]
      [rn/view {:style style/button-wrapper}
       [quo/button
-       {:on-press status-im.common.not-implemented/alert
+       {:on-press  #(rf/dispatch [:show-bottom-sheet
+                                  {:content (fn [] [contact-request/view
+                                                    {:customization-color customization-color
+                                                     :profile-picture     profile-picture
+                                                     :full-name           full-name
+                                                     :public-key          public-key}])}])
         :icon-left :i/add-user}
        (i18n/label :t/send-contact-request)]]]))