releasebird-javascript-sdk 1.0.88 → 1.0.89

package/src/RbirdAutomationManager.js

@@ -0,0 +1,416 @@
+import RbirdSessionManager from "./RbirdSessionManager";
+import { RbirdBannerManager } from "./RbirdBannerManager";
+import { RbirdFormManager } from "./RbirdFormManager";
+import { RbirdSurveyManager } from "./RbirdSurveyManager";
+
+/**
+ * Manages automations and their execution in the SDK.
+ * Automations are event-driven workflows that can trigger actions
+ * like showing banners, forms, surveys, or sending chat messages.
+ */
+export class RbirdAutomationManager {
+    static instance = null;
+    automations = [];
+    apiKey = null;
+    firstSeenTimestamp = null;
+    executedAutomations = new Set(); // Track which automations have been executed
+
+    static getInstance() {
+        if (!this.instance) {
+            this.instance = new RbirdAutomationManager();
+        }
+        return this.instance;
+    }
+
+    /**
+     * Initialize the automation manager
+     * @param {string} apiKey - The API key for the project
+     */
+    async init(apiKey) {
+        this.apiKey = apiKey;
+        this.firstSeenTimestamp = this.getFirstSeenTimestamp();
+
+        // Load automations from backend
+        await this.loadAutomations();
+
+        // Register event handlers
+        this.registerEventHandlers();
+
+        // Check for first_seen triggers immediately
+        this.checkFirstSeenTriggers();
+    }
+
+    /**
+     * Get or set the first_seen timestamp
+     */
+    getFirstSeenTimestamp() {
+        const stored = localStorage.getItem('rbird_first_seen');
+        if (stored) {
+            return parseInt(stored, 10);
+        }
+        const now = Date.now();
+        localStorage.setItem('rbird_first_seen', now.toString());
+        return now;
+    }
+
+    /**
+     * Load active automations from the backend
+     */
+    async loadAutomations() {
+        try {
+            const sessionManager = RbirdSessionManager.getInstance();
+            const baseUrl = sessionManager.apiUrl || 'https://api.releasebird.com';
+
+            const response = await fetch(`${baseUrl}/papi/ewidget/automations`, {
+                method: 'GET',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'apiKey': this.apiKey,
+                    'languageCode': navigator.language?.split('-')[0] || 'en',
+                },
+            });
+
+            if (response.ok) {
+                this.automations = await response.json();
+                console.log('[Rbird] Loaded automations:', this.automations.length);
+            }
+        } catch (error) {
+            console.error('[Rbird] Error loading automations:', error);
+        }
+    }
+
+    /**
+     * Register event handlers for automation triggers
+     */
+    registerEventHandlers() {
+        // Listen for page visits
+        window.addEventListener('popstate', () => this.handleEvent('page_visit'));
+
+        // Listen for identify events
+        document.addEventListener('rbird:identify', (e) => {
+            this.handleEvent('user_identified', e.detail);
+        });
+
+        // Listen for form submissions
+        document.addEventListener('rbird:form_submitted', (e) => {
+            this.handleEvent('form_submitted', e.detail);
+        });
+
+        // Listen for survey completions
+        document.addEventListener('rbird:survey_completed', (e) => {
+            this.handleEvent('survey_completed', e.detail);
+        });
+
+        // Listen for custom events
+        document.addEventListener('rbird:track', (e) => {
+            this.handleEvent(e.detail?.eventName, e.detail?.data);
+        });
+    }
+
+    /**
+     * Check for first_seen triggers on initialization
+     */
+    checkFirstSeenTriggers() {
+        const timeSinceFirstSeen = (Date.now() - this.firstSeenTimestamp) / 1000; // in seconds
+
+        this.automations.forEach((automation) => {
+            const triggerNode = this.findTriggerNode(automation);
+            if (triggerNode && triggerNode.data?.eventType === 'first_seen') {
+                this.evaluateAndExecute(automation, triggerNode, { timeSinceFirstSeen });
+            }
+        });
+    }
+
+    /**
+     * Handle an event and check for matching automations
+     * @param {string} eventType - The type of event
+     * @param {Object} eventData - Additional event data
+     */
+    handleEvent(eventType, eventData = {}) {
+        this.automations.forEach((automation) => {
+            const triggerNode = this.findTriggerNode(automation);
+            if (triggerNode && triggerNode.data?.eventType === eventType) {
+                this.evaluateAndExecute(automation, triggerNode, eventData);
+            }
+        });
+    }
+
+    /**
+     * Find the trigger node in an automation
+     * @param {Object} automation - The automation object
+     * @returns {Object|null} The trigger node or null
+     */
+    findTriggerNode(automation) {
+        return automation.nodes?.find((node) => node.type === 'trigger');
+    }
+
+    /**
+     * Evaluate trigger conditions and execute the automation
+     * @param {Object} automation - The automation object
+     * @param {Object} triggerNode - The trigger node
+     * @param {Object} context - The event context
+     */
+    evaluateAndExecute(automation, triggerNode, context) {
+        // Check if automation was already executed (for once-only automations)
+        if (this.executedAutomations.has(automation.id)) {
+            return;
+        }
+
+        // Evaluate trigger conditions
+        if (!this.evaluateTriggerConditions(triggerNode, context)) {
+            return;
+        }
+
+        // Mark as executed
+        this.executedAutomations.add(automation.id);
+
+        // Execute the workflow starting from the trigger node
+        this.executeWorkflow(automation, triggerNode.id, context);
+    }
+
+    /**
+     * Evaluate trigger conditions
+     * @param {Object} triggerNode - The trigger node
+     * @param {Object} context - The event context
+     * @returns {boolean} Whether conditions are met
+     */
+    evaluateTriggerConditions(triggerNode, context) {
+        const conditions = triggerNode.data?.conditions || [];
+
+        for (const condition of conditions) {
+            const value = this.getContextValue(condition.property, context);
+
+            switch (condition.operator) {
+                case 'less_than':
+                    if (!(parseFloat(value) < parseFloat(condition.value))) return false;
+                    break;
+                case 'greater_than':
+                    if (!(parseFloat(value) > parseFloat(condition.value))) return false;
+                    break;
+                case 'equals':
+                    if (value !== condition.value) return false;
+                    break;
+                case 'contains':
+                    if (!String(value).includes(condition.value)) return false;
+                    break;
+            }
+        }
+
+        return true;
+    }
+
+    /**
+     * Get a value from the context
+     * @param {string} property - The property path
+     * @param {Object} context - The context object
+     * @returns {any} The value
+     */
+    getContextValue(property, context) {
+        if (property === 'time_since_first_seen' || property === 'timeSinceFirstSeen') {
+            return context.timeSinceFirstSeen || (Date.now() - this.firstSeenTimestamp) / 1000;
+        }
+
+        // Navigate nested properties like "user.language"
+        const parts = property.split('.');
+        let value = context;
+        for (const part of parts) {
+            value = value?.[part];
+        }
+        return value;
+    }
+
+    /**
+     * Execute a workflow from a starting node
+     * @param {Object} automation - The automation object
+     * @param {string} startNodeId - The ID of the starting node
+     * @param {Object} context - The execution context
+     */
+    executeWorkflow(automation, startNodeId, context) {
+        // Find next nodes to execute
+        const nextEdges = automation.edges?.filter((edge) => edge.source === startNodeId) || [];
+
+        for (const edge of nextEdges) {
+            const targetNode = automation.nodes?.find((node) => node.id === edge.target);
+            if (!targetNode) continue;
+
+            if (targetNode.type === 'condition') {
+                // Evaluate condition and follow appropriate path
+                const conditionResult = this.evaluateCondition(targetNode, context);
+                const handleToFollow = conditionResult ? 'true' : 'false';
+
+                // Find edges from this condition with matching handle
+                const conditionEdges = automation.edges?.filter(
+                    (e) => e.source === targetNode.id && e.sourceHandle === handleToFollow
+                ) || [];
+
+                for (const condEdge of conditionEdges) {
+                    this.executeWorkflow(automation, condEdge.source, context);
+                }
+            } else if (targetNode.type === 'action') {
+                // Execute the action
+                this.executeAction(targetNode, context);
+
+                // Continue to next nodes if any
+                this.executeWorkflow(automation, targetNode.id, context);
+            }
+        }
+    }
+
+    /**
+     * Evaluate a condition node
+     * @param {Object} conditionNode - The condition node
+     * @param {Object} context - The execution context
+     * @returns {boolean} The result of the condition
+     */
+    evaluateCondition(conditionNode, context) {
+        const { property, operator, value } = conditionNode.data || {};
+
+        let actualValue;
+
+        // Get the value to compare
+        if (property?.startsWith('user.')) {
+            const userProp = property.replace('user.', '');
+            actualValue = RbirdSessionManager.getInstance().getUser()?.[userProp];
+        } else if (property?.startsWith('page.')) {
+            const pageProp = property.replace('page.', '');
+            if (pageProp === 'url') {
+                actualValue = window.location.href;
+            } else if (pageProp === 'path') {
+                actualValue = window.location.pathname;
+            }
+        } else {
+            actualValue = context[property];
+        }
+
+        switch (operator) {
+            case 'equals':
+                return actualValue === value;
+            case 'not_equals':
+                return actualValue !== value;
+            case 'contains':
+                return String(actualValue).includes(value);
+            case 'starts_with':
+                return String(actualValue).startsWith(value);
+            default:
+                return false;
+        }
+    }
+
+    /**
+     * Execute an action node
+     * @param {Object} actionNode - The action node
+     * @param {Object} context - The execution context
+     */
+    executeAction(actionNode, context) {
+        const { actionType, config } = actionNode.data || {};
+
+        console.log('[Rbird] Executing action:', actionType, config);
+
+        switch (actionType) {
+            case 'send_chat':
+                this.executeSendChat(config?.message, context);
+                break;
+            case 'show_banner':
+                this.executeShowBanner(config?.bannerId);
+                break;
+            case 'show_form':
+                this.executeShowForm(config?.formId);
+                break;
+            case 'show_survey':
+                this.executeShowSurvey(config?.surveyId);
+                break;
+            case 'webhook':
+                this.executeWebhook(config?.webhookUrl, config?.webhookMethod || 'POST', context);
+                break;
+        }
+    }
+
+    /**
+     * Execute send_chat action
+     */
+    executeSendChat(message, context) {
+        if (!message) return;
+
+        // Replace placeholders in message
+        const processedMessage = this.processMessage(message, context);
+
+        // Dispatch event for the chat widget to handle
+        document.dispatchEvent(new CustomEvent('rbird:automation_chat', {
+            detail: { message: processedMessage }
+        }));
+
+        console.log('[Rbird] Chat message triggered:', processedMessage);
+    }
+
+    /**
+     * Execute show_banner action
+     */
+    executeShowBanner(bannerId) {
+        if (!bannerId) return;
+        RbirdBannerManager.getInstance().showBanner(bannerId);
+    }
+
+    /**
+     * Execute show_form action
+     */
+    executeShowForm(formId) {
+        if (!formId) return;
+        RbirdFormManager.getInstance().showForm(formId, {});
+    }
+
+    /**
+     * Execute show_survey action
+     */
+    executeShowSurvey(surveyId) {
+        if (!surveyId) return;
+        RbirdSurveyManager.getInstance().showSurvey(surveyId, {});
+    }
+
+    /**
+     * Execute webhook action
+     */
+    async executeWebhook(url, method, context) {
+        if (!url) return;
+
+        try {
+            const options = {
+                method: method,
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+            };
+
+            if (method === 'POST') {
+                options.body = JSON.stringify(context);
+            }
+
+            await fetch(url, options);
+            console.log('[Rbird] Webhook executed:', url);
+        } catch (error) {
+            console.error('[Rbird] Webhook error:', error);
+        }
+    }
+
+    /**
+     * Process message placeholders
+     */
+    processMessage(message, context) {
+        return message
+            .replace(/\{\{user\.name\}\}/g, RbirdSessionManager.getInstance().getUser()?.name || '')
+            .replace(/\{\{user\.email\}\}/g, RbirdSessionManager.getInstance().getUser()?.email || '')
+            .replace(/\{\{page\.url\}\}/g, window.location.href);
+    }
+
+    /**
+     * Track a custom event
+     * @param {string} eventName - The name of the event
+     * @param {Object} data - Additional event data
+     */
+    track(eventName, data = {}) {
+        document.dispatchEvent(new CustomEvent('rbird:track', {
+            detail: { eventName, data }
+        }));
+    }
+}
+
+export default RbirdAutomationManager;

