feat: init

apps/web/core/components/cycles/delete-modal.tsx

@@ -0,0 +1,106 @@
+"use client";
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import { useParams, useSearchParams } from "next/navigation";
+// types
+import { PROJECT_ERROR_MESSAGES, CYCLE_TRACKER_EVENTS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { ICycle } from "@plane/types";
+// ui
+import { AlertModalCore } from "@plane/ui";
+// helpers
+import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
+// hooks
+import { useCycle } from "@/hooks/store/use-cycle";
+import { useAppRouter } from "@/hooks/use-app-router";
+
+interface ICycleDelete {
+  cycle: ICycle;
+  isOpen: boolean;
+  handleClose: () => void;
+  workspaceSlug: string;
+  projectId: string;
+}
+
+export const CycleDeleteModal: React.FC<ICycleDelete> = observer((props) => {
+  const { isOpen, handleClose, cycle, workspaceSlug, projectId } = props;
+  // states
+  const [loader, setLoader] = useState(false);
+  // store hooks
+  const { deleteCycle } = useCycle();
+  const { t } = useTranslation();
+  // router
+  const router = useAppRouter();
+  const { cycleId } = useParams();
+  const searchParams = useSearchParams();
+  const peekCycle = searchParams.get("peekCycle");
+
+  const formSubmit = async () => {
+    if (!cycle) return;
+
+    setLoader(true);
+    try {
+      await deleteCycle(workspaceSlug, projectId, cycle.id)
+        .then(() => {
+          if (cycleId || peekCycle) router.push(`/${workspaceSlug}/projects/${projectId}/cycles`);
+          setToast({
+            type: TOAST_TYPE.SUCCESS,
+            title: "Success!",
+            message: "Cycle deleted successfully.",
+          });
+          captureSuccess({
+            eventName: CYCLE_TRACKER_EVENTS.delete,
+            payload: {
+              id: cycle.id,
+            },
+          });
+        })
+        .catch((errors) => {
+          const isPermissionError = errors?.error === "You don't have the required permissions.";
+          const currentError = isPermissionError
+            ? PROJECT_ERROR_MESSAGES.permissionError
+            : PROJECT_ERROR_MESSAGES.cycleDeleteError;
+          setToast({
+            title: t(currentError.i18n_title),
+            type: TOAST_TYPE.ERROR,
+            message: currentError.i18n_message && t(currentError.i18n_message),
+          });
+          captureError({
+            eventName: CYCLE_TRACKER_EVENTS.delete,
+            payload: {
+              id: cycle.id,
+            },
+            error: errors,
+          });
+        })
+        .finally(() => handleClose());
+    } catch {
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: "Warning!",
+        message: "Something went wrong please try again later.",
+      });
+    }
+
+    setLoader(false);
+  };
+
+  return (
+    <AlertModalCore
+      handleClose={handleClose}
+      handleSubmit={formSubmit}
+      isSubmitting={loader}
+      isOpen={isOpen}
+      title="Delete cycle"
+      content={
+        <>
+          Are you sure you want to delete cycle{' "'}
+          <span className="break-words font-medium text-custom-text-100">{cycle?.name}</span>
+          {'"'}? All of the data related to the cycle will be permanently removed. This action cannot be undone.
+        </>
+      }
+    />
+  );
+});