APP 55 Flight Ticket Page

.prettierrc.json

@@ -0,0 +1,6 @@
+{
+  "trailingComma": "all",
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": false
+}

src/components/FlightTicket/FlightTicket.definitions.tsx

@@ -4,8 +4,6 @@ import type { FlightLegData } from "../../interfaces/flight-leg.interface";
 
 export interface FlightTicketProps {
   flight: FlightLegData;
-  colorVariant: FlightTicketColorVariant;
-  isLastElement: boolean;
 }
 
 export enum LegType {

src/components/FlightTicket/FlightTicket.module.css

@@ -2,66 +2,27 @@
   flex-direction: column;
   width: 270px;
   font-family: "Roboto", sans-serif;
-  box-shadow: 0px 5px 5px #949494;
+  box-shadow: 0px 5px 5px #b4b4b4;
   border-radius: 20px;
   transition: 0.2s ease-in-out;
+  margin: 5px;
 }
 
 .ticketBase:hover {
-  flex-direction: column;
-  width: 270px;
-  font-family: "Roboto", sans-serif;
-  box-shadow: 0px 5px 5px #373636;
-  border-radius: 20px;
+  transform: translateY(-1px);
+  box-shadow: 0px 6px 5px #a2a2a2;
   cursor: pointer;
 }
 
-.ticketBorder {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: fit-content;
-  font-family: "Roboto", sans-serif;
-  background-color: white;
-  position: relative;
-  border-style: none dashed none none;
-  border-width: 1px;
-  border-color: #a9a9a9;
-}
-
-.ticketNoBorder {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: fit-content;
-  font-family: "Roboto", sans-serif;
-  background-color: white;
-  position: relative;
-}
-
 .dateRowRed {
   display: flex;
   background-color: #e48c8c;
   font-size: 0.8rem;
   padding-top: 5px;
   padding-bottom: 10px;
-  font-weight: 547;
+  font-weight: 500;
   border-top-left-radius: 20px;
   border-top-right-radius: 20px;
-  width: 271px;
-  justify-content: flex-end;
-}
-
-.dateRowRedNoBorder {
-  display: flex;
-  background-color: #e48c8c;
-  font-size: 0.8rem;
-  padding-top: 5px;
-  padding-bottom: 10px;
-  font-weight: 547;
-  border-top-left-radius: 20px;
-  border-top-right-radius: 20px;
-  width: 270px;
   justify-content: flex-end;
 }
 
@@ -71,23 +32,9 @@
   font-size: 0.8rem;
   padding-top: 5px;
   padding-bottom: 10px;
-  font-weight: 547;
-  border-top-left-radius: 20px;
-  border-top-right-radius: 20px;
-  width: 271px;
-  justify-content: flex-end;
-}
-
-.dateRowBlueNoBorder {
-  display: flex;
-  background-color: #8aa6ed;
-  font-size: 0.8rem;
-  padding-top: 5px;
-  padding-bottom: 10px;
-  font-weight: 547;
+  font-weight: 500;
   border-top-left-radius: 20px;
   border-top-right-radius: 20px;
-  width: 270px;
   justify-content: flex-end;
 }
 
@@ -143,21 +90,6 @@
   justify-content: center;
   font-size: 0.6rem;
   color: #acacac;
