@product7/feedback-sdk 1.2.7 → 1.3.0

package/src/core/BaseAPIService.js

@@ -0,0 +1,245 @@
+import { APIError } from '../utils/errors.js';
+
+export class BaseAPIService {
+	constructor(config = {}) {
+		this.workspace = config.workspace;
+		this.sessionToken = null;
+		this.sessionExpiry = null;
+		this.userContext = config.userContext || null;
+		this.mock = config.mock || false;
+		this.env = config.env || 'production';
+		this.baseURL = this._getBaseURL(config);
+
+		this._loadStoredSession();
+	}
+
+	_getBaseURL(config) {
+		if (config.apiUrl) return config.apiUrl;
+
+		const ENV_URLS = {
+			production: {
+				base: 'https://api.product7.io/api/v1',
+				withWorkspace: (ws) => `https://${ws}.api.product7.io/api/v1`,
+			},
+			staging: {
+				base: 'https://staging.api.product7.io/api/v1',
+				withWorkspace: (ws) => `https://${ws}.staging.api.product7.io/api/v1`,
+			},
+		};
+
+		const envConfig = ENV_URLS[this.env] || ENV_URLS.production;
+		return this.workspace
+			? envConfig.withWorkspace(this.workspace)
+			: envConfig.base;
+	}
+
+	async init(userContext = null) {
+		if (userContext) {
+			this.userContext = userContext;
+		}
+
+		if (this.isSessionValid()) {
+			return { sessionToken: this.sessionToken };
+		}
+
+		if (!this.workspace || !this.userContext) {
+			throw new APIError(
+				400,
+				`Missing ${!this.workspace ? 'workspace' : 'user context'} for initialization`
+			);
+		}
+
+		if (this.mock) {
+			return this._initMockSession();
+		}
+
+		return this._initRealSession();
+	}
+
+	async _initMockSession() {
+		this.sessionToken = 'mock_session_' + Date.now();
+		this.sessionExpiry = new Date(Date.now() + 3600 * 1000);
+		this._storeSession();
+		return {
+			sessionToken: this.sessionToken,
+			config: {
+				primaryColor: '#21244A',
+				backgroundColor: '#ffffff',
+				textColor: '#1F2937',
+				boardId: 'feature-requests',
+				size: 'medium',
+				displayMode: 'modal',
+			},
+			expiresIn: 3600,
+		};
+	}
+
+	async _initRealSession() {
+		const payload = {
+			workspace: this.workspace,
+			user: this.userContext,
+		};
+
+		try {
+			const response = await this._makeRequest('/widget/init', {
+				method: 'POST',
+				body: JSON.stringify(payload),
+				headers: { 'Content-Type': 'application/json' },
+			});
+
+			this.sessionToken = response.session_token;
+			this.sessionExpiry = new Date(Date.now() + response.expires_in * 1000);
+			this._storeSession();
+
+			return {
+				sessionToken: this.sessionToken,
+				config: response.config || {},
+				expiresIn: response.expires_in,
+			};
+		} catch (error) {
+			throw new APIError(
+				error.status || 500,
+				`Failed to initialize widget: ${error.message}`,
+				error.response
+			);
+		}
+	}
+
+	async _ensureSession() {
+		if (!this.isSessionValid()) {
+			await this.init();
+		}
+		if (!this.sessionToken) {
+			throw new APIError(401, 'No valid session token available');
+		}
+	}
+
+	async _handleAuthRetry(method, ...args) {
+		try {
+			return await method.apply(this, args);
+		} catch (error) {
+			if (error.status === 401) {
+				this.sessionToken = null;
+				this.sessionExpiry = null;
+				await this.init();
+				return await method.apply(this, args);
+			}
+			throw error;
+		}
+	}
+
+	isSessionValid() {
+		return (
+			this.sessionToken && this.sessionExpiry && new Date() < this.sessionExpiry
+		);
+	}
+
+	setUserContext(userContext) {
+		this.userContext = userContext;
+		this._storeData('feedbackSDK_userContext', userContext);
+	}
+
+	getUserContext() {
+		return this.userContext;
+	}
+
+	clearSession() {
+		this.sessionToken = null;
+		this.sessionExpiry = null;
+		this._removeData('feedbackSDK_session');
+		this._removeData('feedbackSDK_userContext');
+	}
+
+	_storeSession() {
+		if (typeof localStorage === 'undefined') return;
+		try {
+			const sessionData = {
+				token: this.sessionToken,
+				expiry: this.sessionExpiry.toISOString(),
+				workspace: this.workspace,
+			};
+			this._storeData('feedbackSDK_session', sessionData);
+		} catch (error) {
+			// Silent fail
+		}
+	}
+
+	_loadStoredSession() {
+		if (typeof localStorage === 'undefined') return false;
+		try {
+			const stored = localStorage.getItem('feedbackSDK_session');
+			if (!stored) return false;
+
+			const sessionData = JSON.parse(stored);
+			this.sessionToken = sessionData.token;
+			this.sessionExpiry = new Date(sessionData.expiry);
+
+			return this.isSessionValid();
+		} catch (error) {
+			return false;
+		}
+	}
+
+	_storeData(key, value) {
+		if (typeof localStorage !== 'undefined') {
+			localStorage.setItem(key, JSON.stringify(value));
+		}
+	}
+
+	_removeData(key) {
+		if (typeof localStorage !== 'undefined') {
+			localStorage.removeItem(key);
+		}
+	}
+
+	async _makeRequest(endpoint, options = {}) {
+		const url = `${this.baseURL}${endpoint}`;
+
+		try {
+			const response = await fetch(url, options);
+
+			if (!response.ok) {
+				let errorMessage = `HTTP ${response.status}`;
+				let responseData = null;
+
+				try {
+					responseData = await response.json();
+					errorMessage =
+						responseData.message || responseData.error || errorMessage;
+				} catch (e) {
+					errorMessage = (await response.text()) || errorMessage;
+				}
+
+				throw new APIError(response.status, errorMessage, responseData);
+			}
+
+			const contentType = response.headers.get('content-type');
+			if (contentType && contentType.includes('application/json')) {
+				return await response.json();
+			}
+
+			return await response.text();
+		} catch (error) {
+			if (error instanceof APIError) throw error;
+			throw new APIError(0, error.message, null);
+		}
+	}
+
+	_buildQueryParams(params) {
+		const queryParams = new URLSearchParams();
+		Object.entries(params).forEach(([key, value]) => {
+			if (value !== undefined && value !== null) {
+				queryParams.append(
+					key,
+					typeof value === 'object' ? JSON.stringify(value) : value
+				);
+			}
+		});
+		return queryParams.toString();
+	}
+
+	_getEndpointWithParams(endpoint, params) {
+		const queryString = this._buildQueryParams(params);
+		return `${endpoint}${queryString ? '?' + queryString : ''}`;
+	}
+}

