diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index 2f83b1dd4..d5f0664fc 100644
--- a/_locales/en/messages.json
+++ b/_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",
diff --git a/ts/components/conversation/MessageRequestButtons.tsx b/ts/components/conversation/MessageRequestButtons.tsx
index f2b4a6f31..13872f90d 100644
--- a/ts/components/conversation/MessageRequestButtons.tsx
+++ b/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 (
- {
- handleDeclineAndBlockConversationRequest(selectedConvoId, selectedConvoId);
- }}
- data-testid="decline-and-block-message-request"
- >
- {window.i18n('block')}
-
-
-
-
-
- {
- await handleAcceptConversationRequest(selectedConvoId);
- }}
- text={window.i18n('accept')}
- dataTestId="accept-message-request"
- />
- {
- handleDeclineConversationRequest(selectedConvoId, selectedConvoId);
- }}
- dataTestId="decline-message-request"
- />
-
+ {isOutgoingRequest && !hasIncomingMessages ? (
+
+ ) : (
+ <>
+ {
+ handleDeclineAndBlockConversationRequest(selectedConvoId, selectedConvoId);
+ }}
+ data-testid="decline-and-block-message-request"
+ >
+ {window.i18n('block')}
+
+
+
+ {
+ await handleAcceptConversationRequest(selectedConvoId);
+ }}
+ text={window.i18n('accept')}
+ dataTestId="accept-message-request"
+ />
+ {
+ handleDeclineConversationRequest(selectedConvoId, selectedConvoId);
+ }}
+ dataTestId="decline-message-request"
+ />
+
+ >
+ )}
);
};
diff --git a/ts/components/conversation/SubtleNotification.tsx b/ts/components/conversation/SubtleNotification.tsx
index 336fe03e2..53813f592 100644
--- a/ts/components/conversation/SubtleNotification.tsx
+++ b/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 (
+
+ {window.i18n('messageRequestPendingDescription')}
+
+ );
+};
+
/**
* 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);
diff --git a/ts/components/conversation/header/ConversationHeader.tsx b/ts/components/conversation/header/ConversationHeader.tsx
index 4a40d520b..238c7aba6 100644
--- a/ts/components/conversation/header/ConversationHeader.tsx
+++ b/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}
>
-
+
- {!isSelectionMode && (
+ {!isOutgoingRequest && !isSelectionMode && (
;
-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}
)}
- {subtitleArray.indexOf(visibleSubtitle) > -1 && (
+ {showSubtitle && subtitleArray.indexOf(visibleSubtitle) > -1 && (