@duffel/components 3.1.1 → 3.1.2--prototype

package/src/components/DuffelAncillaries/DuffelAncillaries.tsx

@@ -266,7 +266,8 @@ export const DuffelAncillaries: React.FC<DuffelAncillariesProps> = (props) => {
     }),
     ...(props.styles?.accentColor &&
       hasHighLuminance(props.styles.accentColor) && {
-        "--SECONDARY": "black",
+        "--SECONDARY": "var(--GREY-900)",
+        "--TERTIARY": "var(--GREY-400)",
       }),
     ...(props.styles?.fontFamily && {
       "--FONT-FAMILY": props.styles.fontFamily,

package/src/components/DuffelAncillaries/bags/BaggageSelectionModalBodyPassenger.tsx

@@ -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/DuffelAncillaries/bags/BaggageSelectionModalHeader.tsx

@@ -64,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,
     }}
@@ -75,7 +76,7 @@ const ActiveSegment = () => (
   <InactiveSegment
     onClick={undefined}
     style={{
-      backgroundColor: "rgb(var(--ACCENT))",
+      backgroundColor: "var(--SECONDARY, rgb(var(--ACCENT)))",
     }}
   />
 );

package/src/components/DuffelAncillaries/cancel_for_any_reason/CfarSelectionModalFooter.tsx

@@ -67,7 +67,7 @@ const ProtectedTripBanner: React.FC = () => (
     <Icon
       size={20}
       name="shield_with_moon"
-      style={{ fill: "rgb(var(--ACCENT))" }}
+      style={{ fill: "var(--SECONDARY, rgb(var(--ACCENT)))" }}
     />
     Your trip is protected
   </div>

package/src/components/DuffelAncillaries/seats/SeatSelectionModalHeader.tsx

@@ -79,7 +79,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,
     }}
@@ -90,7 +91,7 @@ const ActiveSegment = () => (
   <InactiveSegment
     onClick={undefined}
     style={{
-      backgroundColor: "rgb(var(--ACCENT))",
+      backgroundColor: "var(--SECONDARY, rgb(var(--ACCENT)))",
     }}
   />
 );

package/src/components/DuffelPayments/DuffelPayments.tsx

