Checkout Page Updates (#523)

* Sort PickupEvents by Start Date * Add Independent Checkout Styling
acmucsd · Jan 11, 2022 · 3617f49 · 3617f49
1 parent f3a7c85
commit 3617f49
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 21 deletions.
diff --git a/src/store/components/AdminFulfillPage/index.tsx b/src/store/components/AdminFulfillPage/index.tsx
@@ -38,10 +38,12 @@ const AdminFulfillPage: React.FC<AdminFulfillPageProps> = (props) => {
             <p className="admin-fulfill-page-hint">Select a pickup event to begin fulfillment for:</p>
             <StoreDropdown
               placeholder="Select a pickup event..."
-              options={pickupEvents.map((event) => ({
-                label: `${event.title} from ${moment(event.start).format('MMM D[,] LT')} to ${moment(event.end).format('MMM D[,] LT')}`,
-                value: event.uuid,
-              }))}
+              options={pickupEvents
+                .sort((a, b) => moment(a.start).diff(moment(b.start)))
+                .map((event) => ({
+                  label: `${event.title} from ${moment(event.start).format('MMM D[,] LT')} to ${moment(event.end).format('MMM D[,] LT')}`,
+                  value: event.uuid,
+                }))}
               onChange={(option) => {
                 setUuid(option.value);
               }}

diff --git a/src/store/components/AdminPickupPage/index.tsx b/src/store/components/AdminPickupPage/index.tsx
@@ -181,10 +181,12 @@ const AdminPickupPage: React.FC<AdminPickupPageProps> = (props) => {
         <p className="admin-pickup-page-hint">Select a pickup event to edit:</p>
         <StoreDropdown
           placeholder="Select a pickup event..."
-          options={pickupEvents.map((event) => ({
-            label: `${event.title} from ${moment(event.start).format('MMM D[,] LT')} to ${moment(event.end).format('MMM D[,] LT')}`,
-            value: event.uuid,
-          }))}
+          options={pickupEvents
+            .sort((a, b) => moment(a.start).diff(moment(b.start)))
+            .map((event) => ({
+              label: `${event.title} from ${moment(event.start).format('MMM D[,] LT')} to ${moment(event.end).format('MMM D[,] LT')}`,
+              value: event.uuid,
+            }))}
           onChange={(option) => {
             setUuid(option.value);
           }}

diff --git a/src/store/components/AdminPreparePage/index.tsx b/src/store/components/AdminPreparePage/index.tsx
@@ -29,10 +29,12 @@ const AdminPreparePage: React.FC<AdminPreparePageProps> = (props) => {
           <p className="admin-prepare-page-hint">Select a pickup event to begin preparation for:</p>
           <StoreDropdown
             placeholder="Select a pickup event..."
-            options={pickupEvents.map((event) => ({
-              label: `${event.title} from ${moment(event.start).format('MMM D[,] LT')} to ${moment(event.end).format('MMM D[,] LT')}`,
-              value: event.uuid,
-            }))}
+            options={pickupEvents
+              .sort((a, b) => moment(a.start).diff(moment(b.start)))
+              .map((event) => ({
+                label: `${event.title} from ${moment(event.start).format('MMM D[,] LT')} to ${moment(event.end).format('MMM D[,] LT')}`,
+                value: event.uuid,
+              }))}
             onChange={(option) => {
               setUuid(option.value);
             }}

diff --git a/src/store/components/CheckoutPage/index.tsx b/src/store/components/CheckoutPage/index.tsx
@@ -8,6 +8,7 @@ import StoreButton from '../StoreButton';
 import StoreDropdown from '../StoreDropdown';
 import StoreHeader from '../StoreHeader';
 import { fetchService, notify } from '../../../utils';
+import './style.less';
 
 type CheckoutPageProps = {
   cart: CartItem[];
@@ -38,14 +39,16 @@ const CheckoutPage: React.FC<CheckoutPageProps> = ({ cart, getFuturePickup, clea
   return (
     <>
       <StoreHeader breadcrumb breadcrumbTitle="Cart" breadcrumbLocation="/store/cart" showBalance />
-      <div className="cart-page">
+      <div className="checkout-page">
         <CartDisplay items={cart} writable={false} />
         <StoreDropdown
           placeholder="Select a pickup event..."
-          options={pickupEvents.map((event) => ({
-            label: `${event.title} from ${moment(event.start).format('MMM D[,] LT')} to ${moment(event.end).format('MMM D[,] LT')}`,
-            value: event.uuid,
-          }))}
+          options={pickupEvents
+            .sort((a, b) => moment(a.start).diff(moment(b.start)))
+            .map((event) => ({
+              label: `${event.title} from ${moment(event.start).format('MMM D[,] LT')} to ${moment(event.end).format('MMM D[,] LT')}`,
+              value: event.uuid,
+            }))}
           onChange={(option) => {
             setEventUUID(option.value);
           }}

diff --git a/src/store/components/CheckoutPage/style.less b/src/store/components/CheckoutPage/style.less
@@ -0,0 +1,14 @@
+@import "../../../styles/vars.less";
+
+.checkout-page {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 12.5rem; // Prevent quantity dropdown from getting cut off
+  margin-top: 2rem;
+  width: fit-content;
+
+  .store-button {
+    align-self: flex-end;
+    margin-top: 1.5rem;
+  }
+}
diff --git a/src/store/components/OrderPage/index.tsx b/src/store/components/OrderPage/index.tsx
@@ -50,10 +50,12 @@ const OrderPage: React.FC<OrderPageProps> = (props) => {
           <>
             <StoreDropdown
               placeholder="Select a pickup event..."
-              options={pickupEvents.map((event) => ({
-                label: `${event.title} from ${moment(event.start).format('MMM D[,] LT')} to ${moment(event.end).format('MMM D[,] LT')}`,
-                value: event.uuid,
-              }))}
+              options={pickupEvents
+                .sort((a, b) => moment(a.start).diff(moment(b.start)))
+                .map((event) => ({
+                  label: `${event.title} from ${moment(event.start).format('MMM D[,] LT')} to ${moment(event.end).format('MMM D[,] LT')}`,
+                  value: event.uuid,
+                }))}
               onChange={(option) => {
                 setSelectedPickup(option.value);
               }}