@product7/feedback-sdk 1.3.0 → 1.3.2

package/src/widgets/messenger/views/PreChatFormView.js

@@ -0,0 +1,224 @@
+/**
+ * PreChatFormView - Collects user info after the first message
+ */
+export class PreChatFormView {
+	constructor(state, options = {}) {
+		this.state = state;
+		this.options = options;
+		this.element = null;
+		this._isSubmitting = false;
+	}
+
+	render() {
+		this.element = document.createElement('div');
+		this.element.className = 'messenger-view messenger-prechat-view';
+
+		this._updateContent();
+
+		return this.element;
+	}
+
+	_updateContent() {
+		// Pre-fill from userContext if available
+		const existingName = this.state.userContext?.name || '';
+		const existingEmail = this.state.userContext?.email || '';
+
+		this.element.innerHTML = `
+			<div class="messenger-prechat-overlay">
+				<div class="messenger-prechat-card">
+					<h4>Get notified when we reply</h4>
+					<form class="messenger-prechat-form" novalidate>
+						<div class="messenger-prechat-fields">
+							<input
+								type="text"
+								id="messenger-prechat-name"
+								name="name"
+								placeholder="Name (optional)"
+								value="${this._escapeHtml(existingName)}"
+								autocomplete="name"
+								class="messenger-prechat-input"
+							/>
+							<input
+								type="email"
+								id="messenger-prechat-email"
+								name="email"
+								placeholder="Email address"
+								value="${this._escapeHtml(existingEmail)}"
+								required
+								autocomplete="email"
+								class="messenger-prechat-input"
+							/>
+						</div>
+						<span class="messenger-prechat-error" id="messenger-email-error"></span>
+						<div class="messenger-prechat-actions">
+							<button type="button" class="messenger-prechat-skip">Skip</button>
+							<button type="submit" class="messenger-prechat-submit" disabled>
+								<span class="messenger-prechat-submit-text">Continue</span>
+								<span class="messenger-prechat-submit-loading" style="display: none;">
+									<i class="ph ph-spinner" style="font-size: 16px;"></i>
+								</span>
+							</button>
+						</div>
+					</form>
+				</div>
+			</div>
+		`;
+
+		this._attachEvents();
+	}
+
+	_renderTeamAvatars() {
+		const avatars = this.state.teamAvatars;
+		if (!avatars || avatars.length === 0) {
+			return `
+				<div class="messenger-avatar-stack">
+					<div class="messenger-avatar" style="background: #5856d6;">S</div>
+					<div class="messenger-avatar" style="background: #007aff;">T</div>
+				</div>
+			`;
+		}
+
+		const colors = ['#5856d6', '#007aff', '#34c759', '#ff9500', '#ff3b30'];
+		const avatarItems = avatars
+			.slice(0, 3)
+			.map((avatar, i) => {
+				if (typeof avatar === 'string' && avatar.startsWith('http')) {
+					return `<img class="messenger-avatar" src="${avatar}" alt="Team member" style="z-index: ${3 - i};" />`;
+				}
+				return `<div class="messenger-avatar" style="background: ${colors[i % colors.length]}; z-index: ${3 - i};">${avatar.charAt(0).toUpperCase()}</div>`;
+			})
+			.join('');
+
+		return `<div class="messenger-avatar-stack">${avatarItems}</div>`;
+	}
+
+	_escapeHtml(text) {
+		if (!text) return '';
+		return text
+			.replace(/&/g, '&amp;')
+			.replace(/</g, '&lt;')
+			.replace(/>/g, '&gt;')
+			.replace(/"/g, '&quot;');
+	}
+
+	_attachEvents() {
+		// Form validation
+		const form = this.element.querySelector('.messenger-prechat-form');
+		const emailInput = this.element.querySelector('#messenger-prechat-email');
+		const submitBtn = this.element.querySelector('.messenger-prechat-submit');
+		const skipBtn = this.element.querySelector('.messenger-prechat-skip');
+
+		const validateForm = () => {
+			const email = emailInput.value.trim();
+			const isEmailValid = this._isValidEmail(email);
+			submitBtn.disabled = !isEmailValid;
+			return isEmailValid;
+		};
+
+		emailInput.addEventListener('input', () => {
+			this._clearError('messenger-email-error');
+			validateForm();
+		});
+
+		emailInput.addEventListener('blur', () => {
+			const email = emailInput.value.trim();
+			if (email && !this._isValidEmail(email)) {
+				this._showError('messenger-email-error', 'Please enter a valid email');
+			}
+		});
+
+		// Skip button - go back to chat without collecting info
+		skipBtn.addEventListener('click', () => {
+			this.state.setView('chat');
+		});
+
+		// Form submission
+		form.addEventListener('submit', async (e) => {
+			e.preventDefault();
+			if (this._isSubmitting) return;
+			if (!validateForm()) {
+				this._showError('messenger-email-error', 'Please enter a valid email');
+				return;
+			}
+			await this._handleSubmit();
+		});
+
+		// Set initial button state
+		validateForm();
+
+		// Focus email input
+		setTimeout(() => emailInput.focus(), 100);
+	}
+
+	_isValidEmail(email) {
+		const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+		return emailRegex.test(email);
+	}
+
+	_showError(elementId, message) {
+		const errorEl = this.element.querySelector(`#${elementId}`);
+		if (errorEl) {
+			errorEl.textContent = message;
+			errorEl.style.display = 'block';
+		}
+	}
+
+	_clearError(elementId) {
+		const errorEl = this.element.querySelector(`#${elementId}`);
+		if (errorEl) {
+			errorEl.textContent = '';
+			errorEl.style.display = 'none';
+		}
+	}
+
+	async _handleSubmit() {
+		const nameInput = this.element.querySelector('#messenger-prechat-name');
+		const emailInput = this.element.querySelector('#messenger-prechat-email');
+		const submitBtn = this.element.querySelector('.messenger-prechat-submit');
+		const submitText = submitBtn.querySelector('.messenger-prechat-submit-text');
+		const submitLoading = submitBtn.querySelector('.messenger-prechat-submit-loading');
+
+		const name = nameInput.value.trim();
+		const email = emailInput.value.trim();
+
+		// Show loading state
+		this._isSubmitting = true;
+		submitBtn.disabled = true;
+		submitText.style.display = 'none';
+		submitLoading.style.display = 'inline-flex';
+
+		try {
+			// First, identify the contact with collected info
+			if (this.options.onIdentifyContact) {
+				await this.options.onIdentifyContact({ name, email });
+			}
+
+			// Update state with user info
+			if (!this.state.userContext) {
+				this.state.userContext = {};
+			}
+			this.state.userContext.name = name;
+			this.state.userContext.email = email;
+
+			this._isSubmitting = false;
+
+			// Go to chat after collecting contact info
+			this.state.setView('chat');
+		} catch (error) {
+			console.error('[PreChatFormView] Error submitting form:', error);
+			this._showError('messenger-email-error', 'Something went wrong. Please try again.');
+
+			// Reset button state
+			this._isSubmitting = false;
+			submitBtn.disabled = false;
+			submitText.style.display = 'inline';
+			submitLoading.style.display = 'none';
+		}
+	}
+
+	destroy() {
+		if (this.element && this.element.parentNode) {
+			this.element.parentNode.removeChild(this.element);
+		}
+	}
+}