Cleanup pass 2

app/(app)/create/screens/card/CommunicationMethodsScreen.tsx

@@ -19,6 +19,7 @@ import { useState, useCallback, useMemo, useRef } from "react";
 import { useMessages } from "../../../../contexts/MessagesContext";
 import { useCreateFlow } from "../../context/CreateFlowContext";
 import { useCreateFlowMdUp } from "../../hooks/useCreateFlowMdUp";
+import { useDiscardCustomizeConfirm } from "../../hooks/useDiscardCustomizeConfirm";
 import { useMethodCardDeckOrdering } from "../../hooks/useMethodCardDeckOrdering";
 import { CreateFlowHeaderLockup } from "../../components/CreateFlowHeaderLockup";
 import CardStack from "../../../../components/cards/CardStack";
@@ -53,8 +54,6 @@ import { buildCustomRuleModalKebabMenu } from "../../components/customRuleModalK
 import { methodCardMetaWithCustomizeHeader } from "../../../../../lib/create/methodCardCustomizeMetaPatch";
 import {
   captureMethodCardCustomizeSnapshot,
-  confirmDiscardMethodCardCustomizeSession,
-  isMethodCardCustomizeSessionDirty,
   type MethodCardCustomizeSnapshot,
   type MethodCardHeaderDraft,
 } from "../../../../../lib/create/methodCardCustomizeSession";
@@ -65,6 +64,8 @@ export function CommunicationMethodsScreen() {
   const comm = m.create.customRule.communication;
   const modalKebabMenu = m.create.customRule.modalKebabMenu;
   const mdUp = useCreateFlowMdUp();
+  const { confirmDiscard, confirmDirtyCustomizeCancel, confirmDialog } =
+    useDiscardCustomizeConfirm();
   const { state, updateState, replaceState, markCreateFlowInteraction } =
     useCreateFlow();
   const pendingEphemeralDuplicateIdRef = useRef<string | null>(null);
@@ -201,16 +202,15 @@ export function CommunicationMethodsScreen() {
     ],
   );
 
