@duffel/components 2.7.19 → 3.0.0-canary

package/src/styles/components/Summary.css

@@ -0,0 +1,70 @@
+.summary__segment {
+  border-bottom: 1px solid var(--GREY-200);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--SPACING-SM-3);
+  padding-bottom: var(--SPACING-SM-3);
+}
+
+.summary > .passenger-segment__title {
+  padding: 0;
+  margin: 0;
+}
+
+.summary-passenger {
+  color: var(--GREY-900);
+  font-size: var(--FONT-SIZES-C1);
+  font-weight: normal;
+  margin: 0;
+  padding: 0;
+}
+
+.summary__description-cost {
+  display: flex;
+  justify-content: space-between;
+  font-size: var(--FONT-SIZES-C1);
+  margin-bottom: var(--SPACING-SM-3);
+}
+
+.summary:not(.summary--mobile) {
+  padding-top: 0;
+  display: none;
+}
+
+.summary__actions {
+  display: flex;
+}
+
+.summary__actions--previous {
+  transform: rotate(180deg);
+}
+
+.summary__actions > button:last-of-type {
+  flex: 1 auto;
+  justify-content: center;
+  margin-left: var(--SPACING-SM-3);
+}
+
+@media screen and (min-width: 768px) {
+  .summary:not(.summary--mobile) {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .summary--mobile {
+    display: none;
+  }
+
+  .summary__description-title {
+    color: var(--GREY-900);
+    font-size: var(--FONT-SIZES-H5);
+    line-height: 26px;
+    margin-bottom: var(--SPACING-XS-2);
+  }
+
+  .summary__confirmation-btn:last-child {
+    margin-left: var(--SPACING-SM-1);
+  }
+}

package/src/styles/components/Tabs.css

@@ -0,0 +1,49 @@
+.seat-map__tab-select {
+  width: 100%;
+  max-width: 400px;
+  display: flex;
+  text-align: center;
+  min-height: var(--SPACING-LG-1);
+  margin-bottom: var(--SPACING-MD-3);
+  border: 2px solid var(--GREY-200);
+  border-radius: 3px;
+  background-color: var(--GREY-200);
+}
+
+.seat-map__tab-select-option {
+  appearance: none;
+  outline: none;
+  margin: 0;
+  border: none;
+  padding: var(--SPACING-XS-2) var(--SPACING-SM-3);
+  font-weight: 600;
+  font-size: var(--FONT-SIZES-C2);
+  width: 100%;
+  color: var(--GREY-900);
+  background-color: var(--GREY-200);
+  cursor: pointer;
+  border-radius: 3px;
+}
+
+.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));
+  transition: var(--TRANSITIONS-CUBIC-BEZIER);
+}
+
+.seat-map__tab-select-option--selected {
+  color: var(--GREY-900);
+  background-color: rgba(var(--WHITE), 1);
+  box-shadow: 0px 0px 0px 1px rgba(var(--BLACK), 0.05),
+    0px 2px 12px rgba(var(--BLACK), 0.08);
+}
+
+.seat-map__tab-select-option:first-child {
+  margin-right: 1px;
+}
+
+.seat-map__tab-select-option:last-child {
+  margin-left: 1px;
+}

package/src/styles/flex.css

@@ -0,0 +1,5 @@
+.flex--space-between {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}

package/src/styles/font-families.css

@@ -0,0 +1,47 @@
+.p1--semibold {
+  font-family: var(--FONT-FAMILY);
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 24px;
+  letter-spacing: 0em;
+}
+
+.p1--regular {
+  font-family: var(--FONT-FAMILY);
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 24px;
+  letter-spacing: 0em;
+}
+
+.p2--regular {
+  font-family: var(--FONT-FAMILY);
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+  letter-spacing: 0em;
+}
+
+.p2--semibold {
+  font-family: var(--FONT-FAMILY);
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 20px;
+  letter-spacing: 0em;
+}
+
+.p3--regular {
+  font-family: var(--FONT-FAMILY);
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
+  letter-spacing: 0em;
+}
+
+.h3--semibold {
+  font-family: var(--FONT-FAMILY);
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 28px;
+  letter-spacing: 0em;
+}

