releasebird-javascript-sdk 1.0.73 → 1.0.76

package/src/ReleasebirdFormViewer.js

@@ -0,0 +1,268 @@
+// API is defined globally via webpack.DefinePlugin
+/* global API */
+
+export default class ReleasebirdFormViewer {
+
+    static showForm(formData, formId, chatId, apiKey, iframeRef) {
+        // Create modal overlay
+        const overlay = document.createElement('div');
+        overlay.id = 'rbirdFormModal';
+        overlay.className = 'rbird-form-modal-overlay';
+
+        // Create modal container
+        const modal = document.createElement('div');
+        modal.className = 'rbird-form-modal';
+
+        // Create form header
+        const header = document.createElement('div');
+        header.className = 'rbird-form-modal-header';
+
+        const title = document.createElement('h2');
+        title.className = 'rbird-form-modal-title';
+        title.textContent = formData.title || 'Form';
+
+        const closeBtn = document.createElement('button');
+        closeBtn.className = 'rbird-form-modal-close';
+        closeBtn.innerHTML = '×';
+        closeBtn.onclick = () => this.closeForm();
+
+        header.appendChild(title);
+        header.appendChild(closeBtn);
+
+        // Create form content
+        const content = document.createElement('div');
+        content.className = 'rbird-form-modal-content';
+
+        const formElement = document.createElement('form');
+        formElement.className = 'rbird-form-element';
+
+        // Render form fields
+        if (formData.fields && formData.fields.length > 0) {
+            formData.fields.forEach((field) => {
+                const fieldWrapper = this.createFormField(field, formData.theme);
+                formElement.appendChild(fieldWrapper);
+            });
+        }
+
+        // Submit button
+        const submitBtn = document.createElement('button');
+        submitBtn.type = 'submit';
+        submitBtn.className = 'rbird-form-submit-btn';
+        if (formData.theme?.primaryColor) {
+            submitBtn.style.backgroundColor = formData.theme.primaryColor;
+        }
+        submitBtn.textContent = formData.submitButtonText || 'Send';
+
+        formElement.appendChild(submitBtn);
+
+        formElement.onsubmit = async (e) => {
+            e.preventDefault();
+            submitBtn.disabled = true;
+            submitBtn.textContent = '...';
+
+            const formDataObj = new FormData(formElement);
+            const data = {};
+            formDataObj.forEach((value, key) => {
+                // Handle checkbox groups
+                if (data[key]) {
+                    if (Array.isArray(data[key])) {
+                        data[key].push(value);
+                    } else {
+                        data[key] = [data[key], value];
+                    }
+                } else {
+                    data[key] = value;
+                }
+            });
+
+            try {
+                const response = await fetch(`${API}/ewidget/forms/${formId}/submit`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'apiKey': apiKey,
+                    },
+                    body: JSON.stringify({
+                        data,
+                        chatId: chatId
+                    })
+                });
+
+                if (response.ok) {
+                    this.closeForm();
+                    // Notify iframe that form was submitted
+                    if (iframeRef) {
+                        iframeRef.contentWindow?.postMessage({
+                            type: 'formSubmitted',
+                            formId: formId
+                        }, '*');
+                    }
+                } else {
+                    throw new Error('Submit failed');
+                }
+            } catch (error) {
+                console.error('Error submitting form:', error);
+                submitBtn.disabled = false;
+                submitBtn.textContent = formData.submitButtonText || 'Send';
+            }
+        };
+
+        content.appendChild(formElement);
+        modal.appendChild(header);
+        modal.appendChild(content);
+        overlay.appendChild(modal);
+
+        // Close on overlay click
+        overlay.onclick = (e) => {
+            if (e.target === overlay) {
+                this.closeForm();
+            }
+        };
+
+        // Close on Escape key
+        const escHandler = (e) => {
+            if (e.key === 'Escape') {
+                this.closeForm();
+                document.removeEventListener('keydown', escHandler);
+            }
+        };
+        document.addEventListener('keydown', escHandler);
+
+        document.body.appendChild(overlay);
+        document.body.style.overflow = 'hidden';
+    }
+
+    static closeForm() {
+        const modal = document.getElementById('rbirdFormModal');
+        if (modal) {
+            document.body.removeChild(modal);
+            document.body.style.overflow = '';
+        }
+    }
+
+    static createFormField(field, theme) {
+        const wrapper = document.createElement('div');
+        wrapper.className = 'rbird-form-field';
+
+        // Label
+        if (field.label) {
+            const label = document.createElement('label');
+            label.className = 'rbird-form-label';
+            label.textContent = field.label;
+            if (field.required) {
+                const asterisk = document.createElement('span');
+                asterisk.className = 'rbird-form-required';
+                asterisk.textContent = ' *';
+                label.appendChild(asterisk);
+            }
+            wrapper.appendChild(label);
+        }
+
+        const fieldId = field.id || field.label || 'field';
+
+        switch (field.type) {
+            case 'TEXT':
+            case 'EMAIL':
+            case 'PHONE':
+            case 'NUMBER':
+                const input = document.createElement('input');
+                input.type = field.type === 'EMAIL' ? 'email' : field.type === 'NUMBER' ? 'number' : 'text';
+                input.name = fieldId;
+                input.required = field.required || false;
+                input.placeholder = field.placeholder || '';
+                input.className = 'rbird-form-input';
+                wrapper.appendChild(input);
+                break;
+
+            case 'TEXTAREA':
+                const textarea = document.createElement('textarea');
+                textarea.name = fieldId;
+                textarea.required = field.required || false;
+                textarea.placeholder = field.placeholder || '';
+                textarea.rows = 4;
+                textarea.className = 'rbird-form-input rbird-form-textarea';
+                wrapper.appendChild(textarea);
+                break;
+
+            case 'DROPDOWN':
+            case 'SELECT':
+                const select = document.createElement('select');
+                select.name = fieldId;
+                select.required = field.required || false;
+                select.className = 'rbird-form-input rbird-form-select';
+
+                const defaultOption = document.createElement('option');
+                defaultOption.value = '';
+                defaultOption.textContent = field.placeholder || '-- Select --';
+                select.appendChild(defaultOption);
+
+                (field.options || []).forEach((opt) => {
+                    const option = document.createElement('option');
+                    option.value = opt;
+                    option.textContent = opt;
+                    select.appendChild(option);
+                });
+                wrapper.appendChild(select);
+                break;
+
+            case 'CHECKBOX':
+                const checkboxContainer = document.createElement('div');
+                checkboxContainer.className = 'rbird-form-checkbox-group';
+
+                (field.options || []).forEach((opt) => {
+                    const optWrapper = document.createElement('label');
+                    optWrapper.className = 'rbird-form-checkbox-label';
+
+                    const checkbox = document.createElement('input');
+                    checkbox.type = 'checkbox';
+                    checkbox.name = fieldId;
+                    checkbox.value = opt;
+                    checkbox.className = 'rbird-form-checkbox';
+
+                    const optLabel = document.createElement('span');
+                    optLabel.textContent = opt;
+
+                    optWrapper.appendChild(checkbox);
+                    optWrapper.appendChild(optLabel);
+                    checkboxContainer.appendChild(optWrapper);
+                });
+                wrapper.appendChild(checkboxContainer);
+                break;
+
+            case 'RADIO':
+                const radioContainer = document.createElement('div');
+                radioContainer.className = 'rbird-form-radio-group';
+
+                (field.options || []).forEach((opt) => {
+                    const optWrapper = document.createElement('label');
+                    optWrapper.className = 'rbird-form-radio-label';
+
+                    const radio = document.createElement('input');
+                    radio.type = 'radio';
+                    radio.name = fieldId;
+                    radio.value = opt;
+                    radio.required = field.required || false;
+                    radio.className = 'rbird-form-radio';
+
+                    const optLabel = document.createElement('span');
+                    optLabel.textContent = opt;
+
+                    optWrapper.appendChild(radio);
+                    optWrapper.appendChild(optLabel);
+                    radioContainer.appendChild(optWrapper);
+                });
+                wrapper.appendChild(radioContainer);
+                break;
+
+            default:
+                const defaultInput = document.createElement('input');
+                defaultInput.type = 'text';
+                defaultInput.name = fieldId;
+                defaultInput.required = field.required || false;
+                defaultInput.className = 'rbird-form-input';
+                wrapper.appendChild(defaultInput);
+        }
+
+        return wrapper;
+    }
+}