@@ -196,6 +196,7 @@ export const DuffelPayments: React.FC<DuffelPaymentsProps> = (props) => {
     ...(props.styles?.accentColor &&
       hasHighLuminance(props.styles.accentColor) && {
         "--SECONDARY": "black",
+        "--TERTIARY": "grey",
       }),
     ...(props.styles?.fontFamily && {
       "--FONT-FAMILY": props.styles.fontFamily,

package/src/components/ShowData/ShowData.tsx

@@ -0,0 +1,38 @@
+import { Button } from "@components/shared/Button";
+import React from "react";
+
+function isJsonString(dataString: string) {
+  try {
+    JSON.parse(dataString);
+  } catch (e) {
+    return false;
+  }
+  return true;
+}
+
+export interface ShowDataProps {
+  data: any;
+  onFinished: (newData: any) => void;
+}
+
+export const ShowData: React.FC<ShowDataProps> = ({ data, onFinished }) => {
+  const [textareaData, setTextareaData] = React.useState("{}");
+  const isValid = isJsonString(textareaData);
+
+  return (
+    <div>
+      <pre>{JSON.stringify(data, null, 2)}</pre>
+      <textarea
+        value={textareaData}
+        onChange={(e) => setTextareaData(e.target.value)}
+      />
+      <Button
+        disabled={!isValid}
+        onClick={() => onFinished(JSON.parse(textareaData))}
+      >
+        Click me to trigger `onFinished` event
+      </Button>
+      {!isValid && <p style={{ color: "tomato" }}>Invalid JSON</p>}
+    </div>
+  );
+};

package/src/components/ShowData/ShowDataCustomElement.tsx

@@ -0,0 +1,85 @@
+import { createRoot, Root } from "react-dom/client";
+import { ShowData, ShowDataProps } from "./ShowData";
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace JSX {
+    interface IntrinsicElements {
+      "show-data": React.DetailedHTMLProps<
+        React.HTMLAttributes<HTMLElement>,
+        HTMLElement
+      >;
+    }
+  }
+}
+
+const CUSTOM_ELEMENT_TAG = "show-data";
+
+type ShowDataRenderArguments = Pick<ShowDataProps, "data">;
+
+class ShowDataCustomElement extends HTMLElement {
+  /**
+   * The React root for displaying content inside a browser DOM element.
+   */
+  private root!: Root;
+
+  /**
+   * `connectedCallback` is called to initialise the custom element
+   */
+  connectedCallback() {
+    const container = document.createElement("div");
+    this.appendChild(container);
+
+    this.root = createRoot(container);
+  }
+
+  /**
+   * When this function is called, it will render/re-render
+   * the `DuffelPayments` component with the given props.
+   */
+  public render(withProps: ShowDataRenderArguments) {
+    if (!this.root) {
+      throw "It was not possible to render `duffel-payments` because `this.root` is missing.";
+    }
+
+    this.root.render(
+      <ShowData
+        {...withProps}
+        onFinished={() => {
+          this.dispatchEvent(
+            new CustomEvent("onFinished", {
+              composed: true,
+            })
+          );
+        }}
+      />
+    );
+  }
+}
+
+window.customElements.get(CUSTOM_ELEMENT_TAG) ||
+  window.customElements.define(CUSTOM_ELEMENT_TAG, ShowDataCustomElement);
+
+function tryToGetShowData(caller: string): ShowDataCustomElement {
+  const element =
+    document.querySelector<ShowDataCustomElement>(CUSTOM_ELEMENT_TAG);
+  if (!element) {
+    throw new Error(
+      `Could not find duffel-payments element in the DOM. Maybe you need to call ${caller} after 'window.onload'?`
+    );
+  }
+  return element;
+}
+
+export function renderShowData(props: ShowDataRenderArguments) {
+  const element = tryToGetShowData("renderShowData");
+  element.render(props);
+}
+
+export function onShowDataFinished(onFinished: ShowDataProps["onFinished"]) {
+  const element = tryToGetShowData("onShowDataFinished");
+
+  // using `as EventListener` here because typescript doesn't know the event type for `onPayloadReady`
+  // There's a few different suggestions to resolve this seemed good enough
+  // You can learn more here: https://github.com/microsoft/TypeScript/issues/28357
+  element.addEventListener("onFinished", onFinished as EventListener);
+}

package/src/fixtures/offers/off_1.json

@@ -33,16 +33,7 @@
               "fare_basis_code": "Y20LGTN2",
               "cabin_class_marketing_name": "Economy",
               "cabin_class": "economy",
-              "baggages": [
-                {
-                  "type": "checked",
-                  "quantity": 1
-                },
-                {
-                  "type": "carry_on",
-                  "quantity": 1
-                }
-              ]
+              "baggages": []
             }
           ],
           "origin_terminal": "2",

package/src/stories/Button.stories.tsx

@@ -76,6 +76,7 @@ const WhiteAccentColorWrapper: React.FC<{ children: React.ReactNode }> = ({
       {
         "--ACCENT": "255, 255, 255",
         "--SECONDARY": "black",
+        "--TERTIARY": "grey",
       } as any
     }
   >

package/src/stories/DuffelAncillaries.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryFn, StoryObj } from "@storybook/react";
 import { DuffelAncillaries } from "../components/DuffelAncillaries/DuffelAncillaries";
 import mockPassengers from "../fixtures/passengers/mock_passengers";
 import { DuffelAncillariesPropsWithOffersAndSeatMaps } from "../types/DuffelAncillariesProps";
@@ -146,3 +146,21 @@ export const MarkupUsingPriceFormattersWithCustomCurrency: DuffelAncillariesStor
       },
     },
   };
