@qite/tide-booking-component 1.4.39 → 1.4.41

package/src/search-results/components/flight/flight-option.tsx

@@ -0,0 +1,243 @@
+import React, { useContext, useState } from 'react';
+import { durationTicksInHoursString, formatPrice, getTranslations, longFormatDate, timeFromDateTime } from '../../../shared/utils/localization-util';
+import Icon from '../icon';
+import { ExtendedFlightSearchResponseItem } from '../../types';
+import SearchResultsConfigurationContext from '../../search-results-configuration-context';
+import { getArrivalSegment, getDepartureSegment, getFlightSegments, getNumberOfStopsLabel } from '../../utils/flight-utils';
+import { useDispatch, useSelector } from 'react-redux';
+import { setSelectedFlight } from '../../store/search-results-slice';
+import { SearchResultsRootState } from '../../store/search-results-store';
+
+interface FlightOptionProps {
+  item: ExtendedFlightSearchResponseItem;
+}
+
+const FlightOption: React.FC<FlightOptionProps> = ({ item }) => {
+  const dispatch = useDispatch();
+  const { selectedFlightId } = useSelector((state: SearchResultsRootState) => state.searchResults);
+  const context = useContext(SearchResultsConfigurationContext);
+  const language = context?.languageCode ?? 'en-GB';
+  const translations = getTranslations(context?.languageCode ?? 'en-GB');
+
+  const [isOutwardOpen, setIsOutwardOpen] = useState(false);
+  const [isReturnOpen, setIsReturnOpen] = useState(false);
+
+  const handleSelect = (flightGuid: string) => {
+    dispatch(setSelectedFlight(flightGuid));
+  };
+
+  return (
+    <div className="search__result-card">
+      <div className="flight">
+        <div className="flight__option">
+          <div className="flight__content">
+            <div className="flight__flights">
+              <div className="flight__flight">
+                <div className="flight__flight__header">
+                  <div className="flight__status__container"></div>
+                  <div className="flight__price">
+                    <span className="price">{formatPrice(item.price, 'EUR', context?.languageCode ?? 'en-GB')}</span>
+                    <button
+                      type="button"
+                      className={`cta ${selectedFlightId === item.guid ? 'cta--selected' : 'cta--select'}`}
+                      onClick={() => handleSelect(item.guid)}>
+                      {selectedFlightId === item.guid ? 'Selected' : 'Select'}
+                    </button>
+                  </div>
+                </div>
+              </div>
+              {item.outward && (
+                <div className="flight__flight">
+                  <div className="flight__flight__container">
+                    <div className="flight__flight__wrapper">
+                      <div className="flight__logo__wrapper">
+                        <img src={`https://media.tidesoftware.be/media/shared/Airlines/${item.airlineCode}.png?height=256`} alt="" className="flight__logo" />
+                        <span>{item.airlineName}</span>
+                      </div>
+                      <div className="flight__info">
+                        <div className="flight__info__times">
+                          <strong>
+                            {timeFromDateTime(getDepartureSegment(item.outward)?.departureDateTime)} {getDepartureSegment(item.outward)?.departureAirportCode}
+                          </strong>
+                          <p>{longFormatDate(getDepartureSegment(item.outward)?.departureDateTime, language)}</p>
+                        </div>
+                        <div className="flight__info__duration">
+                          <p>{durationTicksInHoursString(item.outward.durationInTicks)}</p>
+                          <div className="flight__info__duration__stops">
+                            <div className="flight__info__duration__stop" />
+                          </div>
+                          <span>{getNumberOfStopsLabel(item.outward, translations.SRP.DIRECT, translations.SRP.STOPS, translations.SRP.STOP)}</span>
+                        </div>
+                        <div className="flight__info__times flight__info__times--arrival">
+                          <strong>
+                            {timeFromDateTime(getArrivalSegment(item.outward)?.arrivalDateTime)} {getArrivalSegment(item.outward)?.arrivalAirportCode}
+                          </strong>
+                          <p>{longFormatDate(getArrivalSegment(item.outward)?.arrivalDateTime, language)}</p>
+                          {/* <span className="flight__info__times__days">+1 day</span> */}
+                        </div>
+                      </div>
+                    </div>
+
+                    <div className="flight__detail__btn__wrapper">
+                      <div
+                        className={`flight__detail__btn ${isOutwardOpen ? 'flight__detail__btn--active' : ''}`}
+                        onClick={() => setIsOutwardOpen((prev) => !prev)}>
+                        <Icon name="ui-chevron" className="flight__detail__btn__arrow" width={16} height={16} />
+                      </div>
+                    </div>
+                  </div>
+
+                  <div className={`flight__detail ${isOutwardOpen ? 'flight__detail--active' : ''}`}>
+                    {getFlightSegments(item.outward).map((segment) => (
+                      <>
+                        <div key={segment.flightNumber} className="flight__info">
+                          <div className="flight__info__times__wrapper">
+                            <div className="flight__info__times">
+                              <p>{timeFromDateTime(segment.departureDateTime)}</p>
+                              <strong>{segment.departureAirportCode}</strong>
+                              <p>{longFormatDate(segment.departureDateTime, language)}</p>
+                            </div>
+                            <div>
+                              <Icon name="ui-plane-depart" width={30} height={20} />
+                            </div>
+                          </div>
+                          <div className="flight__info__duration">
+                            <p>{durationTicksInHoursString(segment.durationInTicks)}</p>
+                            <div className="flight__info__duration__stops" />
+                            <span>{segment.marketingAirlineName}</span>
+                            <strong>{segment.operatingFlightNumber}</strong>
+                          </div>
+                          <div className="flight__info__times__wrapper flight__info__times__wrapper--arrival">
+                            <div>
+                              <Icon name="ui-plane-arrive" width={30} height={20} />
+                            </div>
+                            <div className="flight__info__times flight__info__times--arrival">
+                              <p>{timeFromDateTime(segment.arrivalDateTime)}</p>
+                              <strong>{segment.arrivalAirportCode}</strong>
+                              <p>{longFormatDate(segment.arrivalDateTime, language)}</p>
+                            </div>
+                          </div>
+                        </div>
+
+                        {segment.transferTimeInTicks && (
+                          <div className="flight__info">
+                            <div className="flight__info__times" />
+                            <div className="flight__info__duration flight__info__duration--waittime">
+                              <div className="flight__info__duration__stops flight__info__duration__stops--stoptime">
+                                <Icon name="ui-clock" width={24} height={24} />
+                              </div>
+                              <div className="flight__info__duration__stoptime">
+                                <span>Stop time</span>
+                                <strong>{durationTicksInHoursString(segment.transferTimeInTicks)}</strong>
+                              </div>
+                            </div>
+                            <div className="flight__info__times flight__info__times--arrival" />
+                          </div>
+                        )}
+                      </>
+                    ))}
+                  </div>
+                </div>
+              )}
+              {item.return && (
+                <div className="flight__flight">
+                  <div className="flight__flight__container">
+                    <div className="flight__flight__wrapper">
+                      <div className="flight__logo__wrapper">
+                        <img src={`https://media.tidesoftware.be/media/shared/Airlines/${item.airlineCode}.png?height=256`} alt="" className="flight__logo" />
+                        <span>{item.airlineName}</span>
+                      </div>
+                      <div className="flight__info">
+                        <div className="flight__info__times">
+                          <strong>
+                            {timeFromDateTime(getDepartureSegment(item.return)?.departureDateTime)} {getDepartureSegment(item.return)?.departureAirportCode}
+                          </strong>
+                          <p>{longFormatDate(getDepartureSegment(item.return)?.departureDateTime, language)}</p>
+                        </div>
+                        <div className="flight__info__duration">
+                          <p>{durationTicksInHoursString(item.return.durationInTicks)}</p>
+                          <div className="flight__info__duration__stops">
+                            <div className="flight__info__duration__stop" />
+                          </div>
+                          <span>{getNumberOfStopsLabel(item.return, translations.SRP.DIRECT, translations.SRP.STOPS, translations.SRP.STOP)}</span>
+                        </div>
+                        <div className="flight__info__times flight__info__times--arrival">
+                          <strong>
+                            {timeFromDateTime(getArrivalSegment(item.return)?.arrivalDateTime)} {getArrivalSegment(item.return)?.arrivalAirportCode}
+                          </strong>
+                          <p>{longFormatDate(getArrivalSegment(item.return)?.arrivalDateTime, language)}</p>
+                          {/* <span className="flight__info__times__days">+1 day</span> */}
+                        </div>
+                      </div>
+                    </div>
+
+                    <div className="flight__detail__btn__wrapper">
+                      <div
+                        className={`flight__detail__btn ${isReturnOpen ? 'flight__detail__btn--active' : ''}`}
+                        onClick={() => setIsReturnOpen((prev) => !prev)}>
+                        <Icon name="ui-chevron" className="flight__detail__btn__arrow" width={16} height={16} />
+                      </div>
+                    </div>
+                  </div>
+
+                  <div className={`flight__detail ${isReturnOpen ? 'flight__detail--active' : ''}`}>
+                    {getFlightSegments(item.return).map((segment) => (
+                      <>
+                        <div key={segment.flightNumber} className="flight__info">
+                          <div className="flight__info__times__wrapper">
+                            <div className="flight__info__times">
+                              <p>{timeFromDateTime(segment.departureDateTime)}</p>
+                              <strong>{segment.departureAirportCode}</strong>
+                              <p>{longFormatDate(segment.departureDateTime, language)}</p>
+                            </div>
+                            <div>
+                              <Icon name="ui-plane-depart" width={30} height={20} />
+                            </div>
+                          </div>
+                          <div className="flight__info__duration">
+                            <p>{durationTicksInHoursString(segment.durationInTicks)}</p>
+                            <div className="flight__info__duration__stops" />
+                            <span>{segment.marketingAirlineName}</span>
+                            <strong>{segment.operatingFlightNumber}</strong>
+                          </div>
+                          <div className="flight__info__times__wrapper flight__info__times__wrapper--arrival">
+                            <div>
+                              <Icon name="ui-plane-arrive" width={30} height={20} />
+                            </div>
+                            <div className="flight__info__times flight__info__times--arrival">
+                              <p>{timeFromDateTime(segment.arrivalDateTime)}</p>
+                              <strong>{segment.arrivalAirportCode}</strong>
+                              <p>{longFormatDate(segment.arrivalDateTime, language)}</p>
+                            </div>
+                          </div>
+                        </div>
+
+                        {segment.transferTimeInTicks && (
+                          <div className="flight__info">
+                            <div className="flight__info__times" />
+                            <div className="flight__info__duration flight__info__duration--waittime">
+                              <div className="flight__info__duration__stops flight__info__duration__stops--stoptime">
+                                <Icon name="ui-clock" width={24} height={24} />
+                              </div>
+                              <div className="flight__info__duration__stoptime">
+                                <span>Stop time</span>
+                                <strong>{durationTicksInHoursString(segment.transferTimeInTicks)}</strong>
+                              </div>
+                            </div>
+                            <div className="flight__info__times flight__info__times--arrival" />
+                          </div>
+                        )}
+                      </>
+                    ))}
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default FlightOption;