@autobusal/routes-order 1.0.0

package/Step4/Passenger/Passenger.tsx

@@ -0,0 +1,173 @@
+import { TFunction } from 'i18next';
+import { FieldErrors, FieldValues, UseFormRegister } from 'react-hook-form';
+import { Calendar, Gender, ChooseSeat } from '@autobusal/common';
+import { Validate, Display } from '@autobusal/utilities';
+import { Container, Title } from './styles';
+import { PersonData } from '@autobusal/providers/types/persons';
+import { OccupiedData } from '@autobusal/providers/types/buses';
+
+interface Props {
+  type: 'adult' | 'child' | 'baby'
+  number: number
+  values?: PersonData
+  withReturn: boolean
+  busFrom: OccupiedData
+  busTo: OccupiedData
+  pickedFrom: number[]
+  pickedTo: number[]
+  t: TFunction<'public'>
+  errors: FieldErrors<FieldValues>
+  refs: UseFormRegister<PersonData>
+  onSeatSelect: (name: string, type: ('from' | 'to'), seat: number, previous: number) => void
+  onUpdate: (name: string, value: (string | number)) => void
+}
+
+const Passenger = ({ type, number, values, withReturn, busFrom, busTo, pickedFrom, pickedTo, t, errors, refs, onSeatSelect, onUpdate }: Props): JSX.Element => {
+  const name = `${ type }${ number }`;
+
+  const names = {
+    firstName: `${ name }_fn`,
+    lastName: `${ name }_ln`,
+    dob: `${ name }_dob`,
+    sex: `${ name }_sex`,
+    passport: `${ name }_pass`,
+    phone: `${ name }_phone`,
+    seatDeparture: `${ name }_sd`,
+    seatReturn: `${ name }_sr`
+  };
+
+  return (
+    <Container className="box">
+      <Title>
+        { `${ t('routes_order.step4.ticket', { no: number }) } (${ t(`data.persons.${ type }.singular`) })` }
+      </Title>
+
+      <div className="column">
+        <div className="row">
+          { t('routes_order.step4.first_name') }
+
+          <input
+            type="text"
+            defaultValue={ values !== undefined ? values[names.firstName] : '' }
+            { ...refs(names.firstName, Validate('required|min_length:2|max_length:100', t)) }
+          />
+
+          { Display(errors[names.firstName]) }
+        </div>
+
+        <div className="row">
+          { t('routes_order.step4.last_name') }
+
+          <input
+            type="text"
+            defaultValue={ values !== undefined ? values[names.lastName] : '' }
+            { ...refs(names.lastName, Validate('required|min_length:2|max_length:100', t)) }
+          />
+
+          { Display(errors[names.lastName]) }
+        </div>
+      </div>
+
+      <div className="column">
+        <div className="row">
+          { t('routes_order.step4.dob') }
+
+          <Calendar
+            type="dob"
+            name={ names.dob }
+            defaultValue={ values !== undefined ? String(values[names.dob]) : undefined }
+            t={ t }
+            validation="required"
+            refs={ refs }
+            onUpdate={ onUpdate }
+          />
+
+          { Display(errors[names.dob]) }
+        </div>
+
+        <div className="row">
+          { t('routes_order.step4.gender') }
+
+          <Gender
+            name={ names.sex }
+            defaultValue={ values !== undefined ? Number(values[names.sex]) : undefined }
+            t={ t }
+            refs={ refs }
+          />
+
+          { Display(errors[names.sex]) }
+        </div>
+      </div>
+      
+      <div className="column">
+        <div className="row">
+          { t('routes_order.step4.passport') }
+
+          <input
+            type="text"
+            defaultValue={ values !== undefined ? values[names.passport] : '' }
+            { ...refs(names.passport, Validate('required|min_length:2|max_length:50', t)) }
+          />
+
+          { Display(errors[names.passport]) }
+        </div>
+
+        <div className="row">
+          { t('routes_order.step4.phone') }
+
+          <input
+            type="text"
+            defaultValue={ values !== undefined ? values[names.phone] : '' }
+            { ...refs(names.phone) }
+          />
+
+          { Display(errors[names.phone]) }
+        </div>
+      </div>
+
+      { type !== 'baby' && (
+        <div className="column">
+          <div className="row">
+            { t('seats.departure') }
+
+            <ChooseSeat
+              name={ names.seatDeparture }
+              type="from"
+              defaultValue={ values !== undefined ? Number(values[names.seatDeparture]) : undefined }
+              bus={ busFrom }
+              picked={ pickedFrom }
+              validation="required|min:1"
+              t={ t }
+              refs={ refs }
+              onUpdate={ onSeatSelect }
+            />
+
+            { Display(errors[names.seatDeparture]) }
+          </div>
+
+          { withReturn && (
+            <div className="row">
+              { t('seats.return') }
+
+              <ChooseSeat
+                name={ names.seatReturn }
+                type="to"
+                defaultValue={ values !== undefined ? Number(values[names.seatReturn]) : undefined }
+                bus={ busTo }
+                picked={ pickedTo }
+                validation="required|min:1"
+                t={ t }
+                refs={ refs }
+                onUpdate={ onSeatSelect }
+              />
+
+              { Display(errors[names.seatReturn]) }
+            </div>
+          ) }
+        </div>
+      ) }
+    </Container>
+  );
+};
+
+export default Passenger;

