5. Pedido comprado

const { order, paidTickets, paymentIntent } = await sdk.orders.get(orderId);

import { useOrder } from '@meaple-com/react-query';
 
function OrderPage({ orderId }: { orderId: string }) {
  const { data, isPending, error } = useOrder(orderId, {
    enabled: !!orderId,
  });
 
  if (isPending) return <div>Carregando...</div>;
  if (error) return <div>Erro ao carregar pedido</div>;
  if (!data) return <div>Pedido não encontrado</div>;
 
  const { order, paidTickets, paymentIntent } = data;
 
  return (
    <div>
      <h1>Pedido #{order.id}</h1>
      <p>Status: {order.status}</p>
      <p>Total: R$ {order.totalPrice?.toFixed(2)}</p>
      <h2>Ingressos</h2>
      {paidTickets?.map(ticket => (
        <div key={ticket.id}>
          <p>{ticket.ticket.name}</p>
          <img src={ticket.qrCodeDataUrl} alt="QR Code" />
        </div>
      ))}
    </div>
  );
}

import { GetOrder } from '@meaple-com/react-headless-components';
 
function OrderPage({ orderId }: { orderId: string }) {
  return (
    <GetOrder
      orderId={orderId}
      options={{ enabled: !!orderId, refetchOnWindowFocus: true }}
    >
      {({ order, paidTickets, paymentIntent, isPending, error }) => {
        if (isPending) return <div>Carregando...</div>;
        if (error) return <div>Erro ao carregar pedido</div>;
        if (!paidTickets) return <div>Pedido não encontrado</div>;
 
        return (
          <div>
            <h1>{paidTickets[0]?.ticket.event.name} - Pedido #{orderId}</h1>
            <p>{paidTickets.length} {paidTickets.length === 1 ? 'item' : 'itens'}</p>
            {paidTickets.map(userTicket => (
              <div key={userTicket.id}>
                <p>{userTicket.ticket.name}</p>
                <img src={userTicket.qrCodeDataUrl} alt="QR Code" />
              </div>
            ))}
          </div>
        );
      }}
    </GetOrder>
  );
}