initial checkin

src/pages/EquipmentBookPage.tsx

@@ -0,0 +1,97 @@
+import { useEffect, useState } from "react";
+import { Link, useNavigate, useParams } from "react-router-dom";
+import { formatApiMessage } from "../api/client";
+import * as api from "../api/services";
+import { useAuth } from "../auth/AuthContext";
+import {
+  attributionParamsFromSearch,
+  hasAttributionParams,
+  persistMarketingClickId,
+  readMarketingClickId,
+  stripAttributionFromUrl,
+} from "../marketing/attribution";
+import type { EquipmentItemDetail } from "../api/types";
+
+export function EquipmentBookPage() {
+  const { publicId } = useParams<{ publicId: string }>();
+  const navigate = useNavigate();
+  const { user } = useAuth();
+  const [item, setItem] = useState<EquipmentItemDetail | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    if (!publicId) return;
+    const pathnameAtStart = window.location.pathname;
+    const searchAtStart = window.location.search;
+    const attribution = attributionParamsFromSearch(searchAtStart);
+    let cancelled = false;
+    (async () => {
+      try {
+        const data = await api.getEquipmentItem(
+          publicId,
+          hasAttributionParams(attribution) ? attribution : undefined,
+        );
+        if (!cancelled) {
+          setItem(data);
+          if (hasAttributionParams(attribution)) {
+            persistMarketingClickId("equipment", publicId, data.marketing_click_id);
+            stripAttributionFromUrl(navigate, pathnameAtStart, searchAtStart);
+          }
+        }
+      } catch (e) {
+        if (!cancelled) setError(formatApiMessage(e));
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [publicId, navigate]);
+
+  if (loading) {
+    return (
+      <div className="page">
+        <p className="muted">Loading…</p>
+      </div>
+    );
+  }
+
+  if (error || !item) {
+    return (
+      <div className="page">
+        <p className="lede">{error ?? "Listing not found."}</p>
+        <Link to="/boats" className="text-link">
+          Back to boat rentals
+        </Link>
+      </div>
+    );
+  }
+
+  const marketingClickIdForConversion =
+    readMarketingClickId("equipment", item.public_id) ?? item.marketing_click_id;
+
+  return (
+    <div className="page booking-request-page">
+      <Link to={`/boats/item/${item.public_id}`} className="text-link">
+        ← Back to listing
+      </Link>
+      <h1>Request this rental</h1>
+      <p className="lede">
+        You are signed in as <strong>{user?.email}</strong>. Confirm details below; a full booking form can submit to
+        the WaterTrekk booking API next.
+      </p>
+      <article className="booking-request-summary">
+        <h2>{item.title}</h2>
+        <p className="muted">
+          {item.vendor_business_name} · {item.location} · ${item.price_per_day} / day
+        </p>
+        <p className="muted">
+          <code>marketing_click_id</code> {marketingClickIdForConversion}{" "}
+          <span className="muted">(send this on the booking request for attribution)</span>
+        </p>
+      </article>
+    </div>
+  );
+}