-  const handleCreateModalClose = useCallback(() => {
+  const handleCreateModalClose = useCallback(async () => {
     if (
-      !confirmDiscardMethodCardCustomizeSession(
+      !(await confirmDiscard(
         modalEditUnlocked,
         customizeSnapshotRef.current,
         pendingDraft,
         draftFieldBlocks,
         customizeHeaderDraft,
-        modalKebabMenu.discardUnsavedCustomizeChanges,
-      )
+      ))
     ) {
       return;
     }
@@ -241,15 +241,15 @@ export function CommunicationMethodsScreen() {
     setDraftFieldBlocks(null);
     setCustomizeHeaderDraft(null);
   }, [
+    confirmDiscard,
     customizeHeaderDraft,
     draftFieldBlocks,
     modalEditUnlocked,
-    modalKebabMenu.discardUnsavedCustomizeChanges,
     pendingDraft,
     replaceState,
   ]);
 
-  const handleCancelCustomize = useCallback(() => {
+  const handleCancelCustomize = useCallback(async () => {
     if (!modalEditUnlocked) {
       return;
     }
@@ -262,13 +262,12 @@ export function CommunicationMethodsScreen() {
       return;
     }
     if (
-      isMethodCardCustomizeSessionDirty(
+      !(await confirmDirtyCustomizeCancel(
         snap,
         pendingDraft,
         draftFieldBlocks,
         customizeHeaderDraft,
-      ) &&
-      !window.confirm(modalKebabMenu.discardUnsavedCustomizeChanges)
+      ))
     ) {
       return;
     }
@@ -278,27 +277,26 @@ export function CommunicationMethodsScreen() {
     customizeSnapshotRef.current = null;
     setCustomizeHeaderDraft(null);
   }, [
+    confirmDirtyCustomizeCancel,
     customizeHeaderDraft,
     draftFieldBlocks,
     modalEditUnlocked,
-    modalKebabMenu.discardUnsavedCustomizeChanges,
     pendingDraft,
   ]);
 
-  const handleRemoveSelectedFromModal = useCallback(() => {
+  const handleRemoveSelectedFromModal = useCallback(async () => {
     if (!pendingCardId || !selectedIds.includes(pendingCardId)) {
       return;
     }
     markCreateFlowInteraction();
     if (
-      !confirmDiscardMethodCardCustomizeSession(
+      !(await confirmDiscard(
         modalEditUnlocked,
         customizeSnapshotRef.current,
         pendingDraft,
         draftFieldBlocks,
         customizeHeaderDraft,
-        modalKebabMenu.discardUnsavedCustomizeChanges,
-      )
+      ))
     ) {
       return;
     }
@@ -310,14 +308,14 @@ export function CommunicationMethodsScreen() {
         pendingCardId,
       ),
     );
-    handleCreateModalClose();
+    await handleCreateModalClose();
   }, [
+    confirmDiscard,
     customizeHeaderDraft,
     draftFieldBlocks,
     handleCreateModalClose,
     markCreateFlowInteraction,
     modalEditUnlocked,
-    modalKebabMenu.discardUnsavedCustomizeChanges,
     pendingDraft,
     pendingCardId,
     selectedIds,
@@ -829,6 +827,7 @@ export function CommunicationMethodsScreen() {
           uploadCreateFlowFile(file, "customMethodAttachment")
         }
       />
+      {confirmDialog}
     </>
   );
 }

app/(app)/create/screens/card/ConflictManagementScreen.tsx

@@ -16,6 +16,7 @@ import { useState, useCallback, useMemo, useRef } from "react";
 import { useMessages } from "../../../../contexts/MessagesContext";
 import { useCreateFlow } from "../../context/CreateFlowContext";
 import { useCreateFlowMdUp } from "../../hooks/useCreateFlowMdUp";
+import { useDiscardCustomizeConfirm } from "../../hooks/useDiscardCustomizeConfirm";
 import { useMethodCardDeckOrdering } from "../../hooks/useMethodCardDeckOrdering";
 import { CreateFlowHeaderLockup } from "../../components/CreateFlowHeaderLockup";
 import CardStack from "../../../../components/cards/CardStack";
@@ -50,8 +51,6 @@ import { buildCustomRuleModalKebabMenu } from "../../components/customRuleModalK
 import { methodCardMetaWithCustomizeHeader } from "../../../../../lib/create/methodCardCustomizeMetaPatch";
 import {
   captureMethodCardCustomizeSnapshot,
-  confirmDiscardMethodCardCustomizeSession,
-  isMethodCardCustomizeSessionDirty,
   type MethodCardCustomizeSnapshot,
   type MethodCardHeaderDraft,
 } from "../../../../../lib/create/methodCardCustomizeSession";
@@ -62,6 +61,8 @@ export function ConflictManagementScreen() {
   const cm = m.create.customRule.conflictManagement;
   const modalKebabMenu = m.create.customRule.modalKebabMenu;
   const mdUp = useCreateFlowMdUp();
+  const { confirmDiscard, confirmDirtyCustomizeCancel, confirmDialog } =
+    useDiscardCustomizeConfirm();
   const { state, updateState, replaceState, markCreateFlowInteraction } =
     useCreateFlow();
   const pendingEphemeralDuplicateIdRef = useRef<string | null>(null);
@@ -202,16 +203,15 @@ export function ConflictManagementScreen() {
     ],
   );
 
-  const handleCreateModalClose = useCallback(() => {
+  const handleCreateModalClose = useCallback(async () => {
     if (
-      !confirmDiscardMethodCardCustomizeSession(
+      !(await confirmDiscard(
         modalEditUnlocked,
         customizeSnapshotRef.current,
         pendingDraft,
         draftFieldBlocks,
         customizeHeaderDraft,
-        modalKebabMenu.discardUnsavedCustomizeChanges,
-      )
+      ))
     ) {
       return;
     }
@@ -242,15 +242,15 @@ export function ConflictManagementScreen() {
     setDraftFieldBlocks(null);
     setCustomizeHeaderDraft(null);
   }, [
+    confirmDiscard,
     customizeHeaderDraft,
     draftFieldBlocks,
     modalEditUnlocked,
-    modalKebabMenu.discardUnsavedCustomizeChanges,
     pendingDraft,
     replaceState,
   ]);
 
-  const handleCancelCustomize = useCallback(() => {
+  const handleCancelCustomize = useCallback(async () => {
     if (!modalEditUnlocked) {
       return;
     }
@@ -263,13 +263,12 @@ export function ConflictManagementScreen() {
       return;
     }
     if (
-      isMethodCardCustomizeSessionDirty(
+      !(await confirmDirtyCustomizeCancel(
         snap,
         pendingDraft,
         draftFieldBlocks,
         customizeHeaderDraft,
-      ) &&
-      !window.confirm(modalKebabMenu.discardUnsavedCustomizeChanges)
+      ))
     ) {
       return;
     }
@@ -279,27 +278,26 @@ export function ConflictManagementScreen() {
     customizeSnapshotRef.current = null;
     setCustomizeHeaderDraft(null);
   }, [
+    confirmDirtyCustomizeCancel,
     customizeHeaderDraft,
     draftFieldBlocks,
     modalEditUnlocked,
-    modalKebabMenu.discardUnsavedCustomizeChanges,
     pendingDraft,
   ]);
 
-  const handleRemoveSelectedFromModal = useCallback(() => {
+  const handleRemoveSelectedFromModal = useCallback(async () => {
     if (!pendingCardId || !selectedIds.includes(pendingCardId)) {
       return;
     }
     markCreateFlowInteraction();
     if (
-      !confirmDiscardMethodCardCustomizeSession(
+      !(await confirmDiscard(
         modalEditUnlocked,
         customizeSnapshotRef.current,
         pendingDraft,
         draftFieldBlocks,
         customizeHeaderDraft,
-        modalKebabMenu.discardUnsavedCustomizeChanges,
-      )
+      ))
     ) {
       return;
     }
@@ -311,14 +309,14 @@ export function ConflictManagementScreen() {
         pendingCardId,
       ),
     );
-    handleCreateModalClose();
+    await handleCreateModalClose();
   }, [
+    confirmDiscard,
     customizeHeaderDraft,
     draftFieldBlocks,
     handleCreateModalClose,
     markCreateFlowInteraction,
     modalEditUnlocked,
-    modalKebabMenu.discardUnsavedCustomizeChanges,
     pendingDraft,
     pendingCardId,
     selectedIds,
@@ -828,6 +826,7 @@ export function ConflictManagementScreen() {
           uploadCreateFlowFile(file, "customMethodAttachment")
         }
       />
+      {confirmDialog}
     </>
   );
 }

app/(app)/create/screens/card/MembershipMethodsScreen.tsx

@@ -17,6 +17,7 @@ import { useState, useCallback, useMemo, useRef } from "react";
 import { useMessages } from "../../../../contexts/MessagesContext";
 import { useCreateFlow } from "../../context/CreateFlowContext";
 import { useCreateFlowMdUp } from "../../hooks/useCreateFlowMdUp";
+import { useDiscardCustomizeConfirm } from "../../hooks/useDiscardCustomizeConfirm";
 import { useMethodCardDeckOrdering } from "../../hooks/useMethodCardDeckOrdering";
 import { CreateFlowHeaderLockup } from "../../components/CreateFlowHeaderLockup";
 import CardStack from "../../../../components/cards/CardStack";
@@ -51,8 +52,6 @@ import { buildCustomRuleModalKebabMenu } from "../../components/customRuleModalK
 import { methodCardMetaWithCustomizeHeader } from "../../../../../lib/create/methodCardCustomizeMetaPatch";
 import {
   captureMethodCardCustomizeSnapshot,
-  confirmDiscardMethodCardCustomizeSession,
-  isMethodCardCustomizeSessionDirty,
   type MethodCardCustomizeSnapshot,
   type MethodCardHeaderDraft,
 } from "../../../../../lib/create/methodCardCustomizeSession";
@@ -63,6 +62,8 @@ export function MembershipMethodsScreen() {
   const mem = m.create.customRule.membership;
   const modalKebabMenu = m.create.customRule.modalKebabMenu;
   const mdUp = useCreateFlowMdUp();
+  const { confirmDiscard, confirmDirtyCustomizeCancel, confirmDialog } =
+    useDiscardCustomizeConfirm();
   const { state, updateState, replaceState, markCreateFlowInteraction } =
     useCreateFlow();
   const pendingEphemeralDuplicateIdRef = useRef<string | null>(null);
@@ -199,16 +200,15 @@ export function MembershipMethodsScreen() {
     ],
   );
 
-  const handleCreateModalClose = useCallback(() => {
+  const handleCreateModalClose = useCallback(async () => {
     if (
-      !confirmDiscardMethodCardCustomizeSession(
+      !(await confirmDiscard(
         modalEditUnlocked,
         customizeSnapshotRef.current,
         pendingDraft,
         draftFieldBlocks,
         customizeHeaderDraft,
-        modalKebabMenu.discardUnsavedCustomizeChanges,
-      )
+      ))
     ) {
       return;
     }
@@ -239,15 +239,15 @@ export function MembershipMethodsScreen() {
     setDraftFieldBlocks(null);
     setCustomizeHeaderDraft(null);
   }, [
+    confirmDiscard,
     customizeHeaderDraft,
     draftFieldBlocks,
     modalEditUnlocked,
-    modalKebabMenu.discardUnsavedCustomizeChanges,
     pendingDraft,
     replaceState,
   ]);
 
-  const handleCancelCustomize = useCallback(() => {
+  const handleCancelCustomize = useCallback(async () => {
     if (!modalEditUnlocked) {
       return;
     }
@@ -260,13 +260,12 @@ export function MembershipMethodsScreen() {
       return;
     }
     if (
-      isMethodCardCustomizeSessionDirty(
+      !(await confirmDirtyCustomizeCancel(
         snap,
         pendingDraft,
         draftFieldBlocks,
         customizeHeaderDraft,
-      ) &&
-      !window.confirm(modalKebabMenu.discardUnsavedCustomizeChanges)
+      ))
     ) {
       return;
     }
@@ -276,27 +275,26 @@ export function MembershipMethodsScreen() {
     customizeSnapshotRef.current = null;
     setCustomizeHeaderDraft(null);
   }, [
+    confirmDirtyCustomizeCancel,
     customizeHeaderDraft,
     draftFieldBlocks,
     modalEditUnlocked,
-    modalKebabMenu.discardUnsavedCustomizeChanges,
     pendingDraft,
   ]);
 
-  const handleRemoveSelectedFromModal = useCallback(() => {
+  const handleRemoveSelectedFromModal = useCallback(async () => {
     if (!pendingCardId || !selectedIds.includes(pendingCardId)) {
       return;
     }
     markCreateFlowInteraction();
     if (
-      !confirmDiscardMethodCardCustomizeSession(
+      !(await confirmDiscard(
         modalEditUnlocked,
         customizeSnapshotRef.current,
         pendingDraft,
         draftFieldBlocks,
         customizeHeaderDraft,
-        modalKebabMenu.discardUnsavedCustomizeChanges,
-      )
+      ))
     ) {
       return;
     }
@@ -304,14 +302,14 @@ export function MembershipMethodsScreen() {
     updateState(
       removeMethodCardFromFacetSelection(state, "membership", pendingCardId),
     );
-    handleCreateModalClose();
+    await handleCreateModalClose();
   }, [
+    confirmDiscard,
     customizeHeaderDraft,
     draftFieldBlocks,
     handleCreateModalClose,
     markCreateFlowInteraction,
     modalEditUnlocked,
-    modalKebabMenu.discardUnsavedCustomizeChanges,
     pendingDraft,
     pendingCardId,
     selectedIds,
@@ -821,6 +819,7 @@ export function MembershipMethodsScreen() {
           uploadCreateFlowFile(file, "customMethodAttachment")
         }
       />
+      {confirmDialog}
     </>
   );
 }