package/Step4/Passenger/styles.ts

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  margin-bottom: 5px;
+`;
+
+export const Title = styled.h3`
+  padding-bottom: 16px;
+  border-bottom: 1px solid ${ props => props.theme.background.neutral };
+`;

package/Step4/Passengers/Display.tsx

@@ -0,0 +1,50 @@
+import { TFunction } from 'i18next';
+import { FieldErrors, FieldValues, UseFormRegister } from 'react-hook-form';
+import Passenger from '../Passenger/Passenger';
+import { PersonData } from '@autobusal/providers/types/persons';
+import { OccupiedData } from '@autobusal/providers/types/buses';
+
+interface Props {
+  type: 'adult' | 'child' | 'baby'
+  amount: number
+  withReturn: boolean
+  values?: PersonData
+  busFrom: OccupiedData
+  busTo: OccupiedData
+  pickedFrom: number[]
+  pickedTo: number[]
+  t: TFunction<'public'>
+  errors: FieldErrors<FieldValues>
+  refs: UseFormRegister<PersonData>
+  onSeatSelect: (name: string, type: ('from' | 'to'), seat: number, previous: number) => void
+  onUpdate: (name: string, value: (string | number)) => void
+}
+
+const Display = ({ type, amount, withReturn, values, busFrom, busTo, pickedFrom, pickedTo, t, errors, refs, onSeatSelect, onUpdate }: Props): JSX.Element[] => {
+  const passengers: JSX.Element[] = [];
+
+  for (let i = 1; i <= amount; i++) {
+    passengers.push(
+      <Passenger
+        key={ i }
+        type={ type }
+        number={ i }
+        withReturn={ withReturn }
+        values={ values }
+        busFrom={ busFrom }
+        busTo={ busTo }
+        pickedFrom={ pickedFrom }
+        pickedTo={ pickedTo }
+        t={ t }
+        errors={ errors }
+        refs={ refs }
+        onSeatSelect={ onSeatSelect }
+        onUpdate={ onUpdate }
+      />
+    );
+  }
+
+  return passengers;
+};
+
+export default Display;

package/Step4/Passengers/Passengers.tsx

@@ -0,0 +1,96 @@
+import { useState } from 'react';
+import { TFunction } from 'i18next';
+import { FieldErrors, FieldValues, UseFormRegister } from 'react-hook-form';
+import Display from './Display';
+import { Container } from './styles';
+import { RoutesSearchForm } from '@autobusal/routes-search/types';
+import { PersonData } from '@autobusal/providers/types/persons';
+import { OccupiedData } from '@autobusal/providers/types/buses';
+
+interface Props {
+  values?: PersonData
+  step1: RoutesSearchForm
+  busFrom: OccupiedData
+  busTo: OccupiedData
+  t: TFunction<'public'>
+  errors: FieldErrors<FieldValues>
+  refs: UseFormRegister<PersonData>
+  onUpdate: (name: string, value: (string | number)) => void
+}
+
+const Passengers = ({ values, step1, busFrom, busTo, t, errors, refs, onUpdate }: Props): JSX.Element => {
+  const [ pickedFrom, setPickedFrom ] = useState<number[]>([]);
+  const [ pickedTo, setPickedTo ] = useState<number[]>([]);
+
+  const onSeatSelect = (name: string, type: ('from' | 'to'), seat: number, previous: number): void => {
+    let newPicked = type === 'from' ? [...pickedFrom] : [...pickedTo];
+
+    if (previous > 0) {
+      newPicked = pickedFrom.filter(item => item !== previous);
+    }
+
+    newPicked.push(seat);
+
+    if (type === 'from') {
+      setPickedFrom(newPicked);
+    } else {
+      setPickedTo(newPicked);
+    }
+
+    onUpdate(name, seat);
+  };
+
+  return (
+    <Container>
+      <Display
+        type="adult"
+        amount={ step1.adults }
+        withReturn={ step1.type === 'return' }
+        values={ values }
+        busFrom={ busFrom }
+        busTo={ busTo }
+        pickedFrom={ pickedFrom }
+        pickedTo={ pickedTo }
+        t={ t }
+        errors={ errors }
+        refs={ refs }
+        onSeatSelect={ onSeatSelect }
+        onUpdate={ onUpdate }
+      />
+
+      <Display
+        type="child"
+        amount={ step1.children }
+        withReturn={ step1.type === 'return' }
+        values={ values }
+        busFrom={ busFrom }
+        busTo={ busTo }
+        pickedFrom={ pickedFrom }
+        pickedTo={ pickedTo }
+        t={ t }
+        errors={ errors }
+        refs={ refs }
+        onSeatSelect={ onSeatSelect }
+        onUpdate={ onUpdate }
+      />
+
+      <Display
+        type="baby"
+        amount={ step1.babies }
+        withReturn={ step1.type === 'return' }
+        values={ values }
+        busFrom={ busFrom }
+        busTo={ busTo }
+        pickedFrom={ pickedFrom }
+        pickedTo={ pickedTo }
+        t={ t }
+        errors={ errors }
+        refs={ refs }
+        onSeatSelect={ onSeatSelect }
+        onUpdate={ onUpdate }
+      />
+    </Container>
+  );
+};
+
+export default Passengers;

package/Step4/Passengers/styles.ts

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+`;

