@product7/feedback-sdk 1.1.4 → 1.1.6

package/src/widgets/SurveyWidget.js

@@ -40,7 +40,10 @@ export class SurveyWidget extends BaseWidget {
 	show() {
 		this._renderSurvey();
 		this.surveyState.isVisible = true;
-		this.sdk.eventBus.emit('survey:shown', { widget: this, type: this.surveyOptions.surveyType });
+		this.sdk.eventBus.emit('survey:shown', {
+			widget: this,
+			type: this.surveyOptions.surveyType,
+		});
 		return this;
 	}
 
@@ -55,16 +58,19 @@ export class SurveyWidget extends BaseWidget {
 
 		const config = this._getSurveyConfig();
 		const positionStyles = this._getPositionStyles();
-		const themeStyles = this.surveyOptions.theme === 'dark'
-			? 'background: #1a1a1a; color: #fff;'
-			: 'background: #fff; color: #1d1d1f;';
+		const themeStyles =
+			this.surveyOptions.theme === 'dark'
+				? 'background: #1a1a1a; color: #fff;'
+				: 'background: #fff; color: #1d1d1f;';
 
 		// Create backdrop for center position
 		if (this.surveyOptions.position === 'center') {
 			this.backdropElement = document.createElement('div');
 			this.backdropElement.className = 'feedback-survey-backdrop';
 			document.body.appendChild(this.backdropElement);
-			this.backdropElement.addEventListener('click', () => this._handleDismiss());
+			this.backdropElement.addEventListener('click', () =>
+				this._handleDismiss()
+			);
 		}
 
 		this.surveyElement = document.createElement('div');
@@ -88,67 +94,92 @@ export class SurveyWidget extends BaseWidget {
 		// Animate in
 		requestAnimationFrame(() => {
 			this.surveyElement.style.opacity = '1';
-			this.surveyElement.style.transform = this.surveyOptions.position === 'center'
-				? 'translate(-50%, -50%) scale(1)'
-				: 'translateY(0)';
+			this.surveyElement.style.transform =
+				this.surveyOptions.position === 'center'
+					? 'translate(-50%, -50%) scale(1)'
+					: 'translateY(0)';
 		});
 	}
 
 	_getSurveyConfig() {
 		const configs = {
 			nps: {
-				title: this.surveyOptions.title || 'How likely are you to recommend us?',
-				description: this.surveyOptions.description || 'On a scale of 0-10, how likely are you to recommend our product to a friend or colleague?',
+				title:
+					this.surveyOptions.title || 'How likely are you to recommend us?',
+				description:
+					this.surveyOptions.description ||
+					'On a scale of 0-10, how likely are you to recommend our product to a friend or colleague?',
 				html: `
 					<div class="feedback-survey-nps" style="display: flex; justify-content: space-between; gap: 4px;">
-						${[...Array(11).keys()].map(n => `
+						${[...Array(11).keys()]
+							.map(
+								(n) => `
 							<button class="feedback-survey-nps-btn" data-score="${n}" style="width: 28px; height: 36px; border: 1px solid ${this.surveyOptions.theme === 'dark' ? '#444' : '#d2d2d7'}; border-radius: 6px; background: ${this.surveyOptions.theme === 'dark' ? '#2a2a2a' : '#f8f9fa'}; cursor: pointer; font-size: 12px; color: ${this.surveyOptions.theme === 'dark' ? '#fff' : '#1d1d1f'}; transition: all 0.15s;">${n}</button>
-						`).join('')}
+						`
+							)
+							.join('')}
 					</div>
 					<div style="display: flex; justify-content: space-between; margin-top: 8px; font-size: 11px; color: ${this.surveyOptions.theme === 'dark' ? '#888' : '#86868b'};">
 						<span>${this.surveyOptions.lowLabel || 'Not likely'}</span>
 						<span>${this.surveyOptions.highLabel || 'Very likely'}</span>
 					</div>
-				`
+				`,
 			},
 			csat: {
 				title: this.surveyOptions.title || 'How satisfied are you?',
-				description: this.surveyOptions.description || 'How would you rate your overall satisfaction with our product?',
+				description:
+					this.surveyOptions.description ||
+					'How would you rate your overall satisfaction with our product?',
 				html: `
 					<div class="feedback-survey-csat" style="display: flex; justify-content: center; gap: 16px;">
-						${['😞', '😕', '😐', '🙂', '😄'].map((emoji, i) => `
+						${['😞', '😕', '😐', '🙂', '😄']
+							.map(
+								(emoji, i) => `
 							<button class="feedback-survey-csat-btn" data-score="${i + 1}" style="background: none; border: none; cursor: pointer; font-size: 36px; transition: transform 0.15s; padding: 8px;">${emoji}</button>
-						`).join('')}
+						`
+							)
+							.join('')}
 					</div>
 					<div style="display: flex; justify-content: space-between; margin-top: 8px; font-size: 11px; color: ${this.surveyOptions.theme === 'dark' ? '#888' : '#86868b'};">
 						<span>${this.surveyOptions.lowLabel || 'Very dissatisfied'}</span>
 						<span>${this.surveyOptions.highLabel || 'Very satisfied'}</span>
 					</div>
-				`
+				`,
 			},
 			ces: {
 				title: this.surveyOptions.title || 'How easy was it?',
-				description: this.surveyOptions.description || 'How easy was it to accomplish your task today?',
+				description:
+					this.surveyOptions.description ||
+					'How easy was it to accomplish your task today?',
 				html: `
 					<div class="feedback-survey-ces" style="display: flex; justify-content: space-between; gap: 8px;">
-						${['Very Difficult', 'Difficult', 'Neutral', 'Easy', 'Very Easy'].map((label, i) => `
+						${['Very Difficult', 'Difficult', 'Neutral', 'Easy', 'Very Easy']
+							.map(
+								(label, i) => `
 							<button class="feedback-survey-ces-btn" data-score="${i + 1}" style="flex: 1; padding: 12px 8px; border: 1px solid ${this.surveyOptions.theme === 'dark' ? '#444' : '#d2d2d7'}; border-radius: 8px; background: ${this.surveyOptions.theme === 'dark' ? '#2a2a2a' : '#f8f9fa'}; cursor: pointer; font-size: 11px; color: ${this.surveyOptions.theme === 'dark' ? '#fff' : '#1d1d1f'}; transition: all 0.15s;">${label}</button>
-						`).join('')}
+						`
+							)
+							.join('')}
 					</div>
-				`
+				`,
 			},
 			custom: {
 				title: this.surveyOptions.title || 'Quick Feedback',
-				description: this.surveyOptions.description || 'Help us improve by answering a few questions.',
-				html: this._renderCustomQuestions()
-			}
+				description:
+					this.surveyOptions.description ||
+					'Help us improve by answering a few questions.',
+				html: this._renderCustomQuestions(),
+			},
 		};
 
 		return configs[this.surveyOptions.surveyType] || configs.nps;
 	}
 
 	_renderCustomQuestions() {
-		if (!this.surveyOptions.customQuestions || this.surveyOptions.customQuestions.length === 0) {
+		if (
+			!this.surveyOptions.customQuestions ||
+			this.surveyOptions.customQuestions.length === 0
+		) {
 			// Default custom questions
 			return `
 				<div style="margin-bottom: 16px;">
@@ -164,20 +195,28 @@ export class SurveyWidget extends BaseWidget {
 				<div>
 					<label style="display: block; margin-bottom: 6px; font-size: 13px; font-weight: 500;">How often do you use it?</label>
 					<div class="feedback-survey-frequency" style="display: flex; gap: 8px;">
-						${['Daily', 'Weekly', 'Monthly', 'Rarely'].map(freq => `
+						${['Daily', 'Weekly', 'Monthly', 'Rarely']
+							.map(
+								(freq) => `
 							<button class="feedback-survey-freq-btn" data-freq="${freq}" style="flex: 1; padding: 10px; border: 1px solid ${this.surveyOptions.theme === 'dark' ? '#444' : '#d2d2d7'}; border-radius: 8px; background: ${this.surveyOptions.theme === 'dark' ? '#2a2a2a' : '#f8f9fa'}; cursor: pointer; font-size: 12px; color: ${this.surveyOptions.theme === 'dark' ? '#fff' : '#1d1d1f'}; transition: all 0.15s;">${freq}</button>
-						`).join('')}
+						`
+							)
+							.join('')}
 					</div>
 				</div>
 			`;
 		}
 
-		return this.surveyOptions.customQuestions.map((q, index) => `
+		return this.surveyOptions.customQuestions
+			.map(
+				(q, index) => `
 			<div style="margin-bottom: 16px;">
 				<label style="display: block; margin-bottom: 6px; font-size: 13px; font-weight: 500;">${q.label}</label>
 				${this._renderQuestionInput(q, index)}
 			</div>
-		`).join('');
+		`
+			)
+			.join('');
 	}
 
 	_renderQuestionInput(question, index) {
@@ -186,7 +225,7 @@ export class SurveyWidget extends BaseWidget {
 				return `
 					<select class="feedback-survey-select" data-question="${question.id || index}" style="width: 100%; padding: 10px; border: 1px solid ${this.surveyOptions.theme === 'dark' ? '#444' : '#d2d2d7'}; border-radius: 8px; font-size: 14px; background: ${this.surveyOptions.theme === 'dark' ? '#2a2a2a' : '#fff'}; color: ${this.surveyOptions.theme === 'dark' ? '#fff' : '#1d1d1f'};">
 						<option value="">${question.placeholder || 'Select an option'}</option>
-						${question.options.map(opt => `<option value="${opt.value}">${opt.label}</option>`).join('')}
+						${question.options.map((opt) => `<option value="${opt.value}">${opt.label}</option>`).join('')}
 					</select>
 				`;
 			case 'text':
@@ -200,10 +239,14 @@ export class SurveyWidget extends BaseWidget {
 
 	_getPositionStyles() {
 		const positions = {
-			'bottom-right': 'bottom: 24px; right: 24px; opacity: 0; transform: translateY(20px); transition: all 0.3s ease;',
-			'bottom-left': 'bottom: 24px; left: 24px; opacity: 0; transform: translateY(20px); transition: all 0.3s ease;',
-			'center': 'top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.95); opacity: 0; transition: all 0.3s ease;',
-			'bottom': 'bottom: 0; left: 0; right: 0; border-radius: 16px 16px 0 0; max-width: none; opacity: 0; transform: translateY(20px); transition: all 0.3s ease;'
+			'bottom-right':
+				'bottom: 24px; right: 24px; opacity: 0; transform: translateY(20px); transition: all 0.3s ease;',
+			'bottom-left':
+				'bottom: 24px; left: 24px; opacity: 0; transform: translateY(20px); transition: all 0.3s ease;',
+			center:
+				'top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.95); opacity: 0; transition: all 0.3s ease;',
+			bottom:
+				'bottom: 0; left: 0; right: 0; border-radius: 16px 16px 0 0; max-width: none; opacity: 0; transform: translateY(20px); transition: all 0.3s ease;',
 		};
 		return positions[this.surveyOptions.position] || positions['bottom-right'];
 	}
@@ -216,11 +259,15 @@ export class SurveyWidget extends BaseWidget {
 		closeBtn.addEventListener('click', () => this._handleDismiss());
 
 		// Submit button
-		const submitBtn = this.surveyElement.querySelector('.feedback-survey-submit');
+		const submitBtn = this.surveyElement.querySelector(
+			'.feedback-survey-submit'
+		);
 		submitBtn.addEventListener('click', () => this._handleSubmit());
 
 		// Feedback textarea
-		const textarea = this.surveyElement.querySelector('.feedback-survey-textarea');
+		const textarea = this.surveyElement.querySelector(
+			'.feedback-survey-textarea'
+		);
 		textarea.addEventListener('input', (e) => {
 			this.surveyState.feedback = e.target.value;
 		});
@@ -241,133 +288,177 @@ export class SurveyWidget extends BaseWidget {
 		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)));
-				btn.addEventListener('mouseenter', () => {
-					if (this.surveyState.score !== parseInt(btn.dataset.score)) {
-						btn.style.borderColor = '#007aff';
-					}
-				});
-				btn.addEventListener('mouseleave', () => {
-					if (this.surveyState.score !== parseInt(btn.dataset.score)) {
-						btn.style.borderColor = this.surveyOptions.theme === 'dark' ? '#444' : '#d2d2d7';
-					}
+			this.surveyElement
+				.querySelectorAll('.feedback-survey-nps-btn')
+				.forEach((btn) => {
+					btn.addEventListener('click', () =>
+						this._selectNPS(parseInt(btn.dataset.score))
+					);
+					btn.addEventListener('mouseenter', () => {
+						if (this.surveyState.score !== parseInt(btn.dataset.score)) {
+							btn.style.borderColor = '#007aff';
+						}
+					});
+					btn.addEventListener('mouseleave', () => {
+						if (this.surveyState.score !== parseInt(btn.dataset.score)) {
+							btn.style.borderColor =
+								this.surveyOptions.theme === 'dark' ? '#444' : '#d2d2d7';
+						}
+					});
 				});
-			});
 		}
 
 		if (type === 'csat') {
-			this.surveyElement.querySelectorAll('.feedback-survey-csat-btn').forEach(btn => {
-				btn.addEventListener('click', () => this._selectCSAT(parseInt(btn.dataset.score)));
-				btn.addEventListener('mouseenter', () => {
-					btn.style.transform = 'scale(1.1)';
-				});
-				btn.addEventListener('mouseleave', () => {
-					if (this.surveyState.score !== parseInt(btn.dataset.score)) {
-						btn.style.transform = 'scale(1)';
-					}
+			this.surveyElement
+				.querySelectorAll('.feedback-survey-csat-btn')
+				.forEach((btn) => {
+					btn.addEventListener('click', () =>
+						this._selectCSAT(parseInt(btn.dataset.score))
+					);
+					btn.addEventListener('mouseenter', () => {
+						btn.style.transform = 'scale(1.1)';
+					});
+					btn.addEventListener('mouseleave', () => {
+						if (this.surveyState.score !== parseInt(btn.dataset.score)) {
+							btn.style.transform = 'scale(1)';
+						}
+					});
 				});
-			});
 		}
 
 		if (type === 'ces') {
-			this.surveyElement.querySelectorAll('.feedback-survey-ces-btn').forEach(btn => {
-				btn.addEventListener('click', () => this._selectCES(parseInt(btn.dataset.score)));
-				btn.addEventListener('mouseenter', () => {
-					if (this.surveyState.score !== parseInt(btn.dataset.score)) {
-						btn.style.borderColor = '#007aff';
-					}
+			this.surveyElement
+				.querySelectorAll('.feedback-survey-ces-btn')
+				.forEach((btn) => {
+					btn.addEventListener('click', () =>
+						this._selectCES(parseInt(btn.dataset.score))
+					);
+					btn.addEventListener('mouseenter', () => {
+						if (this.surveyState.score !== parseInt(btn.dataset.score)) {
+							btn.style.borderColor = '#007aff';
+						}
+					});
+					btn.addEventListener('mouseleave', () => {
+						if (this.surveyState.score !== parseInt(btn.dataset.score)) {
+							btn.style.borderColor =
+								this.surveyOptions.theme === 'dark' ? '#444' : '#d2d2d7';
+						}
+					});
 				});
-				btn.addEventListener('mouseleave', () => {
-					if (this.surveyState.score !== parseInt(btn.dataset.score)) {
-						btn.style.borderColor = this.surveyOptions.theme === 'dark' ? '#444' : '#d2d2d7';
-					}
-				});
-			});
 		}
 
 		if (type === 'custom') {
 			// Frequency buttons
-			this.surveyElement.querySelectorAll('.feedback-survey-freq-btn').forEach(btn => {
-				btn.addEventListener('click', () => this._selectFrequency(btn.dataset.freq));
-			});
+			this.surveyElement
+				.querySelectorAll('.feedback-survey-freq-btn')
+				.forEach((btn) => {
+					btn.addEventListener('click', () =>
+						this._selectFrequency(btn.dataset.freq)
+					);
+				});
 
 			// Select inputs
-			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-select')
+				.forEach((select) => {
+					select.addEventListener('change', (e) => {
+						this.surveyState.customAnswers[select.dataset.question] =
+							e.target.value;
+					});
 				});
-			});
 
 			// Text inputs
-			this.surveyElement.querySelectorAll('.feedback-survey-input').forEach(input => {
-				input.addEventListener('input', (e) => {
-					this.surveyState.customAnswers[input.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;
+					});
 				});
-			});
 		}
 	}
 
 	_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.style.background = '#007aff';
-				btn.style.borderColor = '#007aff';
-				btn.style.color = '#fff';
-			} else {
-				btn.style.background = this.surveyOptions.theme === 'dark' ? '#2a2a2a' : '#f8f9fa';
-				btn.style.borderColor = this.surveyOptions.theme === 'dark' ? '#444' : '#d2d2d7';
-				btn.style.color = this.surveyOptions.theme === 'dark' ? '#fff' : '#1d1d1f';
-			}
-		});
+		this.surveyElement
+			.querySelectorAll('.feedback-survey-nps-btn')
+			.forEach((btn) => {
+				const btnScore = parseInt(btn.dataset.score);
+				if (btnScore === score) {
+					btn.style.background = '#007aff';
+					btn.style.borderColor = '#007aff';
+					btn.style.color = '#fff';
+				} else {
+					btn.style.background =
+						this.surveyOptions.theme === 'dark' ? '#2a2a2a' : '#f8f9fa';
+					btn.style.borderColor =
+						this.surveyOptions.theme === 'dark' ? '#444' : '#d2d2d7';
+					btn.style.color =
+						this.surveyOptions.theme === 'dark' ? '#fff' : '#1d1d1f';
+				}
+			});
 	}
 
 	_selectCSAT(score) {
 		this.surveyState.score = score;
-		this.surveyElement.querySelectorAll('.feedback-survey-csat-btn').forEach(btn => {
-			const btnScore = parseInt(btn.dataset.score);
-			btn.style.transform = btnScore === score ? 'scale(1.2)' : 'scale(1)';
-		});
+		this.surveyElement
+			.querySelectorAll('.feedback-survey-csat-btn')
+			.forEach((btn) => {
+				const btnScore = parseInt(btn.dataset.score);
+				btn.style.transform = btnScore === score ? 'scale(1.2)' : 'scale(1)';
+			});
 	}
 
 	_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.style.background = '#007aff';
-				btn.style.borderColor = '#007aff';
-				btn.style.color = '#fff';
-			} else {
-				btn.style.background = this.surveyOptions.theme === 'dark' ? '#2a2a2a' : '#f8f9fa';
-				btn.style.borderColor = this.surveyOptions.theme === 'dark' ? '#444' : '#d2d2d7';
-				btn.style.color = this.surveyOptions.theme === 'dark' ? '#fff' : '#1d1d1f';
-			}
-		});
+		this.surveyElement
+			.querySelectorAll('.feedback-survey-ces-btn')
+			.forEach((btn) => {
+				const btnScore = parseInt(btn.dataset.score);
+				if (btnScore === score) {
+					btn.style.background = '#007aff';
+					btn.style.borderColor = '#007aff';
+					btn.style.color = '#fff';
+				} else {
+					btn.style.background =
+						this.surveyOptions.theme === 'dark' ? '#2a2a2a' : '#f8f9fa';
+					btn.style.borderColor =
+						this.surveyOptions.theme === 'dark' ? '#444' : '#d2d2d7';
+					btn.style.color =
+						this.surveyOptions.theme === 'dark' ? '#fff' : '#1d1d1f';
+				}
+			});
 	}
 
 	_selectFrequency(freq) {
 		this.surveyState.customAnswers.frequency = freq;
-		this.surveyElement.querySelectorAll('.feedback-survey-freq-btn').forEach(btn => {
-			if (btn.dataset.freq === freq) {
-				btn.style.background = '#007aff';
-				btn.style.borderColor = '#007aff';
-				btn.style.color = '#fff';
-			} else {
-				btn.style.background = this.surveyOptions.theme === 'dark' ? '#2a2a2a' : '#f8f9fa';
-				btn.style.borderColor = this.surveyOptions.theme === 'dark' ? '#444' : '#d2d2d7';
-				btn.style.color = this.surveyOptions.theme === 'dark' ? '#fff' : '#1d1d1f';
-			}
-		});
+		this.surveyElement
+			.querySelectorAll('.feedback-survey-freq-btn')
+			.forEach((btn) => {
+				if (btn.dataset.freq === freq) {
+					btn.style.background = '#007aff';
+					btn.style.borderColor = '#007aff';
+					btn.style.color = '#fff';
+				} else {
+					btn.style.background =
+						this.surveyOptions.theme === 'dark' ? '#2a2a2a' : '#f8f9fa';
+					btn.style.borderColor =
+						this.surveyOptions.theme === 'dark' ? '#444' : '#d2d2d7';
+					btn.style.color =
+						this.surveyOptions.theme === 'dark' ? '#fff' : '#1d1d1f';
+				}
+			});
 	}
 
 	async _handleSubmit() {
 		const type = this.surveyOptions.surveyType;
 
 		// Validate
-		if ((type === 'nps' || type === 'csat' || type === 'ces') && this.surveyState.score === null) {
+		if (
+			(type === 'nps' || type === 'csat' || type === 'ces') &&
+			this.surveyState.score === null
+		) {
 			this._showError('Please select a rating');
 			return;
 		}
@@ -415,10 +506,13 @@ export class SurveyWidget extends BaseWidget {
 
 		const error = document.createElement('div');
 		error.className = 'feedback-survey-error';
-		error.style.cssText = 'color: #ef4444; font-size: 13px; margin-top: 8px; text-align: center;';
+		error.style.cssText =
+			'color: #ef4444; font-size: 13px; margin-top: 8px; text-align: center;';
 		error.textContent = message;
 
-		const submitBtn = this.surveyElement.querySelector('.feedback-survey-submit');
+		const submitBtn = this.surveyElement.querySelector(
+			'.feedback-survey-submit'
+		);
 		submitBtn.parentNode.insertBefore(error, submitBtn);
 
 		setTimeout(() => error.remove(), 3000);
@@ -468,9 +562,10 @@ export class SurveyWidget extends BaseWidget {
 
 		if (surveyEl) {
 			surveyEl.style.opacity = '0';
-			surveyEl.style.transform = this.surveyOptions.position === 'center'
-				? 'translate(-50%, -50%) scale(0.95)'
-				: 'translateY(20px)';
+			surveyEl.style.transform =
+				this.surveyOptions.position === 'center'
+					? 'translate(-50%, -50%) scale(0.95)'
+					: 'translateY(20px)';
 			setTimeout(() => {
 				if (surveyEl && surveyEl.parentNode) {
 					surveyEl.parentNode.removeChild(surveyEl);

package/types/index.d.ts

@@ -1,68 +1,73 @@
-
 declare module '@product7/feedback-sdk' {
-  export interface FeedbackConfig {
-    workspace: string;
-    userContext?: UserContext;
-    debug?: boolean;
-    boardId?: string;
-    position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
-    theme?: 'light' | 'dark';
-    apiUrl?: string;
-    autoShow?: boolean;
-  }
+	export interface FeedbackConfig {
+		workspace: string;
+		userContext?: UserContext;
+		debug?: boolean;
+		boardId?: string;
+		position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+		theme?: 'light' | 'dark';
+		apiUrl?: string;
+		autoShow?: boolean;
+	}
 
-  export interface UserContext {
-    user_id?: string;
-    email?: string;
-    name?: string;
-    custom_fields?: Record<string, any>;
-    company?: {
-      id?: string;
-      name?: string;
-      monthly_spend?: number;
-    };
-  }
+	export interface UserContext {
+		user_id?: string;
+		email?: string;
+		name?: string;
+		custom_fields?: Record<string, any>;
+		company?: {
+			id?: string;
+			name?: string;
+			monthly_spend?: number;
+		};
+	}
 
-  export interface ButtonWidget {
-    id: string;
-    type: 'button';
-    mount(container?: string | HTMLElement): this;
-    destroy(): void;
-    show(): this;
-    hide(): this;
-    openModal(): void;
-    closeModal(): void;
-  }
+	export interface ButtonWidget {
+		id: string;
+		type: 'button';
+		mount(container?: string | HTMLElement): this;
+		destroy(): void;
+		show(): this;
+		hide(): this;
+		openModal(): void;
+		closeModal(): void;
+	}
 
-  export class FeedbackSDK {
-    constructor(config: FeedbackConfig);
-    init(): Promise<{
-      initialized: boolean;
-      config?: any;
-      sessionToken?: string;
-      expiresIn?: number;
-    }>;
-    createWidget(type: 'button', options?: Partial<FeedbackConfig>): ButtonWidget;
-    setUserContext(userContext: UserContext): void;
-    getUserContext(): UserContext | null;
-    destroy(): void;
-    readonly initialized: boolean;
-  }
+	export class FeedbackSDK {
+		constructor(config: FeedbackConfig);
+		init(): Promise<{
+			initialized: boolean;
+			config?: any;
+			sessionToken?: string;
+			expiresIn?: number;
+		}>;
+		createWidget(
+			type: 'button',
+			options?: Partial<FeedbackConfig>
+		): ButtonWidget;
+		setUserContext(userContext: UserContext): void;
+		getUserContext(): UserContext | null;
+		destroy(): void;
+		readonly initialized: boolean;
+	}
 
-  interface FeedbackSDKExport {
-    FeedbackSDK: typeof FeedbackSDK;
-    ButtonWidget: any;
-    create: (config: FeedbackConfig) => FeedbackSDK;
-    initWithUser: (config: Omit<FeedbackConfig, 'userContext'>, userContext: UserContext) => Promise<FeedbackSDK>;
-    getInstance: () => FeedbackSDK | null;
-    isReady: () => boolean;
-    setUserContext: (userContext: UserContext) => void;
-    onReady: (callback: (sdk: FeedbackSDK) => void) => void;
-    onError: (callback: (error: Error) => void) => void;
-    version: string;
-    instance: FeedbackSDK | null;
-  }
+	interface FeedbackSDKExport {
+		FeedbackSDK: typeof FeedbackSDK;
+		ButtonWidget: any;
+		create: (config: FeedbackConfig) => FeedbackSDK;
+		initWithUser: (
+			config: Omit<FeedbackConfig, 'userContext'>,
+			userContext: UserContext
+		) => Promise<FeedbackSDK>;
+		getInstance: () => FeedbackSDK | null;
+		isReady: () => boolean;
+		setUserContext: (userContext: UserContext) => void;
+		onReady: (callback: (sdk: FeedbackSDK) => void) => void;
+		onError: (callback: (error: Error) => void) => void;
+		version: string;
+		instance: FeedbackSDK | null;
+	}
 
-  const FeedbackSDKDefault: FeedbackSDKExport;
-  export default FeedbackSDKDefault;
-}
+	const FeedbackSDKDefault: FeedbackSDKExport;
+	export default FeedbackSDKDefault;
+}