Moved complete and edit buttons to single pickup event page

Updated button styling for pickup event page Updated common Button component styling to auto expand to content Hide the complete/cancel buttons if the event isn't active
acmucsd · Apr 1, 2024 · 4844025 · 4844025
1 parent 899feed
commit 4844025
Show file tree

Hide file tree

Showing 8 changed files with 61 additions and 76 deletions.
diff --git a/src/components/admin/event/AdminPickupEvent/AdminPickupEventForm.tsx b/src/components/admin/event/AdminPickupEvent/AdminPickupEventForm.tsx
@@ -5,6 +5,7 @@ import { AdminEventManager } from '@/lib/managers';
 import { UUID } from '@/lib/types';
 import { OrderPickupEvent } from '@/lib/types/apiRequests';
 import { PublicEvent, PublicOrderPickupEvent } from '@/lib/types/apiResponses';
+import { OrderPickupEventStatus } from '@/lib/types/enums';
 import { reportError } from '@/lib/utils';
 import { DateTime } from 'luxon';
 import Link from 'next/link';
@@ -64,7 +65,7 @@ const AdminPickupEventForm = ({ mode, defaultData = {}, token, upcomingEvents }:
     linkedEventUuid: defaultData.linkedEvent?.uuid ?? null,
   };
 
-  const { uuid } = defaultData;
+  const { uuid, status } = defaultData;
 
   const {
     register,
@@ -277,38 +278,28 @@ const AdminPickupEventForm = ({ mode, defaultData = {}, token, upcomingEvents }:
       <div className={style.submitButtons}>
         {mode === 'edit' ? (
           <>
-            <Button submit disabled={loading} className={style.expandButton}>
+            <Button submit disabled={loading}>
               Save changes
             </Button>
-            <Button
-              onClick={() => completePickupEvent(uuid ?? '', token)}
-              disabled={loading}
-              className={style.expandButton}
-            >
-              Complete pickup event
-            </Button>
-            <Button
-              onClick={resetForm}
-              disabled={loading}
-              destructive
-              className={style.expandButton}
-            >
+
+            <Button onClick={resetForm} disabled={loading} destructive>
               Discard changes
             </Button>
-            <Button
-              onClick={() => cancelPickupEvent(uuid ?? '', token)}
-              disabled={loading}
-              destructive
-              className={style.expandButton}
-            >
-              Cancel pickup event
-            </Button>
-            <Button
-              onClick={deletePickupEvent}
-              disabled={loading}
-              destructive
-              className={style.expandButton}
-            >
+            {status === OrderPickupEventStatus.ACTIVE ? (
+              <Button onClick={() => completePickupEvent(uuid ?? '', token)} disabled={loading}>
+                Complete pickup event
+              </Button>
+            ) : null}
+            {status === OrderPickupEventStatus.ACTIVE ? (
+              <Button
+                onClick={() => cancelPickupEvent(uuid ?? '', token)}
+                disabled={loading}
+                destructive
+              >
+                Cancel pickup event
+              </Button>
+            ) : null}
+            <Button onClick={deletePickupEvent} disabled={loading} destructive>
               Delete pickup event
             </Button>
           </>

diff --git a/src/components/admin/event/AdminPickupEvent/style.module.scss b/src/components/admin/event/AdminPickupEvent/style.module.scss
@@ -31,13 +31,9 @@
 
 .submitButtons {
   display: flex;
+  flex-wrap: wrap;
   gap: 1rem;
   height: auto;
-
-  .expandButton {
-    height: auto;
-    min-height: 2.5rem;
-  }
 }
 
 :export {

diff --git a/src/components/admin/event/AdminPickupEvent/style.module.scss.d.ts b/src/components/admin/event/AdminPickupEvent/style.module.scss.d.ts
@@ -1,6 +1,5 @@
 export type Styles = {
   defaultThemeColorHex: string;
-  expandButton: string;
   form: string;
   header: string;
   submitButtons: string;

diff --git a/src/components/admin/store/PickupEventCard/index.tsx b/src/components/admin/store/PickupEventCard/index.tsx
@@ -1,13 +1,8 @@
-import {
-  cancelPickupEvent,
-  completePickupEvent,
-} from '@/components/admin/event/AdminPickupEvent/AdminPickupEventForm';
 import { Typography, type Variant } from '@/components/common';
 import { config } from '@/lib';
 import { PublicOrderPickupEvent } from '@/lib/types/apiResponses';
 import { OrderPickupEventStatus } from '@/lib/types/enums';
 import { formatEventDate } from '@/lib/utils';
-import { Button } from '@mui/material';
 import Link from 'next/link';
 import styles from './style.module.scss';
 
@@ -33,10 +28,9 @@ export const PickupEventStatus = ({ status, variant }: PickupEventStatusProps) =
 
 interface PickupEventCardProps {
   pickupEvent: PublicOrderPickupEvent;
-  token: string;
 }
 
-const PickupEventCard = ({ pickupEvent, token }: PickupEventCardProps) => {
+const PickupEventCard = ({ pickupEvent }: PickupEventCardProps) => {
   const { title, start, end, orders, status, uuid } = pickupEvent;
 
   return (
@@ -51,22 +45,6 @@ const PickupEventCard = ({ pickupEvent, token }: PickupEventCardProps) => {
       <Typography variant="h5/regular" suppressHydrationWarning>
         {formatEventDate(start, end, true)}
       </Typography>
-      <Button
-        type="button"
-        className={`${styles.displayButton}`}
-        onClick={() => completePickupEvent(uuid, token)}
-      >
-        <Typography variant="h5/bold">Complete Pickup Event</Typography>
-      </Button>
-      <Button
-        type="button"
-        className={`${styles.displayButton}`}
-        onClick={() => {
-          cancelPickupEvent(uuid, token);
-        }}
-      >
-        <Typography variant="h5/bold">Cancel Pickup Event</Typography>
-      </Button>
     </Link>
   );
 };

diff --git a/src/components/common/Button/style.module.scss b/src/components/common/Button/style.module.scss
@@ -8,19 +8,22 @@
   color: #fff;
   cursor: pointer;
   display: flex;
-  height: 2rem;
+  height: auto;
   justify-content: center;
+  min-height: 2rem;
   padding: 4px 1rem;
   transition: 0.3s ease-in-out transform;
 
   width: fit-content;
 
   &[data-size='default'] {
-    height: 2.5rem;
+    height: auto;
+    min-height: 2.5rem;
   }
 
   &[data-size='small'] {
-    height: 2rem;
+    height: auto;
+    min-height: 2rem;
   }
 
   &[data-variant='primary'] {

diff --git a/src/lib/api/EventAPI.ts b/src/lib/api/EventAPI.ts
@@ -3,7 +3,6 @@ import { FillInLater, UUID } from '@/lib/types';
 import { AttendEventRequest, Event, OrderPickupEvent } from '@/lib/types/apiRequests';
 import {
   AttendEventResponse,
-  CancelOrderPickupEventResponse,
   CompleteOrderPickupEventResponse,
   CreateEventResponse,
   CreatePickupEventResponse,
@@ -198,10 +197,7 @@ export const completePickupEvent = async (
   return response.data.orders;
 };
 
-export const cancelPickupEvent = async (
-  token: string,
-  uuid: UUID
-): Promise<CancelOrderPickupEventResponse> => {
+export const cancelPickupEvent = async (token: string, uuid: UUID): Promise<void> => {
   const requestUrl = `${config.api.baseUrl}${config.api.endpoints.store.pickup.single}/${uuid}/cancel`;
 
   const response = await axios.post(

diff --git a/src/pages/admin/store/pickup/[uuid].tsx b/src/pages/admin/store/pickup/[uuid].tsx
@@ -1,16 +1,20 @@
+import {
+  cancelPickupEvent,
+  completePickupEvent,
+} from '@/components/admin/event/AdminPickupEvent/AdminPickupEventForm';
 import {
   PickupEventStatus,
   PickupOrdersFulfillDisplay,
   PickupOrdersPrepareDisplay,
 } from '@/components/admin/store';
-import { Typography } from '@/components/common';
+import { Button, Typography } from '@/components/common';
 import { EventCard } from '@/components/events';
 import { StoreAPI } from '@/lib/api';
 import config from '@/lib/config';
 import withAccessType from '@/lib/hoc/withAccessType';
 import { CookieService, PermissionService } from '@/lib/services';
 import { PublicOrderPickupEvent } from '@/lib/types/apiResponses';
-import { CookieType } from '@/lib/types/enums';
+import { CookieType, OrderPickupEventStatus } from '@/lib/types/enums';
 import { formatEventDate } from '@/lib/utils';
 import styles from '@/styles/pages/StorePickupEventDetailsPage.module.scss';
 import { GetServerSideProps } from 'next';
@@ -20,9 +24,10 @@ import { useState } from 'react';
 
 interface PickupEventDetailsPageProps {
   pickupEvent: PublicOrderPickupEvent;
+  token: string;
 }
 
-const PickupEventDetailsPage = ({ pickupEvent }: PickupEventDetailsPageProps) => {
+const PickupEventDetailsPage = ({ pickupEvent, token }: PickupEventDetailsPageProps) => {
   const { uuid, status, title, start, end, orderLimit, description, linkedEvent, orders } =
     pickupEvent;
   const [ordersView, setOrdersView] = useState<'fulfill' | 'prepare'>('fulfill');
@@ -53,13 +58,31 @@ const PickupEventDetailsPage = ({ pickupEvent }: PickupEventDetailsPageProps) =>
           <div>
             <PickupEventStatus status={status} variant="h3/bold" />
             <Typography variant="h1/bold">{title}</Typography>
-            <button
-              type="button"
+            <Button
               className={`${styles.displayButton}`}
               onClick={() => router.push(`${config.admin.store.pickupEdit}/${uuid}`)}
             >
               <Typography variant="h5/bold">Edit Pickup Event</Typography>
-            </button>
+            </Button>
+            {status === OrderPickupEventStatus.ACTIVE ? (
+              <Button
+                className={`${styles.displayButton}`}
+                onClick={() => completePickupEvent(uuid, token)}
+              >
+                <Typography variant="h5/bold">Complete Pickup Event</Typography>
+              </Button>
+            ) : null}
+            {status === OrderPickupEventStatus.ACTIVE ? (
+              <Button
+                className={`${styles.displayButton}`}
+                onClick={() => {
+                  cancelPickupEvent(uuid, token);
+                }}
+                destructive
+              >
+                <Typography variant="h5/bold">Cancel Pickup Event</Typography>
+              </Button>
+            ) : null}
             <Typography variant="h4/regular" suppressHydrationWarning>
               {formatEventDate(start, end, true)}
             </Typography>
@@ -110,7 +133,7 @@ const getServerSidePropsFunc: GetServerSideProps = async ({ params, req, res })
         return aName.localeCompare(bName);
       });
     return {
-      props: { title: pickupEvent.title, pickupEvent },
+      props: { title: pickupEvent.title, pickupEvent, token },
     };
   } catch (e) {
     return { notFound: true };

diff --git a/src/pages/admin/store/pickup/index.tsx b/src/pages/admin/store/pickup/index.tsx
@@ -14,10 +14,9 @@ import { useState } from 'react';
 interface AdminPickupPageProps {
   futurePickupEvents: PublicOrderPickupEvent[];
   pastPickupEvents: PublicOrderPickupEvent[];
-  token: string;
 }
 
-const AdminPickupPage = ({ futurePickupEvents, pastPickupEvents, token }: AdminPickupPageProps) => {
+const AdminPickupPage = ({ futurePickupEvents, pastPickupEvents }: AdminPickupPageProps) => {
   const [display, setDisplay] = useState<'past' | 'future'>('future');
   const displayPickupEvents = display === 'past' ? pastPickupEvents : futurePickupEvents;
   return (
@@ -54,7 +53,7 @@ const AdminPickupPage = ({ futurePickupEvents, pastPickupEvents, token }: AdminP
       </div>
       <div className={styles.cardContainer}>
         {displayPickupEvents.map(pickupEvent => (
-          <PickupEventCard pickupEvent={pickupEvent} key={pickupEvent.uuid} token={token} />
+          <PickupEventCard pickupEvent={pickupEvent} key={pickupEvent.uuid} />
         ))}
       </div>
     </div>