@duffel/components 3.0.7-canary → 3.1.2

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)))",
     }}
   />
 );

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

@@ -1,6 +1,6 @@
 import { withPlural } from "@lib/withPlural";
 import React from "react";
-import { OfferSliceSegmentPassengerBaggage } from "../../types/Offer";
+import { OfferSliceSegmentPassengerBaggage } from "../../../types/Offer";
 
 interface IncludedBaggageBannerProps {
   includedBaggage: OfferSliceSegmentPassengerBaggage[];

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

@@ -1,5 +1,5 @@
-import { AnimatedLoaderEllipsis } from "@components/AnimatedLoaderEllipsis";
-import { Stamp } from "@components/Stamp";
+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";
@@ -7,8 +7,8 @@ import { hasService } from "@lib/hasService";
 import { isCancelForAnyReasonService } from "@lib/isCancelForAnyReasonService";
 import { moneyStringFormatter } from "@lib/moneyStringFormatter";
 import React from "react";
-import { CreateOrderPayloadServices } from "../../types/CreateOrderPayload";
-import { Offer } from "../../types/Offer";
+import { CreateOrderPayloadServices } from "../../../types/CreateOrderPayload";
+import { Offer } from "../../../types/Offer";
 import { Card } from "../Card";
 import { CfarSelectionModal } from "./CfarSelectionModal";
 

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

@@ -1,13 +1,13 @@
+import { Modal } from "@components/shared/Modal";
 import React from "react";
 import {
   CreateOrderPayloadServiceInformationForCancelForAnyReason,
   CreateOrderPayloadServices,
-} from "../../types/CreateOrderPayload";
+} from "../../../types/CreateOrderPayload";
 import {
   Offer,
   OfferAvailableServiceCancelForAnyReason,
-} from "../../types/Offer";
-import { Modal } from "../Modal";
+} from "../../../types/Offer";
 import { CfarSelectionModalBody } from "./CfarSelectionModalBody";
 import { CfarSelectionModalFooter } from "./CfarSelectionModalFooter";
 import { CfarSelectionModalHeader } from "./CfarSelectionModalHeader";

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

