feat: add components and types needed for cart

packages/types/lib/merch.ts

@@ -92,13 +92,14 @@ export enum PromoType {
   FIXED_VALUE = "FIXED_VALUE",
 }
 
-/*
 export type ProductInfo = {
   name: string;
   image: string;
   price: number;
 };
 
+export type ProductInfoMap = Record<string, ProductInfo>;
+
 export type CartPrice = {
   currency: string;
   subtotal: number;
@@ -127,6 +128,7 @@ export type CartResponseDto = {
   };
 };
 
+/*
 export type CheckoutResponseDto = {
   orderId: string;
   items: [
@@ -153,6 +155,4 @@ export type CheckoutResponseDto = {
   };
   email: string;
 };
-
-export type ProductInfoMap = Record<string, ProductInfo>;
-*/
+*/

packages/ui/components/merch/LoadingScreen.tsx

@@ -0,0 +1,21 @@
+import { Flex, Spinner, Text } from "@chakra-ui/react";
+
+export type LoadingScreenProps = {
+    minH?: string;
+    text: string;
+};
+
+export const LoadingScreen = ({ minH = "50vh", text = "" }: LoadingScreenProps) => {
+  return (
+    <Flex
+      minH={minH}
+      alignItems="center"
+      justifyContent="center"
+      flexDirection="column"
+      gap={8}
+    >
+      <Spinner thickness="4px" speed="0.65s" size="xl" />
+      <Text>{text}</Text>
+    </Flex>
+  );
+};

packages/ui/components/merch/cart/CartCard.tsx

@@ -0,0 +1,17 @@
+import { ReactNode } from "react";
+import { Flex, FlexProps, Text, Divider } from "@chakra-ui/react";
+
+type CartCardProps = FlexProps & {
+  title?: string;
+  children: ReactNode;
+};
+
+export 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>
+  );
+};

packages/ui/components/merch/cart/CartEmptyView.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import Link from 'next/link';
+import { Center, Flex, Heading, Button } from "@chakra-ui/react";
+import { routes } from "web/features/merch/constants";
+
+export const CartEmptyView: React.FC = () => (
+  <Center minH="50vh" width="100%">
+    <Flex flexDirection="column" gap={8} alignItems="center">
+      <Heading fontSize="2xl">No items in your cart</Heading>
+      <Link href={routes.HOME}>
+        <Button size="md" flexShrink={1} borderRadius={0}>
+          CONTINUE SHOPPING
+        </Button>
+      </Link>
+    </Flex>
+  </Center>
+);

packages/ui/components/merch/cart/CartRemoveModal.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+
+import { Button, Divider, Modal, ModalOverlay, ModalContent, ModalFooter, ModalBody, Text } from "@chakra-ui/react";
+
+type CartRemoveModalType = {
+  isOpen: boolean;
+  onClose: () => void;
+  removeItem: () => void;
+};
+
+export const CartRemoveModal: React.FC<CartRemoveModalType> = (props) => {
+  const { isOpen, onClose, removeItem } = props;
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} isCentered trapFocus={false}>
+      <ModalOverlay />
+      <ModalContent>
+        <ModalBody px="4" py={8} textAlign="center">
+          <Text fontSize="md">Do you want to remove this product?</Text>
+        </ModalBody>
+        <Divider />
+        <ModalFooter justifyContent="center" p={0}>
+          <Button
+            onClick={onClose}
+            border={0}
+            flexGrow={1}
+            borderRadius={0}
+            variant="outline"
+            colorScheme="blackAlpha"
+            borderRight="1px solid #E2E8F0"
+          >
+            No
+          </Button>
+          <Button border={0} borderRadius={0} flexGrow={1} variant="outline" onClick={() => removeItem()}>
+            Yes
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+};

packages/ui/components/merch/cart/index.tsx

@@ -0,0 +1,4 @@
+export * from "./CartCard"
+export * from "./CartHeader"
+export * from "./CartEmptyView"
+export * from "./CartRemoveModal"

packages/ui/components/merch/index.tsx

@@ -1,5 +1,7 @@
+export * from "./cart"
 export * from "./Card"
 export * from "./EmptyProductView"
+export * from "./LoadingScreen"
 export * from "./MerchCarousel"
 export * from "./Page"
 export * from "./SizeChartDialog"