Implement Contact Request flow in Contact Profile (#19039)

* chore: add send-contact-request to i18n translations

* feature: add send-contact-request button on contact profile

* chore: prop drill full-name and profile-picture for the context-tag inside drawer-top component

* chore: add english translation for contact-request-message-prompt text

* feature: integrate contact-request sheet

* tidy: subscribe to contact data inside contact-request view

* tidy: wrap callback with use-callback

* tweak: hide contact-request button if contact-request is already sent

src/quo/components/drawers/drawer_top/view.cljs

@@ -76,7 +76,8 @@
    (str description " · " (i18n/label :t/on-device))])
 
 (defn- context-tag-subtitle
-  [{:keys [context-tag-type community-logo community-name account-name emoji customization-color]}]
+  [{:keys [context-tag-type community-logo community-name account-name emoji customization-color
+           full-name profile-picture]}]
   (let [tag-type (or context-tag-type :account)]
     [rn/view
      {:accessibility-label :context-tag-wrapper
@@ -88,7 +89,9 @@
        :community-name      community-name
        :community-logo      community-logo
        :size                24
-       :customization-color customization-color}]]))
+       :customization-color customization-color
+       :profile-picture     profile-picture
+       :full-name           full-name}]]))
 
 (defn- description-subtitle
   [{:keys [theme blur? description]}]
@@ -100,7 +103,7 @@
 
 (defn- subtitle
   [{:keys [type theme blur? keycard? networks description community-name community-logo
-           context-tag-type account-name emoji customization-color]}]
+           context-tag-type account-name emoji customization-color full-name profile-picture]}]
   (cond
     (= :keypair type)
     [keypair-subtitle
@@ -128,7 +131,9 @@
       :community-name      community-name
       :account-name        account-name
       :emoji               emoji
-      :customization-color customization-color}]
+      :customization-color customization-color
+      :profile-picture     profile-picture
+      :full-name           full-name}]
 
     (and (not= :label type) description)
     [description-subtitle
@@ -187,7 +192,7 @@
            on-button-press
            on-button-long-press
            button-disabled? account-avatar-emoji account-avatar-type customization-color icon-avatar
-           profile-picture keycard? networks label]}]
+           profile-picture keycard? networks label full-name]}]
   [rn/view {:style style/container}
    (when (left-image-supported-types type)
      [rn/view {:style style/left-container}
@@ -218,7 +223,9 @@
       :context-tag-type    context-tag-type
       :customization-color customization-color
       :account-name        account-name
-      :emoji               emoji}]]
+      :emoji               emoji
+      :full-name           full-name
+      :profile-picture     profile-picture}]]
    [right-icon
     {:theme                theme
      :type                 type

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,46 @@
+(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]
+            [status-im.contexts.profile.utils :as profile.utils]
+            [utils.i18n :as i18n]
+            [utils.re-frame :as rf]))
+
+(defn view
+  []
+  (let [{:keys [public-key customization-color]
+         :as   profile}       (rf/sub [:contacts/current-contact])
+        ;; TODO: remove :blue when #18733 merged.
+        customization-color   (or customization-color :blue)
+        full-name             (profile.utils/displayed-name profile)
+        profile-picture       (profile.utils/photo profile)
+        [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/style.cljs

@@ -7,6 +7,11 @@
    :padding-left 20
    :align-items  :flex-start})
 
+(def button-wrapper
+  {:padding-top        8
+   :padding-bottom     16
+   :padding-horizontal 20})
+
 (defn header-container
   [border-radius theme margin-top]
   (reanimated/apply-animations-to-style

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

@@ -3,8 +3,10 @@
             [quo.foundations.colors :as colors]
             [quo.theme]
             [react-native.core :as rn]
+            [status-im.common.not-implemented]
             [status-im.common.scalable-avatar.view :as avatar]
             [status-im.constants :as constants]
+            [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]
@@ -19,7 +21,9 @@
         full-name           (profile.utils/displayed-name profile)
         profile-picture     (profile.utils/photo profile)
         online?             (rf/sub [:visibility-status-updates/online? public-key])
-        theme               (quo.theme/use-theme-value)]
+        theme               (quo.theme/use-theme-value)
+        on-contact-request  (rn/use-callback #(rf/dispatch [:show-bottom-sheet
+                                                            {:content (fn [] [contact-request/view])}]))]
     [rn/view {:style style/header-container}
      [rn/view {:style style/header-top-wrapper}
       [rn/view {:style style/avatar-wrapper}
@@ -40,4 +44,15 @@
       {:title            full-name
        :description      :text
        :description-text bio
-       :emoji-dash       emoji-hash}]]))
+       :emoji-dash       emoji-hash}]
+
+     (cond
+       (or (not contact-request-state)
+           (= contact-request-state constants/contact-request-state-none))
+       [rn/view {:style style/button-wrapper}
+        [quo/button
+         {:on-press  on-contact-request
+          :icon-left :i/add-user}
+         (i18n/label :t/send-contact-request)]]
+
+       :else nil)]))

translations/en.json

@@ -1978,12 +1978,14 @@
     "new-ui": "New UI",
     "send-contact-request-message": "To start a chat you need to become contacts",
     "contact-request": "Contact request",
+    "send-contact-request": "Send contact request",
     "contact-request-sent-to": "Contact request sent to",
     "contact-request-was-accepted": "Contact request accepted",
     "contact-request-is-now-a-contact": "is now a contact",
     "contact-request-removed-you-as-contact": "removed you as a contact",
     "contact-request-removed-as-contact": "removed as a contact",
     "contact-requests": "Contact requests",
+    "contact-request-message-prompt": "Why should they accept your request?",
     "say-hi": "Say hi",
     "opened": "Opened",
     "accepted": "Accepted",