Implement cart page (2)

src/components/common/Modal/index.tsx

@@ -34,19 +34,27 @@ const Modal = ({ title, open, onClose, children }: ModalProps) => {
           e.currentTarget.close();
         }
       }}
-      onClose={onClose}
+      onClose={e => {
+        e.stopPropagation();
+        onClose();
+      }}
     >
-      <form method="dialog" className={`${styles.modalBody} ${title ? styles.hasHeader : ''}`}>
+      <div className={`${styles.modalBody} ${title ? styles.hasHeader : ''}`}>
         {title && (
           <div className={styles.header}>
             <h1>{title}</h1>
-            <button type="submit" className={styles.close} aria-label="Close">
+            <button
+              type="button"
+              onClick={() => ref.current?.close()}
+              className={styles.close}
+              aria-label="Close"
+            >
               <CloseIcon aria-hidden />
             </button>
           </div>
         )}
         {children}
-      </form>
+      </div>
     </dialog>
   );
 };

src/components/store/CartItemCard/index.tsx

@@ -0,0 +1,85 @@
+import { Typography } from '@/components/common';
+import Diamonds from '@/components/store/Diamonds';
+import StoreModal from '@/components/store/StoreModal';
+import { config } from '@/lib';
+import { UUID } from '@/lib/types';
+import { ClientCartItem } from '@/lib/types/client';
+import { capitalize } from '@/lib/utils';
+import Image from 'next/image';
+import Link from 'next/link';
+import styles from './style.module.scss';
+
+interface CartItemCardProps {
+  item: ClientCartItem;
+  removeItem?: (optionUUID: UUID) => void;
+  removable: boolean;
+}
+
+const CartItemCard = ({ item, removeItem, removable }: CartItemCardProps) => {
+  const itemPage = `${config.itemRoute}${item.uuid}`;
+
+  return (
+    <div className={styles.cartItem}>
+      {item.merchPhotos?.[0] && (
+        <div className={styles.leftCol}>
+          <Link href={itemPage}>
+            <div className={styles.imageWrapper}>
+              <Image
+                src={item.merchPhotos[0].uploadedPhoto}
+                alt={item.itemName}
+                sizes={`(max-width: ${config.cssVars.breakpointMd}) 100px, 150px`}
+                fill
+              />
+            </div>
+          </Link>
+        </div>
+      )}
+      <div className={styles.rightCol}>
+        <div className={styles.cartItemInfo}>
+          <div className={styles.title}>
+            <Link href={itemPage}>
+              <Typography variant="h4/medium" component="h3">
+                {item.itemName}
+              </Typography>
+            </Link>
+            <Diamonds count={item.option.price * item.quantity ?? 0} className={styles.price} />
+          </div>
+
+          {item.option.metadata && (
+            <Typography variant="h5/bold" component="p">
+              {capitalize(item.option.metadata?.type)}&nbsp;
+              <Typography variant="h5/regular" component="span">
+                {item.option.metadata?.value}
+              </Typography>
+            </Typography>
+          )}
+          <Typography variant="h5/bold" component="p">
+            Quantity:&nbsp;
+            <Typography variant="h5/regular" component="span">
+              {item.quantity}
+            </Typography>
+          </Typography>
+        </div>
+      </div>
+      {removable && (
+        <StoreModal
+          opener={
+            <button type="button" className={styles.removeBtn}>
+              <Typography variant="h5/regular" component="span">
+                Remove Item
+              </Typography>
+            </button>
+          }
+          title="Are you sure you want to remove this item?"
+          onConfirm={() => {
+            setTimeout(() => removeItem && removeItem(item.option.uuid), 100);
+          }}
+        >
+          <CartItemCard item={item} removable={false} />
+        </StoreModal>
+      )}
+    </div>
+  );
+};
+
+export default CartItemCard;

src/components/store/CartItemCard/style.module.scss

