@autobusal/routes-order 1.2.0 → 1.3.0

package/Found/Found.tsx

@@ -11,12 +11,13 @@ interface Props {
   loading: boolean
   data?: FoundData[]
   step1: RoutesSearchForm
+  preferredStop?: string
   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 => (
+const Found = ({ type, loading, data, step1, preferredStop, t, onSearch, onSave }: Props): JSX.Element => (
   <>
     <Dates type={ type } step1={ step1 } t={ t } onSearch={ onSearch } />
 
@@ -24,7 +25,14 @@ const Found = ({ type, loading, data, step1, t, onSearch, onSave }: Props): JSX.
 
     <Header t={ t } />
 
-    <Orders loading={ loading } data={ data } t={ t } onSave={ onSave } />
+    <Orders
+      loading={ loading }
+      data={ data }
+      type={ type }
+      preferredStop={ Number(preferredStop) }
+      t={ t }
+      onSave={ onSave }
+    />
   </>
 );
 

package/Found/Orders/Orders.tsx

@@ -1,17 +1,20 @@
 import { TFunction } from 'i18next';
 import { Inline } from '@autobusal/common';
 import Route from '../Route/Route';
+import { getFavorites, getNormal } from './utilities';
 import { Container, ContainerNotFound } from './styles';
 import { FoundData } from '@autobusal/providers/types/routes';
 
 interface Props {
   loading: boolean
   data?: FoundData[]
+  type: 'departure' | '_return'
+  preferredStop?: number
   t: TFunction<'common'>
   onSave: (data: FoundData) => void
 }
 
-const Orders = ({ loading, data, t, onSave }: Props): JSX.Element => {
+const Orders = ({ loading, data, type, preferredStop, t, onSave }: Props): JSX.Element => {
   if (loading) {
     return (
       <div className="box">
@@ -26,12 +29,29 @@ const Orders = ({ loading, data, t, onSave }: Props): JSX.Element => {
     );
   }
 
-  const items = data?.map(item => (
-    <Route key={ item.id } data={ item } t={ t } onSave={ onSave } />
+  const favorites = getFavorites(type, data, preferredStop).map(item => (
+    <Route
+      key={ item.id }
+      type="favorite"
+      data={ item }
+      t={ t }
+      onSave={ onSave }
+    />
+  ));
+
+  const items = getNormal(type, data, preferredStop).map(item => (
+    <Route
+      key={ item.id }
+      type="normal"
+      data={ item }
+      t={ t }
+      onSave={ onSave }
+    />
   ));
 
   return (
     <Container>
+      { favorites }
       { items }
     </Container>
   );

package/Found/Orders/utilities.ts

@@ -0,0 +1,25 @@
+import { FoundData } from '@autobusal/providers/types/routes';
+
+export const getFavorites = (type: string, data?: FoundData[], preferredStop?: number): FoundData[] => {
+  const favorites = data?.filter(item => {
+    if (type === 'departure') {
+      return item.locations.from.stop?.id === preferredStop;
+    } else {
+      return item.locations.to.stop?.id === preferredStop;
+    }
+  });
+
+  return favorites ?? [];
+};
+
+export const getNormal = (type: string, data?: FoundData[], preferredStop?: number): FoundData[] => {
+  const normal = data?.filter(item => {
+    if (type === 'departure') {
+      return item.locations.from.stop?.id !== preferredStop;
+    } else {
+      return item.locations.to.stop?.id !== preferredStop;
+    }
+  });
+
+  return normal ?? [];
+};

package/Found/Route/Route.tsx

@@ -3,16 +3,17 @@ 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 { Container, SpecialOffer, FavoriteStop, 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
+  type: 'favorite' | 'normal'
   t: TFunction<'common'>
   onSave: (data: FoundData) => void
 }
 
-const Route = ({ data, t, onSave }: Props): JSX.Element => {
+const Route = ({ data, type, t, onSave }: Props): JSX.Element => {
   const [ policy, setPolicy ] = useState<boolean>(false);
 
   const customs = Object.values(data.customs).join(', ');
@@ -23,8 +24,9 @@ const Route = ({ data, t, onSave }: Props): JSX.Element => {
   ));
 
   return (
-    <Container className="box">
+    <Container className="box" $type={ type }>
       { data.price.offer === true && <SpecialOffer>{ t('routes_order.step2.route.offer') }</SpecialOffer> }
+      { type === 'favorite' && <FavoriteStop>{ t('routes_order.step2.route.preferred_stop') }</FavoriteStop> }
 
       <Trip>
         <Company>

package/Found/Route/styles.ts

@@ -1,12 +1,16 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { Link } from 'react-router-dom';
 
-export const Container = styled.div`
+export const Container = styled.div<{ $type: 'favorite' | 'normal' }>`
   position: relative;
   display: flex;
   flex-direction: column;
   gap: 15px;
   padding: 15px;
+
+  ${ props => props.$type === 'favorite' && css`
+    border: 1px solid ${ props => props.theme.font.success }; 
+  ` }
 `;
 
 export const SpecialOffer = styled.div`
@@ -25,6 +29,21 @@ export const SpecialOffer = styled.div`
   background-image: url(${ import.meta.env.VITE_API_OBT }/storage/routes/offer.png);
 `;
 
+export const FavoriteStop = styled.div`
+  position: absolute;
+  bottom: -1px;
+  right: -1px;
+  z-index: 2;
+  padding: 2px 10px;
+  color: #FFF;
+  font-size: ${ props => props.theme.size.xs };
+  text-transform: uppercase;
+  font-weight: 700;
+  background: ${ props => props.theme.font.success };
+  border-top-left-radius: ${ props => props.theme.borderRadius };
+  border-bottom-right-radius: ${ props => props.theme.borderRadius };
+`;
+
 export const Trip = styled.div`
   display: flex;
   flex-direction: column;

package/Step1/Step1.tsx

@@ -23,7 +23,7 @@ const Step1 = ({ value, redirected, t, onSave }: Props): JSX.Element => {
 
   const { data } = useGetSettings();
 
-  const prepared = prepare(value, params, data.preferences.defaultLocations);
+  const prepared = prepare(value, params, searchParams, data.preferences.defaultLocations);
 
   const isSubmitted = searchParams.get('type') === 'submit';
 
@@ -45,8 +45,8 @@ const Step1 = ({ value, redirected, t, onSave }: Props): JSX.Element => {
       <div className="box">
         <RoutesSearch
           type={ prepared.type ?? 'departure' }
-          from={ prepared.from }
-          to={ prepared.to }
+          from={ `${ prepared.from }${ prepared.stop_from ? `:${ prepared.stop_from }` : '' }` }
+          to={ `${ prepared.to }${ prepared.stop_to ? `:${ prepared.stop_to }` : '' }` }
           departure={ prepared.departure }
           _return={ prepared._return ?? '' }
           adultsNo={ prepared.adults }

package/Step1/prepare.ts

@@ -5,6 +5,7 @@ import { RoutesSearchForm } from '@autobusal/routes-search/types';
 const prepare = (
   value: (RoutesSearchForm | undefined),
   params: Readonly<Params<string>>,
+  searchParams: URLSearchParams,
   defaultLocations: { from: string, to: string }
 ): RoutesSearchForm => {
   if (value !== undefined) {
@@ -23,6 +24,9 @@ const prepare = (
   const children = params.children ?? 0;
   const babies = params.babies ?? 0;
 
+  const stop_from = searchParams.get('sfrom') ?? undefined;
+  const stop_to = searchParams.get('sto') ?? undefined;
+
   return {
     type,
     from,
@@ -31,7 +35,9 @@ const prepare = (
     _return,
     adults: Number(adults),
     children: Number(children),
-    babies: Number(babies)
+    babies: Number(babies),
+    stop_from,
+    stop_to
   };
 };
 

package/Step2.tsx

@@ -34,6 +34,7 @@ const Step2 = ({ step1, t, onSearch, onSave, onBack }: Props): JSX.Element => {
         loading={ isFetching }
         data={ data }
         step1={ step1 }
+        preferredStop={ step1.stop_from }
         t={ t }
         onSearch={ onSearch }
         onSave={ onSave }

package/Step3.tsx

@@ -35,6 +35,7 @@ const Step3 = ({ step1, step2, t, onSearch, onSave, onBack }: Props): JSX.Elemen
         loading={ isFetching }
         data={ data }
         step1={ step1 }
+        preferredStop={ step1.stop_to }
         t={ t }
         onSearch={ onSearch }
         onSave={ onSave }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@autobusal/routes-order",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "type": "module",
   "main": "index.ts"
 }