Credits & wallets

import { useCreditAccounts } from '@unitpay/react';

export default function Wallets() {
  const { accounts, isLoading, error } = useCreditAccounts();

  if (isLoading) return <p>Loading wallets…</p>;
  if (error) return <p>Failed to load wallets.</p>;
  if (accounts.length === 0) return <p>No credit wallets yet.</p>;

  return (
    <ul>
      {accounts.map((acct) => {
        const denom = acct.currency?.denomination ?? 'unit';
        const label =
          denom === 'unit'
            ? `${acct.balance.toLocaleString()} credits`
            : `${(acct.balance / 10 ** (acct.currency?.minorUnitScale ?? 2)).toFixed(
                acct.currency?.minorUnitScale ?? 2,
              )} ${denom.toUpperCase()}`;
        return (
          <li key={acct.id}>
            {acct.currency?.name ?? acct.creditCurrencyId} — {label} ({acct.status})
          </li>
        );
      })}
    </ul>
  );
}

import { useCreditAccounts, useCreditCurrencies } from '@unitpay/react';

export default function FundableWallets() {
  const { accounts } = useCreditAccounts();
  const { currencies, isLoading } = useCreditCurrencies();

  if (isLoading) return <p>Loading…</p>;

  const available = currencies.filter(
    (c) => !accounts.some((a) => a.creditCurrencyId === c.id),
  );

  return (
    <ul>
      {available.map((c) => (
        <li key={c.id}>
          {c.name} — {c.denomination === 'unit' ? 'credits' : c.denomination.toUpperCase()}
        </li>
      ))}
    </ul>
  );
}

import { useTopUp } from '@unitpay/react';

export default function TopUpButton({ creditCurrencyId }: { creditCurrencyId: string }) {
  const { topUp, isPending } = useTopUp({
    onChargedInline: () => alert('Wallet topped up!'),
    onInvoiceAdded: ({ lineAmount }) =>
      alert(`Added ${lineAmount} to your next invoice.`),
    onRequiresForm: ({ client }) => {
      // mount <PaymentForm clientSecret={client.token} … />
    },
  });

  return (
    <button
      onClick={() => topUp({ creditCurrencyId, amountCents: 1000 })}
      disabled={isPending}
    >
      {isPending ? 'Processing…' : 'Add 1,000 credits'}
    </button>
  );
}

import { useBuyCreditPackage } from '@unitpay/react';

export default function BuyPackageButton({ creditPackageId }: { creditPackageId: string }) {
  const { buyCreditPackage, isPending } = useBuyCreditPackage({
    onChargedInline: () => alert('Package purchased!'),
    onInvoiceAdded: ({ lineAmount }) =>
      alert(`Added ${lineAmount} to your next invoice.`),
    onRequiresForm: ({ client }) => {
      // mount <PaymentForm clientSecret={client.token} … />
    },
  });

  return (
    <button onClick={() => buyCreditPackage({ creditPackageId })} disabled={isPending}>
      {isPending ? 'Processing…' : 'Buy credit pack'}
    </button>
  );
}

import { useAutoTopUp } from '@unitpay/react';

export default function AutoTopUpToggle({ creditCurrencyId }: { creditCurrencyId: string }) {
  const { rule, denomination, set, disable, isMutating } = useAutoTopUp(creditCurrencyId);

  const enable = () =>
    denomination === 'unit'
      ? set({ mode: 'package', creditPackageId: 'cpkg_123', threshold: 1000 })
      : set({ mode: 'amount', topupAmount: 2000, threshold: 1000, monthlyChargeLimit: 50000 });

  return rule?.enabled ? (
    <button onClick={() => disable()} disabled={isMutating}>
      Disable auto-topup
    </button>
  ) : (
    <button onClick={enable} disabled={isMutating}>
      Enable auto-topup
    </button>
  );
}

import { useTopupHistory } from '@unitpay/react';

export default function TopUpHistory({ currencyId }: { currencyId: string }) {
  const { attempts, isLoading, error } = useTopupHistory({ currencyId, limit: 20 });

  if (isLoading) return <p>Loading history…</p>;
  if (error) return <p>Failed to load history.</p>;
  if (attempts.length === 0) return <p>No top-up attempts yet.</p>;

  return (
    <ul>
      {attempts.map((a) => (
        <li key={a.id}>
          {a.triggerSource} · {a.status} · {a.chargeAmount ?? a.amount ?? '—'}
          {a.errorMessage ? ` — ${a.errorMessage}` : ''}
        </li>
      ))}
    </ul>
  );
}

import { useCreditLedger } from '@unitpay/react';

export default function LedgerDrawer({ creditCurrencyId }: { creditCurrencyId: string }) {
  const { entries, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading, error } =
    useCreditLedger({ creditCurrencyId, limit: 25 });

  if (isLoading) return <p>Loading ledger…</p>;
  if (error) return <p>Failed to load ledger.</p>;

  return (
    <div>
      <ul>
        {entries.map((e) => (
          <li key={e.id}>
            {e.type === 'CREDIT' ? '+' : '-'}
            {e.amount} · {e.reason} · balance {e.balanceAfter}
          </li>
        ))}
      </ul>
      {hasNextPage && (
        <button onClick={() => fetchNextPage()} disabled={isFetchingNextPage}>
          {isFetchingNextPage ? 'Loading…' : 'Load more'}
        </button>
      )}
    </div>
  );
}