@odynn/awayz-flights 0.9.3 → 0.9.4

package/package.json

@@ -1,12 +1,11 @@
 {
   "name": "@odynn/awayz-flights",
-  "version": "0.9.3",
+  "version": "0.9.4",
   "type": "module",
   "files": [
-    "dist",
-    "lib"
+    "dist"
   ],
-  "main": "lib/main.ts",
+  "main": "dist/main.js",
   "types": "./dist/lib/main.d.ts",
   "scripts": {
     "test": "echo \"NOTE: Please run tests from the root\"",

package/lib/components/BookingOption/BookingOption.tsx

@@ -1,240 +0,0 @@
-import {
-  CashValue,
-  ClientPointsValue,
-  EAmountsDisplayFeature,
-  EInvalidAmountDisplayOption,
-  EToolTipPosition,
-  useFeatureFlags
-} from '@odynn/awayz-core';
-import { useQuery } from '@tanstack/react-query';
-import {
-  commaSeparatedNumber,
-  DEFAULT_CURRENCY,
-  ISegment,
-  ISlice,
-  pluralise,
-  toTitleCase
-} from '@type-op/shared';
-import React, { useState } from 'react';
-import { FaTimes } from 'react-icons/fa';
-import {
-  FaCheck,
-  FaChevronDown,
-  FaChevronUp,
-  FaSuitcase
-} from 'react-icons/fa6';
-import { EPaymentType } from '../../enums';
-import {
-  EBaggage,
-  IFlightPaymentOptionBaggage,
-  IOfferConditions
-} from '../../hooks/useFlightSearch/useFlightSearch.types';
-import { formatCabinClass, getAirlineProgram } from '../../utils/flightUtils';
-import './_styles.booking-option.scss';
-
-interface IBookingOptionProps {
-  type: EPaymentType;
-  title: string;
-  cashValue?: {
-    amount: number;
-    currency: string;
-  };
-  milesValue?: number;
-  cashFee?: {
-    amount: number;
-    currency: string;
-  };
-  setSelected: () => void;
-  conditions?: IOfferConditions;
-  slices?: ISlice[];
-  baggages?: IFlightPaymentOptionBaggage[];
-  program?: string;
-}
-
-const BookingOption = ({
-  type,
-  title,
-  cashValue,
-  milesValue,
-  cashFee,
-  setSelected,
-  conditions,
-  slices,
-  baggages,
-  program
-}: IBookingOptionProps) => {
-  const { featureFlags } = useFeatureFlags();
-  const [showMoreOptions, setShowMoreOptions] = useState(false);
-
-  const refundable = conditions?.refundBeforeDeparture;
-
-  const changeable = conditions?.changeBeforeDeparture;
-
-  const additionalOptionsCount =
-    (refundable?.allowed ? 1 : 0) +
-    (changeable?.allowed ? 1 : 0) +
-    (slices?.[0]?.segments?.length || 0);
-
-  const { data: programDetails } = useQuery({
-    queryKey: ['airlineProgram', program],
-    queryFn: () => getAirlineProgram(program!),
-    enabled: !!program
-  });
-
-  return (
-    <div
-      className={`flight-booking-option`}
-      onClick={(e) => e.stopPropagation()}
-    >
-      <div className='rate-details'>
-        {type === EPaymentType.POINTS && (
-          <img src={programDetails?.programLogo} />
-        )}
-        <p className='fare-brand-name'>{toTitleCase(title)}</p>
-      </div>
-      {type === EPaymentType.CASH && (
-        <div className={`fare-comparison-content`}>
-          {baggages?.map((item, idx: number) => (
-            <React.Fragment key={idx}>
-              {item.type === EBaggage.CHECKED && (
-                <div className='fare-option checked'>
-                  <p>Checked bags:</p>
-                  <p>{item.quantity}</p>
-                </div>
-              )}
-              {item.type === EBaggage.CARRY_ON && (
-                <div className='fare-option'>
-                  <p>Carry-on bags:</p>
-                  <p>{item.quantity}</p>
-                </div>
-              )}
-              {item.type === null && (
-                <div className='fare-option'>
-                  <FaSuitcase />
-                  <p>N/A</p>
-                </div>
-              )}
-            </React.Fragment>
-          ))}
-          <div className='fare-option refundable'>
-            Refundable:{' '}
-            {refundable?.allowed ? (
-              <FaCheck className='yes' />
-            ) : (
-              <FaTimes className='no' />
-            )}
-          </div>
-          <div className='fare-option changeable'>
-            Changeable:{' '}
-            {changeable?.allowed ? (
-              <FaCheck className='yes' />
-            ) : (
-              <FaTimes className='no' />
-            )}
-          </div>
-          <div
-            className='fare-option show-more-toggle'
-            onClick={(e) => {
-              e.stopPropagation();
-              setShowMoreOptions(!showMoreOptions);
-            }}
-          >
-            <p>
-              {showMoreOptions
-                ? `Hide ${pluralise(additionalOptionsCount, 'option')}`
-                : `+${additionalOptionsCount} ${pluralise(additionalOptionsCount, 'option')}`}
-            </p>
-            <p>{showMoreOptions ? <FaChevronUp /> : <FaChevronDown />}</p>
-          </div>
-          {showMoreOptions && (
-            <>
-              {refundable?.allowed && (
-                <div className='fare-option'>
-                  Refundable Penalty:{' '}
-                  <CashValue
-                    amount={refundable.penaltyAmount || 0}
-                    currency={refundable.penaltyCurrency || ''}
-                    zeroDisplayOption={
-                      EInvalidAmountDisplayOption.DISPLAY_AS_ZERO_WITH_CURRENCY
-                    }
-                    position={EToolTipPosition.LEFT}
-                  />
-                </div>
-              )}
-              {changeable?.allowed && (
-                <div className='fare-option'>
-                  Changeable Penalty:{' '}
-                  <CashValue
-                    amount={changeable.penaltyAmount || 0}
-                    currency={changeable.penaltyCurrency || ''}
-                    zeroDisplayOption={
-                      EInvalidAmountDisplayOption.DISPLAY_AS_ZERO_WITH_CURRENCY
-                    }
-                    position={EToolTipPosition.LEFT}
-                  />
-                </div>
-              )}
-              {slices?.[0].segments?.map((segment: ISegment) => (
-                <div
-                  className='fare-option checked'
-                  key={`${segment.origin.iataCode}-${segment.destination.iataCode}`}
-                >
-                  <p>
-                    {segment.origin.iataCode} - {segment.destination.iataCode}:
-                  </p>
-                  <div>
-                    <img src={segment.operatingCarrier.logo} />
-                    <p>{formatCabinClass(segment.passengers[0].cabinClass)}</p>
-                  </div>
-                </div>
-              ))}
-            </>
-          )}
-        </div>
-      )}
-      <button
-        onClick={(e) => {
-          e.stopPropagation();
-          setSelected();
-        }}
-      >
-        {type === EPaymentType.CASH && !!cashValue ? (
-          <span>
-            <CashValue
-              amount={cashValue.amount}
-              currency={cashValue.currency}
-              position={EToolTipPosition.LEFT}
-              zeroDisplayOption={
-                EInvalidAmountDisplayOption.DISPLAY_AS_ZERO_WITH_CURRENCY
-              }
-              decimalPlaces={2}
-            />
-            {featureFlags.amountsDisplayFeature ===
-              EAmountsDisplayFeature.CASH_AND_CLIENT_POINTS && (
-              <>
-                {' / '}
-                <ClientPointsValue
-                  currency={cashValue.currency}
-                  cashAmount={cashValue.amount}
-                />
-              </>
-            )}
-          </span>
-        ) : (
-          <>
-            {`${commaSeparatedNumber(milesValue)} miles + `}
-            <CashValue
-              amount={cashFee?.amount || 0}
-              currency={cashFee?.currency || DEFAULT_CURRENCY}
-              position={EToolTipPosition.LEFT}
-              customDisplay='No fee'
-              zeroDisplayOption={EInvalidAmountDisplayOption.CUSTOM}
-            />
-          </>
-        )}
-      </button>
-    </div>
-  );
-};
-
-export default BookingOption;

package/lib/components/BookingOption/_styles.booking-option.scss

@@ -1,69 +0,0 @@
-.flight-booking-option {
-  display: flex;
-  flex-direction: column;
-  border: $border;
-  border-radius: $border-radius;
-  cursor: default;
-  user-select: none;
-  transition: all 0.3s ease;
-  padding: $padding;
-  min-width: 270px;
-  gap: $padding;
-  height: fit-content;
-
-  .fare-option {
-    display: flex;
-    justify-content: space-between;
-    border-bottom: $border;
-    padding: $padding-sm 0;
-
-    &.show-more-toggle {
-      cursor: pointer;
-
-      &:hover {
-        background-color: colour.$background;
-      }
-    }
-
-    .yes {
-      color: colour.$primary;
-    }
-
-    .no {
-      color: colour.$danger;
-    }
-
-    > div {
-      display: flex;
-      gap: $padding-sm;
-
-      img {
-        height: 20px;
-      }
-    }
-  }
-
-  .rate-details {
-    > img {
-      height: 30px;
-      max-width: 70%;
-    }
-
-    .fare-brand-name {
-      font-weight: font.$heavy;
-    }
-  }
-
-  button {
-    border-radius: $border-radius-pill;
-    padding: $padding-sm $padding;
-    border: none;
-    background-color: colour.$primary;
-    color: colour.$foreground;
-    font-weight: font.$heavy;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-}

package/lib/components/FlightItinerary/FlightItinerary.tsx

@@ -1,290 +0,0 @@
-import {
-  calculateTimeDifference,
-  getCountryNameByCode,
-  getTimeString,
-  getTimezoneOffsetOrCode,
-  ISegment
-} from '@type-op/shared';
-import {
-  DUFFEL_ASSET_PATH,
-  EDateFormats,
-  EDateKeys
-} from '@type-op/shared/constants';
-import moment from 'moment';
-import React, { useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { FaCalendar, FaClock } from 'react-icons/fa';
-import { IAirportLocation } from '../../hooks/useFlightSearch/useFlightSearch.types';
-import './_styles.flight-itinerary.scss';
-
-interface FlightItineraryProps {
-  origin: IAirportLocation;
-  destination: IAirportLocation;
-  itinerary: ISegment[];
-  onDisableRenderItinerary?: () => void;
-  isMultiDayFlight?: boolean;
-}
-
-const FlightItinerary = ({
-  itinerary,
-  origin,
-  destination,
-  onDisableRenderItinerary,
-  isMultiDayFlight
-}: FlightItineraryProps) => {
-  const getCabinClass = () => {
-    const passenger = itinerary[0]?.passengers?.[0];
-    return passenger?.cabinClassMarketingName ?? passenger?.cabinClass;
-  };
-  const layovers = useMemo(() => {
-    const layovers = [];
-
-    for (let i = 0; i < itinerary.length; i++) {
-      const segment = itinerary[i];
-      const nextSegment = itinerary[i + 1];
-
-      if (!nextSegment) {
-        break;
-      }
-      const layover = {
-        arrival: {
-          airport: segment.destination?.name,
-          city:
-            segment.destination?.cityName ?? segment.destination?.city?.name,
-          country: getCountryNameByCode(segment.destination?.iataCountryCode),
-          time: segment.arrivingAt,
-          arrivalTimeZone: segment.destination.timeZone
-        },
-        departure: {
-          airport: nextSegment.origin?.name,
-          city: nextSegment.origin?.cityName ?? nextSegment.origin?.city?.name,
-          country: getCountryNameByCode(segment.destination?.iataCountryCode),
-          time: nextSegment.departingAt,
-          airline: nextSegment.operatingCarrier.name,
-          airlineCode: nextSegment.operatingCarrier.iataCode,
-          aircraft: nextSegment.aircraft?.name,
-          flightNumber: nextSegment.operatingCarrierFlightNumber,
-          cabin:
-            nextSegment.passengers[0].cabinClassMarketingName ??
-            nextSegment.passengers[0].cabinClass ??
-            getCabinClass(),
-          departureTimeZone: nextSegment.origin.timeZone
-        },
-        layoverTime: calculateTimeDifference({
-          // we need to swap around the departure and arrival times
-          departureAt: segment.arrivingAt,
-          departureTimeZone: segment.destination.timeZone,
-          arrivalAt: nextSegment.departingAt,
-          arrivalTimeZone: nextSegment.origin.timeZone
-        })
-      };
-      // TODO: get the ASAPI to give us what
-      // we need to calculate the layover time
-      if (layover.layoverTime <= 0) {
-        // if we can't calculate the layover time, we'll just
-        onDisableRenderItinerary?.();
-      }
-      layovers.push(layover);
-    }
-
-    return layovers;
-  }, [itinerary]);
-
-  return (
-    <div className='flight-itinerary'>
-      <Departure
-        airport={itinerary[0].origin.name}
-        city={origin.city}
-        country={getCountryNameByCode(origin.country)}
-        departureAt={itinerary[0].departingAt}
-        departureTimeZone={itinerary[0].origin.timeZone}
-        arrivalAt={itinerary[0].arrivingAt}
-        arrivalTimeZone={itinerary[0].destination.timeZone}
-        airline={itinerary[0].operatingCarrier.name}
-        airlineCode={itinerary[0].operatingCarrier.iataCode}
-        aircraft={itinerary[0].aircraft?.name}
-        flightNumber={itinerary[0].operatingCarrierFlightNumber}
-        isMultiDayFlight={isMultiDayFlight}
-      />
-      {layovers.map((layover, index) => (
-        <React.Fragment key={layover.departure.flightNumber || index}>
-          <Arrival
-            airport={layover.arrival.airport}
-            city={layover.arrival.city}
-            country={layover.arrival.country}
-            time={layover.arrival.time}
-            isLayover
-            layoverTime={getTimeString(layover.layoverTime)}
-            arrivalTimeZone={getTimezoneOffsetOrCode(
-              layover.arrival.arrivalTimeZone,
-              layover.arrival.time
-            )}
-          />
-          <Departure
-            airport={layover.departure?.airport}
-            city={layover.departure?.city}
-            country={layover.departure?.country}
-            departureAt={layover.departure.time}
-            departureTimeZone={layover.departure.departureTimeZone}
-            // we need to get the next segment's arrival time when
-            // it's a layover
-            arrivalAt={itinerary[index + 1].arrivingAt}
-            // we need to get the next segment's arrival timezone when
-            // it's a layover
-            arrivalTimeZone={itinerary[index + 1].destination.timeZone}
-            airline={layover.departure?.airline}
-            airlineCode={layover.departure?.airlineCode}
-            aircraft={layover.departure?.aircraft}
-            flightNumber={layover.departure?.flightNumber}
-          />
-        </React.Fragment>
-      ))}
-      <Arrival
-        airport={itinerary.getLast()?.destination?.name}
-        city={destination.city}
-        country={getCountryNameByCode(destination.country)}
-        time={itinerary.getLast()?.arrivingAt}
-        arrivalTimeZone={getTimezoneOffsetOrCode(
-          itinerary.getLast()?.destination.timeZone,
-          itinerary.getLast()?.arrivingAt
-        )}
-        isMultiDayFlight={isMultiDayFlight}
-      />
-    </div>
-  );
-};
-
-interface IDepartureProps {
-  airport?: string;
-  city?: string;
-  country?: string;
-  airline?: string;
-  airlineCode?: string;
-  aircraft?: string;
-  flightNumber?: string;
-  testTimezone?: string;
-  departureAt: string;
-  departureTimeZone: string;
-  arrivalAt: string;
-  arrivalTimeZone: string;
-  isMultiDayFlight?: boolean;
-}
-
-const Departure = ({
-  airport,
-  city,
-  country,
-  airline,
-  airlineCode,
-  flightNumber,
-  aircraft,
-  departureAt,
-  departureTimeZone,
-  arrivalAt,
-  arrivalTimeZone,
-  isMultiDayFlight
-}: IDepartureProps) => {
-  const { t } = useTranslation();
-  const timeTravelled = calculateTimeDifference({
-    departureAt,
-    departureTimeZone,
-    arrivalAt,
-    arrivalTimeZone
-  });
-
-  return (
-    <div className='departure'>
-      <p>
-        {moment(departureAt).format(
-          t(EDateKeys.TIME_ONLY, EDateFormats.FlightTime)
-        )}{' '}
-        <span className='time-zone'>
-          ({getTimezoneOffsetOrCode(departureTimeZone, departureAt)})
-        </span>
-        <br />
-        {isMultiDayFlight ? (
-          <div className='travel-time'>
-            <FaCalendar />
-            <span>
-              Departure:{' '}
-              {moment(departureAt).format(
-                t(EDateKeys.DISPLAY_MEDIUM, EDateFormats.StringDateFormat)
-              )}
-            </span>
-          </div>
-        ) : (
-          <></>
-        )}
-        <div className='travel-time'>
-          <FaClock />
-          <span>Travel Time: {getTimeString(timeTravelled)}</span>
-        </div>
-      </p>
-      <div>
-        <span>
-          {airport}, {city}, {country}
-        </span>
-        <img src={`${DUFFEL_ASSET_PATH}${airlineCode}.svg`} alt={airline} />
-        <p>
-          <strong>Aircraft:</strong> {aircraft}
-        </p>
-        <p>
-          <strong>Flight:</strong> {airlineCode} {flightNumber}
-        </p>
-      </div>
-    </div>
-  );
-};
-
-interface IArrivalProps {
-  airport?: string;
-  city?: string;
-  country?: string;
-  time?: string;
-  isLayover?: boolean;
-  layoverTime?: string;
-  arrivalTimeZone?: string;
-  isMultiDayFlight?: boolean;
-}
-
-const Arrival = ({
-  airport,
-  city,
-  country,
-  time,
-  isLayover,
-  layoverTime,
-  arrivalTimeZone,
-  isMultiDayFlight
-}: IArrivalProps) => {
-  const { t } = useTranslation('dates');
-  return (
-    <div className={`arrival ${isLayover ? 'layover' : ''}`}>
-      <p>
-        {moment(time).format(t(EDateKeys.TIME_ONLY, EDateFormats.FlightTime))}{' '}
-        <span className='time-zone'>({arrivalTimeZone})</span>
-        {isMultiDayFlight && !isLayover ? (
-          <div className='travel-time'>
-            <FaCalendar />
-            <span>
-              Arrival:{' '}
-              {moment(time).format(
-                t(EDateKeys.DISPLAY_MEDIUM, EDateFormats.StringDateFormat)
-              )}
-            </span>
-          </div>
-        ) : (
-          <></>
-        )}
-      </p>
-      <div>
-        <p>
-          {isLayover ? 'Layover in' : ''} {airport}, {city}, {country}
-        </p>
-        <i>{isLayover ? layoverTime : ''}</i>
-      </div>
-    </div>
-  );
-};
-
-export default FlightItinerary;

package/lib/components/FlightItinerary/_styles.flight-itinerary.scss

@@ -1,102 +0,0 @@
-.flight-itinerary {
-  display: flex;
-  flex-direction: column;
-
-  .layover {
-    position: relative;
-    padding-bottom: calc($padding * 3);
-
-    &::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: calc($padding / 2 + 1px);
-      width: 3px;
-      background: repeating-linear-gradient(0deg, #d8e3ea 0 5px, #0000 0 8px);
-      z-index: 7;
-    }
-
-    > div {
-      > p,
-      > i {
-        color: #a9b2b7;
-      }
-    }
-  }
-
-  .departure,
-  .arrival {
-    display: flex;
-    gap: calc($padding * 2);
-
-    > p {
-      position: relative;
-      margin-left: calc($padding * 2);
-
-      &::before {
-        content: '';
-        border: 2px solid #d8e3ea;
-        height: 1rem;
-        width: 1rem;
-        border-radius: 50%;
-        position: absolute;
-        left: calc($padding * -2);
-        top: -0.2rem;
-        z-index: 10;
-        background-color: colour.$foreground;
-      }
-
-      .time-zone {
-        color: colour.$text-light;
-        font-size: font.$small;
-      }
-      .travel-time {
-        color: colour.$text-light;
-        font-size: font.$small;
-        display: flex;
-        flex-direction: row;
-        margin-top: $padding;
-        gap: calc($padding/4);
-        align-items: center;
-      }
-    }
-  }
-
-  .departure {
-    padding-bottom: calc($padding * 2);
-    position: relative;
-
-    &::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: calc($padding / 2 + 1px);
-      width: 2px;
-      background-color: #d8e3ea;
-      z-index: 7;
-    }
-
-    div {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      gap: 4px;
-      position: relative;
-      border-radius: $border-radius;
-
-      span {
-        font-weight: 500;
-      }
-      img {
-        max-width: 150px;
-        max-height: 25px;
-        align-self: flex-start;
-        background-color: colour.$light;
-        padding: $padding-xs $padding-sm;
-        border-radius: calc($border-radius / 2);
-      }
-    }
-  }
-}