// app.jsx — "My Business Credit Score" page (design v2 — Manrope / Instrument Serif, navy+blue theme) // Sections: // 1. Hero — radial gauge + score history line chart + risk legend + verdict // 2. Score factors (What goes into your score) // 3. FAQ accordion // 4. Articles / blog grid // 5. Page footer // // NOTE: all live-data wiring is unchanged from the previous version — // fetchCreditScore() / window.RBI_API.getCreditScore(), the loading // skeleton, the error+retry state, and the RBI_STATE scenario switch // all work exactly as before. Only the visual layer changed. const { useState, useMemo, useEffect, useRef } = React; // Profile from GET /v1/bi/profile, fetched at login and held in memory by // RBI_API — never persisted. `{}` until the call lands. function getStoredProfile() { return (window.RBI_API && window.RBI_API.profile()) || {}; } // Re-renders the calling component when the profile arrives, and kicks off the // fetch if this page load hasn't made it yet (hard refresh / deep link). // Returns [profile, settled] — `settled` flips to true once the fetch has // finished, whether it succeeded or not, so callers never wait forever. function useProfile() { const [state, setState] = useState(() => { const p = getStoredProfile(); return { profile: p, settled: !!p.email }; }); useEffect(() => { let alive = true; function onProfile(e) { if (alive) setState({ profile: (e.detail && e.detail.profile) || {}, settled: true }); } window.addEventListener("rbi:profile", onProfile); if (window.RBI_API && window.RBI_API.ensureProfile) { window.RBI_API.ensureProfile() .then((p) => { if (alive) setState({ profile: p || {}, settled: true }); }) .catch(() => { if (alive) setState({ profile: {}, settled: true }); }); } else { setState({ profile: {}, settled: true }); } return () => { alive = false; window.removeEventListener("rbi:profile", onProfile); }; }, []); return [state.profile, state.settled]; } // Business name for the dashboard header/greeting. Falls back to "Your Business". function getBusinessDisplayName(p) { p = p || getStoredProfile(); if (p.business_name && p.business_name.trim()) return p.business_name.trim(); return "Your Business"; } // Account owner (first + last name) shown in the topbar account chip. function getOwnerDisplayName(fallback, p) { p = p || getStoredProfile(); const full = (p.owner_name || [p.first_name, p.last_name].filter(Boolean).join(" ")).trim(); return full || fallback || "Your Account"; } // City shown under the owner name in the topbar account chip. function getCityDisplay(fallback, p) { p = p || getStoredProfile(); if (p.city && p.city.trim()) return p.city.trim(); return fallback || ""; } // ── Color helpers (derive translucent / light / dark variants from a // single hex accent so every risk band gets a consistent look even // though only the "High Risk" state was supplied in the new design) ── function hexToRgb(hex) { const h = hex.replace("#", ""); return { r: parseInt(h.substring(0, 2), 16), g: parseInt(h.substring(2, 4), 16), b: parseInt(h.substring(4, 6), 16), }; } function rgbaColor(hex, a) { const { r, g, b } = hexToRgb(hex); return `rgba(${r},${g},${b},${a})`; } function mixColor(hex, target, t) { const { r, g, b } = hexToRgb(hex); const m = (c) => Math.round(c + (target - c) * t); return `rgb(${m(r)},${m(g)},${m(b)})`; } function lightenColor(hex, t) { return mixColor(hex, 255, t); } function darkenColor(hex, t) { return mixColor(hex, 0, t); } // ── Score range config ──────────────────────────────────────────────────────── // SBFE range: 706–999. Colors match the new design's swatches; "accent"/ // "strong" are only defined for the High Risk band shown in the mockup — // the rest are derived at runtime so the palette stays consistent. const SCORE_MIN = 706; const SCORE_MAX = 999; const SCORE_RANGES = [ { min: 706, max: 799, label: "High Risk", dot: "#EF4444", accent: "#F04A4A", strong: "#D8232A" }, { min: 800, max: 839, label: "Moderate – High Risk", dot: "#F97316" }, { min: 840, max: 879, label: "Moderate Risk", dot: "#F5C13D" }, { min: 880, max: 899, label: "Low – Moderate Risk", dot: "#4CB782" }, { min: 900, max: 999, label: "Low Risk", dot: "#2AA96B" }, ]; function getRangeMeta(value) { const r = SCORE_RANGES.find(rb => value >= rb.min && value <= rb.max) || SCORE_RANGES[0]; const accent = r.accent || r.dot; const strong = r.strong || darkenColor(accent, 0.18); const textTint = lightenColor(accent, 0.42); return { ...r, accent, strong, textTint }; } // ── Radial gauge ────────────────────────────────────────────────────────────── // 240° arc (120° gap at the bottom), center (140,140) r=120 — matches the // new design's SVG geometry exactly. Score number + risk badge render as an // absolutely-positioned overlay on top (cs-gauge-center) rather than inside // the SVG, for crisp text. function RadialGauge({ value, meta }) { const pct = Math.min(1, Math.max(0, (value - SCORE_MIN) / (SCORE_MAX - SCORE_MIN))); const CX = 140, CY = 140, R = 120; const START_DEG = 150, SWEEP_DEG = 240; const TRACK_LEN = 2 * Math.PI * R * (SWEEP_DEG / 360); const fillLen = pct * TRACK_LEN; function polar(deg) { const rad = (deg * Math.PI) / 180; return [CX + R * Math.cos(rad), CY + R * Math.sin(rad)]; } const [sx, sy] = polar(START_DEG); const [ex, ey] = polar(START_DEG + SWEEP_DEG); const trackPath = `M${sx.toFixed(2)},${sy.toFixed(2)} A${R},${R} 0 1 1 ${ex.toFixed(2)},${ey.toFixed(2)}`; const gradId = "gaugeGrad" + meta.min; return ( ); } // ── Score history chart ─────────────────────────────────────────────────────── function ScoreChart({ history, meta }) { const W = 780, H = 260; const PLOT_TOP = 40, PLOT_BOTTOM = 216; const PLOT_LEFT = 100, PLOT_RIGHT = 740; const GRID_X1 = 70, GRID_X2 = 760; const LABEL_X = 52, XLABEL_Y = 248; const col = meta.accent; const vals = history.map(d => d.score); const mn = Math.min(...vals) - 2; const mx = Math.max(...vals) + 2; function xOf(i) { return PLOT_LEFT + (i / (history.length - 1)) * (PLOT_RIGHT - PLOT_LEFT); } function yOf(v) { return PLOT_TOP + (1 - (v - mn) / (mx - mn)) * (PLOT_BOTTOM - PLOT_TOP); } const linePts = history.map((d, i) => `${xOf(i)},${yOf(d.score)}`).join(" L"); const linePath = `M${linePts}`; const areaPath = `M${xOf(0)},${yOf(history[0].score)} L` + history.slice(1).map((d, i) => `${xOf(i + 1)},${yOf(d.score)}`).join(" L") + ` L${xOf(history.length - 1)},${PLOT_BOTTOM} L${xOf(0)},${PLOT_BOTTOM} Z`; const yTicks = [mn + 1, Math.round((mn + mx) / 2), mx - 1]; const gridYs = [PLOT_TOP, (PLOT_TOP + PLOT_BOTTOM) / 2 + 9, PLOT_BOTTOM - 26]; const last = history[history.length - 1]; const lx = xOf(history.length - 1); const ly = yOf(last.score); const pillW = 68, pillH = 32; const pillX = lx - 48, pillY = ly - 54; return ( {yTicks.map((v, i) => ( ))} {yTicks.map((v, i) => ( {v} ))} {history.slice(0, -1).map((d, i) => ( ))} {last.score} {history.map((d, i) => ( {d.label} ))} ); } // ── Accordion item ──────────────────────────────────────────────────────────── // Controlled by the parent (open/onToggle) so the FAQ list can enforce // "only one open at a time" — opening one item closes whichever was open. function AccordionItem({ q, a, open, onToggle }) { const bodyRef = useRef(null); useEffect(() => { const el = bodyRef.current; if (!el) return; el.style.maxHeight = open ? el.scrollHeight + "px" : "0"; }, [open]); return (
{a}
); } // ── Score factor icons (paths match the new design exactly) ────────────────── function IconPayment() { return ( ); } function IconCredit() { return ( ); } function IconUsage() { return ( ); } function IconReporting() { return ( ); } function IconArrow() { return ( ); } // ── Greeting (kept exactly as existing — intentionally not restyled) ───────── function Greeting({ profile, user, loaded, serif, navy }) { const stateLabels = { declined: "Today", improving: "Today · 60 days post-decline", reeligible: "Today · 142 days post-decline", }; const u = user || {}; const apiFirst = u.first_name || (u.owner_name || "").split(" ")[0]; const firstName = (apiFirst && apiFirst.trim()) ? apiFirst.trim() : profile.business.owner.split(" ")[0]; const bizName = getBusinessDisplayName(u); let line; if (profile.state === "declined") { line = (

