@product7/feedback-sdk 1.6.8 → 1.7.0

package/dist/feedback-sdk.js

@@ -179,31 +179,172 @@
 	const MOCK_SURVEYS = [
 		{
 			id: 'mock_nps_survey',
-			type: 'nps',
-			title: 'How likely are you to recommend us?',
-			description: 'Your feedback helps us improve',
-			low_label: 'Not likely',
-			high_label: 'Very likely',
-			trigger: 'manual',
+			name: 'NPS Score',
+			slug: 'nps',
 			status: 'active',
+			trigger_type: 'manual',
+			pages: [
+				{
+					id: 'nps-page-1',
+					type: 'rating',
+					title: 'How likely are you to recommend us to a friend?',
+					description: '',
+					placeholder: '',
+					rating_config: { scale: 11, low_label: 'Very unlikely', high_label: 'Very likely', survey_type: 'nps' },
+					multiple_choice_config: null,
+					link_config: null,
+					after_this_page: { default: 'end_survey', conditions: [] },
+					required: true,
+				},
+			],
 		},
 		{
 			id: 'mock_csat_survey',
-			type: 'csat',
-			title: 'How satisfied are you?',
-			description: 'Rate your experience with our product',
-			trigger: 'manual',
+			name: 'CSAT Survey',
+			slug: 'csat',
 			status: 'active',
+			trigger_type: 'manual',
+			pages: [
+				{
+					id: 'csat-page-1',
+					type: 'rating',
+					title: 'How satisfied are you with our service?',
+					description: '',
+					placeholder: '',
+					rating_config: { scale: 5, low_label: 'Very dissatisfied', high_label: 'Very satisfied', survey_type: 'emoji' },
+					multiple_choice_config: null,
+					link_config: null,
+					after_this_page: { default: 'end_survey', conditions: [] },
+					required: true,
+				},
+			],
 		},
 		{
 			id: 'mock_ces_survey',
-			type: 'ces',
-			title: 'How easy was it?',
-			description: 'Rate the ease of completing your task',
-			low_label: 'Very difficult',
-			high_label: 'Very easy',
-			trigger: 'manual',
+			name: 'Customer Effort Score',
+			slug: 'ces',
+			status: 'active',
+			trigger_type: 'manual',
+			pages: [
+				{
+					id: 'ces-page-1',
+					type: 'rating',
+					title: 'How easy was it to use our product?',
+					description: '',
+					placeholder: '',
+					rating_config: { scale: 5, low_label: 'Very difficult', high_label: 'Very easy', survey_type: 'ces' },
+					multiple_choice_config: null,
+					link_config: null,
+					after_this_page: { default: 'end_survey', conditions: [] },
+					required: true,
+				},
+			],
+		},
+		{
+			id: 'mock_open_question_survey',
+			name: 'Open Question',
+			slug: 'open-question',
 			status: 'active',
+			trigger_type: 'manual',
+			pages: [
+				{
+					id: 'open-page-1',
+					type: 'text',
+					title: 'What could we do better?',
+					description: 'Is there anything we could do to make our product better for you?',
+					placeholder: 'Type your answer here',
+					rating_config: null,
+					multiple_choice_config: null,
+					link_config: null,
+					after_this_page: { default: 'end_survey', conditions: [] },
+					required: true,
+				},
+			],
+		},
+		{
+			id: 'mock_product_idea_poll_survey',
+			name: 'Product Idea Poll',
+			slug: 'product-idea-poll',
+			status: 'active',
+			trigger_type: 'manual',
+			pages: [
+				{
+					id: 'poll-page-1',
+					type: 'multiple_choice',
+					title: 'Which feature should we add next?',
+					description: 'Vote on the feature you would like to see next.',
+					placeholder: '',
+					rating_config: null,
+					multiple_choice_config: {
+						allow_multiple_selection: false,
+						survey_type: 'regular',
+						options: [
+							{ id: 'opt1', label: 'Better reporting' },
+							{ id: 'opt2', label: 'Mobile app' },
+							{ id: 'opt3', label: 'Integrations' },
+							{ id: 'opt4', label: 'AI features' },
+						],
+					},
+					link_config: null,
+					after_this_page: { default: 'end_survey', conditions: [] },
+					required: true,
+				},
+			],
+		},
+		{
+			id: 'mock_pmf_survey',
+			name: 'Product Market Fit (PMF)',
+			slug: 'pmf',
+			status: 'active',
+			trigger_type: 'manual',
+			pages: [
+				{
+					id: 'pmf-page-1',
+					type: 'multiple_choice',
+					title: 'How would you feel if you could no longer use our product?',
+					description: '',
+					placeholder: '',
+					rating_config: null,
+					multiple_choice_config: {
+						allow_multiple_selection: false,
+						survey_type: 'regular',
+						options: [
+							{ id: 'very_disappointed', label: 'Very disappointed' },
+							{ id: 'somewhat_disappointed', label: 'Somewhat disappointed' },
+							{ id: 'not_disappointed', label: 'Not disappointed' },
+						],
+					},
+					link_config: null,
+					after_this_page: { default: 'end_survey', conditions: [] },
+					required: true,
+				},
+			],
+		},
+		{
+			id: 'mock_user_interview_survey',
+			name: 'User Interview Request',
+			slug: 'user-interview',
+			status: 'active',
+			trigger_type: 'manual',
+			pages: [
+				{
+					id: 'interview-page-1',
+					type: 'link',
+					title: 'Would you like to hop on a quick demo?',
+					description: 'We would love to hear your thoughts and answer any questions you have.',
+					placeholder: '',
+					rating_config: null,
+					multiple_choice_config: null,
+					link_config: {
+						button_text: 'Book a demo',
+						link_text: '',
+						redirect_url: 'https://example.com',
+						open_in: 'new_tab',
+					},
+					after_this_page: { default: 'end_survey', conditions: [] },
+					required: true,
+				},
+			],
 		},
 	];
 
