@product7/feedback-sdk 1.3.3 → 1.3.4

package/src/styles/surveys.js

@@ -0,0 +1,354 @@
+export const surveyStyles = `
+.feedback-survey-container {
+  display: none;
+}
+
+.feedback-survey-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: var(--z-modal-backdrop);
+  animation: fadeIn var(--transition-slow);
+}
+
+.feedback-survey {
+  position: fixed;
+  z-index: var(--z-modal);
+  background: var(--color-white);
+  border-radius: var(--radius-2xl);
+  box-shadow: var(--shadow-2xl);
+  padding: var(--spacing-6);
+  min-width: 320px;
+  max-width: 400px;
+  font-family: inherit;
+}
+
+.feedback-survey-bottom-right {
+  bottom: var(--spacing-6);
+  right: var(--spacing-6);
+}
+
+.feedback-survey-bottom-left {
+  bottom: var(--spacing-6);
+  left: var(--spacing-6);
+}
+
+.feedback-survey-center {
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.feedback-survey-bottom {
+  bottom: 0;
+  left: 0;
+  right: 0;
+  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
+  max-width: none;
+}
+
+.feedback-survey-close {
+  position: absolute;
+  top: var(--spacing-3);
+  right: var(--spacing-3);
+  background: none;
+  border: none;
+  font-size: 20px;
+  cursor: pointer;
+  color: var(--color-neutral-500);
+  line-height: 1;
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-sm);
+  transition: all var(--transition-base);
+}
+
+.feedback-survey-close:hover {
+  background: var(--color-neutral-100);
+  color: var(--color-neutral-900);
+}
+
+.feedback-survey-title {
+  margin: 0 0 var(--spacing-2) 0;
+  font-size: var(--font-size-xl);
+  font-weight: var(--font-weight-semibold);
+  padding-right: var(--spacing-6);
+  color: var(--color-text-primary);
+}
+
+.feedback-survey-description {
+  color: var(--color-text-secondary);
+  margin: 0 0 var(--spacing-5) 0;
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-relaxed);
+}
+
+.feedback-survey-content {
+  margin-bottom: var(--spacing-4);
+}
+
+.feedback-survey-nps {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--spacing-1);
+}
+
+.feedback-survey-nps-btn {
+  width: 28px;
+  height: 36px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  background: var(--color-surface);
+  cursor: pointer;
+  font-size: var(--font-size-sm);
+  color: var(--color-text-primary);
+  transition: all var(--transition-fast);
+  font-family: inherit;
+}
+
+.feedback-survey-nps-btn:hover {
+  border-color: var(--color-primary);
+  background: var(--color-white);
+}
+
+.feedback-survey-nps-btn.selected {
+  background: var(--color-primary);
+  border-color: var(--color-primary);
+  color: var(--color-white);
+}
+
+.feedback-survey-csat {
+  display: flex;
+  justify-content: center;
+  gap: var(--spacing-4);
+}
+
+.feedback-survey-csat-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 36px;
+  transition: transform var(--transition-fast);
+  padding: var(--spacing-2);
+}
+
+.feedback-survey-csat-btn:hover {
+  transform: scale(1.1);
+}
+
+.feedback-survey-csat-btn.selected {
+  transform: scale(1.2);
+}
+
+.feedback-survey-ces {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--spacing-2);
+}
+
+.feedback-survey-ces-btn {
+  flex: 1;
+  padding: var(--spacing-3) var(--spacing-2);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: var(--color-surface);
+  cursor: pointer;
+  font-size: var(--font-size-xs);
+  color: var(--color-text-primary);
+  transition: all var(--transition-fast);
+  font-family: inherit;
+  text-align: center;
+}
+
+.feedback-survey-ces-btn:hover {
+  border-color: var(--color-primary);
+  background: var(--color-white);
+}
+
+.feedback-survey-ces-btn.selected {
+  background: var(--color-primary);
+  border-color: var(--color-primary);
+  color: var(--color-white);
+}
+
+.feedback-survey-labels {
+  display: flex;
+  justify-content: space-between;
+  margin-top: var(--spacing-2);
+  font-size: var(--font-size-xs);
+  color: var(--color-text-secondary);
+}
+
+.feedback-survey-frequency {
+  display: flex;
+  gap: var(--spacing-2);
+}
+
+.feedback-survey-freq-btn {
+  flex: 1;
+  padding: 10px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: var(--color-surface);
+  cursor: pointer;
+  font-size: var(--font-size-sm);
+  color: var(--color-text-primary);
+  transition: all var(--transition-fast);
+  font-family: inherit;
+}
+
+.feedback-survey-freq-btn:hover {
+  border-color: var(--color-primary);
+  background: var(--color-white);
+}
+
+.feedback-survey-freq-btn.selected {
+  background: var(--color-primary);
+  border-color: var(--color-primary);
+  color: var(--color-white);
+}
+
+.feedback-survey-feedback {
+  margin-top: var(--spacing-4);
+}
+
+.feedback-survey-textarea {
+  width: 100%;
+  padding: var(--spacing-3) 14px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  font-size: var(--font-size-base);
+  resize: none;
+  height: 80px;
+  background: var(--color-white);
+  color: var(--color-text-primary);
+  font-family: inherit;
+  box-sizing: border-box;
+  transition: all var(--transition-base);
+  outline: none;
+}
+
+.feedback-survey-textarea::placeholder {
+  color: var(--color-text-tertiary);
+}
+
+.feedback-survey-textarea:focus {
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 3px var(--color-primary-light);
+}
+
+.feedback-survey-select {
+  width: 100%;
+  padding: 10px 14px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  font-size: var(--font-size-base);
+  background: var(--color-white);
+  color: var(--color-text-primary);
+  font-family: inherit;
+  cursor: pointer;
+  transition: all var(--transition-base);
+  outline: none;
+}
+
+.feedback-survey-select:focus {
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 3px var(--color-primary-light);
+}
+
+.feedback-survey-input {
+  width: 100%;
+  padding: 10px 14px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  font-size: var(--font-size-base);
+  background: var(--color-white);
+  color: var(--color-text-primary);
+  font-family: inherit;
+  box-sizing: border-box;
+  transition: all var(--transition-base);
+  outline: none;
+}
+
+.feedback-survey-input::placeholder {
+  color: var(--color-text-tertiary);
+}
+
+.feedback-survey-input:focus {
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 3px var(--color-primary-light);
+}
+
+.feedback-survey-submit {
+  width: 100%;
+  margin-top: var(--spacing-3);
+  padding: var(--spacing-3);
+  background: var(--color-primary);
+  color: var(--color-white);
+  border: none;
+  border-radius: var(--radius-md);
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-medium);
+  cursor: pointer;
+  font-family: inherit;
+  transition: all var(--transition-base);
+}
+
+.feedback-survey-submit:hover {
+  background: var(--color-primary-hover);
+}
+
+.feedback-survey-error {
+  color: var(--color-error);
+  font-size: var(--font-size-sm);
+  margin-top: var(--spacing-2);
+  text-align: center;
+}
+
+.feedback-survey-success {
+  position: fixed;
+  top: var(--spacing-6);
+  right: var(--spacing-6);
+  background: var(--color-success);
+  color: var(--color-white);
+  padding: var(--spacing-4) var(--spacing-6);
+  border-radius: var(--radius-xl);
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-medium);
+  z-index: var(--z-notification);
+  box-shadow: var(--shadow-lg);
+  font-family: inherit;
+}
+
+.feedback-survey-success > div {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+}
+
+@media (max-width: 768px) {
+  .feedback-survey {
+    min-width: 300px;
+  }
+  
+  .feedback-survey-bottom {
+    padding: var(--spacing-5);
+  }
+  
+  .feedback-survey-nps-btn {
+    width: 24px;
+    height: 32px;
+    font-size: var(--font-size-xs);
+  }
+  
+  .feedback-survey-csat-btn {
+    font-size: 32px;
+  }
+}
+`;

