@autobusal/common 0.0.14 → 0.0.16

package/BackTo.tsx

@@ -0,0 +1,35 @@
+import { TFunction } from 'i18next';
+import { Link } from 'react-router-dom';
+import styled from 'styled-components';
+import { BiChevronLeftCircle } from 'react-icons/bi';
+
+interface Props {
+  to: string
+  t: TFunction<'general'>
+}
+
+const LinkStyled = styled(Link)`
+  display: inline-flex;
+  gap: 5px;
+  align-items: center;
+  padding: 4px 12px;
+  font-size: calc(${ props => props.theme.size.info } - 1px);
+  text-transform: uppercase;
+  background: ${ props => props.theme.neutral };
+  border-radius: ${ props => props.theme.borderRadius };
+  transition: all 0.3s ease;
+
+  &:hover {
+    text-decoration: none;
+    background: ${ props => props.theme.primaryTransparent };
+  }
+`;
+
+const BackTo = ({ to, t }: Props): JSX.Element => (
+  <LinkStyled to={ to }>
+    <BiChevronLeftCircle />
+    { t('general:back') }
+  </LinkStyled>
+);
+
+export default BackTo;

package/Policy/Policy.tsx

@@ -0,0 +1,27 @@
+import { TFunction } from 'i18next';
+import Modal from '../Modal/Modal';
+import { GetPolicy } from './services';
+
+interface Props {
+  id: number
+  t: TFunction<'common'>
+  onClose: () => void
+}
+
+const Policy = ({ id, t, onClose }: Props): JSX.Element => {
+  const { data, isFetching } = GetPolicy(id);
+
+  return (
+    <Modal
+      loading={ isFetching }
+      width={ 750 }
+      title={ t('policy.title') }
+      content={
+        <div dangerouslySetInnerHTML={{ __html: data?.policies ?? '' }} />
+      }
+      onClose={ onClose }
+    />
+  );
+};
+
+export default Policy;

package/Policy/services.ts

@@ -0,0 +1,21 @@
+import { useQuery, UseQueryResult } from '@tanstack/react-query';
+import { apiClient } from '@autobusal/providers';
+import { PolicyData } from '@autobusal/providers/types/routes';
+
+export const GetPolicy = (id: number): UseQueryResult<PolicyData> => (
+  useQuery({
+    queryKey: ['route-policy', { id }],
+    queryFn: async () => (
+      await apiClient
+        .get('/api/routes/policy', {
+          params: {
+            id
+          }
+        })
+        .then(response => (
+          response.data
+        ))
+        .catch(() => {})
+    )
+  })
+);

package/RouteFeature/RouteFeature.tsx

@@ -0,0 +1,15 @@
+import { Container, Image, Name } from './styles';
+import { FeatureData } from '@autobusal/providers/types/routes';
+
+interface Props {
+  item: FeatureData
+}
+
+const RouteFeature = ({ item }: Props): JSX.Element => (
+  <Container>
+    <Image src={ item.image_url } title={ item.name } />
+    <Name>{ item.name }</Name>
+  </Container>
+);
+
+export default RouteFeature;

package/RouteFeature/styles.ts

