From a38132da6ee082fc4fbf09fee3e93ac42d025080 Mon Sep 17 00:00:00 2001
From: Ronni Skansing <rskansing@gmail.com>
Date: Sun, 12 Oct 2025 13:13:29 +0200
Subject: [PATCH] add set as sent confirm modal

Signed-off-by: Ronni Skansing <rskansing@gmail.com>
---
 .../src/routes/campaign/[id]/+page.svelte     | 66 +++++++++++++++++--
 1 file changed, 62 insertions(+), 4 deletions(-)

diff --git a/frontend/src/routes/campaign/[id]/+page.svelte b/frontend/src/routes/campaign/[id]/+page.svelte
index fe45ee1..b3b1737 100644
--- a/frontend/src/routes/campaign/[id]/+page.svelte
+++ b/frontend/src/routes/campaign/[id]/+page.svelte
@@ -130,9 +130,11 @@
 	let isCloseModalVisible = false;
 	let isAnonymizeModalVisible = false;
 	let isSendMessageModalVisible = false;
+	let isSetAsSentModalVisible = false;
 	let isStorageAceModalVisible = false;
 	let storedCookieData = '';
 	let sendMessageRecipient = null;
+	let setAsSentRecipient = null;
 	let lastPoll3399Nano = '';
 
 	// hooks
@@ -481,11 +483,15 @@
 		}
 	};
 
-	/** @param {string} campaignRecipientID */
-	const onClickSetEmailSent = async (campaignRecipientID) => {
+	/** @param {string} campaignRecipientID @param {Object} recipient */
+	const onClickSetEmailSent = (campaignRecipientID, recipient) => {
+		showSetAsSentModal(campaignRecipientID, recipient);
+	};
+
+	const onConfirmSetAsSent = async () => {
 		try {
 			showIsLoading();
-			const res = await api.campaign.setEmailSent(campaignRecipientID);
+			const res = await api.campaign.setEmailSent(setAsSentRecipient.id);
 			if (!res.success) {
 				throw res.error;
 			}
@@ -493,9 +499,12 @@
 			await setCampaign();
 			await getEvents();
 			await refreshCampaignRecipients();
+			closeSetAsSentModal();
+			return { success: true };
 		} catch (e) {
 			addToast('Failed to set email sent', 'Error');
 			console.error('failed to set email sent', e);
+			throw e;
 		} finally {
 			hideIsLoading();
 		}
@@ -516,6 +525,21 @@
 		sendMessageRecipient = null;
 	};
 
+	/** @param {string} campaignRecipientID @param {Object} recipient */
+	const showSetAsSentModal = (campaignRecipientID, recipient) => {
+		setAsSentRecipient = {
+			id: campaignRecipientID,
+			name: `${recipient.firstName || ''} ${recipient.lastName || ''}`.trim(),
+			email: recipient.email
+		};
+		isSetAsSentModalVisible = true;
+	};
+
+	const closeSetAsSentModal = () => {
+		isSetAsSentModalVisible = false;
+		setAsSentRecipient = null;
+	};
+
 	// helper function to get appropriate messaging based on sender type
 	const getMessageType = () => {
 		return campaign.template?.email ? 'email' : 'message';
@@ -539,9 +563,11 @@
 			await getEvents();
 			await refreshCampaignRecipients();
 			closeSendMessageModal();
+			return { success: true };
 		} catch (e) {
 			addToast(`Failed to send ${getMessageType()}`, 'Error');
 			console.error(`failed to send ${getMessageType()}`, e);
+			throw e;
 		} finally {
 			hideIsLoading();
 		}
@@ -552,6 +578,11 @@
 		sendMessageRecipient = null;
 	}
 
+	// reactive statement to clean up set as sent modal state when it closes
+	$: if (!isSetAsSentModalVisible && setAsSentRecipient) {
+		setAsSentRecipient = null;
+	}
+
 	const showCloseCampaignModal = () => {
 		isCloseModalVisible = true;
 	};
@@ -1654,7 +1685,7 @@
 									<TableDropDownButton
 										name="Set as sent"
 										title={recp.closedAt ? 'Campaign is closed' : ''}
-										on:click={() => onClickSetEmailSent(recp.id)}
+										on:click={() => onClickSetEmailSent(recp.id, recp.recipient)}
 										disabled={!!campaign.closedAt || recp.cancelledAt}
 									/>
 								{/if}
@@ -2061,6 +2092,33 @@
 		</div>
 	</Alert>
 
+	<Alert
+		headline="Set as Sent"
+		bind:visible={isSetAsSentModalVisible}
+		onConfirm={onConfirmSetAsSent}
+	>
+		<div>
+			{#if setAsSentRecipient}
+				{@const recipient = campaignRecipients.find((r) => r.id === setAsSentRecipient.id)}
+				{#if recipient}
+					<p class="mb-4">Are you sure you want to mark the campaign as sent for:</p>
+					<div class="bg-gray-50 dark:bg-gray-700 p-3 rounded mb-4">
+						<p class="font-medium">{setAsSentRecipient.name}</p>
+						<p class="text-gray-600">{setAsSentRecipient.email}</p>
+						{#if recipient.sentAt}
+							<p class="text-sm text-amber-600 mt-1">
+								⚠️ Already marked as sent on {new Date(recipient.sentAt).toLocaleString()}
+							</p>
+						{/if}
+					</div>
+					<p class="text-sm text-gray-500">
+						This action will mark the message as sent without actually sending it.
+					</p>
+				{/if}
+			{/if}
+		</div>
+	</Alert>
+
 	<Modal
 		headerText={'Cookies captured'}
 		visible={isStorageAceModalVisible}