@product7/product7-js 0.6.7 → 0.6.8

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@product7/product7-js",
-	"version": "0.6.7",
+	"version": "0.6.8",
 	"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

@@ -839,4 +839,163 @@
   opacity: 0.7;
   cursor: not-allowed;
 }
+
+/* ========================================
+   FEEDBACK FORM VIEW
+   ======================================== */
+
+.liveChat-feedback-view {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+
+.liveChat-feedback-header {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3);
+  padding: var(--spacing-4) var(--spacing-4);
+  border-bottom: 1px solid var(--border-color);
+  flex-shrink: 0;
+}
+
+.liveChat-feedback-title {
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-semibold);
+  color: var(--text-primary);
+}
+
+.liveChat-feedback-body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4);
+  padding: var(--spacing-5) var(--spacing-4);
+  flex: 1;
+  overflow-y: auto;
+}
+
+.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-thankyou {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  padding: var(--spacing-6) var(--spacing-4);
+  text-align: center;
+  gap: var(--spacing-3);
+}
+
+.liveChat-feedback-thankyou-emoji {
+  font-size: 48px;
+  line-height: 1;
+}
+
+.liveChat-feedback-thankyou h3 {
+  margin: 0;
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-semibold);
+  color: var(--text-primary);
+}
+
+.liveChat-feedback-thankyou p {
+  margin: 0;
+  font-size: var(--font-size-sm);
+  color: var(--text-secondary);
+}
+
+.liveChat-feedback-done-btn {
+  margin-top: var(--spacing-2);
+  padding: var(--spacing-2) var(--spacing-5);
+  border-radius: var(--radius-md);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  font-family: inherit;
+  cursor: pointer;
+  border: 1px solid var(--border-color);
+  background: transparent;
+  color: var(--text-primary);
+  transition: all var(--transition-fast);
+}
+
+.liveChat-feedback-done-btn:hover {
+  background: var(--bg-secondary);
+}
 `;

package/src/styles/liveChat-core.js

@@ -1,5 +1,9 @@
 export const liveChatCoreStyles = `
 
