Account area

Part of @cobuntu/embed-react: headless, data via props, links through your router.

Three components for a member's account pages: their events, their ledger and their library. Each takes the payload of one me.* call as it comes back, so your page fetches on the server and passes the result down. See the Account area guide for the full page.

My events

<MyEvents
  events={await member.me.events()}
  eventHref={(e) => `/events/${e.slug ?? e.id}`}
  receiptHref={(e) => `/account/orders?txn=${e.transactionId}`}
  browseHref="/events"
/>

Upcoming and Past tabs, as in the community app. Each tab joins what the member goes to and what they host; an event that is both shows once, marked Hosting. Rows carry the date, time, and a status: Awaiting review for a place the host has not approved yet, Hosting or Hosted, Attended on past events, and Event cancelled. "View receipt" appears only when the event has a purchase.

Profile events

"use client";
<ProfileEvents
  events={rows}            // me.profile.events(), fetched on your server
  isOwner
  onOpen={(event, kind) => (kind === "draft" ? openDraftSheet(event) : openManageSheet(event))}
/>

The member's own profile Events tab: every event they host on a date timeline (newest day first, undated last), drafts mixed in. For the owner each card shows a listing-state chip, and a status filter appears once there is more than one state to choose from:

DRAFT here means listed nowhere (a finished event without a listing), not an unfinished one; only isDraft marks a wizard draft. Without isOwner the chips and the filter are withheld.

A card click calls onOpen(event, kind, state) with kind "draft" (offer Continue setup, to /events/new?draft=<id>, and Delete, through DELETE me/drafts/event/:id) or "event" (offer View and Manage). Modifier clicks follow the card's link instead: eventHref, by default the draft resume URL or /events/<slug or id>.

Ledger

"use client";
const [filters, setFilters] = useState(EMPTY_LEDGER_FILTERS);
const [offset, setOffset] = useState(0);
// fetch from your server route with toLedgerQuery(filters, { limit: 20, offset })
 
<Ledger
  ledger={ledger}
  filters={filters}
  onFiltersChange={(f) => { setFilters(f); setOffset(0); }}
  offset={offset}
  onOffsetChange={setOffset}
  invoiceHref={(e) => `/api/invoice/${e.saleId}`}
  receiptHref={(e) => `/api/receipt/${e.saleId}`}
/>

Summary tiles per currency (spent, refunded, earned, fees), the payout state (pending, ready, in the holding period), a type select, a date range select, a search over the rows on the page, and a table of entries. Each entry shows a signed amount, a status pill, the item, the buyer on a sale, the date, the payout date on a sale, the refund reason, and Invoice and Receipt links when the entry has them. The pager shows when you pass onOffsetChange.

toLedgerQuery(filters, { limit, offset, now? }) turns the filter state into me.ledger params: the range becomes from.

Library

<Library
  items={(await member.me.library()).items}
  itemHref={(i) => (i.product.sku ? `/shop/${i.product.sku}` : null)}
  onDownload={async (i, d) => {
    const { url } = await fetch(`/api/download/${i.saleId}/${d.attachmentId}`).then((r) => r.json());
    window.location.href = url;
  }}
  browseHref="/shop"
/>

A grid of owned items with image, type, creator, purchase date and downloads. LINK deliverables open directly; FILE downloads call onDownload, which goes through your server to me.purchaseDownload. A purchase awaiting the seller's approval shows dimmed with no downloads. Search, a type select and a status select appear once there is more than one item, and only when they would divide the list.

Account props

Helpers: mergeMyEvents(groups, tab), profileEventState(row), profileEventBucket(state), groupProfileEvents(rows), draftResumeHref(row), PROFILE_EVENT_BUCKETS, toLedgerQuery, ledgerEntryStatus(entry), EMPTY_LEDGER_FILTERS, libraryMatches(item, filters), libraryFacets(items), EMPTY_LIBRARY_FILTERS, and the default*Labels objects.

Class map

See the class map conventions.

My events

Profile events

Ledger

Library