@product7/feedback-sdk 1.5.2 → 1.5.4

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@product7/feedback-sdk",
-	"version": "1.5.2",
+	"version": "1.5.4",
 	"description": "JavaScript SDK for integrating Product7 feedback widgets into any website",
 	"main": "dist/feedback-sdk.js",
 	"module": "src/index.js",

package/src/core/FeedbackSDK.js

@@ -94,7 +94,9 @@ export class FeedbackSDK {
 
 		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;
 			}
@@ -140,12 +142,13 @@ export class FeedbackSDK {
 
 		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,
 		});
 	}
@@ -166,20 +169,23 @@ export class FeedbackSDK {
 			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();
@@ -194,6 +200,14 @@ export class FeedbackSDK {
 			return shouldShow;
 		}
 
+		const eligibilityShouldShow = this._getSurveyField(
+			survey.eligibility || {},
+			['shouldShow', 'should_show']
+		);
+		if (typeof eligibilityShouldShow === 'boolean') {
+			return eligibilityShouldShow;
+		}
+
 		const eligible = this._getSurveyField(survey, [
 			'eligible',
 			'isEligible',
@@ -208,6 +222,14 @@ export class FeedbackSDK {
 			return !isAnswered;
 		}
 
+		const eligibilityAnswered = this._getSurveyField(survey.eligibility || {}, [
+			'isAnswered',
+			'is_answered',
+		]);
+		if (typeof eligibilityAnswered === 'boolean') {
+			return !eligibilityAnswered;
+		}
+
 		return true;
 	}
 
@@ -221,6 +243,15 @@ export class FeedbackSDK {
 			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';
@@ -229,6 +260,96 @@ export class FeedbackSDK {
 		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) {

package/src/styles/survey.js

@@ -311,13 +311,73 @@ export const surveyStyles = `
   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);