{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "bank-accounts",
  "type": "registry:block",
  "title": "Bank accounts block",
  "description": "The whitelisting surface withdrawals depend on: your company's own accounts (never third-party payees), seven account-type variants asking exactly the fields each requires, identifier re-entry against transcription slips, and verification status rendered verbatim.",
  "dependencies": [
    "@venlyfinance/react@^0.3.0",
    "@venlyfinance/sdk@^0.4.0",
    "@tanstack/react-query@^5.0.0"
  ],
  "registryDependencies": [
    "@venlyfinance/venly-tokens",
    "@venlyfinance/data-table",
    "@venlyfinance/status-pill"
  ],
  "files": [
    {
      "path": "registry/blocks/bank-accounts.tsx",
      "type": "registry:component",
      "target": "~/components/venly/blocks/bank-accounts.tsx",
      "content": "import { useMemo, useState, type CSSProperties, type ReactElement } from \"react\";\nimport type { FundflowComponents } from \"@venlyfinance/sdk\";\nimport {\n  useBankAccountConfig,\n  useCompanyBankAccounts,\n  useCreateCompanyBankAccount,\n} from \"@venlyfinance/react\";\nimport { DataTable, RowText, type DataTableColumn } from \"../components/data-table.js\";\nimport { StatusPill, type StatusIntent } from \"../components/status-pill.js\";\n\n/**\n * Bank accounts block – the whitelisting surface withdrawals depend on.\n *\n * What the API models, and therefore what this block renders: a company\n * whitelists its OWN bank accounts (the account holder's legal name, never\n * a third-party payee), each account is verified out-of-band before it can\n * receive withdrawals, and seven account-type variants carry different\n * identifier fields. The list schema carries no account identifier at all –\n * rows are identified by the label you give them; the full identifier lives\n * on the detail record only.\n *\n * Design contract encoded by this block:\n * - Verification status is word + glyph, rendered from the field verbatim:\n *   In review / Verified / Declined.\n * - The add form asks exactly the fields the chosen variant requires –\n *   nothing generic, nothing missing – and confirms the account identifier\n *   by re-entry (transcription risk is real; the API won't catch a typo'd\n *   IBAN that happens to be valid).\n * - The own-name constraint is stated at the field, not discovered at\n *   submit.\n */\n\ntype fundflow = FundflowComponents[\"schemas\"];\nexport type CompanyBankAccountListItem = fundflow[\"CompanyBankAccountListItem\"];\nexport type BankAccountType = NonNullable<CompanyBankAccountListItem[\"bankAccountType\"]>;\n\n// ── Status + label maps (field values verbatim → UI labels, once) ──────\n\nexport const BANK_ACCOUNT_STATUS_PILL: Record<string, { label: string; intent: StatusIntent }> = {\n  PENDING: { label: \"In review\", intent: \"pending\" },\n  VERIFIED: { label: \"Verified\", intent: \"positive\" },\n  DENIED: { label: \"Declined\", intent: \"negative\" },\n};\n\nconst RAIL_LABEL: Record<string, string> = {\n  ON_RAMP: \"Adding money\",\n  OFF_RAMP: \"Withdrawals\",\n  ON_AND_OFF_RAMP: \"Adding money + withdrawals\",\n};\n\nconst TYPE_LABEL: Record<string, string> = {\n  EUR_SEPA: \"EUR · SEPA\",\n  GBP_FPS: \"GBP · Faster Payments\",\n  GBP_CHAPS: \"GBP · CHAPS\",\n  USD_ACH: \"USD · ACH\",\n  USD_WIRE: \"USD · Wire\",\n  USD_SWIFT: \"USD · SWIFT\",\n  OTHER_SWIFT: \"SWIFT (other currency)\",\n};\n\n// ── Shared styling ─────────────────────────────────────────────────────\n\nconst inputStyle: CSSProperties = {\n  width: \"100%\",\n  boxSizing: \"border-box\",\n  border: \"var(--border-w-hairline) solid var(--border-strong)\",\n  borderRadius: \"var(--radius-control)\",\n  padding: \"var(--space-sm) var(--space-md)\",\n  fontSize: \"var(--font-size-body)\",\n  fontFamily: \"var(--font-family)\",\n  color: \"var(--text-primary)\",\n  background: \"var(--surface-raised)\",\n};\n\nconst labelStyle: CSSProperties = {\n  display: \"block\",\n  fontSize: \"var(--font-size-label)\",\n  color: \"var(--text-secondary)\",\n  marginBottom: \"var(--space-2xs)\",\n};\n\nconst helperStyle: CSSProperties = {\n  margin: \"0 0 var(--space-2xs)\",\n  fontSize: \"var(--font-size-micro)\",\n  color: \"var(--text-tertiary)\",\n};\n\nconst primaryButton: CSSProperties = {\n  border: \"none\",\n  background: \"var(--accent)\",\n  color: \"var(--accent-fg)\",\n  borderRadius: \"var(--radius-control)\",\n  padding: \"var(--space-sm) var(--space-lg)\",\n  fontSize: \"var(--font-size-body)\",\n  fontFamily: \"var(--font-family)\",\n  fontWeight: 500,\n  cursor: \"pointer\",\n};\n\nconst quietButton: CSSProperties = {\n  border: \"var(--border-w-hairline) solid var(--border-strong)\",\n  background: \"var(--surface-raised)\",\n  color: \"var(--text-primary)\",\n  borderRadius: \"var(--radius-control)\",\n  padding: \"var(--space-sm) var(--space-lg)\",\n  fontSize: \"var(--font-size-body)\",\n  fontFamily: \"var(--font-family)\",\n  cursor: \"pointer\",\n};\n\nfunction Field({\n  id,\n  label,\n  helper,\n  value,\n  onChange,\n  required = true,\n}: {\n  id: string;\n  label: string;\n  helper?: string;\n  value: string;\n  onChange: (v: string) => void;\n  required?: boolean;\n}): ReactElement {\n  return (\n    <div>\n      <label style={labelStyle} htmlFor={id}>\n        {label}\n        {required ? \"\" : \" (optional)\"}\n      </label>\n      {helper ? <p style={helperStyle}>{helper}</p> : null}\n      <input\n        id={id}\n        type=\"text\"\n        required={required}\n        style={inputStyle}\n        value={value}\n        onChange={(e) => onChange(e.target.value)}\n      />\n    </div>\n  );\n}\n\n// ── Per-variant field model (spec-exact) ───────────────────────────────\n\n/** The identifier field per variant – the one worth re-entering. */\nconst IDENTIFIER_FIELD: Record<string, { key: string; label: string }> = {\n  EUR_SEPA: { key: \"iban\", label: \"IBAN\" },\n  GBP_FPS: { key: \"accountNumber\", label: \"Account number\" },\n  GBP_CHAPS: { key: \"accountNumber\", label: \"Account number\" },\n  USD_ACH: { key: \"accountNumber\", label: \"Account number\" },\n  USD_WIRE: { key: \"accountNumber\", label: \"Account number\" },\n  USD_SWIFT: { key: \"accountNumber\", label: \"Account number\" },\n  // OTHER_SWIFT resolves dynamically: whichever of accountNumber/iban is filled.\n};\n\ninterface VariantField {\n  key: string;\n  label: string;\n  required: boolean;\n  helper?: string;\n}\n\n/** Variant-specific fields, exactly the ones the create schema declares. */\nconst VARIANT_FIELDS: Record<string, VariantField[]> = {\n  EUR_SEPA: [\n    { key: \"iban\", label: \"IBAN\", required: true },\n    { key: \"bic\", label: \"BIC\", required: false },\n  ],\n  GBP_FPS: [\n    { key: \"accountNumber\", label: \"Account number\", required: true },\n    { key: \"sortCode\", label: \"Sort code\", required: true },\n  ],\n  GBP_CHAPS: [\n    { key: \"accountNumber\", label: \"Account number\", required: true },\n    { key: \"sortCode\", label: \"Sort code\", required: true },\n  ],\n  USD_ACH: [\n    { key: \"accountNumber\", label: \"Account number\", required: true },\n    { key: \"routingNumber\", label: \"Routing number\", required: true },\n    { key: \"email\", label: \"Beneficiary email\", required: true },\n    { key: \"beneficiaryState\", label: \"State\", required: true },\n  ],\n  USD_WIRE: [\n    { key: \"accountNumber\", label: \"Account number\", required: true },\n    { key: \"routingNumber\", label: \"Routing number\", required: true },\n    { key: \"email\", label: \"Beneficiary email\", required: true },\n    { key: \"beneficiaryState\", label: \"State\", required: true },\n  ],\n  USD_SWIFT: [\n    { key: \"bic\", label: \"BIC\", required: true },\n    { key: \"accountNumber\", label: \"Account number\", required: true },\n    { key: \"bankStreetAddress\", label: \"Bank street address\", required: true },\n    { key: \"bankCity\", label: \"Bank city\", required: true },\n    { key: \"bankPostalCode\", label: \"Bank postal code\", required: true },\n    { key: \"beneficiaryState\", label: \"State\", required: true },\n  ],\n  OTHER_SWIFT: [\n    { key: \"currency\", label: \"Currency (three-letter code)\", required: true },\n    { key: \"bic\", label: \"BIC\", required: true },\n    {\n      key: \"accountNumber\",\n      label: \"Account number\",\n      required: false,\n      helper: \"Provide the account number or the IBAN below – one of the two is required.\",\n    },\n    {\n      key: \"iban\",\n      label: \"IBAN\",\n      required: false,\n      helper: \"Provide the IBAN or the account number above – one of the two is required.\",\n    },\n  ],\n};\n\n// ── Add form ───────────────────────────────────────────────────────────\n\nexport interface AddBankAccountFormProps {\n  onCreated: (account: { id?: string; name?: string }) => void;\n  onCancel?: () => void;\n  style?: CSSProperties;\n  className?: string;\n}\n\nexport function AddBankAccountForm({\n  onCreated,\n  onCancel,\n  style,\n  className,\n}: AddBankAccountFormProps): ReactElement {\n  const { data: config } = useBankAccountConfig();\n  const create = useCreateCompanyBankAccount();\n  const [accountType, setAccountType] = useState<string>(\"\");\n  const [values, setValues] = useState<Record<string, string>>({});\n  const [confirmIdentifier, setConfirmIdentifier] = useState(\"\");\n  const [error, setError] = useState<string | null>(null);\n\n  const enabledTypes = useMemo(\n    () => (config?.enabledAccountTypes ?? []).filter((t) => t.type),\n    [config],\n  );\n  const effectiveType = accountType || enabledTypes[0]?.type || \"\";\n  const identifier =\n    effectiveType === \"OTHER_SWIFT\"\n      ? values.iban && !values.accountNumber\n        ? { key: \"iban\", label: \"IBAN\" }\n        : values.accountNumber\n          ? { key: \"accountNumber\", label: \"Account number\" }\n          : undefined\n      : IDENTIFIER_FIELD[effectiveType];\n  const set = (key: string) => (v: string) => setValues((prev) => ({ ...prev, [key]: v }));\n\n  const submit = (): void => {\n    setError(null);\n    if (effectiveType === \"OTHER_SWIFT\" && !values.accountNumber && !values.iban) {\n      setError(\"Provide the account number or the IBAN – one of the two is required.\");\n      return;\n    }\n    if (identifier && (values[identifier.key] ?? \"\") !== confirmIdentifier) {\n      setError(\"These account numbers don't match.\");\n      return;\n    }\n    const body = {\n      bankAccountType: effectiveType,\n      name: values.name,\n      bankName: values.bankName,\n      companyName: values.companyName,\n      bankCountry: values.bankCountry,\n      beneficiaryAddressLine1: values.beneficiaryAddressLine1,\n      beneficiaryAddressLine2: values.beneficiaryAddressLine2 || undefined,\n      beneficiaryCity: values.beneficiaryCity,\n      beneficiaryPostalCode: values.beneficiaryPostalCode,\n      beneficiaryCountry: values.beneficiaryCountry,\n      supportedRampType: values.supportedRampType || \"OFF_RAMP\",\n      ...Object.fromEntries(\n        (VARIANT_FIELDS[effectiveType] ?? [])\n          .map((f) => [f.key, values[f.key]])\n          .filter(([, v]) => v !== undefined && v !== \"\"),\n      ),\n    };\n    create.mutate(body as Parameters<typeof create.mutate>[0], {\n      onError: (e) => setError(e.message),\n      onSuccess: (account) => onCreated(account as { id?: string; name?: string }),\n    });\n  };\n\n  return (\n    <form\n      className={className}\n      style={{\n        maxWidth: \"var(--form-max-width)\",\n        fontFamily: \"var(--font-family)\",\n        display: \"flex\",\n        flexDirection: \"column\",\n        gap: \"var(--space-lg)\",\n        ...style,\n      }}\n      onSubmit={(e) => {\n        e.preventDefault();\n        submit();\n      }}\n    >\n      <h2 style={{ margin: 0, fontSize: \"var(--font-size-value)\", fontWeight: 600, color: \"var(--text-primary)\" }}>\n        Add a bank account\n      </h2>\n\n      <div>\n        <label style={labelStyle} htmlFor=\"vf-ba-type\">\n          Account type\n        </label>\n        <select\n          id=\"vf-ba-type\"\n          style={{ ...inputStyle, cursor: \"pointer\" }}\n          value={effectiveType}\n          onChange={(e) => {\n            setAccountType(e.target.value);\n            setConfirmIdentifier(\"\");\n          }}\n        >\n          {enabledTypes.map((t) => (\n            <option key={t.type} value={t.type}>\n              {TYPE_LABEL[t.type ?? \"\"] ?? t.type} {t.description ? `– ${t.description}` : \"\"}\n            </option>\n          ))}\n        </select>\n      </div>\n\n      <Field id=\"vf-ba-name\" label=\"Label\" helper=\"How this account appears in your lists.\" value={values.name ?? \"\"} onChange={set(\"name\")} />\n      <Field\n        id=\"vf-ba-company\"\n        label=\"Account holder (your company's legal name)\"\n        helper=\"The account must be in your company's name – withdrawals to third parties aren't supported yet.\"\n        value={values.companyName ?? \"\"}\n        onChange={set(\"companyName\")}\n      />\n      <Field id=\"vf-ba-bank\" label=\"Bank name\" value={values.bankName ?? \"\"} onChange={set(\"bankName\")} />\n      <Field id=\"vf-ba-country\" label=\"Bank country (two-letter code)\" value={values.bankCountry ?? \"\"} onChange={set(\"bankCountry\")} />\n\n      {(VARIANT_FIELDS[effectiveType] ?? []).map((f) => (\n        <Field key={f.key} id={`vf-ba-${f.key}`} label={f.label} helper={f.helper} required={f.required} value={values[f.key] ?? \"\"} onChange={set(f.key)} />\n      ))}\n      {identifier ? (\n        <Field\n          id=\"vf-ba-confirm\"\n          label={`Re-enter ${identifier.label.toLowerCase()}`}\n          helper=\"Typed twice on purpose – a mistyped identifier sends money to the wrong place.\"\n          value={confirmIdentifier}\n          onChange={setConfirmIdentifier}\n        />\n      ) : null}\n\n      <h3 style={{ margin: 0, fontSize: \"var(--font-size-label)\", fontWeight: 600, color: \"var(--text-secondary)\", textTransform: \"uppercase\", letterSpacing: \"0.04em\" }}>\n        Beneficiary address\n      </h3>\n      <Field id=\"vf-ba-addr1\" label=\"Street address\" value={values.beneficiaryAddressLine1 ?? \"\"} onChange={set(\"beneficiaryAddressLine1\")} />\n      <div style={{ display: \"flex\", gap: \"var(--space-md)\" }}>\n        <div style={{ flex: 1 }}>\n          <Field id=\"vf-ba-postal\" label=\"Postal code\" value={values.beneficiaryPostalCode ?? \"\"} onChange={set(\"beneficiaryPostalCode\")} />\n        </div>\n        <div style={{ flex: 2 }}>\n          <Field id=\"vf-ba-city\" label=\"City\" value={values.beneficiaryCity ?? \"\"} onChange={set(\"beneficiaryCity\")} />\n        </div>\n      </div>\n      <Field id=\"vf-ba-bcountry\" label=\"Country (two-letter code)\" value={values.beneficiaryCountry ?? \"\"} onChange={set(\"beneficiaryCountry\")} />\n\n      <div>\n        <label style={labelStyle} htmlFor=\"vf-ba-rail\">\n          Used for\n        </label>\n        <select\n          id=\"vf-ba-rail\"\n          style={{ ...inputStyle, cursor: \"pointer\" }}\n          value={values.supportedRampType ?? \"OFF_RAMP\"}\n          onChange={(e) => set(\"supportedRampType\")(e.target.value)}\n        >\n          {Object.entries(RAIL_LABEL).map(([value, label]) => (\n            <option key={value} value={value}>\n              {label}\n            </option>\n          ))}\n        </select>\n      </div>\n\n      {error ? (\n        <p role=\"alert\" style={{ margin: 0, fontSize: \"var(--font-size-label)\", color: \"var(--state-danger-fg)\" }}>\n          {error}\n        </p>\n      ) : null}\n      <p style={{ margin: 0, fontSize: \"var(--font-size-label)\", color: \"var(--text-secondary)\" }}>\n        New accounts are verified before they can receive withdrawals.\n      </p>\n      <div style={{ display: \"flex\", gap: \"var(--space-sm)\" }}>\n        <button type=\"submit\" disabled={create.isPending} style={primaryButton}>\n          {create.isPending ? \"Adding…\" : \"Add bank account\"}\n        </button>\n        {onCancel ? (\n          <button type=\"button\" style={quietButton} onClick={onCancel}>\n            Cancel\n          </button>\n        ) : null}\n      </div>\n    </form>\n  );\n}\n\n// ── List ───────────────────────────────────────────────────────────────\n\nexport interface BankAccountsViewProps {\n  accounts: CompanyBankAccountListItem[];\n  onAdd?: () => void;\n  style?: CSSProperties;\n  className?: string;\n}\n\n/** Presentational half: the whitelist over already-loaded rows. */\nexport function BankAccountsView({ accounts, onAdd, style, className }: BankAccountsViewProps): ReactElement {\n  const columns: DataTableColumn<CompanyBankAccountListItem>[] = [\n    {\n      key: \"account\",\n      header: \"Account\",\n      cell: (a) => <RowText primary={a.name ?? \"—\"} secondary={a.bankName ?? undefined} />,\n    },\n    {\n      key: \"type\",\n      header: \"Type\",\n      cell: (a) => (\n        <span style={{ fontSize: \"var(--font-size-label)\", color: \"var(--text-secondary)\" }}>\n          {TYPE_LABEL[a.bankAccountType ?? \"\"] ?? a.bankAccountType ?? \"—\"}\n        </span>\n      ),\n    },\n    {\n      key: \"country\",\n      header: \"Country\",\n      cell: (a) => (\n        <span style={{ fontSize: \"var(--font-size-label)\", color: \"var(--text-secondary)\" }}>\n          {a.bankCountry ?? \"—\"}\n        </span>\n      ),\n    },\n    {\n      key: \"rail\",\n      header: \"Used for\",\n      cell: (a) => (\n        <span style={{ fontSize: \"var(--font-size-label)\", color: \"var(--text-secondary)\" }}>\n          {RAIL_LABEL[a.supportedRampType ?? \"\"] ?? a.supportedRampType ?? \"—\"}\n        </span>\n      ),\n    },\n    {\n      key: \"status\",\n      header: \"Status\",\n      cell: (a) => {\n        const pill = BANK_ACCOUNT_STATUS_PILL[a.verificationStatus ?? \"\"];\n        return pill ? <StatusPill {...pill} /> : <span style={{ color: \"var(--text-tertiary)\" }}>—</span>;\n      },\n    },\n  ];\n\n  return (\n    <section className={className} style={{ fontFamily: \"var(--font-family)\", ...style }}>\n      <div style={{ display: \"flex\", justifyContent: \"space-between\", alignItems: \"center\", marginBottom: \"var(--space-lg)\", gap: \"var(--space-lg)\" }}>\n        <h2 style={{ margin: 0, fontSize: \"var(--font-size-value)\", fontWeight: 600, color: \"var(--text-primary)\" }}>\n          Bank accounts\n        </h2>\n        {onAdd ? (\n          <button type=\"button\" style={primaryButton} onClick={onAdd}>\n            Add a bank account\n          </button>\n        ) : null}\n      </div>\n      {accounts.length === 0 ? (\n        <p style={{ margin: 0, color: \"var(--text-secondary)\", fontSize: \"var(--font-size-body)\" }}>\n          No bank accounts yet. Add one to withdraw funds.\n        </p>\n      ) : (\n        <div\n          style={{\n            background: \"var(--surface-raised)\",\n            border: \"var(--border-w-hairline) solid var(--border-hairline)\",\n            borderRadius: \"var(--radius-card)\",\n            overflow: \"hidden\",\n          }}\n        >\n          <DataTable columns={columns} rows={accounts} rowKey={(a) => a.id ?? a.name ?? \"\"} />\n        </div>\n      )}\n    </section>\n  );\n}\n\n/** Connected block: list + add-form toggle over the live whitelist. */\nexport function BankAccountsBlock({ style, className }: { style?: CSSProperties; className?: string }): ReactElement {\n  const { data, isPending } = useCompanyBankAccounts();\n  const [adding, setAdding] = useState(false);\n  const [announce, setAnnounce] = useState<string | null>(null);\n\n  if (isPending) {\n    return (\n      <section className={className} style={{ fontFamily: \"var(--font-family)\", ...style }}>\n        <p style={{ color: \"var(--text-tertiary)\", fontSize: \"var(--font-size-body)\" }}>Loading bank accounts…</p>\n      </section>\n    );\n  }\n\n  if (adding) {\n    return (\n      <AddBankAccountForm\n        className={className}\n        style={style}\n        onCancel={() => setAdding(false)}\n        onCreated={(account) => {\n          setAdding(false);\n          setAnnounce(`${account.name ?? \"Bank account\"} added – verification is in review.`);\n        }}\n      />\n    );\n  }\n\n  return (\n    <div>\n      {announce ? (\n        <p role=\"status\" style={{ margin: \"0 0 var(--space-md)\", fontFamily: \"var(--font-family)\", fontSize: \"var(--font-size-label)\", color: \"var(--text-primary)\" }}>\n          {announce}\n        </p>\n      ) : null}\n      <BankAccountsView className={className} style={style} accounts={data?.items ?? []} onAdd={() => setAdding(true)} />\n    </div>\n  );\n}\n"
    }
  ]
}