@product7/product7-js 0.4.4 → 0.4.6

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@product7/product7-js",
-	"version": "0.4.4",
+	"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/core/BaseAPIService.js

@@ -115,6 +115,7 @@ export class BaseAPIService {
 			return {
 				sessionToken: this.sessionToken,
 				config: initData.config,
+				widgets: initData.widgets,
 				expiresIn: initData.expiresIn,
 				status: initData.status,
 				message: initData.message,
@@ -135,8 +136,23 @@ export class BaseAPIService {
 				? response.data
 				: response || {};
 
-		const sessionToken = payload.session_token || payload.sessionToken;
-		const expiresIn = Number(payload.expires_in ?? payload.expiresIn);
+		const configData =
+			payload.config && typeof payload.config === 'object'
+				? payload.config
+				: {};
+
+		const sessionToken =
+			payload.session_token ||
+			payload.sessionToken ||
+			configData.session_token ||
+			configData.sessionToken;
+
+		const expiresIn = Number(
+			payload.expires_in ??
+				payload.expiresIn ??
+				configData.expires_in ??
+				configData.expiresIn
+		);
 
 		if (!sessionToken) {
 			throw new APIError(500, 'Invalid init response: missing session_token');
@@ -149,11 +165,17 @@ export class BaseAPIService {
 		return {
 			sessionToken,
 			expiresIn,
-			config:
-				payload.config && typeof payload.config === 'object'
-					? payload.config
-					: {},
-			configVersion: payload.config_version ?? payload.configVersion ?? null,
+			config: configData,
+			widgets:
+				payload.widgets && typeof payload.widgets === 'object'
+					? payload.widgets
+					: null,
+			configVersion:
+				configData.config_version ??
+				configData.configVersion ??
+				payload.config_version ??
+				payload.configVersion ??
+				null,
 			status: response?.status ?? payload?.status ?? true,
 			message: response?.message ?? payload?.message ?? null,
 		};

package/src/core/Product7.js

@@ -56,8 +56,12 @@ export class Product7 {
 		try {
 			const initData = await this.apiService.init();
 
-			if (initData.config) {
-				this.config = deepMerge(initData.config, this.config);
+			const serverConfig = initData.config ? { ...initData.config } : {};
+			if (initData.widgets) {
+				serverConfig.widgets = initData.widgets;
+			}
+			if (Object.keys(serverConfig).length > 0) {
+				this.config = deepMerge(serverConfig, this.config);
 			}
 
 			this.initialized = true;
@@ -218,6 +222,8 @@ export class Product7 {
 				surveyConfig.showDescription ?? surveyConfig.show_description,
 			customQuestions: surveyConfig.customQuestions || surveyConfig.questions,
 			pages: surveyConfig.pages,
+			thankYouConfig:
+				surveyConfig.thankYouConfig || surveyConfig.thank_you_config || null,
 			enabled: surveyConfig.enabled,
 			...displayOptions,
 		});

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);