Sucheta Replace the blue square self-scheduler for anyone with 5 or more blue squares (anyone other than Owner/Admin)

.vscode/settings.json

@@ -12,12 +12,12 @@
   "eslint.alwaysShowStatus": true,
   "editor.tabSize": 2,
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   },
   "files.exclude": {
     "**/.classpath": true,
     "**/.project": true,
     "**/.settings": true,
     "**/.factorypath": true
   }
-}
+}

src/components/UserProfile/BlueSquareLayout.jsx

@@ -5,14 +5,18 @@ import './UserProfile.scss';
 import './UserProfileEdit/UserProfileEdit.scss';
 import { Button } from 'react-bootstrap';
 import ScheduleReasonModal from './ScheduleReasonModal/ScheduleReasonModal';
-import { useState } from 'react';
+import StopSelfSchedulerModal from './StopSelfSchedulerModal/StopSelfSchedulerModal.jsx';
+import SchedulerExplanationModal from './SchedulerExplanationModal/SchedulerExplanationModal';
+import { useState, useEffect } from 'react';
 import { useReducer } from 'react';
 import Spinner from 'react-bootstrap/Spinner';
 import { addReason, patchReason } from 'actions/reasonsActions';
 import moment from 'moment-timezone';
 import { Modal } from 'react-bootstrap';
 import { boxStyle } from 'styles';
 
