import React, { useMemo, useState } from "react"; // Drop-in React component for memberr.de // – Step-by-step (one question per screen) // – Uses Tailwind CSS classes (no external libs) // – Transparent, tweakable assumptions in the Advanced section on the results screen // – Based strictly on your PDF question set // // HOW TO USE // 1) Ensure Tailwind is available in your project (Next.js / React). If not, replace classNames with your own CSS. // 2) Import and render anywhere on your page. // 3) Optional: wire the final lead-capture CTA (email) to your form/backend. export default function MemberrLoyaltyRoiCalculator() { // ---------------------------- // Utilities // ---------------------------- const eur=(n)=>new Intl.NumberFormat("de-DE", { style: "currency", currency: "EUR" }).format(isFinite(n) ? n : 0); const pct=(n)=>`$ { (n * 100).toFixed(1) } %`; // ---------------------------- // Form State // ---------------------------- // (types removed for preview) const [answers, setAnswers]=useState({}); const [step, setStep]=useState(0); const [showAdvanced, setShowAdvanced]=useState(false); // Optional lead capture const [email, setEmail]=useState(""); // ---------------------------- // Questions (exactly as in your PDF; values mapped to realistic numeric midpoints) // ---------------------------- const questions=[ { id: "role", label: "Welche Position beschreibt dich am besten?", type: "radio", required: true, options: [ { label: "Founder", value: "Founder" } , { label: "Geschäftsführer", value: "GF" } , { label: "CMO", value: "CMO" } , { label: "Head of CRM", value: "Head of CRM" } , { label: "andere", value: "other" } , ], } , { id: "company", label: "Wie lautet dein Unternehmensname?", type: "text", placeholder: "Unternehmensname", required: true, } , { id: "shopUrl", label: "Wie lautet die URL deines Online-Shops?", type: "url", placeholder: "https://…", required: true, } , { id: "revenueYear", label: "Wie hoch war der Jahresumsatz im letzten Jahr?", type: "radio", required: true, options: [ { label: "weniger als 1M €", value: 750000 } , { label: "1M € - 5M €", value: 3000000 } , { label: "5M - 10M €", value: 7500000 } , { label: "10M € - 15M €", value: 12500000 } , { label: "mehr als 20M €", value: 22000000 } , ], } , { id: "aov", label: "Wie hoch ist dein durchschnittlicher Bestellwert (AOV, netto, ohne MwSt.)?", type: "number", suffix: "€", placeholder: "z. B. 65", required: true, } , { id: "ordersMonth", label: "Wie viele Bestellungen hat dein Shop durchschnittlich pro Monat?", type: "radio", required: true, options: [ { label: "unter 3000", value: 2000 } , { label: "3000 - 10.000", value: 6500 } , { label: "10.000 - 20.000", value: 15000 } , { label: "20.000 - 30.000", value: 25000 } , { label: "mehr als 30.000", value: 35000 } , ], } , { id: "margin", label: "Wie hoch ist deine Rohertragsmarge (Deckungsbeitrag I in % vom Netto-Umsatz)?", type: "radio", required: true, options: [ { label: "unter 30 %", value: 0.25 } , { label: "30 – 39 %", value: 0.345 } , { label: "40 – 49 %", value: 0.445 } , { label: "50 – 59 %", value: 0.545 } , { label: "60 % oder mehr", value: 0.65 } , ], } , { id: "returns", label: "Wie hoch ist deine Retourenquote?", type: "radio", required: true, options: [ { label: "unter 5 %", value: 0.03 } , { label: "5 – 9 %", value: 0.07 } , { label: "10 – 14 %", value: 0.12 } , { label: "15 – 24 %", value: 0.195 } , { label: "25 % oder mehr", value: 0.28 } , ], } , { id: "repeatShare", label: "Wie groß ist der Anteil wiederkehrender Kund:innen in den letzten 12 Monaten?", type: "radio", required: true, options: [ { label: "unter 20 %", value: 0.15 } , { label: "20 – 34 %", value: 0.27 } , { label: "35 – 49 %", value: 0.42 } , { label: "50 – 64 %", value: 0.57 } , { label: "65 % oder mehr", value: 0.70 } , ], } , { id: "cac", label: "Wie hoch sind deine durchschnittlichen Akquisekosten pro Neukunde (CAC, nur Paid)?", type: "radio", required: true, options: [ { label: "unter 15 €", value: 12.5 } , { label: "15 – 29 €", value: 22 } , { label: "30 – 49 €", value: 40 } , { label: "50 – 79 €", value: 65 } , { label: "80 € oder mehr", value: 90 } , ], } , { id: "ticketsMonth", label: "Wie viele Support-Tickets fallen bei dir durchschnittlich pro Monat an?", type: "radio", required: true, options: [ { label: "unter 100", value: 70 } , { label: "100 – 249", value: 175 } , { label: "250 – 499", value: 375 } , { label: "500 – 999", value: 750 } , { label: "1.000 oder mehr", value: 1_200 } , ], } , { id: "ticketCost", label: "Wie hoch sind deine durchschnittlichen Kosten pro Support-Ticket?", type: "radio", required: true, options: [ { label: "unter 2 €", value: 1.5 } , { label: "2 – 4 €", value: 3 } , { label: "5 – 9 €", value: 7 } , { label: "10 – 19 €", value: 15 } , { label: "20 € oder mehr", value: 25 } , ], } { label: "3 %", value: 0.03 } , { label: "5 %", value: 0.05 } , { label: "7 %", value: 0.07 } , { label: "10 % oder mehr", value: 0.10 } , ], } { label: "15 – 29 %", value: 0.22 } , { label: "30 – 44 %", value: 0.37 } , { label: "45 – 59 %", value: 0.52 } , { label: "60 % oder mehr", value: 0.65 } , ], } , // --- Kontakt (nicht Teil der Berechnung) --- { id: "contactName", label: "Wie lautet dein Vor- und Nachname?", type: "text", placeholder: "Max Mustermann", required: true, } , { id: "contactEmail", label: "Wie lautet deine E‑Mail Adresse?", type: "email", placeholder: "dein@email.com", required: true, } , { id: "contactPhone", label: "Wie lautet deine Mobilfunknummer?", type: "tel", placeholder: "+49 …", required: true, } ]; const totalSteps=questions.length; const current=questions[step]; // ---------------------------- // Handlers // ---------------------------- function setAnswer(id, value) { setAnswers((prev)=> ({ ...prev, [id]: value })); } function next() { if ( !isValid(current)) return; // basic guard setStep((s)=> Math.min(s + 1, totalSteps)); } function prev() { setStep((s)=> Math.max(s - 1, 0)); } function isValid(q) { const v=answers[q.id]; if (q.type==="number") return typeof v==="number" && !isNaN(v) && v>0; if (q.type==="url") return typeof v==="string" && v?.length>3; if (q.type==="email") return typeof v==="string" && /.+@.+[.].+/.test(v); if (q.type==="tel") return typeof v==="string" && v.replace(/[^0-9]/g, "").length>=7; if (q.type==="text") return typeof v==="string" && v?.trim().length>1; if (q.type==="radio") return v !==undefined && v !==null; return true; } // Enter to continue React.useEffect(()=> { const onKey=(e)=> { if (e.key==="Enter") { e.preventDefault(); if (step < totalSteps) next(); } } ; document.addEventListener("keydown", onKey); return ()=> document.removeEventListener("keydown", onKey); } , [step]); // ---------------------------- // Result URL path for conversion tracking: add "/result" suffix on the results screen React.useEffect(()=> { if (typeof window==="undefined") return; const { pathname, search } =window.location; const basePath=pathname.replace(/\/result\/?$/, ""); const resultPath=(basePath.endsWith ("/") ? basePath + "result" : basePath + "/result") + search; if (step >=totalSteps) { if (pathname !==resultPath) { window.history.pushState({} , "", resultPath); } } else { if (pathname !==basePath) { window.history.replaceState({} , "", basePath + search); } } } , [step, totalSteps]); // ---------------------------- // Calculations // ---------------------------- // Default, but editable on results page const [assumptions, setAssumptions]=useState({ rewardRate: 0.05, redeemShare: 0.4, aovUpliftRate: 0.06, repeatUpliftRate: 0.08, supportReductionRate: 0.1, saasCost: 0, }); const calc=useMemo(()=> { const aov=Number(answers.aov || 0); const orders=Number(answers.ordersMonth || 0); const returns=Number(answers.returns || 0); // fraction const margin=Number(answers.margin || 0); // fraction const rewardRate=Number(assumptions.rewardRate || 0); // fraction const redeemShare=Number(assumptions.redeemShare || 0); // fraction const tickets=Number(answers.ticketsMonth || 0); const ticketCost=Number(answers.ticketCost || 0); if ( !aov || !orders || !margin) return null; // Baseline net revenue and gross profit per month const monthlyRevenueNet=aov * orders * (1 - (returns || 0)); const monthlyGrossProfit=monthlyRevenueNet * margin; // Derive smart defaults from chosen rewardRate & redeemShare const derivedAovUplift=Math.min(0.02 + rewardRate * 0.6, 0.18); // 2% base + scaled, max 18% const derivedRepeatUplift=Math.min(redeemShare * 0.3 + rewardRate * 0.6, 0.25); // max 25% const aovUpliftRate=isFinite(assumptions.aovUpliftRate) ? Math.max(0, assumptions.aovUpliftRate) : derivedAovUplift; const repeatUpliftRate=isFinite(assumptions.repeatUpliftRate) ? Math.max(0, assumptions.repeatUpliftRate) : derivedRepeatUplift; const supportReductionRate=Math.max(0, assumptions.supportReductionRate || 0); // Revenue lifts const incrementalRevenueAOV=monthlyRevenueNet * redeemShare * (aovUpliftRate || derivedAovUplift); const incrementalRevenueRepeat=monthlyRevenueNet * (repeatUpliftRate || derivedRepeatUplift); const incrementalRevenue=incrementalRevenueAOV + incrementalRevenueRepeat; const incrementalGrossProfit=incrementalRevenue * margin; // Costs & savings const rewardCost=monthlyRevenueNet * rewardRate * redeemShare; // cost recognized on redeemed orders const supportSavings=tickets * ticketCost * supportReductionRate; // conservative default 10% const saasCost=assumptions.saasCost || 0; const netImpact=incrementalGrossProfit + supportSavings - rewardCost - saasCost; const roiOnRewards=rewardCost > 0 ? (incrementalGrossProfit + supportSavings - saasCost) / rewardCost - 1 : 0; return { monthlyRevenueNet, monthlyGrossProfit, aovUpliftRate: aovUpliftRate || derivedAovUplift, repeatUpliftRate: repeatUpliftRate || derivedRepeatUplift, supportReductionRate, incrementalRevenue, incrementalGrossProfit, rewardCost, supportSavings, saasCost, netImpact, roiOnRewards, } ; } , [answers, assumptions]); // ---------------------------- // UI // ---------------------------- if (step >=totalSteps) { return (