+
+export const WithAccentColorSet: StoryFn<
+  DuffelAncillariesPropsWithOffersAndSeatMaps
+> = () => (
+  <DuffelAncillaries
+    {...defaultProps}
+    styles={{ accentColor: "29, 78, 216" }}
+  />
+);
+
+export const WithWhiteAccentColorSet: StoryFn<
+  DuffelAncillariesPropsWithOffersAndSeatMaps
+> = () => (
+  <DuffelAncillaries
+    {...defaultProps}
+    styles={{ accentColor: "255, 255, 255" }}
+  />
+);

package/src/stories/ShowData.stories.tsx

@@ -0,0 +1,16 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { ShowData, ShowDataProps } from "../components/ShowData/ShowData";
+
+export default {
+  title: "ShowData",
+  component: ShowData,
+} as Meta;
+
+const defaultProps: ShowDataProps = {
+  data: { heres: "some test data" },
+  onFinished: console.log,
+};
+
+export const AllServices: StoryObj<typeof ShowData> = {
+  args: defaultProps,
+};

package/src/styles/components/Card.css

@@ -33,18 +33,18 @@
 .ancillary-card:not(:disabled):not(.ancillary-card--loading):hover,
 .ancillary-card:not(:disabled):not(.ancillary-card--loading):focus-visible {
   /* important is needed here to override the inline border style from Card.tsx */
-  border-color: rgb(var(--ACCENT)) !important;
+  border-color: var(--SECONDARY, rgb(var(--ACCENT))) !important;
 }
 
 .ancillary-card:not(:disabled):not(.ancillary-card--loading):hover
   .ancillary-card__expand-icon,
 .ancillary-card:not(:disabled):not(.ancillary-card--loading):focus-visible
   .ancillary-card__expand-icon {
-  color: rgb(var(--ACCENT));
+  color: var(--SECONDARY, rgb(var(--ACCENT)));
 }
 
 .ancillary-card__selected-icon {
-  background-color: rgb(var(--ACCENT));
+  background-color: var(--SECONDARY, rgb(var(--ACCENT)));
   border-radius: 20px;
   color: rgb(var(--WHITE));
   height: 24px;

package/src/styles/components/CfarSelectionModal.css

@@ -17,7 +17,7 @@
 }
 
 .cfar-modal-list-item > svg {
-  color: rgb(var(--ACCENT));
+  color: var(--SECONDARY, rgb(var(--ACCENT)));
 }
 
 .cfar-modal-list-item > p {

package/src/styles/components/Legend.css

@@ -27,8 +27,9 @@
   width: var(--SPACING-MD-1);
   height: var(--SPACING-MD-1);
   border-radius: 5px;
-  border: 2px solid var(--GREY-400);
-  color: var(--GREY-400);
+  border: 2px solid var(--GREY-200);
+  color: var(--GREY-600);
+  background-color: var(--GREY-100);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -37,22 +38,25 @@
 
 .seat-map__legend-seat--fee-payable {
   background-color: rgba(var(--ACCENT), var(--ACCENT-LIGHT-100));
-  border: 2px solid rgba(var(--ACCENT), var(--ACCENT-LIGHT-200));
+  border: 2px solid
+    var(--TERTIARY, rgba(var(--ACCENT), var(--ACCENT-LIGHT-200)));
 }
 
 .seat-map__legend-seat--fee-payable-indicator {
   position: relative;
   top: var(--SPACING-XS-2);
   left: var(--SPACING-XS-2);
-  color: rgba(var(--ACCENT), var(--ACCENT-LIGHT-300));
+  color: var(--TERTIARY, rgba(var(--ACCENT), var(--ACCENT-LIGHT-300)));
 }
 
 .seat-map__legend-seat--included {
   background-color: rgba(var(--ACCENT), var(--ACCENT-LIGHT-100));
-  border: 2px solid rgba(var(--ACCENT), var(--ACCENT-LIGHT-200));
+  border: 2px solid
+    var(--TERTIARY, rgba(var(--ACCENT), var(--ACCENT-LIGHT-200)));
 }
 
 .seat-map__legend-seat--selected {
   background-color: rgba(var(--ACCENT), var(--ACCENT-LIGHT-1000));
-  border: 2px solid rgba(var(--ACCENT), var(--ACCENT-LIGHT-1000));
+  border: 2px solid
+    var(--SECONDARY, rgba(var(--ACCENT), var(--ACCENT-LIGHT-1000)));
 }

package/src/styles/components/LoadingState.css

@@ -24,7 +24,10 @@
   margin: var(--SPACING-SM-3) 0;
   border-radius: 999px;
   width: calc(100% - var(--SPACING-SM-1));
-  background-color: rgba(var(--ACCENT), var(--ACCENT-LIGHT-100));
+  background-color: var(
+    --SECONDARY,
+    rgba(var(--ACCENT), var(--ACCENT-LIGHT-100))
+  );
   position: relative;
   transition: var(--TRANSITIONS-CUBIC-BEZIER);
 }
