@product7/product7-js 0.6.0 → 0.6.3

package/dist/product7-js.js

@@ -4292,13 +4292,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 {
@@ -4378,14 +4378,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;
 }
 
@@ -8755,6 +8755,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;
@@ -8762,6 +8764,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;
@@ -8769,6 +8778,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;
@@ -9202,6 +9215,9 @@
 			this._unsubscribe = this.state.subscribe((type) => {
 				if (type === 'viewChange' || type === 'unreadCountChange') {
 					this._updateActiveTab();
+				} else if (type === 'settingsUpdate') {
+					this._updateContent();
+					this._updateActiveTab();
 				}
 			});
 
@@ -9209,15 +9225,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' });
@@ -9675,6 +9696,8 @@
 					data.conversationId === this.state.activeConversationId
 				) {
 					this._updateContent();
+				} else if (type === 'settingsUpdate') {
+					this._updateContent();
 				}
 			});
 
@@ -9721,7 +9744,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">
@@ -9783,18 +9806,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>
 			`
 			}
@@ -11034,7 +11053,8 @@
 				if (
 					type === 'homeChangelogUpdate' ||
 					type === 'conversationsUpdate' ||
-					type === 'availabilityUpdate'
+					type === 'availabilityUpdate' ||
+					type === 'settingsUpdate'
 				) {
 					this._updateContent();
 				}
@@ -11044,7 +11064,7 @@
 		}
 
 		_updateContent() {
-			const avatarsHtml = this._renderAvatarStack();
+			const avatarsHtml = this.state.showAvatars ? this._renderAvatarStack() : '';
 			const recentChangelogHtml = this._renderRecentChangelog();
 
 			this.element.innerHTML = `
@@ -11095,9 +11115,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>
@@ -11133,7 +11182,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}
@@ -11619,6 +11668,15 @@
 			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,
@@ -11715,7 +11773,10 @@
 
 		async _handleStartConversation(messageContent, pendingAttachments) {
 			try {
-				if (!this.LiveChatState.isIdentified) {
+				if (
+					this.LiveChatState.requireEmailBeforeChat &&
+					!this.LiveChatState.isIdentified
+				) {
 					this.LiveChatState.pendingMessage = {
 						content: messageContent,
 						attachments: pendingAttachments,
@@ -12321,8 +12382,9 @@
 				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;
@@ -12333,12 +12395,165 @@
 				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
 			}
@@ -12360,7 +12575,7 @@
 					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
 						);