@autobusal/routes-order 1.0.0

package/Found/Route/styles.ts

@@ -0,0 +1,187 @@
+import styled from 'styled-components';
+import { Link } from 'react-router-dom';
+
+export const Container = styled.div`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+  padding: 15px;
+`;
+
+export const SpecialOffer = styled.div`
+  position: absolute;
+  top: 13px;
+  left: -15px;
+  z-index: 1;
+  width: 100px;
+  height: 60px;
+  color: #FFF;
+  line-height: 59px;
+  font-weight: 700;
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: 2px;
+  background-image: url(${ import.meta.env.VITE_API_OBT }/storage/routes/offer.png);
+`;
+
+export const Trip = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+
+  @media (min-width: 640px) {
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+
+  @media (min-width: 1024px) {
+    flex-wrap: nowrap;
+  }
+`;
+
+export const Company = styled.div`
+  flex-basis: 100%;
+
+  @media (min-width: 1024px) {
+    flex-basis: 185px;
+  }
+`;
+
+export const Location = styled.div`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 5px;
+  text-align: center;
+
+  & > h2 {
+    margin-bottom: 0;
+  }
+
+  & > span {
+    font-weight: 700;
+    color: ${ props => props.theme.font.faded };
+  }
+`;
+
+export const Time = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: center;
+  font-weight: 700;
+
+  & > svg {
+    font-size: calc(1.5 * ${ props => props.theme.size.xxl });
+  }
+
+  & > span {
+    display: block;
+    padding: 3px 10px;
+    font-size: ${ props => props.theme.size.l };
+    background: ${ props => props.theme.background.neutral };
+    border-radius: 100px;
+  }
+
+  @media (min-width: 640px) {
+    flex-basis: 120px;
+  }
+`;
+
+export const Price = styled.div`
+  flex-basis: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  align-items: center;
+
+  & > strong {
+    font-size: ${ props => props.theme.size.xxl };
+  }
+
+  @media (min-width: 768px) {
+    flex-basis: 165px;
+  }
+`;
+
+export const LinkCompany = styled(Link)`
+  display: block;
+  max-width: 165px;
+  margin: 0 auto;
+
+  & > img {
+    display: block;
+    width: 100%;
+    border-radius: 8px;
+  }
+`;
+
+export const Details = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+
+  @media (min-width: 640px) {
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+`;
+
+export const Detail = styled.div`
+  padding: 8px 10px;
+  font-size: ${ props => props.theme.size.s };
+  background: ${ props => props.theme.background.neutral };
+  border-radius: ${ props => props.theme.borderRadius };
+
+  @media (min-width: 480px) {
+    flex-basis: calc(50% - 7.5px);
+  }
+  @media (min-width: 768px) {
+    flex-basis: initial;
+    flex: 1;
+  }
+`;
+
+export const TitleDetail = styled.h6`
+  margin-bottom: 5px;
+  color: ${ props => props.theme.font.faded };
+  text-transform: uppercase;
+  font-size: ${ props => props.theme.size.xs };
+`;
+
+export const LinkRoute = styled(Link)`
+  font-weight: 700;
+`;
+
+export const ButtonPolicy = styled.button`
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  font-weight: 700;
+  font-size: ${ props => props.theme.size.s };
+  transition: all 0.3s ease;
+
+  &:hover {
+    opacity: .8;
+  }
+`;
+
+export const Features = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+export const TitleFeatures = styled.h6`
+  font-size: ${ props => props.theme.size.s };
+  margin-bottom: 8px;
+`;
+
+export const FeaturesItems = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  justify-content: center;
+`;

package/RoutesOrder.tsx

@@ -0,0 +1,130 @@
+import { useState } from 'react';
+import { TFunction } from 'i18next';
+import { Meta } from '@autobusal/common';
+import Step1 from './Step1/Step1';
+import Step2 from './Step2';
+import Step3 from './Step3';
+import Step4 from './Step4/Step4';
+import Step5 from './Step5/Step5';
+import { RoutesSearchForm } from '@autobusal/routes-search/types';
+import { FoundData } from '@autobusal/providers/types/routes';
+import { PersonData } from '@autobusal/providers/types/persons';
+
+interface Props {
+  t: TFunction<'common'>
+}
+
+const RoutesOrder = ({ t }: Props): JSX.Element => {
+  const [ redirected, setRedirected ] = useState<boolean>(false);
+  const [ current, setCurrent ] = useState<number>(1);
+  const [ step1, setStep1 ] = useState<RoutesSearchForm | undefined>(undefined);
+  const [ step2, setStep2 ] = useState<FoundData | undefined>(undefined);
+  const [ step3, setStep3 ] = useState<FoundData | undefined>(undefined);
+  const [ step4, setStep4 ] = useState<PersonData | undefined>(undefined);
+
+  const onSearchDate = (type: ('departure' | '_return'), day: string): void => {
+    if (step1 !== undefined) {
+      setStep1({
+        ...step1,
+        [type]: day
+      });
+    }
+  };
+
+  const onStep1 = (data: RoutesSearchForm): void => {
+    setStep1(data);
+    setCurrent(2);
+
+    // we mark it as redirected
+    setRedirected(true);
+  };
+
+  const onStep2 = (data: FoundData): void => {
+    setStep2(data);
+
+    if (step1?.type === 'return') {
+      setCurrent(3);
+    } else {
+      setCurrent(4);
+    }
+  };
+
+  const onStep3 = (data: FoundData): void => {
+    setStep3(data);
+    setCurrent(4);
+  };
+
+  const onStep4 = (data: PersonData): void => {
+    setStep4(data);
+    setCurrent(5);
+  };
+
+  const onBack = (step: number): void => {
+    setCurrent(step);
+  };
+
+  const showStep1 = current === 1;
+  const showStep2 = current === 2 && step1 !== undefined;
+  const showStep3 = current === 3 && step1 !== undefined && step2 !== undefined;
+  const showStep4 = current === 4 && step1 !== undefined && step2 !== undefined;
+  const showStep5 = current === 5 && step1 !== undefined && step2 !== undefined && step4 !== undefined;
+
+  return (
+    <Meta title={ t('routes_order.title') } description={ t('routes_order.meta.description') }>
+      { showStep1 && (
+        <Step1
+          value={ step1 }
+          redirected={ redirected }
+          t={ t }
+          onSave={ onStep1 }
+        />
+      ) }
+
+      { showStep2 && (
+        <Step2
+          step1={ step1 }
+          t={ t }
+          onSearch={ onSearchDate }
+          onSave={ onStep2 }
+          onBack={ onBack }
+        />
+      ) }
+
+      { showStep3 && (
+        <Step3
+          step1={ step1 }
+          step2={ step2 }
+          t={ t }
+          onSearch={ onSearchDate }
+          onSave={ onStep3 }
+          onBack={ onBack }
+        />
+      ) }
+
+      { showStep4 && (
+        <Step4
+          values={ step4 }
+          step1={ step1 }
+          step2={ step2 }
+          step3={ step3 }
+          t={ t }
+          onSave={ onStep4 }
+          onBack={ onBack }
+        />
+      ) }
+
+      { showStep5 && (
+        <Step5
+          step1={ step1 }
+          step2={ step2 }
+          step3={ step3 }
+          step4={ step4 }
+          t={ t }
+          onBack={ onBack }
+        />
+      ) }
+    </Meta>
+  );
+};
+
+export default RoutesOrder;

package/Step1/Step1.tsx

@@ -0,0 +1,63 @@
+import { useEffect } from 'react';
+import { useParams, useSearchParams } from 'react-router-dom';
+import { TFunction } from 'i18next';
+import { FaRoute } from 'react-icons/fa';
+import RoutesSearch from '@autobusal/routes-search';
+import prepare from './prepare';
+import Steps from '../Steps/Steps';
+import { Title } from '../styles';
+import { RoutesSearchForm } from '@autobusal/routes-search/types';
+import { GetSettings } from '@autobusal/providers/services';
+
+interface Props {
+  value?: RoutesSearchForm
+  redirected: boolean
+  t: TFunction<'common'>
+  onSave: (data: RoutesSearchForm) => void
+}
+
+const Step1 = ({ value, redirected, t, onSave }: Props): JSX.Element => {
+  const params = useParams();
+
+  const [ searchParams ] = useSearchParams();
+
+  const { data } = GetSettings();
+
+  const prepared = prepare(value, params, data.preferences.defaultLocations);
+
+  const isSubmitted = searchParams.get('type') === 'submit';
+
+  useEffect(() => {
+    if (isSubmitted && !redirected) {
+      onSave(prepared);
+    }
+  }, [isSubmitted, redirected, prepared, onSave]);
+
+  return (
+    <>
+      <Title>
+        <FaRoute />
+        { t('routes_order.step1.title') }
+      </Title>
+
+      <Steps value={ 1 } />
+
+      <div className="box">
+        <RoutesSearch
+          type={ prepared.type ?? 'departure' }
+          from={ prepared.from }
+          to={ prepared.to }
+          departure={ prepared.departure }
+          _return={ prepared._return ?? '' }
+          adultsNo={ prepared.adults }
+          childrenNo={ prepared.children }
+          babiesNo={ prepared.babies }
+          t={ t }
+          onSearch={ onSave }
+        />
+      </div>
+    </>
+  );
+};
+
+export default Step1;

package/Step1/prepare.ts

@@ -0,0 +1,38 @@
+import { Params } from 'react-router-dom';
+import { futureDate } from '@autobusal/utilities';
+import { RoutesSearchForm } from '@autobusal/routes-search/types';
+
+const prepare = (
+  value: (RoutesSearchForm | undefined),
+  params: Readonly<Params<string>>,
+  defaultLocations: { from: string, to: string }
+): RoutesSearchForm => {
+  if (value !== undefined) {
+    return value;
+  }
+
+  const type = params.type === 'return' ? 'return' : 'departure';
+
+  const from = params.from ?? defaultLocations.from;
+  const to = params.to ?? defaultLocations.to;
+
+  const departure = params.departure?.replace(/-/g, '/') ?? futureDate(1);
+  const _return = params._return?.replace(/-/g, '/') ?? futureDate(2);
+
+  const adults = params.adults ?? 1;
+  const children = params.children ?? 0;
+  const babies = params.babies ?? 0;
+
+  return {
+    type,
+    from,
+    to,
+    departure,
+    _return,
+    adults: Number(adults),
+    children: Number(children),
+    babies: Number(babies)
+  };
+};
+
+export default prepare;

package/Step2.tsx

@@ -0,0 +1,55 @@
+import { TFunction } from 'i18next';
+import { RiBus2Line } from 'react-icons/ri';
+import { AiOutlineCaretLeft } from 'react-icons/ai';
+import { Button } from '@autobusal/common';
+import Steps from './Steps/Steps';
+import Found from './Found/Found';
+import { Title, Actions } from './styles';
+import { RoutesSearchForm } from '@autobusal/routes-search/types';
+import { FoundData } from '@autobusal/providers/types/routes';
+import { GetDepartures } from './services';
+
+interface Props {
+  step1: RoutesSearchForm
+  t: TFunction<'common'>
+  onSearch: (data: ('departure' | '_return'), day: string) => void
+  onSave: (data: FoundData) => void
+  onBack: (step: number) => void
+}
+
+const Step2 = ({ step1, t, onSearch, onSave, onBack }: Props): JSX.Element => {
+  const { data, isFetching } = GetDepartures(step1);
+
+  return (
+    <>
+      <Title>
+        <RiBus2Line />
+        { t('routes_order.step2.title') }
+      </Title>
+
+      <Steps value={ 2 } />
+
+      <Found
+        type="departure"
+        loading={ isFetching }
+        data={ data }
+        step1={ step1 }
+        t={ t }
+        onSearch={ onSearch }
+        onSave={ onSave }
+      />
+
+      <Actions>
+        <Button
+          type="button"
+          subtype="secondary"
+          text={ <><AiOutlineCaretLeft />{ t('routes_order.step2.back') }</> }
+          noMargin
+          onClick={ () => onBack(1) }
+        />
+      </Actions>
+    </>
+  );
+};
+
+export default Step2;

package/Step3.tsx

@@ -0,0 +1,56 @@
+import { TFunction } from 'i18next';
+import { RiBus2Line } from 'react-icons/ri';
+import { AiOutlineCaretLeft } from 'react-icons/ai';
+import { Button } from '@autobusal/common';
+import Steps from './Steps/Steps';
+import Found from './Found/Found';
+import { Title, Actions } from './styles';
+import { RoutesSearchForm } from '@autobusal/routes-search/types';
+import { FoundData } from '@autobusal/providers/types/routes';
+import { GetReturns } from './services';
+
+interface Props {
+  step1: RoutesSearchForm
+  step2: FoundData
+  t: TFunction<'common'>
+  onSearch: (data: ('departure' | '_return'), day: string) => void
+  onSave: (data: FoundData) => void
+  onBack: (step: number) => void
+}
+
+const Step3 = ({ step1, step2, t, onSearch, onSave, onBack }: Props): JSX.Element => {
+  const { data, isFetching } = GetReturns(step1, step2);
+
+  return (
+    <>
+      <Title>
+        <RiBus2Line />
+        { t('routes_order.step3.title') }
+      </Title>
+
+      <Steps value={ 3 } />
+
+      <Found
+        type="_return"
+        loading={ isFetching }
+        data={ data }
+        step1={ step1 }
+        t={ t }
+        onSearch={ onSearch }
+        onSave={ onSave }
+      />
+
+      <Actions>
+        <Button
+          type="button"
+          subtype="secondary"
+          text={ <><AiOutlineCaretLeft />{ t('routes_order.step3.back') }</> }
+          noMargin
+          onClick={ () => onBack(2) }
+        />
+      </Actions>
+    </>
+  );
+};
+
+export default Step3;

package/Step4/Loading.tsx

@@ -0,0 +1,26 @@
+import { TFunction } from 'i18next';
+import { HiUsers } from 'react-icons/hi';
+import { Inline } from '@autobusal/common';
+import Steps from '../Steps/Steps';
+import { Title } from '../styles';
+
+interface Props {
+  t: TFunction<'public'>
+}
+
+const Loading = ({ t }: Props): JSX.Element => (
+  <>
+    <Title>
+      <HiUsers />
+      { t('routes_order.step4.title') }
+    </Title>
+
+    <Steps value={4} />
+
+    <div className="box">
+      <Inline text={ t('seats.loading') } />
+    </div>
+  </>
+);
+
+export default Loading;