@@ -2390,6 +2531,7 @@
 			this.isLoading = false;
 			this.modalElement = null;
 			this.sidebarElement = null;
+			this.listModalBackdropElement = null;
 			this.currentIndex = 0;
 		}
 
@@ -2470,10 +2612,12 @@
 		}
 
 		_createModal() {
-			this.backdropElement = document.createElement('div');
-			this.backdropElement.className = `changelog-modal-backdrop changelog-theme-${this.options.theme || 'light'}`;
-			document.body.appendChild(this.backdropElement);
-			this.backdropElement.addEventListener('click', () => this.closeModal());
+			if (this.options.showBackdrop !== false) {
+				this.backdropElement = document.createElement('div');
+				this.backdropElement.className = `changelog-modal-backdrop changelog-theme-${this.options.theme || 'light'}`;
+				document.body.appendChild(this.backdropElement);
+				this.backdropElement.addEventListener('click', () => this.closeModal());
+			}
 
 			this.modalElement = document.createElement('div');
 			this.modalElement.className = `changelog-modal changelog-theme-${this.options.theme || 'light'}`;
@@ -2613,12 +2757,14 @@
 		}
 
 		_createListModal() {
-			this.listModalBackdropElement = document.createElement('div');
-			this.listModalBackdropElement.className = `changelog-list-modal-backdrop changelog-theme-${this.options.theme || 'light'}`;
-			document.body.appendChild(this.listModalBackdropElement);
-			this.listModalBackdropElement.addEventListener('click', () =>
-				this.closeSidebar()
-			);
+			if (this.options.showBackdrop !== false) {
+				this.listModalBackdropElement = document.createElement('div');
+				this.listModalBackdropElement.className = `changelog-list-modal-backdrop changelog-theme-${this.options.theme || 'light'}`;
+				document.body.appendChild(this.listModalBackdropElement);
+				this.listModalBackdropElement.addEventListener('click', () =>
+					this.closeSidebar()
+				);
+			}
 
 			this.listModalElement = document.createElement('div');
 			this.listModalElement.className = `changelog-list-modal changelog-theme-${this.options.theme || 'light'}`;
@@ -7363,6 +7509,8 @@
 					return this._renderMultipleChoicePage(page);
 				case 'text':
 					return this._renderTextPage(page);
+				case 'link':
+					return this._renderLinkPage(page);
 				default:
 					return this._renderTextPage(page);
 			}
@@ -7421,6 +7569,21 @@
 			`;
 			}
 
+			if (ratingType === 'ces') {
+				const cesLabels = ['Very Difficult', 'Difficult', 'Neutral', 'Easy', 'Very Easy'];
+				return `
+				<div class="feedback-survey-ces" 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-btn${selected}" data-page-id="${pageId}" data-score="${score}">${label}</button>`;
+						})
+						.join('')}
+				</div>
+			`;
+			}
+
 			if (ratingType === 'emoji' && scale === 5) {
 				const emojis = [
 					'\uD83D\uDE1E',
@@ -7463,7 +7626,9 @@
 				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 === true ||
+				config.multiple === true ||
+				config.allow_multiple_selection === true;
 			const pageAnswer = this.surveyState.pageAnswers[pageId] || {};
 			const selectedValues = Array.isArray(pageAnswer.values)
 				? pageAnswer.values
@@ -7490,10 +7655,36 @@
 			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="Type your answer...">${value}</textarea>
+				<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;
+
+			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}
+				</a>
 			</div>
 		`;
 		}
@@ -7742,6 +7933,24 @@
 					});
 				}
 			}
+
+			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) {
@@ -7933,6 +8142,13 @@
 				}
 			}
 
+			if (page.type === 'link') {
+				if (page.required && !answer.clicked) {
+					this._showError('Please click the link to continue');
+					return false;
+				}
+			}
+
 			return true;
 		}
 
@@ -8787,6 +9003,7 @@
 				triggerText: "What's New",
 				showBadge: true,
 				viewButtonText: 'View Update',
+				showBackdrop: true,
 			};
 
 			const configDefaults = this._getWidgetTypeConfig('changelog');