Merch Store

.env.local.example

@@ -0,0 +1,11 @@
+# From https://docs.stripe.com/checkout/embedded/quickstart?client=next#set-env-vars
+
+# Copy into .env.local and replace the placeholder values with the real keys.
+    # https://dashboard.stripe.com/apikeys
+    # https://dashboard.stripe.com/test/apikeys
+    # https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables
+NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_12345
+STRIPE_SECRET_KEY=sk_test_12345
+
+# Set this environment variable to support webhooks — https://stripe.com/docs/webhooks#verify-events
+# STRIPE_WEBHOOK_SECRET=whsec_12345

.github/workflows/type-check.yml

@@ -12,7 +12,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [18.x]
+        node-version: [20.x]
 
     steps:
       - uses: actions/checkout@v1

.gitignore

@@ -26,6 +26,7 @@ yarn-error.log*
 .pnpm-debug.log*
 
 # local env files
+.env
 .env*.local
 
 # vercel

.vscode/launch.json

@@ -0,0 +1,28 @@
+{
+    "version": "0.2.0",
+    "configurations": [
+      {
+        "name": "Next.js: debug server-side",
+        "type": "node-terminal",
+        "request": "launch",
+        "command": "yarn dev"
+      },
+      {
+        "name": "Next.js: debug client-side",
+        "type": "chrome",
+        "request": "launch",
+        "url": "http://localhost:3000"
+      },
+      {
+        "name": "Next.js: debug full stack",
+        "type": "node-terminal",
+        "request": "launch",
+        "command": "yarn dev",
+        "serverReadyAction": {
+          "pattern": "- Local:.+(https?://.+)",
+          "uriFormat": "%s",
+          "action": "debugWithChrome"
+        }
+      }
+    ]
+  }

.vscode/settings.json

@@ -12,5 +12,10 @@
   "[typescriptreact]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
-  "editor.formatOnSave": true
+  "editor.formatOnSave": true,
+  "cSpell.words": [
+    "Merch",
+    "Subcom",
+    "subcoms"
+  ]
 }

README.md

@@ -20,6 +20,16 @@ To run the website on your local machine, do the following:
    should be available at `http://localhost:3000`, where any edits made to the
    website's source code should be immediately reflected on the webpage.
 
+## Maintaining
+
+### Enabling/disabling nominations
+
+Change `const showNominations` to `true` or `false` in `pages/nominations.tsx` to enable or disable nominations.
+
+### Enabling/disabling merch
+
+Change `export const isMerchActive = (): boolean => false;` to `true` in `scripts/merch.ts` to enable merch.
+
 ## Contributors
 
 The first version of the website was written by the 2020 Co-op Soc IT director,

components/Footer.tsx

