APP 57 Flight Modal

jest.config.ts

@@ -6,6 +6,7 @@ export default {
     "src/components/**/*.{js,jsx,ts,tsx}",
     "src/pages/**/*.{js,jsx,ts,tsx}",
     "src/utils/**/*.{js,jsx,ts,tsx}",
+    "src/modals/**/*.{js,jsx,ts,tsx}",
   ],
 
   // Automatically clear mock calls and instances between every test

src/components/FlightTicket/FlightTicket.definitions.tsx

@@ -1,11 +1,9 @@
 /* eslint-disable autofix/no-unused-vars */
 
+import type { FlightLegData } from "../../interfaces/flight-leg.interface";
+
 export interface FlightTicketProps {
-  date: string;
-  departingAirport: string;
-  arrivingAirport: string;
-  airline: string;
-  legType: LegType;
+  flight: FlightLegData;
   colorVariant: FlightTicketColorVariant;
   isLastElement: boolean;
 }

src/components/FlightTicket/FlightTicket.module.css

@@ -4,6 +4,16 @@
   font-family: "Roboto", sans-serif;
   box-shadow: 0px 5px 5px #949494;
   border-radius: 20px;
+  transition: 0.2s ease-in-out;
+}
+
+.ticketBase:hover {
+  flex-direction: column;
+  width: 270px;
+  font-family: "Roboto", sans-serif;
+  box-shadow: 0px 5px 5px #373636;
+  border-radius: 20px;
+  cursor: pointer;
 }
 
 .ticketBorder {

src/components/FlightTicket/FlightTicket.tsx

@@ -1,24 +1,22 @@
 import styles from "./FlightTicket.module.css";
 import { FlightTicketColorVariant, LegType } from "./FlightTicket.definitions";
+import FlightDetailsModal from "../../modals/FlightDetailsModal/FlightDetailsModal";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
   faCircleArrowRight,
   faPlaneArrival,
   faPlaneDeparture,
   faPlane,
 } from "@fortawesome/free-solid-svg-icons";
+import { useState } from "react";
 import type { FlightTicketProps } from "./FlightTicket.definitions";
 
 const FlightTicket = ({
-  date,
-  departingAirport,
-  arrivingAirport,
-  airline,
-  legType,
+  flight,
   colorVariant,
   isLastElement,
 }: FlightTicketProps) => {
-  const renderLegTypeIcon = (legType: LegType) => {
+  const renderLegTypeIcon = (legType: string) => {
     if (legType === LegType.DEPARTURE) {
       return <FontAwesomeIcon icon={faPlaneDeparture} />;
     } else if (legType === LegType.CONNECTING) {
@@ -28,55 +26,83 @@ const FlightTicket = ({
     }
   };
 
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const closeModal = () => {
+    setIsModalOpen(false);
+  };
+
+  const openModal = () => {
+    setIsModalOpen(true);
+  };
+
   return (
-    <div className={styles.ticketBase}>
-      <div
-        className={
-          colorVariant == FlightTicketColorVariant.RED && isLastElement == false
-            ? styles.dateRowRed
-            : colorVariant == FlightTicketColorVariant.RED &&
-              isLastElement == true
-            ? styles.dateRowRedNoBorder
-            : colorVariant == FlightTicketColorVariant.BLUE &&
-              isLastElement == false
-            ? styles.dateRowBlue
-            : colorVariant == FlightTicketColorVariant.BLUE &&
-              isLastElement == true
-            ? styles.dateRowBlueNoBorder
-            : styles.dateRowBlueNoBorder
-        }
-      >
-        <div className={styles.date}>{date}</div>
-      </div>
-      <div
-        className={
-          isLastElement == false ? styles.ticketBorder : styles.ticketNoBorder
-        }
-      >
-        <div className={styles.airportsRow}>
-          <div className={styles.departingAirport}>{departingAirport}</div>
-          <FontAwesomeIcon
-            icon={faCircleArrowRight}
-            className={styles.arrowIcon}
-          />
-          <div className={styles.arrivingAirport}>{arrivingAirport}</div>
+    <div>
+      <div className={styles.ticketBase} onClick={openModal}>
+        <div
+          className={
+            colorVariant == FlightTicketColorVariant.RED &&
+            isLastElement == false
+              ? styles.dateRowRed
+              : colorVariant == FlightTicketColorVariant.RED &&
+                isLastElement == true
+              ? styles.dateRowRedNoBorder
+              : colorVariant == FlightTicketColorVariant.BLUE &&
+                isLastElement == false
+              ? styles.dateRowBlue
+              : colorVariant == FlightTicketColorVariant.BLUE &&
+                isLastElement == true
+              ? styles.dateRowBlueNoBorder
+              : styles.dateRowBlueNoBorder
+          }
+        >
+          <div className={styles.date}>
+            {flight.fields["Departure Date/Time"].split("T")[0]}
+          </div>
         </div>
+        <div
+          className={
+            isLastElement == false ? styles.ticketBorder : styles.ticketNoBorder
+          }
+        >
+          <div className={styles.airportsRow}>
+            <div className={styles.departingAirport}>
+              {flight.fields["Departure Airport"]}
+            </div>
+            <FontAwesomeIcon
+              icon={faCircleArrowRight}
+              className={styles.arrowIcon}
+            />
+            <div className={styles.arrivingAirport}>
+              {flight.fields["Arrival Airport"]}
+            </div>
+          </div>
 
-        <div className={styles.detailsRow}>
-          <div className={styles.legTypeWithImage}>
-            <div className={styles.legType}>{legType.toLocaleUpperCase()}</div>
-            {renderLegTypeIcon(legType)}
+          <div className={styles.detailsRow}>
+            <div className={styles.legTypeWithImage}>
+              <div className={styles.legType}>
+                {flight.fields["Leg Type"].toLocaleUpperCase()}
+              </div>
+              {renderLegTypeIcon(flight.fields["Leg Type"])}
+            </div>
+            <div className={styles.airline}>
+              {flight.fields.Airline.toLocaleUpperCase()}
+            </div>
           </div>
-          <div className={styles.airline}>{airline.toLocaleUpperCase()}</div>
+        </div>
+        <div
+          className={
+            isLastElement == false
+              ? styles.seeMoreRow
+              : styles.seeMoreRowNoBorder
+          }
+        >
+          <div>click to see more details</div>
         </div>
       </div>
-      <div
-        className={
-          isLastElement == false ? styles.seeMoreRow : styles.seeMoreRowNoBorder
-        }
-      >
-        <div>click to see more details</div>
-      </div>
+      {isModalOpen && (
+        <FlightDetailsModal onClose={closeModal} flight={flight} />
+      )}
     </div>
   );
 };