Added complete and cancel buttons to PickupEvent Edit Page

Also fixed text wrap issue Also updated Button component to take in class names
acmucsd · Mar 31, 2024 · a67ebee · a67ebee
1 parent ef2a416
commit a67ebee
Show file tree

Hide file tree

Showing 12 changed files with 180 additions and 11 deletions.
diff --git a/src/components/admin/event/AdminPickupEvent/AdminPickupEventForm.tsx b/src/components/admin/event/AdminPickupEvent/AdminPickupEventForm.tsx
@@ -2,12 +2,14 @@ import DetailsFormItem from '@/components/admin/DetailsFormItem';
 import { Button } from '@/components/common';
 import { config, showToast } from '@/lib';
 import { AdminEventManager } from '@/lib/managers';
+import { UUID } from '@/lib/types';
 import { OrderPickupEvent } from '@/lib/types/apiRequests';
 import { PublicEvent, PublicOrderPickupEvent } from '@/lib/types/apiResponses';
 import { reportError } from '@/lib/utils';
 import { DateTime } from 'luxon';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
+import router from 'next/router';
 import { useState } from 'react';
 import { SubmitHandler, useForm } from 'react-hook-form';
 import { BsArrowRight } from 'react-icons/bs';
@@ -22,6 +24,34 @@ interface IProps {
   upcomingEvents: PublicEvent[];
 }
 
