Request ride workflow UI

README.md

@@ -26,12 +26,15 @@ If you have a disability that prevents you from walking around campus, getting a
 ### Current Contributors
 
 #### Technical Project Manager
+
 - Matthew Kim
 
 ### Designer
+
 - Ryan Qiu
 
 #### Software Developers
+
 - Anika Chandra
 - Emir Icyer
 
@@ -40,6 +43,7 @@ If you have a disability that prevents you from walking around campus, getting a
 ### Past Contributors
 
 #### Product Managers
+
 - Andrew Choi
 - Bryan Graeser
 - Kathy Lim
@@ -49,6 +53,7 @@ If you have a disability that prevents you from walking around campus, getting a
 - Stephy Chen
 
 #### Technical Project Managers
+
 - Christopher Hansen
 - Desmond Atikpui
 - Daniel Wei
@@ -59,6 +64,7 @@ If you have a disability that prevents you from walking around campus, getting a
 - Selena Liu
 
 #### Software Developers
+
 - Aaron Kang
 - Aiden Kim
 - Andrew Choi
@@ -90,6 +96,7 @@ If you have a disability that prevents you from walking around campus, getting a
 - Zack Ashen
 
 #### Designers
+
 - Aiden Kim
 - Chelsea Wang
 - Joanne Lee

frontend/package.json

@@ -4,7 +4,8 @@
   "description": "",
   "main": "index.js",
   "dependencies": {
-    "@carriage-web/shared": "workspace:*"
+    "@carriage-web/shared": "workspace:*",
+    "node-releases": "^2.0.36"
   },
   "scripts": {
     "dev": "vite",

frontend/src/components/Modal/Modal.tsx

@@ -37,6 +37,7 @@ type ModalProps = {
   isRider?: boolean;
   id?: string;
   arialabelledby?: string;
+  className?: string;
 };
 
 const Modal = ({
@@ -50,6 +51,7 @@ const Modal = ({
   isRider = true,
   arialabelledby,
   id = 'modal',
+  className,
 }: ModalProps) => {
   // Wrapping children in Array to match type for numPages
   const pages = paginate ? (children as React.ReactNodeArray) : [children];
@@ -74,7 +76,7 @@ const Modal = ({
                 clickOutsideDeactivates: true,
               }}
             >
-              <div className={styles.modal}>
+              <div className={`${styles.modal} ${className ?? ''}`.trim()}>
                 <div className={styles.topContainer}>
                   {isRider ? (
                     <h1 className={styles.title} id={id}>

frontend/src/components/Modal/modal.module.css

@@ -225,9 +225,16 @@
 
 @media screen and (max-height: 600px), screen and (max-width: 768px) {
   .modal {
-    max-width: 100%;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 100%;
+    max-width: 395px;
+    height: 100%;
     max-height: 100%;
-    overflow-y: scroll;
+    overflow-y: auto;
+    border-radius: 0;
+    padding: 0;
   }
 
   .page {

frontend/src/components/RequestRideModal/CreateOrEditRideModal.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React, { useContext, useRef } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import moment from 'moment';
 import AuthContext from '../../context/auth';
@@ -7,7 +7,7 @@ import { Button } from '../FormElements/FormElements';
 import { ObjectType } from '../../types/index';
 import { RideType } from '@carriage-web/shared/types/ride';
 import styles from './requestridemodal.module.css';
-import RequestRideInfo from './RequestRideInfo';
+import RequestRideWizard from './RequestRideWizard';
 import { RideModalType } from './types';
 import { format_date } from '../../util/index';
 import axios from '../../util/axios';
@@ -40,25 +40,35 @@ const CreateOrEditRideModal = ({
         return format_date(ride.startTime);
       }
     }
-    return format_date();
+    // For new rides, start with empty date so button is disabled
+    return '';
   };
 
   const defaultValues = {
     startDate: defaultStartDate(),
-    whenRepeat: ride?.isRecurring ? 'custom' : undefined,
+    whenRepeat: ride?.isRecurring ? 'custom' : 'no-repeat',
     pickupTime: ride ? moment(ride.startTime).format('HH:mm') : '',
     dropoffTime: ride ? moment(ride.endTime).format('HH:mm') : '',
     recurring: ride?.isRecurring ?? false,
   };
 
   const methods = useForm({ defaultValues });
   const { id } = useContext(AuthContext);
+  const formRef = useRef<HTMLFormElement>(null);
 
   const closeModal = () => {
     methods.clearErrors();
     onClose();
   };
 
+  const handleFormSubmit = async () => {
+    // Trigger form submission
+    const isValid = await methods.trigger();
+    if (isValid) {
+      methods.handleSubmit(handleSubmit)();
+    }
+  };
+
   // Removes null fields from object
   const cleanData = (data: ObjectType) =>
     Object.fromEntries(Object.entries(data).filter(([_, v]) => v !== null));
@@ -96,14 +106,17 @@ const CreateOrEditRideModal = ({
         ? endLocation
         : `${customDropoff}, ${dropoffCity} NY, ${dropoffZip}`;
     let rideData: ObjectType;
-    if (recurring || whenRepeat) {
+    // Check if it's a recurring ride (not "no-repeat")
+    const isRecurringRide =
+      recurring || (whenRepeat && whenRepeat !== 'no-repeat');
+    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.'
       );
       return;
     } else {
-      // Single ride (non-recurring)
+      // Single ride (non-recurring) - "No repeat" or no repeat selection
       rideData = {
         startLocation: startLoc,
         endLocation: endLoc,
@@ -148,22 +161,27 @@ const CreateOrEditRideModal = ({
 
   return (
     <Modal
-      title={!ride ? 'Request a Ride' : 'Edit Ride'}
+      title=""
       isOpen={isOpen}
       onClose={closeModal}
+      displayClose={true}
+      className={styles.requestRideModal}
     >
       <FormProvider {...methods}>
-        <form onSubmit={methods.handleSubmit(handleSubmit)}>
+        <form
+          ref={formRef}
+          onSubmit={methods.handleSubmit(handleSubmit)}
+          id="ride-form"
+        >
           <div className={styles.inputContainer}>
-            <RequestRideInfo
+            <RequestRideWizard
               ride={ride}
               showRepeatingCheckbox={!ride}
               showRepeatingInfo={modalType !== 'EDIT_SINGLE_RECURRING'}
               modalType={modalType}
+              onClose={closeModal}
+              onSubmit={handleFormSubmit}
             />
-            <Button className={styles.submit} type="submit">
-              {!ride ? 'Request a Ride' : 'Edit Ride'}
-            </Button>
           </div>
         </form>
       </FormProvider>