@autobusal/routes-order 1.0.0

package/Step5/Coupons/Coupons.tsx

@@ -0,0 +1,71 @@
+import { TFunction } from 'i18next';
+import { useForm } from 'react-hook-form';
+import { RiCoupon3Line } from 'react-icons/ri';
+import { Button } from '@autobusal/common';
+import { Validate, Display } from '@autobusal/utilities';
+import { SubTitle } from '../../styles';
+import { Container, ContainerForm, ContainerInput } from './styles';
+import { CouponData } from '@autobusal/providers/types/orders';
+import { FoundData } from '@autobusal/providers/types/routes';
+import { TotalData, CouponForm } from '../../types';
+import { GetCoupon } from '../../services';
+
+interface Props {
+  current?: CouponData
+  step2: FoundData
+  total: TotalData
+  t: TFunction<'common'>
+  onApplied: (data: CouponData) => void
+}
+
+const Coupons = ({ current, step2, t, total, onApplied }: Props): (JSX.Element | null) => {
+  const { register, handleSubmit, formState: { errors } } = useForm<CouponForm>();
+
+  const { mutate: SearchCoupons, isPending } = GetCoupon(step2.id, total.value);
+
+  const onSubmit = (data: CouponForm): void => {
+    SearchCoupons(data, {
+      onSuccess: (data) => {
+        if (data.used) {
+          onApplied(data);
+
+          return;
+        }
+
+        alert(t('routes_order.step5.coupon.error'));
+      }
+    });
+  };
+
+  if (current) {
+    return null;
+  }
+
+  return (
+    <Container className="box">
+      <SubTitle>
+        <RiCoupon3Line />
+        { t('routes_order.step5.coupon.title') }
+      </SubTitle>
+
+      <form onSubmit={ handleSubmit(onSubmit) }>
+        <ContainerForm>
+          <ContainerInput>
+            <input type="text" placeholder={ t('routes_order.step5.coupon.code') } { ...register('code', Validate('required|min_length:4', t)) } />
+            { Display(errors.code) }
+          </ContainerInput>
+
+          <Button
+            type="submit"
+            loading={ isPending }
+            text={ t('routes_order.step5.coupon.apply') }
+            noMargin
+            maxWidth={ 175 }
+          />
+        </ContainerForm>
+      </form>
+    </Container>
+  );
+};
+
+export default Coupons;

package/Step5/Coupons/styles.ts

@@ -0,0 +1,20 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  margin-top: 25px;
+`;
+
+export const ContainerForm = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+  max-width: 450px;
+
+  @media (min-width: 480px) {
+    flex-direction: row;
+  }
+`;
+
+export const ContainerInput = styled.div`
+  flex: 1;
+`;

package/Step5/Payments/Payments.tsx

@@ -0,0 +1,82 @@
+import { useEffect } from 'react';
+import { TFunction } from 'i18next';
+import { RiSecurePaymentLine } from 'react-icons/ri';
+import { FaRegHandPaper, FaMoneyBill } from 'react-icons/fa';
+import { AiOutlineCreditCard } from 'react-icons/ai';
+import { Inline } from '@autobusal/common';
+import { SubTitle } from '../../styles';
+import { Container, ContainerPayments, ButtonPayment } from './styles';
+import { GetPayments } from '../../services';
+
+interface Props {
+  selected: string
+  isPartner: boolean
+  t: TFunction<'common'>
+  onChange: (action: string) => void
+}
+
+const Payments = ({ selected, isPartner, t, onChange }: Props): JSX.Element => {
+  const { data, isLoading, isSuccess } = GetPayments();
+
+  useEffect(() => {
+    if (isSuccess) {
+      const found = Object.keys(data).find(item => {
+        return data[item as keyof typeof data] === true;
+      });
+
+      // we assign the first available action
+      onChange(found ?? '');
+    }
+  }, [isSuccess, data, onChange]);
+
+  if (isLoading) {
+    return (
+      <Container className="box">
+        <Inline text={ t('routes_order.step5.actions.loading') } />
+      </Container>
+    );
+  }
+
+  return (
+    <>
+      <Container className="box">
+        <SubTitle>
+          <RiSecurePaymentLine />
+          { t('routes_order.step5.actions.title') }
+        </SubTitle>
+
+        <ContainerPayments>
+          { (data?.reserve && !isPartner) && (
+            <ButtonPayment type="button" $selected={ selected === 'reserve' } onClick={ () => onChange('reserve') }>
+              <FaRegHandPaper />
+              { t('routes_order.step5.actions.reserve') }
+            </ButtonPayment>
+          ) }
+
+          { (data?.funds && !isPartner) && (
+            <ButtonPayment type="button" $selected={ selected === 'funds' } onClick={ () => onChange('funds') }>
+              <FaMoneyBill />
+              { t('routes_order.step5.actions.funds') }
+            </ButtonPayment>
+          ) }
+
+          { (data?.funds && !isPartner) && (
+            <ButtonPayment type="button" $selected={ selected === 'cash' } onClick={ () => onChange('cash') }>
+              <FaMoneyBill />
+              { t('routes_order.step5.actions.cash') }
+            </ButtonPayment>
+          ) }
+
+          { (data?.bkt || isPartner) && (
+            <ButtonPayment type="button" $selected={ selected === 'bkt' } onClick={ () => onChange('bkt') }>
+              <AiOutlineCreditCard />
+              { t('routes_order.step5.actions.card') }
+            </ButtonPayment>
+          ) }
+        </ContainerPayments>
+      </Container>
+    </>
+  );
+};
+
+export default Payments;

