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

[sucheta90]

Description

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

• Related PRs#1542+ #614, 1081

• Profile Page>Below Blue Squares

• Replace with something that is a different color (not red) that says Can’t Schedule Time Off (click to learn why)

• This is needed because people with 5 or more blue squares should no longer be on the team and, if they still are, will
  need an Admin to enter their time off for them

• It should account for any future scheduled time off too (see above)

• When they click the new button, it should say this if 5 or more blue squares:
  *You have X blue squares already and 5 are the maximum allowed per year. Please contact your Administrator if you need to request time off.

Note: Blue squares drop off 1 calendar year after they are issued. *

-When they click the new button, it should say this if they have scheduled time off equaling 5 or more blue squares:

*Including your time already requested off, you have used the equivalent of X blue squares. 5 is the maximum allowed per year. 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:

• Time off request 1
• Time off request 2
  Etc.

Note: Blue squares drop off 1 calendar year after they are issued. *

Related PRS (if any):

This frontend PR is an updated version of the #1715 frontend PR.
Backend PR none.
…

Main changes explained:

• Created component: components > UserProfile > ScheduleExplanationModal
• Add new handler functions to BlueSquareLayout.jsx, which opens a modal based on user roles and the number of BlueSquares assigned or scheduled.
• The button Schedule Blue Square Reason changes to Can't Schedule Time Off, if ((infringementsNum >= 5|| numberOfReasons >= 5 || (infringementsNum + numberOfReasons >= 5 )) && !(userProfile.role === "Administrator" || userProfile.role === "Owner"))
• The ability to add and schedule blueSquares dependent on roles and number of infringements and/ or scheduled reasons.
  …

How to test:

1. check into current branch
2. do npm install and ... to run this PR locally
3. Clear site data/cache
4. Log as (volunteer/ manager/ assistant manager) user
5. Go to dashboard→ View Profile → BlueSquare section →…
6. If the numbers of BlueSquare are less than 5 the Users with permission to Schedule blueSquares, should see the Schedule Blue Square button. Otherwise, the button changes to Can't Schedule Time Off Click to learn why.
7. Click on the button to see a modal with an explanation of why scheduling has been disabled.

Screenshots or videos of changes:

Before change:
https://github.com/OneCommunityGlobal/HighestGoodNetworkApp/assets/101291283/ee124e32-79db-4fb4-88bc-60cd8eab30d6

Please refer to this demo:
https://github.com/OneCommunityGlobal/HighestGoodNetworkApp/assets/101291283/83eb0f7d-20ad-4ec6-8732-42fa08816ea9

Note:

This PR is an updated version of PR1715

[pshereen]

Tested the PR and the updated feature is working as per the requirement.

1. I logged in as owner and gave a volunteer permission to change blue square.

2. The volunteer was able to add blue squares.

3. Also "Can't Schedule Time Off Click to learn why" was shown once there were 5 blue squares for that volunteer.

However, Manage User Permission modal in owner's account was not aligned properly. Not sure if it is part of this PR.

And after closing the manage User Permission modal and clicked dashboard it is going to a blank page. Not sure if it is part of this PR. Please refer the video.

PR.1874.mp4

Also, for volunteer user account, clicking dashboard from profile page goes to a blank page. Not sure if it is part of this PR.

Dashboard-blank.mp4

[sucheta90]

Hi @pshereen, I appreciate your review on this PR. However, I must assert that user permission and the Dashboard are completely out of the scope of this PR.

[one-community]

Tested the PR and the updated feature is working as per the requirement.

1. I logged in as owner and gave a volunteer permission to change blue square.
2. The volunteer was able to add blue squares.

3. Also "Can't Schedule Time Off Click to learn why" was shown once there were 5 blue squares for that volunteer. However, Manage User Permission modal in owner's account was not aligned properly. Not sure if it is part of this PR.

And after closing the manage User Permission modal and clicked dashboard it is going to a blank page. Not sure if it is part of this PR. Please refer the video.

PR.1874.mp4
Also, for volunteer user account, clicking dashboard from profile page goes to a blank page. Not sure if it is part of this PR.

Dashboard-blank.mp4

Thank you for checking beyond just the PR basics. Please pull the latest code though and hard refresh, I'm not seeing this on the Dev/can't reproduce this. If you still see this, post in #coding-problems channel and see if anyone else can verify it.

[SaiDeepak-NEU]

Tested the given scenario and it looks to be working fine. So what I figured is that the sum of blue squares and the schedule time off should be equal to 5 in order for the button to turn yellow and restrict adding any more blue squares and schedule time offs.


Attaching 2 screenshots of scenarios I tested with all 5 schedule time offs and a combination of blue squares and schedule time offs.

[one-community]

Thank you all, merging!