From c0a4f2673ae5996917d52be57278fecc38c1f617 Mon Sep 17 00:00:00 2001
From: isra el <vernu1997@gmail.com>
Date: Mon, 17 Jun 2024 10:59:13 +0300
Subject: [PATCH] chore(web): add live support widget

---
 web/.env.example                     |  3 ++-
 web/components/livechat/LiveChat.tsx | 30 ++++++++++++++++++++++++++++
 web/pages/_app.tsx                   |  3 ++-
 3 files changed, 34 insertions(+), 2 deletions(-)
 create mode 100644 web/components/livechat/LiveChat.tsx

diff --git a/web/.env.example b/web/.env.example
index a99d070..cb37b0e 100644
--- a/web/.env.example
+++ b/web/.env.example
@@ -1,2 +1,3 @@
 NEXT_PUBLIC_API_BASE_URL=https://api.textbee.dev/api/v1
-NEXT_PUBLIC_GOOGLE_CLIENT_ID=
\ No newline at end of file
+NEXT_PUBLIC_GOOGLE_CLIENT_ID=
+NEXT_PUBLIC_TAWKTO_EMBED_URL=
\ No newline at end of file
diff --git a/web/components/livechat/LiveChat.tsx b/web/components/livechat/LiveChat.tsx
new file mode 100644
index 0000000..c1305c7
--- /dev/null
+++ b/web/components/livechat/LiveChat.tsx
@@ -0,0 +1,30 @@
+import Script from 'next/script'
+import React from 'react'
+
+export default function LiveChat() {
+  if (!process.env.NEXT_PUBLIC_TAWKTO_EMBED_URL) {
+    return null
+  }
+
+  return (
+    <>
+      <Script
+        id='tawkto'
+        strategy='afterInteractive'
+        dangerouslySetInnerHTML={{
+          __html: `
+            var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
+            (function(){
+            var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
+            s1.async=true;
+            s1.src='${process.env.NEXT_PUBLIC_TAWKTO_EMBED_URL}';
+            s1.charset='UTF-8';
+            s1.setAttribute('crossorigin','*');
+            s0.parentNode.insertBefore(s1,s0);
+            })();
+        `,
+        }}
+      />
+    </>
+  )
+}
diff --git a/web/pages/_app.tsx b/web/pages/_app.tsx
index 6016728..41b04af 100644
--- a/web/pages/_app.tsx
+++ b/web/pages/_app.tsx
@@ -8,9 +8,9 @@ import ErrorBoundary from '../components/ErrorBoundary'
 import Footer from '../components/Footer'
 import Analytics from '../components/analytics/Analytics'
 import dynamic from 'next/dynamic'
+import LiveChat from '../components/livechat/LiveChat'
 
 function MyApp({ Component, pageProps }: AppProps) {
-  
   const NoSSRNavbar = dynamic(() => import('../components/Navbar'), {
     ssr: false,
   })
@@ -19,6 +19,7 @@ function MyApp({ Component, pageProps }: AppProps) {
     <ErrorBoundary>
       <Provider store={store}>
         <Analytics />
+        <LiveChat />
         <GoogleOAuthProvider
           clientId={process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID}
         >