[IMPROVE][Omnichannel] More info and better design of Past Chats List

app/livechat/client/stylesheets/livechat.css

@@ -5,6 +5,7 @@
 	--primary-font-color: #444444;
 	--secondary-font-color: #7f7f7f;
 	--info-font-color: #aaaaaa;
+	--color-gray: #9ea2a8;
 }
 
 .flex-list {
@@ -639,3 +640,53 @@
 	width: 100%;
 	height: 100%;
 }
+
+.chat-history-item {
+	cursor: pointer;
+
+	border-bottom: 2px solid #f2f3f5;
+}
+
+.open {
+	padding-left: 4% !important;
+}
+
+.contact-chat-history-messages-list .message-actions {
+	visibility: hidden;
+}
+
+.chat-history-item-count-msg {
+	margin-top: 1%;
+
+	color: grey;
+
+	font-family: Inter;
+	font-size: 12px;
+	font-weight: bold;
+	font-style: normal;
+	line-height: 16px;
+}
+
+.closing-message-body-wrapper {
+	margin-top: 3%;
+}
+
+.closing-message-title {
+	color: var(--color-dark-light);
+
+	font-family: Inter;
+	font-size: 12px;
+	font-weight: bold;
+	font-style: normal;
+	line-height: 16px;
+}
+
+.closing-message-text {
+	color: var(--color-gray);
+
+	font-family: Inter;
+	font-size: 12px;
+	font-weight: 500;
+	font-style: italic;
+	line-height: 16px;
+}

app/livechat/client/ui.js

