From 6178b219bfe281d5892d2c3b63d333bfbe5e64cd Mon Sep 17 00:00:00 2001
From: Oliver <oliver@odoo4projects.com>
Date: Wed, 24 Sep 2025 14:59:55 -0300
Subject: [PATCH] init

---
 upsell.html | 225 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 225 insertions(+)
 create mode 100644 upsell.html
diff --git a/upsell.html b/upsell.html
new file mode 100644
index 0000000..61a7a03
--- /dev/null
+++ b/upsell.html
@@ -0,0 +1,225 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Upgrade Form</title>
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+      padding: 20px;
+      max-width: 700px;
+      margin: auto;
+      background: #f9f9f9;
+    }
+    h2 {
+      text-align: center;
+      color: #333;
+    }
+    form {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 20px;
+      background: #fff;
+      padding: 20px;
+      border-radius: 12px;
+      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+    }
+    label {
+      display: block;
+      font-weight: bold;
+      margin-bottom: 6px;
+    }
+    input[type="number"], input[type="text"] {
+      width: 100%;
+      padding: 8px;
+      border-radius: 6px;
+      border: 1px solid #ccc;
+    }
+    input[type="checkbox"] {
+      transform: scale(1.2);
+      margin-right: 6px;
+    }
+    .full-width {
+      grid-column: 1 / -1;
+    }
+    .submit-section {
+      grid-column: 1 / -1;
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      margin-top: 20px;
+    }
+    button {
+      padding: 10px 20px;
+      background-color: #4CAF50;
+      color: white;
+      border: none;
+      border-radius: 8px;
+      cursor: pointer;
+      font-size: 16px;
+    }
+    button:hover {
+      background-color: #45a049;
+    }
+    .cost {
+      font-weight: bold;
+      font-size: 18px;
+    }
+    .readonly-text {
+      padding: 8px;
+      background: #eee;
+      border-radius: 6px;
+      border: 1px solid #ccc;
+    }
+  </style>
+</head>
+<body>
+  <h2>Upgrade Your Plan</h2>
+  <form id="upgradeForm">
+    <div>
+      <label><input type="checkbox" id="git" name="git"> GIT</label>
+    </div>
+
+    <div>
+      <label for="domains">Domains</label>
+      <input type="number" id="domains" name="domains" min="1" max="10">
+    </div>
+
+    <div>
+      <label for="backupSlots">Backup Slots</label>
+      <input type="number" id="backupSlots" name="backupSlots" min="2" max="10">
+    </div>
+
+    <div>
+      <label for="workers">Workers</label>
+      <input type="number" id="workers" name="workers" min="1" max="3">
+    </div>
+
+    <div class="full-width">
+      <label for="hdd">HDD (MB)</label>
+      <input type="number" id="hdd" name="hdd" min="250" max="2048" step="250">
+    </div>
+
+    <div class="full-width">
+      <label>Valid Until</label>
+      <div id="validUntil" class="readonly-text">Loading...</div>
+    </div>
+
+    <div class="submit-section">
+      <button type="submit">Upgrade</button>
+      <div class="cost" id="cost">$0,00</div>
+    </div>
+  </form>
+
+  <script>
+    const params = new URLSearchParams(window.location.search);
+    const uuid = params.get("UUID");
+
+    const webhookBase = "https://002-001-5dd6e535-4d1c-46bc-9bd9-42ad4bc5f082.odoo4projects.com/webhook/0c8536be-d175-4740-8e78-123159193b23"; 
+    const webhookGet = `/get-data?UUID=${uuid}`;
+    const webhookPost = `${webhookBase}/submit-data`;
+
+async function loadData() {
+  if (!uuid) {
+    alert("Missing UUID parameter in URL");
+    return;
+  }
+  try {
+    const res = await fetch(webhookBase); // Fetching the webhook JSON
+    if (!res.ok) throw new Error("Failed to fetch data");
+    const data = await res.json();
+
+    // Save original data globally
+    window.originalData = data;
+
+    // Save prices globally
+    window.prices = data.prices || {
+      git: 10,
+      domain: 1,
+      backupSlot: 1,
+      worker: 50,
+      hddUnit: 10
+    };
+
+    // Fill form fields
+    document.getElementById("git").checked = data.git || false;
+    document.getElementById("domains").value = data.domains || 1;
+    document.getElementById("backupSlots").value = data.backupSlots || 2;
+    document.getElementById("workers").value = data.workers || 1;
+    document.getElementById("hdd").value = data.hdd || 250;
+    document.getElementById("validUntil").textContent = data.validUntil || "-";
+
+    calculateCost();
+  } catch (err) {
+    console.error(err);
+    alert("Error loading data.");
+  }
+}
+
+
+
+function calculateCost() {
+  if (!window.originalData || !window.prices) return;
+
+  const domains = parseInt(document.getElementById("domains").value) || 0;
+  const backups = parseInt(document.getElementById("backupSlots").value) || 0;
+  const workers = parseInt(document.getElementById("workers").value) || 0;
+  const hdd = parseInt(document.getElementById("hdd").value) || 0;
+  const gitChecked = document.getElementById("git").checked;
+
+  const baselineDomains = parseInt(window.originalData.domains) || 0;
+  const baselineBackups = parseInt(window.originalData.backupSlots) || 0;
+  const baselineWorkers = parseInt(window.originalData.workers) || 0;
+  const baselineHDD = parseInt(window.originalData.hdd) || 0;
+  const baselineGit = window.originalData.git || false;
+
+  const extraDomains = Math.max(domains - baselineDomains, 0);
+  const extraBackups = Math.max(backups - baselineBackups, 0);
+  const extraWorkers = Math.max(workers - baselineWorkers, 0);
+  const extraHDDUnits = Math.max(Math.floor((hdd - baselineHDD) / 250), 0);
+  const extraGit = gitChecked && !baselineGit ? 1 : 0;
+
+  const cost =
+    extraGit * window.prices.git +
+    extraDomains * window.prices.domain +
+    extraBackups * window.prices.backupSlot +
+    extraWorkers * window.prices.worker +
+    extraHDDUnits * window.prices.hddUnit;
+
+  document.getElementById("cost").textContent = `$${cost.toFixed(2)}`;
+}
+
+    document.querySelectorAll("input").forEach(input => {
+      input.addEventListener("input", calculateCost);
+    });
+
+    document.getElementById("upgradeForm").addEventListener("submit", async (e) => {
+      e.preventDefault();
+      const payload = {
+        UUID: uuid,
+        git: document.getElementById("git").checked,
+        domains: parseInt(document.getElementById("domains").value),
+        backupSlots: parseInt(document.getElementById("backupSlots").value),
+        workers: parseInt(document.getElementById("workers").value),
+        hdd: parseInt(document.getElementById("hdd").value)
+      };
+
+      try {
+        const res = await fetch(webhookPost, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(payload)
+        });
+        if (!res.ok) throw new Error("Failed to submit data");
+        alert("Upgrade submitted successfully!");
+      } catch (err) {
+        console.error(err);
+        alert("Error submitting form.");
+      }
+    });
+
+    loadData();
+  </script>
+</body>
+</html>
+
