feat(cpex): implement separate flags for CPEx (#3669)

* Fix formatting issues

* Enable CPEx flag

---------

Co-authored-by: Kok Rui Wong <[email protected]>

Author: woojiahao

website/src/featureFlags.ts

@@ -9,3 +9,5 @@ export const enableShortUrl = false;
 
 /** Enable Course Planning Exercise */
 export const enableCPEx = true;
+
+export const showCPExTab = true;

website/src/views/layout/Navtabs.test.tsx

@@ -3,7 +3,7 @@ import produce from 'immer';
 import React from 'react';
 import { Provider } from 'react-redux';
 import { MemoryRouter } from 'react-router-dom';
-import { enableCPEx } from 'featureFlags';
+import { showCPExTab } from 'featureFlags';
 import configureStore from 'bootstrapping/configure-store';
 import reducers from 'reducers';
 import { initAction } from 'test-utils/redux';
@@ -37,7 +37,7 @@ function make(storeOverrides: Partial<typeof relevantStoreContents> = {}) {
 describe(Navtabs, () => {
   test('should render into nav element', () => {
     make();
-    if (enableCPEx) {
+    if (showCPExTab) {
       expect(screen.getAllByRole('link').map((elem) => elem.textContent)).toMatchInlineSnapshot(`
         [
           "Today",
@@ -67,7 +67,7 @@ describe(Navtabs, () => {
 
   test('should show beta tabs if beta is true', () => {
     make({ settings: { beta: true } });
-    if (enableCPEx) {
+    if (showCPExTab) {
       expect(screen.getAllByRole('link').map((elem) => elem.textContent)).toMatchInlineSnapshot(`
         [
           "Today",

website/src/views/layout/Navtabs.tsx

@@ -14,7 +14,7 @@ import {
   Trello,
 } from 'react-feather';
 
-import { enableCPEx } from 'featureFlags';
+import { showCPExTab } from 'featureFlags';
 import ExternalLink from 'views/components/ExternalLink';
 import { timetablePage } from 'views/routes/paths';
 import { preload as preloadToday } from 'views/today/TodayContainer';
@@ -52,7 +52,7 @@ const Navtabs: FC = () => {
         <BookOpen />
         <span className={styles.title}>Courses</span>
       </NavLink>
-      {enableCPEx && (
+      {showCPExTab && (
         <NavLink {...tabProps} to="/cpex">
           <Target />
           <span className={styles.title}>CPEx</span>

website/src/views/mpe/MpeContainer.tsx

@@ -5,6 +5,7 @@ import { enableCPEx } from 'featureFlags';
 import Modal from 'views/components/Modal';
 import type { MpeSubmission } from 'types/mpe';
 import ExternalLink from 'views/components/ExternalLink';
+import config from 'config';
 import {
   getLoginState,
   getSSOLink,
@@ -22,6 +23,15 @@ const MpeContainer: React.FC = () => {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [isLoggedIn, setIsLoggedIn] = useState(getLoginState(useLocation(), useHistory()));
 
+  const ugCPEx = config.modRegSchedule.Undergraduate.find(
+    ({ type: t }) => t === 'Course Planning Exercise (CPEx)',
+  );
+  const gdCPEx = config.modRegSchedule.Graduate.find(
+    ({ type: t }) => t === 'Course Planning Exercise (CPEx)',
+  );
+  const hasCPEx = ugCPEx && gdCPEx;
+  const sameTime = hasCPEx && ugCPEx.startDate.getTime() === gdCPEx.startDate.getTime();
+
   const onLogin = useCallback(() => {
     setIsGettingSSOLink(true);
     return getSSOLink()
@@ -119,7 +129,21 @@ const MpeContainer: React.FC = () => {
       ) : (
         <>
           <hr />
-          <div>CPEx is not open.</div>
+          {hasCPEx &&
+            (sameTime ? (
+              <p>
+                <strong>CPEx will open on:</strong> {ugCPEx.start}
+              </p>
+            ) : (
+              <div>
+                <p>
+                  <strong>Undergraduate CPEx will open on:</strong> {ugCPEx.start}
+                </p>
+                <p>
+                  <strong>Graduate CPEx will open on:</strong> {gdCPEx.start}
+                </p>
+              </div>
+            ))}
         </>
       )}
     </div>