Add schedule api (#60)

apps/web/src/app/(dashboard)/emails/cancel-email.tsx

@@ -0,0 +1,137 @@
+"use client";
+
+import { Button } from "@unsend/ui/src/button";
+import { Input } from "@unsend/ui/src/input";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@unsend/ui/src/dialog";
+import { api } from "~/trpc/react";
+import React, { useState } from "react";
+import { toast } from "@unsend/ui/src/toaster";
+import { Trash2 } from "lucide-react";
+import { z } from "zod";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@unsend/ui/src/form";
+
+const cancelSchema = z.object({
+  confirmation: z.string(),
+});
+
+export const CancelEmail: React.FC<{
+  emailId: string;
+}> = ({ emailId }) => {
+  const [open, setOpen] = useState(false);
+  const cancelEmailMutation = api.email.cancelEmail.useMutation();
+
+  const utils = api.useUtils();
+
+  const cancelForm = useForm<z.infer<typeof cancelSchema>>({
+    resolver: zodResolver(cancelSchema),
+  });
+
+  async function onEmailCancel(values: z.infer<typeof cancelSchema>) {
+    if (values.confirmation !== "cancel") {
+      cancelForm.setError("confirmation", {
+        message: "Confirmation does not match",
+      });
+      return;
+    }
+
+    cancelEmailMutation.mutate(
+      {
+        id: emailId,
+      },
+      {
+        onSuccess: () => {
+          utils.email.getEmail.invalidate({ id: emailId });
+          setOpen(false);
+          toast.success(`Email cancelled`);
+        },
+        onError: (e) => {
+          toast.error(`Error cancelling email: ${e.message}`);
+        },
+      }
+    );
+  }
+
+  const confirmation = cancelForm.watch("confirmation");
+
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(_open) => (_open !== open ? setOpen(_open) : null)}
+    >
+      <DialogTrigger asChild>
+        <Button variant="ghost" size="sm">
+          <Trash2 className="h-4 w-4 text-red-500" />
+        </Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Cancel Email</DialogTitle>
+          <DialogDescription>
+            Are you sure you want to cancel this email? This action cannot be
+            undone.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="py-2">
+          <Form {...cancelForm}>
+            <form
+              onSubmit={cancelForm.handleSubmit(onEmailCancel)}
+              className="space-y-4"
+            >
+              <FormField
+                control={cancelForm.control}
+                name="confirmation"
+                render={({ field, formState }) => (
+                  <FormItem>
+                    <FormLabel>Type "cancel" to confirm</FormLabel>
+                    <FormControl>
+                      <Input {...field} />
+                    </FormControl>
+                    {formState.errors.confirmation ? (
+                      <FormMessage />
+                    ) : (
+                      <FormDescription className="text-transparent">
+                        .
+                      </FormDescription>
+                    )}
+                  </FormItem>
+                )}
+              />
+              <div className="flex justify-end">
+                <Button
+                  type="submit"
+                  variant="destructive"
+                  disabled={
+                    cancelEmailMutation.isPending || confirmation !== "cancel"
+                  }
+                >
+                  {cancelEmailMutation.isPending
+                    ? "Cancelling..."
+                    : "Cancel Email"}
+                </Button>
+              </div>
+            </form>
+          </Form>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default CancelEmail;

apps/web/src/app/(dashboard)/emails/edit-schedule.tsx

@@ -0,0 +1,169 @@
+"use client";
+
+import { Button } from "@unsend/ui/src/button";
+import { Input } from "@unsend/ui/src/input";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@unsend/ui/src/dialog";
+import * as chrono from "chrono-node";
+import { api } from "~/trpc/react";
+import { useRef, useState } from "react";
+import { Edit3 } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { toast } from "@unsend/ui/src/toaster";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSubContent,
+  DropdownMenuTrigger,
+} from "@unsend/ui/src/dropdown-menu";
+import {
+  Command,
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from "@unsend/ui/src/command";
+
+export const EditSchedule: React.FC<{
+  emailId: string;
+  scheduledAt: string | null;
+}> = ({ emailId, scheduledAt }) => {
+  const [open, setOpen] = useState(false);
+  const [openSuggestions, setOpenSuggestions] = useState(true);
+  const [scheduleInput, setScheduleInput] = useState(scheduledAt || "");
+  const [scheduledAtTime, setScheduledAtTime] = useState<Date | null>(
+    scheduledAt ? new Date(scheduledAt) : null
+  );
+  const updateEmailScheduledAtMutation =
+    api.email.updateEmailScheduledAt.useMutation();
+
+  const utils = api.useUtils();
+  const router = useRouter();
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const handleScheduleUpdate = () => {
+    const parsedDate = chrono.parseDate(scheduleInput);
+    if (!parsedDate) {
+      toast.error("Invalid date and time");
+      return;
+    }
+
+    updateEmailScheduledAtMutation.mutate(
+      {
+        id: emailId,
+        scheduledAt: parsedDate.toISOString(),
+      },
+      {
+        onSuccess: () => {
+          utils.email.getEmail.invalidate({ id: emailId });
+          setOpen(false);
+          toast.success("Email schedule updated successfully");
+        },
+        onError: (error) => {
+          toast.error(error.message);
+        },
+      }
+    );
+  };
+
+  const onInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setScheduleInput(e.target.value);
+    const parsedDate = chrono.parseDate(e.target.value);
+    if (parsedDate) {
+      setScheduledAtTime(parsedDate);
+    }
+  };
+
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(_open) => (_open !== open ? setOpen(_open) : null)}
+    >
+      <DialogTrigger asChild>
+        <Button variant="ghost" size="sm">
+          <Edit3 className="h-4 w-4" />
+        </Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Edit Schedule</DialogTitle>
+        </DialogHeader>
+        <div className="py-2">
+          <div className="space-y-4">
+            <div>
+              <label htmlFor="scheduleInput" className="block mb-2">
+                Schedule at
+              </label>
+              {/* <Input
+                id="scheduleInput"
+                value={scheduleInput}
+                onChange={onInputChange}
+                // onClick={() => setOpenSuggestions(true)}
+                onFocus={() => setOpenSuggestions(true)}
+                // onBlur={() => setOpenSuggestions(false)}
+                placeholder="Enter date and time (e.g., tomorrow at 3pm)"
+              />
+
+              <DropdownMenu
+                open={openSuggestions}
+                onOpenChange={setOpenSuggestions}
+              >
+                <div className="w-full flex justify-center">
+                  <DropdownMenuTrigger></DropdownMenuTrigger>
+                </div>
+                <DropdownMenuContent className=" min-w-[29rem]">
+                  <DropdownMenuItem>Profile</DropdownMenuItem>
+                  <DropdownMenuItem>Billing</DropdownMenuItem>
+                  <DropdownMenuItem>Team</DropdownMenuItem>
+                  <DropdownMenuItem>Subscription</DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu> */}
+              <CommandDialog
+                open={openSuggestions}
+                onOpenChange={setOpenSuggestions}
+              >
+                <CommandInput placeholder="Type a command or search..." />
+                <CommandList>
+                  <CommandEmpty>No results found.</CommandEmpty>
+                  <CommandGroup heading="Suggestions">
+                    <CommandItem>Calendar</CommandItem>
+                    <CommandItem>Search Emoji</CommandItem>
+                    <CommandItem>Calculator</CommandItem>
+                  </CommandGroup>
+                  <CommandSeparator />
+                  <CommandGroup heading="Settings">
+                    <CommandItem>Profile</CommandItem>
+                    <CommandItem>Billing</CommandItem>
+                    <CommandItem>Settings</CommandItem>
+                  </CommandGroup>
+                </CommandList>
+              </CommandDialog>
+            </div>
+            <div className="flex justify-end">
+              <Button
+                className="w-[100px] bg-white hover:bg-gray-100 focus:bg-gray-100"
+                onClick={handleScheduleUpdate}
+                disabled={updateEmailScheduledAtMutation.isPending}
+              >
+                {updateEmailScheduledAtMutation.isPending
+                  ? "Updating..."
+                  : "Update"}
+              </Button>
+            </div>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default EditSchedule;

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

