@product7/feedback-sdk 1.3.2 → 1.3.4

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

@@ -1,6 +1,3 @@
-/**
- * PreChatFormView - Collects user info after the first message
- */
 export class PreChatFormView {
 	constructor(state, options = {}) {
 		this.state = state;
@@ -19,16 +16,15 @@ export class PreChatFormView {
 	}
 
 	_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">
+					<h4 class="messenger-prechat-title">Get notified when we reply</h4>
+					<form class="sdk-form-group" novalidate>
+						<div class="sdk-form-group">
 							<input
 								type="text"
 								id="messenger-prechat-name"
@@ -36,8 +32,10 @@ export class PreChatFormView {
 								placeholder="Name (optional)"
 								value="${this._escapeHtml(existingName)}"
 								autocomplete="name"
-								class="messenger-prechat-input"
+								class="sdk-input"
 							/>
+						</div>
+						<div class="sdk-form-group">
 							<input
 								type="email"
 								id="messenger-prechat-email"
@@ -46,16 +44,16 @@ export class PreChatFormView {
 								value="${this._escapeHtml(existingEmail)}"
 								required
 								autocomplete="email"
-								class="messenger-prechat-input"
+								class="sdk-input"
 							/>
+							<span class="messenger-prechat-error" id="messenger-email-error"></span>
 						</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>
+							<button type="button" class="sdk-btn sdk-btn-secondary messenger-prechat-skip">Skip</button>
+							<button type="submit" class="sdk-btn sdk-btn-primary sdk-btn-block 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 class="messenger-prechat-submit-loading">
+									<i class="ph ph-spinner"></i>
 								</span>
 							</button>
 						</div>
@@ -72,20 +70,19 @@ export class PreChatFormView {
 		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 class="sdk-avatar sdk-avatar-md">S</div>
+					<div class="sdk-avatar sdk-avatar-md">T</div>
 				</div>
 			`;
 		}
 
-		const colors = ['#5856d6', '#007aff', '#34c759', '#ff9500', '#ff3b30'];
 		const avatarItems = avatars
 			.slice(0, 3)
-			.map((avatar, i) => {
+			.map((avatar) => {
 				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="sdk-avatar sdk-avatar-md"><img src="${avatar}" alt="Team member" /></div>`;
 				}
-				return `<div class="messenger-avatar" style="background: ${colors[i % colors.length]}; z-index: ${3 - i};">${avatar.charAt(0).toUpperCase()}</div>`;
+				return `<div class="sdk-avatar sdk-avatar-md">${avatar.charAt(0).toUpperCase()}</div>`;
 			})
 			.join('');
 
@@ -103,7 +100,7 @@ export class PreChatFormView {
 
 	_attachEvents() {
 		// Form validation
-		const form = this.element.querySelector('.messenger-prechat-form');
+		const form = this.element.querySelector('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');
@@ -127,12 +124,10 @@ export class PreChatFormView {
 			}
 		});
 
-		// 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;
@@ -143,10 +138,8 @@ export class PreChatFormView {
 			await this._handleSubmit();
 		});
 
-		// Set initial button state
 		validateForm();
 
-		// Focus email input
 		setTimeout(() => emailInput.focus(), 100);
 	}
 
@@ -181,19 +174,16 @@ export class PreChatFormView {
 		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 = {};
 			}
@@ -202,13 +192,11 @@ export class PreChatFormView {
 
 			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';