+
+
 const BlueSquareLayout = props => {
   const fetchingReducer = (state, action) => {
     switch (action.type) {
@@ -49,8 +53,13 @@ const BlueSquareLayout = props => {
   };
 
   const { userProfile, handleUserProfile, handleBlueSquare, canEdit } = props;
+
   const { privacySettings } = userProfile;
+  const [infringementsNum, setInfringementsNum] = useState(userProfile.infringements.length)
+  const [isInfringementMoreThanFive, setIsInfringementMoreThanFive] = useState(false);
   const [show, setShow] = useState(false);
+  const [showInfoModal, setShowInfoModal]= useState(false);
+  const [showExplanation, setShowExplanation]= useState(false);
   const [reason, setReason] = useState('');
   const [date, setDate] = useState(
     moment
@@ -68,7 +77,7 @@ const BlueSquareLayout = props => {
     errorCode: null,
     isSet: false,
   });
-
+  
   const handleOpen = useCallback(() => {
     setShow(true);
   }, []);
@@ -77,6 +86,42 @@ const BlueSquareLayout = props => {
     setShow(false);
   }, []);
 
+  // This handler is used for Info Modal, that open when button "Can't Schedule Time Off" is clicked 
+  const openInfoModal = useCallback(() => { 
+    setShowInfoModal(true);
+  }, []);
+// This handler is used to close Info Modal, 
+  const closeInfoModal = useCallback(() => {
+    setShowInfoModal(false);
+  }, []);
+  // This handler is used for Explanation Modal, that open when <a>Click to learn why </a> is clicked 
+  const openExplanationModal = useCallback(() => { 
+    setShowExplanation(true);
+  }, []);
+// This handler is used to close Info Modal, 
+  const closeExplanationModal  = useCallback(() => {
+    setShowExplanation(false);
+  }, []);
+
+
+//  This useEffect will check for any changes in the number of infringements
+  useEffect(()=>{
+    const checkInfringementCount = ()=>{
+      if(userProfile.role === "Administrator" || userProfile.role === "Owner"){
+        setIsInfringementMoreThanFive(false);
+        return
+      }else{
+        if(userProfile.infringements.length >= 5){
+          setIsInfringementMoreThanFive(true)
+        }
+        else{
+          setIsInfringementMoreThanFive(false)
+        }
+      }
+
+    }
+    checkInfringementCount();
+  },[]);
 
   const handleSubmit = async event => {
     event.preventDefault();
@@ -123,9 +168,34 @@ const BlueSquareLayout = props => {
           ) : null}
         </div>
 
-        <BlueSquare blueSquares={userProfile?.infringements} handleBlueSquare={handleBlueSquare} />
+        <BlueSquare blueSquares={userProfile?.infringements} handleBlueSquare={handleBlueSquare} isInfringementMoreThanFive={isInfringementMoreThanFive} userRole={userProfile.role}/>
+         {/* Replaces Schedule Blue Square button when there are more than 5 blue squares -  by Sucheta */}
         <div className="mt-4 w-100">
+          {isInfringementMoreThanFive ? 
+          <>
           <Button
+          //  variant='warning'
+           onClick={openInfoModal}
+           className="w-100 text-success-emphasis"
+            size="md"
+            style={boxStyle}
+            id='stopSchedulerButton'
+          >
+            {fetchState.isFetching ? (
+              <Spinner size="sm" animation="border" />
+            ) : (
+              <>
+              <span>Can't Schedule Time Off</span>
+              <br/>
+              <span style={{fontSize: ".8em", marginTop: "0"}}>
+                Click to learn why
+              </span>
+              </>
+              )}
+          </Button> 
+            {/* <p style={{cursor:"pointer"}} id='self-scheduler-off-info' onClick={openExplanationModal}>Click to learn why</p> */}
+          </>
+          : <Button
             variant="primary"
             onClick={handleOpen}
             className="w-100"
@@ -140,8 +210,27 @@ const BlueSquareLayout = props => {
             ) : (
               'Schedule Blue Square Reason'
             )}
-          </Button>
+          </Button> }
         </div>
+        {isInfringementMoreThanFive && showExplanation && (
+          <Modal show={showExplanation} onHide={closeExplanationModal}>
+            <SchedulerExplanationModal
+              onHide={closeExplanationModal}
+              handleClose = {closeExplanationModal}
+              infringementsNum = {infringementsNum}
+              infringements = {userProfile.infringements}
+            />
+          </Modal>
+        )}
+        {isInfringementMoreThanFive && showInfoModal && 
+        (<Modal show={showInfoModal} onHide={closeInfoModal}>
+          <StopSelfSchedulerModal
+            onHide={closeInfoModal}
+            handleClose = {closeInfoModal}
+            infringementsNum = {infringementsNum}
+            user = {userProfile}
+          />
+        </Modal>)}
         {show && (
           <Modal show={show} onHide={handleClose}>
             <ScheduleReasonModal

src/components/UserProfile/BlueSquares/BlueSquare.jsx

@@ -8,7 +8,7 @@ import { formatDateFromDescriptionString } from 'utils/formatDateFromDescription
 const BlueSquare = (props) => {
   const isInfringementAuthorizer = props.hasPermission('infringementAuthorizer');
   const canPutUserProfileImportantInfo = props.hasPermission('putUserProfileImportantInfo');
-  const { blueSquares, handleBlueSquare } = props;
+  const { blueSquares, handleBlueSquare, isInfringementMoreThanFive } = props;
 
   return (
     <div className="blueSquareContainer">
@@ -52,7 +52,7 @@ const BlueSquare = (props) => {
           : null}
       </div>
 
-      {isInfringementAuthorizer && (
+      {isInfringementAuthorizer && !isInfringementMoreThanFive &&(
         <div
           onClick={() => {
             handleBlueSquare(true, 'addBlueSquare', '');

src/components/UserProfile/SchedulerExplanationModal/SchedulerExplanationModal.jsx

@@ -0,0 +1,38 @@
+import Button from 'react-bootstrap/Button';
+import Modal from 'react-bootstrap/Modal';
+import { boxStyle } from 'styles';
+
+function SchedulerExplanationModal({infringementsNum,handleClose, infringements}) {
+
+  return (
+    <div
+      className="modal show"
+      style={{ display: 'block', position: 'initial' }}
+    >
+      <Modal.Dialog>
+        <Modal.Header closeButton>
+          <Modal.Title>Please Refer To The Explanation </Modal.Title>
+        </Modal.Header>
+
+        <Modal.Body scrollable>
+         <p> Including your time already requested off, you have used the equivalent of <span style={{color:"red",fontWeight:500}}>{infringementsNum}</span> blue squares. <span style={{fontWeight:500, color:"green"}}>5</span> is the maximum allowed per year.</p>
+          <p>
+          Please remove a time-off request below or contact your Administrator if you need to request time off in addition to what is listed here:</p>
+          <ol>{infringements.map((el,index)=>{
+            return <li key={el._id}>{el.description}</li>
+          })}</ol>
+
+
+          <p><em>Note</em>: Blue squares expire after 1 calendar year from their issuance date.</p> 
+
+        </Modal.Body>
+
+        <Modal.Footer>
+          <Button variant="secondary" onClick={handleClose} style={boxStyle}>Close</Button>
+        </Modal.Footer>
+      </Modal.Dialog>
+    </div>
+  );
+}
+
+export default SchedulerExplanationModal;

src/components/UserProfile/StopSelfSchedulerModal/StopSelfSchedulerModal.jsx

@@ -0,0 +1,29 @@
+import Button from 'react-bootstrap/Button';
+import Modal from 'react-bootstrap/Modal';
+import { boxStyle } from 'styles';
+
+function StopSelfSchedulerModal({infringementsNum,handleClose}) {
+  return (
+    <div
+      className="modal show"
+      style={{ display: 'block', position: 'initial' }}
+    >
+      <Modal.Dialog>
+        <Modal.Header closeButton>
+          <Modal.Title>Can Not Schedule Time Off</Modal.Title>
+        </Modal.Header>
+
+        <Modal.Body>
+          <p>You currently possess <span style={{color:"red",fontWeight:500}}>{infringementsNum}</span> blue squares, with an annual limit of <span style={{fontWeight:500, color:"green"}}>5</span>. If you require time off, kindly reach out to your Administrator. </p>
+          <p><em>Note</em>: Blue squares expire after 1 calendar year from their issuance date.</p>
+        </Modal.Body>
+
+        <Modal.Footer>
+          <Button variant="secondary" onClick={handleClose} style={boxStyle}>Close</Button>
+        </Modal.Footer>
+      </Modal.Dialog>
+    </div>
+  );
+}
+
+export default StopSelfSchedulerModal;

src/components/UserProfile/UserProfile.scss

@@ -260,7 +260,23 @@
     width: 250px;
   }
 }
+// Changed hover, focus and active class for the Stop Scheduler Button
+#stopSchedulerButton{
+  background-color:#ffc107;
+  border:#ffc107;
+
+  &:hover{
+    // background-color: #fff3cd;
+    // border: #fff3cd ;
+    background-color: #ffcd39;
+    border:  #ffcd39;
+  }
+  &:active, &:focus{
+    background-color: #997404;
+    border: #997404;
+  }
 
+}
 @media only screen and (max-width: 767px) {
   .emp-profile {
     margin-top: 0;