package/src/Styles.js

@@ -170,27 +170,19 @@ export const injectStyledCSS = (
 }
 
 .launcherButton {
-    backgroundColor:transparent;
+    background-color:transparent;
     width:50px;
     height:50px;
-    z-index: 10000000;
-    position:fixed;
-    bottom:${spaceBottom}px;
-    right:${launcherPosition === 'right' ? spaceLeftRight + 'px' : 'unset'};
-    left:${launcherPosition === 'left' ? spaceLeftRight + 'px' : 'unset'};
     cursor:pointer;
+    position: relative;
 }
 
 .launcherButton5 {
-    backgroundColor:transparent;
+    background-color:transparent;
     width:70px;
     height:50px;
-    z-index: 10000000;
-    position:fixed;
-    bottom:${spaceBottom}px;
-    right:${launcherPosition === 'right' ? spaceLeftRight + 'px' : 'unset'};
-    left:${launcherPosition === 'left' ? spaceLeftRight + 'px' : 'unset'};
     cursor:pointer;
+    position: relative;
 }
 
 .rbird_badge {
@@ -322,9 +314,9 @@ height: 15px;
 position: fixed;
 cursor: pointer;
 bottom: ${spaceBottom + 45}px;
-right: ${launcherPosition === 'right' ? (spaceLeftRight -15) + 'px' : 'unset'};
-left: ${launcherPosition === 'left' ? (spaceLeftRight -15) + 'px' : 'unset'};
-z-index: 10000000;
+right: ${launcherPosition === 'right' ? (spaceLeftRight - 5) + 'px' : 'unset'};
+left: ${launcherPosition === 'left' ? (spaceLeftRight + 55) + 'px' : 'unset'};
+z-index: 10000001;
 }
 
 .rbird_closeclose:hover,