package/Step4/Step4.tsx

@@ -0,0 +1,96 @@
+import { TFunction } from 'i18next';
+import { useForm } from 'react-hook-form';
+import { HiUsers } from 'react-icons/hi';
+import { RiShoppingCartLine } from 'react-icons/ri';
+import { AiOutlineCaretLeft } from 'react-icons/ai';
+import { useBusOccupied } from '@autobusal/hooks';
+import { Button } from '@autobusal/common';
+import Steps from '../Steps/Steps';
+import Loading from './Loading';
+import Passengers from './Passengers/Passengers';
+import checkAge from './checkAge';
+import { Title, Actions } from '../styles';
+import { RoutesSearchForm } from '@autobusal/routes-search/types';
+import { PersonData } from '@autobusal/providers/types/persons';
+import { FoundData } from '@autobusal/providers/types/routes';
+
+interface Props {
+  values?: PersonData
+  step1: RoutesSearchForm
+  step2: FoundData
+  step3?: FoundData
+  isPartner?: boolean
+  t: TFunction<'common'>
+  onSave: (data: PersonData) => void
+  onBack: (step: number) => void
+}
+
+const Step4 = ({ values, step1, step2, step3, isPartner, t, onSave, onBack }: Props): JSX.Element => {
+  const { register, handleSubmit, formState: { errors }, setValue, setError } = useForm<PersonData>();
+
+  const busFrom = useBusOccupied(step1.departure, step2.id);
+  const busTo = useBusOccupied(step1._return, step3?.id);
+
+  if (busFrom === undefined || busTo === undefined) {
+    return <Loading t={ t } />;
+  }
+
+  const onSubmit = (data: PersonData): void => {
+    // if all the ages are ok, we move forward
+    if (checkAge(step1, data, t)) {
+      onSave(data);
+    }
+  };
+
+  const onUpdate = (name: string, value: (string | number)): void => {
+    setValue(name, value);
+    setError(name, {});
+  };
+
+  const onSendForm = (): void => {
+    handleSubmit(onSubmit)();
+  };
+
+  return (
+    <>
+      <Title>
+        <HiUsers />
+        { t('routes_order.step4.title') }
+      </Title>
+
+      <Steps value={ 4 } />
+
+      <Passengers
+        values={ values }
+        step1={ step1 }
+        busFrom={ busFrom }
+        busTo={ busTo }
+        t={ t }
+        errors={ errors }
+        refs={ register }
+        onUpdate={ onUpdate }
+      />
+
+      <Actions>
+        { isPartner === undefined && (
+          <Button
+            type="button"
+            subtype="secondary"
+            text={ <><AiOutlineCaretLeft /> { t('routes_order.step4.back') }</> }
+            noMargin
+            onClick={ () => onBack(step1._return ? 3 : 2) }
+          />
+        ) }
+
+        <Button
+          type="button"
+          text={ <><RiShoppingCartLine /> { t('routes_order.step4.next') }</> }
+          noMargin
+          onClick={ onSendForm }
+        />
+      </Actions>
+    </>
+  );
+};
+
+export default Step4;

