Created Modal with multiple pages to describe each feature

package.json

@@ -43,7 +43,8 @@
     "@nestjs/throttler": "^5.0.1",
     "cross-env": "^7.0.3",
     "fuse.js": "^7.0.0",
-    "nodemailer": "^6.9.1"
+    "nodemailer": "^6.9.1",
+    "universal-cookie": "^7.2.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.17.6",

packages/frontend/components/FullPageModal/FullPageModal.tsx

@@ -0,0 +1,95 @@
+import React, { useEffect, useState } from "react";
+import {
+  Button,
+  Center,
+  Flex,
+  Grid,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Text,
+  VStack,
+  useDisclosure,
+} from "@chakra-ui/react";
+
+interface WhatsNewPopUpProps {
+  // is model open or not?
+  isOpen: boolean;
+  // Closes the modal
+  onClose: () => void;
+}
+
+export const WhatsNewPopUp: React.FC<WhatsNewPopUpProps> = ({
+  isOpen,
+  onClose,
+}) => {
+  const [pageNum, setPageNum] = useState(1);
+  const nextPage = () => setPageNum((prev) => prev + 1);
+  const prevPage = () => setPageNum((prev) => prev - 1);
+  const renderPage = () => {
+    switch (pageNum) {
+      case 1:
+        return (
+          <>
+            <Text color="tomato" as="b">
+              NEW PAGE 1
+            </Text>
+            <Text>these are the new features</Text>
+          </>
+        );
+      case 2:
+        return (
+          <>
+            <Text color="tomato" as="b">
+              NEW PAGE 2
+            </Text>
+            <Text>these are the new features</Text>
+          </>
+        );
+      case 3:
+        return (
+          <>
+            <Text color="tomato" as="b">
+              NEW PAGE 3
+            </Text>
+            <Text>these are the new features</Text>
+          </>
+        );
+    }
+  };
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} size="4xl" isCentered>
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader
+          color="primary.blue.dark.main"
+          borderBottom="1px"
+          borderColor="neutral.200"
+        >
+          <Text>Latest Release v26.09.24</Text>
+        </ModalHeader>
+        <ModalBody>{renderPage()}</ModalBody>
+        <ModalFooter justifyContent="space-between">
+          {pageNum > 1 && (
+            <Button variant="outline" onClick={prevPage}>
+              Previous
+            </Button>
+          )}
+          {pageNum < 3 ? (
+            <Button colorScheme="blue" onClick={nextPage}>
+              Next
+            </Button>
+          ) : (
+            <Button colorScheme="red" onClick={onClose}>
+              Looks Good!
+            </Button>
+          )}
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+};

packages/frontend/pages/home.tsx

@@ -50,6 +50,8 @@ import {
   getPreReqWarnings,
 } from "../utils/plan/preAndCoReqCheck";
 import { IsGuestContext } from "./_app";
+import { WhatsNewPopUp } from "../components/FullPageModal/FullPageModal";
+import Cookies from "universal-cookie";
 
 // Algorithm to decide which droppable the course is currently over (if any).
 // See https://docs.dndkit.com/api-documentation/context-provider/collision-detection-algorithms for more info.
@@ -66,6 +68,43 @@ const courseDndCollisisonAlgorithm: CollisionDetection = (args) => {
 const HomePage: NextPage = () => {
   const { error, student, mutateStudent } = useStudentWithPlans();
   const router = useRouter();
+  // How we keep track if the modal is open or closed
+  const [isOpen, setIsOpen] = useState(false);
+  const cookies = new Cookies();
+  // useEffect(() => {
+  //   setIsOpen(true); // Show the modal when the component renders
+  // }, []);
+
+  // when the modal closes
+  // useEffect(() => {
+  //   const cookies = new Cookies();
+  //   const existingToken = cookies.get('FeedbackModal JWT');
+  //   if (existingToken) {
+  //     setIsOpen(false); // Don't show the modal
+  //   } else {
+  //     setIsOpen(true);
+  //     const newtoken = 'alreadyShowedModal';
+  //     cookies.set('FeedbackModal JWT', newtoken, { path: '/' });
+  //      // Show the modal
+  //   }
+  // }, []);
+
+  useEffect(() => {
+    const existingToken = cookies.get("FeedbackModal JWT");
+
+    if (!existingToken) {
+      setIsOpen(true); // Open modal only if token doesn't exist
+    }
+  }, []);
+
+  const handleClose = () => {
+    setIsOpen(false); // Close the modal when user dismisses it
+    const cookies = new Cookies();
+    const newToken = "alreadyShowedModal";
+    cookies.set("FeedbackModal JWT", newToken, { path: "/" }); // Set the token when user closes the modal
+  };
+
+  // const onClose = () => setIsOpen(false);
 
   /*
    * Keep track of the plan being displayed, initially undef and later either the plan id or null.
@@ -325,6 +364,13 @@ const HomePage: NextPage = () => {
           />
         ) : null}
       </DragOverlay>
+
+      <WhatsNewPopUp
+        isOpen={isOpen}
+        onClose={handleClose}
+        // handleCancel
+        //() => setIsOpen(false)
+      />
     </DndContext>
   );
 };

yarn.lock

@@ -4219,6 +4219,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/cookie@npm:^0.6.0":
+  version: 0.6.0
+  resolution: "@types/cookie@npm:0.6.0"
+  checksum: 5edce7995775b0b196b142883e4d4f71fd93c294eaec973670f1fa2540b70ea7390408ed513ddefef5fcb12a578100c76596e8f2a714b0c2ae9f70ee773f4510
+  languageName: node
+  linkType: hard
+
 "@types/cookiejar@npm:*":
   version: 2.1.2
   resolution: "@types/cookiejar@npm:2.1.2"
@@ -6353,6 +6360,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"cookie@npm:^0.6.0":
+  version: 0.6.0
+  resolution: "cookie@npm:0.6.0"
+  checksum: f56a7d32a07db5458e79c726b77e3c2eff655c36792f2b6c58d351fb5f61531e5b1ab7f46987150136e366c65213cbe31729e02a3eaed630c3bf7334635fb410
+  languageName: node
+  linkType: hard
+
 "cookiejar@npm:^2.1.3":
   version: 2.1.3
   resolution: "cookiejar@npm:2.1.3"
@@ -8185,6 +8199,7 @@ __metadata:
     prettier-plugin-jsdoc: ^0.3.38
     pretty-quick: ^3.1.3
     typescript: ^4.6.2
+    universal-cookie: ^7.2.0
   languageName: unknown
   linkType: soft
 
@@ -13498,6 +13513,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"universal-cookie@npm:^7.2.0":
+  version: 7.2.0
+  resolution: "universal-cookie@npm:7.2.0"
+  dependencies:
+    "@types/cookie": ^0.6.0
+    cookie: ^0.6.0
+  checksum: bf20d7fed9cdeed933e5d03bb2d95c5226edb30eae89cb61e8ab51589ad3340ca79f9dbf790c94db083ac31b0a6e38eb71b70a3cf03d1eaf0a1b00ee2b92b360
+  languageName: node
+  linkType: hard
+
 "universalify@npm:^0.2.0":
   version: 0.2.0
   resolution: "universalify@npm:0.2.0"