feat: show description text when making a message request

disabled conversation header functionality

_locales/en/messages.json

@@ -306,6 +306,7 @@
   "messageRequestAcceptedOurs": "You have accepted $name$'s message request",
   "messageRequestAcceptedOursNoName": "You have accepted the message request",
   "messageRequestPending": "Your message request is currently pending",
+  "messageRequestPendingDescription": "You will be able to send voice messages and attachments once the recipient has approved this message request.",
   "messageRequests": "Message Requests",
   "messageRequestsAcceptDescription": "Sending a message to this user will automatically accept their message request and reveal your Account ID.",
   "messagesHeader": "Conversations",

ts/components/conversation/MessageRequestButtons.tsx

@@ -1,6 +1,6 @@
 import { useSelector } from 'react-redux';
 import styled from 'styled-components';
-import { useIsIncomingRequest } from '../../hooks/useParamSelector';
+import { useIsIncomingRequest, useIsOutgoingRequest } from '../../hooks/useParamSelector';
 import {
   approveConvoAndSendResponse,
   declineConversationWithConfirm,
@@ -9,7 +9,10 @@ import { getConversationController } from '../../session/conversations';
 import { hasSelectedConversationIncomingMessages } from '../../state/selectors/conversations';
 import { useSelectedConversationKey } from '../../state/selectors/selectedConversation';
 import { SessionButton, SessionButtonColor } from '../basic/SessionButton';
-import { ConversationRequestExplanation } from './SubtleNotification';
+import {
+  ConversationIncomingRequestExplanation,
+  ConversationOutgoingRequestExplanation,
+} from './SubtleNotification';
 
 const ConversationRequestBanner = styled.div`
   display: flex;
@@ -17,7 +20,7 @@ const ConversationRequestBanner = styled.div`
   justify-content: center;
   padding: var(--margins-lg);
   gap: var(--margins-lg);
-  background-color: var(--background-secondary-color);
+  text-align: center;
 `;
 
 const ConversationBannerRow = styled.div`
@@ -77,45 +80,46 @@ export const ConversationMessageRequestButtons = () => {
 
   const hasIncomingMessages = useSelector(hasSelectedConversationIncomingMessages);
   const isIncomingRequest = useIsIncomingRequest(selectedConvoId);
+  const isOutgoingRequest = useIsOutgoingRequest(selectedConvoId);
 
-  if (!selectedConvoId || !hasIncomingMessages) {
-    return null;
-  }
-
-  if (!isIncomingRequest) {
+  if (!selectedConvoId || (!isIncomingRequest && !isOutgoingRequest)) {
     return null;
   }
 
   return (
     <ConversationRequestBanner>
-      <StyledBlockUserText
-        onClick={() => {
-          handleDeclineAndBlockConversationRequest(selectedConvoId, selectedConvoId);
-        }}
-        data-testid="decline-and-block-message-request"
-      >
-        {window.i18n('block')}
-      </StyledBlockUserText>
-
-      <ConversationRequestExplanation />
-
-      <ConversationBannerRow>
-        <SessionButton
-          onClick={async () => {
-            await handleAcceptConversationRequest(selectedConvoId);
-          }}
-          text={window.i18n('accept')}
-          dataTestId="accept-message-request"
-        />
-        <SessionButton
-          buttonColor={SessionButtonColor.Danger}
-          text={window.i18n('decline')}
-          onClick={() => {
-            handleDeclineConversationRequest(selectedConvoId, selectedConvoId);
-          }}
-          dataTestId="decline-message-request"
-        />
-      </ConversationBannerRow>
+      {isOutgoingRequest && !hasIncomingMessages ? (
+        <ConversationOutgoingRequestExplanation />
+      ) : (
+        <>
+          <StyledBlockUserText
+            onClick={() => {
+              handleDeclineAndBlockConversationRequest(selectedConvoId, selectedConvoId);
+            }}
+            data-testid="decline-and-block-message-request"
+          >
+            {window.i18n('block')}
+          </StyledBlockUserText>
+          <ConversationIncomingRequestExplanation />
+          <ConversationBannerRow>
+            <SessionButton
+              onClick={async () => {
+                await handleAcceptConversationRequest(selectedConvoId);
+              }}
+              text={window.i18n('accept')}
+              dataTestId="accept-message-request"
+            />
+            <SessionButton
+              buttonColor={SessionButtonColor.Danger}
+              text={window.i18n('decline')}
+              onClick={() => {
+                handleDeclineConversationRequest(selectedConvoId, selectedConvoId);
+              }}
+              dataTestId="decline-message-request"
+            />
+          </ConversationBannerRow>
+        </>
+      )}
     </ConversationRequestBanner>
   );
 };

ts/components/conversation/SubtleNotification.tsx

@@ -1,6 +1,6 @@
 import { useSelector } from 'react-redux';
 import styled from 'styled-components';
-import { useIsIncomingRequest } from '../../hooks/useParamSelector';
+import { useIsIncomingRequest, useIsOutgoingRequest } from '../../hooks/useParamSelector';
 import {
   getSelectedHasMessages,
   hasSelectedConversationIncomingMessages,
@@ -29,11 +29,33 @@ const TextInner = styled.div`
   max-width: 390px;
 `;
 
+/**
+ * This component is used to display a warning when the user is sending a message request.
+ *
+ */
+export const ConversationOutgoingRequestExplanation = () => {
+  const selectedConversation = useSelectedConversationKey();
+  const isOutgoingMessageRequest = useIsOutgoingRequest(selectedConversation);
+  const hasIncomingMessages = useSelector(hasSelectedConversationIncomingMessages);
+
+  const showMsgRequestUI = selectedConversation && isOutgoingMessageRequest;
+
+  if (!showMsgRequestUI || hasIncomingMessages) {
+    return null;
+  }
+
+  return (
+    <Container data-testid={'empty-conversation-control-message'} style={{ padding: 0 }}>
+      <TextInner>{window.i18n('messageRequestPendingDescription')}</TextInner>
+    </Container>
+  );
+};
+
 /**
  * This component is used to display a warning when the user is responding to a message request.
  *
  */
-export const ConversationRequestExplanation = () => {
+export const ConversationIncomingRequestExplanation = () => {
   const selectedConversation = useSelectedConversationKey();
   const isIncomingMessageRequest = useIsIncomingRequest(selectedConversation);
 

ts/components/conversation/header/ConversationHeader.tsx

@@ -3,6 +3,7 @@ import { isMessageSelectionMode } from '../../../state/selectors/conversations';
 
 import { openRightPanel } from '../../../state/ducks/conversations';
 
+import { useIsOutgoingRequest } from '../../../hooks/useParamSelector';
 import { useSelectedConversationKey } from '../../../state/selectors/selectedConversation';
 import { Flex } from '../../basic/Flex';
 import { AvatarHeader, CallButton } from './ConversationHeaderItems';
@@ -12,6 +13,8 @@ import { ConversationHeaderTitle } from './ConversationHeaderTitle';
 export const ConversationHeaderWithDetails = () => {
   const isSelectionMode = useSelector(isMessageSelectionMode);
   const selectedConvoKey = useSelectedConversationKey();
+  const isOutgoingRequest = useIsOutgoingRequest(selectedConvoKey);
+
   const dispatch = useDispatch();
 
   if (!selectedConvoKey) {
@@ -27,9 +30,9 @@ export const ConversationHeaderWithDetails = () => {
         width="100%"
         flexGrow={1}
       >
-        <ConversationHeaderTitle />
+        <ConversationHeaderTitle showSubtitle={!isOutgoingRequest} />
 
-        {!isSelectionMode && (
+        {!isOutgoingRequest && !isSelectionMode && (
           <Flex
             container={true}
             flexDirection="row"

ts/components/conversation/header/ConversationHeaderTitle.tsx

@@ -30,7 +30,13 @@ export type SubtitleStringsType = keyof Pick<
   'notifications' | 'members' | 'disappearingMessages'
 >;
 
-export const ConversationHeaderTitle = () => {
+type ConversationHeaderTitleProps = {
+  showSubtitle?: boolean;
+};
+
+export const ConversationHeaderTitle = (props: ConversationHeaderTitleProps) => {
+  const { showSubtitle = true } = props;
+
   const dispatch = useDispatch();
   const convoId = useSelectedConversationKey();
   const convoName = useSelectedNicknameOrProfileNameOrShortenedPubkey();
@@ -163,7 +169,7 @@ export const ConversationHeaderTitle = () => {
               {convoName}
             </span>
           )}
-          {subtitleArray.indexOf(visibleSubtitle) > -1 && (
+          {showSubtitle && subtitleArray.indexOf(visibleSubtitle) > -1 && (
             <ConversationHeaderSubtitle
               currentSubtitle={visibleSubtitle}
               setCurrentSubtitle={setVisibleSubtitle}

ts/types/LocalizerKeys.ts

@@ -306,6 +306,7 @@ export type LocalizerKeys =
   | 'messageRequestAcceptedOurs'
   | 'messageRequestAcceptedOursNoName'
   | 'messageRequestPending'
+  | 'messageRequestPendingDescription'
   | 'messageRequests'
   | 'messageRequestsAcceptDescription'
   | 'messageWillDisappear'