@product7/product7-js 0.1.0

package/src/widgets/messenger/views/HomeView.js

@@ -0,0 +1,300 @@
+export class HomeView {
+	constructor(state, options = {}) {
+		this.state = state;
+		this.options = options;
+		this.element = null;
+		this._unsubscribe = null;
+	}
+
+	render() {
+		this.element = document.createElement('div');
+		this.element.className = 'messenger-view messenger-home-view';
+
+		this._updateContent();
+
+		this._unsubscribe = this.state.subscribe((type) => {
+			if (
+				type === 'homeChangelogUpdate' ||
+				type === 'conversationsUpdate' ||
+				type === 'availabilityUpdate'
+			) {
+				this._updateContent();
+			}
+		});
+
+		return this.element;
+	}
+
+	_updateContent() {
+		const avatarsHtml = this._renderAvatarStack();
+		const recentChangelogHtml = this._renderRecentChangelog();
+
+		this.element.innerHTML = `
+			<div class="messenger-home-scroll">
+				<div class="messenger-home-header">
+					<div class="messenger-home-header-top">
+						<div class="messenger-home-logo">
+							${this.options.logoUrl ? `<img src="${this.options.logoUrl}" alt="${this.state.teamName}" />` : ''}
+						</div>
+						<div class="messenger-home-avatars">${avatarsHtml}</div>
+						<button class="sdk-close-btn" aria-label="Close">
+							<iconify-icon icon="ph:x-duotone" width="18" height="18"></iconify-icon>
+						</button>
+					</div>
+					<div class="messenger-home-welcome">
+						<span class="messenger-home-greeting">${this.state.greetingMessage}</span>
+						<span class="messenger-home-question">${this.state.welcomeMessage}</span>
+					</div>
+				</div>
+
+				<div class="messenger-home-body">
+					${this._renderMessageButton()}
+					${this._renderFeaturedCard()}
+					${recentChangelogHtml}
+				</div>
+			</div>
+		`;
+
+		this._attachEvents();
+	}
+
+	_renderAvatarStack() {
+		const avatars = this.state.teamAvatars;
+		const colors = ['#5856d6', '#007aff', '#34c759', '#ff9500'];
+
+		if (!avatars || avatars.length === 0) {
+			return `
+				<div class="messenger-avatar-stack">
+					<div class="sdk-avatar sdk-avatar-lg" style="background: ${colors[0]};">S</div>
+					<div class="sdk-avatar sdk-avatar-lg" style="background: ${colors[1]};">T</div>
+				</div>
+			`;
+		}
+
+		const avatarItems = avatars
+			.slice(0, 4)
+			.map((avatar, index) => {
+				if (typeof avatar === 'string' && avatar.startsWith('http')) {
+					return `<div class="sdk-avatar sdk-avatar-lg"><img src="${avatar}" alt="Team member" /></div>`;
+				}
+				return `<div class="sdk-avatar sdk-avatar-lg" style="background: ${colors[index % colors.length]};">${avatar.charAt(0).toUpperCase()}</div>`;
+			})
+			.join('');
+
+		return `<div class="messenger-avatar-stack">${avatarItems}</div>`;
+	}
+
+	_renderAvailabilityStatus() {
+		const isOnline = this.state.agentsOnline;
+		const responseTime =
+			this.state.responseTime || 'We typically reply within a few minutes';
+
+		if (isOnline) {
+			return `
+				<div class="messenger-home-availability">
+					<span class="messenger-availability-dot messenger-availability-online"></span>
+					<span class="messenger-availability-text">We're online now</span>
+				</div>
+			`;
+		}
+
+		return `
+			<div class="messenger-home-availability">
+				<span class="messenger-availability-dot messenger-availability-away"></span>
+				<span class="messenger-availability-text">${responseTime}</span>
+			</div>
+		`;
+	}
+
+	_renderMessageButton() {
+		const openConversation = this.state.conversations.find(
+			(c) => c.status === 'open'
+		);
+
+		const sendIcon = `<iconify-icon icon="ph:paper-plane-right" width="20" height="20" style="flex-shrink: 0;"></iconify-icon>`;
+		const caretIcon = `<iconify-icon icon="ph:caret-right" width="20" height="20" style="flex-shrink: 0;"></iconify-icon>`;
+
+		if (openConversation) {
+			return `
+				<button class="messenger-home-message-btn messenger-home-continue-btn" data-conversation-id="${openConversation.id}">
+					<div class="messenger-home-continue-info">
+						<span class="messenger-home-continue-label">Continue conversation</span>
+					</div>
+					${sendIcon}
+				</button>
+				<button class="messenger-home-message-btn messenger-feedback-btn" data-action="feedback">
+					<span class="messenger-home-continue-label">Leave us feedback</span>
+					${caretIcon}
+				</button>
+			`;
+		}
+
+		return `
+			<button class="messenger-home-message-btn">
+				<span>Start a conversation</span>
+				${sendIcon}
+			</button>
+			<button class="messenger-home-message-btn messenger-feedback-btn" data-action="feedback">
+				<span>Leave us feedback</span>
+				${caretIcon}
+			</button>
+		`;
+	}
+
+	_renderFeaturedCard() {
+		if (!this.options.featuredContent) {
+			return '';
+		}
+
+		const { title, description, imageUrl, action } =
+			this.options.featuredContent;
+
+		return `
+			<div class="messenger-home-featured">
+				${imageUrl ? `<img src="${imageUrl}" alt="${title}" class="messenger-home-featured-image" onerror="this.style.display='none';" />` : ''}
+				<div class="messenger-home-featured-divider"></div>
+				<div class="messenger-home-featured-content">
+					<h3>${title}</h3>
+					${description ? `<p>${description}</p>` : ''}
+					${action ? `<button class="sdk-btn sdk-btn-primary messenger-home-featured-btn" data-action="${action.type}" data-value="${action.value}">${action.label}</button>` : ''}
+				</div>
+			</div>
+		`;
+	}
+
+	_renderRecentChangelog() {
+		const changelogItems = this.state.homeChangelogItems;
+		if (changelogItems.length === 0) {
+			return '';
+		}
+
+		const changelogHtml = changelogItems
+			.map(
+				(item) => `
+			<div class="messenger-home-changelog-card" data-changelog-id="${item.id}">
+				${
+					item.coverImage
+						? `
+					<div class="messenger-home-changelog-cover">
+						<img src="${item.coverImage}" alt="${item.title}" onerror="this.style.display='none';" />
+						${item.coverText ? `<span class="messenger-home-changelog-cover-text">${item.coverText}</span>` : ''}
+					</div>
+				`
+						: ''
+				}
+				<div class="messenger-home-changelog-card-content">
+					<h4 class="messenger-home-changelog-card-title">${item.title}</h4>
+					<p class="messenger-home-changelog-card-desc">${item.description || ''}</p>
+				</div>
+			</div>
+		`
+			)
+			.join('');
+
+		return `
+			<div class="messenger-home-changelog-section">
+				${changelogHtml}
+			</div>
+		`;
+	}
+
+	_formatDate(dateString) {
+		if (!dateString) return '';
+		const date = new Date(dateString);
+		const now = new Date();
+		const diffDays = Math.floor((now - date) / (1000 * 60 * 60 * 24));
+
+		if (diffDays === 0) return 'Today';
+		if (diffDays === 1) return 'Yesterday';
+		if (diffDays < 7) return `${diffDays}d ago`;
+		return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+	}
+
+	_attachEvents() {
+		this.element
+			.querySelector('.sdk-close-btn')
+			.addEventListener('click', () => {
+				this.state.setOpen(false);
+			});
+
+		const msgBtn = this.element.querySelector(
+			'.messenger-home-message-btn:not(.messenger-feedback-btn)'
+		);
+		if (msgBtn) {
+			msgBtn.addEventListener('click', () => {
+				const convId = msgBtn.dataset.conversationId;
+				if (convId) {
+					this.state.setActiveConversation(convId);
+					this.state.setView('chat');
+					if (this.options.onSelectConversation) {
+						this.options.onSelectConversation(convId);
+					}
+				} else {
+					this.state.setActiveConversation(null);
+					this.state.setView('chat');
+				}
+			});
+		}
+
+		const feedbackBtn = this.element.querySelector('.messenger-feedback-btn');
+		if (feedbackBtn) {
+			feedbackBtn.addEventListener('click', () => {
+				if (this.options.onFeedbackClick) {
+					// Close the messenger panel first, then open the feedback modal
+					this.state.setOpen(false);
+					setTimeout(() => this.options.onFeedbackClick(), 200);
+				} else if (this.state.urls?.feedback) {
+					window.open(this.state.urls.feedback, '_blank');
+				}
+			});
+		}
+
+		this.element
+			.querySelectorAll('.messenger-home-changelog-card')
+			.forEach((card) => {
+				card.addEventListener('click', () => {
+					const item = this.state.homeChangelogItems.find(
+						(i) => i.id === card.dataset.changelogId
+					);
+					if (item?.url) {
+						window.open(item.url, '_blank');
+					} else {
+						this.state.setView('changelog');
+					}
+				});
+			});
+
+		const seeAllBtn = this.element.querySelector(
+			'.messenger-home-changelog-all'
+		);
+		if (seeAllBtn) {
+			seeAllBtn.addEventListener('click', () => {
+				this.state.setView('changelog');
+			});
+		}
+
+		const featuredBtn = this.element.querySelector(
+			'.messenger-home-featured-btn'
+		);
+		if (featuredBtn) {
+			featuredBtn.addEventListener('click', () => {
+				const action = featuredBtn.dataset.action;
+				const value = featuredBtn.dataset.value;
+				if (action === 'url') {
+					window.open(value, '_blank');
+				} else if (action === 'view') {
+					this.state.setView(value);
+				}
+			});
+		}
+	}
+
+	destroy() {
+		if (this._unsubscribe) {
+			this._unsubscribe();
+		}
+		if (this.element && this.element.parentNode) {
+			this.element.parentNode.removeChild(this.element);
+		}
+	}
+}

