feat: Add Stripe Integration (#38)

* feat: add fallback component when 404 route * feat: add typings for product & category * refactor: change merchDetail typings to productType * feat: skeleton for merch list * feat: merch detail, typings, added size chart * feat: Cart Page * feat: checkout page * feat: order summary page * feat: order history page * feat: sign up, sign in and confirm sign in to take in page component * refactor: responsiveness on merch and change route name * refactor: responsiveness on merch detail * feat(cart): add cart count into header * style(cart): fix gap between hamburger and cart * refactor(*): Responsiveness changes, and fix max quantity to 99 * fix(cart): remove wrong equality meant for UI checking * refactor(*): add paynow modal * refactor(*): cart and checkout page, add payment element Co-authored-by: Woke Orange <75624491+wokeorange@users.noreply.github.com> Co-authored-by: Chan Wen Xu <lutherchanpublic+git@gmail.com>
ntuscds · Nov 12, 2022 · fa9a0d4 · fa9a0d4
1 parent 334d6e3
commit fa9a0d4
Show file tree

Hide file tree

Showing 74 changed files with 2,331 additions and 1,961 deletions.
diff --git a/.eslintrc.yml b/.eslintrc.yml
@@ -16,9 +16,7 @@ plugins:
   - react
   - "@typescript-eslint"
 rules:
-  "no-shadow": "off"
   "@typescript-eslint/no-unused-vars": 1
-  "@typescript-eslint/no-shadow": ["error"]
   "@typescript-eslint/consistent-type-definitions": ["error", "type"]
   "react/jsx-filename-extension": [1, { "extensions": [".tsx"] }]
   react/function-component-definition: 0
@@ -27,6 +25,10 @@ rules:
   no-restricted-exports: 0
   no-unused-vars: 1
   "react/jsx-props-no-spreading": 0
+  "no-shadow": "off"
+  "@typescript-eslint/no-shadow": ["error"]
+  "react/require-default-props": 0
+  "object-curly-spacing": ["error", "always"]
   "import/extensions":
     - "error"
     - "ignorePackages"

diff --git a/.github/reviewer-lottery.yml b/.github/reviewer-lottery.yml
@@ -4,6 +4,5 @@ groups:
     internal_reviewers: 0
     usernames:
       - RealDyllon
-      - tayalaks2001
       - yankai14
-      - ashwin2201
+      - chanbakjsd
diff --git a/package.json b/package.json
@@ -8,6 +8,9 @@
     "@chakra-ui/react": "^1.8.3",
     "@emotion/react": "^11",
     "@emotion/styled": "^11",
+    "@stripe/react-stripe-js": "^1.10.0",
+    "@stripe/stripe-js": "^1.35.0",
+    "@tanstack/react-query": "^4.0.10",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.2.1",
@@ -19,6 +22,7 @@
     "framer-motion": "^5",
     "joi": "^17.6.0",
     "joi-password": "^3.0.1",
+    "lodash": "^4.17.21",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-icons": "^4.4.0",

diff --git a/public/images/Paynow-Logo.png b/public/images/Paynow-Logo.png
diff --git a/public/images/size-chart.png b/public/images/size-chart.png
diff --git a/src/App.tsx b/src/App.tsx
@@ -8,19 +8,24 @@ import "swiper/css/lazy";
 import "./App.css";
 import { ChakraProvider } from "@chakra-ui/react";
 import { BrowserRouter } from "react-router-dom";
-import { CartProvider } from "./context/cart";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import Routes from "./routes";
 import chakraTheme from "./config/theme";
+import { CartProvider } from "./context/cart";
+
+const queryClient = new QueryClient({ defaultOptions: { queries: { refetchOnWindowFocus: false } } });
 
 const App = () => {
   return (
-    <ChakraProvider theme={chakraTheme}>
-      <BrowserRouter>
-        <CartProvider>
-          <Routes />
-        </CartProvider>
-      </BrowserRouter>
-    </ChakraProvider>
+    <QueryClientProvider client={queryClient}>
+      <ChakraProvider theme={chakraTheme}>
+        <BrowserRouter>
+          <CartProvider>
+            <Routes />
+          </CartProvider>
+        </BrowserRouter>
+      </ChakraProvider>
+    </QueryClientProvider>
   );
 };
 

diff --git a/src/components/CartCard.tsx b/src/components/CartCard.tsx
@@ -0,0 +1,19 @@
+import { ReactNode } from "react";
+import { Flex, FlexProps, Text, Divider } from "@chakra-ui/react";
+
+type CartCardProps = FlexProps & {
+  title?: string;
+  children: ReactNode;
+};
+
+const CartCard = ({ children, title, ...props }: CartCardProps) => {
+  return (
+    <Flex px={3} py={4} gap={4} flexDir="column" borderWidth="1px" borderRadius="lg" {...props}>
+      <Text fontWeight={600}>{title} </Text>
+      <Divider />
+      {children}
+    </Flex>
+  );
+};
+
+export default CartCard;
diff --git a/src/components/ConfirmSignUpForm.tsx b/src/components/ConfirmSignUpForm.tsx
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -48,7 +48,7 @@ function Footer() {
           <FooterLink href="/">Resources</FooterLink>
         </Grid>
       </Box>
-      <Image src="./images/vercellogo.svg" w={48} objectFit="contain" my={5} />
+      <Image src="/images/vercellogo.svg" w={48} objectFit="contain" my={5} />
     </Flex>
   );
 }

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -1,6 +1,7 @@
 import { HamburgerIcon } from "@chakra-ui/icons";
