Fix: perbaikan kerjasama

[pandigresik]

Pull Request: Fix perbaikan pendaftaran kerjasama OpenDK

Depedency

https://github.com/OpenSID/Layanan_OpenDESA/pull/1235

Description

Perbaikan dan rebranding halaman pendaftaran kerjasama OpenDK. Mengubah terminologi dari "Kecamatan" sebagai penyelenggara menjadi "OpenDesa", memperbaiki kompatibilitas dengan Livewire v3, serta menyederhanakan alur pendaftaran. Juga memperbaiki auto-fill form dari data user dan mengganti mekanisme upload file agar kompatibel dengan Livewire v3.

Changes made:

1. Fix (Livewire v3): Migrasi $this->emit() ke $this->dispatch() — method emit() sudah dihapus di Livewire v3
2. Fix (Livewire v3): Hapus Alpine.js CDN duplikat di layout — Livewire v3 sudah bundle Alpine sendiri, dua instance menyebabkan konflik dan $wire not defined
3. Fix (Livewire v3): Ganti wire:model.lazy dengan x-on:change="$wire.upload()" pada upload file — Alpine x-model tidak support file input
4. Fix (Alpine): Perbaiki <div x-if> menjadi <template x-if> di check_connection — Alpine mengharuskan x-if pada <template>
5. Fix (Auto-fill): Tambah value="{{ $property }}" pada input wire:model — Livewire v3 tidak otomatis render value attribute
6. Fix (Loading state): Tambah wire:loading.attr="disabled" dan spinner pada tombol Simpan — mencegah double-click dan memberi indikasi proses
7. Fix (API key mismatch): Kembalikan key status_langganan_id ke status_langgaan_id sesuai respons API
8. Refactor (UI): Rebranding teks informasi dari "Kecamatan" sebagai penyedia layanan menjadi "OpenDesa"
9. Refactor (Mount): Pre-fill email, kontak_nama, kontak_no_hp dari data user yang login
10. Test: Update smoke test assertion strings sesuai teks baru

Reason for change:

• Livewire v3 Compatibility: Project menggunakan livewire/livewire ^3.0 tetapi kode masih menggunakan sintaks v2 (emit, wire:model.lazy, Alpine CDN terpisah) yang tidak kompatibel
• User Experience: Auto-fill form dari data user mempercepat proses pendaftaran
• Rebranding: Perubahan terminologi dari penyelenggara kecamatan ke OpenDesa sebagai pusat layanan
• Concurrent Submission: Button Simpan perlu dinonaktifkan selama proses API untuk mencegah pengiriman ganda

Impact of change:

✅ Livewire v3 Compatible: Semua komponen berfungsi dengan Livewire v3 tanpa error
✅ UX Improved: Auto-fill data user, loading state pada submit button
✅ Rebranding: Informasi dan dokumen kerjasama konsisten menggunakan "OpenDesa"
✅ Robustness: Tidak ada konflik Alpine, upload file berfungsi dengan $wire.upload()
✅ Testing: Smoke test diperbarui sesuai perubahan UI

Related Issue

• Solution for fix related to issue Perbaiki proses Pengajuan Kerja Sama OpenDK #1632

#1632

Steps to Reproduce

Before fix (problem):

1. Buka halaman pendaftaran kerjasama
2. Form tidak auto-fill data user (email, nama, no hp kosong)
3. Upload file tidak berfungsi (button Simpan tetap disabled)
4. $this->emit() error karena Livewire v3
5. Alpine conflict (multiple instances) menyebabkan $wire undefined
6. x-if error pada <div> bukan <template>

After fix (solution):

1. Buka halaman pengajuan kerja sama
2. Form auto-fill email, nama kontak dari data user
3. Pilih file PDF → $wire.upload() memproses upload → button Simpan aktif
4. Klik Simpan → spinner muncul, button disable → proses API berjalan
5. Tidak ada error Alpine/Livewire di console

Testing on related features:

• Auto-fill form ✅ Berfungsi (email, nama, no hp)
• Upload file ✅ Berfungsi (file terkirim, button aktif)
• Unduh dokumen template ✅ Tidak berubah
• Verifikasi email flow ✅ Tidak berubah
• Detail pelanggan terdaftar ✅ Tidak berubah

Checklist

• I have complied with script writing rules
• I have followed pull request review process
• Manual testing has been done in development environment
• No console errors or warnings
• Code has been reviewed

Technical Details

Technical Explanation

Livewire v3 Migration:

• $this->emit('triggerAlert', ...) → $this->dispatch('triggerAlert', ...) — method emit dihapus di v3
• wire:model.lazy tidak dikenal di v3 sehingga binding upload file tidak berfungsi → ganti dengan Alpine x-on:change + $wire.upload()
• wire:model di v3 tidak otomatis render value attribute → tambah eksplisit di blade

Alpine.js:

• Livewire v3 bundle Alpine sendiri via @livewireScripts → hapus CDN manual alpinejs@3.x.x
• x-if hanya valid pada <template> → perbaiki di check_connection.blade.php

Upload File:

{{-- Sebelum (Livewire v2) --}}
<input wire:model.lazy="permohonan">

{{-- Sesudah (Livewire v3) --}}
<input x-on:change="$wire.upload('permohonan', $event.target.files[0])">

Loading State:

<button wire:click="register" wire:loading.attr="disabled" wire:target="register">
    <i class="fa fa-check"></i> Simpan
    <i class="fa fa-spinner fa-spin" wire:loading wire:target="register" style="display:none"></i>
</button>

Configuration changes

None

Dependencies added

None

Testing

Manual Testing

• Form auto-fill dari data user login
• Upload file PDF via x-on:change + $wire.upload()
• Button Simpan disable + spinner saat loading
• Submit form berhasil ke API
• Alert sukses/gagal tampil setelah submit
• Status langganan berubah sesuai respons API
• Detail pelanggan tampil jika sudah terdaftar
• Tidak ada error JavaScript di console (Alpine/Livewire)

Automated Testing

• Smoke Test: SmokeKerjasamaTest — assertions mengikuti teks baru

Breaking Changes

None

Migration Guide

Not required

Video

simplescreenrecorder-2026-07-10_13.22.54.mp4

References

• Issue #1632
• Livewire v3 Upgrade Guide

---

Additional notes: Beberapa file juga mengalami pembersihan komentar/kosong (blank lines, comments) yang tidak perlu.

[github-actions]

🔄 AI PR Review sedang antri di server...

Proses review akan segera dimulai di background — hasil akan muncul sebagai komentar setelah selesai.
Powered by CrewAI · PR #1637