@product7/product7-js 0.1.0

package/src/widgets/BaseWidget.js

@@ -0,0 +1,548 @@
+export class BaseWidget {
+	static STORAGE_KEY = 'feedback_submitted';
+	static DEFAULT_COOLDOWN_DAYS = 30;
+
+	constructor(options = {}) {
+		this.id = options.id;
+		this.sdk = options.sdk;
+		this.apiService = options.apiService;
+		this.type = options.type || 'base';
+
+		this.options = {
+			container: null,
+			position: this.sdk.config.position,
+			boardName: this.sdk.config.boardName,
+			displayMode: options.displayMode || 'panel',
+			size: options.size || 'medium',
+			primaryColor: options.primaryColor || '#155EEF',
+			backgroundColor: options.backgroundColor || '#ffffff',
+			textColor: options.textColor || '#1F2937',
+			autoShow: false,
+			showBackdrop: true,
+			customStyles: {},
+			suppressAfterSubmission: true,
+			suppressionDays: BaseWidget.DEFAULT_COOLDOWN_DAYS,
+			trigger: true,
+			...options,
+		};
+
+		this.element = null;
+		this.panelElement = null;
+		this.backdropElement = null;
+		this.mounted = false;
+		this.destroyed = false;
+
+		this.state = {
+			isOpen: false,
+			isLoading: false,
+			isSubmitting: false,
+			title: '',
+			content: '',
+			email: '',
+			attachments: [],
+			errors: {},
+		};
+
+		this._bindMethods();
+	}
+
+	mount(container) {
+		if (this.mounted || this.destroyed) return this;
+
+		if (this.options.enabled === false) {
+			this.sdk.eventBus.emit('widget:suppressed', {
+				widget: this,
+				type: this.type,
+				reason: 'disabled',
+			});
+			return this;
+		}
+
+		if (this.options.suppressAfterSubmission && this._hasRecentlySubmitted()) {
+			this.sdk.eventBus.emit('widget:suppressed', {
+				widget: this,
+				reason: 'recently_submitted',
+			});
+			return this;
+		}
+
+		if (typeof container === 'string') {
+			container = document.querySelector(container);
+		}
+
+		if (!container) {
+			container = document.body;
+		}
+
+		this.container = container;
+		this.element = this._render();
+		this.container.appendChild(this.element);
+
+		this.mounted = true;
+		this._attachEvents();
+
+		// Bind to a custom trigger element if a selector or element was provided
+		if (this.options.trigger && this.options.trigger !== true) {
+			const triggerEl =
+				typeof this.options.trigger === 'string'
+					? document.querySelector(this.options.trigger)
+					: this.options.trigger instanceof Element
+						? this.options.trigger
+						: null;
+			if (triggerEl) {
+				triggerEl.addEventListener('click', () => this.open());
+			}
+		}
+
+		this.onMount();
+
+		if (this.options.autoShow) {
+			this.show();
+		}
+
+		this.sdk.eventBus.emit('widget:mounted', { widget: this });
+		return this;
+	}
+
+	show() {
+		if (this.element) {
+			this.element.style.display = 'block';
+		}
+		return this;
+	}
+
+	hide() {
+		if (this.element) {
+			this.element.style.display = 'none';
+		}
+		return this;
+	}
+
+	openPanel() {
+		this.state.isOpen = true;
+
+		this._renderPanel();
+		requestAnimationFrame(() => {
+			if (this.panelElement) {
+				this.panelElement.classList.add('open');
+			}
+			if (this.backdropElement) {
+				this.backdropElement.classList.add('show');
+			}
+		});
+	}
+
+	_showLoadingModal() {
+		this.state.isLoading = true;
+
+		if (this.options.showBackdrop) {
+			this.backdropElement = document.createElement('div');
+			this.backdropElement.className = 'sdk-modal-backdrop';
+			document.body.appendChild(this.backdropElement);
+		}
+
+		this.loadingElement = document.createElement('div');
+		this.loadingElement.className = 'feedback-loading-modal';
+		this.loadingElement.innerHTML = `
+			<div class="sdk-spinner"></div>
+		`;
+		document.body.appendChild(this.loadingElement);
+
+		requestAnimationFrame(() => {
+			if (this.backdropElement) {
+				this.backdropElement.classList.add('show');
+			}
+			this.loadingElement.classList.add('show');
+		});
+	}
+
+	_hideLoadingModal() {
+		this.state.isLoading = false;
+		if (this.loadingElement) {
+			this.loadingElement.remove();
+			this.loadingElement = null;
+		}
+	}
+
+	closePanel() {
+		if (this.panelElement) {
+			this.panelElement.classList.remove('open');
+		}
+		if (this.backdropElement) {
+			this.backdropElement.classList.remove('show');
+		}
+
+		this.state.isOpen = false;
+		if (this.panelElement && this.panelElement.parentNode) {
+			this.panelElement.parentNode.removeChild(this.panelElement);
+			this.panelElement = null;
+		}
+		if (this.backdropElement && this.backdropElement.parentNode) {
+			this.backdropElement.parentNode.removeChild(this.backdropElement);
+			this.backdropElement = null;
+		}
+		this._resetForm();
+	}
+
+	async submitFeedback() {
+		if (this.state.isSubmitting) return;
+
+		this._hideError();
+
+		try {
+			this.state.isSubmitting = true;
+			this._updateSubmitButton();
+
+			const payload = {
+				title: this.state.title || 'Feedback',
+				content: this.state.content,
+				email: this.state.email,
+				board_id: this.options.boardName,
+				attachments: this.state.attachments,
+			};
+
+			if (!this.state.title.trim()) {
+				this._showError('Please enter a title.');
+				return;
+			}
+
+			if (!this.state.content.trim()) {
+				this._showError('Please enter your feedback message.');
+				return;
+			}
+
+			const response = await this.apiService.submitFeedback(payload);
+
+			this._trackSubmission();
+
+			this._showSuccessInPanel();
+
+			this.sdk.eventBus.emit('feedback:submitted', {
+				widget: this,
+				feedback: response,
+			});
+		} catch (error) {
+			this._showError('Failed to submit feedback. Please try again.');
+			this.sdk.eventBus.emit('feedback:error', { widget: this, error });
+		} finally {
+			this.state.isSubmitting = false;
+			this._updateSubmitButton();
+		}
+	}
+
+	handleConfigUpdate(newConfig) {
+		this.options.theme = newConfig.theme;
+		if (this.element) {
+			this._updateTheme();
+		}
+	}
+
+	destroy() {
+		if (this.destroyed) return;
+
+		this.onDestroy();
+		this.closePanel();
+
+		if (this.element && this.element.parentNode) {
+			this.element.parentNode.removeChild(this.element);
+		}
+
+		this.destroyed = true;
+		this.mounted = false;
+		this.sdk.eventBus.emit('widget:destroyed', { widget: this });
+	}
+
+	onMount() {}
+	onDestroy() {}
+
+	_trackSubmission() {
+		try {
+			const workspace = this.sdk.config.workspace;
+			const storageKey = `${BaseWidget.STORAGE_KEY}_${workspace}`;
+			const data = {
+				submittedAt: Date.now(),
+				boardName: this.options.boardName,
+			};
+			localStorage.setItem(storageKey, JSON.stringify(data));
+		} catch (e) {
+			console.warn('Failed to track feedback submission:', e);
+		}
+	}
+
+	_hasRecentlySubmitted() {
+		const cooldownMs = this.options.suppressionDays * 24 * 60 * 60 * 1000;
+		const now = Date.now();
+
+		if (this.sdk.config.last_feedback_at) {
+			try {
+				const backendTimestamp = new Date(
+					this.sdk.config.last_feedback_at
+				).getTime();
+				if (now - backendTimestamp < cooldownMs) {
+					return true;
+				}
+			} catch (e) {
+				// Invalid date format, continue to localStorage check
+			}
+		}
+
+		try {
+			const workspace = this.sdk.config.workspace;
+			const storageKey = `${BaseWidget.STORAGE_KEY}_${workspace}`;
+			const stored = localStorage.getItem(storageKey);
+
+			if (!stored) return false;
+
+			const data = JSON.parse(stored);
+			const submittedAt = data.submittedAt;
+
+			return now - submittedAt < cooldownMs;
+		} catch (e) {
+			return false;
+		}
+	}
+
+	clearSubmissionTracking() {
+		try {
+			const workspace = this.sdk.config.workspace;
+			const storageKey = `${BaseWidget.STORAGE_KEY}_${workspace}`;
+			localStorage.removeItem(storageKey);
+		} catch (e) {
+			console.warn('Failed to clear submission tracking:', e);
+		}
+	}
+
+	shouldShow() {
+		if (!this.options.suppressAfterSubmission) return true;
+		return !this._hasRecentlySubmitted();
+	}
+
+	_render() {
+		throw new Error('_render() must be implemented by concrete widget');
+	}
+
+	_attachEvents() {
+		// Override in concrete widgets
+	}
+
+	_bindMethods() {
+		this.openPanel = this.openPanel.bind(this);
+		this.closePanel = this.closePanel.bind(this);
+		this.submitFeedback = this.submitFeedback.bind(this);
+	}
+
+	_renderPanel() {
+		if (this.panelElement) return;
+
+		if (this.options.showBackdrop && !this.backdropElement) {
+			this.backdropElement = document.createElement('div');
+			this.backdropElement.className = 'sdk-modal-backdrop';
+			document.body.appendChild(this.backdropElement);
+
+			this.backdropElement.addEventListener('click', this.closePanel);
+		}
+
+		const modeClass =
+			this.options.displayMode === 'modal'
+				? 'feedback-modal'
+				: 'feedback-panel';
+		const sizeClass = `size-${this.options.size}`;
+		this.panelElement = document.createElement('div');
+		const themeClass = `theme-${this.options.theme || 'light'}`;
+		const isLeftPosition =
+			modeClass === 'feedback-panel' &&
+			String(this.options.position).includes('left');
+		const directionClass = isLeftPosition ? 'panel-from-left' : '';
+		this.panelElement.className =
+			`${modeClass} ${sizeClass} ${themeClass} ${directionClass}`.trim();
+		this.panelElement.style.setProperty(
+			'--color-primary',
+			this.options.primaryColor
+		);
+		this.panelElement.style.setProperty(
+			'--feedback-panel-bg',
+			this.options.backgroundColor
+		);
+		this.panelElement.style.setProperty(
+			'--feedback-panel-text',
+			this.options.textColor
+		);
+		this.panelElement.innerHTML = this._getPanelHTML();
+
+		document.body.appendChild(this.panelElement);
+		this._attachPanelEvents();
+
+		const firstInput = this.panelElement.querySelector('input, textarea');
+		if (firstInput) {
+			setTimeout(() => firstInput.focus(), 350);
+		}
+	}
+
+	_getPanelHTML() {
+		return `
+      <div class="feedback-panel-content">
+<div class="feedback-panel-header">
+  <h3>Send Feedback</h3>
+  <button class="sdk-close-btn" type="button" aria-label="Close">
+    <iconify-icon icon="ph:x-duotone" width="18" height="18"></iconify-icon>
+  </button>
+</div>
+        <div class="feedback-panel-body">
+          <form class="feedback-form">
+            <div class="sdk-form-group">
+              <label class="sdk-label" for="feedback-title-${this.id}">Title <span class="sdk-required">*</span></label>
+              <input 
+                type="text" 
+                id="feedback-title-${this.id}" 
+                name="title" 
+                class="sdk-input"
+                placeholder="Brief description of your feedback"
+                value="${this.state.title}"
+              />
+            </div>
+            <div class="sdk-form-group">
+              <label class="sdk-label" for="feedback-content-${this.id}">Message <span class="sdk-required">*</span></label>
+              <textarea 
+                id="feedback-content-${this.id}" 
+                name="content" 
+                class="sdk-textarea"
+                placeholder="Tell us what you think..."
+                required
+              >${this.state.content}</textarea>
+            </div>
+            <div class="feedback-error" role="alert"></div>
+            <div class="feedback-form-actions">
+              <button type="submit" class="sdk-btn-primary sdk-btn-block">
+                ${this.state.isSubmitting ? 'Sending...' : 'Send Feedback'}
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    `;
+	}
+
+	_attachPanelEvents() {
+		const panel = this.panelElement;
+
+		panel
+			.querySelector('.sdk-close-btn')
+			.addEventListener('click', this.closePanel);
+
+		const form = panel.querySelector('.feedback-form');
+		form.addEventListener('submit', (e) => {
+			e.preventDefault();
+			this.submitFeedback();
+		});
+
+		panel
+			.querySelector('input[name="title"]')
+			.addEventListener('input', (e) => {
+				this.state.title = e.target.value;
+			});
+
+		panel
+			.querySelector('textarea[name="content"]')
+			.addEventListener('input', (e) => {
+				this.state.content = e.target.value;
+			});
+
+		const handleEscape = (e) => {
+			if (e.key === 'Escape') {
+				this.closePanel();
+				document.removeEventListener('keydown', handleEscape);
+			}
+		};
+		document.addEventListener('keydown', handleEscape);
+	}
+
+	_updateSubmitButton() {
+		if (this.panelElement) {
+			const submitBtn = this.panelElement.querySelector('.sdk-btn-primary');
+			if (submitBtn) {
+				submitBtn.disabled = this.state.isSubmitting;
+				submitBtn.innerHTML = this.state.isSubmitting
+					? `<iconify-icon icon="ph:circle-notch" width="16" height="16" style="animation: spin 0.8s linear infinite;"></iconify-icon> Sending...`
+					: `Send Feedback`;
+			}
+		}
+	}
+
+	_showError(message) {
+		if (this.panelElement) {
+			const errorElement = this.panelElement.querySelector('.feedback-error');
+			if (errorElement) {
+				errorElement.textContent = message;
+				errorElement.classList.add('show');
+			}
+		}
+	}
+
+	_hideError() {
+		if (this.panelElement) {
+			const errorElement = this.panelElement.querySelector('.feedback-error');
+			if (errorElement) {
+				errorElement.classList.remove('show');
+			}
+		}
+	}
+
+	_showSuccessInPanel() {
+		if (!this.panelElement) return;
+
+		const content = this.panelElement.querySelector('.feedback-panel-content');
+		if (!content) return;
+
+		content.innerHTML = `
+			<div style="display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; padding: 40px 24px; text-align: center;">
+				<div style="width: 56px; height: 56px; border-radius: 50%; background: #037F0C; display: flex; align-items: center; justify-content: center; margin-bottom: 20px;">
+					<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="none" stroke="#ffffff" stroke-width="24" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 256 256">
+						<polyline points="216,72 96,192 40,136"/>
+					</svg>
+				</div>
+				<h3 style="margin: 0 0 8px; font-size: 1.25rem; font-weight: 600; color: var(--feedback-panel-text, #1d1d1f);">Thank you!</h3>
+				<p style="margin: 0; font-size: 0.875rem; color: #6b7280; line-height: 1.5;">Your feedback has been submitted successfully.</p>
+			</div>
+		`;
+
+		setTimeout(() => this.closePanel(), 2000);
+	}
+
+	_resetForm() {
+		this.state.title = '';
+		this.state.content = '';
+		this.state.email = '';
+		this.state.errors = {};
+	}
+
+	_updateTheme() {
+		// No longer needed - single theme
+	}
+
+	open() {
+		this.openPanel();
+		return this;
+	}
+
+	close() {
+		this.closePanel();
+		return this;
+	}
+
+	toggle() {
+		if (this.state.isOpen) {
+			this.closePanel();
+		} else {
+			this.openPanel();
+		}
+		return this;
+	}
+
+	openModal() {
+		this.openPanel();
+	}
+
+	closeModal() {
+		this.closePanel();
+	}
+}

