From bde6f7e9b026e8d3883dfaa402e0bad06f325818 Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Mon, 23 Aug 2021 18:34:23 -0400
Subject: [PATCH] UX: Update "get a room" composer message (#14104)

---
 .../discourse/app/components/composer-messages.js      |  6 ++++++
 .../app/templates/components/composer-messages.hbs     |  7 ++++++-
 .../discourse/app/templates/composer/get-a-room.hbs    | 10 ++++++++++
 app/assets/stylesheets/desktop/compose.scss            |  3 ++-
 config/locales/server.en.yml                           |  9 +--------
 lib/composer_messages_finder.rb                        |  5 +++--
 spec/components/composer_messages_finder_spec.rb       |  2 +-
 7 files changed, 29 insertions(+), 13 deletions(-)
 create mode 100644 app/assets/javascripts/discourse/app/templates/composer/get-a-room.hbs

diff --git a/app/assets/javascripts/discourse/app/components/composer-messages.js b/app/assets/javascripts/discourse/app/components/composer-messages.js
index f61980f47c0..b41309e959b 100644
--- a/app/assets/javascripts/discourse/app/components/composer-messages.js
+++ b/app/assets/javascripts/discourse/app/components/composer-messages.js
@@ -86,6 +86,12 @@ export default Component.extend({
         topic: topic,
       });
     },
+
+    switchPM(message) {
+      this.composer.set("action", "privateMessage");
+      this.composer.set("targetRecipients", message.reply_username);
+      this._removeMessage(message);
+    },
   },
 
   // Resets all active messages.
diff --git a/app/assets/javascripts/discourse/app/templates/components/composer-messages.hbs b/app/assets/javascripts/discourse/app/templates/components/composer-messages.hbs
index 4d40a74dda0..2374a83a17a 100644
--- a/app/assets/javascripts/discourse/app/templates/components/composer-messages.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/composer-messages.hbs
@@ -1,3 +1,8 @@
 {{#each messages as |message|}}
-  {{composer-message message=message closeMessage=(action "closeMessage") shareModal=(action "shareModal")}}
+  {{composer-message
+    message=message
+    closeMessage=(action "closeMessage")
+    shareModal=(action "shareModal")
+    switchPM=(action "switchPM")
+  }}
 {{/each}}
diff --git a/app/assets/javascripts/discourse/app/templates/composer/get-a-room.hbs b/app/assets/javascripts/discourse/app/templates/composer/get-a-room.hbs
new file mode 100644
index 00000000000..3a34bde5528
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/templates/composer/get-a-room.hbs
@@ -0,0 +1,10 @@
+<a href {{action closeMessage message}} class="close">{{d-icon "times"}}</a>
+
+{{html-safe message.body}}
+
+{{d-button
+  class="btn-primary"
+  label="user.private_message"
+  icon="envelope"
+  action=(action switchPM message)
+}}
diff --git a/app/assets/stylesheets/desktop/compose.scss b/app/assets/stylesheets/desktop/compose.scss
index 7e0be8be02b..2e9dde05fce 100644
--- a/app/assets/stylesheets/desktop/compose.scss
+++ b/app/assets/stylesheets/desktop/compose.scss
@@ -109,7 +109,8 @@
     background-color: var(--tertiary-low);
   }
 
-  &.dominating-topic-message {
+  &.dominating-topic-message,
+  &.get-a-room {
     bottom: unset;
     padding: 2.25em 6em 2.5em 2.25em;
     p {
diff --git a/config/locales/server.en.yml b/config/locales/server.en.yml
index fef0e34a6d1..f98b153a894 100644
--- a/config/locales/server.en.yml
+++ b/config/locales/server.en.yml
@@ -526,14 +526,7 @@ en:
 
     dominating_topic: You’ve posted more than %{percent}% of the replies here, is there anyone else you would like to hear from?
 
-    get_a_room: |
-      ### Encourage everyone to get involved in the conversation
-
-      You’ve replied %{count} times to @%{reply_username} in this particular topic!
-
-      A great discussion includes many voices and perspectives. Can you get anybody else involved?
-
-      And don’t forget, if you’d like to continue your conversation with this particular user at length outside of public view, [send them a personal message](%{base_path}/u/%{reply_username}).
+    get_a_room: You’ve replied %{count} times to @%{reply_username}, did you know you could send them a personal message instead?
 
     too_many_replies: |
       ### You have reached the reply limit for this topic
diff --git a/lib/composer_messages_finder.rb b/lib/composer_messages_finder.rb
index 1cb989cc2a5..14c98917521 100644
--- a/lib/composer_messages_finder.rb
+++ b/lib/composer_messages_finder.rb
@@ -176,9 +176,10 @@ class ComposerMessagesFinder
 
     {
       id: 'get_a_room',
-      templateName: 'education',
+      templateName: 'get-a-room',
       wait_for_typing: true,
-      extraClass: 'education-message',
+      reply_username: reply_username,
+      extraClass: 'education-message get-a-room',
       body: PrettyText.cook(
         I18n.t(
           'education.get_a_room',
diff --git a/spec/components/composer_messages_finder_spec.rb b/spec/components/composer_messages_finder_spec.rb
index b114560ed8b..855b1875c41 100644
--- a/spec/components/composer_messages_finder_spec.rb
+++ b/spec/components/composer_messages_finder_spec.rb
@@ -423,7 +423,7 @@ describe ComposerMessagesFinder do
           expect(message).to be_present
           expect(message[:id]).to eq('get_a_room')
           expect(message[:wait_for_typing]).to eq(true)
-          expect(message[:templateName]).to eq('education')
+          expect(message[:templateName]).to eq('get-a-room')
 
           expect(UserHistory.exists_for_user?(user, :notified_about_get_a_room)).to eq(true)
         end