Orders Hooks

import { useCreateOrder } from '@meaple/react-query'
 
function CheckoutButton() {
  const createOrder = useCreateOrder()
 
  const handleCheckout = async () => {
    try {
      const order = await createOrder.mutateAsync({
        eventId: 'event-123',
        tickets: [
          { ticketId: 'ticket-1', quantity: 2 }
        ],
        couponCode: 'SUMMER2024'
      })
 
      console.log('Order created:', order.id)
      router.push(`/orders/${order.id}`)
    } catch (error) {
      console.error('Order failed:', error)
    }
  }
 
  return (
    <button
      onClick={handleCheckout}
      disabled={createOrder.isPending}
    >
      {createOrder.isPending ? 'Processing...' : 'Complete Purchase'}
    </button>
  )
}

interface CreateOrderData {
  eventId: string;
  tickets: Array<{
    ticketId: string;
    quantity: number;
  }>;
  couponCode?: string;
  paymentMethod?: string;
  billingAddress?: Address;
}

import { useForm } from 'react-hook-form'
import { useCreateOrder } from '@meaple/react-query'
 
function CheckoutForm() {
  const { register, handleSubmit } = useForm()
  const createOrder = useCreateOrder()
 
  const onSubmit = async (data) => {
    await createOrder.mutateAsync(data)
  }
 
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('eventId')} />
      <input {...register('couponCode')} />
 
      <button type="submit" disabled={createOrder.isPending}>
        Create Order
      </button>
 
      {createOrder.isError && (
        <div>Error: {createOrder.error.message}</div>
      )}
    </form>
  )
}

const createOrder = useCreateOrder({
  onMutate: async newOrder => {
    await queryClient.cancelQueries({ queryKey: ['orders'] });
 
    const previousOrders = queryClient.getQueryData(['orders']);
 
    queryClient.setQueryData(['orders'], old => [...old, newOrder]);
 
    return { previousOrders };
  },
  onError: (err, newOrder, context) => {
    queryClient.setQueryData(['orders'], context.previousOrders);
  },
  onSuccess: () => {
    queryClient.invalidateQueries({ queryKey: ['orders'] });
  },
});

const createOrder = useCreateOrder({
  onSuccess: order => {
    toast.success('Order created successfully!');
    router.push(`/orders/${order.id}`);
  },
  onError: error => {
    toast.error(`Failed to create order: ${error.message}`);
  },
});