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

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

@@ -1,90 +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 { 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

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

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

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

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

@@ -1,74 +0,0 @@
-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";
-
-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: "var(--SECONDARY, rgb(var(--ACCENT)))" }}
-    />
-    Your trip is protected
-  </div>
-);

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

@@ -1,9 +0,0 @@
-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/DuffelAncillaries/seats/Amenity.tsx

@@ -1,21 +0,0 @@
-import { Icon, IconName } from "@components/shared/Icon";
-import classNames from "classnames";
-import * as React from "react";
-import { SeatMapCabinRowSectionElementAmenity } from "../../../types/SeatMap";
-
-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/DuffelAncillaries/seats/DeckSelect.tsx

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

package/src/components/DuffelAncillaries/seats/Element.tsx

@@ -1,52 +0,0 @@
-import { isSeatElement } from "@lib/isSeatElement";
-import * as React from "react";
-import { CreateOrderPayloadSeatService } from "../../../types/CreateOrderPayload";
-import { SeatMapCabinRowSectionElement } from "../../../types/SeatMap";
-import { Amenity } from "./Amenity";
-import { EmptyElement } from "./EmptyElement";
-import { ExitElement } from "./ExitElement";
-import { SeatElement } from "./SeatElement";
-
-interface ElementProps {
-  sectionIndex: number;
-  elementIndex: number;
-  element: SeatMapCabinRowSectionElement;
-  selectedServicesMap: Record<string, CreateOrderPayloadSeatService>;
-  onSeatToggled: (seatService: CreateOrderPayloadSeatService) => void;
-  currentPassengerId: string;
-  currentSegmentId: string;
-  currentPassengerName: string;
-}
-
-export const Element: React.FC<ElementProps> = ({
-  element,
-  elementIndex,
-  sectionIndex,
-  onSeatToggled,
-  selectedServicesMap,
-  currentPassengerId,
-  currentSegmentId,
-  currentPassengerName,
-}) => {
-  return (
-    <>
-      {isSeatElement(element) ? (
-        <SeatElement
-          currentSegmentId={currentSegmentId}
-          currentPassengerId={currentPassengerId}
-          currentPassengerName={currentPassengerName}
-          selectedServicesMap={selectedServicesMap}
-          key={elementIndex}
-          element={element}
-          onSeatToggled={onSeatToggled}
-        />
-      ) : element.type === "empty" ? (
-        <EmptyElement key={elementIndex} />
-      ) : element.type === "exit_row" ? (
-        <ExitElement key={elementIndex} isRight={sectionIndex > 0} />
-      ) : (
-        <Amenity key={elementIndex} type={element.type} />
-      )}
-    </>
-  );
-};

package/src/components/DuffelAncillaries/seats/EmptyElement.tsx

@@ -1,5 +0,0 @@
-import * as React from "react";
-
-export const EmptyElement: React.FC = () => (
-  <div className="map-element map-element--empty" />
-);

package/src/components/DuffelAncillaries/seats/ExitElement.tsx

@@ -1,17 +0,0 @@
-import { Icon } from "@components/shared/Icon";
-import classNames from "classnames";
-import * as React from "react";
-
-interface ExitElementProps {
-  isRight: boolean;
-}
-
-export const ExitElement: React.FC<ExitElementProps> = ({ isRight }) => (
-  <div
-    className={classNames("map-element map-element--exit", {
-      "map-element--exit--right": isRight,
-    })}
-  >
-    {isRight ? <Icon name="exit_row_right" /> : <Icon name="exit_row" />}
-  </div>
-);

package/src/components/DuffelAncillaries/seats/Legend.tsx

@@ -1,60 +0,0 @@
-import { Icon, IconName } from "@components/shared/Icon";
-import * as React from "react";
-import { SeatMapCabinRowSectionElementAmenity } from "../../../types/SeatMap";
-
-export interface LegendProps {
-  /**
-   * The set of additional symbols to display
-   */
-  symbols: Set<SeatMapCabinRowSectionElementAmenity>;
-}
-
-/**
- * The legend for the seat map.
- */
-export const Legend: React.FC<LegendProps> = ({ symbols }) => (
-  <div className="seat-map__legend">
-    <span className="seat-map__legend-item">
-      <span
-        className="seat-map__legend-seat seat-map__legend-seat--fee-payable"
-        aria-label="Additional cost for seat"
-      >
-        <Icon
-          name="seat_paid_indicator"
-          className="seat-map__legend-seat--fee-payable-indicator"
-          size={12}
-        />
-      </span>
-      Additional Cost
-    </span>
-    <span className="seat-map__legend-item">
-      <span
-        className="seat-map__legend-seat seat-map__legend-seat--included"
-        aria-label="Included seat"
-      />
-      Included
-    </span>
-    <span className="seat-map__legend-item">
-      <span
-        className="seat-map__legend-seat seat-map__legend-seat--selected"
-        aria-label="Selected seat"
-      />
-      Selected
-    </span>
-    <span className="seat-map__legend-item">
-      <span className="seat-map__legend-seat" aria-label="Unavailable seat">
-        <Icon name="close" size={14} />
-      </span>
-      Unavailable
-    </span>
-    {[...symbols].map((symbol) => (
-      <span
-        key={symbol}
-        className="seat-map__legend-item seat-map__legend-item--symbol"
-      >
-        <Icon name={symbol as IconName} size={20} />
-        {symbol.split("_")[0]}
-      </span>
-    ))}
-  </div>
-);

