@product7/product7-js 0.7.0 → 0.7.2

package/package.json

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

@@ -952,6 +952,12 @@
   cursor: not-allowed;
 }
 
+.liveChat-feedback-error {
+  font-size: var(--font-size-xs);
+  color: #ef4444;
+  margin-top: calc(var(--spacing-2) * -1);
+}
+
 .liveChat-feedback-thankyou {
   display: flex;
   flex-direction: column;
@@ -963,9 +969,15 @@
   gap: var(--spacing-3);
 }
 
-.liveChat-feedback-thankyou-emoji {
-  font-size: 48px;
-  line-height: 1;
+.liveChat-feedback-success-icon {
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  background: #037F0C;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: var(--spacing-2);
 }
 
 .liveChat-feedback-thankyou h3 {

package/src/utils/getIpInfo.js

@@ -4,10 +4,10 @@ export async function getIpInfo() {
 	if (_cached) return _cached;
 
 	try {
-		const res = await fetch('https://ipwho.is/');
+		const res = await fetch('https://ipapi.co/json/');
 		if (!res.ok) return null;
 		const data = await res.json();
-		if (data.success) {
+		if (data.ip) {
 			_cached = data;
 		}
 		return _cached;

package/src/widgets/LiveChatWidget.js

@@ -149,6 +149,24 @@ export class LiveChatWidget extends BaseWidget {
 		}
 	}
 
+	async _handleSubmitFeedback({ title, message }) {
+		const payload = {
+			title: title || 'Feedback',
+			content: message,
+			board_id:
+				this.liveChatOptions.feedbackBoardName || this.sdk.config.boardName,
+		};
+
+		const response = await this.apiService.submitFeedback(payload);
+
+		this.sdk.eventBus.emit('feedback:submitted', {
+			widget: this,
+			feedback: response,
+		});
+
+		return response;
+	}
+
 	_render() {
 		const container = document.createElement('div');
 		container.className = `liveChat-widget theme-${this.liveChatOptions.theme}`;
@@ -201,6 +219,7 @@ export class LiveChatWidget extends BaseWidget {
 			onFeedbackClick:
 				this.liveChatOptions.onFeedbackClick ||
 				(this._feedbackWidget ? () => this._feedbackWidget.open() : null),
+			onSubmitFeedback: this._handleSubmitFeedback.bind(this),
 			onArticleClick: this.liveChatOptions.onArticleClick,
 			onChangelogClick: this.liveChatOptions.onChangelogClick,
 		});

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

@@ -4,7 +4,6 @@ export class FeedbackFormView {
 		this.options = options;
 		this.element = null;
 		this._isSubmitting = false;
-		this._selectedRating = null;
 	}
 
 	render() {
@@ -34,6 +33,7 @@ export class FeedbackFormView {
 					placeholder="Your feedback..."
 					rows="5"
 				></textarea>
+				<span class="liveChat-feedback-error" style="display:none;"></span>
 				<button class="liveChat-feedback-submit">Send feedback</button>
 			</div>
 		`;
@@ -49,9 +49,13 @@ export class FeedbackFormView {
 				<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>
+				<div class="liveChat-feedback-success-icon">
+					<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="none" stroke="#ffffff" stroke-width="24" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 256 256">
+						<polyline points="216,72 96,192 40,136"/>
+					</svg>
+				</div>
+				<h3>Thank you!</h3>
+				<p>Your feedback has been submitted successfully.</p>
 				<button class="liveChat-feedback-done-btn">Done</button>
 			</div>
 		`;
@@ -77,7 +81,36 @@ export class FeedbackFormView {
 		});
 	}
 
+	_showError(text) {
+		const errorEl = this.element.querySelector('.liveChat-feedback-error');
+		if (errorEl) {
+			errorEl.textContent = text;
+			errorEl.style.display = 'block';
+		}
+	}
+
+	_hideError() {
+		const errorEl = this.element.querySelector('.liveChat-feedback-error');
+		if (errorEl) {
+			errorEl.style.display = 'none';
+		}
+	}
+
 	async _submit(title, message) {
+		this._hideError();
+
+		if (!title) {
+			this._showError('Please enter a title.');
+			this.element.querySelector('.liveChat-feedback-input').focus();
+			return;
+		}
+
+		if (!message) {
+			this._showError('Please enter your feedback message.');
+			this.element.querySelector('.liveChat-feedback-textarea').focus();
+			return;
+		}
+
 		this._isSubmitting = true;
 		const submitBtn = this.element.querySelector('.liveChat-feedback-submit');
 		if (submitBtn) {
@@ -89,11 +122,16 @@ export class FeedbackFormView {
 			if (this.options.onSubmitFeedback) {
 				await this.options.onSubmitFeedback({ title, message });
 			}
+			this._renderThankYou();
 		} catch (e) {
 			console.warn('[FeedbackFormView] Submit error:', e);
+			this._isSubmitting = false;
+			this._showError('Failed to submit feedback. Please try again.');
+			if (submitBtn) {
+				submitBtn.disabled = false;
+				submitBtn.textContent = 'Send feedback';
+			}
 		}
-
-		this._renderThankYou();
 	}
 
 	destroy() {