besper-frontend-site-dev-main/src/components/management/widgets/WelcomeMessages.js

Professional B-esper Frontend Site - Site-wide integration toolkit for full website bot deployment

/**
 * Welcome Messages Widget Component
 * Handles welcome message configuration and display
 */

export class WelcomeMessages {
  constructor(widget, apiCall, credentials, i18n = null) {
    this.widget = widget;
    this.apiCall = apiCall;
    this.credentials = credentials;
    this.i18n = i18n;
  }

  /**
   * Update language
   * @param {string} language - New language code
   */
  updateLanguage(language) {
    if (this.i18n) {
      console.log(`[WelcomeMessages] Language updated to: ${language}`);
      // Re-render if widget is active
      const welcomeSection = this.widget.querySelector('#bm-welcome-section');
      if (welcomeSection) {
        // Get current config
        const messageTextarea = this.widget.querySelector(
          '#bm-welcome-message'
        );
        const currentValue = messageTextarea ? messageTextarea.value : '';
        const config = { welcome_message: currentValue };

        // Re-render with new language
        welcomeSection.innerHTML = this.render(config);
        this.setupEventListeners();
      }
    }
  }

  /**
   * Get translated text
   * @param {string} key - Translation key
   * @param {Object} variables - Variables for substitution
   * @returns {string} Translated text
   */
  t(key, variables = {}) {
    return this.i18n ? this.i18n.t(key, variables) : key;
  }

  /**
   * Renders the welcome messages section
   * @param {Object} config - Bot configuration data
   * @returns {string} Welcome messages HTML
   */
  render(config = {}) {
    const welcomeMessage = config.welcome_message || '';

    return `
      <div class="bm-section" id="bm-welcome-section">
        <h2 class="bm-section-title">
          <i class="bm-icon">👋</i>
          ${this.t('welcomeMessages.title')}
        </h2>
        
        <div class="bm-form-group">
          <label class="bm-form-label">${this.t('welcomeMessages.defaultMessage')}</label>
          <textarea 
            id="bm-welcome-message" 
            class="bm-form-input" 
            rows="3" 
            placeholder="${this.t('welcomeMessages.placeholder')}"
          >${welcomeMessage}</textarea>
          <small class="bm-form-help">
            ${this.t('welcomeMessages.hint')}
          </small>
        </div>

        <div class="bm-actions">
          <button class="bm-btn bm-btn-primary" onclick="this.saveWelcomeMessage()">
            <i class="bm-icon">💾</i>
            ${this.t('welcomeMessages.saveWelcomeMessage')}
          </button>
        </div>
      </div>
    `;
  }

  /**
   * Saves the welcome message configuration
   */
  async saveWelcomeMessage() {
    const messageTextarea = this.widget.querySelector('#bm-welcome-message');
    if (!messageTextarea) return;

    const welcomeMessage = messageTextarea.value.trim();

    try {
      const response = await this.apiCall(
        '/management/config',
        'PATCH',
        {
          bot_id: this.credentials.botId,
          config_updates: {
            welcome_message: welcomeMessage,
          },
        },
        this.credentials.managementId,
        this.credentials.managementSecret
      );

      if (response.success) {
        this.showSuccessMessage(this.t('welcomeMessages.saveSuccess'));
      } else {
        this.showErrorMessage(
          this.t('welcomeMessages.saveError') +
            ': ' +
            (response.error || 'Unknown error')
        );
      }
    } catch (error) {
      console.error('Error saving welcome message:', error);
      this.showErrorMessage(this.t('welcomeMessages.saveErrorGeneric'));
    }
  }

  /**
   * Sets up event listeners for the welcome messages section
   */
  setupEventListeners() {
    // Save button
    const saveBtn = this.widget.querySelector(
      '#bm-welcome-section .bm-btn-primary'
    );
    saveBtn?.addEventListener('click', () => this.saveWelcomeMessage());

    // Auto-save on textarea blur
    const textarea = this.widget.querySelector('#bm-welcome-message');
    textarea?.addEventListener('blur', () => this.saveWelcomeMessage());
  }

  /**
   * Shows success message to user
   * @param {string} message - Success message to display
   */
  showSuccessMessage(message) {
    // Create or update success notification
    let notification = this.widget.querySelector('.bm-notification-success');
    if (!notification) {
      notification = document.createElement('div');
      notification.className = 'bm-notification bm-notification-success';
      this.widget
        .querySelector('#bm-welcome-section')
        .appendChild(notification);
    }

    notification.textContent = message;
    notification.style.display = 'block';

    // Auto-hide after 3 seconds
    setTimeout(() => {
      notification.style.display = 'none';
    }, 3000);
  }

  /**
   * Shows error message to user
   * @param {string} message - Error message to display
   */
  showErrorMessage(message) {
    // Create or update error notification
    let notification = this.widget.querySelector('.bm-notification-error');
    if (!notification) {
      notification = document.createElement('div');
      notification.className = 'bm-notification bm-notification-error';
      this.widget
        .querySelector('#bm-welcome-section')
        .appendChild(notification);
    }

    notification.textContent = message;
    notification.style.display = 'block';

    // Auto-hide after 5 seconds
    setTimeout(() => {
      notification.style.display = 'none';
    }, 5000);
  }

  /**
   * Updates the welcome message display with new data
   * @param {Object} config - Updated bot configuration
   */
  update(config) {
    const textarea = this.widget.querySelector('#bm-welcome-message');
    if (textarea && config.welcome_message !== undefined) {
      textarea.value = config.welcome_message || '';
    }
  }
}