);
};
// ============================================================
// CHECKOUT DRAWER — Contact -> Shipping -> Stitch redirect
// ============================================================
const CheckoutDrawer = ({ open, onClose, cart }) => {
const [step, setStep] = React.useState(1);
const [form, setForm] = React.useState({ email:"", phone:"", first:"", last:"", address1:"", address2:"", city:"", province:"Gauteng", postal:"" });
const [errs, setErrs] = React.useState({});
const [processing, setProcessing] = React.useState(false);
const [payError, setPayError] = React.useState(null);
React.useEffect(() => {
if (!open) setTimeout(() => { setStep(1); setErrs({}); setProcessing(false); setPayError(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";
}
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 subtotal = cart.reduce((s, i) => s + 3200 * i.qty, 0);
const handlePay = () => {
setProcessing(true);
setPayError(null);
fetch("/api/checkout", {
method: "POST",
headers: { "content-type": "application/json" },
body: JSON.stringify({
amount: subtotal,
customer: { email: form.email, first: form.first, last: form.last, phone: form.phone },
shipping: { street1: form.address1, street2: form.address2, city: form.city, province: form.province, postal: form.postal },
items: cart.map(i => ({ name: "Airstep Therapeutic Trainer", qty: i.qty, price: 3200, size: i.size })),
}),
})
.then(r => r.json())
.then(data => {
if (!data.url) throw new Error(data.error || "No payment URL returned");
window.location.href = data.url;
})
.catch(err => {
setPayError(err.message || "Something went wrong. Please try again.");
setProcessing(false);
});
};
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
});