139 lines
8.4 KiB
PHP
139 lines
8.4 KiB
PHP
@php
|
|
$locale = app()->getLocale();
|
|
@endphp
|
|
<div class="space-y-3.5" x-data="{ open: null }">
|
|
<header class="mb-2 flex flex-wrap items-center gap-3.5 animate-rise">
|
|
<div class="min-w-0 flex-1">
|
|
<p class="lbl">{{ __('support.eyebrow') }}</p>
|
|
<h1 class="mt-[7px] text-[23px] font-bold leading-[1.12] tracking-[-0.03em] text-ink min-[901px]:text-[30px]">
|
|
{{ __('support.title') }}
|
|
</h1>
|
|
</div>
|
|
|
|
<x-ui.button variant="ink" class="shrink-0"
|
|
x-on:click="$dispatch('openModal', { component: 'new-support-request' })">
|
|
<x-ui.icon name="plus" class="size-4" />{{ __('support.new') }}
|
|
</x-ui.button>
|
|
</header>
|
|
|
|
<div class="grid gap-3.5 min-[1101px]:grid-cols-[1fr_340px]">
|
|
{{-- ── The customer's own requests ──────────────────────────────────
|
|
The page used to lead with three cards about opening hours. What
|
|
somebody arriving here actually wants to know is what they already
|
|
asked and whether anybody has answered — so that goes first, and
|
|
the contact details move to the side where they belong. --}}
|
|
<div class="space-y-3.5">
|
|
<section class="overflow-hidden rounded-lg border border-line bg-surface shadow-xs animate-rise">
|
|
<div class="flex items-center justify-between gap-3 border-b border-line px-5 py-3.5">
|
|
<h2 class="font-semibold text-ink">{{ __('support.tickets') }}</h2>
|
|
@if ($openCount > 0)
|
|
<span class="inline-flex shrink-0 items-center gap-[7px] rounded-pill border border-accent-border bg-accent-subtle px-[11px] py-1 text-xs font-medium text-accent-text">
|
|
{{ trans_choice('support.open_count', $openCount, ['count' => $openCount]) }}
|
|
</span>
|
|
@endif
|
|
</div>
|
|
|
|
@forelse ($requests as $r)
|
|
<article class="flex flex-wrap items-start gap-3 border-b border-line px-5 py-4 last:border-0">
|
|
<div class="min-w-0 flex-1">
|
|
<p class="font-medium text-ink">{{ $r->subject }}</p>
|
|
<p class="mt-1 text-xs text-muted">
|
|
{{ __('support.category_'.$r->category) }}
|
|
· {{ $r->created_at->local()->locale($locale)->isoFormat('LL, LT') }}
|
|
@if ($r->reported_by) · {{ $r->reported_by }} @endif
|
|
</p>
|
|
@if ($r->answered_at)
|
|
<p class="mt-1 text-xs text-success">
|
|
{{ __('support.answered_at', ['when' => $r->answered_at->local()->locale($locale)->isoFormat('LL, LT')]) }}
|
|
</p>
|
|
@endif
|
|
</div>
|
|
|
|
@php $tone = ['open' => 'info', 'in_progress' => 'provisioning', 'answered' => 'active', 'closed' => 'suspended'][$r->status] ?? 'info'; @endphp
|
|
<x-ui.badge :status="$tone" class="shrink-0">{{ __('support.status_'.$r->status) }}</x-ui.badge>
|
|
</article>
|
|
@empty
|
|
{{-- An empty state that says what to do, not "no data". --}}
|
|
<div class="px-5 py-10 text-center">
|
|
<span class="mx-auto grid size-11 place-items-center rounded-lg bg-surface-2 text-muted">
|
|
<x-ui.icon name="life-buoy" class="size-5" />
|
|
</span>
|
|
<p class="mt-3 font-medium text-ink">{{ __('support.empty_title') }}</p>
|
|
<p class="mx-auto mt-1 max-w-sm text-sm text-muted">{{ __('support.empty_body') }}</p>
|
|
<x-ui.button variant="secondary" class="mt-4"
|
|
x-on:click="$dispatch('openModal', { component: 'new-support-request' })">
|
|
{{ __('support.new') }}
|
|
</x-ui.button>
|
|
</div>
|
|
@endforelse
|
|
</section>
|
|
|
|
{{-- ── Frequent questions ───────────────────────────────────────
|
|
Each answer ends where the thing can actually be done. An FAQ
|
|
that only describes a button leaves the reader hunting for it. --}}
|
|
<section class="overflow-hidden rounded-lg border border-line bg-surface shadow-xs animate-rise [animation-delay:60ms]">
|
|
<div class="border-b border-line px-5 py-3.5">
|
|
<h2 class="font-semibold text-ink">{{ __('support.faq') }}</h2>
|
|
</div>
|
|
<ul class="divide-y divide-line">
|
|
@foreach ($faqs as $i => $f)
|
|
<li>
|
|
<button type="button"
|
|
class="flex w-full items-center gap-3 px-5 py-3.5 text-left text-sm font-medium text-ink hover:bg-surface-hover"
|
|
@click="open = open === {{ $i }} ? null : {{ $i }}" :aria-expanded="open === {{ $i }}">
|
|
<span class="flex-1">{{ $f['q'] }}</span>
|
|
<x-ui.icon name="chevron-down" class="size-4 shrink-0 text-muted transition-transform"
|
|
::class="open === {{ $i }} ? 'rotate-180' : ''" />
|
|
</button>
|
|
<div x-show="open === {{ $i }}" x-cloak x-transition class="px-5 pb-4">
|
|
<p class="text-sm leading-relaxed text-muted">{{ $f['a'] }}</p>
|
|
@if ($f['to'])
|
|
<a href="{{ $f['to'] }}" wire:navigate
|
|
class="mt-2 inline-flex items-center gap-1.5 text-sm font-semibold text-accent-text hover:underline">
|
|
{{ $f['cta'] }}
|
|
<x-ui.icon name="chevron-down" class="size-3.5 -rotate-90" />
|
|
</a>
|
|
@endif
|
|
</div>
|
|
</li>
|
|
@endforeach
|
|
</ul>
|
|
</section>
|
|
</div>
|
|
|
|
{{-- ── Contact, and the one question an outage raises ───────────────
|
|
"Is it me or is it you" is what a customer asks first when
|
|
something is down, and it is answered by a page rather than by us. --}}
|
|
<aside class="space-y-3.5">
|
|
<section class="rounded-lg border border-line bg-surface p-5 shadow-xs animate-rise [animation-delay:120ms]">
|
|
<h2 class="font-semibold text-ink">{{ __('support.contact') }}</h2>
|
|
|
|
<dl class="mt-3.5 space-y-3.5 text-sm">
|
|
<div>
|
|
<dt class="lbl">{{ __('support.contact_email') }}</dt>
|
|
<dd class="mt-1">
|
|
<a href="mailto:support@clupilot.com" class="font-medium text-accent-text hover:underline">support@clupilot.com</a>
|
|
</dd>
|
|
</div>
|
|
<div>
|
|
<dt class="lbl">{{ __('support.contact_hours') }}</dt>
|
|
<dd class="mt-1 text-body">{{ __('support.contact_hours_val') }}</dd>
|
|
</div>
|
|
<div>
|
|
<dt class="lbl">{{ __('support.contact_sla') }}</dt>
|
|
<dd class="mt-1 text-body">{{ __('support.contact_sla_val') }}</dd>
|
|
</div>
|
|
</dl>
|
|
</section>
|
|
|
|
<section class="rounded-lg border border-line bg-surface p-5 shadow-xs animate-rise [animation-delay:180ms]">
|
|
<h2 class="font-semibold text-ink">{{ __('support.status_title') }}</h2>
|
|
<p class="mt-1.5 text-sm leading-relaxed text-muted">{{ __('support.status_body') }}</p>
|
|
<x-ui.button variant="secondary" size="sm" class="mt-3.5" :href="route('status')" target="_blank" rel="noopener">
|
|
<x-ui.icon name="external-link" class="size-4" />{{ __('support.status_cta') }}
|
|
</x-ui.button>
|
|
</section>
|
|
</aside>
|
|
</div>
|
|
</div>
|