package/src/styles/global.css

@@ -0,0 +1,50 @@
+@import "./colors.css";
+@import "./flex.css";
+@import "./font-families.css";
+@import "./margin.css";
+@import "./spacing.css";
+@import "./transitions.css";
+@import "./typography.css";
+
+@import "./components/Amenity.css";
+@import "./components/BaggageDisplay.css";
+@import "./components/Button.css";
+@import "./components/CfarSelectionModal.css";
+@import "./components/Card.css";
+@import "./components/Counter.css";
+@import "./components/IconButton.css";
+@import "./components/Legend.css";
+@import "./components/Loader.css";
+@import "./components/LoadingState.css";
+@import "./components/Modal.css";
+@import "./components/PassengerSelect.css";
+@import "./components/PassengersLayout.css";
+@import "./components/Row.css";
+@import "./components/Seat.css";
+@import "./components/SeatInfo.css";
+@import "./components/SeatMap.css";
+@import "./components/SeatSelect.css";
+@import "./components/Segment.css";
+@import "./components/SelectionSegment.css";
+@import "./components/Summary.css";
+@import "./components/Tabs.css";
+
+.duffel-components {
+  --BUTTON-RADIUS: 5px;
+  --TRANSITION-CUBIC-BEZIER: cubic-bezier(0.25, 0.8, 0.25, 1);
+
+  box-sizing: border-box;
+  -webkit-overflow-scrolling: touch;
+  -webkit-font-smoothing: antialiased;
+  font-family: var(--FONT-FAMILY);
+  overflow: hidden;
+  height: 100%;
+}
+
+h1,
+h2,
+h3,
+h4,
+p {
+  margin: 0;
+}

package/src/styles/margin.css

@@ -0,0 +1,3 @@
+.margin-0 {
+  margin: 0;
+}

package/src/styles/spacing.css

@@ -0,0 +1,18 @@
+.duffel-components {
+  --SPACING-XL-3: 128px;
+  --SPACING-XL-2: 64px;
+  --SPACING-XL-1: 56px;
+  --SPACING-LG-3: 48px;
+  --SPACING-LG-2: 40px;
+  --SPACING-LG-1: 32px;
+  --SPACING-MD-3: 24px;
+  --SPACING-MD-2: 20px;
+  --SPACING-MD-1: 18px;
+  --SPACING-SM-3: 16px;
+  --SPACING-SM-2: 12px;
+  --SPACING-SM-1: 8px;
+  --SPACING-XS-3: 6px;
+  --SPACING-XS-2: 4px;
+  --SPACING-XS-1: 2px;
+  --SPACING-NONE: 0;
+}

package/src/styles/transitions.css

@@ -0,0 +1,3 @@
+.duffel-components {
+  --TRANSITIONS-CUBIC-BEZIER: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+}

package/src/styles/typography.css

@@ -0,0 +1,13 @@
+.duffel-components {
+  --FONT-FAMILY: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
+    "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+  --FONT-SIZES-C0: 20px;
+  --FONT-SIZES-C1: 16px;
+  --FONT-SIZES-C2: 14px;
+  --FONT-SIZES-C3: 12px;
+  --FONT-SIZES-H2: 32px;
+  --FONT-SIZES-H3: 28px;
+  --FONT-SIZES-H4: 24px;
+  --FONT-SIZES-H5: 20px;
+}

package/src/tests/components/DuffelAncillaries.test.tsx

