@product7/product7-js 0.4.2 → 0.4.4

package/src/widgets/MessengerWidget.js

@@ -1,9 +1,9 @@
-import { NotificationSound } from '../utils/NotificationSound.js';
 import { WebSocketService } from '../core/WebSocketService.js';
 import {
 	applyMessengerCustomStyles,
 	removeMessengerCustomStyles,
 } from '../styles/messengerCustomStyles.js';
+import { NotificationSound } from '../utils/NotificationSound.js';
 import { BaseWidget } from './BaseWidget.js';
 import { MessengerState } from './messenger/MessengerState.js';
 import { MessengerLauncher } from './messenger/components/MessengerLauncher.js';
@@ -95,12 +95,16 @@ export class MessengerWidget extends BaseWidget {
 		this._wsUnsubscribers = [];
 		this._feedbackWidget = null;
 
-		const notificationSoundOption = options.notificationSound !== undefined
-			? options.notificationSound
-			: true;
+		const notificationSoundOption =
+			options.notificationSound !== undefined
+				? options.notificationSound
+				: true;
 
 		this._notificationSound = new NotificationSound({
-			soundUrl: typeof notificationSoundOption === 'string' ? notificationSoundOption : undefined,
+			soundUrl:
+				typeof notificationSoundOption === 'string'
+					? notificationSoundOption
+					: undefined,
 			volume: options.notificationVolume ?? 0.4,
 		});
 

package/src/widgets/SurveyWidget.js

@@ -36,6 +36,8 @@ export class SurveyWidget extends BaseWidget {
 					: null,
 			customQuestions: options.customQuestions || [],
 			pages: Array.isArray(options.pages) ? options.pages : [],
+			thankYouConfig:
+				options.thankYouConfig || options.thank_you_config || null,
 			respondentId: options.respondentId || null,
 			email: options.email || null,
 			onSubmit: options.onSubmit || null,
@@ -364,10 +366,6 @@ export class SurveyWidget extends BaseWidget {
 
 	_shouldShowActions() {
 		if (this._isMultiPageSurvey()) {
-			const page = this._getCurrentPage();
-			if (page && page.type === 'link') {
-				return false;
-			}
 			return true;
 		}
 		if (typeof this.surveyOptions.showSubmitButton === 'boolean') {
@@ -416,8 +414,6 @@ export class SurveyWidget extends BaseWidget {
 				return this._renderMultipleChoicePage(page);
 			case 'text':
 				return this._renderTextPage(page);
-			case 'link':
-				return this._renderLinkPage(page);
 			default:
 				return '';
 		}
@@ -425,62 +421,36 @@ export class SurveyWidget extends BaseWidget {
 
 	_renderRatingPage(page) {
 		const pageId = page.id || `page_${this.surveyState.currentPageIndex}`;
-		const config = page.ratingConfig || page.rating_config || {};
+		const config = page.rating_config || page.ratingConfig || {};
 		const scale = Number(config.scale) || 5;
-		const topSurveyType = this.surveyOptions.surveyType;
-		const configType = config.survey_type;
-		let ratingType;
-		if (topSurveyType === 'nps') {
-			ratingType = 'nps';
-		} else if (configType) {
-			ratingType = configType;
-		} else if (topSurveyType === 'ces') {
-			ratingType = 'ces';
-		} else if (topSurveyType === 'csat') {
-			ratingType = 'emoji';
-		} else {
-			ratingType = topSurveyType || 'csat';
-		}
+		const ratingType = config.survey_type || 'number';
 		const pageAnswer = this.surveyState.pageAnswers[pageId] || {};
 		const currentRating = pageAnswer.rating;
-		const defaultLowLabel =
-			ratingType === 'nps'
-				? scale === 11
-					? 'Not likely'
-					: 'Strongly Disagree'
-				: '';
-		const defaultHighLabel =
-			ratingType === 'nps'
-				? scale === 11
-					? 'Very likely'
-					: 'Strongly Agree'
-				: '';
-		const lowLabel =
-			config.low_label || this.surveyOptions.lowLabel || defaultLowLabel;
-		const highLabel =
-			config.high_label || this.surveyOptions.highLabel || defaultHighLabel;
+
+		const labelDefaults = {
+			nps:
+				scale === 11
+					? ['Not likely', 'Very likely']
+					: ['Strongly Disagree', 'Strongly Agree'],
+			emoji: ['Very dissatisfied', 'Very satisfied'],
+			number: ['Poor', 'Excellent'],
+			star: ['Poor', 'Excellent'],
+		};
+		const [defaultLow, defaultHigh] = labelDefaults[ratingType] || ['', ''];
+		const lowLabel = config.low_label || defaultLow;
+		const highLabel = config.high_label || defaultHigh;
 		const labels = this._renderScaleLabels(lowLabel, highLabel);
 
 		if (ratingType === 'nps') {
-			const npsScale = Number.isFinite(scale) && scale >= 2 ? scale : 5;
+			const npsScale = Number.isFinite(scale) && scale >= 2 ? scale : 11;
 			const start = npsScale === 11 ? 0 : 1;
-			const values = Array.from(
-				{ length: npsScale },
-				(_, index) => start + index
-			);
-			const usesSegmentedScale = values.length <= 7;
-			const containerClass = usesSegmentedScale
-				? 'feedback-survey-ces feedback-survey-rating-scale'
-				: 'feedback-survey-nps';
-			const buttonClass = usesSegmentedScale
-				? 'feedback-survey-page-rating-btn feedback-survey-nps-btn feedback-survey-ces-btn feedback-survey-rating-scale-btn'
-				: 'feedback-survey-page-rating-btn feedback-survey-nps-btn';
+			const values = Array.from({ length: npsScale }, (_, i) => start + i);
 			return `
-				<div class="${containerClass}" data-page-id="${pageId}">
+				<div class="feedback-survey-nps" data-page-id="${pageId}">
 					${values
 						.map((n) => {
 							const selected = currentRating === n ? ' selected' : '';
-							return `<button class="${buttonClass}${selected}" data-page-id="${pageId}" data-score="${n}">${n}</button>`;
+							return `<button class="feedback-survey-page-rating-btn feedback-survey-nps-btn feedback-survey-nps-score-${n}${selected}" data-page-id="${pageId}" data-score="${n}">${n}</button>`;
 						})
 						.join('')}
 				</div>
@@ -488,28 +458,7 @@ export class SurveyWidget extends BaseWidget {
 			`;
 		}
 
-		if (ratingType === 'ces') {
-			const cesLabels = [
-				'Very Difficult',
-				'Difficult',
-				'Neutral',
-				'Easy',
-				'Very Easy',
-			];
-			return `
-				<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-list-btn${selected}" data-page-id="${pageId}" data-score="${score}">${label}</button>`;
-						})
-						.join('')}
-				</div>
-			`;
-		}
-
-		if (ratingType === 'emoji' && scale === 5) {
+		if (ratingType === 'emoji') {
 			const emojis = [
 				'\uD83D\uDE1E',
 				'\uD83D\uDE15',
@@ -517,9 +466,12 @@ export class SurveyWidget extends BaseWidget {
 				'\uD83D\uDE42',
 				'\uD83D\uDE04',
 			];
+			const emojiScale =
+				Number.isFinite(scale) && scale >= 2 ? Math.min(scale, 5) : 5;
 			return `
 				<div class="feedback-survey-csat" data-page-id="${pageId}">
 					${emojis
+						.slice(0, emojiScale)
 						.map((emoji, i) => {
 							const score = i + 1;
 							const selected = currentRating === score ? ' selected' : '';
@@ -535,27 +487,27 @@ export class SurveyWidget extends BaseWidget {
 			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('')}
+					${Array.from({ length: starScale }, (_, i) => {
+						const score = i + 1;
+						const filled =
+							typeof currentRating === 'number' && currentRating >= score
+								? ' filled'
+								: '';
+						return `<button class="feedback-survey-page-rating-btn feedback-survey-star-btn${filled}" data-page-id="${pageId}" data-score="${score}"><iconify-icon icon="ph:star-duotone" width="32" height="32" style="pointer-events:none;"></iconify-icon></button>`;
+					}).join('')}
 				</div>
 				${labels}
 			`;
 		}
 
+		const numScale = Number.isFinite(scale) && scale >= 2 ? scale : 5;
 		return `
 			<div class="feedback-survey-rating-scale" data-page-id="${pageId}">
-				${[...Array(scale).keys()]
-					.map((i) => {
-						const score = i + 1;
-						const selected = currentRating === score ? ' selected' : '';
-						return `<button class="feedback-survey-page-rating-btn feedback-survey-rating-scale-btn${selected}" data-page-id="${pageId}" data-score="${score}">${score}</button>`;
-					})
-					.join('')}
+				${Array.from({ length: numScale }, (_, i) => {
+					const score = i + 1;
+					const selected = currentRating === score ? ' selected' : '';
+					return `<button class="feedback-survey-page-rating-btn feedback-survey-rating-scale-btn${selected}" data-page-id="${pageId}" data-score="${score}">${score}</button>`;
+				}).join('')}
 			</div>
 			${labels}
 		`;
@@ -605,32 +557,6 @@ export class SurveyWidget extends BaseWidget {
 		`;
 	}
 
-	_renderLinkPage(page) {
-		const pageId = page.id || `page_${this.surveyState.currentPageIndex}`;
-		const config = page.link_config || page.linkConfig || {};
-		const buttonText = config.button_text || config.buttonText || 'Click here';
-		const linkText = config.link_text || config.linkText || '';
-		const redirectUrl = config.redirect_url || config.redirectUrl || '#';
-		const openIn = config.open_in || config.openIn || 'new_tab';
-		const target = openIn === 'new_tab' ? '_blank' : '_self';
-		const pageAnswer = this.surveyState.pageAnswers[pageId] || {};
-		const clicked = pageAnswer.clicked === true;
-
-		const iconExternalLink = `<iconify-icon icon="ph:arrow-square-out-duotone" width="15" height="15"></iconify-icon>`;
-		return `
-			<div class="feedback-survey-link-page" data-page-id="${pageId}">
-				${linkText ? `<p class="feedback-survey-link-text">${linkText}</p>` : ''}
-				<a class="feedback-survey-link-btn${clicked ? ' selected' : ''}"
-				   href="${redirectUrl}"
-				   target="${target}"
-				   rel="noopener noreferrer"
-				   data-page-id="${pageId}">
-					${buttonText} ${iconExternalLink}
-				</a>
-			</div>
-		`;
-	}
-
 	_renderCustomQuestions() {
 		if (
 			!this.surveyOptions.customQuestions ||
@@ -913,24 +839,6 @@ export class SurveyWidget extends BaseWidget {
 				});
 			}
 		}
-
-		if (page.type === 'link') {
-			this.surveyElement
-				.querySelectorAll('.feedback-survey-link-btn')
-				.forEach((btn) => {
-					btn.addEventListener('click', () => {
-						const pId = btn.dataset.pageId;
-						this._setPageAnswer(pId, { clicked: true });
-						btn.classList.add('selected');
-
-						const navigation = page.afterThisPage || page.after_this_page;
-						const goesTo = navigation ? navigation.default : null;
-						if (!goesTo || goesTo === 'end_survey') {
-							setTimeout(() => this._handleSubmit(), 400);
-						}
-					});
-				});
-		}
 	}
 
 	_selectNPS(score) {
@@ -939,11 +847,7 @@ export class SurveyWidget extends BaseWidget {
 			.querySelectorAll('.feedback-survey-nps-btn')
 			.forEach((btn) => {
 				const btnScore = parseInt(btn.dataset.score);
-				if (btnScore === score) {
-					btn.classList.add('selected');
-				} else {
-					btn.classList.remove('selected');
-				}
+				btn.classList.toggle('selected', btnScore === score);
 			});
 		this._maybeAutoSubmit();
 	}
@@ -954,50 +858,16 @@ export class SurveyWidget extends BaseWidget {
 			.querySelectorAll('.feedback-survey-csat-btn')
 			.forEach((btn) => {
 				const btnScore = parseInt(btn.dataset.score);
-				if (btnScore === score) {
-					btn.classList.add('selected');
-				} else {
-					btn.classList.remove('selected');
-				}
-			});
-		this._maybeAutoSubmit();
-	}
-
-	_selectCES(score) {
-		this.surveyState.score = score;
-		this.surveyElement
-			.querySelectorAll('.feedback-survey-ces-btn')
-			.forEach((btn) => {
-				const btnScore = parseInt(btn.dataset.score);
-				if (btnScore === score) {
-					btn.classList.add('selected');
-				} else {
-					btn.classList.remove('selected');
-				}
+				btn.classList.toggle('selected', btnScore === score);
 			});
 		this._maybeAutoSubmit();
 	}
 
 	_maybeAutoSubmit() {
-		if (!this._shouldAutoSubmitOnSelect()) {
-			return;
-		}
+		if (!this._shouldAutoSubmitOnSelect()) return;
 		this._handleSubmit();
 	}
 
-	_selectFrequency(freq) {
-		this.surveyState.customAnswers.frequency = freq;
-		this.surveyElement
-			.querySelectorAll('.feedback-survey-freq-btn')
-			.forEach((btn) => {
-				if (btn.dataset.freq === freq) {
-					btn.classList.add('selected');
-				} else {
-					btn.classList.remove('selected');
-				}
-			});
-	}
-
 	_setSubmitLoading(loading) {
 		const btn = this.surveyElement?.querySelector('.feedback-survey-submit');
 		if (!btn) return;
@@ -1077,8 +947,7 @@ export class SurveyWidget extends BaseWidget {
 			await this.apiService.submitSurveyResponse(surveyId, responseData);
 
 			this.sdk.eventBus.emit('survey:submitted', { widget: this, response });
-			this._closeSurvey();
-			this._showSuccessNotification();
+			this._showThankYouScreen();
 		} catch (error) {
 			console.error('[SurveyWidget] Failed to submit survey:', error);
 			this._showError('Something went wrong. Please try again.');
@@ -1114,9 +983,8 @@ export class SurveyWidget extends BaseWidget {
 
 	_validateCurrentPage() {
 		const page = this._getCurrentPage();
-		if (!page || page.required === false) return true;
+		if (!page || page.required !== true) return true;
 		const pageId = page.id || `page_${this.surveyState.currentPageIndex}`;
-
 		const answer = this.surveyState.pageAnswers[pageId] || {};
 
 		if (page.type === 'rating') {
@@ -1127,9 +995,10 @@ export class SurveyWidget extends BaseWidget {
 		}
 
 		if (page.type === 'multiple_choice') {
-			const hasSingle = Boolean(answer.value);
-			const hasMany = Array.isArray(answer.values) && answer.values.length > 0;
-			if (!hasSingle && !hasMany) {
+			const hasAnswer =
+				Boolean(answer.value) ||
+				(Array.isArray(answer.values) && answer.values.length > 0);
+			if (!hasAnswer) {
 				this._showError('Please select an option');
 				return false;
 			}
@@ -1142,55 +1011,88 @@ export class SurveyWidget extends BaseWidget {
 			}
 		}
 
-		if (page.type === 'link') {
-			if (page.required && !answer.clicked) {
-				this._showError('Please click the link to continue');
-				return false;
-			}
-		}
-
 		return true;
 	}
 
 	_getNextPageIndex() {
-		if (!this._isMultiPageSurvey()) {
-			return -1;
-		}
+		if (!this._isMultiPageSurvey()) return -1;
 
 		const page = this._getCurrentPage();
 		const total = this.surveyOptions.pages.length;
 		const currentIndex = this.surveyState.currentPageIndex;
 		const fallbackNext = currentIndex + 1 < total ? currentIndex + 1 : -1;
-		const navigation = page ? page.afterThisPage || page.after_this_page : null;
-		if (!navigation) {
-			return fallbackNext;
-		}
+		const navigation = page ? page.after_this_page || page.afterThisPage : null;
+		if (!navigation) return fallbackNext;
 
-		const nextValue = navigation.default;
-		if (!nextValue) {
-			return fallbackNext;
-		}
+		const conditions = Array.isArray(navigation.conditions)
+			? navigation.conditions
+			: [];
+		const pageId = page.id || `page_${currentIndex}`;
+		const answer = this.surveyState.pageAnswers[pageId] || {};
 
-		if (nextValue === 'end_survey') {
-			return -1;
-		}
-		if (nextValue === 'next_page' || nextValue === 'next') {
-			return fallbackNext;
+		for (const condition of conditions) {
+			if (this._evaluateCondition(condition, page, answer)) {
+				return this._resolvePageTarget(condition.go_to, total, fallbackNext);
+			}
 		}
 
-		if (typeof nextValue === 'number') {
-			return nextValue >= 0 && nextValue < total ? nextValue : fallbackNext;
+		return this._resolvePageTarget(navigation.default, total, fallbackNext);
+	}
+
+	_evaluateCondition(condition, page, answer) {
+		const { operator, values } = condition;
+		if (!operator || !Array.isArray(values)) return false;
+
+		let answerValue = null;
+		if (page.type === 'rating') {
+			answerValue = typeof answer.rating === 'number' ? answer.rating : null;
+		} else if (page.type === 'multiple_choice') {
+			answerValue =
+				answer.value ||
+				(Array.isArray(answer.values) ? answer.values[0] : null);
+		} else if (page.type === 'text') {
+			answerValue = answer.text || null;
+		}
+
+		if (operator === 'is_empty')
+			return answerValue === null || answerValue === '';
+		if (operator === 'not_empty')
+			return answerValue !== null && answerValue !== '';
+		if (answerValue === null) return false;
+
+		const [v1, v2] = values;
+		switch (operator) {
+			case 'equals':
+				return String(answerValue) === String(v1);
+			case 'greater_than':
+				return Number(answerValue) > Number(v1);
+			case 'less_than':
+				return Number(answerValue) < Number(v1);
+			case 'between':
+				return (
+					Number(answerValue) >= Number(v1) && Number(answerValue) <= Number(v2)
+				);
+			case 'contains':
+				return String(answerValue).includes(String(v1));
+			default:
+				return false;
 		}
+	}
 
-		if (typeof nextValue === 'string') {
-			const normalizedId = nextValue.replace(/^page:/, '');
-			const pageIndex = this.surveyOptions.pages.findIndex(
-				(item) => item.id === normalizedId
+	_resolvePageTarget(target, total, fallback) {
+		if (!target) return fallback;
+		if (target === 'end_survey') return -1;
+		if (target === 'next_page' || target === 'next') return fallback;
+		if (typeof target === 'number')
+			return target >= 0 && target < total ? target : fallback;
+		if (typeof target === 'string') {
+			const normalizedId = target.replace(/^page:/, '');
+			const idx = this.surveyOptions.pages.findIndex(
+				(p) => p.id === normalizedId
 			);
-			return pageIndex >= 0 ? pageIndex : fallbackNext;
+			return idx >= 0 ? idx : fallback;
 		}
-
-		return fallbackNext;
+		return fallback;
 	}
 
 	_getSubmissionRating() {
@@ -1295,23 +1197,45 @@ export class SurveyWidget extends BaseWidget {
 		setTimeout(() => error.remove(), 3000);
 	}
 
-	_showSuccessNotification() {
-		const notification = document.createElement('div');
-		notification.className =
-			'product7-notification product7-notification-success';
-		notification.innerHTML = `
-			<div>
-				<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>
+	_showThankYouScreen() {
+		if (!this.surveyElement) return;
+
+		const config = this.surveyOptions.thankYouConfig || {};
+		const title = config.title || 'Thanks for your feedback!';
+		const buttonText = config.button_text || null;
+		const buttonUrl = config.button_url || '#';
+
+		if (this._escapeHandler) {
+			document.removeEventListener('keydown', this._escapeHandler);
+			this._escapeHandler = null;
+		}
+
+		this.surveyElement.innerHTML = `
+			<button class="feedback-survey-close"><iconify-icon icon="ph:x-duotone" width="16" height="16"></iconify-icon></button>
+			<div class="feedback-survey-thankyou">
+				<iconify-icon icon="ph:check-circle-duotone" width="48" height="48" class="feedback-survey-thankyou-icon"></iconify-icon>
+				<h3 class="feedback-survey-thankyou-title">${title}</h3>
+				${
+					buttonText
+						? `
+					<a class="feedback-survey-thankyou-btn" href="${buttonUrl}" target="_blank" rel="noopener noreferrer">
+						${buttonText}
+						<iconify-icon icon="ph:arrow-square-out-duotone" width="15" height="15" style="pointer-events:none;"></iconify-icon>
+					</a>`
+						: ''
+				}
 			</div>
 		`;
-		document.body.appendChild(notification);
 
-		setTimeout(() => {
-			notification.style.opacity = '0';
-			notification.style.transition = 'opacity 0.3s ease';
-			setTimeout(() => notification.remove(), 300);
-		}, 3000);
+		const closeBtn = this.surveyElement.querySelector('.feedback-survey-close');
+		if (closeBtn) closeBtn.addEventListener('click', () => this._closeSurvey());
+
+		setTimeout(
+			() => {
+				if (this.surveyElement) this._closeSurvey();
+			},
+			buttonText ? 6000 : 3500
+		);
 	}
 
 	_closeSurvey(resetState = true, immediate = false) {