fix(membership): kasih kondisi ketika user tidak punya data member tapi tetap bisa login
This commit is contained in:
Yoga Pangestu
parent
bf7c7e12f6
commit
90a64ba46c
@ -15,6 +15,8 @@
|
||||
#[Layout('components.layouts.member')]
|
||||
class Membership extends Component
|
||||
{
|
||||
public ?MembershipModel $membership = null;
|
||||
|
||||
public array $stats = [];
|
||||
|
||||
public string $nextTierName = '';
|
||||
@ -31,7 +33,11 @@ class Membership extends Component
|
||||
|
||||
public function mount()
|
||||
{
|
||||
$membership = MembershipModel::with(['tier', 'tier.rewards'])->where('user_id', auth()->id())->first();
|
||||
$this->membership = MembershipModel::with(['tier', 'tier.rewards'])->where('user_id', auth()->id())->first();
|
||||
|
||||
if (! $this->membership) {
|
||||
return;
|
||||
}
|
||||
|
||||
$monthlyTierAddition = PointRecord::where('user_id', auth()->id())
|
||||
->where('type', PointRecordType::TIER)
|
||||
@ -40,42 +46,42 @@ public function mount()
|
||||
->whereMonth('created_at', now()->month)
|
||||
->sum('change');
|
||||
|
||||
$nextTier = Tier::where('min_points', '>', $membership->tier_points)
|
||||
$nextTier = Tier::where('min_points', '>', $this->membership->tier_points)
|
||||
->orderBy('min_points', 'asc')
|
||||
->first();
|
||||
|
||||
$this->nextTierName = $nextTier ? $nextTier->name : 'Maksimal';
|
||||
|
||||
$this->currentPoints = $membership->tier_points;
|
||||
$this->currentPoints = $this->membership->tier_points;
|
||||
|
||||
$this->nextTierPoints = $nextTier ? $nextTier->min_points : 'Maksimal';
|
||||
|
||||
$this->progress = ($membership->tier_points / $nextTier->min_points) * 100;
|
||||
$this->progress = ($this->membership->tier_points / $nextTier->min_points) * 100;
|
||||
|
||||
$this->stats = [
|
||||
[
|
||||
'title' => 'Poin Tier',
|
||||
'value' => currency($membership->tier_points),
|
||||
'value' => currency($this->membership->tier_points),
|
||||
'description' => '+'.currency($monthlyTierAddition).' bulan ini',
|
||||
],
|
||||
[
|
||||
'title' => 'Tier Sekarang',
|
||||
'value' => $membership->tier->name,
|
||||
'description' => 'Terdaftar sejak '.formatDate($membership->created_at),
|
||||
'value' => $this->membership->tier->name,
|
||||
'description' => 'Terdaftar sejak '.formatDate($this->membership->created_at),
|
||||
],
|
||||
[
|
||||
'title' => 'Tier Selanjutnya',
|
||||
'value' => $nextTier ? $nextTier->name : 'Maksimal',
|
||||
'description' => $nextTier ? ($nextTier->min_points - $membership->tier_points).' poin lagi' : 'Anda sudah berada di tier tertinggi',
|
||||
'description' => $nextTier ? ($nextTier->min_points - $this->membership->tier_points).' poin lagi' : 'Anda sudah berada di tier tertinggi',
|
||||
],
|
||||
[
|
||||
'title' => 'Poin Hadiah',
|
||||
'value' => currency($membership->reward_points),
|
||||
'value' => currency($this->membership->reward_points),
|
||||
'description' => 'Nikmati hadiah sekarang',
|
||||
],
|
||||
];
|
||||
|
||||
$this->rewards = TierReward::where('tier_id', $membership->tier_id)
|
||||
$this->rewards = TierReward::where('tier_id', $this->membership->tier_id)
|
||||
->latest()
|
||||
->get()
|
||||
->map(fn ($reward) => [
|
||||
|
||||
@ -2,90 +2,104 @@
|
||||
<flux:heading size="xl" level="1">{{ $pageTitle }}</flux:heading>
|
||||
|
||||
<div class="mt-6">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
|
||||
@foreach ($stats as $stat)
|
||||
<div class="rounded-lg px-6 py-4 bg-zinc-200 dark:bg-zinc-700">
|
||||
<div class="flex items-center justify-between">
|
||||
<flux:heading size="lg">{{ $stat['title'] }}</flux:heading>
|
||||
@if ($membership)
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
|
||||
@foreach ($stats as $stat)
|
||||
<div class="rounded-lg px-6 py-4 bg-zinc-200 dark:bg-zinc-700">
|
||||
<div class="flex items-center justify-between">
|
||||
<flux:heading size="lg">{{ $stat['title'] }}</flux:heading>
|
||||
</div>
|
||||
<flux:heading class="text-4xl! font-bold py-3 ">{{ $stat['value'] }}</flux:heading>
|
||||
<flux:text size="lg">{{ $stat['description'] }}</flux:text>
|
||||
</div>
|
||||
<flux:heading class="text-4xl! font-bold py-3 ">{{ $stat['value'] }}</flux:heading>
|
||||
<flux:text size="lg">{{ $stat['description'] }}</flux:text>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
<div class="bg-zinc-200 dark:bg-zinc-700 rounded-xl p-6 shadow-md mb-8">
|
||||
<h2 class="text-xl font-semibold mb-4">Proses ke Tier {{ $nextTierName }}</h2>
|
||||
<div class="relative">
|
||||
<div class="flex justify-between mb-2 text-sm text-gray-600">
|
||||
<flux:text>Sekarang: {{ $currentPoints }} poin</flux:text>
|
||||
<flux:text>Target: {{ $nextTierPoints }}</flux:text>
|
||||
</div>
|
||||
<div class="h-4 bg-white rounded-full overflow-hidden">
|
||||
<div class="h-full bg-gradient-to-r from-emerald-500 to-emerald-600 rounded-full transition-all duration-500"
|
||||
style="width: {{ $progress }}%"></div>
|
||||
</div>
|
||||
<flux:heading class="mt-2">{{ $progress }} %</flux:heading>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
<div class="lg:col-span-2">
|
||||
<flux:card class="mb-6 mt-2 bg-zinc-200 dark:bg-zinc-700">
|
||||
<flux:heading size="xl" class="text-2xl font-semibold mb-4">Redeem Hadiah
|
||||
</flux:heading>
|
||||
<div class="bg-zinc-200 dark:bg-zinc-700 rounded-xl p-6 shadow-md mb-8">
|
||||
<h2 class="text-xl font-semibold mb-4">Proses ke Tier {{ $nextTierName }}</h2>
|
||||
<div class="relative">
|
||||
<div class="flex justify-between mb-2 text-sm text-gray-600">
|
||||
<flux:text>Sekarang: {{ $currentPoints }} poin</flux:text>
|
||||
<flux:text>Target: {{ $nextTierPoints }}</flux:text>
|
||||
</div>
|
||||
<div class="h-4 bg-white rounded-full overflow-hidden">
|
||||
<div class="h-full bg-gradient-to-r from-emerald-500 to-emerald-600 rounded-full transition-all duration-500"
|
||||
style="width: {{ $progress }}%"></div>
|
||||
</div>
|
||||
<flux:heading class="mt-2">{{ $progress }} %</flux:heading>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
@foreach ($rewards as $reward)
|
||||
<div class="bg-zinc-50 rounded-xl p-4">
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="flex-1">
|
||||
<h3 class="font-semibold text-gray-900 mb-1">{{ $reward['name'] }}</h3>
|
||||
<p class="text-sm text-gray-500 mb-3">Seharga {{ $reward['value'] }}</p>
|
||||
<button
|
||||
class="px-4 py-1.5 bg-emerald-600 text-white rounded-lg text-sm font-medium hover:bg-emerald-700 transition-colors">
|
||||
Redeem
|
||||
</button>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
<div class="lg:col-span-2">
|
||||
<flux:card class="mb-6 mt-2 bg-zinc-200 dark:bg-zinc-700">
|
||||
<flux:heading size="xl" class="text-2xl font-semibold mb-4">Redeem Hadiah
|
||||
</flux:heading>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
@foreach ($rewards as $reward)
|
||||
<div class="bg-zinc-50 rounded-xl p-4">
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="flex-1">
|
||||
<h3 class="font-semibold text-gray-900 mb-1">{{ $reward['name'] }}</h3>
|
||||
<p class="text-sm text-gray-500 mb-3">Seharga {{ $reward['value'] }}</p>
|
||||
<button
|
||||
class="px-4 py-1.5 bg-emerald-600 text-white rounded-lg text-sm font-medium hover:bg-emerald-700 transition-colors">
|
||||
Redeem
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</flux:card>
|
||||
</div>
|
||||
|
||||
<div class="lg:col-span-1">
|
||||
<flux:card class="mb-6 mt-2 bg-zinc-200 dark:bg-zinc-700">
|
||||
<flux:heading size="xl" class="text-2xl font-semibold mb-4">Riwayat Poin
|
||||
</flux:heading>
|
||||
|
||||
<flux:table>
|
||||
<flux:table.columns>
|
||||
<flux:table.column>Tanggal</flux:table.column>
|
||||
<flux:table.column>Keterangan</flux:table.column>
|
||||
<flux:table.column>Poin</flux:table.column>
|
||||
<flux:table.column>Tipe</flux:table.column>
|
||||
</flux:table.columns>
|
||||
|
||||
<flux:table.rows>
|
||||
@foreach ($pointRecords as $pointRecords)
|
||||
<flux:table.row>
|
||||
<flux:table.cell>{{ $pointRecords['date'] }}</flux:table.cell>
|
||||
<flux:table.cell>{{ $pointRecords['description'] }}</flux:table.cell>
|
||||
<flux:table.cell variant="strong">
|
||||
<flux:text
|
||||
class="{{ $pointRecords['is_addition'] ? 'text-emerald-500' : 'text-red-500' }}">
|
||||
{{ $pointRecords['is_addition'] ? '+' : '-' }}
|
||||
{{ $pointRecords['change'] }}
|
||||
</flux:text>
|
||||
</flux:table.cell>
|
||||
<flux:table.cell>{{ $pointRecords['type'] }}</flux:table.cell>
|
||||
</flux:table.row>
|
||||
@endforeach
|
||||
</flux:table.rows>
|
||||
</flux:table>
|
||||
</flux:card>
|
||||
</div>
|
||||
</flux:card>
|
||||
</div>
|
||||
|
||||
<div class="lg:col-span-1">
|
||||
<flux:card class="mb-6 mt-2 bg-zinc-200 dark:bg-zinc-700">
|
||||
<flux:heading size="xl" class="text-2xl font-semibold mb-4">Riwayat Poin
|
||||
</flux:heading>
|
||||
|
||||
<flux:table>
|
||||
<flux:table.columns>
|
||||
<flux:table.column>Tanggal</flux:table.column>
|
||||
<flux:table.column>Keterangan</flux:table.column>
|
||||
<flux:table.column>Poin</flux:table.column>
|
||||
<flux:table.column>Tipe</flux:table.column>
|
||||
</flux:table.columns>
|
||||
|
||||
<flux:table.rows>
|
||||
@foreach ($pointRecords as $pointRecords)
|
||||
<flux:table.row>
|
||||
<flux:table.cell>{{ $pointRecords['date'] }}</flux:table.cell>
|
||||
<flux:table.cell>{{ $pointRecords['description'] }}</flux:table.cell>
|
||||
<flux:table.cell variant="strong">
|
||||
<flux:text
|
||||
class="{{ $pointRecords['is_addition'] ? 'text-emerald-500' : 'text-red-500' }}">
|
||||
{{ $pointRecords['is_addition'] ? '+' : '-' }}
|
||||
{{ $pointRecords['change'] }}
|
||||
</flux:text>
|
||||
</flux:table.cell>
|
||||
<flux:table.cell>{{ $pointRecords['type'] }}</flux:table.cell>
|
||||
</flux:table.row>
|
||||
@endforeach
|
||||
</flux:table.rows>
|
||||
</flux:table>
|
||||
</flux:card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@else
|
||||
<div class="flex justify-center flex-col">
|
||||
<dotlottie-wc src="https://lottie.host/4282c234-6d0f-4a8d-ad04-3d82f2783814/FuhTCVgPGi.lottie" autoplay
|
||||
loop style="width: 200px; height: 200px; margin: 0 auto;">
|
||||
</dotlottie-wc>
|
||||
<flux:text class="block text-center italic mt-5">
|
||||
Apa? Anda belum menjadi member, ayo sini <flux:link href="#">daftar.</flux:link>
|
||||
</flux:text>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</flux:main>
|
||||
@assets
|
||||
<script src="https://unpkg.com/@lottiefiles/dotlottie-wc@0.8.5/dist/dotlottie-wc.js" type="module"></script>
|
||||
@endassets
|
||||
|
||||
Loading…
Reference in New Issue
Block a user