Sphurthy - implemented 🔥 fix for timeoff status

src/components/TeamMemberTasks/ReviewButton.jsx

@@ -1,4 +1,5 @@
 import { useMemo, useState } from 'react';
+import PropTypes from 'prop-types';
 import {
   Button,
   Modal,
@@ -25,7 +26,7 @@ import httpService from '../../services/httpService';
 import { ApiEndpoint } from '~/utils/URL';
 import hasPermission from '~/utils/permissions';
 
-function ReviewButton({ user, task, updateTask }) {
+function ReviewButton({ user, task, updateTask, onTimeOff }) {
   const dispatch = useDispatch();
   const darkMode = useSelector(state => state.theme.darkMode);
   const myUserId = useSelector(state => state.auth.user.userid);
@@ -456,7 +457,12 @@ function ReviewButton({ user, task, updateTask }) {
           onClick={toggleModal}
           type="button"
           style={darkMode ? boxStyleDark : boxStyle}
-          disabled={isSubmitting}
+          disabled={isSubmitting || Boolean(onTimeOff)}
+          title={
+            onTimeOff
+              ? "You can't submit a task for review while you're on time off this week."
+              : undefined
+          }
         >
           Submit for Review
         </button>
@@ -581,20 +587,21 @@ function ReviewButton({ user, task, updateTask }) {
     return null;
   };
 
+  const conditionalBoxStyle = darkMode ? boxStyleDark : boxStyle;
+  const modalClassName = darkMode ? 'text-light dark-mode' : '';
+  const headerClassName = darkMode ? 'bg-space-cadet' : '';
+  const panelClassName = darkMode ? 'bg-yinmn-blue' : '';
+
   return (
     <>
       {/* Verification Modal */}
-      <Modal
-        isOpen={verifyModal}
-        toggle={toggleVerify}
-        className={darkMode ? 'text-light dark-mode' : ''}
-      >
-        <ModalHeader toggle={toggleVerify} className={darkMode ? 'bg-space-cadet' : ''}>
+      <Modal isOpen={verifyModal} toggle={toggleVerify} className={modalClassName}>
+        <ModalHeader toggle={toggleVerify} className={headerClassName}>
           {selectedAction === 'Complete and Remove' &&
             'Are you sure you have completed the review?'}
           {selectedAction === 'More Work Needed' && 'Are you sure?'}
         </ModalHeader>
-        <ModalFooter className={darkMode ? 'bg-yinmn-blue' : ''}>
+        <ModalFooter className={panelClassName}>
           <Button
             onClick={e => {
               toggleVerify();
@@ -609,11 +616,11 @@ function ReviewButton({ user, task, updateTask }) {
             }}
             color="primary"
             className="float-left"
-            style={darkMode ? boxStyleDark : boxStyle}
+            style={conditionalBoxStyle}
           >
             {reviewStatus === 'Unsubmitted' ? `Submit` : `Complete`}
           </Button>
-          <Button onClick={toggleVerify} style={darkMode ? boxStyleDark : boxStyle}>
+          <Button onClick={toggleVerify} style={conditionalBoxStyle}>
             Cancel
           </Button>
         </ModalFooter>
@@ -622,50 +629,46 @@ function ReviewButton({ user, task, updateTask }) {
       <Modal
         isOpen={confirmSubmitModal}
         toggle={toggleConfirmSubmitModal}
-        className={darkMode ? 'text-light dark-mode' : ''}
+        className={modalClassName}
       >
-        <ModalHeader toggle={toggleConfirmSubmitModal} className={darkMode ? 'bg-space-cadet' : ''}>
+        <ModalHeader toggle={toggleConfirmSubmitModal} className={headerClassName}>
           Confirm Submission
         </ModalHeader>
-        <ModalBody className={darkMode ? 'bg-yinmn-blue' : ''}>
+        <ModalBody className={panelClassName}>
           You are about to submit the following link for review:
           <div className="mt-2" style={{ wordWrap: 'break-word', wordBreak: 'break-all' }}>
             <span>{sanitizeText(link)}</span>
           </div>
           Please confirm if this is the correct link.
         </ModalBody>
-        <ModalFooter className={darkMode ? 'bg-yinmn-blue' : ''}>
-          <Button
-            color="primary"
-            onClick={handleFinalSubmit}
-            style={darkMode ? boxStyleDark : boxStyle}
-          >
+        <ModalFooter className={panelClassName}>
+          <Button color="primary" onClick={handleFinalSubmit} style={conditionalBoxStyle}>
             Confirm and Submit
           </Button>
-          <Button onClick={toggleConfirmSubmitModal} style={darkMode ? boxStyleDark : boxStyle}>
+          <Button onClick={toggleConfirmSubmitModal} style={conditionalBoxStyle}>
             Cancel
           </Button>
         </ModalFooter>
       </Modal>
 
       {/* Submission Modal */}
-      <Modal isOpen={modal} toggle={toggleModal} className={darkMode ? 'text-light dark-mode' : ''}>
-        <ModalHeader toggle={toggleModal} className={darkMode ? 'bg-space-cadet' : ''}>
+      <Modal isOpen={modal} toggle={toggleModal} className={modalClassName}>
+        <ModalHeader toggle={toggleModal} className={headerClassName}>
           Change Review Status
         </ModalHeader>
-        <ModalBody className={darkMode ? 'bg-yinmn-blue' : ''}>
+        <ModalBody className={panelClassName}>
           {reviewStatus === 'Unsubmitted'
             ? `Are you sure you want to submit for review?`
             : `Are you sure you have completed the review?`}
         </ModalBody>
-        <ModalBody className={darkMode ? 'bg-yinmn-blue' : ''}>
+        <ModalBody className={panelClassName}>
           Please add link to related work:
           <Input type="text" required value={link} onChange={handleLink} />
           {editLinkState.error && (
             <div className="text-danger">{sanitizeText(editLinkState.error)}</div>
           )}
         </ModalBody>
-        <ModalFooter className={darkMode ? 'bg-yinmn-blue' : ''}>
+        <ModalFooter className={panelClassName}>
           <Button
             onClick={e => {
               e.preventDefault();
@@ -692,46 +695,42 @@ function ReviewButton({ user, task, updateTask }) {
             }}
             color="primary"
             className="float-left"
-            style={darkMode ? boxStyleDark : boxStyle}
+            style={conditionalBoxStyle}
           >
             {reviewStatus === 'Unsubmitted' ? `Submit` : `Complete`}
           </Button>
-          <Button onClick={modalCancelButtonHandler} style={darkMode ? boxStyleDark : boxStyle}>
+          <Button onClick={modalCancelButtonHandler} style={conditionalBoxStyle}>
             Cancel
           </Button>
         </ModalFooter>
       </Modal>
 
       {/* Edit Link Modal */}
-      <Modal
-        isOpen={editLinkState.isOpen}
-        toggle={toggleEditLinkModal}
-        className={darkMode ? 'text-light dark-mode' : ''}
-      >
-        <ModalHeader toggle={toggleEditLinkModal} className={darkMode ? 'bg-space-cadet' : ''}>
+      <Modal isOpen={editLinkState.isOpen} toggle={toggleEditLinkModal} className={modalClassName}>
+        <ModalHeader toggle={toggleEditLinkModal} className={headerClassName}>
           Edit Submitted Link
         </ModalHeader>
-        <ModalBody className={darkMode ? 'bg-yinmn-blue' : ''}>
+        <ModalBody className={panelClassName}>
           <p>Update the link to your submitted work:</p>
           <Input type="text" required value={editLinkState.link} onChange={handleEditLinkChange} />
           {editLinkState.error && (
             <div className="text-danger">{sanitizeText(editLinkState.error)}</div>
           )}
         </ModalBody>
-        <ModalFooter className={darkMode ? 'bg-yinmn-blue' : ''}>
+        <ModalFooter className={panelClassName}>
           <Button
             onClick={handleEditLink}
             color="primary"
             className="float-left"
-            style={darkMode ? boxStyleDark : boxStyle}
+            style={conditionalBoxStyle}
             disabled={editLinkState.isEditing}
           >
             {renderUpdateButtonContent()}
           </Button>
 
           <Button
             onClick={toggleEditLinkModal}
-            style={darkMode ? boxStyleDark : boxStyle}
+            style={conditionalBoxStyle}
             disabled={editLinkState.isEditing}
           >
             Cancel
@@ -743,15 +742,12 @@ function ReviewButton({ user, task, updateTask }) {
       <Modal
         isOpen={invalidDomainModal.isOpen}
         toggle={() => toggleInvalidDomainModal()}
-        className={darkMode ? 'text-light dark-mode' : ''}
+        className={modalClassName}
       >
-        <ModalHeader
-          toggle={() => toggleInvalidDomainModal()}
-          className={darkMode ? 'bg-space-cadet' : ''}
-        >
+        <ModalHeader toggle={() => toggleInvalidDomainModal()} className={headerClassName}>
           Invalid Domain Type
         </ModalHeader>
-        <ModalBody className={darkMode ? 'bg-yinmn-blue' : ''}>
+        <ModalBody className={panelClassName}>
           <div className="text-center mb-3">
             <span role="img" aria-label="warning" style={{ fontSize: '2rem' }}>
               ⚠️
@@ -777,11 +773,11 @@ function ReviewButton({ user, task, updateTask }) {
             </ul>
           </div>
         </ModalBody>
-        <ModalFooter className={darkMode ? 'bg-yinmn-blue' : ''}>
+        <ModalFooter className={panelClassName}>
           <Button
             color="primary"
             onClick={() => toggleInvalidDomainModal()}
-            style={darkMode ? boxStyleDark : boxStyle}
+            style={conditionalBoxStyle}
           >
             Got it!
           </Button>
@@ -792,4 +788,14 @@ function ReviewButton({ user, task, updateTask }) {
     </>
   );
 }
+ReviewButton.propTypes = {
+  user: PropTypes.shape({
+    personId: PropTypes.string,
+    name: PropTypes.string,
+  }).isRequired,
+  task: PropTypes.object.isRequired,
+  updateTask: PropTypes.func.isRequired,
+  onTimeOff: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
+};
+
 export default ReviewButton;

src/components/TeamMemberTasks/TeamMemberTask.jsx

@@ -649,17 +649,13 @@ const TeamMemberTask = React.memo(
                                         </div>
 
                                         {/* Review Button */}
-                                        <div
-                                          className={styles['team-member-task-review-button']}
-                                          style={
-                                            onTimeOff ? { opacity: 0.4, pointerEvents: 'none' } : {}
-                                          }
-                                        >
+                                        <div className={styles['team-member-task-review-button']}>
                                           <ReviewButton
                                             user={user}
                                             userId={userId}
                                             task={task}
                                             updateTask={updateTaskStatus}
+                                            onTimeOff={onTimeOff}
                                           />
                                         </div>
                                       </div>