ElvixLegalEntityPicker

"use client";

import {
  ElvixLegalEntityPicker,
  type LegalEntityRecord,
  useElvixLegalEntityGrant,
} from "@elvix.is/sdk/react";
import { useState } from "react";

export function InvoiceCompanyStep({ onContinue }: { onContinue: (entityId: string) => void }) {
  const [picked, setPicked] = useState<{ entity: LegalEntityRecord; granted: boolean } | null>(null);
  const grant = useElvixLegalEntityGrant();
  return (
    <div className="invoice-pane">
      <ElvixLegalEntityPicker
        card={false}
        types={["sole_prop", "company"]}
        selectedId={picked?.entity.id ?? null}
        onPick={(entity, { granted }) => setPicked({ entity, granted })}
      />
      {/* Your own Continue. A pre-selected default is not granted yet: grant it here. */}
      <button
        type="button"
        disabled={!picked}
        onClick={async () => {
          if (!picked) return;
          if (!picked.granted && !(await grant(picked.entity.id)).ok) return;
          onContinue(picked.entity.id); // send ONLY the id to your backend
        }}
      >
        Continue
      </button>
    </div>
  );
}

import { getElvixLegalEntity } from "@elvix.is/sdk/server";

// The browser sent only the id. Read the rest from elvix.
const result = await getElvixLegalEntity({
  apiKey: process.env.ELVIX_API_KEY!,   // a READ-ONLY key is enough
  applicationId: process.env.ELVIX_APP_ID!, // the internal id, not the clientId
  userId: session.sub,                  // the signed-in user's elvix id
  entityId,
  purpose: "invoicing",                 // or "payouts", whichever the user granted
});
if (!result.ok) {
  // "not_found": not granted for this purpose, revoked, deleted, another user's,
  // or the user left your app. "invalid_id": not an id (no request was made).
  throw new Error(`company not available: ${result.error}`);
}
const company = result.entity;
if (company.vatIdNameMatch === "mismatch") {
  // A real VAT ID under another company's name: do not issue a reverse-charge invoice.
}

curl "https://elvix.is/api/applications/$APP_ID/users/$USER_ID/legal-entities/$ENTITY_ID?purpose=invoicing" \
  -H "Authorization: Bearer $ELVIX_API_KEY"

# 200 { "success": true, "data": { "entity": { "purpose": "invoicing", "grantedAt", "updatedAt",
#   "id", "type", "legalName", "givenName", "familyName", "taxCountry", "taxId", "vatId",
#   "vatIdValidation", "vatIdValidatedAt", "vatIdValidatedName", "vatIdValidatedAddress",
#   "vatIdRequestId", "vatIdNameMatch", "vatIdScheme", "taxIdScheme", "registrationNumberScheme",
#   "registrationNumber", "registrationBody", "contactEmail",
#   "peppolId", "codiceDestinatario", "pecAddress", "leitwegId",
#   "addressLine1", "addressLine2", "addressPostalCode", "addressCity",
#   "addressRegionName", "addressRegionCode", "addressCountry", "addressCountryName", "addressFormatted" } } }
# ?purpose=payouts adds what the person saved of tradingName, dateOfBirth, placeOfBirth,
#   nationality, contactPhone, registeredSince (and an individual's taxId): a prefill
#   for your payment provider's own form (elvix collects no KYC)
# 404 not_found: one answer for every refusal, so ids cannot be probed

/* Any ancestor of the picker. Map elvix's variables onto your own tokens,
   and light / dark follows your theme by itself. */
.invoice-pane {
  --elvix-field: var(--fill);            /* text field fill */
  --elvix-field-border: transparent;     /* no outline at rest (the default) */
  --elvix-field-focus: var(--fill-focus); /* focused: a deeper tint, never an outline */
  --elvix-field-radius: 12px;
  --elvix-row: var(--fill);              /* a list row */
  --elvix-row-hover: var(--fill-strong);
  --elvix-picked: color-mix(in srgb, var(--accent) 10%, transparent);
  --elvix-picked-text: var(--accent);    /* the picked row's name */
  --elvix-radius: 12px;                  /* rows and cards */
  --elvix-fg-1: var(--ink);              /* text */
  --elvix-fg-3: var(--muted);            /* secondary text */
  --elvix-focus: var(--accent);          /* focus ring */
  --elvix-danger: var(--error);          /* a field's error outline */
  --elvix-icon: var(--accent);           /* the icons in their round bubbles */
  --elvix-icon-bg: var(--fill-strong);   /* the bubbles behind them */
  --elvix-key-hints: inline-flex;        /* show the "Enter" chip (off by default) */
  font-family: inherit;                  /* the SDK sets no font */
}