@@ -523,6 +515,261 @@ background: transparent
         transform: translateY(20px) scale(0.95);
     }
 }
+
+/* Drag Handle for Widget Button */
+.rbird-drag-handle {
+    width: 14px;
+    height: 28px;
+    cursor: grab;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 3px;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+    pointer-events: auto;
+    background: transparent;
+    border-radius: 4px;
+    padding: 2px;
+}
+
+.rbird-drag-handle:hover {
+    background: rgba(0, 0, 0, 0.05);
+}
+
+.rbird-drag-handle:active {
+    cursor: grabbing;
+}
+
+.rbird-drag-handle-row {
+    display: flex;
+    gap: 2px;
+}
+
+.rbird-drag-handle-dot {
+    width: 3px;
+    height: 3px;
+    border-radius: 50%;
+    background-color: #b0b0b0;
+}
+
+.rbird-widget-wrapper {
+    position: fixed;
+    z-index: 10000000;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.rbird-widget-wrapper:hover .rbird-drag-handle {
+    opacity: 1;
+}
+
+.rbird-widget-wrapper.rbird-dragging .rbird-drag-handle {
+    opacity: 1;
+}
+
+/* Form Modal Styles */
+.rbird-form-modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.6);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 10000000001;
+    animation: rbird-form-fade-in 0.2s ease;
+}
+
+.rbird-form-modal {
+    background: white;
+    border-radius: 16px;
+    max-width: 500px;
+    width: 90%;
+    max-height: 85vh;
+    overflow-y: auto;
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    animation: rbird-form-scale-in 0.3s ease;
+}
+
+.rbird-form-modal-header {
+    padding: 20px 24px;
+    border-bottom: 1px solid #e5e7eb;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    position: sticky;
+    top: 0;
+    background: white;
+    border-radius: 16px 16px 0 0;
+}
+
+.rbird-form-modal-title {
+    margin: 0;
+    font-size: 20px;
+    font-weight: 600;
+    color: #111827;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+.rbird-form-modal-close {
+    background: none;
+    border: none;
+    font-size: 28px;
+    cursor: pointer;
+    color: #9ca3af;
+    line-height: 1;
+    padding: 0;
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 8px;
+    transition: all 0.2s ease;
+}
+
+.rbird-form-modal-close:hover {
+    background: #f3f4f6;
+    color: #374151;
+}
+
+.rbird-form-modal-content {
+    padding: 24px;
+}
+
+.rbird-form-element {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+.rbird-form-field {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.rbird-form-label {
+    font-size: 14px;
+    font-weight: 500;
+    color: #374151;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+.rbird-form-required {
+    color: #ef4444;
+}
+
+.rbird-form-input {
+    padding: 12px 14px;
+    border: 1px solid #d1d5db;
+    border-radius: 10px;
+    font-size: 15px;
+    outline: none;
+    transition: border-color 0.2s ease, box-shadow 0.2s ease;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    background: #fff;
+}
+
+.rbird-form-input:focus {
+    border-color: #4f46e5;
+    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
+}
+
+.rbird-form-input::placeholder {
+    color: #9ca3af;
+}
+
+.rbird-form-textarea {
+    resize: vertical;
+    min-height: 100px;
+}
+
+.rbird-form-select {
+    cursor: pointer;
+    appearance: none;
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
+    background-position: right 12px center;
+    background-repeat: no-repeat;
+    background-size: 16px 16px;
+    padding-right: 40px;
+}
+
+.rbird-form-checkbox-group,
+.rbird-form-radio-group {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.rbird-form-checkbox-label,
+.rbird-form-radio-label {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    cursor: pointer;
+    font-size: 14px;
+    color: #374151;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+.rbird-form-checkbox,
+.rbird-form-radio {
+    width: 18px;
+    height: 18px;
+    cursor: pointer;
+    accent-color: #4f46e5;
+}
+
+.rbird-form-submit-btn {
+    background: #4f46e5;
+    color: white;
+    border: none;
+    padding: 14px 24px;
+    border-radius: 10px;
+    font-size: 15px;
+    font-weight: 600;
+    cursor: pointer;
+    margin-top: 8px;
+    transition: all 0.2s ease;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+.rbird-form-submit-btn:hover {
+    opacity: 0.9;
+    transform: translateY(-1px);
+}
+
+.rbird-form-submit-btn:disabled {
+    opacity: 0.7;
+    cursor: not-allowed;
+    transform: none;
+}
+
+@keyframes rbird-form-fade-in {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes rbird-form-scale-in {
+    from {
+        opacity: 0;
+        transform: scale(0.95);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
     }`
 
     const oldNode = document.querySelector(".rbird-styles");
@@ -659,14 +906,12 @@ export function launcher5Open(launcherColor) {
 }
 
 export function launcherOpen(launcherColor) {
-    return `<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"
-                         x="0px"
-                         y="0px"
-                         viewBox="0 0 494.08 494.08" style="enable-background:new 0 0 494.08 494.08;">
-                        <g>
-                            <path fill="${launcherColor}" d="M247.04,0C110.604,0,0,110.604,0,247.04s110.604,247.04,247.04,247.04s247.04-110.604,247.04-247.04
-                                    C493.845,110.701,383.379,0.235,247.04,0z M247.04,298.667l-79.787-80.64l14.293-13.653l65.493,64l65.493-64l14.72,14.507
-                                    L247.04,298.667z"/>
+    return `<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
+                         viewBox="0 0 494.08 494.08">
+                        <circle fill="${launcherColor}" cx="247.04" cy="247.04" r="247.04"/>
+                        <g transform="translate(247.04, 247.04) rotate(45)">
+                            <rect fill="#ffffff" x="-100" y="-15" width="200" height="30" rx="8"/>
+                            <rect fill="#ffffff" x="-15" y="-100" width="30" height="200" rx="8"/>
                         </g>
                     </svg>`
 }

package/src/index.js

@@ -3,6 +3,7 @@ import RbirdSessionManager from "./RbirdSessionManager";
 import RbirdWebsiteWidget from "./RbirdWebsiteWidget";
 import { ReleasebirdConsoleLogger } from "./ReleasebirdConsoleLogger";
 import { RbirdBannerManager } from "./RbirdBannerManager";
+import { RbirdFormManager } from "./RbirdFormManager";
 
 class Rbird {
 
@@ -87,6 +88,10 @@ class Rbird {
                     const bannerManager = RbirdBannerManager.getInstance();
                     bannerManager.injectStyles();
                     bannerManager.init(apiKey);
+
+                    // Initialize form manager
+                    const formManager = RbirdFormManager.getInstance();
+                    formManager.init(apiKey);
                 });
             })
 
@@ -135,6 +140,23 @@ class Rbird {
         }
     }
 
+    /**
+     * 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, shows as modal if not provided)
+     * @param {Function} options.onSubmit - Callback when form is submitted
+     * @param {Function} options.onClose - Callback when form is closed
+     */
+    static showForm(formId, options = {}) {
+        if (typeof window === 'undefined') return;
+        try {
+            RbirdFormManager.getInstance().showForm(formId, options);
+        } catch (e) {
+            console.error(e);
+        }
+    }
+
 }
 
 export const runFunctionWhenDomIsReady = (callback) => {