Merge pull request #157 from rupato-deriv/Rupato/BOT-2344/Integrate-t…

…he-survicate-script

Rupato/fix: added the survicate script

src/app/App.tsx

@@ -1,3 +1,4 @@
+import { initSurvicate } from '../public-path';
 import { Fragment, lazy, Suspense } from 'react';
 import React from 'react';
 import { createBrowserRouter, createRoutesFromElements, Route, RouterProvider } from 'react-router-dom';
@@ -82,7 +83,14 @@ function App() {
     }, [loginInfo, paramsToDelete]);
 
     React.useEffect(() => {
+        initSurvicate();
         window?.dataLayer?.push({ event: 'page_load' });
+        return () => {
+            const survicate_box = document.getElementById('survicate-box');
+            if (survicate_box) {
+                survicate_box.style.display = 'none';
+            }
+        };
     }, []);
 
     return (

src/public-path.ts

@@ -15,4 +15,65 @@ export function setBotPublicPath(path: string) {
 
 export const getImageLocation = (image_name: string) => `assets/images/${image_name}`;
 
+declare global {
+    interface Window {
+        Survicate?: {
+            track: (attribute: string, value: string) => void;
+        };
+    }
+}
+
+const setSurvicateUserAttributes = (country: string, type: string, creationDate: string) => {
+    if (window.Survicate) {
+        if (country) window.Survicate.track('userCountry', country);
+        if (type) window.Survicate.track('accountType', type);
+        if (creationDate) window.Survicate.track('accountCreationDate', creationDate);
+    }
+};
+
+let initSurvicateCalled = false;
+const setSurvicateCalledValue = (value: boolean) => {
+    initSurvicateCalled = value;
+};
+
+const loadSurvicateScript = (callback: () => void) => {
+    const script = document.createElement('script');
+    script.id = 'dbot-survicate';
+    script.async = true;
+    script.src = 'https://survey.survicate.com/workspaces/83b651f6b3eca1ab4551d95760fe5deb/web_surveys.js';
+    script.onload = callback;
+
+    const firstScript = document.getElementsByTagName('script')[0];
+    if (firstScript?.parentNode) {
+        firstScript.parentNode.insertBefore(script, firstScript);
+    } else {
+        document.body.appendChild(script);
+    }
+};
+
+const initSurvicate = () => {
+    if (initSurvicateCalled) return;
+    setSurvicateCalledValue(true);
+    const active_loginid = localStorage.getItem('active_loginid');
+    const client_accounts = JSON.parse(localStorage.getItem('accountsList') as string) || undefined;
+    const setAttributesIfAvailable = () => {
+        if (active_loginid && client_accounts) {
+            const { residence, account_type, created_at } = client_accounts[active_loginid] || {};
+            setSurvicateUserAttributes(residence, account_type, created_at);
+        }
+    };
+
+    if (document.getElementById('dbot-survicate')) {
+        const survicateBox = document.getElementById('survicate-box');
+        if (survicateBox) {
+            survicateBox.style.display = 'block';
+        }
+        setAttributesIfAvailable();
+    } else {
+        loadSurvicateScript(setAttributesIfAvailable);
+    }
+};
+
+export { initSurvicate, setSurvicateCalledValue };
+
 setBotPublicPath(getUrlBase('/'));