@autobusal/routes-order 1.0.0

package/Found/Booking/Booking.tsx

@@ -0,0 +1,61 @@
+import { TFunction } from 'i18next';
+import { createDate } from '@autobusal/utilities';
+import { Container, About, LinkBooking } from './styles';
+import { RoutesSearchForm } from '@autobusal/routes-search/types';
+import { FoundData } from '@autobusal/providers/types/routes';
+import { GetSettings } from '@autobusal/providers/services';
+
+interface Props {
+  data?: FoundData[]
+  step1: RoutesSearchForm
+  t: TFunction<'public'>
+}
+
+const Booking = ({ data, step1, t }: Props): (JSX.Element | null) => {
+  const { data: settings } = GetSettings();
+
+  if (data === undefined || data?.length === 0) {
+    return null;
+  }
+
+  const destination = data[0].locations.to;
+
+  // stop if no booking city
+  if (destination.city.booking_id === undefined) {
+    return null;
+  }
+
+  // stop if no booking id
+  if (settings.preferences.bookingID === undefined) {
+    return null;
+  }
+
+  const from = createDate(step1.departure);
+  const to = getReturnDate(step1._return, from);
+
+  const location = `https://www.booking.com/searchresults.xu.html?city=${ destination.city.booking_id }&aid=&checkin_monthday=${ from.getDate() }&checkin_month=${ from.getMonth() + 1 }&checkin_year=${ from.getFullYear() }&checkout_monthday=${ to.getDate() }&checkout_month=${ to.getMonth() + 1 }&checkout_year=${ to.getFullYear() }&no_rooms=1&group_adults=2&room1=A%2CA`;
+
+  return (
+    <Container>
+      <About>
+        { t('routes_order.step2.booking.title', { location: destination.city.name }) }
+        <img src="https://s-ec.bstatic.com/static/img/b26logo/booking_logo_retina/22615963add19ac6b6d715a97c8d477e8b95b7ea.png" />
+      </About>
+
+      <LinkBooking to={ location } target="_blank">{ t('routes_order.step2.booking.search') }</LinkBooking>
+    </Container>
+  );
+};
+
+const getReturnDate = (_return: (string | undefined), from: Date): Date => {
+  if (_return !== undefined) {
+    return createDate(_return);
+  }
+
+  const to = new Date(from);
+  to.setDate(to.getDate() + 2);
+
+  return to;
+};
+
+export default Booking;

package/Found/Booking/styles.ts

