Creating hint in js agent and fixes

jsAgent/banner.js

@@ -1,7 +1,5 @@
-console.log('banner.js is here!');
-
 let temp_banner_html = `
-<div class="bw-banner" id="bw-banner-{{id}}" data-id="{{dataId}}" style="position: fixed; top: 50px; z-index: 999999; height:50px; width:435px; background-color:{{backGroundColor}}; left: 50%; transform: translate(-50%, -50%);
+<div class="bw-banner" id="bw-banner-{{id}}" data-id="{{dataId}}" style="position: fixed; {{position}}: 50px; z-index: 999999; height:50px; width:435px; background-color:{{backGroundColor}}; left: 50%; transform: translate(-50%, -50%);
     line-height: 13px; font-weight: 400; display: flex; align-items: center; justify-content: space-between; padding: 0.7rem; border-radius: 5px; height:50px; width:435px;">
         <div style="color:{{textColor}}; width: 100%; text-align: center;font-family: Inter; font-size: 13px; font-weight: 400; line-height: 24px; text-align: left; text-underline-position: from-font; text-decoration-skip-ink: none;">
          {{content}}
@@ -23,6 +21,7 @@ bw.banner = {
             const item = bannersData[i];
             let temp_html = ``;
             temp_html = temp_banner_html.replace(new RegExp('{{backGroundColor}}', 'g'), item.backgroundColor);
+            temp_html = temp_html.replace(new RegExp('{{position}}', 'g'), item.position);
             temp_html = temp_html.replace(new RegExp('{{textColor}}', 'g'), item.fontColor);
             temp_html = temp_html.replace(new RegExp('{{content}}', 'g'), item.bannerText);
             temp_html = temp_html.replace(new RegExp('{{dataId}}', 'g'), item.id);

jsAgent/hint.js

@@ -0,0 +1,321 @@
+bw.hint = {
+    isMouseOverTooltip : false,
+    isMouseOverContainer : false,
+    init: function () {
+        bw.hint.putHtml();
+    },
+    putHtml: function () {
+        const hintData = window.bwonboarddata.hint;
+
+        for (let i = 0; i < hintData.length; i++) {
+            const item = hintData[i];
+
+            const tooltip = bw.hint.generateTooltip(item);
+            const tooltipArrow = bw.hint.generateTooltipArrow();
+            const header = bw.hint.generateHeader(item);
+
+            const contentContainer = bw.hint.generateContentContainer(item);
+            const content = bw.hint.generateContent(item);
+
+            contentContainer.appendChild(content);
+
+            if(item.action !== 'no action'){
+                const button = bw.hint.generateButton(item);
+                contentContainer.appendChild(button);
+            }
+
+            tooltip.appendChild(tooltipArrow);
+            tooltip.appendChild(header);
+            tooltip.appendChild(contentContainer);
+
+            document.body.appendChild(tooltip);
+
+            bw.hint.positionTooltip(tooltip, contentContainer, tooltipArrow);
+
+            tooltip.addEventListener('mouseenter', function (e) {
+                clearInterval(tooltip.timer);
+                e.target.style.visibility = 'visible';
+            });
+
+            tooltip.addEventListener('mouseleave', function (e) {
+                tooltip.timer = setTimeout(() => {
+                    e.target.style.visibility = 'hidden';
+                }, 1500);
+            });
+            bw.hint.bindSelector(item.targetElement, tooltip);
+
+        }   
+    },
+    //this can be delete later
+    positionTooltip: function(tooltip, tooltipOwner, tooltipArrow) {
+        const containerRect = tooltipOwner.getBoundingClientRect();
+        const tooltipRect = tooltip.getBoundingClientRect();
+        const viewportWidth = window.innerWidth;
+
+        let top = containerRect.top - tooltipRect.height - 5; // 5px above
+        let left = containerRect.left + (containerRect.width - tooltipRect.width) / 2; // Centered horizontally
+        let arrowPosition = 'bottom';
+        let tooltipPosition = 'top';
+        if (top < 0) {
+            arrowPosition = 'top';
+            tooltipPosition = 'bottom';
+        }
+        if (left < 0) {
+            arrowPosition = 'left';
+            tooltipPosition = 'right';
+        } else if (left + tooltipRect.width > viewportWidth) {
+            arrowPosition = 'right';
+            tooltipPosition = 'left';
+        }
+
+        if (tooltipPosition === 'top') {
+            tooltip.style.top = '-87px';
+            tooltip.style.left = '-27px';
+        } else if (tooltipPosition === 'bottom') {
+            tooltip.style.top = '38px';
+            tooltip.style.left = '-27px';
+        } else if (tooltipPosition === 'left') {
+            tooltip.style.top = '-24px';
+            tooltip.style.left = '-172px';
+        } else if (tooltipPosition === 'right') {
+            tooltip.style.top = '-24px';
+            tooltip.style.left = '118px';
+        }
+
+        if(arrowPosition === 'bottom') {
+            tooltipArrow.style.top = '100%';
+            tooltipArrow.style.left = '50%';
+            tooltipArrow.style.marginLeft = '-5px';
+            tooltipArrow.style.borderColor = '#555 transparent transparent transparent';
+        } else if(arrowPosition === 'top') {
+            tooltipArrow.style.top = '-10px';
+            tooltipArrow.style.left = '50%';
+            tooltipArrow.style.marginLeft = '-5px';
+            tooltipArrow.style.borderColor = 'transparent transparent #555 transparent';
+        } else if(arrowPosition === 'left') {
+            tooltipArrow.style.top = '50%';
+            tooltipArrow.style.left = '-5px';
+            tooltipArrow.style.marginTop = '-5px';
+            tooltipArrow.style.borderColor = 'transparent #555 transparent transparent';
+        } else if(arrowPosition === 'right') {
+            tooltipArrow.style.top = '50%';
+            tooltipArrow.style.left = '';
+            tooltipArrow.style.right = '-10px';
+            tooltipArrow.style.marginTop = '-5px';
+            tooltipArrow.style.borderColor = 'transparent transparent transparent #555';
+        }
+        return {tooltipPosition, arrowPosition};
+    },
+    generateTooltip: function (item) {
+        const tooltip = document.createElement('div');
+        tooltip.pos = item.tooltipPlacement;
+        tooltip.timer = null;
+        tooltip.positionTimer = null;
+        tooltip.style.cssText = `
+            width: 400px;
+            height: 250px;
+            position: absolute;
+            background-color: white;    
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            display: flex;
+            flex-direction: column;
+            color: ${item.textColor};
+            z-index: 9999;
+        `;
+
+        return tooltip;
+    },
+    generateTooltipArrow: function () {
+        const tooltipArrow = document.createElement('div');
+        tooltipArrow.style.content = '""';
+        tooltipArrow.style.position = 'absolute';
+        tooltipArrow.style.borderWidth = '5px';
+        tooltipArrow.style.borderStyle = 'solid';
+        tooltipArrow.style.width = '0';
+        tooltipArrow.style.height = '0';
+
+        return tooltipArrow;
+    },
+    generateHeader: function (item) {
+        const header = document.createElement('div');
+        header.style.cssText = `background-color: ${item.headerBackgroundColor}; color: ${item.headerColor};`;
+        header.innerHTML = `
+            <h3 style="font-size: 20px; font-weight: 600; line-height: 30px; text-align: left; padding: 0 32px; margin-bottom: 8px; margin-top: 24px;font-family: "Inter", sans-serif;">${item.header}</h3>
+        `;
+        return header;
+    },
+    generateContentContainer: function (item) {
+        const contentContainer = document.createElement('div');
+        contentContainer.style.cssText = `
+            color: ${item.textColor};   
+            justify-content: space-between;
+            display: flex;
+            flex-direction: column;
+            box-sizing: border-box;
+            min-height: 170px;
+            padding: 0 32px;
+            font-size: 13px;
+            word-wrap: break-word;
+        `;
+
+        return contentContainer
+    },
+    generateContent : function (item) {
+        const content = document.createElement('div');
+        content.style.cssText = `
+            font-family: "Inter", sans-serif;
+        `;
+        content.innerHTML = item.hintContent;
+        return content;
+    },
+    generateButton: function (item) {
+        const btnEvent = item.action;
+
+        const buttonContainer = document.createElement('div');
+        buttonContainer.style.cssText = `
+                margin-top: 8px;
+                display: flex;
+                justify-content: flex-end;
+        `;
+        const button = document.createElement('button');
+        button.textContent = item.actionButtonText;
+        button.style.cssText = `
+            background-color: ${item.buttonBackgroundColor};
+            color: ${item.buttonTextColor};
+            border: none;
+            border-radius: 8px;
+            min-width: 64px;
+            padding: 6px 16px;
+            font-family: Inter;
+            font-size: 13px;
+            cursor: pointer;
+            float: right;
+            display: inline-flex;
+            -webkit-box-align: center;
+            align-items: center;
+            -webkit-box-pack: center;
+            position: relative;
+            box-sizing: border-box;
+            -webkit-tap-highlight-color: transparent;
+            vertical-align: middle;
+        `;
+
+        button.addEventListener('click', () => {
+            if(btnEvent == 'no action'){
+
+            }
+            else if(btnEvent == 'open url'){
+                location.href = item.actionButtonUrl;
+            }
+            else if(btnEvent == 'open url in a new tab'){
+                window.open(item.actionButtonUrl, '_blank');
+            }
+        });
+
+        button.addEventListener('mouseenter', function(e) {
+            e.target.style.boxShadow = '0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)'
+        });
+
+        button.addEventListener('mouseleave', function(e) {
+            e.target.style.boxShadow = 'none';
+        });
+
+        buttonContainer.appendChild(button);
+        return buttonContainer;
+    },
+    bindSelector: function (selector, tooltip) {
+        const elements = document.querySelectorAll(selector);
+        for (let i = 0; i < elements.length; i++) {
+            const element = elements[i];
+
+            const tooltipCue = document.createElement('div');
+            tooltipCue.className = 'tooltip-cue';
+            tooltipCue.textContent = '?';
+            tooltipCue.style.cssText = `
+                position: absolute;
+                top: -8px;
+                right: -8px;
+                background-color: #2078ca;
+                color: #fff;
+                width: 16px;
+                height: 16px;
+                border-radius: 50%;
+                font-size: 12px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                cursor: pointer;
+                z-index: 1001; 
+                animation: pulse 1.5s infinite;
+            }`;
+            const rect = element.getBoundingClientRect();
+            tooltipCue.style.left = `${rect.right + window.scrollX - 8}px`; // Adjust position
+            tooltipCue.style.top = `${rect.top + window.scrollY - 8}px`; // Adjust position
+
+            tooltipCue.animate(
+                [
+                    { transform: 'scale(1)', opacity: 1 },
+                    { transform: 'scale(1.2)', opacity: 0.7 },
+                    { transform: 'scale(1)', opacity: 1 }
+                ],
+                {
+                    duration: 1500, // 1.5 seconds
+                    iterations: Infinity // Loop forever
+                }
+            );
+
+            document.body.appendChild(tooltipCue);
+
+            element.addEventListener('mouseenter', function (e) {
+
+                clearTimeout(tooltip.timer);
+                clearTimeout(tooltip.positionTimer);
+                tooltip.positionTimer = setTimeout(function() {
+
+                    const position = e.target.getAttribute('data-tooltip-position') || 'top';
+
+
+
+                    const rect = e.target.getBoundingClientRect();
+                    switch (position) {
+                        case 'top':
+                            tooltip.style.left = `${rect.left + window.scrollX + rect.width / 2}px`;
+                            tooltip.style.top = `${rect.top + window.scrollY - tooltip.offsetHeight - 5}px`;
+                            tooltip.style.transform = 'translateX(-50%)';
+                            break;
+                        case 'bottom':
+                            tooltip.style.left = `${rect.left + window.scrollX + rect.width / 2}px`;
+                            tooltip.style.top = `${rect.bottom + window.scrollY + 5}px`;
+                            tooltip.style.transform = 'translateX(-50%)';
+                            break;
+                        case 'left':
+                            tooltip.style.left = `${rect.left + window.scrollX - tooltip.offsetWidth - 5}px`;
+                            tooltip.style.top = `${rect.top + window.scrollY + rect.height / 2}px`;
+                            tooltip.style.transform = 'translateY(-50%)';
+                            break;
+                        case 'right':
+                            tooltip.style.left = `${rect.right + window.scrollX + 5}px`;
+                            tooltip.style.top = `${rect.top + window.scrollY + rect.height / 2}px`;
+                            tooltip.style.transform = 'translateY(-50%)';
+                            break;
+                    }
+
+                    tooltip.style.visibility = 'visible';
+
+
+                }, 500);
+
+            });
+            element.addEventListener('mouseleave', function (e) {
+                tooltip.timer = setTimeout(() => {
+                    tooltip.style.visibility = 'hidden';
+                }, 1500);
+            });
+        }
+    }
+
+};
+
+(async function () {
+    bw.hint.init();
+})();

jsAgent/links.js

@@ -1,4 +1,3 @@
-console.log('bw-link.js is loaded');
 const linksDefaultOptions = {
     "url": "https://www.google.com",
     "order": 1,
@@ -22,7 +21,7 @@ const global_content_html=`
                         </clipPath>
                     </defs>
                 </svg>
