feat: Add empty state handling for rewards and redemption history.
This commit is contained in:
Yoga Pangestu
parent
f107e99d64
commit
8f3dd9975c
@ -24,103 +24,115 @@ class="w-fit bg-zinc-100 dark:bg-zinc-800/50 p-4 rounded-3xl border border-zinc-
|
||||
</flux:tabs>
|
||||
|
||||
<flux:tab.panel name="redeem-point">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-4 sm:gap-6">
|
||||
@foreach ($rewards as $reward)
|
||||
<div class="relative group h-[180px] sm:h-[200px] rounded-3xl transition-all duration-300 overflow-hidden"
|
||||
style="-webkit-mask-image: radial-gradient(circle at 0px 50%, transparent 12px, black 13px); mask-image: radial-gradient(circle at 0px 50%, transparent 12px, black 13px);">
|
||||
@if (!empty($rewards))
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-4 sm:gap-6">
|
||||
@foreach ($rewards as $reward)
|
||||
<div class="relative group h-[180px] sm:h-[200px] rounded-3xl transition-all duration-300 overflow-hidden"
|
||||
style="-webkit-mask-image: radial-gradient(circle at 0px 50%, transparent 12px, black 13px); mask-image: radial-gradient(circle at 0px 50%, transparent 12px, black 13px);">
|
||||
|
||||
<div class="absolute inset-0 z-0">
|
||||
@if ($reward['thumbnail'])
|
||||
<img src="{{ $reward['thumbnail'] }}" alt="{{ $reward['name'] }}"
|
||||
class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700">
|
||||
@else
|
||||
<div class="absolute inset-0 z-0">
|
||||
@if ($reward['thumbnail'])
|
||||
<img src="{{ $reward['thumbnail'] }}" alt="{{ $reward['name'] }}"
|
||||
class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700">
|
||||
@else
|
||||
<div
|
||||
class="w-full h-full bg-zinc-100 dark:bg-zinc-800 flex items-center justify-center">
|
||||
<flux:icon.gift class="size-16 text-zinc-200 dark:text-zinc-700" />
|
||||
</div>
|
||||
@endif
|
||||
<div
|
||||
class="w-full h-full bg-zinc-100 dark:bg-zinc-800 flex items-center justify-center">
|
||||
<flux:icon.gift class="size-16 text-zinc-200 dark:text-zinc-700" />
|
||||
class="absolute inset-0 bg-gradient-to-r from-black/95 via-black/40 to-transparent">
|
||||
</div>
|
||||
@endif
|
||||
<div
|
||||
class="absolute inset-0 bg-gradient-to-r from-black/95 via-black/40 to-transparent">
|
||||
</div>
|
||||
|
||||
<div class="relative h-full p-5 sm:p-6 flex flex-col justify-between z-10">
|
||||
<div>
|
||||
<div
|
||||
class="text-[10px] font-bold text-white/50 uppercase tracking-widest mb-1 truncate">
|
||||
{{ $reward['category_label'] }}
|
||||
</div>
|
||||
<div class="text-2xl sm:text-3xl text-white/70 italic leading-tight">
|
||||
{{ formatCurrencyNumber($reward['points']) }}
|
||||
<span
|
||||
class="text-sm font-bold opacity-60 uppercase tracking-tight">Poin</span>
|
||||
</div>
|
||||
<div
|
||||
class="text-white/70 font-bold mt-1 text-base sm:text-lg truncate drop-shadow-md">
|
||||
{{ $reward['name'] }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="absolute inset-0 z-20 flex items-end justify-center opacity-0 group-hover:opacity-100 sm:translate-y-2 sm:group-hover:translate-y-0 transition-all duration-300 pointer-events-none sm:pointer-events-auto">
|
||||
<div class="w-full px-5 sm:px-6 pb-5 sm:pb-6 pointer-events-auto">
|
||||
<flux:modal.trigger name="redeem-confirmation">
|
||||
<flux:button variant="primary" color="zinc"
|
||||
wire:click="$dispatch('fn:confirmAction', { id: '{{ $reward['id'] }}', target: 'redeem' })"
|
||||
icon="ticket" class="w-full text-dark backdrop-blur-md">
|
||||
Tukarkan Sekarang
|
||||
</flux:button>
|
||||
</flux:modal.trigger>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if ($reward['stock'] !== null)
|
||||
<div class="absolute top-4 right-4">
|
||||
<span
|
||||
class="text-[9px] font-bold text-white/40 border border-white/10 px-2 py-0.5 rounded-full uppercase tracking-tighter backdrop-blur-sm bg-zinc-600">
|
||||
Stok: {{ $reward['stock'] }}
|
||||
</span>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="relative h-full p-5 sm:p-6 flex flex-col justify-between z-10">
|
||||
<div>
|
||||
<div
|
||||
class="text-[10px] font-bold text-white/50 uppercase tracking-widest mb-1 truncate">
|
||||
{{ $reward['category_label'] }}
|
||||
</div>
|
||||
<div class="text-2xl sm:text-3xl text-white/70 italic leading-tight">
|
||||
{{ formatCurrencyNumber($reward['points']) }}
|
||||
<span class="text-sm font-bold opacity-60 uppercase tracking-tight">Poin</span>
|
||||
</div>
|
||||
<div
|
||||
class="text-white/70 font-bold mt-1 text-base sm:text-lg truncate drop-shadow-md">
|
||||
{{ $reward['name'] }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="absolute inset-0 z-20 flex items-end justify-center opacity-0 group-hover:opacity-100 sm:translate-y-2 sm:group-hover:translate-y-0 transition-all duration-300 pointer-events-none sm:pointer-events-auto">
|
||||
<div class="w-full px-5 sm:px-6 pb-5 sm:pb-6 pointer-events-auto">
|
||||
<flux:modal.trigger name="redeem-confirmation">
|
||||
<flux:button variant="primary" color="zinc"
|
||||
wire:click="$dispatch('fn:confirmAction', { id: '{{ $reward['id'] }}', target: 'redeem' })"
|
||||
icon="ticket" class="w-full text-dark backdrop-blur-md">
|
||||
Tukarkan Sekarang
|
||||
</flux:button>
|
||||
</flux:modal.trigger>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if ($reward['stock'] !== null)
|
||||
<div class="absolute top-4 right-4">
|
||||
<span
|
||||
class="text-[9px] font-bold text-white/40 border border-white/10 px-2 py-0.5 rounded-full uppercase tracking-tighter backdrop-blur-sm bg-zinc-600">
|
||||
Stok: {{ $reward['stock'] }}
|
||||
</span>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
@else
|
||||
@include('components.animations.lottie.not-found', [
|
||||
'message' => 'Belum ada hadiah yang tersedia untuk Anda saat ini.',
|
||||
])
|
||||
@endif
|
||||
</flux:tab.panel>
|
||||
|
||||
<flux:tab.panel name="history">
|
||||
@if (!empty($userRedemptions))
|
||||
<flux:card>
|
||||
<flux:table>
|
||||
<flux:table.columns>
|
||||
<flux:table.column>Hadiah</flux:table.column>
|
||||
<flux:table.column>Kode</flux:table.column>
|
||||
<flux:table.column>Poin Dipakai</flux:table.column>
|
||||
<flux:table.column>Status</flux:table.column>
|
||||
<flux:table.column>Kadaluarsa</flux:table.column>
|
||||
</flux:table.columns>
|
||||
<flux:card>
|
||||
<flux:table>
|
||||
<flux:table.columns>
|
||||
<flux:table.column>Hadiah</flux:table.column>
|
||||
<flux:table.column>Kode</flux:table.column>
|
||||
<flux:table.column>Poin Dipakai</flux:table.column>
|
||||
<flux:table.column>Status</flux:table.column>
|
||||
<flux:table.column>Kadaluarsa</flux:table.column>
|
||||
</flux:table.columns>
|
||||
|
||||
<flux:table.rows>
|
||||
@foreach ($userRedemptions as $redemption)
|
||||
<flux:table.row>
|
||||
<flux:table.cell>{{ $redemption['reward']['name'] }}</flux:table.cell>
|
||||
<flux:table.cell>{{ $redemption['code'] }}</flux:table.cell>
|
||||
<flux:table.cell>{{ formatCurrencyNumber($redemption['points_spent']) }}
|
||||
</flux:table.cell>
|
||||
<flux:table.cell>
|
||||
<flux:badge color="{{ $redemption['status_color'] }}" size="sm"
|
||||
inset="top bottom">
|
||||
{{ $redemption['status_label'] }}
|
||||
</flux:badge>
|
||||
</flux:table.cell>
|
||||
<flux:table.cell>
|
||||
{{ formatDateLocalized($redemption['expires_at'], 'l, d M Y H:i') }}
|
||||
</flux:table.cell>
|
||||
</flux:table.row>
|
||||
@endforeach
|
||||
</flux:table.rows>
|
||||
</flux:table>
|
||||
</flux:card>
|
||||
@endif
|
||||
<flux:table.rows>
|
||||
@forelse ($userRedemptions as $redemption)
|
||||
<flux:table.row>
|
||||
<flux:table.cell>{{ $redemption['reward']['name'] }}</flux:table.cell>
|
||||
<flux:table.cell>{{ $redemption['code'] }}</flux:table.cell>
|
||||
<flux:table.cell>{{ formatCurrencyNumber($redemption['points_spent']) }}
|
||||
</flux:table.cell>
|
||||
<flux:table.cell>
|
||||
<flux:badge color="{{ $redemption['status_color'] }}" size="sm"
|
||||
inset="top bottom">
|
||||
{{ $redemption['status_label'] }}
|
||||
</flux:badge>
|
||||
</flux:table.cell>
|
||||
<flux:table.cell>
|
||||
{{ formatDateLocalized($redemption['expires_at'], 'l, d M Y H:i') }}
|
||||
</flux:table.cell>
|
||||
</flux:table.row>
|
||||
@empty
|
||||
<flux:table.row>
|
||||
<flux:table.cell colspan="5" class="text-center">
|
||||
<flux:text class="text-sm italic">Belum ada poin yang ditukar
|
||||
</flux:text>
|
||||
</flux:table.cell>
|
||||
</flux:table.row>
|
||||
@endforelse
|
||||
</flux:table.rows>
|
||||
</flux:table>
|
||||
</flux:card>
|
||||
</flux:tab.panel>
|
||||
</flux:tab.group>
|
||||
</div>
|
||||
@ -133,4 +145,8 @@ class="text-[9px] font-bold text-white/40 border border-white/10 px-2 py-0.5 rou
|
||||
'buttonColor' => 'zinc',
|
||||
'buttonText' => 'Ya, Tukarkan',
|
||||
])
|
||||
|
||||
@assets
|
||||
<script src="https://unpkg.com/@lottiefiles/dotlottie-wc@0.8.5/dist/dotlottie-wc.js" type="module"></script>
|
||||
@endassets
|
||||
</flux:main>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user