@product7/product7-js 0.6.2 → 0.6.4

package/dist/product7-js.js

@@ -11064,8 +11064,10 @@
 		}
 
 		_updateContent() {
-			const avatarsHtml = this.state.showAvatars ? this._renderAvatarStack() : '';
+			const isUnavailable = this.state.businessHoursState === 'offline' || this.state.businessHoursState === 'away';
+			const avatarsHtml = (this.state.showAvatars && !isUnavailable) ? this._renderAvatarStack() : '';
 			const recentChangelogHtml = this._renderRecentChangelog();
+			const availabilityHtml = this._renderAvailabilityStatus();
 
 			this.element.innerHTML = `
 			<div class="liveChat-home-scroll">
@@ -11079,6 +11081,7 @@
 					<div class="liveChat-home-welcome">
 						<span class="liveChat-home-greeting">${this.state.greetingMessage}</span>
 						<span class="liveChat-home-question">${this.state.welcomeMessage}</span>
+						${availabilityHtml}
 					</div>
 				</div>
 
@@ -11118,18 +11121,16 @@
 			const businessState = this.state.businessHoursState;
 
 			if (businessState === 'offline') {
-				let offlineText = 'We\'re currently closed';
+				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);
-					if (diffHours < 24) {
-						offlineText = `Opens in ${diffHours}h`;
-					} else {
-						offlineText = `Opens ${opens.toLocaleDateString('en-US', { weekday: 'short', hour: 'numeric', hour12: true })}`;
-					}
+					offlineText = diffHours < 24
+						? `Opens in ${diffHours}h`
+						: `Opens ${opens.toLocaleDateString('en-US', { weekday: 'short', hour: 'numeric', hour12: true })}`;
 				}
 				return `
 				<div class="liveChat-home-availability">
@@ -11139,6 +11140,15 @@
 			`;
 			}
 
+			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 (this.state.agentsOnline) {
 				return `
 				<div class="liveChat-home-availability">
@@ -12568,7 +12578,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
 						);