import React, { useEffect, useMemo, useState, useRef } from "react"; import { View, TouchableOpacity } from "react-native"; import { WebView } from "react-native-webview"; import { MessageCircle } from "lucide-react-native"; import { useAuthStore } from "~/lib/stores"; const CHATWOOT_BASE_URL = "https://chat.app.ambapays.com"; const CHATWOOT_WEBSITE_TOKEN = "or1QS1gRowqkuBBcQVEb3Wib"; export default function ChatwootFloatingButton() { const [visible, setVisible] = useState(false); const webViewRef = useRef(null); const user = useAuthStore((state) => state.user); const profile = useAuthStore((state) => state.profile); const identifier = user?.uid || user?.email || ""; const name = profile?.fullName || user?.displayName || ""; const email = user?.email || ""; const phone = profile?.phoneNumber || user?.phoneNumber || ""; const html = useMemo( () => ` `, [identifier, name, email, phone] ); useEffect(() => { if (visible && webViewRef.current) { webViewRef.current.injectJavaScript( "if (window.$chatwoot) { window.$chatwoot.toggle('open'); } true;" ); } }, [visible]); return ( <> setVisible(true)} style={{ position: "absolute", right: 20, bottom: 70, width: 56, height: 56, borderRadius: 28, backgroundColor: "#105D38", justifyContent: "center", alignItems: "center", shadowColor: "#000", shadowOpacity: 0.2, shadowRadius: 6, shadowOffset: { width: 0, height: 3 }, elevation: 6, zIndex: 9999, }} > { if (event.nativeEvent.data === "chatwoot:closed") { setVisible(false); } }} /> ); }