@product7/product7-js 0.1.7 → 0.1.9

package/dist/product7-js.js

@@ -4454,7 +4454,14 @@
   margin-left: 0;
 }
 
+.messenger-mobile-close-btn {
+  display: none;
+}
+
 @media (max-width: 480px) {
+  .messenger-mobile-close-btn {
+    display: flex;
+  }
   .messenger-panel {
     width: 100%;
     height: 100%;
@@ -5481,42 +5488,35 @@
 .messenger-changelog-list {
   display: flex;
   flex-direction: column;
+  gap: var(--spacing-3);
+  padding: var(--spacing-4) var(--spacing-5);
 }
 
 .messenger-changelog-card {
   display: flex;
-  align-items: center;
-  gap: var(--spacing-3);
-  padding: var(--spacing-4) var(--spacing-5);
-  border-bottom: 1px solid var(--msg-border);
+  flex-direction: column;
+  border: 1px solid var(--msg-border);
+  border-radius: 10px;
+  overflow: hidden;
   cursor: pointer;
-  transition: background var(--transition-base);
-}
-
-.messenger-changelog-card:last-child {
-  border-bottom: none;
+  transition: box-shadow var(--transition-base), transform var(--transition-base);
 }
 
 .messenger-changelog-card:hover {
-  background: var(--msg-bg-hover);
-}
-
-.messenger-changelog-card:hover .messenger-changelog-arrow {
-  color: var(--color-primary);
-  transform: translateX(3px);
+  box-shadow: var(--shadow-md);
+  transform: translateY(-1px);
 }
 
 .messenger-changelog-card:active {
-  transform: translateY(1px);
+  transform: translateY(0);
   transition-duration: 100ms;
 }
 
 .messenger-changelog-content {
-  flex: 1;
-  min-width: 0;
   display: flex;
   flex-direction: column;
-  gap: 3px;
+  gap: var(--spacing-1);
+  padding: var(--spacing-3) var(--spacing-4);
 }
 
 .messenger-changelog-meta {
@@ -5554,9 +5554,6 @@
   font-weight: var(--font-weight-semibold);
   color: var(--msg-text);
   line-height: var(--line-height-snug);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
 }
 
 .messenger-changelog-description {
@@ -5571,26 +5568,17 @@
 }
 
 .messenger-changelog-thumb {
-  width: 64px;
-  height: 64px;
-  flex-shrink: 0;
-  border-radius: 8px;
+  width: 100%;
   overflow: hidden;
-  border: 1px solid var(--msg-border);
+  border-bottom: 1px solid var(--msg-border);
 }
 
 .messenger-changelog-thumb img {
   width: 100%;
-  height: 100%;
+  height: 180px;
   display: block;
   object-fit: cover;
 }
-
-.messenger-changelog-arrow {
-  flex-shrink: 0;
-  color: var(--msg-text-tertiary);
-  transition: all var(--transition-base);
-}
 `;
 
 	const messengerStyles =
@@ -5969,6 +5957,32 @@
    RATING SCALE (generic)
    ======================================== */
 
+.feedback-survey-stars {
+  display: flex;
+  gap: var(--spacing-2);
+  justify-content: center;
+}
+
+.feedback-survey-star-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 2rem;
+  color: var(--color-neutral-300);
+  padding: 0 2px;
+  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;
@@ -9026,8 +9040,8 @@
 			<div class="messenger-changelog-header">
 				<div class="messenger-changelog-header-top">
 					<h2>Latest Updates</h2>
-					<button class="sdk-close-btn messenger-changelog-close-btn" aria-label="Close">
-						<iconify-icon icon="ph:x-duotone" width="18" height="18"></iconify-icon>
+					<button class="sdk-close-btn messenger-changelog-close-btn messenger-mobile-close-btn" aria-label="Close">
+						<iconify-icon icon="ph:x" width="18" height="18"></iconify-icon>
 					</button>
 				</div>
 			</div>
@@ -9067,30 +9081,13 @@
 		}
 
 		_renderChangelogCard(item) {
-			const dateStr = this._formatDate(item.publishedAt || item.date);
-			const labelsHtml =
-				item.labels && item.labels.length > 0
-					? item.labels
-							.map((label) => {
-								const bg = label.color || '#E5E7EB';
-								const color = this._getContrastColor(bg);
-								return `<span class="messenger-changelog-tag" style="background:${bg};color:${color};">${label.name}</span>`;
-							})
-							.join('')
-					: '';
-
 			return `
 			<div class="messenger-changelog-card" data-changelog-id="${item.id}">
+				${item.coverImage ? `<div class="messenger-changelog-thumb"><img src="${item.coverImage}" alt="${item.title}" onerror="this.parentElement.style.display='none';" /></div>` : ''}
 				<div class="messenger-changelog-content">
-					<div class="messenger-changelog-meta">
-						${dateStr ? `<span class="messenger-changelog-date">${dateStr}</span>` : ''}
-						${labelsHtml}
-					</div>
 					<h3 class="messenger-changelog-title">${item.title}</h3>
 					${item.description ? `<p class="messenger-changelog-description">${this._stripHtml(item.description)}</p>` : ''}
 				</div>
-				${item.coverImage ? `<div class="messenger-changelog-thumb"><img src="${item.coverImage}" alt="${item.title}" onerror="this.style.display='none';" /></div>` : ''}
-				<iconify-icon icon="ph:caret-right" class="messenger-changelog-arrow" width="16" height="16"></iconify-icon>
 			</div>
 		`;
 		}
@@ -9133,11 +9130,12 @@
 		}
 
 		_attachEvents() {
-			this.element
-				.querySelector('.messenger-changelog-close-btn')
-				.addEventListener('click', () => {
+			const mobileCloseBtn = this.element.querySelector('.messenger-changelog-close-btn');
+			if (mobileCloseBtn) {
+				mobileCloseBtn.addEventListener('click', () => {
 					this.state.setOpen(false);
 				});
+			}
 
 			this._attachChangelogEvents();
 		}
@@ -9259,11 +9257,8 @@
 					<span class="messenger-chat-subtitle">The team can also help</span>
 				</div>
 				<div class="messenger-chat-header-actions">
-					<button class="sdk-btn-icon" aria-label="More options">
-						<iconify-icon icon="ph:dots-three-outline-duotone" width="20" height="20"></iconify-icon>
-					</button>
-					<button class="sdk-close-btn" aria-label="Close">
-						<iconify-icon icon="ph:x-duotone" width="18" height="18"></iconify-icon>
+					<button class="sdk-btn-icon sdk-close-btn messenger-mobile-close-btn" aria-label="Close">
+						<iconify-icon icon="ph:x" width="18" height="18"></iconify-icon>
 					</button>
 				</div>
 			</div>
@@ -9540,11 +9535,12 @@
 					this.state.setView('messages');
 				});
 
-			this.element
-				.querySelector('.sdk-close-btn')
-				.addEventListener('click', () => {
+			const mobileCloseBtn = this.element.querySelector('.messenger-mobile-close-btn');
+			if (mobileCloseBtn) {
+				mobileCloseBtn.addEventListener('click', () => {
 					this.state.setOpen(false);
 				});
+			}
 
 			const input = this.element.querySelector('.messenger-compose-input');
 			const sendBtn = this.element.querySelector('.messenger-compose-send');
@@ -9924,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>
 
@@ -10130,8 +10126,8 @@
 			<div class="messenger-help-header">
 				<div class="messenger-help-header-top">
 					<h2>Help</h2>
-					<button class="sdk-close-btn messenger-help-close-btn" aria-label="Close">
-						<iconify-icon icon="ph:x-duotone" width="18" height="18"></iconify-icon>
+					<button class="sdk-close-btn messenger-help-close-btn messenger-mobile-close-btn" aria-label="Close">
+						<iconify-icon icon="ph:x" width="18" height="18"></iconify-icon>
 					</button>
 				</div>
 				<div class="messenger-help-search-wrap">
@@ -10298,11 +10294,12 @@
 		}
 
 		_attachEvents() {
-			this.element
-				.querySelector('.messenger-help-close-btn')
-				.addEventListener('click', () => {
+			const mobileCloseBtn = this.element.querySelector('.messenger-help-close-btn');
+			if (mobileCloseBtn) {
+				mobileCloseBtn.addEventListener('click', () => {
 					this.state.setOpen(false);
 				});
+			}
 
 			const searchInput = this.element.querySelector(
 				'.messenger-help-search-input'
@@ -12142,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;
@@ -12241,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()]
@@ -12496,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) => {
@@ -12504,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') {