@@ -1,11 +1,11 @@
-import { Icon } from "@components/Icon";
-import { ModalBody } from "@components/Modal";
+import { Icon } from "@components/shared//Icon";
+import { ModalBody } from "@components/shared/Modal";
 import { moneyStringFormatter } from "@lib/moneyStringFormatter";
 import React from "react";
 import {
   Offer,
   OfferAvailableServiceCancelForAnyReason,
-} from "../../types/Offer";
+} from "../../../types/Offer";
 import { CfarSelectionModalBodyListItem } from "./CfarSelectionModalBodyListItem";
 
 export interface CfarSelectionModalBodyProps {

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

@@ -1,4 +1,4 @@
-import { Icon } from "@components/Icon";
+import { Icon } from "@components/shared/Icon";
 import React, { ReactNode } from "react";
 
 export const CfarSelectionModalBodyListItem: React.FC<{

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

@@ -1,9 +1,9 @@
-import { Icon } from "@components/Icon";
+import { Button } from "@components/shared/Button";
+import { Icon } from "@components/shared/Icon";
 import { moneyStringFormatter } from "@lib/moneyStringFormatter";
 import React from "react";
-import { CreateOrderPayloadServices } from "../../types/CreateOrderPayload";
-import { OfferAvailableServiceCancelForAnyReason } from "../../types/Offer";
-import { Button } from "../Button";
+import { CreateOrderPayloadServices } from "../../../types/CreateOrderPayload";
+import { OfferAvailableServiceCancelForAnyReason } from "../../../types/Offer";
 
 export interface CfarSelectionModalFooterProps {
   service: OfferAvailableServiceCancelForAnyReason;
@@ -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/{seats → DuffelAncillaries/seats}/Amenity.tsx

@@ -1,7 +1,7 @@
+import { Icon, IconName } from "@components/shared/Icon";
 import classNames from "classnames";
 import * as React from "react";
-import { SeatMapCabinRowSectionElementAmenity } from "../../types/SeatMap";
-import { Icon, IconName } from "../Icon";
+import { SeatMapCabinRowSectionElementAmenity } from "../../../types/SeatMap";
 
 const amenitiesWithoutWrapper = ["bassinet", "exit_row"];
 

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

@@ -1,4 +1,4 @@
-import { Tabs } from "@components/Tabs";
+import { Tabs } from "@components/shared/Tabs";
 import * as React from "react";
 
 export interface DeckSelectProps {

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

@@ -1,7 +1,7 @@
 import { isSeatElement } from "@lib/isSeatElement";
 import * as React from "react";
-import { CreateOrderPayloadSeatService } from "../../types/CreateOrderPayload";
-import { SeatMapCabinRowSectionElement } from "../../types/SeatMap";
+import { CreateOrderPayloadSeatService } from "../../../types/CreateOrderPayload";
+import { SeatMapCabinRowSectionElement } from "../../../types/SeatMap";
 import { Amenity } from "./Amenity";
 import { EmptyElement } from "./EmptyElement";
 import { ExitElement } from "./ExitElement";

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

@@ -1,6 +1,6 @@
+import { Icon } from "@components/shared/Icon";
 import classNames from "classnames";
 import * as React from "react";
-import { Icon } from "../Icon";
 
 interface ExitElementProps {
   isRight: boolean;

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

@@ -1,6 +1,6 @@
-import { Icon, IconName } from "@components/Icon";
+import { Icon, IconName } from "@components/shared/Icon";
 import * as React from "react";
-import { SeatMapCabinRowSectionElementAmenity } from "../../types/SeatMap";
+import { SeatMapCabinRowSectionElementAmenity } from "../../../types/SeatMap";
 
 export interface LegendProps {
   /**

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

@@ -1,7 +1,7 @@
 import { getRowNumber } from "@lib/getRowNumber";
 import * as React from "react";
-import { CreateOrderPayloadSeatService } from "../../types/CreateOrderPayload";
-import { SeatMapCabinRow } from "../../types/SeatMap";
+import { CreateOrderPayloadSeatService } from "../../../types/CreateOrderPayload";
+import { SeatMapCabinRow } from "../../../types/SeatMap";
 import { RowSection } from "./RowSection";
 
 export interface RowProps {

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

@@ -1,7 +1,10 @@
 import classNames from "classnames";
 import * as React from "react";
-import { CreateOrderPayloadSeatService } from "../../types/CreateOrderPayload";
-import { SeatMapCabinRow, SeatMapCabinRowSection } from "../../types/SeatMap";
+import { CreateOrderPayloadSeatService } from "../../../types/CreateOrderPayload";
+import {
+  SeatMapCabinRow,
+  SeatMapCabinRowSection,
+} from "../../../types/SeatMap";
 import { Element } from "./Element";
 import { EmptyElement } from "./EmptyElement";
 

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

@@ -1,10 +1,10 @@
+import { Icon } from "@components/shared/Icon";
 import { getPassengerInitials } from "@lib/getPassengerInitials";
 import { moneyStringFormatter } from "@lib/moneyStringFormatter";
 import classNames from "classnames";
 import * as React from "react";
-import { CreateOrderPayloadSeatService } from "../../types/CreateOrderPayload";
-import { SeatMapCabinRowSectionElementSeat } from "../../types/SeatMap";
-import { Icon } from "../Icon";
+import { CreateOrderPayloadSeatService } from "../../../types/CreateOrderPayload";
+import { SeatMapCabinRowSectionElementSeat } from "../../../types/SeatMap";
 import { SeatInfo } from "./SeatInfo";
 import { SeatUnavailable } from "./SeatUnavailable";
 

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

@@ -3,7 +3,7 @@ import * as React from "react";
 import {
   SeatMapCabinRowSectionAvailableService,
   SeatMapCabinRowSectionElementSeat,
-} from "../../types/SeatMap";
+} from "../../../types/SeatMap";
 
 export interface SeatInfoProps {
   seat: SeatMapCabinRowSectionElementSeat | null;

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

@@ -3,8 +3,8 @@ import { getSymbols } from "@lib/getSymbols";
 import { hasWings } from "@lib/hasWings";
 import classNames from "classnames";
 import * as React from "react";
-import { CreateOrderPayloadSeatService } from "../../types/CreateOrderPayload";
-import { SeatMap as SeatMapType } from "../../types/SeatMap";
+import { CreateOrderPayloadSeatService } from "../../../types/CreateOrderPayload";
+import { SeatMap as SeatMapType } from "../../../types/SeatMap";
 import { DeckSelect } from "./DeckSelect";
 import { Legend } from "./Legend";
 import { Row } from "./Row";
@@ -29,6 +29,10 @@ export const SeatMap: React.FC<SeatMapProps> = ({
 }) => {
   const [selectedDeck, setSelectedDeck] = React.useState(0);
 
+  if (!seatMap || !seatMap.cabins || !seatMap.cabins.length) {
+    return <SeatMapUnavailable />;
+  }
+
   const cabins = getCabinsForSegmentAndDeck(selectedDeck, seatMap);
   const hasMultipleDecks = cabins.length !== seatMap.cabins.length;
   const anyHasWings = seatMap.cabins.some((cabin) => cabin.wings);

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

@@ -1,4 +1,4 @@
-import { NonIdealState } from "@components/NonIdealState";
+import { NonIdealState } from "@components/shared/NonIdealState";
 import * as React from "react";
 
 export const SeatMapUnavailable: React.FC = () => (

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

@@ -1,3 +1,5 @@
+import { AnimatedLoaderEllipsis } from "@components/shared/AnimatedLoaderEllipsis";
+import { Stamp } from "@components/shared/Stamp";
 import { getCurrencyForSeatMaps } from "@lib/getCurrencyForSeatMaps";
 import { getTotalAmountForServices } from "@lib/getTotalAmountForServices";
 import { getTotalQuantity } from "@lib/getTotalQuantity";
@@ -8,12 +10,10 @@ import {
   CreateOrderPayload,
   CreateOrderPayloadSeatService,
   CreateOrderPayloadServices,
-} from "../../types/CreateOrderPayload";
-import { Offer } from "../../types/Offer";
-import { SeatMap } from "../../types/SeatMap";
-import { AnimatedLoaderEllipsis } from "../AnimatedLoaderEllipsis";
+} from "../../../types/CreateOrderPayload";
+import { Offer } from "../../../types/Offer";
+import { SeatMap } from "../../../types/SeatMap";
 import { Card } from "../Card";
-import { Stamp } from "../Stamp";
 import { SeatSelectionModal } from "./SeatSelectionModal";
 
 export interface SeatSelectionCardProps {

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

@@ -1,3 +1,4 @@
+import { Modal } from "@components/shared/Modal";
 import { getCurrencyForSeatMaps } from "@lib/getCurrencyForSeatMaps";
 import { getPassengerBySegmentList } from "@lib/getPassengerBySegmentList";
 import { getPassengerMapById } from "@lib/getPassengerMapById";
@@ -8,10 +9,9 @@ import React from "react";
 import {
   CreateOrderPayload,
   CreateOrderPayloadSeatService,
-} from "../../types/CreateOrderPayload";
-import { Offer } from "../../types/Offer";
-import { SeatMap } from "../../types/SeatMap";
-import { Modal } from "../Modal";
+} from "../../../types/CreateOrderPayload";
+import { Offer } from "../../../types/Offer";
+import { SeatMap } from "../../../types/SeatMap";
 import { SeatSelectionModalBody } from "./SeatSelectionModalBody";
 import { SeatSelectionModalFooter } from "./SeatSelectionModalFooter";
 import { SeatSelectionModalHeader } from "./SeatSelectionModalHeader";
@@ -100,7 +100,7 @@ export const SeatSelectionModal: React.FC<SeatSelectionModalProps> = ({
     getCurrencyForSeatMaps(seatMaps) ?? offer.total_currency;
 
   return (
-    <Modal isOpen={isOpen} onClose={() => onClose(selectedServicesState)}>
+    <Modal isOpen={isOpen} onClose={() => onClose(selectedServices)}>
       <SeatSelectionModalHeader
         segmentAndPassengerPermutationsCount={
           segmentAndPassengerPermutations.length

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

@@ -1,4 +1,4 @@
-import { ModalBody } from "@components/Modal";
+import { ModalBody } from "@components/shared/Modal";
 import React from "react";
 import { SeatMap, SeatMapProps } from "./SeatMap";
 

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

@@ -1,12 +1,12 @@
+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 { SeatMap } from "../../types/SeatMap";
-import { Button } from "../Button";
+import { CreateOrderPayloadServices } from "../../../types/CreateOrderPayload";
+import { SeatMap } from "../../../types/SeatMap";
 
 export interface SeatSelectionModalFooterProps {
   currency: string;
@@ -42,6 +42,7 @@ export const SeatSelectionModalFooter: React.FC<
     seatMaps
   );
   const totalAmountLabel = moneyStringFormatter(currency)(totalAmount);
+  const isOneWay = isFirstSegment && isLastSegment;
 
   return (
     <div style={{ padding: "16px 24px 24px" }}>
@@ -51,21 +52,27 @@ export const SeatSelectionModalFooter: 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}
-          disabled={isFirstSegment}
-          variant="outlined"
-          onClick={() => onPreviousSegmentButtonClicked()}
-        >
-          Back
-        </Button>
+        {!isOneWay && (
+          <Button
+            size={48}
+            disabled={isFirstSegment}
+            variant="outlined"
+            onClick={() => onPreviousSegmentButtonClicked()}
+          >
+            Back
+          </Button>
+        )}
 
         <Button
           size={48}

package/src/components/{seats → DuffelAncillaries/seats}/SeatSelectionModalHeader.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 SeatSelectionModalHeaderProps {
   segmentAndPassengerPermutationsCount: number;
@@ -21,23 +21,32 @@ export const SeatSelectionModalHeader: React.FC<
   setCurrentSegmentAndPassengerPermutationsIndex,
 }) => (
   <div style={{ padding: "24px 24px 16px" }}>
-    <div style={{ display: "flex", columnGap: "4px" }}>
-      {Array(segmentAndPassengerPermutationsCount)
-        .fill(0)
-        .map((_, index) =>
-          index === currentSegmentAndPassengerPermutationsIndex ? (
-            <ActiveSegment key={`segment_${index}`} />
-          ) : (
-            <InactiveSegment
-              key={`segment_${index}`}
-              onClick={() =>
-                setCurrentSegmentAndPassengerPermutationsIndex(index)
-              }
-            />
-          )
-        )}
-    </div>
-    <h2 className="h3--semibold" style={{ marginBlock: "12px 0px" }}>
+    {segmentAndPassengerPermutationsCount > 1 && (
+      <div style={{ display: "flex", columnGap: "4px" }}>
+        {Array(segmentAndPassengerPermutationsCount)
+          .fill(0)
+          .map((_, index) =>
+            index === currentSegmentAndPassengerPermutationsIndex ? (
+              <ActiveSegment key={`segment_${index}`} />
+            ) : (
+              <InactiveSegment
+                key={`segment_${index}`}
+                onClick={() =>
+                  setCurrentSegmentAndPassengerPermutationsIndex(index)
+                }
+              />
+            )
+          )}
+      </div>
+    )}
+    <h2
+      className="h3--semibold"
+      style={
+        segmentAndPassengerPermutationsCount > 1
+          ? { marginBlock: "12px 0px" }
+          : {}
+      }
+    >
       Flight to {currentSegment.destination.iata_code}
       <span
         className="p2--regular"
@@ -70,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,
     }}
@@ -81,7 +91,7 @@ const ActiveSegment = () => (
   <InactiveSegment
     onClick={undefined}
     style={{
-      backgroundColor: "rgb(var(--ACCENT))",
+      backgroundColor: "var(--SECONDARY, rgb(var(--ACCENT)))",
     }}
   />
 );

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

@@ -1,6 +1,6 @@
+import { Icon } from "@components/shared/Icon";
 import * as React from "react";
-import { SeatMapCabinRowSectionElementSeat } from "../../types/SeatMap";
-import { Icon } from "../Icon";
+import { SeatMapCabinRowSectionElementSeat } from "../../../types/SeatMap";
 
 export const SeatUnavailable: React.FC<{
   seat: SeatMapCabinRowSectionElementSeat;