package/Step5/Payments/styles.ts

@@ -0,0 +1,42 @@
+import styled, { css } from 'styled-components';
+
+export const Container = styled.div`
+  margin-top: 25px;
+`;
+
+export const ContainerPayments = styled.div`
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 15px;
+  justify-content: center;
+`;
+
+export const ButtonPayment = styled.button<{ $selected: boolean }>`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  flex-basis: 150px;
+  padding: 10px;
+  text-align: center;
+  font-weight: 700;
+  border: 1px solid ${ props => props.theme.background.neutral };
+  border-radius: ${ props => props.theme.borderRadius };
+  transition: all 0.3s ease;
+
+  & > svg {
+    font-size: 35px;
+  }
+
+  &:hover {
+    background-color: ${ props => props.theme.background.neutral };
+  }
+
+  ${ props => props.$selected && css`
+    color: ${ props => props.theme.primary.contrast } !important;
+    background-color: ${ props => props.theme.primary.normal } !important;
+    border-color: ${ props => props.theme.primary.normal };
+  ` }
+`;

package/Step5/Step5.tsx

@@ -0,0 +1,131 @@
+import { useState } from 'react';
+import { TFunction } from 'i18next';
+import { useForm } from 'react-hook-form';
+import { useNavigate } from 'react-router-dom';
+import { RiShoppingCartLine } from 'react-icons/ri';
+import { AiOutlineCaretLeft } from 'react-icons/ai';
+import { MdDone } from 'react-icons/md';
+import { Button } from '@autobusal/common';
+import Steps from '../Steps/Steps';
+import Summary from './Summary/Summary';
+import Coupons from './Coupons/Coupons';
+import Billing from './Billing/Billing';
+import Payments from './Payments/Payments';
+import { getTotal, convertCoupon } from './utilities';
+import { Title, Actions } from '../styles';
+import { PersonData, BillingData } from '@autobusal/providers/types/persons';
+import { FoundData } from '@autobusal/providers/types/routes';
+import { CouponData } from '@autobusal/providers/types/orders';
+import { RoutesSearchForm } from '@autobusal/routes-search/types';
+import { TotalData } from '../types';
+import { useUserStore } from '@autobusal/providers/stores/user';
+import { PostOrder } from '../services';
+
+interface Props {
+  step1: RoutesSearchForm
+  step2: FoundData
+  step3?: FoundData
+  step4: PersonData
+  isPartner?: boolean
+  t: TFunction<'common'>
+  onBack: (step: number) => void
+}
+
+const Step5 = ({ step1, step2, step3, step4, isPartner, t, onBack }: Props): JSX.Element => {
+  const [ coupon, setCoupon ] = useState<CouponData | undefined>(undefined);
+  const [ total, setTotal ] = useState<TotalData>(
+    getTotal(step2, step3)
+  );
+  const [ action, setAction ] = useState<string | undefined>(undefined);
+
+  const { data: UserData } = useUserStore();
+
+  const navigate = useNavigate();
+
+  const { register, handleSubmit, formState: { errors } } = useForm<BillingData>();
+
+  const { mutate: OrderSend, isPending } = PostOrder(step1, step2, step3, step4, coupon, action);
+
+  const onApplyCoupon = (data: CouponData): void => {
+    setTotal(
+      convertCoupon(data)
+    );
+
+    setCoupon(data);
+  };
+
+  const onAction = (action: string): void => {
+    setAction(action);
+  };
+
+  const onSendForm = async (): Promise<void> => {
+    await handleSubmit(onSubmit)();
+  };
+
+  const onSubmit = (data: BillingData): void => {
+    OrderSend(data, {
+      onSuccess: (data) => {
+        if (data === undefined) {
+          return;
+        }
+
+        const hash = step1.type === 'return' ? data.return : data.departure;
+
+        navigate(`/orders/process/${ action }/${ hash }`);
+      }
+    });
+  };
+
+  return (
+    <>
+      <Title>
+        <RiShoppingCartLine />
+        { t('routes_order.step5.title') }
+      </Title>
+
+      <Steps value={ 5 } />
+
+      <Summary
+        step1={ step1 }
+        step2={ step2 }
+        step3={ step3 }
+        step4={ step4 }
+        coupon={ coupon }
+        total={ total }
+        t={ t }
+      />
+
+      <Coupons current={ coupon } step2={ step2 } total={ total } t={ t } onApplied={ onApplyCoupon } />
+
+      { UserData === undefined && <Billing t={ t } errors={ errors } refs={ register } /> }
+
+      <Payments
+        selected={ action ?? '' }
+        isPartner={ isPartner ?? false }
+        t={ t }
+        onChange={ onAction }
+      />
+
+      <Actions>
+        <Button
+          type="button"
+          subtype="secondary"
+          text={ <><AiOutlineCaretLeft /> { t('routes_order.step5.back') }</> }
+          noMargin
+          onClick={ () => onBack(4) }
+        />
+
+        <Button
+          loading={isPending}
+          noMargin
+          text={ (
+            <><MdDone />{ t('routes_order.step5.next') }</>
+          ) }
+          onClick={ onSendForm }
+        />
+      </Actions>
+    </>
+  );
+};
+
+export default Step5;

