@product7/feedback-sdk 1.5.2 → 1.5.4

package/src/widgets/SurveyWidget.js

@@ -13,6 +13,7 @@ export class SurveyWidget extends BaseWidget {
 			lowLabel: options.lowLabel || null,
 			highLabel: options.highLabel || null,
 			customQuestions: options.customQuestions || [],
+			pages: Array.isArray(options.pages) ? options.pages : [],
 			respondentId: options.respondentId || null,
 			email: options.email || null,
 			onSubmit: options.onSubmit || null,
@@ -23,6 +24,8 @@ export class SurveyWidget extends BaseWidget {
 			score: null,
 			feedback: '',
 			customAnswers: {},
+			pageAnswers: {},
+			currentPageIndex: 0,
 			isVisible: false,
 		};
 	}
@@ -53,9 +56,19 @@ export class SurveyWidget extends BaseWidget {
 	}
 
 	_renderSurvey() {
-		this._closeSurvey();
+		this._closeSurvey(false);
 
 		const config = this._getSurveyConfig();
+		const isMultiPage = this._isMultiPageSurvey();
+		const isLastPage = this._isLastPage();
+		const pageProgress = isMultiPage
+			? `Page ${this.surveyState.currentPageIndex + 1} of ${this.surveyOptions.pages.length}`
+			: '';
+		const submitLabel = isMultiPage && !isLastPage ? 'Next' : 'Submit';
+		const backButton =
+			isMultiPage && this.surveyState.currentPageIndex > 0
+				? '<button class="feedback-survey-back">Back</button>'
+				: '';
 
 		if (this.surveyOptions.position === 'center') {
 			this.backdropElement = document.createElement('div');
@@ -73,11 +86,15 @@ export class SurveyWidget extends BaseWidget {
 			<button class="feedback-survey-close">&times;</button>
 			<h3 class="feedback-survey-title">${config.title}</h3>
 			<p class="feedback-survey-description">${config.description}</p>
+			${isMultiPage ? `<div class="feedback-survey-progress">${pageProgress}</div>` : ''}
 			<div class="feedback-survey-content">${config.html}</div>
 			<div class="feedback-survey-feedback">
-				<textarea class="feedback-survey-textarea" placeholder="Any additional feedback? (optional)"></textarea>
+				<textarea class="feedback-survey-textarea" placeholder="Any additional feedback? (optional)">${this.surveyState.feedback || ''}</textarea>
+			</div>
+			<div class="feedback-survey-actions">
+				${backButton}
+				<button class="feedback-survey-submit">${submitLabel}</button>
 			</div>
-			<button class="feedback-survey-submit">Submit</button>
 		`;
 
 		document.body.appendChild(this.surveyElement);
@@ -93,6 +110,10 @@ export class SurveyWidget extends BaseWidget {
 	}
 
 	_getSurveyConfig() {
+		if (this._isMultiPageSurvey()) {
+			return this._getCurrentPageConfig();
+		}
+
 		const configs = {
 			nps: {
 				title:
@@ -166,6 +187,166 @@ export class SurveyWidget extends BaseWidget {
 		return configs[this.surveyOptions.surveyType] || configs.nps;
 	}
 
+	_isMultiPageSurvey() {
+		return (
+			Array.isArray(this.surveyOptions.pages) &&
+			this.surveyOptions.pages.length > 0
+		);
+	}
+
+	_getCurrentPage() {
+		if (!this._isMultiPageSurvey()) return null;
+		return this.surveyOptions.pages[this.surveyState.currentPageIndex] || null;
+	}
+
+	_isLastPage() {
+		if (!this._isMultiPageSurvey()) return true;
+		return this.surveyState.currentPageIndex >= this.surveyOptions.pages.length - 1;
+	}
+
+	_getCurrentPageConfig() {
+		const page = this._getCurrentPage();
+		if (!page) {
+			return this._getFallbackSurveyConfig();
+		}
+
+		return {
+			title: page.title || this.surveyOptions.title || 'Quick Feedback',
+			description:
+				page.description ||
+				this.surveyOptions.description ||
+				'Help us improve by answering this question.',
+			html: this._renderSurveyPage(page),
+		};
+	}
+
+	_getFallbackSurveyConfig() {
+		return {
+			title: this.surveyOptions.title || 'Quick Feedback',
+			description:
+				this.surveyOptions.description ||
+				'Help us improve by answering a few questions.',
+			html: this._renderCustomQuestions(),
+		};
+	}
+
+	_renderSurveyPage(page) {
+		switch (page.type) {
+			case 'rating':
+				return this._renderRatingPage(page);
+			case 'multiple_choice':
+				return this._renderMultipleChoicePage(page);
+			case 'text':
+				return this._renderTextPage(page);
+			default:
+				return this._renderTextPage(page);
+		}
+	}
+
+	_renderRatingPage(page) {
+		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 pageAnswer = this.surveyState.pageAnswers[pageId] || {};
+		const currentRating = pageAnswer.rating;
+
+		const labels = `
+			<div class="feedback-survey-labels">
+				<span>${config.low_label || this.surveyOptions.lowLabel || ''}</span>
+				<span>${config.high_label || this.surveyOptions.highLabel || ''}</span>
+			</div>
+		`;
+
+		if (scale === 11 || ratingType === 'nps') {
+			return `
+				<div class="feedback-survey-nps" data-page-id="${pageId}">
+					${[...Array(11).keys()]
+						.map((n) => {
+							const selected = currentRating === n ? ' selected' : '';
+							return `<button class="feedback-survey-page-rating-btn feedback-survey-nps-btn${selected}" data-page-id="${pageId}" data-score="${n}">${n}</button>`;
+						})
+						.join('')}
+				</div>
+				${labels}
+			`;
+		}
+
+		if (ratingType === 'emoji' && scale === 5) {
+			const emojis = [
+				'\uD83D\uDE1E',
+				'\uD83D\uDE15',
+				'\uD83D\uDE10',
+				'\uD83D\uDE42',
+				'\uD83D\uDE04',
+			];
+			return `
+				<div class="feedback-survey-csat" data-page-id="${pageId}">
+					${emojis
+						.map((emoji, i) => {
+							const score = i + 1;
+							const selected = currentRating === score ? ' selected' : '';
+							return `<button class="feedback-survey-page-rating-btn feedback-survey-csat-btn${selected}" data-page-id="${pageId}" data-score="${score}">${emoji}</button>`;
+						})
+						.join('')}
+				</div>
+				${labels}
+			`;
+		}
+
+		return `
+			<div class="feedback-survey-ces" 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-ces-btn${selected}" data-page-id="${pageId}" data-score="${score}">${score}</button>`;
+					})
+					.join('')}
+			</div>
+			${labels}
+		`;
+	}
+
+	_renderMultipleChoicePage(page) {
+		const pageId = page.id || `page_${this.surveyState.currentPageIndex}`;
+		const config = page.multipleChoiceConfig || page.multiple_choice_config || {};
+		const options = Array.isArray(config.options) ? config.options : [];
+		const allowMultiple = config.allow_multiple === true || config.multiple === true;
+		const pageAnswer = this.surveyState.pageAnswers[pageId] || {};
+		const selectedValues = Array.isArray(pageAnswer.values)
+			? pageAnswer.values
+			: pageAnswer.value
+				? [pageAnswer.value]
+				: [];
+
+		return `
+			<div class="feedback-survey-multiple-choice" data-page-id="${pageId}" data-multiple="${allowMultiple}">
+				${options
+					.map((option, index) => {
+						const value =
+							option.value || option.id || option.key || `option_${index}`;
+						const label = option.label || option.text || String(value);
+						const selected = selectedValues.includes(value) ? ' selected' : '';
+						return `<button class="feedback-survey-page-choice-btn${selected}" data-page-id="${pageId}" data-value="${value}">${label}</button>`;
+					})
+					.join('')}
+			</div>
+		`;
+	}
+
+	_renderTextPage(page) {
+		const pageId = page.id || `page_${this.surveyState.currentPageIndex}`;
+		const pageAnswer = this.surveyState.pageAnswers[pageId] || {};
+		const value = pageAnswer.text || '';
+
+		return `
+			<div class="feedback-survey-text-page" data-page-id="${pageId}">
+				<textarea class="feedback-survey-page-textarea" data-page-id="${pageId}" placeholder="Type your answer...">${value}</textarea>
+			</div>
+		`;
+	}
+
 	_renderCustomQuestions() {
 		if (
 			!this.surveyOptions.customQuestions ||
@@ -238,6 +419,11 @@ export class SurveyWidget extends BaseWidget {
 		);
 		submitBtn.addEventListener('click', () => this._handleSubmit());
 
+		const backBtn = this.surveyElement.querySelector('.feedback-survey-back');
+		if (backBtn) {
+			backBtn.addEventListener('click', () => this._handleBack());
+		}
+
 		const textarea = this.surveyElement.querySelector(
 			'.feedback-survey-textarea'
 		);
@@ -256,6 +442,11 @@ export class SurveyWidget extends BaseWidget {
 	}
 
 	_attachTypeSpecificEvents() {
+		if (this._isMultiPageSurvey()) {
+			this._attachCurrentPageEvents();
+			return;
+		}
+
 		const type = this.surveyOptions.surveyType;
 
 		if (type === 'nps') {
@@ -317,6 +508,87 @@ export class SurveyWidget extends BaseWidget {
 		}
 	}
 
+	_attachCurrentPageEvents() {
+		const page = this._getCurrentPage();
+		if (!page || !this.surveyElement) return;
+		const pageId = page.id || `page_${this.surveyState.currentPageIndex}`;
+
+		if (page.type === 'rating') {
+			this.surveyElement
+				.querySelectorAll('.feedback-survey-page-rating-btn')
+				.forEach((btn) => {
+					btn.addEventListener('click', () => {
+						const score = parseInt(btn.dataset.score);
+						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 (page.type === 'multiple_choice') {
+			const container = this.surveyElement.querySelector(
+				'.feedback-survey-multiple-choice'
+			);
+			const allowMultiple = container
+				? container.dataset.multiple === 'true'
+				: false;
+
+			this.surveyElement
+				.querySelectorAll('.feedback-survey-page-choice-btn')
+				.forEach((btn) => {
+					btn.addEventListener('click', () => {
+						const value = btn.dataset.value;
+						if (!value) return;
+
+						const existing = this.surveyState.pageAnswers[pageId] || {};
+						const existingValues = Array.isArray(existing.values)
+							? existing.values
+							: existing.value
+								? [existing.value]
+								: [];
+
+						let nextValues = [];
+						if (allowMultiple) {
+							const hasValue = existingValues.includes(value);
+							nextValues = hasValue
+								? existingValues.filter((v) => v !== value)
+								: [...existingValues, value];
+						} else {
+							nextValues = [value];
+						}
+
+						this._setPageAnswer(pageId, {
+							value: nextValues[0] || null,
+							values: nextValues,
+						});
+
+						if (!allowMultiple) {
+							this.surveyElement
+								.querySelectorAll('.feedback-survey-page-choice-btn')
+								.forEach((item) => item.classList.remove('selected'));
+						}
+						btn.classList.toggle('selected', nextValues.includes(value));
+					});
+				});
+		}
+
+		if (page.type === 'text') {
+			const textarea = this.surveyElement.querySelector(
+				'.feedback-survey-page-textarea'
+			);
+			if (textarea) {
+				textarea.addEventListener('input', (e) => {
+					this._setPageAnswer(pageId, { text: e.target.value });
+				});
+			}
+		}
+	}
+
 	_selectNPS(score) {
 		this.surveyState.score = score;
 		this.surveyElement
@@ -375,7 +647,21 @@ export class SurveyWidget extends BaseWidget {
 	async _handleSubmit() {
 		const type = this.surveyOptions.surveyType;
 
+		if (this._isMultiPageSurvey()) {
+			if (!this._validateCurrentPage()) {
+				return;
+			}
+
+			const nextPageIndex = this._getNextPageIndex();
+			if (nextPageIndex !== -1 && nextPageIndex !== this.surveyState.currentPageIndex) {
+				this.surveyState.currentPageIndex = nextPageIndex;
+				this._renderSurvey();
+				return;
+			}
+		}
+
 		if (
+			!this._isMultiPageSurvey() &&
 			(type === 'nps' || type === 'csat' || type === 'ces') &&
 			this.surveyState.score === null
 		) {
@@ -384,20 +670,28 @@ export class SurveyWidget extends BaseWidget {
 		}
 
 		const respondent = this._getRespondentContext();
+		const normalizedPageAnswers = this._normalizePageAnswersForSubmit();
+		const mergedAnswers = {
+			...this.surveyState.customAnswers,
+			...(Object.keys(normalizedPageAnswers).length > 0 && {
+				page_answers: normalizedPageAnswers,
+			}),
+		};
 
 		const responseData = {
-			rating: this.surveyState.score,
+			rating: this._getSubmissionRating(),
 			feedback: this.surveyState.feedback,
-			answers: this.surveyState.customAnswers,
+			answers: mergedAnswers,
 			...(respondent.respondentId && { respondentId: respondent.respondentId }),
 			...(respondent.email && { email: respondent.email }),
 		};
 
 		const response = {
 			type: type,
-			score: this.surveyState.score,
+			score: this._getSubmissionRating(),
 			feedback: this.surveyState.feedback,
-			customAnswers: this.surveyState.customAnswers,
+			customAnswers: mergedAnswers,
+			pageAnswers: normalizedPageAnswers,
 			timestamp: new Date().toISOString(),
 		};
 
@@ -419,6 +713,138 @@ export class SurveyWidget extends BaseWidget {
 		this._showSuccessNotification();
 	}
 
+	_handleBack() {
+		if (!this._isMultiPageSurvey()) return;
+		if (this.surveyState.currentPageIndex <= 0) return;
+		this.surveyState.currentPageIndex -= 1;
+		this._renderSurvey();
+	}
+
+	_setPageAnswer(pageId, data) {
+		if (!pageId) return;
+		this.surveyState.pageAnswers[pageId] = {
+			...(this.surveyState.pageAnswers[pageId] || {}),
+			...data,
+		};
+	}
+
+	_validateCurrentPage() {
+		const page = this._getCurrentPage();
+		if (!page || page.required === false) return true;
+		const pageId = page.id || `page_${this.surveyState.currentPageIndex}`;
+
+		const answer = this.surveyState.pageAnswers[pageId] || {};
+
+		if (page.type === 'rating') {
+			if (typeof answer.rating !== 'number') {
+				this._showError('Please select a rating');
+				return false;
+			}
+		}
+
+		if (page.type === 'multiple_choice') {
+			const hasSingle = Boolean(answer.value);
+			const hasMany = Array.isArray(answer.values) && answer.values.length > 0;
+			if (!hasSingle && !hasMany) {
+				this._showError('Please select an option');
+				return false;
+			}
+		}
+
+		if (page.type === 'text') {
+			if (!answer.text || !String(answer.text).trim()) {
+				this._showError('Please enter an answer');
+				return false;
+			}
+		}
+
+		return true;
+	}
+
+	_getNextPageIndex() {
+		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 nextValue = navigation.default;
+		if (!nextValue) {
+			return fallbackNext;
+		}
+
+		if (nextValue === 'end_survey') {
+			return -1;
+		}
+		if (nextValue === 'next_page' || nextValue === 'next') {
+			return fallbackNext;
+		}
+
+		if (typeof nextValue === 'number') {
+			return nextValue >= 0 && nextValue < total ? nextValue : fallbackNext;
+		}
+
+		if (typeof nextValue === 'string') {
+			const normalizedId = nextValue.replace(/^page:/, '');
+			const pageIndex = this.surveyOptions.pages.findIndex(
+				(item) => item.id === normalizedId
+			);
+			return pageIndex >= 0 ? pageIndex : fallbackNext;
+		}
+
+		return fallbackNext;
+	}
+
+	_getSubmissionRating() {
+		if (typeof this.surveyState.score === 'number') {
+			return this.surveyState.score;
+		}
+
+		if (!this._isMultiPageSurvey()) {
+			return null;
+		}
+
+		for (const page of this.surveyOptions.pages) {
+			const pageId = page.id || `page_${this.surveyOptions.pages.indexOf(page)}`;
+			const answer = this.surveyState.pageAnswers[pageId];
+			if (answer && typeof answer.rating === 'number') {
+				return answer.rating;
+			}
+		}
+
+		return null;
+	}
+
+	_normalizePageAnswersForSubmit() {
+		const output = {};
+		for (const [pageId, answer] of Object.entries(this.surveyState.pageAnswers)) {
+			if (answer == null) continue;
+			if (Array.isArray(answer.values) && answer.values.length > 0) {
+				output[pageId] = answer.values;
+				continue;
+			}
+			if (answer.value != null && answer.value !== '') {
+				output[pageId] = answer.value;
+				continue;
+			}
+			if (typeof answer.rating === 'number') {
+				output[pageId] = answer.rating;
+				continue;
+			}
+			if (typeof answer.text === 'string' && answer.text.trim()) {
+				output[pageId] = answer.text.trim();
+			}
+		}
+		return output;
+	}
+
 	_getRespondentContext() {
 		const sdkUserContext =
 			typeof this.sdk.getUserContext === 'function'
@@ -497,7 +923,7 @@ export class SurveyWidget extends BaseWidget {
 		}, 3000);
 	}
 
-	_closeSurvey() {
+	_closeSurvey(resetState = true) {
 		if (this._escapeHandler) {
 			document.removeEventListener('keydown', this._escapeHandler);
 			this._escapeHandler = null;
@@ -530,12 +956,16 @@ export class SurveyWidget extends BaseWidget {
 			this.backdropElement = null;
 		}
 
-		this.surveyState = {
-			score: null,
-			feedback: '',
-			customAnswers: {},
-			isVisible: false,
-		};
+		if (resetState) {
+			this.surveyState = {
+				score: null,
+				feedback: '',
+				customAnswers: {},
+				pageAnswers: {},
+				currentPageIndex: 0,
+				isVisible: false,
+			};
+		}
 	}
 
 	destroy() {

package/types/index.d.ts

@@ -61,11 +61,48 @@ declare module '@product7/feedback-sdk' {
 		options?: Array<{ value: string; label: string }>;
 	}
 
+	export interface SurveyRatingConfig {
+		survey_type?: string;
+		scale?: number;
+		low_label?: string | null;
+		high_label?: string | null;
+	}
+
+	export interface SurveyMultipleChoiceOption {
+		id?: string;
+		key?: string;
+		value?: string;
+		label?: string;
+		text?: string;
+	}
+
+	export interface SurveyMultipleChoiceConfig {
+		options?: SurveyMultipleChoiceOption[];
+		allow_multiple?: boolean;
+		multiple?: boolean;
+	}
+
+	export interface SurveyPage {
+		id?: string;
+		type?: 'rating' | 'multiple_choice' | 'text' | string;
+		title?: string;
+		description?: string;
+		required?: boolean;
+		position?: number;
+		ratingConfig?: SurveyRatingConfig | null;
+		rating_config?: SurveyRatingConfig | null;
+		multipleChoiceConfig?: SurveyMultipleChoiceConfig | null;
+		multiple_choice_config?: SurveyMultipleChoiceConfig | null;
+		afterThisPage?: { default?: string | number } | null;
+		after_this_page?: { default?: string | number } | null;
+	}
+
 	export interface SurveyWidgetResponse {
 		type: SurveyType;
 		score: number | null;
 		feedback: string;
 		customAnswers: Record<string, any>;
+		pageAnswers?: Record<string, any>;
 		timestamp: string;
 	}
 
@@ -78,6 +115,7 @@ declare module '@product7/feedback-sdk' {
 		lowLabel?: string | null;
 		highLabel?: string | null;
 		customQuestions?: SurveyQuestion[];
+		pages?: SurveyPage[];
 		respondentId?: string | null;
 		email?: string | null;
 		theme?: 'light' | 'dark';