besper-frontend-site-dev-main/src/components/management/modals/LanguageModal.js

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

/**
 * Language Modal Component
 * Handles language selection functionality
 */

export class LanguageModal {
  constructor(widget, apiCall, credentials) {
    this.widget = widget;
    this.apiCall = apiCall;
    this.credentials = credentials;
    this.availableLanguages = [
      { code: 'en', name: 'English' },
      { code: 'es', name: 'Spanish' },
      { code: 'fr', name: 'French' },
      { code: 'de', name: 'German' },
      { code: 'it', name: 'Italian' },
      { code: 'pt', name: 'Portuguese' },
      { code: 'nl', name: 'Dutch' },
      { code: 'ru', name: 'Russian' },
      { code: 'ja', name: 'Japanese' },
      { code: 'ko', name: 'Korean' },
      { code: 'zh', name: 'Chinese (Simplified)' },
      { code: 'ar', name: 'Arabic' },
      { code: 'hi', name: 'Hindi' },
      { code: 'th', name: 'Thai' },
      { code: 'vi', name: 'Vietnamese' },
    ];
  }

  /**
   * Shows the language modal
   */
  show() {
    const modal = this.widget.querySelector('#bm-languageModal');
    if (!modal) return;

    // Show modal
    modal.style.display = 'flex';
    modal.style.opacity = '0';
    modal.style.transition = 'opacity 0.3s ease';

    setTimeout(() => {
      modal.style.opacity = '1';
    }, 10);
  }

  /**
   * Hides the language modal
   */
  hide() {
    const modal = this.widget.querySelector('#bm-languageModal');
    if (!modal) return;

    modal.style.opacity = '0';
    setTimeout(() => {
      modal.style.display = 'none';
    }, 300);
  }

  /**
   * Adds a language to the bot configuration
   * @param {string} languageCode - The language code to add
   */
  async addLanguage(languageCode) {
    if (!languageCode) {
      console.error('Please select a language');
      return;
    }

    try {
      const response = await this.apiCall(
        '/management/add_language',
        'POST',
        {
          language_code: languageCode,
          bot_id: this.credentials.botId,
        },
        this.credentials.managementId,
        this.credentials.managementSecret
      );

      if (response.success) {
        console.log('Language added successfully!');
        this.hide();
        // Refresh language list if callback provided
        if (this.onLanguageAdded) {
          this.onLanguageAdded();
        }
      } else {
        console.error(
          'Failed to add language: ' + (response.error || 'Unknown error')
        );
      }
    } catch (error) {
      console.error('Error adding language:', error);
      console.error('Failed to add language. Please try again.');
    }
  }

  /**
   * Sets up event listeners for the language modal
   */
  setupEventListeners() {
    const modal = this.widget.querySelector('#bm-languageModal');
    if (!modal) return;

    // Close button
    const closeBtn = modal.querySelector('.bm-modal-close');
    const cancelBtn = modal.querySelector('.bm-btn-secondary');
    closeBtn?.addEventListener('click', () => this.hide());
    cancelBtn?.addEventListener('click', () => this.hide());

    // Add language button
    const addBtn = modal.querySelector('.bm-btn-primary');
    addBtn?.addEventListener('click', () => {
      const languageSelect = modal.querySelector('#bm-language-select');
      if (languageSelect) {
        this.addLanguage(languageSelect.value);
      }
    });

    // Click outside to close
    modal.addEventListener('click', e => {
      if (e.target === modal) {
        this.hide();
      }
    });

    // Escape key to close
    document.addEventListener('keydown', e => {
      if (e.key === 'Escape' && modal.style.display === 'flex') {
        this.hide();
      }
    });
  }

  /**
   * Sets callback for when a language is successfully added
   * @param {Function} callback - Callback function to execute
   */
  setOnLanguageAdded(callback) {
    this.onLanguageAdded = callback;
  }

  /**
   * Renders the language modal HTML structure
   * @returns {string} Modal HTML
   */
  render() {
    const languageOptions = this.availableLanguages
      .map(lang => `<option value="${lang.code}">${lang.name}</option>`)
      .join('');

    return `
      <!-- Add Language Modal -->
      <div class="bm-modal" id="bm-languageModal" style="display: none;">
        <div class="bm-modal-content">
          <div class="bm-modal-header">
            <div class="besper-h3">Add Language</div>
            <button class="bm-modal-close" aria-label="Close">&times;</button>
          </div>
          <div class="bm-modal-body">
            <div class="bm-form-group">
              <label class="bm-form-label" for="bm-language-select">Select Language</label>
              <select id="bm-language-select" class="bm-form-input" required>
                <option value="">Choose a language...</option>
                ${languageOptions}
              </select>
              <small class="bm-form-help">
                Select a language to add to your bot's supported languages.
                Your bot will be able to respond in this language.
              </small>
            </div>
          </div>
          <div class="bm-modal-footer">
            <button class="bm-btn bm-btn-secondary">Cancel</button>
            <button class="bm-btn bm-btn-primary">Add Language</button>
          </div>
        </div>
      </div>
    `;
  }
}