@product7/product7-js 0.1.0

package/src/widgets/InlineWidget.js

@@ -0,0 +1,148 @@
+import { BaseWidget } from './BaseWidget.js';
+
+export class InlineWidget extends BaseWidget {
+	constructor(options) {
+		super({ ...options, type: 'inline' });
+	}
+
+	_render() {
+		const widget = document.createElement('div');
+		widget.className = 'feedback-widget feedback-widget-inline';
+		widget.innerHTML = `
+      <div class="feedback-inline-content">
+        <h3>Send us your feedback</h3>
+        <form class="feedback-inline-form">
+          <div class="sdk-form-group">
+            <input 
+              type="text" 
+              name="title" 
+              class="sdk-input"
+              placeholder="Title (optional)"
+              value="${this.state.title}"
+            />
+          </div>
+          <div class="sdk-form-group">
+            <textarea 
+              name="content" 
+              class="sdk-textarea"
+              placeholder="Your feedback..."
+              required
+            >${this.state.content}</textarea>
+          </div>
+          <div class="sdk-form-group">
+            <input 
+              type="email" 
+              name="email" 
+              class="sdk-input"
+              placeholder="Email (optional)"
+              value="${this.state.email}"
+            />
+          </div>
+          <button type="submit" class="sdk-btn-primary sdk-btn-block">
+            Send Feedback
+          </button>
+          <div class="feedback-error"></div>
+        </form>
+      </div>
+    `;
+
+		if (this.options.customStyles) {
+			Object.assign(widget.style, this.options.customStyles);
+		}
+
+		return widget;
+	}
+
+	_attachEvents() {
+		const form = this.element.querySelector('.feedback-inline-form');
+
+		form.addEventListener('submit', (e) => {
+			e.preventDefault();
+			this.submitFeedback();
+		});
+
+		form.querySelector('input[name="title"]').addEventListener('input', (e) => {
+			this.state.title = e.target.value;
+		});
+
+		form
+			.querySelector('textarea[name="content"]')
+			.addEventListener('input', (e) => {
+				this.state.content = e.target.value;
+			});
+
+		form.querySelector('input[name="email"]').addEventListener('input', (e) => {
+			this.state.email = e.target.value;
+		});
+	}
+
+	openModal() {
+		const textarea = this.element.querySelector('textarea[name="content"]');
+		if (textarea) {
+			textarea.focus();
+		}
+	}
+
+	closeModal() {
+		// Inline widget doesn't use modal
+	}
+
+	_showSuccessMessage() {
+		const widget = this.element.querySelector('.feedback-inline-content');
+		const originalContent = widget.innerHTML;
+
+		widget.innerHTML = `
+      <div class="feedback-success">
+        <div class="sdk-notification-icon">✓</div>
+        <h3>Thank you!</h3>
+        <p>Your feedback has been submitted successfully.</p>
+        <button class="sdk-btn-primary">Send Another</button>
+      </div>
+    `;
+
+		const resetBtn = widget.querySelector('.sdk-btn-primary');
+		resetBtn.addEventListener('click', () => {
+			widget.innerHTML = originalContent;
+			this._attachEvents();
+			this._resetForm();
+		});
+	}
+
+	_showError(message) {
+		const errorElement = this.element.querySelector('.feedback-error');
+		if (errorElement) {
+			errorElement.textContent = message;
+			errorElement.classList.add('show');
+
+			setTimeout(() => {
+				if (errorElement) {
+					errorElement.classList.remove('show');
+				}
+			}, 5000);
+		}
+	}
+
+	_updateSubmitButton() {
+		const submitBtn = this.element.querySelector('.sdk-btn-primary');
+		if (submitBtn) {
+			submitBtn.textContent = this.state.isSubmitting
+				? 'Sending...'
+				: 'Send Feedback';
+			submitBtn.disabled = this.state.isSubmitting;
+		}
+	}
+
+	updateTitle(title) {
+		const titleElement = this.element?.querySelector('h3');
+		if (titleElement) {
+			titleElement.textContent = title;
+		}
+	}
+
+	setPlaceholder(field, placeholder) {
+		const input = this.element?.querySelector(`[name="${field}"]`);
+		if (input) {
+			input.placeholder = placeholder;
+		}
+	}
+}