feat(overview): munculkan form untuk jadi member si overview
This commit is contained in:
Yoga Pangestu
parent
d775e57675
commit
48271c2bf2
@ -12,6 +12,8 @@ class CustomerForm extends Form
|
||||
{
|
||||
public ?Customer $customer = null;
|
||||
|
||||
public ?string $user_id = null;
|
||||
|
||||
public string $name = '';
|
||||
|
||||
public ?string $phone_number = null;
|
||||
@ -50,6 +52,7 @@ public function store()
|
||||
$this->validate();
|
||||
|
||||
Customer::create([
|
||||
'user_id' => $this->user_id,
|
||||
'name' => $this->name,
|
||||
'phone_number' => $this->phone_number,
|
||||
'gender' => $this->gender,
|
||||
|
||||
@ -2,6 +2,11 @@
|
||||
|
||||
namespace App\Livewire\Member;
|
||||
|
||||
use App\Livewire\Forms\Studio\Loyalty\CustomerForm;
|
||||
use App\Models\Membership;
|
||||
use App\Models\Tier;
|
||||
use App\Traits\WithToast;
|
||||
use Illuminate\Support\Facades\DB;
|
||||
use Livewire\Attributes\Layout;
|
||||
use Livewire\Attributes\Title;
|
||||
use Livewire\Component;
|
||||
@ -10,11 +15,21 @@
|
||||
#[Layout('components.layouts.member')]
|
||||
class Overview extends Component
|
||||
{
|
||||
use WithToast;
|
||||
|
||||
public CustomerForm $form;
|
||||
|
||||
public bool $hasMemberData = false;
|
||||
|
||||
public bool $isVerified = false;
|
||||
|
||||
public function mount()
|
||||
{
|
||||
$this->hasMemberData = auth()->user()->customer()->exists();
|
||||
|
||||
$this->isVerified = auth()->user()->hasVerifiedEmail();
|
||||
|
||||
$this->form->user_id = request()->routeIs('member.overview') ? auth()->id() : null;
|
||||
}
|
||||
|
||||
public function checkEmailVerification()
|
||||
@ -24,6 +39,25 @@ public function checkEmailVerification()
|
||||
$this->isVerified = auth()->user()->hasVerifiedEmail();
|
||||
}
|
||||
|
||||
public function save()
|
||||
{
|
||||
DB::transaction(function () {
|
||||
$this->form->store();
|
||||
|
||||
$this->hasMemberData = true;
|
||||
|
||||
if (! auth()->user()->membership()->exists()) {
|
||||
Membership::create([
|
||||
'user_id' => auth()->id(),
|
||||
'tier_id' => Tier::orderBy('min_points')->first()->id,
|
||||
'tier_points' => 10,
|
||||
]);
|
||||
}
|
||||
});
|
||||
|
||||
$this->toast('Selamat, Anda telah menjadi member sekarang.');
|
||||
}
|
||||
|
||||
public function render()
|
||||
{
|
||||
return view('livewire.member.overview');
|
||||
|
||||
@ -2,69 +2,100 @@
|
||||
<flux:heading size="xl" level="1">Haloo, {{ auth()->user()?->customer?->name }}</flux:heading>
|
||||
<flux:text class="mb-6 mt-2 text-base">Selamat datang di Studio Yadi Parfum.</flux:text>
|
||||
|
||||
<div class="mt-6 grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<flux:callout icon="user-group" color="blue">
|
||||
<flux:callout.heading>
|
||||
{{ auth()->user()?->membership?->tier?->name }}
|
||||
<flux:badge color="emerald" size="sm" inset="top bottom">
|
||||
{{ auth()->user()?->membership?->tier_points }} Poin</flux:badge>
|
||||
</flux:callout.heading>
|
||||
@if ($hasMemberData)
|
||||
<div class="mt-6 grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<flux:callout icon="user-group" color="blue">
|
||||
<flux:callout.heading>
|
||||
{{ auth()->user()?->membership?->tier?->name }}
|
||||
<flux:badge color="emerald" size="sm" inset="top bottom">
|
||||
{{ auth()->user()?->membership?->tier_points }} Poin</flux:badge>
|
||||
</flux:callout.heading>
|
||||
|
||||
<flux:callout.text>
|
||||
<p>Undang teman dan dapatkan hadiah menarik!</p>
|
||||
</flux:callout.text>
|
||||
<flux:callout.text>
|
||||
<p>Undang teman dan dapatkan hadiah menarik!</p>
|
||||
</flux:callout.text>
|
||||
|
||||
<x-slot name="actions">
|
||||
<flux:button>Undang teman</flux:button>
|
||||
<flux:button>Ambil Hadiah</flux:button>
|
||||
</x-slot>
|
||||
</flux:callout>
|
||||
<x-slot name="actions">
|
||||
<flux:button>Undang teman</flux:button>
|
||||
<flux:button>Ambil Hadiah</flux:button>
|
||||
</x-slot>
|
||||
</flux:callout>
|
||||
|
||||
<flux:callout icon="magnifying-glass" color="emerald">
|
||||
<flux:callout.heading>Jelajahi Produk Kami</flux:callout.heading>
|
||||
<flux:callout icon="magnifying-glass" color="emerald">
|
||||
<flux:callout.heading>Jelajahi Produk Kami</flux:callout.heading>
|
||||
|
||||
<flux:callout.text>
|
||||
Coba dan rasakan manfaat menggunakanan yadi parfum.
|
||||
</flux:callout.text>
|
||||
<flux:callout.text>
|
||||
Coba dan rasakan manfaat menggunakanan yadi parfum.
|
||||
</flux:callout.text>
|
||||
|
||||
<x-slot name="actions">
|
||||
<flux:button>Jelajahi</flux:button>
|
||||
<flux:button
|
||||
href="https://wa.me/62895405946991?text=Halo%2C%20saya%20mau%20tanya%20tentang%20produk%20Anda">
|
||||
Tanya Ahli</flux:button>
|
||||
</x-slot>
|
||||
</flux:callout>
|
||||
<x-slot name="actions">
|
||||
<flux:button>Jelajahi</flux:button>
|
||||
<flux:button
|
||||
href="https://wa.me/62895405946991?text=Halo%2C%20saya%20mau%20tanya%20tentang%20produk%20Anda">
|
||||
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>
|
||||
@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="
|
||||
<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>
|
||||
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>
|
||||
@else
|
||||
<flux:heading class="mb-4">Anda belum terdaftar menjadi member, silakan isi formulir di bawah ini.
|
||||
</flux:heading>
|
||||
<flux:card>
|
||||
<flux:input type="hidden" name="form.user_id"></flux:input>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<flux:field>
|
||||
<flux:label>Nama <span class="text-red-500 ms-1">*</span></flux:label>
|
||||
<flux:input placeholder="John Doe" wire:model.live.debounce.500ms="form.name" autofocus
|
||||
autocomplete="off" />
|
||||
<flux:error name="form.name" />
|
||||
</flux:field>
|
||||
|
||||
<flux:input label="Nomor Telepon" placeholder="0821 xxxx xxxx" mask="9999 9999 99999"
|
||||
wire:model.live.debounce.500ms="form.phone_number" autocomplete="off" />
|
||||
|
||||
<flux:field>
|
||||
<flux:label>Jenis Kelamin <span class="text-red-500 ms-1">*</span></flux:label>
|
||||
<flux:radio.group wire:model.live="form.gender" variant="buttons" class="w-full *:flex-1">
|
||||
@foreach (\App\Enums\Gender::cases() as $gender)
|
||||
<flux:radio value="{{ $gender->value }}">
|
||||
{{ $gender->label() }}
|
||||
</flux:radio>
|
||||
@endforeach
|
||||
</flux:radio.group>
|
||||
<flux:error name="form.gender" />
|
||||
</flux:field>
|
||||
</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:button wire:click="save" class="mt-4">Simpan</flux:button>
|
||||
</flux:card>
|
||||
@endif
|
||||
</flux:main>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user