@autobusal/routes-search 0.0.1

package/RoutesSearch.tsx

@@ -0,0 +1,187 @@
+import { useState } from 'react';
+import { TFunction } from 'i18next';
+import { useForm } from 'react-hook-form';
+import { FaArrowUp, FaHistory } from 'react-icons/fa';
+import { AiOutlineSearch } from 'react-icons/ai';
+import { Button } from '@autobusal/common';
+import { display, createDate } from '@autobusal/utilities';
+import { Autocomplete, Calendar, Passengers } from '@autobusal/common';
+import { Options, Columns, Column, Item, Title, Action } from './styles';
+import { RoutesSearchForm } from './types';
+import { AutocompleteData } from '@autobusal/common/Autocomplete/types';
+import { GetSuggestions } from './services';
+
+interface Props {
+  type: 'departure' | 'return'
+  from: string
+  to: string
+  departure: string
+  _return: string
+  adults: number
+  children: number
+  babies: number
+  t: TFunction<'common'>
+  onSearch: (data: RoutesSearchForm) => void
+}
+
+const RoutesSearch = ({ type, from, to, departure, _return, adults, children, babies, t, onSearch }: Props): JSX.Element => {
+  const [ selected, setSelected ] = useState<'departure' | 'return'>(type);
+
+  const { register, handleSubmit, formState: { errors }, setValue } = useForm<RoutesSearchForm>();
+
+  const { data } = GetSuggestions();
+
+  const onClick = (type: ('departure' | 'return')): void => {
+    setSelected(type);
+  };
+
+  const onSubmit = (data: RoutesSearchForm): void => {
+    const departureDate = createDate(data.departure);
+    const _returnDate = createDate(data._return ?? '');
+
+    data.type = selected;
+
+    // arrange the data, as some get transformed to strings
+    data.adults = Number(data.adults);
+    data.babies = Number(data.babies);
+    data.children = Number(data.children);
+
+    if (data.adults == 0) {
+      alert(t('general:search_routes.errors.adults'));
+    } else if (data.adults + data.children > 5) {
+      alert(t('general:search_routes.errors.max_tickets', { max: 5 }));
+    } else if (data.babies > data.adults) {
+      alert(t('general:search_routes.errors.babies'));
+    } else if (selected === 'return' && departureDate > _returnDate) {
+      alert(t('general:search_routes.errors.dates'));
+    } else {
+      onSearch(data);
+    }
+  };
+
+  const cities: AutocompleteData[] = data.map(city => ({
+    name: `${ city.name }, ${ city.country?.name ?? '' }`,
+    value: city.slug
+  }));
+
+  return (
+    <form onSubmit={ handleSubmit(onSubmit) }>
+      <Options>
+        <Button
+          type="button"
+          size="medium"
+          active={ selected === 'departure' }
+          text={ <><FaArrowUp /> { t('routes_search.options.departure', { ns: 'common' }) }</> }
+          noMargin
+          onClick={ () => onClick('departure') }
+        />
+
+        <Button
+          type="button"
+          size="medium"
+          active={ selected === 'return' }
+          text={ <><FaHistory />{ t('routes_search.options.return', { ns: 'common' }) }</> }
+          noMargin
+          onClick={ () => onClick('return') }
+        />
+      </Options>
+
+      <Columns>
+        <Column>
+          <Item>
+            <Title>{ t('routes_search.from', { ns: 'common' }) }</Title>
+
+            <Autocomplete
+              name="from"
+              defaultValue={ from }
+              data={ cities }
+              validation="required"
+              t={ t }
+              refs={ register }
+              onUpdate={ setValue }
+            />
+
+            { display(errors.from) }
+          </Item>
+
+          <Item>
+            <Title>{ t('routes_search.to', { ns: 'common' }) }</Title>
+
+            <Autocomplete
+              name="to"
+              defaultValue={ to }
+              data={ cities }
+              validation="required"
+              t={ t }
+              refs={ register }
+              onUpdate={ setValue }
+            />
+
+            { display(errors.to) }
+          </Item>
+        </Column>
+
+        <Column>
+          <Item>
+            <Title>{ t('routes_search.departure', { ns: 'common' }) }</Title>
+
+            <Calendar
+              type="picker"
+              name="departure"
+              defaultValue={ departure }
+              t={ t }
+              validation="required"
+              refs={ register }
+              onUpdate={ setValue }
+            />
+
+            { display(errors.departure) }
+          </Item>
+
+          { selected === 'return' && (
+            <Item>
+              <Title>{ t('routes_search.return', { ns: 'common' }) }</Title>
+
+              <Calendar
+                type="picker"
+                name="_return"
+                defaultValue={ _return }
+                t={ t }
+                validation="required"
+                refs={ register }
+                onUpdate={ setValue }
+              />
+
+              { display(errors._return) }
+            </Item>
+          ) }
+        </Column>
+
+        <Column>
+          <Item>
+            <Title>{ t('routes_search.passengers', { ns: 'common' }) }</Title>
+
+            <Passengers 
+              defaultAdults={ adults }
+              defaultChildren={ children }
+              defaultBabies={ babies }
+              t={ t }
+              refs={ register }
+              onUpdate={ setValue }
+            />
+          </Item>
+
+          <Action>
+            <Button
+              type="submit"
+              noMargin
+              text={ <><AiOutlineSearch /> { t('routes_search.action', { ns: 'common' }) }</> }
+            />
+          </Action>
+        </Column>
+      </Columns>
+    </form>
+  );
+}
+
+export default RoutesSearch;