@@ -0,0 +1,19 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding: 3px 6px;
+  border: 1px solid ${ props => props.theme.primary.normal };
+  border-radius: 100px;
+`;
+
+export const Image = styled.img`
+  display: block;
+  width: 15px;
+`;
+
+export const Name = styled.span`
+  font-size: ${ props => props.theme.size.xs };
+`;

package/RouteItem/More/Douane.tsx

@@ -0,0 +1,30 @@
+import { TFunction } from 'i18next';
+import { HiOutlineMinusCircle } from 'react-icons/hi';
+import { Information, Title } from './styles';
+import { LocationData } from '@autobusal/providers/types/locations';
+
+interface Props {
+  countries: LocationData[]
+  t: TFunction<'public'>
+}
+
+const Douane = ({ countries, t }: Props): JSX.Element => {
+  const items = countries.filter(item => {
+    return item.city.douane == 1;
+  }).map(item => (
+    item.city.name
+  ));
+
+  return (
+    <Information>
+      <Title>
+        <HiOutlineMinusCircle />
+        { t('route_item.douane') }:
+      </Title>
+
+      { items.join(', ') }
+    </Information>
+  );
+};
+
+export default Douane;

package/RouteItem/More/Features.tsx

@@ -0,0 +1,21 @@
+import RouteFeature from '../../RouteFeature/RouteFeature';
+import { ContainerFeatures } from './styles';
+import { FeatureData } from '@autobusal/providers/types/routes';
+
+interface Props {
+  items: FeatureData[]
+}
+
+const Features = ({ items }: Props): JSX.Element => {
+  const images = items.map(item => (
+    <RouteFeature key={ item.id } item={ item } />
+  ));
+
+  return (
+    <ContainerFeatures>
+      { images }
+    </ContainerFeatures>
+  );
+};
+
+export default Features;

package/RouteItem/More/More.tsx

@@ -0,0 +1,33 @@
+import { TFunction } from 'i18next';
+import ReadPolicy from './ReadPolicy';
+import Schedule from './Schedule';
+import Transiting from './Transiting';
+import Douane from './Douane';
+import Features from './Features';
+import { Container, Details, Policy } from './styles';
+import { RouteData } from '@autobusal/providers/types/routes';
+
+interface Props {
+  route: RouteData
+  t: TFunction<'public'>
+}
+
+const More = ({ route, t }: Props): JSX.Element => (
+  <Container>
+    <Details>
+      <Schedule available={ route.available } t={ t } />
+
+      { route.transiting.length > 0 && <Transiting countries={ route.transiting } t={ t } /> }
+
+      { route.locations.length > 0 && <Douane countries={ route.locations } t={ t } /> }
+
+      { route.trip.features_data.length > 0 && <Features items={ route.trip.features_data } /> }
+    </Details>
+
+    <Policy>
+      <ReadPolicy id={ route.id } t={ t } />
+    </Policy>
+  </Container>
+);
+
+export default More;

package/RouteItem/More/ReadPolicy.tsx

@@ -0,0 +1,27 @@
+import { useState } from 'react';
+import { TFunction } from 'i18next';
+import { IoDocumentText } from 'react-icons/io5';
+import Policy from '../../Policy/Policy';
+import { ButtonPolicy } from './styles';
+
+interface Props {
+  id: number
+  t: TFunction<'public'>
+}
+
+const ReadPolicy = ({ id, t }: Props): JSX.Element => {
+  const [ view, setView ] = useState<boolean>(false);
+
+  return (
+    <>
+      <ButtonPolicy type="button" onClick={ () => setView(!view) }>
+        <IoDocumentText />
+        { t('route_item.policy') }
+      </ButtonPolicy>
+
+      { view && <Policy id={ id } t={ t } onClose={ () => setView(false) } /> }
+    </>
+  );
+};
+
+export default ReadPolicy;

package/RouteItem/More/Schedule.tsx

@@ -0,0 +1,22 @@
+import { TFunction } from 'i18next';
+import { HiOutlineCalendar } from 'react-icons/hi';
+import { Information, Title } from './styles';
+import { AvailableData } from '@autobusal/providers/types/routes';
+
+interface Props {
+  available: AvailableData
+  t: TFunction<'public'>
+}
+
+const Schedule = ({ available, t }: Props): JSX.Element => (
+  <Information>
+    <Title>
+      <HiOutlineCalendar />
+      { t('route_item.operating') }:
+    </Title>
+
+    { available.schedule_display }
+  </Information>
+);
+
+export default Schedule;

package/RouteItem/More/Transiting.tsx

@@ -0,0 +1,28 @@
+import { TFunction } from 'i18next';
+import { RiMapPin2Line } from 'react-icons/ri';
+import { Information, Title } from './styles';
+import { TransitingData } from '@autobusal/providers/types/routes';
+
+interface Props {
+  countries: TransitingData[]
+  t: TFunction<'public'>
+}
+
+const Transiting = ({ countries, t }: Props): JSX.Element => {
+  const items = countries.map(item => (
+    item.country.name
+  ));
+
+  return (
+    <Information>
+      <Title>
+        <RiMapPin2Line />
+        { t('route_item.transiting') }:
+      </Title>
+
+      { items.join(', ') }
+    </Information>
+  );
+};
+
+export default Transiting;

package/RouteItem/More/styles.ts

@@ -0,0 +1,78 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  display: flex;
+  gap: 5px;
+  flex-direction: column;
+  margin-top: 10px;
+  padding: 10px;
+  background: ${ props => props.theme.background.neutral };
+  border-radius: ${ props => props.theme.borderRadius };
+
+  @media (min-width: 480px) {
+    margin-left: 75px;
+  }
+
+  @media (min-width: 640px) {
+    flex-direction: row;
+    margin-left: 115px;
+  }
+`;
+
+export const Details = styled.div`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+`;
+
+export const Policy = styled.div`
+  flex: 1;
+  display: flex;
+
+  @media (min-width: 640px) {
+    flex: initial;
+    flex-basis: 200px;
+    justify-content: right;
+    align-items: flex-start;
+  }
+`;
+
+export const Information = styled.div`
+  display: flex;
+  flex-direction: column;
+  font-size: ${ props => props.theme.size.s };
+
+  @media (min-width: 768px) {
+    flex-direction: row;
+    align-items: center;
+  }
+`;
+
+export const Title = styled.h6`
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  margin: 0 5px 0 0;
+  font-size: ${ props => props.theme.size.s };
+`;
+
+export const ButtonPolicy = styled.button`
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  color: ${ props => props.theme.font.info };
+  font-weight: 700;
+  font-size: ${ props => props.theme.size.xs };
+
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+
+export const ContainerFeatures = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 5px;
+`;