+import { AiOutlineShoppingCart } from "react-icons/ai";
 import {
-  Link,
+  Badge,
   Flex,
   Heading,
   Button,
@@ -17,39 +18,44 @@ import {
   DrawerBody,
   Grid,
   Hide,
+  Icon,
 } from "@chakra-ui/react";
-import React, { useRef } from "react";
+import React, { useRef, useState, useEffect } from "react";
 import { Link as RouterLink } from "react-router-dom";
 import CognitoClient from "../utils/aws/cognito/cognitoClient";
+import routes from "../utils/constants/routes";
+import { useCartStore } from "../context/cart";
+import { CartItemType } from "../typings/cart";
 
-const HeaderDrawer = () => {
+type HeaderDrawerProp = {
+  cartLength?: number;
+};
+
+const HeaderDrawer: React.FC<HeaderDrawerProp> = ({ cartLength = 0 }) => {
   const btnRef = useRef<HTMLButtonElement>(null);
   const { isOpen, onOpen, onClose } = useDisclosure();
 
   return (
     <>
-      <IconButton
-        ref={btnRef}
-        onClick={onOpen}
-        aria-label="Toggle Header Menu"
-        icon={<HamburgerIcon />}
-      />
-      <Drawer
-        isOpen={isOpen}
-        placement="right"
-        onClose={onClose}
-        finalFocusRef={btnRef}
-      >
+      <RouterLink to={routes.CART}>
+        <Flex alignItems="center" gap={1} mr={4}>
+          <Icon as={AiOutlineShoppingCart} w={5} h={5} />
+          {cartLength > 0 && <Badge>{cartLength > 99 ? "99+" : cartLength}</Badge>}
+        </Flex>
+      </RouterLink>
+      <IconButton ref={btnRef} onClick={onOpen} aria-label="Toggle Header Menu" icon={<HamburgerIcon />} />
+      <Drawer isOpen={isOpen} placement="right" onClose={onClose} finalFocusRef={btnRef}>
         <DrawerOverlay />
         <DrawerContent>
           <DrawerCloseButton size="lg" />
-
           <DrawerBody pt={8}>
             <Grid rowGap={4}>
-              <Heading size="lg">Home</Heading>
-              <Heading size="lg">Projects</Heading>
-              <Heading size="lg">About Us</Heading>
-              <Heading size="lg">Merchandise</Heading>
+              <RouterLink to={routes.HOME}>
+                <Heading size="lg">Home</Heading>
+              </RouterLink>
+              <RouterLink to={routes.MERCHANDISE_LIST}>
+                <Heading size="lg">Merchandise</Heading>
+              </RouterLink>
             </Grid>
           </DrawerBody>
         </DrawerContent>
@@ -59,38 +65,53 @@ const HeaderDrawer = () => {
 };
 
 const Header = () => {
+  const [isAuthenticated, setIsAuthenticated] = useState(false);
+  const cartContext = useCartStore();
+  const { state: cartState } = cartContext;
+  const cartLength = cartState.items.reduce((acc: number, cur: CartItemType) => acc + cur.quantity, 0);
 
-  const [isAuthenticated, setIsAuthenticated] = React.useState(false);
-  React.useEffect(() => {
+  useEffect(() => {
     CognitoClient.isUserSignedIn().then((isSignedIn) => {
-      setIsAuthenticated(isSignedIn)
+      setIsAuthenticated(isSignedIn);
     });
   }, []);
-  
+
   return (
     <Flex py={4} px={{ base: 4, md: 4, lg: 16 }} align="center">
       <HStack spacing={2}>
-        <Image src="/images/SCSE-Logo.png" alt="SCSE Logo" boxSize={14} />
-        <Heading>SCSE CLUB</Heading>
+        <RouterLink to={routes.HOME}>
+          <Flex alignItems="center">
+            <Image src="/images/SCSE-Logo.png" alt="SCSE Logo" boxSize={14} />
+            <Heading ml={1}>SCSE CLUB</Heading>
+          </Flex>
+        </RouterLink>
       </HStack>
 
       <Spacer />
       <Show below="xl">
-        <HeaderDrawer />
+        <HeaderDrawer cartLength={cartLength} />
       </Show>
       <Hide below="xl">
-        <HStack spacing={5}>
-          <Link href="/" fontWeight="700">
-            Home
-          </Link>
-          {/* <Link href="/">Projects</Link> */}
-          {/* <Link href="/">About Us</Link> */}
-          <Link href="/merchandise-list">Merchandise</Link>
-          {!isAuthenticated && (<><Button to="/sign-in" as={RouterLink} variant="outline" px={12}>
-            Sign in
-          </Button><Button to="/sign-up" as={RouterLink} variant="solid">
-              Create an Account
-            </Button></>)}
+        <HStack spacing={5} alignItems="center">
+          <RouterLink to={routes.HOME}>Home</RouterLink>
+          <RouterLink to={routes.MERCHANDISE_LIST}>Merchandise</RouterLink>
+          <RouterLink to={routes.CART}>
+            <Flex alignItems="center" gap={1}>
+              <Icon as={AiOutlineShoppingCart} w={5} h={5} />
+              {cartLength > 0 && <Badge>{cartLength > 99 ? "99+" : cartLength}</Badge>}
+            </Flex>
+          </RouterLink>
+          {/* TODO: Sign Out */}
+          {!isAuthenticated && (
+            <>
+              <Button to="/sign-in" as={RouterLink} variant="outline" px={12}>
+                Sign in
+              </Button>
+              <Button to="/sign-up" as={RouterLink} variant="solid">
+                Create an Account
+              </Button>
+            </>
+          )}
         </HStack>
       </Hide>
     </Flex>
-Original file line number
+Diff line change
@@ Expand Up / @@ -48,7 +48,7 @@ function Footer() { @@
               <FooterLink href="/">Resources</FooterLink>
             </Grid>
           </Box>
-          <Image src="./images/vercellogo.svg" w={48} objectFit="contain" my={5} />
+          <Image src="/images/vercellogo.svg" w={48} objectFit="contain" my={5} />
         </Flex>
       );
     }
@@ Expand Down @@