@autobusal/routes-order 1.0.0

package/Step5/utilities.ts

@@ -0,0 +1,24 @@
+import { FoundData } from '@autobusal/providers/types/routes';
+import { CouponData } from '@autobusal/providers/types/orders';
+import { TotalData } from '../types';
+
+export const getTotal = (step2: FoundData, step3?: FoundData): TotalData => {
+  // we get the currency
+  const currency = step2.price.display.split(' ');
+
+  const total = step2.price.value + (step3?.price.value ?? 0);
+
+  return {
+    display: `${ total } ${ currency[1] }`,
+    value: total
+  };
+};
+
+export const convertCoupon = (data: CouponData): TotalData => {
+  const currency = data.total.split(' ');
+
+  return {
+    display: data.total,
+    value: Number(currency[0])
+  };
+};

package/Steps/Steps.tsx

@@ -0,0 +1,28 @@
+import { AiOutlineCheck } from 'react-icons/ai';
+import { Container, Item, Content } from './styles';
+
+interface Props {
+  value: number
+}
+
+const Steps = ({ value }: Props): JSX.Element => {
+  const items: JSX.Element[] = [];
+  
+  for (let i = 1; i <= 5; i++) {
+    items.push(
+      <Item key={ i }>
+        <Content $selected={ value > i }>
+          { value > i ? <AiOutlineCheck /> : i }
+        </Content>
+      </Item>
+    );
+  }
+
+  return (
+    <Container>
+      { items }
+    </Container>
+  );
+};
+
+export default Steps;

package/Steps/styles.ts

