/* global React */
/* Flex Business Cards — adaptive port of v0/screens-cards.jsx. */
const { useState, useEffect, useRef } = React;
const Icon = window.OBIcon;
const Data = window.OBData;
const { Page, Sheet, Pill, useIsDesktop, DemoCta } = window.OBPrimitives;
const CARD_BG = "../v0/design-system/assets/card-bg.svg";
const MOCK_CARDHOLDER = "Amara Nwosu";
const BILLING_ADDRESS = { street: "14 Admiralty Way", city: "Lekki", state: "Lagos", zip: "106104", country: "Nigeria" };
const CARD_CREATION_FEE = 5;
const CARD_FUNDING_FEE_PCT = 0.005;
const NAME_SUGGESTIONS = ["Marketing", "Operations", "Travel", "Software", "Ads & media", "Office supplies"];
const fmtBal = (n) => n.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
const CARD_TXNS = [
{ id: "CTX-W01", date: "Jun 28, 14:10", party: "Withdrawal to USD wallet", type: "withdrawal", amount: "150.00", ccy: "USD", status: "COMPLETED", pillTone: "success", ref: "TXN-W01-4821" },
{ id: "CTX-001", date: "Jun 25, 14:32", party: "Figma Inc.", type: "purchase", amount: "45.00", ccy: "USD", status: "COMPLETED", pillTone: "success", category: "Software & SaaS", merchantCountry: "United States", ref: "TXN-001-4821" },
{ id: "CTX-002", date: "Jun 24, 09:17", party: "Google Workspace", type: "purchase", amount: "138.00", ccy: "USD", status: "COMPLETED", pillTone: "success", category: "Software & SaaS", merchantCountry: "United States", ref: "TXN-002-4821" },
{ id: "CTX-003", date: "Jun 22, 11:05", party: "Amazon Web Services", type: "purchase", amount: "1,247.83", ccy: "USD", status: "COMPLETED", pillTone: "success", category: "Cloud Infrastructure", merchantCountry: "United States", ref: "TXN-003-4821" },
{ id: "CTX-004", date: "Jun 20, 16:41", party: "Notion Labs", type: "purchase", amount: "96.00", ccy: "USD", fxAmount: "88.50", fxCcy: "EUR", fxRate: "1 EUR = 1.085 USD", fxFee: "1.44", status: "COMPLETED", pillTone: "success", category: "Productivity", merchantCountry: "United States", ref: "TXN-004-4821" },
{ id: "CTX-005", date: "Jun 18, 08:55", party: "Linear Inc.", type: "purchase", amount: "80.00", ccy: "USD", fxAmount: "63.50", fxCcy: "GBP", fxRate: "1 GBP = 1.260 USD", fxFee: "1.20", status: "PENDING", pillTone: "warn", category: "Software & SaaS", merchantCountry: "United Kingdom", ref: "TXN-005-4821" },
{ id: "CTX-006", date: "Jun 15, 13:20", party: "Vercel Inc.", type: "purchase", amount: "240.00", ccy: "USD", status: "COMPLETED", pillTone: "success", category: "Cloud Infrastructure", merchantCountry: "United States", ref: "TXN-006-4821" },
{ id: "CTX-F01", date: "Jun 10, 10:03", party: "Top-up from USD wallet", type: "funding", amount: "500.00", ccy: "USD", fee: "2.50", netFunded: "497.50", status: "COMPLETED", pillTone: "success", ref: "TXN-F01-4821" },
{ id: "CTX-C01", date: "Jun 10, 09:58", party: "Card creation fee", type: "creation", amount: "5.00", ccy: "USD", status: "COMPLETED", pillTone: "success", ref: "TXN-C01-4821" },
];
function copyText(text, onToast, label) {
if (navigator.clipboard) navigator.clipboard.writeText(text).catch(() => {});
onToast && onToast(label ? `${label} copied` : "Copied");
}
// =====================================================
// Card visual — desktop keeps hover-then-click reveal/copy with tooltips;
// mobile drops hover entirely (tap reveals, tap again copies, toast confirms —
// hover states have no touch equivalent and risk sticking on tap).
// =====================================================
function CardVisual({ card, compact, fillWidth, interactive, onToast }) {
const isDesktop = useIsDesktop();
const [revealed, setRevealed] = useState(false);
const [hoverField, setHoverField] = useState(null);
const status = card.status;
const activating = status === "activating";
const failed = status === "failed";
const frozen = status === "frozen";
const muted = frozen || activating || failed;
const canInteract = interactive && !activating && !failed;
const w = fillWidth ? "100%" : compact ? 260 : 380;
const h = fillWidth ? "auto" : compact ? 164 : 240;
const pad = compact ? 18 : 24;
const numSize = compact ? 14 : 17;
const labelSize = compact ? 8.5 : 10;
const valSize = compact ? 10.5 : 12;
const balSize = compact ? 16 : 22;
const bal = (card.balance || 0).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
const handleClick = (field) => (e) => {
if (!canInteract) return;
if (!revealed) { setRevealed(true); return; }
e.stopPropagation();
if (field === "number") copyText(card.number.replace(/\s/g, ""), onToast, "Card number");
else if (field === "exp") copyText(card.expiry, onToast, "Expiry");
else if (field === "cvv") copyText(card.cvv, onToast, "CVV");
};
const hlNum = isDesktop && canInteract && hoverField !== null && (!revealed || hoverField === "number");
const hlExp = isDesktop && canInteract && hoverField !== null && (!revealed || hoverField === "exp");
const hlCvv = isDesktop && canInteract && hoverField !== null && (!revealed || hoverField === "cvv");
const cardTip = (field) => {
if (!isDesktop || !canInteract || hoverField !== field) return null;
const text = revealed ? "Click to copy" : "Click to reveal";
return {text};
};
const hoverProps = (field) => isDesktop ? { onMouseEnter: () => setHoverField(field), onMouseLeave: () => setHoverField(null) } : {};
const statusLabel = frozen ? "Frozen" : activating ? "Activating" : failed ? "Failed" : null;
return (
{activating && }
Flex Business
{statusLabel &&
{statusLabel}
}
{revealed && canInteract ? card.number : `•••• •••• •••• ${card.last4}`}
{cardTip("number")}
Exp
{revealed && canInteract ? card.expiry : "••/••"}
{cardTip("exp")}
CVV
{revealed && canInteract ? card.cvv : "•••"}
{cardTip("cvv")}
{!activating && !failed && (
${bal}
)}
{activating &&
}
{card.name}
{activating ? (
Activating…
) : failed ? (
Activation failed
) : (
Virtual · ••{card.last4}
{card.status === "frozen" && · Frozen}
)}
);
}
// =====================================================
// Card transactions — table on desktop, card rows on mobile. Reused by the
// list page (all cards, shows a Card column) and the detail page (one card).
// =====================================================
function CardTxnValue({ tx, mobile }) {
const isFx = !!tx.fxCcy;
const isCredit = tx.type === "funding";
const sign = isCredit ? "+" : "−";
return (
{sign}{isFx ? tx.fxAmount : tx.amount}
{isFx ? tx.fxCcy : tx.ccy}
{isFx && ≈ {sign}${tx.amount} USD}
);
}
function CardTxnList({ txns, onOpen, showCard }) {
const isDesktop = useIsDesktop();
if (txns.length === 0) {
return (
No transactions yet
Transactions will appear here once your card is active.
);
}
if (isDesktop) {
return (
| Merchant |
{showCard && Card | }
Date |
Status |
Amount |
{txns.map((tx) => (
onOpen(tx)}>
| {tx.party} |
{showCard && {tx.card ? <>{tx.card.name} ••{tx.card.last4} : "—"} | }
{tx.date} |
{tx.status} |
|
))}
);
}
return (
{txns.map((tx) => {
const isCredit = tx.type === "funding";
return (
onOpen(tx)}>
{isCredit ? : }
{tx.party}
{showCard && tx.card ? `${tx.card.name} · ` : ""}{tx.date}
);
})}
{sign}{isFx ? tx.fxAmount : `$${tx.amount}`}
{isFx ? tx.fxCcy : "USD"}
{isFx &&
≈ {sign}${tx.amount} USD charged to card
}
{rows.map((row) => (
{row.label}
{row.value}
{row.copy && }
))}
);
}
// =====================================================
// Fund card
// =====================================================
function FundCardSheet({ card, onClose, onFund }) {
const [amount, setAmount] = useState("");
const [step, setStep] = useState("form");
const parsed = parseFloat(amount) || 0;
const usdBalance = Data.V0_USD_BALANCE;
const tooLow = amount !== "" && parsed < 1;
const tooHigh = parsed > usdBalance;
const valid = parsed >= 1 && !tooHigh;
const fundingFee = valid ? parsed * CARD_FUNDING_FEE_PCT : 0;
const netAmount = parsed - fundingFee;
const handleSubmit = () => { if (!valid) return; setStep("processing"); setTimeout(() => setStep("done"), 1600); };
const close = step === "processing" ? () => {} : onClose;
return (
{step === "processing" && (
Funding card
Adding ${parsed.toFixed(2)} to {card.name}…
)}
{step === "done" && (
<>
{card.name} ••{card.last4} funded
Amount funded
${fmtBal(parsed)}
Funding fee (0.5%)
−${fmtBal(fundingFee)}
New card balance
${fmtBal((card.balance || 0) + netAmount)}
)}
{step === "form" && (
<>
Card balance${fmtBal(card.balance || 0)}
USD balance (source)${fmtBal(usdBalance)}
Amount from USD balance
$
setAmount(e.target.value)} style={{ paddingLeft: 30 }} autoFocus />
{tooLow &&
Minimum $1.00.
}
{tooHigh &&
Insufficient funds. Your USD balance is ${fmtBal(usdBalance)}.
}
{valid && (
Funding fee (0.5%)−${fmtBal(fundingFee)}
Added to card${fmtBal(netAmount)}
)}
)}
);
}
// =====================================================
// Withdraw to wallet
// =====================================================
function WithdrawCardSheet({ card, onClose, onWithdraw }) {
const [amount, setAmount] = useState("");
const [step, setStep] = useState("form");
const cardBalance = card.balance || 0;
const parsed = parseFloat(amount) || 0;
const maxWithdraw = Math.max(0, cardBalance - 1);
const tooLow = amount !== "" && parsed < 1;
const tooHigh = parsed > maxWithdraw;
const valid = parsed >= 1 && !tooHigh;
const close = step === "processing" ? () => {} : onClose;
const handleSubmit = () => { if (!valid) return; setStep("processing"); setTimeout(() => setStep("done"), 1400); };
return (
{step === "processing" && (
Withdrawing…
Moving ${parsed.toFixed(2)} to your USD wallet
)}
{step === "done" && (
<>
Amount withdrawn
${fmtBal(parsed)}
New card balance
${fmtBal(cardBalance - parsed)}
)}
{step === "form" && (
<>
Amount
$
setAmount(e.target.value)} style={{ paddingLeft: 30 }} autoFocus />
{tooLow &&
Minimum $1.00.
}
{tooHigh &&
Max withdrawal is ${fmtBal(maxWithdraw)} — card must keep a $1.00 minimum balance.
}
{!tooLow && !tooHigh && (
Available: ${fmtBal(cardBalance)}
{valid && Remaining: ${fmtBal(cardBalance - parsed)}}
)}
DestinationUSD wallet
)}
);
}
// =====================================================
// Create card
// =====================================================
function CreateCardSheet({ onClose, onCreate }) {
const [step, setStep] = useState("form");
const [name, setName] = useState("");
const [fundAmount, setFundAmount] = useState("");
const MIN_FUND = CARD_CREATION_FEE + 1;
const usdBalance = Data.V0_USD_BALANCE;
const parsed = parseFloat(fundAmount) || 0;
const validFund = parsed >= MIN_FUND;
const tooHigh = parsed > usdBalance;
const fundingFee = validFund ? parsed * CARD_FUNDING_FEE_PCT : 0;
const cardBalance = validFund ? (parsed - CARD_CREATION_FEE - fundingFee) : 0;
const canProceed = name.trim() && validFund && !tooHigh;
const handleConfirm = () => {
const last4 = String(Math.floor(1000 + Math.random() * 9000));
onCreate({
id: "card-" + Date.now(), name: name.trim(), last4, type: "virtual", status: "activating",
number: `4539 ${String(Math.floor(1000 + Math.random() * 9000))} ${String(Math.floor(1000 + Math.random() * 9000))} ${last4}`,
expiry: "06/28", cvv: String(Math.floor(100 + Math.random() * 900)),
limit: { perTransaction: 5000, daily: 10000, monthly: 25000 }, created: "Jun 28, 2026", balance: cardBalance,
});
setStep("done");
};
return (
{step === "done" && (
Card created
{name.trim()} is activating — it'll be ready to use in a moment.
)}
{step === "review" && (
<>
Fund amount
${parsed.toFixed(2)}
Creation fee
−${CARD_CREATION_FEE.toFixed(2)}
Funding fee (0.5%)
−${fundingFee.toFixed(2)}
Card balance
${cardBalance.toFixed(2)}
${parsed.toFixed(2)} will be deducted from your USD balance.
)}
{step === "form" && (
<>
Card name
setName(e.target.value)} autoFocus />
{NAME_SUGGESTIONS.map((s) => (
setName(s)} className={`card-name-chip ${name === s ? "on" : ""}`}>{s}
))}
Card type
Use online or add to wallet.
Fund from USD balance
$
setFundAmount(e.target.value)} style={{ paddingLeft: 30 }} />
{fundAmount && !validFund && !tooHigh &&
Minimum $6.00 required — $5.00 creation fee + $1.00 minimum balance.
}
{tooHigh &&
Insufficient funds. Your USD balance is ${fmtBal(usdBalance)}.
}
{validFund && !tooHigh &&
After $5.00 creation fee + 0.5% funding fee: ${cardBalance.toFixed(2)}
}
A one-time $5.00 creation fee and 0.5% funding fee apply, both deducted from the funded amount.
)}
);
}
function FreezeCardSheet({ card, onClose, onConfirm }) {
const frozen = card.status === "frozen";
return (
{frozen ? <>{card.name} will be able to process new transactions again.
: <>{card.name} will be blocked from processing new transactions immediately.}
{!frozen && (
{["Online and in-store purchases will be declined", "Recurring subscriptions may still process", "You can unfreeze at any time"].map((note) => (
•{note}
))}
);
}
function CardFeesSheet({ onClose }) {
const rows = [
{ label: "Card creation", value: "$5.00", note: "One-time, per card" },
{ label: "Funding fee", value: "0.5%", note: "Per top-up transaction" },
{ label: "Monthly fee", value: "Free", note: null },
{ label: "Card transactions", value: "Free", note: null },
{ label: "FX transactions", value: "—", note: "Coming soon" },
];
return (
{rows.map((r, i, arr) => (
{r.label}
{r.note &&
{r.note}
}
))}
{[{ label: "Per transaction", value: card.limit.perTransaction }, { label: "Daily", value: card.limit.daily }, { label: "Monthly", value: card.limit.monthly }].map((l, i, arr) => (
{l.label}
{fmt(l.value)}
))}
Contact support to adjust limits.
{items.map((it) => (
{ onAction(it.key); onClose(); }}>
{it.icon}{it.label}
))}
Cardholder
{MOCK_CARDHOLDER}
Billing address
{addr.street}
{addr.city}, {addr.state} {addr.zip}
{addr.country}
);
}
// =====================================================
// Cards list page
// =====================================================
function CardsListPage({ cards, onSelect, onCreateCard }) {
const allTxns = CARD_TXNS.map((tx, i) => ({ ...tx, card: cards[i % Math.max(cards.length, 1)] }));
const [selectedTxn, setSelectedTxn] = useState(null);
return (
Cards
Manage your Flex Business virtual cards.
{cards.map((c) =>
onSelect(c)} />
)}
New card
Card transactions
{allTxns.length} transactions
) : (
No cards yet
Create a virtual card to start making payments online or add to Apple Pay and Google Pay.
)}
setSelectedTxn(null)} />
);
}
// =====================================================
// Card detail page
// =====================================================
function CardDetailPage({ card, onBack, onToast, onUpdateCard, onDeleteCard }) {
const [showFund, setShowFund] = useState(false);
const [showWithdraw, setShowWithdraw] = useState(false);
const [showFreeze, setShowFreeze] = useState(false);
const [showMore, setShowMore] = useState(false);
const [showLimits, setShowLimits] = useState(false);
const [showFees, setShowFees] = useState(false);
const [editingName, setEditingName] = useState(false);
const [selectedTxn, setSelectedTxn] = useState(null);
const [nameVal, setNameVal] = useState(card.name);
const frozen = card.status === "frozen";
const activating = card.status === "activating";
const failed = card.status === "failed";
const usable = card.status === "active" || card.status === "frozen";
const handleFreeze = () => { onUpdateCard({ ...card, status: frozen ? "active" : "frozen" }); onToast(frozen ? "Card unfrozen" : "Card frozen"); setShowFreeze(false); };
const handleSaveName = () => { if (nameVal.trim() && nameVal.trim() !== card.name) { onUpdateCard({ ...card, name: nameVal.trim() }); onToast("Card name updated"); } setEditingName(false); };
const handleFund = (amount) => { onUpdateCard({ ...card, balance: (card.balance || 0) + amount }); setShowFund(false); onToast(`$${amount.toFixed(2)} added`); };
const handleWithdraw = (amount) => { onUpdateCard({ ...card, balance: Math.max(0, (card.balance || 0) - amount) }); setShowWithdraw(false); onToast(`$${amount.toFixed(2)} withdrawn to USD wallet`); };
const handleRetry = () => { onUpdateCard({ ...card, status: "activating" }); onToast("Retrying activation…"); };
const handleMoreAction = (key) => {
if (key === "limits") setShowLimits(true);
else if (key === "withdraw") setShowWithdraw(true);
else if (key === "fees") setShowFees(true);
else if (key === "edit") setEditingName(true);
else if (key === "cancel") { onDeleteCard(card.id); onToast("Card deleted"); }
};
return (
{editingName ? (
setNameVal(e.target.value)} onKeyDown={(e) => { if (e.key === "Enter") handleSaveName(); if (e.key === "Escape") { setNameVal(card.name); setEditingName(false); } }} style={{ fontSize: 18, fontWeight: 700, padding: "6px 10px", maxWidth: 280 }} autoFocus />
) : (
{card.name}
)}
Virtual · Created {card.created}
{activating && (
Activation in progress
We're setting up your card. This usually takes a few minutes. You'll be notified when it's ready to use.
)}
{failed && (
!
Activation failed
Something went wrong. Your funds have not been charged.
)}
{usable && (
)}
{usable &&
}
Card transactions
{usable ? CARD_TXNS.length : 0} transactions
{usable ?
: (
No transactions yet
Transactions will appear here once your card is active.
)}
{showFund && setShowFund(false)} onFund={handleFund} />}
{showWithdraw && setShowWithdraw(false)} onWithdraw={handleWithdraw} />}
{showFreeze && setShowFreeze(false)} onConfirm={handleFreeze} />}
{showLimits && setShowLimits(false)} />}
{showFees && setShowFees(false)} />}
setShowMore(false)} onAction={handleMoreAction} />
setSelectedTxn(null)} />
);
}
// =====================================================
// Apply page (cardsAccess === "not_applied")
// =====================================================
function CardsApplyPage({ onApply }) {
return (
Flex Business Cards
Spend flexibly, anywhere
Issue virtual cards with granular spending limits. Use online or add to Apple Pay and Google Pay.
Flex Business
•••• •••• •••• ••••
{[
{ icon:
, title: "Instant virtual cards", desc: "Create and use immediately — no waiting for delivery." },
{ icon:
, title: "Spending controls", desc: "Set per-transaction, daily, and monthly limits." },
{ icon:
, title: "Use anywhere", desc: "Accepted online worldwide. Add to Apple Pay or Google Pay." },
].map((f) => (
{f.icon}
{f.title}
{f.desc}
))}
$5.00 creation fee per card. Cards are funded from your USD balance.
);
}
// =====================================================
// Root
// =====================================================
function CardsScreen({ onToast, cardsAccess = "active" }) {
const [cards, setCards] = useState(() => [...Data.CARDS]);
const [view, setView] = useState("list");
const [selectedCard, setSelectedCard] = useState(null);
const [showCreate, setShowCreate] = useState(false);
if (cardsAccess === "not_applied") {
return onToast("Application submitted — we'll review and get back to you.")} />;
}
const handleSelect = (card) => { setSelectedCard(card); setView("detail"); };
const handleBack = () => { setSelectedCard(null); setView("list"); };
const handleCreate = (newCard) => {
setCards((prev) => [...prev, newCard]);
onToast(`${newCard.name} is being activated…`);
setTimeout(() => setCards((prev) => prev.map((c) => c.id === newCard.id && c.status === "activating" ? { ...c, status: "active" } : c)), 30000);
};
const handleUpdate = (updated) => {
setCards((prev) => prev.map((c) => (c.id === updated.id ? updated : c)));
setSelectedCard(updated);
if (updated.status === "activating") {
setTimeout(() => setCards((prev) => prev.map((c) => c.id === updated.id && c.status === "activating" ? { ...c, status: "active" } : c)), 4000);
}
};
const handleDelete = (id) => { setCards((prev) => prev.filter((c) => c.id !== id)); setSelectedCard(null); setView("list"); };
if (view === "detail" && selectedCard) {
const liveCard = cards.find((c) => c.id === selectedCard.id);
if (!liveCard) { setView("list"); return null; }
return ;
}
return (
<>
setShowCreate(true)} />
{showCreate && setShowCreate(false)} onCreate={handleCreate} />}
);
}
window.OBCards = { CardsScreen };