From 8f4823b6dd064e75b93e7ce3522d49d4e3cd79b8 Mon Sep 17 00:00:00 2001
From: Claude <claude@firefrostgaming.com>
Date: Sun, 12 Apr 2026 00:08:07 +0000
Subject: [PATCH] =?UTF-8?q?feat(appeals):=20Task=20#126=20Phase=202=20?=
 =?UTF-8?q?=E2=80=94=20Trinity=20Appeals=20form=20on=20policy=20page?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replaces the mailto: section on /cancellation-refund with a real form
that POSTs to https://discord-bot.firefrostgaming.com/api/appeals/submit.

Form fields: discord_username, email, circumstances, requested_outcome
Client-side: disables button during submit, shows result inline
Success: displays confirmation + appeal reference ID
Failure: shows error + falls back to support@ mailto

Backend was deployed earlier in this session — this closes the full
Phase 2 user-facing flow. End-to-end tested via curl; browser test
still needed post-deploy.

Preserves the mailto: line as a fallback below the form in case the
API endpoint is unreachable.
---
 cancellation-refund.njk | 76 ++++++++++++++++++++++++++++++++++++-----
 1 file changed, 67 insertions(+), 9 deletions(-)

diff --git a/cancellation-refund.njk b/cancellation-refund.njk
index 1a9ee75..3c7dbf7 100644
--- a/cancellation-refund.njk
+++ b/cancellation-refund.njk
@@ -40,15 +40,73 @@ description: Firefrost Gaming Cancellation and Refund Policy — We Don't Kick P
 
     <h2 style="color: #4ecdc4; font-size: 2rem; margin-top: 40px; margin-bottom: 20px;">The Trinity Appeal Process</h2>
     <p>We believe in second chances. If your access has been removed — whether due to a refund, chargeback, or other action — you have the right to appeal directly to the Trinity (Michael, Meg, and Holly, the co-founders of Firefrost Gaming).</p>
