Fix/reject task

src/entities/task/ui/task/components/task-buttons/components/task-buttons-recipient/index.tsx

@@ -118,7 +118,9 @@ export const TaskButtonsRecipient = ({
               userRole={userRole}
               taskId={taskId}
               type={
-                isTaskExpired || volunteer
+                isTaskUrgent
+                  ? modalContentType.cancel
+                  : volunteer
                   ? modalContentType.responded
                   : modalContentType.close
               }
@@ -128,7 +130,7 @@ export const TaskButtonsRecipient = ({
         >
           <SquareButton
             buttonType={taskButtonType.close}
-            disabledColor={isTaskUrgent}
+            disabledColor={isTaskUrgent || !!volunteer}
           />
         </ButtonWithModal>
       )}

src/entities/task/ui/task/components/task-buttons/components/task-buttons-volunteer/index.tsx

@@ -75,13 +75,11 @@ export const TaskButtonsVolunteer = ({
           modalContent={
             <ModalContent
               type={
-                isTaskExpired || !date
-                  ? modalContentType.responded
-                  : isTaskUrgent
-                  ? modalContentType.cancel
-                  : modalContentType.close
+                isTaskUrgent ? modalContentType.cancel : modalContentType.close
               }
               date={date}
+              taskId={taskId}
+              userRole={userRole}
             />
           }
         >

src/widgets/button-with-modal/index.tsx

@@ -1,8 +1,18 @@
-import type { Dispatch, ReactNode, SetStateAction } from 'react';
-import { useRef, useState } from 'react';
+import * as React from 'react';
+import {
+  Dispatch,
+  ReactNode,
+  SetStateAction,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+
 import { Icon } from 'shared/ui';
 import { Tooltip } from 'shared/ui/tooltip';
 import styles from './styles.module.css';
+import { PopupChat, infoAdmin } from 'entities';
+import { useControlModal } from 'shared/hooks';
 
 let tooltipModalRefCount = 0;
 
@@ -32,10 +42,22 @@ export const ButtonWithModal = ({
 }: ModalProps) => {
   const [visible, setVisible] = useState<boolean>(false);
   const [coords, setCoords] = useState<Coords | null>(null);
-
+  const { isOpen, handleOpen, handleClose } = useControlModal();
+  const [isTooltipBlocked, setIsTooltipBlocked] = useState(false);
+  const handleOpenChat = () => {
+    setIsTooltipBlocked(true);
+    handleOpen();
+    hideModal();
+  };
+  const handleCloseChat = () => {
+    handleClose();
+    setTimeout(() => setIsTooltipBlocked(false), 300);
+  };
   const buttonRef = useRef<HTMLDivElement>(null);
 
   const getCoords = () => {
+    if (isTooltipBlocked) return;
+
     if (!visible) {
       setVisible(true);
 
@@ -68,6 +90,10 @@ export const ButtonWithModal = ({
     }
   };
 
+  useEffect(() => {
+    setVisible(false);
+  }, [modalContent]);
+
   return (
     <div ref={buttonRef} onClick={getCoords} className={extClassName}>
       {children}
@@ -91,9 +117,21 @@ export const ButtonWithModal = ({
               className={`${styles.closeButton} close`}
             />
           )}
-          {modalContent}
+          {modalContent &&
+            React.cloneElement(modalContent as React.ReactElement, {
+              openChat: handleOpenChat,
+            })}
         </Tooltip>
       )}
+      {isOpen && (
+        <PopupChat
+          isOpen={isOpen}
+          onClick={handleCloseChat}
+          messages={[]}
+          chatmateInfo={infoAdmin}
+          onAttachFileClick={() => {}}
+        />
+      )}
     </div>
   );
 };

src/widgets/task-buttons-content/components/admin-modal-content/index.tsx

@@ -1,11 +1,9 @@
-import { useControlModal } from 'shared/hooks';
 import { Button, Typography } from 'shared/ui';
-import { infoAdmin, PopupChat } from 'entities';
 
 import styles from './styles.module.css';
+import { ModalContentProps } from 'widgets/task-buttons-content/index';
 
-export const AdminModalContent = () => {
-  const { isOpen, handleOpen, handleClose } = useControlModal();
+export const AdminModalContent = ({ openChat }: ModalContentProps) => {
   return (
     <div className={styles.modalTooltip}>
       <Typography
@@ -18,17 +16,8 @@ export const AdminModalContent = () => {
         <Button
           buttonType="secondary"
           label={'Написать администратору'}
-          onClick={handleOpen}
+          onClick={openChat}
         />
-        {isOpen && (
-          <PopupChat
-            isOpen={isOpen}
-            onClick={handleClose}
-            messages={[]}
-            chatmateInfo={infoAdmin}
-            onAttachFileClick={() => {}}
-          />
-        )}
       </div>
     </div>
   );

src/widgets/task-buttons-content/components/cancel-modal-content/index.tsx

@@ -1,60 +1,31 @@
-import { differenceInHours, parseISO } from 'date-fns';
-
-import { ModalContentProps } from 'widgets/task-buttons-content';
 import { Button, Typography } from 'shared/ui';
 
-import { infoAdmin, PopupChat } from 'entities';
-import { useControlModal } from 'shared/hooks';
-
 import styles from './styles.module.css';
-
-export const CancelModalContent = ({ date }: ModalContentProps) => {
-  const { isOpen, handleOpen, handleClose } = useControlModal();
-
-  const isRemainLessThanDay = (taskDeadline: string | null | undefined) => {
-    if (!taskDeadline) return false;
-
-    const now = new Date();
-    const parsedDate = parseISO(taskDeadline);
-    const hoursToDeadline = differenceInHours(parsedDate, now);
-    return hoursToDeadline < 24;
-  };
-
-  if (isRemainLessThanDay(date)) {
-    return (
-      <div className={styles.modalTooltip}>
-        <Typography
-          tag={'h3'}
-          variant={'paragraph-bold'}
-          content={'До начала заявки менее 24 часа'}
-          extraClass={styles.modalTitle}
+import { ModalContentProps } from 'widgets/task-buttons-content/index';
+
+export const CancelModalContent = ({ openChat }: ModalContentProps) => {
+  return (
+    <div className={styles.modalTooltip}>
+      <Typography
+        tag={'h3'}
+        variant={'paragraph-bold'}
+        content={'До начала заявки менее 24 часа'}
+        extraClass={styles.modalTitle}
+      />
+      <Typography
+        fontFamily={'secondaryFont'}
+        content={'Вы не можете отменить заявку самостоятельно.'}
+        extraClass={styles.modalContent}
+      />
+      <div className={styles.modalButtons}>
+        <Button
+          buttonType="primary"
+          label="Написать администратору"
+          onClick={openChat}
         />
-        <Typography
-          fontFamily={'secondaryFont'}
-          content={'Вы не можете отменить заявку самостоятельно.'}
-          extraClass={styles.modalContent}
-        />
-        <div className={styles.modalButtons}>
-          <Button
-            buttonType="primary"
-            label="Написать администратору"
-            onClick={() => handleOpen()}
-          />
-          {isOpen && (
-            <PopupChat
-              isOpen={isOpen}
-              onClick={handleClose}
-              messages={[]}
-              chatmateInfo={infoAdmin}
-              onAttachFileClick={() => {}}
-            />
-          )}
-        </div>
       </div>
-    );
-  }
-
-  return null;
+    </div>
+  );
 };
 
 export default CancelModalContent;

src/widgets/task-buttons-content/components/close-modal-content/index.tsx

@@ -2,11 +2,8 @@ import classNames from 'classnames';
 import { useState } from 'react';
 
 import { Typography, Checkbox, Button } from 'shared/ui';
-import { useControlModal } from 'shared/hooks';
+import { useCancelTaskMutation, useRejectTaskMutation } from 'services';
 import { userRole as userRoles } from 'shared/types/common.types';
-import { PopupChat, infoAdmin } from 'entities';
-import { useCancelTaskMutation } from 'services';
-
 import { ModalContentProps } from 'widgets/task-buttons-content';
 import {
   reasonType as reasonTypes,
@@ -15,10 +12,17 @@ import {
 
 import styles from './styles.module.css';
 
-const CloseModalContent = ({ userRole, taskId }: ModalContentProps) => {
-  const { isOpen, handleOpen, handleClose } = useControlModal();
-  const [reason, setReason] = useState<ReasonType | null>(null);
+const CloseModalContent = ({
+  userRole,
+  taskId,
+  openChat,
+}: ModalContentProps) => {
   const [cancelTask] = useCancelTaskMutation();
+  const [rejectTask] = useRejectTaskMutation();
+  const [reason, setReason] = useState<ReasonType | null>(null);
+  const isReasonUnselected = () => {
+    return !reason;
+  };
 
   const handleSetReason = (reasonType: ReasonType) => {
     if (reason === reasonType) {
@@ -29,8 +33,12 @@ const CloseModalContent = ({ userRole, taskId }: ModalContentProps) => {
   };
 
   const handleCancelClick = () => {
-    if (userRole === userRoles.RECIPIENT && taskId) {
+    if (!taskId) return;
+
+    if (userRole === userRoles.RECIPIENT) {
       cancelTask({ id: taskId });
+    } else if (userRole === userRoles.VOLUNTEER) {
+      rejectTask({ role: userRole.toLocaleLowerCase(), id: taskId });
     }
   };
 
@@ -67,21 +75,12 @@ const CloseModalContent = ({ userRole, taskId }: ModalContentProps) => {
           buttonType="secondary"
           extClassName={styles.fitWidth}
           label="Помощь администратора"
-          onClick={() => handleOpen()}
+          onClick={openChat}
         />
-        {isOpen && (
-          <PopupChat
-            isOpen={isOpen}
-            onClick={handleClose}
-            messages={[]}
-            chatmateInfo={infoAdmin}
-            onAttachFileClick={() => {}}
-          />
-        )}
         <Button
           buttonType="primary"
           label="Отменить заявку"
-          disabled={!reason}
+          disabled={isReasonUnselected()}
           onClick={handleCancelClick}
         />
       </div>

src/widgets/task-buttons-content/components/conflict-modal-content/index.tsx

@@ -5,8 +5,6 @@ import { userRole as userRoles } from 'shared/types/common.types';
 import { Button, Typography } from 'shared/ui';
 import { useRejectTaskMutation } from 'services';
 import { taskReport } from 'entities/task/types';
-import { useControlModal } from 'shared/hooks';
-import { PopupChat, infoAdmin } from 'entities';
 
 import styles from './styles.module.css';
 
@@ -19,8 +17,8 @@ export const ConflictModalContent = ({
   volunteerReport,
   recipientReport,
   setConflictModalVisible,
+  openChat,
 }: ModalContentProps) => {
-  const { isOpen, handleOpen, handleClose } = useControlModal();
   const [rejectTask] = useRejectTaskMutation();
   const handleRejectClick = () => {
     if (userRole && taskId) {
@@ -91,17 +89,8 @@ export const ConflictModalContent = ({
                 label={
                   active ? 'Помощь администратора' : 'Написать администратору'
                 }
-                onClick={() => handleOpen()}
+                onClick={openChat}
               />
-              {isOpen && (
-                <PopupChat
-                  isOpen={isOpen}
-                  onClick={handleClose}
-                  messages={[]}
-                  chatmateInfo={infoAdmin}
-                  onAttachFileClick={() => {}}
-                />
-              )}
             </div>
           )}
         </>

src/widgets/task-buttons-content/components/responded-modal-content/index.tsx

@@ -1,11 +1,9 @@
-import { infoAdmin, PopupChat } from 'entities';
-import { useControlModal } from 'shared/hooks';
 import { Button, Typography } from 'shared/ui';
 
 import styles from './styles.module.css';
+import { ModalContentProps } from 'widgets/task-buttons-content';
 
-export const RespondedModalContent = () => {
-  const { isOpen, handleOpen, handleClose } = useControlModal();
+export const RespondedModalContent = ({ openChat }: ModalContentProps) => {
   return (
     <div className={styles.modalTooltip}>
       <Typography
@@ -25,17 +23,8 @@ export const RespondedModalContent = () => {
         <Button
           buttonType="primary"
           label="Написать администратору"
-          onClick={handleOpen}
+          onClick={openChat}
         />
-        {isOpen && (
-          <PopupChat
-            isOpen={isOpen}
-            onClick={handleClose}
-            messages={[]}
-            chatmateInfo={infoAdmin}
-            onAttachFileClick={() => {}}
-          />
-        )}
       </div>
     </div>
   );