feat: init

apps/web/core/components/automation/auto-archive-automation.tsx

@@ -0,0 +1,149 @@
+"use client";
+
+import React, { useMemo, useState } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import { ArchiveRestore } from "lucide-react";
+// types
+import {
+  PROJECT_AUTOMATION_MONTHS,
+  EUserPermissions,
+  EUserPermissionsLevel,
+  PROJECT_SETTINGS_TRACKER_ELEMENTS,
+  PROJECT_SETTINGS_TRACKER_EVENTS,
+} from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import type { IProject } from "@plane/types";
+// ui
+import { CustomSelect, Loader, ToggleSwitch } from "@plane/ui";
+// component
+import { SelectMonthModal } from "@/components/automation";
+// constants
+// hooks
+import { captureElementAndEvent } from "@/helpers/event-tracker.helper";
+import { useProject } from "@/hooks/store/use-project";
+import { useUserPermissions } from "@/hooks/store/user";
+
+type Props = {
+  handleChange: (formData: Partial<IProject>) => Promise<void>;
+};
+
+const initialValues: Partial<IProject> = { archive_in: 1 };
+
+export const AutoArchiveAutomation: React.FC<Props> = observer((props) => {
+  const { handleChange } = props;
+  // router
+  const { workspaceSlug } = useParams();
+  // states
+  const [monthModal, setmonthModal] = useState(false);
+  // store hooks
+  const { allowPermissions } = useUserPermissions();
+  const { t } = useTranslation();
+
+  const { currentProjectDetails } = useProject();
+
+  const isAdmin = allowPermissions(
+    [EUserPermissions.ADMIN],
+    EUserPermissionsLevel.PROJECT,
+    workspaceSlug?.toString(),
+    currentProjectDetails?.id
+  );
+
+  const autoArchiveStatus = useMemo(() => {
+    if (currentProjectDetails?.archive_in === undefined) return false;
+    return currentProjectDetails.archive_in !== 0;
+  }, [currentProjectDetails]);
+
+  return (
+    <>
+      <SelectMonthModal
+        type="auto-archive"
+        initialValues={initialValues}
+        isOpen={monthModal}
+        handleClose={() => setmonthModal(false)}
+        handleChange={handleChange}
+      />
+      <div className="flex flex-col gap-4 border-b border-custom-border-100 py-6">
+        <div className="flex items-center justify-between">
+          <div className="flex items-start gap-3">
+            <div className="flex items-center justify-center rounded bg-custom-background-90 p-3">
+              <ArchiveRestore className="h-4 w-4 flex-shrink-0 text-custom-text-100" />
+            </div>
+            <div className="">
+              <h4 className="text-sm font-medium">{t("project_settings.automations.auto-archive.title")}</h4>
+              <p className="text-sm tracking-tight text-custom-text-200">
+                {t("project_settings.automations.auto-archive.description")}
+              </p>
+            </div>
+          </div>
+          <ToggleSwitch
+            value={autoArchiveStatus}
+            onChange={async () => {
+              if (currentProjectDetails?.archive_in === 0) {
+                await handleChange({ archive_in: 1 });
+              } else {
+                await handleChange({ archive_in: 0 });
+              }
+              captureElementAndEvent({
+                element: {
+                  elementName: PROJECT_SETTINGS_TRACKER_ELEMENTS.AUTOMATIONS_ARCHIVE_TOGGLE_BUTTON,
+                },
+                event: {
+                  eventName: PROJECT_SETTINGS_TRACKER_EVENTS.auto_archive_workitems,
+                  state: "SUCCESS",
+                },
+              });
+            }}
+            size="sm"
+            disabled={!isAdmin}
+          />
+        </div>
+
+        {currentProjectDetails ? (
+          autoArchiveStatus && (
+            <div className="mx-6">
+              <div className="flex w-full items-center justify-between gap-2 rounded border border-custom-border-200 bg-custom-background-90 px-5 py-4">
+                <div className="w-1/2 text-sm font-medium">
+                  {t("project_settings.automations.auto-archive.duration")}
+                </div>
+                <div className="w-1/2">
+                  <CustomSelect
+                    value={currentProjectDetails?.archive_in}
+                    label={`${currentProjectDetails?.archive_in} ${
+                      currentProjectDetails?.archive_in === 1 ? "month" : "months"
+                    }`}
+                    onChange={(val: number) => {
+                      handleChange({ archive_in: val });
+                    }}
+                    input
+                    disabled={!isAdmin}
+                  >
+                    <>
+                      {PROJECT_AUTOMATION_MONTHS.map((month) => (
+                        <CustomSelect.Option key={month.i18n_label} value={month.value}>
+                          <span className="text-sm">{t(month.i18n_label, { months: month.value })}</span>
+                        </CustomSelect.Option>
+                      ))}
+
+                      <button
+                        type="button"
+                        className="flex w-full select-none items-center rounded px-1 py-1.5 text-sm text-custom-text-200 hover:bg-custom-background-80"
+                        onClick={() => setmonthModal(true)}
+                      >
+                        {t("common.customize_time_range")}
+                      </button>
+                    </>
+                  </CustomSelect>
+                </div>
+              </div>
+            </div>
+          )
+        ) : (
+          <Loader className="mx-6">
+            <Loader.Item height="50px" />
+          </Loader>
+        )}
+      </div>
+    </>
+  );
+});

