change to just add a button to redirect to the order form

Signed-off-by: brian-ngyn <[email protected]>

src/App.tsx

@@ -5,7 +5,6 @@ import ApplyPage from "pages/ApplyPage";
 import TeamPage from "pages/TeamPage";
 import ProjectsPage from "pages/ProjectsPage";
 import MerchPage from "pages/MerchPage";
-import MerchItemPage from "pages/MerchItemPage";
 
 import { useEffect } from "react";
 import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
@@ -36,9 +35,6 @@ function App() {
             <Route path="/projects">
               <ProjectsPage />
             </Route>
-            <Route path="/merch/item/:itemNumber">
-              <MerchItemPage />
-            </Route>
             <Route path="/merch">
               <MerchPage />
             </Route>

src/components/BuyNowButton.css

@@ -0,0 +1,12 @@
+.buy-now--button {
+  margin-top: 36px;
+  width: 75%;
+  background-color: #50abed;
+  color: white;
+  outline: none;
+  border: none;
+  padding: 12px;
+  border-radius: 10px;
+  text-align: center;
+  text-decoration-line: none;
+}

src/components/BuyNowButton.tsx

@@ -0,0 +1,17 @@
+import "./BuyNowButton.css";
+
+const BuyNowButton = () => {
+  return (
+    <>
+      <a
+        className="buy-now--button"
+        href="https://docs.google.com/forms/d/e/1FAIpQLSfpXS4hisen7IBvMGZnrfYWH600W_vpJwW0-b7blsA-D5Dq2w/viewform"
+        target="_blank"
+      >
+        Buy Now
+      </a>
+    </>
+  );
+};
+
+export default BuyNowButton;

src/components/MerchSection/MerchData.ts

@@ -14,17 +14,17 @@ export type MerchComponents = {
 export const merchList: MerchComponents[] = [
   {
     id: 0,
-    item: "Crewneck",
-    price: "$10.00 CAD",
+    item: "Original Basic Crewneck",
+    price: "$29.95 CAD",
     image: BlackHoodie,
     description: "placeholder descripton",
     sizes: ["S", "M", "L", "XL"],
     colors: ["Black"],
   },
   {
     id: 1,
-    item: "T-Shirt",
-    price: "$10.00 CAD",
+    item: "Crewneck with Sleeve Print",
+    price: "$49.99 CAD",
     image: BlackShortSleeve,
     description: "placeholder descripton",
     sizes: ["S", "M", "L", "XL"],

src/components/MerchSection/MerchDescription.tsx

@@ -8,8 +8,8 @@ interface MerchDescriptionProps {
 const MerchDescription = (props: MerchDescriptionProps) => {
   return (
     <MerchDescriptionDiv>
-      <h3>{props.item}</h3>
-      <h4>{props.price}</h4>
+      <h2>{props.item}</h2>
+      <h3>{props.price}</h3>
     </MerchDescriptionDiv>
   );
 };

src/components/MerchSection/MerchItem.styles.ts

@@ -7,10 +7,10 @@ interface MerchItemStyleProps {
 export const MerchItemDiv = styled.div<MerchItemStyleProps>`
   width: clamp(150px, 20%, 300px);
   margin: 0 1% 2.5rem;
-  display: block;
+  display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
-  cursor: pointer;
 
   width: ${(props) => props.mobileView && "100%"};
   max-width: ${(props) => props.mobileView && "400px"};

src/components/MerchSection/MerchItem.tsx

@@ -1,8 +1,8 @@
-import React, { useState } from "react";
+import React from "react";
 import * as S from "./MerchItem.styles";
 import { MerchComponents } from "./MerchData";
 import MerchDescription from "./MerchDescription";
-import { useHistory } from "react-router";
+import BuyNowButton from "components/BuyNowButton";
 
 export type MerchItemProps = {
   member: MerchComponents;
@@ -13,15 +13,13 @@ export type MerchItemProps = {
 const MerchItem = (props: MerchItemProps) => {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const preventDragHandler = (e: any) => e.preventDefault();
-  const history = useHistory();
 
   return (
     <>
       <S.MerchItemDiv
         data-aos={!props.mobileView && "zoom-in"}
         data-aos-duration={!props.mobileView && "1000"}
         mobileView={props.mobileView}
-        onClick={() => history.push(`/merch/item/${props.member.id}`)}
       >
         <S.MerchItemIconDiv>
           <img
@@ -32,6 +30,7 @@ const MerchItem = (props: MerchItemProps) => {
         </S.MerchItemIconDiv>
 
         <MerchDescription item={props.member.item} price={props.member.price} />
+        <BuyNowButton />
       </S.MerchItemDiv>
     </>
   );