feat(marketplace): seller profile page

erpnext/public/js/hub/PageContainer.vue

@@ -14,11 +14,11 @@ 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() {
@@ -28,10 +28,11 @@ 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,

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,7 +22,13 @@
 
 		</detail-view>
 
-		<h5 v-if="profile">{{ item_container_heading }}</h5>
+		<div v-if="items.length">
+			<h5>
+				{{ item_container_heading }} 
+				<small v-if="is_user_registered() && is_own_company">
+					<a class="pull-right" href="#marketplace/featured-items">Customize your Featured Items</a>
+				</small>
+			</h5>
 			<item-cards-container
 				:container_name="item_container_heading"
 				:items="items"
@@ -30,22 +36,63 @@
 				: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,40 @@ 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() {
+			if (this.page_name == 'profile'){
+				this.seller_company = null;
+				this.hub_seller = hub.settings.hub_seller_name
+			}
 			hub.call(
 				'get_hub_seller_page_info',
-				{ company: this.seller_company }
+				{ company: this.seller_company, 
+				  hub_seller: this.hub_seller }
 			).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 +159,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>