Lodging Card

[cpilande]

Description

This PR implements the lodging card with the agreed-upon wireframe styles. This card receives the following inputs:

• Location
• Check-In & Check-Out Dates
• Number of adults
• Number of children
• Number of rooms The selected list of inputs was decided upon by looking at the default inputs of popular hotel booking websites. No negative values are allowed for the inputs that are handling numbers.

Motivation and Context

This PR is necessary to allow the user to search for and book hotel reservations. Lodging is one of the three necessary aspects of the itinerary that are necessary to plan for the trip.

How Has This Been Tested?

Screenshots (if appropriate):

Note: May have to add negative value checks to other card components

Types of changes

• [ ] Bug fix (non-breaking change which fixes an issue)
• [x] New feature (non-breaking change which adds functionality)
• [ ] Refactoring (non-breaking change)
• [ ] Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

• [x] - My code follows the code style of this project.
• [ ] - My change requires a change to the documentation.
• [ ] - I have updated the documentation accordingly.
• [ ] - I have read the CONTRIBUTING document.
• [ ] - I have added tests to cover my changes.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
bay-view	❌ Failed (Inspect)			Nov 26, 2023 11:46pm

[cpilande]

Looks good to me. I wonder if there might be a way to make the code easier to read if we set the input/inputpair components into their own function.

Yeah, that's true. We're going to have to refactor the date inputs for the customizable calendar also since it uses different Calendar and Dialog components

[heyitsmass]

Looks good to me. I wonder if there might be a way to make the code easier to read if we set the input/inputpair components into their own function.

There is, using an array

//handleSearch.ts

'use server'
export const handleSearch = async () => { 
 /* perform search */ 
 /* return results */ 
} 

export default function LodgingCard() {
  const form = {
    header: {
      label: "Location",
      name: "lodging-location",
      icon: faLocationArrow,
      placeholder: "Going to...",
      required: true,
    },
    pair: [
      {
        label: "Check-In Date",
      },
      {
        label: "Check-Out Date",
      },
    ],
    extra: [
      {
        label: "Number of Guests",
        placeholder: "Adults",
      },
      {
        label: "Number of Guests",
        placeholder: "Children",
      },
      {
        label: "Number of Guests",
        placeholder: "Rooms",
      },
    ],
  };

  return (
    <Card title="Lodging" subtitle="search for lodging reservations">
      <form action={handleSearch}>
        <Input {...form.header} icon={{ icon: form.header.icon }} />

        <InputPair icon={faArrowRight}>
          {
            form.pair.map((item, i) => (
              <Input
                key={i}
                {...item}
                icon={{ icon: faCalendarDays }}
                name={item.label.replaceAll(" ", "-").toLowerCase()}
                placeholder={item.label}
                required
              />
            )) as [ReactNode, ReactNode]
          }
        </InputPair>
        <div className="display: flex gap-3">
          {form.extra.map((item, i) => (
            <Input
              key={i}
              {...item}
              type="number"
              min="0"
              icon={{ icon: faUser }}
              name={item.label.replaceAll(" ", "-").toLowerCase()}
              required
            />
          ))}
        </div>
        <Button type="submit" variant="secondary" className="mt-4">
          Find Hotels
        </Button>
      </form>
    </Card>
  );
}