feat(marketplace): featured Items for sellers

erpnext/hub_node/doctype/marketplace_settings/marketplace_settings.json

@@ -1,5 +1,6 @@
 {
  "allow_copy": 0, 
+ "allow_events_in_timeline": 0, 
  "allow_guest_to_view": 0, 
  "allow_import": 0, 
  "allow_rename": 0, 
@@ -351,8 +352,8 @@
  "issingle": 1, 
  "istable": 0, 
  "max_attachments": 0, 
- "modified": "2018-09-01 17:05:59.600583", 
+ "modified": "2019-02-01 14:21:16.729848", 
- "modified_by": "cave@aperture.com", 
+ "modified_by": "Administrator", 
  "module": "Hub Node", 
  "name": "Marketplace Settings", 
  "name_case": "", 

erpnext/public/js/hub/PageContainer.vue

@@ -10,6 +10,7 @@ import Home from './pages/Home.vue';
 import Search from './pages/Search.vue';
 import Category from './pages/Category.vue';
 import SavedItems from './pages/SavedItems.vue';
+import FeaturedItems from './pages/FeaturedItems.vue';
 import PublishedItems from './pages/PublishedItems.vue';
 import Item from './pages/Item.vue';
 import Seller from './pages/Seller.vue';
@@ -32,6 +33,7 @@ function get_route_map() {
 	const registered_routes = {
 		'marketplace/profile': Profile,
 		'marketplace/saved-items': SavedItems,
+		'marketplace/featured-items': FeaturedItems,
 		'marketplace/publish': Publish,
 		'marketplace/published-items': PublishedItems,
 		'marketplace/buying': Buying,

erpnext/public/js/hub/Sidebar.vue

@@ -30,6 +30,11 @@ export default {
 					route: 'marketplace/saved-items',
 					condition: () => this.hub_registered
 				},
+				{
+					label: __('Your Featured Items'),
+					route: 'marketplace/featured-items',
+					condition: () => this.hub_registered
+				},
 				{
 					label: __('Your Profile'),
 					route: 'marketplace/profile',

erpnext/public/js/hub/components/EmptyState.vue

@@ -3,7 +3,7 @@
 		:class="{ 'bordered': bordered, 'align-center': centered, 'justify-center': centered }"
 		:style="{ height: height + 'px' }"
 	>
-		<p class="text-muted">{{ message }}</p>
+		<p class="text-muted" v-html="message" ></p>
 		<p v-if="action">
 			<button class="btn btn-default btn-xs"
 				@click="action.on_click"

erpnext/public/js/hub/pages/FeaturedItems.vue

@@ -0,0 +1,118 @@
+<template>
+	<div
+		class="marketplace-page"
+		:data-page-name="page_name"
+	>
+		<h5>{{ page_title }}</h5>
+		<p v-if="items.length"
+			class="text-muted margin-bottom">
+			{{ __('You can Feature upto 8 items.') }}
+		</p>
+
+		<item-cards-container
+			:container_name="page_title"
+			:items="items"
+			:item_id_fieldname="item_id_fieldname"
+			:on_click="go_to_item_details_page"
+			:editable="true"
+			@remove-item="on_item_remove"
+			:empty_state_message="empty_state_message"
+		>
+		</item-cards-container>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'featured-items-page',
+	data() {
+		return {
+			page_name: frappe.get_route()[1],
+			items: [],
+			item_id_fieldname: 'name',
+
+			// Constants
+			page_title: __('Your Featured Items'),
+            empty_state_message: __(`No featured items yet. Got to your 
+                                <a href="#marketplace/published-items">
+                                Published Items</a> 
+                                and feature upto 8 items that you want to highlight to your customers.`)
+		};
+	},
+	created() {
+		this.get_items();
+	},
+	methods: {
+		get_items() {
+			hub.call(
+				'get_featured_items_of_seller', {},
+				'action:item_feature'
+			)
+			.then((items) => {
+				this.items = items;
+			})
+		},
+
+		go_to_item_details_page(hub_item_name) {
+			frappe.set_route(`marketplace/item/${hub_item_name}`);
+		},
+
+		on_item_remove(hub_item_name) {
+			const grace_period = 5000;
+			let reverted = false;
+			let alert;
+
+			const undo_remove = () => {
+				this.toggle_item(hub_item_name);;
+				reverted = true;
+				alert.hide();
+				return false;
+			}
+
+			const item_name = this.items.filter(item => item.hub_item_name === hub_item_name);
+
+			alert = frappe.show_alert(__(`<span>${item_name} removed.
+				<a href="#" data-action="undo-remove"><b>Undo</b></a></span>`),
+				grace_period/1000,
+				{
+					'undo-remove': undo_remove.bind(this)
+				}
+			);
+
+			this.toggle_item(hub_item_name, false);
+
+			setTimeout(() => {
+				if(!reverted) {
+					this.remove_item_from_featured_items(hub_item_name);
+				}
+			}, grace_period);
+		},
+
+		remove_item_from_featured_items(hub_item_name) {
+			erpnext.hub.trigger('action:item_feature');
+			hub.call('remove_item_from_seller_featured_items', {
+				hub_item_name,
+				hub_user: frappe.session.user
+			})
+			.then(() => {
+				this.get_items();
+			})
+			.catch(e => {
+				console.log(e);
+			});
+		},
+
+		// By default show
+		toggle_item(hub_item_name, show=true) {
+			this.items = this.items.map(item => {
+				if(item.name === hub_item_name) {
+					item.seen = show;
+				}
+				return item;
+			});
+		}
+	}
+}
+</script>
+
+<style scoped></style>

erpnext/public/js/hub/pages/Item.vue

@@ -72,6 +72,11 @@ export default {
 					condition: hub.is_user_registered() && !this.is_own_item,
 					action: this.add_to_saved_items
 				},
+				{
+					label: __('Add to Featured Item'),
+					condition: hub.is_user_registered() && this.is_own_item,
+					action: this.add_to_featured_items
+				},
 				{
 					label: __('Report this Item'),
 					condition: !this.is_own_item,
@@ -212,6 +217,21 @@ export default {
 			});
 		},
 
+		add_to_featured_items() {
+			hub.call('add_item_to_seller_featured_items', {
+				hub_item_name: this.hub_item_name,
+				hub_user: frappe.session.user
+			},)
+			.then(() => {
+				const featured_items_link = `<b><a href="#marketplace/featured-items">${__('Added to Featured Items')}</a></b>`
+				frappe.show_alert(featured_items_link);
+				erpnext.hub.trigger('action:item_feature');
+			})
+			.catch(e => {
+				console.error(e);
+			});
+		},
+
 		make_contact_seller_dialog() {
 			this.contact_seller_dialog = new frappe.ui.Dialog({
 				title: __('Send a message'),