cancel_reservation.html

Repository: wynajem_motorowek
Original path: cancel_reservation.html
Role: SOURCE
Size: 2945 bytes
Lines: 72
SHA-256: e5d5d9ae81eb77b9617f40354384921d168de62e4fc3ee686aeb1f8777c27387
Displayed range: 1–72
<!doctype html>
<html lang="pl">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Anulowanie rezerwacji</title>
  <style>
    body { font-family: Arial, sans-serif; background: #11151c; color: #f2f4f8; margin: 0; }
    .wrap { max-width: 680px; margin: 0 auto; padding: 24px; }
    .card { background: #1a2130; border: 1px solid #2e3a4f; border-radius: 12px; padding: 16px; }
    input, button { height: 38px; border-radius: 8px; border: 1px solid #3b4b67; background: #0f1623; color: #f2f4f8; padding: 0 12px; }
    button { cursor: pointer; }
    .row { display: flex; gap: 10px; flex-wrap: wrap; }
    .msg { margin-top: 12px; }
    .ok { color: #a4f1bf; }
    .err { color: #ffb2b9; }
  </style>
</head>
<body>
  <div class="wrap">
    <h1>Anulowanie rezerwacji</h1>
    <div class="card">
      <p>Podaj numer rezerwacji oraz kod anulowania otrzymany w linku potwierdzającym.</p>
      <div class="row">
        <input id="orderNumber" placeholder="Numer rezerwacji" style="min-width:260px;" />
        <input id="cancelToken" placeholder="Kod anulowania" style="min-width:260px;" />
        <button id="btnCancel">Anuluj rezerwację</button>
      </div>
      <div id="msg" class="msg"></div>
    </div>
  </div>

  <script>
    const API_BASE = window.BOOKING_API_BASE || window.location.origin;
    const orderInput = document.getElementById("orderNumber");
    const tokenInput = document.getElementById("cancelToken");
    const msg = document.getElementById("msg");

    const params = new URLSearchParams(window.location.search);
    const orderFromQuery = params.get("order") || "";
    const tokenFromQuery = params.get("token") || "";
    if (orderFromQuery) orderInput.value = orderFromQuery;
    if (tokenFromQuery) tokenInput.value = tokenFromQuery;

    document.getElementById("btnCancel").onclick = async () => {
      const orderNumber = (orderInput.value || "").trim();
      const cancelToken = (tokenInput.value || "").trim();
      if (!orderNumber || !cancelToken) {
        msg.className = "msg err";
        msg.textContent = "Podaj numer rezerwacji i kod anulowania.";
        return;
      }

      try {
        const res = await fetch(API_BASE + "/api/cancellations/request", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ orderNumber, cancelToken }),
        });
        const data = await res.json().catch(() => ({}));
        if (!res.ok || !data.ok) throw new Error(data.reason || "CANCEL_FAILED");

        msg.className = "msg ok";
        msg.textContent = `Rezerwacja anulowana. Status płatności: ${data.paymentStatus || "-"}.`;
      } catch (e) {
        msg.className = "msg err";
        msg.textContent = "Błąd anulowania: " + e.message;
      }
    };
  </script>
</body>
</html>