@product7/product7-js 0.6.0 → 0.6.3

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@product7/product7-js",
-	"version": "0.6.0",
+	"version": "0.6.3",
 	"description": "JavaScript SDK for integrating Product7 feedback widgets into any website",
 	"main": "dist/product7-js.js",
 	"module": "src/index.js",

package/src/styles/liveChat-core.js

@@ -6,13 +6,13 @@
 }
 
 .liveChat-launcher-right {
-  bottom: var(--spacing-5);
-  right: var(--spacing-5);
+  bottom: var(--liveChat-v-padding, var(--spacing-5));
+  right: var(--liveChat-h-padding, var(--spacing-5));
 }
 
 .liveChat-launcher-left {
-  bottom: var(--spacing-5);
-  left: var(--spacing-5);
+  bottom: var(--liveChat-v-padding, var(--spacing-5));
+  left: var(--liveChat-h-padding, var(--spacing-5));
 }
 
 .liveChat-launcher-btn {
@@ -92,14 +92,14 @@
 }
 
 .liveChat-panel-right {
-  bottom: 90px;
-  right: var(--spacing-5);
+  bottom: calc(var(--liveChat-v-padding, var(--spacing-5)) + 70px);
+  right: var(--liveChat-h-padding, var(--spacing-5));
   transform-origin: bottom right;
 }
 
 .liveChat-panel-left {
-  bottom: 90px;
-  left: var(--spacing-5);
+  bottom: calc(var(--liveChat-v-padding, var(--spacing-5)) + 70px);
+  left: var(--liveChat-h-padding, var(--spacing-5));
   transform-origin: bottom left;
 }
 

package/src/widgets/LiveChatWidget.js