package/src/widgets/ButtonWidget.js

@@ -0,0 +1,104 @@
+import { BaseWidget } from './BaseWidget.js';
+
+export class ButtonWidget extends BaseWidget {
+	constructor(options) {
+		super({ ...options, type: 'button' });
+		this.isMinimized = false;
+		this._hiddenForOpenPanel = false;
+	}
+
+	_hasTrigger() {
+		return this.options.trigger === true || this.options.trigger === undefined;
+	}
+
+	_render() {
+		if (!this._hasTrigger()) {
+			// No built-in button — widget is opened programmatically or via custom trigger
+			const placeholder = document.createElement('div');
+			placeholder.style.display = 'none';
+			return placeholder;
+		}
+
+		const buttonText =
+			this.options.buttonText ||
+			this.options.triggerText ||
+			this.options.label ||
+			this.options.text ||
+			'Feedback';
+
+		const button = document.createElement('div');
+		button.className = `feedback-widget-button position-${this.options.position}`;
+		button.innerHTML = `
+      <button class="feedback-trigger-btn" type="button">
+        <svg class="feedback-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256">
+          <path d="M224,48H32a8,8,0,0,0-8,8V192a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A8,8,0,0,0,224,48Zm-8,144H40V74.19l82.59,75.71a8,8,0,0,0,10.82,0L216,74.19V192Z"/>
+        </svg>
+        <span class="feedback-text">${buttonText}</span>
+      </button>
+    `;
+
+		if (this.options.customStyles) {
+			Object.assign(button.style, this.options.customStyles);
+		}
+
+		return button;
+	}
+
+	_attachEvents() {
+		if (!this._hasTrigger()) return;
+
+		const button = this.element.querySelector('.feedback-trigger-btn');
+
+		button.addEventListener('click', () => {
+			this.openPanel();
+		});
+
+		button.addEventListener('pointerup', (e) => {
+			if (e.pointerType === 'mouse') return;
+			this.openPanel();
+		});
+	}
+
+	openPanel() {
+		if (this._hasTrigger() && !this.state.isOpen) {
+			this._hiddenForOpenPanel = true;
+			this.hide();
+		}
+		super.openPanel();
+	}
+
+	closePanel() {
+		const shouldRestoreButton = this._hiddenForOpenPanel;
+		super.closePanel();
+
+		if (shouldRestoreButton) {
+			setTimeout(() => {
+				if (!this.destroyed && !this.options._noTriggerButton) {
+					this.show();
+				}
+				this._hiddenForOpenPanel = false;
+			}, 320);
+		}
+	}
+
+	mount(container) {
+		super.mount(container);
+	}
+
+	updateText(text) {
+		const textEl = this.element?.querySelector('.feedback-text');
+		if (textEl) {
+			textEl.textContent = text;
+		}
+	}
+
+	updatePosition(position) {
+		this.options.position = position;
+		if (this.element) {
+			this.element.className = this.element.className.replace(
+				/position-\w+/,
+				`position-${position}`
+			);
+		}
+	}
+}