("");
@@ -16,15 +17,6 @@ const MerchandiseList = () => {
{}
);
- const { data: status, isLoading: isStatusLoading } = useQuery(
- [QueryKeys.STATUS],
- () => api.getMerchSaleStatus(),
- {}
- );
-
- const displayText = status?.displayText;
- const disabled = status?.disabled;
-
const categories = products?.map((product: Product) => product?.category);
const uniqueCategories = categories
?.filter((c, idx) => categories.indexOf(c) === idx)
@@ -36,86 +28,70 @@ const MerchandiseList = () => {
setSelectedCategory(event.target.value);
};
- if (isStatusLoading) {
- return (
-
-
-
- );
- }
-
return (
-
- {disabled ? (
-
-
- {displayText}
+
+
+
+
+ New Drop
+
- ) : (
- <>
-
-
- New Drop
-
-
-
-
- {isProductsLoading ? (
-
- ) : (
-
- {products
- ?.filter((product: Product) => {
- if (!product?.is_available) return false;
- if (selectedCategory === "") return true;
- return product?.category === selectedCategory;
- })
- ?.map((item: Product, idx: number) => (
-
- ))}
-
- )}
-
- )}
-
+
+ )}
+
+
);
};
diff --git a/apps/web/pages/merch/orders/[slug].tsx b/apps/web/pages/merch/orders/index.tsx
similarity index 73%
rename from apps/web/pages/merch/orders/[slug].tsx
rename to apps/web/pages/merch/orders/index.tsx
index 5f9e8a52..397c1836 100644
--- a/apps/web/pages/merch/orders/[slug].tsx
+++ b/apps/web/pages/merch/orders/index.tsx
@@ -1,20 +1,31 @@
import React, { useState } from "react";
import { useRouter } from "next/router";
-import { Image, Badge, Button, Divider, Flex, Heading, Text, useBreakpointValue } from "@chakra-ui/react";
+import {
+ Image,
+ Badge,
+ Button,
+ Divider,
+ Flex,
+ Heading,
+ Text,
+ useBreakpointValue,
+} from "@chakra-ui/react";
import { useQuery } from "@tanstack/react-query";
-import { Page } from "ui/components/merch";
+import { Page } from "ui/components/merch";
import { Order, OrderStatus } from "types";
import { api } from "features/merch/services/api";
import { routes } from "features/merch/constants/routes";
import { QueryKeys } from "features/merch/constants/queryKeys";
import { displayPrice } from "features/merch/functions/currency";
-import Link from "next/link"
+import Link from "next/link";
import LoadingScreen from "ui/components/merch/skeleton/LoadingScreen";
import { getOrderStatusColor, renderOrderStatus } from "merch-helpers";
import OrderItem from "ui/components/merch/OrderItem";
+import { MerchLayout } from "@/features/layout/components";
const OrderSummary: React.FC = () => {
-// Check if break point hit. KIV
- const isMobile: boolean = useBreakpointValue({ base: true, md: false }) || false;
+ // Check if break point hit. KIV
+ const isMobile: boolean =
+ useBreakpointValue({ base: true, md: false }) || false;
const router = useRouter();
const orderSlug = router.query.slug as string | undefined;
@@ -66,20 +77,25 @@ const OrderSummary: React.FC = () => {
flexDir="column"
>
-
+
- {renderOrderStatus(orderState?.status ?? OrderStatus.PENDING_PAYMENT)}
+ {renderOrderStatus(
+ orderState?.status ?? OrderStatus.PENDING_PAYMENT
+ )}
Order Number
-
- {orderState?.id.split("-")[0]}
-
+ {orderState?.id.split("-")[0]}
{orderState?.id}
@@ -87,8 +103,8 @@ const OrderSummary: React.FC = () => {
Order date:{" "}
{orderState?.transaction_time
? new Date(`${orderState.transaction_time}`).toLocaleString(
- "en-sg"
- )
+ "en-sg"
+ )
: ""}
{/*Last update: {orderState?.lastUpdate}*/}
@@ -96,16 +112,23 @@ const OrderSummary: React.FC = () => {
-
+
Order Number
- {renderOrderStatus(orderState?.status ?? OrderStatus.PENDING_PAYMENT)}
+ {renderOrderStatus(
+ orderState?.status ?? OrderStatus.PENDING_PAYMENT
+ )}
@@ -120,8 +143,8 @@ const OrderSummary: React.FC = () => {
Order date:{" "}
{orderState?.transaction_time
? new Date(`${orderState.transaction_time}`).toLocaleString(
- "en-sg"
- )
+ "en-sg"
+ )
: ""}
{/*Last update: {orderState?.lastUpdate}*/}
@@ -133,8 +156,11 @@ const OrderSummary: React.FC = () => {
{/* */}
{/*))}*/}
- {orderState? : Order Not Found}
-
+ {orderState ? (
+
+ ) : (
+ Order Not Found
+ )}
@@ -144,12 +170,11 @@ const OrderSummary: React.FC = () => {
{displayPrice(total)}
-
+
{/*{displayPrice( TODO*/}
{/* (orderState?.billing?.subtotal ?? 0) -*/}
{/* (orderState?.billing?.total ?? 0)*/}
- {/*)}*/}
- 0
+ {/*)}*/}0
{displayPrice(total)}
@@ -169,7 +194,10 @@ const OrderSummary: React.FC = () => {
{
sizes="(max-width: 768px)"
/>
- Please screenshot this QR code and show it at SCSE Lounge to collect your order.
- Alternatively, show the email receipt you have received.
+ Please screenshot this QR code and show it at SCSE Lounge to collect
+ your order. Alternatively, show the email receipt you have received.
For any assistance, please contact our email address:
@@ -191,9 +219,15 @@ const OrderSummary: React.FC = () => {
const renderSummaryPage = () => {
if (isLoading) return ;
//rmb to change this v
- if (orderState === undefined || orderState === null){return ;}
+ if (orderState === undefined || orderState === null) {
+ return ;
+ }
return renderOrderSummary();
};
- return {renderSummaryPage()};
-}
-export default OrderSummary
+ return (
+
+ {renderSummaryPage()}
+
+ );
+};
+export default OrderSummary;
diff --git a/apps/web/pages/merch/product/[slug].tsx b/apps/web/pages/merch/product/[slug].tsx
index 4085d159..a028586a 100644
--- a/apps/web/pages/merch/product/[slug].tsx
+++ b/apps/web/pages/merch/product/[slug].tsx
@@ -33,7 +33,9 @@ import { QueryKeys, routes } from "features/merch/constants";
import {
displayPrice,
displayQtyInCart,
- displayStock, getDefaultColor, getDefaultSize,
+ displayStock,
+ getDefaultColor,
+ getDefaultSize,
getQtyInCart,
getQtyInStock,
isColorAvailable,
@@ -43,6 +45,7 @@ import {
import { GetStaticPaths, GetStaticProps, InferGetStaticPropsType } from "next";
import { useQuery } from "@tanstack/react-query";
import { api } from "@/features/merch/services/api";
+import { MerchLayout } from "@/features/layout/components";
interface GroupTitleProps {
children: React.ReactNode;
@@ -54,7 +57,9 @@ const GroupTitle = ({ children }: GroupTitleProps) => (
);
-const MerchDetail = (_props: InferGetStaticPropsType) => {
+const MerchDetail = (
+ _props: InferGetStaticPropsType
+) => {
// Context hook.
const { state: cartState, dispatch: cartDispatch } = useCartStore();
const router = useRouter();
@@ -412,7 +417,7 @@ const MerchDetail = (_props: InferGetStaticPropsType) =>
return renderMerchDetails();
};
- return {renderMerchPage()};
+ return {renderMerchPage()};
};
export default MerchDetail;
@@ -424,6 +429,17 @@ export const getStaticProps: GetStaticProps<{
console.log("generating static props for /merch/product/[slug]");
console.log("params", JSON.stringify(params));
+ // Had to call this twice
+ const { disabled: merchDisabled } = await api.getMerchSaleStatus();
+ if (merchDisabled) {
+ return {
+ redirect: {
+ destination: "/merch",
+ permanent: false,
+ },
+ };
+ }
+
// TODO: replace this with trpc/react-query call
if (!process.env.NEXT_PUBLIC_MERCH_API_ORIGIN) {
throw new Error("NEXT_PUBLIC_MERCH_API_ORIGIN is not defined");
@@ -451,6 +467,14 @@ export const getStaticProps: GetStaticProps<{
export const getStaticPaths: GetStaticPaths = async () => {
console.log("generating static paths for /merch/product/[slug]");
+ const { disabled: merchDisabled } = await api.getMerchSaleStatus();
+ if (merchDisabled) {
+ return {
+ paths: [],
+ fallback: "blocking",
+ };
+ }
+
// TODO: replace this with trpc/react-query call
if (!process.env.NEXT_PUBLIC_MERCH_API_ORIGIN) {
throw new Error("NEXT_PUBLIC_MERCH_API_ORIGIN is not defined");