package/Step5/Summary/About/About.tsx

@@ -0,0 +1,48 @@
+import { TFunction } from 'i18next';
+import { FaArrowLeft, FaArrowRight } from 'react-icons/fa';
+import { Container, ContainerIcon, Icon, Information, Title, SubTitle, Operator } from './styles';
+import { RoutesSearchForm } from '@autobusal/routes-search/types';
+import { FoundData } from '@autobusal/providers/types/routes';
+
+interface Props {
+  type: 'departure' | 'return'
+  step1: RoutesSearchForm
+  data?: FoundData
+  t: TFunction<'public'>
+}
+
+const About = ({ type, step1, data, t }: Props): (JSX.Element | null) => {
+  const icon = type === 'departure' ? <FaArrowRight /> : <FaArrowLeft />;
+
+  if (!data) {
+    return null;
+  }
+
+  const details = type === 'departure' ? {
+    date: step1.departure,
+    hour: data.locations.from.departure,
+    stop: data.locations.from.stop?.name,
+    city: data.locations.from.city.name
+  } : {
+    date: step1._return,
+    hour: data.locations.to.arrival,
+    stop: data.locations.to.stop?.name,
+    city: data.locations.to.city.name
+  };
+
+  return (
+    <Container>
+      <ContainerIcon>
+        <Icon>{ icon }</Icon>
+      </ContainerIcon>
+
+      <Information>
+        <Title>{ data.name } ({ data.code })</Title>
+        <SubTitle>{ t(`routes_order.step5.summary.${ type }`, details) }</SubTitle>
+        <Operator>{ data.operator.company }</Operator>
+      </Information>
+    </Container>
+  );
+};
+
+export default About;

package/Step5/Summary/About/styles.ts

