releasebird-javascript-sdk 1.0.73 → 1.0.76

package/src/RbirdFormManager.js

@@ -0,0 +1,567 @@
+import RbirdSessionManager from './RbirdSessionManager';
+
+// API is defined globally via webpack.DefinePlugin
+/* global API */
+
+export class RbirdFormManager {
+    static instance;
+
+    constructor() {
+        this.displayedForms = new Set();
+        this.apiKey = null;
+    }
+
+    static getInstance() {
+        if (!RbirdFormManager.instance) {
+            RbirdFormManager.instance = new RbirdFormManager();
+        }
+        return RbirdFormManager.instance;
+    }
+
+    init(apiKey) {
+        if (typeof window === 'undefined') return;
+        this.apiKey = apiKey;
+        this.injectStyles();
+    }
+
+    /**
+     * Show a form by its ID
+     * @param {string} formId - The ID of the form to show
+     * @param {Object} options - Optional configuration
+     * @param {string} options.target - CSS selector for inline rendering (optional)
+     * @param {Function} options.onSubmit - Callback when form is submitted
+     * @param {Function} options.onClose - Callback when form is closed
+     */
+    showForm(formId, options = {}) {
+        if (typeof window === 'undefined') return;
+        if (!this.apiKey) {
+            console.error('[RbirdFormManager] SDK not initialized. Call Rbird.initialize() first.');
+            return;
+        }
+        if (!formId) {
+            console.error('[RbirdFormManager] Form ID is required.');
+            return;
+        }
+
+        // Check if form is already displayed
+        if (this.displayedForms.has(formId)) {
+            console.warn('[RbirdFormManager] Form is already displayed:', formId);
+            return;
+        }
+
+        const sessionManager = RbirdSessionManager.getInstance();
+        const state = sessionManager.getState();
+
+        const http = new XMLHttpRequest();
+        http.open("GET", `${API}/ewidget/forms/${formId}`);
+        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;
+        http.onreadystatechange = function () {
+            if (http.readyState === 4) {
+                if (http.status === 200) {
+                    try {
+                        const form = JSON.parse(http.responseText);
+                        if (options.target) {
+                            self.renderInlineForm(form, options);
+                        } else {
+                            self.renderModalForm(form, options);
+                        }
+                    } catch (exp) {
+                        console.error('[RbirdFormManager] Error parsing form response:', exp);
+                    }
+                } else {
+                    console.error('[RbirdFormManager] Failed to fetch form. Status:', http.status);
+                }
+            }
+        };
+        http.send();
+    }
+
+    renderInlineForm(form, options) {
+        const targetElement = document.querySelector(options.target);
+        if (!targetElement) {
+            console.error('[RbirdFormManager] Target element not found:', options.target);
+            return;
+        }
+
+        const formElement = this.createFormElement(form, false, options);
+        targetElement.innerHTML = '';
+        targetElement.appendChild(formElement);
+        this.displayedForms.add(form.id);
+    }
+
+    renderModalForm(form, options) {
+        const overlay = document.createElement('div');
+        overlay.className = 'rbird-form-overlay';
+        overlay.id = `rbird-form-overlay-${form.id}`;
+
+        const modal = this.createFormElement(form, true, options);
+        overlay.appendChild(modal);
+
+        // Close on overlay click
+        overlay.addEventListener('click', (e) => {
+            if (e.target === overlay) {
+                this.closeForm(form.id, options.onClose);
+            }
+        });
+
+        document.body.appendChild(overlay);
+        this.displayedForms.add(form.id);
+
+        // Animate in
+        requestAnimationFrame(() => {
+            overlay.classList.add('rbird-form-overlay-visible');
+        });
+    }
+
+    createFormElement(form, isModal, options) {
+        const container = document.createElement('div');
+        container.className = isModal ? 'rbird-form-modal' : 'rbird-form-inline';
+        container.id = `rbird-form-${form.id}`;
+
+        const theme = form.theme || {};
+
+        // Build form HTML
+        let fieldsHtml = '';
+        (form.fields || []).forEach(field => {
+            fieldsHtml += this.createFieldHtml(field, theme);
+        });
+
+        container.innerHTML = `
+            <div class="rbird-form-content" style="${this.getFormStyles(theme, isModal)}">
+                ${isModal ? `
+                    <button class="rbird-form-close" data-form-id="${form.id}" style="${this.getCloseButtonStyles()}">
+                        ×
+                    </button>
+                ` : ''}
+                <div class="rbird-form-body">
+                    ${form.title ? `<h3 class="rbird-form-title" style="${this.getTitleStyles(theme)}">${this.escapeHtml(form.title)}</h3>` : ''}
+                    ${form.description ? `<p class="rbird-form-description" style="${this.getDescriptionStyles()}">${this.escapeHtml(form.description)}</p>` : ''}
+                    <form class="rbird-form-fields" data-form-id="${form.id}">
+                        ${fieldsHtml}
+                        <button type="submit" class="rbird-form-submit" style="${this.getSubmitButtonStyles(theme)}">
+                            ${this.escapeHtml(form.submitButtonText || 'Submit')}
+                        </button>
+                    </form>
+                    <div class="rbird-form-success" style="display: none;">
+                        <p style="${this.getSuccessStyles()}">${this.escapeHtml(form.successMessage || 'Thank you for your submission!')}</p>
+                    </div>
+                </div>
+            </div>
+        `;
+
+        // Add event listeners
+        if (isModal) {
+            const closeButton = container.querySelector('.rbird-form-close');
+            if (closeButton) {
+                closeButton.addEventListener('click', (e) => {
+                    e.preventDefault();
+                    this.closeForm(form.id, options.onClose);
+                });
+            }
+        }
+
+        const formElement = container.querySelector('form');
+        if (formElement) {
+            formElement.addEventListener('submit', (e) => {
+                e.preventDefault();
+                this.handleSubmit(form.id, formElement, options);
+            });
+        }
+
+        return container;
+    }
+
+    createFieldHtml(field, theme) {
+        const required = field.required ? 'required' : '';
+        const requiredMark = field.required ? '<span style="color: #dc2626;">*</span>' : '';
+        const inputStyle = this.getInputStyles(theme);
+
+        let html = `<div class="rbird-form-field" style="margin-bottom: 16px;">`;
+
+        if (field.label) {
+            html += `<label style="${this.getLabelStyles()}">${this.escapeHtml(field.label)} ${requiredMark}</label>`;
+        }
+
+        switch (field.type) {
+            case 'TEXT':
+            case 'EMAIL':
+            case 'PHONE':
+            case 'NUMBER':
+            case 'DATE':
+                html += `<input type="${this.getInputType(field.type)}" name="${field.id}"
+                    placeholder="${this.escapeHtml(field.placeholder || '')}"
+                    ${required} style="${inputStyle}" />`;
+                break;
+            case 'TEXTAREA':
+                html += `<textarea name="${field.id}" rows="4"
+                    placeholder="${this.escapeHtml(field.placeholder || '')}"
+                    ${required} style="${inputStyle}"></textarea>`;
+                break;
+            case 'CHECKBOX':
+                if (field.options && field.options.length > 0) {
+                    field.options.forEach((option, index) => {
+                        html += `<label style="${this.getCheckboxLabelStyles()}">
+                            <input type="checkbox" name="${field.id}" value="${this.escapeHtml(option)}" />
+                            ${this.escapeHtml(option)}
+                        </label>`;
+                    });
+                } else {
+                    html += `<label style="${this.getCheckboxLabelStyles()}">
+                        <input type="checkbox" name="${field.id}" ${required} />
+                        ${this.escapeHtml(field.label || '')}
+                    </label>`;
+                }
+                break;
+            case 'RADIO':
+                (field.options || []).forEach((option, index) => {
+                    html += `<label style="${this.getCheckboxLabelStyles()}">
+                        <input type="radio" name="${field.id}" value="${this.escapeHtml(option)}" ${required && index === 0 ? required : ''} />
+                        ${this.escapeHtml(option)}
+                    </label>`;
+                });
+                break;
+            case 'DROPDOWN':
+                html += `<select name="${field.id}" ${required} style="${inputStyle}">
+                    <option value="">${this.escapeHtml(field.placeholder || 'Select an option')}</option>
+                    ${(field.options || []).map(opt => `<option value="${this.escapeHtml(opt)}">${this.escapeHtml(opt)}</option>`).join('')}
+                </select>`;
+                break;
+            case 'FILE':
+                html += `<input type="file" name="${field.id}" ${required} style="${inputStyle}" />`;
+                break;
+            default:
+                html += `<input type="text" name="${field.id}"
+                    placeholder="${this.escapeHtml(field.placeholder || '')}"
+                    ${required} style="${inputStyle}" />`;
+        }
+
+        if (field.helpText) {
+            html += `<small style="${this.getHelpTextStyles()}">${this.escapeHtml(field.helpText)}</small>`;
+        }
+
+        html += `</div>`;
+        return html;
+    }
+
+    getInputType(fieldType) {
+        const typeMap = {
+            'TEXT': 'text',
+            'EMAIL': 'email',
+            'PHONE': 'tel',
+            'NUMBER': 'number',
+            'DATE': 'date'
+        };
+        return typeMap[fieldType] || 'text';
+    }
+
+    handleSubmit(formId, formElement, options) {
+        const formData = new FormData(formElement);
+        const data = {};
+
+        formData.forEach((value, key) => {
+            if (data[key]) {
+                // Handle multiple values (checkboxes)
+                if (Array.isArray(data[key])) {
+                    data[key].push(value);
+                } else {
+                    data[key] = [data[key], value];
+                }
+            } else {
+                data[key] = value;
+            }
+        });
+
+        const sessionManager = RbirdSessionManager.getInstance();
+        const state = sessionManager.getState();
+
+        const http = new XMLHttpRequest();
+        http.open("POST", `${API}/ewidget/forms/${formId}/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);
+        }
+
+        // Send browser language
+        const browserLang = navigator.language ? navigator.language.split('-')[0] : 'en';
+        http.setRequestHeader("languageCode", browserLang);
+
+        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-form-${formId}`);
+                    if (container) {
+                        const form = container.querySelector('form');
+                        const successMessage = container.querySelector('.rbird-form-success');
+                        if (form) form.style.display = 'none';
+                        if (successMessage) successMessage.style.display = 'block';
+                    }
+
+                    if (options.onSubmit) {
+                        options.onSubmit(data);
+                    }
+                } else {
+                    console.error('[RbirdFormManager] Failed to submit form. Status:', http.status);
+                    if (submitButton) {
+                        submitButton.disabled = false;
+                        submitButton.textContent = 'Submit';
+                    }
+                    alert('Failed to submit form. Please try again.');
+                }
+            }
+        };
+
+        http.send(JSON.stringify({
+            data: data,
+            userEmail: state?.identify?.email || null,
+            userName: state?.identify?.name || null
+        }));
+    }
+
+    closeForm(formId, onClose) {
+        const overlay = document.getElementById(`rbird-form-overlay-${formId}`);
+        if (overlay) {
+            overlay.classList.remove('rbird-form-overlay-visible');
+            setTimeout(() => {
+                overlay.remove();
+            }, 300);
+        }
+
+        const inlineForm = document.getElementById(`rbird-form-${formId}`);
+        if (inlineForm && !overlay) {
+            inlineForm.remove();
+        }
+
+        this.displayedForms.delete(formId);
+
+        if (onClose) {
+            onClose();
+        }
+    }
+
+    // Styles
+    getFormStyles(theme, isModal) {
+        return `
+            background-color: ${theme.backgroundColor || '#ffffff'};
+            font-family: ${theme.fontFamily || "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"};
+            border-radius: ${theme.borderRadius || '12px'};
+            padding: 24px;
+            min-width: min(400px, calc(100vw - 40px));
+            ${isModal ? 'max-width: 500px; width: 100%; max-height: 90vh; overflow-y: auto;' : 'width: 100%;'}
+            box-sizing: border-box;
+        `;
+    }
+
+    getCloseButtonStyles() {
+        return `
+            position: absolute;
+            top: 12px;
+            right: 12px;
+            background: transparent;
+            border: none;
+            font-size: 24px;
+            line-height: 1;
+            cursor: pointer;
+            color: #6b7280;
+            opacity: 0.6;
+            padding: 0;
+            width: 32px;
+            height: 32px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: opacity 0.2s;
+        `;
+    }
+
+    getTitleStyles(theme) {
+        return `
+            margin: 0 0 8px 0;
+            font-size: 20px;
+            font-weight: 600;
+            color: ${theme.primaryColor || '#1f2937'};
+        `;
+    }
+
+    getDescriptionStyles() {
+        return `
+            margin: 0 0 20px 0;
+            font-size: 14px;
+            color: #6b7280;
+            line-height: 1.5;
+        `;
+    }
+
+    getLabelStyles() {
+        return `
+            display: block;
+            margin-bottom: 6px;
+            font-size: 14px;
+            font-weight: 500;
+            color: #374151;
+        `;
+    }
+
+    getInputStyles(theme) {
+        return `
+            width: 100%;
+            padding: 10px 12px;
+            border: 1px solid ${theme.inputBorderColor || '#d1d5db'};
+            border-radius: ${theme.borderRadius || '8px'};
+            font-size: 14px;
+            transition: border-color 0.2s, box-shadow 0.2s;
+            box-sizing: border-box;
+            outline: none;
+        `;
+    }
+
+    getCheckboxLabelStyles() {
+        return `
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            margin-bottom: 8px;
+            font-size: 14px;
+            color: #374151;
+            cursor: pointer;
+        `;
+    }
+
+    getHelpTextStyles() {
+        return `
+            display: block;
+            margin-top: 4px;
+            font-size: 12px;
+            color: #6b7280;
+        `;
+    }
+
+    getSubmitButtonStyles(theme) {
+        return `
+            width: 100%;
+            padding: 12px 20px;
+            background-color: ${theme.buttonColor || '#667eea'};
+            color: ${theme.buttonTextColor || '#ffffff'};
+            border: none;
+            border-radius: ${theme.borderRadius || '8px'};
+            font-size: 14px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: opacity 0.2s, transform 0.2s;
+            margin-top: 8px;
+        `;
+    }
+
+    getSuccessStyles() {
+        return `
+            text-align: center;
+            padding: 40px 20px;
+            font-size: 16px;
+            color: #10b981;
+        `;
+    }
+
+    escapeHtml(text) {
+        if (!text) return '';
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+    }
+
+    injectStyles() {
+        if (typeof window === 'undefined' || document.getElementById('rbird-form-styles')) return;
+
+        const style = document.createElement('style');
+        style.id = 'rbird-form-styles';
+        style.textContent = `
+            .rbird-form-overlay {
+                position: fixed;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                background-color: rgba(0, 0, 0, 0);
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                z-index: 10001;
+                padding: 20px;
+                opacity: 0;
+                transition: background-color 0.3s, opacity 0.3s;
+            }
+
+            .rbird-form-overlay-visible {
+                background-color: rgba(0, 0, 0, 0.5);
+                opacity: 1;
+            }
+
+            .rbird-form-modal {
+                position: relative;
+                animation: rbirdFormSlideIn 0.3s ease-out;
+            }
+
+            .rbird-form-inline {
+                width: 100%;
+            }
+
+            .rbird-form-content {
+                position: relative;
+            }
+
+            .rbird-form-close:hover {
+                opacity: 1 !important;
+            }
+
+            .rbird-form-submit:hover {
+                opacity: 0.9;
+                transform: translateY(-1px);
+            }
+
+            .rbird-form-submit:disabled {
+                opacity: 0.6;
+                cursor: not-allowed;
+            }
+
+            .rbird-form-fields input:focus,
+            .rbird-form-fields textarea:focus,
+            .rbird-form-fields select:focus {
+                border-color: #667eea;
+                box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+            }
+
+            @keyframes rbirdFormSlideIn {
+                from {
+                    opacity: 0;
+                    transform: translateY(-20px) scale(0.95);
+                }
+                to {
+                    opacity: 1;
+                    transform: translateY(0) scale(1);
+                }
+            }
+        `;
+        document.head.appendChild(style);
+    }
+}