);
};
// ============================================================
// CHECKOUT DRAWER (full multi-step)
// ============================================================
const fmtCard = (v) => v.replace(/\D/g,"").slice(0,16).replace(/(.{4})/g,"$1 ").trim();
const fmtExp = (v) => {
const d = v.replace(/\D/g,"").slice(0,4);
return d.length<=2 ? d : `${d.slice(0,2)}/${d.slice(2)}`;
};
const CheckoutDrawer = ({ open, onClose, cart, onSuccess }) => {
const [step, setStep] = React.useState(1); // 1=contact 2=shipping 3=payment
const [form, setForm] = React.useState({
email: "", phone: "",
first: "", last: "", address1: "", address2: "", city: "", province: "Gauteng", postal: "",
cardName: "", cardNum: "", exp: "", cvc: "",
});
const [errs, setErrs] = React.useState({});
const [processing, setProcessing] = React.useState(false);
// Peach Payments: filled when /api/checkout responds. { mode, checkoutId, scriptUrl }
const [peach, setPeach] = React.useState(null);
const peachMountRef = React.useRef(null);
React.useEffect(() => {
if (!open) {
// reset after closing animation
setTimeout(() => {
setStep(1); setErrs({}); setProcessing(false);
setPeach(null);
}, 400);
}
}, [open]);
const setField = (k, v) => setForm(f => ({...f, [k]: v}));
const validate = () => {
const e = {};
if (step === 1) {
if (!/^\S+@\S+\.\S+$/.test(form.email)) e.email = "Enter a valid email";
if (form.phone.replace(/\D/g,"").length < 9) e.phone = "Enter a valid phone";
}
if (step === 2) {
["first","last","address1","city","postal"].forEach(k => {
if (!form[k].trim()) e[k] = "Required";
});
if (form.postal && !/^\d{4}$/.test(form.postal)) e.postal = "4-digit code";
}
if (step === 3) {
if (!form.cardName.trim()) e.cardName = "Required";
if (form.cardNum.replace(/\s/g,"").length < 13) e.cardNum = "Invalid card number";
if (!/^\d{2}\/\d{2}$/.test(form.exp)) e.exp = "MM/YY";
if (!/^\d{3,4}$/.test(form.cvc)) e.cvc = "3–4 digits";
}
setErrs(e);
return Object.keys(e).length === 0;
};
const next = () => { if (validate()) setStep(s => s + 1); };
const back = () => setStep(s => Math.max(1, s - 1));
const submit = () => {
if (!validate()) return;
setProcessing(true);
setTimeout(() => {
const orderId = "AIR-" + Math.floor(100000 + Math.random()*900000);
onSuccess({ orderId, email: form.email, total: totals.total, items: cart });
}, 1400);
};
const subtotal = cart.reduce((s, i) => s + 3200 * i.qty, 0);
const shipFree = true;
const shipping = 0;
const totals = { subtotal, shipping, total: subtotal + shipping };
// ---- Peach Payments: create checkout session when entering step 3 ----
React.useEffect(() => {
if (!open || step !== 3 || peach) return;
let cancelled = false;
(async () => {
try {
const resp = await fetch("/api/checkout", {
method: "POST",
headers: { "content-type": "application/json" },
body: JSON.stringify({
amount: totals.total,
customer: { email: form.email, first: form.first, last: form.last, phone: form.phone },
billing: {
street1: form.address1, street2: form.address2,
city: form.city, state: form.province, postcode: form.postal,
},
items: cart.map(i => ({ name: "Airstep Therapeutic Trainer", qty: i.qty, price: 3200 })),
}),
});
if (!resp.ok) throw new Error("checkout endpoint not available");
const data = await resp.json();
if (!cancelled) setPeach(data);
} catch {
// No backend (static demo) → fall back to the existing mock card form
if (!cancelled) setPeach({ mode: "demo", checkoutId: "LOCAL_DEMO" });
}
})();
return () => { cancelled = true; };
}, [open, step, peach]);
// ---- Mount Peach Copy-and-Pay widget when real scriptUrl arrives ----
React.useEffect(() => {
if (!peach || !peach.scriptUrl || peach.mode === "demo") return;
if (document.querySelector(`script[data-peach="${peach.checkoutId}"]`)) return;
const s = document.createElement("script");
s.src = peach.scriptUrl;
s.async = true;
s.dataset.peach = peach.checkoutId;
document.body.appendChild(s);
}, [peach]);
return (
<>
);
};
// ============================================================
// SUCCESS DRAWER
// ============================================================
const SuccessDrawer = ({ open, onClose, order }) => {
if (!order) return null;
return (
<>
);
};
// Sticky Buy Bar
const StickyBuy = ({ show, onBuy }) => (
Airstep Therapeutic Trainer
Class A Medical Device · NAPPI-coded
);
Object.assign(window, {
BuyBlock, CartDrawer, CheckoutDrawer, SuccessDrawer, StickyBuy, formatZAR
});