Update messages UI

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

@@ -1,12 +1,4 @@
 function get_item_card_html(item) {
-	if (item.recent_message) {
-		return get_buying_item_message_card_html(item);
-	}
-
-	if (item.recent_messages) {
-		return get_selling_item_message_card_html(item);
-	}
-
 	const item_name = item.item_name || item.name;
 	const title = strip_html(item_name);
 	const img_url = item.image;
@@ -120,20 +112,23 @@ function get_buying_item_message_card_html(item) {
 	const content = strip_html(message.content)
 
 	// route
-	if (!item.route) {
+	item.route = `marketplace/buying/${item.hub_item_code}`
-		item.route = `marketplace/item/${item.hub_item_code}`
-	}
-
 
 	const item_html = `
-		<div class="item-message-card" data-route="${item.route}">
+		<div class="col-md-7">
-			<img class="item-image" src="${item.image}">
+			<div class="hub-list-item" data-route="${item.route}">
-			<div class="message-body">
+				<div class="hub-list-left">
-				<span class="text-muted">${comment_when(message.creation, true)}</span>
+					<img class="hub-list-image" src="${item.image}">
-				<span class="bold">${item_name}</span>
+					<div class="hub-list-body ellipsis">
-				<div class="ellipsis">
+						<div class="hub-list-title">${item_name}</div>
-					<span>${sender}: </span>
+						<div class="hub-list-subtitle ellipsis">
-					<span>${content}</span>
+							<span>${sender}: </span>
+							<span>${content}</span>
+						</div>
+					</div>
+				</div>
+				<div class="hub-list-right">
+					<span class="text-muted">${comment_when(message.creation, true)}</span>
 				</div>
 			</div>
 		</div>
@@ -152,7 +147,7 @@ function get_selling_item_message_card_html(item) {
 	}
 
 	let received_messages = '';
-	item.recent_messages.forEach(message => {
+	item.received_messages.forEach(message => {
 		const sender = message.sender === frappe.session.user ? 'You' : message.sender
 		const content = strip_html(message.content)
 
@@ -183,5 +178,8 @@ function get_selling_item_message_card_html(item) {
 }
 
 export {
-	get_item_card_html
+	get_item_card_html,
+	get_local_item_card_html,
+	get_buying_item_message_card_html,
+	get_selling_item_message_card_html
 }

erpnext/public/js/hub/components/items_container.js

@@ -3,7 +3,7 @@ import { get_item_card_html } from './item_card';
 function get_item_card_container_html(items, title='', get_item_html = get_item_card_html, action='') {
 	const items_html = (items || []).map(item => get_item_html(item)).join('');
 	const title_html = title
-		? `<div class="hub-items-header margin-bottom flex">
+		? `<div class="hub-items-header flex">
 				<h4>${title}</h4>
 				${action}
 			</div>`

erpnext/public/js/hub/marketplace.js

@@ -91,10 +91,10 @@ erpnext.hub.Marketplace = class Marketplace {
 				<li class="hub-sidebar-item text-muted" data-route="marketplace/publish">
 					${__('Publish Products')}
 				</li>
-				<li class="hub-sidebar-item text-muted" data-route="marketplace/selling-messages">
+				<li class="hub-sidebar-item text-muted" data-route="marketplace/selling">
 					${__('Selling')}
 				</li>
-				<li class="hub-sidebar-item text-muted" data-route="marketplace/buying-messages">
+				<li class="hub-sidebar-item text-muted" data-route="marketplace/buying">
 					${__('Buying')}
 				</li>
 				`
@@ -218,20 +218,12 @@ erpnext.hub.Marketplace = class Marketplace {
 			this.subpages['my-products'] = new erpnext.hub.PublishedProductsPage(this.$body);
 		}
 
-		if (route[1] === 'buying-messages' && !this.subpages['buying-messages']) {
-			this.subpages['buying-messages'] = new erpnext.hub.Messages(this.$body, 'Buying');
-		}
-
-		if (route[1] === 'selling-messages' && !this.subpages['selling-messages']) {
-			this.subpages['selling-messages'] = new erpnext.hub.Messages(this.$body, 'Selling');
-		}
-
 		if (route[1] === 'buying' && !this.subpages['buying']) {
-			this.subpages['buying'] = new erpnext.hub.MessageList(this.$body, 'Buying');
+			this.subpages['buying'] = new erpnext.hub.Buying(this.$body);
 		}
 
 		if (route[1] === 'selling' && !this.subpages['selling']) {
-			this.subpages['selling'] = new erpnext.hub.MessageList(this.$body, 'Selling');
+			this.subpages['selling'] = new erpnext.hub.Selling(this.$body, 'Selling');
 		}
 
 		// dont allow unregistered users to access registered routes

erpnext/public/js/hub/pages/home.js

@@ -0,0 +1,60 @@
+import SubPage from './subpage';
+import { make_search_bar } from '../components/search_bar';
+import { get_item_card_container_html } from '../components/items_container';
+import { get_item_card_html } from '../components/item_card';
+
+erpnext.hub.Home = class Home extends SubPage {
+	make_wrapper() {
+		super.make_wrapper();
+
+		make_search_bar({
+			wrapper: this.$wrapper,
+			on_search: keyword => {
+				frappe.set_route('marketplace', 'search', keyword);
+			}
+		});
+	}
+
+	refresh() {
+		this.get_items_and_render();
+	}
+
+	get_items_and_render() {
+		this.$wrapper.find('.hub-items-container').empty();
+		this.get_data()
+			.then(data => {
+				this.render(data);
+			});
+	}
+
+	get_data() {
+		return hub.call('get_data_for_homepage', { country: frappe.defaults.get_user_default('country') });
+	}
+
+	render(data) {
+		let html = get_item_card_container_html(data.random_items, __('Explore'));
+		this.$wrapper.append(html);
+
+		if (data.items_by_country.length) {
+			html = get_item_card_container_html(data.items_by_country, __('Near You'));
+			this.$wrapper.append(html);
+		}
+
+		const category_items = data.category_items;
+
+		if (category_items) {
+			Object.keys(category_items).map(category => {
+				const items = category_items[category];
+				const see_all_link = `<p data-route="marketplace/category/${category}">See All</p>`;
+
+				html = get_item_card_container_html(
+					items,
+					__(category),
+					get_item_card_html,
+					see_all_link
+				);
+				this.$wrapper.append(html);
+			});
+		}
+	}
+}

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

@@ -1,21 +1,18 @@
 import SubPage from './subpage';
 import { get_item_card_container_html } from '../components/items_container';
+import { get_buying_item_message_card_html } from '../components/item_card';
+import { get_selling_item_message_card_html } from '../components/item_card';
 import { get_empty_state } from '../components/empty_state';
 
-erpnext.hub.Messages = class Messages extends SubPage {
+erpnext.hub.Buying = class Buying extends SubPage {
-	make_wrapper() {
-		super.make_wrapper();
-	}
-
 	refresh() {
-		const messages_of = this.options[0];
+		this.get_items_for_messages().then((items) => {
-		this.get_items_for_messages(messages_of).then((items) => {
 			this.empty();
 			if (items.length) {
 				items.map(item => {
-					item.route = `marketplace/${messages_of.toLowerCase()}/${item.hub_item_code}`
+					item.route = `marketplace/buying/${item.hub_item_code}`
 				})
-				this.render(items, __(messages_of));
+				this.render(items, __('Buying'));
 			}
 
 			if (!items.length && !items.length) {
@@ -25,7 +22,7 @@ erpnext.hub.Messages = class Messages extends SubPage {
 	}
 
 	render(items = [], title) {
-		const html = get_item_card_container_html(items, title);
+		const html = get_item_card_container_html(items, title, get_buying_item_message_card_html);
 		this.$wrapper.append(html);
 	}
 
@@ -34,18 +31,40 @@ erpnext.hub.Messages = class Messages extends SubPage {
 		this.$wrapper.html(empty_state);
 	}
 
-	get_items_for_messages(messages_of) {
+	get_items_for_messages() {
-		if (messages_of === 'Buying') {
+		return hub.call('get_buying_items_for_messages', {}, 'action:send_message');
-			return hub.call('get_buying_items_for_messages', {}, 'action:send_message');
+	}
-		} else if (messages_of === 'Selling') {
+}
-			return hub.call('get_selling_items_for_messages');
+
-		} else {
+erpnext.hub.Selling = class Selling extends SubPage {
-			frappe.throw('Invalid message type');
+	refresh() {
-		}
+		this.get_items_for_messages().then((items) => {
+			this.empty();
+			if (items.length) {
+				items.map(item => {
+					item.route = `marketplace/selling/${item.hub_item_code}`
+				})
+				this.render(items, __('Selling'));
+			}
+
+			if (!items.length && !items.length) {
+				this.render_empty_state();
+			}
+		});
 	}
 
-	get_interactions() {
+	render(items = [], title) {
-		return hub.call('get_sellers_with_interactions', { for_seller: hub.settings.company_email });
+		const html = get_item_card_container_html(items, title, get_selling_item_message_card_html);
+		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_items_for_messages() {
+		return hub.call('get_selling_items_for_messages', {});
 	}
 }
 
@@ -82,4 +101,4 @@ function get_message_html(message) {
 			<p>${message.content}</p>
 		</div>
 	`;
-}
+}

erpnext/public/less/hub.less

@@ -192,27 +192,47 @@ body[data-route^="marketplace/"] {
 		margin-bottom: 20px;
 	}
 
-	.item-message-card {
+	.hub-list-item {
-		overflow: auto;
+		display: flex;
-		max-width: 600px;
+		justify-content: space-between;
+		align-items: center;
+		border: 1px solid @border-color;
 		margin-bottom: 15px;
 		border-radius: 3px;
-		border: 1px solid @border-color;
+	}
-		.message-body {
+
-			padding: 10px;
+	.hub-list-left {
-		}
+		display: flex;
-		.item-image {
+		align-items: center;
-			float: left;
+		max-width: 90%;
-			height: 50px;
+	}
-			width: 50px;
+
-			object-fit: contain;
+	.hub-list-right {
-			margin: 10px;
+		padding-right: 15px;
-		}
+	}
-		.frappe-timestamp {
+
-			float: right;
+	.hub-list-image {
+		width: 58px;
+		height: 58px;
+		border-right: 1px solid @border-color;
+
+		&::after {
+			font-size: 12px;
 		}
 	}
 
+	.hub-list-body {
+		padding: 12px 15px;
+	}
+
+	.hub-list-title {
+		font-weight: bold;
+	}
+
+	.hub-list-subtitle {
+		color: @text-muted;
+	}
+
 	.selling-item-message-card {
 		max-width: 500px;
 		margin-bottom: 15px;