+export const completePickupEvent = async (uuid: UUID, token: string) => {
+  try {
+    await AdminEventManager.completePickupEvent({
+      pickupEvent: uuid,
+      token: token,
+    });
+
+    showToast('Pickup Event Completed Successfully!', '');
+    router.push(config.admin.store.pickup);
+  } catch (error) {
+    reportError('Could not complete pickup event', error);
+  }
+};
+
+export const cancelPickupEvent = async (uuid: UUID, token: string) => {
+  try {
+    await AdminEventManager.cancelPickupEvent({
+      pickupEvent: uuid,
+      token: token,
+    });
+
+    showToast('Pickup Event Cancelled Successfully!', '');
+    router.push(config.admin.store.pickup);
+  } catch (error) {
+    reportError('Could not cancel pickup event', error);
+  }
+};
+
 const AdminPickupEventForm = ({ mode, defaultData = {}, token, upcomingEvents }: IProps) => {
   const router = useRouter();
 
@@ -34,6 +64,8 @@ const AdminPickupEventForm = ({ mode, defaultData = {}, token, upcomingEvents }:
     linkedEventUuid: defaultData.linkedEvent?.uuid ?? null,
   };
 
+  const { uuid } = defaultData;
+
   const {
     register,
     handleSubmit,
@@ -131,7 +163,7 @@ const AdminPickupEventForm = ({ mode, defaultData = {}, token, upcomingEvents }:
 
     try {
       await AdminEventManager.deletePickupEvent({
-        event: defaultData.uuid ?? '',
+        pickupEvent: defaultData.uuid ?? '',
         token: token,
 
         onSuccessCallback: () => {
@@ -245,13 +277,38 @@ const AdminPickupEventForm = ({ mode, defaultData = {}, token, upcomingEvents }:
       <div className={style.submitButtons}>
         {mode === 'edit' ? (
           <>
-            <Button submit disabled={loading}>
+            <Button submit disabled={loading} className={style.expandButton}>
               Save changes
             </Button>
-            <Button onClick={resetForm} disabled={loading} destructive>
+            <Button
+              onClick={() => completePickupEvent(uuid ?? '', token)}
+              disabled={loading}
+              className={style.expandButton}
+            >
+              Complete pickup event
+            </Button>
+            <Button
+              onClick={resetForm}
+              disabled={loading}
+              destructive
+              className={style.expandButton}
+            >
               Discard changes
             </Button>
-            <Button onClick={deletePickupEvent} disabled={loading} destructive>
+            <Button
+              onClick={() => cancelPickupEvent(uuid ?? '', token)}
+              disabled={loading}
+              destructive
+              className={style.expandButton}
+            >
+              Cancel pickup event
+            </Button>
+            <Button
+              onClick={deletePickupEvent}
+              disabled={loading}
+              destructive
+              className={style.expandButton}
+            >
               Delete pickup event
             </Button>
           </>

diff --git a/src/components/admin/event/AdminPickupEvent/style.module.scss b/src/components/admin/event/AdminPickupEvent/style.module.scss
@@ -10,6 +10,16 @@
   h1 {
     font-size: 2rem;
   }
+
+  .viewPage {
+    background-color: var(--theme-primary-2);
+    border-radius: 0.5rem;
+    color: var(--theme-background);
+    display: flex;
+    font-weight: bold;
+    gap: 0.5rem;
+    padding: 0.5rem;
+  }
 }
 
 .form {
@@ -22,6 +32,12 @@
 .submitButtons {
   display: flex;
   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,9 +1,8 @@
 export type Styles = {
-  addImage: string;
   defaultThemeColorHex: string;
+  expandButton: string;
   form: string;
   header: string;
-  photos: string;
   submitButtons: string;
   viewPage: string;
 };

diff --git a/src/components/admin/event/ManageEventCard/style.module.scss b/src/components/admin/event/ManageEventCard/style.module.scss
@@ -8,6 +8,9 @@
   min-height: 6rem;
   padding: 1rem;
 
+  white-space: pre-wrap;
+  word-break: break-word;
+
   .coverContainer {
     height: 3rem;
     position: relative;

diff --git a/src/components/admin/store/PickupEventCard/index.tsx b/src/components/admin/store/PickupEventCard/index.tsx
@@ -45,6 +45,13 @@ const PickupEventCard = ({ pickupEvent }: PickupEventCardProps) => {
       <Typography variant="h5/regular" suppressHydrationWarning>
         {formatEventDate(start, end, true)}
       </Typography>
+      {/* <button
+        type="button"
+        className={`${styles.displayButton}`}
+        onClick={() => cancelPickupEvent(uuid, token)}
+      >
+        <Typography variant="h5/bold">Complete Pickup Event</Typography>
+      </button> */}
     </Link>
   );
 };

diff --git a/src/components/admin/store/PickupEventCard/style.module.scss b/src/components/admin/store/PickupEventCard/style.module.scss
@@ -31,3 +31,17 @@
 .cancelled {
   color: var(--theme-danger-1);
 }
+
+.displayButton {
+  border-radius: 1rem;
+  box-shadow: 0 0 4px var(--theme-accent-line-1-transparent);
+  display: flex;
+  flex-direction: row;
+  overflow: hidden;
+  padding: 0.5rem 1rem;
+  transition: 0.3s background-color;
+
+  &.active {
+    background-color: var(--theme-primary-2);
+  }
+}
diff --git a/src/components/admin/store/PickupEventCard/style.module.scss.d.ts b/src/components/admin/store/PickupEventCard/style.module.scss.d.ts
@@ -3,6 +3,7 @@ export type Styles = {
   cancelled: string;
   card: string;
   completed: string;
+  displayButton: string;
   header: string;
   title: string;
 };

diff --git a/src/components/common/Button/index.tsx b/src/components/common/Button/index.tsx
@@ -8,6 +8,7 @@ interface IProps {
   disabled?: boolean;
   size?: 'default' | 'small';
   onClick?: () => void;
+  className?: string;
 }
 
 const Button = (props: PropsWithChildren<IProps>) => {
@@ -19,11 +20,12 @@ const Button = (props: PropsWithChildren<IProps>) => {
     size = 'default',
     onClick,
     children,
+    className,
   } = props;
 
   return (
     <button
-      className={style.button}
+      className={`${style.button} ${className}`}
       type={submit ? 'submit' : 'button'}
       disabled={disabled}
       onClick={onClick}

diff --git a/src/lib/api/EventAPI.ts b/src/lib/api/EventAPI.ts
@@ -3,6 +3,8 @@ import { FillInLater, UUID } from '@/lib/types';
 import { AttendEventRequest, Event, OrderPickupEvent } from '@/lib/types/apiRequests';
 import {
   AttendEventResponse,
+  CancelOrderPickupEventResponse,
+  CompleteOrderPickupEventResponse,
   CreateEventResponse,
   CreatePickupEventResponse,
   EditOrderPickupEventResponse,
@@ -177,6 +179,44 @@ export const deletePickupEvent = async (token: string, pickupEvent: UUID): Promi
   });
 };
 
+export const completePickupEvent = async (
+  token: string,
+  uuid: UUID
+): Promise<CompleteOrderPickupEventResponse> => {
+  const requestUrl = `${config.api.baseUrl}${config.api.endpoints.store.pickup.single}/${uuid}/complete`;
+
+  const response = await axios.post(
+    requestUrl,
+    {},
+    {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    }
+  );
+
+  return response.data.orders;
+};
+
+export const cancelPickupEvent = async (
+  token: string,
+  uuid: UUID
+): Promise<CancelOrderPickupEventResponse> => {
+  const requestUrl = `${config.api.baseUrl}${config.api.endpoints.store.pickup.single}/${uuid}/cancel`;
+
+  const response = await axios.post(
+    requestUrl,
+    {},
+    {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    }
+  );
+
+  return response.data;
+};
+
 export const uploadEventImage = async (
   token: string,
   uuid: UUID,

diff --git a/src/lib/managers/AdminEventManager.ts b/src/lib/managers/AdminEventManager.ts
@@ -2,6 +2,8 @@ import { EventAPI, KlefkiAPI } from '@/lib/api';
 import config from '@/lib/config';
 import type { APIHandlerProps, AuthAPIHandlerProps, URL, UUID } from '@/lib/types';
 import {
+  CancelPickupEventRequest,
+  CompletePickupEventRequest,
   CreateDiscordEventRequest,
   CreateEventRequest,
   DeleteEventRequest,
@@ -14,6 +16,7 @@ import {
 import type {
   NotionEventDetails,
   PublicEvent,
+  PublicOrder,
   PublicOrderPickupEvent,
 } from '@/lib/types/apiResponses';
 
@@ -123,7 +126,6 @@ export const createPickupEvent = async (
 
 interface EditPickupEventRequest {
   pickupEvent: Partial<OrderPickupEvent>;
-  cover?: File;
   uuid: UUID;
 }
 
@@ -144,17 +146,35 @@ export const editPickupEvent = async (
 export const deletePickupEvent = async (
   data: DeletePickupEventRequest & AuthAPIHandlerProps<void>
 ) => {
-  const { onSuccessCallback, onFailCallback, token, event } = data;
+  const { onSuccessCallback, onFailCallback, token, pickupEvent } = data;
 
   try {
-    await EventAPI.deletePickupEvent(token, event);
+    await EventAPI.deletePickupEvent(token, pickupEvent);
 
     onSuccessCallback?.();
   } catch (e) {
     onFailCallback?.(e);
   }
 };
 
+export const completePickupEvent = async (
+  data: CompletePickupEventRequest & AuthAPIHandlerProps<void>
+): Promise<PublicOrder[] | null> => {
+  const { token, pickupEvent } = data;
+
+  const modifiedEvent = await EventAPI.completePickupEvent(token, pickupEvent);
+
+  return modifiedEvent.orders;
+};
+
+export const cancelPickupEvent = async (
+  data: CancelPickupEventRequest & AuthAPIHandlerProps<void>
+) => {
+  const { token, pickupEvent } = data;
+
+  await EventAPI.cancelPickupEvent(token, pickupEvent);
+};
+
 interface PatchEventRequest {
   uuid: UUID;
   cover: File;

diff --git a/src/lib/types/apiRequests.ts b/src/lib/types/apiRequests.ts
@@ -354,7 +354,15 @@ export interface OrderPickupEvent {
 }
 
 export interface DeletePickupEventRequest {
-  event: UUID;
+  pickupEvent: UUID;
+}
+
+export interface CompletePickupEventRequest {
+  pickupEvent: UUID;
+}
+
+export interface CancelPickupEventRequest {
+  pickupEvent: UUID;
 }
 
 export interface OrderPickupEventEdit extends Partial<OrderPickupEvent> {}

diff --git a/src/styles/pages/manage-events.module.scss b/src/styles/pages/manage-events.module.scss
@@ -6,6 +6,8 @@
   .header {
     display: flex;
     justify-content: space-between;
+    white-space: pre-wrap;
+    word-break: break-word;
 
     .buttons {
       display: flex;