The goal of this user story is to create a pop-up modal that prompts the user for additional sign-up information such as license plate number and vehicle model in the event that they choose to be a driver on the app.

First, you will need to set useState hooks for each piece of information that is to be gotten from the user along with one to manage the display boolean for the modal. If the boolean value is false, the modal will not be visible, whereas if it is true, it will be visible.

const [showSecondModal, setShowSecondModal] = useState(false);
const [licensePlate, setLicensePlate] = useState('');

Second, you must define the logic for when the modal should appear. You will do this by using an if statement setting setShowSecondModal to true when the user role is driver. This way, the modal will only display when the user presses the button indicating that they want to be a driver rather than a passenger.

    if (role === 'driver') {
      setShowSecondModal(true); // Show the second modal when "Yes, as a Driver" is clicked
    } 

The modal is rendered conditionally based on the showSecondModal state variable.

{/* Second Modal */}
{showSecondModal && (
  // Modal content
)}

Third, you must implement the logic behind sending the user back to the Login Page once the "Submit" button is pressed.

<form onSubmit={(e) => {
  e.preventDefault();
  navigate('/login'); // Navigate to the login screen upon form submission
}} className="space-y-4">
  {/* Form fields */}
</form>

Next, you will need to set the input field binding with their corresponding state variables using value and onChange handlers.

<input
  type="text"
  placeholder="License Plate Number"
  value={licensePlate}
  onChange={(e) => setLicensePlate(e.target.value)}
  required
  className="w-full p-2 border rounded"
/>

Lastly, you must ensure that the user can close the modal in the event that they want to rethink their decision to be a driver. This is done with a simple onClick command.

<button   
  onClick={() => setShowSecondModal(false)}
  className="bg-gray-200 mx-2 px-4 py-2 rounded"
>
  Close
</button>

A final pop-up modal may look something like this.