-  background-color: white;
-  width: 271px;
-  height: 10px;
-  border-bottom-left-radius: 20px;
-  border-bottom-right-radius: 20px;
-  padding-bottom: 5px;
-}
-
-.seeMoreRowNoBorder {
-  display: flex;
-  justify-content: center;
-  font-size: 0.6rem;
-  color: #acacac;
-  background-color: white;
-  width: 270px;
   height: 10px;
   border-bottom-left-radius: 20px;
   border-bottom-right-radius: 20px;

src/components/FlightTicket/FlightTicket.tsx

@@ -3,6 +3,8 @@ import { FlightTicketColorVariant, LegType } from "./FlightTicket.definitions";
 import Tag from "../TagComponent/Tag";
 import { TagColor } from "../TagComponent/Tag.definitions";
 import FlightDetailsModal from "../../modals/FlightDetailsModal/FlightDetailsModal";
+import { formatDate } from "../../util/date.util";
+import { formatAirlineString } from "../../util/flight.util";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
   faCircleArrowRight,
@@ -13,13 +15,7 @@ import {
 import { useState } from "react";
 import type { FlightTicketProps } from "./FlightTicket.definitions";
 
-const FlightTicket = ({
-  flight,
-  colorVariant,
-  isLastElement,
-}: FlightTicketProps) => {
-  const [isModalOpen, setIsModalOpen] = useState(false);
-
+const FlightTicket = ({ flight }: FlightTicketProps) => {
   const renderLegTypeIcon = (legType: string) => {
     if (legType === LegType.DEPARTURE) {
       return <FontAwesomeIcon icon={faPlaneDeparture} />;
@@ -30,6 +26,10 @@ const FlightTicket = ({
     }
   };
 
+  const colorVariant = FlightTicketColorVariant.RED;
+
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
   const closeModal = () => {
     setIsModalOpen(false);
   };
@@ -43,73 +43,52 @@ const FlightTicket = ({
       <div className={styles.ticketBase} onClick={openModal}>
         <div
           className={
-            colorVariant == FlightTicketColorVariant.RED &&
-            isLastElement == false
+            colorVariant == FlightTicketColorVariant.RED
               ? 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
+              : styles.dateRowBlue
           }
         >
           <div className={styles.date}>
-            {flight.fields["Departure Date/Time"].split("T")[0]}
+            {formatDate(flight.fields["Departure Date/Time"])}
           </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 className={styles.airportsRow}>
+          <div className={styles.departingAirport}>
+            {flight.fields["Departure Airport"]}
           </div>
-
-          <div className={styles.detailsRow}>
-            <div className={styles.legTypeWithImage}>
-              <div className={styles.legType}>
-                <div className={styles.legTypeText}>
-                  <Tag
-                    color={TagColor.GREY}
-                    text={flight.fields["Leg Type"].toLocaleUpperCase()}
-                  />
-                </div>
-                <div>{renderLegTypeIcon(flight.fields["Leg Type"])}</div>
-              </div>
-              <div className={styles.airline}>
-                {flight.fields.Airline.toLocaleUpperCase()}
+          <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}>
+              <div className={styles.legTypeText}>
+                <Tag
+                  color={TagColor.GREY}
+                  text={flight.fields["Leg Type"].toLocaleUpperCase()}
+                />
               </div>
+              <div>{renderLegTypeIcon(flight.fields["Leg Type"])}</div>
+            </div>
+            <div className={styles.airline}>
+              {formatAirlineString(
+                flight.fields["Airline"].toLocaleUpperCase(),
+              )}
             </div>
           </div>
-          <div
-            className={
-              isLastElement == false
-                ? styles.seeMoreRow
-                : styles.seeMoreRowNoBorder
-            }
-          >
-            <div>click to see more details</div>
-          </div>
         </div>
-        {isModalOpen && (
-          <FlightDetailsModal onClose={closeModal} flight={flight} />
-        )}
+        <div className={styles.seeMoreRow}>
+          <div>click to see more details</div>
+        </div>
       </div>
+      {isModalOpen && (
+        <FlightDetailsModal onClose={closeModal} flight={flight} />
+      )}
     </div>
   );
 };

src/components/FlightTicket/__tests__/FlightTicket.test.tsx

@@ -1,3 +1,5 @@
+import { formatDate } from "../../../util/date.util";
+import { formatAirlineString } from "../../../util/flight.util";
 import { createTestFlightLegData } from "../../../util/test-data.util";
 import FlightTicket from "../FlightTicket";
 import { FlightTicketColorVariant } from "../FlightTicket.definitions";
@@ -10,8 +12,6 @@ describe("FlightTicket Tests", () => {
   test("Test example component with border and blue color", () => {
     const mockProps = {
       flight: createTestFlightLegData(),
-      colorVariant: FlightTicketColorVariant.BLUE,
-      isLastElement: false,
     };
 
     const component = render(<FlightTicket {...mockProps} />);
@@ -21,7 +21,7 @@ describe("FlightTicket Tests", () => {
 
     //check that date is the same
     const date = component.getByText(
-      mockProps.flight.fields["Departure Date/Time"].split("T")[0],
+      formatDate(mockProps.flight.fields["Departure Date/Time"]),
     );
     expect(date).toBeTruthy();
 
@@ -37,7 +37,9 @@ describe("FlightTicket Tests", () => {
     expect(arrivingAirport).toBeTruthy();
 
     const airline = component.getByText(
-      mockProps.flight.fields.Airline.toLocaleUpperCase(),
+      formatAirlineString(
+        mockProps.flight.fields.Airline.toLocaleUpperCase(),
+      ).trim(),
     );
     expect(airline).toBeTruthy();
 
@@ -51,8 +53,6 @@ describe("FlightTicket Tests", () => {
   test("Test example component with no border and red color", () => {
     const mockProps = {
       flight: createTestFlightLegData(),
-      colorVariant: FlightTicketColorVariant.RED,
-      isLastElement: true,
     };
 
     const component = render(<FlightTicket {...mockProps} />);
@@ -62,7 +62,7 @@ describe("FlightTicket Tests", () => {
 
     //check that date is the same
     const date = component.getByText(
-      mockProps.flight.fields["Departure Date/Time"].split("T")[0],
+      formatDate(mockProps.flight.fields["Departure Date/Time"]),
     );
     expect(date).toBeTruthy();
 
@@ -78,7 +78,9 @@ describe("FlightTicket Tests", () => {
     expect(arrivingAirport).toBeTruthy();
 
     const airline = component.getByText(
-      mockProps.flight.fields.Airline.toLocaleUpperCase(),
+      formatAirlineString(
+        mockProps.flight.fields.Airline.toLocaleUpperCase(),
+      ).trim(),
     );
     expect(airline).toBeTruthy();
 
@@ -102,7 +104,7 @@ describe("FlightTicket Tests", () => {
 
     //check that date is the same
     const date = component.getByText(
-      mockProps.flight.fields["Departure Date/Time"].split("T")[0],
+      formatDate(mockProps.flight.fields["Departure Date/Time"]),
     );
     expect(date).toBeTruthy();
 
@@ -118,7 +120,9 @@ describe("FlightTicket Tests", () => {
     expect(arrivingAirport).toBeTruthy();
 
     const airline = component.getByText(
-      mockProps.flight.fields.Airline.toLocaleUpperCase(),
+      formatAirlineString(
+        mockProps.flight.fields.Airline.toLocaleUpperCase(),
+      ).trim(),
     );
     expect(airline).toBeTruthy();
 
@@ -142,7 +146,7 @@ describe("FlightTicket Tests", () => {
 
     //check that date is the same
     const date = component.getByText(
-      mockProps.flight.fields["Departure Date/Time"].split("T")[0],
+      formatDate(mockProps.flight.fields["Departure Date/Time"]),
     );
     expect(date).toBeTruthy();
 
@@ -158,7 +162,9 @@ describe("FlightTicket Tests", () => {
     expect(arrivingAirport).toBeTruthy();
 
     const airline = component.getByText(
-      mockProps.flight.fields.Airline.toLocaleUpperCase(),
+      formatAirlineString(
+        mockProps.flight.fields.Airline.toLocaleUpperCase(),
+      ).trim(),
     );
     expect(airline).toBeTruthy();
 

src/interfaces/flight-leg.interface.ts

@@ -26,6 +26,7 @@ export interface FlightLegData {
     "Total Cost": number;
     "Cost per PAX": number;
     "AirTable Record ID": string;
+    "Request AirTable Record ID": string[];
     "Passenger AirTable Record IDs": string | string[];
     "Log Airline Credit": {
       label: string;