package/Step4/checkAge.ts

@@ -0,0 +1,48 @@
+import { TFunction } from 'i18next';
+import { error, differenceYears, createDate } from '@autobusal/utilities';
+import { PersonData } from '@autobusal/providers/types/persons';
+import { RoutesSearchForm } from '@autobusal/routes-search/types';
+
+const checkAge = (step1: RoutesSearchForm, data: PersonData, t: TFunction<'general'>): boolean => {
+  // check adults ages
+  for (let i = 1; i <= step1.adults; i++) {
+    const age = getAge(data[`adult${ i }_dob`]);
+
+    if (age < 18) {
+      error(t('routes_order.step4.errors.age'));
+      return false;
+    }
+  }
+
+  // check children ages
+  for (let i = 1; i <= step1.children; i++) {
+    const age = getAge(data[`child${ i }_dob`])
+
+    if (age < 3 || age > 17) {
+      error(t('routes_order.step4.errors.age'));
+      return false;
+    }
+  }
+
+  // check babies ages
+  for (let i = 1; i <= step1.babies; i++) {
+    const age = getAge(data[`baby${ i }_dob`]);
+
+    if (age > 2) {
+      error(t('routes_order.step4.errors.age'));
+      return false;
+    }
+  }
+
+  return true;
+};
+
+const getAge = (date: string | number): number => {
+  const age = differenceYears(
+    createDate(String(date))
+  );
+
+  return age;
+};
+
+export default checkAge;

package/Step5/Billing/Billing.tsx

