147 lines
9.2 KiB
PHP
147 lines
9.2 KiB
PHP
<div class="mx-auto max-w-[1120px] space-y-5">
|
||
<div class="flex flex-wrap items-start gap-4 animate-rise">
|
||
<div class="min-w-0">
|
||
<a href="{{ route('admin.customers') }}" wire:navigate class="text-xs font-semibold text-muted hover:text-ink">
|
||
‹ {{ __('customer_detail.back') }}
|
||
</a>
|
||
<h1 class="mt-1 text-2xl font-bold tracking-tight text-ink">{{ $customer->name }}</h1>
|
||
<p class="mt-1 font-mono text-sm text-muted">{{ $customer->email }}</p>
|
||
</div>
|
||
<x-ui.badge :status="$customer->status === 'active' ? 'active' : 'warning'" class="mt-6">
|
||
{{ __('customers.status.'.$customer->status) }}
|
||
</x-ui.badge>
|
||
</div>
|
||
|
||
<div class="grid gap-5 lg:grid-cols-[1fr_340px] lg:items-start">
|
||
<div class="space-y-5">
|
||
{{-- ── Write to them ────────────────────────────────────────────
|
||
The point of the page. An operator answering a question used to
|
||
have the name in one window and a mail client in another, and
|
||
afterwards nothing in the console said an answer had ever been
|
||
given. --}}
|
||
<div class="space-y-4 rounded-lg border border-line bg-surface p-6 shadow-xs animate-rise">
|
||
<div class="flex flex-wrap items-center gap-3">
|
||
<h2 class="font-semibold text-ink">{{ __('customer_message.title') }}</h2>
|
||
@if ($answering)
|
||
<x-ui.badge status="provisioning">{{ __('customer_message.answering') }}</x-ui.badge>
|
||
<button type="button" wire:click="cancelAnswer" class="text-xs font-semibold text-muted hover:text-ink">
|
||
{{ __('customer_message.cancel_answer') }}
|
||
</button>
|
||
@endif
|
||
</div>
|
||
|
||
<form wire:submit="send" class="space-y-4">
|
||
<x-ui.input name="subject" wire:model="subject" :label="__('customer_message.subject')" />
|
||
<div>
|
||
<label for="body" class="block text-sm font-medium text-body">{{ __('customer_message.body') }}</label>
|
||
<textarea id="body" rows="7" wire:model="body"
|
||
class="mt-1.5 block w-full rounded border border-line bg-surface px-3.5 py-2.5 text-sm text-ink placeholder:text-faint"
|
||
placeholder="{{ __('customer_message.body_hint') }}"></textarea>
|
||
@error('body')<p class="mt-1.5 text-xs text-danger">{{ $message }}</p>@enderror
|
||
</div>
|
||
<div class="flex flex-wrap items-center gap-3">
|
||
<x-ui.button type="submit" variant="primary" wire:loading.attr="disabled" wire:target="send">
|
||
<x-ui.icon name="send" class="size-4" />{{ __('customer_message.send') }}
|
||
</x-ui.button>
|
||
<p class="text-xs text-muted">{{ __('customer_message.note', ['email' => $customer->email]) }}</p>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
|
||
{{-- ── What they asked ──────────────────────────────────────── --}}
|
||
<div class="rounded-lg border border-line bg-surface p-6 shadow-xs animate-rise [animation-delay:60ms]">
|
||
<h2 class="font-semibold text-ink">{{ __('customer_detail.requests') }}</h2>
|
||
|
||
@if ($requests->isEmpty())
|
||
<p class="mt-3 text-sm text-muted">{{ __('customer_detail.no_requests') }}</p>
|
||
@else
|
||
<ul class="mt-3 divide-y divide-line">
|
||
@foreach ($requests as $request)
|
||
<li class="py-4">
|
||
<div class="flex flex-wrap items-baseline gap-x-3 gap-y-1">
|
||
<span class="font-medium text-ink">{{ $request->subject }}</span>
|
||
<x-ui.badge :status="$request->isOpen() ? 'warning' : 'active'">
|
||
{{ __('support.status.'.$request->status) }}
|
||
</x-ui.badge>
|
||
<span class="ml-auto text-xs text-muted">{{ $request->created_at->local()->isoFormat('D. MMM YYYY, HH:mm') }}</span>
|
||
</div>
|
||
{{-- The customer's own words, whole. Reading the
|
||
question was the other reason to leave the
|
||
console. --}}
|
||
<p class="mt-2 whitespace-pre-line text-sm leading-relaxed text-body">{{ $request->body }}</p>
|
||
@if ($request->isOpen())
|
||
<x-ui.button wire:click="answer('{{ $request->uuid }}')" variant="secondary" size="sm" class="mt-3">
|
||
{{ __('customer_detail.answer') }}
|
||
</x-ui.button>
|
||
@endif
|
||
</li>
|
||
@endforeach
|
||
</ul>
|
||
@endif
|
||
</div>
|
||
|
||
{{-- ── What we sent ─────────────────────────────────────────────
|
||
The delivery register, filtered to this customer: when, which
|
||
mail, and — where an operator wrote it — what it said. --}}
|
||
<div class="rounded-lg border border-line bg-surface p-6 shadow-xs animate-rise [animation-delay:120ms]">
|
||
<div class="flex flex-wrap items-center gap-3">
|
||
<h2 class="font-semibold text-ink">{{ __('customer_detail.mails') }}</h2>
|
||
<a href="{{ route('admin.mail-log') }}" class="ml-auto text-xs font-semibold text-accent-text hover:underline">
|
||
{{ __('customer_detail.all_mails') }} ›
|
||
</a>
|
||
</div>
|
||
|
||
@if ($mails->isEmpty())
|
||
<p class="mt-3 text-sm text-muted">{{ __('customer_detail.no_mails') }}</p>
|
||
@else
|
||
<ul class="mt-3 divide-y divide-line">
|
||
@foreach ($mails as $mail)
|
||
<li class="py-3">
|
||
<div class="flex flex-wrap items-baseline gap-x-3 gap-y-1 text-sm">
|
||
<span class="font-medium text-ink">{{ $mail->subject }}</span>
|
||
@if ($mail->from_operator)
|
||
<x-ui.badge status="provisioning">{{ __('customer_detail.by_hand') }}</x-ui.badge>
|
||
@endif
|
||
<span class="ml-auto font-mono text-xs text-muted">
|
||
{{ $mail->sent_at->local()->isoFormat('D. MMM YYYY, HH:mm') }}
|
||
</span>
|
||
</div>
|
||
@if ($mail->body)
|
||
<p class="mt-1.5 whitespace-pre-line text-xs leading-relaxed text-muted">{{ $mail->body }}</p>
|
||
@else
|
||
<p class="mt-1 font-mono text-xs text-faint">{{ $mail->kind() }}</p>
|
||
@endif
|
||
</li>
|
||
@endforeach
|
||
</ul>
|
||
@endif
|
||
</div>
|
||
</div>
|
||
|
||
{{-- ── Who they are ─────────────────────────────────────────────── --}}
|
||
<div class="space-y-4 rounded-lg border border-line bg-surface p-6 shadow-xs animate-rise [animation-delay:60ms]">
|
||
<h2 class="font-semibold text-ink">{{ __('customer_detail.contract') }}</h2>
|
||
|
||
<dl class="space-y-2.5 text-sm">
|
||
@foreach ([
|
||
__('customer_detail.plan') => $subscription ? __('billing.plan.'.$subscription->plan) : '—',
|
||
__('customer_detail.instance') => $instance?->subdomain ?? '—',
|
||
__('customer_detail.since') => $customer->created_at->local()->isoFormat('D. MMM YYYY'),
|
||
__('customer_detail.vat_id') => $customer->vat_id ?: '—',
|
||
] as $term => $value)
|
||
<div class="flex justify-between gap-3">
|
||
<dt class="text-muted">{{ $term }}</dt>
|
||
<dd class="text-right font-medium text-ink">{{ $value }}</dd>
|
||
</div>
|
||
@endforeach
|
||
</dl>
|
||
|
||
{{-- Prefilled with this customer, so writing an invoice for the work
|
||
just agreed is one click from the conversation about it. --}}
|
||
<x-ui.button :href="route('admin.invoices.new', ['customer' => $customer->uuid])" variant="secondary" class="w-full" wire:navigate>
|
||
<x-ui.icon name="receipt" class="size-4" />{{ __('customer_detail.write_invoice') }}
|
||
</x-ui.button>
|
||
</div>
|
||
</div>
|
||
</div>
|