@duffel/components 2.7.20 → 3.0.0

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

@@ -0,0 +1,81 @@
+import { Modal } from "@components/shared/Modal";
+import { getCurrencyForServices } from "@lib/getCurrencyForServices";
+import { getPassengerMapById } from "@lib/getPassengerMapById";
+import { getSegmentList } from "@lib/getSegmentList";
+import { getServicePriceMapById } from "@lib/getServicePriceMapById";
+import { hasService } from "@lib/hasService";
+import React, { useState } from "react";
+import {
+  CreateOrderPayload,
+  CreateOrderPayloadServices,
+} from "../../../types/CreateOrderPayload";
+import { Offer } from "../../../types/Offer";
+import { BaggageSelectionModalBody } from "./BaggageSelectionModalBody";
+import { BaggageSelectionModalFooter } from "./BaggageSelectionModalFooter";
+import { BaggageSelectionModalHeader } from "./BaggageSelectionModalHeader";
+
+export interface BaggageSelectionModalProps {
+  isOpen: boolean;
+  offer?: Offer;
+  passengers: CreateOrderPayload["passengers"];
+  selectedServices: CreateOrderPayloadServices;
+  onClose: (selectedServices: CreateOrderPayloadServices) => void;
+}
+
+export const BaggageSelectionModal: React.FC<BaggageSelectionModalProps> = ({
+  isOpen,
+  offer,
+  passengers,
+  onClose,
+  selectedServices,
+}) => {
+  const [currentSegmentIndex, setCurrentSegmentIndex] = useState(0);
+
+  const [selectedServicesState, setSelectedServicesState] =
+    React.useState(selectedServices);
+
+  if (!offer) return null;
+
+  const segments = getSegmentList(offer);
+  const currentSegment = segments[currentSegmentIndex];
+
+  const passengerMapById = getPassengerMapById(passengers);
+  const servicePricesMap = getServicePriceMapById(offer.available_services);
+
+  let currencyToUse = offer.base_currency;
+  if (hasService(offer, "baggage")) {
+    currencyToUse = getCurrencyForServices(offer, "baggage");
+  }
+
+  return (
+    <Modal isOpen={isOpen} onClose={() => onClose(selectedServicesState)}>
+      <BaggageSelectionModalHeader
+        segmentCount={segments.length}
+        currentSegment={currentSegment}
+        currentSegmentIndex={currentSegmentIndex}
+        setCurrentSegmentIndex={(index) => setCurrentSegmentIndex(index)}
+      />
+      <BaggageSelectionModalBody
+        offer={offer}
+        selectedServices={selectedServicesState}
+        passengersById={passengerMapById}
+        segment={currentSegment}
+        setSelectedServices={setSelectedServicesState}
+      />
+      <BaggageSelectionModalFooter
+        currency={currencyToUse}
+        selectedServices={selectedServicesState}
+        servicePrices={servicePricesMap}
+        isFirstSegment={currentSegmentIndex === 0}
+        isLastSegment={currentSegmentIndex + 1 === segments.length}
+        onNextSegmentButtonClicked={() =>
+          setCurrentSegmentIndex(currentSegmentIndex + 1)
+        }
+        onPreviousSegmentButtonClicked={() =>
+          setCurrentSegmentIndex(currentSegmentIndex - 1)
+        }
+        onClose={() => onClose(selectedServicesState)}
+      />
+    </Modal>
+  );
+};

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

