@product7/feedback-sdk 1.2.4 → 1.2.6

package/src/widgets/ChangelogWidget.js

@@ -0,0 +1,619 @@
+import { BaseWidget } from './BaseWidget.js';
+
+export class ChangelogWidget extends BaseWidget {
+	constructor(options) {
+		super({ ...options, type: 'changelog' });
+		this.changelogs = [];
+		this.isLoading = false;
+		this.modalElement = null;
+		this.sidebarElement = null;
+		this.currentIndex = 0;
+	}
+
+	_render() {
+		const trigger = document.createElement('div');
+		trigger.className = `feedback-widget changelog-widget theme-${this.options.theme} position-${this.options.position}`;
+		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">
+					<path d="M5.8 21L7.4 14L2 9.2L9.2 8.6L12 2L14.8 8.6L22 9.2L16.6 14L18.2 21L12 17.3L5.8 21Z"/>
+				</svg>
+				<span class="changelog-text">${this.options.triggerText || "What's New"}</span>
+				<span class="changelog-confetti-emoji">🎉</span>
+				${this.options.showBadge ? '<span class="changelog-badge"></span>' : ''}
+			</button>
+		`;
+
+		if (this.options.customStyles) {
+			Object.assign(trigger.style, this.options.customStyles);
+		}
+
+		return trigger;
+	}
+
+	_attachEvents() {
+		const button = this.element.querySelector('.changelog-trigger-btn');
+
+		button.addEventListener('click', () => {
+			this.openSidebar();
+		});
+
+		button.addEventListener('mouseenter', () => {
+			button.style.transform = 'translateY(-2px)';
+		});
+
+		button.addEventListener('mouseleave', () => {
+			button.style.transform = 'translateY(0)';
+		});
+	}
+
+	// ==================== POPUP MODAL ====================
+
+	async openModal() {
+		if (this.modalElement) return;
+
+		this.state.isOpen = true;
+		this._createModal();
+
+		// Load changelogs if not already loaded
+		if (this.changelogs.length === 0) {
+			await this._loadChangelogs();
+		}
+
+		this.currentIndex = 0;
+		this._renderCurrentChangelog();
+
+		// Prevent body scroll
+		document.body.style.overflow = 'hidden';
+
+		requestAnimationFrame(() => {
+			if (this.modalElement) {
+				this.modalElement.classList.add('open');
+			}
+			if (this.backdropElement) {
+				this.backdropElement.classList.add('show');
+			}
+		});
+	}
+
+	closeModal() {
+		// Restore body scroll
+		document.body.style.overflow = '';
+
+		if (this.modalElement) {
+			this.modalElement.classList.remove('open');
+		}
+		if (this.backdropElement) {
+			this.backdropElement.classList.remove('show');
+		}
+
+		setTimeout(() => {
+			this.state.isOpen = false;
+			if (this.modalElement && this.modalElement.parentNode) {
+				this.modalElement.parentNode.removeChild(this.modalElement);
+				this.modalElement = null;
+			}
+			if (this.backdropElement && this.backdropElement.parentNode) {
+				this.backdropElement.parentNode.removeChild(this.backdropElement);
+				this.backdropElement = null;
+			}
+		}, 300);
+	}
+
+	_createModal() {
+		// Create backdrop
+		this.backdropElement = document.createElement('div');
+		this.backdropElement.className = 'changelog-modal-backdrop';
+		document.body.appendChild(this.backdropElement);
+		this.backdropElement.addEventListener('click', () => this.closeModal());
+
+		// Create modal
+		this.modalElement = document.createElement('div');
+		this.modalElement.className = `changelog-modal theme-${this.options.theme}`;
+		this.modalElement.innerHTML = `
+			<div class="changelog-modal-container">
+				<button class="changelog-modal-close" type="button" aria-label="Close">&times;</button>
+				<div class="changelog-modal-content">
+					<div class="changelog-loading">
+						<div class="changelog-loading-spinner"></div>
+					</div>
+				</div>
+			</div>
+		`;
+
+		document.body.appendChild(this.modalElement);
+
+		// Prevent clicks inside modal from closing it
+		this.modalElement
+			.querySelector('.changelog-modal-container')
+			.addEventListener('click', (e) => {
+				e.stopPropagation();
+			});
+
+		// Attach close button event
+		this.modalElement
+			.querySelector('.changelog-modal-close')
+			.addEventListener('click', () => this.closeModal());
+
+		// Handle escape key
+		this._escapeHandler = (e) => {
+			if (e.key === 'Escape') {
+				this.closeModal();
+			}
+		};
+		document.addEventListener('keydown', this._escapeHandler);
+	}
+
+	// ==================== LIST MODAL ====================
+
+	async openSidebar() {
+		if (this.listModalElement) return;
+
+		// Close popup modal if open
+		if (this.modalElement) {
+			this.closeModal();
+			await new Promise((resolve) => setTimeout(resolve, 350));
+		}
+
+		this.state.isOpen = true;
+		this._createListModal();
+
+		// Load changelogs if not already loaded
+		if (this.changelogs.length === 0) {
+			await this._loadChangelogs();
+		}
+
+		this._renderChangelogList();
+
+		// Prevent body scroll
+		document.body.style.overflow = 'hidden';
+
+		requestAnimationFrame(() => {
+			if (this.listModalElement) {
+				this.listModalElement.classList.add('open');
+				// Trigger confetti animation
+				this._showConfetti();
+			}
+			if (this.listModalBackdropElement) {
+				this.listModalBackdropElement.classList.add('show');
+			}
+		});
+	}
+
+	_showConfetti() {
+		const colors = [
+			'#FF6B6B',
+			'#4ECDC4',
+			'#FFE66D',
+			'#95E1D3',
+			'#F38181',
+			'#AA96DA',
+			'#FCBAD3',
+			'#A8D8EA',
+		];
+		const confettiCount = 50;
+		const container = document.createElement('div');
+		container.className = 'changelog-confetti-container';
+		document.body.appendChild(container);
+
+		for (let i = 0; i < confettiCount; i++) {
+			const confetti = document.createElement('div');
+			confetti.className = 'changelog-confetti';
+			confetti.style.left = Math.random() * 100 + '%';
+			confetti.style.backgroundColor =
+				colors[Math.floor(Math.random() * colors.length)];
+			confetti.style.animationDelay = Math.random() * 0.5 + 's';
+			confetti.style.animationDuration = Math.random() * 1 + 1.5 + 's';
+
+			// Random shapes
+			const shapes = ['circle', 'square', 'rectangle'];
+			const shape = shapes[Math.floor(Math.random() * shapes.length)];
+			if (shape === 'circle') {
+				confetti.style.borderRadius = '50%';
+				confetti.style.width = Math.random() * 8 + 4 + 'px';
+				confetti.style.height = confetti.style.width;
+			} else if (shape === 'rectangle') {
+				confetti.style.width = Math.random() * 4 + 3 + 'px';
+				confetti.style.height = Math.random() * 10 + 8 + 'px';
+			} else {
+				confetti.style.width = Math.random() * 8 + 4 + 'px';
+				confetti.style.height = confetti.style.width;
+			}
+
+			container.appendChild(confetti);
+		}
+
+		// Remove confetti after animation
+		setTimeout(() => {
+			if (container.parentNode) {
+				container.parentNode.removeChild(container);
+			}
+		}, 2500);
+	}
+
+	closeSidebar() {
+		// Restore body scroll
+		document.body.style.overflow = '';
+
+		if (this.listModalElement) {
+			this.listModalElement.classList.remove('open');
+		}
+		if (this.listModalBackdropElement) {
+			this.listModalBackdropElement.classList.remove('show');
+		}
+
+		setTimeout(() => {
+			this.state.isOpen = false;
+			if (this.listModalElement && this.listModalElement.parentNode) {
+				this.listModalElement.parentNode.removeChild(this.listModalElement);
+				this.listModalElement = null;
+			}
+			if (
+				this.listModalBackdropElement &&
+				this.listModalBackdropElement.parentNode
+			) {
+				this.listModalBackdropElement.parentNode.removeChild(
+					this.listModalBackdropElement
+				);
+				this.listModalBackdropElement = null;
+			}
+			if (this._listModalEscapeHandler) {
+				document.removeEventListener('keydown', this._listModalEscapeHandler);
+			}
+		}, 300);
+	}
+
+	_createListModal() {
+		// Create backdrop
+		this.listModalBackdropElement = document.createElement('div');
+		this.listModalBackdropElement.className = 'changelog-list-modal-backdrop';
+		document.body.appendChild(this.listModalBackdropElement);
+		this.listModalBackdropElement.addEventListener('click', () =>
+			this.closeSidebar()
+		);
+
+		// Create list modal
+		this.listModalElement = document.createElement('div');
+		this.listModalElement.className = `changelog-list-modal theme-${this.options.theme}`;
+		this.listModalElement.innerHTML = `
+			<div class="changelog-list-modal-container">
+				<div class="changelog-list-modal-header">
+					<h2>${this.options.title || "What's New"} 🎉</h2>
+					<button class="changelog-list-modal-close" type="button" aria-label="Close">&times;</button>
+				</div>
+				<div class="changelog-list-modal-body">
+					<div class="changelog-loading">
+						<div class="changelog-loading-spinner"></div>
+					</div>
+				</div>
+			</div>
+		`;
+
+		document.body.appendChild(this.listModalElement);
+
+		// Prevent clicks inside modal from closing it
+		this.listModalElement
+			.querySelector('.changelog-list-modal-container')
+			.addEventListener('click', (e) => {
+				e.stopPropagation();
+			});
+
+		// Attach close button event
+		this.listModalElement
+			.querySelector('.changelog-list-modal-close')
+			.addEventListener('click', () => this.closeSidebar());
+
+		// Handle escape key
+		this._listModalEscapeHandler = (e) => {
+			if (e.key === 'Escape') {
+				this.closeSidebar();
+			}
+		};
+		document.addEventListener('keydown', this._listModalEscapeHandler);
+	}
+
+	_renderChangelogList() {
+		const body = this.listModalElement.querySelector(
+			'.changelog-list-modal-body'
+		);
+
+		if (this.isLoading) {
+			return;
+		}
+
+		if (this.changelogs.length === 0) {
+			body.innerHTML = `
+				<div class="changelog-empty">
+					<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+						<path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/>
+						<polyline points="14,2 14,8 20,8"/>
+					</svg>
+					<p>No updates yet</p>
+				</div>
+			`;
+			return;
+		}
+
+		body.innerHTML = `
+			<div class="changelog-list">
+				${this.changelogs.map((changelog, index) => this._renderChangelogListItem(changelog, index)).join('')}
+			</div>
+		`;
+
+		// Attach click events to items
+		body.querySelectorAll('.changelog-list-item').forEach((item, index) => {
+			item.addEventListener('click', () => {
+				const changelog = this.changelogs[index];
+				this._handleViewUpdate(changelog);
+			});
+		});
+	}
+
+	_renderChangelogListItem(changelog, index) {
+		const hasImage = changelog.cover_image || changelog.image;
+		const imageUrl = changelog.cover_image || changelog.image;
+		const date = changelog.published_at
+			? this._formatDate(changelog.published_at)
+			: '';
+
+		return `
+			<div class="changelog-list-item" data-index="${index}">
+				<div class="changelog-list-item-main">
+					${
+						hasImage
+							? `
+						<div class="changelog-list-item-image">
+							<img src="${imageUrl}" alt="${changelog.title}" loading="lazy" />
+						</div>
+					`
+							: ''
+					}
+					<div class="changelog-list-item-content">
+						${date ? `<span class="changelog-list-item-date">${date}</span>` : ''}
+						${
+							changelog.labels && changelog.labels.length > 0
+								? `
+							<div class="changelog-list-item-labels">
+								${changelog.labels
+									.map(
+										(label) => `
+									<span class="changelog-label" style="background-color: ${label.color || '#E5E7EB'}; color: ${this._getContrastColor(label.color || '#E5E7EB')}">${label.name}</span>
+								`
+									)
+									.join('')}
+							</div>
+						`
+								: ''
+						}
+						<h3 class="changelog-list-item-title">${changelog.title}</h3>
+						${
+							changelog.excerpt || changelog.description
+								? `
+							<p class="changelog-list-item-description">${changelog.excerpt || changelog.description}</p>
+						`
+								: ''
+						}
+					</div>
+				</div>
+				<div class="changelog-list-item-arrow">
+					<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+						<path d="M9 18l6-6-6-6"/>
+					</svg>
+				</div>
+			</div>
+		`;
+	}
+
+	async _loadChangelogs() {
+		this.isLoading = true;
+
+		try {
+			const result = await this.apiService.getChangelogs();
+			this.changelogs = result.data || [];
+			this.sdk.eventBus.emit('changelog:loaded', {
+				changelogs: this.changelogs,
+			});
+		} catch (error) {
+			this.changelogs = [];
+			this.sdk.eventBus.emit('changelog:error', { error });
+		} finally {
+			this.isLoading = false;
+		}
+	}
+
+	_renderCurrentChangelog() {
+		const content = this.modalElement.querySelector('.changelog-modal-content');
+
+		if (this.isLoading) {
+			return; // Keep showing loading spinner
+		}
+
+		if (this.changelogs.length === 0) {
+			content.innerHTML = `
+				<div class="changelog-empty">
+					<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+						<path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/>
+						<polyline points="14,2 14,8 20,8"/>
+					</svg>
+					<p>No updates yet</p>
+				</div>
+			`;
+			return;
+		}
+
+		const changelog = this.changelogs[this.currentIndex];
+		const hasImage = changelog.cover_image || changelog.image;
+		const imageUrl = changelog.cover_image || changelog.image;
+		const hasMultiple = this.changelogs.length > 1;
+
+		content.innerHTML = `
+			<div class="changelog-popup-item">
+				${
+					hasImage
+						? `
+					<div class="changelog-popup-image">
+						<img src="${imageUrl}" alt="${changelog.title}" loading="lazy" />
+					</div>
+				`
+						: ''
+				}
+				<div class="changelog-popup-body">
+					<h2 class="changelog-popup-title">${changelog.title}</h2>
+					${
+						changelog.excerpt || changelog.description
+							? `
+						<p class="changelog-popup-description">${changelog.excerpt || changelog.description}</p>
+					`
+							: ''
+					}
+					<button class="changelog-popup-btn" type="button">
+						${this.options.viewButtonText || 'View Update'}
+					</button>
+				</div>
+				<div class="changelog-popup-footer">
+					${
+						hasMultiple
+							? `
+						<div class="changelog-popup-dots">
+							${this.changelogs
+								.map(
+									(_, i) => `
+								<span class="changelog-dot ${i === this.currentIndex ? 'active' : ''}" data-index="${i}"></span>
+							`
+								)
+								.join('')}
+						</div>
+					`
+							: ''
+					}
+					<button class="changelog-view-all-btn" type="button">
+						View all updates
+						<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+							<path d="M5 12h14M12 5l7 7-7 7"/>
+						</svg>
+					</button>
+				</div>
+			</div>
+		`;
+
+		// Attach view button event
+		content
+			.querySelector('.changelog-popup-btn')
+			.addEventListener('click', () => {
+				this._handleViewUpdate(changelog);
+			});
+
+		// Attach view all button event
+		content
+			.querySelector('.changelog-view-all-btn')
+			.addEventListener('click', () => {
+				this.closeModal();
+				setTimeout(() => this.openSidebar(), 350);
+			});
+
+		// Attach dot navigation events
+		if (hasMultiple) {
+			content.querySelectorAll('.changelog-dot').forEach((dot) => {
+				dot.addEventListener('click', (e) => {
+					const index = parseInt(e.target.dataset.index, 10);
+					this.currentIndex = index;
+					this._renderCurrentChangelog();
+				});
+			});
+		}
+	}
+
+	_handleViewUpdate(changelog) {
+		this.sdk.eventBus.emit('changelog:view', { changelog });
+
+		// If there's a URL, open it
+		if (changelog.url || changelog.slug) {
+			const url =
+				changelog.url ||
+				`${this.options.changelogBaseUrl || ''}/${changelog.slug}`;
+			if (this.options.openInNewTab !== false) {
+				window.open(url, '_blank', 'noopener,noreferrer');
+			} else {
+				window.location.href = url;
+			}
+		}
+
+		// Custom callback if provided
+		if (typeof this.options.onViewUpdate === 'function') {
+			this.options.onViewUpdate(changelog);
+		}
+	}
+
+	_formatDate(dateString) {
+		const date = new Date(dateString);
+		const options = { year: 'numeric', month: 'short', day: 'numeric' };
+		return date.toLocaleDateString('en-US', options);
+	}
+
+	_getContrastColor(hexColor) {
+		// Remove # if present
+		const hex = hexColor.replace('#', '');
+		const r = parseInt(hex.substr(0, 2), 16);
+		const g = parseInt(hex.substr(2, 2), 16);
+		const b = parseInt(hex.substr(4, 2), 16);
+		// Calculate luminance
+		const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+		return luminance > 0.5 ? '#1F2937' : '#FFFFFF';
+	}
+
+	hideBadge() {
+		const badge = this.element?.querySelector('.changelog-badge');
+		if (badge) {
+			badge.style.display = 'none';
+		}
+	}
+
+	showBadge() {
+		const badge = this.element?.querySelector('.changelog-badge');
+		if (badge) {
+			badge.style.display = 'block';
+		}
+	}
+
+	nextChangelog() {
+		if (this.currentIndex < this.changelogs.length - 1) {
+			this.currentIndex++;
+			this._renderCurrentChangelog();
+		}
+	}
+
+	prevChangelog() {
+		if (this.currentIndex > 0) {
+			this.currentIndex--;
+			this._renderCurrentChangelog();
+		}
+	}
+
+	async refresh() {
+		this.changelogs = [];
+		await this._loadChangelogs();
+		if (this.modalElement) {
+			this.currentIndex = 0;
+			this._renderCurrentChangelog();
+		}
+		if (this.listModalElement) {
+			this._renderChangelogList();
+		}
+	}
+
+	mount(container) {
+		super.mount(container);
+	}
+
+	destroy() {
+		if (this._escapeHandler) {
+			document.removeEventListener('keydown', this._escapeHandler);
+		}
+		if (this._listModalEscapeHandler) {
+			document.removeEventListener('keydown', this._listModalEscapeHandler);
+		}
+		this.closeModal();
+		this.closeSidebar();
+		super.destroy();
+	}
+}