@product7/product7-js 0.1.0

package/src/widgets/SurveyWidget.js

@@ -0,0 +1,1325 @@
+import { BaseWidget } from './BaseWidget.js';
+
+export class SurveyWidget extends BaseWidget {
+	constructor(options) {
+		super({ ...options, type: 'survey' });
+
+		this.surveyOptions = {
+			surveyId: options.surveyId || null,
+			surveyType: options.surveyType || 'nps',
+			position: options.position || 'center',
+			theme: options.theme || 'light',
+			enabled:
+				typeof options.enabled === 'boolean' ? options.enabled : undefined,
+			title: options.title || null,
+			description: options.description || null,
+			lowLabel: options.lowLabel || null,
+			highLabel: options.highLabel || null,
+			ratingScale: options.ratingScale || options.scale || null,
+			showFeedbackInput:
+				typeof options.showFeedbackInput === 'boolean'
+					? options.showFeedbackInput
+					: null,
+			showSubmitButton:
+				typeof options.showSubmitButton === 'boolean'
+					? options.showSubmitButton
+					: null,
+			autoSubmitOnSelect:
+				typeof options.autoSubmitOnSelect === 'boolean'
+					? options.autoSubmitOnSelect
+					: null,
+			showTitle:
+				typeof options.showTitle === 'boolean' ? options.showTitle : null,
+			showDescription:
+				typeof options.showDescription === 'boolean'
+					? options.showDescription
+					: null,
+			customQuestions: options.customQuestions || [],
+			pages: Array.isArray(options.pages) ? options.pages : [],
+			respondentId: options.respondentId || null,
+			email: options.email || null,
+			onSubmit: options.onSubmit || null,
+			onDismiss: options.onDismiss || null,
+		};
+
+		this.surveyState = {
+			score: null,
+			feedback: '',
+			customAnswers: {},
+			pageAnswers: {},
+			currentPageIndex: 0,
+			isSubmitting: false,
+			isVisible: false,
+		};
+	}
+
+	static removeDanglingElements() {
+		if (typeof document === 'undefined') return;
+
+		document
+			.querySelectorAll(
+				'.feedback-survey, .feedback-survey-backdrop, .feedback-survey-success, .product7-notification'
+			)
+			.forEach((el) => {
+				if (el && el.parentNode) {
+					el.parentNode.removeChild(el);
+				}
+			});
+	}
+
+	_render() {
+		const container = document.createElement('div');
+		container.className = 'feedback-survey-container';
+		return container;
+	}
+
+	_attachEvents() {
+		// Events are attached when survey is shown
+	}
+
+	show() {
+		if (
+			this.options.enabled === false ||
+			this.surveyOptions.enabled === false
+		) {
+			this.sdk.eventBus.emit('survey:suppressed', {
+				widget: this,
+				surveyId: this.surveyOptions.surveyId,
+				reason: 'disabled',
+			});
+			return this;
+		}
+
+		SurveyWidget.removeDanglingElements();
+		this._renderSurvey();
+		this.surveyState.isVisible = true;
+		this.sdk.eventBus.emit('survey:shown', {
+			widget: this,
+			type: this.surveyOptions.surveyType,
+		});
+		return this;
+	}
+
+	hide() {
+		this._closeSurvey();
+		return this;
+	}
+
+	_renderSurvey() {
+		this._closeSurvey(false);
+
+		const config = this._getSurveyConfig();
+		if (!config) return;
+		const isMultiPage = this._isMultiPageSurvey();
+		const isLastPage = this._isLastPage();
+		const showFeedbackInput = this._shouldShowFeedbackInput();
+		const showActions = this._shouldShowActions();
+		const showTitle = this._shouldShowTitle(config);
+		const showDescription = this._shouldShowDescription(config);
+		const progressPercent = isMultiPage
+			? Math.round(
+					((this.surveyState.currentPageIndex + 1) /
+						this.surveyOptions.pages.length) *
+						100
+				)
+			: 0;
+		const submitLabel = isMultiPage && !isLastPage ? 'Next' : 'Submit';
+		const iconArrowRight = `<iconify-icon icon="ph:arrow-right" width="16" height="16"></iconify-icon>`;
+		const iconCheck = `<iconify-icon icon="ph:arrow-right" width="16" height="16"></iconify-icon>`;
+		const iconArrowLeft = `<iconify-icon icon="ph:arrow-left" width="16" height="16"></iconify-icon>`;
+		const backButton =
+			isMultiPage && this.surveyState.currentPageIndex > 0
+				? `<button class="feedback-survey-back">${iconArrowLeft} Back</button>`
+				: '';
+
+		if (this.surveyOptions.position === 'center') {
+			this.backdropElement = document.createElement('div');
+			this.backdropElement.className = `feedback-survey-backdrop feedback-survey-backdrop-${this.surveyOptions.theme}`;
+			document.body.appendChild(this.backdropElement);
+			this.backdropElement.addEventListener('click', () =>
+				this._handleDismiss()
+			);
+		}
+
+		this.surveyElement = document.createElement('div');
+		this.surveyElement.className = `feedback-survey feedback-survey-${this.surveyOptions.position} feedback-survey-theme-${this.surveyOptions.theme}${
+			showDescription && !showTitle
+				? ' feedback-survey-description-primary'
+				: ''
+		}`;
+
+		this.surveyElement.innerHTML = `
+			<button class="feedback-survey-close"><iconify-icon icon="ph:x-duotone" width="16" height="16"></iconify-icon></button>
+			${showTitle ? `<h3 class="feedback-survey-title">${config.title}</h3>` : ''}
+			${showDescription ? `<p class="feedback-survey-description">${config.description}</p>` : ''}
+			${isMultiPage && this.surveyOptions.pages.length > 1 ? `<div class="feedback-survey-progress"><div class="feedback-survey-progress-track"><div class="feedback-survey-progress-fill" style="width:${progressPercent}%"></div></div></div>` : ''}
+			<div class="feedback-survey-content">${config.html}</div>
+			${
+				showFeedbackInput
+					? `<div class="feedback-survey-feedback">
+				<textarea class="feedback-survey-textarea" placeholder="Any additional feedback? (optional)">${this.surveyState.feedback || ''}</textarea>
+			</div>`
+					: ''
+			}
+			${
+				showActions
+					? `<div class="feedback-survey-actions">
+				${backButton}
+				<button class="feedback-survey-submit">${submitLabel} ${isLastPage ? iconCheck : iconArrowRight}</button>
+			</div>`
+					: ''
+			}
+		`;
+
+		document.body.appendChild(this.surveyElement);
+		this._attachSurveyEvents();
+
+		requestAnimationFrame(() => {
+			this.surveyElement.style.opacity = '1';
+			this.surveyElement.style.transform =
+				this.surveyOptions.position === 'center'
+					? 'translate(-50%, -50%) scale(1)'
+					: 'translateY(0)';
+		});
+	}
+
+	_getSurveyConfig() {
+		if (this._isMultiPageSurvey()) {
+			return this._getCurrentPageConfig();
+		}
+
+		const npsScale = this._getNPSScale();
+		const npsUsesSegmentedScale = npsScale.values.length <= 7;
+		const npsContainerClass = npsUsesSegmentedScale
+			? 'feedback-survey-ces feedback-survey-rating-scale'
+			: 'feedback-survey-nps';
+		const npsButtonClass = npsUsesSegmentedScale
+			? 'feedback-survey-nps-btn feedback-survey-ces-btn feedback-survey-rating-scale-btn'
+			: 'feedback-survey-nps-btn';
+		const npsLowLabel =
+			this.surveyOptions.lowLabel ||
+			(npsScale.start === 0 ? 'Not likely' : 'Strongly Disagree');
+		const npsHighLabel =
+			this.surveyOptions.highLabel ||
+			(npsScale.start === 0 ? 'Very likely' : 'Strongly Agree');
+		const npsPrompt =
+			this.surveyOptions.description ||
+			this.surveyOptions.title ||
+			'How likely are you to recommend us?';
+		const csatPrompt =
+			this.surveyOptions.description ||
+			this.surveyOptions.title ||
+			'How satisfied are you?';
+		const cesPrompt =
+			this.surveyOptions.description ||
+			this.surveyOptions.title ||
+			'How easy was it?';
+
+		const configs = {
+			nps: {
+				title: this.surveyOptions.title || '',
+				description: npsPrompt,
+				html: `
+					<div class="${npsContainerClass}">
+						${npsScale.values
+							.map(
+								(n) => `
+							<button class="${npsButtonClass}" data-score="${n}">${n}</button>
+						`
+							)
+							.join('')}
+					</div>
+					${this._renderScaleLabels(npsLowLabel, npsHighLabel)}
+				`,
+			},
+			csat: {
+				title: this.surveyOptions.title || '',
+				description: csatPrompt,
+				html: `
+					<div class="feedback-survey-csat">
+						${[
+							'\uD83D\uDE1E',
+							'\uD83D\uDE15',
+							'\uD83D\uDE10',
+							'\uD83D\uDE42',
+							'\uD83D\uDE04',
+						]
+							.map(
+								(emoji, i) => `
+							<button class="feedback-survey-csat-btn" data-score="${i + 1}">${emoji}</button>
+						`
+							)
+							.join('')}
+					</div>
+					${this._renderScaleLabels(
+						this.surveyOptions.lowLabel || 'Very dissatisfied',
+						this.surveyOptions.highLabel || 'Very satisfied'
+					)}
+				`,
+			},
+			ces: {
+				title: this.surveyOptions.title || '',
+				description: cesPrompt,
+				html: `
+					<div class="feedback-survey-ces-list">
+						${['Very Difficult', 'Difficult', 'Neutral', 'Easy', 'Very Easy']
+							.map(
+								(label, i) => `
+							<button class="feedback-survey-ces-btn feedback-survey-ces-list-btn" data-score="${i + 1}">${label}</button>
+						`
+							)
+							.join('')}
+					</div>
+				`,
+			},
+			custom: {
+				title: this.surveyOptions.title || 'Quick Feedback',
+				description:
+					this.surveyOptions.description ||
+					'Help us improve by answering a few questions.',
+				html: this._renderCustomQuestions(),
+			},
+		};
+
+		return configs[this.surveyOptions.surveyType] || null;
+	}
+
+	_getNPSScale() {
+		const rawScale = Number(this.surveyOptions.ratingScale);
+		const scale = Number.isFinite(rawScale) && rawScale >= 2 ? rawScale : 5;
+		const start = scale === 11 ? 0 : 1;
+		return {
+			scale,
+			start,
+			values: Array.from({ length: scale }, (_, index) => start + index),
+		};
+	}
+
+	_renderScaleLabels(lowLabel, highLabel) {
+		const low = lowLabel || '';
+		const high = highLabel || '';
+		if (!low && !high) {
+			return '';
+		}
+		return `
+			<div class="feedback-survey-labels">
+				<span>${low}</span>
+				<span>${high}</span>
+			</div>
+		`;
+	}
+
+	_isRatingSurveyType(type = this.surveyOptions.surveyType) {
+		return type === 'nps' || type === 'csat' || type === 'ces';
+	}
+
+	_shouldShowTitle(config) {
+		if (!config || !config.title) {
+			return false;
+		}
+		if (typeof this.surveyOptions.showTitle === 'boolean') {
+			return this.surveyOptions.showTitle;
+		}
+		if (!this._isMultiPageSurvey() && this._isRatingSurveyType()) {
+			return !config.description;
+		}
+		return true;
+	}
+
+	_shouldShowDescription(config) {
+		if (typeof this.surveyOptions.showDescription === 'boolean') {
+			return this.surveyOptions.showDescription;
+		}
+		if (!this._isMultiPageSurvey() && this._isRatingSurveyType()) {
+			return Boolean(config && (config.description || config.title));
+		}
+		return Boolean(config && config.description);
+	}
+
+	_shouldShowFeedbackInput() {
+		if (this._isMultiPageSurvey()) {
+			return false;
+		}
+		if (typeof this.surveyOptions.showFeedbackInput === 'boolean') {
+			return this.surveyOptions.showFeedbackInput;
+		}
+		return false;
+	}
+
+	_shouldAutoSubmitOnSelect() {
+		if (typeof this.surveyOptions.autoSubmitOnSelect === 'boolean') {
+			return this.surveyOptions.autoSubmitOnSelect;
+		}
+		if (this._isMultiPageSurvey()) {
+			return false;
+		}
+		if (this.surveyOptions.showSubmitButton === true) {
+			return false;
+		}
+		return this._isRatingSurveyType() && !this._shouldShowFeedbackInput();
+	}
+
+	_shouldShowActions() {
+		if (this._isMultiPageSurvey()) {
+			const page = this._getCurrentPage();
+			if (page && page.type === 'link') {
+				return false;
+			}
+			return true;
+		}
+		if (typeof this.surveyOptions.showSubmitButton === 'boolean') {
+			return this.surveyOptions.showSubmitButton;
+		}
+		return !this._shouldAutoSubmitOnSelect();
+	}
+
+	_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 null;
+		}
+
+		return {
+			title: page.title || '',
+			description: page.description || '',
+			html: this._renderSurveyPage(page),
+		};
+	}
+
+	_renderSurveyPage(page) {
+		switch (page.type) {
+			case 'rating':
+				return this._renderRatingPage(page);
+			case 'multiple_choice':
+				return this._renderMultipleChoicePage(page);
+			case 'text':
+				return this._renderTextPage(page);
+			case 'link':
+				return this._renderLinkPage(page);
+			default:
+				return '';
+		}
+	}
+
+	_renderRatingPage(page) {
+		const pageId = page.id || `page_${this.surveyState.currentPageIndex}`;
+		const config = page.ratingConfig || page.rating_config || {};
+		const scale = Number(config.scale) || 5;
+		const topSurveyType = this.surveyOptions.surveyType;
+		const configType = config.survey_type;
+		let ratingType;
+		if (topSurveyType === 'ces') {
+			ratingType = 'ces';
+		} else if (topSurveyType === 'nps') {
+			ratingType = 'nps';
+		} else if (topSurveyType === 'csat' && !configType) {
+			ratingType = 'emoji';
+		} else {
+			ratingType = configType || topSurveyType || 'csat';
+		}
+		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 labels = this._renderScaleLabels(lowLabel, highLabel);
+
+		if (ratingType === 'nps') {
+			const npsScale = Number.isFinite(scale) && scale >= 2 ? scale : 5;
+			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';
+			return `
+				<div class="${containerClass}" 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>`;
+						})
+						.join('')}
+				</div>
+				${labels}
+			`;
+		}
+
+		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) {
+			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-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('')}
+			</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 ||
+			config.allow_multiple_selection === 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 || '';
+		const placeholder = page.placeholder || 'Type your answer...';
+
+		return `
+			<div class="feedback-survey-text-page" data-page-id="${pageId}">
+				<textarea class="feedback-survey-page-textarea" data-page-id="${pageId}" placeholder="${placeholder}">${value}</textarea>
+			</div>
+		`;
+	}
+
+	_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 ||
+			this.surveyOptions.customQuestions.length === 0
+		) {
+			return `
+				<div class="sdk-form-group">
+					<label class="sdk-label">What feature do you use most?</label>
+					<select class="feedback-survey-select" data-question="feature">
+						<option value="">Select a feature</option>
+						<option value="feedback">Feedback Collection</option>
+						<option value="surveys">Surveys</option>
+						<option value="analytics">Analytics</option>
+						<option value="integrations">Integrations</option>
+					</select>
+				</div>
+				<div class="sdk-form-group">
+					<label class="sdk-label">How often do you use it?</label>
+					<div class="feedback-survey-frequency">
+						${['Daily', 'Weekly', 'Monthly', 'Rarely']
+							.map(
+								(freq) => `
+							<button class="feedback-survey-freq-btn" data-freq="${freq}">${freq}</button>
+						`
+							)
+							.join('')}
+					</div>
+				</div>
+			`;
+		}
+
+		return this.surveyOptions.customQuestions
+			.map(
+				(q, index) => `
+			<div class="sdk-form-group">
+				<label class="sdk-label">${q.label}</label>
+				${this._renderQuestionInput(q, index)}
+			</div>
+		`
+			)
+			.join('');
+	}
+
+	_renderQuestionInput(question, index) {
+		switch (question.type) {
+			case 'select':
+				return `
+					<select class="feedback-survey-select" data-question="${question.id || index}">
+						<option value="">${question.placeholder || 'Select an option'}</option>
+						${question.options.map((opt) => `<option value="${opt.value}">${opt.label}</option>`).join('')}
+					</select>
+				`;
+			case 'text':
+				return `
+					<input type="text" class="feedback-survey-input" data-question="${question.id || index}" placeholder="${question.placeholder || ''}">
+				`;
+			default:
+				return '';
+		}
+	}
+
+	_attachSurveyEvents() {
+		if (!this.surveyElement) return;
+
+		const closeBtn = this.surveyElement.querySelector('.feedback-survey-close');
+		closeBtn.addEventListener('click', () => this._handleDismiss());
+
+		const submitBtn = this.surveyElement.querySelector(
+			'.feedback-survey-submit'
+		);
+		if (submitBtn) {
+			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'
+		);
+		if (textarea) {
+			textarea.addEventListener('input', (e) => {
+				this.surveyState.feedback = e.target.value;
+			});
+		}
+
+		this._attachTypeSpecificEvents();
+
+		this._escapeHandler = (e) => {
+			if (e.key === 'Escape') {
+				this._handleDismiss();
+			}
+		};
+		document.addEventListener('keydown', this._escapeHandler);
+	}
+
+	_attachTypeSpecificEvents() {
+		if (this._isMultiPageSurvey()) {
+			this._attachCurrentPageEvents();
+			return;
+		}
+
+		const type = this.surveyOptions.surveyType;
+
+		if (type === 'nps') {
+			this.surveyElement
+				.querySelectorAll('.feedback-survey-nps-btn')
+				.forEach((btn) => {
+					btn.addEventListener('click', () =>
+						this._selectNPS(parseInt(btn.dataset.score))
+					);
+				});
+		}
+
+		if (type === 'csat') {
+			this.surveyElement
+				.querySelectorAll('.feedback-survey-csat-btn')
+				.forEach((btn) => {
+					btn.addEventListener('click', () =>
+						this._selectCSAT(parseInt(btn.dataset.score))
+					);
+				});
+		}
+
+		if (type === 'ces') {
+			this.surveyElement
+				.querySelectorAll('.feedback-survey-ces-btn')
+				.forEach((btn) => {
+					btn.addEventListener('click', () =>
+						this._selectCES(parseInt(btn.dataset.score))
+					);
+				});
+		}
+
+		if (type === 'custom') {
+			this.surveyElement
+				.querySelectorAll('.feedback-survey-freq-btn')
+				.forEach((btn) => {
+					btn.addEventListener('click', () =>
+						this._selectFrequency(btn.dataset.freq)
+					);
+				});
+
+			this.surveyElement
+				.querySelectorAll('.feedback-survey-select')
+				.forEach((select) => {
+					select.addEventListener('change', (e) => {
+						this.surveyState.customAnswers[select.dataset.question] =
+							e.target.value;
+					});
+				});
+
+			this.surveyElement
+				.querySelectorAll('.feedback-survey-input')
+				.forEach((input) => {
+					input.addEventListener('input', (e) => {
+						this.surveyState.customAnswers[input.dataset.question] =
+							e.target.value;
+					});
+				});
+		}
+	}
+
+	_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 });
+				});
+			}
+		}
+
+		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) {
+		this.surveyState.score = score;
+		this.surveyElement
+			.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');
+				}
+			});
+		this._maybeAutoSubmit();
+	}
+
+	_selectCSAT(score) {
+		this.surveyState.score = score;
+		this.surveyElement
+			.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');
+				}
+			});
+		this._maybeAutoSubmit();
+	}
+
+	_maybeAutoSubmit() {
+		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;
+		btn.disabled = loading;
+		btn.innerHTML = loading
+			? `<iconify-icon icon="ph:circle-notch" width="16" height="16" style="animation: spin 0.8s linear infinite;"></iconify-icon> Submitting...`
+			: `Submit <iconify-icon icon="ph:arrow-right" width="16" height="16"></iconify-icon>`;
+	}
+
+	async _handleSubmit() {
+		const type = this.surveyOptions.surveyType;
+		if (this.surveyState.isSubmitting) {
+			return;
+		}
+
+		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
+		) {
+			this._showError('Please select a rating');
+			return;
+		}
+
+		this.surveyState.isSubmitting = true;
+		this._setSubmitLoading(true);
+
+		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._getSubmissionRating(),
+			feedback: this.surveyState.feedback,
+			answers: mergedAnswers,
+			...(respondent.respondentId && { respondentId: respondent.respondentId }),
+			...(respondent.email && { email: respondent.email }),
+		};
+
+		const response = {
+			type: type,
+			score: this._getSubmissionRating(),
+			feedback: this.surveyState.feedback,
+			customAnswers: mergedAnswers,
+			pageAnswers: normalizedPageAnswers,
+			timestamp: new Date().toISOString(),
+		};
+
+		try {
+			if (this.surveyOptions.onSubmit) {
+				this.surveyOptions.onSubmit(response);
+			}
+
+			const surveyId =
+				this.surveyOptions.surveyId || `local_${type}_${Date.now()}`;
+			await this.apiService.submitSurveyResponse(surveyId, responseData);
+
+			this.sdk.eventBus.emit('survey:submitted', { widget: this, response });
+			this._closeSurvey();
+			this._showSuccessNotification();
+		} catch (error) {
+			console.error('[SurveyWidget] Failed to submit survey:', error);
+			this._showError('Something went wrong. Please try again.');
+		} finally {
+			this.surveyState.isSubmitting = false;
+			this._setSubmitLoading(false);
+		}
+	}
+
+	_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,
+		};
+
+		// Emit question answered event
+		const page = this._getCurrentPage();
+		this.sdk.eventBus.emit('survey:questionAnswered', {
+			widget: this,
+			pageId,
+			pageType: page?.type,
+			answer: this.surveyState.pageAnswers[pageId],
+		});
+	}
+
+	_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;
+			}
+		}
+
+		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;
+		}
+
+		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 sdkMetadata =
+			typeof this.sdk.getMetadata === 'function'
+				? this.sdk.getMetadata() || {}
+				: {};
+		const apiMetadata =
+			this.apiService && typeof this.apiService.getMetadata === 'function'
+				? this.apiService.getMetadata() || {}
+				: {};
+		const localMetadata = this.options.metadata || {};
+
+		return {
+			respondentId:
+				this.surveyOptions.respondentId ||
+				localMetadata.user_id ||
+				sdkMetadata.user_id ||
+				apiMetadata.user_id ||
+				null,
+			email:
+				this.surveyOptions.email ||
+				localMetadata.email ||
+				sdkMetadata.email ||
+				apiMetadata.email ||
+				null,
+		};
+	}
+
+	async _handleDismiss() {
+		if (this.surveyOptions.surveyId) {
+			try {
+				await this.apiService.dismissSurvey(this.surveyOptions.surveyId);
+			} catch (error) {
+				console.error('[SurveyWidget] Failed to dismiss survey:', error);
+			}
+		}
+
+		if (this.surveyOptions.onDismiss) {
+			this.surveyOptions.onDismiss();
+		}
+		this.sdk.eventBus.emit('survey:dismissed', { widget: this });
+		this._closeSurvey();
+	}
+
+	_showError(message) {
+		const existing = this.surveyElement.querySelector('.feedback-survey-error');
+		if (existing) existing.remove();
+
+		const error = document.createElement('div');
+		error.className = 'feedback-survey-error';
+		error.innerHTML = `<iconify-icon icon="ph:warning-duotone" width="15" height="15"></iconify-icon><span>${message}</span>`;
+
+		this.surveyElement.prepend(error);
+
+		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>
+			</div>
+		`;
+		document.body.appendChild(notification);
+
+		setTimeout(() => {
+			notification.style.opacity = '0';
+			notification.style.transition = 'opacity 0.3s ease';
+			setTimeout(() => notification.remove(), 300);
+		}, 3000);
+	}
+
+	_closeSurvey(resetState = true, immediate = false) {
+		if (this._escapeHandler) {
+			document.removeEventListener('keydown', this._escapeHandler);
+			this._escapeHandler = null;
+		}
+
+		const surveyEl = this.surveyElement;
+		const backdropEl = this.backdropElement;
+
+		if (surveyEl) {
+			surveyEl.style.opacity = '0';
+			const pos = this.surveyOptions.position;
+			surveyEl.style.transform =
+				pos === 'center'
+					? 'translate(-50%, -50%) scale(0.95)'
+					: pos === 'bottom'
+						? 'translateY(100%)'
+						: 'translateY(10px)';
+			if (immediate) {
+				if (surveyEl.parentNode) {
+					surveyEl.parentNode.removeChild(surveyEl);
+				}
+			} else {
+				setTimeout(() => {
+					if (surveyEl && surveyEl.parentNode) {
+						surveyEl.parentNode.removeChild(surveyEl);
+					}
+				}, 300);
+			}
+			this.surveyElement = null;
+		}
+
+		if (backdropEl) {
+			backdropEl.style.opacity = '0';
+			if (immediate) {
+				if (backdropEl.parentNode) {
+					backdropEl.parentNode.removeChild(backdropEl);
+				}
+			} else {
+				setTimeout(() => {
+					if (backdropEl && backdropEl.parentNode) {
+						backdropEl.parentNode.removeChild(backdropEl);
+					}
+				}, 300);
+			}
+			this.backdropElement = null;
+		}
+
+		if (resetState) {
+			this.surveyState = {
+				score: null,
+				feedback: '',
+				customAnswers: {},
+				pageAnswers: {},
+				currentPageIndex: 0,
+				isSubmitting: false,
+				isVisible: false,
+			};
+		}
+
+		this.sdk.eventBus.emit('survey:closed', { widget: this });
+	}
+
+	destroy() {
+		this._closeSurvey(true, true);
+		super.destroy();
+	}
+}