package/src/RbirdWebsiteWidget.js

@@ -804,6 +804,20 @@ export default class RbirdWebsiteWidget {
         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));
+
+        // Window resize listener to update position when viewport changes
+        window.addEventListener('resize', () => this.onWindowResize());
+    }
+
+    /**
+     * Handle window resize - update widget position to stay relative to viewport
+     */
+    onWindowResize() {
+        const savedPosition = this.loadWidgetPosition();
+        if (savedPosition && this.widgetWrapper) {
+            this.updateWidgetPosition(savedPosition.x, savedPosition.y);
+            this.updateRelatedElementsPosition();
+        }
     }
 
     /**
@@ -904,11 +918,16 @@ export default class RbirdWebsiteWidget {
     }
 
     /**
-     * Save widget position to localStorage
+     * Save widget position to localStorage as percentage of viewport
      */
     saveWidgetPosition(x, y) {
         try {
-            const position = { x, y, timestamp: Date.now() };
+            // Store position as percentage of viewport for responsive behavior
+            const position = {
+                xPercent: x / window.innerWidth,
+                yPercent: y / window.innerHeight,
+                timestamp: Date.now()
+            };
             window.localStorage.setItem('rbird_widget_position', JSON.stringify(position));
         } catch (e) {
             console.warn('[RbirdWidget] Could not save position to localStorage:', e);
@@ -916,17 +935,38 @@ export default class RbirdWebsiteWidget {
     }
 
     /**
-     * Load widget position from localStorage
+     * Load widget position from localStorage and convert to current viewport pixels
      */
     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;
+
+                // Handle new percentage-based format
+                if (position.xPercent !== undefined && position.yPercent !== undefined) {
+                    const x = position.xPercent * window.innerWidth;
+                    const y = position.yPercent * window.innerHeight;
+
+                    // Ensure position is within viewport bounds
+                    const bubbleSize = 60; // approximate bubble size
+                    const clampedX = Math.max(0, Math.min(x, window.innerWidth - bubbleSize));
+                    const clampedY = Math.max(0, Math.min(y, window.innerHeight - bubbleSize));
+
+                    return { x: clampedX, y: clampedY };
+                }
+
+                // Handle legacy absolute pixel format - convert to percentage and save
+                if (position.x !== undefined && position.y !== undefined) {
+                    // Clamp to current viewport
+                    const bubbleSize = 60;
+                    const clampedX = Math.max(0, Math.min(position.x, window.innerWidth - bubbleSize));
+                    const clampedY = Math.max(0, Math.min(position.y, window.innerHeight - bubbleSize));
+
+                    // Convert to percentage and save for future
+                    this.saveWidgetPosition(clampedX, clampedY);
+
+                    return { x: clampedX, y: clampedY };
                 }
             }
         } catch (e) {

package/src/index.js

@@ -5,6 +5,7 @@ import { ReleasebirdConsoleLogger } from "./ReleasebirdConsoleLogger";
 import { RbirdBannerManager } from "./RbirdBannerManager";
 import { RbirdFormManager } from "./RbirdFormManager";
 import { RbirdSurveyManager } from "./RbirdSurveyManager";
+import { RbirdAutomationManager } from "./RbirdAutomationManager";
 
 class Rbird {
 
@@ -98,6 +99,11 @@ class Rbird {
                         // Initialize survey manager
                         const surveyManager = RbirdSurveyManager.getInstance();
                         surveyManager.init(apiKey);
+
+                        // Initialize automation manager
+                        const automationManager = RbirdAutomationManager.getInstance();
+                        automationManager.init(apiKey);
+
                         resolve();
                     });
                 });
@@ -183,6 +189,20 @@ class Rbird {
         }
     }
 
+    /**
+     * Track a custom event for automations
+     * @param {string} eventName - The name of the event
+     * @param {Object} data - Additional event data
+     */
+    static track(eventName, data = {}) {
+        if (typeof window === 'undefined') return;
+        try {
+            RbirdAutomationManager.getInstance().track(eventName, data);
+        } catch (e) {
+            console.error(e);
+        }
+    }
+
 }
 
 export const runFunctionWhenDomIsReady = (callback) => {