feat(client): created note generation page and payment plan page

EchoSkorJjj · Feb 24, 2024 · 7800aa2 · 7800aa2
1 parent 804309c
commit 7800aa2
Show file tree

Hide file tree

Showing 18 changed files with 501 additions and 73 deletions.
diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -22,6 +22,8 @@ const SgIDCallbackPage = lazy(() => import("~pages/auth/SgIDCallback"));
 
 // Private Page
 const HomePage = lazy(() => import("~pages/home/Home"));
+const NotesGeneratorPage = lazy(() => import("~pages/notes/NotesGenerator"));
+const SubscribePage = lazy(() => import("~pages/subscribe/Subscribe"));
 
 const App = () => {
   const { isAuthenticated } = useAuth();
@@ -35,6 +37,7 @@ const App = () => {
             username: "Hello World",
             email: "sadad@gmail.com",
             role: "User",
+            is_paid: false,
           },
         });
       }
@@ -46,10 +49,10 @@ const App = () => {
   }, []);
 
   return (
-    <Flex direction="column" minH="100vh" bg={"darkBlue.500"}>
+    <Flex direction="column" minH="100vh" bg={"white"}>
       <Suspense fallback={<Loader />}>
         <Navbar />
-        <Box flex="1">
+        <Box flex="1" bg="darkBlue.500">
           <Suspense fallback={<Loader />}>
             <Routes>
               <Route
@@ -73,6 +76,8 @@ const App = () => {
                 element={<PrivateRoute isAuthenticated={isAuthenticated} />}
               >
                 <Route path="/home" element={<HomePage />} />
+                <Route path="/generator" element={<NotesGeneratorPage />} />
+                <Route path="/subscribe" element={<SubscribePage />} />
               </Route>
               <Route path="*" element={<NotFound />} />
             </Routes>

diff --git a/client/src/assets/img/notes_page_image.png b/client/src/assets/img/notes_page_image.png
diff --git a/client/src/components/navbar/Navbar.tsx b/client/src/components/navbar/Navbar.tsx
@@ -40,6 +40,7 @@ const Navbar = ({ ...rest }) => {
         alignItems={"center"}
         justifyContent={"space-between"}
         {...rest}
+        h="20"
         maxW={"6xl"}
         direction={"row"}
       >
@@ -59,19 +60,14 @@ const Navbar = ({ ...rest }) => {
           <Logo destination="/" />
           {isAuthenticated ? <NavLink /> : <></>}
         </HStack>
-        <HStack
-          h="20"
-          alignItems="center"
-          spacing={{ base: "0", sm: "2", lg: "6" }}
-        >
+        <HStack alignItems="center">
           {isAuthenticated ? (
             <AuthMenu user={user} handleSignOutClick={signOut} />
           ) : (
             <Button
               as={"a"}
               fontSize={"sm"}
               fontWeight={600}
-              display={{ base: "none", md: "flex" }}
               color={"white"}
               bg={"blue.400"}
               href={"/login"}

diff --git a/client/src/components/navbar/components/AuthMenu.tsx b/client/src/components/navbar/components/AuthMenu.tsx
@@ -1,19 +1,13 @@
-import { FiChevronDown } from "react-icons/fi";
 import {
   Avatar,
-  Box,
   Button,
   Center,
   HStack,
-  Menu,
-  MenuButton,
-  MenuDivider,
-  MenuItem,
-  MenuList,
   Portal,
   Text,
   VStack,
 } from "@chakra-ui/react";
+import { Menu } from "@opengovsg/design-system-react";
 
 import avatar4 from "~assets/img/avatars/avatar4.png";
 
@@ -26,8 +20,8 @@ interface AuthMenuProps {
 
 export const AuthMenu = ({ user, handleSignOutClick }: AuthMenuProps) => {
   return (
-    <Menu>
-      <MenuButton
+    <Menu isStretch={true}>
+      <Menu.Button
         as={Button}
         py={2}
         transition="all 0.3s"
@@ -50,13 +44,10 @@ export const AuthMenu = ({ user, handleSignOutClick }: AuthMenuProps) => {
               {user?.role}
             </Text>
           </VStack>
-          <Box display={{ base: "none", lg: "flex" }}>
-            <FiChevronDown />
-          </Box>
         </HStack>
-      </MenuButton>
+      </Menu.Button>
       <Portal>
-        <MenuList alignItems={"center"}>
+        <Menu.List alignItems={"center"} width={"200px"}>
           <br />
           <Center>
             <Avatar size={"2xl"} src={avatar4} referrerPolicy="no-referrer" />
@@ -66,12 +57,12 @@ export const AuthMenu = ({ user, handleSignOutClick }: AuthMenuProps) => {
             <p>{user?.username}</p>
           </Center>
           <br />
-          <MenuDivider />
-          <MenuItem as="a" href="/profile">
+          <Menu.Divider />
+          <Menu.Item as="a" href="/profile">
             Profile Settings
-          </MenuItem>
-          <MenuItem onClick={handleSignOutClick}>Logout</MenuItem>
-        </MenuList>
+          </Menu.Item>
+          <Menu.Item onClick={handleSignOutClick}>Logout</Menu.Item>
+        </Menu.List>
       </Portal>
     </Menu>
   );

diff --git a/client/src/pages/auth/MyInfoCallback.tsx b/client/src/pages/auth/MyInfoCallback.tsx
@@ -1,15 +1,17 @@
-import { useEffect } from "react";
+import { lazy, useEffect } from "react";
 
 import { useAuth } from "~features/auth";
 
+const Loader = lazy(() => import("~components/loader/Loader"));
+
 const MyInfoCallback = () => {
   const { myInfoAuth } = useAuth();
 
   useEffect(() => {
     myInfoAuth();
   }, []);
 
-  return <></>;
+  return <Loader />;
 };
 
 export default MyInfoCallback;
diff --git a/client/src/pages/auth/SgIDCallback.tsx b/client/src/pages/auth/SgIDCallback.tsx
@@ -1,15 +1,17 @@
-import { useEffect } from "react";
+import { lazy, useEffect } from "react";
 
 import { useAuth } from "~features/auth";
 
+const Loader = lazy(() => import("~components/loader/Loader"));
+
 const SgIDCallback = () => {
   const { sgIdAuth } = useAuth();
 
   useEffect(() => {
     sgIdAuth();
   }, []);
 
-  return <></>;
+  return <Loader />;
 };
 
 export default SgIDCallback;
diff --git a/client/src/pages/home/Home.tsx b/client/src/pages/home/Home.tsx
@@ -26,7 +26,7 @@ const HomePage = () => {
               pr="8em"
               pt="8em"
               as="a"
-              href="/notes-generator"
+              href="/generator"
               justifyContent={"center"}
               alignContent="center"
             >
@@ -51,7 +51,7 @@ const HomePage = () => {
               pr="8em"
               pt="8em"
               as="a"
-              href="/notes-marketplace"
+              href="/marketplace"
             >
               <Text color={"white"} lineHeight={1.2} fontSize="3xl">
                 View our

diff --git a/client/src/pages/landing/Landing.tsx b/client/src/pages/landing/Landing.tsx
@@ -1,12 +1,4 @@
-import {
-  Box,
-  Flex,
-  Image,
-  Stack,
-  Text,
-  useBreakpointValue,
-  VStack,
-} from "@chakra-ui/react";
+import { Box, Flex, Image, Stack, Text, VStack } from "@chakra-ui/react";
 
 import LandingPageImage from "~assets/img/landing_page_image.png";
 
@@ -17,25 +9,30 @@ const LandingPage = () => {
         <Box position="relative" height="100%" width="100%">
           <Image
             src={LandingPageImage}
-            width={useBreakpointValue({ base: "3xl", md: "6xl" })}
+            width={{ base: "3xl", md: "6xl" }}
             position="absolute"
+            display={{ base: "none", md: "flex" }}
             bottom="0"
-            left="50%"
-            transform="translate(-50%, 15%)"
+            left={{ md: "50%" }}
+            transform={{
+              base: "translate(0%, 35%)",
+              md: "translate(-50%, 10%)",
+            }}
             alt="Centered Image"
           />
           <VStack
             w={"full"}
             position="absolute"
-            transform="translate(-15%, 300%)"
+            transform={{ md: "translate(-15%, 370%)" }}
             justify={"center"}
-            px={useBreakpointValue({ base: 4, md: 8 })}
+            mt={{ base: 6, md: "none" }}
+            px={{ base: 4, md: 8 }}
           >
             <Stack maxW={"2xl"} align={"flex-start"} spacing={6}>
               <Text
                 color={"white"}
                 lineHeight={1.2}
-                fontSize={useBreakpointValue({ base: "3xl", md: "5xl" })}
+                fontSize={{ base: "3xl", md: "4xl", lg: "5xl" }}
               >
                 We{" "}
                 <Text as="span" fontWeight="bold">