gib/GibSend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add schedule api (#60)

Browse Source
This commit is contained in:
KM Koushik
2024-08-21 17:19:11 +10:00
committed by GitHub
parent 1e66222425
commit 9b54fc1793
21 changed files with 920 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
apps/web/src/app/(dashboard)/emails/email-details.tsx
View File

@@ -19,6 +19,10 @@ import {
COMPLAINT_ERROR_MESSAGES,
DELIVERY_DELAY_ERRORS,
} from "~/lib/constants/ses-errors";
import { Button } from "@unsend/ui/src/button";
import { Edit2, Edit3, Trash2 } from "lucide-react";
import CancelEmail from "./cancel-email";
import EditSchedule from "./edit-schedule";
export default function EmailDetails({ emailId }: { emailId: string }) {
const emailQuery = api.email.getEmail.useQuery({ id: emailId });
@@ -34,19 +38,43 @@ export default function EmailDetails({ emailId }: { emailId: string }) {
<div className="flex flex-col gap-8 mt-10 items-start ">
<div className="p-2 rounded-lg border flex flex-col gap-4 w-full">
<div className="flex gap-2">
<span className="w-[65px] text-muted-foreground ">From</span>
<span>{emailQuery.data?.from}</span>
<span className="w-[100px] text-muted-foreground text-sm">
From
</span>
<span className="text-sm">{emailQuery.data?.from}</span>
</div>
<Separator />
<div className="flex gap-2">
<span className="w-[65px] text-muted-foreground ">To</span>
<span>{emailQuery.data?.to}</span>
<span className="w-[100px] text-muted-foreground text-sm">To</span>
<span className="text-sm">{emailQuery.data?.to}</span>
</div>
<Separator />
<div className="flex gap-2">
<span className="w-[65px] text-muted-foreground ">Subject</span>
<span>{emailQuery.data?.subject}</span>
<span className="w-[100px] text-muted-foreground text-sm">
Subject
</span>
<span className="text-sm">{emailQuery.data?.subject}</span>
</div>
{emailQuery.data?.latestStatus === "SCHEDULED" &&
emailQuery.data?.scheduledAt ? (
<>
<Separator />
<div className="flex gap-2 items-center">
<span className="w-[100px] text-muted-foreground text-sm ">
Scheduled at
</span>
<span className="text-sm">
{formatDate(
emailQuery.data?.scheduledAt,
"MMM dd'th', hh:mm a"
)}
</span>
<div className="ml-4">
<CancelEmail emailId={emailId} />
</div>
</div>
</>
) : null}
<div className=" dark:bg-slate-200 h-[250px] overflow-auto text-black rounded">
<div
className="px-4 py-4 overflow-auto"
@@ -54,37 +82,42 @@ export default function EmailDetails({ emailId }: { emailId: string }) {
/>
</div>
</div>
<div className=" border rounded-lg w-full ">
<div className=" p-4 flex flex-col gap-8 w-full">
<div className="font-medium">Events History</div>
<div className="flex items-stretch px-4 w-full">
<div className="border-r border-dashed" />
<div className="flex flex-col gap-12 w-full">
{emailQuery.data?.emailEvents.map((evt) => (
<div
key={evt.status}
className="flex gap-5 items-start w-full"
>
<div className=" -ml-2.5">
<EmailStatusIcon status={evt.status} />
</div>
<div className="-mt-[0.125rem] w-full">
<div className=" capitalize font-medium">
<EmailStatusBadge status={evt.status} />
{emailQuery.data?.latestStatus !== "SCHEDULED" ? (
<div className=" border rounded-lg w-full ">
<div className=" p-4 flex flex-col gap-8 w-full">
<div className="font-medium">Events History</div>
<div className="flex items-stretch px-4 w-full">
<div className="border-r border-dashed" />
<div className="flex flex-col gap-12 w-full">
{emailQuery.data?.emailEvents.map((evt) => (
<div
key={evt.status}
className="flex gap-5 items-start w-full"
>
<div className=" -ml-2.5">
<EmailStatusIcon status={evt.status} />
</div>
<div className="text-xs text-muted-foreground mt-2">
{formatDate(evt.createdAt, "MMM dd, hh:mm a")}
</div>
<div className="mt-1 text-primary/80">
<EmailStatusText status={evt.status} data={evt.data} />
<div className="-mt-[0.125rem] w-full">
<div className=" capitalize font-medium">
<EmailStatusBadge status={evt.status} />
</div>
<div className="text-xs text-muted-foreground mt-2">
{formatDate(evt.createdAt, "MMM dd, hh:mm a")}
</div>
<div className="mt-1 text-primary/80">
<EmailStatusText
status={evt.status}
data={evt.data}
/>
</div>
</div>
</div>
</div>
))}
))}
</div>
</div>
</div>
</div>
</div>
) : null}
</div>
</div>
);
@@ -194,6 +227,8 @@ const EmailStatusText = ({
<p>{getComplaintMessage(_errorData.complaintFeedbackType)}</p>
</div>
);
} else if (status === "CANCELLED") {
return <div>This scheduled email was cancelled</div>;
}
return <div className="w-full">{status}</div>;