feat: started adding options to session confirm modal

for delete button in more message info

ts/components/basic/SessionRadioGroup.tsx

@@ -4,9 +4,11 @@ import styled, { CSSProperties } from 'styled-components';
 
 import { SessionRadio } from './SessionRadio';
 
+export type SessionRadioItems = Array<{ value: string; label: string }>;
+
 interface Props {
   initialItem: string;
-  items: Array<{ value: string; label: string }>;
+  items: SessionRadioItems;
   group: string;
   onClick: (selectedValue: string) => void;
   style?: CSSProperties;

ts/components/conversation/right-panel/overlay/message-info/OverlayMessageInfo.tsx

@@ -4,10 +4,6 @@ import { useDispatch, useSelector } from 'react-redux';
 import styled from 'styled-components';
 // tslint:disable-next-line: no-submodule-imports
 import useKey from 'react-use/lib/useKey';
-import {
-  deleteMessagesById,
-  deleteMessagesByIdForEveryone,
-} from '../../../../../interactions/conversations/unsendingInteractions';
 import { closeMessageDetailsView, closeRightPanel } from '../../../../../state/ducks/conversations';
 import { resetRightOverlayMode, setRightOverlayMode } from '../../../../../state/ducks/section';
 import { getMessageDetailsViewProps } from '../../../../../state/selectors/conversations';
@@ -18,9 +14,9 @@ import {
   replyToMessage,
   resendMessage,
 } from '../../../../../interactions/conversationInteractions';
+import { deleteMessagesById } from '../../../../../interactions/conversations/unsendingInteractions';
 import {
   useMessageIsDeletable,
-  useMessageIsDeletableForEveryone,
   useMessageQuote,
   useMessageText,
 } from '../../../../../state/selectors';
@@ -86,7 +82,6 @@ export const OverlayMessageInfo = () => {
   const rightOverlayMode = useSelector(getRightOverlayMode);
   const messageDetailProps = useSelector(getMessageDetailsViewProps);
   const isDeletable = useMessageIsDeletable(messageDetailProps?.messageId);
-  const isDeletableForEveryone = useMessageIsDeletableForEveryone(messageDetailProps?.messageId);
 
   const dispatch = useDispatch();
 
@@ -232,10 +227,10 @@ export const OverlayMessageInfo = () => {
               )}
               {isDeletable && (
                 <PanelIconButton
-                  text={window.i18n('deleteJustForMe')}
+                  text={window.i18n('delete')}
                   iconType="delete"
                   color={'var(--danger-color)'}
-                  dataTestId="delete-for-me-from-details"
+                  dataTestId="delete-from-details"
                   onClick={() => {
                     void deleteMessagesById([messageId], convoId);
                     dispatch(closeRightPanel());
@@ -243,19 +238,6 @@ export const OverlayMessageInfo = () => {
                   }}
                 />
               )}
-              {isDeletableForEveryone && (
-                <PanelIconButton
-                  text={window.i18n('deleteForEveryone')}
-                  iconType="delete"
-                  color={'var(--danger-color)'}
-                  dataTestId="delete-for-everyone-from-details"
-                  onClick={() => {
-                    void deleteMessagesByIdForEveryone([messageId], convoId);
-                    dispatch(closeRightPanel());
-                    dispatch(resetRightOverlayMode());
-                  }}
-                />
-              )}
             </PanelButtonGroup>
             <SpacerXL />
           </StyledMessageDetail>

ts/components/dialog/SessionConfirm.tsx

@@ -7,6 +7,7 @@ import { updateConfirmModal } from '../../state/ducks/modalDialog';
 import { SessionWrapperModal } from '../SessionWrapperModal';
 import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton';
 import { SessionHtmlRenderer } from '../basic/SessionHTMLRenderer';
+import { SessionRadioGroup, SessionRadioItems } from '../basic/SessionRadioGroup';
 import { SessionSpinner } from '../basic/SessionSpinner';
 import { SpacerLG } from '../basic/Text';
 import { SessionIcon, SessionIconSize, SessionIconType } from '../icon';
@@ -24,6 +25,7 @@ export interface SessionConfirmDialogProps {
   message?: string;
   messageSub?: string;
   title?: string;
+  radioOptions?: SessionRadioItems;
   onOk?: any;
   onClose?: any;
   closeAfterInput?: boolean;
@@ -55,6 +57,7 @@ export const SessionConfirm = (props: SessionConfirmDialogProps) => {
     title = '',
     message = '',
     messageSub = '',
+    radioOptions,
     okTheme,
     closeTheme = SessionButtonColor.Danger,
     onClickOk,
@@ -69,6 +72,9 @@ export const SessionConfirm = (props: SessionConfirmDialogProps) => {
   } = props;
 
   const [isLoading, setIsLoading] = useState(false);
+  const [chosenOption, setChosenOption] = useState(
+    radioOptions?.length ? radioOptions[0].value : ''
+  );
 
   const okText = props.okText || window.i18n('ok');
   const cancelText = props.cancelText || window.i18n('cancel');
@@ -128,6 +134,18 @@ export const SessionConfirm = (props: SessionConfirmDialogProps) => {
 
         <StyledSubText tag="span" textLength={message.length} html={message} />
         <SessionHtmlRenderer tag="span" className="session-confirm-sub-message" html={messageSub} />
+        {radioOptions && chosenOption !== '' && (
+          <SessionRadioGroup
+            group="session-confirm-radio-group"
+            initialItem={chosenOption}
+            onClick={value => {
+              if (value) {
+                setChosenOption(value);
+              }
+            }}
+            items={radioOptions}
+          />
+        )}
 
         <SessionSpinner loading={isLoading} />
       </div>

ts/interactions/conversations/unsendingInteractions.ts

@@ -380,6 +380,10 @@ export async function deleteMessagesById(messageIds: Array<string>, conversation
       message: moreThanOne
         ? window.i18n('deleteMessagesQuestion', [messageCount.toString()])
         : window.i18n('deleteMessageQuestion'),
+      radioOptions: [
+        { label: window.i18n('deleteJustForMe'), value: window.i18n('deleteJustForMe') },
+        { label: window.i18n('deleteForEveryone'), value: window.i18n('deleteForEveryone') },
+      ],
       okText: window.i18n('delete'),
       okTheme: SessionButtonColor.Danger,
       onClickOk: async () => {