isaaccladandCursor
817afb0c2b
Deploy Ladill Servers / deploy (push) Successful in 29s
Add shared btn-primary components and plus icons on create/new actions for a consistent Ladill UI. Co-authored-by: Cursor <cursoragent@cursor.com>
53 lines
3.1 KiB
PHP
53 lines
3.1 KiB
PHP
@extends('layouts.email')
|
|
@section('title', 'Upgrade storage — Ladill Email')
|
|
@section('content')
|
|
@php $fmt = fn ($m) => $currency.' '.number_format($m / 100, 2); @endphp
|
|
<div class="mx-auto max-w-lg">
|
|
<div class="flex items-center gap-2 text-sm text-slate-400">
|
|
<a href="{{ route('email.mailboxes.show', $mailbox['id']) }}" class="hover:text-slate-600">{{ $mailbox['address'] }}</a><span>/</span>
|
|
<span class="text-slate-600">Upgrade</span>
|
|
</div>
|
|
<h1 class="mt-2 text-xl font-semibold tracking-tight text-slate-900">Upgrade storage</h1>
|
|
<p class="mt-0.5 text-sm text-slate-500">
|
|
Currently on <strong>{{ \App\Support\MailboxPricing::label($currentMb) }}</strong>. Pick a larger plan — billed monthly from your wallet.
|
|
</p>
|
|
|
|
<div x-data="{
|
|
tiers: @js($tiers),
|
|
sel: {{ $defaultMb }},
|
|
balance: {{ $walletBalanceMinor }},
|
|
get tier() { return this.tiers.find(t => t.mb == this.sel) || this.tiers[0]; },
|
|
get price() { return this.tier.price_minor; },
|
|
fmt(m) { return '{{ $currency }} ' + (m / 100).toFixed(2); },
|
|
}">
|
|
<div class="mt-5 rounded-2xl border border-indigo-200 bg-indigo-50 px-4 py-3 text-sm text-indigo-800">
|
|
New plan: <strong><span x-text="fmt(price)"></span>/month</strong>, charged now from your wallet
|
|
(balance: <span x-text="fmt(balance)"></span>).
|
|
<a href="{{ $topupUrl }}" class="font-semibold underline" x-show="balance < price" x-cloak>Top up</a>
|
|
</div>
|
|
|
|
<form method="POST" action="{{ route('email.mailboxes.upgrade.store', $mailbox['id']) }}" class="mt-4 space-y-4 rounded-2xl border border-slate-200 bg-white p-6">
|
|
@csrf @method('PATCH')
|
|
<div>
|
|
<label class="block text-xs font-medium text-slate-600">Choose a plan</label>
|
|
<div class="mt-1.5 grid grid-cols-1 gap-2">
|
|
@foreach($tiers as $t)
|
|
<label class="flex cursor-pointer items-center justify-between rounded-xl border bg-slate-50 px-3.5 py-2.5 text-sm transition"
|
|
:class="sel == {{ $t['mb'] }} ? 'border-indigo-400 bg-indigo-50 ring-1 ring-indigo-200' : 'border-slate-200 hover:bg-slate-100'">
|
|
<span class="flex items-center gap-2.5">
|
|
<input type="radio" name="quota_mb" value="{{ $t['mb'] }}" x-model.number="sel" class="text-indigo-600 focus:ring-indigo-500">
|
|
<span class="font-medium text-slate-800">{{ $t['label'] }}</span>
|
|
</span>
|
|
<span class="text-slate-500">{{ $fmt($t['price_minor']) }}<span class="text-xs">/mo</span></span>
|
|
</label>
|
|
@endforeach
|
|
</div>
|
|
@error('quota_mb')<p class="mt-1 text-xs text-rose-600">{{ $message }}</p>@enderror
|
|
</div>
|
|
<button class="btn-primary w-full btn-primary-lg"
|
|
x-text="'Upgrade — ' + fmt(price) + '/mo'">Upgrade</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
@endsection
|