@@ -0,0 +1,60 @@
+import { ModalBody } from "@components/shared/Modal";
+import { getPassengerName } from "@lib/getPassengerName";
+import React from "react";
+import {
+  CreateOrderPayloadPassenger,
+  CreateOrderPayloadServices,
+} from "../../../types/CreateOrderPayload";
+import {
+  Offer,
+  OfferAvailableServiceBaggage,
+  OfferSliceSegment,
+} from "../../../types/Offer";
+import { BaggageSelectionModalBodyPassenger } from "./BaggageSelectionModalBodyPassenger";
+
+export interface BaggageSelectionModalBodyProps {
+  offer: Offer;
+  segment: OfferSliceSegment;
+  passengersById: Record<
+    CreateOrderPayloadPassenger["id"],
+    CreateOrderPayloadPassenger
+  >;
+  selectedServices: CreateOrderPayloadServices;
+  setSelectedServices: (selectedServices: CreateOrderPayloadServices) => void;
+}
+
+export const BaggageSelectionModalBody: React.FC<
+  BaggageSelectionModalBodyProps
+> = ({
+  offer,
+  segment,
+  passengersById,
+  selectedServices,
+  setSelectedServices,
+}) => (
+  <ModalBody>
+    {segment.passengers.map(({ passenger_id, baggages }, index) => (
+      <BaggageSelectionModalBodyPassenger
+        key={passenger_id}
+        segmentId={segment.id}
+        passengerId={passenger_id}
+        passengerName={getPassengerName(
+          passengersById[passenger_id],
+          offer.passengers.find(({ id }) => id === passenger_id),
+          index + 1
+        )}
+        includedBaggage={baggages}
+        passengerServicesForSegment={
+          offer.available_services.filter(
+            ({ type, passenger_ids, segment_ids }) =>
+              type === "baggage" &&
+              passenger_ids.includes(passenger_id) &&
+              segment_ids.includes(segment.id)
+          ) as OfferAvailableServiceBaggage[]
+        }
+        selectedServices={selectedServices}
+        setSelectedServices={setSelectedServices}
+      />
+    ))}
+  </ModalBody>
+);

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

@@ -0,0 +1,122 @@
+import React from "react";
+import { CreateOrderPayloadServices } from "../../../types/CreateOrderPayload";
+import {
+  OfferAvailableServiceBaggage,
+  OfferSliceSegmentPassengerBaggage,
+} from "../../../types/Offer";
+import { BaggageSelectionController } from "./BaggageSelectionController";
+import { IncludedBaggageBanner } from "./IncludedBaggageBanner";
+
+export interface BaggageSelectionModalBodyPassengerProps {
+  segmentId: string;
+  passengerId: string;
+  passengerName: string;
+  includedBaggage: OfferSliceSegmentPassengerBaggage[];
+  passengerServicesForSegment: OfferAvailableServiceBaggage[];
+  selectedServices: CreateOrderPayloadServices;
+  setSelectedServices: (selectedServices: CreateOrderPayloadServices) => void;
+}
+
+export const BaggageSelectionModalBodyPassenger: React.FC<
+  BaggageSelectionModalBodyPassengerProps
+> = ({
+  segmentId,
+  passengerId,
+  passengerName,
+  includedBaggage,
+  passengerServicesForSegment,
+  selectedServices,
+  setSelectedServices,
+}) => {
+  const hasIncludedBaggage = includedBaggage.reduce(
+    (sum, bag) => sum + bag.quantity,
+    0
+  );
+
+  return (
+    <div style={{ marginTop: "24px" }}>
+      <h3 style={{ margin: 0 }} className="p1--semibold">
+        {passengerName}
+      </h3>
+      {hasIncludedBaggage && (
+        <IncludedBaggageBanner includedBaggage={includedBaggage} />
+      )}
+
+      <div style={{ display: "flex", rowGap: "8px", flexDirection: "column" }}>
+        {passengerServicesForSegment.map((availableService) => (
+          <BaggageSelectionController
+            key={availableService.id}
+            passengerId={passengerId}
+            segmentId={segmentId}
+            availableService={availableService}
+            selectedServices={selectedServices}
+            quantity={
+              selectedServices.find(({ id }) => id == availableService.id)
+                ?.quantity || 0
+            }
+            onQuantityChanged={(newQuantity) =>
+              onBaggageQuantityChanged(
+                newQuantity,
+                segmentId,
+                passengerId,
+                passengerName,
+                availableService,
+                selectedServices,
+                setSelectedServices
+              )
+            }
+          />
+        ))}
+      </div>
+
+      {passengerServicesForSegment.length === 0 && (
+        <p style={{ color: `var(--GREY-700)`, margin: 0 }}>
+          Extra baggage is not available for this passenger on this flight
+        </p>
+      )}
+    </div>
+  );
+};
+
+const onBaggageQuantityChanged = (
+  newQuantity: number,
+  segmentId: string,
+  passengerId: string,
+  passengerName: string,
+  availableService: OfferAvailableServiceBaggage,
+  selectedServices: CreateOrderPayloadServices,
+  setSelectedServices: (selectedServices: CreateOrderPayloadServices) => void
+) => {
+  // check if the service which had its quantity changed is already in the list
+  const changedServiceIndex = selectedServices.findIndex(
+    ({ id }) => availableService.id === id
+  );
+
+  // create a copy of the existing list of selected services
+  const newSelectedServices = Array.from(selectedServices);
+
+  // if the service is not in the list, add it
+  if (changedServiceIndex < 0) {
+    newSelectedServices.push({
+      id: availableService.id,
+      quantity: newQuantity,
+      serviceInformation: {
+        segmentId,
+        passengerId,
+        passengerName,
+        total_amount: availableService.total_amount,
+        total_currency: availableService.total_currency,
+        ...availableService.metadata,
+      },
+    });
+  } else {
+    // if the service is in the list, update its quantity
+    newSelectedServices[changedServiceIndex].quantity = newQuantity;
+  }
+
+  // remove any services with a quantity of 0
+  // and update the list of selected services
+  setSelectedServices(
+    newSelectedServices.filter(({ quantity }) => quantity !== 0)
+  );
+};

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

