"use client"; import { useState, useEffect } from "react"; import { SITE } from "@/lib/config"; type WhatsAppPromptProps = { isOpen: boolean; onClose: () => void; lang: "ar" | "en"; }; export default function WhatsAppPrompt({ isOpen, onClose, lang, }: WhatsAppPromptProps) { const [topic, setTopic] = useState(""); const [message, setMessage] = useState(""); const isAr = lang === "ar"; const copy = isAr ? { title: "كيف يمكننا مساعدتك؟", subtitle: "أخبرنا عن احتياجاتك وسنتواصل معك فوراً", topicLabel: "اختر الموضوع", messageLabel: "رسالتك (اختياري)", messagePlaceholder: "أضف أي تفاصيل إضافية تساعدنا في خدمتك بشكل أفضل...", topics: [ { value: "demo", label: "أريد عرضاً توضيحياً" }, { value: "pricing", label: "الاستفسار عن الأسعار" }, { value: "support", label: "أحتاج دعماً فنياً" }, { value: "features", label: "أسئلة عن المميزات" }, { value: "integration", label: "التكامل مع أنظمتي" }, { value: "other", label: "موضوع آخر" }, ], cancelButton: "إلغاء", sendButton: "إرسال عبر واتساب", sending: "جاري الإرسال...", } : { title: "How can we help you?", subtitle: "Tell us what you need and we'll connect with you right away", topicLabel: "Select a topic", messageLabel: "Your message (optional)", messagePlaceholder: "Add any additional details to help us serve you better...", topics: [ { value: "demo", label: "I want a demo" }, { value: "pricing", label: "Pricing inquiry" }, { value: "support", label: "Technical support" }, { value: "features", label: "Questions about features" }, { value: "integration", label: "Integration with my systems" }, { value: "other", label: "Something else" }, ], cancelButton: "Cancel", sendButton: "Send via WhatsApp", sending: "Sending...", }; const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); if (!topic) return; // Find the selected topic label const selectedTopic = copy.topics.find((t) => t.value === topic)?.label || ""; // Construct the WhatsApp message let whatsappMessage = isAr ? `مرحباً! أحتاج مساعدة في: ${selectedTopic}` : `Hi! I need help with: ${selectedTopic}`; if (message) { whatsappMessage += isAr ? `\n\nتفاصيل إضافية:\n${message}` : `\n\nAdditional details:\n${message}`; } // Encode the message for URL const encodedMessage = encodeURIComponent(whatsappMessage); // Open WhatsApp with the pre-filled message const whatsappUrl = `https://wa.me/${SITE.contact.whatsapp.replace(/[^0-9]/g, "")}?text=${encodedMessage}`; window.open(whatsappUrl, "_blank"); // Reset and close modal setTopic(""); setMessage(""); onClose(); }; // Close on escape key useEffect(() => { const handleEscape = (e: KeyboardEvent) => { if (e.key === "Escape" && isOpen) { onClose(); } }; if (isOpen) { document.addEventListener("keydown", handleEscape); } return () => { document.removeEventListener("keydown", handleEscape); }; }, [isOpen, onClose]); if (!isOpen) return null; return (
{/* Backdrop */}