@duffel/components 3.0.7-canary → 3.1.2--prototype

package/scripts/generate-fixture.ts

@@ -10,6 +10,9 @@ const DUFFEL_API_TOKEN = process.env.DUFFEL_API_TOKEN || "";
 const DUFFEL_API_URL = process.env.DUFFEL_API_URL || "";
 const VERBOSE = process.env.VERBOSE === "true";
 
+// eslint-disable-next-line
+const log = console.log;
+
 if (DUFFEL_API_URL.includes("localhost"))
   process.env.NODE_TLS_REJECT_UNAUTHORIZED = "0";
 
@@ -89,7 +92,8 @@ const main = async () => {
     const sliceInput = new Array<[string, string]>(sliceCount);
     for (let i = 0; i < sliceCount; i++) {
       let origin = sliceInput[i - 1]?.[0];
-      console.log(`\nSlice #${i + 1}`);
+
+      log(`\nSlice #${i + 1}`);
       const { value } = await prompts({
         type: "text",
         name: "value",
@@ -108,7 +112,7 @@ const main = async () => {
     }
 
     // ask how many adults
-    console.log(`\n`);
+    log(`\n`);
     const { adultCount } = await prompts({
       type: "number",
       name: "adultCount",
@@ -117,7 +121,7 @@ const main = async () => {
     });
 
     // ask for requested sources
-    console.log(`\n`);
+    log(`\n`);
     const { requestedSources } = await prompts({
       type: "text",
       name: "requestedSources",
@@ -135,7 +139,7 @@ const main = async () => {
       const airlines = new Set(
         offerRequest.offers.map((offer) => offer.owner.iata_code)
       );
-      console.log(
+      log(
         `Received ${withPlural(
           offerRequest.offers.length,
           "offer",
@@ -147,7 +151,7 @@ const main = async () => {
             "airlines"
           )}(${Array.from(airlines.values()).join(",")})`
       );
-      console.log(
+      log(
         `Search completed, offer request ID: ${offerRequest.id}.\nUsing first offer to get services: ${offerRequest.offers[0].id}\n`
       );
     }
@@ -183,10 +187,11 @@ const main = async () => {
       JSON.stringify(seatMaps, null, 2)
     );
 
-    console.log(`\n🐄 Fixtures saved for ${firstOffer.id}`);
-    console.log(`  ↳ /src/fixtures/offer/${firstOffer.id}.json`);
-    console.log(`  ↳ /src/fixtures/seat-maps/${firstOffer.id}.json\n`);
+    log(`\n🐄 Fixtures saved for ${firstOffer.id}`);
+    log(`  ↳ /src/fixtures/offer/${firstOffer.id}.json`);
+    log(`  ↳ /src/fixtures/seat-maps/${firstOffer.id}.json\n`);
   } catch (err) {
+    // eslint-disable-next-line
     console.error(err);
     process.exit(1);
   }

package/scripts/setup-suggestion-data.ts

@@ -0,0 +1,100 @@
+import fs from "fs";
+import readline from "readline";
+
+async function readCSVIntoMatrix(
+  filePath: string,
+  linePrefix: string,
+  keys: string[]
+): Promise<string[]> {
+  const rl = readline.createInterface({
+    input: fs.createReadStream(filePath),
+    crlfDelay: Infinity,
+  });
+
+  // this will map a key into the index
+  let keyNameToIndexMap: Record<string, number> = {};
+  const matrix = new Array<string>();
+
+  rl.on("line", (line) => {
+    if (Object.keys(keyNameToIndexMap).length === 0) {
+      // it's the header line
+      keyNameToIndexMap = line
+        .split(",")
+        .reduce((acc, key, index) => ({ ...acc, [key]: index }), {});
+    } else {
+      // it's a data line
+      const row = line.split(",");
+      const rowObject =
+        linePrefix +
+        keys
+          .map((key) => {
+            const index = keyNameToIndexMap[key];
+            return row[index];
+          })
+          .join(`,`);
+      matrix.push(rowObject);
+    }
+  });
+
+  await new Promise((res) => rl.once("close", res));
+  return matrix;
+}
+
+export interface CityCsvRow {
+  id: string;
+  iata_code: string;
+  iata_country_code: string;
+  name: string;
+  inserted_at: string;
+  updated_at: string;
+  metropolitan_area: string;
+}
+
+async function loadCities() {
+  return await readCSVIntoMatrix("./data/cities.csv", "C,", [
+    "name",
+    "iata_code",
+  ]);
+}
+
+export interface AirportCsvRow {
+  id: string;
+  iata_code: string;
+  iata_city_code: string;
+  iata_country_code: string;
+  name: string;
+  inserted_at: string;
+  updated_at: string;
+  source_type: string;
+  alternative_names: string;
+  icao_code: string;
+  disabled_at: string;
+  city_name: string;
+  latitude: string;
+  longitude: string;
+  time_zone: string;
+}
+
+async function loadAirports() {
+  return await readCSVIntoMatrix("./data/airports.csv", "A,", [
+    "name",
+    "iata_code",
+    "latitude",
+    "longitude",
+  ]);
+}
+
+async function main() {
+  // load airports csv
+  const airports = await loadAirports();
+
+  // load cities csv
+  const cities = await loadCities();
+
+  fs.writeFileSync(
+    "./data/__generated__iata-lookup.json",
+    JSON.stringify([...cities, ...airports])
+  );
+}
+
+export default main();

package/scripts/upload-to-cdn.sh

@@ -16,7 +16,7 @@ if [ -z "$VERSION" ]; then
 fi
 
 # Check if folder exists
-if gsutil -q stat "$GCP_PREFIX/$VERSION/index.js"; then
+if gsutil -q stat "$GCP_PREFIX/$VERSION/duffel-ancillaries.js"; then
   # Confirm with user before overriding
   read -p "Version \`$VERSION\` already exists. Do you want to override it? (\`Y\` to continue) " -n 1 -r
   echo

package/src/components/{Card.tsx → DuffelAncillaries/Card.tsx}

@@ -1,6 +1,6 @@
+import { Icon, IconName } from "@components/shared/Icon";
 import classNames from "classnames";
 import * as React from "react";
-import { Icon, IconName } from "./Icon";
 
 export interface CardProps {
   buttonTitle: string;

package/src/components/{Counter.tsx → DuffelAncillaries/Counter.tsx}

@@ -1,5 +1,5 @@
+import { IconButton } from "@components/shared/IconButton";
 import * as React from "react";
-import { IconButton } from "./IconButton";
 
 interface CounterProps {
   id: string;

package/src/components/{DuffelAncillaries.tsx → DuffelAncillaries/DuffelAncillaries.tsx}

@@ -1,9 +1,12 @@
+import { ErrorBoundary } from "@components/shared/ErrorBoundary";
+import { FetchOfferErrorState } from "@components/shared/FetchOfferErrorState";
 import { compileCreateOrderPayload } from "@lib/compileCreateOrderPayload";
 import { createPriceFormatters } from "@lib/createPriceFormatters";
 import { formatAvailableServices } from "@lib/formatAvailableServices";
 import { formatSeatMaps } from "@lib/formatSeatMaps";
+import { hasHighLuminance } from "@lib/hasHighLuminance";
 import { isPayloadComplete } from "@lib/isPayloadComplete";
-import { LogContext, initializeLogger } from "@lib/logging";
+import { initializeLogger, logGroup } from "@lib/logging";
 import { offerIsExpired } from "@lib/offerIsExpired";
 import { retrieveOffer } from "@lib/retrieveOffer";
 import { retrieveSeatMaps } from "@lib/retrieveSeatMaps";
@@ -19,12 +22,10 @@ import * as React from "react";
 import {
   CreateOrderPayloadPassengers,
   CreateOrderPayloadService,
-} from "../types/CreateOrderPayload";
-import { DuffelAncillariesProps } from "../types/DuffelAncillariesProps";
-import { Offer } from "../types/Offer";
-import { SeatMap } from "../types/SeatMap";
-import { ErrorBoundary } from "./ErrorBoundary";
-import { FetchOfferErrorState } from "./FetchOfferErrorState";
+} from "../../types/CreateOrderPayload";
+import { DuffelAncillariesProps } from "../../types/DuffelAncillariesProps";
+import { Offer } from "../../types/Offer";
+import { SeatMap } from "../../types/SeatMap";
 import { BaggageSelectionCard } from "./bags/BaggageSelectionCard";
 import { CfarSelectionCard } from "./cancel_for_any_reason/CfarSelectionCard";
 import { SeatSelectionCard } from "./seats/SeatSelectionCard";
@@ -33,9 +34,9 @@ const COMPONENT_CDN = process.env.COMPONENT_CDN || "";
 const hrefToComponentStyles = `${COMPONENT_CDN}/global.css`;
 
 export const DuffelAncillaries: React.FC<DuffelAncillariesProps> = (props) => {
-  const logger = initializeLogger(props.debug || false);
+  initializeLogger(props.debug || false);
 
-  logger.logGroup("Properties passed into the component:", props);
+  logGroup("Properties passed into the component:", props);
 
   if (!areDuffelAncillariesPropsValid(props)) {
     throw new Error(
@@ -115,7 +116,7 @@ export const DuffelAncillaries: React.FC<DuffelAncillariesProps> = (props) => {
       setError(expiryErrorMessage);
       return;
     } else {
-      const msUntilExpiry = new Date(offer.expires_at).getTime() - Date.now();
+      const msUntilExpiry = new Date(offer?.expires_at)?.getTime() - Date.now();
 
       // Only show the expiry error message if the offer expires in less than a day,
       // to prevent buffer overflows when showing offers for fixtures, which expire in
@@ -186,7 +187,7 @@ export const DuffelAncillaries: React.FC<DuffelAncillariesProps> = (props) => {
           ? props.offer_id
           : props.offer.id,
         !isPropsWithOfferIdForFixture ? props.client_key : null,
-        setError,
+        () => updateSeatMaps([]),
         setIsSeatMapLoading,
         updateSeatMaps
       );
@@ -235,7 +236,7 @@ export const DuffelAncillaries: React.FC<DuffelAncillariesProps> = (props) => {
         cancel_for_any_reason_services: cfarSelectedServices,
       };
 
-      logger.logGroup("Payload ready", {
+      logGroup("Payload ready", {
         "Order creation payload": createOrderPayload,
         "Services metadata": metadata,
       });
@@ -263,6 +264,11 @@ export const DuffelAncillaries: React.FC<DuffelAncillariesProps> = (props) => {
     ...(props.styles?.accentColor && {
       "--ACCENT": props.styles.accentColor,
     }),
+    ...(props.styles?.accentColor &&
+      hasHighLuminance(props.styles.accentColor) && {
+        "--SECONDARY": "var(--GREY-900)",
+        "--TERTIARY": "var(--GREY-400)",
+      }),
     ...(props.styles?.fontFamily && {
       "--FONT-FAMILY": props.styles.fontFamily,
     }),
@@ -284,63 +290,61 @@ export const DuffelAncillaries: React.FC<DuffelAncillariesProps> = (props) => {
     error,
   };
 
-  logger.logGroup("Component's internal state:", state);
+  logGroup("Component's internal state:", state);
 
   return (
     <>
       <link rel="stylesheet" href={hrefToComponentStyles}></link>
 
-      <LogContext.Provider value={logger}>
-        <div className="duffel-components" style={duffelComponentsStyle}>
-          <ErrorBoundary>
-            {error && (
-              <FetchOfferErrorState
-                height={nonIdealStateHeight}
-                message={error}
-              />
-            )}
-
-            {!error &&
-              props.services.map((ancillaryName) => {
-                if (ancillaryName === "bags")
-                  return (
-                    <BaggageSelectionCard
-                      key="bags"
-                      isLoading={isOfferLoading}
-                      offer={offer}
-                      passengers={passengers}
-                      selectedServices={baggageSelectedServices}
-                      setSelectedServices={setBaggageSelectedServices}
-                    />
-                  );
-
-                if (ancillaryName === "seats")
-                  return (
-                    <SeatSelectionCard
-                      key="seats"
-                      isLoading={isOfferLoading || isSeatMapLoading}
-                      seatMaps={seatMaps}
-                      offer={offer}
-                      passengers={passengers}
-                      selectedServices={seatSelectedServices}
-                      setSelectedServices={setSeatSelectedServices}
-                    />
-                  );
-
-                if (ancillaryName === "cancel_for_any_reason")
-                  return (
-                    <CfarSelectionCard
-                      key="cancel_for_any_reason"
-                      isLoading={isOfferLoading}
-                      offer={offer}
-                      selectedServices={cfarSelectedServices}
-                      setSelectedServices={setCfarSelectedServices}
-                    />
-                  );
-              })}
-          </ErrorBoundary>
-        </div>
-      </LogContext.Provider>
+      <div className="duffel-components" style={duffelComponentsStyle}>
+        <ErrorBoundary>
+          {error && (
+            <FetchOfferErrorState
+              height={nonIdealStateHeight}
+              message={error}
+            />
+          )}
+
+          {!error &&
+            props.services.map((ancillaryName) => {
+              if (ancillaryName === "bags")
+                return (
+                  <BaggageSelectionCard
+                    key="bags"
+                    isLoading={isOfferLoading}
+                    offer={offer}
+                    passengers={passengers}
+                    selectedServices={baggageSelectedServices}
+                    setSelectedServices={setBaggageSelectedServices}
+                  />
+                );
+
+              if (ancillaryName === "seats")
+                return (
+                  <SeatSelectionCard
+                    key="seats"
+                    isLoading={isOfferLoading || isSeatMapLoading}
+                    seatMaps={seatMaps}
+                    offer={offer}
+                    passengers={passengers}
+                    selectedServices={seatSelectedServices}
+                    setSelectedServices={setSeatSelectedServices}
+                  />
+                );
+
+              if (ancillaryName === "cancel_for_any_reason")
+                return (
+                  <CfarSelectionCard
+                    key="cancel_for_any_reason"
+                    isLoading={isOfferLoading}
+                    offer={offer}
+                    selectedServices={cfarSelectedServices}
+                    setSelectedServices={setCfarSelectedServices}
+                  />
+                );
+            })}
+        </ErrorBoundary>
+      </div>
     </>
   );
 };

package/src/components/{DuffelAncillariesCustomElement.tsx → DuffelAncillaries/DuffelAncillariesCustomElement.tsx}

@@ -1,5 +1,5 @@
 import { createRoot, Root } from "react-dom/client";
-import { CreateOrderPayload } from "../types/CreateOrderPayload";
+import { CreateOrderPayload } from "../../types/CreateOrderPayload";
 import {
   DuffelAncillariesPropsWithClientKeyAndOfferId,
   DuffelAncillariesPropsWithOfferIdForFixture,
@@ -7,7 +7,7 @@ import {
   DuffelAncillariesPropWithOfferAndClientKey,
   OnPayloadReady,
   OnPayloadReadyMetadata,
-} from "../types/DuffelAncillariesProps";
+} from "../../types/DuffelAncillariesProps";
 import { DuffelAncillaries } from "./DuffelAncillaries";
 
 declare global {

package/src/components/{bags → DuffelAncillaries/bags}/BaggageSelectionCard.tsx

@@ -1,3 +1,5 @@
+import { AnimatedLoaderEllipsis } from "@components/shared/AnimatedLoaderEllipsis";
+import { Stamp } from "@components/shared/Stamp";
 import { getCurrencyForServices } from "@lib/getCurrencyForServices";
 import { getTotalAmountForServices } from "@lib/getTotalAmountForServices";
 import { getTotalQuantity } from "@lib/getTotalQuantity";
@@ -8,11 +10,9 @@ import React from "react";
 import {
   CreateOrderPayload,
   CreateOrderPayloadServices,
-} from "../../types/CreateOrderPayload";
-import { Offer } from "../../types/Offer";
-import { AnimatedLoaderEllipsis } from "../AnimatedLoaderEllipsis";
+} from "../../../types/CreateOrderPayload";
+import { Offer } from "../../../types/Offer";
 import { Card } from "../Card";
-import { Stamp } from "../Stamp";
 import { BaggageSelectionModal } from "./BaggageSelectionModal";
 
 export interface BaggageSelectionCardProps {
@@ -86,7 +86,12 @@ export const BaggageSelectionCard: React.FC<BaggageSelectionCardProps> = ({
         offer={offer}
         passengers={passengers}
         onClose={(newSelectedServices) => {
-          setSelectedServices(newSelectedServices);
+          // We need to do a deep copy here because otherwise the modal changing the quantity
+          // will affect the selected services regardless of whether it's saved or not
+          const newSelectedServicesDeepCopy = JSON.parse(
+            JSON.stringify(newSelectedServices)
+          );
+          setSelectedServices(newSelectedServicesDeepCopy);
           setIsOpen(false);
         }}
         selectedServices={selectedServices}

package/src/components/{bags → DuffelAncillaries/bags}/BaggageSelectionController.tsx

@@ -2,8 +2,8 @@ import { getBaggageServiceDescription } from "@lib/getBaggageServiceDescription"
 import { hasServiceOfSameMetadataTypeAlreadyBeenSelected } from "@lib/hasServiceOfSameMetadataTypeAlreadyBeenSelected";
 import { moneyStringFormatter } from "@lib/moneyStringFormatter";
 import React from "react";
-import { CreateOrderPayloadServices } from "../../types/CreateOrderPayload";
-import { OfferAvailableServiceBaggage } from "../../types/Offer";
+import { CreateOrderPayloadServices } from "../../../types/CreateOrderPayload";
+import { OfferAvailableServiceBaggage } from "../../../types/Offer";
 import { Counter } from "../Counter";
 
 interface BaggageSelectionControllerProps {

package/src/components/{bags → DuffelAncillaries/bags}/BaggageSelectionModal.tsx

@@ -1,3 +1,4 @@
+import { Modal } from "@components/shared/Modal";
 import { getCurrencyForServices } from "@lib/getCurrencyForServices";
 import { getPassengerMapById } from "@lib/getPassengerMapById";
 import { getSegmentList } from "@lib/getSegmentList";
@@ -7,9 +8,8 @@ import React, { useState } from "react";
 import {
   CreateOrderPayload,
   CreateOrderPayloadServices,
-} from "../../types/CreateOrderPayload";
-import { Offer } from "../../types/Offer";
-import { Modal } from "../Modal";
+} from "../../../types/CreateOrderPayload";
+import { Offer } from "../../../types/Offer";
 import { BaggageSelectionModalBody } from "./BaggageSelectionModalBody";
 import { BaggageSelectionModalFooter } from "./BaggageSelectionModalFooter";
 import { BaggageSelectionModalHeader } from "./BaggageSelectionModalHeader";
@@ -48,7 +48,7 @@ export const BaggageSelectionModal: React.FC<BaggageSelectionModalProps> = ({
   }
 
   return (
-    <Modal isOpen={isOpen} onClose={() => onClose(selectedServicesState)}>
+    <Modal isOpen={isOpen} onClose={() => onClose(selectedServices)}>
       <BaggageSelectionModalHeader
         segmentCount={segments.length}
         currentSegment={currentSegment}

package/src/components/{bags → DuffelAncillaries/bags}/BaggageSelectionModalBody.tsx

@@ -1,15 +1,15 @@
-import { ModalBody } from "@components/Modal";
+import { ModalBody } from "@components/shared/Modal";
 import { getPassengerName } from "@lib/getPassengerName";
 import React from "react";
 import {
   CreateOrderPayloadPassenger,
   CreateOrderPayloadServices,
-} from "../../types/CreateOrderPayload";
+} from "../../../types/CreateOrderPayload";
 import {
   Offer,
   OfferAvailableServiceBaggage,
   OfferSliceSegment,
-} from "../../types/Offer";
+} from "../../../types/Offer";
 import { BaggageSelectionModalBodyPassenger } from "./BaggageSelectionModalBodyPassenger";
 
 export interface BaggageSelectionModalBodyProps {

package/src/components/{bags → DuffelAncillaries/bags}/BaggageSelectionModalBodyPassenger.tsx

@@ -1,9 +1,9 @@
 import React from "react";
-import { CreateOrderPayloadServices } from "../../types/CreateOrderPayload";
+import { CreateOrderPayloadServices } from "../../../types/CreateOrderPayload";
 import {
   OfferAvailableServiceBaggage,
   OfferSliceSegmentPassengerBaggage,
-} from "../../types/Offer";
+} from "../../../types/Offer";
 import { BaggageSelectionController } from "./BaggageSelectionController";
 import { IncludedBaggageBanner } from "./IncludedBaggageBanner";
 
@@ -38,9 +38,9 @@ export const BaggageSelectionModalBodyPassenger: React.FC<
       <h3 style={{ margin: 0 }} className="p1--semibold">
         {passengerName}
       </h3>
-      {hasIncludedBaggage && (
+      {hasIncludedBaggage ? (
         <IncludedBaggageBanner includedBaggage={includedBaggage} />
-      )}
+      ) : null}
 
       <div style={{ display: "flex", rowGap: "8px", flexDirection: "column" }}>
         {passengerServicesForSegment.map((availableService) => (

package/src/components/{bags → DuffelAncillaries/bags}/BaggageSelectionModalFooter.tsx

@@ -1,11 +1,11 @@
+import { Button } from "@components/shared/Button";
 import { ServicePriceMapById } from "@lib/getServicePriceMapById";
 import { getTotalAmountForServicesWithPriceMap } from "@lib/getTotalAmountForServices";
 import { getTotalQuantity } from "@lib/getTotalQuantity";
 import { moneyStringFormatter } from "@lib/moneyStringFormatter";
 import { withPlural } from "@lib/withPlural";
 import React from "react";
-import { CreateOrderPayloadServices } from "../../types/CreateOrderPayload";
-import { Button } from "../Button";
+import { CreateOrderPayloadServices } from "../../../types/CreateOrderPayload";
 
 export interface BaggageSelectionModalFooterProps {
   currency: string;
@@ -38,6 +38,7 @@ export const BaggageSelectionModalFooter: React.FC<
     selectedServices
   );
   const totalAmountLabel = moneyStringFormatter(currency)(totalAmount);
+  const isOneWay = isFirstSegment && isFirstSegment;
 
   return (
     <div style={{ padding: "16px 24px 24px" }}>
@@ -51,21 +52,27 @@ export const BaggageSelectionModalFooter: React.FC<
       </div>
 
       <div
-        style={{
-          marginTop: "16px",
-          display: "grid",
-          columnGap: "12px",
-          gridTemplateColumns: "repeat(2, 1fr)",
-        }}
+        style={
+          isOneWay
+            ? { marginTop: "16px", display: "grid" }
+            : {
+                marginTop: "16px",
+                display: "grid",
+                columnGap: "12px",
+                gridTemplateColumns: "repeat(2, 1fr)",
+              }
+        }
       >
-        <Button
-          size={48}
-          variant="outlined"
-          disabled={isFirstSegment}
-          onClick={() => onPreviousSegmentButtonClicked()}
-        >
-          Back
-        </Button>
+        {!isOneWay && (
+          <Button
+            size={48}
+            variant="outlined"
+            disabled={isFirstSegment}
+            onClick={() => onPreviousSegmentButtonClicked()}
+          >
+            Back
+          </Button>
+        )}
         <Button
           size={48}
           data-testid="confirm-selection-for-baggage"

package/src/components/{bags → DuffelAncillaries/bags}/BaggageSelectionModalHeader.tsx

@@ -1,6 +1,6 @@
 import { formatDateString } from "@lib/formatDate";
 import React from "react";
-import { OfferSliceSegment } from "../../types/Offer";
+import { OfferSliceSegment } from "../../../types/Offer";
 
 export interface BaggageSelectionModalHeaderProps {
   segmentCount: number;
@@ -18,21 +18,26 @@ export const BaggageSelectionModalHeader: React.FC<
   setCurrentSegmentIndex,
 }) => (
   <div style={{ padding: "24px 24px 16px" }}>
-    <div style={{ display: "flex", columnGap: "4px" }}>
-      {Array(segmentCount)
-        .fill(0)
-        .map((_, index) =>
-          index === currentSegmentIndex ? (
-            <ActiveSegment key={`segment_${index}`} />
-          ) : (
-            <InactiveSegment
-              key={`segment_${index}`}
-              onClick={() => setCurrentSegmentIndex(index)}
-            />
-          )
-        )}
-    </div>
-    <h2 className="h3--semibold" style={{ marginTop: "12px" }}>
+    {segmentCount > 1 && (
+      <div style={{ display: "flex", columnGap: "4px" }}>
+        {Array(segmentCount)
+          .fill(0)
+          .map((_, index) =>
+            index === currentSegmentIndex ? (
+              <ActiveSegment key={`segment_${index}`} />
+            ) : (
+              <InactiveSegment
+                key={`segment_${index}`}
+                onClick={() => setCurrentSegmentIndex(index)}
+              />
+            )
+          )}
+      </div>
+    )}
+    <h2
+      className="h3--semibold"
+      style={segmentCount > 1 ? { marginTop: "12px" } : {}}
+    >
       Flight to {currentSegment.destination.iata_code}
       <span
         className="p2--regular"
@@ -59,7 +64,8 @@ const InactiveSegment: React.FC<{
       height: "4px",
       padding: "0",
       borderRadius: "4px",
-      backgroundColor: "rgba(var(--ACCENT), var(--ACCENT-LIGHT-200))",
+      backgroundColor:
+        "var(--TERTIARY, rgba(var(--ACCENT), var(--ACCENT-LIGHT-200)))",
       transition: "background-color 0.3s var(--TRANSITION-CUBIC-BEZIER)",
       ...style,
     }}
@@ -70,7 +76,7 @@ const ActiveSegment = () => (
   <InactiveSegment
     onClick={undefined}
     style={{
-      backgroundColor: "rgb(var(--ACCENT))",
+      backgroundColor: "var(--SECONDARY, rgb(var(--ACCENT)))",
     }}
   />
 );