Implement cart page (2)

src/components/events/EventCard/index.tsx

@@ -1,41 +1,70 @@
 import { CommunityLogo, Typography } from '@/components/common';
 import EventModal from '@/components/events/EventModal';
 import PointsDisplay from '@/components/events/PointsDisplay';
-import { PublicEvent } from '@/lib/types/apiResponses';
-import { formatEventDate } from '@/lib/utils';
+import {
+  PublicEvent,
+  PublicOrderPickupEvent,
+  PublicOrderPickupEventWithLinkedEvent,
+} from '@/lib/types/apiResponses';
+import { formatEventDate, isOrderPickupEvent } from '@/lib/utils';
 import Image from 'next/image';
 import { useState } from 'react';
 import styles from './style.module.scss';
 
 interface EventCardProps {
-  event: PublicEvent;
+  event: PublicEvent | PublicOrderPickupEvent;
   attended: boolean;
   className?: string;
   showYear?: boolean;
+  borderless?: boolean;
   hideInfo?: boolean;
 }
 
-const EventCard = ({ event, attended, className, showYear, hideInfo }: EventCardProps) => {
-  const { cover, title, start, end, location } = event;
+const EventCard = ({
+  event,
+  attended,
+  className,
+  showYear,
+  borderless,
+  hideInfo,
+}: EventCardProps) => {
+  const { cover, title, start, end, location, committee } = isOrderPickupEvent(event)
+    ? {
+        ...(event.linkedEvent ?? {}),
+        ...event,
+      }
+    : event;
+
   const [expanded, setExpanded] = useState(false);
+  const hasModal = !isOrderPickupEvent(event) || event.linkedEvent;
 
   const displayCover = cover || '/assets/graphics/store/hero-photo.jpg';
 
   return (
     <>
-      <EventModal
-        open={expanded}
-        attended={attended}
-        event={event}
-        onClose={() => setExpanded(false)}
-      />
+      {hasModal && (
+        <EventModal
+          open={expanded}
+          attended={attended}
+          event={
+            isOrderPickupEvent(event)
+              ? (event as PublicOrderPickupEventWithLinkedEvent).linkedEvent
+              : event
+          }
+          onClose={() => setExpanded(false)}
+        />
+      )}
+
       <button
         type="button"
-        className={`${styles.container} ${className || ''}`}
+        className={`${styles.container} ${borderless ? '' : styles.bordered} ${className || ''}`}
         onClick={() => setExpanded(true)}
+        disabled={!hasModal}
       >
         <div className={styles.image}>
-          <PointsDisplay points={event.pointValue} attended={attended} />
+          {!isOrderPickupEvent(event) && (
+            <PointsDisplay points={event.pointValue} attended={attended} />
+          )}
           <Image
             src={displayCover}
             alt="Event Cover Image"
@@ -44,10 +73,10 @@ const EventCard = ({ event, attended, className, showYear, hideInfo }: EventCard
             fill
           />
         </div>
-        {hideInfo ? null : (
+        {!hideInfo && (
           <div className={styles.info}>
             <div className={styles.header}>
-              <CommunityLogo community={event.committee} size={50} />
+              <CommunityLogo community={committee ?? 'General'} size={50} />
               <div className={styles.eventDetails}>
                 <Typography
                   variant="body/medium"

src/components/events/EventCard/style.module.scss

@@ -11,11 +11,20 @@
   transition: all 0.3s;
   width: 20rem;
 
-  &:hover {
+  &.bordered { 
+    border: 1px solid var(--theme-primary-6);
+    border-radius: 10px;
+  }
+
+  &:not([disabled]):hover {
     box-shadow: 0 0 8px var(--theme-primary-6);
     transform: scale(1.025);
   }
 
+  &:disabled {
+    cursor: default;
+  }
+
   .image {
     aspect-ratio: 1920 / 1080;
     flex-shrink: 0;

src/components/events/EventCard/style.module.scss.d.ts

@@ -1,4 +1,5 @@
 export type Styles = {
+  bordered: string;
   container: string;
   eventDetails: string;
   header: string;

src/components/events/EventDetail/index.tsx

@@ -0,0 +1,94 @@
+import { CommunityLogo, Typography } from '@/components/common';
+import CalendarButtons from '@/components/events/CalendarButtons';
+import PointsDisplay from '@/components/events/PointsDisplay';
+import { PublicEvent, PublicOrderPickupEvent } from '@/lib/types/apiResponses';
+import { fixUrl, formatEventDate, isOrderPickupEvent } from '@/lib/utils';
+import CloseIcon from '@/public/assets/icons/close-icon.svg';
+import LinkIcon from '@/public/assets/icons/link.svg';
+import Image from 'next/image';
+import Link from 'next/link';
+import styles from './style.module.scss';
+
+interface EventDetailProps {
+  event: PublicEvent | PublicOrderPickupEvent;
+  attended: boolean;
+  /** controls whether a close button is shown */
+  inModal?: boolean;
+}
+
+const EventDetail = ({ event, attended, inModal = true }: EventDetailProps) => {
+  const { cover, title, start, end, location, committee, pointValue, eventLink, description } =
+    isOrderPickupEvent(event)
+      ? {
+          ...(event.linkedEvent ?? {}),
+          ...event,
+        }
+      : event;
+
+  const displayCover = cover || '/assets/graphics/store/hero-photo.jpg';
+  const uuidForLink = isOrderPickupEvent(event) ? event.linkedEvent?.uuid : event.uuid;
+  const displayEventLink =
+    fixUrl(eventLink ?? '') || (uuidForLink && `https://acmucsd.com/events/${uuidForLink}`) || '';
+  const isUpcomingEvent = new Date(start) > new Date();
+
+  return (
+    <>
+      <div className={styles.image}>
+        {inModal && (
+          <button type="submit" aria-label="Close" className={styles.close}>
+            <CloseIcon aria-hidden className={styles.closeIcon} />
+          </button>
+        )}
+        {pointValue && <PointsDisplay points={pointValue} attended={attended} />}
+        <Image src={displayCover} alt="Event Cover Image" style={{ objectFit: 'cover' }} fill />
+      </div>
+      <div className={styles.contents}>
+        <div className={styles.header}>
+          <div className={styles.eventDetails}>
+            <CommunityLogo community={committee ?? 'General'} size={100} />
+            <div>
+              <Typography
+                className={styles.eventTitle}
+                variant="title/large"
+                style={{ fontWeight: 700 }}
+              >
+                {title}
+              </Typography>
+              <Typography
+                className={styles.eventInfo}
+                variant="title/medium"
+                suppressHydrationWarning
+              >
+                {formatEventDate(start, end, true)}
+              </Typography>
+              <Typography className={styles.eventInfo} variant="title/medium">
+                {location}
+              </Typography>
+            </div>
+          </div>
+
+          {isUpcomingEvent && !isOrderPickupEvent(event) ? <CalendarButtons event={event} /> : null}
+        </div>
+
+        <Typography variant="body/medium" style={{ wordBreak: 'break-word' }}>
+          {description}
+        </Typography>
+        {displayEventLink && (
+          <Link className={styles.link} href={displayEventLink}>
+            <div style={{ width: 11 }}>
+              <LinkIcon aria-hidden />
+            </div>
+            <Typography
+              variant="body/medium"
+              style={{ color: 'var(--theme-primary-2)', wordBreak: 'break-all' }}
+            >
+              {displayEventLink}
+            </Typography>
+          </Link>
+        )}
+      </div>
+    </>
+  );
+};
+
+export default EventDetail;

src/components/events/EventModal/index.tsx

@@ -1,13 +1,6 @@
-import { CommunityLogo, Modal, Typography } from '@/components/common';
-import CalendarButtons from '@/components/events/CalendarButtons';
-import PointsDisplay from '@/components/events/PointsDisplay';
+import { Modal } from '@/components/common';
+import EventDetail from '@/components/events/EventDetail';
 import { PublicEvent } from '@/lib/types/apiResponses';
-import { fixUrl, formatEventDate } from '@/lib/utils';
-import CloseIcon from '@/public/assets/icons/close-icon.svg';
-import LinkIcon from '@/public/assets/icons/link.svg';
-import Image from 'next/image';
-import Link from 'next/link';
-import styles from './style.module.scss';
 
 interface EventModalProps {
   open: boolean;
@@ -17,64 +10,9 @@ interface EventModalProps {
 }
 
 const EventModal = ({ open, attended, event, onClose }: EventModalProps) => {
-  const { cover, title, start, end, location, description, eventLink } = event;
-
-  const displayCover = cover || '/assets/graphics/store/hero-photo.jpg';
-  const displayEventLink = fixUrl(eventLink) || `https://acmucsd.com/events/${event.uuid}`;
-  const isUpcomingEvent = new Date(start) > new Date();
-
   return (
     <Modal open={open} onClose={onClose} bottomSheet>
-      <div className={styles.image}>
-        <button type="submit" aria-label="Close" className={styles.close}>
-          <CloseIcon aria-hidden className={styles.closeIcon} />
-        </button>
-        <PointsDisplay points={event.pointValue} attended={attended} />
-        <Image src={displayCover} alt="Event Cover Image" style={{ objectFit: 'cover' }} fill />
-      </div>
-      <div className={styles.contents}>
-        <div className={styles.header}>
-          <div className={styles.eventDetails}>
-            <CommunityLogo community={event.committee} size={100} />
-            <div>
-              <Typography
-                className={styles.eventTitle}
-                variant="title/large"
-                style={{ fontWeight: 700 }}
-              >
-                {title}
-              </Typography>
-              <Typography
-                className={styles.eventInfo}
-                variant="title/medium"
-                suppressHydrationWarning
-              >
-                {formatEventDate(start, end, true)}
-              </Typography>
-              <Typography className={styles.eventInfo} variant="title/medium">
-                {location}
-              </Typography>
-            </div>
-          </div>
-
-          {isUpcomingEvent ? <CalendarButtons event={event} /> : null}
-        </div>
-
-        <Typography variant="body/medium" style={{ wordBreak: 'break-word' }}>
-          {description}
-        </Typography>
-        <Link className={styles.link} href={displayEventLink}>
-          <div style={{ width: 11 }}>
-            <LinkIcon role="link" />
-          </div>
-          <Typography
-            variant="body/medium"
-            style={{ color: 'var(--theme-primary-2)', wordBreak: 'break-all' }}
-          >
-            {displayEventLink}
-          </Typography>
-        </Link>
-      </div>
+      <EventDetail event={event} attended={attended} />
     </Modal>
   );
 };