@duffel/components 3.1.3--prototype.3 → 3.1.3--prototype.6

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

@@ -1,101 +0,0 @@
-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 { moneyStringFormatter } from "@lib/moneyStringFormatter";
-import { withPlural } from "@lib/withPlural";
-import React from "react";
-import {
-  CreateOrderPayload,
-  CreateOrderPayloadServices,
-} from "../../../types/CreateOrderPayload";
-import { Offer } from "../../../types/Offer";
-import { Card } from "../Card";
-import { BaggageSelectionModal } from "./BaggageSelectionModal";
-
-export interface BaggageSelectionCardProps {
-  isLoading: boolean;
-  offer?: Offer;
-  passengers: CreateOrderPayload["passengers"];
-  selectedServices: CreateOrderPayloadServices;
-  setSelectedServices: (selectedServices: CreateOrderPayloadServices) => void;
-}
-
-export const BaggageSelectionCard: React.FC<BaggageSelectionCardProps> = ({
-  isLoading,
-  offer,
-  passengers,
-  selectedServices,
-  setSelectedServices,
-}) => {
-  const [isOpen, setIsOpen] = React.useState(false);
-
-  const containsBaggageService = hasService(offer, "baggage");
-  const totalQuantity = getTotalQuantity(selectedServices);
-  const isBaggageAdded = totalQuantity > 0;
-
-  const totalAmount = getTotalAmountForServices(offer!, selectedServices);
-
-  let currencyToUse = offer?.base_currency || "";
-  if (containsBaggageService) {
-    currencyToUse = getCurrencyForServices(offer!, "baggage");
-  }
-
-  const totalAmountFormatted = offer
-    ? moneyStringFormatter(currencyToUse)(totalAmount)
-    : "0";
-
-  const copy =
-    containsBaggageService && isBaggageAdded
-      ? `${withPlural(
-          totalQuantity,
-          "bag",
-          "bags"
-        )} added for ${totalAmountFormatted}`
-      : "Add any extra baggage you need for your trip";
-
-  return (
-    <>
-      <Card
-        buttonTitle="Select extra baggage"
-        title="Extra baggage"
-        copy={copy}
-        icon="cabin_bag"
-        onClick={containsBaggageService ? () => setIsOpen(true) : null}
-        isLoading={isLoading}
-        disabled={!isLoading && !containsBaggageService}
-        isSelected={isBaggageAdded}
-      >
-        {isLoading && (
-          <Stamp color="var(--GREY-900)" backgroundColor="var(--GREY-100)">
-            Loading
-            <AnimatedLoaderEllipsis />
-          </Stamp>
-        )}
-        {!isLoading && !containsBaggageService && (
-          <Stamp color="var(--GREY-700)" backgroundColor="var(--GREY-200)">
-            Not available
-          </Stamp>
-        )}
-      </Card>
-
-      <BaggageSelectionModal
-        isOpen={Boolean(isOpen && offer)}
-        offer={offer}
-        passengers={passengers}
-        onClose={(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/DuffelAncillaries/bags/BaggageSelectionController.tsx

@@ -1,88 +0,0 @@
-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 { Counter } from "../Counter";
-
-interface BaggageSelectionControllerProps {
-  segmentId: string;
-  passengerId: string;
-  availableService: OfferAvailableServiceBaggage;
-  selectedServices: CreateOrderPayloadServices;
-  quantity: number;
-  onQuantityChanged: (quantity: number) => void;
-}
-
-export const BaggageSelectionController: React.FC<
-  BaggageSelectionControllerProps
-> = ({
-  segmentId,
-  passengerId,
-  availableService,
-  quantity,
-  onQuantityChanged,
-  selectedServices,
-}) => {
-  const serviceName =
-    availableService.metadata.type === "carry_on" ? "Cabin bag" : "Checked bag";
-
-  const servicePrice = moneyStringFormatter(availableService.total_currency)(
-    +availableService.total_amount
-  );
-  const serviceDescription = getBaggageServiceDescription(
-    availableService.metadata
-  );
-
-  const shouldDisableController =
-    hasServiceOfSameMetadataTypeAlreadyBeenSelected(
-      selectedServices,
-      segmentId,
-      passengerId,
-      availableService
-    );
-
-  return (
-    <div
-      style={{
-        display: "flex",
-        justifyContent: "space-between",
-        alignItems: "center",
-      }}
-    >
-      <div>
-        <p style={{ margin: 0 }} className="p2--regular">
-          {serviceName}
-          <span
-            style={{
-              marginInline: "4px",
-              color: "var(--GREY-400)",
-            }}
-          >
-            •
-          </span>
-          <span
-            className="p2--semibold"
-            data-testid={`price-label--${availableService.id}--${passengerId}`}
-          >
-            {servicePrice}
-          </span>
-        </p>
-        <p
-          style={{ margin: 0, color: "var(--GREY-600)" }}
-          className="p3--regular"
-        >
-          {serviceDescription}
-        </p>
-      </div>
-      <Counter
-        id={`counter--${availableService.id}--${passengerId}`}
-        min={0}
-        value={quantity}
-        onChange={onQuantityChanged}
-        max={shouldDisableController ? 0 : availableService.maximum_quantity}
-      />
-    </div>
-  );
-};

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

@@ -1,81 +0,0 @@
-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(selectedServices)}>
-      <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

@@ -1,60 +0,0 @@
-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

@@ -1,122 +0,0 @@
-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} />
-      ) : null}
-
-      <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

@@ -1,88 +0,0 @@
-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);
-  const isOneWay = isFirstSegment && isFirstSegment;
-
-  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={
-          isOneWay
-            ? { marginTop: "16px", display: "grid" }
-            : {
-                marginTop: "16px",
-                display: "grid",
-                columnGap: "12px",
-                gridTemplateColumns: "repeat(2, 1fr)",
-              }
-        }
-      >
-        {!isOneWay && (
-          <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

@@ -1,82 +0,0 @@
-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" }}>
-    {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"
-        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:
-        "var(--TERTIARY, rgba(var(--ACCENT), var(--ACCENT-LIGHT-200)))",
-      transition: "background-color 0.3s var(--TRANSITION-CUBIC-BEZIER)",
-      ...style,
-    }}
-  />
-);
-
-const ActiveSegment = () => (
-  <InactiveSegment
-    onClick={undefined}
-    style={{
-      backgroundColor: "var(--SECONDARY, rgb(var(--ACCENT)))",
-    }}
-  />
-);

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

@@ -1,51 +0,0 @@
-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>
-  );
-};