@@ -33,7 +36,10 @@
   display: block;
   height: 100%;
   border-radius: 999px;
-  background-color: rgba(var(--ACCENT), var(--ACCENT-LIGHT-1000));
+  background-color: var(
+    --TERTIARY,
+    rgba(var(--ACCENT), var(--ACCENT-LIGHT-1000))
+  );
   position: relative;
   animation: fillstatus 1s linear;
 }

package/src/styles/components/PassengerSelect.css

@@ -43,7 +43,10 @@
 .passenger-selection-passenger:hover,
 .passenger-selection-passenger:focus,
 .passenger-selection-passenger:active {
-  background-color: rgba(var(--ACCENT), var(--ACCENT-LIGHT-100));
+  background-color: var(
+    --SECONDARY,
+    rgba(var(--ACCENT), var(--ACCENT-LIGHT-100))
+  );
 }
 
 .passenger-selection-passenger__identifier,
@@ -78,7 +81,10 @@
 .passenger-selection-passenger--selected {
   box-shadow: 4px 0px 0px 0px rgba(var(--ACCENT), var(--ACCENT-LIGHT-1000))
     inset;
-  background-color: rgba(var(--ACCENT), var(--ACCENT-LIGHT-100));
+  background-color: var(
+    --SECONDARY,
+    rgba(var(--ACCENT), var(--ACCENT-LIGHT-100))
+  );
 }
 
 .passenger-selection-segment {

package/src/styles/components/Seat.css

@@ -21,16 +21,17 @@
 }
 
 .map-element--available {
-  border: 2px solid rgba(var(--ACCENT), var(--ACCENT-LIGHT-200));
+  border: 2px solid
+    var(--TERTIARY, rgba(var(--ACCENT), var(--ACCENT-LIGHT-200)));
   background-color: rgba(var(--ACCENT), var(--ACCENT-LIGHT-100));
-  color: rgba(var(--ACCENT), var(--ACCENT-LIGHT-300));
+  color: var(--TERTIARY, rgba(var(--ACCENT), var(--ACCENT-LIGHT-300)));
 }
 
 .map-element--fee-payable {
   position: absolute;
   bottom: -2px;
   right: -2px;
-  color: rgba(var(--ACCENT), var(--ACCENT-LIGHT-300));
+  color: var(--TERTIARY, rgba(var(--ACCENT), var(--ACCENT-LIGHT-300)));
 }
 
 @media (hover: hover) and (pointer: fine) {
@@ -40,18 +41,19 @@
 
   .map-element--actionable:not(.map-element--selected):hover {
     background-color: rgba(var(--ACCENT), var(--ACCENT-LIGHT-200));
-    color: rgba(var(--ACCENT), var(--ACCENT-LIGHT-1000));
+    color: var(--SECONDARY, rgba(var(--ACCENT), var(--ACCENT-LIGHT-1000)));
     transition: var(--TRANSITIONS-CUBIC-BEZIER);
   }
 
   .map-element--fee-payable {
-    color: rgba(var(--ACCENT), var(--ACCENT-LIGHT-1000));
+    color: var(--TERTIARY, rgba(var(--ACCENT), var(--ACCENT-LIGHT-1000)));
     transition: var(--TRANSITIONS-CUBIC-BEZIER);
   }
 }
 
 .map-element--selected {
   background-color: rgba(var(--ACCENT), var(--ACCENT-LIGHT-1000));
-  border: 2px solid rgba(var(--ACCENT), var(--ACCENT-LIGHT-1000));
-  color: rgba(var(--WHITE), 1);
+  border: 2px solid
+    var(--SECONDARY, rgba(var(--ACCENT), var(--ACCENT-LIGHT-1000)));
+  color: var(--SECONDARY, rgba(var(--WHITE), 1));
 }

