init 2

src/pages/common/components/CommonMenuButton/hooks/useMenuItems.ts

@@ -34,15 +34,15 @@ export const useMenuItems = (options: Options): Item[] => {
     },
     {
       id: CommonMenuItem.DeleteCommonProposal,
-      text: `Delete ${options.isSubCommon ? "space" : "common"} propsal`,
+      text: `Delete ${options.isSubCommon ? "space" : "common"}`,
       withWarning: true,
       onClick: () => {
         onMenuItemSelect(CommonMenuItem.DeleteCommonProposal);
       },
     },
     {
       id: CommonMenuItem.DeleteCommonAction,
-      text: `Delete ${options.isSubCommon ? "space" : "common"} action`,
+      text: `Delete ${options.isSubCommon ? "space" : "common"}`,
       withWarning: true,
       onClick: () => {
         onMenuItemSelect(CommonMenuItem.DeleteCommonAction);
@@ -53,9 +53,15 @@ export const useMenuItems = (options: Options): Item[] => {
   /**
    * For now we give priority to DeleteCommonAction over DeleteCommonProposal.
    */
-  //const filteredItems = allowedMenuItems.includes(CommonMenuItem.DeleteCommonAction) ? allowedMenuItems.filter(item => item !== CommonMenuItem.DeleteCommonProposal) : allowedMenuItems;
+  const filteredItems = allowedMenuItems.includes(
+    CommonMenuItem.DeleteCommonAction,
+  )
+    ? allowedMenuItems.filter(
+        (item) => item !== CommonMenuItem.DeleteCommonProposal,
+      )
+    : allowedMenuItems;
 
   return items.filter((item) =>
-    allowedMenuItems.includes(item.id as CommonMenuItem),
+    filteredItems.includes(item.id as CommonMenuItem),
   );
 };

src/pages/common/components/CommonMenuButton/utils/getAllowedItems.ts

@@ -37,7 +37,7 @@ const MENU_ITEM_TO_CHECK_FUNCTION_MAP: Record<
         hasPermission({
           commonMember,
           governance,
-          key: GovernanceActions.DELETE_COMMON,
+          key: GovernanceActions.DELETE_COMMON_ACTION,
         }),
     ),
 };

src/pages/common/providers/CommonData/CommonData.tsx

@@ -23,9 +23,11 @@ import { JoinProjectModal } from "../../components/JoinProjectModal";
 import { CommonMenuItem } from "../../constants";
 import { CommonPageSettings } from "../../types";
 import { LeaveCircleModal } from "./components";
