From d6ad37ec38eb7ad4f748e2f9904ed2a25c4ff3c9 Mon Sep 17 00:00:00 2001 From: William Grant Date: Mon, 6 May 2024 13:54:37 +1000 Subject: [PATCH] feat: show description text when making a message request disabled conversation header functionality --- _locales/en/messages.json | 1 + .../conversation/MessageRequestButtons.tsx | 76 ++++++++++--------- .../conversation/SubtleNotification.tsx | 26 ++++++- .../header/ConversationHeader.tsx | 7 +- .../header/ConversationHeaderTitle.tsx | 10 ++- ts/types/LocalizerKeys.ts | 1 + 6 files changed, 79 insertions(+), 42 deletions(-) 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 && (