+.liveChat-widget * {
+  font-weight: 500;
+}
+
 .liveChat-launcher {
   position: fixed;
   z-index: var(--z-modal);

package/src/widgets/LiveChatWidget.js

@@ -13,6 +13,7 @@ import { ChatView } from './liveChat/views/ChatView.js';
 import { ConversationsView } from './liveChat/views/ConversationsView.js';
 import { HelpView } from './liveChat/views/HelpView.js';
 import { HomeView } from './liveChat/views/HomeView.js';
+import { FeedbackFormView } from './liveChat/views/FeedbackFormView.js';
 import { PreChatFormView } from './liveChat/views/PreChatFormView.js';
 
 export class LiveChatWidget extends BaseWidget {
@@ -208,6 +209,7 @@ export class LiveChatWidget extends BaseWidget {
 		this.panel.registerView('messages', ConversationsView);
 		this.panel.registerView('chat', ChatView);
 		this.panel.registerView('prechat', PreChatFormView);
+		this.panel.registerView('feedback', FeedbackFormView);
 		this.panel.registerView('help', HelpView);
 		this.panel.registerView('changelog', ChangelogView);
 

package/src/widgets/liveChat/components/LiveChatPanel.js

@@ -95,11 +95,12 @@ export class LiveChatPanel {
 			</div>`;
 		}
 
-		// Hide nav in chat and prechat views
+		// Hide nav in chat, prechat and feedback views
 		if (navContainer) {
 			const hideNav =
 				this.state.currentView === 'chat' ||
-				this.state.currentView === 'prechat';
+				this.state.currentView === 'prechat' ||
+				this.state.currentView === 'feedback';
 			navContainer.style.display = hideNav ? 'none' : '';
 		}
 	}

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

@@ -0,0 +1,104 @@
+export class FeedbackFormView {
+	constructor(state, options = {}) {
+		this.state = state;
+		this.options = options;
+		this.element = null;
+		this._isSubmitting = false;
+		this._selectedRating = null;
+	}
+
+	render() {
+		this.element = document.createElement('div');
+		this.element.className = 'liveChat-view liveChat-feedback-view';
+		this._renderForm();
+		return this.element;
+	}
+
+	_renderForm() {
+		this.element.innerHTML = `
+			<div class="liveChat-feedback-header">
+				<button class="sdk-btn-icon liveChat-feedback-back-btn">
+					<iconify-icon icon="ph:arrow-left" width="20" height="20"></iconify-icon>
+				</button>
+				<span class="liveChat-feedback-title">Leave us feedback</span>
+			</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>
+				<button class="liveChat-feedback-submit">Send feedback</button>
+			</div>
+		`;
+		this._attachEvents();
+	}
+
+	_renderThankYou() {
+		this.element.innerHTML = `
+			<div class="liveChat-feedback-header">
+				<button class="sdk-btn-icon liveChat-feedback-back-btn">
+					<iconify-icon icon="ph:arrow-left" width="20" height="20"></iconify-icon>
+				</button>
+				<span class="liveChat-feedback-title">Leave us feedback</span>
+			</div>
+			<div class="liveChat-feedback-thankyou">
+				<span class="liveChat-feedback-thankyou-emoji">🙏</span>
+				<h3>Thanks for your feedback!</h3>
+				<p>We appreciate you taking the time to share your thoughts.</p>
+				<button class="liveChat-feedback-done-btn">Done</button>
+			</div>
+		`;
+		this.element.querySelector('.liveChat-feedback-back-btn').addEventListener('click', () => {
+			this.state.setView('home');
+		});
+		this.element.querySelector('.liveChat-feedback-done-btn').addEventListener('click', () => {
+			this.state.setView('home');
+		});
+	}
+
+	_attachEvents() {
+		this.element.querySelector('.liveChat-feedback-back-btn').addEventListener('click', () => {
+			this.state.setView('home');
+		});
+
+		const submitBtn = this.element.querySelector('.liveChat-feedback-submit');
+		submitBtn.addEventListener('click', async () => {
+			if (this._isSubmitting) return;
+			const title = this.element.querySelector('.liveChat-feedback-input').value.trim();
+			const message = this.element.querySelector('.liveChat-feedback-textarea').value.trim();
+			await this._submit(title, message);
+		});
+	}
+
+	async _submit(title, message) {
+		this._isSubmitting = true;
+		const submitBtn = this.element.querySelector('.liveChat-feedback-submit');
+		if (submitBtn) {
+			submitBtn.disabled = true;
+			submitBtn.textContent = 'Sending...';
+		}
+
+		try {
+			if (this.options.onSubmitFeedback) {
+				await this.options.onSubmitFeedback({ title, message });
+			}
+		} catch (e) {
+			console.warn('[FeedbackFormView] Submit error:', e);
+		}
+
+		this._renderThankYou();
+	}
+
+	destroy() {
+		if (this.element && this.element.parentNode) {
+			this.element.parentNode.removeChild(this.element);
+		}
+	}
+}

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

@@ -136,8 +136,11 @@
 		const sendIcon = `<iconify-icon icon="ph:paper-plane-right" width="20" height="20" style="flex-shrink: 0;"></iconify-icon>`;
 		const caretIcon = `<iconify-icon icon="ph:caret-right" width="20" height="20" style="flex-shrink: 0;"></iconify-icon>`;
 
-		const responseTime =
-			this.state.responseTime || 'We typically reply within a few minutes';
+		const isUnavailable = this.state.businessHoursState === 'offline' || this.state.businessHoursState === 'away';
+		const buttonLabel = isUnavailable ? 'Leave us a message' : this.state.startButtonText;
+		const buttonSubtext = isUnavailable
+			? "We'll get back to you when we're back"
+			: (this.state.responseTime || 'We typically reply within a few minutes');
 
 		const recentCardHtml = openConversation
 			? this._renderRecentMessageCard(openConversation)
@@ -147,8 +150,8 @@
 			${recentCardHtml}
 			<button class="liveChat-home-message-btn">
 				<div class="liveChat-home-continue-info">
-					<span class="liveChat-home-continue-label">${this.state.startButtonText}</span>
-					<span class="liveChat-home-message-subtext">${responseTime}</span>
+					<span class="liveChat-home-continue-label">${buttonLabel}</span>
+					<span class="liveChat-home-message-subtext">${buttonSubtext}</span>
 				</div>
 				${sendIcon}
 			</button>
@@ -312,12 +315,7 @@
 		const feedbackBtn = this.element.querySelector('.liveChat-feedback-btn');
 		if (feedbackBtn) {
 			feedbackBtn.addEventListener('click', () => {
-				if (this.options.onFeedbackClick) {
-					this.state.setOpen(false);
-					this.options.onFeedbackClick();
-				} else if (this.state.urls?.feedback) {
-					window.open(this.state.urls.feedback, '_blank');
-				}
+				this.state.setView('feedback');
 			});
 		}