@@ -152,6 +152,15 @@ export class LiveChatWidget extends BaseWidget {
 		const container = document.createElement('div');
 		container.className = `liveChat-widget theme-${this.liveChatOptions.theme}`;
 		container.style.zIndex = '999999';
+		container.style.setProperty(
+			'--liveChat-h-padding',
+			`${this.liveChatOptions.horizontalPadding ?? 20}px`
+		);
+		container.style.setProperty(
+			'--liveChat-v-padding',
+			`${this.liveChatOptions.verticalPadding ?? 20}px`
+		);
+		this._widgetContainer = container;
 
 		applyliveChatCustomStyles({
 			primaryColor: this.liveChatOptions.primaryColor,
@@ -248,7 +257,10 @@ export class LiveChatWidget extends BaseWidget {
 
 	async _handleStartConversation(messageContent, pendingAttachments) {
 		try {
-			if (!this.LiveChatState.isIdentified) {
+			if (
+				this.LiveChatState.requireEmailBeforeChat &&
+				!this.LiveChatState.isIdentified
+			) {
 				this.LiveChatState.pendingMessage = {
 					content: messageContent,
 					attachments: pendingAttachments,
@@ -854,8 +866,9 @@ export class LiveChatWidget extends BaseWidget {
 			if (!response?.status || !response?.data) return;
 
 			const s = response.data;
+			let stylesChanged = false;
 
-			// Only apply values that were NOT explicitly passed in options
+			// Team info
 			if (s.team_name && !this._hasExplicitOption('teamName')) {
 				this.liveChatOptions.teamName = s.team_name;
 				this.LiveChatState.teamName = s.team_name;
@@ -866,12 +879,165 @@ export class LiveChatWidget extends BaseWidget {
 			if (s.greeting_message && !this._hasExplicitOption('greetingMessage')) {
 				this.LiveChatState.greetingMessage = s.greeting_message;
 			}
+			if (s.welcome_message && !this._hasExplicitOption('welcomeMessage')) {
+				this.LiveChatState.welcomeMessage = s.welcome_message;
+			}
 			if (s.response_time && !this._hasExplicitOption('responseTime')) {
 				this.LiveChatState.responseTime = s.response_time;
 			}
+			if (
+				Array.isArray(s.team_avatars) &&
+				s.team_avatars.length > 0 &&
+				!this._hasExplicitOption('teamAvatars')
+			) {
+				this.LiveChatState.teamAvatars = s.team_avatars;
+			}
+
+			// Colors / theme
+			if (s.primary_color && !this._hasExplicitOption('primaryColor')) {
+				this.liveChatOptions.primaryColor = s.primary_color;
+				stylesChanged = true;
+			}
+			if (s.background_color && !this._hasExplicitOption('backgroundColor')) {
+				this.liveChatOptions.backgroundColor = s.background_color;
+				stylesChanged = true;
+			}
+			if (s.text_color && !this._hasExplicitOption('textColor')) {
+				this.liveChatOptions.textColor = s.text_color;
+				stylesChanged = true;
+			}
+			if (s.theme && !this._hasExplicitOption('theme')) {
+				this.liveChatOptions.theme = s.theme;
+				stylesChanged = true;
+			}
+			if (stylesChanged) {
+				applyliveChatCustomStyles({
+					primaryColor: this.liveChatOptions.primaryColor,
+					textColor: this.liveChatOptions.textColor,
+					backgroundColor: this.liveChatOptions.backgroundColor,
+					theme: this.liveChatOptions.theme,
+				});
+			}
+
+			// Launcher position & padding
+			if (s.launcher_position && !this._hasExplicitOption('position')) {
+				const parts = s.launcher_position.split('-');
+				this.liveChatOptions.position = parts[parts.length - 1] || 'right';
+			}
+			if (
+				typeof s.horizontal_padding === 'number' &&
+				!this._hasExplicitOption('horizontalPadding')
+			) {
+				this.liveChatOptions.horizontalPadding = s.horizontal_padding;
+			}
+			if (
+				typeof s.vertical_padding === 'number' &&
+				!this._hasExplicitOption('verticalPadding')
+			) {
+				this.liveChatOptions.verticalPadding = s.vertical_padding;
+			}
+			if (this._widgetContainer) {
+				this._widgetContainer.style.setProperty(
+					'--liveChat-h-padding',
+					`${this.liveChatOptions.horizontalPadding ?? 20}px`
+				);
+				this._widgetContainer.style.setProperty(
+					'--liveChat-v-padding',
+					`${this.liveChatOptions.verticalPadding ?? 20}px`
+				);
+			}
+
+			// Module visibility
+			if (
+				typeof s.home_module_enabled === 'boolean' &&
+				!this._hasExplicitOption('homeModuleEnabled')
+			) {
+				this.LiveChatState.homeModuleEnabled = s.home_module_enabled;
+				if (
+					!s.home_module_enabled &&
+					this.LiveChatState.currentView === 'home'
+				) {
+					this.LiveChatState.currentView =
+						this.LiveChatState.messagesModuleEnabled !== false
+							? 'messages'
+							: 'help';
+				}
+			}
+			if (
+				typeof s.messages_module_enabled === 'boolean' &&
+				!this._hasExplicitOption('messagesModuleEnabled')
+			) {
+				this.LiveChatState.messagesModuleEnabled = s.messages_module_enabled;
+				if (
+					!s.messages_module_enabled &&
+					this.LiveChatState.currentView === 'messages'
+				) {
+					this.LiveChatState.currentView =
+						this.LiveChatState.homeModuleEnabled !== false ? 'home' : 'help';
+				}
+			}
+
+			// Feature flags
+			if (
+				typeof s.show_avatars === 'boolean' &&
+				!this._hasExplicitOption('showAvatars')
+			) {
+				this.LiveChatState.showAvatars = s.show_avatars;
+			}
+			if (s.start_button_text && !this._hasExplicitOption('startButtonText')) {
+				this.LiveChatState.startButtonText = s.start_button_text;
+			}
+			if (
+				typeof s.require_email_before_chat === 'boolean' &&
+				!this._hasExplicitOption('requireEmailBeforeChat')
+			) {
+				this.LiveChatState.requireEmailBeforeChat = s.require_email_before_chat;
+			}
+			if (
+				typeof s.allow_attachments === 'boolean' &&
+				!this._hasExplicitOption('allowAttachments')
+			) {
+				this.LiveChatState.allowAttachments = s.allow_attachments;
+			}
+			if (
+				typeof s.allow_emoji === 'boolean' &&
+				!this._hasExplicitOption('allowEmoji')
+			) {
+				this.LiveChatState.allowEmoji = s.allow_emoji;
+			}
+			if (
+				typeof s.show_reply_time === 'boolean' &&
+				!this._hasExplicitOption('showReplyTime')
+			) {
+				this.LiveChatState.showReplyTime = s.show_reply_time;
+			}
+
+			// URLs
+			if (s.feedback_url && !this._hasExplicitOption('feedbackUrl')) {
+				this.liveChatOptions.feedbackUrl = s.feedback_url;
+				this.LiveChatState.urls.feedback = s.feedback_url;
+			}
+			if (s.help_url && !this._hasExplicitOption('helpUrl')) {
+				this.liveChatOptions.helpUrl = s.help_url;
+				this.LiveChatState.urls.help = s.help_url;
+			}
+			if (s.changelog_url && !this._hasExplicitOption('changelogUrl')) {
+				this.liveChatOptions.changelogUrl = s.changelog_url;
+				this.LiveChatState.urls.changelog = s.changelog_url;
+			}
+			if (s.roadmap_url && !this._hasExplicitOption('roadmapUrl')) {
+				this.liveChatOptions.roadmapUrl = s.roadmap_url;
+				this.LiveChatState.urls.roadmap = s.roadmap_url;
+			}
+
+			// Business hours availability
+			if (s.availability && typeof s.availability === 'object') {
+				this.LiveChatState.businessHoursState = s.availability.state || null;
+				this.LiveChatState.nextOpenAt = s.availability.next_open_at || null;
+				this.LiveChatState.holidayName = s.availability.holiday_name || null;
+			}
 
-			// Notify views to re-render with new values
-			this.LiveChatState._notify('availabilityUpdate', {});
+			this.LiveChatState._notify('settingsUpdate', {});
 		} catch (e) {
 			// non-fatal
 		}
@@ -893,7 +1059,7 @@ export class LiveChatWidget extends BaseWidget {
 				this.LiveChatState.onlineCount = response.data.online_count || 0;
 				this.LiveChatState.responseTime = response.data.response_time || '';
 
-				if (response.data.available_agents) {
+				if (response.data.available_agents && this.LiveChatState.showAvatars !== false) {
 					this.LiveChatState.setTeamAvatarsFromAgents(
 						response.data.available_agents
 					);

package/src/widgets/liveChat/LiveChatState.js

@@ -18,6 +18,8 @@
 		this.teamAvatars = options.teamAvatars || [];
 		this.greetingMessage = options.greetingMessage || 'Hi there 👋';
 		this.welcomeMessage = options.welcomeMessage || 'How can we help?';
+		this.startButtonText = options.startButtonText || 'Send us a message';
+		this.showAvatars = options.showAvatars !== false;
 
 		this.metadata = options.metadata || null;
 		this.isIdentified = false;
@@ -25,6 +27,13 @@
 
 		this.enableHelp = options.enableHelp !== false;
 		this.enableChangelog = options.enableChangelog !== false;
+		this.homeModuleEnabled = options.homeModuleEnabled !== false;
+		this.messagesModuleEnabled = options.messagesModuleEnabled !== false;
+
+		this.requireEmailBeforeChat = options.requireEmailBeforeChat || false;
+		this.allowAttachments = options.allowAttachments !== false;
+		this.allowEmoji = options.allowEmoji !== false;
+		this.showReplyTime = options.showReplyTime !== false;
 
 		this.agentsOnline = false;
 		this.onlineCount = 0;
@@ -32,6 +41,10 @@
 		this.responseTime =
 			options.responseTime || 'We typically reply within a few minutes';
 
+		this.businessHoursState = options.businessHoursState || null;
+		this.nextOpenAt = options.nextOpenAt || null;
+		this.holidayName = options.holidayName || null;
+
 		this.typingUsers = {};
 
 		this.isLoading = false;

package/src/widgets/liveChat/components/NavigationTabs.js

@@ -16,6 +16,9 @@
 		this._unsubscribe = this.state.subscribe((type) => {
 			if (type === 'viewChange' || type === 'unreadCountChange') {
 				this._updateActiveTab();
+			} else if (type === 'settingsUpdate') {
+				this._updateContent();
+				this._updateActiveTab();
 			}
 		});
 
@@ -23,15 +26,20 @@
 	}
 
 	_getTabs() {
-		const tabs = [
-			{ id: 'home', label: 'Home', icon: 'ph:house-simple' },
-			{
+		const tabs = [];
+
+		if (this.state.homeModuleEnabled !== false) {
+			tabs.push({ id: 'home', label: 'Home', icon: 'ph:house-simple' });
+		}
+
+		if (this.state.messagesModuleEnabled !== false) {
+			tabs.push({
 				id: 'messages',
 				label: 'Messages',
 				icon: 'ph:chats',
 				badge: this.state.unreadCount,
-			},
-		];
+			});
+		}
 
 		if (this.state.enableHelp) {
 			tabs.push({ id: 'help', label: 'Help', icon: 'ph:books' });

package/src/widgets/liveChat/views/ChatView.js

@@ -56,6 +56,8 @@
 				data.conversationId === this.state.activeConversationId
 			) {
 				this._updateContent();
+			} else if (type === 'settingsUpdate') {
+				this._updateContent();
 			}
 		});
 
@@ -102,7 +104,7 @@
 				</div>
 				<div class="liveChat-chat-header-info">
 					<span class="liveChat-chat-title">${this._escapeHtml(teamName)}</span>
-					<span class="liveChat-chat-subtitle">${isClosed ? 'Conversation resolved' : this.state.responseTime || 'Typically replies within minutes'}</span>
+					${isClosed || this.state.showReplyTime !== false ? `<span class="liveChat-chat-subtitle">${isClosed ? 'Conversation resolved' : this.state.responseTime || 'Typically replies within minutes'}</span>` : ''}
 				</div>
 				<div class="liveChat-chat-header-actions">
 					<div class="liveChat-chat-menu-wrapper">
@@ -164,18 +166,14 @@
 				</div>
 				<div class="liveChat-compose-bottom">
 					<div class="liveChat-compose-actions">
-						<button class="sdk-btn-icon liveChat-compose-attach" aria-label="Attach file">
-							<iconify-icon icon="ph:paperclip" width="20" height="20"></iconify-icon>
-						</button>
-						<button class="sdk-btn-icon liveChat-emoji-btn" aria-label="Emoji">
-							<iconify-icon icon="ph:smiley" width="20" height="20"></iconify-icon>
-						</button>
+						${this.state.allowAttachments !== false ? `<button class="sdk-btn-icon liveChat-compose-attach" aria-label="Attach file"><iconify-icon icon="ph:paperclip" width="20" height="20"></iconify-icon></button>` : ''}
+						${this.state.allowEmoji !== false ? `<button class="sdk-btn-icon liveChat-emoji-btn" aria-label="Emoji"><iconify-icon icon="ph:smiley" width="20" height="20"></iconify-icon></button>` : ''}
 					</div>
 					<button class="liveChat-compose-send" aria-label="Send" disabled>
 						<iconify-icon icon="ph:paper-plane-right" width="20" height="20"></iconify-icon>
 					</button>
 				</div>
-				<input type="file" class="liveChat-compose-file-input" multiple accept="image/*,.pdf,.doc,.docx,.xls,.xlsx,.txt,.zip" />
+				${this.state.allowAttachments !== false ? `<input type="file" class="liveChat-compose-file-input" multiple accept="image/*,.pdf,.doc,.docx,.xls,.xlsx,.txt,.zip" />` : ''}
 			</div>
 			`
 			}

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

@@ -16,7 +16,8 @@
 			if (
 				type === 'homeChangelogUpdate' ||
 				type === 'conversationsUpdate' ||
-				type === 'availabilityUpdate'
+				type === 'availabilityUpdate' ||
+				type === 'settingsUpdate'
 			) {
 				this._updateContent();
 			}
@@ -26,7 +27,7 @@
 	}
 
 	_updateContent() {
-		const avatarsHtml = this._renderAvatarStack();
+		const avatarsHtml = this.state.showAvatars ? this._renderAvatarStack() : '';
 		const recentChangelogHtml = this._renderRecentChangelog();
 
 		this.element.innerHTML = `
@@ -77,9 +78,38 @@
 	}
 
 	_renderAvailabilityStatus() {
-		const isOnline = this.state.agentsOnline;
+		const businessState = this.state.businessHoursState;
+
+		if (businessState === 'offline') {
+			let offlineText = "We're currently closed";
+			if (this.state.holidayName) {
+				offlineText = `Closed for ${this.state.holidayName}`;
+			} else if (this.state.nextOpenAt) {
+				const opens = new Date(this.state.nextOpenAt);
+				const now = new Date();
+				const diffHours = Math.round((opens - now) / 3600000);
+				offlineText = diffHours < 24
+					? `Opens in ${diffHours}h`
+					: `Opens ${opens.toLocaleDateString('en-US', { weekday: 'short', hour: 'numeric', hour12: true })}`;
+			}
+			return `
+				<div class="liveChat-home-availability">
+					<span class="liveChat-availability-dot liveChat-availability-away"></span>
+					<span class="liveChat-availability-text">${offlineText}</span>
+				</div>
+			`;
+		}
+
+		if (businessState === 'away') {
+			return `
+				<div class="liveChat-home-availability">
+					<span class="liveChat-availability-dot liveChat-availability-away"></span>
+					<span class="liveChat-availability-text">${this.state.responseTime}</span>
+				</div>
+			`;
+		}
 
-		if (isOnline) {
+		if (this.state.agentsOnline) {
 			return `
 				<div class="liveChat-home-availability">
 					<span class="liveChat-availability-dot liveChat-availability-online"></span>
@@ -115,7 +145,7 @@
 			${recentCardHtml}
 			<button class="liveChat-home-message-btn">
 				<div class="liveChat-home-continue-info">
-					<span class="liveChat-home-continue-label">Send us a message</span>
+					<span class="liveChat-home-continue-label">${this.state.startButtonText}</span>
 					<span class="liveChat-home-message-subtext">${responseTime}</span>
 				</div>
 				${sendIcon}