// Checkout page + order email const { useState: useSC } = React; // ============================================================================ // EMAIL NOTIFICATION SETUP (replace with your own) // ---------------------------------------------------------------------------- // This uses Web3Forms (https://web3forms.com) — free, no-signup email forwarding. // 1. Go to https://web3forms.com and enter your email to get an Access Key. // 2. Paste your key below in WEB3FORMS_KEY. // 3. Orders will arrive at the email you used to register the key. // ============================================================================ window.TF_CONFIG = { WEB3FORMS_KEY: "8e43591b-5aa7-4b6a-9780-37aa6597844f", BRAND_EMAIL: "orders@twofragrances.com", }; const PUNJAB_CITIES = [ { name: "Lahore", fee: 200 }, { name: "Faisalabad", fee: 400 }, { name: "Rawalpindi", fee: 400 }, { name: "Multan", fee: 400 }, { name: "Gujranwala", fee: 400 }, { name: "Sialkot", fee: 400 }, { name: "Bahawalpur", fee: 400 }, ]; function CheckoutPage({ cart, setCart, go }) { const [form, setForm] = useSC({ name: "", phone: "", email: "", address: "", city: "Lahore", notes: "", }); const [touched, setTouched] = useSC({}); const [submitting, setSubmitting] = useSC(false); const [placed, setPlaced] = useSC(null); // order object once placed const city = PUNJAB_CITIES.find(c => c.name === form.city) || PUNJAB_CITIES[0]; const subtotal = cart.reduce((s, i) => s + i.price * i.qty, 0); const shipping = cart.length === 0 ? 0 : city.fee; const total = subtotal + shipping; const errors = { name: form.name.trim().length < 2 ? "Please enter your full name" : "", phone: !/^[0-9+\-\s()]{10,}$/.test(form.phone.trim()) ? "Please enter a valid phone number" : "", email: !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email.trim()) ? "Please enter a valid email" : "", address: form.address.trim().length < 10 ? "Please enter a complete address" : "", }; const isValid = !errors.name && !errors.phone && !errors.email && !errors.address; const showErr = (f) => touched[f] && errors[f]; const update = (k) => (e) => setForm(f => ({ ...f, [k]: e.target.value })); const blur = (k) => () => setTouched(t => ({ ...t, [k]: true })); const placeOrder = async () => { setTouched({ name: true, phone: true, email: true, address: true }); if (!isValid || cart.length === 0) return; setSubmitting(true); const orderId = "TF-" + Date.now().toString(36).toUpperCase(); const itemLines = cart.map(i => ` • ${i.name} — ${i.size} × ${i.qty} = Rs ${(i.price * i.qty).toLocaleString("en-PK")}`).join("\n"); const orderText = ` NEW ORDER — ${orderId} ======================================= CUSTOMER Name: ${form.name} Phone: ${form.phone} Email: ${form.email} City: ${form.city} Address: ${form.address} Notes: ${form.notes || "—"} ITEMS ${itemLines} Subtotal: Rs ${subtotal.toLocaleString("en-PK")} Shipping: Rs ${shipping.toLocaleString("en-PK")} (${form.city}) TOTAL (COD): Rs ${total.toLocaleString("en-PK")} Payment: Cash on Delivery Placed: ${new Date().toLocaleString("en-PK")} `.trim(); const order = { id: orderId, form, cart: [...cart], subtotal, shipping, total, placedAt: new Date().toISOString(), }; // Try to email via Web3Forms if key is set try { if (window.TF_CONFIG.WEB3FORMS_KEY && window.TF_CONFIG.WEB3FORMS_KEY.length > 10) { await fetch("https://api.web3forms.com/submit", { method: "POST", headers: { "Content-Type": "application/json", "Accept": "application/json" }, body: JSON.stringify({ access_key: window.TF_CONFIG.WEB3FORMS_KEY, subject: `New Two Fragrances order — ${orderId} — Rs ${total.toLocaleString("en-PK")}`, from_name: "Two Fragrances Website", replyto: form.email, message: orderText, customer_name: form.name, customer_phone: form.phone, customer_city: form.city, order_total: "Rs " + total.toLocaleString("en-PK"), }), }); } } catch (err) { console.warn("Email send failed:", err); } // Log locally so the order is never lost const prev = JSON.parse(localStorage.getItem("tf_orders") || "[]"); localStorage.setItem("tf_orders", JSON.stringify([order, ...prev])); setSubmitting(false); setPlaced(order); setCart([]); window.scrollTo({ top: 0 }); }; if (placed) { return (
— Order Confirmed —

Thank you, {placed.form.name.split(" ")[0]}.

Your order has been placed. We'll call you on {placed.form.phone} within 24 hours to confirm, then dispatch to {placed.form.city}.

Order Reference
{placed.id}
{placed.cart.map(i => (
{i.name} — {i.size} × {i.qty} Rs {(i.price * i.qty).toLocaleString("en-PK")}
))}
Shipping — {placed.form.city} Rs {placed.shipping.toLocaleString("en-PK")}
Total · Cash on Delivery Rs {placed.total.toLocaleString("en-PK")}
); } return ( <>
go("home")}>Home  /  Checkout
{/* LEFT — form */}
— Checkout · Cash on Delivery —

Almost yours.

{cart.length === 0 ? (
Your cart is empty.

Add something to the cart before checking out.

) : ( <>
01 · Contact
02 · Delivery
City
03 · Payment
Cash on Delivery
Pay in cash when your order arrives at your door.
Rs {total.toLocaleString("en-PK")}

By placing this order you agree to pay in cash on delivery.

)}
{/* RIGHT — summary */} {cart.length > 0 && ( )}
); } function Field({ label, value, onChange, onBlur, error, placeholder, type = "text", full, textarea, short }) { const style = { width: "100%", padding: "14px 16px", border: "1px solid " + (error ? "#c0392b" : "var(--line)"), background: "var(--paper)", fontFamily: "inherit", fontSize: 15, color: "var(--ink)", outline: "none", transition: "border 0.2s", }; return (
{label}
{textarea ? (