From a43a14cbd6efa484bdd9fbd476d1fd86dd6e992e Mon Sep 17 00:00:00 2001
From: YoNG-Zaii <yongzaii811@outlook.com>
Date: Sun, 21 May 2023 11:27:34 +0800
Subject: [PATCH] feat(cart): Add cart button component (#95)

---
 packages/ui/components/merch/CartButton.tsx | 43 ++++++++++++++++++++
 packages/ui/components/merch/CartHeader.tsx | 45 ---------------------
 packages/ui/components/merch/Page.tsx       |  6 +--
 packages/ui/components/merch/index.tsx      |  3 +-
 packages/ui/components/navbar/MenuItems.tsx | 22 ++++++++--
 5 files changed, 65 insertions(+), 54 deletions(-)
 create mode 100644 packages/ui/components/merch/CartButton.tsx
 delete mode 100644 packages/ui/components/merch/CartHeader.tsx

diff --git a/packages/ui/components/merch/CartButton.tsx b/packages/ui/components/merch/CartButton.tsx
new file mode 100644
index 00000000..fd6104af
--- /dev/null
+++ b/packages/ui/components/merch/CartButton.tsx
@@ -0,0 +1,43 @@
+import Link from "next/link"
+import { Icon } from "@chakra-ui/react";
+import routes from "../../../../apps/web/features/merch/constants/routes";
+
+const CartButton = () => {
+  return(
+      <Icon viewBox="0 0 24 24" boxSize={7}>
+          <path fill="none" stroke-width="1.5" stroke="white"
+            d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 00-16.536-1.84M7.5 14.25L5.106 5.272M6 20.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm12.75 0a.75.75 0 11-1.5 0 .75.75 0 011.5 0z" />
+      </Icon>
+  )
+}
+
+/*
+const CartButton = () => {
+    return(
+    <Link href={routes.CART}
+      style={{
+        textDecoration: "none",
+        background: "black",
+        width: "2.8em",
+        height: "2.8em",
+        padding: 0,
+        borderRadius: "50%",
+        display: "flex", 
+        justifyContent: "center",
+        alignItems: "center"
+      }}>
+          <Icon p="0.3em"
+          bg="brand.red.medium" 
+          borderRadius="50%"  _hover={{
+            background: "brand.red.dark"
+          }}
+          viewBox="0 0 24 24" boxSize={10}>
+            <path fill="none" stroke-width="1.5" stroke="white"
+              d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 00-16.536-1.84M7.5 14.25L5.106 5.272M6 20.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm12.75 0a.75.75 0 11-1.5 0 .75.75 0 011.5 0z" />
+          </Icon>
+      </Link>
+    )
+}
+*/
+
+export default CartButton;
\ No newline at end of file
diff --git a/packages/ui/components/merch/CartHeader.tsx b/packages/ui/components/merch/CartHeader.tsx
deleted file mode 100644
index d0359986..00000000
--- a/packages/ui/components/merch/CartHeader.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import {
-  Box,
-  Flex,
-  HStack,
-  Spacer,
-  Show,
-  Hide,
-  Icon,
-} from "@chakra-ui/react";
-import Link from 'next/link';
-import routes from "../../../../apps/web/features/merch/constants/routes";
-
-
-export const CartHeader = () => {
-  return (
-    <Flex pos="sticky" zIndex={2} bg="#0e2b50" top={0} py={4} px={{ base: 4, md: 4, lg: 16 }} align="center">
-      <Spacer />
-      <Show below="xl">
-        <Link href={routes.CART}>
-          <Flex alignItems="center" gap={1} mr={4}>
-            <Icon viewBox="0 0 24 24" boxSize={5}>
-              <path fill="none" stroke-width="1.5" stroke="white"
-              d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 00-16.536-1.84M7.5 14.25L5.106 5.272M6 20.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm12.75 0a.75.75 0 11-1.5 0 .75.75 0 011.5 0z" />
-            </Icon>
-          </Flex>
-        </Link>
-      </Show>
-      <Hide below="xl">
-        <HStack spacing={5} alignItems="center">
-          <Link href={routes.CART}>
-            <Box px={2} py={1} borderRadius={7}
-            _hover={{ bg: "#426899", transition: "0.5s", color: "white" }}>
-              <Flex alignItems="center" gap={1}>
-              <Icon viewBox="0 0 24 24" boxSize={8}>
-                <path fill="none" stroke-width="1.5" stroke="white"
-                d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 00-16.536-1.84M7.5 14.25L5.106 5.272M6 20.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm12.75 0a.75.75 0 11-1.5 0 .75.75 0 011.5 0z" />
-              </Icon>
-              </Flex>
-            </Box>
-          </Link>
-        </HStack>
-      </Hide>
-    </Flex>
-  );
-};
\ No newline at end of file
diff --git a/packages/ui/components/merch/Page.tsx b/packages/ui/components/merch/Page.tsx
index d6364352..ae488c6b 100644
--- a/packages/ui/components/merch/Page.tsx
+++ b/packages/ui/components/merch/Page.tsx
@@ -1,6 +1,5 @@
 import { ReactNode } from "react";
 import { Flex, FlexProps, Box } from "@chakra-ui/react";
-import { CartHeader } from "./CartHeader";
 
 type PageProps = FlexProps & {
   children: ReactNode;
@@ -11,14 +10,13 @@ type PageProps = FlexProps & {
 
 export const Page = ({
   children,
-  hideHeader = false,
   contentWidth = "1400px",
   contentPadding = [4, 6, 8],
   ...props
 }: PageProps) => {
   return (
     <Flex flexDirection="column" {...props}>
-      {!hideHeader && <CartHeader />}
+      <Box w="100%" h="3em"></Box>
       <Box
         w="100%"
         flexDir="column"
@@ -32,4 +30,4 @@ export const Page = ({
       </Box>
     </Flex>
   );
-};
\ No newline at end of file
+};
diff --git a/packages/ui/components/merch/index.tsx b/packages/ui/components/merch/index.tsx
index 9c62fae3..d0f4edee 100644
--- a/packages/ui/components/merch/index.tsx
+++ b/packages/ui/components/merch/index.tsx
@@ -1,8 +1,7 @@
 export * from "./Card"
-export * from "./CartHeader"
 export * from "./EmptyProductView"
 export * from "./MerchCarousel"
 export * from "./Page"
 export * from "./SizeChartDialog"
 export * from "./SizeOption"
-export * from "./skeleton"
\ No newline at end of file
+export * from "./skeleton"
diff --git a/packages/ui/components/navbar/MenuItems.tsx b/packages/ui/components/navbar/MenuItems.tsx
index 5a361375..c4650c4b 100644
--- a/packages/ui/components/navbar/MenuItems.tsx
+++ b/packages/ui/components/navbar/MenuItems.tsx
@@ -1,6 +1,9 @@
-import React from "react";
 import { Box, Link, Stack, Text } from "@chakra-ui/react";
+import { useState, useEffect } from "react";
+import { useRouter } from "next/router";
 import { MenuLink, MenuLinkProps } from "./MenuLink";
+import CartButton from "../merch/CartButton";
+import routes from "../../../../apps/web/features/merch/constants/routes";
 
 interface MenuItemProps {
   isOpen?: boolean;
@@ -8,6 +11,17 @@ interface MenuItemProps {
 }
 
 export const MenuItems = ({ isOpen = false, links }: MenuItemProps) => {
+
+  const router = useRouter()
+  const [route, setRoute] = useState('')
+
+  useEffect(() => {
+    setRoute(router.pathname),
+    []
+  })
+
+  const regexp = /\/merch*/;
+  
   return (
     <Box
       display={{ base: isOpen ? "flex" : "none", xl: "flex" }}
@@ -37,8 +51,9 @@ export const MenuItems = ({ isOpen = false, links }: MenuItemProps) => {
       </Stack>
 
       {/* CTA Button -> Contact */}
+      {/* If on merch site, change to Cart */}
       <Link
-        href={"/contact"}
+        href={route.match(regexp) ? routes.CART : "/contact"}
         _hover={{
           bgColor: "brand.red.dark"
         }}
@@ -51,7 +66,8 @@ export const MenuItems = ({ isOpen = false, links }: MenuItemProps) => {
         w="max-content"
         display={{ base: "block", xl: "block" }}
       >
-        <Text display="block">Contact</Text>
+          {route.match(regexp) ? <CartButton /> :
+          <Text display="block">Contact</Text>}
       </Link>
     </Box>
   );