Implement cutoff time on frontend to prevent purchase/cancelling

compsoc-edinburgh · Jan 11, 2025 · 16f7c03 · 16f7c03
1 parent b511896
commit 16f7c03
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 10 deletions.
diff --git a/src/components/MyTransactions.tsx b/src/components/MyTransactions.tsx
@@ -4,6 +4,7 @@ import { useFetcher } from "@remix-run/react";
 import { action as shopCancelAction } from "../routes/shop.cancel";
 import Stars from "./Stars";
 import { IoMdCloseCircle } from "react-icons/io";
+import { cutoffTime } from "../cutoff";
 
 type MyTransactionsProps = {
   user?: User;
@@ -15,6 +16,9 @@ type MyTransactionsProps = {
 
 export const MyTransactions: FunctionComponent<MyTransactionsProps> = ({ user, remaining_stars, shop_items, transactions, className }) => {
   const fetcher = useFetcher<typeof shopCancelAction>();
+
+  const isPostCutoff = new Date().getTime() > cutoffTime.getTime();
+
   return (
     <div className={"lg:self-start self-stretch flex flex-col mx-4 shadow-christmasBeigeAccent group " + className}>
       <h2 className="text-4xl font-display mb-4 relative self-start text-white">
@@ -43,18 +47,39 @@ export const MyTransactions: FunctionComponent<MyTransactionsProps> = ({ user, r
                       </span>
                       <Stars className="z-10 bg-white pl-2" amount={shop_items.find(i => i.id === transaction.shop_item_id)?.star_cost || 0} />
 
-                      <fetcher.Form method="post" action="shop/cancel" className="opacity-0 group-hover:opacity-100 transition-all duration-75 absolute top-1/2 -translate-y-1/2 -right-4 group-hover:-right-5 flex items-center text-lg">
-                        <input type="hidden" name="transaction_id" value={transaction.id} />
-                        <button type="submit" title="Remove this item">
-                          <IoMdCloseCircle />
-                        </button>
-                      </fetcher.Form>
+                      {!isPostCutoff && (
+                        <fetcher.Form method="post" action="shop/cancel" className="opacity-0 group-hover:opacity-100 transition-all duration-75 absolute top-1/2 -translate-y-1/2 -right-4 group-hover:-right-5 flex items-center text-lg">
+                          <input type="hidden" name="transaction_id" value={transaction.id} />
+                          <button type="submit" title="Remove this item">
+                            <IoMdCloseCircle />
+                          </button>
+                        </fetcher.Form>
+                      )}
                     </div>
                   </li>
                 )}
               </React.Fragment>
             ))}
           </ul>
+
+          {isPostCutoff && (
+            <p className="text-sm mt-4 opacity-50">
+              The shop has closed as of
+              {" "}
+              {cutoffTime.toLocaleDateString([], {
+                timeZone: "Europe/London",
+              },
+              )}
+              {" "}
+              {cutoffTime.toLocaleTimeString([], {
+                hour: "2-digit", minute: "2-digit",
+                timeZone: "Europe/London",
+              })}
+              {" "}
+              UK time.
+              Your purchase list cannot be modified. Please await further announcement via your registered email or Discord for your reward collection!
+            </p>
+          )}
         </div>
       </div>
 

diff --git a/src/components/Shop.tsx b/src/components/Shop.tsx
@@ -4,6 +4,7 @@ import { useFetcher } from "@remix-run/react";
 import { action as shopPurchaseAction } from "../routes/shop.purchase";
 import Stars from "./Stars";
 import { MdClose } from "react-icons/md";
+import { cutoffTime } from "../cutoff";
 
 type ShopProps = {
   shop_items: ShopItemWithRemaining[];
@@ -27,6 +28,8 @@ export const Shop: FunctionComponent<ShopProps> = ({ shop_items, className }) =>
     }
   }, [fetcher.state, fetcher.data]);
 
+  const isPostCutoff = new Date().getTime() > cutoffTime.getTime();
+
   return (
     <div className={"mx-4 flex flex-col " + className}>
       <h2 className="text-4xl font-display mb-4 relative self-start text-white">
@@ -43,6 +46,28 @@ export const Shop: FunctionComponent<ShopProps> = ({ shop_items, className }) =>
           </button>
         </div>
       )}
+      {isPostCutoff && (
+        <div className="text-white p-4 rounded-lg mb-4 flex flex-row justify-between animate-slidein origin-top bg-[repeating-linear-gradient(-45deg,var(--tw-gradient-stops))] from-christmasRed from-[length:0_10px] to-christmasRedAccent to-[length:10px_20px]">
+          <p className="font-semibold text-lg">
+            The shop has closed as of
+            {" "}
+            {cutoffTime.toLocaleDateString([], {
+              timeZone: "Europe/London",
+            },
+            )}
+            {" "}
+            {cutoffTime.toLocaleTimeString([], {
+              hour: "2-digit", minute: "2-digit",
+              timeZone: "Europe/London",
+            })}
+            {" "}
+            UK time.
+            <br />
+            {" "}
+            Please await further announcement via your registered email or Discord for your reward collection!
+          </p>
+        </div>
+      )}
       <ul className="grid grid-cols-2 grid-rows-3 md:grid-cols-4 xl:grid-rows-2 gap-4">
         {shop_items.map((item, i) => (
           <li key={item.id} className={(i % 3 == 0 ? "bg-christmasGreen" : i % 3 == 1 ? "bg-christmasRed" : "bg-christmasDark") + " transform-gpu overflow-hidden rounded-xl group relative flex flex-col " + (i == 0 ? "row-span-2 col-span-2" : "row-span-1 col-span-2 aspect-[2] xl:col-span-1 xl:aspect-square")}>
@@ -62,10 +87,12 @@ export const Shop: FunctionComponent<ShopProps> = ({ shop_items, className }) =>
               className="absolute bottom-0 w-full translate-y-10 transform-gpu flex justify-between items-center p-4 opacity-0 transition-all duration-150 group-hover:translate-y-0 group-hover:opacity-100"
             >
               <Stars amount={item.star_cost} className="text-christmasBeige" />
-              <fetcher.Form method="post" action="shop/purchase">
-                <input type="hidden" name="shop_item_id" value={item.id} />
-                <button type="submit" className="pointer-events-auto bg-christmasBeigeAccent text-christmasDark rounded-md py-2 px-4 active:scale-95 transition-all duration-75 focus:outline-4 focus:outline-christmasBeigeAccent focus:outline-double">Exchange</button>
-              </fetcher.Form>
+              {!isPostCutoff && (
+                <fetcher.Form method="post" action="shop/purchase">
+                  <input type="hidden" name="shop_item_id" value={item.id} />
+                  <button type="submit" className="pointer-events-auto bg-christmasBeigeAccent text-christmasDark rounded-md py-2 px-4 active:scale-95 transition-all duration-75 focus:outline-4 focus:outline-christmasBeigeAccent focus:outline-double">Exchange</button>
+                </fetcher.Form>
+              )}
             </div>
             <div className="pointer-events-none absolute inset-0 transform-gpu transition-all duration-150 group-hover:bg-black/[.03]" />
             {" "}