Web/profile: One-shot message form on user profile

app/web/features/messages/groupchats/CreateGroupChat.tsx

@@ -3,7 +3,6 @@ import {
   ListItemButton,
   ListItemText,
   styled,
-  Typography,
 } from "@mui/material";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import Alert from "components/Alert";
@@ -22,7 +21,7 @@ import useFriendList from "features/connections/friends/useFriendList";
 import { groupChatsListKey } from "features/queryKeys";
 import useUserByUsername from "features/userQueries/useUserByUsername";
 import { RpcError } from "grpc-web";
-import { Trans, useTranslation } from "i18n";
+import { useTranslation } from "i18n";
 import { MESSAGES } from "i18n/namespaces";
 import { useRouter } from "next/router";
 import { LiteUser, User } from "proto/api_pb";
@@ -249,17 +248,6 @@ export default function CreateGroupChat({ className }: { className?: string }) {
               </Button>
             )}
           </DialogActions>
-          {createMessageToUsername && (
-            <Typography
-              variant="body2"
-              sx={{ px: 3, pb: 2, textAlign: "center" }}
-            >
-              <Trans
-                i18nKey="messages:create_chat.hosting_request_hint"
-                components={{ back: <strong />, request: <strong /> }}
-              />
-            </Typography>
-          )}
         </form>
       </Dialog>
     </>

app/web/features/messages/locales/ca.json

@@ -8,8 +8,7 @@
     "user_load_error_message": "(Error en carregar l'usuari)",
     "friends_input_label": "Amics",
     "create_button": "Crea el xat",
