@autobusal/routes-order 1.0.0 → 1.1.0

package/Found/Booking/Booking.tsx

@@ -3,7 +3,7 @@ import { createDate } from '@autobusal/utilities';
 import { Container, About, LinkBooking } from './styles';
 import { RoutesSearchForm } from '@autobusal/routes-search/types';
 import { FoundData } from '@autobusal/providers/types/routes';
-import { GetSettings } from '@autobusal/providers/services';
+import { useGetSettings } from '@autobusal/providers/services';
 
 interface Props {
   data?: FoundData[]
@@ -12,7 +12,7 @@ interface Props {
 }
 
 const Booking = ({ data, step1, t }: Props): (JSX.Element | null) => {
-  const { data: settings } = GetSettings();
+  const { data: settings } = useGetSettings();
 
   if (data === undefined || data?.length === 0) {
     return null;

package/Found/Dates/Dates.tsx

@@ -7,7 +7,7 @@ import Loading from './Loading';
 import { Container, Inner, ButtonDay } from './styles';
 import { RoutesSearchForm } from '@autobusal/routes-search/types';
 import { FoundDay } from '../../types';
-import { GetDates } from '../../services';
+import { useGetDates } from '../../services';
 
 interface Props {
   type: 'departure' | '_return'
@@ -19,7 +19,7 @@ interface Props {
 const Dates = ({ type, step1, t, onSearch }: Props): JSX.Element => {
   const [number, setNumber] = useState<number>(0);
 
-  const { data, isLoading } = GetDates(step1, type, number);
+  const { data, isLoading } = useGetDates(step1, type, number);
 
   if (isLoading) {
     return <Loading t={ t } />;

package/Step1/Step1.tsx

@@ -7,7 +7,7 @@ import prepare from './prepare';
 import Steps from '../Steps/Steps';
 import { Title } from '../styles';
 import { RoutesSearchForm } from '@autobusal/routes-search/types';
-import { GetSettings } from '@autobusal/providers/services';
+import { useGetSettings } from '@autobusal/providers/services';
 
 interface Props {
   value?: RoutesSearchForm
@@ -21,7 +21,7 @@ const Step1 = ({ value, redirected, t, onSave }: Props): JSX.Element => {
 
   const [ searchParams ] = useSearchParams();
 
-  const { data } = GetSettings();
+  const { data } = useGetSettings();
 
   const prepared = prepare(value, params, data.preferences.defaultLocations);
 

package/Step2.tsx

@@ -7,7 +7,7 @@ import Found from './Found/Found';
 import { Title, Actions } from './styles';
 import { RoutesSearchForm } from '@autobusal/routes-search/types';
 import { FoundData } from '@autobusal/providers/types/routes';
-import { GetDepartures } from './services';
+import { useGetDepartures } from './services';
 
 interface Props {
   step1: RoutesSearchForm
@@ -18,7 +18,7 @@ interface Props {
 }
 
 const Step2 = ({ step1, t, onSearch, onSave, onBack }: Props): JSX.Element => {
-  const { data, isFetching } = GetDepartures(step1);
+  const { data, isFetching } = useGetDepartures(step1);
 
   return (
     <>

package/Step3.tsx

@@ -7,7 +7,7 @@ import Found from './Found/Found';
 import { Title, Actions } from './styles';
 import { RoutesSearchForm } from '@autobusal/routes-search/types';
 import { FoundData } from '@autobusal/providers/types/routes';
-import { GetReturns } from './services';
+import { useGetReturns } from './services';
 
 interface Props {
   step1: RoutesSearchForm
@@ -19,7 +19,7 @@ interface Props {
 }
 
 const Step3 = ({ step1, step2, t, onSearch, onSave, onBack }: Props): JSX.Element => {
-  const { data, isFetching } = GetReturns(step1, step2);
+  const { data, isFetching } = useGetReturns(step1, step2);
 
   return (
     <>

package/Step5/Coupons/Coupons.tsx

@@ -8,7 +8,7 @@ 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';
+import { useGetCoupon } from '../../services';
 
 interface Props {
   current?: CouponData
@@ -21,7 +21,7 @@ interface Props {
 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 { mutate: SearchCoupons, isPending } = useGetCoupon(step2.id, total.value);
 
   const onSubmit = (data: CouponForm): void => {
     SearchCoupons(data, {

package/Step5/Payments/Payments.tsx

@@ -6,7 +6,7 @@ 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';
+import { useGetPayments } from '../../services';
 
 interface Props {
   selected: string
@@ -16,7 +16,7 @@ interface Props {
 }
 
 const Payments = ({ selected, isPartner, t, onChange }: Props): JSX.Element => {
-  const { data, isLoading, isSuccess } = GetPayments();
+  const { data, isLoading, isSuccess } = useGetPayments();
 
   useEffect(() => {
     if (isSuccess) {
@@ -73,6 +73,13 @@ const Payments = ({ selected, isPartner, t, onChange }: Props): JSX.Element => {
               { t('routes_order.step5.actions.card') }
             </ButtonPayment>
           ) }
+
+          { (data?.stripe || isPartner) && (
+            <ButtonPayment type="button" $selected={ selected === 'stripe' } onClick={ () => onChange('stripe') }>
+              <AiOutlineCreditCard />
+              { t('routes_order.step5.actions.card') }
+            </ButtonPayment>
+          ) }
         </ContainerPayments>
       </Container>
     </>

package/Step5/Step5.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useCallback, useState } from 'react';
 import { TFunction } from 'i18next';
 import { useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
@@ -19,7 +19,7 @@ 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';
+import { usePostOrder } from '../services';
 
 interface Props {
   step1: RoutesSearchForm
@@ -44,7 +44,7 @@ const Step5 = ({ step1, step2, step3, step4, isPartner, t, onBack }: Props): JSX
 
   const { register, handleSubmit, formState: { errors } } = useForm<BillingData>();
 
-  const { mutate: OrderSend, isPending } = PostOrder(step1, step2, step3, step4, coupon, action);
+  const { mutate: OrderSend, isPending } = usePostOrder(step1, step2, step3, step4, coupon, action);
 
   const onApplyCoupon = (data: CouponData): void => {
     setTotal(
@@ -54,9 +54,9 @@ const Step5 = ({ step1, step2, step3, step4, isPartner, t, onBack }: Props): JSX
     setCoupon(data);
   };
 
-  const onAction = (action: string): void => {
+  const onAction = useCallback((action: string): void => {
     setAction(action);
-  };
+  }, []);
 
   const onSendForm = async (): Promise<void> => {
     await handleSubmit(onSubmit)();

package/package.json

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

package/services.ts

@@ -6,7 +6,7 @@ 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[]> => (
+export const useGetDepartures = (data: RoutesSearchForm): UseQueryResult<FoundData[]> => (
   useQuery({
     queryKey: ['search-routes-step2', { data }],
     queryFn: async () => (
@@ -21,7 +21,7 @@ export const GetDepartures = (data: RoutesSearchForm): UseQueryResult<FoundData[
   })
 );
 
-export const GetReturns = (data: RoutesSearchForm, departure: FoundData): UseQueryResult<FoundData[]> => (
+export const useGetReturns = (data: RoutesSearchForm, departure: FoundData): UseQueryResult<FoundData[]> => (
   useQuery({
     queryKey: ['search-routes-step3', { data }],
     queryFn: async () => (
@@ -39,7 +39,7 @@ export const GetReturns = (data: RoutesSearchForm, departure: FoundData): UseQue
   })
 );
 
-export const GetDates = (step1: RoutesSearchForm, type: ('departure' | '_return'), number: number): UseQueryResult<FoundDay[]> => {
+export const useGetDates = (step1: RoutesSearchForm, type: ('departure' | '_return'), number: number): UseQueryResult<FoundDay[]> => {
   const step = { ...step1 };
 
   // we switch the locations and dates if a return trip
@@ -68,7 +68,7 @@ export const GetDates = (step1: RoutesSearchForm, type: ('departure' | '_return'
   })
 };
 
-export const PostOrder = (
+export const usePostOrder = (
   step1: RoutesSearchForm,
   step2: FoundData,
   step3: (FoundData | undefined),
@@ -118,7 +118,7 @@ export const PostOrder = (
   })
 );
 
-export const GetCoupon = (routeId: number, total: number): UseMutationResult<CouponData, Error, CouponForm, unknown> => (
+export const useGetCoupon = (routeId: number, total: number): UseMutationResult<CouponData, Error, CouponForm, unknown> => (
   useMutation({
     mutationKey: ['search-coupon'],
     mutationFn: async (data: CouponForm) => (
@@ -135,7 +135,7 @@ export const GetCoupon = (routeId: number, total: number): UseMutationResult<Cou
   })
 );
 
-export const GetPayments = (): UseQueryResult<ActionData> => (
+export const useGetPayments = (): UseQueryResult<ActionData> => (
   useQuery({
     queryKey: ['allowed-funds'],
     queryFn: async () => (