package/src/styles/components/Tabs.css

@@ -28,8 +28,11 @@
 .seat-map__tab-select-option:hover,
 .seat-map__tab-select-option:focus,
 .seat-map__tab-select-option:active {
-  color: rgba(var(--ACCENT), var(--ACCENT-LIGHT-1000));
-  background-color: rgba(var(--ACCENT), var(--ACCENT-LIGHT-200));
+  color: var(--SECONDARY, rgba(var(--ACCENT), var(--ACCENT-LIGHT-1000)));
+  background-color: var(
+    --TERTIARY,
+    rgba(var(--ACCENT), var(--ACCENT-LIGHT-200))
+  );
   transition: var(--TRANSITIONS-CUBIC-BEZIER);
 }
 

package/react-dist/components/DuffelAncillaries/Card.d.ts

@@ -1,14 +0,0 @@
-import { IconName } from "@components/shared/Icon";
-import * as React from "react";
-export interface CardProps {
-    buttonTitle: string;
-    title: string;
-    icon: IconName;
-    onClick?: (() => void) | null;
-    children: React.ReactNode;
-    copy: string;
-    isLoading?: boolean;
-    disabled?: boolean;
-    isSelected?: boolean;
-}
-export declare const Card: React.FC<CardProps>;

package/react-dist/components/DuffelAncillaries/Counter.d.ts

@@ -1,10 +0,0 @@
-import * as React from "react";
-interface CounterProps {
-    id: string;
-    min: number;
-    max: number;
-    value: number;
-    onChange: (value: number) => void;
-}
-export declare const Counter: React.FC<CounterProps>;
-export {};

package/react-dist/components/DuffelAncillaries/DuffelAncillaries.d.ts

@@ -1,3 +0,0 @@
-import * as React from "react";
-import { DuffelAncillariesProps } from "../../types/DuffelAncillariesProps";
-export declare const DuffelAncillaries: React.FC<DuffelAncillariesProps>;

package/react-dist/components/DuffelAncillaries/DuffelAncillariesCustomElement.d.ts

@@ -1,13 +0,0 @@
-/// <reference types="react" />
-import { DuffelAncillariesPropsWithClientKeyAndOfferId, DuffelAncillariesPropsWithOfferIdForFixture, DuffelAncillariesPropsWithOffersAndSeatMaps, DuffelAncillariesPropWithOfferAndClientKey, OnPayloadReady } from "../../types/DuffelAncillariesProps";
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            "duffel-ancillaries": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
-        }
-    }
-}
-type DuffelAncillariesCustomElementRenderArguments = Omit<DuffelAncillariesPropsWithOfferIdForFixture, "onPayloadReady"> | Omit<DuffelAncillariesPropsWithClientKeyAndOfferId, "onPayloadReady"> | Omit<DuffelAncillariesPropWithOfferAndClientKey, "onPayloadReady"> | Omit<DuffelAncillariesPropsWithOffersAndSeatMaps, "onPayloadReady">;
-export declare function renderDuffelAncillariesCustomElement(props: DuffelAncillariesCustomElementRenderArguments): void;
-export declare function onDuffelAncillariesPayloadReady(onPayloadReady: OnPayloadReady): void;
-export {};

package/react-dist/components/DuffelAncillaries/bags/BaggageSelectionCard.d.ts