Good morning, {firstName}. Here's where {bizName} stands right now.

); } else if (profile.state === "improving") { line = (

{firstName} — the numbers have moved. Here's where {bizName} is today.

); } else { line = (

{firstName} — you'd be approved today. The picture changed.

); } return (

{stateLabels[profile.state]} · {profile.business.industry.split(" · ")[0]}

{line}
{/* DUNS from GET /profile. Skeleton while the call is in flight; the whole block is dropped if the profile failed or has no DUNS — no placeholder, and no orphaned "Connected ·" line under a missing number. */} {!loaded ? (
) : u.duns ? (
DUNS · {u.duns}
Connected · last refreshed 8 minutes ago
) : null}
); } // ── Hero skeleton loader (while getCreditScore is in flight) ──────────────────── function HeroSkeleton() { return (
{Array.from({ length: 5 }, (_, i) => (
))}
); } // ── Hero error state (with retry) ─────────────────────────────────────────────── function HeroError({ onRetry, retrying, noDuns }) { return (

{noDuns ? "No DUNS number found" : "Failed to fetch credit score"}

{noDuns ? "We couldn't find a DUNS number for your business, so we can't pull your business credit score yet." : "Something went wrong while loading your business credit score."}

{!noDuns && ( )}
); } // ══ Page footer ═════════════════════════════════════════ function Footer() { return ( ); } // ── Main App ────────────────────────────────────────────────────────────────── function App() { const scenario = window.useScenario(); const profile = window.RBI_PROFILES[scenario] || window.RBI_PROFILES.declined; // ── Live credit score (getCreditScore) ────────────────────────────────── // Real API data only — no mock score / history. Shows skeleton while loading // and the existing empty/error states when there is no DUNS or the call fails. // // DUNS comes from GET /v1/bi/profile (`duns_number`), fetched at login. While // that call is in flight the profile is `{}`, so we hold the loading state // rather than deciding there is no DUNS; once it lands the effect re-runs. const [user, profileLoaded] = useProfile(); const CREDIT_SCORE_DUNS = user.duns || ""; const noDuns = profileLoaded && !CREDIT_SCORE_DUNS; const [creditData, setCreditData] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(false); // ── FAQ accordion — single-open group. Only one item is expanded at a // time; opening one closes whichever was open (matches the design's // defaultFaqOpen: first item starts open, -1 means "all closed"). const [openFaq, setOpenFaq] = useState(0); const fetchCreditScore = React.useCallback(() => { // Profile still loading — stay in the skeleton, the effect re-runs on arrival. if (!CREDIT_SCORE_DUNS && !profileLoaded) { setLoading(true); setError(false); setCreditData(null); return; } // No DUNS on file — nothing to fetch; surface the "no DUNS found" state. if (!CREDIT_SCORE_DUNS) { setLoading(false); setError(false); setCreditData(null); return; } setLoading(true); setError(false); setCreditData(null); const loginDate = new Date().toISOString().slice(0, 10); // YYYY-MM-DD return window.RBI_API .getCreditScore({ duns: CREDIT_SCORE_DUNS, loginDate }) .then((res) => { if (res.ok && res.data && res.data.power_score != null) { setCreditData(res.data); } else { setError(true); } }) .catch(() => setError(true)) .finally(() => setLoading(false)); }, [CREDIT_SCORE_DUNS, profileLoaded]); useEffect(() => { fetchCreditScore(); }, [fetchCreditScore]); // Score + risk band come only from the live API response. const sbfeScore = creditData && creditData.power_score != null ? Number(creditData.power_score) : null; const rangeMeta = sbfeScore != null ? getRangeMeta(sbfeScore) : null; // Score history — only real API history (no fabricated prior months). const scoreHistory = useMemo(() => { if (!creditData) return []; const raw = creditData.score_history || creditData.history || creditData.scoreHistory; if (!Array.isArray(raw) || !raw.length) return []; return raw .map(function (row) { const score = Number(row.score != null ? row.score : row.power_score); if (score == null || isNaN(score)) return null; const label = row.label || row.month || row.period || row.date || ""; return { label: String(label), score: score }; }) .filter(Boolean); }, [creditData]); const scoreUpdatedLabel = useMemo(() => { if (!creditData) return ""; const raw = creditData.updated_on || creditData.updatedOn || creditData.as_of || creditData.asOf; if (raw) { const d = new Date(raw); if (!isNaN(d.getTime())) { return d.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" }); } return String(raw); } return new Date().toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" }); }, [creditData]); const scorePeriodLabel = useMemo(() => { return new Date().toLocaleDateString("en-US", { month: "short", year: "numeric" }).replace(" ", "-"); }, []); // Verdict copy driven by risk band const verdictLabel = useMemo(() => { if (!rangeMeta) return ""; const label = rangeMeta.label.toLowerCase(); if (label.includes("high risk") && !label.includes("moderate")) return "a high risk credit score"; if (label.includes("moderate – high")) return "a moderate-high credit score"; if (label.includes("moderate risk")) return "a moderate credit score"; if (label.includes("low – moderate")) return "a low-moderate credit score"; return "a low risk credit score"; }, [rangeMeta]); // Reasons come only from the live getCreditScore response. const verdictBullets = useMemo(() => { if (!creditData) return []; return [creditData.reason_1, creditData.reason_2, creditData.reason_3].filter(Boolean); }, [creditData]); // Matches the new design's visual pattern: first two reasons carry the // primary risk-band accent, the third uses the secondary amber tone. const bulletDotColors = rangeMeta ? [rangeMeta.accent, rangeMeta.accent, "#F5C13D"] : ["#F5C13D", "#F5C13D", "#F5C13D"]; // const SCORE_FACTORS = [ // { // icon: , // title: "Payment history", // body: "Paying your business expenses on time (or early) is a major factor in your business credit score. Doing so will help establish your business credit profile.", // }, // { // icon: , // title: "Types of credit", // body: "Not all business credit sources report trade lines and lines of credit to credit bureaus. Utilizing sources of financing that report to credit bureaus (like Revenued does to Dun & Bradstreet) is a must in order to build business credit.", // }, // { // icon: , // title: "Responsible credit usage", // body: "Utilize the credit your business has access to regularly and responsibly by paying amounts due on time. Most bureaus recommend keeping your total utilization below 30% to maintain a better score.", // }, // { // icon: , // title: "Accurate reporting", // body: "Continually checking your business credit score for changes and updates will help keep you on the right path to build your business credit profile. If you notice inaccuracies, you can request updates for free through Dun & Bradstreet.", // }, // ]; // const FAQ_ITEMS = [ // { // q: "What does my score mean?", // a: ( //
//

