[#19035] Add status tag for pending contact request to contact profile (#19075)

* chore: add english translation for contact-profile-request-pending

* feature: integrate status-tag for pending contact-request

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

@@ -15,3 +15,12 @@
    {:background-color   (colors/theme-colors colors/white colors/neutral-95 theme)
     :padding-horizontal 20
     :margin-top         margin-top}))
+
+(def status-tag-wrapper
+  {:flex-direction :row
+   :padding-top    12
+   :padding-right  12})
+
+(def header-top-wrapper
+  {:flex-direction  :row
+   :justify-content :space-between})

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

@@ -4,14 +4,16 @@
             [quo.theme]
             [react-native.core :as rn]
             [status-im.common.scalable-avatar.view :as avatar]
+            [status-im.constants :as constants]
             [status-im.contexts.profile.contact.header.style :as style]
             [status-im.contexts.profile.utils :as profile.utils]
+            [utils.i18n :as i18n]
             [utils.re-frame :as rf]))
 
 (defn view
   [{:keys [scroll-y]}]
   (let [{:keys [public-key customization-color
-                emoji-hash bio]
+                emoji-hash bio contact-request-state]
          :as   profile}     (rf/sub [:contacts/current-contact])
         customization-color (or customization-color :blue)
         full-name           (profile.utils/displayed-name profile)
@@ -19,14 +21,21 @@
         online?             (rf/sub [:visibility-status-updates/online? public-key])
         theme               (quo.theme/use-theme-value)]
     [rn/view {:style style/header-container}
-     [rn/view {:style style/avatar-wrapper}
-      [avatar/view
-       {:scroll-y            scroll-y
-        :full-name           full-name
-        :online?             online?
-        :profile-picture     profile-picture
-        :border-color        (colors/theme-colors colors/white colors/neutral-95 theme)
-        :customization-color customization-color}]]
+     [rn/view {:style style/header-top-wrapper}
+      [rn/view {:style style/avatar-wrapper}
+       [avatar/view
+        {:scroll-y            scroll-y
+         :full-name           full-name
+         :online?             online?
+         :profile-picture     profile-picture
+         :border-color        (colors/theme-colors colors/white colors/neutral-95 theme)
+         :customization-color customization-color}]]
+      (when (= contact-request-state constants/contact-request-state-sent)
+        [rn/view {:style style/status-tag-wrapper}
+         [quo/status-tag
+          {:label  (i18n/label :t/contact-profile-request-pending)
+           :status {:type :pending}
+           :size   :large}]])]
      [quo/page-top
       {:title            full-name
        :description      :text

translations/en.json

@@ -2116,6 +2116,7 @@
     "selected-count-from-max": "{{selected}}/{{max}}",
     "online": "Online",
     "contact-request-chat-pending": "Your contact request is pending",
+    "contact-profile-request-pending": "Contact request pending",
     "contact-request-chat-add": "Add {{name}} as contact to send a message",
     "join-request": "Join request",
     "join-one-user": "Join {{user}}",