Widerrufsseite: Vertragsart Projektauftrag mit freiwilliger Nummer der Auftragsbestätigung

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

public/auftrag-widerruf.js

@@ -0,0 +1,56 @@
+/* Widerrufsseite: Vertragsart „Projektauftrag“ mit freiwilliger Nummer der Auftragsbestätigung (Feld abNummer).
+   Rechtsfunktion: dieses Modul darf die anderen Vertragsarten nie stören. Fällt es aus, funktioniert der Widerruf wie bisher.
+   Das Feld ist nur bei „Projektauftrag“ sichtbar; eine eingegebene, aber unpassende Nummer wird gemeldet und stoppt das Absenden,
+   ein leeres Feld lässt den Widerruf durch (der Widerruf bleibt formfrei). Die Meldung steht in auftrag-ansicht.js. */
+import { abNummerNormalisiert, texte } from './auftrag-ansicht.js'
+
+export function initProjektWiderruf(form) {
+  const wrap = form?.querySelector('#ab-nummer-wrap')
+  const feld = form?.querySelector('#abNummer')
+  const fehler = form?.querySelector('#form-error')
+  if (!form || !wrap || !feld || !fehler) return
+  const gewaehlt = () => form.querySelector('[name="order"]:checked')?.value
+  let eigeneMeldung = false
+
+  const meldungWeg = () => {
+    if (!eigeneMeldung) return
+    eigeneMeldung = false
+    fehler.textContent = ''
+    fehler.classList.add('hidden')
+  }
+  const zeige = () => {
+    const projekt = gewaehlt() === 'projekt'
+    wrap.classList.toggle('hidden', !projekt)
+    if (!projekt) {
+      feld.value = ''
+      meldungWeg()
+    }
+  }
+
+  form.addEventListener('change', zeige)
+  form.addEventListener('click', (ev) => {
+    if (!ev.target?.closest?.('button[type="submit"], input[type="submit"]') || gewaehlt() !== 'projekt') return
+    const eingabe = feld.value.trim()
+    if (!eingabe) {
+      feld.value = ''
+      meldungWeg()
+      return
+    }
+    const nummer = abNummerNormalisiert(eingabe)
+    if (!nummer) {
+      ev.preventDefault()
+      fehler.textContent = texte().abNummerUngueltig
+      fehler.classList.remove('hidden')
+      eigeneMeldung = true
+      feld.focus()
+      return
+    }
+    feld.value = nummer
+    meldungWeg()
+  })
+  zeige()
+}
+
+if (typeof document !== 'undefined' && document.getElementById('decl-form') && document.getElementById('ab-nummer-wrap')) {
+  initProjektWiderruf(document.getElementById('decl-form'))
+}

public/widerrufen.html

@@ -24,8 +24,15 @@
       <label class="radio"><input type="radio" name="order" value="termine" data-text="Terminplaner (Einrichtung)"> Terminplaner (Einrichtung)</label>
       <label class="radio"><input type="radio" name="order" value="shop" data-text="Webshop (Einrichtung)"> Webshop (Einrichtung)</label>
       <label class="radio"><input type="radio" name="order" value="zeiten" data-text="Öffnungszeiten live"> Öffnungszeiten live</label>
+      <label class="radio"><input type="radio" name="order" value="projekt" data-text="Projektauftrag (Auftragsbestätigung)"> Projektauftrag (Auftragsbestätigung)</label>
     </fieldset>
 
+    <!-- Nur bei „Projektauftrag“ und freiwillig (auftrag-widerruf.js blendet das Feld sonst aus und leert es); ohne das Skript bleibt es sichtbar -->
+    <div id="ab-nummer-wrap">
+      <label for="abNummer" data-label-for="abNummer" data-label="Nummer der Auftragsbestätigung">Nummer der Auftragsbestätigung <small>(falls zur Hand, zum Beispiel AB-2026-0001)</small></label>
+      <input id="abNummer" name="abNummer" maxlength="20" autocomplete="off" autocapitalize="characters" spellcheck="false" placeholder="AB-2026-0001">
+    </div>
+
     <label for="name" data-label-for="name" data-label="Name">Name</label>
     <input id="name" name="name" autocomplete="name" required maxlength="200">
 
@@ -49,7 +56,8 @@
 </main>
 <script src="/legal-form.js"></script>
 <script>
-  initLegalForm({ endpoint: '/api/abo/public/withdraw', fields: ['order', 'name', 'customerNumber', 'email'] })
+  initLegalForm({ endpoint: '/api/abo/public/withdraw', fields: ['order', 'abNummer', 'name', 'customerNumber', 'email'] })
 </script>
+<script type="module" src="/auftrag-widerruf.js"></script>
 </body>
 </html>