package/index.ts

@@ -0,0 +1,3 @@
+import RoutesSearch from './RoutesSearch';
+
+export default RoutesSearch;

package/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@autobusal/routes-search",
+  "version": "0.0.1",
+  "type": "module",
+  "main": "index.ts",
+  "dependencies": {
+    "@autobusal/common": "^0.0.18",
+    "@autobusal/providers": "^1.0.16",
+    "@autobusal/utilities": "^0.0.2",
+    "@tanstack/react-query": "^5.17.19",
+    "i18next": "^23.7.18",
+    "react": "^18.2.0",
+    "react-hook-form": "^7.49.3",
+    "react-icons": "^5.0.1",
+    "styled-components": "^6.1.8"
+  }
+}

package/services.ts

@@ -0,0 +1,17 @@
+import { useSuspenseQuery, UseSuspenseQueryResult } from '@tanstack/react-query';
+import { apiClient } from '@autobusal/providers';
+import { CityData } from '@autobusal/providers/types/locations';
+
+export const GetSuggestions = (): UseSuspenseQueryResult<CityData[]> => (
+  useSuspenseQuery({
+    queryKey: ['search-suggestions'],
+    queryFn: async () => (
+      await apiClient
+        .get('/api/cities/browse')
+        .then(response => (
+          response?.data ?? []
+        ))
+        .catch(() => {})
+    )
+  })
+);

package/styles.ts

@@ -0,0 +1,49 @@
+import styled from 'styled-components';
+
+export const Options = styled.div`
+  display: flex;
+  gap: 15px;
+  margin-bottom: 20px;
+`;
+
+export const Columns = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 15px;
+`;
+
+export const Column = styled.div`
+  flex-basis: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+
+  @media (min-width: 480px) {
+    flex-direction: row;
+  }
+
+  @media (min-width: 768px) {
+    flex-direction: column;
+    flex-basis: calc(33.3333% - 10px);
+  }
+`;
+
+export const Item = styled.div`
+  flex: 1;
+`;
+
+export const Title = styled.h4`
+  margin-bottom: 8px;
+  font-size: ${ props => props.theme.size.s };
+`;
+
+export const Action = styled.div`
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: end;
+
+  @media (min-width: 640px) {
+    justify-content: right;
+  }
+`;

package/types.ts

@@ -0,0 +1,10 @@
+export interface RoutesSearchForm {
+  type?: 'departure' | 'return'
+  from: string
+  to: string
+  departure: string
+  _return?: string
+  adults: number
+  children: number
+  babies: number
+}