Merge pull request #16611 from karthikeyan5/hotfix-marketplace-features

feat(marketplace): seller profile page

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,14 +10,15 @@ 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';
+import SellerItems from './pages/SellerItems.vue';
 import Publish from './pages/Publish.vue';
 import Buying from './pages/Buying.vue';
 import Selling from './pages/Selling.vue';
 import Messages from './pages/Messages.vue';
-import Profile from './pages/Profile.vue';
 import NotFound from './pages/NotFound.vue';
 
 function get_route_map() {
@@ -27,11 +28,13 @@ function get_route_map() {
 		'marketplace/category/:category': Category,
 		'marketplace/item/:item': Item,
 		'marketplace/seller/:seller': Seller,
+		'marketplace/seller/:seller/items': SellerItems,
 		'marketplace/not-found': NotFound,
 	}
 	const registered_routes = {
-		'marketplace/profile': Profile,
+		'marketplace/profile': Seller,
 		'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/DetailHeaderItem.vue

@@ -1,5 +1,12 @@
 <template>
-	<p class="text-muted" v-html="header_item"></p>
+	<p class="text-muted" v-if="!Array.isArray(this.header_items)" v-html="header_items"></p>
+	<p class="text-muted" v-else>
+		<span v-for="(header_item , index) in header_items" :key="index">
+			<span v-if="index" v-html="spacer"></span>
+			<span v-if="typeof(header_item) == 'string'" v-html="header_item"></span>
+			<a v-else-if="typeof(header_item) == 'object'" @click="header_item.on_click(header_item.value)" v-html="header_item.value"></a>
+		</span>
+	</p>
 </template>
 
 <script>
@@ -11,9 +18,8 @@ export default {
 	props: ['value'],
 	data() {
 		return {
-			header_item: Array.isArray(this.value)
+			header_items: this.value,
-				? this.value.join(spacer)
+			spacer: spacer
-				: this.value
 		}
 	},
 }

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,
@@ -103,7 +108,7 @@ export default {
 				subtitle_items.push(rating + `<i class='fa fa-fw fa-star-o'></i>`)
 			}
 
-			subtitle_items.push(this.item.company);
+			subtitle_items.push({value:this.item.company,on_click:this.go_to_seller_profile_page});
 
 			return subtitle_items;
 		},
@@ -169,7 +174,9 @@ export default {
 				this.make_dialogs();
 			});
 		},
