@product7/feedback-sdk 1.5.2 → 1.5.4

package/dist/feedback-sdk.js

@@ -6729,6 +6729,7 @@
 				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,
@@ -6739,6 +6740,8 @@
 				score: null,
 				feedback: '',
 				customAnswers: {},
+				pageAnswers: {},
+				currentPageIndex: 0,
 				isVisible: false,
 			};
 		}
@@ -6769,9 +6772,19 @@
 		}
 
 		_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');
@@ -6789,11 +6802,15 @@
 			<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);
@@ -6809,6 +6826,10 @@
 		}
 
 		_getSurveyConfig() {
+			if (this._isMultiPageSurvey()) {
+				return this._getCurrentPageConfig();
+			}
+
 			const configs = {
 				nps: {
 					title:
@@ -6882,6 +6903,166 @@
 			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 ||
@@ -6954,6 +7135,11 @@
 			);
 			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'
 			);
@@ -6972,6 +7158,11 @@
 		}
 
 		_attachTypeSpecificEvents() {
+			if (this._isMultiPageSurvey()) {
+				this._attachCurrentPageEvents();
+				return;
+			}
+
 			const type = this.surveyOptions.surveyType;
 
 			if (type === 'nps') {
@@ -7033,6 +7224,87 @@
 			}
 		}
 
+		_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
@@ -7091,7 +7363,21 @@
 		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
 			) {
@@ -7100,20 +7386,28 @@
 			}
 
 			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(),
 			};
 
@@ -7135,6 +7429,138 @@
 			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'
@@ -7213,7 +7639,7 @@
 			}, 3000);
 		}
 
