From 2bdae400acee00ffbe851e270ccfb4e67ab8928c Mon Sep 17 00:00:00 2001
From: chamiakJ <chamika@ceydigital.com>
Date: Wed, 21 May 2025 11:42:42 +0530
Subject: [PATCH] feat(hubspot-integration): add HubSpot script component for
 production environment

- Introduced a new HubSpot component that dynamically loads the HubSpot tracking script when in production.
- Updated MainLayout to replace TawkTo with HubSpot for improved customer engagement tracking.
---
 worklenz-frontend/src/components/HubSpot.tsx | 24 ++++++++++++++++++++
 worklenz-frontend/src/layouts/MainLayout.tsx |  6 ++---
 2 files changed, 26 insertions(+), 4 deletions(-)
 create mode 100644 worklenz-frontend/src/components/HubSpot.tsx

diff --git a/worklenz-frontend/src/components/HubSpot.tsx b/worklenz-frontend/src/components/HubSpot.tsx
new file mode 100644
index 00000000..072ca433
--- /dev/null
+++ b/worklenz-frontend/src/components/HubSpot.tsx
@@ -0,0 +1,24 @@
+import { useEffect } from 'react';
+
+const HubSpot = () => {
+  useEffect(() => {
+    const script = document.createElement('script');
+    script.type = 'text/javascript';
+    script.id = 'hs-script-loader';
+    script.async = true;
+    script.defer = true;
+    script.src = '//js.hs-scripts.com/22348300.js';
+    document.body.appendChild(script);
+
+    return () => {
+      const existingScript = document.getElementById('hs-script-loader');
+      if (existingScript) {
+        existingScript.remove();
+      }
+    };
+  }, []);
+
+  return null;
+};
+
+export default HubSpot; 
\ No newline at end of file
diff --git a/worklenz-frontend/src/layouts/MainLayout.tsx b/worklenz-frontend/src/layouts/MainLayout.tsx
index bbfd302b..d82073a1 100644
--- a/worklenz-frontend/src/layouts/MainLayout.tsx
+++ b/worklenz-frontend/src/layouts/MainLayout.tsx
@@ -7,7 +7,7 @@ import { colors } from '../styles/colors';
 import { verifyAuthentication } from '@/features/auth/authSlice';
 import { useEffect } from 'react';
 import { useAppDispatch } from '@/hooks/useAppDispatch';
-import TawkTo from '@/components/TawkTo';
+import HubSpot from '@/components/HubSpot';
 
 const MainLayout = () => {
   const themeMode = useAppSelector(state => state.themeReducer.mode);
@@ -68,9 +68,7 @@ const MainLayout = () => {
             <Outlet />
           </Col>
         </Layout.Content>
-        {import.meta.env.VITE_APP_ENV === 'production' && (
-          <TawkTo propertyId="67ecc524f62fbf190db18bde" widgetId="1inqe45sq" />
-        )}
+        {import.meta.env.VITE_APP_ENV === 'production' && <HubSpot />}
       </Layout>
     </ConfigProvider>
   );