Merge pull request #1337 from rockingrohit9639/feature/revert-to-draf…

…t-state

Feature/revert to draft state

app/components/booking/actions-dropdown.tsx

@@ -1,3 +1,4 @@
+import { BookingStatus } from "@prisma/client";
 import { useLoaderData, useSubmit } from "@remix-run/react";
 import { ChevronRight } from "~/components/icons/library";
 import {
@@ -18,6 +19,7 @@ import { userHasPermission } from "~/utils/permissions/permission.validator.clie
 import { tw } from "~/utils/tw";
 import { DeleteBooking } from "./delete-booking";
 import { GenerateBookingPdf } from "./generate-booking-pdf";
+import RevertToDraftDialog from "./revert-to-draft-dialog";
 import { Divider } from "../layout/divider";
 import { Button } from "../shared/button";
 import When from "../when/when";
@@ -65,8 +67,11 @@ export const ActionsDropdown = ({ fullWidth }: Props) => {
       <DropdownMenuPortal>
         <DropdownMenuContent
           align="end"
-          className="order w-[220px] rounded-md bg-white p-1.5 text-right "
+          className="order w-[220px] rounded-md bg-white p-1.5 text-right"
         >
+          <When truthy={booking.status === BookingStatus.RESERVED}>
+            <RevertToDraftDialog booking={booking} />
+          </When>
           <When
             truthy={(isOngoing || isReserved || isOverdue) && canCancelBooking}
           >

app/components/booking/revert-to-draft-dialog.tsx

@@ -0,0 +1,78 @@
+import { useState } from "react";
+import { BookingStatus, type Booking } from "@prisma/client";
+import { Dialog, DialogPortal } from "../layout/dialog";
+import { Button } from "../shared/button";
+
+type RevertToDraftProps = {
+  booking: Pick<Booking, "name" | "status">;
+};
+
+export default function RevertToDraftDialog({ booking }: RevertToDraftProps) {
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+
+  function handleOpenDialog() {
+    setIsDialogOpen(true);
+  }
+
+  function handleCloseDialog() {
+    setIsDialogOpen(false);
+  }
+
+  return (
+    <>
+      <Button
+        variant="link"
+        className="hidden justify-start rounded-sm px-2 py-1.5 text-left text-sm font-medium text-gray-700 outline-none hover:bg-slate-100 hover:text-gray-700 md:block"
+        width="full"
+        onClick={handleOpenDialog}
+        disabled={booking.status !== BookingStatus.RESERVED}
+      >
+        Revert to Draft
+      </Button>
+      <DialogPortal>
+        <Dialog
+          className="md:max-w-sm"
+          open={isDialogOpen}
+          onClose={handleCloseDialog}
+          title={
+            <div>
+              <h3>Reverting to draft state</h3>
+            </div>
+          }
+        >
+          <div className="px-6 pb-4">
+            <p className="mb-4">
+              Are you sure you want to revert{" "}
+              <span className="font-bold">{booking.name}</span> booking back to
+              draft?
+            </p>
+
+            <form method="post" className="flex w-full items-center gap-4">
+              <input type="hidden" name="intent" value="revert-to-draft" />
+              <Button
+                variant="secondary"
+                className="flex-1"
+                type="button"
+                onClick={handleCloseDialog}
+              >
+                Cancel
+              </Button>
+              <Button className="flex-1">Confirm</Button>
+            </form>
+          </div>
+        </Dialog>
+      </DialogPortal>
+
+      {/* Only for mobile */}
+      <Button
+        variant="link"
+        className="block justify-start rounded-sm px-2 py-1.5 text-left text-sm font-medium text-gray-700 outline-none hover:bg-slate-100 hover:text-gray-700  md:hidden"
+        width="full"
+        onClick={handleOpenDialog}
+        disabled={booking.status !== BookingStatus.RESERVED}
+      >
+        Revert to Draft
+      </Button>
+    </>
+  );
+}

app/routes/_layout+/bookings.$bookingId.tsx

@@ -249,6 +249,7 @@ export async function action({ context, request, params }: ActionFunctionArgs) {
           "archive",
           "cancel",
           "removeKit",
+          "revert-to-draft",
         ]),
         nameChangeOnly: z
           .string()
@@ -270,6 +271,7 @@ export async function action({ context, request, params }: ActionFunctionArgs) {
       archive: PermissionAction.update,
       cancel: PermissionAction.update,
       removeKit: PermissionAction.update,
+      "revert-to-draft": PermissionAction.update,
     };
 
     const { organizationId, role, isSelfServiceOrBase } =
@@ -535,6 +537,21 @@ export async function action({ context, request, params }: ActionFunctionArgs) {
           headers,
         });
       }
+      case "revert-to-draft": {
+        await upsertBooking(
+          { id, status: BookingStatus.DRAFT },
+          getClientHint(request)
+        );
+
+        sendNotification({
+          title: "Booking reverted",
+          message: "Your booking has been reverted back to draft successfully",
+          icon: { name: "success", variant: "success" },
+          senderId: authSession.userId,
+        });
+
+        return json(data({ success: true }));
+      }
       default: {
         checkExhaustiveSwitch(intent);
         return json(data(null));