TA/web_JMW/INTEGRATION_GUIDE.md

# 🚀 WhatsApp Integration - Quick Start Guide

## Apa yang Sudah Diintegrasikan?

✅ **API WhatsApp** - Endpoint untuk mengarahkan ke WhatsApp  
✅ **Car Detail Page** - Tombol "Chat via WhatsApp" pada halaman detail mobil  
✅ **Database Fields** - Kolom untuk nomor telepon penjual dan username  
✅ **JavaScript Handling** - Script untuk membuka WhatsApp dengan pesan otomatis  

---

## Step 1: Jalankan Migrations

```bash
php artisan migrate
```

Ini akan menambahkan 2 kolom baru:
- `phone_number` di tabel `user`
- `seller_username` di tabel `categories`

---

## Step 2: Update User Phone Numbers

Pastikan setiap penjual memiliki nomor telepon. Buka database atau gunakan Tinker:

```bash
php artisan tinker
```

```php
// Update seller dengan nomor telepon
$user = User::find('username_penjual');
$user->update(['phone_number' => '081234567890']);

// Atau bulk update
User::where('role', 'seller')->update(['phone_number' => '081234567890']);
```

---

## Step 3: Tentukan Seller untuk Setiap Mobil

Ketika menambah/edit mobil di admin panel, masukkan **seller_username** dari user yang menjual mobil tersebut.

**Format Field Input:**
```
Nama Mobil: Toyota Avanza 2015
Harga: 120000000
Tahun: 2015
Penjual: john_seller  ← Username dari tabel user
Gambar: [upload image]
```

---

## Step 4: Test di Frontend

1. Buka halaman detail mobil: `/mobil-bekas/{car-id}`
2. Scroll ke bagian kanan (price section)
3. Klik tombol **"💬 Chat via WhatsApp"**
4. Secara otomatis akan membuka WhatsApp dengan pesan:

```
Halo, saya tertarik dengan kendaraan bekas - [Nama Mobil]. Apakah masih tersedia?
```

---

## API Endpoints (Dokumentasi Lengkap)

### 1. Dapatkan Link WhatsApp (Return JSON)
```
GET /api/chat/whatsapp/{username}/{categoryId}
```

**Contoh:**
```
GET /api/chat/whatsapp/john_seller/5
```

**Response:**
```json
{
    "success": true,
    "data": {
        "whatsapp_link": "https://wa.me/6281234567890?text=...",
        "seller_username": "john_seller",
        "phone_number": "+6281234567890"
    }
}
```

### 2. Redirect Langsung ke WhatsApp
```
GET /api/contact/whatsapp/{username}/{categoryId}
```

**Contoh:**
```
GET /api/contact/whatsapp/john_seller/5
```

*Secara otomatis membuka WhatsApp tanpa response JSON*

### 3. Dapatkan Daftar Semua Penjual
```
GET /api/chat/sellers
```

**Response:**
```json
{
    "success": true,
    "data": [
        {
            "username": "john_seller",
            "email": "john@example.com",
            "phone_number": "+6281234567890"
        }
    ]
}
```

---

## Integrasi Custom (Frontend)

Jika ingin membuat tombol WhatsApp di tempat lain:

### Option 1: Link Langsung
```html
<a href="/api/contact/whatsapp/username_penjual/car_id">
    Hubungi via WhatsApp
</a>
```

### Option 2: Button dengan JavaScript
```html
<button onclick="contactSellerViaWhatsApp('username_penjual', 'car_id')">
    Chat via WhatsApp
</button>
```

Fungsi sudah tersedia di `car-detail.blade.php`.

### Option 3: Custom Handler
```javascript
// Dapatkan link dari API
async function getWhatsAppLink(username, categoryId) {
    const response = await fetch(`/api/chat/whatsapp/${username}/${categoryId}`);
    const data = await response.json();
    
    if (data.success) {
        window.open(data.data.whatsapp_link, '_blank');
    }
}
```

---

## Troubleshooting

### ❌ "Informasi penjual tidak tersedia"
**Penyebab:** `seller_username` tidak diset pada kategori/mobil  
**Solusi:** Edit mobil dan masukkan seller_username yang valid

### ❌ "Nomor telepon penjual tidak tersedia"
**Penyebab:** User tidak memiliki `phone_number`  
**Solusi:** Update field phone_number untuk user tersebut

### ❌ WhatsApp tidak terbuka
**Penyebab:** 
- Browser block popup
- WhatsApp tidak terinstall/login
- Format nomor tidak valid

**Solusi:**
- Gunakan format: `08xxxxxxxxxx` atau `+628xxxxxxxxxx`
- Pastikan WhatsApp Web sudah login
- Coba di browser lain atau incognito mode

### ❌ Error 404 pada API
**Penyebab:** User tidak ditemukan  
**Solusi:** Pastikan username benar dan user ada di database

---

## Database Schema

### User Table (New Fields)
```sql
ALTER TABLE user ADD COLUMN phone_number VARCHAR(255) NULL;
```

### Categories Table (New Fields)
```sql
ALTER TABLE categories ADD COLUMN seller_username VARCHAR(255) NULL;
ALTER TABLE categories ADD INDEX idx_seller_username (seller_username);
```

---

## Notes

- ✅ Nomor telepon otomatis diformat ke format WhatsApp (`62xxxxxxxxxx`)
- ✅ Pesan otomatis disesuaikan dengan nama mobil
- ✅ Responsive design untuk mobile
- ✅ Error handling untuk missing data
- ✅ Support untuk berbagai format nomor telepon

---

## Dokumentasi Lengkap

Lihat: [WHATSAPP_API_DOCUMENTATION.md](WHATSAPP_API_DOCUMENTATION.md)