@product7/product7-js 0.6.7 → 0.6.8

package/dist/product7-js.js

@@ -4282,10 +4282,173 @@
   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);
+}
 `;
 
 	const liveChatCoreStyles = `
 
+.liveChat-widget * {
+  font-weight: 500;
+}
+
 .liveChat-launcher {
   position: fixed;
   z-index: var(--z-modal);
@@ -9490,11 +9653,12 @@
 			</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' : '';
 			}
 		}
@@ -11232,8 +11396,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)
@@ -11243,8 +11410,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>
@@ -11408,12 +11575,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');
 				});
 			}
 
@@ -11467,6 +11629,111 @@
 		}
 	}
 
+	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);
+			}
+		}
+	}
+
 	class PreChatFormView {
 		constructor(state, options = {}) {
 			this.state = state;
@@ -11785,6 +12052,7 @@
 			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);