@kiwicom/smart-faq/src/SmartFAQ/SingleBookingPage/bookingItem/Accordion.js

Smart FAQ

// @flow

import * as React from 'react';
import { createFragmentContainer, graphql } from 'react-relay';
import Card from '@kiwicom/orbit-components/lib/Card';
import CardSection from '@kiwicom/orbit-components/lib/Card/CardSection';

import { simpleTracker } from '../../../shared/helpers/analytics/trackers';
import AccordionBody from './AccordionBody';
import AccordionHeader from './AccordionHeader';
import type { AccordionTripSummary_trip } from './__generated__/AccordionTripSummary_trip.graphql';
import { track } from '../../../shared/cuckoo/tracker';

type Props = {|
  trip: AccordionTripSummary_trip,
|};
type State = {|
  isToggled: boolean,
|};

class Accordion extends React.Component<Props, State> {
  state = {
    isToggled: false,
  };

  toggleBody = () => {
    if (!this.state.isToggled) {
      simpleTracker('smartFAQBookingOverview', {
        action: 'openFlightCard',
      });
      track('BookingOverview', 'openFlightCard');
    }
    this.setState(prevState => ({ isToggled: !prevState.isToggled }));
  };

  handleKeyUp = e => {
    if (e.key !== 'Enter') return;
    this.toggleBody();
  };

  render() {
    const { trip } = this.props;

    return (
      <Card spaceAfter="medium">
        <CardSection>
          <div className="bookingAccordion" data-test="trip">
            <div
              className="bookingAccordionHeader"
              onClick={this.toggleBody}
              onKeyUp={this.handleKeyUp}
              tabIndex="0"
              role="button"
            >
              <AccordionHeader isToggled={this.state.isToggled} trip={trip} />
            </div>
            {this.state.isToggled && <AccordionBody legs={trip.legs} />}
          </div>
        </CardSection>
        <style jsx>
          {`
            .bookingAccordion > div:focus {
              outline: 0;
            }
            .bookingAccordionHeader {
              cursor: pointer;
              margin: -24px -24px ${this.state.isToggled ? '-16px' : '-24px'};
              padding: 24px 24px ${this.state.isToggled ? '16px' : '24px'};
            }
          `}
        </style>
      </Card>
    );
  }
}

export default createFragmentContainer(
  Accordion,
  graphql`
    fragment AccordionTripSummary_trip on Trip {
      departure {
        localTime
        airport {
          locationId
          city {
            name
          }
        }
      }
      arrival {
        airport {
          locationId
          city {
            name
          }
        }
      }
      legs {
        airline {
          name
          code
          logoUrl
        }
        ...CarrierLogoWrapper_legs
        ...AccordionBody_legs
      }
    }
  `,
);