53 lines
2.2 KiB
PHP
53 lines
2.2 KiB
PHP
<flux:main>
|
|
<div class="flex justify-between items-center">
|
|
<div>
|
|
<flux:heading size="xl">{{ $pageTitle }}</flux:heading>
|
|
<flux:text>
|
|
Integrasikan WhatsApp untuk pengiriman invoice, kode verifikasi, serta
|
|
broadcast voucher atau informasi kepada pelanggan secara cepat dan efikien.
|
|
</flux:text>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-6 space-y-4">
|
|
<flux:callout icon="{{ $whatsapp['zawa_id'] ? 'check-circle' : 'link' }}"
|
|
color="{{ $whatsapp['zawa_id'] ? 'emerald' : 'gray' }}">
|
|
<flux:heading>Langkah 1: Buat Sesi WA</flux:heading>
|
|
<flux:callout.text>
|
|
Klik tombol untuk membuat sesi WhatsApp dan mendapatkan <code>sessionId</code>.
|
|
</flux:callout.text>
|
|
|
|
<x-slot name="actions">
|
|
@if (!$whatsapp['zawa_id'])
|
|
<flux:button wire:click="createSession">Buat Sesi</flux:button>
|
|
@else
|
|
<span class="text-sm text-emerald-600 font-medium">✅ Sesi sudah dibuat</span>
|
|
@endif
|
|
</x-slot>
|
|
</flux:callout>
|
|
|
|
<flux:callout icon="{{ $whatsapp['qr_code'] ? 'check-circle' : 'qr-code' }}"
|
|
color="{{ $whatsapp['qr_code'] ? 'emerald' : 'gray' }}"
|
|
class="{{ $whatsapp['zawa_id'] ? '' : 'opacity-50 pointer-events-none' }}">
|
|
<flux:heading>Langkah 2: Generate QR Code</flux:heading>
|
|
<flux:callout.text>
|
|
Gunakan <code>sessionId</code> untuk men-generate QR code yang akan discan di WhatsApp.
|
|
</flux:callout.text>
|
|
|
|
<x-slot name="actions">
|
|
@if (!$whatsapp['qr_code'] && $whatsapp['zawa_id'])
|
|
<flux:button wire:click="generateQrCode">Generate QR Code</flux:button>
|
|
@endif
|
|
</x-slot>
|
|
|
|
@if ($whatsapp['qr_code'])
|
|
<div class="mt-4 flex flex-col">
|
|
<img src="{{ $whatsapp['qr_code'] }}" alt="QR Code WhatsApp" class="w-56 h-56 rounded-lg shadow" />
|
|
<p class="mt-2 text-sm text-emerald-600 font-medium">Scan QR ini di WhatsApp</p>
|
|
</div>
|
|
@endif
|
|
</flux:callout>
|
|
</div>
|
|
|
|
</flux:main>
|