package/RouteItem/RouteItem.tsx

@@ -0,0 +1,74 @@
+import { useState } from 'react';
+import { TFunction } from 'i18next';
+import { HiOutlineInformationCircle, HiOutlineClock, HiArrowCircleRight } from 'react-icons/hi';
+import More from './More/More';
+import { Container, About, Image, Logo, Information, Name, Code, ButtonMore, Locations, Location, City, Date, Arrow, Order, LinkOrder } from './styles';
+import { RouteData } from '@autobusal/providers/types/routes';
+
+interface Props {
+  type: 'browse' | 'view'
+  route: RouteData
+  t: TFunction<'common'>
+}
+
+const RouteItem = ({ type, route, t }: Props): JSX.Element => {
+  const [ show, setShow ] = useState<boolean>(false);
+
+  const lastLocation = route.locations.length - 1;
+
+  return (
+    <Container className="box">
+      <About>
+        <Image>
+          <Logo to={ route.operator.link }>
+            <img src={ route.operator.logo_url } />
+          </Logo>
+        </Image>
+
+        <Information>
+          <Name to={ route.link }>{ route.name }</Name>
+
+          <Code>{ route.code }</Code>
+
+          <ButtonMore type="button" onClick={ () => setShow(!show) }>
+            <HiOutlineInformationCircle />
+            { t('route_item.info') }
+          </ButtonMore>
+        </Information>
+
+        <Locations>
+          <Location>
+            <City>{ route.locations[0].city.name }</City>
+
+            <Date>
+              { t('route_item.departure') }: 
+              <HiOutlineClock /> { route.locations[0].departure }
+            </Date>
+          </Location>
+
+          <Arrow>
+            <HiArrowCircleRight />
+          </Arrow>
+
+          <Location>
+            <City>{ route.locations[lastLocation].city.name }</City>
+
+            <Date>
+              { t('route_item.arrival') }: 
+              <HiOutlineClock /> { route.locations[lastLocation].arrival }
+            </Date>
+          </Location>
+        </Locations>
+
+        <Order>
+          { type === 'browse' && <LinkOrder to={ route.link } $type="normal">{ t('route_item.details') }</LinkOrder> }
+          <LinkOrder to={ route.link_purchase } $type={ type === 'browse' ? 'small' : 'normal' }>{ t('route_item.buy') }</LinkOrder>
+        </Order>
+      </About>
+
+      { show && <More route={ route } t={ t } /> }
+    </Container>
+  );
+};
+
+export default RouteItem;

package/RouteItem/styles.ts

