@product7/product7-js 0.1.8 → 0.2.0

package/package.json

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

package/src/styles/messenger-views.js

@@ -616,8 +616,8 @@ export const messengerViewsStyles = `
 
 .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;
@@ -625,14 +625,14 @@ export const messengerViewsStyles = `
 }
 
 .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;

package/src/styles/survey.js

@@ -368,6 +368,32 @@ export const surveyStyles = `
    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;

package/src/widgets/SurveyWidget.js

@@ -427,14 +427,16 @@ export class SurveyWidget extends BaseWidget {
 		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;
@@ -526,6 +528,22 @@ export class SurveyWidget extends BaseWidget {
 			`;
 		}
 
+		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()]
@@ -781,6 +799,8 @@ export class SurveyWidget extends BaseWidget {
 		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) => {
@@ -789,12 +809,44 @@ export class SurveyWidget extends BaseWidget {
 						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') {

package/src/widgets/messenger/views/ConversationsView.js

@@ -67,8 +67,8 @@ export class ConversationsView {
 		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>