@product7/product7-js 0.4.5 → 0.4.6

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@product7/product7-js",
-	"version": "0.4.5",
+	"version": "0.4.6",
 	"description": "JavaScript SDK for integrating Product7 feedback widgets into any website",
 	"main": "dist/product7-js.js",
 	"module": "src/index.js",

package/src/styles/messenger-components.js

@@ -768,14 +768,46 @@ export const messengerComponentsStyles = `
   line-height: var(--line-height-relaxed);
 }
 
-.messenger-prechat-actions {
+.messenger-prechat-form {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-2);
+  gap: var(--spacing-3);
 }
 
-.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-3) var(--spacing-4);
+  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;
@@ -789,40 +821,22 @@ export const messengerComponentsStyles = `
   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;
-}
 `;

package/src/widgets/MessengerWidget.js

@@ -71,6 +71,8 @@ export class MessengerWidget extends BaseWidget {
 			onChangelogClick: options.onChangelogClick || null,
 		};
 
+		const sdkMetadata = this.sdk?.apiService?.getMetadata() || null;
+
 		this.messengerState = new MessengerState({
 			teamName: this.messengerOptions.teamName,
 			teamAvatars: this.messengerOptions.teamAvatars,
@@ -80,7 +82,7 @@ export class MessengerWidget extends BaseWidget {
 			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,
@@ -89,6 +91,11 @@ export class MessengerWidget extends BaseWidget {
 			},
 		});
 
+		// 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;

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

@@ -9,9 +9,7 @@ export class PreChatFormView {
 	render() {
 		this.element = document.createElement('div');
 		this.element.className = 'messenger-view messenger-prechat-view';
-
 		this._updateContent();
-
 		return this.element;
 	}
 
@@ -20,20 +18,35 @@ export class PreChatFormView {
 			<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
+					<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>
-						<button type="button" class="messenger-prechat-no">
-							<iconify-icon icon="ph:bell-slash-duotone" width="16" height="16"></iconify-icon>
-							No thanks
-						</button>
-					</div>
+					</form>
 				</div>
 			</div>
 		`;
@@ -42,35 +55,45 @@ export class PreChatFormView {
 	}
 
 	_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 });
@@ -88,19 +111,14 @@ export class PreChatFormView {
 			}
 		} 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);