@@ -42,7 +42,7 @@ const Footer = () => {
                 </a>
               </div>
               <div className="container">
-                Copyright &copy; 2023 UNSW Co-op Society
+                Copyright &copy; 2024 UNSW Co-op Society
               </div>
               <br></br>
             </Col>

components/Header.tsx

@@ -25,7 +25,7 @@ const Header = () => {
             x="0"
             y="0"
           >
-            <polygon className="fill-white" points="4000 0 4000 100 0 100" />
+            <polygon className="fill-white" points="4000 0 4000 105 0 105" />
           </svg>
         </div>
       </section>

components/IndexHeader.tsx

@@ -8,7 +8,7 @@ const IndexHeader = () => {
   return (
     <div className="position-relative">
       {/* shape Hero */}
-      <section className="section section-lg section-shaped pb-250">
+      <section className="section section-lg section-shaped pb-150">
         <div className="shape shape-style-custom shape-primary">
           <span className="floating" />
           <span className="floating" />
@@ -19,7 +19,7 @@ const IndexHeader = () => {
           <span className="floating" />
         </div>
 
-        <Container className="py-lg-md d-flex">
+        <Container className="d-flex px-4 px-sm-3">
           <div className="col px-0">
             <br></br>
             <Row>
@@ -47,7 +47,7 @@ const IndexHeader = () => {
             x="0"
             y="0"
           >
-            <polygon className="fill-white" points="4000 0 4000 100 0 100" />
+            <polygon className="fill-white" points="4000 0 4000 105 0 105" />
           </svg>
         </div>
       </section>

components/Navigation.tsx

@@ -11,7 +11,7 @@
 */
 
 import React, { useEffect, useState } from "react";
-import Image from "next/image";
+import Image from "next/legacy/image";
 import Link from "next/link";
 import { useRouter } from "next/router";
 
@@ -43,6 +43,7 @@ import LogoSmall from "public/img/brand/logo_small.png";
 import NextNavbarBrand from "./link/NextNavbarBrand";
 import NextNavLink from "./link/NextNavLink";
 import NavIcon from "./navigation/NavIcon";
+import { isMerchActive } from "scripts/merch";
 
 // Supports both internal and external links, but internal links/redirects are preferred
 const navLinks = [
@@ -56,6 +57,10 @@ const navLinks = [
   // ["First Year FB", "/fb"],
 ];
 
+if (isMerchActive()) {
+  navLinks.push(["Merch", "/merch"]);
+}
+
 const Navigation = () => {
   const router = useRouter();
   const [open, setOpen] = useState<boolean>(false);
@@ -83,23 +88,22 @@ const Navigation = () => {
           expand="lg"
           id="navbar-main"
         >
-          <Container>
-            <Link href="/" passHref>
-              <NextNavbarBrand className="mr-lg-5">
+          <Container className="d-flex align-items-center px-0 px-sm-3">
+            {/* legacyBehavior to fix: https://nextjs.org/docs/messages/invalid-new-link-with-extra-anchor */}
+            <Link href="/" passHref legacyBehavior>
+              <NextNavbarBrand className="me-lg-5">
                 <Image alt="..." src={Logo} />
               </NextNavbarBrand>
             </Link>
 
-            <NavbarToggler onClick={() => setOpen(true)} />
+            <NavbarToggler className="ms-auto" onClick={() => setOpen(true)} />
 
             <Collapse isOpen={open} navbar>
               <div className="navbar-collapse-header">
                 <Row>
                   <Col className="collapse-brand" xs="6">
-                    <Link href="/">
-                      <a>
-                        <Image alt="..." src={LogoSmall} />
-                      </a>
+                    <Link href="/" passHref>
+                      <Image alt="..." src={LogoSmall} />
                     </Link>
                   </Col>
 
@@ -115,7 +119,7 @@ const Navigation = () => {
               <Nav className="navbar-nav-click align-items-lg-center" navbar>
                 {navLinks.map(([text, link], index) => (
                   <NavItem key={`nav-item-${text}-${index}`}>
-                    <Link href={link} passHref>
+                    <Link href={link} passHref legacyBehavior>
                       <NextNavLink className={getNavLinkClass(link)}>
                         <span className="nav-link-inner--text">{text}</span>
                       </NextNavLink>
@@ -124,7 +128,7 @@ const Navigation = () => {
                 ))}
               </Nav>
 
-              <Nav className="align-items-lg-center ml-lg-auto" navbar>
+              <Nav className="align-items-lg-center ms-lg-auto" navbar>
                 <NavIcon
                   href="https://www.facebook.com/coopsoc.unsw/"
                   id="tooltip-facebook"

components/YearSlider.tsx

@@ -40,7 +40,6 @@ const YearSlider = ({ start, end, onChange }: YearSliderProps) => {
         sliderNode.noUiSlider.destroy();
       }
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return (

components/blog/BlogCard.tsx

@@ -30,7 +30,7 @@ const BlogCard = (blog: Blog) => {
           Learn more
         </Button>
 
-        <CardFooter className="pt-2 pb-0 pl-2 pr-2 bg-white">
+        <CardFooter className="pt-2 pb-0 ps-2 pe-2 bg-white">
           <p className="text-left text-sm text-muted">
             {dayjs(blog.published).fromNow()}
           </p>

components/blog/social_distance/BlogTab.tsx

@@ -1,4 +1,4 @@
-import Image from "next/image";
+import Image from "next/legacy/image";
 import React, { useState } from "react";
 import { Col, Container, Row, TabContent, TabPane } from "reactstrap";
 import { partition } from "scripts/list";
@@ -26,8 +26,10 @@ const BlogTab = (props: BlogTabProps) => {
       <Image
         src={src}
         alt={`${index}`}
-        width="100%"
-        height="100%"
+        style={{
+          width: "100%",
+          height: "100%",
+        }}
         layout="responsive"
         objectFit="contain"
         onClick={() => setTab(index)}

components/cart/clothingItem.tsx

@@ -0,0 +1,81 @@
+import React from "react";
+import Image from "next/image";
+
+import styles from "styles/modules/Cart.module.scss";
+
+import { Row, Col, Button } from "reactstrap";
+import { CartItemWithDetail } from "data/types";
+
+interface ClothingItemProps {
+  item: CartItemWithDetail;
+  addToCart: (item: CartItemWithDetail) => void;
+  removeFromCart: (item: CartItemWithDetail) => void;
+}
+
+const ClothingItem = ({
+  item,
+  addToCart,
+  removeFromCart,
+}: ClothingItemProps) => {
+  item.product.images[0] = item.product.images[0]
+    .replace("https%3A//www.coopsoc.com.au", "")
+    .replace(".png", ".jpg");
+  return (
+    <Row
+      className={
+        "mb-5 px-sm-5 ps-md-2 ps-lg-5 py-4 py-sm-1 " + styles["clothingItem"]
+      }
+    >
+      <Col
+        className="pt-2 pb-sm-3 pb-lg-2 d-flex flex-column flex-lg-row text-center justify-content-start align-items-center"
+        sm="6"
+      >
+        <Image
+          src={item.product.images[0]}
+          width={150}
+          height={150}
+          alt="Picture of the clothing item"
+          unoptimized
+        />
+        <p className="fs-5 fw-bold m-0 ms-lg-4 text-center">
+          {item.product.name}
+        </p>
+      </Col>
+      <Col
+        className={"d-none d-md-block text-center " + styles["clothingRow"]}
+        sm="1"
+      >
+        <p className="m-0 fs-5 fw-bold">${(item.price.cents ?? 0) / 100}</p>
+      </Col>
+      <Col className={styles["clothingRow"]} sm="4">
+        <div className={styles["quantityButtons"]}>
+          <Button
+            color="primary"
+            target="_blank"
+            onClick={() => removeFromCart(item)}
+          >
+            -
+          </Button>
+          <p className="m-0 my-3 mx-lg-3 fw-bold fs-5 text-center">
+            {item.qty}
+          </p>
+          <Button
+            color="primary"
+            target="_blank"
+            onClick={() => addToCart(item)}
+          >
+            +
+          </Button>
+        </div>
+      </Col>
+      <Col sm="1">
+        <p className="m-0 fw-bold fs-5 text-center">
+          <span className="d-sm-none">Total: </span>$
+          {((item.price.cents ?? 0) / 100) * item.qty}
+        </p>
+      </Col>
+    </Row>
+  );
+};
+
+export default ClothingItem;

components/charity/CharityList.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import Image from "next/image";
+import Image from "next/legacy/image";
 import { Container, Row, Col } from "reactstrap";
 
 import { SPONSORS } from "data/CharityData";

components/charity/CharityUpcoming.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import Image from "next/image";
+import Image from "next/legacy/image";
 import { Col, Container, Row } from "reactstrap";
 
 import { partition } from "scripts/list";

components/charity/events/CharityCard.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import Image from "next/image";
+import Image from "next/legacy/image";
 
 import { Col } from "reactstrap";
 import { CharityEvent, CharityEventProps } from "../../../data/types";

components/charity/modal/CharityBody.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import Image from "next/image";
+import Image from "next/legacy/image";
 import { CharityEventProps } from "../../../data/types";
 
 const CharityBody = ({ event }: CharityEventProps) => {

components/merch/CheckoutForm.tsx → components/merch_2023/CheckoutForm.tsx

@@ -4,11 +4,11 @@ import { useRouter } from "next/router";
 
 import styles from "styles/modules/Merch.module.scss";
 import LoadingButton from "components/LoadingButton";
-import { Product } from "../../data/types";
+import { Product2023 } from "../../data/types";
 
 interface CheckoutFormProps {
-  cart: Product[];
-  updateCart: (cart: Product[]) => void;
+  cart: Product2023[];
+  updateCart: (cart: Product2023[]) => void;
 }
 
 const CheckoutForm = ({ cart, updateCart }: CheckoutFormProps) => {
@@ -17,7 +17,7 @@ const CheckoutForm = ({ cart, updateCart }: CheckoutFormProps) => {
   const router = useRouter();
 
   const removeFromCart = (e: React.MouseEvent<HTMLSpanElement>) => {
-    const newCart: Product[] = JSON.parse(JSON.stringify(cart)); // this an extremely hacky way of getting a hard copied array
+    const newCart: Product2023[] = JSON.parse(JSON.stringify(cart)); // this an extremely hacky way of getting a hard copied array
     const index: number = Number(
       e.currentTarget.parentElement?.getAttribute("data-value"),
     ); // this is gross chaining