website: Enhance report course error button visibility during coursereg/course update periods (#3963)

* enhance error button visibility during coursereg and new course info periods

* export fn to check for new data announcements, add link to FAQ

---------

Co-authored-by: Jonathan Loh <[email protected]>

Author: junnjiee

website/src/views/components/notfications/Announcements.tsx

@@ -33,6 +33,13 @@ const enableAnnouncements = true;
  */
 const key = announcementKey('ay202425-new-data');
 
+export const isNewCourseDataAnnoucement = () => {
+  if (key) {
+    return enableAnnouncements && key.includes('new-data');
+  }
+  return false;
+};
+
 const Announcements = memo(() => {
   const [isOpen, setIsOpen] = useState(() => {
     if (!enableAnnouncements) return false;

website/src/views/modules/ModulePageContent.tsx

@@ -258,9 +258,9 @@ const ModulePageContent: React.FC<Props> = ({ module, archiveYear }) => {
                   </>
                 )}
 
-                <p>
+                <div>
                   <ReportError module={module} />
-                </p>
+                </div>
               </div>
             </section>
           </div>

website/src/views/modules/ReportError.scss

@@ -6,6 +6,17 @@
   }
 }
 
+.enhanceButton {
+  justify-content: center;
+  padding: 0.5em 0;
+}
+
+.infoText {
+  padding-top: 0.5em;
+  font-style: italic;
+  font-size: 0.9em;
+}
+
 .heading {
   font-weight: bold;
   font-size: 1.4rem;

website/src/views/modules/ReportError.tsx

@@ -5,6 +5,8 @@ import { produce } from 'immer';
 import axios from 'axios';
 import { AlertTriangle } from 'react-feather';
 import * as Sentry from '@sentry/browser';
+import { addWeeks, isWithinInterval } from 'date-fns';
+import modregData from 'data/modreg-schedule.json';
 
 import type {
   DepartmentMatch,
@@ -18,6 +20,7 @@ import type { Module } from 'types/modules';
 import Modal from 'views/components/Modal';
 import CloseButton from 'views/components/CloseButton';
 import ExternalLink from 'views/components/ExternalLink';
+import { isNewCourseDataAnnoucement } from 'views/components/notfications/Announcements';
 import facultyEmails from 'data/facultyEmail';
 import appConfig from 'config';
 import useGlobalDebugValue from '../hooks/useGlobalDebugValue';
@@ -104,6 +107,17 @@ function matchModule(module: Module) {
   );
 }
 
+const roundOneStartDate = new Date(
+  modregData.Undergraduate.filter(
+    (data) => data.type === 'Select Courses' && data.name === '1',
+  )[0].start,
+);
+const enhanceReportVisibility =
+  isWithinInterval(new Date(), {
+    start: addWeeks(roundOneStartDate, -2),
+    end: addWeeks(roundOneStartDate, 2),
+  }) || isNewCourseDataAnnoucement();
+
 /**
  * Module error reporting component. Posts to a serverless script that then emails the relevant
  * faculty / department with the issue.
@@ -165,12 +179,21 @@ const ReportError = memo<Props>(({ module }) => {
     <>
       <button
         type="button"
-        className={classnames('btn btn-link', styles.button)}
+        className={classnames(
+          'btn',
+          styles.button,
+          enhanceReportVisibility ? ['btn-primary btn-block', styles.enhanceButton] : 'btn-link',
+        )}
         onClick={() => setIsOpen(!isOpen)}
       >
         <AlertTriangle className={styles.icon} />
         Report errors
       </button>
+      {enhanceReportVisibility && (
+        <p className={styles.infoText}>
+          For clarifications on how we handle issues, read our <a href="/faq">FAQ</a>.
+        </p>
+      )}
 
       <Modal
         isOpen={isOpen}

website/src/views/static/FaqContainer.tsx

@@ -78,10 +78,10 @@ const FaqContainer: React.FC = () => (
         <li>You have refreshed NUSMods after step 2.</li>
       </ol>
       <p>
-        After you have done all the above and the error persists, please use the "Report Error"
-        button on the course page to report an issue to the course's department or faculty. If the
-        department or faculty for this course cannot be found on this list, please refer to
-        CourseReg's contact list for{' '}
+        After you have done all the above and the error persists, please use the{' '}
+        <b>"Report Error"</b> button on the course page to report an issue to the course's
+        department or faculty. If the department or faculty for this course cannot be found on this
+        list, please refer to CourseReg's contact list for{' '}
         <ExternalLink href="https://www.nus.edu.sg/coursereg/docs/UGFac_Contacts.pdf">
           undergraduate
         </ExternalLink>{' '}