From f7498ef81fa33133c6747eee253441482eb94102 Mon Sep 17 00:00:00 2001 From: Sean Hagstrom Date: Wed, 6 Mar 2024 12:57:02 +0000 Subject: [PATCH] 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 --- .../components/drawers/drawer_top/view.cljs | 19 +++++--- .../contact/contact_request/style.cljs | 10 ++++ .../profile/contact/contact_request/view.cljs | 46 +++++++++++++++++++ .../profile/contact/header/style.cljs | 5 ++ .../contexts/profile/contact/header/view.cljs | 19 +++++++- translations/en.json | 2 + 6 files changed, 93 insertions(+), 8 deletions(-) create mode 100644 src/status_im/contexts/profile/contact/contact_request/style.cljs create mode 100644 src/status_im/contexts/profile/contact/contact_request/view.cljs diff --git a/src/quo/components/drawers/drawer_top/view.cljs b/src/quo/components/drawers/drawer_top/view.cljs index 8ccf64d65a..b1d37e62fd 100644 --- a/src/quo/components/drawers/drawer_top/view.cljs +++ b/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 diff --git a/src/status_im/contexts/profile/contact/contact_request/style.cljs b/src/status_im/contexts/profile/contact/contact_request/style.cljs new file mode 100644 index 0000000000..461e6bc2d6 --- /dev/null +++ b/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}) diff --git a/src/status_im/contexts/profile/contact/contact_request/view.cljs b/src/status_im/contexts/profile/contact/contact_request/view.cljs new file mode 100644 index 0000000000..55c016403a --- /dev/null +++ b/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)}]])) diff --git a/src/status_im/contexts/profile/contact/header/style.cljs b/src/status_im/contexts/profile/contact/header/style.cljs index f31ec965c3..926b72e118 100644 --- a/src/status_im/contexts/profile/contact/header/style.cljs +++ b/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 diff --git a/src/status_im/contexts/profile/contact/header/view.cljs b/src/status_im/contexts/profile/contact/header/view.cljs index 9dac7029da..2f8f2af825 100644 --- a/src/status_im/contexts/profile/contact/header/view.cljs +++ b/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)])) diff --git a/translations/en.json b/translations/en.json index 9b64d4a94f..58ad32c63c 100644 --- a/translations/en.json +++ b/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",