From 6f07c937e12fe831cfb306af43cfa057db05a593 Mon Sep 17 00:00:00 2001
From: "wd@odoo4projects.com" <wd@odoo4projects.com>
Date: Tue, 24 Mar 2026 19:53:43 +0000
Subject: [PATCH] Merge webhook donor form into main

---
 index.html | 108 ++++++++++++++++++++++++++++++++++++++++++-----------
 1 file changed, 86 insertions(+), 22 deletions(-)

diff --git a/index.html b/index.html
index 377f2e2..e5e3c5f 100644
--- a/index.html
+++ b/index.html
@@ -182,28 +182,92 @@
           <li class="flex gap-3"><span class="text-brand-emerald" aria-hidden="true">•</span><span data-i18n="trial-bullet3"></span></li>
         </ul>
       </div>
-      <form class="bg-white text-brand-ink rounded-3xl p-8 shadow-brand space-y-5" data-event="form:trial">
-        <label class="block text-sm font-medium">
-          <span data-i18n="trial-label-email"></span>
-          <input type="email" required class="mt-2 w-full rounded-2xl border border-brand-smoke px-4 py-3 focus:outline-none focus:ring-2 focus:ring-brand-accent" data-i18n-placeholder="trial-placeholder-email" />
-        </label>
-        <label class="block text-sm font-medium">
-          <span data-i18n="trial-label-priority"></span>
-          <select class="mt-2 w-full rounded-2xl border border-brand-smoke px-4 py-3 focus:outline-none focus:ring-2 focus:ring-brand-accent">
-            <option data-i18n-option="priority-1"></option>
-            <option data-i18n-option="priority-2"></option>
-            <option data-i18n-option="priority-3"></option>
-            <option data-i18n-option="priority-4"></option>
-          </select>
-        </label>
-        <label class="block text-sm font-medium">
-          <span data-i18n="trial-label-region"></span>
-          <input type="text" class="mt-2 w-full rounded-2xl border border-brand-smoke px-4 py-3 focus:outline-none focus:ring-2 focus:ring-brand-accent" data-i18n-placeholder="trial-placeholder-region" />
-        </label>
-        <p class="text-xs text-brand-ink/70" data-i18n="trial-microcopy"></p>
-        <button type="submit" class="w-full py-3 rounded-2xl bg-brand-accent text-brand-ink font-semibold" data-i18n="cta-trial"></button>
-        <p class="text-xs text-brand-ink/60 text-center" data-i18n="trial-help"></p>
-      </form>
+      <form id="donorForm" novalidate>
+  <select name="location" id="locationSelect" style="display:none">
+    <option value="">Select Location</option>
+    <option value="Boston">US, Boston</option>
+    <option value="Manchester">UK, Manchester</option>
+    <option value="Mumbai">IN, Mumbai</option>
+    <option value="Saopaulo">BR, Sao Paulo</option>
+    <option value="meppel">NL, Meppel</option>
+    <option value="sydney">AU, Sydney</option>
+  </select>
+
+  <input type="text" name="name" placeholder="Name" required>
+  <input type="text" name="company" placeholder="Company" required>
+  <input type="text" name="country" placeholder="Country" required>
+  <input type="text" name="street" placeholder="Street" required>
+
+  <div>
+    <input type="text" name="zip" placeholder="ZIP" required>
+    <input type="text" name="town" placeholder="Town" required>
+  </div>
+
+  <input type="email" name="email" placeholder="Email" required>
+
+  <input type="hidden" name="product" id="productField" value="">
+  <input type="hidden" name="price" id="priceField" value="">
+
+  <button type="submit">Send</button>
+
+  <div id="formMessage" aria-live="polite"></div>
+</form>
+
+<script>
+const WEBHOOK_URL = "https://002-001-5dd6e535-4d1c-46bc-9bd9-42ad4bc5f082.odoo4projects.com/webhook/c76e6b4e-af2f-4bc3-9875-6460d0ffc8e3";
+
+document.addEventListener('DOMContentLoaded', () => {
+  const form = document.getElementById('donorForm');
+  const msg = document.getElementById('formMessage');
+  const locationSelect = document.getElementById('locationSelect');
+
+  function maybeShowLocation(productName) {
+    if (!productName) { locationSelect.style.display = 'none'; locationSelect.required = false; return; }
+    if (productName.startsWith('_')) {
+      locationSelect.style.display = 'block';
+      locationSelect.required = true;
+    } else {
+      locationSelect.style.display = 'none';
+      locationSelect.required = false;
+      locationSelect.value = '';
+    }
+  }
+
+  // If you set product/price from buttons/links on the page, ensure those handlers call:
+  // document.getElementById('productField').value = 'exampleProduct';
+  // document.getElementById('priceField').value = '123';
+  // maybeShowLocation('exampleProduct');
+
+  form.addEventListener('submit', async (e) => {
+    e.preventDefault();
+    msg.textContent = '';
+
+    const data = {};
+    new FormData(form).forEach((value, key) => data[key] = value);
+
+    try {
+      const res = await fetch(WEBHOOK_URL, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(data)
+      });
+
+      if (res.ok) {
+        msg.textContent = 'Thank you — your submission was sent.';
+        form.reset();
+        maybeShowLocation('');
+      } else {
+        msg.textContent = 'Submission failed. Please try again.';
+        console.error('Webhook response status:', res.status, await res.text());
+      }
+    } catch (err) {
+      console.error(err);
+      msg.textContent = 'Error submitting form. Please try later.';
+    }
+  });
+});
+</script>
+
     </div>
   </section>