Add Fluxon frontend storefront

2026-03-17 15:04:55 +01:00
parent 91ee7a14bf
commit 1d2f7c0732
89 changed files with 4580 additions and 29 deletions
--- a/frontend/src/pages/CheckoutPage.tsx
+++ b/frontend/src/pages/CheckoutPage.tsx
@@ -0,0 +1,132 @@
+import { FormEvent, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { api } from "../services/api";
+import { useAuth } from "../state/AuthContext";
+import { useCart } from "../state/CartContext";
+import type { CheckoutForm } from "../types";
+import { StatusView } from "../ui/StatusView";
+
+export function CheckoutPage() {
+  const { user } = useAuth();
+  const { items, subtotal, clearCart } = useCart();
+  const navigate = useNavigate();
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [form, setForm] = useState<CheckoutForm>({
+    fullName: user?.name ?? "",
+    email: user?.email ?? "",
+    address: "",
+    city: "",
+    postalCode: "",
+    paymentMethod: "CreditCard"
+  });
+
+  if (items.length === 0) {
+    return <StatusView title="Nothing to checkout" message="Your cart is empty. Add products before opening checkout." />;
+  }
+
+  async function handleSubmit(event: FormEvent) {
+    event.preventDefault();
+    setSubmitting(true);
+    setError(null);
+
+    try {
+      const order = await api.createOrder(form, items);
+      clearCart();
+      navigate(`/order-confirmation/${order.id}`, { state: { order } });
+    } catch (submitError) {
+      setError(submitError instanceof Error ? submitError.message : "Unable to create order");
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  return (
+    <div className="checkout-layout">
+      <form className="panel" onSubmit={handleSubmit}>
+        <span className="eyebrow">Checkout</span>
+        <h1>Collect shipping and payment details</h1>
+        <div className="form-grid">
+          <label>
+            Full name
+            <input
+              value={form.fullName}
+              onChange={(event) => setForm((current) => ({ ...current, fullName: event.target.value }))}
+              required
+            />
+          </label>
+          <label>
+            Email
+            <input
+              type="email"
+              value={form.email}
+              onChange={(event) => setForm((current) => ({ ...current, email: event.target.value }))}
+              required
+            />
+          </label>
+          <label>
+            Address
+            <input
+              value={form.address}
+              onChange={(event) => setForm((current) => ({ ...current, address: event.target.value }))}
+              required
+            />
+          </label>
+          <label>
+            City
+            <input
+              value={form.city}
+              onChange={(event) => setForm((current) => ({ ...current, city: event.target.value }))}
+              required
+            />
+          </label>
+          <label>
+            Postal code
+            <input
+              value={form.postalCode}
+              onChange={(event) => setForm((current) => ({ ...current, postalCode: event.target.value }))}
+              required
+            />
+          </label>
+          <label>
+            Payment method
+            <select
+              value={form.paymentMethod}
+              onChange={(event) =>
+                setForm((current) => ({
+                  ...current,
+                  paymentMethod: event.target.value as CheckoutForm["paymentMethod"]
+                }))
+              }
+            >
+              <option value="CreditCard">Credit card</option>
+              <option value="PayPal">PayPal</option>
+              <option value="CashOnDelivery">Cash on delivery</option>
+            </select>
+          </label>
+        </div>
+        {error ? <p className="error-text">{error}</p> : null}
+        <button type="submit" disabled={submitting}>
+          {submitting ? "Placing order..." : "Place order"}
+        </button>
+      </form>
+
+      <aside className="panel order-summary">
+        <span className="eyebrow">Order summary</span>
+        <h2>Ready for API handoff</h2>
+        {items.map((item) => (
+          <div className="summary-row" key={item.product.id}>
+            <span>
+              {item.product.name} x {item.quantity}
+            </span>
+            <strong>EUR {(item.quantity * item.unitPrice).toFixed(2)}</strong>
+          </div>
+        ))}
+        <div className="summary-row total">
+          <span>Total</span>
+          <strong>EUR {subtotal.toFixed(2)}</strong>
+        </div>
+      </aside>
+    </div>
+  );
+}