-
+		go_to_seller_profile_page(seller_name) {
+			frappe.set_route(`marketplace/seller/${seller_name}`);
+		},
 		build_data() {
 			this.title = this.item.item_name || this.item.name;
 			this.image = this.item.image;
@@ -210,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'),

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

@@ -1,81 +0,0 @@
-<template>
-	<div
-		class="marketplace-page"
-		:data-page-name="page_name"
-		v-if="init || profile"
-	>
-
-		<detail-view
-			:title="title"
-			:image="image"
-			:sections="sections"
-			:show_skeleton="init"
-		>
-
-			<detail-header-item slot="detail-header-item"
-				:value="country"
-			></detail-header-item>
-			<detail-header-item slot="detail-header-item"
-				:value="site_name"
-			></detail-header-item>
-			<detail-header-item slot="detail-header-item"
-				:value="joined_when"
-			></detail-header-item>
-
-		</detail-view>
-	</div>
-</template>
-
-<script>
-export default {
-	name: 'profile-page',
-	data() {
-		return {
-			page_name: frappe.get_route()[1],
-
-			init: true,
-
-			profile: null,
-			title: null,
-			image: null,
-			sections: [],
-
-			country: '',
-			site_name: '',
-			joined_when: '',
-		};
-	},
-	created() {
-		this.get_profile();
-	},
-	methods: {
-		get_profile() {
-			hub.call(
-				'get_hub_seller_profile',
-				{ hub_seller: hub.settings.hub_seller_name }
-			).then(profile => {
-				this.init = false;
-
-				this.profile = profile;
-				this.title = profile.company;
-
-				this.country = __(profile.country);
-				this.site_name = __(profile.site_name);
-				this.joined_when = __(`Joined ${comment_when(profile.creation)}`);
-
-				this.image = profile.logo;
-				this.sections = [
-					{
-						title: __('About the Company'),
-						content: profile.company_description
-							? __(profile.company_description)
-							: __('No description')
-					}
-				];
-			});
-		}
-	}
-}
-</script>
-
-<style scoped></style>

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

@@ -22,30 +22,77 @@
 
 		</detail-view>
 
-		<h5 v-if="profile">{{ item_container_heading }}</h5>
+		<div v-if="items.length">
-		<item-cards-container
+			<h5>
-			:container_name="item_container_heading"
+				{{ item_container_heading }} 
-			:items="items"
+				<small v-if="is_user_registered() && is_own_company">
-			:item_id_fieldname="item_id_fieldname"
+					<a class="pull-right" href="#marketplace/featured-items">Customize your Featured Items</a>
-			:on_click="go_to_item_details_page"
+				</small>
-		>
+			</h5>
-		</item-cards-container>
+			<item-cards-container
+				:container_name="item_container_heading"
+				:items="items"
+				:item_id_fieldname="item_id_fieldname"
+				:on_click="go_to_item_details_page"
+			>
+			</item-cards-container>
+			<a class="pull-right" @click="go_to_seller_items_page(seller_company)">Show all items</a>
+		</div>
+
+		<div v-if="recent_seller_reviews.length">
+			<h5>Customer Reviews</h5>
+			<div class="container" v-for="review in recent_seller_reviews" :key="review.name">
+				<br>
+				<span class="text-muted">
+					<rating :rating="review.rating" :max_rating="5"></rating>
+				</span>
+				<i class="octicon octicon-quote hidden-xs fa-fw"></i>
+				<span class="bold">{{ review.subject }}</span>
+				<i class="octicon octicon-quote hidden-xs fa-fw fa-rotate-180"></i>
+				<div class="container">
+					by {{ review.username }}
+					<a class="text-muted">
+						<span class="text-muted hidden-xs">&ndash;</span>
+						<span class="hidden-xs" v-html="comment_when(review.timestamp)"></span>
+					</a>
+				</div>
+			</div>
+		</div>
+
+		<div v-if="seller_product_view_stats.length">
+			<h5>Stats</h5>
+			<div id="seller_traffic_chart"></div>
+		</div>
+
+
+
 	</div>
 </template>
 
 <script>
+import Rating from '../components/Rating.vue';
+
+
 export default {
 	name: 'seller-page',
+	components: {
+        Rating
+    },
 	data() {
 		return {
 			page_name: frappe.get_route()[1],
 			seller_company: frappe.get_route()[2],
+			hub_seller: null,
 
 			init: true,
 
 			profile: null,
 			items:[],
+			recent_seller_reviews: [],
+			seller_product_view_stats: [],
+			seller_traffic_chart: null,
 			item_id_fieldname: 'name',
+			item_container_heading: 'Items',
 
 			title: null,
 			image: null,
@@ -60,19 +107,39 @@ export default {
 		this.get_seller_profile_and_items();
 	},
 	computed: {
-		item_container_heading() {
+		is_own_company() {
-			return __('Items by ' + this.seller_company);
+			let is_own_company = false;
-		}
+			if(this.hub_seller) {
+				if(this.hub_seller === hub.settings.hub_seller_name) {
+					is_own_company = true;
+				}
+			}
+			return is_own_company;
+		},
 	},
 	methods: {
+		comment_when(timestamp){
+			return comment_when(timestamp)
+		},
+		is_user_registered(){
+			return hub.is_user_registered()
+		},
 		get_seller_profile_and_items() {
-			hub.call(
+			let post_data = {company: this.seller_company}
-				'get_hub_seller_page_info',
+			if (this.page_name == 'profile'){
-				{ company: this.seller_company }
+				this.seller_company = null;
-			).then(data => {
+				this.hub_seller = hub.settings.hub_seller_name
+				post_data = {hub_seller: this.hub_seller}
+			}
+			hub.call('get_hub_seller_page_info', post_data)
+			.then(data => {
 				this.init = false;
 				this.profile = data.profile;
 				this.items = data.items;
+				this.item_container_heading = data.is_featured_item? "Features Items":"Popular Items";
+				this.hub_seller = this.items[0].hub_seller;
+				this.recent_seller_reviews = data.recent_seller_reviews;
+				this.seller_product_view_stats = data.seller_product_view_stats;
 
 				const profile = this.profile;
 
@@ -91,11 +158,41 @@ export default {
 							: __('No description')
 					}
 				];
+
+				setTimeout(() => this.init_seller_traffic_chart(), 1);
+				
 			});
 		},
 
 		go_to_item_details_page(hub_item_name) {
 			frappe.set_route(`marketplace/item/${hub_item_name}`);
+		},
+		go_to_seller_items_page(hub_seller) {
+			frappe.set_route(`marketplace/seller/${hub_seller}/items`);
+		},
+		init_seller_traffic_chart() {
+			let lables = []
+			let tooltip_lables = {}
+			let datasets = [{name:"Product Views",chartType: 'line',values: []}]
+			this.seller_product_view_stats.map((stat) => {
+				lables.push(stat.date.substring(5));
+				tooltip_lables[stat.date.substring(5)] = new Date(stat.date).toDateString();
+				datasets[0].values.push(stat.view_count);
+			});
+			let data = {labels: lables, datasets:datasets, tooltip_lables:tooltip_lables}
+			this.seller_traffic_chart = new Chart( "#seller_traffic_chart", { // or DOM element
+			data: data,
+
+			title: "Daily Product Views",
+			type: 'axis-mixed', // or 'bar', 'line', 'pie', 'percentage'
+			height: 300,
+			colors: ['purple', '#ffa3ef', 'light-blue'],
+
+			tooltipOptions: {
+			formatTooltipX: d => this.seller_traffic_chart.data.tooltip_lables[d],
+			formatTooltipY: d => d + ' Views',
+			}
+		});
 		}
 	}
 }

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

@@ -0,0 +1,57 @@
+<template>
+	<div
+		class="marketplace-page"
+		:data-page-name="page_name"
+		v-if="init || items.length"
+	>
+		<h5>{{ item_container_heading }}</h5>
+		<item-cards-container
+			:container_name="item_container_heading"
+			:items="items"
+			:item_id_fieldname="item_id_fieldname"
+			:on_click="go_to_item_details_page"
+		>
+		</item-cards-container>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'seller-items-page',
+	data() {
+		return {
+			page_name: frappe.get_route()[1],
+			seller_company: frappe.get_route()[2],
+
+			init: true,
+			items:[],
+			item_id_fieldname: 'name',
+		};
+	},
+	created() {
+		this.get_seller_and_items();
+	},
+	computed: {
+		item_container_heading() {
+			return __('Items by ' + this.seller_company);
+		}
+	},
+	methods: {
+		get_seller_and_items() {
+			hub.call(
+				'get_items',
+				{ company: this.seller_company }
+			).then(data => {
+				this.init = false;
+				this.items = data;
+			});
+		},
+
+		go_to_item_details_page(hub_item_name) {
+			frappe.set_route(`marketplace/item/${hub_item_name}`);
+		}
+	}
+}
+</script>
+
+<style scoped></style>