import React, { useState, useEffect } from 'react'; import { Settings, Send, Plus, Trash2, Copy, CheckCircle, MessageCircle, ExternalLink } from 'lucide-react'; export default function App() { // State for Settings & Products const [storeName, setStoreName] = useState(() => localStorage.getItem('storeName') || 'Toko Template Saya'); const [products, setProducts] = useState(() => { const saved = localStorage.getItem('digitalProducts'); return saved ? JSON.parse(saved) : []; }); // State for new product input const [newProductName, setNewProductName] = useState(''); const [newProductLink, setNewProductLink] = useState(''); // State for Order Fulfillment const [buyerName, setBuyerName] = useState(''); const [buyerPhone, setBuyerPhone] = useState(''); const [selectedProductId, setSelectedProductId] = useState(''); // UI States const [activeTab, setActiveTab] = useState('send'); // 'send' or 'settings' const [copiedText, setCopiedText] = useState(false); // Save to localStorage whenever products or storeName change useEffect(() => { localStorage.setItem('digitalProducts', JSON.stringify(products)); localStorage.setItem('storeName', storeName); }, [products, storeName]); const addProduct = (e) => { e.preventDefault(); if (!newProductName || !newProductLink) return; const newProduct = { id: Date.now().toString(), name: newProductName, link: newProductLink }; setProducts([...products, newProduct]); setNewProductName(''); setNewProductLink(''); }; const deleteProduct = (id) => { setProducts(products.filter(p => p.id !== id)); if (selectedProductId === id) setSelectedProductId(''); }; const generateMessage = () => { const product = products.find(p => p.id === selectedProductId); if (!product) return ''; return `Halo *${buyerName || 'Kak'}*,\n\nTerima kasih telah melakukan pembelian *${product.name}* di ${storeName}! Pembayaran Anda telah kami konfirmasi. 🎉\n\nBerikut adalah link akses untuk mengunduh template website Anda via Google Drive:\n🔗 ${product.link}\n\n*Cara Penggunaan:*\n1. Buka link di atas.\n2. Klik tombol Download atau icon Unduh di pojok kanan atas.\n3. Ekstrak file (jika berbentuk .zip) dan baca panduan di dalamnya.\n\nJika ada kendala saat mengunduh, jangan ragu untuk membalas pesan ini ya.\n\nSalam sukses,\n*${storeName}*`; }; const handleSendWA = () => { const message = generateMessage(); if (!message) return alert('Silakan pilih produk terlebih dahulu.'); if (!buyerPhone) return alert('Silakan masukkan nomor WhatsApp pembeli.'); // Format phone number (replace leading 0 with 62) let formattedPhone = buyerPhone.replace(/\D/g, ''); if (formattedPhone.startsWith('0')) { formattedPhone = '62' + formattedPhone.substring(1); } else if (formattedPhone.startsWith('+62')) { formattedPhone = '62' + formattedPhone.substring(3); } const encodedMessage = encodeURIComponent(message); window.open(`https://wa.me/${formattedPhone}?text=${encodedMessage}`, '_blank'); }; const handleCopyText = () => { const message = generateMessage(); if (!message) return alert('Silakan pilih produk terlebih dahulu.'); navigator.clipboard.writeText(message).then(() => { setCopiedText(true); setTimeout(() => setCopiedText(false), 2000); }); }; return ( ); }