apps/web/core/components/automation/auto-close-automation.tsx

@@ -0,0 +1,218 @@
+"use client";
+
+import React, { useMemo, useState } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// icons
+import { ArchiveX } from "lucide-react";
+// types
+import {
+  PROJECT_AUTOMATION_MONTHS,
+  EUserPermissions,
+  EUserPermissionsLevel,
+  EIconSize,
+  PROJECT_SETTINGS_TRACKER_ELEMENTS,
+  PROJECT_SETTINGS_TRACKER_EVENTS,
+} from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { StateGroupIcon, DoubleCircleIcon } from "@plane/propel/icons";
+import type { IProject } from "@plane/types";
+// ui
+import { CustomSelect, CustomSearchSelect, ToggleSwitch, Loader } from "@plane/ui";
+// component
+import { SelectMonthModal } from "@/components/automation";
+// constants
+// hooks
+import { captureElementAndEvent } from "@/helpers/event-tracker.helper";
+import { useProject } from "@/hooks/store/use-project";
+import { useProjectState } from "@/hooks/store/use-project-state";
+import { useUserPermissions } from "@/hooks/store/user";
+
+type Props = {
+  handleChange: (formData: Partial<IProject>) => Promise<void>;
+};
+
+export const AutoCloseAutomation: React.FC<Props> = observer((props) => {
+  const { handleChange } = props;
+  // router
+  const { workspaceSlug } = useParams();
+  // states
+  const [monthModal, setmonthModal] = useState(false);
+  // store hooks
+  const { currentProjectDetails } = useProject();
+  const { projectStates } = useProjectState();
+  const { allowPermissions } = useUserPermissions();
+  const { t } = useTranslation();
+
+  // const stateGroups = projectStateStore.groupedProjectStates ?? undefined;
+
+  const options = projectStates
+    ?.filter((state) => state.group === "cancelled")
+    .map((state) => ({
+      value: state.id,
+      query: state.name,
+      content: (
+        <div className="flex items-center gap-2">
+          <StateGroupIcon stateGroup={state.group} color={state.color} size={EIconSize.LG} />
+          {state.name}
+        </div>
+      ),
+    }));
+
+  const multipleOptions = (options ?? []).length > 1;
+
+  const defaultState = projectStates?.find((s) => s.group === "cancelled")?.id || null;
+
+  const selectedOption = projectStates?.find((s) => s.id === (currentProjectDetails?.default_state ?? defaultState));
+  const currentDefaultState = projectStates?.find((s) => s.id === defaultState);
+
+  const initialValues: Partial<IProject> = {
+    close_in: 1,
+    default_state: defaultState,
+  };
+
+  const isAdmin = allowPermissions(
+    [EUserPermissions.ADMIN],
+    EUserPermissionsLevel.PROJECT,
+    workspaceSlug?.toString(),
+    currentProjectDetails?.id
+  );
+
+  const autoCloseStatus = useMemo(() => {
+    if (currentProjectDetails?.close_in === undefined) return false;
+    return currentProjectDetails.close_in !== 0;
+  }, [currentProjectDetails]);
+
+  return (
+    <>
+      <SelectMonthModal
+        type="auto-close"
+        initialValues={initialValues}
+        isOpen={monthModal}
+        handleClose={() => setmonthModal(false)}
+        handleChange={handleChange}
+      />
+      <div className="flex flex-col gap-4 py-6">
+        <div className="flex items-center justify-between">
+          <div className="flex items-start gap-3">
+            <div className="flex items-center justify-center rounded bg-custom-background-90 p-3">
+              <ArchiveX className="h-4 w-4 flex-shrink-0 text-red-500" />
+            </div>
+            <div className="">
+              <h4 className="text-sm font-medium">{t("project_settings.automations.auto-close.title")}</h4>
+              <p className="text-sm tracking-tight text-custom-text-200">
+                {t("project_settings.automations.auto-close.description")}
+              </p>
+            </div>
+          </div>
+          <ToggleSwitch
+            value={autoCloseStatus}
+            onChange={async () => {
+              if (currentProjectDetails?.close_in === 0) {
+                await handleChange({ close_in: 1, default_state: defaultState });
+              } else {
+                await handleChange({ close_in: 0, default_state: null });
+              }
+              captureElementAndEvent({
+                element: {
+                  elementName: PROJECT_SETTINGS_TRACKER_ELEMENTS.AUTOMATIONS_CLOSE_TOGGLE_BUTTON,
+                },
+                event: {
+                  eventName: PROJECT_SETTINGS_TRACKER_EVENTS.auto_close_workitems,
+                  state: "SUCCESS",
+                },
+              });
+            }}
+            size="sm"
+            disabled={!isAdmin}
+          />
+        </div>
+
+        {currentProjectDetails ? (
+          autoCloseStatus && (
+            <div className="mx-6">
+              <div className="flex flex-col rounded border border-custom-border-200 bg-custom-background-90">
+                <div className="flex w-full items-center justify-between gap-2 px-5 py-4">
+                  <div className="w-1/2 text-sm font-medium">
+                    {t("project_settings.automations.auto-close.duration")}
+                  </div>
+                  <div className="w-1/2">
+                    <CustomSelect
+                      value={currentProjectDetails?.close_in}
+                      label={`${currentProjectDetails?.close_in} ${
+                        currentProjectDetails?.close_in === 1 ? "month" : "months"
+                      }`}
+                      onChange={(val: number) => {
+                        handleChange({ close_in: val });
+                      }}
+                      input
+                      disabled={!isAdmin}
+                    >
+                      <>
+                        {PROJECT_AUTOMATION_MONTHS.map((month) => (
+                          <CustomSelect.Option key={month.i18n_label} value={month.value}>
+                            {t(month.i18n_label, { months: month.value })}
+                          </CustomSelect.Option>
+                        ))}
+                        <button
+                          type="button"
+                          className="flex w-full select-none items-center rounded px-1 py-1.5 text-custom-text-200 hover:bg-custom-background-80"
+                          onClick={() => setmonthModal(true)}
+                        >
+                          {t("common.customize_time_range")}
+                        </button>
+                      </>
+                    </CustomSelect>
+                  </div>
+                </div>
+
+                <div className="ppy sm:py-10 flex w-full items-center justify-between gap-2 px-5 py-4">
+                  <div className="w-1/2 text-sm font-medium">
+                    {t("project_settings.automations.auto-close.auto_close_status")}
+                  </div>
+                  <div className="w-1/2 ">
+                    <CustomSearchSelect
+                      value={currentProjectDetails?.default_state ?? defaultState}
+                      label={
+                        <div className="flex items-center gap-2">
+                          {selectedOption ? (
+                            <StateGroupIcon
+                              stateGroup={selectedOption.group}
+                              color={selectedOption.color}
+                              size={EIconSize.LG}
+                            />
+                          ) : currentDefaultState ? (
+                            <StateGroupIcon
+                              stateGroup={currentDefaultState.group}
+                              color={currentDefaultState.color}
+                              size={EIconSize.LG}
+                            />
+                          ) : (
+                            <DoubleCircleIcon className="h-3.5 w-3.5 text-custom-text-200" />
+                          )}
+                          {selectedOption?.name
+                            ? selectedOption.name
+                            : (currentDefaultState?.name ?? <span className="text-custom-text-200">{t("state")}</span>)}
+                        </div>
+                      }
+                      onChange={(val: string) => {
+                        handleChange({ default_state: val });
+                      }}
+                      options={options}
+                      disabled={!multipleOptions}
+                      input
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          )
+        ) : (
+          <Loader className="mx-6">
+            <Loader.Item height="50px" />
+          </Loader>
+        )}
+      </div>
+    </>
+  );
+});

