@duffel/components 2.7.19 → 3.0.0-canary

package/src/components/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/bags/BaggageSelectionModalFooter.tsx

@@ -0,0 +1,81 @@
+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";
+
+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/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/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/cancel_for_any_reason/CfarSelectionCard.tsx

@@ -0,0 +1,90 @@
+import { AnimatedLoaderEllipsis } from "@components/AnimatedLoaderEllipsis";
+import { Stamp } from "@components/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/cancel_for_any_reason/CfarSelectionModal.tsx

@@ -0,0 +1,63 @@
+import React from "react";
+import {
+  CreateOrderPayloadServiceInformationForCancelForAnyReason,
+  CreateOrderPayloadServices,
+} from "../../types/CreateOrderPayload";
+import {
+  Offer,
+  OfferAvailableServiceCancelForAnyReason,
+} from "../../types/Offer";
+import { Modal } from "../Modal";
+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/cancel_for_any_reason/CfarSelectionModalBody.tsx

@@ -0,0 +1,56 @@
+import { Icon } from "@components/Icon";
+import { ModalBody } from "@components/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/cancel_for_any_reason/CfarSelectionModalBodyListItem.tsx

@@ -0,0 +1,11 @@
+import { Icon } from "@components/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>
+);

package/src/components/cancel_for_any_reason/CfarSelectionModalFooter.tsx

@@ -0,0 +1,74 @@
+import { Icon } from "@components/Icon";
+import { moneyStringFormatter } from "@lib/moneyStringFormatter";
+import React from "react";
+import { CreateOrderPayloadServices } from "../../types/CreateOrderPayload";
+import { OfferAvailableServiceCancelForAnyReason } from "../../types/Offer";
+import { Button } from "../Button";
+
+export interface CfarSelectionModalFooterProps {
+  service: OfferAvailableServiceCancelForAnyReason;
+  selectedServices: CreateOrderPayloadServices;
+  onAddCfarService: () => void;
+  onRemoveCfarService: () => void;
+  onClose: () => void;
+}
+
+export const CfarSelectionModalFooter: React.FC<
+  CfarSelectionModalFooterProps
+> = ({
+  service,
+  selectedServices,
+  onAddCfarService,
+  onRemoveCfarService,
+  onClose,
+}) => {
+  const serviceIncluded = selectedServices.some(({ id }) => id == service.id);
+  const formattedPrice = moneyStringFormatter(service.total_currency)(
+    +service.total_amount
+  );
+
+  return (
+    <div className="cfar-modal-footer">
+      <Button
+        size={48}
+        variant={serviceIncluded ? "destructive" : "outlined"}
+        onClick={serviceIncluded ? onRemoveCfarService : onClose}
+      >
+        {serviceIncluded ? "Remove protection" : "Don’t protect trip"}
+      </Button>
+
+      {!serviceIncluded && (
+        <Button
+          size={48}
+          data-testid="confirm-selection-for-cfar"
+          onClick={onAddCfarService}
+        >
+          Add protection for {formattedPrice}
+        </Button>
+      )}
+
+      {serviceIncluded && <ProtectedTripBanner />}
+    </div>
+  );
+};
+
+const ProtectedTripBanner: React.FC = () => (
+  <div
+    style={{
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      columnGap: "8px",
+      backgroundColor: "var(--GREY-100)",
+      padding: "var(--space-12)",
+      borderRadius: "var(--BUTTON-RADIUS)",
+    }}
+  >
+    <Icon
+      size={20}
+      name="shield_with_moon"
+      style={{ fill: "rgb(var(--ACCENT))" }}
+    />
+    Your trip is protected
+  </div>
+);

package/src/components/cancel_for_any_reason/CfarSelectionModalHeader.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+export const CfarSelectionModalHeader: React.FC = () => (
+  <div style={{ padding: "24px 24px 16px" }}>
+    <h2 className="h3--semibold" style={{ marginBlock: 0 }}>
+      Cancel for any reason
+    </h2>
+  </div>
+);

package/src/components/seats/Amenity.tsx

@@ -0,0 +1,21 @@
+import classNames from "classnames";
+import * as React from "react";
+import { SeatMapCabinRowSectionElementAmenity } from "../../types/SeatMap";
+import { Icon, IconName } from "../Icon";
+
+const amenitiesWithoutWrapper = ["bassinet", "exit_row"];
+
+export interface AmenityProps {
+  type: SeatMapCabinRowSectionElementAmenity;
+}
+
+export const Amenity: React.FC<AmenityProps> = ({ type }) => (
+  <div
+    className={classNames("map-element map-element--amenity", {
+      "map-element--wrapped": !amenitiesWithoutWrapper.includes(type),
+    })}
+    aria-label={type.toString()}
+  >
+    <Icon name={type as IconName} size={16} />
+  </div>
+);

package/src/components/seats/DeckSelect.tsx

@@ -0,0 +1,27 @@
+import { Tabs } from "@components/Tabs";
+import * as React from "react";
+
+export interface DeckSelectProps {
+  /**
+   * The currently selected deck number
+   */
+  value: number;
+  /**
+   * What to do when the user selects a deck
+   */
+  setValue: (value: number) => void;
+}
+
+/**
+ * The deck selection component for the seat map.
+ */
+export const DeckSelect: React.FC<DeckSelectProps> = ({ value, setValue }) => {
+  const options = ["Lower deck", "Upper deck"];
+  return (
+    <Tabs
+      options={options}
+      value={options[value]}
+      onChange={(item) => setValue(options.indexOf(item))}
+    />
+  );
+};