-    "back_button": "Enrere",
-    "hosting_request_hint": "Envies una sol·licitud d'allotjament? Torna <back>Enrere</back> i fes servir el botó <request>Sol·licita</request>."
+    "back_button": "Enrere"
   },
   "chat_input": {
     "label": "Missatge"

app/web/features/messages/locales/de.json

@@ -57,8 +57,7 @@
     "friends_input_label": "Freunde",
     "title_label": "Titel",
     "create_button": "Chat erstellen",
-    "back_button": "Zurück",
-    "hosting_request_hint": "Möchtest du eine Host-Anfrage senden? Gehe <back>Zurück</back> und benutze stattdessen den <request>Anfragen</request>-Button."
+    "back_button": "Zurück"
   },
   "admins_dialog": {
     "step_down_confirmation_dialog": {

app/web/features/messages/locales/en.json

@@ -83,8 +83,7 @@
     "friends_input_label": "Friends",
     "title_label": "Title",
     "create_button": "Create chat",
-    "back_button": "Back",
-    "hosting_request_hint": "Sending a hosting request? Go <back>Back</back> and use the <request>Request</request> button instead."
+    "back_button": "Back"
   },
   "chat_input": {
     "label": "Message"

app/web/features/messages/locales/es.json

@@ -52,8 +52,7 @@
     "user_load_error_message": "(Error de carga de usuario)",
     "title_label": "Título",
     "create_button": "Crear chat",
-    "back_button": "Atrás",
-    "hosting_request_hint": "¿Enviando una solicitud de alojamiento? Vuelve <back>Atrás</back> y usa el botón <request>Solicitar</request> en su lugar."
+    "back_button": "Atrás"
   },
   "chat_input": {
     "label": "Mensaje"

app/web/features/messages/locales/nl.json

@@ -72,8 +72,7 @@
     "friends_input_label": "Vrienden",
     "title_label": "Titel",
     "create_button": "Chat aanmaken",
-    "back_button": "Terug",
-    "hosting_request_hint": "Een hosting-verzoek doen? Ga <back>terug</back> en gebruik in plaats daarvan de <request>Verzoek</request> knop."
+    "back_button": "Terug"
   },
   "chat_input": {
     "label": "Bericht"

app/web/features/messages/locales/pt_BR.json

@@ -96,8 +96,7 @@
     "user_load_error_message": "(Erro de carregamento de usuário)",
     "friends_input_label": "Amigos",
     "create_button": "Criar conversa",
-    "back_button": "Voltar",
-    "hosting_request_hint": "Enviando uma solicitação de hospedagem? <back>Volte</back> e use o botão <request>Solicitar</request> em vez disso."
+    "back_button": "Voltar"
   },
   "group_chat_settings_dialog": {
     "title": "Configurações de conversa em grupo",

app/web/features/messages/locales/ru.json

@@ -123,8 +123,7 @@
     "friends_input_label": "Друзья",
     "title_label": "Заголовок",
     "create_button": "Создать чат",
-    "back_button": "Назад",
-    "hosting_request_hint": "Отправляете запрос на хостинг? Вернитесь <back>Назад</back> и используйте кнопку <request>Запрос</request>."
+    "back_button": "Назад"
   },
   "leave_chat_dialog": {
     "message": "Вы уверены, что хотите покинуть этот чат?",

app/web/features/profile/actions/MessageUserButton.test.tsx

@@ -3,7 +3,7 @@ import userEvent from "@testing-library/user-event";
 import MessageUserButton from "features/profile/actions/MessageUserButton";
 import mockRouter from "next-router-mock";
 import React from "react";
-import { routeToCreateMessage, routeToGroupChat } from "routes";
+import { routeToGroupChat } from "routes";
 import { service } from "service";
 import users from "test/fixtures/users.json";
 import wrapper from "test/hookWrapper";
@@ -13,6 +13,7 @@ import { MockedService } from "test/utils";
 const { t } = i18n;
 
 const setErrorMock = jest.fn();
+const setIsMessagingMock = jest.fn();
 const getDirectMessageMock = service.conversations
   .getDirectMessage as MockedService<
   typeof service.conversations.getDirectMessage
@@ -47,14 +48,19 @@ const incompleteAccountInfo = { ...accountInfo, profileComplete: false };
 describe("MessageUserButton", () => {
   beforeEach(() => {
     setErrorMock.mockClear();
+    setIsMessagingMock.mockClear();
   });
 
   it("redirects to thread if dm exists", async () => {
     getAccountInfoMock.mockResolvedValue(accountInfo);
     getDirectMessageMock.mockResolvedValueOnce(99);
     const mockUser = users[0];
     render(
-      <MessageUserButton user={mockUser} setMutationError={setErrorMock} />,
+      <MessageUserButton
+        user={mockUser}
+        setMutationError={setErrorMock}
+        setIsMessaging={setIsMessagingMock}
+      />,
       {
         wrapper,
       },
@@ -73,12 +79,16 @@ describe("MessageUserButton", () => {
     await waitFor(() => expect(mockRouter.pathname).toBe(routeToGroupChat(99)));
   });
 
-  it("redirects to chat tab with state if dm doesn't exist", async () => {
+  it("opens the inline message form if dm doesn't exist", async () => {
     getAccountInfoMock.mockResolvedValue(accountInfo);
     getDirectMessageMock.mockResolvedValueOnce(false);
     const mockUser = users[0];
     render(
-      <MessageUserButton user={mockUser} setMutationError={setErrorMock} />,
+      <MessageUserButton
+        user={mockUser}
+        setMutationError={setErrorMock}
+        setIsMessaging={setIsMessagingMock}
+      />,
       {
         wrapper,
       },
@@ -94,17 +104,19 @@ describe("MessageUserButton", () => {
 
     await user.click(button);
 
-    await waitFor(() =>
-      expect(mockRouter.asPath).toBe(routeToCreateMessage(mockUser.username)),
-    );
+    await waitFor(() => expect(setIsMessagingMock).toHaveBeenCalledWith(true));
   });
 
   it("pops up incomplete profile note if profile is incomplete", async () => {
     getAccountInfoMock.mockResolvedValue(incompleteAccountInfo);
     getDirectMessageMock.mockResolvedValueOnce(false);
     const mockUser = users[0];
     render(
-      <MessageUserButton user={mockUser} setMutationError={setErrorMock} />,
+      <MessageUserButton
+        user={mockUser}
+        setMutationError={setErrorMock}
+        setIsMessaging={setIsMessagingMock}
+      />,
       {
         wrapper,
       },

app/web/features/profile/actions/MessageUserButton.tsx

@@ -1,43 +1,26 @@
-import { useMutation } from "@tanstack/react-query";
 import Button from "components/Button";
 import ProfileIncompleteDialog from "components/ProfileIncompleteDialog/ProfileIncompleteDialog";
 import useAccountInfo from "features/auth/useAccountInfo";
+import useMessageUser from "features/profile/hooks/useMessageUser";
 import { useTranslation } from "i18n";
 import { PROFILE } from "i18n/namespaces";
-import { useRouter } from "next/router";
 import { User } from "proto/api_pb";
 import { useState } from "react";
-import { service } from "service";
-
-import { routeToCreateMessage, routeToGroupChat } from "../../../routes";
 
 export default function MessageUserButton({
   user,
   setMutationError,
+  setIsMessaging,
 }: {
   user: User.AsObject;
   setMutationError: (value: string) => void;
+  setIsMessaging: (value: boolean) => void;
 }) {
   const { t } = useTranslation(PROFILE);
-  const router = useRouter();
-  const { mutate, isPending } = useMutation<number | false, Error>({
-    mutationFn: () => service.conversations.getDirectMessage(user.userId),
-
-    onMutate() {
-      setMutationError("");
-    },
-    onError(e) {
-      setMutationError(e.message);
-    },
-    onSuccess(data) {
-      if (!data) {
-        //no existing thread
-        router.push(routeToCreateMessage(user.username));
-      } else {
-        //has thread
-        router.push(routeToGroupChat(data));
-      }
-    },
+  const { mutate, isPending } = useMessageUser({
+    userId: user.userId,
+    setMutationError,
+    setIsMessaging,
   });
 
   const [showCantMessageDialog, setShowCantMessageDialog] =

app/web/features/profile/hooks/useMessageUser.ts

@@ -0,0 +1,36 @@
+import { useMutation } from "@tanstack/react-query";
+import { useRouter } from "next/router";
+import { routeToGroupChat } from "routes";
+import { service } from "service";
+
+interface UseMessageUserParams {
+  userId: number;
+  setMutationError: (value: string) => void;
+  setIsMessaging: (value: boolean) => void;
+}
+
+export default function useMessageUser({
+  userId,
+  setMutationError,
+  setIsMessaging,
+}: UseMessageUserParams) {
+  const router = useRouter();
+  return useMutation<number | false, Error>({
+    mutationFn: () => service.conversations.getDirectMessage(userId),
+    onMutate() {
+      setMutationError("");
+    },
+    onError(e) {
+      setMutationError(e.message);
+    },
+    onSuccess(groupChatId) {
+      if (!groupChatId) {
+        // no existing thread — open inline form
+        setIsMessaging(true);
+      } else {
+        // has thread
+        router.push(routeToGroupChat(groupChatId));
+      }
+    },
+  });
+}

app/web/features/profile/locales/ca.json

@@ -233,6 +233,9 @@
     "request_chars_remaining_other": "Escriu almenys {{count}} caràcters més per enviar una sol·licitud d'allotjament.",
     "success": "Sol·licitud enviada!"
   },
+  "message_form": {
+    "hosting_request_hint": "Envies una sol·licitud d'allotjament? Fes servir el botó <request>Sol·licita</request>."
+  },
   "reference_filter_label": {
     "friend": "D'amics",
     "hosted": "D'amfitrions",

app/web/features/profile/locales/de.json

@@ -217,6 +217,9 @@
     "request_chars_remaining_one": "Bitte schreibe mindestens noch {{count}} Zeichen, um eine Host-Anfrage zu senden.",
     "request_chars_remaining_other": "Bitte schreibe mindestens noch {{count}} Zeichen, um eine Host-Anfrage zu senden."
   },
+  "message_form": {
+    "hosting_request_hint": "Möchtest du eine Host-Anfrage senden? Benutze stattdessen den <request>Anfragen</request>-Button."
+  },
   "response_rate_text_some": "Manchmal",
   "reference_filter_label": {
     "friend": "Von Freunden",

app/web/features/profile/locales/en.json

@@ -232,6 +232,14 @@
     "request_chars_remaining_other": "Please write at least {{count}} more characters to send a host request.",
     "success": "Request sent!"
   },
+  "message_form": {
+    "send_message": "Send {{name}} a message",
+    "message": "Message",
+    "message_description": "Write your message...",
+    "message_empty": "Please write a message.",
+    "hosting_request_hint": "Sending a hosting request? Use the <request>Request</request> button instead.",
+    "success": "Message sent!"
+  },
   "reference_filter_label": {
     "friend": "From friends",
     "hosted": "From hosts",

app/web/features/profile/locales/es.json

@@ -200,6 +200,9 @@
     "request_chars_remaining_many": "Por favor, escribe al menos {{count}} de caracteres más para enviar una solicitud de hospedaje.",
     "request_chars_remaining_other": "Por favor, escribe al menos {{count}} carácteres más para enviar una solicitud de hospedaje."
   },
+  "message_form": {
+    "hosting_request_hint": "¿Enviando una solicitud de alojamiento? Usa el botón <request>Solicitar</request> en su lugar."
+  },
   "my_connections": "Mis contactos",
   "active": "Activo",
   "sleeping_arrangement": {

app/web/features/profile/locales/nl.json

@@ -237,6 +237,9 @@
     "request_description_empty": "Schrijf alsjeblieft een verzoekbericht.",
     "success": "Verzoek verzonden!"
   },
+  "message_form": {
+    "hosting_request_hint": "Een hosting-verzoek doen? Gebruik in plaats daarvan de <request>Verzoek</request> knop."
+  },
   "reference_filter_label": {
     "friend": "Van vrienden",
     "hosted": "Van hosts",

app/web/features/profile/locales/pt_BR.json

@@ -233,6 +233,9 @@
     "request_chars_remaining_other": "Escreva pelo menos mais {{count}} caracteres a mais para enviar uma solicitação de hospedagem.",
     "success": "Solicitação enviada!"
   },
+  "message_form": {
+    "hosting_request_hint": "Enviando uma solicitação de hospedagem? Use o botão <request>Solicitar</request> em vez disso."
+  },
   "reference_filter_label": {
     "friend": "De amigos",
     "hosted": "De anfitriões",

app/web/features/profile/locales/ru.json

@@ -177,6 +177,9 @@
     "request_chars_remaining_few": "Пожалуйста, напишите ещё как минимум {{count}} символа, чтобы отправить запрос хосту.",
     "request_chars_remaining_many": "Пожалуйста, напишите ещё как минимум {{count}} символов, чтобы отправить запрос хосту."
   },
+  "message_form": {
+    "hosting_request_hint": "Отправляете запрос на хостинг? Используйте кнопку <request>Запрос</request>."
+  },
   "open_profile_new_tab": "Открыть профиль в новой вкладке",
   "see_more_references": "Показать ещё отзывы",
   "write_reference": "Написать отзыв",