@duffel/components 3.0.7-canary → 3.1.2

package/react-dist/lib/captureErrorInSentry.d.ts

@@ -1 +1 @@
-export declare const captureErrorInSentry: (error: Error, context?: Record<string, any>) => string;
+export declare const captureErrorInSentry: (error: Error) => string;

package/react-dist/lib/fetchFromDuffelAPI.d.ts

@@ -1 +1,8 @@
+export interface ErrorResponse extends Response {
+    data: {
+        meta: any;
+        errors: any[];
+    };
+}
+export declare const isErrorResponse: (response: any) => response is ErrorResponse;
 export declare function fetchFromDuffelAPI(withClientKey: string, path: string, method?: string, body?: string): Promise<any>;

package/react-dist/lib/hasHighLuminance.d.ts

@@ -0,0 +1 @@
+export declare const hasHighLuminance: (accentColor: string) => boolean;

package/react-dist/lib/logging.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 /**
  * The functions in this file are used to enable logging.
  *
@@ -24,10 +23,12 @@
  * log('This is a log message')
  * logGroup('These messages will be grouped together', ['This is a log message', 'This is another log message'])
  */
-declare const initializeLogger: (debugMode: boolean) => {
-    log: (message: any) => void;
-    logGroup: typeof logGroup;
-};
+declare const initializeLogger: (debugMode: boolean) => void;
+/**
+ * Log a message to the console. Messages will be prefixed with "[Duffel Ancillaries]".
+ * @param message The message to print to the console.
+ */
+declare const log: (message: any) => void;
 /**
  * Log a series of messages to the console inside a collapsible group.
  * @param groupName The name of the group of messages. This will be prefixed with "[Duffel Ancillaries]".
@@ -42,12 +43,4 @@ declare function logGroup(groupName: string, messages: any[]): void;
 declare function logGroup(groupName: string, object: {
     [key: string]: any;
 }): void;
-declare const LogContext: import("react").Context<{
-    log: (message: any) => void;
-    logGroup: typeof logGroup;
-}>;
-declare const useLog: () => {
-    log: (message: any) => void;
-    logGroup: typeof logGroup;
-};
-export { LogContext, initializeLogger, useLog };
+export { initializeLogger, logGroup, log };

package/react-dist/lib/retrieveSeatMaps.d.ts

@@ -1,2 +1,2 @@
 import { SeatMap } from "../types/SeatMap";
-export declare function retrieveSeatMaps(offer_id: string, client_key: string | null, onError: (error: string) => void, setIsLoading: (isLoading: boolean) => void, onSeatMapReady: (seatMaps: SeatMap[]) => void): Promise<void>;
+export declare function retrieveSeatMaps(offer_id: string, client_key: string | null, onError: () => void, setIsLoading: (isLoading: boolean) => void, onSeatMapReady: (seatMaps: SeatMap[]) => void): Promise<void>;

package/react-dist/types/DuffelAncillariesProps.d.ts

@@ -45,7 +45,7 @@ export type DuffelAncillariesPriceFormatterForSeats = (amount: number, currency:
 };
 export type DuffelAncillariesPriceFormatterForCancelForAnyReason = (amount: number, currency: string, service: OfferAvailableServiceCancelForAnyReason) => {
     amount: number;
-    currency: string;
+    currency?: string;
 };
 export interface DuffelAncillariesPriceFormatters {
     bags?: DuffelAncillariesPriceFormatterForBags;

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"