@product7/feedback-sdk 1.6.6 → 1.6.8

package/src/widgets/ChangelogWidget.js

@@ -12,7 +12,7 @@ export class ChangelogWidget extends BaseWidget {
 
 	_render() {
 		const trigger = document.createElement('div');
-		trigger.className = `changelog-widget position-${this.options.position}`;
+		trigger.className = `changelog-widget position-${this.options.position} changelog-theme-${this.options.theme || 'light'}`;
 		trigger.innerHTML = `
 			<button class="changelog-trigger-btn" type="button" aria-label="View Updates">
 				<svg class="changelog-icon" width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
@@ -88,12 +88,12 @@ export class ChangelogWidget extends BaseWidget {
 
 	_createModal() {
 		this.backdropElement = document.createElement('div');
-		this.backdropElement.className = 'changelog-modal-backdrop';
+		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';
+		this.modalElement.className = `changelog-modal changelog-theme-${this.options.theme || 'light'}`;
 		this.modalElement.innerHTML = `
 			<div class="changelog-modal-container">
 				<button class="changelog-modal-close" type="button" aria-label="Close"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><line x1="200" y1="56" x2="56" y2="200" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="200" y1="200" x2="56" y2="56" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg></button>
@@ -231,14 +231,14 @@ export class ChangelogWidget extends BaseWidget {
 
 	_createListModal() {
 		this.listModalBackdropElement = document.createElement('div');
-		this.listModalBackdropElement.className = 'changelog-list-modal-backdrop';
+		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';
+		this.listModalElement.className = `changelog-list-modal changelog-theme-${this.options.theme || 'light'}`;
 		this.listModalElement.innerHTML = `
 			<div class="changelog-list-modal-container">
 				<div class="changelog-list-modal-header">

package/src/widgets/MessengerWidget.js

@@ -17,6 +17,19 @@ import { PreChatFormView } from './messenger/views/PreChatFormView.js';
 export class MessengerWidget extends BaseWidget {
 	constructor(options) {
 		super({ ...options, type: 'messenger' });
+		const resolvedTheme = options.theme || 'light';
+		const hasExplicitTextColor = Object.prototype.hasOwnProperty.call(
+			options,
+			'textColor'
+		);
+		const hasExplicitBackgroundColor = Object.prototype.hasOwnProperty.call(
+			options,
+			'backgroundColor'
+		);
+		const defaultTextColor =
+			resolvedTheme === 'dark' ? '#E2E8F0' : '#1d1d1f';
+		const defaultBackgroundColor =
+			resolvedTheme === 'dark' ? '#0F172A' : '#ffffff';
 
 		const resolvedEnableChangelog =
 			typeof options.enableChangelog === 'boolean'
@@ -25,10 +38,12 @@ export class MessengerWidget extends BaseWidget {
 
 		this.messengerOptions = {
 			position: options.position || 'bottom-right',
-			theme: options.theme || 'light',
+			theme: resolvedTheme,
 			primaryColor: options.primaryColor || '#155EEF',
-			textColor: options.textColor || '#1d1d1f',
-			backgroundColor: options.backgroundColor || '#ffffff',
+			textColor: hasExplicitTextColor ? options.textColor : defaultTextColor,
+			backgroundColor: hasExplicitBackgroundColor
+				? options.backgroundColor
+				: defaultBackgroundColor,
 			logoUrl: options.logoUrl || 'https://product7.io/p7logo.svg',
 			teamName: options.teamName || 'Support',
 			teamAvatars: options.teamAvatars || [],

package/src/widgets/SurveyWidget.js

@@ -8,6 +8,9 @@ export class SurveyWidget extends BaseWidget {
 			surveyId: options.surveyId || null,
 			surveyType: options.surveyType || 'nps',
 			position: options.position || 'bottom-right',
+			theme: options.theme || 'light',
+			enabled:
+				typeof options.enabled === 'boolean' ? options.enabled : undefined,
 			title: options.title || null,
 			description: options.description || null,
 			lowLabel: options.lowLabel || null,
@@ -50,6 +53,20 @@ export class SurveyWidget extends BaseWidget {
 		};
 	}
 
+	static removeDanglingElements() {
+		if (typeof document === 'undefined') return;
+
+		document
+			.querySelectorAll(
+				'.feedback-survey, .feedback-survey-backdrop, .feedback-survey-success'
+			)
+			.forEach((el) => {
+				if (el && el.parentNode) {
+					el.parentNode.removeChild(el);
+				}
+			});
+	}
+
 	_render() {
 		const container = document.createElement('div');
 		container.className = 'feedback-survey-container';
@@ -61,6 +78,16 @@ export class SurveyWidget extends BaseWidget {
 	}
 
 	show() {
+		if (this.options.enabled === false || this.surveyOptions.enabled === false) {
+			this.sdk.eventBus.emit('survey:suppressed', {
+				widget: this,
+				surveyId: this.surveyOptions.surveyId,
+				reason: 'disabled',
+			});
+			return this;
+		}
+
+		SurveyWidget.removeDanglingElements();
 		this._renderSurvey();
 		this.surveyState.isVisible = true;
 		this.sdk.eventBus.emit('survey:shown', {
@@ -96,7 +123,7 @@ export class SurveyWidget extends BaseWidget {
 
 		if (this.surveyOptions.position === 'center') {
 			this.backdropElement = document.createElement('div');
-			this.backdropElement.className = 'feedback-survey-backdrop';
+			this.backdropElement.className = `feedback-survey-backdrop feedback-survey-backdrop-${this.surveyOptions.theme}`;
 			document.body.appendChild(this.backdropElement);
 			this.backdropElement.addEventListener('click', () =>
 				this._handleDismiss()
@@ -104,7 +131,7 @@ export class SurveyWidget extends BaseWidget {
 		}
 
 		this.surveyElement = document.createElement('div');
-		this.surveyElement.className = `feedback-survey feedback-survey-${this.surveyOptions.position}${
+		this.surveyElement.className = `feedback-survey feedback-survey-${this.surveyOptions.position} feedback-survey-theme-${this.surveyOptions.theme}${
 			showDescription && !showTitle
 				? ' feedback-survey-description-primary'
 				: ''
@@ -1124,7 +1151,7 @@ export class SurveyWidget extends BaseWidget {
 		}, 3000);
 	}
 
-	_closeSurvey(resetState = true) {
+	_closeSurvey(resetState = true, immediate = false) {
 		if (this._escapeHandler) {
 			document.removeEventListener('keydown', this._escapeHandler);
 			this._escapeHandler = null;
@@ -1139,21 +1166,33 @@ export class SurveyWidget extends BaseWidget {
 				this.surveyOptions.position === 'center'
 					? 'translate(-50%, -50%) scale(0.95)'
 					: 'translateY(20px)';
-			setTimeout(() => {
-				if (surveyEl && surveyEl.parentNode) {
+			if (immediate) {
+				if (surveyEl.parentNode) {
 					surveyEl.parentNode.removeChild(surveyEl);
 				}
-			}, 300);
+			} else {
+				setTimeout(() => {
+					if (surveyEl && surveyEl.parentNode) {
+						surveyEl.parentNode.removeChild(surveyEl);
+					}
+				}, 300);
+			}
 			this.surveyElement = null;
 		}
 
 		if (backdropEl) {
 			backdropEl.style.opacity = '0';
-			setTimeout(() => {
-				if (backdropEl && backdropEl.parentNode) {
+			if (immediate) {
+				if (backdropEl.parentNode) {
 					backdropEl.parentNode.removeChild(backdropEl);
 				}
-			}, 300);
+			} else {
+				setTimeout(() => {
+					if (backdropEl && backdropEl.parentNode) {
+						backdropEl.parentNode.removeChild(backdropEl);
+					}
+				}, 300);
+			}
 			this.backdropElement = null;
 		}
 
@@ -1171,7 +1210,7 @@ export class SurveyWidget extends BaseWidget {
 	}
 
 	destroy() {
-		this._closeSurvey();
+		this._closeSurvey(true, true);
 		super.destroy();
 	}
 }

package/types/index.d.ts

@@ -28,6 +28,7 @@ declare module '@product7/feedback-sdk' {
 	}
 
 	export interface ButtonWidgetOptions {
+		enabled?: boolean;
 		position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
 		theme?: 'light' | 'dark';
 		boardId?: string;
@@ -78,6 +79,9 @@ declare module '@product7/feedback-sdk' {
 			config?: any;
 			sessionToken?: string;
 			expiresIn?: number;
+			status?: boolean;
+			message?: string | null;
+			configVersion?: number | null;
 		}>;
 		createWidget(type: 'button', options?: ButtonWidgetOptions): ButtonWidget;
 		createWidget(type: 'survey', options?: SurveyWidgetOptions): SurveyWidget;
@@ -152,6 +156,7 @@ declare module '@product7/feedback-sdk' {
 	}
 
 	export interface SurveyWidgetOptions {
+		enabled?: boolean;
 		surveyId?: string | null;
 		surveyType?: SurveyType;
 		position?: 'bottom-right' | 'bottom-left' | 'center' | 'bottom';
@@ -225,6 +230,7 @@ declare module '@product7/feedback-sdk' {
 	}
 
 	export interface ChangelogWidgetOptions {
+		enabled?: boolean;
 		position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
 		theme?: 'light' | 'dark';
 		triggerText?: string;
@@ -254,6 +260,7 @@ declare module '@product7/feedback-sdk' {
 	}
 
 	export interface MessengerWidgetOptions {
+		enabled?: boolean;
 		position?: 'bottom-right' | 'bottom-left';
 		theme?: 'light' | 'dark';
 		teamName?: string;