• Added the two‑step Widerruf flow with an auth‑only CTA on the Widerrufsbelehrung page and a dedicated confirmation

screen where users pick an eligible end‑customer purchase and confirm. Eligibility is enforced server‑side
  (endcustomer_event, within 14 days, no event package created after purchase), refund is issued via Paddle, the
  purchase is marked refunded, the tenant package is deactivated, and a new confirmation email is sent using resources/
  views/emails/partials/layout.blade.php.

  Details

  - New controller + form request for the confirm flow: app/Http/Controllers/WithdrawalController.php, app/Http/
    Requests/Marketing/WithdrawalConfirmRequest.php
  - New confirmation page + CTA: resources/js/pages/marketing/WithdrawalConfirm.tsx, resources/js/pages/legal/Show.tsx
  - Routes + locale rewrites: routes/web.php, resources/js/lib/localizedPath.ts
  - New email notification + template: app/Notifications/Customer/WithdrawalConfirmed.php, resources/views/emails/
    withdrawal-confirmation.blade.php
  - Translations added for marketing UI + backend flash + email copy: public/lang/de/marketing.json, public/lang/en/
    marketing.json, resources/lang/de/marketing.php, resources/lang/en/marketing.php, resources/lang/de/emails.php,
    resources/lang/en/emails.php
  - Tests: tests/Feature/Marketing/WithdrawalConfirmationTest.php

resources/js/lib/localizedPath.ts

