@product7/product7-js 0.7.2 → 0.7.5

package/package.json

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

package/src/styles/liveChat-components.js

@@ -869,89 +869,22 @@
 .liveChat-feedback-body {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-4);
+  gap: var(--spacing-3);
   padding: var(--spacing-5) var(--spacing-4);
   flex: 1;
   overflow-y: auto;
 }
 
+.liveChat-feedback-body .sdk-form-group {
+  margin-bottom: 0;
+}
+
 .liveChat-feedback-prompt {
   margin: 0;
   font-size: var(--font-size-sm);
   color: var(--text-secondary);
 }
 
-
-.liveChat-feedback-input {
-  width: 100%;
-  border: 1px solid var(--border-color);
-  border-radius: var(--radius-md);
-  padding: var(--spacing-3);
-  font-size: var(--font-size-sm);
-  font-family: inherit;
-  color: var(--text-primary);
-  background: var(--msg-bg);
-  box-sizing: border-box;
-  transition: border-color var(--transition-fast);
-}
-
-.liveChat-feedback-input::placeholder {
-  color: var(--msg-text-secondary);
-}
-
-.liveChat-feedback-input:focus {
-  outline: none;
-  border-color: var(--color-primary);
-}
-
-.liveChat-feedback-textarea {
-  width: 100%;
-  resize: none;
-  border: 1px solid var(--border-color);
-  border-radius: var(--radius-md);
-  padding: var(--spacing-3);
-  font-size: var(--font-size-sm);
-  font-family: inherit;
-  color: var(--text-primary);
-  background: var(--msg-bg);
-  box-sizing: border-box;
-  transition: border-color var(--transition-fast);
-}
-
-.liveChat-feedback-textarea::placeholder {
-  color: var(--msg-text-secondary);
-}
-
-.liveChat-feedback-textarea:focus {
-  outline: none;
-  border-color: var(--color-primary);
-}
-
-.liveChat-feedback-submit {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--spacing-3);
-  border-radius: var(--radius-md);
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-medium);
-  font-family: inherit;
-  cursor: pointer;
-  border: none;
-  background: var(--color-primary);
-  color: #ffffff;
-  transition: all var(--transition-fast);
-}
-
-.liveChat-feedback-submit:hover:not(:disabled) {
-  background: var(--color-primary-hover);
-}
-
-.liveChat-feedback-submit:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
 .liveChat-feedback-error {
   font-size: var(--font-size-xs);
   color: #ef4444;

package/src/widgets/LiveChatWidget.js

@@ -278,10 +278,7 @@ export class LiveChatWidget extends BaseWidget {
 
 	async _handleStartConversation(messageContent, pendingAttachments) {
 		try {
-			if (
-				this.LiveChatState.requireEmailBeforeChat &&
-				!this.LiveChatState.isIdentified
-			) {
+			if (!this.LiveChatState.isIdentified) {
 				this.LiveChatState.pendingMessage = {
 					content: messageContent,
 					attachments: pendingAttachments,
@@ -979,9 +976,15 @@ export class LiveChatWidget extends BaseWidget {
 				this.liveChatOptions.textColor = s.text_color;
 				stylesChanged = true;
 			}
-			if (s.theme && !this._hasExplicitOption('theme')) {
+			let themeChanged = false;
+			if (
+				s.theme &&
+				!this._hasExplicitOption('theme') &&
+				s.theme !== this.liveChatOptions.theme
+			) {
 				this.liveChatOptions.theme = s.theme;
 				stylesChanged = true;
+				themeChanged = true;
 			}
 			if (stylesChanged) {
 				applyliveChatCustomStyles({
@@ -991,6 +994,9 @@ export class LiveChatWidget extends BaseWidget {
 					theme: this.liveChatOptions.theme,
 				});
 			}
+			if (themeChanged && this._widgetContainer) {
+				this._widgetContainer.className = `liveChat-widget theme-${this.liveChatOptions.theme}`;
+			}
 
 			// Launcher position & padding
 			if (s.launcher_position && !this._hasExplicitOption('position')) {
@@ -1049,6 +1055,36 @@ export class LiveChatWidget extends BaseWidget {
 						this.LiveChatState.homeModuleEnabled !== false ? 'home' : 'help';
 				}
 			}
+			if (
+				typeof s.help_module_enabled === 'boolean' &&
+				!this._hasExplicitOption('enableHelp')
+			) {
+				this.LiveChatState.enableHelp = s.help_module_enabled;
+				if (
+					!s.help_module_enabled &&
+					this.LiveChatState.currentView === 'help'
+				) {
+					this.LiveChatState.currentView =
+						this.LiveChatState.homeModuleEnabled !== false
+							? 'home'
+							: 'messages';
+				}
+			}
+			if (
+				typeof s.changelog_module_enabled === 'boolean' &&
+				!this._hasExplicitOption('enableChangelog')
+			) {
+				this.LiveChatState.enableChangelog = s.changelog_module_enabled;
+				if (
+					!s.changelog_module_enabled &&
+					this.LiveChatState.currentView === 'changelog'
+				) {
+					this.LiveChatState.currentView =
+						this.LiveChatState.homeModuleEnabled !== false
+							? 'home'
+							: 'messages';
+				}
+			}
 
 			// Feature flags
 			if (
@@ -1066,6 +1102,12 @@ export class LiveChatWidget extends BaseWidget {
 			) {
 				this.LiveChatState.requireEmailBeforeChat = s.require_email_before_chat;
 			}
+			if (
+				typeof s.allow_anonymous_chat === 'boolean' &&
+				!this._hasExplicitOption('allowAnonymousChat')
+			) {
+				this.LiveChatState.allowAnonymousChat = s.allow_anonymous_chat;
+			}
 			if (
 				typeof s.allow_attachments === 'boolean' &&
 				!this._hasExplicitOption('allowAttachments')

package/src/widgets/liveChat/LiveChatState.js

@@ -31,6 +31,7 @@
 		this.messagesModuleEnabled = options.messagesModuleEnabled !== false;
 
 		this.requireEmailBeforeChat = options.requireEmailBeforeChat || false;
+		this.allowAnonymousChat = options.allowAnonymousChat !== false;
 		this.allowAttachments = options.allowAttachments !== false;
 		this.allowEmoji = options.allowEmoji !== false;
 		this.showReplyTime = options.showReplyTime !== false;

package/src/widgets/liveChat/views/FeedbackFormView.js

@@ -23,18 +23,23 @@ export class FeedbackFormView {
 			</div>
 			<div class="liveChat-feedback-body">
 				<p class="liveChat-feedback-prompt">Share your thoughts with us. We read every message.</p>
-				<input
-					type="text"
-					class="liveChat-feedback-input"
-					placeholder="Title"
-				/>
-				<textarea
-					class="liveChat-feedback-textarea"
-					placeholder="Your feedback..."
-					rows="5"
-				></textarea>
+				<div class="sdk-form-group">
+					<label class="sdk-label">Title <span class="sdk-required">*</span></label>
+					<input
+						type="text"
+						class="sdk-input liveChat-feedback-input"
+						placeholder="Brief description of your feedback"
+					/>
+				</div>
+				<div class="sdk-form-group">
+					<label class="sdk-label">Message <span class="sdk-required">*</span></label>
+					<textarea
+						class="sdk-textarea liveChat-feedback-textarea"
+						placeholder="Tell us what you think..."
+					></textarea>
+				</div>
 				<span class="liveChat-feedback-error" style="display:none;"></span>
-				<button class="liveChat-feedback-submit">Send feedback</button>
+				<button class="sdk-btn-primary sdk-btn-block liveChat-feedback-submit">Send feedback</button>
 			</div>
 		`;
 		this._attachEvents();

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

@@ -1,4 +1,4 @@
-export class PreChatFormView {
+export class PreChatFormView {
 	constructor(state, options = {}) {
 		this.state = state;
 		this.options = options;
@@ -13,20 +13,31 @@
 		return this.element;
 	}
 
+	_isNameRequired() {
+		return this.state.allowAnonymousChat === false;
+	}
+
 	_updateContent() {
+		const nameRequired = this._isNameRequired();
+		const namePlaceholder = nameRequired ? 'Your name' : 'Your name (optional)';
+		const subtitle = nameRequired
+			? 'Enter your name and email so we can get back to you.'
+			: 'Enter your email so we can get back to you.';
+
 		this.element.innerHTML = `
 			<div class="liveChat-prechat-overlay">
 				<div class="liveChat-prechat-card">
 					<h4 class="liveChat-prechat-title">Before we continue</h4>
-					<p class="liveChat-prechat-subtitle">Enter your details so we can get back to you.</p>
+					<p class="liveChat-prechat-subtitle">${subtitle}</p>
 					<form class="liveChat-prechat-form" novalidate>
 						<div class="liveChat-prechat-field">
 							<input
 								type="text"
 								name="name"
 								class="liveChat-prechat-input"
-								placeholder="Your name"
+								placeholder="${namePlaceholder}"
 								autocomplete="name"
+								${nameRequired ? 'required' : ''}
 							/>
 						</div>
 						<div class="liveChat-prechat-field">
@@ -38,8 +49,8 @@
 								autocomplete="email"
 								required
 							/>
-							<span class="liveChat-prechat-error" style="display:none;"></span>
 						</div>
+						<span class="liveChat-prechat-error" style="display:none;"></span>
 						<button type="submit" class="liveChat-prechat-submit">
 							Start chat
 						</button>
@@ -59,6 +70,15 @@
 		});
 	}
 
+	_validate(nameRequired, name, email) {
+		if (nameRequired && !name) return { msg: 'Please enter your name.', field: 'name' };
+		if (!email) return { msg: 'Please enter your email address.', field: 'email' };
+		if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+			return { msg: 'Please enter a valid email address.', field: 'email' };
+		}
+		return null;
+	}
+
 	async _handleSubmit() {
 		if (this._isSubmitting) return;
 
@@ -69,11 +89,13 @@
 
 		const email = emailInput.value.trim();
 		const name = nameInput.value.trim();
+		const nameRequired = this._isNameRequired();
 
-		if (!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
-			errorEl.textContent = 'Please enter a valid email address.';
+		const error = this._validate(nameRequired, name, email);
+		if (error) {
+			errorEl.textContent = error.msg;
 			errorEl.style.display = 'block';
-			emailInput.focus();
+			(error.field === 'name' ? nameInput : emailInput).focus();
 			return;
 		}
 
@@ -89,7 +111,7 @@
 			if (this.options.onIdentifyContact) {
 				await this.options.onIdentifyContact({
 					name: name || undefined,
-					email,
+					email: email || undefined,
 				});
 			}