@@ -32,10 +32,10 @@ TabBar.addButton({
 
 TabBar.addButton({
 	groups: ['live'],
-	id: 'visitor-history',
-	i18nTitle: 'Past_Chats',
+	id: 'conatct-chat-history',
+	i18nTitle: 'Contact_Chat_History',
 	icon: 'clock',
-	template: 'visitorHistory',
+	template: 'contactChatHistory',
 	order: 11,
 });
 

app/livechat/client/views/app/tabbar/contactChatHistory.html

@@ -0,0 +1,44 @@
+<template name='contactChatHistory'>
+	{{#if isReady}}
+		{{#if canSearch}}
+			<div class="control rocket-search-input">
+				<form class="search-form" role="form">
+					<div class="rc-input">
+						<label class="rc-input__label">
+							<div class="rc-input__wrapper">
+								<div class="rc-input__icon">
+									{{> icon block="rc-input__icon-svg" icon='magnifier'}}
+								</div>
+								<input type="text" class="rc-input__element" name="chat-search" id="chat-search" placeholder="{{_ 'Search_Chat_History'}}" autocomplete="off" aria-label="{{_ 'Search_Chat_History'}}" />
+							</div>
+						</label>
+					</div>
+				</form>
+			</div>
+		{{/if}}
+		<div class="rocket-search-result">
+			{{#if hasChatHistory}}
+				<div class="flex-tab__result js-list">
+					<ul class='list clearfix'>
+						{{#each item in history}}
+							{{> contactChatHistoryItem item}}
+						{{/each}}
+					</ul>
+				</div>
+			{{else}}
+				{{#if isSearching}}
+					<h2>{{_ "No_results_found"}}</h2>
+				{{else}}
+					<h2>{{_ "No_previous_chat_found"}}</h2>
+				{{/if}}
+			{{/if}}
+		</div>
+	{{else}}
+		{{> loading}}
+	{{/if}}
+	{{#if showChatHistoryMessages}}
+		<div class="rc-user-info-container flex-nav">
+			{{> contactChatHistoryMessages (chatHistoryMessagesContext)}}
+		</div>
+	{{/if}}
+</template>

app/livechat/client/views/app/tabbar/contactChatHistory.js

@@ -0,0 +1,150 @@
+import { Tracker } from 'meteor/tracker';
+import { Template } from 'meteor/templating';
+import moment from 'moment';
+import { ReactiveVar } from 'meteor/reactive-var';
+import './contactChatHistory.html';
+import './contactChatHistoryItem.html';
+import _ from 'underscore';
+
+import { t, APIClient } from '../../../../../utils/client';
+
+
+const HISTORY_LIMIT = 50;
+
+Template.contactChatHistory.helpers({
+	isReady() {
+		return Template.instance().isReady.get();
+	},
+	hasChatHistory() {
+		return Template.instance().history.get().length > 0;
+	},
+	history() {
+		return Template.instance().history.get();
+	},
+	isLoading() {
+		return Template.instance().isLoading.get();
+	},
+	isSearching() {
+		return Template.instance().searchTerm.get().length > 0;
+	},
+	showChatHistoryMessages() {
+		return Template.instance().showChatHistoryMessages.get();
+	},
+	chatHistoryMessagesContext() {
+		return {
+			tabBar: Template.instance().tabBar,
+			clear: Template.instance().returnChatHistoryList,
+			...Template.instance().chatHistoryMessagesContext.get(),
+		};
+	},
+	canSearch() {
+		return Template.instance().canSearch.get();
+	},
+});
+
+Template.contactChatHistory.onCreated(async function() {
+	const currentData = Template.currentData();
+	this.offset = new ReactiveVar(0);
+	this.visitorId = new ReactiveVar();
+	this.history = new ReactiveVar([]);
+	this.searchTerm = new ReactiveVar('');
+	this.hasMore = new ReactiveVar(true);
+	this.isLoading = new ReactiveVar(true);
+	this.chatHistoryMessagesContext = new ReactiveVar();
+	this.showChatHistoryMessages = new ReactiveVar(false);
+	this.limit = new ReactiveVar(HISTORY_LIMIT);
+	this.isReady = new ReactiveVar(false);
+	this.canSearch = new ReactiveVar(false);
+	this.tabBar = currentData.tabBar;
+
+	this.returnChatHistoryList = () => {
+		this.showChatHistoryMessages.set(false);
+		this.chatHistoryMessagesContext.set();
+
+		this.tabBar.setData({
+			label: 'Contact_Chat_History',
+			icon: 'clock',
+		});
+	};
+
+	this.autorun(async () => {
+		if (!this.visitorId.get() || !currentData || !currentData.rid) {
+			return;
+		}
+
+		const limit = this.limit.get();
+		const offset = this.offset.get();
+		const searchTerm = this.searchTerm.get();
+
+		let baseUrl = `livechat/visitors.searchChats/room/${ currentData.rid }/visitor/${ this.visitorId.get() }?count=${ limit }&offset=${ offset }&closedChatsOnly=true&servedChatsOnly=true`;
+		if (searchTerm) {
+			baseUrl += `&searchText=${ searchTerm }`;
+		}
+
+		this.isLoading.set(true);
+		const { history, total } = await APIClient.v1.get(baseUrl);
+		this.history.set(offset === 0 ? history : this.history.get().concat(history));
+		this.hasMore.set(total > this.history.get().length);
+		this.isLoading.set(false);
+	});
+
+	this.autorun(async () => {
+		const { room } = await APIClient.v1.get(`rooms.info?roomId=${ currentData.rid }`);
+		if (room?.v) {
+			this.visitorId.set(room.v._id);
+		}
+	});
+});
+
+Template.contactChatHistory.onRendered(function() {
+	Tracker.autorun((computation) => {
+		if (this.isLoading.get()) {
+			return;
+		}
+
+		const history = this.history.get();
+		this.canSearch.set(history && history.length > 0);
+		this.isReady.set(true);
+
+		computation.stop();
+	});
+});
+
+
+Template.contactChatHistory.events({
+	'scroll .js-list': _.throttle(function(e, instance) {
+		if (e.target.scrollTop >= e.target.scrollHeight - e.target.clientHeight - 10 && instance.hasMore.get()) {
+			instance.offset.set(instance.offset.get() + instance.limit.get());
+		}
+	}, 200),
+	'click .chat-history-item'(event, instance) {
+		event.preventDefault();
+		event.stopPropagation();
+
+		const { _id: rid, v: { name, username } = { }, closedAt } = this;
+
+		const closedAtLabel = t('Closed_At');
+		const closedDay = moment(closedAt).format('MMM D YYYY');
+
+		instance.chatHistoryMessagesContext.set({
+			label: `${ name || username }, ${ closedAtLabel } ${ closedDay }`,
+			rid,
+		});
+
+		instance.showChatHistoryMessages.set(true);
+	},
+	'keyup #chat-search': _.debounce(function(e, instance) {
+		if (e.keyCode === 13) {
+			return e.preventDefault();
+		}
+
+		const { value } = e.target;
+
+		if (e.keyCode === 40 || e.keyCode === 38) {
+			return e.preventDefault();
+		}
+
+		instance.offset.set(0);
+		instance.searchTerm.set(value);
+	}, 300),
+});

app/livechat/client/views/app/tabbar/contactChatHistoryItem.html

@@ -0,0 +1,26 @@
+<template name='contactChatHistoryItem'>
+	<li class='message chat-history-item' id='{{_id}}'>
+		<button aria-label="{{servedBy.username}}" class="thumb user-card-message" data-username="{{servedBy.username}}">
+			{{> avatar username=servedBy.username}}
+		</button>
+		<div class="message-body-wrapper">
+			<div class="title border-component-color color-info-font-color">
+				<button type="button" class="user user-card-message color-primary-font-color" data-username="{{servedBy.username}}" tabindex="1">{{servedBy.username}}</button>
+				<time class="time" title='{{date}} {{time}}' datetime='{{date}} {{time}}'>{{closedAt}}</time>
+			</div>
+			<div class="chat-history-item-count-msg" dir="auto">
+				{{#if $gt msgs 0}}
+					<p>{{{_ 'message_counter' counter=i18nMessageCounter count=msgs }}}</p>
+				{{else}}
+					<p>{{_ "No_messages_yet" }}</p>
+				{{/if}}
+			</div>
+			{{#with closingMessage }}
+				<div class="closing-message-body-wrapper">
+					<div class="closing-message-title" dir="auto"><p>{{_ "Closing_chat_message"}}:</p></div>
+					<div class="closing-message-text" dir="auto"><p>"{{msg}}"</p></div>
+				</div>
+			{{/with}}
+		</div>
+	</li>
+</template>

app/livechat/client/views/app/tabbar/contactChatHistoryItem.js

@@ -0,0 +1,28 @@
+import moment from 'moment';
+import './contactChatHistoryItem.html';
+import { Template } from 'meteor/templating';
+import { ReactiveVar } from 'meteor/reactive-var';
+
+Template.contactChatHistoryItem.helpers({
+	closedAt() {
+		const { closedAt } = Template.instance().room.get();
+		return moment(closedAt).format('lll');
+	},
+	closingRoomMessage() {
+		const closingObj = Template.instance().closingRoomMessage.get();
+		return closingObj.msg;
+	},
+	i18nMessageCounter() {
+		const { msgs } = this;
+		return `<span class='message-counter'>${ msgs }</span>`;
+	},
+});
+
+Template.contactChatHistoryItem.onCreated(function() {
+	this.room = new ReactiveVar();
+
+	this.autorun(async () => {
+		const currentData = Template.currentData();
+		this.room.set(currentData);
+	});
+});

app/livechat/client/views/app/tabbar/contactChatHistoryMessages.html

@@ -0,0 +1,47 @@
+<template name="contactChatHistoryMessages">
+	<header class="contextual-bar__header">
+        <div class="contextual-bar__header-data">
+            <button class="rc-button rc-button--nude contextual-bar__header-back-btn js-back" title="{{_ 'Return'}}">
+                <i class="icon-angle-left"></i>
+            </button>
+            {{> icon icon="clock" block="contextual-bar__header-icon"}}
+            <h1 class="contextual-bar__header-title">{{label}}</h1>
+        </div>
+        <button class="contextual-bar__header-close js-close" aria-label="{{_ "Close"}}">
+            {{> icon block="contextual-bar__header-close-icon" icon="plus"}}
+        </button>
+	</header>
+	<section class="contextual-bar__content flex-tab contact-chat-history-messages">
+        <div class="control rocket-search-input">
+            <form class="search-form" role="form">
+                <div class="rc-input">
+                    <label class="rc-input__label">
+                        <div class="rc-input__wrapper">
+                            <div class="rc-input__icon">
+                                {{> icon block="rc-input__icon-svg" icon='magnifier'}}
+                            </div>
+                            <input type="text" class="rc-input__element" name="message-search" id="message-search" placeholder="{{_ 'Search_Messages'}}" autocomplete="off" aria-label="{{_ 'Search_Messages'}}" />
+                        </div>
+                    </label>
+                </div>
+            </form>
+        </div>
+        {{#if $and isSearching empty }}
+            <div class="rocket-search-result">
+                <h2>{{_ "No_results_found"}}</h2>
+            </div>
+        {{else}}
+            <div class="flex-tab__result js-list">
+                <ul class="list clearfix contact-chat-history-messages-list">
+                    {{# with messageContext}}
+                        {{#each msg in messages}}{{> message msg=msg room=room subscription=subscription settings=settings u=u}}{{/each}}
+                    {{/with}}
+
+                    {{#if isLoading}}
+                        {{> loading}}
+                    {{/if}}
+                </ul>
+            </div>
+        {{/if}}
+	</section>
+</template>