feat(overview): implement email verification check and update UI for unverified users

This commit is contained in:
Yoga Pangestu 2025-10-18 14:49:39 +07:00
parent 2648e66e54
commit acd4abca0a
2 changed files with 46 additions and 18 deletions

View File

@ -10,6 +10,20 @@
#[Layout('components.layouts.customer')]
class Overview extends Component
{
public bool $isVerified = false;
public function mount()
{
$this->isVerified = auth()->user()->hasVerifiedEmail();
}
public function checkEmailVerification()
{
auth()->user()->refresh();
$this->isVerified = auth()->user()->hasVerifiedEmail();
}
public function render()
{
return view('livewire.customer.dashboard.overview');

View File

@ -4,24 +4,6 @@
<flux:separator variant="subtle" />
<div class="mt-6 grid grid-cols-1 md:grid-cols-2 gap-4">
<flux:callout icon="envelope" color="rose" inline>
<flux:callout.heading> Silakan verifikasi email Anda agar bisa menikmati seluruh fitur kami.
</flux:callout.heading>
<x-slot name="actions">
<flux:button>Verifikasi -></flux:button>
</x-slot>
</flux:callout>
<flux:callout icon="star" color="purple" inline>
<flux:callout.heading> Temukan keuntungan eksklusif dan manfaat spesial sebagai member.
</flux:callout.heading>
<x-slot name="actions">
<flux:button>Lihat</flux:button>
</x-slot>
</flux:callout>
<flux:callout icon="user-group" color="blue">
<flux:callout.heading>
{{ auth()->user()?->membership?->tier?->name }}
@ -51,5 +33,37 @@
<flux:button>Tanya Ahli</flux:button>
</x-slot>
</flux:callout>
@if (!$isVerified)
<div wire:poll.3s="checkEmailVerification">
<flux:callout icon="envelope" color="rose" inline>
<flux:callout.heading> Silakan verifikasi email Anda agar bisa menikmati seluruh fitur kami.
</flux:callout.heading>
<x-slot name="actions">
<flux:button x-data
x-on:click.prevent="
if (/Android|iPhone|iPad|iPod/i.test(navigator.userAgent)) {
window.location.href = 'intent://mail.google.com/#Intent;scheme=https;package=com.google.android.gm;end';
} else {
window.open('https://mail.google.com', '_blank');
}
">
Verifikasi
</flux:button>
</x-slot>
</flux:callout>
</div>
@endif
<flux:callout icon="star" color="purple" inline>
<flux:callout.heading> Temukan keuntungan eksklusif dan manfaat spesial sebagai member.
</flux:callout.heading>
<x-slot name="actions">
<flux:button>Lihat</flux:button>
</x-slot>
</flux:callout>
</div>
</flux:main>