// Main app — private label seller's FBA profit calculator
const { useState: aUseState, useEffect: aUseEffect, useRef: aUseRef, useMemo: aUseMemo } = React;
// ── Popover rendered via portal into document.body — escapes any stacking context ──
function Popover({ anchorRef, onClose, align = "right", width, children }) {
const [coords, setCoords] = aUseState(null);
aUseEffect(() => {
if (!anchorRef.current) return;
const update = () => {
const rect = anchorRef.current.getBoundingClientRect();
const left = align === "right"
? Math.max(8, rect.right - (width || 360))
: rect.left;
setCoords({
top: rect.bottom + 8,
left,
width: width || 360,
});
};
update();
window.addEventListener("scroll", update, true);
window.addEventListener("resize", update);
return () => {
window.removeEventListener("scroll", update, true);
window.removeEventListener("resize", update);
};
}, [anchorRef, align, width]);
aUseEffect(() => {
const onKey = (e) => { if (e.key === "Escape") onClose(); };
document.addEventListener("keydown", onKey);
return () => document.removeEventListener("keydown", onKey);
}, [onClose]);
if (!coords) return null;
return ReactDOM.createPortal(
<>
e.stopPropagation()}
>
{children}
,
document.body
);
}
function App() {
const { MARKETPLACES, CATEGORIES, SIZE_TIERS, PRODUCT_TEMPLATES, SCENARIO_COLORS } = window.FBA;
const { autoReferral, autoFbaFee, autoStorageMonthly, detectFromName } = window.FBA.calc;
// ── Default input for a fresh scenario ──
function makeDefaultInput(marketplace = "US", overrides = {}) {
const mkt = MARKETPLACES[marketplace];
return {
marketplace,
title: "Stainless Steel Insulated Water Bottle 32 oz",
image: "bottle",
category: "home",
sizeTier: "large_std_2lb",
autoDetected: { category: true, sizeTier: true },
weight: 1.4, length: 11, width: 3.5, height: 3.5,
unitCost: 3.80,
shippingPerUnit: 0.75,
prepPerUnit: 0.30,
dutyPct: 2,
orderQty: 500,
sellPrice: 24.99,
discountPct: 0,
referralPct: autoReferral("home", 24.99) * 100,
fbaFee: autoFbaFee("large_std_2lb"),
storageMonthly: autoStorageMonthly("large_std_2lb"),
monthsInStorage: 1,
longTermStorage: 0,
acosPct: 14,
ppcSharePct: 20,
returnRatePct: 2,
returnHandlingCost: 1.50,
vatPct: mkt.vat,
unitsPerDay: 12,
...overrides,
};
}
// ── Scenarios ──
const [scenarios, setScenarios] = aUseState(() => [
{ id: "A", name: "Base case", color: SCENARIO_COLORS[0], input: makeDefaultInput("US") },
{ id: "B", name: "Premium", color: SCENARIO_COLORS[1], input: makeDefaultInput("US", { sellPrice: 34.99, unitCost: 5.20, acosPct: 12, unitsPerDay: 9 }) },
{ id: "C", name: "Value SKU", color: SCENARIO_COLORS[2], input: makeDefaultInput("US", { sellPrice: 19.99, unitCost: 2.80, acosPct: 18, unitsPerDay: 22 }) },
]);
const [activeId, setActiveId] = aUseState("A");
const [compareMode, setCompareMode] = aUseState(false);
const [marketplace, setMarketplace] = aUseState("US");
const [showMarketMenu, setShowMarketMenu] = aUseState(false);
const [showTemplateMenu, setShowTemplateMenu] = aUseState(false);
const [savedToast, setSavedToast] = aUseState("");
const detectDebounceRef = aUseRef(null);
const [detecting, setDetecting] = aUseState(false);
const tmplBtnRef = aUseRef(null);
const marketBtnRef = aUseRef(null);
const active = scenarios.find(s => s.id === activeId) || scenarios[0];
const mkt = MARKETPLACES[marketplace];
// ── Product-identity fields are shared across scenarios; pricing/cost/marketing are per-scenario.
// Compare mode is for "different strategies for the same product".
const SHARED_FIELDS = new Set([
"title", "image", "category", "sizeTier",
"weight", "length", "width", "height",
"autoDetected", "referralPct", "fbaFee", "storageMonthly",
]);
// ── Update scenario inputs ──
const updateActive = (patch) => {
const sharedPatch = {};
const localPatch = {};
for (const [k, v] of Object.entries(patch)) {
if (SHARED_FIELDS.has(k)) sharedPatch[k] = v;
else localPatch[k] = v;
}
setScenarios(prev => prev.map(s => ({
...s,
input: {
...s.input,
...sharedPatch,
...(s.id === activeId ? localPatch : {}),
},
})));
};
// ── Marketplace change applies to all scenarios (VAT auto) ──
const changeMarketplace = (code) => {
setMarketplace(code);
const m = MARKETPLACES[code];
setScenarios(prev => prev.map(s => ({
...s,
input: { ...s.input, marketplace: code, vatPct: m.vat },
})));
setShowMarketMenu(false);
};
// ── Smart-detect category & size tier as user types product name ──
const onTitleChange = (raw) => {
updateActive({ title: raw });
if (detectDebounceRef.current) clearTimeout(detectDebounceRef.current);
setDetecting(true);
detectDebounceRef.current = setTimeout(() => {
const { category, sizeTier } = detectFromName(raw);
const patch = {};
const ad = { ...(active.input.autoDetected || {}) };
// Only override category if it was auto-detected before (user hasn't manually picked)
if (category && (active.input.autoDetected?.category !== false)) {
if (category !== active.input.category) {
patch.category = category;
patch.referralPct = +(autoReferral(category, +active.input.sellPrice || 0) * 100).toFixed(2);
ad.category = true;
}
}
if (sizeTier && (active.input.autoDetected?.sizeTier !== false)) {
if (sizeTier !== active.input.sizeTier) {
patch.sizeTier = sizeTier;
patch.fbaFee = autoFbaFee(sizeTier);
patch.storageMonthly = autoStorageMonthly(sizeTier);
patch.weight = SIZE_TIERS[sizeTier]?.weight ?? active.input.weight;
ad.sizeTier = true;
}
}
if (Object.keys(patch).length > 0) {
patch.autoDetected = ad;
updateActive(patch);
}
setDetecting(false);
}, 350);
};
// ── Apply a quick-pick template ──
const applyTemplate = (slug) => {
const t = PRODUCT_TEMPLATES.find(x => x.slug === slug);
if (!t) return;
updateActive({
title: t.title,
image: t.image,
category: t.category,
sizeTier: t.sizeTier,
autoDetected: { category: true, sizeTier: true },
weight: t.weight, length: t.length, width: t.width, height: t.height,
sellPrice: t.sellPrice,
unitCost: t.suggestedCost,
referralPct: +(autoReferral(t.category, t.sellPrice) * 100).toFixed(2),
fbaFee: autoFbaFee(t.sizeTier),
storageMonthly: autoStorageMonthly(t.sizeTier),
});
flashToast(`Loaded ${t.label} template`);
setShowTemplateMenu(false);
};
const flashToast = (msg) => {
setSavedToast(msg);
setTimeout(() => setSavedToast(""), 2200);
};
// ── Scenario actions ──
const addScenario = () => {
if (scenarios.length >= 4) { flashToast("Max 4 scenarios"); return; }
const id = String.fromCharCode(65 + scenarios.length);
const newS = {
id,
name: `Scenario ${id}`,
color: SCENARIO_COLORS[scenarios.length % SCENARIO_COLORS.length],
input: { ...active.input },
};
setScenarios([...scenarios, newS]);
setActiveId(id);
};
const removeScenario = (id) => {
if (scenarios.length <= 1) return;
const next = scenarios.filter(s => s.id !== id);
setScenarios(next);
if (activeId === id) setActiveId(next[0].id);
};
const renameScenario = (id, name) => {
setScenarios(prev => prev.map(s => s.id === id ? { ...s, name } : s));
};
const duplicateScenario = (id) => {
if (scenarios.length >= 4) { flashToast("Max 4 scenarios"); return; }
const src = scenarios.find(s => s.id === id);
const newId = String.fromCharCode(65 + scenarios.length);
setScenarios([...scenarios, {
id: newId,
name: src.name + " copy",
color: SCENARIO_COLORS[scenarios.length % SCENARIO_COLORS.length],
input: { ...src.input },
}]);
setActiveId(newId);
};
// ── CSV export ──
const exportCsv = () => {
const rows = [
["FBA Profit Calculator — Private Label export"],
["Marketplace", mkt.name + " (" + mkt.currency + ")"],
["Generated", new Date().toISOString().slice(0, 16).replace("T", " ")],
[],
["Scenario", "Product", "Category", "Size tier", "Sell price", "Landed cost", "Total fees", "Profit/unit", "Margin %", "ROI %", "Break-even units", "Monthly profit", "Annual profit"],
];
scenarios.forEach(s => {
const r = window.FBA.calc.compute(s.input);
rows.push([
s.name, s.input.title, CATEGORIES[s.input.category]?.name || "",
SIZE_TIERS[s.input.sizeTier]?.name || "",
s.input.sellPrice, r.landed.toFixed(2), r.totalFees.toFixed(2),
r.profit.toFixed(2), (r.margin * 100).toFixed(1), (r.roi * 100).toFixed(1),
isFinite(r.breakEvenUnits) ? Math.ceil(r.breakEvenUnits) : "",
r.monthlyProfit.toFixed(0), r.annualProfit.toFixed(0),
]);
});
const csv = rows.map(row => row.map(v => {
const s = String(v ?? "");
return /[",\n]/.test(s) ? `"${s.replace(/"/g, '""')}"` : s;
}).join(",")).join("\n");
const blob = new Blob([csv], { type: "text/csv" });
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url; a.download = "fba-scenarios.csv"; a.click();
URL.revokeObjectURL(url);
flashToast("Exported to CSV");
};
return (
{/* ─── Header ─── */}
{/* ─── Scenarios bar ─── */}
{scenarios.map(s => (
setActiveId(s.id)}
onRename={(name) => renameScenario(s.id, name)}
onDuplicate={() => duplicateScenario(s.id)}
onRemove={() => removeScenario(s.id)}
canRemove={scenarios.length > 1}
/>
))}
{scenarios.length < 4 && (
)}
{active.input.title || "Untitled product"}
·
{CATEGORIES[active.input.category]?.name || "—"}
{/* ─── Main body ─── */}
{/* ─── Toast ─── */}
{savedToast &&
{savedToast}
}
{editing ? (
onRename(e.target.value)}
onBlur={() => setEditing(false)}
onKeyDown={e => { if (e.key === "Enter") setEditing(false); }}
onClick={e => e.stopPropagation()}
/>
) : (
{ e.stopPropagation(); setEditing(true); }}>{scenario.name}
)}
= 0.15 ? "good" : r.margin >= 0 ? "warn" : "bad")}>
{(r.margin * 100).toFixed(0)}%
e.stopPropagation()}>
{menuOpen && (
<>
setMenuOpen(false)} />
{canRemove && }
)}
);
}
// ── Brand mark — orange smile arc on navy, Amazon-flavored ──
function BrandMark() {
return (
);
}
ReactDOM.createRoot(document.getElementById("root")).render(
);