// Checkout page — order summary + shipping + mock payment + success const CheckoutPage = ({cart, removeItem, updateQty, clearCart, isReseller, setRoute}) => { const [step, setStep] = React.useState("form"); // form | success const [mobile, setMobile] = React.useState(() => window.innerWidth < 768); React.useEffect(() => { const h = () => setMobile(window.innerWidth < 768); window.addEventListener("resize", h); return () => window.removeEventListener("resize", h); }, []); const [form, setForm] = React.useState({ firstName:"", lastName:"", email:"", phone:"", address:"", city:"", state:"", zip:"", cardNum:"", cardExp:"", cardCvv:"", }); const [errors, setErrors] = React.useState({}); const items = cart || []; const wsDiscount = 0.55; const subtotal = items.reduce((sum, i) => { const price = isReseller ? i.price * wsDiscount : i.price; return sum + price * i.qty; }, 0); const shipping = subtotal >= 200 ? 0 : 18.99; const total = subtotal + shipping; const confirmNum = React.useRef("SSL-26-" + Math.floor(100000 + Math.random() * 900000)); const validate = () => { const e = {}; if (!form.firstName.trim()) e.firstName = "Required"; if (!form.lastName.trim()) e.lastName = "Required"; if (!form.email.trim()) e.email = "Required"; if (!form.address.trim()) e.address = "Required"; if (!form.city.trim()) e.city = "Required"; if (!form.state.trim()) e.state = "Required"; if (!form.zip.trim()) e.zip = "Required"; if (!form.cardNum.trim()) e.cardNum = "Required"; if (!form.cardExp.trim()) e.cardExp = "Required"; if (!form.cardCvv.trim()) e.cardCvv = "Required"; return e; }; const handleSubmit = (e) => { e.preventDefault(); const errs = validate(); if (Object.keys(errs).length) { setErrors(errs); return; } setStep("success"); clearCart && clearCart(); window.scrollTo({top:0, behavior:"instant"}); }; const set = (k, v) => { setForm(p => ({...p, [k]: v})); setErrors(p => ({...p, [k]: undefined})); }; if (step === "success") { return (
Order Confirmed You're all set.

Your order {confirmNum.current} has been received. You'll get a confirmation email at{" "} {form.email || "the address on file"} within a few minutes.

COAs are delivered with your shipment and uploaded to your account when lab results return — typically 3–5 business days before ship date.

Questions? Reach your account rep at{" "} info@smokeshowlabs.com{" "} or 213-943-9000.

); } if (items.length === 0) { return (
Checkout Cart is empty.

Add some products before checking out.
); } return (
Checkout Complete Your Order.
{/* Left — form */}
{/* Contact */}
set("firstName",e.target.value)} placeholder="Jane"/> set("lastName",e.target.value)} placeholder="Smith"/>
set("email",e.target.value)} placeholder="you@brand.co"/> set("phone",e.target.value)} placeholder="213-555-0100"/>
{/* Shipping address */} set("address",e.target.value)} placeholder="1234 Main St"/>
set("city",e.target.value)} placeholder="Los Angeles"/> set("state",e.target.value)} placeholder="CA" maxLength={2}/> set("zip",e.target.value)} placeholder="90015" maxLength={10}/>
{/* Payment */}
Secured · Encrypted
set("cardNum", e.target.value.replace(/\D/g,"").slice(0,16).replace(/(.{4})/g,"$1 ").trim())} placeholder="4242 4242 4242 4242" maxLength={19} />
{ let v = e.target.value.replace(/\D/g,""); if (v.length>2) v = v.slice(0,2)+"/"+v.slice(2,4); set("cardExp", v); }} placeholder="MM/YY" maxLength={5} /> set("cardCvv",e.target.value.replace(/\D/g,"").slice(0,4))} placeholder="123" maxLength={4} />

By placing your order you agree to our{" "} { setRoute("terms"); window.scrollTo({top:0,behavior:"instant"}); }} >Terms & Conditions{" "} and{" "} { setRoute("privacy"); window.scrollTo({top:0,behavior:"instant"}); }} >Privacy Policy. This site is for adults 21+.

{/* Right — order summary */}
— Order Summary
{/* Items */}
{items.map(item => { const price = isReseller ? item.price * wsDiscount : item.price; const hue = item.hue === "cyan" ? "var(--color-cyan)" : item.hue === "magenta" ? "var(--color-magenta)" : "var(--color-pink)"; return (
{item.name}
{item.type} · qty {item.qty}
${(price * item.qty).toFixed(2)}
); })}
{/* Totals */}
Subtotal ${subtotal.toFixed(2)}
Shipping {shipping === 0 ? "Free" : `$${shipping.toFixed(2)}`}
{shipping > 0 && (
Free shipping over $200
)}
Total ${total.toFixed(2)}
{isReseller && (
Wholesale pricing applied
)}
); }; const CheckoutSection = ({title, num, color, children}) => (
{num}
{title}
{children}
); const FieldWrap = ({error, children}) => (
{children} {error && {error}}
); window.CheckoutPage = CheckoutPage;