releasebird-javascript-sdk 1.0.91 → 1.0.93

package/src/RbirdAutomationManager.js

@@ -36,7 +36,10 @@ export class RbirdAutomationManager {
         // Register event handlers
         this.registerEventHandlers();
 
-        // Start command polling
+        // Listen for WebSocket notifications from widget iframe
+        this.setupWebSocketListener();
+
+        // Start command polling (reduced frequency - WebSocket is primary)
         this.startCommandPolling();
 
         // Send first_seen event
@@ -47,6 +50,21 @@ export class RbirdAutomationManager {
         console.log('[Rbird] Automation manager initialized');
     }
 
+    /**
+     * Setup listener for WebSocket notifications from widget iframe.
+     * This allows instant command execution when the backend pushes a notification.
+     */
+    setupWebSocketListener() {
+        window.addEventListener('message', (event) => {
+            // Handle automation command notification from widget
+            if (event.data === 'automationCommand') {
+                console.log('[Rbird] Received WebSocket automation notification');
+                // Immediately fetch and execute pending commands
+                this.pollCommands();
+            }
+        });
+    }
+
     /**
      * Get or set the first_seen timestamp
      */
@@ -177,7 +195,9 @@ export class RbirdAutomationManager {
     }
 
     /**
-     * Start polling for pending commands
+     * Start polling for pending commands.
+     * Polling is now a fallback mechanism - WebSocket is the primary delivery method.
+     * The interval is set to 60 seconds to catch any missed commands.
      */
     startCommandPolling() {
         if (this.pollingInterval) {
@@ -187,8 +207,8 @@ export class RbirdAutomationManager {
         // Poll immediately once
         this.pollCommands();
 
-        // Then poll every 3 seconds
-        this.pollingInterval = setInterval(() => this.pollCommands(), 3000);
+        // Poll every 60 seconds as fallback (WebSocket handles instant delivery)
+        this.pollingInterval = setInterval(() => this.pollCommands(), 60000);
     }
 
     /**

package/src/RbirdBookingManager.js

@@ -0,0 +1,255 @@
+import RbirdSessionManager from './RbirdSessionManager';
+
+// CONTENT_URL is defined globally via webpack.DefinePlugin
+/* global CONTENT_URL */
+
+export class RbirdBookingManager {
+    static instance;
+
+    constructor() {
+        this.apiKey = null;
+        this.isOpen = false;
+    }
+
+    static getInstance() {
+        if (!RbirdBookingManager.instance) {
+            RbirdBookingManager.instance = new RbirdBookingManager();
+        }
+        return RbirdBookingManager.instance;
+    }
+
+    init(apiKey) {
+        if (typeof window === 'undefined') return;
+        this.apiKey = apiKey;
+        this.injectStyles();
+    }
+
+    /**
+     * Show the booking modal
+     * @param {Object} options - Optional configuration
+     * @param {string} options.appointmentTypeId - Pre-select a specific appointment type
+     * @param {Function} options.onSuccess - Callback when booking is completed
+     * @param {Function} options.onClose - Callback when modal is closed
+     */
+    showBooking(options = {}) {
+        if (typeof window === 'undefined') return;
+        if (!this.apiKey) {
+            console.error('[RbirdBookingManager] SDK not initialized. Call Rbird.initialize() first.');
+            return;
+        }
+        if (this.isOpen) {
+            console.warn('[RbirdBookingManager] Booking modal is already open.');
+            return;
+        }
+
+        const sessionManager = RbirdSessionManager.getInstance();
+        const state = sessionManager.getState();
+
+        // Build iframe URL
+        let iframeUrl = `${CONTENT_URL}/widget?apiKey=${this.apiKey}&view=BOOKING`;
+
+        if (state?.identify?.people) {
+            iframeUrl += `&people=${state.identify.people}`;
+        }
+        if (state?.identify?.hash) {
+            iframeUrl += `&hash=${state.identify.hash}`;
+        }
+        if (sessionManager.anonymousIdentifier) {
+            iframeUrl += `&ai=${sessionManager.anonymousIdentifier}`;
+        }
+        if (options.appointmentTypeId) {
+            iframeUrl += `&appointmentTypeId=${encodeURIComponent(options.appointmentTypeId)}`;
+        }
+
+        this.createModal(iframeUrl, options);
+        this.isOpen = true;
+    }
+
+    createModal(iframeUrl, options) {
+        // Create overlay
+        const overlay = document.createElement('div');
+        overlay.className = 'rbird-booking-overlay';
+        overlay.id = 'rbird-booking-overlay';
+
+        // Create modal container
+        const modal = document.createElement('div');
+        modal.className = 'rbird-booking-modal';
+        modal.id = 'rbird-booking-modal';
+
+        // Create close button
+        const closeButton = document.createElement('button');
+        closeButton.className = 'rbird-booking-close';
+        closeButton.innerHTML = '×';
+        closeButton.onclick = () => this.closeBooking(options.onClose);
+
+        // Create iframe
+        const iframe = document.createElement('iframe');
+        iframe.className = 'rbird-booking-iframe';
+        iframe.src = iframeUrl;
+        iframe.id = 'rbird-booking-iframe';
+        iframe.allow = 'clipboard-write';
+
+        modal.appendChild(closeButton);
+        modal.appendChild(iframe);
+        overlay.appendChild(modal);
+
+        // Close on overlay click
+        overlay.addEventListener('click', (e) => {
+            if (e.target === overlay) {
+                this.closeBooking(options.onClose);
+            }
+        });
+
+        // Handle messages from iframe
+        this.messageHandler = (e) => {
+            if (e.data === 'close' || e.data === 'closeWidget') {
+                this.closeBooking(options.onClose);
+            }
+            if (e.data === 'bookingSuccess') {
+                if (options.onSuccess) {
+                    options.onSuccess();
+                }
+                this.closeBooking(options.onClose);
+            }
+        };
+        window.addEventListener('message', this.messageHandler);
+
+        // Handle escape key
+        this.keyHandler = (e) => {
+            if (e.key === 'Escape') {
+                this.closeBooking(options.onClose);
+            }
+        };
+        window.addEventListener('keydown', this.keyHandler);
+
+        document.body.appendChild(overlay);
+
+        // Animate in
+        requestAnimationFrame(() => {
+            overlay.classList.add('rbird-booking-overlay-visible');
+        });
+    }
+
+    closeBooking(onClose) {
+        const overlay = document.getElementById('rbird-booking-overlay');
+        if (overlay) {
+            overlay.classList.remove('rbird-booking-overlay-visible');
+            setTimeout(() => {
+                overlay.remove();
+            }, 300);
+        }
+
+        // Clean up event listeners
+        if (this.messageHandler) {
+            window.removeEventListener('message', this.messageHandler);
+        }
+        if (this.keyHandler) {
+            window.removeEventListener('keydown', this.keyHandler);
+        }
+
+        this.isOpen = false;
+
+        if (onClose) {
+            onClose();
+        }
+    }
+
+    injectStyles() {
+        if (typeof window === 'undefined' || document.getElementById('rbird-booking-styles')) return;
+
+        const style = document.createElement('style');
+        style.id = 'rbird-booking-styles';
+        style.textContent = `
+            .rbird-booking-overlay {
+                position: fixed !important;
+                top: 0 !important;
+                left: 0 !important;
+                right: 0 !important;
+                bottom: 0 !important;
+                background-color: rgba(0, 0, 0, 0) !important;
+                display: flex !important;
+                align-items: center !important;
+                justify-content: center !important;
+                z-index: 10001 !important;
+                padding: 20px !important;
+                opacity: 0;
+                transition: background-color 0.3s, opacity 0.3s;
+                box-sizing: border-box !important;
+            }
+
+            .rbird-booking-overlay-visible {
+                background-color: rgba(0, 0, 0, 0.5) !important;
+                opacity: 1 !important;
+            }
+
+            .rbird-booking-modal {
+                position: relative !important;
+                background: #ffffff !important;
+                border-radius: 16px !important;
+                box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
+                width: 100% !important;
+                max-width: 420px !important;
+                height: 80vh !important;
+                max-height: 700px !important;
+                overflow: hidden !important;
+                animation: rbirdBookingSlideIn 0.3s ease-out;
+            }
+
+            .rbird-booking-close {
+                position: absolute !important;
+                top: 8px !important;
+                right: 8px !important;
+                background: rgba(0, 0, 0, 0.1) !important;
+                border: none !important;
+                width: 32px !important;
+                height: 32px !important;
+                border-radius: 50% !important;
+                font-size: 20px !important;
+                line-height: 1 !important;
+                cursor: pointer !important;
+                color: #374151 !important;
+                display: flex !important;
+                align-items: center !important;
+                justify-content: center !important;
+                transition: background-color 0.2s, color 0.2s !important;
+                z-index: 10 !important;
+            }
+
+            .rbird-booking-close:hover {
+                background: rgba(0, 0, 0, 0.2) !important;
+                color: #1f2937 !important;
+            }
+
+            .rbird-booking-iframe {
+                width: 100% !important;
+                height: 100% !important;
+                border: none !important;
+            }
+
+            @keyframes rbirdBookingSlideIn {
+                from {
+                    opacity: 0;
+                    transform: translateY(-20px) scale(0.95);
+                }
+                to {
+                    opacity: 1;
+                    transform: translateY(0) scale(1);
+                }
+            }
+
+            @media (max-width: 480px) {
+                .rbird-booking-overlay {
+                    padding: 0 !important;
+                }
+
+                .rbird-booking-modal {
+                    max-width: 100% !important;
+                    height: 100% !important;
+                    max-height: 100% !important;
+                    border-radius: 0 !important;
+                }
+            }
+        `;
+        document.head.appendChild(style);
+    }
+}

package/src/index.js

@@ -6,6 +6,7 @@ import { RbirdBannerManager } from "./RbirdBannerManager";
 import { RbirdFormManager } from "./RbirdFormManager";
 import { RbirdSurveyManager } from "./RbirdSurveyManager";
 import { RbirdAutomationManager } from "./RbirdAutomationManager";
+import { RbirdBookingManager } from "./RbirdBookingManager";
 
 class Rbird {
 
@@ -104,6 +105,10 @@ class Rbird {
                         const automationManager = RbirdAutomationManager.getInstance();
                         automationManager.init(apiKey);
 
+                        // Initialize booking manager
+                        const bookingManager = RbirdBookingManager.getInstance();
+                        bookingManager.init(apiKey);
+
                         resolve();
                     });
                 });
@@ -203,6 +208,22 @@ class Rbird {
         }
     }
 
+    /**
+     * Show the booking modal
+     * @param {Object} options - Optional configuration
+     * @param {string} options.appointmentTypeId - Pre-select a specific appointment type
+     * @param {Function} options.onSuccess - Callback when booking is completed
+     * @param {Function} options.onClose - Callback when modal is closed
+     */
+    static showBooking(options = {}) {
+        if (typeof window === 'undefined') return;
+        try {
+            RbirdBookingManager.getInstance().showBooking(options);
+        } catch (e) {
+            console.error(e);
+        }
+    }
+
 }
 
 export const runFunctionWhenDomIsReady = (callback) => {