@@ -0,0 +1,49 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  flex: 1;
+  display: flex;
+`;
+
+export const ContainerIcon = styled.div`
+  display: flex;
+  align-items: center;
+  flex-basis: 54px;
+`;
+
+export const Icon = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  font-size: ${ props => props.theme.size.xxl };
+  color: ${ props => props.theme.primary.contrast };
+  background: ${ props => props.theme.primary.normal };
+  border-radius: 100px;
+`;
+
+export const Information = styled.div`
+  flex: 1;
+`;
+
+export const Title = styled.h2`
+  margin: 0;
+  font-size: ${ props => props.theme.size.l };
+  text-transform: uppercase;
+`;
+
+export const SubTitle = styled.div`
+  display: inline-block;
+  padding: 4px 10px;
+  margin: 6px 0;
+  font-size: calc(${ props => props.theme.size.s } - 1px);
+  background: ${ props => props.theme.background.neutral };
+  border-radius: ${ props => props.theme.borderRadius };
+`;
+
+export const Operator = styled.div`
+  padding-left: 10px;
+  font-size: calc(${ props => props.theme.size.s } - 1px);
+  color: ${ props => props.theme.font.faded };
+`;

package/Step5/Summary/Amount/Amount.tsx

@@ -0,0 +1,24 @@
+import { TFunction } from 'i18next';
+import { Container, Value, Code } from './styles';
+
+interface Props {
+  type: 'total' | 'discount'
+  value: string
+  code?: string
+  t: TFunction<'common'>
+}
+
+const Amount = ({ type, value, code, t }: Props): JSX.Element => (
+  <Container $type={ type }>
+    { t(`routes_order.step5.summary.${ type }`) }
+
+    { code && <Code>{ code }</Code> }
+
+    <Value>
+      { type === 'discount' && '-' }
+      { value }
+    </Value>
+  </Container>
+);
+
+export default Amount;

package/Step5/Summary/Amount/styles.ts

@@ -0,0 +1,29 @@
+import styled, { css } from 'styled-components';
+
+export const Container = styled.div<{ $type: 'total' | 'discount' }>`
+  display: flex;
+  align-items: center;
+  padding: 10px 15px;
+  margin-top: 15px;
+  text-transform: uppercase;
+  font-weight: 700;
+  background: ${ props => props.theme.background.neutral };
+  border-radius: ${ props => props.theme.borderRadius };
+
+  ${ props => props.$type === 'discount' && css`
+    color: ${ props => props.theme.font.error };
+  ` }
+`;
+
+export const Value = styled.strong`
+  margin-left: auto;
+`;
+
+export const Code = styled.span`
+  padding: 3px 5px;
+  margin-left: 6px;
+  color: #FFF;
+  font-size: ${ props => props.theme.size.xs };
+  background-color: ${ props => props.theme.font.error };
+  border-radius: ${ props => props.theme.borderRadius };
+`;

package/Step5/Summary/Summary.tsx

@@ -0,0 +1,44 @@
+import { TFunction } from 'i18next';
+import { AiOutlineInfoCircle } from 'react-icons/ai';
+import About from './About/About';
+import Tickets from './Tickets/Tickets';
+import Amount from './Amount/Amount';
+import { SubTitle } from '../../styles';
+import { Information } from './styles';
+import { RoutesSearchForm } from '@autobusal/routes-search/types';
+import { FoundData } from '@autobusal/providers/types/routes';
+import { PersonData } from '@autobusal/providers/types/persons';
+import { CouponData } from '@autobusal/providers/types/orders';
+import { TotalData } from '../../types';
+
+interface Props {
+  step1: RoutesSearchForm
+  step2: FoundData
+  step3?: FoundData
+  step4: PersonData
+  coupon?: CouponData
+  total: TotalData
+  t: TFunction<'common'>
+}
+
+const Summary = ({ step1, step2, step3, step4, coupon, total, t }: Props): JSX.Element => (
+  <div className="box">
+    <SubTitle>
+      <AiOutlineInfoCircle />
+      { t('routes_order.step5.summary.title') }
+    </SubTitle>
+
+    <Information>
+      <About type="departure" step1={ step1 } data={ step2 } t={ t } />
+      <About type="return" step1={ step1 } data={ step3 } t={ t } />
+    </Information>
+
+    <Tickets step1={ step1 } step4={ step4 } t={ t } />
+
+    { coupon && <Amount type="discount" code={ coupon.code } value={ coupon.discount } t={ t } /> }
+
+    <Amount type="total" value={ total.display } t={ t } />
+  </div>
+);
+
+export default Summary;

