@product7/product7-js 0.4.5 → 0.4.7

package/dist/product7-js.js

@@ -4212,19 +4212,51 @@
   line-height: var(--line-height-relaxed);
 }
 
-.messenger-prechat-actions {
+.messenger-prechat-form {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-2);
 }
 
-.messenger-prechat-yes,
-.messenger-prechat-no {
+.messenger-prechat-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+}
+
+.messenger-prechat-input {
+  width: 100%;
+  padding: var(--spacing-2) var(--spacing-3);
+  border: 1px solid var(--msg-border);
+  border-radius: var(--radius-md);
+  font-size: var(--font-size-sm);
+  font-family: inherit;
+  background: var(--msg-bg-surface);
+  color: var(--msg-text);
+  outline: none;
+  transition: border-color var(--transition-fast);
+  box-sizing: border-box;
+}
+
+.messenger-prechat-input::placeholder {
+  color: var(--msg-text-secondary);
+}
+
+.messenger-prechat-input:focus {
+  border-color: var(--color-primary);
+}
+
+.messenger-prechat-error {
+  font-size: var(--font-size-xs);
+  color: #dc2626;
+}
+
+.messenger-prechat-submit {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: var(--spacing-2);
-  padding: var(--spacing-3) var(--spacing-4);
+  padding: var(--spacing-2) var(--spacing-3);
   border-radius: var(--radius-md);
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-medium);
@@ -4233,42 +4265,24 @@
   transition: all var(--transition-fast);
   border: none;
   width: 100%;
-}
-
-.messenger-prechat-yes {
   background: var(--color-primary);
   color: #ffffff;
+  margin-top: var(--spacing-1);
 }
 
