Isomorphic marketplace (frappe#15384)

* feat: Make marketplace run on hub server in Guest mode

* fix: Skip page actions on server

* fix: Limit PageContainer to marketplace route

* fix(eslint): Add hub variable to globals

.eslintrc

@@ -51,8 +51,7 @@
 	"globals": {
 		"frappe": true,
 		"erpnext": true,
-		"schools": true,
-		"education": true,
+		"hub": true,
 
 		"$": true,
 		"jQuery": true,

erpnext/public/build.json

@@ -3,6 +3,9 @@
         "public/less/erpnext.less",
         "public/less/hub.less"
     ],
+    "css/marketplace.css": [
+        "public/less/hub.less"
+    ],
     "js/erpnext-web.min.js": [
         "public/js/website_utils.js",
         "public/js/shopping_cart.js"

erpnext/public/js/hub/PageContainer.vue

@@ -53,8 +53,10 @@ export default {
 	},
 	mounted() {
 		frappe.route.on('change', () => {
-			this.set_current_page();
-			frappe.utils.scroll_to(0);
+			if (frappe.get_route()[0] === 'marketplace') {
+				this.set_current_page();
+				frappe.utils.scroll_to(0);
+			}
 		});
 	},
 	methods: {

erpnext/public/js/hub/hub_call.js

@@ -22,13 +22,23 @@ hub.call = function call_hub_method(method, args={}, clear_cache_on_event) { //
 			});
 		}
 
-		frappe.call({
-			method: 'erpnext.hub_node.api.call_hub_method',
-			args: {
-				method,
-				params: args
-			}
-		}).then(r => {
+		let res;
+		if (hub.is_server) {
+			res = frappe.call({
+				method: 'hub.hub.api.' + method,
+				args
+			});
+		} else {
+			res = frappe.call({
+				method: 'erpnext.hub_node.api.call_hub_method',
+				args: {
+					method,
+					params: args
+				}
+			});
+		}
+
+		res.then(r => {
 			if (r.message) {
 				const response = r.message;
 				if (response.error) {

erpnext/public/js/hub/marketplace.js

@@ -12,8 +12,10 @@ import EventEmitter from './event_emitter';
 
 frappe.provide('hub');
 frappe.provide('erpnext.hub');
+frappe.provide('frappe.route');
 
 $.extend(erpnext.hub, EventEmitter.prototype);
+$.extend(frappe.route, EventEmitter.prototype);
 
 erpnext.hub.Marketplace = class Marketplace {
 	constructor({ parent }) {
@@ -28,15 +30,18 @@ erpnext.hub.Marketplace = class Marketplace {
 			this.setup_events();
 			this.refresh();
 
-			if (!hub.is_seller_registered()) {
-				this.page.set_primary_action('Become a Seller', this.show_register_dialog.bind(this))
-			} else {
-				this.page.set_secondary_action('Add Users', this.show_add_user_dialog.bind(this));
+			if (!hub.is_server) {
+				if (!hub.is_seller_registered()) {
+					this.page.set_primary_action('Become a Seller', this.show_register_dialog.bind(this))
+				} else {
+					this.page.set_secondary_action('Add Users', this.show_add_user_dialog.bind(this));
+				}
 			}
 		});
 	}
 
 	setup_header() {
+		if (hub.is_server) return;
 		this.page.set_title(__('Marketplace'));
 	}
 
@@ -76,9 +81,11 @@ erpnext.hub.Marketplace = class Marketplace {
 			render: h => h(PageContainer)
 		});
 
-		erpnext.hub.on('seller-registered', () => {
-			this.page.clear_primary_action();
-		});
+		if (!hub.is_server) {
+			erpnext.hub.on('seller-registered', () => {
+				this.page.clear_primary_action();
+			});
+		}
 	}
 
 	refresh() {
@@ -182,7 +189,7 @@ erpnext.hub.Marketplace = class Marketplace {
 	}
 
 	update_hub_settings() {
-		return frappe.db.get_doc('Marketplace Settings').then(doc => {
+		return hub.get_settings().then(doc => {
 			hub.settings = doc;
 		});
 	}
@@ -198,6 +205,15 @@ Object.assign(hub, {
 			.filter(hub_user => hub_user.user === frappe.session.user)
 			.length === 1;
 	},
+
+	get_settings() {
+		if (frappe.session.user === 'Guest') {
+			return Promise.resolve({
+				registered: 0
+			});
+		}
+		return frappe.db.get_doc('Marketplace Settings');
+	}
 });
 
 /**

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

@@ -60,9 +60,9 @@ export default {
 	},
 	methods: {
 		get_items() {
-			hub.call('get_data_for_homepage', {
+			hub.call('get_data_for_homepage', frappe.defaults ? {
 				country: frappe.defaults.get_user_default('country')
-			})
+			} : null)
 			.then((data) => {
 				this.show_skeleton = false;
 

erpnext/public/less/hub.less

@@ -1,7 +1,7 @@
 @import "variables.less";
 @import (reference) "desk.less";
 
-body[data-route^="marketplace/"] {
+body[data-route*="marketplace"] {
 	.layout-side-section {
 		padding-top: 25px;
 		padding-left: 5px;