diff --git a/components/AccountDetail/AccountDetailPage.tsx b/components/AccountDetail/AccountDetailPage.tsx index 895a253..5d45fe5 100644 --- a/components/AccountDetail/AccountDetailPage.tsx +++ b/components/AccountDetail/AccountDetailPage.tsx @@ -1,9 +1,12 @@ "use client"; +import { useState } from "react"; import { useAccountTaskRuns } from "@/hooks/useAccountTaskRuns"; import AccountBreadcrumb from "./AccountBreadcrumb"; import TaskRunsTable from "./TaskRunsTable"; +import PulseEmailModal from "./PulseEmailModal"; import TableSkeleton from "@/components/Sandboxes/TableSkeleton"; +import type { TaskRun } from "@/types/sandbox"; const TASK_RUN_COLUMNS = ["Task", "Status", "Started", "Duration", "Run ID"]; @@ -13,6 +16,7 @@ interface AccountDetailPageProps { export default function AccountDetailPage({ accountId }: AccountDetailPageProps) { const { data: runs, isLoading, error } = useAccountTaskRuns(accountId); + const [selectedRun, setSelectedRun] = useState(null); const pulseRuns = runs?.filter(r => r.taskIdentifier === "send-pulse-task") ?? []; @@ -52,7 +56,12 @@ export default function AccountDetailPage({ accountId }: AccountDetailPageProps) )} - {!isLoading && !error && } + {!isLoading && !error && ( + setSelectedRun(run)} + /> + )} {!isLoading && !error && runs && runs.length > pulseRuns.length && (
@@ -65,6 +74,13 @@ export default function AccountDetailPage({ accountId }: AccountDetailPageProps)
)} + + {selectedRun && ( + setSelectedRun(null)} + /> + )} ); } diff --git a/components/AccountDetail/PulseEmailModal.tsx b/components/AccountDetail/PulseEmailModal.tsx new file mode 100644 index 0000000..e5b35e4 --- /dev/null +++ b/components/AccountDetail/PulseEmailModal.tsx @@ -0,0 +1,49 @@ +"use client"; + +import { usePulseEmail } from "@/hooks/usePulseEmail"; +import { getEmailIdFromTags } from "@/lib/tasks/getEmailIdFromTags"; +import type { TaskRun } from "@/types/sandbox"; +import PulseEmailModalHeader from "./PulseEmailModalHeader"; +import PulseEmailModalBody from "./PulseEmailModalBody"; + +interface PulseEmailModalProps { + run: TaskRun; + onClose: () => void; +} + +export default function PulseEmailModal({ run, onClose }: PulseEmailModalProps) { + const emailId = getEmailIdFromTags(run.tags); + const { data: email, isLoading, error } = usePulseEmail(emailId); + + return ( +
+
e.stopPropagation()} + > + + +
+ +
+ + {email && ( +
+

Resend ID: {email.id}

+
+ )} +
+
+ ); +} diff --git a/components/AccountDetail/PulseEmailModalBody.tsx b/components/AccountDetail/PulseEmailModalBody.tsx new file mode 100644 index 0000000..a4f915a --- /dev/null +++ b/components/AccountDetail/PulseEmailModalBody.tsx @@ -0,0 +1,51 @@ +import type { PulseEmail } from "@/lib/recoup/fetchAccountPulseEmails"; + +interface PulseEmailModalBodyProps { + email: PulseEmail | null; + isLoading: boolean; + error: Error | null; +} + +export default function PulseEmailModalBody({ email, isLoading, error }: PulseEmailModalBodyProps) { + if (isLoading) { + return ( +
+ Loading email… +
+ ); + } + + if (error) { + return ( +
+ Failed to load email: {error.message} +
+ ); + } + + if (!email) { + return ( +
+ No email found for this run. +
+ ); + } + + if (email.html) { + return ( +