releasebird-javascript-sdk 1.0.73 → 1.0.76

package/src/RbirdWebsiteWidget.js

@@ -1,5 +1,6 @@
 import RbirdUtils from "./RbirdUtils";
 import ReleasebirdImageViewer from "./ReleasebirdImageViewer";
+import ReleasebirdFormViewer from "./ReleasebirdFormViewer";
 import {
     hideWidgetImage,
     launcher0,
@@ -44,6 +45,15 @@ export default class RbirdWebsiteWidget {
     messageBubblesContainer = null;
     dismissedBubbles = new Set(); // Track dismissed bubbles by chatId
 
+    // Drag functionality
+    widgetWrapper = null;
+    dragHandle = null;
+    isDragging = false;
+    dragStartX = 0;
+    dragStartY = 0;
+    initialX = 0;
+    initialY = 0;
+
     static getInstance() {
         if (!this.instance) {
             this.instance = new RbirdWebsiteWidget();
@@ -72,11 +82,23 @@ export default class RbirdWebsiteWidget {
             this.websiteWidgetVisible = true;
 
             try {
+                // Create wrapper for drag handle and button
+                this.widgetWrapper = document.createElement("div");
+                this.widgetWrapper.className = "rbird-widget-wrapper";
+                document.body.appendChild(this.widgetWrapper);
+
+                // Create drag handle
+                this.dragHandle = this.createDragHandle();
+                this.widgetWrapper.appendChild(this.dragHandle);
+
+                // Create launcher button
                 let elem = document.createElement("div");
-                elem.onclick = () => {
-                    this.openWebsiteWidget();
+                elem.onclick = (e) => {
+                    if (!this.isDragging) {
+                        this.openWebsiteWidget();
+                    }
                 };
-                document.body.appendChild(elem);
+                this.widgetWrapper.appendChild(elem);
                 this.websiteWidget = elem;
 
                 if (RbirdSessionManager.getInstance().widgetSettings?.allowClose && !this.noButton) {
@@ -94,6 +116,7 @@ export default class RbirdWebsiteWidget {
                 document.body.appendChild(this.countBadge);
 
                 this.styleWidget();
+                this.initDragListeners();
 
                 resolve();
             } catch (error) {
@@ -108,6 +131,10 @@ export default class RbirdWebsiteWidget {
 
     openWebsiteWidget() {
         if (typeof window === 'undefined' || typeof document === 'undefined') return;
+
+        // Position the modal relative to the bubble position
+        this.positionWidgetContent();
+
         RbirdUtils.addClass(this.widgetContent, "cta__modal--visible");
         RbirdUtils.addClass(this.backdrop, "cta__modal-dimmer--visible");
 
@@ -127,6 +154,9 @@ export default class RbirdWebsiteWidget {
                 this.hideWidgetButton.style.display = 'none';
             }
             this.websiteWidget.style.display = 'none';
+            if (this.widgetWrapper) {
+                this.widgetWrapper.style.display = 'none';
+            }
         }
 
         if (RbirdSessionManager.getInstance().widgetSettings.launcher === 5) {
@@ -164,6 +194,9 @@ export default class RbirdWebsiteWidget {
         if (this.hideWidgetButton) {
             this.hideWidgetButton.style.display = 'none';
             this.websiteWidget.style.display = 'none';
+            if (this.widgetWrapper) {
+                this.widgetWrapper.style.display = 'none';
+            }
         }
     }
 
@@ -236,11 +269,17 @@ export default class RbirdWebsiteWidget {
     showButton(showButton) {
        if (typeof window === 'undefined') return;
        if (showButton && !this.noButton) {
+           if (this.widgetWrapper) {
+               this.widgetWrapper.style.display = 'flex';
+           }
            this.websiteWidget.style.display = 'block';
            if (this.hideWidgetButton && !this.noButton) {
                this.hideWidgetButton.style.display = "block";
            }
        } else {
+           if (this.widgetWrapper) {
+               this.widgetWrapper.style.display = 'none';
+           }
            this.websiteWidget.style.display = 'none';
            if (this.hideWidgetButton) {
                this.hideWidgetButton.style.display = "none";
@@ -267,11 +306,19 @@ export default class RbirdWebsiteWidget {
         this.initButton();
         if (!this.noButton) {
             this.websiteWidget.style.display = 'block';
+            if (this.widgetWrapper) {
+                this.widgetWrapper.style.display = 'flex';
+            }
         }
 
         this.websiteWidget.onclick = () => this.openWebsiteWidget();
         this.unregisterListeners();
 
+        // Update positions of related elements after a short delay to ensure DOM is updated
+        setTimeout(() => {
+            this.updateRelatedElementsPosition();
+        }, 50);
+
         // Reload message bubbles when widget is closed
         this.dismissedBubbles.clear(); // Reset dismissed bubbles
         this.fetchUnreadMessages();
@@ -310,6 +357,16 @@ export default class RbirdWebsiteWidget {
             ReleasebirdImageViewer.showImage(e.data?.url);
         }
 
+        if (e.data?.key === 'showForm') {
+            ReleasebirdFormViewer.showForm(
+                e.data?.form,
+                e.data?.formId,
+                e.data?.chatId,
+                e.data?.apiKey,
+                that.iframe
+            );
+        }
+
         if (e.data === 'newMessageArrived') {
             this.countNotifications();
             // Also refresh message bubbles when new message arrives
@@ -337,6 +394,29 @@ export default class RbirdWebsiteWidget {
         this.websiteWidget.className=RbirdSessionManager.getInstance().widgetSettings.launcher === 5 ? 'launcherButton5' : 'launcherButton' ;
         this.initButton();
 
+        // Position the wrapper based on launcher settings or saved position
+        const settings = RbirdSessionManager.getInstance().widgetSettings;
+        const launcherPosition = settings.launcherPosition || 'right';
+        const spaceLeftRight = settings.spaceLeftRight || 20;
+        const spaceBottom = settings.spaceBottom || 20;
+
+        // Set initial wrapper position
+        this.widgetWrapper.style.bottom = `${spaceBottom}px`;
+        if (launcherPosition === 'right') {
+            this.widgetWrapper.style.right = `${spaceLeftRight}px`;
+            this.widgetWrapper.style.left = 'unset';
+            this.widgetWrapper.style.flexDirection = 'row';
+        } else {
+            this.widgetWrapper.style.left = `${spaceLeftRight}px`;
+            this.widgetWrapper.style.right = 'unset';
+            this.widgetWrapper.style.flexDirection = 'row-reverse';
+        }
+
+        // Try to apply saved position after a short delay (to ensure elements are rendered)
+        setTimeout(() => {
+            this.applyWidgetPosition();
+        }, 100);
+
         // Create backdrop
         this.backdrop = document.createElement("div");
         this.backdrop.className = "cta__modal-dimmer";
@@ -418,11 +498,9 @@ export default class RbirdWebsiteWidget {
         };
         http.onreadystatechange = function () {
             if (http.readyState === XMLHttpRequest.DONE) {
-                console.log('[RbirdWidget] Unread messages response:', http.status, http.responseText);
                 if (http.status === 200 || http.status === 201) {
                     try {
                         const messages = JSON.parse(http.responseText);
-                        console.log('[RbirdWidget] Parsed messages:', messages);
                         that.renderMessageBubbles(messages);
                     } catch (e) {
                         console.error('[RbirdWidget] Error parsing unread messages:', e);
@@ -438,12 +516,10 @@ export default class RbirdWebsiteWidget {
      * @param {Array} messages - Array of unread messages (one per chat, max 5)
      */
     renderMessageBubbles(messages) {
-        console.log('[RbirdWidget] renderMessageBubbles called with:', messages);
         if (typeof window === 'undefined' || typeof document === 'undefined') return;
 
         // Don't show bubbles if widget is open
         if (this.isOpen()) {
-            console.log('[RbirdWidget] Widget is open, hiding bubbles');
             this.hideMessageBubbles();
             return;
         }
@@ -453,10 +529,8 @@ export default class RbirdWebsiteWidget {
             .filter(msg => !this.dismissedBubbles.has(msg.chatId))
             .slice(0, 5);
 
-        console.log('[RbirdWidget] Filtered messages:', filteredMessages);
 
         if (filteredMessages.length === 0) {
-            console.log('[RbirdWidget] No messages to display');
             this.hideMessageBubbles();
             return;
         }
@@ -618,4 +692,282 @@ export default class RbirdWebsiteWidget {
         }
     }
 
+    /**
+     * Create the drag handle element (6-dot grip pattern)
+     */
+    createDragHandle() {
+        const handle = document.createElement('div');
+        handle.className = 'rbird-drag-handle';
+
+        // Create 3 rows of 2 dots each
+        for (let i = 0; i < 3; i++) {
+            const row = document.createElement('div');
+            row.className = 'rbird-drag-handle-row';
+            for (let j = 0; j < 2; j++) {
+                const dot = document.createElement('div');
+                dot.className = 'rbird-drag-handle-dot';
+                row.appendChild(dot);
+            }
+            handle.appendChild(row);
+        }
+
+        return handle;
+    }
+
+    /**
+     * Initialize drag event listeners
+     */
+    initDragListeners() {
+        if (!this.dragHandle) return;
+
+        // Mouse events
+        this.dragHandle.addEventListener('mousedown', (e) => this.startDrag(e));
+        document.addEventListener('mousemove', (e) => this.onDrag(e));
+        document.addEventListener('mouseup', (e) => this.endDrag(e));
+
+        // Touch events for mobile
+        this.dragHandle.addEventListener('touchstart', (e) => this.startDrag(e), { passive: false });
+        document.addEventListener('touchmove', (e) => this.onDrag(e), { passive: false });
+        document.addEventListener('touchend', (e) => this.endDrag(e));
+    }
+
+    /**
+     * Start dragging
+     */
+    startDrag(e) {
+        if (this.isMobileDevice()) return; // Disable dragging on mobile for now
+
+        e.preventDefault();
+        this.isDragging = true;
+        this.widgetWrapper.classList.add('rbird-dragging');
+
+        const clientX = e.type.includes('touch') ? e.touches[0].clientX : e.clientX;
+        const clientY = e.type.includes('touch') ? e.touches[0].clientY : e.clientY;
+
+        this.dragStartX = clientX;
+        this.dragStartY = clientY;
+
+        const rect = this.widgetWrapper.getBoundingClientRect();
+        this.initialX = rect.left;
+        this.initialY = rect.top;
+    }
+
+    /**
+     * Handle drag movement
+     */
+    onDrag(e) {
+        if (!this.isDragging) return;
+
+        e.preventDefault();
+
+        const clientX = e.type.includes('touch') ? e.touches[0].clientX : e.clientX;
+        const clientY = e.type.includes('touch') ? e.touches[0].clientY : e.clientY;
+
+        const deltaX = clientX - this.dragStartX;
+        const deltaY = clientY - this.dragStartY;
+
+        let newX = this.initialX + deltaX;
+        let newY = this.initialY + deltaY;
+
+        // Constrain to viewport
+        const wrapperRect = this.widgetWrapper.getBoundingClientRect();
+        const maxX = window.innerWidth - wrapperRect.width;
+        const maxY = window.innerHeight - wrapperRect.height;
+
+        newX = Math.max(0, Math.min(newX, maxX));
+        newY = Math.max(0, Math.min(newY, maxY));
+
+        this.updateWidgetPosition(newX, newY);
+    }
+
+    /**
+     * End dragging and save position
+     */
+    endDrag(e) {
+        if (!this.isDragging) return;
+
+        this.isDragging = false;
+        this.widgetWrapper.classList.remove('rbird-dragging');
+
+        // Save position to localStorage
+        const rect = this.widgetWrapper.getBoundingClientRect();
+        this.saveWidgetPosition(rect.left, rect.top);
+    }
+
+    /**
+     * Update widget and related elements position
+     */
+    updateWidgetPosition(x, y) {
+        if (!this.widgetWrapper) return;
+
+        // Update wrapper position
+        this.widgetWrapper.style.left = `${x}px`;
+        this.widgetWrapper.style.right = 'unset';
+        this.widgetWrapper.style.top = 'unset';
+        this.widgetWrapper.style.bottom = `${window.innerHeight - y - this.widgetWrapper.offsetHeight}px`;
+
+        // Update badge position
+        if (this.countBadge) {
+            const buttonRect = this.websiteWidget.getBoundingClientRect();
+            this.countBadge.style.left = `${buttonRect.right - 15}px`;
+            this.countBadge.style.right = 'unset';
+            this.countBadge.style.bottom = `${window.innerHeight - buttonRect.top + 5}px`;
+        }
+
+        // Update hide button position (top right of bubble)
+        if (this.hideWidgetButton) {
+            const buttonRect = this.websiteWidget.getBoundingClientRect();
+            this.hideWidgetButton.style.left = `${buttonRect.right - 5}px`;
+            this.hideWidgetButton.style.right = 'unset';
+            this.hideWidgetButton.style.bottom = `${window.innerHeight - buttonRect.top + 5}px`;
+        }
+
+        // Update message bubbles container position
+        if (this.messageBubblesContainer) {
+            const buttonRect = this.websiteWidget.getBoundingClientRect();
+            this.messageBubblesContainer.style.left = `${buttonRect.left}px`;
+            this.messageBubblesContainer.style.right = 'unset';
+            this.messageBubblesContainer.style.bottom = `${window.innerHeight - buttonRect.top + 20}px`;
+        }
+    }
+
+    /**
+     * Save widget position to localStorage
+     */
+    saveWidgetPosition(x, y) {
+        try {
+            const position = { x, y, timestamp: Date.now() };
+            window.localStorage.setItem('rbird_widget_position', JSON.stringify(position));
+        } catch (e) {
+            console.warn('[RbirdWidget] Could not save position to localStorage:', e);
+        }
+    }
+
+    /**
+     * Load widget position from localStorage
+     */
+    loadWidgetPosition() {
+        try {
+            const saved = window.localStorage.getItem('rbird_widget_position');
+            if (saved) {
+                const position = JSON.parse(saved);
+                // Validate position is still within viewport
+                if (position.x >= 0 && position.x < window.innerWidth &&
+                    position.y >= 0 && position.y < window.innerHeight) {
+                    return position;
+                }
+            }
+        } catch (e) {
+            console.warn('[RbirdWidget] Could not load position from localStorage:', e);
+        }
+        return null;
+    }
+
+    /**
+     * Apply saved position or use default
+     */
+    applyWidgetPosition() {
+        const savedPosition = this.loadWidgetPosition();
+
+        if (savedPosition && this.widgetWrapper) {
+            // Apply saved position
+            this.updateWidgetPosition(savedPosition.x, savedPosition.y);
+            // Update related elements after a short delay to ensure DOM is ready
+            setTimeout(() => {
+                this.updateRelatedElementsPosition();
+            }, 50);
+            return true;
+        }
+        return false;
+    }
+
+    /**
+     * Update positions of badge, hide button, and message bubbles based on current button position
+     */
+    updateRelatedElementsPosition() {
+        if (!this.websiteWidget) return;
+
+        const buttonRect = this.websiteWidget.getBoundingClientRect();
+
+        // Check if we have a custom position (not default)
+        const savedPosition = this.loadWidgetPosition();
+        if (!savedPosition) return; // Use default CSS positioning
+
+        // Update badge position
+        if (this.countBadge) {
+            this.countBadge.style.left = `${buttonRect.right - 15}px`;
+            this.countBadge.style.right = 'unset';
+            this.countBadge.style.bottom = `${window.innerHeight - buttonRect.top + 5}px`;
+        }
+
+        // Update hide button position (top right of bubble)
+        if (this.hideWidgetButton) {
+            this.hideWidgetButton.style.left = `${buttonRect.right - 5}px`;
+            this.hideWidgetButton.style.right = 'unset';
+            this.hideWidgetButton.style.bottom = `${window.innerHeight - buttonRect.top + 5}px`;
+        }
+
+        // Update message bubbles container position
+        if (this.messageBubblesContainer) {
+            this.messageBubblesContainer.style.left = `${buttonRect.left}px`;
+            this.messageBubblesContainer.style.right = 'unset';
+            this.messageBubblesContainer.style.bottom = `${window.innerHeight - buttonRect.top + 20}px`;
+        }
+    }
+
+    /**
+     * Position the widget content (modal) relative to the bubble position
+     */
+    positionWidgetContent() {
+        if (!this.widgetContent || !this.websiteWidget || this.isMobileDevice()) return;
+
+        let buttonRect = this.websiteWidget.getBoundingClientRect();
+        const modalWidth = 450; // Default modal width
+        const modalHeight = 725; // Default modal height
+        const padding = 10;
+        const gap = 5; // Small gap between bubble and modal
+
+        // Check if there's enough space above the bubble for the modal
+        const spaceAbove = buttonRect.top - gap - padding;
+        const effectiveModalHeight = Math.min(modalHeight, window.innerHeight - 100); // Leave some space
+
+        if (spaceAbove < effectiveModalHeight) {
+            // Not enough space - move bubble down
+            const neededSpace = effectiveModalHeight + gap + padding;
+            const newBottomFromViewport = window.innerHeight - neededSpace - buttonRect.height;
+
+            // Update bubble position
+            if (this.widgetWrapper) {
+                this.widgetWrapper.style.bottom = `${newBottomFromViewport}px`;
+                // Save the new position
+                const wrapperRect = this.widgetWrapper.getBoundingClientRect();
+                this.saveWidgetPosition(wrapperRect.left, wrapperRect.top);
+            }
+
+            // Get updated button position
+            buttonRect = this.websiteWidget.getBoundingClientRect();
+        }
+
+        // Horizontal position - align modal's right edge with bubble's right edge
+        const rightFromViewport = window.innerWidth - buttonRect.right;
+        this.widgetContent.style.right = `${rightFromViewport}px`;
+        this.widgetContent.style.left = 'unset';
+
+        // Check if modal would go off-screen on the left
+        const modalLeft = buttonRect.right - modalWidth;
+        if (modalLeft < padding) {
+            // Shift modal to the right to keep it on screen
+            this.widgetContent.style.left = `${padding}px`;
+            this.widgetContent.style.right = 'unset';
+        }
+
+        // Vertical position - directly above the button with small gap
+        const bottomFromViewport = window.innerHeight - buttonRect.top + gap;
+        this.widgetContent.style.bottom = `${bottomFromViewport}px`;
+        this.widgetContent.style.top = 'unset';
+
+        // Reset max-height to default
+        this.widgetContent.style.maxHeight = '';
+    }
+
 }