@@ -1,11 +0,0 @@
-import React from "react";
-import { CreateOrderPayload, CreateOrderPayloadServices } from "../../../types/CreateOrderPayload";
-import { Offer } from "../../../types/Offer";
-export interface BaggageSelectionCardProps {
-    isLoading: boolean;
-    offer?: Offer;
-    passengers: CreateOrderPayload["passengers"];
-    selectedServices: CreateOrderPayloadServices;
-    setSelectedServices: (selectedServices: CreateOrderPayloadServices) => void;
-}
-export declare const BaggageSelectionCard: React.FC<BaggageSelectionCardProps>;

package/react-dist/components/DuffelAncillaries/bags/BaggageSelectionController.d.ts

@@ -1,13 +0,0 @@
-import React from "react";
-import { CreateOrderPayloadServices } from "../../../types/CreateOrderPayload";
-import { OfferAvailableServiceBaggage } from "../../../types/Offer";
-interface BaggageSelectionControllerProps {
-    segmentId: string;
-    passengerId: string;
-    availableService: OfferAvailableServiceBaggage;
-    selectedServices: CreateOrderPayloadServices;
-    quantity: number;
-    onQuantityChanged: (quantity: number) => void;
-}
-export declare const BaggageSelectionController: React.FC<BaggageSelectionControllerProps>;
-export {};

package/react-dist/components/DuffelAncillaries/bags/BaggageSelectionModal.d.ts

@@ -1,11 +0,0 @@
-import React from "react";
-import { CreateOrderPayload, CreateOrderPayloadServices } from "../../../types/CreateOrderPayload";
-import { Offer } from "../../../types/Offer";
-export interface BaggageSelectionModalProps {
-    isOpen: boolean;
-    offer?: Offer;
-    passengers: CreateOrderPayload["passengers"];
-    selectedServices: CreateOrderPayloadServices;
-    onClose: (selectedServices: CreateOrderPayloadServices) => void;
-}
-export declare const BaggageSelectionModal: React.FC<BaggageSelectionModalProps>;

package/react-dist/components/DuffelAncillaries/bags/BaggageSelectionModalBody.d.ts

@@ -1,11 +0,0 @@
-import React from "react";
-import { CreateOrderPayloadPassenger, CreateOrderPayloadServices } from "../../../types/CreateOrderPayload";
-import { Offer, OfferSliceSegment } from "../../../types/Offer";
-export interface BaggageSelectionModalBodyProps {
-    offer: Offer;
-    segment: OfferSliceSegment;
-    passengersById: Record<CreateOrderPayloadPassenger["id"], CreateOrderPayloadPassenger>;
-    selectedServices: CreateOrderPayloadServices;
-    setSelectedServices: (selectedServices: CreateOrderPayloadServices) => void;
-}
-export declare const BaggageSelectionModalBody: React.FC<BaggageSelectionModalBodyProps>;

package/react-dist/components/DuffelAncillaries/bags/BaggageSelectionModalBodyPassenger.d.ts

@@ -1,13 +0,0 @@
-import React from "react";
-import { CreateOrderPayloadServices } from "../../../types/CreateOrderPayload";
-import { OfferAvailableServiceBaggage, OfferSliceSegmentPassengerBaggage } from "../../../types/Offer";
-export interface BaggageSelectionModalBodyPassengerProps {
-    segmentId: string;
-    passengerId: string;
-    passengerName: string;
-    includedBaggage: OfferSliceSegmentPassengerBaggage[];
-    passengerServicesForSegment: OfferAvailableServiceBaggage[];
-    selectedServices: CreateOrderPayloadServices;
-    setSelectedServices: (selectedServices: CreateOrderPayloadServices) => void;
-}
-export declare const BaggageSelectionModalBodyPassenger: React.FC<BaggageSelectionModalBodyPassengerProps>;

package/react-dist/components/DuffelAncillaries/bags/BaggageSelectionModalFooter.d.ts