package/src/components/DuffelAncillaries/seats/Row.tsx

@@ -1,47 +0,0 @@
-import { getRowNumber } from "@lib/getRowNumber";
-import * as React from "react";
-import { CreateOrderPayloadSeatService } from "../../../types/CreateOrderPayload";
-import { SeatMapCabinRow } from "../../../types/SeatMap";
-import { RowSection } from "./RowSection";
-
-export interface RowProps {
-  row: SeatMapCabinRow;
-  hasWings: boolean;
-  selectedServicesMap: Record<string, CreateOrderPayloadSeatService>;
-  onSeatToggled: (seatService: CreateOrderPayloadSeatService) => void;
-  currentPassengerId: string;
-  currentPassengerName: string;
-  currentSegmentId: string;
-}
-
-export const Row: React.FC<RowProps> = ({
-  row,
-  hasWings,
-  onSeatToggled,
-  selectedServicesMap,
-  currentPassengerId,
-  currentPassengerName,
-  currentSegmentId,
-}) => {
-  const rowNumber = getRowNumber(row);
-
-  return (
-    <>
-      {row.sections.map((section, sectionIndex) => (
-        <RowSection
-          key={sectionIndex}
-          row={row}
-          rowNumber={rowNumber}
-          hasWings={hasWings}
-          section={section}
-          sectionIndex={sectionIndex}
-          selectedServicesMap={selectedServicesMap}
-          onSeatToggled={onSeatToggled}
-          currentPassengerId={currentPassengerId}
-          currentPassengerName={currentPassengerName}
-          currentSegmentId={currentSegmentId}
-        />
-      ))}
-    </>
-  );
-};

package/src/components/DuffelAncillaries/seats/RowSection.tsx

@@ -1,78 +0,0 @@
-import classNames from "classnames";
-import * as React from "react";
-import { CreateOrderPayloadSeatService } from "../../../types/CreateOrderPayload";
-import {
-  SeatMapCabinRow,
-  SeatMapCabinRowSection,
-} from "../../../types/SeatMap";
-import { Element } from "./Element";
-import { EmptyElement } from "./EmptyElement";
-
-interface RowSectionProps {
-  row: SeatMapCabinRow;
-  rowNumber: string | null;
-  hasWings: boolean;
-  section: SeatMapCabinRowSection;
-  sectionIndex: number;
-  selectedServicesMap: Record<string, CreateOrderPayloadSeatService>;
-  onSeatToggled: (seatService: CreateOrderPayloadSeatService) => void;
-  currentPassengerId: string;
-  currentPassengerName: string;
-  currentSegmentId: string;
-}
-
-export const RowSection: React.FC<RowSectionProps> = ({
-  row,
-  rowNumber,
-  hasWings,
-  section,
-  sectionIndex,
-  onSeatToggled,
-  selectedServicesMap,
-  currentPassengerId,
-  currentPassengerName,
-  currentSegmentId,
-}) => {
-  const rowLength = Object.keys(row.sections).length;
-  const isOneSectionRow = rowLength === 1;
-
-  return (
-    <React.Fragment key={sectionIndex}>
-      <div
-        className={classNames("map-section", {
-          "map-section--left": sectionIndex === 0,
-          "map-section--right": !isOneSectionRow
-            ? sectionIndex === rowLength - 1
-            : false,
-          "map-section--wing": hasWings,
-        })}
-      >
-        {section.elements.length > 0 ? (
-          section.elements.map((element, elementIndex) => (
-            <React.Fragment key={elementIndex}>
-              <Element
-                sectionIndex={sectionIndex}
-                elementIndex={elementIndex}
-                element={element}
-                selectedServicesMap={selectedServicesMap}
-                onSeatToggled={onSeatToggled}
-                currentPassengerId={currentPassengerId}
-                currentSegmentId={currentSegmentId}
-                currentPassengerName={currentPassengerName}
-              />
-            </React.Fragment>
-          ))
-        ) : (
-          <EmptyElement />
-        )}
-      </div>
-      {(sectionIndex < rowLength - 1 ||
-        (isOneSectionRow && sectionIndex < rowLength)) && (
-        <span className="map-section__aisle">{rowNumber}</span>
-      )}
-      {isOneSectionRow && sectionIndex === row.sections.length - 1 && (
-        <EmptyElement />
-      )}
-    </React.Fragment>
-  );
-};