Your score is an indicator of the risk your business is perceived to be at of potentially making a late financial services payment over the next 12 months. Risk level changes depending on where your SBFE score falls:

//
    // {SCORE_RANGES.map((r, i) => ( //
  • // // {r.min}–{r.max}: {r.label} //
    • // ))} //
//
// ), // }, // { // q: "Why is it important I maintain a good business credit score?", // a:

A strong business credit score unlocks better financing terms, higher credit limits, and more lender options. It can also affect supplier payment terms and insurance premiums.

// }, // { // q: "How does a business credit score differ from a personal credit score?", // a:

Business credit scores are typically on a 706–999 scale (SBFE/D&B) while personal scores use 300–850 (FICO/VantageScore). Business scores are tied to your EIN, not your SSN, and are built through business tradelines and commercial activity.

// }, // { // q: "How often will my D&B SBFE Score change?", // a:

Your SBFE score is updated as new data is reported by lenders and creditors, typically on a monthly cycle. Significant events like late payments or new credit can cause faster changes.

// }, // { // q: "Will viewing my score in Revenued affect my business credit score?", // a:

No. Viewing your own score is considered a "soft pull" and does not affect your business credit score in any way.

// }, // { // q: "Who uses this score?", // a:

Financial institutions, lenders, suppliers, and vendors may review your SBFE score when evaluating credit applications, payment terms, or business relationships.