@@ -1,14 +0,0 @@
-import { ServicePriceMapById } from "@lib/getServicePriceMapById";
-import React from "react";
-import { CreateOrderPayloadServices } from "../../../types/CreateOrderPayload";
-export interface BaggageSelectionModalFooterProps {
-    currency: string;
-    selectedServices: CreateOrderPayloadServices;
-    servicePrices: ServicePriceMapById;
-    isFirstSegment: boolean;
-    isLastSegment: boolean;
-    onNextSegmentButtonClicked: () => void;
-    onPreviousSegmentButtonClicked: () => void;
-    onClose: () => void;
-}
-export declare const BaggageSelectionModalFooter: React.FC<BaggageSelectionModalFooterProps>;

package/react-dist/components/DuffelAncillaries/bags/BaggageSelectionModalHeader.d.ts

@@ -1,9 +0,0 @@
-import React from "react";
-import { OfferSliceSegment } from "../../../types/Offer";
-export interface BaggageSelectionModalHeaderProps {
-    segmentCount: number;
-    currentSegmentIndex: number;
-    currentSegment: OfferSliceSegment;
-    setCurrentSegmentIndex: (index: number) => void;
-}
-export declare const BaggageSelectionModalHeader: React.FC<BaggageSelectionModalHeaderProps>;

package/react-dist/components/DuffelAncillaries/bags/IncludedBaggageBanner.d.ts

@@ -1,7 +0,0 @@
-import React from "react";
-import { OfferSliceSegmentPassengerBaggage } from "../../../types/Offer";
-interface IncludedBaggageBannerProps {
-    includedBaggage: OfferSliceSegmentPassengerBaggage[];
-}
-export declare const IncludedBaggageBanner: React.FC<IncludedBaggageBannerProps>;
-export {};

package/react-dist/components/DuffelAncillaries/cancel_for_any_reason/CfarSelectionCard.d.ts

@@ -1,10 +0,0 @@
-import React from "react";
-import { CreateOrderPayloadServices } from "../../../types/CreateOrderPayload";
-import { Offer } from "../../../types/Offer";
-export interface CfarSelectionCardProps {
-    isLoading: boolean;
-    offer?: Offer;
-    selectedServices: CreateOrderPayloadServices;
-    setSelectedServices: (selectedServices: CreateOrderPayloadServices) => void;
-}
-export declare const CfarSelectionCard: React.FC<CfarSelectionCardProps>;

package/react-dist/components/DuffelAncillaries/cancel_for_any_reason/CfarSelectionModal.d.ts

@@ -1,11 +0,0 @@
-import React from "react";
-import { CreateOrderPayloadServices } from "../../../types/CreateOrderPayload";
-import { Offer, OfferAvailableServiceCancelForAnyReason } from "../../../types/Offer";
-export interface CfarSelectionModalProps {
-    isOpen: boolean;
-    offerCurrency?: Offer["base_currency"];
-    service?: OfferAvailableServiceCancelForAnyReason;
-    selectedServices: CreateOrderPayloadServices;
-    onClose: (selectedServices: CreateOrderPayloadServices) => void;
-}
-export declare const CfarSelectionModal: React.FC<CfarSelectionModalProps>;

package/react-dist/components/DuffelAncillaries/cancel_for_any_reason/CfarSelectionModalBody.d.ts

@@ -1,7 +0,0 @@
-import React from "react";
-import { Offer, OfferAvailableServiceCancelForAnyReason } from "../../../types/Offer";
-export interface CfarSelectionModalBodyProps {
-    offerCurrency: Offer["base_currency"];
-    service: OfferAvailableServiceCancelForAnyReason;
-}
-export declare const CfarSelectionModalBody: React.FC<CfarSelectionModalBodyProps>;

package/react-dist/components/DuffelAncillaries/cancel_for_any_reason/CfarSelectionModalBodyListItem.d.ts

@@ -1,4 +0,0 @@
-import React, { ReactNode } from "react";
-export declare const CfarSelectionModalBodyListItem: React.FC<{
-    children: ReactNode;
-}>;