package/src/core/FeedbackSDK.js

@@ -30,7 +30,6 @@ export class FeedbackSDK {
 		try {
 			const initData = await this.apiService.init(this.config.userContext);
 
-			// Merge backend config as base, local config overrides
 			if (initData.config) {
 				this.config = deepMerge(initData.config, this.config);
 			}
@@ -83,13 +82,6 @@ export class FeedbackSDK {
 		return this.widgets.get(id);
 	}
 
-	/**
-	 * 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(
@@ -109,17 +101,6 @@ export class FeedbackSDK {
 		}
 	}
 
-	/**
-	 * 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(
@@ -127,7 +108,6 @@ export class FeedbackSDK {
 			);
 		}
 
-		// Fetch active surveys to find the one with matching ID
 		const surveys = await this.getActiveSurveys();
 		const surveyConfig = surveys.find((s) => s.id === surveyId);
 
@@ -149,22 +129,6 @@ export class FeedbackSDK {
 		});
 	}
 
-	/**
-	 * 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'
-	 * @param {string} options.title - Custom title
-	 * @param {string} options.description - Custom description
-	 * @param {string} options.lowLabel - Low end label
-	 * @param {string} options.highLabel - High end label
-	 * @param {Function} options.onSubmit - Callback when survey is submitted
-	 * @param {Function} options.onDismiss - Callback when survey is dismissed
-	 * @returns {SurveyWidget} The survey widget instance
-	 */
 	showSurvey(options = {}) {
 		if (!this.initialized) {
 			throw new SDKError(
@@ -192,20 +156,6 @@ export class FeedbackSDK {
 		return surveyWidget;
 	}
 
-	/**
-	 * Show a changelog widget with sidebar
-	 * @param {Object} options - Changelog widget options
-	 * @param {string} options.position - Position: 'bottom-right', 'bottom-left', 'top-right', 'top-left'
-	 * @param {string} options.theme - Theme: 'light', 'dark'
-	 * @param {string} options.title - Sidebar title
-	 * @param {string} options.triggerText - Text on the trigger button
-	 * @param {boolean} options.showBadge - Show notification badge
-	 * @param {string} options.viewButtonText - Text for the view update button
-	 * @param {string} options.changelogBaseUrl - Base URL for changelog links
-	 * @param {boolean} options.openInNewTab - Open changelog links in new tab (default: true)
-	 * @param {Function} options.onViewUpdate - Callback when user clicks view update
-	 * @returns {ChangelogWidget} The changelog widget instance
-	 */
 	showChangelog(options = {}) {
 		if (!this.initialized) {
 			throw new SDKError(
@@ -231,13 +181,6 @@ export class FeedbackSDK {
 		return changelogWidget;
 	}
 
-	/**
-	 * Get changelogs from the backend
-	 * @param {Object} options - Optional query parameters
-	 * @param {number} options.limit - Number of changelogs to fetch
-	 * @param {number} options.offset - Offset for pagination
-	 * @returns {Promise<Array>} Array of changelog entries
-	 */
 	async getChangelogs(options = {}) {
 		if (!this.initialized) {
 			throw new SDKError(
@@ -345,17 +288,10 @@ export class FeedbackSDK {
 		this.eventBus.emit('sdk:destroyed');
 	}
 
-	/**
-	 * Check if feedback was recently submitted for this workspace
-	 * Uses backend tracking (preferred) with localStorage as fallback
-	 * @param {number} cooldownDays - Days to consider as "recently" (default: 30)
-	 * @returns {boolean} true if feedback was submitted within the cooldown period
-	 */
 	hasFeedbackBeenSubmitted(cooldownDays = 30) {
 		const cooldownMs = cooldownDays * 24 * 60 * 60 * 1000;
 		const now = Date.now();
 
-		// Check backend tracking first (from init response)
 		if (this.config.last_feedback_at) {
 			try {
 				const backendTimestamp = new Date(
@@ -369,7 +305,6 @@ export class FeedbackSDK {
 			}
 		}
 
-		// Fallback to localStorage
 		try {
 			const storageKey = `feedback_submitted_${this.config.workspace}`;
 			const stored = localStorage.getItem(storageKey);
@@ -382,9 +317,6 @@ export class FeedbackSDK {
 		}
 	}
 
-	/**
-	 * Clear the feedback submission tracking (allow showing widgets again)
-	 */
 	clearFeedbackSubmissionTracking() {
 		try {
 			const storageKey = `feedback_submitted_${this.config.workspace}`;

package/src/styles/base.js

@@ -0,0 +1,75 @@
+export const baseStyles = `
+.feedback-widget {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', Oxygen, Ubuntu, Cantarell, sans-serif;
+  font-size: 14px;
+  line-height: 1.4;
+  z-index: 999999;
+  box-sizing: border-box;
+}
+
+.feedback-widget *,
+.feedback-widget *::before,
+.feedback-widget *::after {
+  box-sizing: border-box;
+}
+
+/* Animations */
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes slideInRight {
+  from {
+    transform: translateX(400px);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes confettiFall {
+  0% {
+    opacity: 1;
+    transform: translateY(0) rotate(0deg) scale(1);
+  }
+  10% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(100vh) rotate(720deg) scale(0.5);
+  }
+}
+
+@keyframes changelogSpin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Accessibility */
+@media (prefers-reduced-motion: reduce) {
+  * {
+    transition: none !important;
+    animation: none !important;
+  }
+}
+
+/* Print */
+@media print {
+  .feedback-widget,
+  .feedback-panel,
+  .feedback-panel-backdrop,
+  .feedback-success-notification,
+  .changelog-widget,
+  .changelog-modal,
+  .changelog-modal-backdrop,
+  .changelog-list-modal,
+  .changelog-list-modal-backdrop {
+    display: none !important;
+  }
+}
+`;