// ═══════════════════════════════════════════════
// JAGTAR STUDIO — Checkout Page
// ═══════════════════════════════════════════════
const JagtarCheckout = ({ onNavigate }) => {
const { c, H2, H3, Body, Label, CTA, Field, Section, Img } = JAGTAR;
const [step, setStep] = React.useState(0); // 0=details, 1=payment, 2=confirm
const [submitting, setSubmitting] = React.useState(false);
const [error, setError] = React.useState(null);
const [orderResult, setOrderResult] = React.useState(null);
const [form, setForm] = React.useState({
first_name: '', last_name: '', email: '',
street: '', city: '', postcode: '', country: '',
});
const update = (k) => (e) => setForm(s => ({ ...s, [k]: e.target.value }));
const detailsValid = (
form.first_name.trim() &&
form.last_name.trim() &&
/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email) &&
form.street.trim() && form.city.trim() &&
form.postcode.trim() && form.country.trim()
);
const submitOrder = async () => {
if (submitting) return;
setSubmitting(true);
setError(null);
try {
const res = await window.api('/api/orders', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
customer_name: `${form.first_name} ${form.last_name}`.trim(),
customer_email: form.email.trim(),
shipping_address: {
street: form.street.trim(),
city: form.city.trim(),
postcode: form.postcode.trim(),
country: form.country.trim(),
},
total_amount: 49,
currency: 'USD',
}),
});
const data = await res.json().catch(() => null);
if (!res.ok) throw new Error((data && data.error) || `Order failed (${res.status})`);
setOrderResult(data);
setStep(2);
} catch (e) {
setError(e.message || 'Could not place your order. Please try again.');
} finally {
setSubmitting(false);
}
};
const ProgressBar = () => (
{['Details', 'Payment', 'Confirmation'].map((label, i) => (
{i < step ? '✓' : i + 1}
{label}
{i < 2 && }
))}
{error}
) : null;
// ─── Step 0: Shipping Details ───
const DetailsStep = () => (
Where should we send it?
Free worldwide delivery. Arrives in approximately 15 days.
detailsValid && setStep(1)}
style={detailsValid ? {} : { opacity: 0.5, cursor: 'not-allowed' }}>
Continue to Payment
);
// ─── Step 1: Payment ───
const PaymentStep = () => (
Payment
Secure checkout. Your card is never stored.
{/* Order summary inline */}
Personalized Bust
$49
Shipping
Free
Total
$49
{submitting ? 'Placing order…' : `Place Order — $49`}
Card processing is not yet live — your order is recorded and we’ll reach out for payment.
);
// ─── Step 2: Confirmation ───
const ConfirmStep = () => {
const orderNumber = (orderResult && orderResult.order_number) || '#JS-2847';
const days = (orderResult && orderResult.estimated_delivery_days) || 15;
const eta = new Date(Date.now() + days * 24 * 60 * 60 * 1000)
.toLocaleDateString(undefined, { month: 'long', day: 'numeric', year: 'numeric' });
return (
{/* Checkmark */}
Your commission has begun.
We have received your order. You’ll receive a confirmation email at{' '}
{form.email} with photo upload instructions.
{[
['Order', orderNumber],
['Item', 'Personalized Bust'],
['Total', '$49'],
['Estimated delivery', eta],
].map(([k, v]) => (
{k}
{v}
))}
Questions? Email us at hello@jagtarstudio.com
onNavigate('home')}>Return Home
{/* Two-column layout on desktop for steps 0 & 1 */}
{step < 2 ? (
{/* Form column */}
{/* Sticky order card */}
![]()
Personalized Bust
Hand-finished resin {'·'} ~15cm
2 photographs {'·'} 15 days
Total
$49
Free worldwide shipping
{/* Subtle trust signals */}
{['Secure payment', 'Free shipping worldwide', '15-day delivery guarantee'].map((t, i) => (
))}
) : (
)}
);
};
Object.assign(window, { JagtarCheckout });