+import { DeleteCommonModal } from "./components/DeleteCommonModal";
 import { JoinCircleModal } from "./components/JoinCircleModal";
 import { CommonDataContext, CommonDataContextValue } from "./context";
 import {
+  useDeleteCommonModal,
   useJoinCircleModal,
   useLeaveCircleModal,
   useProposalCreationModal,
@@ -89,9 +91,11 @@ const CommonData: FC<CommonDataProps> = (props) => {
     isProposalCreationModalOpen,
     initialProposalTypeForCreation,
     onProposalCreationModalClose,
-    onCommonDelete,
+    onCommonDeleteProposal,
     redirectToProposalPage,
   } = useProposalCreationModal();
+  const { isDeleteCommonModalOpen, onDeleteCommonModalClose, onCommonDelete } =
+    useDeleteCommonModal();
   const {
     circleToLeave,
     isLeaveCircleModalOpen,
@@ -131,12 +135,12 @@ const CommonData: FC<CommonDataProps> = (props) => {
       setSelectedMenuItem(menuItem);
 
       if (menuItem === CommonMenuItem.DeleteCommonProposal) {
-        onCommonDelete();
+        onCommonDeleteProposal();
       } else if (menuItem === CommonMenuItem.DeleteCommonAction) {
-        console.log("DELETE COMMON ACTION!");
+        onCommonDelete();
       }
     },
-    [onCommonDelete],
+    [onCommonDeleteProposal, onCommonDelete],
   );
 
   const handleMenuClose = () => {
@@ -341,6 +345,13 @@ const CommonData: FC<CommonDataProps> = (props) => {
         shouldKeepLoadingIfPossible
         onRequestCreated={handleProjectJoinRequestCreated}
       />
+      <DeleteCommonModal
+        commonId={common.id}
+        commonName={common.name}
+        isSpace={checkIsProject(common)}
+        isShowing={isDeleteCommonModalOpen}
+        onClose={onDeleteCommonModalClose}
+      />
     </CommonDataContext.Provider>
   );
 };

src/pages/common/providers/CommonData/components/DeleteCommonModal/DeleteCommonModal.module.scss

@@ -0,0 +1,20 @@
+@import "../../../../../../constants";
+
+.modal {
+  max-width: 30rem;
+}
+
+.buttonsWrapper {
+  display: flex;
+  width: fit-content;
+  margin-left: auto;
+  margin-top: 3.25rem;
+}
+
+.deleteButton {
+  margin-left: 1.375rem;
+}
+
+.error {
+  font-size: $xsmall;
+}

src/pages/common/providers/CommonData/components/DeleteCommonModal/DeleteCommonModal.tsx

@@ -0,0 +1,78 @@
+import React, { FC, useState } from "react";
+import { CommonMemberEventEmitter } from "@/events";
+import { CommonService } from "@/services";
+import { Modal } from "@/shared/components";
+import { ErrorText } from "@/shared/components/Form";
+import { Button, ButtonVariant } from "@/shared/ui-kit";
+import { emptyFunction } from "@/shared/utils";
+import styles from "./DeleteCommonModal.module.scss";
+
+interface DeleteCommonModalProps {
+  commonId: string;
+  commonName: string;
+  isSpace: boolean;
+  isShowing: boolean;
+  onClose: () => void;
+}
+
+const DeleteCommonModal: FC<DeleteCommonModalProps> = (props) => {
+  const { isShowing, onClose, commonName, isSpace, commonId } = props;
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [errorText, setErrorText] = useState("");
+  const entityType = isSpace ? "space" : "common";
+
+  const handleLeave = async () => {
+    setIsDeleting(true);
+    setErrorText("");
+
+    try {
+      await CommonService.deleteCommon(commonId);
+      // CommonMemberEventEmitter.emit(
+      //   CommonMemberEvent.Reset,
+      //   commonId,
+      //   commonMemberId,
+      // );
+      setIsDeleting(false);
+      onClose();
+    } catch (error) {
+      setErrorText("Something went wrong");
+      setIsDeleting(false);
+    }
+  };
+
+  return (
+    <Modal
+      className={styles.modal}
+      title={`Delete ${commonName} ${entityType}`}
+      isShowing={isShowing}
+      onClose={isDeleting ? emptyFunction : onClose}
+    >
+      <div>
+        Deleting a {entityType} is irreversible and will delete all of its
+        content. Are you sure you want to continue?
+        <div className={styles.buttonsWrapper}>
+          <Button
+            variant={ButtonVariant.OutlineDarkPink}
+            onClick={onClose}
+            disabled={isDeleting}
+          >
+            Cancel
+          </Button>
+          <Button
+            className={styles.deleteButton}
+            variant={ButtonVariant.PrimaryPink}
+            onClick={handleLeave}
+            disabled={isDeleting}
+          >
+            Delete {entityType}
+          </Button>
+        </div>
+        {errorText && (
+          <ErrorText className={styles.error}>{errorText}</ErrorText>
+        )}
+      </div>
+    </Modal>
+  );
+};
+
+export default DeleteCommonModal;

src/pages/common/providers/CommonData/components/DeleteCommonModal/index.ts

@@ -0,0 +1 @@
+export { default as DeleteCommonModal } from "./DeleteCommonModal";

src/pages/common/providers/CommonData/hooks/index.ts

@@ -1,3 +1,4 @@
 export * from "./useJoinCircleModal";
 export * from "./useLeaveCircleModal";
 export * from "./useProposalCreationModal";
+export * from "./useDeleteCommonModal";

src/pages/common/providers/CommonData/hooks/useDeleteCommonModal.ts

@@ -0,0 +1,11 @@
+import { useModal } from "@/shared/hooks";
+
+export const useDeleteCommonModal = () => {
+  const { isShowing, onOpen, onClose } = useModal(false);
+
+  return {
+    isDeleteCommonModalOpen: isShowing,
+    onDeleteCommonModalClose: onClose,
+    onCommonDelete: onOpen,
+  };
+};

src/pages/common/providers/CommonData/hooks/useProposalCreationModal.ts

@@ -15,7 +15,7 @@ interface Return {
   initialProposalTypeForCreation: ProposalsTypes | null;
   onProposalCreationModalOpen: () => void;
   onProposalCreationModalClose: () => void;
-  onCommonDelete: () => void;
+  onCommonDeleteProposal: () => void;
   redirectToProposalPage: (
     proposal: Proposal | ProposalWithHighlightedComment,
   ) => void;
@@ -53,7 +53,7 @@ export const useProposalCreationModal = (): Return => {
     setInitialProposalTypeForCreation(null);
   }, [onProposalCreationModalClose]);
 
-  const onCommonDelete = useCallback(() => {
+  const onCommonDeleteProposal = useCallback(() => {
     setInitialProposalTypeForCreation(ProposalsTypes.DELETE_COMMON);
     onProposalCreationModalOpen();
   }, [onProposalCreationModalOpen]);
@@ -63,7 +63,7 @@ export const useProposalCreationModal = (): Return => {
     initialProposalTypeForCreation,
     onProposalCreationModalOpen,
     onProposalCreationModalClose: handleProposalCreationModalClose,
-    onCommonDelete,
+    onCommonDeleteProposal,
     redirectToProposalPage,
   };
 };

src/services/Common.ts

@@ -532,6 +532,13 @@ class CommonService {
   public muteCommon = async (commonId: string): Promise<void> => {
     await Api.post(ApiEndpoint.MuteCommon, { commonId });
   };
+
+  public deleteCommon = async (commonId: string): Promise<void> => {
+    await Api.post(ApiEndpoint.CreateAction, {
+      type: GovernanceActions.DELETE_COMMON_ACTION,
+      args: { commonId },
+    });
+  };
 }
 
 export default new CommonService();

src/shared/constants/governance/GovernanceActions.ts

@@ -42,7 +42,7 @@ export enum GovernanceActions {
 
   PIN_OR_UNPIN_FEED_ITEMS = "PIN_OR_UNPIN_FEED_ITEMS",
 
-  DELETE_COMMON = "DELETE_COMMON",
+  DELETE_COMMON_ACTION = "DELETE_COMMON_ACTION",
 
   MOVE_TO_HERE = "MOVE_TO_HERE",
   LINK_TO_HERE = "LINK_TO_HERE",