-                <a href="{{link}}" target="_blank" style="color:{{linkFontColor}}; text-decoration: none; font-family: Inter; font-size: 1rem; font-weight: 400;">{{title}}</a>
+                <a href="{{link}}" target="_blank" style="color:{{linkFontColor}}; text-decoration: none; font-family: Inter; font-size: 13px; font-weight: 400;">{{title}}</a>
             </li>
         `;
 
@@ -38,7 +37,7 @@ bw.links={
             ...linksDefaultOptions,
             ...options
         };
-        console.log(option);
+
         let temp_html = `
         <div style="position: fixed; bottom: 20px; right: 30px; z-index: 9999999;">
             <div id="bw-links" style=" box-shadow: 0px 8px 8px -4px rgba(16, 24, 40, 0.031372549), 0px 20px 24px -4px rgba(16, 24, 40, 0.0784313725); width: 330px; display: flex; flex-direction: column; justify-content: space-between; ">
@@ -96,7 +95,7 @@ bw.links={
         return temp_content_html;
     },
     putFooter: function(){
-        return '<p style="margin-bottom: 0px; margin-top: 0px; background: white;; padding: 14px 0 11px;border-top: 1px solid #ebebeb; font-family: Inter; font-size: 0.688rem; font-weight: 400; line-height: 2.12; text-align: center;">Powered by BlueWave Onboarding</p>';
+        return '<p style="margin-bottom: 0px; margin-top: 0px; background: white;; padding: 14px 0 11px;border-top: 1px solid #ebebeb; font-family: Inter; font-size: 11px; font-weight: 400; line-height: 2.12; text-align: center;">Powered by BlueWave Onboarding</p>';
     },
     bindClick : function(){
         bw.util.bindLive("#bw-link-icon", "click", function(){

jsAgent/main.js

@@ -1,12 +1,14 @@
 //CONSTANTS
-const BW_SERVER_ENDPOINT_BASE = window.bwApiBaseUrl; //"http://localhost:3000/api/";
+const BW_SERVER_ENDPOINT_BASE = window.bwApiBaseUrl;
 const BW_GET_GUIDE_LOG_URL= `${BW_SERVER_ENDPOINT_BASE}guide/get_incomplete_guides_by_url`;
 const BW_ADD_GUIDE_LOG_URL= `${BW_SERVER_ENDPOINT_BASE}guide_log/add_guide_log`;
-const BW_JS_BASE_URL = window.bwAgentBaseUrl; //"http://localhost:8082/";
+const BW_JS_BASE_URL = window.bwAgentBaseUrl;
 const BW_POPUP_JS_URL = `${BW_JS_BASE_URL}popup.js`;
 const BW_LINKS_JS_URL = `${BW_JS_BASE_URL}links.js`;
 const BW_BANNER_JS_URL = `${BW_JS_BASE_URL}banner.js`;
 const BW_TOUR_JS_URL = `${BW_JS_BASE_URL}tour.js`;
+const BW_HINT_JS_URL = `${BW_JS_BASE_URL}hint.js`;
+
 
 const BW_USER_KEY = "BW_USER_KEY";
 
@@ -196,6 +198,9 @@ bw.init = (cb) => {
             if (onBoardConfig.helperLink?.length > 0) {
                 bw.util.loadScriptAsync(BW_LINKS_JS_URL);
             }
+            if (onBoardConfig.hint?.length > 0) {
+                bw.util.loadScriptAsync(BW_HINT_JS_URL);
+            }
         } catch (error) {
             console.log("error :", error);
         }