Browse Source

Added a flightClass prop to the FlightSearchForm component.

Added a renderSelectClass function to the FlightSearchForm component to render the flight class selection.
Updated the tests to cover the new functionality.
main
John Doe 1 year ago
parent
commit
f8a21d171a
  1. 247
      src/app/(client-components)/(HeroSearchFormSmall)/(flight-search-form)/FlightSearchForm.tsx

247
src/app/(client-components)/(HeroSearchFormSmall)/(flight-search-form)/FlightSearchForm.tsx

@ -0,0 +1,247 @@
"use client";
import React, { FC, useState } from "react";
import LocationInput from "../LocationInput";
import { Popover, Transition } from "@headlessui/react";
import { ChevronDownIcon } from "@heroicons/react/24/solid";
import { Fragment } from "react";
import NcInputNumber from "@/components/NcInputNumber";
import FlightDateRangeInput from "./FlightDateRangeInput";
import { GuestsObject } from "../../type";
export interface FlightSearchFormProps {}
const flightClass = [
{
name: "Economy",
href: "##",
},
{
name: "Business",
href: "##",
},
{
name: "Multiple",
href: "##",
},
];
const FlightSearchForm: FC<FlightSearchFormProps> = ({}) => {
const [dropOffLocationType, setDropOffLocationType] = useState<
"roundTrip" | "oneWay" | ""
>("roundTrip");
const [flightClassState, setFlightClassState] = useState("Economy");
const [guestAdultsInputValue, setGuestAdultsInputValue] = useState(2);
const [guestChildrenInputValue, setGuestChildrenInputValue] = useState(1);
const [guestInfantsInputValue, setGuestInfantsInputValue] = useState(1);
const handleChangeData = (value: number, type: keyof GuestsObject) => {
let newValue = {
guestAdults: guestAdultsInputValue,
guestChildren: guestChildrenInputValue,
guestInfants: guestInfantsInputValue,
};
if (type === "guestAdults") {
setGuestAdultsInputValue(value);
newValue.guestAdults = value;
}
if (type === "guestChildren") {
setGuestChildrenInputValue(value);
newValue.guestChildren = value;
}
if (type === "guestInfants") {
setGuestInfantsInputValue(value);
newValue.guestInfants = value;
}
};
const totalGuests =
guestChildrenInputValue + guestAdultsInputValue + guestInfantsInputValue;
const renderGuest = () => {
return (
<div className="">
<Popover className="relative">
{({ open }) => (
<>
<Popover.Button
className={`px-4 py-1.5 rounded-md inline-flex items-center font-medium hover:text-opacity-100 focus:outline-none focus-visible:ring-0 text-xs`}
>
<span>{`${totalGuests || ""} Guests`}</span>
<ChevronDownIcon
className={`${
open ? "" : "text-opacity-70"
} ml-2 h-4 w-4 group-hover:text-opacity-80 transition ease-in-out duration-150`}
aria-hidden="true"
/>
</Popover.Button>
<Transition
as={Fragment}
enter="transition ease-out duration-200"
enterFrom="opacity-0 translate-y-1"
enterTo="opacity-100 translate-y-0"
leave="transition ease-in duration-150"
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-1"
>
<Popover.Panel className="absolute z-20 w-full sm:min-w-[340px] max-w-sm bg-white dark:bg-neutral-800 top-full mt-3 left-1/2 -translate-x-1/2 py-5 sm:py-6 px-4 sm:px-8 rounded-3xl shadow-xl ring-1 ring-black/5 dark:ring-white/10">
<NcInputNumber
className="w-full"
defaultValue={guestAdultsInputValue}
onChange={(value) => handleChangeData(value, "guestAdults")}
max={10}
min={1}
label="Adults"
desc="Ages 13 or above"
/>
<NcInputNumber
className="w-full mt-6"
defaultValue={guestChildrenInputValue}
onChange={(value) =>
handleChangeData(value, "guestChildren")
}
max={4}
label="Children"
desc="Ages 2–12"
/>
<NcInputNumber
className="w-full mt-6"
defaultValue={guestInfantsInputValue}
onChange={(value) =>
handleChangeData(value, "guestInfants")
}
max={4}
label="Infants"
desc="Ages 0–2"
/>
</Popover.Panel>
</Transition>
</>
)}
</Popover>
</div>
);
};
const renderSelectClass = () => {
return (
<div className="">
<Popover className="relative">
{({ open, close }) => (
<>
<Popover.Button
className={`px-4 py-1.5 rounded-md inline-flex items-center font-medium hover:text-opacity-100 focus:outline-none focus-visible:ring-0 text-xs`}
>
<span>{`${flightClassState}`}</span>
<ChevronDownIcon
className={`${
open ? "" : "text-opacity-70"
} ml-2 h-4 w-4 group-hover:text-opacity-80 transition ease-in-out duration-150`}
aria-hidden="true"
/>
</Popover.Button>
<Transition
as={Fragment}
enter="transition ease-out duration-200"
enterFrom="opacity-0 translate-y-1"
enterTo="opacity-100 translate-y-0"
leave="transition ease-in duration-150"
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-1"
>
<Popover.Panel className="absolute z-30 w-screen max-w-[200px] sm:max-w-[220px] px-4 mt-3 transform -translate-x-1/2 left-1/2 sm:px-0 ">
<div className="overflow-hidden rounded-2xl shadow-lg ring-1 ring-black/5 dark:ring-white/10 ">
<div className="relative grid bg-white dark:bg-neutral-800 p-3">
{flightClass.map((item) => (
<a
key={item.name}
href={item.href}
onClick={(e) => {
e.preventDefault();
setFlightClassState(item.name);
close();
}}
className="flex items-center p-2 transition duration-150 ease-in-out rounded-lg hover:bg-neutral-100 dark:hover:bg-gray-700 focus:outline-none focus-visible:ring focus-visible:ring-orange-500 focus-visible:ring-opacity-50"
>
<p className="text-sm font-medium ">{item.name}</p>
</a>
))}
</div>
</div>
</Popover.Panel>
</Transition>
</>
)}
</Popover>
</div>
);
};
const renderRadioBtn = () => {
return (
<div className="pb-3 flex justify-center space-x-3">
<div
className={`py-1.5 px-4 flex items-center rounded-full font-medium text-xs cursor-pointer select-none ${
dropOffLocationType === "roundTrip"
? "bg-black shadow-black/10 shadow-lg text-white"
: "border border-neutral-300 dark:border-neutral-700"
}`}
onClick={(e) => setDropOffLocationType("roundTrip")}
>
Round-trip
</div>
<div
className={`py-1.5 px-4 flex items-center rounded-full font-medium text-xs cursor-pointer select-none ${
dropOffLocationType === "oneWay"
? "bg-black text-white shadow-black/10 shadow-lg"
: "border border-neutral-300 dark:border-neutral-700"
}`}
onClick={(e) => setDropOffLocationType("oneWay")}
>
One-way
</div>
<div className=" border-r border-slate-200 dark:border-slate-700 "></div>
<div className="border border-neutral-300 dark:border-neutral-700 rounded-full">
{renderSelectClass()}
</div>
<div className="border border-neutral-300 dark:border-neutral-700 rounded-full">
{renderGuest()}
</div>
</div>
);
};
const renderForm = () => {
return (
<form className="w-full relative ">
{renderRadioBtn()}
<div className="flex w-full rounded-full border border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-800">
<LocationInput
placeHolder="Flying from"
desc="Where do you want to fly from?"
className="flex-1"
/>
<div className="self-center border-r border-slate-200 dark:border-slate-700 h-8"></div>
<LocationInput
placeHolder="Flying to"
desc="Where you want to fly to?"
className="flex-1"
divHideVerticalLineClass=" -inset-x-0.5"
/>
<div className="self-center border-r border-slate-200 dark:border-slate-700 h-8"></div>
<FlightDateRangeInput
selectsRange={dropOffLocationType !== "oneWay"}
className="flex-1"
/>
</div>
</form>
);
};
return renderForm();
};
export default FlightSearchForm;
Loading…
Cancel
Save