@@ -0,0 +1,50 @@
+import { Link } from 'react-router-dom';
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+  margin-bottom: 15px;
+  padding: 15px;
+  background: #003580;
+  border-radius: ${ props => props.theme.borderRadius };
+
+  @media (min-width: 480px) {
+    flex-direction: row;
+    align-items: center;
+  }
+`;
+
+export const About = styled.div`
+  color: #FFFFFF;
+  font-weight: 700;
+
+  > img {
+    display: block;
+    width: 110px;
+    margin-top: 6px;
+  }
+`;
+
+export const LinkBooking = styled(Link)`
+  display: inline-block;
+  max-width: 150px;
+  padding: 6px 0;
+  text-align: center;
+  font-weight: 700;
+  color: #333333;
+  background: #FFFFFF;
+  border-radius: 100px;
+  transition: all 0.3s ease;
+
+  &:hover {
+    text-decoration: none;
+    box-shadow: 0 4px 24px 0 rgba(255, 255, 255, 0.5);
+  }
+
+  @media (min-width: 480px) {
+    flex-basis: 150px;
+    margin-left: auto;
+  }
+`;

package/Found/Dates/Dates.tsx

@@ -0,0 +1,82 @@
+import { useState } from 'react';
+import { TFunction } from 'i18next';
+import { AiOutlineCaretLeft, AiOutlineCaretRight } from 'react-icons/ai';
+import { Button } from '@autobusal/common';
+import { createDate, getFormattedShort } from '@autobusal/utilities';
+import Loading from './Loading';
+import { Container, Inner, ButtonDay } from './styles';
+import { RoutesSearchForm } from '@autobusal/routes-search/types';
+import { FoundDay } from '../../types';
+import { GetDates } from '../../services';
+
+interface Props {
+  type: 'departure' | '_return'
+  step1: RoutesSearchForm
+  t: TFunction<'common'>
+  onSearch: (type: ('departure' | '_return'), day: string) => void
+}
+
+const Dates = ({ type, step1, t, onSearch }: Props): JSX.Element => {
+  const [number, setNumber] = useState<number>(0);
+
+  const { data, isLoading } = GetDates(step1, type, number);
+
+  if (isLoading) {
+    return <Loading t={ t } />;
+  }
+
+  const onClick = (item: FoundDay, available: boolean): void => {
+    if (available) {
+      onSearch(type, item.day);
+
+      setNumber(0);
+    }
+  };
+
+  const onPrevious = (): void => {
+    setNumber(number - 1);
+  };
+
+  const onNext = (): void => {
+    setNumber(number + 1);
+  };
+
+  const today = new Date();
+
+  const items = data?.map(item => {
+    const date = createDate(item.day);
+
+    // if date in the future, and we have routes available
+    const isAvailable = today.getTime() <= date.getTime() && item.routes;
+
+    return (
+      <ButtonDay key={ item.id } $available={ isAvailable } $selected={ step1[type] === item.day } onClick={ () => onClick(item, isAvailable) }>{ getFormattedShort(date, t) }</ButtonDay>
+    );
+  })
+
+  return (
+    <Container>
+      <Inner>
+        <Button
+          type="button"
+          size="small"
+          noMargin
+          text={ <AiOutlineCaretLeft /> }
+          onClick={ onPrevious }
+        />
+
+        { items }
+
+        <Button
+          type="button"
+          size="small"
+          noMargin
+          text={ <AiOutlineCaretRight /> }
+          onClick={ onNext }
+        />
+      </Inner>
+    </Container>
+  );
+};
+
+export default Dates;

package/Found/Dates/Loading.tsx

@@ -0,0 +1,14 @@
+import { TFunction } from 'i18next';
+import { Container, ContainerLoading } from './styles';
+
+interface Props {
+  t: TFunction<'common'>
+}
+
+const Loading = ({ t }: Props): JSX.Element => (
+  <Container>
+    <ContainerLoading>{ t('routes_order.step2.loading.dates') }</ContainerLoading>
+  </Container>
+);
+
+export default Loading;

package/Found/Dates/styles.ts

@@ -0,0 +1,50 @@
+import styled, { css } from 'styled-components';
+
+export const Container = styled.div`
+  overflow-x: auto;
+  margin-bottom: 15px;
+  padding: 10px 15px;
+  background-color: ${ props => props.theme.background.neutral };
+  border-radius: ${ props => props.theme.borderRadius };
+`;
+
+export const Inner = styled.div`
+  min-width: 900px;
+  display: flex;
+  gap: 5px;
+  justify-content: center;
+  align-items: center;
+`;
+
+export const ButtonDay = styled.button<{ $available: boolean, $selected: boolean }>`
+  flex: 1;
+  height: 26px;
+  line-height: 26px;
+  font-weight: 700;
+  text-align: center;
+  font-size: ${ props => props.theme.size.s };
+  border-radius: 100px;
+  transition: all 0.3s ease;
+
+  ${ props => !props.$available && css`
+    opacity: .6;
+  ` }
+
+  &:hover {
+    color: ${ props => props.theme.primary.contrast };
+    background: ${ props => props.theme.primary.normal };
+  }
+
+  ${ props => props.$selected && css`
+    color: ${ props => props.theme.primary.contrast };
+    background: ${ props => props.theme.primary.normal } !important;
+  ` }
+`;
+
+export const ContainerLoading = styled.div`
+  height: 26px;
+  text-align: center;
+  font-weight: 700;
+  line-height: 26px;
+  font-size: ${ props => props.theme.size.s };
+`;

package/Found/Found.tsx

@@ -0,0 +1,31 @@
+import { TFunction } from 'i18next';
+import Dates from './Dates/Dates';
+import Booking from './Booking/Booking';
+import Header from './Header/Header';
+import Orders from './Orders/Orders';
+import { RoutesSearchForm } from '@autobusal/routes-search/types';
+import { FoundData } from '@autobusal/providers/types/routes';
+
+interface Props {
+  type: 'departure' | '_return'
+  loading: boolean
+  data?: FoundData[]
+  step1: RoutesSearchForm
+  t: TFunction<'common'>
+  onSearch: (type: ('departure' | '_return'), day: string) => void
+  onSave: (data: FoundData) => void
+}
+
+const Found = ({ type, loading, data, step1, t, onSearch, onSave }: Props): JSX.Element => (
+  <>
+    <Dates type={ type } step1={ step1 } t={ t } onSearch={ onSearch } />
+
+    { (data !== undefined && data.length > 0) && <Booking data={ data } step1={ step1 } t={ t } /> }
+
+    <Header t={ t } />
+
+    <Orders loading={ loading } data={ data } t={ t } onSave={ onSave } />
+  </>
+);
+
+export default Found;

package/Found/Header/Header.tsx

@@ -0,0 +1,21 @@
+import { TFunction } from 'i18next';
+import { RiBus2Line } from 'react-icons/ri';
+import { BiArrowFromLeft, BiHourglass } from 'react-icons/bi';
+import { FaFlagCheckered, FaCoins } from 'react-icons/fa';
+import { Container, Company, Location, Time, Price } from './styles';
+
+interface Props {
+  t: TFunction<'public'>
+}
+
+const Header = ({ t }: Props): JSX.Element => (
+  <Container className="box">
+    <Company><RiBus2Line /> { t('routes_order.step2.header.company') }</Company>
+    <Location><BiArrowFromLeft /> { t('routes_order.step2.header.departs') }</Location>
+    <Time><BiHourglass /> { t('routes_order.step2.header.duration') }</Time>
+    <Location><FaFlagCheckered /> { t('routes_order.step2.header.arrives') }</Location>
+    <Price><FaCoins /> { t('routes_order.step2.header.price') }</Price>
+  </Container>
+);
+
+export default Header;

package/Found/Header/styles.ts

@@ -0,0 +1,40 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  display: none;
+  padding: 8px 4px;
+  margin-bottom: 15px;
+
+  @media (min-width: 1024px) {
+    display: flex;
+  }
+`;
+
+const Item = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  font-weight: 700;
+  align-items: center;
+  font-size: ${ props => props.theme.size.s };
+
+  & > svg {
+    font-size: ${ props => props.theme.size.xxl };
+  }
+`;
+
+export const Company = styled(Item)`
+  flex-basis: 185px;
+`;
+
+export const Location = styled(Item)`
+  flex: 1;
+`;
+
+export const Time = styled(Item)`
+  flex-basis: 120px;
+`;
+
+export const Price = styled(Item)`
+  flex-basis: 165px;
+`;

package/Found/Orders/Orders.tsx

@@ -0,0 +1,40 @@
+import { TFunction } from 'i18next';
+import { Inline } from '@autobusal/common';
+import Route from '../Route/Route';
+import { Container, ContainerNotFound } from './styles';
+import { FoundData } from '@autobusal/providers/types/routes';
+
+interface Props {
+  loading: boolean
+  data?: FoundData[]
+  t: TFunction<'common'>
+  onSave: (data: FoundData) => void
+}
+
+const Orders = ({ loading, data, t, onSave }: Props): JSX.Element => {
+  if (loading) {
+    return (
+      <div className="box">
+        <Inline text={ t('routes_order.step2.loading.routes') } />
+      </div>
+    );
+  }
+
+  if (data?.length == 0) {
+    return (
+      <ContainerNotFound className="box">{ t('routes_order.step2.not_found') }</ContainerNotFound>
+    );
+  }
+
+  const items = data?.map(item => (
+    <Route key={ item.id } data={ item } t={ t } onSave={ onSave } />
+  ));
+
+  return (
+    <Container>
+      { items }
+    </Container>
+  );
+};
+
+export default Orders;

package/Found/Orders/styles.ts

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+`;
+
+export const ContainerNotFound = styled.div`
+  text-align: center;
+  color: ${ props => props.theme.font.faded };
+`;

