@product7/product7-js 0.7.0 → 0.7.3

package/dist/product7-js.js

@@ -1464,10 +1464,10 @@
 		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;
@@ -4333,87 +4333,26 @@
 .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;
+  margin-top: calc(var(--spacing-2) * -1);
 }
 
 .liveChat-feedback-thankyou {
@@ -4427,9 +4366,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 {
@@ -11656,7 +11601,6 @@
 			this.options = options;
 			this.element = null;
 			this._isSubmitting = false;
-			this._selectedRating = null;
 		}
 
 		render() {
@@ -11676,17 +11620,23 @@
 			</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 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="sdk-btn-primary sdk-btn-block liveChat-feedback-submit">Send feedback</button>
 			</div>
 		`;
 			this._attachEvents();
@@ -11701,9 +11651,13 @@
 				<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>
 		`;
@@ -11729,7 +11683,36 @@
 			});
 		}
 
+		_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) {
@@ -11741,11 +11724,16 @@
 				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() {
@@ -12013,6 +12001,24 @@
 			}
 		}
 
+		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}`;
@@ -12065,6 +12071,7 @@
 				onFeedbackClick:
 					this.liveChatOptions.onFeedbackClick ||
 					(this._feedbackWidget ? () => this._feedbackWidget.open() : null),
+				onSubmitFeedback: this._handleSubmitFeedback.bind(this),
 				onArticleClick: this.liveChatOptions.onArticleClick,
 				onChangelogClick: this.liveChatOptions.onChangelogClick,
 			});