@product7/feedback-sdk 1.0.5 → 1.0.7

package/src/widgets/BaseWidget.js

@@ -11,12 +11,14 @@ export class BaseWidget {
 			theme: this.sdk.config.theme,
 			boardId: this.sdk.config.boardId,
 			autoShow: false,
+			showBackdrop: true,
 			customStyles: {},
 			...options,
 		};
 
 		this.element = null;
-		this.modalElement = null;
+		this.panelElement = null;
+		this.backdropElement = null;
 		this.mounted = false;
 		this.destroyed = false;
 
@@ -74,23 +76,47 @@ export class BaseWidget {
 		return this;
 	}
 
-	openModal() {
+	openPanel() {
 		this.state.isOpen = true;
-		this._renderModal();
+		this._renderPanel();
+		
+		requestAnimationFrame(() => {
+			if (this.panelElement) {
+				this.panelElement.classList.add('open');
+			}
+			if (this.backdropElement) {
+				this.backdropElement.classList.add('show');
+			}
+		});
 	}
 
-	closeModal() {
-		this.state.isOpen = false;
-		if (this.modalElement) {
-			this.modalElement.remove();
-			this.modalElement = null;
+	closePanel() {
+		if (this.panelElement) {
+			this.panelElement.classList.remove('open');
 		}
-		this._resetForm();
+		if (this.backdropElement) {
+			this.backdropElement.classList.remove('show');
+		}
+
+		setTimeout(() => {
+			this.state.isOpen = false;
+			if (this.panelElement && this.panelElement.parentNode) {
+				this.panelElement.parentNode.removeChild(this.panelElement);
+				this.panelElement = null;
+			}
+			if (this.backdropElement && this.backdropElement.parentNode) {
+				this.backdropElement.parentNode.removeChild(this.backdropElement);
+				this.backdropElement = null;
+			}
+			this._resetForm();
+		}, 300);
 	}
 
 	async submitFeedback() {
 		if (this.state.isSubmitting) return;
 
+		this._hideError();
+
 		try {
 			this.state.isSubmitting = true;
 			this._updateSubmitButton();
@@ -111,7 +137,7 @@ export class BaseWidget {
 			const response = await this.apiService.submitFeedback(payload);
 
 			this._showSuccessMessage();
-			this.closeModal();
+			this.closePanel();
 
 			this.sdk.eventBus.emit('feedback:submitted', {
 				widget: this,
@@ -137,7 +163,7 @@ export class BaseWidget {
 		if (this.destroyed) return;
 
 		this.onDestroy();
-		this.closeModal();
+		this.closePanel();
 
 		if (this.element && this.element.parentNode) {
 			this.element.parentNode.removeChild(this.element);
@@ -160,38 +186,46 @@ export class BaseWidget {
 	}
 
 	_bindMethods() {
-		this.openModal = this.openModal.bind(this);
-		this.closeModal = this.closeModal.bind(this);
+		this.openPanel = this.openPanel.bind(this);
+		this.closePanel = this.closePanel.bind(this);
 		this.submitFeedback = this.submitFeedback.bind(this);
 	}
 
-	_renderModal() {
-		if (this.modalElement) return;
+	_renderPanel() {
+		if (this.panelElement) return;
+
+		if (this.options.showBackdrop) {
+			this.backdropElement = document.createElement('div');
+			this.backdropElement.className = 'feedback-panel-backdrop';
+			document.body.appendChild(this.backdropElement);
+
+			this.backdropElement.addEventListener('click', this.closePanel);
+		}
 
-		this.modalElement = document.createElement('div');
-		this.modalElement.className = `feedback-modal theme-${this.options.theme}`;
-		this.modalElement.innerHTML = this._getModalHTML();
+		this.panelElement = document.createElement('div');
+		this.panelElement.className = `feedback-panel theme-${this.options.theme}`;
+		this.panelElement.innerHTML = this._getPanelHTML();
 
-		document.body.appendChild(this.modalElement);
-		this._attachModalEvents();
+		document.body.appendChild(this.panelElement);
+		this._attachPanelEvents();
 
-		const firstInput = this.modalElement.querySelector('input, textarea');
+		const firstInput = this.panelElement.querySelector('input, textarea');
 		if (firstInput) {
-			setTimeout(() => firstInput.focus(), 100);
+			setTimeout(() => firstInput.focus(), 350);
 		}
 	}
 
-	_getModalHTML() {
+	_getPanelHTML() {
 		return `
-      <div class="feedback-modal-overlay">
-        <div class="feedback-modal-content">
-          <div class="feedback-modal-header">
-            <h3>Send Feedback</h3>
-            <button class="feedback-modal-close" type="button">&times;</button>
-          </div>
+      <div class="feedback-panel-content">
+        <div class="feedback-panel-header">
+          <h3>Send Feedback</h3>
+          <button class="feedback-panel-close" type="button" aria-label="Close">&times;</button>
+        </div>
+        <div class="feedback-panel-body">
           <form class="feedback-form">
             <div class="feedback-form-group">
-              <label for="feedback-title-${this.id}">Title</label>
+              <label for="feedback-title-${this.id}">Title (optional)</label>
               <input 
                 type="text" 
                 id="feedback-title-${this.id}" 
@@ -205,62 +239,59 @@ export class BaseWidget {
               <textarea 
                 id="feedback-content-${this.id}" 
                 name="content" 
-                placeholder="Tell us more about your feedback..."
+                placeholder="Tell us what you think..."
                 required
               >${this.state.content}</textarea>
             </div>
+            <div class="feedback-error" role="alert"></div>
             <div class="feedback-form-actions">
-              <button type="button" class="feedback-btn feedback-btn-cancel">Cancel</button>
               <button type="submit" class="feedback-btn feedback-btn-submit">
                 ${this.state.isSubmitting ? 'Sending...' : 'Send Feedback'}
               </button>
             </div>
-            <div class="feedback-error" style="display: none;"></div>
           </form>
         </div>
       </div>
     `;
 	}
 
-	_attachModalEvents() {
-		const modal = this.modalElement;
-
-		modal
-			.querySelector('.feedback-modal-close')
-			.addEventListener('click', this.closeModal);
-		modal
-			.querySelector('.feedback-btn-cancel')
-			.addEventListener('click', this.closeModal);
-		modal
-			.querySelector('.feedback-modal-overlay')
-			.addEventListener('click', (e) => {
-				if (e.target === e.currentTarget) {
-					this.closeModal();
-				}
-			});
+	_attachPanelEvents() {
+		const panel = this.panelElement;
 
-		const form = modal.querySelector('.feedback-form');
+		panel
+			.querySelector('.feedback-panel-close')
+			.addEventListener('click', this.closePanel);
+
+		const form = panel.querySelector('.feedback-form');
 		form.addEventListener('submit', (e) => {
 			e.preventDefault();
 			this.submitFeedback();
 		});
 
-		modal
+		panel
 			.querySelector('input[name="title"]')
 			.addEventListener('input', (e) => {
 				this.state.title = e.target.value;
 			});
 
-		modal
+		panel
 			.querySelector('textarea[name="content"]')
 			.addEventListener('input', (e) => {
 				this.state.content = e.target.value;
 			});
+
+		const handleEscape = (e) => {
+			if (e.key === 'Escape') {
+				this.closePanel();
+				document.removeEventListener('keydown', handleEscape);
+			}
+		};
+		document.addEventListener('keydown', handleEscape);
 	}
 
 	_updateSubmitButton() {
-		if (this.modalElement) {
-			const submitBtn = this.modalElement.querySelector('.feedback-btn-submit');
+		if (this.panelElement) {
+			const submitBtn = this.panelElement.querySelector('.feedback-btn-submit');
 			if (submitBtn) {
 				submitBtn.textContent = this.state.isSubmitting
 					? 'Sending...'
@@ -271,15 +302,21 @@ export class BaseWidget {
 	}
 
 	_showError(message) {
-		if (this.modalElement) {
-			const errorElement = this.modalElement.querySelector('.feedback-error');
-			errorElement.textContent = message;
-			errorElement.style.display = 'block';
-			setTimeout(() => {
-				if (errorElement) {
-					errorElement.style.display = 'none';
-				}
-			}, 5000);
+		if (this.panelElement) {
+			const errorElement = this.panelElement.querySelector('.feedback-error');
+			if (errorElement) {
+				errorElement.textContent = message;
+				errorElement.classList.add('show');
+			}
+		}
+	}
+
+	_hideError() {
+		if (this.panelElement) {
+			const errorElement = this.panelElement.querySelector('.feedback-error');
+			if (errorElement) {
+				errorElement.classList.remove('show');
+			}
 		}
 	}
 
@@ -288,26 +325,29 @@ export class BaseWidget {
 		notification.className = 'feedback-success-notification';
 		notification.innerHTML = `
       <div class="feedback-success-content">
-        <span>✓ Feedback submitted successfully!</span>
-        <button class="feedback-success-close">&times;</button>
+        <div class="feedback-success-icon">✓</div>
+        <span>Feedback submitted successfully!</span>
+        <button class="feedback-success-close" aria-label="Close">&times;</button>
       </div>
     `;
 
 		document.body.appendChild(notification);
 
-		setTimeout(() => {
+		const closeBtn = notification.querySelector('.feedback-success-close');
+		const closeNotification = () => {
 			if (notification.parentNode) {
-				notification.parentNode.removeChild(notification);
+				notification.style.opacity = '0';
+				setTimeout(() => {
+					if (notification.parentNode) {
+						notification.parentNode.removeChild(notification);
+					}
+				}, 300);
 			}
-		}, 3000);
-
-		notification
-			.querySelector('.feedback-success-close')
-			.addEventListener('click', () => {
-				if (notification.parentNode) {
-					notification.parentNode.removeChild(notification);
-				}
-			});
+		};
+
+		closeBtn.addEventListener('click', closeNotification);
+
+		setTimeout(closeNotification, 4000);
 	}
 
 	_resetForm() {
@@ -324,11 +364,19 @@ export class BaseWidget {
 				`theme-${this.options.theme}`
 			);
 		}
-		if (this.modalElement) {
-			this.modalElement.className = this.modalElement.className.replace(
+		if (this.panelElement) {
+			this.panelElement.className = this.panelElement.className.replace(
 				/theme-\w+/,
 				`theme-${this.options.theme}`
 			);
 		}
 	}
-}
+
+	openModal() {
+		this.openPanel();
+	}
+
+	closeModal() {
+		this.closePanel();
+	}
+}

package/src/widgets/ButtonWidget.js

@@ -27,7 +27,7 @@ export class ButtonWidget extends BaseWidget {
 
 	_attachEvents() {
 		const button = this.element.querySelector('.feedback-trigger-btn');
-		button.addEventListener('click', this.openModal);
+		button.addEventListener('click', this.openPanel);
 
 		button.addEventListener('mouseenter', () => {
 			if (!this.state.isSubmitting) {
@@ -59,4 +59,4 @@ export class ButtonWidget extends BaseWidget {
 			);
 		}
 	}
-}
+}