feat(messages): split messages into buying and selling

- messages will be organized by their purpose, i.e Buying and Selling
- on clicking the buying item, the message room page will be opened
where sellers can communicate
- invalidate cache using event key

erpnext/public/js/hub/components/detail_view.js

@@ -33,6 +33,12 @@ function get_detail_view_html(item, allow_edit) {
 			${__('Saved')}
 		</button>`;
 
+	const contact_seller_button = item.hub_seller !== hub.settings.company_email
+		? `<button class="btn btn-primary" data-action="contact_seller">
+			${__('Contact Seller')}
+		</button>`
+		: '';
+
 	let menu_items = '';
 
 	if(allow_edit) {
@@ -69,9 +75,7 @@ function get_detail_view_html(item, allow_edit) {
 
 					<div class="page-actions detail-page-actions">
 						${favourite_button}
-						<button class="btn btn-primary" data-action="contact_seller">
+						${contact_seller_button}
-							${__('Contact Seller')}
-						</button>
 					</div>
 				</div>
 				<div class="col-md-1">

erpnext/public/js/hub/components/item_card.js

@@ -15,11 +15,16 @@ function get_item_card_html(item) {
 	let dot_spacer = '<span aria-hidden="true"> · </span>';
 	subtitle = subtitle.join(dot_spacer);
 
+	// route
+	if (!item.route) {
+		item.route = `marketplace/item/${item.hub_item_code}`
+	}
+
 	const item_html = `
 		<div class="col-md-3 col-sm-4 col-xs-6">
 			<div class="hub-card"
 				data-hub-item-code="${item.hub_item_code}"
-				data-route="marketplace/item/${item.hub_item_code}">
+				data-route="${item.route}">
 
 				<div class="hub-card-header level">
 					<div class="ellipsis">

erpnext/public/js/hub/hub_call.js

@@ -2,7 +2,7 @@ frappe.provide('hub');
 frappe.provide('erpnext.hub');
 
 erpnext.hub.cache = {};
-hub.call = function call_hub_method(method, args={}, setup_cache_invalidation = invalidate_after_5_mins) {
+hub.call = function call_hub_method(method, args={}, clear_cache_on_event) {
 	return new Promise((resolve, reject) => {
 
 		// cache
@@ -13,7 +13,14 @@ hub.call = function call_hub_method(method, args={}, setup_cache_invalidation =
 
 		// cache invalidation
 		const clear_cache = () => delete erpnext.hub.cache[key];
-		setup_cache_invalidation(clear_cache);
+
+		if (!clear_cache_on_event) {
+			invalidate_after_5_mins(clear_cache);
+		} else {
+			erpnext.hub.on(clear_cache_on_event, () => {
+				clear_cache(key)
+			});
+		}
 
 		frappe.call({
 			method: 'erpnext.hub_node.api.call_hub_method',

erpnext/public/js/hub/pages/favourites.js

@@ -26,11 +26,9 @@ erpnext.hub.Favourites = class Favourites extends SubPage {
 	}
 
 	get_favourites() {
-		return hub.call(
+		return hub.call('get_favourite_items_of_seller', {
-			'get_favourite_items_of_seller',
+			hub_seller: hub.settings.company_email
-			{ hub_seller: hub.settings.company_email },
+		}, 'action:item_favourite');
-			clear_cache => erpnext.hub.on('action:item_favourite', clear_cache)
-		);
 	}
 
 	render(items) {

erpnext/public/js/hub/pages/item.js

@@ -105,6 +105,18 @@ erpnext.hub.Item = class Item extends SubPage {
 			],
 			primary_action: ({ message }) => {
 				if (!message) return;
+
+				hub.call('send_message', {
+                    from_seller: hub.settings.company_email,
+					to_seller: this.item.hub_seller,
+					hub_item: this.item.hub_item_code,
+                    message
+				})
+				.then(() => {
+					d.hide();
+					frappe.set_route('marketplace', 'messages');
+					erpnext.hub.trigger('action:send_message')
+				});
 			}
 		});
 

erpnext/public/js/hub/pages/messages.js

@@ -1,72 +1,59 @@
 import SubPage from './subpage';
-import { make_search_bar } from '../components/search_bar';
+import { get_item_card_container_html } from '../components/items_container';
+import { get_empty_state } from '../components/empty_state';
 
 erpnext.hub.Messages = class Messages extends SubPage {
 	make_wrapper() {
 		super.make_wrapper();
-
-        const html = `
-            <div class="row">
-                <div class="col-md-5">
-                    <div class="seller-list"></div>
-                </div>
-                <div class="col-md-7">
-                    ${get_message_area_html()}
-                </div>
-            </div>
-        `;
-
-        make_search_bar({
-            wrapper: this.$wrapper,
-            on_search: keyword => {
-
-            },
-            placeholder: __('Search for messages')
-        })
-
-        this.$wrapper.append(html);
-
-        this.message_input = new frappe.ui.CommentArea({
-            parent: this.$wrapper.find('.message-input'),
-            on_submit: (message) => {
-                this.message_input.reset();
-
-                // append message html
-                const $message_list = this.$wrapper.find('.message-list');
-                const message_html = get_message_html({
-                    sender: hub.settings.company_email,
-                    content: message
-                });
-                $message_list.append(message_html);
-                frappe.dom.scroll_to_bottom($message_list);
-
-                const to_seller = frappe.get_route()[2];
-                hub.call('send_message', {
-                    from_seller: hub.settings.company_email,
-                    to_seller,
-                    message
-                });
-            },
-            no_wrapper: true
-        });
 	}
 
 	refresh() {
-        this.get_interactions()
+		const res = Promise.all([
-            .then(sellers => {
+			this.get_buying_items(),
-                const html = sellers.map(get_list_item_html).join('');
+			this.get_selling_items()
-                this.$wrapper.find('.seller-list').html(html);
+		]);
-            });
 
-        this.get_messages()
+		res.then(([buying_items, selling_items]) => {
-            .then(messages => {
+			this.empty();
-                const $message_list = this.$wrapper.find('.message-list');
+
-                const html = messages.map(get_message_html).join('');
+			if (buying_items.length) {
-                $message_list.html(html);
+				buying_items.map(item => {
-                frappe.dom.scroll_to_bottom($message_list);
+					item.route = `marketplace/buy/${item.hub_item_code}`
+				})
+				this.render(buying_items, __('Buying'));
+			}
+
+			if (selling_items.length) {
+				// selling_items.map(item => {
+				// 	item.route = `marketplace/sell/${item.hub_item_code}/${}`
+				// });
+				this.render(selling_items, __('Selling'));
+			}
+
+			if (!buying_items.length && !selling_items.length) {
+				this.render_empty_state();
+			}
 		});
 	}
 
+	render(items = [], title) {
+		const html = get_item_card_container_html(items, title);
+		this.$wrapper.append(html);
+	}
+
+	render_empty_state() {
+		const empty_state = get_empty_state(__('You haven\'t interacted with any seller yet.'));
+		this.$wrapper.html(empty_state);
+	}
+
+	get_buying_items() {
+		return hub.call('get_buying_items_for_messages', {}, 'action:send_message');
+	}
+
+	get_selling_items() {
+		return hub.call('get_selling_items_for_messages');
+	}
+
 	get_interactions() {
 		return hub.call('get_sellers_with_interactions', { for_seller: hub.settings.company_email });
 	}