apps/web/core/components/automation/index.ts

@@ -0,0 +1,3 @@
+export * from "./auto-close-automation";
+export * from "./auto-archive-automation";
+export * from "./select-month-modal";

apps/web/core/components/automation/select-month-modal.tsx

@@ -0,0 +1,168 @@
+"use client";
+
+import React from "react";
+import { useParams } from "next/navigation";
+// react-hook-form
+import { Controller, useForm } from "react-hook-form";
+// headless ui
+import { Dialog, Transition } from "@headlessui/react";
+import { Button } from "@plane/propel/button";
+import type { IProject } from "@plane/types";
+// ui
+import { Input } from "@plane/ui";
+// types
+
+// types
+type Props = {
+  isOpen: boolean;
+  type: "auto-close" | "auto-archive";
+  initialValues: Partial<IProject>;
+  handleClose: () => void;
+  handleChange: (formData: Partial<IProject>) => Promise<void>;
+};
+
+export const SelectMonthModal: React.FC<Props> = ({ type, initialValues, isOpen, handleClose, handleChange }) => {
+  const { workspaceSlug, projectId } = useParams();
+
+  const {
+    formState: { errors, isSubmitting },
+    handleSubmit,
+    control,
+    reset,
+  } = useForm<IProject>({
+    defaultValues: initialValues,
+  });
+
+  const onClose = () => {
+    handleClose();
+    reset(initialValues);
+  };
+
+  const onSubmit = (formData: Partial<IProject>) => {
+    if (!workspaceSlug && !projectId) return;
+    handleChange(formData);
+    onClose();
+  };
+
+  return (
+    <Transition.Root show={isOpen} as={React.Fragment}>
+      <Dialog as="div" className="relative z-30" onClose={onClose}>
+        <Transition.Child
+          as={React.Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-10 overflow-y-auto">
+          <div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
+            <Transition.Child
+              as={React.Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel className="relative transform rounded-lg bg-custom-background-100 px-4 pb-4 pt-5 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
+                <form onSubmit={handleSubmit(onSubmit)}>
+                  <div>
+                    <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
+                      Customize time range
+                    </Dialog.Title>
+                    <div className="mt-8 flex items-center gap-2">
+                      <div className="flex w-full flex-col justify-center gap-1">
+                        {type === "auto-close" ? (
+                          <>
+                            <Controller
+                              control={control}
+                              name="close_in"
+                              rules={{
+                                required: "Select a month between 1 and 12.",
+                                min: 1,
+                                max: 12,
+                              }}
+                              render={({ field: { value, onChange, ref } }) => (
+                                <div className="relative flex w-full flex-col justify-center gap-1">
+                                  <Input
+                                    id="close_in"
+                                    name="close_in"
+                                    type="number"
+                                    value={value?.toString()}
+                                    onChange={onChange}
+                                    ref={ref}
+                                    hasError={Boolean(errors.close_in)}
+                                    placeholder="Enter Months"
+                                    className="w-full border-custom-border-200"
+                                    min={1}
+                                    max={12}
+                                  />
+                                  <span className="absolute right-8 top-2.5 text-sm text-custom-text-200">Months</span>
+                                </div>
+                              )}
+                            />
+
+                            {errors.close_in && (
+                              <span className="px-1 text-sm text-red-500">Select a month between 1 and 12.</span>
+                            )}
+                          </>
+                        ) : (
+                          <>
+                            <Controller
+                              control={control}
+                              name="archive_in"
+                              rules={{
+                                required: "Select a month between 1 and 12.",
+                                min: 1,
+                                max: 12,
+                              }}
+                              render={({ field: { value, onChange, ref } }) => (
+                                <div className="relative flex w-full flex-col justify-center gap-1">
+                                  <Input
+                                    id="archive_in"
+                                    name="archive_in"
+                                    type="number"
+                                    value={value?.toString()}
+                                    onChange={onChange}
+                                    ref={ref}
+                                    hasError={Boolean(errors.archive_in)}
+                                    placeholder="Enter Months"
+                                    className="w-full border-custom-border-200"
+                                    min={1}
+                                    max={12}
+                                  />
+                                  <span className="absolute right-8 top-2.5 text-sm text-custom-text-200">Months</span>
+                                </div>
+                              )}
+                            />
+                            {errors.archive_in && (
+                              <span className="px-1 text-sm text-red-500">Select a month between 1 and 12.</span>
+                            )}
+                          </>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                  <div className="mt-5 flex justify-end gap-2">
+                    <Button variant="neutral-primary" size="sm" onClick={onClose}>
+                      Cancel
+                    </Button>
+                    <Button variant="primary" size="sm" type="submit" loading={isSubmitting}>
+                      {isSubmitting ? "Submitting..." : "Submit"}
+                    </Button>
+                  </div>
+                </form>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};