@@ -0,0 +1,176 @@
+import styled, { css } from 'styled-components';
+import { Link } from 'react-router-dom';
+// import { Box } from '@layouts/styles';
+
+export const Container = styled.div`
+  padding: 10px;
+  border-left: 4px solid ${ props => props.theme.primary.normal };
+  border-right: 4px solid ${ props => props.theme.primary.normal };
+`;
+
+export const About = styled.div`
+  display: flex;
+  gap: 15px;
+  flex-wrap: wrap;
+`;
+
+export const Image = styled.div`
+  flex-basis: 60px;
+
+  @media (min-width: 640px) {
+    flex-basis: 100px;
+  }
+`;
+
+export const Logo = styled(Link)`
+  display: block;
+  width: 100%;
+  overflow: hidden;
+  aspect-ratio: 1.35;
+  border-radius: ${ props => props.theme.borderRadius };
+
+  & > img {
+    display: block;
+    width: 100%;
+  }
+`;
+
+export const Information = styled.div`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+
+  @media (min-width: 640px) {
+    gap: 6px;
+  }
+`;
+
+export const Name = styled(Link)`
+  font-weight: 700;
+`;
+
+export const Code = styled.div`
+  color: ${ props => props.theme.font.faded };
+  font-size: ${ props => props.theme.size.xs };
+`;
+
+export const ButtonMore = styled.button`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  color: ${ props => props.theme.font.info };
+  font-size: ${ props => props.theme.size.xs };
+`;
+
+export const Locations = styled.div`
+  display: flex;
+  flex-basis: 100%;
+  flex-direction: column;
+  gap: 20px;
+  padding-left: 75px;
+
+  @media (min-width: 480px) {
+    flex-direction: row;
+  }
+
+  @media (min-width: 640px) {
+    padding-left: 115px;
+  }
+
+  @media (min-width: 768px) {
+    flex: 1;
+    flex-basis: initial;
+  }
+
+  @media (min-width: 1024px) {
+    flex: 1.5;
+  }
+`;
+
+export const Location = styled.div`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+
+  @media (min-width: 480px) {
+    align-self: center;
+  }
+`;
+
+export const City = styled.h5`
+  margin: 0;
+  font-weight: 700;
+`;
+
+export const Date = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  color: ${ props => props.theme.font.faded };
+  font-size: ${ props => props.theme.size.s };
+`;
+
+export const Arrow = styled.div`
+  position: relative;
+  border-bottom: 3px solid ${ props => props.theme.primary.neutral };
+
+  & > svg {
+    position: absolute;
+    top: calc(50% - 14px);
+    left: calc(50% - 14px);
+    width: 30px;
+    height: 30px;
+    color: ${ props => props.theme.font.info };
+    background-color: ${ props => props.theme.foreground.normal };
+    border: 4px solid ${ props => props.theme.foreground.normal };
+  }
+
+  @media (min-width: 480px) {
+    border-right: 3px solid ${ props => props.theme.primary.neutral };
+    border-bottom: 0;
+
+    & > svg {
+      left: -14px;
+    }
+  }
+`;
+
+export const Order = styled.div`
+  flex: 1;
+  flex-basis: 100%;
+  display: flex;
+  gap: 8px;
+  justify-content: center;
+
+  @media (min-width: 1024px) {
+    flex-basis: 120px;
+    flex: initial;
+    flex-direction: column;
+  }
+`;
+
+export const LinkOrder = styled(Link)<{ $type: 'normal' | 'small' }>`
+  display: flex;
+  min-width: 100px;
+  height: 30px;
+  justify-content: center;
+  align-items: center;
+  font-weight: 700;
+  border-radius: 100px;
+  transition: all 0.3s ease;
+
+  ${ props => props.$type === 'normal' && css`
+    background-color: ${ props => props.theme.primary.normal };
+  ` }
+
+  ${ props => props.$type === 'small' && css`
+    background-color: ${ props => props.theme.primary.neutral };
+  ` }
+
+  &:hover {
+    text-decoration: none;
+    opacity: .7;
+  }
+`;

package/index.ts

@@ -1,16 +1,20 @@
+import BackTo from './BackTo';
 import CookieNotification from './CookieNotification/CookieNotification';
 import ChangeLanguage from './ChangeLanguage/ChangeLanguage';
 import { Button } from './Button/Button';
 import { General, Paragraph } from './Loading/Loading';
 import Modal from './Modal/Modal';
 import Meta from './Meta';
+import RouteItem from './RouteItem/RouteItem';
 
 export {
+  BackTo,
   Button,
   CookieNotification,
   ChangeLanguage,
   General,
   Meta,
   Modal,
-  Paragraph
+  Paragraph,
+  RouteItem
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@autobusal/common",
-  "version": "0.0.14",
+  "version": "0.0.16",
   "type": "module",
   "main": "index.ts",
   "dependencies": {
@@ -11,6 +11,7 @@
     "react-helmet": "^6.1.0",
     "react-icons": "^5.0.1",
     "react-loading-skeleton": "^3.3.1",
+    "react-router-dom": "^6.21.3",
     "spinners-react": "^1.0.7",
     "styled-components": "^6.1.8"
   }