Template Sender

Admin April 06, 2026 admin
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 (
{/* Header */}

Auto-Sender Produk Digital

Kirim link Google Drive ke pembeli dalam 1 klik

{/* Navigation Tabs */}
{/* TAB: KIRIM PESANAN */} {activeTab === 'send' && (
{products.length === 0 ? (

Anda belum memiliki template yang tersimpan.

) : ( <>
setBuyerName(e.target.value)} />
setBuyerPhone(e.target.value)} />
{/* Preview Section */}
{selectedProductId ? generateMessage() : Pilih template untuk melihat preview pesan...}
)}
)} {/* TAB: PENGATURAN */} {activeTab === 'settings' && (
{/* Store Setup */}
setStoreName(e.target.value)} placeholder="Misal: Studio Web Dev" />

Nama ini akan muncul di bagian akhir pesan sapaan.

{/* Add Product Form */}

Daftar Template Google Drive

setNewProductName(e.target.value)} />
setNewProductLink(e.target.value)} />
{/* Product List */}
{products.length === 0 ? (

Belum ada template yang ditambahkan.

) : ( products.map(product => (

{product.name}

{product.link}
)) )}
)}
Semua data disimpan secara lokal di browser Anda. Aman & Privasi Terjaga.
); }

Komentar