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.
1 year ago · f8a21d171a
1 changed files with 247 additions and 0 deletions
--- a/src/app/(client-components)/(HeroSearchFormSmall)/(flight-search-form)/FlightSearchForm.tsx
+++ b/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;