@@ -0,0 +1,81 @@
+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";
+
+export interface BaggageSelectionModalFooterProps {
+  currency: string;
+  selectedServices: CreateOrderPayloadServices;
+  servicePrices: ServicePriceMapById;
+
+  isFirstSegment: boolean;
+  isLastSegment: boolean;
+
+  onNextSegmentButtonClicked: () => void;
+  onPreviousSegmentButtonClicked: () => void;
+  onClose: () => void;
+}
+
+export const BaggageSelectionModalFooter: React.FC<
+  BaggageSelectionModalFooterProps
+> = ({
+  selectedServices,
+  servicePrices,
+  currency,
+  isFirstSegment,
+  isLastSegment,
+  onNextSegmentButtonClicked,
+  onPreviousSegmentButtonClicked,
+  onClose,
+}) => {
+  const totalQuantity = getTotalQuantity(selectedServices);
+  const totalAmount = getTotalAmountForServicesWithPriceMap(
+    servicePrices,
+    selectedServices
+  );
+  const totalAmountLabel = moneyStringFormatter(currency)(totalAmount);
+
+  return (
+    <div style={{ padding: "16px 24px 24px" }}>
+      <div className="flex--space-between">
+        <div>
+          Price for {withPlural(totalQuantity, "extra bag", "extra bags")}
+        </div>
+        <div className="h3--semibold" data-testid="baggage-total-amount-label">
+          + {totalAmountLabel}
+        </div>
+      </div>
+
+      <div
+        style={{
+          marginTop: "16px",
+          display: "grid",
+          columnGap: "12px",
+          gridTemplateColumns: "repeat(2, 1fr)",
+        }}
+      >
+        <Button
+          size={48}
+          variant="outlined"
+          disabled={isFirstSegment}
+          onClick={() => onPreviousSegmentButtonClicked()}
+        >
+          Back
+        </Button>
+        <Button
+          size={48}
+          data-testid="confirm-selection-for-baggage"
+          onClick={() =>
+            isLastSegment ? onClose() : onNextSegmentButtonClicked()
+          }
+        >
+          {isLastSegment ? "Confirm" : "Next"}
+        </Button>
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,76 @@
+import { formatDateString } from "@lib/formatDate";
+import React from "react";
+import { OfferSliceSegment } from "../../../types/Offer";
+
+export interface BaggageSelectionModalHeaderProps {
+  segmentCount: number;
+  currentSegmentIndex: number;
+  currentSegment: OfferSliceSegment;
+  setCurrentSegmentIndex: (index: number) => void;
+}
+
+export const BaggageSelectionModalHeader: React.FC<
+  BaggageSelectionModalHeaderProps
+> = ({
+  segmentCount,
+  currentSegmentIndex,
+  currentSegment,
+  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" }}>
+      Flight to {currentSegment.destination.iata_code}
+      <span
+        className="p2--regular"
+        style={{
+          color: "var(--GREY-600)",
+          marginLeft: "8px",
+        }}
+      >
+        {formatDateString(currentSegment.departing_at)}
+      </span>
+    </h2>
+  </div>
+);
+
+const InactiveSegment: React.FC<{
+  style?: React.CSSProperties;
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+}> = ({ onClick, style }) => (
+  <button
+    onClick={onClick}
+    style={{
+      border: "none",
+      width: "4px",
+      height: "4px",
+      padding: "0",
+      borderRadius: "4px",
+      backgroundColor: "rgba(var(--ACCENT), var(--ACCENT-LIGHT-200))",
+      transition: "background-color 0.3s var(--TRANSITION-CUBIC-BEZIER)",
+      ...style,
+    }}
+  />
+);
+
+const ActiveSegment = () => (
+  <InactiveSegment
+    onClick={undefined}
+    style={{
+      backgroundColor: "rgb(var(--ACCENT))",
+    }}
+  />
+);

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

@@ -0,0 +1,51 @@
+import { withPlural } from "@lib/withPlural";
+import React from "react";
+import { OfferSliceSegmentPassengerBaggage } from "../../../types/Offer";
+
+interface IncludedBaggageBannerProps {
+  includedBaggage: OfferSliceSegmentPassengerBaggage[];
+}
+
+export const IncludedBaggageBanner: React.FC<IncludedBaggageBannerProps> = ({
+  includedBaggage,
+}) => {
+  const { carryOnBagsQuantity, checkedBagsQuantity } = includedBaggage.reduce(
+    (sum, { type, quantity }) => ({
+      carryOnBagsQuantity:
+        sum.carryOnBagsQuantity + (type === "carry_on" ? quantity : 0),
+      checkedBagsQuantity:
+        sum.checkedBagsQuantity + (type === "checked" ? quantity : 0),
+    }),
+    {
+      carryOnBagsQuantity: 0,
+      checkedBagsQuantity: 0,
+    }
+  );
+
+  const baggageLabelStringArray = new Array<string>();
+  if (carryOnBagsQuantity > 0) {
+    baggageLabelStringArray.push(
+      withPlural(carryOnBagsQuantity, "cabin bag", "cabin bags")
+    );
+  }
+  if (checkedBagsQuantity > 0) {
+    baggageLabelStringArray.push(
+      withPlural(checkedBagsQuantity, "checked bag", "checked bags")
+    );
+  }
+
+  return (
+    <div
+      style={{
+        marginBlock: "8px",
+        padding: "8px 12px",
+        color: ` var(--GREEN-300)`,
+        backgroundColor: ` var(--GREEN-100)`,
+        borderRadius: "6px",
+      }}
+      className="p2--regular"
+    >
+      {baggageLabelStringArray.join(" and ")} included with ticket
+    </div>
+  );
+};

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

@@ -0,0 +1,90 @@
+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";
+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 { Card } from "../Card";
+import { CfarSelectionModal } from "./CfarSelectionModal";
+
+export interface CfarSelectionCardProps {
+  isLoading: boolean;
+  offer?: Offer;
+  selectedServices: CreateOrderPayloadServices;
+  setSelectedServices: (selectedServices: CreateOrderPayloadServices) => void;
+}
+
+export const CfarSelectionCard: React.FC<CfarSelectionCardProps> = ({
+  isLoading,
+  offer,
+  selectedServices,
+  setSelectedServices,
+}) => {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  const containsCfarService = hasService(offer, "cancel_for_any_reason");
+  const totalQuantity = getTotalQuantity(selectedServices);
+  const isCfarAdded = totalQuantity > 0;
+
+  let currencyToUse = offer?.base_currency || "";
+  if (containsCfarService) {
+    currencyToUse = getCurrencyForServices(offer!, "cancel_for_any_reason");
+  }
+
+  const totalAmount = getTotalAmountForServices(offer!, selectedServices);
+  const totalAmountFormatted = offer
+    ? moneyStringFormatter(currencyToUse)(totalAmount)
+    : "0";
+
+  const cfarService = offer?.available_services.find(
+    isCancelForAnyReasonService
+  );
+
+  const copy =
+    containsCfarService && isCfarAdded
+      ? `Your trip is protected for ${totalAmountFormatted}`
+      : `Protect your purchase if you decide to cancel`;
+
+  return (
+    <>
+      <Card
+        buttonTitle="Add cancel for any reason"
+        title="Cancel for any reason"
+        copy={copy}
+        icon="shield_with_moon"
+        onClick={containsCfarService ? () => setIsOpen(true) : null}
+        isLoading={isLoading}
+        disabled={!isLoading && !containsCfarService}
+        isSelected={isCfarAdded}
+      >
+        {isLoading && (
+          <Stamp color="var(--GREY-900)" backgroundColor="var(--GREY-100)">
+            Loading
+            <AnimatedLoaderEllipsis />
+          </Stamp>
+        )}
+        {!isLoading && !containsCfarService && (
+          <Stamp color="var(--GREY-700)" backgroundColor="var(--GREY-200)">
+            Not available
+          </Stamp>
+        )}
+      </Card>
+
+      <CfarSelectionModal
+        isOpen={Boolean(isOpen && offer && cfarService)}
+        offerCurrency={offer?.base_currency}
+        service={cfarService}
+        onClose={(newSelectedServices) => {
+          setIsOpen(false);
+          setSelectedServices(newSelectedServices);
+        }}
+        selectedServices={selectedServices}
+      />
+    </>
+  );
+};

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

@@ -0,0 +1,63 @@
+import { Modal } from "@components/shared/Modal";
+import React from "react";
+import {
+  CreateOrderPayloadServiceInformationForCancelForAnyReason,
+  CreateOrderPayloadServices,
+} from "../../../types/CreateOrderPayload";
+import {
+  Offer,
+  OfferAvailableServiceCancelForAnyReason,
+} from "../../../types/Offer";
+import { CfarSelectionModalBody } from "./CfarSelectionModalBody";
+import { CfarSelectionModalFooter } from "./CfarSelectionModalFooter";
+import { CfarSelectionModalHeader } from "./CfarSelectionModalHeader";
+
+export interface CfarSelectionModalProps {
+  isOpen: boolean;
+  offerCurrency?: Offer["base_currency"];
+  service?: OfferAvailableServiceCancelForAnyReason;
+  selectedServices: CreateOrderPayloadServices;
+  onClose: (selectedServices: CreateOrderPayloadServices) => void;
+}
+
+export const CfarSelectionModal: React.FC<CfarSelectionModalProps> = ({
+  isOpen,
+  offerCurrency,
+  service,
+  onClose,
+  selectedServices,
+}) => {
+  return (
+    <Modal isOpen={isOpen} onClose={() => onClose(selectedServices)}>
+      <CfarSelectionModalHeader />
+      {service && offerCurrency && (
+        <>
+          <CfarSelectionModalBody
+            service={service}
+            offerCurrency={offerCurrency}
+          />
+          <CfarSelectionModalFooter
+            service={service}
+            selectedServices={selectedServices}
+            onAddCfarService={() =>
+              onClose([
+                {
+                  id: service.id,
+                  quantity: 1,
+                  serviceInformation: {
+                    type: "cancel_for_any_reason",
+                    total_amount: service.total_amount,
+                    total_currency: service.total_currency,
+                    ...service.metadata,
+                  } as CreateOrderPayloadServiceInformationForCancelForAnyReason,
+                },
+              ])
+            }
+            onRemoveCfarService={() => onClose([])}
+            onClose={() => onClose(selectedServices)}
+          />
+        </>
+      )}
+    </Modal>
+  );
+};

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

@@ -0,0 +1,56 @@
+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";
+import { CfarSelectionModalBodyListItem } from "./CfarSelectionModalBodyListItem";
+
+export interface CfarSelectionModalBodyProps {
+  offerCurrency: Offer["base_currency"];
+  service: OfferAvailableServiceCancelForAnyReason;
+}
+
+export const CfarSelectionModalBody: React.FC<CfarSelectionModalBodyProps> = ({
+  offerCurrency,
+  service,
+}) => (
+  <ModalBody>
+    <ul style={{ padding: 0 }}>
+      <CfarSelectionModalBodyListItem>
+        Cancel your trip for any reason
+      </CfarSelectionModalBodyListItem>
+
+      <CfarSelectionModalBodyListItem>
+        Guaranteed refund of{" "}
+        {moneyStringFormatter(offerCurrency)(+service.metadata.refund_amount)}
+      </CfarSelectionModalBodyListItem>
+
+      <CfarSelectionModalBodyListItem>
+        Redeemable up to 24 hours before first flight departure
+      </CfarSelectionModalBodyListItem>
+    </ul>
+    <a
+      href={service.metadata.terms_and_conditions_url}
+      rel="noopener noreferrer"
+      target="_blank"
+      className="p2--regular"
+      style={{
+        color: "var(--GREY-600)",
+      }}
+    >
+      Terms and conditions
+      <Icon
+        name="north_east"
+        size={16}
+        style={{
+          display: "inline",
+          verticalAlign: "middle",
+          marginLeft: "4px",
+        }}
+      />
+    </a>
+  </ModalBody>
+);

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

@@ -0,0 +1,11 @@
+import { Icon } from "@components/shared/Icon";
+import React, { ReactNode } from "react";
+
+export const CfarSelectionModalBodyListItem: React.FC<{
+  children: ReactNode;
+}> = ({ children }) => (
+  <li className="cfar-modal-list-item">
+    <Icon name="check" />
+    <p>{children}</p>
+  </li>
+);