@@ -0,0 +1,89 @@
+@use 'src/styles/vars.scss' as vars;
+
+.cartItem {
+  --desktop-image-size: 150px;
+  --mobile-image-size: 100px;
+  display: grid;
+  gap: 1.5rem;
+  grid-template-areas: 
+    "left right"
+    "left remove";
+  grid-template-columns: var(--desktop-image-size) 1fr;
+  padding: 0.75rem 1rem;
+
+  @media (max-width: vars.$breakpoint-md) {
+    grid-template-areas: 
+    "left right"
+    "remove right";
+    grid-template-columns: var(--mobile-image-size) 1fr;
+  }
+
+  .leftCol {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    grid-area: left;
+    justify-content: space-between;
+
+    .imageWrapper {
+      height: var(--desktop-image-size);
+      position: relative;
+      width: var(--desktop-image-size);
+
+      @media (max-width: vars.$breakpoint-md) {
+        height: var(--mobile-image-size);
+        width: var(--mobile-image-size);
+      }
+    }
+  }
+
+  .rightCol {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    grid-area: right;
+    justify-content: space-between;
+
+    .cartItemInfo {
+      align-self: stretch;
+      display: flex;
+      flex-direction: column;
+      flex-grow: 1;
+      gap: 0.5rem;
+
+      .title {
+        align-items: baseline;
+        display: flex;
+        gap: 1rem;
+        justify-content: space-between;
+
+        @media (max-width: vars.$breakpoint-md) {
+          flex-direction: column;
+        }
+
+        h3:hover {
+          text-decoration: underline;
+        }
+
+        .price {
+          justify-self: flex-end;
+          white-space: nowrap;
+        }
+      }
+    }
+  }
+
+  .removeBtn {
+    align-self: end;
+    background-color: transparent;
+    color: var(--theme-danger-1);
+    grid-area: remove;
+    padding: 0;
+    width: fit-content;
+
+    @media (max-width: vars.$breakpoint-md) {
+      margin: auto;
+    }
+  }
+}

src/components/store/CartItemCard/style.module.scss.d.ts

@@ -0,0 +1,16 @@
+export type Styles = {
+  cartItem: string;
+  cartItemInfo: string;
+  imageWrapper: string;
+  leftCol: string;
+  price: string;
+  removeBtn: string;
+  rightCol: string;
+  title: string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

src/components/store/PickupEventPicker/index.tsx

@@ -0,0 +1,64 @@
+import { Typography } from '@/components/common';
+import EventCard from '@/components/events/EventCard';
+import { PublicEvent } from '@/lib/types/apiResponses';
+import ArrowLeft from '@/public/assets/icons/arrow-left.svg';
+import ArrowRight from '@/public/assets/icons/arrow-right.svg';
+import styles from './style.module.scss';
+
+interface EventPickerProps {
+  events: PublicEvent[];
+  eventIndex: number;
+  setEventIndex: (...args: any[]) => any;
+  active: boolean;
+}
+
+const PickupEventPicker = ({ events, eventIndex, setEventIndex, active }: EventPickerProps) => {
+  return (
+    <div className={styles.eventPicker}>
+      <div className={styles.window}>
+        {events.length > 0 ? (
+          <div
+            className={styles.slider}
+            style={{ transform: `translateX(${-320 * eventIndex}px)` }}
+          >
+            {events.map(event => (
+              <EventCard key={event.uuid} event={event} attended={false} />
+            ))}
+          </div>
+        ) : (
+          <div className={styles.noEvents}>
+            <Typography variant="h3/medium" component="span">
+              No upcoming pickup events. Check back later!
+            </Typography>
+          </div>
+        )}
+      </div>
+
+      {active && (
+        <div className={styles.eventNavigation}>
+          <button
+            type="button"
+            onClick={() => setEventIndex((i: number) => (i > 0 ? i - 1 : 0))}
+            aria-label="Previous Event"
+            disabled={eventIndex <= 0}
+          >
+            <ArrowLeft />
+          </button>
+          <Typography variant="h5/regular" component="p">{`${eventIndex + 1}/${
+            events.length
+          }`}</Typography>
+          <button
+            type="button"
+            onClick={() => setEventIndex((i: number) => Math.min(i + 1, events.length - 1))}
+            aria-label="Next Event"
+            disabled={eventIndex >= events.length - 1}
+          >
+            <ArrowRight />
+          </button>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default PickupEventPicker;

src/components/store/PickupEventPicker/style.module.scss

@@ -0,0 +1,57 @@
+.eventPicker {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+
+  .window {
+    height: 270px;
+    overflow: hidden;
+    position: relative;
+    width: 320px;
+
+    .slider {
+      display: flex;
+      position: absolute;
+      transition: transform 0.3s ease-in-out;
+    }
+
+    .noEvents {
+      align-items: center;
+      color: var(--theme-text-on-background-3);
+      display: flex;
+      height: 100%;
+      text-align: center;
+      width: 100%
+    }
+  }
+
+  .eventNavigation {
+    align-items: center;
+    align-self: stretch;
+    display: flex;
+    justify-content: space-between;
+
+    button {
+      background-color: var(--theme-surface-1);
+      border-radius: 0.9375rem;
+      display: flex;
+      height: 1.875rem;
+      margin: 0.5rem 1rem;
+      padding: 0;
+      width: 1.875rem;
+
+      svg {
+        color: var(--theme-text-on-background-3);
+        transition: color 0.25s ease;
+      }
+
+      &:disabled {
+        cursor: default;
+
+        svg {
+          color: transparent
+        }
+      }
+    }
+  }
+}

src/components/store/PickupEventPicker/style.module.scss.d.ts

@@ -0,0 +1,13 @@
+export type Styles = {
+  eventNavigation: string;
+  eventPicker: string;
+  noEvents: string;
+  slider: string;
+  window: string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;