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

View File

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

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

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

View File

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

View File

@ -3,8 +3,10 @@
[quo.foundations.colors :as colors] [quo.foundations.colors :as colors]
[quo.theme] [quo.theme]
[react-native.core :as rn] [react-native.core :as rn]
[status-im.common.not-implemented]
[status-im.common.scalable-avatar.view :as avatar] [status-im.common.scalable-avatar.view :as avatar]
[status-im.constants :as constants] [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.contact.header.style :as style]
[status-im.contexts.profile.utils :as profile.utils] [status-im.contexts.profile.utils :as profile.utils]
[utils.i18n :as i18n] [utils.i18n :as i18n]
@ -19,7 +21,9 @@
full-name (profile.utils/displayed-name profile) full-name (profile.utils/displayed-name profile)
profile-picture (profile.utils/photo profile) profile-picture (profile.utils/photo profile)
online? (rf/sub [:visibility-status-updates/online? public-key]) 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-container}
[rn/view {:style style/header-top-wrapper} [rn/view {:style style/header-top-wrapper}
[rn/view {:style style/avatar-wrapper} [rn/view {:style style/avatar-wrapper}
@ -40,4 +44,15 @@
{:title full-name {:title full-name
:description :text :description :text
:description-text bio :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)]))

View File

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