Buchungs-Seite: Feinschliff nach Review
- Aktueller-Tarif-Card erscheint erst mit vorhandener Buchung; die Kontingent-Kachel zeigt nur noch echte Zahlen (kein irreführendes "Unbegrenzt" vor dem Launch-Schalter) - Tarif-Cards plakativer: Icon je Tarif, größerer Preis, Trennlinie vor den Leistungen, mehr Abstand zum größeren Buchen-Button - "Prüfung und Veröffentlichung inklusive" statt "KI-Prüfung" - "Aktive Buchungen"-Panel entfernt (redundant zum Tarif-Panel); Verlauf als eigene, durch Trennlinie abgegrenzte Sektion - Tests angepasst; Suite 519 passed / 4 skipped Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
parent
23ac8bc7f1
commit
6a82e2a2a8
4 changed files with 92 additions and 131 deletions
|
|
@ -16,6 +16,13 @@
|
|||
`me.checkout.billing-portal`), aktive Buchungen + Verlauf real.
|
||||
Credit-Pakete/Marktplatz/Platzierungen entfernt (→ 9I bzw. Phase 2).
|
||||
Stripe Tax im Dashboard aktiviert („SaaS – business use", exklusiv).
|
||||
**Feinschliff nach Review (Kevin)**: Aktueller-Tarif-Card nur bei
|
||||
vorhandener Buchung (kein irreführendes „Unbegrenzt" vor dem Launch;
|
||||
Kontingent-Kachel nur als echte Zahl), Tarif-Cards plakativer
|
||||
(Icon je Tarif, größerer Preis, Trennlinie, mehr Abstand zum Button),
|
||||
„Prüfung und Veröffentlichung inklusive" ohne „KI",
|
||||
„Aktive Buchungen"-Panel entfernt (Info steht im Tarif-Panel),
|
||||
Verlauf als eigene, klar abgegrenzte Sektion.
|
||||
- **Dateien**: `resources/views/livewire/customer/bookings.blade.php`
|
||||
(Neufassung), `app/Http/Controllers/CheckoutController.php` +
|
||||
`app/Services/Billing/StripeCheckoutService.php` (Billing Portal),
|
||||
|
|
|
|||
|
|
@ -20,6 +20,17 @@ new #[Layout('components.layouts.app'), Title('Buchungen & Add-ons')] class exte
|
|||
return number_format($cents / 100, $cents % 100 === 0 ? 0 : 2, ',', '.').' €';
|
||||
}
|
||||
|
||||
public function planIcon(Plan $plan): string
|
||||
{
|
||||
return match ($plan->slug) {
|
||||
'starter' => 'rocket-launch',
|
||||
'business' => 'briefcase',
|
||||
'pro' => 'chart-bar',
|
||||
'agency' => 'building-office-2',
|
||||
default => 'megaphone',
|
||||
};
|
||||
}
|
||||
|
||||
public function with(): array
|
||||
{
|
||||
$user = auth()->user();
|
||||
|
|
@ -125,6 +136,9 @@ new #[Layout('components.layouts.app'), Title('Buchungen & Add-ons')] class exte
|
|||
</header>
|
||||
|
||||
{{-- ============== AKTUELLER TARIF ============== --}}
|
||||
{{-- Erscheint erst, wenn eine Buchung existiert — vorher würde hier nur
|
||||
„kein Tarif" stehen und das Kontingent wäre irreführend. --}}
|
||||
@if ($subscription || $legacyOptions->isNotEmpty() || $openPurchases->isNotEmpty())
|
||||
<article class="panel">
|
||||
<div class="panel-head">
|
||||
<span class="section-eyebrow">{{ __('Aktueller Tarif') }}</span>
|
||||
|
|
@ -133,7 +147,7 @@ new #[Layout('components.layouts.app'), Title('Buchungen & Add-ons')] class exte
|
|||
@elseif ($legacyOptions->isNotEmpty())
|
||||
<span class="badge ok dot">{{ __('Bestandstarif') }}</span>
|
||||
@else
|
||||
<span class="badge">{{ __('Kein Abo') }}</span>
|
||||
<span class="badge hub">{{ __('Einzel-PM') }}</span>
|
||||
@endif
|
||||
</div>
|
||||
<div class="p-5 grid gap-5 md:grid-cols-[1.2fr_0.8fr]">
|
||||
|
|
@ -180,30 +194,23 @@ new #[Layout('components.layouts.app'), Title('Buchungen & Add-ons')] class exte
|
|||
<p class="text-[12.5px] text-[color:var(--color-ink-2)] m-0">
|
||||
{{ __('Jeder Kauf berechtigt zu genau einer Veröffentlichung — eingelöst wird er erst, wenn die Pressemitteilung live geht.') }}
|
||||
</p>
|
||||
@else
|
||||
<div class="text-[15px] font-semibold text-[color:var(--color-ink)]">
|
||||
{{ __('Noch kein aktiver Tarif') }}
|
||||
</div>
|
||||
<p class="text-[12.5px] text-[color:var(--color-ink-2)] m-0">
|
||||
{{ __('Wählen Sie unten einen Tarif oder buchen Sie eine einzelne Pressemitteilung ohne Abo.') }}
|
||||
</p>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<div class="space-y-3">
|
||||
<div class="rounded-[6px] border border-[color:var(--color-bg-rule)] p-4 bg-[color:var(--color-bg-subtle)]">
|
||||
<div class="text-[12px] text-[color:var(--color-ink-3)]">{{ __('PM-Kontingent diesen Monat') }}</div>
|
||||
<div class="text-[22px] font-semibold text-[color:var(--color-ink)]">
|
||||
@if (is_null($quotaRemaining))
|
||||
{{ __('Unbegrenzt') }}
|
||||
@else
|
||||
{{-- Kontingent nur als echte Zahl — „unbegrenzt" wäre vor dem
|
||||
Launch-Schalter inhaltlich falsch. --}}
|
||||
@if (! is_null($quotaRemaining))
|
||||
<div class="rounded-[6px] border border-[color:var(--color-bg-rule)] p-4 bg-[color:var(--color-bg-subtle)]">
|
||||
<div class="text-[12px] text-[color:var(--color-ink-3)]">{{ __('PM-Kontingent diesen Monat') }}</div>
|
||||
<div class="text-[22px] font-semibold text-[color:var(--color-ink)]">
|
||||
{{ $quotaRemaining }} / {{ $quotaTotal }}
|
||||
@endif
|
||||
</div>
|
||||
<div class="text-[11.5px] text-[color:var(--color-ink-3)]">
|
||||
{{ __('Wird erst bei Veröffentlichung verbraucht.') }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-[11.5px] text-[color:var(--color-ink-3)]">
|
||||
{{ __('Wird erst bei Veröffentlichung verbraucht.') }}
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
@if ($subscription)
|
||||
<flux:button size="sm" variant="filled" icon="cog-6-tooth" class="w-full"
|
||||
href="{{ route('me.checkout.billing-portal') }}">
|
||||
|
|
@ -216,6 +223,7 @@ new #[Layout('components.layouts.app'), Title('Buchungen & Add-ons')] class exte
|
|||
</div>
|
||||
</div>
|
||||
</article>
|
||||
@endif
|
||||
|
||||
{{-- ============== TARIF-RASTER ============== --}}
|
||||
<section class="space-y-4" x-data="{ interval: '{{ $currentInterval ?? 'monthly' }}' }">
|
||||
|
|
@ -248,9 +256,15 @@ new #[Layout('components.layouts.app'), Title('Buchungen & Add-ons')] class exte
|
|||
@foreach ($plans as $plan)
|
||||
@php($isCurrent = $currentPlan && $plan->is($currentPlan))
|
||||
<article @class(['panel', 'ring-2 ring-[color:var(--color-hub)]' => $isCurrent]) wire:key="plan-{{ $plan->slug }}">
|
||||
<div class="p-5 space-y-4 flex flex-col h-full">
|
||||
<div class="p-6 space-y-5 flex flex-col h-full">
|
||||
<div class="flex items-start justify-between gap-2">
|
||||
<h3 class="text-[15px] font-bold text-[color:var(--color-ink)] m-0">{{ $plan->name }}</h3>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-11 h-11 rounded-[6px] flex items-center justify-center flex-shrink-0
|
||||
bg-[color:var(--color-hub-soft)] border border-[color:var(--color-hub-soft-2)] text-[color:var(--color-hub)]">
|
||||
<flux:icon :name="$this->planIcon($plan)" class="size-5" />
|
||||
</div>
|
||||
<h3 class="text-[17px] font-bold tracking-[-0.3px] text-[color:var(--color-ink)] m-0">{{ $plan->name }}</h3>
|
||||
</div>
|
||||
@if ($isCurrent)
|
||||
<span class="badge hub dot">{{ __('Aktuell') }}</span>
|
||||
@endif
|
||||
|
|
@ -258,20 +272,20 @@ new #[Layout('components.layouts.app'), Title('Buchungen & Add-ons')] class exte
|
|||
|
||||
<div>
|
||||
<div x-show="interval === 'monthly'">
|
||||
<span class="text-[26px] font-bold tracking-[-0.6px] text-[color:var(--color-ink)]">{{ $this->formatEuro($plan->monthly_price_cents) }}</span>
|
||||
<span class="text-[12px] text-[color:var(--color-ink-3)]">/ {{ __('Monat') }}</span>
|
||||
<span class="text-[32px] font-bold tracking-[-0.8px] leading-none text-[color:var(--color-ink)]">{{ $this->formatEuro($plan->monthly_price_cents) }}</span>
|
||||
<span class="text-[12.5px] text-[color:var(--color-ink-3)]">/ {{ __('Monat') }}</span>
|
||||
</div>
|
||||
<div x-show="interval === 'yearly'" x-cloak>
|
||||
<span class="text-[26px] font-bold tracking-[-0.6px] text-[color:var(--color-ink)]">{{ $this->formatEuro($plan->yearly_price_cents) }}</span>
|
||||
<span class="text-[12px] text-[color:var(--color-ink-3)]">/ {{ __('Jahr') }}</span>
|
||||
<span class="text-[32px] font-bold tracking-[-0.8px] leading-none text-[color:var(--color-ink)]">{{ $this->formatEuro($plan->yearly_price_cents) }}</span>
|
||||
<span class="text-[12.5px] text-[color:var(--color-ink-3)]">/ {{ __('Jahr') }}</span>
|
||||
</div>
|
||||
<div class="text-[11px] text-[color:var(--color-ink-3)] mt-0.5">{{ __('netto zzgl. USt.') }}</div>
|
||||
<div class="text-[11px] text-[color:var(--color-ink-3)] mt-1.5">{{ __('netto zzgl. USt.') }}</div>
|
||||
</div>
|
||||
|
||||
<ul class="m-0 p-0 list-none space-y-2 text-[12.5px] text-[color:var(--color-ink-2)] flex-1">
|
||||
<ul class="m-0 p-0 list-none space-y-2.5 text-[12.5px] text-[color:var(--color-ink-2)] flex-1 border-t border-[color:var(--color-bg-rule)] pt-4">
|
||||
<li class="flex items-start gap-2">
|
||||
<flux:icon.check class="size-4 flex-shrink-0 mt-0.5 text-[color:var(--color-hub)]" />
|
||||
{{ __(':quota Pressemitteilungen pro Monat', ['quota' => $plan->press_release_quota]) }}
|
||||
<span><strong class="text-[color:var(--color-ink)]">{{ $plan->press_release_quota }}</strong> {{ __('Pressemitteilungen pro Monat') }}</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<flux:icon.check class="size-4 flex-shrink-0 mt-0.5 text-[color:var(--color-hub)]" />
|
||||
|
|
@ -283,28 +297,30 @@ new #[Layout('components.layouts.app'), Title('Buchungen & Add-ons')] class exte
|
|||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<flux:icon.check class="size-4 flex-shrink-0 mt-0.5 text-[color:var(--color-hub)]" />
|
||||
{{ __('KI-Prüfung & Veröffentlichung inklusive') }}
|
||||
{{ __('Prüfung und Veröffentlichung inklusive') }}
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@if ($subscription)
|
||||
<flux:button size="sm" variant="filled" class="w-full" disabled>
|
||||
{{ $isCurrent ? __('Ihr aktueller Tarif') : __('Wechsel über „Abo verwalten"') }}
|
||||
</flux:button>
|
||||
@else
|
||||
<div x-show="interval === 'monthly'">
|
||||
<flux:button size="sm" variant="primary" class="w-full"
|
||||
href="{{ route('me.checkout.subscription', ['planSlug' => $plan->slug, 'interval' => 'monthly']) }}">
|
||||
{{ __('Monatlich buchen') }}
|
||||
<div class="pt-2">
|
||||
@if ($subscription)
|
||||
<flux:button variant="filled" class="w-full" disabled>
|
||||
{{ $isCurrent ? __('Ihr aktueller Tarif') : __('Wechsel über „Abo verwalten"') }}
|
||||
</flux:button>
|
||||
</div>
|
||||
<div x-show="interval === 'yearly'" x-cloak>
|
||||
<flux:button size="sm" variant="primary" class="w-full"
|
||||
href="{{ route('me.checkout.subscription', ['planSlug' => $plan->slug, 'interval' => 'yearly']) }}">
|
||||
{{ __('Jährlich buchen') }}
|
||||
</flux:button>
|
||||
</div>
|
||||
@endif
|
||||
@else
|
||||
<div x-show="interval === 'monthly'">
|
||||
<flux:button variant="primary" class="w-full"
|
||||
href="{{ route('me.checkout.subscription', ['planSlug' => $plan->slug, 'interval' => 'monthly']) }}">
|
||||
{{ __('Monatlich buchen') }}
|
||||
</flux:button>
|
||||
</div>
|
||||
<div x-show="interval === 'yearly'" x-cloak>
|
||||
<flux:button variant="primary" class="w-full"
|
||||
href="{{ route('me.checkout.subscription', ['planSlug' => $plan->slug, 'interval' => 'yearly']) }}">
|
||||
{{ __('Jährlich buchen') }}
|
||||
</flux:button>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
@endforeach
|
||||
|
|
@ -350,83 +366,21 @@ new #[Layout('components.layouts.app'), Title('Buchungen & Add-ons')] class exte
|
|||
</div>
|
||||
</article>
|
||||
|
||||
{{-- ============== AKTIVE BUCHUNGEN / VERLAUF ============== --}}
|
||||
<section class="grid gap-4 lg:grid-cols-2">
|
||||
<article class="panel">
|
||||
<div class="panel-head">
|
||||
<span class="section-eyebrow">{{ __('Aktive Buchungen') }}</span>
|
||||
<span class="text-[11.5px] text-[color:var(--color-ink-3)]">{{ __('läuft aktuell') }}</span>
|
||||
</div>
|
||||
<div class="p-5">
|
||||
@if ($subscription || $legacyOptions->isNotEmpty() || $openPurchases->isNotEmpty())
|
||||
<div class="divide-y divide-[color:var(--color-bg-rule)]">
|
||||
@if ($subscription && $currentPlan)
|
||||
<div class="py-3 first:pt-0 last:pb-0 flex items-center justify-between gap-4">
|
||||
<div>
|
||||
<div class="text-[13px] font-semibold text-[color:var(--color-ink)]">
|
||||
{{ __('Abo: :plan', ['plan' => $currentPlan->name]) }}
|
||||
</div>
|
||||
<div class="text-[11.5px] text-[color:var(--color-ink-3)]">
|
||||
{{ $currentInterval === 'yearly' ? __('jährliche Abrechnung') : __('monatliche Abrechnung') }} · Stripe
|
||||
</div>
|
||||
</div>
|
||||
<span class="badge ok dot">{{ __('aktiv') }}</span>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@foreach ($legacyOptions as $option)
|
||||
<div class="py-3 first:pt-0 last:pb-0 flex items-center justify-between gap-4" wire:key="legacy-option-{{ $option->id }}">
|
||||
<div>
|
||||
<div class="text-[13px] font-semibold text-[color:var(--color-ink)]">
|
||||
{{ data_get($option->legacy_conditions, 'name') ?? $option->paymentOption?->article_number ?? __('Bestehende Vereinbarung') }}
|
||||
</div>
|
||||
<div class="text-[11.5px] text-[color:var(--color-ink-3)]">
|
||||
{{ __('Bestandstarif · Abrechnung per Rechnung') }}
|
||||
@if ($option->current_period_end)
|
||||
· {{ __('nächste Rechnung :date', ['date' => $option->current_period_end->format('d.m.Y')]) }}
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
<span class="badge ok dot">{{ __('aktiv') }}</span>
|
||||
</div>
|
||||
@endforeach
|
||||
|
||||
@foreach ($openPurchases as $purchase)
|
||||
<div class="py-3 first:pt-0 last:pb-0 flex items-center justify-between gap-4" wire:key="open-purchase-{{ $purchase->id }}">
|
||||
<div>
|
||||
<div class="text-[13px] font-semibold text-[color:var(--color-ink)]">
|
||||
{{ $purchase->type->label() }}
|
||||
</div>
|
||||
<div class="text-[11.5px] text-[color:var(--color-ink-3)]">
|
||||
{{ __('gekauft am :date', ['date' => $purchase->paid_at?->format('d.m.Y')]) }} · {{ $this->formatEuro($purchase->price_cents) }} {{ __('netto') }}
|
||||
</div>
|
||||
</div>
|
||||
<span class="badge hub">{{ __('einlösbar') }}</span>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
@else
|
||||
<div class="flex flex-col items-center justify-center px-4 py-10 text-center">
|
||||
<div class="w-14 h-14 rounded-[6px] flex items-center justify-center mb-3
|
||||
bg-[color:var(--color-hub-soft)] border border-[color:var(--color-hub-soft-2)] text-[color:var(--color-hub)]">
|
||||
<flux:icon.calendar-days class="size-6" />
|
||||
</div>
|
||||
<div class="text-[14px] font-semibold text-[color:var(--color-ink)] mb-1">
|
||||
{{ __('Noch keine aktiven Buchungen') }}
|
||||
</div>
|
||||
<p class="text-[12px] text-[color:var(--color-ink-3)] max-w-md m-0">
|
||||
{{ __('Ihr Abo, Bestandstarife und offene Einzelkäufe erscheinen hier mit Laufzeit und Abrechnungsart.') }}
|
||||
</p>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</article>
|
||||
{{-- ============== VERLAUF ============== --}}
|
||||
{{-- Aktive Buchungen stehen oben im Tarif-Panel — hier nur die Historie,
|
||||
durch Trennlinie und Zwischenüberschrift klar abgesetzt. --}}
|
||||
<section class="space-y-4 border-t border-[color:var(--color-bg-rule)] pt-8">
|
||||
<div>
|
||||
<span class="section-eyebrow">{{ __('Verlauf') }}</span>
|
||||
<h2 class="text-[22px] font-bold tracking-[-0.4px] mt-1 mb-1 text-[color:var(--color-ink)]">
|
||||
{{ __('Eingelöste Käufe') }}
|
||||
</h2>
|
||||
<p class="text-[12.5px] text-[color:var(--color-ink-3)] max-w-[640px] m-0">
|
||||
{{ __('Jeder eingelöste Einzelkauf mit der zugehörigen Pressemitteilung — die Rechnungen dazu finden Sie unter Rechnungen.') }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<article class="panel">
|
||||
<div class="panel-head">
|
||||
<span class="section-eyebrow">{{ __('Verlauf') }}</span>
|
||||
<span class="text-[11.5px] text-[color:var(--color-ink-3)]">{{ __('eingelöste Käufe') }}</span>
|
||||
</div>
|
||||
<div class="p-5">
|
||||
@if ($consumedPurchases->isNotEmpty())
|
||||
<div class="divide-y divide-[color:var(--color-bg-rule)]">
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@ test('the bookings page renders the active plans with checkout links', function
|
|||
->assertSee('Business')
|
||||
->assertSee('49 €')
|
||||
->assertSee('490 €')
|
||||
->assertSee('10 Pressemitteilungen pro Monat')
|
||||
->assertSee('Pressemitteilungen pro Monat')
|
||||
->assertSee('max. 2 Veröffentlichungen pro Tag')
|
||||
->assertSee('2 Monate gratis')
|
||||
->assertSee(route('me.checkout.subscription', ['planSlug' => 'business', 'interval' => 'monthly']), false)
|
||||
|
|
@ -61,13 +61,14 @@ test('the single pm block links to its checkout', function () {
|
|||
->assertSee(route('me.checkout.single-pm'), false);
|
||||
});
|
||||
|
||||
test('without any booking the page shows the empty state', function () {
|
||||
test('without any booking the current tariff card is hidden', function () {
|
||||
/** @var TestCase $this */
|
||||
$this->actingAs(bookingsTestCustomer());
|
||||
|
||||
LivewireVolt::test('customer.bookings')
|
||||
->assertSee('Noch kein aktiver Tarif')
|
||||
->assertSee('Noch keine aktiven Buchungen');
|
||||
->assertDontSee('Aktueller Tarif')
|
||||
->assertSee('Den passenden Tarif wählen')
|
||||
->assertSee('Noch kein Buchungsverlauf');
|
||||
});
|
||||
|
||||
test('a subscriber sees the current plan and the manage button', function () {
|
||||
|
|
@ -85,7 +86,7 @@ test('a subscriber sees the current plan and the manage button', function () {
|
|||
LivewireVolt::test('customer.bookings')
|
||||
->assertSee('Ihr aktueller Tarif')
|
||||
->assertSee('Abo verwalten')
|
||||
->assertSee('Abo: Pro')
|
||||
->assertSee('Pressemitteilungen pro Monat')
|
||||
->assertSee(route('me.checkout.billing-portal'), false);
|
||||
});
|
||||
|
||||
|
|
@ -104,11 +105,10 @@ test('a grandfathered legacy user sees the bestandstarif with unlimited quota',
|
|||
LivewireVolt::test('customer.bookings')
|
||||
->assertSee('Bestandstarif')
|
||||
->assertSee('Presseverteiler Premium')
|
||||
->assertSee('Unbegrenzte Pressemitteilungen (Bestandsschutz).')
|
||||
->assertSee('Unbegrenzt');
|
||||
->assertSee('Unbegrenzte Pressemitteilungen (Bestandsschutz).');
|
||||
});
|
||||
|
||||
test('open and consumed single purchases appear in bookings and history', function () {
|
||||
test('open and consumed single purchases appear in the card and history', function () {
|
||||
/** @var TestCase $this */
|
||||
$user = bookingsTestCustomer();
|
||||
SinglePurchase::factory()->paid()->create(['user_id' => $user->id]);
|
||||
|
|
@ -117,7 +117,7 @@ test('open and consumed single purchases appear in bookings and history', functi
|
|||
$this->actingAs($user);
|
||||
|
||||
LivewireVolt::test('customer.bookings')
|
||||
->assertSee('einlösbar')
|
||||
->assertSee('Einzel-Pressemitteilung verfügbar')
|
||||
->assertSee('eingelöst am');
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -80,7 +80,7 @@ test('customer bookings page shows the tariff grid and single pm block', functio
|
|||
->assertSee('29 €')
|
||||
->assertSee('2 Monate gratis')
|
||||
->assertSee('Einzel-Pressemitteilung — ohne Abo')
|
||||
->assertSee('Noch keine aktiven Buchungen');
|
||||
->assertSee('Noch kein Buchungsverlauf');
|
||||
});
|
||||
|
||||
test('admin can access both panel dashboards', function () {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue