@product7/feedback-sdk 1.7.5 → 1.7.7

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@product7/feedback-sdk",
-	"version": "1.7.5",
+	"version": "1.7.7",
 	"description": "JavaScript SDK for integrating Product7 feedback widgets into any website",
 	"main": "dist/feedback-sdk.js",
 	"module": "src/index.js",

package/src/styles/survey.js

@@ -33,6 +33,7 @@ export const surveyStyles = `
   min-width: 320px;
   max-width: 400px;
   font-family: inherit;
+  overflow: hidden;
 }
 
 .feedback-survey-theme-dark {
@@ -250,11 +251,16 @@ export const surveyStyles = `
 }
 
 .feedback-survey-csat-btn:hover {
-  transform: scale(1.1);
+  transform: scale(1.15);
 }
 
 .feedback-survey-csat-btn.selected {
-  transform: scale(1.2);
+  transform: scale(1.5);
+}
+
+.feedback-survey-csat:has(.selected) .feedback-survey-csat-btn:not(.selected) {
+  transform: scale(0.8);
+  opacity: 0.35;
 }
 
 /* ========================================
@@ -293,6 +299,38 @@ export const surveyStyles = `
   color: var(--color-white);
 }
 
+.feedback-survey-ces-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+}
+
+.feedback-survey-ces-list-btn {
+  width: 100%;
+  padding: var(--spacing-3) var(--spacing-4);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: var(--color-surface);
+  cursor: pointer;
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-primary);
+  transition: all var(--transition-fast);
+  font-family: inherit;
+  text-align: left;
+}
+
+.feedback-survey-ces-list-btn:hover {
+  background: var(--color-neutral-100);
+  border-color: var(--color-border);
+}
+
+.feedback-survey-ces-list-btn.selected {
+  background: var(--color-primary);
+  border-color: var(--color-primary);
+  color: var(--color-white);
+}
+
 .feedback-survey-rating-scale {
   display: flex;
   gap: 0;
@@ -560,18 +598,35 @@ export const surveyStyles = `
 }
 
 .feedback-survey-error {
-  color: var(--color-error);
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  background: #FF9900;
+  color: #000;
   font-size: var(--font-size-sm);
-  margin-top: var(--spacing-2);
-  text-align: center;
+  font-weight: var(--font-weight-medium);
+  padding: 10px 14px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  z-index: 2;
 }
 
-.feedback-survey-success {
+.feedback-survey-error svg {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}
+
+/* ========================================
+   NOTIFICATION TOASTS
+   ======================================== */
+
+.feedback-sdk-notification {
   position: fixed;
   top: var(--spacing-6);
   right: var(--spacing-6);
-  background: var(--color-success);
-  color: var(--color-white);
   padding: var(--spacing-3) var(--spacing-5);
   border-radius: var(--radius-xl);
   font-size: var(--font-size-sm);
@@ -579,14 +634,38 @@ export const surveyStyles = `
   z-index: var(--z-notification);
   box-shadow: var(--shadow-lg);
   font-family: inherit;
+  color: #fff;
 }
 
-.feedback-survey-success > div {
+.feedback-sdk-notification > div {
   display: flex;
   align-items: center;
   gap: var(--spacing-2);
 }
 
+.feedback-sdk-notification svg {
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
+}
+
+.feedback-sdk-notification-success {
+  background: #037F0C;
+}
+
+.feedback-sdk-notification-error {
+  background: #D13212;
+}
+
+.feedback-sdk-notification-warning {
+  background: #FF9900;
+  color: #000;
+}
+
+.feedback-sdk-notification-info {
+  background: #0972D3;
+}
+
 /* ========================================
    RESPONSIVE
    ======================================== */

package/src/widgets/SurveyWidget.js

@@ -58,7 +58,7 @@ export class SurveyWidget extends BaseWidget {
 
 		document
 			.querySelectorAll(
-				'.feedback-survey, .feedback-survey-backdrop, .feedback-survey-success'
+				'.feedback-survey, .feedback-survey-backdrop, .feedback-survey-success, .feedback-sdk-notification'
 			)
 			.forEach((el) => {
 				if (el && el.parentNode) {
@@ -414,8 +414,18 @@ export class SurveyWidget extends BaseWidget {
 		const pageId = page.id || `page_${this.surveyState.currentPageIndex}`;
 		const config = page.ratingConfig || page.rating_config || {};
 		const scale = Number(config.scale) || 5;
-		const ratingType =
-			config.survey_type || this.surveyOptions.surveyType || 'csat';
+		const topSurveyType = this.surveyOptions.surveyType;
+		const configType = config.survey_type;
+		let ratingType;
+		if (topSurveyType === 'ces') {
+			ratingType = 'ces';
+		} else if (topSurveyType === 'nps') {
+			ratingType = 'nps';
+		} else if (topSurveyType === 'csat' && !configType) {
+			ratingType = 'emoji';
+		} else {
+			ratingType = configType || topSurveyType || 'csat';
+		}
 		const pageAnswer = this.surveyState.pageAnswers[pageId] || {};
 		const currentRating = pageAnswer.rating;
 		const defaultLowLabel =
@@ -466,12 +476,12 @@ export class SurveyWidget extends BaseWidget {
 		if (ratingType === 'ces') {
 			const cesLabels = ['Very Difficult', 'Difficult', 'Neutral', 'Easy', 'Very Easy'];
 			return `
-				<div class="feedback-survey-ces" data-page-id="${pageId}">
+				<div class="feedback-survey-ces-list" data-page-id="${pageId}">
 					${cesLabels
 						.map((label, i) => {
 							const score = i + 1;
 							const selected = currentRating === score ? ' selected' : '';
-							return `<button class="feedback-survey-page-rating-btn feedback-survey-ces-btn${selected}" data-page-id="${pageId}" data-score="${score}">${label}</button>`;
+							return `<button class="feedback-survey-page-rating-btn feedback-survey-ces-list-btn${selected}" data-page-id="${pageId}" data-score="${score}">${label}</button>`;
 						})
 						.join('')}
 				</div>
@@ -1182,30 +1192,20 @@ export class SurveyWidget extends BaseWidget {
 
 		const error = document.createElement('div');
 		error.className = 'feedback-survey-error';
-		error.textContent = message;
+		error.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path d="M236.8,188.09,149.35,36a24.76,24.76,0,0,0-42.7,0L19.2,188.09a23.51,23.51,0,0,0,0,23.72A24.35,24.35,0,0,0,40.55,224h174.9a24.35,24.35,0,0,0,21.33-12.19A23.51,23.51,0,0,0,236.8,188.09ZM120,104a8,8,0,0,1,16,0v40a8,8,0,0,1-16,0Zm8,88a12,12,0,1,1,12-12A12,12,0,0,1,128,192Z" fill="currentColor"/></svg><span>${message}</span>`;
 
-		const submitBtn = this.surveyElement.querySelector(
-			'.feedback-survey-submit'
-		);
-		const actions = this.surveyElement.querySelector(
-			'.feedback-survey-actions'
-		);
-		const anchor = submitBtn || actions;
-		if (anchor && anchor.parentNode) {
-			anchor.parentNode.insertBefore(error, anchor);
-		} else {
-			this.surveyElement.appendChild(error);
-		}
+		this.surveyElement.prepend(error);
 
 		setTimeout(() => error.remove(), 3000);
 	}
 
 	_showSuccessNotification() {
 		const notification = document.createElement('div');
-		notification.className = 'feedback-survey-success';
+		notification.className =
+			'feedback-sdk-notification feedback-sdk-notification-success';
 		notification.innerHTML = `
 			<div>
-				<span style="font-size: 18px;">✓</span>
+				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path d="M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z" fill="currentColor"/></svg>
 				<span>Thank you for your feedback!</span>
 			</div>
 		`;