Feat: Added disable merch toggle button

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/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();