@@ -0,0 +1,161 @@
+import { useState } from 'react';
+import { TFunction } from 'i18next';
+import { UseFormRegister, FieldErrors } from 'react-hook-form';
+import { RiPencilFill } from 'react-icons/ri';
+import { AiOutlineInfoCircle } from 'react-icons/ai';
+import { useCountries } from '@autobusal/hooks';
+import { Validate, Display } from '@autobusal/utilities';
+import Loading from './Loading';
+import { SubTitle } from '../../styles';
+import { Container, NoticeEmail } from './styles';
+import { BillingData } from '@autobusal/providers/types/persons';
+
+interface Props {
+  t: TFunction<'common'>
+  errors: FieldErrors
+  refs: UseFormRegister<BillingData>
+}
+
+const Billing = ({ errors, t, refs }: Props): JSX.Element => {
+  const [ company, setCompany ] = useState<boolean>(false);
+
+  const countries = useCountries('all');
+
+  if (countries.isLoading) {
+    return <Loading t={ t } />;
+  }
+
+  const items = countries.data?.map(item => (
+    <option key={ item.id } value={ item.id }>{ item.name }</option>
+  ));
+
+  const onAddCompany = (event: React.MouseEvent<HTMLInputElement>): void => {
+    setCompany((event.target as HTMLInputElement).checked);
+  }
+
+  return (
+    <Container className="box">
+      <SubTitle>
+        <RiPencilFill />
+        { t('routes_order.step5.billing.title') }
+      </SubTitle>
+
+      <div className="column">
+        <div className="row">
+          { t('routes_order.step5.billing.first_name') }
+
+          <input type="text" { ...refs('bill_fn', Validate('required|min_length:2|max_length:100', t)) } />
+
+          { Display(errors.bill_fn) }
+        </div>
+
+        <div className="row">
+          { t('routes_order.step5.billing.last_name') }
+
+          <input type="text" { ...refs('bill_ln', Validate('required|min_length:2|max_length:100', t)) } />
+
+          { Display(errors.bill_ln) }
+        </div>
+      </div>
+
+      <div className="column">
+        <div className="row">
+          { t('routes_order.step5.billing.email') }
+          
+          <input type="email" { ...refs('email', Validate('required|email|max_length:255', t)) } />
+
+          { Display(errors.email) }
+
+          <NoticeEmail>
+            <AiOutlineInfoCircle /> { t('routes_order.step5.billing.email_info') }
+          </NoticeEmail>
+        </div>
+
+        <div className="row">
+          { t('routes_order.step5.billing.phone') }
+
+          <input type="text" { ...refs('bill_phone', Validate('required|min_length:10|max_length:20', t)) } />
+
+          { Display(errors.bill_phone) }
+        </div>
+      </div>
+
+      <div className="row">
+        { t('routes_order.step5.billing.address') }
+
+        <textarea { ...refs('bill_address', Validate('required|min_length:2', t)) }></textarea>
+
+        { Display(errors.bill_address) }
+      </div>
+
+      <div className="column">
+        <div className="row">
+          { t('routes_order.step5.billing.city') }
+
+          <input type="text" { ...refs('bill_city', Validate('required|min_length:2|max_length:100', t)) } />
+
+          { Display(errors.bill_city) }
+        </div>
+
+        <div className="row">
+          { t('routes_order.step5.billing.country') }
+
+          <select { ...refs('bill_country', Validate('required|min:1', t)) }>
+            <option value={ 0 }>{ t('routes_order.step5.billing.country_choose') }</option>
+            { items }
+          </select>
+
+          { Display(errors.bill_country) }
+        </div>
+      </div>
+
+      <div className="row">
+        <label>
+          <input type="checkbox" defaultChecked={ false } onClick={ (event: React.MouseEvent<HTMLInputElement>) => onAddCompany(event) } /> { t('routes_order.step5.billing.ask_company') }
+        </label>
+      </div>
+
+      { company && (
+        <div className="column">
+          <div className="row">
+            { t('routes_order.step5.billing.company') }
+
+            <input type="text" { ...refs('bill_company') } />
+
+            { Display(errors.bill_company) }
+          </div>
+
+          <div className="row">
+            { t('routes_order.step5.billing.nipt') }
+
+            <input type="text" { ...refs('bill_nipt') } />
+
+            { Display(errors.bill_nipt) }
+          </div>
+        </div>
+      ) }
+
+      <div className="row">
+        { t('routes_order.step5.billing.comments') }
+
+        <textarea { ...refs('comments') }></textarea>
+      </div>
+
+      <div className="row row-nomargin">
+        <label className="single">
+          <input type="checkbox" value="1" { ...refs('terms', Validate('required', t)) } />&nbsp;
+
+          <span dangerouslySetInnerHTML={{
+            __html: t('routes_order.step5.billing.terms', {
+              terms: `<a href="/page/terms" target="_blank">${ t('routes_order.step5.billing.terms_name') }</a>`
+            })
+          }} />
+        </label>
+
+        { Display(errors.terms) }
+      </div>
+    </Container>
+  );
+};
+
+export default Billing;

package/Step5/Billing/Loading.tsx

@@ -0,0 +1,22 @@
+import { TFunction } from 'i18next';
+import { RiPencilFill } from 'react-icons/ri';
+import { Inline } from '@autobusal/common';
+import { SubTitle } from '../../styles';
+import { Container } from './styles';
+
+interface Props {
+  t: TFunction<'common'>
+}
+
+const Loading = ({ t }: Props): JSX.Element => (
+  <Container className="box">
+    <SubTitle>
+      <RiPencilFill />
+      { t('routes_order.step5.billing.title') }
+    </SubTitle>
+
+    <Inline text={ t('routes_order.step5.billing.loading') } />
+  </Container>
+);
+
+export default Loading;

package/Step5/Billing/styles.ts

@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  margin-top: 25px;
+`;
+
+export const NoticeEmail = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: ${ props => props.theme.size.xs };
+  color: ${ props => props.theme.font.info };
+`;