-.messenger-prechat-yes:hover {
+.messenger-prechat-submit:hover {
   background: var(--color-primary-hover);
 }
 
-.messenger-prechat-yes:active {
+.messenger-prechat-submit:active {
   transform: translateY(1px);
   transition-duration: 100ms;
 }
 
-.messenger-prechat-yes:disabled {
+.messenger-prechat-submit:disabled {
   opacity: 0.7;
   cursor: not-allowed;
 }
-
-.messenger-prechat-no {
-  background: var(--msg-bg-surface);
-  color: var(--msg-text-secondary);
-  border: 1px solid var(--msg-border);
-}
-
-.messenger-prechat-no:hover {
-  background: var(--msg-bg-hover);
-  color: var(--msg-text);
-}
-
-.messenger-prechat-no:active {
-  transform: translateY(1px);
-  transition-duration: 100ms;
-}
 `;
 
 	const messengerCoreStyles = `
@@ -11202,9 +11216,7 @@
 		render() {
 			this.element = document.createElement('div');
 			this.element.className = 'messenger-view messenger-prechat-view';
-
 			this._updateContent();
-
 			return this.element;
 		}
 
@@ -11213,20 +11225,35 @@
 			<div class="messenger-prechat-overlay">
 				<div class="messenger-prechat-card">
 					<div class="messenger-prechat-icon">
-						<iconify-icon icon="ph:bell-ringing-duotone" width="36" height="36"></iconify-icon>
+						<iconify-icon icon="ph:chat-teardrop-dots-duotone" width="36" height="36"></iconify-icon>
 					</div>
-					<h4 class="messenger-prechat-title">Get notified when we reply</h4>
-					<p class="messenger-prechat-subtitle">We'll send you an email so you never miss a response.</p>
-					<div class="messenger-prechat-actions">
-						<button type="button" class="messenger-prechat-yes">
-							<iconify-icon icon="ph:bell-ringing-duotone" width="16" height="16"></iconify-icon>
-							Yes, notify me
-						</button>
-						<button type="button" class="messenger-prechat-no">
-							<iconify-icon icon="ph:bell-slash-duotone" width="16" height="16"></iconify-icon>
-							No thanks
+					<h4 class="messenger-prechat-title">Before we continue</h4>
+					<p class="messenger-prechat-subtitle">Enter your details so we can get back to you.</p>
+					<form class="messenger-prechat-form" novalidate>
+						<div class="messenger-prechat-field">
+							<input
+								type="text"
+								name="name"
+								class="messenger-prechat-input"
+								placeholder="Your name"
+								autocomplete="name"
+							/>
+						</div>
+						<div class="messenger-prechat-field">
+							<input
+								type="email"
+								name="email"
+								class="messenger-prechat-input"
+								placeholder="Your email address"
+								autocomplete="email"
+								required
+							/>
+							<span class="messenger-prechat-error" style="display:none;"></span>
+						</div>
+						<button type="submit" class="messenger-prechat-submit">
+							Start chat
 						</button>
-					</div>
+					</form>
 				</div>
 			</div>
 		`;
@@ -11235,35 +11262,45 @@
 		}
 
 		_attachEvents() {
-			this.element
-				.querySelector('.messenger-prechat-yes')
-				.addEventListener('click', async () => {
-					await this._handleYes();
-				});
-
-			this.element
-				.querySelector('.messenger-prechat-no')
-				.addEventListener('click', () => {
-					this._handleNo();
-				});
+			const form = this.element.querySelector('.messenger-prechat-form');
+			form.addEventListener('submit', async (e) => {
+				e.preventDefault();
+				await this._handleSubmit();
+			});
 		}
 
-		async _handleYes() {
+		async _handleSubmit() {
 			if (this._isSubmitting) return;
-			this._isSubmitting = true;
 
-			const yesBtn = this.element.querySelector('.messenger-prechat-yes');
-			yesBtn.disabled = true;
-			yesBtn.innerHTML = `
+			const emailInput = this.element.querySelector('input[name="email"]');
+			const nameInput = this.element.querySelector('input[name="name"]');
+			const errorEl = this.element.querySelector('.messenger-prechat-error');
+			const submitBtn = this.element.querySelector('.messenger-prechat-submit');
+
+			const email = emailInput.value.trim();
+			const name = nameInput.value.trim();
+
+			if (!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+				errorEl.textContent = 'Please enter a valid email address.';
+				errorEl.style.display = 'block';
+				emailInput.focus();
+				return;
+			}
+
+			errorEl.style.display = 'none';
+			this._isSubmitting = true;
+			submitBtn.disabled = true;
+			submitBtn.innerHTML = `
 			<iconify-icon icon="ph:circle-notch" width="16" height="16" style="animation: spin 0.8s linear infinite;"></iconify-icon>
 			Just a moment...
 		`;
 
 			try {
-				const { name, email } = this.state.metadata || {};
-
 				if (this.options.onIdentifyContact) {
-					await this.options.onIdentifyContact({ name, email });
+					await this.options.onIdentifyContact({
+						name: name || undefined,
+						email,
+					});
 				}
 
 				this.state.setIdentified(true, { name, email });
@@ -11281,19 +11318,14 @@
 				}
 			} catch (error) {
 				console.error('[PreChatFormView] Error:', error);
+				errorEl.textContent = 'Something went wrong. Please try again.';
+				errorEl.style.display = 'block';
 				this._isSubmitting = false;
-				yesBtn.disabled = false;
-				yesBtn.innerHTML = `
-				<iconify-icon icon="ph:bell-ringing-duotone" width="16" height="16"></iconify-icon>
-				Yes, notify me
-			`;
+				submitBtn.disabled = false;
+				submitBtn.textContent = 'Start chat';
 			}
 		}
 
-		_handleNo() {
-			this.state.setView('chat');
-		}
-
 		destroy() {
 			if (this.element && this.element.parentNode) {
 				this.element.parentNode.removeChild(this.element);
@@ -11357,6 +11389,8 @@
 				onChangelogClick: options.onChangelogClick || null,
 			};
 
+			const sdkMetadata = this.sdk?.apiService?.getMetadata() || null;
+
 			this.messengerState = new MessengerState({
 				teamName: this.messengerOptions.teamName,
 				teamAvatars: this.messengerOptions.teamAvatars,
@@ -11366,7 +11400,7 @@
 				responseTime: this.messengerOptions.responseTime,
 				enableHelp: this.messengerOptions.enableHelp,
 				enableChangelog: this.messengerOptions.enableChangelog,
-				metadata: this.sdk?.apiService?.getMetadata() || null,
+				metadata: sdkMetadata,
 				urls: {
 					feedback: this.messengerOptions.feedbackUrl,
 					changelog: this.messengerOptions.changelogUrl,
@@ -11375,6 +11409,11 @@
 				},
 			});
 
+			// If identify() was called before this widget was created, pre-seed identity
+			if (this.sdk?.identified && sdkMetadata) {
+				this.messengerState.isIdentified = true;
+			}
+
 			this.launcher = null;
 			this.panel = null;
 			this.wsService = null;