@@ -0,0 +1,342 @@
+import { fireEvent, render } from "@testing-library/react";
+import React from "react";
+import { DuffelAncillaries } from "../../components/DuffelAncillaries";
+import mockPassengers from "../../fixtures/passengers/mock_passengers";
+import {
+  DuffelAncillariesPropsWithOffersAndSeatMaps,
+  OnPayloadReady,
+} from "../../types/DuffelAncillariesProps";
+import { Offer } from "../../types/Offer";
+import { SeatMap } from "../../types/SeatMap";
+
+/* eslint-disable @typescript-eslint/no-var-requires */
+const MOCK_OFFER: Offer = require("../../fixtures/offers/off_1.json");
+const MOCK_SEAT_MAPS: SeatMap[] = require("../../fixtures/seat-maps/off_1.json");
+/* eslint-enable @typescript-eslint/no-var-requires */
+
+const defaultProps: Omit<
+  DuffelAncillariesPropsWithOffersAndSeatMaps,
+  "onPayloadReady"
+> = {
+  offer: MOCK_OFFER,
+  seat_maps: MOCK_SEAT_MAPS,
+  passengers: mockPassengers,
+  services: ["bags", "seats", "cancel_for_any_reason"],
+};
+
+const ExampleWithoutServices: React.FC = () => (
+  <DuffelAncillaries
+    onPayloadReady={jest.fn()}
+    passengers={[]}
+    services={[]}
+    offer_id="offer_id"
+    client_key="client_key"
+  />
+);
+
+describe("DuffelAncillaries", () => {
+  test("should throw an error when services is empty", () => {
+    expect(() => render(<ExampleWithoutServices />)).toThrow(
+      `You must provide at least one service in the "services" prop. Valid services: ["bags", "seats", "cancel_for_any_reason"]`
+    );
+  });
+
+  test("should select baggage services", async () => {
+    let onPayloadReadyCallCount = 0;
+    const onPayloadReady: OnPayloadReady = jest.fn((data, metadata) => {
+      if (++onPayloadReadyCallCount === 2) {
+        expect(data.selected_offers[0]).toBe(MOCK_OFFER.id);
+        expect(metadata.baggage_services.length).toBe(2);
+      }
+    });
+    const { getByText, getByTestId, getByTitle } = render(
+      <DuffelAncillaries {...defaultProps} onPayloadReady={onPayloadReady} />
+    );
+
+    fireEvent.click(getByTitle("Select extra baggage"));
+
+    // There are no services for the first segment of the offer.
+    fireEvent.click(getByTestId("confirm-selection-for-baggage"));
+
+    for (const available_service of MOCK_OFFER.available_services) {
+      if (available_service.type !== "baggage") continue;
+
+      for (const passengerId of available_service.passenger_ids) {
+        const testId = `counter--${available_service.id}--${passengerId}-plus`;
+        const addBaggageButton = getByTestId(testId);
+        fireEvent.click(addBaggageButton);
+      }
+    }
+
+    fireEvent.click(getByTestId("confirm-selection-for-baggage"));
+    expect(getByText(/2 bags added/i));
+
+    // The component is always called at least once
+    // when the state is set with an offer.
+    expect(onPayloadReady).toBeCalledTimes(2);
+  });
+
+  test("should select seat services", () => {
+    let onPayloadReadyCallCount = 0;
+    const onPayloadReady: OnPayloadReady = jest.fn((data, metadata) => {
+      if (++onPayloadReadyCallCount === 2) {
+        expect(data.selected_offers[0]).toBe(MOCK_OFFER.id);
+        expect(metadata.seat_services.length).toBe(4);
+      }
+    });
+    const { getByText, getByTestId, getByTitle } = render(
+      <DuffelAncillaries {...defaultProps} onPayloadReady={onPayloadReady} />
+    );
+
+    const seatCard = getByTitle("Select seats");
+    fireEvent.click(seatCard);
+
+    fireEvent.click(getByTestId("seat-28E"));
+    fireEvent.click(getByTestId("confirm-selection-for-seats"));
+
+    fireEvent.click(getByTestId("seat-28F"));
+    fireEvent.click(getByTestId("confirm-selection-for-seats"));
+
+    fireEvent.click(getByTestId("seat-28E"));
+    fireEvent.click(getByTestId("confirm-selection-for-seats"));
+
+    fireEvent.click(getByTestId("seat-28F"));
+    fireEvent.click(getByTestId("confirm-selection-for-seats"));
+
+    expect(getByText(/4 seats selected/i));
+
+    // The component is always called at least once
+    // when the state is set with an offer.
+    expect(onPayloadReady).toBeCalledTimes(2);
+  });
+
+  test("should select CFAR service", () => {
+    let onPayloadReadyCallCount = 0;
+    const onPayloadReady: OnPayloadReady = jest.fn((data, metadata) => {
+      if (++onPayloadReadyCallCount === 2) {
+        expect(data.selected_offers[0]).toBe(MOCK_OFFER.id);
+        expect(metadata.cancel_for_any_reason_services.length).toBe(1);
+        expect(data.services.length).toBe(1);
+      }
+    });
+    const { getByText, getByTestId, getByTitle } = render(
+      <DuffelAncillaries {...defaultProps} onPayloadReady={onPayloadReady} />
+    );
+
+    fireEvent.click(getByTitle("Add cancel for any reason"));
+
+    fireEvent.click(getByTestId("confirm-selection-for-cfar"));
+    expect(getByText(/Your trip is protected for £97.45/i));
+
+    // The component is always called at least once
+    // when the state is set with an offer.
+    expect(onPayloadReady).toBeCalledTimes(2);
+  });
+
+  test("should work with markup", () => {
+    let onPayloadReadyCallCount = 0;
+    const onPayloadReady: OnPayloadReady = jest.fn((data, metadata) => {
+      if (++onPayloadReadyCallCount === 2) {
+        expect(data.selected_offers[0]).toBe(MOCK_OFFER.id);
+        expect(metadata.baggage_services.length).toBe(2);
+
+        // Confirm that the markup is applied.
+        expect(
+          metadata.baggage_services[0].serviceInformation?.total_amount
+        ).toBe("23");
+      }
+    });
+    const { getByText, getByTestId, getByTitle } = render(
+      <DuffelAncillaries
+        {...defaultProps}
+        onPayloadReady={onPayloadReady}
+        markup={{
+          bags: { amount: 1, rate: 0.1 },
+          seats: { amount: 2, rate: 0.2 },
+          cancel_for_any_reason: { amount: 3, rate: 0.3 },
+        }}
+      />
+    );
+
+    /**
+     * First, select bags.
+     */
+
+    fireEvent.click(getByTitle("Select extra baggage"));
+
+    // There are no services for the first segment of the offer.
+    fireEvent.click(getByTestId("confirm-selection-for-baggage"));
+
+    const totalPriceLabel = getByTestId("baggage-total-amount-label");
+    expect(totalPriceLabel.textContent).toBe("+ £0.00");
+
+    for (const available_service of MOCK_OFFER.available_services) {
+      if (available_service.type !== "baggage") continue;
+
+      for (const passengerId of available_service.passenger_ids) {
+        const priceLabelTestId = `price-label--${available_service.id}--${passengerId}`;
+        const priceLabel = getByTestId(priceLabelTestId);
+        expect(priceLabel.textContent).toBe("£23.00");
+
+        const addButtonTestId = `counter--${available_service.id}--${passengerId}-plus`;
+        const addBaggageButton = getByTestId(addButtonTestId);
+        fireEvent.click(addBaggageButton);
+      }
+    }
+
+    // Price should now have been updated.
+    expect(totalPriceLabel.textContent).toBe("+ £46.00");
+
+    fireEvent.click(getByTestId("confirm-selection-for-baggage"));
+    expect(getByText(/2 bags added for £46.00/i));
+
+    /**
+     * Now, select seats.
+     */
+
+    const seatCard = getByTitle("Select seats");
+    fireEvent.click(seatCard);
+
+    fireEvent.click(getByTestId("seat-28E"));
+    fireEvent.click(getByTestId("confirm-selection-for-seats"));
+
+    fireEvent.click(getByTestId("seat-28F"));
+    fireEvent.click(getByTestId("confirm-selection-for-seats"));
+
+    fireEvent.click(getByTestId("seat-28E"));
+    fireEvent.click(getByTestId("confirm-selection-for-seats"));
+
+    fireEvent.click(getByTestId("seat-28F"));
+    fireEvent.click(getByTestId("confirm-selection-for-seats"));
+
+    expect(getByText(/4 seats selected for £104.00/i));
+
+    /**
+     * Now, select CFAR.
+     */
+
+    const cfarCard = getByTitle("Add cancel for any reason");
+    fireEvent.click(cfarCard);
+
+    fireEvent.click(getByTestId("confirm-selection-for-cfar"));
+
+    expect(getByText(/Your trip is protected for £129.69/i));
+
+    // The component is always called at least once
+    // when the state is set with an offer.
+    expect(onPayloadReady).toBeCalledTimes(4);
+  });
+
+  test("should work with priceFormatters", () => {
+    let onPayloadReadyCallCount = 0;
+    const onPayloadReady: OnPayloadReady = jest.fn((data, metadata) => {
+      if (++onPayloadReadyCallCount === 2) {
+        expect(data.selected_offers[0]).toBe(MOCK_OFFER.id);
+        expect(metadata.baggage_services.length).toBe(2);
+
+        // Confirm that the markup is applied.
+        expect(
+          metadata.baggage_services[0].serviceInformation?.total_amount
+        ).toBe("40");
+        expect(
+          metadata.baggage_services[0].serviceInformation?.total_currency
+        ).toBe("Duffel house points");
+      }
+    });
+    const currency = "Duffel house points";
+    const { getByText, getByTestId, getByTitle } = render(
+      <DuffelAncillaries
+        {...defaultProps}
+        onPayloadReady={onPayloadReady}
+        priceFormatters={{
+          bags: (amount) => {
+            return {
+              amount: amount * 2,
+              currency,
+            };
+          },
+          seats: (amount) => {
+            return {
+              amount: amount / 2,
+              currency,
+            };
+          },
+          cancel_for_any_reason: () => {
+            return {
+              amount: 100,
+              currency,
+            };
+          },
+        }}
+      />
+    );
+
+    /**
+     * First, select bags.
+     */
+
+    fireEvent.click(getByTitle("Select extra baggage"));
+
+    // There are no services for the first segment of the offer.
+    fireEvent.click(getByTestId("confirm-selection-for-baggage"));
+
+    const totalPriceLabel = getByTestId("baggage-total-amount-label");
+    expect(totalPriceLabel.textContent).toBe("+ 0 Duffel house points");
+
+    for (const available_service of MOCK_OFFER.available_services) {
+      if (available_service.type !== "baggage") continue;
+
+      for (const passengerId of available_service.passenger_ids) {
+        const priceLabelTestId = `price-label--${available_service.id}--${passengerId}`;
+        const priceLabel = getByTestId(priceLabelTestId);
+        expect(priceLabel.textContent).toBe("40 Duffel house points");
+
+        const addButtonTestId = `counter--${available_service.id}--${passengerId}-plus`;
+        const addBaggageButton = getByTestId(addButtonTestId);
+        fireEvent.click(addBaggageButton);
+      }
+    }
+
+    // Price should now have been updated.
+    expect(totalPriceLabel.textContent).toBe("+ 80 Duffel house points");
+
+    fireEvent.click(getByTestId("confirm-selection-for-baggage"));
+    expect(getByText(/2 bags added for 80 Duffel house points/i));
+
+    /**
+     * Now, select seats.
+     */
+
+    const seatCard = getByTitle("Select seats");
+    fireEvent.click(seatCard);
+
+    fireEvent.click(getByTestId("seat-28E"));
+    fireEvent.click(getByTestId("confirm-selection-for-seats"));
+
+    fireEvent.click(getByTestId("seat-28F"));
+    fireEvent.click(getByTestId("confirm-selection-for-seats"));
+
+    fireEvent.click(getByTestId("seat-28E"));
+    fireEvent.click(getByTestId("confirm-selection-for-seats"));
+
+    fireEvent.click(getByTestId("seat-28F"));
+    fireEvent.click(getByTestId("confirm-selection-for-seats"));
+
+    expect(getByText(/4 seats selected for 40 Duffel house points/i));
+
+    /**
+     * Now, select CFAR.
+     */
+
+    const cfarCard = getByTitle("Add cancel for any reason");
+    fireEvent.click(cfarCard);
+
+    fireEvent.click(getByTestId("confirm-selection-for-cfar"));
+
+    expect(getByText(/Your trip is protected for 100 Duffel house points/i));
+
+    // The component is always called at least once
+    // when the state is set with an offer.
+    expect(onPayloadReady).toBeCalledTimes(4);
+  });
+});