-		_closeSurvey() {
+		_closeSurvey(resetState = true) {
 			if (this._escapeHandler) {
 				document.removeEventListener('keydown', this._escapeHandler);
 				this._escapeHandler = null;
@@ -7246,12 +7672,16 @@
 				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() {
@@ -7457,7 +7887,9 @@
 
 			try {
 				const result = await this.apiService.getActiveSurveys(context);
-				const surveys = result.data || [];
+				const surveys = (result.data || []).map((survey) =>
+					this._normalizeSurveyConfig(survey)
+				);
 				if (context.includeIneligible) {
 					return surveys;
 				}
@@ -7503,12 +7935,13 @@
 
 			return this.showSurvey({
 				surveyId: surveyConfig.id,
-				surveyType: surveyConfig.type,
+				surveyType: surveyConfig.surveyType || surveyConfig.type,
 				title: surveyConfig.title,
 				description: surveyConfig.description,
-				lowLabel: surveyConfig.low_label,
-				highLabel: surveyConfig.high_label,
-				customQuestions: surveyConfig.questions,
+				lowLabel: surveyConfig.lowLabel || surveyConfig.low_label,
+				highLabel: surveyConfig.highLabel || surveyConfig.high_label,
+				customQuestions: surveyConfig.customQuestions || surveyConfig.questions,
+				pages: surveyConfig.pages,
 				...displayOptions,
 			});
 		}
@@ -7529,20 +7962,23 @@
 				return null;
 			}
 
+			const normalizedOptions = this._normalizeSurveyConfig(options);
+
 			const surveyWidget = this.createWidget('survey', {
-				surveyId: options.surveyId,
-				surveyType: options.surveyType || options.type || 'nps',
-				position: options.position || 'bottom-right',
-				theme: options.theme || this.config.theme || 'light',
-				title: options.title,
-				description: options.description,
-				lowLabel: options.lowLabel,
-				highLabel: options.highLabel,
-				customQuestions: options.customQuestions,
-				respondentId: options.respondentId,
-				email: options.email,
-				onSubmit: options.onSubmit,
-				onDismiss: options.onDismiss,
+				surveyId: normalizedOptions.surveyId,
+				surveyType: normalizedOptions.surveyType || normalizedOptions.type || 'nps',
+				position: normalizedOptions.position || 'bottom-right',
+				theme: normalizedOptions.theme || this.config.theme || 'light',
+				title: normalizedOptions.title,
+				description: normalizedOptions.description,
+				lowLabel: normalizedOptions.lowLabel,
+				highLabel: normalizedOptions.highLabel,
+				customQuestions: normalizedOptions.customQuestions,
+				pages: normalizedOptions.pages,
+				respondentId: normalizedOptions.respondentId,
+				email: normalizedOptions.email,
+				onSubmit: normalizedOptions.onSubmit,
+				onDismiss: normalizedOptions.onDismiss,
 			});
 
 			surveyWidget.mount();
@@ -7557,6 +7993,14 @@
 				return shouldShow;
 			}
 
+			const eligibilityShouldShow = this._getSurveyField(
+				survey.eligibility || {},
+				['shouldShow', 'should_show']
+			);
+			if (typeof eligibilityShouldShow === 'boolean') {
+				return eligibilityShouldShow;
+			}
+
 			const eligible = this._getSurveyField(survey, [
 				'eligible',
 				'isEligible',
@@ -7571,6 +8015,14 @@
 				return !isAnswered;
 			}
 
+			const eligibilityAnswered = this._getSurveyField(survey.eligibility || {}, [
+				'isAnswered',
+				'is_answered',
+			]);
+			if (typeof eligibilityAnswered === 'boolean') {
+				return !eligibilityAnswered;
+			}
+
 			return true;
 		}
 
@@ -7584,6 +8036,15 @@
 				return explicitReason;
 			}
 
+			const eligibilityReason = this._getSurveyField(survey.eligibility || {}, [
+				'reason',
+				'suppressionReason',
+				'suppression_reason',
+			]);
+			if (eligibilityReason) {
+				return eligibilityReason;
+			}
+
 			const isAnswered = this._getSurveyField(survey, ['isAnswered', 'is_answered']);
 			if (isAnswered === true) {
 				return 'already_answered';
@@ -7592,6 +8053,96 @@
 			return 'ineligible';
 		}
 
+		_normalizeSurveyConfig(survey = {}) {
+			const firstPage = Array.isArray(survey.pages) && survey.pages.length > 0
+				? survey.pages[0]
+				: null;
+			const ratingConfig = firstPage
+				? firstPage.rating_config || firstPage.ratingConfig || {}
+				: {};
+
+			const inferredType =
+				survey.type ||
+				this._inferSurveyTypeFromPage(firstPage) ||
+				'nps';
+
+			return {
+				...survey,
+				surveyId: survey.surveyId || survey.id || null,
+				surveyType: survey.surveyType || inferredType,
+				type: survey.type || inferredType,
+				should_show:
+					survey.should_show ??
+					(survey.eligibility ? survey.eligibility.should_show : undefined),
+				reason:
+					survey.reason ||
+					(survey.eligibility ? survey.eligibility.reason : undefined),
+				title:
+					survey.title ||
+					survey.name ||
+					(firstPage ? firstPage.title : null),
+				description:
+					survey.description ||
+					(firstPage ? firstPage.description : null),
+				lowLabel:
+					survey.lowLabel ||
+					survey.low_label ||
+					ratingConfig.low_label ||
+					null,
+				highLabel:
+					survey.highLabel ||
+					survey.high_label ||
+					ratingConfig.high_label ||
+					null,
+				customQuestions: survey.customQuestions || survey.questions || [],
+				pages: this._normalizeSurveyPages(survey.pages || []),
+			};
+		}
+
+		_normalizeSurveyPages(pages = []) {
+			if (!Array.isArray(pages)) {
+				return [];
+			}
+
+			return pages
+				.map((page, index) => ({
+				id: page.id || `page_${index}`,
+				type: page.type || 'rating',
+				title: page.title || '',
+				description: page.description || '',
+				required: page.required !== false,
+				position: page.position ?? index,
+				ratingConfig: page.ratingConfig || page.rating_config || null,
+				multipleChoiceConfig:
+					page.multipleChoiceConfig || page.multiple_choice_config || null,
+				linkConfig: page.linkConfig || page.link_config || null,
+				afterThisPage: page.afterThisPage || page.after_this_page || null,
+				}))
+				.sort((a, b) => a.position - b.position);
+		}
+
+		_inferSurveyTypeFromPage(page) {
+			if (!page) return null;
+			const ratingConfig = page.rating_config || page.ratingConfig || {};
+			const scale = ratingConfig.scale;
+			const surveyType = ratingConfig.survey_type;
+			const title = (page.title || '').toLowerCase();
+
+			if (scale === 11 || surveyType === 'nps') {
+				return 'nps';
+			}
+
+			if (
+				surveyType === 'emoji' ||
+				title.includes('effort') ||
+				title.includes('easy')
+			) {
+				return 'ces';
+			}
+
+			return 'csat';
+		}
+
 		_getSurveyField(survey, fields) {
 			for (const field of fields) {
 				if (survey[field] !== undefined && survey[field] !== null) {
@@ -11211,13 +11762,73 @@
   box-shadow: 0 0 0 3px var(--color-primary-light);
 }
 
+.feedback-survey-progress {
+  font-size: var(--font-size-xs);
+  color: var(--color-text-tertiary);
+  margin-bottom: var(--spacing-3);
+}
+
+.feedback-survey-actions {
+  display: flex;
+  gap: var(--spacing-2);
+  margin-top: var(--spacing-3);
+}
+
+.feedback-survey-back {
+  padding: var(--spacing-3) var(--spacing-4);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: var(--color-surface);
+  color: var(--color-text-primary);
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-medium);
+  cursor: pointer;
+  font-family: inherit;
+}
+
+.feedback-survey-page-choice-btn {
+  width: 100%;
+  padding: var(--spacing-3);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: var(--color-surface);
+  color: var(--color-text-primary);
+  text-align: left;
+  font-size: var(--font-size-base);
+  cursor: pointer;
+  margin-bottom: var(--spacing-2);
+  font-family: inherit;
+}
+
+.feedback-survey-page-choice-btn.selected {
+  background: var(--color-primary);
+  border-color: var(--color-primary);
+  color: var(--color-white);
+}
+
+.feedback-survey-page-textarea {
+  width: 100%;
+  min-height: 96px;
+  padding: var(--spacing-3);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  font-size: var(--font-size-base);
+  font-family: inherit;
+  box-sizing: border-box;
+  outline: none;
+}
+
+.feedback-survey-page-textarea:focus {
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 3px var(--color-primary-light);
+}
+
 /* ========================================
    SUBMIT & FEEDBACK
    ======================================== */
 
 .feedback-survey-submit {
   width: 100%;
-  margin-top: var(--spacing-3);
   padding: var(--spacing-3);
   background: var(--color-primary);
   color: var(--color-white);