Disable merch store feature

ntuscds · Jan 31, 2024 · e31d02b · e31d02b
1 parent ef83b1e
commit e31d02b
Show file tree

Hide file tree

Showing 3 changed files with 108 additions and 55 deletions.
diff --git a/apps/web/features/merch/services/api.ts b/apps/web/features/merch/services/api.ts
@@ -3,6 +3,7 @@ import {
   Cart,
   CheckoutRequest,
   CheckoutResponse,
+  MerchSaleStatus,
   PricedCart,
   Product,
   ProductsResponse,
@@ -85,6 +86,20 @@ export class Api {
       email,
     });
   }
+
+  async getMerchSaleStatus(): Promise<MerchSaleStatus> {
+    // fetch merch status from backend, either true: enabled, false: disabled
+    // Simulating fetching data from backend and admin panel
+    return new Promise((resolve, reject) => {
+      setTimeout(() => {
+        resolve({
+          disabled: true,
+          displayText:
+            "We are currently preparing for the next merch sale. Please look forward to our email!",
+        });
+      }, 1000);
+    });
+  }
 }
 
 export const api = new Api();
diff --git a/apps/web/pages/merch/index.tsx b/apps/web/pages/merch/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { Flex, Divider, Select, Heading, Grid } from "@chakra-ui/react";
 import { useQuery } from "@tanstack/react-query";
 import { Card, MerchListSkeleton, Page } from "ui/components/merch";
@@ -9,6 +9,18 @@ import { isOutOfStock } from "features/merch/functions";
 
 const MerchandiseList = () => {
   const [selectedCategory, setSelectedCategory] = useState<string>("");
+  const [isMerchDisabled, setIsMerchDisabled] = useState<boolean | null>(false);
+  const [disabledText, setDisabledText] = useState<string>("");
+
+  useEffect(() => {
+    const fetchMerchSaleStatus = async () => {
+      const { disabled, displayText } = await api.getMerchSaleStatus();
+      console.log(disabledText);
+      setDisabledText(displayText ?? "");
+      setIsMerchDisabled(disabled);
+    };
+    fetchMerchSaleStatus();
+  }, []);
 
   const { data: products, isLoading } = useQuery(
     [QueryKeys.PRODUCTS],
@@ -27,63 +39,84 @@ const MerchandiseList = () => {
     setSelectedCategory(event.target.value);
   };
 
+  if (isMerchDisabled === null) {
+    return (
+      <>
+        <MerchListSkeleton />
+      </>
+    );
+  }
+
   return (
     <Page>
-      <Flex justifyContent="space-between" alignItems="center">
-        <Heading fontSize={["md", "2xl"]} textColor={["primary.600", "black"]}>
-          New Drop
-        </Heading>
-        <Select
-          bgColor={["white", "gray.100"]}
-          w="fit-content"
-          textAlign="center"
-          alignSelf="center"
-          placeholder="All Product Type"
-          size="sm"
-          disabled={isLoading}
-          value={selectedCategory}
-          onChange={handleCategoryChange}
-        >
-          {uniqueCategories?.map((category, idx) => (
-            <option key={idx.toString()} value={category}>
-              {category}
-            </option>
-          ))}
-        </Select>
-      </Flex>
-      <Divider borderColor="blackAlpha.500" mt={[5, 10]} />
-      {isLoading ? (
-        <MerchListSkeleton />
+      {isMerchDisabled ? (
+        <Flex justifyContent="center" alignItems="center" height="85vh">
+          <Heading textAlign="center" maxWidth="1260px">
+            {disabledText}
+          </Heading>
+        </Flex>
       ) : (
-        <Grid
-          templateColumns={{
-            base: "repeat(2, 1fr)",
-            md: "repeat(3, 1fr)",
-            lg: "repeat(4, 1fr)",
-          }}
-          columnGap={4}
-          rowGap={2}
-        >
-          {products
-            ?.filter((product: Product) => {
-              if (!product?.is_available) return false;
-              if (selectedCategory === "") return true;
-              return product?.category === selectedCategory;
-            })
-            ?.map((item: Product, idx: number) => (
-              <Card
-                _productId={item.id}
-                key={idx.toString()}
-                text={item?.name}
-                price={item?.price}
-                imgSrc={item?.images?.[0]}
-                sizeRange={`${item?.sizes?.[0]} - ${
-                  item.sizes?.[item.sizes.length - 1]
-                }`}
-                isOutOfStock={isOutOfStock(item)}
-              />
-            ))}
-        </Grid>
+        <>
+          <Flex justifyContent="space-between" alignItems="center">
+            <Heading
+              fontSize={["md", "2xl"]}
+              textColor={["primary.600", "black"]}
+            >
+              New Drop
+            </Heading>
+            <Select
+              bgColor={["white", "gray.100"]}
+              w="fit-content"
+              textAlign="center"
+              alignSelf="center"
+              placeholder="All Product Type"
+              size="sm"
+              disabled={isLoading}
+              value={selectedCategory}
+              onChange={handleCategoryChange}
+            >
+              {uniqueCategories?.map((category, idx) => (
+                <option key={idx.toString()} value={category}>
+                  {category}
+                </option>
+              ))}
+            </Select>
+          </Flex>
+          <Divider borderColor="blackAlpha.500" mt={[5, 10]} />
+          {isLoading ? (
+            <MerchListSkeleton />
+          ) : (
+            <Grid
+              templateColumns={{
+                base: "repeat(2, 1fr)",
+                md: "repeat(3, 1fr)",
+                lg: "repeat(4, 1fr)",
+              }}
+              columnGap={4}
+              rowGap={2}
+            >
+              {products
+                ?.filter((product: Product) => {
+                  if (!product?.is_available) return false;
+                  if (selectedCategory === "") return true;
+                  return product?.category === selectedCategory;
+                })
+                ?.map((item: Product, idx: number) => (
+                  <Card
+                    _productId={item.id}
+                    key={idx.toString()}
+                    text={item?.name}
+                    price={item?.price}
+                    imgSrc={item?.images?.[0]}
+                    sizeRange={`${item?.sizes?.[0]} - ${
+                      item.sizes?.[item.sizes.length - 1]
+                    }`}
+                    isOutOfStock={isOutOfStock(item)}
+                  />
+                ))}
+            </Grid>
+          )}
+        </>
       )}
     </Page>
   );

diff --git a/packages/types/src/lib/merch.ts b/packages/types/src/lib/merch.ts
@@ -168,3 +168,8 @@ export type APIError = {
 export type OrderHoldEntry = {
   // todo: ???
 };
+
+export type MerchSaleStatus = {
+  disabled: boolean;
+  displayText?: string;
+};