Support for local deletes synced to all your devices

ts/components/conversation/ConversationHeader.tsx

@@ -38,6 +38,7 @@ import {
   MessageRequestState,
 } from './MessageRequestActionsConfirmation';
 import type { MinimalConversation } from '../../hooks/useMinimalConversation';
+import { LocalDeleteWarningModal } from '../LocalDeleteWarningModal';
 
 function HeaderInfoTitle({
   name,
@@ -92,6 +93,8 @@ export type PropsDataType = {
   conversationName: ContactNameData;
   hasPanelShowing?: boolean;
   hasStories?: HasStories;
+  localDeleteWarningShown: boolean;
+  isDeleteSyncSendEnabled: boolean;
   isMissingMandatoryProfileSharing?: boolean;
   isSelectMode: boolean;
   isSignalConversation?: boolean;
@@ -102,6 +105,8 @@ export type PropsDataType = {
 };
 
 export type PropsActionsType = {
+  setLocalDeleteWarningShown: () => void;
+
   onConversationAccept: () => void;
   onConversationArchive: () => void;
   onConversationBlock: () => void;
@@ -147,10 +152,12 @@ export const ConversationHeader = memo(function ConversationHeader({
   hasPanelShowing,
   hasStories,
   i18n,
+  isDeleteSyncSendEnabled,
   isMissingMandatoryProfileSharing,
   isSelectMode,
   isSignalConversation,
   isSMSOnly,
+  localDeleteWarningShown,
   onConversationAccept,
   onConversationArchive,
   onConversationBlock,
@@ -174,6 +181,7 @@ export const ConversationHeader = memo(function ConversationHeader({
   onViewRecentMedia,
   onViewUserStories,
   outgoingCallButtonStyle,
+  setLocalDeleteWarningShown,
   sharedGroupNames,
   theme,
 }: PropsType): JSX.Element | null {
@@ -223,13 +231,16 @@ export const ConversationHeader = memo(function ConversationHeader({
       {hasDeleteMessagesConfirmation && (
         <DeleteMessagesConfirmationDialog
           i18n={i18n}
-          onDestoryMessages={() => {
+          isDeleteSyncSendEnabled={isDeleteSyncSendEnabled}
+          localDeleteWarningShown={localDeleteWarningShown}
+          onDestroyMessages={() => {
             setHasDeleteMessagesConfirmation(false);
             onConversationDeleteMessages();
           }}
           onClose={() => {
             setHasDeleteMessagesConfirmation(false);
           }}
+          setLocalDeleteWarningShown={setLocalDeleteWarningShown}
         />
       )}
       {hasLeaveGroupConfirmation && (
@@ -923,14 +934,29 @@ function CannotLeaveGroupBecauseYouAreLastAdminAlert({
 }
 
 function DeleteMessagesConfirmationDialog({
+  isDeleteSyncSendEnabled,
   i18n,
-  onDestoryMessages,
+  localDeleteWarningShown,
+  onDestroyMessages,
   onClose,
+  setLocalDeleteWarningShown,
 }: {
+  isDeleteSyncSendEnabled: boolean;
   i18n: LocalizerType;
-  onDestoryMessages: () => void;
+  localDeleteWarningShown: boolean;
+  onDestroyMessages: () => void;
   onClose: () => void;
+  setLocalDeleteWarningShown: () => void;
 }) {
+  if (!localDeleteWarningShown && isDeleteSyncSendEnabled) {
+    return (
+      <LocalDeleteWarningModal
+        i18n={i18n}
+        onClose={setLocalDeleteWarningShown}
+      />
+    );
+  }
+
   return (
     <ConfirmationDialog
       dialogName="ConversationHeader.destroyMessages"
@@ -939,7 +965,7 @@ function DeleteMessagesConfirmationDialog({
       )}
       actions={[
         {
-          action: onDestoryMessages,
+          action: onDestroyMessages,
           style: 'negative',
           text: i18n('icu:delete'),
         },