Feat: Added disable merch toggle button (#143)

* Revert "remove merch routes for launch (#130)"
This reverts commit 6bb3c6d.

* Disable merch store feature

---------

Co-authored-by: LimIvan336 <[email protected]>
Co-authored-by: Chung Zhi Xuan <[email protected]>
Co-authored-by: iyzyman <[email protected]>

apps/cms/src/admin/views/MerchOverview.tsx

@@ -1,9 +1,49 @@
-import React from "react";
+import React, { useEffect, useState, ChangeEvent } from "react";
 import { Button } from "payload/components/elements";
 import { AdminView } from "payload/config";
 import ViewTemplate from "./ViewTemplate";
+import StoreApi from "../../apis/store.api";
 
 const MerchOverview: AdminView = ({ user, canAccessAdmin }) => {
+  const [displayText, setDisplayText] = useState<string>(
+    "We are currently preparing for the next merch sale. Please look forward to our email!"
+  );
+  const [isStoreDisabled, setIsStoreDisabled] = useState<boolean>(true);
+  const [loading, setLoading] = useState<boolean>(true);
+
+  const SHOW_DISPLAY_TEXT_INPUT = false;
+
+  useEffect(() => {
+    const fetchStoreStatus = async () => {
+      try {
+        const { disabled } = await StoreApi.getStoreStatus();
+        setIsStoreDisabled(disabled);
+        setLoading(false);
+      } catch (error) {
+        console.error(error);
+        setLoading(false);
+      }
+    };
+
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    fetchStoreStatus();
+  }, []);
+
+  const disableStore = async () => {
+    // TODO: Calls api to disable merch store
+    try {
+      setLoading(true);
+      await StoreApi.setStoreStatus({
+        displayText,
+        disabled: !isStoreDisabled,
+      });
+      setIsStoreDisabled(!isStoreDisabled);
+      setLoading(false);
+    } catch (error) {
+      console.error(error);
+      setLoading(false);
+    }
+  };
   return (
     <ViewTemplate
       user={user}
@@ -19,6 +59,29 @@ const MerchOverview: AdminView = ({ user, canAccessAdmin }) => {
       <Button el="link" to={"/admin"} buttonStyle="primary">
         Go to Main Admin View
       </Button>
+      <p style={{ paddingTop: 20 }}>{`Current state of merch store: ${
+        loading ? "..." : isStoreDisabled ? "Disabled" : "Live"
+      }`}</p>
+      {SHOW_DISPLAY_TEXT_INPUT && (
+        <textarea
+          value={displayText}
+          onChange={(e: ChangeEvent<HTMLTextAreaElement>) =>
+            setDisplayText(e.target.value)
+          }
+          placeholder="Enter display text"
+          rows={4}
+          cols={50}
+        />
+      )}
+      <Button
+        // eslint-disable-next-line @typescript-eslint/no-misused-promises
+        onClick={disableStore}
+        disabled={loading}
+        buttonStyle="primary"
+        el="a"
+      >
+        Disable Store
+      </Button>
     </ViewTemplate>
   );
 };

apps/cms/src/apis/store.api.ts

@@ -0,0 +1,40 @@
+import { MerchSaleStatus } from "types";
+
+class MerchStoreApi {
+  // eslint-disable-next-line @typescript-eslint/require-await
+  async setStoreStatus({
+    disabled,
+    displayText,
+  }: MerchSaleStatus): Promise<void> {
+    // TODO: set store status in the backend
+    console.log(disabled, displayText);
+    return new Promise((res, rej) => {
+      try {
+        setTimeout(() => {
+          res();
+        }, 1000);
+      } catch (error) {
+        rej(error);
+      }
+    });
+  }
+
+  async getStoreStatus(): Promise<MerchSaleStatus> {
+    //   TODO: get store status from the backend
+    return new Promise((res, rej) => {
+      try {
+        setTimeout(() => {
+          res({
+            disabled: true,
+            displayText:
+              "We are currently preparing for the next merch sale. Please look forward to our email!",
+          });
+        }, 1000);
+      } catch (error) {
+        rej(error);
+      }
+    });
+  }
+}
+
+export default new MerchStoreApi();

apps/web/features/layout/components/MerchLayout.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { Flex, Heading } from "@chakra-ui/react";
+import { QueryKeys } from "features/merch/constants";
+import { useQuery } from "@tanstack/react-query";
+import { api } from "features/merch/services/api";
+import { MerchListSkeleton, Page } from "ui/components/merch";
+
+interface MerchLayoutProps {
+  children: React.ReactNode;
+}
+
+export const MerchLayout = ({ children }: MerchLayoutProps) => {
+  const { data: status, isLoading: isStatusLoading } = useQuery(
+    [QueryKeys.STATUS],
+    () => api.getMerchSaleStatus(),
+    {}
+  );
+
+  const displayText = status?.displayText;
+  const disabled = status?.disabled;
+
+  if (isStatusLoading) {
+    return <Page>{<MerchListSkeleton /> ?? <></>}</Page>;
+  }
+
+  return (
+    <>
+      {disabled ? (
+        <Flex justifyContent="center" alignItems="center" height="85vh">
+          <Heading textAlign="center" maxWidth="1260px">
+            {displayText}
+          </Heading>
+        </Flex>
+      ) : (
+        <>{children}</>
+      )}
+    </>
+  );
+};

apps/web/features/layout/components/index.ts

@@ -1 +1,2 @@
-export { WebLayout } from './WebLayout';
+export { WebLayout } from "./WebLayout";
+export { MerchLayout } from "./MerchLayout";

apps/web/features/merch/constants/queryKeys.ts

@@ -6,4 +6,5 @@ export enum QueryKeys {
   ORDERS = "ORDERS",
   EMAIL = "EMAIL",
   CHECKOUT = "CHECKOUT",
+  STATUS = "STATUS",
 }

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((res, rej) => {
+      setTimeout(() => {
+        res({
+          disabled: true,
+          displayText:
+            "We are currently preparing for the next merch sale. Please look forward to our email!",
+        });
+      }, 1000);
+    });
+  }
 }
 
 export const api = new Api();