Request ride workflow UI by eicyer · Pull Request #676 · cornell-dti/carriage-web

eicyer · 2026-02-28T14:52:35Z

Summary
First step of the Request a Ride flow: multi-step modal (Date → Pickup → Dropoff → Summary) with desktop layout and inline editing on the summary step.
Features

Multi-step request ride wizard: Date, Pickup, Dropoff, Summary
-Date step: date picker (calendar popup), repeat options (No Repeat / Daily / Weekly / Biweekly / Custom), custom day selection
Pickup step: location dropdown (all locations + Other), map with optional click-to-set, manual time input (hour/minute, AM/PM) in a single styled row
-Dropoff step: same as pickup (location + map + time input)
[x] Summary step: read-only summary with Edit per section; Edit opens inline editors for date/repeat, pickup (location + time), or dropoff (location + time) on the same screen

Test Plan
Manual
Both for desktop and mobile

Notes

-The calendar on top of request rides wizard and changes to the rides page are not included. I think current rides page changes require a seperate pr

-Existing time validation, and frontend check not enabling rides is the same
-In dropoff and pickup time I added an AM/PM selection button as in the current design it was underspecified how they would select that
-Right now electing the location "other" assumes we know the student's custom location. Do we want to add a form/pop-up for that too?

Breaking Changes

All changes are frontend-only and additive (new components and steps, optional className on Modal).

vercel · 2026-02-28T14:52:39Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
cu-carriage	Ready	Preview, Comment	Mar 25, 2026 1:43pm

netlify · 2026-02-28T14:52:40Z

✅ Deploy Preview for carriage-web ready!

Name	Link
🔨 Latest commit	`b8ab408`
🔍 Latest deploy log	https://app.netlify.com/projects/carriage-web/deploys/69c3e6558a8d24000845a94b
😎 Deploy Preview	https://deploy-preview-676--carriage-web.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

YottaYocta

Thanks Emir, great work!
I left some comments for small styling changes.
I haven't gotten though all the code yet, so i'll be leaving more comments as I parse the rest of this comment.

YottaYocta · 2026-03-05T00:02:47Z

