Searchable Card & Itinerary Title Patch

[heyitsmass]

Description

Updated the cards to have a searchable element that are similar to the preexisting flight card design

Motivation and Context

General updates and improvements to make the website more concise

Screenshot:

Example

Example

Creating a Card Example

 function DiningCard() {

  const props = {
    title: "Dining",
    subtitle: "search dining availability and add to itinerary",
    btnTxt: "Find Availability",
    handleSearch: async (form: FormData) =>
      findEvents(form, { event: "Dining" })
  };

  return (
    <SearchableCard {...props}>
      <Input
        label="Party Size"
        icon={{ icon: faUserGroup }}
        placeholder="Party Size"
        type="number"
        max={10}
      ></Input>
      <BayviewCalendar
        label="Booking Date"
        name="booking_date"
        placeholder="Booking Date"
        minDate={new Date(Date.now())}
      />
      <InputPair icon={faArrowRight}>
        <Input
          icon={{ icon: faClock }}
          label="Start Time"
          placeholder="Start time"
        ></Input>
        <Input
          icon={{ icon: faClock }}
          label="End Time"
          placeholder="End time"
        ></Input>
      </InputPair>
    </SearchableCard>
  );
}

Additional Notes

• SearchableCards can only be used within the Homepage Context - Buttons are automatically setup to add events into the itinerary when the "Add Itinerary" button is selected
• The modal design is static across all cards and thus all search results use two variables for them
  • event.offer displays information about the offer
  • event.displayData displays the information about the event

Types of changes

• [ ] Bug fix (non-breaking change which fixes an issue)
• [X] New feature (non-breaking change which adds functionality)
• [X] 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.
• [X] 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	Updated (UTC)
bay-view	✅ Ready (Inspect)	Visit Preview	Nov 30, 2023 5:13pm