// }, // { // q: "How are these scores calculated and what do they measure?", // a:

The SBFE score is calculated by Dun & Bradstreet using data from SBFE member institutions. It weighs payment history, utilization, account age, and public records to predict the likelihood of a late payment in the next 12 months.

// }, // { // q: "How do I manage my business credit scores?", // a:

Pay bills on time, keep utilization low, use credit sources that report to bureaus, and regularly monitor your score for inaccuracies. You can dispute errors directly with Dun & Bradstreet at no charge.

// }, // ]; // Articles — same 8 pieces of content as before, remapped onto the new // design's layout: 1 dark feature card, a 3-up row, then a bordered list. const ARTICLE_CARDS = [ { tag: "BUILD CREDIT", num: "01", title: "Everything You Need to Do to Build & Establish Business Credit", excerpt: "Good business credit is just as important for your company as having a high personal credit score is…", link: "https://www.revenued.com/business-credit", }, { tag: "GETTING STARTED", num: "02", title: "How Do I Establish Business Credit for the First Time?", excerpt: "Entrepreneurs face tremendous challenges when attempting to start a new business. Many run out of…", link: "https://www.revenued.com/business-credit", }, { tag: "REPORTING", num: "03", title: "How to Read a Business Credit Report", excerpt: "Most small business owners are familiar with the process of applying for the funds they need in orde…", link: "https://www.revenued.com/articles/business-credit/how-to-read-a-business-credit-report", }, ]; const ARTICLE_ROWS = [ { num: "04", title: "What is Your Business Credit Score Used for?", excerpt: "If you are a new small business owner, chances are you haven't built up any business credit yet so…", link: "https://www.revenued.com/business-credit", }, { num: "05", title: "How is Business Credit Score Calculated?", excerpt: "Bank loans, credit cards, and lines of credit can bolster your working capital, giving you resources…", link: "https://www.revenued.com/business-credit", }, { num: "06", title: "What is a Business Credit Score and Why Does it Matter?", excerpt: "Your business credit score can be the make-or-break factor when you're applying for a business loan…", link: "https://www.revenued.com/business-credit", }, { num: "07", title: "Business Credit VS. Personal Credit: What's The Difference?", excerpt: "If you are a new small business owner, chances are you haven't built up any business credit yet so…", link: "https://www.revenued.com/business-credit", }, ]; return (
{/* Topbar */} window.postMessage({ type: "__activate_edit_mode" }, "*")} /> {/* Breadcrumb bar */}
My Business Credit Score
{/* ── Greeting (keep as-is per requirement) ─────────────── */}
{/* ══ Section 1: Hero — real API score only; else empty/error states ══ */} {loading ? ( ) : noDuns ? ( ) : error || !creditData || sbfeScore == null || !rangeMeta ? ( ) : (
{/* Left — gauge + legend + verdict */}
D&B SBFE BUSINESS CREDIT SCORE
{sbfeScore} {rangeMeta.label.toUpperCase()}
{SCORE_MIN} {SCORE_MAX}
{/* Risk band legend */}
{SCORE_RANGES.map((rb, i) => (
{rb.min}–{rb.max} {rb.label}
))}
{/* Verdict chip */}
{/* Right — chart + annotation */}
SCORE HISTORY

SBFE Business Credit Score

Overall
{scoreHistory.length >= 2 ? ( ) : (

Score history not available

Historical score data is not available for this business yet.

)}
{/* Current period annotation */}
{scorePeriodLabel} · {sbfeScore} Credit Score {rangeMeta.label.toUpperCase()}
{verdictBullets.map((b, i) => (

{b}

))}
)} {/* ══ Section 2: Score Factors ═════════════════════════════ */} {/*

What Goes Into Your Business Credit Score

Understanding the factors that influence your score helps you take targeted action to improve it over time.

{SCORE_FACTORS.map((f, i) => (
{f.icon}

{f.title}

{f.body}

))}
*/} {/* ══ Section 3: FAQ ═══════════════════════════════════════ */} {/*

Business Credit Frequently Asked Questions

{FAQ_ITEMS.map((item, i) => ( setOpenFaq(prev => (prev === i ? -1 : i))} /> ))}
*/} {/* ══ Section 4: Articles ══════════════════════════════════ */}

More About Business Credit From Revenued

{/* Featured dark hero card */}
FEATURED GUIDE Business credit basics

Understand Your Business Credit Score

Every individual has a credit score that reflects their likelihood of repaying debt, but did you kno…

Read More
{/* 3-up card row */} {/* Bordered list rows */}
{ARTICLE_ROWS.map((r, i) => ( {r.num}

{r.title}

{r.excerpt}

 ))}
{/* ══ Disclaimer ══════════════════════════════════════════ */}

Note: Revenued is not a credit repair organization as defined under federal or state law, including the Credit Repair Organizations Act. Revenued does not provide "credit repair" services or advice or assistance regarding "rebuilding" or "improving" your credit record, credit history or credit rating.

Revenued provided your Dun & Bradstreet business credit scores in the Revenued Portal for educational purposes. Revenued cannot provide assistance regarding improving your credit scores except for addressing any disputes you may have regarding accounts you have with Revenued.

{/* end .rbi-body */} {/* ══ Page footer ═════════════════════════════════════════ */}
); } window.HomeApp = App;