From fc8860d74461dd2649e6a51c60f8bc887326ead5 Mon Sep 17 00:00:00 2001 From: Nicholas Langford Date: Wed, 19 Jun 2024 18:10:37 +1000 Subject: [PATCH] Improve style of /checkout when cart is empty, move file /api/merch.ts to /scripts/merch.ts --- components/cart/clothingItem.tsx | 2 +- pages/cart.tsx | 2 +- pages/checkout/index.tsx | 49 +++++++++++++++++++++++--------- pages/merch.tsx | 2 +- {api => scripts}/merch.ts | 0 5 files changed, 39 insertions(+), 16 deletions(-) rename {api => scripts}/merch.ts (100%) diff --git a/components/cart/clothingItem.tsx b/components/cart/clothingItem.tsx index 67100ac..0d924ec 100644 --- a/components/cart/clothingItem.tsx +++ b/components/cart/clothingItem.tsx @@ -4,7 +4,7 @@ import Image from "next/image"; import styles from "styles/modules/Cart.module.scss"; import { Row, Col, Button } from "reactstrap"; -import { CartItemWithDetail } from "api/merch"; +import { CartItemWithDetail } from "scripts/merch"; interface ClothingItemProps { item: CartItemWithDetail; diff --git a/pages/cart.tsx b/pages/cart.tsx index ec944fa..edf150c 100644 --- a/pages/cart.tsx +++ b/pages/cart.tsx @@ -9,7 +9,7 @@ import styles from "styles/modules/Cart.module.scss"; // reactstrap components import { Col, Row, Button, Container } from "reactstrap"; -import { CartItemWithDetail } from "api/merch"; +import { CartItemWithDetail } from "scripts/merch"; import router from "next/router"; const Cart = () => { diff --git a/pages/checkout/index.tsx b/pages/checkout/index.tsx index 39120ff..c7b5858 100644 --- a/pages/checkout/index.tsx +++ b/pages/checkout/index.tsx @@ -10,8 +10,11 @@ import { EmbeddedCheckoutProvider, } from "@stripe/react-stripe-js"; import { loadStripe } from "@stripe/stripe-js"; -import { CartItemWithDetail } from "api/merch"; +import { CartItemWithDetail } from "scripts/merch"; +import Head from "next/head"; +import Link from "next/link"; import { useCallback, useEffect, useState } from "react"; +import { Col, Container, Row } from "reactstrap"; const stripePromise = loadStripe( process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY || "NO_KEY_FOUND", @@ -47,20 +50,40 @@ const Checkout = () => { return data.clientSecret; }, [props]); - if (props.length) { - const options = { fetchClientSecret }; + const options = { fetchClientSecret }; - return ( -
- - - -
- ); - } + return ( + <> + + Checkout | UNSW Co-op Society + + - // TODO: Improve this case - return
Cart is empty
; + {props.length ? ( +
+ + + +
+ ) : ( +
+ + +

+ CHECKOUT +

+ + + + +

+ Cart is empty, add some items first! +

+ +
+ )} + + ); }; export default Checkout; diff --git a/pages/merch.tsx b/pages/merch.tsx index 54ca372..af7dbde 100644 --- a/pages/merch.tsx +++ b/pages/merch.tsx @@ -28,7 +28,7 @@ import { Variant, getAllPrices, getAllProductsAndVariants, -} from "api/merch"; +} from "scripts/merch"; import Stripe from "stripe"; type Repo = { diff --git a/api/merch.ts b/scripts/merch.ts similarity index 100% rename from api/merch.ts rename to scripts/merch.ts