From fa26899cd062ab2b6873d78a55c427c735d47b40 Mon Sep 17 00:00:00 2001
From: Prateeksha Singh <pratu16x7@gmail.com>
Date: Mon, 27 Aug 2018 10:49:42 +0530
Subject: [PATCH] [hub] added DetailHeaderItem to detail pages, contact seller
 button

---
 .../js/hub/components/DetailHeaderItem.vue    |  2 +-
 .../public/js/hub/components/DetailView.vue   |  8 +--
 .../public/js/hub/components/ReviewArea.vue   | 42 ++++++++++++
 erpnext/public/js/hub/marketplace.js          |  7 +-
 .../public/js/hub/pages/BuyingMessages.vue    |  2 -
 erpnext/public/js/hub/pages/Item.vue          | 65 +++++++++++++++++--
 erpnext/public/js/hub/pages/Profile.vue       | 28 ++++++--
 erpnext/public/js/hub/pages/Seller.vue        | 26 ++++++--
 8 files changed, 146 insertions(+), 34 deletions(-)
 create mode 100644 erpnext/public/js/hub/components/ReviewArea.vue

diff --git a/erpnext/public/js/hub/components/DetailHeaderItem.vue b/erpnext/public/js/hub/components/DetailHeaderItem.vue
index 5f346ff54d..8ca4379701 100644
--- a/erpnext/public/js/hub/components/DetailHeaderItem.vue
+++ b/erpnext/public/js/hub/components/DetailHeaderItem.vue
@@ -7,7 +7,7 @@
 const spacer = '<span aria-hidden="true"> · </span>';
 
 export default {
-	name: 'header-item',
+	name: 'detail-header-item',
 	props: ['value'],
 	data() {
 		return {
diff --git a/erpnext/public/js/hub/components/DetailView.vue b/erpnext/public/js/hub/components/DetailView.vue
index eca31d1e51..0e9e3f2d81 100644
--- a/erpnext/public/js/hub/components/DetailView.vue
+++ b/erpnext/public/js/hub/components/DetailView.vue
@@ -34,12 +34,8 @@
 				<div class="col-md-8">
 					<h2>{{ title }}</h2>
 					<div class="text-muted">
-						<slot name="subtitle"></slot>
+						<slot name="detail-header-item"></slot>
 					</div>
-
-					<button v-if="primary_action" class="btn btn-primary" @click="primary_action.action">
-						{{ primary_action.label }}
-					</button>
 				</div>
 
 				<div v-if="menu_items" class="col-md-1">
@@ -76,7 +72,7 @@
 
 export default {
 	name: 'detail-view',
-	props: ['title', 'subtitles', 'image', 'sections', 'show_skeleton', 'menu_items', 'primary_action'],
+	props: ['title', 'image', 'sections', 'show_skeleton', 'menu_items'],
 	data() {
 		return {
 			back_to_home_text: __('Back to Home')
diff --git a/erpnext/public/js/hub/components/ReviewArea.vue b/erpnext/public/js/hub/components/ReviewArea.vue
new file mode 100644
index 0000000000..fd2f1451cb
--- /dev/null
+++ b/erpnext/public/js/hub/components/ReviewArea.vue
@@ -0,0 +1,42 @@
+<template>
+	<div>
+		<div ref="review-area"></div>
+	</div>
+</template>
+<script>
+export default {
+	props: ['hub_item_code'],
+	mounted() {
+		this.make_input();
+	},
+	methods: {
+		make_input() {
+			this.comment_area = new frappe.ui.ReviewArea({
+				parent: this.$refs['review-area'],
+				mentions: [],
+				on_submit: this.on_submit_review.bind(this)
+			});
+
+			this.message_input = new frappe.ui.CommentArea({
+				parent: this.$refs['review-area'],
+				on_submit: (message) => {
+					this.message_input.reset();
+					this.$emit('change', message);
+				},
+				no_wrapper: true
+			});
+		},
+
+		on_submit_review(values) {
+			values.user = frappe.session.user;
+			values.username = frappe.session.user_fullname;
+
+			hub.call('add_item_review', {
+				hub_item_code: this.hub_item_code,
+				review: JSON.stringify(values)
+			})
+			// .then(this.push_review_in_review_area.bind(this));
+		}
+	}
+}
+</script>
diff --git a/erpnext/public/js/hub/marketplace.js b/erpnext/public/js/hub/marketplace.js
index a442d4cff4..c54a402377 100644
--- a/erpnext/public/js/hub/marketplace.js
+++ b/erpnext/public/js/hub/marketplace.js
@@ -1,13 +1,8 @@
 import Vue from 'vue/dist/vue.js';
 import './vue-plugins';
 
-// pages
-import './pages/messages';
-import './pages/buying_messages';
-
-import PageContainer from './PageContainer.vue';
-
 // components
+import PageContainer from './PageContainer.vue';
 import { ProfileDialog } from './components/profile_dialog';
 
 // helpers
diff --git a/erpnext/public/js/hub/pages/BuyingMessages.vue b/erpnext/public/js/hub/pages/BuyingMessages.vue
index c71864783f..2ac956fb82 100644
--- a/erpnext/public/js/hub/pages/BuyingMessages.vue
+++ b/erpnext/public/js/hub/pages/BuyingMessages.vue
@@ -28,13 +28,11 @@
 	</div>
 </template>
 <script>
-import SectionHeader from '../components/SectionHeader.vue';
 import CommentInput from '../components/CommentInput.vue';
 import ItemListCard from '../components/ItemListCard.vue';
 
 export default {
 	components: {
-		SectionHeader,
 		CommentInput,
 		ItemListCard
 	},
diff --git a/erpnext/public/js/hub/pages/Item.vue b/erpnext/public/js/hub/pages/Item.vue
index fffd37065b..ad28f4253a 100644
--- a/erpnext/public/js/hub/pages/Item.vue
+++ b/erpnext/public/js/hub/pages/Item.vue
@@ -7,27 +7,40 @@
 
 		<detail-view
 			:title="title"
-			:subtitles="subtitles"
 			:image="image"
 			:sections="sections"
 			:menu_items="menu_items"
 			:show_skeleton="init"
 		>
-			<detail-header-item slot="subtitle"
+			<detail-header-item slot="detail-header-item"
 				:value="item_subtitle"
 			></detail-header-item>
-			<detail-header-item slot="subtitle"
+			<detail-header-item slot="detail-header-item"
 				:value="item_views_and_ratings"
 			></detail-header-item>
+
+			<button slot="detail-header-item"
+				class="btn btn-primary margin-top"
+				@click="primary_action.action"
+			>
+				{{ primary_action.label }}
+			</button>
+
 		</detail-view>
+
+		<!-- <review-area :hub_item_code="hub_item_code"></review-area> -->
 	</div>
 </template>
 
 <script>
+import ReviewArea from '../components/ReviewArea.vue';
 import { get_rating_html } from '../components/reviews';
 
 export default {
 	name: 'item-page',
+	components: {
+		ReviewArea
+	},
 	data() {
 		return {
 			page_name: frappe.get_route()[1],
@@ -37,7 +50,6 @@ export default {
 
 			item: null,
 			title: null,
-			subtitles: [],
 			image: null,
 			sections: [],
 
@@ -105,6 +117,13 @@ export default {
 			}
 
 			return stats;
+		},
+
+		primary_action() {
+			return {
+				label: __('Contact Seller'),
+				action: this.contact_seller.bind(this)
+			}
 		}
 	},
 	created() {
@@ -140,8 +159,44 @@ export default {
 			];
 		},
 
-		report_item(){
+		report_item() {
 			//
+		},
+
+		contact_seller() {
+			const d = new frappe.ui.Dialog({
+				title: __('Send a message'),
+				fields: [
+					{
+						fieldname: 'to',
+						fieldtype: 'Read Only',
+						label: __('To'),
+						default: this.item.company
+					},
+					{
+						fieldtype: 'Text',
+						fieldname: 'message',
+						label: __('Message')
+					}
+				],
+				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', 'buy', this.item.hub_item_code);
+							erpnext.hub.trigger('action:send_message')
+						});
+				}
+			});
+
+			d.show();
 		}
 	}
 }
diff --git a/erpnext/public/js/hub/pages/Profile.vue b/erpnext/public/js/hub/pages/Profile.vue
index 9bbfe835c8..209fa1b18f 100644
--- a/erpnext/public/js/hub/pages/Profile.vue
+++ b/erpnext/public/js/hub/pages/Profile.vue
@@ -12,6 +12,17 @@
 			: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>
@@ -27,9 +38,12 @@ export default {
 
 			profile: null,
 			title: null,
-			subtitles: [],
 			image: null,
-			sections: []
+			sections: [],
+
+			country: '',
+			site_name: '',
+			joined_when: '',
 		};
 	},
 	created() {
@@ -45,11 +59,11 @@ export default {
 
 				this.profile = profile;
 				this.title = profile.company;
-				this.subtitles = [
-					__(profile.country),
-					__(profile.site_name),
-					__(`Joined ${comment_when(profile.creation)}`)
-				];
+
+				this.country = __(profile.country);
+				this.site_name = __(profile.site_name);
+				this.joined_when = __(`Joined ${comment_when(profile.creation)}`);
+
 				this.image = profile.logo;
 				this.sections = [
 					{
diff --git a/erpnext/public/js/hub/pages/Seller.vue b/erpnext/public/js/hub/pages/Seller.vue
index eb9cab6ccb..9fa20428ae 100644
--- a/erpnext/public/js/hub/pages/Seller.vue
+++ b/erpnext/public/js/hub/pages/Seller.vue
@@ -6,11 +6,20 @@
 	>
 		<detail-view
 			:title="title"
-			:subtitles="subtitles"
 			: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>
 
 		<h5 v-if="profile">{{ item_container_heading }}</h5>
@@ -39,9 +48,12 @@ export default {
 			item_id_fieldname: 'hub_item_code',
 
 			title: null,
-			subtitles: [],
 			image: null,
 			sections: [],
+
+			country: '',
+			site_name: '',
+			joined_when: '',
 		};
 	},
 	created() {
@@ -65,11 +77,11 @@ export default {
 				const profile = this.profile;
 
 				this.title = profile.company;
-				this.subtitles = [
-					__(profile.country),
-					__(profile.site_name),
-					__(`Joined ${comment_when(profile.creation)}`)
-				];
+
+				this.country = __(profile.country);
+				this.site_name = __(profile.site_name);
+				this.joined_when = __(`Joined ${comment_when(profile.creation)}`);
+
 				this.image = profile.logo;
 				this.sections = [
 					{