From 48271c2bf24aa17a3c6f3ec548d9bf821f0b11df Mon Sep 17 00:00:00 2001
From: Yoga Pangestu <ypangestu976@gmail.com>
Date: Thu, 13 Nov 2025 10:59:00 +0700
Subject: [PATCH] feat(overview): munculkan form untuk jadi member si overview

---
 .../Forms/Studio/Loyalty/CustomerForm.php     |   3 +
 app/Livewire/Member/Overview.php              |  34 +++++
 .../views/livewire/member/overview.blade.php  | 133 +++++++++++-------
 3 files changed, 119 insertions(+), 51 deletions(-)

diff --git a/app/Livewire/Forms/Studio/Loyalty/CustomerForm.php b/app/Livewire/Forms/Studio/Loyalty/CustomerForm.php
index 2e42354..3b233aa 100644
--- a/app/Livewire/Forms/Studio/Loyalty/CustomerForm.php
+++ b/app/Livewire/Forms/Studio/Loyalty/CustomerForm.php
@@ -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,
diff --git a/app/Livewire/Member/Overview.php b/app/Livewire/Member/Overview.php
index 582a3a4..0e7bd64 100644
--- a/app/Livewire/Member/Overview.php
+++ b/app/Livewire/Member/Overview.php
@@ -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');
diff --git a/resources/views/livewire/member/overview.blade.php b/resources/views/livewire/member/overview.blade.php
index c5a0555..d85f08a 100644
--- a/resources/views/livewire/member/overview.blade.php
+++ b/resources/views/livewire/member/overview.blade.php
@@ -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>