-    <p>To submit an appeal, please email <a href="mailto:support@firefrostgaming.com?subject=Trinity%20Appeal" style="color: #FFD700;">support@firefrostgaming.com</a> with the subject line <strong>"Trinity Appeal"</strong> and include:</p>
-    <ul style="margin-left: 20px; margin-bottom: 20px;">
-      <li style="margin-bottom: 10px;">Your Discord username</li>
-      <li style="margin-bottom: 10px;">The email address used for your subscription</li>
-      <li style="margin-bottom: 10px;">A brief explanation of the circumstances</li>
-      <li style="margin-bottom: 10px;">What outcome you are requesting</li>
-    </ul>
-    <p>The Trinity reviews every appeal personally. We will respond within 7 days. Decisions are made with compassion and context — we understand that mistakes happen, billing systems can be confusing, and life is complicated.</p>
-    <p style="color: #6b7280; font-style: italic; margin-top: 20px;">A dedicated appeals submission form with case tracking will be available in a future update. For now, email remains the primary channel.</p>
+    <p>To submit an appeal, please fill out the form below. The Trinity reviews every submission personally and responds within 7 days. Decisions are made with compassion and context — we understand that mistakes happen, billing systems can be confusing, and life is complicated.</p>
+
+    <form id="appealForm" style="margin-top: 30px; padding: 30px; background: rgba(168, 85, 247, 0.08); border: 1px solid rgba(168, 85, 247, 0.3); border-radius: 12px;">
+      <div style="margin-bottom: 20px;">
+        <label for="discord_username" style="display: block; color: #FFD700; font-weight: 600; margin-bottom: 8px;">Discord Username</label>
+        <input type="text" id="discord_username" name="discord_username" required maxlength="100" style="width: 100%; padding: 12px; background: #1a1a2e; border: 1px solid rgba(78, 205, 196, 0.3); border-radius: 6px; color: #e8f4f8; font-size: 1rem;" />
+      </div>
+      <div style="margin-bottom: 20px;">
+        <label for="email" style="display: block; color: #FFD700; font-weight: 600; margin-bottom: 8px;">Email (used for your subscription)</label>
+        <input type="email" id="email" name="email" required maxlength="255" style="width: 100%; padding: 12px; background: #1a1a2e; border: 1px solid rgba(78, 205, 196, 0.3); border-radius: 6px; color: #e8f4f8; font-size: 1rem;" />
+      </div>
+      <div style="margin-bottom: 20px;">
+        <label for="circumstances" style="display: block; color: #FFD700; font-weight: 600; margin-bottom: 8px;">What happened? (circumstances of the ban or concern)</label>
+        <textarea id="circumstances" name="circumstances" required maxlength="5000" rows="6" style="width: 100%; padding: 12px; background: #1a1a2e; border: 1px solid rgba(78, 205, 196, 0.3); border-radius: 6px; color: #e8f4f8; font-size: 1rem; resize: vertical;"></textarea>
+      </div>
+      <div style="margin-bottom: 20px;">
+        <label for="requested_outcome" style="display: block; color: #FFD700; font-weight: 600; margin-bottom: 8px;">What outcome are you requesting?</label>
+        <textarea id="requested_outcome" name="requested_outcome" required maxlength="2000" rows="3" style="width: 100%; padding: 12px; background: #1a1a2e; border: 1px solid rgba(78, 205, 196, 0.3); border-radius: 6px; color: #e8f4f8; font-size: 1rem; resize: vertical;"></textarea>
+      </div>
+      <button type="submit" id="appealSubmit" style="padding: 14px 40px; background: linear-gradient(135deg, #a855f7 0%, #4ecdc4 100%); color: white; border: none; border-radius: 8px; font-size: 1.1rem; font-weight: 700; cursor: pointer;">Submit Appeal to the Trinity</button>
+      <div id="appealResult" style="margin-top: 20px; padding: 15px; border-radius: 8px; display: none;"></div>
+    </form>
+
+    <script>
+    document.getElementById('appealForm').addEventListener('submit', async (e) => {
+      e.preventDefault();
+      const btn = document.getElementById('appealSubmit');
+      const result = document.getElementById('appealResult');
+      btn.disabled = true;
+      btn.textContent = 'Submitting...';
+      result.style.display = 'none';
+      try {
+        const res = await fetch('https://discord-bot.firefrostgaming.com/api/appeals/submit', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            discord_username: document.getElementById('discord_username').value,
+            email: document.getElementById('email').value,
+            circumstances: document.getElementById('circumstances').value,
+            requested_outcome: document.getElementById('requested_outcome').value
+          })
+        });
+        const data = await res.json();
+        if (res.ok) {
+          result.style.display = 'block';
+          result.style.background = 'rgba(78, 205, 196, 0.15)';
+          result.style.border = '1px solid #4ecdc4';
+          result.style.color = '#4ecdc4';
+          result.innerHTML = '<strong>✓ ' + data.message + '</strong><br>Appeal reference: #' + data.appeal_id;
+          document.getElementById('appealForm').reset();
+          btn.textContent = 'Appeal Submitted';
+        } else {
+          throw new Error(data.error || 'Submission failed');
+        }
+      } catch (err) {
+        result.style.display = 'block';
+        result.style.background = 'rgba(255, 107, 53, 0.15)';
+        result.style.border = '1px solid #ff6b35';
+        result.style.color = '#ff6b35';
+        result.innerHTML = '<strong>Submission failed:</strong> ' + err.message + '<br>Please email <a href="mailto:support@firefrostgaming.com" style="color: #FFD700;">support@firefrostgaming.com</a> directly.';
+        btn.disabled = false;
+        btn.textContent = 'Submit Appeal to the Trinity';
+      }
+    });
+    </script>
+
+    <p style="color: #6b7280; font-style: italic; margin-top: 20px;">Alternatively, you may email <a href="mailto:support@firefrostgaming.com?subject=Trinity%20Appeal" style="color: #a8dadc;">support@firefrostgaming.com</a> with the subject "Trinity Appeal" if the form is unavailable.</p>
 
     <h2 style="color: #4ecdc4; font-size: 2rem; margin-top: 40px; margin-bottom: 20px;">Hard Bans</h2>
     <p>We only remove all Firefrost Gaming access — including Awakened — in two circumstances:</p>