fix: show composition & call button disabled when blocked

also offer to unblock on composition box clicks

Author: Bilb

stylesheets/_session_conversation.scss

@@ -92,6 +92,7 @@
 }
 
 .composition-container {
+  position: relative;
   display: flex;
   justify-content: center;
   align-items: center;

ts/components/conversation/composition/CompositionBox.tsx

@@ -23,6 +23,8 @@ import {
   getIsSelectedBlocked,
   getSelectedCanWrite,
   getSelectedConversationKey,
+  useSelectedConversationKey,
+  useSelectedIsBlocked,
 } from '../../../state/selectors/selectedConversation';
 import { AttachmentType } from '../../../types/Attachment';
 import { processNewAttachment } from '../../../types/MessageAttachment';
@@ -53,6 +55,7 @@ import { CompositionTextArea } from './CompositionTextArea';
 import { cleanMentions, mentionsRegex } from './UserMentions';
 import { HTMLDirection } from '../../../util/i18n/rtlSupport';
 import type { FixedBaseEmoji } from '../../../types/Reaction';
+import { useShowBlockUnblock } from '../../menuAndSettingsHooks/useShowBlockUnblock';
 
 export interface ReplyingToMessageProps {
   convoId: string;
@@ -299,6 +302,7 @@ class CompositionBoxInner extends Component<Props, State> {
         {this.renderAttachmentsStaged()}
         <div className="composition-container">
           {showRecordingView ? this.renderRecordingView() : this.renderCompositionView()}
+          <BlockedOverlayOnCompositionBox />
         </div>
       </Flex>
     );
@@ -397,7 +401,8 @@ class CompositionBoxInner extends Component<Props, State> {
 
     // we completely hide the composition box when typing is not enabled now.
     // Actually not anymore. We want the above, except when we can't write because that user is blocked.
-    // When that user is blocked, **and only then**, we want to show the composition box, disabled with the placeholder "unblock to send".
+    // When that user is blocked, **and only then**, we want to show the composition box, disabled with the placeholder "unblock to send", and the buttons disabled.
+    // A click on the composition box should bring the "unblock user" dialog.
     if (!typingEnabled && !isBlocked) {
       return null;
     }
@@ -410,7 +415,9 @@ class CompositionBoxInner extends Component<Props, State> {
         $alignItems={'center'}
         width={'100%'}
       >
-        {typingEnabled && <AddStagedAttachmentButton onClick={this.onChooseAttachment} />}
+        {typingEnabled || isBlocked ? (
+          <AddStagedAttachmentButton onClick={this.onChooseAttachment} />
+        ) : null}
         <input
           className="hidden"
           placeholder="Attachment"
@@ -419,7 +426,9 @@ class CompositionBoxInner extends Component<Props, State> {
           type="file"
           onChange={this.onChoseAttachment}
         />
-        {typingEnabled && <StartRecordingButton onClick={this.onLoadVoiceNoteView} />}
+        {typingEnabled || isBlocked ? (
+          <StartRecordingButton onClick={this.onLoadVoiceNoteView} />
+        ) : null}
         <StyledSendMessageInput
           role="main"
           dir={this.props.htmlDirection}
@@ -948,3 +957,36 @@ const mapStateToProps = (state: StateType) => {
 const smart = connect(mapStateToProps);
 
 export const CompositionBox = smart(CompositionBoxInner);
+
+const StyledBlockedOverlayOnCompositionBox = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 2;
+  background-color: transparent;
+  cursor: pointer;
+`;
+
+/**
+ * Note: This component is to be removed once we get the updated composition box PR merged.
+ * It is only used to hijack the clicks on the composition box and display the "unblock user dialog",
+ * when that user is currently blocked.
+ * The reason it was easier to do it this way is because the buttons of the composition box do not react
+ * to click events when they are disabled.
+ *
+ * Note2: Actually having this component offer the unblock user dialog on click right away is convenient as a UX.
+ * Maybe we should keep it?
+ */
+function BlockedOverlayOnCompositionBox() {
+  const selectedConvoKey = useSelectedConversationKey();
+  const isBlocked = useSelectedIsBlocked();
+  const blockUnblockCb = useShowBlockUnblock(selectedConvoKey);
+
+  if (!isBlocked) {
+    return null;
+  }
+
+  return <StyledBlockedOverlayOnCompositionBox onClick={blockUnblockCb?.cb} />;
+}

ts/components/conversation/composition/CompositionButtons.tsx

@@ -1,7 +1,10 @@
 import { forwardRef } from 'react';
 import styled from 'styled-components';
 import { useIsOutgoingRequest } from '../../../hooks/useParamSelector';
-import { useSelectedConversationKey } from '../../../state/selectors/selectedConversation';
+import {
+  useSelectedConversationKey,
+  useSelectedIsBlocked,
+} from '../../../state/selectors/selectedConversation';
 import { SessionIconButton } from '../../icon';
 
 const StyledChatButtonContainer = styled.div<{ disabled?: boolean }>`
@@ -22,8 +25,11 @@ export const AddStagedAttachmentButton = (props: { onClick: () => void }) => {
   const selectedConvoKey = useSelectedConversationKey();
   const isOutgoingRequest = useIsOutgoingRequest(selectedConvoKey);
 
+  const isBlocked = useSelectedIsBlocked();
+  const disabled = isOutgoingRequest || isBlocked;
+
   return (
-    <StyledChatButtonContainer disabled={isOutgoingRequest}>
+    <StyledChatButtonContainer disabled={disabled}>
       <SessionIconButton
         iconType="plusThin"
         backgroundColor={'var(--chat-buttons-background-color)'}
@@ -33,7 +39,7 @@ export const AddStagedAttachmentButton = (props: { onClick: () => void }) => {
         iconPadding="8px"
         onClick={props.onClick}
         dataTestId="attachments-button"
-        disabled={isOutgoingRequest}
+        disabled={disabled}
       />
     </StyledChatButtonContainer>
   );
@@ -42,9 +48,11 @@ export const AddStagedAttachmentButton = (props: { onClick: () => void }) => {
 export const StartRecordingButton = (props: { onClick: () => void }) => {
   const selectedConvoKey = useSelectedConversationKey();
   const isOutgoingRequest = useIsOutgoingRequest(selectedConvoKey);
+  const isBlocked = useSelectedIsBlocked();
+  const disabled = isOutgoingRequest || isBlocked;
 
   return (
-    <StyledChatButtonContainer disabled={isOutgoingRequest}>
+    <StyledChatButtonContainer disabled={disabled}>
       <SessionIconButton
         iconType="microphone"
         iconSize={'huge2'}
@@ -53,7 +61,7 @@ export const StartRecordingButton = (props: { onClick: () => void }) => {
         borderRadius="300px"
         iconPadding="6px"
         onClick={props.onClick}
-        disabled={isOutgoingRequest}
+        disabled={disabled}
         dataTestId="microphone-button"
       />
     </StyledChatButtonContainer>

ts/components/conversation/header/ConversationHeader.tsx

@@ -12,6 +12,7 @@ import {
 import {
   useIsMessageSelectionMode,
   useSelectedConversationKey,
+  useSelectedIsBlocked,
   useSelectedIsLegacyGroup,
   useSelectedWeAreAdmin,
 } from '../../../state/selectors/selectedConversation';
@@ -33,6 +34,7 @@ export const ConversationHeaderWithDetails = () => {
   const isSelectionMode = useIsMessageSelectionMode();
   const selectedConvoKey = useSelectedConversationKey();
   const isOutgoingRequest = useIsOutgoingRequest(selectedConvoKey);
+  const isBlocked = useSelectedIsBlocked();
 
   const showConvoSettingsCb = useShowConversationSettingsFor(selectedConvoKey);
 
@@ -49,7 +51,7 @@ export const ConversationHeaderWithDetails = () => {
         width="100%"
         $flexGrow={1}
       >
-        <ConversationHeaderTitle showSubtitle={!isOutgoingRequest} />
+        <ConversationHeaderTitle showSubtitle={!isOutgoingRequest && !isBlocked} />
 
         {!isOutgoingRequest && !isSelectionMode && (
           <Flex

ts/components/conversation/header/ConversationHeaderItems.tsx

@@ -69,7 +69,6 @@ export const CallButton = () => {
     !isPrivate ||
     isMe ||
     !selectedConvoKey ||
-    isBlocked ||
     !isActive ||
     !isPrivateAndFriend // call requires us to be friends
   ) {
@@ -87,6 +86,7 @@ export const CallButton = () => {
         void callRecipient(selectedConvoKey, canCall);
       }}
       dataTestId="call-button"
+      disabled={isBlocked || !canCall}
     />
   );
 };

ts/components/conversation/header/ConversationHeaderTitle.tsx

@@ -6,6 +6,7 @@ import { closeRightPanel } from '../../../state/ducks/conversations';
 import {
   useSelectedConversationDisappearingMode,
   useSelectedConversationKey,
+  useSelectedIsBlocked,
   useSelectedIsGroupOrCommunity,
   useSelectedIsKickedFromGroup,
   useSelectedIsLegacyGroup,
@@ -32,10 +33,6 @@ export type SubtitleStringsType = keyof Pick<
   'notifications' | 'members' | 'disappearingMessages'
 >;
 
-type ConversationHeaderTitleProps = {
-  showSubtitle: boolean;
-};
-
 function useSubtitleArray(convoId?: string) {
   const subscriberCount = useSelectedSubscriberCount();
 
@@ -91,11 +88,10 @@ function useSubtitleArray(convoId?: string) {
   return subtitleArray;
 }
 
-export const ConversationHeaderTitle = ({ showSubtitle }: ConversationHeaderTitleProps) => {
+export const ConversationHeaderTitle = ({ showSubtitle }: { showSubtitle: boolean }) => {
   const dispatch = useDispatch();
   const convoId = useSelectedConversationKey();
   const convoName = useSelectedNicknameOrProfileNameOrShortenedPubkey();
-
   const isRightPanelOn = useIsRightPanelShowing();
   const isMe = useSelectedIsNoteToSelf();
 
@@ -113,6 +109,7 @@ export const ConversationHeaderTitle = ({ showSubtitle }: ConversationHeaderTitl
   const showConvoSettingsCb = useShowConversationSettingsFor(convoId);
 
   const subtitles = useSubtitleArray(convoId);
+  const isBlocked = useSelectedIsBlocked();
 
   const onHeaderClick = () => {
     if (isLegacyGroup || !convoId) {
@@ -126,6 +123,12 @@ export const ConversationHeaderTitle = ({ showSubtitle }: ConversationHeaderTitl
       return;
     }
 
+    // when the conversation is blocked, only show the default page of the modal (the other pages are not available)
+    if (isBlocked) {
+      showConvoSettingsCb({ settingsModalPage: 'default' });
+      return;
+    }
+
     // NOTE If disappearing messages is defined we must show it first
     if (subtitles?.[subtitleIndex]?.type === 'disappearingMessages') {
       showConvoSettingsCb({

ts/components/menuAndSettingsHooks/useShowBlockUnblock.ts

@@ -9,14 +9,14 @@ import { PubKey } from '../../session/types';
 import { updateBlockOrUnblockModal } from '../../state/ducks/modalDialog';
 import { LUCIDE_ICONS_UNICODE } from '../icon/lucide';
 
-export function useShowBlockUnblock(convoId: string) {
+export function useShowBlockUnblock(convoId?: string) {
   const isMe = useIsMe(convoId);
   const isBlocked = useIsBlocked(convoId);
   const isPrivate = useIsPrivate(convoId);
   const isIncomingRequest = useIsIncomingRequest(convoId);
   const dispatch = useDispatch();
 
-  const showBlockUnblock = !isMe && isPrivate && !isIncomingRequest && !PubKey.isBlinded(convoId);
+  const showBlockUnblock = convoId && !isMe && isPrivate && !isIncomingRequest && !PubKey.isBlinded(convoId);
 
   if (!showBlockUnblock) {
     return null;

ts/session/messages/outgoing/controlMessage/DataExtractionNotificationMessage.ts

@@ -53,7 +53,13 @@ export const sendDataExtractionNotification = async (
   referencedAttachmentTimestamp: number
 ) => {
   const convo = ConvoHub.use().get(conversationId);
-  if (!convo || !convo.isPrivate() || convo.isMe() || UserUtils.isUsFromCache(attachmentSender)) {
+  if (
+    !convo ||
+    !convo.isPrivate() ||
+    convo.isMe() ||
+    UserUtils.isUsFromCache(attachmentSender) ||
+    convo.isBlocked()
+  ) {
     window.log.warn('Not sending saving attachment notification for', attachmentSender);
     return;
   }