Kevin Adametz
6b2356e36b
Kuendigungsbutton (Par. 312k BGB) im Hub-Footer unter dem Widerrufsbutton, staendig verfuegbar; fuehrt unmittelbar auf die Bestaetigungsseite mit dem Formular und der gesetzeskonformen Bestaetigungsschaltflaeche 'jetzt kuendigen'. Eigener Error-Bag, damit das Kontakt-Modal im Footer nicht mit aufspringt. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
166 lines
11 KiB
PHP
166 lines
11 KiB
PHP
@extends('web.layouts.web-master')
|
||
|
||
@section('title', 'Verträge hier kündigen')
|
||
@section('meta_description', 'Kündigen Sie Ihren laufenden Vertrag online – ohne Login, über die gesetzliche Bestätigungsseite nach § 312k BGB.')
|
||
|
||
{{--
|
||
Bestätigungsseite des gesetzlichen Kündigungsbuttons (§ 312k BGB).
|
||
Öffentlich ohne Login erreichbar; erfasst Art der Kündigung (Grund nur
|
||
bei außerordentlicher Kündigung), Zuordnungsdaten und den gewünschten
|
||
Beendigungszeitpunkt. Die Bestätigungsschaltfläche trägt gesetzeskonform
|
||
die Aufschrift „jetzt kündigen". Der Zugang wird sofort automatisch per
|
||
E-Mail bestätigt (TerminationController).
|
||
--}}
|
||
|
||
@section('content')
|
||
<x-web.static-page
|
||
eyebrow="Rechtliches"
|
||
title="Verträge hier kündigen"
|
||
breadcrumb="Kündigung"
|
||
lead="Hier können Sie Ihren laufenden Vertrag (z. B. Ihr Abo) online und ohne Anmeldung kündigen. Nach dem Absenden erhalten Sie sofort eine automatische Eingangsbestätigung per E-Mail mit Datum und Uhrzeit des Zugangs."
|
||
>
|
||
<div class="max-w-[680px]">
|
||
@if (session('termination-status'))
|
||
<div class="border border-bg-rule bg-bg-elev p-6" role="status">
|
||
<div class="section-eyebrow mb-3">Kündigung</div>
|
||
<h2 class="text-[19px] font-bold text-ink tracking-[-0.3px] m-0 mb-2">Kündigung eingegangen</h2>
|
||
<p class="text-[13.5px] text-ink-2 leading-[1.6] m-0">
|
||
{{ session('termination-status') }}
|
||
</p>
|
||
</div>
|
||
@else
|
||
<form method="POST" action="{{ route('kuendigung.store', ['edition' => 'de']) }}" novalidate
|
||
x-data="{
|
||
kind: @js(old('kind', 'ordentlich')),
|
||
terminateMode: @js(old('terminate_mode', 'asap')),
|
||
}">
|
||
@csrf
|
||
|
||
{{-- Art der Kündigung --}}
|
||
<fieldset class="border border-bg-rule p-5 m-0">
|
||
<legend class="text-[12px] font-semibold text-ink px-2">Art der Kündigung</legend>
|
||
|
||
<div class="space-y-3">
|
||
<label class="flex items-start gap-3 cursor-pointer">
|
||
<input type="radio" name="kind" value="ordentlich" x-model="kind" class="mt-0.5">
|
||
<span>
|
||
<span class="block text-[13.5px] font-semibold text-ink">Ordentliche Kündigung</span>
|
||
<span class="block text-[12.5px] text-ink-3 leading-[1.5]">Kündigung zum Ende der Laufzeit bzw. zum nächstmöglichen Zeitpunkt. Ein Grund ist nicht erforderlich.</span>
|
||
</span>
|
||
</label>
|
||
<label class="flex items-start gap-3 cursor-pointer">
|
||
<input type="radio" name="kind" value="ausserordentlich" x-model="kind" class="mt-0.5">
|
||
<span>
|
||
<span class="block text-[13.5px] font-semibold text-ink">Außerordentliche Kündigung</span>
|
||
<span class="block text-[12.5px] text-ink-3 leading-[1.5]">Kündigung aus wichtigem Grund mit sofortiger Wirkung.</span>
|
||
</span>
|
||
</label>
|
||
</div>
|
||
@error('kind', 'termination')
|
||
<p class="mt-2 text-[12px] text-red-600">{{ $message }}</p>
|
||
@enderror
|
||
|
||
<div x-show="kind === 'ausserordentlich'" x-cloak class="mt-4">
|
||
<label for="termination-reason" class="block text-[12px] font-semibold text-ink mb-1.5">Kündigungsgrund</label>
|
||
<textarea id="termination-reason" name="reason" rows="3"
|
||
class="w-full border border-bg-rule px-3 py-2.5 text-[13px] bg-white text-ink focus:outline-none focus:border-hub">{{ old('reason') }}</textarea>
|
||
@error('reason', 'termination')
|
||
<p class="mt-1 text-[12px] text-red-600">{{ $message }}</p>
|
||
@enderror
|
||
</div>
|
||
</fieldset>
|
||
|
||
{{-- Zuordnung des Vertrags --}}
|
||
<fieldset class="border border-bg-rule p-5 m-0 mt-6">
|
||
<legend class="text-[12px] font-semibold text-ink px-2">Wer kündigt?</legend>
|
||
|
||
<div class="space-y-4">
|
||
<div>
|
||
<label for="termination-name" class="block text-[12px] font-semibold text-ink mb-1.5">Ihr Name</label>
|
||
<input id="termination-name" type="text" name="name" value="{{ old('name') }}" required autocomplete="name"
|
||
class="w-full border border-bg-rule px-3 py-2.5 text-[13px] bg-white text-ink focus:outline-none focus:border-hub" />
|
||
@error('name', 'termination')
|
||
<p class="mt-1 text-[12px] text-red-600">{{ $message }}</p>
|
||
@enderror
|
||
</div>
|
||
|
||
<div>
|
||
<label for="termination-email" class="block text-[12px] font-semibold text-ink mb-1.5">E-Mail-Adresse <span class="text-ink-3 font-normal">(zur Vertragszuordnung und für die Eingangsbestätigung)</span></label>
|
||
<input id="termination-email" type="email" name="email" value="{{ old('email') }}" required autocomplete="email"
|
||
class="w-full border border-bg-rule px-3 py-2.5 text-[13px] bg-white text-ink focus:outline-none focus:border-hub" />
|
||
@error('email', 'termination')
|
||
<p class="mt-1 text-[12px] text-red-600">{{ $message }}</p>
|
||
@enderror
|
||
</div>
|
||
|
||
<div>
|
||
<label for="termination-reference" class="block text-[12px] font-semibold text-ink mb-1.5">
|
||
Vertrags-/Rechnungsnummer <span class="text-ink-3 font-normal">(falls zur Hand)</span>
|
||
</label>
|
||
<input id="termination-reference" type="text" name="contract_reference" value="{{ old('contract_reference') }}"
|
||
class="w-full border border-bg-rule px-3 py-2.5 text-[13px] bg-white text-ink focus:outline-none focus:border-hub" />
|
||
@error('contract_reference', 'termination')
|
||
<p class="mt-1 text-[12px] text-red-600">{{ $message }}</p>
|
||
@enderror
|
||
</div>
|
||
</div>
|
||
</fieldset>
|
||
|
||
{{-- Beendigungszeitpunkt --}}
|
||
<fieldset class="border border-bg-rule p-5 m-0 mt-6">
|
||
<legend class="text-[12px] font-semibold text-ink px-2">Zu welchem Zeitpunkt?</legend>
|
||
|
||
<div class="space-y-3">
|
||
<label class="flex items-center gap-3 cursor-pointer">
|
||
<input type="radio" name="terminate_mode" value="asap" x-model="terminateMode">
|
||
<span class="text-[13.5px] text-ink">Zum nächstmöglichen Zeitpunkt</span>
|
||
</label>
|
||
<label class="flex items-center gap-3 cursor-pointer">
|
||
<input type="radio" name="terminate_mode" value="date" x-model="terminateMode">
|
||
<span class="text-[13.5px] text-ink">Zu einem bestimmten Datum</span>
|
||
</label>
|
||
</div>
|
||
@error('terminate_mode', 'termination')
|
||
<p class="mt-2 text-[12px] text-red-600">{{ $message }}</p>
|
||
@enderror
|
||
|
||
<div x-show="terminateMode === 'date'" x-cloak class="mt-4">
|
||
<label for="termination-date" class="block text-[12px] font-semibold text-ink mb-1.5">Gewünschtes Beendigungsdatum</label>
|
||
<input id="termination-date" type="date" name="terminate_at" value="{{ old('terminate_at') }}"
|
||
class="border border-bg-rule px-3 py-2.5 text-[13px] bg-white text-ink focus:outline-none focus:border-hub" />
|
||
@error('terminate_at', 'termination')
|
||
<p class="mt-1 text-[12px] text-red-600">{{ $message }}</p>
|
||
@enderror
|
||
</div>
|
||
</fieldset>
|
||
|
||
{{-- Bot-Schutz: versteckte Honeypot-Felder (siehe TerminationController). --}}
|
||
<div class="hidden" aria-hidden="true">
|
||
<label for="termination-website">Website</label>
|
||
<input id="termination-website" type="text" name="website" tabindex="-1" autocomplete="off" value="{{ old('website') }}" />
|
||
<label for="termination-homepage">Homepage</label>
|
||
<input id="termination-homepage" type="text" name="homepage" tabindex="-1" autocomplete="off" value="{{ old('homepage') }}" />
|
||
</div>
|
||
|
||
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mt-7">
|
||
<p class="text-[11px] text-ink-3 leading-[1.5] m-0 max-w-[380px]">
|
||
Ihre Angaben werden nur zur Bearbeitung der Kündigung verarbeitet
|
||
(<a href="{{ route('datenschutz', ['edition' => 'de']) }}" class="underline hover:text-ink">Datenschutz</a>).
|
||
Mit dem Klick geht Ihre Kündigungserklärung bei uns ein.
|
||
</p>
|
||
{{-- § 312k BGB: Bestätigungsschaltfläche, Aufschrift „jetzt kündigen". --}}
|
||
<button type="submit"
|
||
class="inline-flex items-center justify-center px-6 py-3 text-[14px] font-semibold text-white bg-hub hover:bg-hub-2 rounded-[4px] whitespace-nowrap transition-colors cursor-pointer">
|
||
jetzt kündigen
|
||
</button>
|
||
</div>
|
||
</form>
|
||
|
||
<p class="text-[12px] text-ink-3 leading-[1.6] mt-8 mb-0">
|
||
Hinweis: Möchten Sie stattdessen einen kürzlich geschlossenen Vertrag innerhalb der
|
||
14-tägigen Frist widerrufen, nutzen Sie bitte den Button „Vertrag widerrufen" im Fußbereich dieser Seite.
|
||
</p>
|
||
@endif
|
||
</div>
|
||
</x-web.static-page>
|
||
@endsection
|