Events (Eventos)

Componentes para listar eventos, ingressos, produtos e categorias.

ListEvents

Lista eventos. O canal é identificado pelo header X-Channel-Id do SDK; use params.channelSlugs para filtrar por um ou mais canais.


import { ListEvents } from '@meaple-com/react-headless-components';
 
function EventsList() {
  return (
    <ListEvents
      params={{
        orderBy: 'START_DATE',
        limit: 20,
        q: 'busca',
        categoryIds: ['cat-1'],
        priority: 0,
      }}
    >
      {({ events, isPending, error }) => {
        if (isPending) return <div>Carregando...</div>;
        if (error) return <div>Erro: {error.message}</div>;
 
        return (
          <div>
            {events.map(event => (
              <div key={event.id}>{event.name}</div>
            ))}
          </div>
        );
      }}
    </ListEvents>
  );
}

Props:
- params?: FindEventsParams – filtros e paginação (todos opcionais):
  - priority?: number – prioridade do evento. Deve ser 0 para que os eventos carreguem.
  - orderBy?: 'START_DATE' | 'END_DATE' | 'MAX_PRICE' | 'MIN_PRICE' – ordenação.
  - channelSlugs?: string[] – slugs dos canais (se omitido, usa o canal do SDK).
  - limit?: number – quantidade por página.
  - cursor?: string – cursor para próxima página.
  - q?: string – busca por texto.
  - categoryIds?: string[] – IDs de categorias.
  - enabled?: boolean – se a query deve rodar.

Render props:

events: FindEventItemProps[] – eventos retornados pela listagem.
isPending: boolean – estado de carregamento.
error?: Error – erro da requisição (se houver).

Método Core: events.find — veja o exemplo de resposta no Core.

ListEventTickets

Lista ingressos de um evento.


import { ListEventTickets } from '@meaple-com/react-headless-components';
 
function TicketsList({ eventId }: { eventId: string }) {
  return (
    <ListEventTickets eventId={eventId}>
      {({ tickets, groups, fee, isPending, error }) => {
        if (isPending) return <div>Carregando...</div>;
        if (error) return <div>Erro</div>;
 
        return (
          <div>
            {groups.map(group => (
              <div key={group.id}>
                <h3>{group.name}</h3>
                {group.tickets.map(ticket => (
                  <div key={ticket.id}>
                    {ticket.name} - R$ {ticket.price}
                    {fee > 0 && (
                      <> + R$ {(ticket.price * fee).toFixed(2)} (taxa)</>
                    )}
                  </div>
                ))}
              </div>
            ))}
          </div>
        );
      }}
    </ListEventTickets>
  );
}

Props:
- eventId: string – ID do evento.

Render props:

tickets: FindEventTicketItemProps[] – ingressos do evento.
groups: FindEventTicketGroupProps[] – grupos de ingressos.
fee: number – taxa da plataforma (0 se não carregada). Buscada automaticamente via usePlatformFee.
isPending: boolean – estado de carregamento.
error?: Error – erro da requisição (se houver).

Método Core: events.getTickets — veja o exemplo de resposta no Core.

ListEventProducts

Lista produtos de um evento.


import { ListEventProducts } from '@meaple-com/react-headless-components';
 
function ProductsList({ eventId }: { eventId: string }) {
  return (
    <ListEventProducts eventId={eventId}>
      {({ products, fee, isPending, error }) => {
        if (isPending) return <div>Carregando...</div>;
        if (error) return <div>Erro</div>;
 
        return (
          <div>
            {products.map(product => (
              <div key={product.id}>
                {product.name} - R$ {product.price}
                {fee > 0 && (
                  <> + R$ {(product.price * fee).toFixed(2)} (taxa)</>
                )}
              </div>
            ))}
          </div>
        );
      }}
    </ListEventProducts>
  );
}

Props:
- eventId: string – ID do evento.

Render props:

products: FindEventProductItemProps[] – produtos do evento.
fee: number – taxa da plataforma (0 se não carregada). Buscada automaticamente via usePlatformFee.
isPending: boolean – estado de carregamento.
error?: Error – erro da requisição (se houver).

Método Core: events.getProducts — veja o exemplo de resposta no Core.

Lista categorias.


import { ListCategories } from '@meaple-com/react-headless-components';
 
function CategoriesList() {
  return (
    <ListCategories>
      {({ categories, isPending, error }) => {
        if (isPending) return <div>Carregando...</div>;
        if (error) return <div>Erro</div>;
 
        return (
          <div>
            {categories.map(category => (
              <div key={category.id}>{category.name}</div>
            ))}
          </div>
        );
      }}
    </ListCategories>
  );
}

Props:
- (sem props obrigatórias).

Render props:

categories: CategoryProps[] – categorias disponíveis.
isPending: boolean – estado de carregamento.
error?: Error – erro da requisição (se houver).

Método Core: categories.find — veja o exemplo de resposta no Core.