@@ -17,6 +17,8 @@ export const defaultLocaleRewrites: LocaleRewriteMap = {
   '/occasions/birthday': { de: '/anlaesse/geburtstag' },
   '/occasions/corporate-event': { de: '/anlaesse/firmenevent' },
   '/occasions/confirmation': { de: '/anlaesse/konfirmation' },
+  '/widerruf': { en: '/withdrawal/confirm' },
+  '/withdrawal/confirm': { de: '/widerruf' },
 };
 
 const sanitizePath = (input: string): string => {

resources/js/pages/legal/Show.tsx

@@ -1,5 +1,8 @@
 import React from 'react';
+import { Link, usePage } from '@inertiajs/react';
+import { useTranslation } from 'react-i18next';
 import MarketingLayout from '@/layouts/mainWebsite';
+import { useLocalizedRoutes } from '@/hooks/useLocalizedRoutes';
 
 type LegalShowProps = {
   seoTitle: string;
@@ -12,7 +15,11 @@ type LegalShowProps = {
 };
 
 const LegalShow: React.FC<LegalShowProps> = (props) => {
-  const { seoTitle, title, content, effectiveFromLabel, versionLabel } = props;
+  const { seoTitle, title, content, effectiveFromLabel, versionLabel, slug } = props;
+  const { t } = useTranslation('marketing');
+  const { localizedPath } = useLocalizedRoutes();
+  const { auth } = usePage<{ auth?: { user?: { id?: number } | null } }>().props;
+  const showWithdrawalAction = slug === 'widerrufsbelehrung' && Boolean(auth?.user);
 
   return (
     <MarketingLayout title={seoTitle}>
@@ -33,6 +40,23 @@ const LegalShow: React.FC<LegalShowProps> = (props) => {
             )}
           </header>
 
+          {showWithdrawalAction && (
+            <div className="mb-10 rounded-2xl border border-pink-200/60 bg-pink-50 p-6">
+              <h2 className="text-lg font-semibold text-gray-900">
+                {t('withdrawal.cta_title')}
+              </h2>
+              <p className="mt-2 text-sm text-gray-600">
+                {t('withdrawal.cta_body')}
+              </p>
+              <Link
+                href={localizedPath('/widerruf')}
+                className="mt-4 inline-flex items-center justify-center rounded-full bg-gray-900 px-5 py-2 text-sm font-semibold text-white transition hover:bg-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900"
+              >
+                {t('withdrawal.cta_button')}
+              </Link>
+            </div>
+          )}
+
           <article
             className="prose prose-slate max-w-none prose-headings:font-display"
             dangerouslySetInnerHTML={{ __html: content }}

resources/js/pages/marketing/WithdrawalConfirm.tsx

@@ -0,0 +1,169 @@
+import React, { useMemo } from 'react';
+import { Head, Link, useForm, usePage } from '@inertiajs/react';
+import { useTranslation } from 'react-i18next';
+import MarketingLayout from '@/layouts/mainWebsite';
+import { useLocalizedRoutes } from '@/hooks/useLocalizedRoutes';
+import { Button } from '@/components/ui/button';
+
+type EligiblePurchase = {
+  id: number;
+  package_name: string;
+  purchased_at: string;
+  expires_at: string;
+  price: number | string;
+  currency: string;
+};
+
+type WithdrawalConfirmProps = {
+  eligiblePurchases: EligiblePurchase[];
+  windowDays: number;
+};
+
+const WithdrawalConfirm: React.FC<WithdrawalConfirmProps> = ({ eligiblePurchases, windowDays }) => {
+  const { t, i18n } = useTranslation('marketing');
+  const { localizedPath } = useLocalizedRoutes();
+  const { flash } = usePage<{ flash?: { success?: string; error?: string } }>().props;
+  const initialPurchaseId = eligiblePurchases[0]?.id ?? null;
+  const { data, setData, post, processing, errors } = useForm<{ purchase_id: number | null }>({
+    purchase_id: initialPurchaseId,
+  });
+
+  const formatDate = (value: string) => new Date(value).toLocaleDateString(i18n.language);
+  const formatDateTime = (value: string) => new Date(value).toLocaleString(i18n.language);
+  const formattedPurchases = useMemo(
+    () => eligiblePurchases.map((purchase) => ({
+      ...purchase,
+      purchasedLabel: formatDateTime(purchase.purchased_at),
+      expiresLabel: formatDate(purchase.expires_at),
+    })),
+    [eligiblePurchases, i18n.language],
+  );
+
+  const handleSubmit = (event: React.FormEvent) => {
+    event.preventDefault();
+    post(localizedPath('/widerruf'), { preserveScroll: true });
+  };
+
+  const hasEligible = formattedPurchases.length > 0;
+
+  return (
+    <MarketingLayout title={t('withdrawal.title')}>
+      <Head title={t('withdrawal.title')} />
+      <section className="bg-white py-16">
+        <div className="mx-auto max-w-4xl px-6">
+          <header className="mb-10">
+            <p className="text-sm uppercase tracking-[0.2em] text-gray-400">
+              Fotospiel App
+            </p>
+            <h1 className="mt-2 text-3xl font-semibold text-gray-900 md:text-4xl">
+              {t('withdrawal.title')}
+            </h1>
+            <p className="mt-3 text-sm text-gray-500">
+              {t('withdrawal.subtitle', { days: windowDays })}
+            </p>
+          </header>
+
+          {flash?.success && (
+            <div className="mb-6 rounded-xl border border-emerald-200 bg-emerald-50 p-4 text-sm text-emerald-700">
+              {flash.success}
+            </div>
+          )}
+
+          {flash?.error && (
+            <div className="mb-6 rounded-xl border border-red-200 bg-red-50 p-4 text-sm text-red-700">
+              {flash.error}
+            </div>
+          )}
+
+          {!hasEligible ? (
+            <div className="rounded-2xl border border-gray-200 bg-gray-50 p-8">
+              <h2 className="text-lg font-semibold text-gray-900">
+                {t('withdrawal.empty_title')}
+              </h2>
+              <p className="mt-2 text-sm text-gray-600">
+                {t('withdrawal.empty_body')}
+              </p>
+              <Link
+                href={localizedPath('/packages')}
+                className="mt-6 inline-flex items-center text-sm font-semibold text-gray-900 underline underline-offset-4"
+              >
+                {t('withdrawal.empty_cta')}
+              </Link>
+            </div>
+          ) : (
+            <form onSubmit={handleSubmit} className="space-y-6">
+              <div className="rounded-2xl border border-gray-200 bg-white p-6 shadow-sm">
+                <h2 className="text-lg font-semibold text-gray-900">
+                  {t('withdrawal.selection_title')}
+                </h2>
+                <p className="mt-2 text-sm text-gray-600">
+                  {t('withdrawal.selection_body')}
+                </p>
+
+                <div className="mt-6 space-y-3">
+                  {formattedPurchases.map((purchase) => (
+                    <label
+                      key={purchase.id}
+                      className="flex cursor-pointer items-start gap-4 rounded-xl border border-gray-200 p-4 transition hover:border-gray-300"
+                    >
+                      <input
+                        type="radio"
+                        name="purchase_id"
+                        value={purchase.id}
+                        checked={data.purchase_id === purchase.id}
+                        onChange={() => setData('purchase_id', purchase.id)}
+                        className="mt-1 h-4 w-4 text-gray-900"
+                      />
+                      <div className="flex-1">
+                        <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+                          <div>
+                            <p className="text-sm font-semibold text-gray-900">
+                              {purchase.package_name}
+                            </p>
+                            <p className="mt-1 text-xs text-gray-500">
+                              {t('withdrawal.purchase_date', { date: purchase.purchasedLabel })}
+                            </p>
+                          </div>
+                          <div className="text-sm font-semibold text-gray-900">
+                            {purchase.price} {purchase.currency}
+                          </div>
+                        </div>
+                        <p className="mt-2 text-xs text-gray-500">
+                          {t('withdrawal.expires_at', { date: purchase.expiresLabel })}
+                        </p>
+                      </div>
+                    </label>
+                  ))}
+                </div>
+
+                {errors.purchase_id && (
+                  <p className="mt-3 text-sm text-red-600">
+                    {errors.purchase_id}
+                  </p>
+                )}
+              </div>
+
+              <div className="flex flex-col gap-4 rounded-2xl border border-gray-200 bg-gray-50 p-6 sm:flex-row sm:items-center sm:justify-between">
+                <div>
+                  <p className="text-sm font-semibold text-gray-900">
+                    {t('withdrawal.confirm_title')}
+                  </p>
+                  <p className="mt-1 text-sm text-gray-600">
+                    {t('withdrawal.confirm_body')}
+                  </p>
+                </div>
+                <Button type="submit" size="lg" disabled={processing || !data.purchase_id}>
+                  {processing ? t('withdrawal.confirm_processing') : t('withdrawal.confirm_button')}
+                </Button>
+              </div>
+            </form>
+          )}
+        </div>
+      </section>
+    </MarketingLayout>
+  );
+};
+
+WithdrawalConfirm.layout = (page: React.ReactNode) => page;
+
+export default WithdrawalConfirm;