+    return (
+        <div className={styles.stepPage}>
+            <div className={styles.topContent}>
+                {/* Drag handle at the top (click to close on desktop, drag down on mobile) */}
+                <div


On desktop, a close button should be displayed instead of a drag handle

YottaYocta · 2026-03-05T00:06:58Z

+import moment from 'moment';
+import styles from './requestridemodal.module.css';
+
+type CustomDatePickerProps = {
+    selectedDate: moment.Moment;
+    currentMonth: moment.Moment;
+    onMonthChange: (month: moment.Moment) => void;
+    onDateSelect: (date: moment.Moment) => void;


MUI has a custom date picker that we're using already in the student home page. It would save maintenance overhead in the future if we just used that

YottaYocta · 2026-03-05T00:28:09Z

Great work, some small details:

Bottom separator should touch the sides of the parent container, and there should be no top line

On browser mobile views, the model extends beyond the screen; not sure if you can reproduce on your machine but would be worth a look

Let's also get rid of the top slider bar; I've realized that implementing drag on web is really janky. Things would probably be much clearer if we just had a close button for both the desktop and the mobile

YottaYocta · 2026-03-05T00:32:36Z

+              availableLocations={locations}
+              enablePickupMapClick
+              onPickupSelect={handlePickupSelect}
+              onDropoffSelect={() => { }}


Great work on this, I do think that we could also add the handler for location selection to the map, in case someone wants to choose by clicking on a yellow pin

Encountered a bug where if i select a location, move to the next page, then move back to the original location page, it gets rid of the blue indicator for the selected location

YottaYocta

Hi Emir!
Thanks for the great work. Based on our convo, the main things for this PR are:

use the MUI components for complex things like date pickers and time pickers. It's alright if they don't map 1:1 with the figma designs
Consider lifting the state of the multi-step form. We can eliminate the wizard step, and also reduce the number of props passed between the modal parent and each step's component
minor instances of unused code being left in the codebase

YottaYocta · 2026-03-11T23:01:59Z

@@ -0,0 +1,181 @@
+import React, { useState, useRef, useEffect } from 'react';


The MUI comment for the date picker applies to this to: it looks great, but for maintainability purposes I think just sticking with the built-in MUI components would be better

Agreed -- also there are some weird things with the current date picker (e.g. it lists past and future dates within ten years so the menu is shifting based on the current selection which is kinda strange). It's not horrid and I think it looks great but we should probably use a prebuilt date picker, also makes accessibility and other standards easier to follow

One other thing about time picker specifically -- I kinda expect to be able to use the time picker as one big text box (e.g. entering 0500 will output 5:00) but having to click on two separate boxes to enter text is counterintuitive, at least compared with how I expect to use components like this

YottaYocta · 2026-03-11T23:17:05Z

@@ -25,5 +25,21 @@ export const isTimeValid = (startDate: string, pickupTime: string) => {
  return selectedTime.isSameOrAfter(now.add(bufferDays, 'day'), 'day');
 };



Note: might be unused

YottaYocta · 2026-03-11T23:51:17Z

@@ -0,0 +1,363 @@
+import React, { useState, useRef, useEffect } from 'react';


Consider 'lifting state' for the modal design:
instead of using a context, have the parent component (in this case, the CreateOrEditRideModal) define all formdata

i.e.

CreateOrEditRideModal { currentFormData: formData currentStep: 1 | 2 | 3 | 4 }

Then, rendering would look something like:

switch(currentStep) { case: 1: <Step1 formData={currentFormData} handleUpdateFormData={(newData)=> setFormData(newData)}></Step1> }

Any child component-related props (i.e. whether selections are open/closed, what fields are unfilled, etc.) would be stored in the child components, and any functionality needed to update the parent would also belong entirely in the child component

for instance, if a user modifies a value in one of the steps, the component would use the new value, create an updated version of the ride object, and then call handleUpdateRide(updatedRide). The parent would update the ride value, which would handle any re-renders necessary.

States unique to a single step of the form, like whether a dropdown is open, should not be something that the parent component knows about

Claude: "Object reconstruction is a non-issue at this scale. Creating a new object on each keystroke is negligible. React itself encourages immutable updates (new object rather than mutating). This is not a performance concern for a multi-step form."

dti-github-bot · 2026-03-22T17:47:25Z

[diff-counting] Significant lines: 7382. This diff might be too big! Developer leads are invited to review the code.

mjaydenkim

This flow looks great -- good job on mobile styling and the logic of the overall flow, it makes a lot of sense! A few notes besides what I mention below:

In general, better error reporting is needed. When an erroneous date/time/etc is entered, a lot of the time it will lead to a 400 server error which will not get shown to the user, which is not convenient. Please refer to #625, where I attempted to fix some of this -- I'm not sure how compatible it is with this PR but please implement that.
When I try to create a ride I get an error, not sure if this is b/c of my recent merge or if it was pre-existing but we should talk it over and see if anyone else is getting the same --

Populate error: TypeError: Cannot read properties of undefined (reading 'getInternalProperties')
    at PopulateItem (C:\Users\User\Documents\carriage-web\node_modules\.pnpm\dynamoose@4.1.5\node_modules\dynamoose\dist\Populate.js:15:28)

mjaydenkim · 2026-03-22T18:16:54Z

+              } else {
+                return (
+                  notWeekend ||
+                  'Please enter a valid date. (Note: CULifts does not operate during weekends or university-wide breaks.)'


More specific error messages would be good here

mjaydenkim · 2026-03-22T18:18:31Z

+    if (isRecurringRide) {
      // For now, block recurring rides as they're not fully implemented
      alert(
        'Recurring rides are not yet supported. Please create a single ride instead.'


Probably doesn't matter since it won't be in production until later but having to go to the end of the workflow before this message appears is kinda annoying

yes I'll fix

mjaydenkim · 2026-03-22T18:23:17Z

+                    setShowLocationButton(false);
+                  }}
+                >
+                  Other (Custom Address)


i might be stupid but shouldn't we have a free-entry text form for this option?

like to enter what the address actually is

Oh yes I was meaning to ask this since it wasn't included in the design I left it for later. I think we should both let them pick in map and a textbox right

mjaydenkim · 2026-03-22T18:24:43Z

@@ -0,0 +1,181 @@
+import React, { useState, useRef, useEffect } from 'react';


One other thing about time picker specifically -- I kinda expect to be able to use the time picker as one big text box (e.g. entering 0500 will output 5:00) but having to click on two separate boxes to enter text is counterintuitive, at least compared with how I expect to use components like this

eicyer

Since PR #625 is not yet merged should we use the formatting there?

Request ride workflow UI

99054f7

eicyer requested a review from a team as a code owner February 28, 2026 14:52

Fixed minute form bug

d971980

vercel Bot had a problem deploying to Preview February 28, 2026 15:30 Failure

YottaYocta requested changes Mar 5, 2026

View reviewed changes

YottaYocta requested changes Mar 11, 2026

View reviewed changes

Merge branch 'master' into request-ride-workflow

ea8da1a

dti-github-bot requested review from Destaq, burninglilies and oscarwang20 March 22, 2026 17:47

vercel Bot deployed to Preview March 22, 2026 17:47 View deployment

Merged from main

2244577

vercel Bot deployed to Preview March 22, 2026 18:10 View deployment

Fix types

2c6260c

vercel Bot deployed to Preview March 22, 2026 18:14 View deployment

mjaydenkim requested changes Mar 22, 2026

View reviewed changes

Fix switch/case syntax

ffbadd9

vercel Bot deployed to Preview March 22, 2026 18:43 View deployment

state lifting

d8ad8c0

vercel Bot deployed to Preview March 24, 2026 19:55 View deployment

mui and error handling bug fixes

7f13430

vercel Bot deployed to Preview March 25, 2026 01:56 View deployment

css split

e4b83f9

vercel Bot deployed to Preview March 25, 2026 02:44 View deployment

catch blocks and add toast

dd77c0f

vercel Bot deployed to Preview March 25, 2026 13:27 View deployment

close button and early warning for recurring rides

b8ab408

vercel Bot deployed to Preview March 25, 2026 13:43 View deployment

eicyer commented Mar 25, 2026

View reviewed changes

		@@ -0,0 +1,181 @@
		import React, { useState, useRef, useEffect } from 'react';

		@@ -25,5 +25,21 @@ export const isTimeValid = (startDate: string, pickupTime: string) => {
		return selectedTime.isSameOrAfter(now.add(bufferDays, 'day'), 'day');
		};

		@@ -0,0 +1,363 @@
		import React, { useState, useRef, useEffect } from 'react';

Conversation

eicyer commented Feb 28, 2026

Uh oh!

vercel Bot commented Feb 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

netlify Bot commented Feb 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for carriage-web ready!

Uh oh!

YottaYocta left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

YottaYocta Mar 5, 2026 • edited by eicyer Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

YottaYocta left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

dti-github-bot commented Mar 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mjaydenkim left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

eicyer left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

vercel Bot commented Feb 28, 2026 •

edited

Loading

netlify Bot commented Feb 28, 2026 •

edited

Loading

YottaYocta Mar 5, 2026 •

edited by eicyer

Loading

dti-github-bot commented Mar 22, 2026 •

edited

Loading