@product7/product7-js 0.1.8 → 0.2.0

package/dist/product7-js.js

@@ -5327,8 +5327,8 @@
 
 .messenger-help-collection-icon {
   flex-shrink: 0;
-  width: 2.75rem;
-  height: 2.75rem;
+  width: 2.25rem;
+  height: 2.25rem;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -5336,14 +5336,14 @@
 }
 
 .messenger-help-collection-icon svg {
-  width: 2rem;
-  height: 2rem;
+  width: 1.5rem;
+  height: 1.5rem;
   display: block;
   flex-shrink: 0;
 }
 
 .messenger-help-collection-icon iconify-icon {
-  font-size: 2rem;
+  font-size: 1.5rem;
   width: 1em;
   height: 1em;
   display: block;
@@ -5957,6 +5957,32 @@
    RATING SCALE (generic)
    ======================================== */
 
+.feedback-survey-stars {
+  display: flex;
+  gap: var(--spacing-4);
+  justify-content: center;
+}
+
+.feedback-survey-star-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 2.75rem;
+  color: var(--color-neutral-300);
+  padding: 0;
+  line-height: 1;
+  transition: color var(--transition-fast), transform var(--transition-fast);
+}
+
+.feedback-survey-star-btn.filled,
+.feedback-survey-star-btn.hovered {
+  color: #f59e0b;
+}
+
+.feedback-survey-star-btn:active {
+  transform: scale(0.9);
+}
+
 .feedback-survey-rating-scale {
   display: flex;
   gap: 0;
@@ -9894,8 +9920,8 @@
 			this.element.innerHTML = `
         <div class="messenger-conversations-header">
             <h2>Messages</h2>
-           <button class="sdk-close-btn" aria-label="Close">
-  <iconify-icon icon="ph:x-duotone" width="18" height="18"></iconify-icon>
+           <button class="sdk-close-btn messenger-mobile-close-btn" aria-label="Close">
+  <iconify-icon icon="ph:x" width="18" height="18"></iconify-icon>
 </button>
         </div>
 
@@ -12113,14 +12139,16 @@
 			const topSurveyType = this.surveyOptions.surveyType;
 			const configType = config.survey_type;
 			let ratingType;
-			if (topSurveyType === 'ces') {
-				ratingType = 'ces';
-			} else if (topSurveyType === 'nps') {
+			if (topSurveyType === 'nps') {
 				ratingType = 'nps';
-			} else if (topSurveyType === 'csat' && !configType) {
+			} else if (configType) {
+				ratingType = configType;
+			} else if (topSurveyType === 'ces') {
+				ratingType = 'ces';
+			} else if (topSurveyType === 'csat') {
 				ratingType = 'emoji';
 			} else {
-				ratingType = configType || topSurveyType || 'csat';
+				ratingType = topSurveyType || 'csat';
 			}
 			const pageAnswer = this.surveyState.pageAnswers[pageId] || {};
 			const currentRating = pageAnswer.rating;
@@ -12212,6 +12240,22 @@
 			`;
 			}
 
+			if (ratingType === 'star') {
+				const starScale = Number.isFinite(scale) && scale >= 2 ? scale : 5;
+				return `
+				<div class="feedback-survey-stars" data-page-id="${pageId}">
+					${[...Array(starScale).keys()]
+						.map((i) => {
+							const score = i + 1;
+							const filled = currentRating >= score ? ' filled' : '';
+							return `<button class="feedback-survey-page-rating-btn feedback-survey-star-btn${filled}" data-page-id="${pageId}" data-score="${score}">★</button>`;
+						})
+						.join('')}
+				</div>
+				${labels}
+			`;
+			}
+
 			return `
 			<div class="feedback-survey-rating-scale" data-page-id="${pageId}">
 				${[...Array(scale).keys()]
@@ -12467,6 +12511,8 @@
 			const pageId = page.id || `page_${this.surveyState.currentPageIndex}`;
 
 			if (page.type === 'rating') {
+				const isStarRating = !!this.surveyElement.querySelector('.feedback-survey-star-btn');
+
 				this.surveyElement
 					.querySelectorAll('.feedback-survey-page-rating-btn')
 					.forEach((btn) => {
@@ -12475,12 +12521,44 @@
 							if (Number.isNaN(score)) return;
 							this._setPageAnswer(pageId, { rating: score });
 
-							this.surveyElement
-								.querySelectorAll('.feedback-survey-page-rating-btn')
-								.forEach((item) => item.classList.remove('selected'));
-							btn.classList.add('selected');
+							if (isStarRating) {
+								this.surveyElement
+									.querySelectorAll('.feedback-survey-star-btn')
+									.forEach((star) => {
+										const starScore = parseInt(star.dataset.score);
+										star.classList.toggle('filled', starScore <= score);
+									});
+							} else {
+								this.surveyElement
+									.querySelectorAll('.feedback-survey-page-rating-btn')
+									.forEach((item) => item.classList.remove('selected'));
+								btn.classList.add('selected');
+							}
 						});
+
+						if (isStarRating) {
+							btn.addEventListener('mouseenter', () => {
+								const hoverScore = parseInt(btn.dataset.score);
+								this.surveyElement
+									.querySelectorAll('.feedback-survey-star-btn')
+									.forEach((star) => {
+										const starScore = parseInt(star.dataset.score);
+										star.classList.toggle('hovered', starScore <= hoverScore);
+									});
+							});
+						}
 					});
+
+				if (isStarRating) {
+					const container = this.surveyElement.querySelector('.feedback-survey-stars');
+					if (container) {
+						container.addEventListener('mouseleave', () => {
+							this.surveyElement
+								.querySelectorAll('.feedback-survey-star-btn')
+								.forEach((star) => star.classList.remove('hovered'));
+						});
+					}
+				}
 			}
 
 			if (page.type === 'multiple_choice') {