@product7/feedback-sdk 1.7.5 → 1.7.7

package/dist/feedback-sdk.js

@@ -7161,7 +7161,7 @@
 
 			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) {
@@ -7517,8 +7517,18 @@
 			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 =
@@ -7569,12 +7579,12 @@
 			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>
@@ -8285,30 +8295,20 @@
 
 			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>
 		`;
@@ -12616,6 +12616,7 @@
   min-width: 320px;
   max-width: 400px;
   font-family: inherit;
+  overflow: hidden;
 }
 
 .feedback-survey-theme-dark {
@@ -12833,11 +12834,16 @@
 }
 
 .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;
 }
 
 /* ========================================
@@ -12876,6 +12882,38 @@
   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;
@@ -13143,18 +13181,35 @@
 }
 
 .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-error svg {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
 }
 
-.feedback-survey-success {
+/* ========================================
+   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);
@@ -13162,14 +13217,38 @@
   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
    ======================================== */