status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

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
This commit is contained in:
Sean Hagstrom 2024-03-06 12:57:02 +00:00 committed by GitHub
parent f1834c6a15
commit f7498ef81f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 93 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/quo/components/drawers/drawer_top/view.cljs
View File

@ -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

10
src/status_im/contexts/profile/contact/contact_request/style.cljs Normal file
View File

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

46
src/status_im/contexts/profile/contact/contact_request/view.cljs Normal file
View File

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

5
src/status_im/contexts/profile/contact/header/style.cljs
View File

@ -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

19
src/status_im/contexts/profile/contact/header/view.cljs
View File

@ -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)]))

2
translations/en.json
View File

@ -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",