package/src/widgets/BaseWidget.js

@@ -1,6 +1,6 @@
 export class BaseWidget {
 	static STORAGE_KEY = 'feedback_submitted';
-	static DEFAULT_COOLDOWN_DAYS = 30; // Don't show for 30 days after submission
+	static DEFAULT_COOLDOWN_DAYS = 30;
 
 	constructor(options = {}) {
 		this.id = options.id;
@@ -14,13 +14,13 @@ export class BaseWidget {
 			boardId: this.sdk.config.boardId,
 			displayMode: options.displayMode || 'panel',
 			size: options.size || 'medium',
-			primaryColor: options.primaryColor || '#21244A',
+			primaryColor: options.primaryColor || '#155EEF',
 			backgroundColor: options.backgroundColor || '#ffffff',
 			textColor: options.textColor || '#1F2937',
 			autoShow: false,
 			showBackdrop: true,
 			customStyles: {},
-			suppressAfterSubmission: true, // Don't show widget again after submission
+			suppressAfterSubmission: true,
 			suppressionDays: BaseWidget.DEFAULT_COOLDOWN_DAYS,
 			...options,
 		};
@@ -48,7 +48,6 @@ export class BaseWidget {
 	mount(container) {
 		if (this.mounted || this.destroyed) return this;
 
-		// Check if feedback was recently submitted and should be suppressed
 		if (this.options.suppressAfterSubmission && this._hasRecentlySubmitted()) {
 			this.sdk.eventBus.emit('widget:suppressed', {
 				widget: this,
@@ -100,7 +99,6 @@ export class BaseWidget {
 
 		if (this.options.displayMode === 'modal') {
 			this._showLoadingModal();
-			// Simulate loading delay then show form
 			setTimeout(() => {
 				this._hideLoadingModal();
 				this._renderPanel();
@@ -129,16 +127,14 @@ export class BaseWidget {
 	_showLoadingModal() {
 		this.state.isLoading = true;
 
-		// Create backdrop
 		this.backdropElement = document.createElement('div');
-		this.backdropElement.className = 'feedback-panel-backdrop';
+		this.backdropElement.className = 'sdk-modal-backdrop';
 		document.body.appendChild(this.backdropElement);
 
-		// Create loading modal
 		this.loadingElement = document.createElement('div');
-		this.loadingElement.className = `feedback-loading-modal theme-${this.options.theme}`;
+		this.loadingElement.className = 'feedback-loading-modal';
 		this.loadingElement.innerHTML = `
-			<div class="feedback-loading-spinner"></div>
+			<div class="sdk-spinner"></div>
 		`;
 		document.body.appendChild(this.loadingElement);
 
@@ -202,7 +198,6 @@ export class BaseWidget {
 
 			const response = await this.apiService.submitFeedback(payload);
 
-			// Track that feedback was submitted
 			this._trackSubmission();
 
 			this._showSuccessMessage();
@@ -246,9 +241,6 @@ export class BaseWidget {
 	onMount() {}
 	onDestroy() {}
 
-	/**
-	 * Track that feedback was submitted to localStorage
-	 */
 	_trackSubmission() {
 		try {
 			const workspace = this.sdk.config.workspace;
@@ -259,21 +251,14 @@ export class BaseWidget {
 			};
 			localStorage.setItem(storageKey, JSON.stringify(data));
 		} catch (e) {
-			// localStorage may not be available
 			console.warn('Failed to track feedback submission:', e);
 		}
 	}
 
-	/**
-	 * Check if feedback was recently submitted (within cooldown period)
-	 * Uses backend tracking (preferred) with localStorage as fallback
-	 * @returns {boolean} true if feedback was submitted within the cooldown period
-	 */
 	_hasRecentlySubmitted() {
 		const cooldownMs = this.options.suppressionDays * 24 * 60 * 60 * 1000;
 		const now = Date.now();
 
-		// Check backend tracking first (from init response)
 		if (this.sdk.config.last_feedback_at) {
 			try {
 				const backendTimestamp = new Date(
@@ -287,7 +272,6 @@ export class BaseWidget {
 			}
 		}
 
-		// Fallback to localStorage
 		try {
 			const workspace = this.sdk.config.workspace;
 			const storageKey = `${BaseWidget.STORAGE_KEY}_${workspace}`;
@@ -300,14 +284,10 @@ export class BaseWidget {
 
 			return now - submittedAt < cooldownMs;
 		} catch (e) {
-			// localStorage may not be available or data is corrupted
 			return false;
 		}
 	}
 
-	/**
-	 * Clear the submission tracking (allow showing the widget again)
-	 */
 	clearSubmissionTracking() {
 		try {
 			const workspace = this.sdk.config.workspace;
@@ -318,10 +298,6 @@ export class BaseWidget {
 		}
 	}
 
-	/**
-	 * Check if the widget should be shown based on submission history
-	 * @returns {boolean} true if the widget should be shown
-	 */
 	shouldShow() {
 		if (!this.options.suppressAfterSubmission) return true;
 		return !this._hasRecentlySubmitted();
@@ -346,7 +322,7 @@ export class BaseWidget {
 
 		if (this.options.showBackdrop && !this.backdropElement) {
 			this.backdropElement = document.createElement('div');
-			this.backdropElement.className = 'feedback-panel-backdrop';
+			this.backdropElement.className = 'sdk-modal-backdrop';
 			document.body.appendChild(this.backdropElement);
 
 			this.backdropElement.addEventListener('click', this.closePanel);
@@ -384,32 +360,34 @@ export class BaseWidget {
       <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>
+          <button class="sdk-close-btn" 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 (optional)</label>
+            <div class="sdk-form-group">
+              <label class="sdk-label" for="feedback-title-${this.id}">Title (optional)</label>
               <input 
                 type="text" 
                 id="feedback-title-${this.id}" 
                 name="title" 
+                class="sdk-input"
                 placeholder="Brief description of your feedback"
                 value="${this.state.title}"
               />
             </div>
-            <div class="feedback-form-group">
-              <label for="feedback-content-${this.id}">Message *</label>
+            <div class="sdk-form-group">
+              <label class="sdk-label" for="feedback-content-${this.id}">Message *</label>
               <textarea 
                 id="feedback-content-${this.id}" 
                 name="content" 
+                class="sdk-textarea"
                 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="submit" class="feedback-btn feedback-btn-submit">
+              <button type="submit" class="sdk-btn-primary sdk-btn-block">
                 ${this.state.isSubmitting ? 'Sending...' : 'Send Feedback'}
               </button>
             </div>
@@ -423,7 +401,7 @@ export class BaseWidget {
 		const panel = this.panelElement;
 
 		panel
-			.querySelector('.feedback-panel-close')
+			.querySelector('.sdk-close-btn')
 			.addEventListener('click', this.closePanel);
 
 		const form = panel.querySelector('.feedback-form');
@@ -455,7 +433,7 @@ export class BaseWidget {
 
 	_updateSubmitButton() {
 		if (this.panelElement) {
-			const submitBtn = this.panelElement.querySelector('.feedback-btn-submit');
+			const submitBtn = this.panelElement.querySelector('.sdk-btn-primary');
 			if (submitBtn) {
 				submitBtn.textContent = this.state.isSubmitting
 					? 'Sending...'
@@ -486,18 +464,18 @@ export class BaseWidget {
 
 	_showSuccessMessage() {
 		const notification = document.createElement('div');
-		notification.className = 'feedback-success-notification';
+		notification.className = 'sdk-notification sdk-notification-success';
 		notification.innerHTML = `
-      <div class="feedback-success-content">
-        <div class="feedback-success-icon">✓</div>
-        <span>Feedback submitted successfully!</span>
-        <button class="feedback-success-close" aria-label="Close">&times;</button>
+      <div class="sdk-notification-content">
+        <div class="sdk-notification-icon">✓</div>
+        <span class="sdk-notification-text">Feedback submitted successfully!</span>
+        <button class="sdk-close-btn" aria-label="Close">&times;</button>
       </div>
     `;
 
 		document.body.appendChild(notification);
 
-		const closeBtn = notification.querySelector('.feedback-success-close');
+		const closeBtn = notification.querySelector('.sdk-close-btn');
 		const closeNotification = () => {
 			if (notification.parentNode) {
 				notification.style.opacity = '0';
@@ -522,18 +500,7 @@ export class BaseWidget {
 	}
 
 	_updateTheme() {
-		if (this.element) {
-			this.element.className = this.element.className.replace(
-				/theme-\w+/,
-				`theme-${this.options.theme}`
-			);
-		}
-		if (this.panelElement) {
-			this.panelElement.className = this.panelElement.className.replace(
-				/theme-\w+/,
-				`theme-${this.options.theme}`
-			);
-		}
+		// No longer needed - single theme
 	}
 
 	openModal() {
@@ -543,4 +510,4 @@ export class BaseWidget {
 	closeModal() {
 		this.closePanel();
 	}
-}
+}

package/src/widgets/ButtonWidget.js

@@ -8,7 +8,7 @@ export class ButtonWidget extends BaseWidget {
 
 	_render() {
 		const button = document.createElement('div');
-		button.className = `feedback-widget feedback-widget-button theme-${this.options.theme} position-${this.options.position}`;
+		button.className = `feedback-widget-button position-${this.options.position}`;
 		button.innerHTML = `
       <button class="feedback-trigger-btn" type="button">
         <svg class="feedback-icon" width="20" height="20" viewBox="0 0 256 256" fill="currentColor">
@@ -42,7 +42,6 @@ export class ButtonWidget extends BaseWidget {
 		const minimizeIcon = this.element.querySelector('.feedback-minimize-icon');
 		const expandIcon = this.element.querySelector('.feedback-expand-icon');
 
-		// Add click handlers directly to the icons
 		minimizeIcon.addEventListener('click', (e) => {
 			e.stopPropagation();
 			e.preventDefault();
@@ -55,32 +54,18 @@ export class ButtonWidget extends BaseWidget {
 			this.restore();
 		});
 
-		// Main button click handler
 		button.addEventListener('click', (e) => {
-			// Check if the click originated from an icon
 			if (
 				e.target.closest('.feedback-minimize-icon') ||
 				e.target.closest('.feedback-expand-icon')
 			) {
-				return; // Let the icon handlers deal with it
+				return;
 			}
 
 			if (!this.isMinimized) {
 				this.openPanel();
 			}
 		});
-
-		button.addEventListener('mouseenter', () => {
-			if (!this.state.isSubmitting && !this.isMinimized) {
-				button.style.transform = 'translateY(-2px)';
-			}
-		});
-
-		button.addEventListener('mouseleave', () => {
-			if (!this.isMinimized) {
-				button.style.transform = 'translateY(0)';
-			}
-		});
 	}
 
 	minimize() {
@@ -113,4 +98,4 @@ export class ButtonWidget extends BaseWidget {
 			);
 		}
 	}
-}
+}