package/src/widgets/messenger/views/PreChatFormView.js

@@ -0,0 +1,109 @@
+export class PreChatFormView {
+	constructor(state, options = {}) {
+		this.state = state;
+		this.options = options;
+		this.element = null;
+		this._isSubmitting = false;
+	}
+
+	render() {
+		this.element = document.createElement('div');
+		this.element.className = 'messenger-view messenger-prechat-view';
+
+		this._updateContent();
+
+		return this.element;
+	}
+
+	_updateContent() {
+		this.element.innerHTML = `
+			<div class="messenger-prechat-overlay">
+				<div class="messenger-prechat-card">
+					<div class="messenger-prechat-icon">
+						<iconify-icon icon="ph:bell-ringing-duotone" width="36" height="36"></iconify-icon>
+					</div>
+					<h4 class="messenger-prechat-title">Get notified when we reply</h4>
+					<p class="messenger-prechat-subtitle">We'll send you an email so you never miss a response.</p>
+					<div class="messenger-prechat-actions">
+						<button type="button" class="messenger-prechat-yes">
+							<iconify-icon icon="ph:bell-ringing-duotone" width="16" height="16"></iconify-icon>
+							Yes, notify me
+						</button>
+						<button type="button" class="messenger-prechat-no">
+							<iconify-icon icon="ph:bell-slash-duotone" width="16" height="16"></iconify-icon>
+							No thanks
+						</button>
+					</div>
+				</div>
+			</div>
+		`;
+
+		this._attachEvents();
+	}
+
+	_attachEvents() {
+		this.element
+			.querySelector('.messenger-prechat-yes')
+			.addEventListener('click', async () => {
+				await this._handleYes();
+			});
+
+		this.element
+			.querySelector('.messenger-prechat-no')
+			.addEventListener('click', () => {
+				this._handleNo();
+			});
+	}
+
+	async _handleYes() {
+		if (this._isSubmitting) return;
+		this._isSubmitting = true;
+
+		const yesBtn = this.element.querySelector('.messenger-prechat-yes');
+		yesBtn.disabled = true;
+		yesBtn.innerHTML = `
+			<iconify-icon icon="ph:circle-notch" width="16" height="16" style="animation: spin 0.8s linear infinite;"></iconify-icon>
+			Just a moment...
+		`;
+
+		try {
+			const { name, email } = this.state.metadata || {};
+
+			if (this.options.onIdentifyContact) {
+				await this.options.onIdentifyContact({ name, email });
+			}
+
+			this.state.setIdentified(true, { name, email });
+
+			const pendingMessage = this.state.pendingMessage;
+			if (pendingMessage && this.options.onStartConversation) {
+				this.state.pendingMessage = null;
+				this.state.setView('chat');
+				await this.options.onStartConversation(
+					pendingMessage.content,
+					pendingMessage.attachments
+				);
+			} else {
+				this.state.setView('chat');
+			}
+		} catch (error) {
+			console.error('[PreChatFormView] Error:', error);
+			this._isSubmitting = false;
+			yesBtn.disabled = false;
+			yesBtn.innerHTML = `
+				<iconify-icon icon="ph:bell-ringing-duotone" width="16" height="16"></iconify-icon>
+				Yes, notify me
+			`;
+		}
+	}
+
+	_handleNo() {
+		this.state.setView('chat');
+	}
+
+	destroy() {
+		if (this.element && this.element.parentNode) {
+			this.element.parentNode.removeChild(this.element);
+		}
+	}
+}