releasebird-javascript-sdk 1.0.87 → 1.0.89

package/src/RbirdSurveyManager.js

@@ -0,0 +1,720 @@
+import RbirdSessionManager from './RbirdSessionManager';
+
+// API is defined globally via webpack.DefinePlugin
+/* global API */
+
+export class RbirdSurveyManager {
+    static instance;
+
+    constructor() {
+        this.displayedSurveys = new Set();
+        this.apiKey = null;
+    }
+
+    static getInstance() {
+        if (!RbirdSurveyManager.instance) {
+            RbirdSurveyManager.instance = new RbirdSurveyManager();
+        }
+        return RbirdSurveyManager.instance;
+    }
+
+    init(apiKey) {
+        if (typeof window === 'undefined') return;
+        this.apiKey = apiKey;
+        this.injectStyles();
+    }
+
+    /**
+     * Show a survey by its ID
+     * @param {string} surveyId - The ID of the survey to show
+     * @param {Object} options - Optional configuration
+     * @param {string} options.target - CSS selector for inline rendering (optional)
+     * @param {Function} options.onSubmit - Callback when survey is submitted
+     * @param {Function} options.onClose - Callback when survey is closed
+     */
+    showSurvey(surveyId, options = {}) {
+        if (typeof window === 'undefined') return;
+        if (!this.apiKey) {
+            console.error('[RbirdSurveyManager] SDK not initialized. Call Rbird.initialize() first.');
+            return;
+        }
+        if (!surveyId) {
+            console.error('[RbirdSurveyManager] Survey ID is required.');
+            return;
+        }
+
+        // For inline surveys, check if target element exists and is empty (SPA navigation case)
+        if (options.target) {
+            const targetElement = document.querySelector(options.target);
+            if (targetElement && targetElement.children.length === 0) {
+                this.displayedSurveys.delete(surveyId);
+            }
+        }
+
+        // Check if survey is already displayed
+        if (this.displayedSurveys.has(surveyId)) {
+            const existingSurvey = document.getElementById(`rbird-survey-${surveyId}`);
+            const existingOverlay = document.getElementById(`rbird-survey-overlay-${surveyId}`);
+            if (!existingSurvey && !existingOverlay) {
+                this.displayedSurveys.delete(surveyId);
+            } else {
+                console.warn('[RbirdSurveyManager] Survey is already displayed:', surveyId);
+                return;
+            }
+        }
+
+        const sessionManager = RbirdSessionManager.getInstance();
+        const state = sessionManager.getState();
+
+        const http = new XMLHttpRequest();
+        const browserLang = navigator.language ? navigator.language.split('-')[0] : 'en';
+        const url = `${API}/ewidget/surveys/${surveyId}`;
+        http.open("GET", url);
+        http.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
+        http.setRequestHeader("apiKey", this.apiKey);
+        http.setRequestHeader("languageCode", browserLang);
+
+        if (state?.identify?.people) {
+            http.setRequestHeader("peopleId", state.identify.people);
+        }
+        if (sessionManager.anonymousIdentifier) {
+            http.setRequestHeader("anonymousId", sessionManager.anonymousIdentifier);
+        }
+
+        const self = this;
+        http.onreadystatechange = function () {
+            if (http.readyState === 4) {
+                if (http.status === 200) {
+                    try {
+                        const survey = JSON.parse(http.responseText);
+                        if (options.target) {
+                            self.renderInlineSurvey(survey, options);
+                        } else {
+                            self.renderModalSurvey(survey, options);
+                        }
+                    } catch (exp) {
+                        console.error('[RbirdSurveyManager] Error parsing survey response:', exp);
+                    }
+                } else {
+                    console.error('[RbirdSurveyManager] Failed to fetch survey. Status:', http.status);
+                }
+            }
+        };
+        http.send();
+    }
+
+    renderInlineSurvey(survey, options) {
+        const targetElement = document.querySelector(options.target);
+        if (!targetElement) {
+            console.error('[RbirdSurveyManager] Target element not found:', options.target);
+            return;
+        }
+
+        const surveyElement = this.createSurveyElement(survey, false, options);
+        targetElement.innerHTML = '';
+        targetElement.appendChild(surveyElement);
+        this.displayedSurveys.add(survey.id);
+    }
+
+    renderModalSurvey(survey, options) {
+        const overlay = document.createElement('div');
+        overlay.className = 'rbird-survey-overlay';
+        overlay.id = `rbird-survey-overlay-${survey.id}`;
+
+        const modal = this.createSurveyElement(survey, true, options);
+        overlay.appendChild(modal);
+
+        // Close on overlay click
+        overlay.addEventListener('click', (e) => {
+            if (e.target === overlay) {
+                this.closeSurvey(survey.id, options.onClose);
+            }
+        });
+
+        document.body.appendChild(overlay);
+        this.displayedSurveys.add(survey.id);
+
+        // Animate in
+        requestAnimationFrame(() => {
+            overlay.classList.add('rbird-survey-overlay-visible');
+        });
+    }
+
+    createSurveyElement(survey, isModal, options) {
+        const container = document.createElement('div');
+        container.className = isModal ? 'rbird-survey-modal' : 'rbird-survey-inline';
+        container.id = `rbird-survey-${survey.id}`;
+
+        const questionsHtml = survey.questions.map((q, index) =>
+            this.createQuestionHtml(q, index)
+        ).join('');
+
+        container.innerHTML = `
+            <div class="rbird-survey-content" style="${this.getSurveyStyles(isModal)}">
+                ${isModal ? `
+                    <button class="rbird-survey-close" style="${this.getCloseButtonStyles()}" onclick="window.RbirdSurveyManager.getInstance().closeSurvey('${survey.id}')">
+                        ×
+                    </button>
+                ` : ''}
+                <div class="rbird-survey-body">
+                    ${survey.title ? `<h3 class="rbird-survey-title" style="${this.getTitleStyles()}">${this.escapeHtml(survey.title)}</h3>` : ''}
+                    ${survey.description ? `<p class="rbird-survey-description" style="${this.getDescriptionStyles()}">${this.escapeHtml(survey.description)}</p>` : ''}
+                    <form class="rbird-survey-questions" data-survey-id="${survey.id}">
+                        ${questionsHtml}
+                        <button type="submit" class="rbird-survey-submit" style="${this.getSubmitButtonStyles()}">
+                            Submit
+                        </button>
+                    </form>
+                    <div class="rbird-survey-success" style="display: none; text-align: center; padding: 40px 20px;">
+                        <div style="font-size: 48px; margin-bottom: 16px;">🎉</div>
+                        <h3 style="margin: 0 0 8px 0; font-size: 20px; color: #1f2937;">Thank you!</h3>
+                        <p style="margin: 0; color: #6b7280; font-size: 14px;">Your response has been recorded.</p>
+                    </div>
+                </div>
+            </div>
+        `;
+
+        // Attach submit handler
+        const form = container.querySelector('form');
+        form.addEventListener('submit', (e) => {
+            e.preventDefault();
+            this.submitSurvey(survey.id, form, options);
+        });
+
+        // Make instance accessible globally for close button
+        window.RbirdSurveyManager = RbirdSurveyManager;
+
+        return container;
+    }
+
+    createQuestionHtml(question, index) {
+        const requiredMark = question.required ? '<span style="color: #ef4444;">*</span>' : '';
+
+        let html = `<div class="rbird-survey-question" style="margin-bottom: 24px;" data-question-id="${question.id}">`;
+        html += `<label style="${this.getLabelStyles()}">${this.escapeHtml(question.question)} ${requiredMark}</label>`;
+
+        switch (question.type) {
+            case 'RATING':
+                html += this.createRatingInput(question);
+                break;
+            case 'NPS':
+                html += this.createNpsInput(question);
+                break;
+            case 'EMOJI':
+                html += this.createEmojiInput(question);
+                break;
+            case 'TEXT':
+                html += this.createTextInput(question);
+                break;
+            case 'MULTIPLE_CHOICE':
+                html += this.createMultipleChoiceInput(question);
+                break;
+            case 'CHECKBOX':
+                html += this.createCheckboxInput(question);
+                break;
+            default:
+                html += this.createTextInput(question);
+        }
+
+        html += '</div>';
+        return html;
+    }
+
+    createRatingInput(question) {
+        return `
+            <div class="rbird-rating-container" style="display: flex; gap: 8px; margin-top: 8px;">
+                ${[1, 2, 3, 4, 5].map(value => `
+                    <button type="button" class="rbird-rating-star" data-value="${value}" style="${this.getRatingStarStyles()}">
+                        ★
+                    </button>
+                `).join('')}
+            </div>
+            <input type="hidden" name="${question.id}" ${question.required ? 'required' : ''}>
+        `;
+    }
+
+    createNpsInput(question) {
+        return `
+            <div class="rbird-nps-container" style="margin-top: 8px;">
+                <div style="display: flex; gap: 4px; flex-wrap: wrap;">
+                    ${[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(value => `
+                        <button type="button" class="rbird-nps-button" data-value="${value}" style="${this.getNpsButtonStyles(value)}">
+                            ${value}
+                        </button>
+                    `).join('')}
+                </div>
+                <div style="display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; color: #6b7280;">
+                    <span>Not at all likely</span>
+                    <span>Extremely likely</span>
+                </div>
+            </div>
+            <input type="hidden" name="${question.id}" ${question.required ? 'required' : ''}>
+        `;
+    }
+
+    createEmojiInput(question) {
+        const emojis = ['😞', '😐', '😊', '😃', '🤩'];
+        return `
+            <div class="rbird-emoji-container" style="display: flex; gap: 16px; margin-top: 8px; justify-content: center;">
+                ${emojis.map((emoji) => `
+                    <button type="button" class="rbird-emoji-button" data-value="${emoji}" style="${this.getEmojiButtonStyles()}">
+                        ${emoji}
+                    </button>
+                `).join('')}
+            </div>
+            <input type="hidden" name="${question.id}" ${question.required ? 'required' : ''}>
+        `;
+    }
+
+    createTextInput(question) {
+        return `
+            <textarea
+                name="${question.id}"
+                style="${this.getTextareaStyles()}"
+                rows="3"
+                placeholder="Your answer..."
+                ${question.required ? 'required' : ''}
+            ></textarea>
+        `;
+    }
+
+    createMultipleChoiceInput(question) {
+        if (!question.options || question.options.length === 0) {
+            return this.createTextInput(question);
+        }
+
+        return `
+            <div class="rbird-radio-container" style="margin-top: 8px;">
+                ${question.options.map((option, index) => `
+                    <label style="display: flex; align-items: center; padding: 12px; margin-bottom: 8px; border: 1px solid #e5e7eb; border-radius: 8px; cursor: pointer; transition: all 0.2s;">
+                        <input type="radio" name="${question.id}" value="${this.escapeHtml(option)}" style="margin-right: 12px;" ${question.required && index === 0 ? '' : ''}>
+                        <span style="font-size: 14px; color: #374151;">${this.escapeHtml(option)}</span>
+                    </label>
+                `).join('')}
+            </div>
+        `;
+    }
+
+    createCheckboxInput(question) {
+        if (!question.options || question.options.length === 0) {
+            return this.createTextInput(question);
+        }
+
+        return `
+            <div class="rbird-checkbox-container" style="margin-top: 8px;">
+                ${question.options.map(option => `
+                    <label style="display: flex; align-items: center; padding: 12px; margin-bottom: 8px; border: 1px solid #e5e7eb; border-radius: 8px; cursor: pointer; transition: all 0.2s;">
+                        <input type="checkbox" name="${question.id}" value="${this.escapeHtml(option)}" style="margin-right: 12px;">
+                        <span style="font-size: 14px; color: #374151;">${this.escapeHtml(option)}</span>
+                    </label>
+                `).join('')}
+            </div>
+        `;
+    }
+
+    submitSurvey(surveyId, formElement, options) {
+        const answers = [];
+        const questionElements = formElement.querySelectorAll('.rbird-survey-question');
+
+        questionElements.forEach(qEl => {
+            const questionId = qEl.getAttribute('data-question-id');
+            let value = null;
+            let questionType = null;
+
+            // Check for hidden input (rating, nps, emoji)
+            const hiddenInput = qEl.querySelector(`input[type="hidden"][name="${questionId}"]`);
+            if (hiddenInput && hiddenInput.value) {
+                value = hiddenInput.value;
+                // Determine question type based on container class
+                if (qEl.querySelector('.rbird-rating-container')) {
+                    questionType = 'RATING';
+                    value = parseInt(value, 10); // Convert to number for rating
+                } else if (qEl.querySelector('.rbird-nps-container')) {
+                    questionType = 'NPS';
+                    value = parseInt(value, 10); // Convert to number for NPS
+                } else if (qEl.querySelector('.rbird-emoji-container')) {
+                    questionType = 'EMOJI';
+                    // Emoji value is already a string (the emoji itself)
+                }
+            }
+
+            // Check for textarea
+            const textarea = qEl.querySelector(`textarea[name="${questionId}"]`);
+            if (textarea && textarea.value) {
+                value = textarea.value;
+                questionType = 'TEXT';
+            }
+
+            // Check for radio buttons
+            const checkedRadio = qEl.querySelector(`input[type="radio"][name="${questionId}"]:checked`);
+            if (checkedRadio) {
+                value = checkedRadio.value;
+                questionType = 'MULTIPLE_CHOICE';
+            }
+
+            // Check for checkboxes
+            const checkedCheckboxes = qEl.querySelectorAll(`input[type="checkbox"][name="${questionId}"]:checked`);
+            if (checkedCheckboxes.length > 0) {
+                value = Array.from(checkedCheckboxes).map(cb => cb.value);
+                questionType = 'CHECKBOX';
+            }
+
+            if (value !== null) {
+                answers.push({
+                    questionId: questionId,
+                    questionType: questionType,
+                    value: value
+                });
+            }
+        });
+
+        const sessionManager = RbirdSessionManager.getInstance();
+        const state = sessionManager.getState();
+
+        const http = new XMLHttpRequest();
+        http.open("POST", `${API}/ewidget/surveys/${surveyId}/submit`);
+        http.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
+        http.setRequestHeader("apiKey", this.apiKey);
+
+        if (state?.identify?.people) {
+            http.setRequestHeader("peopleId", state.identify.people);
+        }
+        if (sessionManager.anonymousIdentifier) {
+            http.setRequestHeader("anonymousId", sessionManager.anonymousIdentifier);
+        }
+
+        const self = this;
+        const submitButton = formElement.querySelector('button[type="submit"]');
+        if (submitButton) {
+            submitButton.disabled = true;
+            submitButton.textContent = 'Sending...';
+        }
+
+        http.onreadystatechange = function () {
+            if (http.readyState === 4) {
+                if (http.status === 200 || http.status === 201) {
+                    // Show success message
+                    const container = document.getElementById(`rbird-survey-${surveyId}`);
+                    if (container) {
+                        const form = container.querySelector('form');
+                        const successMessage = container.querySelector('.rbird-survey-success');
+                        if (form) form.style.display = 'none';
+                        if (successMessage) successMessage.style.display = 'block';
+                    }
+
+                    if (options.onSubmit) {
+                        options.onSubmit(answers);
+                    }
+                } else {
+                    console.error('[RbirdSurveyManager] Failed to submit survey. Status:', http.status);
+                    if (submitButton) {
+                        submitButton.disabled = false;
+                        submitButton.textContent = 'Submit';
+                    }
+                    alert('Failed to submit survey. Please try again.');
+                }
+            }
+        };
+
+        http.send(JSON.stringify({
+            answers: answers
+        }));
+    }
+
+    closeSurvey(surveyId, onClose) {
+        const overlay = document.getElementById(`rbird-survey-overlay-${surveyId}`);
+        if (overlay) {
+            overlay.classList.remove('rbird-survey-overlay-visible');
+            setTimeout(() => {
+                overlay.remove();
+            }, 300);
+        }
+
+        this.displayedSurveys.delete(surveyId);
+
+        if (onClose) {
+            onClose();
+        }
+    }
+
+    // Styles
+    getSurveyStyles(isModal) {
+        return `
+            background-color: #ffffff !important;
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
+            border-radius: 12px !important;
+            padding: 32px !important;
+            min-width: min(400px, calc(100vw - 40px)) !important;
+            ${isModal ? 'max-width: 500px !important; width: 100% !important; max-height: 90vh !important; overflow-y: auto !important; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;' : 'width: 100% !important;'}
+            box-sizing: border-box !important;
+        `;
+    }
+
+    getCloseButtonStyles() {
+        return `
+            position: absolute;
+            top: 12px;
+            right: 12px;
+            background: none;
+            border: none;
+            font-size: 24px;
+            cursor: pointer;
+            color: #9ca3af;
+            width: 32px;
+            height: 32px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 50%;
+            transition: all 0.2s;
+            opacity: 0.7;
+        `;
+    }
+
+    getTitleStyles() {
+        return `
+            margin: 0 0 8px 0;
+            font-size: 20px;
+            font-weight: 600;
+            color: #1f2937;
+        `;
+    }
+
+    getDescriptionStyles() {
+        return `
+            margin: 0 0 20px 0;
+            font-size: 14px;
+            color: #6b7280;
+            line-height: 1.5;
+        `;
+    }
+
+    getLabelStyles() {
+        return `
+            display: block;
+            margin-bottom: 8px;
+            font-size: 14px;
+            font-weight: 500;
+            color: #374151;
+        `;
+    }
+
+    getTextareaStyles() {
+        return `
+            width: 100%;
+            padding: 12px;
+            border: 1px solid #e5e7eb;
+            border-radius: 8px;
+            font-size: 14px;
+            font-family: inherit;
+            resize: vertical;
+            box-sizing: border-box;
+            outline: none;
+            transition: border-color 0.2s;
+        `;
+    }
+
+    getRatingStarStyles() {
+        return `
+            background: none;
+            border: none;
+            font-size: 32px;
+            cursor: pointer;
+            color: #d1d5db;
+            transition: all 0.2s;
+            padding: 4px;
+        `;
+    }
+
+    getNpsButtonStyles(value) {
+        let bgColor = '#f3f4f6';
+        if (value <= 6) bgColor = '#fecaca';
+        else if (value <= 8) bgColor = '#fef3c7';
+        else bgColor = '#bbf7d0';
+
+        return `
+            width: 32px;
+            height: 32px;
+            border: 1px solid #e5e7eb;
+            border-radius: 6px;
+            background: ${bgColor};
+            cursor: pointer;
+            font-size: 12px;
+            font-weight: 500;
+            transition: all 0.2s;
+        `;
+    }
+
+    getEmojiButtonStyles() {
+        return `
+            background: none;
+            border: 2px solid transparent;
+            font-size: 36px;
+            cursor: pointer;
+            padding: 8px;
+            border-radius: 12px;
+            transition: all 0.2s;
+        `;
+    }
+
+    getSubmitButtonStyles() {
+        return `
+            width: 100%;
+            padding: 14px 24px;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            border: none;
+            border-radius: 8px;
+            font-size: 16px;
+            font-weight: 500;
+            cursor: pointer;
+            margin-top: 16px;
+            transition: all 0.2s;
+        `;
+    }
+
+    escapeHtml(text) {
+        if (!text) return '';
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+    }
+
+    injectStyles() {
+        if (typeof window === 'undefined' || document.getElementById('rbird-survey-styles')) return;
+
+        const style = document.createElement('style');
+        style.id = 'rbird-survey-styles';
+        style.textContent = `
+            .rbird-survey-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-survey-overlay-visible {
+                background-color: rgba(0, 0, 0, 0.5) !important;
+                opacity: 1 !important;
+            }
+
+            .rbird-survey-modal {
+                position: relative !important;
+                animation: rbirdSurveySlideIn 0.3s ease-out;
+                box-sizing: border-box !important;
+            }
+
+            .rbird-survey-inline {
+                width: 100% !important;
+                box-sizing: border-box !important;
+            }
+
+            .rbird-survey-content {
+                position: relative !important;
+                box-sizing: border-box !important;
+            }
+
+            .rbird-survey-close:hover {
+                opacity: 1 !important;
+            }
+
+            .rbird-survey-submit:hover {
+                opacity: 0.9 !important;
+                transform: translateY(-1px);
+            }
+
+            .rbird-survey-submit:disabled {
+                opacity: 0.6 !important;
+                cursor: not-allowed !important;
+            }
+
+            .rbird-rating-star:hover,
+            .rbird-rating-star.active {
+                color: #fbbf24 !important;
+                transform: scale(1.1);
+            }
+
+            .rbird-nps-button:hover,
+            .rbird-nps-button.active {
+                transform: scale(1.1);
+                border-color: #667eea !important;
+            }
+
+            .rbird-emoji-button:hover,
+            .rbird-emoji-button.active {
+                border-color: #667eea !important;
+                transform: scale(1.2);
+            }
+
+            @keyframes rbirdSurveySlideIn {
+                from {
+                    opacity: 0;
+                    transform: translateY(-20px) scale(0.95);
+                }
+                to {
+                    opacity: 1;
+                    transform: translateY(0) scale(1);
+                }
+            }
+        `;
+        document.head.appendChild(style);
+
+        // Add click handlers for rating/nps/emoji inputs
+        document.addEventListener('click', (e) => {
+            // Rating stars
+            if (e.target.classList.contains('rbird-rating-star')) {
+                const container = e.target.closest('.rbird-rating-container');
+                const value = e.target.getAttribute('data-value');
+                const hiddenInput = container.parentElement.querySelector('input[type="hidden"]');
+
+                container.querySelectorAll('.rbird-rating-star').forEach((star, index) => {
+                    if (index < parseInt(value)) {
+                        star.classList.add('active');
+                    } else {
+                        star.classList.remove('active');
+                    }
+                });
+
+                if (hiddenInput) hiddenInput.value = value;
+            }
+
+            // NPS buttons
+            if (e.target.classList.contains('rbird-nps-button')) {
+                const container = e.target.closest('.rbird-nps-container');
+                const value = e.target.getAttribute('data-value');
+                const hiddenInput = container.parentElement.querySelector('input[type="hidden"]');
+
+                container.querySelectorAll('.rbird-nps-button').forEach(btn => {
+                    btn.classList.remove('active');
+                });
+                e.target.classList.add('active');
+
+                if (hiddenInput) hiddenInput.value = value;
+            }
+
+            // Emoji buttons
+            if (e.target.classList.contains('rbird-emoji-button')) {
+                const container = e.target.closest('.rbird-emoji-container');
+                const value = e.target.getAttribute('data-value');
+                const hiddenInput = container.parentElement.querySelector('input[type="hidden"]');
+
+                container.querySelectorAll('.rbird-emoji-button').forEach(btn => {
+                    btn.classList.remove('active');
+                });
+                e.target.classList.add('active');
+
+                if (hiddenInput) hiddenInput.value = value;
+            }
+        });
+    }
+}