@@ -0,0 +1,47 @@
+import styled, { css } from 'styled-components';
+
+export const Container = styled.div`
+  position: relative;
+  display: flex;
+  max-width: 600px;
+  margin: 0 auto 30px;
+  padding: 0 25px;
+  justify-content: space-between;
+
+  &:before {
+    position: absolute;
+    left: 0;
+    bottom: 50%;
+    z-index: 0;
+    width: 100%;
+    content: '';
+    border-bottom: 3px solid ${ props => props.theme.background.neutral };
+  }
+`;
+
+export const Item = styled.div`
+  position: relative;
+  z-index: 1;
+  width: 48px;
+  background-color: ${ props => props.theme.background.normal };
+`;
+
+export const Content = styled.div<{ $selected: boolean }>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  margin: 0 auto;
+  font-weight: 700;
+  font-size: ${ props => props.theme.size.xs };
+  background-color: ${ props => props.theme.background.normal };
+  border: 1px solid ${ props => props.theme.primary.normal };
+  border-radius: 100px;
+
+  ${ props => props.$selected && css`
+    color: #FFFFFF;
+    background-color: ${ props => props.theme.font.success };
+    border-color: ${ props => props.theme.font.success };
+  ` }
+`;

package/index.ts

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

package/package.json

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

package/services.ts

@@ -0,0 +1,149 @@
+import { useMutation, UseMutationResult, useQuery, UseQueryResult } from '@tanstack/react-query';
+import { apiClient } from '@autobusal/providers';
+import { RoutesSearchForm } from '@autobusal/routes-search/types';
+import { FoundData } from '@autobusal/providers/types/routes';
+import { CouponData } from '@autobusal/providers/types/orders';
+import { BillingData, PersonData } from '@autobusal/providers/types/persons';
+import { FoundDay, ActionData, SaveData, OrderedData, CouponForm } from './types';
+
+export const GetDepartures = (data: RoutesSearchForm): UseQueryResult<FoundData[]> => (
+  useQuery({
+    queryKey: ['search-routes-step2', { data }],
+    queryFn: async () => (
+      await apiClient
+        .get('/api/routes/search/departure', {
+          params: data
+        })
+        .then(response => (
+          response?.data ?? []
+        ))
+    )
+  })
+);
+
+export const GetReturns = (data: RoutesSearchForm, departure: FoundData): UseQueryResult<FoundData[]> => (
+  useQuery({
+    queryKey: ['search-routes-step3', { data }],
+    queryFn: async () => (
+      await apiClient
+        .get('/api/routes/search/return', {
+          params: {
+            ...data,
+            operator_id: departure.operator.id
+          }
+        })
+        .then(response => (
+          response?.data ?? []
+        ))
+    )
+  })
+);
+
+export const GetDates = (step1: RoutesSearchForm, type: ('departure' | '_return'), number: number): UseQueryResult<FoundDay[]> => {
+  const step = { ...step1 };
+
+  // we switch the locations and dates if a return trip
+  if (type === '_return' && step._return !== undefined) {
+    step.departure = step1._return ?? '';
+    step._return = step1.departure;
+
+    step.from = step1.to;
+    step.to = step1.from;
+  }
+
+  return useQuery({
+    queryKey: ['step2-dates', { number }],
+    queryFn: async () => (
+      await apiClient
+        .get('/api/routes/search/dates', {
+          params: {
+            ...step,
+            number
+          }
+        })
+        .then(response => (
+          response?.data ?? []
+        ))
+    )
+  })
+};
+
+export const PostOrder = (
+  step1: RoutesSearchForm,
+  step2: FoundData,
+  step3: (FoundData | undefined),
+  step4: PersonData,
+  coupon: (CouponData | undefined),
+  action: (string | undefined)
+): UseMutationResult<OrderedData, Error, BillingData, unknown> => (
+  useMutation({
+    mutationKey: ['save-order'],
+    mutationFn: async (data: BillingData) => {
+      const type =  step1.type ?? 'departure';
+
+      const order: SaveData = {};
+
+      order.departure = step1.departure;
+      order.departure_price_id = step2.price.id;
+
+      if (type === 'return' && step1._return !== undefined && step3 !== undefined) {
+        order.return = step1._return;
+        order.return_price_id = step3?.price.id;
+      }
+
+      if (coupon !== undefined) {
+        order.coupon = coupon.code;
+      }
+
+      Object.keys(step4).forEach(index => {
+        order[index] = step4[index];
+      });
+
+      if (action !== undefined) {
+        order.action = action;
+      }
+
+      if (data !== undefined) {
+        Object.keys(data).forEach(index => {
+          order[index] = data[index as keyof typeof data];
+        });
+      }
+
+      return await apiClient
+        .post(`/api/orders/create/${ type }`, order)
+        .then(response => (
+          response.data
+        ))
+    }
+  })
+);
+
+export const GetCoupon = (routeId: number, total: number): UseMutationResult<CouponData, Error, CouponForm, unknown> => (
+  useMutation({
+    mutationKey: ['search-coupon'],
+    mutationFn: async (data: CouponForm) => (
+      await apiClient
+        .post('/api/coupons/search', {
+          code: data.code,
+          route_id: routeId,
+          total
+        })
+        .then(response => (
+          response.data
+        ))
+    )
+  })
+);
+
+export const GetPayments = (): UseQueryResult<ActionData> => (
+  useQuery({
+    queryKey: ['allowed-funds'],
+    queryFn: async () => (
+      await apiClient
+        .get('/api/funds/allowed')
+        .then(response => (
+          response.data
+        ))
+    )
+  })
+);

package/styles.ts

@@ -0,0 +1,24 @@
+import styled from 'styled-components';
+
+export const Title = styled.h1`
+  display: flex;
+  align-items: center;
+  gap: 10px;
+`;
+
+export const SubTitle = styled.h3`
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding-bottom: 18px;
+  margin-bottom: 18px;
+  border-bottom: 1px solid ${ props => props.theme.background.neutral };
+`;
+
+export const Actions = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 20px;
+  margin-top: 25px;
+`;

package/types.ts

@@ -0,0 +1,32 @@
+export interface FoundDay {
+  day: string
+  id: string
+  routes: boolean
+}
+
+export interface CouponForm {
+  code: string
+}
+
+export interface ActionData {
+  fake: boolean
+  reserve: boolean
+  funds: boolean
+  bkt: boolean
+}
+
+export interface SaveData {
+  [key: string]: string | number
+}
+
+export interface OrderedData {
+  departure: string
+  departure_download: string
+  return?: string
+  return_download?: string
+}
+
+export interface TotalData {
+  display: string
+  value: number
+}