Dein ROI-Ergebnis

Alle Annahmen sind editierbar – passe sie an deine Realität an.

{ calc ? (

setShowAdvanced((s)=> !s) } > Advanced Einstellungen

setAssumptions((p)=> ({ ...p, rewardRate: v })) } /> setAssumptions((p)=> ({ ...p, redeemShare: v })) } /> setAssumptions((p)=> ({ ...p, aovUpliftRate: v })) } /> setAssumptions((p)=> ({ ...p, repeatUpliftRate: v })) } /> setAssumptions((p)=> ({ ...p, supportReductionRate: v })) } /> setAssumptions((p)=> ({ ...p, saasCost: v })) } suffix="€" />

Möchtest du das gemeinsam durchgehen?

Termin buchen

) : (

Es fehlen Eingaben für die Berechnung. Bitte gehe zurück und fülle alle Pflichtfelder aus.

) }

); } return (

{ /* Progress */ } { /* Question Card */ }

{ current.label }

{ /* Render field */ } { current.type==="radio" && (

{ (current.options || []).map((opt)=> ( { opt.label } { setAnswer(current.id, opt.value); setTimeout(()=> next(), 0); } } /> )) }

) } { (current.type==="text" || current.type==="email" || current.type==="tel") && ( setAnswer(current.id, e.target.value) } placeholder= { current.placeholder } className="w-full rounded-xl border border-neutral-300 px-3 py-2 outline-none focus:ring-2 focus:ring-neutral-900" />) } { current.type==="url" && ( setAnswer(current.id, e.target.value) } placeholder= { current.placeholder } className="w-full rounded-xl border border-neutral-300 px-3 py-2 outline-none focus:ring-2 focus:ring-neutral-900" />) } { current.type==="number" && (

setAnswer(current.id, Number(e.target.value)) } placeholder= { current.placeholder } className="w-full rounded-xl border border-neutral-300 px-3 py-2 outline-none focus:ring-2 focus:ring-neutral-900" /> { current.suffix ? ( { current.suffix } ) : null }

) } { /* Nav Buttons */ }

Hinweis: Prozentangaben werden als realistische Mittelwerte interpretiert. Du kannst die Effekte (AOV‑Uplift, Wiederkauf‑Uplift, Support‑Reduktion) später im Ergebnis feinjustieren.

); } function Stat({ label, value, emphasize=false }) { return (

{ label }

{ value }

); } function Slider({ label, min, max, step, value, onChange }) { return (

{ label }

onChange(Number(e.target.value)) } className="w-full" /> ); } function NumberField({ label, value, onChange, suffix }) { return (

{ label }

onChange(Number(e.target.value)) } className="w-full rounded-xl border border-neutral-300 px-3 py-2 outline-none focus:ring-2 focus:ring-neutral-900" /> { suffix ? ( { suffix } ) : null }

); }