package/Step5/Summary/Tickets/Preview.tsx

@@ -0,0 +1,41 @@
+import { TFunction } from 'i18next';
+import { MdEventSeat } from 'react-icons/md';
+import { Person, Seats } from './styles';
+import { PersonData } from '@autobusal/providers/types/persons';
+
+interface Props {
+  type: 'adult' | 'child' | 'baby'
+  data: PersonData
+  number: number
+  t: TFunction<'public'>
+}
+
+const Preview = ({ type, data, number, t }: Props): JSX.Element[] => {
+  const persons: JSX.Element[] = [];
+
+  for (let i = 1; i <= number; i++) {
+    const name = `${ type }${ number }`;
+
+    const names = {
+      firstName: `${ name }_fn`,
+      lastName: `${ name }_ln`,
+      seatDeparture: `${ name }_sd`,
+      seatReturn: `${ name }_sr`
+    };
+
+    persons.push(
+      <Person key={ i }>
+        { data[names.firstName] } { data[names.lastName] } ({ t(`data.persons.${ type }.singular`) })
+
+        <Seats>
+          { t('routes_order.step5.summary.seats.departure') }: <MdEventSeat /> { data[names.seatDeparture] }
+          { data[names.seatReturn] && <>, { t('routes_order.step5.summary.seats.return') }: <MdEventSeat /> { data[names.seatReturn] }</> }
+        </Seats>
+      </Person>
+    );
+  }
+
+  return persons;
+};
+
+export default Preview;

package/Step5/Summary/Tickets/Tickets.tsx

@@ -0,0 +1,34 @@
+import { TFunction } from 'i18next';
+import Preview from './Preview';
+import { Container, About, List } from './styles';
+import { RoutesSearchForm } from '@autobusal/routes-search/types';
+import { PersonData } from '@autobusal/providers/types/persons';
+
+interface Props {
+  step1: RoutesSearchForm
+  step4: PersonData
+  t: TFunction<'public'>
+}
+
+const Tickets = ({ step1, step4, t }: Props): JSX.Element => {
+  const total = step1.adults + step1.children + step1.babies;
+
+  return (
+    <Container>
+      <About>
+        { t('routes_order.step5.summary.tickets') } ({ total }): 
+        { step1.adults > 0 && ` ${ step1.adults } x ${ t('data.persons.adult.plural') }` }
+        { step1.children > 0 && `, ${ step1.children } x ${ t('data.persons.child.plural') }` }
+        { step1.babies > 0 && `${ step1.babies } x ${ t('data.persons.baby.plural') }` }
+      </About>
+
+      <List>
+        <Preview type="adult" data={ step4 } number={ step1.adults } t={ t } />
+        <Preview type="child" data={ step4 } number={ step1.children } t={ t } />
+        <Preview type="baby" data={ step4 } number={ step1.babies } t={ t } />
+      </List>
+    </Container>
+  );
+};
+
+export default Tickets;

package/Step5/Summary/Tickets/styles.ts

@@ -0,0 +1,36 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  padding: 10px 15px;
+  margin: 15px 0;
+  border: 1px solid ${ props => props.theme.background.neutral };
+  border-radius: ${ props => props.theme.borderRadius };
+`;
+
+export const About = styled.div`
+  padding-bottom: 8px;
+  font-weight: 700;
+  border-bottom: 1px solid ${ props => props.theme.background.neutral };
+`;
+
+export const List = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-top: 8px;
+  font-size: ${ props => props.theme.size.s };
+`;
+
+export const Person = styled.div`
+  font-weight: 700;
+`;
+
+export const Seats = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  margin-top: 2px;
+  font-weight: 400;
+  color: ${ props => props.theme.font.faded };
+  font-size: ${ props => props.theme.size.xs };
+`;

package/Step5/Summary/styles.ts

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+
+export const Information = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+
+  @media (min-width: 768px) {
+    flex-direction: row;
+  }
+`;