Merge pull request #8699 from Couchers-org/na/chat-after-decline

Improve decline flow and add private feedback

Author: nabramow

app/web/components/ConfirmationDialogWrapper.tsx

@@ -15,6 +15,7 @@ interface ConfirmationDialogWrapperProps {
   title: string;
   message: string;
   confirmButtonLabel?: string;
+  cancelButtonLabel?: string;
   onConfirm: () => void;
 }
 
@@ -23,6 +24,7 @@ export default function ConfirmationDialogWrapper({
   title,
   message,
   confirmButtonLabel,
+  cancelButtonLabel,
   onConfirm,
 }: ConfirmationDialogWrapperProps) {
   const { t } = useTranslation();
@@ -42,7 +44,7 @@ export default function ConfirmationDialogWrapper({
         </DialogContent>
         <DialogActions>
           <Button variant="outlined" onClick={() => setIsOpen(false)}>
-            {t("cancel")}
+            {cancelButtonLabel ?? t("cancel")}
           </Button>
           <Button onClick={handleConfirm}>
             {confirmButtonLabel ? confirmButtonLabel : t("confirm")}

app/web/features/messages/constants.ts

@@ -26,4 +26,16 @@ export const requestStatusChangedMessageToTransKey = {
   [HostRequestStatus.HOST_REQUEST_STATUS_PENDING]: null,
 } as const;
 
+export const requestStatusChangedMessageToSelfTransKey = {
+  [HostRequestStatus.HOST_REQUEST_STATUS_ACCEPTED]:
+    "control_message.host_request_status_changed.accepted_self",
+  [HostRequestStatus.HOST_REQUEST_STATUS_CANCELLED]:
+    "control_message.host_request_status_changed.cancelled_self",
+  [HostRequestStatus.HOST_REQUEST_STATUS_CONFIRMED]:
+    "control_message.host_request_status_changed.confirmed_self",
+  [HostRequestStatus.HOST_REQUEST_STATUS_REJECTED]:
+    "control_message.host_request_status_changed.rejected_self",
+  [HostRequestStatus.HOST_REQUEST_STATUS_PENDING]: null,
+} as const;
+
 export const MARK_LAST_SEEN_TIMEOUT = 500;

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

@@ -5,6 +5,7 @@ import InfiniteMessageLoader from "features/messages/messagelist/InfiniteMessage
 import MessageList from "features/messages/messagelist/MessageList";
 import { GetGroupChatMessagesRes } from "proto/conversations_pb";
 import { HostRequest } from "proto/requests_pb";
+import { ReactNode } from "react";
 
 const StyledInfiniteMessageLoader = styled(InfiniteMessageLoader)(
   ({ theme }) => ({
@@ -26,6 +27,7 @@ const ChatContent = ({
   hasNextPage,
   markLastSeen,
   isError,
+  footer,
 }: {
   isHostRequest: boolean;
   isLoading: boolean;
@@ -36,6 +38,7 @@ const ChatContent = ({
   hasNextPage: boolean;
   markLastSeen: (messageId: number) => void;
   isError: boolean;
+  footer?: ReactNode;
 }) => {
   if (isLoading) {
     return <CenteredSpinner minHeight="100%" />;
@@ -60,6 +63,7 @@ const ChatContent = ({
         markLastSeen={markLastSeen}
         messages={messages.pages.map((page) => page.messagesList).flat()}
       />
+      {footer}
     </StyledInfiniteMessageLoader>
   );
 };

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

@@ -3,13 +3,44 @@
   "mark_all_read_button_text_chats": "Mark all chats as read",
   "mark_all_read_button_text_hosting": "Mark all host requests as read",
   "mark_all_read_button_text_surfing": "Mark all surf requests as read",
-  "request_closed_message": "This host request is closed. To continue chatting, send the other person a normal message.",
   "write_reference_button_text": "Write a Reference",
-  "close_request_dialog_title": "Are you done messaging?",
-  "close_request_dialog_host": "Please make sure you are done chatting before you decline their request.",
-  "close_request_dialog_surfer": "Please make sure you are done chatting before you cancel your request.",
+  "reference_card": {
+    "title": "Write a reference",
+    "description": "Share your experience to help the community."
+  },
   "close_request_button_text": "Decline",
+  "respond_box_title": "Send a response",
+  "respond_box_description": "Select a response to let {{name}} know immediately. Feel free to follow up with a message.",
+  "status_bar_edit_button": "Edit",
+  "status_bar_cancel_edit_button": "Cancel",
+  "status_bar_close_button": "Close",
+  "surfer_bar_pending": "You sent a host request — waiting for {{name}} to respond.",
+  "cancel_request_button": "Cancel request",
+  "cancel_request_dialog_title": "Cancel request?",
+  "cancel_request_dialog_message": "Are you sure you want to cancel your request? This cannot be undone.",
+  "cancel_request_dialog_confirm_button": "Yes, cancel",
+  "cancel_request_dialog_dismiss_button": "No",
+  "private_feedback_card": {
+    "title": "Feedback on this request",
+    "quality_label": "Privately rate this request (Optional):",
+    "quality_high": "High quality",
+    "quality_okay": "Okay",
+    "quality_low": "Low quality",
+    "decline_reason_label": "Why did you decline?",
+    "reason_didnt_read_profile": "Didn't read my profile",
+    "reason_dont_want_to_host": "I don't want to host this person",
+    "reason_not_available": "I'm not available to host then",
+    "reason_other": "Other",
+    "reason_other_placeholder": "Please tell us more...",
+    "privacy_notice": "Your responses are private and will not be shared with the user. We may use them in an aggregated and anonymous form—combined with many others—to improve feedback for all users.",
+    "skip_button": "Skip",
+    "next_button": "Next",
+    "back_button": "Back",
+    "submit_button": "Submit"
+  },
   "confirm_request_button_text": "Confirm",
+  "surfer_confirm_box_title": "{{name}} accepted your request!",
+  "surfer_confirm_box_description": "Confirm to lock in your stay, or cancel if your plans have changed.",
   "host_pending_request_help_text": "<0>Things to consider</0> before responding.",
   "surfer_declined_request_help_text": "<0>Read our guide</0> on how to write a request that will get accepted.",
   "past_request_help_text": "This request is in the past, you can still send messages but cannot otherwise modify it.",
@@ -136,9 +167,13 @@
     "admin_removal_text": "{{user}} removed {{target_user}} as admin",
     "host_request_status_changed": {
       "accepted": "{{user}} has accepted the request",
+      "accepted_self": "You have accepted the request",
       "cancelled": "{{user}} has cancelled the request",
+      "cancelled_self": "You have cancelled the request",
       "confirmed": "{{user}} has confirmed the request",
-      "rejected": "{{user}} has rejected the request"
+      "confirmed_self": "You have confirmed the request",
+      "rejected": "{{user}} has declined the request",
+      "rejected_self": "You have declined the request"
     },
     "unknown_message_text": "Unknown control message"
   },
@@ -155,14 +190,15 @@
     "pending": "This request is still pending",
     "host_status": {
       "accepted": "You have accepted this request",
+      "accepted_waiting": "You have accepted this request — waiting for the surfer to confirm.",
       "cancelled": "You have cancelled this request",
-      "confirmed": "You have confirmed this request",
+      "confirmed": "Have fun! You have accepted and the surfer has confirmed this request.",
       "rejected": "You have declined this request"
     },
     "surfer_status": {
-      "accepted": "Your request was accepted",
+      "accepted": "Have fun! {{name}} has accepted the request.",
       "cancelled": "Your request was cancelled",
-      "confirmed": "Your request was confirmed",
+      "confirmed": "Have fun! {{name}} accepted and you confirmed this request.",
       "rejected": "Your request was declined"
     }
   },

app/web/features/messages/messagelist/ControlMessageView.tsx

@@ -1,5 +1,6 @@
 import { Skeleton, styled } from "@mui/material";
 import TextBody from "components/TextBody";
+import { useAuthContext } from "features/auth/AuthProvider";
 import { useLiteUser } from "features/userQueries/useLiteUsers";
 import { useTranslation } from "i18n";
 import { MESSAGES } from "i18n/namespaces";
@@ -35,6 +36,7 @@ export default function ControlMessageView({
   className,
 }: MessageProps) {
   const { t } = useTranslation(MESSAGES);
+  const { authState } = useAuthContext();
   const { data: author, isLoading: isAuthorLoading } = useLiteUser(
     message.authorUserId,
   );
@@ -64,6 +66,7 @@ export default function ControlMessageView({
               user: authorName,
               target_user: targetName,
               t,
+              isCurrentUser: message.authorUserId === authState.userId,
             })}
           </TextBody>
         ) : (