@product7/feedback-sdk 1.1.8 → 1.2.0

package/package.json

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

package/src/core/APIService.js

@@ -9,6 +9,39 @@ const MOCK_CONFIG = {
 	displayMode: 'modal',
 };
 
+// Mock surveys for development
+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',
+		status: 'active',
+	},
+	{
+		id: 'mock_csat_survey',
+		type: 'csat',
+		title: 'How satisfied are you?',
+		description: 'Rate your experience with our product',
+		trigger: 'manual',
+		status: 'active',
+	},
+	{
+		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',
+		status: 'active',
+	},
+];
+
+// Environment URLs
 const ENV_URLS = {
 	production: {
 		base: 'https://api.product7.io/api/v1',
@@ -158,6 +191,245 @@ export class APIService {
 		}
 	}
 
+	/**
+	 * Get active surveys for the current user/context
+	 * @param {Object} context - Optional context overrides for targeting
+	 * @param {string} context.url - Override current URL
+	 * @param {Object} context.userProperties - Additional user properties
+	 * @returns {Promise<Array>} Array of active surveys matching targeting rules
+	 */
+	async getActiveSurveys(context = {}) {
+		if (!this.isSessionValid()) {
+			await this.init();
+		}
+
+		if (!this.sessionToken) {
+			throw new APIError(401, 'No valid session token available');
+		}
+
+		// Mock mode - return mock surveys
+		if (this.mock) {
+			await new Promise((resolve) => setTimeout(resolve, 200));
+			return {
+				success: true,
+				data: MOCK_SURVEYS,
+			};
+		}
+
+		try {
+			const queryParams = new URLSearchParams();
+
+			// Auto-detect current URL or use provided override
+			const currentUrl =
+				context.url ||
+				(typeof window !== 'undefined' ? window.location.href : '');
+			if (currentUrl) {
+				queryParams.append('url', currentUrl);
+			}
+
+			// Auto-detect device info
+			const deviceInfo = this._getDeviceInfo();
+			if (deviceInfo.device) queryParams.append('device', deviceInfo.device);
+			if (deviceInfo.browser) queryParams.append('browser', deviceInfo.browser);
+			if (deviceInfo.os) queryParams.append('os', deviceInfo.os);
+
+			// Add user properties if provided
+			if (context.userProperties) {
+				queryParams.append(
+					'user_properties',
+					JSON.stringify(context.userProperties)
+				);
+			}
+
+			const endpoint = `/widget/surveys/active${queryParams.toString() ? '?' + queryParams.toString() : ''}`;
+
+			const response = await this._makeRequest(endpoint, {
+				method: 'GET',
+				headers: {
+					Authorization: `Bearer ${this.sessionToken}`,
+				},
+			});
+
+			return response;
+		} catch (error) {
+			if (error.status === 401) {
+				this.sessionToken = null;
+				this.sessionExpiry = null;
+				await this.init();
+				return this.getActiveSurveys(context);
+			}
+
+			throw new APIError(
+				error.status || 500,
+				`Failed to get active surveys: ${error.message}`,
+				error.response
+			);
+		}
+	}
+
+	/**
+	 * Auto-detect device, browser, and OS info
+	 * @returns {Object} Device info object
+	 */
+	_getDeviceInfo() {
+		if (typeof navigator === 'undefined') {
+			return { device: null, browser: null, os: null };
+		}
+
+		const ua = navigator.userAgent;
+
+		// Detect device type
+		let device = 'desktop';
+		if (/Mobi|Android/i.test(ua)) {
+			device = /Tablet|iPad/i.test(ua) ? 'tablet' : 'mobile';
+		}
+
+		// Detect browser
+		let browser = 'unknown';
+		if (ua.includes('Firefox')) browser = 'firefox';
+		else if (ua.includes('Edg')) browser = 'edge';
+		else if (ua.includes('Chrome')) browser = 'chrome';
+		else if (ua.includes('Safari')) browser = 'safari';
+		else if (ua.includes('Opera') || ua.includes('OPR')) browser = 'opera';
+
+		// Detect OS
+		let os = 'unknown';
+		if (ua.includes('Windows')) os = 'windows';
+		else if (ua.includes('Mac')) os = 'macos';
+		else if (ua.includes('Linux')) os = 'linux';
+		else if (ua.includes('Android')) os = 'android';
+		else if (ua.includes('iPhone') || ua.includes('iPad')) os = 'ios';
+
+		return { device, browser, os };
+	}
+
+	/**
+	 * Submit a survey response
+	 * @param {string} surveyId - The survey ID
+	 * @param {Object} responseData - The survey response data
+	 * @param {number|string} responseData.rating - The rating/score value
+	 * @param {string} responseData.feedback - Optional text feedback
+	 * @param {Object} responseData.answers - For custom surveys, key-value pairs
+	 * @returns {Promise<Object>} Submission result
+	 */
+	async submitSurveyResponse(surveyId, responseData) {
+		if (!this.isSessionValid()) {
+			await this.init();
+		}
+
+		if (!this.sessionToken) {
+			throw new APIError(401, 'No valid session token available');
+		}
+
+		if (!surveyId) {
+			throw new APIError(400, 'Survey ID is required');
+		}
+
+		// Mock mode - simulate success
+		if (this.mock) {
+			await new Promise((resolve) => setTimeout(resolve, 300));
+			return {
+				success: true,
+				data: {
+					id: 'mock_response_' + Date.now(),
+					survey_id: surveyId,
+					...responseData,
+				},
+				message: 'Survey response submitted successfully!',
+			};
+		}
+
+		const payload = {
+			rating: responseData.rating,
+			feedback: responseData.feedback || '',
+			answers: responseData.answers || {},
+		};
+
+		try {
+			const response = await this._makeRequest(
+				`/widget/surveys/${surveyId}/responses`,
+				{
+					method: 'POST',
+					body: JSON.stringify(payload),
+					headers: {
+						'Content-Type': 'application/json',
+						Authorization: `Bearer ${this.sessionToken}`,
+					},
+				}
+			);
+
+			return response;
+		} catch (error) {
+			if (error.status === 401) {
+				this.sessionToken = null;
+				this.sessionExpiry = null;
+				await this.init();
+				return this.submitSurveyResponse(surveyId, responseData);
+			}
+
+			throw new APIError(
+				error.status || 500,
+				`Failed to submit survey response: ${error.message}`,
+				error.response
+			);
+		}
+	}
+
+	/**
+	 * Dismiss a survey (mark as seen but not completed)
+	 * @param {string} surveyId - The survey ID to dismiss
+	 * @returns {Promise<Object>} Dismissal result
+	 */
+	async dismissSurvey(surveyId) {
+		if (!this.isSessionValid()) {
+			await this.init();
+		}
+
+		if (!this.sessionToken) {
+			throw new APIError(401, 'No valid session token available');
+		}
+
+		if (!surveyId) {
+			throw new APIError(400, 'Survey ID is required');
+		}
+
+		// Mock mode - simulate success
+		if (this.mock) {
+			await new Promise((resolve) => setTimeout(resolve, 100));
+			return {
+				success: true,
+				message: 'Survey dismissed successfully',
+			};
+		}
+
+		try {
+			const response = await this._makeRequest(
+				`/widget/surveys/${surveyId}/dismiss`,
+				{
+					method: 'POST',
+					headers: {
+						Authorization: `Bearer ${this.sessionToken}`,
+					},
+				}
+			);
+
+			return response;
+		} catch (error) {
+			if (error.status === 401) {
+				this.sessionToken = null;
+				this.sessionExpiry = null;
+				await this.init();
+				return this.dismissSurvey(surveyId);
+			}
+
+			throw new APIError(
+				error.status || 500,
+				`Failed to dismiss survey: ${error.message}`,
+				error.response
+			);
+		}
+	}
+
 	isSessionValid() {
 		return (
 			this.sessionToken && this.sessionExpiry && new Date() < this.sessionExpiry

package/src/core/FeedbackSDK.js

@@ -84,8 +84,76 @@ export class FeedbackSDK {
 	}
 
 	/**
-	 * Show a survey widget
+	 * Fetch active surveys from the backend
+	 * @param {Object} context - Optional context for targeting
+	 * @param {string} context.page - Current page/route
+	 * @param {string} context.event - Event trigger name
+	 * @returns {Promise<Array>} Array of active survey configurations
+	 */
+	async getActiveSurveys(context = {}) {
+		if (!this.initialized) {
+			throw new SDKError(
+				'SDK must be initialized before fetching surveys. Call init() first.'
+			);
+		}
+
+		try {
+			const result = await this.apiService.getActiveSurveys(context);
+			return result.data || [];
+		} catch (error) {
+			this.eventBus.emit('sdk:error', { error });
+			throw new SDKError(
+				`Failed to fetch active surveys: ${error.message}`,
+				error
+			);
+		}
+	}
+
+	/**
+	 * Show a survey by its backend ID
+	 * Fetches survey configuration from the backend and displays it
+	 * @param {string} surveyId - The backend survey ID
+	 * @param {Object} options - Additional display options
+	 * @param {string} options.position - Position override
+	 * @param {string} options.theme - Theme override
+	 * @param {Function} options.onSubmit - Callback when survey is submitted
+	 * @param {Function} options.onDismiss - Callback when survey is dismissed
+	 * @returns {Promise<SurveyWidget>} The survey widget instance
+	 */
+	async showSurveyById(surveyId, options = {}) {
+		if (!this.initialized) {
+			throw new SDKError(
+				'SDK must be initialized before showing surveys. Call init() first.'
+			);
+		}
+
+		// Fetch active surveys to find the one with matching ID
+		const surveys = await this.getActiveSurveys();
+		const surveyConfig = surveys.find((s) => s.id === surveyId);
+
+		if (!surveyConfig) {
+			throw new SDKError(
+				`Survey with ID '${surveyId}' not found or not active`
+			);
+		}
+
+		return this.showSurvey({
+			surveyId: surveyConfig.id,
+			surveyType: surveyConfig.type,
+			title: surveyConfig.title,
+			description: surveyConfig.description,
+			lowLabel: surveyConfig.low_label,
+			highLabel: surveyConfig.high_label,
+			customQuestions: surveyConfig.questions,
+			...options,
+		});
+	}
+
+	/**
+	 * Show a survey widget (local/manual mode)
+	 * For backend-driven surveys, use showSurveyById() instead
 	 * @param {Object} options - Survey options
+	 * @param {string} options.surveyId - Backend survey ID (for API tracking)
 	 * @param {string} options.surveyType - Type of survey: 'nps', 'csat', 'ces', 'custom'
 	 * @param {string} options.position - Position: 'bottom-right', 'bottom-left', 'center', 'bottom'
 	 * @param {string} options.theme - Theme: 'light', 'dark'
@@ -105,6 +173,7 @@ export class FeedbackSDK {
 		}
 
 		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',

package/src/index.js

@@ -1,6 +1,7 @@
 import { APIService } from './core/APIService.js';
 import { EventBus } from './core/EventBus.js';
 import { FeedbackSDK } from './core/FeedbackSDK.js';
+import { MESSENGER_STYLES } from './styles/messengerStyles.js';
 import { CSS_STYLES } from './styles/styles.js';
 import {
 	APIError,
@@ -13,6 +14,7 @@ import * as helpers from './utils/helpers.js';
 import { BaseWidget } from './widgets/BaseWidget.js';
 import { ButtonWidget } from './widgets/ButtonWidget.js';
 import { InlineWidget } from './widgets/InlineWidget.js';
+import { MessengerWidget } from './widgets/MessengerWidget.js';
 import { SurveyWidget } from './widgets/SurveyWidget.js';
 import { TabWidget } from './widgets/TabWidget.js';
 import { WidgetFactory } from './widgets/WidgetFactory.js';
@@ -24,7 +26,7 @@ function injectStyles() {
 	) {
 		const style = document.createElement('style');
 		style.id = 'feedback-sdk-styles';
-		style.textContent = CSS_STYLES;
+		style.textContent = CSS_STYLES + MESSENGER_STYLES;
 		document.head.appendChild(style);
 	}
 }
@@ -96,6 +98,7 @@ const FeedbackSDKExport = {
 	TabWidget,
 	InlineWidget,
 	SurveyWidget,
+	MessengerWidget,
 	WidgetFactory,
 	EventBus,
 	APIService,
@@ -182,6 +185,7 @@ export {
 	FeedbackSDK,
 	helpers,
 	InlineWidget,
+	MessengerWidget,
 	SDKError,
 	SurveyWidget,
 	TabWidget,