2. Detalhes do evento e carrinho

const event = await sdk.events.getBySlug('meu-evento');

// Ingressos
const { event, tickets, groups } = await sdk.events.getTickets(eventId);
 
// Produtos
const { event, products } = await sdk.events.getProducts(eventId);

import { useEvent } from '@meaple-com/react-query';
 
function EventPage({ eventSlug }: { eventSlug: string }) {
  const { data: event, isPending, error } = useEvent(
    { eventSlug },
    { enabled: !!eventSlug }
  );
 
  if (isPending) return <div>Carregando...</div>;
  if (!event) return <div>Evento não encontrado</div>;
 
  return <div>{event.name}</div>;
}

import { useEventTickets, useEventProducts } from '@meaple-com/react-query';
 
function EventContent({ eventId }: { eventId: string }) {
  const { data: ticketsData } = useEventTickets(eventId);
  const { data: productsData } = useEventProducts(eventId);
 
  const groups = ticketsData?.groups ?? [];
  const products = productsData?.products ?? [];
  // ...
}

import { Cart, CartProvider, useCart } from '@meaple-com/react-headless-components';
import { usePlatformFee } from '@meaple-com/react-query';
 
function CartSummary({ platformFee }) {
  const cart = useCart();
  return (
    <Cart platformFee={platformFee} feeType="DIGITAL">
      {({ totalAmount, rawPrice, totalDiscount, totalFee, totalPrice, items, clearCart }) => (
        <div>
          <p>Itens: {totalAmount}</p>
          <p>Subtotal: R$ {rawPrice.toFixed(2)}</p>
          <p>Taxa: R$ {totalFee.toFixed(2)}</p>
          <p>Desconto: R$ {totalDiscount.toFixed(2)}</p>
          <p className="font-bold">Total: R$ {totalPrice.toFixed(2)}</p>
          {items.map(item => (
            <div key={item.id}>{item.name} - {item.amount}x R$ {item.price.toFixed(2)}</div>
          ))}
          <button onClick={clearCart}>Limpar carrinho</button>
        </div>
      )}
    </Cart>
  );
}

import {
  ListEventTickets,
  ListEventProducts,
  TicketQuantityController,
  CartProvider,
  Cart,
} from '@meaple-com/react-headless-components';
 
function EventPage({ eventId }: { eventId: string }) {
  return (
    <CartProvider initialCoupon={null}>
      <ListEventTickets eventId={eventId}>
        {({ groups, tickets, fee, isPending }) => (
          <div>
            {groups.map(group => (
              <div key={group.id}>
                <h3>{group.name}</h3>
                {group.tickets.map(ticket => (
                  <TicketQuantityController key={ticket.id} ticket={ticket}>
                    {({ amount, increment, decrement, isMaxLimitReached }) => (
                      <div>
                        <span>{ticket.name} - R$ {ticket.price}</span>
                        <button onClick={decrement}>-</button>
                        <span>{amount}</span>
                        <button onClick={increment} disabled={isMaxLimitReached}>+</button>
                      </div>
                    )}
                  </TicketQuantityController>
                ))}
              </div>
            ))}
          </div>
        )}
      </ListEventTickets>
 
      <ListEventProducts eventId={eventId}>
        {({ products, fee }) => (
          <div>
            {products.map(product => (
              <TicketQuantityController key={product.id} ticket={product}>
                {({ amount, increment, decrement }) => (
                  <div>
                    <span>{product.name} - R$ {product.price}</span>
                    <button onClick={decrement}>-</button>
                    <span>{amount}</span>
                    <button onClick={increment}>+</button>
                  </div>
                )}
              </TicketQuantityController>
            ))}
          </div>
        )}
      </ListEventProducts>
 
      <Cart feeType="DIGITAL">
        {({ totalPrice, items, clearCart }) => (
          <div>
            <p>Total: R$ {totalPrice.toFixed(2)}</p>
            <button onClick={clearCart}>Limpar carrinho</button>
          </div>
        )}
      </Cart>
    </CartProvider>
  );
}