@@ -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>;

apps/web/src/app/(dashboard)/emails/email-list.tsx

@@ -17,7 +17,7 @@ import {
   MailWarning,
   MailX,
 } from "lucide-react";
-import { formatDistanceToNow } from "date-fns";
+import { formatDate, formatDistanceToNow } from "date-fns";
 import { EmailStatus } from "@prisma/client";
 import { EmailStatusBadge } from "./email-status-badge";
 import EmailDetails from "./email-details";
@@ -31,6 +31,12 @@ import {
   SelectTrigger,
 } from "@unsend/ui/src/select";
 import Spinner from "@unsend/ui/src/spinner";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@unsend/ui/src/tooltip";
 
 /* Stupid hydrating error. And I so stupid to understand the stupid NextJS docs */
 const DynamicSheetWithNoSSR = dynamic(
@@ -123,16 +129,39 @@ export default function EmailsList() {
                 >
                   <TableCell className="font-medium">
                     <div className="flex gap-4 items-center">
-                      <EmailIcon status={email.latestStatus ?? "Send"} />
+                      <EmailIcon status={email.latestStatus ?? "Sent"} />
                       <p>{email.to}</p>
                     </div>
                   </TableCell>
                   <TableCell>
-                    <EmailStatusBadge status={email.latestStatus ?? "Sent"} />
+                    {email.latestStatus === "SCHEDULED" && email.scheduledAt ? (
+                      <TooltipProvider>
+                        <Tooltip>
+                          <TooltipTrigger>
+                            <EmailStatusBadge
+                              status={email.latestStatus ?? "Sent"}
+                            />
+                          </TooltipTrigger>
+                          <TooltipContent>
+                            Scheduled at{" "}
+                            {formatDate(
+                              email.scheduledAt,
+                              "MMM dd'th', hh:mm a"
+                            )}
+                          </TooltipContent>
+                        </Tooltip>
+                      </TooltipProvider>
+                    ) : (
+                      <EmailStatusBadge status={email.latestStatus ?? "Sent"} />
+                    )}
                   </TableCell>
                   <TableCell>{email.subject}</TableCell>
                   <TableCell className="text-right">
-                    {formatDistanceToNow(email.createdAt, { addSuffix: true })}
+                    {email.latestStatus !== "SCHEDULED"
+                      ? formatDistanceToNow(
+                          email.scheduledAt ?? email.createdAt
+                        )
+                      : "--"}
                   </TableCell>
                 </TableRow>
               ))