package/Found/Route/Route.tsx

@@ -0,0 +1,112 @@
+import { useState } from 'react';
+import { TFunction } from 'i18next';
+import { HiOutlineArrowNarrowRight, HiOutlineDocumentText } from 'react-icons/hi';
+import { RiBus2Line } from 'react-icons/ri';
+import { Button, RouteFeature, Policy } from '@autobusal/common';
+import { Container, SpecialOffer, Trip, Company, Location, Time, Price, LinkCompany, Details, Detail, ButtonPolicy, TitleDetail, LinkRoute, Features, TitleFeatures, FeaturesItems } from './styles';
+import { FoundData } from '@autobusal/providers/types/routes';
+
+interface Props {
+  data: FoundData
+  t: TFunction<'common'>
+  onSave: (data: FoundData) => void
+}
+
+const Route = ({ data, t, onSave }: Props): JSX.Element => {
+  const [ policy, setPolicy ] = useState<boolean>(false);
+
+  const customs = Object.values(data.customs).join(', ');
+  const transiting = Object.values(data.transiting).join(', ');
+
+  const features = data.trip.features_data.map((item, index) => (
+    <RouteFeature key={ index } item={ item } />
+  ));
+
+  return (
+    <Container className="box">
+      { data.price.offer === true && <SpecialOffer>{ t('routes_order.step2.route.offer') }</SpecialOffer> }
+
+      <Trip>
+        <Company>
+          <LinkCompany to={ data.operator.link } target="_blank" title={ data.operator.company }><img src={ data.operator.logo_url } /></LinkCompany>
+        </Company>
+
+        <Location>
+          <h2>{ data.locations.from.city.name } ({ data.locations.from.city.country?.iso_code }) { data.locations.from.departure }</h2>
+          <span>{ data.locations.from.stop?.name }</span>
+        </Location>
+
+        <Time>
+          <HiOutlineArrowNarrowRight />
+          <span>{ data.duration }</span>
+        </Time>
+
+        <Location>
+          <h2>{ data.locations.to.city.name } ({ data.locations.to.city.country?.iso_code }) { data.locations.to.arrival }</h2>
+          <span>{ data.locations.to.stop?.name }</span>
+        </Location>
+
+        <Price>
+          <strong>{ data.price.display }</strong>
+
+          <Button
+            type="button"
+            size="medium"
+            noMargin
+            text={
+              <>
+                <RiBus2Line />
+                { t('routes_order.step2.route.select') }
+              </>
+            }
+            onClick={ () => onSave(data) }
+          />
+        </Price>
+      </Trip>
+
+      <Details>
+        <Detail>
+          <TitleDetail>{ t('routes_order.step2.route.name') }</TitleDetail>
+          <LinkRoute to={ data.link } target="_blank">{ data.code }</LinkRoute>
+        </Detail>
+
+        { customs && (
+          <Detail>
+            <TitleDetail>{ t('routes_order.step2.route.customs') }</TitleDetail>
+            { customs }
+          </Detail>
+        ) }
+
+        { transiting !== '' && (
+          <Detail>
+            <TitleDetail>{ t('routes_order.step2.route.transit') }</TitleDetail>
+            { transiting }
+          </Detail>
+        ) }
+
+        <Detail>
+          <TitleDetail>{ t('routes_order.step2.route.policies.title') }</TitleDetail>
+
+          <ButtonPolicy type="button" onClick={ () => setPolicy(true) }>
+            <HiOutlineDocumentText />
+            { t('routes_order.step2.route.policies.view') }
+          </ButtonPolicy>
+        </Detail>
+      </Details>
+
+      { data.trip.features_data.length > 0 && (
+        <Features>
+          <TitleFeatures>{ t('routes_order.step2.route.features') }</TitleFeatures>
+
+          <FeaturesItems>
+            { features }
+          </FeaturesItems>
+        </Features>
+      ) }
+
+      { policy && <Policy id={ data.id } t={ t } onClose={ () => setPolicy(false) } /> }
+    </Container>
+  );
+};
+
+export default Route;