Reordered checkout layout for store (#263)

* Added new component for pickup dropdown for desktop view

* Conditionally adds visible overflow for desktop

* Removed min height

src/components/store/PickupEventDropdown/index.tsx

@@ -0,0 +1,44 @@
+import PickupEventDetail from '@/components/store/PickupEventDetail';
+import { Dropdown, Typography } from '@/components/common';
+import { PublicOrderPickupEvent } from '@/lib/types/apiResponses';
+import { formatEventDate } from '@/lib/utils';
+import styles from './style.module.scss';
+
+interface EventPickerProps {
+  events: PublicOrderPickupEvent[];
+  eventIndex: number;
+  setEventIndex: (...args: any[]) => any;
+}
+
+const PickupEventDropdown = ({ events, eventIndex, setEventIndex }: EventPickerProps) => {
+  return (
+    <div className={styles.eventPicker}>
+      {events.length > 0 ? (
+        <div className={styles.window}>
+          <PickupEventDetail pickupEvent={events[eventIndex] as PublicOrderPickupEvent} />
+          <Dropdown
+            className={styles.dropdown}
+            name="schedulePickup"
+            ariaLabel="Select a pickup event"
+            options={events.map((e, index) => {
+              return {
+                value: index.toString(),
+                label: `${e.title} (${formatEventDate(e.start, e.end)})`,
+              };
+            })}
+            value={eventIndex.toString()}
+            onChange={v => setEventIndex(Number(v))}
+          />
+        </div>
+      ) : (
+        <div className={styles.noEvents}>
+          <Typography variant="h3/medium" component="span">
+            No upcoming pickup events. Check back later!
+          </Typography>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default PickupEventDropdown;

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

@@ -0,0 +1,41 @@
+@use 'src/styles/vars.scss' as vars;
+
+.eventPicker {
+  display: flex;
+  flex-direction: column;
+
+  .window {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+    height: 100%;
+    padding: 2rem;
+
+    .dropdown {
+      background-color: var(--theme-surface-1);
+      border-radius: 1rem;
+      line-height: 2rem;
+      padding: 1rem;
+
+      select {
+        font-weight: normal;
+      }
+
+      option,
+      button,
+      div {
+        background-color: var(--theme-surface-1);
+
+        :hover {
+          background-color: var(--theme-surface-2);
+        }
+      }
+    }
+  }
+
+  .noEvents {
+    color: var(--theme-text-on-background-3);
+    margin: auto;
+    text-align: center;
+  }
+}

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

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

src/components/store/index.ts

@@ -13,6 +13,7 @@ export { default as OrderCard } from './OrderCard';
 export { default as OrdersDisplay } from './OrdersDisplay';
 export { default as PickupEventDetail } from './PickupEventDetail';
 export { default as PickupEventPicker } from './PickupEventPicker';
+export { default as PickupEventDropdown } from './PickupEventDropdown';
 export { default as StoreConfirmModal } from './StoreConfirmModal';
 export { default as StoreEditButton } from './StoreEditButton';
 export { default as Navbar } from './StoreNavbar';

src/pages/store/cart.tsx

@@ -4,6 +4,7 @@ import {
   Diamonds,
   Navbar,
   PickupEventDetail,
+  PickupEventDropdown,
   PickupEventPicker,
   StoreConfirmModal,
 } from '@/components/store';
@@ -186,12 +187,21 @@ const StoreCartPage = ({ user: { credits }, savedCart, pickupEvents }: CartPageP
                 {cartState !== CartState.CONFIRMED ? 'Choose Pickup Event' : 'Pickup Event Details'}
               </Typography>
             </div>
-            <PickupEventPicker
-              events={pickupEvents}
-              eventIndex={pickupIndex}
-              setEventIndex={setPickupIndex}
-              active={cartState !== CartState.CONFIRMED}
-            />
+            <div className={styles.mobile}>
+              <PickupEventPicker
+                events={pickupEvents}
+                eventIndex={pickupIndex}
+                setEventIndex={setPickupIndex}
+                active={cartState !== CartState.CONFIRMED}
+              />
+            </div>
+            <div className={styles.desktop}>
+              <PickupEventDropdown
+                events={pickupEvents}
+                eventIndex={pickupIndex}
+                setEventIndex={setPickupIndex}
+              />
+            </div>
           </div>
         )}
 

src/styles/pages/store/cart/index.module.scss

@@ -8,27 +8,26 @@
   max-width: 81rem;
 
   .content {
-    align-items: start;
     display: grid;
     grid-column-gap: 2rem;
     grid-template-areas:
-      'title placeOrder'
-      'confirmation event'
-      'items event'
+      'title title'
+      'confirmation confirmation'
       'items summary'
-      'items warning';
+      'event placeOrder'
+      'warning placeOrder';
     grid-template-columns: 1fr 20rem;
     grid-template-rows: auto auto auto auto 1fr;
 
     @media screen and (max-width: vars.$breakpoint-md) {
       grid-template-areas:
         'title'
-        'placeOrder'
         'warning'
         'confirmation'
         'event'
         'items'
-        'summary';
+        'summary'
+        'placeOrder';
       grid-template-columns: 1fr;
     }
 
@@ -165,8 +164,29 @@
     }
 
     .eventPicker {
+      background-color: var(--theme-elevated-background);
       grid-area: event;
       margin-bottom: 2rem;
+
+      @media screen and (min-width: vars.$breakpoint-md) {
+        overflow: visible;
+      }
+
+      .mobile {
+        display: none;
+
+        @media screen and (max-width: vars.$breakpoint-md) {
+          display: block;
+        }
+      }
+
+      .desktop {
+        display: block;
+
+        @media screen and (max-width: vars.$breakpoint-md) {
+          display: none;
+        }
+      }
     }
 
     .warning {

src/styles/pages/store/cart/index.module.scss.d.ts

@@ -4,10 +4,12 @@ export type Styles = {
   confirming: string;
   container: string;
   content: string;
+  desktop: string;
   emptyCart: string;
   eventPicker: string;
   header: string;
   items: string;
+  mobile: string;
   pickupEventDetail: string;
   placeOrder: string;
   points: string;