Change HelpBox to be Dismissible; Change months when it's displayed

[KevinWu098]

For Good First Taskers

For any future good first doers, if it's decided that a dismissible helpbox is the best way forward, a similar implementation in our codebase would be RecruitmentBanner, found in CourseRenderPane.tsx!

Some of the relevant code is here:

const RecruitmentBanner = () => {
    const [bannerVisibility, setBannerVisibility] = useState(true);

    // Display recruitment banner if more than 11 weeks (in ms) has passed since last dismissal
    const recruitmentDismissalTime = window.localStorage.getItem('recruitmentDismissalTime');
    const dismissedRecently =
        recruitmentDismissalTime !== null &&
        Date.now() - parseInt(recruitmentDismissalTime) < 11 * 7 * 24 * 3600 * 1000;
    const isSearchCS = ['COMPSCI', 'IN4MATX', 'I&C SCI', 'STATS'].includes(RightPaneStore.getFormData().deptValue);
    const displayRecruitmentBanner = bannerVisibility && !dismissedRecently && isSearchCS;

Intended Fix

1. Make it dismissible (a la Patch Notes, Recruitment Banner)
2. Display in more months (TBD)

Description

Currently, the HelpBox is displayed in months September and October, which seem odd since course planning doesn't really occur during these months.

    const currentMonthIndex = new Date().getMonth(); // 0=Jan
    const activeMonthIndices = [false, false, false, false, false, false, false, false, true, true, false, false];

    {...}

            {activeMonthIndices[currentMonthIndex] && <HelpBox />}
            <PrivacyPolicyBanner />
        </div>
    );

Brian guessed that it may have been based on recruitment months (?). Regardless the HelpBox is for course scheduling, so it should line up better with which months students plan.

---

Main Quarters

Based on the quarterly schedule, it would make sense to me for HelpBox to be shown in:

1. May for Fall courses
2. November for Winter ourses
3. February for Spring courses

---

Summer Session

I am unsure of when Summer Session enrolls... but it most likely would... overlap with May anyways (?). More input needed here!

---

Freshman // SPOP

Also, regarding freshies, SPOP planning runs from possibly June all the way into August. If we want to display the HelpBox for all of summer, that would also resolve the Summer Session issue but perhaps run the risk of being a little too prominent.

One solution could be to implement a dismiss/close out functionality a lá the ICS major popup and have it close out for some period of time!

Tagging @EricPedley for comment!

[MinhxNguyen7]

I think it should be May, June, August, December, November, December, February, and March. Those are, safely, every month in which you could enroll in normal quarter courses. Add summer enrollment in, and we'll be covering almost every month of the year. Alternatively, we could just keep it up. It doesn't hurt, right?

[KevinWu098]

I think it should be May, June, August, December, November, December, February, and March. Those are, safely, every month in which you could enroll in normal quarter courses. Add summer enrollment in, and we'll be covering almost every month of the year. Alternatively, we could just keep it up. It doesn't hurt, right?

Do you think something along the lines of, show them in these months, but it's dismissible? If dismissed, it'll return on the 1st of the next "active" month as long as that's 30+ days from dismissal.

That might be a bit over-engineered though... My main reservation with it always being displayed is that it's a little too "loud"/visible on the screen for my tastes

[KevinWu098]

For any future good first doers, if it's decided that a dismissible helpbox is the best way forward, a similar implementation in our codebase would be RecruitmentBanner, found in CourseRenderPane.tsx!

Some of the relevant code is here:

const RecruitmentBanner = () => {
    const [bannerVisibility, setBannerVisibility] = useState(true);

    // Display recruitment banner if more than 11 weeks (in ms) has passed since last dismissal
    const recruitmentDismissalTime = window.localStorage.getItem('recruitmentDismissalTime');
    const dismissedRecently =
        recruitmentDismissalTime !== null &&
        Date.now() - parseInt(recruitmentDismissalTime) < 11 * 7 * 24 * 3600 * 1000;
    const isSearchCS = ['COMPSCI', 'IN4MATX', 'I&C SCI', 'STATS'].includes(RightPaneStore.getFormData().deptValue);
    const displayRecruitmentBanner = bannerVisibility && !dismissedRecently && isSearchCS;