Improve style of /checkout when cart is empty, move file /api/merch.t…

…s to /scripts/merch.ts
coopsoc · Jun 19, 2024 · fc8860d · fc8860d
1 parent 110d2a4
commit fc8860d
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 16 deletions.
diff --git 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
@@ -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
@@ -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 (
-      <div id="checkout" className="mb-4 mb-xl-5">
-        <EmbeddedCheckoutProvider stripe={stripePromise} options={options}>
-          <EmbeddedCheckout />
-        </EmbeddedCheckoutProvider>
-      </div>
-    );
-  }
+  return (
+    <>
+      <Head>
+        <title>Checkout | UNSW Co-op Society</title>
+        <meta name="robots" content="noindex"></meta>
+      </Head>
 
-  // TODO: Improve this case
-  return <div>Cart is empty</div>;
+      {props.length ? (
+        <div id="checkout" className="mb-2 mb-sm-4 mb-xl-5">
+          <EmbeddedCheckoutProvider stripe={stripePromise} options={options}>
+            <EmbeddedCheckout />
+          </EmbeddedCheckoutProvider>
+        </div>
+      ) : (
+        <section className="section section-lg">
+          <Row className="justify-content-center text-center ">
+            <Col lg="8">
+              <h1 className="animate__animated animate__zoomIn animate__fast">
+                CHECKOUT
+              </h1>
+            </Col>
+          </Row>
+
+          <Container className="py-lg-md d-flex justify-content-center">
+            <p className="lead text-muted text-center">
+              Cart is empty, <Link href="/merch">add some items</Link> first!
+            </p>
+          </Container>
+        </section>
+      )}
+    </>
+  );
 };
 
 export default Checkout;
diff --git 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 → scripts/merch.ts b/api/merch.ts → scripts/merch.ts